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

<template>
  <appResult :title="title">
    <button class="admin-button-com big blue" style="width:80%;" @click="goBack">返回</button>
    <view v-if="!$util.isEmpty(itemList)" style="margin-top:20upx;">
      <block v-for="(item, index) in itemList" :key="index">
        <view style="text-align:center;margin-bottom:10upx;">
          <text style="font-size:32upx;" @click="pageTo({url:'/admin/item/detail?id='+item.productId})">
            {{item.name}} <text style="color:#3385FF;margin-left:8upx;">已退{{item.xhNum}}{{item.xhUnitName}}</text>
          </text>
          <view style="margin-top:10upx;" v-if="Number(item.xhWasteNum)>0">
            <text style="margin-left:12upx;color:red;font-size:30upx;font-weight:bold;">
            已报损{{item.xhWasteNum}}{{item.xhUnitName}}
            </text>
          </view>
          <view style="margin-top:10upx;" v-if="Number(item.xhReduceNum)>0">
            <text style="margin-left:12upx;color:red;font-size:30upx;font-weight:bold;">
            已减库存{{item.xhReduceNum}}{{item.xhUnitName}}
            </text>
          </view>
          <view style="margin-top:10upx;color:#ad760d;font-size:30upx;" v-if="item.refundOptionId!=0">{{ item.refundOptionName }}</view>
          <view style="width:100%;margin-top:16upx;">
            <button class="admin-button-com middle" style="width:160upx;" @click="selOption(item)">售后原因</button>
            <button class="admin-button-com middle" style="margin-left:10upx;width:140upx;" @click="beginReduce(item)">减库存</button>
            <button class="admin-button-com middle" style="width:150upx;margin-left:10upx;" @click="beginWastage(item)" v-if="item.xhUnitType == 0">报损</button>
            <button class="admin-button-com middle" style="width:150upx;margin-left:10upx;" @click="pageTo({url:'/admin/item/detail?id='+item.productId})" v-else>去损报</button>            
          </view>
        </view>
      </block>
    </view>

		<modal-module :show="wastageShow" @click="confirmWastage" :maskClosable="true" title="减少数量" padding="30rpx 30rpx" >
		<template v-slot:content>
			<div class="app-modal-input-wrap">
			<div class="inp-list-line">
				<div class="line-input">
				<input type="number" ref="input" style="width:61.8%;text-align:center;" v-model="wastageNum" :adjust-position="false" class="inp-input" @focus="wastageNum=''" />
				</div>
			</div>
			</div>
		</template>
		</modal-module>

		<modal-module :show="reduceShow" @click="confirmReduce" :maskClosable="true" title="报损数量" padding="30rpx 30rpx" >
      <template v-slot:content>
        <div class="app-modal-input-wrap">
        <div class="inp-list-line">
          <div class="line-input">
          <input type="number" ref="input" style="width:61.8%;text-align:center;" v-model="reduceNum" :adjust-position="false" class="inp-input" @focus="reduceNum=''" />
          </div>
        </div>
        </div>
      </template>
		</modal-module>

		<uni-popup ref="optionRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
			<view style="max-height:90vh;overflow: scroll;">
				<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: flex-start;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
					<view v-for="(item, index) in refundOption" :key="index" style="margin-bottom:20upx;margin-left:3upx;">
						<button
							class="admin-button-com staff-btn"
							@click.stop="getOption(item)"
							:class="{'selected': currentInfo.refundOptionId === item.id}"
						>
							{{ item.name }}
						</button>
					</view>
				</view>
				<view style="text-align:center;padding:10upx 0 10upx 0;">
					<button class="admin-button-com big blue" style="width:210upx;" @click="cancelOption()">取消选择</button>
				</view>
			</view>
		</uni-popup>

  </appResult>
</template>
<script>
import appResult from "@/components/app-result";
import { refundDetail,refundWaste,changeRefundOption,refundReduce } from "@/api/refund";
import ModalModule from "@/components/plugin/modal"
export default {
  name: "commonSuccess",
  components: {
    appResult,
    ModalModule
  },
	data() {
		return {
			title:'操作成功',
      info:[],
      itemList:[],
			wastageShow:false,
			wastageNum:0,
      refundItemId:0,
      refundOption:[],
      currentInfo:{},
			reduceItemId:0,
			reduceShow:false,
			reduceNum:0,
		};
	},
	methods: {
    beginReduce(item){
      this.reduceShow = true
      this.reduceNum = item.xhNum
      this.refundItemId = item.id
    },
    confirmReduce(val){
      if (val.index === 0) {
        this.hideReduce()
        return false
			}
      let that = this
      refundReduce({reduceNum:this.reduceNum,refundItemId:this.refundItemId}).then(res=>{
        if(res.code == 1){
          that.hideReduce()
          that.init()
        }
      })
    },
    hideReduce(){
      this.reduceShow = false
      this.reduceNum = 0
      this.reduceItemId = 0
    },
    selOption(info){
      this.$refs.optionRef.open('center')
      this.currentInfo = info
    },
    cancelOption(){
      this.$refs.optionRef.close()
    },
		getOption(item){
      changeRefundOption({id:this.option.id,sonId:this.currentInfo.id,optionId:item.id}).then(res=>{
        if(res.code == 1){
          this.$msg('修改成功')
          this.init()
          this.$refs.optionRef.close()
        }
      })
		},
    beginWastage(item){
      this.wastageShow = true
      this.wastageNum = item.xhNum
      this.refundItemId = item.id
    },
    init(){
      let that = this
			refundDetail({ id: this.option.id }).then(res=>{
        that.info = res.data.info ? res.data.info : []
        that.itemList = res.data.itemList ? res.data.itemList : []
        that.refundOption = res.data.itemRefundOption?res.data.itemRefundOption:[]
			})
    },
    goBack() {
        uni.navigateBack({})
    },
    hideWaste(){
      this.wastageShow = false
      this.wastageNum = 0
    },
    confirmWastage(val){
      if (val.index === 0) {
        this.hideWaste()
        return false
			}
      let that = this
      refundWaste({wasteNum:this.wastageNum,remark:'退货时报损',refundItemId:this.refundItemId}).then(res=>{
        if(res.code == 1){
          that.hideWaste()
          that.init()
        }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.admin-button-com {
	margin-bottom: 20upx;
	width: 100%;
}
.class-popup-style{
	z-index:99999;
}
.staff-btn {
  min-width: 160upx;
  padding: 0 27upx;
  height: 80upx;
  font-size: 40upx;
  font-weight: bold;
  margin: 8upx 8upx 0 0;
  border-radius: 16upx;
  background: #f0f2f6;
  color: #333;
  border: 2upx solid #e0e0e0;
  transition: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.staff-btn.selected,
.staff-btn:active {
  background: #f0f2f6;
  color: #333;
  border-color: #e0e0e0;
}
</style>