feat:累计专员列表，专员详情

pages.json

@@ -71,8 +71,7 @@
 			"path" : "pages/specialistsList/specialistsList",
 			"style" :
 			{
-				"navigationBarTitleText" : "我的专员",
-				"enablePullDownRefresh" : false
+				"navigationBarTitleText" : "累计交友圈专员记录"
 			}
 		},
 		{
@@ -191,6 +190,13 @@
 			{
 				"navigationBarTitleText" : "今日新增专员记录"
 			}
+		},
+		{
+			"path" : "pages/specialistsDetail/specialistsDetail",
+			"style" :
+			{
+				"navigationBarTitleText" : "累计交友圈专员详情"
+			}
 		}
 	],
 	"tabBar": {
@@ -217,7 +223,7 @@
 		"navigationStyle": "custom",
 		// #endif
 
-		"navigationBarTextStyle": "white",
+		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "加载中",
 		"navigationBarBackgroundColor": "#FFE05C",
 		"backgroundColor": "#ffffff"

pages/index/attach/attach.vue

@@ -26,7 +26,7 @@
 						<text>2800</text>
 					</view>
 				</view>
-				<view class="flex-col gridItem" @click="goItem('/pages/earningsList/earningsList')">
+				<view class="flex-col gridItem" @click="navigateToPage('/pages/earningsList/earningsList')">
 					<view  class="title flex-row justify-center">
 						<text>业绩推广</text>
 					</view>
@@ -96,7 +96,7 @@
 				this.$refs.createQrCodePopup.open()
 			},
 
-			goItem(url){
+			navigateToPage(url){
 				uni.navigateTo({
 					url:url
 				})

pages/index/manager/manager.vue

@@ -3,7 +3,7 @@
 
 		<view class="flex-row justify-center">
 			<view class="grid">
-				<view class="flex-col gridItem">
+				<view class="flex-col gridItem" @click="navigateToPage('/pages/specialistsList/specialistsList')">
 					<view  class="title flex-row justify-center">
 						<text>累计专员数量</text>
 					</view>
@@ -11,7 +11,7 @@
 						<text>2008</text>
 					</view>
 				</view>
-				<view class="flex-col gridItem leftBorder" @click="goItem('/pages/todaySpecialistsList/todaySpecialistsList')">
+				<view class="flex-col gridItem leftBorder" @click="navigateToPage('/pages/todaySpecialistsList/todaySpecialistsList')">
 					<view  class="title flex-row justify-center">
 						<text>今日新增专员</text>
 					</view>
@@ -104,7 +104,7 @@
 				this.$refs.createQrCodePopup.close()
 			},
 
-			goItem(url){
+			navigateToPage(url){
 				uni.navigateTo({
 					url:url
 				})

pages/specialistsDetail/index.rpx.css

@@ -0,0 +1,24 @@
+
+.msg{
+    margin-top: 30rpx;
+    padding: 0 32rpx;
+}
+.msgItem{
+    border-bottom: 1px solid #F7F7F7;
+    line-height: 80rpx;
+    font-size: 28rpx;
+}
+.profilePhoto{
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 40rpx;
+}
+.itemValue{
+    max-width: 500rpx;
+}
+.photo{
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 10rpx;
+}
+

pages/specialistsDetail/module/index.rpx.css

@@ -0,0 +1,13 @@
+.item{
+    padding: 10rpx 32rpx 20rpx 32rpx;
+    border-bottom: 2rpx solid #F7F7F7;
+    font-size: 28rpx;
+    line-height: 50rpx;
+}
+.title-h1{
+    font-weight: 600;
+    font-size: 32rpx;
+    color: #333333;
+    line-height: 44rpx;
+    padding: 30rpx 0 10rpx 28rpx;
+}

pages/specialistsDetail/module/mescrollUni-item.vue

@@ -0,0 +1,157 @@
+<template>
+    <!--
+    swiper中的transfrom会使fixed失效,此时用height固定高度;
+    swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
+    -->
+    <!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
+    <!-- top的高度等于悬浮菜单tabs的高度 -->
+    <mescroll-uni :ref="'mescrollRef' + i" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback"
+                  :up="upOption" @up="upCallback" @emptyclick="emptyClick">
+
+        <view v-for="i in 10">
+            <view class="title-h1 flex-row">
+                <text>2024-06</text>
+                <u-icon name="arrow-right" color="#000" size="16"></u-icon>
+                <u-icon name="arrow-down" color="#000" size="16"></u-icon>
+            </view>
+            <view class="flex-col justify-between item" v-for="(item,index) in 10">
+                <view class="flex-row justify-between">
+                    <text>会员编号：Vip.00003679</text>
+                    <text>1736500141</text>
+                </view>
+                <view class="flex-row justify-between">
+                    <text>会员昵称：瞎子玩家</text>
+                    <text>2024-01-29 12:00:00</text>
+                </view>
+            </view>
+        </view>
+
+    </mescroll-uni>
+</template>
+
+<script>
+    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+    import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js"
+    import NextSwipeAction from "../../../components/next-swipe-action/next-swipe-action";
+
+    export default {
+        mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
+        components: {
+            NextSwipeAction
+        },
+
+        data() {
+            return {
+                downOption: {
+                    auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
+                },
+                upOption: {
+                    auto: false, // 不自动加载
+                    // page: {
+                    // 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
+                    // 	size: 10 // 每页数据的数量
+                    // },
+                    noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
+                    empty: {
+                        icon: '/static/dataNull.png',
+                        tip: '暂无内容', // 提示
+                        // btnText: '去看看'
+                    },
+                    textNoMore: '没有更多了'
+                },
+                list: [],
+            }
+        },
+        props: {
+            i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
+            index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
+                type: Number,
+                default() {
+                    return 0
+                }
+            },
+
+            height: [Number, String], // mescroll的高度
+
+        },
+        watch: {},
+
+        created() {
+
+
+        },
+
+        methods: {
+
+            navigateToPage(url) {
+                uni.navigateTo({
+                    url: url
+                })
+            },
+
+            /*下拉刷新的回调 */
+            downCallback() {
+                // 这里加载你想下拉刷新的数据, 比如刷新轮播数据
+                // loadSwiper();
+                // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
+                this.mescroll.resetUpScroll()
+            },
+            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
+            upCallback(page) {
+
+                //联网加载数据
+                let httpData = {
+                    pageNum: page.num,
+                    pageSize: 10
+                }
+
+                this.$api.service.getMyExpandAttacheList(httpData).then((res) => {
+                    //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
+                    this.mescroll.endSuccess(res.data.data.length, res.data.data.length === 10);
+                    //设置列表数据
+                    if (page.num === 1) this.list = []; //如果是第一页需手动制空列表
+                    this.list = this.list.concat(res.data.data); //追加新数据
+                    this.getImgUrlByOssId(this.list)
+                    console.log(this.list)
+                }).catch((err) => {
+                    //联网失败, 结束加载
+                    this.mescroll.endErr();
+                })
+
+
+            },
+
+            //点击空布局按钮的回调
+            emptyClick() {
+                uni.showToast({
+                    title: '点击了按钮,具体逻辑自行实现'
+                })
+            },
+            // 搜索
+            doSearch() {
+                this.list = []; // 先清空列表,显示加载进度
+                this.mescroll.resetUpScroll();
+            },
+
+            getImgUrlByOssId(list) {
+                if (list) {
+                    list.forEach((item, index) => {
+                        if (item.img && !item.selfPhotoUrl) {
+                            this.$api.service.getImage(item.img).then(res => {
+                                item.selfPhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
+                                this.$set(this.list, index, item)
+                                console.log('+++++++++++++++++', item)
+                            });
+                        }
+                    })
+                }
+            },
+        },
+
+    }
+</script>
+<style>
+    @import '/common/css/common.css';
+    @import './index.rpx.css';
+
+</style>

pages/specialistsDetail/specialistsDetail.vue

@@ -0,0 +1,150 @@
+<template>
+	<view>
+		<!-- #ifdef H5-->
+		<uni-nav-bar  v-if="!$isWxBrowser()" :fixed="true" background-color="#FFE05C" :border="false" :statusBar="false"  left-icon="left" title="累计交友圈专员详情" @clickLeft="back" />
+		<!-- #endif -->
+
+
+		<view class="flex-row justify-center">
+			<u-tabs :list="tabList" lineWidth="50" :scrollable="false" @click="clickTabs" :current="current"></u-tabs>
+		</view>
+
+		<swiper class="swiper"  :style="{height:height}" :current="current" @change="swiperChange">
+			<swiper-item>
+				<view class="msg">
+					<view class="flex-row justify-between msgItem">
+						<view>
+							<text>头像</text>
+						</view>
+						<view>
+							<image src="/static/ud4.png" class="profilePhoto"></image>
+						</view>
+					</view>
+
+					<view class="flex-row justify-between msgItem">
+						<view>
+							<text>好友编号</text>
+						</view>
+						<view>
+							<text>Vip.00005555</text>
+						</view>
+					</view>
+
+
+					<view class="flex-row justify-between msgItem">
+						<view>
+							<text>姓名</text>
+						</view>
+						<view>
+							<text>张辉</text>
+						</view>
+					</view>
+
+					<view class="flex-row justify-between msgItem">
+						<view>
+							<text>电话号码</text>
+						</view>
+						<view>
+							<text>17365000141</text>
+						</view>
+					</view>
+
+					<view class="flex-row justify-between msgItem">
+						<view>
+							<text>备注</text>
+						</view>
+						<view class="itemValue">
+							<text>备注备注备注备注备注备注</text>
+						</view>
+					</view>
+
+					<view class="flex-row justify-between msgItem">
+						<view>
+							<text>备注地址</text>
+						</view>
+						<view class="itemValue">
+							<text>贵州省大方县撒上的啊水泥垫块蓝色快递费科技阿萨德不能</text>
+						</view>
+					</view>
+
+					<view class="flex-row justify-between msgItem">
+						<view>
+							<text>现场照片</text>
+						</view>
+						<view class="itemValue">
+							<image src="/static/ud4.png" class="photo"></image>
+							<image src="/static/ud4.png" class="photo"></image>
+							<image src="/static/ud4.png" class="photo"></image>
+						</view>
+					</view>
+
+				</view>
+
+			</swiper-item>
+
+			<swiper-item>
+				<mescroll-item ref="MescrollItem" :i="0"  :index="0"  :height="height">
+				</mescroll-item>
+			</swiper-item>
+		</swiper>
+
+
+
+		<!--#ifdef H5-->
+		<liu-drag-button v-if="$isWxBrowser()"  @clickBtn="back">返回</liu-drag-button>
+		<!--#endif-->
+	</view>
+</template>
+
+<script>
+	import MescrollItem from "./module/mescrollUni-item.vue";
+	export default {
+		components: {
+			MescrollItem
+		},
+		data() {
+			return {
+				height:'',
+				current:0,
+				tabList: [{
+					name: '详情备注',
+				}, {
+					name: '交友记录',
+				}]
+			}
+		},
+		onLoad(e) {
+			let sysInfo = uni.getSystemInfoSync()
+			this.height = sysInfo.windowHeight  - 140 + 'px' //除标题栏栏外的屏幕可用高度
+		},
+		methods: {
+			swiperChange(e){
+				console.log(e)
+				this.current= e.detail.current
+			},
+			clickTabs(e){
+				this.current = e.index
+			},
+			back() {
+				let pages = getCurrentPages()
+				if (pages.length > 1){
+					uni.navigateBack({
+						delta: 1,
+						fail:err=>{
+							console.log(err)
+						}
+					})
+				}else {
+					uni.switchTab({
+						url: '/pages/index/index'
+					});
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './index.rpx.css';
+</style>
+

pages/specialistsList/index.rpx.css

@@ -1,7 +1,5 @@
 .page {
 	height: 100vh;
-	padding: 0 32rpx;
-	background: #f7f7f7;
 }
 .item{
 	padding: 20rpx 32rpx;

pages/specialistsList/module/index.rpx.css

@@ -1,34 +1,48 @@
+.page{
+    background: #F7F7F7;
+}
 .item{
-    padding: 20rpx 32rpx;
-    background: #FFFFFF;
-    margin-top: 24rpx;
-    border-radius: 15rpx;
-}
-.avatar{
-    width: 100rpx;
-    height: 100rpx;
-    border-radius: 50rpx;
-    overflow: hidden;
-}
-.avatar image{
-    width: 100rpx;
-    height: 100rpx;
-}
-.userMsg{
     background: white;
-    width: 500rpx;
+    padding: 10rpx 32rpx;
+    border-bottom: 2rpx solid #f7f7f7;
+
+}
+
+.listItemMsg{
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #333333;
+    line-height: 44rpx;
 }
 
-.name{
-    font-size: 30rpx;
-    font-weight: bold;
+.memberNo{
+    width: 300rpx;
+}
+.msg{
+    flex: 1;
 }
 .time{
-    font-size: 30rpx;
+    font-weight: 400;
+    font-size: 24rpx;
     color: #999999;
+    line-height: 44rpx;
+}
+.remark{
+    color: #D9001B;
+    font-weight: 400;
+    font-size: 28rpx;
+    line-height: 44rpx;
+}
+.detail{
+    color: #169BD5;
+    font-weight: 400;
+    font-size: 28rpx;
+    line-height: 44rpx;
 }
-.number{
-    font-size: 30rpx;
-    font-weight: bold;
-    color: #4cd964;
+.title-h1{
+    font-weight: 600;
+    font-size: 32rpx;
+    color: #333333;
+    line-height: 44rpx;
+    padding: 30rpx 0 10rpx 28rpx;
 }

pages/specialistsList/module/mescrollUni-item.vue

@@ -8,26 +8,28 @@
 	<mescroll-uni :ref="'mescrollRef' + i" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback"
 		:up="upOption" @up="upCallback" @emptyclick="emptyClick">
 
-			<view  class="flex-row justify-between item" v-for="(item,index) in list">
-				<view class="flex-row avatar">
-					<image :src="item.selfPhotoUrl || '/static/ud4.png'"></image>
-				</view>
-				<view class="flex-col justify-between userMsg">
-					<view class="flex-row justify-between">
-						<text class="name">{{item.name}}</text>
-						<text class="time">{{item.createTime}}</text>
-
+		<view v-for="i in 10">
+			<view class="title-h1 flex-row">
+				<text>2024-06</text>
+				<u-icon name="arrow-right" color="#000" size="16"></u-icon>
+				<u-icon name="arrow-down" color="#000" size="16"></u-icon>
+			</view>
+			<view class="flex-col justify-between item" v-for="(item,index) in 10">
+				<view class="flex-row justify-between listItemMsg">
+					<view class="memberNo">
+						<text>张辉</text>
 					</view>
-					<view class="flex-row justify-between">
-						<text class="direct ">
-							直推：<text class="number">{{item.num }}</text>
-						</text>
-						<!--					<text class="indirect">-->
-						<!--						间推：<text class="number">20</text>-->
-						<!--					</text>-->
+					<view class="flex-row justify-between msg" >
+						<text>1736500141</text>
+						<text class="detail"  @click="navigateToPage('/pages/specialistsDetail/specialistsDetail')">详情</text>
 					</view>
 				</view>
+				<view class="flex-row justify-between">
+					<text class="time">2024-01-29 12:00:00</text>
+					<text class="remark">备注</text>
+				</view>
 			</view>
+		</view>
 
 	</mescroll-uni>
 </template>
@@ -86,6 +88,13 @@
 		},
 
 		methods: {
+
+			navigateToPage(url){
+				uni.navigateTo({
+					url:url
+				})
+			},
+
 			/*下拉刷新的回调 */
 			downCallback() {
 				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
@@ -143,7 +152,8 @@
 					})
 				}
 			},
-		}
+		},
+
 	}
 </script>
 <style>

pages/specialistsList/specialistsList.vue

@@ -2,7 +2,7 @@
 	<view class="page">
 
 		<!-- #ifdef H5-->
-		<uni-nav-bar  v-if="!$isWxBrowser()" :fixed="true" background-color="#FFE05C" :border="false" :statusBar="false"  left-icon="left" title="我的专员" @clickLeft="back" />
+		<uni-nav-bar  v-if="!$isWxBrowser()" :fixed="true" background-color="#FFE05C" :border="false" :statusBar="false"  left-icon="left" title="累计交友圈专员记录" @clickLeft="back" />
 		<!-- #endif -->
 		<view :style="{height:height}" class="list">
 			<mescroll-item ref="MescrollItem" :i="0"  :index="0"  :height="height">
@@ -43,7 +43,7 @@
 					})
 				}else {
 					uni.switchTab({
-						url: '/pages/my/my'
+						url: '/pages/index/index'
 					});
 				}
 			},

pages/todaySpecialistsList/module/mescrollUni-item.vue

@@ -15,7 +15,7 @@
 					</view>
 					<view class="flex-row justify-between msg">
 						<text>1736500141</text>
-						<text class="detail">详情</text>
+						<text class="detail" @click="navigateToPage('/pages/specialistsDetail/specialistsDetail')">详情</text>
 					</view>
 				</view>
 				<view class="flex-row justify-between">
@@ -125,6 +125,13 @@
 			},
 
 
+			navigateToPage(url){
+				uni.navigateTo({
+					url:url
+				})
+			},
+
+
 
 
 			goOrderDetail(item){