book-hi/pages-mall/components/after-sales/select-goods-pop.vue

<template>
	<u-popup v-model="show"  mode="bottom" height="750rpx">
		<view class="list">
			<view class="item" v-for="(goods, index) in goodsList" :key="index">
				<view class="left">
					<u-checkbox shape="circle" active-color="#22ac38" icon-size="16" v-model="goods.checked" @change="checkGoods"></u-checkbox>
				</view>
				<view class="right" @click="goodsList[index].checked = !goodsList[index].checked">
					<orderDetailGoodsCard :data="goods"></orderDetailGoodsCard>
				</view>
				
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="btn">
			<view class="inner">
				<view class="check">
					<u-checkbox shape="circle" active-color="#22ac38" icon-size="16" v-model="checkAllStauts" @change="checkAllGoods"></u-checkbox>
					<text>全选</text>
				</view>
				<view class="right">
					<!-- ({{ goodsList.filter(item => item.checked).length }}) -->
					<u-button type="primary" @click="confirmSel">确认选择</u-button>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
var _self;
import orderDetailGoodsCard from '@/pages-mall/components/order/orderdetail-goods-card.vue';
export default {
	components: {
		orderDetailGoodsCard
	},
	data() {
		return {
			show:false,
			orderInfo:{},
			goodsList:[],
			checkAllStauts: false,
		};
	},
	computed: {
		checkAll() {
			// this.totalPrice=0;
			// this.goodsList.map(item => (item.checked ? (this.totalPrice += Number(item.amount) * item.nums) : 0));
			if (this.goodsList.filter(item => item.checked).length == this.goodsList.length) {
				this.checkAllStauts = true;
			} else {
				this.checkAllStauts = false;
			}
		}
	},
	onLoad() {
		_self = this;
	},
	
	methods: {
		showPop(data){
			console.log('data>>>',data);
			this.show = true;
			this.goodsList=[];
			data.order_goods_info.forEach(e=>{
				console.log(e);
				if(e.sub_status=='10'){
					e.checked = false;
					this.goodsList.push(e);
				}
			});
			console.log(this.goodsList);
			this.$forceUpdate();
		},
		// 确认选择
		//  :disabled="goodsList.filter(item => item.checked).length<=0"
		confirmSel(){
			let gs = [];
			this.goodsList.forEach(item => {
				if(item.checked){
					gs.push(item);
				}
			});
			this.$emit('done',gs);
			this.show = false;
			
		},
		// 全选？
		checkAllGoods() {
			if (this.checkAllStauts) {
				this.goodsList.forEach(item => (item.checked = false));
			} else {
				this.goodsList.forEach(item => (item.checked = true));
			}
		},
		// 单选
		checkGoods(e){
			
			this.$forceUpdate();
		},
	
	
	}
};
</script>

<style lang="scss" scoped>
.page {
	background: $app-theme-bg-gray-color;
	padding: 24rpx;
}
.list {
	padding-bottom: 120rpx;
	.item {
		display: flex;
		align-items: center;
		background-color: $app-theme-bg-color;
		padding: 30rpx 24rpx 30rpx 24rpx;
		border-bottom: 1rpx solid $app-theme-border-color;
		position: relative;
		.left {
			display: flex;
			align-items: center;
			width: 46rpx;
		}
		.right {
			width: calc(100% - 46rpx);
			display: flex;
			align-items: center;
			.img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.info {
				width: 418rpx;
				.title {
					font-size: 28rpx;
					font-family: PingFang-SC-Regular, PingFang-SC;
					font-weight: 400;
					color: $app-theme-text-black-color;
					padding-bottom: 16rpx;
				}
				.sku {
					font-size: 22rpx;
					font-family: PingFang-SC-Regular, PingFang-SC;
					font-weight: 400;
					background: $app-theme-bg-gray-color;
					border-radius: 2px;
					color: $app-theme-card-gray-deep-color;
					padding: 4rpx 16rpx;
				}
				.operate {
					padding-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.price {
						text:nth-child(1) {
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: $app-theme-text-money-color;
						}
						text:nth-child(2) {
							font-size: 36rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: $app-theme-text-money-color;
						}
					}
					.num {
					}
				}
			}
		}
	}
}

.btn {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: $app-theme-bg-color;
	min-height: 100rpx;

	.inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.check {
			padding-left: 30rpx;
			display: flex;
			align-items: center;
			text {
				font-size: 28rpx;
				font-weight: 400;
				color: $app-theme-text-black-color;
			}
		}
		.right {
			display: flex;
			align-items: center;
			.price {
				margin-right: 54rpx;
				text:nth-child(1) {
					font-size: 28rpx;
					font-weight: 400;
					color: $app-theme-text-black-color;
				}
				text:nth-child(2) {
					font-size: 24rpx;
					font-weight: 500;
					color: $app-theme-text-money-color;
				}
				text:nth-child(3) {
					font-size: 36rpx;
					font-weight: 400;
					color: $app-theme-text-money-color;
				}
			}
			/deep/button {
				height: 100%;
				line-height: 100rpx;
				border-radius: 0 !important;
			}
		}
	}
}
</style>