yuezhilian-c/src/packages/user/business/my-business.vue

<template>
	<view class="my-business-box">
		<Navbar :title="_userInfo.balance === 1 ? '我的顾客' : '我的商家'" color="#333"></Navbar>
		<view class="content">
			<view class="item" v-for="item in list" :key="item.id">
				<image :src="item.shopIcon" mode="aspectFill"></image>
				<view class="info">
					<view class="name">{{item.shopName}}</view>
					<view class="status" :class="{status2:  item.status === 3}">{{statusMap[item.status]}}</view>
					<view class="phone">商家手机号:{{item.shopPhone}}</view>
				</view>
				<view class="btn" @click="toDetail(item.id)">
					详情
					<IconText :code="`\ue84a`" size="10" color="#fff"></IconText>
				</view>
			</view>
			<view class="no-data" v-if="!list.length">
				<NoData :show="!list.length" topNum="10" title="暂无商家!"></NoData>
			</view>
		</view>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue
	} from 'vue-property-decorator';
	import {
		namespace
	} from 'vuex-class';
	const baseModule = namespace('base');
	@Component({})

	export default class MyBusiness extends Vue {
		@baseModule.Getter('_userInfo') _userInfo: any;
		list: any = [];
		current: number = 0;
		size: number = 20;
		finish: boolean = false;
		loading: boolean = false;
		statusMap: any = {
			1: '待审核',
			2: '审核通过',
			3: '审核未通过'
		}

		onShow() {
			this.list = [];
			this.getBusinessList();
		}

		onReachBottom() {
			if (this.finish || this.loading) return;
			this.current++;
			this.getBusinessList();
		}

		getBusinessList() {
			this.$http
				.get({
					url: this.$api.getBusinessList,
					data: {
						page: this.current,
						size: this.size
					}
				})
				.then((res: any) => {
					this.list = [...this.list, ...res.list];
					if (res.list.length < this.size) this.finish = true;
					this.loading = false;
				}, (err: any) => {
					console.log(err);
					this.loading = false;
				});
		}

		toDetail(id: any) {
			this.$Router.push({
				path: '/packages/user/business/business-detail',
				query: {
					id
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.my-business-box {
		.content {
			.item {
				height: vw(88);
				background: #fff;
				margin-top: vw(10);
				@include flex-x();
				padding: 0 vw(15);

				image {
					width: vw(64);
					height: vw(64);
					border-radius: vw(5);
				}

				.info {
					flex: 1;
					height: vw(64);
					@include flex-y(space-between, flex-start);
					margin-right: vw(18);
					margin-left: vw(10);

					.name {
						@include word-vw(18, #333);
					}

					.status {
						padding: 0 vw(8);
						height: vw(16);
						background: #EDEDED;
						border-radius: vw(8);
						@include word-vw(10, #333);
					}

					.status2 {
						background: #FFE6E6;
					}

					.phone {
						@include word-vw(13, #333);
					}
				}

				.btn {
					width: vw(56);
					height: vw(24);
					border-radius: vw(12);
					background: $btn-color;
					@include flex-x(center);
					@include word-vw(14, #fff);
				}
			}
		}
	}
</style>