tire_parts_shop_applets/pages/integralMall/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: 82vh;" @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="tag-calss">
				<view style="margin:0 12rpx;">
					<u-tag text="品牌" bgColor="#fff" borderColor='#E75F37' color="#E75F37" @click="openBrand"
						size="mini">
					</u-tag>
				</view>
				<view style="margin:0 12rpx;width: 2rpx;height: 43rpx;background: #E75F37;border-radius: 1rpx;"></view>
				<view style="margin:0 12rpx;">
					<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="cardName">
								{{item.cname}}
							</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">
								￥{{item.mallPrice}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="page.total !== 0" :status="status" />
		</scroll-view>
		<u-back-top :scroll-top="old.scrollTop" @tap="goTop" bottom="300rpx"></u-back-top>
		<uni-popup ref="popup" background-color="#fff" type="bottom">
			<view>
				<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>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		listAll2,
		goodsList
	} from '@/api/tabBar/classification.js'
	import {
		details,
		nameDetail
	} from '@/api/views/personalInformation/index.js'
	import {
		appDetail,
		addToCart
	} from '@/api/tabBar/home.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, // 联系业务员弹窗
			}
		},
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		props: {
			keyword: {
				type: String
			}
		},
		created() {
			// 获取最近搜索数据
			if (uni.getStorageSync('recentSearches')) {
				this.recentSearches = uni.getStorageSync('recentSearches').slice(0, 8);
			}
			// 获取审核状态
			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
					})
				}
			})
			listAll2({
				type: 'PP',
				enableOrNot: '1',
				whetherIntegral: '1'
			}).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 = []
				let searchCache = JSON.parse(JSON.stringify(uni.getStorageSync('homeSearch')))
				uni.removeStorageSync('homeSearch')
				if (searchCache.cname) {
					this.name = searchCache.cname
					this.custom()
				} else {
					this.name = null
					if (this.current == -1) {
						this.current = 0
					}
					this.search = {
						// brandId: this.tabbarTwo[this.current].id,
						whether: '0',
					}
					this.onSearch()
				}
			})
		},
		methods: {
			searchData(data) {
				console.log(data)
				this.name = data
				this.custom()
			},
			openBrand() {
				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.checkboxValue = []
				this.search = {
					whether: '0'
				}
				this.page = {
					total: 0,
					size: 10,
					current: 1
				}
				this.dataList = []
				this.onSearch()
			},
			checkboxChange(value) {
				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) {
				console.log(row, 166);
				if (row.inventory == 0) {
					uni.showToast({
						title: "当前商品库存为零",
						icon: "none",
						mask: true,
						duration: 2500
					});
					return
				}
				// 获取详情数据
				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: '1',
						detailsText: ''
					}).then(res => {
						uni.showToast({
							title: "加入购物车成功",
							icon: "none",
							mask: true,
							duration: 2500
						});
						this.$emit('goTab', 2)
					})
				})

			},
			// 搜索全部删除
			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) {
				uni.$u.route('/pages/integralMall/buyGoods/commodityDetails', {
					id: item.id
				});
			},
			// 点击搜索
			inSearch() {
				uni.navigateTo({
					url: `/pages/integralMall/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() {
				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
				});
				goodsList({
					size: this.page.size,
					current: this.page.current,
					...this.search,
					whetherIntegral: "1"
				}).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>
	.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;
		}
	}

	.tag-calss {
		display: flex;
		padding: 8rpx 63rpx 18rpx 63rpx;
		background-color: #fff;
		justify-content: flex-end;

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

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

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

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

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