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

896
pages/commission/team.vue
View File

@ -1,165 +1,133 @@
<!-- 页面 TODO 芋艿：该页面的实现代码需要优化，包括 js 和 css，以及相关的样式设计 --> <!-- 页面 TODO 芋艿：该页面的实现代码需要优化，包括 js 和 css，以及相关的样式设计 -->
<template> <template>
<s-layout title="我的团队" :class="state.scrollTop ? 'team-wrap' : ''" navbar="inner"> <s-layout title="我的团队" :class="state.scrollTop ? 'team-wrap' : ''" navbar="inner">
<view class="promoter-list">
<view <view class="header-box" :style="[
class="promoterHeader bg-color" {
style="backgroundcolor: #e93323 !important; height: 218rpx; color: #fff" marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
> paddingTop: Number(statusBarHeight + 108) + 'rpx',
<view class="headerCon acea-row row-between" style="padding: 28px 29px 0 29px"> },
<view> ]">
<view class="name" style="color: #fff">推广人数</view> <!-- 推广数据总览 -->
<view> <view class="team-data-box ss-flex ss-col-center ss-row-between" style="width: 100%">
<text class="num" style="color: #fff"> <view class="data-card" style="width: 100%">
{{ <view class="total-item" style="width: 100%">
state.summary.firstBrokerageUserCount + state.summary.secondBrokerageUserCount || <view class="item-title" style="text-align: center">推广人数</view>
0 <view class="total-num" style="text-align: center">
}} {{state.summary.firstBrokerageUserCount + state.summary.secondBrokerageUserCount ||0}}
</text> </view>
人 </view>
</view> </view>
</view> </view>
<view class="iconfont icon-tuandui" />
</view> <view style="height:30rpx"></view>
</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)"> <view class="promoter-list">
一级({{ state.summary.firstBrokerageUserCount || 0 }}) <view style="padding: 0 20rpx">
</view> <view class="nav acea-row row-around l1" style="position: relative;z-index:99">
<view :class="state.level == 2 ? 'item on' : 'item'" @click="setType(2)"> <view :class="state.level == 1 ? 'item on' : 'item'" @click="setType(1)">
二级({{ state.summary.secondBrokerageUserCount || 0 }}) 一级({{ state.summary.firstBrokerageUserCount || 0 }})
</view> </view>
</view> <view :class="state.level == 2 ? 'item on' : 'item'" @click="setType(2)">
<view 二级({{ state.summary.secondBrokerageUserCount || 0 }})
class="search acea-row row-between-wrapper" </view>
style="display: flex; height: 100rpx; align-items: center" </view>
> <view class="search acea-row row-between-wrapper"
<view class="input"> style="display: flex; height: 100rpx; align-items: center">
<input <view class="input">
placeholder="点击搜索会员名称" <input placeholder="点击搜索会员名称" v-model="state.nickname" confirm-type="search" name="search"
v-model="state.nickname" @confirm="submitForm" />
confirm-type="search" </view>
name="search" <image src="/static/images/search.png" mode="" style="width: 60rpx; height: 64rpx"
@confirm="submitForm" @click="submitForm" />
/> </view>
</view> <view class="list">
<image <view class="sortNav acea-row row-middle" style="display: flex; align-items: center">
src="/static/images/search.png" <view class="sortItem" @click="setSort('userCount', 'asc')" v-if="sort === 'userCountDESC'">
mode="" 团队排序
style="width: 60rpx; height: 64rpx" <!-- TODO 芋艿：看看怎么从项目里拿出去 -->
@click="submitForm" <image src="/static/images/sort1.png" />
/> </view>
</view> <view class="sortItem" @click="setSort('userCount', 'desc')"
<view class="list"> v-else-if="sort === 'userCountASC'">
<view class="sortNav acea-row row-middle" style="display: flex; align-items: center"> 团队排序
<view <image src="/static/images/sort3.png" />
class="sortItem" </view>
@click="setSort('userCount', 'asc')" <view class="sortItem" @click="setSort('userCount', 'desc')" v-else>
v-if="sort === 'userCountDESC'" 团队排序
> <image src="/static/images/sort2.png" />
团队排序 </view>
<!-- TODO 芋艿：看看怎么从项目里拿出去 --> <view class="sortItem" @click="setSort('price', 'asc')" v-if="sort === 'priceDESC'">
<image src="/static/images/sort1.png" /> 金额排序
</view> <image src="/static/images/sort1.png" />
<view </view>
class="sortItem" <view class="sortItem" @click="setSort('price', 'desc')" v-else-if="sort === 'priceASC'">
@click="setSort('userCount', 'desc')" 金额排序
v-else-if="sort === 'userCountASC'" <image src="/static/images/sort3.png" />
> </view>
团队排序 <view class="sortItem" @click="setSort('price', 'desc')" v-else>
<image src="/static/images/sort3.png" /> 金额排序
</view> <image src="/static/images/sort2.png" />
<view class="sortItem" @click="setSort('userCount', 'desc')" v-else> </view>
团队排序 <view class="sortItem" @click="setSort('orderCount', 'asc')" v-if="sort === 'orderCountDESC'">
<image src="/static/images/sort2.png" /> 订单排序
</view> <image src="/static/images/sort1.png" />
<view class="sortItem" @click="setSort('price', 'asc')" v-if="sort === 'priceDESC'"> </view>
金额排序 <view class="sortItem" @click="setSort('orderCount', 'desc')"
<image src="/static/images/sort1.png" /> v-else-if="sort === 'orderCountASC'">
</view> 订单排序
<view <image src="/static/images/sort3.png" />
class="sortItem" </view>
@click="setSort('price', 'desc')" <view class="sortItem" @click="setSort('orderCount', 'desc')" v-else>
v-else-if="sort === 'priceASC'" 订单排序
> <image src="/static/images/sort2.png" />
金额排序 </view>
<image src="/static/images/sort3.png" /> </view>
</view> <block v-for="(item, index) in state.pagination.list" :key="index">
<view class="sortItem" @click="setSort('price', 'desc')" v-else> <view class="item acea-row row-between-wrapper" style="display: flex">
金额排序 <view class="picTxt acea-row row-between-wrapper"
<image src="/static/images/sort2.png" /> style="display: flex; align-items: center">
</view> <view class="pictrue">
<view <image :src="item.avatar" />
class="sortItem" </view>
@click="setSort('orderCount', 'asc')" <view class="text">
v-if="sort === 'orderCountDESC'" <view class="name line1">{{ item.nickname }}</view>
> <view>
订单排序 加入时间:
<image src="/static/images/sort1.png" /> {{ sheep.$helper.timeFormat(item.brokerageTime, 'yyyy-mm-dd hh:MM:ss') }}
</view> </view>
<view </view>
class="sortItem" </view>
@click="setSort('orderCount', 'desc')" <view class="right" style="
v-else-if="sort === 'orderCountASC'"
>
订单排序
<image src="/static/images/sort3.png" />
</view>
<view class="sortItem" @click="setSort('orderCount', 'desc')" v-else>
订单排序
<image src="/static/images/sort2.png" />
</view>
</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="pictrue">
<image :src="item.avatar" />
</view>
<view class="text">
<view class="name line1">{{ item.nickname }}</view>
<view>
加入时间:
{{ sheep.$helper.timeFormat(item.brokerageTime, 'yyyy-mm-dd hh:MM:ss') }}
</view>
</view>
</view>
<view
class="right"
style="
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
display: flex; display: flex;
margin-left: auto; margin-left: auto;
" ">
> <view>
<view> <text class="num font-color">{{ item.brokerageUserCount || 0 }} </text>人
<text class="num font-color">{{ item.brokerageUserCount || 0 }} </text>人 </view>
</view> <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>元
<view> </view>
<text class="num">{{ item.brokeragePrice || 0 }}</text </view>
>元 </view>
</view> </block>
</view> <block v-if="state.pagination.list.length === 0">
</view> <view style="margin-top: 30rpx;"></view>
</block> <view style="text-align: center">暂无推广人数</view>
<block v-if="state.pagination.list.length === 0"> </block>
<view style="text-align: center">暂无推广人数</view> </view>
</block> </view>
</view> </view>
</view> <!-- <home></home> -->
</view>
<!-- <home></home> -->
<!-- <view class="header-box" :style="[ <!-- <view class="header-box" :style="[
{ {
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx', marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
paddingTop: Number(statusBarHeight + 108) + 'rpx', paddingTop: Number(statusBarHeight + 108) + 'rpx',
@ -228,354 +196,368 @@
</view> </view>
<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无团队信息"> <s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无团队信息">
</s-empty> --> </s-empty> -->
</s-layout> </s-layout>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import { onLoad, onReachBottom } from '@dcloudio/uni-app'; import {
import { computed, reactive, ref } from 'vue'; onLoad,
import _ from 'lodash-es'; onReachBottom
import { onPageScroll } from '@dcloudio/uni-app'; } from '@dcloudio/uni-app';
import BrokerageApi from '@/sheep/api/trade/brokerage'; import {
computed,
reactive,
ref
} from 'vue';
import _ from 'lodash-es';
import {
onPageScroll
} from '@dcloudio/uni-app';
import BrokerageApi from '@/sheep/api/trade/brokerage';
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2; const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
// const agentInfo = computed(() => sheep.$store('user').agentInfo); // const agentInfo = computed(() => sheep.$store('user').agentInfo);
const userInfo = computed(() => sheep.$store('user').userInfo); const userInfo = computed(() => sheep.$store('user').userInfo);
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png'); const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
onPageScroll((e) => { onPageScroll((e) => {
state.scrollTop = e.scrollTop <= 100; state.scrollTop = e.scrollTop <= 100;
}); });
let sort = ref(); let sort = ref();
const state = reactive({ const state = reactive({
summary: {}, summary: {},
pagination: { pagination: {
pageNo: 1, pageNo: 1,
pageSize: 8, pageSize: 8,
list: [], list: [],
total: 0, total: 0,
}, },
loadStatus: '', loadStatus: '',
// ↓ 新 ui 逻辑 // ↓ 新 ui 逻辑
level: 1, level: 1,
nickname: ref(''), nickname: ref(''),
sortKey: '', sortKey: '',
isAsc: '', isAsc: '',
}); });
function filterUserNum(num) { function filterUserNum(num) {
if (_.isNil(num)) { if (_.isNil(num)) {
return ''; return '';
} }
return `下级团队${num}人`; return `下级团队${num}人`;
} }
function submitForm() { function submitForm() {
state.pagination.list = []; state.pagination.list = [];
getTeamList(); getTeamList();
} }
async function getTeamList() { async function getTeamList() {
state.loadStatus = 'loading'; state.loadStatus = 'loading';
let { code, data } = await BrokerageApi.getBrokerageUserChildSummaryPage({ let {
pageNo: state.pagination.pageNo, code,
pageSize: state.pagination.pageSize, data
level: state.level, } = await BrokerageApi.getBrokerageUserChildSummaryPage({
'sortingField.order': state.isAsc, pageNo: state.pagination.pageNo,
'sortingField.field': state.sortKey, pageSize: state.pagination.pageSize,
nickname: state.nickname, level: state.level,
}); 'sortingField.order': state.isAsc,
if (code !== 0) { 'sortingField.field': state.sortKey,
return; nickname: state.nickname,
} });
state.pagination.list = _.concat(state.pagination.list, data.list); if (code !== 0) {
state.pagination.total = data.total; return;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore'; }
} state.pagination.list = _.concat(state.pagination.list, data.list);
state.pagination.total = data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
}
function setType(e) { function setType(e) {
state.pagination.list = []; state.pagination.list = [];
state.level = e + ''; state.level = e + '';
getTeamList(); getTeamList();
} }
function setSort(sortKey, isAsc) { function setSort(sortKey, isAsc) {
state.pagination.list = []; state.pagination.list = [];
sort = sortKey + isAsc.toUpperCase(); sort = sortKey + isAsc.toUpperCase();
state.isAsc = isAsc; state.isAsc = isAsc;
state.sortKey = sortKey; state.sortKey = sortKey;
getTeamList(); getTeamList();
} }
onLoad(async () => { onLoad(async () => {
await getTeamList(); await getTeamList();
// 概要数据 // 概要数据
let { data } = await BrokerageApi.getBrokerageUserSummary(); let {
state.summary = data; data
}); } = await BrokerageApi.getBrokerageUserSummary();
state.summary = data;
});
// 加载更多 // 加载更多
function loadMore() { function loadMore() {
if (state.loadStatus === 'noMore') { if (state.loadStatus === 'noMore') {
return; return;
} }
state.pagination.pageNo++; state.pagination.pageNo++;
getTeamList(); getTeamList();
} }
// 上拉加载更多 // 上拉加载更多
onReachBottom(() => { onReachBottom(() => {
loadMore(); loadMore();
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.l1 { .l1 {
background-color: #fff; background-color: #fff;
height: 86rpx; height: 86rpx;
line-height: 86rpx; line-height: 86rpx;
font-size: 28rpx; font-size: 28rpx;
color: #282828; color: #282828;
border-bottom: 1rpx solid #eee; border-bottom: 1rpx solid #eee;
border-top-left-radius: 14rpx; border-top-left-radius: 14rpx;
border-top-right-radius: 14rpx; border-top-right-radius: 14rpx;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
.header-box { .header-box {
box-sizing: border-box; box-sizing: border-box;
padding: 0 20rpx 20rpx 20rpx; padding: 0 20rpx 20rpx 20rpx;
width: 750rpx; width: 750rpx;
z-index: 3; z-index: 3;
position: relative; position: relative;
background: v-bind(headerBg) no-repeat, background: v-bind(headerBg) no-repeat,
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)); linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
background-size: 750rpx 100%; background-size: 750rpx 100%;
// 团队信息总览 // 团队信息总览
.team-data-box { .team-data-box {
.data-card { .data-card {
width: 305rpx; width: 305rpx;
background: #ffffff; background: #ffffff;
border-radius: 20rpx; border-radius: 20rpx;
padding: 20rpx; padding: 20rpx;
.item-title { .item-title {
font-size: 22rpx; font-size: 22rpx;
font-weight: 500; font-weight: 500;
color: #999999; color: #999999;
line-height: 30rpx; line-height: 30rpx;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.total-item { .total-item {
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
.total-num { .total-num {
font-size: 38rpx; font-size: 38rpx;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
font-family: OPPOSANS; font-family: OPPOSANS;
} }
.category-num { .category-num {
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
font-family: OPPOSANS; font-family: OPPOSANS;
} }
} }
} }
} }
.list-box { .list-box {
z-index: 3; z-index: 3;
position: relative; position: relative;
} }
.chat-custom-right { .chat-custom-right {
.time-text { .time-text {
font-size: 22rpx; font-size: 22rpx;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
} }
.tag-box { .tag-box {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
border-radius: 21rpx; border-radius: 21rpx;
line-height: 30rpx; line-height: 30rpx;
padding: 5rpx 10rpx; padding: 5rpx 10rpx;
width: 140rpx; width: 140rpx;
.tag-img { .tag-img {
width: 34rpx; width: 34rpx;
height: 34rpx; height: 34rpx;
margin-right: 6rpx; margin-right: 6rpx;
border-radius: 50%; border-radius: 50%;
} }
.tag-title { .tag-title {
font-size: 18rpx; font-size: 18rpx;
font-weight: 500; font-weight: 500;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
line-height: 20rpx; line-height: 20rpx;
} }
} }
} }
// 推荐人 // 推荐人
.referrer-box { .referrer-box {
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
padding: 20rpx; padding: 20rpx;
.referrer-avatar { .referrer-avatar {
width: 34rpx; width: 34rpx;
height: 34rpx; height: 34rpx;
border-radius: 50%; border-radius: 50%;
} }
} }
.promoter-list .nav { .promoter-list .nav {
background-color: #fff; background-color: #fff;
height: 86rpx; height: 86rpx;
line-height: 86rpx; line-height: 86rpx;
font-size: 28rpx; font-size: 28rpx;
color: #282828; color: #282828;
border-bottom: 1rpx solid #eee; border-bottom: 1rpx solid #eee;
border-top-left-radius: 14rpx; border-top-left-radius: 14rpx;
border-top-right-radius: 14rpx; border-top-right-radius: 14rpx;
margin-top: -30rpx; margin-top: -30rpx;
} }
.promoter-list .nav .item.on { .promoter-list .nav .item.on {
border-bottom: 5rpx solid; border-bottom: 5rpx solid;
// $theme-color // $theme-color
color: red; color: red;
// $theme-color // $theme-color
} }
.promoter-list .search { .promoter-list .search {
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
height: 100rpx; height: 100rpx;
padding: 0 24rpx; padding: 0 24rpx;
box-sizing: border-box; box-sizing: border-box;
border-bottom-left-radius: 14rpx; border-bottom-left-radius: 14rpx;
border-bottom-right-radius: 14rpx; border-bottom-right-radius: 14rpx;
} }
.promoter-list .search .input { .promoter-list .search .input {
width: 592rpx; width: 592rpx;
height: 60rpx; height: 60rpx;
border-radius: 50rpx; border-radius: 50rpx;
background-color: #f5f5f5; background-color: #f5f5f5;
text-align: center; text-align: center;
position: relative; position: relative;
} }
.promoter-list .search .input input { .promoter-list .search .input input {
height: 100%; height: 100%;
font-size: 26rpx; font-size: 26rpx;
width: 610rpx; width: 610rpx;
text-align: center; text-align: center;
} }
.promoter-list .search .input .placeholder { .promoter-list .search .input .placeholder {
color: #bbb; color: #bbb;
} }
.promoter-list .search .input .iconfont { .promoter-list .search .input .iconfont {
position: absolute; position: absolute;
right: 28rpx; right: 28rpx;
color: #999; color: #999;
font-size: 28rpx; font-size: 28rpx;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
.promoter-list .search .iconfont { .promoter-list .search .iconfont {
font-size: 32rpx; font-size: 32rpx;
color: #515151; color: #515151;
height: 60rpx; height: 60rpx;
line-height: 60rpx; line-height: 60rpx;
} }
.promoter-list .list { .promoter-list .list {
margin-top: 20rpx; margin-top: 20rpx;
} }
.promoter-list .list .sortNav { .promoter-list .list .sortNav {
background-color: #fff; background-color: #fff;
height: 76rpx; height: 76rpx;
border-bottom: 1rpx solid #eee; border-bottom: 1rpx solid #eee;
color: #333; color: #333;
font-size: 28rpx; font-size: 28rpx;
border-top-left-radius: 14rpx; border-top-left-radius: 14rpx;
border-top-right-radius: 14rpx; border-top-right-radius: 14rpx;
} }
.promoter-list .list .sortNav .sortItem { .promoter-list .list .sortNav .sortItem {
text-align: center; text-align: center;
flex: 1; flex: 1;
} }
.promoter-list .list .sortNav .sortItem image { .promoter-list .list .sortNav .sortItem image {
width: 24rpx; width: 24rpx;
height: 24rpx; height: 24rpx;
margin-left: 6rpx; margin-left: 6rpx;
vertical-align: -3rpx; vertical-align: -3rpx;
} }
.promoter-list .list .item { .promoter-list .list .item {
background-color: #fff; background-color: #fff;
border-bottom: 1rpx solid #eee; border-bottom: 1rpx solid #eee;
height: 152rpx; height: 152rpx;
padding: 0 24rpx; padding: 0 24rpx;
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #666;
} }
.promoter-list .list .item .picTxt .pictrue { .promoter-list .list .item .picTxt .pictrue {
width: 106rpx; width: 106rpx;
height: 106rpx; height: 106rpx;
border-radius: 50%; border-radius: 50%;
} }
.promoter-list .list .item .picTxt .pictrue image { .promoter-list .list .item .picTxt .pictrue image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
border: 3rpx solid #fff; border: 3rpx solid #fff;
box-shadow: 0 0 10rpx #aaa; box-shadow: 0 0 10rpx #aaa;
box-sizing: border-box; box-sizing: border-box;
} }
.promoter-list .list .item .picTxt .text { .promoter-list .list .item .picTxt .text {
// width: 304rpx; // width: 304rpx;
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #666;
margin-left: 14rpx; margin-left: 14rpx;
} }
.promoter-list .list .item .picTxt .text .name { .promoter-list .list .item .picTxt .text .name {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
margin-bottom: 13rpx; margin-bottom: 13rpx;
} }
.promoter-list .list .item .right { .promoter-list .list .item .right {
text-align: right; text-align: right;
font-size: 22rpx; font-size: 22rpx;
color: #333; color: #333;
} }
.promoter-list .list .item .right .num { .promoter-list .list .item .right .num {
margin-right: 7rpx; margin-right: 7rpx;
} }
</style> </style>