gubersail-shop-app/pages/home/index.vue

<template>
	<view class="container">
		<uni-nav-bar title="门店" backgroundColor='#03803B' color="#fff" fixed statusBar @clickRight="inSetting">
		</uni-nav-bar>
		<image class="background-image" src="/static/images/home/527@2x.png" style="width: 100%;height: 320rpx;"
			mode="scaleToFill"></image>
		<view style="display: flex;align-items: center;" @click="allClick('商品检索')">
			<view style="width: 100%;">
				<uni-search-bar bgColor="#F6F6F6 " placeholder="请输入商品名称" radius="20">
				</uni-search-bar>
			</view>
		</view>
		<view style="padding: 10rpx 20rpx 0 20rpx;">
			<view style="border-radius: 10rpx;overflow: hidden;">
				<uni-swiper-dot :info="swiperList" :current="dotCurrent" mode="round" :dots-styles="dotsStyles">
					<swiper circular :autoplay="true" :interval="2000" :duration="500" @change="swiperChange">
						<!-- 	<swiper-item v-for="(item,index) in swiperList" :key="index">
							<image mode="scaleToFill" :src="item" style="width: 100%;height: 100%;">
							</image>
						</swiper-item> -->
						<swiper-item>
							<image mode="scaleToFill" src="@/static/images/home/sw1.jpg"
								style="width: 100%;height: 100%;">
							</image>
						</swiper-item>
						<swiper-item>
							<image mode="scaleToFill" src="@/static/images/home/sw2.jpg"
								style="width: 100%;height: 100%;">
							</image>
						</swiper-item>
						<swiper-item>
							<image mode="scaleToFill" src="@/static/images/home/sw3.png"
								style="width: 100%;height: 100%;">
							</image>
						</swiper-item>
						<swiper-item>
							<image mode="scaleToFill" src="@/static/images/home/sw4.jpg"
								style="width: 100%;height: 100%;">
							</image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
		</view>
		<view class="home-card">
			<uni-grid :column="4" :showBorder="false">
				<uni-grid-item>
					<view class="grid-item-box" @click="allClick('轮胎保注册')">
						<view class="grid-item-box-img">
							<image style="width: 80rpx;height: 80rpx;" src="@/static/images/home/baoxian.png" />
						</view>
						<view class="grid-item-box-text">
							轮胎保
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box" @click="allClick('保单')">
						<view class="grid-item-box-img">
							<image style="width: 80rpx;height: 80rpx;" src="@/static/images/home/chexian.png" />
						</view>
						<view class="grid-item-box-text">
							保单
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view @click="">
			<image src="/static/images/home/JF.png" style="width: 100%;height: 251rpx;" mode="scaleToFill">
			</image>
		</view>
		<view class="home-card">
			<u-tabs :list="dianjiqielist" v-model="groupModel" @click="groupChange" :lineHeight='0'
				:activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></u-tabs>
			<view style="padding: 16rpx;border-top: 2px #F1F1F1 solid;;">
				<uni-grid :column="2" :show-border="false" :square="false" :highlight="false"
					v-if="dataList.length > 0">
					<uni-grid-item v-for="(item ,index) in dataList" :key="index">
						<view class="goodsImg" @click="choice(item,index)">
							<image v-if="item.inventoryLocal > 0" src="/static/images/home/xsd2x.png" mode="aspectFit"
								class='imgIcon' />
							<image v-if="item.inventoryLocal ==  0&&item.inventoryShare > 0"
								src="/static/images/home/crd2x.png" mode="aspectFit" class='imgIcon' />
							<image :src="item.url" mode="aspectFit"
								style="width:300rpx;height:300rpx;border-radius:20rpx;border: 2rpx #E7E7E7 solid;" />
							<text class="text">{{item.cname}}</text>
							<text
								style="color:#03803B;width: 300rpx;font-weight: bold;font-size: 32rpx;">￥{{checkStatus == '审核通过'?item.price:'***'}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>

				<u-empty v-if="dataList.length == 0" mode="list" icon="/static/images/home/emptylist.jpg" text='暂无数据' />
			</view>
		</view>
		<u-loadmore v-if="page.total !== 0 && dataList.length != 0" :status="status" />
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<view class="suspensionBox" @click="opensalesman">
			<u-icon name="server-fill" color="#2979ff" size="30"></u-icon>
		</view>
		<u-modal :show="salesmanShow" title="业务员联系方式" showCancelButton confirmText="拨号" cancelText="关闭"
			@confirm="clickCall" @cancel="salesmanShow=false">
			<view class="slot-content">
				<view style="margin-bottom: 10rpx;">业务员：{{salesmanName?salesmanName:''}}</view>
				<view>电话：{{phoneNumber?phoneNumber:''}}</view>
			</view>
		</u-modal>
		<!-- 更新组件 force 是否强制更新    tabbar：页面是否有原生tabbar组件-->
		<app-update ref="app_update" :force="false" :tabbar="true"></app-update>
	</view>
</template>

<script>
	import appUpdate from "@/components/yzhua006-update/app-update.vue"
	import {
		appList,
		userDept,
		validationCorpEmpty,
		isProcurement,
		brandDescList,
		brandDescDetail
	} from '@/api/home/index.js'
	import {
		shoppingCartList
	} from '@/api/shoppingCart/index.js'
	import {
		details,
		nameDetail
	} from '@/api/personalInformation/index.js'
	import {
		activityList
	} from '@/api/activity/index.js'
	import {
		getAddress
	} from '@/api/home/index.js'
	export default {
		components: {
			appUpdate
		},
		data() {
			return {
				dotsStyles: {
					backgroundColor: 'rgba(0, 0, 0, .1)',
					border: '1px #03803B solid',
					color: '#03803B',
					selectedBackgroundColor: '#03803B',
					selectedBorder: '1px #03803B solid'
				},
				dotCurrent: 0,
				groupModel: '全部',
				swiperList: [
					'@/static/images/home/sw1.jpg',
					'@/static/images/home/sw2.jpg',
					'@/static/images/home/sw3.jpg',
					'@/static/images/home/sw4.jpg'
				],
				activeStyle: {
					color: '#03803B',
					fontWeight: 'bold',
					fontSize: '28rpx'
				},
				inactiveStyle: {
					color: '#797979',
					fontSize: '28rpx'
				},
				dianjiqielist: [{
						name: '全部',
					},
					{
						name: '静音棉',
					},
					{
						name: '自修补',
					},
					{
						name: '防爆',
					}
				],
				dataList: [],
				scrollTop: 0,
				status: 'loadmore',
				page: {
					total: 0,
					size: 10,
					current: 1
				},
				checkStatus: '',
				salesmanName: '', // 业务员姓名
				phoneNumber: '', // 业务员联系电话
				salesmanShow: false, // 联系业务员弹窗
				cloudWarehouse: 0,
				showIcon: true
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			// 调用数据刷新方法
			this.refreshData();
			setTimeout(() => {
				uni.stopPullDownRefresh(); // 停止下拉刷新动画
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading'
			if (this.dataList.length < this.page.total) {
				this.page.current++
				this.onSearch()
			} else {
				this.status = 'nomore'
			}
		},
		onLoad() {
			this.page = {
				total: 0,
				size: 10,
				current: 1
			}
			this.dataList = []
			this.onSearch()
		},
		onShow() {
			this.getDetails()
			this.getBadge()
			this.$u.api.isDisable()
		},
		mounted() {
			this.$refs.app_update.update();
		},
		methods: {
			getDetails() {
				// 获取审核状态
				details().then(res => {
					this.checkStatus = res.data.checkStatus
					this.enableOrNot = res.data.enableOrNot
					uni.setStorageSync('checkStatus', res.data.checkStatus);
					uni.setStorageSync('enableOrNot', res.data.enableOrNot);
					// 查询业务员详情拿取手机号
					this.salesmanName = res.data.salesmanName
					if (!this.phoneNumber) {
						nameDetail({
							id: res.data.salesmanId
						}).then(res => {
							this.phoneNumber = res.data.phone
						})
					}
				})
			},
			getBadge() {
				// activityList({
				// 	current: 1,
				// 	size: 10,
				// 	status: 1
				// }).then(res => {
				// 	uni.setTabBarBadge({
				// 		index: 1, // tabIndex，tabBar的哪一项，从0开始
				// 		text: res.data.total.toString() // 显示的文本，超过 99 显示成 “…”
				// 	})
				// })
				shoppingCartList().then(res => {
					let num = res.data.length
					if (num) {
						uni.setTabBarBadge({
							index: 3, // tabIndex，tabBar的哪一项，从0开始
							text: num.toString() // 显示的文本，超过 99 显示成 “…”
						})
					} else {
						uni.removeTabBarBadge({
							index: 3, // tabIndex，tabBar的哪一项，从0开始
						})
					}

				})
			},
			getbrandDescList() {
				brandDescList({
					type: 'LBT',
					whetherIntegral: "0"
				}).then(res => {
					brandDescDetail({
						id: res.data.records[0].id
					}).then(res => {
						this.list3 = res.data.brandFilesList.map(item => {
							return item.url
						})
					})
				})
			},
			refreshData() {
				this.page = {
					total: 0,
					size: 10,
					current: 1
				}
				this.search = {}
				this.dataList = []
				this.onSearch()
			},
			insearchPage() {
				if (this.checkStatus != '审核通过') {
					uni.showToast({
						title: "当前用户未授权,请联系客服",
						icon: "none",
						mask: true
					});
					return
				}
				uni.switchTab({
					url: '/pages/tabBar/classification'
				});
			},
			// 车型
			clickVehicle() {
				if (this.checkStatus != '审核通过') {
					uni.showToast({
						title: "当前用户未授权,请联系客服",
						icon: "none",
						mask: true
					});
					return
				}
				this.$u.route('/pages/tabBar/vehicleModel');
			},
			swiperChange(e) {
				this.dotCurrent = e.detail.current;
			},
			// 点击联系业务员
			clickCall() {
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber,
					success: function() {
						console.log('拨打电话成功');
						this.salesmanShow = false
					},
					fail() {
						console.log('打电话失败了');
						this.salesmanShow = false
					}
				})
			},
			// 数组排序 property:根据什么属性排序
			compare(property) {
				return function(a, b) {
					var value1 = a[property]
					var value2 = b[property]
					return value1 - value2
				}
			},
			groupChange(e) {
				if (e.name == '静音棉') {
					this.originalFactory = 1
					this.selfRecovery = 0
					this.explosionProof = 0
				} else if (e.name == '自修补') {
					this.originalFactory = 0
					this.selfRecovery = 1
					this.explosionProof = 0
				} else if (e.name == '防爆') {
					this.originalFactory = 0
					this.selfRecovery = 0
					this.explosionProof = 1
				} else {
					this.originalFactory = 0
					this.selfRecovery = 0
					this.explosionProof = 0
				}
				this.page.current = 1
				this.dataList = []
				this.onSearch()

			},
			// 获取列表数据
			onSearch() {
				let obj = {}
				if (this.originalFactory) {
					obj.originalFactory = 1
				}
				if (this.selfRecovery) {
					obj.selfRecovery = 1
				}
				if (this.explosionProof) {
					obj.explosionProof = 1
				}

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				appList({
					size: this.page.size,
					current: this.page.current,
					...obj,
					...this.search,
				}).then(res => {
					this.dataList = this.dataList.concat(res.data.records)
					this.page.total = res.data.total
					if (this.dataList.length == res.data.total) {
						this.status = 'nomore'
					}
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
				})


			},
			choice(row) {
				console.log(row)
				if (this.checkStatus != '审核通过') {
					uni.showToast({
						title: "当前用户未授权,请联系客服",
						icon: "none",
						mask: true
					});
					return
				}
				// uni.$u.route('/pages/goods/details', {
				// 	id: item.id
				// });
				uni.navigateTo({
					url: '/pages/goods/details?id=' + row.id,
				});
			},
			opensalesman() {
				if (this.checkStatus != '审核通过') {
					uni.showToast({
						title: "当前用户未授权,请联系客服",
						icon: "none",
						mask: true
					});
					return
				}
				this.salesmanShow = true
			},
			swiperChange(e) {
				this.dotCurrent = e.detail.current;
			},
			inSetting() {
				uni.navigateTo({
					url: '/pages/home/setting'
				});
			},
			getAddressdata() {
				if (!uni.getStorageSync("addressData")) {
					getAddress().then(res => {
						uni.setStorageSync('addressData', JSON.stringify(res.data));
					})
				}
			},
			allClick(name) {
				this.$u.api.isDisable()
				if (name == '新建注册') {
					uni.navigateTo({
						url: '/pages/home/insurance/details'
					});
				}
				if (name == '轮胎保注册') {
					uni.navigateTo({
						url: '/pages/home/insurance/index'
					});
				}
				if (name == '保单') {
					uni.navigateTo({
						url: '/pages/home/claim/index'
					});
				}
				if (name == '商品检索') {
					uni.reLaunch({
						url: '/pages/goods/index'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-navbar--border {
		border-bottom-color: #03803B !important;
	}

	.container {
		position: relative;

		.background-image {
			position: absolute;
			/* 将图片置于组件后面 */
		}

		::v-deep .uni-searchbar {
			background-color: #03803B !important;
			pointer-events: none !important;
			user-select: none !important;
		}

		.swiper-item {
			display: block;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			background-color: #FFFFFF;
		}

		.home-card {
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			margin: 20rpx;
			padding: 20rpx;

			.goodsImg {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin: 16rpx 0;

				.text {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 300rpx;
					text-align: center;
					font-size: 24rpx;
					color: #797979;
				}
			}

			.home-card-title {
				font-weight: 500;
				font-size: 34rpx;
				color: #0F0D0D;
				margin-left: 20rpx;
				margin-bottom: 10rpx;
			}

			::v-deep .uni-grid-item {
				align-items: center;
			}

			.grid-item-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx 0;

				.uni-grid-item__box {
					justify-content: center;
				}

				.grid-item-box-img {
					display: flex;
					justify-content: center;
					align-items: center;
					// width: 100rpx;
					// height: 100rpx;
				}

				.grid-item-box-text {
					width: 100rpx;
					text-align: center;
					font-weight: 500;
					font-size: 26rpx;
					color: #6A6A6A;
				}
			}

		}
	}

	.nav-right {
		width: 32rpx;
		height: 30rpx;
	}

	.suspensionBox {
		width: 80rpx;
		height: 80rpx;
		background: #fff;
		border-radius: 50%;
		position: fixed;
		bottom: 200rpx;
		right: 40rpx;
		box-shadow: 4px 4px 8px 1px rgba(0, 0, 0, .5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card {
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		margin: 12rpx 0;
	}

	.carBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #03803B;
		font-weight: bold;
		width: 25%;
		text-align: center;
		background-color: #fff;
		height: 64rpx;
		border-radius: 36rpx;
		margin-right: 20rpx;
	}

	.brandImg {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 16rpx 0;

		.text {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 140rpx;
			text-align: center;
			font-size: 24rpx;
			color: #797979;
		}
	}

	.goodsImg {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 16rpx 0;

		.text {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 300rpx;
			text-align: center;
			font-size: 24rpx;
			color: #797979;
		}
	}

	.container {
		position: relative;
	}

	.background-image {
		position: absolute;
		z-index: -1;
		/* 将图片置于组件后面 */
	}

	.imgIcon {
		position: absolute;
		width: 100rpx;
		height: 35rpx;
		top: 16rpx;
		right: 36rpx;
	}
</style>