mirror of
https://gitee.com/liuxioabin/fengketrade.git
synced 2026-04-17 21:03:17 +08:00
427 lines
8.3 KiB
Vue
427 lines
8.3 KiB
Vue
<template>
|
||
<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> |