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>¥ 68.6</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>{{reason||'请选择原因'}}</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">确认退款</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	export default {
		mixins: [systemInfo], // 使用mixin
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				reason:'',
				reasonshow:false,
				reasonList:[
					[
						'选错场次',
						'不想看了',
					]
				],
				params:{
					
				}
				
			}
		},
		onShow() {
		},
		onLoad(page) {
			console.log('page',page);
			this.getSystemInfo();

		},
		methods: {
			leftClick(e){
				let pages = getCurrentPages();
				if(pages.length==1){
					uni.$u.route('/pages/index/index')
				}else{
					uni.navigateBack()
				};
			},
			confirmReason(e){
				console.log('confirmReason',e.value[0]);
				this.reason = e.value[0];
				this.reasonshow = false;
			}

		}
	}
</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>