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)"
				>
					<view class="img">
						<image :src="item.main_img"></image>
					</view>
					<view class="info">
						<view class="top ellipsis">{{ item.name }}</view>
						<view class="mid">￥{{ item.money }}.00/{{ item.unit }}</view>
						<view class="bot">
							<text>{{ item.size.length }}个尺码可选</text>
							<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>
				<view v-if="!goodsList.length" class="loading">加载中...</view>
			</scroll-view>
		</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
			}
		},
		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.id === goodItem.id)
					if (itemInCart) {
						Object.assign(goodItem, itemInCart)
					}
				})
				return temp
			}
		},
		mounted() { // 获取商品列表
			this.$offset('.content').then(res => this.scrollviewHeight = res.height) // 设置scrollview 高
			if (this.$store.state.userinfo.level !== '代理公司') {
				uni.navigateBack()
				setTimeout(() => uni.$emit('noopening'))
				return
			}
			this.request()
		},
		methods: {
			request() {
				uni.showLoading({ mask: true })
				_API_GoodList().then(res => {
					if (res.code === 200) {
						this.goodsList = res.data.list
					} else {
						uni.toast('网络好像出了点问题，下拉刷新试试')
					}
				}).catch(() => setTimeout(() => uni.toast('网络好像出了点问题，下拉刷新试试'), 123))
			},
			tap(index) { // 查看商品详情
				// if (this.$store.state.userinfo.level === '销售主管') {
				// 	uni.toast('销售主管不能通过App下单')
				// } else {
				uni.navigateTo({ url: `../good-detail1/good-detail1?data=${JSON.stringify(this.goodsList[index])}` })
				// }
				// console.log()
			},
			tapShopCar(item) {
				this.$refs.addCart.show(deepClone(item))
			}
		}
	}
</script>

<style lang="scss">
	.place-order {
		@include page();
		.content {
			.loading {
				text-align: center;
				margin-top: 567rpx;
			}
			.item {
				@include flex();
				height: 300rpx;
				background: #FFFFFF;
				margin-bottom: 10rpx;
				padding: 30rpx;
				align-items: flex-end;
				box-sizing: border-box;
				.img {
					height: 240rpx;
					width: 300rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.info {
					@include flex(column);
					flex: 1;
					height: 100%;
					margin-left: 23rpx;
					align-items: flex-start;
					justify-content: space-between;
					> view {
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						&.top {
							font-size: 32rpx;
							line-height: 3;
						}
						&.mid {
							font-size: 26rpx;
							color: $app-base-color;
						}
						&.bot {
							width: 100%;
							display: flex;
							overflow: visible;
							justify-content: space-between;
							> text {
								font-size: 26rpx;
								line-height: 2;
								color: #666666;
							}
							> view {
								@include flex();
								color: #FFFFFF;
								height: 60rpx;
								width: 60rpx;
								font-size: 40rpx;
								border-radius: 50%;
								position: relative;
								overflow: visible;
								background: $app-base-color;
								view {
									position: absolute;
									font-size: 20rpx;
									right: 0;
									height: 32rpx;
									top: -24rpx;
									padding: 2rpx 8rpx;
									border-radius: 32rpx;
									background: #FF0000;
								}
							}
						}
					}
				}
			}
		}
	}
</style>