meishidaQS/components/orderItemC/orderItemC.vue

<template>
	<view style="background-color: whitesmoke;">
		<view class="itemV content" v-for="(item,indexo) in orderList">
			<view class="contentInRowS">
				<text class="timeText">{{item.ddId}}</text>
				<text v-if="item.collectPayment==1" class="jiedanBtdf" style="font-size: 24rpx;">{{$t('index.huodaofukan')}}</text>
			</view>
			<view class="contentColumn">
				<view class="contentInRowL">
					<text class="titleText" style="margin-left:20rpx;">{{$t('order.peisongfei')}}: {{$formPr(item.freight)}}{{$t('api.huobidanwei')}}</text>
				</view>
				<view class="contentInRowR">
					<text class="priceText" >{{$t('order.dingdanjin')}}: {{$formPr(item.amount)}}{{$t('api.huobidanwei')}}</text>
				</view>
			</view>
			<view v-if="item.activity" class="contentInRowL" style="margin-left:20rpx;">
				<text class="titleText">{{$t('index.youhuiq')}}:</text>
				<text class="titleText" style="padding-left: 20rpx;">{{item.activity.salesName}}</text>
			</view>
			<view style="width: 100%;margin-top: 20rpx;margin-left: 20rpx;" class="contentInRowL">
				<view v-if="item.store" class="contentColumn">
					<view>
						<text class="quhuodian">{{$t('order.quhuodian')}}</text>
					</view>
					<view style="margin-top: 20rpx;margin-left: 10rpx;width: 94%;">
						<text class="titleText">{{item.store.posName}}</text>
					</view>
				</view>
			</view>
			
			<view style="margin-left: 20rpx;margin-top: 20rpx;" class="contentInRowL">
				<view style="width: 100rpx" class="contentColumn">
					<text class="shouhuodian">{{$t('order.shouhuodian')}}</text>
				</view>
				<view style="margin-left: 20rpx;width: 80%;" class="contentColumn">
					<view v-if="item.shaddress!=null" @click="openBimg(item.shaddress.annexes)">
						<view class="contentInRowL">
							<text class="titleText">{{item.shaddress.name}}</text>
							<text class="distenText">({{$t('order.juli')}}{{item.jvli}}Km)</text>
						</view>
						<text class="addrText">{{item.shaddress.address}}</text>
						<text v-if="item.remarks!=''" class="noteText">{{item.remarks}}</text>
					</view>
					
					<view v-for="(itemf,index) in item.food">
						<view class="contentInRowL" style="margin-top: 12rpx;">
							<myImage class="spIcon" :mysrc="itemf.image" mymode="scaleToFill" ></myImage>
							<view class="contentColumn" style="margin-left: 10rpx;width: 78%;">
								<text class="addrText">{{itemf.name}}</text>
								<view class="contentInRowS">
									<view class="contentInRowL ">
										<text class="kouweisku" v-for="sku in itemf.ask">{{sku}}</text>
									</view>
									<text class="addrText">{{itemf.number}}(份)</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="item.activity" class="contentColumnC psfnote">
				<text v-if="item.activity.salesType==0" class="addrText" style="color:white;padding: 6rpx;">{{$t('order.qishouyhts')}}</text>
			</view>
			<view class="contentInRowS" style="width: 90%;margin-top: 20rpx;margin-left: 5%;">
				<text class="addrText">{{$t('zhanghu.zhuangtai')}}：{{getStateStr(item)}}</text>
			</view>
			<view class="contentInRowS" style="width: 90%;margin-top: 20rpx;margin-left: 5%;">
				<view class="wanchengT" style="background-color: crimson;" @click="chakantp(item)">{{$t('order.chakantp')}}</view>
				<view class="wanchengT" style="background-color:#006AFF;" @click="gotoMsgList(item)">{{$t('order.lianxikef')}}</view>
			</view>
			<view v-if="item.shaddress!=null" class="contentInRowS" style="align-items: flex-start;">
				<view class="contentColumnC" style="margin:20rpx;padding-left: 10rpx;" @click="callPhone(item.shaddress.phone,item.user)">
					<uni-icons custom-prefix="custom-icon" color="#006AFF" type="phone-filled" size="28"></uni-icons>
					<label class="jiedanText">{{$t('order.lianxi')}}</label>
				</view>
				<view class="contentColumnC" style="margin:20rpx;padding-right: 10rpx;" @click="gotoNav(item.shaddress)">
					<uni-icons custom-prefix="custom-icon" color="#006AFF" type="navigate-filled" size="28"></uni-icons>
					<label class="jiedanText">Navigation</label>
				</view>
				<view v-if="canopenBimg(item.shaddress.annexes)" class="contentColumnC" style="margin:20rpx;padding-left: 10rpx;" @click="openBimg(item.shaddress.annexes)">
					<uni-icons custom-prefix="custom-icon" color="#006AFF" type="home" size="28"></uni-icons>
					<label class="jiedanText">{{$t('order.menpaizp')}}</label>
				</view>
				<view class="contentColumnC" style="margin:20rpx;padding-left: 10rpx;" @click="Exchange(item.ddId,item.user)">
					<uni-icons custom-prefix="custom-icon" color="#006AFF" type="chatboxes" size="28"></uni-icons>
					<label class="jiedanText">{{$t('exchange.xinxi')}}</label>
				</view>
				<view class="contentColumnC" style="margin:20rpx;padding-left: 10rpx;" @click="imCall(item.ddId,item.user)">
					<uni-icons custom-prefix="custom-icon" color="#006AFF" type="phone" size="28"></uni-icons>
					<label class="jiedanText">IM Call</label>
				</view>
			</view>
		</view>
		<uni-popup style="z-index: 9999;" ref="popNav" type="center" :isMaskClick="true" :safeArea="true">
			<disanfanfNav :lat="lat" :lon="lon" :cityName="addrName" v-on:ENavOpen="NavOpen"></disanfanfNav>
		</uni-popup>
	</view>
</template>

<script>
	import {
		setorderuzt,
		setLocat
	} from '@/pages/api/basic';
	export default {
		name:"orderItem",
		props:{
			orderList:'',
			qsId:''
		},
		data() {
			return {
				isAndroid:true,
				lat:0,
				lon:0,
				addrName:''
			};
		},
		mounted() {
			let systemInfo = uni.getSystemInfoSync();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			console.log('mounted------------------')
		},
		methods:{
			getStateStr(obj){
				if(obj.kefuState==0){
					 return this.$t('order.kefujs');
				}
				else{
					if(obj.kefuRepeat==0){
						if(obj.kefuState==1){
							return this.$t('order.yishouli');
						}
						if(obj.kefuState==2){
							return this.$t('order.shouhwc');
						}
					}
					else{
						if(obj.repeatDdId){
							return this.$t('order.chongpaidd')+':'+obj.repeatDdId;
						}
						else{
							return this.$t('order.chongpaidd');
						}
					}
				}
			},
			gotoMsgList(obj){
				uni.navigateTo({
					url:'/pages/kehufuwu/kefuMsgList?ddId='+obj.ddId
				})
			},
			chakantp(obj){
				var data={
					id:'',
					img:'[]'
				}
				if(obj.sqImg){
					data.img=obj.sqImg;
				}
				uni.navigateTo({
					url:'/pages/index/GoodsImages?obj='+JSON.stringify(data)
				})
			},
			canopenBimg(mysrc){
				if(!mysrc){
					return false;
				}
				if(mysrc.length<8){
					return false;
				}
				return true;
			},
			openBimg(mysrc){
				
				if(!mysrc){
					return;
				}
				if(mysrc.length<8){
					return;
				}
				console.log(mysrc);
				uni.navigateTo({
					url:'/pages/index/BigimageView?mysrc='+mysrc
				})
			},
			jiedan(id){
				var online = getApp().globalData.isOnline;
				if(!online){
					uni.showToast({
					    title: this.$t('user.xiaxianzh'),
					    icon: 'none',
					    duration: 2500
					})
					return;
				}
				
				if(this.qsId<=0 ||''==this.qsId){
					uni.showToast({
					    title: this.$t('user.denglushixiao'),
					    icon: 'none',
					    duration: 2500
					})
					return;
				}
				this.setorderuzt(id,3)
			},
			quchan(id){
				this.setorderuzt(id,4)
			},
			wancheng(obj){
				if(obj.collectPayment==0){
					this.setorderuzt(obj.id,5);
				}
				else{
					var that = this;
					uni.showModal({
					    title: that.$t('api.message'),
					    content:that.$t('index.shoukuanwc'),
						confirmText:that.$t('index.queren'),
						cancelText:that.$t('index.quxiao'),
					    success: function (res) {
					        if (res.confirm) { //这里是点击了确定以后
								console.log('打电话')
								that.setorderuzt(obj.id,5)
					        } else { //这里是点击了取消以后
					          console.log('点击取消')
					        }
					    }
					})
				}
			},
			callPhone(telphone,user){
				var that = this;
				uni.showModal({
				    title: that.$t('api.message'),
				    content:that.$t('api.nqdbddh'),
					confirmText:that.$t('index.queren'),
					cancelText:that.$t('index.quxiao'),
				    success: function (res) {
				        if (res.confirm) { //这里是点击了确定以后
							console.log('打电话')
							plus.device.dial(telphone, false );
				        } else { //这里是点击了取消以后
				          console.log('点击取消')
				        }
				    }
				})
			},
			imCall(ddid,user){
				var data = {
					ddId:ddid,
					userId:user.userId,
					nickName:user.nickName,
					avatar:user.avatar,
					cid:user.cid
				}
				uni.setStorageSync('imUser',user);
				uni.navigateTo({
					url:'/pages/imcall/audioCall?caller=1'
				})
			},
			Exchange(ddid,user){
				console.log(ddid,user);
				var data = {
					ddId:ddid,
					userId:user.userId,
					nickName:user.nickName,
					avatar:user.avatar,
					cid:user.cid
				}
				uni.setStorageSync('imUser',data);
				// uni.navigateTo({
				// 	url:'/pages/imcall/ExchangeView?caller=1'
				// })
				uni.navigateTo({
					url:'/pages/imcall/GoeasyExchange?caller=1'
				})
			},
			async setorderuzt(rId,state,){
				var that = this;
				var data;
				if(state==3){
					data={
						id:rId,
						state:state,
						qsId:this.qsId
					}
				}
				else{
					data={
						id:rId,
						state:state,
						qsId:this.qsId,
						diningStatus:1
					}
				}
				await this.$http.post(`${setorderuzt}`,data,true)
				.then(async r => {
					console.log(r);
					this.$emit('ErefleshList');
				})
				.catch(err => {
					console.log(err)
				})
			},
			gotoNav(store){
				this.lat = store.latitude;
				this.lon = store.longitude;
				this.addrName = store.address;
				this.$refs.popNav.open('center');
				
				return;
				var navData={
					latitude:store.latitude,
					longitude:store.longitude,
					address:store.address
				}
				var temp = JSON.stringify(navData);
				
				uni.navigateTo({
					url:'/pages/map/mapboxView?navdata='+temp
				})
				//this.handlePosition(store.latitude,store.longitude,store.address);
			},
			NavOpen(){
				this.$refs.popNav.close();
			},
		},
	}
</script>

<style>
	@import '@/common/common.scss';
	@font-face {
		font-family: zrht;
		src: url('/uni_modules/font/zrht.otf');
	}

.itemV{
	margin-top: 16rpx;
	background-color: white;
}
.psfnote{
	width: 92%;
	margin-left: 4%;
	margin-top: 5rpx;
	border-radius: 10rpx;
	background-color: crimson;
}
.spIcon{
	width: 90rpx;
	height: 90rpx;
}

.kouweisku{
	color:chocolate;
	padding-right: 12rpx;
	font-size: 28rpx;
}
.qiangdImg{
	width: 120rpx;
	height: 120rpx;
}

.quhuodian{
	font-size: 26rpx;
	padding: 8rpx;
	color: royalblue;
	border-radius: 16rpx;
	border: solid royalblue;
}

.shouhuodian{
	font-size: 26rpx;
	padding: 8rpx;
	color: crimson;
	border-radius: 16rpx;
	border: solid crimson;
}
.lineimag{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-left: 45rpx;
	width: 4rpx;
	background-color: lightgray;
	height: 100rpx;
	margin-top: 4rpx;
	margin-bottom: 4rpx;
}
.yuandian{
	width: 16rpx;
	height: 16rpx;
	background-color: lightgray;
	border-radius: 8rpx;
	margin-left: -8rpx;
}

.timeText{
	font-size: 32rpx;
	color: #006AFF;
	padding-left: 20rpx;
	font-weight: bold;
}

.priceText{
	font-size: 30rpx;
	color: crimson;
	padding-right: 20rpx;
}

.titleText{
	font-size: 28rpx;
	/* font-family: zrht; */
}

.pnametext{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.distenText{
	font-size: 26rpx;
	color: darkgray;
	padding-left: 20rpx;
}

.addrText{
	font-size: 28rpx;
	color: dimgray;
}

.stateText{
	font-size: 28rpx;
	color: darkgray;
	padding: 8rpx;
	border: solid darkgray;
	border-radius: 8rpx;
	
}

.noteText{
	margin-top: 16rpx;
	font-size: 28rpx;
	color: dimgray;
	padding: 8rpx;
	background-color: whitesmoke;
	border-radius: 8rpx;
}

.connectText{
	font-size: 28rpx;
	color: black;
	padding-left: 8rpx;
	padding-right: 8rpx;
	padding-top: 2rpx;
	padding-bottom: 2rpx;
	border: 2rpx solid darkgray;
	border-radius: 8rpx;
	
}

.setImg{
	width: 30rpx;
	height: 30rpx;
}

.setImgB{
	width: 40rpx;
	height: 40rpx;
}


.jiedanText{
	font-size: 24rpx;
	color: black;
}

.jiedanTextS{
	font-size: 20rpx;
	color: black;
}

.wanchengV{
	width: 480rpx;
	height: 68rpx;
	border-radius: 10rpx;
	background-color: crimson;
}

.wanchengT{
	padding-left: 20rpx;
	padding-right: 20rpx;
	line-height: 68rpx;
	font-weight: bold;
	font-size: 26rpx;
	color: white;
	border-radius: 10rpx;
	text-align: center;
}

.jiedanBtdf{
	padding: 10rpx;
	color:white;
	background-color: #1A1A1A;
	border-radius: 8rpx;
	box-shadow: 0rpx 0rpx 2rpx 0rpx #1A1A1A;
}
	
</style>