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

<template>
	<view class="container">
		<view style="background-color: #03803B;">
			<uni-search-bar bgColor="#fff" v-model="name" placeholder="请输入综合查询" @confirm="custom"
				@clear="custom" :radius="100" cancelButton="none">
			</uni-search-bar>
		</view>
		<view class="recentSearches" v-if="recentSearches.length != 0">
			<view class="recentSearches-head">
				<view class="recentSearches-headLeft">
					<u-icon name="clock" color="#C4C4C4"></u-icon>
					<view style="font-size: 26rpx;margin-left: 6rpx;">最近搜索</view>
				</view>
				<view class="recentSearches-headRight">
					<u-icon name="trash" size="20px" @click="searchDeleteShow = true" color="#C4C4C4"></u-icon>
				</view>
			</view>
			<view class="recentSearches-text">
				<u-tag v-for="(item,index) in recentSearches" :key="index" :text="item" bgColor="#EFEFEF"
					color="#414141" borderColor="#EFEFEF" size="medium" closable @close="tagClose(index)" shape="circle"
					@click="tagSearches(item)"></u-tag>
			</view>
			<u-modal :show="searchDeleteShow" content="确认删除搜索记录吗？" showCancelButton @confirm="searchDeletefun"
				@cancel="searchDeleteShow = false" ref="uModal" :asyncClose="true">
			</u-modal>
		</view>
		<view class="tagClass">
			<view v-for="(item, index) in radios" :key="index" style="margin:0 6rpx;">
				<u-tag :text="item.label" :bgColor="item.checked?'#03803B':'#fff'" borderColor='#03803B'
					:color="item.checked?'#fff':'#03803B'" @click="checkboxChange(item.label,index)" size="mini">
				</u-tag>
			</view>
			<view style="margin:0 6rpx;">
				<u-tag text="品牌" :bgColor="search.brandId?'#03803B':'#fff'" borderColor='#03803B' :color="search.brandId?'#fff':'#03803B'" @click="openBrand" size="mini">
				</u-tag>
			</view>
			<view style="margin:0 6rpx;width: 2rpx;height: 43rpx;background: #03803B;border-radius: 1rpx;"></view>
			<view style="margin:0 6rpx;">
				<u-tag text="重置" bgColor="#F8AA09" borderColor='#F8AA09' color="#fff" @click="emptyfun" size="mini">
				</u-tag>
			</view>
		</view>
		<z-paging ref="paging" v-model="dataList" @query="getList" :fixed="false" :auto-show-back-to-top="true"
			:empty-view-text="search.searchCriteria ? '未找到相关结果' : '暂无数据'" :hide-empty-view="false"
			:auto-show-system-loading="true">
			<view>
				<view v-for=" (item, index) in dataList" :key="index">
					<view class="card" @click="selectProduct(item)">
						<image :src="item.url" class="cardImg" mode="scaleToFill">
						</image>
						<view style="margin-left: 20rpx;">
							<view style="display: flex;align-items: center;">
								<view class="cardTitle">
									<text class="cardName">
										{{item.cname}}
									</text>
								</view>
								<image src="/static/images/goods/carIcon@2x.png" @click.stop="shoppingCartfun(item)"
									style="width: 54rpx;height: 54rpx;margin-left: 80rpx;" mode="scaleToFill">
								</image>
							</view>

							<view style="display: flex;justify-content: space-between;align-items: center;">
								<!-- <view class="cardTab">
									<image src="/static/images/goods/280@2x.png" style="width: 142rpx;height: 36rpx;"
										mode="scaleToFill">
									</image>
									<image src="/static/images/goods/6@2x.png"
										style="width: 78rpx;height: 20rpx;position: absolute;left:10rpx;top:10rpx"
										mode="scaleToFill">
									</image>
									<view class="cardKc">
										{{Number(item.balanceQuantity) > 10?'充足':Number(item.balanceQuantity)}}
									</view>
								</view>
								<view class="cardTab" style="margin-left: 10rpx;">
									<image src="/static/images/goods/2801@2x.png" style="width: 142rpx;height: 36rpx;"
										mode="scaleToFill">
									</image>
									<image src="/static/images/goods/7@2x.png"
										style="width: 78rpx;height: 20rpx;position: absolute;left:10rpx;top:10rpx"
										mode="scaleToFill">
									</image>
									<view class="cardKc">
										{{Number(item.total) > 10?'充足':Number(item.total)}}
									</view>
								</view> -->
								<view style="color:#797979;">
									库存：{{Number(item.balanceQuantity) > 10?'充足':Number(item.balanceQuantity)}}
								</view>
								<view class="cardPrice">
									￥{{checkStatus == '审核通过'?item.price:'***'}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<view>
			<uni-popup ref="popup" background-color="#fff" type="bottom">
				<view style="padding: 40rpx 0 120rpx 0;">
					<scroll-view scroll-y="true" style="max-height: 60vh;">
						<uni-row>
							<uni-col :span="6" v-for="(item,index) in tabbarTwo" :key="index">
								<view class="brandImg" @click="swichMenu(item,index)">
									<image :src="item.brandFilesList.length?item.brandFilesList[0].url:null"
										mode="aspectFit"
										style="width:110rpx;height: 110rpx;border-radius:6rpx;border: 2rpx solid #EBEBEB;" />
									<text class='text'>{{item.cname}}</text>
								</view>
							</uni-col>
						</uni-row>
					</scroll-view>
				</view>
			</uni-popup>
			<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>
		</view>

	</view>
</template>
<script>
	import {
		listAll2,
		goodsList,
		cloudWarehouseList
	} from '@/api/goods/index.js'
	import {
		details,
		nameDetail
	} from '@/api/personalInformation/index.js'
	import {
		appDetail,
		addToCart,
	} from '@/api/home/index.js'
	import {
		isProcurement
	} from '@/api/goods/index.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				radios: [{
						label: '静音棉',
						checked: false,
					},
					{
						label: '自修补',
						checked: false,
					},
					{
						label: '防爆',
						checked: false,
					},
				],
				current: 0, // 预设当前项的值
				tabbar: [],
				dataList: [],
				show: false,
				status: 'loadmore',
				filesList: [],
				tabbarTwo: [],
				name: '',
				page: {
					total: 0,
					size: 10,
					current: 1
				},
				search: {
					whether: '0',
					brandId:null,
				},
				checkStatus: null,
				recentSearches: [], // 搜索数据
				searchDeleteShow: false, // 搜索全部删除弹窗
				form: {}, // 详情数据
				checkboxValue: [], // 多选
				salesmanName: '', // 业务员姓名
				phoneNumber: '', // 业务员联系电话
				salesmanShow: false, // 联系业务员弹窗
				cloudWarehouse: 0,
				showIcon: true
			}
		},
		mounted() {},
		onLoad(data) {
			// uni.showToast({
			// 	title: "开发中",
			// 	icon: "none",
			// });
			listAll2({
				type: 'PP',
				enableOrNot: '1',
				whetherIntegral: '0'
			}).then(res => {
				let arr = []
				arr = res.data.sort(this.compare('sort'))
				this.tabbarTwo = arr
			})
		},
		onShow() {
			// 获取审核状态
			details().then(res => {
				this.checkStatus = res.data.checkStatus
				uni.setStorageSync('checkStatus', res.data.checkStatus);
				this.salesmanName = res.data.salesmanName
				// 查询业务员详情拿取手机号
				if (!this.phoneNumber) {
					nameDetail({
						id: res.data.salesmanId
					}).then(res => {
						this.phoneNumber = res.data.phone
					})
				}
			})
			// 获取最近搜索数据
			if (uni.getStorageSync('recentSearches')) {
				this.recentSearches = uni.getStorageSync('recentSearches').slice(0, 8);
			}
		},
		methods: {
			opensalesman() {
				if (this.checkStatus != '审核通过') {
					uni.showToast({
						title: "当前用户未授权,请联系客服",
						icon: "none",
						mask: true
					});
					return
				}
				this.salesmanShow = true
			},
			openBrand() {
				if (this.checkStatus != '审核通过') {
					uni.showToast({
						title: "当前用户未授权,请联系客服",
						icon: "none",
						mask: true
					});
					return
				}
				this.$refs.popup.open('bottom')
			},
			goTop(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
					this.old.scrollTop = 0
				});
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			// 数组排序 property:根据什么属性排序
			compare(property) {
				return function(a, b) {
					var value1 = a[property]
					var value2 = b[property]
					return value1 - value2
				}
			},
			// 点击联系业务员
			clickCall() {
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			// 清空搜索条件
			emptyfun() {
				this.name = ''
				this.current = -1
				this.radios.map((item, index) => {
					item.checked = false
				});
				this.checkboxValue = []
				this.search = {
					whether: '0',
					brandId:null
				}
				this.$refs.paging.reload()
			},
			checkboxChange(value, index) {
				if (this.checkStatus != '审核通过') {
					uni.showToast({
						title: "当前用户未授权,请联系客服",
						icon: "none",
						mask: true
					});
					return
				}
				this.radios.map((item, index) => {
					item.checked = item.label === value ? true : false;
				});
				this.checkboxValue = value
				this.search.originalFactory = null
				this.search.selfRecovery = null
				this.search.explosionProof = null
				if (this.checkboxValue.indexOf('静音棉') != -1) {
					this.search.originalFactory = 1
				}
				if (this.checkboxValue.indexOf('自修补') != -1) {
					this.search.selfRecovery = 1
				}
				if (this.checkboxValue.indexOf('防爆') != -1) {
					this.search.explosionProof = 1
				}
				this.$refs.paging.reload()
			},
			// 加入购物车
			shoppingCartfun(row) {
				if (this.checkStatus != '审核通过') {
					uni.showToast({
						title: "当前用户未授权,请联系客服",
						icon: "none",
						mask: true
					});
					return
				}
				if (row.inventory == 0) {
					uni.showToast({
						title: "当前商品库存为零",
						icon: "none",
						mask: true,
						duration: 2500
					});
					return
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				appDetail({
					id: row.id
				}).then(res => {
					let obj = {
						...res.data,
						goodsNum: 1
					}
					addToCart(obj).then(res => {
						uni.showToast({
							title: "加入购物车成功",
							icon: "none",
						});
						uni.hideLoading();
					}).catch(err => {
						uni.hideLoading();
					})

				})


			},
			// 搜索全部删除
			searchDeletefun() {
				this.recentSearches = []
				uni.setStorageSync('recentSearches', this.recentSearches);
				this.searchDeleteShow = false
			},
			// 点击搜索
			tagSearches(name) {
				this.name = name
				this.search.searchCriteria = name

				this.$refs.paging.reload()
			},
			// 最近搜索点击关闭按钮
			tagClose(index) {
				this.recentSearches.splice(index, 1)
				uni.setStorageSync('recentSearches', this.recentSearches.slice(0, 8));
			},
			selectProduct(row) {
				if (this.checkStatus != '审核通过') {
					uni.showToast({
						title: "当前用户未授权,请联系客服",
						icon: "none",
						mask: true
					});
					return
				}
				uni.navigateTo({
					url: '/pages/goods/details?id=' + row.id,
				});
			},
			// 搜索
			custom() {
				if (this.checkStatus != '审核通过') {
					uni.showToast({
						title: "当前用户未授权,请联系客服",
						icon: "none",
						mask: true
					});
					return
				}
				if (this.name) {
					this.recentSearches.unshift(this.name)
					// 去重
					this.recentSearches = this.recentSearches.filter((item, index) => this.recentSearches.indexOf(item) ===
						index).slice(0, 8);
					uni.setStorageSync('recentSearches', this.recentSearches.slice(0, 8));
				}
				delete this.search.brandId
				this.search.searchCriteria = this.name
				this.$refs.paging.reload()
			},
			// 左侧选择
			swichMenu(row, index) {
				this.search.brandId = row.id
				this.search.searchCriteria = this.name ? this.name : null
				this.$refs.paging.reload()
				this.$refs.popup.close()
			},
			async getList(pageNo, pageSize) {
				try {
					const obj = {
						...this.search,
						current: pageNo,
						size: pageSize
					}
					const res = await goodsList(obj)
					this.$refs.paging.complete(res.data.records)
				} catch (e) {
					this.$refs.paging.complete(false)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .scroll-view {
	// 	flex: 1;
	// 	height: 100%;
	// 	/* 关键样式：防止内容被裁剪 */
	// 	overflow-anchor: none;
	// }
	::v-deep .uni-searchbar__cancel {
		color: #fff;
	}

	.container {
		// #ifdef H5
		height: calc(100vh - var(--nav-bar, 44px) - var(--tab-bar, 50px));
		// #endif
		// #ifdef APP-PLUS
		height: 100vh;
		// #endif
		display: flex;
		flex-direction: column;
	}

	.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;
	}

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

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

	.tagClass {
		display: flex;
		padding: 8rpx 63rpx 18rpx 63rpx;
		background-color: #fff;
		justify-content: space-around;

		::v-deep .u-tag--mini {
			font-size: 28rpx;
			line-height: 22px;
			padding: 0rpx 24rpx;
		}
	}

	.card {
		display: flex;
		// align-items: center;
		background-color: #fff;
		width: 100%;
		margin-top: 28rpx;
		padding: 20rpx;

		.cardImg {
			width: 120rpx;
			height: 120rpx;
			border: 1rpx solid #E7E7E7;
			border-radius: 6rpx;
		}

		.cardName {
			font-weight: 400;
			font-size: 26rpx;
			line-height: 1.5;
			width: 400rpx;
			color: #797979;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.cardTitle {
			font-weight: 400;
			font-size: 24rpx;
			width: 400rpx;
			height: 80rpx;

			.cardRetailPrice {
				display: flex;
				color: #909399;
				font-size: 22rpx;
				height: 28rpx;
			}
		}

		.cardTab {
			position: relative;
			top: 6rpx;
			height: 36rpx;
			.cardKc {
				text-align: center;
				position: absolute;
				right: 0rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 22rpx;
				color: #FFFFFF;
				font-weight: 500;
				width: 50rpx;
				line-height: 36rpx;
				height: 36rpx;
			}
		}

		.cardPrice {
			margin-right: 60rpx;
			color: #03803B;
			font-size: 32rpx;
			font-weight: 500;
		}
	}

	.recentSearches {
		padding: 8rpx 12rpx;
		background-color: #fff;

		.recentSearches-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #C4C4C4;

			.recentSearches-headLeft {
				display: flex;
				align-items: center;
			}

			.recentSearches-headRight {}
		}

		.recentSearches-text {
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;

			::v-deep .u-tag__close {
				z-index: 99 !important;
			}
		}
	}
</style>