310 lines
7.0 KiB
Vue
310 lines
7.0 KiB
Vue
<template>
|
|
<view class="refund">
|
|
<view class="radios-container">
|
|
<view v-if="type == 2">
|
|
<label class="radio-view" v-for="(item, index) in goodsList" :key="index">
|
|
<view class="store_info">
|
|
<view class="info_img">
|
|
<image :src="item.goods_image" mode="">
|
|
</view>
|
|
<view class="info_txt">
|
|
<view class="content u-line-2">
|
|
{{ item.goods_name }}
|
|
</view>
|
|
<view class="much">
|
|
<text>￥{{ item.goods_price }}</text>
|
|
<text>x{{ item.goods_num }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</label>
|
|
</view>
|
|
|
|
<u-radio-group v-model="value" @change="radioChange" v-else>
|
|
<label class="radio-view" v-for="(item, index) in goodsList" :key="index">
|
|
<view class="radio">
|
|
<u-radio color="#F0AD4E" :name="item.goods_id" active-color="#FF780F" icon-size="24" shape="circle"></u-radio>
|
|
</view>
|
|
<view class="store_info">
|
|
<view class="info_img">
|
|
<image :src="item.goods_image" mode="">
|
|
</view>
|
|
<view class="info_txt">
|
|
<view class="content u-line-2">
|
|
{{ item.goods_name }}
|
|
</view>
|
|
<view class="much">
|
|
<text>￥{{ item.goods_price }}</text>
|
|
<text>x{{ item.goods_num }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</label>
|
|
</u-radio-group>
|
|
</view>
|
|
<view class="refund-details">
|
|
<view class="goods-number" v-if="type != 2">
|
|
<view>选择数量</view>
|
|
<u-number-box :input-width="40" :input-height="38" :size="22" bg-color="#FFFFFF" :disabled-input=true color="#FF780F" :max="goods.goods_num" v-model="num" :disabled="type == 2"></u-number-box>
|
|
</view>
|
|
<view class="refund-price">
|
|
<view class="price">
|
|
<view class="title">退款金额</view>
|
|
<view class="value">￥{{ totalPrice }}</view>
|
|
</view>
|
|
<view class="tips">若退款成功，将退还给您 ￥{{ totalPrice }}</view>
|
|
</view>
|
|
<view class="refund-text">
|
|
<view class="title">申请说明</view>
|
|
<u-input v-model="refundText" type="textarea" placeholder="必填，请详细说明退款理由" />
|
|
</view>
|
|
</view>
|
|
<view class="submit-btn" @click="applyRefund">提交申请</view>
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
oid: '',
|
|
goodsList: [],
|
|
goods: {
|
|
goods_num: 0,
|
|
goods_pay_price: 0,
|
|
},
|
|
value: '',
|
|
refundText: '',
|
|
num: 0,
|
|
type:0,
|
|
sel:true
|
|
}
|
|
},
|
|
computed: {
|
|
totalPrice() {
|
|
if(this.type == 2){
|
|
let pac = 0;
|
|
for(let i in this.goodsList){
|
|
pac += parseFloat(this.goodsList[i].goods_pay_price) * 100 ;
|
|
}
|
|
return pac / 100;
|
|
}else{
|
|
return this.goods.goods_pay_price;
|
|
}
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.type = 2; // 需求更改 所有订单只能全退，不可选择商品。
|
|
// this.type = option.type
|
|
this.oid = option.oid;
|
|
this.getOrderInfo(option.oid);
|
|
},
|
|
methods: {
|
|
radioChange(e){
|
|
const goodsList = this.goodsList.filter(goods => {
|
|
return e == goods.goods_id;
|
|
})
|
|
// console.log(goodsList);
|
|
this.goods = goodsList[0];
|
|
this.num = this.goods.goods_num;
|
|
console.log(this.goods);
|
|
},
|
|
getOrderInfo(id) {
|
|
this.$u.api.getOrderInfo({
|
|
order_id: id,
|
|
}).then(res => {
|
|
if(res.errCode == 0) {
|
|
// this.orderInfo = res.data;
|
|
this.goodsList = res.data.extend_order_goods;
|
|
// console.log(this.goodsList);
|
|
}
|
|
// uni.stopPullDownRefresh(); // 结束刷新
|
|
})
|
|
},
|
|
verifyParams() {
|
|
if(!this.goods.goods_id) {
|
|
this.$u.toast('请选择退款商品');
|
|
return false;
|
|
}
|
|
if(this.num == 0) {
|
|
this.$u.toast('请选择退款数量');
|
|
return false;
|
|
}
|
|
if(this.$u.test.isEmpty(this.refundText)) {
|
|
this.$u.toast('退款说明不可为空');
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
applyRefund() {
|
|
if(this.type !=2 && !this.verifyParams()) return false;
|
|
// addrefundall 只需要订单id 和 说明
|
|
let params = {
|
|
order_id: this.oid,
|
|
// goods_id: this.goods.goods_id,
|
|
// refund_amount: Number(this.totalPrice),
|
|
reason_info: this.refundText,
|
|
// goods_num: this.num,
|
|
}
|
|
console.log(params)
|
|
if(this.type == 2){
|
|
this.$u.api.addrefundall(params).then(res => {
|
|
// console.log(JSON.stringify(res))
|
|
if(res.errCode == 0) {
|
|
this.$refs.uToast.show({
|
|
title: res.message,
|
|
type: 'success',
|
|
back: true,
|
|
})
|
|
} else {
|
|
this.$refs.uToast.show({
|
|
title: res.message,
|
|
type: 'error'
|
|
})
|
|
}
|
|
})
|
|
}else{
|
|
this.$u.api.refundOrder(params).then(res => {
|
|
if(res.errCode == 0) {
|
|
this.$refs.uToast.show({
|
|
title: res.message,
|
|
back: true,
|
|
})
|
|
} else {
|
|
this.$refs.uToast.show({
|
|
title: res.message,
|
|
type: 'error'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.refund {
|
|
min-height: calc(100vh - var(--window-top));
|
|
background-color: #EDEDED;
|
|
.radios-container {
|
|
margin-bottom: 20rpx;
|
|
.u-radio-group {
|
|
width: 100%;
|
|
}
|
|
.radio-view {
|
|
width: 100%;
|
|
background-color: #FFFFFF;
|
|
padding: 26rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1rpx;
|
|
box-sizing: border-box;
|
|
.radio {
|
|
margin-right: 20rpx;
|
|
}
|
|
.store_info {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
.info_img{
|
|
>image{
|
|
width: 180rpx;
|
|
height: 160rpx;
|
|
background-color: aqua;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
.info_txt{
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
.content{
|
|
height: 74rpx;
|
|
line-height: 37rpx;
|
|
font-size: 30rpx;
|
|
color:rgba(51,51,51,1);
|
|
}
|
|
.much{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.refund-details {
|
|
background-color: #FFFFFF;
|
|
.goods-number {
|
|
padding: 0 30rpx;
|
|
height: 100rpx;
|
|
background: rgba(255,255,255,1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 2rpx;
|
|
/deep/ .u-numberbox {
|
|
border: 1rpx solid rgba(217,215,215,1);
|
|
border-radius:4px;
|
|
.u-icon-minus, .u-icon-plus {
|
|
width: 38rpx;
|
|
}
|
|
.u-number-input {
|
|
margin: 0;
|
|
color: #333 !important;
|
|
border: 1rpx #D9D7D7 solid {
|
|
top: 0px;
|
|
bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.refund-price {
|
|
background: rgba(255,255,255,1);
|
|
padding: 36rpx 30rpx;
|
|
margin-bottom: 2rpx;
|
|
.price {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 36rpx;
|
|
.title {
|
|
font-size: 30rpx;
|
|
color: rgba(51,51,51,1);
|
|
margin-right: 56rpx;
|
|
}
|
|
.value {
|
|
font-size: 28rpx;
|
|
color: rgba(244,14,14,1);
|
|
}
|
|
}
|
|
.tips {
|
|
font-size: 24rpx;
|
|
color: rgba(153,153,153,1);
|
|
}
|
|
}
|
|
.refund-text {
|
|
background: rgba(255,255,255,1);
|
|
padding: 36rpx 30rpx;
|
|
.title {
|
|
font-size: 30rpx;
|
|
color: rgba(51,51,51,1);
|
|
margin-bottom: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
.submit-btn {
|
|
width: 690rpx;
|
|
height: 98rpx;
|
|
background: rgba(255,120,15,1);
|
|
border-radius: 49rpx;
|
|
font-size: 36rpx;
|
|
color: rgba(255,255,255,1);
|
|
line-height: 98rpx;
|
|
text-align: center;
|
|
margin: 120rpx auto 0;
|
|
}
|
|
}
|
|
</style> |