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>
					<view slot="title" class="u-slot-title">
						<u--text mode="name" text="罗德隆" bold></u--text>
						<u--text text="前上级："></u--text>
						<u--text text="现上级："></u--text>
					</view>
					<view slot="right-icon" style="margin-top: 20px">
						<u--text  text="购买订单" bold align="right"></u--text>
						<u--text  text="2022-11-24 17:11:11"></u--text>
					</view>
				</u-cell>
			</u-cell-group>
			<view v-show="page === 2 && !orderList.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">
					<u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex">
						<text class="grid-text">{{ listItem.title }}</text>
						<text class="grid-text-amount">{{ listItem.title }}</text>
					</u-grid-item>
				</u-grid>
				<view class="imageUrl">
					<view class="imageUrlin">
						<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 home from '@/components/home';
import {
	mapGetters
} from "vuex";
import {
	invoiceList,
	invoiceDelete,
	getUserInfo
} from '@/api/user.js';
import {
	orderInvoiceList
} from '@/api/order.js';
import colors from '@/mixins/color.js';
import { HTTP_REQUEST_URL } from '@/config/app';
export default {
	components: {
		home
	},
	mixins: [colors],
	data() {
		return {
			list: [{
				name: 'photo',
				title: '图片'
			},
			{
				name: 'lock',
				title: '锁头'
			},
			{
				name: 'star',
				title: '星星'
			},
			{
				name: 'hourglass',
				title: '沙漏'
			},
			{
				name: 'home',
				title: '首页'
			},
			{
				name: 'star',
				title: '音量'
			},
			],
			imgHost: HTTP_REQUEST_URL,
			orderList: [],
			invoiceList: [],
			nav: 1, // 1：发票记录 2：抬头管理
			page: 1,
			limit: 30,
			loading: false,
			finished: false,
			specialInvoice: true
		};
	},
	watch: {
		nav: {
			immediate: true,
			handler(value) {
				this.page = 1;
				switch (value) {
					case 1:
						this.orderList = [];
						// this.getOrderList();
						break;
					case 2:
						this.invoiceList = [];
						// this.getInvoiceList();
						break;
				}
			}
		}
	},
	computed: mapGetters(['isLogin']),
	onLoad(option) {
		if (option.from === 'invoice_form') {
			this.nav = 2;
		}
		// this.getUserInfo();
	},
	methods: {
		click(name) {
			this.$refs.uToast.success(`点击了第${name}个`)
		},
		getUserInfo() {
			getUserInfo().then(res => {
				const {
					special_invoice
				} = res.data;
				this.specialInvoice = special_invoice
			});
		},
		// 菜单切换
		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(`加载中`)
			});
			invoiceList({
				page: this.page,
				limit: 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: 80%;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}

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

.grid-text-amount {
	font-size: 18px;
	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: 13rpx;
	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>