Commit 2cd0b0f44af9680f2afbd090aa4c9fdaa058ca3a
1 parent
c00dd2818b
Exists in
master
bug修复
Showing
4 changed files
with
226 additions
and
169 deletions
Show diff stats
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 | @click="pClick" | 11 | @click="pClick" |
| 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="index" | 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="cartList[index].isChecked? 'partentChecked':'partentCheck'" | 28 | v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'" |
| 29 | @click="childClick(cartList[index],index)" | 29 | @click="childClick(cartList[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" @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)"> | 49 | <view |
| 50 | <view class="desL"> | 50 | class="describ" |
| 51 | <view class="people"> | 51 | @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)" |
| 52 | 使用人：{{item.peopleName}} | 52 | > |
| 53 | </view> | 53 | <view class="desL"> |
| 54 | <view class="skuInfo"> | 54 | <view class="people"> |
| 55 | {{item.sku_name}} | 55 | 使用人：{{item.peopleName}} |
| 56 | </view> | 56 | </view> |
| 57 | </view> | 57 | <view class="skuInfo"> |
| 58 | <view class="desR"> | 58 | {{item.sku_name}} |
| 59 | <image src="../../static/right.png" mode="aspectFit" style="width: 18rpx;height: 18rpx;"></image> | 59 | </view> |
| 60 | </view> | 60 | </view> |
| 61 | <view class="desR"> | ||
| 62 | <image | ||
| 63 | src="../../static/right.png" | ||
| 64 | mode="aspectFit" | ||
| 65 | style="width: 18rpx;height: 18rpx;" | ||
| 66 | ></image> | ||
| 67 | </view> | ||
| 61 | </view> | 68 | </view> |
| 62 | <view class="priceBox"> | 69 | <view class="priceBox"> |
| 63 | <view class="price">￥{{item.nowPrice*item.num}}</view> | 70 | <view class="price">￥{{item.nowPrice*item.num}}</view> |
| 64 | <text class="maxCount">(限购{{maxCount}}副)</text> | 71 | <text class="maxCount">(限购{{maxCount}}副)</text> |
| 65 | <view class="counter"> | 72 | <view class="counter"> |
| 66 | <view | 73 | <view |
| 67 | class="btn" | 74 | class="btn" |
| 68 | disabled="this.addDisabled" | 75 | disabled="this.addDisabled" |
| 69 | type="default" | 76 | type="default" |
| 70 | @tap="counter(index,false,item)" | 77 | @tap="counter(index,false,item)" |
| 71 | >-</view> | 78 | >-</view> |
| 72 | <text>{{item.num}}</text> | 79 | <text>{{item.num}}</text> |
| 73 | <view | 80 | <view |
| 74 | class="btn" | 81 | class="btn" |
| 75 | disabled="this.desDisabled" | 82 | disabled="this.desDisabled" |
| 76 | type="default" | 83 | type="default" |
| 77 | @tap="counter(index,true,item)" | 84 | @tap="counter(index,true,item)" |
| 78 | >+</view> | 85 | >+</view> |
| 79 | </view> | 86 | </view> |
| 80 | </view> | 87 | </view> |
| 81 | </view> | 88 | </view> |
| 82 | </view> | 89 | </view> |
| 83 | </view> | 90 | </view> |
| 84 | </view> | 91 | </view> |
| 85 | </block> | 92 | </block> |
| 86 | <view class="footer"> | 93 | <view class="footer"> |
| 87 | <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> | 94 | <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> |
| 88 | <view class="footerRight"> | 95 | <view class="footerRight"> |
| 89 | <view class="paybtn" @click="toComfirmOrder">立即结算</view> | 96 | <view |
| 97 | class="paybtn" | ||
| 98 | @click="toComfirmOrder" | ||
| 99 | >立即结算</view> | ||
| 90 | </view> | 100 | </view> |
| 91 | </view> | 101 | </view> |
| 92 | <BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :sk_id="sk_id" :propMpId="mp_id" @chooseCartModi="chooseCartModi" :cart_id="cart_id" | 102 | <BottomSheet |
| 93 | :index="cartIndex" | 103 | v-if="isShowBottom" |
| 94 | :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet> | 104 | :isCart="isCart" |
| 105 | @addCart="addCart" | ||
| 106 | :sk_id="sk_id" | ||
| 107 | :propMpId="mp_id" | ||
| 108 | @chooseCartModi="chooseCartModi" | ||
| 109 | :cart_id="cart_id" | ||
| 110 | :index="cartIndex" | ||
| 111 | :pid="pid" | ||
| 112 | :goodInfo="goodInfo" | ||
| 113 | :isShowBottom="isShowBottom" | ||
| 114 | @closeBottom="closeBottom" | ||
| 115 | ></BottomSheet> | ||
| 95 | </view> | 116 | </view> |
| 96 | </template> | 117 | </template> |
| 97 | 118 | ||
| 98 | <script> | 119 | <script> |
| 99 | 120 | ||
| 100 | import store from '@/store' | 121 | import store from '@/store' |
| 101 | import BottomSheet from '../../components/BottomSheet/BottomSheet.vue'; | 122 | import BottomSheet from '../../components/BottomSheet/BottomSheet.vue' |
| 102 | export default { | 123 | export default { |
| 103 | components:{ | 124 | components: { |
| 104 | BottomSheet, | 125 | BottomSheet, |
| 105 | }, | 126 | }, |
| 106 | data() { | 127 | data() { |
| 107 | return { | 128 | return { |
| 108 | pid:Number, | 129 | pid: Number, |
| 109 | isCart:Number, | 130 | isCart: Number, |
| 110 | sk_id:String, | 131 | sk_id: String, |
| 111 | mp_id:String, | 132 | mp_id: String, |
| 112 | isShowBottom : false, //底部弹窗开关 | 133 | isShowBottom: false, // 底部弹窗开关 |
| 113 | cart_id:Number, | 134 | cart_id: Number, |
| 114 | maxCount: 20, | 135 | maxCount: 20, |
| 115 | cartIndex:Number, | 136 | cartIndex: Number, |
| 116 | cartList:[] | 137 | cartList: [], |
| 117 | } | 138 | } |
| 118 | }, | 139 | }, |
| 119 | computed: { | 140 | computed: { |
| 120 | pIsoPen (){ | 141 | pIsoPen () { |
| 121 | if (this.cartList.length > 0){ | 142 | if (this.cartList.length > 0) { |
| 122 | return this.cartList.find(item => !item.isChecked) ? false : true; | 143 | return !this.cartList.find(item => !item.isChecked) |
| 123 | } | 144 | } |
| 124 | return false | 145 | return false |
| 125 | }, | 146 | }, |
| 126 | goodInfo () { | 147 | goodInfo () { |
| 127 | return this.$store.state.read.goodInfo | 148 | return this.$store.state.read.goodInfo |
| 128 | }, | 149 | }, |
| 129 | totalPrice() { | 150 | totalPrice() { |
| 130 | let totalPrice = 0 | 151 | let totalPrice = 0 |
| 131 | this.cartList.forEach((item)=>{ | 152 | this.cartList.forEach((item) => { |
| 132 | if(item.isChecked){ | 153 | if (item.isChecked) { |
| 133 | totalPrice += item.nowPrice * item.num; | 154 | totalPrice += item.nowPrice * item.num |
| 134 | } | 155 | } |
| 135 | }) | 156 | }) |
| 136 | return totalPrice | 157 | return totalPrice |
| 137 | } | 158 | }, |
| 138 | }, | 159 | }, |
| 139 | onShow() { | 160 | onShow() { |
| 140 | this.cartList = this.$store.state.cart.cartList; | 161 | this.cartList = this.$store.state.cart.cartList |
| 141 | }, | 162 | }, |
| 142 | onLoad: async function() { | 163 | onLoad: async function() { |
| 143 | await this.$store.dispatch('cart/getCartList', { | 164 | await this.$store.dispatch('cart/getCartList', { |
| 144 | uid: this.$store.state.user.userInfo.uid, // 用户id | 165 | uid: this.$store.state.user.userInfo.uid, // 用户id |
| 145 | }) | 166 | }) |
| 146 | 167 | ||
| 147 | this.cartList = this.$store.state.cart.cartList; | 168 | this.cartList = this.$store.state.cart.cartList |
| 148 | this.cartList.forEach((item)=>{ | 169 | this.cartList.forEach((item) => { |
| 149 | item.isChecked = false | 170 | item.isChecked = false |
| 150 | }) | 171 | }) |
| 151 | }, | 172 | }, |
| 152 | methods: { | 173 | methods: { |
| 153 | //全选按钮 | 174 | // 全选按钮 |
| 154 | pClick(){ | 175 | pClick() { |
| 155 | let pStatus = this.cartList.find(item => !item.isChecked) ? false : true | 176 | const pStatus = !this.cartList.find(item => !item.isChecked) |
| 156 | let oldList = this.cartList; | 177 | const oldList = this.cartList |
| 157 | oldList.forEach((item, index)=>{ | 178 | oldList.forEach((item, index) => { |
| 158 | item.isChecked = !pStatus | 179 | item.isChecked = !pStatus |
| 159 | this.cartList.splice(index,1, item) | 180 | this.cartList.splice(index, 1, item) |
| 160 | }) | 181 | }) |
| 161 | }, | 182 | }, |
| 162 | //单选按钮 | 183 | // 单选按钮 |
| 163 | childClick(type,index){ | 184 | childClick(type, index) { |
| 164 | this.cartList[index].isChecked = !this.cartList[index].isChecked | 185 | this.cartList[index].isChecked = !this.cartList[index].isChecked |
| 165 | //vue没有办法监听数组内部值的变化，所以需要通过这个方法去触发 | 186 | // vue没有办法监听数组内部值的变化，所以需要通过这个方法去触发 |
| 166 | this.cartList.splice(index,1, this.cartList[index]) | 187 | this.cartList.splice(index, 1, this.cartList[index]) |
| 167 | }, | 188 | }, |
| 168 | //修改购物车 | 189 | // 修改购物车 |
| 169 | chooseCartModi(mp_id,sk_id,price,pid,num,cart_id,index){ | 190 | chooseCartModi(mp_id, sk_id, price, pid, num, cart_id, index) { |
| 170 | // console.log('modi',mp_id,sk_id,price,pid,num,cart_id) | 191 | // console.log('modi',mp_id,sk_id,price,pid,num,cart_id) |
| 171 | store.dispatch('cart/modiCart', { | 192 | store.dispatch('cart/modiCart', { |
| 172 | uid: this.$store.state.user.userInfo.uid, | 193 | uid: this.$store.state.user.userInfo.uid, |
| 173 | openid: this.$store.state.user.userInfo.openid, | 194 | openid: this.$store.state.user.userInfo.openid, |
| 174 | mp_id: mp_id, | 195 | mp_id: mp_id, |
| 175 | sk_id: sk_id, | 196 | sk_id: sk_id, |
| 176 | price: price, | 197 | price: price, |
| 177 | pid: pid, | 198 | pid: pid, |
| 178 | num: num, | 199 | num: num, |
| 179 | cart_id: cart_id, | 200 | cart_id: cart_id, |
| 180 | args: { | 201 | args: { |
| 181 | index: index, | 202 | index: index, |
| 182 | }, | 203 | }, |
| 183 | }) | 204 | }) |
| 184 | this.$nextTick(function(){ | 205 | this.$nextTick(function() { |
| 185 | store.dispatch('cart/getCartList', { | 206 | store.dispatch('cart/getCartList', { |
| 186 | uid: this.$store.state.user.userInfo.uid, // 用户id | 207 | uid: this.$store.state.user.userInfo.uid, // 用户id |
| 187 | }).then(()=>{ | 208 | }).then(() => { |
| 188 | this.cartList = this.$store.state.cart.cartList; | 209 | this.cartList = this.$store.state.cart.cartList |
| 189 | }) | 210 | }) |
| 190 | }) | 211 | }) |
| 191 | }, | 212 | }, |
| 192 | //底部弹窗开关 | 213 | // 底部弹窗开关 |
| 193 | showBottom(isCart,pid,skId,mp_id,cart_id,index){ | 214 | showBottom(isCart, pid, skId, mp_id, cart_id, index) { |
| 194 | store.dispatch('read/fetch', { | 215 | store.dispatch('read/fetch', { |
| 195 | pid, | 216 | pid, |
| 196 | sk_id: skId, | 217 | sk_id: skId, |
| 197 | }).then(()=>{ | 218 | }).then(() => { |
| 198 | this.cartIndex = index | 219 | this.cartIndex = index |
| 199 | this.sk_id = skId; | 220 | this.sk_id = skId |
| 200 | this.pid = pid; | 221 | this.pid = pid |
| 201 | this.mp_id = mp_id; | 222 | this.mp_id = mp_id |
| 202 | this.isCart = isCart; | 223 | this.isCart = isCart |
| 203 | this.cart_id = cart_id; | 224 | this.cart_id = cart_id |
| 204 | this.isShowBottom = true; | 225 | this.isShowBottom = true |
| 205 | }) | 226 | }) |
| 206 | }, | 227 | }, |
| 207 | closeBottom(){ | 228 | closeBottom() { |
| 208 | this.isShowBottom = false; | 229 | this.isShowBottom = false |
| 209 | }, | 230 | }, |
| 210 | toGoods(id, sk_id) { | 231 | toGoods(id, skId) { |
| 211 | uni.navigateTo({ | 232 | uni.navigateTo({ |
| 212 | url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id, | 233 | url: '../details/details?pid=' + id + '&sk_id=' + skId, |
| 213 | success: res => {}, | 234 | success: res => {}, |
| 214 | fail: () => {}, | 235 | fail: () => {}, |
| 215 | complete: () => {}, | 236 | complete: () => {}, |
| 216 | }) | 237 | }) |
| 217 | }, | 238 | }, |
| 218 | toComfirmOrder(){ | 239 | toComfirmOrder() { |
| 219 | this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked) | 240 | this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked) |
| 220 | if(this.$store.state.cart.checkedCartLst.length>0){ | 241 | if (this.$store.state.cart.checkedCartLst.length > 0) { |
| 221 | uni.navigateTo({ | 242 | uni.navigateTo({ |
| 222 | url:`../confirmOrder/confirmOrder?isCart=true`, | 243 | url: '../confirmOrder/confirmOrder?isCart=true', |
| 223 | }) | 244 | }) |
| 224 | }else{ | 245 | } else { |
| 225 | uni.showToast({ | 246 | uni.showToast({ |
| 226 | title:'您还没有选择宝贝哦~', | 247 | title: '您还没有选择宝贝哦~', |
| 227 | icon:'none' | 248 | icon: 'none', |
| 228 | }) | 249 | }) |
| 229 | } | 250 | } |
| 230 | }, | 251 | }, |
| 231 | counter(index, isadd, item) { | 252 | counter(index, isadd, item) { |
| 232 | // console.log('item=====>', item) | 253 | // console.log('item=====>', item) |
| 233 | // console.log('num=====>', item.num) | 254 | // console.log('num=====>', item.num) |
| 234 | const nums = parseInt(item.num) | 255 | const nums = parseInt(item.num) |
| 235 | if (isadd) { | 256 | if (isadd) { |
| 236 | if (nums >= this.maxCount) { | 257 | if (nums >= this.maxCount) { |
| 237 | this.addDisabled = true | 258 | this.addDisabled = true |
| 238 | } else { | 259 | } else { |
| 239 | this.addDisabled = true | 260 | this.addDisabled = true |
| 240 | store.dispatch('cart/modiCart', { | 261 | store.dispatch('cart/modiCart', { |
| 241 | uid: this.$store.state.user.userInfo.uid, | 262 | uid: this.$store.state.user.userInfo.uid, |
| 242 | openid: this.$store.state.user.userInfo.openid, | 263 | openid: this.$store.state.user.userInfo.openid, |
| 243 | mp_id: item.mp_id, | 264 | mp_id: item.mp_id, |
| 244 | sk_id: item.sk_id, | 265 | sk_id: item.sk_id, |
| 245 | price: item.nowPrice, | 266 | price: item.nowPrice, |
| 246 | pid: item.pid, | 267 | pid: item.pid, |
| 247 | num: nums + 1, | 268 | num: nums + 1, |
| 248 | cart_id: item.cart_id, | 269 | cart_id: item.cart_id, |
| 249 | args: { | 270 | args: { |
| 250 | index: index, | 271 | index: index, |
| 251 | isadd: isadd, | 272 | isadd: isadd, |
| 252 | }, | 273 | }, |
| 253 | }) | 274 | }) |
| 254 | this.addDisabled = false | 275 | this.addDisabled = false |
| 255 | } | 276 | } |
| 256 | } else { | 277 | } else { |
| 257 | if (nums <= 1) { | 278 | if (nums <= 1) { |
| 258 | this.desDisabled = true | 279 | this.desDisabled = true |
| 259 | } else { | 280 | } else { |
| 260 | this.desDisabled = false | 281 | this.desDisabled = false |
| 261 | 282 | ||
| 262 | store.dispatch('cart/modiCart', { | 283 | store.dispatch('cart/modiCart', { |
| 263 | uid: this.$store.state.user.userInfo.uid, | 284 | uid: this.$store.state.user.userInfo.uid, |
| 264 | openid: this.$store.state.user.userInfo.openid, | 285 | openid: this.$store.state.user.userInfo.openid, |
| 265 | mp_id: item.mp_id, | 286 | mp_id: item.mp_id, |
| 266 | sk_id: item.sk_id, | 287 | sk_id: item.sk_id, |
| 267 | price: item.nowPrice, | 288 | price: item.nowPrice, |
| 268 | pid: item.pid, | 289 | pid: item.pid, |
| 269 | num: nums - 1, | 290 | num: nums - 1, |
| 270 | cart_id: item.cart_id, | 291 | cart_id: item.cart_id, |
| 271 | args: { | 292 | args: { |
| 272 | index: index, | 293 | index: index, |
| 273 | isadd: isadd, | 294 | isadd: isadd, |
| 274 | }, | 295 | }, |
| 275 | }) | 296 | }) |
| 276 | this.desDisabled = true | 297 | this.desDisabled = true |
| 277 | } | 298 | } |
| 278 | } | 299 | } |
| 279 | |||
| 280 | }, | 300 | }, |
| 281 | delCart(cart_id, index) { | 301 | delCart(cart_id, index) { |
| 282 | cart_id = parseInt(cart_id) | 302 | cart_id = parseInt(cart_id) |
| 283 | uni.showModal({ | 303 | uni.showModal({ |
| 284 | title: '是否删除该商品', | 304 | title: '是否删除该商品', |
| 285 | success: function (res) { | 305 | success: function (res) { |
| 286 | if (res.confirm) { | 306 | if (res.confirm) { |
| 287 | store.dispatch('cart/delCart', { | 307 | store.dispatch('cart/delCart', { |
| 288 | uid: this.$store.state.user.userInfo.uid, | 308 | uid: this.$store.state.user.userInfo.uid, |
| 289 | openid: this.$store.state.user.userInfo.openid, | 309 | openid: this.$store.state.user.userInfo.openid, |
| 290 | cart_id: cart_id, // 要修改的购物车id | 310 | cart_id: cart_id, // 要修改的购物车id |
| 291 | arg: index, // 由于action 传参是能接收两参数，因此将index放入对象 | 311 | arg: index, // 由于action 传参是能接收两参数，因此将index放入对象 |
| 292 | }) | 312 | }) |
| 293 | } | 313 | } |
| 294 | }.bind(this), | 314 | }.bind(this), |
| 295 | }) | 315 | }) |
| 296 | // this.cartList.splice(index,1) | 316 | // this.cartList.splice(index,1) |
| 297 | }, | 317 | }, |
| 298 | }, | 318 | }, |
| 299 | } | 319 | } |
| 300 | </script> | 320 | </script> |
| 301 | 321 | ||
| 302 | <style lang="scss"> | 322 | <style lang="scss"> |
| 303 | .content { | 323 | .content { |
| 304 | min-height: 100vh; | 324 | min-height: 100vh; |
| 305 | background-color: #f2f2f2; | 325 | background-color: #f2f2f2; |
| 306 | display: flex; | 326 | display: flex; |
| 307 | flex-direction: column; | 327 | flex-direction: column; |
| 308 | align-items: center; | 328 | align-items: center; |
| 309 | justify-content: space-between; | 329 | justify-content: space-between; |
| 310 | padding: 20rpx 40rpx; | 330 | padding: 20rpx 40rpx; |
| 311 | box-sizing: border-box; | 331 | box-sizing: border-box; |
| 312 | 332 | ||
| 313 | .partentCheck { | 333 | .partentCheck { |
| 314 | width: 16px; | 334 | width: 16px; |
| 315 | height: 16px; | 335 | height: 16px; |
| 316 | border-radius: 22px; | 336 | border-radius: 22px; |
| 317 | border: 1px solid #cfcfcf; | 337 | border: 1px solid #cfcfcf; |
| 318 | background-color: #ffffff; | 338 | background-color: #ffffff; |
| 319 | margin: 24rpx 12rpx 24rpx 24rpx; | 339 | margin: 24rpx 12rpx 24rpx 24rpx; |
| 320 | } | 340 | } |
| 321 | .partentChecked { | 341 | .partentChecked { |
| 322 | width: 18px; | 342 | width: 18px; |
| 323 | height: 18px; | 343 | height: 18px; |
| 324 | border-radius: 22px; | 344 | border-radius: 22px; |
| 325 | background-color: #ff6b4a; | 345 | background-color: #ff6b4a; |
| 326 | margin: 24rpx 12rpx 24rpx 24rpx; | 346 | margin: 24rpx 12rpx 24rpx 24rpx; |
| 327 | .correct { | 347 | .correct { |
| 328 | display: inline-block; | 348 | display: inline-block; |
| 329 | position: relative; | 349 | position: relative; |
| 330 | width: 10rpx; | 350 | width: 10rpx; |
| 331 | height: 2rpx; | 351 | height: 2rpx; |
| 332 | background: #ffffff; | 352 | background: #ffffff; |
| 333 | line-height: 0; | 353 | line-height: 0; |
| 334 | font-size: 0; | 354 | font-size: 0; |
| 335 | position: relative; | 355 | position: relative; |
| 336 | top: -7px; | 356 | top: -7px; |
| 337 | left: 4px; | 357 | left: 4px; |
| 338 | -webkit-transform: rotate(45deg); | 358 | -webkit-transform: rotate(45deg); |
| 339 | } | 359 | } |
| 340 | .correct:after { | 360 | .correct:after { |
| 341 | content: "/"; | 361 | content: "/"; |
| 342 | display: block; | 362 | display: block; |
| 343 | width: 16rpx; | 363 | width: 16rpx; |
| 344 | height: 2rpx; | 364 | height: 2rpx; |
| 345 | background: #ffffff; | 365 | background: #ffffff; |
| 346 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); | 366 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); |
| 347 | } | 367 | } |
| 348 | } | 368 | } |
| 349 | 369 | ||
| 350 | .card { | 370 | .card { |
| 351 | background-color: #ffffff; | 371 | background-color: #ffffff; |
| 352 | border-radius: 16rpx; | 372 | border-radius: 16rpx; |
| 353 | box-sizing: border-box; | 373 | box-sizing: border-box; |
| 354 | padding: 36rpx 36rpx 36rpx 18rpx; | 374 | padding: 36rpx 36rpx 36rpx 18rpx; |
| 355 | display: flex; | 375 | display: flex; |
| 356 | flex-direction: column; | 376 | flex-direction: column; |
| 357 | align-items: center; | 377 | align-items: center; |
| 358 | justify-content: space-between; | 378 | justify-content: space-between; |
| 359 | margin-bottom: 180rpx; | 379 | margin-bottom: 180rpx; |
| 360 | .cardHeader { | 380 | .cardHeader { |
| 361 | width: 100%; | 381 | width: 100%; |
| 362 | height: 36rpx; | 382 | height: 36rpx; |
| 363 | display: flex; | 383 | display: flex; |
| 364 | align-items: center; | 384 | align-items: center; |
| 365 | justify-content: flex-start; | 385 | justify-content: flex-start; |
| 366 | margin-bottom: 20rpx; | 386 | margin-bottom: 20rpx; |
| 367 | image { | 387 | image { |
| 368 | height: 32rpx; | 388 | height: 32rpx; |
| 369 | width: 32rpx; | 389 | width: 32rpx; |
| 370 | padding-left: 6px; | 390 | padding-left: 6px; |
| 371 | padding-right: 10px; | 391 | padding-right: 10px; |
| 372 | } | 392 | } |
| 373 | text { | 393 | text { |
| 374 | // font-family: PingFangSC-Regular; | 394 | // font-family: PingFangSC-Regular; |
| 375 | font-size: 14px; | 395 | font-size: 14px; |
| 376 | color: #333333; | 396 | color: #333333; |
| 377 | letter-spacing: -0.26px; | 397 | letter-spacing: -0.26px; |
| 378 | } | 398 | } |
| 379 | } | 399 | } |
| 380 | .cardBody { | 400 | .cardBody { |
| 381 | width: 100%; | 401 | width: 100%; |
| 382 | min-height: 300rpx; | 402 | min-height: 300rpx; |
| 383 | display: flex; | 403 | display: flex; |
| 384 | align-items: center; | 404 | align-items: center; |
| 385 | justify-content: space-between; | 405 | justify-content: space-between; |
| 386 | .goodInfo { | 406 | .goodInfo { |
| 387 | width: 390rpx; | 407 | width: 390rpx; |
| 388 | display: flex; | 408 | display: flex; |
| 389 | flex-direction: row; | 409 | flex-direction: row; |
| 390 | justify-content: flex-start; | 410 | justify-content: flex-start; |
| 391 | padding-left: 6px; | 411 | padding-left: 6px; |
| 392 | 412 | ||
| 393 | .imageWrap { | 413 | .imageWrap { |
| 394 | height: 188rpx; | 414 | height: 188rpx; |
| 395 | width: 188rpx; | 415 | width: 188rpx; |
| 396 | margin-right: 28rpx; | 416 | margin-right: 28rpx; |
| 397 | 417 | ||
| 398 | image { | 418 | image { |
| 399 | border-radius: 4px; | 419 | border-radius: 4px; |
| 400 | height: 188rpx; | 420 | height: 188rpx; |
| 401 | width: 188rpx; | 421 | width: 188rpx; |
| 402 | } | 422 | } |
| 403 | } | 423 | } |
| 404 | .infoRight { | 424 | .infoRight { |
| 405 | display: flex; | 425 | display: flex; |
| 406 | flex-direction: column; | 426 | flex-direction: column; |
| 407 | align-items: flex-start; | 427 | align-items: flex-start; |
| 408 | justify-content: space-between; | 428 | justify-content: space-between; |
| 409 | min-height: 240rpx; | 429 | min-height: 240rpx; |
| 410 | width: 100%; | 430 | width: 100%; |
| 411 | .goodName { | 431 | .goodName { |
| 412 | display: -webkit-box; | 432 | display: -webkit-box; |
| 413 | -webkit-box-orient: vertical; | 433 | -webkit-box-orient: vertical; |
| 414 | -webkit-line-clamp: 2; | 434 | -webkit-line-clamp: 2; |
| 415 | text-align: justify; | 435 | text-align: justify; |
| 416 | overflow: hidden; | 436 | overflow: hidden; |
| 417 | font-size: 28rpx; | 437 | font-size: 28rpx; |
| 418 | color: #333333; | 438 | color: #333333; |
| 419 | } | 439 | } |
| 420 | .describ { | 440 | .describ { |
| 421 | width: 100%; | 441 | width: 100%; |
| 422 | min-height: 80rpx; | 442 | min-height: 80rpx; |
| 423 | background: #F9F9F9; | 443 | background: #f9f9f9; |
| 424 | border-radius: 2px; | 444 | border-radius: 2px; |
| 425 | box-sizing: border-box; | 445 | box-sizing: border-box; |
| 426 | padding: 10rpx; | 446 | padding: 10rpx; |
| 427 | font-size: 20rpx; | 447 | font-size: 20rpx; |
| 428 | letter-spacing: -0.23px; | 448 | letter-spacing: -0.23px; |
| 429 | color: #999999; | 449 | color: #999999; |
| 430 | display: flex; | 450 | display: flex; |
| 431 | justify-content: space-between; | 451 | justify-content: space-between; |
| 432 | align-items: center; | 452 | align-items: center; |
| 433 | .desL{ | 453 | .desL { |
| 434 | 454 | view { | |
| 435 | view{ | 455 | margin: 10rpx 0 10rpx 0; |
| 436 | margin: 10rpx 0 10rpx 0 ; | 456 | } |
| 437 | } | 457 | } |
| 438 | } | ||
| 439 | |||
| 440 | } | 458 | } |
| 441 | .priceBox { | 459 | .priceBox { |
| 442 | display: flex; | 460 | display: flex; |
| 443 | justify-content: space-between; | 461 | justify-content: space-between; |
| 444 | align-items: center; | 462 | align-items: center; |
| 445 | // margin-top: 26px; | 463 | // margin-top: 26px; |
| 446 | width: 100%; | 464 | width: 100%; |
| 447 | font-size: 14px; | 465 | font-size: 14px; |
| 448 | color: #999999; | 466 | color: #999999; |
| 449 | .maxCount { | 467 | .maxCount { |
| 450 | color: #999999; | 468 | color: #999999; |
| 451 | font-size: 20rpx; | 469 | font-size: 20rpx; |
| 452 | } | 470 | } |
| 453 | .price { | 471 | .price { |
| 454 | color: #ff6b4a; | 472 | color: #ff6b4a; |
| 455 | font-size: 28rpx; | 473 | font-size: 28rpx; |
| 456 | } | 474 | } |
| 457 | .counter { | 475 | .counter { |
| 458 | display: flex; | 476 | display: flex; |
| 459 | flex-direction: row; | 477 | flex-direction: row; |
| 460 | justify-content: space-between; | 478 | justify-content: space-between; |
| 461 | align-items: center; | 479 | align-items: center; |
| 462 | font-size: 28rpx; | 480 | font-size: 28rpx; |
| 463 | color: #333333; | 481 | color: #333333; |
| 464 | width: 122rpx; | 482 | width: 122rpx; |
| 465 | .btn { | 483 | .btn { |
| 466 | display: flex; | 484 | display: flex; |
| 467 | justify-content: center; | 485 | justify-content: center; |
| 468 | line-height: 32rpx; | 486 | line-height: 32rpx; |
| 469 | height: 32rpx; | 487 | height: 32rpx; |
| 470 | width: 32rpx; | 488 | width: 32rpx; |
| 471 | background-color: #f2f2f2; | 489 | background-color: #f2f2f2; |
| 472 | color: #cfcfcf; | 490 | color: #cfcfcf; |
| 473 | } | 491 | } |
| 474 | } | 492 | } |
| 475 | } | 493 | } |
| 476 | } | 494 | } |
| 477 | } | 495 | } |
| 478 | } | 496 | } |
| 479 | } | 497 | } |
| 480 | .footer { | 498 | .footer { |
| 481 | position: fixed; | 499 | position: fixed; |
| 482 | left: 0; | 500 | left: 0; |
| 483 | bottom: 0px; | 501 | bottom: 0px; |
| 484 | height: 112rpx; | 502 | height: 112rpx; |
| 485 | width: 100%; | 503 | width: 100%; |
| 486 | background-color: #ffffff; | 504 | background-color: #ffffff; |
| 487 | font-size: 16px; | 505 | font-size: 16px; |
| 488 | display: flex; | 506 | display: flex; |
| 489 | justify-content: space-between; | 507 | justify-content: space-between; |
| 490 | align-items: center; | 508 | align-items: center; |
| 491 | .footerLeft { | 509 | .footerLeft { |
| 492 | display: flex; | 510 | display: flex; |
| 493 | justify-content: center; | 511 | justify-content: center; |
| 494 | align-items: center; | 512 | align-items: center; |
| 495 | width: 50%; | 513 | width: 50%; |
| 496 | color: #333333; | 514 | color: #333333; |
| 497 | text { | 515 | text { |
| 498 | color: #ff6b4a; | 516 | color: #ff6b4a; |
| 499 | } | 517 | } |
| 500 | } | 518 | } |
| 501 | .footerRight { | 519 | .footerRight { |
| 502 | display: flex; | 520 | display: flex; |
| 503 | justify-content: flex-end; | 521 | justify-content: flex-end; |
| 504 | align-items: center; | 522 | align-items: center; |
| 505 | width: 50%; | 523 | width: 50%; |
| 506 | margin-right: 26rpx; | 524 | margin-right: 26rpx; |
| 507 | .paybtn { | 525 | .paybtn { |
| 508 | display: flex; | 526 | display: flex; |
| 509 | justify-content: center; | 527 | justify-content: center; |
| 510 | align-items: center; | 528 | align-items: center; |
| 511 | background: #ff6b4a; | 529 | background: #ff6b4a; |
| 512 | border-radius: 20px; | 530 | border-radius: 20px; |
| 513 | border-radius: 20px; | 531 | border-radius: 20px; |
| 514 | color: #ffffff; | 532 | color: #ffffff; |
| 515 | width: 204rpx; | 533 | width: 204rpx; |
| 516 | height: 80rpx; | 534 | height: 80rpx; |
| 517 | } | 535 | } |
| 518 | } | 536 | } |
| 519 | } | 537 | } |
| 520 | } | 538 | } |
| 521 | /* 隐藏滚动条 */ | 539 | /* 隐藏滚动条 */ |
| 522 | ::-webkit-scrollbar { | ||
| 523 | width: 0; | ||
| 524 | height: 0; | ||
| 525 | color: transparent; |
src/pages/details/details.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="container"> | 2 | <view class="container"> |
| 3 | <!-- 基础信息 --> | 3 | <!-- 基础信息 --> |
| 4 | <view class="basic_info"> | 4 | <view class="basic_info"> |
| 5 | <!-- 轮播图 --> | 5 | <!-- 轮播图 --> |
| 6 | <swiper | 6 | <swiper |
| 7 | class="swiperImage" | 7 | class="swiperImage" |
| 8 | :indicator-dots="true" | 8 | :indicator-dots="true" |
| 9 | :autoplay="true" | 9 | :autoplay="true" |
| 10 | :interval="4000" | 10 | :interval="4000" |
| 11 | :duration="500" | 11 | :duration="500" |
| 12 | > | 12 | > |
| 13 | <swiper-item | 13 | <swiper-item |
| 14 | v-for="(item, index) in carousel" | 14 | v-for="(item, index) in carousel" |
| 15 | :key="index" | 15 | :key="index" |
| 16 | > | 16 | > |
| 17 | <image | 17 | <image |
| 18 | :src="item" | 18 | :src="item" |
| 19 | mode="scaleToFill" | 19 | mode="scaleToFill" |
| 20 | ></image> | 20 | ></image> |
| 21 | </swiper-item> | 21 | </swiper-item> |
| 22 | </swiper> | 22 | </swiper> |
| 23 | <!-- 产品价格及购买人数 --> | 23 | <!-- 产品价格及购买人数 --> |
| 24 | <view class="info_pay"> | 24 | <view class="info_pay"> |
| 25 | <view>￥{{goodsInfo.price || '暂无'}}<span | 25 | <view>￥{{goodsInfo.price || '暂无'}}<span |
| 26 | v-if="goodsInfo.discountPrice" | 26 | v-if="goodsInfo.discountPrice" |
| 27 | class="info_pay_discount" | 27 | class="info_pay_discount" |
| 28 | >¥{{goodsInfo.discountPrice}}</span></view> | 28 | >¥{{goodsInfo.discountPrice}}</span></view> |
| 29 | <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span> | 29 | <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span> |
| 30 | </view> | 30 | </view> |
| 31 | <!-- 产品名称 --> | 31 | <!-- 产品名称 --> |
| 32 | <view class="info_name"> | 32 | <view class="info_name"> |
| 33 | <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text> | 33 | <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text> |
| 34 | <view | 34 | <view |
| 35 | @tap="confirmShare" | 35 | @tap="confirmShare" |
| 36 | class="info_name_share" | 36 | class="info_name_share" |
| 37 | > | 37 | > |
| 38 | <image src="/static/img/detail/share-icon.png"></image> | 38 | <image src="/static/img/detail/share-icon.png"></image> |
| 39 | <text>分享</text> | 39 | <text>分享</text> |
| 40 | </view> | 40 | </view> |
| 41 | </view> | 41 | </view> |
| 42 | <!-- 产品售后信息 --> | 42 | <!-- 产品售后信息 --> |
| 43 | <view class="info_after"> | 43 | <view class="info_after"> |
| 44 | <span>支持7天无理由退货</span> | 44 | <span>支持7天无理由退货</span> |
| 45 | <span>顺丰发货</span> | 45 | <span>顺丰发货</span> |
| 46 | <span>30天质量保证</span> | 46 | <span>30天质量保证</span> |
| 47 | </view> | 47 | </view> |
| 48 | </view> | 48 | </view> |
| 49 | <!-- 详细信息 --> | 49 | <!-- 详细信息 --> |
| 50 | <view class="detail_info"> | 50 | <view class="detail_info"> |
| 51 | <!-- 详细信息菜单 --> | 51 | <!-- 详细信息菜单 --> |
| 52 | <view class="screen_bar"> | 52 | <view class="screen_bar"> |
| 53 | <view | 53 | <view |
| 54 | v-for="(item, index) in screenItems" | 54 | v-for="(item, index) in screenItems" |
| 55 | :key="index" | 55 | :key="index" |
| 56 | @click="tabChange(index)" | 56 | @click="tabChange(index)" |
| 57 | > | 57 | > |
| 58 | <view | 58 | <view |
| 59 | class="screen_item" | 59 | class="screen_item" |
| 60 | v-bind:class="{ item_active: item_current === index }" | 60 | v-bind:class="{ item_active: item_current === index }" |
| 61 | >{{ screenItems[index] || '暂无' }}</view> | 61 | >{{ screenItems[index] || '暂无' }}</view> |
| 62 | </view> | 62 | </view> |
| 63 | </view> | 63 | </view> |
| 64 | <!-- 商品介绍 --> | 64 | <!-- 商品介绍 --> |
| 65 | <view | 65 | <view |
| 66 | class="screen_item" | 66 | class="screen_item" |
| 67 | v-if="item_current === 0" | 67 | v-if="item_current === 0" |
| 68 | > | 68 | > |
| 69 | <Introduce :tag="tag" /> | 69 | <Introduce :tag="tag" /> |
| 70 | </view> | 70 | </view> |
| 71 | <!-- 规格参数 --> | 71 | <!-- 规格参数 --> |
| 72 | <view | 72 | <view |
| 73 | class="screen_item" | 73 | class="screen_item" |
| 74 | v-if="item_current === 1" | 74 | v-if="item_current === 1" |
| 75 | > | 75 | > |
| 76 | <view class="specification"> | 76 | <view class="specification"> |
| 77 | <view | 77 | <view |
| 78 | class="spe_item" | 78 | class="spe_item" |
| 79 | v-for="(item, index) in specification" | 79 | v-for="(item, index) in specification" |
| 80 | :key="index" | 80 | :key="index" |
| 81 | > | 81 | > |
| 82 | <image | 82 | <image |
| 83 | class="spe_image" | 83 | class="spe_image" |
| 84 | v-bind:src="item.img" | 84 | v-bind:src="item.img" |
| 85 | ></image> | 85 | ></image> |
| 86 | <span>{{item.standard || '暂无'}}</span> | 86 | <span>{{item.standard || '暂无'}}</span> |
| 87 | <span>{{item.slength || '暂无'}}</span> | 87 | <span>{{item.slength || '暂无'}}</span> |
| 88 | </view> | 88 | </view> |
| 89 | </view> | 89 | </view> |
| 90 | </view> | 90 | </view> |
| 91 | <!-- 售后保障 --> | 91 | <!-- 售后保障 --> |
| 92 | <view | 92 | <view |
| 93 | class="screen_item" | 93 | class="screen_item" |
| 94 | v-if="item_current === 2" | 94 | v-if="item_current === 2" |
| 95 | > | 95 | > |
| 96 | <AfterSails /> | 96 | <AfterSails /> |
| 97 | </view> | 97 | </view> |
| 98 | </view> | 98 | </view> |
| 99 | <!-- 评价 --> | 99 | <!-- 评价 --> |
| 100 | <template v-if="item_current !== 2"> | 100 | <template v-if="item_current !== 2"> |
| 101 | <view class="evaluate"> | 101 | <view class="evaluate"> |
| 102 | <!-- 标题 --> | 102 | <!-- 标题 --> |
| 103 | <view class="evaluate_title"> | 103 | <view class="evaluate_title"> |
| 104 | <view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view> | 104 | <view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view> |
| 105 | <!-- 星星 --> | 105 | <!-- 星星 --> |
| 106 | <view class="evaluate_star"> | 106 | <view class="evaluate_star"> |
| 107 | <view | 107 | <view |
| 108 | class="star" | 108 | class="star" |
| 109 | v-for="(item, index) in evaluate.star" | 109 | v-for="(item, index) in evaluate.star" |
| 110 | :key="index" | 110 | :key="index" |
| 111 | > | 111 | > |
| 112 | <image | 112 | <image |
| 113 | src="../../static/img/detail/d_star.png" | 113 | src="../../static/img/detail/d_star.png" |
| 114 | mode="aspectFill" | 114 | mode="aspectFill" |
| 115 | style="height: 26rpx; width: 28rpx;" | 115 | style="height: 26rpx; width: 28rpx;" |
| 116 | ></image> | 116 | ></image> |
| 117 | </view> | 117 | </view> |
| 118 | </view> | 118 | </view> |
| 119 | </view> | 119 | </view> |
| 120 | <!-- 标签 --> | 120 | <!-- 标签 --> |
| 121 | <view class="evaluate_tag"> | 121 | <view class="evaluate_tag"> |
| 122 | <view | 122 | <view |
| 123 | v-for="(item, index) in evaluate.tag" | 123 | v-for="(item, index) in evaluate.tag" |
| 124 | :key="index" | 124 | :key="index" |
| 125 | >{{item.name}}</view> | 125 | >{{item.name}}</view> |
| 126 | </view> | 126 | </view> |
| 127 | </view> | 127 | </view> |
| 128 | </template> | 128 | </template> |
| 129 | <!-- 商品详情页 --> | 129 | <!-- 商品详情页 --> |
| 130 | <template v-if="current !==2"> | 130 | <template v-if="current !==2"> |
| 131 | <view class="more_info"> | 131 | <view class="more_info"> |
| 132 | <view | 132 | <view |
| 133 | class="more_fixed1" | 133 | class="more_fixed1" |
| 134 | @click="consolg(goodInfo.prodIntro1)" | 134 | @click="consolg(goodInfo.prodIntro1)" |
| 135 | > | 135 | > |
| 136 | <image src="/static/img/detail/hr.png"></image> | 136 | <image src="/static/img/detail/hr.png"></image> |
| 137 | <view>商品详情</view> | 137 | <view>商品详情</view> |
| 138 | <image src="/static/img/detail/hr.png"></image> | 138 | <image src="/static/img/detail/hr.png"></image> |
| 139 | </view> | 139 | </view> |
| 140 | <view | 140 | <view |
| 141 | class="more_all" | 141 | class="more_all" |
| 142 | v-html="more" | 142 | v-html="more" |
| 143 | > | 143 | > |
| 144 | </view> | 144 | </view> |
| 145 | </view> | 145 | </view> |
| 146 | </template> | 146 | </template> |
| 147 | <!-- 底部菜单 --> | 147 | <!-- 底部菜单 --> |
| 148 | <view class="menu"> | 148 | <view class="menu"> |
| 149 | <view | 149 | <view |
| 150 | @tap="toCart()" | 150 | @tap="toCart()" |
| 151 | class="menu_1" | 151 | class="menu_1" |
| 152 | > | 152 | > |
| 153 | <view class="cart_icon"> | 153 | <view class="cart_icon"> |
| 154 | <image src="/static/tab-cart.png" /> | 154 | <image src="/static/tab-cart.png" /> |
| 155 | <text>{{cartNumber}}</text> | 155 | <text>{{cartNumber}}</text> |
| 156 | </view> | 156 | </view> |
| 157 | <view class="menu_image">购物车</view> | 157 | <view class="menu_image">购物车</view> |
| 158 | </view> | 158 | </view> |
| 159 | <view class="menu_2"> | 159 | <view class="menu_2"> |
| 160 | <view | 160 | <view |
| 161 | class="menu_input" | 161 | class="menu_input" |
| 162 | @tap="showBottom(1)" | 162 | @tap="showBottom(1)" |
| 163 | >加入购物车</view> | 163 | >加入购物车</view> |
| 164 | <view | 164 | <view |
| 165 | class="menu_now" | 165 | class="menu_now" |
| 166 | @click="showBottom(2)" | 166 | @click="showBottom(2)" |
| 167 | >立即购买</view> | 167 | >立即购买</view> |
| 168 | </view> | 168 | </view> |
| 169 | </view> | 169 | </view> |
| 170 | <!-- 参数选择 --> | 170 | <!-- 参数选择 --> |
| 171 | <template v-if="isShowBottom"> | 171 | <template v-if="isShowBottom"> |
| 172 | <BottomSheet | 172 | <BottomSheet |
| 173 | :isCart="isCart" | 173 | :isCart="isCart" |
| 174 | @addCart="addCart" | 174 | @addCart="addCart" |
| 175 | :pid="pid" | 175 | :pid="pid" |
| 176 | :goodInfo="goodInfo" | 176 | :goodInfo="goodInfo" |
| 177 | :isShowBottom="isShowBottom" | 177 | :isShowBottom="isShowBottom" |
| 178 | @closeBottom="closeBottom" | 178 | @closeBottom="closeBottom" |
| 179 | ></BottomSheet> | 179 | ></BottomSheet> |
| 180 | </template> | 180 | </template> |
| 181 | <!-- 分享 --> | 181 | <!-- 分享 --> |
| 182 | <template> | 182 | <template> |
| 183 | <uni-popup | 183 | <uni-popup |
| 184 | ref="popupShare" | 184 | ref="popupShare" |
| 185 | type="share" | 185 | type="share" |
| 186 | > | 186 | > |
| 187 | <uni-popup-share @select="selectShare"></uni-popup-share> | 187 | <uni-popup-share @select="selectShare"></uni-popup-share> |
| 188 | </uni-popup> | 188 | </uni-popup> |
| 189 | </template> | 189 | </template> |
| 190 | <!-- 分享海报 --> | 190 | <!-- 分享海报 --> |
| 191 | <template> | 191 | <template> |
| 192 | <uni-popup | 192 | <uni-popup |
| 193 | ref="uniPopupPost" | 193 | ref="uniPopupPost" |
| 194 | type="center" | 194 | type="center" |
| 195 | > | 195 | > |
| 196 | <uni-popup-post :postUrl="postUrl"></uni-popup-post> | 196 | <uni-popup-post :postUrl="postUrl"></uni-popup-post> |
| 197 | </uni-popup> | 197 | </uni-popup> |
| 198 | </template> | 198 | </template> |
| 199 | </view> | 199 | </view> |
| 200 | </template> | 200 | </template> |
| 201 | 201 | ||
| 202 | <script> | 202 | <script> |
| 203 | import store from '@/store' | 203 | import store from '@/store' |
| 204 | import Introduce from './components/Introduce' // 商品介绍基本信息组件 | 204 | import Introduce from './components/Introduce' // 商品介绍基本信息组件 |
| 205 | import AfterSails from './components/AfterSails' // 售后保障组件 | 205 | import AfterSails from './components/AfterSails' // 售后保障组件 |
| 206 | import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件 | 206 | import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件 |
| 207 | import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件 | 207 | import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件 |
| 208 | import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件 | 208 | import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件 |
| 209 | 209 | ||
| 210 | export default { | 210 | export default { |
| 211 | components: { | 211 | components: { |
| 212 | Introduce, | 212 | Introduce, |
| 213 | AfterSails, | 213 | AfterSails, |
| 214 | BottomSheet, | 214 | BottomSheet, |
| 215 | uniPopupShare, | 215 | uniPopupShare, |
| 216 | uniPopupPost, | 216 | uniPopupPost, |
| 217 | }, | 217 | }, |
| 218 | data () { | 218 | data () { |
| 219 | return { | 219 | return { |
| 220 | pid: 7, // 产品ID | 220 | pid: 7, // 产品ID |
| 221 | skId: undefined, // skuId | 221 | skId: undefined, // skuId |
| 222 | // 详细信息菜单 | 222 | // 详细信息菜单 |
| 223 | item_current: 0, | 223 | item_current: 0, |
| 224 | screenItems: [ | 224 | screenItems: [ |
| 225 | '商品介绍', | 225 | '商品介绍', |
| 226 | '规格参数', | 226 | '规格参数', |
| 227 | '售后保障', | 227 | '售后保障', |
| 228 | ], | 228 | ], |
| 229 | showPostImg: false, // 是否展示分享海报 | 229 | showPostImg: false, // 是否展示分享海报 |
| 230 | isShowBottom: false, // 是否展示参数选择 | 230 | isShowBottom: false, // 是否展示参数选择 |
| 231 | isCart: 1, // 参数选择 按钮判断 | 231 | isCart: 1, // 参数选择 按钮判断 |
| 232 | } | 232 | } |
| 233 | }, | 233 | }, |
| 234 | onLoad({ pid = this.pid, sk_id: skId }) { | 234 | onLoad({ pid = this.pid, sk_id: skId }) { |
| 235 | // 根据页面传参请求页面数据 | 235 | // 根据页面传参请求页面数据 |
| 236 | this.pid = pid | 236 | this.pid = pid |
| 237 | this.skId = skId | 237 | this.skId = skId |
| 238 | 238 | ||
| 239 | // 获取产品详情 | 239 | // 获取产品详情 |
| 240 | this.getDetails({ pid, skId }) | 240 | this.getDetails({ pid, skId }) |
| 241 | // 获取购物车数据 | 241 | // 获取购物车数据 |
| 242 | this.getCartNum() | 242 | this.getCartNum() |
| 243 | }, | 243 | }, |
| 244 | computed: { | 244 | computed: { |
| 245 | // 获取轮播图数据 | 245 | // 获取轮播图数据 |
| 246 | goodInfo() { | 246 | goodInfo() { |
| 247 | return this.$store.state.details.goodInfo | 247 | return this.$store.state.details.goodInfo |
| 248 | }, | 248 | }, |
| 249 | // 获取轮播图数据 | 249 | // 获取轮播图数据 |
| 250 | carousel() { | 250 | carousel() { |
| 251 | return this.$store.state.details.carousel | 251 | return this.$store.state.details.carousel |
| 252 | }, | 252 | }, |
| 253 | // 商品基本信息 | 253 | // 商品基本信息 |
| 254 | goodsInfo() { | 254 | goodsInfo() { |
| 255 | return this.$store.state.details.goodsInfo | 255 | return this.$store.state.details.goodsInfo |
| 256 | }, | 256 | }, |
| 257 | // 商品介绍商品标签 | 257 | // 商品介绍商品标签 |
| 258 | tag() { | 258 | tag() { |
| 259 | return this.$store.state.details.tag | 259 | return this.$store.state.details.tag |
| 260 | }, | 260 | }, |
| 261 | // 规格参数 | 261 | // 规格参数 |
| 262 | specification() { | 262 | specification() { |
| 263 | return this.$store.state.details.specification | 263 | return this.$store.state.details.specification |
| 264 | }, | 264 | }, |
| 265 | // 评价 | 265 | // 评价 |
| 266 | evaluate() { | 266 | evaluate() { |
| 267 | return this.$store.state.details.evaluate | 267 | return this.$store.state.details.evaluate |
| 268 | }, | 268 | }, |
| 269 | // 商品详情 | 269 | // 商品详情 |
| 270 | more() { | 270 | more() { |
| 271 | return this.$store.state.details.more | 271 | return this.$store.state.details.more |
| 272 | }, | 272 | }, |
| 273 | // 购物车数目 | 273 | // 购物车数目 |
| 274 | cartNumber() { | 274 | cartNumber() { |
| 275 | return this.$store.state.details.cartNumber | 275 | return this.$store.state.details.cartNumber |
| 276 | }, | 276 | }, |
| 277 | // 购物车数目 | 277 | // 购物车数目 |
| 278 | skuList() { | 278 | skuList() { |
| 279 | return this.$store.state.details.skuList | 279 | return this.$store.state.details.skuList |
| 280 | }, | 280 | }, |
| 281 | // 分享海报 | 281 | // 分享海报 |
| 282 | postUrl() { | 282 | postUrl() { |
| 283 | return this.$store.state.details.postUrl | 283 | return this.$store.state.details.postUrl |
| 284 | }, | 284 | }, |
| 285 | }, | 285 | }, |
| 286 | methods: { | 286 | methods: { |
| 287 | // 获取产品详情 | 287 | // 获取产品详情 |
| 288 | getDetails({ pid, skId }) { | 288 | getDetails({ pid, skId }) { |
| 289 | store.dispatch('details/details', { | 289 | store.dispatch('details/details', { |
| 290 | pid, | 290 | pid, |
| 291 | sk_id: skId, | 291 | sk_id: skId, |
| 292 | }) | 292 | }) |
| 293 | store.dispatch('read/fetch', { | 293 | store.dispatch('read/fetch', { |
| 294 | pid, | 294 | pid, |
| 295 | sk_id: skId, | 295 | sk_id: skId, |
| 296 | }) | 296 | }) |
| 297 | }, | 297 | }, |
| 298 | // 获取购物车数目 | 298 | // 获取购物车数目 |
| 299 | getCartNum() { | 299 | getCartNum() { |
| 300 | store.dispatch('details/getCartNumber') | 300 | store.dispatch('details/getCartNumber') |
| 301 | }, | 301 | }, |
| 302 | // 切换详细信息菜单 | 302 | // 切换详细信息菜单 |
| 303 | tabChange (e) { | 303 | tabChange (e) { |
| 304 | if (this.current !== e) { | 304 | if (this.current !== e) { |
| 305 | this.item_current = e | 305 | this.item_current = e |
| 306 | } | 306 | } |
| 307 | }, | 307 | }, |
| 308 | // 打开分享界面 | 308 | // 打开分享界面 |
| 309 | confirmShare() { | 309 | confirmShare() { |
| 310 | this.$refs.popupShare.open() | 310 | this.$refs.popupShare.open() |
| 311 | }, | 311 | }, |
| 312 | // 选择分享 | 312 | // 选择分享 |
| 313 | selectShare(e, done) { | 313 | selectShare(e, done) { |
| 314 | switch (e.item.name) { | 314 | switch (e.item.name) { |
| 315 | // 分享到好物圈 | 315 | // 分享到好物圈 |
| 316 | case 'recommend': | 316 | case 'recommend': |
| 317 | this.shareRecommend() | 317 | this.shareRecommend() |
| 318 | break | 318 | break |
| 319 | // 分享到朋友圈 | 319 | // 分享到朋友圈 |
| 320 | case 'friend': | 320 | case 'friend': |
| 321 | break | 321 | break |
| 322 | // 生成海报 | 322 | // 生成海报 |
| 323 | case 'poster': | 323 | case 'poster': |
| 324 | uni.showLoading({ | 324 | uni.showLoading({ |
| 325 | title: '生成图片中', | 325 | title: '生成图片中', |
| 326 | }) | 326 | }) |
| 327 | this.sharePost() | 327 | this.sharePost() |
| 328 | break | 328 | break |
| 329 | default: | 329 | default: |
| 330 | break | 330 | break |
| 331 | } | 331 | } |
| 332 | done() | 332 | done() |
| 333 | }, | 333 | }, |
| 334 | // 分享到好物圈 | 334 | // 分享到好物圈 |
| 335 | shareRecommend() { | 335 | shareRecommend() { |
| 336 | if (wx.openBusinessView) { | 336 | if (wx.openBusinessView) { |
| 337 | wx.openBusinessView({ | 337 | wx.openBusinessView({ |
| 338 | businessType: 'friendGoodsRecommend', | 338 | businessType: 'friendGoodsRecommend', |
| 339 | extraData: { | 339 | extraData: { |
| 340 | product: { | 340 | product: { |
| 341 | item_code: '58_68', | 341 | item_code: '58_68', |
| 342 | title: this.goodsInfo.name, | 342 | title: this.goodsInfo.name, |
| 343 | image_list: this.carousel, | 343 | image_list: this.carousel, |
| 344 | }, | 344 | }, |
| 345 | }, | 345 | }, |
| 346 | success: function (res) { | 346 | success: function (res) { |
| 347 | uni.showToast({ | 347 | uni.showToast({ |
| 348 | title: '好物圈分享成功！', | 348 | title: '好物圈分享成功！', |
| 349 | icon: 'none', | 349 | icon: 'none', |
| 350 | duration: 2000, | 350 | duration: 2000, |
| 351 | }) | 351 | }) |
| 352 | // 向服务器报告这个事情 | 352 | // 向服务器报告这个事情 |
| 353 | // TODO:::记录这个用户的推广过程。 | 353 | // TODO:::记录这个用户的推广过程。 |
| 354 | console.log('好物圈分享成功！', res) | 354 | console.log('好物圈分享成功！', res) |
| 355 | }, | 355 | }, |
| 356 | fail: function (res) { | 356 | fail: function (res) { |
| 357 | console.log('好物圈分享失败！', res) | 357 | console.log('好物圈分享失败！', res) |
| 358 | }, | 358 | }, |
| 359 | }) | 359 | }) |
| 360 | } | 360 | } |
| 361 | }, | 361 | }, |
| 362 | // 分享到朋友/圈 | 362 | // 分享到朋友/圈 |
| 363 | shareFriend() { | 363 | shareFriend() { |
| 364 | this.onShareAppMessage() | 364 | this.onShareAppMessage() |
| 365 | }, | 365 | }, |
| 366 | // 朋友圈设置页面 | 366 | // 朋友圈设置页面 |
| 367 | onShareAppMessage() { | 367 | onShareAppMessage() { |
| 368 | let myName = this.$store.state.user.userInfo.nickName | 368 | let myName = this.$store.state.user.userInfo.nickName |
| 369 | if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') { | 369 | if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') { |
| 370 | myName = '【神秘人】' | 370 | myName = '【神秘人】' |
| 371 | } else { | 371 | } else { |
| 372 | myName = '【' + myName + '】' | 372 | myName = '【' + myName + '】' |
| 373 | } | 373 | } |
| 374 | const uid = uni.getStorageSync('uid') | ||
| 375 | return { | 374 | return { |
| 376 | title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等) | 375 | title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等) |
| 377 | path: '/pages/index/detail/index?uid=' + uid + '&sid=0&pid=' + this.pid, | 376 | path: '/pages/details/details?sid=0&pid=' + this.pid, |
| 378 | imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 | 377 | imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 |
| 379 | success: function (res) { | 378 | success: function (res) { |
| 380 | if (res.errMsg === 'shareAppMessage:ok') { | 379 | if (res.errMsg === 'shareAppMessage:ok') { |
| 381 | console.log('分享成功！', res) | 380 | console.log('分享成功！', res) |
| 382 | } | 381 | } |
| 383 | }, | 382 | }, |
| 384 | fail: function (res) { | 383 | fail: function (res) { |
| 385 | if (res.errMsg === 'shareAppMessage:fail cancel') { | 384 | if (res.errMsg === 'shareAppMessage:fail cancel') { |
| 386 | console.log('fail', '放弃分享') | 385 | console.log('fail', '放弃分享') |
| 387 | } else if (res.errMsg === 'shareAppMessage:fail') { | 386 | } else if (res.errMsg === 'shareAppMessage:fail') { |
| 388 | console.log('fail', '分享失败') | 387 | console.log('fail', '分享失败') |
| 389 | } | 388 | } |
| 390 | }, | 389 | }, |
| 391 | } | 390 | } |
| 392 | }, | 391 | }, |
| 393 | // 生成海报 | 392 | // 生成海报 |
| 394 | sharePost() { | 393 | sharePost() { |
| 395 | const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined' | 394 | const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined' |
| 396 | 395 | ||
| 397 | store.dispatch('details/post', { | 396 | store.dispatch('details/post', { |
| 398 | pid: this.pid, | 397 | pid: this.pid, |
| 399 | sid: fromsid === 'undefined' ? 0 : fromsid, | 398 | sid: fromsid === 'undefined' ? 0 : fromsid, |
| 400 | }).then((data) => { | 399 | }).then((data) => { |
| 401 | uni.hideLoading() | 400 | uni.hideLoading() |
| 402 | this.$refs.uniPopupPost.open() | 401 | this.$refs.uniPopupPost.open() |
| 403 | }) | 402 | }) |
| 404 | }, | 403 | }, |
| 405 | // 参数选择弹窗开关 | 404 | // 参数选择弹窗开关 |
| 406 | showBottom(isCart) { | 405 | showBottom(isCart) { |
| 407 | this.isCart = isCart | 406 | this.isCart = isCart |
| 408 | this.isShowBottom = true | 407 | this.isShowBottom = true |
| 409 | }, | 408 | }, |
| 410 | closeBottom() { | 409 | closeBottom() { |
| 411 | this.isShowBottom = false | 410 | this.isShowBottom = false |
| 412 | }, | 411 | }, |
| 413 | // 前往购物车 | 412 | // 前往购物车 |
| 414 | toCart() { | 413 | toCart() { |
| 415 | uni.switchTab({ | 414 | uni.switchTab({ |
| 416 | url: '/pages/cart/cart', | 415 | url: '/pages/cart/cart', |
| 417 | success: res => {}, | 416 | success: res => {}, |
| 418 | fail: (error) => { console.log('跳转购物车失败======>', error) }, | 417 | fail: (error) => { console.log('跳转购物车失败======>', error) }, |
| 419 | complete: () => { console.log('toCart') }, | 418 | complete: () => { console.log('toCart') }, |
| 420 | }) | 419 | }) |
| 421 | }, | 420 | }, |
| 422 | // 加入购物车 | 421 | // 加入购物车 |
| 423 | addCart (mpId, num, checkedSKU, skId, price) { | 422 | addCart (mpId, num, checkedSKU, skId, price) { |
| 424 | const addCartList = {} | 423 | const addCartList = {} |
| 425 | addCartList.mp_id = mpId | 424 | addCartList.mp_id = mpId |
| 426 | addCartList.sk_id = skId | 425 | addCartList.sk_id = skId |
| 427 | addCartList.num = num | 426 | addCartList.num = num |
| 428 | addCartList.checkedSKU = checkedSKU | 427 | addCartList.checkedSKU = checkedSKU |
| 429 | addCartList.pid = this.pid | 428 | addCartList.pid = this.pid |
| 430 | addCartList.price = price | 429 | addCartList.price = price |
| 431 | console.log('添加购物车的参数', addCartList) | 430 | console.log('添加购物车的参数', addCartList) |
| 432 | store.dispatch('cart/addCart', addCartList).then((res) => { | 431 | store.dispatch('cart/addCart', addCartList).then((res) => { |
| 433 | if (res.code === 1) { | 432 | if (res.code === 1) { |
| 434 | uni.showToast({ | 433 | uni.showToast({ |
| 435 | title: '添加成功~', | 434 | title: '添加成功~', |
| 436 | icon: 'success', | 435 | icon: 'success', |
| 437 | }) | 436 | }) |
| 438 | } | 437 | } |
| 439 | // 再次请求购物车接口，实现实时更新 | 438 | // 再次请求购物车接口，实现实时更新 |
| 440 | store.dispatch('details/getCartNumber') | 439 | store.dispatch('details/getCartNumber') |
| 441 | }) | 440 | }) |
| 442 | }, | 441 | }, |
| 443 | }, | 442 | }, |
| 444 | } | 443 | } |
| 445 | </script> | 444 | </script> |
| 446 | 445 | ||
| 447 | <style lang="scss"> | 446 | <style lang="scss"> |
| 448 | .container { | 447 | .container { |
| 449 | background-color: #f8f8f8; | 448 | background-color: #f8f8f8; |
| 450 | font-family: "PingFangSC-Regular"; | 449 | font-family: "PingFangSC-Regular"; |
| 451 | // 板块样式 | 450 | // 板块样式 |
| 452 | > view { | 451 | > view { |
| 453 | background: #ffffff; | 452 | background: #ffffff; |
| 454 | margin-bottom: 10px; | 453 | margin-bottom: 10px; |
| 455 | padding: 8px 20px 8px 20px; | 454 | padding: 8px 20px 8px 20px; |
| 456 | box-sizing: border-box; | 455 | box-sizing: border-box; |
| 457 | } | 456 | } |
| 458 | // 基础信息板块 | 457 | // 基础信息板块 |
| 459 | .basic_info { | 458 | .basic_info { |
| 460 | // 轮播图 | 459 | // 轮播图 |
| 461 | .swiperImage { | 460 | .swiperImage { |
| 462 | width: 684rpx; | 461 | width: 684rpx; |
| 463 | height: 480rpx; | 462 | height: 480rpx; |
| 463 | text-align: center; | ||
| 464 | image { | 464 | image { |
| 465 | max-width: 100%; | 465 | max-width: 100%; |
| 466 | max-height: 100%; | 466 | max-height: 100%; |
| 467 | border-radius: 16rpx; | 467 | border-radius: 16rpx; |
| 468 | } | 468 | } |
| 469 | } | 469 | } |
| 470 | // 产品价格及购买人数 | 470 | // 产品价格及购买人数 |
| 471 | .info_pay { | 471 | .info_pay { |
| 472 | color: #eb5d3b; | 472 | color: #eb5d3b; |
| 473 | font-size: 18px; | 473 | font-size: 18px; |
| 474 | margin-top: 5px; | 474 | margin-top: 5px; |
| 475 | font-family: "PingFangSC-Semibold"; | 475 | font-family: "PingFangSC-Semibold"; |
| 476 | display: flex; | 476 | display: flex; |
| 477 | justify-content: space-between; | 477 | justify-content: space-between; |
| 478 | .info_pay_discount { | 478 | .info_pay_discount { |
| 479 | text-decoration: line-through; | 479 | text-decoration: line-through; |
| 480 | margin-left: 8rpx; | 480 | margin-left: 8rpx; |
| 481 | color: #999; | 481 | color: #999; |
| 482 | font-size: 14px; | 482 | font-size: 14px; |
| 483 | } | 483 | } |
| 484 | .info_pay_number { | 484 | .info_pay_number { |
| 485 | color: #999; | 485 | color: #999; |
| 486 | font-size: 14px; | 486 | font-size: 14px; |
| 487 | font-family: PingFangSC-Regular; | 487 | font-family: PingFangSC-Regular; |
| 488 | } | 488 | } |
| 489 | } | 489 | } |
| 490 | // 产品名称 | 490 | // 产品名称 |
| 491 | .info_name { | 491 | .info_name { |
| 492 | margin-top: 5px; | 492 | margin-top: 5px; |
| 493 | display: flex; | 493 | display: flex; |
| 494 | justify-content: space-between; | 494 | justify-content: space-between; |
| 495 | .info_name_name { | 495 | .info_name_name { |
| 496 | margin-right: 10px; | 496 | margin-right: 10px; |
| 497 | font-size: 16px; | 497 | font-size: 16px; |
| 498 | font-family: "PingFangSC-Semibold"; | 498 | font-family: "PingFangSC-Semibold"; |
| 499 | max-width: 592rpx; | 499 | max-width: 592rpx; |
| 500 | } | 500 | } |
| 501 | .info_name_share { | 501 | .info_name_share { |
| 502 | display: flex; | 502 | display: flex; |
| 503 | flex-direction: column; | 503 | flex-direction: column; |
| 504 | justify-content: space-between; | 504 | justify-content: space-between; |
| 505 | align-items: center; | 505 | align-items: center; |
| 506 | margin-top: 14rpx; | 506 | margin-top: 14rpx; |
| 507 | > image { | 507 | > image { |
| 508 | height: 40rpx; | 508 | height: 40rpx; |
| 509 | width: 40rpx; | 509 | width: 40rpx; |
| 510 | } | 510 | } |
| 511 | > text { | 511 | > text { |
| 512 | font-family: PingFangSC-Regular; | 512 | font-family: PingFangSC-Regular; |
| 513 | font-size: 12px; | 513 | font-size: 12px; |
| 514 | color: #999; | 514 | color: #999; |
| 515 | letter-spacing: -0.23px; | 515 | letter-spacing: -0.23px; |
| 516 | } | 516 | } |
| 517 | } | 517 | } |
| 518 | } | 518 | } |
| 519 | // 售后服务 | 519 | // 售后服务 |
| 520 | .info_after { | 520 | .info_after { |
| 521 | font-size: 10px; | 521 | font-size: 10px; |
| 522 | color: #999; | 522 | color: #999; |
| 523 | margin-top: 20rpx; | 523 | margin-top: 20rpx; |
| 524 | > span { | 524 | > span { |
| 525 | height: 14px; | 525 | height: 14px; |
| 526 | margin-right: 10px; | 526 | margin-right: 10px; |
| 527 | } | 527 | } |
| 528 | } | 528 | } |
| 529 | } | 529 | } |
| 530 | // 详细信息 | 530 | // 详细信息 |
| 531 | .detail_info { | 531 | .detail_info { |
| 532 | margin-bottom: 20rpx; | 532 | margin-bottom: 20rpx; |
| 533 | .screen_bar { | 533 | .screen_bar { |
| 534 | width: 670rpx; | 534 | width: 670rpx; |
| 535 | margin-top: 20rpx; | 535 | margin-top: 20rpx; |
| 536 | margin-bottom: 24rpx; | 536 | margin-bottom: 24rpx; |
| 537 | display: flex; | 537 | display: flex; |
| 538 | flex-direction: row; | 538 | flex-direction: row; |
| 539 | justify-content: space-between; | 539 | justify-content: space-between; |
| 540 | align-items: center; | 540 | align-items: center; |
| 541 | font-size: 14px; | 541 | font-size: 14px; |
| 542 | color: #333333; | 542 | color: #333333; |
| 543 | transition: all 0.2s; | 543 | transition: all 0.2s; |
| 544 | } | 544 | } |
| 545 | .item_active { | 545 | .item_active { |
| 546 | border-bottom: 4rpx solid #ff6b4a; | 546 | border-bottom: 4rpx solid #ff6b4a; |
| 547 | } | 547 | } |
| 548 | .screen_item { | 548 | .screen_item { |
| 549 | font-size: 32rpx; | 549 | font-size: 32rpx; |
| 550 | color: #333333; | 550 | color: #333333; |
| 551 | display: flex; | 551 | display: flex; |
| 552 | transition: all 0.2s; | 552 | transition: all 0.2s; |
| 553 | // 规格参数 | 553 | // 规格参数 |
| 554 | .specification { | 554 | .specification { |
| 555 | margin-bottom: 4px; | 555 | margin-bottom: 4px; |
| 556 | .spe_item { | 556 | .spe_item { |
| 557 | image { | 557 | image { |
| 558 | width: 50px; | 558 | width: 50px; |
| 559 | height: 25px; | 559 | height: 25px; |
| 560 | margin-right: 6px; | 560 | margin-right: 6px; |
| 561 | vertical-align: middle; | 561 | vertical-align: middle; |
| 562 | } | 562 | } |
| 563 | span { | 563 | span { |
| 564 | margin-left: 24rpx; | 564 | margin-left: 24rpx; |
| 565 | } | 565 | } |
| 566 | } | 566 | } |
| 567 | } | 567 | } |
| 568 | } | 568 | } |
| 569 | // | 569 | // |
| 570 | } | 570 | } |
| 571 | // 宝贝好评率 | 571 | // 宝贝好评率 |
| 572 | .evaluate { | 572 | .evaluate { |
| 573 | .evaluate_title { | 573 | .evaluate_title { |
| 574 | font-size: 14px; | 574 | font-size: 14px; |
| 575 | color: #333333; | 575 | color: #333333; |
| 576 | display: flex; | 576 | display: flex; |
| 577 | justify-content: space-between; | 577 | justify-content: space-between; |
| 578 | .title_rate { | 578 | .title_rate { |
| 579 | margin-left: 10rpx; | 579 | margin-left: 10rpx; |
| 580 | } | 580 | } |
| 581 | .evaluate_star { | 581 | .evaluate_star { |
| 582 | width: 90px; | 582 | width: 90px; |
| 583 | display: flex; | 583 | display: flex; |
| 584 | align-items: center; | 584 | align-items: center; |
| 585 | justify-content: space-between; | 585 | justify-content: space-between; |
| 586 | } | 586 | } |
| 587 | view { | 587 | view { |
| 588 | font-size: 14px; | 588 | font-size: 14px; |
| 589 | color: #333333; | 589 | color: #333333; |
| 590 | font-weight: bold; | 590 | font-weight: bold; |
| 591 | } | 591 | } |
| 592 | } | 592 | } |
| 593 | .evaluate_tag { | 593 | .evaluate_tag { |
| 594 | view { | 594 | view { |
| 595 | display: inline-block; | 595 | display: inline-block; |
| 596 | margin-right: 20rpx; | 596 | margin-right: 20rpx; |
| 597 | min-width: 180rpx; | 597 | min-width: 180rpx; |
| 598 | margin-top: 10px; | 598 | margin-top: 10px; |
| 599 | height: 48rpx; | 599 | height: 48rpx; |
| 600 | background: #f2f2f2; | 600 | background: #f2f2f2; |
| 601 | border-radius: 2px; | 601 | border-radius: 2px; |
| 602 | font-family: PingFangSC-Regular; | 602 | font-family: PingFangSC-Regular; |
| 603 | font-size: 12px; | 603 | font-size: 12px; |
| 604 | color: #666666; | 604 | color: #666666; |
| 605 | letter-spacing: -0.23px; | 605 | letter-spacing: -0.23px; |
| 606 | text-align: center; | 606 | text-align: center; |
| 607 | padding: 0 48rpx; | 607 | padding: 0 48rpx; |
| 608 | line-height: 48rpx; | 608 | line-height: 48rpx; |
| 609 | } | 609 | } |
| 610 | } | 610 | } |
| 611 | } | 611 | } |
| 612 | // 商品详情 | 612 | // 商品详情 |
| 613 | .more_info { | 613 | .more_info { |
| 614 | .more_fixed1 { | 614 | .more_fixed1 { |
| 615 | display: flex; | 615 | display: flex; |
| 616 | justify-content: space-between; | 616 | justify-content: space-between; |
| 617 | align-content: center; | 617 | align-content: center; |
| 618 | margin-bottom: 12px; | 618 | margin-bottom: 12px; |
| 619 | view { | 619 | view { |
| 620 | font-size: 14px; | 620 | font-size: 14px; |
| 621 | color: #333333; | 621 | color: #333333; |
| 622 | font-weight: bold; | 622 | font-weight: bold; |
| 623 | font-family: "PingFangSC-Medium"; | 623 | font-family: "PingFangSC-Medium"; |
| 624 | line-height: 24px; | 624 | line-height: 24px; |
| 625 | } | 625 | } |
| 626 | image { | 626 | image { |
| 627 | width: 240rpx; | 627 | width: 240rpx; |
| 628 | height: 3px; | 628 | height: 3px; |
| 629 | margin-top: 10px; | 629 | margin-top: 10px; |
| 630 | } | 630 | } |
| 631 | } | 631 | } |
| 632 | .more_all { | 632 | .more_all { |
| 633 | width: 100%; | 633 | width: 100%; |
| 634 | margin-top: 30rpx; | 634 | margin-top: 30rpx; |
| 635 | margin-right: 30rpx; | 635 | margin-right: 30rpx; |
| 636 | margin-bottom: 180rpx; | 636 | margin-bottom: 180rpx; |
| 637 | font-family: "PingFangSC-Regular"; | 637 | font-family: "PingFangSC-Regular"; |
| 638 | } | 638 | } |
| 639 | } | 639 | } |
| 640 | // 菜单 | 640 | // 菜单 |
| 641 | .menu { | 641 | .menu { |
| 642 | position: fixed; | 642 | position: fixed; |
| 643 | bottom: 0; | 643 | bottom: 0; |
| 644 | min-height: 74px; | 644 | min-height: 74px; |
| 645 | width: 100%; | 645 | width: 100%; |
| 646 | background: #ffffff; | 646 | background: #ffffff; |
| 647 | padding: 20px 20px 8px 20px; | 647 | padding: 20px 20px 8px 20px; |
| 648 | font-family: "PingFangSC-Regular"; | 648 | font-family: "PingFangSC-Regular"; |
| 649 | box-sizing: border-box; | 649 | box-sizing: border-box; |
| 650 | display: flex; | 650 | display: flex; |
| 651 | justify-content: space-between; | 651 | justify-content: space-between; |
| 652 | align-content: center; | 652 | align-content: center; |
| 653 | margin: 0; | 653 | margin: 0; |
| 654 | /* iphonex 等安全区设置，底部安全区适配 */ | 654 | /* iphonex 等安全区设置，底部安全区适配 */ |
| 655 | /* #ifndef APP-NVUE */ | 655 | /* #ifndef APP-NVUE */ |
| 656 | padding-bottom: constant(safe-area-inset-bottom); | 656 | padding-bottom: constant(safe-area-inset-bottom); |
| 657 | padding-bottom: env(safe-area-inset-bottom); | 657 | padding-bottom: env(safe-area-inset-bottom); |
| 658 | .menu_1 { | 658 | .menu_1 { |
| 659 | width: 20%; | 659 | width: 20%; |
| 660 | height: 100%; | 660 | height: 100%; |
| 661 | text-align: center; | 661 | text-align: center; |
| 662 | color: #989898; | 662 | color: #989898; |
| 663 | .cart_icon { | 663 | .cart_icon { |
| 664 | position: relative; | 664 | position: relative; |
| 665 | text { | 665 | text { |
| 666 | position: absolute; | 666 | position: absolute; |
| 667 | color: white; | 667 | color: white; |
| 668 | font-size: 17px; | 668 | font-size: 17px; |
| 669 | background-color: red; | 669 | background-color: red; |
| 670 | min-height: 24px; | 670 | min-height: 24px; |
| 671 | min-width: 24px; | 671 | min-width: 24px; |
| 672 | line-height: 24px; | 672 | line-height: 24px; |
| 673 | right: -12%; | 673 | right: -12%; |
| 674 | top: -12px; | 674 | top: -12px; |
| 675 | text-align: center; | 675 | text-align: center; |
| 676 | border-radius: 24px; | 676 | border-radius: 24px; |
| 677 | padding: 2px; | 677 | padding: 2px; |
| 678 | } | 678 | } |
| 679 | } | 679 | } |
| 680 | } | 680 | } |
| 681 | image { | 681 | image { |
| 682 | width: 42%; | 682 | width: 42%; |
| 683 | height: 26px; | 683 | height: 26px; |
| 684 | } | 684 | } |
| 685 | .menu_image { | 685 | .menu_image { |
| 686 | font-size: 12px; | 686 | font-size: 12px; |
| 687 | text-align: center; | 687 | text-align: center; |
| 688 | } | 688 | } |
| 689 | .menu_2 { | 689 | .menu_2 { |
| 690 | width: 74%; | 690 | width: 74%; |
| 691 | height: 80rpx; | 691 | height: 80rpx; |
| 692 | display: grid; | 692 | display: grid; |
| 693 | grid-template-columns: 50% 50%; | 693 | grid-template-columns: 50% 50%; |
| 694 | } | 694 | } |
| 695 | .menu_input { | 695 | .menu_input { |
| 696 | display: inline-flex; | 696 | display: inline-flex; |
| 697 | align-items: center; | 697 | align-items: center; |
| 698 | justify-content: space-around; | 698 | justify-content: space-around; |
| 699 | background: #fff0ec; | 699 | background: #fff0ec; |
| 700 | font-size: 16px; | 700 | font-size: 16px; |
| 701 | color: #ff6b4a; | 701 | color: #ff6b4a; |
| 702 | border-radius: 20px 0 0 20px; | 702 | border-radius: 20px 0 0 20px; |
| 703 | } | 703 | } |
| 704 | .menu_now { | 704 | .menu_now { |
| 705 | display: inline-flex; | 705 | display: inline-flex; |
| 706 | align-items: center; | 706 | align-items: center; |
| 707 | justify-content: space-around; | 707 | justify-content: space-around; |
| 708 | background: #ff6b4a; | 708 | background: #ff6b4a; |
| 709 | font-size: 16px; | 709 | font-size: 16px; |
| 710 | color: #ffffff; | 710 | color: #ffffff; |
| 711 | border-radius: 0 20px 20px 0; | 711 | border-radius: 0 20px 20px 0; |
| 712 | } | 712 | } |
| 713 | } | 713 | } |
| 714 | } | 714 | } |
| 715 | </style> | 715 | </style> |
src/pages/index/index.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="container"> | 2 | <view class="container"> |
| 3 | <view | 3 | <view |
| 4 | class="content skeleton" | 4 | class="content skeleton" |
| 5 | v-show="showContent" | 5 | v-show="showContent" |
| 6 | > | 6 | > |
| 7 | <view class="header"> | 7 | <view class="header"> |
| 8 | <!-- 搜索--> | 8 | <!-- 搜索--> |
| 9 | <view class="searchBar skeleton-rect"> | 9 | <view class="searchBar skeleton-rect"> |
| 10 | <icon | 10 | <icon |
| 11 | class="searchIcon" | 11 | class="searchIcon" |
| 12 | type="search" | 12 | type="search" |
| 13 | size="14" | 13 | size="14" |
| 14 | ></icon> | 14 | ></icon> |
| 15 | <input | 15 | <input |
| 16 | v-model="searchText" | 16 | v-model="searchText" |
| 17 | class="searchIpt" | 17 | class="searchIpt" |
| 18 | placeholder="老花镜" | 18 | placeholder="老花镜" |
| 19 | confirm-type="search" | 19 | confirm-type="search" |
| 20 | @blur="searchKey" | 20 | @blur="searchKey" |
| 21 | /> | 21 | /> |
| 22 | </view> | 22 | </view> |
| 23 | 23 | ||
| 24 | <!-- 筛选栏--> | 24 | <!-- 筛选栏--> |
| 25 | <!-- <view class="screenBar"> | 25 | <!-- <view class="screenBar"> |
| 26 | <view | 26 | <view |
| 27 | v-for="item in screenItems" | 27 | v-for="item in screenItems" |
| 28 | :key="item.current" | 28 | :key="item.current" |
| 29 | @click="onClickItem(item.current)" | 29 | @click="onClickItem(item.current)" |
| 30 | > | 30 | > |
| 31 | <view | 31 | <view |
| 32 | class="screenItem" | 32 | class="screenItem" |
| 33 | v-bind:class="{ active: current === item.current }" | 33 | v-bind:class="{ active: current === item.current }" |
| 34 | v-if="item.current === 2" | 34 | v-if="item.current === 2" |
| 35 | @click="dropDown" | 35 | @click="dropDown" |
| 36 | > | 36 | > |
| 37 | {{ item.text }} | 37 | {{ item.text }} |
| 38 | <icon | 38 | <icon |
| 39 | type="info" | 39 | type="info" |
| 40 | size="14" | 40 | size="14" |
| 41 | ></icon> | 41 | ></icon> |
| 42 | </view> | 42 | </view> |
| 43 | <view | 43 | <view |
| 44 | class="screenItem" | 44 | class="screenItem" |
| 45 | v-bind:class="{ active: current === item.current }" | 45 | v-bind:class="{ active: current === item.current }" |
| 46 | v-if="item.current === 4" | 46 | v-if="item.current === 4" |
| 47 | @click="showDrawer('showRight')" | 47 | @click="showDrawer('showRight')" |
| 48 | > | 48 | > |
| 49 | {{ item.text }} | 49 | {{ item.text }} |
| 50 | <icon | 50 | <icon |
| 51 | type="info" | 51 | type="info" |
| 52 | size="14" | 52 | size="14" |
| 53 | ></icon> | 53 | ></icon> |
| 54 | </view> | 54 | </view> |
| 55 | <view v-if="item.current !== 2&&item.current!==4"> | 55 | <view v-if="item.current !== 2&&item.current!==4"> |
| 56 | <view | 56 | <view |
| 57 | class="screenItem" | 57 | class="screenItem" |
| 58 | v-bind:class="{ active: current === item.current }" | 58 | v-bind:class="{ active: current === item.current }" |
| 59 | >{{ item.text }}</view> | 59 | >{{ item.text }}</view> |
| 60 | </view> | 60 | </view> |
| 61 | </view> | 61 | </view> |
| 62 | </view> --> | 62 | </view> --> |
| 63 | </view> | 63 | </view> |
| 64 | <Uni-drawer | 64 | <Uni-drawer |
| 65 | ref="showRight" | 65 | ref="showRight" |
| 66 | mask="true" | 66 | mask="true" |
| 67 | maskClick="true" | 67 | maskClick="true" |
| 68 | mode="right" | 68 | mode="right" |
| 69 | :width="320" | 69 | :width="320" |
| 70 | @change="change($event,'showRight')" | 70 | @change="change($event,'showRight')" |
| 71 | > | 71 | > |
| 72 | <view class="close"> | 72 | <view class="close"> |
| 73 | <view @click="closeDrawer('showRight')"> | 73 | <view @click="closeDrawer('showRight')"> |
| 74 | <text class="word-btn-white">关闭</text> | 74 | <text class="word-btn-white">关闭</text> |
| 75 | </view> | 75 | </view> |
| 76 | </view> | 76 | </view> |
| 77 | </Uni-drawer> | 77 | </Uni-drawer> |
| 78 | 78 | ||
| 79 | <!-- 筛选菜单--> | 79 | <!-- 筛选菜单--> |
| 80 | <view class="content-wrap skeleton-rect"> | 80 | <view class="content-wrap skeleton-rect"> |
| 81 | <view> | 81 | <view> |
| 82 | <HMfilterDropdown | 82 | <HMfilterDropdown |
| 83 | :filterData="categoryList" | 83 | :filterData="categoryList" |
| 84 | :defaultSelected="filterDropdownValue" | 84 | :defaultSelected="filterDropdownValue" |
| 85 | :updateMenuName="true" | 85 | :updateMenuName="true" |
| 86 | @search="search" | 86 | @search="search" |
| 87 | @getList="getList" | 87 | @getList="getList" |
| 88 | data-format="Object" | 88 | data-format="Object" |
| 89 | ></HMfilterDropdown> | 89 | ></HMfilterDropdown> |
| 90 | <!-- 商品列表 --> | 90 | <!-- 商品列表 --> |
| 91 | <!-- <scroll-view | 91 | <!-- <scroll-view |
| 92 | enable-flex | 92 | enable-flex |
| 93 | @scrolltolower="handleScrolltolower" | 93 | @scrolltolower="handleScrolltolower" |
| 94 | scroll-y | 94 | scroll-y |
| 95 | style="height: 1000px;margin-bottom: 20px;" | 95 | style="height: 1000px;margin-bottom: 20px;" |
| 96 | > --> | 96 | > --> |
| 97 | <view class="goods-list"> | 97 | <view class="goods-list"> |
| 98 | <view class="product-list"> | 98 | <view class="product-list"> |
| 99 | <view | 99 | <view |
| 100 | class="product skeleton-rect" | 100 | class="product skeleton-rect" |
| 101 | v-for="(goods) in goodsList" | 101 | v-for="(goods) in goodsList" |
| 102 | :key="goods.id" | 102 | :key="goods.id" |
| 103 | > | 103 | > |
| 104 | <Card | 104 | <Card |
| 105 | :goods="goods" | 105 | :goods="goods" |
| 106 | :scrollTop="scrollTop" | 106 | :scrollTop="scrollTop" |
| 107 | :viewHeight="viewHeight" | 107 | :viewHeight="viewHeight" |
| 108 | ></Card> | 108 | ></Card> |
| 109 | </view> | 109 | </view> |
| 110 | </view> | 110 | </view> |
| 111 | <view class="loading-text"> | 111 | <view class="loading-text"> |
| 112 | <text v-if="isLoading==true">{{loadingText}}</text> | 112 | <text v-if="isLoading==true">{{loadingText}}</text> |
| 113 | <text v-else>{{loadedText}}</text> | 113 | <text v-else>{{loadedText}}</text> |
| 114 | </view> | 114 | </view> |
| 115 | </view> | 115 | </view> |
| 116 | <!-- </scroll-view> --> | 116 | <!-- </scroll-view> --> |
| 117 | </view> | 117 | </view> |
| 118 | </view> | 118 | </view> |
| 119 | </view> | 119 | </view> |
| 120 | <!--引用组件--> | 120 | <!--引用组件--> |
| 121 | <skeleton | 121 | <skeleton |
| 122 | :show="showSkeleton" | 122 | :show="showSkeleton" |
| 123 | ref="skeleton" | 123 | ref="skeleton" |
| 124 | loading="chiaroscuro" | 124 | loading="chiaroscuro" |
| 125 | selector="skeleton" | 125 | selector="skeleton" |
| 126 | bgcolor="#FFF" | 126 | bgcolor="#FFF" |
| 127 | ></skeleton> | 127 | ></skeleton> |
| 128 | </view> | 128 | </view> |
| 129 | </template> | 129 | </template> |
| 130 | 130 | ||
| 131 | <script> | 131 | <script> |
| 132 | import UniDrawer from '@/components/UniDrawer/UniDrawer.vue' | 132 | import UniDrawer from '@/components/UniDrawer/UniDrawer.vue' |
| 133 | import Card from '@/components/CommodityCard/CommodityCard.vue' | 133 | import Card from '@/components/CommodityCard/CommodityCard.vue' |
| 134 | import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue' | 134 | import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue' |
| 135 | import skeleton from '@/components/quick-skeleton/quick-skeleton.vue' | 135 | import skeleton from '@/components/quick-skeleton/quick-skeleton.vue' |
| 136 | import store from '@/store' | 136 | import store from '@/store' |
| 137 | 137 | ||
| 138 | export default { | 138 | export default { |
| 139 | components: { | 139 | components: { |
| 140 | UniDrawer: UniDrawer, | 140 | UniDrawer: UniDrawer, |
| 141 | HMfilterDropdown: HMfilterDropdown, | 141 | HMfilterDropdown: HMfilterDropdown, |
| 142 | Card: Card, | 142 | Card: Card, |
| 143 | skeleton: skeleton, | 143 | skeleton: skeleton, |
| 144 | }, | 144 | }, |
| 145 | data() { | 145 | data() { |
| 146 | return { | 146 | return { |
| 147 | indexArr: '', | 147 | indexArr: '', |
| 148 | valueArr: '', | 148 | valueArr: '', |
| 149 | isLoading: true, // 初始化加载状态 | 149 | isLoading: true, // 初始化加载状态 |
| 150 | loadingText: 'data loading...', | 150 | loadingText: 'data loading...', |
| 151 | loadedText: '~~暂无更多数据~~', | 151 | loadedText: '~~暂无更多数据~~', |
| 152 | filterDropdownValue: [], | 152 | filterDropdownValue: [], |
| 153 | filterData: [], | 153 | filterData: [], |
| 154 | searchText: '', | 154 | searchText: '', |
| 155 | scrollTop: 0, | 155 | scrollTop: 0, |
| 156 | showContent: true, | 156 | showContent: true, |
| 157 | viewHeight: uni.getSystemInfoSync().windowHeight, | 157 | viewHeight: uni.getSystemInfoSync().windowHeight, |
| 158 | showSkeleton: false, // 骨架屏显示隐藏 | 158 | showSkeleton: false, // 骨架屏显示隐藏 |
| 159 | } | 159 | } |
| 160 | }, | 160 | }, |
| 161 | onPageScroll({ scrollTop }) { | 161 | onPageScroll({ scrollTop }) { |
| 162 | // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 | 162 | // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 |
| 163 | this.scrollTop = scrollTop | 163 | this.scrollTop = scrollTop |
| 164 | }, | 164 | }, |
| 165 | computed: { | 165 | computed: { |
| 166 | goodsList() { | 166 | goodsList() { |
| 167 | // 也可以从 getters 获取 | 167 | // 也可以从 getters 获取 |
| 168 | // console.log('index-list=====>',this.$store.state.index.list) | 168 | // console.log('index-list=====>',this.$store.state.index.list) |
| 169 | const list = this.$store.state.index.list | 169 | const list = this.$store.state.index.list |
| 170 | if (list.length == 0) { | 170 | if (list.length == 0) { |
| 171 | this.isLoading = false | 171 | this.isLoading = false |
| 172 | } | 172 | } |
| 173 | this.scrollTop = 0.1 | 173 | this.scrollTop = 0.1 |
| 174 | return list | 174 | return list |
| 175 | }, | 175 | }, |
| 176 | categoryList() { | 176 | categoryList() { |
| 177 | return this.$store.state.index.categoryList | 177 | return this.$store.state.index.categoryList |
| 178 | }, | 178 | }, |
| 179 | }, | 179 | }, |
| 180 | filters: { | 180 | filters: { |
| 181 | outData(value) { | 181 | outData(value) { |
| 182 | return JSON.stringify(value) | 182 | return JSON.stringify(value) |
| 183 | }, | 183 | }, |
| 184 | }, | 184 | }, |
| 185 | /** | 185 | /** |
| 186 | * 页面载入完成后调用子组件的方法生成预加载效果 | 186 | * 页面载入完成后调用子组件的方法生成预加载效果 |
| 187 | */ | 187 | */ |
| 188 | onReady: function() { | 188 | onReady: function() { |
| 189 | this.getInitData() | 189 | this.getInitData() |
| 190 | }, | 190 | }, |
| 191 | methods: { | 191 | methods: { |
| 192 | async getInitData () { | 192 | async getInitData () { |
| 193 | this.showSkeleton = true | 193 | this.showSkeleton = true |
| 194 | await Promise.all([store.dispatch('index/category'), store.dispatch('index/list')]) | 194 | await Promise.all([store.dispatch('index/category'), store.dispatch('index/list')]) |
| 195 | this.showSkeleton = false | 195 | this.showSkeleton = false |
| 196 | this.showContent = true | 196 | this.showContent = true |
| 197 | }, | 197 | }, |
| 198 | showDrawer(e) { | 198 | showDrawer(e) { |
| 199 | this.$refs[e].open() | 199 | this.$refs[e].open() |
| 200 | }, | 200 | }, |
| 201 | // 朋友圈设置页面 | ||
| 202 | onShareAppMessage() { | ||
| 203 | let myName = this.$store.state.user.userInfo.nickName | ||
| 204 | if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') { | ||
| 205 | myName = '【神秘人】' | ||
| 206 | } else { | ||
| 207 | myName = '【' + myName + '】' | ||
| 208 | } | ||
| 209 | return { | ||
| 210 | title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等) | ||
| 211 | path: '/pages/index/index', | ||
| 212 | // imageUrl: '/static/img/details/d1.png', // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 | ||
| 213 | success: function (res) { | ||
| 214 | if (res.errMsg === 'shareAppMessage:ok') { | ||
| 215 | console.log('分享成功！', res) | ||
| 216 | } | ||
| 217 | }, | ||
| 218 | fail: function (res) { | ||
| 219 | if (res.errMsg === 'shareAppMessage:fail cancel') { | ||
| 220 | console.log('fail', '放弃分享') | ||
| 221 | } else if (res.errMsg === 'shareAppMessage:fail') { | ||
| 222 | console.log('fail', '分享失败') | ||
| 223 | } | ||
| 224 | }, | ||
| 225 | } | ||
| 226 | }, | ||
| 201 | getList() { | 227 | getList() { |
| 202 | store.dispatch('index/list') | 228 | store.dispatch('index/list') |
| 203 | this.isLoading = false // TODO:::这里不知道怎么改，请同学帮忙写一下。 | 229 | this.isLoading = false // TODO:::这里不知道怎么改，请同学帮忙写一下。 |
| 204 | // 把data里的isLoading 改为false就可以了 | 230 | // 把data里的isLoading 改为false就可以了 |
| 205 | }, | 231 | }, |
| 206 | // search(params) { | 232 | // search(params) { |
| 207 | // this.$store.index. | 233 | // this.$store.index. |
| 208 | // }, | 234 | // }, |
| 209 | closeDrawer(e) { | 235 | closeDrawer(e) { |
| 210 | this.$refs[e].close() | 236 | this.$refs[e].close() |
| 211 | }, | 237 | }, |
| 212 | change(e, type) { | 238 | change(e, type) { |
| 213 | this[type] = e | 239 | this[type] = e |
| 214 | }, | 240 | }, |
| 215 | onClickItem(e) { | 241 | onClickItem(e) { |
| 216 | if (this.current !== e) { | 242 | if (this.current !== e) { |
| 217 | this.current = e | 243 | this.current = e |
| 218 | } | 244 | } |
| 219 | }, | 245 | }, |
| 220 | dropDown() { | 246 | dropDown() { |
| 221 | console.log('下拉') | 247 | console.log('下拉') |
| 222 | }, | 248 | }, |
| 223 | searchKey(e) { | 249 | searchKey(e) { |
| 224 | const { value: keyword } = e.detail | 250 | const { value: keyword } = e.detail |
| 225 | this.keyWords = keyword | 251 | this.keyWords = keyword |
| 226 | store.dispatch('index/search', { | 252 | store.dispatch('index/search', { |
| 227 | params: {}, | 253 | params: {}, |
| 228 | keyword, | 254 | keyword, |
| 229 | }) | 255 | }) |
| 230 | }, | 256 | }, |
| 231 | // 接收菜单结果 | 257 | // 接收菜单结果 |
| 232 | search(e) { | 258 | search(e) { |
| 233 | const { on, value, selectedData } = e | 259 | const { on, value, selectedData } = e |
| 234 | let params = {} | 260 | let params = {} |
| 235 | const selectedPayload = {} | 261 | const selectedPayload = {} |
| 236 | for (const key in selectedData) { | 262 | for (const key in selectedData) { |
| 237 | if (Object.prototype.hasOwnProperty.call(selectedData, key)) { | 263 | if (Object.prototype.hasOwnProperty.call(selectedData, key)) { |
| 238 | selectedPayload[key] = selectedData[key].toString() | 264 | selectedPayload[key] = selectedData[key].toString() |
| 239 | } | 265 | } |
| 240 | } | 266 | } |
| 241 | if (on[0] === 1) { | 267 | if (on[0] === 1) { |
| 242 | // 若点击全部 | 268 | // 若点击全部 |
| 243 | this.searchText = '' | 269 | this.searchText = '' |
| 244 | store.dispatch('index/list') | 270 | store.dispatch('index/list') |
| 245 | } else { | 271 | } else { |
| 246 | for (let i = 1; i <= on.length; i++) { | 272 | for (let i = 1; i <= on.length; i++) { |
| 247 | // on[0]是全部 | 273 | // on[0]是全部 |
| 248 | if (on[i] === 1) { | 274 | if (on[i] === 1) { |
| 249 | // 若该选项被选中 | 275 | // 若该选项被选中 |
| 250 | if (this.categoryList[i].value === 'filter') { | 276 | if (this.categoryList[i].value === 'filter') { |
| 251 | params = { | 277 | params = { |
| 252 | ...selectedPayload, | 278 | ...selectedPayload, |
| 253 | ...params, | 279 | ...params, |
| 254 | } | 280 | } |
| 255 | } else if (this.categoryList[i].value === 'px') { | 281 | } else if (this.categoryList[i].value === 'px') { |
| 256 | params.orderby = value[i][0] | 282 | params.orderby = value[i][0] |
| 257 | } else { | 283 | } else { |
| 258 | params[`${this.categoryList[i].value}`] = value[i][0] | 284 | params[`${this.categoryList[i].value}`] = value[i][0] |
| 259 | } | 285 | } |
| 260 | } | 286 | } |
| 261 | } | 287 | } |
| 262 | store.dispatch('index/search', { | 288 | store.dispatch('index/search', { |
| 263 | params, | 289 | params, |
| 264 | keyword: this.keyWords, | 290 | keyword: this.keyWords, |
| 265 | }) | 291 | }) |
| 266 | } | 292 | } |
| 267 | }, | 293 | }, |
| 268 | }, | 294 | }, |
| 269 | } | 295 | } |
| 270 | </script> | 296 | </script> |
| 271 | 297 | ||
| 272 | <style lang="scss"> | 298 | <style lang="scss"> |
| 273 | .content, | 299 | .content, |
| 274 | .container { | 300 | .container { |
| 275 | display: flex; | 301 | display: flex; |
| 276 | flex-direction: column; | 302 | flex-direction: column; |
| 277 | align-items: center; | 303 | align-items: center; |
| 278 | justify-content: center; | 304 | justify-content: center; |
| 279 | width: 100%; | 305 | width: 100%; |
| 280 | } | 306 | } |
| 281 | .header { | 307 | .header { |
| 282 | display: flex; | 308 | display: flex; |
| 283 | flex-direction: column; | 309 | flex-direction: column; |
| 284 | align-items: center; | 310 | align-items: center; |
| 285 | justify-content: center; | 311 | justify-content: center; |
| 286 | background-color: #f7f6f6; | 312 | background-color: #f7f6f6; |
| 287 | height: 178rpx; | 313 | height: 178rpx; |
| 288 | width: 100%; | 314 | width: 100%; |
| 289 | z-index: 999; | 315 | z-index: 999; |
| 290 | position: fixed; | 316 | position: fixed; |
| 291 | top: 0; | 317 | top: 0; |
| 292 | left: 0; | 318 | left: 0; |
| 293 | } | 319 | } |
| 294 | .searchBar { | 320 | .searchBar { |
| 295 | width: 670rpx; | 321 | width: 670rpx; |
| 296 | display: flex; | 322 | display: flex; |
| 297 | justify-content: center; | 323 | justify-content: center; |
| 298 | align-items: center; | 324 | align-items: center; |
| 299 | box-sizing: border-box; | 325 | box-sizing: border-box; |
| 300 | padding: 0rpx 16rpx; | 326 | padding: 0rpx 16rpx; |
| 301 | border: 1px solid #ff6b4a; | 327 | border: 1px solid #ff6b4a; |
| 302 | border-radius: 8rpx; | 328 | border-radius: 8rpx; |
| 303 | background-color: #ffffff; | 329 | background-color: #ffffff; |
| 304 | } | 330 | } |
| 305 | 331 | ||
| 306 | .searchIpt { | 332 | .searchIpt { |
| 307 | height: 68rpx; | 333 | height: 68rpx; |
| 308 | width: 670rpx; | 334 | width: 670rpx; |
| 309 | padding: 16rpx; | 335 | padding: 16rpx; |
| 310 | font-size: 28rpx; | 336 | font-size: 28rpx; |
| 311 | box-sizing: border-box; | 337 | box-sizing: border-box; |
| 312 | } | 338 | } |
| 313 | .screenBar { | 339 | .screenBar { |
| 314 | width: 670rpx; | 340 | width: 670rpx; |
| 315 | height: 110rpx; | 341 | height: 110rpx; |
| 316 | display: flex; | 342 | display: flex; |
| 317 | flex-direction: row; | 343 | flex-direction: row; |
| 318 | justify-content: space-between; | 344 | justify-content: space-between; |
| 319 | align-items: center; | 345 | align-items: center; |
| 320 | color: #333333; | 346 | color: #333333; |
| 321 | font-size: 32rpx; | 347 | font-size: 32rpx; |
| 322 | } | 348 | } |
| 323 | .active { | 349 | .active { |
| 324 | color: #ff6b4a; | 350 | color: #ff6b4a; |
| 325 | } | 351 | } |
| 326 | .screenItem { | 352 | .screenItem { |
| 327 | display: flex; | 353 | display: flex; |
| 328 | justify-content: center; | 354 | justify-content: center; |
| 329 | align-items: center; | 355 | align-items: center; |
| 330 | } | 356 | } |
| 331 | .content-wrap { | 357 | .content-wrap { |
| 332 | width: 100%; | 358 | width: 100%; |
| 333 | background-color: #ffffff; | 359 | background-color: #ffffff; |
| 334 | } | 360 | } |
| 335 | 361 | ||
| 336 | .HMfilterDropdown { | 362 | .HMfilterDropdown { |
| 337 | top: 178rpx !important; | 363 | top: 178rpx !important; |
| 338 | } | 364 | } |
| 339 | 365 | ||
| 340 | .goods-list { | 366 | .goods-list { |
| 341 | padding-top: 286rpx; | 367 | padding-top: 286rpx; |
| 342 | .loading-text { | 368 | .loading-text { |
| 343 | width: 100%; | 369 | width: 100%; |
| 344 | display: flex; | 370 | display: flex; |
| 345 | justify-content: center; | 371 | justify-content: center; |
| 346 | align-items: center; | 372 | align-items: center; |
| 347 | height: 30px; | 373 | height: 30px; |
| 348 | color: #979797; | 374 | color: #979797; |
| 349 | font-size: 12px; | 375 | font-size: 12px; |
| 350 | } | 376 | } |
| 351 | .product-list { | 377 | .product-list { |
| 352 | width: 92%; | 378 | width: 92%; |
| 353 | padding: 0 4% 3vw 4%; | 379 | padding: 0 4% 3vw 4%; |
| 354 | display: flex; | 380 | display: flex; |
| 355 | justify-content: space-between; | 381 | justify-content: space-between; |
| 356 | flex-wrap: wrap; | 382 | flex-wrap: wrap; |
| 357 | .product { | 383 | .product { |
| 358 | width: 48%; | 384 | width: 48%; |
| 359 | min-height: 120rpx; | 385 | min-height: 120rpx; |
| 360 | margin: 0 0 20rpx 0; | 386 | margin: 0 0 20rpx 0; |
| 361 | background: #ffffff; | 387 | background: #ffffff; |
| 362 | border: 1px solid #f2f2f2; | 388 | border: 1px solid #f2f2f2; |
| 363 | } | 389 | } |
| 364 | } | 390 | } |
| 365 | } | 391 | } |
| 366 | </style> | 392 | </style> |
| 367 | 393 |
src/pages/user/user.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="wrap"> | 2 | <view class="wrap"> |
| 3 | <!-- 弹窗 --> | 3 | <!-- 弹窗 --> |
| 4 | <uni-popup | 4 | <uni-popup |
| 5 | ref="popup" | 5 | ref="popup" |
| 6 | type="center" | 6 | type="center" |
| 7 | > | 7 | > |
| 8 | <!-- 给一个左边弹窗的样式 --> | 8 | <!-- 给一个左边弹窗的样式 --> |
| 9 | <!-- 关闭弹窗按钮 --> | 9 | <!-- 关闭弹窗按钮 --> |
| 10 | <view | 10 | <view |
| 11 | class="closeBtn" | 11 | class="closeBtn" |
| 12 | @tap="this.$refs.popup.close()" | 12 | @tap="this.$refs.popup.close()" |
| 13 | >x</view> | 13 | >x</view> |
| 14 | <view | 14 | <view |
| 15 | class="popUpWrap" | 15 | class="popUpWrap" |
| 16 | v-if="whichTap==0" | 16 | v-if="whichTap==0" |
| 17 | > | 17 | > |
| 18 | <text>这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入驻。</text> | 18 | <text>这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入驻。</text> |
| 19 | 19 | ||
| 20 | <!-- 左 --> | 20 | <!-- 左 --> |
| 21 | <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> --> | 21 | <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> --> |
| 22 | <!-- 右 --> | 22 | <!-- 右 --> |
| 23 | <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> --> | 23 | <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> --> |
| 24 | </view> | 24 | </view> |
| 25 | <view | 25 | <view |
| 26 | class="popUpWrap" | 26 | class="popUpWrap" |
| 27 | v-if="whichTap==1" | 27 | v-if="whichTap==1" |
| 28 | > | 28 | > |
| 29 | <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text> | 29 | <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text> |
| 30 | </view> | 30 | </view> |
| 31 | <view | 31 | <view |
| 32 | class="popUpWrap" | 32 | class="popUpWrap" |
| 33 | v-if="whichTap==2" | 33 | v-if="whichTap==2" |
| 34 | > | 34 | > |
| 35 | <button @tap="chatOur(1)">客服1</button> | 35 | <button @tap="chatOur(1)">客服1</button> |
| 36 | <button @tap="chatOur(2)">客服2</button> | 36 | <button @tap="chatOur(2)">客服2</button> |
| 37 | </view> | 37 | </view> |
| 38 | </uni-popup> | 38 | </uni-popup> |
| 39 | <!-- <scroll-view | 39 | <!-- <scroll-view |
| 40 | enable-flex | 40 | enable-flex |
| 41 | @scrolltolower="handleScrolltolower" | 41 | @scrolltolower="handleScrolltolower" |
| 42 | scroll-y | 42 | scroll-y |
| 43 | style="height: 1000px;" | 43 | style="height: 1000px;" |
| 44 | > --> | 44 | > --> |
| 45 | <view | 45 | <view |
| 46 | v-if="isAuth" | 46 | v-if="isAuth" |
| 47 | class="content" | 47 | class="content" |
| 48 | > | 48 | > |
| 49 | <view class="userInfo"> | 49 | <view class="userInfo"> |
| 50 | <view class="info"> | 50 | <view class="info"> |
| 51 | <image | 51 | <image |
| 52 | :src="headerphoto" | 52 | :src="headerphoto" |
| 53 | mode="aspectFill" | 53 | mode="aspectFill" |
| 54 | ></image> | 54 | ></image> |
| 55 | <view class="infoText"> | 55 | <view class="infoText"> |
| 56 | <text class="userName">{{nickName}}</text> | 56 | <text class="userName">{{nickName}}</text> |
| 57 | </view> | 57 | </view> |
| 58 | </view> | 58 | </view> |
| 59 | <!-- <view class="service"> | 59 | <!-- <view class="service"> |
| 60 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> | 60 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> |
| 61 | </view> --> | 61 | </view> --> |
| 62 | </view> | 62 | </view> |
| 63 | <view | 63 | <view |
| 64 | class="myOpticsData" | 64 | class="myOpticsData" |
| 65 | @tap="toOpticsData" | 65 | @tap="toOpticsData" |
| 66 | > | 66 | > |
| 67 | <view class="left"> | 67 | <view class="left"> |
| 68 | <image | 68 | <image |
| 69 | src="../../static/img/user/dataWrite.png" | 69 | src="../../static/img/user/dataWrite.png" |
| 70 | mode="aspectFit" | 70 | mode="aspectFit" |
| 71 | ></image> | 71 | ></image> |
| 72 | <text>验光数据</text> | 72 | <text>验光数据</text> |
| 73 | </view> | 73 | </view> |
| 74 | <image | 74 | <image |
| 75 | src="../../static/right.png" | 75 | src="../../static/right.png" |
| 76 | mode="aspectFit" | 76 | mode="aspectFit" |
| 77 | ></image> | 77 | ></image> |
| 78 | </view> | 78 | </view> |
| 79 | <view class="myOrder"> | 79 | <view class="myOrder"> |
| 80 | <view class="orderHeader"> | 80 | <view class="orderHeader"> |
| 81 | <text>我的订单</text> | 81 | <text>我的订单</text> |
| 82 | <view | 82 | <view |
| 83 | class="btn" | 83 | class="btn" |
| 84 | @click="toMyOrder('10')" | 84 | @click="toMyOrder('10')" |
| 85 | > | 85 | > |
| 86 | 全部 | 86 | 全部 |
| 87 | <image | 87 | <image |
| 88 | src="../../static/right.png" | 88 | src="../../static/right.png" |
| 89 | mode="aspectFit" | 89 | mode="aspectFit" |
| 90 | ></image> | 90 | ></image> |
| 91 | </view> | 91 | </view> |
| 92 | </view> | 92 | </view> |
| 93 | <view class="orderBody"> | 93 | <view class="orderBody"> |
| 94 | <view | 94 | <view |
| 95 | class="item waitPay" | 95 | class="item waitPay" |
| 96 | @click="toMyOrder('0')" | 96 | @click="toMyOrder('0')" |
| 97 | > | 97 | > |
| 98 | <image | 98 | <image |
| 99 | src="../../static/img/user/waitDeliver.png" | 99 | src="../../static/img/user/waitDeliver.png" |
| 100 | mode="aspectFit" | 100 | mode="aspectFit" |
| 101 | ></image> | 101 | ></image> |
| 102 | <text>待付款</text> | 102 | <text>待付款</text> |
| 103 | </view> | 103 | </view> |
| 104 | <view | 104 | <view |
| 105 | class="item waitDeliver" | 105 | class="item waitDeliver" |
| 106 | @click="toMyOrder('1')" | 106 | @click="toMyOrder('1')" |
| 107 | > | 107 | > |
| 108 | <image | 108 | <image |
| 109 | src="../../static/img/user/waitPay.png" | 109 | src="../../static/img/user/waitPay.png" |
| 110 | mode="aspectFit" | 110 | mode="aspectFit" |
| 111 | ></image> | 111 | ></image> |
| 112 | <text>待收货</text> | 112 | <text>待收货</text> |
| 113 | </view> | 113 | </view> |
| 114 | <view | 114 | <view |
| 115 | class="item waitReceive" | 115 | class="item waitReceive" |
| 116 | @click="toMyOrder('2')" | 116 | @click="toMyOrder('2')" |
| 117 | > | 117 | > |
| 118 | <image | 118 | <image |
| 119 | src="../../static/img/user/waitReceive.png" | 119 | src="../../static/img/user/waitReceive.png" |
| 120 | mode="aspectFit" | 120 | mode="aspectFit" |
| 121 | ></image> | 121 | ></image> |
| 122 | <text>已完成</text> | 122 | <text>已完成</text> |
| 123 | </view> | 123 | </view> |
| 124 | <!-- <view class="item service" @click="toMyOrder('3')"> | 124 | <!-- <view class="item service" @click="toMyOrder('3')"> |
| 125 | <image src="../../static/img/user/refound.png" mode="aspectFit"></image> | 125 | <image src="../../static/img/user/refound.png" mode="aspectFit"></image> |
| 126 | <text>已评价</text> | 126 | <text>已评价</text> |
| 127 | </view> --> | 127 | </view> --> |
| 128 | </view> | 128 | </view> |
| 129 | </view> | 129 | </view> |
| 130 | <view class="someItem"> | 130 | <view class="someItem"> |
| 131 | <!-- <view class="item"> | 131 | <!-- <view class="item"> |
| 132 | <view class="left"> | 132 | <view class="left"> |
| 133 | <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> | 133 | <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> |
| 134 | <text>推广记录与收益</text> | 134 | <text>推广记录与收益</text> |
| 135 | </view> | 135 | </view> |
| 136 | <image src="../../static/right.png" mode="aspectFit"></image> | 136 | <image src="../../static/right.png" mode="aspectFit"></image> |
| 137 | </view> --> | 137 | </view> --> |
| 138 | <view class="item"> | 138 | <view |
| 139 | @tap="toAddress" | ||
| 140 | class="item" | ||
| 141 | > | ||
| 139 | <image | 142 | <image |
| 140 | src="../../static/address-icon.png" | 143 | src="../../static/address-icon.png" |
| 141 | mode="aspectFit" | 144 | mode="aspectFit" |
| 142 | ></image> | 145 | ></image> |
| 143 | <view class="left"> | 146 | <view class="left"> |
| 144 | <text @tap="toAddress">地址管理</text> | 147 | <text>地址管理</text> |
| 145 | <image | 148 | <image |
| 146 | class="image2" | 149 | class="image2" |
| 147 | src="../../static/right.png" | 150 | src="../../static/right.png" |
| 148 | mode="aspectFit" | 151 | mode="aspectFit" |
| 149 | ></image> | 152 | ></image> |
| 150 | </view> | 153 | </view> |
| 151 | 154 | ||
| 152 | </view> | 155 | </view> |
| 153 | <view class="item"> | 156 | <view |
| 157 | @tap="introduce" | ||
| 158 | class="item" | ||
| 159 | > | ||
| 154 | <image | 160 | <image |
| 155 | src="../../static/img/user/introduce.png" | 161 | src="../../static/img/user/introduce.png" |
| 156 | mode="aspectFit" | 162 | mode="aspectFit" |
| 157 | ></image> | 163 | ></image> |
| 158 | <view class="left"> | 164 | <view class="left"> |
| 159 | <text @tap="introduce">系统介绍</text> | 165 | <text>系统介绍</text> |
| 160 | <image | 166 | <image |
| 161 | src="../../static/right.png" | 167 | src="../../static/right.png" |
| 162 | mode="aspectFit" | 168 | mode="aspectFit" |
| 163 | ></image> | 169 | ></image> |
| 164 | </view> | 170 | </view> |
| 165 | </view> | 171 | </view> |
| 166 | <view class="item"> | 172 | <view |
| 173 | @tap="joinUs" | ||
| 174 | class="item" | ||
| 175 | > | ||
| 167 | <image | 176 | <image |
| 168 | src="../../static/img/user/joinUs.png" | 177 | src="../../static/img/user/joinUs.png" |
| 169 | mode="aspectFit" | 178 | mode="aspectFit" |
| 170 | ></image> | 179 | ></image> |
| 171 | <view class="left"> | 180 | <view class="left"> |
| 172 | <text @tap="joinUs">加入我们</text> | 181 | <text>加入我们</text> |
| 173 | <image | 182 | <image |
| 174 | src="../../static/right.png" | 183 | src="../../static/right.png" |
| 175 | mode="aspectFit" | 184 | mode="aspectFit" |
| 176 | ></image> | 185 | ></image> |
| 177 | </view> | 186 | </view> |
| 178 | </view> | 187 | </view> |
| 179 | <view class="item"> | 188 | <view class="item"> |
| 180 | <image | 189 | <image |
| 181 | src="../../static/img/user/service.png" | 190 | src="../../static/img/user/service.png" |
| 182 | mode="aspectFit" | 191 | mode="aspectFit" |
| 183 | ></image> | 192 | ></image> |
| 184 | <view class="left lastLeft"> | 193 | <view class="left lastLeft"> |
| 185 | <text>联系客服</text> | 194 | <text>联系客服</text> |
| 186 | <image | 195 | <image |
| 187 | src="../../static/right.png" | 196 | src="../../static/right.png" |
| 188 | mode="aspectFit" | 197 | mode="aspectFit" |
| 189 | ></image> | 198 | ></image> |
| 190 | </view> | 199 | </view> |
| 191 | </view> | 200 | </view> |
| 192 | </view> | 201 | </view> |
| 193 | <view class="recommend"> | 202 | <view class="recommend"> |
| 194 | <view class="title"> | 203 | <view class="title"> |
| 195 | <view class="line"></view> | 204 | <view class="line"></view> |
| 196 | <view class="text">精选推荐</view> | 205 | <view class="text">精选推荐</view> |
| 197 | <view class="line"></view> | 206 | <view class="line"></view> |
| 198 | </view> | 207 | </view> |
| 199 | <!-- 商品列表 --> | 208 | <!-- 商品列表 --> |
| 200 | <view class="goods-list"> | 209 | <view class="goods-list"> |
| 201 | <!-- <scroll-view | 210 | <!-- <scroll-view |
| 202 | enable-flex | 211 | enable-flex |
| 203 | @scrolltolower="handleScrolltolower" | 212 | @scrolltolower="handleScrolltolower" |
| 204 | scroll-y | 213 | scroll-y |
| 205 | class="product-list" | 214 | class="product-list" |
| 206 | > --> | 215 | > --> |
| 207 | <view class="product-list"> | 216 | <view class="product-list"> |
| 208 | <view | 217 | <view |
| 209 | class="product" | 218 | class="product" |
| 210 | v-for="(item, index) in userRecommandList" | 219 | v-for="(item, index) in userRecommandList" |
| 211 | :key="index" | 220 | :key="index" |
| 212 | > | 221 | > |
| 213 | <Card :goods="item" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card> | 222 | <Card |
| 223 | :goods="item" | ||
| 224 | :scrollTop="scrollTop" | ||
| 225 | :viewHeight="viewHeight" | ||
| 226 | ></Card> | ||
| 214 | </view> | 227 | </view> |
| 215 | </view> | 228 | </view> |
| 216 | <!-- </scroll-view> --> | 229 | <!-- </scroll-view> --> |
| 217 | <view class="loading-text">{{loadingText}}</view> | 230 | <view class="loading-text">{{loadingText}}</view> |
| 218 | </view> | 231 | </view> |
| 219 | </view> | 232 | </view> |
| 220 | </view> | 233 | </view> |
| 221 | <view | 234 | <view |
| 222 | v-else | 235 | v-else |
| 223 | class="auth" | 236 | class="auth" |
| 224 | > | 237 | > |
| 225 | <view class="icon"></view> | 238 | <view class="icon"></view> |
| 226 | <view class="divider"></view> | 239 | <view class="divider"></view> |
| 227 | <view class="title">申请获取以下权限</view> | 240 | <view class="title">申请获取以下权限</view> |
| 228 | <view class="text">获得您的公开信息(昵称、头像等)</view> | 241 | <view class="text">获得您的公开信息(昵称、头像等)</view> |
| 229 | <button | 242 | <button |
| 230 | type="primary" | 243 | type="primary" |
| 231 | open-type="getUserInfo" | 244 | open-type="getUserInfo" |
| 232 | @getuserinfo="onGotUserInfo" | 245 | @getuserinfo="onGotUserInfo" |
| 233 | >授权登陆</button> | 246 | >授权登陆</button> |
| 234 | </view> | 247 | </view> |
| 235 | <!-- </scroll-view> --> | 248 | <!-- </scroll-view> --> |
| 236 | </view> | 249 | </view> |
| 237 | </template> | 250 | </template> |
| 238 | 251 | ||
| 239 | <script> | 252 | <script> |
| 240 | import Card from '@/components/CommodityCard/CommodityCard.vue' | 253 | import Card from '@/components/CommodityCard/CommodityCard.vue' |
| 241 | import store from '@/store' | 254 | import store from '@/store' |
| 242 | import UniPopup from '@/components/UniPopup/uni-popup.vue' | 255 | import UniPopup from '@/components/UniPopup/uni-popup.vue' |
| 243 | 256 | ||
| 244 | export default { | 257 | export default { |
| 245 | components: { | 258 | components: { |
| 246 | Card, | 259 | Card, |
| 247 | UniPopup | 260 | UniPopup, |
| 248 | }, | 261 | }, |
| 249 | data() { | 262 | data() { |
| 250 | return { | 263 | return { |
| 251 | isAuth: true, // 是否显示授权页面, | 264 | isAuth: true, // 是否显示授权页面, |
| 252 | pagesnum: 1, // 分页请求初始值 | 265 | pagesnum: 1, // 分页请求初始值 |
| 253 | whichTap: 0 ,// 弹窗渲染选择条件 | 266 | whichTap: 0, // 弹窗渲染选择条件 |
| 254 | loadingText: '到底了', | 267 | loadingText: '到底了', |
| 255 | scrollTop: 0, | 268 | scrollTop: 0, |
| 256 | viewHeight: uni.getSystemInfoSync().windowHeight, | 269 | viewHeight: uni.getSystemInfoSync().windowHeight, |
| 257 | } | 270 | } |
| 258 | }, | 271 | }, |
| 259 | onPageScroll({scrollTop}) { | 272 | onPageScroll({ scrollTop }) { |
| 260 | // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 | 273 | // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 |
| 261 | this.scrollTop = scrollTop; | 274 | this.scrollTop = scrollTop |
| 262 | }, | 275 | }, |
| 263 | onLoad() { | 276 | onLoad() { |
| 264 | // 判断是否授权 | 277 | // 判断是否授权 |
| 265 | uni.getSetting({ | 278 | uni.getSetting({ |
| 266 | success(res) { | 279 | success(res) { |
| 267 | console.log('authSetting', res.authSetting) | 280 | console.log('authSetting', res.authSetting) |
| 268 | if (res.authSetting['scope.userInfo'] === true) { | 281 | if (res.authSetting['scope.userInfo'] === true) { |
| 269 | this.isAuth = true | 282 | this.isAuth = true |
| 270 | } else { | 283 | } else { |
| 271 | this.isAuth = false | 284 | this.isAuth = false |
| 272 | } | 285 | } |
| 273 | } | 286 | }, |
| 274 | }) | 287 | }) |
| 275 | store.dispatch('userRecommand/getRecommandList', { | 288 | store.dispatch('userRecommand/getRecommandList', { |
| 276 | uid: this.$store.state.user.userInfo.uid, | 289 | uid: this.$store.state.user.userInfo.uid, |
| 277 | openid: this.$store.state.user.userInfo.openid, | 290 | openid: this.$store.state.user.userInfo.openid, |
| 278 | page: this.pagesnum | 291 | page: this.pagesnum, |
| 279 | }) | 292 | }) |
| 280 | }, | 293 | }, |
| 281 | onReachBottom() { | 294 | onReachBottom() { |
| 282 | // console.log('usr-my',this.$store.state.user.userInfo) | 295 | // console.log('usr-my',this.$store.state.user.userInfo) |
| 283 | this.pagesnum++ | 296 | this.pagesnum++ |
| 284 | store.dispatch('userRecommand/getRecommandList', { | 297 | store.dispatch('userRecommand/getRecommandList', { |
| 285 | uid: this.$store.state.user.userInfo.uid, | 298 | uid: this.$store.state.user.userInfo.uid, |
| 286 | openid: this.$store.state.user.userInfo.openid, | 299 | openid: this.$store.state.user.userInfo.openid, |
| 287 | page: this.pagesnum | 300 | page: this.pagesnum, |
| 288 | }) | 301 | }) |
| 289 | }, | 302 | }, |
| 290 | computed: { | 303 | computed: { |
| 291 | nickName() { | 304 | nickName() { |
| 292 | return this.$store.state.user.userInfo.nickName | 305 | return this.$store.state.user.userInfo.nickName |
| 293 | }, | 306 | }, |
| 294 | headerphoto() { | 307 | headerphoto() { |
| 295 | return this.$store.state.user.userInfo.headerphoto | 308 | return this.$store.state.user.userInfo.headerphoto |
| 296 | }, | 309 | }, |
| 297 | userRecommandList() { | 310 | userRecommandList() { |
| 298 | console.log('userRecommandList=====>',this.$store.state.userRecommand.recommandList) | 311 | console.log('userRecommandList=====>', this.$store.state.userRecommand.recommandList) |
| 299 | return this.$store.state.userRecommand.recommandList | 312 | return this.$store.state.userRecommand.recommandList |
| 300 | } | 313 | }, |
| 301 | }, | 314 | }, |
| 302 | methods: { | 315 | methods: { |
| 303 | // 弹窗 | 316 | // 弹窗 |
| 304 | changeTap(item) { | 317 | changeTap(item) { |
| 305 | this.whichTap = item | 318 | this.whichTap = item |
| 306 | this.$refs.popup.open() | 319 | this.$refs.popup.open() |
| 307 | }, | 320 | }, |
| 308 | chatOur(item) { | 321 | chatOur(item) { |
| 309 | if (item === 1) { | 322 | if (item === 1) { |
| 310 | uni.makePhoneCall({ | 323 | uni.makePhoneCall({ |
| 311 | phoneNumber: 13376189297 // 客服1 电话 | 324 | phoneNumber: 13376189297, // 客服1 电话 |
| 312 | }) | 325 | }) |
| 313 | } else { | 326 | } else { |
| 314 | uni.makePhoneCall({ | 327 | uni.makePhoneCall({ |
| 315 | phoneNumber: 18014995101 // 客服2 电话 | 328 | phoneNumber: 18014995101, // 客服2 电话 |
| 316 | }) | 329 | }) |
| 317 | } | 330 | } |
| 318 | }, | 331 | }, |
| 319 | // 授权 | 332 | // 授权 |
| 320 | onGotUserInfo(e) { | 333 | onGotUserInfo(e) { |
| 321 | if (e.detail.errMsg === 'getUserInfo:ok') { | 334 | if (e.detail.errMsg === 'getUserInfo:ok') { |
| 322 | const { fromInfo } = this.$store.state.user | 335 | const { fromInfo } = this.$store.state.user |
| 323 | // 用户授权成功 | 336 | // 用户授权成功 |
| 324 | store.dispatch('user/getUserInfo', fromInfo) | 337 | store.dispatch('user/getUserInfo', fromInfo) |
| 325 | this.isAuth = true | 338 | this.isAuth = true |
| 326 | } | 339 | } |
| 327 | }, | 340 | }, |
| 328 | toAddress() { | 341 | toAddress() { |
| 329 | uni.navigateTo({ | 342 | uni.navigateTo({ |
| 330 | url: '../address/addressList', | 343 | url: '../address/addressList', |
| 331 | success: res => {}, | 344 | success: res => {}, |
| 332 | fail: () => {}, | 345 | fail: () => {}, |
| 333 | complete: () => {} | 346 | complete: () => {}, |
| 334 | }) | 347 | }) |
| 335 | }, | 348 | }, |
| 336 | introduce() { | 349 | introduce() { |
| 337 | uni.showModal({ | 350 | uni.showModal({ |
| 338 | content: '这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入住。', | 351 | content: '这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入住。', |
| 339 | showCancel: false | 352 | showCancel: false, |
| 340 | }) | 353 | }) |
| 341 | }, | 354 | }, |
| 342 | joinUs() { | 355 | joinUs() { |
| 343 | uni.showModal({ | 356 | uni.showModal({ |
| 344 | content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', | 357 | content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', |
| 345 | showCancel: false | 358 | showCancel: false, |
| 346 | }) | 359 | }) |
| 347 | }, | 360 | }, |
| 348 | toMyOrder(status) { | 361 | toMyOrder(status) { |
| 349 | uni.navigateTo({ | 362 | uni.navigateTo({ |
| 350 | url: `../myOrder/myOrder?status=${status}`, | 363 | url: `../myOrder/myOrder?status=${status}`, |
| 351 | success: res => {}, | 364 | success: res => {}, |
| 352 | fail: () => {}, | 365 | fail: () => {}, |
| 353 | complete: () => {} | 366 | complete: () => {}, |
| 354 | }) | 367 | }) |
| 355 | }, | 368 | }, |
| 356 | toOpticsData() { | 369 | toOpticsData() { |
| 357 | uni.navigateTo({ | 370 | uni.navigateTo({ |
| 358 | url: '../addOpticsData/addOpticsData' | 371 | url: '../addOpticsData/addOpticsData', |
| 359 | }) | 372 | }) |
| 360 | } | 373 | }, |
| 361 | } | 374 | }, |
| 362 | } | 375 | } |
| 363 | </script> | 376 | </script> |
| 364 | 377 | ||
| 365 | <style lang="scss"> | 378 | <style lang="scss"> |
| 366 | .warp { | 379 | .warp { |
| 367 | font-size: 24rpx; | 380 | font-size: 24rpx; |
| 368 | background-color: #f2f2f2; | 381 | background-color: #f2f2f2; |
| 369 | height: 100vh; | 382 | height: 100vh; |
| 370 | } | 383 | } |
| 371 | .content { | 384 | .content { |
| 372 | display: flex; | 385 | display: flex; |
| 373 | flex-direction: column; | 386 | flex-direction: column; |
| 374 | align-items: center; | 387 | align-items: center; |
| 375 | justify-content: center; | 388 | justify-content: center; |
| 376 | background-color: #f2f2f2; | 389 | background-color: #f2f2f2; |
| 377 | } | 390 | } |
| 378 | .userInfo { | 391 | .userInfo { |
| 379 | background-image: linear-gradient(270deg, #f79067 0%, #FF5F3B 66%); | 392 | background-image: linear-gradient(270deg, #f79067 0%, #ff5f3b 66%); |
| 380 | width: 100%; | 393 | width: 100%; |
| 381 | height: 240rpx; | 394 | height: 240rpx; |
| 382 | color: #ffffff; | 395 | color: #ffffff; |
| 383 | padding: 60rpx 82rpx 80rpx 44rpx; | 396 | padding: 60rpx 82rpx 80rpx 44rpx; |
| 384 | box-sizing: border-box; | 397 | box-sizing: border-box; |
| 385 | display: flex; | 398 | display: flex; |
| 386 | flex-direction: row; | 399 | flex-direction: row; |
| 387 | justify-content: space-between; | 400 | justify-content: space-between; |
| 388 | align-items: flex-start; | 401 | align-items: flex-start; |
| 389 | .info { | 402 | .info { |
| 390 | display: flex; | 403 | display: flex; |
| 391 | flex-direction: row; | 404 | flex-direction: row; |
| 392 | justify-content: space-between; | 405 | justify-content: space-between; |
| 393 | align-items: center; | 406 | align-items: center; |
| 394 | image { | 407 | image { |
| 395 | border-radius: 50rpx; | 408 | border-radius: 50rpx; |
| 396 | height: 100rpx; | 409 | height: 100rpx; |
| 397 | width: 100rpx; | 410 | width: 100rpx; |
| 398 | margin-right: 40rpx; | 411 | margin-right: 40rpx; |
| 399 | } | 412 | } |
| 400 | .infoText { | 413 | .infoText { |
| 401 | display: flex; | 414 | display: flex; |
| 402 | flex-direction: column; | 415 | flex-direction: column; |
| 403 | justify-content: space-between; | 416 | justify-content: space-between; |
| 404 | align-items: flex-scetart; | 417 | align-items: flex-scetart; |
| 405 | .userName { | 418 | .userName { |
| 406 | font-size: 18px; | 419 | font-size: 18px; |
| 407 | color: #ffffff; | 420 | color: #ffffff; |
| 408 | margin-bottom: 8rpx; | 421 | margin-bottom: 8rpx; |
| 409 | } | 422 | } |
| 410 | .nickName { | 423 | .nickName { |
| 411 | font-size: 12px; | 424 | font-size: 12px; |
| 412 | color: #ffffff; | 425 | color: #ffffff; |
| 413 | } | 426 | } |
| 414 | } | 427 | } |
| 415 | } | 428 | } |
| 416 | // .service { | 429 | // .service { |
| 417 | // margin-top: 20rpx; | 430 | // margin-top: 20rpx; |
| 418 | // image { | 431 | // image { |
| 419 | // height: 36rpx; | 432 | // height: 36rpx; |
| 420 | // width: 36rpx; | 433 | // width: 36rpx; |
| 421 | // } | 434 | // } |
| 422 | // } | 435 | // } |
| 423 | } | 436 | } |
| 424 | .myOpticsData { | 437 | .myOpticsData { |
| 425 | width: 670rpx; | 438 | width: 670rpx; |
| 426 | height: 120rpx; | 439 | height: 120rpx; |
| 427 | background-color: #ffffff; | 440 | background-color: #ffffff; |
| 428 | border-radius: 6px; | 441 | border-radius: 6px; |
| 429 | box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); | 442 | box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); |
| 430 | position: relative; | 443 | position: relative; |
| 431 | bottom: 44rpx; | 444 | bottom: 44rpx; |
| 432 | padding: 40rpx; | 445 | padding: 40rpx; |
| 433 | box-sizing: border-box; | 446 | box-sizing: border-box; |
| 434 | display: flex; | 447 | display: flex; |
| 435 | justify-content: space-between; | 448 | justify-content: space-between; |
| 436 | align-items: center; | 449 | align-items: center; |
| 437 | .left { | 450 | .left { |
| 438 | font-size: 14px; | 451 | font-size: 14px; |
| 439 | color: #333333; | 452 | color: #333333; |
| 440 | display: flex; | 453 | display: flex; |
| 441 | align-items: center; | 454 | align-items: center; |
| 442 | image { | 455 | image { |
| 443 | margin-right: 32rpx; | 456 | margin-right: 32rpx; |
| 444 | width: 40rpx; | 457 | width: 40rpx; |
| 445 | height: 44rpx; | 458 | height: 44rpx; |
| 446 | } | 459 | } |
| 447 | } | 460 | } |
| 448 | image { | 461 | image { |
| 449 | height: 16px; | 462 | height: 16px; |
| 450 | width: 8px; | 463 | width: 8px; |
| 451 | } | 464 | } |
| 452 | } | 465 | } |
| 453 | .myOrder { | 466 | .myOrder { |
| 454 | width: 100%; | 467 | width: 100%; |
| 455 | height: 296rpx; | 468 | height: 296rpx; |
| 456 | // margin-top: 116rpx; | 469 | // margin-top: 116rpx; |
| 457 | margin-bottom: 20rpx; | 470 | margin-bottom: 20rpx; |
| 458 | padding: 0 40rpx; | 471 | padding: 0 40rpx; |
| 459 | box-sizing: border-box; | 472 | box-sizing: border-box; |
| 460 | background: #ffffff; | 473 | background: #ffffff; |
| 461 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 474 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
| 462 | border-radius: 6px; | 475 | border-radius: 6px; |
| 463 | border-radius: 6px; | 476 | border-radius: 6px; |
| 464 | display: flex; | 477 | display: flex; |
| 465 | flex-direction: column; | 478 | flex-direction: column; |
| 466 | justify-content: space-around; | 479 | justify-content: space-around; |
| 467 | align-items: center; | 480 | align-items: center; |
| 468 | .orderHeader { | 481 | .orderHeader { |
| 469 | width: 100%; | 482 | width: 100%; |
| 470 | height: 100rpx; | 483 | height: 100rpx; |
| 471 | display: flex; | 484 | display: flex; |
| 472 | flex-direction: row; | 485 | flex-direction: row; |
| 473 | justify-content: space-between; | 486 | justify-content: space-between; |
| 474 | align-items: center; | 487 | align-items: center; |
| 475 | border-bottom: 1px solid #F5F5F5; | 488 | border-bottom: 1px solid #f5f5f5; |
| 476 | font-weight: bold; | 489 | font-weight: bold; |
| 477 | font-size: 18px; | 490 | font-size: 18px; |
| 478 | color: #333333; | 491 | color: #333333; |
| 479 | .btn { | 492 | .btn { |
| 480 | font-size: 12px; | 493 | font-size: 12px; |
| 481 | color: #999999; | 494 | color: #999999; |
| 482 | display: flex; | 495 | display: flex; |
| 483 | align-items: center; | 496 | align-items: center; |
| 484 | image { | 497 | image { |
| 485 | margin-left: 20rpx; | 498 | margin-left: 20rpx; |
| 486 | height: 32rpx; | 499 | height: 32rpx; |
| 487 | width: 16rpx; | 500 | width: 16rpx; |
| 488 | } | 501 | } |
| 489 | } | 502 | } |
| 490 | } | 503 | } |
| 491 | .orderBody { | 504 | .orderBody { |
| 492 | width: 100%; | 505 | width: 100%; |
| 493 | display: flex; | 506 | display: flex; |
| 494 | flex-direction: row; | 507 | flex-direction: row; |
| 495 | justify-content: space-around; | 508 | justify-content: space-around; |
| 496 | align-items: center; | 509 | align-items: center; |
| 497 | .item { | 510 | .item { |
| 498 | display: flex; | 511 | display: flex; |
| 499 | flex-direction: column; | 512 | flex-direction: column; |
| 500 | align-items: center; | 513 | align-items: center; |
| 501 | image { | 514 | image { |
| 502 | width: 62rpx; | 515 | width: 62rpx; |
| 503 | height: 46rpx; | 516 | height: 46rpx; |
| 504 | } | 517 | } |
| 505 | text { | 518 | text { |
| 506 | margin-top: 24rpx; | 519 | margin-top: 24rpx; |
| 507 | font-size: 12px; | 520 | font-size: 12px; |
| 508 | color: #333333; | 521 | color: #333333; |
| 509 | } | 522 | } |
| 510 | } | 523 | } |
| 511 | } | 524 | } |
| 512 | } | 525 | } |
| 513 | .someItem { | 526 | .someItem { |
| 514 | width: 100%; | 527 | width: 100%; |
| 515 | height: 336rpx; | 528 | height: 336rpx; |
| 516 | background: #ffffff; | 529 | background: #ffffff; |
| 517 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 530 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
| 518 | border-radius: 6px; | 531 | border-radius: 6px; |
| 519 | border-radius: 6px; | 532 | border-radius: 6px; |
| 520 | margin-bottom: 18rpx; | 533 | margin-bottom: 18rpx; |
| 521 | box-sizing: border-box; | 534 | box-sizing: border-box; |
| 522 | padding: 21rpx 48rpx 21rpx 42rpx; | 535 | padding: 21rpx 48rpx 21rpx 42rpx; |
| 523 | box-sizing: border-box; | 536 | box-sizing: border-box; |
| 524 | display: flex; | 537 | display: flex; |
| 525 | flex-direction: column; | 538 | flex-direction: column; |
| 526 | justify-content: space-between; | 539 | justify-content: space-between; |
| 527 | align-items: center; | 540 | align-items: center; |
| 528 | .item { | 541 | .item { |
| 529 | display: grid; | 542 | display: grid; |
| 530 | grid-template-columns: 10% 90%; | 543 | grid-template-columns: 10% 90%; |
| 531 | align-items: center; | 544 | align-items: center; |
| 532 | height: 72rpx; | 545 | height: 72rpx; |
| 533 | width: 100%; | 546 | width: 100%; |
| 534 | .left { | 547 | .left { |
| 535 | font-size: 14px; | 548 | font-size: 14px; |
| 536 | color: #333333; | 549 | color: #333333; |
| 537 | display: flex; | 550 | display: flex; |
| 538 | align-items: center; | 551 | align-items: center; |
| 539 | justify-content: space-between; | 552 | justify-content: space-between; |
| 540 | height: 72rpx; | 553 | height: 72rpx; |
| 541 | border-bottom: 1px solid #F2F2F2; | 554 | border-bottom: 1px solid #f2f2f2; |
| 542 | image { | 555 | image { |
| 543 | margin-right: 0; | 556 | margin-right: 0; |
| 544 | height: 16px; | 557 | height: 16px; |
| 545 | width: 8px; | 558 | width: 8px; |
| 546 | } | 559 | } |
| 547 | } | 560 | } |
| 548 | image { | 561 | image { |
| 549 | margin-right: 32rpx; | 562 | margin-right: 32rpx; |
| 550 | width: 40rpx; | 563 | width: 40rpx; |
| 551 | height: 44rpx; | 564 | height: 44rpx; |
| 552 | } | 565 | } |
| 553 | .lastLeft{ | 566 | .lastLeft { |
| 554 | border-bottom: none; | 567 | border-bottom: none; |
| 555 | } | 568 | } |
| 556 | } | 569 | } |
| 557 | } | 570 | } |
| 558 | .recommend { | 571 | .recommend { |
| 559 | background: #ffffff; | 572 | background: #ffffff; |
| 560 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 573 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
| 561 | border-radius: 6px; | 574 | border-radius: 6px; |
| 562 | border-radius: 6px; | 575 | border-radius: 6px; |
| 563 | width: 100%; | 576 | width: 100%; |
| 564 | .title { | 577 | .title { |
| 565 | display: flex; | 578 | display: flex; |
| 566 | flex-direction: row; | 579 | flex-direction: row; |
| 567 | align-items: center; | 580 | align-items: center; |
| 568 | justify-content: space-between; | 581 | justify-content: space-between; |
| 569 | padding: 20rpx 40rpx; | 582 | padding: 20rpx 40rpx; |
| 570 | .line { | 583 | .line { |
| 571 | width: 264rpx; | 584 | width: 264rpx; |
| 572 | height: 1rpx; | 585 | height: 1rpx; |
| 573 | border-bottom: 1px solid #eaeaea; | 586 | border-bottom: 1px solid #eaeaea; |
| 574 | } | 587 | } |
| 575 | .text { | 588 | .text { |
| 576 | font-family: PingFangSC-Medium; | 589 | font-family: PingFangSC-Medium; |
| 577 | font-size: 14px; | 590 | font-size: 14px; |
| 578 | color: #333333; | 591 | color: #333333; |
| 579 | letter-spacing: -0.26px; | 592 | letter-spacing: -0.26px; |
| 580 | text-align: justify; | 593 | text-align: justify; |
| 581 | line-height: 24px; | 594 | line-height: 24px; |
| 582 | } | 595 | } |
| 583 | } | 596 | } |
| 584 | .goods-list { | 597 | .goods-list { |
| 585 | .loading-text { | 598 | .loading-text { |
| 586 | width: 100%; | 599 | width: 100%; |
| 587 | display: flex; | 600 | display: flex; |
| 588 | justify-content: center; | 601 | justify-content: center; |
| 589 | align-items: center; | 602 | align-items: center; |
| 590 | height: 30px; | 603 | height: 30px; |
| 591 | color: #979797; | 604 | color: #979797; |
| 592 | font-size: 12px; | 605 | font-size: 12px; |
| 593 | } | 606 | } |
| 594 | .product-list { | 607 | .product-list { |
| 595 | width: 92%; | 608 | width: 92%; |
| 596 | padding: 0 4% 3vw 4%; | 609 | padding: 0 4% 3vw 4%; |
| 597 | display: flex; | 610 | display: flex; |
| 598 | justify-content: space-between; | 611 | justify-content: space-between; |
| 599 | flex-wrap: wrap; | 612 | flex-wrap: wrap; |
| 600 | .product { | 613 | .product { |
| 601 | width: 48%; | 614 | width: 48%; |
| 602 | margin: 0 0 20rpx 0; | 615 | margin: 0 0 20rpx 0; |
| 603 | background: #ffffff; | 616 | background: #ffffff; |
| 604 | border: 1px solid #f2f2f2; | 617 | border: 1px solid #f2f2f2; |
| 605 | } | 618 | } |
| 606 | } | 619 | } |
| 607 | } | 620 | } |
| 608 | } | 621 | } |
| 609 | .auth { | 622 | .auth { |
| 610 | height: 100vh; | 623 | height: 100vh; |
| 611 | display: flex; | 624 | display: flex; |
| 612 | flex-direction: column; | 625 | flex-direction: column; |
| 613 | align-items: center; | 626 | align-items: center; |
| 614 | .icon { | 627 | .icon { |
| 615 | width: 140rpx; | 628 | width: 140rpx; |
| 616 | height: 140rpx; | 629 | height: 140rpx; |
| 617 | border-radius: 50%; | 630 | border-radius: 50%; |
| 618 | margin-top: 100rpx; | 631 | margin-top: 100rpx; |
| 619 | background-color: grey; | 632 | background-color: grey; |
| 620 | } | 633 | } |
| 621 | .divider { | 634 | .divider { |
| 622 | height: 1rpx; | 635 | height: 1rpx; |
| 623 | width: 600rpx; | 636 | width: 600rpx; |
| 624 | margin-top: 80rpx; | 637 | margin-top: 80rpx; |
| 625 | background-color: #e6e3e3; | 638 | background-color: #e6e3e3; |
| 626 | } | 639 | } |
| 627 | .title { | 640 | .title { |
| 628 | width: 600rpx; | 641 | width: 600rpx; |
| 629 | margin-top: 50rpx; | 642 | margin-top: 50rpx; |
| 630 | text-align: left; | 643 | text-align: left; |
| 631 | } | 644 | } |
| 632 | .text { | 645 | .text { |
| 633 | width: 600rpx; | 646 | width: 600rpx; |
| 634 | margin-top: 30rpx; | 647 | margin-top: 30rpx; |
| 635 | text-align: left; | 648 | text-align: left; |
| 636 | color: #e6e3e3; | 649 | color: #e6e3e3; |
| 637 | } | 650 | } |
| 638 | button { | 651 | button { |
| 639 | width: 450rpx; | 652 | width: 450rpx; |
| 640 | height: 80rpx; | 653 | height: 80rpx; |
| 641 | line-height: 80rpx; | 654 | line-height: 80rpx; |
| 642 | margin-top: 80rpx; | 655 | margin-top: 80rpx; |
| 643 | border-radius: 30rpx; | 656 | border-radius: 30rpx; |
| 644 | } | 657 | } |
| 645 | } | 658 | } |
| 646 | .closeBtn { | 659 | .closeBtn { |
| 647 | height: 28rpx; | 660 | height: 28rpx; |
| 648 | width: 28rpx; | 661 | width: 28rpx; |
| 649 | // border: 1px solid red; | 662 | // border: 1px solid red; |
| 650 | position: absolute; | 663 | position: absolute; |
| 651 | top: 20rpx; | 664 | top: 20rpx; |
| 652 | right: 10rpx; | 665 | right: 10rpx; |
| 653 | } | 666 | } |
| 654 | </style> | 667 | </style> |
| 655 | 668 |