tire_parts_shop_applets/pages/tabBar/classification.vue

<template>
	<view>
		<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>
					<view class="searchBox" id="searchDis">
						<view v-for="(item,index) in searcheslist" :key="index" class="searchItem" >{{item}}</view>
					</view>
					<view class="searchBox">
						<view v-for="(item,index) in recentSearches" :key="index" class="searchItem">{{ item }}</view>
						<view class="searchBtn" v-if="btnShow" @click="partcahnge">
						    <text v-if="part">展开</text>
						    <text v-else>收起</text>
						</view>
					</view>
				</view> -->

				<view class="recentSearches-text">
					<u-tag 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>
					<!-- <u-tag text="展开" bgColor="#e7e7e7" color="#000" borderColor="#e7e7e7"
					size="medium" ></u-tag> -->
				</view>

			</view>
			<view style="margin: 20rpx 10rpx;display: flex;align-items: center;">
				<u-radio-group
				    v-model="checkboxValue"
				    placement="row"
				    @change="checkboxChange">
				    <u-radio
				        :customStyle="{marginBottom: '8px',marginRight:'30rpx'}"
				        label="静音棉"
				        name="静音棉">
				    </u-radio>
					<u-radio
					    :customStyle="{marginBottom: '8px',marginRight:'30rpx'}"
					    label="自修补"
					    name="自修补">
					</u-radio>
					<u-radio
					    :customStyle="{marginBottom: '8px'}"
					    label="防爆"
					    name="防爆">
					</u-radio>
				</u-radio-group>

				<u-switch v-model="search.whether" size="22"
				activeValue="1" inactiveValue="0" @change="dataList=[];onSearch()"></u-switch>

				<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" style="max-height: 100vh;">
					<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 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;">{{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>
								</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 v-if="userInfo.tenant_id != '000000'" class="suspensionBox"
		@click="salesmanShow=true">
			<u-icon name="server-fill" color="#2979ff" size="40"></u-icon>
		</view>

		<u-modal :show="salesmanShow" title="是否要拨打业务员联系方式" showCancelButton
		@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 {
		listAll,
		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, // 联系业务员弹窗
				userInfo:{}, // 当前用户数据
			}
		},
		mounted() {
		},
		onLoad() {
			// 获取审核状态
			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
					})
				}
			})
			listAll({type:'PP', enableOrNot:'1'}).then(res => {
				this.tabbarTwo = res.data
				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()
				}
			})
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			// 获取最近搜索数据
			if(uni.getStorageSync('recentSearches')) {
				this.recentSearches = uni.getStorageSync('recentSearches');
			}
		},
		methods: {
			// 点击联系业务员
			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,
						detailsText: ''
					}).then(res => {
						uni.showToast({
							title: "加入购物车成功",
							icon: "none",
							mask:true,
							duration:2500
						});
						uni.switchTab({
							url: '/pages/tabBar/shoppingCart',
						})
					})
				})

			},
			// 搜索全部删除
			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/views/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
				}).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: 100rpx;
		height: 100rpx;
		background: #fff;
		border-radius: 50%;
		position: fixed;
		top: 60%;
		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);
		/* #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;
	}
</style>