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.viewerSalePrice }}
							</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: [],
			pageData: {},
		}
	},
	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.viewerSalePrice
					total += price;
				}
				return total;
			}, 0).toFixed(2);
		}
	},
	onLoad(page) {
		this.getSystemInfo();
		this.orderId = page.id;
	},
	onShow() {
		this.getViewers();
	},
	methods: {
		leftClick(e) {
			let pages = getCurrentPages();
			if (pages.length == 1) {
				uni.$u.route('/pages/index/index')
			} else {
				uni.navigateBack()
			};
		},
		// 切换全选状态
		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() {
			//判断this.pageData.hasPreferential  是否存在优惠,如果存在优惠,则list的数据要全选,如果没有全选弹窗提示,提示内容为this.pageData.preferentialMsg
			if (this.pageData.hasPreferential) {
				if (!this.allChecked) {
					uni.showModal({
						title: '提示',
						content: this.pageData.preferentialMsg,
						confirmText: '确认',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								// 点击确认，执行全选后提交
								this.dataList.forEach(item => {
									item.checked = true
									// if (item.status === 3) {
									// 	item.checked = true
									// }
								})
								// 重新执行提交逻辑
								this.executeSubmit()
							}
							// 点击取消则自动关闭弹窗，无需额外处理
						}
					})
					return
				}
			}
			this.executeSubmit()
		},
		executeSubmit() {
			let viewerList = this.selectGoods.map(item => {
				return { viewerId: item.id, salePrice: item.salePrice }
			});
			let params = {
				type: 'redirectTo',
				id: this.orderId,
				refundAmount: this.totalPrice,
				viewerList: JSON.stringify(viewerList)
			};
			// console.log('selectGoods', this.selectGoods);
			// uni.$u.route('/center/refund', params);

			uni.redirectTo({
				url: `/center/refund?id=${this.orderId}&refundAmount=${this.totalPrice}&viewerList=${JSON.stringify(viewerList)}`
			})
		},
		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] || ''
					}
				})
				this.pageData = res.data;
				// console.log('this.pageData',this.pageData)
			}).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>