Huanyuyuehui/pages/admin/refundList/index.vue

412 lines
9.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<view v-if="orderList.length > 0">
<view class='refund'>
<view>
<view class='list'>
<view class='item acea-row row-between-wrapper'>
<view v-for="goods in orderList" :key="goods.cart_id" class='picTxt acea-row'>
<view v-if="goods.refund_num > 0" class="checkbox" @click.stop="goodsCheck(goods)">
<text v-if="goods.check" class="iconfont icon-xuanzhong1"></text>
<text v-else class="iconfont icon-weixuanzhong"></text>
</view>
<view v-else class="checkbox">
<text class="iconfont icon-weixuanzhong disabled"></text>
</view>
<view class='pictrue'>
<image :src='goods.cart_info.product.image'></image>
</view>
<view class='text'>
<view class='line1 name'>{{goods.cart_info.product.store_name}}</view>
<view class="attr line1">{{ goods.cart_info.productAttr.sku }}</view>
<view class="refund_bom acea-row row-between">
<view class='money acea-row row-middle'>
<text>¥{{goods.cart_info.productAttr.price}}</text>
<text class="callate_text">x{{goods.product_num}}</text>
</view>
<view class='carnum acea-row row-center-wrapper'>
<view class="reduce" :class="(goods.numSub || goods.refund_num == 1) ? 'on' : ''" @click.stop='subCart(goods)'>-</view>
<view class='num'>{{goods.refund_num}}</view>
<view class="plus" :class="(goods.max_count == goods.refund_num || goods.numAdd) ? 'on' : ''" @click.stop='addCart(goods)'>+</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="form-box">
<view class="form-item item-txt">
<text class="label">退款金额</text>
<input style="text-align: right;" class="p-color" type="text" placeholder="请输入金额" placeholder-class="holder-color" v-model="rerundPrice" @blur="checkMaxPrice">
</view>
<view class="form-item item-txt">
<text class="label">退款原因</text>
<view class="picker">
<picker @change="bindPickerChange" :value="qsIndex" :range="qsArray">
<view class="picker-box">
{{qsArray[qsIndex]}}
<text class="iconfont icon-jiantou"></text>
</view>
</picker>
</view>
</view>
<view class="form-item item-txtarea">
<text class="label">备注说明</text>
<view class="txtarea"><textarea v-model="con" placeholder-class="holder-color" placeholder="请填写备注信息100字以内" /></view>
</view>
</view>
</view>
<button class="btn-box" @click="confirmRefund" :disabled="disabled" :class="{'disabled' : disabled}">确认退款</button>
</view>
</view>
<view v-else>
<emptyPage title="暂无订单信息~"></emptyPage>
</view>
</view>
</template>
<script>
import {
getRefundOrderApi, confirmRefundApi, computeRefundPrice
} from '@/api/admin.js';
import { refundMessage } from '@/api/order.js';
import { getProductHot } from '@/api/store.js';
import { mapGetters } from "vuex";
import emptyPage from '@/components/emptyPage.vue'
const app = getApp();
export default {
components: {
emptyPage
},
data() {
return {
loading: false, //是否加载中
loadend: false, //是否加载完毕
loadTitle: '加载更多', //提示语
orderList: [],
order_id: "",
mer_id: '',
isAllSelect: true, //全选
selectValue: [], //选中的数据
maxRefundPrice: 0.00,
rerundPrice: "",
con: "",
qsArray:[],
qsIndex:0,
disabled: false,
};
},
computed: mapGetters(['isLogin']),
onReady(){},
mounted: function() {},
onLoad: function(options) {
let that = this;
that.order_id = options.order_id
that.mer_id = options.mer_id
Promise.all([this.refundMessage()])
},
onShow: function() {
if (this.isLogin == true) {
this.getOrderData();
}else{
setTimeout(() =>{
toLogin()
}, 300);
}
},
methods: {
getOrderData(){
let that = this
getRefundOrderApi(that.mer_id,that.order_id)
.then(res => {
that.orderList = res.data.product
that.maxRefundPrice = Number(res.data.postage_price) + Number(res.data.total_refund_price)
that.rerundPrice = that.maxRefundPrice.toFixed(2);
that.orderList.forEach((item) => {
item.max_count = item.refund_num
this.$set(item, "check", true);
})
}).catch(res => {
that.$util.Tips({
title: res
});
})
},
// 退款理由
refundMessage(){
refundMessage().then(res=>{
this.qsArray = res.data
})
},
checkMaxPrice(){
if(this.rerundPrice > this.maxRefundPrice){
this.rerundPrice = this.maxRefundPrice.toFixed(2)
}
},
// 下拉选中
bindPickerChange(e){
this.qsIndex = e.target.value
},
// 商品递减
subCart(goods) {
if (goods.refund_num <= 1) {
goods.refund_num = 1;
goods.numSub = true;
} else {
goods.refund_num--
goods.numAdd = false;
this.getRefundPrice()
}
},
// 商品增加
addCart(goods) {
if(goods.max_count <= goods.refund_num){
goods.refund_num = goods.max_count
goods.numAdd = true;
}else{
goods.refund_num++
goods.numSub = false;
this.getRefundPrice()
}
},
confirmRefund() {
let that = this;
let refundData = that.getSelectedProduct();
let arr = Object.keys(refundData);
if(arr.length == 0){
return that.$util.Tips({
title: '请选择商品'
});
}
if(that.maxRefundPrice == undefined){
return that.$util.Tips({
title: '请输入退款金额'
});
}
let data = {
refund_message: that.qsArray[that.qsIndex],
refund_price: that.rerundPrice,
mer_mark: that.con,
refund: refundData,
order_id: that.order_id
}
that.disabled = true
uni.showLoading({
title: "退款中"
})
confirmRefundApi(that.mer_id, data)
.then(res => {
that.$util.Tips({
title: res.message
});
that.disabled = false
setTimeout(()=>{
uni.navigateTo({
url:`/pages/admin/refundDetail/index?id=${res.data.refund_order_id}&mer_id=${that.mer_id}`
})
},500)
})
.catch(err => {
return that.$util.Tips({
title: err
}, {
tab: 3,
url: 1
});
});
},
// 获取选中的商品
getSelectedProduct(){
let arr = {}
this.orderList.forEach((item) => {
if(item.check){
arr[item.order_product_id] = item.refund_num
}
})
return arr
},
// 商品选中
goodsCheck(goods) {
goods.check = !goods.check
this.getRefundPrice()
},
// 计算退款金额
getRefundPrice(){
let that = this;
let refundData = that.getSelectedProduct();
computeRefundPrice(that.mer_id,{refund: refundData,order_id: that.order_id})
.then(res => {
that.rerundPrice = res.data.totalRefundPrice
}).catch(res => {
that.$util.Tips({
title: res
});
})
},
},
onReachBottom() {
},
// 滚动监听
onPageScroll(e) {
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
uni.$emit('scroll');
}
}
</script>
<style scoped lang="scss">
page {
background: #F5F5F5;
}
.refund {
.list{
background: #fff;
}
.item{
padding: 20rpx;
}
.picTxt {
width: 100%;
position: relative;
align-items: center;
margin-bottom: 30rpx;
.checkbox {
width: 60rpx;
.iconfont {
font-size: 40rpx;
color: #CCCCCC;
border-radius: 100%;
&.disabled{
background: #f3f3f3;
}
}
.icon-xuanzhong1 {
color: #2291F8;
}
}
.pictrue {
width: 130rpx;
height: 130rpx;
image {
width: 100%;
height: 100%;
border-radius: 16rpx;
}
}
.text {
width: 490rpx;
margin-left: 20rpx;
font-size: 28rpx;
color: #282828;
}
.attr {
font-size: 24rpx;
color: #999999;
margin-top: 17rpx;
}
.text .money {
font-size: 26rpx;
color: #282828;
}
.refund_bom{
margin-top: 20rpx;
align-items: center;
.callate_text{
margin-left: 12rpx;
}
}
.carnum {
height: 47rpx;
}
.carnum view {
border: 1px solid #a4a4a4;
min-width: 66rpx;
text-align: center;
height: 100%;
line-height: 46rpx;
font-size: 28rpx;
color: #a4a4a4;
}
.reduce {
border-right: 0;
border-radius: 3rpx 0 0 3rpx;
&.on{
border-color: #e3e3e3;
color: #dedede;
}
}
.plus {
border-left: 0;
border-radius: 0 3rpx 3rpx 0;
&.on{
border-color: #e3e3e3;
color: #dedede;
}
}
.carnum .num {
color: #282828;
}
}
.form-box{
padding-left: 30rpx;
margin-top: 18rpx;
background-color: #fff;
.form-item{
display: flex;
justify-content: space-between;
border-bottom: 1px solid #f5f5f5;
font-size: 30rpx;
}
.item-txt{
align-items: center;
width: 100%;
padding:30rpx 30rpx 30rpx 0;
}
.item-txtarea{
padding:30rpx 30rpx 30rpx 0;
textarea{
display: block;
width: 400rpx;
height: 100rpx;
font-size: 30rpx;
text-align: right;
}
}
.icon-jiantou{
margin-left: 10rpx;
font-size: 28rpx;
color: #BBBBBB;
}
.holder-color{
color: #CCCCCC;
}
}
.btn-box{
width:690rpx;
height:86rpx;
margin: 100rpx auto 0;
line-height: 86rpx;
text-align: center;
color: #fff;
background: #2291F8 ;
border-radius:43rpx;
font-size: 32rpx;
&.disabled{
background: #bbb;
pointer-events: none;
}
}
.btn-box[disabled]{
pointer-events: none;
background: #bbb;
}
}
</style>