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

first commit

Browse Source
This commit is contained in:
chenzhen
2025-07-22 11:21:01 +08:00
commit 09d0e316e1
164 changed files with 7907 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
src/pages/business/CRM/checkinStatistics.vue Normal file
View File

@@ -0,0 +1,234 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<customHeader ref="customHeaderRef" :title="'打卡统计'" :leftFlag="true" :rightFlag="false"></customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height"></view>
<!-- 正文内容 -->
<view>
<!-- 搜索 -->
<view class="search">
<picker @change="bindPickerChange" :value="cityIndex" :range="cityArr" class="picker-bg">
<view class="picker">
<uni-icons type="location" size="18"></uni-icons>
<view>{{cityArr[cityIndex]}}</view>
<uni-icons type="down" size="18"></uni-icons>
</view>
</picker>
<picker mode="date" :value="defaultDate" :start="startDate" :end="endDate"
@change="bindDateChange" class="picker-bg">
<view class="picker">
<uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phoneshizhong" size="18"></uni-icons>
<view>{{defaultDate}}</view>
<uni-icons type="down" size="18"></uni-icons>
</view>
</picker>
<button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>
</view>
<!-- 签到打卡 -->
<view class="checkin-tab">
<view class="checkin-tab-item" :class="{active:tabType==0}" @click="handleTab(0)">
<view class="tab-item-title">7</view>
<view class="tab-item-name">最新签到打卡</view>
</view>
<view class="checkin-tab-item" :class="{active:tabType==1}" @click="handleTab(1)">
<view class="tab-item-title">4</view>
<view class="tab-item-name">未签到打卡</view>
</view>
</view>
<!-- tab切换显示 -->
<view class="white-bg">
<!-- 最新签到列表 -->
<view class="tab-con" v-if="tabType==0">
<view class="tab-title" v-for="(item,index) in list1" :key="index">
{{item}}
<uni-icons type="checkbox-filled" size="26" color="#02C74C"></uni-icons>
</view>
</view>
<!-- 未签到列表 -->
<view class="tab-con" v-if="tabType==1">
<view class="tab-title" v-for="(item,index) in list2" :key="index">
{{item}}
<uni-icons type="info-filled" size="26" color="#FF8059"></uni-icons>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
import { getDate} from '@/utils/datetime.js'
let cityIndex = ref(0);
let cityArr = ["北京大区","天津大区"];
// 选择大区列表
let bindPickerChange = (e)=>{
console.log('picker发送选择改变，携带值为', e.detail.value)
cityIndex.value = e.detail.value
}
// 开始时间
let startDate = getDate('start');
// 结束时间，间隔10年
let endDate = getDate('end');
let defaultDate = getDate({ format: true })
let bindDateChange = (e) =>{
defaultDate = e.detail.value
}
let searchValue = ref(null)
// 查询搜索跳转
let handleSearch = () => {
console.log(searchValue.value)
}
// tab 切换
let tabType = ref(0)
let handleTab = (type)=>{
tabType.value = type;
}
// 列表
let list1 = ref([]);
list1.value = ["王振","胡本华","高勐","崔礼涛","汪津春","王永健","张浩"];
let list2 = ref([]);
list2.value = ["付翰","张旭光","赵欣鸣","张王小北"];
// 确定
let handleSubmit = () => {
}
</script>
<style scoped>
.search {
display: flex;
padding:0 30rpx;
}
.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 .picker-bg{
display: flex;
background-color: #6FA2F8;
border-radius: 25px;
color:#fff;
font-size:28rpx;
padding:0rpx 20rpx;
/* #ifndef APP-PLUS */
padding:10rpx 20rpx 0 20rpx;
/* #endif */
margin-right:20rpx;
}
.search .picker-bg .picker {
display: flex;
align-items: center;
/* #ifndef APP-PLUS */
padding-top:2rpx;
/* #endif */
}
.search .picker-bg .picker .uni-icons{
color:#fff !important;
}
.search .picker-bg .picker .uni-icons:first-child{
margin-right: 10rpx;
}
.search .picker-bg .picker .uniui-down{
margin-left: 20rpx;
}
.checkin-tab{
margin-top:35rpx;
display: flex;
padding:0 30rpx;
flex: 1;
}
.checkin-tab-item{
align-items: center;
justify-content: center;
color:rgba(255, 255, 255, 0.5);
text-align: center;
margin-right:30rpx;
font-weight: bold;
padding-bottom:20rpx;
}
.checkin-tab-item.active{
position: relative;
color:#fff;
}
.checkin-tab-item.active::after{
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
width: 100rpx;
height: 8rpx;
}
.checkin-tab-item .tab-item-title{
font-size:60rpx;
}
.white-bg {
width: 670rpx;
margin: 0;
border-radius: 8px 8px 0 0;
padding:50rpx 40rpx;
margin-top:20rpx;
/* #ifdef APP-PLUS */
height:calc(100vh - 260px);
/* #endif */
/* #ifndef APP-PLUS */
height:calc(100vh - 230px);
/* #endif */
}
.tab-con{
display: flex;
flex-flow: row wrap
}
.tab-con .tab-title{
border:1px solid #E8E8E8;
text-align: center;
border-radius: 5px;
position: relative;
/* padding:10rpx 20rpx; */
margin-right:20rpx;
margin-bottom:30rpx;
width:148rpx;
height: 60rpx;
line-height: 60rpx;
font-size: 28rpx;
}
.tab-con .tab-title:nth-child(4n){
margin-right: 0;
}
.tab-con .uni-icons{
position: absolute;
right:-10px;
top:-10px;
}
</style>

224
src/pages/business/CRM/marketInformation.vue Normal file
View File

@@ -0,0 +1,224 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<customHeader ref="customHeaderRef" :title="'市场信息管理'" :leftFlag="true" :rightFlag="true">
<template #right>
<view class="head-right" @click="handleAdd">
<uni-icons type="plus" size="24" color="#B7D2FF"></uni-icons>新增
</view>
</template>
</customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height" :style="{ paddingTop: navBarPaddingTop + 'px' }"></view>
<!-- 正文内容 -->
<view class="all-body market-con">
<view class="nav-list">
<view class="nav-item" :class="{active:index==activeTab}"
v-for="(item,index) in tabList" :key="index"
@click="handleNav(index)"
>{{ item }}</view>
</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}">
<!-- 市场机会信息 -->
<block v-if="activeTab === 0">
市场机会信息内容
</block>
<!-- 重大事项信息 -->
<block v-if="activeTab === 1">
<view class="white-bg margin-bottom20" v-for="(item, index) in list" :key="index">
<view class="report-list">
<view class="title r-list">
<view class="r-left" style="font-size:38rpx;">{{ item.title }}</view>
<view class="r-right btn-gray flex-auto" :class="{'btn-blue':item.status==2}" size="mini">{{ item.statusName }}</view>
</view>
<view style="padding:0rpx 0 10rpx">
<view class="font-bold" style="padding-bottom:10rpx">产生影响</view>
<view class="font-gray">{{ item.desc }}</view>
</view>
</view>
</view>
</block>
</mescroll-uni>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import { getNavBarPaddingTop } from '@/utils/system.js'
import { mattersList } from '@/api/business.js'
// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
navBarPaddingTop.value = getNavBarPaddingTop() * 2;
})
const activeTab = ref(1);// 默认重大事项信息
const tabList = ['市场机会信息', '重大事项信息', '竞争对手信息', '人员变动信息','多标签效果','多标签效果'];
let handleNav = (index)=>{
console.log(index)
activeTab.value = index;
}
// 新增
let handleAdd = () => {
// uni.navigateTo({ url: '/pages/business/CRM/visitorReportAdd' })
}
// 查询列表
let list = ref([]);
const mescrollRef = ref(null);
const upOption = ref({
page: { num: 0, size: 10 },
noMoreSize: 5,
empty: { tip: '~ 空空如也 ~' },
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 getMattersList(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 getMattersList(mescroll.num, mescroll.size);
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 getMattersList = (pageIndex, pageSize) => {
return new Promise(async (resolve) => {
let param = {
pageIndex,
pageSize
}
let res = await mattersList(param);
resolve({
list: res.list,
total: res.totalCount
});
});
}
</script>
<style scoped>
.all-body{
/* #ifdef APP-PLUS */
top:88rpx;
height: calc(100vh - 44px);
/* #endif */
/* #ifndef APP-PLUS */
top:100rpx;
height: calc(100vh - 48px);
/* #endif */
}
/*.market-con{
} */
.nav-list{
display: flex;
flex-wrap: wrap;
/* #ifdef APP-PLUS */
padding:80rpx 30rpx 0;
/* #endif */
/* #ifndef APP-PLUS */
padding:20rpx 30rpx 0;
/* #endif */
}
.nav-list .nav-item{
background-color:#05A3F4;
border-radius: 10rpx;
color:#FFFFFF;
font-size:28rpx;
text-align: center;
padding:10rpx 25rpx;
margin-right:15rpx;
margin-bottom:20rpx;
}
.nav-list .nav-item:nth-child(3n){
margin-right:0;
}
.nav-list .nav-item.active{
background-color: #fff;
color:#3384DF;
font-weight: bold;
}
.report-list .r-list{
align-items:flex-start;
}
.scroll-h {
/* #ifdef APP-PLUS */
height: calc(100vh - 155px);
/* #endif */
/* #ifndef APP-PLUS */
height: calc(100vh - 135px);
/* #endif */
}
.white-bg {
padding-top:10rpx;
padding-bottom: 10rpx;
}
.report-list .title{
display: flex;
}
</style>

169
src/pages/business/CRM/paymentCollection.vue Normal file
View File

@@ -0,0 +1,169 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<customHeader ref="customHeaderRef" :title="'个人回款信息统计表'" :leftFlag="true" :rightFlag="false"></customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height"></view>
<!-- 正文内容 -->
<view>
<!-- 搜索 -->
<view class="search">
<picker mode="date" :value="defaultDate" :start="startDate" :end="endDate"
@change="bindDateChange" class="picker-bg">
<view class="picker">
<uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phoneshizhong" size="18"></uni-icons>
<view>{{defaultDate}}</view>
<uni-icons type="down" size="18"></uni-icons>
</view>
</picker>
<picker @change="bindPickerChange" :value="peopleIndex" :range="peopleArr" class="picker-bg">
<view class="picker">
<uni-icons type="person" size="18"></uni-icons>
<view>{{peopleArr[peopleIndex]}}</view>
<uni-icons type="down" size="18"></uni-icons>
</view>
</picker>
<button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>
</view>
<!-- 回款信息查询 -->
<view class="white-bg">
<view class="table-title">回款信息查询</view>
<table class="my-table">
<tr>
<th class="tab-width100">姓名</th>
<th class="tab-width160">客户名称</th>
<th>目标回款</th>
<th>实际回款</th>
<th>完成度</th>
</tr>
<tr v-for="(item, index) in tableData" :key="index">
<td>{{ item.name }}</td>
<td class="txtLeft">{{ item.guestName }}</td>
<td>{{ item.tragetReturnMoney }}</td>
<td>{{ item.returnMoney }}</td>
<td>{{ item.completRate }}</td>
</tr>
</table>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
import { getDate} from '@/utils/datetime.js'
// 开始时间
let startDate = getDate('start');
// 结束时间，间隔10年
let endDate = getDate('end');
let defaultDate = getDate({ format: true })
let bindDateChange = (e) =>{
defaultDate = e.detail.value
}
let peopleIndex = ref(0);
let peopleArr = ["张志刚1","张志刚2"];
// 选择列表
let bindPickerChange = (e)=>{
console.log('picker发送选择改变，携带值为', e.detail.value)
peopleIndex.value = e.detail.value
}
let searchValue = ref(null)
// 查询搜索跳转
let handleSearch = () => {
console.log(searchValue.value)
}
const tableData = [
{ name: '张志钢',guestName:'航宇救生装备有限公司',tragetReturnMoney:677153.25,returnMoney:677153.25,completRate:'100%'},
{ name: '张志钢',guestName:'中国船舶集团有限公司第七一七研究所',tragetReturnMoney:'700000.00',returnMoney:'53890.00',completRate:'7.7%'},
{ name: '张志钢',guestName:'北京国科舰航传感技术有限公司',tragetReturnMoney:'290877.00',returnMoney:'290877.00',completRate:'100%'},
{ name: '张志钢',guestName:'武汉杭久电气有限公司',tragetReturnMoney:869706.80,returnMoney:537809.75,completRate:'61.8%'},
{ name: '张志钢',guestName:'深圳市欧灿科技有限公司',tragetReturnMoney:328097.10,returnMoney:297905.37,completRate:'90.8%'},
{ name: '张志钢',guestName:'其他',tragetReturnMoney:558703.02,returnMoney:558703.02,completRate:'100%'},
{ name: '张志钢',guestName:'武汉航空仪表有限责任公司',tragetReturnMoney:'9807328.00',returnMoney:8692300.93,completRate:'88.6%'},
{ name: '张志钢',guestName:'武汉永力科技股份有限公司',tragetReturnMoney:539087.21,returnMoney:539087.21,completRate:'100%'},
]
</script>
<style scoped>
.search {
display: flex;
padding:0 30rpx;
}
.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 .picker-bg{
display: flex;
background-color: #6FA2F8;
border-radius: 25px;
color:#fff;
font-size:28rpx;
padding:0rpx 20rpx;
/* #ifndef APP-PLUS */
padding:10rpx 20rpx 0 20rpx;
/* #endif */
margin-right:20rpx;
}
.search .picker-bg .picker {
display: flex;
align-items: center;
/* #ifndef APP-PLUS */
padding-top:2rpx;
/* #endif */
}
.search .picker-bg .picker .uni-icons{
color:#fff !important;
}
.search .picker-bg .picker .uni-icons:first-child{
margin-right: 10rpx;
}
.search .picker-bg .picker .uniui-down{
margin-left: 20rpx;
}
.white-bg {
width: 750rpx;
margin: 0;
border-radius: 8px 8px 0 0;
padding:20rpx 0rpx;
margin-top:20rpx;
/* #ifdef APP-PLUS */
height:calc(100vh - 135px);
/* #endif */
/* #ifndef APP-PLUS */
height:calc(100vh - 112px);
/* #endif */
}
.table-title{
text-align: center;
font-weight: bold;
border-bottom:2px solid #E7E7E7;
padding-bottom:20rpx;
}
</style>

216
src/pages/business/CRM/visitorReport.vue Normal file
View File

@@ -0,0 +1,216 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<customHeader ref="customHeaderRef" :title="'走访报告列表'" :leftFlag="true" :rightFlag="true">
<template #right>
<view class="head-right" @click="handleAdd">
<uni-icons type="plus" size="24" color="#B7D2FF"></uni-icons>新增
</view>
</template>
</customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height" :style="{ paddingTop: navBarPaddingTop + 'px' }"></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)">
<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>
<view class="border-bottom"></view>
<view class="r-list">
<view class="r-left">报告类型</view>
<view class="r-right">{{ item.reportTypeName }}</view>
</view>
<view class="border-bottom"></view>
<view class="r-list">
<view class="r-left">报告人</view>
<view class="r-right">{{ item.reportPeople }}</view>
</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 customHeader from '@/components/customHeader.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import { getNavBarPaddingTop } from '@/utils/system.js'
import { visitorReportList } from '@/api/business.js'
// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
navBarPaddingTop.value = getNavBarPaddingTop() * 2;
})
let searchValue = ref(null)
// 查询搜索跳转
let handleSearch = () => {
console.log(searchValue.value)
}
// 新增
let handleAdd = ()=>{
uni.navigateTo({ url:'/pages/business/CRM/visitorReportAdd' })
}
// 查询列表
let list = ref([]);
const mescrollRef = ref(null);
const upOption = ref({
page: { num: 0, size: 10 },
noMoreSize: 5,
empty: { tip: '~ 空空如也 ~' },
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 getVisitorReportList(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 getVisitorReportList(mescroll.num, mescroll.size);
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 getVisitorReportList = (pageIndex, pageSize) => {
return new Promise(async (resolve) => {
let param = {
pageIndex,
pageSize
}
let res = await visitorReportList(param);
resolve({
list: res.list,
total: res.totalCount
});
});
}
// 跳转到详情
let handleDetail=(item)=>{
uni.navigateTo({
url: "/pages/business/CRM/visitorReportDetail?id="+item.id
})
}
</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;
}
</style>

150
src/pages/business/CRM/visitorReportAdd.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<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"
color="#B7D2FF"></uni-icons>保存
</view>
</template>
</customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height"></view>
<!-- 正文内容 -->
<view class="white-bg">
<view class="form-con">
<uni-forms ref="formRef" :model="formData" :rules="rules" label-width="100px" >
<uni-forms-item label="客户名称" name="guestName" class="f-c-right">
<picker @change="bindPickerChange" :value="guestIndex" :range="guestArr">
<view class="f-c-text">
{{guestArr[guestIndex]}}
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
</view>
</picker>
</uni-forms-item>
<uni-forms-item label="签到记录" class="f-c-right">
<view class="f-c-text txt-right">--</view>
</uni-forms-item>
<uni-forms-item label="我方领导" name="leader" required class="uni-forms-item is-direction-top is-top">
<uni-easyinput v-model="formData.leader" placeholder="请输入我方领导" />
</uni-forms-item>
<uni-forms-item label="走访日期" name="visitDate" class="uni-forms-item is-direction-top is-top">
<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.visitDate" @change="changeDate" />
</uni-forms-item>
</uni-forms>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
import{ getGuestList} from '@/api/business.js'
// 客户名称列表
let guestList = ref([]);
let guestArr = ref([])
let guestIndex = ref(0);
let selectGuestList = async ()=>{
let res = await getGuestList();
let list = res.list;
list.forEach(item => {
guestArr.value.push(item.name)
});
guestList.value = res.list
}
selectGuestList();
// 选择客户列表
let bindPickerChange = (e)=>{
console.log('picker发送选择改变，携带值为', e.detail.value)
guestIndex.value = e.detail.value
}
// 表单ref
const formRef = ref(null);
// 表单数据
const formData = ref({
guestName:'',
leader:'',
visitDate:''
});
// 验证规则
const rules = {
leader: {
rules: [
{ required: true, errorMessage: '我方领导不能为空' }
]
}
};
// 修改日期
let changeDate = (e)=>{
console.log('changeDate:', e);
};
// 保存走访报告
const submitForm = async () => {
try {
// 验证表单
await formRef.value.validate();
// 验证通过后的操作
uni.showToast({
title: '验证通过',
icon: 'success'
});
console.log('表单数据:', formData.value);
// 这里可以添加提交到服务器的代码
} catch (err) {
console.log('表单验证失败:', err);
}
};
</script>
<style scoped>
.white-bg {
width: 750rpx;
padding: 30rpx 0 0;
margin-bottom: 0;
border-radius: 8px 8px 0 0;
}
.form-con{
/* #ifdef APP-PLUS */
height:calc(100vh - 100px)
/* #endif */
/* #ifndef APP-PLUS */
height:calc(100vh - 80px)
/* #endif */
}
:deep(.uni-date-x){
display: block;
}
:deep(.uni-date-x .icon-calendar){
float: right;
margin-top:15rpx;
margin-right: 20rpx;
background:url('../../../static/images/business/icon-date.png') no-repeat;
background-size:32rpx 35rpx;
width:32rpx;
height: 35rpx;
}
:deep(.uni-date-x .icon-calendar::before){
display: none;
}
:deep(.uni-date-x .uni-date__x-input){
padding-left:20rpx;
color:#919191;
}
</style>

190
src/pages/business/CRM/visitorReportDetail.vue Normal file
View File

@@ -0,0 +1,190 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<customHeader ref="customHeaderRef" :title="'走访报告详情'" :leftFlag="true" :rightFlag="false"></customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height"></view>
<!-- 正文内容 -->
<!-- 详情内容 -->
<view class="white-bg">
<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-pink" size="mini" @click="handleZan">
<uni-icons type="hand-up-filled" size="16" color="#ffffff"></uni-icons> 赞
</view>
</view>
<view class="border-bottom b-width"></view>
<view class="r-list">
<view class="r-left">报告人</view>
<view class="r-right">{{ item.reportPeople }}</view>
</view>
<view class="border-bottom b-width"></view>
<view class="r-list">
<view class="r-left">走访日期</view>
<view class="r-right">{{ item.dateStr }}</view>
</view>
<view class="border-bottom b-width"></view>
<view class="r-list">
<view class="r-left">是否双方高层领导参与</view>
<view class="r-right">{{ item.isJoin }}</view>
</view>
<view class="border-bottom b-width"></view>
<view class="r-list">
<view class="r-left">活动类型</view>
<view class="r-right">{{ item.activityTypeName }}</view>
</view>
<view class="border-bottom b-width"></view>
</view>
</view>
<!-- 报告明细&评论 -->
<customTabs v-model="activeTab" :tabs="tabList" :modelValue="activeTab">
<!-- 报告明细 -->
<block v-if="activeTab === 0">
<view class="white-bg white-bg-2">
<view class="report-list">
<view class="r-list">
<view class="r-left">拜访事项</view>
<view class="r-right">获得信息</view>
</view>
<view class="border-bottom b-width"></view>
<view class="r-list">
<view class="r-left">拜访类型</view>
<view class="r-right">竞争对手信息</view>
</view>
<view class="border-bottom b-width"></view>
<view class="r-list" style="display: block">
<view class="r-name">结果</view>
<view class="r-gray">考察了几家连接器单位，陶瓷管壳55所、43所现在的开模费有所下降，便宜的几千块钱。</view>
</view>
</view>
</view>
<view class="white-bg white-bg-2">
<view class="report-list">
<view class="r-list">
<view class="r-left">拜访事项</view>
<view class="r-right">日常走访</view>
</view>
<view class="border-bottom b-width"></view>
<view class="r-list">
<view class="r-left">拜访类型</view>
<view class="r-right">竞争对手信息</view>
</view>
<view class="border-bottom b-width"></view>
<view class="r-list">
<view class="r-left">客户人员</view>
<view class="r-right">孙琳琳、顾鹏、田玲</view>
</view>
<view class="border-bottom b-width"></view>
<view class="r-list">
<view class="r-left">我方人员</view>
<view class="r-right">肖建华、石宪、刘启运、赵震</view>
</view>
<view class="border-bottom b-width"></view>
<view class="r-list" style="display: block">
<view class="r-name">结果</view>
<view class="r-gray">
<view class="margin-bottom20" >1、江苏屹信现在有意向寻找第二家管壳供方，主要是因为客户要求做一些封装产品和自研顶目涉及到SIP系统级封装研发工作。 </view>
<view>2、江苏屹信管壳主要是功放管壳带热沉/CPC/钨铜/钼铜。陶瓷管壳希望在30天内交付。</view>
</view>
</view>
</view>
</view>
</block>
<!-- 评论 -->
<block v-if="activeTab === 1">
<view class="white-bg white-bg-2">评论内容</view>
</block>
</customTabs>
<!-- 底部加高度来避免tabbar遮挡 -->
<view class="bottom-height"></view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import customHeader from '@/components/customHeader.vue'
import customTabs from '@/components/customTabs.vue';
import { visitorReportDetail } from '@/api/business.js'
// 加载后调用
let id = ref(null)
onLoad((options) => {
id.value = options.id;
getVisitorReportDetail();
})
// 查询详情
let item = ref({});
const getVisitorReportDetail = async () => {
let param = {
id: id.value
}
let res = await visitorReportDetail(param);
item.value = res.activeObj;
}
// 报告明细&评论
const activeTab = ref(0);//默认报告明细
const tabList = ['报告明细', '评论'];
// 跳转走访报告录入
let handleZan = ()=>{
}
</script>
<style scoped>
.white-bg {
width: 690rpx;
margin: 0;
border-radius: 8px 8px 0 0;
}
.white-bg.white-bg-2{
border-radius:0;
margin-bottom:20rpx;
}
:deep(.tabs-header) {
/* background: none !important; */
border-bottom: none !important;
margin: 0 auto;
gap: 5px;
}
:deep(.tab-item) {
color:#919191;
font-size: 32rpx;
font-weight: bold;
/* flex:none; */
/* margin: 0 -50rpx; */
/* padding: 0 50rpx; */
}
:deep(.tab-item:first-child){
text-align: right;
margin-left:230rpx;
}
:deep(.tab-item:last-child){
text-align: left;
margin-right:230rpx;
}
:deep(.tab-item.active) {
color: #3384DF;
font-weight: bold;
}
:deep(.tab-item.active::after) {
width: 100rpx;
height: 8rpx;
}
</style>

215
src/pages/business/CRM/visitorReportEnter.vue Normal file
View File

@@ -0,0 +1,215 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<customHeader ref="customHeaderRef" :title="'走访报告内容录入'" :leftFlag="true" :rightFlag="false"></customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height"></view>
<!-- 日常走访 -->
<view class="white-bg white-bg-2">
<view class="w-b-title" @click="handleExpand">日常走访
<text>
{{ expandFlag ? '展开' : '收起' }}
<i :class="{ iconfont: true, 'icon-up': !expandFlag, 'icon-down': expandFlag }"></i>
</text>
</view>
<view v-if="!expandFlag" class="form-con">
<uni-forms ref="formRef" :model="formData" :rules="rules" label-width="100px" label-position="top">
<uni-forms-item label="客户人员" name="guestName1" class="f-c-right">
<multipleSelect :multiple="true" :value="monIndex1" downInner :options="guestList1"
@change="changeValue1" :key="Math.round()"
></multipleSelect>
</uni-forms-item>
<uni-forms-item label="我方参与人" name="guestName2" class="f-c-right">
<multipleSelect :multiple="true" :value="monIndex2" downInner :options="guestList2"
@change="changeValue2" :key="Math.round()"
></multipleSelect>
</uni-forms-item>
<uni-forms-item label="活动内容" name="activeCon" required
class="uni-forms-item is-direction-top is-top">
<multipleSelect :multiple="true" :value="monIndex3" downInner :options="guestList3"
@change="changeValue3" :key="Math.round()"
></multipleSelect>
</uni-forms-item>
<uni-forms-item label="活动文字" name="activeTxt" class="uni-forms-item is-direction-top is-top">
<uni-easyinput type="textarea" autoHeight v-model="formData.activeTxt" placeholder="请输入" class="form-texarea" />
</uni-forms-item>
</uni-forms>
<view class="footer-con">
<button class="btn-default" type="default" @click="handleDelete" size="mini">删 除</button>
<button class="btn-primary" type="primary" @click="submitForm" size="mini">保存/修改</button>
</view>
</view>
</view>
<!-- 业务招待 -->
<view class="white-bg white-bg-2 white-bg-3">
<view class="w-b-title" @click="handleExpand2">业务招待
<text>
{{ expandFlag2 ? '展开' : '收起' }}
<i :class="{ iconfont: true, 'icon-up': !expandFlag2, 'icon-down': expandFlag2 }"></i>
</text>
</view>
<view v-if="!expandFlag2" class="form-con">
业务招待
</view>
</view>
<!-- 技术交流 -->
<view class="white-bg white-bg-2 white-bg-3">
<view class="w-b-title" @click="handleExpand3">技术交流
<text>
{{ expandFlag3 ? '展开' : '收起' }}
<i :class="{ iconfont: true, 'icon-up': !expandFlag3, 'icon-down': expandFlag3 }"></i>
</text>
</view>
<view v-if="!expandFlag3" class="form-con">
技术交流
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
import multipleSelect from '@/components/multipleSelect.vue'
// 日常走访
let expandFlag = ref(false);
let handleExpand = () => {
expandFlag.value = !expandFlag.value;
}
// 客户人员
let monIndex1= reactive([0]);
const changeValue1 = (item, value) => {
console.log("客户人员", item, value);
monIndex1 = value;
};
const guestList1 = [
{ value: 0, text: "客户1" },
{ value: 1, text: "客户2" },
{ value: 2, text: "客户3" },
{ value: 3, text: "客户4" },
{ value: 4, text: "客户5" },
];
// 我方人员
let monIndex2= reactive([0]);
const changeValue2 = (item, value) => {
console.log("我方人员", item, value);
monIndex2 = value;
};
const guestList2 = [
{ value: 0, text: "我方1" },
{ value: 1, text: "我方2" },
{ value: 2, text: "我方3" },
{ value: 3, text: "我方4" },
{ value: 4, text: "我方5" },
];
// 活动内容
let monIndex3= reactive([0]);
const changeValue3 = (item, value) => {
console.log("活动内容", item, value);
monIndex2 = value;
};
const guestList3 = [
{ value: 0, text: "活动内容1" },
{ value: 1, text: "活动内容2" },
{ value: 2, text: "活动内容3" },
{ value: 3, text: "活动内容4" },
{ value: 4, text: "活动内容5" },
];
// 业务招待
let expandFlag2 = ref(true);
let handleExpand2 = () => {
expandFlag2.value = !expandFlag2.value;
}
// 技术交流
let expandFlag3 = ref(true);
let handleExpand3 = () => {
expandFlag3.value = !expandFlag3.value;
}
// 表单ref
const formRef = ref(null);
// 表单数据
const formData = ref({
guestName1: '',
guestName2: '',
activeCon:'',
activeTxt: ''
});
// 验证规则
const rules = {
activeCon: {
rules: [
{ required: true, errorMessage: '请选择活动内容' }
]
}
};
// 删除
let handleDelete = ()=>{
}
// 保存/修改
const submitForm = async () => {
try {
// 验证表单
await formRef.value.validate();
// 验证通过后的操作
uni.showToast({
title: '验证通过',
icon: 'success'
});
console.log('表单数据:', formData.value);
// 这里可以添加提交到服务器的代码
} catch (err) {
console.log('表单验证失败:', err);
}
};
</script>
<style scoped>
.white-bg {
width: 690rpx;
margin: 0;
border-radius: 8px 8px 0 0;
}
.white-bg.white-bg-2 {
margin-bottom: 20rpx;
}
.white-bg.white-bg-3 {
border-radius:0
}
.white-bg .w-b-title {
color: #3384DF;
font-size: 38rpx;
}
.form-con{
padding:30rpx 0 0;
}
:deep(.form-con .uni-forms-item){
margin-bottom:22px !important;
}
</style>

185
src/pages/business/CRM/vistorCheckin.vue Normal file
View File

@@ -0,0 +1,185 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<customHeader ref="customHeaderRef" :title="'签到打卡'" :leftFlag="true" :rightFlag="false"></customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height"></view>
<!-- 正文内容 -->
<view class="white-bg">
<image src="../../../static/images/business/btn-qd.png" class="btn-image" @click="handleCheckIn" />
<image src="../../../static/images/business/btn-dk.png" class="btn-image" @click="handleClockIn" />
<view class="check-desc">
业务人员可通过<text class="font-orange">签到</text>或<text class="font-blue">打卡</text>进行行为记录，该时间会和走访报告中的时间进行关联，便于查看。
</view>
</view>
</view>
<!-- 打卡遮罩层 -->
<view class="check-con" v-if="checkFlag">
<view class="check-in">
<view class="check-tip">打卡</view>
<view class="check-title">确定要在此处打卡吗？</view>
<view class="check-location">
<uni-icons type="location-filled" size="30" color="#0395E0"></uni-icons> 亚洲金融大厦
</view>
<view class="check-address">北京市朝阳区天辰东路1号院</view>
<view class="check-footer">
<button class="btn-default" type="default" @click="handleCancel" size="mini">取 消</button>
<button class="btn-primary" type="primary" @click="handleSubmit" size="mini">确 定</button>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
let checkFlag = ref(false);
// 签到
let handleCheckIn = () => {
console.log("签到")
checkFlag.value = true;
}
// 打卡
let handleClockIn = () => {
console.log("打卡")
checkFlag.value = true;
}
// 取消
let handleCancel = () => {
checkFlag.value = false;
}
// 确定
let handleSubmit = () => {
checkFlag.value = false;
}
</script>
<style scoped>
.white-bg {
width: 650rpx;
margin: 0;
border-radius: 8px 8px 0 0;
padding: 50rpx;
/* #ifdef APP-PLUS */
height: calc(100vh - 125px);
/* #endif */
/* #ifndef APP-PLUS */
height: calc(100vh - 98px);
/* #endif */
}
.btn-image {
width: 340rpx;
height: 340rpx;
margin: 30rpx auto 60rpx;
display: block;
}
.check-desc {
background-color: #F5F5F5;
padding: 40rpx 50rpx;
font-size: 28rpx;
border-radius: 10px;
margin-top: 100rpx;
}
.check-desc .font-orange {
color: #F5813A;
font-size: 32rpx;
font-weight: bold;
}
.check-desc .font-blue {
color: #2CBAEF;
font-size: 32rpx;
font-weight: bold;
}
/* 弹窗处理 */
.check-con {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
/* 遮罩层内容样式 */
.check-in {
background-color: #fff;
padding: 40rpx 30rpx 60rpx;
border-radius: 10px;
/* width: 620rpx; */
width: 560rpx;
position: absolute;
top: 48%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.check-in .check-tip {
font-weight: bold;
}
.check-in .check-title {
font-size: 32rpx;
padding: 20rpx 0;
}
.check-in .check-location{
color:#0395E0;
font-size:42rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
margin:30rpx 0;
}
.check-in .check-location .uniui-location-filled{
font-weight: normal;
margin-right: 20rpx;
}
.check-in .check-address{
color:#919191;
font-size: 32rpx;
margin-bottom:80rpx;
}
.check-in .check-footer {
display: flex;
}
.check-in .check-footer .btn-default,
.check-in .check-footer .btn-primary {
background-color: #fff;
border: 1px solid #05A3F4;
color: #05A3F4;
border-radius: 25px;
padding: 0rpx 80rpx;
font-size: 34rpx;
/* margin-left: 0;
margin-right: 20rpx; */
}
.check-in .check-footer .btn-primary {
background-color: #05A3F4;
border: 1px solid #05A3F4;
color: #fff;
/* padding: 0rpx 60rpx; */
}
</style>

142
src/pages/business/CRM/weekPlanUpdate.vue Normal file
View File

@@ -0,0 +1,142 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<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"
color="#B7D2FF"></uni-icons>保存
</view>
</template>
</customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height"></view>
<!-- 正文内容 -->
<view class="week-plan-title">
<view>姓名：赵欣鸣</view>
<view>2025-09 第 3 周</view>
</view>
<view class="white-bg white-bg-2">
<view class="w-b-title">2025-09-21 星期一
<text>
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
</text>
</view>
<view class="form-con">
<uni-forms ref="formRef" :model="formData" :rules="rules" label-width="100px" label-position="top">
<uni-forms-item label="工作类型" name="workType">
<view class="form-picker">
<picker @change="changeValue" :value="workIndex" :range="workList">
<view class="flex">
{{workList[workIndex]}}
<uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
</view>
</picker>
</view>
</uni-forms-item>
<uni-forms-item label="内容" name="content">
<uni-easyinput type="textarea" autoHeight v-model="formData.content" placeholder="请输入" class="form-texarea" />
</uni-forms-item>
</uni-forms>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
import multipleSelect from '@/components/multipleSelect.vue'
// 工作类型
let workIndex= ref(0);
const workList = ["外出","出差","公司","办事处"];
// 表单ref
const formRef = ref(null);
// 表单数据
const formData = ref({
workType:'',
content: ''
});
// 验证规则
const rules = {
workType: {
rules: [
{ required: true, errorMessage: '请选择工作类型' }
]
}
};
// 选择工作类型
const changeValue = (e) => {
console.log("工作类型", e.detail.value);
workIndex = e.detail.value;
formData.value.workType = workList[workIndex]
};
// 保存
const submitForm = async () => {
try {
// 验证表单
await formRef.value.validate();
// 验证通过后的操作
uni.showToast({
title: '验证通过',
icon: 'success'
});
console.log('表单数据:', formData.value);
// 这里可以添加提交到服务器的代码
} catch (err) {
console.log('表单验证失败:', err);
}
};
</script>
<style scoped>
.week-plan-title{
color:#fff;
padding: 0 30rpx 30rpx;
display: flex;
justify-content: space-between;
}
.white-bg {
width: 690rpx;
margin: 0;
border-radius: 8px 8px 0 0;
}
.white-bg.white-bg-2 {
margin-bottom: 20rpx;
}
.white-bg.white-bg-3 {
border-radius:0
}
.white-bg .w-b-title {
color: #3384DF;
font-size: 38rpx;
}
.form-con{
padding:30rpx 0 0;
}
:deep(.form-con .uni-forms-item){
margin-bottom:22px !important;
}
</style>

181
src/pages/business/business.vue Normal file
View File

@@ -0,0 +1,181 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<customHeader ref="customHeaderRef" :title="'业务中心'"
:leftFlag="false" :rightFlag="false"
></customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height"></view>
<!-- 搜索 -->
<view class="search">
<uni-search-bar class="custom-search" radius="28"
placeholder="请输入您想查询的内容或服务"
clearButton="auto" cancelButton="none"
bgColor="#6FA2F8" textColor="#ffffff"
@confirm="handleSearch"
/>
</view>
<!-- 下拉刷新 -->
<mescroll-uni ref="mescrollRef" @init="mescrollInit"
:down="downOption" @down="downCallback"
:fixed="false" class="scroll-h"
>
<!-- 首页日常服务 -->
<view class="white-bg">
<view class="w-b-title">
首页日常服务
<view type="primary" @click="handleEdit" class="btn-edit">编 辑</view>
</view>
</view>
<!-- 企业日常 -->
<view class="white-bg">
<view class="w-b-title" @click="handleExpand">企业日常
<text>{{expandFlag?'展开':'收起'}}<i :class="{iconfont:true,'icon-up':!expandFlag,'icon-down':expandFlag}"></i></text>
</view>
<view class="logo-list" v-if="!expandFlag">
<view v-for="(item,index) in list1" class="l-l-item" :key="index">
<img :src="item.imgSrc" />
<text class="font-gray">{{ item.name }}</text>
</view>
</view>
</view>
<!-- CRM系统 -->
<view class="white-bg">
<view class="w-b-title" @click="handleExpand2">CRM系统
<text>{{expandFlag2?'展开':'收起'}}<i :class="{iconfont:true,'icon-up':!expandFlag2,'icon-down':expandFlag2}"></i></text>
</view>
<view class="logo-list" v-if="!expandFlag2">
<view v-for="(item,index) in list2" class="l-l-item" :key="index" @click="handleJump(item.url)">
<uni-badge :text="item.badgeCount" size="small"></uni-badge>
<img :src="item.imgSrc" />
<text class="font-gray">{{ item.name }}</text>
</view>
</view>
</view>
<!-- 供应链采纳 -->
<view class="white-bg">
<view class="w-b-title">供应链采纳
<text>展开<i :class="{iconfont:true,'icon-down':true}"></i></text>
</view>
</view>
<!-- PLM系统 -->
<view class="white-bg">
<view class="w-b-title">PLM系统
<text>展开<i :class="{iconfont:true,'icon-down':true}"></i></text>
</view>
</view>
<!-- 底部加高度来避免tabbar遮挡 -->
<view class="bottom-height"></view>
</mescroll-uni>
</view>
</view>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import { getNavBarPaddingTop} from '@/utils/system.js'
import { businessDaily,businessCRMList } from '@/api/business.js';
// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
navBarPaddingTop.value = getNavBarPaddingTop()*2;
})
// 查询搜索跳转
let handleSearch = ()=>{
}
// 下拉刷新
const mescrollRef = ref(null);
const mescrollInit = (mescroll) => {
mescrollRef.value = mescroll;
};
const downOption = ref({
auto: true,
textInOffset: '下拉刷新',
textOutOffset: '释放更新',
textLoading: '刷新中...'
});
// 下拉刷新
const downCallback = async (mescroll) => {
try {
setTimeout(async ()=>{
// mescroll.resetUpScroll();
},500);
} catch (error) {
mescroll.endErr();
} finally {
setTimeout(async ()=>{
mescroll.endSuccess();
},500);
}
}
// 日常服务编辑
let handleEdit=()=>{
}
// 图标查询处理
// 1.企业日常
let list1 = ref([])
let getBusinessDailyList= async ()=>{
let busRes = await businessDaily({});
list1.value = busRes.list || [];
}
getBusinessDailyList();
// 企业日常-右侧展开
let expandFlag=ref(false);
let handleExpand = ()=>{
expandFlag.value = !expandFlag.value;
}
// 2.CRM系统
let list2 = ref([])
let getBusinessCRMList= async ()=>{
let busRes = await businessCRMList({});
list2.value = busRes.list || [];
}
getBusinessCRMList();
// 企业日常-右侧展开
let expandFlag2=ref(false);
let handleExpand2 = ()=>{
expandFlag2.value = !expandFlag2.value;
}
// 跳转
let handleJump=(url)=>{
console.log(url)
if(url){
uni.navigateTo({ url })
}
}
</script>
<style scope>
.scroll-h{
/* #ifdef APP-PLUS */
height: calc(100vh - 120px) !important;
/* #endif */
/* #ifndef APP-PLUS */
height: calc(100vh - 140px) !important;
/* #endif */
}
:deep(.mescroll-upwarp){
display:none
}
</style>

430
src/pages/home/home.vue Normal file
View File

@@ -0,0 +1,430 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 下拉刷新 -->
<mescroll-uni ref="mescrollRef" @init="mescrollInit"
:down="downOption" @down="downCallback"
:fixed="false" class="scroll-h" :style="{ paddingTop: navBarPaddingTop + 'px' }"
>
<!-- #ifdef H5 -->
<view style="height:50rpx"></view>
<!-- #endif -->
<!-- 搜索 -->
<view class="search search-sao" >
<uni-search-bar class="custom-search" radius="28"
placeholder="请输入您想查询的内容或服务"
clearButton="auto" cancelButton="none"
bgColor="#6FA2F8" textColor="#ffffff"
@confirm="handleSearch"
/>
<uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phonesaoyisao" size="20"></uni-icons>
</view>
<!-- 待办内容 -->
<view class="backlog-bg">
<view class="backlog-b-item">
<view class="font-number">{{ backBlogObj.count1 }}</view>
<view class="font-title">待办</view>
</view>
<view class="backlog-b-item">
<view class="font-number">{{ backBlogObj.count2 }}</view>
<view class="font-title">待审查</view>
</view>
<view class="backlog-b-item">
<view class="font-number">{{ backBlogObj.count3 }}</view>
<view class="font-title">待巡检</view>
</view>
<view class="backlog-b-item">
<view class="font-number">{{ backBlogObj.count4 }}</view>
<view class="font-title">待发货</view>
</view>
</view>
<!-- 跑马灯滚动 -->
<view class="notice-bg">
<img :src="'static/images/icon-notice@2x.png'" class="notice-icon" />
<view class="notice-list">
<!-- :interval="4000" -->
<swiper class="swiper-con"
:vertical="true"
:autoplay="true"
:duration="500"
:circular="true"
:disable-touch="true"
:display-multiple-items="1"
>
<swiper-item v-for="(item, index) in extendedList" :key="index" >
<view class="swiper-item">
{{ item }}
</view>
</swiper-item>
</swiper>
</view>
</view>
<!-- 日程提醒 -->
<view class="white-bg mar-top" v-if="stepList.length>0">
<view class="w-b-title">日程提醒
<view class="yellow-bg">
<i :class="{iconfont:true,'icon-phoneshizhong':true}"></i>
<view class="text-black">{{ weekStr }}</view>
</view>
</view>
<view class="section-line">
<customSteps :steps="stepList" :modelValue="stepList"></customSteps>
</view>
</view>
<!-- 销售任务完成情况 -->
<view class="white-bg mar-top">
<view class="w-b-title">销售任务完成情况
<view class="yellow-bg">
<picker @change="bindPickerChange" :value="activeIndex" :range="salesList" @click="clickPicker" @cancel="bindPickerCancel">
<view class="uni-input">{{salesList[activeIndex]}}</view>
</picker>
<i :class="{iconfont:true,'icon-down':salesFlag,'icon-up':!salesFlag}" class="picker-icon"></i>
</view>
</view>
<view class="progress-bg">
<progress :percent="percentNum" stroke-width="10" activeColor="#41E1B1" backgroundColor="#F0F0F0" />
<view class="percent" :style="{left:percentNum+'%'}">
<view class="percent-num">{{ percentNum }}%</view>
<i class="iconfont icon-down"></i>
</view>
<view class="percent-con">
<view class="p-first">
<view>实际销售额</view>
<view class="font-money">{{totalSales}}</view>
</view>
<view class="p-last">
<view>目标销售额</view>
<view class="font-money">{{ targetSales }}</view>
</view>
</view>
</view>
</view>
<!-- 常用服务 -->
<view class="white-bg">
<view class="w-b-title">常用服务</view>
<view class="logo-list">
<view v-for="(item,index) in commonServiceList" class="l-l-item" :key="index">
<img :src="item.imgSrc" />
<text class="font-gray">{{ item.name }}</text>
</view>
<!-- <view class="l-l-item" @click="handleAddCommonSercice">
<img :src="'static/images/business/icon-add.png'">
<text class="font-gray">添加</text>
</view> -->
</view>
</view>
<!-- 新闻公告 -->
<view class="white-bg">
<view class="w-b-title">新闻公告
<text>更多新闻</text>
</view>
<view class="news-list">
<view v-for="(item,index) in newsList" class="news-item" :key="index">
<view class="n-i-title">{{ item.name }}
<view class="n-i-date">{{ formatDateStr(item.date) }}</view>
</view>
<img :src="item.imgSrc" v-if="item.imgSrc" />
</view>
</view>
</view>
<!-- 底部加高度来避免tabbar遮挡 -->
<view class="bottom-height"></view>
</mescroll-uni>
</view>
</view>
</template>
<script setup>
import { ref,onMounted,computed } from 'vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import customSteps from '@/components/customSteps.vue'
import { getNavBarPaddingTop} from '@/utils/system.js'
import { backBlogCount,swiperList,stepData,salesTask,commonServices,newsQueryList } from '@/api/home.js';
import { getWeekStr,formatTimestamp } from '@/utils/datetime.js'
import { formatMoney } from '@/utils/formatter.js'
// 下拉刷新
const mescrollRef = ref(null);
const mescrollInit = (mescroll) => {
mescrollRef.value = mescroll;
};
const downOption = ref({
auto: true,
textInOffset: '下拉刷新',
textOutOffset: '释放更新',
textLoading: '刷新中...'
});
// 下拉刷新
const downCallback = async (mescroll) => {
try {
setTimeout(async ()=>{
// mescroll.resetUpScroll();
},500);
} catch (error) {
mescroll.endErr();
} finally {
setTimeout(async ()=>{
mescroll.endSuccess();
},500);
}
}
// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
navBarPaddingTop.value = getNavBarPaddingTop()*2;
})
// 查询搜索跳转
let handleSearch = ()=>{
}
// tabar 增加消息数量
try {
wx.setTabBarBadge({
index: 2, // TabBar的索引，从0开始计数
text: '3' // 徽章的文本
});
} catch (error) {
console.error('设置TabBar Badge失败:', error);
}
let backBlogObj = ref({})
// 获取待办数据
let getBackBlogCount = async () =>{
backBlogObj.value = await backBlogCount();
}
getBackBlogCount();
// 跑马灯处理
let extendedList = ref([]);// ;
const getSwiperList = async () => {
extendedList.value = await swiperList();
}
getSwiperList();
// 日程提醒
let weekStr = ref(null) //'2025-09-19 星期三'
let stepList = ref([]);
const getStepData = async ()=>{
let res = await stepData({});
weekStr.value = getWeekStr(res.date);
stepList.value = res.list;
}
getStepData();
// 销售任务完成情况
let salesList = ref([]);
let salesFlag = ref(true);
let activeIndex = ref(0);
const bindPickerChange = (e)=>{
// console.log('picker发送选择改变，携带值为', e.detail.value)
activeIndex.value = e.detail.value;
salesFlag.value = true;
}
const bindPickerCancel= (e)=>{
salesFlag.value = true;
}
const clickPicker= (e)=>{
salesFlag.value = false;
}
let percentNum = ref(0);
let totalSales = ref(0)
let targetSales = ref(0)
const getSalesTask = async ()=>{
let res = await salesTask({});
salesList.value = res.salesList;
percentNum.value = res.percentNum;
totalSales.value = formatMoney(res.totalSales);
targetSales.value = formatMoney(res.targetSales);
}
getSalesTask();
// 常用服务
let commonServiceList = ref([])
const getCommonServices = async ()=>{
let res = await commonServices({});
commonServiceList.value = res.list
}
getCommonServices();
// 添加常用服务
const handleAddCommonSercice = ()=>{
}
// 新闻公告
let newsList = ref([])
const getNewsList = async()=>{
let res = await newsQueryList({});
newsList.value = res.list;
}
getNewsList();
const formatDateStr =(times)=>{
return formatTimestamp(times)
}
</script>
<style scope>
.scroll-h{
/* #ifdef APP-PLUS */
height:calc(100vh - 30px) !important;
/* #endif */
/* #ifndef APP-PLUS */
height: calc(100vh - 30px) !important;
/* #endif */
}
:deep(.mescroll-upwarp){
display:none
}
.search-sao{
display: flex;
padding-top:10rpx;
}
.search-sao .custom-search{
width:612rpx;
}
.search-sao :deep(.custom-search.uni-searchbar){
padding-bottom: 15rpx !important;
}
.search-sao .icon-phonesaoyisao{
margin:15rpx 30rpx 10rpx auto;
}
.backlog-bg{
background:url('@/static/images/bg-main@2x.png') no-repeat;
background-size:730rpx 205rpx;
/* width:730rpx; */
width:690rpx;
height:205rpx;
margin:0 auto;
display: flex;
padding:0 20rpx;
}
.backlog-b-item{
width:25%;
color:#579FF9;
border-right:1px solid #EAEAEA;
height:100rpx;
margin-top:40rpx;
}
.backlog-b-item .font-number{
font-size: 60rpx;
font-weight: bold;
text-align: center;
}
.backlog-b-item .font-title{
font-size:28rpx;
text-align: center;
}
.notice-bg{
background:url('@/static/images/bg-notice@2x.png') no-repeat;
background-size:750rpx 90rpx;
width:690rpx;
height: 90rpx;
margin-top:10rpx;
padding:0 30rpx;
display: flex;
align-items: center;
}
.notice-bg .notice-icon{
width:46rpx;
height:40rpx;
}
.notice-list{
width:100%;
position: relative;
height: 90rpx;
overflow: hidden;
}
.notice-list .swiper-con{
width:640rpx;
}
.notice-list .swiper-con .swiper-item {
height: 90rpx;
line-height: 90rpx;
padding: 0 20rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color:#fff;
font-size:30rpx;
}
.progress-bg{
position: relative;
width:528rpx;
margin:120rpx auto 0;
}
.progress-bg :deep(.uni-progress .uni-progress-bar){
border-radius: 5px;
}
.progress-bg :deep(.uni-progress .uni-progress-inner-bar){
border-radius: 5px 0 0 5px;
}
.progress-bg .percent{
position: absolute;
top:0;
color:#FF687A;
font-size:60rpx;
font-weight: bold;
}
.progress-bg .percent .icon-down{
position: absolute;
bottom:0rpx;
left:-20rpx;
color:#FF687A;
font-size:40rpx;
}
.progress-bg .percent .percent-num{
position: absolute;
left:-60rpx;
bottom:30rpx;
}
.progress-bg .percent-con{
display: flex;
width:528rpx;
color:#333;
font-size:28rpx;
margin:20rpx 0 10rpx;
}
.progress-bg .percent-con .p-last{
margin-left: auto;
text-align: right;
}
.progress-bg .percent-con .font-money{
font-weight: bold;
margin-top:10rpx;
}
.white-bg .logo-list{
gap:50rpx;
padding:0 20rpx;
/* margin-bottom: -50rpx; */
}
.white-bg .logo-list .l-l-item{
width:160rpx;
margin-bottom:0rpx;
}
.white-bg .logo-list .l-l-item img{
width:110rpx;
height:110rpx;
}
</style>

86
src/pages/loading/loading.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<view>
<view class="container" :style="{ height: `100vh` }">
<view class="bg"></view>
<view class="version">Version {{ version }}</view>
<view class="bottom-bg"></view>
</view>
</view>
</template>
<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore } from '@/stores/user';
const userStore = useUserStore()
const version="1.0.0"
onLoad((opt) => {
console.log("onLoad");
// 检查是否已登录 并 获取用户信息
if (userStore.isLogin) {
// userStore.getUser()
// TODO 未登录会在拦截器中处理跳转登录页， 请在 xxx 配置登录页路径
// #ifdef H5
window.setTimeout(()=>{
uni.reLaunch({
url: '/pages/home/home',
});
},1000)
// #endif
// #ifdef APP-PLUS
uni.reLaunch({
url: '/pages/home/home',
});
// #endif
}else{
// #ifdef H5
window.setTimeout(()=>{
uni.reLaunch({
url: '/pages/login/login',
});
},1000)
// #endif
// #ifdef APP-PLUS
uni.reLaunch({
url: '/pages/login/login',
});
// #endif
}
});
</script>
<style>
.container {
background:#307AF5 !important;
height:100vh !important;
position: relative;
}
.container .bg{
background:url('@/static/images/loading-logo.png') no-repeat;
background-size:700rpx 800rpx;
width: 700rpx;
height: 800rpx;
margin:0 auto;
}
.container .version{
color:#A8D4FF;
font-size:32rpx;
text-align: center;
margin-top:35rpx;
}
.container .bottom-bg{
background:url('@/static/images/loading-txt.png') no-repeat;
background-size:656rpx 123rpx;
width: 656rpx;
height: 123rpx;
position: absolute;
bottom:48rpx;
left:50%;
margin-left:-328rpx;
}
</style>

413
src/pages/login/login.vue Normal file
View File

@@ -0,0 +1,413 @@
<template>
<view class="container">
<view class="login-con">
<view :style="{height: navBarPaddingTop + 'px'}"></view>
<image mode="aspectFit" src="../../static/images/pic-logo.png" class="login-logo"></image>
<view class="login-title">欢迎来到718友晟</view>
<view class="login-tab">
<customTabs v-model="activeTab" :tabs="tabList" :modelValue="activeTab">
<!-- 验证码登录 -->
<view v-show="activeTab === 0">
<view class="login-form">
<uni-forms ref="form" :model="formData" :rules="rules" label-position="top">
<uni-forms-item label="手机号" required name="phone">
<view class="code-con">
<uni-icons custom-prefix="iconfont" color="#239FDF" type="icon-phone" size="20"></uni-icons>
<uni-easyinput type="number" :inputBorder="false"
v-model="formData.phone" placeholder="请输入手机号"
maxlength="11"
/>
</view>
</uni-forms-item>
<uni-forms-item label="验证码" required name="verifyCode">
<view class="code-con">
<uni-icons custom-prefix="iconfont" color="#239FDF" type="icon-code" size="20"></uni-icons>
<uni-easyinput type="number" :inputBorder="false"
v-model="formData.verifyCode" placeholder="请输入验证码"
maxlength="6" style="width:190rpx"
/>
<button type="primary" plain @click="getCode" size="mini"
:loading="codeLoading" :disabled="codeDisabled" class="btn-plain"
>{{codeText}}</button>
</view>
</uni-forms-item>
</uni-forms>
</view>
</view>
<!-- 账号登录 -->
<view v-show="activeTab === 1">
<view class="login-form">
<uni-forms ref="form2" :model="formData2" :rules="rules2" label-position="top">
<uni-forms-item label="用户名" required name="username">
<view class="code-con">
<uni-easyinput prefixIcon="person" :inputBorder="false"
v-model="formData2.username" placeholder="请输入用户名"
/>
</view>
</uni-forms-item>
<uni-forms-item label="密码" required name="password" class="password">
<view class="code-con">
<uni-easyinput prefixIcon="locked" type="password" :inputBorder="false"
v-model="formData2.password" placeholder="请输入登录密码"
/>
</view>
</uni-forms-item>
</uni-forms>
</view>
</view>
</customTabs>
<view class="agreen-con">
<uni-icons v-if="agreeChecked" type="checkbox-filled" color="#02C74C" size="25" @click="agreeCheck"></uni-icons>
<uni-icons v-else type="circle" color="#bfbfbf" size="25" @click="agreeCheck"></uni-icons>
<view class="agreen-xy">
我已阅读并接受<text @click="agreeVisable(1)">《服务条款》</text>和<text @click="agreeVisable(2)">《隐私保护协议》</text>
</view>
</view>
<button type="primary" class="btn-submit" @click="submitForm" :loading="btnLoading" :disabled="btnLoading">登 录</button>
</view>
</view>
<view class="login-bottom"></view>
</view>
</template>
<script setup>
import { ref,onMounted } from 'vue';
import customTabs from '@/components/customTabs.vue';
import {isPhoneNumber} from '@/utils/validate';
import {showAlert} from '@/utils/message';
import { getCaptchaImage,getVerifyCode,login } from '@/api/auth';
import cache from '@/utils/cache';
import { AGREEWELCOME_KEY } from '@/enums/cacheEnums';
import { getNavBarPaddingTop} from '@/utils/system.js'
import { useUserStore } from '@/stores/user';
const userStore = useUserStore()
// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
navBarPaddingTop.value = getNavBarPaddingTop();
})
const activeTab = ref(1);//默认账号登录
const tabList = ['验证码登录', '账号登录'];
// 验证码登录
const form = ref(null);
const formData = ref({
phone: '15112345600',
verifyCode: '123456',
loginType:0
});
const rules = {
phone: {
rules: [
{ required: true, errorMessage: '请输入手机号' },
{
validateFunction:function(rule,value,data,callback){
if (!isPhoneNumber(value)) {
callback('请正确输入手机号')
}
return true
}
}
]
},
verifyCode: {
rules: [
{ required: true, errorMessage: '请输入验证码' },
{ pattern: /^[0-9]{6}$/, errorMessage: '验证码必须是6位数字' }
]
}
};
let codeLoading = ref(false);
let codeDisabled = ref(false);
let codeText = ref('发送验证码');
let countdown = ref(60);
let timer = ref(null);
let backCode=ref(null)
// 验证特定字段
const validateField = async (fieldName) => {
try {
await form.value.validateField(fieldName);
return true;
} catch (e) {
return false;
}
};
// 发送验证码
let getCode=async()=> {
// 1.验证手机号
const isValid = await validateField('phone');
if (isValid) {
codeLoading.value = true;
codeDisabled.value = true;
// 2.调用获取短信验证码接口
let res = await getVerifyCode({phone:formData.value.phone})
backCode.value = res.code;
codeText.value = `发送中...`;
// 3.开始倒计时
startCountdown();
}
// showAlert("验证码已发送！",'提示',false);
}
let startCountdown=()=>{
if (timer.value) return;
timer.value = setInterval(() => {
if (countdown.value > 0) {
countdown.value--;
codeText.value = `${countdown.value} 秒`;
} else {
resetCountdown();
}
codeLoading.value = false;
}, 1000);
}
let resetCountdown =()=>{
clearInterval(timer.value);
timer.value = null;
countdown.value = 60;
codeText.value = '发送验证码';
codeDisabled.value = false;
}
// 账号登录
const form2 = ref(null);
const formData2 = ref({
username: 'admin',
password: '123456',
loginType:1
});
const rules2 = {
username: {
rules: [
{ required: true, errorMessage: '请输入用户名' },
{ minLength: 3, maxLength: 10, errorMessage: '用户名长度在3到10个字符之间' }
]
},
password: {
rules: [
{ required: true, errorMessage: '请输入密码' },
{ pattern: /^[a-zA-Z0-9]{6,12}$/, errorMessage: '密码必须是6-12位字母或数字' }
]
}
};
// 协议
let agreeChecked = ref(true);
// 勾选同意协议 存入缓存
const agreeCheck = ()=>{
agreeChecked.value = !agreeChecked.value;
if (agreeChecked.value) {
cache.set(AGREEWELCOME_KEY, agreeChecked.value)
} else {
cache.remove(AGREEWELCOME_KEY);
}
}
const btnLoading=ref(false)
// 登录提交
const submitForm = () => {
btnLoading.value = true;
console.log("submitForm=>activeTab=>",activeTab.value)
// 手机获取验证码登录
if(activeTab.value===0){
form.value.validate().then(async param => {
// 2.调用登录接口
param.loginType = activeTab.value; console.log('表单数据00:', param);
let res = await login(param)
// 3.登录后存储token
userStore.login(res);
uni.switchTab({ url: '/pages/home/home' })
btnLoading.value = false;
}).catch(err => {
console.log('表单错误00:', err);
btnLoading.value = false;
});
}else if(activeTab.value===1){
// 用户名和密码登录
form2.value.validate().then(async param => {
param.loginType = activeTab.value; console.log('表单数据11:', formData2.value);
let res = await login(param);
userStore.login(res);
uni.switchTab({ url: '/pages/home/home' })
btnLoading.value = false;
}).catch(err => {
console.log('表单错误11:', err);
btnLoading.value = false;
});
}
};
</script>
<style scoped>
.container {
height: 100vh;
}
.login-con {
position: relative;
background: url('@/static/images/login-bg.png') no-repeat;
background-size: 750rpx 633rpx;
width: 750rpx;
height: 633rpx;
margin:0 auto;
}
.login-con .login-logo {
width: 109rpx;
height: 91rpx;
margin: 84rpx 0 0 70rpx;
}
.login-con .login-title {
font-size: 56rpx;
color: #fff;
font-weight: bold;
margin: 0 0 35rpx 70rpx;
}
:deep(.login-tab .tabs-header) {
background: none !important;
border-bottom: none !important;
width: 438rpx;
margin: 0 auto;
}
:deep(.login-tab .tab-item) {
color: rgba(255, 255, 255, 0.5);
font-size: 36rpx;
font-weight: bold;
}
:deep(.tab-item.active) {
color: #fff;
}
:deep(.tab-item.active::after) {
background-color: #fff;
width: 100rpx;
height: 8rpx;
/* display: none; */
}
.login-form {
background: #fff;
border-radius: 30rpx;
padding: 30rpx 50rpx 15rpx;
width:510rpx;
margin: 20rpx auto 0;
box-shadow: 0rpx -1rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
}
.code-con{
padding:0 0 10rpx;
margin:0 auto;
display: flex;
align-items: center;
color:#919191;
border-bottom: 1px solid #E7E7E7;
}
:deep(.uni-forms-item__label){
color:#239FDF;
font-weight: bold;
font-size:28rpx;
padding:0 !important;
}
:deep(.uni-easyinput__content){
color:#333;
font-weight: bold;
font-size:32rpx;
}
:deep(.uni-easyinput__content) .uni-icons{
font-weight: normal;
font-size:24rpx;
color:#239FDF !important;
}
:deep(.uni-input-placeholder){
background:none;
font-weight:normal;
color:#BFBFBF;
font-size:28rpx;
}
:deep(.uni-forms-item__error){
padding-left:60rpx;
}
:deep(.uni-forms-item .is-required){
display: none;
}
/* 使用深度选择器 */
:deep(.uni-easyinput__content .uni-icons.uniui-clear) {
color: #BFBFBF !important;
font-weight: normal !important;
font-size:40rpx !important;
}
:deep(.uni-easyinput__content .uni-icons.uniui-clear::before){
content: "\e66c" !important;
}
.agreen-con{
margin-top:40rpx;
color:#919191;
font-size:26rpx;
display: flex;
align-items: center;
justify-content: center;
}
.agreen-con .agreen-xy{
margin-left:10rpx;
}
.agreen-con text{
color:#05A3F4;
}
.btn-plain{
color: #05A3F4 !important;
border: 1px solid #05A3F4 !important;
/* padding:0 30rpx; */
font-size:24rpx;
/* line-height: 2.1; */
/* width:230rpx; */
}
.btn-submit{
width:490rpx;
height:88rpx;
line-height: 88rpx;
background-color:#05A3F4 !important;
margin:80rpx auto 0;
font-size:36rpx;
border-radius: 44rpx;
}
.btn-submit::after{
border:none;
}
.login-bottom{
position: absolute;
background: url('../../static/images/login-txt.png');
background-size:654rpx 121rpx;
width:654rpx;
height: 121rpx;
bottom:30rpx;
left:50%;
margin-left:-327rpx;
}
</style>

234
src/pages/notice/notice.vue Normal file
View File

@@ -0,0 +1,234 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 头部 -->
<customHeader ref="customHeaderRef" :title="'消息'" :leftFlag="false" :rightFlag="true">
<template #right>
<view class="head-right" @click="handleReady">
<img :src="'static/images/notice/icon-clean@2x.png'" />清除未读
</view>
</template>
</customHeader>
<!-- 高度来避免头部遮挡 -->
<view class="top-height"></view>
<!-- 搜索 -->
<view class="search">
<uni-search-bar class="custom-search" radius="28" placeholder="请输入您想查询的内容或服务" clearButton="auto"
cancelButton="none" bgColor="#6FA2F8" textColor="#ffffff" @confirm="handleSearch" />
</view>
<!-- 消息列表 -->
<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
:up="upOption" :down="downOption" :fixed="false" class="scroll-h" :class="{'loading-scroll':cssFlag}">
<view class="white-bg" v-if="list.length">
<view class="notice-list" v-for="(item, index) in list" :key="index">
<img :src="item.imgSrc" />
<view class="notice-item">
<view :class="{ 'notice-title': true, bold: item.isReady }">{{ item.title }}</view>
<view class="notice-date">{{ formatDateStr(item.date) }}</view>
<view class="dot" v-if="item.isReady"></view>
</view>
</view>
</view>
</mescroll-uni>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
import { getNavBarPaddingTop } from '@/utils/system.js'
import { noticeList } from '@/api/notice.js'
import { formatTimestamp } from '@/utils/datetime.js'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
navBarPaddingTop.value = getNavBarPaddingTop() * 2;
})
// 查询搜索跳转
let handleSearch = () => {
}
const formatDateStr = (times) => {
return formatTimestamp(times)
}
// 清除未读
const handleReady = () => {
list.value.forEach(item => {
item.isReady = false;
})
}
// 查询通知列表
let list = ref([]);
const mescrollRef = ref(null);
const upOption = ref({
page: { num: 0, size: 10 },
noMoreSize: 5,
empty: { tip: '~ 空空如也 ~' },
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 getNoticeList(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 getNoticeList(mescroll.num, mescroll.size);
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 getNoticeList = (pageIndex, pageSize) => {
return new Promise(async (resolve) => {
let param = {
pageIndex,
pageSize
}
let res = await noticeList(param);
resolve({
list: res.list,
total: res.totalCount
});
});
}
</script>
<style scoped>
.all-body{
position: absolute;
/* #ifdef APP-PLUS */
top:150rpx;
height: calc(100vh - 75px);
/* #endif */
/* #ifndef APP-PLUS */
top:120rpx;
height: calc(100vh - 64px);
/* #endif */
overflow: hidden;
}
:deep(.mescroll-downwarp .downwarp-progress){
border-color:#fff !important;
}
:deep(.mescroll-downwarp .downwarp-tip){
color:#fff;
}
.white-bg {
width: 750rpx;
padding: 40rpx 0 ;
margin-bottom:0;
border-radius: 8px 8px 0 0;
}
.scroll-h{
/* #ifdef APP-PLUS */
height: calc(100vh - 120px);
/* #endif */
/* #ifndef APP-PLUS */
height: calc(100vh - 140px);
/* #endif */
}
.white-bg .notice-list {
display: flex;
padding: 0 30rpx 0 40rpx;
margin-bottom: 30rpx;
}
.white-bg .notice-list img {
width: 80rpx;
height: 80rpx;
margin-right: 30rpx;
}
.white-bg .notice-list .notice-item {
border-bottom: 1px solid #E7E7E7;
width: 570rpx;
padding-bottom: 30rpx;
position: relative;
}
.white-bg .notice-list:last-child .notice-item {
border-bottom: none;
padding-bottom: 0;
}
.white-bg .notice-list .notice-title {
font-size: 32rpx;
width: 530rpx;
white-space: nowrap;
/* 禁止换行 */
overflow: hidden;
/* 隐藏溢出内容 */
text-overflow: ellipsis;
/* 显示省略号 */
}
.white-bg .notice-list .notice-title.bold {
font-weight: bold;
}
.white-bg .notice-list .notice-date {
color: #BFBFBF;
font-size: 28rpx;
margin-top: 10rpx;
}
.white-bg .notice-list .notice-item .dot {
position: absolute;
right: 0;
top: 14rpx;
}
</style>

329
src/pages/userinfo/userinfo.vue Normal file
View File

@@ -0,0 +1,329 @@
<template>
<view class="con-body">
<view class="con-bg">
<!-- 下拉刷新 -->
<mescroll-uni ref="mescrollRef" @init="mescrollInit"
:down="downOption" @down="downCallback"
:fixed="false" class="scroll-h" :style="{ paddingTop: navBarPaddingTop + 'px' }"
>
<!-- #ifdef H5 -->
<view style="height:50rpx"></view>
<!-- #endif -->
<!-- 头像 -->
<view class="head-pic">
<img class="pic-img" :src="'static/images/userinfo/icon-userinfo.png'" />
<view class="head-name">
<view class="nick">
<view class="nick-text">{{ userObj.name }}</view>
<img :src="`static/images/userinfo/num-${userObj.level}@2x.png`" class="level" />
</view>
<view class="dept">{{ userObj.deptName }} {{ userObj.jobName }}</view>
</view>
<view class="head-right">
<view class="font-ruzhi">已入职{{userObj.joinDay}}天</view>
<img :src="'static/images/userinfo/icon-heart@2x.png'" />
</view>
</view>
<!-- 日常 -->
<view class="backlog-bg">
<view class="backlog-b-item">
<img :src="'static/images/business/icon-rwjh.png'" />
<view class="font-title">任务计划</view>
</view>
<view class="backlog-b-item">
<img :src="'static/images/business/icon-rb.png'" />
<view class="font-title">日报</view>
</view>
<view class="backlog-b-item">
<img :src="'static/images/business/icon-sbgl.png'" />
<view class="font-title">设备管理</view>
</view>
<view class="backlog-b-item">
<img :src="'static/images/business/icon-jxgl.png'" />
<view class="font-title">绩效管理</view>
</view>
</view>
<!-- 头像块 -->
<view class="white-bg">
<view class="list-item">
<img :src="'static/images/userinfo/icon-tx@2x.png'" class="l-icon" />
<text>头像</text>
<view class="list-right">
<img class="pic-img" :src="'static/images/userinfo/icon-userinfo.png'" />
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
</view>
</view>
</view>
<!-- 登录管理，修改密码，版本更新块 -->
<view class="white-bg">
<view class="list-item item-padding">
<img :src="'static/images/userinfo/icon-dlgl@2x.png'" class="l-icon" />
<view>登录管理</view>
<view class="list-right">
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
</view>
</view>
<view class="item-border"></view>
<view class="list-item item-padding">
<img :src="'static/images/userinfo/icon-xgmm@2x.png'" class="l-icon" />
<view>修改密码</view>
<view class="list-right">
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
</view>
</view>
<view class="item-border"></view>
<view class="list-item item-padding">
<img :src="'static/images/userinfo/icon-bbgx@2x.png'" class="l-icon" />
<view class="item-text">版本更新 <view class="dot"></view></view>
<view class="list-right">
<text class="item-gray">Version 1.0.0</text>
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
</view>
</view>
</view>
<!-- 退出登录 -->
<button type="primary" plain="true" size="small" class="logout-btn" @click="handleLoginOut">退出登录</button>
<!-- 底部加高度来避免tabbar遮挡 -->
<!-- <view class="bottom-height"></view> -->
</mescroll-uni>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// import customHeader from '@/components/customHeader.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import { getNavBarPaddingTop } from '@/utils/system.js'
import { getUserInfo } from '@/api/auth.js'
import { useUserStore } from '@/stores/user';
const userStore = useUserStore()
// 1.头部导航栏
const navBarPaddingTop = ref(0);
onMounted(() => {
navBarPaddingTop.value = getNavBarPaddingTop() * 2;
})
// 下拉刷新
const mescrollRef = ref(null);
const mescrollInit = (mescroll) => {
mescrollRef.value = mescroll;
};
const downOption = ref({
auto: true,
textInOffset: '下拉刷新',
textOutOffset: '释放更新',
textLoading: '刷新中...'
});
// 下拉刷新
const downCallback = async (mescroll) => {
try {
setTimeout(async ()=>{
// mescroll.resetUpScroll();
},500);
} catch (error) {
mescroll.endErr();
} finally {
setTimeout(async ()=>{
mescroll.endSuccess();
},500);
}
}
// 2.获取用户基本信息
let userObj = ref({});
const selectUserInfo = async ()=>{
let data = await getUserInfo({});
userObj.value = data;
}
selectUserInfo()
// 3.退出登录
const handleLoginOut = async ()=>{
userStore.logout();
uni.reLaunch({
url: '/pages/login/login',
});
}
</script>
<style scoped>
.scroll-h{
/* #ifdef APP-PLUS */
height:calc(100vh - 30px) !important;
/* #endif */
/* #ifndef APP-PLUS */
height: calc(100vh - 30px) !important;
/* #endif */
}
:deep(.mescroll-upwarp){
display:none
}
.head-pic {
display: flex;
padding: 40rpx 0rpx 10rpx 30rpx;
}
.head-pic .pic-img {
width: 110rpx;
height: 110rpx;
}
.head-pic .head-name {
color: #fff;
margin-left: 20rpx;
padding: 10rpx 0;
}
.head-pic .head-name .nick {
font-size: 36rpx;
font-weight: bold;
position: relative;
display: inline-block;
}
.head-pic .head-name .nick .nick-text {
padding-right: 35rpx;
}
.head-pic .head-name .nick .level {
position: absolute;
right: 0;
top: 30%;
transform: translateY(-50%);
width: 30rpx;
height: 32rpx;
}
.head-pic .head-name .dept {
color: #94F6FF;
font-size: 28rpx;
margin-top:10rpx;
}
.head-pic .head-right {
margin-left: auto;
background-color: #034FCC;
border-radius: 15px 0 0 15px;
color: #FFFFFF;
font-size: 24rpx;
padding: 5rpx 10rpx 5rpx 30rpx;
display: flex;
height: 36rpx;
}
.head-pic .head-right .font-ruzhi {
margin-right: 10rpx;
}
.head-pic .head-right img {
display: block;
width: 28rpx;
height: 25rpx;
margin-left: auto;
margin-top: 2px;
}
.backlog-bg {
background: url('@/static/images/userinfo/bg-me@2x.png') no-repeat;
background-size: 730rpx 250rpx;
width: 690rpx;
height: 250rpx;
margin: 0 auto;
display: flex;
padding: 0 20rpx;
align-items: center;
}
.backlog-b-item {
width: 25%;
}
.backlog-b-item img{
width: 90rpx;
height: 90rpx;
margin:0 auto 10rpx;
display: block;
}
.backlog-b-item .font-title {
font-size: 28rpx;
text-align: center;
}
.white-bg{
width:590rpx;/*690*/
padding:30rpx 50rpx;
}
.list-item{
display: flex;
align-items: center;
font-size: 32rpx;
}
.list-item.item-padding{
padding:45rpx 0;
}
.list-item.item-padding:first-child{
padding-top:20rpx;
}
.list-item.item-padding:last-child{
padding-bottom:20rpx;
}
.item-border{
height:1px;
background-color: #E7E7E7;
width:640rpx;
}
.list-item .l-icon{
width:46rpx;
/* height: 46rpx; */
margin-right:20rpx;
}
.list-item .list-right{
margin-left: auto;
display: flex;
align-items: center;
}
.list-item .list-right .pic-img{
width:72rpx;
height: 72rpx;
margin-right:20rpx;
}
.list-item .list-right .item-gray{
color:#BFBFBF;
font-size:28rpx;
margin-right: 20rpx;
}
.list-item .item-text{
display: flex;
align-items: center;
}
.list-item .dot{
margin-left:15rpx;
}
.logout-btn{
width:360rpx;
height: 80rpx;
line-height: 75rpx;
border-radius: 40rpx;
background-color: #fff !important;
font-size:36rpx !important;
margin:109rpx auto;
}
</style>