discounts-minapp/my/order/scenic/refund.vue

<template>
	<view class="refund">
		
		<view class="content ticket-info">
			<view class="title">
				{{info.goodsList[0].goodsInfo.goodsName}}
			</view>
		
			<view class="item">
				<view class="value">
					出游日期
				</view>
				<view class="value">
					{{info.goodsList[0].goodsInfo.startTime}}
				</view>
			</view>
			<view class="item">
				<view class="value">
					预订数量
				</view>
				<view class="value">
					{{info.goodsList[0].goodsInfo.bookNumber}}
				</view>
			</view>
		</view>
		
		<view class="content" >
			<view class="title">
				交易信息
			</view>
			
			<view class="item">
				<view class="label">
					金额
				</view>
				<view class="value black">
					￥{{info.totalAmount}}
				</view>
			</view>
			<view class="item" >
				<view class="label">
					优惠券
				</view>
				<view class="value red">
					-￥{{info.discountAmount}}
				</view>
			</view>
			
			<view class="item">
				<view class="label">
					合计
				</view>
				<view class="value">
					<text class="red fs28">￥{{info.payAmount}}</text>
				</view>
			</view>
		</view>

		
		
		<view class="content">
			
			<view class="item">
				<view class="label">
					实付金额
				</view>
				<view class="value">
					<text class="red fs28">￥{{info.payAmount}}</text>
				</view>
			</view>
			<view class="notice">
				1-3个工作日退还至原支付方，将以实际退款金额为准
			</view>
			
		</view>
		
		<view class="content">
			<view class="item">
				<view class="label">
					说明
				</view>
			</view>
			<u--form labelPosition="left" labelWidth="150rpx" errorType="toast" :model="query" :rules="rules" ref="query">
				<u-form-item
						label="退订类型"
						borderBottom
						ref="causeType"
						required
						prop="causeType"
				>
					<view class="type-box" @click="chooseType">
						{{query.causeType | filterType(that)}}
						<image class="right-icon" src="@/static/right.png" mode=""></image>
					</view>
				</u-form-item>
				<u-form-item  prop="causeContent" v-if="query.causeType == 5" :borderBottom="false" ref="item1">
					<textarea class="desc" v-model="query.causeContent" :maxlength="50" placeholder="请输入原因，我们将尽心为您服务"></textarea>
				</u-form-item>
			
			</u--form>
		</view>
		
		 <u-picker :show="show" :columns="columns" closeOnClickOverlay keyName="label" @cancel="close" @close="close" @confirm="confirm"></u-picker>

		<button class="save-btn" type="default" :loading="loading" @click="submit">提交</button>

	</view>
</template>

<script>
import {applyRefund} from '@/api/payment.js'
import {tuiPiao} from '@/api/scenic.js'
	export default {
		data() {
			return {
				that:this,
				show:false,
				loading:false,
				info: {},
				query:{
					  "causeContent": "",
					  "orderId": "",
					  'causeType':0
					 
				},
				rules:{
					'causeContent':{
						required: true,
						message: '请输入申请原因',
						// blur和change事件触发检验
						trigger: ['blur', 'change'],
					},
				},
				columns: [
					[	{
							label: '行程变更',
							id: 0
						}, 
						{
							label: '价格不优惠',
							id: 1
						}, 
						{
							label: '门票预订错误',
							id: 2
						},
						{
							label: '未收到入园凭证',
							id: 3
						},
						{
							label: '景区闭园',
							id: 4
						},
						{
							label: '其他原因',
							id: 5
						},
						
					]
				],
					
					
			}
		},
		filters: {
			filterType: function(value,that) {
				let msg
				that.columns[0].map(item=>{
					if(value == item.id){
						msg = item.label
					}
				})
				return msg;
			},
		},
		methods: {
			confirm(val){
				this.show = false
				this.query.causeType = val.value[0].id
				if(this.query.causeType == 5){
					this.query.causeContent = ''
				}
			},
			close(){
				this.show = false
			},
			chooseType() {
				this.show = true
			},
			submit() {
				this.$refs.query.validate().then(() => {
					if(this.loading) return
					this.loading = true
					if(this.query.causeType != 5){
						this.query.causeContent = this.columns[0][this.query.causeType].label
					}
					console.log(this.query);
					tuiPiao(this.query).then(res=>{
						this.loading = false
						if(res.state == 'Success'){
							uni.showToast({
								title:'申请成功',
								icon:'success'
							})
							uni.navigateBack()
						}
					})
				})
			}
		},
		onReady() {
		    	this.$refs.query.setRules(this.rules)
		},
		onLoad() {
			let that = this
			const eventChannel = this.getOpenerEventChannel();
			if(JSON.stringify(eventChannel) !=='{}'){
				eventChannel.on('orderInfo', function(data) {
					that.info = data
					that.query.orderId = data.orderNo

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.refund {
		background: #F9F9F9;
		min-height: 100vh;
		padding-top: 20rpx;
		padding-bottom: 80rpx;
		
		.type-box{
			display: flex;
			justify-content: flex-end;
			text-align: center;
			.right-icon{
				width: 48rpx;
				height: 48rpx;
			}
		}

		.save-btn {
			width: 688rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: $uni-color-primary;
			box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			position: fixed;
			bottom: 60rpx;
			left: 50%;
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;
			transform: translateX(-50%);
		}

		.content{
			margin: 20rpx 30rpx;
			padding: 28rpx 24rpx;
			border-radius: 16rpx;
			background: #fff;
			.title{
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
			}
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 28rpx;
				.label {
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
				}
				
				.value {
					color: #999999;
					font-size: 28rpx;
				}
			}
			.desc {
				width: 100%;
				height: 268rpx;
				border-radius: 14rpx;
				border: 2rpx solid #DDDDDD;
				font-size: 24rpx;
				padding: 24rpx;
				box-sizing: border-box;
				margin-top: 16rpx;
			}
		}
		
		.ticket-info{
			.title{
				font-weight: 600;
				font-size: 36rpx;
				color: #222222;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: 10rpx;
			}
			.notice{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 20rpx;
				.jiantou{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		.notice {
			margin-top: 16rpx;
			font-weight: 400;
			color: #AAAAAA;
			font-size: 24rpx;
		}

		.black {
			color: #222222 !important;
		}

		.red {
			color: red !important;
		}

		.fs28 {
			font-size: 28rpx !important;
			font-weight: bold;
		}

		.info {
			.order-info {
				display: flex;

				.icon {
					width: 164rpx;
					height: 164rpx;
					border-radius: 16rpx;
				}

				.shop-info {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					margin-left: 24rpx;

					.title {
						color: #181818;
						font-size: 28rpx;
					}
					.goods-desc{
						font-size: 24rpx;
						color: #AAAAAA;
						width: 450rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-top: 10rpx;
					}

					.price {
						font-weight: 600;
						font-size: 32rpx;
						color: #FF4D3A;
					}

					.code-btn {
						width: 88rpx;
						height: 32rpx;
						line-height: 32rpx;
						text-align: center;
						font-size: 22rpx;
						color: #FC8945;
						border-radius: 0rpx 16rpx 0rpx 16rpx;
						border: 2rpx solid #FC8945;
					}
				}
			}


		}
	}
</style>