253 lines
5.6 KiB
Vue
253 lines
5.6 KiB
Vue
<template>
|
||
<view class="refund">
|
||
<view class="radios-container">
|
||
<u-radio-group v-model="value" @change="radioChange">
|
||
<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_pay_price }}</text>
|
||
<text>x{{ item.goods_num }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</label>
|
||
</u-radio-group>
|
||
</view>
|
||
<view class="refund-details">
|
||
<view class="goods-number">
|
||
<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"></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,
|
||
}
|
||
},
|
||
computed: {
|
||
totalPrice() {
|
||
return (this.goods.goods_pay_price * this.num).toFixed(2);
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
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.verifyParams()) return false;
|
||
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,
|
||
}
|
||
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;
|
||
.radio-view {
|
||
background-color: #FFFFFF;
|
||
padding: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 1rpx;
|
||
.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> |