fed1d496ed
【原 因】：防止客户 填入过大的退款金额 前端过滤 【过 程】：申请退款金额的 cell 失焦 自动格式化（保留小鼠后两位） 超过订单总金额 自动设生成总金额 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
239 lines
7.4 KiB
Vue
239 lines
7.4 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>
|
||
<!-- 申请订单 -->
|
||
<view class="m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow">
|
||
<view class="m-b-24 borderBDas flex msb mub">
|
||
<view class="fb fz36 l-h-18">申请订单</view>
|
||
<view class="fcb fz24 l-h-12">订单号：{{order_sn}}</view>
|
||
</view>
|
||
<view class="m-t-24 flex msb">
|
||
<view class="flex3 ofh">
|
||
<scroll-view class="scroll-view_H" scroll-x="true">
|
||
<view class="scroll-view-item_H m-r-12" v-for="(ps,index) in order.product_snapshot"
|
||
:key="index">
|
||
<u--image :src="ps.spu_photo[0]" width="147rpx" height="110rpx" radius="4rpx" />
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="flex1 fcb fz24 flex mr md">
|
||
共{{order.total_num}}件
|
||
</view>
|
||
</view>
|
||
<view class="fz28 borderBDas p-b-12 p-t-12" v-if="order!==null">
|
||
<view class="flex msb l-h-18">
|
||
<view>商品小计</view>
|
||
<view>¥{{order.total_price | formatPrice}}</view>
|
||
</view>
|
||
<view class="flex msb l-h-18">
|
||
<view>外送费</view>
|
||
<view>¥{{order.transport_price | formatPrice}}</view>
|
||
</view>
|
||
<view class="flex msb l-h-18">
|
||
<view>打包服务费</view>
|
||
<view>¥{{order.pack_price | formatPrice}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex mr mac l-h-18 m-t-24">
|
||
<view class="fcb fz24">合计</view>
|
||
<view class="m-l-12 fz36 fb" v-if="fullPrice!==null">¥{{fullPrice | formatPrice}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 退款金额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>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
parseTime,
|
||
formatPrice,
|
||
truncate
|
||
} 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, //退款说明 其他文本框最多字数限制
|
||
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.order_sn = options.order_sn // 从提交订单页面传递过来的订单号
|
||
this.requestRefund_price = this.fullPrice //默认申请退款金额 为订单的总金额
|
||
},
|
||
methods: {
|
||
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)
|
||
}
|
||
},
|
||
},
|
||
filters: {
|
||
parseTime, //日期 格式化
|
||
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> |