groupon-wx/pages/users/user_invoice_list/index.vue

<template>
	<view :style="colorStyle">
		<view class="acea-row nav">
			<view class="acea-row row-center-wrapper" :class="{ on: nav === 1 }" @click="navTab(1)">{{ $t(`消费商`) }}
			</view>
			<view class="acea-row row-center-wrapper" :class="{ on: nav === 2 }" @click="navTab(2)">{{ $t(`绑定记录`) }}
			</view>
		</view>
		<view v-show="(nav === 2)" class="record-wrapper">
			<u-cell-group>
				<u-cell v-for="(item, index) in invoiceList" :key="index">
					<view slot="title" class="u-slot-title">
						<u--text mode="name" :text="item.userName" bold></u--text>
						<u--text :text="('前上级：' + item.beforeParentName)" size="12"></u--text>
						<u--text :text="('现上级：' + item.afterParentName)" size="12"></u--text>
					</view>
					<view slot="right-icon" style="margin-top: 20px">
						<u--text :text="item.typeMsg" bold align="right"></u--text>
						<u--text :text="item.updateTime" size="12"></u--text>
					</view>
				</u-cell>
			</u-cell-group>
			<view v-show="page === 2 && !invoiceList.length" class="nothing">
				<image :src="imgHost + '/statics/images/noInvoice.png'"></image>
				<view>{{ $t(`没有绑定信息哟~`) }}</view>
			</view>
		</view>
		<view v-show="(nav === 1)">
			<view class="list">
				<u-grid :border="true" col="2" @click="click">
					<u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex">
						<text class="grid-text">{{ (listItem.title) }}{{ listIndex == 0 ? ' >' : '' }}</text>
						<text class="grid-text-amount">{{ listItem.count }}{{ listIndex <= 1 ? '元' : '' }}</text>
					</u-grid-item>
				</u-grid>
				<view class="imageUrl">
					<view class="imageUrlin" v-if="url">
						<ayQrcode ref="qrcode" qrcode_id="qrcode" :modal="modal_qr" :url="url"
							@hideQrcode="hideQrcode" :height="200" :width="200"/>
						<!-- <u--image src="https://cdn.uviewui.com/uview/album/1.jpg" height="200px" width="100%"
							:showLoading="true">
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u--image> -->
					</view>
				</view>
			</view>
			<!-- <view v-show="page === 2 && !invoiceList.length" class="nothing">
				<image :src="imgHost + '/statics/images/noInvoice.png'"></image>
				<view>{{ $t(`没有消费商信息哟~`) }}</view>
			</view> -->
			<navigator class="add-link" :url="`/pages/users/user_invoice_form/index?specialInvoice=${specialInvoice}`">
				{{ $t(`邀请用户立即参与`) }}</navigator>
		</view>
		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->
	</view>
</template>

<script>
import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
import home from '@/components/home';
import {
	mapGetters
} from "vuex";
import {
	invoiceList,
	invoiceDelete,
	getUserInfo
} from '@/api/user.js';
import {
	postStatistics,
	linkedBindLogList
} from '@/api/home.js';
import {
	orderInvoiceList
} from '@/api/order.js';
import colors from '@/mixins/color.js';
import { HTTP_REQUEST_URL } from '@/config/app';
export default {
	components: {
		home,
		ayQrcode
	},
	mixins: [colors],
	data() {
		return {
			//二维码相关参数
			modal_qr: false,
			url: '', // 要生成的二维码值
			list: [{
				name: 'photo',
				title: '累计收益',
				count: 0
			},
			{
				name: 'lock',
				title: '今日收益',
				count: 0
			},
			{
				name: 'star',
				title: '直属伙伴',
				count: 0
			},
			{
				name: 'hourglass',
				title: '团队伙伴',
				count: 0
			},
			{
				name: 'home',
				title: '我的幸运数',
				count: 0
			},
			{
				name: 'star',
				title: '当前幸运数',
				count: 0
			},
			],
			imgHost: HTTP_REQUEST_URL,
			orderList: [],
			invoiceList: [],
			nav: 1, // 1：发票记录 2：抬头管理
			page: 1,
			limit: 300,
			loading: false,
			finished: false,
			specialInvoice: true
		};
	},
	watch: {
		nav: {
			immediate: true,
			handler(value) {
				this.page = 1;
				switch (value) {
					case 1:
						this.orderList = [];
						this.getStatistics();
						break;
					case 2:
						this.invoiceList = [];
						this.getInvoiceList();
						break;
				}
			}
		}
	},
	computed: mapGetters(['isLogin']),
	onLoad(option) {
		let that = this
		if (option.from === 'invoice_form') {
			this.nav = 2;
		}
		// uni.getSystemInfo({
		// 	success: function (res) {
		// 		// that.urlWidth = res.windowWidth
		// 	},
		// });
		this.getStatistics();
	},
	methods: {
		// 展示二维码
		showQrcode() {
			let _this = this;
			this.modal_qr = true;
			// uni.showLoading()
			setTimeout(function () {
				// uni.hideLoading()
				_this.$refs.qrcode.crtQrCode()
			}, 50)
		},

		//传入组件的方法
		hideQrcode() {
			this.modal_qr = false;
		},
		click(index) {
			if (index == 0) {
				uni.navigateTo({
					url: '/pages/users/user_earningsCount/index'
				})
			}
		},
		getStatistics() {
			uni.showLoading({
				title: this.$t(`加载中`)
			});
			postStatistics({
				userId: this.$store.state.app.uid
			}
			).then(res => {
				this.list[0].count = res.data.earningsCount || 0
				this.list[1].count = res.data.todayEarnings || 0
				this.list[2].count = res.data.oneCount || 0
				this.list[3].count = res.data.twoCount || 0
				this.list[4].count = res.data.sort || 0
				this.list[5].count = res.data.outSort || 0
				this.specialInvoice = true
				if (res.data.sheraUrl){
					this.url = res.data.sheraUrl
					this.showQrcode()
				}
				uni.hideLoading();
			});

		},
		// 菜单切换
		navTab(nav) {
			if (this.nav !== nav) {
				this.nav = nav;
			}
		},
		// 记录列表
		getOrderList() {
			uni.showLoading({
				title: this.$t(`加载中`)
			});
			orderInvoiceList({
				page: this.page,
				limit: this.limit
			}).then(res => {
				const {
					data
				} = res;
				uni.hideLoading();
				this.orderList = this.orderList.concat(data);
				this.finished = data.length < this.limit;
				this.page += 1;
			}).catch(err => {
				uni.showToast({
					title: err.msg,
					icon: 'none'
				});
			});
		},
		// 发票列表
		getInvoiceList() {
			uni.showLoading({
				title: this.$t(`加载中`)
			});
			linkedBindLogList({
				userId: this.$store.state.app.uid,
				current: this.page,
				size: this.limit
			}).then(res => {
				const {
					data
				} = res;
				uni.hideLoading();
				this.invoiceList = this.invoiceList.concat(data);
				this.finished = data.length < this.limit;
				this.page += 1;
			}).catch(err => {
				uni.showToast({
					title: err.msg,
					icon: 'none'
				});
			});
		},
		// 编辑发票
		editInvoice(id) {
			uni.navigateTo({
				url: `/pages/users/user_invoice_form/index?id=${id}`
			});
		},
		// 删除发票
		deleteInvoice(id) {
			let that = this;
			uni.showModal({
				content: that.$t(`删除该发票？`),
				confirmColor: '#E93323',
				success(res) {
					if (res.confirm) {
						invoiceDelete(id).then(() => {
							that.$util.Tips({
								title: that.$t(`删除成功`),
								icon: 'success'
							}, () => {
								let index = that.invoiceList.findIndex(value => {
									return value.id == id;
								});
								that.invoiceList.splice(index, 1);
							});
						}).catch(err => {
							return that.$util.Tips({
								title: err
							});
						});
					}
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.imageUrl {
	text-align: center !important;
	margin-top: 30px;
	width: 100%;
	height: 230px
}

.imageUrlin {
	width: 55%;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}

.grid-text {
	font-size: 16px;
	color: #3b3c3d;
	padding: 20rpx 20px 20rpx 0rpx;
	/* #ifndef APP-PLUS */
	box-sizing: border-box;
	/* #endif */
}

.grid-text-amount {
	font-size: 16px;
	color: #d82a64;
	padding: 10rpx 20px 20rpx 0rpx;
	/* #ifndef APP-PLUS */
	box-sizing: border-box;
	/* #endif */
}

.nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	width: 100%;
	height: 90rpx;
	background-color: #FFFFFF;
}

.nav .acea-row {
	flex: 1;
	border-top: 3rpx solid transparent;
	border-bottom: 3rpx solid transparent;
	font-size: 30rpx;
	color: #282828;
}

.nav .on {
	border-bottom-color: var(--view-theme);
	color: var(--view-theme);
}

.list {
	padding: 14rpx 32rpx;
	margin-top: 90rpx;
	margin-bottom: 140rpx;
}

.list .item {
	padding: 28rpx 32rpx;
	background-color: #FFFFFF;
}

.list .item~.item {
	margin-top: 14rpx;
}

.list .item-hd .acea-row {
	flex: 1;
	min-width: 0;
}

.list .name {
	font-weight: 600;
	font-size: 30rpx;
	color: #282828;
}

.list .label {
	width: 56rpx;
	height: 28rpx;
	border: 1rpx solid var(--view-theme);
	margin-left: 18rpx;
	font-size: 20rpx;
	line-height: 26rpx;
	text-align: center;
	color: var(--view-theme);
}

.list .type {
	// width: 172rpx;
	height: 42rpx;
	margin-left: 30rpx;
	background-color: #FCF0E0;
	font-size: 24rpx;
	line-height: 42rpx;
	text-align: center;
	color: #D67300;
}

.list .type.special {
	background-color: #FDE9E7;
	color: #E93323;
}

.list .item-bd {
	margin-top: 18rpx;
}

.list .cell {
	font-size: 26rpx;
	color: #666666;
}

.list .cell~.cell {
	margin-top: 12rpx;
}

.list .item-ft {
	margin-top: 11rpx;
}

.list .btn {
	font-size: 26rpx;
	color: #282828;
	cursor: pointer;
}

.list .btn~.btn {
	margin-left: 35rpx;
}

.list .btn .iconfont {
	margin-right: 10rpx;
	font-size: 24rpx;
	color: #000000;
}

.add-link {
	position: fixed;
	right: 30rpx;
	bottom: 33rpx;
	left: 30rpx;
	height: 86rpx;
	border-radius: 43rpx;
	background-color: var(--view-theme);
	font-size: 30rpx;
	line-height: 86rpx;
	text-align: center;
	color: #FFFFFF;

	.iconfont {
		margin-right: 14rpx;
		font-size: 28rpx;
	}
}

.nothing {
	margin-top: 254rpx;
	font-size: 26rpx;
	text-align: center;
	color: #999999;

	.image {
		width: 400rpx;
		height: 260rpx;
		margin-bottom: 20rpx;
	}
}

.record-wrapper {
	margin-top: 110rpx;

	.item {
		padding-right: 30rpx;
		padding-left: 30rpx;
		border-radius: 6rpx;
		margin: 30rpx;
		background-color: #FFFFFF;

		.item-hd {
			padding-top: 36rpx;
			padding-bottom: 36rpx;

			.image {
				width: 78rpx;
				height: 78rpx;
				border-radius: 6rpx;
			}

			.text {
				flex: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin-left: 24rpx;
				font-size: 26rpx;
				line-height: 37rpx;
				color: #282828;
			}
		}

		.item-bd {
			padding: 26rpx 30rpx 25rpx 32rpx;
			border-radius: 20rpx;
			background-color: #F5F6F7;
			font-size: 26rpx;
			line-height: 37rpx;
			color: #818181;

			.name {
				margin-bottom: 8rpx;
				font-weight: bold;
				font-size: 26rpx;
				color: #282828;
			}

			.money {
				font-weight: bold;
				font-size: 24rpx;
				color: #282828;

				.num {
					font-size: 32rpx;
				}
			}
		}

		.item-ft {
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #282828;

			.link {
				width: 150rpx;
				height: 57rpx;
				border: 1rpx solid #707070;
				border-radius: 29rpx;
				font-weight: normal;
				font-size: 26rpx;
				line-height: 57rpx;
				text-align: center;
				color: #282828;
			}
		}
	}
}
</style>