lanan-old/lanan-master-uniapp/subInspectionPages/index/index.vue

<template>
	<view class="page flex-col">
		<view class="section_1 flex-col">
			<view class=" flex-col">
				<view class="w700 flex-row align-center justify-between padding-left padding-right radius"
					style="margin:20rpx auto 0;height: 180rpx;background-image: linear-gradient(-81deg,rgba(255, 255, 255, 1) 0,rgba(255, 255, 255, 1) 0,rgba(225, 235, 255, 1) 100%,rgba(225, 235, 255, 1) 100%);"
					@click="this.$tab.navigateTo('/subNoticePages/list/list?noticeType=3')">
					<u--image :src="imagesUrl+'notice.png'" width="127rpx" height="123rpx"></u--image>
					<view class="margin-top" style="width: 480rpx;">
						<u-notice-bar :text="notice" direction="column" speed="250" color="#000" bgColor="none"
							icon="false" fontSize="32rpx" :customStyle="{}"></u-notice-bar>
						<text class="text-lg text-bold">{{notice.noticeTitle}}</text>
					</view>
				</view>
				<image class="image_2" @click="goimgdetails()" :src="imagesUrl+'note1.png'" />
				<image class="image_3" @click="goimgdetails1()" :src="imagesUrl+'note2.png'" />

				<view class="carList">

					<view class="goods" v-for="item,index in inspectionGoods" :key="index" @click="godetails(item.id)">
						<u--image class="goodImg" radius="10rpx" width="320rpx" height="220rpx" :showLoading="true"
							:src="baseUrl + item.image"></u--image>
						<view class="carTitle">
							<text style="font-size: 16px; ">
								{{ item.title }}
							</text>
						</view>
						<view class="flex-row justify-between">
							<view class="">
								<text class="text_4">￥</text>
								<text class="text_5">{{ item.lowPrice }}</text>
							</view>
							<view class="">
								<text class="text_8">去预约</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="zhongji" @click="call()">
				<image class="image_12" :src="imagesUrl+'jiantel.png'">
					<view class="baizi">{{snum}}</view>
			</view>
			<image @click="govip()" class="image_13" :src="imagesUrl+'user_level.png'" />
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				imagesUrl: getApp().globalData.config.imagesUrl,
				baseUrl: getApp().globalData.config.baseUrl,
				notice: null,
				inspectionGoods: [],
				constants: {},
				indexList: [],
				snum: null,
				urls: [
					'/static/car.jpg',
					'/static/car.jpg',
					'/static/car.jpg',
					'/static/car.jpg',
					'/static/car.jpg',
					'/static/car.jpg',
				],
				params: {
					pageSize: 10,
					pageNum: 1
				},
				isLoadMore: false, //是否加载中
				inspectionTel: null
			};
		},
		onLoad() {
			this.getNotice();
			this.getConfig();
			this.getInspectionGoods();
		},
		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.params.pageNum++
				this.getInspectionGoods()
			}

		},
		methods: {
			govip() {
				uni.navigateTo({
					url: '/pages/tabBar/mine/rules'
				})
			},
			//去支付
			getRechrge() {
				uni.navigateTo({
					url: '/pages/tapBar/mine/Recharge'
				})
			},
			goimgdetails() {
				uni.navigateTo({
					url: '/subInspectionPages/family/family'
				})
			},
			goimgdetails1() {
				uni.navigateTo({
					url: '/subInspectionPages/Pickup/Pickup'
				})
			},
			godetails(id) {
				uni.navigateTo({
					url: '/subInspectionPages/details/details?id=' + id
				})
			},
			// 获取公告
			async getNotice() {
				const res = await this.$request({
					url: '/system/notice/listWx',
					data: {
						noticeType: 3,
						pageSize: 5
					}
				})
				let notice = []
				for (let i = 0; i < res.rows.length; i++) {
					notice.push(
						res.rows[i].noticeTitle
					)
				}
				this.notice = notice;
			},
			// 获取商品列表
			async getInspectionGoods() {
				const res = await this.$request({
					url: '/system/inspectionGoods/listWx',
					data: this.params
				})
				this.inspectionGoods = this.inspectionGoods.concat(res.rows);

				if (res.rows.length < this.params.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
					this.isLoadMore = true
				} else {
					this.isLoadMore = false
				}
			},
			// 获取配置:电话
			async getConfig() {
				const res = await this.$request({
					url: '/system/shopconfig/listWx'
				})
				console.log(res.rows[0]);
				this.inspectionTel = res.rows[0].inspectionTel
				this.snum = this.addHyphenEveryThreeChars(this.inspectionTel)

			},
			addHyphenEveryThreeChars(str) {
				let modifiedPhoneNumber = str.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3");
				return modifiedPhoneNumber;
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.inspectionTel.toString(), //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);

					}
				})
			}

		},
	};
</script>
<style lang="scss" scoped>
	@import './index.rpx.css';

	.text-xm {
		font-size: 16px;
		font-weight: bold;
		color: rgba(67, 67, 67, 1);
	}

	.text-mx {
		font-size: 14px;
		color: rgba(170, 170, 170, 1);
	}

	.carList {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 700rpx;
		margin: 0 auto;

		.goods {
			width: 340rpx;
			margin: 10rpx 0;
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 0 10rpx 20rpx 10rpx;

			.carTitle {
				height: 68rpx;
				margin-bottom: 10rpx;
			}

			.carAge {
				font-size: 12px;
				color: #b5b5b5;
				margin: 10rpx 0;
			}

			.goodImg {
				border-radius: 25rpx;
				margin: 10rpx 0;
			}
		}
	}

	.zhongji {
		width: 100%;
		height: 130px;
		position: relative;

		image {
			position: absolute;
			transform: translate(-50%);
			left: 50%;

		}
	}

	.baizi {
		position: absolute;
		width: 100%;
		text-align: center;
		transform: translate(-50%);
		left: 50%;
		top: 35px;
		// left: 25%;
		font-size: 26px;
		text-shadow: 0px 0px 7px #42464C;
		font-family: HuXiaoBo-NanShen;
		font-weight: 600;
		z-index: 99;
		color: white;
		font-style: italic
	}

	.carList .goods .carTitle.data-v-36a26fb8 {
		height: 68rpx;
		margin-bottom: 38rpx !important;
	}
</style>