Skip to content

2
2025_fangtai_springfestival_h5
提交 cb481fd7 authored 作者: liudezheng's avatar liudezheng
浏览文件
操作

修复ios 首次加载图片不显示

上级 fd45ed63
显示空白字符变更
内嵌 并排
正在显示 包含 404 行增加 和 149 行删除
public/index.html
浏览文件 @ cb481fd7
......@@ -8,18 +8,19 @@
content="width=device-width,initial-scale=1.0 maximum-scale=1.0, user-scalable=no"
/>
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> -->
<title>活动即将上线，敬请期待</title>
<title>尊享高端，礼遇11.11</title>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
// VConsole 默认会挂载到 `window.VConsole` 上
var vConsole = new window.VConsole();
// 接下来即可照常使用 `console` 等方法
// var vConsole = new window.VConsole();
// // 接下来即可照常使用 `console` 等方法
// 结束调试后，可移除掉
vConsole.destroy();
// // 结束调试后，可移除掉
// vConsole.destroy();
</script>
</head>
<body>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
......
src/router/index.js
浏览文件 @ cb481fd7
......@@ -10,7 +10,7 @@ const routes = [
name: "Home",
component: Home,
meta: {
title: "活动即将上线，敬请期待",
title: "尊享高端，礼遇11.11",
},
},
{
......@@ -22,13 +22,13 @@ const routes = [
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
meta: {
title: "活动即将上线，敬请期待",
title: "尊享高端，礼遇11.11",
},
},
];
const router = new VueRouter({
mode: "hash",
mode: "history",
base: process.env.NODE_ENV === "production" ? "/ft/website11/" : "/",
routes,
});
......
src/views/About.vue
浏览文件 @ cb481fd7
<template>
<div class="about">
<wx-open-launch-weapp
id="launch-btn"
appid="wx6b79cb62d5aa1bdd"
username="gh_b537541d2a7"
path="/pages/productdetail/productdetail?id=792"
@launch="sucFun"
@error="errFun"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
>
<script type="text/wxtag-template">
<button>跳转</button>
</script>
</wx-open-launch-weapp>
<img
class="head-img"
src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/bm1.png"
alt=""
srcset=""
/>
<img class="title-img" src="@/assets/title-7.png" alt="" srcset="" />
<img
class="b-g"
src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/bm2.png"
alt=""
srcset=""
/>
<img class="b-g" src="@/assets/7.png" alt="" srcset="" />
<van-field class="input" v-model="from.name" placeholder="请输入名字" />
<van-field
class="input"
v-model="from.phone"
placeholder="请输入电话"
type="number"
/>
<van-field class="input" v-model="from.address" placeholder="请输入地址" />
<div class="btn" @click="submit">立即报名</div>
</div>
</template>
<script>
// @ is an alias to /src
import axios from "axios";
import wx from "weixin-js-sdk";
export default {
name: "Home",
name: "About",
data() {
return {
from: {
name: "",
phone: "",
address: "",
},
current: 0,
};
},
components: {},
async mounted() {
console.log(wx);
const urlLink = window.location.href;
let res = await axios({
method: "get",
......@@ -36,10 +54,17 @@ export default {
const { appId, signature, timestamp, nonceStr, url } = res.data.data;
// 分享数据写死
let msg = {
title: "方太双节惠购，你的厨房我来换",
desc: "晒厨房享免费换新！方太换新体验官全城火热招募",
link: "https://faces.diaosaas.com/ft/website11/",
imgUrl: "https://faces.diaosaas.com/ft/website/suolv.png?t=2023",
title: "方太双节惠购，你的厨房我来换", // 分享标题
desc: "晒厨房享免费换新！方太换新体验官全城火热招募", // 分享描述
link: url, // / 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名
imgUrl:
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/fenxiang.png", // 分享图标
success() {
console.log("分享接口调用成功");
},
fail() {
console.log("分享接口调用失败");
},
};
wx.config({
debug: false,
......@@ -69,41 +94,109 @@ export default {
"onMenuShareTimeline",
], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: (res) => {
console.log(res, "成功");
console.log(res, "检测的JS接口列表===成功");
},
fail: (error) => {
console.log(error, "scanQRCode失败");
},
});
wx.updateAppMessageShareData({
title: msg.title, // 分享标题
desc: msg.desc, // 分享描述
link: msg.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: msg.imgUrl, // 分享图标
});
wx.updateTimelineShareData({
title: msg.title, // 分享标题
link: msg.desc,
imgUrl: msg.link, // 分享图标
});
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
wx.updateAppMessageShareData(msg);
// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
wx.updateTimelineShareData(msg);
// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareTimeline(msg);
// 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareAppMessage(msg);
});
wx.error(function (err) {
console.log(err, "error");
});
},
methods: {
sucFun(msg) {
console.log(msg);
async submit() {
let { name, phone, address } = this.from;
var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!name) {
this.$toast("姓名不能为空");
return;
} else if (!phone) {
this.$toast("电话不能为空");
return;
} else if (!phoneReg.test(phone)) {
this.$toast("电话不正确");
return;
} else if (!address) {
this.$toast("地址不能为空");
return;
}
console.log("校验成功");
axios({
url: "https://faces.diaosaas.com/luck-draw/api/information/insertInformation",
method: "post",
data: {
name,
phone,
address,
type: 3,
},
errFun(msg) {
console.log(msg);
}).then((res) => {
let data = res.data;
if (data.code == 200) {
this.$toast(data.msg);
this.from.name = "";
this.from.phone = "";
this.from.address = "";
} else {
this.$toast(data.msg);
}
});
},
},
};
</script>
<style lang="scss" scoped>
.about {
width: 100vh;
height: 100vw;
// height: 2312px;
background: linear-gradient(180deg, #1d1212 0%, #c41a21 100%);
box-sizing: border-box;
padding: 0 0 50px 0;
img {
display: block;
}
.head-img {
width: 100%;
}
.title-img {
width: 620px;
margin: 48px auto 22px auto;
}
.b-g {
width: 700px;
margin: 60px auto 60px auto;
}
.input {
margin: 36px auto 0 auto;
box-sizing: border-box;
width: 700px;
height: 95px;
background: #ffffff;
border-radius: 10px 10px 10px 10px;
opacity: 1;
padding: 24px;
}
.btn {
width: 700px;
height: 95px;
background: #000000;
border-radius: 50px;
margin: 52px auto 0 auto;
font-size: 28px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #ffffff;
line-height: 95px;
text-align: center;
}
}
</style>
src/views/Home.vue
浏览文件 @ cb481fd7
......@@ -22,25 +22,37 @@
path="/pages/productdetail/productdetail?id=792"
@launch="sucFun"
@error="errFun"
style="position: absolute; width: 100%; height: 100%"
style="
position: absolute;
width: 100%;
height: 100%;
display: inline-block;
border: none;
"
>
<script type="text/wxtag-template">
<div style="position: absolute; top:0;left:0;right:0;
bottom:0;">
<img style="width:100%;height:100%;display:block" src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/mxdp1.png" alt="" srcset="" />
<!-- <img style="width:100%;height:100%;display:block" src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/1.png" alt="" srcset="" /> -->
<image style="width:100%;height:100%;" mode="aspectFill" src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/1.png"></image>
</div>
</script>
</wx-open-launch-weapp>
</div>
<div class="one-text">
<!-- <div class="one-text">
定金膨胀：至方太展厅预交定金，即可锁定双11活动优惠价，方太全系指定产品定金至高享1111元膨胀优惠金
<br />
（备注：特价及定价产品不参加，仅限含常规机的定价套餐参加）
</div>
</div> -->
<!-- 2222 -->
<img class="one" src="@/assets/5.png" alt="" srcset="" />
<img
@click="goLink"
class="one abc"
src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/2.png"
alt=""
srcset=""
/>
<!-- <div class="test">
<wx-open-launch-weapp
v-if="true"
......@@ -60,9 +72,9 @@
</script>
</wx-open-launch-weapp>
</div> -->
<div class="one-text">
<!-- <div class="one-text">
100%好礼：预定用户分享活动，即可参与11.11砸金蛋100%抽奖，100-1000元无门槛优惠券送不停，更有华为Mate60（使用权）、4999元免单、小天鹅10公斤滚筒洗衣机等幸运好礼！
</div>
</div> -->
<!-- 33333 -->
<!-- <img class="one" src="@/assets/6.png" alt="" srcset="" /> -->
<div class="test">
......@@ -74,22 +86,50 @@
path="/pages/productdetail/productdetail?id=793"
@launch="sucFun"
@error="errFun"
style="position: absolute; width: 100%; height: 100%"
style="
position: absolute;
width: 100%;
height: 100%;
display: inline-block;
border: none;
"
>
<script type="text/wxtag-template">
<div style="position: absolute; top:0;left:0;right:0;
bottom:0;">
<img style="width:100%;height:100%;display:block" src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/mxdp1.png" alt="" srcset="" />
<!-- <img style="width:100%;height:100%;display:block" src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/3.png" alt="" srcset="" /> -->
<image style="width:100%;height:100%;" mode="aspectFill" src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/3.png"></image>
</div>
</script>
</wx-open-launch-weapp>
</div>
<img class="title-img" src="@/assets/title.png" alt="" srcset="" />
<img class="two" src="@/assets/2.png" alt="" srcset="" />
<img class="two two-3" src="@/assets/3.png" alt="" srcset="" />
<img class="title-img-2" src="@/assets/title-2.png" alt="" srcset="" />
<img
class="two"
src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/4.png"
alt=""
srcset=""
/>
<van-swipe
class="my-swipe-new"
:autoplay="3000"
indicator-color="#C4050F"
@change="onChange"
>
<van-swipe-item v-for="(item, i) in newList" :key="i"
><img class="image" :src="item" alt="" srcset=""
/></van-swipe-item>
</van-swipe>
<img
class="new-53"
src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/53.png"
alt=""
srcset=""
/>
<!-- <img class="two two-3" src="@/assets/3.png" alt="" srcset="" /> -->
<img class="title-img-2" src="@/assets/title-6.png" alt="" srcset="" />
<van-swipe
class="my-swipe-two"
class="my-swipe-three"
:autoplay="3000"
indicator-color="#C4050F"
@change="onChange"
......@@ -98,8 +138,15 @@
><img class="image" :src="item" alt="" srcset=""
/></van-swipe-item>
</van-swipe>
<img class="title-img-3" src="@/assets/title-3.png" alt="" srcset="" />
<img class="one title-img-4" src="@/assets/4.png" alt="" srcset="" />
<img class="title-img-3" src="@/assets/title-4.png" alt="" srcset="" />
<img
@click="goAbout"
class="one title-img-4"
src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/7.png"
alt=""
srcset=""
/>
<img class="title-img-5" src="@/assets/title-5.png" alt="" srcset="" />
<van-field class="input" v-model="from.name" placeholder="请输入名字" />
<van-field
class="input"
......@@ -114,26 +161,13 @@
/>
<div class="btn" @click="submit">立即预约</div>
</div>
<!-- <wx-open-launch-weapp
v-if="false"
id="launch-btn"
appid="wx6b79cb62d5aa1bdd"
username="gh_b537541d2a7"
path="/pages/productdetail/productdetail?id=792"
@launch="sucFun"
@error="errFun"
style="position: absolute; top: 0; left: 0; width: 100px; height: 100px"
>
<script type="text/wxtag-template">
<button>跳转小程序</button>
</script>
</wx-open-launch-weapp> -->
</div>
</template>
<script>
// @ is an alias to /src
import axios from "axios";
import wx from "weixin-js-sdk";
var hasRefreshed = false;
// import wx from "weixin-js-sdk";
export default {
name: "Home",
data() {
......@@ -145,19 +179,40 @@ export default {
},
current: 0,
imgUrlList: [
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/banner1_01.png",
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/banner1_01.png",
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/banner1_01.png",
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/1banner1.png",
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/1banner2.png",
],
starItem: [
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/mxdp1.png",
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/mxdp2.png",
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/mxdp2.png",
],
newList: [
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/51.png",
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/52.png",
],
};
},
created() {},
components: {},
async mounted() {
mounted() {
if (this.isWechat() && this.isIOS() && !hasRefreshed) {
// 在微信浏览器且在iOS设备上执行强制刷新操作
hasRefreshed = true;
// this.$forceUpdate()
// location.reload();
}
this.wxmini();
},
methods: {
isWechat() {
var userAgent = navigator.userAgent.toLowerCase();
return userAgent.indexOf("micromessenger") !== -1;
},
// 判断是否在iOS设备
isIOS() {
return /iphone|ipad|ipod/i.test(navigator.userAgent);
},
async wxmini() {
const urlLink = window.location.href;
let res = await axios({
method: "get",
......@@ -173,7 +228,8 @@ export default {
title: "方太双节惠购，你的厨房我来换", // 分享标题
desc: "晒厨房享免费换新！方太换新体验官全城火热招募", // 分享描述
link: "https://faces.diaosaas.com/ft/website11/", // / 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名
imgUrl: "https://faces.diaosaas.com/ft/website/suolv.png?t=2023", // 分享图标
imgUrl:
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/fenxiang.png", // 分享图标
success() {
console.log("分享接口调用成功");
},
......@@ -228,7 +284,16 @@ export default {
console.log(err, "error");
});
},
methods: {
// 跳转外部链接
goLink() {
window.location.href =
"https://25920922-85.hd.webportal.top/25920922/3tP8fNyb0JjIO1HIcDFSww/load-25920922-85.html?style=2&editQrcode=true&_source=1";
},
// 跳转二级页面
goAbout() {
this.$router.push("/about");
console.log("报名");
},
async submit() {
let { name, phone, address } = this.from;
var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
......@@ -333,6 +398,10 @@ export default {
width: 700px;
margin: 0 auto;
}
.abc {
margin-top: 30px;
margin-bottom: 30px;
}
.test {
position: relative;
width: 700px;
......@@ -365,11 +434,15 @@ export default {
}
.title-img-3 {
width: 620px;
margin: 78px auto 26px auto;
margin: 78px auto 66px auto;
}
.title-img-4 {
margin-bottom: 76px;
}
.title-img-5 {
width: 620px;
margin: 86px auto 38px auto;
}
.input {
margin: 36px auto 0 auto;
box-sizing: border-box;
......@@ -433,5 +506,93 @@ export default {
}
}
}
::v-deep .my-swipe-three {
width: 700px !important;
height: 382px !important;
margin: 0 auto;
// border: 1px solid #39a9ed;
.van-swipe-item {
color: #fff;
font-size: 20px;
text-align: center;
.image {
width: 700px;
height: 350px;
display: block;
// object-fit: cover;
border-radius: 22px;
}
}
.van-swipe__indicators {
bottom: 0;
.van-swipe__indicator {
width: 8px;
height: 8px;
background: #d8d8d8;
opacity: 1;
&:not(:last-child) {
margin-right: 8px;
}
}
.van-swipe__indicator--active {
transition: 0.5s width;
width: 32px;
height: 8px;
border-radius: 20px 20px 20px 20px;
opacity: 1;
}
.van-swipe__indicator:not(:last-child) {
}
}
}
::v-deep .my-swipe-new {
margin: 38px auto 0 auto;
width: 700px !important;
height: 350px !important;
border: 1px solid #fff;
border-bottom: none;
border-radius: 22px 22px 0 0;
box-sizing: border-box;
.van-swipe-item {
color: #fff;
font-size: 20px;
text-align: center;
.image {
width: 100%;
height: 100%;
display: block;
border-radius: 22px 22px 0 0;
object-fit: cover;
}
}
.van-swipe__indicators {
// right: 22px;
left: 90%;
transform: translateX(0);
bottom: 14px;
.van-swipe__indicator {
width: 8px;
height: 8px;
background: #d8d8d8;
opacity: 1;
&:not(:last-child) {
margin-right: 8px;
}
}
.van-swipe__indicator--active {
transition: 0.5s width;
width: 32px;
height: 8px;
border-radius: 20px 20px 20px 20px;
opacity: 1;
}
.van-swipe__indicator:not(:last-child) {
}
}
}
.new-53 {
width: 700px;
margin: 0 auto;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论