odd_job/app/mobile/view/worker/recruit_detail.html

{extend name="public/base"/}
{block name="css"}
<style>
    .base-content .header {background-image:url("__MIMAGES__/detail_header.jpg");background-repeat:no-repeat;background-size:100% 70px;width:100%;height:70px;display:flex;align-items:center;justify-content:center;padding:0 20px;}
    .base-content .header .left {flex:1;display:flex;flex-direction:column;}
    .base-content .header .salary-box {line-height:24px;height:24px;flex:1;}
    .base-content .header .salary-box .salary {color:white;font-size:24px;font-weight:bold;}
    .base-content .header .salary-box .text {color:white;font-size:14px;margin-left:5px;}
    .base-content .header .company-name {color:white;font-size:14px;}
    .base-content .header .phone-box {display:flex;flex-direction:column;}
    .base-content .header .phone-box .text{color:white;}
    .base-content .title {background:white;padding:10px 20px;color:#000;font-size:18px;}
    .base-content .tags {background:white;padding:0 20px 10px 20px;}
    .base-content .tags .van-tag {margin-right:5px;}
    .base-content .introduce {background:white;}
    .base-content .introduce .introduce-item {border-top:1px solid #f0f0f0;padding:5px 20px;display:flex;align-items:center;}
    .base-content .introduce .introduce-item .van-image{margin-right:5px;}
    .base-content .introduce .introduce-item .split{margin:0 15px;}
    .describe {margin-top:10px;background:white;}
    .describe .header {padding:10px 20px;font-size:16px;border-bottom:1px solid #f0f0f0;}
    .describe .content {padding:10px 20px;}
    .describe .content pre {font-size: 14px;line-height: 20px;padding: 0;margin: 0;font-family: "Microsoft Yahei",arial,"Hiragino Sans GB","Hiragino Sans GB W3",宋体,simsun;}
    .footer .van-button {width:50%;border-radius:0;}
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">详情</span>
    </template>
</van-nav-bar>
<div class="base-content">
    <div class="header">
        <div class="left">
            <div class="salary-box">
                <van-image
                        width="15px"
                        src="__MIMAGES__/icon_salary_white.png"
                ></van-image>
                <span class="text">工资：</span>
                <span class="salary">{{info.salary}}</span>
            </div>
            <div class="company-name">{{info.company_name}}</div>
        </div>
    </div>
    <div class="title">{{info.title}}</div>
    <div class="tags" v-if="info.tags.length > 0">
        <van-tag type="primary" size="large" v-for="tag in info.tags">{{tag}}</van-tag>
    </div>
    <div class="introduce">
        <div class="introduce-item">
            <van-image
                    width="15px"
                    src="__MIMAGES__/icon_num.png"
            ></van-image>
            <span>招聘人数:{{info.num}}</span>
            <span class="split">|</span>
            <van-image
                    width="15px"
                    src="__MIMAGES__/icon_age.png"
            ></van-image>
            <span>年龄:{{info.agegroup}}</span>
        </div>
        <div class="introduce-item">
            <van-image
                    width="15px"
                    src="__MIMAGES__/icon_address.png"
            ></van-image>
            <span>{{info.province}}{{info.city}}{{info.district}}{{info.address}}</span>
        </div>
    </div>
</div>

<div class="describe" v-if="info.requirement">
    <div class="header">
        岗位要求
    </div>
    <div class="content">
        <pre>{{info.requirement}}</pre>
    </div>
</div>

<div class="describe" v-if="info.comdetails">
    <div class="header">
        企业简介
    </div>
    <div class="content">
        <pre>{{info.comdetails}}</pre>
    </div>
</div>

<div class="describe" v-if="info.picall.length > 0">
    <div class="header">
        相册
    </div>
    <div class="content">
        <van-grid :border="false">
            <van-grid-item v-for="(image,index) in info.picall">
                <van-image
                        :src="image"
                        @click="showImage(index)"
                ></van-image>
            </van-grid-item>
        </van-grid>
    </div>
</div>

<div class="describe" v-if="info.remark">
    <div class="header">
        补充说明
    </div>
    <div class="content">
        <pre>{{info.remark}}</pre>
    </div>
</div>
<div style="width:100%;height:44px;"></div>
<div style="width:100%;position:fixed;left:0;bottom:0;" class="footer">
    <van-button type="danger" @click="showQrcode">联系客服</van-button>
    <van-button @click="onReport" type="primary">报备</van-button>
</div>

<van-popup v-model:show="qrcodeShow" :style="{ padding: '32px' }">
    <van-image width="100%" src="__STATIC__/images/applet/qrcode_contact.png"></van-image>
    <p style="text-align:center;">长按二维码添加客服</p>
</van-popup>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.active = Vue.ref(0);

        base.info = Vue.reactive({$info});
        base.onPhone = () => {
            location.href = 'tel:' + base.info.telephone;
        };
        base.showImage = (index) => {
            vant.showImagePreview({
                images: base.info.picall,
                startPosition: index,
                loop:false,
            });
        };

        base.qrcodeShow = Vue.ref(false);
        base.showQrcode = () => {
            base.qrcodeShow.value = true;
        };

        base.onReport = () => {
            location.href = "{:url('worker/report')}?id=" + base.info.id;
        };

        base.onBack = () => {
            location.href = "{:url('worker/index')}";
        };

        return base;
    }
</script>
{/block}