jiaoyi-uni2/奥莱优品/pages/order/refund.vue

<template>
	<view class="content">
		<template v-if="loading">
			<view class="skeleton">
				<view class="skeleton-line max animate" style="height: 200upx;"></view>
				<view class="skeleton-line animate"></view>
				<view class="skeleton-line min animate"></view>
				<view class="skeleton-line min animate"></view>
				<view class="skeleton-line max animate" style="height: 200upx;"></view>
				<view class="skeleton-line max animate" style="height: 200upx;"></view>
			</view>
		</template>
		<template v-else>
		<scroll-view class="goods-body" scroll-y scroll-with-animation>
			<view class="order-body">
				<view class="item-goods">
					<view class="item-goods-body">
						<view class="image">
							<image :src="orderData.img"></image>
						</view>
						<view class="info">
							<view class="title">
								<view class="name" v-if="goodsData.is_new == 1">{{goodsData.price}}元代{{goodsData.line_price}}元商场权益券{{ goodsData.product_name }}</view>
								<view class="name" v-else>{{ goodsData.product_name }}</view>
								<view class="num">x{{ orderData.number }}</view>
							</view>
							<view class="tags">
								{{orderData.sku_name?orderData.sku_name:'默认'}}
								<view class="price">{{ $dialog.formatMoney(orderData.price,true) }}</view>
							</view>
							<view class="price-right">实付 <text>{{ $dialog.formatMoney(orderData.pay_money,true) }}</text></view>
						</view>
					</view>
				</view>
				<view class="order-info">
					<view class="info-item">
						<view class="name">订单编号</view>
						<view class="right">{{ orderData.out_order_no }}</view>
					</view>
					<view class="info-item" @click="refundMsg">
						<view class="name">退款原因<text class="red">*</text></view>
						<view class="right">
							{{refundMsgText?refundMsgText:'请至少选择1项'}}
							<view class="icon"><image src="/static/image/right.svg"></image></view>
						</view>
					</view>
					<view class="info-item">
						<view class="name">退款金额</view>
						<view class="right red">{{ $dialog.formatMoney(orderData.pay_money,true) }}</view>
					</view>
					<view class="info-item">
						<view class="name">退款路径<text>*</text></view>
						<view class="right">
							<radio-group @change="radioChange">
								<view class="flex-radio">
									<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
										<view>
											<radio :value="item.value" style="transform: scale(0.7);" :checked="index === current" />
										</view>
										<view>{{item.name}}</view>
									</label>
								</view>
							</radio-group>
						</view>
					</view>
					<template v-if="itemsName == 'alipay'">
					<view class="info-item">
						<view class="name">姓名<text>*</text></view>
						<view class="right">
							<input v-model="aliData.truename" placeholder="请填写真实姓名" class="right-input" />
						</view>
					</view>
					<view class="info-item">
						<view class="name">支付宝帐号<text>*</text></view>
						<view class="right">
							<input v-model="aliData.account" placeholder="请输入" class="right-input" />
						</view>
					</view>
					</template>
					<template v-if="itemsName == 'bank'">
						<view class="info-item">
							<view class="name">姓名<text>*</text></view>
							<view class="right">
								<input v-model="bankData.truename" placeholder="请填写真实姓名" class="right-input" />
							</view>
						</view>
						<view class="info-item">
							<view class="name">银行卡号<text>*</text></view>
							<view class="right">
								<input v-model="bankData.card" placeholder="请输入银行卡号" class="right-input" />
							</view>
						</view>
						<view class="info-item">
							<view class="name">开户行<text>*</text></view>
							<view class="right">
								<input v-model="bankData.name" placeholder="请输入开户行全称" class="right-input" />
							</view>
						</view>
					</template>
				</view>

			</view>
			<view class="line-height"></view>
		</scroll-view>
		<view class="footer">
			<view class="tips">申请退款后需商家审核，审核时间预计1-3个工作日</view>
			<view class="footer-op">
				<button :loading="isSubmit" :disabled="isSubmit" class="btn full" @click="submitForm">提交申请</button>
			</view>
			<view class="footer-safe"></view>
		</view>
		</template>
		<refundMain ref="refundMain" @success="refundHandle"></refundMain>
	</view>
</template>

<script>
var app;
import refundMain from "@/components/kfService/refund";
export default {
	components: {
		refundMain
	},
	data() {
		return {
			orderId:0,
			current: 0,
			goodsData:null,
			orderData:null,
			loading:true,
			refundMsgText:null,
			isSubmit:false,
			items:[
				{
					value: 'alipay',
					name: '支付宝',
					checked: 'true'
				},
				{
					value: 'bank',
					name: '银行卡'
				}
			],
			bankData:{},
			aliData:{},
			itemsName:"alipay"
		}
	},
	onLoad({order}) {
		app = this;
		app.orderId = order;
		const eventChannel = this.getOpenerEventChannel();
		app.getOrder();
	},
	methods: {
		async submitForm(){
			var formData = {};
			if (!app.refundMsgText) return app.$dialog.showSuccess("请至少选择1项")
			formData.order = app.orderId;
			formData.msg = app.refundMsgText;
			formData.type = app.itemsName;
			if (app.itemsName == "alipay") {
				formData.content = JSON.stringify(app.aliData);
			} else {
				formData.content = JSON.stringify(app.bankData);
			}
			app.isSubmit = true;
			var resp = await app.$api.order.refund.post(formData);
			app.isSubmit = false;
			if (resp.code !== 1) return app.$dialog.showSuccess(resp.msg)
			app.$dialog.showSuccess(resp.msg)
			setTimeout(function(){
				const eventChannel = app.getOpenerEventChannel();
				eventChannel.emit('acceptKeepData', { msg: '会员信息已完善' });
				uni.navigateBack();
			},900)
		},
		refundMsg(){
			this.$refs.refundMain.open();
		},
		radioChange: function(evt) {
			app.itemsName = evt.detail.value;
			for (let i = 0; i < this.items.length; i++) {
				if (this.items[i].value === evt.detail.value) {
					this.current = i;
					break;
				}
			}
		},
		refundHandle(data){
			app.refundMsgText = data;
		},
		async getOrder(){
			app.loading = true;
			var res = await app.$api.order.detail.get({"order":app.orderId});
			app.loading = false;
			if (res.code && res.code == 0) {
				app.$dialog.showSuccess(res.msg);
				uni.navigateBack()
				return ;
			}
			app.goodsData = res.data.product;
			app.orderData = res.data;
		},
	}
}
</script>

<style lang="scss" scoped>
.content{
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #f1f1f1;
	display: flex;
	flex-direction: column;
	.line-height{
		height: 40rpx;
		width: 100%;
	}
}
.right-input{
	border: 0;
	box-shadow: none;
	text-align: right;
	width: 100%;
}
.flex-radio{
	display: flex;
	align-items: center;
	gap: 20rpx;
	.uni-list-cell{
		display: flex;
		align-items: center;
	}
}
.goods-body{
	height: 0;
	flex: 1;
}
.footer{
	background-color: #fff;
	padding: 20upx 20upx 0 20upx;border-top: 2upx solid #f8f8f8;
	.footer-safe {
		height: env(safe-area-inset-bottom);width: 100%;
	}
	.tips{
		font-size: 24rpx;
		color: #999;
		margin-bottom: 20rpx;
	}
	.btn{
		font-size: 32rpx;
		height: 100upx;
		border-radius: 10upx;
		line-height: 100upx;
		text-align: center;
		min-width: 200rpx;
		color: #333;
		border: 2rpx solid #ccc;
		&.full{
			background-color: $main-color;
			color: #fff;
			border: 2rpx solid $main-color;
		}
	}
}
.order-body {
	width: 95%;
	margin: 20rpx auto;
	.order-info{
		border-radius: 20rpx;
		background-color: #fff;padding: 20upx;margin-top: 20upx;
		.title{font-size: 32upx;color: #333;font-weight: bold;margin-bottom: 20upx;}
		.info-item{
			font-size: 28upx;display: flex;align-items: center;
			padding: 30rpx 0;
			.name{
				text {
					color: $main-color;
					margin-left: 10rpx;
				}
			}
			.right{
				&.red{
					color: $main-color;
					font-size: 32rpx;
				}
				display: flex;
				align-items: center;
				color: #666;margin-left: auto;margin-right: 0;
				flex: 1;
				justify-content: right;
				image {
					width: 40rpx;
					height: 40rpx;
				}
				text{border: 2upx solid #ccc;color: #333;font-size: 24upx;padding: 0 15upx;margin-left: 20upx;border-radius: 5upx;}
			}
		}
	}
	.item-goods{
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		.item-goods-body{
			display: flex;
			align-items: center;
			gap: 20rpx;
		}
		.stock{
			text-align: right;
		}
		.image {
			height: 140rpx;
			overflow: hidden;display: flex;align-items: center;min-width: 140rpx;
			position: relative;
			image {
				width: 140rpx;
				border-radius: 10upx;
				height: 100%;
			}
		}
		.info{
			flex: 1 1 0%;
			overflow: hidden;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.name {
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 32rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					 -webkit-box-orient: vertical;
					color: #333;
					font-weight: 900;
				}
			}
			.price-right{
				text-align: right;
				color: $main-color;
				margin-top: 20rpx;
				font-size: 28rpx;
				text {
					font-size: 30rpx;
					font-weight: 800;
				}
			}
			.tags {
				color: #94a3b8;
				font-size: 24rpx;
				margin: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.price {
					font-size: 28rpx;
					color: $main-text-color;
					font-weight: 600;
				}
			}
		}
	}
}
</style>