Browse Source

init

master
langz 3 years ago
parent
commit
a1283dfb69
  1. 2
      .env
  2. 2
      .env.test
  3. 40
      .gitignore
  4. 30
      README.md
  5. 5
      babel.config.js
  6. 14105
      package-lock.json
  7. 53
      package.json
  8. BIN
      public/favicon.ico
  9. 73
      public/index.html
  10. 31
      src/App.vue
  11. 1916
      src/api/index.js
  12. 140
      src/assets/js/WebSocket.js
  13. 27
      src/assets/js/sockjs.min.js
  14. 318
      src/assets/js/speechSynthesis/audio.js
  15. 53
      src/assets/js/speechSynthesis/transcode.worker.js
  16. 501
      src/assets/js/stomp.js
  17. 28
      src/assets/scss/reset.scss
  18. 35
      src/commonJS/common.js
  19. 57
      src/components/HelloWorld.vue
  20. 125
      src/components/Message.vue
  21. 95
      src/components/dialog-common/dialog.vue
  22. 209
      src/components/dialog-common/modal.vue
  23. 95
      src/components/tabNew.vue
  24. 69
      src/main.js
  25. 37
      src/router/index.js
  26. 88
      src/util/index.js
  27. 50
      src/util/utils.js
  28. 204
      src/views/hotVIPPages/hotVIPpayback.vue
  29. 60
      src/views/hotVIPPages/privacy.vue
  30. 461
      src/views/hotVIPPages/recieveVIP.vue
  31. 512
      src/views/hotVIPPages/vip.vue
  32. 64
      vue.config.js
  33. 8975
      yarn.lock

2
.env

@ -0,0 +1,2 @@
NODE_ENV = 'production'
VUE_APP_FLAG = 'pro'

2
.env.test

@ -0,0 +1,2 @@
NODE_ENV = 'production'
VUE_APP_FLAG = 'test'

40
.gitignore

@ -1,25 +1,23 @@
# ---> Java
# Compiled class file
*.class
.DS_Store
node_modules
/dist
# Log file
*.log
# BlueJ files
*.ctxt
# local env files
.env.local
.env.*.local
# Mobile Tools for Java (J2ME)
.mtj.tmp/
# Package Files #
*.jar
*.war
*.nar
*.ear
*.zip
*.tar.gz
*.rar
# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
hs_err_pid*
# 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?

30
README.md

@ -1,3 +1,29 @@
# rights-front
# my-project
会员权益前端
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Run your tests
```
npm run test
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
babel.config.js

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

14105
package-lock.json

File diff suppressed because it is too large

53
package.json

@ -0,0 +1,53 @@
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"start": "yarn run serve",
"test": "yarn run serve --mode test",
"build:sit": "vue-cli-service build --mode test"
},
"dependencies": {
"@lucky-canvas/vue": "^0.1.11",
"axios": "^0.21.1",
"compression-webpack-plugin": "5.0.1",
"core-js": "^3.6.5",
"crypto-js": "^4.1.1",
"enc": "^0.4.0",
"js-md5": "^0.7.3",
"mint-ui": "^2.2.13",
"node-sass": "^4.12.0",
"sockjs-client": "^1.6.1",
"stompjs": "^2.3.3",
"swiper": "^8.4.4",
"vant": "^4.0.10",
"vue": "^2.6.11",
"vue-awesome-swiper": "^3.1.3",
"vue-axios": "^3.2.4",
"vue-lazyload": "^1.3.3",
"vue-monoplasty-slide-verify": "^1.3.1",
"vue-router": "^3.2.0",
"vue-seamless-scroll": "^1.1.23"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.0",
"@vue/cli-service": "^4.5.0",
"babel-plugin-component": "^1.1.1",
"sass-loader": "^8.0.2",
"vue-cookie": "^1.1.4",
"vue-template-compiler": "^2.6.11",
"worker-loader": "2.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"description": "## Project setup ``` npm install ```",
"main": "babel.config.js",
"keywords": [],
"author": "dongdada",
"license": "ISC"
}

BIN
public/favicon.ico

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

73
public/index.html

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="pc,mobile">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1,maximum-scale=1">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title></title>
<style>
.mint-indicator-wrapper {
z-index: 1000 !important;
}
.mint-indicator-mask {
z-index: 1000 !important;
}
</style>
</head>
<body id="body" style="visibility: hidden;">
<div id="app"></div>
</body>
<!-- vconsole -->
<!-- <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>
// VConsole will be exported to `window.VConsole` by default.
var vConsole = new window.VConsole();
</script> -->
</html>
<script>
window._gr_ignore_local_rule=true;
(function(window,document,script,src,namespace){
window[namespace] = window[namespace] || function(){
(window[namespace].q = window[namespace].q || []).push(arguments)
};
script = document.createElement('script');
let tag = document.getElementsByTagName('script')[0];
script.async = true;
script.src = src;
tag.parentNode.insertBefore(script,tag);
})(window,document,"script","https://assets.giocdn.com/sdk/cdp/gio.js","gdp")
function aa(){
(function (doc, win) {
var docEl = doc.documentElement,
bodys = document.getElementsByTagName('body')[0],
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
bodys.style.visibility = 'visible';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
};
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
aa();
} else {
bodys = document.getElementsByTagName('body')[0];
bodys.style.visibility = 'visible';
document.getElementsByTagName("html")[0].style.fontSize = "104px";
document.getElementsByTagName("body")[0].style.width = "750px";
document.getElementsByTagName("body")[0].style.margin = "0 auto";
}
</script>

31
src/App.vue

@ -0,0 +1,31 @@
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
</div>
</template>
<script>
export default {
provide() {
return {
reload: this.reload,
};
},
data() {
return {
isRouterAlive: true,
};
},
methods: {
reload() {
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true;
});
},
}
};
</script>
<style lang="scss">
@import "./assets/scss/reset.scss";
</style>

1916
src/api/index.js

File diff suppressed because it is too large

140
src/assets/js/WebSocket.js

@ -0,0 +1,140 @@
// import store from '@/store'
// import { Message } from 'element-ui'
import {Indicator, Toast} from "mint-ui";
var url = 'ws://192.168.1.6:8081/simple/'
var ws;
var tt;
var lockReconnect = false;//避免重复连接
var clientId = localStorage.getItem("clientId")//缓存中取出客户端id
var websocket = {
Init: function(clientId) {
if ("WebSocket" in window) {
ws = new WebSocket(url + clientId);
} else if ("MozWebSocket" in window) {
ws = new MozWebSocket(url + clientId);
} else {
console.log("您的浏览器不支持 WebSocket!");
return;
}
ws.onmessage = function(e) {
console.log("接收消息:" + e.data)
heartCheck.start()
if(e.data=='ok'){//心跳消息不做处理
return
}
//messageHandle(e.data)
}
ws.onclose = function() {
console.log("连接已关闭")
Toast({
message: '连接已关闭',
type: 'error',
});
reconnect(clientId);
}
ws.onopen = function() {
console.log("连接成功")
Toast({
message: '连接成功',
type: 'success',
});
heartCheck.start();
}
ws.onerror = function(e) {
console.log("数据传输发生错误");
Toast({
message: '数据传输发生错误',
type: 'error',
});
reconnect(clientId)
}
},
Send:function(sender,reception,body,flag){
let data = {
sender:sender,
reception:reception,
body:body,
flag:flag
}
let msg= JSON.stringify(data)
console.log("发送消息:"+msg)
ws.send(msg)
},
getWebSocket(){
return ws;
},
getStatus() {
if (ws.readyState == 0) {
return "未连接";
} else if (ws.readyState == 1) {
return "已连接";
} else if (ws.readyState == 2) {
return "连接正在关闭";
} else if (ws.readyState == 3) {
return "连接已关闭";
}
}
}
export default websocket;
//根据消息标识做不同的处理
function messageHandle(message) {
let msg = JSON.parse(message)
switch (msg.flag) {
case 'command':
console.log("指令消息类型")
break;
case 'inform':
console.log("通知")
break;
default:
console.log("未知消息类型")
}
}
function reconnect(sname) {
if(lockReconnect) {
return;
};
lockReconnect = true;
//没连接上会一直重连,设置延迟避免请求过多
tt && clearTimeout(tt);
tt = setTimeout(function () {
console.log("执行断线重连...")
websocket.Init(sname);
lockReconnect = false;
}, 4000);
}
//心跳检测
var heartCheck = {
timeout: 1000 * 60 * 3,
timeoutObj: null,
serverTimeoutObj: null,
start: function(){
console.log('开始心跳检测');
var self = this;
this.timeoutObj && clearTimeout(this.timeoutObj);
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
this.timeoutObj = setTimeout(function(){
//这里发送一个心跳,后端收到后,返回一个心跳消息,
//onmessage拿到返回的心跳就说明连接正常
console.log('心跳检测...');
ws.send("HeartBeat:"+ clientId );
self.serverTimeoutObj = setTimeout(function() {
if(ws.readyState!=1){
ws.close();
}
// createWebSocket();
}, self.timeout);
}, this.timeout)
}
}

27
src/assets/js/sockjs.min.js

File diff suppressed because one or more lines are too long

318
src/assets/js/speechSynthesis/audio.js

@ -0,0 +1,318 @@
/*
* @Autor: lycheng
* @Date: 2020-01-13 16:12:22
*/
/**
* Created by iflytek on 2019/11/19.
*
* 在线语音合成调用demo
* 此demo只是一个简单的调用示例不适合用到实际生产环境中
*
* 在线语音合成 WebAPI 接口调用示例 接口文档必看https://www.xfyun.cn/doc/tts/online_tts/API.html
* 错误码链接
* https://www.xfyun.cn/doc/tts/online_tts/API.html
* https://www.xfyun.cn/document/error-code (code返回错误码时必看)
*
*/
// 1. websocket连接:判断浏览器是否兼容,获取websocket url并连接,这里为了方便本地生成websocket url
// 2. 连接websocket,向websocket发送数据,实时接收websocket返回数据
// 3. 处理websocket返回数据为浏览器可以播放的音频数据
// 4. 播放音频数据
// ps: 该示例用到了es6中的一些语法,建议在chrome下运行
// import {downloadPCM, downloadWAV} from 'js/download.js'
import CryptoJS from 'crypto-js'
import Enc from 'enc'
import TransWorker from '@/assets/js/speechSynthesis/transcode.worker'
// import VConsole from 'vconsole'
import { Base64 } from 'js-base64'
// import './index.css'
let transWorker = new TransWorker()
//APPID,APISecret,APIKey在控制台-我的应用-语音合成(流式版)页面获取
const APPID = 'a5d29f72'
const API_SECRET = 'YmNkNjU4ODU4YzAzN2U1OTgwZGE3OWFh'
const API_KEY = 'c7c9a5cf79824ccfed2dd55acd49bf53'
function getWebsocketUrl() {
return new Promise((resolve, reject) => {
var apiKey = API_KEY
var apiSecret = API_SECRET
var url = 'wss://tts-api.xfyun.cn/v2/tts'
var host = location.host
var date = new Date().toGMTString()
var algorithm = 'hmac-sha256'
var headers = 'host date request-line'
var signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/tts HTTP/1.1`
var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret)
var signature = CryptoJS.enc.Base64.stringify(signatureSha)
var authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`
var authorization = btoa(authorizationOrigin)
url = `${url}?authorization=${authorization}&date=${date}&host=${host}`
resolve(url)
})
}
const TTSRecorder =class {
constructor({
speed = 30,
voice = 50,
pitch = 50,
voiceName = 'aisjiuxu',
appId = APPID,
text = '',
tte = 'UTF8',
defaultText = '请输入您要合成的文本',
} = {}) {
this.speed = speed
this.voice = voice
this.pitch = pitch
this.voiceName = voiceName
this.text = text
this.tte = tte
this.defaultText = defaultText
this.appId = appId
this.audioData = []
this.rawAudioData = []
this.audioDataOffset = 0
this.status = 'init'
transWorker.onmessage = (e) => {
this.audioData.push(...e.data.data)
this.rawAudioData.push(...e.data.rawAudioData)
}
}
// 修改录音听写状态
setStatus(status) {
this.onWillStatusChange && this.onWillStatusChange(this.status, status)
this.status = status
}
// 设置合成相关参数
setParams({ speed, voice, pitch, text, voiceName, tte }) {
speed !== undefined && (this.speed = speed)
voice !== undefined && (this.voice = voice)
pitch !== undefined && (this.pitch = pitch)
text && (this.text = text)
tte && (this.tte = tte)
voiceName && (this.voiceName = voiceName)
this.resetAudio()
}
// 连接websocket
connectWebSocket() {
this.setStatus('ttsing')
return getWebsocketUrl().then(url => {
let ttsWS
if ('WebSocket' in window) {
ttsWS = new WebSocket(url)
} else if ('MozWebSocket' in window) {
ttsWS = new MozWebSocket(url)
} else {
alert('浏览器不支持WebSocket')
return
}
this.ttsWS = ttsWS
ttsWS.onopen = e => {
this.webSocketSend()
this.playTimeout = setTimeout(() => {
this.audioPlay()
}, 1000)
}
ttsWS.onmessage = e => {
this.result(e.data)
}
ttsWS.onerror = e => {
clearTimeout(this.playTimeout)
this.setStatus('errorTTS')
alert('WebSocket报错,请f12查看详情')
console.error(`详情查看:${encodeURI(url.replace('wss:', 'https:'))}`)
}
ttsWS.onclose = e => {
// console.log(e)
}
})
}
// 处理音频数据
transToAudioData(audioData) {}
// websocket发送数据
webSocketSend() {
var params = {
common: {
app_id: this.appId, // APPID
},
business: {
aue: 'raw',
// sfl= 1,
auf: 'audio/L16;rate=16000',
vcn: this.voiceName,
speed: this.speed,
volume: this.voice,
pitch: this.pitch,
bgs: 1,
tte: this.tte,
},
data: {
status: 2,
text: this.encodeText(
this.text || this.defaultText,
this.tte === 'unicode' ? 'base64&utf16le' : ''
)
},
}
this.ttsWS.send(JSON.stringify(params))
}
encodeText (text, encoding) {
switch (encoding) {
case 'utf16le' : {
let buf = new ArrayBuffer(text.length * 4)
let bufView = new Uint16Array(buf)
for (let i = 0, strlen = text.length; i < strlen; i++) {
bufView[i] = text.charCodeAt(i)
}
return buf
}
case 'buffer2Base64': {
let binary = ''
let bytes = new Uint8Array(text)
let len = bytes.byteLength
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i])
}
return window.btoa(binary)
}
case 'base64&utf16le' : {
return this.encodeText(this.encodeText(text, 'utf16le'), 'buffer2Base64')
}
default : {
return Base64.encode(text)
}
}
}
// websocket接收数据的处理
result(resultData) {
let jsonData = JSON.parse(resultData)
// 合成失败
if (jsonData.code !== 0) {
alert(`合成失败: ${jsonData.code}:${jsonData.message}`)
console.error(`${jsonData.code}:${jsonData.message}`)
this.resetAudio()
return
}
transWorker.postMessage(jsonData.data.audio)
if (jsonData.code === 0 && jsonData.data.status === 2) {
this.ttsWS.close()
}
}
// 重置音频数据
resetAudio() {
this.audioStop()
this.setStatus('init')
this.audioDataOffset = 0
this.audioData = []
this.rawAudioData = []
this.ttsWS && this.ttsWS.close()
clearTimeout(this.playTimeout)
}
// 音频初始化
audioInit() {
let AudioContext = window.AudioContext || window.webkitAudioContext
if (AudioContext) {
this.audioContext = new AudioContext()
this.audioContext.resume()
this.audioDataOffset = 0
}
}
// 音频播放
audioPlay() {
this.setStatus('play')
let audioData = this.audioData.slice(this.audioDataOffset)
this.audioDataOffset += audioData.length
let audioBuffer = this.audioContext.createBuffer(1, audioData.length, 22050)
let nowBuffering = audioBuffer.getChannelData(0)
if (audioBuffer.copyToChannel) {
audioBuffer.copyToChannel(new Float32Array(audioData), 0, 0)
} else {
for (let i = 0; i < audioData.length; i++) {
nowBuffering[i] = audioData[i]
}
}
let bufferSource = this.bufferSource = this.audioContext.createBufferSource()
bufferSource.buffer = audioBuffer
bufferSource.connect(this.audioContext.destination)
bufferSource.start()
bufferSource.onended = event => {
if (this.status !== 'play') {
return
}
if (this.audioDataOffset < this.audioData.length) {
this.audioPlay()
} else {
this.audioStop()
}
}
}
// 音频播放结束
audioStop() {
this.setStatus('endPlay')
clearTimeout(this.playTimeout)
this.audioDataOffset = 0
if (this.bufferSource) {
try {
this.bufferSource.stop()
} catch (e) {
// console.log(e)
}
}
}
start() {
if(this.audioData.length) {
this.audioPlay()
} else {
if (!this.audioContext) {
this.audioInit()
}
if (!this.audioContext) {
alert('该浏览器不支持webAudioApi相关接口')
return
}
this.connectWebSocket()
}
}
stop() {
this.audioStop()
}
}
export default TTSRecorder
// ======================开始调用=============================
// var vConsole = new VConsole()
// let ttsRecorder = new TTSRecorder()
// ttsRecorder.onWillStatusChange = function(oldStatus, status) {
// // 可以在这里进行页面中一些交互逻辑处理:按钮交互等
// // 按钮中的文字
// let btnState = {
// init: '立即合成',
// ttsing: '正在合成',
// play: '停止播放',
// endPlay: '重新播放',
// errorTTS: '合成失败',
// }
// $('.audio-ctrl-btn')
// .removeClass(oldStatus)
// .addClass(status)
// .text(btnState[status])
// }
// $('.audio-ctrl-btn').click(function() {
// if (['init', 'endPlay', 'errorTTS'].indexOf(ttsRecorder.status) > -1) {
// ttsRecorder.start()
// } else {
// ttsRecorder.stop()
// }
// })
// $('#input_text').change(function(){
// ttsRecorder.setParams({
// text: this.value
// })
// })

53
src/assets/js/speechSynthesis/transcode.worker.js

@ -0,0 +1,53 @@
/*
* @Autor: lycheng
* @Date: 2020-01-13 16:12:22
*/
(function(){
let minSampleRate = 22050
self.onmessage = function(e) {
transcode.transToAudioData(e.data)
}
var transcode = {
transToAudioData: function(audioDataStr, fromRate = 16000, toRate = 22505) {
let outputS16 = transcode.base64ToS16(audioDataStr)
let output = transcode.transS16ToF32(outputS16)
output = transcode.transSamplingRate(output, fromRate, toRate)
output = Array.from(output)
self.postMessage({
data: output,
rawAudioData: Array.from(outputS16)
})
},
transSamplingRate: function(data, fromRate = 44100, toRate = 16000) {
var fitCount = Math.round(data.length * (toRate / fromRate))
var newData = new Float32Array(fitCount)
var springFactor = (data.length - 1) / (fitCount - 1)
newData[0] = data[0]
for (let i = 1; i < fitCount - 1; i++) {
var tmp = i * springFactor
var before = Math.floor(tmp).toFixed()
var after = Math.ceil(tmp).toFixed()
var atPoint = tmp - before
newData[i] = data[before] + (data[after] - data[before]) * atPoint
}
newData[fitCount - 1] = data[data.length - 1]
return newData
},
transS16ToF32: function(input) {
var tmpData = []
for (let i = 0; i < input.length; i++) {
var d = input[i] < 0 ? input[i] / 0x8000 : input[i] / 0x7fff
tmpData.push(d)
}
return new Float32Array(tmpData)
},
base64ToS16: function(base64AudioData) {
base64AudioData = atob(base64AudioData)
const outputArray = new Uint8Array(base64AudioData.length)
for (let i = 0; i < base64AudioData.length; ++i) {
outputArray[i] = base64AudioData.charCodeAt(i)
}
return new Int16Array(new DataView(outputArray.buffer).buffer)
},
}
})()

501
src/assets/js/stomp.js

@ -0,0 +1,501 @@
// Generated by CoffeeScript 1.7.1
/*
Stomp Over WebSocket http://www.jmesnil.net/stomp-websocket/doc/ | Apache License V2.0
Copyright (C) 2010-2013 [Jeff Mesnil](http://jmesnil.net/)
Copyright (C) 2012 [FuseSource, Inc.](http://fusesource.com)
*/
(function() {
var Byte, Client, Frame, Stomp,
__hasProp = {}.hasOwnProperty,
__slice = [].slice;
Byte = {
LF: '\x0A',
NULL: '\x00'
};
Frame = (function() {
var unmarshallSingle;
function Frame(command, headers, body) {
this.command = command;
this.headers = headers != null ? headers : {};
this.body = body != null ? body : '';
}
Frame.prototype.toString = function() {
var lines, name, skipContentLength, value, _ref;
lines = [this.command];
skipContentLength = this.headers['content-length'] === false ? true : false;
if (skipContentLength) {
delete this.headers['content-length'];
}
_ref = this.headers;
for (name in _ref) {
if (!__hasProp.call(_ref, name)) continue;
value = _ref[name];
lines.push("" + name + ":" + value);
}
if (this.body && !skipContentLength) {
lines.push("content-length:" + (Frame.sizeOfUTF8(this.body)));
}
lines.push(Byte.LF + this.body);
return lines.join(Byte.LF);
};
Frame.sizeOfUTF8 = function(s) {
if (s) {
return encodeURI(s).match(/%..|./g).length;
} else {
return 0;
}
};
unmarshallSingle = function(data) {
var body, chr, command, divider, headerLines, headers, i, idx, len, line, start, trim, _i, _j, _len, _ref, _ref1;
divider = data.search(RegExp("" + Byte.LF + Byte.LF));
headerLines = data.substring(0, divider).split(Byte.LF);
command = headerLines.shift();
headers = {};
trim = function(str) {
return str.replace(/^\s+|\s+$/g, '');
};
_ref = headerLines.reverse();
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
line = _ref[_i];
idx = line.indexOf(':');
headers[trim(line.substring(0, idx))] = trim(line.substring(idx + 1));
}
body = '';
start = divider + 2;
if (headers['content-length']) {
len = parseInt(headers['content-length']);
body = ('' + data).substring(start, start + len);
} else {
chr = null;
for (i = _j = start, _ref1 = data.length; start <= _ref1 ? _j < _ref1 : _j > _ref1; i = start <= _ref1 ? ++_j : --_j) {
chr = data.charAt(i);
if (chr === Byte.NULL) {
break;
}
body += chr;
}
}
return new Frame(command, headers, body);
};
Frame.unmarshall = function(datas) {
var frame, frames, last_frame, r;
frames = datas.split(RegExp("" + Byte.NULL + Byte.LF + "*"));
r = {
frames: [],
partial: ''
};
r.frames = (function() {
var _i, _len, _ref, _results;
_ref = frames.slice(0, -1);
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
frame = _ref[_i];
_results.push(unmarshallSingle(frame));
}
return _results;
})();
last_frame = frames.slice(-1)[0];
if (last_frame === Byte.LF || (last_frame.search(RegExp("" + Byte.NULL + Byte.LF + "*$"))) !== -1) {
r.frames.push(unmarshallSingle(last_frame));
} else {
r.partial = last_frame;
}
return r;
};
Frame.marshall = function(command, headers, body) {
var frame;
frame = new Frame(command, headers, body);
return frame.toString() + Byte.NULL;
};
return Frame;
})();
Client = (function() {
var now;
function Client(ws) {
this.ws = ws;
this.ws.binaryType = "arraybuffer";
this.counter = 0;
this.connected = false;
this.heartbeat = {
outgoing: 10000,
incoming: 10000
};
this.maxWebSocketFrameSize = 16 * 1024;
this.subscriptions = {};
this.partialData = '';
}
Client.prototype.debug = function(message) {
var _ref;
return typeof window !== "undefined" && window !== null ? (_ref = window.console) != null ? _ref.log(message) : void 0 : void 0;
};
now = function() {
if (Date.now) {
return Date.now();
} else {
return new Date().valueOf;
}
};
Client.prototype._transmit = function(command, headers, body) {
var out;
out = Frame.marshall(command, headers, body);
if (typeof this.debug === "function") {
this.debug(">>> " + out);
}
while (true) {
if (out.length > this.maxWebSocketFrameSize) {
this.ws.send(out.substring(0, this.maxWebSocketFrameSize));
out = out.substring(this.maxWebSocketFrameSize);
if (typeof this.debug === "function") {
this.debug("remaining = " + out.length);
}
} else {
return this.ws.send(out);
}
}
};
Client.prototype._setupHeartbeat = function(headers) {
var serverIncoming, serverOutgoing, ttl, v, _ref, _ref1;
if ((_ref = headers.version) !== Stomp.VERSIONS.V1_1 && _ref !== Stomp.VERSIONS.V1_2) {
return;
}
_ref1 = (function() {
var _i, _len, _ref1, _results;
_ref1 = headers['heart-beat'].split(",");
_results = [];
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
v = _ref1[_i];
_results.push(parseInt(v));
}
return _results;
})(), serverOutgoing = _ref1[0], serverIncoming = _ref1[1];
if (!(this.heartbeat.outgoing === 0 || serverIncoming === 0)) {
ttl = Math.max(this.heartbeat.outgoing, serverIncoming);
if (typeof this.debug === "function") {
this.debug("send PING every " + ttl + "ms");
}
this.pinger = Stomp.setInterval(ttl, (function(_this) {
return function() {
_this.ws.send(Byte.LF);
return typeof _this.debug === "function" ? _this.debug(">>> PING") : void 0;
};
})(this));
}
if (!(this.heartbeat.incoming === 0 || serverOutgoing === 0)) {
ttl = Math.max(this.heartbeat.incoming, serverOutgoing);
if (typeof this.debug === "function") {
this.debug("check PONG every " + ttl + "ms");
}
return this.ponger = Stomp.setInterval(ttl, (function(_this) {
return function() {
var delta;
delta = now() - _this.serverActivity;
if (delta > ttl * 2) {
if (typeof _this.debug === "function") {
_this.debug("did not receive server activity for the last " + delta + "ms");
}
return _this.ws.close();
}
};
})(this));
}
};
Client.prototype._parseConnect = function() {
var args, connectCallback, errorCallback, headers;
args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
headers = {};
switch (args.length) {
case 2:
headers = args[0], connectCallback = args[1];
break;
case 3:
if (args[1] instanceof Function) {
headers = args[0], connectCallback = args[1], errorCallback = args[2];
} else {
headers.login = args[0], headers.passcode = args[1], connectCallback = args[2];
}
break;
case 4:
headers.login = args[0], headers.passcode = args[1], connectCallback = args[2], errorCallback = args[3];
break;
default:
headers.login = args[0], headers.passcode = args[1], connectCallback = args[2], errorCallback = args[3], headers.host = args[4];
}
return [headers, connectCallback, errorCallback];
};
Client.prototype.connect = function() {
var args, errorCallback, headers, out;
args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
out = this._parseConnect.apply(this, args);
headers = out[0], this.connectCallback = out[1], errorCallback = out[2];
if (typeof this.debug === "function") {
this.debug("Opening Web Socket...");
}
this.ws.onmessage = (function(_this) {
return function(evt) {
var arr, c, client, data, frame, messageID, onreceive, subscription, unmarshalledData, _i, _len, _ref, _results;
data = typeof ArrayBuffer !== 'undefined' && evt.data instanceof ArrayBuffer ? (arr = new Uint8Array(evt.data), typeof _this.debug === "function" ? _this.debug("--- got data length: " + arr.length) : void 0, ((function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = arr.length; _i < _len; _i++) {
c = arr[_i];
_results.push(String.fromCharCode(c));
}
return _results;
})()).join('')) : evt.data;
_this.serverActivity = now();
if (data === Byte.LF) {
if (typeof _this.debug === "function") {
_this.debug("<<< PONG");
}
return;
}
if (typeof _this.debug === "function") {
_this.debug("<<< " + data);
}
unmarshalledData = Frame.unmarshall(_this.partialData + data);
_this.partialData = unmarshalledData.partial;
_ref = unmarshalledData.frames;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
frame = _ref[_i];
switch (frame.command) {
case "CONNECTED":
if (typeof _this.debug === "function") {
_this.debug("connected to server " + frame.headers.server);
}
_this.connected = true;
_this._setupHeartbeat(frame.headers);
_results.push(typeof _this.connectCallback === "function" ? _this.connectCallback(frame) : void 0);
break;
case "MESSAGE":
subscription = frame.headers.subscription;
onreceive = _this.subscriptions[subscription] || _this.onreceive;
if (onreceive) {
client = _this;
messageID = frame.headers["message-id"];
frame.ack = function(headers) {
if (headers == null) {
headers = {};
}
return client.ack(messageID, subscription, headers);
};
frame.nack = function(headers) {
if (headers == null) {
headers = {};
}
return client.nack(messageID, subscription, headers);
};
_results.push(onreceive(frame));
} else {
_results.push(typeof _this.debug === "function" ? _this.debug("Unhandled received MESSAGE: " + frame) : void 0);
}
break;
case "RECEIPT":
_results.push(typeof _this.onreceipt === "function" ? _this.onreceipt(frame) : void 0);
break;
case "ERROR":
_results.push(typeof errorCallback === "function" ? errorCallback(frame) : void 0);
break;
default:
_results.push(typeof _this.debug === "function" ? _this.debug("Unhandled frame: " + frame) : void 0);
}
}
return _results;
};
})(this);
this.ws.onclose = (function(_this) {
return function() {
var msg;
msg = "Whoops! Lost connection to " + _this.ws.url;
if (typeof _this.debug === "function") {
_this.debug(msg);
}
_this._cleanUp();
return typeof errorCallback === "function" ? errorCallback(msg) : void 0;
};
})(this);
return this.ws.onopen = (function(_this) {
return function() {
if (typeof _this.debug === "function") {
_this.debug('Web Socket Opened...');
}
headers["accept-version"] = Stomp.VERSIONS.supportedVersions();
headers["heart-beat"] = [_this.heartbeat.outgoing, _this.heartbeat.incoming].join(',');
return _this._transmit("CONNECT", headers);
};
})(this);
};
Client.prototype.disconnect = function(disconnectCallback, headers) {
if (headers == null) {
headers = {};
}
this._transmit("DISCONNECT", headers);
this.ws.onclose = null;
this.ws.close();
this._cleanUp();
return typeof disconnectCallback === "function" ? disconnectCallback() : void 0;
};
Client.prototype._cleanUp = function() {
this.connected = false;
if (this.pinger) {
Stomp.clearInterval(this.pinger);
}
if (this.ponger) {
return Stomp.clearInterval(this.ponger);
}
};
Client.prototype.send = function(destination, headers, body) {
if (headers == null) {
headers = {};
}
if (body == null) {
body = '';
}
headers.destination = destination;
return this._transmit("SEND", headers, body);
};
Client.prototype.subscribe = function(destination, callback, headers) {
var client;
if (headers == null) {
headers = {};
}
if (!headers.id) {
headers.id = "sub-" + this.counter++;
}
headers.destination = destination;
this.subscriptions[headers.id] = callback;
this._transmit("SUBSCRIBE", headers);
client = this;
return {
id: headers.id,
unsubscribe: function() {
return client.unsubscribe(headers.id);
}
};
};
Client.prototype.unsubscribe = function(id) {
delete this.subscriptions[id];
return this._transmit("UNSUBSCRIBE", {
id: id
});
};
Client.prototype.begin = function(transaction) {
var client, txid;
txid = transaction || "tx-" + this.counter++;
this._transmit("BEGIN", {
transaction: txid
});
client = this;
return {
id: txid,
commit: function() {
return client.commit(txid);
},
abort: function() {
return client.abort(txid);
}
};
};
Client.prototype.commit = function(transaction) {
return this._transmit("COMMIT", {
transaction: transaction
});
};
Client.prototype.abort = function(transaction) {
return this._transmit("ABORT", {
transaction: transaction
});
};
Client.prototype.ack = function(messageID, subscription, headers) {
if (headers == null) {
headers = {};
}
headers["message-id"] = messageID;
headers.subscription = subscription;
return this._transmit("ACK", headers);
};
Client.prototype.nack = function(messageID, subscription, headers) {
if (headers == null) {
headers = {};
}
headers["message-id"] = messageID;
headers.subscription = subscription;
return this._transmit("NACK", headers);
};
return Client;
})();
Stomp = {
VERSIONS: {
V1_0: '1.0',
V1_1: '1.1',
V1_2: '1.2',
supportedVersions: function() {
return '1.1,1.0';
}
},
client: function(url, protocols) {
var klass, ws;
if (protocols == null) {
protocols = ['v10.stomp', 'v11.stomp'];
}
klass = Stomp.WebSocketClass || WebSocket;
ws = new klass(url, protocols);
return new Client(ws);
},
over: function(ws) {
return new Client(ws);
},
Frame: Frame
};
if (typeof exports !== "undefined" && exports !== null) {
exports.Stomp = Stomp;
}
if (typeof window !== "undefined" && window !== null) {
Stomp.setInterval = function(interval, f) {
return window.setInterval(f, interval);
};
Stomp.clearInterval = function(id) {
return window.clearInterval(id);
};
window.Stomp = Stomp;
} else if (!exports) {
self.Stomp = Stomp;
}
}).call(this);

28
src/assets/scss/reset.scss

@ -0,0 +1,28 @@
body,div,p,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,a,input,button,textarea,select{
margin: 0;
padding: 0;
outline: none;
}
html,body{
font-family:Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
color: #333333;
background-color: #ffffff;
font-size: .4rem;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
input{
font: normal;
}
input:focus,a:focus{
outline: none;
}
html,
body {
height: 100%;
}

35
src/commonJS/common.js

@ -0,0 +1,35 @@
// 获取年月日等日期时间
function getDate() {
let myDate = new Date();
let month = myDate.getMonth() + 1;
let day = myDate.getDate();
return {myDate, month, day}
}
//通过身份证号计算年龄、性别、出生日期
export const idCard = (userCard, num) => {
let birth
//获取出生日期
if (num == 1) {
birth = userCard.substring(6, 10) + "-" + userCard.substring(10, 12) + "-" + userCard.substring(12, 14);
return birth;
}
//获取性别
if (num == 2) {
if (parseInt(userCard.substr(16, 1)) % 2 == 1) {
return "男";
} else {
return "女";
}
}
//获取年龄
if (num == 3) {
let {myDate, month, day} = getDate()
let age = myDate.getFullYear() - userCard.substring(6, 10) - 1;
if (userCard.substring(10, 12) < month || userCard.substring(10, 12) == month && userCard.substring(12, 14) <= day) {
age++;
}
return age;
}
}

57
src/components/HelloWorld.vue

@ -0,0 +1,57 @@
<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>
</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>

125
src/components/Message.vue

@ -0,0 +1,125 @@
<template>
<div class="pop" v-show="showModal">
<div class="pop-mian">
<div class="pop-tit">{{title}}</div>
<div class="pop-con1">
<h3>{{subTitle}}</h3>
<p>{{message}}</p>
<p v-if="message1!==''">{{message1}}</p>
<p v-if="message2!==''">{{message2}}</p>
</div>
<div class="pop-btn">
<div class="btn-color" v-if="btnType==1" @click="$emit('cancel')">{{sureText}}</div>
<div class="btn-color" v-if="btnType==2" @click="$emit('submit')">{{sureText}}</div>
</div>
<div class="pop-close" @click="$emit('cancel')"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted(){
},
props: {
showModal: Boolean,
sureText: {
type: String,
default: "我知道了"
},
title:String,
subTitle:String,
message:String,
btnType:String,
message1:String,
message2:String
},
};
</script>
<style lang="scss" scoped>
.pop {
z-index: 999;
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
.pop-mian {
width: 5.7rem;
background: #ce0404;
border-radius: 0.4rem;
padding: 0.3rem 0.2rem;
box-sizing: border-box;
text-align: center;
margin: 0 auto;
position: relative;
.pop-close {
width: 0.3rem;
height: 0.3rem;
background: url("https://v.ringbox.cn/douyin/img/close.png") no-repeat
center;
background-size: 100% 100%;
position: absolute;
top: 0.2rem;
right: 0.2rem;
}
.pop-btn {
height: 0.8rem;
.btn-color {
width: 4.4rem;
height: 0.8rem;
font-size: 0.3rem;
color: #ffffff;
line-height: 0.8rem;
background: linear-gradient(
0deg,
#dba81a 0%,
#ffc107 100%
);
border-radius: 0.4rem;
margin: 0 auto;
margin-bottom: 0.3rem;
}
}
.pop-tit {
position: relative;
height: 0.4rem;
line-height: 0.4rem;
font-size: 0.33rem;
color: #fafafa;
font-weight: 600;
}
.pop-con {
padding-top: 2.41rem;
background: url("https://vediocnd.corpring.com/%E5%8F%8C%E5%8D%81%E4%BA%8C%E9%87%91%E5%B8%81%E7%BA%A2%E5%8C%85%E8%B4%AD%E7%89%A9%E8%A3%85%E9%A5%B0%E7%9F%A2%E9%87%8F.png")
no-repeat center 0.2rem;
background-size: 2.5rem 2rem;
font-size: 0.26rem;
color: #fff;
line-height: 1.5;
text-align: center;
padding-bottom: 0.3rem;
h3 {
line-height: 2.5;
}
}
.pop-con1 {
font-size: 0.26rem;
color: #fff;
line-height: 1.5;
text-align: center;
padding-bottom: 0.3rem;
margin-top: 0.2rem;
h3 {
line-height: 2.5;
}
}
}
}
</style>

95
src/components/dialog-common/dialog.vue

@ -0,0 +1,95 @@
<template>
<div class="dialog-box">
<div class="dialog-bgi">
<div class="input-box1">
<div class="btn1">تەستىق نۇمۇرغا ئىرىشىش</div>
<input type="text" placeholder="تەستىق نۇمۇرىنى كىرگۈزۈڭ">
</div>
<div class="transact"></div>
<div class="toolTips">
<span>此页面可持续数秒请耐心等待切勿刷新或关闭</span>
</div>
</div>
<div class="dialog-close" @click="closeVan"></div>
</div>
</template>
<script>
export default {
name: "dialog"
}
</script>
<style lang="scss" scoped>
.dialog-box{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
padding-top: 2rem;
box-sizing: border-box;
position: fixed;
top: 0;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
//justify-content: center;
.dialog-bgi{
width: 80%;
height: 7rem;
position: relative;
background: url("https://vediocnd.corpring.com/dialog-bgi.png") no-repeat center;
background-size: 100% 100%;
.input-box1{
width: 83%;
display: flex;
align-items: center;
position: absolute;
top: 2.765rem;
left: .51rem;
//background-color: yellow;
.btn1{
width: 33%;
font-size: .05rem;
//background-color: green;
}
input{
width: 67%;
height: .8rem;
border-radius: 0 .2rem .2rem 0;
border: none;
text-align: right;
padding-right: .2rem;
//background-color: red;
}
}
.transact{
width: 70%;
height: 1rem;
position: absolute;
top: 4.18rem;
left: 15%;
background: url("https://vediocnd.corpring.com/transact-btn.png") no-repeat center;
background-size: 100% 100%;
}
.toolTips{
position: absolute;
top: 6rem;
left: .28rem;
font-size: .26rem;
color: #fff;
}
}
.dialog-close{
width: 0.7rem;
height: 0.7rem;
margin-top: 2rem;
background: url("../../assets/close.png") no-repeat center;
background-size: 100% 100%;
}
}
</style>

209
src/components/dialog-common/modal.vue

@ -0,0 +1,209 @@
<template>
<div v-if="showModal" class="modal-contents">
<div :style="{background: `url(${backgroundImg}) no-repeat #fff`,backgroundSize: '100% 50%'}" class="content-box">
<div class="close-icon" @click="cancel"></div>
<div class="input-box">
<input
v-model="phoneCode"
:maxlength="codeLength"
onKeypress="javascript:if(event.keyCode == 32)event.returnValue =false;"
placeholder="请输入验证码"
v-on:input="inputCode"
/>
<div class="count-box">
<a v-if="ifCodeAgain" class="btn-get_code" @click="newCode"
>获取验证码</a
>
<a v-else class="btn-get_code">已发送({{ counter }}S)</a>
</div>
</div>
<div class="footer">
<div class="order-btn" @click="ToCollect">
立即办理
</div>
<b class="reminder">请耐心等待验证码切勿刷新或关闭</b
>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
props: {
showModal: {
type: Boolean,
default: false
},
codeLength: {
type: Number,
default: 4
},
count: {
type: Number,
default: 60
},
backgroundImg: {
type: String,
default: 'https://vediocnd.corpring.com/xxlTwoWindowSc3g5g.png'
},
},
data() {
return {
ifCodeAgain: true, //
counter: null, //
phoneCode: null, //
timer: null, //
};
},
watch: {
//
count: {
handler(newVal, oldVal) {
this.counter = newVal
},
immediate: true
},
},
computed: {},
methods: {
// input
inputCode() {
if (this.codeLength == this.phoneCode.length) {
this.$emit('inputCode', this.phoneCode,'MODAL')
this.cancel()
}
},
//
newCode() {
if (this.ifCodeAgain) {
this.ifCodeAgain = false
this.counterDown()
this.$emit('newCode')
}
},
//
cancel() {
Object.assign(this.$data, this.$options.data())
this.$emit('cancel')
},
//
ToCollect() {
this.$emit('ToCollect')
this.cancel()
},
//
counterDown() {
if (!this.ifCodeAgain) {
this.timer = setInterval(() => {
if (this.counter <= 0) {
clearInterval(this.timer)
this.ifCodeAgain = true
this.counter = this.count
return
}
this.counter--
}, 1000)
}
}
},
created() {
},
mounted() {
},
};
</script>
<style lang="scss" scoped>
.modal-contents {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
z-index: 150;
.content-box {
width: 75%;
height: 6.6rem;
border-radius: .15rem .45rem .2rem .2rem;
position: relative;
padding-top: 3.5rem;
box-sizing: border-box;
.close-icon {
width: .5rem;
height: .5rem;
background: url("https://vediocnd.corpring.com/wClose.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: .08rem;
right: .08rem;
}
.input-box {
width: 85%;
margin: 0 auto;
display: flex;
background-color: rgb(100, 86, 252);
border-radius: .25rem;
position: relative;
input {
width: 100%;
height: 1rem;
border-radius: .25rem;
border: none;
padding-left: .5rem;
box-sizing: border-box;
background-color: rgb(100, 86, 252);
&::placeholder {
color: #fff;
font-size: .3rem;
}
}
.count-box {
color: #fff;
line-height: 1rem;
font-size: .3rem;
position: absolute;
right: .1rem;
}
}
.footer {
display: flex;
flex-direction: column;
align-items: center;
.order-btn {
margin-top: .5rem;
background-color: rgb(76, 105, 252);
width: 65%;
height: .6rem;
border-radius: .5rem;
color: #fff;
text-align: center;
font-size: .38rem;
line-height: .6rem;
font-weight: bold;
//background: url("https://vediocnd.corpring.com/threePayClick.png");
}
.reminder {
margin-top: .4rem;
color: rgb(0, 0, 0);
font-size: 0.23rem;
font-weight: normal;
}
}
}
}
</style>

95
src/components/tabNew.vue

@ -0,0 +1,95 @@
<template>
<div class="navbar-list">
<ul class="flex-imd">
<li v-for="(item,index) in list"
:key="index"
class="navbar-item"
:class="activeIndex===index?'act':''"
@click="chooseNav(item,index)"
:data-navid='item.name'
>
{{item.name}}
</li>
</ul>
</div>
</template>
<script>
export default {
props:{
list:{
type:Array,
default(){
return []
}
},
activeIndex:{
type:Number,
default:0,
}
},
data () {
return {
// activeIndex:0,
}
},
methods: {
chooseNav (item,index) {
// console.log(e.target.dataset.navid)
// this.currNavbar = Number(item.name)
// this.activeIndex = index;
this.$emit('tab',{
data:item,
index:index
})
}
}
}
</script>
<style>
.navbar-list{
width: 100%;
height: 0.6rem;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
background: #8020fe;
color: #fff;
font-size: 0.34rem;
border-radius: 0.1rem;
margin-bottom: 0.3rem;
padding: 0.08rem 0;
}
.navbar-list>ul{
/* padding: 0 20px; */
position: absolute;
height: 0.6rem;
left: 0;
display: flex;
flex-flow: row nowrap;
}
.navbar-item{
/* width: 120px; */
width: 1.6rem;
padding: 0px 18px;
box-sizing: border-box;
height: 0.6rem;
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-items: center;
cursor: pointer;
/* margin-right: 10px; */
}
.navbar-list::-webkit-scrollbar {
display: none;
}
.navbar-item.act{
/* background-image: -webkit-linear-gradient(left, #ff512f, #dd2476);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
font-weight: bold;
color: #fe3d54;
}
</style>

69
src/main.js

@ -0,0 +1,69 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Api from './api/index'
import VueAxios from 'vue-axios'
import axios from 'axios'
import VueCookie from 'vue-cookie'
import VueLazyload from 'vue-lazyload'
import Mint from 'mint-ui';
import md5 from 'js-md5'
import 'mint-ui/lib/style.css';
import scroll from 'vue-seamless-scroll'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import '../node_modules/swiper/swiper-bundle.css'
import VueLuckyCanvas from '@lucky-canvas/vue'
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);
Vue.use(VueLuckyCanvas)
Vue.use(VueAwesomeSwiper)
Vue.use(VueAxios, axios);
Vue.use(Api);
Vue.use(VueCookie)
Vue.use(VueLazyload)
Vue.use(Mint);
Vue.use(scroll)
Vue.prototype.$md5 = md5;
Vue.config.productionTip = false
// Vue.use(VueLazyload, {
// loading: 'dist/loading.gif',
// })
//引入外部js文件
Vue.component('remote-script', {
render: function (createElement) {
var self = this;
return createElement('script', {
attrs: {
type: 'text/javascript',
src: this.src
},
on: {
load: function (event) {
self.$emit('load', event);
},
error: function (event) {
self.$emit('error', event);
},
readystatechange: function (event) {
if (this.readyState == 'complete') {
self.$emit('load', event);
}
}
}
});
},
props: {
src: {
type: String,
required: true
}
}
});
new Vue({
router,
render: h => h(App)
}).$mount('#app')

37
src/router/index.js

@ -0,0 +1,37 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/vip',
name: 'vip',
component: () => import('../views/hotVIPPages/vip.vue')
},
{
path: '/recieveVIP',
name: 'recieveVIP',
component: () => import('../views/hotVIPPages/recieveVIP.vue')
},
{
path: '/hotVIPpayback',
name: 'hotVIPpayback',
component: () => import('../views/hotVIPPages/hotVIPpayback.vue')
},
{
path: '/privacy',
name: 'privacy',
component: () => import('../views/hotVIPPages/privacy.vue')
},
]
const router = new VueRouter({
routes
})
export default router

88
src/util/index.js

@ -0,0 +1,88 @@
//身份证校验函数
function IdCardValidate(idCard) {
idCard = idCard.replace(/\s+/g, ""); //去掉字符串头尾空格
if (idCard.length == 15) {
return isValidityBrithBy15IdCard(idCard); //进行15位身份证的验证
} else if (idCard.length == 18) {
var a_idCard = idCard.split(""); // 得到身份证数组
if (isValidityBrithBy18IdCard(idCard) && isTrueValidateCodeBy18IdCard(a_idCard)) { //进行18位身份证的基本验证和第18位的验证
return true;
} else {
return false;
}
} else {
return false;
}
}
/**
* 判断身份证号码为18位时最后的验证位是否正确
* @param a_idCard 身份证号码数组
* @return
*/
function isTrueValidateCodeBy18IdCard(a_idCard) {
var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1]; // 加权因子
var ValideCode = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2]; // 身份证验证位值.10代表X
var sum = 0; // 声明加权求和变量
if (a_idCard[17].toLowerCase() == 'x') {
a_idCard[17] = 10; // 将最后位为x的验证码替换为10方便后续操作
}
for (var i = 0; i < 17; i++) {
sum += Wi[i] * a_idCard[i]; // 加权求和
}
valCodePosition = sum % 11; // 得到验证码所位置
if (a_idCard[17] == ValideCode[valCodePosition]) {
return true;
} else {
return false;
}
}
/**
* 验证18位数身份证号码中的生日是否是有效生日
* @param idCard 18位书身份证字符串
* @return
*/
function isValidityBrithBy18IdCard(idCard18) {
var year = idCard18.substring(6, 10);
var month = idCard18.substring(10, 12);
var day = idCard18.substring(12, 14);
var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
// 这里用getFullYear()获取年份,避免千年虫问题
if (temp_date.getFullYear() != parseFloat(year)
|| temp_date.getMonth() != parseFloat(month) - 1
|| temp_date.getDate() != parseFloat(day)) {
return false;
} else {
return true;
}
}
/**
* 验证15位数身份证号码中的生日是否是有效生日
* @param idCard15 15位书身份证字符串
* @return
*/
function isValidityBrithBy15IdCard(idCard15) {
var year = idCard15.substring(6, 8);
var month = idCard15.substring(8, 10);
var day = idCard15.substring(10, 12);
var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
// 对于老身份证中的你年龄则不需考虑千年虫问题而使用getYear()方法
if (temp_date.getYear() != parseFloat(year)
|| temp_date.getMonth() != parseFloat(month) - 1
|| temp_date.getDate() != parseFloat(day)) {
return false;
} else {
return true;
}
}
module.exports = {
IdCardValidate
}

50
src/util/utils.js

@ -0,0 +1,50 @@
/**
* @desc 函数节流
* @param fn 函数
* @param gapTime 延迟执行毫秒数
*/
export function throttle (fn, gapTime) {
if (gapTime === null || gapTime === undefined) {
gapTime = 1500
}
let _lastTime = null
// 返回新的函数
return function () {
let _nowTime = +new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
fn.apply(this, arguments) // 将this和参数传给原函数
_lastTime = _nowTime
}
}
}
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行false 表非立即执行
*/
export function debounce (func, wait, immediate) {
let timeout
return function () {
let context = this
let args = arguments
if (timeout) clearTimeout(timeout)
if (immediate) {
var callNow = !timeout
timeout = setTimeout(() => {
timeout = null
}, wait)
if (callNow) func.apply(context, args)
} else {
timeout = setTimeout(function () {
func.apply(context, args)
}, wait)
}
}
}

204
src/views/hotVIPPages/hotVIPpayback.vue

@ -0,0 +1,204 @@
<template>
<div class="hotVip-payback-wrap">
<!-- 头图 -->
<div class="top-img"></div>
<div class="right-box">
<div class="title">会员领取方式</div>
<div class="tips">微信搜索 次元意境 公众号<br/>点击会员福利 - 会员月月领进行兑换</div>
<img class="icon" src="https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230804183929.jpg" alt="">
</div>
</div>
</template>
<script>
export default {
data() {
return{
mobile: '',
}
},
created(){
document.documentElement.scrollTop = 0;
document.title = "开通成功";
},
mounted() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.hotVip-payback-wrap {
width: 100%;
min-height: 100%;
height: auto;
position: absolute;
background-color: #e53c51;
// padding: 2rem;
// box-sizing: border-box;
padding-bottom: 1rem;
display: flex;
flex-direction: column;
align-items: center;
// justify-content: center;
overflow-x: hidden;
overflow-y: scroll;
.top-img {
background-image: url('https://img.bnyer.cn/vip/pay-top-img.png');
background-size: 100% 100%;
width: 100%;
// height: 360px;
height: 6.8rem;
margin-bottom: -0.7em;
}
.right-box {
width: 87%;
left: 0rem;
right: 0rem;
position: relative;
margin-top: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
box-sizing: border-box;
padding:20px 0px;
border-radius: 10px;
text-align: center;
.icon {
margin-top: 15px;
width: 4rem;
height: 4rem;
// background-color: #c63243;
}
.title {
color: #c63243;
font-size: 0.3rem;
font-weight: 600;
}
.right-item-box {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 15px;
box-sizing: border-box;
padding: 0px 5px;
.right-item {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
}
.sub-title {
font-size: 0.28rem;
font-weight: 600;
margin-bottom: 3px;
// color: #c63243;
}
.tips {
text-align: center;
white-space: nowrap;
margin-top: 10px;
font-size: 0.22rem;
}
.goAI {
font-weight: 600;
color: #ff0000;
margin-top: 10px;
text-decoration-line: underline;
font-size: 0.24rem;
}
}
.scroll-box {
width: 87%;
height: 7rem;
left: 0rem;
right: 0rem;
position: relative;
margin-top: 0.5rem;
// display: flex;
// flex-direction: column;
// align-items: center;
background-color: #fff;
box-sizing: border-box;
padding:15px;
border-radius: 10px;
.title {
color: #c63243;
font-size: 0.32rem;
font-weight: 600;
text-align: center;
margin-bottom: 15px;
}
.comment-box {
width: 100%;
height: 5.7rem;
// position: relative;
// overflow:hidden;
.comment-item {
width: 100%;
// height: 1.5rem;
height: 200px;
// position: relative;
box-sizing: border-box;
padding:10px 10px 10px 70px;
background-color: #fef9e5;
border-radius: 10px;
margin-bottom: 10px;
.user-head {
left: 25px;
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #c63243;
// display: inline-block;
}
.user-name {
font-size: 0.3rem;
color: #c63243;
font-weight: 600;
// margin-bottom: 8px;
}
.comment {
font-size: 0.26rem;
}
}
}
}
}
</style>

60
src/views/hotVIPPages/privacy.vue

@ -0,0 +1,60 @@
<template>
<div class="privacy-wrap">
<h3>个人信息授权与保护声明</h3>
<br>
<p>尊敬的用户及其关联公司(以下简称我们)将按照本声明及隐私权保护政策的规定收集保存使用储存分享披露及保护您的个人信息因此请您务必认真完整阅读并理解本声明尤其是黑体加粗的部分如果您不同意本声明请勿进行下一步操作</p>
</br><p>
</br> 我们收集和使用您的个人信息类型和目的</br></br>
1为给您提供完善的服务需要您向我们提供一些信息我们收集您的个人信息的最终目的是为了向您提供更好的产品服务优化并丰富您的用户体验这些个人信息系能够单独或者与其他信息结合识别您的个人身份的信息包括但不限于
</br>1姓名</br>
2手机号码</br>
3 您在服务提供方所建落地页面输入或上载的其他个人信息</br>
</br>2您授权我们将上述信息共享给您在浏览界面所看到的特定行业对应的服务提供方之后您会收到来自该服务提供方的电话或短信以向您提供相关服务的邀请或需求沟通包含但不限于
</br>1汽车行业服务提供方邀请您试驾 4s 店看车参与车友会活动</br>
2教育行业服务提供方邀请您试听课程沟通课程需求;</br>
3旅游行业服务提供方与您预约沟通自由行需求或沟通定制游需求;</br>
4家装行业服务提供方与您预约上门测量预约设计师沟通装修需求;</br>
5其他需要联系您以便您接受线下服务实地体验的场景</br>
</br>3当您使用在线通话服务时为了保证服务方的服务质量您的通话可能会被录音如您对此有所异议请您不要点击电话按钮
</br></br>4以上个人信息均是您自愿提供如果您拒绝同意提供的将无法使用该产品功能但不会影响您正常使用其它功能
</br></br>5对于不满 18 周岁的用户须在其法定监护人已经阅读本政策并且许可的情况下通过网站提交个人信息
</br></br> 我们如何使用及共享您的个人信息</br>
</br>1您同意我们通过如下方式使用及对外共享您个人信息的情况包含对于个人信息的存储和处理
</br>1) 我们在合法正当的范围内使用</br>
2) 我们向您授权的服务提供方分享并由其在合法正当的范围内使用</br>
3) 我们及相关特定行业的服务提供方为满足您的需求可能会通过您提供的信息与您联系</br>
4为了省去您手动输入的操作您用于注册的手机号可能已经展示在信息录入界面但这并不代表第三方已经获取相关信息当且仅当在同意个人信息授权与保护声明的前提下我方获得您授权与第三方分享您的相关信息具体授权信息类型以页面提示为准的许可后我方才会向第三方办法访问您信息的令牌若您拒绝使用预填充功能或者拟撤回使用预填充功能的授权不影响您主动输入相关信息并继续使用第三方的产品/服务
</br>5我们及您授权范围内的服务提供方可能定期或不定期向您发送有关产品服务或相关活动的信息您同意接收上述信息当我们超出与本声明及隐私权保护政策所声称的目的具有直接或合理关联的范围后使用您的个人信息的我们会再次向您告知并征得您的同意您同意免除上述个人信息的接收和/或使用方在按照本声明所述情形下进行信息披露和使用而导致的或可能导致的所有索赔责任和损失
</br></br>2我们已在相应的功能模块明示征得了您的同意我们已经要求其应对您的个人信息进行严格保密要求其按照我们的说明隐私权保护政策以及其他任何相关的保密和安全措施来处理个人信息
</br></br>3在个人信息匿名化或去标识化的前提下本平台有权对您提供的个人信息进行数据分析并对用户数据库加以商业化使用
</br></br> 更正或投诉</br>
</br>如果您需要查询修改或更正撤销授权您的个人信息或对个人信息保护问题有任何疑问或投诉您可以通过以下方式联系我们拨打电话400-8823-016
</br></br> 通知和修订
</br>我们可能适时修改本声明对于重大变更我们会提供更显著的通知您可以选择停止使用提供的产品/服务在该种情况下如您仍然继续使用我们的产品/服务即表示同意接受经修订的本声明及隐私权保护政策的约束
</p>
</div>
</template>
<script>
export default {
created(){
document.documentElement.scrollTop = 0;
document.title = "隐私协议";
},
}
</script>
<style lang="scss" scoped>
.privacy-wrap {
padding: 10px;
font-size: 16px;
}
</style>

461
src/views/hotVIPPages/recieveVIP.vue

@ -0,0 +1,461 @@
<template>
<div class="recieveVip-wrap">
<!-- 权益列表 -->
<div class="vip-box">
<div class="get-title">请选择您要领取的会员月卡</div>
<div class="vip-list">
<div class="vip-item" v-for="(item, index) in vipList" :key="index" @click="selectVip(index)">
<div class="vip-icon" :class="curVipIndex == index? 'active' : ''"
:style=" `background: url(${item.icon}) no-repeat;background-size: 100% 100%;`"></div>
<!-- <div class="vip-name">{{ item.name }}</div> -->
</div>
</div>
</div>
<!-- 手机号输入框 -->
<div class="mid-box" >
<div class="cls_div_phone_input">
<input class="cls_input_phone" v-model="mobile" type="text" maxlength="11" placeholder="请输入您的手机号">
<img class="phone-icon" src="https://img.bnyer.cn/vip/hotAIphone.png" alt="">
</div>
<img class="cls_img_btn" @click="clickMainButton()" src="https://img.bnyer.cn/vip/main-button.png">
</div>
<!-- 资费 -->
<!-- <div class="price">业务资费19.9 / </div> -->
<!-- 规则 -->
<div class="rule-box">
<div class="rule-icon"></div>
<div class="rule-content">
[商品名称] :惠点生活 <br/>
[计费方式] : 支付宝连续包月<br/>
[商品权益说明] :<br/>
用户每月可领取腾讯视频月卡爱奇艺月卡优酷月卡芒果TV月卡哗哩哗哩大会员月卡网易云音乐月卡喜马拉雅会员月卡知乎盐选会员月卡饿了么会员月卡百度网盘会员月卡中的任意一张<br/>
[领取方式]:<br/>
本产品订购生效后用户需要通过关注次元意境微信公众号[会员福利 - 会员月月领] 入口及时领取权益领取成功后1小时到账凭订购手机号登录相应APP即可享受会员权益<br/>
[注意事项]<br/>
1.权益领取成功后当月内不能进行退订更改<br/>
2.订购生效后凭订购手机号可每月领取会员一次不可结转与转赠当月不领取则视为自动放弃当月领取资格<br/>
3.如您在权益充值未到账期间退订产品将会导致权益充值失败<br/>
[退订方式]<br/>
进入支付宝APP---右下方我的---右上方的齿轮进入设置页面---点击支付设置---点击免密支付/自动扣款---选择惠点生活---点击关闭服务即可完成退订<br/>
[联系我们]<br/>
致电客服热线 19983417235客服在线时间9:00-18:00
</div>
</div>
<div class="confirm-wrap" v-if="showPop">
<div class="confirm-box">
<div class="close-button" @click="isShowPop()">×</div>
<div class="confirm-title">确认领取<br/>{{ vipList[curVipIndex].name}}月卡吗<br/><br/>
领取手机号{{ mobile }}</div>
<div class="icon" :style=" `background: url(${vipList[curVipIndex].icon}) no-repeat;background-size: 100% 100%;`"></div>
<div class="confirm-button" @click="receiveRights()">确认</div>
</div>
</div>
</div>
</template>
<script>
import { Indicator, Toast } from "mint-ui";
export default {
data() {
return{
curVipIndex: 0,
mobile: '',
showPop: false,
canClick: true,
vipList: [
{
name: '优酷黄金会员',
icon: 'https://img.bnyer.cn/vip/youku.png',
vipKey: '10000281'
},
{
name: '爱奇艺黄金会员',
icon: 'https://img.bnyer.cn/vip/aiqiyi.png',
vipKey: '10000260'
},
{
name: '腾讯视频VIP会员',
icon: 'https://img.bnyer.cn/vip/tcenttv.png',
vipKey: '10000224'
},
{
name: '芒果TV全屏会员',
icon: 'https://img.bnyer.cn/vip/mangotv.png',
vipKey: '10000271'
},
{
name: '哔哩哔哩大会员',
icon: 'https://img.bnyer.cn/vip/bili.png',
vipKey: '10000257'
},
{
name: '网易云音乐黑胶VIP',
icon: 'https://img.bnyer.cn/vip/wangyiyun.png',
vipKey: '10000298'
},
{
name: '饿了么超级会员',
icon: 'https://img.bnyer.cn/vip/eleme.png',
vipKey: '10000377'
},
{
name: '搜狐视频会员月卡',
icon: 'https://img.bnyer.cn/vip/ximalaya.png',
vipKey: '10000253'
},
{
name: '知乎盐选会员月卡',
icon: 'https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230804224645.png',
vipKey: '10000440'
},
{
name: '百度网盘普通会员',
icon: 'https://img.bnyer.cn/vip/baidu.png',
vipKey: '10000437'
},
]
}
},
created(){
document.documentElement.scrollTop = 0;
document.title = "会员月月领";
},
mounted() {
},
methods: {
selectVip(index) {
this.curVipIndex = index
},
isShowPop() {
this.showPop = !this.showPop
},
clickMainButton() {
if(this.mobile) {
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if (!myreg.test(this.mobile)) {
Toast('请输入正确的手机号~')
return
}
} else {
Toast('请输入手机号~')
return
}
this.isShowPop()
},
//
receiveRights(){
Indicator.open('领取中...')
//
let parms = {
chargeAccountNumber: this.mobile,
skuId: this.vipList[this.curVipIndex].vipKey,
chargeAccountType:10
}
this.axios({
method: "post",
url: `https://interface.bnyer.cn/yunmei/directBuy`,
// url: `http://192.168.2.8:8086/yunmei/directBuy`,
data: parms
}).then((rsp) => {
console.log(rsp);
if(rsp.code == 0) {
if(rsp.res.code == '000000'){
Indicator.close();
this.isShowPop()
this.mobile = ''
this.curVipIndex = 0
Toast({
message: "领取成功,充值过程存在一定延时,请稍后前往对应APP查看~",
})
} else if(rsp.res.code == '10024' || rsp.res.code == '10026'){
Indicator.close();
this.isShowPop()
this.mobile = ''
this.curVipIndex = 0
Toast({
message: "您暂无领取资格",
})
} else if(rsp.res.code == '10025'){
Indicator.close();
this.isShowPop()
this.mobile = ''
this.curVipIndex = 0
Toast({
message: "您当月已领取过权益,请下月再来~",
})
} else {
Indicator.close();
this.isShowPop()
this.mobile = ''
this.curVipIndex = 0
Toast({
message: "网络异常,请稍后再试~",
})
}
}else {
Indicator.close();
this.isShowPop()
this.mobile = ''
this.curVipIndex = 0
Toast({
message: "网络异常,请稍后再试~",
});
}
})
.catch((err)=>{
Indicator.close();
this.isShowPop()
this.mobile = ''
this.curVipIndex = 0
Toast({
message: "系统错误,请联系客服~",
});
})
},
}
}
</script>
<style lang="scss" scoped>
.recieveVip-wrap {
width: 100%;
height: auto;
position: absolute;
background-color: #fb986e;
padding-bottom: 3rem;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
overflow-y: scroll;
background-image: url('https://img.bnyer.cn/vip/get-top-img.png');
background-size: 100% 15rem;
background-repeat: no-repeat;
.fixed {
position: fixed !important;
bottom: 0rem !important;
left: 0;
right: 0;
// z-index: 100;
transform: scale(0.8);
margin-top: 0rem !important;
}
.confirm-wrap {
// z-index: 100;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba($color: #000000, $alpha: 0.7);
}
.confirm-box {
position: absolute;
width: 80%;
height: 7rem;
border: 3px solid #f37151;
background-color: rgb(244, 234, 222);
border-radius: 10px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
.close-button {
font-size: 35px;
position: absolute;
right: 5px;
top: -8px;
color: #a73a1e;
}
.confirm-title {
font-size: 16px;
font-weight: bold;
color: #a73a1e;
text-align: center;
}
.icon {
width: 2rem;
height: 2rem;
// background-color: #fb986e;
border-radius: 8px;
}
.confirm-button {
background: linear-gradient(#fb986e, #d7502f);
width:4rem;
height: 1rem;
border-radius: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
font-size: 20px;
font-weight: bold;
}
}
.vip-box {
margin-top: 3.1rem;
width: 90%;
height: auto;
background-color: antiquewhite;
border-radius: 20px;
padding: 15px;
box-sizing: border-box;
.get-title {
font-size: 16px;
font-weight: bold;
text-align: center;
margin-bottom: 15px;
}
.vip-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// align-items: center;
.active {
border: 5px solid #dc2c00;
}
.vip-item {
width: 18%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
.vip-icon {
// border-radius: 5px;
width: 100%;
height: 1.11rem;
background-color: #fff;
margin-bottom: 4px;
box-sizing: border-box;
}
.vip-name {
width: 100%;
text-align: center;
white-space: wrap;
font-size: 10px;
line-height: 12px;
}
}
}
}
.mid-box {
// z-index: 100;
left: 0rem;
right: 0rem;
position: relative;
margin-top: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
.cls_div_phone_input {
height: 1rem;
width: 7rem;
position: relative;
.phone-icon {
width: 0.6rem;
position: absolute;
top: 0.27rem;
left: 0.8rem;
// z-index: 1;
}
.cls_input_phone {
position: relative;
left: 50%;
transform: translateX(-50%);
height: 1.1rem;
width: 5rem;
border-radius: 50px;
padding-left: 1.5rem;
font-size: 0.4rem;
background-color: white;
border: none;
}
}
.cls_img_btn {
margin-top: 0.4rem;
position: relative;
width: 6rem;
height: 1.6rem;
animation: btnScaleAnim 1s infinite;
@keyframes btnScaleAnim {
0%{
transform: scale(0.9);
}
50% {
transform: scale(0.95);
}
100% {
transform: scale(0.9);
}
}
}
}
.price {
text-align: center;
color: #fff;
font-size: 11px;
}
.rule-box {
margin-top: 0.4rem;
position: relative;
width: 86%;
// height: 12rem;
background-color: #f37151;
border-radius: 10px;
padding: 12px 18px;
box-sizing: border-box;
.rule-icon {
background-image: url('https://img.bnyer.cn/vip/rule-icon.png');
background-size: 100% 100%;
width: 1.7rem;
height: 0.6rem;
}
.rule-content {
margin-top: 10px;
// line-height: 15px;
font-size: 0.22rem;
color: #FFF;
}
}
}
</style>

512
src/views/hotVIPPages/vip.vue

@ -0,0 +1,512 @@
<template>
<div class="hotVipV2-wrap">
<!-- 头图 -->
<div class="top-img"></div>
<div class="scroll-wrap">
<div class="scroll-box" >
<div class="scroll-item" v-for="(item, index) in scrollArr" :key="index">{{item}}</div>
</div>
</div>
<!-- 手机号输入框 -->
<div class="mid-box" >
<div class="cls_div_phone_input">
<input class="cls_input_phone" ref="phoneInput" v-model="mobile" type="tel" maxlength="11" placeholder="请输入手机号码">
</div>
<img class="cls_img_btn" @click="aiThreePay()" src="https://img.bnyer.cn/vip/vip-btn.gif">
<!-- 隐私协议 -->
<div class="privacy-box">
<img v-if="!agreePrivacy" @click="clickAgreePrivacy()" src="https://ydsh0516.cjdsp.com/ydshh5s/static/images-gd/ic-select-not.png" class="selectBox" />
<img v-if="agreePrivacy" @click="clickAgreePrivacy()" src="https://ydsh0516.cjdsp.com/ydshh5s/static/images-gd/ic-select.png" class="selectBox" />
我已阅读并同意下方活动规则
<span class="cls_sp_procotol_2" @click="goLookPrivacy()"> 隐私条款 </span>等协议
</div>
<!-- 资费 -->
<div class="price" style="margin-top:0.05rem;">业务资费19.9/ </div>
<!-- <div class="price"></div> -->
</div>
<!-- 规则 -->
<div class="rule-box">
<div class="rule-icon">活动规则</div>
<div class="rule-content">
[商品名称] :惠点生活 <br/>
[计费方式] : 支付宝连续包月<br/>
[商品权益说明] :<br/>
用户每月可领取腾讯视频月卡爱奇艺月卡优酷月卡芒果TV月卡哗哩哗哩大会员月卡网易云音乐月卡喜马拉雅会员月卡知乎盐选会员月卡饿了么会员月卡百度网盘会员月卡中的任意一张<br/>
[领取方式]:<br/>
本产品订购生效后用户需要通过关注次元意境微信公众号[会员福利 - 会员月月领] 入口及时领取权益领取成功后1小时到账凭订购手机号登录相应APP即可享受会员权益<br/>
[注意事项]<br/>
1.权益领取成功后当月内不能进行退订更改<br/>
2.订购生效后凭订购手机号可每月领取会员一次不可结转与转赠当月不领取则视为自动放弃当月领取资格<br/>
3.如您在权益充值未到账期间退订产品将会导致权益充值失败<br/>
[退订方式]<br/>
进入支付宝APP---右下方我的---右上方的齿轮进入设置页面---点击支付设置---点击免密支付/自动扣款---选择惠点生活---点击关闭服务即可完成退订<br/>
[联系我们]<br/>
致电客服热线19983417235客服在线时间9:00-18:00
</div>
</div>
</div>
</template>
<script>
import { Toast, Indicator } from "mint-ui";
export default {
data() {
return{
scrollTop: 0,
phoneFixed: false,
mobile: '',
lid: 0,
channelType: null,
canClick: true,
showPop: false,
agreePrivacy: false,
appkey: null,
scrollArr:[
'151****2290已领取优酷视频会员',
'135****7952已领取爱奇艺会员',
'132****1506已领取腾讯视频会员',
'189****7756已领取芒果TV会员',
'180****6543已领取哔哩哔哩会员',
'181****2234已领取网易云音乐会员',
'134****8775已领取饿了么会员',
'132****1355已领取喜马拉雅听书会员',
'189****2293已领取百度网盘会员',
'153****9412已领取知乎盐选会员',
'172****5644已领取优酷视频会员',
'185****7885已领取爱奇艺会员',
'199****9877已领取腾讯视频会员',
'175****7655已领取芒果TV会员',
'156****3455已领取哔哩哔哩会员',
'145****1135已领取网易云音乐会员',
'175****2231已领取饿了么会员',
'137****9122已领取喜马拉雅听书会员',
'177****4277已领取百度网盘会员',
'189****7952已领取知乎盐选会员',
],
}
},
created(){
document.documentElement.scrollTop = 0;
document.title = "会员权益随心选";
},
watch:{
'mobile' : {
handler(value) {
this.checkPhone(value)
}
}
},
mounted() {
this.getUrlParam()
},
methods: {
//
clickAgreePrivacy() {
this.agreePrivacy = !this.agreePrivacy
},
goLookPrivacy() {
window.open ("https://rights.bnyer.cn/#/privacy")
},
//
handleScroll() {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
if (scrollTop > this.scrollTop + 50) {
this.phoneFixed = true;
} else {
this.phoneFixed = false;
}
},
// lid
getUrlParam() {
this.lid = this.$route.query.id;
this.channelType = this.$route.query.type;
console.log(this.lid);
console.log(this.channelType);
// if(this.channelType == 'llg') {
// this.getLLGAppKey()
// } else {
// this.getAppKey()
// }
// ta
if(this.lid == '1160') {
this.getTAAppKey()
}
},
// ta
getTAAppKey() {
// this.appkey = location.search.replace(/^\?/, '') + location.hash.replace(/^\#/, '&')
this.appkey = this.$route.query.a_oId;
},
// llg
getLLGAppKey() {
this.appkey = this.$route.query.llgclickid;
},
// gdt tt
getAppKey() {
this.appkey = "";
      let testNew = window.location.hash;
      let testsNew = decodeURIComponent(testNew);
      console.log(testsNew);
      this.union_site = ((testsNew || '').split("&")[1] || '').split("=")[1];
      var test = window.location.search;
      var tests = decodeURIComponent(test);
      var clickid;
      var dkey;
      if (tests.indexOf("?") != -1) {
        var str = tests.substr(1);
        var strs = str.split("&");
        console.log(strs,'打印strs');
        // console.log(strs);
        for (var i = 0; i < strs.length; i++) {
          // Request.push(strs[i].split("="))
          // console.log(strs[i].split("="));
          if (
              strs[i].split("=")[0] == "clickid" ||
              strs[i].split("=")[0] == "clickid " ||
              strs[i].split("=")[1] == "clickid" ||
              strs[i].split("=")[0] == "qz_gdt" ||
              strs[i].split("=")[0] == "gdt_vid" ||
              strs[i].split("=")[0] == "llgclickid"
          ) {
            clickid = strs[i].split("=")[1];
            // console.log(clickid);
            // console.log(clickid)
            this.appkey = clickid;
            console.log('打印this.appkey===',clickid,);
            // alert(this.appkey)
            // alert(this.appkey,"344444444444444444444444")
          }
          if (
              strs[i].split("=")[0] == "adid" ||
              strs[i].split("=")[0] == "adid "
          ) {
            dkey = strs[i].split("=")[1];
            // console.log(dkey, '0000000000000000000000')
            this.dkey = dkey;
            console.log(this.dkey);
            // alert(this.dkey,"566666666666666666666666")
          }
        }
      }
//       console.log(this.appkey);
},
//
checkPhone(mobile) {
if(mobile.length == 11) {
this.agreePrivacy = true
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if (!myreg.test(this.mobile)) {
Toast('请输入正确的手机号')
return
} else {
this.aiThreePay()
}
}
},
//
aiThreePay() {
//
if(this.mobile) {
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if (!myreg.test(this.mobile)) {
Toast('请输入正确的手机号')
return
}
} else {
Toast('请输入正确的手机号')
return
}
if(!this.agreePrivacy) {
Toast('请阅读并同意隐私协议')
return
}
//
if(!this.canClick) return
//
Indicator.open('领取中...')
this.canClick = false
//
const data = {
mobile: this.mobile,
linkId: this.lid,
openAddress: this.appkey,
// channelType: this.channelType
}
this.axios({
method: "post",
url:"https://interface.bnyer.cn/alipay/signUp",
// url: `http://192.168.2.8:8086/alipay/signUp`,
data: data
}).then((res) => {
Indicator.close()
this.canClick = true
if(res.code == 0){
//
window.location.href = res.result
} else if (res.code == '10031') {
Toast('您当前已开通,请勿重复开通~')
} else if (res.code == '10033') {
//
Toast('网络繁忙,请稍后再试~')
} else{
Toast('网络繁忙,请稍后再试~')
}
})
},
}
}
</script>
<style lang="scss">
.mint-indicator-wrapper {
z-index: 9999;
}
</style>
<style lang="scss" scoped>
.hotVipV2-wrap {
width: 100%;
height: auto;
position: absolute;
background-color: #e53c51;
padding-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
overflow-y: scroll;
.top-img {
background-image: url('https://img.bnyer.cn/vip/banner.jpg');
background-size: 100% 100%;
width: 100%;
// height: 360px;
height: 6.8rem;
}
.scroll-wrap {
margin-top: 10px;
width: 100%;
// overflow: hidden;
animation: 20s goleft linear infinite normal;
@keyframes goleft {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.scroll-box {
// width: 5100px;
width: auto;
display: flex;
.scroll-item {
flex-shrink: 0;
// width: 235px;
display: inline-block;
color: #fff;
background-color: rgba($color: #000000, $alpha: 0.25);
padding: 5px 25px;
text-align: center;
font-size: 0.25rem;
border-radius: 25px;
margin-right: 20px;
}
}
}
.fixed {
position: fixed !important;
bottom: 0rem !important;
left: 0.16rem !important;
right: 0;
z-index: 100;
transform: scale(0.8);
margin-top: 0rem !important;
}
.mid-box {
// z-index: 100;
width: 87%;
left: 0rem;
right: 0rem;
position: relative;
margin-top: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
box-sizing: border-box;
padding:35px 0px;
border-radius: 10px;
// box-sizing: border-box;
.cls_div_phone_input {
height: 1rem;
width: 7rem;
position: relative;
.phone-icon {
width: 0.6rem;
position: absolute;
top: 0.18rem;
left: 1.1rem;
z-index: 1;
}
.cls_input_phone {
position: relative;
left: 50%;
transform: translateX(-50%);
height: 1rem;
width: 5.4rem;
border-radius: 20px;
padding-left: 20px;
box-sizing: border-box;
font-size: 0.32rem;
font-weight: bold;
// text-align: center;
background-color: white;
border: 2px solid red;
// border: none;
}
}
.cls_img_btn {
margin-top: 0.2rem;
position: relative;
width: 5.2rem;
// height: 1rem;
// animation: btnScaleAnim 1s infinite;
@keyframes btnScaleAnim {
0%{
transform: scale(0.9);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.9);
}
}
}
}
.price {
// font-weight: bold;
// margin-top: 0.25rem;
text-align: center;
color: rgba(0,0,0,0.9);
font-size: 0.22rem;
}
.tips {
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
// margin-top: 0.25rem;
// text-align: center;
color: rgb(108, 1, 1);
font-size: 0.22rem;
margin-bottom: -0.2rem;
}
.privacy-box {
color: rgba(0,0,0,0.9);
margin-top: 0.2rem;
// margin-bottom: 0.2rem;
width: 100%;
z-index: 1;
// line-height: 0.25rem;
text-align: center;
// color: #fff6f3;
font-size: 0.22rem;
display: flex;
align-items: center;
justify-content: center;
.selectBox {
margin-right: 0.1rem;
width: 0.26rem;
height: 0.26rem;
}
.cls_sp_procotol_2 {
// margin-left: 0.1rem;
// color: #fe7d4a;
// font-weight: bold;
// text-decoration: underline;
}
}
.rule-box {
margin-top: 0.7rem;
position: relative;
width: 87%;
// height: 12rem;
background-color: #fdf9e3;
border-radius: 10px;
padding: 30px 18px;
box-sizing: border-box;
.rule-icon {
position: relative;
left: 50%;
transform: translateX(-50%);
// margin: 0 auto;
// background-image: url('https://vediocnd.corpring.com/hotVIP/rule-icon.png');
// background-size: 100% 100%;
background-color: #ffc72c;
border-radius: 25px;
font-weight: bold;
font-size: 0.38rem;
padding: 8px 30px;
display: inline-block;
// width: auto;
// width: 1.7rem;
// height: 0.6rem;
}
.rule-content {
margin-top: 30px;
line-height: 15px;
font-size: 0.26rem;
line-height: 0.46rem;
// color: #FFF;
}
}
}
</style>

64
vue.config.js

@ -0,0 +1,64 @@
const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = {
lintOnSave: false, // 关闭eslint
publicPath: './',
assetsDir: "static",
outputDir: process.env.VUE_APP_FLAG === 'pro'?"dist":"test",
devServer: {
// host: '127.0.0.1',
host: '0.0.0.0',
port: 9529,
proxy: {
'/api': {
target: 'https://interface.douring.com',
changeOrigin: true,
pathRewrite: {
'/api': ''
}
}
}
},
productionSourceMap: false,
chainWebpack: (config) => {
config.plugins.delete('prefetch');
},
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
algorithm: 'gzip', // 使用gzip压缩
test: /\.js$|\.html$|\.css$/, // 匹配文件名
filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名,后缀加.gz)
minRatio: 1, // 压缩率小于1才会压缩
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false, // 是否删除未压缩的源文件,谨慎设置,如果希望提供非gzip的资源,可不设置或者设置为false(比如删除打包后的gz后还可以加载到原始资源文件)
}),
],
performance: {
hints: 'warning',
// 入口起点的最大体积
maxEntrypointSize: 50000000,
// 生成文件的最大体积
maxAssetSize: 30000000,
// 只给出 js 文件的性能提示
assetFilter: function (assetFilename) {
return assetFilename.endsWith('.js')
}
}
},
configureWebpack: config => {
config.module.rules.push({
test: /\.worker.js$/,
use: {
loader: 'worker-loader',
options: { inline: true, name: 'workerName.[hash].js' }
}
})
},
parallel: false,
chainWebpack: config => {
config.output.globalObject('this')
}
}

8975
yarn.lock

File diff suppressed because it is too large
Loading…
Cancel
Save