cte-share/pages/OrderList/buy/gouwuche.vue

<template>
	<view class="contentV">
		<customNav :shownav="true" :title="$t('gouwu.gouwuche')" titledetl=""></customNav>
		<view v-if="!kongche" class="actBTV viewpading">
			<view class="">
				<image class="touyuan" src="/static/images/tuoyuan@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/images/tuoyuan@3x.png" mode="widthFix"></image>
				<text style="margin-left: 20rpx;">{{$t('gouwu.gwckongong')}}</text>
			</view>
		</view>
		<view>
			<view v-for="(item,index) in gouwuche.foodlist">
				<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/images/jian@3x.png" mode="aspectFit" @click="jiangouwuche(index)"></image>
								<text v-if="item.number>0" class="textR">{{item.number}}</text>
								<image class="imageR" src="/static/images/plus-circle-fill@3x.png" mode="aspectFit" @click="jiagouwuche(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  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/images/gouwuh@3x.png',
				notext:this.$t('comp.weixgsp'),
				goumaijine:0,
				kongche:false
			}
		},
		onShow() {
			var gwc = uni.getStorageSync('gouwuche');
			if(''==gwc||null==gwc||undefined==gwc){
				this.kongche=true;
				return
			}
			else{
				this.gouwuche = JSON.parse(gwc);
			}
			console.log('!!!!!!!!!!!!!:',this.gouwuche);
			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/images/gouwuh@3x.png';
							that.goumaijine = 0;
						} else { //这里是点击了取消以后
						  console.log('用户点击取消')
						}
						
				    }
				})
			},
			Rdanjia(price,othprice){
				if(!othprice){
					othprice=0;
				}
				return this.$formPr((parseFloat(price)+parseFloat(othprice)));
			},
			jiangouwuche(index){
				var goumail=this.gouwuche.foodlist[index].number;
				var oldgoumail = goumail;
				var danjia = this.gouwuche.foodlist[index].price+this.gouwuche.foodlist[index].otherPrice;
				if(goumail>0){
					goumail=goumail-1;
				}
				
				var yidongjine=(goumail-oldgoumail)*danjia;
				this.goumaijine = this.goumaijine+yidongjine;
				this.gouwuche.foodlist[index].number=goumail;
				
				console.log(this.gouwuche);
				
				if(goumail==0){
					this.gouwuche.foodlist.splice(index,1);
				}				
				var temp=[];
				for (var i=0;i<this.gouwuche.foodlist.length;i++) {
					temp.push(this.gouwuche.foodlist[i]);
				}
				this.gouwuche.foodlist=temp;
				this.jinger();
			},
			jiagouwuche(index){
				var goumail=this.gouwuche.foodlist[index].number;
				var oldgoumail = goumail;
				var danjia = this.gouwuche.foodlist[index].price+this.gouwuche.foodlist[index].otherPrice;
				goumail=goumail+1;
				var yidongjine=(goumail-oldgoumail)*danjia;
				this.goumaijine = this.goumaijine+yidongjine;
				this.gouwuche.foodlist[index].number=goumail;
				console.log(this.goumaijine);
				var temp=[];
				for (var i=0;i<this.gouwuche.foodlist.length;i++) {
					temp.push(this.gouwuche.foodlist[i]);
				}
				this.gouwuche.foodlist=temp;
				this.jinger();
			},
			jinger(){
				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/images/gouwu@3x.png';
				}
				if(this.goumaijine==0){
					this.gwbcolor='darkgray';
					this.gwbTcolor='black';
					this.notext=this.$t('comp.weixgsp');
					this.gouwcheimg='/static/images/gouwuh@3x.png';
				}
				let gwc = JSON.stringify(this.gouwuche);
				uni.setStorageSync('gouwuche',gwc);
			},
			tongjigouwuche(){
				this.goumaijine = 0;
				for (var i=0;i<this.gouwuche.foodlist.length;i++) {
					var item =  this.gouwuche.foodlist[i];
					var yidongjine=item.number*(parseFloat(item.price)+parseFloat(item.otherPrice));
					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/images/gouwu@3x.png';
				}
				if(this.goumaijine==0){
					this.gwbcolor='darkgray';
					this.gwbTcolor='black';
					this.notext=this.$t('comp.weixgsp');
					this.gouwcheimg='/static/images/gouwuh@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.setStorageSync('JSfoodlist',this.gouwuche.foodlist);
				uni.navigateTo({
					url:'/pages/OrderList/buy/jiesuanYe?mendid='+this.gouwuche.mendid+'&userid='+this.gouwuche.userid
				})
			},
		}
	}
</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: 140rpx;
	}
	.buyBT{
		display:flex;
		flex-direction: row;
		justify-content:flex-start;
		align-items: center;
		width:100%;
	}
	.peisongsuoming{
		font-size: 26rpx;
		line-height: 38rpx;
		height: 38rpx;
		color: dimgray;
	}
	.gouwuche{
		width: 120rpx;
		height: 120rpx;
	}
	.qjs{
		border-radius: 8rpx;
		padding: 6rpx;
		margin-left: auto;
		margin-right: 30rpx;
		font-size: 32rpx;
		height: 100rpx;
		line-height: 100rpx;
	}
</style>