EnforcementCode-2.0/zdxt-web-client/zdxt-enforcement-code-app/fordelete/views/enterprise/complaintDetail.vue

<template>
    <div class="address_edit">
        <!-- 中间 -->
        <div v-if="submitData.comOrOpi==1">
            <van-form @failed="onFailed" @submit="submit">
                <van-cell-group>
                    <view v-if="data.isSelect=='true'">
                        <van-field
                                v-model="submitData.lawEnforcementIncidentText"
                                label="相关案件"
                                placeholder="请选择"
                                readonly
                                required
                                :rules="[{ required: true, message: '请选择相关案件' }]"
                                clickable
                                is-link
                                @click="showPopup"
                        />
                    </view>
                    <view v-else>
                        <van-field
                                v-model="submitData.lawEnforcementIncidentText"
                                label="相关案件"
                                placeholder="请选择"
                                readonly
                                required
                                :rules="[{ required: true, message: '请选择相关案件' }]"
                                clickable
                                is-link
                        />
                    </view>
                    <Popup :visible="popupVisible" :content="popupContent" @close="closePopup"
                           @reciveData="reciveData"/>
                    <van-divider class="divdsty"/>
                    <van-field
                            v-model="submitData.problemDescription"
                            rows="5"
                            autosize
                            label="意见|建议"
                            type="textarea"
                            maxlength="100"
                            placeholder="请输入"
                            required
                            :rules="[{ required: true, message: '请输入意见|建议' }]"
                            show-word-limit
                    />
                    <van-divider class="divdsty"/>

                    <van-field
                            v-model="submitData.linkman"
                            label="联系人"
                            placeholder="联系人"
                            required
                            :rules="[{ required: true, message: '请填写联系人' }]"
                    />
                    <van-field
                            v-model="submitData.linkmanTel"
                            label="联系电话"
                            placeholder="联系电话"
                            required
                            :rules="[{ validator, message: '请输入正确内容' }]"
                    />
                </van-cell-group>
            </van-form>
        </div>
        <div v-else class="warp_body">
            <span class="rigbtn" @click="toNoScanView">入企不扫码投诉</span>
            <van-form @failed="onFailed" @submit="submit">
                <van-cell-group>
                    <view v-if="data.isSelect=='true'">
                        <van-field
                                v-model="submitData.lawEnforcementIncidentText"
                                label="投诉案件"
                                placeholder="请选择"
                                readonly
                                required
                                :rules="[{ required: true, message: '请选择投诉案件' }]"
                                clickable
                                is-link
                                @click="showPopup"
                        />
                    </view>
                    <view v-else>
                        <van-field
                                v-model="submitData.lawEnforcementIncidentText"
                                label="投诉案件"
                                placeholder="请选择"
                                readonly
                                required
                                :rules="[{ required: true, message: '请选择投诉案件' }]"
                                clickable
                                is-link
                        />
                    </view>
                    <Popup :visible="popupVisible" :content="popupContent" @close="closePopup"
                           @reciveData="reciveData"/>
                    <van-field
                            v-model="submitData.enforceTypeText"
                            required
                            label="投诉类型"
                            placeholder="请选择"
                            readonly
                            clickable
                            is-link
                            @click="selectType"
                    />
                    <van-popup v-model:show="data.showPicker" position="bottom">
                        <van-picker
                                v-model="data.selectTypeValue"
                                :columns="data.columns"
                                @cancel="data.showPicker = false"
                                @confirm="onConfirm"
                        />
                    </van-popup>
                    <van-divider class="divdsty"/>
                    <van-field
                            v-model="submitData.problemDescription"
                            rows="5"
                            autosize
                            label="诉投诉内容"
                            type="textarea"
                            maxlength="100"
                            placeholder="请输入"
                            required
                            :rules="[{ required: true, message: '请输入投诉内容' }]"
                            show-word-limit
                    />
                    <van-divider class="divdsty"/>
                    <div class="file-upload">
                        <div class="file-upload-center">
                            <label>附&nbsp; &nbsp; &nbsp; &nbsp;件</label>
                        </div>
                        <!--          <van-uploader v-model="submitData.fileListObj"  class="file" :after-read="uploadFiles" multiple :max-size="500 * 1024" @oversize="onOversize" :before-delete="deleteFile">-->
                        <!--            <template #preview-cover="{ file }">-->
                        <!--              <div class="preview-cover van-ellipsis">{{ file.name }}</div>-->
                        <!--            </template>-->
                        <!--          </van-uploader>-->
                        <!-- <van-uploader v-model="submitData.fileListObj" max-count="9" class="file" multiple
                                      :after-read="uploadFiles" :before-delete="deleteFile">
                            <template #preview-cover="{ file }">
                                <div class="preview-cover van-ellipsis">{{ file.name }}</div>
                            </template>
                        </van-uploader> -->
                        <van-uploader v-model="submitData.fileListObj" class="file" multiple max-count="9"
                                      :after-read="uploadFiles" :before-delete="deleteFile">
                            <template #preview-cover="{ file }">
                                <div class="preview-cover van-ellipsis">{{ file.name }}</div>
                            </template>
                        </van-uploader>

                    </div>
                    <van-divider class="divdsty"/>

                    <van-field
                            v-model="submitData.enterpriseAddress"
                            rows="3"
                            autosize
                            label="涉事地址"
                            type="textarea"
                            placeholder="请填写详细地址"
                            required
                            :rules="[{ required: true, message: '请填写详细地址' }]"
                            show-word-limit
                    />
                    <van-divider class="divdsty"/>

                    <van-field
                            v-model="submitData.linkman"
                            label="联系人"
                            placeholder="联系人"
                            required
                            :rules="[{ required: true, message: '请填写联系人' }]"
                    />
                    <van-field
                            v-model="submitData.linkmanTel"
                            label="联系电话"
                            placeholder="联系电话"
                            required
                            :rules="[{ validator, message: '请输入正确内容' }]"
                    />
<!--                    <div class="agree-box">-->
<!--                        <span class="remsty">是否授权</span>-->
<!--                        <span class="accept-item"><input class="checksty" type="checkbox" name="" value=""-->
<!--                                                         v-model="data.isCheckedon" @click="selectCh(1)">同意</span>-->
<!--                        <span class="accept-item"><input class="checksty" type="checkbox" name="" value=""-->
<!--                                                         v-model="data.isCheckedoff" @click="selectCh(0)">不同意</span>-->
<!--                    </div>-->
<!--                    <div class="agree-remark">-->
<!--                        <span class="accept-item">注：选择“同意”，处置部门将通过登记的联系人、联系电话与您联系，并对您的个人信息严格保密。</span>-->
<!--                    </div>-->
                </van-cell-group>
<!--                <van-action-bar>-->
<!--                    <van-button round block type="info" native-type="submit">提交</van-button>-->
<!--                </van-action-bar>-->
            </van-form>
        </div>
    </div>
</template>

<script setup name="register">

    import {showSuccessToast, showLoadingToast, closeToast, Toast} from 'vant';
    import {addEnterpriseComplaint, getEnterpriseComplaintById} from '../../api/enterprise'
    import {getDict} from '../../api/Home'
    import {uploadFile} from '../../util/fileUpload'
    import {reactive, ref} from "vue";
    import * as w6s from 'szient-js-sdk';

    const {useCommon, useMy} = $globalStore

    const router = useRouter();
    const route = useRoute();
    let queryaddressId = ref("");
    const data = reactive({
        searchResult: [],
        showPicker: false,
        columns: [],
        selectTypeValue: ref[0],
        isSelect: true,
        isCheckedon: true,
        isCheckedoff: false,
    });
    //保存参数
    const submitData = reactive({
        // 用户id
        userId: ref(useCommon.userId),
        //关联案件ID
        relId: "",
        //案件名称
        lawEnforcementIncidentText: "",
        lawEnforcementIncident: "",
        //企业名称
        enterpriseName: "",
        //纳税识别号
        enterpriseNumber: "",
        //执法投诉
        enforceType: "",
        enforceTypeText: "",
        //投诉内容
        problemDescription: "",
        //联系人
        linkman: "",
        //联系电话
        linkmanTel: "",
        // 是否授权
        authorization: 1,
        //后台保存图片列表
        fileList: [],
        //vant组件上传照片列表
        fileListObj: [],
        comOrOpi: 0,
    })


    // 返回
    const goBack = () => {
        router.go(-1);
    };

    const validator = (val) => /^1[34578]\d{9}$/.test(val);

    const onFailed = (errorInfo) => {
        console.log('failed', errorInfo);
    };

    const submit = () => {
        console.log(submitData);

        addEnterpriseComplaint(submitData, success => {

            console.log(success)
            //跳转企业二维码地址
            if (success.success) {
                showSuccessToast("投诉成功")
                console.log("登记成功");
                setTimeout(() => {
                    goBack();
                }, 2000);

            }
        }, error => {
            console.log("投诉失败")
        })
    }
    //消息提醒
    // const toast = showLoadingToast({
    //   duration: 0,
    //   forbidClick: true,
    //   message: '提交成功',
    // });
    // let second = 3;
    // const timer = setInterval(() => {
    //   second--;
    //   if (second) {
    //   } else {
    //     clearInterval(timer);
    //     closeToast();
    //   }
    // }, 1000);
    // 保存地址操作
    const onSave = () => {
        router.replace({name: "addressList"});
    };

    const onConfirm = (value) => {
        data.showPicker = false;
        console.log(value)
        submitData.enforceType = value.selectedValues[0];
        submitData.enforceTypeText = value.selectedOptions[0].text;
    }
    const selectType = () => {
        data.showPicker = true;
        // console.log(data)
    }
    const selectCh = (val) => {
        submitData.authorization = val;
        if (val == 0) {
            data.isCheckedon = false;
            data.isCheckedoff = true;
        } else {
            data.isCheckedon = true;
            data.isCheckedoff = false;
        }
    }


    const uploadFiles = (file) => {
      if(Array.isArray(file)){
        file.forEach((item,index)=>{
          uploadFile(item, (res) => {
            submitData.fileList.push(res.url)
          });
        });
      }else{
        uploadFile(file, (res) => {
          submitData.fileList.push(res.url)
        });
      }
    }
    const deleteFile = (file, index) => {
        // submitData.fileListObj.filter((item, indexs) => {
        //   if (index.index == indexs) {
        //     submitData.fileListObj.splice(indexs, 1);//splice 删除
        //   }
        //  });
        submitData.fileList.filter((item, indexs) => {
            if (index.index == indexs) {
                submitData.fileList.splice(indexs, 1);//splice 删除
            }
        });
        return true;
    }
    onMounted(() => {
        submitData.relId = route?.query?.id;
        submitData.lawEnforcementIncidentText = route?.query?.lawEnforcementItemText;
        data.isSelect = route?.query?.isSelect;
        submitData.comOrOpi = route?.query?.comOrOpi;
        initData(submitData.relId);
        getDict({"dictType": "caseType"}, success => {
            console.log(success);
            success.data.forEach(res => {
                console.log(res)
                var obj = null;
                if (res.dictValue != 3) {
                    obj = {text: res.dictLabel, value: res.dictValue};
                }
                if (obj != null) {
                    data.columns.push(obj)
                }
            })
        }, error => {

        })
    });
    const initData = (id) => {
        getEnterpriseComplaintById(id, success => {
            console.log(success.data)
            if (null != success.data) {
                submitData.relId = id;
                submitData.problemDescription = success.data.problemDescription;
                if (success.data.authorization) {
                    submitData.linkman = success.data.linkman;
                    submitData.linkmanTel = success.data.linkmanTel;
                } else {
                    submitData.linkman = "***";
                    submitData.linkmanTel = "***********";
                }
            }
        });
    }
    const toNoScanView = () => {
        router.push({
            path: "/enterprise/complaintNoScan"
        })
    }
    const reciveData = (item) => {
        console.log(item)
        submitData.lawEnforcementIncidentText = item.lawEnforcementItemText;
        submitData.lawEnforcementIncident = item.lawEnforcementItem;
        submitData.relId = item.id;
    }
    const getAddressInfo = () => {
        console.log(url);
        const access_key = '6374106c5eb449a4ad6c2430f30796e6';
        const access_secret = '434fec85aa5846e88bbeb8fac6cf6d7f';
        // generateRandomNumber()
        const nonce = "887954";
        const timestamp = `${Date.now()}`;

        const str = [access_secret, nonce, timestamp]
            .sort()
            .reduce((str, item) => str += item, '');

        // 最终还需要转成全小写
        const signature = sha1(str).toString().toLowerCase();
        var siqObject = {
            access_key: access_key,
            nonce: nonce,
            timestamp: timestamp,
            signature: signature,
        };
        console.log(siqObject);
        //深i企鉴权
        w6s.config(siqObject)
            .then((res) => {
                // 成功
                console.log("鉴权成功", res);
                w6s.ready(() => {
                    w6s.location.getLocation({
                        success: function (res) {
                            console.log(res)
                        },
                        fail: function (err) {
                        },
                    });
                });

            })
            .catch((err) => {
                // 失败
                // console.log(err)
                console.log("鉴权失败", err);
            });
    }

</script>
<script>
    //案件筛选弹窗
    import Popup from './caseFilter.vue';

    export default {
        components: {
            Popup
        },
        data() {
            return {
                popupVisible: false,
                popupContent: ''
            }
        },
        methods: {
            showPopup() {
                this.popupVisible = true;
            },
            closePopup() {
                this.popupVisible = false;
            }
        }
    }
</script>

<style lang="less" scoped>
    .address_edit {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background-color: #ebf3fb;
    }

    .warp_body {
        margin: 2% 3%;
        padding-bottom: 3rem;
        width: 94%;
        height: 100%;
        //border-radius: 0.25rem;
        background-image: linear-gradient(to bottom, #ebf3fb, #fff);
        overflow-y: auto;
    }

    /* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */
    .van-popup.van-toast {
        background: var(--van-toast-background) !important;
        box-sizing: content-box !important;
        /* 下面3条css,影响不大 */
        transition: all var(--van-duration-fast) !important;
        width: var(--van-toast-default-width) !important;
        max-width: var(--van-toast-max-width) !important;
    }

    .van-popup.van-toast .van-toast__icon {
        font-size: var(--van-toast-icon-size) !important;
    }

    .divdsty {
        margin: auto;
        width: 100%;
        height: 0.25rem;
        background-color: #f4f4f4;
        border: 0;
    }

    .file-upload {
        position: relative;
        min-height: 3.0rem;
        max-height: 6.5rem;
        padding: 1rem 0.27rem 0.27rem 0.43rem;
        box-sizing: border-box;
    }

    .file-upload-center {
        position: absolute;
        top: 0.27rem;
        left: 0.43rem;
        width: 90%;
        height: 0.65rem;
        font-size: 0.37rem;
        span {
          font-size: 0.32rem;
          color: rgb(221, 229, 227);
        }
    }
    .file {
        position: relative;
        width: 100%;
        height: calc(100% - 1.5rem);
    }

    /deep/ .van-uploader__upload, /deep/ .van-uploader__preview-image {
        width: 1.95rem !important;
    }

    .preview-cover {
        position: absolute;
        bottom: 0;
        box-sizing: border-box;
        width: 100%;
        padding: 4px;
        color: #fff;
        font-size: 0.32rem;
        text-align: center;
        background: rgba(0, 0, 0, 0.3);
    }

    .zoom {
      /*margin-top: 0.65rem;
      padding-top: 0.27rem;
      padding-left: 0.27rem;*/
      img {
        width: 1.95rem;
        height: 2rem;
        margin: 0 0.21rem 0.21rem 0;
        font-size: 0.35rem;
      }
    }

    .rigbtn {
        float: right;
        position: relative;
        z-index: 1;
        margin: 0.3rem 0.5rem;
        padding: 0.2rem 0.3rem;
        background-color: #e9f2fb;
        color: #1367fe;
        border-radius: 1rem;
        font-size: 0.3rem;
    }

    .popup {
        position: fixed;
        z-index: 999;
        top: 3rem;
        left: 0;
        width: 100%;
        height: calc(100% - 3rem);
        background: #fff;
        overflow: hidden;
    }

    .popup-title {
        margin: 0.3rem 0 0;
        width: 100%;
        height: 1rem;
        border-bottom: 1px solid #f3f4f5;
        text-align: center;
        font-size: 0.45rem;
        font-weight: 600;
    }

    .close-button {
        position: absolute;
        top: 0.15rem;
        right: 0.1rem;
        width: 0.8rem;
        height: 0.8rem;
        background-color: rgba(255, 255, 255, .5);
        border: 0.05rem solid rgba(255, 255, 255, .7);
        border-radius: 50%;
        transform: rotate(45deg);
    }

    .close-button:before,
    .close-button:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        background: #333;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        height: 0.4rem;
        width: 0.02rem;
    }

    .close-button:after {
        height: 0.02rem;
        width: 0.4rem;
    }

    .popup-content {
        margin: 0.25rem 3% 0;
        padding-bottom: 3rem;
        width: 94%;
        height: calc(100% - 1.6rem);
        overflow-y: auto;
        font-size: 0.37rem;
    }

    .subsearch {
        width: 100%;
        height: 1.25rem;
    }

    .searchbox {
        margin: 2% 3%;
        padding: 0.15rem 0.3rem 0.1rem 1.15rem;
        width: 94%;
        height: 1.0rem;
        background: #f6f7fe url(../../assets/images/icon_sou.png) no-repeat;
        background-position: left 0.5rem center;
        background-size: auto 50%;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, .05);
        border-radius: 0.5rem;
        color: #999999;
        outline: none;
    }

    .subtitle {
        margin: 0.5rem 0 0.25rem;
        font-size: 0.4rem;
        font-weight: 600;
    }

    .quick-item {
        display: flex;
    }

    .quick-item span {
        display: inline-block;
        margin: 1% 0 2% 3.5%;
        padding: 2% 3.75%;
        background: #f2f3f4;
        border: 0;
        border-radius: 8px;
        color: #4c4c4c;
    }

    .quick-item span.seled {
        background: #e9f2fb;
        color: #1367fe;
    }

    .btnbox {
        display: flex;
        justify-content: center;
        margin: 5% 2%;
        width: 96%;
        height: 1.0rem;
    }

    .btn-reset,
    .btn-search {
        display: inline-block;
        margin: 0 2%;
        padding: 0;
        width: 60%;
        color: #fff;
        font-size: 0.35rem;
        border-radius: 1rem;
        background: #1367fe;
        border: 1px solid #1367fe;
        text-align: center;
    }

    .btn-reset {
        width: 35%;
        background-color: #fff;
        border-color: rgba(19, 103, 254, .7);
        color: #1367fe;
    }

    .search-result {
        width: 100%;
        padding-bottom: 2rem;
    }

    .case-item {
        margin: 3% 2%;
        padding: 2% 0;
        width: 96%;
        font-size: 0.35rem;
        border-bottom: 1px solid #f4f4f4;
        color: #999;
        line-height: 2;
    }

    .case-title {
        margin: 2% 0;
        font-size: 0.42rem;
        color: #333;
        line-height: 1.25;
    }

    /* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */
    .van-popup.van-toast {
        background: var(--van-toast-background) !important;
        box-sizing: content-box !important;
        /* 下面3条css,影响不大 */
        transition: all var(--van-duration-fast) !important;
        width: var(--van-toast-default-width) !important;
        max-width: var(--van-toast-max-width) !important;
    }

    .van-popup.van-toast .van-toast__icon {
        font-size: var(--van-toast-icon-size) !important;
    }

    .agree-box {
        display: flex;
        align-items: center;
        height: 1.5rem;
    }

    .agree-box .remsty {
        margin: 0.5rem 0.5rem;
        padding-left: 0.85rem;
        background: url("../../assets/images/icon_remind.png") no-repeat left center;
        background-size: auto 100%;
        font-size: 0.5rem;
        font-weight: 600;
    }

    .accept-item {
        display: flex;
        align-items: center;
        margin: 0 0.15rem;
        font-size: 0.42rem;
    }

    .checksty {
        margin: 0 0.25rem;
        width: 0.5rem;
        height: 0.5rem;
    }

    .agree-remark {
        .accept-item {
            font-size: 0.3rem;
            padding: 0px 10px;
            width: 80%;
            color: #969799
        }

        height: 1.4rem;

    }

    /deep/ .van-button {
        margin: 5% 3%;
        padding: 0;
        width: 94%;
        height: 1rem;
        color: #fff;
        font-size: 0.4rem;
        border-radius: 1rem;
        background: #1367fe;
        border: 0.01rem solid #1367fe;
        text-align: center;
    }

    /deep/ .van-action-bar {
        box-shadow: 0 0 0.27rem #e5e5e5;
    }

</style>