刘文博 / gulu-vue

Download as
Browse Code »

Commit 5638d36da298bf13eb70e769b365d10c9cfca4fc

Authored by 范牧
2 parents 089dce19da 30ace30247
Exists in master

解决冲突

Showing 5 changed files   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @5638d36
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.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_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 {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}}
17 </view> 17 </view>
18 </view> 18 </view>
19 <view class="trade_num">{{goods.trade_num}}人购买</view> 19 <view class="trade_num">{{goods.trade_num}}人购买</view>
20 </view> 20 </view>
21 </view> 21 </view>
22 </template> 22 </template>
23 23
24 <script> 24 <script>
25 export default { 25 export default {
26 props: { 26 props: {
27 /** 27 /**
28 * 商品数据 28 * 商品数据
29 */ 29 */
30 goods: { 30 goods: {
31 id: Number, 31 id: Number,
32 imgurl: String, 32 imgurl: String,
33 name: String, 33 name: String,
34 rsSon: Object, 34 rsSon: Object,
35 originCost: String, 35 originCost: String,
36 price: String, 36 price: String,
37 trade_num: String, 37 trade_num: String,
38 goodType: String, 38 goodType: String,
39 }, 39 },
40 40
41 }, 41 },
42 created () { 42 created () {
43 }, 43 },
44 data () { 44 data () {
45 return { 45 return {
46 46
47 } 47 }
48 }, 48 },
49 methods: { 49 methods: {
50 toGoods (id) { 50 toGoods (id, sk_id) {
51 console.log('---', '../frameDetail/frameDetail?pid=' + id) 51 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id)
52 uni.navigateTo({ 52 uni.navigateTo({
53 url: '../frameDetail/frameDetail?pid=' + id, 53 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
54 success: res => {}, 54 success: res => {},
55 fail: () => {}, 55 fail: () => {},
56 complete: () => {}, 56 complete: () => {},
57 }) 57 })
58 }, 58 },
59 }, 59 },
60 } 60 }
61 </script> 61 </script>
62 62
63 <style lang="scss"> 63 <style lang="scss">
64 image { 64 image {
65 width: 100%; 65 width: 100%;
66 height: 120rpx; 66 height: 120rpx;
67 } 67 }
68 .name { 68 .name {
69 width: 92%; 69 width: 92%;
70 height: 54rpx; 70 height: 54rpx;
71 padding: 5px 4%; 71 padding: 5px 4%;
72 display: -webkit-box; 72 display: -webkit-box;
73 -webkit-box-orient: vertical; 73 -webkit-box-orient: vertical;
74 -webkit-line-clamp: 2; 74 -webkit-line-clamp: 2;
75 text-align: justify; 75 text-align: justify;
76 overflow: hidden; 76 overflow: hidden;
77 font-size: 24rpx; 77 font-size: 24rpx;
78 color: #333333; 78 color: #333333;
79 } 79 }
80 .info { 80 .info {
81 display: flex; 81 display: flex;
82 justify-content: space-between; 82 justify-content: space-between;
83 align-items: center; 83 align-items: center;
84 width: 92%; 84 width: 92%;
85 padding: 5px 4% 5px 4%; 85 padding: 5px 4% 5px 4%;
86 .priceBox { 86 .priceBox {
87 display: flex; 87 display: flex;
88 justify-content: space-between; 88 justify-content: space-between;
89 align-items: center; 89 align-items: center;
90 .price { 90 .price {
91 color: #eb5d3b; 91 color: #eb5d3b;
92 font-size: 28rpx; 92 font-size: 28rpx;
93 font-weight: 600; 93 font-weight: 600;
94 margin-right: 10rpx; 94 margin-right: 10rpx;
95 } 95 }
96 .originCost { 96 .originCost {
97 text-decoration: line-through; 97 text-decoration: line-through;
98 color: #999999; 98 color: #999999;
99 font-size: 20rpx; 99 font-size: 20rpx;
100 } 100 }
101 } 101 }
102 .trade_num { 102 .trade_num {
103 color: #999999; 103 color: #999999;
104 font-size: 20rpx; 104 font-size: 20rpx;
105 } 105 }
106 } 106 }
107 </style> 107 </style>
108 108
src/pages/cart/cart.vue
Diff comments   View file @5638d36
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.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) { 127 toGoods(id, sk_id) {
128 console.log('---', '../frameDetail/frameDetail?pid=' + id) 128 console.log('cart-list', this.$store.state.cart.cartList);
129 console.log('---', '../frameDetail/frameDetail?pid=' + id +'&sk_id='+sk_id)
129 uni.navigateTo({ 130 uni.navigateTo({
130 url: '../frameDetail/frameDetail?pid=' + id, 131 url: '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id,
131 success: res => {}, 132 success: res => {},
132 fail: () => {}, 133 fail: () => {},
133 complete: () => {} 134 complete: () => {}
134 }) 135 })
135 // uni.navigateTo({ 136 // uni.navigateTo({
136 // url: '../frameDetail/frameDetail?oderId=' + id, 137 // url: '../frameDetail/frameDetail?oderId=' + id,
137 // success: res => {}, 138 // success: res => {},
138 // fail: () => {}, 139 // fail: () => {},
139 // complete: () => {} 140 // complete: () => {}
140 // }) 141 // })
141 // console.log('toGoods =====> id:' + id + '======>type:' + type) 142 // console.log('toGoods =====> id:' + id + '======>type:' + type)
142 // switch (type) { 143 // switch (type) {
143 // case 1: 144 // case 1:
144 // uni.navigateTo({ 145 // uni.navigateTo({
145 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 146 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
146 // success: res => {}, 147 // success: res => {},
147 // fail: () => {}, 148 // fail: () => {},
148 // complete: () => {} 149 // complete: () => {}
149 // }) 150 // })
150 // break 151 // break
151 // case 2: 152 // case 2:
152 // uni.navigateTo({ 153 // uni.navigateTo({
153 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 154 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
154 // success: res => {}, 155 // success: res => {},
155 // fail: () => {}, 156 // fail: () => {},
156 // complete: () => {} 157 // complete: () => {}
157 // }) 158 // })
158 // break 159 // break
159 // case 3: 160 // case 3:
160 // uni.navigateTo({ 161 // uni.navigateTo({
161 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 162 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
162 // success: res => {}, 163 // success: res => {},
163 // fail: () => {}, 164 // fail: () => {},
164 // complete: () => {} 165 // complete: () => {}
165 // }) 166 // })
166 // break 167 // break
167 // case 4: 168 // case 4:
168 // uni.navigateTo({ 169 // uni.navigateTo({
169 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, 170 // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
170 // success: res => {}, 171 // success: res => {},
171 // fail: () => {}, 172 // fail: () => {},
172 // complete: () => {} 173 // complete: () => {}
173 // }) 174 // })
174 // break 175 // break
175 // default : 176 // default :
176 // break 177 // break
177 // } 178 // }
178 }, 179 },
179 180
180 counter(index, isadd, item) { 181 counter(index, isadd, item) {
181 // console.log('===>>counter ===>num',num) 182 // console.log('===>>counter ===>num',num)
182 // console.log('===>>counter ===>isadd',isadd) 183 // console.log('===>>counter ===>isadd',isadd)
183 console.log('item=====>',item) 184 console.log('item=====>',item)
184 console.log('num=====>',item.num) 185 console.log('num=====>',item.num)
185 let nums = parseInt(item.num) 186 let nums = parseInt(item.num)
186 if (isadd) { 187 if (isadd) {
187 if (nums >= this.maxCount) { 188 if (nums >= this.maxCount) {
188 this.addDisabled = true 189 this.addDisabled = true
189 } else { 190 } else {
190 this.addDisabled = true 191 this.addDisabled = true
191 // 修改num 192 // 修改num
192 if (this.childIsOpen[index]) { 193 if (this.childIsOpen[index]) {
193 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice 194 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
194 } 195 }
195 store.dispatch('cart/modiCart', { 196 store.dispatch('cart/modiCart', {
196 uid: this.$store.state.user.userInfo.uid, 197 uid: this.$store.state.user.userInfo.uid,
197 openid: this.$store.state.user.userInfo.openid, 198 openid: this.$store.state.user.userInfo.openid,
198 mp_id: item.mp_id, 199 mp_id: item.mp_id,
199 sk_id: item.sk_id, 200 sk_id: item.sk_id,
200 price: item.nowPrice, 201 price: item.nowPrice,
201 pid: item.pid, 202 pid: item.pid,
202 num: nums + 1, 203 num: nums + 1,
203 cart_id: item.cart_id, 204 cart_id: item.cart_id,
204 args: { 205 args: {
205 index: index, 206 index: index,
206 isadd: isadd 207 isadd: isadd
207 } 208 }
208 }) 209 })
209 this.addDisabled = false 210 this.addDisabled = false
210 } 211 }
211 } else { 212 } else {
212 if (nums <= 1) { 213 if (nums <= 1) {
213 this.desDisabled = true 214 this.desDisabled = true
214 } else { 215 } else {
215 this.desDisabled = false 216 this.desDisabled = false
216 // post 请求修改相关参数 217 // post 请求修改相关参数
217 if (this.childIsOpen[index]) { 218 if (this.childIsOpen[index]) {
218 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice 219 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
219 } 220 }
220 store.dispatch('cart/modiCart', { 221 store.dispatch('cart/modiCart', {
221 uid: this.$store.state.user.userInfo.uid, 222 uid: this.$store.state.user.userInfo.uid,
222 openid: this.$store.state.user.userInfo.openid, 223 openid: this.$store.state.user.userInfo.openid,
223 mp_id: item.mp_id, 224 mp_id: item.mp_id,
224 sk_id: item.sk_id, 225 sk_id: item.sk_id,
225 price: item.nowPrice, 226 price: item.nowPrice,
226 pid: item.pid, 227 pid: item.pid,
227 num: nums - 1, 228 num: nums - 1,
228 cart_id: item.cart_id, 229 cart_id: item.cart_id,
229 args: { 230 args: {
230 index: index, 231 index: index,
231 isadd: isadd 232 isadd: isadd
232 } 233 }
233 }) 234 })
234 this.desDisabled = true 235 this.desDisabled = true
235 } 236 }
236 } 237 }
237 // store.dispatch('cart/getCartList', { 238 // store.dispatch('cart/getCartList', {
238 // uid: this.$store.state.user.userInfo.uid // 用户id 239 // uid: this.$store.state.user.userInfo.uid // 用户id
239 // }) 240 // })
240 }, 241 },
241 242
242 Change(isopen, indexC) { 243 Change(isopen, indexC) {
243 // console.log('lalla===>',isopen) 244 // console.log('lalla===>',isopen)
244 this.childIsOpen[indexC] = !isopen 245 this.childIsOpen[indexC] = !isopen
245 if (!isopen) { 246 if (!isopen) {
246 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)
247 } else { 248 } else {
248 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)
249 } 250 }
250 let m = true 251 let m = true
251 for (let i = 0; i < this.childIsOpen.length; i++) { 252 for (let i = 0; i < this.childIsOpen.length; i++) {
252 m = m & this.childIsOpen[i] 253 m = m & this.childIsOpen[i]
253 } 254 }
254 if (m == 1) { 255 if (m == 1) {
255 this.pIsoPen = true 256 this.pIsoPen = true
256 } else { 257 } else {
257 this.pIsoPen = false 258 this.pIsoPen = false
258 } 259 }
259 }, 260 },
260 pChange(isopen) { 261 pChange(isopen) {
261 this.pIsoPen = !isopen 262 this.pIsoPen = !isopen
262 for (let i = 0; i < this.childIsOpen.length; i++) { 263 for (let i = 0; i < this.childIsOpen.length; i++) {
263 this.childIsOpen[i] = !isopen 264 this.childIsOpen[i] = !isopen
264 } 265 }
265 if (this.pIsoPen) { 266 if (this.pIsoPen) {
266 // 计算总价逻辑 267 // 计算总价逻辑
267 if (this.childIsOpen.length != 0) { 268 if (this.childIsOpen.length != 0) {
268 for (let i = 0; i < this.childIsOpen.length; i++) { 269 for (let i = 0; i < this.childIsOpen.length; i++) {
269 if (this.childIsOpen[i]) { 270 if (this.childIsOpen[i]) {
270 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)
271 } 272 }
272 } 273 }
273 } 274 }
274 } else { 275 } else {
275 this.totalPrice = 0 276 this.totalPrice = 0
276 } 277 }
277 }, 278 },
278 delCart(cart_id, index) { 279 delCart(cart_id, index) {
279 // console.log('userInfo',this.$store.state.user.userInfo) 280 // console.log('userInfo',this.$store.state.user.userInfo)
280 cart_id = parseInt(cart_id) 281 cart_id = parseInt(cart_id)
281 // console.log('delcart------>cart_id',cart_id) 282 // console.log('delcart------>cart_id',cart_id)
282 // console.log('cartlist====>delcart',this.$store.state.cart.cartList) 283 // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
283 // console.log('delcart======>index',index) 284 // console.log('delcart======>index',index)
284 const uid=this.$store.state.user.userInfo.uid 285 const uid=this.$store.state.user.userInfo.uid
285 const openid=this.$store.state.user.userInfo.openid 286 const openid=this.$store.state.user.userInfo.openid
286 uni.showModal({ 287 uni.showModal({
287 title: '是否删除该商品', 288 title: '是否删除该商品',
288 // content: '是否删除该商品', 289 // content: '是否删除该商品',
289 success: function (res) { 290 success: function (res) {
290 if (res.confirm) { 291 if (res.confirm) {
291 // this.$store.state.cart.cartList.splice(index,1) 292 // this.$store.state.cart.cartList.splice(index,1)
292 store.dispatch('cart/delCart', { 293 store.dispatch('cart/delCart', {
293 uid: uid, 294 uid: uid,
294 openid: openid, 295 openid: openid,
295 cart_id: cart_id, // 要修改的购物车id 296 cart_id: cart_id, // 要修改的购物车id
296 arg: index // 由于action 传参是能接收两参数，因此将index放入对象 297 arg: index // 由于action 传参是能接收两参数，因此将index放入对象
297 }) 298 })
298 console.log('用户点击确定') 299 console.log('用户点击确定')
299 } 300 }
300 } 301 }
301 }) 302 })
302 } 303 }
303 } 304 }
304 } 305 }
305 </script> 306 </script>
306 307
307 <style lang="scss"> 308 <style lang="scss">
308 .content { 309 .content {
309 min-height: 100vh; 310 min-height: 100vh;
310 background-color: #f2f2f2; 311 background-color: #f2f2f2;
311 display: flex; 312 display: flex;
312 flex-direction: column; 313 flex-direction: column;
313 align-items: center; 314 align-items: center;
314 justify-content: space-between; 315 justify-content: space-between;
315 padding: 20rpx 40rpx; 316 padding: 20rpx 40rpx;
316 box-sizing: border-box; 317 box-sizing: border-box;
317 318
318 .partentCheck{ 319 .partentCheck{
319 width: 16px; 320 width: 16px;
320 height: 16px; 321 height: 16px;
321 border-radius: 22px; 322 border-radius: 22px;
322 border: 1px solid #CFCFCF; 323 border: 1px solid #CFCFCF;
323 background-color: #FFFFFF; 324 background-color: #FFFFFF;
324 margin: 6px; 325 margin: 6px;
325 } 326 }
326 .partentChecked{ 327 .partentChecked{
327 width: 18px; 328 width: 18px;
328 height: 18px; 329 height: 18px;
329 border-radius: 22px; 330 border-radius: 22px;
330 background-color: #FF6B4A; 331 background-color: #FF6B4A;
331 margin: 6px; 332 margin: 6px;
332 .correct { 333 .correct {
333 display: inline-block; 334 display: inline-block;
334 position: relative; 335 position: relative;
335 width: 10rpx; 336 width: 10rpx;
336 height: 2rpx; 337 height: 2rpx;
337 background: #FFFFFF; 338 background: #FFFFFF;
338 line-height: 0; 339 line-height: 0;
339 font-size: 0; 340 font-size: 0;
340 position: relative; 341 position: relative;
341 top: -7px; 342 top: -7px;
342 left: 4px; 343 left: 4px;
343 -webkit-transform: rotate(45deg); 344 -webkit-transform: rotate(45deg);
344 } 345 }
345 .correct:after { 346 .correct:after {
346 content: '/'; 347 content: '/';
347 display: block; 348 display: block;
348 width: 16rpx; 349 width: 16rpx;
349 height: 2rpx; 350 height: 2rpx;
350 background: #FFFFFF; 351 background: #FFFFFF;
351 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 352 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
352 } 353 }
353 } 354 }
354 355
355 .card{ 356 .card{
356 background-color: #FFFFFF; 357 background-color: #FFFFFF;
357 border-radius: 16rpx; 358 border-radius: 16rpx;
358 box-sizing: border-box; 359 box-sizing: border-box;
359 padding: 36rpx 36rpx 36rpx 18rpx; 360 padding: 36rpx 36rpx 36rpx 18rpx;
360 display: flex; 361 display: flex;
361 flex-direction: column; 362 flex-direction: column;
362 align-items: center; 363 align-items: center;
363 justify-content: space-between; 364 justify-content: space-between;
364 margin-bottom: 180rpx; 365 margin-bottom: 180rpx;
365 .cardHeader{ 366 .cardHeader{
366 width: 100%; 367 width: 100%;
367 height: 36rpx; 368 height: 36rpx;
368 display: flex; 369 display: flex;
369 align-items: center; 370 align-items: center;
370 justify-content: flex-start; 371 justify-content: flex-start;
371 margin-bottom: 20rpx; 372 margin-bottom: 20rpx;
372 image{ 373 image{
373 height: 32rpx; 374 height: 32rpx;
374 width: 32rpx; 375 width: 32rpx;
375 padding-left: 6px; 376 padding-left: 6px;
376 padding-right: 10px; 377 padding-right: 10px;
377 } 378 }
378 text{ 379 text{
379 // font-family: PingFangSC-Regular; 380 // font-family: PingFangSC-Regular;
380 font-size: 14px; 381 font-size: 14px;
381 color: #333333; 382 color: #333333;
382 letter-spacing: -0.26px; 383 letter-spacing: -0.26px;
383 } 384 }
384 } 385 }
385 .cardBody{ 386 .cardBody{
386 width: 100%; 387 width: 100%;
387 min-height: 300rpx; 388 min-height: 300rpx;
388 display: flex; 389 display: flex;
389 align-items: center; 390 align-items: center;
390 justify-content: space-between; 391 justify-content: space-between;
391 .goodInfo{ 392 .goodInfo{
392 width: 390rpx; 393 width: 390rpx;
393 display: flex; 394 display: flex;
394 flex-direction: row; 395 flex-direction: row;
395 justify-content: flex-start; 396 justify-content: flex-start;
396 padding-left: 6px; 397 padding-left: 6px;
397 398
398 .imageWrap{ 399 .imageWrap{
399 height: 188rpx; 400 height: 188rpx;
400 width: 188rpx; 401 width: 188rpx;
401 margin-right: 28rpx; 402 margin-right: 28rpx;
402 403
403 image{ 404 image{
404 border-radius: 4px; 405 border-radius: 4px;
405 height: 188rpx; 406 height: 188rpx;
406 width: 188rpx; 407 width: 188rpx;
407 } 408 }
408 } 409 }
409 .infoRight{ 410 .infoRight{
410 display: flex; 411 display: flex;
411 flex-direction: column; 412 flex-direction: column;
412 align-items: flex-start; 413 align-items: flex-start;
413 justify-content: space-between; 414 justify-content: space-between;
414 min-height: 240rpx; 415 min-height: 240rpx;
415 .goodName{ 416 .goodName{
416 display: -webkit-box; 417 display: -webkit-box;
417 -webkit-box-orient: vertical; 418 -webkit-box-orient: vertical;
418 -webkit-line-clamp: 2; 419 -webkit-line-clamp: 2;
419 text-align: justify; 420 text-align: justify;
420 overflow: hidden; 421 overflow: hidden;
421 font-size: 28rpx; 422 font-size: 28rpx;
422 color: #333333; 423 color: #333333;
423 } 424 }
424 .describ{ 425 .describ{
425 width: 100%; 426 width: 100%;
426 // min-height: 80rpx; 427 // min-height: 80rpx;
427 // box-sizing: border-box; 428 // box-sizing: border-box;
428 // padding: 10rpx; 429 // padding: 10rpx;
429 font-size: 20rpx; 430 font-size: 20rpx;
430 letter-spacing: -0.23px; 431 letter-spacing: -0.23px;
431 text-align: justify; 432 text-align: justify;
432 color: #999999; 433 color: #999999;
433 // background: #F9F9F9; 434 // background: #F9F9F9;
434 // display: flex; 435 // display: flex;
435 // justify-content: center; 436 // justify-content: center;
436 // align-items: center; 437 // align-items: center;
437 // text{ 438 // text{
438 // text-overflow: -o-ellipsis-lastline; 439 // text-overflow: -o-ellipsis-lastline;
439 // overflow: hidden; 440 // overflow: hidden;
440 // text-overflow: ellipsis; 441 // text-overflow: ellipsis;
441 // display: -webkit-box; 442 // display: -webkit-box;
442 // -webkit-line-clamp: 2; 443 // -webkit-line-clamp: 2;
443 // line-clamp: 2; 444 // line-clamp: 2;
444 // -webkit-box-orient: vertical; 445 // -webkit-box-orient: vertical;
445 // } 446 // }
446 // .icon { 447 // .icon {
447 // width: 0; 448 // width: 0;
448 // height: 0; 449 // height: 0;
449 // border-left: 5px transparent; 450 // border-left: 5px transparent;
450 // border-right: 5px transparent; 451 // border-right: 5px transparent;
451 // border-top: 5px #979797; 452 // border-top: 5px #979797;
452 // border-bottom: 0 transparent; 453 // border-bottom: 0 transparent;
453 // border-style: solid; 454 // border-style: solid;
454 // position: relative; 455 // position: relative;
455 // margin-left: 10px; 456 // margin-left: 10px;
456 // // transform: scaleY(-1); 457 // // transform: scaleY(-1);
457 // } 458 // }
458 // .icon::after{ 459 // .icon::after{
459 // content: ''; 460 // content: '';
460 // position: absolute; 461 // position: absolute;
461 // top: -6.5px; 462 // top: -6.5px;
462 // left: -5px; 463 // left: -5px;
463 // border-left: 5px transparent; 464 // border-left: 5px transparent;
464 // border-right: 5px transparent; 465 // border-right: 5px transparent;
465 // border-top: 5px #FFFFFF; 466 // border-top: 5px #FFFFFF;
466 // border-bottom: 0 transparent; 467 // border-bottom: 0 transparent;
467 // border-style: solid; 468 // border-style: solid;
468 // } 469 // }
469 } 470 }
470 .priceBox{ 471 .priceBox{
471 display: flex; 472 display: flex;
472 justify-content: space-between; 473 justify-content: space-between;
473 align-items: center; 474 align-items: center;
474 // margin-top: 26px; 475 // margin-top: 26px;
475 width: 100%; 476 width: 100%;
476 font-size: 14px; 477 font-size: 14px;
477 color: #999999; 478 color: #999999;
478 .maxCount{ 479 .maxCount{
479 color: #999999; 480 color: #999999;
480 font-size: 24rpx; 481 font-size: 24rpx;
481 } 482 }
482 .price{ 483 .price{
483 color: #FF6B4A; 484 color: #FF6B4A;
484 font-size: 28rpx; 485 font-size: 28rpx;
485 } 486 }
486 .counter{ 487 .counter{
487 display: flex; 488 display: flex;
488 flex-direction: row; 489 flex-direction: row;
489 justify-content: space-between; 490 justify-content: space-between;
490 align-items: center; 491 align-items: center;
491 font-size: 28rpx; 492 font-size: 28rpx;
492 color: #333333; 493 color: #333333;
493 width: 122rpx; 494 width: 122rpx;
494 .btn{ 495 .btn{
495 display: flex; 496 display: flex;
496 justify-content: center; 497 justify-content: center;
497 line-height: 32rpx; 498 line-height: 32rpx;
498 height: 32rpx; 499 height: 32rpx;
499 width: 32rpx; 500 width: 32rpx;
500 background-color: #F2F2F2; 501 background-color: #F2F2F2;
501 color: #CFCFCF; 502 color: #CFCFCF;
502 } 503 }
503 } 504 }
504 } 505 }
505 } 506 }
506 } 507 }
507 } 508 }
508 } 509 }
509 510
510 .footer{ 511 .footer{
511 position: fixed; 512 position: fixed;
512 left: 0; 513 left: 0;
513 bottom: 0px; 514 bottom: 0px;
514 height: 112rpx; 515 height: 112rpx;
515 width: 100%; 516 width: 100%;
516 background-color: #FFFFFF; 517 background-color: #FFFFFF;
517 font-size: 16px; 518 font-size: 16px;
518 display: flex; 519 display: flex;
519 justify-content: space-between; 520 justify-content: space-between;
520 align-items: center; 521 align-items: center;
521 .footerLeft{ 522 .footerLeft{
522 display: flex; 523 display: flex;
523 justify-content: center; 524 justify-content: center;
524 align-items: center; 525 align-items: center;
525 width: 50%; 526 width: 50%;
526 color: #333333; 527 color: #333333;
527 text{ 528 text{
528 color: #FF6B4A; 529 color: #FF6B4A;
529 } 530 }
530 } 531 }
531 .footerRight{ 532 .footerRight{
532 display: flex; 533 display: flex;
533 justify-content: flex-end; 534 justify-content: flex-end;
534 align-items: center; 535 align-items: center;
535 width: 50%; 536 width: 50%;
536 margin-right: 26rpx; 537 margin-right: 26rpx;
537 .paybtn{ 538 .paybtn{
538 display: flex; 539 display: flex;
539 justify-content: center; 540 justify-content: center;
540 align-items: center; 541 align-items: center;
541 background: #FF6B4A; 542 background: #FF6B4A;
542 border-radius: 20px; 543 border-radius: 20px;
543 border-radius: 20px; 544 border-radius: 20px;
544 color: #FFFFFF; 545 color: #FFFFFF;
545 width: 204rpx; 546 width: 204rpx;
546 height: 80rpx; 547 height: 80rpx;
547 } 548 }
548 } 549 }
549 550
550 } 551 }
551 } 552 }
552 553
553 </style> 554 </style>
554 555
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @5638d36
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.priceArea.Min_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
306 <!-- 底部菜单 --> 305 <!-- 底部菜单 -->
307 <view class="botton"> 306 <view class="botton">
308 <view 307 <view
309 @tap="toCart()" 308 @tap="toCart()"
310 class="botton_1" 309 class="botton_1"
311 > 310 >
312 <image v-bind:src="imgShop.img"></image> 311 <image v-bind:src="imgShop.img"></image>
313 <view class="botton_image">购物车</view> 312 <view class="botton_image">购物车</view>
314 </view> 313 </view>
315 <view class="botton_2"> 314 <view class="botton_2">
316 <view 315 <view
317 class="botton_input" 316 class="botton_input"
318 @tap="addCart()" 317 @tap="addCart()"
319 >加入购物车</view> 318 >加入购物车</view>
320 <view 319 <view
321 class="botton_now" 320 class="botton_now"
322 @tap="goPerchase()" 321 @tap="goPerchase()"
323 >立即购买</view> 322 >立即购买</view>
324 </view> 323 </view>
325 </view> 324 </view>
326 </view> 325 </view>
327 </template> 326 </template>
328 327
329 <script> 328 <script>
330 import store from '@/store' 329 import store from '@/store'
331 export default { 330 export default {
332 data () { 331 data () {
333 return { 332 return {
334 test: '', 333 test: '',
335 goodType: 2, 334 goodType: 2,
336 pid: 0, 335 pid: 0,
337 // 购物车数据 336 // 购物车数据
338 addCartList: { 337 addCartList: {
339 mp_id: 335, 338 mp_id: 0,
339 uid: 0,
340 sk_id: 0, 340 sk_id: 0,
341 num: 1, 341 num: 1,
342 price: '', 342 price: '',
343 }, 343 },
344 screenItems: [ 344 screenItems: [
345 { current: 0, text: '商品介绍' }, 345 { current: 0, text: '商品介绍' },
346 { current: 1, text: '规格参数' }, 346 { current: 1, text: '规格参数' },
347 { current: 2, text: '售后保障' }, 347 { current: 2, text: '售后保障' },
348 ], 348 ],
349 current: 0, 349 current: 0,
350 starCount: 5, 350 starCount: 5,
351 parameter: [ 351 parameter: [
352 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, 352 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
353 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, 353 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
354 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, 354 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
355 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, 355 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
356 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, 356 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
357 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }, 357 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' },
358 ], 358 ],
359 esvalue: '宝贝好评率', 359 esvalue: '宝贝好评率',
360 introduction: { 360 introduction: {
361 material: '钛合金', 361 material: '钛合金',
362 func: '抗疲劳/防辐射', 362 func: '抗疲劳/防辐射',
363 rate: '男/女', 363 rate: '男/女',
364 }, 364 },
365 imgAll: '/static/img/detail/d8.png', 365 imgAll: '/static/img/detail/d8.png',
366 photoes: [ 366 photoes: [
367 { value: '日常办公', img: '/static/img/detail/d9.png' }, 367 { value: '日常办公', img: '/static/img/detail/d9.png' },
368 { value: '上网', img: '/static/img/detail/d10.png' }, 368 { value: '上网', img: '/static/img/detail/d10.png' },
369 { value: '追剧', img: '/static/img/detail/d11.png' }, 369 { value: '追剧', img: '/static/img/detail/d11.png' },
370 { value: '玩游戏', img: '/static/img/detail/d12.png' }, 370 { value: '玩游戏', img: '/static/img/detail/d12.png' },
371 ], 371 ],
372 imgDetail: '/static/img/detail/d13.png', 372 imgDetail: '/static/img/detail/d13.png',
373 imgShop: { 373 imgShop: {
374 img: '/static/tab-cart.png', 374 img: '/static/tab-cart.png',
375 IsShown: false, 375 IsShown: false,
376 }, 376 },
377 tag: { 377 tag: {
378 prod_tag_freesend: [{ 378 prod_tag_freesend: [{
379 label: '眼镜盒', 379 label: '眼镜盒',
380 value: '262', 380 value: '262',
381 }], 381 }],
382 }, 382 },
383 } 383 }
384 }, 384 },
385 onLoad: function ({ pid }) { 385 onLoad: function ({ pid, sk_id }) {
386 this.pid = pid 386 this.pid = pid
387 // console.log('sk_id=====>',sk_id)
387 store.dispatch('read/fetch', { 388 store.dispatch('read/fetch', {
388 pid, 389 pid,
390 sk_id,
389 }).then(() => { 391 }).then(() => {
390 this.parameter[0].slength = `${this.goodInfo.frame_width}mm` 392 this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
391 this.parameter[1].slength = `${this.goodInfo.glass_width}mm` 393 this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
392 this.parameter[2].slength = `${this.goodInfo.glass_height}mm` 394 this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
393 this.parameter[3].slength = `${this.goodInfo.nose_width}mm` 395 this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
394 this.parameter[4].slength = `${this.goodInfo.leg_long}mm` 396 this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
395 this.parameter[5].slength = `${this.goodInfo.weight}mm` 397 this.parameter[5].slength = `${this.goodInfo.weight}mm`
396 this.tag = this.goodInfo.tag 398 this.tag = this.goodInfo.tag
397 this.addCartList.price = this.goodInfo.p_sale_price
398 this.test = this.goodInfo.prodIntro1 399 this.test = this.goodInfo.prodIntro1
399 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ') 400 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
401 // addCart
402 this.addCartList.price = this.goodInfo.p_sale_price
403 this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id
404 this.addCartList.mp_id = this.goodInfo.glassData.mp_id
405 this.addCartList.uid = this.$store.state.user.userInfo.uid
400 }) 406 })
407 // console.log(this.$store.state.user.userInfo.uid + 'ssss')
401 }, 408 },
402 computed: { 409 computed: {
403 updateGoodType () { 410 updateGoodType () {
404 return this.goodType 411 return this.goodType
405 }, 412 },
406 goodInfo () { 413 goodInfo () {
407 console.log(this.$store.state.read.goodInfo) 414 console.log(this.$store.state.read.goodInfo)
408 return this.$store.state.read.goodInfo 415 return this.$store.state.read.goodInfo
409 }, 416 },
410 }, 417 },
411 methods: { 418 methods: {
412 // 前往购物车 419 // 前往购物车
413 toCart() { 420 toCart() {
414 uni.switchTab({ 421 uni.switchTab({
415 url: '/pages/cart/cart', 422 url: '/pages/cart/cart',
416 success: res => {}, 423 success: res => {},
417 fail: (error) => { console.log('跳转购物车失败======>', error) }, 424 fail: (error) => { console.log('跳转购物车失败======>', error) },
418 complete: () => { console.log('toCart') }, 425 complete: () => { console.log('toCart') },
419 }) 426 })
420 }, 427 },
421 // 加入购物车 428 // 加入购物车
422 addCart () { 429 addCart () {
423 store.dispatch('cart/addCart', { 430 store.dispatch('cart/addCart', {
424 uid: this.$store.state.user.userInfo.uid, 431 uid: this.$store.state.user.userInfo.uid,
425 openid: this.$store.state.user.userInfo.openid, 432 openid: this.$store.state.user.userInfo.openid,
426 mp_id: this.addCartList.mp_id, 433 mp_id: this.addCartList.mp_id,
427 sk_id: this.addCartList.sk_id, 434 sk_id: this.addCartList.sk_id,
428 num: this.addCartList.num, 435 num: this.addCartList.num,
429 pid: this.pid, 436 pid: this.pid,
430 price: this.addCartList.price, 437 price: this.addCartList.price,
431 checkedSKU: {},
432 }) 438 checkedSKU: {},
433 store.dispatch('cart/getCartList', { 439 })
434 uid: this.$store.state.user.userInfo.uid, // 用户id 440 store.dispatch('cart/getCartList', {
435 }) 441 uid: this.$store.state.user.userInfo.uid, // 用户id
436 }, 442 })
437 goPerchase () { 443 },
438 // switch (this.updateGoodType) { 444 goPerchase () {
439 // case '1': 445 // switch (this.updateGoodType) {
440 console.log('goPerchase') 446 // case '1':
441 uni.navigateTo({ 447 console.log('goPerchase')
442 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, 448 uni.navigateTo({
443 success: res => {}, 449 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
444 fail: (error) => { console.log('跳转参数选择失败======>', error) }, 450 success: res => {},
445 complete: () => { console.log('goPerchase') }, 451 fail: (error) => { console.log('跳转参数选择失败======>', error) },
446 }) 452 complete: () => { console.log('goPerchase') },
447 // break 453 })
448 // case '2': 454 // break
449 // uni.navigateTo({ 455 // case '2':
450 // url: '../detailStandard/detailStandard_k', 456 // uni.navigateTo({
451 // success: res => {}, 457 // url: '../detailStandard/detailStandard_k',
452 // fail: () => {}, 458 // success: res => {},
453 // complete: () => {} 459 // fail: () => {},
454 // }) 460 // complete: () => {}
455 // break 461 // })
456 // case '3': 462 // break
457 // uni.navigateTo({ 463 // case '3':
458 // url: '../purchaseLenses/purchaseLenses', 464 // uni.navigateTo({
459 // success: res => {}, 465 // url: '../purchaseLenses/purchaseLenses',
460 // fail: () => {}, 466 // success: res => {},
461 // complete: () => {} 467 // fail: () => {},
462 // }) 468 // complete: () => {}
463 // break 469 // })
464 // case '4': 470 // break
465 // uni.navigateTo({ 471 // case '4':
466 // url: '../detailStandard/detailStandard_sun', 472 // uni.navigateTo({
467 // success: res => {}, 473 // url: '../detailStandard/detailStandard_sun',
468 // fail: () => {}, 474 // success: res => {},
469 // complete: () => {} 475 // fail: () => {},
470 // }) 476 // complete: () => {}
471 // break 477 // })
472 // default : 478 // break
473 // break 479 // default :
474 // } 480 // break
475 }, 481 // }
476 // 加入购物车
477 addCart () {
478 store.dispatch('cart/addCart', {
479 uid: this.$store.state.user.userInfo.uid,
480 openid: this.$store.state.user.userInfo.openid,
481 pid: this.pid,
482 checkedSKU: {},
483 })
484 store.dispatch('cart/getCartList', {
485 uid: this.$store.state.user.userInfo.uid, // 用户id
486 })
487 },
488 tabChange (e) { 482 },
489 if (this.current !== e) { 483 // 加入购物车
490 this.current = e 484 // addCart () {
491 } 485 // store.dispatch('cart/addCart', {
492 }, 486 // uid: this.$store.state.user.userInfo.uid,
493 }, 487 // openid: this.$store.state.user.userInfo.openid,
494 } 488 // pid: this.pid,
495 </script> 489 // checkedSKU: {},
496 <style lang='scss'> 490 // })
497 .container { 491 // store.dispatch('cart/getCartList', {
498 background-color: #f8f8f8; 492 // uid: this.$store.state.user.userInfo.uid, // 用户id
499 } 493 // })
500 .D1, 494 // },
501 .D2, 495 tabChange (e) {
502 .D3, 496 if (this.current !== e) {
503 .D4, 497 this.current = e
504 .D6 { 498 }
505 background: #ffffff; 499 },
506 margin-bottom: 10px; 500 },
507 padding: 8px 20px 8px 20px; 501 }
508 box-sizing: border-box; 502 </script>
509 .swiperImage { 503 <style lang='scss'>
510 width: 684rpx; 504 .container {
511 height: 480rpx; 505 background-color: #f8f8f8;
512 image { 506 }
513 max-width: 100%; 507 .D1,
514 max-height: 100%; 508 .D2,
515 border-radius: 16rpx; 509 .D3,
516 } 510 .D4,
517 } 511 .D6 {
518 } 512 background: #ffffff;
519 .D5 { 513 margin-bottom: 10px;
520 background: #ffffff; 514 padding: 8px 20px 8px 20px;
521 padding: 8px 20px 8px 20px; 515 box-sizing: border-box;
522 box-sizing: border-box; 516 .swiperImage {
523 } 517 width: 684rpx;
524 .swiperImage { 518 height: 480rpx;
525 width: 100%; 519 image {
526 height: 560rpx; 520 max-width: 100%;
527 .swiper-item { 521 max-height: 100%;
528 width: 100%; 522 border-radius: 16rpx;
529 image { 523 }
530 width: 100%; 524 }
531 } 525 }
532 } 526 .D5 {
533 } 527 background: #ffffff;
534 .D1 { 528 padding: 8px 20px 8px 20px;
535 .D1_price { 529 box-sizing: border-box;
536 color: #eb5d3b; 530 }
537 font-size: 18px; 531 .swiperImage {
538 margin-top: 5px; 532 width: 100%;
539 font-family: "PingFangSC-Semibold"; 533 height: 560rpx;
540 display: flex; 534 .swiper-item {
541 justify-content: space-between; 535 width: 100%;
542 .D1_number { 536 image {
543 color: #999999; 537 width: 100%;
544 font-size: 14px; 538 }
545 font-family: "PingFangSC-Regular"; 539 }
546 } 540 }
547 } 541 .D1 {
548 .D1_name { 542 .D1_price {
549 font-size: 16px; 543 color: #eb5d3b;
550 font-family: "PingFangSC-Semibold"; 544 font-size: 18px;
551 margin-top: 5px; 545 margin-top: 5px;
552 .D1_name1 { 546 font-family: "PingFangSC-Semibold";
553 font-weight: bold; 547 display: flex;
554 font-size: 16px; 548 justify-content: space-between;
555 color: #333333; 549 .D1_number {
556 } 550 color: #999999;
557 } 551 font-size: 14px;
558 .D1_spans { 552 font-family: "PingFangSC-Regular";
559 font-size: 10px; 553 }
560 color: #999999; 554 }
561 margin-top: 5px; 555 .D1_name {
562 span { 556 font-size: 16px;
563 height: 14px; 557 font-family: "PingFangSC-Semibold";
564 margin-right: 10px; 558 margin-top: 5px;
565 } 559 .D1_name1 {
566 } 560 font-weight: bold;
567 } 561 font-size: 16px;
568 .D2 { 562 color: #333333;
569 font-size: 14px; 563 }
570 font-family: "PingFangSC-Regular"; 564 }
571 view { 565 .D1_spans {
572 height: 24px; 566 font-size: 10px;
573 } 567 color: #999999;
574 .D2_span1 { 568 margin-top: 5px;
575 color: #999999; 569 span {
576 } 570 height: 14px;
577 .D2_span2 { 571 margin-right: 10px;
578 color: #333333; 572 }
579 } 573 }
580 } 574 }
581 .D3 { 575 .D2 {
582 .screenBar { 576 font-size: 14px;
583 width: 670rpx; 577 font-family: "PingFangSC-Regular";
584 margin-top: 20rpx; 578 view {
585 margin-bottom: 24rpx; 579 height: 24px;
586 display: flex; 580 }
587 flex-direction: row; 581 .D2_span1 {
588 justify-content: space-between; 582 color: #999999;
589 align-items: center; 583 }
590 font-size: 14px; 584 .D2_span2 {
591 color: #333333; 585 color: #333333;
592 transition: all 0.2s; 586 }
593 } 587 }
594 .screen-item { 588 .D3 {
595 font-size: 32rpx; 589 .screenBar {
596 color: #333333; 590 width: 670rpx;
597 display: flex; 591 margin-top: 20rpx;
598 transition: all 0.2s; 592 margin-bottom: 24rpx;
599 .D3_list { 593 display: flex;
600 margin-bottom: 4px; 594 flex-direction: row;
601 } 595 justify-content: space-between;
602 .D3_list view { 596 align-items: center;
603 display: flex; 597 font-size: 14px;
604 align-content: center; 598 color: #333333;
605 font-size: 14px; 599 transition: all 0.2s;
606 color: #333333; 600 }
607 } 601 .screen-item {
608 .D3_list image { 602 font-size: 32rpx;
609 width: 50px; 603 color: #333333;
610 height: 25px; 604 display: flex;
611 margin-right: 6px; 605 transition: all 0.2s;
612 } 606 .D3_list {
613 .D3_list span { 607 margin-bottom: 4px;
614 margin-left: 6px; 608 }
615 margin-right: 5px; 609 .D3_list view {
616 font-family: "PingFangSC-Regular"; 610 display: flex;
617 } 611 align-content: center;
618 } 612 font-size: 14px;
619 .active { 613 color: #333333;
620 border-bottom: 4rpx solid #ff6b4a; 614 }
621 } 615 .D3_list image {
622 .customerService { 616 width: 50px;
623 margin-bottom: 90rpx; 617 height: 25px;
624 .serviceItem { 618 margin-right: 6px;
625 margin-bottom: 32rpx; 619 }
626 .title { 620 .D3_list span {
627 display: flex; 621 margin-left: 6px;
628 flex-direction: row; 622 margin-right: 5px;
629 align-items: center; 623 font-family: "PingFangSC-Regular";
630 .titleText { 624 }
631 font-size: 14px; 625 }
632 color: #333333; 626 .active {
633 margin-bottom: 12rpx; 627 border-bottom: 4rpx solid #ff6b4a;
634 } 628 }
635 } 629 .customerService {
636 .itemContent { 630 margin-bottom: 90rpx;
637 font-size: 14px; 631 .serviceItem {
638 color: #999999; 632 margin-bottom: 32rpx;
639 margin-left: 18rpx; 633 .title {
640 } 634 display: flex;
641 } 635 flex-direction: row;
642 .serviceItem2 { 636 align-items: center;
643 margin-left: 18rpx; 637 .titleText {
644 margin-bottom: 32rpx; 638 font-size: 14px;
645 .titleText { 639 color: #333333;
646 font-size: 14px; 640 margin-bottom: 12rpx;
647 color: #ff6b4a; 641 }
648 } 642 }
649 .itemContent { 643 .itemContent {
650 font-size: 14px; 644 font-size: 14px;
651 color: #999999; 645 color: #999999;
652 .itemContent-child { 646 margin-left: 18rpx;
653 margin-bottom: 40rpx; 647 }
654 .contentTitle { 648 }
655 border-bottom: 1px solid #ff6b4a; 649 .serviceItem2 {
656 } 650 margin-left: 18rpx;
657 } 651 margin-bottom: 32rpx;
658 } 652 .titleText {
659 } 653 font-size: 14px;
660 } 654 color: #ff6b4a;
661 } 655 }
662 .D4 { 656 .itemContent {
663 .D4_esvalue { 657 font-size: 14px;
664 font-size: 14px; 658 color: #999999;
665 color: #333333; 659 .itemContent-child {
666 display: flex; 660 margin-bottom: 40rpx;
667 justify-content: space-between; 661 .contentTitle {
668 margin-bottom: 10px; 662 border-bottom: 1px solid #ff6b4a;
669 .D4_2 { 663 }
670 width: 90px; 664 }
671 display: flex; 665 }
672 align-items: center; 666 }
673 justify-content: space-between; 667 }
674 } 668 }
675 } 669 .D4 {
676 .D4_esvalue view { 670 .D4_esvalue {
677 font-size: 14px; 671 font-size: 14px;
678 color: #333333; 672 color: #333333;
679 font-weight: bold; 673 display: flex;
680 } 674 justify-content: space-between;
681 .D4_list{ 675 margin-bottom: 10px;
682 display: grid; 676 .D4_2 {
683 grid-row-gap: 10px; 677 width: 90px;
684 grid-column-gap: 4px; 678 display: flex;
685 } 679 align-items: center;
686 .D4_list view { 680 justify-content: space-between;
687 display: flex; 681 }
688 justify-content: center; 682 }
689 align-items: center; 683 .D4_esvalue view {
690 font-size: 12px; 684 font-size: 14px;
691 width: 118px; 685 color: #333333;
692 height: 24px; 686 font-weight: bold;
693 border-radius: 2px; 687 }
694 background: #f2f2f2; 688 .D4_list{
695 color: #666666; 689 display: grid;
696 // letter-spacing: 1px; 690 grid-row-gap: 10px;
697 } 691 grid-column-gap: 4px;
698 } 692 }
699 .D5 { 693 .D4_list view {
700 .D5_fixed1 { 694 display: flex;
701 display: flex; 695 justify-content: center;
702 justify-content: space-between; 696 align-items: center;
703 align-content: center; 697 font-size: 12px;
704 margin-bottom: 12px; 698 width: 118px;
705 view { 699 height: 24px;
706 font-size: 14px; 700 border-radius: 2px;
707 color: #333333; 701 background: #f2f2f2;
708 font-weight: bold; 702 color: #666666;
709 font-family: "PingFangSC-Medium"; 703 // letter-spacing: 1px;
710 line-height: 24px; 704 }
711 } 705 }
712 image { 706 .D5 {
713 width: 240rpx; 707 .D5_fixed1 {
714 height: 3px; 708 display: flex;
715 margin-top: 10px; 709 justify-content: space-between;
716 } 710 align-content: center;
717 } 711 margin-bottom: 12px;
718 .D5_all { 712 view {
719 width: 100%; 713 font-size: 14px;
720 margin-top: 30rpx; 714 color: #333333;
721 margin-right: 30rpx; 715 font-weight: bold;
722 margin-bottom: 180rpx; 716 font-family: "PingFangSC-Medium";
723 font-family: "PingFangSC-Regular"; 717 line-height: 24px;
724 // border: #999999 solid 1.5px; 718 }
725 } 719 image {
726 } 720 width: 240rpx;
727 .D6 { 721 height: 3px;
728 width: 100%; 722 margin-top: 10px;
729 height: 430px; 723 }
730 background: #f9f6ed; 724 }
731 margin-bottom: 74px; 725 .D5_all {
732 view { 726 width: 100%;
733 text-align: center; 727 margin-top: 30rpx;
734 } 728 margin-right: 30rpx;
735 .D6_v1 { 729 margin-bottom: 180rpx;
736 font-weight: bold; 730 font-family: "PingFangSC-Regular";
737 } 731 // border: #999999 solid 1.5px;
738 .D6_v2 { 732 }
739 font-size: 14px; 733 }
740 margin-bottom: 30px; 734 .D6 {
741 } 735 width: 100%;
742 .D6_v5 { 736 height: 430px;
743 .D6_v5_s1 { 737 background: #f9f6ed;
744 font-weight: bold; 738 margin-bottom: 74px;
745 } 739 view {
746 .D6_v5_s2 { 740 text-align: center;
747 font-size: 14px; 741 }
748 } 742 .D6_v1 {
749 } 743 font-weight: bold;
750 } 744 }
751 .botton { 745 .D6_v2 {
752 position: fixed; 746 font-size: 14px;
753 bottom: 0; 747 margin-bottom: 30px;
754 height: 74px; 748 }
755 width: 100%; 749 .D6_v5 {
756 background: #ffffff; 750 .D6_v5_s1 {
757 padding: 20px 20px 8px 20px; 751 font-weight: bold;
758 font-family: "PingFangSC-Regular"; 752 }
759 box-sizing: border-box; 753 .D6_v5_s2 {
760 display: flex; 754 font-size: 14px;
761 justify-content: space-between; 755 }
762 align-content: center; 756 }
763 .botton_1 { 757 }
764 width: 20%; 758 .botton {
765 height: 100%; 759 position: fixed;
766 text-align: center; 760 bottom: 0;
767 color: #989898; 761 height: 74px;
768 } 762 width: 100%;
769 image { 763 background: #ffffff;
770 width: 60%; 764 padding: 20px 20px 8px 20px;
771 height: 30px; 765 font-family: "PingFangSC-Regular";
772 } 766 box-sizing: border-box;
773 .botton_image { 767 display: flex;
774 font-size: 12px; 768 justify-content: space-between;
775 text-align: center; 769 align-content: center;
776 } 770 .botton_1 {
777 .botton_2 { 771 width: 20%;
778 width: 74%; 772 height: 100%;
779 height: 86%; 773 text-align: center;
780 display: grid; 774 color: #989898;
781 grid-template-columns: 50% 50%; 775 }
782 } 776 image {
783 .botton_input { 777 width: 60%;
784 display: inline-flex; 778 height: 30px;
785 align-items: center; 779 }
786 justify-content: space-around; 780 .botton_image {
787 background: #fff0ec; 781 font-size: 12px;
788 font-size: 16px; 782 text-align: center;
789 color: #ff6b4a; 783 }
790 border-radius: 20px 0 0 20px; 784 .botton_2 {
791 } 785 width: 74%;
792 .botton_now { 786 height: 86%;
793 display: inline-flex; 787 display: grid;
794 align-items: center; 788 grid-template-columns: 50% 50%;
795 justify-content: space-around; 789 }
796 background: #ff6b4a; 790 .botton_input {
797 font-size: 16px; 791 display: inline-flex;
798 color: #ffffff; 792 align-items: center;
799 border-radius: 0 20px 20px 0; 793 justify-content: space-around;
800 } 794 background: #fff0ec;
801 } 795 font-size: 16px;
src/pages/index/index.vue
Diff comments   View file @5638d36
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/store/modules/read.js
Diff comments   View file @5638d36
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