web-app/pages/place-order/place-order.vue

<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">{{ item.cart.reduce((t, e) => t + e, 0) }}</view>
							<text class="cuIcon-cart"></text>
						</view>
					</view>
				</view>
				<view v-if="!goodsList.length" class="loading">{{ status }}</view>
			</scroll-view>
			<navigator open-type="switchTab" 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 } from '@/apis/good.js'
	import AddCart from '@/components/public/add-cart.vue'
	export default {
		components: { AddCart },
		data() {
			return {
				title: '订货下单',
				mode: 'square',
				goodsList: [],
				scrollviewHeight: 0,
				status: '加载中...'
			}
		},
		computed: {
			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.level !== '代理公司') {
				uni.navigateBack()
				setTimeout(() => uni.$emit('noopening'))
				return
			}
			this.request()
		},
		onPullDownRefresh() {
			this.request()
		},
		methods: {
			request() {
				uni.showLoading({ mask: true })
				_API_GoodList().then(res => {
					if (res.code === 200) {
						this.goodsList = res.data.list
						console.log(this.goodsList)
						if (!this.goodsList.length) {
							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) {
				this.$refs.addCart.show(deepClone(item))
			}
		}
	}
</script>

<style lang="scss">
	.place-order {
		@include page();
		.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: 330rpx;
				height: 380rpx;
				margin-top: 20rpx;
				margin-left: 30rpx;
				background: #FFFFFF;
				align-items: flex-end;
				@include flex(column);
				.img {
					height: 220rpx;
					width: 100%;
				}
				.info {
					flex: 1;
					width: 100%;
					margin-left: 12rpx;
					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: 24rpx;
						bottom: 13rpx;
						width: 60rpx;
						height: 60rpx;
						color: #FFFFFF;
						@include flex();
						font-size: 42rpx;
						position: absolute;
						border-radius: 50%;
						background: $app-base-color;
					}
				}
			}
		}
	}
</style>