great_distribution/pages/distributor/index.vue

<template>
	<view class="" :style="{'--status-bar-': statusBarHeight}">
		<u-navbar title="选择下级分销商" :placeholder="true" @leftClick="leftClick" :autoBack="false" :safeAreaInsetTop="true">
		</u-navbar>
		<view class="item-list">
			<!-- <view class="til u-flex u-row-between" :style="{top:navHeight+'px'}">
				<u-checkbox-group @change="allCheckboxChange">
					<u-checkbox shape="circle" :checked="allChecked" :name="allCheckbox.name"
						label="观影人列表"></u-checkbox>
				</u-checkbox-group>
			</view> -->
			<u-checkbox-group placement="column" @change="checkboxChange">
				<view v-for="(item,index) in dataList" :key="item.id" class="item u-flex">
					<u-checkbox shape="circle" activeColor="#ED0000" :key="index"
						:name="item.name" :checked="item.checked" @change="toggleCheck(index)" class="checkbox" />
					<view class="text u-flex u-row-between" @click="toggleCheck(index)">
						<view class="name">{{item.name}}</view>
						<view class="withdrawTotal">可体现余额：<text class="num"> ￥ {{item.withdrawTotal}}</text></view>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<view class="cart-bottom">
			<view class="inner u-flex u-row-between">
				<view class="left u-flex">
					<view class="checkbox" @click="checkboxClick" style="padding: 10px;">
						<u-checkbox-group @change="allCheckboxChange">
							<u-checkbox shape="circle" :checked="allChecked" activeColor="#ED0000" :name="allCheckbox.name"
								label="全选"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="total-price-wrap u-flex">
						<view class="total">共{{selectGoods.length}}人</view>
						<view class="totalPrice  u-flex">
							合计: <text class="num"> {{totalPrice}}</text>
						</view>
					</view>
				</view>
				<view class="btn active" v-if="selectGoods.length>0&&cansubmit" @click="submitorder">确定</view>
				<view class="btn" v-else>确定</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	// import {
	// 	systemInfo
	// } from "@/mixin.js";
	export default {
		// mixins: [systemInfo], // 使用mixin
		data() {
			return {
				statusBarHeight: 0, // 状态栏安全距离
				orderId: '',
				cansubmit: true,
				staticUrl: this.$commonConfig.staticUrl,
				allCheckbox: {
					name: '全选'
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FF3C3F',
						'padding-left': '10px'
					}
				}],
				// 购物车列表
				dataList: [],
			}
		},
		computed: {
			// 是否全选
			allChecked() {
				return this.dataList.every(item => item.checked)
			},
			selectGoods() {
				let selectGoods = [];
				this.dataList.forEach(item => {
					if (item.checked) {
						selectGoods.push(item)
					}
				})
				return selectGoods
			},
			// 合计价格
			totalPrice() {
				let that = this;
				return this.dataList.reduce((total, item) => {
					if (item.checked) {
						let price = null;
						total += item.withdrawTotal;
					}
					return total;
				}, 0).toFixed(2);
			}
		},
		onLoad(page) {
			// this.getSystemInfo();
			this.statusBarHeight = getApp().globalData.statusBarHeight;
			this.orderId = page.id;
		},
		onShow() {
			this.getViewers();
		},
		methods: {
			leftClick(e) {
				uni.reLaunch({
					url: '/pages/main/index'
				});
				console.log('leftClick', e);
			},
			// 切换全选状态
			allCheckboxChange(n) {
				// console.log('allCheckboxChange',n[0]);
				console.log('allCheckboxChange', n);
				let selectAll = n[0] ? true : false;
				this.dataList.forEach(item => {
					item.checked = selectAll
				})
			},
			checkboxClick() {
				// console.log('checkboxClick',this.allChecked);
				this.dataList.forEach(item => {
					item.checked = !this.allChecked
				})
			},
			checkboxChange(n) {
				// console.log('checkboxChange',n);
			},
			// 切换商品选中状态
			toggleCheck(index) {
				// console.log('toggleCheck',index);
				// if(this.dataList[index].status !== 3){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'该状态不能退款',
				// 		duration:1000
				// 	})
				// 	return
				// }
				this.dataList[index].checked = !this.dataList[index].checked
			},
			submitorder() {
				let personList = this.selectGoods.map(item=>{
					return {personsId:item.id,withdrawTotal:item.withdrawTotal}
				});
				let params = {
					withdrawTotal:this.totalPrice,
					personList:JSON.stringify(personList)
				};
				// console.log('selectGoods', this.selectGoods);
				uni.$u.route('/pages/cash/index', params);
			},
			getViewers() {
				this.$u.api.distributorList({
					userid: this.distribution_user_info.userId
				}).then(res => {
					this.dataList = res.data.list.map(item => {
						item.checked = false;
						return {
							...item,
							class: {
							  0: 'status-0',
							  1: 'status-1',
							  2: 'status-2',
							  3: 'status-3',
							  4: 'status-4',
							  5: 'status-5',
							  6: 'status-6',
							  7: 'status-7',
							  8: 'status-8'
							}[item.status] || ''
						} 
					})
				}).catch(err => {
					console.log('getOrderDetails', err.data);
				})
			},
		}
	}
</script>
<style>
page {
	background: #F7F7F9;
}
</style>
<style lang="scss" scoped>
.u-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.u-row-between {
	justify-content: space-between;
}

.u-row-around {
	justify-content: space-around;
}
.item-list{
	margin: 28rpx 32rpx 20rpx;
	.item{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding-left: 18rpx;
		margin-bottom: 24rpx;
		.text{
			margin-left: 20rpx;
			flex: 1;
			padding: 30rpx 32rpx;
			box-shadow: -6rpx 0rpx 20rpx -18rpx rgba(0,0,0,0.5);
			.name{
				font-size: 24rpx;
			}
			.withdrawTotal{
				font-size: 24rpx;
				color: var(--gd-but-color);
				.num{
					font-size: 32rpx;
				}
			}
		}
	}
}
	.cart-bottom {
		position: relative;
		z-index: 1001;
		height: 98rpx;

		.inner {
			position: fixed;
			background-color: #fff;
			height: 98rpx;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 0 20rpx;
			padding-left: 0;

			.total-price-wrap {
				margin-left: 30rpx;
				.totalPrice{
					font-size: 30rpx;
					color: #333;
					font-weight: 400;
					.num{
						font-size: 40rpx;
						font-weight: bold;
						color: #ED0000;
						margin-left: 5px;
					}
				}
				.total{
					font-size: 20rpx;
					font-weight: 400;
					color: #999999;
					margin-right: 16rpx;
				}
			}

			.btn {
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx;
				padding: 0 50rpx;
				background-color: #eee;
				color: #333;
				text-align: center;

				&.active {
					background-color: #FF3C3F;
					color: #fff;
				}
			}
		}
	}
</style>