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