front-end/hdApp/src/admin/coupon/list.vue

<template>
	<div class="app-content">
		<app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" :height="100" itemWidth="25%" />
		<!-- list -->
		<div class="list-wrap">
			<block v-if="!$util.isEmpty(list.data)">
				<div class="list" v-for="(item, index) in list.data" :key="index">
					<div>
						<app-avatar-module :src="item.userAvatar" :width="110" />
					</div>
					<div class="list-right">
						<div class="app-size-30 app-color-0">{{ item.userName }}</div>
						<div class="list-info">
							<div>
								<div>
									<span class="list-info-left">ID: {{ item.userId }}</span>
									<span>手机号: {{ item.mobile }}</span>
								</div>
								<div class="list-remark">
									<span class="list-info-left">金额: {{ item.amount }}</span>
									<span>最低消费: {{ item.miniCost }}</span>
								</div>
							</div>
							<div :class="[item.status == 1 ? 'app-color-4' : '']">{{ item.status | constantfilter('COUPON_STATUS') }}</div>
						</div>
					</div>
				</div>
			</block>
			<block v-else>
				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
			</block>
		</div>
	</div>
</template>

<script>
import AppTabs from '@/components/plugin/tabs'
import AppAvatarModule from '@/components/module/app-avatar'
import AppWrapperEmpty from '@/components/app-wrapper-empty'
import { list } from '@/mixins'
// api
import { getListB } from '@/api/coupon'
export default {
	name: 'admin-invite',
	components: {
		AppTabs,
		AppAvatarModule,
		AppWrapperEmpty
	},
	mixins: [list],
	data() {
		return {
			tabIndex: 0,
			tabs: [
				{
					name: '全部',
					value: 0
				},
				{
					name: '待使用',
					value: 0
				},
				{
					name: '已使用',
					value: 0
				},
				{
					name: '已失效',
					value: 0
				}
			]
		}
	},
	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() {
			let index = JSON.parse(JSON.stringify(this.tabIndex))
			index = index - 1
			return getListB({ status: index }).then(res => {
				this.completes(res)
				if (!this.$util.isEmpty(res.data)) {
					this.tabs[0].value = res.data.asset.totalNum
					this.tabs[1].value = res.data.asset.unUseNum
					this.tabs[2].value = res.data.asset.useNum
					this.tabs[3].value = res.data.asset.invalidNum
					console.log(res.data.asset.totalNum)
				}
			})
		},
		change(e) {
			if (this.tabIndex == e.index) {
				return false
			} else {
				this.tabIndex = e.index
				this.resetList()
				this._list()
			}
			// this.tabIndex = e.index
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		padding-top: 120upx;
	}
	// list
	.list-wrap {
		width: 100%;
		color: $fontColor3;
		background-color: #fff;
		.list {
			@include disFlex(center, space-between);
			width: calc(100% - 60upx);
			padding: 30upx 0;
			margin: 0 30upx;
			border-bottom: 1px solid $borderColor;
			.list-right {
				width: calc(100% - 130upx);
				.list-info {
					@include disFlex(center, space-between);
					margin-top: 10upx;
					.list-remark {
						margin-top: 10upx;
					}
					.list-info-left {
						display: inline-block;
						width: 160upx;
					}
				}
			}
		}
	}
</style>