fengketrade/frontend/pages/ccblife/index.vue

<template>
	<!-- 建行生活环境自动隐藏导航栏（建行APP自带页头） -->
	<s-layout title="建行生活" :bgStyle="{ color: 'rgb(245,28,19)' }">
		<!-- 顶部banner -->
		<view class="ccb-banner">
			<image
				src="https://via.placeholder.com/750x300"
				mode="widthFix"
				class="banner-img"
			/>
		</view>

		<!-- 用户信息 -->
		<view class="user-section" v-if="userInfo.ccb_user_id">
			<view class="user-card">
				<view class="user-avatar">
					<image :src="userInfo.avatar || '/static/img/shop/avatar/default.png'" mode="aspectFill"/>
				</view>
				<view class="user-info">
					<view class="user-nickname">{{ userInfo.nickname || '建行用户' }}</view>
					<view class="user-id">建行ID: {{ userInfo.ccb_user_id }}</view>
				</view>
				<view class="user-badge">
					<text class="badge-text">建行专享</text>
				</view>
			</view>
		</view>

		<!-- 建行专属活动 -->
		<view class="activity-section">
			<view class="section-title">
				<text class="title-text">建行专享优惠</text>
				<text class="more-text" @tap="goToMore">查看更多 ></text>
			</view>

			<view class="activity-list">
				<view
					class="activity-item"
					v-for="(item, index) in activities"
					:key="index"
					@tap="goToActivity(item)"
				>
					<image :src="item.image" class="activity-img" mode="aspectFill"/>
					<view class="activity-info">
						<view class="activity-title">{{ item.title }}</view>
						<view class="activity-desc">{{ item.desc }}</view>
						<view class="activity-tag">
							<text class="tag-text">{{ item.tag }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 热门商品 -->
		<view class="goods-section">
			<view class="section-title">
				<text class="title-text">建行用户专享商品</text>
			</view>

			<view class="goods-list">
				<view
					class="goods-item"
					v-for="item in goodsList"
					:key="item.id"
					@tap="sheep.$router.go('/pages/goods/index', { id: item.id })"
				>
					<image :src="item.image" class="goods-img" mode="aspectFill"/>
					<view class="goods-info">
						<view class="goods-title">{{ item.title }}</view>
						<view class="goods-price">
							<text class="price-unit">¥</text>
							<text class="price-value">{{ item.price }}</text>
							<text class="price-old">¥{{ item.originalPrice }}</text>
						</view>
						<view class="goods-tag">
							<text class="tag-ccb">建行专享</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部提示 -->
		<view class="bottom-tips">
			<view class="tips-text">— 建行生活，让生活更美好 —</view>
		</view>
	</s-layout>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import sheep from '@/sheep';
import ccbApi from '@/sheep/platform/provider/ccblife/api';

// 用户信息
const userInfo = reactive({
	ccb_user_id: '',
	nickname: '',
	avatar: '',
	mobile: ''
});

// 活动列表
const activities = reactive([
	{
		id: 1,
		title: '建行信用卡满减活动',
		desc: '使用建行信用卡支付满100减20',
		tag: '限时优惠',
		image: 'https://via.placeholder.com/200x100',
		url: '/pages/activity/detail?id=1'
	},
	{
		id: 2,
		title: '新用户专享礼包',
		desc: '建行新用户首单立减50元',
		tag: '新人福利',
		image: 'https://via.placeholder.com/200x100',
		url: '/pages/activity/detail?id=2'
	},
	{
		id: 3,
		title: '建行积分兑换',
		desc: '建行积分可兑换商城优惠券',
		tag: '积分兑换',
		image: 'https://via.placeholder.com/200x100',
		url: '/pages/activity/detail?id=3'
	}
]);

// 商品列表
const goodsList = reactive([
	{
		id: 1,
		title: '建行专享商品一',
		price: '88.00',
		originalPrice: '128.00',
		image: 'https://via.placeholder.com/180x180'
	},
	{
		id: 2,
		title: '建行专享商品二',
		price: '168.00',
		originalPrice: '228.00',
		image: 'https://via.placeholder.com/180x180'
	},
	{
		id: 3,
		title: '建行专享商品三',
		price: '268.00',
		originalPrice: '368.00',
		image: 'https://via.placeholder.com/180x180'
	},
	{
		id: 4,
		title: '建行专享商品四',
		price: '99.00',
		originalPrice: '159.00',
		image: 'https://via.placeholder.com/180x180'
	}
]);

// 页面加载
onMounted(() => {
	// 获取用户信息
	const storedUserInfo = uni.getStorageSync('userInfo');
	if (storedUserInfo) {
		Object.assign(userInfo, storedUserInfo);
	}

	// 检查是否在建行App内
	if (!sheep.$platform.provider === 'ccb') {
		uni.showModal({
			title: '提示',
			content: '请在建行生活App内访问此页面',
			showCancel: false,
			success: () => {
				uni.navigateBack();
			}
		});
	}

	// 加载建行专属活动和商品
	loadCcbActivities();
	loadCcbGoods();
});

// 加载建行活动
const loadCcbActivities = async () => {
	// TODO: 调用API获取建行专属活动
	console.log('加载建行活动');
};

// 加载建行商品
const loadCcbGoods = async () => {
	// TODO: 调用API获取建行专属商品
	console.log('加载建行商品');
};

// 跳转到活动详情
const goToActivity = (item) => {
	sheep.$router.go(item.url);
};

// 查看更多
const goToMore = () => {
	sheep.$router.go('/pages/activity/list', { type: 'ccb' });
};
</script>

<style lang="scss" scoped>
.ccb-banner {
	width: 100%;
	.banner-img {
		width: 100%;
		display: block;
	}
}

.user-section {
	padding: 20rpx;
	background: linear-gradient(180deg, rgb(245,28,19) 0%, #fff 100%);

	.user-card {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);

		.user-avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 20rpx;

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

		.user-info {
			flex: 1;

			.user-nickname {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}

			.user-id {
				font-size: 24rpx;
				color: #999;
			}
		}

		.user-badge {
			padding: 10rpx 20rpx;
			background: linear-gradient(135deg, #ff6b6b 0%, #ff3333 100%);
			border-radius: 30rpx;

			.badge-text {
				color: #fff;
				font-size: 24rpx;
				font-weight: bold;
			}
		}
	}
}

.activity-section,
.goods-section {
	padding: 20rpx;
	background: #fff;
	margin-top: 20rpx;

	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
		margin-bottom: 20rpx;

		.title-text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.more-text {
			font-size: 26rpx;
			color: #999;
		}
	}
}

.activity-list {
	.activity-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}

		.activity-img {
			width: 200rpx;
			height: 100rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.activity-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.activity-title {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}

			.activity-desc {
				font-size: 24rpx;
				color: #666;
				margin: 10rpx 0;
			}

			.activity-tag {
				.tag-text {
					display: inline-block;
					padding: 4rpx 12rpx;
					background: #fff5f5;
					color: #ff3333;
					font-size: 22rpx;
					border-radius: 4rpx;
				}
			}
		}
	}
}

.goods-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.goods-item {
		width: 48%;
		margin-bottom: 20rpx;
		background: #f8f8f8;
		border-radius: 10rpx;
		overflow: hidden;

		.goods-img {
			width: 100%;
			height: 350rpx;
		}

		.goods-info {
			padding: 20rpx;

			.goods-title {
				font-size: 26rpx;
				color: #333;
				margin-bottom: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.goods-price {
				display: flex;
				align-items: baseline;
				margin-bottom: 10rpx;

				.price-unit {
					font-size: 22rpx;
					color: #ff3333;
				}

				.price-value {
					font-size: 32rpx;
					color: #ff3333;
					font-weight: bold;
					margin-right: 10rpx;
				}

				.price-old {
					font-size: 24rpx;
					color: #999;
					text-decoration: line-through;
				}
			}

			.goods-tag {
				.tag-ccb {
					display: inline-block;
					padding: 4rpx 12rpx;
					background: linear-gradient(135deg, #ff6b6b 0%, #ff3333 100%);
					color: #fff;
					font-size: 20rpx;
					border-radius: 4rpx;
				}
			}
		}
	}
}

.bottom-tips {
	padding: 40rpx 0;
	text-align: center;

	.tips-text {
		font-size: 24rpx;
		color: #999;
	}
}
</style>