jiaoyi-uni/pages/order/refund.vue

<template>
	<view>
		<block 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>
		</block>
		
		<block v-else>
			<view class="order-body">
				<view class="order-goods">
					<view class="goods-img"><image :src="orderData.img" mode="widthFix"></image></view>
					<view class="goods-info">
						<view class="name">{{ goodsData.product_name }}</view>
						<view class="desc">
							<view class="num">x {{ orderData.number }}</view>
							<view class="total">{{ $dialog.formatMoney(orderData.price,true) }}</view>
						</view>
					</view>
				</view>
				<view class="goods-safe">
					<view class="safe-item"><image src="/static/image/check.png"></image>过期退</view>
					<view class="safe-item"><image src="/static/image/check.png"></image>随时退</view>
				</view>
			</view>
			<view class="refund-msg" @click="openRule(1)">
				<view class="name">退款原因<text>*</text></view>
				<view class="refund-check">
					<view class="check-name" v-if="!refundVal">请至少选择1项</view>
					<view class="check-name" v-else>{{refundVal}}</view>
					<view class="check-img"><image src="/static/image/right.png"></image></view>
				</view>
			</view>
			<view class="refund-msg">
				<view class="name">退款方式</view>
				<view class="right">原路退回</view>
			</view>
			<view class="refund-tips">
				申请退款后不可取消，钱款预计1-3个自然日到账
			</view>
			<view class="order-pay-btn" v-if="orderData">
				<view class="pay-group">
					<view class="pay-money">
						<text>退款金额</text>
						{{orderData?$dialog.formatMoney(orderData.price,true):'0.00'}}
					</view>
					<view class="pay-btn">
						<button type="primary" @click="refundOrder()">提交申请</button>
						<!-- <pay-button-sdk
							:mode="2"
							:order-status="1"
							:goods-type="2"
							:goods-id="orderData.product_id"
							:order-id="orderData.order_sn"
							:refund-total-amount="orderData.price"
							:refund-id="orderData.order_sn"
							@getgoodsinfo="getGoodsInfo"  
							@placeorder="userLogin"  
							@error="onErrors"
							@pay="onPay"  
							@applyrefund="onRefund"
						></pay-button-sdk> -->
					</view>
				</view>
				
				<!-- <button type="primary" :disabled="disabled" @click="payNow">立即支付 </button> -->
				<view class="safe-height"></view>
			</view>
		</block>
		<uni-popup ref="rulepopup" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff">
			<view class="service-popup popup-height">
				<view class="title" @click="openRule(2)">退款原因（可多选） <view class="close"><image src="/static/image/close.png"></image></view></view>
				<view class="refund-list">
					<checkbox-group @change="checkboxChange">
						<view class="refund-item" v-for="(item,index) in refundList" :key="index">
							<view class="item-name">{{item.name}}</view>
							<view class="item-check">
								<checkbox :value="item.key" />
							</view>
						</view>
					</checkbox-group>
				</view>
				<view class="pup-btn">
					<button type="primary" @click="checkData">确定 </button> 
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/order.js";
var loadingPayBtn = false;
export default {
	data() {
		return {
			loading:true,
			order:"",
			poiData:null,
			goodsData:null,
			orderData:null,
			storeData:null,
			refundList:[
				{"name":"买多了/买错了","key":0},
				{"name":"计划有变，暂时不需要了","key":1},
				{"name":"不能外卖","key":2},
				{"name":"使用条件不清楚","key":3},
				{"name":"联系不上商家","key":4},
				{"name":"约不到合适的时间","key":5},
				{"name":"可用门店距离太远","key":6},
				{"name":"其他平台/方式购买更优惠","key":7},
				{"name":"评价不好","key":8},
			],
			refundCheck:[],
			refundVal:""
		}
	},
	onLoad({order}) {
		app = this;
		app.order = order;
		app.getOrder()
	},
	methods: {
		refundOrder(){
			if (app.refundCheck.length == 0) {
				return app.$dialog.showSuccess("请至少选择1项")
			}
			Api.refund({order:app.order,refund:app.refundVal}).then((res)=>{
				if(res.code == 0) {
					return app.$dialog.showSuccess(res.msg)
				}
				app.$dialog.showSuccess(res.msg,"none",function(){
					uni.navigateTo({
						url:"/pages/order/detail?order="+app.order
					})
				})
			})
		},
		checkboxChange(e){
			app.refundCheck = e.detail.value;
		},
		checkData(){
			if (app.refundCheck.length == 0) {
				return app.$dialog.showSuccess("请至少选择1项")
			}
			app.$refs.rulepopup.close();
			// 1. 过滤出选中的项
			const selectedItems = app.refundList.filter(item => 
				app.refundCheck.includes(String(item.key))
			);
			console.log(selectedItems)
			// 2. 提取 name
			const names = selectedItems.map(item => item.name);
			// 3. 逗号拼接
			app.refundVal = names.join(',');
		},
		openRule(type){
			if (type == 1) {
				app.$refs.rulepopup.open()
			} else {
				app.$refs.rulepopup.close()
			}
		},
		getOrder(){
			Api.detail({"order":app.order}).then((res)=>{
				app.loading = false;
				if (res.code && res.code !== 1) {
					app.$dialog.showSuccess(res.msg,function(){
						uni.switchTab({
							url:"/pages/order/order"
						})
					});
					return ;
				}
				app.poiData = res.data.poi;
				app.goodsData = res.data.product;
				app.orderData = res.data;
			})
		},
		onErrors(e){
			if (loadingPayBtn) {
				app.refundOrder()
				return ;
			}
			loadingPayBtn = true;
			console.log("错误",e)
		},
		userLogin(event) {
			return new Promise((resolve, reject) => {
				tt.login({
					success: () => resolve(),
					fail: () => reject()
				});
			});
		},
		onPay(event){
			const { status, outOrderNo, result } = event.detail;
			console.log(status, outOrderNo, result)
			if (status === 'success') {
				const { code } = result;
				if (code === 0) {
					// 继续支付成功
				} else {
					// 继续支付失败（超时、取消、关闭）
				}
			} else {}
		},
		onRefund(event){
			const { orderId } = event.detail; 
			const extra = { orderId };
			return new Promise(resolve => { 
			  resolve(extra); 
			}); 
		},
		getGoodsInfo(){
			
		}
	}
}
</script>

<style lang="scss" scoped>
page{background-color: #f8f8f8;}
.pup-btn{padding: 20upx;}
.skeleton{width: 90%;margin: 20upx auto;}
.refund-msg{padding: 20upx;display: flex;align-items: center;justify-content: space-between;background-color: #fff;width: calc(95% - 40upx);margin: 20upx auto;font-size: 28upx;color: #333;}
.refund-msg .name text{color: #f00;}
.refund-msg .refund-check{display: flex;align-items: center;gap: 10upx;font-size: 28upx;color: #666;flex: 1;overflow: hidden;justify-content: end;}
.refund-msg .refund-check .check-img{display: flex;align-items: center;justify-content: center;}
.refund-msg .refund-check image{width: 40upx;height: 40upx;}
.refund-tips{font-size: 24upx;color: #666;padding: 20upx;}
.service-popup.popup-height{height: 60vh;}
.service-popup.popup-white{background-color: #fff;margin-top: 20upx;}
.service-popup.popup-white .title{border-bottom: 2upx solid #f8f8f8;}
.service-popup .title{line-height: 80upx;font-size: 32rpx;color: #333;font-weight: bold;padding: 0 20upx;display: flex;align-items: center;}
.service-popup .title .close{margin-left: auto;margin-right: 0;display: flex;align-items: center;justify-content: center;}
.service-popup .title .close image{width: 40upx;height: 40upx;}
.service-popup .refund-list{padding: 20upx;}
.service-popup .refund-list .refund-item{display: flex;align-items: center;justify-content: space-between;font-size: 28upx;color: #333;padding: 15upx 0;}
.order-pay-btn{
	background-color: #fff;
	padding: 20upx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	.safe-height{
		height: env(safe-area-inset-bottom);
		width: 100%;
		background-color: #fff;
	}
	.pay-group{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.pay-money{
			font-size: 32upx;
			color: #f00;
			font-weight: bold;
			text{
				font-size: 24upx;
				font-weight: normal;
				color: #666;
			}
		}
	}
}
.order-body{padding: 20upx;}
.order-goods{display: flex;align-items: flex-start;background-color: #fff;padding: 20upx 20upx 0 20upx;}
.order-goods .goods-img{width: 200upx;overflow: hidden;}
.order-goods image{width: 200upx;border-radius: 10upx;}
.goods-info{margin-left: 20upx;font-size: 28upx;flex: 1;padding: 20upx 0;}
.goods-info .name{font-size: 30upx;color: #333;}
.goods-info .desc{font-size: 24upx;color: #999;display: flex;align-items: center;justify-content: space-between;margin: 20upx 0;}
.goods-info .total{font-size: 30upx;color: #333;text-align: right;font-weight: bold;}
.goods-safe{display: flex;align-items: center;font-size: 24rpx;color: #999;gap: 40upx;background: #fff;border-top: 2upx solid #f8f8f8;padding: 20upx;}
.goods-safe .safe-item{display: flex;align-items: center;}
.goods-safe image{width: 30upx;height: 30upx;margin-right: 10upx;}
</style>