【类 型】：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