front-end/ghsApp/src/pagesOrder/refundAllList.vue

<template>
  <view class="app-content">
      <view style="padding:20upx 0 30upx 50upx;font-size:30upx;">
        <text @click="changeStatus()">{{ status == -1 ? '选状态' : status == 0 ? '处理中' : status == 1 ? '已通过' : status == 2 ? '已驳回' : '已取消' }}</text>
        <text style="margin-left:50upx;" @click="changeClass()">选分类</text>
        <text style="margin-left:50upx;" @click="changeCause()">{{ cause == -1 ? '选原因' : cause == 0 ? '质量问题' : '多开错开' }}</text>
      </view>
      <view style="margin-left:50upx;margin-bottom:26upx;position:relative;">
        <DateSelect class="bar" top="0" @selectDateFn="selectDateFn" />
        <text style="position: absolute;left:180upx;top:0upx;font-size:26upx;">总金额 ¥{{ totalAmount }}</text>
        <text style="position: absolute;left:410upx;top:0upx;font-size:26upx;">总成本 ¥{{ totalCost }}</text>
      </view>
			<block v-if="!$util.isEmpty(list.data)">

				<view class="flex-space list" v-for="(item, index) in list.data" :key="index" @click="goDetail(item.refundInfo)">
          <block v-if="!$util.isEmpty(item.refundInfo)">
          <view class="label">
              <text style="font-weight:bold;font-size:29upx;">{{item.name}}</text>
              <text>金额：¥{{item.xhUnitPrice?parseFloat(item.xhUnitPrice):0}} x {{item.xhNum}}</text>
              <text :class="[item.cause == 0?'qa_cause':'']">原因：{{item.cause == 0 ? '质量问题' : '多开错开'}}</text>
              <text>时间：{{item.addTime.substr(5,11)}}</text>
              <text v-if="!$util.isEmpty(item.refundInfo.remark)" style="color:red;font-weight:bold;">备注：{{item.refundInfo.remark}}</text>
              <text>状态：{{ item.status==0?'待审核':item.status==1?'已通过':item.status==2?'已驳回':item.status==3 ? '已取消':'' }}</text>
          </view>
          <view class="flex val">¥{{parseFloat(item.xhPrice)}} <view class="iconfont iconxiangyou"></view> </view>
        </block>
		    </view>

			</block>
			<block v-else>
				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
			</block>

      <uni-popup ref="classRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
        <view style="margin-left:30upx;margin-top:19upx;font-size:27upx;font-weight:bold;">请选择分类：</view>
          <view style="display:flex;padding:20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
            <view v-for="(item, index) in itemClassData" :key="index" @tap.stop="setClass(index)" style="margin-bottom:20upx;margin-left:3upx;">
            <image :src="item.cover" style="width:120upx;height:120upx;border-radius:10upx;"></image>
            <view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:120upx;text-align:center;" v-if="item.select == 0">{{item.name}}</view>
            <view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:120upx;text-align:center;color:red;font-weight:bold;" v-else>{{item.name}}</view>
          </view>
        </view>
        <view style="text-align:center;padding:10upx 0 10upx 0;">
          <button class="admin-button-com big blue" @click="cancelClass()">取消</button>
          <button class="admin-button-com big blue" style="margin-left:60upx;" @click="confirmClass()">确认</button>
        </view>
      </uni-popup>

  </view>
</template>
<script>
import { list } from "@/mixins";
import { getRefundListByItem } from "@/api/refund"
import { getAllItemClass } from "@/api/item-class"
import DateSelect from "@/components/module/dateSelect";
export default {
  name: "refundAllList",
  components: {DateSelect},
  mixins: [list],
  data() {
    return {
      itemClassData:[],
      status:-1,
      cause:-1,
      totalAmount:0,
      totalCost:0,
      searchTime:'',
      startTime:'',
      endTime:''
    };
  },
  onPullDownRefresh() {
    this.resetList();
    this.getRefundData().then((res) => {
      uni.stopPullDownRefresh();
    });
  },
  onReachBottom() {
    if (!this.list.finished) {
      this.getRefundData().then((res) => {
        uni.stopPullDownRefresh();
      });
    } else {
      uni.stopPullDownRefresh();
    }
  },
  mounted() {
  },
  onLoad(option) {
  	this.resetList();
    this.getRefundData();
  },
  methods: {
    selectDateFn(val) {
      this.searchTime = val.searchTime
      this.startTime = val.startTime
      this.endTime = val.endTime
      this.resetList()
      this.getRefundData()
    },
    cancelClass(){
      this.$refs.classRef.close()
    },
    confirmClass(){
      this.$refs.classRef.close()
      this.resetList()
      this.getRefundData()
    },
    changeCause(){
      let that = this
      uni.showActionSheet({
        itemList: ['质量问题', '多开错开', '取消选择'],
        success: function (res) {
          if(res.tapIndex == 0){
            that.cause = 0
          }
          if(res.tapIndex == 1){
            that.cause = 1
          }
          if(res.tapIndex == 2){
            that.cause = -1
          }
          that.resetList()
          that.getRefundData()
        }
      })
    },
    changeStatus(){
      let that = this
      uni.showActionSheet({
        itemList: ['处理中', '已通过', '已驳回','已取消','取消选择'],
        success: function (res) {
          if(res.tapIndex == 0){
            that.status = 0
          }
          if(res.tapIndex == 1){
            that.status = 1
          }
          if(res.tapIndex == 2){
            that.status = 2
          }
          if(res.tapIndex == 3){
            that.status = 3
          }
          if(res.tapIndex == 4){
            that.status = -1
          }
          that.resetList()
          that.getRefundData()
        }
      })
    },
    changeClass(){
      this.$refs.classRef.open('center')
    },
    setClass(index){
      this.itemClassData[index].select = this.itemClassData[index].select == 0 ? 1 : 0
      this.$forceUpdate()
    },
    init(){
      getAllItemClass().then(res => {
        if (!this.$util.isEmpty(res.data)){
          let list = res.data
          this.itemClassData = list.map(ele => { 
	          return { ...ele,select:0}
          })
        }
      })
    },
    goDetail(item){
      if(item.book == 1){
        this.$msg('预订单多退少补')
        return false
      }
      this.$util.pageTo({url: '/pagesOrder/refundDetail?from=1&id='+item.id})
    },
    getRefundData() {
      let ids = []
      this.itemClassData.forEach((item) => {
        if(item.select == 1){
          ids.push(item.id)
        }
      })
      getRefundListByItem({
        page: this.list.page,
        status:this.status,
        ids:JSON.stringify(ids),
        searchTime: this.searchTime,
        startTime: this.startTime,
        endTime: this.endTime,
        cause:this.cause
      }).then((res) => {
        this.completes(res)
        this.totalAmount = res.data.totalAmount ? parseFloat(res.data.totalAmount) : 0
        this.totalCost = res.data.totalCost ? parseFloat(res.data.totalCost) : 0
        if (this.$util.isEmpty(res.data)){
          return false
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
	.app-content{
		.list{
			padding: 20upx 30upx;
			margin-bottom: 20upx;
			background: #FFFFFF;
			.label{
        position: relative;
				line-height: 50upx;
				text{
					display: block;
				}
			}
			.val{
				font-size: 25upx;
				.iconfont{
					margin-left: 12upx;
					color: #999999;
				}
			}
		}
	}
  .pass-red{
    font-weight:bold;
    color:red;
  }
  .cancel-pass{
    font-weight: normal;
    color:black;
  }
  .qa_cause{
    color:blue;
  }
</style>