cte-share/pages/shanpinxungou/shangjia/zuoyouliandongA.vue

<template>
    <view class="u-wrap">
		<view class="linesp"></view>
		<view class="linesp"></view>
		<view class="linesp"></view>
        <view class="u-menu-wrap">
            <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
             :scroll-into-view="itemId">
                <view v-for="(item,index) in shangpinfenlei" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']"
                 @tap.stop="swichMenu(index)">
                    <text class="u-line-1">{{item.name}}</text>
                </view>
				<view style="height: 140rpx;"></view>
            </scroll-view>
            <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box">
                <view class="page-view">
						<view v-if="listType===2" class="item-container">
						    <view class="thumb-box2" v-for="(item1, index1) in shangpinlist" :key="index1" >
								<view class="thumb-boxR">
								<netImage class="goodimage" width="180" height="140" :mysrc="item1.image" mymode="scaleToFill"  v-on:Emyimageclick="shangpinsl(item1.id)"></netImage>
						        <view class="msText">
						        	<text class="dianpuming" @click="shangpinsl(item1.id)">{{item1.name}}</text>
						        	<!-- <view class="buyBTSB" @click="shangpinsl(item1.id)">
										<view class="buyBT" style="background-color: #FEFCED;">
											<image class="xingxing" src="/static/images/dianzan@3x.png" mode="heightFix"></image>
											<text class="peisongsuoming" style="color: #988233;">本店销量第3名</text>
										</view>
						        		<text class="peisongsuoming">{{$t('comp.yuexiao')}}300+</text>
						        	</view> -->
						        	<view class="buyBT">
										<text class="peisongsuoming detailtextV">{{item1.introduce}}</text>
										<!-- <view class="contensbgg" v-for="(skus,inx) in shangpingoumaiS[current][index1].sku">
											<text class="youhuixinxi" @click="editSKU(current,index1)">{{skus}}</text>
										</view> -->
						        	</view>
						        	<view v-if="shangpingoumaiS[current][index1]" class="buyBTSB">
						        		<text class="peisongsuoming">{{$formPr(item1.price)}}{{$t('locale.huobidw')}}</text>
						        		<view class="rconten">
											<!-- <uni-icons class="imageR" custom-prefix="custom-icon" color="#00A6FF" type="cart" size="30"   @click="editSKU(index1)"></uni-icons> -->
											
						        			<image v-if="shangpingoumaiS[current][index1].shuliang>0" class="imageRJ" src="/static/images/jian@3x.png" mode="aspectFit" @click="jiangouwuche(index1)"></image>
						        			<text v-if="shangpingoumaiS[current][index1].shuliang>0" class="textR">{{shangpingoumaiS[current][index1].shuliang}}</text>
						        			<image class="imageR" src="/static/images/plus-circle-fill@3x.png" mode="aspectFit" @click="editSKU(index1)"></image>
						        		</view>
						        	</view>
									
						        </view>
								</view>
								<view class="linesp"></view>
						    </view>
						</view>
						<view style="height: 140rpx;"></view>
                </view>
            </scroll-view>
        </view>
		<view class="bottomfloatV">
			<view class="buyBT" >
				<image class="gouwuche" :src="gouwcheimg" mode="aspectFit"></image>
				<text class="peisongsuoming">{{notext}}</text>
				<text class="qjs" :style="{backgroundColor:gwbcolor,color:gwbTcolor}" @click="gotojiesuan">{{$t('comp.qujiesuan')}}</text>
			</view>
		</view>
		
		<popViewGG  :show="showpop" :showbotom="false" :maskClosable="true" :isCancel="true" @chooseCancel="chooseCancel">
			<foodxuangou style="width:100%;max-height: 70vh" :food="spindexSP" v-on:Ejiagouwuche="jiagouwuche"></foodxuangou>
		</popViewGG>
    </view>
</template>
<script>
	import api from "@/pages/api/api.js";
	
    export default {
		props: {
			mendid:0,
			mendname:'',
			userid:0,
			isShangjia:0
		},
        data() {
            return {
				gouwcheimg:'/static/images/gouwuh@3x.png',
				notext:this.$t('comp.weixgsp'),
				goumaijine:0,
				gwbcolor:'darkgray',
				gwbTcolor:'black',
                scrollTop: 0, //tab标题的滚动条位置
                current: 0, // 当前分类值
				spindex:0,//当前分类商品操作INDEX
				spindexSP:'',//当前分类商品操作INDEX对应商品
                itemId: '', // 栏目右边scroll-view用于滚动的id
                shangpinfenlei: [],
				shangpinlist: [],
				shangpingoumaiS:[],
				goumaishangpin:[],
                scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
				listType:2,
				skuGuige:[],
				showpop:false,
				gouwuche:{
					foodlist:[],
					mendid:'',
					userid:'',
					mendname:''
				}
				
            }
        },
        created() {
			this.refleashdata();
        },
        methods: {
			refleashdata(){
				var gwc = uni.getStorageSync('gouwuche');
				if(''==gwc||null==gwc||undefined==gwc){
					this.gouwuche={
						foodlist:[],
						mendid:'',
						userid:'',
						mendname:''
					};
					this.tongjigouwuche();
				}
				else{
					this.gouwuche = JSON.parse(gwc);
					this.tongjigouwuche();
				}
				//this.shangpingoumaiS=[];
				this.getmendianshangpinFL(this.mendid);	
			},
            // 点击左边的栏目切换
            async swichMenu(index) {
                this.scrollRightTop = 0;
				this.current = index;
				this.getmendianshangpinList(this.shangpinfenlei[index].id);
            },
			// jiangouwuche(index){
			// 	var goumail=this.shangpingoumaiS[this.current][index].shuliang;
			// 	var oldgoumail = goumail;
			// 	var danjia = this.shangpingoumaiS[this.current][index].shangpin.price;
			// 	if(goumail>0){
			// 		goumail=goumail-1;
			// 	}
				
			// 	var yidongjine=(goumail-oldgoumail)*danjia;
			// 	this.goumaijine = this.goumaijine+yidongjine;
			// 	this.shangpingoumaiS[this.current][index].shuliang=goumail;
				
			// 	this.gengxingouwuche(this.shangpingoumaiS[this.current][index]);
				
			// 	console.log(this.shangpingoumaiS);
			// 	var temp=[];
			// 	for (var i=0;i<this.shangpinlist.length;i++) {
			// 		temp.push(this.shangpinlist[i]);
			// 	}
			// 	this.shangpinlist=temp;
			// },
			
			jiangouwuche(e){
				//跳转购物车
				uni.navigateTo({
					url:'/pages/OrderList/buy/gouwuche'
				})
			},
			
			jiagouwuche(e){
				
				var gwc = uni.getStorageSync('gouwuche');
				if(''==gwc||null==gwc||undefined==gwc){
					this.gouwuche={
						foodlist:[],
						mendid:'',
						userid:'',
						mendname:''
					};
				}
				else{
					this.gouwuche = JSON.parse(gwc);
				}
				this.dowithshangpinList(this.shangpinlist);
				
				this.tongjigouwuche();
				var temp=[];
				for (var i=0;i<this.shangpinlist.length;i++) {
					temp.push(this.shangpinlist[i]);
				}
				this.shangpinlist=temp;
				
				this.showpop=false;
				
			},
			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';
					this.showbt=true;
				}
				if(this.goumaijine==0){
					this.gwbcolor='darkgray';
					this.gwbTcolor='black';
					this.notext=this.$t('comp.weixgsp');
					this.gouwcheimg='/static/images/gouwuh@3x.png';
					this.showbt=false;
				}
			},
			shangpinsl(id){
				//选择商品
				uni.navigateTo({
					url:'/pages/shanpinxungou/shangpin/shangpinxiangqing?id='+id+'&isShangjia='+this.isShangjia
				})
			},
			tongjigouwuche(){
				this.goumaijine = 0;
				if(this.gouwuche.mendid==this.mendid){
					for(var j=0;j<this.gouwuche.foodlist.length;j++){
						var sp = this.gouwuche.foodlist[j];
						this.goumaijine = this.goumaijine+sp.number*(sp.price+sp.otherPrice);
					}
				}
				this.jinger();
			},
			gotojiesuan(){
				if(!this.showbt){
					uni.showToast({
					    title: this.$t('comp.qingxzsp'),
					    icon: 'none',
					    duration: 2500
					})
					return;
				}
				var token = uni.getStorageSync("token");
				//console.log('2222',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.mendid+'&userid='+this.userid
				})
			},
			
			editSKU(index){
				this.spindex=index;
				var sp = this.shangpingoumaiS[this.current][index];
				//this.skuGuige=sp.shangpin.sku;
				this.spindexSP = sp;
				this.showpop=true;
				console.log('<<<<<<',this.shangpinlist[index]);
				//this.$refs.popup.open();
			},
			
			chooseCancel(){
				this.showpop=false;
			},
			
			
			getmendianshangpinFL(id){
				api('getmendianshangpinFL',{
					id:id
				},res=>{
					this.shangpinfenlei=res.data.data;
					if(this.shangpinfenlei.length>0){
						this.getmendianshangpinList(this.shangpinfenlei[0].id);
					}
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			
			getmendianshangpinList(id){
				api('getmendianshangpinList',{
					id:id
				},r=>{
					this.dowithshangpinList(r.data.data);
					this.shangpinlist=r.data.data;
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			dowithshangpinList(shangpinlist){
				if(this.shangpingoumaiS.length==0){
					for(var i=0;i<this.shangpinfenlei.length;i++){
						this.shangpingoumaiS.push([]);
					}
				}
				
				this.shangpingoumaiS[this.current]=[];
				for(var j=0;j<shangpinlist.length;j++){
					var shuliang = this.tongbugouwuchexinxi(shangpinlist[j]);
					var otherPrice = this.getotherPrice(shangpinlist[j].foodSku);
					var tempSKU = this.gettempSKU(shangpinlist[j].foodSku);
					var tempsp={
						"shangpin":shangpinlist[j],
						"sku":tempSKU,
						"otherPrice":otherPrice,
						"shuliang":shuliang
					}
					this.shangpingoumaiS[this.current].push(tempsp);
				}
			},
			tongbugouwuchexinxi(sp){
				var tempshuliang = 0;
				for(var i=0;i<this.gouwuche.foodlist.length;i++){
					if(this.gouwuche.foodlist[i].id == sp.id){
						tempshuliang = tempshuliang + this.gouwuche.foodlist[i].number;
					}
				}
				return tempshuliang;
			},
			gettempSKU(foodSku){
				var selectsku=[];
				for(var i=0;i<foodSku.length;i++){
					if(foodSku[i].objects.length>0){
						for(var j=0;j<foodSku[i].objects.length;j++){
							if(foodSku[i].objects[j].state==1){
								selectsku.push(foodSku[i].objects[j].name);
							}
						}
					}
				}
				return selectsku;
			},
			getotherPrice(foodSku){
				var jiner=0;
				for(var i=0;i<foodSku.length;i++){
					if(foodSku[i].objects.length>0){
						for(var j=0;j<foodSku[i].objects.length;j++){
							if(foodSku[i].objects[j].state==1){
								jiner=jiner+parseFloat(foodSku[i].objects[j].price);
							}
						}
					}
				}
				return parseFloat(jiner);
			}
        }
    }
</script>
 
<style scoped>
    .u-wrap {
        height: calc(60vh);
        display: flex;
        flex-direction: column;
    }
 .linesp{
 	height: 4rpx;
 	background-color:#f6f6f6;
 }

    .u-menu-wrap {
        flex: 1;
        display: flex;
        overflow: hidden;
    } 
    .u-tab-view {
        width: 100vw;
        height: 100vh;
    }
 
    .u-tab-item {
        height: 110rpx;
        background: #f6f6f6;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #444;
        font-weight: 400;
        line-height: 1;
    }
 
    .u-tab-item-active {
        position: relative;
        color: #000;
        font-size: 30rpx;
        font-weight: 600;
        background: #fff;
    }
 
    .u-tab-item-active::before {
        content: "";
        position: absolute;
        border-left: 4px solid $u-type-primary;
        height: 32rpx;
        left: 0;
        top: 39rpx;
    }
 
    .u-tab-view {
        height: 100%;
    }
 
    .right-box {
    }
 
    .page-view {
        padding: 16rpx;
		padding-left: 0rpx;
	}
 
    .class-item {
        margin-bottom: 30rpx;
        background-color: #fff;
        padding: 16rpx;
        border-radius: 8rpx;
		padding-left: 0rpx;
    }
 
    .class-item:last-child {
        min-height: 100vh;
    }
 
    .item-title {
        font-size: 26rpx;
        color: $u-main-color;
        font-weight: bold;
    }
 
    .item-menu-name {
        font-weight: normal;
        font-size: 24rpx;
        color: $u-main-color;
    }
 
    .item-container {
        display: flex;
        flex-wrap: wrap;
		width: 67vw;
    }
 
    .thumb-box {
        width: 33vw;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 20rpx;
		
    }
    .item-menu-image {
        width: 120rpx;
        height: 120rpx;
    }
	.thumb-box2 {
	    width: 67vw;
	    display: flex;
	    justify-content: flex-start;
	    margin-top: 10rpx;
		background-color: #f6f6f6;
	}
	.thumb-boxR {
	    width: 67vw;
	    display: flex;
	    align-items: center;
	    justify-content: flex-start;
	    flex-direction: row;
	    margin-bottom:20rpx;
		background-color: white;
	}
	.goodimage{
		padding-top: 4rpx;
	}
	.msText{
		width: 500rpx;
		padding-left: 10rpx;
		font-size: 22rpx;
		line-height: 32rpx;
	}
	.dianpuming{
		font-size: 30rpx;
		line-height: 32rpx;
		height: 32rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.peisongsuoming{
		font-size: 26rpx;
		line-height: 38rpx;
		height: 38rpx;
		color: dimgray;
	}
	.detailtextV{
		width: 90%;
		height: 80rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.buyBTSB{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
	}
	
	.buyBT{
		display: flex;
		flex-direction: row;
		justify-content:flex-start;
		align-items: center;
		
	}
	
	.contensbgg{
		display: flex;
		flex-wrap: wrap;
		justify-content:flex-start;
		align-items:center;
	}
	
	.youhuixinxi{
		margin-right: 10rpx;
		font-size: 26rpx;
		padding: 6rpx;
		color: lightcoral;
		border: 2rpx solid lightcoral;
		border-radius: 8rpx;
	}
	.xingxing{
		width: 34rpx;
		height: 34rpx;
	}
	.rconten{
		margin-left: auto;
		display:flex;
		flex-direction: row;
		align-items: center;
	}
	.imageRJ{
		width: 56rpx;
		height: 56rpx;
		margin-right: 8rpx;
	}
	.imageR{
		width: 50rpx;
		height: 50rpx;
		margin-right: 30rpx;
	}
	.textR{
		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;
	}
	.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;
	}
	.querenBt{
		margin-top: 30rpx;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		padding: 10rpx;
		border-radius: 20rpx;
		border: solid crimson;
		border-width: 0px 0px 6rpx 0px;
		text-align: center;
		justify-content: center;
		background-color: #00A6FF;
		color: white;
		box-shadow: -4rpx 4rpx 2rpx 5rpx lightgrey;
	}
</style>