wxapp_shuibei/pages/user/index.vue

<template>
  <view class="container">
    <up-navbar
        class="inde-nav-bar"
        :bgColor="navBgColor"
    >
      <template #left>
        <view></view>
      </template>
      <template #center>
        <view class="page-title">我的</view>
      </template>
    </up-navbar>
    <!-- 顶部用户信息 -->
    <view class="user-header">
      <view class="user-info">
        <view class="user-main">
          <view>
            <image
                class="avatar"
                :src="isHttpsImage(appStore.$userInfo?.avatar)"
            ></image>
          </view>
          <view class="user-detail">
            <view class="name-vip" v-if="appStore.isLogin">
              <text class="name">{{ appStore.$userInfo?.nickname }}</text>
              <image class="vip-tag" v-if="appStore.$userInfo?.svip" mode="widthFix" :src="HTTP_REQUEST_URL_IMG+'sviplogo.png'"></image>
            </view>
            <view class="name-vip" v-else @click="navigateTo('/pages/users/login/index')">
              <text class="name">未登录</text>
            </view>

            <text class="vip-expire" v-if="appStore.$userInfo?.svip">到期时间：{{ appStore.$userInfo?.svipExpireTime }}</text>
          </view>
        </view>
        <view class="btn-content" @click="handleEdit()">
          <image class="setting" :src="HTTP_REQUEST_URL_IMG+'setting.png'" mode="widthFix"></image>
          <text class="btn-text">编辑资料</text>
        </view>
      </view>

      <!-- 会员开通提示 v-if="!userInfo.isVip"-->
      <view class="vip-promote" v-if="useList&&useList.length>0&&showIcons">
        <image class="vipBG" :src="HTTP_REQUEST_URL_IMG+'vipBG.png'" mode="scaleToFill"></image>
        <view class="vip-text">
          <view class="title">
            <image class="vipIcon" :src="HTTP_REQUEST_URL_IMG+'setting/vipIcon.png'" mode="widthFix"></image>
            <text v-if="!appStore.$userInfo?.svip">开通<text class="bigText">会员</text>享受更多<text class="bigText">权益</text></text>
            <text v-else>前往查看<text class="bigText">权益</text></text>
          </view>
          <button class="open-vip" @click="goVIP">{{appStore.$userInfo?.svip ? '去查看':'去开通'}}<image class="bofang" :src="HTTP_REQUEST_URL_IMG+'setting/bofang.png'" mode="widthFix"></image></button>
        </view>
      </view>
    </view>

    <!-- 钱包余额 -->
    <view class="wallet-section">
      <view class="wallet-header">
        <view>
          <view class="wallet-title">钱包余额（元）</view>
          <view class="balance">{{ wallet.balance }}</view>
        </view>

        <view class="transaction-detail" @click="viewTransactionDetail" v-if="useList&&useList.length>0&&showIcons">
          <text style="margin-right: 10rpx;">交易明细</text>
          <uni-icons type="right" size="16" color="#666666"></uni-icons>
        </view>
      </view>
      <up-line color="#F1F3F8"></up-line>

      <view class="assets">
        <view
            v-for="(asset, index) in wallet.assets"
            :key="asset.name"
            class="asset-container"
        >
          <view class="asset-item">
            <text class="asset-name">{{ asset.name }}</text>
            <text class="asset-amount">{{ asset.balance }}{{ asset.unit }}</text>
          </view>

          <!-- 在每个资产项后面添加垂直分隔线，除了最后一个 -->
          <up-line
              v-if="index < wallet.assets.length - 1"
              color="#F1F3F8"
              direction="col"
              length="80rpx"
              style="margin: 0 20rpx;"
          ></up-line>
        </view>
      </view>


      <view class="wallet-actions" v-if="tradeList&&tradeList.length>0&&showIcons">
        <view class="wallet-btn withdraw" @click="goDetail(tradeList[0].jumpUrl)">{{tradeList[0].iconName}}</view>
        <view class="wallet-btn recharge" @click="goDetail(tradeList[1].jumpUrl)">{{tradeList[1].iconName}}</view>
      </view>

      <view class="functions" v-if="useList&&useList.length>0&&showIcons">
        <view class="function-item" v-for="item in useList" :key="item.iconName" @click="goDetail(item.jumpUrl)">
          <view class="function-icon">
            <image class="img" :src="item.src" mode="widthFix"></image>
          </view>
          <text class="function-name">{{ item.iconName }}</text>
        </view>
      </view>
    </view>


    <!-- 最近访问 -->
    <view class="recent-visit" v-if="recentStores.length > 0">
      <view class="section-header">
        <text class="section-title">最近访问</text>
        <view class="more"  @click="handleFunctionClick('/pages/users/browsing_history/index')">更多商家<uni-icons style="margin-left: 10rpx;" type="right" size="16" color="#666666"></uni-icons></view>
      </view>

      <view class="store-list">
        <template v-for="(store,storeIndex) in recentStores" :key="store.id">
          <view class="store-item" v-if="storeIndex == 0" @click="viewStore(store)">
              <view class="store-logo">
                <image class="img" :src="store.merchantLogo"></image>
              </view>
              <view class="store-info">
                <text class="store-name">{{ store.merchantName }}</text>
                <text class="store-desc">{{ store.merchantDescribe }}</text>
              </view>
              <uni-icons style="margin-left: auto;" type="right" size="16" color="#666666"></uni-icons>
          </view>
        </template>
      </view>
    </view>

    <!-- 订单状态 -->
    <view class="order-section">
      <view class="section-header">
        <text class="section-title">我的订单</text>
        <view class="more" @click="viewAllOrders">全部订单<uni-icons style="margin-left: 10rpx;" type="right" size="16" color="#666666"></uni-icons></view>
      </view>

      <view class="order-status">
        <view class="status-item" v-for="order in orderStatus" :key="order.name" @click="viewOrders(order.id)">
          <view class="status-icon">
            <image class="img" :src="order.src" mode="widthFix"></image>
          </view>
          <text class="status-name">{{ order.name }}</text>
        </view>
      </view>
    </view>

    <!-- 常用功能 -->
    <view class="common-functions">
      <view class="section-header">
        <text class="section-title">常用功能</text>
      </view>

      <view class="functions">
        <template v-for="func in commonFunctions" :key="func.name">
          <view class="function-item" @click="handleFunctionClick(func.pageUrl)" v-if="func.show">
            <view class="function-icon">
              <image class="img" :src="func.src" mode="widthFix"></image>
            </view>
            <text class="function-name">{{ func.name }}</text>
          </view>
        </template>

      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, watch,computed } from 'vue'
import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import { HTTP_REQUEST_URL_IMG } from "@/config/app";
import { isHttpsImage } from "@/utils/util";
import { useAppStore } from "@/stores/app";
import { useToast } from "@/hooks/useToast";
import { getMetalBalance } from "@/api/vault";
import { footprintList } from "@/api/merchant.js";
import { toLogin } from "@/libs/login.js";


const showIcons = ref(false)
const appStore = useAppStore();
const { Toast } = useToast();
const isLogin = appStore.isLogin;

const navBgColor = ref('rgba(255,255,255,0)');
// 钱包信息
const wallet = ref({
  balance: appStore.userInfo?.nowMoney || '0.00',
  assets: [
    { name: '黄金资产', balance: '0.00', unit: 'g' ,type:1 },
    { name: '铂金资产', balance: '0.00', unit: 'g' ,type:2 },
    { name: '白银资产', balance: '0.00', unit: 'g' ,type:3 }
  ]
})

// 主要功能列表
const mainFunctions = ref([
  { src: `${HTTP_REQUEST_URL_IMG}setting/mailiao.png`, name: '买料',pageUrl:'/pages/users/vault/rechargeGold' },
  { src: `${HTTP_REQUEST_URL_IMG}setting/mailiao2.png`, name: '卖料',pageUrl:'/pages/users/vault/storeMetal/index' },
  { src: `${HTTP_REQUEST_URL_IMG}setting/cunliao.png`, name: '存料',pageUrl:'/pages/users/vault/storeMetal/goldBullionStock' },
  { src: `${HTTP_REQUEST_URL_IMG}setting/tiliao.png`, name: '提料',pageUrl:'/pages/users/vault/storeMetal/metalExchange' }
])

// 最近访问的商家
const recentStores = ref([])

// 订单状态
const orderStatus = ref([
  { src: `${HTTP_REQUEST_URL_IMG}setting/daifukuan.png`, name: '待付款',id:0 },
  { src: `${HTTP_REQUEST_URL_IMG}setting/daifahuo.png`, name: '待发货',id:1 },
  { src: `${HTTP_REQUEST_URL_IMG}setting/daishouhuo.png`, name: '待收货',id:2 },
  { src: `${HTTP_REQUEST_URL_IMG}setting/tuikuan.png`, name: '退款/换货' ,id:5},
  { src: `${HTTP_REQUEST_URL_IMG}setting/yiwancheng.png`, name: '已完成',id:4 },
])
const merchantZYShow = ref(false)
const lxsjShow = ref(false);
const logoutShow = ref(false);
// 常用功能
const commonFunctions = computed(() => {
  const baseFunctions = [
    { src: `${HTTP_REQUEST_URL_IMG}setting/zuji.png`, name: '浏览足迹', pageUrl: '/pages/users/browsing_history/index', show: true },
    { src: `${HTTP_REQUEST_URL_IMG}setting/shoucang.png`, name: '我的收藏', pageUrl: '/pages/users/user_goods_collection/index', show: true },
    { src: `${HTTP_REQUEST_URL_IMG}setting/dingwei.png`, name: '收货地址', pageUrl: '/pages/users/user_address_list/index', show: true },
    { src: `${HTTP_REQUEST_URL_IMG}setting/dianpu.png`, name: '联系商家', pageUrl: '/pages/users/my_merchant/index', show: lxsjShow.value },
    { src: `${HTTP_REQUEST_URL_IMG}setting/dianpu.png`, name: '门店主页', pageUrl: '/pages/merchantCenter/index', show: merchantZYShow.value },
    // { src: `${HTTP_REQUEST_URL_IMG}setting/xiazaiapp.png`, name: '下载APP', pageUrl: 'download', show: true },
    { src: `${HTTP_REQUEST_URL_IMG}setting/lianxikefu.png`, name: '平台客服', show: true },
    { src: `${HTTP_REQUEST_URL_IMG}setting/logout.png`, name: '退出登录', pageUrl: 'logout', show: logoutShow.value }
  ];

  // 根据 show 值过滤
  return baseFunctions.filter(func => func.show);
});
const params = ref({
  page: 1,
  limit: 10,
});

// 页面加载
onShow(async () => {
  if(appStore.isLogin){
    await appStore.USERINFO();
    logoutShow.value = true;
    wallet.value.balance = appStore.userInfo?.nowMoney || '0.00';
    if(appStore.userInfo?.merchant?.id){
      merchantZYShow.value = true;
    }else{
      merchantZYShow.value = false;
    }
    if(appStore.merchantId || appStore.userInfo?.merchant?.id){
      lxsjShow.value = true;
    }else{
      lxsjShow.value = false;
    }
  }else{
    logoutShow.value = false;
  }

  fetchMetalBalance()
  getHistoryList()
})
onPageScroll((e) => {
  if(e.scrollTop > 0){
    navBgColor.value ='#ffe079';
  }else{
    navBgColor.value ='rgba(252,255,255,0)';
  }
})

const wxConfig = ref({});
const tradeList = ref([]);
const useList = ref([])
watch(
  () => appStore.wxConfig,
  (newVal) => {
    const configDate = newVal || appStore.$wxConfig;
    wxConfig.value = configDate;
	const list = JSON.parse(configDate.essentialFunctions);
	if(list[0].status==false){
		showIcons.value = false;
	}else{
		showIcons.value = true;
	}
    tradeList.value = [list[0],list[1]];
	useList.value = [{
		...list[2],
		src: `${HTTP_REQUEST_URL_IMG}setting/mailiao.png`
	},{
		...list[3],
		src: `${HTTP_REQUEST_URL_IMG}setting/mailiao2.png`
	},{
		...list[4],
		src: `${HTTP_REQUEST_URL_IMG}setting/cunliao.png`,
		iconName: '存料'
	},{
		...list[5],
		src: `${HTTP_REQUEST_URL_IMG}setting/tiliao.png`
	}]
	console.log(tradeList.value)
  },
  { deep: true, immediate: true }
);

// 编辑资料
const editProfile = () => {
  uni.showToast({
    title: '编辑资料',
    icon: 'none'
  })
}

// 开通会员
const openVip = () => {
  uni.showToast({
    title: '开通会员',
    icon: 'none'
  })
}

// 查看会员权益
const goVIP = ()=>{
	uni.navigateTo({ url:"/pages/users/VIP/VIP" });
}

// 查看交易明细
const viewTransactionDetail = () => {
  if(!isLogin){
    toLogin();
  }else{
    uni.navigateTo({ url:"/pages/users/vault/index" });
  }
}

// 充值
const recharge = () => {
  if(!isLogin){
    toLogin();
  }else{
    uni.navigateTo({ url:`/pages/webview/index?path=${'/pages/users/vault/rechargeRmb'}` });
  }
}

// 提现
const withdraw = () => {
  if(!isLogin){
    toLogin();
  }else{
    uni.navigateTo({ url:`/pages/webview/index?path=${'/pages/users/vault/withdraw'}` });
  }
}

const goDetail = (url) => {
	console.log(url)
	const webviewPageUrl = `/pages/webview/index?path=${url}`;
	uni.navigateTo({
	  url: webviewPageUrl,
	  fail: (err) => {
	    console.error("跳转到webview页面失败：", err);
	    uni.showToast({
	      title: "跳转失败，请重试",
	      icon: "none",
	      duration: 1500,
	    });
	  },
	});
}

function handleLogOut() {
  uni.showModal({
    title: "提示",
    content: "确认退出登录吗？",
    success: function (res) {
      if (res.confirm) {
        // 清除全局定时器
        if (getApp().globalData?.messageTimer) {
          clearInterval(getApp().globalData.messageTimer);
          getApp().globalData.messageTimer = null;
        }
        appStore.LOGOUT();
        uni.reLaunch({ url: "/pages/users/login/index" });
      }
    },
  });
}
// 功能点击
const handleFunctionClick = (url) => {
  console.log(url)

  if (!url) return;
  // 买料、卖料、消费需要通过webview跳转
  if (
    [
      "/pages/users/vault/rechargeGold",
      "/pages/users/vault/storeMetal/index",
      "/pages/users/vault/storeMetal/order",
    ].includes(url)
  ) {
    const webviewPageUrl = `/pages/webview/index?path=${url}`;
    uni.navigateTo({
      url: webviewPageUrl,
      fail: (err) => {
        console.error("跳转到webview页面失败：", err);
        uni.showToast({
          title: "跳转失败，请重试",
          icon: "none",
          duration: 1500,
        });
      },
    });
    return; // 阻止继续执行后续跳转逻辑
  }else if(url === "download"){
    uni.setClipboardData({
      data: 'https://a.app.qq.com/o/simple.jsp?pkgname=uni.app.UNI9DE338F',
      showToast: false,
      success: function () {
        uni.showToast({
          title: "下载链接复制成功，请打开内置手机浏览器访问下载。",
          icon: 'none'
        })
        console.log('success');
      }
    });
    return
  }else if(url === "logout"){
    handleLogOut();
  }else{
    uni.navigateTo({ url });
  }
}

// 查看商家
const viewStore = (store) => {
  if(!store.merchantId ){
    return;
  }
  uni.navigateTo({ url:"/pages/merchantCenters/merchant?merchantId="+store.merchantId });
}

// 查看全部订单
const viewAllOrders = () => {
  uni.navigateTo({ url:"/pages/order_list/index" });
}

// 查看订单
const viewOrders = (status) => {
  uni.navigateTo({ url:"/pages/order_list/index?status="+ status});
}
const navigateTo = (url) => {
  if (!url) return;
  uni.navigateTo({ url });
};
// 用户面板事件处理
function handleEdit() {
  // console.log("编辑资料");
  uni.navigateTo({ url: "/pages/users/personal_info/personal_info" });
}
async function fetchMetalBalance() {
  // 若appStore.uid为空，则请求失败
  if (!appStore?.uid) {
    // Toast({ title: "未登录，请前往登录后访问" });
    return;
  }
  const params = { userId: appStore.uid };
  const { data } = await getMetalBalance(params);
  console.log(data)
  wallet.value.assets = wallet.value.assets.map((metal) => {
    const metalValue = data[metal.type];
    return metalValue !== undefined ? { ...metal, balance: metalValue } : metal;
  });
}
const getHistoryList = async () => {
  const { data } = await footprintList(params.value);
  recentStores.value = data.records;
};
</script>

<style scoped lang="scss">
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 30rpx;
}

/* 顶部用户信息 */
.user-header {
  height: 600rpx;
  background-image: url("https://sb-admin.oss-cn-shenzhen.aliyuncs.com/shuibei-mini/new-mini/jianbianBG.png");
  background-size: 100% 100%;
  padding: 150rpx 20rpx 20rpx;
  color: #fff;
  border-radius: 0 0 20rpx 20rpx;
  box-sizing: border-box;
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.user-main {
  display: flex;
  align-items: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #fff;
  margin-right: 30rpx;
}

.name-vip {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.name {
  font-size: 32rpx;
  color: #333;
}

.vip-tag {
  width: 100rpx;
  margin-left: 16rpx;
}

.vip-expire, .login-tip {
  font-size: 28rpx;
  color: #666;
}

.btn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .setting{
    width: 40rpx;
    height: 40rpx;
  }
  .btn-text {
    font-size: 24rpx;
    color: #333;
    line-height: 1.5;
  }
}

/* 会员开通提示 */
.vip-promote {
  height: 108rpx;
  width: 100%;
  height: 108rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  .vipBG{
    width: 100%;
    height: 100%;
    border-radius: 48rpx 48rpx 0 0;
  }
  .vip-text{
    margin-top: -108rpx;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;
    .title{
      font-size: 28rpx;
      color: #BDAD8E;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .vipIcon{
        width: 70rpx;
        height: 60rpx;
        margin-right: 10rpx;
      }
      .bigText{
        font-size: 32rpx;
        color: #FACD8D;
        margin: 0 10rpx;
      }
    }
    .open-vip{
      width: 144rpx;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 24rpx;
      color: #5D3D03;
      background: linear-gradient( 270deg, #FEE2A3 0%, #FDEBCC 100%);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      .bofang{
        width: 24rpx;
        height: 24rpx;
        margin-left: 10rpx;
      }
    }
  }
}

.desc {
  font-size: 22rpx;
  opacity: 0.9;
}

/* 钱包余额 */
.wallet-section {
  background: #fff;
  margin: -190rpx 20rpx 20rpx;
  border-radius: 24rpx;
  padding: 30rpx;
}

.wallet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.wallet-title {
  font-size: 28rpx;
  color: #333;
}

.transaction-detail {
  color: #666;
  font-size: 24rpx;
  display: flex;
  align-items: center;
}


.balance {
  font-size: 48rpx;
  font-weight: bold;
  text-align: center;
  margin: 10rpx 0;
  color: #333;
}

.assets {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40rpx;
  flex-wrap: nowrap; /* 确保不换行 */
}

.asset-container {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  position: relative;
}

.asset-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0 20rpx;
}

.asset-name {
  font-size: 24rpx;
  color: #333;
  margin-bottom: 16rpx;
  text-align: center;
}

.asset-amount {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.wallet-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 50rpx;
}

.wallet-btn {
  flex: 1;
  text-align: center;
  height: 88rpx;
  line-height: 88rpx;
  margin: 0 10rpx;
  border-radius: 16rpx;
  font-size: 32rpx;
}

.recharge {
  background: #F8C008;
  color: #333;
}

.withdraw {
  background: rgba(248,192,8,0.1);
  color: #333;
}

/* 功能入口 */
.function-grid {
  background: #fff;
  margin: 30rpx;
  border-radius: 24rpx;
  padding: 40rpx;
}

.functions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40rpx;
  margin-top: 40rpx;
}

.function-item {
  text-align: center;
}

.function-icon {
  .img{
    width: 60rpx;
    height: 60rpx;
  }
}

.function-name {
  font-size: 24rpx;
  color: #333;
}

/* 最近访问 */
.recent-visit, .order-section, .common-functions {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333;
}

.more {
  font-size: 24rpx;
  color: #666;
}

.store-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
  background-color: #F9F7F0;
  border-radius: 16rpx;
}

.store-item:last-child {
  border-bottom: none;
}

.store-logo {

  .img{
    width: 100rpx;
    height: 100rpx;
    border-radius: 16rpx;
    margin-right: 30rpx;
  }
}

.store-name {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.store-desc {
  font-size: 24rpx;
  color: #666;
  display: block;
}

/* 订单状态 */
.order-status {
  display: flex;
  justify-content: space-between;
}

.status-item {
  text-align: center;
  flex: 1;
}

.status-icon {
  .img{
    width: 60rpx;
    height: 60rpx;
  }
}

.status-name {
  font-size: 24rpx;
  color: #333;
}

/* 常用功能 */
.common-functions .functions {
  grid-template-columns: repeat(4, 1fr);
}
.page-title{
  font-size: 36rpx;
  color: #333;
}
</style>