meishidaQS/components/orderItemB/orderItemB.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%;">
				<view class="wanchengT" style="background-color: crimson;" @click="chakantp(item)">{{$t('order.chakantp')}}</view>
				<view class="wanchengT" style="background-color: #006AFF;"  @click="wancheng(item)">{{$t('order.songda')}}</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="popqc" type="center" :isMaskClick="true" :safeArea="true">
			<view class="contentColumn" style="width:600rpx;background-color: whitesmoke;border-radius: 10rpx;">
				<view class="item_list">
					<view class="item_content" v-for="(itemi,indexi) in annexList" @click="imagesel(indexi)">
						<netImage v-if="itemi!=''" width="180" height="180" bradius="4" :mysrc="itemi" mymode="scaleToFill" ></netImage>
					</view>
					<view class="item_content" @click="updataImage">
						<image class="upimagV" src="/static/imags/shangctp.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="contentInRowC">
					<text class="actbttext" style="background-color:rosybrown;" @click="quxiaoqc">{{$t('index.quxiao')}}</text>
					<text class="actbttext" style="background-color:#006Aff;" @click="querensongda">{{$t('order.songda')}}</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		UploadImage,
		setorderuzt,
		setLocat
	} from '@/pages/api/basic';
	export default {
		name:"orderItem",
		props:{
			orderList:'',
			qsId:'',
			
		},
		data() {
			return {
				isAndroid:true,
				annexList:[],
				actobj:''
			};
		},
		mounted() {
			let systemInfo = uni.getSystemInfoSync();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			console.log('mounted------------------')
		},
		methods:{
			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
				})
			},
			// candianyw(obj){
			// 	var that = this;
			// 	uni.showModal({
			// 		title: that.$t('api.message'),
			// 		content:that.$t('order.qrcandianyw'),
			// 		confirmText:that.$t('index.queren'),
			// 		cancelText:that.$t('index.quxiao'),
			// 	    success: function (res) {
			// 			if (res.confirm) { //这里是点击了确定以后
			// 				that.setorderuzt(obj.id,6);
			// 			} else { //这里是点击了取消以后
			// 			  console.log('用户点击取消')
			// 			}
			// 	    }
			// 	})
			// },
			chakantp(obj){
				// this.setorderuzt(obj.id,0)
				// return;
				var data={
					id:'',
					img:'[]'
				}
				if(obj.sqImg){
					data.img=obj.sqImg;
				}
				uni.navigateTo({
					url:'/pages/index/GoodsImages?obj='+JSON.stringify(data)
				})
			},
			wancheng(obj){
				this.actobj=obj;
				if(obj.sqImg){
					this.annexList=JSON.parse(obj.sqImg);
				}
				else{
					this.annexList=[];
				}
				if(this.actobj.collectPayment==0){
					this.$refs.popqc.open('center');
				}
				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) { //这里是点击了确定以后
								that.$refs.popqc.open('center');
					        } else { //这里是点击了取消以后
					          console.log('点击取消')
					        }
					    }
					})
				}
			},
			
			querensongda(){
				
				//还要同步上传图片
				if(this.annexList.length==0){
					uni.showToast({
						title:this.$t('order.qingxiansctp'),
						icon: 'none',
						duration: 2500
					})
					return;
				}
				this.$refs.popqc.close();
				var data={
					id:this.actobj.id,
					state:12,
					qsImg:JSON.stringify(this.annexList)
				}
				this.$http.post(`${setorderuzt}`,data,true)
				.then(r => {
					console.log(r);
					this.$emit('ErefleshList');
				})
				.catch(err => {
					console.log(err)
				})
			},
			quxiaoqc(){
				this.$refs.popqc.close();
			},
			imagesel(index){
				
			},
			updataImage(){
				var that = this;
				uni.showModal({
				    title: that.$t('api.message'),
				    content:that.$t('order.qingxuanz'),
					confirmText:that.$t('order.qupaishe'),
					cancelText:that.$t('order.qushangc'),
				    success: function (res) {
				        if (res.confirm) { //这里是点击了确定以后
							that.getimage(2);
				        } else { //这里是点击了取消以后
				          console.log('点击取消')
						  that.getimage(1)
				        }
				    }
				})
			},
			getimage(state){
				var sourceType=[];
				if(state==1){
					sourceType=['album']
				}
				else{
					sourceType=['camera']
				}
				var that = this;
				uni.chooseImage({
					count: 1,  // 图片数量
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType:sourceType, //从相册选择或者拍照
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: that.$baseurl+UploadImage, //上传图片api
							filePath: tempFilePaths[0],
							name: 'file',
							header:{
								//"Authorization": userinfo.token
							},
							success: (res) => {
								let group =  JSON.parse(res.data);
								var l = that.annexList.length;
								var temp = that.annexList;
								temp.push(group.data);
								that.annexList=temp;
							}
						});
					}
				});
			},
			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'
				})
			},
			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:'',
						// diningStatus:0
						qsId:this.qsId,
						diningStatus:1
					}
				}
				this.$http.post(`${setorderuzt}`,data,true)
				.then(r => {
					console.log('setorderuzt',r);
					this.$emit('ErefleshList');
				})
				.catch(err => {
					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
				})
				//this.handlePosition(store.latitude,store.longitude,store.address);
			},
			
			
			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 lang="scss">
	@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;
}
.item_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	.item_content{
		width:180rpx;
		height:180rpx;
		margin: 10rpx;
		box-sizing: border-box;
	}
}
.upimagV{
	width: 180rpx;
	height:180rpx;
}
.actbttext{
	width: 50%;
	line-height: 66rpx;
	font-size: 28rpx;
	color: white;
	text-align: center;
}
</style>