<template> <view class="place-order"> <custom-nav noback="noback" transparent="transparent" ref="ltm" title=" " /> <AddCart ref="addCart" /> <view class="content"> <scroll-view scroll-y :style="{ height: scrollviewHeight + 'px' }"> <view class="item" v-for="(item, index) in list" :key="index" @tap="tap(index)"> <image class="img" :src="item.main_img" mode="aspectFill"></image> <view class="info"> <view class="top ellipsis">{{ item.name }}</view> <view class="mid">¥{{ item.money }}/{{ item.unit }}</view> <view class="bot">{{ item.size.length }}个尺码可选</view> <view class="shopCar" @tap.stop="tapShopCar(item)"> <view v-if="item.cart.reduce((t, e) => t + e, 0)" class="sizeNum" style="font-size: 20rpx;"> {{ item.cart.reduce((t, e) => t + e, 0) }} </view> <text v-else class="cuIcon-cart"></text> </view> </view> </view> <!-- <view v-if="!goodsList.length" class="loading">{{ status }}</view> --> </scroll-view> <navigator open-type="navigate" url="../shop-car1/shop-car1" class="cart"> 购物车 <text v-if="cartNum" class="sizeNum">{{ cartNum }}</text> </navigator> </view> </view> </template> <script> import { deepClone } from '@/common/util/index.js' import { _API_GoodList, GetLimitGood } from '@/apis/good.js' import AddCart from '@/components/public/add-cart.vue' export default { components: { AddCart }, data() { return { image: [ 'http://look.qiniuyun.jiuweiyun.cn/daweiboshi-app/18afbb463c7e9a8aefa4883e726900f.jpg?imageMogr2/thumbnail/!40p', ], title: '订货下单', mode: 'square', goodsList: [], scrollviewHeight: 0, status: '加载中...' } }, computed: { userinfo() { return this.$store.state.userinfo }, list() { const temp = deepClone(this.goodsList) temp.forEach(goodItem => { goodItem.cart = Array(goodItem.size.length).fill(0) const itemInCart = this.$store.state.cart.list.find(e => e.attr_id === goodItem.attr_id) if (itemInCart) { Object.assign(goodItem, itemInCart) } }) return temp }, cartNum() { return this.$store.getters['cart/shopcarNum'] } }, mounted() { // 获取商品列表 this.$offset('.content').then(res => this.scrollviewHeight = res.height - uni.upx2px(98)) // 设置scrollview 高 if (this.$store.state.userinfo.user_type !== 3) { uni.navigateBack() setTimeout(() => uni.$emit('noopening')) return } //测试账号 if (this.$store.state.userinfo.mobile != 15866666666) { this.request() } }, onPullDownRefresh() { //测试账号 if (this.$store.state.userinfo.mobile != 15866666666) { this.request() } else { uni.stopPullDownRefresh() } // this.request() }, methods: { gosoap(type) { uni.navigateTo({ url: '../soap/index?type=' + type }) }, request() { uni.showLoading({ mask: true }) // 新款商品剩余数量 let residue = [0,0,0,0,0,0,0,0,0,0,0,0,0,0] // 剩余数量 // GetLimitGood().then(res => { // if (res.data.length) { // residue = res.data.map(item => (item.limit_num - item.num)) // 剩余数量 = 限制购买数量 - 已购买数量 // } // }) _API_GoodList().then(res => { if (res.code === 200) { let arr = res.data.list if (arr.length) { this.goodsList = arr.map(function(item) { if (item.name == '红色贺岁款(精装版)') { return {...item, residue: residue} } else { return item } }) } else { this.status = '暂无商品' } } else { uni.toast('网络好像出了点问题,下拉刷新试试') } uni.stopPullDownRefresh() }).catch(() => setTimeout(() => { uni.toast('网络好像出了点问题,下拉刷新试试') uni.stopPullDownRefresh() }, 123)) }, tap(index) { // 查看商品详情 uni.setStorageSync('ggg', JSON.stringify(this.goodsList[index])) uni.navigateTo({ url: `../good-detail1/good-detail1` }) }, tapShopCar(item) { // // 新款商品剩余数量 // let residue = [0,0,0,0,0,0,0,0,0,0,0,0,0,0] // 剩余数量 // GetLimitGood().then(res => { // if (res.data.length) { // residue = res.data.map(item => (item.limit_num - item.num)) // 剩余数量 = 限制购买数量 - 已购买数量 // if (item.name == '红色贺岁款(精装版)++') { // item.residue = residue // } // } // const arr = this.$store.state.cart.list // const i = arr.findIndex(item => item.name == '红色贺岁款(精装版)') // if (i != -1) { // this.$store.commit('cart/GETNEWGOODSNUM', residue) // } // }) this.$refs.addCart.show(deepClone(item)) } } } </script> <style lang="scss"> .place-order { @include page(); .soapNav { background-color: #fff; display: flex; align-items: center; padding: 24rpx; margin-bottom: 30rpx; &_flex { height: 150rpx; display: flex; justify-content: space-between; flex-direction: column; .text1 { font-size: 30rpx; font-weight: bold; } .text2 { display: block; width: 92rpx; height: 44rpx; color: #333333; line-height: 44rpx; text-align: center; background: #F5F5F5; border-radius: 4rpx 4rpx 4rpx 4rpx; } .text3 { font-size: 28rpx; color: #FB231F; } .text4 { font-size: 44rpx; font-weight: bold; color: #FB231F; } } } .content { .cart { height: 98rpx; @include flex(); color: $app-base-color; font-size: 36rpx; // background: $app-base-color; border-top: 1rpx solid #C0C0C0; background: #FFFFFF; position: relative; .sizeNum { @include flex(); position: absolute; font-size: 20rpx; left: 50%; margin-left: 48rpx; height: 32rpx; color: #FFFFFF; top: 24rpx; padding: 2rpx 8rpx; border-radius: 32rpx; background: #FF0000; } } .loading { text-align: center; margin-top: 567rpx; } .item { float: left; width: 100%; padding: 30rpx; box-sizing: border-box; background: #FFFFFF; margin-bottom: 20rpx; display: flex; justify-content: space-between; .img { height: 240rpx !important; width: 300rpx !important; margin-right: 23rpx; } .info { flex: 1; width: 100%; position: relative; @include flex(column); border-radius: 8rpx; align-items: flex-start; justify-content: space-around; .top { width: 100%; color: #181818; font-size: 28rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mid { font-size: 32rpx; color: $app-base-color; font-weight: bold; } .bot { font-size: 28rpx; color: #666666; } .shopCar { right: 0; bottom: 13rpx; width: 60rpx; height: 60rpx; color: #FFFFFF; @include flex(); font-size: 42rpx; position: absolute; border-radius: 50%; background: $app-base-color; } } } } } </style>