jobslink-user-clent/pages/projectInfo/projectInfo.vue

<template>
    <view v-if="showDetail">
        <view class="head">
            <view class="proname">
                {{info.missionTitle || '暂无'}}
            </view>
            <!-- <view class="prolist">
				任务编码：{{info.missionNo}}
			</view> -->
            <view class="prolist">
                <!-- 开始时间：{{dateFormat((info.stime))}}至{{dateFormat((info.etime))}} -->
                开始时间：{{dateFormat((info.stime)) || '暂无'}}
            </view>
            <!-- <view class="prolist">
				报名截止：{{dateFormat((info.etimePub))}}
			</view> -->
            <view class="prolist">
                招聘人数：{{info.peopleNum || '暂无'}}
            </view>
            <view class="prolist">
                行业类型：{{info.tradeNames || '暂无'}}
            </view>
            <view class="prolist">
                零工工种：{{info.worktypeNames || '暂无'}}
            </view>
            <!-- <view class="fee">
                {{info.wage || '暂无'}}
            </view> -->
        </view>
        <view class="head">
            <view class="proname proneed">
                任务要求
            </view>
            <view class="prolist">
                <view class="protype">
                    年龄要求：{{age[info.ageDesc] || '暂无'}}
                </view>
            </view>
            <view class="prolist">
                <view class="protype">
                    学历要求：{{education[info.education] || '暂无'}}
                </view>
            </view>
            <view class="prolist">
                <view class="protype">
                    经验要求：{{experience[info.experienceDesc] || '暂无'}}
                </view>
            </view>
            <view class="prolist proint" style="font-weight: bold;color:#333;">
                任务描述
            </view>
            <view class="prolist description">
                {{info.missionDesc || '暂无'}}
            </view>
            <!-- 技能标签 start -->
            <view class="ask">
                <view class="askList" v-for="(item,index) in skillNames" :key="index">
                    {{item}}
                </view>
            </view>
            <!-- 技能标签 end -->
            <view v-if="info.jobSources" class="prolist">
                来源：{{info.jobSources || '暂无'}}
            </view>
        </view>
        <view class="head">
            <view style="display: flex;align-items: center;">
                <image src="../../static/img/city.png" style="width: 40rpx;height: 40rpx;margin-right: 20rpx;" mode="">
                </image>
                <view style="font-size: 30rpx;">{{info.missionCompanyName || '暂无'}}</view>
            </view>
            <!-- <view class="proname proneed">
                企业信息
            </view>
            <view class="prolist">
                {{info.companyName}}
            </view> -->
        </view>
        <view class="head">
            <view class="proname proneed">
                地址
            </view>
            <!-- <view class="prolist">
				<view class="protype">
					联系人：{{info.callName}}
				</view>
				<view class="protype">
					联系方式：{{info.callTel}}
				</view>
			</view>
			<view class="prolist" v-if="info.callNumber">
				座机号：{{info.callNumber}}
			</view> -->
            <!--           <view class="prolist">
                用工单位地址：{{info.companyAddress || '暂无'}}
            </view> -->
            <view class="prolist">
                工作地址：{{info.jobAddress || '暂无'}}
            </view>
            <view class="prolist">
                详细地址：{{info.address || '暂无'}}
            </view>
            <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
        </view>
        <view class="" style="height:200rpx;background-color: #f6f6f6;" v-if="isShow!=='0'"></view>
        <view class="btn" v-if="isShow!=='0'&&status===0">
            <view @click="collect"
                style="display: flex;align-items: center;margin-right: 10rpx;flex-direction: column;">
                <image v-if="collectStatus == 0" src="../../static/img/collect.png" style="width: 36rpx;height: 36rpx;"
                    mode=""></image>
                <image v-if="collectStatus == 1" src="../../static/img/collect_yes.png"
                    style="width: 36rpx;height: 36rpx;" mode=""></image>
                <view v-if="collectStatus == 0" style="font-size: 26rpx;color:#707070;margin-top:10rpx;">收藏</view>
                <view v-if="collectStatus == 1" style="font-size: 20rpx;color:#707070;margin-top:10rpx;">已收藏</view>
            </view>

            <view @click="callPhone" class="bottombtn flexbtn"
                style="margin-right: 10rpx;background-color: #FBAD17;border-radius: 45rpx;">
                电话联系
            </view>
            <view @click="submit" class="bottombtn flexbtn" style="border-radius: 45rpx;">
                申请
            </view>
        </view>
        <view class="btn" v-if="isShow!=='0'&&status!==0">
            <!-- <view class="bottombtn lookContract" @click="lookMask">查看合同</view> -->
            <view @click="collect"
                style="display: flex;align-items: center;margin-right: 10rpx;flex-direction: column;">
                <image v-if="collectStatus == 0" src="../../static/img/collect.png" style="width: 36rpx;height: 36rpx;"
                    mode=""></image>
                <image v-if="collectStatus == 1" src="../../static/img/collect_yes.png"
                    style="width: 36rpx;height: 36rpx;" mode=""></image>
                <view v-if="collectStatus == 0" style="font-size: 26rpx;color:#707070;margin-top:10rpx;">收藏</view>
                <view v-if="collectStatus == 1" style="font-size: 20rpx;color:#707070;margin-top:10rpx;">已收藏</view>
            </view>

            <view @click="callPhone" class="bottombtn flexbtn"
                style="margin-right: 10rpx;background-color: #FBAD17;border-radius: 45rpx;">
                电话联系
            </view>
            <view class="bottombtn disabledBtn flexbtn" style="border-radius: 45rpx;">已申请</view>
        </view>
        <uniMask :maskShow="maskShow">
            <view class="contractMask">
                <!-- #ifdef H5 || APP-PLUS -->
                <view class="close" @click="close" style="top: 124rpx;">+</view>
                <!-- #endif -->
                <!-- #ifdef MP-WEIXIN -->
                <view class="close" @click="close">+</view>
                <!-- #endif -->
                <view style="height: 30px;"></view>
                <img :src="src" alt="" style="width:100%;height: 1000px;">
                <view v-if="nextBtn" class="down" @click="next">下一步</view>
            </view>
        </uniMask>
        <u-popup closeable :show="showPopUp" mode="bottom" @close="closePopUp">
            <view style="height: 200rpx;padding: 20rpx 40rpx;">
                <view style="font-size: 28rpx;font-weight: bold;">重要提示：</view>
                <view style="font-size: 24rpx;color:#707070;margin-top:10rpx;">为保障个人基本劳动权益，建议通过平台用工的形式就业</view>
                <view style="text-align: center;font-size:28rpx;margin-top: 30rpx;"> {{ info.callName }} :
                    <span style="color: blue"
                        @click="tools.onDialingPhoneNumber(info.callTel)">{{ info.callTel }}</span>
                </view>
            </view>
        </u-popup>
    </view>

    <view v-else-if="showCode" class="codeSealBox">
        <!-- #ifdef H5 || APP-PLUS -->
        <view class="closeCode" @click="closeShowCode" style="top: 124rpx;">+</view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view class="closeCode" @click="closeShowCode">+</view>
        <!-- #endif -->

        <view class="title">
            <view class="name">签名密码</view>
            <view class="tip">6位数字签名密码</view>
        </view>
        <view style="height: 36px;"></view>
        <valid-code ref="validCode" @finish="getInpCode" :maxlength="maxlength"></valid-code>
        <view style="height: 36px;"></view>
        <view class="forget" @click="forget">忘记密码？</view>
    </view>
</template>

<script>
    import {
        mapGetters
    } from 'vuex'
    import {
        missionDetail,
        submit,
        getCollectState,
        updateCollectStatus
    } from '@/api/mission.js';
    import {
        GoLogin
    } from '@/untils/AxiosUtils.js';
    import {
        setRead
    } from '@/api/news.js';
    import {
        checkPass
    } from '@/api/auth.js';
    import dictionary from '@/common/textdata.js';
    import {
        dateFormat
    } from "../../untils/format.js";
    import uniMask from '@/components/uni-mask/mask.vue'
    import uniPopup from '@/components/uni-popup/uni-popup.vue'
    import validCode from '@/components/p-valid-code/p-valid-code.vue'
    import {
        AddressToLocation
    } from '@/untils/addressToLocation.js'
    import {
        add
    } from 'lodash';
    export default {
        data() {
            return {
                ...dictionary,
                info: {},
                status: null,
                showDetail: false,
                showCode: false,
                maskShow: false,
                nextBtn: false,
                loading: false,
                latitude: 31.126855, //中心点
                longitude: 104.397894,
                covers: [{ //marker标记位置
                    id: 0,
                    latitude: 0,
                    longitude: 0,
                    // width:30,
                    // height:30,
                    iconPath: '../../static/img/location.png'
                }],
                missionNo: "",
                isShow: '',
                type: '',
                id: '',
                src: 'https://jlfiles.oss-cn-zhangjiakou.aliyuncs.com/jobslink-api/doc/%E7%94%B5%E5%AD%90%E5%90%88%E5%90%8C%E9%A2%84%E8%A7%88%E5%9B%BE%E7%89%87.png',
                maxlength: 6,
                collectStatus: 0, // 收藏状态
                showPopUp: false,
            }
        },
        components: {
            uniMask,
            validCode,
            uniPopup
        },
        onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
            // this.$store.dispatch('setAutograph')
            if (option.missionNo) {
                this.missionNo = decodeURIComponent(option.missionNo);
            }
            if (option.isCan) {
                this.isShow = option.isCan; //isShow为'0'则为我的任务、我的评价过来的，需要隐藏抢任务按钮
            }
            if (option.type) {
                this.type = option.type; //type为1则为消息邀请过来的,需要设置消息已读;
            }
            if (option.id) {
                this.id = option.id; //消息id
            }
        },
        onShow: function() {
            this.showDetail = true
            this.getData();

        },
        onShareAppMessage(obj) {
            return {
                title: this.info.missionTitle,
                path: `/pages/projectInfo/projectInfo?missionNo=${this.info.missionNo}`
            }
        },
        methods: {
            dateFormat,
            collect() {
                // console.log('收藏，取消收藏')
                const status = this.collectStatus == 0 ? 1 : 0;
                updateCollectStatus(this.info.id, status, 0).then(res => {
                    if (res.data.code == 200) {
                        this.getCollectStatus()
                    }
                })
            },
            callPhone() {
                this.showPopUp = true;
            },
            closePopUp() {
                this.showPopUp = false;
            },
            // 获取收藏状态
            getCollectStatus() {
                getCollectState(this.info.id, 0).then(res => {
                    // 0 未收藏，1 已收藏
                    // console.log(res)
                    this.collectStatus = res.data.data;
                })
            },
            getData: function() {
                const self = this;
                missionDetail(self.missionNo).then(res => {
                    self.info = res.data.data;
                    self.status = res.data.data.detailStatus;
                    AddressToLocation({
                        smart_address: res.data.data.address
                    }).then((result) => {
                        console.log('result', result)
                        self.latitude = result.location.lat;
                        self.longitude = result.location.lon;
                        self.covers[0].latitude = result.location.lat;
                        self.covers[0].longitude = result.location.lon;
                    })
                    // self.latitude = self.info.lat;
                    // self.longitude = self.info.lon;
                    // self.covers[0].latitude = self.info.lat;
                    // self.covers[0].longitude = self.info.lon;
                    self.showDetail = true;
                    self.getCollectStatus();
                    if (self.type === 1) {
                        // 设置已读
                        setRead(self.id).then(res => {
                            self.$store.commit("SET_READ");
                        })
                    }
                }, error => {
                    console.log(error);
                });
            },
            submit: function() {
                const _that = this
                uni.showModal({
                    title: '提示',
                    content: '请确认申请，申请后不能撤销',
                    success: function(res) {
                        if (res.confirm) {
                            if (!_that.$store.state.user.token) {
                                GoLogin()
                                return
                            }
                            if (_that.loading) return
                            const auth = _that.auth
                            const contractOn = _that.info.contractOn
                            const sealOk = _that.autograph && _that.autograph.data && _that.autograph
                                .data.signSrcUrl
                            // if (sealOk) {
                            // 	console.log('直接抢任务')
                            // 	this.submitTask()
                            // } else
                            // if (!auth.realNameState || !auth.laborState || !auth.insureState) {
                            // 	this.goSign(0)
                            // } else if (!auth.bankCardState){
                            // 	this.goSign(1)
                            // } else
                            if (contractOn && !sealOk) {
                                _that.goSign(2)
                            } else if (sealOk && contractOn) {
                                _that.nextBtn = true
                                _that.lookMask()
                            } else {
                                _that.submitTask()
                            }
                        } else if (res.cancel) {
                            _that.$api.msg('取消申请')
                        }
                    }
                });
            },
            // 查看合同
            lookMask() {
                this.maskShow = true
            },
            // 抢任务
            submitTask() {
                submit(this.missionNo, 0).then(res => {
                    uni.hideLoading()
                    uni.showToast({
                        title: '操作成功',
                        icon: 'none'
                    });
                    this.status = null;
                    this.loading = false
                }, error => {
                    this.loading = false
                });
            },
            // 步骤
            goSign(active) {
                uni.navigateTo({
                    url: `/pages/projectInfo/signContract?active=${active}`
                })
            },
            // 关闭弹窗
            close() {
                this.maskShow = false
            },
            // 合同下一步
            next() {
                this.maskShow = false
                this.showDetail = false
                this.showCode = true
            },
            // 输入签名密码
            getInpCode(password) {
                uni.showLoading({
                    title: "请求中..."
                })
                this.loading = true
                var obj = {
                    pass: password
                }
                checkPass(obj).then(res => {
                    this.submitTask()
                    this.closeShowCode()
                }).catch(err => {
                    this.loading = false
                })
            },
            // 关闭签名密码弹窗
            closeShowCode() {
                this.showCode = false
                this.showDetail = true
            },
            // 忘记密码
            forget() {
                uni.navigateTo({
                    url: `/pageMy/setUserBase/seal/forget?forget=true`
                })
            }
        },
        computed: {
            ...mapGetters(['auth', 'autograph', 'area']),
            skillNames() {
                if (this.info.skillNames) {
                    return this.info.skillNames.split(',')
                }
            },
            cityNamed() {
                if (this.info && typeof this.info.cityId !== 'undefined' && this.info.cityId !== -1 && this.area
                    .dic) {
                    return this.area.dic[this.info.cityId].label
                } else {
                    return '无'
                }
            }
        }
    }
</script>

<style lang="scss">
    .codeSealBox {
        padding: 285rpx 72rpx 0 72rpx;

        .closeCode {
            position: absolute;
            right: 36rpx;
            top: 120rpx;
            color: #1B66FF;
            transform: rotate(45deg);
            font-size: 40px;
        }

        .title {
            display: flex;
            align-items: center;
        }

        .name {
            height: 46rpx;
            font-size: 46rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 46rpx;
            margin-right: 28rpx;
        }

        .tip {
            height: 38rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 38rpx;
        }

        .forget {
            height: 38rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #5AA0FA;
            line-height: 38rpx;
            text-align: right;
        }

    }

    .contractMask {
        background-color: #FFFFFF;
        margin: 30rpx;
        position: relative;
        border-radius: 4px;
        height: 96%;
        overflow: auto;

        .close {
            width: 23px;
            height: 23px;
            color: #1B66FF;
            position: fixed;
            right: 60rpx;
            top: 60rpx;
            transform: rotate(45deg);
            font-size: 40px;
        }

        .down {
            position: fixed;
            bottom: 30px;
            left: 14%;
            width: 545rpx;
            height: 90rpx;
            line-height: 90rpx;
            text-align: center;
            background: #1B66FF;
            font-size: 36rpx;
            font-weight: 400;
            color: #FFFFFF;
        }
    }

    .lookContract {
        width: 30%;
        margin-right: 30rpx;
    }

    .flexbtn {
        flex: 1;
    }

    .bottombtn {
        background-color: #1B66FF;
        color: #fff;
        text-align: center;
        border-radius: 10rpx;
        font-family: PingFangSC-Medium;
        font-size: 32rpx;
        height: 90rpx;
        line-height: 90rpx;
    }

    .btn {
        background-color: #fefefe;
        width: 690rpx;
        padding: 30rpx;
        padding-bottom: 80rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
    }

    .disabledBtn {
        background-color: #c8c9cc;
    }

    .map {
        width: 100%;
        height: 350rpx;
        margin-top: 30rpx;
    }

    .askList {
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #666666;
        background-color: #f6f6f6;
        padding: 5rpx 15rpx;
        margin-right: 10rpx;
        margin-top: 15rpx;
    }

    .ask {
        overflow: hidden;
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin: 20rpx 0;

    }

    .proint {
        margin-top: 30rpx;
        font-size: 30rpx !important;
    }

    .proneed {
        font-size: 32rpx !important;

    }

    .fee {
        font-family: PingFangSC-Medium;
        font-size: 32rpx;
        color: #F46161;
        margin-top: 30rpx;
    }

    .protype {
        width: 50%;
    }

    .prolist {
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #666666;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        padding: 5rpx 0;
    }

    .proname {
        font-weight: bold;
        font-family: PingFangSC-Medium;
        font-size: 40rpx;
        color: #333333;
        width: 90%;
        overflow: hidden;
        padding-bottom: 20rpx;
    }

    .head {
        padding: 30rpx;
        background: #fefefe;
        border-bottom: 20rpx solid #f6f6f6;
    }

    .description {
        word-break: break-all;
        white-space: pre-line;
    }
</style>