刘文博 / gulu-vue

Download as
Browse Code »

Commit b9fb65756bd1f5c23acec70473f8d84a74494c4c

Authored by 喻鹏
1 parent b83c44fe1f
Exists in master

购物车和推荐产品根据sk_id来对应价格

Showing 5 changed files with 35 additions and 15 deletions   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @b9fb657
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.oldPrice !== undefined?goods.oldPrice:goods.real_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.old_price}}
16 </view> 16 </view>
17 </view> 17 </view>
18 <view class="trade_num">{{goods.trade_num}}人购买</view> 18 <view class="trade_num">{{goods.trade_num}}人购买</view>
19 </view> 19 </view>
20 </view> 20 </view>
21 </template> 21 </template>
22 22
23 <script> 23 <script>
24 export default { 24 export default {
25 props: { 25 props: {
26 /** 26 /**
27 * 商品数据 27 * 商品数据
28 */ 28 */
29 goods: { 29 goods: {
30 id: Number, 30 id: Number,
31 imgurl: String, 31 imgurl: String,
32 name: String, 32 name: String,
33 rsSon: Object, 33 rsSon: Object,
34 originCost: String, 34 originCost: String,
35 price: String, 35 price: String,
36 trade_num: String, 36 trade_num: String,
37 goodType: String 37 goodType: String
38 } 38 }
39 39
40 }, 40 },
41 created () { 41 created () {
42 }, 42 },
43 data () { 43 data () {
44 return { 44 return {
45 45
46 } 46 }
47 }, 47 },
48 methods: { 48 methods: {
49 toGoods (id) { 49 toGoods (id,sk_id) {
50 console.log('---', '../frameDetail/frameDetail?pid=' + id) 50 console.log('---', '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id)
51 uni.navigateTo({ 51 uni.navigateTo({
52 url: '../frameDetail/frameDetail?pid=' + id, 52 url: '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id,
53 success: res => {}, 53 success: res => {},
54 fail: () => {}, 54 fail: () => {},
55 complete: () => {} 55 complete: () => {}
56 }) 56 })
57 } 57 }
58 } 58 }
59 } 59 }
60 </script> 60 </script>
61 61
62 <style lang="scss"> 62 <style lang="scss">
63 image { 63 image {
64 width: 100%; 64 width: 100%;
65 height: 120rpx; 65 height: 120rpx;
66 } 66 }
67 .name { 67 .name {
68 width: 92%; 68 width: 92%;
69 height: 54rpx; 69 height: 54rpx;
70 padding: 5px 4%; 70 padding: 5px 4%;
71 display: -webkit-box; 71 display: -webkit-box;
72 -webkit-box-orient: vertical; 72 -webkit-box-orient: vertical;
73 -webkit-line-clamp: 2; 73 -webkit-line-clamp: 2;
74 text-align: justify; 74 text-align: justify;
75 overflow: hidden; 75 overflow: hidden;
76 font-size: 24rpx; 76 font-size: 24rpx;
77 color: #333333; 77 color: #333333;
78 } 78 }
79 .info { 79 .info {
80 display: flex; 80 display: flex;
81 justify-content: space-between; 81 justify-content: space-between;
82 align-items: center; 82 align-items: center;
83 width: 92%; 83 width: 92%;
84 padding: 5px 4% 5px 4%; 84 padding: 5px 4% 5px 4%;
85 .priceBox { 85 .priceBox {
86 display: flex; 86 display: flex;
87 justify-content: space-between; 87 justify-content: space-between;
88 align-items: center; 88 align-items: center;
89 .price { 89 .price {
90 color: #eb5d3b; 90 color: #eb5d3b;
91 font-size: 28rpx; 91 font-size: 28rpx;
92 font-weight: 600; 92 font-weight: 600;
93 margin-right: 10rpx; 93 margin-right: 10rpx;
94 } 94 }
95 .originCost { 95 .originCost {
96 text-decoration: line-through; 96 text-decoration: line-through;
97 color: #999999; 97 color: #999999;
98 font-size: 20rpx; 98 font-size: 20rpx;
99 } 99 }
100 } 100 }
101 .trade_num { 101 .trade_num {
102 color: #999999; 102 color: #999999;
103 font-size: 20rpx; 103 font-size: 20rpx;
104 } 104 }
105 } 105 }
106 </style> 106 </style>
107 107
src/pages/cart/cart.vue
Diff comments   View file @b9fb657
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 @b9fb657
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.p_sale_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 <!-- 底部菜单 --> 306 <!-- 底部菜单 -->
307 <view class="botton"> 307 <view class="botton">
308 <view 308 <view
309 @tap="toCart()" 309 @tap="toCart()"
310 class="botton_1" 310 class="botton_1"
311 > 311 >
312 <image v-bind:src="imgShop.img"></image> 312 <image v-bind:src="imgShop.img"></image>
313 <view class="botton_image">购物车</view> 313 <view class="botton_image">购物车</view>
314 </view> 314 </view>
315 <view class="botton_2"> 315 <view class="botton_2">
316 <view 316 <view
317 class="botton_input" 317 class="botton_input"
318 @tap="addCart()" 318 @tap="addCart()"
319 >加入购物车</view> 319 >加入购物车</view>
320 <view 320 <view
321 class="botton_now" 321 class="botton_now"
322 @tap="goPerchase()" 322 @tap="goPerchase()"
323 >立即购买</view> 323 >立即购买</view>
324 </view> 324 </view>
325 </view> 325 </view>
326 </view> 326 </view>
327 </template> 327 </template>
328 328
329 <script> 329 <script>
330 import store from '@/store' 330 import store from '@/store'
331 export default { 331 export default {
332 data () { 332 data () {
333 return { 333 return {
334 test: '', 334 test: '',
335 goodType: 2, 335 goodType: 2,
336 pid: 0, 336 pid: 0,
337 // 购物车数据 337 // 购物车数据
338 addCartList: { 338 addCartList: {
339 mp_id: 335, 339 mp_id: 335,
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 399 this.addCartList.price = this.goodInfo.p_sale_price
398 this.test = this.goodInfo.prodIntro1 400 this.test = this.goodInfo.prodIntro1
399 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ') 401 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
400 }) 402 })
401 }, 403 },
402 computed: { 404 computed: {
403 updateGoodType () { 405 updateGoodType () {
404 return this.goodType 406 return this.goodType
405 }, 407 },
406 goodInfo () { 408 goodInfo () {
407 console.log(this.$store.state.read.goodInfo) 409 console.log(this.$store.state.read.goodInfo)
408 return this.$store.state.read.goodInfo 410 return this.$store.state.read.goodInfo
409 } 411 }
410 }, 412 },
411 methods: { 413 methods: {
412 // 前往购物车 414 // 前往购物车
413 toCart() { 415 toCart() {
414 uni.switchTab({ 416 uni.switchTab({
415 url: '/pages/cart/cart', 417 url: '/pages/cart/cart',
416 success: res => {}, 418 success: res => {},
417 fail: (error) => { console.log('跳转购物车失败======>', error) }, 419 fail: (error) => { console.log('跳转购物车失败======>', error) },
418 complete: () => { console.log('toCart') } 420 complete: () => { console.log('toCart') }
419 }) 421 })
420 }, 422 },
421 // 加入购物车 423 // 加入购物车
422 addCart () { 424 addCart () {
423 store.dispatch('cart/addCart', { 425 store.dispatch('cart/addCart', {
424 uid: this.$store.state.user.userInfo.uid, 426 uid: this.$store.state.user.userInfo.uid,
425 openid: this.$store.state.user.userInfo.openid, 427 openid: this.$store.state.user.userInfo.openid,
426 mp_id: this.addCartList.mp_id, 428 mp_id: this.addCartList.mp_id,
427 sk_id: this.addCartList.sk_id, 429 sk_id: this.addCartList.sk_id,
428 num: this.addCartList.num, 430 num: this.addCartList.num,
429 pid: this.pid, 431 pid: this.pid,
430 price: this.addCartList.price, 432 price: this.addCartList.price,
431 checkedSKU: {} 433 checkedSKU: {}
432 }) 434 })
433 store.dispatch('cart/getCartList', { 435 store.dispatch('cart/getCartList', {
434 uid: this.$store.state.user.userInfo.uid // 用户id 436 uid: this.$store.state.user.userInfo.uid // 用户id
435 }) 437 })
436 }, 438 },
437 goPerchase () { 439 goPerchase () {
438 // switch (this.updateGoodType) { 440 // switch (this.updateGoodType) {
439 // case '1': 441 // case '1':
440 console.log('goPerchase') 442 console.log('goPerchase')
441 uni.navigateTo({ 443 uni.navigateTo({
442 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, 444 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
443 success: res => {}, 445 success: res => {},
444 fail: (error) => { console.log('跳转参数选择失败======>', error) }, 446 fail: (error) => { console.log('跳转参数选择失败======>', error) },
445 complete: () => { console.log('goPerchase') } 447 complete: () => { console.log('goPerchase') }
446 }) 448 })
447 // break 449 // break
448 // case '2': 450 // case '2':
449 // uni.navigateTo({ 451 // uni.navigateTo({
450 // url: '../detailStandard/detailStandard_k', 452 // url: '../detailStandard/detailStandard_k',
451 // success: res => {}, 453 // success: res => {},
452 // fail: () => {}, 454 // fail: () => {},
453 // complete: () => {} 455 // complete: () => {}
454 // }) 456 // })
455 // break 457 // break
456 // case '3': 458 // case '3':
457 // uni.navigateTo({ 459 // uni.navigateTo({
458 // url: '../purchaseLenses/purchaseLenses', 460 // url: '../purchaseLenses/purchaseLenses',
459 // success: res => {}, 461 // success: res => {},
460 // fail: () => {}, 462 // fail: () => {},
461 // complete: () => {} 463 // complete: () => {}
462 // }) 464 // })
463 // break 465 // break
464 // case '4': 466 // case '4':
465 // uni.navigateTo({ 467 // uni.navigateTo({
466 // url: '../detailStandard/detailStandard_sun', 468 // url: '../detailStandard/detailStandard_sun',
467 // success: res => {}, 469 // success: res => {},
468 // fail: () => {}, 470 // fail: () => {},
469 // complete: () => {} 471 // complete: () => {}
470 // }) 472 // })
471 // break 473 // break
472 // default : 474 // default :
473 // break 475 // break
474 // } 476 // }
475 }, 477 },
476 // 加入购物车 478 // 加入购物车
477 addCart () { 479 addCart () {
478 store.dispatch('cart/addCart', { 480 store.dispatch('cart/addCart', {
479 uid: this.$store.state.user.userInfo.uid, 481 uid: this.$store.state.user.userInfo.uid,
480 openid: this.$store.state.user.userInfo.openid, 482 openid: this.$store.state.user.userInfo.openid,
481 pid: this.pid, 483 pid: this.pid,
482 checkedSKU: {} 484 checkedSKU: {}
483 }) 485 })
484 store.dispatch('cart/getCartList', { 486 store.dispatch('cart/getCartList', {
485 uid: this.$store.state.user.userInfo.uid // 用户id 487 uid: this.$store.state.user.userInfo.uid // 用户id
486 }) 488 })
487 }, 489 },
488 tabChange (e) { 490 tabChange (e) {
489 if (this.current !== e) { 491 if (this.current !== e) {
490 this.current = e 492 this.current = e
491 } 493 }
492 } 494 }
493 } 495 }
494 } 496 }
495 </script> 497 </script>
496 <style lang='scss'> 498 <style lang='scss'>
497 .container { 499 .container {
498 background-color: #f8f8f8; 500 background-color: #f8f8f8;
499 } 501 }
500 .D1, 502 .D1,
501 .D2, 503 .D2,
502 .D3, 504 .D3,
503 .D4, 505 .D4,
504 .D6 { 506 .D6 {
505 background: #ffffff; 507 background: #ffffff;
506 margin-bottom: 10px; 508 margin-bottom: 10px;
507 padding: 8px 20px 8px 20px; 509 padding: 8px 20px 8px 20px;
508 box-sizing: border-box; 510 box-sizing: border-box;
509 .swiperImage { 511 .swiperImage {
510 width: 684rpx; 512 width: 684rpx;
511 height: 480rpx; 513 height: 480rpx;
512 image { 514 image {
513 max-width: 100%; 515 max-width: 100%;
514 max-height: 100%; 516 max-height: 100%;
515 border-radius: 16rpx; 517 border-radius: 16rpx;
516 } 518 }
517 } 519 }
518 } 520 }
519 .D5 { 521 .D5 {
520 background: #ffffff; 522 background: #ffffff;
521 padding: 8px 20px 8px 20px; 523 padding: 8px 20px 8px 20px;
522 box-sizing: border-box; 524 box-sizing: border-box;
523 } 525 }
524 .swiperImage { 526 .swiperImage {
525 width: 100%; 527 width: 100%;
526 height: 560rpx; 528 height: 560rpx;
527 .swiper-item { 529 .swiper-item {
528 width: 100%; 530 width: 100%;
529 image { 531 image {
530 width: 100%; 532 width: 100%;
531 } 533 }
532 } 534 }
533 } 535 }
534 .D1 { 536 .D1 {
535 .D1_price { 537 .D1_price {
536 color: #eb5d3b; 538 color: #eb5d3b;
537 font-size: 18px; 539 font-size: 18px;
538 margin-top: 5px; 540 margin-top: 5px;
539 font-family: "PingFangSC-Semibold"; 541 font-family: "PingFangSC-Semibold";
540 display: flex; 542 display: flex;
541 justify-content: space-between; 543 justify-content: space-between;
542 .D1_number { 544 .D1_number {
543 color: #999999; 545 color: #999999;
544 font-size: 14px; 546 font-size: 14px;
545 font-family: "PingFangSC-Regular"; 547 font-family: "PingFangSC-Regular";
546 } 548 }
547 } 549 }
548 .D1_name { 550 .D1_name {
549 font-size: 16px; 551 font-size: 16px;
550 font-family: "PingFangSC-Semibold"; 552 font-family: "PingFangSC-Semibold";
551 margin-top: 5px; 553 margin-top: 5px;
552 .D1_name1 { 554 .D1_name1 {
553 font-weight: bold; 555 font-weight: bold;
554 font-size: 16px; 556 font-size: 16px;
555 color: #333333; 557 color: #333333;
556 } 558 }
557 } 559 }
558 .D1_spans { 560 .D1_spans {
559 font-size: 10px; 561 font-size: 10px;
560 color: #999999; 562 color: #999999;
561 margin-top: 5px; 563 margin-top: 5px;
562 span { 564 span {
563 height: 14px; 565 height: 14px;
564 margin-right: 10px; 566 margin-right: 10px;
565 } 567 }
566 } 568 }
567 } 569 }
568 .D2 { 570 .D2 {
569 font-size: 14px; 571 font-size: 14px;
570 font-family: "PingFangSC-Regular"; 572 font-family: "PingFangSC-Regular";
571 view { 573 view {
572 height: 24px; 574 height: 24px;
573 } 575 }
574 .D2_span1 { 576 .D2_span1 {
575 color: #999999; 577 color: #999999;
576 } 578 }
577 .D2_span2 { 579 .D2_span2 {
578 color: #333333; 580 color: #333333;
579 } 581 }
580 } 582 }
581 .D3 { 583 .D3 {
582 .screenBar { 584 .screenBar {
583 width: 670rpx; 585 width: 670rpx;
584 margin-top: 20rpx; 586 margin-top: 20rpx;
585 margin-bottom: 24rpx; 587 margin-bottom: 24rpx;
586 display: flex; 588 display: flex;
587 flex-direction: row; 589 flex-direction: row;
588 justify-content: space-between; 590 justify-content: space-between;
589 align-items: center; 591 align-items: center;
590 font-size: 14px; 592 font-size: 14px;
591 color: #333333; 593 color: #333333;
592 transition: all 0.2s; 594 transition: all 0.2s;
593 } 595 }
594 .screen-item { 596 .screen-item {
595 font-size: 32rpx; 597 font-size: 32rpx;
596 color: #333333; 598 color: #333333;
597 display: flex; 599 display: flex;
598 transition: all 0.2s; 600 transition: all 0.2s;
599 .D3_list { 601 .D3_list {
600 margin-bottom: 4px; 602 margin-bottom: 4px;
601 } 603 }
602 .D3_list view { 604 .D3_list view {
603 display: flex; 605 display: flex;
604 align-content: center; 606 align-content: center;
605 font-size: 14px; 607 font-size: 14px;
606 color: #333333; 608 color: #333333;
607 } 609 }
608 .D3_list image { 610 .D3_list image {
609 width: 50px; 611 width: 50px;
610 height: 25px; 612 height: 25px;
611 margin-right: 6px; 613 margin-right: 6px;
612 } 614 }
613 .D3_list span { 615 .D3_list span {
614 margin-left: 6px; 616 margin-left: 6px;
615 margin-right: 5px; 617 margin-right: 5px;
616 font-family: "PingFangSC-Regular"; 618 font-family: "PingFangSC-Regular";
617 } 619 }
618 } 620 }
619 .active { 621 .active {
620 border-bottom: 4rpx solid #ff6b4a; 622 border-bottom: 4rpx solid #ff6b4a;
621 } 623 }
622 .customerService { 624 .customerService {
623 margin-bottom: 90rpx; 625 margin-bottom: 90rpx;
624 .serviceItem { 626 .serviceItem {
625 margin-bottom: 32rpx; 627 margin-bottom: 32rpx;
626 .title { 628 .title {
627 display: flex; 629 display: flex;
628 flex-direction: row; 630 flex-direction: row;
629 align-items: center; 631 align-items: center;
630 .titleText { 632 .titleText {
631 font-size: 14px; 633 font-size: 14px;
632 color: #333333; 634 color: #333333;
633 margin-bottom: 12rpx; 635 margin-bottom: 12rpx;
634 } 636 }
635 } 637 }
636 .itemContent { 638 .itemContent {
637 font-size: 14px; 639 font-size: 14px;
638 color: #999999; 640 color: #999999;
639 margin-left: 18rpx; 641 margin-left: 18rpx;
640 } 642 }
641 } 643 }
642 .serviceItem2 { 644 .serviceItem2 {
643 margin-left: 18rpx; 645 margin-left: 18rpx;
644 margin-bottom: 32rpx; 646 margin-bottom: 32rpx;
645 .titleText { 647 .titleText {
646 font-size: 14px; 648 font-size: 14px;
647 color: #ff6b4a; 649 color: #ff6b4a;
648 } 650 }
649 .itemContent { 651 .itemContent {
650 font-size: 14px; 652 font-size: 14px;
651 color: #999999; 653 color: #999999;
652 .itemContent-child { 654 .itemContent-child {
653 margin-bottom: 40rpx; 655 margin-bottom: 40rpx;
654 .contentTitle { 656 .contentTitle {
655 border-bottom: 1px solid #ff6b4a; 657 border-bottom: 1px solid #ff6b4a;
656 } 658 }
657 } 659 }
658 } 660 }
659 } 661 }
660 } 662 }
661 } 663 }
662 .D4 { 664 .D4 {
663 .D4_esvalue { 665 .D4_esvalue {
664 font-size: 14px; 666 font-size: 14px;
665 color: #333333; 667 color: #333333;
666 display: flex; 668 display: flex;
667 justify-content: space-between; 669 justify-content: space-between;
668 margin-bottom: 10px; 670 margin-bottom: 10px;
669 .D4_2 { 671 .D4_2 {
670 width: 90px; 672 width: 90px;
671 display: flex; 673 display: flex;
672 align-items: center; 674 align-items: center;
673 justify-content: space-between; 675 justify-content: space-between;
674 } 676 }
675 } 677 }
676 .D4_esvalue view { 678 .D4_esvalue view {
677 font-size: 14px; 679 font-size: 14px;
678 color: #333333; 680 color: #333333;
679 font-weight: bold; 681 font-weight: bold;
680 } 682 }
681 .D4_list{ 683 .D4_list{
682 display: grid; 684 display: grid;
683 grid-row-gap: 10px; 685 grid-row-gap: 10px;
684 grid-column-gap: 4px; 686 grid-column-gap: 4px;
685 } 687 }
686 .D4_list view { 688 .D4_list view {
687 display: flex; 689 display: flex;
688 justify-content: center; 690 justify-content: center;
689 align-items: center; 691 align-items: center;
690 font-size: 12px; 692 font-size: 12px;
691 width: 118px; 693 width: 118px;
692 height: 24px; 694 height: 24px;
693 border-radius: 2px; 695 border-radius: 2px;
694 background: #f2f2f2; 696 background: #f2f2f2;
695 color: #666666; 697 color: #666666;
696 // letter-spacing: 1px; 698 // letter-spacing: 1px;
697 } 699 }
698 } 700 }
699 .D5 { 701 .D5 {
700 .D5_fixed1 { 702 .D5_fixed1 {
701 display: flex; 703 display: flex;
702 justify-content: space-between; 704 justify-content: space-between;
703 align-content: center; 705 align-content: center;
704 margin-bottom: 12px; 706 margin-bottom: 12px;
705 view { 707 view {
706 font-size: 14px; 708 font-size: 14px;
707 color: #333333; 709 color: #333333;
708 font-weight: bold; 710 font-weight: bold;
709 font-family: "PingFangSC-Medium"; 711 font-family: "PingFangSC-Medium";
710 line-height: 24px; 712 line-height: 24px;
711 } 713 }
712 image { 714 image {
713 width: 240rpx; 715 width: 240rpx;
714 height: 3px; 716 height: 3px;
715 margin-top: 10px; 717 margin-top: 10px;
716 } 718 }
717 } 719 }
718 .D5_all { 720 .D5_all {
719 width: 100%; 721 width: 100%;
720 margin-top: 30rpx; 722 margin-top: 30rpx;
721 margin-right: 30rpx; 723 margin-right: 30rpx;
722 margin-bottom: 180rpx; 724 margin-bottom: 180rpx;
723 font-family: "PingFangSC-Regular"; 725 font-family: "PingFangSC-Regular";
724 // border: #999999 solid 1.5px; 726 // border: #999999 solid 1.5px;
725 } 727 }
726 } 728 }
727 .D6 { 729 .D6 {
728 width: 100%; 730 width: 100%;
729 height: 430px; 731 height: 430px;
730 background: #f9f6ed; 732 background: #f9f6ed;
731 margin-bottom: 74px; 733 margin-bottom: 74px;
732 view { 734 view {
733 text-align: center; 735 text-align: center;
734 } 736 }
735 .D6_v1 { 737 .D6_v1 {
736 font-weight: bold; 738 font-weight: bold;
737 } 739 }
738 .D6_v2 { 740 .D6_v2 {
739 font-size: 14px; 741 font-size: 14px;
740 margin-bottom: 30px; 742 margin-bottom: 30px;
741 } 743 }
742 .D6_v5 { 744 .D6_v5 {
743 .D6_v5_s1 { 745 .D6_v5_s1 {
744 font-weight: bold; 746 font-weight: bold;
745 } 747 }
746 .D6_v5_s2 { 748 .D6_v5_s2 {
747 font-size: 14px; 749 font-size: 14px;
748 } 750 }
749 } 751 }
750 } 752 }
751 .botton { 753 .botton {
752 position: fixed; 754 position: fixed;
753 bottom: 0; 755 bottom: 0;
754 height: 74px; 756 height: 74px;
755 width: 100%; 757 width: 100%;
756 background: #ffffff; 758 background: #ffffff;
757 padding: 20px 20px 8px 20px; 759 padding: 20px 20px 8px 20px;
758 font-family: "PingFangSC-Regular"; 760 font-family: "PingFangSC-Regular";
759 box-sizing: border-box; 761 box-sizing: border-box;
760 display: flex; 762 display: flex;
761 justify-content: space-between; 763 justify-content: space-between;
762 align-content: center; 764 align-content: center;
763 .botton_1 { 765 .botton_1 {
764 width: 20%; 766 width: 20%;
765 height: 100%; 767 height: 100%;
766 text-align: center; 768 text-align: center;
767 color: #989898; 769 color: #989898;
768 } 770 }
769 image { 771 image {
770 width: 60%; 772 width: 60%;
771 height: 30px; 773 height: 30px;
772 } 774 }
773 .botton_image { 775 .botton_image {
774 font-size: 12px; 776 font-size: 12px;
775 text-align: center; 777 text-align: center;
776 } 778 }
777 .botton_2 { 779 .botton_2 {
778 width: 74%; 780 width: 74%;
779 height: 86%; 781 height: 86%;
780 display: grid; 782 display: grid;
781 grid-template-columns: 50% 50%; 783 grid-template-columns: 50% 50%;
782 } 784 }
783 .botton_input { 785 .botton_input {
784 display: inline-flex; 786 display: inline-flex;
785 align-items: center; 787 align-items: center;
786 justify-content: space-around; 788 justify-content: space-around;
787 background: #fff0ec; 789 background: #fff0ec;
788 font-size: 16px; 790 font-size: 16px;
789 color: #ff6b4a; 791 color: #ff6b4a;
790 border-radius: 20px 0 0 20px; 792 border-radius: 20px 0 0 20px;
791 } 793 }
792 .botton_now { 794 .botton_now {
793 display: inline-flex; 795 display: inline-flex;
794 align-items: center; 796 align-items: center;
795 justify-content: space-around; 797 justify-content: space-around;
796 background: #ff6b4a; 798 background: #ff6b4a;
797 font-size: 16px; 799 font-size: 16px;
798 color: #ffffff; 800 color: #ffffff;
799 border-radius: 0 20px 20px 0; 801 border-radius: 0 20px 20px 0;
800 } 802 }
801 } 803 }
802 </style> 804 </style>
803 805
src/pages/index/index.vue
Diff comments   View file @b9fb657
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 @b9fb657
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