代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover">
<meta http-equiv="content-script-type" content="text/javascript"/>
<meta http-equiv="content-style-type" content="text/css"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<title>site name</title>
<link rel="stylesheet" type="text/css" href="../css/liMarquee.css">
</head>
<body>
<div id="container" style="padding-bottom: 1.8rem;" class="container" v-cloak>
<div class="sy_banner">
<div class="swiper-container" id="product_banner">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in banner">
<img :src="item">
</div>
</div>
</div>
<div class="product_xx">
<div class="money">
<div class="new">
<div>拼团：</div>
<p>¥{{grouppurchase_price || '0.00'}}</p>
</div>
<div class="old">原价：￥{{oldprice || '0.00'}}</div>
</div>
<div class="time" v-if="is_open == 1">
<p>距离结束还剩</p>
<van-count-down :time="end_date">
<template #default="timeData">
<span class="block">{{ timeData.days }}</span>
<span class="colon">天 ：</span>
<span class="block">{{ timeData.hours }}</span>
<span class="colon">时 ：</span>
<span class="block">{{ timeData.minutes }}</span>
<span class="colon">分 ：</span>
<span class="block">{{ timeData.seconds }}</span>
<span class="colon">秒</span>
</template>
</van-count-down>
</div>
<div class="time" v-else>
<p>已结束</p>
</div>
</div>
<div class="share" @click="goHb">
<img src="../image/icon_share.png" alt="">
<p>分享</p>
</div>
<div class="news" v-if="orders.length > 0">
<ul>
<li v-for="item in orders">
<img :src="item.avatar">
<p>{{item.user_nick}}已购买</p>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="sy_box">
<div class="product_box">
<div class="text">
<div class="name">{{name}}</div>
<div class="xx">
<p>{{title}}</p>
</div>
</div>
<div class="numb">
<div>
<p>{{count_look || '0'}}</p>
<span>浏览</span>
</div>
<div>
<p>{{count_buy || '0'}}</p>
<span>购买</span>
</div>
</div>
</div>
<div class="pay_record" v-if="orders.length > 0">
<div class="title">购买记录</div>
<div class="list">
<ul>
<li class="nr" v-for="item in orders">
<div>
<img :src="item.avatar" alt="">
<p>{{item.user_nick}}</p>
</div>
<p>支付{{item.amount}}元</p>
<p>{{item.create_time_text}}</p>
</li>
</ul>
</div>
</div>
<div class="spell_group" v-if="is_open == 1 && group.length > 0">
<div class="title">拼团人数</div>
<div class="list">
<div class="nr" v-for="item in group">
<div class="xx">
<img :src="item.avatar" alt="">
<p>{{item.nickname}}</p>
</div>
<div class="num">
<p>还差</p>
<span>{{item.remain}}人</span>
<p>拼成</p>
</div>
<div class="btn" v-if="had_buy == '0'"
@click="getUrl('selection.html?group_id=' + item.group_id + '&type=2')">去拼单
</div>
<div class="btn on" v-else>去拼单</div>
</div>
</div>
<div class="more">
<p @click="getUrl('group_list.html')">查看更多</p>
</div>
</div>
<div class="video_introduction">
<div class="title">视频介绍</div>
<div class="video">
<video :src="video" :poster="videopic" controls="controls"></video>
</div>
<div class="nav">
<div class="nr" :class="video_index == index?'active':''" v-for="(item,index) in act_bind" @click="getVideo(index)">
<div class="pic">
<img :src="item.album" alt="">
</div>
<p>{{item.name}}</p>
</div>
</div>
</div>
</div>
<div class="pro_introduce">
<div class="nav" id="nav">
<p :class="item.type == type?'active':''" v-for="item in nav" @click="getNav(item.type)">
{{item.name}}</p>
</div>
<div class="address" id="address">
<div>{{address}}</div>
<p @click="openMap">设置您的位置</p>
</div>
<div class="event_details" v-html="desc" v-if="type == 1"></div>
<div class="institution_list" v-if="type == 2">
<div class="nr" @click="getInstdetail(item.id)" v-for="item in act_bind">
<div class="pic">
<img :src="item.album" alt="">
</div>
<div class="xx">
<div class="title">{{item.name}}</div>
<p>校区个数：{{item.stores_num}}个</p>
<p>机构课程：{{item.course_num}}门</p>
<div class="numb">
<p>已报名人数：{{item.signup_num || 0}}人</p>
<div>距离您{{item.distance}}</div>
</div>
</div>
</div>
</div>
<div class="gift_list" v-if="type == 3">
<div class="nr" v-for="item in gift">
<div class="pic">
<img :src="item.pic" alt="">
</div>
<div class="xx">
<div class="title">{{item.name}}</div>
<p>{{item.title}}</p>
<p v-if="item.unlock_order == 0">购买可获得</p>
<p v-if="item.unlock_order > 0">购买成功后邀请{{item.unlock_order}}人解锁</p>
<p>价值：{{item.price}}</p>
<!-- <span v-if="item.locked_order > 0">当前已邀请{{item.locked_order}}人</span>-->
</div>
</div>
</div>
</div>
<div class="price_foot" v-if="is_open != 2 && had_buy == 0">
<div class="pay_price" @click="getUrl('selection.html?type=0')" v-if="grouppurchase_price >= '0.01'">
单独购买¥{{price}}
</div>
<div class="pay_price" @click="getUrl('selection.html?type=0')" style="width:100%" v-else>购买</div>
<div class="team_price" @click="getUrl('selection.html?type=1')" v-if="grouppurchase_price >= '0.01'">
{{grp_user_limit}}人开团 ¥{{grouppurchase_price}}
</div>
</div>
<div class="price_foot" v-if="is_open == 2">
<p>活动已结束</p>
</div>
<div class="price_foot" v-if="isTime">
<p>活动未开始</p>
</div>
<div class="price_foot" v-if="is_open == 1 && had_buy != 0">
<p>已购买</p>
</div>
</div>
<div class="foot">
<a href="index.html" class="nr active">
<img src="../image/foot_syb.png" alt="">
<p>首页</p>
</a>
<a href="../service/index.html" class="nr">
<img src="../image/foot_kf.png" alt="">
<p>客服</p>
</a>
<a href="../my/index.html" class="nr">
<img src="../image/foot_wd.png" alt="">
<p>我的</p>
</a>
</div>
<van-popup v-model:show="isShare" position="bottom" class="tc_share">
<div class="nr">
<!--<div class="xx" @click="getShare">
<img src="../image/icon_wx.png" alt="">
<p>分享给好友</p>
</div>-->
<div class="xx" @click="goHb">
<img src="../image/icon_hb.png" alt="">
<p>生成分享海报</p>
</div>
</div>
<div class="btn" @click="getClose">
<div>取消</div>
</div>
</van-popup>
<van-popup v-model:show="isDetail" position="bottom" class="tc_institution">
<div class="institution_title">
<div class="name">{{instdetail.name}}</div>
<div class="close" @click="getClose"></div>
</div>
<div class="nr">
<div class="lxxx">
<div class="xx">
<div>
<img src="../image/icon_grxx.png" alt="">
<p>联系人</p>
</div>
<p>{{instdetail.contact_member}}</p>
</div>
<div class="xx">
<div>
<img src="../image/icon_phone.png" alt="">
<p>联系电话</p>
</div>
<span>{{instdetail.mobile}}</span>
</div>
</div>
<div class="title">机构介绍</div>
<div class="introduce" v-html="instdetail.desc"></div>
<div class="title">机构校区</div>
<div class="school" v-for="item in instdetail.stores">
<p>{{item.name}}</p>
<div>{{item.address}}({{item.distance}})</div>
</div>
<div class="title">机构课程</div>
<div class="course_list">
<div class="course_nr" v-for="item in instdetail.course">
<div class="pic">
<img :src="item.pic" alt="">
</div>
<div class="xx">
<div>{{item.name}}</div>
<p>课时数量：{{item.limit}}节</p>
</div>
</div>
</div>
</div>
</van-popup>
<div class="tc_fxts" v-if="isWx" @click="getClose">
<img src="../image/share_bj.png" alt="">
</div>
</div>
<script type="text/javascript" src="../js/common.js"></script>
<script src="https://map.qq.com/api/js?v=2.exp&key=KUHBZ-62NWX-LL24I-TKCOE-XCBFE-2VBOL"></script>
<script type="text/javascript" src="../js/jweixin-1.2.0.js"></script>
<script>
Vue.use(vant.Toast);
Vue.use(vant.Dialog);
new Vue({
el: '#container',
data() {
return {
pid: '',// 上级ID
act_id: '',// 套餐ID
user_id: '',// 当前用户ID
userData: [],
nav: [
{
type: 1,
name: '活动详情',
},
{
type: 2,
name: '机构详情',
},
{
type: 3,
name: '赠品列表',
},
],
type: 1,
is_open: '',// 1未到期 2已到期
had_buy: '',// 0未购买本活动 不为0已购买本活动
end_date: '',// 活动结束时间
name: '',// 名称
title: '',// 简介
banner: [],// 轮播图
desc: '',// 活动详情
count_look: '',// 浏览数
count_buy: '',// 购买数
oldprice: '',// 原价
price: '',// 现价
grouppurchase_price: '',// 团购价格
video_index: 0,// 视频下标
video: '',// 当前视频介绍
videopic: '',
address: '',// 地址
orders: [],// 购买记录
act_bind: [],// 机构列表
gift: [],// 赠品列表
group: [],// 赠品列表
instdetail: '',// 机构详情
isShare: false,
isDetail: false,
isTime: false,
isWx: false,
}
},
created() {
let urlParams = GetRequest();
if (urlParams.act_id) {
setStorage('pid', urlParams.pid);
setStorage('act_id', urlParams.act_id);
}
if (!getStorage("token")) {
if (urlParams.token) {
setStorage('token', urlParams.token);
this.getUser()
this.getSdk()
} else {
setStorage('url', window.location.href.split('#')[0]);
this.goLogin()
}
} else {
if (urlParams.latng) {
let scrollTop = getStorage("scrollTop")
setTimeout(function () {
$("#container").scrollTop(scrollTop)
}, 0);
setStorage('lat', urlParams.latng.split(',')[0]);
setStorage('lng', urlParams.latng.split(',')[1]);
setStorage('address', urlParams.addr);
this.address = urlParams.addr
this.getactivity()
} else {
this.getUser()
this.getSdk()
}
}
},
mounted() {
//监听滚动事件
document.querySelector(".container").addEventListener('scroll', this.scrolling)
},
methods: {
scrolling() {
console.log(5555555)
let navTop = document.getElementById('nav').getBoundingClientRect().top
let addressTop = document.getElementById('address').getBoundingClientRect().top
// console.log('导航滚动高度', navTop)
// console.log('地址高度', addressTop)
if (navTop < 20) {
$('#container .main .pro_introduce').addClass('on')
}
if (addressTop > 0) {
$('#container .main .pro_introduce').removeClass('on')
}
},
// 公众号授权登录
goLogin() {
let url = window.location.search
var params = {
act_id: getStorage("act_id"),
pid: getStorage("pid") || '',
}
var res = request("user/getwechatlogin" + url, 'GET', params)
const {
code,
data,
msg
} = res
if (code == 1) {
console.log(params)
setTimeout(function () {
window.location.href = data
}, 0);
} else {
vant.Toast("a1" + msg);
}
},
getSdk() {
let that = this;
let url = window.location.href;
let index = url.indexOf("?");
let shareurl = ''
if (index > 0) {
shareurl = url.substring(0, index);
} else {
shareurl = url;
}
let params = {
jsapi: 'checkJsApi,getLocation,onMenuShareAppMessage,hideOptionMenu,hideMenuItems,hideAllNonBaseMenuItem',
url: url,
act_id: getStorage("act_id")
}
var res = request("user/getjssdkconfig", 'GET', params)
const {
code,
data,
msg
} = res
if (code == 1) {
let wxInfo = JSON.parse(data.wxInfo);
wx.config(wxInfo);
wx.ready(function () {
wx.checkJsApi({
jsApiList: [
'checkJsApi,getLocation,onMenuShareAppMessage,hideOptionMenu,hideMenuItems,hideAllNonBaseMenuItem',
],
success: function (re) {
console.log('分享的链接地址', shareurl + '?pid=' + that.user_id + '&act_id=' + getStorage("act_id"))
if (re.checkResult.onMenuShareAppMessage == false) {
return vant.Toast('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
}
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: function (res) {
setStorage('lat', res.latitude); // 纬度，浮点数，范围为90 ~ -90
setStorage('lng', res.longitude); // 经度，浮点数，范围为180 ~ -180
let geocoder = new qq.maps.Geocoder({
complete: function (result) {
console.log(result);
that.address = result.detail.addressComponents.province + result.detail.addressComponents.city + result.detail.addressComponents.district + result.detail.addressComponents.town + result.detail.addressComponents.street;
}
})
let coord = new qq.maps.LatLng(res.latitude, res.longitude);
geocoder.getAddress(coord);
that.getactivity()
}
});
// 已购买只能拉起分享海报 不能拉起分享好友 因此需要将所有按钮隐藏 ，到了海报页再使用转发功能
// wx.hideAllNonBaseMenuItem(); //https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
wx.hideMenuItems({
menuList: ["menuItem:share:timeline"
, "menuItem:share:appMessage"
, "menuItem:favorite"
, "menuItem:share:qq"
, "menuItem:share:weiboApp"
, "menuItem:share:facebook"
, "menuItem:share:QZone"
, "menuItem:share:QZone"
, "menuItem:editTag"
, "menuItem:delete"
, "menuItem:copyUrl"
, "menuItem:originPage"
, "menuItem:readMode"
, "menuItem:openWithQQBrowser"
, "menuItem:openWithSafari"
, "menuItem:share:email"
, "menuItem:share:brand"
] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有 menu 项见附录3
});
}
});
});
wx.error(function (res) {
console.error(res);
// config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
});
} else {
vant.Toast(msg);
}
},
// 获取经纬度
getint() {
wx.error(function (resp) {
console.log(resp);
vant.Dialog.alert({
message: '定位失败' + JSON.stringify(resp),
}).then(() => {
// on close
});
// vant.Toast('定位失败');
});
},
// 获取用户信息
getUser() {
var params = {}
var res = request("user/index", 'GET', params)
const {
code,
data,
msg
} = res
if (code == 1) {
// 全局刷新整个工程的debug 状态-李山河
// console.warn("版本应一直显示正式版的 0.0.0格式的", data.version);
setStorage("wechat_debug", data.wechat_debug);
if (data.debug == false) {
setStorage("version", data.version);
} else {
setStorage("version", "-1");
}
this.userData = data;
this.user_id = data.user_id
} else {
// vant.Toast("a3" + msg);
}
},
// 获取数据
getactivity() {
let that = this
let params = {
act_id: getStorage("act_id"),
pid: getStorage("pid") || '',
longitude: getStorage("lng"),
latitude: getStorage("lat"),
}
var res = request("activity/show", 'GET', params)
const {
code,
data,
msg
} = res
if (code === 1) {
if (data == null) {
vant.Dialog.alert({
message: res.msg,
}).then(() => {
});
return;
}
if (data.start_date * 1000 > new Date().getTime()) {
that.isTime = true
}
that.end_date = data.end_date * 1000 - new Date().getTime()
that.is_open = data.is_open
that.had_buy = data.had_buy
that.name = data.name
that.title = data.title2
that.banner = data.pic
that.desc = data.desc
that.count_look = data.count_look
that.count_buy = data.count_buy
that.price = data.price
that.oldprice = data.oldprice
that.grouppurchase_price = data.grouppurchase_price
that.grp_user_limit = data.grp_user_limit
that.orders = data.orders
that.act_bind = data.act_bind
that.video = data.act_bind[0].video
that.videopic = data.act_bind[0].album
that.gift = data.gift
that.group = data.group_orders
setTimeout(function () {
$(".sy_banner .news").liMarquee({
direction: 'up',
runshort: false,
scrollamount: "10",
});
}, 0);
setTimeout(function () {
$(".main .sy_box .pay_record .list").liMarquee({
direction: 'up',
runshort: false,
scrollamount: "10",
});
}, 0);
} else {
console.warn(res);
if (res.code > 1) {
vant.Toast(res.msg);
// 这里做微信授权
} else {
vant.Dialog.alert({
message: res.msg,
}).then(() => {
});
}
}
},
// 视频切换
getVideo(i) {
this.video_index = i
this.video = this.act_bind[i].video
this.videopic = this.act_bind[i].album
},
// 设置位置
openMap() {
var scrollTop = $("#container").scrollTop();
setStorage('scrollTop', scrollTop);
var url = location.href;
// 前往的路径
// backurl在选择完地点之后返回的路径
// 选择的地点参数都在地址栏里面，我这边是直接走后台获取
// 注意不可以携带json形式的map形式的参数
var url1 = "https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=" +
url + "&key=3DVBZ-NAA66-G5ES7-MFEOF-USMJH-CUBUG&referer=myapp&referer=myapp";
location.href = url1;
},
// 切换
getNav(e) {
this.type = e
},
// 机构详情
getInstdetail(e) {
let that = this
let params = {
inst_id: e,
act_id: getStorage("act_id"),
longitude: getStorage("lng"),
latitude: getStorage("lat"),
}
var res = request("inst/show", 'GET', params)
const {
code,
data,
msg
} = res
if (code == 1) {
that.isDetail = true;
that.instdetail = data;
} else {
vant.Toast("a4" + msg);
}
},
// 分享
getShare() {
let that = this
that.isShare = false
// that.isWx = true 不再弹出蒙板
},
goHb() {
let that = this
that.isShare = false
//is_promoter 1分销员（即员工、老师等称谓）2普通身份即家长
console.warn(that.had_buy , this.userData.is_promoter);
if (that.had_buy == '0' && this.userData.is_promoter == 2) {
vant.Toast('请先购买');
} else {
getUrl('posters.html?act_id=' + getStorage('act_id'))
}
},
// 弹层
sharePopup() {
this.isShare = true;
},
getClose() {
this.isDetail = false;
this.isShare = false;
this.isWx = false;
},
}
});
</script>
<!-- 触屏滑动特效-->
<script>
$(function () {
var product_banner = new Swiper('#product_banner', {
autoplay: 2000,
speed: 1000,
loop: true,
});
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手