maishidaSJ/pages/shanpinxungou/shangjia/merchantdetail.vue

<template>
	<view style="background-color: whitesmoke;">
		<customNav :shownav="true" :title="posName" titledetl=""></customNav>
		<view style="width: 100%;height: 80rpx;background-color:  #40AE36;"></view>
		<view class="nodetail">
			<view class="contentInRowS" style="width: 100%;" @click="gengduozx">
				<netImage style="margin-left: 12rpx;margin-top: -20rpx;" width="140" height="140" bradius="70" :mysrc="mendianMs.logo" mymode="scaleToFill"></netImage>
				<view class="contentColumn" style="width: 500rpx;margin-right: 20rpx;margin-top: 4rpx;">
					<view class="contentColumn">
						<text class="dianpuming">{{mendianMs.posName}}</text>
						<text class="peisongsuoming">{{$t('index.manX')}} {{$formPr(mendianMs.posPrice)}} {{$t('locale.huobidw')}}</text>
						<text v-if="mendianMs.state==1" style="margin-top: 10rpx;color: darkgreen;font-size: 28rpx;padding-right: 40rpx;">{{$t('mend.statedy')}}</text>
					</view>
				</view>
			</view>
			<view class="contentInRowL" style="margin-left: 40rpx;margin-top: 10rpx;margin-right: 40rpx;">
				<view class="contentColumnC" style="width: 24%;">
					<image class="actimge" :src="shouchangIcon" mode="aspectFit"></image>
					<text class="textfontS3">{{$t('index.shouchang')}}</text>
				</view>
				<view class="contentColumnC" style="width: 24%;">
					<image class="actimge" src="/static/images/daipinglun@3x.png" mode="aspectFit" @click="pinglunList"></image>
					<text class="textfontS3">{{$t('index.pinglun')}}</text>
				</view>
				
				<view class="contentColumnC" style="width: 24%;">
					<image class="actimge" src="/static/images/kefufuwu.png" mode="aspectFit" @click="callPhone"></image>
					<text class="textfontS3">{{$t('mend.kefudianhua')}}</text>
				</view>
			</view>
			<view style="height: 20rpx;"></view>
		</view>
		<view v-if="cuxiaoImge.length==0">
			<netImage style="margin-top:20rpx;margin-left: 25rpx;" width="700" height="400" bradius="6" :mysrc="mendianMs.image" mymode="scaleToFill"></netImage>
		</view>
		
		<view v-if="cuxiaoImge.length>0"><!-- 促销活动 -->
			<swiperImgs style="margin-top: 20rpx;" width="750" height="400" :imageList="cuxiaoImge"></swiperImgs>
		</view>
		<view style="margin-top: 40rpx;" >
			<view class="menuBox" :style="{height: statickH+'rpx'}">
				<view class="menuContent" :style="{height: statickH-120+'rpx'}">
					<scroll-view scroll-y="true" class="menuLeft">
						<view class="menuType" @click="changeCurrent(index)" v-for="(item,index) in prdList"
							:class="{currentMenu:currentIndex==index}">
							<text class="text2row">{{item.name}}</text>
						</view>
						<view class="line" :style="{top:currentIndex*100 +'rpx'}"></view>
						<view style="height: 120rpx;"></view>
					</scroll-view>
			 
					<scroll-view :scroll-top="scrollTop" @scroll="scrollRight" class="menuRight" scroll-y="true">
						<div class="menuDetailBox" v-for="(item,index) in prdList" :key="index">
							<div class="title">{{item.name}}</div>
							<div class="menu" v-for="(menu,index) in item.children" :key="index">
								<div class="d2" @click="shangpinsl(menu.shangpin)">
									<netImage style="margin-top: 10rpx;" width="180" height="180" :mysrc="menu.shangpin.image" mymode="scaleToFill"></netImage>
								</div>
								<div class="menuName" >
									<view class="contentColumnS" style="height: 200rpx;">
										<view class="contentColumn" style="width: 100%;" @click="shangpinsl(menu.shangpin)">
											<text class="pdName text2row">{{menu.shangpin.name}}</text>
											<text class="pdDetail text2row">{{menu.shangpin.introduce}}</text>
										</view>
										<view class="contentColumn" style="width: 100%;">
											<!-- <view class="contentInRowL">
												<text class="redktext">特价</text>
												<text class="greedKtext" style="margin-left: 10rpx;">24H发货</text>
											</view> -->
											<view class="contentInRowS">
												<view class="">
													<text class="pricetext">{{menu.shangpin.price}}</text>
													<text class="pricedw">{{$t("locale.huobidw")}}</text>
													<text class="yuanjia">{{menu.shangpin.price}}{{$t("locale.huobidw")}}</text>
												</view>
												
											</view>
										</view>
									</view>
									
								</div>
							</div>
						</div>
						<view style="height: 120rpx;"></view>
					</scroll-view>
					
				</view>
			</view>
			
		</view>
		<view class="bottomfloatV">
			<view class="buyBT">
				<text class="qjsact" style="background-color:darkmagenta" @click="addfenlei">{{$t('comp.guanlifenl')}}</text>
				<text class="qjsact" style="background-color:darkgreen" @click="addshangpin">{{$t('comp.xinzengsp')}}</text>
				<text class="qjsact" style="background-color:darkred" @click="bianjimendian">{{$t('comp.bianjidp')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/pages/api/api.js";
	export default {
		data() {
			return {
				//------------------------------
				newData:[],  // 拿到右侧所有的商品列表元素
				scrollTop: 0,
				currentIndex: 0,
				prdList:[],
				//-----========
				cuxiaoImge:[],
				id:1,
				userid:0,
				mendianMs:[],
				posName:'',
				isfirstShow:0,
				isShouchang:0,
				shouchangIcon:'/static/images/faver@3x.png',
				option: {},
				login:false,
				showpop:false,
				shangpinfenlei:[],
				startX:0,
				startY:0,
				lang:'3',
				statickH:0,
			}
		},
		onShow() {
			this.getmendianDetail(this.id);
			
			var that =this;
			try {//读取
				that.token = uni.getStorageSync("token");
				//console.log('2222',that.token)
				if(that.token == '' || that.token == undefined || that.token == null){
					that.login=false;
					return;
				}
				else{
					that.login=true;
					return;
				}
			} catch(e){//错误
				return;
			}
		},
		onLoad(option) {
			var language = uni.getStorageSync('language');
			if(language=='yuenan'){
				this.lang='0';
			}
			if(language=='zh-Hans'){
				this.lang='2';
			}
			if(language=='zh-Hant'){
				this.lang='3';
			}
			this.id=option.id;

			uni.pageScrollTo({
				scrollTop:0,
				duration:0
			})
			
			var info = uni.getSystemInfoSync();
			var isAndroid = info.platform.toLowerCase() === 'android';
			console.log(info);
			if(isAndroid){
				this.statickH=info.screenHeight*2-140-60;
			}
			else{
				this.statickH=info.screenHeight*2-180-60;
			}
		},
		
		
		methods: {
			
			//----------------------------------
			changeCurrent(index) {
				this.currentIndex = index
				this.scrollTop = this.newData[index-1]?.offsetHeight || 0
			},
			scrollRight(e) {
				// console.log(e.detail.scrollTop,'scrollRight');
				const query = uni.createSelectorQuery().in(this);
				for (let i = 0; i < this.newData.length; i++) {
					let el = this.newData[i]
					if (e.detail.scrollTop < el.offsetHeight) {
						this.currentIndex = i
						return true
					}
				}
			},
			
			getmendianshangpinFL(id){
				api('getmendianshangpinFL',{
					id:id,
					language:this.lang
				},res=>{
					
					this.shangpinfenlei=res.data.data;
					console.log(this.shangpinfenlei)
					this.initFenlei();
				},failc=>{
					uni.hideLoading();
					//console.log('getadvertis----',failc)
				})
			},
			initFenlei(){
				this.prdList=[];
				if(this.shangpinfenlei&&this.shangpinfenlei.length>0){
					for (var i = 0; i < this.shangpinfenlei.length; i++) {
						var el = this.shangpinfenlei[i];
						var temp = {
							"id": el.id,
							"index": i+1,
							"name": el.name,
							"children": [
							]
						}
						this.prdList.push(temp);
					}
				}
				this.initproduct();
			},
			initproduct(){
				if(this.prdList.length==0){
					uni.hideLoading();
					return;
				}
				this.getmendianshangpinList(0);
				
			},
			getmendianshangpinList(index){
				
				var obj = this.prdList[index];
				
				api('getmendianshangpinList',{
					id:obj.id,
					language:this.lang
				},r=>{
					console.log(r);
					this.prdList[index].children= this.dowithshangpinList(r.data.data);
					if(index+1<this.prdList.length){
						this.getmendianshangpinList(index+1);
					}
					else{
						console.log(this.prdList);
						this.initNewData();
						uni.hideLoading();
					}
				},failc=>{
					uni.hideLoading();
					//console.log('getadvertis----',failc)
				})
			},
			dowithshangpinList(shangpinlist){
				var tempList = [];
				if(shangpinlist){
					for(var j=0;j<shangpinlist.length;j++){
						var shuliang = 0;
						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
						}
						tempList.push(tempsp);
					}
				}
				return tempList;
			},
			initNewData(){
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.menuDetailBox').boundingClientRect(data => {
					console.log('所有分类项：', data);
					this.newData = data.map((item, index) => {
						function fgfg(total) {
							let sum = 0
							for (var i = 0; i <= total; i++) {
								sum += data[i].height
							}
							return sum
						}
						item.offsetHeight = fgfg(index)
						return item
					})
					
				}).exec();
			},
			
			
			//------------------------------------------------------------------------------
			
			fanhui(){
				uni.navigateBack();
			},
			shareToggle() {
				this.$refs.share.open()
			},
			chooseCancel(){
				this.showpop=false;
			},
			fenxiang(item,index){
				this.option={
					//绘制海报内容
					//codeUrl: 'https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg', //小程序太阳码
					codeUrl: '/static/defimages/erweim.png', //小程序太阳码
					coverUrl: '/static/defimages/ddd.png', //题库图片
					headUrl: '/static/logo.png', //头像
					//bgUrl: 'https://pic3.zhimg.com/v2-8fbde0f9ac6a19a23aa839e73394618a_b.jpg', //图片背景填充，和 fillStyle 只能传一个，bgUrl 优先级高于 fillStyle
					fillStyle: '#00A6FF', //纯色背景填充颜色
					nickName: '美食达', //授权登录的用户名
					miniName: '不出门吃遍全世界', //小程序名称
					tkName:this.posName, //题库名称
					tkAuthor:'门店介绍', //题库作者
					tkType: '外送', //题库类型
					cost: '自取', //是否需要收费   免费/付费
					isPub: '堂食' //公开 还是 私有
				};
				this.$refs.draw.share_qrcode(this.option);
			},
			
			callPhone(){
				var that = this;
				uni.showModal({
				    title: that.$t('api.message'),
				    content: that.$t('api.nqdbddh'),
					cancelText:that.$t('order.quxiao'),
					confirmText:that.$t('comp.queren'),
				    success: function (res) {
				        if (res.confirm) { //这里是点击了确定以后
							console.log(that.mendianMs.telephone)
							plus.device.dial(that.mendianMs.telephone, false );
				        } else { //这里是点击了取消以后
				          console.log('用户点击取消')
				        }
				    }
				})
			},
			gengduozx(){
				uni.navigateTo({
					url:'/pages/shanpinxungou/shangjia/gengduozhixun?mendid='+this.id
				})
			},
			pinglunList(){
				uni.navigateTo({
					url:'/pages/pinglun/pingLunList?mendid='+this.id
				})
				
			},
			
			shangpinsl(obj){
				//选择商品
				// uni.navigateTo({
				// 	url:'/pages/shanpinxungou/shangpin/shangpinxiangqing?id='+id
				// })
				//编辑商品
				console.log('bianjishangpin',obj)
				this.isbjsp=true;
				uni.navigateTo({
					url:'/pages/UserCenter/mendian/addmendianSP?spid='+obj.id+'&sh='+obj.toExamine
				})
			},
			
			//------------------------------------
			getmendianDetail(id){
				//console.log('getmendianDetail：id',id);
				uni.showLoading({
					mask:true
				})
				api('getmendianDetail',{
					id:id
				},r=>{
					console.log(r.data.data);
					this.mendianMs=r.data.data;
					this.userid=this.mendianMs.userId;
					this.posName=this.mendianMs.posName;
					this.isShouchang=this.mendianMs.Collect;
					if(this.isShouchang==1){
						this.shouchangIcon='/static/images/faverr@3x.png'
					}
					else{
						this.shouchangIcon='/static/images/faver@3x.png'
					}
					this.getmendianshangpinFL(id);
					this.cuxiaoList();
					
				},failc=>{
					uni.hideLoading();
					//console.log('getadvertis----',failc)
				})
			},
			cuxiaoList(){
				api('cuxiaoList',{
					mdId:this.id,
					price:''
				},r=>{
					//console.log('-----------',r)
					if(r.data.code==200){
						this.cuxiaoImge=[];
						var objs = r.data.data;
						for(var i=0;i<objs.length;i++){
							var obj=objs[i];
							if(obj.poster&&obj.poster.length>0){
								this.cuxiaoImge.push(obj.poster);
							}
						}
					}
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			
			//------------------------------------------------------
			addfenlei(){
				uni.navigateTo({
					url:'/pages/UserCenter/mendian/mendianSPFenlei?mendid='+this.id
				})
			},
			addshangpin(){
				uni.navigateTo({
					url:'/pages/UserCenter/mendian/addmendianSP?mendid='+this.id
				})
			},
			bianjimendian(){
				this.isfirstShow=0;
				uni.navigateTo({
					url:'/pages/UserCenter/mendian/addmendian?id='+this.id
				})
			},
			
			//--------------------------------------
			
			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 lang="scss" scoped>
	page{
		background-color: #F2F3F7;
	}
	
	 .box{
		 height: 100upx;
		 line-height: 100upx; 
		 text-align: center;
		 background-color:white;
	 }
	 .fixedTop{
		 position: fixed;
		 top:140rpx;
		 left: 0;
		 right: 0;
		 z-index: 9999999;
	 }
	 .fixedTopios{
		 position: fixed;
		 top:180rpx;
		 left: 0;
		 right: 0;
		 z-index: 9999999;
	 }
	 //-----------------------------
	.nodetail{
		width: 94%;
		margin-left: 3%;
		margin-top: -40rpx;
		background-color: white;
		border-radius: 10rpx;
	}
	
	.fenleiTitle{
		padding-left: 16rpx;
		padding-right: 16rpx;
		line-height: 36rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		color: darkgray;
		background-color: white;
		border: 1rpx solid darkgray;
	}


	.page-view {
		background-color:#F2F3F7;
	}
	
	.actimgeCT{
		position: fixed;
		width: 94%;
		left: 3%;
		top: 100rpx;
		z-index: 9;
	}
	.actimge{
		width: 60rpx;
		height: 60rpx;
	}

	.buyBT{
		display:flex;
		flex-direction: row;
		justify-content:center;
		align-items: center;
		width: 100%;
		margin-top: 10rpx;
	}
	
	.dianpuming{
		font-size: 30rpx;
		line-height: 32rpx;
		height: 32rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		/* #ifndef APP-PLUS-NVUE */
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		/* #endif */
	}
	.peisongsuoming{
		font-size: 26rpx;
		line-height: 38rpx;
		height: 38rpx;
		color: dimgray;
	}
	.bottomfloatV{
		position: fixed;
		flex-direction: row;
		align-items: center;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background-color: whitesmoke;
		height: 120rpx;
	}
	.qjs{
		border-radius: 30rpx;
		padding-left: 26rpx;
		padding-right: 26rpx;
		margin-left: auto;
		margin-right: 30rpx;
		font-size: 32rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
	.fenleiitem{
		text-align:center;
		margin-top: 12rpx;
		margin-bottom: 12rpx;
		width:660upx;
		border-radius: 10rpx;
		color: darkblue;
		line-height: 54rpx;
		font-size: 28rpx;
		border: solid lavender;
		border-width: 0px 0px 1rpx 0px;
	}
	//-----------------------------
	.menuBox {
		// height: calc(100vh);
		display: flex;
		flex-direction: column;
		// border: 1px solid #ccc;
		margin: 0 10rpx;
		.menuContent {
			height: 100%;
			overflow: auto;
			position: relative;
			display: flex;
			position: sticky;
			top: 0rpx;
			.menuLeft {
				float: left;
				position: relative;
				width: 200rpx;
				background-color: #f5f5f5;
	 
				.menuType {
					transition: all 0.4s;
					position: relative;
					z-index: 999999999;
					height: 100rpx;
					display: flex;
					align-items: center;
					padding-left: 20rpx;
	 
					&.currentMenu {
						font-weight: 700;
					}
				}
	 
			}
	 
			.menuRight {
				flex: 1;
				background-color:lavender;
	 
				.menuDetailBox {
					.title {
						height: 60rpx;
						display: flex;
						align-items: center;
					}
	 
					.menu {
						background-color: #fff;
						height: 200rpx;
						display: flex;
						justify-content: center;
	 
						&:not(:nth-last-of-type(1)) {
							margin-bottom: 20rpx;
						}
	 
						.d2 {
							width: 180rpx;
							height: 180rpx;
						}
	 
						.menuName {
							flex: 1;
							margin-left: 20rpx;
						}
	 
					}
				}
			}
		}
	}
	 
	.line {
		position: absolute;
		left: 0;
		top: 0;
		height: 100rpx;
		width: 100%;
		background-color: #fff;
		z-index: 999;
		transition: all 0.4s;
	 
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			height: 100rpx;
			width: 4rpx;
			background-color: red;
			z-index: 999;
			transition: all 0.4s
		}
	}
	
	.pdName{
		font-size: 30rpx;
		font-weight: bold;
		color: black;
	}
	.pdDetail{
		font-size: 26rpx;
		color: darkgray;
	}
	.redktext{
		color: brown;
		border-radius: 4rpx;
		border: 1px solid brown;
		font-size: 26rpx;
	}
	.greedKtext{
		color: darkgreen;
		border-radius: 4rpx;
		border: 1px solid darkgreen;
		font-size: 26rpx;
	}
	.pricetext{
		color: firebrick;
		font-size: 28rpx;
		font-weight: bold;
	}
	.pricedw{
		font-size: 24rpx;
		color: darkgray;
	}
	.yuanjia{
		font-size: 24rpx;
		color: darkgray;
		text-decoration: line-through;
	}
	.qjsact{
		margin-top: 10rpx;
		margin-left: 40rpx;
		border-radius: 8rpx;
		padding: 10rpx;
		font-size: 30rpx;
		line-height: 30rpx;
		color: white;
		text-align: center;
	}
</style>