我的团队添加

pages/my-index/components/card-input.vue

@@ -1,4 +1,11 @@
 <script setup>
+  import { computed, useSlots } from 'vue'
+
+  const slots = useSlots()
+
+  // 判断默认的插槽是否存在
+  const hasDefaultSlot = computed(() => slots.default !== undefined)
+
   const name = defineModel({
     type: String,
     default: ''
@@ -24,6 +31,11 @@
     placeholder: {
       type: String,
       default: '请输入'
+    },
+    /** 是否使用输入框 */
+    isInput: {
+      type: Boolean,
+      default: true
     }
   })
 
@@ -32,13 +44,19 @@
 
 <template>
   <view class="card-input">
-    <text class="title">{{ props.title }}</text>
-    <input
-      v-model="name"
-      :type="props.type"
-      :placeholder-style="placeholderStyle"
-      :placeholder="props.placeholder"
-    />
+    <view class="input-box">
+      <text class="title">{{ props.title }}</text>
+      <input
+        v-if="props.isInput"
+        v-model="name"
+        :type="props.type"
+        :placeholder-style="placeholderStyle"
+        :placeholder="props.placeholder"
+      />
+    </view>
+    <view v-if="hasDefaultSlot" class="bottom-slot">
+      <slot></slot>
+    </view>
   </view>
 </template>
 
@@ -51,7 +69,15 @@
     border-radius: 16rpx;
     padding: 20rpx 32rpx;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    .input-box {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+    }
+    .bottom-slot {
+      margin-top: 26rpx;
+    }
     .title {
       font-family: PingFang SC, PingFang SC;
       font-weight: 500;

pages/my-index/my-index.vue

@@ -9,7 +9,7 @@
       icon: 'wallet',
       url: '/pages/my-index/wallet/index'
     },
-    { name: '我的团队', icon: 'team' },
+    { name: '我的团队', icon: 'team', url: '/pages/my-index/my-team' },
     { name: '会议记录', icon: 'meeting' },
     { name: '我的朋友圈', icon: 'circle' },
     { name: '我的收藏', icon: 'collection' },

pages/my-index/my-team.vue

@@ -0,0 +1,56 @@
+<script setup></script>
+
+<template>
+  <view class="team-index">
+    <!-- 顶部卡片 -->
+    <view class="top-card">
+      <view class="num-box">
+        <text>我的团队(人)</text>
+        <text>2933</text>
+      </view>
+      <image
+        src="/static/images/my-index/team-bg.png"
+        mode="heightFix"
+        class="img"
+      ></image>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  @import './styles/index.scss';
+
+  .team-index {
+    padding: 32rpx 24rpx;
+
+    .top-card {
+      padding: 26rpx 36rpx;
+      background: linear-gradient(0deg, #00d993 0%, #00d9c5 100%);
+      border-radius: 32rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .num-box {
+        display: flex;
+        flex-direction: column;
+        font-family: PingFang SC, PingFang SC;
+        font-style: normal;
+        text-transform: none;
+        text {
+          font-weight: 500;
+          font-size: 28rpx;
+          color: #ffffff;
+          &:last-child {
+            margin-top: 8rpx;
+            font-weight: bold;
+            font-size: 64rpx;
+            color: #ffffff;
+          }
+        }
+      }
+      .img {
+        height: 144rpx;
+      }
+    }
+  }
+</style>

pages/my-index/wallet/bank-card/card-details.vue

@@ -51,6 +51,9 @@
           stateData.state === '101' ? '支付宝账号' : '微信账号'
         }`"
       ></CardInput>
+      <CardInput :is-input="false" title="收款码">
+        <cb-file-picker v-model="formData.img"></cb-file-picker>
+      </CardInput>
     </view>
   </view>
 </template>

pages/my-index/wallet/index.vue

@@ -13,7 +13,7 @@
       key: '3',
       url: '/pages/my-index/wallet/edit-password'
     },
-    { title: '实名认证', key: '4', url: '' }
+    { title: '实名认证', key: '4', url: '/pages/my-index/wallet/real-id' }
   ]
 </script>
 
@@ -23,7 +23,7 @@
     <view class="top-card">
       <view class="left-box">
         <text>我的资产</text>
-        <text>2222</text>
+        <text>1222</text>
       </view>
       <view class="right-box">
         <button>充值</button>

pages/my-index/wallet/real-id.vue

@@ -0,0 +1,67 @@
+<script setup>
+  import { reactive } from 'vue'
+  import CardInput from '../components/card-input.vue'
+
+  const formData = reactive({
+    // 正面
+    front: '',
+    // 背面
+    back: '',
+    // 手机号
+    phone: '',
+    // 身份证号码
+    idCard: ''
+  })
+</script>
+
+<template>
+  <view class="real-id">
+    <!-- 说明 -->
+    <text class="top-text">*为保证您的账户安全,请先完成实名认证</text>
+
+    <CardInput :is-input="false" title="收款码">
+      <view class="qrcode-box">
+        <cb-file-picker v-model="formData.front" isFront></cb-file-picker>
+        <cb-file-picker v-model="formData.back" isBack></cb-file-picker>
+      </view>
+    </CardInput>
+
+    <CardInput
+      v-model="formData.phone"
+      title="手机号"
+      type="tel"
+      placeholder="请输入手机号"
+    ></CardInput>
+
+    <CardInput
+      v-model="formData.idCard"
+      type="text"
+      title="身份证号"
+      placeholder="请输入身份证号"
+    ></CardInput>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  @import '../styles/index.scss';
+
+  .real-id {
+    padding: 32rpx 24rpx;
+    font-family: PingFang SC, PingFang SC;
+    font-style: normal;
+    text-transform: none;
+    .top-text {
+      display: block;
+      font-weight: 500;
+      font-size: 24rpx;
+      color: #999999;
+      text-align: left;
+      margin-bottom: 32rpx;
+    }
+
+    .qrcode-box {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+</style>