EpicSoul/pages/index/iSoul.vue

<template>
  <view class="profile-container">
	  <BackButton />
    <view
      class="user-top"
      :style="{
        backgroundImage: `url(${showImg(
          '/uploads/20250728/4ad18fba010760a527d0cf5e24bcf467.png'
        )})`,
      }"
    >
      <!-- 状态栏占位 -->
      <view class="status-bar-placeholder"   :style="{ paddingTop: statusBarHeight + 'px' }"></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 || "0" }}</view>
            <view class="stat-label">关注</view>
          </view>
          <view class="stat-item">
            <view class="stat-number">{{ userStats.followers || "0" }}</view>
            <view class="stat-label">粉丝</view>
          </view>
          <view class="stat-item">
            <view class="stat-number">{{ userStats.likes || "0" }}</view>
            <view class="stat-label">点赞</view>
          </view>
          <view class="stat-item">
            <view class="stat-number">{{ userStats.likes || "0" }}</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>
    

    <!-- 数字资产权益 -->
    <view class="digital-assets">
      <view class="memorial-divider" style="margin-bottom: 0;padding-top: 60rpx;">
        <view class="divider-line"></view>
        <view class="divider-text">我的数字资产权益</view>
        <view class="divider-line"></view>
      </view>
	  <view class="action-box">
	    <image
	      @click="showExchangePopup"
	      src="https://des.dayunyuanjian.cn/data/2025/09/01/3ebc09d5-f526-40ab-b698-d45de81034b7.png"
	      style="width: 233rpx; height: 40rpx"
	    ></image>
	    <view class="column-divider"></view>
	    <image
	      @click="showActivateAgentPopup"
	      src="https://des.dayunyuanjian.cn/data/2025/09/01/6215d940-a57d-4a4f-a69b-df6770132d12.png"
	      style="width: 200rpx; height: 43.6rpx"
	    ></image>
	  </view>
      <!-- 有数据时显示 -->
      <view v-if="assetList.length > 0" class="asset-content">
        <!-- 单个数据时铺满显示 -->
        <template v-if="assetList.length === 1">
          <view style="margin-bottom: 20rpx;" class="asset-card-single" @click="handleAction(assetList[0])">
            <view class="single-card-wrapper">
              <image
                :src="showImgJdsz(assetList[0].image)"
                mode="aspectFill"
                class="asset-img-single"
              ></image>
              <view class="asset-overlay-single">
                <view class="asset-badge-single">{{ assetList[0].badge }}</view>
                <view class="asset-name-single">{{ assetList[0].name }}</view>
                <view class="asset-desc-single">{{ assetList[0].desc }}</view>
                <view class="asset-action-single">
                  <text class="action-text-single">{{
                    assetList[0].actionText
                  }}</text>
                  <text class="action-arrow-single">→</text>
                </view>
              </view>
            </view>
          </view>
        </template>
        <!-- 多个数据时滑动卡片显示 -->
        <template v-else>
          <view 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>
        </template>
      </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('待核销')">
          <uni-badge
            size="small"
            :text="orderStatus && orderStatus[1].orderQuantity"
            absolute="rightTop"
          >
            <text>待核销</text>
          </uni-badge>
        </view>
        <view class="goods-action" @click="handleAssetAction('待收货')">
          <uni-badge
            size="small"
            :text="orderStatus && orderStatus[2].orderQuantity"
            absolute="rightTop"
          >
            <text>待收货</text>
          </uni-badge>
        </view>
        <view class="goods-action" @click="handleAssetAction('已完成')">
          <uni-badge
            size="small"
            :text="orderStatus && orderStatus[3].orderQuantity"
            absolute="rightTop"
          >
            <text>已完成</text>
          </uni-badge>
        </view>
        <view class="goods-action" @click="handleAssetAction('售后/退款')">
          <uni-badge
            size="small"
            :text="orderStatus && orderStatus[4].orderQuantity"
            absolute="rightTop"
          >
            <text>售后/退款</text>
          </uni-badge>
        </view>
      </view>
    </view>

    <!-- 有感商品 -->
    <view class="feeling-goods">
		<view class="memorial-divider" style="margin-bottom: 0;padding-top: 10rpx;">
		  <view class="divider-line"></view>
		  <view class="divider-text">我的有感商品</view>
		  <view class="divider-line"></view>
		</view>
      <view class="goods-card">
        <image
		@click="gotoPath('/subPackages/haveFeeling/list')"
          :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" style="padding-top: 10rpx;">
      <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 />

    <!-- 激活AGENT弹窗 -->
    <ActivateAgentPopup :agentList="agentList" ref="activateAgentPopup" />

    <!-- 权益兑换弹窗 -->
    <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";
import ActivateAgentPopup from "@/components/ActivateAgentPopup.vue";
import BackButton from "@/components/BackButton.vue";
export default {
  components: {
    CustomTabBar,
    MusicControl,
    ActivateAgentPopup,
	BackButton
  },
  data() {
    return {
      userInfo: {},
      defaultAvatar:
        "https://changshu.js-dyyj.com/uploads/20250326/516242619f0772bee371a60684618c01.png",
      userStats: {
        following: "0",
        followers: "0",
        likes: "0",
      },
      menuItems: [
        {
          title: "账号与安全",
          icon: "",
        },
        {
          title: "购物车",
          icon: "",
        },
		
        {
          title: "我的收藏",
          icon: "",
        },
		{
		  title: "我的积分",
		  icon: "",
		},
        {
          title: "地址管理",
          icon: "",
        },
        {
          title: "卡券中心",
          icon: "",
        },
        {
          title: "帮助与客服",
          icon: "",
        },
      ],
      exchangeCode: "", // 兑换码
      memorialItems: [],
      assetList: [],
      agentList: [],
      orderStatus: [],
	  statusBarHeight:0
    };
  },
  onLoad() {
    // 页面加载时的初始化逻辑
  },
  mounted() {
  	this.setStatusBarHeight()
  },
  onShow() {
    console.log(uni.getStorageSync("userInfo"));
    this.userInfo =
      (uni.getStorageSync("userInfo") &&
        JSON.parse(uni.getStorageSync("userInfo"))) ||
      this.$store.state.user.userInfo ||
      {};
    if (this.userInfo && this.userInfo.id) {
      this.getListIp();
      this.getOrderChildList();
      this.getUserInfo();
      this.getAgentList();
      this.getOrderStatus();
    }
  },
  methods: {
	  setStatusBarHeight() {
	    try {
	      const systemInfo = uni.getSystemInfoSync();
	      this.statusBarHeight = systemInfo.statusBarHeight || 0;
	    } catch (e) {
	      // 开发工具或获取失败时使用默认值
	      this.statusBarHeight = 0;
	    }
	  },
    getOrderStatus() {
      this.Post({}, "/framework/order/orderCountByStatus", "DES").then(
        (res) => {
          this.orderStatus = res.data;
        }
      );
    },
    getAgentList() {
      this.Post({}, "/framework/agent/purchaseList", "DES").then((res) => {
        this.agentList = res.data;
      });
    },
    getUserInfo() {
      this.Post({}, "/framework/user/getInfo", "DES").then((res) => {
        res.data.token = this.userInfo.token;
        uni.setStorageSync("userInfo", JSON.stringify(res.data));
        this.userInfo = res.data;
      });
    },
    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.navigateTo({
		     url: "/subPackages/points/index",
		   });
		   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) {
		console.log(item)
      if (item.type == 1) {
        uni.navigateTo({
          url: "/subPackages/memorialAlbum/detail?id=" + item.childId,
        });
      } else if (item.type == 2) {
		if (item.isVerify == 0) {
		  uni.navigateTo({
			   url: `/subPackages/orderQy/confrim?goodsId=${item.goodsId}&orderChildId=${item.childId}`,
			 });
		} else {
		  uni.navigateTo({
		    url: `/subPackages/orderQy/confrimWriteOff?goodsId=${item.goodsId}&orderChildId=${item.childId}`,
		  });
		}
      } else {
        this.toJdszWx(
          "pages/user/order/sceneOrderInfo/index?id=" + item.thirdOrderId
        );
      }
    },

    // 数字资产权益点击
    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/haveFeeling/list?status=2",
          });
          break;
        default:
		uni.showToast({
			title:'功能暂未开放',
			icon:'none'
		})
      }
    },
    // 纪念册卡片点击
    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",
          });
        }
      });
    },

    // 显示激活AGENT弹窗
    showActivateAgentPopup() {
      this.$refs.activateAgentPopup.openPopup();
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .uni-popup {
  z-index: 999 !important;
}
::v-deep .back-btn{
	background-color: transparent !important;
}
view {
  box-sizing: border-box;
}

.profile-container {
  background: white;
  color: white;
}

/* 状态栏占位 */
.status-bar-placeholder {
  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-content {
  width: 100%;
}

/* 单个数据铺满显示样式 */
.asset-card-single {
  width: 100%;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 15rpx 12rpx rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  position: relative;
}

.asset-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;
}

.asset-img-single {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.asset-card-single:active .asset-img-single {
  transform: scale(1.05);
}

.asset-overlay-single {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 1));
  padding: 60rpx 30rpx 30rpx;
  color: white;
}

.asset-badge-single {
  background: linear-gradient(135deg, #fffdb7 0%, #97fffa 100%);
  color: black;
  font-size: 22rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  display: inline-block;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.asset-name-single {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  line-height: 1.3;
}

.asset-desc-single {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20rpx;
  line-height: 1.4;
}

.asset-action-single {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #fffdb7e6 0%, #97fffab5 100%);
  border-radius: 25rpx;
  padding: 12rpx 20rpx;
  backdrop-filter: blur(10rpx);
}

.action-text-single {
  font-size: 28rpx;
  font-weight: bold;
  color: black;
}

.action-arrow-single {
  font-size: 28rpx;
  font-weight: bold;
  color: black;
  transition: transform 0.3s ease;
}

.asset-card-single:active .action-arrow-single {
  transform: translateX(6rpx);
}

.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, 1));
  padding: 40rpx 30rpx 30rpx;
  color: white;
  // backdrop-filter: blur(10rpx);
  width: 100%;
  height: 100%;
}

.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;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.asset-desc {
  font-size: 34rpx;
  color: white;
  margin-bottom: 16rpx;
  font-weight: bold;
  line-height: 1.4;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
}

.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);
  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: 50rpx 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: 50rpx;
  background: rgba(0, 0, 0, 0.1);
  margin: 0rpx 16rpx;
  flex-shrink: 0;
}

.action-box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0rpx 40rpx 37rpx;
}

.popup-actions-bottom {
  color: #989898;
  font-weight: bold;
  font-size: 28rpx;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}
</style>