cleanMachineUniApp/pages/User/merchantList.vue

<template>
	<view v-if="merchantList.length>1">
		<uni-collapse :accordion="true" >
			<view v-for="(merchant,index) in merchantList" :key="merchant.id" >
				<uni-collapse-item :title="getMerchantTitle(merchant)" :open="index===0">
					<view style="padding: 20upx;background-color: aliceblue;">
						<view v-if="merchant.equipmentList.length==0" style="text-align: center;">暂无数据</view>
						<view v-if="merchant.equipmentList.length>0">
							<uni-collapse :accordion="true">
								<uni-list>
									<uni-list-item title="总销售情况" @click="openByAdmin(merchant.name,merchant.id)"/>
									<view  v-for="equipment in merchant.equipmentList" :key="equipment.id">
										<uni-list-item :title="getEquipmentTitle(equipment)" @click="openByEquipment(merchant.name,equipment.id)"/>
									</view>
								</uni-list>
							</uni-collapse>	
						</view>
					</view>
				</uni-collapse-item>
			</view>
		</uni-collapse>
	</view>
	<view v-else>
		<view v-if="merchantList[0].equipmentList.length>1">
			<uni-collapse :accordion="true">
				<uni-list>
					<uni-list-item title="总销售情况" @click="openByAdmin(merchantList[0].name,merchantList[0].id)"/>
					<view  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;">暂无数据</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'
	
    export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			uniList,
			uniListItem
		},
		data() {
			return {
				merchantList:[{equipmentList:[]}],
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'spinner'
				}
			}
		},
		computed: {
			...mapState(['loginUser']),
		},
		onLoad(state){
			this.getEquipmentListData();
		},
		onPullDownRefresh() {
			this.getEquipmentListData();
		},
		methods: {
			...mapActions('chart', ['getEquipmentListByUser']),
			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,
				});
			},
			getMerchantTitle(merchant){
				return merchant.name?merchant.name:merchant.username;
			},
			getEquipmentTitle(equipment){
				return equipment.name?equipment.name:equipment.clientId;
			},
			getEquipmentListData(){
				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>
	
</style>