meishidaYH/msdYongHu/pages/OrderList/MainOrderDetail/MainOrderDetail.vue

<template>
	<view class="">
		<customNav :shownav="true" :title="i18n('index.orderxq')" titledetl=""></customNav>
		
		<view class="contentColumn " style="background-color: white;margin-top: 40rpx;">
			<view class="spaceCtvauto" v-for="(items,indexs) in food">
				<view class="contentInRowL">
					<netImage style="margin-left: 12rpx;margin-top: 10rpx;" width="60" height="60" bradius="30" :mysrc="items.logo" mymode="scaleToFill"></netImage>
					<text>{{items.posName}}</text>
				</view>
				<view v-for="(item,index) in items.food">
					<view class="spnodetail">
						<view class="">
							<myImage class="spIcon" :mysrc="item.image" mymode="scaleToFill"></myImage>
						</view>
						<view style="width: 600rpx;">
							<view class="actBTV">
								<view style="font-size: 30rpx;">{{item.name}}</view>
							</view>
							<view class="keywordLct" >
								<view class="kouweisku" v-for="sku in item.ask">{{sku}}</view>
							</view>
							<view class="contentInRowS" style="margin-bottom: 8rpx;">
								<view style="font-size: 26rpx;color: blueviolet;margin-right: 10rpx;">{{$t('shangpin.shoujia')}}: {{Rdanjia(item.price,item.otherPrice)}}{{$t('locale.huobidw')}}</view>
								<view class="viewinrow" >
									<image v-if="item.number>0" class="imageRJ" src="/static/meishi/jianh.png" mode="aspectFit" ></image>
									<text v-if="item.number>0" class="textR">{{item.number}}</text>
									<image class="imageR" src="/static/meishi/jiah.png" mode="aspectFit" ></image>
								</view>
							</view>
							<view v-if="item.beizhu" class="">
								<text style="font-size: 30rpx;color:#00A6FF;">{{item.beizhu}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="ordertype==0">
				<view class="contentColumn spaceCtvauto" >
					<text class="textfontB4">{{i18n('index.peisongdizhi')}}</text>
					<text class="textfontS1 adrrTextV">{{address}}</text>
				</view>
				<view class="contentInRowS spaceCtv">
					<text class="textfontB4">{{i18n('order.shoujianren')}}</text>
					<text class="textfontB5">{{name}}</text>
				</view>
				<view class="contentInRowS spaceCtv">
					<text class="textfontB4">{{i18n('order.lianxidianhua')}}</text>
					<text class="textfontB5">{{phone}}</text>
				</view>
			</view>
		
			<label class="linesp"></label>
			<view v-if="ordertype==1">
				<view class="contentInRowS spaceCtv">
					<text class="ztextfontB3" style="color:fuchsia">{{i18n('order.ziqu')}}</text>
				</view>
			</view>
			<view v-if="ordertype==2">
				<view class="contentInRowS spaceCtv">
					<text class="ztextfontB3" style="color:fuchsia">{{i18n('shouye.tangshi')}}</text>
				</view>
			</view>
			<label class="linesp"></label>
			<view class="contentInRowS spaceCtv">
				<text class="textfontB4">{{i18n('index.youhuiq')}}</text>
				<text v-if="orderxq.activity" class="textfontB5">{{orderxq.activity.salesName}}</text>
				<text v-if="!orderxq.activity" class="textfontB5">{{i18n('index.wkyyouhuiq')}}</text>
			</view>
			<view class="contentInRowS spaceCtv">
				<text class="textfontB4">{{i18n('order.shangpinxj')}}</text>
				<text class="textfontB5">{{formPr(spxji)}}{{i18n('locale.huobidw')}}</text>
			</view>
			<view v-if="ordertype==0" class="contentInRowS spaceCtv">
				<text class="textfontB4">{{i18n('order.peisongfei')}}</text>
				<text class="textfontB5">{{formPr(peisongfei)}}{{i18n('locale.huobidw')}}</text>
			</view>
			<!-- <view v-if="orderxq.activity" class="contentInRowS spaceCtv">
				<text class="textfontB4">{{i18n('order.youhuijine')}}</text>
				<text class="textfontB5">-{{formPr(yhjinr)}}{{i18n('locale.huobidw')}}</text>
			</view> -->
			<view class="contentInRowS spaceCtvN">
				<text class="textfontB4">{{i18n('order.dingdanjin')}}</text>
				<text class="textfontB5">{{formPr(amount)}}{{i18n('locale.huobidw')}}</text>
			</view>
			<label class="linesp"></label>
			<view class="contentInRowS spaceCtv">
				<text class="textfontB4">{{i18n('order.danhao')}}</text>
				<text class="textfontB5">{{ddid}}</text>
			</view>
			<view class="contentInRowS spaceCtv">
				<text class="textfontB4">{{i18n('order.xiadanshijian')}}</text>
				<text class="textfontB5">{{cretim}}</text>
			</view>
			<view v-if="orderxq.remarks&&orderxq.remarks!=''" class="contentInRowL contentV">
				<view class="contentColumn">
					<text class="textfontB4">{{i18n('order.beizhu')}}:</text>
					<text class="pinglun textfontB5">{{orderxq.remarks}}</text>
				</view>
			</view>
			
			
			<view style="height: 50rpx;"></view>
		</view>
		<uni-popup style="z-index: 999;" ref="popzhif" type="center" :isMaskClick="true" :safeArea="true">
			<view class="contentColumnC" style="width: 100%;background-color: whitesmoke;">
				<view style="height: 40rpx;"></view>
				<text>{{i18n('order.zhifufangshi')}}</text>
				<text class="zhifbut" style="background-color: deeppink;" @click="huodaofukuan">{{i18n('index.huodaofukan')}}</text>
				
				<view style="height: 40rpx;"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import api from "@/pages/api/api.js"
		export default {
		data() {
			return {
				ddid:'',
				orderxq:[],
				state:0,
				stateName:'',
				posName:'',
				telphone:'',
				food:[],
				amount:0,
				address:'',
				name:'',
				phone:'',
				annexes:'',
				Id:'',
				cretim:'',
				spxji:0,
				peisongfei:0,
				yhjinr:0,
				mendid:'',
				ordertype:0,
				startFl:0,
				upImage:false,
				jinduA:0,
				jinduB:0,
				ordertypename:''
			}
		},
		onLoad(option) {
			this.ddid = option.ddid;
			this.getParentOrderDetail();
			
		},
		onShow() {
			// this.getParentOrderDetail();
		},
		onUnload() {
			uni.switchTab({
				url:'/pages/OrderList/OrderList'
			})
		},
		
		methods: {
			isshouh(state){
				if(state==6||state==7||state==8||state==9){
					return true;
				}
				return false
			},
			isdaish(state){
				if(this.orderxq.type==0){
					if(state==12){
						return true;
					}
				}
				else{
					if(this.orderxq.diningStatus==1){
						return true;
					}
				}
				
				return false
			},
			formPr(price){
				var number = '0';
				var type = typeof(price);
				if(type=='string'){
					number = price
				}
				if(type=='number'){
					number = price.toString(); // 确保输入是字符串
				}
				
				const pattern = /(-?\d+)(\d{3})/;
				while (pattern.test(number)) {
					number = number.replace(pattern, "$1,$2");
				}
				return number;
			},
			arraytoStr(arry){
				var str='';
				if(arry.length>0){
					for(var i=0;i<arry.length;i++){
						str=str+arry[i]+'; ';
					}
					
				}
				return str;
			},
			i18n(str){
				var rstr = getApp().globalData.$t(str);
				return rstr;
			},
			Rdanjia(price,othprice){
				if(!othprice){
					othprice=0;
				}
				return this.$formPr((parseFloat(price)+parseFloat(othprice)));
			},
			getParentOrderDetail(){
				api('getParentOrderDetail',{
					ddId:this.ddid
				},res=>{
					console.log('1---------1:',res);
					if(res.data.code==200){
						this.orderxq=res.data.data;
						this.dowithddxq();
					}
					
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			dowithddxq(){
				this.food=this.orderxq.items;
				for(var i=0;i<this.food.length;i++){
					var fitem = JSON.parse(this.food[i].food);
					if(fitem){
						this.food[i].food = fitem;
					}
				}
				if(this.orderxq.shAddress){
					this.orderxq.shAddress=JSON.parse(this.orderxq.shAddress);
					console.log(this.orderxq.shAddress)
					this.address=this.orderxq.shAddress.address;
					this.name=this.orderxq.shAddress.name;
					this.phone=this.orderxq.shAddress.phone;
				}
				this.dowithOrderstate();
			},
			
			dowithOrderstate(){
				if(this.orderxq.type==0){
					this.ordertype = 0;
					this.ordertypename=this.i18n('order.peisong');
				}
				else if(this.orderxq.type==1){
					this.ordertype = 1;
					this.ordertypename=this.i18n('order.ziqu');
					if(this.state==3||this.state==4){
						this.stateName = this.i18n('order.daiqucan');
					}
				}
				else{
					this.ordertype = 2;
					this.ordertypename=this.i18n('shouye.tangshi');
					if(this.state==3||this.state==4){
						this.stateName = this.i18n('order.daiqucan');
					}
				}
				
				this.spxji = 0;
				for(var i=0;i<this.food.length;i++){
					var item = this.food[i];
					var yidongjine=item.foodAmount;
					this.spxji = this.spxji+yidongjine;
				}
				
				this.peisongfei = 0;
				for(var i=0;i<this.food.length;i++){
					var item = this.food[i];
					this.peisongfei =this.peisongfei+ item.freight;
				}
				if(this.ordertype==0){
					this.amount = this.peisongfei+this.spxji;
				}
				else{
					this.amount = this.spxji;
				}
				
				this.cretim = this.orderxq.createTime;
			},
			
			
			callPhone(){
				var that = this;
				uni.showModal({
					cancelText:that.i18n('order.quxiao'),
					confirmText:that.i18n('comp.queren'),
				    title: that.i18n('api.message'),
				    content:that.i18n('api.nqdbddh'),
				    success: function (res) {
				        if (res.confirm) { //这里是点击了确定以后
							console.log(that.mendianMs.telphone)
							plus.device.dial(that.mendianMs.telphone, false );
				        } else { //这里是点击了取消以后
				          console.log('点击取消')
				        }
				    }
				})
			},
			phoneCall(){
				var that = this;
				uni.showModal({
					cancelText:that.i18n('order.quxiao'),
					confirmText:that.i18n('comp.queren'),
				    title: that.i18n('api.message'),
				    content:that.i18n('api.nqdbddh'),
				    success: function (res) {
				        if (res.confirm) { //这里是点击了确定以后
							console.log(that.orderxq.qsuser.phone)
							plus.device.dial(that.orderxq.qsuser.phone, false );
				        } else { //这里是点击了取消以后
				          console.log('点击取消')
				        }
				    }
				})
			},
			
			choosebt(index){
				switch(index){
					case 1://去支付
					{
						this.$refs.popzhif.open('bottom');
						//this.zffsS=true;
					}
					break;
					case 2://修改订单
					break;
					case 3://取消订单
					var that = this;
					uni.showModal({
						cancelText:that.i18n('order.quxiao'),
						confirmText:that.i18n('comp.queren'),
						title: that.i18n('api.message'),
						content: that.i18n('order.shifouqx')+that.ddid+'?',
						success: function (res) {
							if (res.confirm) { //这里是点击了确定以后
								that.setorderuzt(10,that.Id);
							} else { //这里是点击了取消以后
							  console.log('用户点击取消')
							}
							
						}
					})
					break;
					case 4://发表评论
					//this.setorderuzt(3,this.Id);
					uni.navigateTo({
						url:'/pages/OrderList/pinglun?mendid='+this.mendid+'&ddId='+this.ddid
					})
					break;
					return
					case 5://售后列表
					uni.navigateTo({
						url:'/pages/kehufuwu/kefuMsgList?ddId='+this.orderxq.ddId
					})
					break;
					case 6://完成订单
					var that = this;
					uni.showModal({
						cancelText:that.i18n('order.quxiao'),
						confirmText:that.i18n('comp.queren'),
					    title: that.i18n('api.message'),
					    content: that.i18n('mend.shifwanch')+that.ddid+that.i18n('index.order')+'?',
					    success: function (res) {
							if (res.confirm) { //这里是点击了确定以后
								that.setorderuzt(5,that.Id);
							} else { //这里是点击了取消以后
							  console.log('用户点击取消')
							}
							
					    }
					})
					break;
					case 7://开始售后
					var that = this;
					uni.showModal({
						cancelText:that.i18n('order.quxiao'),
						confirmText:that.i18n('comp.queren'),
					    title: that.i18n('api.message'),
					    content: that.i18n('order.shifoushenq')+that.ddid+that.i18n('order.kefujs')+'?',
					    success: function (res) {
							if (res.confirm) { //这里是点击了确定以后
								if(that.orderxq.collectPayment==1){
									that.setorderuzt(9,that.Id);
								}
								else{
									that.setorderuzt(6,that.Id);
								}
								
							} else { //这里是点击了取消以后
							  console.log('用户点击取消')
							}
							
					    }
					})
					break;
				}
			},
			
			setorderuzt(state,id){
				api('setorderuzt',{
					id:id,
					state:state
				},res=>{
					console.log('setorderuzt',res)
					this.getstoreorderxq();
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			
			//直接全额退款
			quanertuikuan(state){
				console.log('quanertuikuan');
				api('VNtuikuan',{
					"order_id": this.ddid, //需要退款的订单号
					"amount": parseInt(this.amount), //退款金额
					"trantype": '02', //退款类型：02全额退款，03部份退款
					'illustrate':'全额退款',
					"transaction":'' //交易号，不存在可为空
				},res=>{
					console.log('VNtuikuan',res);
					if(res.data.code==200){
						if(res.data.data.vnp_ResponseCode=='00'){
							uni.showToast({
							    title:this.i18n('order.tuikuanchg'),
							    icon: 'none',
							    duration: 2500
							})
							this.setorderuzt(state,this.Id);
						}else if(res.data.data.vnp_ResponseCode=='94'){
							uni.showToast({
							    title:this.i18n('order.tuikuanchg'),
							    icon: 'none',
							    duration: 2500
							})
							this.setorderuzt(state,this.Id);
						}
						else{
							uni.showToast({
							    title: res.data.data.vnp_Message,
							    icon: 'none',
							    duration: 2500
							})
						}
					}
					else{
						uni.showToast({
						    title: res.data.msg,
						    icon: 'none',
						    duration: 2500
						})
					}
				},failc=>{
					console.log('VNtuikuan',failc)
				})
			},
			
			huodaofukuan(){
				this.$refs.popzhif.close();
				uni.showLoading({
					title:'Loading...',
					mask:true
				})
				api('setorderuzt',{
					id:this.Id,
					"collectPayment":1
				},res=>{
					console.log('setorderuzt:',res)
					uni.hideLoading();
					if(res.data.code==200){
						this.getstoreorderxq();
					}
					else{
						uni.showToast({
						    title: res.data.msg,
						    icon: 'none',
						    duration: 2000
						})
					}
				},failc=>{
					uni.hideLoading();
					//console.log('getadvertis----',failc)
				})
			},
			
			
			selectImage(){
				console.log('selectImage');
				this.upImage=true;
				 var that = this;
				 uni.chooseImage({
				 	count: 1,  // 图片数量
				 	sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				 	sourceType: ['album'], //从相册选择或者拍照
				 	success: (res) => {
				 		const tempFilePaths = res.tempFilePaths;
				 		console.log('-----',tempFilePaths)
				 		uni.uploadFile({
				 			url:this.$baseUrl.getUploadUrl(), //上传图片api
				 			filePath: tempFilePaths[0],
				 			name: 'file',
				 			header:{
				 				//"Authorization": userinfo.token
				 			},
				 			success: (res) => {
								this.upImage=false;
				 				let group =  JSON.parse(res.data);
				 				that.annexes=group.data;
				 				console.log('aaaa',group)
				 				api('ADDaddress',{
				 					id:that.orderxq.shaddress.id,
				 					annexes:group.data
				 				},
				 				res=>{
				 					if(res.data.code==200){
				 						
				 					}
				 					console.log('getGoodsDetail:',res);
				 				},failc=>{
				 					//console.log('getadvertis----',failc)
				 				})
				 				uni.showToast({
				 					title:'success',
				 					icon:"success"
				 				})
				 			},
							fail: (res) =>{
								console.log('uni.uploadFile',res)
								this.upImage=false;
							}
				 		});
				 	}
				 });
			},
		}
	}
</script>

<style lang="scss">
.spaceCtv{
	width:690upx;
	margin-left: 30upx;
	align-items: center;
	height: 80rpx;
	border-bottom-width: 2rpx;
	border-bottom-color:lightgray;
}
.spaceCtvh{
	width:690upx;
	margin-left: 30upx;
	align-items: center;
	height: 150rpx;
	border-bottom-width: 2rpx;
	border-bottom-color:lightgray;
}

.spaceCtvauto{
	width:690upx;
	margin-left: 30upx;
	justify-content: flex-start;
	border-bottom-width: 2rpx;
	border-bottom-color:lightgray;
}
.spaceCtvN{
	width:690upx;
	margin-left: 30upx;
	align-items: center;
	height: 80rpx;
}
.mapcontent{
	position: fixed;
	height: 400rpx;
	left: 0;
	right: 0;
	z-index: 999;
}
.mapview{
	display: flex;
	width: 750upx;
}
.contentV{
	width:690upx;
	margin-left: 30upx;
	margin-top: 20rpx;
}
.viewinrow{
	display: flex;
	flex-direction: row;
	align-items: center;
}
	
.topActV{
	width: 750upx;
	height: 180rpx;
	background-color: white;
}

.topActVB{
	width: 750upx;
	height: 180rpx;
	background-color: white;
}

.notext{
	padding-top: 10rpx;
	padding-left: 20rpx;
	font-size: 40rpx;
	color: #000;
	font-weight:bold;
}
.nodetail{
	height: 88rpx;
	margin-left: 10rpx;
	margin-right: 10rpx;
	margin-top: 10rpx;
	padding-left: 2rpx;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	background-color: #F1F1F1;
	font-size: 30rpx;
}
.xingimage{
	width: 36rpx;
	height: 36rpx;
}

.actBTVS{
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-items: center;
	width: 650upx;
	margin-left: 15rpx;
}

.actBTV{
	width: 720upx;
	margin-left: 15upx;
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-items: center;
}
.actbt{
	width: 160upx;
	margin-top: 10rpx;
	margin-bottom: 10rpx;
	align-items: center;
	justify-content: center;
}
.ddbticon{
	margin-top: 6rpx;
	width: 160upx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ddtext{
	margin-top: 6rpx;
	text-align: center;
	color: black;
}
	
.bticon{
	width: 50rpx;
	height: 50rpx;
}

.spnodetail{
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: white;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}
.spIcon{
	margin: 20rpx;
	width: 90rpx;
	height: 90rpx;
}

.xiaoji{
	margin-right: 30rpx;
}

.kouweisku{
	padding-right: 10rpx;
	color: chocolate;
	font-size: 26rpx;
	width: 600upx;
}

.linesp{
	width: 750upx;
	height: 8rpx;
	background-color: aliceblue;
}

.buyGoodsv{
	width: 750upx;
	text-align: left;
	height: 60rpx;
	line-height: 60rpx;
	padding-left: 10rpx;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.stattypeD{
	color: black;
	font-weight: bold;
	font-size: 26rpx;
	margin-left: 10rpx;
}

.stattypeA{
	color: darkgray;
	font-size: 26rpx;
	margin-left: 10rpx;
}
.stattype{
	font-size: 26rpx;
	margin-right: 40rpx;
}

.pinglun{
	margin: 16rpx;
	padding: 10rpx;
	width:660upx;
	border-radius: 15rpx;
	border: 2rpx solid lightgray;
}
.zhifbut{
	text-align:center;
	margin-top: 12rpx;
	margin-bottom: 12rpx;
	width:660upx;
	border-radius: 10rpx;
	color: white;
	line-height: 70rpx;
}
.adrrTextV{
	padding-top: 6rpx;
	padding-bottom: 6rpx;
	width:680upx;
}
.foodNameV{
	font-size: 30rpx;
	width:500upx;
}
.imageRJ{
	width: 40rpx;
	height: 40rpx;
	margin-right: 8rpx;
}
.imageR{
	width: 40rpx;
	height: 40rpx;
	margin-right: 30rpx;
}
</style>