Commit b83c44fe1f06fd34fc21a5bf3621c35ac422a876
1 parent
137d6c3ecf
Exists in
master
购物车和用户推荐传参
Showing
4 changed files
with
79 additions
and
69 deletions
Show diff stats
src/components/CommodityCard/CommodityCard.vue
1 | <template> | 1 | <template> |
2 | <view | 2 | <view |
3 | class="card" | 3 | class="card" |
4 | @tap="toGoods(goods.id?goods.id:goods.sk_id)" | 4 | @tap="toGoods(goods.id?goods.id:goods.pid)" |
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.old_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 | </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) { |
50 | console.log('---', '../frameDetail/frameDetail?pid=' + id) | 50 | console.log('---', '../frameDetail/frameDetail?pid=' + id) |
51 | uni.navigateTo({ | 51 | uni.navigateTo({ |
52 | url: '../frameDetail/frameDetail?pid=' + id, | 52 | url: '../frameDetail/frameDetail?pid=' + 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
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_root_index)">{{item.p_name}}</view> | 31 | <view class="goodName" @tap="toGoods(item.pid)">{{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+` `}} | 38 | {{tag.label+` `}} |
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+` `}} | 43 | {{tag.label+` `}} |
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.mp_id,item.sk_id,item.num,item.cart_id)">-</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.mp_id,item.sk_id,item.num,item.cart_id)">+</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, type) { | 127 | toGoods(id) { |
128 | uni.navigateTo({ | 128 | console.log('---', '../frameDetail/frameDetail?pid=' + id) |
129 | url: '../frameDetail/frameDetail?oderId=' + id, | 129 | uni.navigateTo({ |
130 | success: res => {}, | 130 | url: '../frameDetail/frameDetail?pid=' + id, |
131 | fail: () => {}, | 131 | success: res => {}, |
132 | complete: () => {} | 132 | fail: () => {}, |
133 | }) | 133 | complete: () => {} |
134 | console.log('toGoods =====> id:' + id + '======>type:' + type) | 134 | }) |
135 | switch (type) { | 135 | // uni.navigateTo({ |
136 | case 1: | 136 | // url: '../frameDetail/frameDetail?oderId=' + id, |
137 | uni.navigateTo({ | 137 | // success: res => {}, |
138 | url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, | 138 | // fail: () => {}, |
139 | success: res => {}, | 139 | // complete: () => {} |
140 | fail: () => {}, | 140 | // }) |
141 | complete: () => {} | 141 | // console.log('toGoods =====> id:' + id + '======>type:' + type) |
142 | }) | 142 | // switch (type) { |
143 | break | 143 | // case 1: |
144 | case 2: | 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 3: | 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 4: | 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 | default : | 168 | // uni.navigateTo({ |
169 | break | 169 | // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, |
170 | } | 170 | // success: res => {}, |
171 | // fail: () => {}, | ||
172 | // complete: () => {} | ||
173 | // }) | ||
174 | // break | ||
175 | // default : | ||
176 | // break | ||
177 | // } | ||
171 | }, | 178 | }, |
172 | 179 | ||
173 | counter(index, isadd, mp_id, sk_id, num, cart_id) { | 180 | counter(index, isadd, item) { |
174 | // console.log('===>>counter ===>num',num) | 181 | // console.log('===>>counter ===>num',num) |
175 | // console.log('===>>counter ===>isadd',isadd) | 182 | // console.log('===>>counter ===>isadd',isadd) |
176 | num = parseInt(num) | 183 | console.log('item=====>',item) |
184 | console.log('num=====>',item.num) | ||
185 | let nums = parseInt(item.num) | ||
177 | if (isadd) { | 186 | if (isadd) { |
178 | if (num >= this.maxCount) { | 187 | if (nums >= this.maxCount) { |
179 | this.addDisabled = true | 188 | this.addDisabled = true |
180 | } else { | 189 | } else { |
181 | this.addDisabled = true | 190 | this.addDisabled = true |
182 | // 修改num | 191 | // 修改num |
183 | if (this.childIsOpen[index]) { | 192 | if (this.childIsOpen[index]) { |
184 | this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice | 193 | this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice |
185 | } | 194 | } |
186 | store.dispatch('cart/modiCart', { | 195 | store.dispatch('cart/modiCart', { |
187 | uid: this.$store.state.user.userInfo.uid, | 196 | uid: this.$store.state.user.userInfo.uid, |
188 | openid: this.$store.state.user.userInfo.openid, | 197 | openid: this.$store.state.user.userInfo.openid, |
189 | mp_id: mp_id, | 198 | mp_id: item.mp_id, |
190 | sk_id: sk_id, | 199 | sk_id: item.sk_id, |
191 | cart_id: cart_id, | 200 | price: item.nowPrice, |
192 | num: num + 1, | 201 | pid: item.pid, |
202 | num: nums + 1, | ||
203 | cart_id: item.cart_id, | ||
193 | args: { | 204 | args: { |
194 | index: index, | 205 | index: index, |
195 | isadd: isadd | 206 | isadd: isadd |
196 | } | 207 | } |
197 | }) | 208 | }) |
198 | this.addDisabled = false | 209 | this.addDisabled = false |
199 | } | 210 | } |
200 | } else { | 211 | } else { |
201 | if (num <= 1) { | 212 | if (nums <= 1) { |
202 | this.desDisabled = true | 213 | this.desDisabled = true |
203 | } else { | 214 | } else { |
204 | this.desDisabled = false | 215 | this.desDisabled = false |
205 | // post 请求修改相关参数 | 216 | // post 请求修改相关参数 |
206 | if (this.childIsOpen[index]) { | 217 | if (this.childIsOpen[index]) { |
207 | this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice | 218 | this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice |
208 | } | 219 | } |
209 | store.dispatch('cart/modiCart', { | 220 | store.dispatch('cart/modiCart', { |
210 | uid: this.$store.state.user.userInfo.uid, | 221 | uid: this.$store.state.user.userInfo.uid, |
211 | openid: this.$store.state.user.userInfo.openid, | 222 | openid: this.$store.state.user.userInfo.openid, |
212 | mp_id: mp_id, | 223 | mp_id: item.mp_id, |
213 | sk_id: sk_id, | 224 | sk_id: item.sk_id, |
214 | cart_id: cart_id, | 225 | price: item.nowPrice, |
215 | num: num - 1, | 226 | pid: item.pid, |
227 | num: nums - 1, | ||
228 | cart_id: item.cart_id, | ||
216 | args: { | 229 | args: { |
217 | index: index, | 230 | index: index, |
218 | isadd: isadd | 231 | isadd: isadd |
219 | } | 232 | } |
220 | }) | 233 | }) |
221 | this.desDisabled = true | 234 | this.desDisabled = true |
222 | } | 235 | } |
223 | } | 236 | } |
224 | // store.dispatch('cart/getCartList', { | 237 | // store.dispatch('cart/getCartList', { |
225 | // uid: this.$store.state.user.userInfo.uid // 用户id | 238 | // uid: this.$store.state.user.userInfo.uid // 用户id |
226 | // }) | 239 | // }) |
227 | }, | 240 | }, |
228 | 241 | ||
229 | Change(isopen, indexC) { | 242 | Change(isopen, indexC) { |
230 | // console.log('lalla===>',isopen) | 243 | // console.log('lalla===>',isopen) |
231 | this.childIsOpen[indexC] = !isopen | 244 | this.childIsOpen[indexC] = !isopen |
232 | if (!isopen) { | 245 | if (!isopen) { |
233 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) | 246 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) |
234 | } else { | 247 | } else { |
235 | this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) | 248 | this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) |
236 | } | 249 | } |
237 | let m = true | 250 | let m = true |
238 | for (let i = 0; i < this.childIsOpen.length; i++) { | 251 | for (let i = 0; i < this.childIsOpen.length; i++) { |
239 | m = m & this.childIsOpen[i] | 252 | m = m & this.childIsOpen[i] |
240 | } | 253 | } |
241 | if (m == 1) { | 254 | if (m == 1) { |
242 | this.pIsoPen = true | 255 | this.pIsoPen = true |
243 | } else { | 256 | } else { |
244 | this.pIsoPen = false | 257 | this.pIsoPen = false |
245 | } | 258 | } |
246 | }, | 259 | }, |
247 | pChange(isopen) { | 260 | pChange(isopen) { |
248 | this.pIsoPen = !isopen | 261 | this.pIsoPen = !isopen |
249 | for (let i = 0; i < this.childIsOpen.length; i++) { | 262 | for (let i = 0; i < this.childIsOpen.length; i++) { |
250 | this.childIsOpen[i] = !isopen | 263 | this.childIsOpen[i] = !isopen |
251 | } | 264 | } |
252 | if (this.pIsoPen) { | 265 | if (this.pIsoPen) { |
253 | // 计算总价逻辑 | 266 | // 计算总价逻辑 |
254 | if (this.childIsOpen.length != 0) { | 267 | if (this.childIsOpen.length != 0) { |
255 | for (let i = 0; i < this.childIsOpen.length; i++) { | 268 | for (let i = 0; i < this.childIsOpen.length; i++) { |
256 | if (this.childIsOpen[i]) { | 269 | if (this.childIsOpen[i]) { |
257 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) | 270 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) |
258 | } | 271 | } |
259 | } | 272 | } |
260 | } | 273 | } |
261 | } else { | 274 | } else { |
262 | this.totalPrice = 0 | 275 | this.totalPrice = 0 |
263 | } | 276 | } |
264 | }, | 277 | }, |
265 | delCart(cart_id, index) { | 278 | delCart(cart_id, index) { |
266 | // console.log('userInfo',this.$store.state.user.userInfo) | 279 | // console.log('userInfo',this.$store.state.user.userInfo) |
267 | cart_id = parseInt(cart_id) | 280 | cart_id = parseInt(cart_id) |
268 | // console.log('delcart------>cart_id',cart_id) | 281 | // console.log('delcart------>cart_id',cart_id) |
269 | // console.log('cartlist====>delcart',this.$store.state.cart.cartList) | 282 | // console.log('cartlist====>delcart',this.$store.state.cart.cartList) |
270 | // console.log('delcart======>index',index) | 283 | // console.log('delcart======>index',index) |
284 | const uid=this.$store.state.user.userInfo.uid | ||
285 | const openid=this.$store.state.user.userInfo.openid | ||
271 | uni.showModal({ | 286 | uni.showModal({ |
272 | title: '是否删除该商品', | 287 | title: '是否删除该商品', |
273 | // content: '是否删除该商品', | 288 | // content: '是否删除该商品', |
274 | success: function (res) { | 289 | success: function (res) { |
275 | if (res.confirm) { | 290 | if (res.confirm) { |
276 | // this.$store.state.cart.cartList.splice(index,1) | 291 | // this.$store.state.cart.cartList.splice(index,1) |
277 | store.dispatch('cart/delCart', { | 292 | store.dispatch('cart/delCart', { |
278 | uid: this.$store.state.user.userInfo.uid, | 293 | uid: uid, |
279 | openid: this.$store.state.user.userInfo.openid, | 294 | openid: openid, |
280 | cart_id: cart_id, // 要修改的购物车id | 295 | cart_id: cart_id, // 要修改的购物车id |
281 | arg: index // 由于action 传参是能接收两参数,因此将index放入对象 | 296 | arg: index // 由于action 传参是能接收两参数,因此将index放入对象 |
282 | }) | 297 | }) |
283 | console.log('用户点击确定') | 298 | console.log('用户点击确定') |
284 | } | 299 | } |
285 | } | 300 | } |
286 | }) | 301 | }) |
287 | } | 302 | } |
288 | } | 303 | } |
289 | } | 304 | } |
290 | </script> | 305 | </script> |
291 | 306 | ||
292 | <style lang="scss"> | 307 | <style lang="scss"> |
293 | .content { | 308 | .content { |
294 | min-height: 100vh; | 309 | min-height: 100vh; |
295 | background-color: #f2f2f2; | 310 | background-color: #f2f2f2; |
296 | display: flex; | 311 | display: flex; |
297 | flex-direction: column; | 312 | flex-direction: column; |
298 | align-items: center; | 313 | align-items: center; |
299 | justify-content: space-between; | 314 | justify-content: space-between; |
300 | padding: 20rpx 40rpx; | 315 | padding: 20rpx 40rpx; |
301 | box-sizing: border-box; | 316 | box-sizing: border-box; |
302 | 317 | ||
303 | .partentCheck{ | 318 | .partentCheck{ |
304 | width: 16px; | 319 | width: 16px; |
305 | height: 16px; | 320 | height: 16px; |
306 | border-radius: 22px; | 321 | border-radius: 22px; |
307 | border: 1px solid #CFCFCF; | 322 | border: 1px solid #CFCFCF; |
308 | background-color: #FFFFFF; | 323 | background-color: #FFFFFF; |
309 | margin: 6px; | 324 | margin: 6px; |
310 | } | 325 | } |
311 | .partentChecked{ | 326 | .partentChecked{ |
312 | width: 18px; | 327 | width: 18px; |
313 | height: 18px; | 328 | height: 18px; |
314 | border-radius: 22px; | 329 | border-radius: 22px; |
315 | background-color: #FF6B4A; | 330 | background-color: #FF6B4A; |
316 | margin: 6px; | 331 | margin: 6px; |
317 | .correct { | 332 | .correct { |
318 | display: inline-block; | 333 | display: inline-block; |
319 | position: relative; | 334 | position: relative; |
320 | width: 10rpx; | 335 | width: 10rpx; |
321 | height: 2rpx; | 336 | height: 2rpx; |
322 | background: #FFFFFF; | 337 | background: #FFFFFF; |
323 | line-height: 0; | 338 | line-height: 0; |
324 | font-size: 0; | 339 | font-size: 0; |
325 | position: relative; | 340 | position: relative; |
326 | top: -7px; | 341 | top: -7px; |
327 | left: 4px; | 342 | left: 4px; |
328 | -webkit-transform: rotate(45deg); | 343 | -webkit-transform: rotate(45deg); |
329 | } | 344 | } |
330 | .correct:after { | 345 | .correct:after { |
331 | content: '/'; | 346 | content: '/'; |
332 | display: block; | 347 | display: block; |
333 | width: 16rpx; | 348 | width: 16rpx; |
334 | height: 2rpx; | 349 | height: 2rpx; |
335 | background: #FFFFFF; | 350 | background: #FFFFFF; |
336 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); | 351 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); |
337 | } | 352 | } |
338 | } | 353 | } |
339 | 354 | ||
340 | .card{ | 355 | .card{ |
341 | background-color: #FFFFFF; | 356 | background-color: #FFFFFF; |
342 | border-radius: 16rpx; | 357 | border-radius: 16rpx; |
343 | box-sizing: border-box; | 358 | box-sizing: border-box; |
344 | padding: 36rpx 36rpx 36rpx 18rpx; | 359 | padding: 36rpx 36rpx 36rpx 18rpx; |
345 | display: flex; | 360 | display: flex; |
346 | flex-direction: column; | 361 | flex-direction: column; |
347 | align-items: center; | 362 | align-items: center; |
348 | justify-content: space-between; | 363 | justify-content: space-between; |
349 | margin-bottom: 180rpx; | 364 | margin-bottom: 180rpx; |
350 | .cardHeader{ | 365 | .cardHeader{ |
351 | width: 100%; | 366 | width: 100%; |
352 | height: 36rpx; | 367 | height: 36rpx; |
353 | display: flex; | 368 | display: flex; |
354 | align-items: center; | 369 | align-items: center; |
355 | justify-content: flex-start; | 370 | justify-content: flex-start; |
356 | margin-bottom: 20rpx; | 371 | margin-bottom: 20rpx; |
357 | image{ | 372 | image{ |
358 | height: 32rpx; | 373 | height: 32rpx; |
359 | width: 32rpx; | 374 | width: 32rpx; |
360 | padding-left: 6px; | 375 | padding-left: 6px; |
361 | padding-right: 10px; | 376 | padding-right: 10px; |
362 | } | 377 | } |
363 | text{ | 378 | text{ |
364 | // font-family: PingFangSC-Regular; | 379 | // font-family: PingFangSC-Regular; |
365 | font-size: 14px; | 380 | font-size: 14px; |
366 | color: #333333; | 381 | color: #333333; |
367 | letter-spacing: -0.26px; | 382 | letter-spacing: -0.26px; |
368 | } | 383 | } |
369 | } | 384 | } |
370 | .cardBody{ | 385 | .cardBody{ |
371 | width: 100%; | 386 | width: 100%; |
372 | min-height: 300rpx; | 387 | min-height: 300rpx; |
373 | display: flex; | 388 | display: flex; |
374 | align-items: center; | 389 | align-items: center; |
375 | justify-content: space-between; | 390 | justify-content: space-between; |
376 | .goodInfo{ | 391 | .goodInfo{ |
377 | width: 390rpx; | 392 | width: 390rpx; |
378 | display: flex; | 393 | display: flex; |
379 | flex-direction: row; | 394 | flex-direction: row; |
380 | justify-content: flex-start; | 395 | justify-content: flex-start; |
381 | padding-left: 6px; | 396 | padding-left: 6px; |
382 | 397 | ||
383 | .imageWrap{ | 398 | .imageWrap{ |
384 | height: 188rpx; | 399 | height: 188rpx; |
385 | width: 188rpx; | 400 | width: 188rpx; |
386 | margin-right: 28rpx; | 401 | margin-right: 28rpx; |
387 | 402 | ||
388 | image{ | 403 | image{ |
389 | border-radius: 4px; | 404 | border-radius: 4px; |
390 | height: 188rpx; | 405 | height: 188rpx; |
391 | width: 188rpx; | 406 | width: 188rpx; |
392 | } | 407 | } |
393 | } | 408 | } |
394 | .infoRight{ | 409 | .infoRight{ |
395 | display: flex; | 410 | display: flex; |
396 | flex-direction: column; | 411 | flex-direction: column; |
397 | align-items: flex-start; | 412 | align-items: flex-start; |
398 | justify-content: space-between; | 413 | justify-content: space-between; |
399 | min-height: 240rpx; | 414 | min-height: 240rpx; |
400 | .goodName{ | 415 | .goodName{ |
401 | display: -webkit-box; | 416 | display: -webkit-box; |
402 | -webkit-box-orient: vertical; | 417 | -webkit-box-orient: vertical; |
403 | -webkit-line-clamp: 2; | 418 | -webkit-line-clamp: 2; |
404 | text-align: justify; | 419 | text-align: justify; |
405 | overflow: hidden; | 420 | overflow: hidden; |
406 | font-size: 28rpx; | 421 | font-size: 28rpx; |
407 | color: #333333; | 422 | color: #333333; |
408 | } | 423 | } |
409 | .describ{ | 424 | .describ{ |
410 | width: 100%; | 425 | width: 100%; |
411 | // min-height: 80rpx; | 426 | // min-height: 80rpx; |
412 | // box-sizing: border-box; | 427 | // box-sizing: border-box; |
413 | // padding: 10rpx; | 428 | // padding: 10rpx; |
414 | font-size: 20rpx; | 429 | font-size: 20rpx; |
415 | letter-spacing: -0.23px; | 430 | letter-spacing: -0.23px; |
416 | text-align: justify; | 431 | text-align: justify; |
417 | color: #999999; | 432 | color: #999999; |
418 | // background: #F9F9F9; | 433 | // background: #F9F9F9; |
419 | // display: flex; | 434 | // display: flex; |
420 | // justify-content: center; | 435 | // justify-content: center; |
421 | // align-items: center; | 436 | // align-items: center; |
422 | // text{ | 437 | // text{ |
423 | // text-overflow: -o-ellipsis-lastline; | 438 | // text-overflow: -o-ellipsis-lastline; |
424 | // overflow: hidden; | 439 | // overflow: hidden; |
425 | // text-overflow: ellipsis; | 440 | // text-overflow: ellipsis; |
426 | // display: -webkit-box; | 441 | // display: -webkit-box; |
427 | // -webkit-line-clamp: 2; | 442 | // -webkit-line-clamp: 2; |
428 | // line-clamp: 2; | 443 | // line-clamp: 2; |
429 | // -webkit-box-orient: vertical; | 444 | // -webkit-box-orient: vertical; |
430 | // } | 445 | // } |
431 | // .icon { | 446 | // .icon { |
432 | // width: 0; | 447 | // width: 0; |
433 | // height: 0; | 448 | // height: 0; |
434 | // border-left: 5px transparent; | 449 | // border-left: 5px transparent; |
435 | // border-right: 5px transparent; | 450 | // border-right: 5px transparent; |
436 | // border-top: 5px #979797; | 451 | // border-top: 5px #979797; |
437 | // border-bottom: 0 transparent; | 452 | // border-bottom: 0 transparent; |
438 | // border-style: solid; | 453 | // border-style: solid; |
439 | // position: relative; | 454 | // position: relative; |
440 | // margin-left: 10px; | 455 | // margin-left: 10px; |
441 | // // transform: scaleY(-1); | 456 | // // transform: scaleY(-1); |
442 | // } | 457 | // } |
443 | // .icon::after{ | 458 | // .icon::after{ |
444 | // content: ''; | 459 | // content: ''; |
445 | // position: absolute; | 460 | // position: absolute; |
446 | // top: -6.5px; | 461 | // top: -6.5px; |
447 | // left: -5px; | 462 | // left: -5px; |
448 | // border-left: 5px transparent; | 463 | // border-left: 5px transparent; |
449 | // border-right: 5px transparent; | 464 | // border-right: 5px transparent; |
450 | // border-top: 5px #FFFFFF; | 465 | // border-top: 5px #FFFFFF; |
451 | // border-bottom: 0 transparent; | 466 | // border-bottom: 0 transparent; |
452 | // border-style: solid; | 467 | // border-style: solid; |
453 | // } | 468 | // } |
454 | } | 469 | } |
455 | .priceBox{ | 470 | .priceBox{ |
456 | display: flex; | 471 | display: flex; |
457 | justify-content: space-between; | 472 | justify-content: space-between; |
458 | align-items: center; | 473 | align-items: center; |
459 | // margin-top: 26px; | 474 | // margin-top: 26px; |
460 | width: 100%; | 475 | width: 100%; |
461 | font-size: 14px; | 476 | font-size: 14px; |
462 | color: #999999; | 477 | color: #999999; |
463 | .maxCount{ | 478 | .maxCount{ |
464 | color: #999999; | 479 | color: #999999; |
465 | font-size: 24rpx; | 480 | font-size: 24rpx; |
466 | } | 481 | } |
467 | .price{ | 482 | .price{ |
468 | color: #FF6B4A; | 483 | color: #FF6B4A; |
469 | font-size: 28rpx; | 484 | font-size: 28rpx; |
470 | } | 485 | } |
471 | .counter{ | 486 | .counter{ |
472 | display: flex; | 487 | display: flex; |
473 | flex-direction: row; | 488 | flex-direction: row; |
474 | justify-content: space-between; | 489 | justify-content: space-between; |
475 | align-items: center; | 490 | align-items: center; |
476 | font-size: 28rpx; | 491 | font-size: 28rpx; |
477 | color: #333333; | 492 | color: #333333; |
478 | width: 122rpx; | 493 | width: 122rpx; |
479 | .btn{ | 494 | .btn{ |
480 | display: flex; | 495 | display: flex; |
481 | justify-content: center; | 496 | justify-content: center; |
482 | line-height: 32rpx; | 497 | line-height: 32rpx; |
483 | height: 32rpx; | 498 | height: 32rpx; |
484 | width: 32rpx; | 499 | width: 32rpx; |
485 | background-color: #F2F2F2; | 500 | background-color: #F2F2F2; |
486 | color: #CFCFCF; | 501 | color: #CFCFCF; |
487 | } | 502 | } |
488 | } | 503 | } |
489 | } | 504 | } |
490 | } | 505 | } |
491 | } | 506 | } |
492 | } | 507 | } |
493 | } | 508 | } |
494 | 509 | ||
495 | .footer{ | 510 | .footer{ |
496 | position: fixed; | 511 | position: fixed; |
497 | left: 0; | 512 | left: 0; |
498 | bottom: 0px; | 513 | bottom: 0px; |
499 | height: 112rpx; | 514 | height: 112rpx; |
500 | width: 100%; | 515 | width: 100%; |
501 | background-color: #FFFFFF; | 516 | background-color: #FFFFFF; |
502 | font-size: 16px; | 517 | font-size: 16px; |
503 | display: flex; | 518 | display: flex; |
504 | justify-content: space-between; | 519 | justify-content: space-between; |
505 | align-items: center; | 520 | align-items: center; |
506 | .footerLeft{ | 521 | .footerLeft{ |
507 | display: flex; | 522 | display: flex; |
508 | justify-content: center; | 523 | justify-content: center; |
509 | align-items: center; | 524 | align-items: center; |
510 | width: 50%; | 525 | width: 50%; |
511 | color: #333333; | 526 | color: #333333; |
512 | text{ | 527 | text{ |
513 | color: #FF6B4A; | 528 | color: #FF6B4A; |
514 | } | 529 | } |
515 | } | 530 | } |
516 | .footerRight{ | 531 | .footerRight{ |
517 | display: flex; | 532 | display: flex; |
518 | justify-content: flex-end; | 533 | justify-content: flex-end; |
519 | align-items: center; | 534 | align-items: center; |
520 | width: 50%; | 535 | width: 50%; |
521 | margin-right: 26rpx; | 536 | margin-right: 26rpx; |
522 | .paybtn{ | 537 | .paybtn{ |
523 | display: flex; | 538 | display: flex; |
524 | justify-content: center; | 539 | justify-content: center; |
525 | align-items: center; | 540 | align-items: center; |
526 | background: #FF6B4A; | 541 | background: #FF6B4A; |
527 | border-radius: 20px; | 542 | border-radius: 20px; |
528 | border-radius: 20px; | 543 | border-radius: 20px; |
529 | color: #FFFFFF; | 544 | color: #FFFFFF; |
530 | width: 204rpx; | 545 | width: 204rpx; |
531 | height: 80rpx; | 546 | height: 80rpx; |
532 | } | 547 | } |
533 | } | 548 | } |
534 | 549 | ||
535 | } | 550 | } |
536 | } | 551 | } |
537 | 552 | ||
538 | </style> | 553 | </style> |
539 | 554 |
src/pages/user/user.vue
1 | <template> | 1 | <template> |
2 | <view class="wrap"> | 2 | <view class="wrap"> |
3 | <!-- 弹窗 --> | 3 | <!-- 弹窗 --> |
4 | <uni-popup | 4 | <uni-popup |
5 | ref="popup" | 5 | ref="popup" |
6 | type="center" | 6 | type="center" |
7 | > | 7 | > |
8 | <!-- 给一个左边弹窗的样式 --> | 8 | <!-- 给一个左边弹窗的样式 --> |
9 | <!-- 关闭弹窗按钮 --> | 9 | <!-- 关闭弹窗按钮 --> |
10 | <view | 10 | <view |
11 | class="closeBtn" | 11 | class="closeBtn" |
12 | @tap="this.$refs.popup.close()" | 12 | @tap="this.$refs.popup.close()" |
13 | >x</view> | 13 | >x</view> |
14 | <view | 14 | <view |
15 | class="popUpWrap" | 15 | class="popUpWrap" |
16 | v-if="whichTap==0" | 16 | v-if="whichTap==0" |
17 | > | 17 | > |
18 | <text>这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入驻。</text> | 18 | <text>这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入驻。</text> |
19 | 19 | ||
20 | <!-- 左 --> | 20 | <!-- 左 --> |
21 | <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> --> | 21 | <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> --> |
22 | <!-- 右 --> | 22 | <!-- 右 --> |
23 | <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> --> | 23 | <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> --> |
24 | </view> | 24 | </view> |
25 | <view | 25 | <view |
26 | class="popUpWrap" | 26 | class="popUpWrap" |
27 | v-if="whichTap==1" | 27 | v-if="whichTap==1" |
28 | > | 28 | > |
29 | <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text> | 29 | <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text> |
30 | </view> | 30 | </view> |
31 | <view | 31 | <view |
32 | class="popUpWrap" | 32 | class="popUpWrap" |
33 | v-if="whichTap==2" | 33 | v-if="whichTap==2" |
34 | > | 34 | > |
35 | <button @tap="chatOur(1)">客服1</button> | 35 | <button @tap="chatOur(1)">客服1</button> |
36 | <button @tap="chatOur(2)">客服2</button> | 36 | <button @tap="chatOur(2)">客服2</button> |
37 | </view> | 37 | </view> |
38 | </uni-popup> | 38 | </uni-popup> |
39 | <view | 39 | <view |
40 | v-if="isAuth" | 40 | v-if="isAuth" |
41 | class="content" | 41 | class="content" |
42 | > | 42 | > |
43 | <view class="userInfo"> | 43 | <view class="userInfo"> |
44 | <view class="info"> | 44 | <view class="info"> |
45 | <image | 45 | <image |
46 | :src="headerphoto" | 46 | :src="headerphoto" |
47 | mode="aspectFill" | 47 | mode="aspectFill" |
48 | ></image> | 48 | ></image> |
49 | <view class="infoText"> | 49 | <view class="infoText"> |
50 | <text class="userName">{{nickName}}</text> | 50 | <text class="userName">{{nickName}}</text> |
51 | </view> | 51 | </view> |
52 | </view> | 52 | </view> |
53 | <!-- <view class="service"> | 53 | <!-- <view class="service"> |
54 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> | 54 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> |
55 | </view> --> | 55 | </view> --> |
56 | </view> | 56 | </view> |
57 | <view | 57 | <view |
58 | class="myOpticsData" | 58 | class="myOpticsData" |
59 | @tap="toOpticsData" | 59 | @tap="toOpticsData" |
60 | > | 60 | > |
61 | <view class="left"> | 61 | <view class="left"> |
62 | <image | 62 | <image |
63 | src="../../static/img/user/dataWrite.png" | 63 | src="../../static/img/user/dataWrite.png" |
64 | mode="aspectFit" | 64 | mode="aspectFit" |
65 | ></image> | 65 | ></image> |
66 | <text>验光数据</text> | 66 | <text>验光数据</text> |
67 | </view> | 67 | </view> |
68 | <image | 68 | <image |
69 | src="../../static/right.png" | 69 | src="../../static/right.png" |
70 | mode="aspectFit" | 70 | mode="aspectFit" |
71 | ></image> | 71 | ></image> |
72 | </view> | 72 | </view> |
73 | <view class="myOrder"> | 73 | <view class="myOrder"> |
74 | <view class="orderHeader"> | 74 | <view class="orderHeader"> |
75 | <text>全部订单</text> | 75 | <text>全部订单</text> |
76 | <view | 76 | <view |
77 | class="btn" | 77 | class="btn" |
78 | @click="toMyOrder('10')" | 78 | @click="toMyOrder('10')" |
79 | > | 79 | > |
80 | 全部 | 80 | 全部 |
81 | <image | 81 | <image |
82 | src="../../static/right.png" | 82 | src="../../static/right.png" |
83 | mode="aspectFit" | 83 | mode="aspectFit" |
84 | ></image> | 84 | ></image> |
85 | </view> | 85 | </view> |
86 | </view> | 86 | </view> |
87 | <view class="orderBody"> | 87 | <view class="orderBody"> |
88 | <view | 88 | <view |
89 | class="item waitPay" | 89 | class="item waitPay" |
90 | @click="toMyOrder('0')" | 90 | @click="toMyOrder('0')" |
91 | > | 91 | > |
92 | <image | 92 | <image |
93 | src="../../static/img/user/waitDeliver.png" | 93 | src="../../static/img/user/waitDeliver.png" |
94 | mode="aspectFit" | 94 | mode="aspectFit" |
95 | ></image> | 95 | ></image> |
96 | <text>待付款</text> | 96 | <text>待付款</text> |
97 | </view> | 97 | </view> |
98 | <view | 98 | <view |
99 | class="item waitDeliver" | 99 | class="item waitDeliver" |
100 | @click="toMyOrder('1')" | 100 | @click="toMyOrder('1')" |
101 | > | 101 | > |
102 | <image | 102 | <image |
103 | src="../../static/img/user/waitPay.png" | 103 | src="../../static/img/user/waitPay.png" |
104 | mode="aspectFit" | 104 | mode="aspectFit" |
105 | ></image> | 105 | ></image> |
106 | <text>待收货</text> | 106 | <text>待收货</text> |
107 | </view> | 107 | </view> |
108 | <view | 108 | <view |
109 | class="item waitReceive" | 109 | class="item waitReceive" |
110 | @click="toMyOrder('2')" | 110 | @click="toMyOrder('2')" |
111 | > | 111 | > |
112 | <image | 112 | <image |
113 | src="../../static/img/user/waitReceive.png" | 113 | src="../../static/img/user/waitReceive.png" |
114 | mode="aspectFit" | 114 | mode="aspectFit" |
115 | ></image> | 115 | ></image> |
116 | <text>已完成</text> | 116 | <text>已完成</text> |
117 | </view> | 117 | </view> |
118 | <!-- <view class="item service" @click="toMyOrder('3')"> | 118 | <!-- <view class="item service" @click="toMyOrder('3')"> |
119 | <image src="../../static/img/user/refound.png" mode="aspectFit"></image> | 119 | <image src="../../static/img/user/refound.png" mode="aspectFit"></image> |
120 | <text>已评价</text> | 120 | <text>已评价</text> |
121 | </view> --> | 121 | </view> --> |
122 | </view> | 122 | </view> |
123 | </view> | 123 | </view> |
124 | <view class="someItem"> | 124 | <view class="someItem"> |
125 | <!-- <view class="item"> | 125 | <!-- <view class="item"> |
126 | <view class="left"> | 126 | <view class="left"> |
127 | <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> | 127 | <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> |
128 | <text>推广记录与收益</text> | 128 | <text>推广记录与收益</text> |
129 | </view> | 129 | </view> |
130 | <image src="../../static/right.png" mode="aspectFit"></image> | 130 | <image src="../../static/right.png" mode="aspectFit"></image> |
131 | </view> --> | 131 | </view> --> |
132 | <view class="item"> | 132 | <view class="item"> |
133 | <view class="left"> | 133 | <view class="left"> |
134 | <image | 134 | <image |
135 | src="../../static/address-icon.png" | 135 | src="../../static/address-icon.png" |
136 | mode="aspectFit" | 136 | mode="aspectFit" |
137 | ></image> | 137 | ></image> |
138 | <text @tap="toAddress">地址管理</text> | 138 | <text @tap="toAddress">地址管理</text> |
139 | </view> | 139 | </view> |
140 | <image | 140 | <image |
141 | src="../../static/right.png" | 141 | src="../../static/right.png" |
142 | mode="aspectFit" | 142 | mode="aspectFit" |
143 | ></image> | 143 | ></image> |
144 | </view> | 144 | </view> |
145 | <view class="item"> | 145 | <view class="item"> |
146 | <view class="left"> | 146 | <view class="left"> |
147 | <image | 147 | <image |
148 | src="../../static/img/user/introduce.png" | 148 | src="../../static/img/user/introduce.png" |
149 | mode="aspectFit" | 149 | mode="aspectFit" |
150 | ></image> | 150 | ></image> |
151 | <text @tap="introduce">系统介绍</text> | 151 | <text @tap="introduce">系统介绍</text> |
152 | </view> | 152 | </view> |
153 | <image | 153 | <image |
154 | src="../../static/right.png" | 154 | src="../../static/right.png" |
155 | mode="aspectFit" | 155 | mode="aspectFit" |
156 | ></image> | 156 | ></image> |
157 | </view> | 157 | </view> |
158 | <view class="item"> | 158 | <view class="item"> |
159 | <view class="left"> | 159 | <view class="left"> |
160 | <image | 160 | <image |
161 | src="../../static/img/user/joinUs.png" | 161 | src="../../static/img/user/joinUs.png" |
162 | mode="aspectFit" | 162 | mode="aspectFit" |
163 | ></image> | 163 | ></image> |
164 | <text @tap="joinUs">加入我们</text> | 164 | <text @tap="joinUs">加入我们</text> |
165 | </view> | 165 | </view> |
166 | <image | 166 | <image |
167 | src="../../static/right.png" | 167 | src="../../static/right.png" |
168 | mode="aspectFit" | 168 | mode="aspectFit" |
169 | ></image> | 169 | ></image> |
170 | </view> | 170 | </view> |
171 | <view class="item"> | 171 | <view class="item"> |
172 | <view class="left"> | 172 | <view class="left"> |
173 | <image | 173 | <image |
174 | src="../../static/img/user/service.png" | 174 | src="../../static/img/user/service.png" |
175 | mode="aspectFit" | 175 | mode="aspectFit" |
176 | ></image> | 176 | ></image> |
177 | <text>联系客服</text> | 177 | <text>联系客服</text> |
178 | </view> | 178 | </view> |
179 | <image | 179 | <image |
180 | src="../../static/right.png" | 180 | src="../../static/right.png" |
181 | mode="aspectFit" | 181 | mode="aspectFit" |
182 | ></image> | 182 | ></image> |
183 | </view> | 183 | </view> |
184 | </view> | 184 | </view> |
185 | <view class="recommend"> | 185 | <view class="recommend"> |
186 | <view class="title"> | 186 | <view class="title"> |
187 | <view class="line"></view> | 187 | <view class="line"></view> |
188 | <view class="text">精选推荐</view> | 188 | <view class="text">精选推荐</view> |
189 | <view class="line"></view> | 189 | <view class="line"></view> |
190 | </view> | 190 | </view> |
191 | <!-- 商品列表 --> | 191 | <!-- 商品列表 --> |
192 | <view class="goods-list"> | 192 | <view class="goods-list"> |
193 | <scroll-view | 193 | <scroll-view |
194 | enable-flex | 194 | enable-flex |
195 | @scrolltolower="handleScrolltolower" | 195 | @scrolltolower="handleScrolltolower" |
196 | scroll-y | 196 | scroll-y |
197 | class="product-list" | 197 | class="product-list" |
198 | > | 198 | > |
199 | <view | 199 | <view |
200 | class="product" | 200 | class="product" |
201 | v-for="(item, index) in userRecommandList" | 201 | v-for="(item, index) in userRecommandList" |
202 | :key="index" | 202 | :key="index" |
203 | > | 203 | > |
204 | <Card :goods="item"></Card> | 204 | <Card :goods="item"></Card> |
205 | </view> | 205 | </view> |
206 | </scroll-view> | 206 | </scroll-view> |
207 | <view class="loading-text">{{loadingText}}</view> | 207 | <view class="loading-text">{{loadingText}}</view> |
208 | </view> | 208 | </view> |
209 | </view> | 209 | </view> |
210 | </view> | 210 | </view> |
211 | <view | 211 | <view |
212 | v-else | 212 | v-else |
213 | class="auth" | 213 | class="auth" |
214 | > | 214 | > |
215 | <view class="icon"></view> | 215 | <view class="icon"></view> |
216 | <view class="divider"></view> | 216 | <view class="divider"></view> |
217 | <view class="title">申请获取以下权限</view> | 217 | <view class="title">申请获取以下权限</view> |
218 | <view class="text">获得您的公开信息(昵称、头像等)</view> | 218 | <view class="text">获得您的公开信息(昵称、头像等)</view> |
219 | <button | 219 | <button |
220 | type="primary" | 220 | type="primary" |
221 | open-type="getUserInfo" | 221 | open-type="getUserInfo" |
222 | @getuserinfo="onGotUserInfo" | 222 | @getuserinfo="onGotUserInfo" |
223 | >授权登陆</button> | 223 | >授权登陆</button> |
224 | </view> | 224 | </view> |
225 | </view> | 225 | </view> |
226 | </template> | 226 | </template> |
227 | 227 | ||
228 | <script> | 228 | <script> |
229 | import Card from '@/components/CommodityCard/CommodityCard.vue' | 229 | import Card from '@/components/CommodityCard/CommodityCard.vue' |
230 | import store from '@/store' | 230 | import store from '@/store' |
231 | import UniPopup from '@/components/UniPopup/uni-popup.vue' | 231 | import UniPopup from '@/components/UniPopup/uni-popup.vue' |
232 | 232 | ||
233 | export default { | 233 | export default { |
234 | components: { | 234 | components: { |
235 | Card, | 235 | Card, |
236 | UniPopup | 236 | UniPopup |
237 | }, | 237 | }, |
238 | data() { | 238 | data() { |
239 | return { | 239 | return { |
240 | isAuth: true, // 是否显示授权页面, | 240 | isAuth: true, // 是否显示授权页面, |
241 | pagesnum: 1, // 分页请求初始值 | 241 | pagesnum: 1, // 分页请求初始值 |
242 | whichTap: 0 // 弹窗渲染选择条件 | 242 | whichTap: 0 // 弹窗渲染选择条件 |
243 | } | 243 | } |
244 | }, | 244 | }, |
245 | onLoad() { | 245 | onLoad() { |
246 | // 判断是否授权 | 246 | // 判断是否授权 |
247 | uni.getSetting({ | 247 | uni.getSetting({ |
248 | success(res) { | 248 | success(res) { |
249 | console.log('authSetting', res.authSetting) | 249 | console.log('authSetting', res.authSetting) |
250 | if (res.authSetting['scope.userInfo'] === true) { | 250 | if (res.authSetting['scope.userInfo'] === true) { |
251 | this.isAuth = true | 251 | this.isAuth = true |
252 | } else { | 252 | } else { |
253 | this.isAuth = false | 253 | this.isAuth = false |
254 | } | 254 | } |
255 | } | 255 | } |
256 | }) | 256 | }) |
257 | store.dispatch('userRecommand/getRecommandList', { | 257 | store.dispatch('userRecommand/getRecommandList', { |
258 | uid: this.$store.state.user.userInfo.uid, | 258 | uid: this.$store.state.user.userInfo.uid, |
259 | openid: this.$store.state.user.userInfo.openid, | 259 | openid: this.$store.state.user.userInfo.openid, |
260 | page: this.pagesnum | 260 | page: this.pagesnum |
261 | }) | 261 | }) |
262 | }, | 262 | }, |
263 | computed: { | 263 | computed: { |
264 | nickName() { | 264 | nickName() { |
265 | return this.$store.state.user.userInfo.nickName | 265 | return this.$store.state.user.userInfo.nickName |
266 | }, | 266 | }, |
267 | headerphoto() { | 267 | headerphoto() { |
268 | return this.$store.state.user.userInfo.headerphoto | 268 | return this.$store.state.user.userInfo.headerphoto |
269 | }, | 269 | }, |
270 | userRecommandList() { | 270 | userRecommandList() { |
271 | console.log('userRecommandList=====>',this.$store.state.userRecommand.recommandList) | ||
271 | return this.$store.state.userRecommand.recommandList | 272 | return this.$store.state.userRecommand.recommandList |
272 | } | 273 | } |
273 | }, | 274 | }, |
274 | methods: { | 275 | methods: { |
275 | // 弹窗 | 276 | // 弹窗 |
276 | changeTap(item) { | 277 | changeTap(item) { |
277 | this.whichTap = item | 278 | this.whichTap = item |
278 | this.$refs.popup.open() | 279 | this.$refs.popup.open() |
279 | }, | 280 | }, |
280 | chatOur(item) { | 281 | chatOur(item) { |
281 | if (item === 1) { | 282 | if (item === 1) { |
282 | uni.makePhoneCall({ | 283 | uni.makePhoneCall({ |
283 | phoneNumber: 13376189297 // 客服1 电话 | 284 | phoneNumber: 13376189297 // 客服1 电话 |
284 | }) | 285 | }) |
285 | } else { | 286 | } else { |
286 | uni.makePhoneCall({ | 287 | uni.makePhoneCall({ |
287 | phoneNumber: 18014995101 // 客服2 电话 | 288 | phoneNumber: 18014995101 // 客服2 电话 |
288 | }) | 289 | }) |
289 | } | 290 | } |
290 | }, | 291 | }, |
291 | // 授权 | 292 | // 授权 |
292 | onGotUserInfo(e) { | 293 | onGotUserInfo(e) { |
293 | if (e.detail.errMsg === 'getUserInfo:ok') { | 294 | if (e.detail.errMsg === 'getUserInfo:ok') { |
294 | const { fromInfo } = this.$store.state.user | 295 | const { fromInfo } = this.$store.state.user |
295 | // 用户授权成功 | 296 | // 用户授权成功 |
296 | store.dispatch('user/getUserInfo', fromInfo) | 297 | store.dispatch('user/getUserInfo', fromInfo) |
297 | this.isAuth = true | 298 | this.isAuth = true |
298 | } | 299 | } |
299 | }, | 300 | }, |
300 | toAddress() { | 301 | toAddress() { |
301 | uni.navigateTo({ | 302 | uni.navigateTo({ |
302 | url: '../address/addressList', | 303 | url: '../address/addressList', |
303 | success: res => {}, | 304 | success: res => {}, |
304 | fail: () => {}, | 305 | fail: () => {}, |
305 | complete: () => {} | 306 | complete: () => {} |
306 | }) | 307 | }) |
307 | }, | 308 | }, |
308 | introduce() { | 309 | introduce() { |
309 | uni.showModal({ | 310 | uni.showModal({ |
310 | content: '这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入住。', | 311 | content: '这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入住。', |
311 | showCancel: false | 312 | showCancel: false |
312 | }) | 313 | }) |
313 | }, | 314 | }, |
314 | joinUs() { | 315 | joinUs() { |
315 | uni.showModal({ | 316 | uni.showModal({ |
316 | content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', | 317 | content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', |
317 | showCancel: false | 318 | showCancel: false |
318 | }) | 319 | }) |
319 | }, | 320 | }, |
320 | toMyOrder(status) { | 321 | toMyOrder(status) { |
321 | uni.navigateTo({ | 322 | uni.navigateTo({ |
322 | url: `../myOrder/myOrder?status=${status}`, | 323 | url: `../myOrder/myOrder?status=${status}`, |
323 | success: res => {}, | 324 | success: res => {}, |
324 | fail: () => {}, | 325 | fail: () => {}, |
325 | complete: () => {} | 326 | complete: () => {} |
326 | }) | 327 | }) |
327 | }, | 328 | }, |
328 | toOpticsData() { | 329 | toOpticsData() { |
329 | uni.navigateTo({ | 330 | uni.navigateTo({ |
330 | url: '../addOpticsData/addOpticsData' | 331 | url: '../addOpticsData/addOpticsData' |
331 | }) | 332 | }) |
332 | }, | 333 | }, |
333 | handleScrolltolower() { | 334 | handleScrolltolower() { |
334 | // console.log('usr-my',this.$store.state.user.userInfo) | 335 | // console.log('usr-my',this.$store.state.user.userInfo) |
335 | this.pagesnum++ | 336 | this.pagesnum++ |
336 | store.dispatch('userRecommand/getRecommandList', { | 337 | store.dispatch('userRecommand/getRecommandList', { |
337 | uid: this.$store.state.user.userInfo.uid, | 338 | uid: this.$store.state.user.userInfo.uid, |
338 | openid: this.$store.state.user.userInfo.openid, | 339 | openid: this.$store.state.user.userInfo.openid, |
339 | page: this.pagesnum | 340 | page: this.pagesnum |
340 | }) | 341 | }) |
341 | } | 342 | } |
342 | } | 343 | } |
343 | } | 344 | } |
344 | </script> | 345 | </script> |
345 | 346 | ||
346 | <style lang="scss"> | 347 | <style lang="scss"> |
347 | .warp { | 348 | .warp { |
348 | font-size: 24rpx; | 349 | font-size: 24rpx; |
349 | background-color: #f2f2f2; | 350 | background-color: #f2f2f2; |
350 | height: 100vh; | 351 | height: 100vh; |
351 | } | 352 | } |
352 | .content { | 353 | .content { |
353 | display: flex; | 354 | display: flex; |
354 | flex-direction: column; | 355 | flex-direction: column; |
355 | align-items: center; | 356 | align-items: center; |
356 | justify-content: center; | 357 | justify-content: center; |
357 | background-color: #f2f2f2; | 358 | background-color: #f2f2f2; |
358 | } | 359 | } |
359 | .userInfo { | 360 | .userInfo { |
360 | background-image: linear-gradient(270deg, #ffa481 0%, #ff6b4a 66%); | 361 | background-image: linear-gradient(270deg, #ffa481 0%, #ff6b4a 66%); |
361 | width: 100%; | 362 | width: 100%; |
362 | height: 240rpx; | 363 | height: 240rpx; |
363 | color: #ffffff; | 364 | color: #ffffff; |
364 | padding: 60rpx 82rpx 80rpx 44rpx; | 365 | padding: 60rpx 82rpx 80rpx 44rpx; |
365 | box-sizing: border-box; | 366 | box-sizing: border-box; |
366 | display: flex; | 367 | display: flex; |
367 | flex-direction: row; | 368 | flex-direction: row; |
368 | justify-content: space-between; | 369 | justify-content: space-between; |
369 | align-items: flex-start; | 370 | align-items: flex-start; |
370 | .info { | 371 | .info { |
371 | display: flex; | 372 | display: flex; |
372 | flex-direction: row; | 373 | flex-direction: row; |
373 | justify-content: space-between; | 374 | justify-content: space-between; |
374 | align-items: center; | 375 | align-items: center; |
375 | image { | 376 | image { |
376 | border-radius: 50rpx; | 377 | border-radius: 50rpx; |
377 | height: 100rpx; | 378 | height: 100rpx; |
378 | width: 100rpx; | 379 | width: 100rpx; |
379 | margin-right: 40rpx; | 380 | margin-right: 40rpx; |
380 | } | 381 | } |
381 | .infoText { | 382 | .infoText { |
382 | display: flex; | 383 | display: flex; |
383 | flex-direction: column; | 384 | flex-direction: column; |
384 | justify-content: space-between; | 385 | justify-content: space-between; |
385 | align-items: flex-scetart; | 386 | align-items: flex-scetart; |
386 | .userName { | 387 | .userName { |
387 | font-size: 18px; | 388 | font-size: 18px; |
388 | color: #ffffff; | 389 | color: #ffffff; |
389 | margin-bottom: 8rpx; | 390 | margin-bottom: 8rpx; |
390 | } | 391 | } |
391 | .nickName { | 392 | .nickName { |
392 | font-size: 12px; | 393 | font-size: 12px; |
393 | color: #ffffff; | 394 | color: #ffffff; |
394 | } | 395 | } |
395 | } | 396 | } |
396 | } | 397 | } |
397 | // .service { | 398 | // .service { |
398 | // margin-top: 20rpx; | 399 | // margin-top: 20rpx; |
399 | // image { | 400 | // image { |
400 | // height: 36rpx; | 401 | // height: 36rpx; |
401 | // width: 36rpx; | 402 | // width: 36rpx; |
402 | // } | 403 | // } |
403 | // } | 404 | // } |
404 | } | 405 | } |
405 | .myOpticsData { | 406 | .myOpticsData { |
406 | width: 670rpx; | 407 | width: 670rpx; |
407 | height: 120rpx; | 408 | height: 120rpx; |
408 | background-color: #ffffff; | 409 | background-color: #ffffff; |
409 | border-radius: 6px; | 410 | border-radius: 6px; |
410 | box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); | 411 | box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); |
411 | position: relative; | 412 | position: relative; |
412 | bottom: 44rpx; | 413 | bottom: 44rpx; |
413 | padding: 40rpx; | 414 | padding: 40rpx; |
414 | box-sizing: border-box; | 415 | box-sizing: border-box; |
415 | display: flex; | 416 | display: flex; |
416 | justify-content: space-between; | 417 | justify-content: space-between; |
417 | align-items: center; | 418 | align-items: center; |
418 | .left { | 419 | .left { |
419 | font-size: 14px; | 420 | font-size: 14px; |
420 | color: #333333; | 421 | color: #333333; |
421 | display: flex; | 422 | display: flex; |
422 | align-items: center; | 423 | align-items: center; |
423 | image { | 424 | image { |
424 | margin-right: 32rpx; | 425 | margin-right: 32rpx; |
425 | width: 30rpx; | 426 | width: 30rpx; |
426 | height: 34rpx; | 427 | height: 34rpx; |
427 | } | 428 | } |
428 | } | 429 | } |
429 | image { | 430 | image { |
430 | height: 16px; | 431 | height: 16px; |
431 | width: 8px; | 432 | width: 8px; |
432 | } | 433 | } |
433 | } | 434 | } |
434 | .myOrder { | 435 | .myOrder { |
435 | width: 100%; | 436 | width: 100%; |
436 | height: 296rpx; | 437 | height: 296rpx; |
437 | // margin-top: 116rpx; | 438 | // margin-top: 116rpx; |
438 | margin-bottom: 20rpx; | 439 | margin-bottom: 20rpx; |
439 | padding: 0 40rpx; | 440 | padding: 0 40rpx; |
440 | box-sizing: border-box; | 441 | box-sizing: border-box; |
441 | background: #ffffff; | 442 | background: #ffffff; |
442 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 443 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
443 | border-radius: 6px; | 444 | border-radius: 6px; |
444 | border-radius: 6px; | 445 | border-radius: 6px; |
445 | display: flex; | 446 | display: flex; |
446 | flex-direction: column; | 447 | flex-direction: column; |
447 | justify-content: space-around; | 448 | justify-content: space-around; |
448 | align-items: center; | 449 | align-items: center; |
449 | .orderHeader { | 450 | .orderHeader { |
450 | width: 100%; | 451 | width: 100%; |
451 | height: 100rpx; | 452 | height: 100rpx; |
452 | display: flex; | 453 | display: flex; |
453 | flex-direction: row; | 454 | flex-direction: row; |
454 | justify-content: space-between; | 455 | justify-content: space-between; |
455 | align-items: center; | 456 | align-items: center; |
456 | border-bottom: 1px solid #e9e9e9; | 457 | border-bottom: 1px solid #e9e9e9; |
457 | font-weight: bold; | 458 | font-weight: bold; |
458 | font-size: 18px; | 459 | font-size: 18px; |
459 | color: #333333; | 460 | color: #333333; |
460 | .btn { | 461 | .btn { |
461 | font-size: 12px; | 462 | font-size: 12px; |
462 | color: #999999; | 463 | color: #999999; |
463 | display: flex; | 464 | display: flex; |
464 | align-items: center; | 465 | align-items: center; |
465 | image { | 466 | image { |
466 | margin-left: 20rpx; | 467 | margin-left: 20rpx; |
467 | height: 32rpx; | 468 | height: 32rpx; |
468 | width: 16rpx; | 469 | width: 16rpx; |
469 | } | 470 | } |
470 | } | 471 | } |
471 | } | 472 | } |
472 | .orderBody { | 473 | .orderBody { |
473 | width: 100%; | 474 | width: 100%; |
474 | display: flex; | 475 | display: flex; |
475 | flex-direction: row; | 476 | flex-direction: row; |
476 | justify-content: space-around; | 477 | justify-content: space-around; |
477 | align-items: center; | 478 | align-items: center; |
478 | .item { | 479 | .item { |
479 | display: flex; | 480 | display: flex; |
480 | flex-direction: column; | 481 | flex-direction: column; |
481 | align-items: center; | 482 | align-items: center; |
482 | image { | 483 | image { |
483 | width: 62rpx; | 484 | width: 62rpx; |
484 | height: 46rpx; | 485 | height: 46rpx; |
485 | } | 486 | } |
486 | text { | 487 | text { |
487 | margin-top: 24rpx; | 488 | margin-top: 24rpx; |
488 | font-size: 12px; | 489 | font-size: 12px; |
489 | color: #333333; | 490 | color: #333333; |
490 | } | 491 | } |
491 | } | 492 | } |
492 | } | 493 | } |
493 | } | 494 | } |
494 | .someItem { | 495 | .someItem { |
495 | width: 100%; | 496 | width: 100%; |
496 | height: 336rpx; | 497 | height: 336rpx; |
497 | background: #ffffff; | 498 | background: #ffffff; |
498 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 499 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
499 | border-radius: 6px; | 500 | border-radius: 6px; |
500 | border-radius: 6px; | 501 | border-radius: 6px; |
501 | margin-bottom: 18rpx; | 502 | margin-bottom: 18rpx; |
502 | box-sizing: border-box; | 503 | box-sizing: border-box; |
503 | padding: 21rpx 48rpx 21rpx 42rpx; | 504 | padding: 21rpx 48rpx 21rpx 42rpx; |
504 | box-sizing: border-box; | 505 | box-sizing: border-box; |
505 | display: flex; | 506 | display: flex; |
506 | flex-direction: column; | 507 | flex-direction: column; |
507 | justify-content: space-between; | 508 | justify-content: space-between; |
508 | align-items: center; | 509 | align-items: center; |
509 | .item { | 510 | .item { |
510 | display: flex; | 511 | display: flex; |
511 | justify-content: space-between; | 512 | justify-content: space-between; |
512 | border-bottom: 1px solid #f2f2f2; | 513 | border-bottom: 1px solid #f2f2f2; |
513 | align-items: center; | 514 | align-items: center; |
514 | height: 72rpx; | 515 | height: 72rpx; |
515 | width: 100%; | 516 | width: 100%; |
516 | .left { | 517 | .left { |
517 | font-size: 14px; | 518 | font-size: 14px; |
518 | color: #333333; | 519 | color: #333333; |
519 | display: flex; | 520 | display: flex; |
520 | align-items: center; | 521 | align-items: center; |
521 | image { | 522 | image { |
522 | margin-right: 32rpx; | 523 | margin-right: 32rpx; |
523 | width: 30rpx; | 524 | width: 30rpx; |
524 | height: 34rpx; | 525 | height: 34rpx; |
525 | } | 526 | } |
526 | } | 527 | } |
527 | image { | 528 | image { |
528 | height: 16px; | 529 | height: 16px; |
529 | width: 8px; | 530 | width: 8px; |
530 | } | 531 | } |
531 | } | 532 | } |
532 | } | 533 | } |
533 | .recommend { | 534 | .recommend { |
534 | background: #ffffff; | 535 | background: #ffffff; |
535 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 536 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
536 | border-radius: 6px; | 537 | border-radius: 6px; |
537 | border-radius: 6px; | 538 | border-radius: 6px; |
538 | width: 100%; | 539 | width: 100%; |
539 | .title { | 540 | .title { |
540 | display: flex; | 541 | display: flex; |
541 | flex-direction: row; | 542 | flex-direction: row; |
542 | align-items: center; | 543 | align-items: center; |
543 | justify-content: space-between; | 544 | justify-content: space-between; |
544 | padding: 20rpx 40rpx; | 545 | padding: 20rpx 40rpx; |
545 | .line { | 546 | .line { |
546 | width: 264rpx; | 547 | width: 264rpx; |
547 | height: 1rpx; | 548 | height: 1rpx; |
548 | border-bottom: 1px solid #eaeaea; | 549 | border-bottom: 1px solid #eaeaea; |
549 | } | 550 | } |
550 | .text { | 551 | .text { |
551 | font-family: PingFangSC-Medium; | 552 | font-family: PingFangSC-Medium; |
552 | font-size: 14px; | 553 | font-size: 14px; |
553 | color: #333333; | 554 | color: #333333; |
554 | letter-spacing: -0.26px; | 555 | letter-spacing: -0.26px; |
555 | text-align: justify; | 556 | text-align: justify; |
556 | line-height: 24px; | 557 | line-height: 24px; |
557 | } | 558 | } |
558 | } | 559 | } |
559 | .goods-list { | 560 | .goods-list { |
560 | .loading-text { | 561 | .loading-text { |
561 | width: 100%; | 562 | width: 100%; |
562 | display: flex; | 563 | display: flex; |
563 | justify-content: center; | 564 | justify-content: center; |
564 | align-items: center; | 565 | align-items: center; |
565 | height: 30px; | 566 | height: 30px; |
566 | color: #979797; | 567 | color: #979797; |
567 | font-size: 12px; | 568 | font-size: 12px; |
568 | } | 569 | } |
569 | .product-list { | 570 | .product-list { |
570 | width: 92%; | 571 | width: 92%; |
571 | padding: 0 4% 3vw 4%; | 572 | padding: 0 4% 3vw 4%; |
572 | display: flex; | 573 | display: flex; |
573 | justify-content: space-between; | 574 | justify-content: space-between; |
574 | flex-wrap: wrap; | 575 | flex-wrap: wrap; |
575 | height: 400px; | 576 | height: 400px; |
576 | .product { | 577 | .product { |
577 | width: 48%; | 578 | width: 48%; |
578 | margin: 0 0 20rpx 0; | 579 | margin: 0 0 20rpx 0; |
579 | background: #ffffff; | 580 | background: #ffffff; |
580 | border: 1px solid #f2f2f2; | 581 | border: 1px solid #f2f2f2; |
581 | } | 582 | } |
582 | } | 583 | } |
583 | } | 584 | } |
584 | } | 585 | } |
585 | .auth { | 586 | .auth { |
586 | height: 100vh; | 587 | height: 100vh; |
587 | display: flex; | 588 | display: flex; |
588 | flex-direction: column; | 589 | flex-direction: column; |
589 | align-items: center; | 590 | align-items: center; |
590 | .icon { | 591 | .icon { |
591 | width: 140rpx; | 592 | width: 140rpx; |
592 | height: 140rpx; | 593 | height: 140rpx; |
593 | border-radius: 50%; | 594 | border-radius: 50%; |
594 | margin-top: 100rpx; | 595 | margin-top: 100rpx; |
595 | background-color: grey; | 596 | background-color: grey; |
596 | } | 597 | } |
597 | .divider { | 598 | .divider { |
598 | height: 1rpx; | 599 | height: 1rpx; |
599 | width: 600rpx; | 600 | width: 600rpx; |
600 | margin-top: 80rpx; | 601 | margin-top: 80rpx; |
601 | background-color: #e6e3e3; | 602 | background-color: #e6e3e3; |
602 | } | 603 | } |
603 | .title { | 604 | .title { |
604 | width: 600rpx; | 605 | width: 600rpx; |
605 | margin-top: 50rpx; | 606 | margin-top: 50rpx; |
606 | text-align: left; | 607 | text-align: left; |
607 | } | 608 | } |
608 | .text { | 609 | .text { |
609 | width: 600rpx; | 610 | width: 600rpx; |
610 | margin-top: 30rpx; | 611 | margin-top: 30rpx; |
611 | text-align: left; | 612 | text-align: left; |
612 | color: #e6e3e3; | 613 | color: #e6e3e3; |
613 | } | 614 | } |
614 | button { | 615 | button { |
615 | width: 450rpx; | 616 | width: 450rpx; |
616 | height: 80rpx; | 617 | height: 80rpx; |
617 | line-height: 80rpx; | 618 | line-height: 80rpx; |
618 | margin-top: 80rpx; | 619 | margin-top: 80rpx; |
619 | border-radius: 30rpx; | 620 | border-radius: 30rpx; |
620 | } | 621 | } |
621 | } | 622 | } |
622 | .closeBtn { | 623 | .closeBtn { |
623 | height: 28rpx; | 624 | height: 28rpx; |
624 | width: 28rpx; | 625 | width: 28rpx; |
625 | // border: 1px solid red; | 626 | // border: 1px solid red; |
626 | position: absolute; | 627 | position: absolute; |
627 | top: 20rpx; | 628 | top: 20rpx; |
628 | right: 10rpx; | 629 | right: 10rpx; |
629 | } | 630 | } |
630 | </style> | 631 | </style> |
631 | 632 |
src/store/modules/cart.js
1 | import urlAlias from '../url' | 1 | import urlAlias from '../url' |
2 | import request from '../request' | 2 | import request from '../request' |
3 | 3 | ||
4 | const { cartList, cartModi, cartDel, cartAdd } = urlAlias | 4 | const { cartList, cartModi, cartDel, cartAdd } = urlAlias |
5 | 5 | ||
6 | const state = { | 6 | const state = { |
7 | cartList: [] | 7 | cartList: [] |
8 | } | 8 | } |
9 | 9 | ||
10 | const mutations = { | 10 | const mutations = { |
11 | INIT: (state, cartList) => { | 11 | INIT: (state, cartList) => { |
12 | state.cartList = cartList | 12 | state.cartList = cartList |
13 | }, | 13 | }, |
14 | DEL: (state, index) => { | 14 | DEL: (state, index) => { |
15 | console.log('mutations====>', state.cartList) | 15 | console.log('mutations====>', state.cartList) |
16 | state.cartList.splice(index, 1) | 16 | state.cartList.splice(index, 1) |
17 | console.log('mutations====>index', index) | 17 | console.log('mutations====>index', index) |
18 | // state.cartList=delList | 18 | // state.cartList=delList |
19 | }, | 19 | }, |
20 | MODI: (state, args) => { | 20 | MODI: (state, args) => { |
21 | console.log('the num', state.cartList[args.index].num) | 21 | console.log('the num', state.cartList[args.index].num) |
22 | console.log('mutations====>isadd', args) | 22 | console.log('mutations====>isadd', args) |
23 | state.cartList[args.index].num = args.num | 23 | state.cartList[args.index].num = args.num |
24 | console.log('the num', state.cartList[args.index].num) | 24 | console.log('the num', state.cartList[args.index].num) |
25 | } | 25 | } |
26 | 26 | ||
27 | } | 27 | } |
28 | 28 | ||
29 | const actions = { | 29 | const actions = { |
30 | getCartList({ commit }, param) { | 30 | getCartList({ commit }, param) { |
31 | request({ | 31 | request({ |
32 | url: cartList, | 32 | url: cartList, |
33 | data: param, | 33 | data: param, |
34 | success: (res) => { | 34 | success: (res) => { |
35 | console.log('cart===>接口数据', res.data.data) | 35 | console.log('cart===>接口数据', res.data.data) |
36 | // const resData = { | ||
37 | // ...res, | ||
38 | // data, | ||
39 | // } | ||
40 | commit('INIT', res.data.data) | 36 | commit('INIT', res.data.data) |
41 | }, | 37 | }, |
42 | fail: (res) => { | 38 | fail: (res) => { |
43 | console.log('fail status === > ', res) | 39 | console.log('fail status === > ', res) |
44 | }, | 40 | }, |
45 | complete: (res) => { | 41 | complete: (res) => { |
46 | console.log('complete status === > ', res) | 42 | console.log('complete status === > ', res) |
47 | } | 43 | } |
48 | }) | 44 | }) |
49 | }, | 45 | }, |
50 | 46 | ||
51 | modiCart({ commit }, param) { | 47 | modiCart({ commit }, param) { |
52 | const arg = Object.assign({ num: param.num }, param.args) | 48 | const arg = Object.assign({ num: param.num }, param.args) |
53 | delete param.args | 49 | delete param.args |
54 | request({ | 50 | request({ |
55 | url: cartModi, | 51 | url: cartModi, |
56 | data: param, | 52 | data: param, |
57 | success: (res) => { | 53 | success: (res) => { |
58 | console.log('modiCart-res=====>', res.data) | 54 | console.log('modiCart-res=====>', res.data) |
59 | console.log('modi-parm', param) | 55 | console.log('modi-parm', param) |
60 | commit('MODI', arg) | 56 | commit('MODI', arg) |
61 | }, | 57 | }, |
62 | fail: (res) => { | 58 | fail: (res) => { |
63 | console.log('fail status === > ', res) | 59 | console.log('fail status === > ', res) |
64 | }, | 60 | }, |
65 | complete: (res) => { | 61 | complete: (res) => { |
66 | console.log('complete status === > ', res) | 62 | console.log('complete status === > ', res) |
67 | } | 63 | } |
68 | }) | 64 | }) |
69 | }, | 65 | }, |
70 | 66 | ||
71 | delCart({ commit }, param) { | 67 | delCart({ commit }, param) { |
72 | const arg = param.arg | 68 | const arg = param.arg |
73 | delete param.arg | 69 | delete param.arg |
74 | request({ | 70 | request({ |
75 | url: cartDel, | 71 | url: cartDel, |
76 | data: param, | 72 | data: param, |
77 | success: (res) => { | 73 | success: (res) => { |
78 | console.log('del-parm', param) | 74 | console.log('del-parm', param) |
79 | console.log('del-myparms==>', arg) | 75 | console.log('del-myparms==>', arg) |
80 | // console.log('deacart====>cartList',this.$store.state.cart.cartList) | ||
81 | |||
82 | commit('DEL', arg) | 76 | commit('DEL', arg) |
83 | }, | 77 | }, |
84 | fail: (res) => { | 78 | fail: (res) => { |
85 | console.log('fail status === > ', res) | 79 | console.log('fail status === > ', res) |
86 | }, | 80 | }, |
87 | complete: (res) => { | 81 | complete: (res) => { |
88 | console.log('complete status === > ', res) | 82 | console.log('complete status === > ', res) |
89 | } | 83 | } |
90 | }) | 84 | }) |
91 | }, | 85 | }, |
92 | 86 | ||
93 | addCart({ commit }, param) { | 87 | addCart({ commit }, param) { |
94 | console.log('请求接口开始') | 88 | console.log('请求接口开始') |
95 | request({ | 89 | request({ |
96 | url: cartAdd, | 90 | url: cartAdd, |
97 | data: param, | 91 | data: param, |
98 | success: (res) => { | 92 | success: (res) => { |
99 | console.log('add-parm', param) | 93 | console.log('add-parm', param) |
100 | console.log('addcart===>res.data===>', res.data) | 94 | console.log('addcart===>res.data===>', res.data) |
101 | // commit('INIT', res.data.data) | 95 | // commit('INIT', res.data.data) |
102 | }, | 96 | }, |
103 | fail: (res) => { | 97 | fail: (res) => { |
104 | console.log('fail status === > ', res) | 98 | console.log('fail status === > ', res) |
105 | }, | 99 | }, |
106 | complete: (res) => { | 100 | complete: (res) => { |
107 | console.log('complete status === > ', res) | 101 | console.log('complete status === > ', res) |
108 | } | 102 | } |
109 | }) | 103 | }) |
110 | } | 104 | } |
111 | 105 | ||
112 | } | 106 | } |
113 | 107 | ||
114 | export default { | 108 | export default { |
115 | namespaced: true, | 109 | namespaced: true, |
116 | state, | 110 | state, |
117 | mutations, | 111 | mutations, |
118 | actions | 112 | actions |
119 | } | 113 | } |
120 | 114 |