【类 型】：feat
【原 因】： 【过 程】：订单退款页面 目前完成1：调用订单详情 2：设置申请退款金额 3：设置退款说明 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
air
parent
fe539c3554
commit
814066dffc
239
pages/shop/refund.vue
Normal file
239
pages/shop/refund.vue
Normal file
@ -0,0 +1,239 @@
|
|||||||
|
<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" 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
|
||||||
|
},
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
parseTime, //日期 格式化
|
||||||
|
formatPrice, //价格 格式化
|
||||||
|
truncate
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
requestRefund_price: {
|
||||||
|
handler(val) {
|
||||||
|
let refund_price = this.formatPrice(Number(val))
|
||||||
|
if (refund_price > this.fullPrice) { //限制退款金额 上限为订单的总金额
|
||||||
|
this.requestRefund_price = this.fullPrice
|
||||||
|
}else{
|
||||||
|
this.requestRefund_price = refund_price
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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>
|
||||||
Loading…
Reference in New Issue
Block a user