yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

修改页面头部布局和样式

Signed-off-by: heyho <heywsk@qq.com>
pull/94/head
heyho 2024-09-06 01:29:47 +00:00 committed by Gitee
parent 089191e95d
commit bfdfd94f9a
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
1 changed files with 439 additions and 457 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
pages/commission/team.vue
View File

@ -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
class="promoterHeader bg-color"
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 style="padding: 0 20rpx">
<view class="nav acea-row row-around l1" style="position: relative;z-index:99">
<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
class="search acea-row row-between-wrapper"
style="display: flex; height: 100rpx; align-items: center"
>
<view class="search acea-row row-between-wrapper"
style="display: flex; height: 100rpx; align-items: center">
<view class="input">
<input
placeholder="点击搜索会员名称"
v-model="state.nickname"
confirm-type="search"
name="search"
@confirm="submitForm"
/>
<input placeholder="点击搜索会员名称" v-model="state.nickname" confirm-type="search" name="search"
@confirm="submitForm" />
</view>
<image
src="/static/images/search.png"
mode=""
style="width: 60rpx; height: 64rpx"
@click="submitForm"
/>
<image src="/static/images/search.png" 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
class="sortItem"
@click="setSort('userCount', 'asc')"
v-if="sort === 'userCountDESC'"
>
<view class="sortItem" @click="setSort('userCount', 'asc')" v-if="sort === 'userCountDESC'">
团队排序
<!-- TODO 芋艿：看看怎么从项目里拿出去 -->
<image src="/static/images/sort1.png" />
</view>
<view
class="sortItem"
@click="setSort('userCount', 'desc')"
v-else-if="sort === 'userCountASC'"
>
<view class="sortItem" @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
class="sortItem"
@click="setSort('price', 'desc')"
v-else-if="sort === 'priceASC'"
>
<view 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
class="sortItem"
@click="setSort('orderCount', 'asc')"
v-if="sort === 'orderCountDESC'"
>
<view class="sortItem" @click="setSort('orderCount', 'asc')" v-if="sort === 'orderCountDESC'">
订单排序
<image src="/static/images/sort1.png" />
</view>
<view
class="sortItem"
@click="setSort('orderCount', 'desc')"
v-else-if="sort === 'orderCountASC'"
>
<view class="sortItem" @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
class="picTxt acea-row row-between-wrapper"
style="display: flex; align-items: center"
>
<view class="picTxt acea-row row-between-wrapper"
style="display: flex; align-items: center">
<view class="pictrue">
<image :src="item.avatar" />
</view>
@ -128,30 +100,26 @@
</view>
</view>
</view>
<view
class="right"
style="
<view 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
>单</view
>
<text class="num">{{ item.orderCount || 0 }}</text>单
</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 { computed, reactive, ref } from 'vue';
import {
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;
});