提交 cb481fd7 authored 作者: liudezheng's avatar liudezheng

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

上级 fd45ed63
...@@ -8,18 +8,19 @@ ...@@ -8,18 +8,19 @@
content="width=device-width,initial-scale=1.0 maximum-scale=1.0, user-scalable=no" content="width=device-width,initial-scale=1.0 maximum-scale=1.0, user-scalable=no"
/> />
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> --> <!-- <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 src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script> <script>
// VConsole 默认会挂载到 `window.VConsole` 上 // VConsole 默认会挂载到 `window.VConsole` 上
var vConsole = new window.VConsole(); // var vConsole = new window.VConsole();
// 接下来即可照常使用 `console` 等方法 // // 接下来即可照常使用 `console` 等方法
// 结束调试后,可移除掉 // // 结束调试后,可移除掉
vConsole.destroy(); // vConsole.destroy();
</script> </script>
</head> </head>
<body> <body>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<noscript> <noscript>
<strong <strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
......
...@@ -10,7 +10,7 @@ const routes = [ ...@@ -10,7 +10,7 @@ const routes = [
name: "Home", name: "Home",
component: Home, component: Home,
meta: { meta: {
title: "活动即将上线,敬请期待", title: "尊享高端,礼遇11.11",
}, },
}, },
{ {
...@@ -22,13 +22,13 @@ const routes = [ ...@@ -22,13 +22,13 @@ const routes = [
component: () => component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"), import(/* webpackChunkName: "about" */ "../views/About.vue"),
meta: { meta: {
title: "活动即将上线,敬请期待", title: "尊享高端,礼遇11.11",
}, },
}, },
]; ];
const router = new VueRouter({ const router = new VueRouter({
mode: "hash", mode: "history",
base: process.env.NODE_ENV === "production" ? "/ft/website11/" : "/", base: process.env.NODE_ENV === "production" ? "/ft/website11/" : "/",
routes, routes,
}); });
......
<template> <template>
<div class="about"> <div class="about">
<wx-open-launch-weapp <img
id="launch-btn" class="head-img"
appid="wx6b79cb62d5aa1bdd" src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/bm1.png"
username="gh_b537541d2a7" alt=""
path="/pages/productdetail/productdetail?id=792" srcset=""
@launch="sucFun" />
@error="errFun" <img class="title-img" src="@/assets/title-7.png" alt="" srcset="" />
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" <img
> class="b-g"
<script type="text/wxtag-template"> src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/bm2.png"
<button>跳转</button> alt=""
</script> srcset=""
</wx-open-launch-weapp> />
<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> </div>
</template> </template>
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import axios from "axios"; import axios from "axios";
import wx from "weixin-js-sdk";
export default { export default {
name: "Home", name: "About",
data() {
return {
from: {
name: "",
phone: "",
address: "",
},
current: 0,
};
},
components: {}, components: {},
async mounted() { async mounted() {
console.log(wx);
const urlLink = window.location.href; const urlLink = window.location.href;
let res = await axios({ let res = await axios({
method: "get", method: "get",
...@@ -36,10 +54,17 @@ export default { ...@@ -36,10 +54,17 @@ export default {
const { appId, signature, timestamp, nonceStr, url } = res.data.data; const { appId, signature, timestamp, nonceStr, url } = res.data.data;
// 分享数据写死 // 分享数据写死
let msg = { let msg = {
title: "方太双节惠购,你的厨房我来换", title: "方太双节惠购,你的厨房我来换", // 分享标题
desc: "晒厨房享免费换新!方太换新体验官全城火热招募", desc: "晒厨房享免费换新!方太换新体验官全城火热招募", // 分享描述
link: "https://faces.diaosaas.com/ft/website11/", link: url, // / 分享链接,该链接域名或路径必须与当前页面对应的公众号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("分享接口调用成功");
},
fail() {
console.log("分享接口调用失败");
},
}; };
wx.config({ wx.config({
debug: false, debug: false,
...@@ -69,41 +94,109 @@ export default { ...@@ -69,41 +94,109 @@ export default {
"onMenuShareTimeline", "onMenuShareTimeline",
], // 需要检测的JS接口列表,所有JS接口列表见附录2, ], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: (res) => { success: (res) => {
console.log(res, "成功"); console.log(res, "检测的JS接口列表===成功");
}, },
fail: (error) => { fail: (error) => {
console.log(error, "scanQRCode失败"); console.log(error, "scanQRCode失败");
}, },
}); });
wx.updateAppMessageShareData({ // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
title: msg.title, // 分享标题 wx.updateAppMessageShareData(msg);
desc: msg.desc, // 分享描述 // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
link: msg.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 wx.updateTimelineShareData(msg);
imgUrl: msg.imgUrl, // 分享图标 // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口(即将废弃)
}); wx.onMenuShareTimeline(msg);
wx.updateTimelineShareData({ // 获取“分享给朋友”按钮点击状态及自定义分享内容接口(即将废弃)
title: msg.title, // 分享标题 wx.onMenuShareAppMessage(msg);
link: msg.desc,
imgUrl: msg.link, // 分享图标
});
}); });
wx.error(function (err) { wx.error(function (err) {
console.log(err, "error"); console.log(err, "error");
}); });
}, },
methods: { methods: {
sucFun(msg) { async submit() {
console.log(msg); let { name, phone, address } = this.from;
}, var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
errFun(msg) { if (!name) {
console.log(msg); 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,
},
}).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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.about { .about {
width: 100vh; // height: 2312px;
height: 100vw; 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> </style>
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论