web-app-v1/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" 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>