discounts-minapp/my/order/refund.vue

<template>
	<view class="refund">
		<view class="shop-box">
			<view class="shop-name">
				{{info.shopName}}
			</view>
			<view class="address">
				贵州省贵阳市花溪区天河潭旅游度假区天河潭奥特莱斯F4
			</view>
		</view>

		<view class="content info">
			<view class="order-info">
				<image class="icon" :src="info.goodsList[0].goodsImg" mode=""></image>
				<view class="shop-info">
					<view class="title">
						{{info.goodsList[0].goodsName}}
					</view>
					<view class="price">
						￥{{info.goodsAmount}}
					</view>

				</view>
			</view>

			<view class="item">
				<view class="label">
					购买数量
				</view>
				<view class="value black">
					1
				</view>
			</view>
			<view class="notice">
				最多可退1
			</view>

			<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 class="item">
				<view class="label">
					说明
				</view>
			</view>
			<u--form labelPosition="left" errorType="toast" :model="query" :rules="rules" ref="query">
				<u-form-item  prop="remark" :borderBottom="false" ref="item1">
					<textarea class="desc" v-model="query.remark" placeholder="请输入原因，我们将尽心为您服务"></textarea>
				</u-form-item>

			</u--form>

			

		</view>

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

	</view>
</template>

<script>
import {applyRefund} from '@/api/payment.js'
	export default {
		data() {
			return {
				info: {},
				query:{
					  "remark": "",
					  "orderNo": "",
					 
				},
				rules:{
					'remark':{
						required: true,
						message: '请输入申请原因',
						// blur和change事件触发检验
						trigger: ['blur', 'change'],
					},
				}
					
					
			}
		},
		methods: {
			submit() {
				this.$refs.query.validate().then(() => {
					applyRefund(this.query).then(res=>{
						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.orderNo = data.orderNo

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.refund {
		background: #F9F9F9;
		min-height: 100vh;
		padding-top: 20rpx;
		padding-bottom: 80rpx;

		.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%);
		}

		.shop-box {
			width: 690rpx;
			margin: 0 30rpx 20rpx;
			padding: 24rpx 24rpx 30rpx;
			background: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;

			.shop-name {
				font-size: 32rpx;
				color: #181818;
			}

			.address {
				color: #999999;
				font-size: 24rpx;
				margin-top: 15rpx;
			}
		}

		.content {
			margin: 0 30rpx 20rpx;
			padding: 24rpx;
			border-radius: 16rpx;
			background: #fff;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 28rpx;

				.label {
					color: #222222;
					font-size: 28rpx;
				}

				.value {
					color: #999999;
					font-size: 28rpx;
				}
			}

			.notice {
				margin-top: 16rpx;
				font-weight: 400;
				color: #AAAAAA;
				font-size: 24rpx;
			}

			.desc {
				width: 100%;
				height: 268rpx;
				border-radius: 14rpx;
				border: 2rpx solid #DDDDDD;
				font-size: 24rpx;
				padding: 24rpx;
				box-sizing: border-box;
				margin-top: 16rpx;
			}


		}


		.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;
					}

					.price {
						color: #181818;
						font-size: 32rpx;
						font-weight: bold;
					}

					.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>