materialAppletApp/pages/User/merchantList.vue

<!-- 机器销售列表页 -->
<template>
	<view class="">
		<view v-if="id!=1">
			<view v-if="merchantList[0].equipmentList.length>1">
				<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 merchantList[0].equipmentList" :key="equipment.id">
							<uni-list-item :title="getEquipmentTitle(equipment)" @click="openByEquipment(merchantList[0].name,equipment.id)" />
						</view>
					</uni-list>
				</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 {
				merchantList: [{
					equipmentList: []
				}],
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'spinner'
				},
				id: null,
				pname:null,
				list: []
			}
		},
		computed: {
			...mapState(['loginUser']),
		},
		onShow() {
			uni.setNavigationBarTitle({title: this.$t('merchantList.title')});
			var globalUser = uni.getStorageSync("globalUser");
			this.id = globalUser.id;
		},
		onLoad(state) {
			var globalUser = uni.getStorageSync("globalUser");
			this.id = globalUser.id;
			this.getEquipmentListData();
		},
		onPullDownRefresh() {
			this.getEquipmentListData();
		},
		methods: {
			...mapActions('chart', ['getEquipmentListByUser', 'getEquipmentListByProvince']),
			openByAdmin(pname, adminId) {
				uni.navigateTo({
					url: '/pages/Charts/elseStatistics?adminId=' + adminId + '&pname=' + pname,
				});
			},
			openByEquipment(pname, equipmentId) {
				uni.navigateTo({
					url: '/pages/Charts/elseStatistics?equipmentId=' + equipmentId + '&pname=' + pname,
				});
			},
			//点击最后一级时触发该事件
			treeItemClick(item) {
				let {
					id,
					name,
					parentId
				} = item;
				if(name=="总销售情况"){
					uni.request({
						url: this.serverurl + '/TAdmin/findById',
						data: {
							"id": id,
						},
						method: "POST",
						success: (res) => {
							this.pname = res.data.data.name;
							uni.navigateTo({
								url: '/pages/Charts/elseStatistics?adminId=' + id + '&pname=' + this.pname,
							});
						}
					})
				}else{
					uni.request({
						url: this.serverurl + '/TEquipment/findByEquipment',
						data: {
							"id": id,
						},
						method: "POST",
						success: (res) => {
							this.pname = res.data.data.name;
							uni.navigateTo({
								url: '/pages/Charts/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.loginUser)
					.then(data => {
						this.list = data;
					}, _ => void uni.stopPullDownRefresh());
				}else{
					this.getEquipmentListByUser(this.loginUser)
					.then(data => {
						this.merchantList = data;
						var listName = data[0].equipmentList;
						var listId = data[0].id;
						if(listId!=null && listId!='1'){
							uni.setStorageSync("listName",listName);
						}
						uni.stopPullDownRefresh();
					}
					, _ => void uni.stopPullDownRefresh());
				}
				
			}
		}
	}
</script>

<style>
	.titlelist {
		color: #363D44;
		font-size: 16upx;
		font-family: "PingFang-SC-Medium";
	}
</style>