materialAppletApp/pages/User/promoCode.vue

<template>
	<view class="warp">
		<view class="font">
				<uni-list class="font">
					<uni-list-item title="购买优惠码" @click="buy()" />
				</uni-list>
		</view>
		<view class="box">
			<view class="font">优惠码列表</view>
			<view class="header">
				<view class="nickname">
					筛选条件:
				</view>
				<!-- <view class="header"> -->
				<view class="nickname">
					状态：
				</view>
				<view style="width: 20%; margin-bottom: 2px;padding-top: 2upx; ">
					<xfl-select :list="list" :clearable="false" :showItemNum="4" :focusShowList="true" :isCanInput="false"
					 :style_Container="'height: 18px;font-size: 13px;'" :placeholder="''" :initValue="'全部'" :selectHideType="'hideAll'"
					 @change="change">
					</xfl-select>
				</view>
				<!-- </view> -->
			</view>

			<t-table @change="change">
				<t-tr>
					<t-th>优惠码</t-th>
					<t-th>到期时间</t-th>
					<t-th>状态</t-th>
					<t-th>使用时间</t-th>
					<t-th>使用机器</t-th>
				</t-tr>
				<t-tr v-for="item in tableList" :key="item.id">
					<t-td>{{ item.code}}</t-td>
					<t-td>{{ item.lastUseDate}}</t-td>
					<t-td>{{ item.isUse=='0'?'未使用':item.isUse=='1'?'已使用':item.isUse=='2'?'已过期':''}}</t-td>
					<t-td>{{ item.useDate}}</t-td>
					<t-td>{{ item.useBy}}</t-td>
				</t-tr>
			</t-table>
		</view>

	</view>
</template>

<script>
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	import xflSelect from '@/components/xfl-select/xfl-select.vue';
	import uniList from '@/components/uni-list/uni-list.vue';
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
	export default {
		components: {
			uniList,
			uniListItem,
			tTable,
			tTh,
			tTr,
			tTd,
			xflSelect
		},
		data() {
			return {
				tableList: [],
				list: [ //要展示的数据
					'全部',
					'未使用',
					'使用',
					'已过期',
				],
			};
		},
		onShow() {
			var token = uni.getStorageSync("token");
			if (token.length>1) {
				this.init();
			}else{
				uni.reLaunch({
					url: '../Login/Login',
				});
			}
		},
		methods: {
			buy() {
				uni.navigateTo({
					url: 'buyPromo',
				});
			},
			init() {
				var globalUser = uni.getStorageSync("globalUser");
				var id = globalUser.id;
				var token = uni.getStorageSync("token");
				uni.request({
					url: this.serverurl + '/TPromoCode/findList',
					data: {
						"adminId": id,
					},
					header:{
						'token':token
					},
					method: "POST",
					success: (res) => {
						this.tableList = res.data.data;
					}
				})
			},
			change({
				newVal,
				oldVal,
				index,
				orignItem
			}) {
				this.tableList=null;
				if(index==0){
					var isUse = null;
				}
				if(index==1){
					var isUse = 0;
				}
				if(index==2){
					var isUse = 1;
				}
				if(index==3){
					var isUse = 2;
				}
				var globalUser = uni.getStorageSync("globalUser");
				var id = globalUser.id;
				var token = uni.getStorageSync("token");
				uni.request({
					url: this.serverurl + '/TPromoCode/findList',
					data: {
						"adminId": id,
						"isUse":isUse
					},
					method: "POST",
					header:{
						'token':token
					},
					success: (res) => {
						this.tableList = res.data.data;
						// if(res.statusCode==401){
						// 	uni.reLaunch({
						// 		url: '../Login/Login',
						// 	});
						// 	return;
						// }
					}
				})
			}

		}
	};
</script>

<style>
	.header {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding-left: 10upx;
	}

	.nickname {
		padding-left: 10upx;
		height: 32upx;
		color: #363D44;
		font-size: 32upx;
		font-family: "PingFang-SC-Bold";
	}
	.font{
		color: #363D44;
		font-size: 36upx;
		font-family: "PingFang-SC-Bold";
	}
</style>