front-end/hdApp/src/pagesPurchase/refund.vue

<template>
	<view class="app-content">
		<view style="padding:30upx 30upx 140upx 30upx;">
			<view style="border:1upx solid #CCCCCC;border-radius: 10upx;margin:0upx 5upx 10upx 5upx;padding:10upx 0 10upx 5upx;">
				<view style="color:#3385FF;margin-bottom:10upx;font-size:29upx;">没拿货，拿货了退还了，<text style="font-weight:bold;">选退货并退款</text></view>
				<block v-if="orderInfo.ghsShopId && (orderInfo.ghsShopId == 26094 || orderInfo.ghsShopId == 25159)">
					<view style="color:#3385FF;margin-bottom:10upx;font-size:29upx;">货拿了，坏几支，损耗超10%，<text style="font-weight:bold;">选只退款</text></view>
					<view style="color:red;font-weight:bold;font-size:28upx;margin-top:15upx;">售后范围：10%以内损耗属正常运输损耗，不售后。超过10%的，可以售后。请在收货后12小时内申请售后。</view>
				</block>
				<block v-else>
					<view style="color:#3385FF;margin-bottom:10upx;font-size:29upx;">货拿了，坏几支，损耗超20%，<text style="font-weight:bold;">选只退款</text></view>
					<view style="color:red;font-weight:bold;font-size:28upx;margin-top:15upx;">售后范围：20%以内损耗属正常运输损耗，不售后。超过20%的，可以售后。请在收货后12小时内申请售后。</view>
				</block>
			</view>
			<view class="flex refund-item">
				<view class="refund-label">退款方式：</view>
				<view class="flex list">
					<view class="flex" @tap="refundType=1" >
						<view class="flex-center radioBtn" :class="refundType==1?'active':''">
						</view>退货并退款</view>
					<view style="margin-left:50upx" class="flex" @tap="refundType=2">
						<view class="flex-center radioBtn" :class="refundType==1?'':'active'">
							</view>只退款</view>
				</view>
			</view>
			<view class="refund-item-list" v-if="refundType==1">
				<view class="refund-label"><text></text>选择商品：</view>
				<view>
					<view class="list" v-for="(res,i) in product" :key="i">
						<view class="flex list-title" >
							<text class="product-name">{{res.name}}</text>
							<text class="product-num">{{ `${parseFloat(res.xhNum)}` }}{{res.xhUnitName}}</text>
							<text class="product-price">{{`${parseFloat(res.xhUnitPrice)}`}}元/{{res.xhUnitName}}</text>
						</view>
						<view class="flex list-val" style="font-size:26upx;font-weight:bold;">
							<input type="number" placeholder="填退货数" v-model="res.refundCount" placeholder-style="color:#CCCCCC" />
							<text style="margin-left:10upx;">{{res.xhUnitName}}</text>
							<text style="color:green;margin-left:20upx;">可退{{Number(res.xhNum)-Number(res.refundNum)}}{{res.xhUnitName}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex refund-item">
				<view class="refund-label">订单金额：</view>
				<view class="list">
					￥{{parseFloat(orderInfo.orderPrice)||0}}
					<text style="margin-left:25upx;font-size:25upx;color:green;" v-if="Number(orderInfo.tkPrice)>0">已退￥{{orderInfo.tkPrice ? parseFloat(orderInfo.tkPrice) : 0}}</text>
				</view>
			</view>
			<view class="flex refund-item">
				<view class="refund-label">可退金额：</view>
				<view class="list">￥{{couldRefundPrice}}</view>
			</view>
			<view class="flex refund-item">
				<view class="refund-label">预计退款：</view>
				<view class="list">￥{{refundPrice}}</view>
			</view>
			<view class="flex refund-item">
				<view class="refund-label"><text></text>实际退款：</view>
				<input type="digit" v-model="refundMoney" @focus="refundMoney=''">
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="flex refund-item">
				<view class="refund-label">审核通知：</view>
				<view class="list">
					<button class="admin-button-com middle default" @click="noticeMe()" v-if="needNotice == 0">点击开启通知</button>
					<button class="admin-button-com middle blue" v-else>已经开启通知</button>
				</view>
			</view>
			<!-- #endif -->
			<view class="refund-item">
				<view class="refund-label">备注说明：</view>
				<textarea v-model="remark" style="height:100upx;"></textarea>
			</view>
			<view>
				<form>
					<div class="module-com input-line-wrap">
						<div class="module-com input-line-wrap goods-wrap">
							<div class="module-tit" style="padding-left:0upx;">
								<span>售后图片：</span>
								<text @click="getRule()" style="font-weight:bold;text-decoration: underline;float:right;color:red;">图片拍照规范</text>
							</div>
							<div class="module-det">
								<htz-image-upload :max="9" :compress="true" v-model="refundImgData" :headers="headers"
								@uploadSuccess="imgUploadSuccess" :quality="60" @imgDelete="imgDeleteFn" :action="getLoginInfo.imgUploadApi">
								</htz-image-upload>
								<view style="color:red;font-weight:bold;">必须按拍照规范，提供图片，否则申请将被驳回</view>
							</div>
						</div>
					</div>
				</form>
			</view>

		</view>
		<view class="app-footer">
			<button class="admin-button-com big default" @click="cancelRefund()">取消</button>
			<button class="admin-button-com big blue" formType="submit" @click="confirmRefund">提交申请</button>
		</view>
	</view>
</template>
<script>
import { mapGetters } from "vuex"
import TuiListCell from "@/components/plugin/list-cell";
import { getFullInfo } from "@/api/purchase";
import { createRefund } from "@/api/cg-refund";
//图片上传插件来源：https://ext.dcloud.net.cn/plugin?id=2922 已改造，不能再升级 shish 20211228
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
export default {
	name: "refund",
	components: {
		TuiListCell,
		htzImageUpload
	},
	data() {
		return {
			product:[],
			refundMoney:0,
			refundType:1,
			remark:'',
			orderInfo:{},
			couldRefundPrice:0,
			unClear:[],
			refundImgData:[],
			uploadRefundImg:[],
			headers:{token:''},
			needNotice:0
		};
	},
	onLoad() {
		const token = uni.getStorageSync('token')
		this.headers.token = token
	},
	computed:{
		...mapGetters(["getLoginInfo","getDictionariesInfo"]),
		refundPrice(){
			let price = 0
			if(this.product){
				for (const item of this.product) {
					if(Number(item.refundCount)>0){
						let currentPrice = Number(item.refundCount)*Number(item.xhUnitPrice)
						currentPrice.toFixed(2)
						price = Number(price) + Number(currentPrice)
						price.toFixed(2)
					}
				}
			}
			price = parseFloat(price.toFixed(2))
			this.refundMoney = price
			return price
		}
	},
	watch:{
	},
	methods: {
		noticeMe(){
			// #ifdef MP-WEIXIN
			let that = this
			if(this.getDictionariesInfo && this.getDictionariesInfo.subscribeMessage && this.getDictionariesInfo.subscribeMessage == 1 && this.getDictionariesInfo.hdMiniMessage && this.getDictionariesInfo.hdMiniMessage.afterSale){
				uni.requestSubscribeMessage({
					tmplIds: [this.getDictionariesInfo.hdMiniMessage.afterSale.msgId],
					success(res) {
						if(res[that.getDictionariesInfo.hdMiniMessage.afterSale.msgId] && res[that.getDictionariesInfo.hdMiniMessage.afterSale.msgId] == 'accept'){
							that.needNotice = 1
						}
					},
					fail(err) {
						console.log(err)
					},
					complete() {}
				})
			}
			// #endif	
		},
		getRule(){
			this.$util.pageTo({url:'/pagesPurchase/afterSale'})
		},
		imgUploadSuccess(res) {
			var _res = JSON.parse(res.data)
			if(_res.code == 1){
				this.refundImgData.push(_res.data.smallUrl)
				this.uploadRefundImg.push(_res.data.shortUrl)
			}
		},
		cancelRefund(){
			uni.navigateBack({delta: 1});
		},
		confirmRefund(){
			let hasError = false
			let product = []
			let that = this
			this.product.forEach(ele=>{
				let currentRefundCont = ele.refundCount ? Number(ele.refundCount) :0
				let currentNum = ele.xhNum ? Number(ele.xhNum) : 0
				let hasRefundNum = ele.refundNum ? Number(ele.refundNum) : 0
				let couldRefundNum = Number(currentNum) - Number(hasRefundNum)
				if(Number(currentRefundCont) > Number(couldRefundNum)){
					uni.showToast({title:ele.name+' 超过可退数量',icon:'none'})
					hasError = true;
					return false
				}
				if(Number(ele.refundCount)>0){
					product.push({
						"productId":ele.productId,
						"num":ele.refundCount,
						"unitType":ele.unitType,
						unitName:ele.xhUnitName,
						unitType:ele.xhUnitType,
						unitPrice:ele.xhUnitPrice
					})
				}
			})
			if(hasError){
				return
			}
			if(this.$util.isEmpty(product)&&this.refundType==1){
				uni.showToast({title:'请选择商品',icon:'none'})
				return;
			}
			let imgData = JSON.stringify(this.uploadRefundImg)
			let refundParams = {
				id:this.option.id,
				product:JSON.stringify(product),
				price:this.refundMoney,
				remark:this.remark,
				refundType:this.refundType,
				getOriginalItem:1,
				imgList:imgData
			};
			that.$util.confirmModal({content:'确认提交？'},() => {
				uni.showLoading({title: "提交中",mask:true})
				createRefund(refundParams).then(res => {
					if(res.code == 1){
						that.$util.pageTo({url: '/pagesPurchase/refundResult?id='+res.data.id,type:2})
					}
				})
			})
		},
		async init() {
			//getOriginalItem 取原有的花材结构（小菊的花材结构有变化）
			const res = await getFullInfo({ id: this.option.id,getOriginalItem:1 })
			this.orderInfo = res.data
			
			this.couldRefundPrice = Number(res.data.orderPrice) - Number(res.data.tkPrice)
			this.couldRefundPrice = this.couldRefundPrice.toFixed(2)
			this.couldRefundPrice = parseFloat(this.couldRefundPrice)

			this.product = res.data.product.map(ele=>{
				return {...ele,refundCount:null}
			})
		}
	}
};
</script>
<style lang="scss" scoped>
.module-com {
  margin-bottom: 20upx;
  background-color: #fff;
  color: $fontColor2;
  .module-tit {
    padding: 20upx 30upx;
    font-size: 28upx;
  }
  .module-det {
    padding: 0 30upx;
  }
}
	.app-content{
		height: calc(100vh - 30upx * 2);
		background: #FFFFFF;
		font-size: 30upx;
		.radioBtn{
			width: 30upx;
			height: 30upx;
			margin-right: 10upx;
			border: 1upx solid #ddd;
			border-radius: 50%;
			&.active{
				position: relative;
				border: 1upx solid #3385ff;
				&:after{
					content: '';
					position: absolute;
					width: 18upx;
					height: 18upx;
					background: #3385ff;
					border-radius: 50%;
				}
			}
		}
		.refund-item-list{
			display: flex;
			padding-bottom: 30upx;
			padding-top: 30upx;
			border-top: 1upx solid #e6e4e4;
			border-bottom: 1upx solid #e6e4e4;
			.refund-label{
				width: 200upx;
				color:#666666;
				font-size:26upx;
				text{color: red;}
			}
			.list{
				margin-bottom:18upx;
				border-bottom:1upx solid #CCCCCC;
				padding-bottom:14upx;
				.list-title{
					height: 60upx;
					padding-bottom: 20upx;
					font-size:26upx;
					font-weight:bold;
					.product-name{
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						width:190upx;
					}
					.product-price{
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						width:130upx;
						margin-left:10upx;
					}
					.product-num{
						width:90upx;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						margin-left:10upx;
					}
				}
				.list-val{
					input{
						width: 200upx;
						border: 1upx solid #ddd;
						text-align: center;
						font-weight: normal;
					}
				}
			}
		}
		.refund-item{
			display: flex;
			padding: 18upx 0;
			.refund-label{
				width: 200upx;
				color:#666666;
				font-size:26upx;
				text{
					color: red;
				}
			}
			input{
				border: 1upx solid #ddd;
			}
			textarea{
				width: calc(100% - 210upx);
				height:150upx;
				border: 1upx solid #ddd;
			}
		}
		.btn-box{
			.btn{
				width: 220upx;
				height: 90upx;
				border: 1upx solid #666666;
				border-radius: 10upx;
				color:#666666;
				&.active{
					background: #3385ff;
					color: #fff;
					border: 1upx solid #3385ff;
				}
			}
		}
	}
.app-footer {
  justify-content: space-evenly;
  z-index: 9999;
  .admin-button-com {
    width: 46%;
  }
}
</style>