feat(client): 新增我的团队页面

src/PageMine/myTeam/index.vue

@@ -1,71 +1,95 @@
 <template>
-  <view class="container">
-    <page-navbar bgColor="#fff" title="我的团队"></page-navbar>
-
-    <view class="top-img-box">
-      <image class="top-img" :src="avatar" />
-      <view class="top-name"> {{ nickname }} </view>
+  <view class="my-team">
+    <view class="team-bg">
+      <u--image
+        src="/static/pageMine/team/team-bg.png"
+        width="100%"
+        height="550rpx"
+      ></u--image>
     </view>
-
-    <view class="group-item-box">
-      <view class="item-top">
-        <view class="top-l">团队成员</view>
-        <view class="top-r">></view>
-      </view>
-      <view class="item-content">
-        <view class="person-item" v-for="item of teamPersonList" :key="item">
-          <image class="item-img" :src="item.inviteUserAvatar" mode="aspectFill" />
-          <view class="item-name">{{ item.name }}</view>
+    <view class="my-team-main">
+      <page-navbar bgColor="transparent" title="我的团队"></page-navbar>
+      <view class="my-team-info" :style="'background-image: url(' + bgBase64 + ')'">
+        <view class="team-avatar">
+          <u-avatar :src="userInfo.avatar" size="70" />
+        </view>
+        <view class="u-m-l-192 f-s-32 text-333 text-bold">
+          {{ userInfo.nickname }}
+        </view>
+        <view class="direction team-num">
+          <view class="f-s-28 text-333 u-m-b-8">团队人数</view>
+          <view class="f-s-40 text-bold" style="color: #ff412e">222222</view>
+        </view>
+        <view class="fl-flex fl-justify-between team-add-num">
+          <view v-for="(item, index) in 4" :key="index" class="fl-flex fl-align-center">
+            <view class="direction">
+              <view class="f-s-28" style="color: #3d3d3d; line-height: 40rpx">100</view>
+              <view class="f-s-28" style="color: #3d3d3d; line-height: 40rpx">
+                今日新增
+              </view>
+            </view>
+            <view v-if="index != 3" class="team-line"></view>
+          </view>
         </view>
       </view>
-    </view>
-
-    <!-- <view class="group-item-box">
-      <view class="item-top">
-        <view class="top-l">最近动态</view>
-        <view class="top-r">></view>
-      </view>
-      <view class="item-content dynamic-img-box">
-        <img class="dynamic-img" src="/static/logo.png" alt="" />
+      <!-- 列表 -->
+      <view class="u-m-t-24">
+        <base-card padding="24rpx">
+          <view
+            class="fl-flex fl-justify-between team-person-list"
+            v-for="(item, index) in 5"
+            :key="index"
+          >
+            <view class="fl-flex">
+              <u-avatar :src="userInfo.avatar" size="45" />
+              <view class="u-m-l-22">
+                <view class="fl-flex u-m-b-6">
+                  <view class="f-s-26 text-primary u-m-r-12">王忠青</view>
+                  <base-text text="推荐人"></base-text>
+                </view>
+                <view class="f-s-24" style="color: #616570">182****4342</view>
+              </view>
+            </view>
+            <view class="f-s-24 text-666">2024-05-33</view>
+          </view>
+        </base-card>
       </view>
     </view>
-
-    <view class="group-item-box">
-      <view class="item-top">
-        <view class="top-l">团队任务</view>
-        <view class="top-r">></view>
-      </view>
-      <view class="item-content">
-        <img class="item-img" src="/static/logo.png" alt="" :key="item" v-for="item of 3" />
-      </view>
-    </view> -->
-
-    <!-- <button @click='handlerBind'>绑定</button> -->
   </view>
 </template>
 
 <script>
-import { getMyTeam, inviteBind } from '@/api/client/mine.js';
+import TEAM_API from '@/api/client/team.js';
 import { mapGetters } from 'vuex';
+import { getBase64Image } from '@/utils/index.js';
+
 export default {
+  name: 'my-team',
   data() {
     return {
       queryParams: {
         paging: '1,10',
       },
       teamPersonList: [],
+      bgBase64: '',
     };
   },
-  mounted() {
+  onShow() {
     this.handlerInitList();
   },
+  created() {
+    // 将背景图转为base64格式
+    getBase64Image('/static/pageMine/team/team-person.png', data => {
+      this.bgBase64 = data;
+    });
+  },
   computed: {
     ...mapGetters(['userId', 'gender', 'avatar', 'nickname']),
   },
   methods: {
     // 初始化我的团队列表
     handlerInitList() {
-      getMyTeam(this.queryParams).then(res => {
+      TEAM_API.teamList(this.queryParams).then(res => {
         let { records } = res.data;
         this.teamPersonList = records;
         console.log('Res', res);
@@ -78,7 +102,7 @@ export default {
         targetId: '1774462327015325697',
         type: 1,
       };
-      inviteBind(params).then(res => {
+      TEAM_API.bind(params).then(res => {
         console.log('@@@@res', res);
       });
     },
@@ -87,80 +111,57 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container {
-  padding: 20rpx 10rpx 50rpx;
-
-  .top-img-box {
-    text-align: center;
-
-    .top-img {
-      width: 160rpx;
-      height: 160rpx;
-      border-radius: 100rpx;
-    }
-
-    .top-name {
-      color: #6b7280;
-      font-weight: bold;
-      font-size: 32rpx;
-      margin-top: 20rpx;
-    }
+.my-team {
+  min-height: 100vh;
+  position: relative;
+
+  .team-bg {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    top: 0;
+    z-index: -99;
   }
-
-  .group-item-box {
-    padding: 0 20rpx;
-    margin-top: 60rpx;
-
-    .item-top {
-      display: flex;
-      justify-content: space-between;
-
-      .top-l,
-      .top-r {
-        color: #6b7280;
-        font-weight: bold;
-        font-size: 32rpx;
-        margin-top: 20rpx;
-      }
-    }
-
-    .item-content {
-      display: flex;
-      width: 100%;
-
-      .person-item {
-        margin-right: 20rpx;
-        text-align: center;
-        width: 25%;
+  .my-team-main {
+    padding: 46rpx 32rpx 0;
+    .my-team-info {
+      height: 414rpx;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      box-sizing: border-box;
+      position: relative;
+      padding-top: 32rpx;
+      .team-avatar {
+        position: absolute;
+        left: 14rpx;
+        top: -38rpx;
       }
-
-      .item-name {
-        font-size: 28rpx;
-        font-weight: bold;
-        color: #000;
-        width: 100%;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
+      .team-num {
+        margin: 54rpx 32rpx 0;
+        border-bottom: 1rpx solid #d8d8d8;
+        padding-bottom: 56rpx;
       }
-
-      .person-item:last-child {
-        margin: 0;
+      .team-add-num {
+        padding: 32rpx 32rpx 0;
       }
-
-      .item-img {
-        width: 160rpx;
-        height: 160rpx;
-        border-radius: 100rpx;
-        margin: 60rpx 20rpx 0 0;
+      .team-line {
+        height: 32rpx;
+        width: 2rpx;
+        background-color: #d8d8d8;
+        margin-left: 30rpx;
+        box-sizing: border-box;
       }
+    }
 
-      .dynamic-img {
-        width: 100%;
-        height: 500rpx;
-        margin-top: 60rpx;
-      }
+    .team-person-list {
+      height: 126rpx;
+      padding-top: 18rpx;
+      box-sizing: border-box;
+      border-bottom: 1px solid #d8d8d8;
     }
   }
 }
 </style>
+ 

src/api/client/mine.js

@@ -114,25 +114,3 @@ export function getProbleList(data) {
     },
   });
 }
-
-export function getMyTeam(data) {
-  return request({
-    url: `/maintain/invite/team/page`,
-    method: 'get',
-    data,
-    headers: {
-      'content-type': 'application/x-www-form-urlencoded',
-    },
-  });
-}
-
-export function inviteBind(data) {
-  return request({
-    url: `/maintain/invite/bind`,
-    method: 'post',
-    data,
-    headers: {
-      'content-type': 'application/json',
-    },
-  });
-}

src/api/client/team.js

@@ -0,0 +1,37 @@
+/* 我的团队 */
+import request from '@/utils/request';
+const basePath = '/maintain/invite/team/';
+
+const TEAM_API = {
+  /**
+   * 用户邀请接口 - 我的团队
+   * @returns
+   */
+  teamList: params => {
+    return request({
+      url: basePath + 'page',
+      method: 'get',
+      data: params,
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+    });
+  },
+  /**
+   * 用户邀请接口 - 绑定关系
+   * @param {*} data
+   * @returns
+   */
+  bind: data => {
+    return request({
+      url: `/maintain/invite/bind`,
+      method: 'post',
+      data,
+      headers: {
+        'content-type': 'application/json',
+      },
+    });
+  },
+};
+
+export default TEAM_API;

src/pageMerchant/storeModule/myTeam.vue

@@ -47,7 +47,8 @@
 </template>
 
 <script>
-import { getMyTeam, inviteBind } from '@/api/client/mine.js';
+import TEAM_API from '@/api/client/team.js';
+
 import { mapGetters } from 'vuex';
 export default {
   data() {
@@ -67,7 +68,7 @@ export default {
   methods: {
     // 初始化我的团队列表
     handlerInitList() {
-      getMyTeam(this.queryParams).then(res => {
+      TEAM_API.teamList(this.queryParams).then(res => {
         let { records } = res.data;
         this.teamPersonList = records;
         console.log('Res', res);

src/pages/home/index.vue

@@ -91,7 +91,8 @@
 
 <script>
 import { getHomePageApi, getSwiperListApi } from '@/api/client/home';
-import { inviteBind } from '@/api/client/mine.js';
+import TEAM_API from '@/api/client/team.js';
+
 import HomeStore from './HomeStore.vue';
 export default {
   name: 'home',
@@ -216,7 +217,7 @@ export default {
           targetId: this.userId,
           type: 1,
         };
-        inviteBind(params).then(res => {
+        TEAM_API.bind(params).then(res => {
           if (res && res.code == 200) {
             uni.showToast({
               title: '您已成功加入团队',

src/pages/mine/TapList.vue

@@ -1,199 +0,0 @@
-<template>
-  <view>
-    <!-- 预约列表 -->
-    <view class="appointList">
-      <template>
-        <u-cell
-          v-for="item in isLinkList1"
-          :key="item.id"
-          :border="false"
-          :icon="item.icon"
-          :title="item.title"
-          isLink
-          :url="item.url"
-        />
-      </template>
-    </view>
-
-    <view class="other-out-box">
-      <u-cell
-        v-for="item in isLinkList2"
-        :key="item.id"
-        :border="false"
-        :icon="item.icon"
-        :title="item.title"
-        :isLink="item.isLink"
-        :url="item.url"
-        @click="handleCellClick(item)"
-      />
-    </view>
-
-    <u-modal
-      :show="showSwitchDialog"
-      :showCancelButton="true"
-      :title="title"
-      :content="content"
-      @confirm="confirmSwitch"
-      @cancel="cancelSwitch"
-    ></u-modal>
-  </view>
-</template>
-
-<script>
-import { getMerchantAuthData } from '@/api/merchant/merchantAuth';
-export default {
-  data() {
-    return {
-      isLinkList1: [
-        {
-          id: '0',
-          icon: 'list-dot',
-          title: '预约列表',
-          url: '/PageMine/goodsReserve/index',
-        },
-        // ,
-        // {
-        //   id: '1',
-        //   icon: 'list',
-        //   title: '询价列表',
-        //   url: '/pages/client/clientUser/inquiryList',
-        // },
-      ],
-      isLinkList2: [
-        {
-          id: '0',
-          icon: 'home-fill',
-          title: '我的店铺',
-          url: '',
-          isLink: true,
-        },
-        {
-          id: '1',
-          icon: 'plus-people-fill',
-          title: '我的团队',
-          url: '/PageMine/myTeam/index',
-          isLink: true,
-        },
-        {
-          id: '2',
-          icon: 'server-man',
-          title: '客服中心',
-          url: '/PageMine/serviceCenter/index',
-          isLink: true,
-        },
-        {
-          id: '3',
-          icon: 'share-square',
-          title: '意见反馈',
-          url: '/PageMine/feedback/index',
-          isLink: true,
-        },
-        {
-          id: '4',
-          icon: 'thumb-up',
-          title: '关于我们',
-          url: '/PageMine/about/index',
-          isLink: true,
-        },
-      ],
-
-      showSwitchDialog: false,
-      title: '提醒',
-      content: '您确定要从用户端切换到商家端吗?',
-    };
-  },
-
-  methods: {
-    handleCellClick(item) {
-      console.log('item', item);
-      if (item.id == 0) {
-        this.showSwitchDialog = true;
-      } else {
-        // console.log('点击了非链接项');
-      }
-    },
-    //点击取消时
-    cancelSwitch() {
-      this.showSwitchDialog = false;
-      this.title = '提醒';
-      this.content = '您确定要从用户端切换到商家端吗?';
-    },
-    // 点击确认时
-    confirmSwitch() {
-      if (this.title == '提醒') {
-        this.getMerchantAuth();
-      } else if (this.title == '警告！') {
-        //进入审核未通过详情
-        uni.navigateTo({
-          url: 'pageMerchant/mineModule/openStoreAppealDetail',
-        });
-        this.cancelSwitch();
-      } else {
-        // 进入开店流程页面
-        uni.navigateTo({
-          url: '/pageMerchant/mineModule/certification/index',
-        });
-        this.cancelSwitch();
-      }
-    },
-
-    /*===========================================================*/
-    // 获取商家信息
-    async getMerchantAuth() {
-      let res = await getMerchantAuthData();
-      if (res.code === 'OK' && res.data) {
-        console.log(res, '获取商家信息');
-        this.$store.dispatch('SwitchIdentity', 'MERCHANT');
-        // 将数据存储到vuex中
-        this.merchantInfo = Object.assign(
-          {},
-          {
-            ...res.data,
-            mobileNumber: res.data.mobileNumber,
-          },
-        );
-        this.$store.commit('SET_MERCHANTINFO', res.data);
-        if (res.data.reviewStatus == 2) {
-          //跳转认证中页面
-          uni.navigateTo({
-            // url: '/pageMerchant/mineModule/certification/openStoreAppealDetail'
-            url: 'pageMerchant/mineModule/openStoreAppealDetail',
-          });
-          this.cancelSwitch();
-        } else if (res.data.reviewStatus == 1) {
-          uni.navigateTo({
-            url: '/pageMerchant/index',
-          });
-          this.cancelSwitch();
-        } else {
-          this.title = '警告！';
-          this.content = `认证未通过, ${
-            res.data.message ? '审核意见：' + res.data.message : ''
-          }. 点击确认进入查看信息`;
-        }
-      } else {
-        this.title = '温馨提示！';
-        this.content = '您还没有自己的店铺，如果您确定要开店，请点击确定进入开店流程';
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.appointList {
-  margin: 20rpx;
-  padding: 20rpx 10rpx;
-  border-radius: 10rpx;
-  background-color: #fff;
-}
-
-.other-out-box {
-  margin: 20rpx;
-  padding: 20rpx 10rpx;
-  border-radius: 10rpx;
-  margin-top: 0;
-  box-sizing: border-box;
-  background-color: $uni-bg-color;
-}
-</style>

src/pages/mine/mine-copy.vue

@@ -1,283 +0,0 @@
-<template>
-  <view class="container">
-    <view class="head-info">
-      <view class="head-flex">
-        <view class="flex">
-          <view style="margin-right: 20rpx">
-            <!-- <u-avatar :src="avatar" size="80" @tap="$u.route('/pages/client/clientUser/personal')" /> -->
-            <u-avatar :src="avatar" size="80" @click="handlerReviewImg" />
-          </view>
-          <view class="nickname"> {{ nickname }} </view>
-        </view>
-
-        <view class="setting-img-box" @tap="$u.route('/PageMine/setting/index')">
-          <image
-            class="setting-img"
-            src="/static/user/mine/icon_user_mine_setting.png"
-          ></image>
-          <!-- <u-icon name="setting" color="#000" size="26"></u-icon> -->
-        </view>
-      </view>
-      <!-- 收藏 积分 购物车 优惠券  -->
-
-      <view class="collect-box">
-        <u-grid :border="false" col="4">
-          <u-grid-item
-            v-for="(listItem, listIndex) in collectList"
-            :key="listIndex"
-            @tap="$u.route(listItem.url)"
-          >
-            <u-icon
-              :customStyle="{ paddingTop: 20 + 'rpx' }"
-              :name="listItem.name"
-              :size="28"
-              color="#000"
-            />
-            <text class="grid-text">{{ listItem.title }}</text>
-          </u-grid-item>
-        </u-grid>
-      </view>
-
-      <view class="order-out-box">
-        <view class="order-inner-box">
-          <u-grid :border="false" col="4" style="background-color: #fff">
-            <u-grid-item
-              v-for="(listItem, listIndex) in oderList"
-              :key="listIndex"
-              @tap="gotoOrder(listItem)"
-            >
-              <u-icon :name="listItem.name" :size="34" />
-              <text class="grid-text">{{ listItem.title }}</text>
-            </u-grid-item>
-          </u-grid>
-        </view>
-      </view>
-
-      <!-- 我的收益 -->
-      <view class="income" @click="handlerSkipMyProfit">
-        <view class="income-head">
-          <text class="my-income">我的钱包</text>
-          <u-icon name="arrow-right" />
-        </view>
-        <view class="income-content">
-          <u-grid :border="false" col="4" bgColor="#fff">
-            <u-grid-item v-for="(listItem, listIndex) in incomeList" :key="listIndex">
-              <view class="num-box">{{ listItem.num }}元</view>
-              <view class="num-title">{{ listItem.title }}</view>
-            </u-grid-item>
-          </u-grid>
-        </view>
-      </view>
-    </view>
-
-    <!-- 列表 -->
-    <TapList></TapList>
-
-    <tabbar currentTab="clientMine" />
-  </view>
-</template>
-
-<script>
-import { mapGetters } from 'vuex';
-import TapList from './components/TapList.vue';
-export default {
-  components: {
-    TapList,
-  },
-  data() {
-    return {
-      system: {},
-      systemBar: 0,
-      collectList: [
-        {
-          name: 'photo',
-          title: '收藏',
-          url: '/PageMine/favourite/index',
-        },
-        {
-          name: 'lock',
-          title: '积分',
-          url: '/pages/client/clientUser/myScore/index',
-        },
-        {
-          name: 'star',
-          title: '购物车',
-          url: '/PageMine/shopCar/index',
-        },
-        {
-          name: 'hourglass',
-          title: '优惠券',
-          url: '/PageMine/coupon/index',
-        },
-      ],
-      oderList: [
-        {
-          name: 'order',
-          title: '全部订单',
-          type: 0,
-        },
-        {
-          name: 'bag-fill',
-          title: '已发货',
-          type: 1,
-        },
-        {
-          name: 'car-fill',
-          title: '已完成',
-          type: 2,
-        },
-        // {
-        //   name: 'heart',
-        //   title: '待评价',
-        //   type: 3,
-        // },
-      ],
-      incomeList: [
-        {
-          num: '0.00',
-          title: '总收益',
-        },
-        {
-          num: '0.00',
-          title: '本月收益',
-        },
-        {
-          num: '0.00',
-          title: '本周收益',
-        },
-        {
-          num: '0.00',
-          title: '可提现',
-        },
-      ],
-    };
-  },
-  computed: {
-    ...mapGetters(['userId', 'gender', 'avatar', 'nickname']),
-  },
-  methods: {
-    getHeight() {
-      wx.getSystemInfo({
-        success: res => {
-          this.system = res;
-        },
-      });
-      this.systemBar = this.system.statusBarHeight;
-    },
-    // 点击跳转到全部订单
-    gotoOrder(item) {
-      this.$store.commit('order/GET_ORDER_TYPE', item);
-      uni.navigateTo({
-        url: `/PageMine/orderModules/index`,
-      });
-    },
-    // 点击跳转到我的收益
-    handlerSkipMyProfit() {
-      uni.navigateTo({
-        url: '/PageMine/profit/index',
-      });
-    },
-    // 点击预览图片
-    handlerReviewImg() {
-      uni.previewImage({
-        urls: [this.avatar],
-      });
-    },
-  },
-  onLoad() {
-    this.getHeight();
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.container {
-  .flex {
-    display: flex;
-    align-items: center;
-  }
-
-  .head-info {
-    padding: 200rpx 22rpx 0;
-    background: linear-gradient(180deg, #d4e2ff 0%, #e6eafb 53%, #f2f2f2);
-
-    .head-flex {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      .nickname {
-        font-size: 36rpx;
-        color: #0c1223;
-        margin-bottom: 8rpx;
-        margin-top: 20rpx;
-        font-weight: bold;
-      }
-      .setting-img-box {
-        .setting-img {
-          width: 48rpx;
-          height: 48rpx;
-        }
-      }
-    }
-
-    .collect-box {
-      width: 100%;
-
-      .grid-text {
-        font-size: 30rpx;
-        color: #000;
-      }
-    }
-
-    .order-out-box {
-      width: 100%;
-      margin-top: 44rpx;
-
-      .order-inner-box {
-        padding: 30rpx;
-        font-size: 30rpx;
-        border-radius: 10rpx;
-        background-color: $uni-bg-color;
-      }
-    }
-  }
-
-  .income {
-    padding: 22rpx;
-    border-radius: 10rpx;
-    width: calc(100% - 44rpx);
-    background-color: $uni-bg-color;
-    margin-top: 24rpx;
-    .income-head {
-      display: flex;
-      justify-content: space-between;
-
-      .my-income {
-        color: $uni-color-primary;
-        font-size: 32rpx;
-        font-weight: 600;
-      }
-    }
-
-    .income-content {
-      margin: 15rpx 0;
-
-      .num-box {
-        padding: 20rpx 0;
-        font-size: 36rpx;
-        font-weight: 600;
-        color: $uni-text-color;
-      }
-
-      .num-title {
-        font-size: 28rpx;
-        color: $uni-text-color-grey;
-      }
-    }
-  }
-}
-
-.flex {
-  display: flex;
-}
-</style>