jhlapp/pagesT/Purchase/PurchaseGoods.vue

<template>
	<view>
		<view class="goods-ul">
			<view class="goods-li" v-for="(item, index) in goods_list" :key="index">
				<view class="del-icon" @click="delGoods(index)"><u-icon name="minus-circle-fill" color="#fa3534" size="40"></u-icon></view>
				<view class="goods-name ellipsis">{{ item.goodsName }}</view>
				<view class="goods-sku clearfix">
					<view class="float_left" style="width: 430rpx;">规格:{{ item.unitName }}{{ item.specGropName }}</view>
					<view class="float_right">{{ item.goodsCode }}</view>
				</view>
				<view class="goods-sku clearfix" v-if="item.skuValue">
					<view class="float_left">换算比例：{{ item.skuValue }}</view>
					<view class="float_right">转换数量：{{ item.skuNum }}</view>
				</view>
				<view class="num-ul">
					<view class="num-li">
						<view class="label">采购单价</view>
						<view class="value"><input type="digit" @blur="subtotalPriceChange(index)" v-model="item.buyerUnitPrice" /></view>
					</view>
					<view class="num-li">
						<view class="label">采购数量</view>
						<view class="value"><input type="digit" @blur="subtotalPriceChange(index)" placeholder="请输入" v-model="item.buyerNum" /></view>
					</view>
					<view class="num-li" v-if="item.isEq === 5">
						<view class="label">其他单位</view>
						<view class="value"><input type="digit" @blur="subtotalPriceChange(index)" placeholder="请输入" v-model="item.otherNum" /></view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-bottom clearfix">
			<view class="left-view">
				<view class="total-price">¥{{ purchaseAmount }}</view>
				<view class="left-desc">已选{{ goods_list.length }}种，{{ totalNum }}个</view>
			</view>
			<view class="right-view" @click="goodsConfirm"><view class="btn-li">确定</view></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: 0,
			goods_list: []
		};
	},
	computed: {
		totalNum() {
			let sum = 0;
			if (this.goods_list.length > 1) {
				this.goods_list.forEach(item => {
					sum = this.$NP.plus(sum, Number(item.buyerNum));
				});
			} else if (this.goods_list.length === 1) {
				sum = Number(this.goods_list[0].buyerNum);
			} else {
				sum = 0;
			}
			return sum || 0;
		},
		purchaseAmount() {
			let sum = 0;
			if (this.goods_list.length > 1) {
				this.goods_list.forEach(item => {
					sum = this.$NP.plus(sum, Number(item.subtotalPrice));
				});
			} else if (this.goods_list.length === 1) {
				sum = Number(this.goods_list[0].subtotalPrice);
			} else {
				sum = 0;
			}
			return sum || 0;
		}
	},
	onLoad() {
		this.goods_list = uni.getStorageSync('PurchaseGoods');
		console.log('goods_list::', this.goods_list);
	},
	methods: {
		subtotalPriceChange(index) {
			const target = this.$u.deepClone(this.goods_list);
			target[index].subtotalPrice = this.$NP.times(target[index].buyerUnitPrice, target[index].buyerNum);
			this.goods_list = target;
		},
		goodsConfirm() {
			this._prePage().purchaseGoods = this.goods_list;
			uni.navigateBack();
		},
		delGoods(index) {
			this.goods_list.splice(index, 1);
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-ul {
	padding-bottom: 100rpx;

	.goods-li {
		background-color: #ffffff;
		border-bottom: 1px solid #eeeeee;
		padding: 20rpx;
		padding-left: 80rpx;
		font-size: 24rpx;
		color: #6c6c6c;
		line-height: 50rpx;
		position: relative;

		.del-icon {
			position: absolute;
			top: 50%;
			left: 20rpx;
			transform: translateY(-50%);
		}

		.goods-name {
			-webkit-line-clamp: 2;
			font-size: 28rpx;
			color: #111111;
		}

		.price {
			font-size: 28rpx;
			color: $uni-color-error;
		}

		.goods-num {
			input {
				width: 170rpx;
				display: inline-block;
				border: 1px solid #eeeeee;
				line-height: 60rpx;
				border-radius: 10rpx;
				padding: 0 10rpx;
				vertical-align: middle;
				font-size: 24rpx;
			}
		}
	}
}
.num-ul {
	display: flex;
	font-size: 24rpx;
	padding-top: 10rpx;
	.num-li {
		flex: 4;
		border-right: 1px solid #ecf0f7;
		text-align: center;
		padding: 0 10rpx;
		&:last-child {
			border-right: 0 none;
		}
		.label {
			color: #879bba;
		}
		.value {
			height: 40rpx;
			line-height: 40rpx;
			border-bottom: 1px solid $uni-color-primary;
			input {
				font-size: 24rpx;
				height: 40rpx;
				line-height: 40rpx;
			}
		}
	}
}
.detail-bottom {
	display: block;
	background-color: #ffffff;
	.left-view {
		float: left;
		padding: 10rpx 30rpx;

		.total-price {
			color: $uni-color-error;
			font-weight: bold;
		}

		.left-desc {
			font-size: 24rpx;
			color: #6c6c6c;
		}
	}

	.right-view {
		float: right;
		padding: 10rpx 30rpx;
		margin-left: 30rpx;

		.btn-li {
			width: 200rpx;
			text-align: center;
			line-height: 80rpx;
			height: 80rpx;
			background: $uni-color-primary;
			border: 1px solid $uni-color-primary;
			color: #ffffff;
			border-radius: 10rpx;
		}
	}
}
</style>