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

<template>
	<div class="userCenterIntegralExchange">
		<div class="user">
			<div class="head">
				<div class="headPortrait">
					<img
						v-if="!booleanFlag.headPortraitDefaultImg"
						:src="'api/file/pub/' + user.umsUser.userPic"
						alt=""
						style="width: 100%; height: 100%"
						@error="booleanFlag.headPortraitDefaultImg = true"
					/>
					<img
						v-if="booleanFlag.headPortraitDefaultImg"
						:src="require('@/assets/img/userCenter/user.png')"
						alt=""
						style="width: 100%; height: 100%"
					/>
				</div>
				<!-- 白银用户 -->
				<div v-if="userLevel1 == 2" class="level">
					<div v-if="isZh">
						<img
							v-if="!booleanFlag.levelDefaultImg"
							:src="require('@/assets/img/userCenter/白银用户.png')"
							alt=""
							style="width: 100%; height: 100%"
						/>
					</div>
					<div v-else>
						<img
							v-if="!booleanFlag.levelDefaultImg"
							:src="require('@/assets/img/userCenter/@1白银用户.png')"
							alt=""
							style="width: 100%; height: 100%"
						/>
					</div>
				</div>
				<!-- 黄金用户 -->
				<div v-if="userLevel1 == 3" class="level">
					<div v-if="isZh">
						<img
							v-if="!booleanFlag.levelDefaultImg"
							:src="require('@/assets/img/userCenter/level02.png')"
							alt=""
							style="width: 100%; height: 100%"
						/>
					</div>
					<div v-else>
						<img
							v-if="!booleanFlag.levelDefaultImg"
							:src="require('@/assets/img/userCenter/黄金用户e.png')"
							alt=""
							style="width: 100%; height: 100%"
						/>
					</div>
				</div>
				<!-- 白金用户 -->
				<div v-if="userLevel1 == 4" class="level">
					<div v-if="isZh">
						<img
							v-if="!booleanFlag.levelDefaultImg"
							:src="require('@/assets/img/userCenter/白金用户.png')"
							alt=""
							style="width: 100%; height: 100%"
						/>
					</div>
					<div v-else>
						<img
							v-if="!booleanFlag.levelDefaultImg"
							:src="require('@/assets/img/userCenter/白金用户e.png')"
							alt=""
							style="width: 100%; height: 100%"
						/>
					</div>
				</div>
				<!-- 钻石用户 -->
				<div v-if="userLevel1 == 5" class="level">
					<div v-if="isZh">
						<img
							v-if="!booleanFlag.levelDefaultImg"
							:src="require('@/assets/img/userCenter/白金用户.png')"
							alt=""
							style="width: 100%; height: 100%"
						/>
					</div>
					<div v-else>
						<img
							v-if="!booleanFlag.levelDefaultImg"
							:src="require('@/assets/img/userCenter/白金用户e.png')"
							alt=""
							style="width: 100%; height: 100%"
						/>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="con1">
					<div class="name">
						<span style="font-size: 20px; font-weight: 600">{{
							realName
						}}</span>
					</div>
					<div class="integral">
						<span style="font-size: 18px"
							>{{ $i18n.locale == 'zh' ? '可用积分' : 'Integral' }}：
						</span>
						<span style="font-size: 22px; font-weight: 600; color: #f37003">{{
							integral
						}}</span>
					</div>
				</div>
				<div class="con2">
					<div style="margin-top: 54px" @click="toRank">
						<span
							v-if="userLevel1 == 2"
							style="font-size: 22px; font-weight: 600; color: #eaedf0"
							>V1</span
						>
						<span
							v-if="userLevel1 == 3"
							style="font-size: 22px; font-weight: 600; color: #be8e60"
							>V2</span
						>
						<span
							v-if="userLevel1 == 4"
							style="font-size: 22px; font-weight: 600; color: #eaedf0"
							>V3</span
						>
					</div>
					<div style="margin-top: 50px">
						<span style="font-size: 18px"
							>{{ $i18n.locale == 'zh' ? '当前等级' : 'Current Level' }}
						</span>
					</div>
				</div>
				<div class="con3">
					<div style="margin-top: 54px">
						<span style="font-size: 22px; font-weight: 600; color: #a8a8a8">{{
							growth
						}}</span>
					</div>
					<div style="margin-top: 50px">
						<span style="font-size: 18px"
							>{{
								$i18n.locale == 'zh' ? '当前成长值' : 'Current Growth Value'
							}}
						</span>
					</div>
				</div>
				<div class="con4">
					<div style="margin-top: 54px">
						<span style="font-size: 22px; font-weight: 600; color: #a8a8a8">{{
							byScore
						}}</span>
					</div>
					<div style="margin-top: 50px">
						<span style="font-size: 18px"
							>{{
								$i18n.locale == 'zh' ? '距下一等级还差' : 'From The Next Level '
							}}
						</span>
					</div>
				</div>
			</div>
		</div>
		<div style="max-height: 1200px; overflow-y: auto; padding-bottom: 20px">
            <!-- 热门兑换 -->
			<div class="commodity">
				<div class="title">
					<span
						style="
							width: 7px;
							height: 19px;
							background-color: #265186;
							margin-left: 4px;
						"
					></span>
					<span style="margin-left: 8px; color: #265186">{{
						$i18n.locale == 'zh' ? '热门兑换' : 'Hot For'
					}}</span>
				</div>
				<div class="list">
					<div
						class="item"
						v-for="(item, index) in popularExchange"
						:key="index"
					>
						<div class="pic">
							<img :src="'api/file/pub/' + item.picture" alt="" />
						</div>
						<div class="text">
							<div class="texttitle">
								<span>{{
									$i18n.locale == 'zh'
										? item.commodityName
										: item.commodityNameEn
								}}</span>
							</div>
							<div class="integral">
								<span
									>{{ item.point
									}}{{ $i18n.locale == 'zh' ? '积分' : 'Integral' }}</span
								>
								<span v-if="item.price !== 0" style="color: red">
									{{ item.price }}{{ $i18n.locale == 'zh' ? '元' : 'RMB' }}
								</span>
							</div>
							<div>
								<span
									>{{ $i18n.locale == 'zh' ? '累计兑换量' : 'Exchanged' }}：{{
										item.exchangeQuantity ? item.exchangeQuantity : '0'
									}}</span
								>
								<span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'"></span>
								<span v-if="isZh">{{
									item.usageQuantity > 100
										? '库存充足'
										: '仅剩' + item.usageQuantity
								}}</span>
								<span v-if="!isZh">{{
									item.usageQuantity > 100
										? 'Adequate Inventory'
										: 'Remain' + item.usageQuantity
								}}</span>
							</div>
                            <div v-if="item.commodityStatus==2">
								<el-button
									:disabled="whetherFreez"
									v-if="isChecked"
									type="info"
									style="color: #fff;"
									@click="exchange(item)"
									>{{ $i18n.locale == 'zh' ? '立即兑换' : 'Exchange' }}
								</el-button>
							</div>
                            <div v-else>
								<el-button
									:disabled="whetherFreez"
									v-if="isChecked"
									type="primary"
									style="color: #409eff; background-color: #fff"
									@click="exchange(item)"
									>{{ $i18n.locale == 'zh' ? '立即兑换' : 'Exchange' }}
								</el-button>
							</div>
						</div>
					</div>
				</div>
			</div>
            <!-- 资源兑换 -->
			<div class="commodity">
				<div class="title">
					<span
						style="
							width: 7px;
							height: 19px;
							background-color: #265186;
							margin-left: 4px;
						"
					></span>
					<span style="margin-left: 8px; color: #265186">{{
						$i18n.locale == 'zh' ? '资源兑换' : 'Resources For'
					}}</span>
					<div style="display: inline-block; font-weight: 500; color: #128ded">
						<!-- <span style="margin-left: 40px">{{
              $i18n.locale == "zh" ? "积分范围" : "Integral Range"
            }}</span>
            <span
              style="
                margin-left: 16px;
                border: 1px solid #128ded;
                padding: 0 16px;
                border-radius: 16px;
              "
              v-for="(item, index) in list"
              :class="{ active: active == index }"
              @click="change(index)"
              >{{ item }}</span
            > -->
					</div>
				</div>
				<div class="list">
					<div
						class="item"
						v-for="(item, index) in pointCommoditys"
						:key="index"
					>
						<div class="pic">
							<img :src="'api/file/pub/' + item.picture" alt="" />
						</div>
						<div class="text">
							<div class="texttitle">
								<span>{{
									$i18n.locale == 'zh'
										? item.commodityName
										: item.commodityNameEn
								}}</span>
							</div>
							<div class="integral">
								<span
									>{{ item.point
									}}{{ $i18n.locale == 'zh' ? '积分' : 'Integral' }}</span
								>
								<span v-if="item.price !== 0" style="color: red">
									{{ item.price }}{{ $i18n.locale == 'zh' ? '元' : 'RMB' }}
								</span>
							</div>
							<div>
								<span
									>{{ $i18n.locale == 'zh' ? '累计兑换量' : 'Exchanged' }}：{{
										item.exchangeQuantity ? item.exchangeQuantity : '0'
									}}</span
								>
								<span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'"></span>
								<span v-if="isZh">{{
									item.usageQuantity > 100
										? '库存充足'
										: '仅剩' + item.usageQuantity
								}}</span>
								<span v-if="!isZh">{{
									item.usageQuantity > 100
										? 'Adequate Inventory'
										: 'Remain' + item.usageQuantity
								}}</span>
							</div>
							<div v-if="item.commodityStatus==2">
								<el-button
									:disabled="whetherFreez"
									v-if="isChecked"
									type="info"
									style="color: #fff;"
									@click="exchange(item)"
									>{{ $i18n.locale == 'zh' ? '立即兑换' : 'Exchange' }}
								</el-button>
							</div>
                            <div v-else>
								<el-button
									:disabled="whetherFreez"
									v-if="isChecked"
									type="primary"
									style="color: #409eff; background-color: #fff"
									@click="exchange(item)"
									>{{ $i18n.locale == 'zh' ? '立即兑换' : 'Exchange' }}
								</el-button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {
	exchangeUserPoints,
	getUserPointPage,
	umsPointCommoditys,
} from '@/api/user'

export default {
	name: 'userCenterIntegralExchange',
	data() {
		return {
			booleanFlag: {
				headPortraitDefaultImg: false,
				levelDefaultImg: false,
				checkInsFlag: false,
			},
			orderForm: {
				address: '江苏省南京市雨花台区南京大数据产业基地5栋一层',
				num: '',
			},
			user: {},
			integral: '',
			growth: '',
			page: {
				pageNo: 1,
				pageSize: 10,
				total: 3,
			},
			popularExchange: [],
			pointCommoditys: [],
			active: 0,
			list: ['0-1000', '1000-2000', '2000以上'],
			userUsertypeDict: '',
			isChecked: null,
			isZh: true,
			hotFor: null,
			resourcesFor: null,
			whetherFreez: null,
		}
	},
	watch: {
		'$i18n.locale': {
			handler: function () {
				if (this.$i18n.locale == 'zh') {
					this.isZh = true
				} else {
					this.isZh = false
				}
				this.getUmsPointCommoditys()
			},
			deep: true,
		},
	},
	mounted() {
		let language = window.localStorage.getItem('locale')
		if (language == 'zh') {
			this.isZh = true
		} else {
			this.isZh = false
		}
		this.init()
	},
	methods: {
		toRank() {
			this.$router.push('userCenterRightsRank')
		},
		change(index) {
			this.active = index
			console.log(this.active)
		},
		init() {
			this.user = JSON.parse(window.localStorage.getItem('user'))
			if (this.user.umsUser.userPic == undefined) {
				this.user.umsUser.userPic = ''
			}
			this.userUsertypeDict = this.user.umsUser.userUsertypeDict
			// console.log(this.userUsertypeDict);
			if (this.userUsertypeDict !== 2) {
				this.isChecked = true
			} else {
				this.isChecked = false
			}
			this.getUmsPointCommoditys()
			this.getUmsUserPoints()
		},
		// 积分兑换商品列表
		getUmsPointCommoditys() {
			let params = {
				pageSize: 10,
				pageNo: 1,
			}
			umsPointCommoditys(params).then((res) => {
				if (res) {
					// 热门兑换
					this.popularExchange = res.data.popularExchange
					// 资源兑换
					this.pointCommoditys = res.data.pointCommoditys
				}
			})
		},
		//  个人积分
		getUmsUserPoints() {
			getUserPointPage().then((res) => {
				if (res) {
					this.integral = res.data.umsUserPoints[0].point
					if (JSON.stringify(res.data) !== '{}') {
						this.growth = res.data.umsUserPoints[0].growthValue
					} else {
						this.growth = 6000
					}
					if (res.data.umsUserPoints[0].pointStatus == 'n') {
						this.$message({
							message:
								this.$i18n.locale == 'zh'
									? '该用户积分已冻结，请联系客服'
									: "The user's points have been frozen, please contact customer service",
							type: 'error',
						})
						this.whetherFreez = true
					} else {
						this.whetherFreez = false
					}
				}
			})
		},
		// 兑换商品详情页
		exchange(item) {
			console.log(item)
			window.localStorage.setItem('detailID', item.id)
			this.$router.push({
				path: `/userCenterIntegralExchangeDetail`,
			})
		},
	},
	computed: {
		// 判断有无真名
		realName() {
			if (this.user.umsUser.userNickName) {
				return this.user.umsUser.userNickName
			} else {
				return this.user.username
			}
		},

		// 判断差多少分
		byScore() {
			if (this.growth >= 0 && this.growth < 1000) {
				return parseInt(1000 - this.growth)
			} else if (this.growth >= 1000 && this.growth < 3000) {
				return parseInt(3000 - this.growth)
			} else if (this.growth >= 3000) {
				return 999999
			}
		},

		// 判断会员等级
		userLevel1() {
			if (this.growth >= 0 && this.growth < 1000) {
				return 2
			} else if (this.growth >= 1000 && this.growth < 3000) {
				return 3
			} else if (this.growth >= 3000) {
				return 4
			}
		},
	},
}
</script>

<style scoped lang="less">
.active {
	background-color: #ebf7ff;
}
.userCenterIntegralExchange {
	width: 100%;
	background: #fff;
	min-height: 700px;

	.user {
		display: flex;
		height: 200px;
		border: 1px solid #eeeff3;

		.head {
			width: 162px;
			padding: 0 0 0 22px;
			box-sizing: border-box;

			.headPortrait {
				width: 82px;
				height: 82px;
				border-radius: 50%;
				margin: 43px auto 0;
			}

			.level {
				width: 108px;
				height: 28px;
				border-radius: 14px;
				margin: 8px auto 0;
			}
		}

		.content {
			flex: 1;
			display: flex;

			.con1 {
				padding: 0 30px 0 15px;

				.name {
					margin-top: 56px;
				}

				.integral {
					margin-top: 50px;
				}
			}

			.con2,
			.con3,
			.con4 {
				padding: 0 30px;
				text-align: center;
				position: relative;

				&:before {
					content: '';
					width: 1px;
					height: 100px;
					background-color: #f0f0f2;
					display: inline-block;
					position: absolute;
					top: 60px;
					left: 0;
				}
			}
		}
	}

	.commodity {
		padding: 0 15px;

		.title {
			width: 100%;
			border-bottom: 1px solid #eeeff3;

			> span {
				display: inline-block;
				font-size: 18px;
				font-weight: 600;
				line-height: 66px;
				vertical-align: middle;
			}
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 33%;
				height: 450px;
				padding: 0 45px;
				box-sizing: border-box;
				margin-top: 45px;

				.pic {
					width: 222px;
					height: 269px;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					font-size: 16px;
					line-height: 32px;

					.texttitle {
						font-size: 18px;
						margin-top: 35px;
						/* 隐藏溢出元素 */
						overflow: hidden;
						/* 单行显示 */
						white-space: nowrap;
						/* 溢出显示省略号 */
						text-overflow: ellipsis;
					}

					.integral {
						font-size: 18px;
						color: #c96e6a;
					}
				}
			}
		}
	}

	/deep/ .el-dialog__wrapper {
		background-color: transparent !important;
	}
}
</style>