forest-H5/pages/product/product.vue

<template>
	<view class="pages">
		<view class="appAdv nomal-bottom">
			<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(75)+'/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>
			</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(75)+'/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(75)+'/thumbnail/750x'" class="full-img" mode="widthFix"></image>
			</view>			
		</view>
		<!-- 产品介绍 end -->
		<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
				},
				
				
			}
		},
		onShow() {
			let serf = this;
			//检查登录,获取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)
			});

		},
		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(){
				console.log('111111');
				this.modal.visibleModal = false;
			},
			closepopup(done){
				done()
			},
			confirmpopup(done,value){
				uni.navigateTo({
					url:'/pages/usercenter/bindphone/bindphone'
				});
				done()
			},
			buy(item){
				console.log('item',item);
				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();
				});
				
			}

		}
	}
</script>

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