Commit 058f060df90e05e2dc0d43f7bae55c4637bdf1ff

Authored by 范牧
Exists in master

冲突修改

Showing 54 changed files   Show diff stats
src/components/CommodityCard/CommodityCard.vue
1 1 <template>
2   - <view class="card" @tap="toGoods(goods.id,goods.goodType)">
3   - <image mode="widthFix" :src="goods.imgurl" ></image>
4   - <view class="name">{{goods.name}}</view>
  2 + <view class="card" @tap="toGoods(goods.id?goods.id:goods.pid,goods.goodType?goods.goodType:goods.p_root_index)">
  3 + <image mode="widthFix" :src="goods.imgurl?goods.imgurl:goods.pic" ></image>
  4 + <view class="name">{{goods.name?goods.name:goods.p_name}}</view>
5 5 <view class="info">
6 6 <view class="priceBox">
7   - <view class="price">{{goods.price}}</view>
  7 + <view class="price">{{goods.price?goods.price:goods.real_price}}</view>
8 8 <view class="originCost">
9   - {{goods.rsSon.Max_Price}}
  9 + {{goods.rsSon.Max_Price?goods.rsSon.Max_Price:goods.old_price}}
10 10 </view>
11 11 </view>
12 12 <view class="trade_num">{{goods.trade_num}}人购买</view>
... ...
src/components/UniCollapseItem/UniCollapseItem.vue
... ... @@ -2,8 +2,10 @@
2 2 <view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
3 3 class="uni-collapse-cell">
4 4 <view class="uni-collapse-cell__title" @click="onClick">
  5 + <view v-if="iconText" class="uni-collapse-cell__title-iconText" v-bind:style="{background:background}">{{iconText}}</view>
5 6 <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
6 7 <text class="uni-collapse-cell__title-text">{{ title }}</text>
  8 + <text class="uni-collapse-cell__time-text">{{ time }}</text>
7 9 <!-- #ifdef MP-ALIPAY -->
8 10 <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
9 11 class="uni-collapse-cell__title-arrow">
... ... @@ -17,8 +19,7 @@
17 19 </view>
18 20 <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">
19 21 <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper"
20   - :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}"
21   - >
  22 + :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}">
22 23 <slot />
23 24 </view>
24 25 </view>
... ... @@ -38,6 +39,11 @@
38 39 type: String,
39 40 default: ''
40 41 },
  42 + time: {
  43 + // 列表时间 朱海涛加的,验光数据需要
  44 + type: String,
  45 + default: ''
  46 + },
41 47 name: {
42 48 // 唯一标识符
43 49 type: [Number, String],
... ... @@ -62,11 +68,18 @@
62 68 // 缩略图
63 69 type: String,
64 70 default: ''
  71 + },
  72 + iconText:{
  73 + //名字头像
  74 + type:String,
  75 + default:''
65 76 }
66 77 },
67 78 data() {
68 79 return {
69   - isOpen: false
  80 + isOpen: false,
  81 + background: ''
  82 +
70 83 }
71 84 },
72 85 watch: {
... ... @@ -88,6 +101,17 @@
88 101 }
89 102 }
90 103 },
  104 + computed:{
  105 + //给头像搞个随机背景颜色,验光数据页面需要
  106 + getRandomColor(){
  107 + let r = Math.floor(Math.random()*256);
  108 + let g = Math.floor(Math.random()*256);
  109 + let b = Math.floor(Math.random()*256);
  110 + let color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
  111 + this.background = color
  112 + // return color;
  113 + }
  114 + },
91 115 methods: {
92 116 onClick() {
93 117 if (this.disabled) {
... ... @@ -104,8 +128,8 @@
104 128 this.isOpen = !this.isOpen
105 129 this.collapse.onChange && this.collapse.onChange()
106 130 this.$forceUpdate()
107   - console.log(this.isOpen)
108   - }
  131 + // console.log(this.isOpen)
  132 + },
109 133 }
110 134 }
111 135 </script>
... ... @@ -140,9 +164,9 @@
140 164 }
141 165  
142 166 .uni-collapse-cell--animation {
143   - transition: transform 0s ease;
  167 + transition: transform all 0.3s ease;
144 168 transition-property: transform;
145   - transition-duration: 0s;
  169 + transition-duration: 0.3s;
146 170 transition-timing-function: ease;
147 171 }
148 172  
... ... @@ -162,7 +186,18 @@
162 186 justify-content: space-between;
163 187 align-items: center;
164 188 }
165   -
  189 + .uni-collapse-cell__title-iconText{
  190 + border: 1px solid #FFFFFF;
  191 + height: 50rpx;
  192 + width: 50rpx;
  193 + border-radius: 26rpx;
  194 + // background-color: #47A6F0;
  195 + font-size: 12px;
  196 + color: #FFFFFF;
  197 + line-height: 50rpx;
  198 + text-align: center;
  199 + margin-right: 20rpx;
  200 + }
166 201 .uni-collapse-cell__title:active {
167 202 background-color: #FFFFFF;
168 203 }
... ... @@ -171,18 +206,22 @@
171 206 height: $uni-img-size-base;
172 207 width: $uni-img-size-base;
173 208 margin-right: 10px;
  209 + // height: 50rpx;
  210 + // width: 50rpx;
  211 + // border-radius: 25rpx;
  212 + // border-radius: 25rpx;
174 213 }
175 214  
176 215 .uni-collapse-cell__title-arrow {
177 216 width: 20px;
178 217 height: 20px;
179   - transform: rotate(0deg);
  218 + transform: rotate(-90deg);
180 219 transform-origin: center center;
181 220  
182 221 }
183 222  
184 223 .uni-collapse-cell__title-arrow-active {
185   - transform: rotate(180deg);
  224 + transform: rotate(0deg);
186 225 }
187 226  
188 227 .uni-collapse-cell__title-text {
... ... @@ -197,8 +236,14 @@
197 236 /* #endif */
198 237 overflow: hidden;
199 238 text-overflow: ellipsis;
  239 + font-size: 12px;
  240 + color: #333333;
  241 + }
  242 + .uni-collapse-cell__time-text{
  243 + font-size: 12px;
  244 + color: #999999;
  245 + margin-right: 20rpx;
200 246 }
201   -
202 247 .uni-collapse-cell__content {
203 248 overflow: hidden;
204 249 }
... ...
src/components/UniSliper/UniSliper.vue
1 1 <template>
2 2 <div class="c-progress">
3 3 <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress">
4   - <div class="c-progress-inner" :style="setProgressStyle"></div>
5   - <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div>
  4 + <div class="c-progress-inner"
  5 + v-bind:style="{width: inner_width+'rpx'}"
  6 + ></div>
  7 + <!-- <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> -->
6 8 </div>
7   - <span v-if="showPerText">{{stand_width}}mm</span>
  9 + <span v-if="showPerText">{{content}}mm</span>
8 10 </div>
9 11 </template>
10 12  
... ... @@ -19,57 +21,15 @@
19 21 export default {
20 22 name: 'CProgress',
21 23 props: {
22   - percent: {
23   - type: Number,
24   - default: 60
25   - },
26   - showSlider: {
27   - type: Boolean,
28   - default: true
29   - },
30   - showPerText: {
31   - type: Boolean,
32   - default: true
33   - },
34   - // 进度条的宽度
35   - width: {
36   - type: Number,
37   - default: 300
38   - },
39   - bgColor: {
40   - type: String,
41   - default: '#ebeef5'
42   - },
43   - progressColor: {
44   - type: String,
45   - default: '#409EFF'
46   - },
47   - // 滑块的宽度
48   - sliderWidth: {
49   - type: Number,
50   - default: 20
51   - },
52   - // 颜色的类型
53   - type: {
54   - type: String,
55   - default: colorTable.default
56   - },
57   - //规格长度
58   - standard:{
59   - type: Number,
60   - default: 1.4
61   - },
62   - //初始长度
63   - stand_width:{
64   - type: Number,
65   - default: 0
66   - }
  24 + //inner的长度
  25 + inner_widthProp: Number,
  26 + //调用接口的值
  27 + contentProp: String
67 28 },
68 29 data () {
69 30 return {
70   - sliderLeft: 0, // 滑块相对父元素发x坐标
71   - progressWidth: 0, // 进度条当前的的宽度
72   - tempPercent: 0,
  31 + inner_width: this.inner_widthProp,
  32 + content: this.contentProp
73 33 }
74 34 },
75 35 computed: {
... ... @@ -103,71 +63,71 @@
103 63 this.sliderLeft = this.width / 100 * this.percent
104 64 this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度
105 65 this.tempPercent = this.percent
106   - this.addListener()
  66 + // this.addListener()
107 67 },
108   - methods: {
109   - addListener () {
110   - const slider = this.$refs.slider
111   - const progress = this.$refs.progress
112   - let isClickSlider = false
113   - let distance = 0 // 滑块与点击坐标的绝对距离
114   - progress.onclick = (e) => {
115   - // 阻止事件冒泡
116   - if (e.target == slider) {
117   - return
118   - }
119   - let curX = progress.offsetLeft
120   - this.sliderLeft = e.pageX - curX
121   - if (this.sliderLeft <= 0) {
122   - this.sliderLeft = 0
123   - }
124   - if (this.sliderLeft >= this.width) {
125   - this.sliderLeft = this.width
126   - }
127   - this._countCurPercent()
128   - }
129   - // slider.onmousedown = (e) => {
130   - // isClickSlider = true
131   - // let curX = slider.offsetLeft
132   - // distance = e.pageX - curX // 得出绝对距离
133   - // }
134   - progress.onmousemove = (e) => {
135   - if (isClickSlider) {
136   - // 判断是否已经超出进度条的长度
137   - if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) {
138   - this.sliderLeft = e.pageX - distance
139   - this._countCurPercent()
140   - }
141   - }
142   - }
143   - progress.onmouseup = () => {
144   - isClickSlider = false
145   - }
146   - },
147   - // 算出百分比
148   - _countCurPercent () {
149   - this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100))
150   - this.progressWidth = this.sliderLeft + 20
151   - // 取整的时候宽度可能不为0,所以在0和100的时候也将宽度取整
152   - if (this.tempPercent <= 0) {
153   - this.progressWidth = 0
154   - this.sliderLeft = 0
155   - }
156   - if (this.tempPercent >= 100) {
157   - this.progressWidth = this.width + 20
158   - this.sliderLeft = this.width
159   - }
160   - this.stand_width = this.tempPercent*this.standard
161   - this.stand_width = parseInt(this.stand_width/1) //取整
162   - this.$emit('percentChange', this.tempPercent)
163   - }
164   - }
  68 + // methods: {
  69 + // addListener () {
  70 + // const slider = this.$refs.slider
  71 + // const progress = this.$refs.progress
  72 + // let isClickSlider = false
  73 + // let distance = 0 // 滑块与点击坐标的绝对距离
  74 + // progress.onclick = (e) => {
  75 + // // 阻止事件冒泡
  76 + // if (e.target == slider) {
  77 + // return
  78 + // }
  79 + // let curX = progress.offsetLeft
  80 + // this.sliderLeft = e.pageX - curX
  81 + // if (this.sliderLeft <= 0) {
  82 + // this.sliderLeft = 0
  83 + // }
  84 + // if (this.sliderLeft >= this.width) {
  85 + // this.sliderLeft = this.width
  86 + // }
  87 + // this._countCurPercent()
  88 + // }
  89 + // // slider.onmousedown = (e) => {
  90 + // // isClickSlider = true
  91 + // // let curX = slider.offsetLeft
  92 + // // distance = e.pageX - curX // 得出绝对距离
  93 + // // }
  94 + // progress.onmousemove = (e) => {
  95 + // if (isClickSlider) {
  96 + // // 判断是否已经超出进度条的长度
  97 + // if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) {
  98 + // this.sliderLeft = e.pageX - distance
  99 + // this._countCurPercent()
  100 + // }
  101 + // }
  102 + // }
  103 + // progress.onmouseup = () => {
  104 + // isClickSlider = false
  105 + // }
  106 + // },
  107 + // // 算出百分比
  108 + // _countCurPercent () {
  109 + // this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100))
  110 + // this.progressWidth = this.sliderLeft + 20
  111 + // // 取整的时候宽度可能不为0,所以在0和100的时候也将宽度取整
  112 + // if (this.tempPercent <= 0) {
  113 + // this.progressWidth = 0
  114 + // this.sliderLeft = 0
  115 + // }
  116 + // if (this.tempPercent >= 100) {
  117 + // this.progressWidth = this.width + 20
  118 + // this.sliderLeft = this.width
  119 + // }
  120 + // this.stand_width = this.tempPercent*this.standard
  121 + // this.stand_width = parseInt(this.stand_width/1) //取整
  122 + // this.$emit('percentChange', this.tempPercent)
  123 + // }
  124 + // }
165 125 }
166 126 </script>
167 127  
168 128 <style scoped lang="scss">
169 129 .c-progress {
170   - $width: 400rpx;
  130 + $width: 300px;
171 131 $radius: 5px;
172 132 display: flex;
173 133 align-items: center;
... ... @@ -179,7 +139,7 @@
179 139 }
180 140  
181 141 .c-progress-outer {
182   - width: $width;
  142 + width: 420rpx;
183 143 height: 10px;
184 144 background: #ebeef5;
185 145 position: relative;
... ... @@ -187,7 +147,7 @@
187 147 align-items: center;
188 148  
189 149 .c-progress-inner {
190   - width: 100rpx;
  150 + width: 300rpx;
191 151 height: 10px;
192 152 background: #FF6B4A ;
193 153 }
... ...
... ... @@ -5,23 +5,28 @@
5 5 "style" : {
6 6 "navigationBarTitleText" : "商城一览"
7 7 }
  8 + },
  9 + {
  10 + "path" : "pages/addOpticsData/addOpticsData",
  11 + "style" : {
  12 + "navigationBarTitleText" : "验光数据"}
8 13 },
9 14 {
10   - "path" : "pages/myOrder/myOrder",
  15 + "path" : "pages/user/user",
11 16 "style" : {
12   - "navigationBarTitleText" : "我的订单"
  17 + "navigationBarTitleText" : "我的"
13 18 }
14 19 },
15 20 {
16   - "path" : "pages/cart/cart",
  21 + "path" : "pages/detailsChoiceArgs/detailsChoiceArgs",
17 22 "style" : {
18   - "navigationBarTitleText" : "购物车"
  23 + "navigationBarTitleText" : "镜片名称名称"
19 24 }
20 25 },
21 26 {
22   - "path" : "pages/frameDetail/frameDetail",
  27 + "path" : "pages/purchaseLenses/purchaseLenses",
23 28 "style" : {
24   - "navigationBarTitleText" : "产品详情"
  29 + "navigationBarTitleText" : "产品选购"
25 30 }
26 31 },
27 32 {
... ... @@ -31,12 +36,30 @@
31 36 }
32 37 },
33 38 {
34   - "path" : "pages/purchaseLenses/purchaseLenses",
  39 + "path" : "pages/myOrderPaying/myOrderPaying",
35 40 "style" : {
36   - "navigationBarTitleText" : "产品选购"
  41 + "navigationBarTitleText" : "我的订单"
37 42 }
38 43 },
39 44 {
  45 + "path" : "pages/myOrder/myOrder",
  46 + "style" : {
  47 + "navigationBarTitleText" : "我的订单"
  48 + }
  49 + },
  50 + {
  51 + "path" : "pages/cart/cart",
  52 + "style" : {
  53 + "navigationBarTitleText" : "购物车"
  54 + }
  55 + },
  56 + // {
  57 + // "path" : "pages/frameDetail/frameDetail",
  58 + // "style" : {
  59 + // "navigationBarTitleText" : "产品详情"
  60 + // }
  61 + // },
  62 + {
40 63 "path" : "pages/refundProgress/refundProgress",
41 64 "style" : {
42 65 "navigationBarTitleText" : "申请退款"
... ... @@ -55,36 +78,27 @@
55 78 }
56 79 },
57 80 {
58   - "path" : "pages/user/user",
  81 + "path" : "pages/refundment/refundWays",
59 82 "style" : {
60   - "navigationBarTitleText" : "我的"
  83 + "navigationBarTitleText" : "退款方式"
61 84 }
62 85 },
63 86 {
64   - "path" : "pages/refundment/refundWays"
65   - },
66   - {
67   - "path" : "pages/refundment/refundment"
68   - },
69   - {
70   - "path" : "pages/predelivery/predelivery"
71   - },
72   - {
73   - "path" : "pages/customerService/customerService",
  87 + "path" : "pages/refundment/refundment",
74 88 "style" : {
75   - "navigationBarTitleText" : "在线客服"
  89 + "navigationBarTitleText" : "申请退款"
76 90 }
77 91 },
78 92 {
79   - "path" : "pages/myOrderPaying/myOrderPaying",
  93 + "path" : "pages/predelivery/predelivery",
80 94 "style" : {
81   - "navigationBarTitleText" : "我的订单"
  95 + "navigationBarTitleText" : "待发货"
82 96 }
83 97 },
84 98 {
85   - "path" : "pages/detailsChoiceArgs/detailsChoiceArgs",
  99 + "path" : "pages/customerService/customerService",
86 100 "style" : {
87   - "navigationBarTitleText" : "镜片名称名称"
  101 + "navigationBarTitleText" : "在线客服"
88 102 }
89 103 },
90 104 {
... ... @@ -98,7 +112,8 @@
98 112 "style" : {
99 113 "navigationBarTitleText" : "镜框选购页"
100 114 }
101   - }
  115 + }
  116 +
102 117 ],
103 118 "globalStyle" : {
104 119 "navigationBarTextStyle" : "black",
... ... @@ -143,4 +158,4 @@
143 158 }
144 159 ]
145 160 }
146 161 -}
  162 +}
147 163 \ No newline at end of file
... ...
src/pages/addOpticsData/addOpticsData.vue
... ... @@ -0,0 +1,170 @@
  1 +<template>
  2 + <view class="wrap">
  3 + <view class="header">
  4 + <view class="headerLeft" @click=tapShow(0)>
  5 + <text>如何查看验光单?</text>
  6 + <image src="../../static/dataLook.png" mode="aspectFit"></image>
  7 + </view>
  8 + <view class="headerRight" @click=tapShow(1)>
  9 + <text>如何查看眼镜框架?</text>
  10 + <image src="../../static/glassLook.png" mode="aspectFit"></image>
  11 + </view>
  12 + </view>
  13 + <view class="dataMenu">
  14 + <uni-collapse accordion="true">
  15 + <view class="item" v-for="(loveItem,index) in loveList" :key="index">
  16 + <uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'>
  17 + <view class="loveDataInfo">
  18 + <view class="dataInfoItem">
  19 + <text>度数(SPH):</text><text>左:{{loveItem.leftSph}}</text><text>右:{{loveItem.rightSph}}</text>
  20 + </view>
  21 + <view class="dataInfoItem">
  22 + <text>散光(CYL):</text><text>左:{{loveItem.leftCyl}}</text><text>右:{{loveItem.rightCyl}}</text>
  23 + </view>
  24 + <view class="dataInfoItem">
  25 + <text>轴位(AXI):</text><text>左:{{loveItem.leftAxi}}</text><text>右:{{loveItem.rightAxi}}</text>
  26 + </view>
  27 + <view class="dataInfoItem">
  28 + <text>瞳距(PD):</text><text>{{loveItem.pd}}</text>
  29 + </view>
  30 + </view>
  31 + </uni-collapse-item>
  32 + </view>
  33 + </uni-collapse>
  34 + </view>
  35 + <view class="footer">
  36 + <button class="btn" type="default">新建验光单</button>
  37 + </view>
  38 + </view>
  39 +</template>
  40 +
  41 +<script>
  42 + import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
  43 + import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
  44 + // import uniPopup from '@/components/uni-popup/uni-popup.vue'
  45 + import store from '@/store';
  46 + export default {
  47 + components: {UniCollapse,UniCollapseItem},
  48 + data() {
  49 + return {
  50 +
  51 + };
  52 + },
  53 + onLoad: function(option) {
  54 + //获取关心的人列表
  55 + store.dispatch('myLoveList/getLoveList', {
  56 + uid: "1",
  57 + });
  58 + },
  59 + computed:{
  60 + loveList() {
  61 + console.log(this.$store.state.myLoveList.loveList)
  62 + return this.$store.state.myLoveList.loveList || []
  63 + },
  64 + },
  65 + methods:{
  66 + tapShow(item){
  67 + switch(item){
  68 + // 0左边 1右边
  69 + case '0':
  70 +
  71 + break;
  72 + case '1':
  73 +
  74 + break;
  75 + }
  76 + },
  77 + //给时间搞一个nice的格式
  78 + getRightTime(time){
  79 + //如果小于10 则返回'0'+m
  80 + function add(m){return m<10?'0'+m:m}
  81 + const oldTime = (new Date(time)).getTime()
  82 + const year = new Date(oldTime).getFullYear()
  83 + const month = new Date(oldTime).getMonth()+1
  84 + const day = new Date(oldTime).getDate()
  85 + const newTime = add(year)+'-'+add(month)+'-'+add(day)
  86 + // console.log(newTime)
  87 + return newTime
  88 + },
  89 + getFirstName(name){
  90 + return name.substring(0,1)
  91 + }
  92 + }
  93 + }
  94 +</script>
  95 +
  96 +<style lang="scss">
  97 + .wrap{
  98 + min-height: 100vh;
  99 + width: 100%;
  100 + background-color: #F2F2F2;
  101 + .header{
  102 + height: 304rpx;
  103 + width: 100%;
  104 + background-color: #FFFFFF;
  105 + display: flex;
  106 + justify-content: space-around;
  107 + align-items: center;
  108 + view{
  109 + height: 210rpx;
  110 + width: 304rpx;
  111 + background: #FDF7F5;
  112 + border-radius: 4px;
  113 + border-radius: 4px;
  114 + display: flex;
  115 + flex-direction: column;
  116 + align-items: center;
  117 + justify-content: center;
  118 + text{
  119 + font-size: 12px;
  120 + color: #333333;
  121 + }
  122 + image{
  123 + height: 144rpx;
  124 + width: 144rpx;
  125 + }
  126 + }
  127 + }
  128 + .dataMenu{
  129 + margin-top: 20rpx;
  130 + box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
  131 + width: 100%;
  132 + background-color: #FFFFFF;
  133 + .item{
  134 + padding: 0 40rpx;
  135 + .loveDataInfo{
  136 + padding: 0 44rpx 0 70rpx;
  137 + display: flex;
  138 + justify-content: space-around;
  139 + flex-direction: column;
  140 + align-items: flex-start;
  141 + .dataInfoItem{
  142 + font-size: 12px;
  143 + color: #333333;
  144 + margin-bottom: 34rpx;
  145 + text{
  146 + font-size: 12px;
  147 + color: #2A2A2A;
  148 + margin-right: 20rpx;
  149 + }
  150 + }
  151 + }
  152 + }
  153 + }
  154 + .footer{
  155 + width: 100%;
  156 + position: fixed;
  157 + bottom: 0;
  158 + left: 0;
  159 + .btn{
  160 + width: 100%;
  161 + height: 112rpx;
  162 + line-height: 112rpx;
  163 + background: #FF6B4A;
  164 + font-size: 16px;
  165 + color: #FFFFFF;
  166 + }
  167 + }
  168 + }
  169 +
  170 +</style>
... ...
src/pages/cart/cart.vue
1 1 <template>
2 2 <view class="content">
3   -
4   - <view class="card">
5   - <view class="cardHeader">
6   - <block v-if="pIsoPen">
7   - <view class="partentChecked" @click="pChange(pIsoPen)">
8   - <span class="status correct"></span>
9   - </view>
10   - </block>
11   - <block v-else>
12   - <view class="partentCheck" @click="pChange(pIsoPen)"></view>
13   - </block>
14   - <image src="../../static/store.png" mode="aspectFill"></image>
15   - <text>非常戴镜</text>
16   - </view>
  3 + <block v-if="cartList.length==0">
17 4  
18   - <view class="cardBody">
19   - <template v-if="childIsOpen.child1">
20   - <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')">
21   - <span class="status correct"></span>
  5 + </block>
  6 + <block v-else>
  7 + <view class="card">
  8 + <view class="cardHeader">
  9 + <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
  10 + @click="pChange(pIsoPen)">
  11 + <span class="correct"></span>
22 12 </view>
23   - </template>
24   - <template v-else>
25   - <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view>
26   - </template>
27   - <view class="goodInfo">
28   - <view class="imageWrap">
29   - <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
  13 + <image src="../../static/store.png" mode="aspectFill"></image>
  14 + <text>非常戴镜</text>
  15 + </view>
  16 +
  17 + <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id"
  18 + @longpress="delCart(item.cart_id,index)">
  19 + <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
  20 + @click="Change(childIsOpen[index],index)">
  21 + <span class="correct"></span>
30 22 </view>
31   - <view class="infoRight">
32   - <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
33   - <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
34   - <view class="icon"></view>
  23 + <view class="goodInfo">
  24 + <view class="imageWrap">
  25 + <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
35 26 </view>
36   - <view class="priceBox">
37   - <view class="price">¥{{198}}</view>
38   - <text>(限购{{maxCount}}副)</text>
39   - <view class="counter">
40   - <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
41   - <text>{{count}}</text>
42   - <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
  27 + <view class="infoRight">
  28 + <view class="goodName" @tap="toGoods(item.pid,item.p_root_index)">{{item.p_name}}</view>
  29 + <view class="describ" @tap="toshop(item.pid,item.p_root_index)">
  30 + <text>
  31 + <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value">
  32 + {{tag.label+`&nbsp;&nbsp;`}}
  33 + </block>
  34 + </text>
  35 + <view class="icon"></view>
  36 + </view>
  37 + <view class="priceBox">
  38 + <view class="price">¥{{item.nowPrice*item.num}}</view>
  39 + <text>(限购{{maxCount}}副)</text>
  40 + <view class="counter">
  41 + <view class="btn" disabled="this.addDisabled" type="default"
  42 + @click="counter(index,false,item.mp_id,item.sk_id,item.num,item.cart_id)">-</view>
  43 + <text>{{item.num}}</text>
  44 + <view class="btn" disabled="this.desDisabled" type="default"
  45 + @click="counter(index,true,item.mp_id,item.sk_id,item.num,item.cart_id)">+</view>
  46 + </view>
43 47 </view>
44 48 </view>
45 49 </view>
46 50 </view>
47 51 </view>
48   - <view class="cardBody">
49   - <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
50   - <template v-if="childIsOpen.child2">
51   - <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')">
52   - <span class="status correct"></span>
53   - </view>
54   - </template>
55   - <template v-else>
56   - <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view>
57   - </template>
58   - <view class="goodInfo">
59   - <view class="imageWrap">
60   - <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
61   - </view>
62   - <view class="infoRight">
63   - <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
64   - <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
65   - <view class="icon"></view>
66   - </view>
67   - <view class="priceBox">
68   - <view class="price">¥198</view>
69   - <text>(限购{{maxCount}}副)</text>
70   - <view class="counter">
71   - <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
72   - <text>{{count}}</text>
73   - <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
74   - </view>
75   - </view>
76   - </view>
77   - </view>
78   - </view>
79   - </view>
80   -
  52 + </block>
81 53 <view class="footer">
82 54 <view class="footerLeft">实付金额:<text>¥{{totalPrice}}</text></view>
83 55 <view class="footerRight">
84   - <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover">
85   - <view class="paybtn">立即支付</view>
  56 + <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover">
  57 + <view class="paybtn" >立即结算</view>
86 58 </navigator>
87 59 </view>
88 60 </view>
... ... @@ -97,50 +69,273 @@
97 69  
98 70 data() {
99 71 return {
100   - totalPrice: 360,
101   - count:1,
  72 + totalPrice: 0,
  73 + pIsoPen:false,
  74 + // childIsOpen:[],
102 75 maxCount:20,
103   - pIsoPen: false,
104   - childIsOpen:{
105   - "child1":true,
106   - "child2":true
107   - },
108 76 }
109 77 },
110 78 computed:{
  79 +
111 80 cartList() {
112   - // 也可以从 getters 获取
113   - console.log('cart-list', this.$store.state.cart.cartList);
  81 + // console.log('cart-list', this.$store.state.cart.cartList);
114 82 return this.$store.state.cart.cartList;
  83 + },
  84 + childIsOpen(){
  85 + let temp=[];
  86 + temp.length=this.$store.state.cart.cartList.length;
  87 + for (let i = 0; i < temp.length; i++) {
  88 + temp[i]= false
  89 + }
  90 + console.log('this.childisOPne===>',temp)
  91 + return temp
115 92 }
116 93 },
117 94 onLoad: function() {
  95 + // 判断是否授权
  96 + // uni.getSetting({
  97 + // success(res) {
  98 + // console.log('authSetting',res.authSetting)
  99 + // if(res.authSetting['scope.userInfo'] !== true) {
  100 +
  101 + // uni.switchTab({
  102 + // url:'/pages/user/user'
  103 + // })
  104 + // }else {
  105 + // }
  106 + // }
  107 + // })
  108 +
  109 + // console.log('usr-my',this.$store.state.user.userInfo)
  110 + // store.dispatch('cart/addCart',{
  111 + // "num":1,
  112 + // "pid": 7,//产品id
  113 + // "uid":1,
  114 + // "sk_id": 72,
  115 + // "price": 120,
  116 + // "mp_id":1,
  117 + // "checkedSKU":{
  118 + // "discount": "45",
  119 + // "in_price": "6000",
  120 + // "kc": "0",
  121 + // "model_pic": null,
  122 + // "out_price": 191.8,
  123 + // "pic": "https://glass.xiuyetang.com//upload_jk/7/7_22AE0C.jpg",
  124 + // "pid": "7",
  125 + // "real_price": 99,
  126 + // "sk_id": "89",
  127 + // "sku_name": "1.56非球面防蓝光_黑",
  128 + // "sku_shop_value": "",
  129 + // "sku_value": "58_61",
  130 + // "status": "1",
  131 + // },
  132 + // });
118 133 store.dispatch('cart/getCartList',{
119 134 uid: 1, //用户id
120 135 });
121 136 },
  137 +
122 138 methods: {
123   - counter(isadd){
  139 + // 跳转到对应的选购页面
  140 + toshop(id,type){
  141 + console.log('===',id,type)
  142 + switch(type){
  143 + case 1:
  144 + uni.navigateTo({
  145 + url: `../detailsChoiceArgs/detailsChoiceArgs?oderId=`+id+`&goodType=`+type,
  146 + success: res => {},
  147 + fail: () => {},
  148 + complete: () => {}
  149 + });
  150 + break;
  151 + case 2:
  152 + uni.navigateTo({
  153 + url: `../detailStandard/detailStandard_k?oderId=`+id+`&goodType=`+type,
  154 + success: res => {},
  155 + fail: () => {},
  156 + complete: () => {}
  157 + });
  158 + break;
  159 + case 3||4:
  160 + uni.navigateTo({
  161 + url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
  162 + success: res => {},
  163 + fail: () => {},
  164 + complete: () => {}
  165 + });
  166 + break;
  167 + // case 4:
  168 + // uni.navigateTo({
  169 + // url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
  170 + // success: res => {},
  171 + // fail: () => {},
  172 + // complete: () => {}
  173 + // });
  174 + case 5:
  175 + uni.navigateTo({
  176 + url: `../purchaseLenses/purchaseLenses?oderId=`+id+`&goodType=`+type,
  177 + success: res => {},
  178 + fail: () => {},
  179 + complete: () => {}
  180 + });
  181 + break;
  182 + default :
  183 + break
  184 + }
  185 + },
  186 + toGoods(id,type){
  187 + uni.navigateTo({
  188 + url: `../frameDetail/frameDetail?oderId=`+id,
  189 + success: res => {},
  190 + fail: () => {},
  191 + complete: () => {}
  192 + });
  193 + console.log('toGoods =====> id:'+id +"======>type:"+type)
  194 + switch(type){
  195 + case 1:
  196 + uni.navigateTo({
  197 + url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
  198 + success: res => {},
  199 + fail: () => {},
  200 + complete: () => {}
  201 + });
  202 + break;
  203 + case 2:
  204 + uni.navigateTo({
  205 + url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
  206 + success: res => {},
  207 + fail: () => {},
  208 + complete: () => {}
  209 + });
  210 + break;
  211 + case 3:
  212 + uni.navigateTo({
  213 + url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
  214 + success: res => {},
  215 + fail: () => {},
  216 + complete: () => {}
  217 + });
  218 + break;
  219 + case 4:
  220 + uni.navigateTo({
  221 + url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
  222 + success: res => {},
  223 + fail: () => {},
  224 + complete: () => {}
  225 + });
  226 + break;
  227 + default :
  228 + break
  229 + }
  230 + },
  231 +
  232 + counter(index,isadd,mp_id,sk_id,num,cart_id){
  233 + // console.log('===>>counter ===>num',num)
  234 + // console.log('===>>counter ===>isadd',isadd)
  235 + num=parseInt(num);
124 236 if(isadd){
125   - this.count >= this.maxCount? this.addDisabled = true:this.count++;
  237 + if(num>=this.maxCount){
  238 + this.addDisabled = true
  239 + } else{
  240 + this.addDisabled= true
  241 + // 修改num
  242 + store.dispatch('cart/modiCart',{
  243 + uid: 1,
  244 + // openid: '',
  245 + mp_id: mp_id,
  246 + sk_id: sk_id,
  247 + cart_id:cart_id,
  248 + num:num+1,
  249 + args:{
  250 + index:index,
  251 + isadd:isadd,
  252 + }
  253 + })
  254 + this.addDisabled= false
  255 + }
  256 + }else{
  257 + if(num<=1){
  258 + this.desDisabled = true
  259 + } else{
  260 + this.desDisabled = false
  261 + // post 请求修改相关参数
  262 + store.dispatch('cart/modiCart',{
  263 + uid: 1,
  264 + // openid: '',
  265 + mp_id: mp_id,
  266 + sk_id: sk_id,
  267 + cart_id:cart_id,
  268 + num:num-1,
  269 + args:{
  270 + index:index,
  271 + isadd:isadd,
  272 + }
  273 + })
  274 + this.desDisabled = true
  275 + }
  276 + }
  277 + },
  278 +
  279 + Change(isopen,indexC){
  280 + // console.log('lalla===>',isopen)
  281 + this.childIsOpen[indexC]=!isopen
  282 + if(!isopen){
  283 + this.totalPrice=this.totalPrice+(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice)
126 284 }else{
127   - this.count <= 1? this.desDisabled = true:this.count--;
  285 + this.totalPrice=this.totalPrice-(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice)
  286 + }
  287 + let m=true;
  288 + for (let i = 0; i < this.childIsOpen.length; i++) {
  289 + m=m&this.childIsOpen[i]
  290 + }
  291 + if(m==1){
  292 + this.pIsoPen=true
  293 + } else{
  294 + this.pIsoPen=false
128 295 }
129 296 },
130 297 pChange(isopen){
131   - // console.log(isopen)
132 298 this.pIsoPen=!isopen
133   - this.childIsOpen.child1=!isopen
134   - this.childIsOpen.child2=!isopen
135   - },
136   - cChange(isopen,child){
137   - // console.log(child)
138   - if(child==='child1'){
139   - this.childIsOpen.child1=!isopen
  299 + for (let i = 0; i < this.childIsOpen.length; i++) {
  300 + this.childIsOpen[i]=!isopen
140 301 }
141   - if(child==='child2'){
142   - this.childIsOpen.child2=!isopen
  302 + if(this.pIsoPen){
  303 + // 计算总价逻辑
  304 + if(this.childIsOpen.length!=0){
  305 + for (let i = 0; i < this.childIsOpen.length; i++) {
  306 + if(this.childIsOpen[i]){
  307 + this.totalPrice= this.totalPrice+(this.$store.state.cart.cartList[i].num*this.$store.state.cart.cartList[i].nowPrice)
  308 + }
  309 + }
  310 + }
  311 + } else{
  312 + this.totalPrice=0
143 313 }
  314 +
  315 + },
  316 + delCart(cart_id,index){
  317 + // console.log('userInfo',this.$store.state.user.userInfo)
  318 + cart_id=parseInt(cart_id)
  319 + // console.log('delcart------>cart_id',cart_id)
  320 + // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
  321 + // console.log('delcart======>index',index)
  322 + uni.showModal({
  323 + title: "是否删除该商品",
  324 + // content: '是否删除该商品',
  325 + success: function (res) {
  326 + if (res.confirm) {
  327 + // this.$store.state.cart.cartList.splice(index,1)
  328 + store.dispatch('cart/delCart',{
  329 + uid: 1, //用户id
  330 + openid: "",
  331 + cart_id: cart_id, // 要修改的购物车id
  332 + arg:index, // 由于action 传参是能接收两参数,因此将index放入对象
  333 + });
  334 + console.log('用户点击确定');
  335 + }
  336 + }
  337 + });
  338 +
144 339 }
145 340 }
146 341 }
... ... @@ -171,21 +366,22 @@
171 366 background-color: #FF6B4A;
172 367 .correct {
173 368 display: inline-block;
174   - width: 5px;
175   - height: 1px;
  369 + position: relative;
  370 + width: 10rpx;
  371 + height: 2rpx;
176 372 background: #FFFFFF;
177 373 line-height: 0;
178 374 font-size: 0;
179 375 position: relative;
180   - top: -6px;
  376 + top: -7px;
181 377 left: 4px;
182 378 -webkit-transform: rotate(45deg);
183 379 }
184 380 .correct:after {
185 381 content: '/';
186 382 display: block;
187   - width: 8px;
188   - height: 1px;
  383 + width: 16rpx;
  384 + height: 2rpx;
189 385 background: #FFFFFF;
190 386 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
191 387 }
... ... @@ -200,6 +396,7 @@
200 396 flex-direction: column;
201 397 align-items: center;
202 398 justify-content: space-between;
  399 + margin-bottom: 180rpx;
203 400 .cardHeader{
204 401 width: 100%;
205 402 height: 36rpx;
... ... @@ -248,6 +445,11 @@
248 445 justify-content: space-between;
249 446 height: 240rpx;
250 447 .goodName{
  448 + display: -webkit-box;
  449 + -webkit-box-orient: vertical;
  450 + -webkit-line-clamp: 2;
  451 + text-align: justify;
  452 + overflow: hidden;
251 453 font-size: 28rpx;
252 454 color: #333333;
253 455 }
... ... @@ -257,8 +459,10 @@
257 459 box-sizing: border-box;
258 460 padding: 10rpx;
259 461 font-size: 20rpx;
  462 + letter-spacing: -0.23px;
  463 + text-align: justify;
260 464 color: #999999;
261   - background: #F2F2F2;
  465 + background: #F9F9F9;
262 466 display: flex;
263 467 justify-content: center;
264 468 align-items: center;
... ...
src/pages/detailStandard/detailStandard_k.vue
1 1 <template>
2 2 <view class="container">
3 3 <view class="detail">
4   - <view class="detail1"><image v-bind:src="detail.image"></image></view>
  4 + <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view>
5 5 <view class="detail2">
6   - <view class="detail2_name">{{detail.name}}</view>
  6 + <view class="detail2_name">{{details.data.p_name}}</view>
7 7 <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
8   - <view class="detail2_price"><span>¥{{detail.price}}</span></view>
  8 + <view class="detail2_price">
  9 + <span>¥{{details.data.p_sale_price*count}}</span>
  10 + <view class="counter">
  11 + <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
  12 + <text>{{count}}</text>
  13 + <view class="btn" @click="counter(true)">+</view>
  14 + </view>
  15 + </view>
9 16 </view>
10 17 </view>
11 18 <view class="choose">
12 19 <view class="colour">
13 20 <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view>
14   - <view class="colour_exp">*黑色 BHL192345</view>
  21 + <view class="colour_exp">*{{colour}}</view>
  22 + <view>
15 23 <view class="colour2">
16   - <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view>
  24 + <view
  25 + v-for="(items,index) in details.data.skuList"
  26 + :key="index"
  27 + @click="viewChoose(index)"
  28 + class="colour2_view"
  29 + v-bind:class="{'colour2_viewed': chooseNum == index}"
  30 + >
  31 + <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>
  32 + </view>
  33 + </view>
17 34 </view>
18 35 <hr/>
19 36 </view>
... ... @@ -22,23 +39,59 @@
22 39 <view class="size1_1">框架尺寸</view>
23 40 <view><span>+¥20</span><image src="/static/img/detail/xiala.png"></image></view>
24 41 </view>
25   - <view class="size2">
26   - <view>通用</view>
27   - <view>定制</view>
  42 + <view class="colour">
  43 + <view class="colour_exp">*{{colour}}</view>
28 44 </view>
29 45 <view class="D3_list">
30   - <view v-for="(item) in parameter" :key="item.key">
31   - <view><image class="D3_image" v-bind:src = "item.img"></image></view>
  46 + <view>
  47 + <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view>
  48 + <view class="D3_list_jDu">
  49 + <view class="D3_list1">
  50 + <c-progress class="c-progress" :inner_widthProp="300"/>
  51 + <text>{{details.data.frame_width}}mm</text>
  52 + </view>
  53 + <view>{{parameter[0].standard}}</view>
  54 + </view>
  55 + </view>
  56 + <view>
  57 + <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view>
32 58 <view class="D3_list_jDu">
33   - <!-- uni-sliper插件 -->
34   - <!-- <c-progress class="c-progress"
35   - :percent="item.percent"
36   - :show-slider="false" :width="190"
37   - :standard="item.standard_l"
38   - :stand_width="item.slength"
39   - progressColor="#FF6B4A"
40   - /> -->
41   - <view>{{item.standard}}</view>
  59 + <view class="D3_list1">
  60 + <c-progress class="c-progress" :inner_widthProp="190"/>
  61 + <view>{{details.data.glass_width}}mm</view>
  62 + </view>
  63 + <view>{{parameter[1].standard}}</view>
  64 + </view>
  65 + </view>
  66 + <view>
  67 + <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view>
  68 + <view class="D3_list_jDu">
  69 + <view class="D3_list1">
  70 + <c-progress class="c-progress" :inner_widthProp="210"/>
  71 + <view>{{details.data.glass_height}}mm</view>
  72 + </view>
  73 + <view>{{parameter[2].standard}}</view>
  74 + </view>
  75 + </view>
  76 + <view>
  77 + <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view>
  78 + <view class="D3_list_jDu">
  79 +
  80 + <view class="D3_list1">
  81 + <c-progress class="c-progress" :inner_widthProp="160"/>
  82 + <view>{{details.data.nose_width}}mm</view>
  83 + </view>
  84 + <view>{{parameter[3].standard}}</view>
  85 + </view>
  86 + </view>
  87 + <view>
  88 + <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view>
  89 + <view class="D3_list_jDu">
  90 + <view class="D3_list1">
  91 + <c-progress class="c-progress" :inner_widthProp="260"/>
  92 + <view>{{details.data.leg_long}}mm</view>
  93 + </view>
  94 + <view>{{parameter[4].standard}}</view>
42 95 </view>
43 96 </view>
44 97 <hr/>
... ... @@ -51,7 +104,13 @@
51 104 </view>
52 105 <view class="colour_exp">*0290</view>
53 106 <view class="part_som">
54   - <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view>
  107 + <view
  108 + v-for="(part) in part"
  109 + :key="part.key"
  110 + v-bind:class="{'size_viewed': part.is_actived}"
  111 + >
  112 + <image v-bind:src="part.img"></image>
  113 + </view>
55 114 </view>
56 115 </view>
57 116 </view>
... ... @@ -60,7 +119,7 @@
60 119 <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view>
61 120 <view class="buy3">
62 121 <view class="buy3_1">暂时不选</view>
63   - <view class="buy3_2">立即去选</view>
  122 + <view class="buy3_2" @click="popArgs">立即去选</view>
64 123 </view>
65 124 </view>
66 125 <view class="zhanwei"></view>
... ... @@ -72,55 +131,73 @@ import CProgress from &#39;../../components/UniSliper/UniSliper&#39;
72 131 import store from '@/store'
73 132  
74 133 export default {
  134 + components: {
  135 + CProgress
  136 + },
75 137 data(){
76 138 return{
77   - detail:{
78   - image:'/static/img/detail/d1.png',
79   - name:'商品名称商品名称商品名称商品名称商品名称',
80   - price: 180,
81   - number: 1,
82   - },
83   - //框架颜色
84   - colour:[
85   - {key:0 ,img: '/static/img/detail/Kuang/s1.png'},
86   - {key:1 ,img: '/static/img/detail/Kuang/s2.png'},
87   - {key:2 ,img: '/static/img/detail/Kuang/s3.png'},
88   - {key:3 ,img: '/static/img/detail/Kuang/s4.png'},
89   - {key:4 ,img: '/static/img/detail/Kuang/s5.png'},
90   - {key:5 ,img: '/static/img/detail/Kuang/s6.png'},
91   - {key:6 ,img: '/static/img/detail/Kuang/s7.png'}
92   - ],
93   - //规格
  139 + count: 1,
  140 + colour: '1.56非球面防蓝光_亚黑色',
  141 + chooseNum : '',
94 142 parameter:[
95   - {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100},
96   - {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50},
97   - {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50},
98   - {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30},
99   - {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60},
  143 + {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
  144 + {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51},
  145 + {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45},
  146 + {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19},
  147 + {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138},
100 148 ],
101 149 //配饰
102 150 part:[
103   - {key: 0,img:'/static/img/detail/Kuang/g1.png'},
104   - {key: 1,img:'/static/img/detail/Kuang/g1.png'},
105   - {key: 2,img:'/static/img/detail/Kuang/g2.png'},
106   - {key: 3,img:'/static/img/detail/Kuang/g1.png'},
107   - {key: 4,img:'/static/img/detail/Kuang/g1.png'},
108   - {key: 5,img:'/static/img/detail/Kuang/g3.png'},
109   - {key: 6,img:'/static/img/detail/Kuang/g3.png'},
110   - {key: 7,img:'/static/img/detail/Kuang/g2.png'},
  151 + {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true},
  152 + {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
  153 + {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
  154 + {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
  155 + {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
  156 + {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
  157 + {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
  158 + {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
111 159 ],
112 160 }
113 161 },
114 162  
115   - components: {
116   - detailStandard_k(){
117   - console.log(detailStandard_k)
118   - return this.$store.state.detailStandard_k.detailStandardList
119   - }
  163 + computed: {
  164 + details(){
  165 + return this.$store.state.detailStandard_k.list
  166 + },
120 167 },
121 168 onLoad:function(){
122   - store.dispatch('detailStandard_k/getList')
  169 + store.dispatch('detailStandard_k/fetch', {
  170 + uid: "1",
  171 + pid: "26",
  172 + });
  173 + // console.log(this.$store.state.detailStandard_k.list+'ssss');
123 174 },
  175 + methods: {
  176 + counter(isadd){
  177 + if(isadd){
  178 + this.count++
  179 + }else{
  180 + this.count <= 1? this.disabled = true:this.count--
  181 + }
  182 + },
  183 + colourChange(index,e){
  184 + this.colour = e ; //颜色选择
  185 + // console.log(index,e);
  186 +
  187 + },
  188 + viewChoose(index){
  189 + this.chooseNum = index
  190 + },
  191 + popArgs(){
  192 + uni.navigateTo({
  193 + url: '../detailsChoiceArgs/detailsChoiceArgs',
  194 + success: res => {},
  195 + fail: () => {},
  196 + complete: () => {}
  197 + });
  198 + }
  199 + }
  200 +
124 201 }
125 202 </script>
126 203  
... ... @@ -148,7 +225,7 @@ hr{
148 225 align-items: center;
149 226 }
150 227 .detail1{
151   - height: 188rpx;
  228 + height: 178rpx;
152 229 width: 188rpx;
153 230 image{
154 231 width: 100%;
... ... @@ -159,7 +236,7 @@ hr{
159 236 .detail2{
160 237 width: 68%;
161 238 view{
162   - margin-bottom: 8px;
  239 + margin-bottom: 6px;
163 240 font-family: PingFangSC-Regular;
164 241 }
165 242 .detail2_name{
... ... @@ -167,6 +244,11 @@ hr{
167 244 color: #333333;
168 245 letter-spacing: -0.26px;
169 246 line-height: 18px;
  247 + overflow:hidden;
  248 + text-overflow:ellipsis;
  249 + display:-webkit-box;
  250 + -webkit-box-orient:vertical;
  251 + -webkit-line-clamp:2;
170 252 }
171 253 .detail2_tui{
172 254 font-size: 10px;
... ... @@ -182,6 +264,24 @@ hr{
182 264 letter-spacing: -0.26px;
183 265 }
184 266 }
  267 +.counter{
  268 + display: flex;
  269 + flex-direction: row;
  270 + justify-content: space-between;
  271 + font-size: 28rpx;
  272 + color: #333333;
  273 + width: 122rpx;
  274 + float: right;
  275 + .btn{
  276 + display: flex;
  277 + justify-content: center;
  278 + line-height: 32rpx;
  279 + height: 32rpx;
  280 + width: 32rpx;
  281 + background-color: #F2F2F2;
  282 + color: #CFCFCF;
  283 + }
  284 +}
185 285 .choose{
186 286 background: #FFFFFF;
187 287 padding: 16px;
... ... @@ -218,15 +318,19 @@ hr{
218 318 justify-content: space-between ;
219 319 grid-row-gap: 10px;
220 320 margin-bottom: 14px;
221   - view{
  321 + .colour2_view{
222 322 border: 1px solid #F2F2F2;
223 323 image{
224   - width: 100%;
225   - height: 100%;
  324 + width: 100rpx;
  325 + height: 60rpx;
226 326 }
227 327 }
228   - view:hover{
  328 + .colour2_viewed{
229 329 border: 1px solid #FF6B4A;
  330 + image{
  331 + width: 100rpx;
  332 + height: 60rpx;
  333 + }
230 334 }
231 335 }
232 336 }
... ... @@ -306,6 +410,9 @@ hr{
306 410 color: #999999;
307 411 letter-spacing: -0.19px;
308 412 }
  413 + .D3_list1{
  414 + display: flex;
  415 + }
309 416 }
310 417 }
311 418 .part{
... ... @@ -323,13 +430,19 @@ hr{
323 430 height: 100%;
324 431 }
325 432 }
326   - view:hover{
  433 + .size_viewed{
327 434 border: 1px solid #FF6B4A;
  435 + height: 72rpx;
  436 + image{
  437 + width: 100%;
  438 + height: 100%;
  439 + }
328 440 }
329 441 }
330 442 }
  443 +
331 444 .buy{
332   - height: 280rpx;
  445 + height: 300rpx;
333 446 background: #FFFFFF ;
334 447 margin-top: 10px;
335 448 border-radius: 8px;
... ...
src/pages/detailStandard/detailStandard_sun.vue
1 1 <template>
2 2 <view class="container">
3 3 <view class="detail">
4   - <view class="detail1"><image v-bind:src="detail.image"></image></view>
  4 + <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view>
5 5 <view class="detail2">
6   - <view class="detail2_name">{{detail.name}}</view>
7   - <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
8   - <view class="detail2_price"><span>¥{{detail.price}}</span></view>
  6 + <view class="detail2_name">{{details.data.p_name}}</view>
  7 + <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view>
  8 + <view class="detail2_price">
  9 + <text>¥{{details.data.p_sale_price*count}}</text>
  10 + <view class="counter">
  11 + <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
  12 + <text>{{count}}</text>
  13 + <view class="btn" @click="counter(true)">+</view>
  14 + </view>
  15 + </view>
9 16 </view>
10 17 </view>
11 18 <view class="choose">
12 19 <view class="colour">
13   - <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view>
14   - <view class="colour_exp">*黑色 BHL192345</view>
  20 + <view class="colour1"><text>框架颜色</text><image src="/static/img/detail/xiala.png"></image></view>
  21 + <view class="colour_exp">*{{colour}}</view>
  22 + <view>
15 23 <view class="colour2">
16   - <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view>
  24 + <view
  25 + v-for="(items,index) in details.data.skuList"
  26 + :key="index"
  27 + @click="viewChoose(index)"
  28 + class="colour2_view"
  29 + v-bind:class="{'colour2_viewed': chooseNum == index}"
  30 + >
  31 + <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>
  32 + </view>
  33 + </view>
17 34 </view>
18 35 <hr/>
19 36 </view>
20 37 <view class="colour">
21   - <view class="colour1"><span>镜片颜色</span><image src="/static/img/detail/xiala2.png"></image></view>
  38 + <view class="colour1"><text>镜片颜色</text><image src="/static/img/detail/xiala.png"></image></view>
22 39 <view class="colour_exp">*BL192345 粉紫色【限时打折】</view>
  40 + <view>
23 41 <view class="jp_colour2">
24   - <view class="jp_colour" v-for="(colours) in jp" :key="colours.key"><image v-bind:src="colours.img"></image></view>
  42 + <view
  43 + v-for="(items,index) in jp_colour"
  44 + :key="index"
  45 + class="jp_colour2_view"
  46 + >
  47 + <image v-bind:src="items.img"></image>
  48 + </view>
  49 + </view>
25 50 </view>
26 51 <hr/>
27 52 </view>
28   - <view class="split">
29   - <view class="split1">
30   - <span>折射率</span>
31   - <span class="split1_span">注:折射率越高,镜片越薄,看起来更美观。</span>
32   - <image src="/static/img/detail/xiala2.png"></image>
  53 + <view class="colour">
  54 + <view class="colour1">
  55 + <text>{{details.data.attrList[0].meta_name}}</text>
  56 + <text class="colour_exp colour1_span2">注:折射率越高,镜片越薄</text>
  57 + <image src="/static/img/detail/xiala.png"></image>
33 58 </view>
34   - <view class="split2">
35   - <view class="split2_number">0-300度</view>
36   - <view class="split2_choose"><view class="split2_tui">1.56(推荐)</view><view>1.60</view></view>
  59 + <view>
  60 + <view class="split">
  61 + <view
  62 + v-for="(items,index) in details.data.attrList[0].attr"
  63 + :key="index"
  64 + >
  65 + <view
  66 + class="split_colour2"
  67 + @click="splitChoose(index)"
  68 + v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}"
  69 + >{{items.name}}</view>
  70 + </view>
37 71 </view>
38   - <view class="split2">
39   - <view class="split2_number">300-1000度</view>
40   - <view class="split2_choose"><view class="split2_tui">1.71(推荐)</view>
41   - <view>1.67</view><view>1.74</view><view>1.80</view><view>1.71</view></view>
42 72 </view>
43 73 <hr/>
44 74 </view>
45 75 <view class="size">
46 76 <view class="size1">
47 77 <view class="size1_1">框架尺寸</view>
48   - <view><span>+¥20</span><image src="/static/img/detail/xiala2.png"></image></view>
  78 + <view><span>+¥20</span><image src="/static/img/detail/xiala.png"></image></view>
49 79 </view>
50   - <view class="size2">
51   - <view>通用</view>
52   - <view>定制</view>
  80 + <view class="colour">
  81 + <view class="colour_exp">*{{colour}}</view>
53 82 </view>
54   - <!-- uni-sliper插件 -->
55 83 <view class="D3_list">
56   - <view v-for="(item) in parameter" :key="item.key">
57   - <view><image class="D3_image" v-bind:src = "item.img"></image></view>
  84 + <view>
  85 + <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view>
  86 + <view class="D3_list_jDu">
  87 + <view class="D3_list1">
  88 + <c-progress class="c-progress" :inner_widthProp="300"/>
  89 + <text>{{details.data.frame_width}}mm</text>
  90 + </view>
  91 + <view>{{parameter[0].standard}}</view>
  92 + </view>
  93 + </view>
  94 + <view>
  95 + <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view>
  96 + <view class="D3_list_jDu">
  97 + <view class="D3_list1">
  98 + <c-progress class="c-progress" :inner_widthProp="190"/>
  99 + <view>{{details.data.glass_width}}mm</view>
  100 + </view>
  101 + <view>{{parameter[1].standard}}</view>
  102 + </view>
  103 + </view>
  104 + <view>
  105 + <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view>
58 106 <view class="D3_list_jDu">
59   - <c-progress class="c-progress"
60   - :percent="item.percent"
61   - :show-slider="false" :width="190"
62   - :standard="item.standard_l"
63   - :stand_width="item.slength"
64   - progressColor="#FF6B4A"
65   - />
66   - <view>{{item.standard}}</view>
  107 + <view class="D3_list1">
  108 + <c-progress class="c-progress" :inner_widthProp="210"/>
  109 + <view>{{details.data.glass_height}}mm</view>
  110 + </view>
  111 + <view>{{parameter[2].standard}}</view>
  112 + </view>
  113 + </view>
  114 + <view>
  115 + <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view>
  116 + <view class="D3_list_jDu">
  117 +
  118 + <view class="D3_list1">
  119 + <c-progress class="c-progress" :inner_widthProp="160"/>
  120 + <view>{{details.data.nose_width}}mm</view>
  121 + </view>
  122 + <view>{{parameter[3].standard}}</view>
  123 + </view>
  124 + </view>
  125 + <view>
  126 + <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view>
  127 + <view class="D3_list_jDu">
  128 + <view class="D3_list1">
  129 + <c-progress class="c-progress" :inner_widthProp="260"/>
  130 + <view>{{details.data.leg_long}}mm</view>
  131 + </view>
  132 + <view>{{parameter[4].standard}}</view>
67 133 </view>
68 134 </view>
69 135 <hr/>
... ... @@ -72,11 +138,17 @@
72 138 <view class="part">
73 139 <view class="size1">
74 140 <view class="size1_1">配件</view>
75   - <view><span>+¥0.00</span><image src="/static/img/detail/xiala2.png"></image></view>
  141 + <view><span>+¥0.00</span><image src="/static/img/detail/xiala.png"></image></view>
76 142 </view>
77 143 <view class="colour_exp">*0290</view>
78 144 <view class="part_som">
79   - <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view>
  145 + <view
  146 + v-for="(part) in part"
  147 + :key="part.key"
  148 + v-bind:class="{'size_viewed': part.is_actived}"
  149 + >
  150 + <image v-bind:src="part.img"></image>
  151 + </view>
80 152 </view>
81 153 </view>
82 154 </view>
... ... @@ -85,7 +157,7 @@
85 157 <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view>
86 158 <view class="buy3">
87 159 <view class="buy3_1">暂时不选</view>
88   - <view class="buy3_2">立即去选</view>
  160 + <view class="buy3_2" @click="popArgs">立即去选</view>
89 161 </view>
90 162 </view>
91 163 <view class="zhanwei"></view>
... ... @@ -94,6 +166,7 @@
94 166 </template>
95 167 <script>
96 168 import CProgress from '../../components/UniSliper/UniSliper'
  169 +import store from '@/store'
97 170  
98 171 export default {
99 172 components: {
... ... @@ -101,56 +174,91 @@ export default {
101 174 },
102 175 data(){
103 176 return{
104   - detail:{
105   - image:'/static/img/detail/sun_glass.png',
106   - name:'商品名称商品名称商品名称商品名称商品名称',
107   - price: 180,
108   - number: 1,
109   - },
110   - //框架颜色
111   - colour:[
112   - {key:0 ,img: '/static/img/detail/Kuang/s1.png'},
113   - {key:1 ,img: '/static/img/detail/Kuang/s2.png'},
114   - {key:2 ,img: '/static/img/detail/Kuang/s3.png'},
115   - {key:3 ,img: '/static/img/detail/Kuang/s4.png'},
116   - {key:4 ,img: '/static/img/detail/Kuang/s5.png'},
117   - {key:5 ,img: '/static/img/detail/Kuang/s6.png'},
118   - {key:6 ,img: '/static/img/detail/Kuang/s7.png'}
  177 + count: 1,
  178 + colour: '1.56非球面防蓝光_亚黑色',
  179 + chooseNum : '',
  180 + isSplit: '' ,
  181 + parameter:[
  182 + {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
  183 + {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51},
  184 + {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45},
  185 + {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19},
  186 + {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138},
119 187 ],
120 188 //镜片颜色
121   - jp:[
122   - {key:0 ,img: '/static/img/detail/Kuang/sun_jp.png'},
123   - {key:1 ,img: '/static/img/detail/Kuang/sun_jp.png'},
124   - {key:2 ,img: '/static/img/detail/Kuang/sun_jp.png'},
125   - {key:3 ,img: '/static/img/detail/Kuang/sun_jp.png'},
126   - {key:4 ,img: '/static/img/detail/Kuang/sun_jp.png'},
127   - {key:5 ,img: '/static/img/detail/Kuang/sun_jp.png'},
128   - {key:6 ,img: '/static/img/detail/Kuang/sun_jp.png'},
129   - {key:7 ,img: '/static/img/detail/Kuang/sun_jp.png'},
130   - {key:8 ,img: '/static/img/detail/Kuang/sun_jp.png'}
131   - ],
132   - //规格参数
133   - parameter:[
134   - {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100},
135   - {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50},
136   - {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50},
137   - {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30},
138   - {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60},
  189 + jp_colour:[
  190 + {img:'/static/img/detail/Kuang/sun_jp.png'},
  191 + {img:'/static/img/detail/Kuang/sun_jp.png'},
  192 + {img:'/static/img/detail/Kuang/sun_jp.png'},
  193 + {img:'/static/img/detail/Kuang/sun_jp.png'},
  194 + {img:'/static/img/detail/Kuang/sun_jp.png'},
  195 + {img:'/static/img/detail/Kuang/sun_jp.png'}
139 196 ],
140 197 //配饰
141 198 part:[
142   - {key: 0,img:'/static/img/detail/Kuang/g1.png'},
143   - {key: 1,img:'/static/img/detail/Kuang/g1.png'},
144   - {key: 2,img:'/static/img/detail/Kuang/g2.png'},
145   - {key: 3,img:'/static/img/detail/Kuang/g1.png'},
146   - {key: 4,img:'/static/img/detail/Kuang/g1.png'},
147   - {key: 5,img:'/static/img/detail/Kuang/g3.png'},
148   - {key: 6,img:'/static/img/detail/Kuang/g3.png'},
149   - {key: 7,img:'/static/img/detail/Kuang/g2.png'},
150   -
  199 + {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true},
  200 + {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
  201 + {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
  202 + {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
  203 + {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
  204 + {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
  205 + {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
  206 + {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
151 207 ],
  208 + //折射率
  209 + split:[
  210 + {number: 1.56},
  211 + {number: 1.60},
  212 + {number: 1.67},
  213 + {number: 1.71},
  214 + {number: 1.74}
  215 +
  216 + ]
  217 + }
  218 + },
  219 +
  220 + computed: {
  221 + details(){
  222 + return this.$store.state.detailStandard_k.list
  223 + },
  224 + },
  225 + onLoad:function(){
  226 + store.dispatch('detailStandard_k/fetch', {
  227 + uid: "1",
  228 + pid: "26",
  229 + });
  230 + console.log(this.$store.state.detailStandard_k.list.data+'ssswwwwwwwws');
  231 + console.log("ssssssssssssssssssssssssssss")
  232 + },
  233 + methods: {
  234 + counter(isadd){
  235 + if(isadd){
  236 + this.count++
  237 + }else{
  238 + this.count <= 1? this.disabled = true:this.count--
  239 + }
  240 + },
  241 + colourChange(index,e){
  242 + this.colour = e ; //颜色选择
  243 + // console.log(index,e);
  244 +
  245 + },
  246 + viewChoose(index){
  247 + this.chooseNum = index
  248 + },
  249 + splitChoose(index){
  250 + this.isSplit = index
  251 + },
  252 + popArgs(){
  253 + uni.navigateTo({
  254 + url: '../detailsChoiceArgs/detailsChoiceArgs',
  255 + success: res => {},
  256 + fail: () => {},
  257 + complete: () => {}
  258 + });
152 259 }
153 260 }
  261 +
154 262 }
155 263 </script>
156 264  
... ... @@ -166,6 +274,7 @@ hr{
166 274 height: 1px;
167 275 background: #F2F2F2;
168 276 margin-top: 18px;
  277 + margin-bottom: 10px;
169 278 }
170 279 .detail{
171 280 height: 272rpx;
... ... @@ -178,7 +287,7 @@ hr{
178 287 align-items: center;
179 288 }
180 289 .detail1{
181   - height: 188rpx;
  290 + height: 178rpx;
182 291 width: 188rpx;
183 292 image{
184 293 width: 100%;
... ... @@ -189,7 +298,7 @@ hr{
189 298 .detail2{
190 299 width: 68%;
191 300 view{
192   - margin-bottom: 8px;
  301 + margin-bottom: 6px;
193 302 font-family: PingFangSC-Regular;
194 303 }
195 304 .detail2_name{
... ... @@ -197,6 +306,11 @@ hr{
197 306 color: #333333;
198 307 letter-spacing: -0.26px;
199 308 line-height: 18px;
  309 + overflow:hidden;
  310 + text-overflow:ellipsis;
  311 + display:-webkit-box;
  312 + -webkit-box-orient:vertical;
  313 + -webkit-line-clamp:2;
200 314 }
201 315 .detail2_tui{
202 316 font-size: 10px;
... ... @@ -212,6 +326,24 @@ hr{
212 326 letter-spacing: -0.26px;
213 327 }
214 328 }
  329 +.counter{
  330 + display: flex;
  331 + flex-direction: row;
  332 + justify-content: space-between;
  333 + font-size: 28rpx;
  334 + color: #333333;
  335 + width: 122rpx;
  336 + float: right;
  337 + .btn{
  338 + display: flex;
  339 + justify-content: center;
  340 + line-height: 32rpx;
  341 + height: 32rpx;
  342 + width: 32rpx;
  343 + background-color: #F2F2F2;
  344 + color: #CFCFCF;
  345 + }
  346 +}
215 347 .choose{
216 348 background: #FFFFFF;
217 349 padding: 16px;
... ... @@ -233,6 +365,13 @@ hr{
233 365 width: 40rpx;
234 366 height: 36rpx;
235 367 }
  368 + .colour1_span2{
  369 + font-family: PingFangSC-Regular;
  370 + font-size: 12px;
  371 + color: #666666;
  372 + margin-left: 10px;
  373 + font-weight: normal
  374 + }
236 375 }
237 376 .colour_exp{
238 377 font-family: PingFangSC-Regular;
... ... @@ -248,94 +387,61 @@ hr{
248 387 justify-content: space-between ;
249 388 grid-row-gap: 10px;
250 389 margin-bottom: 14px;
251   - view{
  390 + .colour2_view{
252 391 border: 1px solid #F2F2F2;
253 392 image{
254   - width: 100%;
255   - height: 100%;
  393 + width: 100rpx;
  394 + height: 60rpx;
256 395 }
257 396 }
258   - view:hover{
  397 + .colour2_viewed{
259 398 border: 1px solid #FF6B4A;
  399 + image{
  400 + width: 100rpx;
  401 + height: 60rpx;
  402 + }
260 403 }
261 404 }
262 405 }
263 406 .jp_colour2{
264   - display: grid;
265   - grid-template-columns: repeat(6, 12%);
266   - grid-row-gap: 10px;
267   - grid-column-gap: 6px;
268   - margin-bottom: 14px;
269   - view{
  407 + display: grid;
  408 + grid-template-columns: repeat(5, 13%);
  409 + justify-content: start ;
  410 + grid-column-gap: 10px;
  411 + grid-row-gap: 10px;
  412 + margin-bottom: 14px;
  413 + .jp_colour2_view{
270 414 border: 1px solid #F2F2F2;
271   - height: 80rpx;
272 415 image{
273   - width: 100%;
274   - height: 100%;
  416 + width: 80rpx;
  417 + height: 80rpx;
275 418 }
276 419 }
277   - view:hover{
278   - border: 1px solid #FF6B4A;
279   - }
280   -}
281   -.split1{
282   - span{
283   - font-family: PingFangSC-Medium;
284   - font-size: 16px;
285   - color: #333333;
286   - letter-spacing: -0.3px;
287   - text-align: justify;
288   - line-height: 24px;
289   - font-weight: bold;
290   - margin-right:8px;
291   - }
292   - .split1_span{
293   - font-family: PingFangSC-Regular;
294   - font-size: 10px;
295   - color: #999999;
296   - letter-spacing: -0.3px;
297   - font-weight:normal;
298   - }
299   - image{
300   - float: right;
301   - width: 40rpx;
302   - height: 36rpx;
303   - }
304 420 }
305   -.split2{
306   - margin-bottom: 12px;
307   - .split2_number{
  421 +.split{
  422 + display: grid;
  423 + grid-template-columns: repeat(2, 45%);
  424 + grid-column-gap: 10px;
  425 + grid-row-gap: 10px;
  426 + margin-top: 10px ;
  427 + .split_colour2{
  428 + display: flex;
  429 + justify-content: center;
  430 + align-items: center;
  431 + width: 300rpx;
  432 + height: 60rpx;
  433 + background: #F2F2F2;
  434 + border-radius: 2px;
308 435 font-family: PingFangSC-Regular;
309   - font-size: 10px;
310   - color: #999999;
311   - letter-spacing: -0.19px;
312   - margin-bottom: 6px;
  436 + font-size: 12px;
  437 + color: #666666;
  438 + letter-spacing: 0;
  439 + text-align: center;
313 440 }
314   - .split2_choose{
315   - display: flex;
316   - view{
317   - display: flex;
318   - justify-content: center;
319   - align-items: center;
320   - font-family: PingFangSC-Regular;
321   - font-size: 12px;
322   - color: #666666;
323   - background: #F2F2F2;
324   - width: 100rpx;
325   - height: 60rpx;
326   - border-radius: 2px;
327   - margin-right: 10px;
328   - }
329   - view:hover{
330   - color: #FF6B4A;
331   - background: rgba(255,107,74,0.15);
332   - }
333   - .split2_tui{
334   - width: 186rpx;
335   - height: 60rpx;
336   - }
  441 + .split_colour2_actived{
  442 + background: rgba(255,107,74,0.15);
  443 + color: #FF6B4A;
337 444 }
338   -
339 445 }
340 446 .size,.part{
341 447 margin-top:14px;
... ... @@ -413,6 +519,9 @@ hr{
413 519 color: #999999;
414 520 letter-spacing: -0.19px;
415 521 }
  522 + .D3_list1{
  523 + display: flex;
  524 + }
416 525 }
417 526 }
418 527 .part{
... ... @@ -430,13 +539,19 @@ hr{
430 539 height: 100%;
431 540 }
432 541 }
433   - view:hover{
  542 + .size_viewed{
434 543 border: 1px solid #FF6B4A;
  544 + height: 72rpx;
  545 + image{
  546 + width: 100%;
  547 + height: 100%;
  548 + }
435 549 }
436 550 }
437 551 }
  552 +
438 553 .buy{
439   - height: 280rpx;
  554 + height: 300rpx;
440 555 background: #FFFFFF ;
441 556 margin-top: 10px;
442 557 border-radius: 8px;
... ... @@ -502,5 +617,4 @@ hr{
502 617 font-size: 16px;
503 618 }
504 619 }
505   -
506 620 </style>
507 621 \ No newline at end of file
... ...
src/pages/frameDetail/frameDetail.vue
... ... @@ -1,617 +0,0 @@
1   -<template>
2   - <view class="container">
3   - <view class="D1">
4   - <!-- 轮播图 -->
5   - <swiper class="swiperImage" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" >
6   - <swiper-item v-for="(item) in infos" :key="item.goods_id">
7   - <image :src="item.img" mode="scaleToFill"></image>
8   - </swiper-item>
9   - </swiper>
10   - <view class="D1_price">¥{{price}}</view>
11   - <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view>
12   - <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
13   - </view>
14   - <view class="D2" v-if="updateGoodType == 2 || updateGoodType == 4">
15   - <view><span class="D2_span1">框架材质:</span><span class="D2_span2">{{introduction.material}}</span></view>
16   - <view><span class="D2_span1">风格:</span><span class="D2_span2">{{introduction.func}}</span></view>
17   - <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view>
18   - </view>
19   - <view class="D2" v-if="updateGoodType == 1">
20   - <view><span class="D2_span1">镜片材质:</span><span class="D2_span2">{{introduction.material}}</span></view>
21   - <view><span class="D2_span1">功能:</span><span class="D2_span2">{{introduction.func}}</span></view>
22   - <view><span class="D2_span1">使用场景:</span><span class="D2_span2">{{introduction.rate}}</span></view>
23   - </view>
24   - <view class="D2" v-if="updateGoodType == 3">
25   - <view><span class="D2_span1">材质:</span><span class="D2_span2">{{introduction.material}}</span></view>
26   - <view><span class="D2_span1">直径/基弧:</span><span class="D2_span2">{{introduction.func}}</span></view>
27   - <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view>
28   - </view>
29   -
30   - <view class="D3">
31   - <view class="screenBar">
32   - <view v-for="item in screenItems" :key="item.current" @click="tabChange(item.current)" >
33   - <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
34   - </view>
35   - </view>
36   - <view class="screen-item " v-if="current ===0">
37   - <view class="D3_list">
38   - <view v-for="(item) in parameter" :key="item.key">
39   - <image class="D3_image" v-bind:src = "item.img"></image>
40   - <span>{{item.standard}}</span>
41   - <span>{{item.slength}}</span>
42   - </view>
43   - </view>
44   - </view >
45   - <view class="screen-item " v-if="current ===1">
46   - <view class="D3_list">
47   - <view>主体</view>
48   - <view>商品产地:韩国</view>
49   - <view>包装清单:彩色隐形 * 1</view>
50   - </view>
51   - </view >
52   - <view class="screen-item " v-if="current ===2">
53   - <view class="customerService">
54   - <view class="serviceItem" >
55   - <view class="title">
56   - <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
57   - <text class="titleText">卖家服务</text>
58   - </view>
59   - <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验</view>
60   - </view>
61   - <view class="serviceItem" >
62   - <view class="title">
63   - <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
64   - <text class="titleText">平台承诺</text>
65   - </view>
66   - <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
67   - </view>
68   - <view class="serviceItem">
69   - <view class="title">
70   - <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
71   - <text class="titleText">正品保证</text>
72   - </view>
73   - <view class="itemContent">向您保证所售商品均为正品行货</view>
74   - </view>
75   - <view class="serviceItem2">
76   - <view class="title">
77   - <text class="titleText">权利申明</text>
78   - </view>
79   - <view class="itemContent">任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
80   - </view>
81   - <view class="serviceItem2">
82   - <view class="title">
83   - <text class="titleText">价格保证</text>
84   - </view>
85   - <view class="itemContent">
86   - <view class="itemContent-child">
87   - <text class="contentTitle">平台价:</text>
88   - <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
89   - </view>
90   - <view class="itemContent-child">
91   - <text class="contentTitle">划线价:</text>
92   - <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
93   - </view>
94   - <view class="itemContent-child">
95   - <text class="contentTitle">平折扣:</text>
96   - <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
97   - </view>
98   - <view class="itemContent-child">
99   - <text class="contentTitle">异常问题:</text>
100   - <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
101   - </view>
102   -
103   - </view>
104   - </view>
105   - </view>
106   - </view >
107   - </view>
108   - <view class="D4" v-if="current !==2">
109   - <view class="D4_esvalue">
110   - <view>{{esvalue}}</view>
111   - <view class="D4_2">
112   - <view class="star" v-for="o in starCount" :key="o">
113   - <image src="../../static/img/detail/d_star.png" mode="aspectFill" style="height: 26rpx; width: 28rpx;"></image>
114   - </view>
115   - </view>
116   - </view>
117   - <view class="D4_list">
118   - <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view>
119   - </view>
120   - </view>
121   - <view class="D5" v-if="current !==2">
122   - <view class="D5_fixed1">
123   - <image src="/static/img/detail/hr.png"></image>
124   - <view>商品详细</view>
125   - <image src="/static/img/detail/hr.png"></image>
126   - </view>
127   - <view class="D5_all">
128   - <image v-bind:src="imgAll"></image>
129   - </view>
130   - <view class="D5_photoes">
131   - <view class="D5_photoes1">
132   - <view v-for="(photoes) in photoes" :key="photoes.value">
133   - <image v-bind:src = "photoes.img"></image>
134   - <view>{{photoes.value}}</view>
135   - </view>
136   - </view>
137   - <view class="D5_logo1">帕森防蓝光镜片</view>
138   - <view class="D5_logo2">健康护眼,我们是认真的!</view>
139   - <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view>
140   - </view>
141   - </view>
142   - <view class="D6" v-if="current !==2">
143   - <view class="D6_v1">CHARM DETAIL</view>
144   - <view class="D6_v2">细节展示</view>
145   - <view ><image v-bind:src="imgDetail"></image></view>
146   - <view>........................................................................</view>
147   - <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view>
148   - </view>
149   -
150   - <!-- 底部菜单 -->
151   - <view class="botton">
152   - <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view>
153   - <view class="botton_2">
154   - <view class="botton_input">加入购物车</view>
155   - <view class="botton_now" @click="goPerchase">立即购买</view>
156   - </view>
157   - </view>
158   - </view>
159   -</template>
160   -
161   -<script>
162   -import store from '@/store';
163   -export default {
164   - data(){
165   - return {
166   - name:'商品名称',
167   - goodType:2,
168   - price: 120,
169   - number: 391,
170   - screenItems: [
171   - {current:0,text:'商品保障'},
172   - {current:1,text:'规格参数'},
173   - {current:2,text:'售后保障'},
174   - ],
175   - current: 0,
176   - starCount:5,
177   - infos: [
178   - { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' },
179   - { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' },
180   - { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' },
181   - { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' },
182   - ],
183   - parameter:[
184   - {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'},
185   - {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'},
186   - {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'},
187   - {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'},
188   - {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'},
189   - {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'}
190   - ],
191   - assess:[
192   - {key: 0, Iassess: '价格实惠'},
193   - {key: 1, Iassess: '美观大方'},
194   - {key: 2, Iassess: '易搭配'}
195   - ],
196   - esvalue:'宝贝好评率 100%',
197   - introduction:{
198   - material:'钛合金',
199   - func:'抗疲劳/防辐射',
200   - rate: 1.6
201   - },
202   - imgAll:'/static/img/detail/d8.png' ,
203   - photoes:[
204   - {value:'日常办公', img:'/static/img/detail/d9.png'},
205   - {value:'上网', img:'/static/img/detail/d10.png'},
206   - {value:'追剧', img:'/static/img/detail/d11.png'},
207   - {value:'玩游戏', img:'/static/img/detail/d12.png'},
208   - ],
209   - imgDetail:'/static/img/detail/d13.png',
210   - imgShop:{
211   - img:'/static/tab-cart.png',
212   - IsShown: false
213   - }
214   - }
215   - },
216   - onLoad:function(option){
217   - this.goodType = option.goodType
218   - // console.log(this.updateGoodType)
219   - store.dispatch('read/fetch');
220   - },
221   - computed:{
222   - updateGoodType(){
223   - return this.goodType
224   - },
225   - goodInfo() {
226   - console.log(this.$store.state.read.goodInfo)
227   - return this.$store.state.read.goodInfo;
228   - },
229   - },
230   - methods:{
231   - goPerchase(){
232   - switch(this.updateGoodType){
233   - case '1':
234   - uni.navigateTo({
235   - url: '../detailsChoiceArgs/detailsChoiceArgs',
236   - success: res => {},
237   - fail: () => {},
238   - complete: () => {}
239   - });
240   - break;
241   - case '2':
242   - uni.navigateTo({
243   - url: `../detailStandard/detailStandard_k`,
244   - success: res => {},
245   - fail: () => {},
246   - complete: () => {}
247   - });
248   - break;
249   - case '3':
250   - uni.navigateTo({
251   - url: `../purchaseLenses/purchaseLenses`,
252   - success: res => {},
253   - fail: () => {},
254   - complete: () => {}
255   - });
256   - break;
257   - case '4':
258   - uni.navigateTo({
259   - url: `../detailStandard/detailStandard_sun`,
260   - success: res => {},
261   - fail: () => {},
262   - complete: () => {}
263   - });
264   - break;
265   - default :
266   - break
267   - }
268   - },
269   - tabChange(e) {
270   - if (this.current !== e) {
271   - this.current = e;
272   - }
273   - }
274   - }
275   -}
276   -</script>
277   -<style lang='scss'>
278   - .container{
279   - background-color:#f8f8f8 ;
280   - }
281   - .D1,.D2,.D3,.D4,.D6{
282   - background: #ffffff;
283   - margin-bottom: 10px;
284   - padding:8px 20px 8px 20px;
285   - box-sizing: border-box;
286   - .swiperImage {
287   - width: 684rpx;
288   - height: 512rpx;
289   - image {
290   - width: 100%;
291   - height: 100%;
292   - border-radius: 16rpx;
293   - }
294   - }
295   - }
296   - .D5{
297   - background: #ffffff;
298   - padding:8px 20px 8px 20px;
299   - box-sizing: border-box;
300   - }
301   - .swiperImage{
302   - width: 100%;
303   - height: 560rpx;
304   - .swiper-item{
305   - width: 100%;
306   - image{
307   - width: 100%;
308   - }
309   - }
310   - }
311   - .D1{
312   - .D1_price{
313   - color: #EB5D3B;
314   - font-size: 18px;
315   - margin-top: 5px;
316   - font-family: 'PingFangSC-Semibold';
317   - }
318   - .D1_name{
319   - font-size: 16px;
320   - font-family: 'PingFangSC-Semibold';
321   - margin-top: 5px;
322   - display: flex;
323   - justify-content: space-between;
324   - .D1_name1{
325   - font-weight: bold;
326   - font-size: 16px;
327   - color: #333333;
328   - }
329   - .D1_number{
330   - color: #999999 ;
331   - font-size: 14px;
332   - font-family: 'PingFangSC-Regular';
333   - }
334   - }
335   - .D1_spans{
336   - font-size: 10px;
337   - color:#999999;
338   - margin-top: 5px;
339   - span{
340   - height: 14px;
341   - margin-right: 10px;
342   - }
343   - }
344   -
345   - }
346   - .D2{
347   - font-size: 14px;
348   - font-family: 'PingFangSC-Regular';
349   - view{
350   - height: 24px;
351   - }
352   - .D2_span1{
353   - color: #999999;
354   - }
355   - .D2_span2{
356   - color: #333333;
357   - }
358   - }
359   - .D3{
360   - .screenBar{
361   - width: 670rpx;
362   - margin-top: 20rpx;
363   - margin-bottom: 24rpx;
364   - display: flex;
365   - flex-direction: row;
366   - justify-content: space-between;
367   - align-items: center;
368   - font-size: 14px;
369   - color: #333333;
370   - transition:all 0.2s;
371   - }
372   - .screen-item{
373   - font-size: 32rpx;
374   - color: #333333;
375   - display: flex;
376   - transition:all 0.2s;
377   - .D3_list{
378   - margin-bottom: 4px;
379   - }
380   - .D3_list view{
381   - display: flex;
382   - align-content: center;
383   - font-size: 14px;
384   - color: #333333;
385   - }
386   - .D3_list image{
387   - width: 50px;
388   - height: 25px;
389   - margin-right: 6px;
390   - }
391   - .D3_list span{
392   - margin-left: 6px;
393   - margin-right: 5px;
394   - font-family: 'PingFangSC-Regular';
395   - }
396   - }
397   - .active{
398   - border-bottom: 4rpx solid #FF6B4A;
399   - }
400   - .customerService{
401   - margin-bottom: 90rpx;
402   - .serviceItem{
403   - margin-bottom: 32rpx;
404   - .title{
405   - display: flex;flex-direction: row;
406   - align-items: center;
407   - .titleText{
408   - font-size: 14px;
409   - color: #333333;
410   - margin-bottom: 12rpx;
411   - }
412   - }
413   - .itemContent{
414   - font-size: 14px;
415   - color: #999999;
416   - margin-left: 18rpx;
417   - }
418   - }
419   - .serviceItem2{
420   - margin-left: 18rpx;
421   - margin-bottom: 32rpx;
422   - .titleText{
423   - font-size: 14px;
424   - color: #FF6B4A;
425   - }
426   - .itemContent{
427   - font-size: 14px;
428   - color: #999999;
429   - .itemContent-child{
430   - margin-bottom: 40rpx;
431   - .contentTitle{
432   - border-bottom: 1px solid #FF6B4A;
433   - }
434   - }
435   - }
436   - }
437   - }
438   - }
439   - .D4{
440   - .D4_esvalue{
441   - font-size: 14px;
442   - color: #333333;
443   - display: flex;
444   - justify-content: space-between;
445   - margin-bottom: 10px;
446   - .D4_2{
447   - width: 90px;
448   - display: flex;
449   - align-items: center;
450   - justify-content: space-between;
451   - }
452   - }
453   - .D4_esvalue view{
454   - font-size: 14px;
455   - color: #333333;
456   - font-weight: bold;
457   - }
458   - .D4_list view{
459   - display: inline-block;
460   - font-size: 12px;
461   - text-align: center;
462   - margin-right: 12px;
463   - width: 90px;
464   - height: 24px;
465   - line-height: 24px;
466   - background: #F2F2F2;
467   - color: #666666 ;
468   - }
469   - }
470   - .D5{
471   - .D5_fixed1{
472   - display: flex;
473   - justify-content: space-between;
474   - align-content: center;
475   - margin-bottom: 12px;
476   - view{
477   - font-size: 14px;
478   - color: #333333;
479   - font-weight: bold;
480   - font-family: 'PingFangSC-Medium';
481   - line-height: 24px;
482   - }
483   - image{
484   - width: 240rpx;
485   - height: 3px;
486   - margin-top: 10px;
487   - }
488   - }
489   - .D5_all {
490   - width: 100%;
491   - height: 380px;
492   - margin-bottom: 30px;
493   - font-family: 'PingFangSC-Regular';
494   - border: #999999 solid 1.5px;
495   - image{
496   - width: 100%;
497   - height: 380px;
498   - }}
499   - .D5_photoes1{
500   - display: grid;
501   - grid-template-columns: 48% 48%;
502   - grid-row-gap: 10px;
503   - grid-column-gap: 4%;
504   - image{
505   - width: 100%;
506   - height: 70px;
507   - }
508   - view{
509   - width: 100%;
510   - font-size: 14px;
511   - text-align: center;
512   - background: #949494;
513   - font-family: 'PingFangSC-Regular';
514   - color: #ffffff;
515   - view{
516   - height: 24px;
517   - line-height: 24px;
518   - }
519   - }
520   - }
521   - .D5_logo1,.D5_logo2{
522   - text-align: center;
523   - }
524   - .D5_logo1{
525   - margin-top: 40px;
526   - font-size: 24px;
527   - font-weight: bold;
528   - font-family: 'PingFangSC-Semibold';
529   - }
530   - .D5_logo2{
531   - font-size: 12px;
532   - }
533   - .D5_logo3{
534   - width: 100%;
535   - text-align: center;
536   - image{
537   - width: 50px;
538   - height: 24px;
539   - }
540   - }
541   - }
542   - .D6{
543   - width: 100%;
544   - height: 430px;
545   - background: #F9F6ED;
546   - margin-bottom: 74px;
547   - view{
548   - text-align: center;
549   - }
550   - .D6_v1{
551   - font-weight: bold;
552   - }
553   - .D6_v2{
554   - font-size: 14px;
555   - margin-bottom: 30px;
556   - }
557   - .D6_v5{
558   - .D6_v5_s1{
559   - font-weight: bold;
560   - }
561   - .D6_v5_s2{
562   - font-size: 14px;
563   - }
564   - }
565   - }
566   - .botton{
567   - position: fixed;
568   - bottom: 0;
569   - height: 74px;
570   - width: 100%;
571   - background: #FFFFFF;
572   - padding: 20px 20px 8px 20px;
573   - font-family: 'PingFangSC-Regular';
574   - box-sizing: border-box;
575   - display: flex;
576   - justify-content: space-between;
577   - align-content: center;
578   - .botton_1{
579   - width: 20%;
580   - height: 100%;
581   - text-align: center;
582   - color: #989898;
583   - }
584   - image{
585   - width: 60%;
586   - height: 30px;
587   - }
588   - .botton_image{
589   - font-size: 12px;
590   - text-align: center;
591   - }
592   - .botton_2{
593   - width: 74%;
594   - height: 86%;
595   - display: grid;
596   - grid-template-columns: 50% 50%;
597   - }
598   - .botton_input{
599   - display: inline-flex;
600   - align-items: center;
601   - justify-content: space-around;
602   - background: #FFF0EC;
603   - font-size: 16px;
604   - color: #FF6B4A;
605   - border-radius: 20px 0 0 20px;
606   - }
607   - .botton_now{
608   - display: inline-flex;
609   - align-items: center;
610   - justify-content: space-around;
611   - background: #FF6B4A;
612   - font-size: 16px;
613   - color: #FFFFFF;
614   - border-radius:0 20px 20px 0;
615   - }
616   - }
617   -</style>
618 0 \ No newline at end of file
src/pages/myOrder/components/OrderCard.vue
1 1 <template>
2 2 <view>
3   - <view class="card" v-if="current === order.orderType" >
  3 + <view class="card" v-if="current == status" @click="toOrderInfo(status,order.pay_id)">
4 4 <view class="cardHeader">
5   - <text class="orderId">订单号:{{order.orderId}}</text>
6   - <text class="orderType" v-if="order.orderType===1">待付款</text>
7   - <text class="orderType" v-if="order.orderType===2">待发货</text>
8   - <text class="orderType" v-if="order.orderType === 3">待收货</text>
9   - <text class="orderType" v-if="order.orderType === 4">退款售后</text>
10   - <text class="orderType" v-if="order.orderType === 5">已完成</text>
  5 + <text class="orderId" v-if="status == '0'||status == '1'">订单号:{{order.mch_id}}</text>
  6 + <text class="orderId" v-if="status == '2'||status == '3'">下单时间:{{order.pay_time}}</text>
  7 + <text class="orderType" v-if="status=='0'">待付款</text>
  8 + <text class="orderType" v-if="status=='1'">待收货</text>
  9 + <text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
  10 + <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
11 11 </view>
12   - <view class="orderCardInfo">
13   - <image :src="order.img" mode="aspectFill"></image>
  12 + <view class="orderCardInfo" v-for="(orderInfo) in orderInfoList.list" :key="orderInfo">
  13 + <image :src="orderInfo.imgUrl" mode="aspectFill"></image>
14 14 <view class="infoText">
15   - <view class="orderName">{{order.name}}</view>
16   - <view class="orderDescrib">规格:玫瑰金 / 钛合金 / 防日光防紫外线</view>
  15 + <view class="orderName">{{orderInfo.p_name}}</view>
  16 + <view class="orderDescrib">{{orderInfo.p_name}}</view>
17 17 <view class="infoText-bottom">
18   - <view class="markPrice">{{order.price}}</view>
19   - <view class="buy-num">X{{order.buyNum}}</view>
  18 + <view class="markPrice">{{orderInfo.nowPrice}}</view>
  19 + <view class="buy-num">X {{orderInfo.num}}</view>
20 20 </view>
21 21 </view>
22 22 </view>
23   - <view class="payPrice">实付:<text class="priceNum">{{order.price}}</text> </view>
24   - <view class="btns" v-if="order.orderType === 1">
25   - <view class="btn-type1">申请退款</view>
  23 + <view class="payPrice">实付:<text class="priceNum">{{order.total_fee}}</text> </view>
  24 + <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 -->
  25 + <view class="btns" v-if="status == '0'">
  26 + <view class="btn-type1" >取消订单</view>
26 27 <view class="btn-type2">去支付</view>
27 28 </view>
28   - <view class="btns" v-if="order.orderType === 0">
29   - <view class="btn-type1">再次购买</view>
  29 + <view class="btns" v-if="status == '1'">
  30 + <view class="btn-type2">确认收货</view>
30 31 </view>
  32 + <view class="btns" v-if="status == '2'">
  33 + <view class="btn-type2">再次购买</view>
  34 + </view>
  35 + <!-- <view class="btns" v-if="status == '3'">
  36 + <view class="btn-type2">再次购买</view>
  37 + </view> -->
31 38 </view>
32   - <view class="card" v-if="current === 0" >
  39 + <view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)">
33 40 <view class="cardHeader">
34   - <text class="orderId">订单号:{{order.orderId}}</text>
35   - <text class="orderType" v-if="order.orderType===1">待付款</text>
36   - <text class="orderType" v-if="order.orderType===2">待发货</text>
37   - <text class="orderType" v-if="order.orderType === 3">待收货</text>
38   - <text class="orderType" v-if="order.orderType === 4">退款售后</text>
  41 + <text class="orderId" v-if="status == '0'||status == '1'">订单号:{{order.mch_id}}</text>
  42 + <text class="orderId" v-if="status == '2'||status == '3'">下单时间:{{order.pay_time}}</text>
  43 + <text class="orderType" v-if="status=='0'">待付款</text>
  44 + <text class="orderType" v-if="status=='1'">待收货</text>
  45 + <text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
  46 + <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
39 47 </view>
40   - <view class="orderCardInfo">
41   - <image :src="order.img" mode="aspectFill"></image>
  48 + <view class="orderCardInfo" v-if v-for="(orderInfo) in orderInfoList.list" :key="orderInfo">
  49 + <image :src="orderInfo.imgUrl" mode="aspectFill"></image>
42 50 <view class="infoText">
43   - <view class="orderName">{{order.name}}</view>
44   - <view class="orderDescrib">规格:玫瑰金 / 钛合金 / 防日光防紫外线</view>
  51 + <view class="orderName">{{orderInfo.p_name}}</view>
  52 + <view class="orderDescrib">{{orderInfo.p_name}}</view>
45 53 <view class="infoText-bottom">
46   - <view class="markPrice">{{order.price}}</view>
47   - <view class="buy-num">X{{order.buyNum}}</view>
  54 + <view class="markPrice">{{orderInfo.nowPrice}}</view>
  55 + <view class="buy-num">X {{orderInfo.num}}</view>
48 56 </view>
49 57 </view>
50 58 </view>
51   - <view class="payPrice">实付:<text class="priceNum">{{order.price}}</text> </view>
52   - <view class="btns" v-if="order.orderType === 1">
53   - <view class="btn-type1" @click="toRefundment">申请退款</view>
  59 + <view class="payPrice">实付:<text class="priceNum">{{order.total_fee}}</text> </view>
  60 + <view class="btns" v-if="status == '0'">
  61 + <view class="btn-type1" >取消订单</view>
54 62 <view class="btn-type2">去支付</view>
55 63 </view>
56   - <view class="btns" v-if="order.orderType === 0">
57   - <view class="btn-type1">再次购买</view>
  64 + <view class="btns" v-if="status == '1'">
  65 + <view class="btn-type2">确认收货</view>
  66 + </view>
  67 + <view class="btns" v-if="status == '2'">
  68 + <view class="btn-type2">再次购买</view>
58 69 </view>
  70 + <!-- <view class="btns" v-if="status == '3'">
  71 + <view class="btn-type2">再次购买</view>
  72 + </view> -->
59 73 </view>
60 74 </view>
61 75 </template>
... ... @@ -67,13 +81,72 @@
67 81 * 订单数据
68 82 */
69 83 order: {
70   - orderId: Number,
71   - img: String,
72   - name: String,
73   - originCost:String,
74   - price: String,
75   - orderType:Number,
76   - buyNum:Number
  84 + // orderId: Number,
  85 + // img: String,
  86 + // name: String,
  87 + // originCost:String,
  88 + // price: String,
  89 + // orderType:Number,
  90 + // buyNum:Number,
  91 + finished_time: null,
  92 + is_refound: String,
  93 + mch_id: String,
  94 + money_of_dcw: String,
  95 + money_of_partner: String,
  96 + money_of_shop: String,
  97 + orderJudge: Boolean,
  98 + order_info: {
  99 + address:{
  100 + cityName: String,
  101 + countyName: String,
  102 + detailInfo: String,
  103 + errMsg: String,
  104 + nationalCode: String,
  105 + postalCode: String,
  106 + provinceName: String,
  107 + telNumber: String,
  108 + userName: String,
  109 + },
  110 + cartinfo: ["127"],
  111 + keyname: "330_1588911391",
  112 + lefttime: Number,
  113 + list:[
  114 + {
  115 + cart_id: "127",
  116 + imgUrl: String,
  117 + img_index_url: null,
  118 + memo: String,
  119 + mp_id: String,
  120 + nowPrice: String,
  121 + num: String,
  122 + oldPrice: Number,
  123 + p_discount: String,
  124 + p_name: String,
  125 + p_root_index: String,
  126 + p_sale_price: String,
  127 + peopleName: String,
  128 + pics: ["79_0_D122D2.jpg","79_1_E0A1ED.jpg","79_2_B00B3D.jpg","79_3_B2CF21.jpg","79_4_33AD1B.jpg"],
  129 + pid: String,
  130 + sk_id: String,
  131 + }
  132 + ],
  133 + orderDesc: String,
  134 + total_fee: Number,
  135 + },
  136 + partner_uid: String,
  137 + pay_cate: String,
  138 + pay_id: String,
  139 + pay_time: String,
  140 + pay_wood_desc: String,
  141 + pay_wood_id: String,
  142 + prepay_id: String,
  143 + re_check_staus: String,
  144 + shopid: String,
  145 + split_userid: String,
  146 + status: String,
  147 + // status0待付款 1已付款 待收货 2 已收货待评价 3 已评价
  148 + total_fee: String,
  149 + uid: String,
77 150 },
78 151 /**
79 152 * 当前选择
... ... @@ -81,9 +154,18 @@
81 154 current:Number
82 155  
83 156 },
84   - onLoad() {
85   - // console.log('dd');
86   - console.log('order', this.props.order);
  157 + created() {
  158 + console.log(this.order);
  159 + // console.log(this.order.status );
  160 + // console.log(this.current);
  161 + },
  162 + computed:{
  163 + status(){
  164 + return this.order.status
  165 + },
  166 + orderInfoList(){
  167 + return this.order.order_info[0]
  168 + }
87 169 },
88 170 data() {
89 171 return {
... ... @@ -97,6 +179,43 @@
97 179 fail: () => {},
98 180 complete: () => {}
99 181 });
  182 + },
  183 + toOrderInfo(status,payId){
  184 + console.log(status,payId)
  185 + switch(status){
  186 + // 0待付款 1待收货 2已收货 3 已评价
  187 + case '0':
  188 + uni.navigateTo({
  189 + url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
  190 + fail(errMsg) {
  191 + console.log(errMsg)
  192 + }
  193 + })
  194 + break;
  195 + case '1':
  196 + uni.navigateTo({
  197 + url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
  198 + fail(errMsg) {
  199 + console.log(errMsg)
  200 + }
  201 + })
  202 +
  203 + break;
  204 + case '2 || 3':
  205 + uni.navigateTo({
  206 + url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
  207 + fail(errMsg) {
  208 + console.log(errMsg)
  209 + }
  210 + })
  211 +
  212 + break;
  213 +
  214 +
  215 + default:
  216 + break;
  217 +
  218 + }
100 219 }
101 220 }
102 221 }
... ... @@ -147,24 +266,34 @@
147 266 justify-content: space-between;
148 267 align-items: flex-start;
149 268 height: 188rpx;
  269 + width: 368rpx;
150 270 }
151 271 .orderName{
152 272 font-size: 14px;
153 273 color: #333333;
  274 + display: -webkit-box;
  275 + overflow: hidden;
  276 + -webkit-box-orient: vertical;
  277 + -webkit-line-clamp: 2;
154 278 }
155 279 .orderDescrib{
156 280 font-size: 12px;
157 281 color: #999999;
  282 + display: -webkit-box;
  283 + overflow: hidden;
  284 + -webkit-box-orient: vertical;
  285 + -webkit-line-clamp: 2;
158 286 }
159 287 .infoText-bottom{
160 288 display: flex;
161 289 flex-direction: row;
162   - justify-content: space-between;
  290 + justify-content: flex-start;
163 291 align-items: center;
164 292 width: 100%;
165 293 .markPrice{
166 294 font-size: 14px;
167 295 color: #FF6B4A;
  296 + margin-right: 20rpx;
168 297 }
169 298 .buy-num{
170 299 font-size: 12px;
... ...
src/pages/myOrder/myOrder.vue
... ... @@ -2,10 +2,10 @@
2 2 <view class="content">
3 3 <view class="header">
4 4 <!-- 搜索-->
5   - <view class="searchBar">
  5 + <!-- <view class="searchBar">
6 6 <icon class="searchIcon" type="search" size="14"></icon>
7 7 <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
8   - </view>
  8 + </view> -->
9 9 <view class="screenBar">
10 10 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
11 11 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
... ... @@ -20,7 +20,7 @@
20 20 <OrderCard :order = "order" :current="current"></OrderCard>
21 21 </view>
22 22 </view>
23   - <view class="footer">已显示全部</view>
  23 + <view class="footer" >没有更多订单了,去商城看看吧~</view>
24 24 </view>
25 25 </template>
26 26 <script>
... ... @@ -33,47 +33,43 @@
33 33 },
34 34 data() {
35 35 return {
  36 + //顶部筛选项
36 37 screenItems: [
37   - {current:0,text:'全部'},
38   - {current:1,text:'待付款'},
39   - {current:2,text:'待发货'},
40   - {current:3,text:'待收货'},
41   - {current:4,text:'退款售后'},
  38 + {current:"10",text:'全部'},
  39 + {current:"0",text:'待付款'},
  40 + {current:"1",text:'待收货'},
  41 + {current:"2",text:'已完成'},
  42 + // {current:"3",text:'已评价'},
  43 + // {current:"4",text:'退款'},
42 44 ],
43   - current: 0,
44   - //订单数据
45   - // orderList:[
46   - // { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:1 ,buyNum:1},
47   - // { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:1 ,buyNum:1},
48   - // { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:2 ,buyNum:1},
49   - // { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:3 ,buyNum:1},
50   - // { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:3 ,buyNum:1},
51   - // { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:4 ,buyNum:1},
52   - // { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:4 ,buyNum:1},
53   - // { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:5 ,buyNum:1},
54   - // { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'¥198',price: '¥168', orderType:5 ,buyNum:1}
55   - // ],
  45 + //当前所在item 默认10-->全部
  46 + current: "10",
56 47 };
57 48 },
58 49  
59   - onLoad: function() {
  50 + onLoad: function(option) {
  51 + //获取订单列表
60 52 store.dispatch('myOrder/getList', {
61 53 uid: "1",
62   - way: "0",
63   - });
  54 + way: "",
  55 + });
  56 + //从user过来传的status,给current,以显示对应item
  57 + this.current = option.status
64 58 },
65 59 computed: {
66 60 orderList() {
67   - console.log('orderList', this.$store.state.myOrder.orderlist);
68   - return this.$store.state.myOrder.orderlist;
  61 + // console.log('orderList', this.$store.state.myOrder.orderList);
  62 + return this.$store.state.myOrder.orderList;
69 63 }
70 64 },
71 65 methods:{
  66 + //tab点击事件
72 67 onClickItem(e) {
73 68 if (this.current !== e) {
74 69 this.current = e;
75 70 }
76 71 }
  72 +
77 73 }
78 74 }
79 75 </script>
... ... @@ -88,27 +84,28 @@
88 84 .header{
89 85 background-color: #ffffff;
90 86 width: 100%;
91   - height: 232rpx;
92   - padding: 40rpx 40rpx 36rpx 40rpx;
  87 + // height: 232rpx;
  88 + padding: 20rpx 40rpx 16rpx 40rpx;
93 89 box-sizing: border-box;
94 90 position: fixed;
95 91 top: 0;
96 92 left: 0;
97   - .searchBar {
98   - width: 670rpx;
99   - display: flex;
100   - justify-content: center;
101   - align-items: center;
102   - box-sizing: border-box;
103   - padding: 0rpx 16rpx;
104   - border: 1px solid #FF6B4A;
105   - border-radius: 8rpx;
106   - background-color: #ffffff;
107   - }
  93 + // .searchBar {
  94 + // width: 670rpx;
  95 + // display: flex;
  96 + // justify-content: center;
  97 + // align-items: center;
  98 + // box-sizing: border-box;
  99 + // padding: 0rpx 16rpx;
  100 + // border: 1px solid #FF6B4A;
  101 + // border-radius: 8rpx;
  102 + // background-color: #ffffff;
  103 + // }
108 104  
109 105 .screenBar{
110 106 width: 670rpx;
111   - height: 110rpx;
  107 + // height: 110rpx;
  108 + height: 70rpx;
112 109 display: flex;
113 110 flex-direction: row;
114 111 justify-content: space-between;
... ... @@ -138,7 +135,8 @@
138 135 }
139 136 }
140 137 .orderList{
141   - margin-top: 232rpx;
  138 + // margin-top: 232rpx;
  139 + margin-top: 132rpx;
142 140 }
143 141 .footer{
144 142 font-size: 14px;
... ...
src/pages/myOrderPaying/myOrderPaying.vue
  1 +<!-- 订单待付款 待收货 -->
1 2 <template>
2   -
3   - <view class="content">
4   - <view class="order-hr"></view>
5   - <view class="order-time">
  3 + <view class="content">
  4 + <!-- 待付款 -->
  5 + <view class="order-time" v-if="status == '0'">
6 6 <text>请在</text>
7   - <!-- <text class="p2"></text> -->
8 7 <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false"
9   - :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown>
  8 + :hour="0" :second="getTime" @timeup=timeup ></uni-countdown>
10 9 <text>内完成付款</text>
  10 + </view>
  11 + <!-- 待收货 -->
  12 + <view class="headerBanner" v-if="status == '1'">
  13 + <view class="bannerLeft">
  14 + <view class="T1">卖家已发货</view>
  15 + <view class="T2">还剩 确认收货</view>
  16 + </view>
  17 + <image src="../../static/car.png" mode="aspectFill"></image>
11 18 </view>
12 19 <view class="order">
13 20 <view class="order-user">
14 21 <view class="order-user-head">
15   - <text class="p1">钱大大</text>
16   - <text class="p2">18823749843</text>
  22 + <text class="p1">{{orderAddressInfo.userName}}</text>
  23 + <text class="p2">{{orderAddressInfo.telNumber}}</text>
17 24 </view>
18 25 <view class="order-user-body">
19 26 <image src="../../static/myorder-paying-location.png"></image>
20   - <text class="p3">四川省 德阳市 旌阳区\n黄河西路碧桂园3期 4单元 202</text>
  27 + <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text>
21 28 </view>
22 29 </view>
23 30 <view class="order-info">
24   - <view class="order-info-head">
25   - <image src="../../static/myorder-paying-pic.png"></image>
  31 + <view class="order-info-head" v-for="(orderInfoListItem,index) in orderInfoList" :key="index" >
  32 + <image :src="orderInfoListItem.imgUrl" mode="aspectFill"></image>
26 33 <view class="order-info-head-r">
27   - <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text>
  34 + <text class="p1">{{orderInfoListItem.p_name}}</text>
28 35 <view class="p2" style="margin: 0;">
29 36 规格:玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
30 37 <!-- <view class="arrow"></view> -->
  38 + </view>
  39 + <view class="infoText-bottom">
  40 + <view class="markPrice">{{orderInfoListItem.nowPrice}}</view>
  41 + <view class="buy-num">X {{orderInfoListItem.num}}</view>
31 42 </view>
32   - <text class="p3"><span>¥180</span><span class="p4">X1</span></text>
33 43 </view>
34 44 </view>
35 45 <!-- <view class="order-info-goodsnum">
... ... @@ -37,21 +47,21 @@
37 47 </view> -->
38 48 <text class="order-info-freight">
39 49 <text class="p1">运费</text>
40   - <text class="p2">0.00</text>
  50 + <text class="p2">{{orderInfo.trans_price}}</text>
41 51 </text>
42 52 <text class="order-info-discount">
43 53 <text class="p1">优惠</text>
44   - <text class="p2">-¥70.00</text>
  54 + <text class="p2">-¥{{totalDiscount}}</text>
45 55 </text>
46 56 <text class="order-info-price">
47 57 <text class="p1">实付</text>
48   - <text class="p2">¥110</text>
  58 + <text class="p2">¥{{orderInfo.order_info.total_fee}}</text>
49 59 </text>
50 60 <text class="order-info-num">
51   - <text>订单号:203486795859605849</text>
  61 + <text>订单号:{{orderInfo.prepay_id}}</text>
52 62 </text>
53 63 <text class="order-info-time">
54   - <text>下单时间:2020-10-22 14:32:42</text>
  64 + <text>下单时间:{{orderInfo.pay_time}}</text>
55 65 </text>
56 66 <view class="order-info-hr"></view>
57 67 <view class="order-info-contact">
... ... @@ -60,59 +70,162 @@
60 70 </view>
61 71 </view>
62 72 </view>
63   - <view class="order-confim">
64   - <button class="b1">取消订单</button>
65   - <button class="b2">立即支付</button>
  73 + <view class="order-confim" v-if="status == '0'">
  74 + <button class="b1" @click="cancleOrder">取消订单</button>
  75 + <button class="b2" @click="paylog">立即支付</button>
  76 + </view>
  77 +
  78 + <view class="order-confim" v-if="status == '1'">
  79 + <!-- <button class="b1">取消订单</button> -->
  80 + <button class="b2" @click="confirmOrder">确认收货</button>
66 81 </view>
67 82 </view>
68 83 </template>
69 84  
70   -<script>
  85 +<script>
  86 + import store from '@/store';
71 87 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
72 88 export default {
73 89 components: {
74 90 UniCountdown
75 91 },
76 92 data() {
77   - return {
78   - scrollHeight: false,
  93 + return {
  94 + // orderInfo:{},
  95 + payId:'',
  96 + status:'',
  97 + uid:'',
  98 + openid:'',
  99 + lefttime:0,
  100 +
79 101 }
  102 + },
  103 + onLoad: function(option) {
  104 + console.log(option);
  105 + this.payId = option.payId;
  106 + this.status = option.status
  107 + const openid = uni.getStorageSync('openid');
  108 + const uid = this.$store.state.user.uid
  109 + this.uid = uid
  110 + this.openid = openid
  111 + store.dispatch('orderRead/getOrderInfo',{
  112 + pay_id:this.payId,
  113 + uid:'1',
  114 + openid:openid
  115 + })
  116 +
  117 +
  118 +
  119 + // this.orderInfo = this.$store.state.orderRead.orderInfo
  120 + },
  121 + computed: {
  122 + //获取订单详细信息
  123 + orderInfo() {
  124 + console.log(this.$store.state.orderRead.orderInfo)
  125 + return this.$store.state.orderRead.orderInfo || {}
  126 + },
  127 + orderInfoList(){
  128 + const orderInfoList =this.orderInfo.order_info[0].list
  129 + return orderInfoList
  130 + },
  131 + //获取订单地址信息
  132 + orderAddressInfo(){
  133 + return this.orderInfo.order_info[0].address
  134 + },
  135 + //订单付款时间
  136 + getTime(){
  137 + return this.orderInfo.order_info[0].lefttime
  138 + },
  139 + // 计算总优惠额
  140 + totalDiscount(){
  141 + const discountInfoList = this.orderInfo.discount_info
  142 + let totalDiscount = 0;
  143 + if(discountInfoList){
  144 + discountInfoList.map((discountItem,index)=>{
  145 + totalDiscount += Number(discountItem.value)
  146 + })
  147 + }
  148 + // console.log(totalDiscount)
  149 + return totalDiscount
  150 + },
80 151 },
81   - methods: {
82   -
  152 + methods: {
  153 + //取消订单
  154 + timeup(){
  155 + this.cancleOrder()
  156 + },
  157 + cancleOrder(){
  158 + const uid = this.uid
  159 + const openid = this.openid
  160 + uni.showModal({
  161 + title: '提示',
  162 + content: '现在取消,订单不可恢复哦,确认取消吗?',
  163 + success: function (res) {
  164 + if (res.confirm) {
  165 + store.dispatch('cancelOrder/cancel',{
  166 + keyname:'1',
  167 + uid:uid,
  168 + openid:openid
  169 + })
  170 + } else if (res.cancel) {
  171 + console.log('用户点击取消');
  172 + }
  173 + }
  174 + })
  175 + },
  176 + paylog(){
  177 +
  178 + },
  179 + confirmOrder(){
  180 + store.dispatch('statusConfirm/confirm',{
  181 + uid:this.uid,
  182 + openid:this.openid,
  183 + oldway:'1',
  184 + way:'2',
  185 + pay_id:this.payId,
  186 + judgeContent:'',
  187 + orderInfo:this.orderInfo.order_info,
  188 + }).then(
  189 + setTimeout(()=>{
  190 + uni.navigateBack()
  191 + },1500)
  192 + )
  193 + }
83 194 }
84 195 }
85 196 </script>
86 197  
87 198 <style lang="scss" scoped>
88   - .content{
  199 + .content{
  200 + min-height: 100vh;
89 201 display: flex;
90 202 flex-direction: column;
91   - justify-content: center;
  203 + justify-content: flex-start;
92 204 align-items: center;
93 205 background-color: #f2f2f2;
94 206 }
95 207  
96 208  
97 209 .order {
98   - min-height: 1196rpx;
99 210 margin-bottom: 112rpx;
100   - background: #F2F2F2;
101   - }
102   - .order-hr {
103   - width: 100%;
104   - height: 1px;
105   - background-color: #E9E9E9;
  211 + background: #F2F2F2;
  212 + margin-top: 140rpx;
  213 + width: 670rpx;
106 214 }
  215 +
107 216 .order-time {
108 217 width: 100%;
109 218 height: 140rpx;
110 219 background-color: #fff;
111 220 display: flex;
112   - justify-content: center;
  221 + justify-content: center;
  222 + align-items: center;
  223 + position: fixed;
  224 + top: 0 ;
  225 + left: 0;
113 226 text {
114 227 // font-family: PingFangSC-Regular;
115   - margin-top: 48rpx;
  228 + // margin-top: 48rpx;
116 229 font-size: 14px;
117 230 color: #333333;
118 231 letter-spacing: -0.26px;
... ... @@ -125,9 +238,36 @@
125 238 letter-spacing: -0.34px;
126 239 }
127 240 }
128   -
  241 + .headerBanner{
  242 + width: 100%;
  243 + height: 140rpx;
  244 + background: #4A90E2;
  245 + padding: 26rpx 60rpx 24rpx 60rpx;
  246 + box-sizing: border-box;
  247 + color: #FFFFFF;
  248 + display: flex;
  249 + justify-content: space-between;
  250 + align-items: center;
  251 + position: fixed;
  252 + top: 0 ;
  253 + left: 0;
  254 + .bannerLeft{
  255 + font-size: 36rpx;
  256 + display: flex;
  257 + flex-direction: column;
  258 + justify-content: center;
  259 + align-items: center;
  260 + .T2{
  261 + font-size: 24rpx;
  262 + }
  263 + }
  264 + image{
  265 + height: 56rpx;
  266 + width: 72rpx;
  267 + }
  268 + }
  269 +
129 270 .order-user {
130   - width: 670rpx;
131 271 height: 228rpx;
132 272 background: #FFFFFF;
133 273 border-radius: 14rpx;
... ... @@ -137,7 +277,6 @@
137 277 .order-user-head {
138 278 display: flex;
139 279 height: 108rpx;
140   - width: 100%;
141 280 align-items: center;
142 281 margin-left: 126rpx;
143 282 .p1 {
... ... @@ -172,7 +311,6 @@
172 311 }
173 312  
174 313 .order-info {
175   - width: 670rpx;
176 314 background-color: #fff;
177 315 box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06);
178 316 border-radius: 16rpx;
... ... @@ -236,19 +374,24 @@
236 374 font-size: 12px;
237 375 color: #999999;
238 376 letter-spacing: -0.23px;
239   - }
240   - .p3 {
241   - height: 20px;
242   - // font-family: PingFangSC-Regular;
243   - font-size: 14px;
244   - color: #FF6B4A;
245   - letter-spacing: -0.26px;
246   - }
247   - .p4{
248   - font-size: 12px;
249   - color: #999999;
250   - letter-spacing: -0.23px;
251   - margin-left: 10px;
  377 + }
  378 + .infoText-bottom{
  379 + display: flex;
  380 + flex-direction: row;
  381 + justify-content: flex-start;
  382 + align-items: center;
  383 + width: 100%;
  384 + margin-left: 0;
  385 + .markPrice{
  386 + font-size: 14px;
  387 + color: #FF6B4A;
  388 + margin-right: 20rpx;
  389 + margin-left: 0rpx;
  390 + }
  391 + .buy-num{
  392 + font-size: 12px;
  393 + color: #999999;
  394 + }
252 395 }
253 396 }
254 397  
... ... @@ -369,8 +512,9 @@
369 512  
370 513 .order-confim {
371 514 display: flex;
372   - align-items: center;
373   - z-index: 999;
  515 + align-items: center;
  516 + justify-content: flex-end;
  517 + // z-index: 999;
374 518 width: 100%;
375 519 height: 112rpx;
376 520 position: fixed;
... ... @@ -388,7 +532,7 @@
388 532 .b1 {
389 533 // font-family: PingFangSC-Regular;
390 534 color: #FF6B4A;
391   -
  535 + background-color: #FFFFFF;
392 536 }
393 537 .b2 {
394 538 // font-family: PingFangSC-Regular;
... ...
src/pages/predelivery/predelivery.vue
  1 +<!-- 待发货 尹聃-->
1 2 <template>
2 3 <view class="container">
3 4 <view v-for="(items) in form" :key="items.key" class="order">
... ...
src/pages/user/user.vue
... ... @@ -8,35 +8,72 @@
8 8 <text class="userName">{{nickName}}</text>
9 9 </view>
10 10 </view>
11   - <view class="service">
  11 + <!-- <view class="service">
12 12 <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
  13 + </view> -->
  14 + </view>
  15 + <view class="myOpticsData" @click="toOpticsData">
  16 + <view class="left">
  17 + <image src="../../static/img/user/dataWrite.png" mode="aspectFit"></image>
  18 + <text>验光数据</text>
13 19 </view>
  20 + <image src="../../static/right.png" mode="aspectFit"></image>
14 21 </view>
15 22 <view class="myOrder">
16 23 <view class="orderHeader">
17 24 <text>全部订单</text>
18   - <view class="btn" @click="toMyOrder">
  25 + <view class="btn" @click="toMyOrder('10')">
19 26 全部
20   - <image src="../../static/right.png" mode="aspectFill"></image>
  27 + <image src="../../static/right.png" mode="aspectFit"></image>
21 28 </view>
22 29 </view>
23 30 <view class="orderBody">
24   - <view class="item waitPay" @click="toMyOrderPaying">
25   - <image src="../../static/waitDeliver.png" mode="aspectFill"></image>
  31 + <view class="item waitPay" @click="toMyOrder('0')">
  32 + <image src="../../static/img/user/waitDeliver.png" mode="aspectFit"></image>
26 33 <text>待付款</text>
27 34 </view>
28   - <view class="item waitDeliver" @click="toPredelivery" >
29   - <image src="../../static/waitPay.png" mode="aspectFill"></image>
30   - <text>待发货</text>
31   - </view>
32   - <view class="item waitReceive" @click="torefunProgress">
33   - <image src="../../static/waitReceive.png" mode="aspectFill"></image>
  35 + <view class="item waitDeliver" @click="toMyOrder('1')" >
  36 + <image src="../../static/img/user/waitPay.png" mode="aspectFit"></image>
34 37 <text>待收货</text>
35 38 </view>
36   - <view class="item service" @click="torefundment">
37   - <image src="../../static/service.png" mode="aspectFill"></image>
38   - <text>退换/售后</text>
  39 + <view class="item waitReceive" @click="toMyOrder('2')">
  40 + <image src="../../static/img/user/waitReceive.png" mode="aspectFit"></image>
  41 + <text>已完成</text>
  42 + </view>
  43 + <!-- <view class="item service" @click="toMyOrder('3')">
  44 + <image src="../../static/img/user/refound.png" mode="aspectFit"></image>
  45 + <text>已评价</text>
  46 + </view> -->
  47 + </view>
  48 + </view>
  49 + <view class="someItem">
  50 + <!-- <view class="item">
  51 + <view class="left">
  52 + <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>
  53 + <text>推广记录与收益</text>
  54 + </view>
  55 + <image src="../../static/right.png" mode="aspectFit"></image>
  56 + </view> -->
  57 + <view class="item">
  58 + <view class="left">
  59 + <image src="../../static/img/user/introduce.png" mode="aspectFit"></image>
  60 + <text>系统介绍</text>
  61 + </view>
  62 + <image src="../../static/right.png" mode="aspectFit"></image>
  63 + </view>
  64 + <view class="item">
  65 + <view class="left">
  66 + <image src="../../static/img/user/joinUs.png" mode="aspectFit"></image>
  67 + <text>加入我们</text>
  68 + </view>
  69 + <image src="../../static/right.png" mode="aspectFit"></image>
  70 + </view>
  71 + <view class="item">
  72 + <view class="left">
  73 + <image src="../../static/img/user/service.png" mode="aspectFit"></image>
  74 + <text>联系客服</text>
39 75 </view>
  76 + <image src="../../static/right.png" mode="aspectFit"></image>
40 77 </view>
41 78 </view>
42 79 <view class="recommend">
... ... @@ -47,11 +84,13 @@
47 84 </view>
48 85 <!-- 商品列表 -->
49 86 <view class="goods-list">
50   - <view class="product-list">
51   - <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" >
52   - <Card :goods = "goods"></Card>
53   - </view>
54   - </view>
  87 + <scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y class="product-list">
  88 + <block v-for="(goods) in userRecommandList " :key="goods.list.sk_id">
  89 + <view class="product" v-for="(item) in goods.list" :key="item.sk_id">
  90 + <Card :goods="item" ></Card>
  91 + </view>
  92 + </block>
  93 + </scroll-view>
55 94 <view class="loading-text">{{loadingText}}</view>
56 95 </view>
57 96 </view>
... ... @@ -80,20 +119,8 @@
80 119 },
81 120 data() {
82 121 return {
83   - //商品数据
84   - goodsList:[
85   - { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
86   - { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
87   - { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
88   - { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
89   - { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
90   - { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
91   - { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
92   - { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
93   - { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' },
94   - { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }
95   - ],
96   - isAuth: true, // 是否显示授权页面
  122 + isAuth: true, // 是否显示授权页面,
  123 + pagesnum:1 // 分页请求初始值
97 124 }
98 125 },
99 126 onLoad() {
... ... @@ -108,6 +135,7 @@
108 135 }
109 136 }
110 137 })
  138 +
111 139 },
112 140 computed: {
113 141 nickName() {
... ... @@ -122,11 +150,18 @@
122 150 return this.$store.state.userRecommand.recommandList;
123 151 }
124 152 },
125   - onLoad: function() {
  153 + onLoad:function(){
  154 + console.log('usr-my',this.$store.state.user.userInfo)
  155 +
126 156 store.dispatch('userRecommand/getRecommandList', {
127   - uid: 2,
  157 + // uid:468,
  158 + uid: this.$store.state.user.userInfo.uid,
  159 + // openid:"oc8cg0d-0mFIInO4LyrCFtInPWr4",
  160 + openid:this.$store.state.user.userInfo.openid,
  161 + page: this.pagesnum
128 162 });
129 163 },
  164 +
130 165 methods: {
131 166 // 授权
132 167 onGotUserInfo(e) {
... ... @@ -139,39 +174,27 @@
139 174 this.isAuth = true
140 175 }
141 176 },
142   - toMyOrder(){
  177 + toMyOrder(status){
143 178 uni.navigateTo({
144   - url: '../myOrder/myOrder?current=0',
  179 + url: `../myOrder/myOrder?status=`+status,
145 180 success: res => {},
146 181 fail: () => {},
147 182 complete: () => {}
148 183 });
149 184 },
150   - toPredelivery(){
  185 + toOpticsData(){
151 186 uni.navigateTo({
152   - url: '../myOrder/myOrder?current=2',
153   - success: res => {},
154   - fail: () => {},
155   - complete: () => {}
  187 + url: `../addOpticsData/addOpticsData`,
156 188 });
157 189 },
158   - toMyOrderPaying(){
159   - uni.navigateTo({
160   - url: '../myOrder/myOrder?current=1',
161   - success: res => {},
162   - fail: () => {},
163   - complete: () => {}
  190 + handleScrolltolower(){
  191 + // console.log('usr-my',this.$store.state.user.userInfo)
  192 + this.pagesnum++;
  193 + store.dispatch('userRecommand/getRecommandList', {
  194 + uid: this.$store.state.user.userInfo.uid,
  195 + openid:this.$store.state.user.userInfo.openid,
  196 + page: this.pagesnum
164 197 });
165   - },
166   - torefundment(){
167   - uni.navigateTo({
168   - url:'../refundment/refundment',
169   - })
170   - },
171   - torefunProgress(){
172   - uni.navigateTo({
173   - url:'../refundProgress/refundProgress'
174   - })
175 198 }
176 199 }
177 200 }
... ... @@ -228,18 +251,47 @@
228 251 }
229 252 }
230 253 }
231   - .service{
232   - margin-top: 20rpx;
  254 + // .service{
  255 + // margin-top: 20rpx;
  256 + // image{
  257 + // height: 36rpx;
  258 + // width: 36rpx;
  259 + // }
  260 + // }
  261 + }
  262 + .myOpticsData{
  263 + width: 670rpx;
  264 + height: 120rpx;
  265 + background-color: #FFFFFF;
  266 + border-radius: 6px;
  267 + box-shadow: 1px 1px 7px 0 rgba(133,107,107,0.10);
  268 + position: relative;
  269 + bottom: 44rpx;
  270 + padding: 40rpx;
  271 + box-sizing: border-box;
  272 + display: flex;
  273 + justify-content: space-between;
  274 + align-items: center;
  275 + .left{
  276 + font-size: 14px;
  277 + color: #333333;
  278 + display: flex;
  279 + align-items: center;
233 280 image{
234   - height: 36rpx;
235   - width: 36rpx;
  281 + margin-right: 32rpx;
  282 + width: 30rpx;
  283 + height: 34rpx;
236 284 }
237 285 }
  286 + image{
  287 + height: 16px;
  288 + width: 8px;
  289 + }
238 290 }
239 291 .myOrder{
240 292 width: 100%;
241 293 height: 296rpx;
242   - margin-top: 20rpx;
  294 + // margin-top: 116rpx;
243 295 margin-bottom: 20rpx;
244 296 padding: 0 40rpx;
245 297 box-sizing: border-box;
... ... @@ -265,10 +317,12 @@
265 317 .btn{
266 318 font-size: 12px;
267 319 color: #999999;
  320 + display: flex;
  321 + align-items: center;
268 322 image{
269 323 margin-left: 20rpx;
270   - height: 16rpx;
271   - width: 8rpx;
  324 + height: 32rpx;
  325 + width: 16rpx;
272 326 }
273 327 }
274 328 }
... ... @@ -276,14 +330,14 @@
276 330 width: 100%;
277 331 display: flex;
278 332 flex-direction: row;
279   - justify-content: space-between;
  333 + justify-content: space-around;
280 334 align-items: center;
281 335 .item{
282 336 display: flex;
283 337 flex-direction: column;
284 338 align-items: center;
285 339 image{
286   - width: 46rpx;
  340 + width: 62rpx;
287 341 height: 46rpx;
288 342 }
289 343 text{
... ... @@ -294,6 +348,46 @@
294 348 }
295 349 }
296 350 }
  351 + .someItem{
  352 + width: 100%;
  353 + height: 336rpx;
  354 + background: #FFFFFF;
  355 + box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
  356 + border-radius: 6px;
  357 + border-radius: 6px;
  358 + margin-bottom: 18rpx;
  359 + box-sizing: border-box;
  360 + padding: 21rpx 48rpx 21rpx 42rpx;
  361 + box-sizing: border-box;
  362 + display: flex;
  363 + flex-direction: column;
  364 + justify-content: space-between;
  365 + align-items: center;
  366 + .item{
  367 + display: flex;
  368 + justify-content: space-between;
  369 + border-bottom: 1px solid #F2F2F2;;
  370 + align-items: center;
  371 + height: 72rpx;
  372 + width: 100%;
  373 + .left{
  374 + font-size: 14px;
  375 + color: #333333;
  376 + display: flex;
  377 + align-items: center;
  378 + image{
  379 + margin-right: 32rpx;
  380 + width: 30rpx;
  381 + height: 34rpx;
  382 + }
  383 + }
  384 + image{
  385 + height: 16px;
  386 + width: 8px;
  387 + }
  388 + }
  389 +
  390 + }
297 391 .recommend{
298 392 background: #FFFFFF;
299 393 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
... ... @@ -334,6 +428,7 @@
334 428 width: 92%;
335 429 padding: 0 4% 3vw 4%;
336 430 display: flex;
  431 + height: 200px;
337 432 justify-content: space-between;
338 433 flex-wrap: wrap;
339 434 .product{
... ...
src/static/car.png

1.56 KB

src/static/dataLook.png

6.6 KB

src/static/glassLook.png

10 KB

src/static/img/goods/p1.jpg

11.3 KB

src/static/img/goods/p10.jpg

22.6 KB

src/static/img/goods/p11.png

121 KB

src/static/img/goods/p12.png

115 KB

src/static/img/goods/p2.jpg

16.3 KB

src/static/img/goods/p3.jpg

15 KB

src/static/img/goods/p4.jpg

6.55 KB

src/static/img/goods/p5.jpg

29.6 KB

src/static/img/goods/p6.jpg

6.25 KB

src/static/img/goods/p7.jpg

20.1 KB

src/static/img/goods/p8.jpg

20.4 KB

src/static/img/goods/p9.jpg

24.1 KB

src/static/img/user/dataWrite.png

382 Bytes

src/static/img/user/introduce.png

488 Bytes

src/static/img/user/joinUs.png

1.97 KB

src/static/img/user/refound.png

3.38 KB

src/static/img/user/service.png

1.17 KB

src/static/img/user/shouyi.png

1.51 KB

src/static/img/user/waitDeliver.png

1.91 KB

src/static/img/user/waitPay.png

2.19 KB

src/static/img/user/waitReceive.png

2.01 KB

src/static/joinUs (2).png

488 Bytes

src/static/joinUs (3).png

1.17 KB

src/static/joinUs.png

1.97 KB

src/static/shouyi.png

1.51 KB

src/static/waitReceive.png

789 Bytes | W: | H:

2.01 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/store/modules/cancelOrder.js
... ... @@ -0,0 +1,36 @@
  1 +import urlAlias from '../url';
  2 +import request from '../request';
  3 +
  4 +const {
  5 + cancelOrder
  6 +} = urlAlias;
  7 +
  8 +const state = {
  9 + orderList: [],
  10 +};
  11 +
  12 +const mutations = {
  13 + INIT: (state, data) => {
  14 + state.orderList = data;
  15 + },
  16 +};
  17 +
  18 +const actions = {
  19 + cancel({ commit }, param) {
  20 + request({
  21 + url: cancelOrder,
  22 + data: param,
  23 + success: (res) => {
  24 + console.log(res.data);
  25 + // commit("INIT", res.data.data);
  26 + },
  27 + })
  28 + }
  29 +}
  30 +
  31 +export default {
  32 + namespaced: true,
  33 + state,
  34 + mutations,
  35 + actions,
  36 +}
0 37 \ No newline at end of file
... ...
src/store/modules/cart.js
1 1 import urlAlias from '../url';
2 2 import request from '../request';
3 3  
4   -const { cartList } = urlAlias;
  4 +const { cartList , cartModi, cartDel, cartAdd } = urlAlias;
5 5  
6 6 const state = {
7 7 cartList: [],
8 8 };
9 9  
  10 +
  11 +const data = {
  12 + data:{
  13 + // list 购物车列表
  14 + list:[
  15 + {
  16 + goods_name: "1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流", //商品名称
  17 + pid: "6",//产品id
  18 + real_price: 99,
  19 + checked: true,//是否选中
  20 + name: "颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射防日光 / 配件 免费送 /折射",//属性名称 ,颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 …
  21 + cart_id: "39", //购物车唯一序列号
  22 + num: "1", //此购物
  23 + pics: "/static/myorder-paying-pic.png", //商品图片
  24 + goodsType:2,// 商品种类
  25 + },
  26 + {
  27 + goods_name: "1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流", //商品名称
  28 + pid: "4",//产品id
  29 + real_price: 189,
  30 + checked: false,//是否选中
  31 + name: "颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射防日光 / 配件 免费送 /折射",//属性名称 ,颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 …
  32 + cart_id: "38", //购物车唯一序列号
  33 + num: "2", //此购物
  34 + pics: "/static/myorder-paying-pic.png", //商品图片
  35 + goodsType:3,// 商品种类
  36 + },
  37 + ],
  38 + mp_id: "1",
  39 + mp_list://使用人,一个产品只有一个使用人
  40 + [
  41 + {
  42 + glassWidth: "54",//镜宽
  43 + img_url2: "http://localhost:8087/images/shop_1/1/",//使用人的头像,根据此头像,AI识别出数据。
  44 + in_time: "2020-02-22 03:19:38",//使用人加入的时间
  45 + leftAxi: "124",//左眼数据
  46 + leftCyl: "-2",//左眼数据
  47 + leftSph: "-1",//左眼数据
  48 + leftVis: "5",//左眼数据
  49 + legWidth: "158",//镜腿长
  50 + metal: null,//使用人的其它定义(材质过敏之类的)
  51 + mp_id: "1",//使用的id
  52 + name: "me",//使用人的名字
  53 + norseWidth: "18",//鼻宽
  54 + pd: "89.6",//瞳距
  55 + price: "0",//此人偏好的价格
  56 + rightAxi: "123",//右眼数据
  57 + rightCyl: "24",//右眼数据
  58 + rightSph: "-4",//右眼数据
  59 + rightVis: "5.1",//右眼数据
  60 + uid: "1",//购买人的uid
  61 + }
  62 + ],
  63 + sk_id: "80",//此产品下的sku的唯一id
  64 + skuList:[//sku清单
  65 + {
  66 + discount: "45",//折扣,数据库中以int型存储,所以要除100
  67 + in_price: "6000",//进货价格,数据库中以int型存储,单位是分,所以显示时要除以100
  68 + kc: "0",//库存
  69 + model_pic: null,//模型试戴图
  70 + out_price: 191.8,//销售价格,元
  71 + pic: "https://glass.xiuyetang.com//upload_jk/6/6_321EB1.jpg",//可供查看图
  72 + pid: "6",//索引产品id
  73 + real_price: 99,//真实可成交价格
  74 + sk_id: "74",//成交时的sku_id
  75 + sku_name: "1.56非球面防蓝光_黑色",//sku名称
  76 + sku_shop_value: "",//sku商家定义值
  77 + sku_value: "47_51",//sku系统生成值
  78 + status: "1",//此产品下的sku状态
  79 + }
  80 + ]
  81 + }, // 一个产品下,会有多个sku,都在这个skuList数组下
  82 + msg: "ok",
  83 + status: 1,
  84 +}
  85 +
10 86 const mutations = {
11 87 INIT: (state, cartList) => {
12 88 state.cartList = cartList;
13 89 },
  90 + DEL:(state,index)=>{
  91 + console.log('mutations====>',state.cartList)
  92 + state.cartList.splice(index,1)
  93 + console.log('mutations====>index',index)
  94 + // state.cartList=delList
  95 + },
  96 + MODI:(state,args) => {
  97 + console.log('the num',state.cartList[args.index].num)
  98 + console.log('mutations====>isadd',args)
  99 + if(args.isadd)
  100 + {
  101 + state.cartList[args.index].num=args.num
  102 + } else{
  103 + state.cartList[args.index].num=args.num
  104 + }
  105 + console.log('the num',state.cartList[args.index].num)
  106 + },
  107 +
14 108 };
15 109  
16   -
17   -
18 110 const actions = {
19 111  
20   - getCartList({ commit }, param) {
21   - request({
22   - url: cartList,
23   - success: (res) => {
24   -
25   - commit('INIT', res.data.data)
26   - },
27   - fail: (res) => {
28   - console.log("fail status === > ", res);
29   - },
30   - complete: (res) => {
31   - console.log("complete status === > ", res);
32   - },
33   - })
34   - }
35   -
  112 + getCartList({ commit }, param) {
  113 + request({
  114 + url: cartList,
  115 + data:param,
  116 + success: (res) => {
  117 + console.log('cart===>接口数据',res.data.data)
  118 + // const resData = {
  119 + // ...res,
  120 + // data,
  121 + // }
  122 + commit('INIT', res.data.data)
  123 + },
  124 + fail: (res) => {
  125 + console.log("fail status === > ", res);
  126 + },
  127 + complete: (res) => {
  128 + console.log("complete status === > ", res);
  129 + },
  130 + })
  131 + },
  132 +
  133 + modiCart({ commit }, param) {
  134 + const args=Object.assign({num:param.num},param.args)
  135 + delete param.args
  136 + request({
  137 + url: cartModi,
  138 + data: param,
  139 + success: (res) => {
  140 + console.log('modi-parm',param)
  141 + commit('MODI',args)
  142 + },
  143 + fail: (res) => {
  144 + console.log("fail status === > ", res);
  145 + },
  146 + complete: (res) => {
  147 + console.log("complete status === > ", res);
  148 + },
  149 + })
  150 + },
  151 +
  152 + delCart({ commit },param ) {
  153 + let arg = param.arg;
  154 + delete param.arg
  155 + request({
  156 + url: cartDel,
  157 + data: param,
  158 + success: (res) => {
  159 + console.log('del-parm',param)
  160 + console.log('del-myparms==>',arg)
  161 + // console.log('deacart====>cartList',this.$store.state.cart.cartList)
  162 +
  163 + commit('DEL',arg)
  164 + },
  165 + fail: (res) => {
  166 + console.log("fail status === > ", res);
  167 + },
  168 + complete: (res) => {
  169 + console.log("complete status === > ", res);
  170 + },
  171 + })
  172 + },
  173 +
  174 + addCart({ commit }, param) {
  175 + console.log('请求接口开始')
  176 + request({
  177 + url: cartAdd,
  178 + data:param,
  179 + success: (res) => {
  180 + console.log('add-parm',param)
  181 + console.log('addcart===>res.data===>',res.data)
  182 + // commit('INIT', res.data.data)
  183 + },
  184 + fail: (res) => {
  185 + console.log("fail status === > ", res);
  186 + },
  187 + complete: (res) => {
  188 + console.log("complete status === > ", res);
  189 + },
  190 + })
  191 + },
  192 +
36 193 }
37 194  
38 195 export default {
... ...
src/store/modules/detailStandard_k.js
... ... @@ -2,7 +2,7 @@ import urlAlias from &#39;../url&#39;;
2 2 import request from '../request';
3 3  
4 4 const {
5   - detailStandardList
  5 + detailStandardUrl
6 6 } = urlAlias
7 7  
8 8 const state = {
... ... @@ -10,29 +10,28 @@ const state = {
10 10 };
11 11  
12 12 const mutations = {
13   - INIT: (state, detailStandardList) => {
14   - state.detailStandardList = detailStandardList;
  13 + INIT: (state, data) => {
  14 + state.list = data;
15 15 },
16 16 };
17 17  
18 18 const actions = {
19   - getList({ commit }, param){
  19 + fetch({ commit }, param) {
20 20 request({
21   - detailStandardList,
22   - success: (res) => {
23   -
24   - commit('INIT', res.data.data)
25   - console,log('success')
26   - },
27   - fail: (res) => {
28   - console.log("detail status === > ", res);
29   - },
30   - complete: (res) => {
31   - console.log("detail compete status === > ", res);
32   - },
33   - })
  21 + url: detailStandardUrl,
  22 + data: param,
  23 + success: (res) => {
  24 + commit('INIT', res.data);
  25 + },
  26 + fail: (res) => {
  27 + console.log(" detail fail status === > ", res);
  28 + },
  29 + complete: (res) => {
  30 + console.log(" detail complete status === > ", res);
  31 + },
  32 + })
34 33 }
35   -}
  34 + }
36 35  
37 36 export default {
38 37 namespaced: true,
... ...
src/store/modules/myLoveList.js
... ... @@ -0,0 +1,36 @@
  1 +import urlAlias from '../url';
  2 +import request from '../request';
  3 +
  4 +const {
  5 + mylovelist
  6 +} = urlAlias;
  7 +
  8 +const state = {
  9 + loveList: [],
  10 +};
  11 +
  12 +const mutations = {
  13 + INIT: (state, data) => {
  14 + state.loveList = data;
  15 + },
  16 +};
  17 +
  18 +const actions = {
  19 + getLoveList({ commit }, param) {
  20 + request({
  21 + url: mylovelist,
  22 + data: param,
  23 + success: (res) => {
  24 + // console.log(res.data);
  25 + commit("INIT", res.data.data);
  26 + },
  27 + })
  28 + }
  29 +}
  30 +
  31 +export default {
  32 + namespaced: true,
  33 + state,
  34 + mutations,
  35 + actions,
  36 +}
0 37 \ No newline at end of file
... ...
src/store/modules/myOrder.js
... ... @@ -2,75 +2,75 @@ import urlAlias from &#39;../url&#39;;
2 2 import request from '../request';
3 3  
4 4 const {
5   - orderList
  5 + myOrderList
6 6 } = urlAlias;
7 7  
8   -const data = {
9   - data: [
10   - {
11   - finished_time: null,
12   - is_refound: "0",
13   - mch_id: "1436019502",
14   - money_of_dcw: "0",
15   - money_of_partner: "0",
16   - money_of_shop: "0",
17   - orderJudge: false,
18   - order_info: {
19   - address:{
20   - cityName: "镇江市",
21   - countyName: "丹阳市",
22   - detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司",
23   - errMsg: "chooseAddress:ok",
24   - nationalCode: "321181",
25   - postalCode: "212300",
26   - provinceName: "江苏省",
27   - telNumber: "15896379277",
28   - userName: "点餐汪客服",
29   - },
30   - cartinfo:['11', '12'],
31   - keyname: "1_1587129366",
32   - lefttime: 179995,
33   - list:[
34   - {
35   - cart_id: "11",
36   - imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg",
37   - img_index_url: null,
38   - memo: "志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流,01-8701",
39   - mp_id: "1",
40   - nowPrice: 100,
41   - num: "2",
42   - oldPrice: "0",
43   - p_discount: "1",
44   - p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流",
45   - p_root_index: "1",
46   - p_sale_price: "0",
47   - peopleName: "me",
48   - pics: '',
49   - pid: "4",
50   - sk_id: "38",
51   - },
52   - ],
53   - orderDesc: "总共包括有:01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流在内的1件商品",
54   - total_fee: 100
55   - },
56   - partner_uid: "0",
57   - pay_cate: "2020",
58   - pay_id: "3",
59   - pay_time: "2020-04-17 21:16:12",
60   - pay_wood_desc: "在【非常戴镜】的微信付款凭证",
61   - pay_wood_id: "fcdj-1-1_1587129366",
62   - prepay_id: "wx172116124528226bf1a8adad1662456500",
63   - re_check_staus: "0",
64   - shopid: "0",
65   - split_userid: "0",
66   - status: "1",
67   - total_fee: "100",
68   - uid: "1",
69   - }
70   - ],
71   - msg: "订单列表",
72   - status: 0,
73   -}
  8 +// const data = {
  9 +// data: [
  10 +// {
  11 +// finished_time: null,
  12 +// is_refound: "0",
  13 +// mch_id: "1436019502",
  14 +// money_of_dcw: "0",
  15 +// money_of_partner: "0",
  16 +// money_of_shop: "0",
  17 +// orderJudge: false,
  18 +// order_info: {
  19 +// address:{
  20 +// cityName: "镇江市",
  21 +// countyName: "丹阳市",
  22 +// detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司",
  23 +// errMsg: "chooseAddress:ok",
  24 +// nationalCode: "321181",
  25 +// postalCode: "212300",
  26 +// provinceName: "江苏省",
  27 +// telNumber: "15896379277",
  28 +// userName: "点餐汪客服",
  29 +// },
  30 +// cartinfo:['11', '12'],
  31 +// keyname: "1_1587129366",
  32 +// lefttime: 179995,
  33 +// list:[
  34 +// {
  35 +// cart_id: "11",
  36 +// imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg",
  37 +// img_index_url: null,
  38 +// memo: "志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流,01-8701",
  39 +// mp_id: "1",
  40 +// nowPrice: 100,
  41 +// num: "2",
  42 +// oldPrice: "0",
  43 +// p_discount: "1",
  44 +// p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流",
  45 +// p_root_index: "1",
  46 +// p_sale_price: "0",
  47 +// peopleName: "me",
  48 +// pics: '',
  49 +// pid: "4",
  50 +// sk_id: "38",
  51 +// },
  52 +// ],
  53 +// orderDesc: "总共包括有:01-8701志平防蓝光-防辐射电脑网课眼镜,TR90弹性漆,近视镜,青春潮流在内的1件商品",
  54 +// total_fee: 100
  55 +// },
  56 +// partner_uid: "0",
  57 +// pay_cate: "2020",
  58 +// pay_id: "3",
  59 +// pay_time: "2020-04-17 21:16:12",
  60 +// pay_wood_desc: "在【非常戴镜】的微信付款凭证",
  61 +// pay_wood_id: "fcdj-1-1_1587129366",
  62 +// prepay_id: "wx172116124528226bf1a8adad1662456500",
  63 +// re_check_staus: "0",
  64 +// shopid: "0",
  65 +// split_userid: "0",
  66 +// status: "1",
  67 +// total_fee: "100",
  68 +// uid: "1",
  69 +// }
  70 +// ],
  71 +// msg: "订单列表",
  72 +// status: 0,
  73 +// }
74 74  
75 75 const state = {
76 76 orderList: [],
... ... @@ -85,15 +85,11 @@ const mutations = {
85 85 const actions = {
86 86 getList({ commit }, param) {
87 87 request({
88   - url: orderList,
  88 + url: myOrderList,
89 89 data: param,
90 90 success: (res) => {
91   - const resData = {
92   - ...res,
93   - data,
94   - }
95   - console.log('data.data', resData.data.data);
96   - commit("INIT", resData.data.data);
  91 + // console.log(res.data);
  92 + commit("INIT", res.data.data);
97 93 },
98 94 })
99 95 }
... ...
src/store/modules/orderRead.js
... ... @@ -0,0 +1,35 @@
  1 + import urlAlias from '../url';
  2 + import request from '../request';
  3 +
  4 + const {
  5 + orderRead
  6 + } = urlAlias;
  7 +
  8 +const state = {
  9 + orderInfo: {},
  10 +};
  11 +
  12 +const mutations = {
  13 + INIT: (state, orderInfo) => {
  14 + state.orderInfo = orderInfo;
  15 + },
  16 +};
  17 +
  18 +const actions = {
  19 + getOrderInfo({ commit }, param) {
  20 + request({
  21 + url: orderRead,
  22 + data: param,
  23 + success: (res) => {
  24 + commit("INIT", res.data.data);
  25 + },
  26 + })
  27 + },
  28 +};
  29 +
  30 +export default {
  31 + namespaced: true,
  32 + state,
  33 + mutations,
  34 + actions,
  35 +};
... ...
src/store/modules/payLog.js
... ... @@ -0,0 +1,27 @@
  1 +import urlAlias from '../url';
  2 +import request from '../request';
  3 +
  4 +const {
  5 + payLog
  6 +} = urlAlias;
  7 +
  8 +
  9 +const actions = {
  10 + payLog({ commit }, param) {
  11 + request({
  12 + url: payLog,
  13 + data: param,
  14 + success: (res) => {
  15 + // console.log(res.data);
  16 + commit("INIT", res.data.data);
  17 + },
  18 + })
  19 + }
  20 +}
  21 +
  22 +export default {
  23 + namespaced: true,
  24 + // state,
  25 + // mutations,
  26 + actions,
  27 +}
0 28 \ No newline at end of file
... ...
src/store/modules/statusConfirm.js
... ... @@ -0,0 +1,37 @@
  1 +import urlAlias from '../url';
  2 +import request from '../request';
  3 +
  4 +const {
  5 + statusConfirm
  6 +} = urlAlias;
  7 +
  8 +// const openid = uni.getStorageSync('openid');
  9 +const actions = {
  10 + confirm({ commit }, param) {
  11 + request({
  12 + url: statusConfirm,
  13 + data: param|| { },
  14 + success: (res) => {
  15 + console.log(res.data);
  16 + if(res.data.code === 1){
  17 + uni.showToast({
  18 + title:'已确认',
  19 + mask:true,
  20 + duration:1500,
  21 + icon:'success'
  22 + })
  23 + }else{
  24 + uni-uni.showToast({
  25 + title: '服务器错误,确认失败!',
  26 + mask:true
  27 + });
  28 + }
  29 + },
  30 + })
  31 + }
  32 +}
  33 +
  34 +export default {
  35 + namespaced: true,
  36 + actions,
  37 +}
0 38 \ No newline at end of file
... ...
src/store/modules/test.js
... ... @@ -10,8 +10,8 @@ const state = {
10 10 };
11 11  
12 12 const mutations = {
13   - INIT: (state, list) => {
14   - state.list = list;
  13 + INIT: (state, data) => {
  14 + state.list = data;
15 15 },
16 16 };
17 17  
... ...
src/store/modules/userRecommand.js
... ... @@ -9,21 +9,65 @@ const state = {
9 9 recommandList: [],
10 10 };
11 11  
  12 +const data = {
  13 + "code": 1,
  14 + "msg": "请求成功",
  15 + "data": {
  16 + // list 表示商品数据列表
  17 + "list": [
  18 + {
  19 + model_pic: null,
  20 + p_name: "1.61防蓝光镜片 非球面_枪色款镜架商务男士防蓝光眼镜",
  21 + p_root_index: "1", //对应goodType
  22 + pic: "http://localhost/sys-glass/image/picture.png",
  23 + pid: "96",
  24 + real_price: "17800",
  25 + sk_id: "1448",
  26 + sku_name: "1.61防蓝光镜片 非球面_枪色款镜架",
  27 + trade_num: "0",
  28 + },
  29 + {
  30 + "sk_id": "39",
  31 + "pic": "/static/img/goods/p1.jpg",
  32 + "p_name": "1.56防蓝光镜片非球面_黑银色镜架防蓝光眼镜超轻不压鼻",
  33 + "old_price": "18000",
  34 + "real_price": "9900",
  35 + "trade_num": 123, // 对应购买人数
  36 + "p_root_index": 2, // 对应跳转的详情页
  37 + "pid":4, // 产品id
  38 + },
  39 + ],
  40 + pagesnum:1, // 懒加载要用到的页数
  41 + pagessize:10,// 每次请求返回的list长度
  42 + }
  43 +
  44 +}
  45 +
12 46 const mutations = {
13 47 INIT: (state, list) => {
14 48 state.recommandList = list;
15 49 },
16 50 };
17 51  
  52 +let goodsList=[];
  53 +
18 54 const actions = {
19 55 getRecommandList({ commit }, param) {
20 56 request({
21 57 url: recommandList,
22 58 success: (res) => {
23   - console.log(res.data)
24   - commit('INIT', res.data.data)
  59 + console.log('userRecommand-parm',param)
  60 + console.log(res.data.data)
  61 + // const Res={...res.data.data.list,...data.data.list}
  62 + goodsList=[...goodsList,...res.data.data]
  63 + // console.log(res.data)
  64 + commit('INIT', goodsList)
25 65 },
26 66 fail: (res) => {
  67 + uni.showToast({
  68 + title:"数据加载完了",
  69 + icon:"none"
  70 + })
27 71 console.log("fail status === > ", res);
28 72 },
29 73 complete: (res) => {
... ...
... ... @@ -11,17 +11,30 @@ const urlAlias = {
11 11 login: '/app/glass/getOpenId', // 登陆
12 12 getUserInfo: '/app/glass/userinfo', // 获取用户信息
13 13  
14   - // 我的订单
15   - orderList: '/app/order/list', // 获取订单列表
  14 + // 我的订单
  15 + myOrderList: '/app/order/list3', // 获取订单列表
  16 + orderRead: '/app/order/read', // 获取订单详情
  17 + cancelOrder: '/app/order/wait/del',//取消订单
  18 + statusConfirm: '/app/order/statusConfirm',//订单操作
  19 + payLog:'/app/pay/log',//调起支付
16 20  
17 21 // 购物车
18 22 cartList: '/app/cart/list', // 获取购物车列表
  23 + cartModi: '/app/cart/modi', // 修改购物车
  24 + cartDel: '/app/cart/del', // 删除购物车
  25 + cartAdd: '/app/cart/add',// 添加购物车
19 26  
20 27 // 我的
21 28 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品
22 29  
23 30 // 镜框选购页
24   - detailStandardList: '/app/prod/read', //获取商品的详细信息
  31 + detailStandardList: '/app/prod/read', //获取商品的详细信息
  32 + // 选购页
  33 + detailStandardUrl: '/app/prod/read', //获取商品的详细信息
  34 +
  35 + //用户数据
  36 + mylovelist:'/app/user/mylovelist',//关心的人的数据
  37 + myloveadd:'/app/user/myloveadd'//添加关心的人
25 38  
26 39 }
27 40  
... ...