ys-app/src/pages/business/CRM/marketActivity/detailForApproval.vue

<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>
                    <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>
            </customTabs>


            <view class="tipsPopBtn">
                <view class="btnCancal" @click="refuse">驳回</view>
                <!-- <view class="btnComfire" @click="refusePass">通过不得分</view> -->
                <view class="btnComfire" @click="adopt(item)">通过</view>

            </view>
            <!-- 底部加高度来避免tabbar遮挡 -->
            <view class="bottom-height"></view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import customHeader from '@/components/customHeader.vue'
import customTabs from '@/components/customTabs.vue';
import {
  auditActivityReport,
  getRejectReason,
  getVisistDetailList,
  getYsVisistInfo
} from '../../../../api/crm/activity/activity';


let visistId = ref(0)
// 加载后调用
let id = ref(null)
onLoad((options) => {
    visistId.value = options.visistId
    getVisitorReportDetail();
})


// 查询详情
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 = ['报告明细'];

//点击驳回
// 修正后的驳回方法
const refuse = async () => {
  uni.showModal({
    title: '驳回原因',
    content: '',
    editable: true,
    success: async function (modalRes) { // 使用modalRes避免重名
      if (modalRes.confirm) {
        try {
          const param = {
            visistId: visistId.value,
            rejectReason: modalRes.content // 用户输入的驳回原因
          };
          const apiRes = await getRejectReason(param); // 避免与modalRes重名
          uni.showToast({
            title: '驳回成功',
            icon: 'success'
          });
          // 操作完成后返回
          setTimeout(() => {
            uni.navigateBack(1);
          }, 800);
        } catch (err) {
          console.log('驳回失败:', err);
          uni.showToast({
            title: '驳回失败',
            icon: 'error'
          });
        }
      }
    }
  });
}

//点击通过
function adopt(item) {
    uni.showModal({
        title: '提交',
        content: '是否要通过本报告？',
        success: function (res) {
            if (res.confirm) {
                auditActivityReport({
                    activityId: item.visistId,
                    reportStaffName: item.staffName,
                }).then(res => {
                    if (res.code == 200) {
                        mescroll.resetUpScroll()
                    } else {
                        uni.showToast({
                            icon: 'none',
                            title: res.msg,
                        });
                    }
                })

              uni.navigateBack({
              })

            }
        }

    })
}

</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;
}


.tipsPopBtn {
    width: 370px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px auto 56px auto;
    bottom: 0;
    left: 0;
}

.btnCancal {
    width: 100px;
    height: 60px;
    border: 2px solid #29abe2;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #29abe2;
    font-size: 15px;

}

.btnComfire {
    width: 100px;
    height: 60px;
    background-color: #29abe2;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 15px;
}
</style>