Commit 93e6a26508abe0226b9c435225e0e6bae99b4e8d
1 parent
fa7712dcc0
Exists in
master
首页懒加载
Showing
6 changed files
with
201 additions
and
30 deletions
Show diff stats
src/components/EasyLoadimage/EasyLoadimage.vue
| File was created | 1 | <template> | |
| 2 | <view class="easy-loadimage" :id="uid"> | ||
| 3 | <image class="origin-img" :src="imageSrc?imageSrc:defaultImg" :mode="mode" | ||
| 4 | v-if="loadImg&&!isLoadError" | ||
| 5 | v-show="showImg" | ||
| 6 | :class="{'no-transition':!openTransition,'show-transition':showTransition&&openTransition}" | ||
| 7 | @load="handleImgLoad" | ||
| 8 | @error="handleImgError"> | ||
| 9 | </image> | ||
| 10 | <view class="loadfail-img" v-else-if="isLoadError"></view> | ||
| 11 | <view :class="['loading-img',loadingMode]" v-show="!showImg&&!isLoadError"></view> | ||
| 12 | |||
| 13 | </view> | ||
| 14 | </template> | ||
| 15 | <script> | ||
| 16 | // 生成全局唯一id | ||
| 17 | function generateUUID() { | ||
| 18 | return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { | ||
| 19 | let r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); | ||
| 20 | return v.toString(16); | ||
| 21 | }) | ||
| 22 | } | ||
| 23 | export default{ | ||
| 24 | props:{ | ||
| 25 | imageSrc:{ | ||
| 26 | type: String, | ||
| 27 | }, | ||
| 28 | mode:{ | ||
| 29 | type: String, | ||
| 30 | }, | ||
| 31 | scrollTop:{ | ||
| 32 | type: Number, | ||
| 33 | }, | ||
| 34 | loadingMode:{ | ||
| 35 | type: String, | ||
| 36 | default:'looming-gray' | ||
| 37 | }, | ||
| 38 | openTransition:{ | ||
| 39 | type: Boolean, | ||
| 40 | default:true, | ||
| 41 | }, | ||
| 42 | viewHeight:{ | ||
| 43 | type:Number, | ||
| 44 | default() { | ||
| 45 | return uni.getSystemInfoSync().windowHeight; | ||
| 46 | } | ||
| 47 | } | ||
| 48 | }, | ||
| 49 | watch:{ | ||
| 50 | scrollTop(val){ | ||
| 51 | this.onScroll(val) | ||
| 52 | } | ||
| 53 | }, | ||
| 54 | data(){ | ||
| 55 | return { | ||
| 56 | uid:'', | ||
| 57 | loadImg:false, | ||
| 58 | showImg:false, | ||
| 59 | isLoadError:false, | ||
| 60 | showTransition:false | ||
| 61 | } | ||
| 62 | }, | ||
| 63 | methods:{ | ||
| 64 | init(){ | ||
| 65 | this.uid = 'uid-' + generateUUID(); | ||
| 66 | this.$nextTick(this.onScroll) | ||
| 67 | }, | ||
| 68 | handleImgLoad(e){ | ||
| 69 | // console.log('success'); | ||
| 70 | this.showImg = true; | ||
| 71 | // this.$nextTick(function(){ | ||
| 72 | // this.showTransition = true | ||
| 73 | // }) | ||
| 74 | setTimeout(()=>{ | ||
| 75 | this.showTransition = true | ||
| 76 | },50) | ||
| 77 | }, | ||
| 78 | handleImgError(e){ | ||
| 79 | // console.log('fail'); | ||
| 80 | this.isLoadError = true; | ||
| 81 | }, | ||
| 82 | onScroll(scrollTop){ | ||
| 83 | // 加载ing时才执行滚动监听判断是否可加载 | ||
| 84 | if(this.loadImg || this.isLoadError) return; | ||
| 85 | const id = this.uid | ||
| 86 | const query = uni.createSelectorQuery().in(this); | ||
| 87 | query.select('#'+id).boundingClientRect(data => { | ||
| 88 | if(!data) return; | ||
| 89 | if(data.top - this.viewHeight<0){ | ||
| 90 | this.loadImg = true; | ||
| 91 | } | ||
| 92 | }).exec() | ||
| 93 | }, | ||
| 94 | }, | ||
| 95 | mounted() { | ||
| 96 | this.init() | ||
| 97 | } | ||
| 98 | } | ||
| 99 | </script> | ||
| 100 | |||
| 101 | <style scoped> | ||
| 102 | /* 官方优化图片tips */ | ||
| 103 | image{ | ||
| 104 | will-change: transform | ||
| 105 | } | ||
| 106 | /* 渐变过渡效果处理 */ | ||
| 107 | image.origin-img{ | ||
| 108 | width: 100%; | ||
| 109 | height: 100%; | ||
| 110 | opacity: 0.3; | ||
| 111 | } | ||
| 112 | image.origin-img.show-transition{ | ||
| 113 | transition: opacity 1.2s; | ||
| 114 | opacity: 1; | ||
| 115 | } | ||
| 116 | image.origin-img.no-transition{ | ||
| 117 | opacity: 1; | ||
| 118 | } | ||
| 119 | /* 加载失败、加载中的占位图样式控制 */ | ||
| 120 | .loadfail-img{ | ||
| 121 | height: 100%; | ||
| 122 | background: url('~@/static/easy-loadimage/loadfail.png') no-repeat center; | ||
| 123 | background-size: 50%; | ||
| 124 | } | ||
| 125 | .loading-img{ | ||
| 126 | height: 100%; | ||
| 127 | } | ||
| 128 | /* 转圈 */ | ||
| 129 | .spin-circle{ | ||
| 130 | background: url('~@/static/easy-loadimage/loading.gif') no-repeat center; | ||
| 131 | background-size: 100rpx; | ||
| 132 | } | ||
| 133 | /* 动态灰色若隐若现 */ | ||
| 134 | .looming-gray{ | ||
| 135 | animation: looming-gray 1s infinite linear; | ||
| 136 | background-color: #e3e3e3; | ||
| 137 | } | ||
| 138 | @keyframes looming-gray{ | ||
| 139 | 0% {background-color:#e3e3e3aa;} | ||
| 140 | 50% {background-color:#e3e3e3;} | ||
| 141 | 100% {background-color:#e3e3e3aa;} | ||
| 142 | } | ||
| 143 | /* 骨架屏1 */ | ||
| 144 | .skeleton-1{ | ||
| 145 | background-color: #e3e3e3; | ||
| 146 | background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 80%); | ||
| 147 | background-size: 100rpx 100%; | ||
| 148 | background-repeat: repeat-y; | ||
| 149 | background-position:0 0; | ||
| 150 | animation: skeleton-1 .6s infinite; | ||
| 151 | } | ||
| 152 | @keyframes skeleton-1 { | ||
| 153 | to { | ||
| 154 | background-position: 200% 0; | ||
| 155 | } | ||
| 156 | } | ||
| 157 | /* 骨架屏2 */ | ||
| 158 | .skeleton-2{ | ||
| 159 | background-image: linear-gradient(-90deg, #fefefe 0%, #e6e6e6 50%,#fefefe 100%); | ||
| 160 | background-size: 400% 400%; | ||
| 161 | background-position:0 0; | ||
| 162 | animation: skeleton-2 1.2s ease-in-out infinite; | ||
| 163 | } | ||
| 164 | @keyframes skeleton-2{ | ||
| 165 | to { | ||
| 166 | background-position: -135% 0; | ||
| 167 | } | ||
| 168 | } | ||
| 169 | </style> | ||
| 170 | |||
| 171 |
src/pages/cart/cart.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <block v-if="cartList.length==0"> | 3 | <block v-if="cartList.length==0"> |
| 4 | 4 | ||
| 5 | </block> | 5 | </block> |
| 6 | <block v-else> | 6 | <block v-else> |
| 7 | <view class="card"> | 7 | <view class="card"> |
| 8 | <view class="cardHeader"> | 8 | <view class="cardHeader"> |
| 9 | <view | 9 | <view |
| 10 | v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" | 10 | v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" |
| 11 | @tap="pChange(pIsoPen)" | 11 | @touchstart="pChange(pIsoPen)" |
| 12 | > | 12 | > |
| 13 | <span class="correct"></span> | 13 | <span class="correct"></span> |
| 14 | </view> | 14 | </view> |
| 15 | <image | 15 | <image |
| 16 | src="../../static/store.png" | 16 | src="../../static/store.png" |
| 17 | mode="aspectFill" | 17 | mode="aspectFill" |
| 18 | ></image> | 18 | ></image> |
| 19 | <text>非常戴镜</text> | 19 | <text>非常戴镜</text> |
| 20 | </view> | 20 | </view> |
| 21 | <view | 21 | <view |
| 22 | class="cardBody" | 22 | class="cardBody" |
| 23 | v-for="(item,index) in cartList" | 23 | v-for="(item,index) in cartList" |
| 24 | :key="item.cart_id" | 24 | :key="index" |
| 25 | @longpress="delCart(item.cart_id,index)" | 25 | @longpress="delCart(item.cart_id,index)" |
| 26 | > | 26 | > |
| 27 | <view | 27 | <view |
| 28 | v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" | 28 | v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" |
| 29 | @tap="Change(childIsOpen[index],index)" | 29 | @touchstart="Change(childIsOpen[index],index)" |
| 30 | > | 30 | > |
| 31 | <span class="correct"></span> | 31 | <span class="correct"></span> |
| 32 | </view> | 32 | </view> |
| 33 | <view class="imageWrap"> | 33 | <view class="imageWrap"> |
| 34 | <image | 34 | <image |
| 35 | :src="item.img_index_url" | 35 | :src="item.img_index_url" |
| 36 | mode="aspectFit" | 36 | mode="aspectFit" |
| 37 | style="width: 188rpx;height: 168rpx;" | 37 | style="width: 188rpx;height: 168rpx;" |
| 38 | ></image> | 38 | ></image> |
| 39 | </view> | 39 | </view> |
| 40 | <view class="goodInfo"> | 40 | <view class="goodInfo"> |
| 41 | <!-- <view class="imageWrap"> | 41 | <!-- <view class="imageWrap"> |
| 42 | <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> | 42 | <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> |
| 43 | </view> --> | 43 | </view> --> |
| 44 | <view class="infoRight"> | 44 | <view class="infoRight"> |
| 45 | <view | 45 | <view |
| 46 | class="goodName" | 46 | class="goodName" |
| 47 | @tap="toGoods(item.pid,item.sk_id)" | 47 | @tap="toGoods(item.pid,item.sk_id)" |
| 48 | >{{item.p_name}}</view> | 48 | >{{item.p_name}}</view> |
| 49 | <!-- <view class="describ"> --> | 49 | <!-- <view class="describ"> --> |
| 50 | <uni-collapse accordion="true"> | 50 | <uni-collapse accordion="true" style="justify-content: space-around;width: 196px;"> |
| 51 | <uni-collapse-item | 51 | <uni-collapse-item |
| 52 | showAnimation='true' | 52 | showAnimation='true' |
| 53 | :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...' || '暂无'" | 53 | :title="item.tag.prod_tag_fun[0].label&&item.tag.prod_tag_fun[1].label?item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'...':'暂无数据'"> |
| 54 | > | ||
| 55 | <text class="describ"> | 54 | <text class="describ"> |
| 56 | <block | 55 | <block |
| 57 | v-for="tag in item.tag.prod_tag_fun" | 56 | v-for="tag in item.tag.prod_tag_fun" |
| 58 | :key="tag.value" | 57 | :key="tag.value" |
| 59 | > | 58 | > |
| 60 | {{tag.label+` `}} | 59 | {{tag.label+` `}} |
| 61 | </block> | 60 | </block> |
| 62 | </text> | 61 | </text> |
| 63 | <!-- <text> | 62 | <!-- <text> |
| 64 | <block v-for="tag in item.tag.prod_tag_style" :key="tag.value"> | 63 | <block v-for="tag in item.tag.prod_tag_style" :key="tag.value"> |
| 65 | {{tag.label+` `}} | 64 | {{tag.label+` `}} |
| 66 | </block> | 65 | </block> |
| 67 | </text> --> | 66 | </text> --> |
| 68 | </uni-collapse-item> | 67 | </uni-collapse-item> |
| 69 | </uni-collapse> | 68 | </uni-collapse> |
| 70 | <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> --> | 69 | <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> --> |
| 71 | <!-- </view> --> | 70 | <!-- </view> --> |
| 72 | <view class="priceBox"> | 71 | <view class="priceBox"> |
| 73 | <view class="price">￥{{item.nowPrice*item.num}}</view> | 72 | <view class="price">￥{{item.nowPrice*item.num}}</view> |
| 74 | <text class="maxCount">(限购{{maxCount}}副)</text> | 73 | <text class="maxCount">(限购{{maxCount}}副)</text> |
| 75 | <view class="counter"> | 74 | <view class="counter"> |
| 76 | <view | 75 | <view |
| 77 | class="btn" | 76 | class="btn" |
| 78 | disabled="this.addDisabled" | 77 | disabled="this.addDisabled" |
| 79 | type="default" | 78 | type="default" |
| 80 | @tap="counter(index,false,item)" | 79 | @tap="counter(index,false,item)" |
| 81 | >-</view> | 80 | >-</view> |
| 82 | <text>{{item.num}}</text> | 81 | <text>{{item.num}}</text> |
| 83 | <view | 82 | <view |
| 84 | class="btn" | 83 | class="btn" |
| 85 | disabled="this.desDisabled" | 84 | disabled="this.desDisabled" |
| 86 | type="default" | 85 | type="default" |
| 87 | @tap="counter(index,true,item)" | 86 | @tap="counter(index,true,item)" |
| 88 | >+</view> | 87 | >+</view> |
| 89 | </view> | 88 | </view> |
| 90 | </view> | 89 | </view> |
| 91 | </view> | 90 | </view> |
| 92 | </view> | 91 | </view> |
| 93 | </view> | 92 | </view> |
| 94 | </view> | 93 | </view> |
| 95 | </block> | 94 | </block> |
| 96 | <view class="footer"> | 95 | <view class="footer"> |
| 97 | <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> | 96 | <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> |
| 98 | <view class="footerRight"> | 97 | <view class="footerRight"> |
| 99 | <navigator | 98 | <navigator |
| 100 | url="/pages/confirmOrder/confirmOrder" | 99 | url="/pages/confirmOrder/confirmOrder" |
| 101 | hover-class="navigator-hover" | 100 | hover-class="navigator-hover" |
| 102 | > | 101 | > |
| 103 | <view class="paybtn">立即结算</view> | 102 | <view class="paybtn">立即结算</view> |
| 104 | </navigator> | 103 | </navigator> |
| 105 | </view> | 104 | </view> |
| 106 | </view> | 105 | </view> |
| 107 | 106 | ||
| 108 | </view> | 107 | </view> |
| 109 | </template> | 108 | </template> |
| 110 | 109 | ||
| 111 | <script> | 110 | <script> |
| 112 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' | 111 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' |
| 113 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' | 112 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' |
| 114 | import store from '@/store' | 113 | import store from '@/store' |
| 115 | 114 | ||
| 116 | export default { | 115 | export default { |
| 117 | components: { UniCollapse, UniCollapseItem }, | 116 | components: { UniCollapse, UniCollapseItem }, |
| 118 | data() { | 117 | data() { |
| 119 | return { | 118 | return { |
| 120 | totalPrice: 0, | 119 | totalPrice: 0, |
| 121 | pIsoPen: false, | 120 | pIsoPen: false, |
| 122 | // childIsOpen:[], | 121 | // childIsOpen:[], |
| 123 | maxCount: 20, | 122 | maxCount: 20, |
| 124 | } | 123 | } |
| 125 | }, | 124 | }, |
| 126 | computed: { | 125 | computed: { |
| 127 | 126 | ||
| 128 | cartList() { | 127 | cartList() { |
| 129 | // console.log('cart-list', this.$store.state.cart.cartList); | 128 | // console.log('cart-list', this.$store.state.cart.cartList); |
| 129 | this.totalPrice=0 | ||
| 130 | return this.$store.state.cart.cartList | 130 | return this.$store.state.cart.cartList |
| 131 | }, | 131 | }, |
| 132 | childIsOpen() { | 132 | childIsOpen() { |
| 133 | const temp = [] | 133 | const temp = [] |
| 134 | temp.length = this.$store.state.cart.cartList.length | 134 | temp.length = this.$store.state.cart.cartList.length |
| 135 | for (let i = 0; i < temp.length; i++) { | 135 | for (let i = 0; i < temp.length; i++) { |
| 136 | temp[i] = false | 136 | temp[i] = false |
| 137 | } | 137 | } |
| 138 | console.log('this.childisOPne===>', temp) | 138 | console.log('this.childisOPne===>', temp) |
| 139 | return temp | 139 | return temp |
| 140 | }, | 140 | }, |
| 141 | }, | 141 | }, |
| 142 | onLoad: function() { | 142 | onLoad: function() { |
| 143 | // store.dispatch('cart/addCart', { | 143 | // store.dispatch('cart/addCart', { |
| 144 | // uid: this.$store.state.user.userInfo.uid, | 144 | // uid: this.$store.state.user.userInfo.uid, |
| 145 | // openid: this.$store.state.user.userInfo.openid, | 145 | // openid: this.$store.state.user.userInfo.openid, |
| 146 | // mp_id: 7, | 146 | // mp_id: 7, |
| 147 | // sk_id: 7, | 147 | // sk_id: 7, |
| 148 | // num: 1, | 148 | // num: 1, |
| 149 | // pid: 8, | 149 | // pid: 8, |
| 150 | // price: 128, | 150 | // price: 128, |
| 151 | // checkedSKU:{}, | 151 | // checkedSKU:{}, |
| 152 | // }) | 152 | // }) |
| 153 | store.dispatch('cart/getCartList', { | 153 | store.dispatch('cart/getCartList', { |
| 154 | uid: this.$store.state.user.userInfo.uid, // 用户id | 154 | uid: this.$store.state.user.userInfo.uid, // 用户id |
| 155 | }) | 155 | }) |
| 156 | }, | 156 | }, |
| 157 | methods: { | 157 | methods: { |
| 158 | toGoods(id, sk_id) { | 158 | toGoods(id, sk_id) { |
| 159 | console.log('cart-list', this.$store.state.cart.cartList) | 159 | console.log('cart-list', this.$store.state.cart.cartList) |
| 160 | console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id) | 160 | console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id) |
| 161 | uni.navigateTo({ | 161 | uni.navigateTo({ |
| 162 | url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id, | 162 | url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id, |
| 163 | success: res => {}, | 163 | success: res => {}, |
| 164 | fail: () => {}, | 164 | fail: () => {}, |
| 165 | complete: () => {}, | 165 | complete: () => {}, |
| 166 | }) | 166 | }) |
| 167 | }, | 167 | }, |
| 168 | counter(index, isadd, item) { | 168 | counter(index, isadd, item) { |
| 169 | // console.log('===>>counter ===>num',num) | 169 | // console.log('===>>counter ===>num',num) |
| 170 | // console.log('===>>counter ===>isadd',isadd) | 170 | // console.log('===>>counter ===>isadd',isadd) |
| 171 | console.log('item=====>', item) | 171 | console.log('item=====>', item) |
| 172 | console.log('num=====>', item.num) | 172 | console.log('num=====>', item.num) |
| 173 | const nums = parseInt(item.num) | 173 | const nums = parseInt(item.num) |
| 174 | if (isadd) { | 174 | if (isadd) { |
| 175 | if (nums >= this.maxCount) { | 175 | if (nums >= this.maxCount) { |
| 176 | this.addDisabled = true | 176 | this.addDisabled = true |
| 177 | } else { | 177 | } else { |
| 178 | this.addDisabled = true | 178 | this.addDisabled = true |
| 179 | // 修改num | 179 | // 修改num |
| 180 | if (this.childIsOpen[index]) { | 180 | if (this.childIsOpen[index]) { |
| 181 | this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice | 181 | this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice |
| 182 | } | 182 | } |
| 183 | store.dispatch('cart/modiCart', { | 183 | store.dispatch('cart/modiCart', { |
| 184 | uid: this.$store.state.user.userInfo.uid, | 184 | uid: this.$store.state.user.userInfo.uid, |
| 185 | openid: this.$store.state.user.userInfo.openid, | 185 | openid: this.$store.state.user.userInfo.openid, |
| 186 | mp_id: item.mp_id, | 186 | mp_id: item.mp_id, |
| 187 | sk_id: item.sk_id, | 187 | sk_id: item.sk_id, |
| 188 | price: item.nowPrice, | 188 | price: item.nowPrice, |
| 189 | pid: item.pid, | 189 | pid: item.pid, |
| 190 | num: nums + 1, | 190 | num: nums + 1, |
| 191 | cart_id: item.cart_id, | 191 | cart_id: item.cart_id, |
| 192 | args: { | 192 | args: { |
| 193 | index: index, | 193 | index: index, |
| 194 | isadd: isadd, | 194 | isadd: isadd, |
| 195 | }, | 195 | }, |
| 196 | }) | 196 | }) |
| 197 | this.addDisabled = false | 197 | this.addDisabled = false |
| 198 | } | 198 | } |
| 199 | } else { | 199 | } else { |
| 200 | if (nums <= 1) { | 200 | if (nums <= 1) { |
| 201 | this.desDisabled = true | 201 | this.desDisabled = true |
| 202 | } else { | 202 | } else { |
| 203 | this.desDisabled = false | 203 | this.desDisabled = false |
| 204 | // post 请求修改相关参数 | 204 | // post 请求修改相关参数 |
| 205 | if (this.childIsOpen[index]) { | 205 | if (this.childIsOpen[index]) { |
| 206 | this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice | 206 | this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice |
| 207 | } | 207 | } |
| 208 | store.dispatch('cart/modiCart', { | 208 | store.dispatch('cart/modiCart', { |
| 209 | uid: this.$store.state.user.userInfo.uid, | 209 | uid: this.$store.state.user.userInfo.uid, |
| 210 | openid: this.$store.state.user.userInfo.openid, | 210 | openid: this.$store.state.user.userInfo.openid, |
| 211 | mp_id: item.mp_id, | 211 | mp_id: item.mp_id, |
| 212 | sk_id: item.sk_id, | 212 | sk_id: item.sk_id, |
| 213 | price: item.nowPrice, | 213 | price: item.nowPrice, |
| 214 | pid: item.pid, | 214 | pid: item.pid, |
| 215 | num: nums - 1, | 215 | num: nums - 1, |
| 216 | cart_id: item.cart_id, | 216 | cart_id: item.cart_id, |
| 217 | args: { | 217 | args: { |
| 218 | index: index, | 218 | index: index, |
| 219 | isadd: isadd, | 219 | isadd: isadd, |
| 220 | }, | 220 | }, |
| 221 | }) | 221 | }) |
| 222 | this.desDisabled = true | 222 | this.desDisabled = true |
| 223 | } | 223 | } |
| 224 | } | 224 | } |
| 225 | // store.dispatch('cart/getCartList', { | 225 | // store.dispatch('cart/getCartList', { |
| 226 | // uid: this.$store.state.user.userInfo.uid // 用户id | 226 | // uid: this.$store.state.user.userInfo.uid // 用户id |
| 227 | // }) | 227 | // }) |
| 228 | }, | 228 | }, |
| 229 | Change(isopen, indexC) { | 229 | Change(isopen, indexC) { |
| 230 | // console.log('lalla===>',isopen) | 230 | // console.log('lalla===>',isopen) |
| 231 | this.childIsOpen[indexC] = !isopen | 231 | this.childIsOpen[indexC] = !isopen |
| 232 | if (!isopen) { | 232 | if (!isopen) { |
| 233 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) | 233 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) |
| 234 | } else { | 234 | } else { |
| 235 | this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) | 235 | this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) |
| 236 | } | 236 | } |
| 237 | let m = true | 237 | let m = true |
| 238 | for (let i = 0; i < this.childIsOpen.length; i++) { | 238 | for (let i = 0; i < this.childIsOpen.length; i++) { |
| 239 | m = m & this.childIsOpen[i] | 239 | m = m & this.childIsOpen[i] |
| 240 | } | 240 | } |
| 241 | if (m === 1) { | 241 | if (m === 1) { |
| 242 | this.pIsoPen = true | 242 | this.pIsoPen = true |
| 243 | } else { | 243 | } else { |
| 244 | this.pIsoPen = false | 244 | this.pIsoPen = false |
| 245 | } | 245 | } |
| 246 | }, | 246 | }, |
| 247 | pChange(isopen) { | 247 | pChange(isopen) { |
| 248 | this.pIsoPen = !isopen | 248 | this.pIsoPen = !isopen |
| 249 | for (let i = 0; i < this.childIsOpen.length; i++) { | 249 | for (let i = 0; i < this.childIsOpen.length; i++) { |
| 250 | this.childIsOpen[i] = !isopen | 250 | this.childIsOpen[i] = !isopen |
| 251 | } | 251 | } |
| 252 | if (this.pIsoPen) { | 252 | if (this.pIsoPen) { |
| 253 | // 计算总价逻辑 | 253 | // 计算总价逻辑 |
| 254 | if (this.childIsOpen.length !== 0) { | 254 | if (this.childIsOpen.length !== 0) { |
| 255 | for (let i = 0; i < this.childIsOpen.length; i++) { | 255 | for (let i = 0; i < this.childIsOpen.length; i++) { |
| 256 | if (this.childIsOpen[i]) { | 256 | if (this.childIsOpen[i]) { |
| 257 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) | 257 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) |
| 258 | } | 258 | } |
| 259 | } | 259 | } |
| 260 | } | 260 | } |
| 261 | } else { | 261 | } else { |
| 262 | this.totalPrice = 0 | 262 | this.totalPrice = 0 |
| 263 | } | 263 | } |
| 264 | }, | 264 | }, |
| 265 | delCart(cart_id, index) { | 265 | delCart(cart_id, index) { |
| 266 | // console.log('userInfo',this.$store.state.user.userInfo) | 266 | // console.log('userInfo',this.$store.state.user.userInfo) |
| 267 | cart_id = parseInt(cart_id) | 267 | cart_id = parseInt(cart_id) |
| 268 | // console.log('delcart------>cart_id',cart_id) | 268 | // console.log('delcart------>cart_id',cart_id) |
| 269 | // console.log('cartlist====>delcart',this.$store.state.cart.cartList) | 269 | // console.log('cartlist====>delcart',this.$store.state.cart.cartList) |
| 270 | // console.log('delcart======>index',index) | 270 | // console.log('delcart======>index',index) |
| 271 | const uid = this.$store.state.user.userInfo.uid | 271 | uni.showModal({ |
| 272 | const openid = this.$store.state.user.userInfo.openid | 272 | title: '是否删除该商品', |
| 273 | uni.showModal({ | 273 | // content: '是否删除该商品', |
| 274 | title: '是否删除该商品', | 274 | success: function (res) { |
| 275 | // content: '是否删除该商品', | 275 | if (res.confirm) { |
| 276 | success: function (res) { | 276 | if (this.childIsOpen[index]) { |
| 277 | if (res.confirm) { | 277 | this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[index].nowPrice*this.$store.state.cart.cartList[index].num) |
| 278 | // this.$store.state.cart.cartList.splice(index,1) | 278 | } |
| 279 | store.dispatch('cart/delCart', { | 279 | console.log('index===>',index) |
| 280 | uid: uid, | 280 | store.dispatch('cart/delCart', { |
| 281 | openid: openid, | 281 | uid: this.$store.state.user.userInfo.uid, |
| 282 | cart_id: cart_id, // 要修改的购物车id | 282 | openid: this.$store.state.user.userInfo.openid, |
| 283 | arg: index, // 由于action 传参是能接收两参数，因此将index放入对象 | 283 | cart_id: cart_id, // 要修改的购物车id |
| 284 | }) | 284 | arg: index, // 由于action 传参是能接收两参数，因此将index放入对象 |
| 285 | console.log('用户点击确定') | 285 | }) |
| 286 | } | 286 | } |
| 287 | }, | 287 | }.bind(this), |
| 288 | }) | 288 | }) |
| 289 | }, | 289 | }, |
| 290 | }, | 290 | }, |
| 291 | } | 291 | } |
| 292 | </script> | 292 | </script> |
| 293 | 293 | ||
| 294 | <style lang="scss"> | 294 | <style lang="scss"> |
| 295 | .content { | 295 | .content { |
| 296 | min-height: 100vh; | 296 | min-height: 100vh; |
| 297 | background-color: #f2f2f2; | 297 | background-color: #f2f2f2; |
| 298 | display: flex; | 298 | display: flex; |
| 299 | flex-direction: column; | 299 | flex-direction: column; |
| 300 | align-items: center; | 300 | align-items: center; |
| 301 | justify-content: space-between; | 301 | justify-content: space-between; |
| 302 | padding: 20rpx 40rpx; | 302 | padding: 20rpx 40rpx; |
| 303 | box-sizing: border-box; | 303 | box-sizing: border-box; |
| 304 | 304 | ||
| 305 | .partentCheck { | 305 | .partentCheck { |
| 306 | width: 16px; | 306 | width: 16px; |
| 307 | height: 16px; | 307 | height: 16px; |
| 308 | border-radius: 22px; | 308 | border-radius: 22px; |
| 309 | border: 1px solid #cfcfcf; | 309 | border: 1px solid #cfcfcf; |
| 310 | background-color: #ffffff; | 310 | background-color: #ffffff; |
| 311 | margin: 6px; | 311 | margin: 24rpx 12rpx 24rpx 24rpx; |
| 312 | } | 312 | } |
| 313 | .partentChecked { | 313 | .partentChecked { |
| 314 | width: 18px; | 314 | width: 18px; |
| 315 | height: 18px; | 315 | height: 18px; |
| 316 | border-radius: 22px; | 316 | border-radius: 22px; |
| 317 | background-color: #ff6b4a; | 317 | background-color: #ff6b4a; |
| 318 | margin: 6px; | 318 | margin: 24rpx 12rpx 24rpx 24rpx; |
| 319 | .correct { | 319 | .correct { |
| 320 | display: inline-block; | 320 | display: inline-block; |
| 321 | position: relative; | 321 | position: relative; |
| 322 | width: 10rpx; | 322 | width: 10rpx; |
| 323 | height: 2rpx; | 323 | height: 2rpx; |
| 324 | background: #ffffff; | 324 | background: #ffffff; |
| 325 | line-height: 0; | 325 | line-height: 0; |
| 326 | font-size: 0; | 326 | font-size: 0; |
| 327 | position: relative; | 327 | position: relative; |
| 328 | top: -7px; | 328 | top: -7px; |
| 329 | left: 4px; | 329 | left: 4px; |
| 330 | -webkit-transform: rotate(45deg); | 330 | -webkit-transform: rotate(45deg); |
| 331 | } | 331 | } |
| 332 | .correct:after { | 332 | .correct:after { |
| 333 | content: "/"; | 333 | content: "/"; |
| 334 | display: block; | 334 | display: block; |
| 335 | width: 16rpx; | 335 | width: 16rpx; |
| 336 | height: 2rpx; | 336 | height: 2rpx; |
| 337 | background: #ffffff; | 337 | background: #ffffff; |
| 338 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); | 338 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); |
| 339 | } | 339 | } |
| 340 | } | 340 | } |
| 341 | 341 | ||
| 342 | .card { | 342 | .card { |
| 343 | background-color: #ffffff; | 343 | background-color: #ffffff; |
| 344 | border-radius: 16rpx; | 344 | border-radius: 16rpx; |
| 345 | box-sizing: border-box; | 345 | box-sizing: border-box; |
| 346 | padding: 36rpx 36rpx 36rpx 18rpx; | 346 | padding: 36rpx 36rpx 36rpx 18rpx; |
| 347 | display: flex; | 347 | display: flex; |
| 348 | flex-direction: column; | 348 | flex-direction: column; |
| 349 | align-items: center; | 349 | align-items: center; |
| 350 | justify-content: space-between; | 350 | justify-content: space-between; |
| 351 | margin-bottom: 180rpx; | 351 | margin-bottom: 180rpx; |
| 352 | .cardHeader { | 352 | .cardHeader { |
| 353 | width: 100%; | 353 | width: 100%; |
| 354 | height: 36rpx; | 354 | height: 36rpx; |
| 355 | display: flex; | 355 | display: flex; |
| 356 | align-items: center; | 356 | align-items: center; |
| 357 | justify-content: flex-start; | 357 | justify-content: flex-start; |
| 358 | margin-bottom: 20rpx; | 358 | margin-bottom: 20rpx; |
| 359 | image { | 359 | image { |
| 360 | height: 32rpx; | 360 | height: 32rpx; |
| 361 | width: 32rpx; | 361 | width: 32rpx; |
| 362 | padding-left: 6px; | 362 | padding-left: 6px; |
| 363 | padding-right: 10px; | 363 | padding-right: 10px; |
| 364 | } | 364 | } |
| 365 | text { | 365 | text { |
| 366 | // font-family: PingFangSC-Regular; | 366 | // font-family: PingFangSC-Regular; |
| 367 | font-size: 14px; | 367 | font-size: 14px; |
| 368 | color: #333333; | 368 | color: #333333; |
| 369 | letter-spacing: -0.26px; | 369 | letter-spacing: -0.26px; |
| 370 | } | 370 | } |
| 371 | } | 371 | } |
| 372 | .cardBody { | 372 | .cardBody { |
| 373 | width: 100%; | 373 | width: 100%; |
| 374 | min-height: 300rpx; | 374 | min-height: 300rpx; |
| 375 | display: flex; | 375 | display: flex; |
| 376 | align-items: center; | 376 | align-items: center; |
| 377 | justify-content: space-between; | 377 | justify-content: space-between; |
| 378 | .goodInfo { | 378 | .goodInfo { |
| 379 | width: 390rpx; | 379 | width: 390rpx; |
| 380 | display: flex; | 380 | display: flex; |
| 381 | flex-direction: row; | 381 | flex-direction: row; |
| 382 | justify-content: flex-start; | 382 | justify-content: flex-start; |
| 383 | padding-left: 6px; | 383 | padding-left: 6px; |
| 384 | 384 | ||
| 385 | .imageWrap { | 385 | .imageWrap { |
| 386 | height: 188rpx; | 386 | height: 188rpx; |
| 387 | width: 188rpx; | 387 | width: 188rpx; |
| 388 | margin-right: 28rpx; | 388 | margin-right: 28rpx; |
| 389 | 389 | ||
| 390 | image { | 390 | image { |
| 391 | border-radius: 4px; | 391 | border-radius: 4px; |
| 392 | height: 188rpx; | 392 | height: 188rpx; |
| 393 | width: 188rpx; | 393 | width: 188rpx; |
| 394 | } | 394 | } |
| 395 | } | 395 | } |
| 396 | .infoRight { | 396 | .infoRight { |
| 397 | display: flex; | 397 | display: flex; |
| 398 | flex-direction: column; | 398 | flex-direction: column; |
| 399 | align-items: flex-start; | 399 | align-items: flex-start; |
| 400 | justify-content: space-between; | 400 | justify-content: space-between; |
| 401 | min-height: 240rpx; | 401 | min-height: 240rpx; |
| 402 | .goodName { | 402 | .goodName { |
| 403 | display: -webkit-box; | 403 | display: -webkit-box; |
| 404 | -webkit-box-orient: vertical; | 404 | -webkit-box-orient: vertical; |
| 405 | -webkit-line-clamp: 2; | 405 | -webkit-line-clamp: 2; |
| 406 | text-align: justify; | 406 | text-align: justify; |
| 407 | overflow: hidden; | 407 | overflow: hidden; |
| 408 | font-size: 28rpx; | 408 | font-size: 28rpx; |
| 409 | color: #333333; | 409 | color: #333333; |
| 410 | } | 410 | } |
| 411 | .describ { | 411 | .describ { |
| 412 | width: 100%; | 412 | width: 100%; |
| 413 | // min-height: 80rpx; | 413 | // min-height: 80rpx; |
| 414 | // box-sizing: border-box; | 414 | // box-sizing: border-box; |
| 415 | // padding: 10rpx; | 415 | // padding: 10rpx; |
| 416 | font-size: 20rpx; | 416 | font-size: 20rpx; |
| 417 | letter-spacing: -0.23px; | 417 | letter-spacing: -0.23px; |
| 418 | text-align: justify; | 418 | text-align: justify; |
| 419 | color: #999999; | 419 | color: #999999; |
| 420 | // background: #F9F9F9; | 420 | // background: #F9F9F9; |
| 421 | // display: flex; | 421 | // display: flex; |
| 422 | // justify-content: center; | 422 | // justify-content: center; |
| 423 | // align-items: center; | 423 | // align-items: center; |
| 424 | // text{ | 424 | // text{ |
| 425 | // text-overflow: -o-ellipsis-lastline; | 425 | // text-overflow: -o-ellipsis-lastline; |
| 426 | // overflow: hidden; | 426 | // overflow: hidden; |
| 427 | // text-overflow: ellipsis; | 427 | // text-overflow: ellipsis; |
| 428 | // display: -webkit-box; | 428 | // display: -webkit-box; |
| 429 | // -webkit-line-clamp: 2; | 429 | // -webkit-line-clamp: 2; |
| 430 | // line-clamp: 2; | 430 | // line-clamp: 2; |
| 431 | // -webkit-box-orient: vertical; | 431 | // -webkit-box-orient: vertical; |
| 432 | // } | 432 | // } |
| 433 | // .icon { | 433 | // .icon { |
| 434 | // width: 0; | 434 | // width: 0; |
| 435 | // height: 0; | 435 | // height: 0; |
| 436 | // border-left: 5px transparent; | 436 | // border-left: 5px transparent; |
| 437 | // border-right: 5px transparent; | 437 | // border-right: 5px transparent; |
| 438 | // border-top: 5px #979797; | 438 | // border-top: 5px #979797; |
| 439 | // border-bottom: 0 transparent; | 439 | // border-bottom: 0 transparent; |
| 440 | // border-style: solid; | 440 | // border-style: solid; |
| 441 | // position: relative; | 441 | // position: relative; |
| 442 | // margin-left: 10px; | 442 | // margin-left: 10px; |
| 443 | // // transform: scaleY(-1); | 443 | // // transform: scaleY(-1); |
| 444 | // } | 444 | // } |
| 445 | // .icon::after{ | 445 | // .icon::after{ |
| 446 | // content: ''; | 446 | // content: ''; |
| 447 | // position: absolute; | 447 | // position: absolute; |
| 448 | // top: -6.5px; | 448 | // top: -6.5px; |
| 449 | // left: -5px; | 449 | // left: -5px; |
| 450 | // border-left: 5px transparent; | 450 | // border-left: 5px transparent; |
| 451 | // border-right: 5px transparent; | 451 | // border-right: 5px transparent; |
| 452 | // border-top: 5px #FFFFFF; | 452 | // border-top: 5px #FFFFFF; |
| 453 | // border-bottom: 0 transparent; | 453 | // border-bottom: 0 transparent; |
| 454 | // border-style: solid; | 454 | // border-style: solid; |
| 455 | // } | 455 | // } |
| 456 | } | 456 | } |
| 457 | .priceBox { | 457 | .priceBox { |
| 458 | display: flex; | 458 | display: flex; |
| 459 | justify-content: space-between; | 459 | justify-content: space-between; |
| 460 | align-items: center; | 460 | align-items: center; |
| 461 | // margin-top: 26px; | 461 | // margin-top: 26px; |
| 462 | width: 100%; | 462 | width: 100%; |
| 463 | font-size: 14px; | 463 | font-size: 14px; |
| 464 | color: #999999; | 464 | color: #999999; |
| 465 | .maxCount { | 465 | .maxCount { |
| 466 | color: #999999; | 466 | color: #999999; |
| 467 | font-size: 24rpx; | 467 | font-size: 24rpx; |
| 468 | } | 468 | } |
| 469 | .price { | 469 | .price { |
| 470 | color: #ff6b4a; | 470 | color: #ff6b4a; |
| 471 | font-size: 28rpx; | 471 | font-size: 28rpx; |
| 472 | } | 472 | } |
| 473 | .counter { | 473 | .counter { |
| 474 | display: flex; | 474 | display: flex; |
| 475 | flex-direction: row; | 475 | flex-direction: row; |
| 476 | justify-content: space-between; | 476 | justify-content: space-between; |
| 477 | align-items: center; | 477 | align-items: center; |
| 478 | font-size: 28rpx; | 478 | font-size: 28rpx; |
| 479 | color: #333333; | 479 | color: #333333; |
| 480 | width: 122rpx; | 480 | width: 122rpx; |
| 481 | .btn { | 481 | .btn { |
| 482 | display: flex; | 482 | display: flex; |
| 483 | justify-content: center; | 483 | justify-content: center; |
| 484 | line-height: 32rpx; | 484 | line-height: 32rpx; |
| 485 | height: 32rpx; | 485 | height: 32rpx; |
| 486 | width: 32rpx; | 486 | width: 32rpx; |
| 487 | background-color: #f2f2f2; | 487 | background-color: #f2f2f2; |
| 488 | color: #cfcfcf; | 488 | color: #cfcfcf; |
| 489 | } | 489 | } |
| 490 | } | 490 | } |
| 491 | } | 491 | } |
| 492 | } | 492 | } |
| 493 | } | 493 | } |
| 494 | } | 494 | } |
| 495 | } | 495 | } |
| 496 | .footer { | 496 | .footer { |
| 497 | position: fixed; | 497 | position: fixed; |
| 498 | left: 0; | 498 | left: 0; |
| 499 | bottom: 0px; | 499 | bottom: 0px; |
| 500 | height: 112rpx; | 500 | height: 112rpx; |
| 501 | width: 100%; | 501 | width: 100%; |
| 502 | background-color: #ffffff; | 502 | background-color: #ffffff; |
| 503 | font-size: 16px; | 503 | font-size: 16px; |
| 504 | display: flex; | 504 | display: flex; |
| 505 | justify-content: space-between; | 505 | justify-content: space-between; |
| 506 | align-items: center; | 506 | align-items: center; |
| 507 | .footerLeft { | 507 | .footerLeft { |
| 508 | display: flex; | 508 | display: flex; |
| 509 | justify-content: center; | 509 | justify-content: center; |
| 510 | align-items: center; | 510 | align-items: center; |
| 511 | width: 50%; | 511 | width: 50%; |
| 512 | color: #333333; | 512 | color: #333333; |
| 513 | text { | 513 | text { |
| 514 | color: #ff6b4a; | 514 | color: #ff6b4a; |
| 515 | } | 515 | } |
| 516 | } | 516 | } |
| 517 | .footerRight { | 517 | .footerRight { |
| 518 | display: flex; | 518 | display: flex; |
| 519 | justify-content: flex-end; | 519 | justify-content: flex-end; |
| 520 | align-items: center; | 520 | align-items: center; |
| 521 | width: 50%; | 521 | width: 50%; |
| 522 | margin-right: 26rpx; | 522 | margin-right: 26rpx; |
| 523 | .paybtn { | 523 | .paybtn { |
| 524 | display: flex; | 524 | display: flex; |
| 525 | justify-content: center; | 525 | justify-content: center; |
| 526 | align-items: center; | 526 | align-items: center; |
| 527 | background: #ff6b4a; | 527 | background: #ff6b4a; |
| 528 | border-radius: 20px; | 528 | border-radius: 20px; |
| 529 | border-radius: 20px; | 529 | border-radius: 20px; |
| 530 | color: #ffffff; | 530 | color: #ffffff; |
| 531 | width: 204rpx; | 531 | width: 204rpx; |
| 532 | height: 80rpx; | 532 | height: 80rpx; |
| 533 | } | 533 | } |
| 534 | } | 534 | } |
| 535 | } | 535 | } |
| 536 | } | 536 | } |
| 537 | </style> | 537 | </style> |
src/static/easy-loadimage/loadfail.png
3.42 KB
src/static/easy-loadimage/loading.gif
16.9 KB
src/store/modules/index.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 | category, | 5 | category, |
| 6 | shopList, | 6 | shopList, |
| 7 | search, | 7 | search, |
| 8 | } = urlAlias; | 8 | } = urlAlias; |
| 9 | 9 | ||
| 10 | const state = { | 10 | const state = { |
| 11 | categoryList: [], | 11 | categoryList: [], |
| 12 | list: [], | 12 | list: [] |
| 13 | }; | 13 | }; |
| 14 | 14 | ||
| 15 | const mutations = { | 15 | const mutations = { |
| 16 | LIST: (state, list) => { | 16 | LIST: (state, list) => { |
| 17 | state.list = list; | 17 | state.list = list; |
| 18 | }, | 18 | }, |
| 19 | CATEGORY: (state, categoryList) => { | 19 | CATEGORY: (state, categoryList) => { |
| 20 | state.categoryList = categoryList; | 20 | state.categoryList = categoryList; |
| 21 | }, | 21 | } |
| 22 | }; | 22 | }; |
| 23 | 23 | ||
| 24 | const actions = { | 24 | const actions = { |
| 25 | category({ commit }, param) { | 25 | category({ commit }, param) { |
| 26 | request({ | 26 | request({ |
| 27 | url: category, | 27 | url: category, |
| 28 | success: (res) => { | 28 | success: (res) => { |
| 29 | console.log('category', res); | 29 | console.log('category', res); |
| 30 | let data = res.data.data; | 30 | let data = res.data.data; |
| 31 | for(let i = 0; i<=data.length; i++) { | 31 | for(let i = 0; i<=data.length; i++) { |
| 32 | if(data[i] && data[i].type !== 'filter'){ | 32 | if(data[i] && data[i].type !== 'filter'){ |
| 33 | data[i].type = 'hierarchy'; | 33 | data[i].type = 'hierarchy'; |
| 34 | } | 34 | } |
| 35 | } | 35 | } |
| 36 | data.unshift({ | 36 | data.unshift({ |
| 37 | type: "hierarchy", | 37 | type: "hierarchy", |
| 38 | name: "全部", | 38 | name: "全部", |
| 39 | value: "all", | 39 | value: "all", |
| 40 | isNoPull: true, | 40 | isNoPull: true, |
| 41 | }); | 41 | }); |
| 42 | commit('CATEGORY', data); | 42 | commit('CATEGORY', data); |
| 43 | }, | 43 | }, |
| 44 | fail: (res) => { | 44 | fail: (res) => { |
| 45 | console.log("fail status === > ", res); | 45 | console.log("fail status === > ", res); |
| 46 | }, | 46 | }, |
| 47 | complete: (res) => { | 47 | complete: (res) => { |
| 48 | console.log("complete status === > ", res); | 48 | console.log("complete status === > ", res); |
| 49 | }, | 49 | }, |
| 50 | }) | 50 | }) |
| 51 | }, | 51 | }, |
| 52 | list({ commit }, param) { | 52 | list({ commit }, param) { |
| 53 | request({ | 53 | request({ |
| 54 | url: shopList, | 54 | url: shopList, |
| 55 | success: (res) => { | 55 | success: (res) => { |
| 56 | commit('LIST', res.data.data) | 56 | commit('LIST', res.data.data) |
| 57 | }, | 57 | }, |
| 58 | fail: (res) => { | 58 | fail: (res) => { |
| 59 | console.log("fail status === > ", res); | 59 | console.log("fail status === > ", res); |
| 60 | }, | 60 | }, |
| 61 | complete: (res) => { | 61 | complete: (res) => { |
| 62 | console.log("complete status === > ", res); | 62 | console.log("complete status === > ", res); |
| 63 | }, | 63 | }, |
| 64 | }) | 64 | }) |
| 65 | }, | 65 | }, |
| 66 | search({ commit }, { params, keyword }) { | 66 | search({ commit }, { params, keyword }) { |
| 67 | const uid = uni.getStorageSync('uid'); | 67 | const uid = uni.getStorageSync('uid'); |
| 68 | console.log("params",params, keyword); | 68 | console.log("params",params, keyword); |
| 69 | request({ | 69 | request({ |
| 70 | url: search, | 70 | url: search, |
| 71 | data: { | 71 | data: { |
| 72 | params: JSON.stringify(params), | 72 | params: JSON.stringify(params), |
| 73 | uid, | 73 | uid, |
| 74 | way: 1, | 74 | way: 1, |
| 75 | keyword, | 75 | keyword, |
| 76 | }, | 76 | }, |
| 77 | success: (res) => { | 77 | success: (res) => { |
| 78 | commit('LIST', res.data.data); | 78 | commit('LIST', res.data.data); |
| 79 | }, | 79 | }, |
| 80 | fail: (res) => { | 80 | fail: (res) => { |
| 81 | console.log("fail status === > ", res); | 81 | console.log("fail status === > ", res); |
| 82 | }, | 82 | }, |
| 83 | complete: (res) => { | 83 | complete: (res) => { |
| 84 | console.log("complete status === > ", res); | 84 | console.log("complete status === > ", res); |
| 85 | }, | 85 | }, |
| 86 | }) | 86 | }) |
| 87 | } | 87 | }, |
| 88 | }; | 88 | }; |
| 89 | 89 | ||
| 90 | export default { | 90 | export default { |
| 91 | namespaced: true, | 91 | namespaced: true, |
| 92 | state, | 92 | state, |
| 93 | mutations, | 93 | mutations, |
| 94 | actions, | 94 | actions, |
| 95 | }; | 95 | }; |
| 96 | 96 |
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 mutations = { | 12 | const mutations = { |
| 13 | INIT: (state, list) => { | 13 | INIT: (state, list) => { |
| 14 | state.recommandList = list | 14 | state.recommandList = list |
| 15 | } | 15 | } |
| 16 | } | 16 | } |
| 17 | 17 | ||
| 18 | let goodsList = [] | 18 | let goodsList = [] |
| 19 | 19 | ||
| 20 | const actions = { | 20 | const actions = { |
| 21 | getRecommandList({ commit }, param) { | 21 | getRecommandList({ commit }, param) { |
| 22 | request({ | 22 | request({ |
| 23 | url: recommandList, | 23 | url: recommandList, |
| 24 | data: param, | 24 | data: param, |
| 25 | success: (res) => { | 25 | success: (res) => { |
| 26 | console.log(res.data.data) | 26 | console.log('ReccomandList请求结果',res.data) |
| 27 | // console.log(res.data.data) | ||
| 27 | // const Res={...res.data.data.list,...data.data.list} | 28 | // const Res={...res.data.data.list,...data.data.list} |
| 28 | const data = res.data.data | 29 | const data = res.data.data |
| 29 | for (let index = 0; index < data.length; index++) { | 30 | for (let index = 0; index < data.length; index++) { |
| 30 | goodsList = [...goodsList, ...data[index].list] | 31 | goodsList = [...goodsList, ...data[index].list] |
| 31 | } | 32 | } |
| 32 | commit('INIT', goodsList) | 33 | commit('INIT', goodsList) |
| 33 | }, | 34 | }, |
| 34 | fail: (res) => { | 35 | fail: (res) => { |
| 35 | uni.showToast({ | 36 | uni.showToast({ |
| 36 | title: '数据加载完了', | 37 | title: '数据加载完了', |
| 37 | icon: 'none' | 38 | icon: 'none' |
| 38 | }) | 39 | }) |
| 39 | console.log('fail status === > ', res) | 40 | console.log('fail status === > ', res) |
| 40 | }, | 41 | }, |
| 41 | complete: (res) => { | 42 | complete: (res) => { |
| 42 | console.log('complete status === > ', res) | 43 | console.log('complete status === > ', res) |
| 43 | } | 44 | } |
| 44 | }) | 45 | }) |
| 45 | } | 46 | } |
| 46 | } | 47 | } |
| 47 | 48 | ||
| 48 | export default { | 49 | export default { |
| 49 | namespaced: true, | 50 | namespaced: true, |
| 50 | state, | 51 | state, |
| 51 | mutations, | 52 | mutations, |
| 52 | actions | 53 | actions |
| 53 | } | 54 | } |
| 54 | 55 |