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

<template>
	<div class="userCenterIntegralExchangeDetail">
		<div style="height: 45px; line-height: 42px">
			<div
				:class="informationsClass == 1 ? 'information2' : 'information1'"
				@click="getInformation(1)"
				class="cursor"
			>
				{{ $i18n.locale == 'zh' ? '商品详情' : 'Shop Detail' }}
			</div>
			<div
				:class="informationsClass == 2 ? 'information2' : 'information1'"
				@click="getInformation(2)"
				class="cursor"
			>
				{{ $i18n.locale == 'zh' ? '我的兑换记录' : 'My Exchange Record' }}
			</div>
		</div>
		<div class="backButton" @click="voteback">
			{{ $i18n.locale == 'zh' ? '返回' : 'Return' }}
		</div>
		<userCenterIntegralExchangeShop
			v-if="informationsClass == 1"
		></userCenterIntegralExchangeShop>
		<userCenterIntegralExchangeRecord
			v-if="informationsClass == 2"
		></userCenterIntegralExchangeRecord>
	</div>
</template>

<script>
import userCenterIntegralExchangeShop from '@/views/userCenter/userCenterItem/userCenterIntegralExchangeShop'
import userCenterIntegralExchangeRecord from '@/views/userCenter/userCenterItem/userCenterIntegralExchangeRecord'
export default {
	name: 'userCenterIntegralExchangeDetail',
	components: {
		userCenterIntegralExchangeShop,
		userCenterIntegralExchangeRecord,
	},
	data() {
		return {
			informationsClass: 1,
		}
	},
	methods: {
		voteback() {
			this.$router.go(-1)
		},
		getInformation(num) {
			this.informationsClass = num
		},
	},
}
</script>

<style lang="less" scoped>
.userCenterIntegralExchangeDetail {
	width: 100%;
	background: #fff;
	min-height: 800px;
}
.information1 {
	display: inline-block;
	height: 100%;
	text-align: center;
	background: #f9f9f9;
	border-top: 3px solid #f9f9f9;
	color: #999;
	box-sizing: border-box;
	vertical-align: middle;
	font-weight: 600;
	padding: 0 20px;
}

.information1:hover {
	color: #ff0036;
}

.information2 {
	display: inline-block;
	height: 100%;
	text-align: center;
	border-top: 3px solid #2c5589;
	color: #2c5589;
	box-sizing: border-box;
	vertical-align: middle;
	font-weight: 600;
	padding: 0 20px;
}
.backButton {
	width: 100px;
	height: 30px;
	background-color: #b4d5ff;
	position: absolute;
	top: 6px;
	right: 1%;
	border-radius: 8px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
}
</style>