smart-tourism/smart-ui-app/pages/shop/list.vue

<template>
	<view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @click="detail(item)">
				<view class="lef">
					<image :src="ip + item.showPictures[0]" mode="aspectFill" class="pic"></image>
					<view class="tag">{{ item.shopType == 1 ? '经营门店' : '经营酒店' }}</view>
				</view>
				<view class="con">
					<view class="title omit">{{ item.name }}</view>
					<view class="ms">
						<view class="wz">{{ item.addres }}</view>
						<view class="audit" v-if="item.auditFlag == 0">
							<text class="icon">&#xe82e;</text>
							<text>待审核</text>
						</view>
						<view class="audit" v-if="item.auditFlag == 1" style="color: #18B566;">
							<text class="icon">&#xe82e;</text>
							<text>审核通过</text>
						</view>
						<view class="audit" v-if="item.auditFlag == 2" style="color: #F44336;">
							<text class="icon">&#xe82e;</text>
							<text>审核不通过</text>
						</view>
					</view>
				</view>
				<view class="clear"></view>
			</view>
		</view>
		<view class="noLogin">
			<image class="u-error-icon" src="../../static/sj.png" mode="widthFix" v-if="list.length == 0"></image>
			<view class="dll" @click="go()">申请店铺</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ip: this.$http.urls.ip,
			list: [],
			param: { pageNum: 1, pageSize: 10 }
		};
	},
	onLoad() {
		uni.$on('shop', res => {
			this.getData();
		});
		this.getData();
	},
	methods: {
		//获取数据
		getData() {
			this.$http.request({
				url: this.$http.urls.getShopList,
				data: this.param,
				success: res => {
					this.list = res.data.data.list;
					this.list.forEach(item => {
						item.showPictures = item.showPictures.split(',');
					});
				}
			});
		},
		//开通店铺
		go() {
			uni.navigateTo({ url: '/pages/shop/apply' });
		},
		//详情
		detail(item) {
			uni.navigateTo({ url: '/pages/shop/manage?shopId=' + item.shopId });
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
			this.getData();
		}, 1000);
	}
};
</script>

<style lang="scss">
.list {
	padding: 0px 10px 70px 10px;
	.item {
		background-color: white;
		padding: 15px 8px 15px 8px;
		border-bottom: 1px solid #e5e5e5;
		border-radius: 5px;
		margin-top: 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
		.lef {
			float: left;
			width: 30%;
			position: relative;
			overflow: hidden;
			height: 85px;
			border-radius: 4px;
			.pic {
				width: 100%;
				height: 85px;
				background-color: #dcdcdc;
			}
			.tag {
				position: absolute;
				bottom: 0;
				width: 100%;
				text-align: center;
				background-color: $theme-color;
				height: 20px;
				opacity: 0.7;
				color: white;
			}
		}
		.con {
			padding-left: 30px;
			width: 60%;
			float: left;
			.title {
				font-size: 15px;
				text-align: left;
				color: #252525;
				font-weight: bold;
			}
			.ms {
				margin-top: 5px;
				.ll {
					color: #d72424;
					font-size: 16px;
					padding-right: 5px;
				}
				.wz {
					font-size: 12px;
				}
				.audit {
					font-size: 12px;
					margin-top: 5px;
					color: $dar;
					.icon {
						padding-right: 3px;
					}
				}
			}
		}
	}
}
.noLogin {
	margin-top: -40px;
}
</style>