xiongmao/pages/my/integral/integral.vue

<!-- 积分 -->
<template>
	<view class="wrap">
		<image src="../../../static/bg-7.png" mode="widthFix" class="bg"></image>

		<view class="header">
			<view class="header-top">
				<image src="../../../static/return-2.png" @tap="back" class="return" mode="widthFix"></image>
				<view class="header-title">
					积分
				</view>
			</view>
		</view>

		<view class="card">
			<image src="../../../static/bg-6.png" mode="" class="card-bg"></image>
			<view class="card-container">
				<view class="card-top">
					<text class="intergral-label">我的积分</text>
					<view class="card-row" @tap="pointsDetails">
						<image src="../../../static/icon-6.png" mode=""></image>
						明细
					</view>
				</view>
				<view class="card-bottom">
					<text>12590</text>
					<button type="default"  @tap="exchangeRecord">
						<image src="../../../static/icon-5.png" mode=""></image>
						兑换记录
					</button>
				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="label">
				好物兑换
			</view>
			<view class="list">
				<view class="item">
					<image src="../../../static/img-4.png" class="item-img" mode="aspectFill"></image>
					<view class="item-sidebar">
						<view class="item-name">精品小童茸，云南香格里拉松茸，肉质紧实细腻…</view>
						<view class="item-row-between">
							<view class="row">
								￥<text>94.00</text>+<text>200</text> 积分
							</view>
							<button type="default"
								:class="'item-btn '+ (isExchange ? 'gray-bg' : '')">{{isExchange ? '已兑换' : '兑换'}}</button>
						</view>
					</view>
				</view>
				<view class="item">
					<image src="../../../static/img-4.png" class="item-img" mode="aspectFill"></image>
					<view class="item-sidebar">
						<view class="item-name">精品小童茸，云南香格里拉松茸，肉质紧实细腻…</view>
						<view class="item-row-between">
							<view class="row">
								￥<text>94.00</text>+<text>200</text> 积分
							</view>
							<button type="default"
								:class="'item-btn '+ (isExchange ? 'gray-bg' : '')">{{isExchange ? '已兑换' : '兑换'}}</button>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isExchange: false
			}
		},
		methods: {
			/**
			 * 返回上一页
			 */
			back() {
				uni.navigateBack({
					delta: 1,
				})
			},
			//跳转兑换记录页面
			exchangeRecord(){
				uni.navigateTo({
					url:'../exchange-record/exchange-record'
				})
			},
			//跳转积分明细
			pointsDetails(){
				uni.navigateTo({
					url:'../points-details/points-details'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./integral.css";
</style>