wip: 4.0

2024-05-16 14:27:57 +08:00
parent b09c1d9537
commit 8f3b158032
72 changed files with 3931 additions and 2161 deletions
--- a/src/pages/user/index.config.ts
+++ b/src/pages/user/index.config.ts
@@ -1,4 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: "个人中心",
-  navigationStyle: "custom",
+  navigationBarTitleText: '个人中心',
+  navigationStyle: 'custom',
 });
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@@ -1,20 +1,21 @@
 <template>
-  <view class="app">
+  <view class="appUser">
    <view
      class="user-center-card__header__transparent"
      v-if="isLogin"
-      :style="{ width: isLogin ? '100%' : '70%' }"
-    >
-      <view class="user-center-card__header__avatar">
+      :style="{width: isLogin ? '100%' : '70%'}">
+      <view
+        class="user-center-card__header__avatar"
+        @click="toPage('/pages/users/user_setting/index')">
        <nut-avatar size="large">
          <img :src="userInfo.data?.avatarUrl" />
        </nut-avatar>
      </view>
-      <view class="user-center-card__header__info">
-        <view
-          class="user-center-card__header__info__name"
-          @click="toPage('/pages/users/user_setting/index')"
-          >{{ userInfo.data?.nickName }}
+      <view
+        class="user-center-card__header__info"
+        @click="toPage('/pages/users/user_setting/index')">
+        <view class="user-center-card__header__info__name"
+          >{{ userInfo.data?.nickName || '点击设置昵称' }}
        </view>
        <view v-if="!userInfo.data?.phone">
          <nut-button
@@ -24,27 +25,16 @@
            >点击绑定手机号
          </nut-button>
        </view>
-      </view>
-      <view class="rightIcon">
-        <Scan style="margin-right: 20px" @click="scanCode" size="22" />
-        <button v-if="isLogin" open-type="contact">
-          <Message
-            color="#666666"
-            style="margin-right: 20px"
-            @click="toSetting"
-            size="22"
-          />
-        </button>
-
-        <Setting style="margin-right: 20px" @click="toSetting" size="22" />
+        <view v-else class="user-center-card__header__info__phone"
+          >{{ maskString(userInfo.data?.phone, 3, 7) }}
+        </view>
      </view>
    </view>
    <view v-else class="user-center-card__header__transparent">
      <view class="user-center-card__header__avatar">
        <nut-avatar size="large">
          <img
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-          />
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
        </nut-avatar>
      </view>
      <view class="user-center-card__header__info">
@@ -53,146 +43,155 @@
        </view>
      </view>
    </view>
+    <view class="user-acc flex justify-center items-center text-center">
+      <view>
+        <view class="text-[#CFAA32]">豆子</view>
+        <view class="text-[#ffc300] text-[35px] font-bold">{{
+          userInfo.data?.pulse || 0
+        }}</view>
+      </view>
+      <view class="line"></view>
+      <view>
+        <view class="text-[#CFAA32]">积分</view>
+        <view class="text-[#ffc300] text-[35px] font-bold">{{
+          userInfo.data?.integral || 0
+        }}</view>
+      </view>
+    </view>
    <view class="container">
      <!--我的订单-->
-      <view class="cell-card">
-        <view class="top">
-          <view>我的订单</view>
-          <view class="sub" @click="toOrderList(0)">
-            <view>全部订单</view>
-            <ArrowRight />
+      <view class="border-box bg-[#fff] p-[30px]">
+        <view class="flex justify-between items-center">
+          <view class="text-[#333333]">我的订单</view>
+          <view
+            class="flex text-[#c9c9c9] items-center"
+            @click="toOrderList(0)">
+            <view class="text-[25px]">查看全部</view>
+            <ArrowRight size="10" />
          </view>
        </view>
-        <view class="center">
-          <view class="center-t" @click="toOrderList(1)">
-            <!-- <Order size="25px"/> -->
+        <view class="flex justify-between text-[#666] pl-[30px] pr-[30px]">
+          <view
+            class="mt-[30px] flex flex-col items-center"
+            @click="toOrderList(1)">
            <IconFont
-              name="http://article.biliimg.com/bfs/article/131eda0add8662808d97ffb1191d19bf3e420647.png"
-              size="40"
-            />
-            <view class="center-text">待付款</view>
+              name="http://p0.meituan.net/csc/9943f6c938fc0e310141a2b99d5bde6617483.png"
+              size="40" />
+            <view class="mt-[15px] text-[25px] text-[#333333]">待付款</view>
          </view>
-          <view class="center-t" @click="toOrderList(2)">
-            <!-- <Clock size="25px"/> -->
+          <view
+            class="mt-[30px] flex flex-col items-center"
+            @click="toOrderList(2)">
            <IconFont
-              name="http://article.biliimg.com/bfs/article/002434c9ed4774cb732517eb27e0ff547a41c606.png"
-              size="40"
-            />
-            <view class="center-text">待使用</view>
+              name="http://p0.meituan.net/csc/5306d094d7b4b61848dd21c86b693a9515523.png"
+              size="40" />
+            <view class="mt-[15px] text-[25px] text-[#333333]">待使用</view>
          </view>
-          <view class="center-t" @click="toOrderList(3)">
-            <!-- <Shop size="25px"/> -->
+          <view
+            class="mt-[30px] flex flex-col items-center"
+            @click="toOrderList(3)">
            <IconFont
-              name="http://article.biliimg.com/bfs/article/7c2ca0228180fe5f3b1d74b0043d80e76c42eb7d.png"
-              size="40"
-            />
-            <view class="center-text">已使用</view>
+              name="http://p0.meituan.net/csc/32ea9bbf51e3bbb0cbd75bc0fea97ca815779.png"
+              size="40" />
+            <view class="mt-[15px] text-[25px] text-[#333333]">已使用</view>
          </view>
-          <view class="center-t" @click="toOrderList(4)">
-            <!-- <Del size="25px"/> -->
+          <view
+            class="mt-[30px] flex flex-col items-center"
+            @click="toOrderList(4)">
            <IconFont
-              name="http://article.biliimg.com/bfs/article/c4f4e069dddfa7104f794a46a759a7ed478b81ea.png"
-              size="40"
-            />
-            <view class="center-text">已失效</view>
+              name="http://p0.meituan.net/csc/2e0dee89e9a3e3f2e7bf65db355fa11c11630.png"
+              size="40" />
+            <view class="mt-[15px] text-[25px] text-[#333333]">已失效</view>
          </view>
        </view>
      </view>

      <!--  我的服务  -->
      <view class="user-center" v-if="isLogin">
-        <view>我的服务</view>
+        <view class="text-[#333333]">我的服务</view>
        <view class="box">
-          <view
-            class="box-mini"
-            v-for="(item, idx) in userMenuList"
-            :key="idx"
-            @click="toPage(item.url)"
-          >
-            <!-- <image :src="item.icon" /> -->
-            <IconFont size="40" :name="item.icon"></IconFont>
-            <view class="label">{{ item.label }}</view>
+          <view v-for="(item, idx) in userMenuList" :key="idx">
+            <view
+              v-if="item.type !== 333"
+              class="box-mini"
+              @click="toPage(item.url)">
+              <IconFont size="40" :name="item.icon"></IconFont>
+              <view class="label">{{ item.label }}</view>
+            </view>
+            <button v-else class="kf-btn" open-type="contact">
+              <IconFont class="IconFont" size="40" :name="item.icon"></IconFont>
+              <view class="label">{{ item.label }}</view>
+            </button>
          </view>
        </view>
      </view>

      <!--  商家管理  -->
      <view
-        class="mer-box"
-        v-if="userInfo.data?.bid && userInfo.store_status === 1"
-      >
-        <nut-grid :gutter="10" :border="false">
+        class="user-center"
+        v-if="userInfo.data?.bid && userInfo.store_status === 1">
+        <view class="text-[#333333]">商家服务</view>
+        <nut-grid :gutter="0" :border="false">
          <nut-grid-item
            :border="false"
            v-if="userInfo.data.permission.dd"
            text="点单"
-            @click="toPage('/pages/admin/add_order/index')"
-          >
+            @click="toPage('/pages/admin/add_order/index')">
            <IconFont
              size="40"
-              :name="require('../../static/user/1-1.png')"
-            ></IconFont>
+              name="http://p0.meituan.net/csc/72a389ac6a441061fd534b96644c431b7839.png"></IconFont>
          </nut-grid-item>
          <nut-grid-item
            :border="false"
            v-if="userInfo.data.permission.hx"
            text="订单核销"
-            @click="toPage('/pages/admin/verify/index')"
-          >
+            @click="toPage('/pages/admin/verify/index')">
            <IconFont
              size="40"
-              :name="require('../../static/user/1-2.png')"
-            ></IconFont>
+              name="http://p1.meituan.net/csc/c236a8b7a73178da25218e1fb59a96f06610.png"></IconFont>
          </nut-grid-item>
          <nut-grid-item
            :border="false"
            v-if="userInfo.data.permission.tj"
            text="订单统计"
-            @click="toPage('/pages/admin/order_manage/index')"
-          >
+            @click="toPage('/pages/admin/order_manage/index')">
            <IconFont
              size="40"
-              :name="require('../../static/user/1-3.png')"
-            ></IconFont>
+              name="http://p0.meituan.net/csc/bd9aca457a109b4d69a692a9109a73ed9045.png"></IconFont>
          </nut-grid-item>
          <nut-grid-item
            :border="false"
            v-if="userInfo.data.permission.tx"
            text="收益提现"
-            @click="toPage('/pages/admin/withdrawal/index')"
-          >
+            @click="toPage('/pages/admin/withdrawal/index')">
            <IconFont
              size="40"
-              :name="require('../../static/user/1-4.png')"
-            ></IconFont>
+              name="http://p0.meituan.net/csc/f85d7dc1bf9eda8977e9089b260a586b7440.png"></IconFont>
          </nut-grid-item>
        </nut-grid>
      </view>

      <!--    版权    -->
-      <!--            <view class="copy">© 2023 </view>-->
+      <view class="text-[#999999] mt-5 text-[20px] text-center">
+        <view>鑫瓴科技版权所有</view>
+        <view>v4.0.0</view>
+      </view>
    </view>
    <!-- 登录 -->
    <Auth
      :visible="isShowLogin"
      @update:visible="cancelLogin"
-      @ok="getUserInfo"
-    />
+      @ok="getUserInfo" />
  </view>
 </template>

 <script lang="ts" setup>
-import { ref } from "vue";
-import {
-  ArrowRight,
-  Setting,
-  IconFont,
-  Scan,
-  Message,
-} from "@nutui/icons-vue-taro";
-import Taro from "@tarojs/taro";
-import Auth from "@/components/Auth.vue";
-import { getPersonalInfo, getPhone, bindParent } from "@/api/user";
+import {ref} from 'vue';
+import {ArrowRight, IconFont} from '@nutui/icons-vue-taro';
+import Taro from '@tarojs/taro';
+import Auth from '@/components/Auth.vue';
+import {getPersonalInfo, getPhone, bindParent} from '@/api/user';
+import {maskString} from '@/utils';

 const isShowLogin = ref(false);

@@ -207,6 +206,8 @@ interface UserInfo {
    phone?: string;
    uid?: string;
    permission?: any;
+    integral?: string;
+    pulse?: string;
  };
  store_status?: number;
  store_name?: string;
@@ -215,20 +216,40 @@ interface UserInfo {
 const userInfo = ref<UserInfo>({});

 Taro.useDidShow(() => {
-  const token = Taro.getStorageSync("token");
+  init_data();
+});
+
+// Taro.startPullDownRefresh({
+//   success: () => {
+//     init_data();
+//   },
+//   complete: () => {
+//     Taro.stopPullDownRefresh();
+//   },
+// });
+
+const init_data = () => {
+  const token = Taro.getStorageSync('token');
  if (token) {
    getUserInfo();
  }
-});
+};
+
+const test = () => {
+  console.log(process.env.TARO_APP_ID);
+  Taro.openCustomerServiceChat({
+    corpId: 'wwb5dd953ca36043ef',
+    extInfo: {
+      url: 'https://work.weixin.qq.com/kfid/kfcb2b0420e94102346',
+    },
+  });
+};

 const cancelLogin = () => {
  isShowLogin.value = false;
 };

 const getUserInfo = async () => {
-  Taro.showLoading({
-    title: "加载中",
-  });
  const res = await getPersonalInfo();
  userInfo.value = {
    ...res.data,
@@ -239,10 +260,9 @@ const getUserInfo = async () => {
        : {},
    },
  };
-  Taro.setStorageSync("userInfo", userInfo.value);
+  Taro.setStorageSync('userInfo', userInfo.value);
  isLogin.value = true;
  cancelLogin();
-  Taro.hideLoading();
 };

 const getphonenumber = async (e: any) => {
@@ -256,8 +276,8 @@ const getphonenumber = async (e: any) => {
 const toOrderList = (e: number) => {
  if (!isLogin.value)
    return Taro.showToast({
-      title: "请先登录",
-      icon: "none",
+      title: '请先登录',
+      icon: 'none',
    });
  Taro.navigateTo({
    url: `/pages/users/order_list/index?type=${e}`,
@@ -266,43 +286,37 @@ const toOrderList = (e: number) => {

 const userMenuList = ref([
  {
-    label: "后结订单",
-    url: "/pages/users/pending_order/index",
-    icon: require("../../static/user/dd.png"),
+    label: '账户明细',
+    url: '/pages/users/account/index',
+    icon: 'http://p0.meituan.net/csc/104f787b7cc5582868be46ff52475ecf7084.png',
  },
  {
-    label: "我的账户",
-    url: "/pages/users/account/index",
-    icon: "http://jdt168.com/uploads/default/20220829/e819815623276fdbb9a54d685292e5c7.png",
+    label: '后结订单',
+    url: '/pages/users/pending_order/index',
+    icon: 'http://p0.meituan.net/csc/68d3f1f1ea375897a2b918851199b6546322.png',
  },
-  // {
-  //     id: 2,
-  //     label: "商家入驻",
-  //     url: "/pages/users/account/index",
-  //     icon: "http://jdt168.com/uploads/default/20220829/583fd6cbd729b24eab9c3cae20ae694d.png",
-  // },
  {
-    label: "我的推广",
-    url: "/pages/users/distribution/index",
-    icon: "http://jdt168.com/uploads/default/20220829/73656833c1d849c050638f9ee9903b9d.png",
+    label: '我的推广',
+    url: '/pages/users/distribution/index',
+    icon: 'http://p0.meituan.net/csc/950814cc0ed1289f170e8612fab597cd5310.png',
+  },
+  {
+    label: '联系客服',
+    type: 333,
+    url: '/pages/users/account/index',
+    icon: 'http://p0.meituan.net/csc/ddd4b6ff4271ec05ced60db0aee1e9548383.png',
+  },
+  {
+    label: '设置',
+    url: '/pages/users/setting/index',
+    icon: 'http://p0.meituan.net/csc/333f2ec6a76c1fb2e442d277f8b99d5e2853.png',
  },
-  // {
-  //   label: "聚合积分",
-  //   url: "/pages/users/integral/index",
-  //   icon: require("../../static/jhjf.png"),
-  // },
 ]);

-const toSetting = () => {
-  Taro.navigateTo({
-    url: "/pages/users/setting/index",
-  });
-};
-
 const clickLogin = () => {
  // isShowLogin.value = true
  Taro.redirectTo({
-    url: "/pages/users/login/index",
+    url: '/pages/users/login/index',
  });
 };

@@ -315,20 +329,20 @@ const toPage = (url: string) => {
 const scanCode = () => {
  Taro.scanCode({
    onlyFromCamera: true,
-    scanType: ["qrCode"],
-    success: async (data) => {
+    scanType: ['qrCode'],
+    success: async data => {
      try {
        await bindParent({
          uid: data.result,
        });
        Taro.showToast({
-          title: "绑定成功",
-          icon: "none",
+          title: '绑定成功',
+          icon: 'none',
        });
      } catch (error) {
        Taro.showToast({
          title: error.msg,
-          icon: "none",
+          icon: 'none',
        });
      }
    },
@@ -337,14 +351,15 @@ const scanCode = () => {
 </script>

 <style lang="scss">
-.app {
+.appUser {
  box-sizing: border-box;
-  background-color: #f5f5f5;
-  height: 100vh;
-  background-image: url("https://cdn-we-retail.ym.tencent.com/miniapp/template/user-center-bg-v1.png");
-  background-size: auto 40%;
+  background-color: #f8f8f8;
+  height: 100%;
+  background-image: url('http://p0.meituan.net/csc/f44bb11463e3c538c307d7ce4b303bec33520.png');
+  background-size: 100% 500px;
  background-repeat: no-repeat;
  position: relative;
+  padding-top: 180px;
  color: var(--nut-grid-item-text-color, var(--nut-title-color2, #666666));
 }

@@ -354,14 +369,16 @@ const scanCode = () => {
  }
 }

+.user-center-card__header__info__phone {
+  color: #737373;
+  font-size: 25px;
+}
+
 .user-center-card__header__transparent {
-  position: absolute;
-  left: 30px;
-  top: 200px;
+  padding-left: 30px;
  background-color: transparent;
  display: flex;
  align-items: center;
-  justify-content: space-between;
  box-sizing: border-box;
  text-align: left;
  padding-right: 20px;
@@ -372,55 +389,17 @@ const scanCode = () => {
    color: #333;
    font-weight: bolder;
  }
-
-  .rightIcon {
-    height: 100px;
-    margin: auto;
-    display: flex;
-    justify-content: flex-start;
-    // align-items: center;
-    button {
-      padding: 0 !important;
-      margin: 0 !important;
-      background: transparent;
-      -webkit-tap-highlight-color: transparent;
-      overflow: hidden;
-      position: relative;
-      top: -13px;
-    }
-
-    button::after {
-      border: none;
-      background: transparent;
-    }
-  }
 }

 .container {
  position: absolute;
-  top: 350px;
-  width: 710px;
+  top: 500px;
 }

 .cell-card {
  box-sizing: border-box;
  background-color: #fff;
-  border-radius: 20px;
-  margin: 20px;
  padding: 30px;
-  width: 710px;
-
-  .top {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .sub {
-      display: flex;
-      color: #c9c9c9;
-      align-items: center;
-    }
-  }

  .center {
    display: flex;
@@ -443,11 +422,10 @@ const scanCode = () => {

 .user-center {
  background-color: #fff;
-  border-radius: 20px;
-  margin: 20px;
+  margin: 20px 0px;
  padding: 20px;
-  width: 710px;
-  box-sizing: border-box;
+
+  -nut-grid-item-text-color: #333;

  .box {
    margin-top: 20px;
@@ -455,18 +433,18 @@ const scanCode = () => {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    box-sizing: border-box;
+    line-height: 1.5;

    .box-mini {
      display: flex;
      box-sizing: border-box;
-      width: 150px;
      flex-direction: column;
      align-items: center;

      .label {
        font-size: 25px;
        margin-top: 10px;
-        color: #333;
+        color: #333333;
      }

      image {
@@ -478,10 +456,45 @@ const scanCode = () => {
 }

 .mer-box {
-  box-sizing: border-box;
  background-color: #fff;
-  border-radius: 20px;
  margin: 20px;
-  width: 710px;
+  width: 100%;
+}
+
+.user-acc {
+  background-image: url('http://p0.meituan.net/csc/a74c44a7af541f01efbcc6fb023e6e09132712.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 95%;
+  height: 150px;
+  margin: 60px auto;
+
+  .line {
+    width: 1px;
+    height: 50px;
+    background-color: #ffc300;
+    margin: 0 100px;
+  }
+}
+
+.kf-btn {
+  padding: 0 !important;
+  margin: 0 !important;
+  background: transparent;
+  -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
+  font-size: 25px;
+  color: #333333;
+  line-height: 1;
+
+  .IconFont {
+    margin-bottom: 13px;
+  }
+
+  &::after {
+    border: none;
+    background: transparent;
+    line-height: 1;
+  }
 }
 </style>