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>

    <!-- 企微客服弹窗 -->
    <up-popup
      :show="showCallList"
      closeOnClickOverlay
      mode="bottom"
      @close="showCallList = false"
    >
      <view class="callService">
        <view class="list-box">
          <view
            v-for="(item, index) in callList"
            :key="index"
            class="list-item"
            @click="callService(item)"
          >
            <view class="item-left">
              <view class="item-name">{{ item.serviceName }}</view>
            </view>
          </view>
        </view>
      </view>
    </up-popup>
  </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 { getCustomerServiceList } from "@/api/user";
import { toLogin } from "@/libs/login.js";

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

const callList = ref([]);
const showCallList = ref(false);

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();
});

onLoad(async () => {
  await getServiceList();
});
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 = (item) => {
  const url = item.url;
  // console.log(url);
  if (item.name === "平台客服") return (showCallList.value = true);
  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 getServiceList = async (url) => {
  const res = await getCustomerServiceList();
  callList.value = res.data.list;
};

// 跳转企微客服
const callService = async (item) => {
  wx.openCustomerServiceChat({
    corpId: item.enterpriseId,
    extInfo: {
      url: item.serviceLink,
    },
  });
};

// 查看商家
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);
  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: linear-gradient(200deg, #fcd965 0%, #ffffff 90%) !important;
  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;
}

.callService {
  padding: 20px 10px 0px;
  // background-color: #ddcca3;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 16px;
  margin-bottom: 30rpx;

  .list-box {
    background: #fff;
    border-radius: 20px;

    .list-item {
      width: 100%;
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #e1e1e1;
    }
  }
}
</style>