maishidaSJ/pages/OrderList/OrderDetail.vue

<template>
	<view class="">
		<customNav :shownav="true" :title="$t('index.orderxq')" titledetl=""></customNav>
		<!-- <view class="mapcontent"  :style="'height:'+mapHeight+'rpx;'">
			<mapView :pcovers="pcovers"></mapView>
		</view>
		<view class="contentV" :style="'margin-top:'+mapHeight+'rpx;'"> -->
		<view class="contentV">
		
		
		<label class="linesp"></label>
		<uni-list>
		    <uni-list-item :title="posName" thumb="/static/images/shouye.png" thumb-size="sm" :rightText="ordertypename" ></uni-list-item>
			<uni-list-item v-if="orderxq.collectPayment==1" :title="$t('index.huodaofukan')" :rightText="$t('api.shi')"/>
			<uni-list-item v-if="orderxq.collectPayment==0" :title="$t('index.huodaofukan')" :rightText="$t('api.fou')"/>
			<uni-list-item :title="$t('order.zhuangtai')" :rightText="stateName"/>
		</uni-list>
		<view v-for="item in food">
			<view class="spnodetail">
				<view class="">
					<netImage class="spIcon" width="90" height="90" bradius="4" :mysrc="item.image" mymode="scaleToFill"></netImage>
				</view>
				<view style="width: 100%;">
					<view class="actBTV">
						<view style="font-size: 30rpx;">{{item.name}}</view>
						<view style="font-size: 28rpx;color: brown;margin-right: 30rpx;">X {{item.number}}</view>
					</view>
					<view class="actBTV">
						<view style="font-size: 26rpx;color: blueviolet;">{{$t('shangpin.shoujia')}}: {{$formPr(item.price+item.otherPrice)}}{{$t('locale.huobidw')}}</view>
						<view class="xiaoji" style="font-size: 28rpx;color: brown;">{{$t('shangpin.xiaoji')}}: {{$formPr((item.price+item.otherPrice)*item.number)}}{{$t('locale.huobidw')}}</view>
					</view>
					<view class="viewinrow" >
						<view class="kouweisku">{{arraytoStr(item.ask)}}</view>
					</view>
					<view v-if="item.beizhu" class="">
						<text style="font-size: 30rpx;color:#00A6FF;">{{item.beizhu}}</text>
					</view>
				</view>
			</view>
		</view>
		<label class="linesp"></label>
		<uni-list v-if="ordertype==0">
			<!-- <uni-list-item :title="$t('index.peisongdizhi')" :rightText="address"/>
			<uni-list-item :title="$t('order.shoujianren')" :rightText="name"/>
			<uni-list-item :title="$t('order.lianxidianhua')" :rightText="phone"/> -->
			<uni-list-item :title="$t('order.yuyueshijian')" :rightText="orderxq.delryTime" />
		</uni-list>
		<uni-list v-if="ordertype!=0">
			<!-- <uni-list-item :title="$t('order.mendiandiz')" :rightText="address"/>
			<uni-list-item :title="$t('order.lianxidianhua')" :rightText="phone"/> -->
			<uni-list-item :title="$t('order.yuyueshijian')" :rightText="orderxq.delryTime" />
		</uni-list>
		<text class="linesp"></text>
		<uni-list>
			<uni-list-item :title="$t('order.shangpinxj')" :rightText="$formPr(spxji)+$t('locale.huobidw')" />
		    <uni-list-item :title="$t('index.youhuiq')" :rightText="getcxname()"></uni-list-item>
			<uni-list-item :title="$t('order.youhuijine')" :rightText="getyhjr(orderxq)"/>
			<uni-list-item :title="$t('order.dingdanjin')" :rightText="getspjr(orderxq)"/>
		</uni-list>
		<view v-if="orderxq.activity" class="contentColumnC psfnote">
			<text v-if="orderxq.activity.salesType!=0" class="textfontB5" style="color:white;padding: 6rpx;">{{$t('order.sjyhts')}}</text>
		</view>
		<text class="linesp"></text>
		<uni-list>
		    <!-- <uni-list-item :title="$t('order.dingdanxx')" thumb-size="sm"></uni-list-item> -->
			 <uni-list-item :title="$t('order.danhao')+':'" :rightText="ddid" />
			 <!-- <uni-list-item :title="$t('order.zhifufangshi')" rightText=""/> -->
			 <uni-list-item :title="$t('order.xiadanshijian')" :rightText="cretim"/>
		</uni-list>
		<label class="linesp"></label>
		</view>
		<view v-if="orderxq.remarks!=''" class="contentInRowL contentV">
			<view class="contentColumn">
				<text class="textfontB4">{{$t('order.beizhu')}}:</text>
				<text class="pinglun textfontB5">{{orderxq.remarks}}</text>
			</view>
		</view>
		<view style="height: 40rpx;"></view>
		<view>
			<uni-popup ref="popPay" type="center" :isMaskClick="truefalse" :safeArea="truefalse">
				<tuikanPop :refund_fee="refund_fee"  v-on:Etuikanresult="tuikanresult"></tuikanPop>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	
	import {

		setorderuzt,
		VNtuikuan
	} from '@/pages/api/basic.js';
	import api from "@/pages/api/api.js"
	
	import uniList from '@/uni_modules/uni-list/uni-list.vue';
	import uniListItem from '@/uni_modules/uni-list-item/uni-list-item.vue';
	import uniAd from '@/uni_modules/uni-list-ad/uni-list-ad.vue';
	import uniChat from '@/uni_modules/uni-list-chat/uni-list-chat.vue';
	import popv from '@/pages/component/popViewA/popViewA.vue';
		export default {
			components:{
				uniList,uniListItem,uniAd,uniChat,popv
			},
		data() {
			return {
				ddid:'',
				orderxq:[],
				state:0,
				stateName:'',
				posName:'',
				telphone:'',
				food:[],
				amount:0,
				address:'',
				name:'',
				phone:'',
				Id:'',
				cretim:'',
				spxji:0,
				peisongfei:0,
				isshangjia:0,
				mendid:'',
				ordertype:0,
				mapHeight:0,
				pcovers:'',
				ordertypename:'',
				truefalse:true,
				refund_fee:0
				
			}
		},
		onLoad(option) {
			this.ddid = option.ddid;
			this.isshangjia = option.isShangjia;
			this.getstoreorderxq();
			var info = uni.getSystemInfoSync();
			console.log(info);
			this.mapHeight=info.windowHeight/2;
		},
		onShow() {
			
		},
		methods: {
			getcxname(){
				if(this.orderxq.activity){
					return this.orderxq.activity.salesName;
				}
				return '';
			},
			getspjr(obj){
				var jinr=0;
				var yunfei = 0;
				if(obj.type!=0){
					yunfei=obj.freight;
				}
				if(obj.activity){
					if(obj.activity.salesType=="0"){
						if(obj.discountAmount){
							if(yunfei>obj.discountAmount){
								jinr=obj.amount-(yunfei-obj.discountAmount);
							}
							else{
								jinr =obj.amount-yunfei;
							}
							
						}else{
							jinr =obj.amount-yunfei;
						}
					}
					else{
						jinr =obj.amount-yunfei;
					}
				}
				else{
					jinr =obj.amount-yunfei;
				}
				jinr=parseInt(jinr);
				
				return this.$formPr(jinr)+this.$t('locale.huobidw');
			},
			getyhjr(obj){
				var jinr=0;
				if(obj.discountAmount){
					jinr=obj.discountAmount;
				}
				jinr=parseInt(jinr);
				return '-'+this.$formPr(jinr)+this.$t('locale.huobidw');
			},
			arraytoStr(arry){
				var str='';
				if(arry.length>0){
					for(var i=0;i<arry.length;i++){
						str=str+arry[i]+'; ';
					}
					
				}
				return str;
			},
			getstoreorderxq(){
				
				api('getorderxq',{
					ddid:this.ddid
				},
				r=>{
					this.orderxq=r.data.data
					console.log('1---------1:',this.orderxq);
					this.dowithddxq();
				},failc=>{
				});
				
			},
			dowithddxq(){
				this.state=this.orderxq.state;
				this.posName=this.orderxq.store.posName;
				this.telphone = this.orderxq.store.telephone;
				this.food=this.orderxq.food;
				this.amount=this.orderxq.amount;
				this.peisongfei=this.orderxq.freight;
				if(this.orderxq.shaddress){
					this.address=this.orderxq.shaddress.address;
					this.name=this.orderxq.shaddress.name;
					this.phone=this.orderxq.shaddress.phone;
				}
				this.Id=this.orderxq.id;
				this.cretim=this.orderxq.cretim;
				this.spxji = 0;
				this.mendid = this.orderxq.store.id;
				for (var i=0;i<this.food.length;i++) {
					var item = this.food[i];
					this.spxji=this.spxji+(item.price+item.otherPrice)*item.number;
				}
				
				if(''==this.orderxq.delryTime||undefined==this.orderxq.delryTime||null==this.orderxq.delryTime){
					this.orderxq.delryTime=this.$t('order.jinkuaichuc');
				}
				this.dowithOrderstate();
				this.dowithMap();
			},
			
			dowithOrderstate(){
				
				switch(this.state){
					case 0:
					this.stateName = this.$t('order.daifukshij') +'14:28';
					break;
					case 1:
					this.stateName = this.$t('order.daishouli');
					break;
					case 2:
					this.stateName = this.$t('order.yishouli');
					break;
					case 3:
					this.stateName = this.$t('order.peisongzhong');
					break;
					case 4:
					this.stateName = this.$t('order.peisongzhong');
					break;
					case 5:
					this.stateName = this.$t('order.yiwancheng');
					break;
					case 6:
					this.stateName = this.$t('order.shenqingtuikuan');
					break;
					case 7:
					this.stateName = this.$t('order.tongyituik');
					break;
					case 8:
					this.stateName = this.$t('order.jujuetuiK');
					break;
					case 9:{
						if(this.orderxq.kefuState==0){
							this.stateName = this.$t('order.kefujs');
							break;
						}
						else{
							if(this.orderxq.kefuRepeat==0){
								if(this.orderxq.kefuState==0){
									this.stateName = this.$t('order.shouhwc');
									break;
								}
								if(this.orderxq.kefuState==1){
									this.stateName = this.$t('order.yishouli');
									break;
								}
								if(this.orderxq.kefuState==2){
									this.stateName = this.$t('order.daishouli');
									break;
								}
							}
							else{
								if(this.orderxq.repeatDdId){
									this.stateName = this.$t('order.chongpaidd')+':'+this.orderxq.repeatDdId;
									break;
								}
								else{
									this.stateName = this.$t('order.chongpaidd');
									break;
								}
							}
						}
					}
					case 10:
					this.stateName = this.$t('order.zuofei');
					break;
					case 11:
					this.stateName = this.$t('order.shouhwc');
					break
					case 12:
					this.stateName=this.$t('order.songda');
					break;
				}
				
				if(this.orderxq.type==0){
					this.ordertype = 0;
					this.ordertypename=this.$t('order.peisong');
				}
				else if(this.orderxq.type==1){
					
					this.ordertype = 1;
					this.ordertypename=this.$t('order.ziqu');
					if(this.state==3||this.state==4){
						this.stateName = this.$t('order.daiqucan');
					}
				}
				else{
					this.ordertype = 2;
					this.ordertypename=this.$t('shouye.tangshi');
					if(this.state==3||this.state==4){
						this.stateName = this.$t('order.daiqucan');
					}
				}
			},
			
			dowithMap(){
				this.pcovers=[{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '/static/images/dizhil@3x.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '/static/images/dizhil@3x.png'
				}]
			},
			
			callPhone(){
				var that = this;
				uni.showModal({
				    title: that.$t('api.message'),
				    content:that.$t('api.nqdbddh'),
					cancelText: that.$t('order.quxiao'), // 取消按钮的文字
					confirmText: that.$t('comp.queren'), // 确认按钮的文字 
				    success: function (res) {
				        if (res.confirm) { //这里是点击了确定以后
							console.log(that.mendianMs.telphone)
							plus.device.dial(that.mendianMs.telphone, false );
				        } else { //这里是点击了取消以后
				          console.log('点击取消')
				        }
				    }
				})
			},
			
			choosebt(index){
				switch(index){
					case 1://去支付
					this.choosePay();
					break;
					case 2://修改订单
					break;
					case 3://取消订单
					var that = this;
					uni.showModal({
						title: that.$t('api.message'),
						content: that.$t('order.shifouqx')+ddid+that.$t('index.order')+'?',
						cancelText: that.$t('order.quxiao'), // 取消按钮的文字
						confirmText: that.$t('comp.queren'), // 确认按钮的文字 
						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;
					case 5://申请退款
					this.refund_fee=this.amount;
					this.$refs.popPay.open('center');
					break;
					case 6://联系商家
					break;
				}
			},
			
			setorderuzt(state,id){
				api('setorderuzt',{
					id:id,
					state:state
				},
				r=>{
					this.getstoreorderxq();
				},failc=>{
					//console.log('getadvertis----',failc)
					
				});
				
			},
			
			tuikanresult(refund_fee){
				this.$refs.popPay.close();
				if(refund_fee==-1){//取消
					return;
				}
				if(refund_fee==-2){//拒绝退款
					this.setorderuzt(8,this.Id);
					return;
				}
				if(this.orderxq.collectPayment==1){
					this.setorderuzt(10,this.Id);
					return;
				}
				
				this.quanertuikuan(refund_fee);
			},
			//部分退款
			quanertuikuan(refund_fee){
				console.log('quanertuikuan');
				
				api('VNtuikuan',{
					"order_id": this.ddid, //需要退款的订单号
					"amount": parseInt(refund_fee), //退款金额
					"trantype": '03', //退款类型：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.$t('order.tuikuanchg'),
							    icon: 'none',
							    duration: 2500
							})
							this.setorderuzt(7,this.Id);
						}else if(res.data.data.vnp_ResponseCode=='94'){
							uni.showToast({
							    title:this.$t('order.tuikuanchg'),
							    icon: 'none',
							    duration: 2500
							})
							this.setorderuzt(7,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('getadvertis----',failc)
					
				});
				
			},
			
		}
	}
</script>

<style>
	
page{
	background-color: #F2F3F7;
}
.mapcontent{
	position: fixed;
	left: 0;
	right: 0;
	top: 120rpx;
	z-index: 999;
}
.psfnote{
	width: 92%;
	margin-left: 4%;
	margin-top: 16rpx;
	border-radius: 10rpx;
	background-color: crimson;
	margin-bottom: 16rpx;
}
.contentV{
	margin-top: 30rpx;
	width:94%;
	margin-left: 3%;
}
.viewinrow{
	display: flex;
	flex-direction: row;
	align-items: center;
}
	
.topActV{
	width: 100%;
	height: 280rpx;
	background-color: white;
}

.topActVB{
	width: 100%;
	height: 260rpx;
	background-color: white;
}

.notext{
	padding-top: 10rpx;
	padding-left: 20rpx;
	font-size: 40rpx;
	color: #000;
	font-weight:bold;
}
.nodetail{
	height: 48rpx;
	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;
}
.actBTV{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-items: center;
}
.actbt{
	width: 32%;
	height: 100rpx;
	margin-top: 10rpx;
	align-items: center;
	justify-content: center;
}
.ddbticon{
	margin-top: 16rpx;
	width: 100%;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ddtext{
	margin-top: 14rpx;
	text-align: center;
	font-size: 26rpx;
	color: black;
}
	
.bticon{
	width: 60rpx;
	height: 60rpx;
}

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

.xiaoji{
	margin-left: auto;
	margin-right: 30rpx;
}

.kouweisku{
	padding-left: 10rpx;
	color: chocolate;
	font-size: 26rpx;
}

.linesp{
	width: 100%;
	height: 8rpx;
	background-color: aliceblue;
}

.buyGoodsv{
	width: 100%;
	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-left: auto;
	margin-right: 40rpx;
}

.pinglun{
	margin: 16rpx;
	padding: 10rpx;
	width:660upx;
	border-radius: 15rpx;
	border: 2rpx solid lightgray;
}
</style>