shenzeeUniApp/pages/User/merchantList.vue

<!-- 机器销售列表页 -->
<template>
	<view class="">
		<view v-if="id!=1">
			<view v-if="equipmentList.length>0">
				<uni-collapse :accordion="true">
					<uni-list>
						<uni-list-item :title="$t('merchantList.total')" @click="openByAdmin(merchantList[0].name,merchantList[0].id)" />
						<view class="titlelist" v-for="equipment in equipmentList" :key="equipment.id">
							<uni-list-item :title="getEquipmentTitle(equipment)" @click="openByEquipment(merchantList[0].name,equipment.id)" />
						</view>
					</uni-list>
					<view v-if="btnShow" class="button-container">
						<button v-if="upBtn" class="left-button" :disabled="isLoading" @click="previousPage">{{$t('equipmentStatusList.previousPage')}}</button>
						<button v-if="nextBtn" class="right-button" :disabled="isLoading" @click="nextPage">{{$t('equipmentStatusList.nextPage')}}</button>
					</view>
				</uni-collapse>
			</view>
			<view v-else style="text-align: center;">{{$t('merchantList.data')}}</view>
		</view>
		<view class="">
			<mix-tree :list="list" @treeItemClick="treeItemClick"></mix-tree>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import mixTree from '@/components/mix-tree/mix-tree'
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			uniList,
			uniListItem,
			mixTree
		},
		data() {
			return {
				globalUser:{},
				merchantList: [{
					equipmentList: []
				}],
				equipmentList: [],
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'spinner'
				},
				id: null,
				pname:null,
				list: [],
				btnShow:false, // 按钮显示
				upBtn:false, // 上一页按钮
				nextBtn:true, // 下一页按钮
				equipmentTotal:0, // 设备总数
				isLoading: false, //是否加载中
			}
		},
		computed: {
			...mapState(['loginUser']),
		},
		onShow() {
			uni.setNavigationBarTitle({title: this.$t('merchantList.title')});
			uni.setTabBarItem({ index: 1,text: this.$t('tabs.tab2')});
			this.globalUser = uni.getStorageSync("globalUser");
			this.id = this.globalUser.id;
			this.globalUser.offset = 0;
			this.globalUser.limit = 20;
			var token = uni.getStorageSync("token");
			if (token.length>1) {
				this.getEquipmentListData();
				this.upBtn = false;
				this.nextBtn = true;
			}else{
				uni.reLaunch({
					url: '../Login/Login',
				});
			}
		},
		onPullDownRefresh() {
			this.getEquipmentListData();
		},
		methods: {
			...mapActions('chart', ['getEquipmentListByUser', 'getEquipmentListByProvince']),
			openByAdmin(pname, adminId) {
				uni.navigateTo({
					url: '../../packageB/pages/char/elseStatistics?adminId=' + adminId + '&pname=' + pname,
				});
			},
			openByEquipment(pname, equipmentId) {
				uni.navigateTo({
					url: '../../packageB/pages/char/elseStatistics?equipmentId=' + equipmentId + '&pname=' + pname,
				});
			},
			//点击最后一级时触发该事件
			treeItemClick(item) {
				let {
					id,
					name,
					parentId
				} = item;
				if(name=="总销售情况"){
					var token = uni.getStorageSync("token");
					uni.request({
						url: this.serverurl + '/TAdmin/findById',
						data: {
							"id": id,
						},
						method: "POST",
						header:{
							'token':token
						},
						success: (res) => {
							this.pname = res.data.data.name;
							uni.navigateTo({
								url: '../../packageB/pages/char/elseStatistics?adminId=' + id + '&pname=' + this.pname,
							});
						}
					})
				}else{
					var token = uni.getStorageSync("token");
					uni.request({
						url: this.serverurl + '/TEquipment/findByEquipment',
						data: {
							"id": id,
						},
						method: "POST",
						header:{
							'token':token
						},
						success: (res) => {
							this.pname = res.data.data.name;
							uni.navigateTo({
								url: '../../packageB/pages/char/elseStatistics?equipmentId=' + id + '&pname=' + this.pname,
							});
						}
					})
				}
				console.log(item)
			},
			getMerchantTitle(merchant) {
				return merchant.name ? merchant.name : merchant.username;
			},
			getEquipmentTitle(equipment) {
				return equipment.name ? equipment.name : equipment.clientId;
			},
			getEquipmentListData() {
				if(this.id==1){
					this.getEquipmentListByProvince(this.globalUser)
					.then(data => {
						this.list = data;
					}, _ => void uni.stopPullDownRefresh());
				}else{
					this.isLoading = true;
					this.getEquipmentListByUser(this.globalUser)
					.then(data => {
						this.merchantList = data;
						this.equipmentList = data[0].equipmentList;
						this.equipmentTotal = this.merchantList[0].equipmentTotal;
						if(this.equipmentTotal > this.globalUser.limit) {
							this.btnShow = true;
						}
						console.log(this.equipmentList);
						this.isLoading = false;
						var listName = data[0].equipmentList;
						var listId = data[0].id;
						if(listId!=null && listId!='1'){
							uni.setStorageSync("listName",listName);
						}
						uni.stopPullDownRefresh();
					}
					, _ => void uni.stopPullDownRefresh());
				}
				
			},
			// 更改按钮显示状态
			changeBtnshow() {
				if(this.globalUser.offset != 0) {
					this.upBtn = true;
				} else {
					this.upBtn = false;
				}
				if(this.globalUser.offset + this.globalUser.limit < this.equipmentTotal) {
					this.nextBtn = true;
				} else {
					this.nextBtn = false;
				}
			},
			// 点击上一页
			previousPage() {
				this.globalUser.offset = this.globalUser.offset - this.globalUser.limit;
				this.getEquipmentListData();
				this.changeBtnshow();
			},
			// 点击下一页
			nextPage() {
				this.globalUser.offset = this.globalUser.offset + this.globalUser.limit;
				this.getEquipmentListData();
				this.changeBtnshow();
			},
		}
	}
</script>

<style>
	.titlelist {
		color: #363D44;
		font-size: 16upx;
		font-family: "PingFang-SC-Medium";
	}
	.button-container {
	  display: flex;
	}
	
	.left-button,
	.right-button {
	  flex: 1;
	}
</style>