first commit
This commit is contained in:
chenzhen
224
src/pages/business/CRM/marketInformation.vue
Normal file
224
src/pages/business/CRM/marketInformation.vue
Normal 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>
|
||||
Reference in New Issue
Block a user