H5_module/product/supplier/supplier.vue

<template>
	<view v-if="isShow">
		<view class="top" :style="'height:' + systems.barHeight +'rpx;'">
			<navigator open-type="navigateBack" hover-class="none" class="back" :style="'height:' + systems.navigationHeight +'rpx;top:' + systems.ktxStatusHeight + 'rpx;'"><image src="../static/product/image/back.png"></image></navigator>
			<view class="title" :style="'height:' + systems.navigationHeight +'rpx;top:' + systems.ktxStatusHeight + 'rpx;line-height:' + systems.navigationHeight +'rpx;'">{{detail.name}}</view>
		</view>
		<image :src="picUrlss + 'wdbg1.png'" mode="aspectFill" class="sup-pic"></image>
		<view class="con">
			<view class="info">
				<view class="name">{{detail.name}}</view>
				<view class="fanweis">
					<view :class="'fanwei' + (viewMore?' f-height':'')" v-if="detail.businessScope">
						经营范围：{{detail.businessScope}}
					</view>
					<view class="more" v-if="viewMore" @click="viewMores()"><image src="../static/product/image/moreico.png"></image></view>
				</view>
				<view class="sup-shi dflex">
					<view class="li">
						<image src="../static/product/image/sup_ico1.png"></image>
						<view>实力商家</view>
					</view>
					<view class="li">
						<image src="../static/product/image/sup_ico2.png"></image>
						<view>深度认证</view>
					</view>
					<view class="li">
						<image src="../static/product/image/sup_ico3.png"></image>
						<view>信誉担保</view>
					</view>
					<view class="li">
						<image src="../static/product/image/sup_ico4.png"></image>
						<view>品牌证书</view>
					</view>
					<view class="li">
						<image src="../static/product/image/sup_ico5.png"></image>
						<view>一件代发</view>
					</view>
				</view>
			</view>
			<view class="datas dflex">
				<view class="li">资质类型：<text>{{detail.haveLicenseNo == 1?'企业':'个人'}}</text></view>
				<view class="li">是否审核：<text>已审核</text></view>
				<view class="li">编号：<text v-if="detail.number">{{detail.number}}</text></view>
				<view class="li">所在区域：<text>{{detail.areaAdd}}</text></view>
			</view>
		</view>
		<view class="prolist dflex" v-if="pageList.length > 0">
			<navigator hover-class="none" class="li" v-for="(item,index) in pageList" :key="index">
				<image :src="item.pic" mode="aspectFill"></image>
				<view class="infos">
					<view class="proname">{{item.title}}</view>
					<view class="sta dflex">
						<view class="price" v-if="item.maxSalePrice > item.minSalePrice"><text>￥</text>{{item.minSalePrice}} - {{item.maxSalePrice}}</view>
						<view class="price" v-else><text>￥</text>{{item.minSalePrice}}</view>
						<view class="stock">月成交{{item.sellStock}}件</view>
					</view>
				</view>
			</navigator>
		</view>
		<view class="nodata" v-else>
			<image :src="picUrlss+'empty_sp.png'"></image>
			<text>暂无商品</text>
		</view>
	</view>
</template>

<script>
const req = require('../../utils/request.js');
export default {
	data() {
		return {
			picUrlss: req.public.picUrls,
			isShow: false,
			systems: '',
			options: {},
			detail: {},
			pageList: [],
			form:{
				page:1,
				limit:10
			},
			isLoad:true,
			viewMore: false,
			fHeight: 48
		};
	},

	onLoad: function(options) {
		this.options = options;
		this.getList();
	},
	async onShow(){
		await this.getDetail();
	},
	onReachBottom(){
		this.form.page ++;
		this.getList()
	},

	methods: {
		monitor() {
			let that = this;
			let system = uni.getSystemInfoSync();
			console.log(system);
			let query = uni.createSelectorQuery();
			query.select('.fanwei').boundingClientRect(data=>{
				let height = data.height;
				console.log(height)
				if(height > 48) {
					this.viewMore = true
				}
			}).exec();
		},
		viewMores(){
			this.viewMore = false;
		},
		getDetail(){
			return new Promise((resolve,reject)=>{
				req.getRequest('/api/supplier/detail',{id:this.options.id},res=>{
					this.detail = res;
					if(res.fanwei){
						setTimeout(() => {
							this.monitor();
						},200);
					}
					this.isShow = true;
				})
			})
		},
		getList(){
			let that = this;
			if(!that.isLoad) return false;
			that.isLoad = false;
			that.form.supplierId = that.options.id;
			req.getRequest('/api/product/list',that.form,res=>{
				console.log('供应商商品列表==' + res)
				if (res && res.length >= 10) that.isLoad = true;
				if (that.form.page > 1) res = that.pageList.concat(res);
				that.pageList = res;
			})
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		// px转换到rpx的比例
		let pxToRpxScale = 750 / systemInfo.windowWidth;
		let systems = {
			ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
			navigationHeight: 44 * pxToRpxScale // 导航栏的高度
		};
		systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
		this.systems = systems;
	},
};
</script>

<style>
	@import "./supplier.css";
</style>