吉鹏 / gulu-vue

Compare View

switch
from
...
to
 
Commits (2)
Showing 6 changed files   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @5214ca9
1 <template> 1 <template>
2 <view class="card" @tap="toGoods(goods.id?goods.id:goods.pid,goods.goodType?goods.goodType:goods.p_root_index)"> 2 <view class="card" @tap="toGoods(goods.id?goods.id:goods.pid,goods.goodType?goods.goodType:goods.p_root_index)">
3 <image mode="widthFix" :src="goods.imgurl?goods.imgurl:goods.pic" ></image> 3 <image mode="widthFix" :src="goods.imgurl?goods.imgurl:goods.pic" ></image>
4 <view class="name">{{goods.name?goods.name:goods.p_name}}</view> 4 <view class="name">{{goods.name?goods.name:goods.p_name}}</view>
5 <view class="info"> 5 <view class="info">
6 <view class="priceBox"> 6 <view class="priceBox">
7 <view class="price">{{goods.price?goods.price:goods.real_price}}</view> 7 <view class="price">{{goods.price?goods.price:goods.real_price}}</view>
8 <view class="originCost"> 8 <view class="originCost">
9 {{goods.rsSon.Max_Price?goods.rsSon.Max_Price:goods.old_price}} 9 {{goods.rsSon.Max_Price?goods.rsSon.Max_Price:goods.old_price}}
10 </view> 10 </view>
11 </view> 11 </view>
12 <view class="trade_num">{{goods.trade_num}}人购买</view> 12 <view class="trade_num">{{goods.trade_num}}人购买</view>
13 </view> 13 </view>
14 </view> 14 </view>
15 </template> 15 </template>
16 16
17 <script> 17 <script>
18 export default { 18 export default {
19 props: { 19 props: {
20 /** 20 /**
21 * 商品数据 21 * 商品数据
22 */ 22 */
23 goods: { 23 goods: {
24 id: Number, 24 id: Number,
25 imgurl: String, 25 imgurl: String,
26 name: String, 26 name: String,
27 rsSon:Object, 27 rsSon:Object,
28 originCost:String, 28 originCost:String,
29 price: String, 29 price: String,
30 trade_num:String, 30 trade_num:String,
31 goodType:String, 31 goodType:String,
32 } 32 }
33 33
34 }, 34 },
35 created() { 35 created() {
36 // console.log(this.goods) 36 // console.log(this.goods)
37 }, 37 },
38 data() { 38 data() {
39 return { 39 return {
40 40
41 }; 41 };
42 }, 42 },
43 methods:{ 43 methods:{
44 toGoods(id,type){ 44 toGoods(id,type){
45 uni.navigateTo({ 45 uni.navigateTo({
46 url: `../frameDetail/frameDetail?oderId=`+id, 46 url: `../frameDetail/frameDetail?oderId=`+id,
47 success: res => {}, 47 success: res => {},
48 fail: () => {}, 48 fail: () => {},
49 complete: () => {} 49 complete: () => {}
50 }); 50 });
51 console.log('toGoods =====> id:'+id +"======>type:"+type) 51 console.log('toGoods =====> id:'+id +"======>type:"+type)
52 switch(type){ 52 switch(type){
53 case 1: 53 case 1:
54 uni.navigateTo({ 54 uni.navigateTo({
55 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 55 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
56 success: res => {}, 56 success: res => {},
57 fail: () => {}, 57 fail: () => {},
58 complete: () => {} 58 complete: () => {}
59 }); 59 });
60 break; 60 break;
61 case 2: 61 case 2:
62 uni.navigateTo({ 62 uni.navigateTo({
63 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 63 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
64 success: res => {}, 64 success: res => {},
65 fail: () => {}, 65 fail: () => {},
66 complete: () => {} 66 complete: () => {}
67 }); 67 });
68 break; 68 break;
69 case 3: 69 case 3:
70 uni.navigateTo({ 70 uni.navigateTo({
71 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 71 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
72 success: res => {}, 72 success: res => {},
73 fail: () => {}, 73 fail: () => {},
74 complete: () => {} 74 complete: () => {}
75 }); 75 });
76 break; 76 break;
77 case 4: 77 case 4:
78 uni.navigateTo({ 78 uni.navigateTo({
79 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 79 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
80 success: res => {}, 80 success: res => {},
81 fail: () => {}, 81 fail: () => {},
82 complete: () => {} 82 complete: () => {}
83 }); 83 });
84 break; 84 break;
85 default : 85 default :
86 break 86 break
87 } 87 }
88 } 88 }
89 } 89 }
90 } 90 }
91 </script> 91 </script>
92 92
93 <style lang="scss"> 93 <style lang="scss">
94 image{ 94 image{
95 width: 100%; 95 width: 100%;
96 height: 120rpx; 96 height: 120rpx;
97 } 97 }
98 .name{ 98 .name{
99 width: 92%; 99 width: 92%;
100 height: 54rpx; 100 height: 54rpx;
101 padding: 5px 4%; 101 padding: 5px 4%;
102 display: -webkit-box; 102 display: -webkit-box;
103 -webkit-box-orient: vertical; 103 -webkit-box-orient: vertical;
104 -webkit-line-clamp: 2; 104 -webkit-line-clamp: 2;
105 text-align: justify; 105 text-align: justify;
106 overflow: hidden; 106 overflow: hidden;
107 font-size: 24rpx; 107 font-size: 24rpx;
108 color: #333333; 108 color: #333333;
109 } 109 }
110 .info{ 110 .info{
111 display: flex; 111 display: flex;
112 justify-content: space-between; 112 justify-content: space-between;
113 align-items: center; 113 align-items: center;
114 width: 92%; 114 width: 92%;
115 padding: 5px 4% 5px 4%; 115 padding: 5px 4% 5px 4%;
116 .priceBox{ 116 .priceBox{
117 display: flex; 117 display: flex;
118 justify-content: space-between; 118 justify-content: space-between;
119 align-items: center; 119 align-items: center;
120 .price{ 120 .price{
121 color: #EB5D3B; 121 color: #EB5D3B;
122 font-size: 28rpx; 122 font-size: 28rpx;
123 font-weight: 600; 123 font-weight: 600;
124 margin-right: 10rpx; 124 margin-right: 10rpx;
125 } 125 }
126 .originCost{ 126 .originCost{
127 text-decoration:line-through; 127 text-decoration:line-through;
128 color: #999999; 128 color: #999999;
129 font-size: 20rpx; 129 font-size: 20rpx;
130 } 130 }
131 131
132 } 132 }
133 .trade_num{ 133 .trade_num{
134 color: #999999; 134 color: #999999;
135 font-size: 20rpx; 135 font-size: 20rpx;
136 } 136 }
137 } 137 }
138 </style> 138 </style>
src/pages/cart/cart.vue
Diff comments   View file @5214ca9
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
5 </block>
6 <block v-else>
7 <view class="card">
8 <view class="cardHeader">
9 <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
10 @click="pChange(pIsoPen)">
11 <span class="correct"></span>
12 </view>
13 <image src="../../static/store.png" mode="aspectFill"></image>
14 <text>非常戴镜</text>
15 </view>
16
17 <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id" 4
18 @longpress="delCart(item.cart_id,index)"> 5 </block>
19 <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" 6 <block v-else>
20 @click="Change(childIsOpen[index],index)"> 7 <view class="card">
21 <span class="correct"></span> 8 <view class="cardHeader">
9 <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
10 @click="pChange(pIsoPen)">
11 <span class="correct"></span>
22 </view> 12 </view>
23 <view class="goodInfo"> 13 <image src="../../static/store.png" mode="aspectFill"></image>
24 <view class="imageWrap"> 14 <text>非常戴镜</text>
25 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> 15 </view>
26 </view> 16
27 <view class="infoRight"> 17 <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id"
28 <view class="goodName" @tap="toGoods(item.pid,item.p_root_index)">{{item.p_name}}</view> 18 @longpress="delCart(item.cart_id,index)">
29 <view class="describ" @tap="toshop(item.pid,item.p_root_index)"> 19 <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
20 @click="Change(childIsOpen[index],index)">
21 <span class="correct"></span>
30 <text> 22 </view>
31 <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value"> 23 <view class="goodInfo">
32 {{tag.label+`&nbsp;&nbsp;`}} 24 <view class="imageWrap">
33 </block> 25 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
34 </text>
35 <view class="icon"></view> 26 </view>
36 </view> 27 <view class="infoRight">
37 <view class="priceBox"> 28 <view class="goodName" @tap="toGoods(item.pid,item.p_root_index)">{{item.p_name}}</view>
38 <view class="price">￥{{item.nowPrice*item.num}}</view> 29 <view class="describ" @tap="toshop(item.pid,item.p_root_index)">
39 <text>(限购{{maxCount}}副)</text> 30 <text>
40 <view class="counter"> 31 <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value">
41 <view class="btn" disabled="this.addDisabled" type="default" 32 {{tag.label+`&nbsp;&nbsp;`}}
42 @click="counter(index,false,item.mp_id,item.sk_id,item.num,item.cart_id)">-</view> 33 </block>
34 </text>
35 <view class="icon"></view>
36 </view>
37 <view class="priceBox">
38 <view class="price">￥{{item.nowPrice*item.num}}</view>
39 <text>(限购{{maxCount}}副)</text>
40 <view class="counter">
41 <view class="btn" disabled="this.addDisabled" type="default"
42 @click="counter(index,false,item.mp_id,item.sk_id,item.num,item.cart_id)">-</view>
43 <text>{{item.num}}</text>
44 <view class="btn" disabled="this.desDisabled" type="default"
45 @click="counter(index,true,item.mp_id,item.sk_id,item.num,item.cart_id)">+</view>
46 </view>
43 <text>{{item.num}}</text> 47 </view>
44 <view class="btn" disabled="this.desDisabled" type="default" 48 </view>
45 @click="counter(index,true,item.mp_id,item.sk_id,item.num,item.cart_id)">+</view> 49 </view>
46 </view> 50 </view>
47 </view> 51 </view>
48 </view> 52 </block>
49 </view>
50 </view>
51 </view>
52 </block>
53 <view class="footer">
54 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
55 <view class="footerRight">
56 <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover">
57 <view class="paybtn" >立即结算</view>
58 </navigator>
59 </view>
60 </view>
61
62 </view>
63 </template>
64
65 <script>
66 import store from '@/store';
67
68 export default {
69
70 data() {
71 return {
72 totalPrice: 0,
73 pIsoPen:false,
74 // childIsOpen:[],
75 maxCount:20,
76 }
77 },
78 computed:{
79
80 cartList() {
81 // console.log('cart-list', this.$store.state.cart.cartList); 53 <view class="footer">
82 return this.$store.state.cart.cartList; 54 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
83 }, 55 <view class="footerRight">
84 childIsOpen(){ 56 <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover">
85 let temp=[]; 57 <view class="paybtn" >立即结算</view>
86 temp.length=this.$store.state.cart.cartList.length; 58 </navigator>
87 for (let i = 0; i < temp.length; i++) { 59 </view>
88 temp[i]= false 60 </view>
89 } 61
90 console.log('this.childisOPne===>',temp) 62 </view>
91 return temp 63 </template>
92 } 64
93 }, 65 <script>
94 onLoad: function() { 66 import store from '@/store';
95 // 判断是否授权 67
96 // uni.getSetting({ 68 export default {
97 // success(res) { 69
98 // console.log('authSetting',res.authSetting) 70 data() {
99 // if(res.authSetting['scope.userInfo'] !== true) { 71 return {
100 72 totalPrice: 0,
101 // uni.switchTab({ 73 pIsoPen:false,
74 // childIsOpen:[],
102 // url:'/pages/user/user' 75 maxCount:20,
103 // })
104 // }else {
105 // }
106 // }
107 // })
108 76 }
109 // console.log('usr-my',this.$store.state.user.userInfo) 77 },
110 // store.dispatch('cart/addCart',{ 78 computed:{
79
111 // "num":1, 80 cartList() {
112 // "pid": 7,//产品id 81 // console.log('cart-list', this.$store.state.cart.cartList);
113 // "uid":1,
114 // "sk_id": 72, 82 return this.$store.state.cart.cartList;
83 },
84 childIsOpen(){
85 let temp=[];
86 temp.length=this.$store.state.cart.cartList.length;
87 for (let i = 0; i < temp.length; i++) {
88 temp[i]= false
89 }
90 console.log('this.childisOPne===>',temp)
91 return temp
115 // "price": 120, 92 }
116 // "mp_id":1, 93 },
117 // "checkedSKU":{ 94 onLoad: function() {
95 // 判断是否授权
96 // uni.getSetting({
97 // success(res) {
98 // console.log('authSetting',res.authSetting)
99 // if(res.authSetting['scope.userInfo'] !== true) {
100
101 // uni.switchTab({
102 // url:'/pages/user/user'
103 // })
104 // }else {
105 // }
106 // }
107 // })
108
109 // console.log('usr-my',this.$store.state.user.userInfo)
110 // store.dispatch('cart/addCart',{
111 // "num":1,
112 // "pid": 7,//产品id
113 // "uid":1,
114 // "sk_id": 72,
115 // "price": 120,
116 // "mp_id":1,
117 // "checkedSKU":{
118 // "discount": "45",
119 // "in_price": "6000",
120 // "kc": "0",
121 // "model_pic": null,
122 // "out_price": 191.8,
123 // "pic": "https://glass.xiuyetang.com//upload_jk/7/7_22AE0C.jpg",
124 // "pid": "7",
125 // "real_price": 99,
126 // "sk_id": "89",
127 // "sku_name": "1.56非球面防蓝光_黑",
128 // "sku_shop_value": "",
129 // "sku_value": "58_61",
130 // "status": "1",
131 // },
132 // });
118 // "discount": "45", 133 store.dispatch('cart/getCartList',{
119 // "in_price": "6000", 134 uid: 1, //用户id
120 // "kc": "0", 135 });
121 // "model_pic": null, 136 },
137
122 // "out_price": 191.8, 138 methods: {
123 // "pic": "https://glass.xiuyetang.com//upload_jk/7/7_22AE0C.jpg", 139 // 跳转到对应的选购页面
140 toshop(id,type){
141 console.log('===',id,type)
142 switch(type){
143 case 1:
144 uni.navigateTo({
145 url: `../detailsChoiceArgs/detailsChoiceArgs?oderId=`+id+`&goodType=`+type,
146 success: res => {},
147 fail: () => {},
148 complete: () => {}
149 });
150 break;
151 case 2:
152 uni.navigateTo({
153 url: `../detailStandard/detailStandard_k?oderId=`+id+`&goodType=`+type,
154 success: res => {},
155 fail: () => {},
156 complete: () => {}
157 });
158 break;
159 case 3||4:
160 uni.navigateTo({
161 url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
162 success: res => {},
163 fail: () => {},
164 complete: () => {}
165 });
166 break;
167 // case 4:
168 // uni.navigateTo({
169 // url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
170 // success: res => {},
171 // fail: () => {},
172 // complete: () => {}
173 // });
174 case 5:
175 uni.navigateTo({
176 url: `../purchaseLenses/purchaseLenses?oderId=`+id+`&goodType=`+type,
177 success: res => {},
178 fail: () => {},
179 complete: () => {}
180 });
181 break;
182 default :
183 break
184 }
185 },
186 toGoods(id,type){
187 uni.navigateTo({
188 url: `../frameDetail/frameDetail?oderId=`+id,
189 success: res => {},
190 fail: () => {},
191 complete: () => {}
192 });
193 console.log('toGoods =====> id:'+id +"======>type:"+type)
194 switch(type){
195 case 1:
196 uni.navigateTo({
197 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
198 success: res => {},
199 fail: () => {},
200 complete: () => {}
201 });
202 break;
203 case 2:
204 uni.navigateTo({
205 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
206 success: res => {},
207 fail: () => {},
208 complete: () => {}
209 });
210 break;
211 case 3:
212 uni.navigateTo({
213 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
214 success: res => {},
215 fail: () => {},
216 complete: () => {}
217 });
218 break;
219 case 4:
220 uni.navigateTo({
221 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
222 success: res => {},
223 fail: () => {},
224 complete: () => {}
225 });
226 break;
227 default :
228 break
229 }
230 },
231
232 counter(index,isadd,mp_id,sk_id,num,cart_id){
233 // console.log('===>>counter ===>num',num)
234 // console.log('===>>counter ===>isadd',isadd)
235 num=parseInt(num);
124 // "pid": "7", 236 if(isadd){
125 // "real_price": 99, 237 if(num>=this.maxCount){
238 this.addDisabled = true
239 } else{
240 this.addDisabled= true
241 // 修改num
242 store.dispatch('cart/modiCart',{
243 uid: 1,
244 // openid: '',
245 mp_id: mp_id,
246 sk_id: sk_id,
247 cart_id:cart_id,
248 num:num+1,
249 args:{
250 index:index,
251 isadd:isadd,
252 }
253 })
254 this.addDisabled= false
255 }
256 }else{
257 if(num<=1){
258 this.desDisabled = true
259 } else{
260 this.desDisabled = false
261 // post 请求修改相关参数
262 store.dispatch('cart/modiCart',{
263 uid: 1,
264 // openid: '',
265 mp_id: mp_id,
266 sk_id: sk_id,
267 cart_id:cart_id,
268 num:num-1,
269 args:{
270 index:index,
271 isadd:isadd,
272 }
273 })
274 this.desDisabled = true
275 }
276 }
277 },
278
279 Change(isopen,indexC){
280 // console.log('lalla===>',isopen)
281 this.childIsOpen[indexC]=!isopen
282 if(!isopen){
283 this.totalPrice=this.totalPrice+(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice)
126 // "sk_id": "89", 284 }else{
127 // "sku_name": "1.56非球面防蓝光_黑", 285 this.totalPrice=this.totalPrice-(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice)
286 }
287 let m=true;
288 for (let i = 0; i < this.childIsOpen.length; i++) {
289 m=m&this.childIsOpen[i]
290 }
291 if(m==1){
292 this.pIsoPen=true
293 } else{
294 this.pIsoPen=false
128 // "sku_shop_value": "", 295 }
129 // "sku_value": "58_61", 296 },
130 // "status": "1", 297 pChange(isopen){
131 // },
132 // }); 298 this.pIsoPen=!isopen
133 store.dispatch('cart/getCartList',{ 299 for (let i = 0; i < this.childIsOpen.length; i++) {
134 uid: 1, //用户id 300 this.childIsOpen[i]=!isopen
135 });
136 },
137
138 methods: {
139 // 跳转到对应的选购页面
140 toshop(id,type){ 301 }
141 console.log('===',id,type) 302 if(this.pIsoPen){
142 switch(type){ 303 // 计算总价逻辑
304 if(this.childIsOpen.length!=0){
305 for (let i = 0; i < this.childIsOpen.length; i++) {
306 if(this.childIsOpen[i]){
307 this.totalPrice= this.totalPrice+(this.$store.state.cart.cartList[i].num*this.$store.state.cart.cartList[i].nowPrice)
308 }
309 }
310 }
311 } else{
312 this.totalPrice=0
143 case 1: 313 }
314
315 },
316 delCart(cart_id,index){
317 // console.log('userInfo',this.$store.state.user.userInfo)
318 cart_id=parseInt(cart_id)
319 // console.log('delcart------>cart_id',cart_id)
320 // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
321 // console.log('delcart======>index',index)
322 uni.showModal({
323 title: "是否删除该商品",
324 // content: '是否删除该商品',
325 success: function (res) {
326 if (res.confirm) {
327 // this.$store.state.cart.cartList.splice(index,1)
328 store.dispatch('cart/delCart',{
329 uid: 1, //用户id
330 openid: "",
331 cart_id: cart_id, // 要修改的购物车id
332 arg:index, // 由于action 传参是能接收两参数，因此将index放入对象
333 });
334 console.log('用户点击确定');
335 }
336 }
337 });
338
144 uni.navigateTo({ 339 }
145 url: `../detailsChoiceArgs/detailsChoiceArgs?oderId=`+id+`&goodType=`+type, 340 }
146 success: res => {}, 341 }
147 fail: () => {}, 342 </script>
148 complete: () => {} 343
149 }); 344 <style lang="scss">
150 break; 345 .content {
151 case 2: 346 min-height: 100vh;
152 uni.navigateTo({ 347 background-color: #f2f2f2;
153 url: `../detailStandard/detailStandard_k?oderId=`+id+`&goodType=`+type, 348 display: flex;
154 success: res => {}, 349 flex-direction: column;
155 fail: () => {}, 350 align-items: center;
156 complete: () => {} 351 justify-content: space-between;
157 }); 352 padding: 20rpx 40rpx;
158 break; 353 box-sizing: border-box;
159 case 3||4: 354
160 uni.navigateTo({ 355 .partentCheck{
161 url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type, 356 width: 16px;
162 success: res => {}, 357 height: 16px;
163 fail: () => {}, 358 border-radius: 18px;
164 complete: () => {} 359 border: 1px solid #CFCFCF;
165 }); 360 background-color: #FFFFFF;
166 break; 361 }
167 // case 4: 362 .partentChecked{
168 // uni.navigateTo({ 363 width: 18px;
169 // url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type, 364 height: 18px;
170 // success: res => {}, 365 border-radius: 18px;
171 // fail: () => {}, 366 background-color: #FF6B4A;
172 // complete: () => {} 367 .correct {
173 // }); 368 display: inline-block;
174 case 5: 369 position: relative;
175 uni.navigateTo({ 370 width: 10rpx;
371 height: 2rpx;
176 url: `../purchaseLenses/purchaseLenses?oderId=`+id+`&goodType=`+type, 372 background: #FFFFFF;
177 success: res => {}, 373 line-height: 0;
178 fail: () => {}, 374 font-size: 0;
179 complete: () => {} 375 position: relative;
180 }); 376 top: -7px;
181 break; 377 left: 4px;
182 default : 378 -webkit-transform: rotate(45deg);
183 break 379 }
184 } 380 .correct:after {
185 }, 381 content: '/';
186 toGoods(id,type){ 382 display: block;
187 uni.navigateTo({ 383 width: 16rpx;
188 url: `../frameDetail/frameDetail?oderId=`+id, 384 height: 2rpx;
189 success: res => {}, 385 background: #FFFFFF;
190 fail: () => {}, 386 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
191 complete: () => {} 387 }
192 }); 388 }
193 console.log('toGoods =====> id:'+id +"======>type:"+type) 389
194 switch(type){ 390 .card{
195 case 1: 391 background-color: #FFFFFF;
196 uni.navigateTo({ 392 border-radius: 16rpx;
197 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 393 box-sizing: border-box;
198 success: res => {}, 394 padding: 36rpx 36rpx 36rpx 18rpx;
199 fail: () => {}, 395 display: flex;
200 complete: () => {} 396 flex-direction: column;
201 }); 397 align-items: center;
202 break; 398 justify-content: space-between;
399 margin-bottom: 180rpx;
203 case 2: 400 .cardHeader{
204 uni.navigateTo({ 401 width: 100%;
205 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 402 height: 36rpx;
206 success: res => {}, 403 display: flex;
207 fail: () => {}, 404 align-items: center;
208 complete: () => {} 405 justify-content: flex-start;
209 }); 406 image{
210 break; 407 height: 32rpx;
211 case 3: 408 width: 32rpx;
212 uni.navigateTo({ 409 padding-left: 6px;
213 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 410 padding-right: 10px;
214 success: res => {}, 411 }
215 fail: () => {}, 412 text{
216 complete: () => {} 413 // font-family: PingFangSC-Regular;
217 }); 414 font-size: 14px;
218 break; 415 color: #333333;
219 case 4: 416 letter-spacing: -0.26px;
220 uni.navigateTo({ 417 }
221 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 418 }
222 success: res => {}, 419 .cardBody{
223 fail: () => {}, 420 width: 100%;
224 complete: () => {} 421 height: 300rpx;
225 }); 422 display: flex;
226 break; 423 align-items: center;
227 default : 424 justify-content: space-between;
228 break 425 .goodInfo{
229 } 426 width: 95%;
230 }, 427 display: flex;
231 428 flex-direction: row;
232 counter(index,isadd,mp_id,sk_id,num,cart_id){ 429 justify-content: flex-start;
233 // console.log('===>>counter ===>num',num) 430 padding-left: 6px;
234 // console.log('===>>counter ===>isadd',isadd) 431 .imageWrap{
235 num=parseInt(num); 432 height: 188rpx;
236 if(isadd){ 433 width: 188rpx;
237 if(num>=this.maxCount){ 434 margin-right: 28rpx;
238 this.addDisabled = true 435 image{
239 } else{ 436 border-radius: 4px;
240 this.addDisabled= true 437 height: 188rpx;
241 // 修改num 438 width: 188rpx;
242 store.dispatch('cart/modiCart',{ 439 }
243 uid: 1, 440 }
244 // openid: '', 441 .infoRight{
245 mp_id: mp_id, 442 display: flex;
246 sk_id: sk_id, 443 flex-direction: column;
247 cart_id:cart_id, 444 align-items: flex-start;
248 num:num+1, 445 justify-content: space-between;
249 args:{ 446 height: 240rpx;
250 index:index, 447 .goodName{
448 display: -webkit-box;
449 -webkit-box-orient: vertical;
450 -webkit-line-clamp: 2;
451 text-align: justify;
452 overflow: hidden;
251 isadd:isadd, 453 font-size: 28rpx;
252 } 454 color: #333333;
253 }) 455 }
254 this.addDisabled= false 456 .describ{
255 } 457 width: 100%;
256 }else{ 458 height: 80rpx;
257 if(num<=1){ 459 box-sizing: border-box;
258 this.desDisabled = true 460 padding: 10rpx;
259 } else{ 461 font-size: 20rpx;
462 letter-spacing: -0.23px;
463 text-align: justify;
260 this.desDisabled = false 464 color: #999999;
261 // post 请求修改相关参数 465 background: #F9F9F9;
262 store.dispatch('cart/modiCart',{ 466 display: flex;
263 uid: 1, 467 justify-content: center;
264 // openid: '', 468 align-items: center;
265 mp_id: mp_id, 469 text{
266 sk_id: sk_id, 470 text-overflow: -o-ellipsis-lastline;
267 cart_id:cart_id, 471 overflow: hidden;
268 num:num-1, 472 text-overflow: ellipsis;
269 args:{ 473 display: -webkit-box;
270 index:index, 474 -webkit-line-clamp: 2;
271 isadd:isadd, 475 line-clamp: 2;
272 } 476 -webkit-box-orient: vertical;
273 }) 477 }
274 this.desDisabled = true 478 // .icon{
275 } 479 // transform: rotate(90deg);
276 } 480 // height: 13px;
277 }, 481 // width: 20px;
278 482
279 Change(isopen,indexC){ 483 // }
280 // console.log('lalla===>',isopen) 484 .icon{
281 this.childIsOpen[indexC]=!isopen 485 width: 0;
282 if(!isopen){ 486 height: 0;
283 this.totalPrice=this.totalPrice+(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice) 487 border-left: 5px transparent;
284 }else{ 488 border-right: 5px transparent;
285 this.totalPrice=this.totalPrice-(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice) 489 border-top: 5px #979797;
286 } 490 border-bottom: 0 transparent;
287 let m=true; 491 border-style: solid;
288 for (let i = 0; i < this.childIsOpen.length; i++) { 492 position: relative;
289 m=m&this.childIsOpen[i] 493 margin-left: 10px;
290 } 494 // transform: scaleY(-1);
291 if(m==1){ 495 }
292 this.pIsoPen=true 496 .icon::after{
293 } else{ 497 content: '';
294 this.pIsoPen=false 498 position: absolute;
295 } 499 top: -6.5px;
296 }, 500 left: -5px;
297 pChange(isopen){ 501 border-left: 5px transparent;
298 this.pIsoPen=!isopen 502 border-right: 5px transparent;
299 for (let i = 0; i < this.childIsOpen.length; i++) { 503 border-top: 5px #FFFFFF;
300 this.childIsOpen[i]=!isopen 504 border-bottom: 0 transparent;
301 } 505 border-style: solid;
302 if(this.pIsoPen){ 506 }
303 // 计算总价逻辑 507 }
304 if(this.childIsOpen.length!=0){ 508 .priceBox{
305 for (let i = 0; i < this.childIsOpen.length; i++) { 509 display: flex;
306 if(this.childIsOpen[i]){ 510 justify-content: space-between;
307 this.totalPrice= this.totalPrice+(this.$store.state.cart.cartList[i].num*this.$store.state.cart.cartList[i].nowPrice) 511 align-items: center;
308 } 512 // margin-top: 26px;
309 } 513 width: 100%;
310 } 514 font-size: 14px;
311 } else{ 515 color: #999999;
312 this.totalPrice=0 516 .price{
313 } 517 color: #FF6B4A;
314 518 font-size: 28rpx;
315 }, 519 }
316 delCart(cart_id,index){ 520 .counter{
317 // console.log('userInfo',this.$store.state.user.userInfo) 521 display: flex;
318 cart_id=parseInt(cart_id) 522 flex-direction: row;
319 // console.log('delcart------>cart_id',cart_id) 523 justify-content: space-between;
320 // console.log('cartlist====>delcart',this.$store.state.cart.cartList) 524 align-items: center;
321 // console.log('delcart======>index',index) 525 font-size: 28rpx;
322 uni.showModal({ 526 color: #333333;
323 title: "是否删除该商品", 527 width: 122rpx;
324 // content: '是否删除该商品', 528 .btn{
325 success: function (res) { 529 display: flex;
326 if (res.confirm) { 530 justify-content: center;
327 // this.$store.state.cart.cartList.splice(index,1) 531 line-height: 32rpx;
328 store.dispatch('cart/delCart',{ 532 height: 32rpx;
src/pages/user/user.vue
Diff comments   View file @5214ca9
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view v-if="isAuth" class="content"> 3 <view v-if="isAuth" class="content">
4 <view class="userInfo"> 4 <view class="userInfo">
5 <view class="info"> 5 <view class="info">
6 <image :src="headerphoto" mode="aspectFill"></image> 6 <image :src="headerphoto" mode="aspectFill"></image>
7 <view class="infoText"> 7 <view class="infoText">
8 <text class="userName">{{nickName}}</text> 8 <text class="userName">{{nickName}}</text>
9 </view> 9 </view>
10 </view> 10 </view>
11 <view class="service"> 11 <view class="service">
12 <image src="../../static/serviceLogo.png" mode="aspectFill"></image> 12 <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
13 </view> 13 </view>
14 </view> 14 </view>
15 <view class="myOrder"> 15 <view class="myOrder">
16 <view class="orderHeader"> 16 <view class="orderHeader">
17 <text>全部订单</text> 17 <text>全部订单</text>
18 <view class="btn" @click="toMyOrder"> 18 <view class="btn" @click="toMyOrder">
19 全部 19 全部
20 <image src="../../static/right.png" mode="aspectFill"></image> 20 <image src="../../static/right.png" mode="aspectFill"></image>
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="orderBody"> 23 <view class="orderBody">
24 <view class="item waitPay" @click="toMyOrderPaying"> 24 <view class="item waitPay" @click="toMyOrderPaying">
25 <image src="../../static/waitDeliver.png" mode="aspectFill"></image> 25 <image src="../../static/waitDeliver.png" mode="aspectFill"></image>
26 <text>待付款</text> 26 <text>待付款</text>
27 </view> 27 </view>
28 <view class="item waitDeliver" @click="toPredelivery" > 28 <view class="item waitDeliver" @click="toPredelivery" >
29 <image src="../../static/waitPay.png" mode="aspectFill"></image> 29 <image src="../../static/waitPay.png" mode="aspectFill"></image>
30 <text>待发货</text> 30 <text>待发货</text>
31 </view> 31 </view>
32 <view class="item waitReceive" @click="torefunProgress"> 32 <view class="item waitReceive" @click="torefunProgress">
33 <image src="../../static/waitReceive.png" mode="aspectFill"></image> 33 <image src="../../static/waitReceive.png" mode="aspectFill"></image>
34 <text>待收货</text> 34 <text>待收货</text>
35 </view> 35 </view>
36 <view class="item service" @click="torefundment"> 36 <view class="item service" @click="torefundment">
37 <image src="../../static/service.png" mode="aspectFill"></image> 37 <image src="../../static/service.png" mode="aspectFill"></image>
38 <text>退换/售后</text> 38 <text>退换/售后</text>
39 </view> 39 </view>
40 </view> 40 </view>
41 </view> 41 </view>
42 <view class="recommend"> 42 <view class="recommend">
43 <view class="title"> 43 <view class="title">
44 <view class="line"></view> 44 <view class="line"></view>
45 <view class="text">精选推荐</view> 45 <view class="text">精选推荐</view>
46 <view class="line"></view> 46 <view class="line"></view>
47 </view> 47 </view>
48 <!-- 商品列表 --> 48 <!-- 商品列表 -->
49 <view class="goods-list"> 49 <view class="goods-list">
50 <scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y class="product-list"> 50 <scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y class="product-list">
51 <block v-for="(goods) in userRecommandList " :key="goods.list.sk_id"> 51 <block v-for="(goods) in userRecommandList " :key="goods.list.sk_id">
52 <view class="product" v-for="(item) in goods.list" :key="item.sk_id"> 52 <view class="product" v-for="(item) in goods.list" :key="item.sk_id">
53 <Card :goods="item" ></Card> 53 <Card :goods="item" ></Card>
54 </view> 54 </view>
55 </block>
56 </scroll-view>
55 </block> 57 <view class="loading-text">{{loadingText}}</view>
56 </scroll-view> 58 </view>
57 <view class="loading-text">{{loadingText}}</view> 59 </view>
58 </view> 60 </view>
59 </view> 61 <view v-else class="auth">
60 </view> 62 <view class="icon"></view>
61 <view v-else class="auth"> 63 <view class="divider"></view>
62 <view class="icon"></view> 64 <view class="title">申请获取以下权限</view>
63 <view class="divider"></view> 65 <view class="text">获得您的公开信息(昵称、头像等)</view>
64 <view class="title">申请获取以下权限</view> 66 <button
65 <view class="text">获得您的公开信息(昵称、头像等)</view> 67 type="primary"
66 <button 68 open-type="getUserInfo"
67 type="primary" 69 @getuserinfo="onGotUserInfo"
68 open-type="getUserInfo" 70 >授权登陆</button>
69 @getuserinfo="onGotUserInfo" 71 </view>
70 >授权登陆</button> 72 </view>
71 </view> 73 </template>
72 </view> 74
73 </template> 75 <script>
74 76 import Card from "@/components/CommodityCard/CommodityCard.vue";
75 <script> 77 import store from '@/store';
76 import Card from "@/components/CommodityCard/CommodityCard.vue"; 78
77 import store from '@/store'; 79 export default {
78 80 components: {
79 export default { 81 'Card':Card
80 components: { 82 },
81 'Card':Card 83 data() {
82 }, 84 return {
83 data() { 85 //商品数据
84 return { 86 goodsList:[
85 //商品数据 87 { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
86 goodsList:[ 88 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
87 { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 89 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
88 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 90 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
89 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 91 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
90 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 92 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
91 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 93 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
92 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 94 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
93 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 95 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
94 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 96 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
95 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 97 ],
96 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } 98 isAuth: true, // 是否显示授权页面,
99 pagesnum:1 // 分页请求初始值
97 ], 100 }
98 isAuth: true, // 是否显示授权页面, 101 },
99 pagesnum:1 // 分页请求初始值 102 onLoad() {
100 } 103 // 判断是否授权
101 }, 104 uni.getSetting({
102 onLoad() { 105 success(res) {
103 // 判断是否授权 106 console.log('authSetting',res.authSetting)
104 uni.getSetting({ 107 if(res.authSetting['scope.userInfo'] === true) {
105 success(res) { 108 this.isAuth = true
106 console.log('authSetting',res.authSetting) 109 } else {
107 if(res.authSetting['scope.userInfo'] === true) { 110 this.isAuth = false
108 this.isAuth = true 111 }
109 } else { 112 }
110 this.isAuth = false 113 })
114
111 } 115 },
112 } 116 computed: {
113 }) 117 nickName() {
114 118 console.log('nickName', this.$store.state.user.userInfo)
115 }, 119 return this.$store.state.user.userInfo.nickName;
116 computed: { 120 },
117 nickName() { 121 headerphoto() {
118 console.log('nickName', this.$store.state.user.userInfo) 122 return this.$store.state.user.userInfo.headerphoto;
119 return this.$store.state.user.userInfo.nickName; 123 },
120 }, 124 userRecommandList() {
121 headerphoto() { 125 console.log('recommandList', this.$store.state.userRecommand.recommandList);
122 return this.$store.state.user.userInfo.headerphoto; 126 return this.$store.state.userRecommand.recommandList;
123 }, 127 }
124 userRecommandList() { 128 },
125 console.log('recommandList', this.$store.state.userRecommand.recommandList); 129 onLoad:function(){
130 console.log('usr-my',this.$store.state.user.userInfo)
131
126 return this.$store.state.userRecommand.recommandList; 132 store.dispatch('userRecommand/getRecommandList', {
127 } 133 // uid:468,
134 uid: this.$store.state.user.userInfo.uid,
135 // openid:"oc8cg0d-0mFIInO4LyrCFtInPWr4",
136 openid:this.$store.state.user.userInfo.openid,
137 page: this.pagesnum
128 }, 138 });
129 onLoad:function(){ 139 },
140
130 console.log('usr-my',this.$store.state.user.userInfo) 141 methods: {
131 142 // 授权
132 store.dispatch('userRecommand/getRecommandList', { 143 onGotUserInfo(e) {
133 // uid:468, 144 console.log('anthInfo', e);
134 uid: this.$store.state.user.userInfo.uid, 145 if(e.detail.errMsg == 'getUserInfo:ok') {
135 // openid:"oc8cg0d-0mFIInO4LyrCFtInPWr4", 146 const { fromInfo } = this.$store.state.user;
136 openid:this.$store.state.user.userInfo.openid, 147 console.log('=====la', fromInfo)
137 page: this.pagesnum 148 // 用户授权成功
138 }); 149 store.dispatch('user/getUserInfo', fromInfo);
139 }, 150 this.isAuth = true
140 151 }
141 methods: { 152 },
142 // 授权 153 toMyOrder(){
143 onGotUserInfo(e) { 154 uni.navigateTo({
144 console.log('anthInfo', e); 155 url: '../myOrder/myOrder?current=0',
145 if(e.detail.errMsg == 'getUserInfo:ok') { 156 success: res => {},
146 const { fromInfo } = this.$store.state.user; 157 fail: () => {},
147 console.log('=====la', fromInfo) 158 complete: () => {}
148 // 用户授权成功 159 });
149 store.dispatch('user/getUserInfo', fromInfo); 160 },
150 this.isAuth = true 161 toPredelivery(){
151 } 162 uni.navigateTo({
152 }, 163 url: '../myOrder/myOrder?current=2',
153 toMyOrder(){ 164 success: res => {},
154 uni.navigateTo({ 165 fail: () => {},
155 url: '../myOrder/myOrder?current=0', 166 complete: () => {}
156 success: res => {}, 167 });
157 fail: () => {}, 168 },
158 complete: () => {} 169 toMyOrderPaying(){
159 }); 170 uni.navigateTo({
160 }, 171 url: '../myOrder/myOrder?current=1',
161 toPredelivery(){ 172 success: res => {},
162 uni.navigateTo({ 173 fail: () => {},
163 url: '../myOrder/myOrder?current=2', 174 complete: () => {}
164 success: res => {}, 175 });
165 fail: () => {}, 176 },
166 complete: () => {} 177 torefundment(){
167 }); 178 uni.navigateTo({
168 }, 179 url:'../refundment/refundment',
169 toMyOrderPaying(){ 180 })
170 uni.navigateTo({ 181 },
171 url: '../myOrder/myOrder?current=1', 182 torefunProgress(){
172 success: res => {}, 183 uni.navigateTo({
173 fail: () => {}, 184 url:'../refundProgress/refundProgress'
174 complete: () => {} 185 })
186 },
187 handleScrolltolower(){
188 // console.log('usr-my',this.$store.state.user.userInfo)
189 this.pagesnum++;
190 store.dispatch('userRecommand/getRecommandList', {
191 uid: this.$store.state.user.userInfo.uid,
192 openid:this.$store.state.user.userInfo.openid,
193 page: this.pagesnum
194 });
175 }); 195 }
176 }, 196 }
177 torefundment(){ 197 }
178 uni.navigateTo({ 198 </script>
179 url:'../refundment/refundment', 199
180 }) 200 <style lang="scss">
181 }, 201 .warp{
182 torefunProgress(){ 202 font-size: 24rpx;
183 uni.navigateTo({ 203 background-color: #f2f2f2;
184 url:'../refundProgress/refundProgress' 204 height: 100vh;
185 }) 205 }
186 }, 206 .content {
187 handleScrolltolower(){ 207 display: flex;
188 // console.log('usr-my',this.$store.state.user.userInfo) 208 flex-direction: column;
189 this.pagesnum++; 209 align-items: center;
190 store.dispatch('userRecommand/getRecommandList', { 210 justify-content: center;
191 uid: this.$store.state.user.userInfo.uid, 211 background-color: #F2F2F2;
192 openid:this.$store.state.user.userInfo.openid, 212 }
193 page: this.pagesnum 213 .userInfo{
194 }); 214 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
195 } 215 width: 100%;
196 } 216 height: 240rpx;
197 } 217 color: #FFFFFF;
198 </script> 218 padding: 60rpx 82rpx 80rpx 44rpx;
199 219 box-sizing: border-box;
200 <style lang="scss"> 220 display: flex;
201 .warp{ 221 flex-direction: row;
202 font-size: 24rpx; 222 justify-content: space-between;
203 background-color: #f2f2f2; 223 align-items: flex-start;
204 height: 100vh; 224 .info{
205 } 225 display: flex;
206 .content { 226 flex-direction: row;
207 display: flex; 227 justify-content: space-between;
208 flex-direction: column; 228 align-items: center;
209 align-items: center; 229 image{
210 justify-content: center; 230 border-radius: 50rpx;
211 background-color: #F2F2F2; 231 height: 100rpx ;
212 } 232 width: 100rpx;
213 .userInfo{ 233 margin-right: 40rpx;
214 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); 234 }
215 width: 100%; 235 .infoText{
216 height: 240rpx; 236 display: flex;
217 color: #FFFFFF; 237 flex-direction: column;
218 padding: 60rpx 82rpx 80rpx 44rpx; 238 justify-content: space-between;
219 box-sizing: border-box; 239 align-items: flex-scetart;
220 display: flex; 240 .userName{
221 flex-direction: row; 241 font-size: 18px;
222 justify-content: space-between; 242 color: #FFFFFF;
223 align-items: flex-start; 243 margin-bottom: 8rpx;
224 .info{ 244 }
225 display: flex; 245 .nickName{
226 flex-direction: row; 246 font-size: 12px;
227 justify-content: space-between; 247 color: #FFFFFF;
228 align-items: center; 248 }
229 image{ 249 }
230 border-radius: 50rpx; 250 }
231 height: 100rpx ; 251 .service{
232 width: 100rpx; 252 margin-top: 20rpx;
233 margin-right: 40rpx; 253 image{
234 } 254 height: 36rpx;
235 .infoText{ 255 width: 36rpx;
236 display: flex; 256 }
237 flex-direction: column; 257 }
238 justify-content: space-between; 258 }
239 align-items: flex-scetart; 259 .myOrder{
240 .userName{ 260 width: 100%;
241 font-size: 18px; 261 height: 296rpx;
242 color: #FFFFFF; 262 margin-top: 20rpx;
243 margin-bottom: 8rpx; 263 margin-bottom: 20rpx;
244 } 264 padding: 0 40rpx;
245 .nickName{ 265 box-sizing: border-box;
246 font-size: 12px; 266 background: #FFFFFF;
247 color: #FFFFFF; 267 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
248 } 268 border-radius: 6px;
249 } 269 border-radius: 6px;
250 } 270 display: flex;
251 .service{ 271 flex-direction: column;
252 margin-top: 20rpx; 272 justify-content: space-around;
253 image{ 273 align-items: center;
254 height: 36rpx; 274 .orderHeader{
255 width: 36rpx; 275 width: 100%;
256 } 276 height: 100rpx;
257 } 277 display: flex;
258 } 278 flex-direction: row;
259 .myOrder{ 279 justify-content: space-between;
260 width: 100%; 280 align-items: center;
261 height: 296rpx; 281 border-bottom: 1px solid #E9E9E9;;
262 margin-top: 20rpx; 282 font-weight: bold;
263 margin-bottom: 20rpx; 283 font-size: 18px;
264 padding: 0 40rpx; 284 color: #333333;
265 box-sizing: border-box; 285 .btn{
266 background: #FFFFFF; 286 font-size: 12px;
267 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 287 color: #999999;
268 border-radius: 6px; 288 image{
269 border-radius: 6px; 289 margin-left: 20rpx;
270 display: flex; 290 height: 16rpx;
271 flex-direction: column; 291 width: 8rpx;
272 justify-content: space-around; 292 }
273 align-items: center; 293 }
274 .orderHeader{ 294 }
275 width: 100%; 295 .orderBody{
276 height: 100rpx; 296 width: 100%;
277 display: flex; 297 display: flex;
278 flex-direction: row; 298 flex-direction: row;
279 justify-content: space-between; 299 justify-content: space-between;
280 align-items: center; 300 align-items: center;
281 border-bottom: 1px solid #E9E9E9;; 301 .item{
282 font-weight: bold; 302 display: flex;
283 font-size: 18px; 303 flex-direction: column;
284 color: #333333; 304 align-items: center;
285 .btn{ 305 image{
286 font-size: 12px; 306 width: 46rpx;
287 color: #999999; 307 height: 46rpx;
288 image{ 308 }
289 margin-left: 20rpx; 309 text{
290 height: 16rpx; 310 margin-top: 24rpx;
291 width: 8rpx; 311 font-size: 12px;
292 } 312 color: #333333;
293 } 313 }
294 } 314 }
295 .orderBody{ 315 }
296 width: 100%; 316 }
297 display: flex; 317 .recommend{
298 flex-direction: row; 318 background: #FFFFFF;
299 justify-content: space-between; 319 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
300 align-items: center; 320 border-radius: 6px;
301 .item{ 321 border-radius: 6px;
302 display: flex; 322 width: 100%;
303 flex-direction: column; 323 .title{
304 align-items: center; 324 display: flex;
305 image{ 325 flex-direction: row;
306 width: 46rpx; 326 align-items: center;
307 height: 46rpx; 327 justify-content: space-between;
308 } 328 padding: 20rpx 40rpx;
309 text{ 329 .line{
310 margin-top: 24rpx; 330 width: 264rpx;
311 font-size: 12px; 331 height: 1rpx;
312 color: #333333; 332 border-bottom: 1px solid #EAEAEA;
313 } 333 }
314 } 334 .text{
315 } 335 font-family: PingFangSC-Medium;
316 } 336 font-size: 14px;
317 .recommend{ 337 color: #333333;
318 background: #FFFFFF; 338 letter-spacing: -0.26px;
319 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 339 text-align: justify;
320 border-radius: 6px; 340 line-height: 24px;
321 border-radius: 6px; 341 }
322 width: 100%; 342 }
323 .title{ 343 .goods-list{
324 display: flex; 344 .loading-text{
325 flex-direction: row; 345 width: 100%;
326 align-items: center; 346 display: flex;
327 justify-content: space-between; 347 justify-content: center;
328 padding: 20rpx 40rpx; 348 align-items: center;
329 .line{ 349 height: 30px;
330 width: 264rpx; 350 color: #979797;
331 height: 1rpx; 351 font-size: 12px;
332 border-bottom: 1px solid #EAEAEA; 352 }
333 } 353 .product-list{
334 .text{ 354 width: 92%;
335 font-family: PingFangSC-Medium; 355 padding: 0 4% 3vw 4%;
336 font-size: 14px; 356 display: flex;
357 height: 200px;
337 color: #333333; 358 justify-content: space-between;
338 letter-spacing: -0.26px; 359 flex-wrap: wrap;
339 text-align: justify; 360 .product{
340 line-height: 24px; 361 width: 48%;
341 } 362 margin: 0 0 20rpx 0;
342 } 363 background: #FFFFFF;
343 .goods-list{ 364 border: 1px solid #F2F2F2;
344 .loading-text{ 365 }
345 width: 100%; 366 }
346 display: flex; 367 }
347 justify-content: center; 368 }
348 align-items: center; 369 .auth {
349 height: 30px; 370 height: 100vh;
350 color: #979797; 371 display: flex;
351 font-size: 12px; 372 flex-direction: column;
352 } 373 align-items: center;
353 .product-list{ 374 .icon {
354 width: 92%; 375 width: 140rpx;
355 padding: 0 4% 3vw 4%; 376 height: 140rpx;
356 display: flex; 377 border-radius: 50%;
357 height: 200px; 378 margin-top: 100rpx;
358 justify-content: space-between; 379 background-color: grey;
359 flex-wrap: wrap; 380 }
360 .product{ 381 .divider {
361 width: 48%; 382 height: 1rpx;
362 margin: 0 0 20rpx 0; 383 width: 600rpx;
363 background: #FFFFFF; 384 margin-top: 80rpx;
364 border: 1px solid #F2F2F2; 385 background-color: #E6E3E3;
365 } 386 }
366 } 387 .title {
367 } 388 width: 600rpx;
368 } 389 margin-top: 50rpx;
369 .auth { 390 text-align: left;
370 height: 100vh; 391 }
371 display: flex; 392 .text {
372 flex-direction: column; 393 width: 600rpx;
373 align-items: center; 394 margin-top: 30rpx;
374 .icon { 395 text-align: left;
375 width: 140rpx; 396 color: #E6E3E3;
376 height: 140rpx; 397 }
377 border-radius: 50%; 398 button {
378 margin-top: 100rpx; 399 width: 450rpx;
379 background-color: grey; 400 height: 80rpx;
380 } 401 line-height: 80rpx;
381 .divider { 402 margin-top: 80rpx;
382 height: 1rpx; 403 border-radius: 30rpx;
383 width: 600rpx; 404 }
384 margin-top: 80rpx; 405 }
385 background-color: #E6E3E3; 406
386 } 407 </style>
387 .title { 408
src/store/modules/cart.js
Diff comments   View file @5214ca9
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
11 const data = {
12 data:{
13 // list 购物车列表
14 list:[
15 {
16 goods_name: "1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", //商品名称
17 pid: "6",//产品id
18 real_price: 99,
19 checked: true,//是否选中
20 name: "颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射防日光 / 配件 免费送 /折射",//属性名称 ,颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 …
21 cart_id: "39", //购物车唯一序列号
22 num: "1", //此购物
23 pics: "/static/myorder-paying-pic.png", //商品图片
24 goodsType:2,// 商品种类
25 },
26 {
27 goods_name: "1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", //商品名称
28 pid: "4",//产品id
29 real_price: 189,
30 checked: false,//是否选中
31 name: "颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射防日光 / 配件 免费送 /折射",//属性名称 ,颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 …
32 cart_id: "38", //购物车唯一序列号
33 num: "2", //此购物
34 pics: "/static/myorder-paying-pic.png", //商品图片
35 goodsType:3,// 商品种类
36 },
37 ],
38 mp_id: "1",
39 mp_list://使用人，一个产品只有一个使用人
40 [
41 {
42 glassWidth: "54",//镜宽
43 img_url2: "http://localhost:8087/images/shop_1/1/",//使用人的头像，根据此头像，AI识别出数据。
44 in_time: "2020-02-22 03:19:38",//使用人加入的时间
45 leftAxi: "124",//左眼数据
46 leftCyl: "-2",//左眼数据
47 leftSph: "-1",//左眼数据
48 leftVis: "5",//左眼数据
49 legWidth: "158",//镜腿长
50 metal: null,//使用人的其它定义（材质过敏之类的）
51 mp_id: "1",//使用的id
52 name: "me",//使用人的名字
53 norseWidth: "18",//鼻宽
54 pd: "89.6",//瞳距
55 price: "0",//此人偏好的价格
56 rightAxi: "123",//右眼数据
57 rightCyl: "24",//右眼数据
58 rightSph: "-4",//右眼数据
59 rightVis: "5.1",//右眼数据
60 uid: "1",//购买人的uid
61 }
62 ],
63 sk_id: "80",//此产品下的sku的唯一id
64 skuList:[//sku清单
65 {
66 discount: "45",//折扣，数据库中以int型存储，所以要除100
67 in_price: "6000",//进货价格，数据库中以int型存储，单位是分，所以显示时要除以100
68 kc: "0",//库存
69 model_pic: null,//模型试戴图
70 out_price: 191.8,//销售价格，元
71 pic: "https://glass.xiuyetang.com//upload_jk/6/6_321EB1.jpg",//可供查看图
72 pid: "6",//索引产品id
73 real_price: 99,//真实可成交价格
74 sk_id: "74",//成交时的sku_id
75 sku_name: "1.56非球面防蓝光_黑色",//sku名称
76 sku_shop_value: "",//sku商家定义值
77 sku_value: "47_51",//sku系统生成值
78 status: "1",//此产品下的sku状态
79 }
80 ]
81 }, // 一个产品下，会有多个sku，都在这个skuList数组下
82 msg: "ok",
83 status: 1,
84 }
85
10 86 const mutations = {
11 const data = { 87 INIT: (state, cartList) => {
12 data:{ 88 state.cartList = cartList;
13 // list 购物车列表 89 },
90 DEL:(state,index)=>{
91 console.log('mutations====>',state.cartList)
92 state.cartList.splice(index,1)
93 console.log('mutations====>index',index)
94 // state.cartList=delList
95 },
96 MODI:(state,args) => {
97 console.log('the num',state.cartList[args.index].num)
98 console.log('mutations====>isadd',args)
99 if(args.isadd)
100 {
101 state.cartList[args.index].num=args.num
102 } else{
103 state.cartList[args.index].num=args.num
104 }
105 console.log('the num',state.cartList[args.index].num)
106 },
107
14 list:[ 108 };
15 { 109
16 goods_name: "1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", //商品名称
17 pid: "6",//产品id
18 real_price: 99, 110 const actions = {
19 checked: true,//是否选中 111
20 name: "颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射防日光 / 配件 免费送 /折射",//属性名称 ,颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … 112 getCartList({ commit }, param) {
21 cart_id: "39", //购物车唯一序列号 113 request({
22 num: "1", //此购物 114 url: cartList,
23 pics: "/static/myorder-paying-pic.png", //商品图片 115 data:param,
24 goodsType:2,// 商品种类 116 success: (res) => {
25 }, 117 console.log('cart===>接口数据',res.data.data)
26 { 118 // const resData = {
27 goods_name: "1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", //商品名称 119 // ...res,
28 pid: "4",//产品id 120 // data,
29 real_price: 189, 121 // }
30 checked: false,//是否选中 122 commit('INIT', res.data.data)
31 name: "颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射防日光 / 配件 免费送 /折射",//属性名称 ,颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … 123 },
32 cart_id: "38", //购物车唯一序列号 124 fail: (res) => {
33 num: "2", //此购物 125 console.log("fail status === > ", res);
34 pics: "/static/myorder-paying-pic.png", //商品图片 126 },
35 goodsType:3,// 商品种类 127 complete: (res) => {
128 console.log("complete status === > ", res);
129 },
130 })
131 },
132
133 modiCart({ commit }, param) {
134 const args=Object.assign({num:param.num},param.args)
135 delete param.args
136 request({
137 url: cartModi,
138 data: param,
139 success: (res) => {
140 console.log('modi-parm',param)
141 commit('MODI',args)
142 },
143 fail: (res) => {
144 console.log("fail status === > ", res);
145 },
146 complete: (res) => {
147 console.log("complete status === > ", res);
148 },
149 })
150 },
151
152 delCart({ commit },param ) {
153 let arg = param.arg;
154 delete param.arg
155 request({
156 url: cartDel,
157 data: param,
158 success: (res) => {
159 console.log('del-parm',param)
160 console.log('del-myparms==>',arg)
161 // console.log('deacart====>cartList',this.$store.state.cart.cartList)
162
163 commit('DEL',arg)
164 },
165 fail: (res) => {
166 console.log("fail status === > ", res);
167 },
168 complete: (res) => {
169 console.log("complete status === > ", res);
170 },
171 })
172 },
173
174 addCart({ commit }, param) {
175 console.log('请求接口开始')
176 request({
177 url: cartAdd,
178 data:param,
179 success: (res) => {
180 console.log('add-parm',param)
181 console.log('addcart===>res.data===>',res.data)
182 // commit('INIT', res.data.data)
183 },
184 fail: (res) => {
185 console.log("fail status === > ", res);
186 },
187 complete: (res) => {
188 console.log("complete status === > ", res);
189 },
190 })
191 },
192
36 }, 193 }
37 ], 194
38 mp_id: "1", 195 export default {
39 mp_list://使用人，一个产品只有一个使用人 196 namespaced: true,
40 [ 197 state,
41 { 198 mutations,
src/store/modules/userRecommand.js
Diff comments   View file @5214ca9
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 recommandList 5 recommandList
6 } = urlAlias; 6 } = urlAlias;
7 7
8 const state = { 8 const state = {
9 recommandList: [], 9 recommandList: [],
10 }; 10 };
11 11
12 const data = {
13 "code": 1,
14 "msg": "请求成功",
15 "data": {
16 // list 表示商品数据列表
17 "list": [
18 {
19 model_pic: null,
20 p_name: "1.61防蓝光镜片 非球面_枪色款镜架商务男士防蓝光眼镜",
21 p_root_index: "1", //对应goodType
22 pic: "http://localhost/sys-glass/image/picture.png",
23 pid: "96",
24 real_price: "17800",
25 sk_id: "1448",
26 sku_name: "1.61防蓝光镜片 非球面_枪色款镜架",
27 trade_num: "0",
28 },
29 {
30 "sk_id": "39",
31 "pic": "/static/img/goods/p1.jpg",
32 "p_name": "1.56防蓝光镜片非球面_黑银色镜架防蓝光眼镜超轻不压鼻",
33 "old_price": "18000",
34 "real_price": "9900",
35 "trade_num": 123, // 对应购买人数
36 "p_root_index": 2, // 对应跳转的详情页
37 "pid":4, // 产品id
38 },
39 ],
40 pagesnum:1, // 懒加载要用到的页数
41 pagessize:10,// 每次请求返回的list长度
42 }
43
44 }
45
12 const data = { 46 const mutations = {
13 "code": 1, 47 INIT: (state, list) => {
14 "msg": "请求成功", 48 state.recommandList = list;
15 "data": { 49 },
16 // list 表示商品数据列表 50 };
17 "list": [ 51
52 let goodsList=[];
53
18 { 54 const actions = {
19 model_pic: null, 55 getRecommandList({ commit }, param) {
20 p_name: "1.61防蓝光镜片 非球面_枪色款镜架商务男士防蓝光眼镜", 56 request({
21 p_root_index: "1", //对应goodType 57 url: recommandList,
22 pic: "http://localhost/sys-glass/image/picture.png", 58 success: (res) => {
23 pid: "96", 59 console.log('userRecommand-parm',param)
24 real_price: "17800", 60 console.log(res.data.data)
61 // const Res={...res.data.data.list,...data.data.list}
62 goodsList=[...goodsList,...res.data.data]
63 // console.log(res.data)
64 commit('INIT', goodsList)
25 sk_id: "1448", 65 },
26 sku_name: "1.61防蓝光镜片 非球面_枪色款镜架", 66 fail: (res) => {
67 uni.showToast({
68 title:"数据加载完了",
69 icon:"none"
70 })
27 trade_num: "0", 71 console.log("fail status === > ", res);
28 }, 72 },
29 { 73 complete: (res) => {
30 "sk_id": "39", 74 console.log("complete status === > ", res);
31 "pic": "/static/img/goods/p1.jpg", 75 },
32 "p_name": "1.56防蓝光镜片非球面_黑银色镜架防蓝光眼镜超轻不压鼻", 76 })
33 "old_price": "18000", 77 },
34 "real_price": "9900", 78 };
35 "trade_num": 123, // 对应购买人数 79
36 "p_root_index": 2, // 对应跳转的详情页 80 export default {
37 "pid":4, // 产品id 81 namespaced: true,
38 }, 82 state,
39 ], 83 mutations,
40 pagesnum:1, // 懒加载要用到的页数 84 actions,
41 pagessize:10,// 每次请求返回的list长度 85 };
1 const urlAlias = { 1 const urlAlias = {
2 // 获取首页商品列表 2 // 获取商品信息
3 shopList: '/app/prod/list', 3 read: '/app/prod/read',
4 4
5 // 获取首页商品列表 5 // 首页
6 category: '/app/prod/category2', 6 shopList: '/app/prod/list', // 获取首页商品列表
7 // 获取商品信息 7 category: '/app/prod/category2', // 获取首页商品分类
8 read: '/app/prod/read', 8 search: '/app/prod/search', // 首页搜索商品
9 9
10 // 首页 10 // 登陆
11 shopList: '/app/prod/list', // 获取首页商品列表 11 login: '/app/glass/getOpenId', // 登陆
12 category: '/app/prod/category', // 获取首页商品分类 12 getUserInfo: '/app/glass/userinfo', // 获取用户信息
13 13
14 // 登陆 14 // 我的订单
15 login: '/app/glass/getOpenId', // 登陆 15 orderList: '/app/order/list', // 获取订单列表
16 getUserInfo: '/app/glass/userinfo', // 获取用户信息 16
17 17 // 购物车
18 // 我的订单 18 cartList: '/app/cart/list', // 获取购物车列表
19 cartModi: '/app/cart/modi', // 修改购物车
20 cartDel: '/app/cart/del', // 删除购物车
21 cartAdd: '/app/cart/add',// 添加购物车
19 orderList: '/app/order/list', // 获取订单列表 22
20 23 // 我的
21 // 购物车 24 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品
22 cartList: '/app/cart/list', // 获取购物车列表 25
23 cartModi: '/app/cart/modi', // 修改购物车 26 // 镜框选购页
24 cartDel: '/app/cart/del', // 删除购物车 27 detailStandardList: '/app/prod/read', //获取商品的详细信息
25 cartAdd: '/app/cart/add',// 添加购物车 28
26 29 }
27 // 我的 30
28 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品 31 export default urlAlias;
29 32
30 // 镜框选购页
31 detailStandardList: '/app/prod/read', //获取商品的详细信息
32
33 }