forest-H5/pages/supplier/supplierdetail/supplierdetail.vue

<template>
	<view class="pages">
		<view class="supplierdetail">
			
			<view class="full-img-wrap">
				<image class="full-img" v-if="firstcompanyimg" :src="firstcompanyimg|miniImg(60)+'/thumbnail/750x'" mode="widthFix"></image>
			</view>	
			<view class="base-info">
				<view class="base-info-til">{{companyinfo.compName}}</view>
				<view class="base-info-item">
					<text class="item">供应商资质：{{companyinfo.compQual}}</text>
					<text class="item">经营产品：{{companyinfo.compManageProduct}}</text>
				</view>				
			</view>
			<!-- base-info end -->
			<view class="shop write-radius wrap" v-if="shops.length>0">
				<view class="block-til">
					<view class="block-til-left">店铺</view>
				</view>
				<view class="shop-link">
					<view v-for="(item,index) in shops" :key="index" class="shop-link-item" @click="shopclick(item.shopUrl)">
						<view class="shop-img">
							<image :src="item.shopImg|timestamp" mode=""></image>
						</view>						
						<view class="shop-name" v-if="item.shopType == 'taobao'">天猫商城</view>
						<view class="shop-name" v-else-if="item.shopType == 'jd'">京东商城</view>
						<view class="shop-name" v-else>自营商城</view>
					</view>
				</view>				
			</view>
			<!-- shop end -->
			<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="supplier-info">
					<view class="supplier-info-til">{{companyinfo.compName}}</view>
					<view class="supplier-info-item">
						<text class="text">联系人：{{companyinfo.compConPerson}}</text>
						<text class="text">联系电话：{{companyinfo.compConNum}}</text>
					</view>
					<view class="supplier-info-item">
						地址：{{companyinfo.detailAddress}}
					</view>
					<view class="supplier-info-item">
						社会信用代码：{{companyinfo.compSocialCode}}
					</view>
					<view class="supplier-info-item">
						生产许可证号：{{companyinfo.compManageLicenseNum}}
					</view>
					<view class="supplier-info-item compSum">
						简介：<rich-text :nodes="companyinfo.compSum"></rich-text>
						<!-- 简介：{{companyinfo.compSum}} -->
					</view>
					<view class="supplier-info-certificate">
						<image v-for="(img,index) in companyimg" :key="index" :src="img.fileUrl|miniImg(60)+'/thumbnail/750x'" mode="widthFix"></image>
						<!-- <image class="image" src="../../../static/img/banner-supplierdetail.png" mode="widthFix"></image>
						<image class="image" src="../../../static/img/banner-supplierdetail.png" mode="widthFix"></image> -->
					</view>
				</view>
			</view>
			<!-- 供应商 end -->
			<view class="write-radius placeoforigin wrap" v-if="origines.length > 0">
				<view class="block-til">
					<view class="block-til-left">生产地</view>
				</view>
				<scroll-view scroll-x="true" class="scroll-X placeoforigin-scroll-view">
					<view class="placeoforigin-wrap" :style="origines.length==1?{width:'auto',display:'block'}:''" v-for="(item,index) in origines" :key="index">
						<view class="placeoforigin-banner">
							<image class="placeoforigin-banner-img" :src="item.imgUrl||'/static/img/placeoforigin-banner.png'|miniImg(50)" mode="widthFix"></image>
						</view>
						<view class="placeoforigin-text">
							<view class="placeoforigin-text-til">{{item.originName}}</view>
							<view class="placeoforigin-text-item">
								<text class="text">面积：{{item.originArea}}</text>
								<text class="text">人员数：{{item.peopleNum}}人</text>
							</view>
							<view class="placeoforigin-text-item">
								地址：{{item.detailAddress}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 生产地 end -->
			<view class="results write-radius" v-if="products.length > 0">
				<view v-for="(item,index) in products" :key="index" @click="productdetails(item.id)" class="results-item">
					<view class="results-item-img-wrap"><image :src="item.pic|miniImg(50)" mode="aspectFit" class="results-item-img"></image></view>				
					<view class="results-item-info">
						<view class="results-item-info-til">{{item.name}}</view>
						<view class="results-item-info-brand">{{item.brandName}}</view>
						<!-- <view class="results-item-info-addr">{{item.placeOfProduction}}</view> -->						
						<view class="results-item-info-label">
							<text v-if="item.postage" class="postage">包邮</text>
						</view>
						<view class="results-item-info-company">{{item.umsCompanyInfo}}</view>
						<view class="results-item-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>
							<!-- <text class="minsell">4000斤起售</text> -->
						</view>						
					</view>
				</view>			
			</view>	
			
			
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params:{
					token:'',
				},
				companyinfo:[],
				shops:[],
				companyimg:[],
				firstcompanyimg:'',
				origines:[],
				products:[],
				
			}
		},
		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;
			//检查登录,获取token
			// let loginRes = this.checkLogin('/pages/index/index', '2');
			// if(!loginRes){return false;}
			// serf.params.token=loginRes[0];
			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);
				}
			});
			let thetoken = this.params.tokenhead+this.params.token;
			uni.showLoading({
			    title: '请稍等'
			});	
			this.$api.http.get(this.config.apiBaseurl+'/company/cp/detail',{header: {Authorization:thetoken},params:{compId:option.id}}).then(res =>{	
				uni.hideLoading();
				this.companyinfo = res.data.data;
				this.companyimg = res.data.data.files;			
				this.shops = res.data.data.shops;
				// console.log('this.companyimg',this.companyimg);
				this.products = res.data.data.products;
				this.origines = res.data.data.origines;
				console.log('res',JSON.parse(JSON.stringify(res)));
				this.firstcompanyimg = this.companyimg[0].fileUrl||'';
				// console.log('this.companyinfo',JSON.parse(JSON.stringify(this.companyinfo)));
			});
			// console.log(option);

		},
		methods: {
			//跳转详情
			productdetails(id){
				uni.navigateTo({
					url:`/pages/product/product?id=${id}`
				})				
			},
			// shopclick
			shopclick(url){
				window.location.assign(url);
			}

		}
	}
</script>

<style scoped>
	
	@import url("./supplierdetail.css");
	page{background-color: #FBFBFC;}
</style>