front-end/hdAppBack/src/admin/shop/list.vue

<template>
	<div class="app-content">
		<div class="list-wrap staff-list">
			<block v-if="!$util.isEmpty(list.data)">
				<div class="list" v-for="(item, index) in list.data" :key="index">
					<div class="list-avatar">
						<app-avatar-module :src="item.avatar" :width="90" />
					</div>
					<div class="list-det">
						<div class="list-det-left">
							<div>
								<span class="staff-name">{{ item.shopName }}</span>
								<span>{{ item.telephone }}</span>
							</div>
							<div class="flex-center">
								<div class="status-list">
									<span class v-if="item.gatheringCode" @click="downQrCodeFn(item, index)">收款码下载</span>
									<span v-else></span>
								</div>
								<div class="status-list">
									<span class v-if="item.gatheringCode" @click="downMemberCodeFn(item, index)">会员码下载</span>
									<span v-else></span>
								</div>
							</div>
						</div>
						<div class="list-det-right">
							<div @click="toModiyFn(item)">
								<i class="iconfont iconbianji"></i>
							</div>
							<!-- 删除 -->
							<div @click="delModalFn(item)">
								<i class="iconfont iconshanchu1"></i>
							</div>
						</div>
					</div>
				</div>
			</block>
			<block v-else>
				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
			</block>
		</div>
		<!-- 按钮 -->
		<div class="app-footer">
			<!-- <div class="admin-button-com middle blue" @click="pageTo('/admin/shop/add')">添加门店</div> -->
			<div class="admin-button-com middle blue">添加门店</div>
		</div>
		<!-- 删除弹窗 -->
		<modal-module :show="delModal" @cancel="modalCancel" @click="delModalClick" content="是否要删除该门店" color="#333" :size="32" padding="30rpx 30rpx"></modal-module>
	</div>
</template>

<script>
	import AppAvatarModule from '@/components/module/app-avatar'
	import AppWrapperEmpty from '@/components/app-wrapper-empty'
	import ModalModule from '@/components/plugin/modal'
	import { list } from '@/mixins'
	// api
	import { getList, downQrCode, downMemberCode, delShop } from '@/api/shop'
	export default {
		name: 'shop-list',
		components: {
			AppAvatarModule,
			AppWrapperEmpty,
			ModalModule
		},
		mixins: [list],
		data() {
			return {
				// 删除弹窗操作
				delModal: false,
				delModalText: '确定删除该员工吗？',
				operateData: {}
			}
		},
		onPullDownRefresh() {
			this.resetList()
			this._list().then(res => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			if (!this.list.finished) {
				this._list().then(res => {
					uni.stopPullDownRefresh()
				})
			} else {
				uni.stopPullDownRefresh()
			}
		},
		onLoad: function() {
			// this.init()
		},
		methods: {
			async init() {
				this._list()
			},
			_list() {
				return getList().then(res => {
					this.completes(res)
				})
			},
			toModiyFn(item) {
				uni.setStorageSync('modifyShopB', item)
				this.pageTo({
					url: '/admin/shop/add',
					query: {
						id: item.id
					}
				})
			},
			// 收款码
			downQrCodeFn(item, index) {
				downQrCode({ id: item.id })
				uni.previewImage({
					urls: [this.$constant.formal + item.gatheringCode]
				})
			},
			viewQrCodeFn(item) {
				uni.previewImage({
					urls: item.gatheringCode
				})
			},
			// 会员码
			downMemberCodeFn(item, index) {
				downMemberCode({ id: item.id })
				uni.previewImage({
					urls: [this.$constant.formal + item.applyMemberCode]
				})
			},
			viewMemberCodeFn(item) {
				uni.previewImage({
					urls: item.applyMemberCode
				})
			},
			// 关闭弹窗
			modalCancel() {
				this.delModal = false
				this.roleModal = false
			},
			// 删除弹窗
			delModalFn(item) {
				this.$msg('即将开通...')
				return false
				this.delModalText = this.tabIndex == 0 ? '确定删除该吗？' : '确定删除该角色吗？'
				this.operateData = item
				this.delModal = true
			},
			delModalClick(e) {
				let index = e.index
				if (index === 0) {
					this.modalCancel()
				} else {
					delShop({ id: this.operateData.id }).then(res => {
						this.modalCancel()
						this.$msg('删除成功!')
						setTimeout(() => {
							this.resetList()
							this._list()
						}, 1000)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-content {
		min-height: calc(100vh - 100px);
		padding-bottom: 100px;
	}
	// 列表公共
	.list-wrap {
		background-color: #fff;
		.list {
			@include disFlex(center, flex-start);
			margin: 0 30px;
			padding: 30px 0;
			border-bottom: 2px solid $borderColor;
		}
	}
	// 员工列表
	.staff-list {
		.list-det {
			width: calc(100% - 110px);
			color: $fontColor3;
			margin-left: 20px;
			@include disFlex(center, space-between);
			.list-det-left {
				.staff-name {
					color: #333;
					font-size: 30px;
					font-weight: 600;
					margin-right: 20px;
				}
				.flex-center {
					margin-top: 18px;
				}
				.status-list {
					margin-left: 60px;
					color: $mainColor;
					&:first-child {
						margin-left: 0;
					}
					.iconfont {
						// color: $fontColor3;
						font-size: 24px;
						margin-right: 10px;
					}
				}
			}
			.list-det-right {
				@include disFlex(center, flex-start);
				& > div {
					margin-left: 50px;
					&:first-child {
						margin-left: 0;
					}
				}
				.iconfont {
					font-size: 36px;
					color: $fontColor3;
				}
			}
		}
	}
	// 按钮
	.app-footer {
		justify-content: flex-end;
		.admin-button-com {
			width: 160px;
			margin-right: 30px;
		}
	}
</style>