tire_parts_shop_applets/pages/tabBar/classification.vue

<template>
	<view>
		<view style="background-color: #E75F37;padding: 20rpx;">
			<u-search placeholder="请输入商品名称" bgColor="#fff" searchIconColor='#E75F37' :actionStyle="{color:'#FFF'}"
				:searchIconSize='24' v-model="name" @search="custom()" @custom="custom()"></u-search>
		</view>
		<scroll-view @scrolltolower="lowerBottom" scroll-y="true" style="max-height: 92vh;" @scroll="scroll"
			:scroll-top="scrollTop">
			<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 :show="item"
						@close="tagClose(index)" shape="circle" @click.stop="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?'#E75F37':'#fff'" borderColor='#E75F37'
						:color="item.checked?'#fff':'#E75F37'" @click="checkboxChange(item.label,index)" size="mini">
					</u-tag>
				</view>
				<view style="margin:0 6rpx;">
					<u-tag text="品牌" bgColor="#fff" borderColor='#E75F37' color="#E75F37" @click="openBrand"
						size="mini">
					</u-tag>
				</view>
				<view style="margin:0 6rpx;width: 2rpx;height: 43rpx;background: #E75F37;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>
			<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 class="">
						<view style="display: flex;align-items: center;">
							<view class="cardTitle">
								<view class="cardName">
									{{item.cname}}
								</view>
								<view class="cardRetailPrice">
									<view v-if="item.suggestedRetailPrice">
										建议零售价:￥{{item.suggestedRetailPrice}}
									</view>
									
								</view>
							</view>
							<image src="/static/images/tabBar/carIcon@2x.png" @click.stop="shoppingCartfun(item)"
								style="width: 54rpx;height: 54rpx;margin-left: 32rpx;" mode="scaleToFill">
							</image>
						</view>

						<view style="display: flex;align-items: center;">
							<view class="cardTab">
								<image src="/static/images/tabBar/280@2x.png" style="width: 142rpx;height: 36rpx;"
									mode="scaleToFill">
								</image>
								<image src="/static/images/tabBar/6@2x.png"
									style="width: 78rpx;height: 20rpx;position: absolute;left:10rpx;top:8rpx"
									mode="scaleToFill">
								</image>
								<view class="cardKc">
									{{Number(item.inventoryLocal) > 10?'充足':Number(item.inventoryLocal)}}
								</view>
							</view>
							<view>
								<view class="cardTab" style="margin-left: 10rpx;">
									<image src="/static/images/tabBar/2801@2x.png" style="width: 142rpx;height: 36rpx;"
										mode="scaleToFill">
									</image>
									<image src="/static/images/tabBar/7@2x.png"
										style="width: 78rpx;height: 20rpx;position: absolute;left:10rpx;top:8rpx"
										mode="scaleToFill">
									</image>
									<view class="cardKc">
										{{Number(item.inventoryShare) > 10?'充足':Number(item.inventoryShare)}}
									</view>
								</view>

							</view>
							<view class="cardPrice">
								￥{{checkStatus == '通过'?item.mallPrice:'***'}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-if="page.total == 0" mode="list" icon="/static/images/tabBar/emptylist.jpg" text='暂无数据' />
			<u-loadmore v-if="page.total !== 0 && dataList.length != 0" :status="status" />
		</scroll-view>
		<u-back-top :scroll-top="old.scrollTop" @tap="goTop"></u-back-top>
		<uni-popup ref="popup" background-color="#fff" type="bottom">
			<view style="padding: 40rpx 0 0 0;">
				<scroll-view scroll-y="true" style="max-height: 74vh;">
					<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[0].url" 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 v-if="userInfo.tenant_id != '000000'" 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>
</template>
<script>
	import {
		listAll2,
		goodsList,
		goodsListNew
	} from '@/api/tabBar/classification.js'
	import {
		details,
		nameDetail
	} from '@/api/views/personalInformation/index.js'
	import {
		appDetail,
		addToCart,
		appDetailNew,
	} from '@/api/tabBar/homeNew.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'
				},
				checkStatus: null,
				recentSearches: [], // 搜索数据
				searchDeleteShow: false, // 搜索全部删除弹窗
				form: {}, // 详情数据
				checkboxValue: [], // 多选
				salesmanName: '', // 业务员姓名
				phoneNumber: '', // 业务员联系电话
				salesmanShow: false, // 联系业务员弹窗
				userInfo: {}, // 当前用户数据
			}
		},
		mounted() {},
		onLoad(data) {
			listAll2({
				type: 'PP',
				enableOrNot: '1',
				whetherIntegral: '0'
			}).then(res => {
				console.log(res.data.sort(this.compare('sort')), 111111)
				let arr = []
				arr = res.data.sort(this.compare('sort'))
				this.tabbarTwo = arr
				this.page = {
					total: 0,
					size: 10,
					current: 1
				}
				this.dataList = []
				if (uni.getStorageSync('cname')) {
					this.$set(this.search, 'cname', JSON.parse(JSON.stringify(uni.getStorageSync('cname'))))
					uni.removeStorage('cname')
					this.page = {
						total: 0,
						size: 10,
						current: 1
					}
					this.dataList = []
					this.onSearch()
				} else {
					this.name = null
					if (this.current == -1) {
						this.current = 0
					}
					this.search = {
						whether: '0',
					}
					this.onSearch()
				}
			})
		},
		onShow() {
			this.getUpdate()
			// 获取审核状态
			details().then(res => {
				this.checkStatus = res.data.checkStatus
				uni.setStorageSync('checkStatus', res.data.checkStatus);
				// if (this.checkStatus != '通过') {
				// 	uni.showToast({
				// 		title: "当前用户未授权,请联系客服",
				// 		icon: "none",
				// 		mask:true
				// 	});
				// 	// uni.switchTab({
				// 	// 	url: '/pages/tabBar/home'
				// 	// })
				// 	return
				// }
				this.salesmanName = res.data.salesmanName
				// 查询业务员详情拿取手机号
				if (!this.phoneNumber) {
					nameDetail({
						id: res.data.salesmanId
					}).then(res => {
						this.phoneNumber = res.data.phone
					})
				}
			})
			this.userInfo = uni.getStorageSync('userInfo')
			// 获取最近搜索数据
			if (uni.getStorageSync('recentSearches')) {
				this.recentSearches = uni.getStorageSync('recentSearches').slice(0, 8);
			}
		},
		methods: {
			getUpdate() {
				const updateManager = uni.getUpdateManager();
				updateManager.onCheckForUpdate(function(res) {
					// 请求完新版本信息的回调
					if (res.hasUpdate) {
						updateManager.onUpdateReady(function() {
							uni.showModal({
								title: '更新提示',
								content: '新版本已经准备好，是否重启应用？',
								success: function(res) {
									if (res.confirm) {
										// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
										updateManager.applyUpdate();
									}
								}
							});
						});

						updateManager.onUpdateFailed(function() {
							// 新的版本下载失败
							uni.showModal({
								title: '已经有新版本了哟~',
								content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'
							});
						});
					}
				});
			},
			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'
				}
				this.page = {
					total: 0,
					size: 10,
					current: 1
				}
				this.dataList = []
				this.onSearch()
			},
			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.page = {
					total: 0,
					size: 10,
					current: 1
				}
				this.dataList = []
				this.onSearch()
			},
			// 加入购物车
			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
				});
				if (uni.getStorageSync('whether_openShare') == 1) {
					// 获取详情数据
					appDetailNew({
						id: row.id
					}).then(res => {
						if (res.data.type == 0) {
							this.form = res.data.thisLocality
						} else {
							this.form = res.data.offsite
						}
						addToCart({
							...this.form,
							whetherIntegral: '0',
							detailsText: ''
						}).then(res => {
							uni.showToast({
								title: "加入购物车成功",
								icon: "none",
								mask: true,
								duration: 2500
							});
							uni.switchTab({
								url: '/pages/tabBar/shoppingCart',
							})
							uni.hideLoading();
						}).catch(err => {
							uni.hideLoading();
						})
					})
				} else {
					// 获取详情数据
					appDetail({
						id: row.id
					}).then(res => {
						if (res.data.type == 0) {
							this.form = res.data.thisLocality
						} else {
							this.form = res.data.offsite
						}
						addToCart({
							...this.form,
							whetherIntegral: '0',
							detailsText: ''
						}).then(res => {
							uni.showToast({
								title: "加入购物车成功",
								icon: "none",
								mask: true,
								duration: 2500
							});
							uni.switchTab({
								url: '/pages/tabBar/shoppingCart',
							})
							uni.hideLoading();
						}).catch(err => {
							uni.hideLoading();
						})
					})
				}


			},
			// 搜索全部删除
			searchDeletefun() {
				this.recentSearches = []
				uni.setStorageSync('recentSearches', this.recentSearches);
				this.searchDeleteShow = false
			},
			// 点击搜索
			tagSearches(name) {
				this.name = name
				this.search.cname = name
				this.custom()
			},
			// 最近搜索点击关闭按钮
			tagClose(index) {
				this.recentSearches.splice(index, 1)
				uni.setStorageSync('recentSearches', this.recentSearches.slice(0, 8));
			},
			selectProduct(item) {
				if (this.checkStatus != '通过') {
					uni.showToast({
						title: "当前用户未授权,请联系客服",
						icon: "none",
						mask: true
					});
					return
				}
				uni.$u.route('/pages/views/buyGoods/commodityDetails', {
					id: item.id
				});
			},
			inSearch() {
				// uni.navigateTo({
				// 	url: `/pages/tabBar/searchPage?searchData=${this.name?this.name:''}`
				// })
			},
			lowerBottom() {
				this.status = 'loading'
				if (this.dataList.length < this.page.total) {
					this.page.current++
					this.onSearch()
				} else {
					this.status = 'nomore'
				}
			},
			// 搜索
			custom() {
				if (this.userInfo.tenant_id == '000000') {
					uni.showToast({
						title: '请点右下角<我的> 授权登录!',
						icon: 'none'
					});
					return
				}
				if (this.checkStatus != '通过') {
					uni.showToast({
						title: "当前用户未授权,请联系客服",
						icon: "none",
						mask: true
					});
					return
				}
				this.current = -1
				this.page = {
					total: 0,
					size: 10,
					current: 1
				}
				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.cname = this.name
				this.dataList = []
				this.onSearch()
			},
			// 左侧选择
			swichMenu(row, index) {
				// this.current = index;
				this.page = {
					total: 0,
					size: 10,
					current: 1
				}
				this.search.brandId = row.id
				this.search.cname = this.name ? this.name : null
				this.dataList = []
				this.onSearch()
				this.$refs.popup.close()
			},
			// 列表数据获取
			onSearch() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				if (uni.getStorageSync('whether_openShare') == 1) {
					goodsListNew({
						size: this.page.size,
						current: this.page.current,
						...this.search,
						whetherIntegral: '0'
					}).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();
					})
				} else {
					goodsList({
						size: this.page.size,
						current: this.page.current,
						...this.search,
						whetherIntegral: '0'
					}).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();
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.suspensionBox {
		width: 80rpx;
		height: 80rpx;
		background: #fff;
		border-radius: 50%;
		position: fixed;
		top: 92%;
		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;

		.cardImg {
			margin: 31rpx;
			width: 180rpx;
			height: 180rpx;
			border: 2rpx solid #E7E7E7;
		}

		.cardName {
			font-weight: 400;
			font-size: 24rpx;
			height: 64rpx;
			width: 400rpx;
			color: #797979;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			// margin-bottom: 28rpx;
		}

		.cardTitle {
			font-weight: 400;
			font-size: 24rpx;
			width: 400rpx;
			.cardRetailPrice {
				display: flex;
				color: #909399;
				font-size: 22rpx;
				height: 28rpx;
			}
		}

		.cardTab {
			position: relative;
			top: 4rpx;

			.cardKc {
				text-align: center;
				position: absolute;
				right: 0rpx;
				top: 3rpx;
				font-size: 22rpx;
				color: #FFFFFF;
				font-weight: 500;
				width: 49rpx;
				height: 26rpx;
			}
		}

		.cardPrice {
			margin-left: 10rpx;
			color: #E75F37;
			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>