From 75654a9084cae645241642933720d36672cd0670 Mon Sep 17 00:00:00 2001
From: Fox-33 <1466778434@qq.com>
Date: Wed, 19 Mar 2025 21:20:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=86=E9=94=80=E9=A1=B5=E9=9D=A2;?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/base/suspendDropdown.vue | 117 +++++++++++++
 pages/index/center.vue              |   2 +-
 pages/index/record.vue              |  47 ++---
 pages_order/mine/team.vue           | 330 +++++++++++++++++++++++++++++++++++-
 4 files changed, 458 insertions(+), 38 deletions(-)
 create mode 100644 components/base/suspendDropdown.vue

diff --git a/components/base/suspendDropdown.vue b/components/base/suspendDropdown.vue
new file mode 100644
index 0000000..bb91766
--- /dev/null
+++ b/components/base/suspendDropdown.vue
@@ -0,0 +1,117 @@
+<template>
+  <view class="drop-down">
+    <button class="btn-simple" plain @click="openPicker" >
+      <slot>
+        <image src="../../static/image/record/filter.png" style="width: 30rpx; height: 30rpx; margin: 10rpx;"></image>
+      </slot>
+    </button>
+
+    <template v-if="popupVisible">
+      <view class="drop-down-overlay" @click="closePicker"></view>
+      
+      <view class="card drop-down-popup">
+        <view 
+          v-for="item in options" 
+          class="drop-down-option" 
+          :class="[item.value === value ? 'is-active' : '']"
+          :key="item.value"
+          @click="onSelect(item.value)"
+        >
+          <text>{{ item.label }}</text>
+        </view>
+      </view>
+    </template>
+  </view>
+</template>
+
+
+<script>
+	export default {
+    props: {
+      value: {
+        type: String | Number,
+        default: null,
+      },
+      options: {
+        type: Array,
+        default() {
+          return []
+        }
+      }
+    },
+		data() {
+      return {
+        popupVisible: false,
+      }
+    },
+    methods: {
+      openPicker() {
+        this.popupVisible = true
+      },
+      closePicker() {
+        this.popupVisible = false
+      },
+			onSelect(val) {
+				const selected = this.value
+        const newVal = selected === val ? null : val
+        
+        this.$emit('input', newVal)
+        this.$emit('change', newVal)
+			},
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+.drop-down {
+  position: relative;
+  clear: both;
+
+  &-overlay {
+    position: fixed;
+    width: 100vw;
+    height: calc(100vh - #{$navbar-height} - var(--status-bar-height) - 20rpx);
+    background: transparent;
+    bottom: 0;
+    left: 0;
+    font-size: 0;
+  }
+
+  &-popup {
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    padding: 16rpx 40rpx;
+    position: absolute;
+    z-index: 99;
+    right: -14rpx;
+    margin-top: 28rpx;
+
+    &:before {
+      content: ' ';
+      position: absolute;
+      top: -28rpx;
+      right: 14rpx;
+      width: 0;
+      height: 0;
+      border: 14rpx solid transparent;
+      border-bottom-color: #FFFFFF;
+    }
+
+  }
+
+  &-option {
+    color: #999999;
+    font-size: 28rpx;
+
+    white-space: nowrap;
+
+    &.is-active {
+      color: #1B1B1B;
+      font-weight: 700;
+    }
+
+    & + & {
+      margin-top: 16rpx;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/index/center.vue b/pages/index/center.vue
index 6864e79..93e782d 100644
--- a/pages/index/center.vue
+++ b/pages/index/center.vue
@@ -95,7 +95,7 @@
 					:icon="false"
 					fontSize="28rpx"
 					:customStyle="{
-						padding: 0,
+						padding: '6rpx 0',
 					}"
 				></uv-notice-bar>
 			</view>
diff --git a/pages/index/record.vue b/pages/index/record.vue
index a88559e..d2b3897 100644
--- a/pages/index/record.vue
+++ b/pages/index/record.vue
@@ -5,7 +5,7 @@
 		
 		<view class="content">
 
-			<view class="card" style="padding-left: 0;">
+			<view class="card" style="padding-left: 0; padding-right: 10rpx;">
 				<uv-tabs :list="tabs" 
 					:inactiveStyle="{
 						color: '#999999',
@@ -26,33 +26,11 @@
 					@click="clickTabs"
 				>
 					<template v-slot:right>
-						<view>
-							<uv-popup 
-								ref="popup"
-								:overlayOpacity="0"
-								:customStyle="{
-									backgroundColor: 'transparent',
-									position: 'fixed',
-									top: '300rpx',
-									right: '20rpx'
-								}"
-							>
-								<view class="card popup-options">
-									<view 
-										class="popup-option" 
-										:class="{ 'is-active': item.value === queryParams.auditStatus }"
-										v-for="item in auditStatusOptions" 
-										:key="item.value"
-										@click="onSelectAuditStatus(item.value)"
-									>
-										<text>{{ item.label }}</text>
-									</view>
-								</view>
-							</uv-popup>
-							<button class="btn-simple" plain @click="openPicker" >
-								<image src="../../static/image/record/filter.png" style="width: 30rpx; height: 30rpx;"></image>
-							</button>
-						</view>
+            <suspendDropdown 
+              v-model="queryParams.auditStatus"
+              :options="auditStatusOptions"
+							@change="onAuditStatusChange"
+            ></suspendDropdown>
 					</template>
 				</uv-tabs>
 			</view>
@@ -93,6 +71,7 @@
 
 <script>
 	import tabber from '@/components/base/tabbar.vue'
+  import suspendDropdown from '@/components/base/suspendDropdown.vue'
 	import { mapGetters } from 'vuex'
 
 	const URL_MAPPING = { // state -> url
@@ -105,6 +84,7 @@
 	export default {
 		components : {
 			tabber,
+			suspendDropdown,
 		},
 		computed : {
 			...mapGetters(['userShop']),
@@ -225,13 +205,10 @@
 				this.queryParams.pageSize = 10
 				this.orderPage()
 			},
-			openPicker() {
-				this.$refs.popup.open();
-			},
-			onSelectAuditStatus(val) {
-				const selected = this.queryParams.auditStatus
-	
-				this.queryParams.auditStatus = selected === val ? null : val
+			onAuditStatusChange(auditStatus) {
+				// todo
+
+				// fetch list
 			},
 			//跳转分享详情页面
 			toSharingDetail(id) {
diff --git a/pages_order/mine/team.vue b/pages_order/mine/team.vue
index a4d000a..2a50d2d 100644
--- a/pages_order/mine/team.vue
+++ b/pages_order/mine/team.vue
@@ -1,18 +1,344 @@
 <template>
-  <view>
+  <view class="page">
 		<navbar title="分销" leftClick @leftClick="$utils.navigateBack" />
 
+    <view class="content">
+      <view class="overview">
+        <view class="title">我的推荐人</view>
+        <view class="card flex referrer">
+          <!-- todo: 换回接口提供的 -->
+          <image class="avatar" src="../static/temp-avatar.png"></image>
+          <view class="referrer-info">
+            <view>
+              <view class="nick-name">裂变星1号</view>
+              <view>{{ `ID：${12345678}` }}</view>
+            </view>
+            <view>
+              <view class="phone-label">手机号</view>
+              <view>15234567891</view>
+            </view>
+          </view>
+        </view>
+        <view class="summary">
+          <image class="bg" src="../static/center/overview-bg.png"></image>
+
+          <view class="flex flex-column summary-info">
+            <!-- todo: 换回接口提供的 -->
+            <view class="flex summary-info-total">
+              <view class="flex flex-column">
+                <view class="value">100</view>
+                <view class="label">推荐总人数（人）</view>
+              </view>
+            </view>
+            <view class="flex summary-info-detail">
+              <view class="flex flex-column">
+                <view class="label">直接推荐（人）</view>
+                <view class="value">90</view>
+              </view>
+              <view class="flex flex-column">
+                <view class="label">间接推荐（人）</view>
+                <view class="value">10</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+        
+      <view class="card" style="padding: 20rpx 10rpx 11rpx 0;">
+        <uv-tabs :list="tabs" 
+          :inactiveStyle="{
+            color: '#999999',
+            fontSize: '30rpx',
+            fontWeight: 500,
+            whiteSpace: 'nowrap',
+          }"
+          :activeStyle="{
+            color: '#1B1B1B',
+            fontSize: '38rpx',
+            fontWeight: 900,
+            whiteSpace: 'nowrap',
+          }"
+          lineHeight="13rpx"
+          lineWidth="77rpx"
+          :lineColor="`url('../../static/image/record/slider.png') 100% 100%`"
+          :scrollable="false"
+          @click="clickTabs"
+        >
+          <template v-slot:right>
+            <suspendDropdown 
+              v-model="queryParams.role"
+              :options="roleOptions"
+              @change="onRoleChange"
+            ></suspendDropdown>
+          </template>
+        </uv-tabs>
+      </view>
+
+      <view class="card flex list-item"
+        v-for="item in recordList.records"
+        :key="item.id"
+      >
+        <image class="avatar" :src="item.avatarUrl"></image>
+        <view class="flex" style="flex: 1; justify-content: space-between;">
+          <view class="flex flex-column left">
+            <view class="highlight">{{ item.nickName }}</view>
+            <view>{{ item.roleName }}</view>
+          </view>
+          <view class="flex flex-column right">
+            <view>{{ item.createTime }}</view>
+            <view>{{ item.createDate }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
+  import suspendDropdown from '@/components/base/suspendDropdown.vue'
+
 	export default {
+    components: {
+      suspendDropdown,
+    },
 		data() {
 			return {
+				tabs: [{
+						name: '直接推荐'
+					},
+					{
+						name: '间接推荐'
+					},
+				],
+				roleOptions: [
+					{
+						label: '普通会员',
+						value: 0,
+					},
+					{
+						label: '代理商',
+						value: 1,
+					},
+				],
+        recordList: {
+          records: [
+            {
+              id: '001',
+              avatarUrl: '../static/temp-avatar.png',
+              nickName: '裂变星1号',
+              roleName: '普通会员',
+              createDate: '2025年2月15日',
+              createTime: '12:56:48',
+            },
+            {
+              id: '002',
+              avatarUrl: '../static/temp-avatar.png',
+              nickName: '裂变星1号',
+              roleName: '代理商',
+              createDate: '2025年2月15日',
+              createTime: '12:56:48',
+            },
+            {
+              id: '003',
+              avatarUrl: '../static/temp-avatar.png',
+              nickName: '裂变星1号',
+              roleName: '普通会员',
+              createDate: '2025年2月15日',
+              createTime: '12:56:48',
+            },
+            {
+              id: '004',
+              avatarUrl: '../static/temp-avatar.png',
+              nickName: '裂变星1号',
+              roleName: '代理商',
+              createDate: '2025年2月15日',
+              createTime: '12:56:48',
+            },
+            {
+              id: '005',
+              avatarUrl: '../static/temp-avatar.png',
+              nickName: '裂变星1号',
+              roleName: '普通会员',
+              createDate: '2025年2月15日',
+              createTime: '12:56:48',
+            },
+          ],
+          total: 0,
+        },
+        // recordList: {
+        //   records: [],
+        //   total: 0,
+        // },
+        state: -1,
+				queryParams: {
+					pageNo: 1,
+					pageSize: 10,
+					role: null,
+				},
       }
-    }
+    },
+		onShow() {
+			this.orderPage()
+		},
+		//滚动到屏幕底部
+		onReachBottom() {
+			if(this.queryParams.pageSize < this.recordList.total){
+				this.queryParams.pageSize += 10
+				this.orderPage()
+			}
+		},
+    methods: {
+			orderPage(){
+				// todo
+				return
+				let queryParams = {
+					...this.queryParams,
+				}
+				if(this.state != -1){
+					queryParams.state = this.state
+				}
+				this.$api('orderPage', queryParams, res => {
+					if(res.code == 200){
+						this.recordList = res.result
+					}
+				})
+			},
+			//点击tab栏
+			clickTabs(index) {
+				if (index == 0) {
+					this.state = -1;
+				} else {
+					this.state = index - 1;
+				}
+				this.queryParams.pageSize = 10
+				this.orderPage()
+			},
+      onRoleChange(role) {
+        // todo
+
+        // fetch list
+      }
+    },
   }
 </script>
 
 <style scoped lang="scss">
+.page {
+  background-color: $uni-bg-color;
+}
+
+.content {
+  padding: 20rpx;
+}
+
+.overview {
+  & > .title {
+    color: #1B1B1B;
+    font-size: 24rpx;
+  }
+
+  .referrer {
+    color: #999999;
+    font-size: 24rpx;
+    padding: 20rpx;
+    margin-top: 20rpx;
+
+    .avatar {
+      width: 84rpx;
+      height: 84rpx;
+      border-radius: 50%;
+      margin-right: 20rpx;
+    }
+
+    &-info {
+      flex: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .nick-name {
+      color: #1B1B1B;
+      font-size: 32rpx;
+      font-weight: 700;
+    }
+
+    .phone-label {
+      color: #1B1B1B;
+      text-align: right;
+    }
+  }
+
+  .summary {
+    margin-top: 20rpx;
+    position: relative;
+    width: 100%;
+    height: 373rpx;
+
+    color: #04D6A3;
+
+    & > .bg {
+      width: 100%;
+      height: 100%;
+    }
+
+    &-info {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      justify-content: space-between;
+
+      width: 100%;
+      height: 100%;
+      padding: 32rpx 78rpx;
+      box-sizing: border-box;
+
+      &-detail {
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+    
+    .label {
+      font-size: 24rpx;
+      font-weight: 500;
+    }
+    .value {
+      font-size: 78rpx;
+      font-weight: 900;
+    }
+  }
+}
+
+.card {
+  margin-top: 20rpx;
+}
+
+.list {
+  &-item {
+    color: #999999;
+    font-size: 24rpx;
+
+    .left {
+      align-items: flex-start;
+    }
+    .right {
+      align-items: flex-end;
+    }
+
+    .highlight {
+      color: #1B1B1B;
+      font-size: 32rpx;
+      font-weight: 800;
+    }
+
+    .avatar {
+      width: 84rpx;
+      height: 84rpx;
+      border-radius: 50%;
+      margin-right: 20rpx;
+    }
+  }
+}
 </style>
\ No newline at end of file