great_mobileui/center/refund.vue

<template>
	<view class="pages">
		<view class="" :style="{height: navHeight+'px' }"></view>
		<view class="navbar-box">
			<u-navbar title="申请退款" :safeAreaInsetTop="true" @leftClick="leftClick" :titleStyle="{color:'#fff'}" leftIconColor="#fff" bgColor="#EF1818"></u-navbar>
		</view>
		<view class="page-wrap">
			<view class="box base-info">
				<view class="title u-flex u-row-between">
					<text>申请退款金额</text>
					<text>¥ {{refundAmount}}</text>
				</view>
				<view class="con">
					（预计3个工作日内退回）
				</view>
			</view>
			<view class="box reason">
				<view class="title">退款原因（必填）</view>
				<view class="select-reason u-flex u-row-between" @click="reasonshow=true">
					<text>{{refundReason||'请选择原因'}}</text>
					<u-icon name="arrow-down" color="#E5E5E5" size="36rpx"></u-icon>
				</view>
				<u-picker :show="reasonshow" :columns="reasonList" @confirm="confirmReason" @cancel="reasonshow=false"></u-picker>
			</view>
		</view>
		<view class="btn-wrap">
			<view class="inner">
				<view class="btn" @click="submit">确认退款</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	export default {
		mixins: [systemInfo], // 使用mixin
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				orderId:'',
				refundAmount:'',
				viewerList:[],
				refundReason:'',
				reasonshow:false,
				reasonList:[
					[
						'选错场次',
						'计划有变',
						'其他'
					]
				],
				params:{
					
				},
				templateIdList:[],//微信小程序订阅消息
				
			}
		},
		onShow() {
		},
		onLoad(page) {
			console.log('page',page);
			this.orderId = page.id;
			this.refundAmount = page.refundAmount;
			this.viewerList = JSON.parse(page.viewerList);
			this.getSystemInfo();
			this.getTemplateIdList();//获取模板列表

		},
		methods: {
			leftClick(e){
				let pages = getCurrentPages();
				if(pages.length==1){
					// console.log('1111');
					uni.$u.route('/pages/index/index')
				}else{
					// console.log('2222222');
					uni.navigateBack()
				};
			},
			getTemplateIdList(){
				this.$u.api.templateIdList({templateLabel:'order_refund'}).then(res=>{
					console.log('res',res.data);
					this.templateIdList = res.data.list.map(item=>{
						return item.templateId
					});
					// if(this.templateIdList.length>0){
					// 	this.templateEven();
					// }
				}).catch(err=>{
					console.log('getTemplateIdList',err);
				})
			},
			confirmReason(e){
				console.log('confirmReason',e.value[0]);
				this.refundReason = e.value[0];
				this.reasonshow = false;
			},
			submit(){
				if(!this.refundReason){
					uni.$u.toast('请选择原因')
					return
				}
				// this.templateEven();
				// #ifdef MP
				this.setTemplate();
				// #endif
				// #ifdef H5
				this.handleSubmit();
				// #endif
				
			},
			handleSubmit(){
				let params = {
					orderId:this.orderId,
					refundReason:this.refundReason,
					refundAmount:this.refundAmount,
					viewerList:this.viewerList
				}
				this.$u.api.refundSubmit(params).then(res=>{
					uni.$u.toast(res.msg)
					// uni.navigateBack()
					setTimeout(()=>{
						uni.$u.route('/center/order');
					},1500)
					console.log('res',res.data);
				}).catch(err=>{
					console.log('refundSubmit',err);
				})
			},
			// 订阅消息
			templateEven(){
				let that = this
				wx.showModal({
					  title: '温馨提示',
					  content: '为更好的促进与您的交流，服务号需要实时向您发送消息',
					  confirmText:"同意",
					  cancelText:"拒绝",
					  success: function (res) {
						  if (res.confirm) {
							 //调用订阅消息
							  console.log('用户点击确定');
							  //调用订阅
							  that.setTemplate();
						  } else if (res.cancel) {
							  console.log('用户点击取消');
							  ///显示第二个弹说明一下
							  wx.showModal({
								title: '温馨提示',
								content: '拒绝后您将无法获取实时的消息',
								confirmText:"知道了",
								showCancel:false,
								success: function (res) {
									that.handleSubmit();
								  ///点击知道了的后续操作 
								  ///如跳转首页面 
								}
							});
						  }
					  }
				  });
			},
			// 设置小程序订阅消息
			setTemplate() {
				let that = this;
				// console.log('templateIdList',this.templateIdList);
				wx.requestSubscribeMessage({  
					tmplIds: this.templateIdList,  
					success (res) {  
						// that.handleSubmit();
						console.log("success:",res);  
					},  
					fail (res) {  
						console.log("fail:",res);  
					},  
					complete (res) {  
						that.handleSubmit();
						console.log("complete:",res);  
					}  
				})  
			},

		}
	}
</script>
<style>
	page{background-color: #F7F7F9;}
</style>
<style lang="scss" scoped>
.page-wrap{
	padding: 32rpx 16rpx;
}
.box{
	margin-bottom: 24rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(221,221,221,0.5);
	border-radius: 20rpx;
	padding: 36rpx 24rpx;
	.title{
		font-size: 28rpx;
		font-weight: 500;
		color: #2D2D2D;
		margin-bottom: 38rpx;
	}
}
.base-info{
	.con{
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
		text-align: right;
	}
}
.reason{
	.select-reason{
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 8rpx;
		border: 2rpx solid #E5E5E5;
		padding: 0 24rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #363636;
	}
}
.btn-wrap{
	height: 92rpx;
	.inner{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 66rpx;
	}
	.btn{
		height: 92rpx;
		line-height: 92rpx;
		width:80%;
		margin: 0 auto;
		background: linear-gradient(90deg, #FF7878 0%, #ED0000 100%);
		border-radius: 46rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
	}
}
</style>