Commit cc196c33cca49d2c88ced1f67f17c6a0179cf45f
1 parent
c4c4f1251c
Exists in
master
购物车和用户推荐接口渲染
Showing
6 changed files
with
562 additions
and
133 deletions
Show diff stats
src/components/CommodityCard/CommodityCard.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="card" @tap="toGoods(goods.id,goods.goodType)"> | 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" ></image> | 3 | <image mode="widthFix" :src="goods.imgurl?goods.imgurl:goods.pic" ></image> |
| 4 | <view class="name">{{goods.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}}</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}} | 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
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | 3 | <block v-if="cartList.length==0"> | |
| 4 | <view class="card"> | ||
| 5 | <view class="cardHeader"> | ||
| 6 | <block v-if="pIsoPen"> | ||
| 7 | <view class="partentChecked" @click="pChange(pIsoPen)"> | ||
| 8 | <span class="status correct"></span> | ||
| 9 | </view> | ||
| 10 | </block> | ||
| 11 | <block v-else> | ||
| 12 | <view class="partentCheck" @click="pChange(pIsoPen)"></view> | ||
| 13 | </block> | ||
| 14 | <image src="../../static/store.png" mode="aspectFill"></image> | ||
| 15 | <text>非常戴镜</text> | ||
| 16 | </view> | ||
| 17 | 4 | ||
| 18 | <view class="cardBody"> | 5 | </block> |
| 19 | <template v-if="childIsOpen.child1"> | 6 | <block v-else> |
| 20 | <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')"> | 7 | <view class="card"> |
| 21 | <span class="status 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 | </template> | 13 | <image src="../../static/store.png" mode="aspectFill"></image> |
| 24 | <template v-else> | 14 | <text>非常戴镜</text> |
| 25 | <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view> | 15 | </view> |
| 26 | </template> | 16 | |
| 27 | <view class="goodInfo"> | 17 | <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id" |
| 28 | <view class="imageWrap"> | 18 | @longpress="delCart(item.cart_id,index)"> |
| 29 | <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> | 19 | <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" |
| 20 | @click="Change(childIsOpen[index],index)"> | ||
| 21 | <span class="correct"></span> | ||
| 30 | </view> | 22 | </view> |
| 31 | <view class="infoRight"> | 23 | <view class="goodInfo"> |
| 32 | <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> | 24 | <view class="imageWrap"> |
| 33 | <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> | 25 | <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> |
| 34 | <view class="icon"></view> | ||
| 35 | </view> | 26 | </view> |
| 36 | <view class="priceBox"> | 27 | <view class="infoRight"> |
| 37 | <view class="price">￥{{198}}</view> | 28 | <view class="goodName" @tap="toGoods(item.pid,item.p_root_index)">{{item.p_name}}</view> |
| 38 | <text>(限购{{maxCount}}副)</text> | 29 | <view class="describ" @tap="toshop(item.pid,item.p_root_index)"> |
| 39 | <view class="counter"> | 30 | <text> |
| 40 | <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> | 31 | <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value"> |
| 41 | <text>{{count}}</text> | 32 | {{tag.label+` `}} |
| 42 | <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</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 | </view> | 47 | </view> |
| 44 | </view> | 48 | </view> |
| 45 | </view> | 49 | </view> |
| 46 | </view> | 50 | </view> |
| 47 | </view> | 51 | </view> |
| 48 | <view class="cardBody"> | 52 | </block> |
| 49 | <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> --> | ||
| 50 | <template v-if="childIsOpen.child2"> | ||
| 51 | <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')"> | ||
| 52 | <span class="status correct"></span> | ||
| 53 | </view> | ||
| 54 | </template> | ||
| 55 | <template v-else> | ||
| 56 | <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view> | ||
| 57 | </template> | ||
| 58 | <view class="goodInfo"> | ||
| 59 | <view class="imageWrap"> | ||
| 60 | <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> | ||
| 61 | </view> | ||
| 62 | <view class="infoRight"> | ||
| 63 | <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> | ||
| 64 | <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> | ||
| 65 | <view class="icon"></view> | ||
| 66 | </view> | ||
| 67 | <view class="priceBox"> | ||
| 68 | <view class="price">￥198</view> | ||
| 69 | <text>(限购{{maxCount}}副)</text> | ||
| 70 | <view class="counter"> | ||
| 71 | <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> | ||
| 72 | <text>{{count}}</text> | ||
| 73 | <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> | ||
| 74 | </view> | ||
| 75 | </view> | ||
| 76 | </view> | ||
| 77 | </view> | ||
| 78 | </view> | ||
| 79 | </view> | ||
| 80 | |||
| 81 | <view class="footer"> | 53 | <view class="footer"> |
| 82 | <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> | 54 | <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> |
| 83 | <view class="footerRight"> | 55 | <view class="footerRight"> |
| 84 | <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover"> | 56 | <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover"> |
| 85 | <view class="paybtn">立即支付</view> | 57 | <view class="paybtn" >立即结算</view> |
| 86 | </navigator> | 58 | </navigator> |
| 87 | </view> | 59 | </view> |
| 88 | </view> | 60 | </view> |
| 89 | 61 | ||
| 90 | </view> | 62 | </view> |
| 91 | </template> | 63 | </template> |
| 92 | 64 | ||
| 93 | <script> | 65 | <script> |
| 94 | import store from '@/store'; | 66 | import store from '@/store'; |
| 95 | 67 | ||
| 96 | export default { | 68 | export default { |
| 97 | 69 | ||
| 98 | data() { | 70 | data() { |
| 99 | return { | 71 | return { |
| 100 | totalPrice: 360, | 72 | totalPrice: 0, |
| 101 | count:1, | 73 | pIsoPen:false, |
| 74 | // childIsOpen:[], | ||
| 102 | maxCount:20, | 75 | maxCount:20, |
| 103 | pIsoPen: false, | ||
| 104 | childIsOpen:{ | ||
| 105 | "child1":true, | ||
| 106 | "child2":true | ||
| 107 | }, | ||
| 108 | } | 76 | } |
| 109 | }, | 77 | }, |
| 110 | computed:{ | 78 | computed:{ |
| 79 | |||
| 111 | cartList() { | 80 | cartList() { |
| 112 | // 也可以从 getters 获取 | 81 | // console.log('cart-list', this.$store.state.cart.cartList); |
| 113 | console.log('cart-list', this.$store.state.cart.cartList); | ||
| 114 | return this.$store.state.cart.cartList; | 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 | } | 92 | } |
| 116 | }, | 93 | }, |
| 117 | onLoad: function() { | 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 | store.dispatch('cart/getCartList',{ | 133 | store.dispatch('cart/getCartList',{ |
| 119 | uid: 1, //用户id | 134 | uid: 1, //用户id |
| 120 | }); | 135 | }); |
| 121 | }, | 136 | }, |
| 137 | |||
| 122 | methods: { | 138 | methods: { |
| 123 | counter(isadd){ | 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 | if(isadd){ | 236 | if(isadd){ |
| 125 | this.count >= this.maxCount? this.addDisabled = true:this.count++; | 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 | }else{ | 284 | }else{ |
| 127 | this.count <= 1? this.desDisabled = true:this.count--; | 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 | } | 295 | } |
| 129 | }, | 296 | }, |
| 130 | pChange(isopen){ | 297 | pChange(isopen){ |
| 131 | // console.log(isopen) | ||
| 132 | this.pIsoPen=!isopen | 298 | this.pIsoPen=!isopen |
| 133 | this.childIsOpen.child1=!isopen | 299 | for (let i = 0; i < this.childIsOpen.length; i++) { |
| 134 | this.childIsOpen.child2=!isopen | 300 | this.childIsOpen[i]=!isopen |
| 135 | }, | ||
| 136 | cChange(isopen,child){ | ||
| 137 | // console.log(child) | ||
| 138 | if(child==='child1'){ | ||
| 139 | this.childIsOpen.child1=!isopen | ||
| 140 | } | 301 | } |
| 141 | if(child==='child2'){ | 302 | if(this.pIsoPen){ |
| 142 | this.childIsOpen.child2=!isopen | 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 | } | 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 | } | 339 | } |
| 145 | } | 340 | } |
| 146 | } | 341 | } |
| 147 | </script> | 342 | </script> |
| 148 | 343 | ||
| 149 | <style lang="scss"> | 344 | <style lang="scss"> |
| 150 | .content { | 345 | .content { |
| 151 | min-height: 100vh; | 346 | min-height: 100vh; |
| 152 | background-color: #f2f2f2; | 347 | background-color: #f2f2f2; |
| 153 | display: flex; | 348 | display: flex; |
| 154 | flex-direction: column; | 349 | flex-direction: column; |
| 155 | align-items: center; | 350 | align-items: center; |
| 156 | justify-content: space-between; | 351 | justify-content: space-between; |
| 157 | padding: 20rpx 40rpx; | 352 | padding: 20rpx 40rpx; |
| 158 | box-sizing: border-box; | 353 | box-sizing: border-box; |
| 159 | 354 | ||
| 160 | .partentCheck{ | 355 | .partentCheck{ |
| 161 | width: 16px; | 356 | width: 16px; |
| 162 | height: 16px; | 357 | height: 16px; |
| 163 | border-radius: 18px; | 358 | border-radius: 18px; |
| 164 | border: 1px solid #CFCFCF; | 359 | border: 1px solid #CFCFCF; |
| 165 | background-color: #FFFFFF; | 360 | background-color: #FFFFFF; |
| 166 | } | 361 | } |
| 167 | .partentChecked{ | 362 | .partentChecked{ |
| 168 | width: 18px; | 363 | width: 18px; |
| 169 | height: 18px; | 364 | height: 18px; |
| 170 | border-radius: 18px; | 365 | border-radius: 18px; |
| 171 | background-color: #FF6B4A; | 366 | background-color: #FF6B4A; |
| 172 | .correct { | 367 | .correct { |
| 173 | display: inline-block; | 368 | display: inline-block; |
| 174 | width: 5px; | 369 | position: relative; |
| 175 | height: 1px; | 370 | width: 10rpx; |
| 371 | height: 2rpx; | ||
| 176 | background: #FFFFFF; | 372 | background: #FFFFFF; |
| 177 | line-height: 0; | 373 | line-height: 0; |
| 178 | font-size: 0; | 374 | font-size: 0; |
| 179 | position: relative; | 375 | position: relative; |
| 180 | top: -6px; | 376 | top: -7px; |
| 181 | left: 4px; | 377 | left: 4px; |
| 182 | -webkit-transform: rotate(45deg); | 378 | -webkit-transform: rotate(45deg); |
| 183 | } | 379 | } |
| 184 | .correct:after { | 380 | .correct:after { |
| 185 | content: '/'; | 381 | content: '/'; |
| 186 | display: block; | 382 | display: block; |
| 187 | width: 8px; | 383 | width: 16rpx; |
| 188 | height: 1px; | 384 | height: 2rpx; |
| 189 | background: #FFFFFF; | 385 | background: #FFFFFF; |
| 190 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); | 386 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); |
| 191 | } | 387 | } |
| 192 | } | 388 | } |
| 193 | 389 | ||
| 194 | .card{ | 390 | .card{ |
| 195 | background-color: #FFFFFF; | 391 | background-color: #FFFFFF; |
| 196 | border-radius: 16rpx; | 392 | border-radius: 16rpx; |
| 197 | box-sizing: border-box; | 393 | box-sizing: border-box; |
| 198 | padding: 36rpx 36rpx 36rpx 18rpx; | 394 | padding: 36rpx 36rpx 36rpx 18rpx; |
| 199 | display: flex; | 395 | display: flex; |
| 200 | flex-direction: column; | 396 | flex-direction: column; |
| 201 | align-items: center; | 397 | align-items: center; |
| 202 | justify-content: space-between; | 398 | justify-content: space-between; |
| 399 | margin-bottom: 180rpx; | ||
| 203 | .cardHeader{ | 400 | .cardHeader{ |
| 204 | width: 100%; | 401 | width: 100%; |
| 205 | height: 36rpx; | 402 | height: 36rpx; |
| 206 | display: flex; | 403 | display: flex; |
| 207 | align-items: center; | 404 | align-items: center; |
| 208 | justify-content: flex-start; | 405 | justify-content: flex-start; |
| 209 | image{ | 406 | image{ |
| 210 | height: 32rpx; | 407 | height: 32rpx; |
| 211 | width: 32rpx; | 408 | width: 32rpx; |
| 212 | padding-left: 6px; | 409 | padding-left: 6px; |
| 213 | padding-right: 10px; | 410 | padding-right: 10px; |
| 214 | } | 411 | } |
| 215 | text{ | 412 | text{ |
| 216 | // font-family: PingFangSC-Regular; | 413 | // font-family: PingFangSC-Regular; |
| 217 | font-size: 14px; | 414 | font-size: 14px; |
| 218 | color: #333333; | 415 | color: #333333; |
| 219 | letter-spacing: -0.26px; | 416 | letter-spacing: -0.26px; |
| 220 | } | 417 | } |
| 221 | } | 418 | } |
| 222 | .cardBody{ | 419 | .cardBody{ |
| 223 | width: 100%; | 420 | width: 100%; |
| 224 | height: 300rpx; | 421 | height: 300rpx; |
| 225 | display: flex; | 422 | display: flex; |
| 226 | align-items: center; | 423 | align-items: center; |
| 227 | justify-content: space-between; | 424 | justify-content: space-between; |
| 228 | .goodInfo{ | 425 | .goodInfo{ |
| 229 | width: 95%; | 426 | width: 95%; |
| 230 | display: flex; | 427 | display: flex; |
| 231 | flex-direction: row; | 428 | flex-direction: row; |
| 232 | justify-content: flex-start; | 429 | justify-content: flex-start; |
| 233 | padding-left: 6px; | 430 | padding-left: 6px; |
| 234 | .imageWrap{ | 431 | .imageWrap{ |
| 235 | height: 188rpx; | 432 | height: 188rpx; |
| 236 | width: 188rpx; | 433 | width: 188rpx; |
| 237 | margin-right: 28rpx; | 434 | margin-right: 28rpx; |
| 238 | image{ | 435 | image{ |
| 239 | border-radius: 4px; | 436 | border-radius: 4px; |
| 240 | height: 188rpx; | 437 | height: 188rpx; |
| 241 | width: 188rpx; | 438 | width: 188rpx; |
| 242 | } | 439 | } |
| 243 | } | 440 | } |
| 244 | .infoRight{ | 441 | .infoRight{ |
| 245 | display: flex; | 442 | display: flex; |
| 246 | flex-direction: column; | 443 | flex-direction: column; |
| 247 | align-items: flex-start; | 444 | align-items: flex-start; |
| 248 | justify-content: space-between; | 445 | justify-content: space-between; |
| 249 | height: 240rpx; | 446 | height: 240rpx; |
| 250 | .goodName{ | 447 | .goodName{ |
| 448 | display: -webkit-box; | ||
| 449 | -webkit-box-orient: vertical; | ||
| 450 | -webkit-line-clamp: 2; | ||
| 451 | text-align: justify; | ||
| 452 | overflow: hidden; | ||
| 251 | font-size: 28rpx; | 453 | font-size: 28rpx; |
| 252 | color: #333333; | 454 | color: #333333; |
| 253 | } | 455 | } |
| 254 | .describ{ | 456 | .describ{ |
| 255 | width: 100%; | 457 | width: 100%; |
| 256 | height: 80rpx; | 458 | height: 80rpx; |
| 257 | box-sizing: border-box; | 459 | box-sizing: border-box; |
| 258 | padding: 10rpx; | 460 | padding: 10rpx; |
| 259 | font-size: 20rpx; | 461 | font-size: 20rpx; |
| 462 | letter-spacing: -0.23px; | ||
| 463 | text-align: justify; | ||
| 260 | color: #999999; | 464 | color: #999999; |
| 261 | background: #F2F2F2; | 465 | background: #F9F9F9; |
| 262 | display: flex; | 466 | display: flex; |
| 263 | justify-content: center; | 467 | justify-content: center; |
| 264 | align-items: center; | 468 | align-items: center; |
| 265 | text{ | 469 | text{ |
| 266 | text-overflow: -o-ellipsis-lastline; | 470 | text-overflow: -o-ellipsis-lastline; |
| 267 | overflow: hidden; | 471 | overflow: hidden; |
| 268 | text-overflow: ellipsis; | 472 | text-overflow: ellipsis; |
| 269 | display: -webkit-box; | 473 | display: -webkit-box; |
| 270 | -webkit-line-clamp: 2; | 474 | -webkit-line-clamp: 2; |
| 271 | line-clamp: 2; | 475 | line-clamp: 2; |
| 272 | -webkit-box-orient: vertical; | 476 | -webkit-box-orient: vertical; |
| 273 | } | 477 | } |
| 274 | // .icon{ | 478 | // .icon{ |
| 275 | // transform: rotate(90deg); | 479 | // transform: rotate(90deg); |
| 276 | // height: 13px; | 480 | // height: 13px; |
| 277 | // width: 20px; | 481 | // width: 20px; |
| 278 | 482 | ||
| 279 | // } | 483 | // } |
| 280 | .icon{ | 484 | .icon{ |
| 281 | width: 0; | 485 | width: 0; |
| 282 | height: 0; | 486 | height: 0; |
| 283 | border-left: 5px transparent; | 487 | border-left: 5px transparent; |
| 284 | border-right: 5px transparent; | 488 | border-right: 5px transparent; |
| 285 | border-top: 5px #979797; | 489 | border-top: 5px #979797; |
| 286 | border-bottom: 0 transparent; | 490 | border-bottom: 0 transparent; |
| 287 | border-style: solid; | 491 | border-style: solid; |
| 288 | position: relative; | 492 | position: relative; |
| 289 | margin-left: 10px; | 493 | margin-left: 10px; |
| 290 | // transform: scaleY(-1); | 494 | // transform: scaleY(-1); |
| 291 | } | 495 | } |
| 292 | .icon::after{ | 496 | .icon::after{ |
| 293 | content: ''; | 497 | content: ''; |
| 294 | position: absolute; | 498 | position: absolute; |
| 295 | top: -6.5px; | 499 | top: -6.5px; |
| 296 | left: -5px; | 500 | left: -5px; |
| 297 | border-left: 5px transparent; | 501 | border-left: 5px transparent; |
| 298 | border-right: 5px transparent; | 502 | border-right: 5px transparent; |
| 299 | border-top: 5px #FFFFFF; | 503 | border-top: 5px #FFFFFF; |
| 300 | border-bottom: 0 transparent; | 504 | border-bottom: 0 transparent; |
| 301 | border-style: solid; | 505 | border-style: solid; |
| 302 | } | 506 | } |
| 303 | } | 507 | } |
| 304 | .priceBox{ | 508 | .priceBox{ |
| 305 | display: flex; | 509 | display: flex; |
| 306 | justify-content: space-between; | 510 | justify-content: space-between; |
| 307 | align-items: center; | 511 | align-items: center; |
| 308 | // margin-top: 26px; | 512 | // margin-top: 26px; |
| 309 | width: 100%; | 513 | width: 100%; |
| 310 | font-size: 14px; | 514 | font-size: 14px; |
| 311 | color: #999999; | 515 | color: #999999; |
| 312 | .price{ | 516 | .price{ |
| 313 | color: #FF6B4A; | 517 | color: #FF6B4A; |
| 314 | font-size: 28rpx; | 518 | font-size: 28rpx; |
| 315 | } | 519 | } |
| 316 | .counter{ | 520 | .counter{ |
| 317 | display: flex; | 521 | display: flex; |
| 318 | flex-direction: row; | 522 | flex-direction: row; |
| 319 | justify-content: space-between; | 523 | justify-content: space-between; |
| 320 | align-items: center; | 524 | align-items: center; |
| 321 | font-size: 28rpx; | 525 | font-size: 28rpx; |
| 322 | color: #333333; | 526 | color: #333333; |
| 323 | width: 122rpx; | 527 | width: 122rpx; |
| 324 | .btn{ | 528 | .btn{ |
| 325 | display: flex; | 529 | display: flex; |
| 326 | justify-content: center; | 530 | justify-content: center; |
| 327 | line-height: 32rpx; | 531 | line-height: 32rpx; |
| 328 | height: 32rpx; | 532 | height: 32rpx; |
src/pages/user/user.vue
| 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 | <view class="product-list"> | 50 | <scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y class="product-list"> |
| 51 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" > | 51 | <block v-for="(goods) in userRecommandList " :key="goods.list.sk_id"> |
| 52 | <Card :goods = "goods"></Card> | 52 | <view class="product" v-for="(item) in goods.list" :key="item.sk_id"> |
| 53 | </view> | 53 | <Card :goods="item" ></Card> |
| 54 | </view> | 54 | </view> |
| 55 | </block> | ||
| 56 | </scroll-view> | ||
| 55 | <view class="loading-text">{{loadingText}}</view> | 57 | <view class="loading-text">{{loadingText}}</view> |
| 56 | </view> | 58 | </view> |
| 57 | </view> | 59 | </view> |
| 58 | </view> | 60 | </view> |
| 59 | <view v-else class="auth"> | 61 | <view v-else class="auth"> |
| 60 | <view class="icon"></view> | 62 | <view class="icon"></view> |
| 61 | <view class="divider"></view> | 63 | <view class="divider"></view> |
| 62 | <view class="title">申请获取以下权限</view> | 64 | <view class="title">申请获取以下权限</view> |
| 63 | <view class="text">获得您的公开信息(昵称、头像等)</view> | 65 | <view class="text">获得您的公开信息(昵称、头像等)</view> |
| 64 | <button | 66 | <button |
| 65 | type="primary" | 67 | type="primary" |
| 66 | open-type="getUserInfo" | 68 | open-type="getUserInfo" |
| 67 | @getuserinfo="onGotUserInfo" | 69 | @getuserinfo="onGotUserInfo" |
| 68 | >授权登陆</button> | 70 | >授权登陆</button> |
| 69 | </view> | 71 | </view> |
| 70 | </view> | 72 | </view> |
| 71 | </template> | 73 | </template> |
| 72 | 74 | ||
| 73 | <script> | 75 | <script> |
| 74 | import Card from "@/components/CommodityCard/CommodityCard.vue"; | 76 | import Card from "@/components/CommodityCard/CommodityCard.vue"; |
| 75 | import store from '@/store'; | 77 | import store from '@/store'; |
| 76 | 78 | ||
| 77 | export default { | 79 | export default { |
| 78 | components: { | 80 | components: { |
| 79 | 'Card':Card | 81 | 'Card':Card |
| 80 | }, | 82 | }, |
| 81 | data() { | 83 | data() { |
| 82 | return { | 84 | return { |
| 83 | //商品数据 | 85 | //商品数据 |
| 84 | goodsList:[ | 86 | goodsList:[ |
| 85 | { goods_id: 0, img: "/static/img/goods/p1.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人浏览' }, |
| 86 | { goods_id: 1, img: '/static/img/goods/p2.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人浏览' }, |
| 87 | { goods_id: 2, img: '/static/img/goods/p3.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: 3, img: '/static/img/goods/p4.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: 4, img: '/static/img/goods/p5.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: 5, img: '/static/img/goods/p6.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: 6, img: '/static/img/goods/p7.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: 7, img: '/static/img/goods/p8.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: 8, img: '/static/img/goods/p9.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: 9, img: '/static/img/goods/p10.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 | ], | 97 | ], |
| 96 | isAuth: true, // 是否显示授权页面 | 98 | isAuth: true, // 是否显示授权页面, |
| 99 | pagesnum:1 // 分页请求初始值 | ||
| 97 | } | 100 | } |
| 98 | }, | 101 | }, |
| 99 | onLoad() { | 102 | onLoad() { |
| 100 | // 判断是否授权 | 103 | // 判断是否授权 |
| 101 | uni.getSetting({ | 104 | uni.getSetting({ |
| 102 | success(res) { | 105 | success(res) { |
| 103 | console.log('authSetting',res.authSetting) | 106 | console.log('authSetting',res.authSetting) |
| 104 | if(res.authSetting['scope.userInfo'] === true) { | 107 | if(res.authSetting['scope.userInfo'] === true) { |
| 105 | this.isAuth = true | 108 | this.isAuth = true |
| 106 | } else { | 109 | } else { |
| 107 | this.isAuth = false | 110 | this.isAuth = false |
| 108 | } | 111 | } |
| 109 | } | 112 | } |
| 110 | }) | 113 | }) |
| 114 | |||
| 111 | }, | 115 | }, |
| 112 | computed: { | 116 | computed: { |
| 113 | nickName() { | 117 | nickName() { |
| 114 | console.log('nickName', this.$store.state.user.userInfo) | 118 | console.log('nickName', this.$store.state.user.userInfo) |
| 115 | return this.$store.state.user.userInfo.nickName; | 119 | return this.$store.state.user.userInfo.nickName; |
| 116 | }, | 120 | }, |
| 117 | headerphoto() { | 121 | headerphoto() { |
| 118 | return this.$store.state.user.userInfo.headerphoto; | 122 | return this.$store.state.user.userInfo.headerphoto; |
| 119 | }, | 123 | }, |
| 120 | userRecommandList() { | 124 | userRecommandList() { |
| 121 | console.log('recommandList', this.$store.state.userRecommand.recommandList); | 125 | console.log('recommandList', this.$store.state.userRecommand.recommandList); |
| 122 | return this.$store.state.userRecommand.recommandList; | 126 | return this.$store.state.userRecommand.recommandList; |
| 123 | } | 127 | } |
| 124 | }, | 128 | }, |
| 125 | onLoad: function() { | 129 | onLoad:function(){ |
| 130 | console.log('usr-my',this.$store.state.user.userInfo) | ||
| 131 | |||
| 126 | store.dispatch('userRecommand/getRecommandList', { | 132 | store.dispatch('userRecommand/getRecommandList', { |
| 127 | uid: 2, | 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 | }, | 139 | }, |
| 140 | |||
| 130 | methods: { | 141 | methods: { |
| 131 | // 授权 | 142 | // 授权 |
| 132 | onGotUserInfo(e) { | 143 | onGotUserInfo(e) { |
| 133 | console.log('anthInfo', e); | 144 | console.log('anthInfo', e); |
| 134 | if(e.detail.errMsg == 'getUserInfo:ok') { | 145 | if(e.detail.errMsg == 'getUserInfo:ok') { |
| 135 | const { fromInfo } = this.$store.state.user; | 146 | const { fromInfo } = this.$store.state.user; |
| 136 | console.log('=====la', fromInfo) | 147 | console.log('=====la', fromInfo) |
| 137 | // 用户授权成功 | 148 | // 用户授权成功 |
| 138 | store.dispatch('user/getUserInfo', fromInfo); | 149 | store.dispatch('user/getUserInfo', fromInfo); |
| 139 | this.isAuth = true | 150 | this.isAuth = true |
| 140 | } | 151 | } |
| 141 | }, | 152 | }, |
| 142 | toMyOrder(){ | 153 | toMyOrder(){ |
| 143 | uni.navigateTo({ | 154 | uni.navigateTo({ |
| 144 | url: '../myOrder/myOrder?current=0', | 155 | url: '../myOrder/myOrder?current=0', |
| 145 | success: res => {}, | 156 | success: res => {}, |
| 146 | fail: () => {}, | 157 | fail: () => {}, |
| 147 | complete: () => {} | 158 | complete: () => {} |
| 148 | }); | 159 | }); |
| 149 | }, | 160 | }, |
| 150 | toPredelivery(){ | 161 | toPredelivery(){ |
| 151 | uni.navigateTo({ | 162 | uni.navigateTo({ |
| 152 | url: '../myOrder/myOrder?current=2', | 163 | url: '../myOrder/myOrder?current=2', |
| 153 | success: res => {}, | 164 | success: res => {}, |
| 154 | fail: () => {}, | 165 | fail: () => {}, |
| 155 | complete: () => {} | 166 | complete: () => {} |
| 156 | }); | 167 | }); |
| 157 | }, | 168 | }, |
| 158 | toMyOrderPaying(){ | 169 | toMyOrderPaying(){ |
| 159 | uni.navigateTo({ | 170 | uni.navigateTo({ |
| 160 | url: '../myOrder/myOrder?current=1', | 171 | url: '../myOrder/myOrder?current=1', |
| 161 | success: res => {}, | 172 | success: res => {}, |
| 162 | fail: () => {}, | 173 | fail: () => {}, |
| 163 | complete: () => {} | 174 | complete: () => {} |
| 164 | }); | 175 | }); |
| 165 | }, | 176 | }, |
| 166 | torefundment(){ | 177 | torefundment(){ |
| 167 | uni.navigateTo({ | 178 | uni.navigateTo({ |
| 168 | url:'../refundment/refundment', | 179 | url:'../refundment/refundment', |
| 169 | }) | 180 | }) |
| 170 | }, | 181 | }, |
| 171 | torefunProgress(){ | 182 | torefunProgress(){ |
| 172 | uni.navigateTo({ | 183 | uni.navigateTo({ |
| 173 | url:'../refundProgress/refundProgress' | 184 | url:'../refundProgress/refundProgress' |
| 174 | }) | 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 | } | 197 | } |
| 178 | </script> | 198 | </script> |
| 179 | 199 | ||
| 180 | <style lang="scss"> | 200 | <style lang="scss"> |
| 181 | .warp{ | 201 | .warp{ |
| 182 | font-size: 24rpx; | 202 | font-size: 24rpx; |
| 183 | background-color: #f2f2f2; | 203 | background-color: #f2f2f2; |
| 184 | height: 100vh; | 204 | height: 100vh; |
| 185 | } | 205 | } |
| 186 | .content { | 206 | .content { |
| 187 | display: flex; | 207 | display: flex; |
| 188 | flex-direction: column; | 208 | flex-direction: column; |
| 189 | align-items: center; | 209 | align-items: center; |
| 190 | justify-content: center; | 210 | justify-content: center; |
| 191 | background-color: #F2F2F2; | 211 | background-color: #F2F2F2; |
| 192 | } | 212 | } |
| 193 | .userInfo{ | 213 | .userInfo{ |
| 194 | background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); | 214 | background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); |
| 195 | width: 100%; | 215 | width: 100%; |
| 196 | height: 240rpx; | 216 | height: 240rpx; |
| 197 | color: #FFFFFF; | 217 | color: #FFFFFF; |
| 198 | padding: 60rpx 82rpx 80rpx 44rpx; | 218 | padding: 60rpx 82rpx 80rpx 44rpx; |
| 199 | box-sizing: border-box; | 219 | box-sizing: border-box; |
| 200 | display: flex; | 220 | display: flex; |
| 201 | flex-direction: row; | 221 | flex-direction: row; |
| 202 | justify-content: space-between; | 222 | justify-content: space-between; |
| 203 | align-items: flex-start; | 223 | align-items: flex-start; |
| 204 | .info{ | 224 | .info{ |
| 205 | display: flex; | 225 | display: flex; |
| 206 | flex-direction: row; | 226 | flex-direction: row; |
| 207 | justify-content: space-between; | 227 | justify-content: space-between; |
| 208 | align-items: center; | 228 | align-items: center; |
| 209 | image{ | 229 | image{ |
| 210 | border-radius: 50rpx; | 230 | border-radius: 50rpx; |
| 211 | height: 100rpx ; | 231 | height: 100rpx ; |
| 212 | width: 100rpx; | 232 | width: 100rpx; |
| 213 | margin-right: 40rpx; | 233 | margin-right: 40rpx; |
| 214 | } | 234 | } |
| 215 | .infoText{ | 235 | .infoText{ |
| 216 | display: flex; | 236 | display: flex; |
| 217 | flex-direction: column; | 237 | flex-direction: column; |
| 218 | justify-content: space-between; | 238 | justify-content: space-between; |
| 219 | align-items: flex-scetart; | 239 | align-items: flex-scetart; |
| 220 | .userName{ | 240 | .userName{ |
| 221 | font-size: 18px; | 241 | font-size: 18px; |
| 222 | color: #FFFFFF; | 242 | color: #FFFFFF; |
| 223 | margin-bottom: 8rpx; | 243 | margin-bottom: 8rpx; |
| 224 | } | 244 | } |
| 225 | .nickName{ | 245 | .nickName{ |
| 226 | font-size: 12px; | 246 | font-size: 12px; |
| 227 | color: #FFFFFF; | 247 | color: #FFFFFF; |
| 228 | } | 248 | } |
| 229 | } | 249 | } |
| 230 | } | 250 | } |
| 231 | .service{ | 251 | .service{ |
| 232 | margin-top: 20rpx; | 252 | margin-top: 20rpx; |
| 233 | image{ | 253 | image{ |
| 234 | height: 36rpx; | 254 | height: 36rpx; |
| 235 | width: 36rpx; | 255 | width: 36rpx; |
| 236 | } | 256 | } |
| 237 | } | 257 | } |
| 238 | } | 258 | } |
| 239 | .myOrder{ | 259 | .myOrder{ |
| 240 | width: 100%; | 260 | width: 100%; |
| 241 | height: 296rpx; | 261 | height: 296rpx; |
| 242 | margin-top: 20rpx; | 262 | margin-top: 20rpx; |
| 243 | margin-bottom: 20rpx; | 263 | margin-bottom: 20rpx; |
| 244 | padding: 0 40rpx; | 264 | padding: 0 40rpx; |
| 245 | box-sizing: border-box; | 265 | box-sizing: border-box; |
| 246 | background: #FFFFFF; | 266 | background: #FFFFFF; |
| 247 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | 267 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
| 248 | border-radius: 6px; | 268 | border-radius: 6px; |
| 249 | border-radius: 6px; | 269 | border-radius: 6px; |
| 250 | display: flex; | 270 | display: flex; |
| 251 | flex-direction: column; | 271 | flex-direction: column; |
| 252 | justify-content: space-around; | 272 | justify-content: space-around; |
| 253 | align-items: center; | 273 | align-items: center; |
| 254 | .orderHeader{ | 274 | .orderHeader{ |
| 255 | width: 100%; | 275 | width: 100%; |
| 256 | height: 100rpx; | 276 | height: 100rpx; |
| 257 | display: flex; | 277 | display: flex; |
| 258 | flex-direction: row; | 278 | flex-direction: row; |
| 259 | justify-content: space-between; | 279 | justify-content: space-between; |
| 260 | align-items: center; | 280 | align-items: center; |
| 261 | border-bottom: 1px solid #E9E9E9;; | 281 | border-bottom: 1px solid #E9E9E9;; |
| 262 | font-weight: bold; | 282 | font-weight: bold; |
| 263 | font-size: 18px; | 283 | font-size: 18px; |
| 264 | color: #333333; | 284 | color: #333333; |
| 265 | .btn{ | 285 | .btn{ |
| 266 | font-size: 12px; | 286 | font-size: 12px; |
| 267 | color: #999999; | 287 | color: #999999; |
| 268 | image{ | 288 | image{ |
| 269 | margin-left: 20rpx; | 289 | margin-left: 20rpx; |
| 270 | height: 16rpx; | 290 | height: 16rpx; |
| 271 | width: 8rpx; | 291 | width: 8rpx; |
| 272 | } | 292 | } |
| 273 | } | 293 | } |
| 274 | } | 294 | } |
| 275 | .orderBody{ | 295 | .orderBody{ |
| 276 | width: 100%; | 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 | .item{ | 301 | .item{ |
| 282 | display: flex; | 302 | display: flex; |
| 283 | flex-direction: column; | 303 | flex-direction: column; |
| 284 | align-items: center; | 304 | align-items: center; |
| 285 | image{ | 305 | image{ |
| 286 | width: 46rpx; | 306 | width: 46rpx; |
| 287 | height: 46rpx; | 307 | height: 46rpx; |
| 288 | } | 308 | } |
| 289 | text{ | 309 | text{ |
| 290 | margin-top: 24rpx; | 310 | margin-top: 24rpx; |
| 291 | font-size: 12px; | 311 | font-size: 12px; |
| 292 | color: #333333; | 312 | color: #333333; |
| 293 | } | 313 | } |
| 294 | } | 314 | } |
| 295 | } | 315 | } |
| 296 | } | 316 | } |
| 297 | .recommend{ | 317 | .recommend{ |
| 298 | background: #FFFFFF; | 318 | background: #FFFFFF; |
| 299 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | 319 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
| 300 | border-radius: 6px; | 320 | border-radius: 6px; |
| 301 | border-radius: 6px; | 321 | border-radius: 6px; |
| 302 | width: 100%; | 322 | width: 100%; |
| 303 | .title{ | 323 | .title{ |
| 304 | display: flex; | 324 | display: flex; |
| 305 | flex-direction: row; | 325 | flex-direction: row; |
| 306 | align-items: center; | 326 | align-items: center; |
| 307 | justify-content: space-between; | 327 | justify-content: space-between; |
| 308 | padding: 20rpx 40rpx; | 328 | padding: 20rpx 40rpx; |
| 309 | .line{ | 329 | .line{ |
| 310 | width: 264rpx; | 330 | width: 264rpx; |
| 311 | height: 1rpx; | 331 | height: 1rpx; |
| 312 | border-bottom: 1px solid #EAEAEA; | 332 | border-bottom: 1px solid #EAEAEA; |
| 313 | } | 333 | } |
| 314 | .text{ | 334 | .text{ |
| 315 | font-family: PingFangSC-Medium; | 335 | font-family: PingFangSC-Medium; |
| 316 | font-size: 14px; | 336 | font-size: 14px; |
| 317 | color: #333333; | 337 | color: #333333; |
| 318 | letter-spacing: -0.26px; | 338 | letter-spacing: -0.26px; |
| 319 | text-align: justify; | 339 | text-align: justify; |
| 320 | line-height: 24px; | 340 | line-height: 24px; |
| 321 | } | 341 | } |
| 322 | } | 342 | } |
| 323 | .goods-list{ | 343 | .goods-list{ |
| 324 | .loading-text{ | 344 | .loading-text{ |
| 325 | width: 100%; | 345 | width: 100%; |
| 326 | display: flex; | 346 | display: flex; |
| 327 | justify-content: center; | 347 | justify-content: center; |
| 328 | align-items: center; | 348 | align-items: center; |
| 329 | height: 30px; | 349 | height: 30px; |
| 330 | color: #979797; | 350 | color: #979797; |
| 331 | font-size: 12px; | 351 | font-size: 12px; |
| 332 | } | 352 | } |
| 333 | .product-list{ | 353 | .product-list{ |
| 334 | width: 92%; | 354 | width: 92%; |
| 335 | padding: 0 4% 3vw 4%; | 355 | padding: 0 4% 3vw 4%; |
| 336 | display: flex; | 356 | display: flex; |
| 357 | height: 200px; | ||
| 337 | justify-content: space-between; | 358 | justify-content: space-between; |
| 338 | flex-wrap: wrap; | 359 | flex-wrap: wrap; |
| 339 | .product{ | 360 | .product{ |
| 340 | width: 48%; | 361 | width: 48%; |
| 341 | margin: 0 0 20rpx 0; | 362 | margin: 0 0 20rpx 0; |
| 342 | background: #FFFFFF; | 363 | background: #FFFFFF; |
| 343 | border: 1px solid #F2F2F2; | 364 | border: 1px solid #F2F2F2; |
| 344 | } | 365 | } |
| 345 | } | 366 | } |
| 346 | } | 367 | } |
| 347 | } | 368 | } |
| 348 | .auth { | 369 | .auth { |
| 349 | height: 100vh; | 370 | height: 100vh; |
| 350 | display: flex; | 371 | display: flex; |
| 351 | flex-direction: column; | 372 | flex-direction: column; |
| 352 | align-items: center; | 373 | align-items: center; |
| 353 | .icon { | 374 | .icon { |
| 354 | width: 140rpx; | 375 | width: 140rpx; |
| 355 | height: 140rpx; | 376 | height: 140rpx; |
| 356 | border-radius: 50%; | 377 | border-radius: 50%; |
| 357 | margin-top: 100rpx; | 378 | margin-top: 100rpx; |
| 358 | background-color: grey; | 379 | background-color: grey; |
| 359 | } | 380 | } |
| 360 | .divider { | 381 | .divider { |
| 361 | height: 1rpx; | 382 | height: 1rpx; |
| 362 | width: 600rpx; | 383 | width: 600rpx; |
| 363 | margin-top: 80rpx; | 384 | margin-top: 80rpx; |
| 364 | background-color: #E6E3E3; | 385 | background-color: #E6E3E3; |
| 365 | } | 386 | } |
| 366 | .title { | 387 | .title { |
| 367 | width: 600rpx; | 388 | width: 600rpx; |
| 368 | margin-top: 50rpx; | 389 | margin-top: 50rpx; |
| 369 | text-align: left; | 390 | text-align: left; |
| 370 | } | 391 | } |
| 371 | .text { | 392 | .text { |
| 372 | width: 600rpx; | 393 | width: 600rpx; |
| 373 | margin-top: 30rpx; | 394 | margin-top: 30rpx; |
| 374 | text-align: left; | 395 | text-align: left; |
| 375 | color: #E6E3E3; | 396 | color: #E6E3E3; |
| 376 | } | 397 | } |
| 377 | button { | 398 | button { |
| 378 | width: 450rpx; | 399 | width: 450rpx; |
| 379 | height: 80rpx; | 400 | height: 80rpx; |
| 380 | line-height: 80rpx; | 401 | line-height: 80rpx; |
| 381 | margin-top: 80rpx; | 402 | margin-top: 80rpx; |
| 382 | border-radius: 30rpx; | 403 | border-radius: 30rpx; |
| 383 | } | 404 | } |
| 384 | } | 405 | } |
| 385 | 406 | ||
| 386 | </style> | 407 | </style> |
| 387 | 408 |
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 } = 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 | const mutations = { | 86 | const mutations = { |
| 11 | INIT: (state, cartList) => { | 87 | INIT: (state, cartList) => { |
| 12 | state.cartList = cartList; | 88 | state.cartList = cartList; |
| 13 | }, | 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 | }; | 108 | }; |
| 15 | 109 | ||
| 16 | |||
| 17 | |||
| 18 | const actions = { | 110 | const actions = { |
| 19 | 111 | ||
| 20 | getCartList({ commit }, param) { | 112 | getCartList({ commit }, param) { |
| 21 | request({ | 113 | request({ |
| 22 | url: cartList, | 114 | url: cartList, |
| 23 | success: (res) => { | 115 | data:param, |
| 24 | 116 | success: (res) => { | |
| 25 | commit('INIT', res.data.data) | 117 | console.log('cart===>接口数据',res.data.data) |
| 26 | }, | 118 | // const resData = { |
| 27 | fail: (res) => { | 119 | // ...res, |
| 28 | console.log("fail status === > ", res); | 120 | // data, |
| 29 | }, | 121 | // } |
| 30 | complete: (res) => { | 122 | commit('INIT', res.data.data) |
| 31 | console.log("complete status === > ", res); | 123 | }, |
| 32 | }, | 124 | fail: (res) => { |
| 33 | }) | 125 | console.log("fail status === > ", res); |
| 34 | } | 126 | }, |
| 35 | 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 | export default { | 195 | export default { |
| 39 | namespaced: true, | 196 | namespaced: true, |
| 40 | state, | 197 | state, |
| 41 | mutations, | 198 | mutations, |
src/store/modules/userRecommand.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 { | 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 mutations = { | 46 | const mutations = { |
| 13 | INIT: (state, list) => { | 47 | INIT: (state, list) => { |
| 14 | state.recommandList = list; | 48 | state.recommandList = list; |
| 15 | }, | 49 | }, |
| 16 | }; | 50 | }; |
| 17 | 51 | ||
| 52 | let goodsList=[]; | ||
| 53 | |||
| 18 | const actions = { | 54 | const actions = { |
| 19 | getRecommandList({ commit }, param) { | 55 | getRecommandList({ commit }, param) { |
| 20 | request({ | 56 | request({ |
| 21 | url: recommandList, | 57 | url: recommandList, |
| 22 | success: (res) => { | 58 | success: (res) => { |
| 23 | console.log(res.data) | 59 | console.log('userRecommand-parm',param) |
| 24 | commit('INIT', res.data.data) | 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 | }, | 65 | }, |
| 26 | fail: (res) => { | 66 | fail: (res) => { |
| 67 | uni.showToast({ | ||
| 68 | title:"数据加载完了", | ||
| 69 | icon:"none" | ||
| 70 | }) | ||
| 27 | console.log("fail status === > ", res); | 71 | console.log("fail status === > ", res); |
| 28 | }, | 72 | }, |
| 29 | complete: (res) => { | 73 | complete: (res) => { |
| 30 | console.log("complete status === > ", res); | 74 | console.log("complete status === > ", res); |
| 31 | }, | 75 | }, |
| 32 | }) | 76 | }) |
| 33 | }, | 77 | }, |
| 34 | }; | 78 | }; |
| 35 | 79 | ||
| 36 | export default { | 80 | export default { |
| 37 | namespaced: true, | 81 | namespaced: true, |
| 38 | state, | 82 | state, |
| 39 | mutations, | 83 | mutations, |
| 40 | actions, | 84 | actions, |
| 41 | }; | 85 | }; |
src/store/url.js
| 1 | const urlAlias = { | 1 | const urlAlias = { |
| 2 | // 获取首页商品列表 | 2 | // 获取首页商品列表 |
| 3 | shopList: '/app/prod/list', | 3 | shopList: '/app/prod/list', |
| 4 | 4 | ||
| 5 | // 获取首页商品列表 | 5 | // 获取首页商品列表 |
| 6 | category: '/app/prod/category2', | 6 | category: '/app/prod/category2', |
| 7 | // 获取商品信息 | 7 | // 获取商品信息 |
| 8 | read: '/app/prod/read', | 8 | read: '/app/prod/read', |
| 9 | 9 | ||
| 10 | // 首页 | 10 | // 首页 |
| 11 | shopList: '/app/prod/list', // 获取首页商品列表 | 11 | shopList: '/app/prod/list', // 获取首页商品列表 |
| 12 | category: '/app/prod/category', // 获取首页商品分类 | 12 | category: '/app/prod/category', // 获取首页商品分类 |
| 13 | 13 | ||
| 14 | // 登陆 | 14 | // 登陆 |
| 15 | login: '/app/glass/getOpenId', // 登陆 | 15 | login: '/app/glass/getOpenId', // 登陆 |
| 16 | getUserInfo: '/app/glass/userinfo', // 获取用户信息 | 16 | getUserInfo: '/app/glass/userinfo', // 获取用户信息 |
| 17 | 17 | ||
| 18 | // 我的订单 | 18 | // 我的订单 |
| 19 | orderList: '/app/order/list', // 获取订单列表 | 19 | orderList: '/app/order/list', // 获取订单列表 |
| 20 | 20 | ||
| 21 | // 购物车 | 21 | // 购物车 |
| 22 | cartList: '/app/cart/list', // 获取购物车列表 | 22 | cartList: '/app/cart/list', // 获取购物车列表 |
| 23 | cartModi: '/app/cart/modi', // 修改购物车 | ||
| 24 | cartDel: '/app/cart/del', // 删除购物车 | ||
| 25 | cartAdd: '/app/cart/add',// 添加购物车 | ||
| 23 | 26 | ||
| 24 | // 我的 | 27 | // 我的 |
| 25 | recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品 | 28 | recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品 |
| 26 | 29 | ||
| 27 | // 镜框选购页 | 30 | // 镜框选购页 |
| 28 | detailStandardList: '/app/prod/read', //获取商品的详细信息 | 31 | detailStandardList: '/app/prod/read', //获取商品的详细信息 |
| 29 | 32 | ||
| 30 | } | 33 | } |
| 31 | 34 | ||
| 32 | export default urlAlias; | 35 | export default urlAlias; |
| 33 | 36 |