great_mobileui/center/refundselect.vue

<template>
	<view class="">
		<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" :disabled="item.status !== 3" activeColor="#ED0000" :key="index"
						:name="item.name" :checked="item.checked" @change="toggleCheck(index)" class="checkbox" />
					<view class="text" @click="toggleCheck(index)">
						<view class="up u-flex u-row-between">
							<view class="left">订单编号：{{item.orderId}}</view>
							<view class="right status" :class="item.class">{{item.status|filterOrderState}}</view>
						</view>
						<view class="down u-flex u-row-between">
							<view class="left">
								<view class="name">观影人:{{item.name}}</view>
								<view class="idcard">身份证号:{{item.idcard}}</view>
							</view>
							<view class="right">
								¥ {{item.salePrice}}
							</view>
						</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 {
				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;
						price = item.salePrice
						total += price;
					}
					return total;
				}, 0).toFixed(2);
			}
		},
		onLoad(page) {
			this.getSystemInfo();
			this.orderId = page.id;
		},
		onShow() {
			this.getViewers();
		},
		methods: {
			leftClick(e) {
				uni.reLaunch({
					url: '/pages/index/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 => {
					if (item.status === 3) {
						item.checked = selectAll
					}
				})
			},
			checkboxClick() {
				// console.log('checkboxClick',this.allChecked);
				this.dataList.forEach(item => {
					if (item.status === 3) {
						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 viewerList = this.selectGoods.map(item=>{
					return {viewerId:item.id,salePrice:item.salePrice}
				});
				let params = {
					id:this.orderId,
					refundAmount:this.totalPrice,
					viewerList:JSON.stringify(viewerList)
				};
				// console.log('selectGoods', this.selectGoods);
				uni.$u.route('/center/refund', params);
			},
			getViewers() {
				this.$u.api.getViewers({
					orderId: this.orderId
				}).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>
.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 52rpx;
			box-shadow: -6rpx 0rpx 20rpx -18rpx rgba(0,0,0,0.5);
		}
		.up{
			border-bottom: 1px solid #EBEBEB;
			padding-bottom: 24rpx;
			margin-bottom: 32rpx;
			.left{
				font-size: 24rpx;
				font-weight: 400;
				color: #606060;
			}
			.status{
				font-size: 24rpx;
				font-weight: 400;
				color: #9E9E9E;
				&.status-3{
					color: #56CE53;
				}
				&.status-4{
					color: #FF6C17;
				}
			}
		}
		.down{
			.name{
				font-size: 28rpx;
				font-weight: 500;
				color: #363636;
				margin-bottom: 20rpx;
			}
			.idcard{
				font-size: 22rpx;
				font-weight: 400;
				color: #7F7F7F;
			}
			.right{
				font-size: 32rpx;
				font-weight: bold;
				color: #ED0000;
			}
		}
	}
}
	.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>