jhlapp/pagesT/order/purchaseGoods.vue

<template>
	<view>
		<view class="goods-ul">
			<block v-for="(item, index) in goods_list" :key="index">
				<view class="goods-li clearfix" @click="selGoods(item)">
					<view class="del-icon">
						<u-icon size="40" name="minus-circle-fill" :color="sel_goods_list.findIndex(goods => item.skuId === goods.skuId) > -1 ? '#fa3534' : '#999999'"></u-icon>
					</view>
					<view class="goods-name ellipsis">{{ item.goodsName }}</view>
					<view class="goods-code">{{ item.goodsCode }}</view>
					<view class="goods-num clearfix">
						<view class="float_left">{{ item.unitName }};{{ item.skuName }}</view>
						<text class="float_right">可退：{{ $utils.formatNub(item.returnOnNum) }}{{ item.unitName }}</text>
					</view>
					<view class="goods-num clearfix">
						<view class="float_left ">
							<text class="price">{{ $utils.formattedNumber(item.buyerUnitPrice) }}</text>
						</view>
						<view class="float_right">
							小计：
							<text class="price">{{ $utils.formattedNumber(item.subtotalPrice) }}</text>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="confirm-btn" @click="confirm">确定</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			goods_list: [],
			sel_goods_skuid: [],
			sel_goods_list: []
		};
	},
	onLoad() {
		const obj = uni.getStorageSync('purchaseGoods');
		console.log(obj)
		this.goods_list = obj.goodsArrData;
		this.sel_goods_list = obj.goods_list;
	},
	methods: {
		confirm() {
			// 选择返回上一页
			this._prePage().purchaseGoodsData = this.sel_goods_list;
			uni.navigateBack();
		},
		selGoods(item) {
			if (this.sel_goods_list.length === 1) {
				this.$u.toast('至少保留一条数据');
				return;
			}
			const index = this.sel_goods_list.findIndex(godos => item.skuId === goods.skuId);
			if (index > -1) {
				this.sel_goods_list.splice(index, 1);
			} else {
				this.sel_goods_list.push({
					id: item.id,
					goodsId: item.basicGoodsId,
					goodsCode: item.goodsCode,
					goodsName: item.goodsName,
					unitName: item.unitName,
					skuName: item.skuName,
					skuId: item.skuId,
					purchaseNum: this.$utils.formatNub(item.buyerNum),
					buyerNum: this.$utils.formatNub(item.returnOnNum),
					inNum: item.inNum,
					inOfNum: item.inOfNum,
					returnOnNum: item.returnOnNum,
					returnNum: item.returnNum,
					inventoryNum: this.$utils.formatNub(item.num),
					buyerUnitPrice: this.$utils.formatNub(item.buyerUnitPrice),
					subtotalPrice: this.$utils.formatNub(item.subtotalPrice),
					couponAmount: this.$utils.formatNub(item.couponAmount),
					otherAmount: this.$utils.formatNub(item.otherAmount)
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.confirm-btn {
	color: #ffffff;
	background-color: $uni-color-primary;
	text-align: center;
	line-height: 90rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}
.goods-ul {
	.goods-li {
		line-height: 32rpx;
		position: relative;
		background-color: #ffffff;
		width: 710rpx;
		margin: 20rpx auto;
		padding: 20rpx;
		border-radius: 10rpx;
		padding-left: 80rpx;
		position: relative;
		.del-icon {
			position: absolute;
			top: 50%;
			left: 20rpx;
			transform: translateY(-50%);
		}
		.goods-name {
			width: 640rpx;
			height: 34rpx;
			line-height: 34rpx;
		}
		.goods-code {
			font-size: 24rpx;
			padding-top: 10rpx;
		}
		.goods-num {
			padding-top: 10rpx;
			font-size: 24rpx;
			.float_left {
				input {
					display: inline-block;
					border: 1px solid #eeeeee;
					border-radius: 10rpx;
					padding: 0 10rpx;
					vertical-align: middle;
					text-align: center;
				}
			}
			.price {
				font-size: 28rpx;
				font-weight: bold;
				color: $uni-color-error;
			}
		}
	}
}
</style>