admin/ys-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

任务计划添加

Browse Source
This commit is contained in:
jiangyanshan
2026-01-09 11:37:46 +08:00
parent 0715c338f4
commit 340c5cf6ef
8 changed files with 1717 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/api/crm/api_ys.js
View File

@@ -173,3 +173,56 @@ export function crmMarketInformationApprovalUnSuccess(data) {
isTransformResponse:false
})
}
//任务清单
export function SalesManTaskList(data) {
return request.get({
url: '/crm/jys/app/schedulerTask/SalesManTaskList',
data
},{
isTransformResponse:false
})
}
//主线任务列表
export function SalesManTaskDetailList(data) {
return request.get({
url: '/crm/jys/app/schedulerTask/SalesManTaskDetailList',
data
},{
isTransformResponse:false
})
}
//任务计划新增
export function taskPlanAdd(data) {
return request.post({
url: '/crm/jys/app/schedulerTask/add',
data
},{
isTransformResponse:false
})
}
//任务计划查看
export function TaskPlanList(data) {
return request.get({
url: '/crm/jys/app/schedulerTask/TaskPlanList',
data
},{
isTransformResponse:false
})
}
//我的审批
export function getMyReviewList(data) {
return request.get({
url: "/crm/jys/app/schedulerTask/myReview",
data
},{
isTransformResponse:false
});
}

21
src/pages.json
View File

@@ -752,6 +752,27 @@
{
"path": "pages/business/CRM/scheduler/taskListViewing",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/business/CRM/scheduler/taskViewingDetail",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/business/CRM/scheduler/taskPlanList",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/business/CRM/scheduler/taskPlanReview",
"style": {
"navigationBarTitleText": ""
}

12
src/pages/business/CRM/scheduler/index.vue
View File

@@ -21,20 +21,20 @@
</view>
</navigator>
<view class="item-border"></view>
<navigator url="/pages/business/CRM/scheduler/taskPlanAdded">
<navigator url="/pages/business/CRM/scheduler/taskPlanList">
<view class="list-item item-padding">
<img class="l-icon" :src="'static/images/business/icon-khryss.png'"/>
<text>任务计划新增</text>
<img class="l-icon" :src="'static/images/business/icon-jhck.png'"/>
<text>任务计划查看</text>
<view class="list-right">
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
</view>
</view>
</navigator>
<view class="item-border"></view>
<navigator url="/pages/business/CRM/plan/planView">
<navigator url="/pages/business/CRM/scheduler/taskPlanReview">
<view class="list-item item-padding">
<img class="l-icon" :src="'static/images/business/icon-jhck.png'"/>
<text>任务计划查看</text>
<img class="l-icon" :src="'static/images/business/icon-khryss.png'"/>
<text>任务计划审批</text>
<view class="list-right">
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
</view>

321
src/pages/business/CRM/scheduler/taskListViewing.vue
View File

@@ -2,96 +2,184 @@
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<customHeader ref="customHeaderRef" :title="'任务清单查看'" :leftFlag="true" :rightFlag="true">
<template #right>
<view class="head-right">
<customHeader ref="customHeaderRef" :title="!searchShow ? '任务清单查看' : '搜索'"
:leftFlag="true" :rightFlag="true" @back="handleBack"
:searchType="searchShow ? 1 : undefined">
<!-- <template #right v-if="!searchShow">
<view class="head-right" @click="handleRead">
<img :src="'static/images/icon-clean@2x.png'" />清除未读
</view>
</template>
</template> -->
</customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height" :style="{ paddingTop: navBarPaddingTop + 'px' }"></view>
<view class="top-height"></view>
<!-- 搜索处理 -->
<customSearch v-if="searchShow" :searchKeywords="searchText" :searchType="searchTypeObj"
:checkTypeObj="notictTypeCheck" @confirm="handleSearchConfirm">
</customSearch>
<view class="search" v-else @click="handleSearchFocus">
<view class="search-bg">
<view class="search-left">
{{ notictTypeCheck.name ? notictTypeCheck.name : '全部' }}
</view>
<view class="search-right">
<input class="uni-input" v-model="inputval" placeholder="请输入您想查询的内容"
placeholder-class="search-color" />
</view>
</view>
</view>
<!-- 正文内容 -->
<view class="all-body">
<!-- 搜索 @blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear"-->
<!-- <view class="search">
<uni-search-bar class="custom-search" radius="28" placeholder="请输入客户名称" clearButton="auto"
cancelButton="none" bgColor="#6FA2F8" textColor="#ffffff"
v-model="searchValue"
/>
<button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>
</view> -->
<!-- 分页部分 -->
<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
:up="upOption" :down="downOption" :fixed="false" textColor="#ffffff" bgColor="#ffffff"
class="scroll-h" :class="{'loading-scroll':cssFlag}"
>
<view class="white-bg margin-bottom20" v-for="(item, index) in list" :key="index" @click="handleDetail(item)">
<mescroll-uni v-if="!searchShow" ref="mescrollRef" @init="mescrollInit"
@down="downCallback" @up="upCallback" :up="upOption" :down="downOption"
:fixed="false" textColor="#ffffff" bgColor="#ffffff" class="scroll-h"
:class="{ 'loading-scroll': cssFlag }">
<view class="white-bg margin-bottom20" v-for="(item, index) in list" :key="index"
@click="showDetail(item)">
<view>
<view class="report-list">
<view class="title">{{ item.title }}</view>
<view class="r-list">
<view class="r-name">{{ item.name }}</view>
<view class="r-right btn-orange" size="mini">{{ item.statusName }}</view>
<view class="title" style="font-size: 30rpx">
任务名称：{{ item.taskName }}
</view>
<view class="border-bottom"></view>
<view class="r-list">
<view class="r-left">报告类型</view>
<view class="r-right">{{ item.reportTypeName }}</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
主线任务类型：{{ item.mainTaskName }}
</view>
<view class="border-bottom"></view>
<view class="r-list">
<view class="r-left">报告人</view>
<view class="r-right">{{ item.reportPeople }}</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
计划开始时间：{{ formatDateStr(item.mainTaskStartTime) }}
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
计划结束时间：{{ formatDateStr(item.mainTaskEndTime) }}
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
是否超期：{{ item.mainTaskIsOverdue }}
</view>
<view class="border-bottom"></view>
<view class="r-list">
<view class="r-left">报告日期</view>
<view class="r-right">{{ item.dateStr }}</view>
</view>
</view>
</view>
</mescroll-uni>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {
ref,
onMounted,
watch
} from 'vue'
import customHeader from '@/components/customHeader.vue'
import customSearch from '@/components/customSearch.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import { getNavBarPaddingTop } from '@/utils/system.js'
import { SalesManTaskList } from '@/api/crm/api_ys.js'
import {
getNavBarPaddingTop
} from '@/utils/system.js'
import {
SalesManTaskList
} from '@/api/crm/api_ys.js'
import {
getDate
} from '@/utils/datetime.js'
import {
onLoad,
onShow,
onUnload,
onHide
} from '@dcloudio/uni-app'
// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
navBarPaddingTop.value = getNavBarPaddingTop() * 2;
uni.$on('updateStatus', markVisited)
})
// 搜索处理
let searchShow = ref(false);
let searchText = ref(undefined);
let searchTypeObj = ref({
typeId: 3,
typeName: '消息类型'
});
let searchValue = ref(null)
// 查询搜索跳转
let handleSearch = () => {
console.log(searchValue.value)
}
// 新增
let handleAdd = ()=>{
uni.navigateTo({ url:'/pages/business/CRM/visitorReportAdd' })
}
let notictTypeCheck = ref({}); //选中类型
// 查询列表
let list = ref([]);
// 新增状态变量存储搜索条件
const inputval = ref(''); // 搜索内容
let searchValue = ref(null)
//监视查询的内容的变化
watch(searchValue, (newValue, oldValue) => {
//变化了之后，重新查询内容
var data = {
pageNum: 1,
pageSize: 10,
};
SalesManTaskList(data).then(res => {
if (res.code == 200) {
//设置列表数据
list.value = res.rows;
}
})
})
onHide(() => {
searchShow.value = false;
})
// 搜索返回操作
const handleBack = () => {
searchShow.value = false;
}
// 获取input 焦点跳转
const handleSearchFocus = () => {
searchShow.value = true;
}
const formatDateStr = (times) => {
const date = new Date(times);
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : '0' + month;;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
// 搜索完返回处理
const handleSearchConfirm = (param1, param2) => {
// console.log(param1,param2)
notictTypeCheck.value = param1.value;
inputval.value = param2.value || '';
searchValue.value = param2.value;
// 重置mescroll触发刷新
if (mescrollRef.value) {
mescrollRef.value.resetUpScroll();
}
searchShow.value = false;
}
const mescrollRef = ref(null);
const upOption = ref({
page: { num: 0, size: 10 },
page: {
num: 0,
size: 10
},
noMoreSize: 5,
empty: {
tip: '~ 空空如也 ~',
icon: "../../static/images/mescroll-empty.png"
icon: "../../../../static/images/mescroll-empty.png"
},
textLoading: '加载中...',
textNoMore: '已经到底了'
@@ -131,7 +219,8 @@ const downCallback = async (mescroll) => {
const upCallback = async (mescroll) => {
try {
setTimeout(async () => {
const res = await getSalesManTaskList(mescroll.num, mescroll.size);
const res = await getSalesManTaskList(mescroll.num, mescroll.size,
inputval.value);
if (mescroll.num === 1) {
list.value = res.list;
} else {
@@ -145,28 +234,47 @@ const upCallback = async (mescroll) => {
}
// 获取数据列表
const getSalesManTaskList = (pageIndex, pageSize) => {
const getSalesManTaskList = (pageNum, pageSize) => {
return new Promise(async (resolve) => {
let param = {
pageIndex,
pageSize
pageNum,
pageSize,
// 添加搜索条件参数
taskName: inputval.value
}
let res = await SalesManTaskList(param);
resolve({
list: res.list,
total: res.totalCount
list: res.rows,
total: res.total
});
});
}
// 跳转到详情
let handleDetail=(item)=>{
function showDetail(item) {
uni.navigateTo({
url: "/pages/business/CRM/visitorReportDetail?id="+item.id
url: "/pages/business/CRM/scheduler/taskViewingDetail?data=" + encodeURIComponent(
JSON
.stringify(item))
})
}
onUnload(() => {
uni.$off('updateStatus')
})
const markVisited = (informationId) => {
const newList = [...list.value].map(item => {
if (item.informationId == informationId) {
return {
...item,
myselfBrowsing: 1
};
}
return item;
});
list.value = newList;
};
</script>
<style scoped>
@@ -180,9 +288,11 @@ let handleDetail=(item)=>{
height: calc(100vh);
/* #endif */
}
.search {
display: flex;
}
.search .btn-search {
border: none;
background: none;
@@ -193,13 +303,16 @@ let handleDetail=(item)=>{
text-align: left;
cursor: pointer;
}
.search .btn-search::after {
display: none;
}
.search .custom-search {
width: 80%;
}
.search .custom-search.uni-searchbar {
padding-right: 0 !important;
}
@@ -212,8 +325,88 @@ let handleDetail=(item)=>{
height: calc(100vh - 110px);
/* #endif */
}
.white-bg {
padding-bottom: 10rpx;
}
.search_center {
display: flex;
align-items: center;
border: none;
flex: 1;
height: 70rpx;
margin-left: 20rpx;
padding-left: 20rpx;
border-radius: 32.5rpx;
background-color: #f5f5f5;
.search_icon {
width: 30rpx;
height: 30rpx;
margin-right: 22rpx;
}
.category {
display: flex;
align-items: center;
margin-right: 16rpx;
padding-right: 16rpx;
border-right: 2rpx solid #D4D4D4;
position: relative;
text {
font-size: 13px;
margin-left: 10rpx;
margin-right: 10rpx;
}
image {
margin-top: 4rpx;
width: 20rpx;
height: 11rpx;
}
.pop {
position: absolute;
top: 50rpx;
background: #FFFFFF;
box-shadow: 0px 0px 40rpx 0px rgba(59, 59, 59, 0.2);
border-radius: 12rpx;
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx;
z-index: 100;
max-height: 566rpx;
overflow-y: auto;
text {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
white-space: nowrap;
margin: 10rpx 0;
line-height: 56rpx;
}
}
.pop_arrow {
position: absolute;
top: 48rpx;
z-index: 999;
&::after {
position: absolute;
content: "";
left: 68rpx;
top: -26rpx;
border: 14rpx solid #fff;
border-color: transparent transparent #fff transparent;
}
}
}
}
</style>

243
src/pages/business/CRM/scheduler/taskPlanAdded.vue
View File

@@ -2,7 +2,8 @@
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<customHeader ref="customHeaderRef" :title="'任务计划新增'" :leftFlag="true" :rightFlag="true">
<customHeader ref="customHeaderRef" :title="'任务计划新增'" :leftFlag="true"
:rightFlag="true">
<template #right>
<view class="head-right" @click="submitForm">
<uni-icons custom-prefix="iconfont" type="icon-phonebaocun" size="22"
@@ -18,25 +19,23 @@
<view class="white-bg">
<view class="form-con">
<uni-forms ref="formRef" :model="formData" :rules="rules" label-width="100px">
<uni-forms-item label="标签属性" name="cusName" class="f-c-right">
<view
@click="chooseCustomer"
class="form-item-container"
>
<text class="name">{{ formData.cusName || '点击选择主线任务' }}</text>
<uni-forms-item label="主线任务" name="taskName" class="f-c-right">
<view class="form-item-container">
<text class="name">{{ formData.taskName}}</text>
</view>
</uni-forms-item>
<uni-forms-item label="计划内容" name="opportunityType" class="f-c-right">
<picker @change="onOpportunityTypeChange" :value="opportunityTypeIndex" :range="array"
:range-key="'name'">
<uni-forms-item label="计划内容" name="planContent" class="f-c-right">
<picker @change="onPlanContentChange" :value="planContentIndex"
:range="array" :range-key="'name'">
<view class="picker">
{{ array[opportunityTypeIndex]?.name || '请选择计划内容' }}
{{ array[planContentIndex]?.name || '请选择计划内容' }}
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
</view>
</picker>
</uni-forms-item>
<uni-forms-item label="计划开始时间" name="plannedStartTime" class="f-c-right">
<picker mode="date" :value="formData.plannedStartTime" @change="onStartTimeChange">
<picker mode="date" :value="formData.plannedStartTime"
@change="onStartTimeChange">
<view class="picker">
{{ formData.plannedStartTime || '请选择计划开始时间' }}
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
@@ -44,16 +43,30 @@
</picker>
</uni-forms-item>
<uni-forms-item label="计划完成时间" name="plannedCompTime" class="f-c-right">
<picker mode="date" :value="formData.plannedCompTime" @change="onCompTimeChange">
<picker mode="date" :value="formData.plannedCompTime"
@change="onCompTimeChange">
<view class="picker">
{{ formData.plannedCompTime || '请选择计划完成时间' }}
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
</view>
</picker>
</uni-forms-item>
<uni-forms-item label="内容描述" name="understandTheWay"
<uni-forms-item label="次数" name="num">
<uni-number-box v-model="formData.num"
style="float: right;margin-right: 10rpx;margin-top: 15rpx;"></uni-number-box>
</uni-forms-item>
<uni-forms-item label="频率" name="frequency" class="f-c-right">
<picker @change="onFrequencyChange" :value="frequencyIndex"
:range="arrayFrequency" :range-key="'name'">
<view class="picker">
{{ arrayFrequency[frequencyIndex]?.name || '请选择频率' }}
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
</view>
</picker>
</uni-forms-item>
<uni-forms-item label="内容描述" name="description"
class="uni-forms-item is-direction-top is-top">
<uni-easyinput type="textarea" autoHeight v-model="formData.understandTheWay"
<uni-easyinput type="textarea" autoHeight v-model="formData.description"
placeholder="请输入内容描述" class="form-texarea" />
</uni-forms-item>
@@ -66,45 +79,48 @@
<script setup>
import {
ref, onMounted, reactive, onUnmounted, computed
ref,
onMounted,
reactive,
onUnmounted,
computed
} from 'vue'
import customHeader from '@/components/customHeader.vue'
import {
getGuestList
} from '@/api/business.js'
import { isEmpty } from '@/utils/validate.js'
import {crmMarketInformationAdd } from '@/api/crm/api_ys.js'
onLoad
} from '@dcloudio/uni-app'
import customHeader from '@/components/customHeader.vue'
import {
isEmpty
} from '@/utils/validate.js'
import {
taskPlanAdd
} from '@/api/crm/api_ys.js'
let customerUser = reactive({})
// 客户相关
const guestList = ref([])
// 表单数据
const formData = ref({
cusId: null,
cusName: null,
opportunityType: "", // 机会类型
taskName: null,
planContent: "", // 机会类型
plannedStartTime: "", // 计划开始时间
plannedCompTime: "", // 计划完成时间
understandTheWay: "", // 了解途径
opportunityDescription: "", // 机会描述
opportunityStatus: "", // 机会所处状态
predictedAmount: "", // 预测金额或情况
competitionSituation: "", // 竞争情况
remark: "", // 备注
picture: "", // 图片
informationType: "市场机会" // 信息类型
description: "", // 内容描述
num: "", // 次数
})
onLoad((options) => {
if (options.data) {
let mainData = JSON.parse(decodeURIComponent(options.data))
formData.value.taskName = mainData.mainTaskName
formData.value.taskId = mainData.taskId
}
})
// 表单验证规则
const rules = {
cusName: {
rules: [{
required: true,
errorMessage: '请选择主线任务'
}]
},
opportunityType: {
planContent: {
rules: [{
required: true,
errorMessage: '请选择计划内容'
@@ -117,10 +133,9 @@
}]
},
plannedCompTime: {
rules: [
{
rules: [{
required: true,
errorMessage: '请选择计划完成时间'
errorMessage: '请选择计划完成时间aaa'
},
{
validateFunction: function(rule, value, data, callback) {
@@ -130,43 +145,19 @@
return
}
}
callback()
}
}
]
},
understandTheWay: {
description: {
rules: [{
required: true,
errorMessage: '请输入内容描述'
}]
},
opportunityDescription: {
rules: [{
required: true,
errorMessage: '请输入机会描述'
}]
},
opportunityStatus: {
rules: [{
required: true,
errorMessage: '请输入机会所处状态'
}]
},
predictedAmount: {
rules: [{
required: true,
errorMessage: '请输入预测金额或情况'
}]
},
competitionSituation: {
rules: [{
required: true,
errorMessage: '请输入竞争情况'
}]
},
}
const imgList = ref([])
// picker 相关
const index = ref(0)
@@ -211,96 +202,57 @@
name: '组合拳服务活动'
}
])
const form = ref({
cusId: null,
cusName: null,
opportunityType: array.value[0].name, // 机会类型
understandTheWay: "", // 了解途径
opportunityDescription: "", // 机会描述
opportunityStatus: "", // 机会所处状态
predictedAmount: "", // 预测金额或情况
competitionSituation: "", // 竞争情况
remark: "", // 备注
picture: "", // 图片
informationType: "市场机会" // 信息类型
})
// picker 选项
const opportunityTypeOptions = ref([{
const arrayFrequency = ref([{
id: 0,
name: '新产品需求'
name: '',
value: 0
},
{
id: 1,
name: '新客户开发'
name: '3天1次',
value: 3
},
{
id: 2,
name: '批产任务'
name: '7天1次',
value: 7
},
{
id: 3,
name: '新研任务'
name: '15天1次',
value: 15
},
{
id: 4,
name: '二筛服务'
},
{
id: 5,
name: '对手失利'
},
{
id: 6,
name: '其它'
name: '30天1次',
value: 30
}
])
const opportunityTypeIndex = ref(0)
const planContentIndex = ref(0)
const frequencyIndex = ref(0)
// 表单引用 & 客户选择器引用
const formRef = ref(null)
const customHeaderRef = ref(null)
// 选择客户页面跳转
function chooseCustomer(){
uni.navigateTo({
url: '/pages/business/CRM/marketActivity/chooseCus'
})
}
//定义数据接收的值
let selectedCustomer = reactive(null)
//监听时间
onMounted(() => {
// 设置机会类型的默认值
formData.value.opportunityType = array.value[0].name;
opportunityTypeIndex.value = 0;
// 原有的监听客户选择事件
uni.$on('onCustomerSelected', handleCustomerSelected);
formData.value.planContent = array.value[0].name;
planContentIndex.value = 0;
frequencyIndex.value = 0;
})
//取消监听
onUnmounted(() => {
uni.$off('onCustomerSelected', handleCustomerSelected)
})
//处理 接收数据
const handleCustomerSelected = (data) => {
formData.value.cusName = data.cusName
formData.value.cusId = data.cusId
console.log("收到客户数据的值：", customerUser)
}
// 提交表单
const submitForm = async () => {
try {
formData.value.planType = "0"
// 表单校验
await formRef.value.validate()
const res = await crmMarketInformationAdd(formData.value);
const res = await taskPlanAdd(formData.value);
console.log(res)
uni.showToast({
title: '提交成功',
@@ -317,27 +269,50 @@
}
}
const onOpportunityTypeChange = (e) => {
opportunityTypeIndex.value = e.detail.value
console.log('opportunityTypeIndex:', array.value[e.detail.value]?.name)
formData.value.opportunityType = array.value[e.detail.value]?.name || ''
const onPlanContentChange = (e) => {
planContentIndex.value = e.detail.value
formData.value.planContent = array.value[e.detail.value]?.name || ''
}
const onFrequencyChange = (e) => {
frequencyIndex.value = e.detail.value
formData.value.frequency = arrayFrequency.value[e.detail.value]?.value || null
}
// 计划开始时间变化事件
const onStartTimeChange = (e) => {
formData.value.plannedStartTime = e.detail.value
const value = e.detail.value
formData.value.plannedStartTime = value
// 如果已选择完成时间，重新校验完成时间
// Vue3 中需要手动触发验证更新
if (formRef.value) {
// 方法1：使用 setValue
formRef.value.setValue('plannedStartTime', value)
if (formData.value.plannedCompTime) {
formRef.value.validateField('plannedCompTime')
}
}
}
// 计划完成时间变化事件
const onCompTimeChange = (e) => {
formData.value.plannedCompTime = e.detail.value
const value = e.detail.value
formData.value.plannedCompTime = value
// Vue3 中需要手动触发验证更新
if (formRef.value) {
// 方法1：使用 setValue
formRef.value.setValue('plannedCompTime', value)
// 校验完成时间
formRef.value.validateField('plannedCompTime')
}
}
// 如果你原来在 onShow 中做了类似这样：

413
src/pages/business/CRM/scheduler/taskPlanList.vue Normal file
View File

@@ -0,0 +1,413 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<customHeader ref="customHeaderRef" :title="!searchShow ? '任务计划查看' : '搜索'"
:leftFlag="true" :rightFlag="true" @back="handleBack"
:searchType="searchShow ? 1 : undefined">
<!-- <template #right v-if="!searchShow">
<view class="head-right" @click="handleRead">
<img :src="'static/images/icon-clean@2x.png'" />清除未读
</view>
</template> -->
</customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height"></view>
<!-- 搜索处理 -->
<customSearch v-if="searchShow" :searchKeywords="searchText" :searchType="searchTypeObj"
:checkTypeObj="notictTypeCheck" @confirm="handleSearchConfirm">
</customSearch>
<view class="search" v-else @click="handleSearchFocus">
<view class="search-bg">
<view class="search-left">
{{ notictTypeCheck.name ? notictTypeCheck.name : '全部' }}
</view>
<view class="search-right">
<input class="uni-input" v-model="inputval" placeholder="请输入您想查询的内容"
placeholder-class="search-color" />
</view>
</view>
</view>
<!-- 正文内容 -->
<!-- 分页部分 -->
<mescroll-uni v-if="!searchShow" ref="mescrollRef" @init="mescrollInit"
@down="downCallback" @up="upCallback" :up="upOption" :down="downOption"
:fixed="false" textColor="#ffffff" bgColor="#ffffff" class="scroll-h"
:class="{ 'loading-scroll': cssFlag }">
<view class="white-bg margin-bottom20" v-for="(item, index) in list" :key="index"
@click="showDetail(item)">
<view>
<view class="report-list">
<view class="title" style="font-size: 30rpx">
主线任务：{{ item.taskName }}
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
计划内容：{{ item.planContent }}
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
计划开始时间：{{ item.plannedStartTime }}
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
计划结束时间：{{ item.plannedCompTime }}
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
次数：{{ item.num }}
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
频率提醒：{{ item.reminderCount }}
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
完成状态：{{ item.completionCount }}
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
是否超时：{{ item.planStatus }}
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
审批状态：
<label v-if="item.approvalStatus == '0'" style="color: #cf0000;">{{ item.approvalStatus }}</label>
<label v-else-if="item.approvalStatus == '1'" style="color: #00cf00;">{{ item.approvalStatus }}</label>
<label v-else style="color: #60a0ff;">{{ item.approvalStatus }}</label>
</view>
</view>
</view>
</view>
</mescroll-uni>
</view>
</view>
</template>
<script setup>
import {
ref,
onMounted,
watch
} from 'vue'
import customHeader from '@/components/customHeader.vue'
import customSearch from '@/components/customSearch.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import {
getNavBarPaddingTop
} from '@/utils/system.js'
import {
TaskPlanList
} from '@/api/crm/api_ys.js'
import {
onLoad,
onShow,
onUnload,
onHide
} from '@dcloudio/uni-app'
// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
navBarPaddingTop.value = getNavBarPaddingTop() * 2;
uni.$on('updateStatus', markVisited)
})
// 搜索处理
let searchShow = ref(false);
let searchText = ref(undefined);
let searchTypeObj = ref({
typeId: 3,
typeName: '消息类型'
});
let notictTypeCheck = ref({}); //选中类型
// 查询列表
let list = ref([]);
// 新增状态变量存储搜索条件
const inputval = ref(''); // 搜索内容
let searchValue = ref(null)
//监视查询的内容的变化
watch(searchValue, (newValue, oldValue) => {
//变化了之后，重新查询内容
var data = {
pageNum: 1,
pageSize: 10,
};
TaskPlanList(data).then(res => {
if (res.code == 200) {
//设置列表数据
list.value = res.rows;
}
})
})
onHide(() => {
searchShow.value = false;
})
// 搜索返回操作
const handleBack = () => {
searchShow.value = false;
}
// 获取input 焦点跳转
const handleSearchFocus = () => {
searchShow.value = true;
}
// 搜索完返回处理
const handleSearchConfirm = (param1, param2) => {
// console.log(param1,param2)
notictTypeCheck.value = param1.value;
inputval.value = param2.value || '';
searchValue.value = param2.value;
// 重置mescroll触发刷新
if (mescrollRef.value) {
mescrollRef.value.resetUpScroll();
}
searchShow.value = false;
}
const mescrollRef = ref(null);
const upOption = ref({
page: {
num: 0,
size: 10
},
noMoreSize: 5,
empty: {
tip: '~ 空空如也 ~',
icon: "../../../../static/images/mescroll-empty.png"
},
textLoading: '加载中...',
textNoMore: '已经到底了'
});
const downOption = ref({
auto: true,
textInOffset: '下拉刷新',
textOutOffset: '释放更新',
textLoading: '刷新中...'
});
let cssFlag = ref(false); //控制样式
const mescrollInit = (mescroll) => {
cssFlag.value = true;
mescrollRef.value = mescroll;
};
// 下拉刷新
const downCallback = async (mescroll) => {
try {
setTimeout(async () => {
const res = await getTaskPlanList(1, upOption.value.page.size);
cssFlag.value = false;
list.value = res.list;
mescroll.resetUpScroll();
}, 500);
} catch (error) {
mescroll.endErr();
} finally {
setTimeout(async () => {
mescroll.endSuccess();
}, 500);
}
}
// 上拉加载更多
const upCallback = async (mescroll) => {
try {
setTimeout(async () => {
const res = await getTaskPlanList(mescroll.num, mescroll.size,
inputval.value);
if (mescroll.num === 1) {
list.value = res.list;
} else {
list.value.push(...res.list);
}
mescroll.endBySize(res.list.length, res.total);
}, 500);
} catch (error) {
mescroll.endErr();
}
}
// 获取数据列表
const getTaskPlanList = (pageNum, pageSize) => {
return new Promise(async (resolve) => {
let param = {
pageNum,
pageSize,
// 添加搜索条件参数
searchInput: inputval.value
}
let res = await TaskPlanList(param);
resolve({
list: res.rows,
total: res.total
});
});
}
function showDetail(item) {
uni.navigateTo({
url: "/pages/business/CRM/scheduler/taskViewingDetail?data=" + encodeURIComponent(
JSON
.stringify(item))
})
}
onUnload(() => {
uni.$off('updateStatus')
})
const markVisited = (informationId) => {
const newList = [...list.value].map(item => {
if (item.informationId == informationId) {
return {
...item,
myselfBrowsing: 1
};
}
return item;
});
list.value = newList;
};
</script>
<style scoped>
.all-body {
/* #ifdef APP-PLUS */
top: 150rpx;
height: calc(100vh - 75px);
/* #endif */
/* #ifndef APP-PLUS */
top: 120rpx;
height: calc(100vh);
/* #endif */
}
.search {
display: flex;
}
.search .btn-search {
border: none;
background: none;
line-height: normal;
color: #fff;
line-height: 56rpx !important;
padding: 10rpx 0 0;
text-align: left;
cursor: pointer;
}
.search .btn-search::after {
display: none;
}
.search .custom-search {
width: 80%;
}
.search .custom-search.uni-searchbar {
padding-right: 0 !important;
}
.scroll-h {
/* #ifdef APP-PLUS */
height: calc(100vh - 120px);
/* #endif */
/* #ifndef APP-PLUS */
height: calc(100vh - 110px);
/* #endif */
}
.white-bg {
padding-bottom: 10rpx;
}
.search_center {
display: flex;
align-items: center;
border: none;
flex: 1;
height: 70rpx;
margin-left: 20rpx;
padding-left: 20rpx;
border-radius: 32.5rpx;
background-color: #f5f5f5;
.search_icon {
width: 30rpx;
height: 30rpx;
margin-right: 22rpx;
}
.category {
display: flex;
align-items: center;
margin-right: 16rpx;
padding-right: 16rpx;
border-right: 2rpx solid #D4D4D4;
position: relative;
text {
font-size: 13px;
margin-left: 10rpx;
margin-right: 10rpx;
}
image {
margin-top: 4rpx;
width: 20rpx;
height: 11rpx;
}
.pop {
position: absolute;
top: 50rpx;
background: #FFFFFF;
box-shadow: 0px 0px 40rpx 0px rgba(59, 59, 59, 0.2);
border-radius: 12rpx;
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx;
z-index: 100;
max-height: 566rpx;
overflow-y: auto;
text {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
white-space: nowrap;
margin: 10rpx 0;
line-height: 56rpx;
}
}
.pop_arrow {
position: absolute;
top: 48rpx;
z-index: 999;
&::after {
position: absolute;
content: "";
left: 68rpx;
top: -26rpx;
border: 14rpx solid #fff;
border-color: transparent transparent #fff transparent;
}
}
}
}
</style>

309
src/pages/business/CRM/scheduler/taskPlanReview.vue Normal file
View File

@@ -0,0 +1,309 @@
<template>
<view class="con-body">
<view class="con-bg">
<customHeader ref="customHeaderRef" :title="'任务计划审批'" :leftFlag="true">
</customHeader>
<!-- #ifdef H5 -->
<view style="height:50rpx"></view>
<!-- #endif -->
<!-- 高度来避免头部遮挡 -->
<view class="top-height"></view>
<view class="white-bg">
<view class="tabs-container">
<view class="search">
<uni-search-bar class="custom-search" radius="28" placeholder="任务名称"
clearButton="auto" cancelButton="none" bgColor="#6FA2F8"
textColor="#ffffff" v-model="searchValue" />
<button type="default" @click="handleSearch" size="mini"
class="btn-search">查询</button>
</view>
<view class="tabs-scorll">
<view class="tabs-header">
<view v-for="(tab, index) in tabHeaderList" :key="index"
:class="['tab-item-main', { 'active': activeTabHeader === index }]"
@click="switchTabHeader(index)">
{{ tab }}
</view>
</view>
</view>
<view class="white-bg-2" v-for="item in detailList">
<view class="report-list" @click="showDetail(item)">
<view class="report-list">
<view class="title" style="font-size: 30rpx;margin-top: 20rpx;">
{{ item.typeval == '1' ? '全天' : item.typeval == '2' ? '前半个班次' : '后半个班次' }}
<label v-if="item.applyType == '请假'"
style="float: right;color: #03ca03;">
{{ item.applyType }}</label>
<label v-if="item.applyType == '销假'"
style="float: right;color: #eaa303;">
{{ item.applyType }}</label>
</view>
<view class="r-list">
<view class="r-left">姓名</view>
<view class="r-right">{{ item.applyUserName }} </view>
</view>
<view class="r-list">
<view class="r-left">{{ item.applyType }}日期</view>
<view class="r-right">{{ item.startDate }} 至 {{ item.endDate }}
（ <label v-if="item.applyType == '请假'"
style="color: #03ca03;">
{{ item.days.replace('.0', '') }}天</label>
<label v-if="item.applyType == '销假'"
style="color: #eaa303;">
{{ item.days.replace('.0', '') }}天</label> ）
</view>
</view>
<view class="r-list">
<view class="r-left">详细说明</view>
<view v-if="item.reason && item.reason.length <= 18"
class="r-right">{{ item.reason
}}</view>
</view>
<view class="r-list" style="margin-top: -30rpx;"
v-if="item.reason && item.reason.length > 18">
<view class="r-right">{{ item.reason }}</view>
</view>
</view>
<view class="border-bottom" style="margin: 20rpx 0;"></view>
</view>
</view>
<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize"
:current="pageCurrent" :total="total" @change="change" /></view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
onMounted,
reactive
} from 'vue'
import {
onShow
} from '@dcloudio/uni-app'
import customHeader from '@/components/customHeader.vue'
import {
getNavBarPaddingTop
} from '@/utils/system.js'
import {
getMyReviewList
} from '@/api/crm/api_ys.js'
// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
navBarPaddingTop.value = getNavBarPaddingTop() * 2;
getlist();
})
onShow(() => {
uni.$on('isRefresh', function() {
isRefresh.value = true
getlist();
})
})
let isRefresh = ref(false)
let searchValue = ref(null)
// 查询搜索跳转
let handleSearch = () => {
isRefresh.value = true
getlist();
}
const pageSize = ref(4);
const pageCurrent = ref(1);
const loading = ref(false);
let tabHeaderList = ref(['待审核', '已审核'])
let total = ref(0);
const totalAll = ref(0);
const totalReject = ref(0);
const totalPass = ref(0);
let activeTab = ref(0);
let activeTabHeader = ref(0);
let detailList = ref([])
let detailLists = ref([])
//驳回
let rejectList = ref([])
//通过
let passList = ref([])
//待审批
let reviewList = ref([])
const getlist = async () => {
loading.value = true
let res = await getMyReviewList({
applyUserName: searchValue.value
});
detailLists.value = res.rows;
rejectList.value = res.rows.filter(t => t.status == '驳回' && t.reviewerIdR != null)
passList.value = res.rows.filter(t => t.status != '驳回' && t.reviewerIdR != null)
reviewList.value = res.rows.filter(t => t.reviewerIdR != null)
total.value = res.total
totalReject.value = rejectList.value.length
totalPass.value = passList.value.length
totalAll.value = reviewList.value.length
if (isRefresh.value == false) {
switchTabHeader(0)
}
loading.value = false
}
const switchTabHeader = (index) => {
isRefresh.value = false
activeTabHeader.value = index
change({
current: 1
})
}
// 分页触发
let change = (e) => {
pageCurrent.value = e.current
let end = pageSize.value * e.current
let start = end - pageSize.value
if (activeTabHeader.value == 0) {
detailList.value = passList.value.slice(start, end)
total.value = totalPass.value
} else if (activeTabHeader.value == 1) {
detailList.value = rejectList.value.slice(start, end)
total.value = totalReject.value
}
}
// 跳转
let showDetail = (item) => {
uni.navigateTo({
url: "/pages/business/CRM/leave/reviewDetail?data=" + encodeURIComponent(JSON
.stringify(item))
})
}
</script>
<style lang="scss" scoped>
.apply-row {
margin: 5px;
}
.border-bottom {
margin: 5px;
width: 100%;
}
.tabs-header {
display: flex;
height: 80rpx;
background: #fff;
border-bottom: 1rpx solid #eee;
}
.tab-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #666;
}
.tab-item.active {
color: #007AFF;
position: relative;
}
.tab-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 200rpx;
height: 4rpx;
background-color: #007AFF;
}
.tab-item-main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: #666;
}
.tab-item-main.active {
color: #007AFF;
position: relative;
}
.tab-item-main.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 300rpx;
height: 4rpx;
background-color: #007AFF;
}
:deep(.report-list .r-list) {
padding: 0.5rem 0;
}
.search {
display: flex;
}
.search .btn-search {
border: none;
background: none;
line-height: normal;
color: #666;
line-height: 56rpx !important;
padding: 10rpx 0 0;
text-align: left;
cursor: pointer;
}
.search .btn-search::after {
display: none;
}
.search .custom-search {
width: 80%;
}
.search .custom-search.uni-searchbar {
padding-right: 0 !important;
}
</style>

393
src/pages/business/CRM/scheduler/taskViewingDetail.vue Normal file
View File

@@ -0,0 +1,393 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<customHeader ref="customHeaderRef" :title="!searchShow ? '主线任务列表' : '搜索'"
:leftFlag="true" :rightFlag="true" @back="handleBack"
:searchType="searchShow ? 1 : undefined">
<!-- <template #right v-if="!searchShow">
<view class="head-right" @click="handleRead">
<img :src="'static/images/icon-clean@2x.png'" />清除未读
</view>
</template> -->
</customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height"></view>
<!-- 正文内容 -->
<!-- 分页部分 -->
<mescroll-uni v-if="!searchShow" ref="mescrollRef" @init="mescrollInit"
@down="downCallback" @up="upCallback" :up="upOption" :down="downOption"
:fixed="false" textColor="#ffffff" bgColor="#ffffff" class="scroll-h"
:class="{ 'loading-scroll': cssFlag }">
<view class="white-bg margin-bottom20" v-for="(item, index) in list" :key="index">
<view>
<view class="report-list">
<view class="title" style="font-size: 30rpx">
主线任务内容：{{ item.mainTaskName }}
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
计划开始时间：{{ formatDateStr(item.mainTaskStartTime) }}
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
计划结束时间：{{ formatDateStr(item.mainTaskEndTime) }}
</view>
<view style="display: flex;align-items: center;">
<view class="r-left"
style="width:80%;font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
完成状态：{{ item.mainTaskStatus }}
</view>
<view>
<uni-icons type="plus-filled" size="30" color="#38A6FF"
@click="showDetail(item)"></uni-icons>
</view>
</view>
<view class="right"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
完成状态：{{ item.mainTaskStatus }}
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
是否超期：{{ item.mainTaskIsOverdue }}
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
绩效分：{{ item.mainTaskScore_JX }}
</view>
<view class="r-left"
style="font-size: 25rpx;font-weight: 500;margin-top: 10rpx;">
能力分：{{ item.mainTaskScore_NL }}
</view>
</view>
</view>
</view>
</mescroll-uni>
</view>
</view>
</template>
<script setup>
import {
ref,
onMounted,
watch
} from 'vue'
import customHeader from '@/components/customHeader.vue'
import customSearch from '@/components/customSearch.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import {
getNavBarPaddingTop
} from '@/utils/system.js'
import {
SalesManTaskDetailList
} from '@/api/crm/api_ys.js'
import {
onLoad,
onShow,
onUnload,
onHide
} from '@dcloudio/uni-app'
// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
let mainTaskId = ref("");
onMounted(() => {
navBarPaddingTop.value = getNavBarPaddingTop() * 2;
uni.$on('updateStatus', markVisited)
})
let mainData = ref();
onLoad((options) => {
if (options.data) {
mainData = JSON.parse(decodeURIComponent(options.data))
mainTaskId.value = mainData.mainTaskId
}
})
// 搜索处理
let searchShow = ref(false);
// 查询列表
let list = ref([]);
// 新增状态变量存储搜索条件
const inputval = ref(''); // 搜索内容
onHide(() => {
searchShow.value = false;
})
// 搜索返回操作
const handleBack = () => {
searchShow.value = false;
}
// 获取input 焦点跳转
const handleSearchFocus = () => {
searchShow.value = true;
}
const formatDateStr = (times) => {
const date = new Date(times);
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : '0' + month;;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
const mescrollRef = ref(null);
const upOption = ref({
page: {
num: 0,
size: 10
},
noMoreSize: 5,
empty: {
tip: '~ 空空如也 ~',
icon: "../../../../static/images/mescroll-empty.png"
},
textLoading: '加载中...',
textNoMore: '已经到底了'
});
const downOption = ref({
auto: true,
textInOffset: '下拉刷新',
textOutOffset: '释放更新',
textLoading: '刷新中...'
});
let cssFlag = ref(false); //控制样式
const mescrollInit = (mescroll) => {
cssFlag.value = true;
mescrollRef.value = mescroll;
};
// 下拉刷新
const downCallback = async (mescroll) => {
try {
setTimeout(async () => {
const res = await getSalesManTaskDetailList(1, upOption.value.page
.size);
cssFlag.value = false;
list.value = res.list;
mescroll.resetUpScroll();
}, 500);
} catch (error) {
mescroll.endErr();
} finally {
setTimeout(async () => {
mescroll.endSuccess();
}, 500);
}
}
// 上拉加载更多
const upCallback = async (mescroll) => {
try {
setTimeout(async () => {
const res = await getSalesManTaskDetailList(mescroll.num, mescroll
.size,
inputval.value);
if (mescroll.num === 1) {
list.value = res.list;
} else {
list.value.push(...res.list);
}
mescroll.endBySize(res.list.length, res.total);
}, 500);
} catch (error) {
mescroll.endErr();
}
}
// 获取数据列表
const getSalesManTaskDetailList = (pageNum, pageSize) => {
return new Promise(async (resolve) => {
let param = {
pageNum,
pageSize,
// 添加搜索条件参数
mainTaskId: mainTaskId.value
}
let res = await SalesManTaskDetailList(param);
resolve({
list: res.rows,
total: res.total
});
});
}
function showDetail(item) {
uni.navigateTo({
url: "/pages/business/CRM/scheduler/taskPlanAdded?data=" + encodeURIComponent(
JSON
.stringify(item))
})
}
onUnload(() => {
uni.$off('updateStatus')
})
const markVisited = (informationId) => {
const newList = [...list.value].map(item => {
if (item.informationId == informationId) {
return {
...item,
myselfBrowsing: 1
};
}
return item;
});
list.value = newList;
};
</script>
<style scoped>
.all-body {
/* #ifdef APP-PLUS */
top: 150rpx;
height: calc(100vh - 75px);
/* #endif */
/* #ifndef APP-PLUS */
top: 120rpx;
height: calc(100vh);
/* #endif */
}
.search {
display: flex;
}
.search .btn-search {
border: none;
background: none;
line-height: normal;
color: #fff;
line-height: 56rpx !important;
padding: 10rpx 0 0;
text-align: left;
cursor: pointer;
}
.search .btn-search::after {
display: none;
}
.search .custom-search {
width: 80%;
}
.search .custom-search.uni-searchbar {
padding-right: 0 !important;
}
.scroll-h {
/* #ifdef APP-PLUS */
height: calc(100vh - 120px);
/* #endif */
/* #ifndef APP-PLUS */
height: calc(100vh - 110px);
/* #endif */
}
.white-bg {
padding-bottom: 10rpx;
}
.search_center {
display: flex;
align-items: center;
border: none;
flex: 1;
height: 70rpx;
margin-left: 20rpx;
padding-left: 20rpx;
border-radius: 32.5rpx;
background-color: #f5f5f5;
.search_icon {
width: 30rpx;
height: 30rpx;
margin-right: 22rpx;
}
.category {
display: flex;
align-items: center;
margin-right: 16rpx;
padding-right: 16rpx;
border-right: 2rpx solid #D4D4D4;
position: relative;
text {
font-size: 13px;
margin-left: 10rpx;
margin-right: 10rpx;
}
image {
margin-top: 4rpx;
width: 20rpx;
height: 11rpx;
}
.pop {
position: absolute;
top: 50rpx;
background: #FFFFFF;
box-shadow: 0px 0px 40rpx 0px rgba(59, 59, 59, 0.2);
border-radius: 12rpx;
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx;
z-index: 100;
max-height: 566rpx;
overflow-y: auto;
text {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
white-space: nowrap;
margin: 10rpx 0;
line-height: 56rpx;
}
}
.pop_arrow {
position: absolute;
top: 48rpx;
z-index: 999;
&::after {
position: absolute;
content: "";
left: 68rpx;
top: -26rpx;
border: 14rpx solid #fff;
border-color: transparent transparent #fff transparent;
}
}
}
}
</style>