jigesi/pages/mall.vue

<template>
	<view class="">
		<navBar title="商城" :back="false" color="black" flex="cen" background="#fff" />

		<view class="searchAndTab">
			<view class="searchBox">
				<uni-search-bar @confirm="search" @input="input" v-model="searchKey" placeholder="请输入关键词" radius="50"
					cancelButton="none" bgColor="#F3F4F6"></uni-search-bar>
			</view>
			<u-sticky bgColor="#fff" v-if="!searchKey">
				<u-tabs @click="handle1" :list="list1" :scrollable="true" :activeStyle='activeStyle'
					:inactiveStyle="inactiveStyle" @change="change"></u-tabs>
			</u-sticky>
		</view>


		<view class="content" v-if="searchKey" style="margin-top: 140rpx;">
			<view class="rightDes2" style="height: calc(100vh - 330rpx);">
				<u-loading-icon v-if="showLoading1&&resList.length==0" text="加载中" :vertical="true"></u-loading-icon>
				<view class="con" v-else>
					<view class="item" v-if="resList.length!=0" v-for="(item1,index) in resList"
						@click="goDetail(item1)">
						<view class="topBox">
							<image :src="picBase+item1.cover" mode=""></image>
						</view>
						<view class="bottom">
							<view class="txt" v-if="item1.name">
								{{item1.name}}
							</view>
						</view>
					</view>


					<view class="" v-else style="">
						<u-empty mode="data" text="暂无数据" width="100" height="100"
							:icon="picUrl+'/static/other/empty.png'">
						</u-empty>
					</view>
				</view>

				<u-loadmore v-if="resList.length!=0" style="" loadmoreText="已经到底啦" color="#CCCCCC" lineColor="#CCCCCC"
					line />
			</view>
		</view>

		<view class="content" v-else style="margin-top: 200rpx;">
			<view class="leftMenu">
				<view class="item" v-for="(item,index) in list2" :class="[index==currBrandIndex?'act':'']"
					@click=" change2(item.id,index)">
					<text style="position: relative;z-index: 1;">{{item.title}}</text>
					<image v-if="index==currBrandIndex" class="halfCircle" :src="picUrl+'/static/mall/circle.png'"
						mode="" style="width: 30rpx;height: 30rpx;">
					</image>
				</view>
			</view>
			<view class="rightDes">
				<u-loading-icon v-if="showLoading&&allTypes.length==0" text="加载中" :vertical="true"></u-loading-icon>


				<view class="item" v-else v-for="(item,index) in allTypes" :style="{marginTop:index>0?'22rpx':''}">
					<view class="top" @click="toList(item,allTypesValues[index])">
						<view class="name">
							{{allTypesValues[index]}}
						</view>
						<image src="/static/index/more.png" mode=""
							style="width: 40rpx;height: 40rpx;margin-right: 4rpx;">
						</image>
					</view>



					<view class="bottom" v-if="resList[item][0].id">
						<image @click="goDetail(item1)" :src="picBase+item1.cover" mode="" style="" class="img"
							v-for="(item1,index) in resList[item] ">
						</image>
					</view>

					<view class="bottom" v-else style="justify-content: center;">
						<u-empty mode="data" text="暂无数据" width="100" height="100"
							:icon="picUrl+'/static/other/empty.png'">
						</u-empty>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import classifyData from '@/common/classify.data.js';
	import uploadUrl from '@/common/config.js'

	import {
		getMallCatReq,
		getMallReq,
	} from '@/api/test/index.js'
	export default {
		data() {
			return {
				searchKey: '',
				showLoading: false,
				showLoading1: false,

				picUrl: this.$picUrl,
				picBase: this.$picBase,

				currBrandIndex: 0,
				list1: [],
				list2: [],
				activeStyle: {
					color: '#F7790C'
				},
				inactiveStyle: {
					color: '#080F18'
				},

				selTab: {
					type: 1,
					brand: 7
				},
				resList: [],

				allTypes: [],
				allTypesValues: [],
				tOList: [],

				pid: -1,

				catTabId: -1,
				initialPid: -1

			};
		},
		created() {

		},
		async onLoad() {

			let res = await getMallCatReq()
			if (res.code == 0) {
				console.log('获取商城顶部分类数据返回值: ', res);

				this.catTabId = res.data[0].id
				this.handle1({
					id: res.data[0].id
				})
				this.tOList = res.data
				let tL = []
				res.data.forEach((item, index) => {
					tL.push({
						id: item.id,
						name: item.title
					})
				})
				this.list1 = tL
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		},
		async onShow() {
			if (!uni.getStorageSync('switchs')) {
				uni.setStorageSync('switchs', [1, 0, 0])
			}
			// if (!uni.getStorageSync('priceConfig')) {
			uni.request({
				url: uploadUrl.baseUrl + '/api/common/getPriceConfig',
				method: "GET",
				success: (res) => {
					if (res.data.code == 0) {
						console.log('mall中获取的会员折扣数据', res.data.data)
						uni.setStorageSync('priceConfig', res.data.data)
					}
				}
			})
			// }
		},
		onReady() {

		},
		methods: {
			async handle1(e) {
				console.log('e', e.id);
				let res = await getMallCatReq({
					pid: e.id
				})
				if (res.code == 0) {

					this.list2 = res.data
					console.log('zhongxiang', res);

					this.currBrandIndex = 0
					this.getMall(res.data[0].id)
				}
			},


			async getMall(id) {
				this.showLoading = true

				this.pid = id
				let res = await getMallReq({
					pid: id
				})
				if (res.code == 0) {
					this.showLoading = false
					console.log('获取商城数据返回值: ', res);

					this.allTypes = Object.keys(res.data.typeName)
					this.allTypesValues = Object.values(res.data.typeName)
					this.resList = res.data
					console.log('获取商城数据返回值列表: ', this.resList, this.allTypes, this.allTypesValues);
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			},
			async getMall2(search) {
				this.showLoading1 = true
				let res = await getMallReq({
					// page: 1,
					search,
				})
				if (res.code == 0) {
					this.showLoading1 = false
					console.log('获取商城数据返回值2: ', res.data);
					this.resList = res.data
					// this.resList = []
					console.log('获取商城数据返回值列表2: ', this.resList);
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			},

			change2(id, index) {
				this.currBrandIndex = index
				this.getMall(id)
			},

			toList(id, name) {
				uni.navigateTo({
					url: '/pages/mall/goodsList/index?typeNameId=' + id + '&pid=' + this.pid + '&name=' + name
				})
			},
			goDetail(item) {
				console.log('item-------------------', item);
				getApp().mallItem = item
				uni.navigateTo({
					url: '/pages/mall/detail/index'
				})
			}
		},
		watch: {
			searchKey(n, o) {
				if (!n) {
					this.currBrandIndex = 0
					console.log('当搜索词为空时传递的pid', this.pid, this.initialPid, this.catTabId);
					this.handle1({
						id: this.catTabId
					})
					return
				}
				setTimeout(() => {
					this.getMall2(n)
				}, 0)
			},
		},
		components: {}
	};
</script>

<style lang="scss" scoped>
	@import "./mall.scss";
</style>