first commit
This commit is contained in:
sexygoat
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
.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?
|
||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
19
jsconfig.json
Normal file
19
jsconfig.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
14795
package-lock.json
generated
Normal file
14795
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
52
package.json
Normal file
52
package.json
Normal file
@@ -0,0 +1,52 @@
|
||||
{
|
||||
"name": "one-pipe-h5",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vant/area-data": "^2.0.0",
|
||||
"axios": "^1.9.0",
|
||||
"core-js": "^3.8.3",
|
||||
"crypto-js": "^4.2.0",
|
||||
"i": "^0.3.7",
|
||||
"js-base64": "^3.7.7",
|
||||
"npm": "^11.4.1",
|
||||
"parallax-js": "^3.1.0",
|
||||
"vant": "^2.13.8",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.6.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
public/index.html
Normal file
17
public/index.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!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, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</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>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
36
src/App.vue
Normal file
36
src/App.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "App"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-shadow: border-box;
|
||||
}
|
||||
.h5-container {
|
||||
overflow-y: scroll; /* 或 auto */
|
||||
scrollbar-width: thin; /* Firefox：让它更细 */
|
||||
scrollbar-color: transparent transparent; /* Firefox：轨道和滑块都透明 */
|
||||
}
|
||||
|
||||
/* Chrome / Safari / Edge */
|
||||
.h5-container::-webkit-scrollbar {
|
||||
width: 8px; /* 可以设置为 0，如果你想完全隐藏 */
|
||||
background-color: transparent; /* 滚动条轨道背景 */
|
||||
}
|
||||
|
||||
.h5-container::-webkit-scrollbar-thumb {
|
||||
background-color: transparent; /* 滚动条滑块 */
|
||||
}
|
||||
|
||||
</style>
|
||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
15
src/main.js
Normal file
15
src/main.js
Normal file
@@ -0,0 +1,15 @@
|
||||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
import {Toast, Area, Popup} from "vant";
|
||||
import "vant/lib/index.css";
|
||||
|
||||
Vue.use(Toast);
|
||||
Vue.use(Area);
|
||||
Vue.use(Popup);
|
||||
new Vue({
|
||||
router,
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app");
|
||||
666
src/pages/404.vue
Normal file
666
src/pages/404.vue
Normal file
@@ -0,0 +1,666 @@
|
||||
<template>
|
||||
<div class="c-4">
|
||||
<section class="wrapper">
|
||||
<div class="container">
|
||||
<div id="scene" class="scene" data-hover-only="false">
|
||||
<div class="circle" data-depth="1.2" />
|
||||
|
||||
<div class="one" data-depth="0.9">
|
||||
<div class="content">
|
||||
<span class="piece" />
|
||||
<span class="piece" />
|
||||
<span class="piece" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two" data-depth="0.60">
|
||||
<div class="content">
|
||||
<span class="piece" />
|
||||
<span class="piece" />
|
||||
<span class="piece" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="three" data-depth="0.40">
|
||||
<div class="content">
|
||||
<span class="piece" />
|
||||
<span class="piece" />
|
||||
<span class="piece" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="p404" data-depth="0.50">暂无此产品</p>
|
||||
<p class="p404" data-depth="0.10">暂无此产品</p>
|
||||
</div>
|
||||
|
||||
<div class="text">
|
||||
<article>
|
||||
<!-- <p>此产品不存在</p> -->
|
||||
<!-- <p></p> -->
|
||||
<!-- <p>请点击按钮返回首页！</p> -->
|
||||
<!-- <button @click="enterHome">返回首页</button> -->
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Parallax from 'parallax-js'
|
||||
export default {
|
||||
name: 'H5404Page',
|
||||
data() {
|
||||
return {
|
||||
parallaxInstance: null
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
const scene = document.getElementById('scene')
|
||||
if (scene) {
|
||||
this.parallaxInstance = new Parallax(scene)
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.parallaxInstance) {
|
||||
this.parallaxInstance.destroy()
|
||||
this.parallaxInstance = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
enterHome() {
|
||||
this.$router.push({ name: 'H5' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.about {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.about .bg_links {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(5px);
|
||||
position: absolute;
|
||||
}
|
||||
.about .social {
|
||||
opacity: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.about:hover {
|
||||
width: 105px;
|
||||
height: 105px;
|
||||
transition: all 0.6s cubic-bezier(0.64, 0.01, 0.07, 1.65);
|
||||
}
|
||||
.about:hover .logo {
|
||||
opacity: 1;
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
.about:hover .social {
|
||||
opacity: 1;
|
||||
}
|
||||
.about:hover .social .icon {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.about:hover .social:hover {
|
||||
background-size: 28px;
|
||||
}
|
||||
.about:hover .social:hover .icon {
|
||||
background-size: 65%;
|
||||
opacity: 1;
|
||||
}
|
||||
.about:hover .social.portfolio {
|
||||
right: 0;
|
||||
bottom: calc(100% - 40px);
|
||||
transition: all 0.3s 0s cubic-bezier(0.64, 0.01, 0.07, 1.65);
|
||||
}
|
||||
.about:hover .social.portfolio .icon:hover {
|
||||
background-color: #698fb7;
|
||||
}
|
||||
.about:hover .social.linkedin {
|
||||
bottom: 0;
|
||||
right: calc(100% - 40px);
|
||||
transition: all 0.3s 0.25s cubic-bezier(0.64, 0.01, 0.07, 1.65);
|
||||
}
|
||||
.about:hover .social.linkedin .icon:hover {
|
||||
background-color: #0077b5;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
ul,
|
||||
li,
|
||||
button,
|
||||
a,
|
||||
i,
|
||||
input,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
h1:focus,
|
||||
h2:focus,
|
||||
h3:focus,
|
||||
h4:focus,
|
||||
h5:focus,
|
||||
h6:focus,
|
||||
p:focus,
|
||||
ul:focus,
|
||||
li:focus,
|
||||
button:focus,
|
||||
a:focus,
|
||||
i:focus,
|
||||
input:focus,
|
||||
body:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.c-4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #695681;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
.logo img {
|
||||
width: 55%;
|
||||
height: 55%;
|
||||
transform: translateY(-1px);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
nav .menu {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 5%;
|
||||
box-sizing: border-box;
|
||||
z-index: 3;
|
||||
}
|
||||
nav .menu .website_name {
|
||||
color: #695681;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
background: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 2px;
|
||||
opacity: 0.5;
|
||||
transition: all 0.4s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
nav .menu .website_name:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
nav .menu .menu_links {
|
||||
transition: all 0.4s ease;
|
||||
opacity: 0.5;
|
||||
}
|
||||
nav .menu .menu_links:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@media screen and (max-width: 799px) {
|
||||
nav .menu .menu_links {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
nav .menu .menu_links .link {
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
margin-right: 50px;
|
||||
letter-spacing: 2px;
|
||||
position: relative;
|
||||
transition: all 0.3s 0.2s ease;
|
||||
}
|
||||
nav .menu .menu_links .link:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
nav .menu .menu_links .link:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #ffedc0 0%, #ff9d87 100%);
|
||||
bottom: -10px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.4s cubic-bezier(0.82, 0.02, 0.13, 1.26);
|
||||
left: 100%;
|
||||
}
|
||||
nav .menu .menu_links .link:hover {
|
||||
opacity: 1;
|
||||
color: #fb8a8a;
|
||||
}
|
||||
nav .menu .menu_links .link:hover:before {
|
||||
width: 40px;
|
||||
left: 0;
|
||||
}
|
||||
nav .menu .menu_icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media screen and (max-width: 799px) {
|
||||
nav .menu .menu_icon {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
nav .menu .menu_icon .icon {
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: white;
|
||||
position: absolute;
|
||||
}
|
||||
nav .menu .menu_icon .icon:before,
|
||||
nav .menu .menu_icon .icon:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: inherit;
|
||||
position: absolute;
|
||||
transition: all 0.3s cubic-bezier(0.49, 0.04, 0, 1.55);
|
||||
}
|
||||
nav .menu .menu_icon .icon:before {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
nav .menu .menu_icon .icon:after {
|
||||
transform: translateY(8px);
|
||||
}
|
||||
nav .menu .menu_icon:hover .icon {
|
||||
background: #ffedc0;
|
||||
}
|
||||
nav .menu .menu_icon:hover .icon:before {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
nav .menu .menu_icon:hover .icon:after {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.wrapper .container {
|
||||
margin: 0 auto;
|
||||
transition: all 0.4s ease;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.wrapper .container .scene {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wrapper .container .one,
|
||||
.wrapper .container .two,
|
||||
.wrapper .container .three,
|
||||
.wrapper .container .circle,
|
||||
.wrapper .container .p404 {
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
top: 20% !important;
|
||||
left: 20% !important;
|
||||
min-width: 400px;
|
||||
min-height: 400px;
|
||||
}
|
||||
.wrapper .container .one .content,
|
||||
.wrapper .container .two .content,
|
||||
.wrapper .container .three .content,
|
||||
.wrapper .container .circle .content,
|
||||
.wrapper .container .p404 .content {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: content 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards;
|
||||
}
|
||||
@keyframes content {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
.wrapper .container .one .content .piece,
|
||||
.wrapper .container .two .content .piece,
|
||||
.wrapper .container .three .content .piece,
|
||||
.wrapper .container .circle .content .piece,
|
||||
.wrapper .container .p404 .content .piece {
|
||||
width: 200px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
border-radius: 80px;
|
||||
z-index: 1;
|
||||
animation: pieceLeft 8s cubic-bezier(1, 0.06, 0.25, 1) infinite both;
|
||||
}
|
||||
@keyframes pieceLeft {
|
||||
50% {
|
||||
left: 80%;
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
@keyframes pieceRight {
|
||||
50% {
|
||||
right: 80%;
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 799px) {
|
||||
.wrapper .container .one,
|
||||
.wrapper .container .two,
|
||||
.wrapper .container .three,
|
||||
.wrapper .container .circle,
|
||||
.wrapper .container .p404 {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
top: 5% !important;
|
||||
left: 5% !important;
|
||||
min-width: 280px;
|
||||
min-height: 280px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-height: 660px) {
|
||||
.wrapper .container .one,
|
||||
.wrapper .container .two,
|
||||
.wrapper .container .three,
|
||||
.wrapper .container .circle,
|
||||
.wrapper .container .p404 {
|
||||
min-width: 280px;
|
||||
min-height: 280px;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
top: 20% !important;
|
||||
left: 20% !important;
|
||||
}
|
||||
}
|
||||
.wrapper .container .text {
|
||||
width: 60%;
|
||||
height: 40%;
|
||||
min-width: 400px;
|
||||
min-height: 500px;
|
||||
position: absolute;
|
||||
margin: 40px 0;
|
||||
animation: text 0.6s 1.8s ease backwards;
|
||||
}
|
||||
@keyframes text {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 799px) {
|
||||
.wrapper .container .text {
|
||||
min-height: 400px;
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
.wrapper .container .text article {
|
||||
width: 500px;
|
||||
position: absolute;
|
||||
bottom: 80%;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
@media screen and (max-width: 799px) {
|
||||
.wrapper .container .text article {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.wrapper .container .text article p {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.6px;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 6px 6px 10px #32243e;
|
||||
}
|
||||
.wrapper .container .text article button {
|
||||
height: 40px;
|
||||
padding: 0 30px;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 15px 20px rgba(54, 24, 79, 0.5);
|
||||
z-index: 3;
|
||||
color: #695681;
|
||||
background-color: white;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.wrapper .container .text article button:hover {
|
||||
box-shadow: 0px 10px 10px -10px rgba(54, 24, 79, 0.5);
|
||||
transform: translateY(5px);
|
||||
background: #fb8a8a;
|
||||
color: white;
|
||||
}
|
||||
.wrapper .container .p404 {
|
||||
font-size: 100px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4px;
|
||||
color: white;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
animation: anime404 0.6s cubic-bezier(0.3, 0.8, 1, 1.05) both;
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
@media screen and (max-width: 799px) {
|
||||
.wrapper .container .p404 {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
@keyframes anime404 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(10) skew(20deg, 20deg);
|
||||
}
|
||||
}
|
||||
.wrapper .container .p404:nth-of-type(2) {
|
||||
color: #36184f;
|
||||
z-index: 1;
|
||||
animation-delay: 1s;
|
||||
filter: blur(10px);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.wrapper .container .circle {
|
||||
position: absolute;
|
||||
}
|
||||
.wrapper .container .circle:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
background-color: rgba(54, 24, 79, 0.2);
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow:
|
||||
inset 5px 20px 40px rgba(54, 24, 79, 0.25),
|
||||
inset 5px 0px 5px rgba(50, 36, 62, 0.3),
|
||||
inset 5px 5px 20px rgba(50, 36, 62, 0.25),
|
||||
2px 2px 5px rgba(255, 255, 255, 0.2);
|
||||
animation: circle 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards;
|
||||
}
|
||||
@keyframes circle {
|
||||
0% {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 799px) {
|
||||
.wrapper .container .circle:before {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
.wrapper .container .one .content:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background-color: rgba(54, 24, 79, 0.3);
|
||||
border-radius: 100%;
|
||||
box-shadow:
|
||||
inset 5px 20px 40px rgba(54, 24, 79, 0.25),
|
||||
inset 5px 0px 5px rgba(50, 36, 62, 0.3),
|
||||
inset 5px 5px 20px rgba(50, 36, 62, 0.25),
|
||||
2px 2px 5px rgba(255, 255, 255, 0.2);
|
||||
animation: circle 0.8s 0.4s cubic-bezier(1, 0.06, 0.25, 1) backwards;
|
||||
}
|
||||
@media screen and (max-width: 799px) {
|
||||
.wrapper .container .one .content:before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
.wrapper .container .one .content .piece {
|
||||
background: linear-gradient(90deg, #8077ea 13.7%, #eb73ff 94.65%);
|
||||
}
|
||||
.wrapper .container .one .content .piece:nth-child(1) {
|
||||
right: 15%;
|
||||
top: 18%;
|
||||
height: 30px;
|
||||
width: 120px;
|
||||
animation-delay: 0.5s;
|
||||
animation-name: pieceRight;
|
||||
}
|
||||
.wrapper .container .one .content .piece:nth-child(2) {
|
||||
left: 15%;
|
||||
top: 45%;
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
animation-delay: 1s;
|
||||
animation-name: pieceLeft;
|
||||
}
|
||||
.wrapper .container .one .content .piece:nth-child(3) {
|
||||
left: 10%;
|
||||
top: 75%;
|
||||
height: 20px;
|
||||
width: 70px;
|
||||
animation-delay: 1.5s;
|
||||
animation-name: pieceLeft;
|
||||
}
|
||||
.wrapper .container .two .content .piece {
|
||||
background: linear-gradient(90deg, #ffedc0 0%, #ff9d87 100%);
|
||||
}
|
||||
.wrapper .container .two .content .piece:nth-child(1) {
|
||||
left: 0%;
|
||||
top: 25%;
|
||||
height: 40px;
|
||||
width: 120px;
|
||||
animation-delay: 2s;
|
||||
animation-name: pieceLeft;
|
||||
}
|
||||
.wrapper .container .two .content .piece:nth-child(2) {
|
||||
right: 15%;
|
||||
top: 35%;
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
animation-delay: 2.5s;
|
||||
animation-name: pieceRight;
|
||||
}
|
||||
.wrapper .container .two .content .piece:nth-child(3) {
|
||||
right: 10%;
|
||||
top: 80%;
|
||||
height: 20px;
|
||||
width: 160px;
|
||||
animation-delay: 3s;
|
||||
animation-name: pieceRight;
|
||||
}
|
||||
.wrapper .container .three .content .piece {
|
||||
background: #fb8a8a;
|
||||
}
|
||||
.wrapper .container .three .content .piece:nth-child(1) {
|
||||
left: 25%;
|
||||
top: 35%;
|
||||
height: 20px;
|
||||
width: 80px;
|
||||
animation-name: pieceLeft;
|
||||
animation-delay: 3.5s;
|
||||
}
|
||||
.wrapper .container .three .content .piece:nth-child(2) {
|
||||
right: 10%;
|
||||
top: 55%;
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
animation-name: pieceRight;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
.wrapper .container .three .content .piece:nth-child(3) {
|
||||
left: 40%;
|
||||
top: 68%;
|
||||
height: 20px;
|
||||
width: 80px;
|
||||
animation-name: pieceLeft;
|
||||
animation-delay: 4.5s;
|
||||
}
|
||||
</style>
|
||||
425
src/pages/H5.vue
Normal file
425
src/pages/H5.vue
Normal file
@@ -0,0 +1,425 @@
|
||||
<template>
|
||||
<div class="h5-container">
|
||||
<!-- topImg -->
|
||||
<img
|
||||
class="topImg"
|
||||
:src="`https://h5.whjhft.com/static/${imgArr[0]}`"
|
||||
v-show="imgArr[0]"
|
||||
alt=""
|
||||
/>
|
||||
<!-- form表单 -->
|
||||
<div class="form">
|
||||
<div class="container">
|
||||
<div class="wrapper">
|
||||
<div class="form-item">
|
||||
<label class="label">*身份证姓名</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.cert_name"
|
||||
placeholder="请输入身份证姓名（安全加密）"
|
||||
@blur="validateName"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="label">*联系电话</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.contact_num"
|
||||
placeholder="请输入联系电话（安全加密）"
|
||||
@blur="validatePhone"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-item" v-show="need_identity === 1">
|
||||
<label class="label">*身份证号码</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.cert_no"
|
||||
placeholder="未满18岁请勿领卡（安全加密）"
|
||||
@blur="validateID"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="label">*地区</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.address"
|
||||
placeholder="选择地区（安全加密）"
|
||||
@focus="selectArea"
|
||||
/>
|
||||
</div>
|
||||
<div class="area">
|
||||
<van-popup v-model="show" position="bottom">
|
||||
<van-area title="选择地区" :area-list="areaList" @confirm="confirm" @cancel="cancel"/>
|
||||
</van-popup>
|
||||
</div>
|
||||
<!--<van-area title="标题" :area-list="areaList" value="110101" />-->
|
||||
<div class="form-item">
|
||||
<label class="label">*详细地址</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.post_addr"
|
||||
placeholder="街道/镇+村/小区/写字楼+门牌号"
|
||||
@blur="validateAddress"
|
||||
/>
|
||||
</div>
|
||||
<div class="tips">
|
||||
*未满18周岁的，因政策原因不发货，请勿下单。请保持电话畅通，我们将随时可能与您联系。
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button @click="add">立即领取，包邮到家</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- details_img -->
|
||||
<img
|
||||
:src="`https://h5.whjhft.com/static/${imgArr[1]}`"
|
||||
v-show="imgArr[1]"
|
||||
alt=""
|
||||
/>
|
||||
<!-- copyright_img -->
|
||||
<img
|
||||
:src="`https://h5.whjhft.com/static/${imgArr[2]}`"
|
||||
v-show="imgArr[2]"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import CryptoJS from "crypto-js";
|
||||
import {areaList} from '@vant/area-data';
|
||||
|
||||
export default {
|
||||
name: "H5Page",
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
areaList,
|
||||
encrypted: "erPY%2B%2BgxM2AhOlGj3B%2FyiTu3jbfg82vQ2vcXhcjzvEx%2BCBOQdn3%2BENusPylgeE5dg8ohlNHVohvkZdWejWOL1g%3D%3D",
|
||||
cryptoConfig: {
|
||||
key: "1234567890123456", // 16位密钥（AES-128）
|
||||
iv: "6543210987654321", // 16位初始向量
|
||||
},
|
||||
parseObj: {
|
||||
goods_id: null,
|
||||
agent_id: null,
|
||||
},
|
||||
need_identity: null,
|
||||
imgArr: [],
|
||||
base64: null,
|
||||
form: {
|
||||
cert_name: "",
|
||||
contact_num: "",
|
||||
address: "",
|
||||
post_addr: "",
|
||||
goods: [],
|
||||
agent_id: "",
|
||||
cert_no: "",
|
||||
post_province_name: "",
|
||||
post_city_name: "",
|
||||
post_district_name: "",
|
||||
source: 7,
|
||||
source_type: 1,
|
||||
},
|
||||
errors: {
|
||||
cert_name: '',
|
||||
contact_num: '',
|
||||
cert_no: '',
|
||||
post_addr: ''
|
||||
},
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
await this.parseData();
|
||||
},
|
||||
methods: {
|
||||
validateName() {
|
||||
const name = this.form.cert_name.trim();
|
||||
if (!/^[\u4e00-\u9fa5]{2,}$/.test(name)) {
|
||||
this.errors.cert_name = '请输入至少两个中文字符的姓名';
|
||||
this.$toast.fail('请输入至少两个中文字符的姓名');
|
||||
} else {
|
||||
this.errors.cert_name = '';
|
||||
}
|
||||
},
|
||||
validatePhone() {
|
||||
const phone = this.form.contact_num.trim();
|
||||
if (!/^1[3-9]\d{9}$/.test(phone)) {
|
||||
this.errors.contact_num = '请输入正确的11位手机号';
|
||||
this.$toast.fail('请输入正确的11位手机号');
|
||||
} else {
|
||||
this.errors.contact_num = '';
|
||||
}
|
||||
},
|
||||
validateID() {
|
||||
const id = this.form.cert_no.trim();
|
||||
if (!/^\d{17}[\dXx]$/.test(id)) {
|
||||
this.errors.cert_no = '请输入正确的身份证号码';
|
||||
this.$toast.fail('请输入正确的身份证号码');
|
||||
} else {
|
||||
this.errors.cert_no = '';
|
||||
}
|
||||
},
|
||||
validateAddress() {
|
||||
const addr = this.form.post_addr.trim();
|
||||
if (addr.length < 6) {
|
||||
this.errors.post_addr = '详细地址不能少于6个字';
|
||||
this.$toast.fail('详细地址不能少于6个字');
|
||||
} else {
|
||||
this.errors.post_addr = '';
|
||||
}
|
||||
},
|
||||
async add() {
|
||||
// 提交前统一校验一次
|
||||
this.validateName();
|
||||
this.validatePhone();
|
||||
if (this.need_identity === 1) {
|
||||
this.validateID();
|
||||
}
|
||||
this.validateAddress();
|
||||
|
||||
// 如果没有错误才提交
|
||||
const firstError = Object.values(this.errors).find(err => err);
|
||||
if (firstError) {
|
||||
return this.$toast.fail(firstError);
|
||||
}
|
||||
// 发送下单请求
|
||||
const res = await axios({
|
||||
url: 'https://h5.whjhft.com/api/v1/h5/lot/save',
|
||||
method: 'POST',
|
||||
data: this.form
|
||||
});
|
||||
if (res.data.status === 1) {
|
||||
this.$toast.success("下单成功");
|
||||
this.form = {
|
||||
cert_name: "",
|
||||
contact_num: "",
|
||||
address: "",
|
||||
post_addr: "",
|
||||
goods: [],
|
||||
agent_id: "",
|
||||
cert_no: "",
|
||||
post_province_name: "",
|
||||
post_city_name: "",
|
||||
post_district_name: "",
|
||||
source: 7,
|
||||
source_type: 1,
|
||||
}
|
||||
} else if (res.data.status === 0) {
|
||||
this.$toast.fail(res.data.msg);
|
||||
}
|
||||
},
|
||||
// 确定
|
||||
confirm(value) {
|
||||
this.form.address = value.map(item => item.name).join('/')
|
||||
this.form.post_province_name = value[0].name
|
||||
this.form.post_city_name = value[1].name
|
||||
this.form.post_district_name = value[2].name
|
||||
this.cancel()
|
||||
},
|
||||
// 取消
|
||||
cancel() {
|
||||
this.show = false
|
||||
},
|
||||
|
||||
selectArea() {
|
||||
this.show = true
|
||||
},
|
||||
// 解析URL参数
|
||||
async parseData() {
|
||||
// this.encrypted = window.location.href.split('=')[1]
|
||||
const key = CryptoJS.enc.Utf8.parse(this.cryptoConfig.key);
|
||||
const iv = CryptoJS.enc.Utf8.parse(this.cryptoConfig.iv);
|
||||
|
||||
const decrypted = CryptoJS.AES.decrypt(
|
||||
decodeURIComponent(this.encrypted),
|
||||
key,
|
||||
{
|
||||
iv: iv,
|
||||
mode: CryptoJS.mode.CBC,
|
||||
padding: CryptoJS.pad.Pkcs7,
|
||||
}
|
||||
);
|
||||
|
||||
this.parseObj = JSON.parse(decrypted.toString(CryptoJS.enc.Utf8));
|
||||
|
||||
this.form.goods = [this.parseObj.goods_id]
|
||||
this.form.agent_id = this.parseObj.agent_id
|
||||
|
||||
// 加密成base64 获取当前图片
|
||||
const base64 = btoa(
|
||||
this.parseObj.agent_id + "_" + this.parseObj.goods_id
|
||||
);
|
||||
|
||||
const {data} = await axios.get(
|
||||
`https://h5.whjhft.com/api/v1/h5/lot?key=${base64}`
|
||||
);
|
||||
|
||||
if (data.status === 0) {
|
||||
await this.$router.push({name: "404"});
|
||||
return;
|
||||
}
|
||||
|
||||
this.imgArr = [
|
||||
data.data.good.top_img,
|
||||
data.data.good.details_img,
|
||||
data.data.good.copyright_img,
|
||||
];
|
||||
|
||||
document.title = data.data.good.good_name;
|
||||
|
||||
this.need_identity = data.data.good.need_identity;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.h5-container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.topImg {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: -1px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
background-color: #1b0b0c;
|
||||
padding: 40px 20px;
|
||||
/* height: 500px; */
|
||||
box-sizing: border-box;
|
||||
|
||||
.container {
|
||||
border: 1px solid #ffffff;
|
||||
border-radius: 10px;
|
||||
height: 100%;
|
||||
|
||||
.wrapper {
|
||||
padding: 10px;
|
||||
|
||||
.form-item {
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.label {
|
||||
width: 90px;
|
||||
/* border: 1px solid; */
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tips{
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #f46c6c;
|
||||
color: white;
|
||||
border-radius: 100px;
|
||||
font-size: 15px;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
box-shadow: inset 0 3px 0 0 hsla(0, 0%, 100%, 0.15),
|
||||
inset 0 -3px 2px 0 rgba(0, 0, 0, 0.15);
|
||||
transition: all 0.3s ease;
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
/* 💥 动画部分 */
|
||||
transition: all 0.3s ease;
|
||||
|
||||
/* 💥 无限伸缩动画 */
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.h5-container {
|
||||
max-width: 410px;
|
||||
|
||||
.topImg {
|
||||
width: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: -1px;
|
||||
object-fit: cover;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-slide-enter-active, .fade-slide-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-slide-enter-from, .fade-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.fade-slide-enter-to, .fade-slide-leave-from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
</style>
|
||||
42
src/router/index.js
Normal file
42
src/router/index.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import Vue from "vue";
|
||||
import Router from "vue-router";
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
import H5 from "@/pages/H5.vue";
|
||||
import H5404Page from "@/pages/404.vue";
|
||||
|
||||
export const constantRoutes = [
|
||||
{
|
||||
path: "/h5",
|
||||
name: "H5",
|
||||
component: H5,
|
||||
},
|
||||
|
||||
{
|
||||
path: "/404",
|
||||
name: "404",
|
||||
component: H5404Page,
|
||||
},
|
||||
|
||||
{
|
||||
path: "/",
|
||||
redirect: "/h5",
|
||||
},
|
||||
|
||||
{
|
||||
path: "*",
|
||||
redirect: "/404"
|
||||
},
|
||||
];
|
||||
|
||||
const createRouter = () =>
|
||||
new Router({
|
||||
mode: "history", // require service support
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
routes: constantRoutes,
|
||||
});
|
||||
|
||||
const router = createRouter();
|
||||
|
||||
export default router;
|
||||
326
test.vue
Normal file
326
test.vue
Normal file
@@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<div>
|
||||
<img class="imgs" :src="`https://h5.whjhft.com/static/${imgArr[0]}`" v-show="imgArr[0]">
|
||||
<div class="content">
|
||||
<van-cell-group>
|
||||
<van-field :rules="[{ required: true, message: '请填写用户名' }]" v-model="formData.cert_name" label="收货人姓名" placeholder="请输入收货人姓名" />
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group>
|
||||
<van-field v-model="formData.contact_num" label="收货人电话" placeholder="请输入收货人电话" />
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group>
|
||||
<van-field v-model="formData.cert_no" label="身份证号" placeholder="请输入身份证号" v-show="need_identity===1"/>
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group>
|
||||
<van-field readonly v-model="formData.post_province_name+formData.post_city_name+formData.post_district_name" label="地区" placeholder="请选择地区" @click="showPopup"/>
|
||||
</van-cell-group>
|
||||
|
||||
<div class="popup">
|
||||
<van-popup v-model="show" position="bottom" :style="{ height: '30%' }" >
|
||||
<van-area title="选择地区" :area-list="areaList" @confirm="handleConfirm" @cancel="handleCancel"/>
|
||||
</van-popup>
|
||||
</div>
|
||||
<van-cell-group>
|
||||
<van-field v-model="formData.post_addr" label="详细地址" placeholder="请输入详细地址" />
|
||||
</van-cell-group>
|
||||
<button class="vbuttons" @click="submit">立即领取，包邮到家</button>
|
||||
</div>
|
||||
|
||||
|
||||
<img class="imgs" :src="`https://h5.whjhft.com/static/${imgArr[1]}`" v-show="imgArr[1]" >
|
||||
|
||||
|
||||
<img class="imgs" :src="`https://h5.whjhft.com/static/${imgArr[2]}`" v-show="imgArr[2]">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import areaData from 'china-area-data';
|
||||
import { Base64 } from "js-base64";
|
||||
import axios from "axios";
|
||||
import { Toast } from 'vant';
|
||||
import CryptoJS from 'crypto-js'; // 引入 CryptoJS
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
need_identity:null,
|
||||
base64:null,
|
||||
show: false,
|
||||
urlos: null,
|
||||
id_goods: null,
|
||||
id_agent: null,
|
||||
imgArr: [],
|
||||
encrypted: 'https://example.com/product?data=DiW0XlB6rznMFVtUopdDj6CyL%2FGYjEubPEyOZRCjmtzZco97wHy9bLPo%2BnZdqureW%2BynJnIR%2Biktz5HNWrvLOg%3D%3D',
|
||||
areaList: {},
|
||||
value: '',
|
||||
formData: {
|
||||
cert_name: "",
|
||||
contact_num: "",
|
||||
address: "",
|
||||
addressOption: [],
|
||||
post_addr: "",
|
||||
goods: [],
|
||||
agent_id: "",
|
||||
cert_no: "",
|
||||
post_province_name: "",
|
||||
post_city_name: "",
|
||||
post_district_name: "",
|
||||
source: 7,
|
||||
source_type: 1
|
||||
},
|
||||
// CryptoJS 解密配置（需与加密端一致）
|
||||
cryptoConfig: {
|
||||
key: '1234567890123456', // 16位密钥（AES-128）
|
||||
iv: '6543210987654321' // 16位初始向量
|
||||
}
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
console.log(window.location.href);
|
||||
// await this.Parse(this.encrypted);
|
||||
this.formatAreaData();
|
||||
// const result = window.location.href.split('=')[1]
|
||||
const result = 'ffMngb0kTzCgTwjPAt7KY0yAtF4784R3VRxzhlVEM5PMZn4xXT4XvuVLXFkQqZyXVS5Cnsd3WRpKaQIQh%2BLn0Q%3D%3D'
|
||||
await this.getLink(result)
|
||||
const {data} = await axios.get(`https://h5.whjhft.com/api/v1/h5/lot?key=${this.base64}`);
|
||||
console.log(data)
|
||||
this.imgArr=[
|
||||
data.data.good.top_img,
|
||||
data.data.good.details_img,
|
||||
data.data.good.copyright_img,
|
||||
data.data.good.customize_img,
|
||||
]
|
||||
this.need_identity=data.data.good.need_identity
|
||||
},
|
||||
methods: {
|
||||
getLink(encrypted){
|
||||
console.log(encrypted)
|
||||
const key = CryptoJS.enc.Utf8.parse('1234567890123456');
|
||||
const iv = CryptoJS.enc.Utf8.parse('6543210987654321');
|
||||
|
||||
const decrypted = CryptoJS.AES.decrypt(decodeURIComponent(encrypted), key, {
|
||||
iv: iv,
|
||||
mode: CryptoJS.mode.CBC,
|
||||
padding: CryptoJS.pad.Pkcs7,
|
||||
});
|
||||
|
||||
const result = JSON.parse(decrypted.toString(CryptoJS.enc.Utf8));
|
||||
this.formData.goods=[
|
||||
result.goods_id
|
||||
]
|
||||
this.formData.agent_id=result.agent_id
|
||||
// console.log(btoa(result.agent_id+'_'+result.goods_id))
|
||||
// console.log(btoa(result.agent_id+'_'+))
|
||||
console.log(result.goods_id)
|
||||
result.goods_id=53
|
||||
this.base64=btoa(result.agent_id+'_'+result.goods_id)
|
||||
},
|
||||
showPopup() {
|
||||
this.show = true;
|
||||
},
|
||||
async submit() {
|
||||
|
||||
// 提交逻辑保持不变
|
||||
const res = await axios({
|
||||
url: 'https://h5.whjhft.com/api/v1/h5/lot/save',
|
||||
method: 'POST',
|
||||
data: this.formData
|
||||
});
|
||||
if (res.data.status === 1) {
|
||||
Toast.success("提交成功");
|
||||
} else if (res.data.status === 0) {
|
||||
Toast.fail(res.data.msg);
|
||||
}
|
||||
},
|
||||
formatAreaData() {
|
||||
// 地区数据格式化逻辑保持不变
|
||||
const result = {
|
||||
province_list: {},
|
||||
city_list: {},
|
||||
county_list: {}
|
||||
};
|
||||
if (areaData['86']) {
|
||||
result.province_list = areaData['86'];
|
||||
}
|
||||
Object.keys(result.province_list).forEach(provinceCode => {
|
||||
const cities = areaData[provinceCode] || {};
|
||||
Object.keys(cities).forEach(cityCode => {
|
||||
if (typeof cities[cityCode] === 'object') {
|
||||
result.city_list[cityCode] = cityCode;
|
||||
} else {
|
||||
result.city_list[cityCode] = cities[cityCode];
|
||||
}
|
||||
});
|
||||
});
|
||||
Object.keys(result.city_list).forEach(cityCode => {
|
||||
const counties = areaData[cityCode] || {};
|
||||
Object.keys(counties).forEach(countyCode => {
|
||||
result.county_list[countyCode] = counties[countyCode];
|
||||
});
|
||||
});
|
||||
this.areaList = result;
|
||||
console.log('格式化后的地区数据:', this.areaList);
|
||||
},
|
||||
handleConfirm(values) {
|
||||
this.formData.post_province_name=values[0].name
|
||||
this.formData.post_city_name=values[1].name
|
||||
this.formData.post_district_name=values[2].name
|
||||
this.formData.address=values[0].name+values[1].name+values[2].name
|
||||
this.formData.addressOption=[
|
||||
values[0].name,values[1].name,values[2].name
|
||||
]
|
||||
this.show = false;
|
||||
|
||||
|
||||
},
|
||||
handleCancel() {
|
||||
this.show = false;
|
||||
},
|
||||
async Parse(urls) {
|
||||
try {
|
||||
console.log(urls);
|
||||
const url = new URL(urls);
|
||||
const dataParam = url.searchParams.get('data'); // 获取加密的data参数
|
||||
console.log('原始加密参数:', dataParam);
|
||||
|
||||
// ====================== 核心修改：使用 CryptoJS 解密 ======================
|
||||
// 1. Base64解码（如果参数是Base64编码的，需先解码）
|
||||
const base64Decoded = Base64.decode(dataParam);
|
||||
// 2. AES-CBC解密（需与加密端的密钥、IV、模式一致）
|
||||
const decryptedBytes = CryptoJS.AES.decrypt(
|
||||
base64Decoded,
|
||||
CryptoJS.enc.Utf8.parse(this.cryptoConfig.key), // 密钥
|
||||
{
|
||||
iv: CryptoJS.enc.Utf8.parse(this.cryptoConfig.iv), // 初始向量
|
||||
mode: CryptoJS.mode.CBC, // 加密模式
|
||||
padding: CryptoJS.pad.Pkcs7 // 填充方式
|
||||
}
|
||||
);
|
||||
const decodedKey = decryptedBytes.toString(CryptoJS.enc.Utf8); // 转换为明文
|
||||
// ====================== 修改结束 ======================
|
||||
|
||||
console.log('解密后数据:', decodedKey);
|
||||
// 解析解密后的ID（假设格式为 "agentId_goodsId"）
|
||||
const [id_agent, id_goods] = decodedKey.split('_');
|
||||
this.id_goods = Number(id_goods);
|
||||
this.id_agent = id_agent;
|
||||
console.log('商品ID:', this.id_goods, '代理商ID:', this.id_agent);
|
||||
|
||||
// 加载商品图片逻辑保持不变
|
||||
const res = await axios.get(url.origin + '/api/v1/h5/lot?key=' + dataParam);
|
||||
this.imgArr = [
|
||||
res.data.data.good.top_img,
|
||||
res.data.data.good.customize_img,
|
||||
res.data.data.good.details_img
|
||||
];
|
||||
} catch (error) {
|
||||
console.error('解码/请求失败:', error);
|
||||
Toast.fail('数据解析失败，请检查链接');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 新增自适应基础样式 */
|
||||
html {
|
||||
font-size: 50px; /* 375px宽度下的基准值（1rem=50px） */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
/* 输入框相关自适应调整（优化原有样式） */
|
||||
|
||||
|
||||
|
||||
/* 其他原有样式保持不变 */
|
||||
.imgs{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.imgs{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
body{
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.content{
|
||||
padding: 0.1rem;
|
||||
margin: 5px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.vbuttons {
|
||||
border-radius: 11115px;
|
||||
background-color: #f46c6c;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
box-shadow: 0 2px 8px rgba(73, 147, 170, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
animation: heart 1s infinite;
|
||||
}
|
||||
.vbuttons:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1px 4px rgba(73, 147, 170, 0.4);
|
||||
}
|
||||
@keyframes heart {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
/* 限制页面最大宽度并居中 */
|
||||
body {
|
||||
max-width: 1280px;
|
||||
margin: 10px auto;
|
||||
overflow-x: hidden; /* 隐藏可能出现的横向滚动条 */
|
||||
.van-picker{
|
||||
max-width: 1280px !important;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
.van-picker__cancel{
|
||||
|
||||
}
|
||||
.van-picker__confirm{
|
||||
|
||||
}
|
||||
.van-picker__title{
|
||||
|
||||
}
|
||||
*{
|
||||
font-size: 20px;
|
||||
}
|
||||
.vbuttons{
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 可选：调整大屏下的根字体大小（保持设计稿比例） */
|
||||
html {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
4
vue.config.js
Normal file
4
vue.config.js
Normal file
@@ -0,0 +1,4 @@
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true
|
||||
})
|
||||
Reference in New Issue
Block a user