185 lines
6.2 KiB
Vue
185 lines
6.2 KiB
Vue
<template>
|
||
<view class="waper">
|
||
<u-navbar @leftClick="leftClick" :placeholder="true" bgColor="#FFFFFF">
|
||
<view slot='center' style="font-size: 36rpx; font-weight: bold;">
|
||
申请退款
|
||
</view>
|
||
</u-navbar>
|
||
<view v-if="detail">
|
||
<view class="content" v-if="!reason">
|
||
<view class="amount">
|
||
<view class="label">退款金额</view>
|
||
<view class="price"><text>￥</text>{{ refund }}</view>
|
||
</view>
|
||
<view class="reason" @click="reason = true">
|
||
<view class="label">退款原因</view>
|
||
<view class="con">
|
||
<text>{{ isReason.dictLabel }}</text>
|
||
<u-icon name="arrow-right" color="rgba(0,0,0,0.85)" size="28rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="detailed">
|
||
<view class="title">退款明细</view>
|
||
<view class="row">
|
||
<view>房费</view>
|
||
<view>¥{{ detail.totalAmount }}</view>
|
||
</view>
|
||
<view class="row" v-if="amount">
|
||
<view>违约金</view>
|
||
<view>¥{{ amount }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="detailed">
|
||
<view class="title">退回方式</view>
|
||
<view class="row">
|
||
<view>退回原支付方式</view>
|
||
<view>预计1-3个工作日到账</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer" :style="'padding-bottom: ' + windowBottom + 'px;'">
|
||
<view class="btn btn1" @click="cancel">取消申请</view>
|
||
<view class="btn btn2" @click="confirm">确认提交</view>
|
||
</view>
|
||
</view>
|
||
<view class="content" v-if="reason">
|
||
<view class="h4">申请退款</view>
|
||
<view class="h8">请选择退款原因，以帮助我们改进</view>
|
||
<view class="list">
|
||
<view class="item" v-for="(item, index) in reasonList" :key="index" @click="changeReason(item)">
|
||
<view class="label">{{item.dictLabel}}</view>
|
||
<view class="noChange" v-if="isReason.dictValue != item.dictValue"></view>
|
||
<view class="isChange" v-if="isReason.dictValue == item.dictValue">
|
||
<u-icon name="checkmark" color="#fff" size="28rpx" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer" :style="'padding-bottom: ' + windowBottom + 'px;'">
|
||
<view class="btn3" @click="submit">提交</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
windowBottom: 0,
|
||
id: '',
|
||
amount: null,
|
||
refund: null,
|
||
detail: null,
|
||
reason: false,
|
||
reasonList: [],
|
||
isReason: {}
|
||
}
|
||
},
|
||
onLoad (options) {
|
||
this.id = options.id;
|
||
this.amount = Number(options.amount);
|
||
this.refund = options.refund;
|
||
this.getDate();
|
||
this.common();
|
||
this.windowBottom = this.$safeAreaBottom || uni.upx2px(20);
|
||
},
|
||
|
||
methods: {
|
||
async getDate() {
|
||
let res = await this.$http.hotelOrderDetail(this.id);
|
||
this.detail = res.data;
|
||
},
|
||
async common() {
|
||
const params = {
|
||
dictType: 'hotel_homestay_personal_refund_type'
|
||
}
|
||
let info = await this.$http.common(params)
|
||
if (info.code === 200) {
|
||
this.reasonList = info.data;
|
||
} else {
|
||
uni.$u.toast(info.msg);
|
||
}
|
||
},
|
||
changeReason(i) {
|
||
this.isReason = i;
|
||
},
|
||
submit() {
|
||
this.reason = false;
|
||
},
|
||
cancel() {
|
||
uni.navigateBack();
|
||
},
|
||
async confirm() {
|
||
if (!this.isReason.dictValue) {
|
||
uni.showToast({ mask: true, title: '请选择退款原因', icon: 'none' });
|
||
return false;
|
||
}
|
||
let params = {
|
||
orderId: this.id,
|
||
personalRefundType: this.isReason.dictValue
|
||
}
|
||
let info = await this.$http.hotelOrderCancel(params);
|
||
uni.$u.toast('提交成功');
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1500)
|
||
},
|
||
leftClick () {
|
||
if (this.reason) {
|
||
this.reason = false;
|
||
} else {
|
||
uni.navigateBack();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.waper { min-height: 100vh; background-color: #F6F6F6; }
|
||
.content {
|
||
padding: 24rpx; box-sizing: border-box;
|
||
.amount {
|
||
height: 103rpx; background: #FFFFFF; border-radius: 10rpx; padding: 0 24rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;
|
||
.label { font-size: 28rpx; color: rgba(0,0,0,0.85); }
|
||
.price {
|
||
font-weight: bold; font-size: 42rpx; color: #EE595A;
|
||
text { font-weight: 400; font-size: 24rpx; }
|
||
}
|
||
}
|
||
.reason {
|
||
height: 103rpx; margin-top: 22rpx; background: #FFFFFF; border-radius: 10rpx; padding: 0 24rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; font-size: 28rpx; color: rgba(0,0,0,0.85);
|
||
.con {flex: 1; display: flex; align-items: center; justify-content: flex-end;}
|
||
}
|
||
.detailed {
|
||
margin-top: 22rpx; background: #FFFFFF; border-radius: 10rpx; padding: 30rpx 24rpx; box-sizing: border-box;
|
||
.title { font-size: 28rpx; color: rgba(0,0,0,0.45); }
|
||
.row {
|
||
margin-top: 20rpx; display: flex; align-items: center; justify-content: space-between;
|
||
view { font-size: 28rpx; color: rgba(0,0,0,0.85); }
|
||
}
|
||
}
|
||
.h4 { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); }
|
||
.h8 { font-size: 26rpx; color: rgba(0,0,0,0.45); margin-top: 12rpx; }
|
||
.list {
|
||
margin-top: 24rpx; background-color: #FFFFFF;
|
||
.item {
|
||
margin: 0 24rpx; box-sizing: border-box; height: 109rpx; border-bottom: 1rpx solid #E8E8E8; display: flex; align-items: center; justify-content: space-between;
|
||
&:last-child { border-bottom: none; }
|
||
.label { font-size: 30rpx; color: rgba(0,0,0,0.85); }
|
||
.noChange { width: 42rpx; height: 42rpx; border-radius: 50%; border: 1rpx solid rgba(0,0,0,0.2); }
|
||
.isChange {
|
||
width: 42rpx; height: 42rpx; border-radius: 50%; border: 1rpx solid #03AE80; background-color: #03AE80; position: relative;
|
||
::v-deep .u-icon{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
|
||
}
|
||
}
|
||
}
|
||
.footer {
|
||
position: fixed; left: 0; bottom: 0; width: 100%; background: #FFFFFF; box-shadow: 0rpx -1rpx 6rpx 0rpx rgba(0,0,0,0.05); padding: 20rpx 24rpx 0; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end;
|
||
.btn { width: 200rpx; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 66rpx; font-size: 30rpx; }
|
||
.btn1 { border: 1rpx solid rgba(0,0,0,0.45); color: rgba(0,0,0,0.45); margin-right: 24rpx; }
|
||
.btn2 { background: #03AE80; color: #FFFFFF; }
|
||
.btn3 { width: 654rpx; height: 90rpx; background: #03AE80; border-radius: 49rpx; line-height: 90rpx; text-align: center; font-weight: 500; font-size: 32rpx; color: #FFFFFF; margin: 0 auto; }
|
||
}
|
||
}
|
||
</style> |