web-africa-h5/pages/self-service/monthly-history/detail.vue

<template>
	<view class="pt20">
		<u-navbar placeholder :title="$t('MY_CK_38')" :bgColor="'#fff'" titleStyle="color:#666" leftIconColor="#666" leftIcon="arrow-left" @leftClick="goBack">
			<button class="nav-right-btn" slot="right" @click="openPop()">{{ $t('MY_ORD_50') }}</button>
		</u-navbar>
		<view class="item-box" v-for="(item, index) in listData" :key="index">
			<!-- 会员编号 -->
			<view class=" d-b-c mb16">
				<view class="label-name">{{ $t('MN_T_1') }}</view>
				<view class="item-content f26 gray3">{{ item.memberCode }}</view>
			</view>
			<!-- 会员姓名 -->
			<view class=" d-b-c mb16">
				<view class="label-name">{{ $t('CK_KS_14') }}</view>
				<view class="item-content f26 gray3">{{ item.memberName }}</view>
			</view>
			<!-- 注册等级 -->
			<view class=" d-b-c mb16">
				<view class="label-name">{{ $t('PER_DA_5') }}</view>
				<view class="item-content f26 gray3">{{ item.pkGradeVal }}</view>
			</view>
			<!-- 真实奖衔 -->
			<view class=" d-b-c mb16">
				<view class="label-name">{{ $t('CK_KS_16') }}</view>
				<view class="item-content f26 gray3">{{ item.pkAwardsVal }}</view>
			</view>
			<!-- 首购业绩 -->
			<view class=" d-b-c mb16">
				<view class="label-name">{{ $t('MN_F_T_857') }}(PV)</view>
				<view class="item-content f26 gray3">{{ formatNum(item.firstAchieve) }}</view>
			</view>
			<!-- 复购业绩 -->
			<view class=" d-b-c mb16">
				<view class="label-name">{{ $t('MN_F_T_844') }}(PV)</view>
				<view class="item-content f26 gray3">{{ formatNum(item.repurchaseAchieve) }}</view>
			</view>
		</view>
		<view class="d-c-c p30" v-if="listData.length == 0 && !loading">
			<text class="iconfont icon-wushuju"></text>
			<text class="cont">{{ $t('w_0405') }}</text>
		</view>
		<!-- 筛选 -->
		<u-popup :show="showPop" mode="right" @close="closePop" @open="openPop">
			<view class="pop-content rightpop">
				<view class="pop-title d-b-c">
					<view class="f28 gray3">{{ $t('MY_ORD_50') }}</view>
					<view class="f28 domation" @click="closePop">{{ $t('N_I_241') }}</view>
				</view>
				<view class="right-item-title">{{ $t('MN_T_1') }}</view>
				<view style="padding: 0 24rpx;">
					<view class="search-box">
						<u-icon name="search" size="36rpx" color="#999"></u-icon>
						<input v-model="form.memberCode" class="search-input" type="text" value="" :placeholder="$t('S_C_70') + $t('MN_T_1')" />
					</view>
				</view>
				<view class="right-item-title">{{ $t('CK_KS_14') }}</view>
				<view style="padding: 0 24rpx;">
					<view class="search-box">
						<u-icon name="search" size="36rpx" color="#999"></u-icon>
						<input v-model="form.memberName" class="search-input" type="text" value="" :placeholder="$t('S_C_70') + $t('CK_KS_14')" />
					</view>
				</view>
				<view class="right-item-title">{{ $t('PER_DA_5') }}</view>
				<view class="d-c-c">
					<picker :range="gradeList" range-key="gradeName" :value="picker1" @change="bindData1">
						<view class="data-input">{{ form.gradeName || $t('S_C_70') }}</view>
					</picker>
				</view>
				<view class="right-item-title">{{ $t('CK_KS_16') }}</view>
				<view class="d-c-c">
					<picker :range="awardList" range-key="label" :value="picker2" @change="bindData2">
						<view class="data-input">{{ form.awardsName || $t('S_C_70') }}</view>
					</picker>
				</view>
				<view class="pop-btns">
					<view class="pop-left-btn" @click="resetSubmit()">{{ $t('w_0257') }}</view>
					<view class="pop-right-btn" @click="searchSubmit()">{{ $t('w_0035') }}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more.vue';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			date1: '',
			type: 0,
			/*手机高度*/
			phoneHeight: 0,
			/*可滚动视图区域高度*/
			scrollviewHigh: 0,
			/*最后一页码数*/
			last_page: 0,
			/*当前页面*/
			page: 1,
			/*每页条数*/
			list_rows: 10,
			/*有没有等多*/
			no_more: false,
			total: 0,
			/*是否正在加载*/
			loading: true,
			/*数据*/
			listData: [],
			detail: { memberCode: '', memberName: '', phone: '', changeNum: 1 },
			detail2: {
				remark: '', //备注
				memberCode: '', //会员编号
				phone: '', //联系方式
				changePhone: '', //变更联系方式
				changeMemberName: '', //变更会员名称
				idBack: '', //原证件背面图片
				changeIdFront: '', //变更证件正面
				changeIdBack: '', //变更证件反面
				amount: '', //业务扣费
				approveStatus: 0, //审核状态
				approveTime: '', //审核时间
				creationTime: '' //创建时间
			},
			showPop: false,
			form: {
				month: null,
				pageNum: 1,
				pageSize: 50,
				placeDept: '',
				memberCode: '',
				memberName: '',
				pk_awards: '',
				pk_grade: '',
				gradeName:'',
				awardsName:''
			},
			gradeList: [],
			awardList: [],
			picker1: '',
			picker2: '',
			pkCountry: 0
		};
	},
	computed: {
		/*加载中状态*/
		loadingType() {
			if (this.loading) {
				return 1;
			} else {
				if (this.listData.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		},
		creationTimeStart() {
			return this.getDate('start');
		},
		creationTimeEnd() {
			return this.getDate('end');
		}
	},
	onLoad(e) {
		this.form.month = e.month;
		this.form.placeDept = e.placeDept;
		this.getInfo();
		this.getGradeList();
	},
	onShow() {
		/*获取订单列表*/
		this.page = 1;
		this.type = 0;
		this.listData = [];
		this.getData();
	},
	onReachBottom() {
		let self = this;
		if (self.no_more) {
			return;
		}
		self.form.pageNum++;
		if (self.total >= self.form.pageNum * self.form.pageSize) {
			self.getData();
		} else {
			self.no_more = true;
		}
	},
	methods: {
		getInfo() {
			let self = this;
			self._get('/member/api/member/get-info', {}, res => {
				self.pkCountry = res.data.pkCountry;
				self.getAward();
			});
		},
		getAward() {
			let self = this;
			self._get(
				'/system/pub/enums/award',
				{
					pkCountry: self.pkCountry
				},
				res => {
					self.awardList = res.data;
				}
			);
		},
		getGradeList() {
			let self = this;
			self._get('/system/api/grade/list', {}, res => {
				self.gradeList = res.data;
			});
		},
		searchSubmit: function() {
			this.showPop = false;
			/*获取数据*/
			this.listData = [];
			this.form.pageNum = 1;
			this.no_more = false;
			this.getData();
		},
		/* 重置 */
		resetSubmit: function() {
			// this.form.month = null;
			this.form.pageNum = 1;
			this.form.pageSize = 50;
			this.form.memberCode = '';
			this.form.memberName = '';
			this.form.pk_awards = '';
			this.form.pk_grade = '';
			this.form.gradeName = '';
			this.form.awardsName = '';
			this.searchSubmit();
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		bindData1: function(e) {
			this.form.gradeName = this.gradeList[e.detail.value].gradeName;
			console.log(this.form.gradeName)
			this.form.pk_grade = this.gradeList[e.detail.value].pkId;
		},
		bindData2: function(e) {
			this.form.awardsName = this.awardList[e.detail.value].label;
			this.form.pk_awards = this.awardList[e.detail.value].value;
		},
		closePop() {
			this.showPop = false;
		},
		openPop() {
			this.showPop = true;
		},
		goBack() {
			uni.navigateBack();
		},
		getData() {
			let self = this;
			self.loading = false;
			let params = self.form;
			self._post('member/api/achieve/month-achieve-detail', params, res => {
				self.loading = false;
				self.listData = self.listData.concat(res.rows);
				self.total = res.total;
				if (self.total < self.form.pageNum * self.form.pageSize) {
					self.no_more = true;
				}
			});
		}
	}
};
</script>

<style lang="scss">
.top-tabbar {
	border-bottom: 1rpx solid #eee;
	.tab-item {
		color: #666;
	}
	.tab-item.active {
		font-weight: 400;
		color: #333;
	}
}
.order-item {
	width: 750rpx;
	background: #ffffff;
	padding: 0 18rpx 50rpx 25rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
}
.orer-item-top {
	height: 93rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #eee;
}
.listdata-item {
	// height: 370rpx;
	padding: 27rpx 23rpx 22rpx 25rpx;
	background: #ffffff;
	margin-bottom: 22rpx;
}
.type-btn {
	line-height: 30rpx;
	height: 30rpx;
	background: #3d3d3d;
	border-radius: 15rpx;
	padding: 0 23rpx;
	font-size: 20rpx;
	color: #ffffff;
	margin-right: 6rpx;
}
.status-btn {
	font-size: 24rpx;
	color: #333333;
	margin-left: 20rpx;
}
.product-img {
	width: 124rpx;
	height: 124rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
	display: block;
	border: 15rpx;
	margin-bottom: 24rpx;
}
.product-list {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	margin-right: 20rpx;
}
.order-border-btn {
	box-sizing: border-box;
	padding: 0 26rpx;
	min-width: 146rpx;
	height: 52rpx;
	line-height: 52rpx;
	text-align: center;
	border-radius: 26rpx;
	font-size: 24rpx;
	color: #999;
	border: 1rpx solid #eee;
	margin-left: 18rpx;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.order-btn {
	box-sizing: border-box;
	padding: 0 26rpx;
	min-width: 146rpx;
	height: 52rpx;
	line-height: 52rpx;
	text-align: center;
	border-radius: 26rpx;
	font-size: 24rpx;
	color: #fff;
	border: 1rpx solid #eee;
	margin-left: 18rpx;
	background: #fb3024;
	border: 1rpx solid #fb3024;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.label-name {
	font-size: 26rpx;
	color: #999;
	word-break: break-all;
	width: 60%;
	flex-shrink: 0;
	line-height: 1.5;
}
.item-content {
	flex-shrink: 0;
	width: 40%;
	word-break: break-all;
	line-height: 1.5;
	text-align: right;
}
.item-box {
	width: 750rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	padding: 32rpx 26rpx;
	background: #ffffff;
}
.data-input {
	width: 600rpx;
	color: #333;
	height: 64rpx;
	display: flex;
	    justify-content: center;
	    align-items: center;
}
.nav-right-btn {
	background: none;
}
.search-box {
	flex: 1;
	height: 65rpx;
	background: #f5f6f8;
	border-radius: 33rpx;
	padding: 0 52rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;

	.search-input {
		font-size: 26rpx;
		color: #333;
		margin-left: 14rpx;
		flex: 1;
	}
}
</style>