meishidaQS/components/orderItem/orderItem.vue

<template>
	<view style="background-color: whitesmoke;">
		<view class="itemV content" v-for="(item,index) 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 pnametext" style="margin-left:20rpx;">{{$t('order.peisongfei')}}: {{$formPr(item.freight)}}{{$t('api.huobidanwei')}}</text>
				</view>
				<view class="contentInRowR">
					<text class="priceText">{{$t('order.shangpinxj')}}: {{$formPr(item.amount)}}{{$t('api.huobidanwei')}}</text>
				</view>
			</view>
			<view v-if="item.activity" class="contentInRowL" style="margin-left:20rpx;">
				<text class="titleText pnametext">{{$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 style="width: 100rpx" class="contentColumn">
					<text class="quhuodian">{{$t('order.quhuodian')}}</text>
					<view class="lineimag">
					</view>
				</view>
				<view style="margin-left: 20rpx;width: 80%;" class="contentColumn">
					<view class="contentColumn">
						<text class="titleText pnametext">{{item.store.posName}}</text>
						<text class="distenText">({{$t('order.juli')}}{{item.qsjvli}}Km)</text>
					</view>
					<view>
						<text class="addrText">{{item.store.address}}</text>
					</view>
					<view >
						<text v-if="item.diningStatus==1" class="stateText">{{$t('order.shangjiayqrcc')}}</text>
					</view>
				</view>
			</view>
			
			<view v-if="item.shaddress!=null" 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" @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>
			<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="contentInRowC" style="width: 100%;margin-top: 10rpx;">
				<view class="contentInRowC wanchengV"  @click="jiedan(item)">
					<view class="wanchengT">{{$t('shouye.jieshoudd')}}</view>
				</view>
			</view>
			<view v-if="item.state==2||1" style="margin-bottom: 20rpx;margin-top: 20rpx;" class="contentInRowS">
				<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>
					<text class="jiedanText">{{$t('order.lianxi')}}</text>
				</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>
					<text class="jiedanText">Navigation</text>
				</view>
				<view class="contentColumnC" style="margin:20rpx;" @click="Exchange(item.ddId,item.user)">
					<uni-icons custom-prefix="custom-icon" color="#006AFF" type="chatboxes" size="28"></uni-icons>
					<text class="jiedanText">{{$t('exchange.xinxi')}}</text>
				</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>
					<text class="jiedanText">IM Call</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	 import api from "@/pages/api/api.js"
	import {
		setorderuzt
	} from '@/pages/api/basic';
	export default {
		name:"orderItem",
		props:{
			orderList:'',
			qsId:''
		},
		data() {
			return {
				isAndroid:true
			};
		},
		mounted() {
			let systemInfo = uni.getSystemInfoSync();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
		},
		methods:{
			openBimg(mysrc){
				
				if(!mysrc){
					return;
				}
				if(mysrc.length<8){
					return;
				}
				console.log(mysrc);
				uni.navigateTo({
					url:'/pages/index/BigimageView?mysrc='+mysrc
				})
			},
			jiedan(obj){
				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;
				}
				var austate = getApp().globalData.auditStatus;
				if(austate!=1){
					uni.showToast({
					    title: this.$t('user.zhanghaowsh'),
					    icon: 'none',
					    duration: 2500
					})
					return;
				}
				if(obj.collectPayment==1){
					var that = this;
					uni.showModal({
					    title:that.$t('shouye.jieshoudd'),
					    content:that.$t('index.jiedanfengx'),
						confirmText:that.$t('index.queren'),
						cancelText:that.$t('index.quxiao'),
					    success: function (res) {
					        if (res.confirm) { //这里是点击了确定以后
								that.setorderuzt(obj,3)
								//向商家推送通知
								that.pushMsg(obj);
					        } else { //这里是点击了取消以后
					          console.log('点击取消')
					        }
					    }
					})
				}
				else{
					this.setorderuzt(obj,3)
				}
				
			},
			pushMsg(obj){//消息推送
				if(obj.shanghu.cid==''||obj.shanghu.cid==null||obj.shanghu.cid==undefined){
					return;
				}
				api('pushMsgSJ',{
					cid:obj.shanghu.cid,
					title:'新订单|Lệnh mới',
					content:'你有新订单了|Anh có lệnh mới.',
					payload:''
				},res=>{
					console.log(res)
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			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',data);
				uni.navigateTo({
					url:'/pages/imcall/audioCall?caller=1'
				})
			},
			Exchange(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/GoeasyExchange?caller=1'
				})
			},
			setorderuzt(obj,state,){
				var that = this;
				var data;
				if(obj.collectPayment==1){
					data={
						id:obj.id,
						state:state,
						qsId:this.qsId,
						collectPayment:obj.collectPayment
					}
				}
				else{
					data={
						id:obj.id,
						state:state,
						qsId:this.qsId
					}
				}
				uni.showLoading({
					title:'Loading...',
					mask:true
				})
				this.$http.post(`${setorderuzt}`,data,true)
				.then(r => {
					uni.hideLoading();
					console.log(r);
					if(r.data.code==500){
						uni.showToast({
						    title: r.data.msg,
						    icon: 'none',
						    duration: 2500
						})
						return;
					}
					this.$emit('ErefleshList');
				})
				.catch(err => {
					uni.hideLoading();
					console.log(err)
				})
			},
			gotoNav(store){
				var navData={
					latitude:store.latitude,
					longitude:store.longitude,
					address:store.address
				}
				var temp = JSON.stringify(navData);
				uni.navigateTo({
					url:'/pages/map/mapboxView?navdata='+temp
				})
				
				// if(this.isAndroid){
				// 	this.handlePosition(store.latitude,store.longitude,store.address);
				// }
				// else{
				// 	var temp = JSON.stringify(navData);
				// 	uni.navigateTo({
				// 		url:'/pages/map/mapboxView?navdata='+temp
				// 	})
				// }
				
			},
			
			handlePosition(lat,lon,cityName) {
				//如果是Andrios的设备
				if (plus.os.name == 'Android') {
					console.log('Android')
					const hasBaiduMap = plus.runtime.isApplicationExist({
						pname: 'com.baidu.BaiduMap',
						action: 'baidumap://'
					});
					const hasAmap = plus.runtime.isApplicationExist({
						pname: 'com.autonavi.minimap',
						action: 'androidamap://'
					});
					const hasgoogle = plus.runtime.isApplicationExist({
						pname: 'com.google.android.apps.maps',
						action: 'comgooglemaps://'
					});
					
					//重点是下面的url要根据官方给出的api进行对应，不同的需求对应不同的api
					let urlBaiduMap =
					'baidumap://map/direction?region=起点&destination='+lat+','+lon+'&coord_type=wgs84&mode=riding&src=andr.paotuiwang.qishou';
					urlBaiduMap = encodeURI(urlBaiduMap)
					let urlAmap =
						'androidamap://viewMap?sourceApplication=appname&poiname='+cityName+'&lat='+lat+'&lon='+lon+'&dev=1';
					urlAmap = encodeURI(urlAmap)
					
					
					var buttons=[];
					if(hasBaiduMap){
						buttons.push({
							title: this.$t('user.baiduNav'),
							value:urlBaiduMap
						})
					}
					if(hasAmap){
						buttons.push({
							title: this.$t('user.gaodeNav'),
							value:urlAmap
						})
					}
					// if(hasgoogle){
					// 	buttons.push({title: this.$t('user.googleNav')})
					// }
					if(buttons.length==0){
						if(hasgoogle){
							var url = 'google.navigation:q=' + lat + ',' + lon;  //如果是国外应用，应该优先使用这个，会启动google地图。这个接口不能统一坐标系，进入百度地图时会有偏差
							plus.runtime.openURL(url);
							return;
						}
					}
					
					plus.nativeUI.actionSheet({
						title: this.$t('user.xuanzedaoh'),
						cancel: this.$t('index.quxiao'),
						buttons: buttons
					}, function(e) {
						plus.runtime.openURL(buttons[e.index-1].value);
					});
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置，在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加（如urlschemewhitelist:["iosamap","baidumap"]）
					var url='';
					var that = this;
					plus.nativeUI.actionSheet({
						title: this.$t('user.xuanzedaoh'),
						cancel: this.$t('index.quxiao'),
						buttons: [{
							title: this.$t('user.baiduNav')
						},{
							title: this.$t('user.gaodeNav')
						},{
							title: this.$t('user.googleNav')
						},{
							title: this.$t('user.appleNav')
						}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url ='baidumap://map/marker?location='+lat+','+lon+'&title='+cityName+'&content='+cityName+'&coord_type=wgs84&src=ios.baidu.openAPIdemo';
								break;
							case 2:
								url ='iosamap://path?sourceApplication=fuxishan_uni_client&dlat='+lat+'&dlon='+lon+'&dname='+cityName+'&dev=1&t=0';
								break;
							case 3:
								url='comgooglemapsurl://?daddr='+ lat + ',' + lon;
								break;
							case 4:
								url = 'http://maps.apple.com/?q=' +cityName + '&ll=' + lat + ',' + lon + '&spn=0.008766,0.019441';
								break;
							default:
								break;
						}
						if (url!='') {
							url = encodeURI(url)
							plus.runtime.openURL(url, function(e) {
							    plus.nativeUI.alert(that.$t('user.weianzhuangapp'));
							});
						}
					})
				}
			},
		},
	}
</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;
}
.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: 30rpx;
	color: darkgray;
}

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

.stateText{
	font-size: 28rpx;
	color: darkgray;
	margin-top: 6rpx;
	padding-left: 8rpx;
	padding-right: 8rpx;
	padding-top: 2rpx;
	padding-bottom: 2rpx;
	border: 2rpx 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;
	margin-top: 6rpx;
	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: 80%;
	height: 68rpx;
	border-radius: 10rpx;
	margin-top: 40rpx;
	margin-bottom: 20rpx;
	background-color: #006AFF;
}

.shuaxinBT{
	font-weight: bold;
	font-size: 30rpx;
	color: black;
	border-radius: 8rpx;
	padding: 6rpx;
	margin-right: 30rpx;	
}
.wanchengT{
	width: 100%;
	font-weight: bold;
	font-size: 26rpx;
	color: white;
	border-radius: 8rpx;
	text-align: center;
}
.jiedanBt{
	padding: 10rpx;
	color:white;
	background-color: #00A6FF;
	border-radius: 8rpx;
	box-shadow: 0rpx 0rpx 10rpx 0rpx #00A6FF;
}

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