tire_parts_shop_applets/pages/integralMall/classification.vue

<template>
	<view class="containerMall">
		<view class="u-wrap">
			<view class="u-search-box">
				<u-tabs :list="tabbar" @click="click" lineColor="#fff" :activeStyle="{ color: '#fff' }"
					:inactiveStyle="{ color: '#ffffff80' }">></u-tabs>
				<view style="padding: 10rpx; font-size: 40rpx;">
					<u-search placeholder="请输入商品名称" :actionStyle="{ color: '#fff' }" v-model="name" @search="custom"
						@custom="custom" :animation="false"></u-search>
				</view>
			</view>
			<view class="recentSearches" v-if="recentSearches.length != 0">
				<view class="recentSearches-head">
					<view class="recentSearches-headLeft">
						<u-icon name="clock"></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"></u-icon>
					</view>
				</view>
				<view class="recentSearches-text">
					<u-tag ref="myElement" v-for="(item,index) in recentSearches" :key="index" :text="item"
						bgColor="#e7e7e7" color="#000" borderColor="#e7e7e7" size="medium" closable :show="item"
						@close="tagClose(index)" @click.stop="tagSearches(item)"></u-tag>
				</view>
			</view>
			<view style="margin: 20rpx 10rpx;display: flex;align-items: center;justify-content: flex-end;">
				<view style="margin-left: 20rpx;"><u-button type="warning" size="small" text="清空"
						@click="emptyfun"></u-button></view>
			</view>
			<view class="u-menu-wrap">
				<view class="u-tab-view">
					<view v-for="(item,index) in tabbarTwo" :key="index" class="u-tab-item"
						:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
						<text class="u-line-1" style="text-align: center;">{{item.cname}}</text>
					</view>
				</view>
				<scroll-view @scrolltolower="lowerBottom" scroll-y="true" class="scrollHeight">
					<view class="right-box">
						<view class="page-view">
							<view class="class-item">
								<!-- <view class="item-title">
									<text>{{item.type}}</text>
								</view> -->
								<view class="item-container">
									<view class="thumb" style="display: flex;justify-content: space-between;"
										v-for="(itemTwo, indexTwo) in dataList" :key="indexTwo"
										@click="selectProduct(itemTwo)">
										<view>
											<image v-for="(itemThree,indexThree) in itemTwo.filesList" :key="indexThree"
												v-if="itemThree.version === '0'" class="item-menu-image"
												:src="itemThree.url">
											</image>
										</view>
										<view v-if='Number(itemTwo.inventory)>0'
											style="margin-left: 10rpx;width: 368rpx;">
											<view class="thumb-text">
												{{itemTwo.cname}}
											</view>
											<view
												style="display: flex;justify-content: space-between;align-items: center;">
												<view>
													<view style="color: #707070;font-size: 24rpx;">{{Number(itemTwo.mallPrice)}}
													</view>
													<view style="color: #FD4B09;font-size: 24rpx;">
														库存:{{Number(itemTwo.inventory) > 10?'充足':Number(itemTwo.inventory)}}
													</view>
												</view>
												<view
													style="padding: 8rpx;border-radius: 50%;background: #edeef2;display: flex;align-items: center;justify-content: center;"
													@click.stop="shoppingCartfun(itemTwo)">
													<u-icon name="shopping-cart" color="#dd4919" size="28"></u-icon>
												</view>
											</view>
										</view>
										<view v-if='Number(itemTwo.inventory)==0'
											style="margin-left: 10rpx;width: 368rpx;color: #909399;">
											<view class="thumb-text">
												{{itemTwo.cname}}
											</view>
											<view
												style="display: flex;justify-content: space-between;align-items: center;">
												<view>
													<view style="color: #909399;font-size: 24rpx;">{{Number(itemTwo.mallPrice)}}
													</view>
													<view style="color: #909399;font-size: 24rpx;">
														库存:{{Number(itemTwo.inventory) > 10?'充足':Number(itemTwo.inventory)}}
													</view>
												</view>
												<view
													style="padding: 8rpx;border-radius: 50%;background: #edeef2;display: flex;align-items: center;justify-content: center;"
													@click.stop="shoppingCartfun(itemTwo)">
													<u-icon name="shopping-cart" color="#909399" size="28"></u-icon>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<u-loadmore v-if="page.total !== 0" :status="status" />
					</view>
				</scroll-view>
			</view>
		</view>

		<u-modal :show="searchDeleteShow" content="确认删除搜索记录吗？" showCancelButton @confirm="searchDeletefun"
			@cancel="searchDeleteShow = false" ref="uModal" :asyncClose="true">
		</u-modal>
	</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 {
				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, // 联系业务员弹窗
			}
		},
		created() {
			// 获取最近搜索数据
			if (uni.getStorageSync('recentSearches')) {
				this.recentSearches = uni.getStorageSync('recentSearches');
			}
			// 获取审核状态
			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
					})
				}
			})
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			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()

				}
				uni.hideLoading();
			}).catch(err => {
				uni.hideLoading();
			})

		},
		mounted() {

		},
		methods: {
			// 数组排序 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);
			},
			selectProduct(item) {
				uni.$u.route('/pages/integralMall/buyGoods/commodityDetails', {
					id: item.id
				});
			},
			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);
					uni.setStorageSync('recentSearches', this.recentSearches);
				}
				delete this.search.brandId
				this.search.cname = this.name
				this.dataList = []
				this.onSearch()
			},
			// 左侧选择
			swichMenu(index) {
				this.current = index;
				this.page = {
					total: 0,
					size: 10,
					current: 1
				}
				this.search.brandId = this.tabbarTwo[this.current].id
				this.search.cname = this.name ? this.name : null
				this.dataList = []
				this.onSearch()
			},
			// 列表数据获取
			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>
	.suspensionBox {
		width: 80rpx;
		height: 80rpx;
		background: #fff;
		border-radius: 50%;
		position: fixed;
		top: 92%;
		right: 2%;
		box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, .5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.searchBox {
		background-color: antiquewhite;
		display: flex;
		width: 400px;
		flex-wrap: wrap;

		.searchItem {
			background-color: aliceblue;
			height: 20px;
			margin: 5px 10px;
			padding: 5px;
			max-width: 200px;
			overflow: hidden;
			text-overflow: ellipsis; //溢出用省略号显示
			white-space: nowrap; //溢出不换行
		}

		.searchBtn {
			height: 20px;
			width: 40px;
			text-align: center;
			margin: 10px;
			border-radius: 50%;
			background-color: #fff;
			line-height: 20px;
			cursor: pointer;
		}

	}

	.recentSearches {
		padding: 10rpx 20rpx;

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

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

			.recentSearches-headRight {}
		}

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

			.recentSearches-textWidth {
				// width: 140rpx;
			}
		}
	}

	.submitBar {
		width: 100%;
		font-size: 32rpx;
		color: #000;
		text-align: center;
		// border-top: 1rpx solid #f2f2f6;
	}

	.u-wrap {
		height: calc(100vh - 85px);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		padding: 10rpx;
		padding-top: 0;
		background-color: #FD4B09;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.data-v-1a326067 {
		font-size: 40rpx;
	}

	.u-tab-view {
		width: 200rpx;
		overflow-x: scroll;
		white-space: nowrap;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;

		white-space: normal;
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		// display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid #FD4B09;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	.u-tab-view {
		height: 100%;
	}

	.right-box {
		width: 100%;
		background-color: rgb(250, 250, 250);
		padding-bottom: 20rpx;
	}

	.page-view {
		padding: 16rpx;
	}

	.class-item {
		// margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	// .class-item:last-child {
	// 	min-height: 100vh;
	// }

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		width: 33.33333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.thumb {
		width: 100%;
		align-items: center;
		margin: 10rpx auto;
	}

	.thumb-text {
		font-size: 26rpx;
		white-space: normal;
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.thumb ::v-deep .u-cell__body {
		padding: 20rpx 0;
	}

	.item-menu-image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 20rpx;
	}

	::v-deep .u-popup {
		flex: 0;
	}

	.containerMall {
		height: calc(100vh - calc(50px + env(safe-area-inset-bottom)));
	}
</style>