meishidaYH/msdYongHu/pages/OrderList/buy/gouwuche.vue

<template>
	<view class="contentV">
		<customNav :shownav="false" :title="$t('gouwu.gouwuche')" titledetl=""></customNav>
		<view v-if="!kongche" class="actBTV viewpading">
			<view >
				<image class="touyuan" src="/static/meishi/BuyS@3x.png" mode="widthFix"></image>
				<text style="margin-left: 20rpx;">{{gouwuche.mendname}}</text>
			</view>
			<image class="touyuan" src="/static/images/sanchu@3x.png" mode="widthFix" @click="qingkonggouwuc"></image>
		</view>
		<view v-if="kongche" class="actBTV" style="height: 80rpx;padding-top:40rpx;background-color: whitesmoke">
			<view class="">
				<image class="touyuan" src="/static/meishi/BuyS@3x.png" mode="widthFix"></image>
				<text style="margin-left: 20rpx;">{{$t('gouwu.gwckongong')}}</text>
			</view>
		</view>
		<view>
			<view v-for="(items,indexs) in gouwuche">
				<view class="contentInRowL" style="align-items: center;">
					<netImage style="margin-left: 12rpx;margin-top: 10rpx;" width="60" height="60" bradius="30" :mysrc="items.logo" mymode="scaleToFill"></netImage>
					<text style="padding-left: 10rpx;">{{items.posName}}</text>
				</view>
				<view v-for="(item,index) in items.food">
					<view class="spnodetail">
						<view class="">
							<myImage class="spIcon" :mysrc="item.image" mymode="scaleToFill"></myImage>
						</view>
						<view style="width: 100%;">
							<view class="actBTV">
								<view style="font-size: 30rpx;">{{item.name}}</view>
							</view>
							<view class="keywordLct" >
								<view class="kouweisku" v-for="sku in item.ask">{{sku}}</view>
							</view>
							<view class="contentInRowS" style="margin-bottom: 8rpx;">
								<view style="font-size: 26rpx;color: blueviolet;margin-right: 10rpx;">{{$t('shangpin.shoujia')}}: {{Rdanjia(item.price,item.otherPrice)}}{{$t('locale.huobidw')}}</view>
								<view class="viewinrow" >
									<image v-if="item.number>0" class="imageRJ" src="/static/meishi/jianh.png" mode="aspectFit" @click="jiangouwuche(indexs,index)"></image>
									<text v-if="item.number>0" class="textR">{{item.number}}</text>
									<image class="imageR" src="/static/meishi/jiah.png" mode="aspectFit" @click="jiagouwuche(indexs,index)"></image>
								</view>
							</view>
							<view v-if="item.beizhu" class="">
								<text style="font-size: 30rpx;color:#00A6FF;">{{item.beizhu}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view  class="bottomfloatV">
			<view class="buyBT" >
				<image class="gouwuche" :src="gouwcheimg" mode="aspectFit"></image>
				<label class="peisongsuoming">{{notext}}</label>
				<label class="qjs" :style="{backgroundColor:gwbcolor,color:gwbTcolor}" @click="qujiesuan">{{$t('comp.qujiesuan')}}</label>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gouwuche:[],
				gwbcolor:'darkgray',
				gwbTcolor:'black',
				gouwcheimg:'/static/meishi/BuyS@3x.png',
				notext:this.$t('comp.weixgsp'),
				goumaijine:0,
				kongche:false
			}
		},
		onShow() {
			this.kongche=false;
			var gwc = uni.getStorageSync('gouwuche');
			if(''==gwc||null==gwc||undefined==gwc){
				this.kongche=true;
				this.gouwuche=[];
				console.log('!!!!!!!!!!!!!:',this.gouwuche);
			}
			else{
				this.gouwuche = JSON.parse(gwc);
			}
			
			this.tongjigouwuche();
		},
		methods: {
			qingkonggouwuc(){
				var that = this;
				uni.showModal({
				    title: that.$t('api.message'),
				    content: that.$t('gouwu.shifouqkgwc'),
					cancelText:that.$t('order.quxiao'),
					confirmText:that.$t('comp.queren'),
				    success: function (res) {
						if (res.confirm) { //这里是点击了确定以后
							uni.setStorageSync('gouwuche','');
							that.kongche=true;
							that.gouwuche=[];
							that.gwbcolor='darkgray';
							that.gwbTcolor='black';
							that.notext=that.$t('comp.weixgsp');
							that.gouwcheimg='/static/meishi/BuyS@3x.png';
							that.goumaijine = 0;
						} else { //这里是点击了取消以后
						  console.log('用户点击取消')
						}
						
				    }
				})
			},
			Rdanjia(price,othprice){
				if(!othprice){
					othprice=0;
				}
				return this.$formPr((parseFloat(price)+parseFloat(othprice)));
			},
			jiangouwuche(indexs,index){
				var goumail=this.gouwuche[indexs].food[index].number;
				goumail=goumail-1;
				
				if(goumail==0){
					this.gouwuche[indexs].food.splice(index,1);
					if(this.gouwuche[indexs].food.length==0){
						this.gouwuche.splice(indexs,1);
						let gwc = JSON.stringify(this.gouwuche);
						uni.setStorageSync('gouwuche',gwc);
						this.tongjigouwuche();
						return;
					}
				}
				else{
					this.gouwuche[indexs].food[index].number=goumail;
				}
				console.log(goumail);
				var goumaijine = 0;
				for (var j=0;j<this.gouwuche[indexs].food.length;j++) {
					var food =  this.gouwuche[indexs].food[j];
					var yidongjine=food.number*(parseFloat(food.price)+parseFloat(food.otherPrice));
					goumaijine = goumaijine+yidongjine;
				}
				this.gouwuche[indexs].amount=goumaijine;
				
				let gwc = JSON.stringify(this.gouwuche);
				uni.setStorageSync('gouwuche',gwc);
				this.tongjigouwuche();
			},
			jiagouwuche(indexs,index){
				var goumail=this.gouwuche[indexs].food[index].number;
				goumail=goumail+1;
				this.gouwuche[indexs].food[index].number=goumail;
				console.log(goumail);
				var goumaijine = 0;
				for (var j=0;j<this.gouwuche[indexs].food.length;j++) {
					var food =  this.gouwuche[indexs].food[j];
					var yidongjine=food.number*(parseFloat(food.price)+parseFloat(food.otherPrice));
					goumaijine = goumaijine+yidongjine;
				}
				this.gouwuche[indexs].amount=goumaijine;
				let gwc = JSON.stringify(this.gouwuche);
				uni.setStorageSync('gouwuche',gwc);
				this.tongjigouwuche();
			},
			
			tongjigouwuche(){
				this.goumaijine = 0;
				
				for(var i=0;i<this.gouwuche.length;i++){
					var item = this.gouwuche[i];
					var yidongjine=item.amount;
					this.goumaijine = this.goumaijine+yidongjine;
				}
				if(this.goumaijine>0){
					this.notext= this.$formPr(this.goumaijine)+this.$t('locale.huobidw');
					console.log(this.notext);
					this.gwbcolor='green';
					this.gwbTcolor='white';
					this.gouwcheimg='/static/meishi/BuyS@3x.png';
				}
				if(this.goumaijine==0){
					this.gwbcolor='darkgray';
					this.gwbTcolor='black';
					this.notext=this.$t('comp.weixgsp');
					this.gouwcheimg='/static/meishi/BuyS@3x.png';
				}
			},
			qujiesuan(){
				var that = this;
				if(this.goumaijine==0){
					uni.showToast({
					    title: that.$t('comp.qingxzsp'),
					    icon: 'none',
					    duration: 2500
					})
					return;
				}
				var token = uni.getStorageSync("token");
				if(token == '' || token == undefined || token == null){
					uni.navigateTo({
						url:'/pages/UserCenter/LoginView'
					})
					return;
				}
				uni.navigateTo({
					url:'/pages/OrderList/buy/dingdanjiesuan'
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: #F2F3F7;
	}
	.contentV{
		width:94%;
		margin-left: 3%;
		background-color: white;
	}
	.viewinrow{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.touyuan{
		width: 40rpx;
	}
	
	.viewpading{
		padding: 3%;
		width:94%;
	}
	
	.actBTV{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
	}
	.spnodetail{
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: white;
		border-bottom: 2rpx solid lightgray;
	}
	.spIcon{
		margin: 20rpx;
		width: 90rpx;
		height: 90rpx;
	}
	.xiaoji{
		margin-left: auto;
		margin-right: 30rpx;
	}
	.keywordLct{
		display: flex;
		flex-wrap: wrap;
		justify-content:flex-start;
		align-items:center;
	}
	.kouweisku{
		padding:0rpx 4rpx 0rpx 4rpx;
		margin-right: 6rpx;
		margin-top: 6rpx;
		margin-bottom: 4rpx;
		font-size: 26rpx;
		text-align: center;
		box-sizing: border-box;
		border: 2rpx solid lightgray;
		border-radius: 30rpx;
		color: orangered;
	}
	
	.imageRJ{
		width: 40rpx;
		height: 40rpx;
		margin-right: 8rpx;
	}
	.imageR{
		width: 40rpx;
		height: 40rpx;
		margin-right: 30rpx;
	}
	.textR{
		font-size: 26rpx;
		margin-left: 6rpx;
		margin-right: 6rpx;
	}
	

	.bottomfloatV{
		position: fixed;
		flex-direction: row;
		align-items: center;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background-color: whitesmoke;
		height: 120rpx;
	}
	.buyBT{
		display:flex;
		flex-direction: row;
		justify-content:flex-start;
		align-items: center;
		margin-top: 20rpx;
		width:100%;
	}
	.peisongsuoming{
		font-size: 26rpx;
		line-height: 38rpx;
		height: 38rpx;
		color: dimgray;
	}
	.gouwuche{
		margin-left: 20rpx;
		width: 80rpx;
		height: 80rpx;
	}
	.qjs{
		border-radius: 30rpx;
		padding-left: 26rpx;
		padding-right: 26rpx;
		margin-left: auto;
		margin-right: 30rpx;
		font-size: 32rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
</style>