退款

hdApp/src/pagesPurchase/refund.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="app-content">
+	<view style="padding:30upx 30upx 120upx 30upx;">
 		<view class="flex refund-item">
 			<view class="refund-label">退款方式：</view>
 			<view class="flex list">
@@ -8,7 +9,7 @@
 					</view>退货并退款</view>
 				<view style="margin-left: 30upx" class="flex" @tap="refundType=2">
 					<view class="flex-center radioBtn" :class="refundType==1?'':'active'">
-						</view>仅退款(货损)</view>
+						</view>仅退款（货损）</view>
 			</view>
 		</view>
 		<view class="refund-item-list" v-if="refundType==1">
@@ -47,30 +48,48 @@
 			<view class="refund-label"><text></text>实际退款：</view>
 			<input type="digit" v-model="refundMoney">
 		</view>
-
-
-
-
-		
 		<view class="refund-item">
-			<view class="refund-label">备注：</view>
+			<view class="refund-label">备注说明：</view>
 			<textarea v-model="remark" />
 		</view>
-		<view class="flex-center btn-box" style="margin-bottom:50upx;margin-top:20upx;padding-bottom:10upx;">
-			<view class="flex-center btn" @tap="cancelRefund">取消</view>
-			<view class="flex-center btn active" @tap="confirmRefund" style="margin-left: 80upx">确定</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>
+							<span class="app-color-3"></span>
+							</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>
+						</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: "orderDetail",
 	components: {
-		TuiListCell
+		TuiListCell,
+		htzImageUpload
 	},
 	data() {
 		return {
@@ -80,12 +99,18 @@ export default {
 			remark:'',
 			orderInfo:{},
 			couldRefundPrice:0,
-			unClear:[]
+			unClear:[],
+			refundImgData:[],
+			uploadRefundImg:[],
+			headers:{token:''}
 		};
 	},
-	onShow() {
+	onLoad() {
+		const token = uni.getStorageSync('token')
+		this.headers.token = token
 	},
 	computed:{
+		...mapGetters(["getLoginInfo"]),
 		refundPrice(){
 			let price = 0
 			if(this.product){
@@ -106,6 +131,13 @@ export default {
 	watch:{
 	},
 	methods: {
+		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});
 		},
@@ -141,20 +173,22 @@ export default {
 				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,
+				hdRemark:this.remark,
 				refundType:this.refundType,
-				getOriginalItem:1
+				getOriginalItem:1,
+				imgList:imgData
 			};
-			that.$util.confirmModal({content:'确认退款？'},() => {
+			that.$util.confirmModal({content:'确认提交？'},() => {
 				uni.showLoading({title: "提交中",mask:true})
 				createRefund(refundParams).then(res => {
 					if(res.code == 1){
-						uni.hideLoading()
-						this.$util.pageTo({url: '/pagesOrder/refundSuccess?id='+res.data.id,type:2})
+						//uni.hideLoading()
+						//this.$util.pageTo({url: '/pagesOrder/refundSuccess?id='+res.data.id,type:2})
 					}
 				})
 			})
@@ -176,9 +210,20 @@ export default {
 };
 </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);
-		padding: 30upx;
 		background: #FFFFFF;
 		font-size: 30upx;
 		.radioBtn{
@@ -287,4 +332,11 @@ export default {
 			}
 		}
 	}
+.app-footer {
+  justify-content: space-evenly;
+  z-index: 9999;
+  .admin-button-com {
+    width: 46%;
+  }
+}
 </style>