You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1593 lines
34 KiB
1593 lines
34 KiB
<template>
|
|
<view class="profile-container">
|
|
<view
|
|
class="user-top"
|
|
:style="{
|
|
backgroundImage: `url(${showImg(
|
|
'/uploads/20250728/4ad18fba010760a527d0cf5e24bcf467.png'
|
|
)})`,
|
|
}"
|
|
>
|
|
<!-- 状态栏占位 -->
|
|
<view class="status-bar-placeholder"></view>
|
|
<!-- 顶部导航 -->
|
|
<view class="header">
|
|
<!-- <view class="back-btn" @click="goBack">
|
|
<text class="iconfont">‹</text>
|
|
</view>
|
|
<view class="more-btn">
|
|
<text class="dots">⋯</text>
|
|
</view> -->
|
|
</view>
|
|
<!-- 用户信息区域 -->
|
|
<view class="user-section" @click="gotoProfile">
|
|
<view class="user-avatar">
|
|
<image
|
|
:src="userInfo.avatar ? showImg(userInfo.avatar) : defaultAvatar"
|
|
mode="aspectFill"
|
|
class="avatar-img"
|
|
></image>
|
|
</view>
|
|
<view class="user-info">
|
|
<view class="username"
|
|
>{{ userInfo.nickname || "去登录"
|
|
}}<uni-icons
|
|
type="right"
|
|
size="16"
|
|
style="margin-left: 10rpx"
|
|
color="#ffffff"
|
|
/></view>
|
|
<view class="user-id" v-if="userInfo.redBookId"
|
|
>ID：{{ userInfo.redBookId || "123456" }}</view
|
|
>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 城市艺术漫游 -->
|
|
<view class="city-art">
|
|
<view class="city-title">
|
|
<!-- <text class="pin-icon">📍</text> -->
|
|
<text>城市艺术漫游</text>
|
|
</view>
|
|
<!-- <view class="city-name">上海</view>
|
|
<view class="gender-icon">♀</view> -->
|
|
</view>
|
|
|
|
<!-- 统计数据 -->
|
|
<view class="stats-section">
|
|
<view class="stats-left">
|
|
<view class="stat-item">
|
|
<view class="stat-number">{{ userStats.following || "140" }}</view>
|
|
<view class="stat-label">关注</view>
|
|
</view>
|
|
<view class="stat-item">
|
|
<view class="stat-number">{{ userStats.followers || "2462" }}</view>
|
|
<view class="stat-label">粉丝</view>
|
|
</view>
|
|
<view class="stat-item">
|
|
<view class="stat-number">{{ userStats.likes || "5.4万" }}</view>
|
|
<view class="stat-label">获赞与收藏</view>
|
|
</view>
|
|
</view>
|
|
<!-- 权益兑换入口 -->
|
|
<!-- <view class="exchange-entry" @click="showExchangePopup">
|
|
<view class="exchange-icon">🎁</view>
|
|
<view class="exchange-text">权益兑换</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<!-- 待激活的Agent -->
|
|
<view class="agent-section" v-if="false">
|
|
<view class="agent-header">
|
|
<view class="agent-title">待激活的Agent</view>
|
|
</view>
|
|
<view class="agent-content">
|
|
<scroll-view
|
|
class="agent-scroll"
|
|
scroll-x="true"
|
|
:show-scrollbar="false"
|
|
:enhanced="true"
|
|
>
|
|
<view class="agent-avatars">
|
|
<view
|
|
class="agent-avatar"
|
|
v-for="(agent, index) in agentList"
|
|
:key="index"
|
|
>
|
|
<image
|
|
:src="agent.avatar"
|
|
mode="aspectFill"
|
|
class="agent-img"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<!-- 操作按钮 -->
|
|
<!-- <view class="action-buttons">
|
|
<view class="follow-btn" @click="followUser">
|
|
<text>关注</text>
|
|
</view>
|
|
<view class="message-btn" @click="sendMessage">
|
|
<text>私信</text>
|
|
</view>
|
|
</view> -->
|
|
<view class="action-box">
|
|
<image
|
|
@click="showExchangePopup"
|
|
:src="showImg('/uploads/20250822/7f18265ca351dfd2d6477322b17c1751.png')"
|
|
style="width: 233rpx;height: 43rpx;"
|
|
></image>
|
|
<view class="column-divider"></view>
|
|
<image
|
|
:src="showImg('/uploads/20250822/53718d0d8a655ac33d7197ad11a32f98.png')"
|
|
style="width: 200rpx;height: 43rpx;"
|
|
></image>
|
|
</view>
|
|
|
|
<!-- 数字资产权益 -->
|
|
<view class="digital-assets">
|
|
<view class="memorial-divider" style="margin-bottom: 0;">
|
|
<view class="divider-line"></view>
|
|
<view class="divider-text">数字资产权益</view>
|
|
<view class="divider-line"></view>
|
|
</view>
|
|
<!-- 有数据时显示滑动卡片 -->
|
|
<view v-if="assetList.length > 0" class="asset-scroll-container">
|
|
<scroll-view
|
|
class="asset-scroll"
|
|
scroll-x="true"
|
|
:show-scrollbar="false"
|
|
:enhanced="true"
|
|
>
|
|
<view class="asset-cards">
|
|
<view
|
|
class="asset-card"
|
|
v-for="(asset, index) in assetList"
|
|
:key="index"
|
|
@click="handleAction(asset)"
|
|
>
|
|
<view class="asset-card-wrapper">
|
|
<image
|
|
:src="showImgJdsz(asset.image)"
|
|
mode="aspectFill"
|
|
class="asset-img"
|
|
></image>
|
|
<view class="asset-overlay">
|
|
<view class="asset-badge">{{ asset.badge }}</view>
|
|
<view class="asset-name">{{ asset.name }}</view>
|
|
<view class="asset-desc">{{ asset.desc }}</view>
|
|
<view
|
|
class="asset-action"
|
|
style="flex-direction: row; padding: 20rpx"
|
|
>
|
|
<text class="action-text-order">{{ asset.actionText }}</text>
|
|
<text class="action-arrow-order">→</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 无数据时显示原来的图片风格 -->
|
|
<view v-else class="asset-card-old">
|
|
<image
|
|
@click="handleAssetAction('待使用')"
|
|
:src="
|
|
showImg('/uploads/20250729/42598a2dcf4c9a6f8c6e122e54b65c4f.png')
|
|
"
|
|
mode="aspectFill"
|
|
class="digital-img"
|
|
></image>
|
|
</view>
|
|
|
|
<!-- 底部操作按钮 -->
|
|
<view class="goods-actions">
|
|
<view class="goods-action " @click="handleAssetAction('待使用')">
|
|
<text>待使用</text>
|
|
</view>
|
|
<view class="goods-action" @click="handleAssetAction('待收货')">
|
|
<text>待收货</text>
|
|
</view>
|
|
<view class="goods-action" @click="handleAssetAction('已完成')">
|
|
<text>已完成</text>
|
|
</view>
|
|
<view class="goods-action" @click="handleAssetAction('售后/退款')">
|
|
<text>售后/退款</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 有感商品 -->
|
|
<view class="feeling-goods">
|
|
<view class="goods-card">
|
|
<image
|
|
:src="
|
|
showImg('/uploads/20250729/a010feb51e3f195563fb440f9235cc8b.png')
|
|
"
|
|
mode="aspectFill"
|
|
class="digital-img"
|
|
></image>
|
|
<view class="goods-actions">
|
|
<view
|
|
class="goods-action "
|
|
@click="handleGoodsAction('购物车')"
|
|
>
|
|
<text>购物车</text>
|
|
</view>
|
|
<view class="goods-action" @click="handleGoodsAction('待发货')">
|
|
<text>待发货</text>
|
|
</view>
|
|
<view class="goods-action" @click="handleGoodsAction('退货/退款')">
|
|
<text>退货/退款</text>
|
|
</view>
|
|
<view class="goods-action" @click="handleGoodsAction('评价')">
|
|
<text>评价</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 数字资产纪念册 -->
|
|
<view class="memorial-section">
|
|
<view class="memorial-divider">
|
|
<view class="divider-line"></view>
|
|
<view class="divider-text">数字资产纪念册</view>
|
|
<view class="divider-line"></view>
|
|
</view>
|
|
<!-- 有数据时显示 -->
|
|
<view
|
|
class="memorial-cards"
|
|
v-if="memorialItems.length > 0"
|
|
:class="{ 'single-item': memorialItems.length === 1 }"
|
|
>
|
|
<!-- 单条数据特殊展示 -->
|
|
<template v-if="memorialItems.length === 1">
|
|
<view class="memorial-card-single" @click="handleMemorialClick(0)">
|
|
<view class="single-card-wrapper">
|
|
<image
|
|
:src="showImg(memorialItems[0].goodsImg)"
|
|
mode="aspectFill"
|
|
class="memorial-img-single"
|
|
></image>
|
|
<view class="single-overlay">
|
|
<view class="single-badge">专属纪念册</view>
|
|
<view class="single-title">{{
|
|
memorialItems[0].goodsTitle || "数字资产纪念册"
|
|
}}</view>
|
|
<view class="single-desc">{{ memorialItems[0].code }}</view>
|
|
<view class="single-action">
|
|
<text class="action-text">立即查看</text>
|
|
<text class="action-arrow">→</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<!-- 多条数据正常展示 -->
|
|
<template v-else>
|
|
<view
|
|
class="memorial-card"
|
|
v-for="(item, index) in memorialItems"
|
|
:key="index"
|
|
@click="handleMemorialClick(index)"
|
|
>
|
|
<image
|
|
:src="showImg(item.goodsImg)"
|
|
mode="aspectFill"
|
|
class="memorial-img"
|
|
></image>
|
|
<view class="memorial-info">
|
|
<text class="memorial-title">{{
|
|
item.goodsTitle || "数字资产纪念册"
|
|
}}</text>
|
|
<text class="memorial-more">MORE</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<!-- 无数据时显示 -->
|
|
<view class="memorial-empty" v-else>
|
|
<view class="empty-content">
|
|
<view class="empty-icon">📖</view>
|
|
<text class="empty-title">暂无纪念册</text>
|
|
<text class="empty-desc">您还没有数字资产纪念册</text>
|
|
<text class="empty-tip">快去购买数字资产创建您的专属纪念册吧</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部菜单 -->
|
|
<view class="bottom-menu">
|
|
<view
|
|
class="menu-item"
|
|
v-for="(item, index) in menuItems"
|
|
:key="index"
|
|
@click="handleMenuClick(item)"
|
|
>
|
|
<text>{{ item.title }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<CustomTabBar :currentTab="4" />
|
|
<MusicControl />
|
|
|
|
<!-- 权益兑换弹窗 -->
|
|
<uni-popup ref="exchangePopup" type="center">
|
|
<view class="exchange-popup">
|
|
<view class="popup-header">
|
|
<text class="popup-title">权益兑换</text>
|
|
<text class="popup-close" @click="closeExchangePopup">×</text>
|
|
</view>
|
|
<view class="popup-content">
|
|
<view class="input-section">
|
|
<text class="input-label">请输入兑换码</text>
|
|
<input
|
|
class="exchange-input"
|
|
v-model="exchangeCode"
|
|
placeholder="请输入兑换码"
|
|
/>
|
|
</view>
|
|
<view class="popup-actions">
|
|
<button class="cancel-btn" @click="closeExchangePopup">取消</button>
|
|
<button class="confirm-btn" @click="confirmExchange">
|
|
确认兑换
|
|
</button>
|
|
</view>
|
|
<view class="popup-actions-bottom">
|
|
<view class="" style="color: #77F3F9;">
|
|
如何查找兑换码
|
|
</view>
|
|
<view class="">
|
|
前往「君到苏州」平台<text style="color: #77F3F9;margin: 0 10rpx;">>></text>
|
|
【我的】→【权益订单】<text style="color: #77F3F9;margin: 0 10rpx;">>></text>复制权益码
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from "moment";
|
|
import CustomTabBar from "@/components/CustomTabBar.vue";
|
|
import MusicControl from "@/components/MusicControl.vue";
|
|
export default {
|
|
components: {
|
|
CustomTabBar,
|
|
MusicControl,
|
|
},
|
|
data() {
|
|
return {
|
|
userInfo: {},
|
|
defaultAvatar:
|
|
"https://changshu.js-dyyj.com/uploads/20250326/516242619f0772bee371a60684618c01.png",
|
|
userStats: {
|
|
following: "140",
|
|
followers: "2462",
|
|
likes: "5.4万",
|
|
},
|
|
agentList: [
|
|
{
|
|
avatar:
|
|
"https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png",
|
|
},
|
|
{
|
|
avatar:
|
|
"https://epic.js-dyyj.com/uploads/20250728/d7bf0dd2f3f272afba687b525a7c575c.png",
|
|
},
|
|
{
|
|
avatar:
|
|
"https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png",
|
|
},
|
|
{
|
|
avatar:
|
|
"https://epic.js-dyyj.com/uploads/20250728/d7bf0dd2f3f272afba687b525a7c575c.png",
|
|
},
|
|
],
|
|
menuItems: [
|
|
{
|
|
title: "账号与安全",
|
|
icon: "🔒",
|
|
},
|
|
{
|
|
title: "购物车",
|
|
icon: "🛒",
|
|
},
|
|
{
|
|
title: "我的收藏",
|
|
icon: "💬",
|
|
},
|
|
{
|
|
title: "地址管理",
|
|
icon: "📍",
|
|
},
|
|
{
|
|
title: "卡券中心",
|
|
icon: "🎫",
|
|
},
|
|
{
|
|
title: "帮助与客服",
|
|
icon: "💬",
|
|
},
|
|
],
|
|
exchangeCode: "", // 兑换码
|
|
memorialItems: [],
|
|
assetList: [
|
|
|
|
],
|
|
};
|
|
},
|
|
onLoad() {
|
|
// 页面加载时的初始化逻辑
|
|
console.log("iSoul页面加载完成");
|
|
},
|
|
onShow() {
|
|
this.userInfo =
|
|
(uni.getStorageSync("userInfo") &&
|
|
JSON.parse(uni.getStorageSync("userInfo"))) ||
|
|
this.$store.state.user.userInfo ||
|
|
{};
|
|
console.log(this.userInfo);
|
|
if (this.userInfo && this.userInfo.token) {
|
|
this.getListIp();
|
|
this.getOrderChildList();
|
|
}
|
|
},
|
|
methods: {
|
|
getListIp() {
|
|
this.Post({}, "/framework/order/ipOrderList", "DES").then((res) => {
|
|
if (res.code == 200) {
|
|
if (res.data) {
|
|
this.memorialItems = res.data.slice(0, 2);
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: "none",
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
// 获取可使用的商品列表
|
|
getOrderChildList() {
|
|
this.Post({}, "/framework/order/orderChildList", "DES")
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
if (res.data && res.data.length > 0) {
|
|
// 将接口返回的数据转换为assetList格式
|
|
this.assetList = res.data.map((item) => ({
|
|
image:
|
|
item.goodsImg ||
|
|
"/uploads/20250729/42598a2dcf4c9a6f8c6e122e54b65c4f.png",
|
|
badge: "待使用",
|
|
name: item.goodsTitle || "数字资产权益",
|
|
desc: item.type==1?'IP数字资产':item.type==2?'IP周边': item.skuName,
|
|
actionText:item.type==1?'去查看':item.type==2?'去预约': "去核销",
|
|
status: "待使用",
|
|
...item, // 保留原始数据
|
|
}));
|
|
} else {
|
|
// 如果没有数据，清空assetList，这样会显示原来的图片风格
|
|
this.assetList = [];
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg || "获取商品列表失败",
|
|
icon: "none",
|
|
});
|
|
// 接口失败时也清空数据，显示原来的图片风格
|
|
this.assetList = [];
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("获取商品列表失败:", error);
|
|
uni.showToast({
|
|
title: "获取商品列表失败",
|
|
icon: "none",
|
|
});
|
|
this.assetList = [];
|
|
});
|
|
},
|
|
// 返回上一页
|
|
goBack() {
|
|
uni.navigateBack();
|
|
},
|
|
// 关注用户
|
|
followUser() {
|
|
uni.showToast({
|
|
title: "关注成功",
|
|
icon: "success",
|
|
});
|
|
},
|
|
// 发送私信
|
|
sendMessage() {
|
|
uni.navigateTo({
|
|
url: "/pages/chat/chat",
|
|
});
|
|
},
|
|
// 处理菜单点击
|
|
handleMenuClick(item) {
|
|
switch (item.title) {
|
|
case "账号与安全":
|
|
uni.navigateTo({
|
|
url: "/subPackages/user/privacy",
|
|
});
|
|
break;
|
|
case "购物车":
|
|
uni.navigateTo({
|
|
url: "/subPackages/user/gwc",
|
|
});
|
|
break;
|
|
case "地址管理":
|
|
uni.navigateTo({
|
|
url: "/subPackages/user/travelerList",
|
|
});
|
|
break;
|
|
case "卡券中心":
|
|
uni.navigateTo({
|
|
url: "/subPackages/user/coupon",
|
|
});
|
|
break;
|
|
case "我的收藏":
|
|
uni.navigateTo({
|
|
url: "/subPackages/user/collection",
|
|
});
|
|
break;
|
|
case "帮助与客服":
|
|
uni.showModal({
|
|
title: "客服电话",
|
|
content:
|
|
"0515-69186109\n服务时间：周一至周五\n9:00-12:00，13:00-18:00",
|
|
confirmText: "拨打",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: "0515-69186109",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
break;
|
|
default:
|
|
uni.showToast({
|
|
title: item.title,
|
|
icon: "none",
|
|
});
|
|
}
|
|
},
|
|
// 个人信息或登录
|
|
gotoProfile() {
|
|
// 有token去个人信息，没有去登录
|
|
if (this.userInfo.token) {
|
|
uni.navigateTo({
|
|
url: "/subPackages/user/profile",
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: "/pages/login/login",
|
|
});
|
|
}
|
|
},
|
|
handleAction(item){
|
|
if(item.type==1){
|
|
uni.navigateTo({
|
|
url: "/subPackages/memorialAlbum/detail?id=" + item.childId,
|
|
});
|
|
}else if(item.type==2){
|
|
uni.navigateTo({
|
|
url: `/subPackages/orderQy/confrim?goodsId=${item.goodsId}&orderChildId=${item.childId}`,
|
|
});
|
|
}else{
|
|
uni.showToast({
|
|
title: "使用门票",
|
|
icon: "none",
|
|
});
|
|
}
|
|
|
|
},
|
|
|
|
// 数字资产权益点击
|
|
handleAssetAction(action, asset = null) {
|
|
// 如果传入了具体的asset对象，说明是点击了滑动卡片中的某个商品
|
|
if (asset && asset.orderId) {
|
|
// 这里可以根据需要跳转到具体的商品详情页面
|
|
uni.navigateTo({
|
|
url: `/subPackages/orderQy/detail?id=${asset.orderId}`,
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 否则是点击底部操作按钮
|
|
switch (action) {
|
|
case "待使用":
|
|
uni.navigateTo({
|
|
url: "/subPackages/orderQy/list?status=1",
|
|
});
|
|
break;
|
|
case "待收货":
|
|
uni.navigateTo({
|
|
url: "/subPackages/orderQy/list?status=2",
|
|
});
|
|
break;
|
|
case "已完成":
|
|
uni.navigateTo({
|
|
url: "/subPackages/orderQy/list?status=3",
|
|
});
|
|
break;
|
|
case "售后/退款":
|
|
uni.navigateTo({
|
|
url: "/subPackages/orderQy/list?status=4",
|
|
});
|
|
break;
|
|
default:
|
|
uni.navigateTo({
|
|
url: "/subPackages/orderQy/list",
|
|
});
|
|
break;
|
|
}
|
|
},
|
|
showImgJdsz(img) {
|
|
if (!img) return;
|
|
if (img.indexOf("https://") != -1 || img.indexOf("http://") != -1) {
|
|
return img;
|
|
} else {
|
|
return this.JDSU_IMG_URL + img;
|
|
}
|
|
},
|
|
// 有感商品点击
|
|
handleGoodsAction(action) {
|
|
switch (action) {
|
|
case "购物车":
|
|
uni.navigateTo({
|
|
url: "/subPackages/user/gwc",
|
|
});
|
|
break;
|
|
case "待发货":
|
|
uni.navigateTo({
|
|
url: "/subPackages/order/trades?status=POST",
|
|
});
|
|
break;
|
|
case "退货/退款":
|
|
uni.navigateTo({
|
|
url: "/subPackages/order/trades?status=WAIT_REFUND",
|
|
});
|
|
break;
|
|
case "评价":
|
|
uni.navigateTo({
|
|
url: "/subPackages/order/trades?status=WAIT_COMMENT",
|
|
});
|
|
break;
|
|
}
|
|
},
|
|
// 纪念册卡片点击
|
|
handleMemorialClick(index) {
|
|
// 点击任何纪念册卡片都跳转到数字资产纪念册页面
|
|
uni.navigateTo({
|
|
url: "/subPackages/memorialAlbum/index",
|
|
});
|
|
},
|
|
|
|
// 显示权益兑换弹窗
|
|
showExchangePopup() {
|
|
this.exchangeCode = ""; // 清空输入框
|
|
this.$refs.exchangePopup.open();
|
|
},
|
|
|
|
// 关闭权益兑换弹窗
|
|
closeExchangePopup() {
|
|
this.$refs.exchangePopup.close();
|
|
},
|
|
|
|
// 确认兑换
|
|
async confirmExchange() {
|
|
if (!this.exchangeCode.trim()) {
|
|
uni.showToast({
|
|
title: "请输入兑换码",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.Post(
|
|
{
|
|
activeCode: this.exchangeCode.trim(),
|
|
},
|
|
"/framework/order/active",
|
|
"DES"
|
|
).then((res) => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: "兑换成功，为您跳转订单页~",
|
|
icon: "none",
|
|
});
|
|
this.closeExchangePopup();
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: "/subPackages/orderQy/list",
|
|
});
|
|
}, 2000);
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: "none",
|
|
});
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
view {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.profile-container {
|
|
background: white;
|
|
color: white;
|
|
}
|
|
|
|
/* 状态栏占位 */
|
|
.status-bar-placeholder {
|
|
height: var(--status-bar-height);
|
|
width: 100%;
|
|
}
|
|
|
|
/* 顶部导航 */
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 48px;
|
|
}
|
|
|
|
.back-btn,
|
|
.more-btn {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 40rpx;
|
|
color: white;
|
|
}
|
|
|
|
.dots {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 用户信息区域 */
|
|
.user-section {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 40rpx 30rpx;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.avatar-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.user-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.username {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: white;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.user-id {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.location {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.location-icon,
|
|
.info-icon {
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
/* 城市艺术漫游 */
|
|
.city-art {
|
|
padding: 0 40rpx 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.city-title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.pin-icon {
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.city-name {
|
|
font-size: 28rpx;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.gender-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
/* 统计数据 */
|
|
.stats-section {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 80rpx;
|
|
padding-bottom: 50rpx;
|
|
padding: 0 40rpx;
|
|
}
|
|
|
|
.stats-left {
|
|
display: flex;
|
|
gap: 60rpx;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
min-width: 80rpx;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: white;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
/* 权益兑换入口 */
|
|
.exchange-entry {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 16rpx;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 20rpx;
|
|
min-width: 120rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
.exchange-icon {
|
|
font-size: 32rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.exchange-text {
|
|
font-size: 22rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 操作按钮 */
|
|
.action-buttons {
|
|
display: flex;
|
|
padding: 0 40rpx 40rpx;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.follow-btn {
|
|
flex: 1;
|
|
background: #ff4757;
|
|
border-radius: 50rpx;
|
|
padding: 20rpx;
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.message-btn {
|
|
flex: 1;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 50rpx;
|
|
padding: 20rpx;
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 待激活的Agent */
|
|
.agent-section {
|
|
margin: 0 47rpx;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 0rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx 0;
|
|
}
|
|
|
|
.agent-header {
|
|
margin-right: 30rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.agent-title {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.agent-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.agent-scroll {
|
|
width: 430rpx;
|
|
white-space: nowrap;
|
|
/* 微信小程序隐藏横向滚动条 */
|
|
overflow: hidden;
|
|
|
|
/* Webkit浏览器 */
|
|
&::-webkit-scrollbar {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
/* Firefox */
|
|
scrollbar-width: none;
|
|
/* IE和Edge */
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.agent-avatars {
|
|
display: inline-flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.agent-avatar {
|
|
width: 104rpx;
|
|
height: 104rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.agent-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 数字资产权益 */
|
|
.digital-assets {
|
|
margin: 0 30rpx 30rpx;
|
|
}
|
|
|
|
.asset-header {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.asset-title {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.asset-scroll-container {
|
|
}
|
|
|
|
.asset-scroll {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
/* 微信小程序隐藏横向滚动条 */
|
|
&::-webkit-scrollbar {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
/* Firefox */
|
|
scrollbar-width: none;
|
|
/* IE和Edge */
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.asset-cards {
|
|
display: inline-flex;
|
|
gap: 20rpx;
|
|
padding: 30rpx 10rpx;
|
|
}
|
|
|
|
.asset-card {
|
|
width: 500rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 15rpx 12rpx rgba(0, 0, 0, 0.15);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.asset-card:active {
|
|
transform: scale(0.98);
|
|
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.asset-card-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 300rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.asset-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.asset-card:active .asset-img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.asset-overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
|
padding: 40rpx 30rpx 30rpx;
|
|
color: white;
|
|
backdrop-filter: blur(10rpx);
|
|
border: 1rpx solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.asset-badge {
|
|
background: linear-gradient(135deg, #fffdb7 0%, #97fffa 100%);
|
|
color: black;
|
|
font-size: 20rpx;
|
|
padding: 6rpx 12rpx;
|
|
border-radius: 16rpx;
|
|
display: inline-block;
|
|
margin-bottom: 12rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.asset-name {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
margin-bottom: 6rpx;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.asset-desc {
|
|
font-size: 34rpx;
|
|
color: white;
|
|
margin-bottom: 16rpx;
|
|
font-weight: bold;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.asset-action {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: linear-gradient(135deg, #fffdb7e6 0%, #97fffab5 100%);
|
|
border-radius: 20rpx;
|
|
padding: 10rpx 16rpx;
|
|
backdrop-filter: blur(10rpx);
|
|
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
.action-text-order {
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
color: black;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.action-arrow {
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
color: white;
|
|
transition: transform 0.3s ease;
|
|
flex-shrink: 0;
|
|
margin-left: 8rpx;
|
|
}
|
|
.action-arrow-order{
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
color: black;
|
|
transition: transform 0.3s ease;
|
|
flex-shrink: 0;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.asset-card:active .action-arrow {
|
|
transform: translateX(6rpx);
|
|
}
|
|
|
|
/* 原来的图片风格 */
|
|
.asset-card-old {
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 底部操作按钮 */
|
|
.asset-actions {
|
|
display: flex;
|
|
padding: 20rpx 0;
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
font-size: 25rpx;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.action-icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.action-icon.red {
|
|
background: #ff4757;
|
|
}
|
|
|
|
.action-icon.gray {
|
|
background: #ccc;
|
|
}
|
|
|
|
/* 有感商品 */
|
|
.feeling-goods {
|
|
margin: 20rpx 30rpx 30rpx;
|
|
}
|
|
|
|
.goods-card {
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.goods-bg {
|
|
padding: 40rpx 30rpx 20rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.goods-title {
|
|
font-size: 32rpx;
|
|
color: white;
|
|
font-weight: bold;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.goods-brand {
|
|
font-size: 36rpx;
|
|
color: white;
|
|
font-weight: bold;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.goods-subtitle {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.goods-actions {
|
|
display: flex;
|
|
background: white;
|
|
}
|
|
|
|
.goods-action {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20rpx 10rpx;
|
|
font-size: 26rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.goods-action.active {
|
|
color: #ff4757;
|
|
}
|
|
|
|
/* 数字资产纪念册 */
|
|
.memorial-section {
|
|
margin: 0 47rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.memorial-divider {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx 0;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.divider-line {
|
|
flex: 1;
|
|
height: 2rpx;
|
|
background: #e0e0e0;
|
|
}
|
|
|
|
.divider-text {
|
|
padding: 0 30rpx;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.memorial-cards {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
/* 单条数据特殊展示样式 */
|
|
.memorial-card-single {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.memorial-card-single:active {
|
|
transform: scale(0.98);
|
|
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.single-card-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 400rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.memorial-img-single {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.memorial-card-single:active .memorial-img-single {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.single-overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
|
padding: 60rpx 30rpx 30rpx;
|
|
color: white;
|
|
}
|
|
|
|
.single-badge {
|
|
background: linear-gradient(135deg, #77F3F9 0%, #764ba2 100%);
|
|
color: white;
|
|
font-size: 22rpx;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
display: inline-block;
|
|
margin-bottom: 16rpx;
|
|
font-weight: 500;
|
|
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.single-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 8rpx;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.single-desc {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 20rpx;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.single-action {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 25rpx;
|
|
padding: 12rpx 20rpx;
|
|
backdrop-filter: blur(10rpx);
|
|
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.action-text {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: white;
|
|
}
|
|
|
|
.action-arrow {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: white;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.memorial-card-single:active .action-arrow {
|
|
transform: translateX(6rpx);
|
|
}
|
|
|
|
.memorial-card {
|
|
flex: 1;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
background: white;
|
|
}
|
|
|
|
.memorial-img {
|
|
width: 100%;
|
|
height: 425rpx;
|
|
}
|
|
|
|
.memorial-info {
|
|
padding: 20rpx 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.memorial-title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 22rpx;
|
|
color: #000000;
|
|
flex: 1;
|
|
}
|
|
|
|
.memorial-more {
|
|
font-size: 14rpx;
|
|
color: #999;
|
|
}
|
|
|
|
/* 无数据时的空状态样式 */
|
|
.memorial-empty {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 280rpx;
|
|
}
|
|
|
|
.empty-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
color: #333333;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 80rpx;
|
|
margin-bottom: 20rpx;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.empty-title {
|
|
font-size: 32rpx;
|
|
color: white;
|
|
font-weight: 500;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.empty-desc {
|
|
font-size: 26rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.empty-tip {
|
|
font-size: 24rpx;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* 底部菜单 */
|
|
.bottom-menu {
|
|
padding: 40rpx 30rpx;
|
|
background: white;
|
|
margin: 0 30rpx;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.menu-item {
|
|
padding: 30rpx 0;
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.menu-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
// 用户顶部背景区域
|
|
.user-top {
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.digital-img {
|
|
height: 265rpx;
|
|
width: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
/* 权益兑换弹窗 */
|
|
.exchange-popup {
|
|
width: 600rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.popup-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.popup-close {
|
|
font-size: 40rpx;
|
|
color: #999;
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
.popup-content {
|
|
padding: 40rpx 30rpx 30rpx;
|
|
}
|
|
|
|
.input-section {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.input-label {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.exchange-input {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
border: 2rpx solid #e0e0e0;
|
|
border-radius: 12rpx;
|
|
padding: 0 20rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
box-sizing: border-box;
|
|
|
|
&:focus {
|
|
border-color: #77F3F9;
|
|
}
|
|
}
|
|
|
|
.popup-actions {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.cancel-btn,
|
|
.confirm-btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
border-radius: 12rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
.cancel-btn {
|
|
background: #f5f5f5;
|
|
color: #77F3F9;
|
|
}
|
|
|
|
.confirm-btn {
|
|
background: #77F3F9;
|
|
color: #000000;
|
|
}
|
|
.column-divider {
|
|
width: 2rpx;
|
|
height: 60rpx;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
margin: 35rpx 16rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.action-box{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
padding: 20rpx 40rpx 0;
|
|
}
|
|
|
|
.popup-actions-bottom{
|
|
color: #989898;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
margin-top: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
</style>
|
|
|