cte-share/pages/shanpinxungou/shangpin/shangpinxiangqing.vue

<template>
	<view>
		<customNav :shownav="true" :title="$t('index.goodsxq')" titledetl=""></customNav>
		<view class="contentColumn">
			<view>
				<!--<myImage class="imageV" :mysrc="shangpinImage" mymode="widthFix"></myImage>-->
				<image class="imageV" :src="shangpinImage" mode="scaleToFill" @error="imageError()"></image>
			</view>
			<view class="contentColumn" style="margin-left: 4%;width: 92%;">
				<view class="dianpuming">
					<text>{{shangpinxq.name}}</text>
				</view>
			</view>
			<view class="contentInRowS" style="margin-left: 4%;width: 92%;">
				<view class="">
					<text class="peisongsuoming">{{$formPr(shangpinxq.price)}}{{$t('locale.huobidw')}}</text>
				</view>
				<view v-if="shangpinxq.stackingUp==0" class="rconten">
					<image v-if="showbt" class="imageRJ" src="/static/images/jian@3x.png" mode="aspectFit" @click="jiangouwuche"></image>
					<text v-if="showbt" class="textR">{{goumail}}</text>
					<image class="imageR" src="/static/images/plus-circle-fill@3x.png" mode="aspectFit" @click="editSKU"></image>
				</view>
				<view v-if="shangpinxq.stackingUp==1" class="rconten">
					<text class="textR">{{$t('mend.yixiajia')}}</text>
				</view>
			</view>
			<!-- <danxuanlist style="width:100%;" :infolistD="infosku" :isedit="false" v-on:ElistDatachange="listDatachange"></danxuanlist> -->
			<view class="">
				<text class="xsxqt">{{$t('index.goodsxq')}}:</text>
			</view>
			<view class="contentColumn shangpinwenmiao">
				<text>{{shangpinxq.introduce}}</text>
			</view>
		</view>
		<view style="height: 170rpx;"></view>
		<view  class="bottomfloatV">
			<view class="buyBT" @click="qujiesuan">
				<image class="gouwuche" :src="gouwcheimg" mode="aspectFit"></image>
				<text class="peisongsuoming">{{notext}}</text>
				<text class="qjs" :style="{backgroundColor:gwbcolor,color:gwbTcolor}">{{$t('comp.lijigoumai')}}</text>
			</view>
		</view>
		<popViewGG :show="showpop" :showbotom="false" :maskClosable="true" :isCancel="true" @chooseCancel="chooseCancel">
			<foodxuangou style="width:100%;" :food="spindexSP" v-on:Ejiagouwuche="jiagouwuche"></foodxuangou>
		</popViewGG>
		
	</view>
</template>

<script>

	import api from "@/pages/api/api.js"
	export default {
		data() {
			return {
				goumail:0,
				goumaijine:0,
				notext:this.$t('comp.weixgsp'),
				gwbcolor:'darkgray',
				gwbTcolor:'black',
				gouwcheimg:'/static/images/gouwuh@3x.png',
				showbt:false,
				id:1,
				isShangjia:0,
				spindexSP:'',
				shangpinxq:[],
				shangpinImage:'',
				infosku:'',
				showpop:false,
				sku:[],
				selectsku:[],
				gouwuche:{
					foodlist:[],
					mendid:'',
					userId:'',
					mendname:''
				}
				
			}
		},
		onLoad(option) {
			this.id=option.id;
			this.isShangjia=option.isShangjia;
		},
		onShow() {
			var gwc = uni.getStorageSync('gouwuche');
			if(''==gwc||null==gwc||undefined==gwc){
				this.goumail = 0;
				this.gouwuche={
					foodlist:[],
					mendid:'',
					userid:'',
					mendname:''
				};
			}
			else{
				this.gouwuche = JSON.parse(gwc);
			}
			
			this.jinerpand();
			this.getGoodsDetail(this.id);
			if(1!=this.isShangjia){
				var webView = this.$mp.page.$getAppWebview();  
				webView.setTitleNViewButtonStyle(0,{  
					width: '0'  
				});
			}
		},
		methods: {
			
			editSKU(index){
				
				var tempsp={
					"shangpin":this.shangpinxq,
					"sku":'',
					"otherPrice":'',
					"shuliang":0
				}
				this.spindexSP = tempsp;
				
				this.showpop=true;
				
				//this.$refs.popup.open();
			},
			
			jiagouwuche(){
				var gwc = uni.getStorageSync('gouwuche');
				if(''==gwc||null==gwc||undefined==gwc){
					this.gouwuche={
						foodlist:[],
						mendid:'',
						userid:'',
						mendname:''
					};
				}
				else{
					this.gouwuche = JSON.parse(gwc);
				}
				this.tongjigouwuche();
				
				this.showpop=false;
				
			},
			
			chooseCancel(){
				this.showpop=false;
			},
			
			jiangouwuche(){
				//跳转购物车
				uni.navigateTo({
					url:'/pages/OrderList/buy/gouwuche'
				})
			},
			
			tongjigouwuche(){
				this.goumail = 0;
				this.goumaijine = 0;
				if(this.gouwuche.mendid==this.shangpinxq.store.id){
					for(var j=0;j<this.gouwuche.foodlist.length;j++){
						var sp = this.gouwuche.foodlist[j];
						if(sp.id==this.shangpinxq.id){
							this.goumaijine = this.goumaijine + sp.number*(sp.price+sp.otherPrice);
							this.goumail = this.goumail + sp.number;
						}
					}
				}
				this.jinerpand();
			},
			
			jinerpand(){
				console.log('jinerpand',this.goumail)
				if(this.goumail>0){
					this.gwbcolor='green';
					this.gwbTcolor='white';
					this.notext=this.$formPr(this.goumaijine)+this.$t('locale.huobidw');
					this.gouwcheimg='/static/images/gouwu@3x.png';
					this.showbt=true;
				}
				else{
					this.gwbcolor='darkgray';
					this.gwbTcolor='black';
					this.notext=this.$t('comp.weixgsp');
					this.gouwcheimg='/static/images/gouwuh@3x.png';
					this.showbt=false;
				}
			},
			
			
			qujiesuan(){
				if(this.shangpinxq.store.state==1){
					uni.showToast({
					    title: this.$t('mend.statedy'),
					    icon: 'none',
					    duration: 2500
					})
					return;
				}
				var that = this;
				if(!this.showbt){
					uni.showToast({
					    title: that.$t('comp.qingxzsp'),
					    icon: 'none',
					    duration: 3500
					})
					return;
				}
				
				var token = uni.getStorageSync("token");
				
				if(token == '' || token == undefined || token == null){
					uni.navigateTo({
						url:'/pages/UserCenter/LoginView'
					})
					return;
				}
				
				var foodlist=[];
				
				if(this.gouwuche.mendid==this.shangpinxq.store.id){
					for(var j=0;j<this.gouwuche.foodlist.length;j++){
						var sp = this.gouwuche.foodlist[j];
						if(sp.id==this.shangpinxq.id){
							foodlist.push(sp);
						}
					}
				}
				uni.setStorageSync('JSfoodlist',foodlist);
				uni.navigateTo({
					url:'/pages/OrderList/buy/jiesuanYe?mendid='+this.shangpinxq.store.id+'&userid='+this.shangpinxq.store.userId
				})
			},
			getGoodsDetail(id){
				api('GoodsDetail',{
					id:id
				},r=>{
					this.shangpinxq=r.data.data;
					console.log(this.shangpinxq);
					this.shangpinImage=this.$baseImagurl + this.shangpinxq.image;
					this.tongjigouwuche();
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			imageError(){
				this.shangpinImage = '/static/logo.png';//默认图片 
			},
			
		}
	}
</script>

<style lang="scss">
	.imageV{
		width:750rpx;
		height: 750rpx;
		background-color:floralwhite;
	}
	.imageZ{
		width: 30rpx;
		height: 30rpx;
		
	}

	.imageRJ{
		width: 56rpx;
		height: 56rpx;
		margin-right: 8rpx;
	}
	.imageR{
		width: 56rpx;
		height: 56rpx;
		margin-right: 0rpx;
	}
	.textR{
		margin-left: 6rpx;
		margin-right: 6rpx;
	}
	.msText{
		width:92%;
		margin-top: 20rpx;
		margin-left: 4%;
		text-align: left;
	}
	.contensb{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
	}
	.rconten{
		margin-left: auto;
		display:flex;
		flex-direction: row;
		align-items: center;
	}
	.buyBT{
		display:flex;
		flex-direction: row;
		justify-content:flex-start;
		align-items: center;
		width:100%;
	}
	.dianpuming{
		font-size: 30rpx;
		line-height: 32rpx;
		font-weight: bold;
	}
	.peisongsuoming{
		font-size: 26rpx;
		line-height: 32rpx;
		color: dimgray;
	}
	.detailtextV{
		color: dimgray;
		font-size: 26rpx;
		width: 90%;
	}
	.skuViewCt{
		display: flex;
		flex-direction: column;
		justify-content:center;
		width: 100%;
		margin-top: 10rpx;
	}
	
	.contensbgg{
		display: flex;
		flex-wrap: wrap;
		justify-content:flex-start;
		align-items:center;
	}
	
	.guigeleixing{
		font-size: 26rpx;
		line-height: 40rpx;
		height: 40rpx;
		color: black;
		font-weight: bold;
	}
	.youhuixinxi{
		margin: 8rpx;
		padding: 4rpx;
		font-size: 26rpx;
		line-height: 54rpx;
		height: 54rpx;
		border: 2rpx solid lightgray;
		border-radius: 8rpx;
	}
	.xz{
		color: lightcoral;
		border: 2rpx solid lightcoral;
		border-radius: 8rpx;
	}
	.xiaoliang{
		margin-left: auto;
		margin-right: 30rpx;
	}
	.xsxqt{
		margin-top: 16rpx;
		padding-left: 30rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		height: 80rpx;
		font-weight: bold;
		background-color:whitesmoke;
	}
	.shangpinwenmiao{
		width:92%;
		margin-left: 4%;
		font-size: 30rpx;
	}
	
	.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: 80rpx;
		line-height: 80rpx;
	}
</style>