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

双11代码提交

上级
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# activity-h5
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
};
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "activity-h5",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^1.5.1",
"core-js": "^3.6.5",
"vant": "^2.13.2",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
"weixin-js-sdk": "^1.6.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.19",
"@vue/cli-plugin-eslint": "~4.5.19",
"@vue/cli-plugin-router": "~4.5.19",
"@vue/cli-plugin-vuex": "~4.5.19",
"@vue/cli-service": "~4.5.19",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"postcss-pxtorem": "^5.1.1",
"prettier": "^2.2.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
// 适用版本 5.1.1
// yarn add -D postcss-pxtorem@5.1.1
// npm install postcss-pxtorem@5.1.1 -D
'postcss-pxtorem': {
rootValue({ file }) { // 如果设计稿宽度是 750px + Vant
// 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
// 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
// rootValue: 75, // 2.如果设计稿宽度是 750px + 不适用Vant
// rootValue: 37.5, // 3.如果设计稿宽度是 375px + 无论是否使用Vant
// 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
propList: ['*'],
},
},
};
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
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>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
// VConsole 默认会挂载到 `window.VConsole` 上
var vConsole = new window.VConsole();
// 接下来即可照常使用 `console` 等方法
// 结束调试后,可移除掉
vConsole.destroy();
</script>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?28ecec9565974a32f1154f40291af6e8";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style lang="scss">
html,
body {
margin: 0;
padding: 0;
}
</style>
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
rel="noopener"
>babel</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
target="_blank"
rel="noopener"
>router</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
target="_blank"
rel="noopener"
>vuex</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
rel="noopener"
>eslint</a
>
</li>
</ul>
<h3>Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
>Forum</a
>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
>Community Chat</a
>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
>Twitter</a
>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
>vue-router</a
>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
rel="noopener"
>vue-devtools</a
>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
>vue-loader</a
>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
rel="noopener"
>awesome-vue</a
>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "amfe-flexible";
Vue.config.productionTip = false;
Vue.config.ignoredElements = ["wx-open-launch-app", "wx-open-launch-weapp"];
import Vant from "vant";
import "vant/lib/index.css";
Vue.use(Vant);
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next();
});
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home,
meta: {
title: "活动即将上线,敬请期待",
},
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
meta: {
title: "活动即将上线,敬请期待",
},
},
];
const router = new VueRouter({
mode: "hash",
base: process.env.NODE_ENV === "production" ? "/ft/website11/" : "/",
routes,
});
export default router;
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {},
});
<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>
</div>
</template>
<script>
// @ is an alias to /src
import axios from "axios";
import wx from "weixin-js-sdk";
export default {
name: "Home",
components: {},
async mounted() {
console.log(wx);
const urlLink = window.location.href;
let res = await axios({
method: "get",
url: "https://faces.diaosaas.com/ft/api/client/wx/getShareParameter",
params: {
url: urlLink,
},
});
console.log(res);
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",
};
wx.config({
debug: false,
appId,
signature,
nonceStr,
timestamp,
jsApiList: [
"wx-open-subscribe",
"wx-open-launch-app",
"chooseImage",
"previewImage",
"updateAppMessageShareData",
"updateTimelineShareData",
"onMenuShareAppMessage",
"onMenuShareTimeline",
],
openTagList: ["wx-open-launch-weapp"], //打开的标签名
});
wx.ready(function (res) {
console.log(res, "ready");
wx.checkJsApi({
jsApiList: [
"updateAppMessageShareData",
"updateTimelineShareData",
"onMenuShareAppMessage",
"onMenuShareTimeline",
], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: (res) => {
console.log(res, "成功");
},
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, // 分享图标
});
});
wx.error(function (err) {
console.log(err, "error");
});
},
methods: {
sucFun(msg) {
console.log(msg);
},
errFun(msg) {
console.log(msg);
},
},
};
</script>
<style lang="scss" scoped>
.about {
width: 100vh;
height: 100vw;
}
</style>
<template>
<div class="home">
<van-swipe
class="my-swipe"
:autoplay="3000"
indicator-color="#C4050F"
@change="onChange"
>
<van-swipe-item v-for="(item, i) in imgUrlList" :key="i"
><img class="image" :src="item" alt="" srcset=""
/></van-swipe-item>
</van-swipe>
<div class="setting">
<!-- 11111 -->
<!-- <img class="one" src="@/assets/1.png" alt="" srcset="" /> -->
<div class="test">
<wx-open-launch-weapp
v-if="true"
id="launch-btn"
appid="wx6b79cb62d5aa1bdd"
username="gh_b537541d2a7"
path="/pages/productdetail/productdetail?id=792"
@launch="sucFun"
@error="errFun"
style="position: absolute; width: 100%; height: 100%"
>
<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="" />
</div>
</script>
</wx-open-launch-weapp>
</div>
<div class="one-text">
定金膨胀:至方太展厅预交定金,即可锁定双11活动优惠价,方太全系指定产品定金至高享1111元膨胀优惠金
<br />
(备注:特价及定价产品不参加,仅限含常规机的定价套餐参加)
</div>
<!-- 2222 -->
<img class="one" src="@/assets/5.png" alt="" srcset="" />
<!-- <div class="test">
<wx-open-launch-weapp
v-if="true"
id="launch-btn"
appid="wx6b79cb62d5aa1bdd"
username="gh_b537541d2a7"
path="/pages/productdetail/productdetail?id=792"
@launch="sucFun"
@error="errFun"
style="position: absolute; width: 100%; height: 100%"
>
<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="" />
</div>
</script>
</wx-open-launch-weapp>
</div> -->
<div class="one-text">
100%好礼:预定用户分享活动,即可参与11.11砸金蛋100%抽奖,100-1000元无门槛优惠券送不停,更有华为Mate60(使用权)、4999元免单、小天鹅10公斤滚筒洗衣机等幸运好礼!
</div>
<!-- 33333 -->
<!-- <img class="one" src="@/assets/6.png" alt="" srcset="" /> -->
<div class="test">
<wx-open-launch-weapp
v-if="true"
id="launch-btn"
appid="wx6b79cb62d5aa1bdd"
username="gh_b537541d2a7"
path="/pages/productdetail/productdetail?id=793"
@launch="sucFun"
@error="errFun"
style="position: absolute; width: 100%; height: 100%"
>
<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="" />
</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="" />
<van-swipe
class="my-swipe-two"
:autoplay="3000"
indicator-color="#C4050F"
@change="onChange"
>
<van-swipe-item v-for="(item, i) in starItem" :key="i"
><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="" />
<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>
<!-- <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";
export default {
name: "Home",
data() {
return {
from: {
name: "",
phone: "",
address: "",
},
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",
],
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",
],
};
},
components: {},
async mounted() {
const urlLink = window.location.href;
let res = await axios({
method: "get",
url: "https://faces.diaosaas.com/ft/api/client/wx/getShareParameter",
params: {
url: urlLink,
},
});
console.log(res);
const { appId, signature, timestamp, nonceStr, url } = res.data.data;
// 分享数据写死
let msg = {
title: "方太双节惠购,你的厨房我来换", // 分享标题
desc: "晒厨房享免费换新!方太换新体验官全城火热招募", // 分享描述
link: "https://faces.diaosaas.com/ft/website11/", // / 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名
imgUrl: "https://faces.diaosaas.com/ft/website/suolv.png?t=2023", // 分享图标
success() {
console.log("分享接口调用成功");
},
fail() {
console.log("分享接口调用失败");
},
};
wx.config({
debug: false,
appId,
signature,
nonceStr,
timestamp,
jsApiList: [
"wx-open-subscribe",
"wx-open-launch-app",
"chooseImage",
"previewImage",
"updateAppMessageShareData",
"updateTimelineShareData",
"onMenuShareAppMessage",
"onMenuShareTimeline",
],
openTagList: ["wx-open-launch-weapp"], //打开的标签名
});
wx.ready(function (res) {
console.log(res, "ready");
wx.checkJsApi({
jsApiList: [
"updateAppMessageShareData",
"updateTimelineShareData",
"onMenuShareAppMessage",
"onMenuShareTimeline",
], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: (res) => {
console.log(res, "检测的JS接口列表===成功");
},
fail: (error) => {
console.log(error, "scanQRCode失败");
},
});
// 自定义“分享给朋友”及“分享到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: {
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: 2,
},
}).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);
}
});
},
sucFun(msg) {
console.log(msg);
},
errFun(msg) {
console.log(msg);
},
onChange(index) {
this.current = index;
},
},
};
</script>
<style lang="scss" scoped>
.home {
img {
display: block !important;
}
::v-deep .my-swipe {
height: 380px !important;
.van-swipe-item {
color: #fff;
font-size: 20px;
text-align: center;
.image {
width: 100%;
height: 100%;
display: block;
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) {
}
}
}
.setting {
width: 750px;
// height: 5046px;
background: linear-gradient(180deg, #1d1212 0%, #c41a21 100%);
padding: 48px 0 132px 0;
box-sizing: border-box;
.one,
.two {
width: 700px;
margin: 0 auto;
}
.test {
position: relative;
width: 700px;
height: 440px;
margin: 0 auto;
// border: 1px solid green;
}
.one-text {
background: goldenrod;
margin: 26px auto 62px auto;
width: 660px;
height: 96px;
font-size: 18px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #ffffff;
line-height: 28px;
-webkit-background-clip: text;
}
.title-img {
width: 620px;
margin: 112px auto 52px auto;
}
.two-3 {
margin-top: 60px;
}
.title-img-2 {
width: 620px;
margin: 104px auto 50px auto;
}
.title-img-3 {
width: 620px;
margin: 78px auto 26px auto;
}
.title-img-4 {
margin-bottom: 76px;
}
.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;
}
}
::v-deep .my-swipe-two {
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) {
}
}
}
}
</style>
module.exports = {
lintOnSave: false,
publicPath: process.env.NODE_ENV === "production" ? "/ft/website11/" : "/",
};
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论