wxThird/pages/subPack/refund.vue

<template>
<view class="box">
 <view class="cont">
	 <view class="itemBox flex">
		 </image>
		 <image class="itemIMg"  src="../../static/timg/noimg.png" mode=""></image>
		 <view class="itemRight">
		 	<view class="itemName">{{orderData.data.sheetContent}}</view>
		
		
			<view class="priceBox">
				<view class="price">¥</view>
			
			</view>
			
		 </view>
	 </view>

	 <view class="goodsBox">
	 	 <view class="goodsline flex" >
	 		 <view class="goodsLeft">退款原因 <span class="xinghao">*</span></view>
	 		 <view class="goodRight ckLine" @click="reasonS">
				 <span>请至少选择一项</span>
				 <image src="../../static/timg/icon_arrow_right.png" mode="" class="jtIcon"></image>
			 </view>
	 	 </view>
		 <view class="goodsline flex" v-if="type==1">
		 		 <view class="goodsLeft">退款份数</view>
		 		 <view class="goodRight" >
					 <view class="numJsbox">
					 	<view class="numJj" @click="calculation(1)">-</view>
					 	<view class="goodsnum">
					 	 <input type="number" value="" v-model="goodsnum" class="goodsnumInput"/>
					 	</view>
					 	<view class="numJj" @click="calculation(2)">+</view>
					 </view>
				 </view>
		 </view>
		 <view class="goodsline flex" v-if="type==2">
		 		 <view class="goodsLeft">退款份数</view>
		 		 <view class="goodRight" style="color: #666666;">
		 				10份	 
		 		 </view>
		 </view>
		 
		  <view class="goodsline flex" >
			  <view class="tkPrice">
				  <view class="tkPrice1">退款金额</view>
				  <view class="tkPrice2">实际退款金额以到账金额为准</view>
			  </view>
			  <view class="tkPriceNum">¥9</view>
		  </view>
	 	 <view class="goodsline flex" >
	 	 		 <view class="goodsLeft">退款方式</view>
	 	 		 <view class="goodRight" style="font-size: 26rpx;font-weight: 500;color: #222222;">原路退回</view>
	 	 </view>
	 </view>
	 <view class="goodsBox">
		
		 <view class="goodsline flex" >
				 <view class="goodsLeft">商品是否已使用 <span class="xinghao">*</span></view>
				 <view class="goodRight " >
					 <picker @change="bindPickerChange" :value="index" :range="array">
						 <view class="ckLine" v-if="index==''">
							 <span>请选择</span>
							 <image src="../../static/timg/icon_arrow_right.png" mode="" class="jtIcon"></image>
						 </view >
						 <view v-else class="ckLine xuanzhong" ><span>{{array[index]}}</span> 
						   <image src="../../static/img2/hjt.png" mode="" class="hjtIcon"></image>
						 </view>
						
					 </picker>
					
				 </view>
		 </view>
	 	<view class="tkSm" style="padding-top: 8rpx;">退款说明</view>
		<view>
			<textarea class="tktextarea" name="" placeholder="请输入退款说明" id="" cols="30" rows="10"></textarea>
		    <view class="textareaNum">{{textareaNum}}/500</view>
		</view>
		<!-- 图片 -->
		<view class="secondView">
			<view class="tkSm">退款凭证</view>
			<view class="imgBox">
				<view :class="{img4:(imgindex+1)%4==0}" class="imgLine" v-for="(img,imgindex) in imgArr">
					<image :src="img" mode="aspectFit" class="itemImg"></image>
					<image src="../../static/img/icon_del_red.png" mode="aspectFit" class="delImg" @click="delimg(imgindex)">
					</image>
				</view>
				<view class="img4" @click="uploadImg">
					<image src="../../static/img/btn_pic.png" mode="" class="itemImg"></image>
				</view>
			</view>
		</view>
		
	 </view>
	 
 </view>
 
<view  class="gaodu"></view>
 <view class="bottomBox">
	 <view class="bottomMS">申请退款后不可取消，钱款预期1-3个自然日</view>
	 <view class="bottom">
	 	 <view class="bleft">
	 		 <span>退款金额</span>
	 		 <span style="color: #EC0F0A;padding-left: 6rpx;">¥</span>
	 		 <span style="font-weight: 500;font-size: 34rpx;color: #EC0F0A;">9</span>
	 	 </view>
	 	 <view class="Btn commonBtn" @click="submitFn">提交</view>
	 </view>
 </view>
 
 <view class="reasonBox" v-if="reasonShow">
	 <view class="reasonCont">
		 <view class="reasonTop">
			 <view  class="chahao"></view>
			 <view class="tkTitle">请选择退款原因</view>	
			 <image @click="qdTkclose" class="chahao" src="../../static/img2/chahao.png" mode=""></image>
		 </view>
		 <view class="reasonContLineBox">
			 <view v-for="(item,index) in 3" class="jiekouLIne">
				 <view class="reasonContLineTitle">商品相关</view>
				 <view class="reasonContLine" v-for="(i,ix) in 3">
					 <view class="reasonContLineTxt">包装/商品破损/污渍</view>
					 <view class="reasonContLineCk"></view>
				 				 
				 </view>
			 </view>
		 </view>
		 <view style="height: 200rpx;"></view>
		 <view class="reasonBottom">
			 <view class="reasonBottomBtn">确定</view>
		 </view>
	 </view>
 </view>

 
</view>
</template>

<script>
	export default {
		components: {
			
		},
		
		data() {
			return {
				themeColor:'',
				ext:'',
				goodsnum:1,
				itemDefault:'',
				totalPrice:'',
				sheetDetail:[],
				userInfo:'',
				carInfo:'',
				customerInfo:'',
				textareaNum:0,
				reasonShow:false,
				imgArr: [],
				array:['未使用','已使用'],
				index: '',
				orderData:'',
				type:'',
				id:'',
			}
		},
		onLoad(opt) {
			this.ext = this.$common.getExtStoreId();
			this.themeColor = uni.getStorageSync("themeColor");
			this.orderData = uni.getStorageSync("orderData");
			this.type=opt.type
			this.sheetRefundReason()
			this.id=opt.id;
			if(this.type==1){
				this.getsheetQRCode()
			}
		},
		onShow() {
			
		},
		methods: {
			getsheetQRCode(){
				this.$http('openOrderManagement/sheetQRCodeList', {
					 type:1,		
					 sheetID: this.id,
				}, 'GET').then(res => {
				  
				})
			},
			sheetRefundReason(){
				var params={}
				this.$http('openOrderManagement/sheetRefundReason', params,'GET').then(res => {
					
				
				}) 
			},
			bindPickerChange(e){
			  console.log(e)	
			  this.index=e.detail.value
			},
			reasonS(){
				this.reasonShow=true;
			},
			qdTkclose(){
				this.reasonShow=false;
			},
			calculation(type){
				if(type==1){
					if(this.goodsnum>1){
						this.goodsnum--
					}
				}else{
					console.log("+++")
						this.goodsnum++
				}
			},
			submitFn(){
				uni.showModal({
				    title: '申请退款',
				    content: '退款申请一旦提交。将不能撤销，是否确认继',
					confirmText:'确认',
					cancelText:'取消',
				    success: function (res) {
				        if (res.confirm) {
				           // console.log('用户点击确定');
						  uni.navigateTo({
						  	url:'refundDetail'
						  })
				        } else if (res.cancel) {
				           
						   
				        }
				    }
				});
				
				
				/* var params={
					
				}
				uni.showLoading({
					title: '加载中'
				})
				
				this.$http('openMallOrder/submitOrder', params,'POST').then(res => {
					uni.hideLoading();
					if(res.code==0){
						this.orderData=res.data
						this.unifiedPay(res.data)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						});
					}
				
				}) */
			},
			unifiedPay(res){
				this.$http('openMallOrder/unifiedPay', {
					sheetId:res.id
				},'POST').then(res => {
					this.isgo=true;
					if(res.code==0){
						
						this.requestPayment(res.data)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						});
					}
				 })
			},
			uploadImg() {
			
				var that = this;
				var length = this.imgArr.length;
				var num = 5;
				if (length > 4) {
					uni.showToast({
						title: '最多上传5张',
						icon: 'none',
						duration: 2000,
					});
					return false;
				}
				uni.chooseImage({
					sourceType: ['album', 'camera'],
					count: num - length,
					sizeType:['compressed'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						/* uni.uploadFile({
				            url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
				                console.log(JSON.parse(uploadFileRes.data).data );
								that.imgArr=that.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
								
				            }
				        }); */
						tempFilePaths.forEach(v => {
							console.log(that.$request.baseUrl + 'tuhuUploadFile');
							uni.uploadFile({
								url: that.$request.baseUrl + 'tuhuUploadFile',
								filePath: v,
								name: 'file',
								formData: {
									'user': 'test'
								},
			
								success: (uploadFileRes) => {
			
									console.log(JSON.parse(uploadFileRes.data).data);
									that.imgArr = that.imgArr.concat(JSON.parse(
										uploadFileRes.data).data);
									console.log('imgArr--',that.imgArr);
								}
							});
						})
						/* that.$http('accompany/SuperCheckSheet/uploadFile', tempFilePaths[0], 'POST').then(res => {
							
						}) */
					}
				});
			},
			delimg(index) {
				this.imgArr.splice(index, 1)
			},
			requestPayment(res){
				var payInfo=res;
				//console.log(payInfo)
				//console.log(String(Date.now()))
				var that=this;
				uni.requestPayment({
					provider: 'wxpay',
					//timeStamp: String(Date.now()),
					timeStamp: payInfo.timeStamp,
					nonceStr: payInfo.nonceStr,
					package:payInfo.package,
					signType: payInfo.signType,
					paySign: payInfo.paySign,
					appid:payInfo.appId,	
				    success: function (res) {
				        console.log('success:' + JSON.stringify(res));
						 uni.showToast({
							 title: '支付成功',
							 icon:'none',
							 duration: 2000
						 });
						 uni.navigateTo({
						 	url:'paySuccess?type=1&orderType=1'
						 })
						
						
				    },
				    fail: function (err) {
					  console.log(err)
				      uni.showToast({
						 title: '支付失败',
						 icon:'none',
						 duration: 2000
				      });
					  uni.navigateTo({
					  	url:'paySuccess?type=2&orderType=1'
					  })
					  }
					 
				}); 
			},
			
			
			
			
		}
	}
</script>

<style scoped lang="less">
.box {
	width: 100vw;
	min-height: 100vh;
	background: #F4F4F4;
}
.reasonTop{
	display: flex;justify-content: space-between;
	padding: 32rpx 42rpx;
}
.chahao{
	width: 21rpx;height: 21rpx;
	padding-top: 10rpx;
}
.tkTitle{
	font-weight: 500;
	font-size: 28rpx;
	color: #222222;
	line-height: 40rpx;
}
.reasonBox{
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	width: 750rpx;
	background: rgba(0, 0, 0, 0.5);
}
.reasonCont{
	height: 70vh;
	width: 750rpx;
	background: #FFFFFF;
	border-radius: 28rpx 28rpx 0rpx 0rpx;
	position: absolute;
	left: 0;
	bottom: 0;
}
.reasonContLine{
	display: flex;justify-content: space-between;
		padding: 15rpx 0;
}
.reasonContLineTitle{
	font-weight: 500;
	font-size: 28rpx;
	color: #222222;
}
.reasonContLineTxt{
	font-weight: 400;
	font-size: 28rpx;
	color: #222222;
	line-height: 40rpx;

}
.reasonContLineCk{
	width: 28rpx;
	height: 28rpx;
	border: 2rpx solid #9A9A9A;
	border-radius: 16rpx;
	margin-top: 6rpx;
}
.reasonContLineBox{
	padding: 0 33rpx;
	height: calc(70vh - 270rpx);
	overflow-y: scroll;
}
.ckLine{
	display: flex;color: #9A9A9A;
	font-size: 26rpx;
}
.xinghao{
	color: #EC0F0A;
}
.jtIcon{
	width: 12rpx;height: 20rpx;
	margin-top: 8rpx;
	margin-left: 10rpx;
}
.hjtIcon{
	width: 10rpx;height: 20rpx;
	margin-top: 8rpx;
	margin-left: 10rpx;
}
.tkPrice1{
	font-size: 26rpx;
	color: #222222;
}
.tkPrice2{
	font-size: 24rpx;
	color: #9A9A9A;
	padding-top: 8rpx;
}
.tkPriceNum{
	font-size: 26rpx;
	color: #EC0F0A;
	line-height: 50rpx;
}
.textareaNum{
	padding-bottom: 18rpx;
}
.tkSm{
	font-size: 26rpx;
	color: #222222;
	padding-top: 18rpx;
}
.tktextarea{
	font-size: 26rpx;
	background: #F7F7F7;
	border-radius: 14rpx;
	margin-top: 20rpx;
	width: 610rpx;padding: 24rpx;
	margin-bottom: 10rpx;
	line-height: 40rpx;
}
.textareaNum{
	font-size: 24rpx;
	color: #9A9A9A;
	display: flex;justify-content: flex-end;
}
.cont{
	padding: 20rpx 24rpx;
}
.itemBox{
	background: #FFFFFF;
	border-radius: 16rpx;padding: 24rpx;
}
.itemIMg{
	width: 128rpx;
	height: 128rpx;border-radius: 10rpx;
}
.flex{
	display: flex;
}
.itemRight{
	width: 450rpx;padding-left: 24rpx;
}
.itemName{
	font-weight: 500;
	font-size: 28rpx;
	color: #222222;
	line-height: 40rpx;
}
.buyType{
	padding: 0 8rpx;text-align: center;
	height: 32rpx;line-height: 34rpx;
	border-radius: 5rpx;
	border: 1px solid #FF0035;font-size: 22rpx;
color: #FF0035;
margin-top: 10rpx;
}
.priceBox{
	display: flex;justify-content: space-between;padding-top: 40rpx;
}
.price{

	font-size: 28rpx;
	color: #222222;
	line-height: 50rpx;
}
.itemNum{
	font-size: 34rpx;line-height: 50rpx;
	color: #686868;
}
.itemnotes{
	font-size: 24rpx;padding-top: 12rpx;
	color: #FFC107;
}
.mealBox{
	background: #FFFFFF;
	padding: 20rpx 24rpx;
	margin-top: 20rpx;
	font-size: 26rpx;
	color: #666666;
	    border-radius: 16rpx;
}
.fwlcTitle{
	color: #333333;font-size: 30rpx;font-weight: 500;
	padding-bottom: 20rpx;
}
.mealTop{
	display: flex;
	justify-content: space-between;
	height: 72rpx;
	line-height: 72rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	font-size: 26rpx;
	padding: 0 20rpx;
}
.mealNum{
	text-align: center;
	width: 120rpx;
}
.mealexpire{
	text-align: center;	width: 120rpx;
}
.mealName{
	width: 460rpx;
}
.mealTop2{
	display: flex;
	justify-content: space-between;
	height: 72rpx;
	line-height: 72rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	font-size: 26rpx;
	padding: 0 20rpx;
	background: #FFF6DB;
}
.mealXj{
	background: #FFFCF3;
}
.xjLine{
	display: flex;
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	padding: 20rpx 20rpx;
}
.xjyd{
	width: 8rpx;
	height: 8rpx;
	background: #FABF1B;
	border-radius: 50rpx;
	margin-top: 12rpx;
	margin-right: 10rpx;
}
.mealMs{
	background: #FFFFFF;
	padding: 20rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #9A9A9A;
	line-height: 38rpx;
}
.goodsBox{
	padding:18rpx 24rpx;font-size: 26rpx;
color: #222222;background: #FFFFFF;margin-top: 20rpx;
border-radius: 16rpx;
}
.goodsline{
	justify-content: space-between;
	padding: 18rpx 0;
}
.bottom{
	
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding:30rpx 0 10rpx 0;

}
.reasonBottom{
	position: absolute;
	left: 0;bottom: 0;
	padding: 30rpx 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom); 
	width: 100%;
	background: #FFFFFF;
	box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(153, 153, 153, 0.2);
	
}
.reasonBottomBtn{
	width: 661rpx;
	height: 86rpx;
	background: #EC0F0A;
	border-radius: 43rpx;
	line-height: 86rpx;
	text-align: center;
	font-size: 32rpx;
	color: #FFFFFF;
	margin: 0 auto;
}
.bottomBox{
	position: fixed;
	left: 0;bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom); 
	width: 100%;
	background: #FFFFFF;
	box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(153, 153, 153, 0.2);
}
.bottomMS{
	font-size: 24rpx;
	color: #706F77;
	padding-top: 20rpx;padding-left: 32rpx;
}
.bleft{
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	line-height: 86rpx;
	padding-left: 32rpx;
}
.Btn{
	width: 467rpx;
	height: 86rpx;text-align: center;
	line-height: 86rpx;
	background: #FCD903;
	border-radius: 43rpx;
	font-size: 32rpx;
	color: #110B01;
	margin-right: 36rpx;
}
.mealBox img{
	width: 100%;
}
.mealBox image{
	width: 100%;
}
.numJsbox{
	display: flex;overflow: hidden;
}
.buyCont{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 750rpx;
	height: 688rpx;
	background: #FFFFFF;
	border-radius: 26rpx 26rpx 0px 0px;
}
.buyNumBox{
	padding: 30rpx;
    padding-top: 10rpx;
	padding-bottom: 70rpx;
}
.buyContCh{
	position: absolute;
	top: 53rpx;
	right: 36rpx;
	width: 36rpx;
	height: 36rpx;
}
.goodsnum{
	width: 44rpx;
	height: 44rpx;
	background: #F4F5F7;
	line-height: 44rpx;
	text-align: center;
	font-weight: 500;
	color: #333333;
	font-size: 24rpx;
	margin: 0 4rpx;
	border-left:1px solid #dddddd;
	border-right:1px solid #dddddd;
}
.goodsnumInput{
	width: 44rpx;
	height: 44rpx;
	background: #FFFFFF;
	line-height: 44rpx;
	text-align: center;
	font-weight: 500;
	color: #333333;
	font-size: 24rpx;
}
.numJj{
	width: 44rpx;
	height: 44rpx;
	background: #ffffff;
	border-radius: 0px 6rpx 6rpx 0px;	
	text-align: center;
	line-height: 44rpx;
	font-size: 32rpx;
	color: #999999;
}
.numJsbox{
	border: 1px solid #dddddd;
	border-radius: 6rpx;
}
.imgBox {
		display: flex;
		flex-wrap: wrap;
		padding-top: 15rpx;
		
	}

	.imgLine {
		position: relative;
		margin-right: 20.6rpx;
	}
	.img4{
		margin-right: 0rpx;
	}

	.itemImg {
		width: 150rpx;
		height: 150rpx;
		margin-bottom: 20rpx;
	}


	.delImg {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 0rpx;
		top: 0rpx;
	}
.gaodu{
	height: 200rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom); 
}
.jiekouLIne{
	padding-bottom: 36rpx;
}
.xuanzhong{
	    color: #222222;
}
</style>