dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterIntegralSubsidiary.vue

<template>
	<div class="userCenterIntegralSubsidiary">
		<div class="search">
			<span :class="{active:params.search1==='全部'}"
			      @click="activeChange('全部')">{{ $i18n.locale == 'zh' ? '全部' : 'All' }}</span>
			<span :class="{active:params.search1==='获取'}"
			      @click="activeChange('获取')">{{ $i18n.locale == 'zh' ? '获取' : 'Gain' }}</span>
			<span :class="{active:params.search1==='支出'}"
			      @click="activeChange('支出')">{{ $i18n.locale == 'zh' ? '支出' : 'Expend' }}</span>
		</div>
		<div class="list">
			<el-table
				:data="userTaskComplete"
				v-loading="loading"
				style="width: 100%"
				:header-cell-style="{backgroundColor:'#f8f8f8'}">
				<el-table-column
					align="center"
					:label="$i18n.locale==='zh'?'变化类型':'Change The Type'"
					width="160">
					<template slot-scope="scope">
						<span>{{
								scope.row.pointType == 1 ? $i18n.locale == 'zh' ? '获取' : 'Gain' : $i18n.locale == 'zh' ? '支出' : 'Expend'
							}}</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$i18n.locale==='zh'?'积分变化':'Integral Change'"
					width="130">
					<template slot-scope="scope">
						<span
							:style="scope.row.pointType==1?'color:#d61016;':'color:#80b738;'">{{
								scope.row.pointType == 1 ? '+' : '-'
							}}</span>
						<span
							:style="scope.row.pointType==1?'color:#d61016;':'color:#80b738;'">{{
								scope.row.point
							}}</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$i18n.locale==='zh'?'日期':'Date'"
					width="230">
					<template slot-scope="scope">
						<span>{{ scope.row.createDate | time('YYYY-MM-DD') }}</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$i18n.locale==='zh'?'时间':'Time'"
					width="90">
					<template slot-scope="scope">
						<span>{{ scope.row.createDate | time('HH:mm:ss') }}</span>
					</template>
				</el-table-column>
				<el-table-column
					:prop="$i18n.locale==='zh'?'title':'titleEn'"
					align="center"
					:label="$i18n.locale==='zh'?'备注':'Remark'">
				</el-table-column>
			</el-table>
			<el-pagination
				background
				@size-change="(val)=>{page.pageSize = val;}"
				@current-change="(val)=>{page.pageNo = val;}"
				layout="prev, pager, next, sizes, jumper"
				:total="page.total"
				:current-page="page.pageNo"
				:page-sizes="[10, 20, 50, 100]"
				:page-size="page.pageSize"
				style="text-align: center;margin-top: 20px;">
			</el-pagination>
		</div>
	</div>
</template>

<script>
import {getUserPointDetailsPage, umsPointCommoditys} from "@/api/user";
import moment from "moment";
import {formatDate} from "@/utils/formatUtils";

export default {
	name: "userCenterIntegralSubsidiary",
	data() {
		return {
			loading: false,
			params: {
				search1: '全部'
			},
			page: {
				pageNo: 1,
				pageSize: 10,
				total: 3
			},
			userTaskComplete: []
		}
	},
	filters: {
		time(date, type) {
			return moment(date).format(type)
		},
	},
	watch: {
		page: {
			handler: function () {
				this.loading = true
				this.getUserPointDetailsPage()
			},
			deep: true
		},
		params: {
			handler: function () {
				this.loading = true
				this.getUserPointDetailsPage()
			},
			deep: true
		},
	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			this.getUserPointDetailsPage()
		},
		getUserPointDetailsPage() {
			let param = {
				pageSize: this.page.pageSize,
				pageNo: this.page.pageNo,
				// userUid: 'GEI_5tCB408b',
				// userId: JSON.parse(window.localStorage.getItem('user')).userId,
			}
			if (this.params.search1 == '获取') {
				param.pointType = 1
			}
			if (this.params.search1 == '支出') {
				param.pointType = 0
			}
			getUserPointDetailsPage(param).then((res) => {
				if (res) {
					this.userTaskComplete = res.data.umsUserPointDetailss
					this.page.total = Number(res.data.page.totalCount)
				}
			}).then(() => {
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		activeChange(value) {
			this.params.search1 = value
			this.page.pageNo = 1
			this.getUserPointDetailsPage()
		}
	},
	computed:{
		integralState(){

		}
	}
}
</script>

<style scoped lang="less">
.userCenterIntegralSubsidiary {
	.search {
		font-size: 14px;
		font-weight: 600;
		height: 70px;
		line-height: 70px;

		span {
			cursor: pointer;
			margin: 0 30px;

			&.active {
				color: #60aae3;
			}
		}
	}

	.list {
		width: 100%;
		padding: 0 18px;
		box-sizing: border-box;
	}
}
</style>