lin fan
728 lines
37 KiB
PHP
728 lines
37 KiB
PHP
<link rel="stylesheet" href="/css/h5/market/sytopic/h5.css?20240812">
|
|
<body>
|
|
|
|
<div id="app" style="min-height: 100vh;background-color:<?= $info['bgColor'] ?: '#f6f6f6' ?>" class="relative">
|
|
<div v-show="!isInitLoad" style="width:100vw;height:100vh;" class="relative">
|
|
<div class="absolute box-center-middle w100vw text-center">
|
|
<span class="font-26 color-888"><i class="iconfont icon-loading"></i>页面加载中...</span>
|
|
</div>
|
|
</div>
|
|
<div v-show="isInitLoad" style="display:none;">
|
|
<header v-if="0" class="absolute left-0 top-0 right-0 z-index-1">
|
|
<div class="fn-flex fn-flex-between fn-flex-middle ulib-rb30 bg-fff pl30 pr30 pt20 pb20">
|
|
<a href="/h5/market/sylive2/biz?type=1" v-if="info.isAdmin && info.biz.biz_name">
|
|
<div class="font-26"><i class="iconfont icon-tuichu"></i><span class="ml5">返回</span></div>
|
|
</a>
|
|
<div class="fn-flex">
|
|
<a href="/h5/market/sytopic/ucenter?skey=<?= $skey ?>">
|
|
<van-tag color="#1a1a1a" round class="ml20">
|
|
<van-icon name="gem-o" class="mr5"></van-icon>
|
|
我的权益
|
|
</van-tag>
|
|
</a>
|
|
<a href="/h5/market/sytopic/welcome/share?skey=<?= $skey ?>" v-if="info.isAdmin && info.biz.biz_name">
|
|
<van-tag color="#1a1a1a" round class="ml20"><i class="iconfont icon-fenxiang mr5"></i>分享</van-tag>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="fixed right-0 top-0 z-index-2 mt100">
|
|
<ul class="font-24 color-fff">
|
|
<!--
|
|
<li class="bg-000-op50 inner10 mb15 ulib-rl750">
|
|
<i class="iconfont icon-tuichu"></i><span class="ml10">退出</span>
|
|
</li>
|
|
<li class="bg-000-op50 inner10 mb15 ulib-rl750">
|
|
<a class="" href="/h5/market/sylive2/biz?type=1" class="color-fff" v-if="info.isAdmin">
|
|
<van-icon name="revoke"></van-icon>
|
|
<span class="ml10">返回</span>
|
|
</a>
|
|
</li>
|
|
-->
|
|
<!--
|
|
<li class="bg-000-op50 inner10 mb15 ulib-rl750"><a href="/h5/market/sytopic/ucenter?skey=<?= $skey ?>" class="color-fff"><van-icon name="gem-o"></van-icon><span class="ml10">权益</span></a></li>
|
|
-->
|
|
<li class="bg-000-op50 inner10 mb15 ulib-rl750" v-if="info.isAdmin && info.biz.biz_name">
|
|
<a href="/h5/market/sylive2/biz?type=1" class="color-fff">
|
|
<van-icon name="replay"></van-icon>
|
|
<span class="ml10">切换</span>
|
|
</a>
|
|
</li>
|
|
<li class="bg-000-op50 inner10 mb15 ulib-rl750" v-if="info.isAdmin && info.biz.biz_name">
|
|
<a href="/h5/market/sytopic/welcome/share?skey=<?= $skey ?>" class="color-fff">
|
|
<i class="iconfont icon-fenxiang"></i><span class="ml10">分享</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 头图模块 -->
|
|
<div style="margin-bottom: -7vw;" v-if="info && info.banner">
|
|
<van-image :src="info.banner"></van-image>
|
|
</div>
|
|
|
|
<!-- 20240807 信息模块 -->
|
|
<div class="card-module-1">
|
|
<div class="inner30 pb0 mb20" v-if="info.biz.biz_name">
|
|
<div class="fn-flex fn-flex-between fn-flex-middle font-28">
|
|
<div class="fn-flex fn-flex-middle fn-flex-item">
|
|
<h3 class="font-32 text-middle" style="line-height: 1.4;">
|
|
<span>{{info.biz.biz_name}}</span>
|
|
<span class="bg-f8e26a inline-block ulib-r750 pl10 pr10 pt2 pb2 font-24 ml10">官方</span>
|
|
</h3>
|
|
</div>
|
|
<!--
|
|
<div style="width: 25vw;" class="text-right">
|
|
<a class="color-999" href="">
|
|
厦门共2家
|
|
<van-icon name="arrow"></van-icon>
|
|
</a>
|
|
</div>
|
|
-->
|
|
</div>
|
|
<div class="fn-flex fn-flex-between fn-flex-middle">
|
|
<div>
|
|
<div @click.stop="openLocation" class="fn-flex fn-flex-middle color-666 font-24 mt15">
|
|
<p class="text-nowrap" style="width: 50vw;">{{info.biz.address}}</p>
|
|
<van-icon name="arrow"></van-icon>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: -20px">
|
|
<ul class="fn-flex fn-flex-middle text-center font-24 color-555">
|
|
<li class="ml20 mr20">
|
|
<a class="color-555" :href="'tel:'+info.channelTel">
|
|
<i class="inline-block d-icon-10"></i>
|
|
<p>电话</p>
|
|
</a>
|
|
</li>
|
|
<li class="ml20 mr20" @click="showGwEnroll()">
|
|
<i class="inline-block d-icon-11"></i>
|
|
<p>咨询</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="logo_list.length>0" class="mt10">
|
|
|
|
<div v-if="logo_list.length>4" class="swiper swiperlogo">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide" v-for="(item, index) in logo_list" :key="index">
|
|
<a href="javascript:void(0)" @click="showEnroll(item.type,item,false)">
|
|
<img :src="item.banner" alt=""/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="ml30">
|
|
<ul class="fn-flex fn-flex-middle">
|
|
<li class="mr20" v-for="(item, index) in logo_list" :key="index">
|
|
<a href="javascript:void(0)" @click="showEnroll(item.type,item,false)">
|
|
<van-image width="20.8vw" height="27.6vw" :src="item.banner"></van-image>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<template v-for="(item,k) in modules" v-if="modules&&modules.length>0">
|
|
<!--直接报名模块-->
|
|
<div class="card-module" v-if="item.type && item.type==9 && item.lists && item.lists.length>0">
|
|
<div class="ignore-rounded-isosceles-trapezoid absolute box-center top-0 pl5 pr5 text-center">
|
|
<div class="ignore-trapezoid-middle font-34 color-fff">{{item.title}}</div>
|
|
</div>
|
|
<div class="bg-fff ulib-rt30 mb20 font-26 mt30" style="line-height: 6vw" v-if="info.biz.id == 1 || info.biz.id == 10 ">
|
|
汽车之家空间站是线下版的汽车之家,为消费者提供”省心、省时、省钱“的便捷汽车消费服务体验，
|
|
实现一站式”看车-买车-用车-换车“，同时推出买贵必赔服务，最高可获2万元差价赔付！
|
|
</div>
|
|
<div class="bg-fff ulib-rt30 mb20 font-26 mt30" style="line-height: 6vw" v-else>
|
|
汽车之家·车卖场旨在为用户提供更加直接、便捷的购车服务。如果您还在为买车询价总询不到准确价格，
|
|
跑了三四家店每家店价格都不一样而烦恼，汽车之家查底价汇聚千万车主真实成交价助您解决价格焦虑!
|
|
</div>
|
|
<div class="ulib-rt30 bg-fff fn-flex overflowhidden" style="margin:0;">
|
|
<div v-if="info.biz.biz_name" class="fn-flex fn-flex-center fn-flex-middle wp30"
|
|
style="flex-direction: column;background-image: linear-gradient(to bottom, #f7f2ca,#fbfae8); border-radius:40px 40px 0 0;">
|
|
<div class="text-center pl5 pr5" style="width: 100%;">
|
|
<van-image class="bds-2-fff" round width="12vw" height="12vw"
|
|
:src="info.channelHeadImg"></van-image>
|
|
<p class="font-28 mt10 text-nowrap">{{info.channelName}}</p>
|
|
</div>
|
|
<div class="text-center pl5 pr5 mt50" style="width: 100%;">
|
|
<span class="bg-fff ulib-r750 inline-block pt5 pb5 pl15 pr15 font-24">车管家</span>
|
|
<p class="font-22 mt10 color-888 text-nowrap" v-if="info.biz">{{info.biz.biz_name}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="inner30 fn-flex-item">
|
|
<!--
|
|
<h3 class="text-center font-36 pt10 pb10 mb15">{{item.lists[0].title}}</h3>
|
|
-->
|
|
<!--div class="bg-f1 ulib-r20 mb30">
|
|
<van-field v-model="form.name" label="" placeholder="请输入您的姓名"></van-field>
|
|
</div-->
|
|
<div class="bg-f1 ulib-r20 mb30">
|
|
<van-field v-model="form.phone" label="" placeholder="请输入您的手机号"></van-field>
|
|
</div>
|
|
<div class="bg-f1 ulib-r20 mb30">
|
|
<van-field v-model="form.code" label="" placeholder="请输入验证码">
|
|
<template #button>
|
|
<p v-if="!show_retry" class="color-666 font-26" @click="getCode">发送验证码</p>
|
|
<van-count-down style="color:#999;" v-else :time="counttime" :auto-start="true"
|
|
format="ss 秒后重发" @finish="retrySend"/>
|
|
</template>
|
|
</van-field>
|
|
</div>
|
|
<div>
|
|
<button class="btn ulib-r20 bg-f8e26a block font-30 wp100 pt20 pb20 mt50" @click="enrollModel(item.lists[0].id)">{{item.lists[0].title}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 报名模块 - 大图轮播 -->
|
|
<div class="card-module" v-if="item.type && item.type==2 && item.lists && item.lists.length>0">
|
|
<div v-if="0" class="absolute left-0 top-0 right-0" style="margin-top: -10vw;">
|
|
<van-notice-bar left-icon="" background="transparent" color="#f8e26a" :scrollable="false"
|
|
style="padding-left: 0;">
|
|
<van-swipe
|
|
vertical
|
|
class="notice-swipe"
|
|
:autoplay="3000"
|
|
:show-indicators="false"
|
|
>
|
|
<van-swipe-item>
|
|
<span class="font-24 bg-000-op50 ulib-r750 pt5 pb5 pl15 pr15 inline-block">
|
|
<van-icon name="point-gift" class="mr5"></van-icon>张**领取了大礼包
|
|
</span>
|
|
</van-swipe-item>
|
|
</van-swipe>
|
|
</van-notice-bar>
|
|
</div>
|
|
<div class="swpier relative">
|
|
<van-swipe
|
|
ref="carswiper"
|
|
class="swpier"
|
|
:autoplay="5000"
|
|
:show-indicators="false"
|
|
:initial-swipe="car_swiper_index"
|
|
>
|
|
<van-swipe-item v-for="(val,key) in item.lists" :key="key">
|
|
<div class="inner10">
|
|
<div class="fn-flex fn-flex-between fn-flex-middle">
|
|
<h3 class="font-36">{{val.title}}</h3>
|
|
<p><span class="font-24">官方指导价</span><span class="color-fdad67 ml10 font-30">{{val.subTitle}}</span>
|
|
</p>
|
|
</div>
|
|
<div class="font-24 mt20 color-888 line-height-15" style="text-align: justify;">
|
|
{{val.introduction}}
|
|
</div>
|
|
<div>
|
|
<van-image :src="val.banner"></van-image>
|
|
</div>
|
|
<div class="fn-flex fn-flex-wrap fn-flex-between"
|
|
v-if="val.otherImg && val.otherImg.length>0">
|
|
<!-- 一行一图wp100 一行两图wp48 一行三图wp31 -->
|
|
<div :class="[val.otherImg.length==1?'wp100':val.otherImg.length==2?'wp48':'wp31','mb15']"
|
|
v-for="val1 in val.otherImg">
|
|
<van-image class="wp100" :src="val1"></van-image>
|
|
</div>
|
|
</div>
|
|
<div class="pt20" v-if="val.showBtn">
|
|
<p class="text-center fn-flex fn-flex-center fn-flex-middle font-24"
|
|
v-if="val.showTime">
|
|
<template v-if="val.endTime>0">
|
|
<span class=" mr10">距截止日期还剩</span>
|
|
<van-count-down :time="val.endTime*1000" format="DD 天 HH 时 mm 分"/>
|
|
</template>
|
|
<template v-else>
|
|
<span class=" mr10">报名已截止</span>
|
|
</template>
|
|
</p>
|
|
<div class="mt15">
|
|
<button class="btn ulib-r20 bg-f8e26a block font-28 wp100 pt20 pb20"
|
|
v-if="val.enroll" @click="showEnroll(item.type,val)">
|
|
{{val.btnText}} {{val.limitText}}
|
|
</button>
|
|
<button class="btn ulib-r20 bg-f8e26a block font-28 wp100 pt20 pb20" v-else>
|
|
{{val.btnText}} {{val.limitText}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</van-swipe-item>
|
|
</van-swipe>
|
|
<div @click="bindCarPrev" class="absolute top-0 left-0 mt310 imgsize-60X60 ulib-r750 bds-1-ddd bg-fff">
|
|
<van-icon class="absolute box-center-middle" size="20" color="#ddd" name="arrow-left"></van-icon>
|
|
</div>
|
|
<div @click="bindCarNext" class="absolute top-0 right-0 mt310 imgsize-60X60 ulib-r750 bds-1-ddd bg-fff">
|
|
<van-icon class="absolute box-center-middle" size="20" color="#ddd" name="arrow"></van-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图片模块 - 轮播 -->
|
|
<div class="card-module overflowhidden" style="padding: 0;"
|
|
v-if="item.type && item.type==3 && item.lists && item.lists.length>0">
|
|
<div class="swpier">
|
|
<van-swipe :autoplay="4000">
|
|
<van-swipe-item v-for="(val,key) in item.lists" :key="key">
|
|
<a :href="val.targetUrl">
|
|
<van-image :src="val.banner"></van-image>
|
|
</a>
|
|
</van-swipe-item>
|
|
</van-swipe>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 报名模块 - 一行两列 -->
|
|
<div class="pl30 pr30 relative" v-if="item.type && item.type==-999 && item.lists && item.lists.length>0">
|
|
<div class="fn-flex fn-flex-wrap fn-flex-between">
|
|
<div class="wp48 text-center inner20 ulib-r20 bg-fff mb20" v-for="(val,key) in item.lists" :key="key">
|
|
<van-image :src="val.banner"></van-image>
|
|
<h3 class="font-34">{{val.title}}</h3>
|
|
<p class="ulib-r750 bg-f6 color-888 font-22 pt5 pb5 mt30" v-if="val.subTitle">
|
|
<span class="ml5">{{val.subTitle}}</span>
|
|
</p>
|
|
<div class="mt50 ml30 mr30 relative" v-if="val.showBtn">
|
|
<span class="bg-f8e26a ulib-r750 font-20 pt5 pb5 pl10 pr10 absolute left-0 top-0"
|
|
style="margin-top:-3.5vw;">{{val.introduction}}</span>
|
|
<button class="btn ulib-r20 bg-000 color-fff block font-28 wp100 pt20 pb20"
|
|
@click="showEnroll(item.type,val)">
|
|
{{val.btnText}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 报名模块 一行两列 0826 -->
|
|
<div class="card-module" v-if="item.type && item.type==4 && item.lists && item.lists.length>0">
|
|
<div class="ignore-rounded-isosceles-trapezoid absolute box-center top-0 pl5 pr5 text-center">
|
|
<div class="ignore-trapezoid-middle font-34 color-fff">{{item.title}}</div>
|
|
</div>
|
|
<div class="fn-flex fn-flex-wrap fn-flex-between mt20">
|
|
<div class="wp48 text-center ulib-r20 bg-fff mb30" v-for="(val,key) in item.lists" :key="key">
|
|
<div class="ml20 mr20"><van-image :src="val.banner"></van-image></div>
|
|
<div class="bg-f5 ulib-r20 pt80 pb30" style="margin-top: -12vw;">
|
|
<h3 class="font-34">{{val.title}}</h3>
|
|
<div class="d-coupon mt15 fn-flex fn-flex-center fn-flex-middle" v-if="val.jsonData && val.jsonData.dis_money">
|
|
<div class="left"></div>
|
|
<div class="middle pl10 pr10 color-fff font-22 fn-flex fn-flex-center fn-flex-middle" style="flex-direction: column;">
|
|
<div class="fn-flex fn-flex-center text-nowrap" style="align-items: baseline;">
|
|
<h5 class="font-30">{{val.jsonData.dis_money}}</h5><p class="font-20 ml5">元</p>
|
|
</div>
|
|
<p class="font-20 mt5 text-nowrap">{{val.jsonData.dis_title}}</p>
|
|
</div>
|
|
<div class="right"></div>
|
|
</div>
|
|
<div class="mt50 ml30 mr30 relative">
|
|
<span v-if="val.introduction" class="bg-f8e26a ulib-r750 font-20 pt5 pb5 pl10 pr10 absolute left-0 top-0" style="margin-top:-3.5vw;white-space:nowrap;">{{val.introduction}}</span>
|
|
<button class="btn ulib-r20 bg-000 color-fff block font-28 wp100 pt20 pb20" @click="showEnroll(item.type,val)">{{val.btnText}}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 报名模块 - 一行一列 -->
|
|
<div class="card-module" style="padding-bottom: 0;" v-if="item.type && item.type==5 && item.lists && item.lists.length>0">
|
|
<div :class="['fn-flex fn-flex-middle', 'pb30']" v-for="(val,key) in item.lists" :key="key">
|
|
<div class="wp25">
|
|
<van-image :src="val.banner"></van-image>
|
|
</div>
|
|
<div class="wp50 ml20 fn-flex fn-flex-center" style="flex-direction: column;">
|
|
<h3 class="font-32 text-nowrap">{{val.title}}</h3>
|
|
<p class="ulib-r750 color-888 font-22 mt10">
|
|
<span class="ml5">{{val.subTitle}}</span>
|
|
</p>
|
|
</div>
|
|
<div class="fn-flex-item" v-if="val.showBtn">
|
|
<button class="btn ulib-r20 bg-000 color-fff block font-28 wp100 pt20 pb20"
|
|
@click="showEnroll(item.type,val)">{{val.btnText}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 文章模块 -->
|
|
<div v-if="item.type && item.type==6 && item.lists && item.lists.length>0">
|
|
<template v-for="(val,key) in item.lists" :key="key">
|
|
<div class="card-module">
|
|
<div class="pt20 pb20">
|
|
<div v-if="val.showBtn">
|
|
<h3 class="font-36">{{val.title}}</h3>
|
|
<p class="color-aaa font-24 mt15">{{val.createTime}}</p>
|
|
</div>
|
|
<div class="font-28 mt30 color-666 line-height-15 color-555" v-html="val.introduction"></div>
|
|
|
|
<div class="mt60" v-if="0">
|
|
<div class="relative">
|
|
<a href=""><img src=""/></a>
|
|
<span class="bg-fff absolute left-0 bottom-0 color-666 font-20 op70 pt5 pb5 pl5 pr5">广告</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- 到店有礼模块 20240809-->
|
|
<template v-if="item.type && item.type==8 && item.lists && item.lists.length>0">
|
|
<div class="card-module" v-for="(val,key) in item.lists" :key="key">
|
|
<div class="ignore-rounded-isosceles-trapezoid absolute box-center top-0 pl5 pr5 text-center">
|
|
<div class="ignore-trapezoid-middle font-34 color-fff">{{val.model_title}}</div>
|
|
</div>
|
|
<div class="fn-flex ignore-rounded-padding">
|
|
<div>
|
|
<van-image width="30vw" height="30vw" radius="2.7vw" fit="cover" :src="val.banner"></van-image>
|
|
</div>
|
|
<div class="fn-flex fn-flex-between ml20" style="width:52vw; flex-direction: column;">
|
|
<div class="pt5">
|
|
<h3 class="font-32 text-nowrap">{{val.title}}</h3>
|
|
<p class="font-24 color-555 mt20 text-nowrap">{{val.introduction}}</p>
|
|
<div class="ulib-r750 fn-flex overflowhidden mt10" style="border-top-left-radius: 0;"
|
|
v-if="val.enrollEndTime">
|
|
<span class="font-22 color-333 bg-f8e26a pt5 pb5 pl10 pr10">截止时间</span>
|
|
<span class="font-22 color-fff bg-1a1a1a fn-flex-item pt5 pb5 pl10">{{val.enrollEndTime}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="fn-flex fn-flex-between fn-flex-middle mt10">
|
|
<div class="text-middle">
|
|
<span class="font-22 color-999">市场价</span>
|
|
<span class="font-36 color-ff0000">￥ {{val.subTitle}}</span>
|
|
</div>
|
|
<div>
|
|
<div class="btn ulib-r750 font-28 bg-f8e26a pt10 pb10 pl20 pr20"
|
|
@click="showEnroll(item.type,val,false)" v-if="val.enroll">
|
|
{{val.btnText}}
|
|
</div>
|
|
<div class="btn ulib-r750 font-28 bg-f8e26a pt10 pb10 pl20 pr20" v-else>
|
|
{{val.btnText}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<aside class="fixed right-0 bottom-0 mr30 mb100 z-index-10" v-if="info.buttonType">
|
|
<ul>
|
|
<li class="mt20" v-if="info.buttonType==1">
|
|
<div class="imgsize-120X120 relative" @click="showGwEnroll()">
|
|
<van-image style="border: 0.6vw solid #ff3c3a;" width="16vw" height="16vw" fit="cover" round
|
|
:src="info.channelHeadImg"></van-image>
|
|
<i class="absolute left-0 right-0 bottom-0 mb5 d-icon-9"></i>
|
|
</div>
|
|
</li>
|
|
<li class="mt20" v-if="info.buttonType==2">
|
|
<span @click="showGwEnroll()">
|
|
<i class="inline-block d-icon-8"></i>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
<div v-if="info.bottom_img" style="padding:0">
|
|
<img :src="info.bottom_img" style="width: 100%">
|
|
</div>
|
|
<!-- 富文本模块 -->
|
|
<div v-if="0" class="card-module overflowhidden" style="padding:0;background-color: transparent;">
|
|
<div class="font-28 line-height-15 color-555" v-html="info.content"></div>
|
|
</div>
|
|
|
|
<!-- 报名弹窗 - 中间显示 -->
|
|
<van-popup v-model="show_signup_center" :style="{ 'background-color': 'transparent' }">
|
|
<div class="card-module" style="width: 84vw;">
|
|
<div class="inner10">
|
|
<h3 class="text-center font-36 pt0 pb20">{{popCarInfo.mTitle ? popCarInfo.mTitle : info.title}}</h3>
|
|
<div class="fn-flex fn-flex-center fn-flex-middle" v-if="showOptionTitle">
|
|
<div class="wp33">
|
|
<van-image :src="popCarInfo.banner"></van-image>
|
|
</div>
|
|
<div class=" ml20 fn-flex fn-flex-center" style="flex-direction: column;">
|
|
<h3 class="font-32 text-nowrap">{{popCarInfo.title}}</h3>
|
|
<p class="ulib-r750 color-888 font-22 mt10"><span class="ml5">{{popCarInfo.subTitle}}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!--div class="bg-f1 ulib-r20 mb30">
|
|
<van-field v-model="form.name" label="" placeholder="请输入您的姓名"></van-field>
|
|
</div-->
|
|
<div class="bg-f1 ulib-r20 mb30">
|
|
<van-field v-model="form.phone" label="" placeholder="请输入您的常用手机号"></van-field>
|
|
</div>
|
|
<div class="bg-f1 ulib-r20 mb30">
|
|
<van-field v-model="form.code" label="" placeholder="请输入手机验证码">
|
|
<template #button>
|
|
<p v-if="!show_retry" class="color-666 font-26" @click="getCode">发送验证码</p>
|
|
<van-count-down style="color:#999;" v-else :time="counttime" :auto-start="true"
|
|
format="ss 秒后重发" @finish="retrySend"/>
|
|
</template>
|
|
</van-field>
|
|
</div>
|
|
<div>
|
|
<button class="btn ulib-r20 bg-f8e26a block font-30 wp100 pt20 pb20 mt50" @click="enroll">
|
|
立即预约
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</van-popup>
|
|
|
|
<!-- 报名弹窗 - 底部显示 -->
|
|
<van-popup v-model="show_signup_bottom" position="bottom"
|
|
:style="{ 'min-height': '30%', 'background-color': 'transparent' }">
|
|
<div class="inner30 ulib-rt30 bg-fff" style="width: 100vw;margin:0;">
|
|
<div class="inner10">
|
|
<h3 class="text-center font-36 pt0 pb20">{{popCarInfo.mTitle ? popCarInfo.mTitle : info.title}}</h3>
|
|
<div class="fn-flex fn-flex-center fn-flex-middle" v-if="showOptionTitle">
|
|
<div class="wp33">
|
|
<van-image :src="popCarInfo.banner"></van-image>
|
|
</div>
|
|
<div class=" ml20 fn-flex fn-flex-center" style="flex-direction: column;">
|
|
<h3 class="font-32 text-nowrap">{{popCarInfo.title}}</h3>
|
|
<p class="ulib-r750 color-888 font-22 mt10"><span class="ml5">{{popCarInfo.subTitle}}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!--div class="bg-f1 ulib-r20 mb30">
|
|
<van-field v-model="form.name" label="" placeholder="请输入您的姓名"></van-field>
|
|
</div-->
|
|
<div class="bg-f1 ulib-r20 mb30">
|
|
<van-field v-model="form.phone" label="" placeholder="请输入您的常用手机号"></van-field>
|
|
</div>
|
|
<div class="bg-f1 ulib-r20 mb30">
|
|
<van-field v-model="form.code" label="" placeholder="请输入手机验证码">
|
|
<template #button>
|
|
<p v-if="!show_retry" class="color-666 font-26" @click="getCode">发送验证码</p>
|
|
<van-count-down style="color:#999;" v-else :time="counttime" :auto-start="true"
|
|
format="ss 秒后重发" @finish="retrySend"/>
|
|
</template>
|
|
</van-field>
|
|
</div>
|
|
<div>
|
|
<button class="btn ulib-r20 bg-f8e26a block font-30 wp100 pt20 pb20 mt50" @click="enroll">
|
|
立即预约
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</van-popup>
|
|
|
|
<!-- 报名弹窗 - 底部显示 - 经纪人 20240806 -->
|
|
<van-popup v-model="show_signup_agent_bottom" position="bottom"
|
|
:style="{ 'min-height': '30%', 'background-color': 'transparent' }">
|
|
|
|
<div class="ulib-rt30 bg-fff fn-flex overflowhidden w100vw" style="margin:0;">
|
|
<div class="fn-flex fn-flex-center fn-flex-middle wp30" v-if="info.biz.biz_name"
|
|
style="flex-direction: column;background-image: linear-gradient(to bottom, #f7f2ca,#fbfae8);">
|
|
<div class="text-center pl5 pr5" style="width: 100%;">
|
|
<van-image class="bds-2-fff" round width="12vw" height="12vw"
|
|
:src="info.channelHeadImg"></van-image>
|
|
<p class="font-28 mt10 text-nowrap">{{info.channelName}}</p>
|
|
</div>
|
|
<div class="text-center pl5 pr5 mt50" style="width: 100%;" >
|
|
<span class="bg-fff ulib-r750 inline-block pt5 pb5 pl15 pr15 font-24">车管家</span>
|
|
<p class="font-22 mt10 color-888 text-nowrap" v-if="info.biz">{{info.biz.biz_name}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="inner30 fn-flex-item">
|
|
<h3 class="text-center font-30 pt10 pb10 mb15">{{info.title}}</h3>
|
|
<!--
|
|
<div class="box-shadow-darkGray inner10 ulib-r20 mb30 relative" style="background-color: #fffff8;">
|
|
<div class="fn-flex fn-flex-center fn-flex-middle">
|
|
<div class="wp33">
|
|
<van-image src="/img/car.png"></van-image>
|
|
</div>
|
|
<div class=" ml20 fn-flex fn-flex-center" style="flex-direction: column;">
|
|
<h3 class="font-32 text-nowrap">蔚来ES7</h3>
|
|
<p class="ulib-r750 color-888 font-22 mt10"><span>指导价</span><span class="ml5">13.36万 - 17.39万</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="msg-arrow absolute box-middle"></div>
|
|
</div>
|
|
-->
|
|
<!--div class="bg-f1 ulib-r20 mb30">
|
|
<van-field v-model="form.name" label="" placeholder="请输入您的姓名"></van-field>
|
|
</di-->
|
|
<div class="bg-f1 ulib-r20 mb30">
|
|
<van-field v-model="form.phone" label="" placeholder="请输入您的手机号"></van-field>
|
|
</div>
|
|
<div class="bg-f1 ulib-r20 mb30">
|
|
<van-field v-model="form.code" label="" placeholder="请输入验证码">
|
|
<template #button>
|
|
<p v-if="!show_retry" class="color-666 font-26" @click="getCode">发送验证码</p>
|
|
<van-count-down style="color:#999;" v-else :time="counttime" :auto-start="true"
|
|
format="ss 秒后重发" @finish="retrySend"/>
|
|
</template>
|
|
</van-field>
|
|
</div>
|
|
<div>
|
|
<button class="btn ulib-r20 bg-f8e26a block font-30 wp100 pt20 pb20 mt50" @click="enroll">立即预约
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</van-popup>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
let app = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
isInitLoad: false,
|
|
info: <?=json_encode($info);?>,
|
|
bg: '/img/h5/sytopic/bg.jpg',
|
|
modules: <?=$modules ? json_encode($modules, JSON_UNESCAPED_UNICODE) : '[]'?>,
|
|
car_swiper_index: 0,
|
|
show_signup_center: false,
|
|
show_signup_bottom: false,
|
|
show_signup_agent_bottom: false, //20240806
|
|
form: {
|
|
name: '',
|
|
phone: '',
|
|
code: ''
|
|
},
|
|
popCarInfo: {
|
|
banner: '',
|
|
title: '',
|
|
subTitle: '',
|
|
mTitle: ''
|
|
},
|
|
isSubmiting: false,
|
|
optionId: 0,
|
|
counttime: 60000,
|
|
show_retry: false,
|
|
logo_list: <?=json_encode($logoList);?>,
|
|
showOptionTitle: true,//是否显示弹窗项目配置信息
|
|
}
|
|
},
|
|
mounted() {
|
|
setTimeout(() => {
|
|
this.isInitLoad = true
|
|
}, 400);
|
|
setTimeout(() => {
|
|
this.initSwpier(); // 20240807
|
|
}, 500);
|
|
},
|
|
methods: {
|
|
showGwEnroll() {
|
|
this.show_signup_agent_bottom = true
|
|
},
|
|
showEnroll(type, row, showOptionTitle = true) {
|
|
let popUpType = row.popUpType ? parseInt(row.popUpType) : 0
|
|
this.popCarInfo.title = row.title
|
|
this.popCarInfo.subTitle = row.subTitle
|
|
this.popCarInfo.banner = row.banner
|
|
this.optionId = row.id
|
|
if (popUpType === 1) {
|
|
this.show_signup_bottom = true
|
|
} else {
|
|
this.show_signup_center = true
|
|
}
|
|
if(row.model_title){
|
|
this.popCarInfo.mTitle = row.model_title
|
|
}else{
|
|
this.popCarInfo.mTitle = ''
|
|
}
|
|
this.showOptionTitle = showOptionTitle
|
|
},
|
|
getCode() { //获取验证码
|
|
if (this.isSubmiting) {
|
|
return false
|
|
}
|
|
if (!this.form.phone) {
|
|
mDialog.msg({content: "请输入手机号"})
|
|
return false
|
|
}
|
|
this.isSubmiting = true
|
|
this.show_retry = true
|
|
this.counttime = 60000
|
|
var that = this;
|
|
$.post('/h5/market/sytopic/welcome/get_code', {
|
|
'mobile': this.form.phone,
|
|
'skey': '<?=$skey?>'
|
|
}, function (res) {
|
|
that.isSubmiting = false
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: res.msg
|
|
});
|
|
}, 'json');
|
|
},
|
|
retrySend() {
|
|
this.show_retry = false
|
|
},
|
|
enroll() {
|
|
if (this.isSubmiting) {
|
|
return false
|
|
} else if (!this.form.phone) {
|
|
mDialog.msg({content: "请输入手机号"})
|
|
} else if (!this.form.code) {
|
|
mDialog.msg({content: "请输入验证码"})
|
|
} else {
|
|
this.isSubmiting = true
|
|
var that = this;
|
|
$.post('/h5/market/sytopic/welcome/enroll', {
|
|
'optionId': this.optionId,
|
|
'topicId': this.info.id,
|
|
'skey': '<?=$skey?>',
|
|
'info': this.form
|
|
}, function (res) {
|
|
that.isSubmiting = false
|
|
if (res.code == 200) {
|
|
that.show_signup_bottom = false
|
|
that.show_signup_center = false
|
|
that.form.phone = ''
|
|
that.form.name = ''
|
|
that.form.code = ''
|
|
}
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: res.msg
|
|
});
|
|
}, 'json');
|
|
}
|
|
},
|
|
enrollModel($optionId) { //直接报名模块
|
|
this.optionId = $optionId
|
|
this.enroll();
|
|
},
|
|
bindCarNext() {
|
|
this.$refs.carswiper.next();
|
|
},
|
|
bindCarPrev() {
|
|
this.$refs.carswiper.prev();
|
|
},
|
|
initSwpier() { //品牌logo轮播初始化 20240807
|
|
if (this.logo_list.length > 4) {
|
|
var swiper = new Swiper(".swiperlogo", {
|
|
slidesPerView: 4,
|
|
spaceBetween: 10,
|
|
centeredSlides: true,
|
|
loop: true,
|
|
autoplay: true,
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true,
|
|
},
|
|
});
|
|
}
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
</body>
|