页面头部样式修改和完善。

修改页面头部布局和样式

Signed-off-by: heyho <heywsk@qq.com>

pages/commission/team.vue

@@ -1,29 +1,32 @@
 <!-- 页面 TODO 芋艿：该页面的实现代码需要优化，包括 js 和 css，以及相关的样式设计 -->
 <template>
 	<s-layout title="我的团队" :class="state.scrollTop ? 'team-wrap' : ''" navbar="inner">
+
+		<view class="header-box" :style="[
+	      {
+	        marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+	        paddingTop: Number(statusBarHeight + 108) + 'rpx',
+	      },
+	    ]">	
+			<!-- 推广数据总览 -->
+			<view class="team-data-box ss-flex ss-col-center ss-row-between" style="width: 100%">
+				<view class="data-card" style="width: 100%">
+					<view class="total-item" style="width: 100%">
+						<view class="item-title" style="text-align: center">推广人数</view>
+						<view class="total-num" style="text-align: center">
+							{{state.summary.firstBrokerageUserCount + state.summary.secondBrokerageUserCount ||0}}
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view style="height:30rpx"></view>
+		</view>
+
+
 		<view class="promoter-list">
-      <view
+			<view style="padding: 0 20rpx">
-        class="promoterHeader bg-color"
+				<view class="nav acea-row row-around l1" style="position: relative;z-index:99">
-        style="backgroundcolor: #e93323 !important; height: 218rpx; color: #fff"
-      >
-        <view class="headerCon acea-row row-between" style="padding: 28px 29px 0 29px">
-          <view>
-            <view class="name" style="color: #fff">推广人数</view>
-            <view>
-              <text class="num" style="color: #fff">
-                {{
-                  state.summary.firstBrokerageUserCount + state.summary.secondBrokerageUserCount ||
-                  0
-                }}
-              </text>
-              人
-            </view>
-          </view>
-          <view class="iconfont icon-tuandui" />
-        </view>
-      </view>
-      <view style="padding: 0 30rpx">
-        <view class="nav acea-row row-around l1">
 					<view :class="state.level == 1 ? 'item on' : 'item'" @click="setType(1)">
 						一级({{ state.summary.firstBrokerageUserCount || 0 }})
 					</view>
@@ -31,42 +34,24 @@
 						二级({{ state.summary.secondBrokerageUserCount || 0 }})
 					</view>
 				</view>
-        <view
+				<view class="search acea-row row-between-wrapper"
-          class="search acea-row row-between-wrapper"
+					style="display: flex; height: 100rpx; align-items: center">
-          style="display: flex; height: 100rpx; align-items: center"
-        >
 					<view class="input">
-            <input
+						<input placeholder="点击搜索会员名称" v-model="state.nickname" confirm-type="search" name="search"
-              placeholder="点击搜索会员名称"
+							@confirm="submitForm" />
-              v-model="state.nickname"
-              confirm-type="search"
-              name="search"
-              @confirm="submitForm"
-            />
 					</view>
-          <image
+					<image src="/static/images/search.png" mode="" style="width: 60rpx; height: 64rpx"
-            src="/static/images/search.png"
+						@click="submitForm" />
-            mode=""
-            style="width: 60rpx; height: 64rpx"
-            @click="submitForm"
-          />
 				</view>
 				<view class="list">
 					<view class="sortNav acea-row row-middle" style="display: flex; align-items: center">
-            <view
+						<view class="sortItem" @click="setSort('userCount', 'asc')" v-if="sort === 'userCountDESC'">
-              class="sortItem"
-              @click="setSort('userCount', 'asc')"
-              v-if="sort === 'userCountDESC'"
-            >
 							团队排序
 							<!-- TODO 芋艿：看看怎么从项目里拿出去 -->
 							<image src="/static/images/sort1.png" />
 						</view>
-            <view
+						<view class="sortItem" @click="setSort('userCount', 'desc')"
-              class="sortItem"
+							v-else-if="sort === 'userCountASC'">
-              @click="setSort('userCount', 'desc')"
-              v-else-if="sort === 'userCountASC'"
-            >
 							团队排序
 							<image src="/static/images/sort3.png" />
 						</view>
@@ -78,11 +63,7 @@
 							金额排序
 							<image src="/static/images/sort1.png" />
 						</view>
-            <view
+						<view class="sortItem" @click="setSort('price', 'desc')" v-else-if="sort === 'priceASC'">
-              class="sortItem"
-              @click="setSort('price', 'desc')"
-              v-else-if="sort === 'priceASC'"
-            >
 							金额排序
 							<image src="/static/images/sort3.png" />
 						</view>
@@ -90,19 +71,12 @@
 							金额排序
 							<image src="/static/images/sort2.png" />
 						</view>
-            <view
+						<view class="sortItem" @click="setSort('orderCount', 'asc')" v-if="sort === 'orderCountDESC'">
-              class="sortItem"
-              @click="setSort('orderCount', 'asc')"
-              v-if="sort === 'orderCountDESC'"
-            >
 							订单排序
 							<image src="/static/images/sort1.png" />
 						</view>
-            <view
+						<view class="sortItem" @click="setSort('orderCount', 'desc')"
-              class="sortItem"
+							v-else-if="sort === 'orderCountASC'">
-              @click="setSort('orderCount', 'desc')"
-              v-else-if="sort === 'orderCountASC'"
-            >
 							订单排序
 							<image src="/static/images/sort3.png" />
 						</view>
@@ -113,10 +87,8 @@
 					</view>
 					<block v-for="(item, index) in state.pagination.list" :key="index">
 						<view class="item acea-row row-between-wrapper" style="display: flex">
-              <view
+							<view class="picTxt acea-row row-between-wrapper"
-                class="picTxt acea-row row-between-wrapper"
+								style="display: flex; align-items: center">
-                style="display: flex; align-items: center"
-              >
 								<view class="pictrue">
 									<image :src="item.avatar" />
 								</view>
@@ -128,30 +100,26 @@
 									</view>
 								</view>
 							</view>
-              <view
+							<view class="right" style="
-                class="right"
-                style="
                   justify-content: center;
                   flex-direction: column;
                   display: flex;
                   margin-left: auto;
-                "
+                ">
-              >
 								<view>
 									<text class="num font-color">{{ item.brokerageUserCount || 0 }} </text>人
 								</view>
 								<view>
-                  <text class="num">{{ item.orderCount || 0 }}</text
+									<text class="num">{{ item.orderCount || 0 }}</text>单
-                  >单</view
+								</view>
-                >
 								<view>
-                  <text class="num">{{ item.brokeragePrice || 0 }}</text
+									<text class="num">{{ item.brokeragePrice || 0 }}</text>元
-                  >元
 								</view>
 							</view>
 						</view>
 					</block>
 					<block v-if="state.pagination.list.length === 0">
+						<view style="margin-top: 30rpx;"></view>
 						<view style="text-align: center">暂无推广人数</view>
 					</block>
 				</view>
@@ -233,10 +201,19 @@
 
 <script setup>
 	import sheep from '@/sheep';
-  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+	import {
-  import { computed, reactive, ref } from 'vue';
+		onLoad,
+		onReachBottom
+	} from '@dcloudio/uni-app';
+	import {
+		computed,
+		reactive,
+		ref
+	} from 'vue';
 	import _ from 'lodash-es';
-  import { onPageScroll } from '@dcloudio/uni-app';
+	import {
+		onPageScroll
+	} from '@dcloudio/uni-app';
 	import BrokerageApi from '@/sheep/api/trade/brokerage';
 
 	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
@@ -279,7 +256,10 @@
 
 	async function getTeamList() {
 		state.loadStatus = 'loading';
-    let { code, data } = await BrokerageApi.getBrokerageUserChildSummaryPage({
+		let {
+			code,
+			data
+		} = await BrokerageApi.getBrokerageUserChildSummaryPage({
 			pageNo: state.pagination.pageNo,
 			pageSize: state.pagination.pageSize,
 			level: state.level,
@@ -312,7 +292,9 @@
 	onLoad(async () => {
 		await getTeamList();
 		// 概要数据
-    let { data } = await BrokerageApi.getBrokerageUserSummary();
+		let {
+			data
+		} = await BrokerageApi.getBrokerageUserSummary();
 		state.summary = data;
 	});