forest-H5/pages/product/product.vue

<template>
	<view class="pages">
		<view class="appAdv">
			<swiper class="swiper" :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration">
				<!-- <swiper-item v-for="(item,index) in albumPics" :key="index"> -->
				<swiper-item>
					<view class="adv-item"><image :src="$getimg+product.pic|miniImg(50)+'/thumbnail/750x'" class="pic" mode="aspectFit"></image></view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播结束 -->
		<view class="product-info-wrap">
			<view class="product-info-til">{{product.name}}</view>
			<view class="product-info-brand">{{product.brandName}}<!-- <text class="postage">包邮</text> --></view>
			<view class="product-info-item">
				<text class="item">保质期：{{product.qualityGuaranteePeriod||"参考包装"}}</text>
				<!-- <text class="item">生产日期：{{createTime}}</text> -->
				<text class="item" v-if="product.unit">包装：{{product.unit}}</text>
				<text class="item" v-if="product.spec">规格：{{product.spec}}</text>
			</view>
			<view class="product-info-price">
				<text class="rmb" v-if="product.price">¥</text>
				<text class="price" :class="!product.price?'noprice':''">{{product.price||"暂无价格"}}</text>
				<text class="unit" v-if="product.price&&product.unit">/{{product.unit}}</text>
			</view>
		</view>
		<!-- 产品基本信息结束 -->
		<view class="write-radius supplier wrap">
			<view class="block-til">
				<view class="block-til-left">供应商</view>
				<view class="block-til-right" v-if="companyinfo.isCert==1">
					<view class="safe-icon">
						<image class="safe-icon-img" src="/static/img/icon-safe.png" mode=""></image>
					</view>
					商家已缴纳诚信保证金
				</view>
			</view>
			<view class="placeoforigin-info" @click="gocompany(companyinfo.id)">
				<view class="placeoforigin-info-img-wrap" >
					<image class="placeoforigin-info-img" :src="firstimg||'/static/img/inbuild.png'|miniImg(50)+'/thumbnail/240x'" mode="aspectFit"></image>
				</view>
				<view class="placeoforigin-info-text">
					<view class="placeoforigin-info-text-til">{{companyinfo.compName}}</view>
					<view class="placeoforigin-info-text-con">
						<view class="placeoforigin-info-text-level">等级：{{companyinfo.compLevel}}级</view>
						<view class="placeoforigin-info-text-product">经营产品：{{companyinfo.compManageProduct}}</view>
						<view class="placeoforigin-info-text-addr">地址：{{ companyinfo.provinceId + companyinfo.cityId||''}}</view>						
					</view>					
				</view>
			</view>
		</view>
		<!-- 供应商 end -->
		<view class="write-radius placeoforigin wrap">
			<view class="block-til">
				<view class="block-til-left">生产地</view>
			</view>
			<view class="placeoforigin-addr">{{product.placeOfProduction}}</view>
		</view>
		<!-- 生产地 end -->
		<view class="write-radius introduce wrap">
			<view class="block-til">
				<view class="block-til-left">产品介绍</view>
			</view>
			<!-- <view class="introduce-table">
				<view class="introduce-table-til">规格</view>
				<view class="introduce-table-con">
					<view class="introduce-table-row">
						<view class="introduce-table-col">5斤装</view>
						<view class="introduce-table-col">30.00元/件</view>
					</view>
					<view class="introduce-table-row">
						<view class="introduce-table-col">10斤装</view>
						<view class="introduce-table-col">50.00元/件</view>
					</view>
				</view>
			</view> -->
			<!-- introduce-table end -->
			<view class="page-article">
				<rich-text :nodes="product.description"></rich-text>
				<!-- <view class="page-article-text">
					{{product.description}}
				</view> -->
				<image v-for="(item,index) in albumPics" :key="index" :src="$getimg+item|miniImg(50)+'/thumbnail/750x'" class="full-img" mode="widthFix"></image>
			</view>			
		</view>
		<!-- 产品介绍 end -->
		<!-- 推荐产品 end -->
		<view class="write-radius recommend wrap" v-if="recommendList.length>0">
			<view class="block-til">
				<view class="block-til-left">推荐产品</view>
			</view>
			<view class="recommend-list">
				<view class="recommend-item" v-for="(item,index) in recommendList" :key="item.id" @click="productdetails(item.id)">
					<image class="recommend-item-img" :src="item.pic" mode="aspectFit"></image>
					<view class="recommend-item-til">{{item.name}}</view>
					<view class="product-info-price">
						<text class="rmb" v-if="item.price">¥</text>
						<text class="price" :class="!item.price?'noprice':''">{{item.price||"暂无价格"}}</text>
						<text class="unit" v-if="item.price&&item.unit">/{{item.unit}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom-flex-btn-wrap">
			<view class="bottom-flex-btn-content">
				<button type="default" :disabled="isPred==0?false:true"  class="bottom-flex-btn" @click="focuse(params.productid)">有意向</button>
				<button type="default" class="bottom-flex-btn" @click="buy(params.productid)">立即购买</button>
				<button type="default" class="bottom-flex-btn primary" @click="callnumber(phoneNumber)">打电话</button>
			</view>			
		</view>
		
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog type="info"  content="还未绑定手机号码,是否去绑定?" :duration="2000" :before-close="true" @close="closepopup" @confirm="confirmpopup"></uni-popup-dialog>
		</uni-popup>
		<quick-buy class="quickbuy" :pData="this.productresult" ref="quickBuy" @closeModal="closeModal" v-if="modal.visibleModal"></quick-buy>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import quickBuy from './modal/quickBuy';
	export default {
		components: {
			uniPopup,
			uniPopupDialog,
			quickBuy,
		},
		data() {
			return {
				userInfo:null,
				params:{
					token:'',
					tokenhead:'',
					productid:'',					
				},
				phoneNumber:'',
				swiper: {
					indicatorDots: false,
					autoplay: true,
					interval: 9000,
					duration: 500
				},
				productresult:[],
				brand:[],
				companyinfo:[],
				origin:[],
				product:[],
				createTime:'',
				isPred:0,
				albumPics:null,
				firstimg:'',
				files:[],
				thispage:'',
				modal: {
					visibleModal: false
				},
				addrsList:[],
				recommendList:[],
			}
		},
		onShow() {
			let serf = this;
			this.getAddrs();
			//检查登录,获取token
			// let loginRes = this.checkLogin('/pages/index/index', '2');
			// if(!loginRes){return false;}
			// serf.params.token=loginRes[0];			
		},
		onLoad(option) {
			let self = this;
			uni.getStorage({
				key:'token',
				success: function (res) {
					self.params.token = res.data;
				   // console.log(res.data);
				}
			});
			uni.getStorage({
				key:'tokenhead',
				success: function (res) {
					self.params.tokenhead = res.data;
				   // console.log(res.data);
				}
			});
			uni.getStorage({
				key:'userInfo',
				success: function (res) {
					self.userInfo = res.data.user;
				   // console.log('userInfo',self.userInfo);
				}
			});
			// console.log('option',option);
			this.params.productid = option.id;
			this.thispage = `/#/pages/product/product?id=${this.params.productid}`;
			//获取产品
			//,{params:this.params}
			this.$api.http.get(this.config.apiBaseurl+'/product/detail/'+this.params.productid).then(res => {
				console.log('res',JSON.parse(JSON.stringify(res)));
				this.isPred = res.data.data.isPred;
				// console.log('this.isPred',this.isPred)
				this.productresult = res.data.data || '';
				this.brand = res.data.data.brand || '';
				this.companyinfo = res.data.data.companyInfo || '';				
				this.origin = res.data.data.origin || '';
				this.product = res.data.data.product || '';
				this.albumPics = this.product.albumPics||'';
				this.albumPics = this.albumPics.split(',');
				this.files = res.data.data.companyInfo.files||'';
				this.firstimg = this.files[0].fileUrl||'';
				// console.log('this.albumPics',this.albumPics,'type',typeof this.albumPics,'this.firstimg',this.firstimg);
				this.phoneNumber = this.companyinfo.compConNum;//动态电话
				// this.phoneNumber = '13885026400';
				// console.log('this.brand',JSON.parse(JSON.stringify(this.brand)));
				// console.log('this.companyinfo',JSON.parse(JSON.stringify(this.companyinfo)));
				// console.log('this.origin',JSON.parse(JSON.stringify(this.origin)));
				// console.log('this.product',JSON.parse(JSON.stringify(this.product)));
				this.createTime = this.product.createTime.substring(0, 10);
			}).catch(err => {
				console.log(err)
			});
			
			//获取推广商品
			this.getrecommend();
			

		},
		methods: {
			//有意向
			focuse(productid){
				console.log('this.thispage',this.thispage);
				//没有手机号,提醒去绑定
				// if(!this.userInfo.phone){
				// 	this.$refs.popup.open();
				// 	return false;
				// };
				let thetoken = this.params.tokenhead + this.params.token;
				this.$api.http.put(this.config.apiBaseurl+'/pre/add',{productId:productid},{header: {Authorization:thetoken}}).then(res => {
					if(res.data.code!=200){
						uni.showToast({
							icon:"none",
							title:res.data.message,
							duration: 2000
						});
						return false;
					};
					console.log(res);
					uni.showToast({
						icon:'success',
						mask:true,
						title:`已添加有意向`,
						duration: 2000
					});
					
				}).catch(err => {
					uni.showToast({
						icon:'none',
						mask:true,
						// title:err.data.message,
						title:err.data.message,
						duration: 2000
					});
					console.log(err.data.message);
				});				
			},
			//打电话
			callnumber(number){
				if(!number){
					uni.showToast({
						icon:'none',
						mask:true,
						title:`手机号码为空`,
						duration: 2000
					});
					return;
				};
				uni.makePhoneCall({
				    phoneNumber: number 
				});				
			},
			// 跳转到供应商
			gocompany(id){
				uni.navigateTo({
					url:`/pages/supplier/supplierdetail/supplierdetail?id=${id}`
				})
			},
			closeModal(){
				this.modal.visibleModal = false;
			},
			closepopup(done){
				done()
			},
			confirmpopup(done,value){
				uni.navigateTo({
					url:'/pages/usercenter/bindphone/bindphone'
				});
				done()
			},
			buy(item){
				// console.log('item',item);
				console.log('this.addrsList',this.addrsList);
				if(this.addrsList.length <=0){
					console.log('productid',this.params.productid);
					uni.setStorage({
						key: 'productID',
						data:this.params.productid
					});
					uni.showToast({
					 	title:"您还未设置收货地址,将跳到设置页!",
					 	icon:"none",
					 	duration:2000
					});
					setTimeout(i=>{
						uni.navigateTo({
							url: '/pages/usercenter/addrs/addrs',
							fail:function(err){
								console.log(err)
							}
						});
					},2000);
					return;
				}				
				if(!this.product.price){
					uni.showToast({
						icon:'none',
						mask:true,
						title:`暂时无法购买`,
						duration: 2000
					});
					return false;
				};
				this.modal.visibleModal = true;
				this.$nextTick(res => {
					this.$refs.quickBuy.openPop();
				});				
			},
			getAddrs(){
				// console.log('this.token',this.token);
				let thetoken = this.params.tokenhead + this.params.token;
				this.$api.http.get(this.config.apiBaseurl + '/member/address/list',{header: {Authorization:thetoken}}).then(res => {
					// console.log('getAddrList', res.data.data);
					this.addrsList = res.data.data;
				}).catch(err => {
					// console.log('err', err)
				})
			},
			//获取推广商品
			getrecommend(){
				this.$api.http.get(this.config.apiBaseurl+'/home/better-select', {header: {Authorization:this.params.tokenhead+this.params.token}}).then(res => {
					// console.log('getrecommend',res)
					this.recommendList = res.data.data.list;
					console.log('this.recommendList',JSON.parse(JSON.stringify(this.recommendList)));
				}).catch(err => {
					console.log(err)
				});
			},
			//跳转详情
			productdetails(id){
				uni.navigateTo({
					url:`/pages/product/product?id=${id}`
				})				
			},

		}
	}
</script>

<style>
	@import url("./product.css");
</style>