ydd_front/mer_uniapp/pages/admin/refund/index.vue

<template>
	<view class="refund">
		<view class="money-section">
			<view class="acea-row row-middle item">
				<view class="">预计退款</view>
				<input disabled="" v-model="refundMoney" class="input" type="text" />
			</view>
			<view class="acea-row row-middle item" >
				<view class="">退款类型</view>
				<view class="acea-row row-right radio-group">
					<view class="acea-row row-middle radio-item" :class="{ on: !isSplit}" @click="refundTypeChange(0)">
						<text class="iconfont" :class="isSplit?'icon-weixuanzhong':'icon-a-ic_CompleteSelect'"></text>整单退款
					</view>
					<view v-if="type!=2" class="acea-row row-middle radio-item" :class="{ on: isSplit}" @click="refundTypeChange(1)">
						<text class="iconfont" :class="isSplit?'icon-a-ic_CompleteSelect':'icon-weixuanzhong'"></text>分单退款
					</view>
				</view>
			</view>
		</view>
		<splitOrder :type="1" v-if="isSplit" :splitGoods="splitGoods" :select_all="false" @getList="getList">
		</splitOrder>
		<view class="footer acea-row row-middle">
			<view class="all acea-row row-middle" v-if="isSplit" @click="allChange">
				<text class="iconfont" :class="isAll?'icon-a-ic_CompleteSelect':'icon-ic_unselect'"></text>
				全选
			</view>
			<view class="btn-box">
				<view class="btn" :style="{ width: isSplit?'auto':'100%'}" @click="openRefund">
					确认
					<text v-if="isSplit">({{ numTotal }})</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import splitOrder from '../components/splitOrder/index.vue';
	import {
		employeeDirectRefund,
		sendDetailList
	} from '@/api/work.js'
	export default {
		components: {
			splitOrder,
		},
		data() {
			return {
				refundMoney: 0,
				isSplit: 0,
				isAll: false,
				splitGoods: [],
				goodsChecked: [],
				cart_ids: [],
				info: {},
				orderNo:'',
				type:''
			}
		},
		computed: {
			total() {
				return this.goodsChecked.reduce((total, item) => {
					return this.$util.$h.Add(total, this.$util.$h.Mul(this.$util.$h.Div(item.payPrice,item.payNum), item.surplus_num)).toFixed(2);
				}, 0);
			},
			numTotal() {
				return this.goodsChecked.reduce((total, {
					surplus_num,
				}) => {
					return this.$util.$h.Add(total, surplus_num);
				}, 0);
			},
		},
		watch: {
			total(newValue, oldValue) {
				this.refundMoney = newValue
			},
		},
		onLoad(options) {
			this.getInfo(options.orderNo)
			this.orderNo=options.orderNo
			this.type=options.type
		},
		methods: {
			getInfo(orderNo){
				sendDetailList(orderNo).then(res=>{
					this.info = res.data
					this.getIndex(res.data)
				})
			},
			allChange() {
				this.isAll = !this.isAll;
				this.cart_ids = [];
				this.goodsChecked = [];
				for (let i = 0; i < this.splitGoods.length; i++) {
					this.splitGoods[i].checked = this.isAll;
					if (this.splitGoods[i].checked) {
						this.goodsChecked.push(this.splitGoods[i]);
						this.cart_ids.push(this.splitGoods[i].id);
					}
				}
			},
			refundTypeChange(value) {
				this.isSplit = value;
				if (value) {
					this.goodsChecked = []
					this.splitGoods.forEach(item => {
						item.checked = false
					})
					this.isAll = false
				} else {
					this.splitGoods.forEach(item => {
						item.surplus_num=item.payNum - item.refundNum
					})
					this.goodsChecked = this.splitGoods
				}
			},
			getIndex(info) {
				let that = this;
				let obj = '';
				const cartInfo = info
				let list = cartInfo.map(item => {
					return {
						id: item.id,
						checked: false,
						numShow: item.payNum - item.refundNum,
						surplus_num: item.payNum - item.refundNum,
						...item,
						refundPrice: this.$util.$h.Div(item.refundPrice, item.payNum),
					};
				});
				this.splitGoods = list;
				this.goodsChecked = list;
				
			},
			getList(val) {
				let that = this;
				that.splitGoods = JSON.parse(JSON.stringify(val));
				let goodsChecked = [];
				let cart_ids = [];
				for (let i = 0; i < val.length; i++) {
					if (val[i].checked) {
						goodsChecked.push(val[i]);
						cart_ids.push(val[i].id);
					}
				}
				this.goodsChecked = goodsChecked;
				this.cart_ids = cart_ids;
				this.isAll = this.goodsChecked.length == this.splitGoods.length;
			},
			openRefund() {
				let cart_ids = [];
				let data = {
					refund_price: this.refundMoney,
					type: 1,
					is_split_order: this.isSplit,
				};
				cart_ids = this.goodsChecked.map(({
					id,
					surplus_num
				}) => {
					return {
						orderDetailId: id,
						num: surplus_num
					}
				});
				let refundObj = {
					orderNo: this.orderNo,
					returnType: this.isSplit == 0 ? 1 : 2,
					detailList: cart_ids
				}
				employeeDirectRefund(refundObj).then(res => {
					if (res.code == 200) {
						this.$util.Tips({
							title: '操作成功'
						})
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/admin/order/index?type=complete'
							})
						},500)
					}
				}).catch(err=>{
					this.$util.Tips({
						title: err
					})
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	/deep/checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		border: 1px solid #2A7EFB !important;
		background-color: #2A7EFB !important;
		color: #fff !important;
	}
	
	/deep/checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border: 1px solid #2A7EFB !important;
		background-color: #2A7EFB !important;
		color: #fff !important;
	}
	.refund {
		padding: 22rpx 20rpx;
	}

	.money-section {
		padding: 12rpx 0;
		border-radius: 24rpx;
		background: #FFFFFF;

		.item {
			height: 80rpx;
			padding: 0 24rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.input {
			flex: 1;
			height: 80rpx;
			text-align: right;
			font-family: Regular;
			font-size: 36rpx;
			color: #FF7E00;
		}

		.icon-ic_edit {
			margin-left: 8rpx;
			font-size: 32rpx;
			color: #999999;
		}

		.radio-group {
			flex: 1;
		}

		.radio-item {
			font-size: 28rpx;
			color: #999999;

			+.radio-item {
				margin-left: 48rpx;
			}

			.iconfont {
				margin-right: 12rpx;
				font-size: 32rpx;
			}

			&.on {
				color: #333333;

				.iconfont {
					color: #2A7EFB;
				}
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 16rpx 20rpx 16rpx 32rpx;
		padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
		background: #FFFFFF;

		.btn {
			display: inline-block;
			height: 64rpx;
			padding: 0 40rpx;
			border-radius: 32rpx;
			background: #2A7EFB;
			font-weight: 500;
			font-size: 26rpx;
			line-height: 64rpx;
			color: #FFFFFF;
		}

		.all {
			font-size: 26rpx;
			color: #333333;

			.iconfont {
				margin-right: 12rpx;
				font-size: 40rpx;
				color: #CCCCCC;

				&.icon-a-ic_CompleteSelect {
					color: #2A7EFB;
				}
			}
		}

		.btn-box {
			flex: 1;
			text-align: right;

			.btn {
				text-align: center;
			}
		}
	}
</style>