APP-活动报告,签到打卡页面功能实现。
This commit is contained in:
201
src/pages/business/CRM/marketActivity/visitReportDetail.vue
Normal file
201
src/pages/business/CRM/marketActivity/visitReportDetail.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<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.cusName }}</view>
|
||||
<view class="r-list">
|
||||
<view class="r-name">{{ item.visistCode }}</view>
|
||||
<view class="r-right btn-pink" size="mini" @click="handleZan">
|
||||
<uni-icons :type="iconType" size="16" color="#ffffff"></uni-icons>
|
||||
{{ zanFlag ? '已赞' : '未赞' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="border-bottom b-width"></view>
|
||||
<view class="r-list">
|
||||
<view class="r-left">报告人</view>
|
||||
<view class="r-right">{{ item.staffName }}</view>
|
||||
</view>
|
||||
<view class="border-bottom b-width"></view>
|
||||
<view class="r-list">
|
||||
<view class="r-left">走访日期</view>
|
||||
<view class="r-right">{{ item.visistDate }}</view>
|
||||
</view>
|
||||
<view class="border-bottom b-width"></view>
|
||||
<view class="r-list">
|
||||
<view class="r-left">是否双方高层领导参与</view>
|
||||
<view class="r-right">{{ item.whetherHaveLeader }}</view>
|
||||
</view>
|
||||
<view class="border-bottom b-width"></view>
|
||||
<view class="r-list">
|
||||
<view class="r-left">活动类型</view>
|
||||
<view class="r-right">{{ item.visistType }}</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" v-for="item in detailList">
|
||||
<view class="report-list">
|
||||
<view class="r-list">
|
||||
<view class="r-left">拜访事项</view>
|
||||
<view class="r-right">{{item.detailType}}</view>
|
||||
</view>
|
||||
<view class="border-bottom b-width"></view>
|
||||
<view class="r-list">
|
||||
<view class="r-left">拜访类型</view>
|
||||
<view class="r-right">{{item.treeName}}</view>
|
||||
</view>
|
||||
<view class="border-bottom b-width"></view>
|
||||
<view class="r-list">
|
||||
<view class="r-left">客户人员</view>
|
||||
<view class="r-right">{{item.customerPersonnel}}</view>
|
||||
</view>
|
||||
<view class="border-bottom b-width"></view>
|
||||
<view class="r-list">
|
||||
<view class="r-left">我方人员</view>
|
||||
<view class="r-right">{{item.ourPersonnel}}</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 >
|
||||
{{item.bandResult}} </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, onShow } from '@dcloudio/uni-app'
|
||||
import customHeader from '@/components/customHeader.vue'
|
||||
import customTabs from '@/components/customTabs.vue';
|
||||
import { getUserLike, getVisistDetailList, getYsVisistInfo, insertUserLike } from '../../../../api/crm/activity/activity';
|
||||
|
||||
|
||||
let visistId = ref(0)
|
||||
// 加载后调用
|
||||
let id = ref(null)
|
||||
onLoad((options) => {
|
||||
visistId.value = options.visistId
|
||||
getVisitorReportDetail();
|
||||
})
|
||||
|
||||
onShow(()=>{
|
||||
getUserLike(visistId.value).then(res=>{
|
||||
zanFlag.value = res.rows[0]?.status==1?true:false
|
||||
console.log(zanFlag.value,'点赞响应数据内容')
|
||||
if(zanFlag.value==false){
|
||||
iconType.value = 'hand-up'
|
||||
}else{
|
||||
//已赞
|
||||
iconType.value = 'hand-up-filled'
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 查询详情
|
||||
let item = ref({});
|
||||
//明细List
|
||||
let detailList = ref([])
|
||||
const getVisitorReportDetail = async () => {
|
||||
let param = {
|
||||
visistId: visistId.value
|
||||
}
|
||||
|
||||
let res = await getYsVisistInfo(param);
|
||||
item.value = res.data;
|
||||
let detailRes = await getVisistDetailList(param);
|
||||
detailList.value = detailRes.rows;
|
||||
}
|
||||
|
||||
// 报告明细&评论
|
||||
const activeTab = ref(0);//默认报告明细
|
||||
const tabList = ['报告明细', '评论'];
|
||||
|
||||
// 点击赞
|
||||
let zanFlag = ref(false)
|
||||
let iconType = ref('hand-up')
|
||||
let handleZan = ()=>{
|
||||
zanFlag.value = !zanFlag.value
|
||||
if(zanFlag.value==false){
|
||||
iconType.value = 'hand-up'
|
||||
}else{
|
||||
//已赞
|
||||
iconType.value = 'hand-up-filled'
|
||||
}
|
||||
insertUserLike(visistId.value)
|
||||
}
|
||||
|
||||
</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>
|
||||
Reference in New Issue
Block a user