353aa1bb66
【原 因】：详情复框 改公用组件 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
278 lines
8.0 KiB
Vue
278 lines
8.0 KiB
Vue
<template>
|
|
<view>
|
|
<!-- topbar -->
|
|
<u-navbar title="申请退款" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
|
|
<view class="u-nav-slot" slot="left">
|
|
<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
|
|
</view>
|
|
</u-navbar>
|
|
<!-- 申请订单 -->
|
|
<orderCon tit='申请订单' :order='order'></orderCon>
|
|
<!-- 退款金额cell -->
|
|
<cell cellTit="申请退款金额" :required="true" @click="handledrRefund_priceShow" conClass="fcm"
|
|
:cellCon="requestRefund_price?'¥'+ requestRefund_price:''"></cell>
|
|
<!-- 退款说明cell -->
|
|
<cell cellTit="退款说明" :required="true" :cellCon="refund_remarkDescription | truncate(8)"
|
|
@click="handledrRefund_remarkShow"></cell>
|
|
<!-- 退款金额折叠层 -->
|
|
<u-popup :show="refund_priceShow" round="10" mode="bottom" @close="closeRefund_price" zIndex="10080"
|
|
:closeable="true">
|
|
<view class="p-24">
|
|
<!-- title -->
|
|
<view class="flex mc md">
|
|
<view class="fz32">申请金额</view>
|
|
</view>
|
|
<!-- form -->
|
|
<view class="ofa m-t-24 m-b-12 flex mub borderBDas" style="max-height: 60vh;">
|
|
<view class="fb fz32">¥</view>
|
|
<u-input placeholder="请输入金额" v-model="requestRefund_price" @blur="onRefundPriceBlur" type="digit"
|
|
border="false" />
|
|
</view>
|
|
<!-- 占位 -->
|
|
<view class="extra-space1"></view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 退款说明折叠层 -->
|
|
<u-popup :show="refund_remarkShow" round="10" mode="bottom" @close="closeRefund_remark" zIndex="10080"
|
|
:closeable="true">
|
|
<view class="p-24">
|
|
<!-- title -->
|
|
<view class="flex mc md">
|
|
<view class="fz32">退款说明</view>
|
|
</view>
|
|
<!-- list -->
|
|
<view class="ofa m-t-24 m-b-12 flex column" style="max-height: 60vh;">
|
|
<view v-for="(item,index) in refund_remark_presup" :key='index' @click="currentRemark=index"
|
|
class="flex mac msb fz28 borderBDas m-t-12" style="height: 60rpx;">
|
|
<view>{{item}}</view>
|
|
<view class="border rad-c radioBox" :class="currentRemark===index?'border-m bg-m':''">
|
|
<u-icon name="checkbox-mark" size="40rpx" color="#fff"
|
|
v-if="currentRemark===index"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="flex mac msb fz28 m-t-12" style="height: 60rpx;"
|
|
@click="currentRemark=refund_remark_presup.length+1">
|
|
<view class="flex mub">
|
|
<view>其他说明</view>
|
|
<view class="fz24 fcb m-l-12" v-if="currentRemark===refund_remark_presup.length+1">
|
|
{{ refund_remarkValue.length }}/{{ txtmaxlength }}
|
|
</view>
|
|
</view>
|
|
<view class="border rad-c radioBox"
|
|
:class="currentRemark===refund_remark_presup.length+1?'border-m bg-m':''">
|
|
<u-icon name="checkbox-mark" size="40rpx" color="#fff"
|
|
v-if="currentRemark===refund_remark_presup.length+1"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view @click="currentRemark=refund_remark_presup.length+1">
|
|
<u-input class="border" v-model="refund_remarkValue" type="textarea" placeholder="请填写您的退款说明"
|
|
:maxlength="txtmaxlength" :border="false" :auto-height="true" />
|
|
</view>
|
|
</view>
|
|
<!-- 占位 -->
|
|
<view class="extra-space1"></view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 按钮 -->
|
|
<view class="m-l-24 m-r-24 m-t-24 flex mr">
|
|
<view class="nullBut border fcb rad8 fz28 flex mac mc" @click="callPhone(shopCon.tel)">
|
|
联系客服
|
|
</view>
|
|
<view class="numberBut fci rad8 fz28 fb flex mac mc m-l-24" @click="handleSubmit"
|
|
:class="isPressed?'bg-g':'bg-m'">
|
|
确认
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
formatPrice,
|
|
truncate,
|
|
callPhone
|
|
} from '@/utils/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
order_sn: '', //订单号
|
|
refund_priceShow: false, //退款金额弹出层
|
|
requestRefund_price: null, //申请退款金额
|
|
|
|
refund_remark: '', //退款说明 提交时候的值
|
|
refund_remarkShow: false, //退款说明弹出层
|
|
currentRemark: -1, // 当前选中的退款有缘索引
|
|
refund_remarkValue: '', // 退款说明 其他输入的内容
|
|
txtmaxlength: 30, //退款说明 其他文本框最多字数限制
|
|
|
|
isPressed: false, //提交按钮是否锁定
|
|
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.order_sn = options.order_sn // 从提交订单页面传递过来的订单号
|
|
this.requestRefund_price = this.fullPrice //默认申请退款金额 为订单的总金额
|
|
},
|
|
methods: {
|
|
callPhone, //拨打电话
|
|
formatPrice, //格式化价格
|
|
handledrRefund_priceShow() {
|
|
if (!this.requestRefund_price) {
|
|
this.requestRefund_price = this.fullPrice
|
|
}
|
|
this.refund_priceShow = true
|
|
},
|
|
closeRefund_price() {
|
|
this.refund_priceShow = false
|
|
},
|
|
handledrRefund_remarkShow() {
|
|
this.refund_remarkShow = true
|
|
},
|
|
closeRefund_remark() {
|
|
this.refund_remarkShow = false
|
|
},
|
|
// 处理退款金额失焦
|
|
onRefundPriceBlur() {
|
|
// 使用 formatPrice 格式化输入的金额
|
|
this.requestRefund_price = this.formatPrice(this.requestRefund_price)
|
|
|
|
// 检查金额是否超过订单总金额
|
|
if (Number(this.requestRefund_price) > Number(this.fullPrice)) {
|
|
this.requestRefund_price = Number(this.fullPrice)
|
|
}
|
|
},
|
|
//提交订单
|
|
handleSubmit() {
|
|
if (this.isPressed) { //防止提交订单按钮重复点击
|
|
return
|
|
}
|
|
|
|
this.isPressed = true
|
|
|
|
//提交前检查
|
|
if (!this.refund_remarkDescription) {
|
|
uni.showToast({
|
|
title: '请填写退款说明',
|
|
icon: 'error'
|
|
})
|
|
this.isPressed = false
|
|
return
|
|
}
|
|
if (Number(this.requestRefund_price) === 0) {
|
|
uni.showToast({
|
|
title: '请填写退款额',
|
|
icon: 'error'
|
|
})
|
|
this.isPressed = false
|
|
return
|
|
}
|
|
|
|
//提交
|
|
uni.$u.http.post('/Api/Check/refundOrder', {
|
|
order_sn: this.order_sn, //订单号
|
|
shop_id: this.$store.state.shop_id, //商铺id
|
|
apply_price: Number(this.requestRefund_price), //申请价格
|
|
refund_remark: this.refund_remarkDescription //退款说明
|
|
}, {
|
|
header: {
|
|
'Token': this.$store.state.userInfo.token,
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
}
|
|
}).then(res => {
|
|
//成功申请退款
|
|
if (res.data.status === 1) {
|
|
//跳转到订单 退款tab页面
|
|
uni.navigateTo({
|
|
url: `/pages/order/index`
|
|
})
|
|
} else if (res.data.status === -1) {
|
|
uni.removeStorage({ //清除用户信息 跳转首页
|
|
key: 'userInfo',
|
|
success: (res) => {
|
|
this.$store.commit('clearUserInfo')
|
|
uni.redirectTo({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'error'
|
|
})
|
|
this.isPressed = false
|
|
}
|
|
})
|
|
}
|
|
},
|
|
filters: {
|
|
formatPrice, //价格 格式化
|
|
truncate
|
|
},
|
|
watch: {},
|
|
computed: {
|
|
//订单
|
|
order() {
|
|
if (this.order_sn) {
|
|
return this.$store.state.orderList.find(item => item.order_sn === this.order_sn)
|
|
} else {
|
|
return null
|
|
}
|
|
},
|
|
//订单总价格
|
|
fullPrice() {
|
|
if (this.order) {
|
|
return this.formatPrice(Number(this.order.transport_price) + Number(this.order.pack_price) + Number(
|
|
this
|
|
.order.total_price))
|
|
} else {
|
|
return 0
|
|
}
|
|
|
|
},
|
|
//商铺信息
|
|
shopCon() {
|
|
return this.$store.state.shopCon
|
|
},
|
|
//退款说明预设列表
|
|
refund_remark_presup() {
|
|
if (this.shopCon !== null && this.shopCon.refund_remark_presup !== '[]') {
|
|
return JSON.parse(this.shopCon.refund_remark_presup)
|
|
} else {
|
|
return []
|
|
}
|
|
},
|
|
//退款说明缩略显示
|
|
refund_remarkDescription() {
|
|
if (this.currentRemark !== -1) {
|
|
if (this.currentRemark === this.refund_remark_presup.length + 1) {
|
|
if (this.refund_remarkValue) {
|
|
return this.refund_remarkValue
|
|
}
|
|
} else {
|
|
return this.refund_remark_presup[this.currentRemark]
|
|
}
|
|
}
|
|
return ''
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.scroll-view_H {
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.scroll-view-item_H {
|
|
display: inline-block;
|
|
height: 110rpx;
|
|
line-height: 110rpx;
|
|
}
|
|
|
|
.radioBox {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
</style> |