meishidaQS/components/orderItemA/orderItemA.vue

<template>
	<view style="background-color: whitesmoke;">
		<view v-if="orderList!=''">
			<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')}}: {{shphj(item)}}</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 style="width: 100rpx" class="contentColumn">
						<text class="quhuodian">{{$t('order.quhuodian')}}</text>
					</view>
					<view style="margin-left: 20rpx;width: 100%;" class="contentColumn">
						<view v-if="item.store" class="" @click="gotoNav(item.store)">
							<view class="contentColumn">
								<text class="titleText">{{item.store.posName}}</text>
								<!-- <text class="distenText">({{$t('order.juli')}}{{item.qsjvli}})</text> -->
							</view>
							<view style="width: 94%;">
								<text class="addrText">{{item.store.address}}</text>
							</view>
							<view>
								<text v-if="item.diningStatus==1" class="stateText">{{$t('order.shangjiayqrcc')}}</text>
							</view>
						</view>
						<view v-for="(itemf,index) in item.food"  style="width: 100%;">
							<view class="contentInRowL" style="margin-top: 12rpx;width: 90%;">
								<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 v-if="item.collectPayment==1" class="contentColumnC psfnote" style="background-color: darkgreen;">
					<text class="addrText" style="color:white;padding: 6rpx;">{{$t('order.qiszhifts')}}</text>
				</view>
				<view class="contentInRowS" style="margin-top: 10rpx;">
					<view class="contentColumnC" style="margin:20rpx;padding-left: 10rpx;" @click="callPhone(item.store.telephone,item.store)">
						<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.store)">
						<uni-icons custom-prefix="custom-icon" color="#006AFF" type="navigate-filled" size="28"></uni-icons>
						<label class="jiedanText">Navigation</label>
					</view>
					<view class="contentColumnC" style="margin:20rpx;padding-left: 10rpx;" @click="qucanshibai(item)">
						<uni-icons custom-prefix="custom-icon" color="crimson" type="closeempty" size="28"></uni-icons>
						<label class="jiedanText">{{$t('order.qucanshib')}}</label>
					</view>
					<view class="contentColumnC" style="margin:20rpx;padding-left: 10rpx;" @click="quchan(item)">
						<uni-icons custom-prefix="custom-icon" color="#006AFF" type="checkmarkempty" size="28"></uni-icons>
						<label class="jiedanText">{{$t('order.wanchengquhuo')}}</label>
					</view>
				</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="querenqucan">{{$t('order.wanchengquhuo')}}</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		UploadImage,
		setorderuzt
	} from '@/pages/api/basic';
	export default {
		name:"orderItem",
		props:{
			orderList:'',
			qsId:''
		},
		data() {
			return {
				isAndroid:true,
				annexList:[],
				actId:''
			};
		},
		mounted() {
			let systemInfo = uni.getSystemInfoSync();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
		},
		methods:{
			shphj(obj){
				console.log(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('api.huobidanwei');
				
			},
			
			qucanshibai(obj){
				var that = this;
				uni.showModal({
				    title: that.$t('api.message'),
				    content:that.$t('order.qrqucanshib'),
					confirmText:that.$t('index.queren'),
					cancelText:that.$t('index.quxiao'),
				    success: function (res) {
				        if (res.confirm) { //这里是点击了确定以后
							that.setorderuzt(obj.id,9)
				        } else { //这里是点击了取消以后
				          console.log('点击取消')
				        }
				    }
				})
			},
			
			quchan(obj){
				console.log('quchan');
				this.actId=obj.id;
				if(obj.sqImg){
					this.annexList=JSON.parse(obj.sqImg);
				}
				else{
					this.annexList=[];
				}
				this.$refs.popqc.open('center');
			},
			querenqucan(){
				
				//还要同步上传图片
				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.actId,
					state:4,
					//qsId:this.qsId,
					diningStatus:1,
					qsImg:JSON.stringify(this.annexList)
				}
				console.log(data)
				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('点击取消')
				        }
				    }
				})
			},
			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){
				var navData={
					latitude:store.latitude,
					longitude:store.longitude,
					address:store.posName
				}
				var temp = JSON.stringify(navData);
				uni.navigateTo({
					url:'/pages/map/mapboxView?navdata='+temp
				})
				
			},
		},
	}
</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;
	text-align: right;
}

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

.distenText{
	font-size: 26rpx;
	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;
	padding: 8rpx;
	border: 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-left: 10%;
	margin-top: 40rpx;
	margin-bottom: 20rpx;
	background-color: #006AFF;
}

.wanchengT{
	font-weight: bold;
	font-size: 30rpx;
	color: black;
	border-radius: 8rpx;
	padding: 6rpx;
	margin-right: 30rpx;	
}
.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>