xiongmao/pages/my/points-details/points-details.vue

<!-- 积分明细 -->
<template>
	<view class="wrap">

		<view class="header">
			<view class="tab-list">
				<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList"
					:key="index" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>

		<!-- 全部积分 -->
		<view v-if="isActive == 0">
			<view class="list">
				<view class="list-label">
					本月积分 <text>98</text>
				</view>
				<view class="item">
					<view class="item-top-content">
						<view class="item-top">
							<text>消费购物</text>
							<text class="numadd">+20</text>
						</view>
						<view class="item-bottom" @click="toggleDescription">
							<text>2020-02-24 14:3:23</text>
							<view class="more-row">
								更多
								<image :class="isShowAllContent ? 'sanjiaoSelect' : 'sanjiao'"
									src="../../../static/sanjiao-bottomgray.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="item-bottom-content" v-if="isShowAllContent">
						<text>兑换流水号</text>
						<text>54222456289621</text>
					</view>
				</view>

			</view>
		</view>

		<!-- 已使用 -->
		<view v-if="isActive == 1">
			<view class="list">
				<view class="list-label">
					2020年12月 <text>-98</text>
				</view>
				<view class="item">
					<view class="item-top-content">
						<view class="item-top">
							<text>消费抵用现金额度9.8</text>
							<text class="numless">-880</text>
						</view>
						<view class="item-bottom" @click="toggleDescription">
							<text>2020-02-24 14:3:23</text>
							<view class="more-row">
								更多
								<image :class="isShowAllContent ? 'sanjiaoSelect' : 'sanjiao'"
									src="../../../static/sanjiao-bottomgray.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="item-bottom-content" v-if="isShowAllContent">
						<text>兑换流水号</text>
						<text>54222456289621</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//选项卡
				isActive: 0,
				navList: [{
					index: 0,
					title: '全部积分',
				}, {
					index: 1,
					title: "已使用",
				}],

				//展开收起
				isShowAllContent: false
			}
		},
		methods: {
			//选项卡
			checked(index) {
				this.isActive = index
			},

			//展开收起
			toggleDescription: function() {
				if (this.isShowAllContent) {
					this.isShowAllContent = false
				} else {
					this.isShowAllContent = true
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	@import "./points-details.css";
</style>