Adam / gulu-vue

Download as
Browse Code »

Commit 2369ec720ca60675c490783261fea530db44670c

Authored by 尹聃
2 parents a43bb75fc1 5638d36da2
Exists in master

Merge branch 'master' of 121.40.31.31:jp/gulu-vue

Showing 13 changed files   Show diff stats
1 module.exports = { 1 module.exports = {
2 "env": { 2 "env": {
3 "browser": true, 3 "browser": true,
4 "es6": true 4 "es6": true
5 }, 5 },
6 "extends": [ 6 "extends": [
7 'standard', 7 'standard',
8 "eslint:recommended", 8 "eslint:recommended",
9 "plugin:vue/essential", 9 "plugin:vue/essential",
10 "plugin:@typescript-eslint/eslint-recommended", 10 "plugin:@typescript-eslint/eslint-recommended",
11 ], 11 ],
12 "globals": { 12 "globals": {
13 "Atomics": "readonly", 13 "Atomics": "readonly",
14 "SharedArrayBuffer": "readonly", 14 "SharedArrayBuffer": "readonly",
15 "uni": true, 15 "uni": true,
16 "module": true 16 "module": true
17 }, 17 },
18 "parserOptions": { 18 "parserOptions": {
19 "ecmaVersion": 11, 19 "ecmaVersion": 11,
20 "parser": "@typescript-eslint/parser", 20 "parser": "@typescript-eslint/parser",
21 "sourceType": "module" 21 "sourceType": "module"
22 }, 22 },
23 "plugins": [ 23 "plugins": [
24 "vue", 24 "vue",
25 "@typescript-eslint" 25 "@typescript-eslint"
26 ], 26 ],
27 "rules": { 27 "rules": {
28 quotes: ['error', 'single'], 28 quotes: ['error', 'single'],
29 'space-before-function-paren': 0 29 'space-before-function-paren': 0,
30 // 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，
31 // always-multiline：多行模式必须带逗号，单行模式不能带逗号
32 "comma-dangle": [2, "always-multiline"],
33 // 控制逗号前后的空格
34 "comma-spacing": [2, { "before": false, "after": true }],
35 // 控制逗号在行尾出现还是在行首出现
36 // http://eslint.org/docs/rules/comma-style
37 "comma-style": [2, "last"],
30 } 38 }
31 }; 39 };
32 40
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @2369ec7
1 <template> 1 <template>
2 <view 2 <view
3 class="card" 3 class="card"
4 @tap="toGoods(goods.id?goods.id:goods.pid)" 4 @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)"
5 > 5 >
6 <image 6 <image
7 mode="widthFix" 7 mode="widthFix"
8 :src="goods.imgurl?goods.imgurl:goods.pic" 8 :src="goods.imgurl?goods.imgurl:goods.pic"
9 ></image> 9 ></image>
10 <view class="name">{{goods.name?goods.name:goods.p_name}}</view> 10 <view class="name">{{goods.name?goods.name:goods.p_name}}</view>
11 <view class="info"> 11 <view class="info">
12 <view class="priceBox"> 12 <view class="priceBox">
13 <view class="price">{{goods.oldPrice !== undefined?goods.oldPrice:goods.old_price}}</view> 13 <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view>
14 <view class="originCost"> 14 <view class="originCost">
15 {{goods.price !== undefined?goods.price:goods.real_price}} 15 <!-- {{goods.price !== undefined?goods.price:goods.real_price}} -->
16 {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}}
16 </view> 17 </view>
17 </view> 18 </view>
18 <view class="trade_num">{{goods.trade_num}}人购买</view> 19 <view class="trade_num">{{goods.trade_num}}人购买</view>
19 </view> 20 </view>
20 </view> 21 </view>
21 </template> 22 </template>
22 23
23 <script> 24 <script>
24 export default { 25 export default {
25 props: { 26 props: {
26 /** 27 /**
27 * 商品数据 28 * 商品数据
28 */ 29 */
29 goods: { 30 goods: {
30 id: Number, 31 id: Number,
31 imgurl: String, 32 imgurl: String,
32 name: String, 33 name: String,
33 rsSon: Object, 34 rsSon: Object,
34 originCost: String, 35 originCost: String,
35 price: String, 36 price: String,
36 trade_num: String, 37 trade_num: String,
37 goodType: String 38 goodType: String,
38 } 39 },
39 40
40 }, 41 },
41 created () { 42 created () {
42 }, 43 },
43 data () { 44 data () {
44 return { 45 return {
45 46
46 } 47 }
47 }, 48 },
48 methods: { 49 methods: {
49 toGoods (id) { 50 toGoods (id, sk_id) {
50 console.log('---', '../frameDetail/frameDetail?pid=' + id) 51 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id)
51 uni.navigateTo({ 52 uni.navigateTo({
52 url: '../frameDetail/frameDetail?pid=' + id, 53 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
53 success: res => {}, 54 success: res => {},
54 fail: () => {}, 55 fail: () => {},
55 complete: () => {} 56 complete: () => {},
56 }) 57 })
57 } 58 },
58 } 59 },
59 } 60 }
60 </script> 61 </script>
61 62
62 <style lang="scss"> 63 <style lang="scss">
63 image { 64 image {
64 width: 100%; 65 width: 100%;
65 height: 120rpx; 66 height: 120rpx;
66 } 67 }
67 .name { 68 .name {
68 width: 92%; 69 width: 92%;
69 height: 54rpx; 70 height: 54rpx;
70 padding: 5px 4%; 71 padding: 5px 4%;
71 display: -webkit-box; 72 display: -webkit-box;
72 -webkit-box-orient: vertical; 73 -webkit-box-orient: vertical;
73 -webkit-line-clamp: 2; 74 -webkit-line-clamp: 2;
74 text-align: justify; 75 text-align: justify;
75 overflow: hidden; 76 overflow: hidden;
76 font-size: 24rpx; 77 font-size: 24rpx;
77 color: #333333; 78 color: #333333;
78 } 79 }
79 .info { 80 .info {
80 display: flex; 81 display: flex;
81 justify-content: space-between; 82 justify-content: space-between;
82 align-items: center; 83 align-items: center;
83 width: 92%; 84 width: 92%;
84 padding: 5px 4% 5px 4%; 85 padding: 5px 4% 5px 4%;
85 .priceBox { 86 .priceBox {
86 display: flex; 87 display: flex;
87 justify-content: space-between; 88 justify-content: space-between;
88 align-items: center; 89 align-items: center;
89 .price { 90 .price {
90 color: #eb5d3b; 91 color: #eb5d3b;
91 font-size: 28rpx; 92 font-size: 28rpx;
92 font-weight: 600; 93 font-weight: 600;
93 margin-right: 10rpx; 94 margin-right: 10rpx;
94 } 95 }
95 .originCost { 96 .originCost {
96 text-decoration: line-through; 97 text-decoration: line-through;
97 color: #999999; 98 color: #999999;
98 font-size: 20rpx; 99 font-size: 20rpx;
99 } 100 }
100 } 101 }
101 .trade_num { 102 .trade_num {
102 color: #999999; 103 color: #999999;
103 font-size: 20rpx; 104 font-size: 20rpx;
104 } 105 }
105 } 106 }
106 </style> 107 </style>
107 108
src/pages/cart/cart.vue
Diff comments   View file @2369ec7
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <block v-if="cartList.length==0"> 3 <block v-if="cartList.length==0">
4 4
5 </block> 5 </block>
6 <block v-else> 6 <block v-else>
7 <view class="card"> 7 <view class="card">
8 <view class="cardHeader"> 8 <view class="cardHeader">
9 <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" 9 <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
10 @tap="pChange(pIsoPen)"> 10 @tap="pChange(pIsoPen)">
11 <span class="correct"></span> 11 <span class="correct"></span>
12 </view> 12 </view>
13 <image src="../../static/store.png" mode="aspectFill"></image> 13 <image src="../../static/store.png" mode="aspectFill"></image>
14 <text>非常戴镜</text> 14 <text>非常戴镜</text>
15 </view> 15 </view>
16 16
17 <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id" 17 <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id"
18 @longpress="delCart(item.cart_id,index)"> 18 @longpress="delCart(item.cart_id,index)">
19 <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" 19 <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
20 @tap="Change(childIsOpen[index],index)"> 20 @tap="Change(childIsOpen[index],index)">
21 <span class="correct"></span> 21 <span class="correct"></span>
22 </view> 22 </view>
23 <view class="imageWrap"> 23 <view class="imageWrap">
24 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> 24 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
25 </view> 25 </view>
26 <view class="goodInfo"> 26 <view class="goodInfo">
27 <!-- <view class="imageWrap"> 27 <!-- <view class="imageWrap">
28 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> 28 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
29 </view> --> 29 </view> -->
30 <view class="infoRight"> 30 <view class="infoRight">
31 <view class="goodName" @tap="toGoods(item.pid,item.sk_id)">{{item.p_name}}</view> 31 <view class="goodName" @tap="toGoods(item.pid,item.sk_id)">{{item.p_name}}</view>
32 <!-- <view class="describ"> --> 32 <!-- <view class="describ"> -->
33 <uni-collapse accordion="true" > 33 <uni-collapse accordion="true" >
34 <uni-collapse-item showAnimation='true' 34 <uni-collapse-item showAnimation='true'
35 :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...' || '暂无'" > 35 :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...' || '暂无'" >
36 <text class="describ"> 36 <text class="describ">
37 <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value"> 37 <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value">
38 {{tag.label+`&nbsp;&nbsp;`}} 38 {{tag.label+`&nbsp;&nbsp;`}}
39 </block> 39 </block>
40 </text> 40 </text>
41 <!-- <text> 41 <!-- <text>
42 <block v-for="tag in item.tag.prod_tag_style" :key="tag.value"> 42 <block v-for="tag in item.tag.prod_tag_style" :key="tag.value">
43 {{tag.label+`&nbsp;&nbsp;`}} 43 {{tag.label+`&nbsp;&nbsp;`}}
44 </block> 44 </block>
45 </text> --> 45 </text> -->
46 </uni-collapse-item> 46 </uni-collapse-item>
47 </uni-collapse> 47 </uni-collapse>
48 <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> --> 48 <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> -->
49 <!-- </view> --> 49 <!-- </view> -->
50 <view class="priceBox"> 50 <view class="priceBox">
51 <view class="price">￥{{item.nowPrice*item.num}}</view> 51 <view class="price">￥{{item.nowPrice*item.num}}</view>
52 <text class="maxCount">(限购{{maxCount}}副)</text> 52 <text class="maxCount">(限购{{maxCount}}副)</text>
53 <view class="counter"> 53 <view class="counter">
54 <view class="btn" disabled="this.addDisabled" type="default" 54 <view class="btn" disabled="this.addDisabled" type="default"
55 @tap="counter(index,false,item)">-</view> 55 @tap="counter(index,false,item)">-</view>
56 <text>{{item.num}}</text> 56 <text>{{item.num}}</text>
57 <view class="btn" disabled="this.desDisabled" type="default" 57 <view class="btn" disabled="this.desDisabled" type="default"
58 @tap="counter(index,true,item)">+</view> 58 @tap="counter(index,true,item)">+</view>
59 </view> 59 </view>
60 </view> 60 </view>
61 </view> 61 </view>
62 </view> 62 </view>
63 </view> 63 </view>
64 </view> 64 </view>
65 </block> 65 </block>
66 <view class="footer"> 66 <view class="footer">
67 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> 67 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
68 <view class="footerRight"> 68 <view class="footerRight">
69 <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover"> 69 <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover">
70 <view class="paybtn" >立即结算</view> 70 <view class="paybtn" >立即结算</view>
71 </navigator> 71 </navigator>
72 </view> 72 </view>
73 </view> 73 </view>
74 74
75 </view> 75 </view>
76 </template> 76 </template>
77 77
78 <script> 78 <script>
79 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' 79 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
80 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' 80 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
81 import store from '@/store' 81 import store from '@/store'
82 82
83 export default { 83 export default {
84 components: { UniCollapse, UniCollapseItem }, 84 components: { UniCollapse, UniCollapseItem },
85 data() { 85 data() {
86 return { 86 return {
87 totalPrice: 0, 87 totalPrice: 0,
88 pIsoPen: false, 88 pIsoPen: false,
89 // childIsOpen:[], 89 // childIsOpen:[],
90 maxCount: 20 90 maxCount: 20
91 } 91 }
92 }, 92 },
93 computed: { 93 computed: {
94 94
95 cartList() { 95 cartList() {
96 // console.log('cart-list', this.$store.state.cart.cartList); 96 // console.log('cart-list', this.$store.state.cart.cartList);
97 return this.$store.state.cart.cartList 97 return this.$store.state.cart.cartList
98 }, 98 },
99 childIsOpen() { 99 childIsOpen() {
100 const temp = [] 100 const temp = []
101 temp.length = this.$store.state.cart.cartList.length 101 temp.length = this.$store.state.cart.cartList.length
102 for (let i = 0; i < temp.length; i++) { 102 for (let i = 0; i < temp.length; i++) {
103 temp[i] = false 103 temp[i] = false
104 } 104 }
105 console.log('this.childisOPne===>', temp) 105 console.log('this.childisOPne===>', temp)
106 return temp 106 return temp
107 } 107 }
108 }, 108 },
109 onLoad: function() { 109 onLoad: function() {
110 // store.dispatch('cart/addCart', { 110 // store.dispatch('cart/addCart', {
111 // uid: this.$store.state.user.userInfo.uid, 111 // uid: this.$store.state.user.userInfo.uid,
112 // openid: this.$store.state.user.userInfo.openid, 112 // openid: this.$store.state.user.userInfo.openid,
113 // mp_id: 7, 113 // mp_id: 7,
114 // sk_id: 7, 114 // sk_id: 7,
115 // num: 1, 115 // num: 1,
116 // pid: 8, 116 // pid: 8,
117 // price: 128, 117 // price: 128,
118 // checkedSKU:{}, 118 // checkedSKU:{},
119 // }) 119 // })
120 store.dispatch('cart/getCartList', { 120 store.dispatch('cart/getCartList', {
121 uid: this.$store.state.user.userInfo.uid // 用户id 121 uid: this.$store.state.user.userInfo.uid // 用户id
122 }) 122 })
123 }, 123 },
124 124
125 methods: { 125 methods: {
126 126
127 toGoods(id, sk_id) { 127 toGoods(id, sk_id) {
128 console.log('cart-list', this.$store.state.cart.cartList); 128 console.log('cart-list', this.$store.state.cart.cartList);
129 console.log('---', '../frameDetail/frameDetail?pid=' + id +'&sk_id='+sk_id)
129 console.log('---', '../frameDetail/frameDetail?pid=' + id +'&sk_id='+sk_id) 130 uni.navigateTo({
130 uni.navigateTo({ 131 url: '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id,
131 url: '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id, 132 success: res => {},
132 success: res => {}, 133 fail: () => {},
133 fail: () => {}, 134 complete: () => {}
134 complete: () => {} 135 })
135 }) 136 // uni.navigateTo({
136 // uni.navigateTo({ 137 // url: '../frameDetail/frameDetail?oderId=' + id,
137 // url: '../frameDetail/frameDetail?oderId=' + id, 138 // success: res => {},
138 // success: res => {}, 139 // fail: () => {},
139 // fail: () => {}, 140 // complete: () => {}
140 // complete: () => {} 141 // })
141 // }) 142 // console.log('toGoods =====> id:' + id + '======>type:' + type)
142 // console.log('toGoods =====> id:' + id + '======>type:' + type) 143 // switch (type) {
143 // switch (type) { 144 // case 1:
144 // case 1: 145 // uni.navigateTo({
145 // uni.navigateTo({ 146 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
146 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 147 // success: res => {},
147 // success: res => {}, 148 // fail: () => {},
148 // fail: () => {}, 149 // complete: () => {}
149 // complete: () => {} 150 // })
150 // }) 151 // break
151 // break 152 // case 2:
152 // case 2: 153 // uni.navigateTo({
153 // uni.navigateTo({ 154 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
154 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 155 // success: res => {},
155 // success: res => {}, 156 // fail: () => {},
156 // fail: () => {}, 157 // complete: () => {}
157 // complete: () => {} 158 // })
158 // }) 159 // break
159 // break 160 // case 3:
160 // case 3: 161 // uni.navigateTo({
161 // uni.navigateTo({ 162 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
162 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 163 // success: res => {},
163 // success: res => {}, 164 // fail: () => {},
164 // fail: () => {}, 165 // complete: () => {}
165 // complete: () => {} 166 // })
166 // }) 167 // break
167 // break 168 // case 4:
168 // case 4: 169 // uni.navigateTo({
169 // uni.navigateTo({ 170 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
170 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 171 // success: res => {},
171 // success: res => {}, 172 // fail: () => {},
172 // fail: () => {}, 173 // complete: () => {}
173 // complete: () => {} 174 // })
174 // }) 175 // break
175 // break 176 // default :
176 // default : 177 // break
177 // break 178 // }
178 // } 179 },
179 }, 180
180 181 counter(index, isadd, item) {
181 counter(index, isadd, item) { 182 // console.log('===>>counter ===>num',num)
182 // console.log('===>>counter ===>num',num) 183 // console.log('===>>counter ===>isadd',isadd)
183 // console.log('===>>counter ===>isadd',isadd) 184 console.log('item=====>',item)
184 console.log('item=====>',item) 185 console.log('num=====>',item.num)
185 console.log('num=====>',item.num) 186 let nums = parseInt(item.num)
186 let nums = parseInt(item.num) 187 if (isadd) {
187 if (isadd) { 188 if (nums >= this.maxCount) {
188 if (nums >= this.maxCount) { 189 this.addDisabled = true
189 this.addDisabled = true 190 } else {
190 } else { 191 this.addDisabled = true
191 this.addDisabled = true 192 // 修改num
192 // 修改num 193 if (this.childIsOpen[index]) {
193 if (this.childIsOpen[index]) { 194 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
194 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice 195 }
195 } 196 store.dispatch('cart/modiCart', {
196 store.dispatch('cart/modiCart', { 197 uid: this.$store.state.user.userInfo.uid,
197 uid: this.$store.state.user.userInfo.uid, 198 openid: this.$store.state.user.userInfo.openid,
198 openid: this.$store.state.user.userInfo.openid, 199 mp_id: item.mp_id,
199 mp_id: item.mp_id, 200 sk_id: item.sk_id,
200 sk_id: item.sk_id, 201 price: item.nowPrice,
201 price: item.nowPrice, 202 pid: item.pid,
202 pid: item.pid, 203 num: nums + 1,
203 num: nums + 1, 204 cart_id: item.cart_id,
204 cart_id: item.cart_id, 205 args: {
205 args: { 206 index: index,
206 index: index, 207 isadd: isadd
207 isadd: isadd 208 }
208 } 209 })
209 }) 210 this.addDisabled = false
210 this.addDisabled = false 211 }
211 } 212 } else {
212 } else { 213 if (nums <= 1) {
213 if (nums <= 1) { 214 this.desDisabled = true
214 this.desDisabled = true 215 } else {
215 } else { 216 this.desDisabled = false
216 this.desDisabled = false 217 // post 请求修改相关参数
217 // post 请求修改相关参数 218 if (this.childIsOpen[index]) {
218 if (this.childIsOpen[index]) { 219 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
219 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice 220 }
220 } 221 store.dispatch('cart/modiCart', {
221 store.dispatch('cart/modiCart', { 222 uid: this.$store.state.user.userInfo.uid,
222 uid: this.$store.state.user.userInfo.uid, 223 openid: this.$store.state.user.userInfo.openid,
223 openid: this.$store.state.user.userInfo.openid, 224 mp_id: item.mp_id,
224 mp_id: item.mp_id, 225 sk_id: item.sk_id,
225 sk_id: item.sk_id, 226 price: item.nowPrice,
226 price: item.nowPrice, 227 pid: item.pid,
227 pid: item.pid, 228 num: nums - 1,
228 num: nums - 1, 229 cart_id: item.cart_id,
229 cart_id: item.cart_id, 230 args: {
230 args: { 231 index: index,
231 index: index, 232 isadd: isadd
232 isadd: isadd 233 }
233 } 234 })
234 }) 235 this.desDisabled = true
235 this.desDisabled = true 236 }
236 } 237 }
237 } 238 // store.dispatch('cart/getCartList', {
238 // store.dispatch('cart/getCartList', { 239 // uid: this.$store.state.user.userInfo.uid // 用户id
239 // uid: this.$store.state.user.userInfo.uid // 用户id 240 // })
240 // }) 241 },
241 }, 242
242 243 Change(isopen, indexC) {
243 Change(isopen, indexC) { 244 // console.log('lalla===>',isopen)
244 // console.log('lalla===>',isopen) 245 this.childIsOpen[indexC] = !isopen
245 this.childIsOpen[indexC] = !isopen 246 if (!isopen) {
246 if (!isopen) { 247 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
247 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) 248 } else {
248 } else { 249 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
249 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) 250 }
250 } 251 let m = true
251 let m = true 252 for (let i = 0; i < this.childIsOpen.length; i++) {
252 for (let i = 0; i < this.childIsOpen.length; i++) { 253 m = m & this.childIsOpen[i]
253 m = m & this.childIsOpen[i] 254 }
254 } 255 if (m == 1) {
255 if (m == 1) { 256 this.pIsoPen = true
256 this.pIsoPen = true 257 } else {
257 } else { 258 this.pIsoPen = false
258 this.pIsoPen = false 259 }
259 } 260 },
260 }, 261 pChange(isopen) {
261 pChange(isopen) { 262 this.pIsoPen = !isopen
262 this.pIsoPen = !isopen 263 for (let i = 0; i < this.childIsOpen.length; i++) {
263 for (let i = 0; i < this.childIsOpen.length; i++) { 264 this.childIsOpen[i] = !isopen
264 this.childIsOpen[i] = !isopen 265 }
265 } 266 if (this.pIsoPen) {
266 if (this.pIsoPen) { 267 // 计算总价逻辑
267 // 计算总价逻辑 268 if (this.childIsOpen.length != 0) {
268 if (this.childIsOpen.length != 0) { 269 for (let i = 0; i < this.childIsOpen.length; i++) {
269 for (let i = 0; i < this.childIsOpen.length; i++) { 270 if (this.childIsOpen[i]) {
270 if (this.childIsOpen[i]) { 271 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
271 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) 272 }
272 } 273 }
273 } 274 }
274 } 275 } else {
275 } else { 276 this.totalPrice = 0
276 this.totalPrice = 0 277 }
277 } 278 },
278 }, 279 delCart(cart_id, index) {
279 delCart(cart_id, index) { 280 // console.log('userInfo',this.$store.state.user.userInfo)
280 // console.log('userInfo',this.$store.state.user.userInfo) 281 cart_id = parseInt(cart_id)
281 cart_id = parseInt(cart_id) 282 // console.log('delcart------>cart_id',cart_id)
282 // console.log('delcart------>cart_id',cart_id) 283 // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
283 // console.log('cartlist====>delcart',this.$store.state.cart.cartList) 284 // console.log('delcart======>index',index)
284 // console.log('delcart======>index',index) 285 const uid=this.$store.state.user.userInfo.uid
285 const uid=this.$store.state.user.userInfo.uid 286 const openid=this.$store.state.user.userInfo.openid
286 const openid=this.$store.state.user.userInfo.openid 287 uni.showModal({
287 uni.showModal({ 288 title: '是否删除该商品',
288 title: '是否删除该商品', 289 // content: '是否删除该商品',
289 // content: '是否删除该商品', 290 success: function (res) {
290 success: function (res) { 291 if (res.confirm) {
291 if (res.confirm) { 292 // this.$store.state.cart.cartList.splice(index,1)
292 // this.$store.state.cart.cartList.splice(index,1) 293 store.dispatch('cart/delCart', {
293 store.dispatch('cart/delCart', { 294 uid: uid,
294 uid: uid, 295 openid: openid,
295 openid: openid, 296 cart_id: cart_id, // 要修改的购物车id
296 cart_id: cart_id, // 要修改的购物车id 297 arg: index // 由于action 传参是能接收两参数，因此将index放入对象
297 arg: index // 由于action 传参是能接收两参数，因此将index放入对象 298 })
298 }) 299 console.log('用户点击确定')
299 console.log('用户点击确定') 300 }
300 } 301 }
301 } 302 })
302 }) 303 }
303 } 304 }
304 } 305 }
305 } 306 </script>
306 </script> 307
307 308 <style lang="scss">
308 <style lang="scss"> 309 .content {
309 .content { 310 min-height: 100vh;
310 min-height: 100vh; 311 background-color: #f2f2f2;
311 background-color: #f2f2f2; 312 display: flex;
312 display: flex; 313 flex-direction: column;
313 flex-direction: column; 314 align-items: center;
314 align-items: center; 315 justify-content: space-between;
315 justify-content: space-between; 316 padding: 20rpx 40rpx;
316 padding: 20rpx 40rpx; 317 box-sizing: border-box;
317 box-sizing: border-box; 318
318 319 .partentCheck{
319 .partentCheck{ 320 width: 16px;
320 width: 16px; 321 height: 16px;
321 height: 16px; 322 border-radius: 22px;
322 border-radius: 22px; 323 border: 1px solid #CFCFCF;
323 border: 1px solid #CFCFCF; 324 background-color: #FFFFFF;
324 background-color: #FFFFFF; 325 margin: 6px;
325 margin: 6px; 326 }
326 } 327 .partentChecked{
327 .partentChecked{ 328 width: 18px;
328 width: 18px; 329 height: 18px;
329 height: 18px; 330 border-radius: 22px;
330 border-radius: 22px; 331 background-color: #FF6B4A;
331 background-color: #FF6B4A; 332 margin: 6px;
332 margin: 6px; 333 .correct {
333 .correct { 334 display: inline-block;
334 display: inline-block; 335 position: relative;
335 position: relative; 336 width: 10rpx;
336 width: 10rpx; 337 height: 2rpx;
337 height: 2rpx; 338 background: #FFFFFF;
338 background: #FFFFFF; 339 line-height: 0;
339 line-height: 0; 340 font-size: 0;
340 font-size: 0; 341 position: relative;
341 position: relative; 342 top: -7px;
342 top: -7px; 343 left: 4px;
343 left: 4px; 344 -webkit-transform: rotate(45deg);
344 -webkit-transform: rotate(45deg); 345 }
345 } 346 .correct:after {
346 .correct:after { 347 content: '/';
347 content: '/'; 348 display: block;
348 display: block; 349 width: 16rpx;
349 width: 16rpx; 350 height: 2rpx;
350 height: 2rpx; 351 background: #FFFFFF;
351 background: #FFFFFF; 352 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
352 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 353 }
353 } 354 }
354 } 355
355 356 .card{
356 .card{ 357 background-color: #FFFFFF;
357 background-color: #FFFFFF; 358 border-radius: 16rpx;
358 border-radius: 16rpx; 359 box-sizing: border-box;
359 box-sizing: border-box; 360 padding: 36rpx 36rpx 36rpx 18rpx;
360 padding: 36rpx 36rpx 36rpx 18rpx; 361 display: flex;
361 display: flex; 362 flex-direction: column;
362 flex-direction: column; 363 align-items: center;
363 align-items: center; 364 justify-content: space-between;
364 justify-content: space-between; 365 margin-bottom: 180rpx;
365 margin-bottom: 180rpx; 366 .cardHeader{
366 .cardHeader{ 367 width: 100%;
367 width: 100%; 368 height: 36rpx;
368 height: 36rpx; 369 display: flex;
369 display: flex; 370 align-items: center;
370 align-items: center; 371 justify-content: flex-start;
371 justify-content: flex-start; 372 margin-bottom: 20rpx;
372 margin-bottom: 20rpx; 373 image{
373 image{ 374 height: 32rpx;
374 height: 32rpx; 375 width: 32rpx;
375 width: 32rpx; 376 padding-left: 6px;
376 padding-left: 6px; 377 padding-right: 10px;
377 padding-right: 10px; 378 }
378 } 379 text{
379 text{ 380 // font-family: PingFangSC-Regular;
380 // font-family: PingFangSC-Regular; 381 font-size: 14px;
381 font-size: 14px; 382 color: #333333;
382 color: #333333; 383 letter-spacing: -0.26px;
383 letter-spacing: -0.26px; 384 }
384 } 385 }
385 } 386 .cardBody{
386 .cardBody{ 387 width: 100%;
387 width: 100%; 388 min-height: 300rpx;
388 min-height: 300rpx; 389 display: flex;
389 display: flex; 390 align-items: center;
390 align-items: center; 391 justify-content: space-between;
391 justify-content: space-between; 392 .goodInfo{
392 .goodInfo{ 393 width: 390rpx;
393 width: 390rpx; 394 display: flex;
394 display: flex; 395 flex-direction: row;
395 flex-direction: row; 396 justify-content: flex-start;
396 justify-content: flex-start; 397 padding-left: 6px;
397 padding-left: 6px; 398
398 399 .imageWrap{
399 .imageWrap{ 400 height: 188rpx;
400 height: 188rpx; 401 width: 188rpx;
401 width: 188rpx; 402 margin-right: 28rpx;
402 margin-right: 28rpx; 403
403 404 image{
404 image{ 405 border-radius: 4px;
405 border-radius: 4px; 406 height: 188rpx;
406 height: 188rpx; 407 width: 188rpx;
407 width: 188rpx; 408 }
408 } 409 }
409 } 410 .infoRight{
410 .infoRight{ 411 display: flex;
411 display: flex; 412 flex-direction: column;
412 flex-direction: column; 413 align-items: flex-start;
413 align-items: flex-start; 414 justify-content: space-between;
414 justify-content: space-between; 415 min-height: 240rpx;
415 min-height: 240rpx; 416 .goodName{
416 .goodName{ 417 display: -webkit-box;
417 display: -webkit-box; 418 -webkit-box-orient: vertical;
418 -webkit-box-orient: vertical; 419 -webkit-line-clamp: 2;
419 -webkit-line-clamp: 2; 420 text-align: justify;
420 text-align: justify; 421 overflow: hidden;
421 overflow: hidden; 422 font-size: 28rpx;
422 font-size: 28rpx; 423 color: #333333;
423 color: #333333; 424 }
424 } 425 .describ{
425 .describ{ 426 width: 100%;
426 width: 100%; 427 // min-height: 80rpx;
427 // min-height: 80rpx; 428 // box-sizing: border-box;
428 // box-sizing: border-box; 429 // padding: 10rpx;
429 // padding: 10rpx; 430 font-size: 20rpx;
430 font-size: 20rpx; 431 letter-spacing: -0.23px;
431 letter-spacing: -0.23px; 432 text-align: justify;
432 text-align: justify; 433 color: #999999;
433 color: #999999; 434 // background: #F9F9F9;
434 // background: #F9F9F9; 435 // display: flex;
435 // display: flex; 436 // justify-content: center;
436 // justify-content: center; 437 // align-items: center;
437 // align-items: center; 438 // text{
438 // text{ 439 // text-overflow: -o-ellipsis-lastline;
439 // text-overflow: -o-ellipsis-lastline; 440 // overflow: hidden;
440 // overflow: hidden; 441 // text-overflow: ellipsis;
441 // text-overflow: ellipsis; 442 // display: -webkit-box;
442 // display: -webkit-box; 443 // -webkit-line-clamp: 2;
443 // -webkit-line-clamp: 2; 444 // line-clamp: 2;
444 // line-clamp: 2; 445 // -webkit-box-orient: vertical;
445 // -webkit-box-orient: vertical; 446 // }
446 // } 447 // .icon {
447 // .icon { 448 // width: 0;
448 // width: 0; 449 // height: 0;
449 // height: 0; 450 // border-left: 5px transparent;
450 // border-left: 5px transparent; 451 // border-right: 5px transparent;
451 // border-right: 5px transparent; 452 // border-top: 5px #979797;
452 // border-top: 5px #979797; 453 // border-bottom: 0 transparent;
453 // border-bottom: 0 transparent; 454 // border-style: solid;
454 // border-style: solid; 455 // position: relative;
455 // position: relative; 456 // margin-left: 10px;
456 // margin-left: 10px; 457 // // transform: scaleY(-1);
457 // // transform: scaleY(-1); 458 // }
458 // } 459 // .icon::after{
459 // .icon::after{ 460 // content: '';
460 // content: ''; 461 // position: absolute;
461 // position: absolute; 462 // top: -6.5px;
462 // top: -6.5px; 463 // left: -5px;
463 // left: -5px; 464 // border-left: 5px transparent;
464 // border-left: 5px transparent; 465 // border-right: 5px transparent;
465 // border-right: 5px transparent; 466 // border-top: 5px #FFFFFF;
466 // border-top: 5px #FFFFFF; 467 // border-bottom: 0 transparent;
467 // border-bottom: 0 transparent; 468 // border-style: solid;
468 // border-style: solid; 469 // }
469 // } 470 }
470 } 471 .priceBox{
471 .priceBox{ 472 display: flex;
472 display: flex; 473 justify-content: space-between;
473 justify-content: space-between; 474 align-items: center;
474 align-items: center; 475 // margin-top: 26px;
475 // margin-top: 26px; 476 width: 100%;
476 width: 100%; 477 font-size: 14px;
477 font-size: 14px; 478 color: #999999;
478 color: #999999; 479 .maxCount{
479 .maxCount{ 480 color: #999999;
480 color: #999999; 481 font-size: 24rpx;
481 font-size: 24rpx; 482 }
482 } 483 .price{
483 .price{ 484 color: #FF6B4A;
484 color: #FF6B4A; 485 font-size: 28rpx;
485 font-size: 28rpx; 486 }
486 } 487 .counter{
487 .counter{ 488 display: flex;
488 display: flex; 489 flex-direction: row;
489 flex-direction: row; 490 justify-content: space-between;
490 justify-content: space-between; 491 align-items: center;
491 align-items: center; 492 font-size: 28rpx;
492 font-size: 28rpx; 493 color: #333333;
493 color: #333333; 494 width: 122rpx;
494 width: 122rpx; 495 .btn{
495 .btn{ 496 display: flex;
496 display: flex; 497 justify-content: center;
497 justify-content: center; 498 line-height: 32rpx;
498 line-height: 32rpx; 499 height: 32rpx;
499 height: 32rpx; 500 width: 32rpx;
500 width: 32rpx; 501 background-color: #F2F2F2;
501 background-color: #F2F2F2; 502 color: #CFCFCF;
502 color: #CFCFCF; 503 }
503 } 504 }
504 } 505 }
505 } 506 }
506 } 507 }
507 } 508 }
508 } 509 }
509 } 510
510 511 .footer{
511 .footer{ 512 position: fixed;
512 position: fixed; 513 left: 0;
513 left: 0; 514 bottom: 0px;
514 bottom: 0px; 515 height: 112rpx;
515 height: 112rpx; 516 width: 100%;
516 width: 100%; 517 background-color: #FFFFFF;
517 background-color: #FFFFFF; 518 font-size: 16px;
518 font-size: 16px; 519 display: flex;
519 display: flex; 520 justify-content: space-between;
520 justify-content: space-between; 521 align-items: center;
521 align-items: center; 522 .footerLeft{
522 .footerLeft{ 523 display: flex;
523 display: flex; 524 justify-content: center;
524 justify-content: center; 525 align-items: center;
525 align-items: center; 526 width: 50%;
526 width: 50%; 527 color: #333333;
527 color: #333333; 528 text{
528 text{ 529 color: #FF6B4A;
529 color: #FF6B4A; 530 }
530 } 531 }
531 } 532 .footerRight{
532 .footerRight{ 533 display: flex;
533 display: flex; 534 justify-content: flex-end;
534 justify-content: flex-end; 535 align-items: center;
535 align-items: center; 536 width: 50%;
536 width: 50%; 537 margin-right: 26rpx;
537 margin-right: 26rpx; 538 .paybtn{
538 .paybtn{ 539 display: flex;
539 display: flex; 540 justify-content: center;
540 justify-content: center; 541 align-items: center;
541 align-items: center; 542 background: #FF6B4A;
542 background: #FF6B4A; 543 border-radius: 20px;
543 border-radius: 20px; 544 border-radius: 20px;
544 border-radius: 20px; 545 color: #FFFFFF;
545 color: #FFFFFF; 546 width: 204rpx;
546 width: 204rpx; 547 height: 80rpx;
547 height: 80rpx; 548 }
548 } 549 }
549 } 550
550 551 }
551 } 552 }
552 } 553
553 554 </style>
src/pages/confirmOrder/confirmOrder.vue
Diff comments   View file @2369ec7
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view></view> 3 <view></view>
4 <view 4 <view
5 class="addAddress" 5 class="addAddress"
6 @tap="toaddAddress" 6 @tap="toaddAddress"
7 v-if="this.showAddress" 7 v-if="this.showAddress"
8 > 8 >
9 <view class="addIcon"> 9 <view class="addIcon">
10 <image 10 <image
11 src="../../static/add.png" 11 src="../../static/add.png"
12 mode="aspectFill" 12 mode="aspectFill"
13 ></image> 13 ></image>
14 </view> 14 </view>
15 <view class="addressText">{{addAddress}}</view> 15 <view class="addressText">{{addAddress}}</view>
16 <image 16 <image
17 src="../../static/right.png" 17 src="../../static/right.png"
18 mode="aspectFill" 18 mode="aspectFill"
19 ></image> 19 ></image>
20 </view> 20 </view>
21 <view 21 <view
22 v-else 22 v-else
23 @tap="toaddAddress" 23 @tap="toaddAddress"
24 class="list order-user" 24 class="list order-user"
25 > 25 >
26 <view class="order-user-head"> 26 <view class="order-user-head">
27 <view class="name"> 27 <view class="name">
28 <view 28 <view
29 v-if="addressInfo.default === '1'" 29 v-if="addressInfo.default === '1'"
30 class="default" 30 class="default"
31 ><text>默认</text></view>{{addressInfo.name}} 31 ><text>默认</text></view>{{addressInfo.name}}
32 </view> 32 </view>
33 <text class="mobile">{{addressInfo.mobile}}</text> 33 <text class="mobile">{{addressInfo.mobile}}</text>
34 </view> 34 </view>
35 <view class="order-user-body"> 35 <view class="order-user-body">
36 <image src="../../static/myorder-paying-location.png"></image> 36 <image src="../../static/myorder-paying-location.png"></image>
37 <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text> 37 <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text>
38 </view> 38 </view>
39 <image 39 <image
40 class="arrow" 40 class="arrow"
41 src="../../static/right.png" 41 src="../../static/right.png"
42 ></image> 42 ></image>
43 </view> 43 </view>
44 <view class="content"> 44 <view class="content">
45 <view class="orderInfo"> 45 <view class="orderInfo">
46 <view class="title"> 46 <view class="title">
47 <image 47 <image
48 src="../../static/store.png" 48 src="../../static/store.png"
49 mode="aspectFill" 49 mode="aspectFill"
50 style="width: 40rpx;height: 40rpx;" 50 style="width: 40rpx;height: 40rpx;"
51 ></image> 51 ></image>
52 <text>非常戴镜</text> 52 <text>非常戴镜</text>
53 </view> 53 </view>
54 <view class="infoBox"> 54 <view class="infoBox">
55 <view class="infoTop"> 55 <view class="infoTop">
56 <image 56 <image
57 :src="goodInfo.img_index_url" 57 :src="goodInfo.img_index_url"
58 mode="aspectFill" 58 mode="aspectFill"
59 ></image> 59 ></image>
60 <view class="infoRight"> 60 <view class="infoRight">
61 <text class="goodName">商品名称商品名称商品名称名称名称</text> 61 <text class="goodName">商品名称商品名称商品名称名称名称</text>
62 <text class="remarks">支持7天无理由退货 顺丰发货</text> 62 <text class="remarks">支持7天无理由退货 顺丰发货</text>
63 <view class="priceBox"> 63 <view class="priceBox">
64 <view class="price">￥198</view> 64 <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">
65 ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}}
66 </text></view>
65 <view class="counter"> 67 <view class="counter">
66 <view 68 <view
67 class="btn" 69 class="btn"
68 disabled="this.disabled" 70 disabled="this.disabled"
69 type="default" 71 type="default"
70 @click="counter(false)" 72 @click="counter(false)"
71 >-</view> 73 >-</view>
72 <text>{{count}}</text> 74 <text>{{count}}</text>
73 <view 75 <view
74 class="btn" 76 class="btn"
75 type="default" 77 type="default"
76 @click="counter(true)" 78 @click="counter(true)"
77 >+</view> 79 >+</view>
78 </view> 80 </view>
79 </view> 81 </view>
80 </view> 82 </view>
81 </view> 83 </view>
82 <view class="infoBottom"> 84 <view class="infoBottom">
83 <view class="norm">规格 <text>玫瑰金/钛合金</text></view> 85 <view class="norm">规格 <text >
86 <!-- 长度超出变省略号未做 -->
87 <block
88 v-for="(item, index) in current"
89 :key="index"
90 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block></block>
91 </text></view>
84 <view class="shippingMethod">配送方式 <text>快递</text></view> 92 <view class="shippingMethod">配送方式 <text>快递</text></view>
85 <view class="message">买家留言 93 <view class="message">买家留言
86 <input 94 <input
87 type="text" 95 type="text"
88 :value="note" 96 :value="note"
89 placeholder="建议提前协商(50字以内)" 97 placeholder="建议提前协商(50字以内)"
90 /> 98 />
91 </view> 99 </view>
92 </view> 100 </view>
93 </view> 101 </view>
94 </view> 102 </view>
95 <view class="payWay"> 103 <view class="payWay">
96 <view class="item"> 104 <view class="item">
97 <text>支付方式</text> 105 <text>支付方式</text>
98 <view class="itemRight"> 106 <view class="itemRight">
99 <view class="rightText"> 107 <view class="rightText">
100 <view class="choosePayWay"> 108 <view class="choosePayWay">
101 <image 109 <image
102 src="../../static/store.png" 110 src="../../static/store.png"
103 mode="aspectFill" 111 mode="aspectFill"
104 ></image> 112 ></image>
105 <text>微信支付</text> 113 <text>微信支付</text>
106 </view> 114 </view>
107 <!-- <view class="randomSubstraction">最高随机立减￥99</view> --> 115 <!-- <view class="randomSubstraction">最高随机立减￥99</view> -->
108 </view> 116 </view>
109 <!-- <image 117 <!-- <image
110 src="../../static/right.png" 118 src="../../static/right.png"
111 mode="aspectFill" 119 mode="aspectFill"
112 ></image> --> 120 ></image> -->
113 </view> 121 </view>
114 </view> 122 </view>
115 <!-- <view class="item"> 123 <!-- <view class="item">
116 <text>优惠券</text> 124 <text>优惠券</text>
117 <view class="itemRight"> 125 <view class="itemRight">
118 <view class="rightText"> 126 <view class="rightText">
119 <view class="chooseOffers"> 127 <view class="chooseOffers">
120 <text>-￥70.00</text> 128 <text>-￥70.00</text>
121 </view> 129 </view>
122 <view class="preferentialWay">最大优惠</view> 130 <view class="preferentialWay">最大优惠</view>
123 </view> 131 </view>
124 <image 132 <image
125 src="../../static/right.png" 133 src="../../static/right.png"
126 mode="aspectFill" 134 mode="aspectFill"
127 ></image> 135 ></image>
128 </view> 136 </view>
129 </view> --> 137 </view> -->
130 <view class="item"> 138 <view class="item">
131 <text>运费</text> 139 <text>运费</text>
132 <view class="itemRight"> 140 <view class="itemRight">
133 <view class="freight">免运费</view> 141 <view class="freight">免运费</view>
134 </view> 142 </view>
135 </view> 143 </view>
136 <view class="item"> 144 <view class="item">
137 <text>合计</text> 145 <text>合计</text>
138 <view class="itemRight"> 146 <view class="itemRight">
139 <view class="total">￥{{total}}</view> 147 <view class="total">¥{{Number(skuInfo.real_price) * count}}</view>
140 </view> 148 </view>
141 </view> 149 </view>
142 </view> 150 </view>
143 <!-- 151 <!--
144 <view class="checkBox"> 152 <view class="checkBox">
145 <checkbox-group> 153 <checkbox-group>
146 <label> 154 <label>
147 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买 155 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
148 </label> 156 </label>
149 </checkbox-group> 157 </checkbox-group>
150 </view> --> 158 </view> -->
151 </view> 159 </view>
152 <view class="footer"> 160 <view class="footer">
153 <view class="footerLeft">实付金额:<text>￥{{total}}</text></view> 161 <view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view>
154 <view class="footerRight"> 162 <view class="footerRight">
155 <view 163 <view
156 class="paybtn" 164 class="paybtn"
157 @tap="orderBuild" 165 @tap="orderBuild"
158 >立即支付</view> 166 >立即支付</view>
159 </view> 167 </view>
160 </view> 168 </view>
161 </view> 169 </view>
162 </template> 170 </template>
163 171
164 <script> 172 <script>
165 import store from '@/store' 173 import store from '@/store'
166 174
167 export default { 175 export default {
168 data() { 176 data() {
169 return { 177 return {
170 addAddress: '添加收货地址', 178 addAddress: '添加收货地址',
171 count: 1, 179 count: 1,
172 pid: 0, 180 pid: 0,
173 disabled: false, 181 disabled: false,
174 total: 120,
175 freight: 0.00, 182 freight: 0.00,
176 showAddress: false, 183 showAddress: false,
177 note: '', 184 note: '',
178 addressInfo: { 185 addressInfo: {
179 address: '' 186 address: '',
180 } 187 },
181 // isAnonymous: 188 // isAnonymous:
182 } 189 }
183 }, 190 },
184 onLoad({ pid, addressId }) { 191 onLoad({ pid, addressId, isCart }) {
185 this.pid = pid 192 this.pid = pid
186 // 若已经选择地址 193 // 若已经选择地址
187 if (addressId) { 194 if (addressId) {
188 store.dispatch('address/details', { 195 store.dispatch('address/details', {
189 add_id: addressId 196 add_id: addressId,
190 }).then(({ code, data }) => { 197 }).then(({ code, data }) => {
191 if (code === 1) { 198 if (code === 1) {
192 console.log('code', code, data) 199 console.log('code', code, data)
193 this.showAddress = true 200 this.showAddress = true
194 this.addressInfo = data 201 this.addressInfo = data
195 } 202 }
196 }) 203 })
197 } else { 204 } else {
198 store.dispatch('address/default').then(({ code, data }) => { 205 store.dispatch('address/default').then(({ code, data }) => {
199 if (code === 1) { 206 if (code === 1) {
200 console.log('code', code, data) 207 console.log('code', code, data)
201 this.showAddress = true 208 this.showAddress = true
202 this.addressInfo = data 209 this.addressInfo = data
203 } 210 }
204 }) 211 })
205 } 212 }
206 store.dispatch('read/fetch', { 213 store.dispatch('read/fetch', {
207 pid 214 pid,
208 }) 215 })
209 }, 216 },
210 computed: { 217 computed: {
211 goodInfo () { 218 goodInfo () {
212 console.log(this.$store.state.read.goodInfo) 219 console.log('state', this.$store.state)
213 return this.$store.state.read.goodInfo 220 return this.$store.state.read.goodInfo
214 } 221 },
222 skuInfo () {
223 return this.$store.state.order.param.sk_id_arr
224 },
225 attrList () {
226 return this.$store.state.order.param.attrList
227 },
228 current () {
229 return this.$store.state.order.param.current
230 },
215 }, 231 },
216 methods: { 232 methods: {
217 counter(isadd) { 233 counter(isadd) {
218 if (isadd) { 234 if (isadd) {
219 this.count++ 235 this.count++
220 } else { 236 } else {
221 this.count <= 1 ? this.disabled = true : this.count-- 237 this.count <= 1 ? this.disabled = true : this.count--
222 } 238 }
223 }, 239 },
240 // 跳转添加地址页面
224 toaddAddress() { 241 toaddAddress() {
225 uni.navigateTo({ 242 uni.navigateTo({
226 url: `../address/addressList?edit=${1}`, 243 url: `../address/addressList?edit=${1}`,
227 success: res => {}, 244 success: res => {},
228 fail: (error) => { console.log('跳转到地址列表页面失败====>', error) }, 245 fail: (error) => { console.log('跳转到地址列表页面失败====>', error) },
229 complete: () => {} 246 complete: () => {},
230 }) 247 })
231 }, 248 },
232 // 下单 249 // 下单
233 orderBuild() { 250 orderBuild() {
234 console.log('this', this.$store.state) 251 console.log('this', this.$store.state)
235 // store.dispatch('order/build', { 252 const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
236 // pid: 2, 253 store.dispatch('order/buyNow', {
237 // sk_id: '23', 254 pid: skId.pid,
238 // number: 2, 255 sk_id: skId.sk_id,
239 // mp_id: '201', 256 number: this.count,
240 // totalPrice: 101, 257 mp_id: mpId,
241 // address: this.addressInfo, 258 address: JSON.stringify(this.addressInfo),
242 // dir: 1 259 totalPrice: Number(this.skuInfo.real_price) * this.count * 100,
243 // }) 260 liuyan: this.note,
244 } 261 dir: 1,
262 }).then((res) => {
263 this.pay(res.data)
264 })
265 },
245 // 支付 266 // 支付
246 // pay() { 267 pay(res) {
247 // const openId = uni.getStorageSync('openid') 268 console.log('pay', res)
248 // const fieldSet = { 269 const { data, exKeyName: keyName } = res
249 // 'openid': this.$store.state.user.userInfo.openid, 270 const uid = uni.getStorageSync('uid')
250 // 'uid': this.$store.state.user.userInfo.uid, 271 const fieldSet = {
251 // 'shopid': 0, 272 openid: this.$store.state.user.userInfo.openid,
252 // 'payCate': 2020, 273 uid: this.$store.state.user.userInfo.uid,
253 // 'payMoney': , 274 shopid: 0,
254 // '' 275 payCate: 2020,
255 // } 276 payMoney: Number(this.skuInfo.real_price) * this.count * 100,
256 // } 277 payWoodId: `fcdj-${uid}-${keyName}`,
257 } 278 nonceStr: 'asfafasfasfasfasf',
279 signType: 'MD5',
280 app_uid: 2020,
281 timeStamp: new Date().getTime().toString(),
282 billInfo: JSON.stringify(data),
283 keyname: keyName,
284 }
285 console.log('fieldSet', fieldSet)
286 store.dispatch('order/pay', fieldSet).then((res) => {
287 console.log('res', res)
288 })
289 },
290 },
258 } 291 }
259 </script> 292 </script>
260 293
261 <style lang="scss"> 294 <style lang="scss">
262 .wrap { 295 .wrap {
263 height: 100vh; 296 height: 100vh;
264 background-color: #f2f2f2; 297 background-color: #f2f2f2;
265 font-family: PingFangSC-Regular; 298 font-family: PingFangSC-Regular;
266 letter-spacing: -0.23px; 299 letter-spacing: -0.23px;
267 position: absolute; 300 position: absolute;
268 } 301 }
269 .addAddress { 302 .addAddress {
270 background-color: #ffffff; 303 background-color: #ffffff;
271 box-sizing: border-box; 304 box-sizing: border-box;
272 height: 124rpx; 305 height: 124rpx;
273 width: 100%; 306 width: 100%;
274 display: flex; 307 display: flex;
275 align-items: center; 308 align-items: center;
276 padding: 0 40rpx; 309 padding: 0 40rpx;
277 .addIcon { 310 .addIcon {
278 background-color: #f2f2f2; 311 background-color: #f2f2f2;
279 height: 56rpx; 312 height: 56rpx;
280 width: 60rpx; 313 width: 60rpx;
281 border-radius: 4rpx; 314 border-radius: 4rpx;
282 display: flex; 315 display: flex;
283 justify-content: center; 316 justify-content: center;
284 align-items: center; 317 align-items: center;
285 margin-right: 40rpx; 318 margin-right: 40rpx;
286 } 319 }
287 image { 320 image {
288 height: 28rpx; 321 height: 28rpx;
289 width: 28rpx; 322 width: 28rpx;
290 } 323 }
291 .addressText { 324 .addressText {
292 font-size: 28rpx; 325 font-size: 28rpx;
293 color: #333333; 326 color: #333333;
294 margin-right: 364rpx; 327 margin-right: 364rpx;
295 } 328 }
296 } 329 }
297 .content { 330 .content {
298 background-color: #f2f2f2; 331 background-color: #f2f2f2;
299 width: 100%; 332 width: 100%;
300 display: flex; 333 display: flex;
301 flex-direction: column; 334 flex-direction: column;
302 justify-content: center; 335 justify-content: center;
303 align-items: center; 336 align-items: center;
304 padding: 40rpx; 337 padding: 40rpx;
305 box-sizing: border-box; 338 box-sizing: border-box;
306 .orderInfo { 339 .orderInfo {
307 width: 670rpx; 340 width: 670rpx;
308 height: 488rpx; 341 height: 488rpx;
309 background-color: #ffffff; 342 background-color: #ffffff;
310 border-radius: 20rpx; 343 border-radius: 20rpx;
311 box-sizing: border-box; 344 box-sizing: border-box;
312 padding: 0 40rpx 40rpx 40rpx; 345 padding: 0 40rpx 40rpx 40rpx;
313 .title { 346 .title {
314 display: flex; 347 display: flex;
315 align-items: center; 348 align-items: center;
316 font-size: 28rpx; 349 font-size: 28rpx;
317 color: #333333; 350 color: #333333;
318 height: 60rpx; 351 height: 60rpx;
319 line-height: 40rpx; 352 line-height: 40rpx;
320 padding: 10rpx 10rpx 10rpx 0rpx; 353 padding: 10rpx 10rpx 10rpx 0rpx;
321 image { 354 image {
322 margin-right: 20rpx; 355 margin-right: 20rpx;
323 } 356 }
324 } 357 }
325 .infoBox { 358 .infoBox {
326 margin-top: 42rpx; 359 margin-top: 42rpx;
327 .infoTop { 360 .infoTop {
328 display: flex; 361 display: flex;
329 flex-direction: row; 362 flex-direction: row;
330 image { 363 image {
331 height: 188rpx; 364 height: 188rpx;
332 width: 188rpx; 365 width: 188rpx;
333 margin-right: 24rpx; 366 margin-right: 24rpx;
334 } 367 }
335 .infoRight { 368 .infoRight {
336 width: 374rpx; 369 width: 374rpx;
337 display: flex; 370 display: flex;
338 flex-direction: column; 371 flex-direction: column;
339 align-items: flex-start; 372 align-items: flex-start;
340 justify-content: space-between; 373 justify-content: space-between;
341 .goodName { 374 .goodName {
342 font-size: 28rpx; 375 font-size: 28rpx;
343 color: #333333; 376 color: #333333;
344 } 377 }
345 .remarks { 378 .remarks {
346 font-size: 20rpx; 379 font-size: 20rpx;
347 color: #999999; 380 color: #999999;
348 } 381 }
349 .priceBox { 382 .priceBox {
350 display: flex; 383 display: flex;
351 justify-content: space-between; 384 justify-content: space-between;
352 align-items: center; 385 align-items: center;
353 width: 100%; 386 width: 100%;
354 .price { 387 .price {
355 color: #ff6b4a; 388 color: #ff6b4a;
356 font-size: 28rpx; 389 font-size: 28rpx;
357 } 390 }
391 .originCost {
392 text-decoration: line-through;
393 color: #999999;
394 font-size: 20rpx;
395 }
358 .counter { 396 .counter {
359 display: flex; 397 display: flex;
360 flex-direction: row; 398 flex-direction: row;
361 justify-content: space-between; 399 justify-content: space-between;
362 font-size: 28rpx; 400 font-size: 28rpx;
363 color: #333333; 401 color: #333333;
364 width: 122rpx; 402 width: 122rpx;
365 .btn { 403 .btn {
366 display: flex; 404 display: flex;
367 justify-content: center; 405 justify-content: center;
368 line-height: 32rpx; 406 line-height: 32rpx;
369 height: 32rpx; 407 height: 32rpx;
370 width: 32rpx; 408 width: 32rpx;
371 background-color: #f2f2f2; 409 background-color: #f2f2f2;
372 color: #cfcfcf; 410 color: #cfcfcf;
373 } 411 }
374 } 412 }
375 } 413 }
376 } 414 }
377 } 415 }
378 .infoBottom { 416 .infoBottom {
379 display: flex; 417 display: flex;
380 flex-direction: column; 418 flex-direction: column;
381 justify-content: flex-start; 419 justify-content: flex-start;
382 font-size: 24rpx; 420 font-size: 24rpx;
383 color: #333333; 421 color: #333333;
384 text { 422 text {
385 color: #999999; 423 color: #999999;
386 margin-left: 20rpx; 424 margin-left: 20rpx;
387 } 425 }
388 426
389 .norm { 427 .norm {
390 margin-top: 28rpx; 428 margin-top: 28rpx;
391 } 429 }
392 .shippingMethod { 430 .shippingMethod {
393 margin-top: 12rpx; 431 margin-top: 12rpx;
394 } 432 }
395 .message { 433 .message {
396 display: flex; 434 display: flex;
397 flex-direction: row; 435 flex-direction: row;
398 align-items: center; 436 align-items: center;
399 margin-top: 18rpx; 437 margin-top: 18rpx;
400 input { 438 input {
401 margin-left: 20rpx; 439 margin-left: 20rpx;
402 width: 75%; 440 width: 75%;
403 } 441 }
404 } 442 }
405 } 443 }
406 } 444 }
407 } 445 }
408 .payWay { 446 .payWay {
409 height: 464rpx; 447 height: 464rpx;
410 width: 670rpx; 448 width: 670rpx;
411 background-color: #ffffff; 449 background-color: #ffffff;
412 color: #333333; 450 color: #333333;
413 font-size: 24rpx; 451 font-size: 24rpx;
414 border-radius: 20rpx; 452 border-radius: 20rpx;
415 box-sizing: border-box; 453 box-sizing: border-box;
416 padding: 0 52rpx 0rpx 40rpx; 454 padding: 0 52rpx 0rpx 40rpx;
417 margin-top: 20rpx; 455 margin-top: 20rpx;
418 display: flex; 456 display: flex;
419 flex-direction: column; 457 flex-direction: column;
420 justify-content: center; 458 justify-content: center;
421 align-items: flex-start; 459 align-items: flex-start;
422 .item { 460 .item {
423 display: flex; 461 display: flex;
424 flex-direction: row; 462 flex-direction: row;
425 justify-content: space-between; 463 justify-content: space-between;
426 align-items: center; 464 align-items: center;
427 width: 100%; 465 width: 100%;
428 height: 115rpx; 466 height: 115rpx;
429 .itemRight { 467 .itemRight {
430 display: flex; 468 display: flex;
431 flex-direction: row; 469 flex-direction: row;
432 justify-content: space-between; 470 justify-content: space-between;
433 align-items: center; 471 align-items: center;
434 image { 472 image {
435 height: 24rpx; 473 height: 24rpx;
436 width: 12rpx; 474 width: 12rpx;
437 } 475 }
438 .rightText { 476 .rightText {
439 margin-right: 20rpx; 477 margin-right: 20rpx;
440 text-align: right; 478 text-align: right;
441 .choosePayWay { 479 .choosePayWay {
442 text { 480 text {
443 color: #333333; 481 color: #333333;
444 } 482 }
445 image { 483 image {
446 height: 26rpx; 484 height: 26rpx;
447 width: 30rpx; 485 width: 30rpx;
448 margin-right: 20px; 486 margin-right: 20px;
449 } 487 }
450 } 488 }
451 .randomSubstraction { 489 .randomSubstraction {
452 color: #ff6b4a; 490 color: #ff6b4a;
453 } 491 }
454 .preferentialWay { 492 .preferentialWay {
455 color: #999999; 493 color: #999999;
456 } 494 }
457 } 495 }
458 .freight, 496 .freight,
459 .total { 497 .total {
460 margin-right: 32rpx; 498 margin-right: 32rpx;
461 } 499 }
462 text { 500 text {
463 color: #ff6b4a; 501 color: #ff6b4a;
464 } 502 }
465 } 503 }
466 } 504 }
467 } 505 }
468 // .checkBox { 506 // .checkBox {
469 // height: 58rpx; 507 // height: 58rpx;
470 // line-height: 58rpx; 508 // line-height: 58rpx;
471 // width: 100%; 509 // width: 100%;
472 // margin-top: 36rpx; 510 // margin-top: 36rpx;
473 // margin-left: 40rpx; 511 // margin-left: 40rpx;
474 // font-size: 12px; 512 // font-size: 12px;
475 // color: #999999; 513 // color: #999999;
476 // } 514 // }
477 } 515 }
478 .footer { 516 .footer {
479 height: 112rpx; 517 height: 112rpx;
480 width: 100%; 518 width: 100%;
481 background-color: #fff; 519 background-color: #fff;
482 font-size: 16px; 520 font-size: 16px;
483 display: flex; 521 display: flex;
484 justify-content: space-between; 522 justify-content: space-between;
485 align-items: center; 523 align-items: center;
486 position: fixed; 524 position: fixed;
487 bottom: 0; 525 bottom: 0;
488 .footerLeft { 526 .footerLeft {
489 display: flex; 527 display: flex;
490 justify-content: center; 528 justify-content: center;
491 align-items: center; 529 align-items: center;
492 width: 50%; 530 width: 50%;
493 color: #333333; 531 color: #333333;
494 text { 532 text {
495 color: #ff6b4a; 533 color: #ff6b4a;
496 } 534 }
497 } 535 }
498 .footerRight { 536 .footerRight {
499 display: flex; 537 display: flex;
500 justify-content: flex-end; 538 justify-content: flex-end;
501 align-items: center; 539 align-items: center;
502 width: 50%; 540 width: 50%;
503 margin-right: 26rpx; 541 margin-right: 26rpx;
504 .paybtn { 542 .paybtn {
505 display: flex; 543 display: flex;
506 justify-content: center; 544 justify-content: center;
507 align-items: center; 545 align-items: center;
508 background: #ff6b4a; 546 background: #ff6b4a;
509 border-radius: 20px; 547 border-radius: 20px;
510 border-radius: 20px; 548 border-radius: 20px;
511 color: #ffffff; 549 color: #ffffff;
512 width: 204rpx; 550 width: 204rpx;
513 height: 80rpx; 551 height: 80rpx;
514 } 552 }
515 } 553 }
516 } 554 }
517 // 地址信息样式 555 // 地址信息样式
518 .order-user { 556 .order-user {
519 width: 670rpx; 557 width: 670rpx;
520 height: 228rpx; 558 height: 228rpx;
521 background: #ffffff; 559 background: #ffffff;
522 border-radius: 14rpx; 560 border-radius: 14rpx;
523 margin: 0 auto; 561 margin: 0 auto;
524 margin-top: 20rpx; 562 margin-top: 20rpx;
525 position: relative; 563 position: relative;
526 .order-user-head { 564 .order-user-head {
527 display: flex; 565 display: flex;
528 height: 108rpx; 566 height: 108rpx;
529 width: 100%; 567 width: 100%;
530 align-items: center; 568 align-items: center;
531 margin-left: 126rpx; 569 margin-left: 126rpx;
532 .name { 570 .name {
533 display: flex; 571 display: flex;
534 justify-content: space-between; 572 justify-content: space-between;
535 font-size: 14px; 573 font-size: 14px;
536 color: #333333; 574 color: #333333;
537 letter-spacing: -0.26px; 575 letter-spacing: -0.26px;
538 margin-right: 20rpx; 576 margin-right: 20rpx;
539 .default { 577 .default {
540 height: 40rpx; 578 height: 40rpx;
541 width: 80rpx; 579 width: 80rpx;
542 background-color: #4a90e2; 580 background-color: #4a90e2;
543 border-radius: 13px; 581 border-radius: 13px;
544 border-radius: 13px; 582 border-radius: 13px;
545 text-align: center; 583 text-align: center;
546 margin-right: 20rpx; 584 margin-right: 20rpx;
547 text { 585 text {
548 font-size: 12px; 586 font-size: 12px;
549 color: #ffffff; 587 color: #ffffff;
550 letter-spacing: -0.23px; 588 letter-spacing: -0.23px;
551 } 589 }
552 } 590 }
553 } 591 }
554 .mobile { 592 .mobile {
555 font-size: 14px; 593 font-size: 14px;
556 color: #999999; 594 color: #999999;
557 letter-spacing: -0.26px; 595 letter-spacing: -0.26px;
558 } 596 }
559 } 597 }
560 .order-user-body { 598 .order-user-body {
561 display: flex; 599 display: flex;
562 width: 100%; 600 width: 100%;
563 image { 601 image {
564 width: 24px; 602 width: 24px;
565 height: 26px; 603 height: 26px;
566 margin: 12rpx 32rpx 0 40rpx; 604 margin: 12rpx 32rpx 0 40rpx;
567 } 605 }
568 .address { 606 .address {
569 font-weight: bold; 607 font-weight: bold;
570 font-size: 14px; 608 font-size: 14px;
571 color: #333333; 609 color: #333333;
572 letter-spacing: -0.26px; 610 letter-spacing: -0.26px;
573 } 611 }
574 } 612 }
575 .arrow { 613 .arrow {
576 width: 6px; 614 width: 6px;
577 height: 12px; 615 height: 12px;
578 position: absolute; 616 position: absolute;
579 right: 40rpx; 617 right: 40rpx;
580 bottom: 104rpx; 618 bottom: 104rpx;
581 } 619 }
582 } 620 }
583 </style> 621 </style>
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @2369ec7
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="D1"> 3 <view class="D1">
4 <!-- 轮播图 --> 4 <!-- 轮播图 -->
5 <swiper 5 <swiper
6 class="swiperImage" 6 class="swiperImage"
7 :indicator-dots="true" 7 :indicator-dots="true"
8 :autoplay="true" 8 :autoplay="true"
9 :interval="4000" 9 :interval="4000"
10 :duration="500" 10 :duration="500"
11 > 11 >
12 <swiper-item 12 <swiper-item
13 v-for="(item, index) in goodInfo.pics" 13 v-for="(item, index) in goodInfo.pics"
14 :key="index" 14 :key="index"
15 > 15 >
16 <image 16 <image
17 :src="item" 17 :src="item"
18 mode="scaleToFill" 18 mode="scaleToFill"
19 ></image> 19 ></image>
20 </swiper-item> 20 </swiper-item>
21 </swiper> 21 </swiper>
22 <view class="D1_price">￥{{goodInfo.p_sale_price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view> 22 <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view>
23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view> 23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> 24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
25 </view> 25 </view>
26 <view 26 <view
27 class="D2" 27 class="D2"
28 v-if="updateGoodType == 2 || updateGoodType == 4" 28 v-if="updateGoodType == 2 || updateGoodType == 4"
29 > 29 >
30 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 30 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
31 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view> 31 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
32 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 32 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
33 </view> 33 </view>
34 <view 34 <!-- <view
35 class="D2" 35 class="D2"
36 v-if="updateGoodType == 1" 36 v-if="updateGoodType == 1"
37 > 37 >
38 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 38 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
39 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view> 39 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
40 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view> 40 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
41 </view> 41 </view>
42 <view 42 <view
43 class="D2" 43 class="D2"
44 v-if="updateGoodType == 3" 44 v-if="updateGoodType == 3"
45 > 45 >
46 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 46 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
47 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view> 47 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
48 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 48 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
49 </view> 49 </view> -->
50 <view class="D3"> 50 <view class="D3">
51 <view class="screenBar"> 51 <view class="screenBar">
52 <view 52 <view
53 v-for="item in screenItems" 53 v-for="item in screenItems"
54 :key="item.current" 54 :key="item.current"
55 @click="tabChange(item.current)" 55 @click="tabChange(item.current)"
56 > 56 >
57 <view 57 <view
58 class="screenItem" 58 class="screenItem"
59 v-bind:class="{ active: current === item.current }" 59 v-bind:class="{ active: current === item.current }"
60 >{{ item.text || '暂无' }}</view> 60 >{{ item.text || '暂无' }}</view>
61 </view> 61 </view>
62 </view> 62 </view>
63 <view 63 <view
64 class="screen-item" 64 class="screen-item"
65 v-if="current === 1" 65 v-if="current === 1"
66 > 66 >
67 <view class="D3_list"> 67 <view class="D3_list">
68 <view 68 <view
69 v-for="(item) in parameter" 69 v-for="(item) in parameter"
70 :key="item.key" 70 :key="item.key"
71 > 71 >
72 <image 72 <image
73 class="D3_image" 73 class="D3_image"
74 v-bind:src="item.img" 74 v-bind:src="item.img"
75 ></image> 75 ></image>
76 <span>{{item.standard || '暂无'}}</span> 76 <span>{{item.standard || '暂无'}}</span>
77 <span>{{item.slength || '暂无'}}</span> 77 <span>{{item.slength || '暂无'}}</span>
78 </view> 78 </view>
79 </view> 79 </view>
80 </view> 80 </view>
81 <view 81 <view
82 class="screen-item" 82 class="screen-item"
83 v-if="current === 0" 83 v-if="current === 0"
84 > 84 >
85 <view class="D3_list"> 85 <view class="D3_list">
86 <!-- <block> 86 <!-- <block>
87 <view>主体</view> 87 <view>主体</view>
88 <view>商品产地：韩国</view> 88 <view>商品产地：韩国</view>
89 <view>包装清单：彩色隐形 * 1</view> 89 <view>包装清单：彩色隐形 * 1</view>
90 </block> --> 90 </block> -->
91 <!-- 迭代时建议配合接口修改 为数组 --> 91 <!-- 迭代时建议配合接口修改 为数组 -->
92 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0"> 92 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
93 <view class=""> 93 <view class="">
94 年龄：<view 94 年龄：<view
95 v-for="(item,index) in tag.prod_tag_age" 95 v-for="(item,index) in tag.prod_tag_age"
96 :key="index" 96 :key="index"
97 > 97 >
98 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text> 98 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
99 </view> 99 </view>
100 </view> 100 </view>
101 </view> 101 </view>
102 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0"> 102 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
103 <view class=""> 103 <view class="">
104 颜色：<view 104 颜色：<view
105 v-for="(item,index) in tag.prod_tag_color" 105 v-for="(item,index) in tag.prod_tag_color"
106 :key="index" 106 :key="index"
107 > 107 >
108 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text> 108 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
109 </view> 109 </view>
110 </view> 110 </view>
111 </view> 111 </view>
112 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0"> 112 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
113 <view class=""> 113 <view class="">
114 脸型：<view 114 脸型：<view
115 v-for="(item,index) in tag.prod_tag_face" 115 v-for="(item,index) in tag.prod_tag_face"
116 :key="index" 116 :key="index"
117 > 117 >
118 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text> 118 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
119 </view> 119 </view>
120 </view> 120 </view>
121 </view> 121 </view>
122 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0"> 122 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
123 <view class=""> 123 <view class="">
124 赠品：<view 124 赠品：<view
125 v-for="(item,index) in tag.prod_tag_freesend" 125 v-for="(item,index) in tag.prod_tag_freesend"
126 :key="index" 126 :key="index"
127 > 127 >
128 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text> 128 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
129 </view> 129 </view>
130 </view> 130 </view>
131 </view> 131 </view>
132 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0"> 132 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
133 <view class=""> 133 <view class="">
134 保险：<view 134 保险：<view
135 v-for="(item,index) in tag.prod_tag_insurance" 135 v-for="(item,index) in tag.prod_tag_insurance"
136 :key="index" 136 :key="index"
137 > 137 >
138 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text> 138 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
139 </view> 139 </view>
140 </view> 140 </view>
141 </view> 141 </view>
142 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0"> 142 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
143 <view class=""> 143 <view class="">
144 材质：<view 144 材质：<view
145 v-for="(item,index) in tag.prod_tag_metal" 145 v-for="(item,index) in tag.prod_tag_metal"
146 :key="index" 146 :key="index"
147 > 147 >
148 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text> 148 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
149 </view> 149 </view>
150 </view> 150 </view>
151 </view> 151 </view>
152 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0"> 152 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
153 <view class=""> 153 <view class="">
154 个性：<view 154 个性：<view
155 v-for="(item,index) in tag.prod_tag_personal" 155 v-for="(item,index) in tag.prod_tag_personal"
156 :key="index" 156 :key="index"
157 > 157 >
158 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text> 158 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
159 </view> 159 </view>
160 </view> 160 </view>
161 </view> 161 </view>
162 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0"> 162 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
163 <view class=""> 163 <view class="">
164 场景：<view 164 场景：<view
165 v-for="(item,index) in tag.prod_tag_sense" 165 v-for="(item,index) in tag.prod_tag_sense"
166 :key="index" 166 :key="index"
167 > 167 >
168 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text> 168 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
169 </view> 169 </view>
170 </view> 170 </view>
171 </view> 171 </view>
172 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0"> 172 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
173 <view class=""> 173 <view class="">
174 性别：<view 174 性别：<view
175 v-for="(item,index) in tag.prod_tag_sex" 175 v-for="(item,index) in tag.prod_tag_sex"
176 :key="index" 176 :key="index"
177 > 177 >
178 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text> 178 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
179 </view> 179 </view>
180 </view> 180 </view>
181 </view> 181 </view>
182 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0"> 182 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
183 <view class=""> 183 <view class="">
184 风格：<view 184 风格：<view
185 v-for="(item,index) in tag.prod_tag_style" 185 v-for="(item,index) in tag.prod_tag_style"
186 :key="index" 186 :key="index"
187 > 187 >
188 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text> 188 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
189 </view> 189 </view>
190 </view> 190 </view>
191 </view> 191 </view>
192 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0"> 192 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
193 <view class=""> 193 <view class="">
194 重量：<view 194 重量：<view
195 v-for="(item,index) in tag.prod_tag_weight" 195 v-for="(item,index) in tag.prod_tag_weight"
196 :key="index" 196 :key="index"
197 > 197 >
198 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text> 198 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
199 </view> 199 </view>
200 </view> 200 </view>
201 </view> 201 </view>
202 </view> 202 </view>
203 </view> 203 </view>
204 <view 204 <view
205 class="screen-item " 205 class="screen-item "
206 v-if="current ===2" 206 v-if="current ===2"
207 > 207 >
208 <view class="customerService"> 208 <view class="customerService">
209 <view class="serviceItem"> 209 <view class="serviceItem">
210 <view class="title"> 210 <view class="title">
211 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 211 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
212 <text class="titleText">卖家服务</text> 212 <text class="titleText">卖家服务</text>
213 </view> 213 </view>
214 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view> 214 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
215 </view> 215 </view>
216 <view class="serviceItem"> 216 <view class="serviceItem">
217 <view class="title"> 217 <view class="title">
218 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 218 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
219 <text class="titleText">平台承诺</text> 219 <text class="titleText">平台承诺</text>
220 </view> 220 </view>
221 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> 221 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
222 </view> 222 </view>
223 <view class="serviceItem"> 223 <view class="serviceItem">
224 <view class="title"> 224 <view class="title">
225 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 225 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
226 <text class="titleText">正品保证</text> 226 <text class="titleText">正品保证</text>
227 </view> 227 </view>
228 <view class="itemContent">向您保证所售商品均为正品行货</view> 228 <view class="itemContent">向您保证所售商品均为正品行货</view>
229 </view> 229 </view>
230 <view class="serviceItem2"> 230 <view class="serviceItem2">
231 <view class="title"> 231 <view class="title">
232 <text class="titleText">权利申明</text> 232 <text class="titleText">权利申明</text>
233 </view> 233 </view>
234 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> 234 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
235 </view> 235 </view>
236 <view class="serviceItem2"> 236 <view class="serviceItem2">
237 <view class="title"> 237 <view class="title">
238 <text class="titleText">价格保证</text> 238 <text class="titleText">价格保证</text>
239 </view> 239 </view>
240 <view class="itemContent"> 240 <view class="itemContent">
241 <view class="itemContent-child"> 241 <view class="itemContent-child">
242 <text class="contentTitle">平台价:</text> 242 <text class="contentTitle">平台价:</text>
243 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 243 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
244 </view> 244 </view>
245 <view class="itemContent-child"> 245 <view class="itemContent-child">
246 <text class="contentTitle">划线价:</text> 246 <text class="contentTitle">划线价:</text>
247 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 247 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
248 </view> 248 </view>
249 <view class="itemContent-child"> 249 <view class="itemContent-child">
250 <text class="contentTitle">平折扣:</text> 250 <text class="contentTitle">平折扣:</text>
251 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 251 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
252 </view> 252 </view>
253 <view class="itemContent-child"> 253 <view class="itemContent-child">
254 <text class="contentTitle">异常问题:</text> 254 <text class="contentTitle">异常问题:</text>
255 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 255 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
256 </view> 256 </view>
257 257
258 </view> 258 </view>
259 </view> 259 </view>
260 </view> 260 </view>
261 </view> 261 </view>
262 </view> 262 </view>
263 <view 263 <view
264 class="D4" 264 class="D4"
265 v-if="current !==2" 265 v-if="current !==2"
266 > 266 >
267 <view class="D4_esvalue"> 267 <view class="D4_esvalue">
268 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view> 268 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view>
269 <view class="D4_2"> 269 <view class="D4_2">
270 <view 270 <view
271 class="star" 271 class="star"
272 v-for="o in starCount" 272 v-for="o in starCount"
273 :key="o" 273 :key="o"
274 > 274 >
275 <image 275 <image
276 src="../../static/img/detail/d_star.png" 276 src="../../static/img/detail/d_star.png"
277 mode="aspectFill" 277 mode="aspectFill"
278 style="height: 26rpx; width: 28rpx;" 278 style="height: 26rpx; width: 28rpx;"
279 ></image> 279 ></image>
280 </view> 280 </view>
281 </view> 281 </view>
282 </view> 282 </view>
283 <view class="D4_list"> 283 <view class="D4_list">
284 <view 284 <view
285 v-for="(assess) in goodInfo.judge_tag" 285 v-for="(assess) in goodInfo.judge_tag"
286 :key="assess.key" 286 :key="assess.key"
287 >{{assess.name}}</view> 287 >{{assess.name}}</view>
288 </view> 288 </view>
289 </view> 289 </view>
290 <view 290 <view
291 class="D5" 291 class="D5"
292 v-if="current !==2" 292 v-if="current !==2"
293 > 293 >
294 <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)"> 294 <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)">
295 <image src="/static/img/detail/hr.png"></image> 295 <image src="/static/img/detail/hr.png"></image>
296 <view>商品详细</view> 296 <view>商品详细</view>
297 <image src="/static/img/detail/hr.png"></image> 297 <image src="/static/img/detail/hr.png"></image>
298 </view> 298 </view>
299 <view class="D5_all" v-html="test"> 299 <view class="D5_all" v-html="test">
300 <!-- <block> 300 <!-- <block>
301 <rich-text :nodes="goodInfo.prodIntro1"></rich-text> 301 <rich-text :nodes="goodInfo.prodIntro1"></rich-text>
302 </block> --> 302 </block> -->
303 </view> 303 </view>
304 </view> 304 </view>
305 <!-- 底部菜单 --> 305 <!-- 底部菜单 -->
306 <view class="botton"> 306 <view class="botton">
307 <view 307 <view
308 @tap="toCart()" 308 @tap="toCart()"
309 class="botton_1" 309 class="botton_1"
310 > 310 >
311 <image v-bind:src="imgShop.img"></image> 311 <image v-bind:src="imgShop.img"></image>
312 <view class="botton_image">购物车</view> 312 <view class="botton_image">购物车</view>
313 </view> 313 </view>
314 <view class="botton_2"> 314 <view class="botton_2">
315 <view 315 <view
316 class="botton_input" 316 class="botton_input"
317 @tap="addCart()" 317 @tap="addCart()"
318 >加入购物车</view> 318 >加入购物车</view>
319 <view 319 <view
320 class="botton_now" 320 class="botton_now"
321 @tap="goPerchase()" 321 @tap="goPerchase()"
322 >立即购买</view> 322 >立即购买</view>
323 </view> 323 </view>
324 </view> 324 </view>
325 </view> 325 </view>
326 </template> 326 </template>
327 327
328 <script> 328 <script>
329 import store from '@/store' 329 import store from '@/store'
330 export default { 330 export default {
331 data () { 331 data () {
332 return { 332 return {
333 test: '', 333 test: '',
334 goodType: 2, 334 goodType: 2,
335 pid: 0, 335 pid: 0,
336 // 购物车数据 336 // 购物车数据
337 addCartList: { 337 addCartList: {
338 mp_id: 0, 338 mp_id: 0,
339 sk_id: 0, 339 sk_id: 0,
340 num: 1, 340 num: 1,
341 price: '' 341 price: '',
342 }, 342 },
343 screenItems: [ 343 screenItems: [
344 { current: 0, text: '商品介绍' }, 344 { current: 0, text: '商品介绍' },
345 { current: 1, text: '规格参数' }, 345 { current: 1, text: '规格参数' },
346 { current: 2, text: '售后保障' } 346 { current: 2, text: '售后保障' },
347 ], 347 ],
348 current: 0, 348 current: 0,
349 starCount: 5, 349 starCount: 5,
350 parameter: [ 350 parameter: [
351 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, 351 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
352 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, 352 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
353 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, 353 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
354 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, 354 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
355 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, 355 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
356 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' } 356 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' },
357 ], 357 ],
358 esvalue: '宝贝好评率', 358 esvalue: '宝贝好评率',
359 introduction: { 359 introduction: {
360 material: '钛合金', 360 material: '钛合金',
361 func: '抗疲劳/防辐射', 361 func: '抗疲劳/防辐射',
362 rate: '男/女' 362 rate: '男/女',
363 }, 363 },
364 imgAll: '/static/img/detail/d8.png', 364 imgAll: '/static/img/detail/d8.png',
365 photoes: [ 365 photoes: [
366 { value: '日常办公', img: '/static/img/detail/d9.png' }, 366 { value: '日常办公', img: '/static/img/detail/d9.png' },
367 { value: '上网', img: '/static/img/detail/d10.png' }, 367 { value: '上网', img: '/static/img/detail/d10.png' },
368 { value: '追剧', img: '/static/img/detail/d11.png' }, 368 { value: '追剧', img: '/static/img/detail/d11.png' },
369 { value: '玩游戏', img: '/static/img/detail/d12.png' } 369 { value: '玩游戏', img: '/static/img/detail/d12.png' },
370 ], 370 ],
371 imgDetail: '/static/img/detail/d13.png', 371 imgDetail: '/static/img/detail/d13.png',
372 imgShop: { 372 imgShop: {
373 img: '/static/tab-cart.png', 373 img: '/static/tab-cart.png',
374 IsShown: false 374 IsShown: false,
375 }, 375 },
376 tag: { 376 tag: {
377 prod_tag_freesend: [{ 377 prod_tag_freesend: [{
378 label: '眼镜盒', 378 label: '眼镜盒',
379 value: '262' 379 value: '262',
380 }] 380 }],
381 } 381 },
382 } 382 }
383 }, 383 },
384 onLoad: function ({ pid }) { 384 onLoad: function ({ pid, sk_id }) {
385 this.pid = pid 385 this.pid = pid
386 store.dispatch('read/fetch', { 386 // console.log('sk_id=====>',sk_id)
387 store.dispatch('read/fetch', {
387 pid 388 pid,
388 }).then(() => { 389 sk_id,
390 }).then(() => {
389 this.parameter[0].slength = `${this.goodInfo.frame_width}mm` 391 this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
390 this.parameter[1].slength = `${this.goodInfo.glass_width}mm` 392 this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
391 this.parameter[2].slength = `${this.goodInfo.glass_height}mm` 393 this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
392 this.parameter[3].slength = `${this.goodInfo.nose_width}mm` 394 this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
393 this.parameter[4].slength = `${this.goodInfo.leg_long}mm` 395 this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
394 this.parameter[5].slength = `${this.goodInfo.weight}mm` 396 this.parameter[5].slength = `${this.goodInfo.weight}mm`
395 this.tag = this.goodInfo.tag 397 this.tag = this.goodInfo.tag
396 this.test = this.goodInfo.prodIntro1 398 this.test = this.goodInfo.prodIntro1
397 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ') 399 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
398 // addCart 400 // addCart
399 this.addCartList.price = this.goodInfo.p_sale_price 401 this.addCartList.price = this.goodInfo.p_sale_price
400 this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id 402 this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id
401 this.addCartList.mp_id = this.goodInfo.glassData.mp_id 403 this.addCartList.mp_id = this.goodInfo.glassData.mp_id
402 }) 404 })
403 // console.log(this.$store.state.user.userInfo.uid + 'ssss') 405 // console.log(this.$store.state.user.userInfo.uid + 'ssss')
404 }, 406 },
405 computed: { 407 computed: {
406 updateGoodType () { 408 updateGoodType () {
407 return this.goodType 409 return this.goodType
408 }, 410 },
409 goodInfo () { 411 goodInfo () {
410 console.log(this.$store.state.read.goodInfo) 412 console.log(this.$store.state.read.goodInfo)
411 return this.$store.state.read.goodInfo 413 return this.$store.state.read.goodInfo
412 } 414 },
413 }, 415 },
414 methods: { 416 methods: {
415 // 前往购物车 417 // 前往购物车
416 toCart() { 418 toCart() {
417 uni.switchTab({ 419 uni.switchTab({
418 url: '/pages/cart/cart', 420 url: '/pages/cart/cart',
419 success: res => {}, 421 success: res => {},
420 fail: (error) => { console.log('跳转购物车失败======>', error) }, 422 fail: (error) => { console.log('跳转购物车失败======>', error) },
421 complete: () => { console.log('toCart') } 423 complete: () => { console.log('toCart') },
422 }) 424 })
423 }, 425 },
424 // 加入购物车 426 // 加入购物车
425 addCart () { 427 addCart () {
426 store.dispatch('cart/addCart', { 428 store.dispatch('cart/addCart', {
427 uid: this.$store.state.user.userInfo.uid, 429 uid: this.$store.state.user.userInfo.uid,
428 openid: this.$store.state.user.userInfo.openid, 430 openid: this.$store.state.user.userInfo.openid,
429 mp_id: this.addCartList.mp_id, 431 mp_id: this.addCartList.mp_id,
430 sk_id: this.addCartList.sk_id, 432 sk_id: this.addCartList.sk_id,
431 num: this.addCartList.num, 433 num: this.addCartList.num,
432 pid: this.pid, 434 pid: this.pid,
433 price: this.addCartList.price 435 price: this.addCartList.price,
434 }) 436 checkedSKU: {},
435 store.dispatch('cart/getCartList', { 437 })
438 store.dispatch('cart/getCartList', {
436 uid: this.$store.state.user.userInfo.uid // 用户id 439 uid: this.$store.state.user.userInfo.uid, // 用户id
437 }) 440 })
438 }, 441 },
439 goPerchase () { 442 goPerchase () {
440 // switch (this.updateGoodType) { 443 // switch (this.updateGoodType) {
441 // case '1': 444 // case '1':
442 console.log('goPerchase') 445 console.log('goPerchase')
443 uni.navigateTo({ 446 uni.navigateTo({
444 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, 447 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
445 success: res => {}, 448 success: res => {},
446 fail: (error) => { console.log('跳转参数选择失败======>', error) }, 449 fail: (error) => { console.log('跳转参数选择失败======>', error) },
447 complete: () => { console.log('goPerchase') } 450 complete: () => { console.log('goPerchase') },
448 }) 451 })
449 // break 452 // break
450 // case '2': 453 // case '2':
451 // uni.navigateTo({ 454 // uni.navigateTo({
452 // url: '../detailStandard/detailStandard_k', 455 // url: '../detailStandard/detailStandard_k',
453 // success: res => {}, 456 // success: res => {},
454 // fail: () => {}, 457 // fail: () => {},
455 // complete: () => {} 458 // complete: () => {}
456 // }) 459 // })
457 // break 460 // break
458 // case '3': 461 // case '3':
459 // uni.navigateTo({ 462 // uni.navigateTo({
460 // url: '../purchaseLenses/purchaseLenses', 463 // url: '../purchaseLenses/purchaseLenses',
461 // success: res => {}, 464 // success: res => {},
462 // fail: () => {}, 465 // fail: () => {},
463 // complete: () => {} 466 // complete: () => {}
464 // }) 467 // })
465 // break 468 // break
466 // case '4': 469 // case '4':
467 // uni.navigateTo({ 470 // uni.navigateTo({
468 // url: '../detailStandard/detailStandard_sun', 471 // url: '../detailStandard/detailStandard_sun',
469 // success: res => {}, 472 // success: res => {},
470 // fail: () => {}, 473 // fail: () => {},
471 // complete: () => {} 474 // complete: () => {}
472 // }) 475 // })
473 // break 476 // break
474 // default : 477 // default :
475 // break 478 // break
476 // } 479 // }
477 }, 480 },
478 tabChange (e) { 481 // 加入购物车
479 if (this.current !== e) { 482 // addCart () {
483 // store.dispatch('cart/addCart', {
484 // uid: this.$store.state.user.userInfo.uid,
485 // openid: this.$store.state.user.userInfo.openid,
486 // pid: this.pid,
487 // checkedSKU: {},
488 // })
489 // store.dispatch('cart/getCartList', {
490 // uid: this.$store.state.user.userInfo.uid, // 用户id
491 // })
492 // },
493 tabChange (e) {
494 if (this.current !== e) {
480 this.current = e 495 this.current = e
481 } 496 }
482 } 497 },
483 } 498 },
484 } 499 }
485 </script> 500 </script>
486 <style lang='scss'> 501 <style lang='scss'>
487 .container { 502 .container {
488 background-color: #f8f8f8; 503 background-color: #f8f8f8;
489 } 504 }
490 .D1, 505 .D1,
491 .D2, 506 .D2,
492 .D3, 507 .D3,
493 .D4, 508 .D4,
494 .D6 { 509 .D6 {
495 background: #ffffff; 510 background: #ffffff;
496 margin-bottom: 10px; 511 margin-bottom: 10px;
497 padding: 8px 20px 8px 20px; 512 padding: 8px 20px 8px 20px;
498 box-sizing: border-box; 513 box-sizing: border-box;
499 .swiperImage { 514 .swiperImage {
500 width: 684rpx; 515 width: 684rpx;
501 height: 480rpx; 516 height: 480rpx;
502 image { 517 image {
503 max-width: 100%; 518 max-width: 100%;
504 max-height: 100%; 519 max-height: 100%;
505 border-radius: 16rpx; 520 border-radius: 16rpx;
506 } 521 }
507 } 522 }
508 } 523 }
509 .D5 { 524 .D5 {
510 background: #ffffff; 525 background: #ffffff;
511 padding: 8px 20px 8px 20px; 526 padding: 8px 20px 8px 20px;
512 box-sizing: border-box; 527 box-sizing: border-box;
513 } 528 }
514 .swiperImage { 529 .swiperImage {
515 width: 100%; 530 width: 100%;
516 height: 560rpx; 531 height: 560rpx;
517 .swiper-item { 532 .swiper-item {
518 width: 100%; 533 width: 100%;
519 image { 534 image {
520 width: 100%; 535 width: 100%;
521 } 536 }
522 } 537 }
523 } 538 }
524 .D1 { 539 .D1 {
525 .D1_price { 540 .D1_price {
526 color: #eb5d3b; 541 color: #eb5d3b;
527 font-size: 18px; 542 font-size: 18px;
528 margin-top: 5px; 543 margin-top: 5px;
529 font-family: "PingFangSC-Semibold"; 544 font-family: "PingFangSC-Semibold";
530 display: flex; 545 display: flex;
531 justify-content: space-between; 546 justify-content: space-between;
532 .D1_number { 547 .D1_number {
533 color: #999999; 548 color: #999999;
534 font-size: 14px; 549 font-size: 14px;
535 font-family: "PingFangSC-Regular"; 550 font-family: "PingFangSC-Regular";
536 } 551 }
537 } 552 }
538 .D1_name { 553 .D1_name {
539 font-size: 16px; 554 font-size: 16px;
540 font-family: "PingFangSC-Semibold"; 555 font-family: "PingFangSC-Semibold";
541 margin-top: 5px; 556 margin-top: 5px;
542 .D1_name1 { 557 .D1_name1 {
543 font-weight: bold; 558 font-weight: bold;
544 font-size: 16px; 559 font-size: 16px;
545 color: #333333; 560 color: #333333;
546 } 561 }
547 } 562 }
548 .D1_spans { 563 .D1_spans {
549 font-size: 10px; 564 font-size: 10px;
550 color: #999999; 565 color: #999999;
551 margin-top: 5px; 566 margin-top: 5px;
552 span { 567 span {
553 height: 14px; 568 height: 14px;
554 margin-right: 10px; 569 margin-right: 10px;
555 } 570 }
556 } 571 }
557 } 572 }
558 .D2 { 573 .D2 {
559 font-size: 14px; 574 font-size: 14px;
560 font-family: "PingFangSC-Regular"; 575 font-family: "PingFangSC-Regular";
561 view { 576 view {
562 height: 24px; 577 height: 24px;
563 } 578 }
564 .D2_span1 { 579 .D2_span1 {
565 color: #999999; 580 color: #999999;
566 } 581 }
567 .D2_span2 { 582 .D2_span2 {
568 color: #333333; 583 color: #333333;
569 } 584 }
570 } 585 }
571 .D3 { 586 .D3 {
572 .screenBar { 587 .screenBar {
573 width: 670rpx; 588 width: 670rpx;
574 margin-top: 20rpx; 589 margin-top: 20rpx;
575 margin-bottom: 24rpx; 590 margin-bottom: 24rpx;
576 display: flex; 591 display: flex;
577 flex-direction: row; 592 flex-direction: row;
578 justify-content: space-between; 593 justify-content: space-between;
579 align-items: center; 594 align-items: center;
580 font-size: 14px; 595 font-size: 14px;
581 color: #333333; 596 color: #333333;
582 transition: all 0.2s; 597 transition: all 0.2s;
583 } 598 }
584 .screen-item { 599 .screen-item {
585 font-size: 32rpx; 600 font-size: 32rpx;
586 color: #333333; 601 color: #333333;
587 display: flex; 602 display: flex;
588 transition: all 0.2s; 603 transition: all 0.2s;
589 .D3_list { 604 .D3_list {
590 margin-bottom: 4px; 605 margin-bottom: 4px;
591 } 606 }
592 .D3_list view { 607 .D3_list view {
593 display: flex; 608 display: flex;
594 align-content: center; 609 align-content: center;
595 font-size: 14px; 610 font-size: 14px;
596 color: #333333; 611 color: #333333;
597 } 612 }
598 .D3_list image { 613 .D3_list image {
599 width: 50px; 614 width: 50px;
600 height: 25px; 615 height: 25px;
601 margin-right: 6px; 616 margin-right: 6px;
602 } 617 }
603 .D3_list span { 618 .D3_list span {
604 margin-left: 6px; 619 margin-left: 6px;
605 margin-right: 5px; 620 margin-right: 5px;
606 font-family: "PingFangSC-Regular"; 621 font-family: "PingFangSC-Regular";
607 } 622 }
608 } 623 }
609 .active { 624 .active {
610 border-bottom: 4rpx solid #ff6b4a; 625 border-bottom: 4rpx solid #ff6b4a;
611 } 626 }
612 .customerService { 627 .customerService {
613 margin-bottom: 90rpx; 628 margin-bottom: 90rpx;
614 .serviceItem { 629 .serviceItem {
615 margin-bottom: 32rpx; 630 margin-bottom: 32rpx;
616 .title { 631 .title {
617 display: flex; 632 display: flex;
618 flex-direction: row; 633 flex-direction: row;
619 align-items: center; 634 align-items: center;
620 .titleText { 635 .titleText {
621 font-size: 14px; 636 font-size: 14px;
622 color: #333333; 637 color: #333333;
623 margin-bottom: 12rpx; 638 margin-bottom: 12rpx;
624 } 639 }
625 } 640 }
626 .itemContent { 641 .itemContent {
627 font-size: 14px; 642 font-size: 14px;
628 color: #999999; 643 color: #999999;
629 margin-left: 18rpx; 644 margin-left: 18rpx;
630 } 645 }
631 } 646 }
632 .serviceItem2 { 647 .serviceItem2 {
633 margin-left: 18rpx; 648 margin-left: 18rpx;
634 margin-bottom: 32rpx; 649 margin-bottom: 32rpx;
635 .titleText { 650 .titleText {
636 font-size: 14px; 651 font-size: 14px;
637 color: #ff6b4a; 652 color: #ff6b4a;
638 } 653 }
639 .itemContent { 654 .itemContent {
640 font-size: 14px; 655 font-size: 14px;
641 color: #999999; 656 color: #999999;
642 .itemContent-child { 657 .itemContent-child {
643 margin-bottom: 40rpx; 658 margin-bottom: 40rpx;
644 .contentTitle { 659 .contentTitle {
645 border-bottom: 1px solid #ff6b4a; 660 border-bottom: 1px solid #ff6b4a;
646 } 661 }
647 } 662 }
648 } 663 }
649 } 664 }
650 } 665 }
651 } 666 }
652 .D4 { 667 .D4 {
653 .D4_esvalue { 668 .D4_esvalue {
654 font-size: 14px; 669 font-size: 14px;
655 color: #333333; 670 color: #333333;
656 display: flex; 671 display: flex;
657 justify-content: space-between; 672 justify-content: space-between;
658 margin-bottom: 10px; 673 margin-bottom: 10px;
659 .D4_2 { 674 .D4_2 {
660 width: 90px; 675 width: 90px;
661 display: flex; 676 display: flex;
662 align-items: center; 677 align-items: center;
663 justify-content: space-between; 678 justify-content: space-between;
664 } 679 }
665 } 680 }
666 .D4_esvalue view { 681 .D4_esvalue view {
667 font-size: 14px; 682 font-size: 14px;
668 color: #333333; 683 color: #333333;
669 font-weight: bold; 684 font-weight: bold;
670 } 685 }
671 .D4_list{ 686 .D4_list{
672 display: grid; 687 display: grid;
673 grid-row-gap: 10px; 688 grid-row-gap: 10px;
674 grid-column-gap: 4px; 689 grid-column-gap: 4px;
675 } 690 }
676 .D4_list view { 691 .D4_list view {
677 display: flex; 692 display: flex;
678 justify-content: center; 693 justify-content: center;
679 align-items: center; 694 align-items: center;
680 font-size: 12px; 695 font-size: 12px;
681 width: 118px; 696 width: 118px;
682 height: 24px; 697 height: 24px;
683 border-radius: 2px; 698 border-radius: 2px;
684 background: #f2f2f2; 699 background: #f2f2f2;
685 color: #666666; 700 color: #666666;
686 // letter-spacing: 1px; 701 // letter-spacing: 1px;
687 } 702 }
688 } 703 }
689 .D5 { 704 .D5 {
690 .D5_fixed1 { 705 .D5_fixed1 {
691 display: flex; 706 display: flex;
692 justify-content: space-between; 707 justify-content: space-between;
693 align-content: center; 708 align-content: center;
694 margin-bottom: 12px; 709 margin-bottom: 12px;
695 view { 710 view {
696 font-size: 14px; 711 font-size: 14px;
697 color: #333333; 712 color: #333333;
698 font-weight: bold; 713 font-weight: bold;
699 font-family: "PingFangSC-Medium"; 714 font-family: "PingFangSC-Medium";
700 line-height: 24px; 715 line-height: 24px;
701 } 716 }
702 image { 717 image {
703 width: 240rpx; 718 width: 240rpx;
704 height: 3px; 719 height: 3px;
705 margin-top: 10px; 720 margin-top: 10px;
706 } 721 }
707 } 722 }
708 .D5_all { 723 .D5_all {
709 width: 100%; 724 width: 100%;
710 margin-top: 30rpx; 725 margin-top: 30rpx;
711 margin-right: 30rpx; 726 margin-right: 30rpx;
712 margin-bottom: 180rpx; 727 margin-bottom: 180rpx;
713 font-family: "PingFangSC-Regular"; 728 font-family: "PingFangSC-Regular";
714 // border: #999999 solid 1.5px; 729 // border: #999999 solid 1.5px;
715 } 730 }
716 } 731 }
717 .D6 { 732 .D6 {
718 width: 100%; 733 width: 100%;
719 height: 430px; 734 height: 430px;
720 background: #f9f6ed; 735 background: #f9f6ed;
721 margin-bottom: 74px; 736 margin-bottom: 74px;
722 view { 737 view {
723 text-align: center; 738 text-align: center;
724 } 739 }
725 .D6_v1 { 740 .D6_v1 {
726 font-weight: bold; 741 font-weight: bold;
727 } 742 }
728 .D6_v2 { 743 .D6_v2 {
729 font-size: 14px; 744 font-size: 14px;
730 margin-bottom: 30px; 745 margin-bottom: 30px;
731 } 746 }
732 .D6_v5 { 747 .D6_v5 {
733 .D6_v5_s1 { 748 .D6_v5_s1 {
734 font-weight: bold; 749 font-weight: bold;
735 } 750 }
736 .D6_v5_s2 { 751 .D6_v5_s2 {
737 font-size: 14px; 752 font-size: 14px;
738 } 753 }
739 } 754 }
740 } 755 }
741 .botton { 756 .botton {
742 position: fixed; 757 position: fixed;
743 bottom: 0; 758 bottom: 0;
744 height: 74px; 759 height: 74px;
745 width: 100%; 760 width: 100%;
746 background: #ffffff; 761 background: #ffffff;
747 padding: 20px 20px 8px 20px; 762 padding: 20px 20px 8px 20px;
748 font-family: "PingFangSC-Regular"; 763 font-family: "PingFangSC-Regular";
749 box-sizing: border-box; 764 box-sizing: border-box;
750 display: flex; 765 display: flex;
751 justify-content: space-between; 766 justify-content: space-between;
752 align-content: center; 767 align-content: center;
753 .botton_1 { 768 .botton_1 {
754 width: 20%; 769 width: 20%;
755 height: 100%; 770 height: 100%;
756 text-align: center; 771 text-align: center;
757 color: #989898; 772 color: #989898;
758 } 773 }
759 image { 774 image {
760 width: 60%; 775 width: 60%;
761 height: 30px; 776 height: 30px;
762 } 777 }
763 .botton_image { 778 .botton_image {
764 font-size: 12px; 779 font-size: 12px;
765 text-align: center; 780 text-align: center;
766 } 781 }
767 .botton_2 { 782 .botton_2 {
768 width: 74%; 783 width: 74%;
769 height: 86%; 784 height: 86%;
770 display: grid; 785 display: grid;
771 grid-template-columns: 50% 50%; 786 grid-template-columns: 50% 50%;
772 } 787 }
773 .botton_input { 788 .botton_input {
774 display: inline-flex; 789 display: inline-flex;
775 align-items: center; 790 align-items: center;
776 justify-content: space-around; 791 justify-content: space-around;
777 background: #fff0ec; 792 background: #fff0ec;
778 font-size: 16px; 793 font-size: 16px;
779 color: #ff6b4a; 794 color: #ff6b4a;
780 border-radius: 20px 0 0 20px; 795 border-radius: 20px 0 0 20px;
781 } 796 }
782 .botton_now { 797 .botton_now {
783 display: inline-flex; 798 display: inline-flex;
784 align-items: center; 799 align-items: center;
785 justify-content: space-around; 800 justify-content: space-around;
786 background: #ff6b4a; 801 background: #ff6b4a;
787 font-size: 16px; 802 font-size: 16px;
788 color: #ffffff; 803 color: #ffffff;
789 border-radius: 0 20px 20px 0; 804 border-radius: 0 20px 20px 0;
790 } 805 }
791 } 806 }
792 </style> 807 </style>
793 808
src/pages/index/index.vue
Diff comments   View file @2369ec7
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="header"> 3 <view class="header">
4 <!-- 搜索--> 4 <!-- 搜索-->
5 <view class="searchBar"> 5 <view class="searchBar">
6 <icon 6 <icon
7 class="searchIcon" 7 class="searchIcon"
8 type="search" 8 type="search"
9 size="14" 9 size="14"
10 ></icon> 10 ></icon>
11 <input 11 <input
12 v-model="searchText" 12 v-model="searchText"
13 class="searchIpt" 13 class="searchIpt"
14 placeholder="老花镜" 14 placeholder="老花镜"
15 confirm-type="search" 15 confirm-type="search"
16 @blur="searchKey" 16 @blur="searchKey"
17 /> 17 />
18 </view> 18 </view>
19 19
20 <!-- 筛选栏--> 20 <!-- 筛选栏-->
21 <!-- <view class="screenBar"> 21 <!-- <view class="screenBar">
22 <view 22 <view
23 v-for="item in screenItems" 23 v-for="item in screenItems"
24 :key="item.current" 24 :key="item.current"
25 @click="onClickItem(item.current)" 25 @click="onClickItem(item.current)"
26 > 26 >
27 <view 27 <view
28 class="screenItem" 28 class="screenItem"
29 v-bind:class="{ active: current === item.current }" 29 v-bind:class="{ active: current === item.current }"
30 v-if="item.current === 2" 30 v-if="item.current === 2"
31 @click="dropDown" 31 @click="dropDown"
32 > 32 >
33 {{ item.text }} 33 {{ item.text }}
34 <icon 34 <icon
35 type="info" 35 type="info"
36 size="14" 36 size="14"
37 ></icon> 37 ></icon>
38 </view> 38 </view>
39 <view 39 <view
40 class="screenItem" 40 class="screenItem"
41 v-bind:class="{ active: current === item.current }" 41 v-bind:class="{ active: current === item.current }"
42 v-if="item.current === 4" 42 v-if="item.current === 4"
43 @click="showDrawer('showRight')" 43 @click="showDrawer('showRight')"
44 > 44 >
45 {{ item.text }} 45 {{ item.text }}
46 <icon 46 <icon
47 type="info" 47 type="info"
48 size="14" 48 size="14"
49 ></icon> 49 ></icon>
50 </view> 50 </view>
51 <view v-if="item.current !== 2&&item.current!==4"> 51 <view v-if="item.current !== 2&&item.current!==4">
52 <view 52 <view
53 class="screenItem" 53 class="screenItem"
54 v-bind:class="{ active: current === item.current }" 54 v-bind:class="{ active: current === item.current }"
55 >{{ item.text }}</view> 55 >{{ item.text }}</view>
56 </view> 56 </view>
57 </view> 57 </view>
58 </view> --> 58 </view> -->
59 </view> 59 </view>
60 <Uni-drawer 60 <Uni-drawer
61 ref="showRight" 61 ref="showRight"
62 mask="true" 62 mask="true"
63 maskClick="true" 63 maskClick="true"
64 mode="right" 64 mode="right"
65 :width="320" 65 :width="320"
66 @change="change($event,'showRight')" 66 @change="change($event,'showRight')"
67 > 67 >
68 <view class="close"> 68 <view class="close">
69 <view @click="closeDrawer('showRight')"> 69 <view @click="closeDrawer('showRight')">
70 <text class="word-btn-white">关闭</text> 70 <text class="word-btn-white">关闭</text>
71 </view> 71 </view>
72 </view> 72 </view>
73 </Uni-drawer> 73 </Uni-drawer>
74 74
75 <!-- 筛选菜单--> 75 <!-- 筛选菜单-->
76 <view class="content-wrap"> 76 <view class="content-wrap">
77 <view> 77 <view>
78 <HMfilterDropdown 78 <HMfilterDropdown
79 :filterData="categoryList" 79 :filterData="categoryList"
80 :defaultSelected="filterDropdownValue" 80 :defaultSelected="filterDropdownValue"
81 :updateMenuName="true" 81 :updateMenuName="true"
82 @search="search" 82 @search="search"
83 @getList="getList" 83 @getList="getList"
84 data-format="Object" 84 data-format="Object"
85 ></HMfilterDropdown> 85 ></HMfilterDropdown>
86 <!-- 商品列表 --> 86 <!-- 商品列表 -->
87 <view class="goods-list"> 87 <view class="goods-list">
88 <view class="product-list"> 88 <view class="product-list">
89 <view 89 <view
90 class="product" 90 class="product"
91 v-for="(goods) in goodsList" 91 v-for="(goods) in goodsList"
92 :key="goods.id" 92 :key="goods.id"
93 > 93 >
94 <Card :goods="goods"></Card> 94 <Card :goods="goods"></Card>
95 </view> 95 </view>
96 </view> 96 </view>
97 <view class="loading-text">{{loadingText}}</view> 97 <view class="loading-text">{{loadingText}}</view>
98 </view> 98 </view>
99 </view> 99 </view>
100 </view> 100 </view>
101 </view> 101 </view>
102 </template> 102 </template>
103 103
104 <script> 104 <script>
105 import UniDrawer from '@/components/UniDrawer/UniDrawer.vue' 105 import UniDrawer from '@/components/UniDrawer/UniDrawer.vue'
106 import Card from '@/components/CommodityCard/CommodityCard.vue' 106 import Card from '@/components/CommodityCard/CommodityCard.vue'
107 import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue' 107 import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue'
108 import store from '@/store' 108 import store from '@/store'
109 109
110 export default { 110 export default {
111 components: { 111 components: {
112 UniDrawer: UniDrawer, 112 UniDrawer: UniDrawer,
113 HMfilterDropdown: HMfilterDropdown, 113 HMfilterDropdown: HMfilterDropdown,
114 Card: Card 114 Card: Card
115 }, 115 },
116 data () { 116 data () {
117 return { 117 return {
118 indexArr: '', 118 indexArr: '',
119 valueArr: '', 119 valueArr: '',
120 loadingText: '~~到底了~~', 120 loadingText: '~~到底了~~',
121 filterDropdownValue: [], 121 filterDropdownValue: [],
122 filterData: [], 122 filterData: [],
123 searchText: '' 123 searchText: ''
124 } 124 }
125 }, 125 },
126 computed: { 126 computed: {
127 goodsList () { 127 goodsList () {
128 // 也可以从 getters 获取 128 // 也可以从 getters 获取
129 // console.log('index-list=====>',this.$store.state.index.list)
129 return this.$store.state.index.list 130 return this.$store.state.index.list
130 }, 131 },
131 categoryList () { 132 categoryList () {
132 return this.$store.state.index.categoryList 133 return this.$store.state.index.categoryList
133 } 134 }
134 }, 135 },
135 filters: { 136 filters: {
136 outData (value) { 137 outData (value) {
137 return JSON.stringify(value) 138 return JSON.stringify(value)
138 } 139 }
139 }, 140 },
140 onLoad () { 141 onLoad () {
141 store.dispatch('index/category') 142 store.dispatch('index/category')
142 // this.getList(); 143 // this.getList();
143 store.dispatch('index/list') 144 store.dispatch('index/list')
144 }, 145 },
145 methods: { 146 methods: {
146 showDrawer (e) { 147 showDrawer (e) {
147 this.$refs[e].open() 148 this.$refs[e].open()
148 }, 149 },
149 getList () { 150 getList () {
150 store.dispatch('index/list') 151 store.dispatch('index/list')
151 }, 152 },
152 // search(params) { 153 // search(params) {
153 // this.$store.index. 154 // this.$store.index.
154 // }, 155 // },
155 closeDrawer (e) { 156 closeDrawer (e) {
156 this.$refs[e].close() 157 this.$refs[e].close()
157 }, 158 },
158 change (e, type) { 159 change (e, type) {
159 this[type] = e 160 this[type] = e
160 }, 161 },
161 onClickItem (e) { 162 onClickItem (e) {
162 if (this.current !== e) { 163 if (this.current !== e) {
163 this.current = e 164 this.current = e
164 } 165 }
165 }, 166 },
166 dropDown () { 167 dropDown () {
167 console.log('下拉') 168 console.log('下拉')
168 }, 169 },
169 searchKey (e) { 170 searchKey (e) {
170 const { value: keyword } = e.detail 171 const { value: keyword } = e.detail
171 this.keyWords = keyword 172 this.keyWords = keyword
172 store.dispatch('index/search', { 173 store.dispatch('index/search', {
173 params: {}, 174 params: {},
174 keyword 175 keyword
175 }) 176 })
176 }, 177 },
177 // 接收菜单结果 178 // 接收菜单结果
178 search (e) { 179 search (e) {
179 const { on, value, selectedData } = e 180 const { on, value, selectedData } = e
180 let params = {} 181 let params = {}
181 const selectedPayload = {} 182 const selectedPayload = {}
182 for (const key in selectedData) { 183 for (const key in selectedData) {
183 if (Object.prototype.hasOwnProperty.call(selectedData, key)) { 184 if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
184 selectedPayload[key] = selectedData[key].toString() 185 selectedPayload[key] = selectedData[key].toString()
185 } 186 }
186 } 187 }
187 if (on[0] === 1) { 188 if (on[0] === 1) {
188 // 若点击全部 189 // 若点击全部
189 this.searchText = '' 190 this.searchText = ''
190 store.dispatch('index/list') 191 store.dispatch('index/list')
191 } else { 192 } else {
192 for (let i = 1; i <= on.length; i++) { // on[0]是全部 193 for (let i = 1; i <= on.length; i++) { // on[0]是全部
193 if (on[i] === 1) { // 若该选项被选中 194 if (on[i] === 1) { // 若该选项被选中
194 if (this.categoryList[i].value === 'filter') { 195 if (this.categoryList[i].value === 'filter') {
195 params = { 196 params = {
196 ...selectedPayload, 197 ...selectedPayload,
197 ...params 198 ...params
198 } 199 }
199 } else { 200 } else {
200 params[`${this.categoryList[i].value}`] = value[i][0] 201 params[`${this.categoryList[i].value}`] = value[i][0]
201 } 202 }
202 } 203 }
203 } 204 }
204 store.dispatch('index/search', { 205 store.dispatch('index/search', {
205 params, 206 params,
206 keyword: this.keyWords 207 keyword: this.keyWords
207 }) 208 })
208 } 209 }
209 } 210 }
210 } 211 }
211 212
212 } 213 }
213 </script> 214 </script>
214 215
215 <style lang="scss"> 216 <style lang="scss">
216 .content { 217 .content {
217 display: flex; 218 display: flex;
218 flex-direction: column; 219 flex-direction: column;
219 align-items: center; 220 align-items: center;
220 justify-content: center; 221 justify-content: center;
221 background-color: #f7f6f6; 222 background-color: #f7f6f6;
222 } 223 }
223 .header { 224 .header {
224 display: flex; 225 display: flex;
225 flex-direction: column; 226 flex-direction: column;
226 align-items: center; 227 align-items: center;
227 justify-content: center; 228 justify-content: center;
228 background-color: #f7f6f6; 229 background-color: #f7f6f6;
229 height: 178rpx; 230 height: 178rpx;
230 width: 100%; 231 width: 100%;
231 z-index: 999; 232 z-index: 999;
232 position: fixed; 233 position: fixed;
233 top: 0; 234 top: 0;
234 left: 0; 235 left: 0;
235 } 236 }
236 .searchBar { 237 .searchBar {
237 width: 670rpx; 238 width: 670rpx;
238 display: flex; 239 display: flex;
239 justify-content: center; 240 justify-content: center;
240 align-items: center; 241 align-items: center;
241 box-sizing: border-box; 242 box-sizing: border-box;
242 padding: 0rpx 16rpx; 243 padding: 0rpx 16rpx;
243 border: 1px solid #ff6b4a; 244 border: 1px solid #ff6b4a;
244 border-radius: 8rpx; 245 border-radius: 8rpx;
245 background-color: #ffffff; 246 background-color: #ffffff;
246 } 247 }
247 248
248 .searchIpt { 249 .searchIpt {
249 height: 68rpx; 250 height: 68rpx;
250 width: 670rpx; 251 width: 670rpx;
251 padding: 16rpx; 252 padding: 16rpx;
252 font-size: 28rpx; 253 font-size: 28rpx;
253 box-sizing: border-box; 254 box-sizing: border-box;
254 } 255 }
255 .screenBar { 256 .screenBar {
256 width: 670rpx; 257 width: 670rpx;
257 height: 110rpx; 258 height: 110rpx;
258 display: flex; 259 display: flex;
259 flex-direction: row; 260 flex-direction: row;
260 justify-content: space-between; 261 justify-content: space-between;
261 align-items: center; 262 align-items: center;
262 color: #333333; 263 color: #333333;
263 font-size: 32rpx; 264 font-size: 32rpx;
264 } 265 }
265 .active { 266 .active {
266 color: #ff6b4a; 267 color: #ff6b4a;
267 } 268 }
268 .screenItem { 269 .screenItem {
269 display: flex; 270 display: flex;
270 justify-content: center; 271 justify-content: center;
271 align-items: center; 272 align-items: center;
272 } 273 }
273 .content-wrap { 274 .content-wrap {
274 width: 100%; 275 width: 100%;
275 background-color: #ffffff; 276 background-color: #ffffff;
276 } 277 }
277 278
278 .HMfilterDropdown { 279 .HMfilterDropdown {
279 top: 178rpx !important; 280 top: 178rpx !important;
280 } 281 }
281 282
282 .goods-list { 283 .goods-list {
283 padding-top: 286rpx; 284 padding-top: 286rpx;
284 .loading-text { 285 .loading-text {
285 width: 100%; 286 width: 100%;
286 display: flex; 287 display: flex;
287 justify-content: center; 288 justify-content: center;
288 align-items: center; 289 align-items: center;
289 height: 30px; 290 height: 30px;
290 color: #979797; 291 color: #979797;
291 font-size: 12px; 292 font-size: 12px;
292 } 293 }
293 .product-list { 294 .product-list {
294 width: 92%; 295 width: 92%;
295 padding: 0 4% 3vw 4%; 296 padding: 0 4% 3vw 4%;
296 display: flex; 297 display: flex;
297 justify-content: space-between; 298 justify-content: space-between;
298 flex-wrap: wrap; 299 flex-wrap: wrap;
299 .product { 300 .product {
300 width: 48%; 301 width: 48%;
301 margin: 0 0 20rpx 0; 302 margin: 0 0 20rpx 0;
302 background: #ffffff; 303 background: #ffffff;
303 border: 1px solid #f2f2f2; 304 border: 1px solid #f2f2f2;
304 } 305 }
305 } 306 }
306 } 307 }
307 </style> 308 </style>
308 309
src/pages/myOrder/myOrder.vue
Diff comments   View file @2369ec7
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="header"> 3 <view class="header">
4 <!-- 搜索--> 4 <!-- 搜索-->
5 <!-- <view class="searchBar"> 5 <!-- <view class="searchBar">
6 <icon class="searchIcon" type="search" size="14"></icon> 6 <icon class="searchIcon" type="search" size="14"></icon>
7 <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> 7 <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
8 </view> --> 8 </view> -->
9 <view class="screenBar"> 9 <view class="screenBar">
10 <view 10 <view
11 v-for="item in screenItems" 11 v-for="item in screenItems"
12 :key="item.current" 12 :key="item.current"
13 @click="onClickItem(item.current)" 13 @click="onClickItem(item.current)"
14 > 14 >
15 <view 15 <view
16 class="screenItem" 16 class="screenItem"
17 v-bind:class="{ active: current === item.current }" 17 v-bind:class="{ active: current === item.current }"
18 >{{ item.text }}</view> 18 >{{ item.text }}</view>
19 </view> 19 </view>
20 </view> 20 </view>
21 </view> 21 </view>
22 <view class="orderList"> 22 <view class="orderList">
23 <view 23 <view
24 v-for="(order) in orderList" 24 v-for="(order) in orderList"
25 :key="order.orderId" 25 :key="order.orderId"
26 > 26 >
27 <OrderCard 27 <OrderCard
28 :order="order" 28 :order="order"
29 :current="current" 29 :current="current"
30 ></OrderCard> 30 ></OrderCard>
31 </view> 31 </view>
32 </view> 32 </view>
33 <view class="footer">没有更多订单了，去商城看看吧~</view> 33 <view class="footer">没有更多订单了，去商城看看吧~</view>
34 </view> 34 </view>
35 </template> 35 </template>
36 <script> 36 <script>
37 import OrderCard from './components/OrderCard.vue' 37 import OrderCard from './components/OrderCard.vue'
38 import store from '@/store' 38 import store from '@/store'
39 39
40 export default { 40 export default {
41 components: { 41 components: {
42 OrderCard: OrderCard 42 OrderCard: OrderCard,
43 }, 43 },
44 data() { 44 data() {
45 return { 45 return {
46 // 顶部筛选项 46 // 顶部筛选项
47 screenItems: [ 47 screenItems: [
48 { current: '10', text: '全部' }, 48 { current: '10', text: '全部' },
49 { current: '0', text: '待付款' }, 49 { current: '0', text: '待付款' },
50 { current: '1', text: '待收货' }, 50 { current: '1', text: '待收货' },
51 { current: '2', text: '已完成' } 51 { current: '2', text: '已完成' },
52 // {current:"3",text:'已评价'}, 52 // {current:"3",text:'已评价'},
53 // {current:"4",text:'退款'}, 53 // {current:"4",text:'退款'},
54 ], 54 ],
55 // 当前所在item 默认10-->全部 55 // 当前所在item 默认10-->全部
56 current: '10' 56 current: '10',
57 } 57 }
58 }, 58 },
59 59
60 onLoad: function(option) { 60 onLoad: function(option) {
61 // 获取订单列表 61 // 获取订单列表
62 store.dispatch('myOrder/getList', { 62 store.dispatch('myOrder/getList', {
63 uid: '1', 63 way: '',
64 way: ''
65 }) 64 })
66 // 从user过来传的status，给current，以显示对应item 65 // 从user过来传的status，给current，以显示对应item
67 this.current = option.status 66 this.current = option.status
68 }, 67 },
69 computed: { 68 computed: {
70 orderList() { 69 orderList() {
71 // console.log('orderList', this.$store.state.myOrder.orderList); 70 // console.log('orderList', this.$store.state.myOrder.orderList);
72 return this.$store.state.myOrder.orderList 71 return this.$store.state.myOrder.orderList
73 } 72 },
74 }, 73 },
75 methods: { 74 methods: {
76 // tab点击事件 75 // tab点击事件
77 onClickItem(e) { 76 onClickItem(e) {
78 if (this.current !== e) { 77 if (this.current !== e) {
79 this.current = e 78 this.current = e
80 } 79 }
81 } 80 },
82 81
83 } 82 },
84 } 83 }
85 </script> 84 </script>
86 85
87 <style lang="scss"> 86 <style lang="scss">
88 .content { 87 .content {
89 display: flex; 88 display: flex;
90 flex-direction: column; 89 flex-direction: column;
91 align-items: center; 90 align-items: center;
92 background-color: #f7f6f6; 91 background-color: #f7f6f6;
93 min-height: 100vh; 92 min-height: 100vh;
94 .header { 93 .header {
95 background-color: #ffffff; 94 background-color: #ffffff;
96 width: 100%; 95 width: 100%;
97 // height: 232rpx; 96 // height: 232rpx;
98 padding: 20rpx 40rpx 16rpx 40rpx; 97 padding: 20rpx 40rpx 16rpx 40rpx;
99 box-sizing: border-box; 98 box-sizing: border-box;
100 position: fixed; 99 position: fixed;
101 top: 0; 100 top: 0;
102 left: 0; 101 left: 0;
103 // .searchBar { 102 // .searchBar {
104 // width: 670rpx; 103 // width: 670rpx;
105 // display: flex; 104 // display: flex;
106 // justify-content: center; 105 // justify-content: center;
107 // align-items: center; 106 // align-items: center;
108 // box-sizing: border-box; 107 // box-sizing: border-box;
109 // padding: 0rpx 16rpx; 108 // padding: 0rpx 16rpx;
110 // border: 1px solid #ff6b4a; 109 // border: 1px solid #ff6b4a;
111 // border-radius: 8rpx; 110 // border-radius: 8rpx;
112 // background-color: #ffffff; 111 // background-color: #ffffff;
113 // } 112 // }
114 113
115 .screenBar { 114 .screenBar {
116 width: 670rpx; 115 width: 670rpx;
117 // height: 110rpx; 116 // height: 110rpx;
118 height: 70rpx; 117 height: 70rpx;
119 display: flex; 118 display: flex;
120 flex-direction: row; 119 flex-direction: row;
121 justify-content: space-between; 120 justify-content: space-between;
122 align-items: center; 121 align-items: center;
123 color: #333333; 122 color: #333333;
124 font-size: 32rpx; 123 font-size: 32rpx;
125 } 124 }
126 .screenItem { 125 .screenItem {
127 height: 50rpx; 126 height: 50rpx;
128 font-size: 32rpx; 127 font-size: 32rpx;
129 color: #333333; 128 color: #333333;
130 display: flex; 129 display: flex;
131 justify-content: center; 130 justify-content: center;
132 align-items: center; 131 align-items: center;
133 transition: all 0.2s; 132 transition: all 0.2s;
134 } 133 }
135 .active { 134 .active {
136 // font-size: 34rpx; 135 // font-size: 34rpx;
137 color: #ec5d3b; 136 color: #ec5d3b;
138 } 137 }
139 .searchIpt { 138 .searchIpt {
140 height: 68rpx; 139 height: 68rpx;
141 width: 670rpx; 140 width: 670rpx;
142 padding: 16rpx; 141 padding: 16rpx;
143 font-size: 28rpx; 142 font-size: 28rpx;
144 box-sizing: border-box; 143 box-sizing: border-box;
145 } 144 }
146 } 145 }
147 .orderList { 146 .orderList {
148 // margin-top: 232rpx; 147 // margin-top: 232rpx;
149 margin-top: 132rpx; 148 margin-top: 132rpx;
150 } 149 }
151 .footer { 150 .footer {
152 font-size: 14px; 151 font-size: 14px;
153 color: #b8b8b8; 152 color: #b8b8b8;
154 margin: 40rpx 0; 153 margin: 40rpx 0;
155 } 154 }
156 } 155 }
157 </style> 156 </style>
158 157
src/pages/purchaseLenses/purchaseLenses.vue
Diff comments   View file @2369ec7
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="goodInfo"> 3 <view class="goodInfo">
4 <view class="imageWrap"> 4 <view class="imageWrap">
5 <image 5 <image
6 src="../../static/img/detail/d1.png" 6 src="../../static/img/detail/d1.png"
7 mode="aspectFill" 7 mode="aspectFill"
8 style="width: 188rpx;height: 168rpx;" 8 style="width: 188rpx;height: 168rpx;"
9 ></image> 9 ></image>
10 </view> 10 </view>
11 <view class="infoRight"> 11 <view class="infoRight">
12 <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text> 12 <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text>
13 <text class="remarks">支持7天无理由退货 顺丰发货</text> 13 <text class="remarks">支持7天无理由退货 顺丰发货</text>
14 <view class="priceBox"> 14 <view class="priceBox">
15 <view class="price">￥198</view> 15 <view class="price">￥198</view>
16 <text>(限购{{maxCount}}副)</text> 16 <text>(限购{{maxCount}}副)</text>
17 <view class="counter"> 17 <view class="counter">
18 <view 18 <view
19 class="btn" 19 class="btn"
20 disabled="this.addDisabled" 20 disabled="this.addDisabled"
21 type="default" 21 type="default"
22 @click="counter(false)" 22 @click="counter(false)"
23 >-</view> 23 >-</view>
24 <text>{{count}}</text> 24 <text>{{count}}</text>
25 <view 25 <view
26 class="btn" 26 class="btn"
27 disabled="this.desDisabled" 27 disabled="this.desDisabled"
28 type="default" 28 type="default"
29 @click="counter(true)" 29 @click="counter(true)"
30 >+</view> 30 >+</view>
31 </view> 31 </view>
32 </view> 32 </view>
33 </view> 33 </view>
34 </view> 34 </view>
35 <view class="goods-data"> 35 <view class="goods-data">
36 <view class="opCollapse"> 36 <view class="opCollapse">
37 <view class="body"> 37 <view class="body">
38 <template v-if="opIsOpen"> 38 <template v-if="opIsOpen">
39 <view class="goods-form"> 39 <view class="goods-form">
40 <view class="p1"> 40 <view class="p1">
41 <image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image> 41 <image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
42 填写验光数据 42 填写验光数据
43 </view> 43 </view>
44 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> 44 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
45 <view class="picker"> 45 <view class="picker">
46 <view class="picker-choice"> 46 <view class="picker-choice">
47 <view class="choice-left"> 47 <view class="choice-left">
48 <text class="pd">验光单取名:</text> 48 <text class="pd">验光单取名:</text>
49 </view> 49 </view>
50 <input type="text" @blur="handleInput" class="input" 50 <input type="text" @blur="handleInput" class="input"
51 placeholder="请输入名称" maxlength="20" :value="name" /> 51 placeholder="请输入名称" maxlength="20" :value="name" />
52 </view> 52 </view>
53 </view> 53 </view>
54 <view class="picker" > 54 <view class="picker" >
55 <view class="picker-choice"> 55 <view class="picker-choice">
56 <view class="choice-left"> 56 <view class="choice-left">
57 <text class="p11">{{pickerInfoList[0].nameC}}</text> 57 <text class="p11">{{pickerInfoList[0].nameC}}</text>
58 <text class="p12">{{pickerInfoList[0].nameE}}</text> 58 <text class="p12">{{pickerInfoList[0].nameE}}</text>
59 </view> 59 </view>
60 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 60 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
61 <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> --> 61 <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
62 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> 62 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
63 <view class="p14"> 63 <view class="p14">
64 {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}} 64 {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
65 <image src="../../static/detail-tabicon.png" ></image> 65 <image src="../../static/detail-tabicon.png" ></image>
66 </view> 66 </view>
67 <!-- <image src="../../static/detail-tabicon.png" ></image> --> 67 <!-- <image src="../../static/detail-tabicon.png" ></image> -->
68 </picker> 68 </picker>
69 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 69 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
70 <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> --> 70 <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
71 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> 71 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
72 <view class="p14"> 72 <view class="p14">
73 {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}} 73 {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
74 <image src="../../static/detail-tabicon.png" ></image> 74 <image src="../../static/detail-tabicon.png" ></image>
75 </view> 75 </view>
76 <!-- <image src="../../static/detail-tabicon.png" ></image> --> 76 <!-- <image src="../../static/detail-tabicon.png" ></image> -->
77 </picker> 77 </picker>
78 </view> 78 </view>
79 </view> 79 </view>
80 <view class="picker" > 80 <view class="picker" >
81 <view class="picker-choice"> 81 <view class="picker-choice">
82 <view class="choice-left"> 82 <view class="choice-left">
83 <text class="p11">{{pickerInfoList[1].nameC}}</text> 83 <text class="p11">{{pickerInfoList[1].nameC}}</text>
84 <text class="p12">{{pickerInfoList[1].nameE}}</text> 84 <text class="p12">{{pickerInfoList[1].nameE}}</text>
85 </view> 85 </view>
86 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 86 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
87 <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> --> 87 <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
88 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> 88 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
89 <view class="p14"> 89 <view class="p14">
90 {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}} 90 {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
91 <image src="../../static/detail-tabicon.png" ></image> 91 <image src="../../static/detail-tabicon.png" ></image>
92 </view> 92 </view>
93 <!-- <image src="../../static/detail-tabicon.png" ></image> --> 93 <!-- <image src="../../static/detail-tabicon.png" ></image> -->
94 </picker> 94 </picker>
95 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 95 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
96 <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> --> 96 <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
97 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> 97 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
98 <view class="p14"> 98 <view class="p14">
99 {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}} 99 {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
100 <image src="../../static/detail-tabicon.png" ></image> 100 <image src="../../static/detail-tabicon.png" ></image>
101 </view> 101 </view>
102 <!-- <image src="../../static/detail-tabicon.png" ></image> --> 102 <!-- <image src="../../static/detail-tabicon.png" ></image> -->
103 </picker> 103 </picker>
104 </view> 104 </view>
105 </view> 105 </view>
106 <view class="picker" > 106 <view class="picker" >
107 <view class="picker-choice"> 107 <view class="picker-choice">
108 <view class="choice-left"> 108 <view class="choice-left">
109 <text class="p11">{{pickerInfoList[2].nameC}}</text> 109 <text class="p11">{{pickerInfoList[2].nameC}}</text>
110 <text class="p12">{{pickerInfoList[2].nameE}}</text> 110 <text class="p12">{{pickerInfoList[2].nameE}}</text>
111 </view> 111 </view>
112 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 112 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
113 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> 113 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
114 <view class="p14"> 114 <view class="p14">
115 {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}} 115 {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
116 <image src="../../static/detail-tabicon.png" ></image> 116 <image src="../../static/detail-tabicon.png" ></image>
117 </view> 117 </view>
118 </picker> 118 </picker>
119 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 119 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
120 <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> --> 120 <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
121 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> 121 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
122 <view class="p14"> 122 <view class="p14">
123 {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}} 123 {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
124 <image src="../../static/detail-tabicon.png" ></image> 124 <image src="../../static/detail-tabicon.png" ></image>
125 </view> 125 </view>
126 <!-- <image src="../../static/detail-tabicon.png" ></image> --> 126 <!-- <image src="../../static/detail-tabicon.png" ></image> -->
127 </picker> 127 </picker>
128 </view> 128 </view>
129 </view> 129 </view>
130 <view class="picker"> 130 <view class="picker">
131 <view class="picker-choice"> 131 <view class="picker-choice">
132 <view class="choice-left"> 132 <view class="choice-left">
133 <text class="pd">瞳距:</text> 133 <text class="pd">瞳距:</text>
134 </view> 134 </view>
135 <input type="digit" @change="handleInputPd" class="input" 135 <input type="digit" @change="handleInputPd" class="input"
136 placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" /> 136 placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
137 </view> 137 </view>
138 </view> 138 </view>
139 <view class="picker" > 139 <view class="picker" >
140 <view class="picker-choice"> 140 <view class="picker-choice">
141 <view class="choice-left"> 141 <view class="choice-left">
142 <text class="p11">{{pickerInfoList[3].nameC}}</text> 142 <text class="p11">{{pickerInfoList[3].nameC}}</text>
143 </view> 143 </view>
144 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text> 144 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
145 <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> 145 <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
146 <view class="p14" style="width: 30px;"> 146 <view class="p14" style="width: 30px;">
147 {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}} 147 {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
148 <image src="../../static/detail-tabicon.png" ></image> 148 <image src="../../static/detail-tabicon.png" ></image>
149 </view> 149 </view>
150 </picker> 150 </picker>
151 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text> 151 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
152 <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> 152 <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
153 <view class="p14" style="width: 30px;"> 153 <view class="p14" style="width: 30px;">
154 {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}} 154 {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
155 <image src="../../static/detail-tabicon.png" ></image> 155 <image src="../../static/detail-tabicon.png" ></image>
156 </view> 156 </view>
157 </picker> 157 </picker>
158 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text> 158 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
159 <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3"> 159 <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
160 <view class="p14" style="width: 30px;"> 160 <view class="p14" style="width: 30px;">
161 {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}} 161 {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
162 <image src="../../static/detail-tabicon.png" ></image> 162 <image src="../../static/detail-tabicon.png" ></image>
163 </view> 163 </view>
164 </picker> 164 </picker>
165 </view> 165 </view>
166 </view> 166 </view>
167 <view class="confirm"> 167 <view class="confirm">
168 <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image> 168 <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
169 <text>确认以上输入信息来源于我的验光数据!</text> 169 <text>确认以上输入信息来源于我的验光数据!</text>
170 </view> 170 </view>
171 </view> 171 </view>
172 </template> 172 </template>
173 <template v-else> 173 <template v-else>
174 <view 174 <view
175 v-for="item in pickerInfoList" 175 v-for="item in pickerInfoList"
176 :key="item.key" 176 :key="item.key"
177 class="bodyBox" 177 class="bodyBox"
178 > 178 >
179 <template v-if="item.nameC==='验光日期'"> 179 <template v-if="item.nameC==='验光日期'">
180 <text class="names">{{item.nameC}}</text> 180 <text class="names">{{item.nameC}}</text>
181 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> 181 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
182 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> 182 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
183 <text>{{item.nameArray3[item.nameIndex2]}}日</text> 183 <text>{{item.nameArray3[item.nameIndex2]}}日</text>
184 </template> 184 </template>
185 <template v-else> 185 <template v-else>
186 <template v-if="item.nameC==='度数'"> 186 <template v-if="item.nameC==='度数'">
187 <text style="display: inline;">*</text> 187 <text style="display: inline;">*</text>
188 </template> 188 </template>
189 189
190 <text class="names">{{item.nameC}}</text> 190 <text class="names">{{item.nameC}}</text>
191 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text> 191 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
192 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text> 192 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
193 </template> 193 </template>
194 </view> 194 </view>
195 </template> 195 </template>
196 </view> 196 </view>
197 </view> 197 </view>
198 </view> 198 </view>
199 <view class="choose"> 199 <view class="choose">
200 <view 200 <view
201 class="chooseItem_1_content" 201 class="chooseItem_1_content"
202 v-for="(item,index) in attrList" 202 v-for="(item,index) in attrList"
203 :key="index" 203 :key="index"
204 > 204 >
205 <UniCollapse @change="change(index)"> 205 <UniCollapse @change="changeShow(index)">
206 <UniCollapseItem 206 <UniCollapseItem
207 :open="show[index]" 207 :open="show[index]"
208 :title="item.meta_name" 208 :title="item.meta_name"
209 showAnimation=false 209 showAnimation=false
210 > 210 >
211 <view class="chooseItem_1_content"> 211 <view class="chooseItem_1_content">
212 <view class="itemsWrap"> 212 <view class="itemsWrap">
213 <view 213 <view
214 class="item2" 214 class="item2"
215 v-for="(one,i) in item.attr" 215 v-for="(one,i) in item.attr"
216 :key="i" 216 :key="i"
217 :class="{ active2: current[index] === i }" 217 :class="{ active2: current[index] === i }"
218 @click="onClickItem(index, i)" 218 @click="onClickItem(index, i)"
219 >{{one.name}}</view> 219 >{{one.name}}</view>
220 </view> 220 </view>
221 </view> 221 </view>
222 </UniCollapseItem> 222 </UniCollapseItem>
223 </UniCollapse> 223 </UniCollapse>
224 <view 224 <view
225 class="chooseRes" 225 class="chooseRes"
226 v-show="!show[index]" 226 v-show="!show[index]"
227 >* {{attrList[index].attr[current[index]].name}}</view> 227 >* {{attrList[index].attr[current[index]].name}}</view>
228 </view> 228 </view>
229 <!-- <view class="chooseItem_1 chooseItem"> 229 <!-- <view class="chooseItem_1 chooseItem">
230 <UniCollapse @change="change(1)"> 230 <UniCollapse @change="change(1)">
231 <UniCollapseItem 231 <UniCollapseItem
232 open=true 232 open=true
233 title="款式挑选" 233 title="款式挑选"
234 showAnimation=false 234 showAnimation=false
235 > 235 >
236 <view 236 <view
237 class="chooseRes" 237 class="chooseRes"
238 v-show="show[1]" 238 v-show="show[1]"
239 >* {{chooseRes1}}</view> 239 >* {{chooseRes1}}</view>
240 <view class="chooseItem_1_content"> 240 <view class="chooseItem_1_content">
241 <view class="itemsWrap"> 241 <view class="itemsWrap">
242 <view 242 <view
243 class="item1" 243 class="item1"
244 v-for="(item,index) in chooseItem1" 244 v-for="(item,index) in chooseItem1"
245 :key="index" 245 :key="index"
246 :style="item.style" 246 :style="item.style"
247 :class="{ active1: current1 === index }" 247 :class="{ active1: current1 === index }"
248 @click="onClickItem1(index)" 248 @click="onClickItem1(index)"
249 ></view> 249 ></view>
250 </view> 250 </view>
251 </view> 251 </view>
252 </UniCollapseItem> 252 </UniCollapseItem>
253 </UniCollapse> 253 </UniCollapse>
254 <view 254 <view
255 class="chooseRes" 255 class="chooseRes"
256 v-show="show[1]" 256 v-show="show[1]"
257 >* {{chooseRes1}}</view> 257 >* {{chooseRes1}}</view>
258 </view> 258 </view>
259 <view class="chooseItem_2 chooseItem "> 259 <view class="chooseItem_2 chooseItem ">
260 <UniCollapse @change="change(2)"> 260 <UniCollapse @change="change(2)">
261 <UniCollapseItem 261 <UniCollapseItem
262 open=true 262 open=true
263 title="直径" 263 title="直径"
264 showAnimation=false 264 showAnimation=false
265 > 265 >
266 <view class="chooseItem_1_content"> 266 <view class="chooseItem_1_content">
267 <view class="itemsWrap"> 267 <view class="itemsWrap">
268 <view 268 <view
269 class="item2" 269 class="item2"
270 v-for="(item,index) in chooseItem2" 270 v-for="(item,index) in chooseItem2"
271 :key="index" 271 :key="index"
272 :class="{ active2: current2 === index }" 272 :class="{ active2: current2 === index }"
273 @click="onClickItem2(index)" 273 @click="onClickItem2(index)"
274 >{{item.num}}</view> 274 >{{item.num}}</view>
275 </view> 275 </view>
276 </view> 276 </view>
277 </UniCollapseItem> 277 </UniCollapseItem>
278 </UniCollapse> 278 </UniCollapse>
279 <view 279 <view
280 class="chooseRes" 280 class="chooseRes"
281 v-show="show[2]" 281 v-show="show[2]"
282 >* {{chooseRes2}}</view> 282 >* {{chooseRes2}}</view>
283 </view> 283 </view>
284 <view class="chooseItem_3 chooseItem"> 284 <view class="chooseItem_3 chooseItem">
285 <UniCollapse @change="change(3)"> 285 <UniCollapse @change="change(3)">
286 <UniCollapseItem 286 <UniCollapseItem
287 open=true 287 open=true
288 title="度数" 288 title="度数"
289 showAnimation=false 289 showAnimation=false
290 > 290 >
291 <view class="chooseItem_1_content"> 291 <view class="chooseItem_1_content">
292 <view class="itemsWrap"> 292 <view class="itemsWrap">
293 <view 293 <view
294 class="item2" 294 class="item2"
295 v-for="(item,index) in chooseItem3" 295 v-for="(item,index) in chooseItem3"
296 :key="index" 296 :key="index"
297 :class="{ active2: current3 === index }" 297 :class="{ active2: current3 === index }"
298 @click="onClickItem3(index)" 298 @click="onClickItem3(index)"
299 >{{item}}</view> 299 >{{item}}</view>
300 </view> 300 </view>
301 </view> 301 </view>
302 </UniCollapseItem> 302 </UniCollapseItem>
303 </UniCollapse> 303 </UniCollapse>
304 <view 304 <view
305 class="chooseRes" 305 class="chooseRes"
306 v-show="show[3]" 306 v-show="show[3]"
307 >* {{chooseRes3}}</view> 307 >* {{chooseRes3}}</view>
308 </view> --> 308 </view> -->
309 </view> 309 </view>
310 <view 310 <view
311 class="button" 311 class="button"
312 @click="toComfirmOrder" 312 @click="toComfirmOrder"
313 > 313 >
314 立即结算 314 立即结算
315 </view> 315 </view>
316 </view> 316 </view>
317 </template> 317 </template>
318 318
319 <script> 319 <script>
320 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' 320 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
321 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' 321 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
322 import store from '@/store' 322 import store from '@/store'
323 323
324 export default { 324 export default {
325 components: { 325 components: {
326 UniCollapse, 326 UniCollapse,
327 UniCollapseItem 327 UniCollapseItem,
328 }, 328 },
329 data() { 329 data() {
330 return { 330 return {
331 count: 1, 331 count: 1,
332 pid: 0, 332 pid: 0,
333 maxCount: 20, 333 maxCount: 20,
334 dataName: '', // 验光数据人员名称 334 dataName: '', // 验光数据人员名称
335 isDataName: false, // 是否是已存在的人员数据 335 isDataName: false, // 是否是已存在的人员数据
336 dataConfirm: false, // 已确认所输入验光数据 336 dataConfirm: false, // 已确认所输入验光数据
337 opIsOpen: true, 337 opIsOpen: true,
338 addDisabled: false, 338 addDisabled: false,
339 desDisabled: false, 339 desDisabled: false,
340 current1: 0, 340 current1: 0,
341 current2: 0, 341 current2: 0,
342 current3: 0, 342 current3: 0,
343 current: [], 343 current: [],
344 show: [], 344 show: [],
345 chooseRes1: { 345 chooseRes1: {
346 sku_name: 'Miss 黑二代【减龄自然】', 346 sku_name: 'Miss 黑二代【减龄自然】',
347 sk_id: '128' 347 sk_id: '128',
348 },
349 checkedData: {
350
351 }, 348 },
349 checkedData: {},
352 chooseRes2: '14.0', 350 chooseRes2: '14.0',
353 chooseRes3: 0, 351 chooseRes3: 0,
354 chooseItem1: [ 352 chooseItem1: [
355 { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' }, 353 { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' },
356 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' }, 354 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' },
357 { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' }, 355 { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' },
358 { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, 356 { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
359 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, 357 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
360 { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, 358 { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
361 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, 359 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
362 { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, 360 { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
363 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, 361 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
364 { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, 362 { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
365 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, 363 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
366 { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, 364 { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
367 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, 365 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
368 { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, 366 { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
369 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' } 367 { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
370 ], 368 ],
371 chooseItem2: [ 369 chooseItem2: [
372 { num: '14.0' }, 370 { num: '14.0' },
373 { num: '14.2' }, 371 { num: '14.2' },
374 { num: '14.4' }, 372 { num: '14.4' },
375 { num: '14.5' } 373 { num: '14.5' },
376 ], 374 ],
377 chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000], 375 chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000],
378 // 度数相关数据 376 // 度数相关数据
379 pickerInfoList:[ 377 pickerInfoList: [
380 {nameC:"度数",nameE:"(SPH)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:0}, 378 { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 },
381 {nameC:"散光",nameE:"(CYL)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:1}, 379 { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 },
382 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:2}, 380 { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 },
383 {nameC:"验光日期",nameE:'',nameArray1:[''],nameIndex1:0,nameArray2:['',1,2,3,4,5,6,7,8,9,10,11,12],nameIndex2:0,nameArray3:[''],nameIndex3:0} 381 { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 },
384 ], 382 ],
385 confirm: false, // 用户是否确认 383 confirm: false, // 用户是否确认
386 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], 384 tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
387 name: '夏小花', 385 name: '夏小花',
388 oldname:'',// 用于判读用户是否改变名字 386 oldname: '', // 用于判读用户是否改变名字
389 pickerInfoChioce:{ 387 pickerInfoChioce: {
390 "leftSph": '', 388 leftSph: '',
391 "rightSph": '', 389 rightSph: '',
392 "leftCyl": '', 390 leftCyl: '',
393 "rightCyl": '', 391 rightCyl: '',
394 "leftAxi": '', 392 leftAxi: '',
395 "rightAxi": '', 393 rightAxi: '',
396 "time":{ 394 time: {
397 "year":0, 395 year: 0,
398 "month": 0, 396 month: 0,
399 "day":0 , 397 day: 0,
400 } 398 },
401 }, 399 },
402 pd: '',// 瞳距 400 pd: '', // 瞳距
403 oldpd: '',// 用于判断用户是否改变瞳距 401 oldpd: '', // 用于判断用户是否改变瞳距
404 kinds:1, // kinds=1，提交为新增验光，2为修改 402 kinds: 1, // kinds=1，提交为新增验光，2为修改
405 mp_id: Number 403 mp_id: Number,
406 } 404 }
407 }, 405 },
408 computed: { 406 computed: {
409 attrList() { 407 attrList() {
410 return this.$store.state.read.goodInfo.attrList 408 return this.$store.state.read.goodInfo.attrList
411 }, 409 },
412 skuList() { 410 skuList() {
413 return this.$store.state.read.goodInfo.skuList 411 return this.$store.state.read.goodInfo.skuList
414 }, 412 },
415 mpList() { 413 mpList() {
416 return this.$store.state.myLoveList.loveList 414 return this.$store.state.myLoveList.loveList
417 } 415 },
418 }, 416 },
419 onLoad({ pid }) { 417 onLoad({ pid }) {
420 this.pid = pid 418 this.pid = pid
421 store.dispatch('read/fetch', { 419 store.dispatch('read/fetch', {
422 pid 420 pid,
423 }).then(() => { 421 }).then(() => {
424 const current = [] 422 const current = []
425 const show = [] 423 const show = []
426 for (let index = 0; index < this.attrList.length; index++) { 424 for (let index = 0; index < this.attrList.length; index++) {
427 current.push(0) 425 current.push(0)
428 show.push(true) 426 show.push(true)
429 } 427 }
430 this.current = current 428 this.current = current
431 this.show = show 429 this.show = show
432 }) 430 })
433 store.dispatch('myLoveList/getLoveList') 431 store.dispatch('myLoveList/getLoveList')
434 432
435 // 初始化SPL、CYL、AXI的值 433 // 初始化SPL、CYL、AXI的值
436 for (let j = 0; j < 3; j++) { 434 for (let j = 0; j < 3; j++) {
437 for(let i=-12;i<6;i++){ 435 for (let i = -12; i < 6; i++) {
438 this.pickerInfoList[j].nameArray1.push(i) 436 this.pickerInfoList[j].nameArray1.push(i)
439 this.pickerInfoList[j].nameArray1.push(i+0.5) 437 this.pickerInfoList[j].nameArray1.push(i + 0.5)
440 this.pickerInfoList[j].nameArray2.push(i) 438 this.pickerInfoList[j].nameArray2.push(i)
441 this.pickerInfoList[j].nameArray2.push(i+0.5) 439 this.pickerInfoList[j].nameArray2.push(i + 0.5)
442 if(i>=-6){ 440 if (i >= -6) {
443 this.pickerInfoList[j].nameArray1.push(i+0.25) 441 this.pickerInfoList[j].nameArray1.push(i + 0.25)
444 this.pickerInfoList[j].nameArray1.push(i+0.75) 442 this.pickerInfoList[j].nameArray1.push(i + 0.75)
445 this.pickerInfoList[j].nameArray2.push(i+0.25) 443 this.pickerInfoList[j].nameArray2.push(i + 0.25)
446 this.pickerInfoList[j].nameArray2.push(i+0.75) 444 this.pickerInfoList[j].nameArray2.push(i + 0.75)
447 } 445 }
448 if(i==5){ 446 if (i === 5) {
449 this.pickerInfoList[j].nameArray1.push(i+1) 447 this.pickerInfoList[j].nameArray1.push(i + 1)
450 this.pickerInfoList[j].nameArray2.push(i+1) 448 this.pickerInfoList[j].nameArray2.push(i + 1)
451 } 449 }
452 } 450 }
453 } 451 }
454 // 初始化日期值 452 // 初始化日期值
455 for (let i = 1; i < 32; i++){ 453 for (let i = 1; i < 32; i++) {
456 this.pickerInfoList[3].nameArray3.push(i) 454 this.pickerInfoList[3].nameArray3.push(i)
457 } 455 }
458 // 初始化年份前后五年 456 // 初始化年份前后五年
459 let myDate = new Date(); 457 const myDate = new Date()
460 let nowYear = myDate.getFullYear(); 458 const nowYear = myDate.getFullYear()
461 for(let i=0;i<5;i++){ 459 for (let i = 0; i < 5; i++) {
462 this.pickerInfoList[3].nameArray1.push(nowYear-i) 460 this.pickerInfoList[3].nameArray1.push(nowYear - i)
463 } 461 }
464 }, 462 },
465 methods: { 463 methods: {
466 // picker相关功能 464 // picker相关功能
467 handleInput(e){ 465 handleInput(e) {
468 this.name=e.target.value 466 this.name = e.target.value
469 this.isDataName = false 467 this.isDataName = false
470 console.log('e---->', e) 468 console.log('e---->', e)
471 const mpList = this.mpList 469 const mpList = this.mpList
472 console.log('mpList===>',mpList) 470 console.log('mpList===>', mpList)
473 for (let index = 0; index < mpList.length; index++) { 471 for (let index = 0; index < mpList.length; index++) {
474 if (e.detail.value === mpList[index].name) { 472 if (e.detail.value === mpList[index].name) {
475 this.isDataName = true 473 this.isDataName = true
476 uni.showModal({ 474 uni.showModal({
477 title: '提示', 475 title: '提示',
478 content: `是否填充已有的"${e.detail.value}"的数据`, 476 content: `是否填充已有的"${e.detail.value}"的数据`,
479 success: (res) => { 477 success: (res) => {
480 if (res.confirm) { 478 if (res.confirm) {
481 this.kinds=2 479 this.kinds = 2
482 console.log('args===>',index) 480 console.log('args===>', index)
483 // const mpList=Object.assign({},this.$store.state.mympList.mpList) 481 // const mpList=Object.assign({},this.$store.state.mympList.mpList)
484 console.log('mpList===>',mpList) 482 console.log('mpList===>', mpList)
485 this.name=mpList[index].name 483 this.name = mpList[index].name
486 this.pd=mpList[index].pd 484 this.pd = mpList[index].pd
487 this.mp_id=mpList[index].mp_id 485 this.mp_id = mpList[index].mp_id
488 this.oldname=mpList[index].name 486 this.oldname = mpList[index].name
489 this.oldpd=mpList[index].pd 487 this.oldpd = mpList[index].pd
490 // 将kinds =2时的值传到该页面 488 // 将kinds =2时的值传到该页面
491 this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph) 489 this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)
492 this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph) 490 this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)
493 this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl) 491 this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)
494 this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl) 492 this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)
495 this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi) 493 this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)
496 this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi) 494 this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)
497 495 this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4))
498 this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0,4)) 496 if (mpList[index].in_time.toString().slice(5, 6) === 0) {
499 if(mpList[index].in_time.toString().slice(5,6)==0){ 497 this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7))
500 this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6,7)) 498 } else {
501 } else{ 499 this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7))
502 this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5,7)) 500 }
503 } 501 if (mpList[index].in_time.toString().slice(8, 9) === 0) {
504 if(mpList[index].in_time.toString().slice(8,9)==0){ 502 this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10))
505 this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9,10)) 503 } else {
506 } else{ 504 this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10))
507 this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8,10)) 505 }
508 } 506 // this.checkedData = mpList[index]
509 // this.checkedData = mpList[index] 507 // console.log('checkedData', this.checkedData)
510 // console.log('checkedData', this.checkedData) 508 } else if (res.cancel) {
511 } else if(res.cancel){ 509 this.kinds = 2
512 this.kinds=2 510 }
513 } 511 },
514 } 512 })
515 }) 513 }
516 } 514 }
517 } 515 },
518 }, 516 handleInputPd(e) {
519 handleInputPd(e){ 517 // 只能输入正浮点数或正数
520 // 只能输入正浮点数或正数 518 if (/^\d+(\.\d+)?$/.test(e.target.value)) {
521 if(/^\d+(\.\d+)?$/.test(e.target.value)){ 519 this.pd = e.target.value
522 this.pd=e.target.value 520 } else {
523 } else { 521 uni.showToast({
524 uni.showToast({ 522 title: '请输入有效数据;示例:89',
525 title:"请输入有效数据;示例:89", 523 icon: 'none',
526 icon: "none", 524 duration: 2000,
527 duration: 2000, 525 })
528 }) 526 this.pd = ''
529 this.pd = '' 527 }
530 } 528 },
531
532 },
533 changeConfirm() { 529 changeConfirm() {
534 this.confirm = !this.confirm 530 this.confirm = !this.confirm
531 },
532 bindPickerChange01: function(e) {
533 this.pickerInfoList[0].nameIndex1 = e.target.value
534 this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value]
535 },
536 bindPickerChange02: function(e) {
537 this.pickerInfoList[0].nameIndex2 = e.target.value
538 this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value]
539 },
540
541 bindPickerChange11: function(e) {
542 this.pickerInfoList[1].nameIndex1 = e.target.value
543 this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value]
544 },
545 bindPickerChange12: function(e) {
546 this.pickerInfoList[1].nameIndex2 = e.target.value
547 this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value]
548 },
549
550 bindPickerChange21: function(e) {
551 this.pickerInfoList[2].nameIndex1 = e.target.value
552 this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value]
553 },
554 bindPickerChange22: function(e) {
555 this.pickerInfoList[2].nameIndex2 = e.target.value
556 this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value]
557 },
558
559 bindPickerChange41: function(e) {
560 this.pickerInfoList[3].nameIndex1 = e.target.value
561 this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value]
535 }, 562 },
536 bindPickerChange01: function(e) { 563 bindPickerChange42: function(e) {
537 this.pickerInfoList[0].nameIndex1 = e.target.value 564 this.pickerInfoList[3].nameIndex2 = e.target.value
538 this.pickerInfoChioce.leftSph=this.pickerInfoList[0].nameArray1[e.target.value] 565 this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value]
539 }, 566 },
540 bindPickerChange02: function(e) { 567 bindPickerChange43: function(e) {
541 this.pickerInfoList[0].nameIndex2 = e.target.value 568 this.pickerInfoList[3].nameIndex3 = e.target.value
542 this.pickerInfoChioce.rightSph=this.pickerInfoList[0].nameArray2[e.target.value] 569 this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value]
543 }, 570 },
544 571 changeShow(num) {
545 bindPickerChange11: function(e) {
546 this.pickerInfoList[1].nameIndex1 = e.target.value
547 this.pickerInfoChioce.leftCyl=this.pickerInfoList[1].nameArray1[e.target.value]
548 },
549 bindPickerChange12: function(e) {
550 this.pickerInfoList[1].nameIndex2 = e.target.value
551 this.pickerInfoChioce.rightCyl=this.pickerInfoList[1].nameArray2[e.target.value]
552 },
553
554 bindPickerChange21: function(e) {
555 this.pickerInfoList[2].nameIndex1 = e.target.value
556 this.pickerInfoChioce.leftAxi=this.pickerInfoList[2].nameArray1[e.target.value]
557 },
558 bindPickerChange22: function(e) {
559 this.pickerInfoList[2].nameIndex2 = e.target.value
560 this.pickerInfoChioce.rightAxi=this.pickerInfoList[2].nameArray2[e.target.value]
561 },
562
563 bindPickerChange41: function(e) {
564 this.pickerInfoList[3].nameIndex1 = e.target.value
565 this.pickerInfoChioce.time.year=this.pickerInfoList[3].nameArray1[e.target.value]
566 },
567 bindPickerChange42: function(e) {
568 this.pickerInfoList[3].nameIndex2 = e.target.value
569 this.pickerInfoChioce.time.month=this.pickerInfoList[3].nameArray2[e.target.value]
570 },
571 bindPickerChange43: function(e) {
572 this.pickerInfoList[3].nameIndex3 = e.target.value
573 this.pickerInfoChioce.time.day=this.pickerInfoList[3].nameArray3[e.target.value]
574 },
575
576 change(num) {
577 this.show[num] = !this.show[num] 572 this.show[num] = !this.show[num]
578 this.$forceUpdate() 573 this.$forceUpdate()
579 }, 574 },
580 onClickItem(index, i) { 575 onClickItem(index, i) {
581 if (this.current[index] !== i) { 576 if (this.current[index] !== i) {
582 this.current[index] = i 577 this.current[index] = i
583 } 578 }
584 this.$forceUpdate() 579 this.$forceUpdate()
585 }, 580 },
586 onClickItem1(index) { 581 // onClickItem1(index) {
587 if (this.current1 !== index) { 582 // if (this.current1 !== index) {
588 this.current1 = index 583 // this.current1 = index
589 this.chooseRes1 = this.chooseItem1[index].describ 584 // this.chooseRes1 = this.chooseItem1[index].describ
590 } 585 // }
591 }, 586 // },
592 onClickItem2(index) { 587 // onClickItem2(index) {
593 if (this.current2 !== index) { 588 // if (this.current2 !== index) {
594 this.current2 = index 589 // this.current2 = index
595 this.chooseRes2 = this.chooseItem2[index].num 590 // this.chooseRes2 = this.chooseItem2[index].num
596 } 591 // }
597 }, 592 // },
598 onClickItem3(index) { 593 // onClickItem3(index) {
599 if (this.current3 !== index) { 594 // if (this.current3 !== index) {
600 this.current3 = index 595 // this.current3 = index
601 this.chooseRes3 = this.chooseItem3[index] 596 // this.chooseRes3 = this.chooseItem3[index]
602 } 597 // }
603 }, 598 // },
604 counter(isadd) { 599 counter(isadd) {
605 if (isadd) { 600 if (isadd) {
606 this.count >= this.maxCount ? this.addDisabled = true : this.count++ 601 this.count >= this.maxCount ? this.addDisabled = true : this.count++
607 } else { 602 } else {
608 this.count <= 1 ? this.desDisabled = true : this.count-- 603 this.count <= 1 ? this.desDisabled = true : this.count--
609 } 604 }
610 }, 605 },
611 toComfirmOrder() { 606 toComfirmOrder() {
612 // 先处理验光部分的逻辑，如果ok在跳转 607 // 先处理验光部分的逻辑，如果ok在跳转
613 let flag=0; 608 let flag = 0
614 if(this.name==''){ 609 if (this.name === '') {
615 uni.showToast({ 610 uni.showToast({
616 title:"请输入验光单取名", 611 title: '请输入验光单取名',
617 icon: "none", 612 icon: 'none',
618 duration: 2000, 613 duration: 2000,
619 }) 614 })
620 }else{ 615 } else {
621 616 if (this.pd === '') {
622 if(this.pd==''){ 617 uni.showToast({
623 uni.showToast({ 618 title: '请输入瞳距',
624 title:"请输入瞳距", 619 icon: 'none',
625 icon: "none", 620 duration: 2000,
626 duration: 2000, 621 })
627 }) 622 } else {
628 }else{ 623 if (this.kinds === 1) {
629 624 // 添加用户验光单
630 if(this.kinds==1){ 625 console.log('kinds====>', this.pickerInfoChioce.leftSph)
631 // 添加用户验光单 626 console.log('kinds====>', this.pickerInfoChioce.leftSph === Number)
632 console.log('kinds====>',this.pickerInfoChioce.leftSph) 627 console.log('kinds====>', this.pickerInfoChioce.rightSph === Number)
633 console.log('kinds====>',this.pickerInfoChioce.leftSph==Number) 628 if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' ||
634 console.log('kinds====>',this.pickerInfoChioce.rightSph==Number) 629 this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' ||
635 if(this.pickerInfoChioce.rightSph==''||this.pickerInfoChioce.leftSph==''|| 630 this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === ''
636 this.pickerInfoChioce.leftCyl==''||this.pickerInfoChioce.rightCyl==''|| 631 ) {
637 this.pickerInfoChioce.leftAxi==''||this.pickerInfoChioce.rightAxi=='' 632 uni.showToast({
638 ){ 633 title: '请输入您的验光数据',
639 uni.showToast({ 634 icon: 'none',
640 title:"请输入您的验光数据", 635 duration: 2000,
641 icon: "none", 636 })
642 duration: 2000, 637 } else {
643 }) 638 if (this.confirm) {
644 }else{ 639 store.dispatch('myLoveList/addMylove', {
645 if(this.confirm){ 640 uid: this.$store.state.user.userInfo.uid,
646 store.dispatch('myLoveList/addMylove', { 641 openid: this.$store.state.user.userInfo.openid,
647 uid: this.$store.state.user.userInfo.uid, 642 // mp_name: this.$store.state.user.userInfo.mp_name,
648 openid: this.$store.state.user.userInfo.openid, 643 leftSph: this.pickerInfoChioce.leftSph,
649 // mp_name: this.$store.state.user.userInfo.mp_name, 644 rightSph: this.pickerInfoChioce.rightSph,
650 leftSph: this.pickerInfoChioce.leftSph, 645 leftCyl: this.pickerInfoChioce.leftCyl,
651 rightSph: this.pickerInfoChioce.rightSph, 646 rightCyl: this.pickerInfoChioce.rightCyl,
652 leftCyl: this.pickerInfoChioce.leftCyl, 647 leftAxi: this.pickerInfoChioce.leftAxi,
653 rightCyl: this.pickerInfoChioce.rightCyl, 648 rightAxi: this.pickerInfoChioce.rightAxi,
654 leftAxi: this.pickerInfoChioce.leftAxi, 649 pd: this.pd, // 瞳距
655 rightAxi: this.pickerInfoChioce.rightAxi, 650 mp_name: this.name,
656 pd: this.pd,// 瞳距 651 // time: this.pickerInfoChioce.time,
657 mp_name:this.name, 652 // img_url2: "http://localhost:8087/images/shop_1/1/",
658 // time: this.pickerInfoChioce.time, 653 }).then(({ mp_id: mpId }) => {
659 // img_url2: "http://localhost:8087/images/shop_1/1/", 654 this.mp_id = mpId
660 }); 655 })
661 flag=1 656 flag = 1
662 } else{ 657 } else {
663 uni.showToast({ 658 uni.showToast({
664 title:"请确认您的验光数据", 659 title: '请确认您的验光数据',
665 icon: "none", 660 icon: 'none',
666 duration: 3000, 661 duration: 3000,
667 }) 662 })
668 } 663 }
669 } 664 }
670 } 665 }
671 if(this.kinds==2){ 666 if (this.kinds === 2) {
672 // console.log('kinds====>',this.kinds) 667 // console.log('kinds====>',this.kinds)
673 // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1) 668 // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1)
674 // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce)) 669 // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce))
675 if(this.confirm){ 670 if (this.confirm) {
676 const leftList = ["leftSph","leftCyl","leftAxi"]; 671 const leftList = ['leftSph', 'leftCyl', 'leftAxi']
677 const rightList = ["rightSph", "rightCyl", "rightAxi"]; 672 const rightList = ['rightSph', 'rightCyl', 'rightAxi']
678 // let flag=0; 673 // let flag=0;
679 if(this.name!=this.oldname){ 674 if (this.name !== this.oldname) {
680 store.dispatch('myLoveList/updateMylove', { 675 store.dispatch('myLoveList/updateMylove', {
681 uid: this.$store.state.user.userInfo.uid, 676 uid: this.$store.state.user.userInfo.uid,
682 openid: this.$store.state.user.userInfo.openid, 677 openid: this.$store.state.user.userInfo.openid,
683 mp_id: this.mp_id, 678 mp_id: this.mp_id,
684 keyname: 'name', 679 keyname: 'name',
685 keyvalue: this.name, 680 keyvalue: this.name,
686 }); 681 })
687 flag=1 682 flag = 1
688 } 683 }
689 if(this.pd!=this.oldpd){ 684 if (this.pd !== this.oldpd) {
690 store.dispatch('myLoveList/updateMylove', { 685 store.dispatch('myLoveList/updateMylove', {
691 uid: this.$store.state.user.userInfo.uid, 686 uid: this.$store.state.user.userInfo.uid,
692 openid: this.$store.state.user.userInfo.openid, 687 openid: this.$store.state.user.userInfo.openid,
693 mp_id: this.mp_id, 688 mp_id: this.mp_id,
694 keyname: 'pd', 689 keyname: 'pd',
695 keyvalue: this.pd, 690 keyvalue: this.pd,
696 }); 691 })
697 flag=1 692 flag = 1
698 } 693 }
699 // 先验证是否输入有无空 694 // 先验证是否输入有无空
700 let q= true; 695 let q = true
701 for(let k=0; k<3;k++){ 696 for (let k = 0; k < 3; k++) {
702 q=q&&(this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1]!=''&& 697 q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' &&
703 this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2]!='') 698 this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '')
704 } 699 }
705 if(q){ 700 if (q) {
706 701 for (let j = 0; j < 3; j++) {
707 for (let j=0; j<3; j++) { 702 if (this.pickerInfoList[j].nameIndex1 !== 0) {
708 if(this.pickerInfoList[j].nameIndex1!=0){ 703 store.dispatch('myLoveList/updateMylove', {
709 store.dispatch('myLoveList/updateMylove', { 704 uid: this.$store.state.user.userInfo.uid,
710 uid: this.$store.state.user.userInfo.uid, 705 openid: this.$store.state.user.userInfo.openid,
711 openid: this.$store.state.user.userInfo.openid, 706 mp_id: this.mp_id,
712 mp_id: this.mp_id, 707 keyname: leftList[j],
713 keyname: leftList[j], 708 keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
714 keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], 709 })
715 }); 710 }
716 } 711 if (this.pickerInfoList[j].nameIndex2 !== 0) {
717 if(this.pickerInfoList[j].nameIndex2!=0){ 712 store.dispatch('myLoveList/updateMylove', {
718 store.dispatch('myLoveList/updateMylove', { 713 uid: this.$store.state.user.userInfo.uid,
719 uid: this.$store.state.user.userInfo.uid, 714 openid: this.$store.state.user.userInfo.openid,
720 openid: this.$store.state.user.userInfo.openid, 715 mp_id: this.mp_id,
721 mp_id: this.mp_id, 716 keyname: rightList[j],
722 keyname: rightList[j], 717 keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2],
723 keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2] 718 })
724 }); 719 }
725 } 720 flag = 1
726 flag=1; 721 }
727 } 722 } else {
728 }else{ 723 flag = 0
729 flag=0; 724 uni.showToast({
730 uni.showToast({ 725 title: '请输入您的验光数据',
731 title:"请输入您的验光数据", 726 icon: 'none',
732 icon: "none", 727 duration: 2000,
733 duration: 2000, 728 })
734 }) 729 }
735 730 if (flag !== 0) {
736 } 731 store.dispatch('myLoveList/getLoveList', {
737 if(flag!=0){ 732 uid: this.$store.state.user.userInfo.uid,
738 store.dispatch('myLoveList/getLoveList', { 733 })
739 uid: this.$store.state.user.userInfo.uid, 734 }
740 }); 735 } else {
741 } 736 uni.showToast({
742 737 title: '请确认您的验光数据',
743 } else{ 738 icon: 'none',
744 uni.showToast({ 739 duration: 3000,
745 title:"请确认您的验光数据", 740 })
746 icon: "none", 741 }
747 duration: 3000, 742 }
748 }) 743 }
749 } 744 }
750 } 745 if (flag !== 0) {
751 } 746 // 如果数据验证无误，那么更新验光单的数据
752 747 store.dispatch('myLoveList/getLoveList', {
753 } 748 uid: this.$store.state.user.userInfo.uid,
754 if(flag!=0){ 749 })
755 // 如果数据验证无误，那么更新验光单的数据 750 let i = 0
756 store.dispatch('myLoveList/getLoveList', { 751 // 判断出是哪一个sku被选中
757 uid: this.$store.state.user.userInfo.uid, 752 for (let index = 0; index < this.current.length; index++) {
758 }); 753 console.log('index', index, i, index !== this.current.length - 1)
759 let i = 0 754 if (index !== this.current.length - 1) {
760 // 判断出是哪一个sku被选中 755 // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
761 for (let index = 0; index < this.current.length; index++) { 756 i = this.current[index] * this.attrList[1].attr.length
762 console.log('index', index, i, index !== this.current.length - 1) 757 } else {
763 if (index !== this.current.length - 1) { 758 i += this.current[index]
764 console.log('----', this.current[index], this.attrList[1].attr.length, this.attrList) 759 }
765 i = this.current[index] * this.attrList[1].attr.length 760 }
766 } else { 761 // 判断是否其输入的人员数据是否已存在
767 i += this.current[index] 762 store.dispatch('order/saveParams', {
768 } 763 sk_id_arr: this.skuList[i],
769 console.log('i', i) 764 current: this.current,
770 } 765 mp_id: this.mp_id,
771 console.log('i------>', i) 766 attrList: this.attrList,
772 // 判断是否其输入的人员数据是否已存在 767 })
773 store.dispatch('order/saveParams', { 768 // 跳转到确认订单页面
774 sk_id_arr: this.skuList[i], 769 uni.navigateTo({
775 current: this.current 770 url: `../confirmOrder/confirmOrder?pid=${this.pid}`,
776 }) 771 })
777 772 }
778 uni.navigateTo({ 773 },
779 url: `../confirmOrder/confirmOrder?pid=${this.pid}` 774 },
780 })
781 }
782
783 }
784 }
785 } 775 }
786 </script> 776 </script>
787 777
788 <style lang="scss"> 778 <style lang="scss">
789 .content { 779 .content {
790 min-height: 100vh; 780 min-height: 100vh;
791 background-color: #f2f2f2; 781 background-color: #f2f2f2;
792 // padding-top: 20rpx; 782 // padding-top: 20rpx;
793 .goodInfo { 783 .goodInfo {
794 width: 100%; 784 width: 100%;
795 height: 272rpx; 785 height: 272rpx;
796 border-radius: 16rpx; 786 border-radius: 16rpx;
797 background-color: #ffffff; 787 background-color: #ffffff;
798 box-sizing: border-box; 788 box-sizing: border-box;
799 padding: 36rpx; 789 padding: 36rpx;
800 display: flex; 790 display: flex;
801 flex-direction: row; 791 flex-direction: row;
802 justify-content: flex-start; 792 justify-content: flex-start;
803 .imageWrap { 793 .imageWrap {
804 height: 188rpx; 794 height: 188rpx;
805 width: 188rpx; 795 width: 188rpx;
806 margin-right: 28rpx; 796 margin-right: 28rpx;
807 image { 797 image {
808 height: 188rpx; 798 height: 188rpx;
809 width: 188rpx; 799 width: 188rpx;
810 } 800 }
811 } 801 }
812 .infoRight { 802 .infoRight {
813 display: flex; 803 display: flex;
814 flex-direction: column; 804 flex-direction: column;
815 align-items: flex-start; 805 align-items: flex-start;
816 justify-content: space-between; 806 justify-content: space-between;
817 .goodName { 807 .goodName {
818 font-size: 28rpx; 808 font-size: 28rpx;
819 color: #333333; 809 color: #333333;
820 } 810 }
821 .remarks { 811 .remarks {
822 font-size: 20rpx; 812 font-size: 20rpx;
823 color: #999999; 813 color: #999999;
824 } 814 }
825 .priceBox { 815 .priceBox {
826 display: flex; 816 display: flex;
827 justify-content: space-between; 817 justify-content: space-between;
828 align-items: center; 818 align-items: center;
829 width: 100%; 819 width: 100%;
830 font-size: 14px; 820 font-size: 14px;
831 color: #999999; 821 color: #999999;
832 .price { 822 .price {
833 color: #ff6b4a; 823 color: #ff6b4a;
834 font-size: 28rpx; 824 font-size: 28rpx;
835 } 825 }
836 .counter { 826 .counter {
837 display: flex; 827 display: flex;
838 flex-direction: row; 828 flex-direction: row;
839 justify-content: space-between; 829 justify-content: space-between;
840 align-items: center; 830 align-items: center;
841 font-size: 28rpx; 831 font-size: 28rpx;
842 color: #333333; 832 color: #333333;
843 width: 122rpx; 833 width: 122rpx;
844 .btn { 834 .btn {
845 display: flex; 835 display: flex;
846 justify-content: center; 836 justify-content: center;
847 line-height: 32rpx; 837 line-height: 32rpx;
848 height: 32rpx; 838 height: 32rpx;
849 width: 32rpx; 839 width: 32rpx;
850 background-color: #f2f2f2; 840 background-color: #f2f2f2;
851 color: #cfcfcf; 841 color: #cfcfcf;
852 } 842 }
853 } 843 }
854 } 844 }
855 } 845 }
856 } 846 }
857 .goods-data { 847 .goods-data {
858 width: 100%; 848 width: 100%;
859 box-sizing: border-box; 849 box-sizing: border-box;
860 padding: 37rpx 40rpx 0 40rpx; 850 padding: 37rpx 40rpx 0 40rpx;
861 background: #ffffff; 851 background: #ffffff;
862 border-radius: 12rpx; 852 border-radius: 12rpx;
863 .opCollapse { 853 .opCollapse {
864 width: 100%; 854 width: 100%;
865 padding-bottom: 28rpx; 855 padding-bottom: 28rpx;
866 margin-top: 7px; 856 margin-top: 7px;
867 border-bottom: 1px solid #e9e9e9; 857 border-bottom: 1px solid #e9e9e9;
868 .head { 858 .head {
869 display: flex; 859 display: flex;
870 justify-content: space-between; 860 justify-content: space-between;
871 height: 24px; 861 height: 24px;
872 // font-family: PingFangSC-Medium; 862 // font-family: PingFangSC-Medium;
873 font-size: 16px; 863 font-size: 16px;
874 color: #333333; 864 color: #333333;
875 letter-spacing: -0.3px; 865 letter-spacing: -0.3px;
876 text-align: justify; 866 text-align: justify;
877 line-height: 24px; 867 line-height: 24px;
878 margin-bottom: 18rpx; 868 margin-bottom: 18rpx;
879 .headRighted { 869 .headRighted {
880 width: 0; 870 width: 0;
881 height: 0; 871 height: 0;
882 border-left: 4px solid transparent; 872 border-left: 4px solid transparent;
883 border-right: 4px solid transparent; 873 border-right: 4px solid transparent;
884 border-bottom: 4px solid #cfcfcf; 874 border-bottom: 4px solid #cfcfcf;
885 transform: scaleY(-1); 875 transform: scaleY(-1);
886 margin-top: 10px; 876 margin-top: 10px;
887 } 877 }
888 .headMid { 878 .headMid {
889 // font-family: PingFangSC-Regular; 879 // font-family: PingFangSC-Regular;
890 font-size: 10px; 880 font-size: 10px;
891 color: #999999; 881 color: #999999;
892 letter-spacing: -0.19px; 882 letter-spacing: -0.19px;
893 margin-left: -120rpx; 883 margin-left: -120rpx;
894 } 884 }
895 .headRight { 885 .headRight {
896 width: 0; 886 width: 0;
897 height: 0; 887 height: 0;
898 border-left: 4px solid transparent; 888 border-left: 4px solid transparent;
899 border-right: 4px solid transparent; 889 border-right: 4px solid transparent;
900 border-bottom: 4px solid #cfcfcf; 890 border-bottom: 4px solid #cfcfcf;
901 margin-top: 10px; 891 margin-top: 10px;
902 } 892 }
903 } 893 }
904 .body { 894 .body {
905 // font-family: PingFangSC-Regular; 895 // font-family: PingFangSC-Regular;
906 font-size: 12px; 896 font-size: 12px;
907 color: #666666; 897 color: #666666;
908 letter-spacing: 0; 898 letter-spacing: 0;
909 .bodyBox { 899 .bodyBox {
910 margin-top: 15px; 900 margin-top: 15px;
911 .names { 901 .names {
912 // font-family: PingFangSC-Regular; 902 // font-family: PingFangSC-Regular;
913 font-size: 12px; 903 font-size: 12px;
914 color: #151515; 904 color: #151515;
915 letter-spacing: 0; 905 letter-spacing: 0;
916 text-align: justify; 906 text-align: justify;
917 line-height: 17px; 907 line-height: 17px;
918 margin-left: 5px; 908 margin-left: 5px;
919 margin-right: 10px; 909 margin-right: 10px;
920 } 910 }
921 text { 911 text {
922 // font-family: PingFangSC-Regular; 912 // font-family: PingFangSC-Regular;
923 font-size: 12px; 913 font-size: 12px;
924 color: #666666; 914 color: #666666;
925 letter-spacing: 0; 915 letter-spacing: 0;
926 text-align: justify; 916 text-align: justify;
927 } 917 }
928 } 918 }
929 } 919 }
930 920
931 // .goods-form { 921 // .goods-form {
932 // display: flex; 922 // display: flex;
933 // flex-direction: column; 923 // flex-direction: column;
934 // align-items: center; 924 // align-items: center;
935 // justify-content: center; 925 // justify-content: center;
936 // background-color: #fff; 926 // background-color: #fff;
937 // width: 100%; 927 // width: 100%;
938 // .p1 { 928 // .p1 {
939 // font-size: 16px; 929 // font-size: 16px;
940 // color: #333333; 930 // color: #333333;
941 // letter-spacing: -0.3px; 931 // letter-spacing: -0.3px;
942 // text-align: justify; 932 // text-align: justify;
943 // line-height: 24px; 933 // line-height: 24px;
944 // margin: 4px 0; 934 // margin: 4px 0;
945 // } 935 // }
946 // .p2 { 936 // .p2 {
947 // font-size: 12px; 937 // font-size: 12px;
948 // color: #999999; 938 // color: #999999;
949 // letter-spacing: -0.23px; 939 // letter-spacing: -0.23px;
950 // margin-bottom: 18rpx; 940 // margin-bottom: 18rpx;
951 // } 941 // }
952 // image { 942 // image {
953 // width: 28rpx; 943 // width: 28rpx;
954 // height: 26rpx; 944 // height: 26rpx;
955 // } 945 // }
956 // .confirm { 946 // .confirm {
957 // display: flex; 947 // display: flex;
958 // align-items: center; 948 // align-items: center;
959 // font-size: 12px; 949 // font-size: 12px;
960 // color: #666666; 950 // color: #666666;
961 // letter-spacing: -0.23px; 951 // letter-spacing: -0.23px;
962 // width: 684rpx; 952 // width: 684rpx;
963 // image { 953 // image {
964 // margin-right: 25rpx; 954 // margin-right: 25rpx;
965 // } 955 // }
966 // } 956 // }
967 // .picker { 957 // .picker {
968 // display: flex; 958 // display: flex;
969 // flex-direction: column; 959 // flex-direction: column;
970 // justify-content: center; 960 // justify-content: center;
971 // align-items: center; 961 // align-items: center;
972 // width: 100%; 962 // width: 100%;
973 // image { 963 // image {
974 // width: 10px; 964 // width: 10px;
975 // height: 10px; 965 // height: 10px;
976 // margin-right: 5px; 966 // margin-right: 5px;
977 // } 967 // }
978 // .picker-choice { 968 // .picker-choice {
979 // display: flex; 969 // display: flex;
980 // width: 684rpx; 970 // width: 684rpx;
981 // align-items: center; 971 // align-items: center;
982 // margin-bottom: 40rpx; 972 // margin-bottom: 40rpx;
983 // .choice-left { 973 // .choice-left {
984 // width: 210rpx; 974 // width: 210rpx;
985 // .p11 { 975 // .p11 {
986 // font-size: 14px; 976 // font-size: 14px;
987 // color: #333333; 977 // color: #333333;
988 // letter-spacing: -0.26px; 978 // letter-spacing: -0.26px;
989 // text-align: justify; 979 // text-align: justify;
990 // line-height: 24px; 980 // line-height: 24px;
991 // } 981 // }
992 // .p12 { 982 // .p12 {
993 // font-size: 10px; 983 // font-size: 10px;
994 // color: #3f3f3f; 984 // color: #3f3f3f;
995 // letter-spacing: -0.19px; 985 // letter-spacing: -0.19px;
996 // text-align: justify; 986 // text-align: justify;
997 // line-height: 24px; 987 // line-height: 24px;
998 // } 988 // }
999 // } 989 // }
1000 // .p13 { 990 // .p13 {
1001 // font-size: 10px; 991 // font-size: 10px;
1002 // color: #999999; 992 // color: #999999;
1003 // letter-spacing: -0.19px; 993 // letter-spacing: -0.19px;
1004 // margin-right: 10px; 994 // margin-right: 10px;
1005 // } 995 // }
1006 // .p13-date { 996 // .p13-date {
1007 // font-size: 10px; 997 // font-size: 10px;
1008 // color: #999999; 998 // color: #999999;
1009 // letter-spacing: -0.19px; 999 // letter-spacing: -0.19px;
1010 // margin-right: 5px; 1000 // margin-right: 5px;
1011 // } 1001 // }
1012 // .p14 { 1002 // .p14 {
1013 // font-size: 14px; 1003 // font-size: 14px;
1014 // color: #666666; 1004 // color: #666666;
1015 // letter-spacing: -0.26px; 1005 // letter-spacing: -0.26px;
1016 // text-align: center; 1006 // text-align: center;
1017 // width: 124rpx; 1007 // width: 124rpx;
1018 // border-bottom: 1px solid #cfcfcf; 1008 // border-bottom: 1px solid #cfcfcf;
1019 // } 1009 // }
1020 // } 1010 // }
1021 // } 1011 // }
1022 // } 1012 // }
1023 .goods-form { 1013 .goods-form {
1024 display: flex; 1014 display: flex;
1025 flex-direction: column; 1015 flex-direction: column;
1026 align-items: center; 1016 align-items: center;
1027 justify-content: center; 1017 justify-content: center;
1028 background-color: #fff; 1018 background-color: #fff;
1029 width: 100%; 1019 width: 100%;
1030 padding: 40rpx 0; 1020 padding: 40rpx 0;
1031 .p1 { 1021 .p1 {
1032 font-size: 16px; 1022 font-size: 16px;
1033 color: #333333; 1023 color: #333333;
1034 letter-spacing: -0.3px; 1024 letter-spacing: -0.3px;
1035 text-align: justify; 1025 text-align: justify;
1036 line-height: 24px; 1026 line-height: 24px;
1037 margin: 4px 0; 1027 margin: 4px 0;
1038 1028
1039 } 1029 }
1040 .p2 { 1030 .p2 {
1041 font-size: 12px; 1031 font-size: 12px;
1042 color: #999999; 1032 color: #999999;
1043 letter-spacing: -0.23px; 1033 letter-spacing: -0.23px;
1044 margin-bottom: 32rpx; 1034 margin-bottom: 32rpx;
1045 } 1035 }
1046 .image2{ 1036 .image2{
1047 width: 42rpx; 1037 width: 42rpx;
1048 height: 34rpx; 1038 height: 34rpx;
1049 margin-right: 12rpx; 1039 margin-right: 12rpx;
1050 } 1040 }
1051 .confirm { 1041 .confirm {
1052 display: flex; 1042 display: flex;
1053 align-items: center; 1043 align-items: center;
1054 font-size: 12px; 1044 font-size: 12px;
1055 color: #666666; 1045 color: #666666;
1056 letter-spacing: -0.23px; 1046 letter-spacing: -0.23px;
1057 width: 684rpx; 1047 width: 684rpx;
1058 .image1{ 1048 .image1{
1059 margin-right:25rpx; 1049 margin-right:25rpx;
1060 width: 42rpx; 1050 width: 42rpx;
1061 height: 38rpx; 1051 height: 38rpx;
1062 } 1052 }
1063 } 1053 }
1064 .picker{ 1054 .picker{
1065 display: flex; 1055 display: flex;
1066 flex-direction: column; 1056 flex-direction: column;
1067 justify-content: center; 1057 justify-content: center;
1068 align-items: center; 1058 align-items: center;
1069 width: 100%; 1059 width: 100%;
1070 1060
1071 .picker-choice{ 1061 .picker-choice{
1072 display: flex; 1062 display: flex;
1073 width: 684rpx; 1063 width: 684rpx;
1074 align-items: center; 1064 align-items: center;
1075 margin-bottom: 40rpx; 1065 margin-bottom: 40rpx;
1076 .input{ 1066 .input{
1077 border-bottom: 1px solid #CFCFCF; 1067 border-bottom: 1px solid #CFCFCF;
1078 height: 40rpx; 1068 height: 40rpx;
1079 } 1069 }
1080 .choice-left{ 1070 .choice-left{
1081 width: 210rpx; 1071 width: 210rpx;
1082 .pd{ 1072 .pd{
1083 font-size: 14px; 1073 font-size: 14px;
1084 color: #333333; 1074 color: #333333;
1085 letter-spacing: -0.26px; 1075 letter-spacing: -0.26px;
1086 text-align: justify; 1076 text-align: justify;
1087 line-height: 24px; 1077 line-height: 24px;
1088 margin-right: 44rpx; 1078 margin-right: 44rpx;
1089 } 1079 }
1090 .p11 { 1080 .p11 {
1091 font-size: 14px; 1081 font-size: 14px;
1092 color: #333333; 1082 color: #333333;
1093 letter-spacing: -0.26px; 1083 letter-spacing: -0.26px;
1094 text-align: justify; 1084 text-align: justify;
1095 line-height: 24px; 1085 line-height: 24px;
1096 // margin-right: 10px; 1086 // margin-right: 10px;
1097 } 1087 }
1098 .p12 { 1088 .p12 {
1099 font-size: 10px; 1089 font-size: 10px;
1100 color: #3F3F3F; 1090 color: #3F3F3F;
1101 letter-spacing: -0.19px; 1091 letter-spacing: -0.19px;
1102 text-align: justify; 1092 text-align: justify;
1103 line-height: 24px; 1093 line-height: 24px;
1104 } 1094 }
1105 1095
1106 1096 }
1107 } 1097 .p13 {
1108 .p13 { 1098 font-size: 10px;
1109 font-size: 10px; 1099 color: #999999;
1110 color: #999999; 1100 letter-spacing: -0.19px;
1111 letter-spacing: -0.19px; 1101 margin-right: 10px;
1112 margin-right: 10px; 1102 }
1113 } 1103 .p13-date {
1114 .p13-date { 1104 font-size: 10px;
1115 font-size: 10px; 1105 color: #999999;
1116 color: #999999; 1106 letter-spacing: -0.19px;
1117 letter-spacing: -0.19px; 1107 margin-right: 5px;
1118 margin-right: 5px; 1108 }
1119 } 1109 picker{
1120 picker{ 1110 width: 144rpx;
1121 width: 144rpx; 1111 height: 40rpx;
1122 height: 40rpx; 1112 display: flex;
1123 display: flex; 1113 position: relative;
1124 position: relative; 1114 .p14 {
1125 .p14 { 1115 font-size: 14px;
1126 font-size: 14px; 1116 color: #666666;
1127 color: #666666; 1117 letter-spacing: -0.26px;
1128 letter-spacing: -0.26px; 1118 text-align: center;
1129 text-align: center; 1119 width: 124rpx;
1130 width: 124rpx; 1120 border-bottom: 1px solid #CFCFCF;
1131 border-bottom: 1px solid #CFCFCF; 1121 height: 38rpx;
1132 height: 38rpx; 1122 }
1133 } 1123 image{
1134 image{ 1124 width: 20rpx;
1135 width: 20rpx; 1125 height: 20rpx;
1136 height: 20rpx; 1126 position: absolute;
1137 position: absolute; 1127 right: 20rpx;
1138 right: 20rpx; 1128 top: 8rpx;
1139 top: 8rpx; 1129 }
1140 } 1130 }
1141 } 1131
1142 1132 }
1143 1133 }
1144 } 1134 }
1145 }
1146 }
1147 } 1135 }
1148 } 1136 }
1149 .choose { 1137 .choose {
1150 width: 100%; 1138 width: 100%;
1151 background: #ffffff; 1139 background: #ffffff;
1152 border-radius: 12rpx; 1140 border-radius: 12rpx;
1153 margin-top: 20rpx; 1141 margin-top: 20rpx;
1154 padding: 40rpx 40rpx 112rpx 40rpx; 1142 padding: 40rpx 40rpx 112rpx 40rpx;
1155 box-sizing: border-box; 1143 box-sizing: border-box;
1156 .chooseItem { 1144 .chooseItem {
1157 width: 100%; 1145 width: 100%;
1158 padding-bottom: 32rpx; 1146 padding-bottom: 32rpx;
1159 border-bottom: 1px solid #e9e9e9; 1147 border-bottom: 1px solid #e9e9e9;
1160 margin-bottom: 28rpx; 1148 margin-bottom: 28rpx;
1161 } 1149 }
1162 .chooseRes { 1150 .chooseRes {
1163 font-size: 12px; 1151 font-size: 12px;
1164 color: #666666; 1152 color: #666666;
1165 } 1153 }
1166 .itemsWrap { 1154 .itemsWrap {
1167 display: flex; 1155 display: flex;
1168 flex-direction: row; 1156 flex-direction: row;
1169 flex-wrap: wrap; 1157 flex-wrap: wrap;
1170 justify-content: flex-start; 1158 justify-content: flex-start;
1171 align-items: center; 1159 align-items: center;
1172 padding-top: 24rpx; 1160 padding-top: 24rpx;
1173 .item1 { 1161 .item1 {
1174 width: 64rpx; 1162 width: 64rpx;
1175 height: 64rpx; 1163 height: 64rpx;
1176 border-radius: 32rpx; 1164 border-radius: 32rpx;
1177 margin: 0 36rpx 24rpx 0; 1165 margin: 0 36rpx 24rpx 0;
1178 transition: all 0.3s; 1166 transition: all 0.3s;
1179 border: 1px solid #ffffff; 1167 border: 1px solid #ffffff;
1180 } 1168 }
1181 .item2 { 1169 .item2 {
1182 // width: 100rpx; 1170 // width: 100rpx;
1183 padding: 0 30rpx; 1171 padding: 0 30rpx;
1184 height: 60rpx; 1172 height: 60rpx;
1185 margin: 0 20rpx 20rpx 0; 1173 margin: 0 20rpx 20rpx 0;
1186 transition: all 0.3s; 1174 transition: all 0.3s;
1187 background: #f2f2f2; 1175 background: #f2f2f2;
src/store/modules/myLoveList.js
Diff comments   View file @2369ec7
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { 4 const {
5 mylovelist, 5 mylovelist,
6 myloveadd, 6 myloveadd,
7 myloveupdate 7 myloveupdate,
8 } = urlAlias 8 } = urlAlias
9 9
10 const state = { 10 const state = {
11 loveList: [] 11 loveList: [],
12 } 12 }
13 13
14 const mutations = { 14 const mutations = {
15 INIT: (state, data) => { 15 INIT: (state, data) => {
16 state.loveList = data 16 state.loveList = data
17 }, 17 },
18 // 更新关心人验光单 18 // 更新关心人验光单
19 UPDATE: (state, data) => { 19 UPDATE: (state, data) => {
20 // state.loveList.push(data) 20 // state.loveList.push(data)
21 // console.log('UPDATA=====>',data) 21 // console.log('UPDATA=====>',data)
22 } 22 },
23 } 23 }
24 24
25 const actions = { 25 const actions = {
26 getLoveList({ commit }, param) { 26 getLoveList({ commit }, param) {
27 request({ 27 request({
28 url: mylovelist, 28 url: mylovelist,
29 data: param, 29 data: param,
30 success: (res) => { 30 success: (res) => {
31 // console.log(res.data); 31 // console.log(res.data);
32 commit('INIT', res.data.data) 32 commit('INIT', res.data.data)
33 } 33 },
34 }) 34 })
35 }, 35 },
36 addMylove({ commit }, param) { 36 addMylove({ commit }, param) {
37 console.log('myloveupdate-parm====>', param) 37 console.log('myloveupdate-parm====>', param)
38 request({ 38 return new Promise((resolve) => request({
39 url: myloveadd, 39 url: myloveadd,
40 data: param, 40 data: param,
41 success: (res) => { 41 success: (res) => {
42 console.log('addMylove-parm====>', param) 42 console.log('addMylove-parm====>', param)
43 console.log(res.data) 43 console.log(res.data)
44 resolve(res.data)
44 // commit("ADD", args); 45 // commit("ADD", args);
45 } 46 },
46 }) 47 }))
47 }, 48 },
48 updateMylove({ commit }, param) { 49 updateMylove({ commit }, param) {
49 request({ 50 request({
50 url: myloveupdate, 51 url: myloveupdate,
51 data: param, 52 data: param,
52 success: (res) => { 53 success: (res) => {
53 console.log('myloveupdate-parm====>', param) 54 console.log('myloveupdate-parm====>', param)
54 console.log(res) 55 console.log(res)
55 // commit("UPDATE", param); 56 // commit("UPDATE", param);
56 } 57 },
57 }) 58 })
58 } 59 },
59 60
60 } 61 }
61 62
62 export default { 63 export default {
63 namespaced: true, 64 namespaced: true,
64 state, 65 state,
65 mutations, 66 mutations,
66 actions 67 actions,
67 } 68 }
68 69
src/store/modules/order.js
Diff comments   View file @2369ec7
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { orderBuild } = urlAlias 4 const { orderBuild, buyNow, pay } = urlAlias
5 5
6 const state = { list: [], param: {} } 6 const state = { list: [], param: {} }
7 7
8 const mutations = { 8 const mutations = {
9 LIST: (state, list) => { 9 LIST: (state, list) => {
10 state.list = list 10 state.list = list
11 }, 11 },
12 SAVE: (state, param) => { 12 SAVE: (state, param) => {
13 state.param = param 13 state.param = param
14 } 14 },
15 } 15 }
16 16
17 const actions = { 17 const actions = {
18 // 立即购买->创建订单
19 buyNow({ commit }, param) {
20 return new Promise((resolve) => request({
21 url: buyNow,
22 data: param,
23 success: (res) => {
24 resolve(res)
25 },
26 fail: () => {
27 uni.showModal({
28 content: '创建订单失败',
29 showCancel: false,
30 })
31 },
32 }))
33 },
34 // 购物车->创建订单
18 build({ commit }, param) { 35 build({ commit }, param) {
19 return new Promise((resolve, reject) => request({ 36 return new Promise((resolve, reject) => request({
20 url: orderBuild, 37 url: orderBuild,
21 data: param, 38 data: param,
22 success: (res) => { 39 success: (res) => {
23 resolve() 40 resolve(res.data)
24 }, 41 },
25 fail: () => { 42 fail: () => {
26 uni.showModal({ 43 uni.showModal({
27 content: '订单生成失败', 44 content: '订单生成失败',
28 showCancel: false 45 showCancel: false,
29 }) 46 })
30 } 47 },
31 })) 48 }))
32 }, 49 },
50 // 支付
51 pay({ commit }, param) {
52 return new Promise((resolve, reject) => request({
53 url: pay,
54 data: param,
55 success: (res) => {
56 resolve(res.data)
57 },
58 fail: () => {
59 uni.showModal({
60 content: '订单生成失败',
61 showCancel: false,
62 })
63 },
64 }))
65 },
66 // 储存创建订单参数
33 saveParams({ commit }, param) { 67 saveParams({ commit }, param) {
34 console.log('save', param) 68 console.log('save', param)
35 commit('SAVE', param) 69 commit('SAVE', param)
36 } 70 },
37 } 71 }
38 72
39 export default { 73 export default {
40 namespaced: true, 74 namespaced: true,
41 state, 75 state,
42 mutations, 76 mutations,
43 actions 77 actions,
44 } 78 }
45 79
src/store/modules/read.js
Diff comments   View file @2369ec7
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { 4 const {
5 read 5 read
6 } = urlAlias 6 } = urlAlias
7 7
8 const state = { 8 const state = {
9 goodInfo: {} 9 goodInfo: {}
10 } 10 }
11 11
12 const mutations = { 12 const mutations = {
13 INIT: (state, goodInfo) => { 13 INIT: (state, goodInfo) => {
14 state.goodInfo = goodInfo 14 state.goodInfo = goodInfo
15 } 15 }
16 } 16 }
17 17
18 const actions = { 18 const actions = {
19 fetch({ commit }, param) { 19 fetch({ commit }, param) {
20 // 由于购物车和用户推荐的价格要根据sk_id来获取
21 const arg=Object.assign({},param)
22 delete param.sk_id
20 return new Promise((resolve, reject) => request({ 23 return new Promise((resolve, reject) => request({
21 url: read, 24 url: read,
22 data: param, 25 data: param,
23 success: (res) => { 26 success: (res) => {
24 commit('INIT', res.data.data) 27 console.log('readParm====>',arg)
28 console.log('read====>',res.data.data)
29 // 用一个新的对象来接收sk_id找的值
30 const Res=Object.assign({},res.data.data)
31 if(arg.sk_id!=undefined){
32 for (let i = 0; i < res.data.data.skuList.length; i++) {
33 if(res.data.data.skuList[i].sk_id==arg.sk_id){
34 Res.p_sale_price= res.data.data.skuList[i].real_price
35 console.log('陈工了')
36 }
37 }
38 }
39 console.log(Res)
40 commit('INIT', Res)
25 resolve() 41 resolve()
26 }, 42 },
27 fail: (res) => { 43 fail: (res) => {
28 console.log('fail status === > ', res) 44 console.log('fail status === > ', res)
29 }, 45 },
30 complete: (res) => { 46 complete: (res) => {
31 console.log('complete status === > ', res) 47 console.log('complete status === > ', res)
32 } 48 }
33 })) 49 }))
34 } 50 }
35 } 51 }
36 52
37 export default { 53 export default {
38 namespaced: true, 54 namespaced: true,
39 state, 55 state,
40 mutations, 56 mutations,
41 actions 57 actions
42 } 58 }
43 59
src/store/request.js
Diff comments   View file @2369ec7
1 const DOMAIN = 'https://api.glass.xiuyetang.com' 1 const DOMAIN = 'https://api.glass.xiuyetang.com'
2 2
3 export default async function request({ 3 export default async function request({
4 url, 4 url,
5 method = 'post', 5 method = 'post',
6 data = {}, 6 data = {},
7 header = { 7 header = {
8 'Content-Type': 'application/x-www-form-urlencoded' 8 'Content-Type': 'application/x-www-form-urlencoded',
9 }, 9 },
10 timeout = 3000, 10 timeout = 3000,
11 withCredentials = false, // 跨域请求时是否携带凭证（cookies） 11 withCredentials = false, // 跨域请求时是否携带凭证（cookies）
12 // sslVerify: true, // 验证 ssl 证书 12 // sslVerify: true, // 验证 ssl 证书
13 success, 13 success,
14 fail = (res) => { 14 fail = (res) => {
15 console.log('fail status === > ', res) 15 console.log('fail status === > ', res)
16 }, 16 },
17 complete = (res) => { 17 complete = (res) => {
18 console.log('complete status === > ', res) 18 console.log('complete status === > ', res)
19 } 19 },
20 }) { 20 }) {
21 const uid = uni.getStorageSync('uid') 21 const uid = uni.getStorageSync('uid')
22 const openid = uni.getStorageSync('uid') 22 const openid = uni.getStorageSync('openid')
23 data = { 23 data = {
24 uid, 24 uid,
25 openid, 25 openid,
26 ...data 26 ...data,
27 } 27 }
28 uni 28 uni
29 .request({ 29 .request({
30 url: DOMAIN + url, 30 url: DOMAIN + url,
31 method, 31 method,
32 data, 32 data,
33 header, 33 header,
34 timeout, 34 timeout,
35 withCredentials, 35 withCredentials,
36 success, 36 success,
37 fail, 37 fail,
38 complete 38 complete,
39 }) 39 })
40 } 40 }
41 41
1 const urlAlias = { 1 const urlAlias = {
2 // 详情 2 // 详情
3 read: '/app/prod/read', // 获取商品信息 3 read: '/app/prod/read', // 获取商品信息
4 4
5 // 首页 5 // 首页
6 shopList: '/app/prod/list', // 获取首页商品列表 6 shopList: '/app/prod/list', // 获取首页商品列表
7 category: '/app/prod/category2', // 获取首页商品分类 7 category: '/app/prod/category2', // 获取首页商品分类
8 search: '/app/prod/search', // 首页搜索商品 8 search: '/app/prod/search', // 首页搜索商品
9 9
10 // 登陆 10 // 登陆
11 login: '/app/glass/getOpenId', // 登陆 11 login: '/app/glass/getOpenId', // 登陆
12 getUserInfo: '/app/glass/userinfo', // 获取用户信息 12 getUserInfo: '/app/glass/userinfo', // 获取用户信息
13 13
14 // 我的订单 14 // 我的订单
15 orderList: '/app/order/list', // 获取订单列表 15 orderList: '/app/order/list', // 获取订单列表
16 myOrderList: '/app/order/list3', // 获取订单列表 16 myOrderList: '/app/order/list3', // 获取订单列表
17 orderRead: '/app/order/read', // 获取订单详情 17 orderRead: '/app/order/read', // 获取订单详情
18 cancelOrder: '/app/order/wait/del', // 取消订单 18 cancelOrder: '/app/order/wait/del', // 取消订单
19 statusConfirm: '/app/order/statusConfirm', // 订单操作 19 statusConfirm: '/app/order/statusConfirm', // 订单操作
20 payLog: '/app/pay/log', // 调起支付 20 payLog: '/app/pay/log', // 调起支付
21 orderBuild: '/app/order/build', // 生成订单 21 orderBuild: '/app/order/build', // 加购后生成订单
22 buyNow: '/app/order/buynow', // 立即购买生成订单
23 pay: '/app/pay/log', // 支付接口
22 24
23 // 购物车 25 // 购物车
24 cartList: '/app/cart/list', // 获取购物车列表 26 cartList: '/app/cart/list', // 获取购物车列表
25 cartModi: '/app/cart/modi', // 修改购物车 27 cartModi: '/app/cart/modi', // 修改购物车
26 cartDel: '/app/cart/del', // 删除购物车 28 cartDel: '/app/cart/del', // 删除购物车
27 cartAdd: '/app/cart/add', // 添加购物车 29 cartAdd: '/app/cart/add', // 添加购物车
28 30
29 // 我的 31 // 我的
30 recommandList: '/app/prod/recommand', // 获取用户个性化推荐商品 32 recommandList: '/app/prod/recommand', // 获取用户个性化推荐商品
31 33
32 // 镜框选购页 34 // 镜框选购页
33 detailStandardList: '/app/prod/read', // 获取商品的详细信息 35 detailStandardList: '/app/prod/read', // 获取商品的详细信息
34 // 选购页 36 // 选购页
35 detailStandardUrl: '/app/prod/read', // 获取商品的详细信息 37 detailStandardUrl: '/app/prod/read', // 获取商品的详细信息
36 38
37 // 地址管理 39 // 地址管理
38 editAddress: '/app/address/edit_address', // 编辑地址 40 editAddress: '/app/address/edit_address', // 编辑地址
39 addressList: '/app/address/get_address_list', // 获取用户地址列表 41 addressList: '/app/address/get_address_list', // 获取用户地址列表
40 getAddress: '/app/address/get_address_by_id', // 获取用户某一地址信息 42 getAddress: '/app/address/get_address_by_id', // 获取用户某一地址信息
41 getDefaultAddress: '/app/address/get_default_address', // 获取用户默认地址信息 43 getDefaultAddress: '/app/address/get_default_address', // 获取用户默认地址信息
42 44
43 // 用户数据 45 // 用户数据
44 mylovelist: '/app/user/mylovelist', // 关心的人的数据 46 mylovelist: '/app/user/mylovelist', // 关心的人的数据
45 myloveadd: '/app/user/myloveadd', // 添加关心的人 47 myloveadd: '/app/user/myloveadd', // 添加关心的人
46 myloveupdate: '/app/user/myloveupdate' // 更新关心人的数据 48 myloveupdate: '/app/user/myloveupdate', // 更新关心人的数据
47 } 49 }
48 50
49 export default urlAlias 51 export default urlAlias
50 52