Skip to content

S
source-trace-manage-go
Commit 7bc06a30 authored by zL's avatar zL
Browse files
Options

新增一套环境

parent 97e833dd
Hide whitespace changes
Inline Side-by-side
Showing with 4664 additions and 6 deletions
.env.boe_test 0 → 100644
View file @ 7bc06a30
NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'boe_test'
VUE_APP_VERSION = '0'
\ No newline at end of file
package.json
View file @ 7bc06a30
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"dev:hd": "vue-cli-service serve --mode hd_test", "dev:hd": "vue-cli-service serve --mode hd_test",
"dev:dl": "vue-cli-service serve --mode dl_test", "dev:dl": "vue-cli-service serve --mode dl_test",
"dev:hl": "vue-cli-service serve --mode hl_test", "dev:hl": "vue-cli-service serve --mode hl_test",
"dev:boe": "vue-cli-service serve --mode boe_test",
"build:hd_prod": "vue-cli-service build --mode hd_prod_build", "build:hd_prod": "vue-cli-service build --mode hd_prod_build",
"build:sy_prod": "vue-cli-service build --mode sy_prod_build", "build:sy_prod": "vue-cli-service build --mode sy_prod_build",
"build:cs_prod": "vue-cli-service build --mode cs_prod_build", "build:cs_prod": "vue-cli-service build --mode cs_prod_build",
......
public/boe/index.html 0 → 100644
View file @ 7bc06a30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="./boe/favicon.ico">
<title>BOE追溯平台</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_1321935_49vw1tllkgn.css">
<script src="https://cdn.bootcss.com/tinymce/4.7.4/tinymce.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<style>
</style>
<script>
</script>
</html>
\ No newline at end of file
src/config/UrlPrefix.js
View file @ 7bc06a30
...@@ -35,6 +35,7 @@ const configModules = { ...@@ -35,6 +35,7 @@ const configModules = {
filename: 'index.html' filename: 'index.html'
} }
}, },
// 慈善>正式环境
"cs_prod": { "cs_prod": {
CHAIN_BROWSER_URL_PREFIX: 'https://ccs.chain33.pro/', CHAIN_BROWSER_URL_PREFIX: 'https://ccs.chain33.pro/',
INERFACE_URL_PREFIX: 'https://cs.chain33.pro/api', INERFACE_URL_PREFIX: 'https://cs.chain33.pro/api',
...@@ -44,11 +45,9 @@ const configModules = { ...@@ -44,11 +45,9 @@ const configModules = {
filename: 'index.html' filename: 'index.html'
} }
}, },
// 百斯特 // 百斯特>测试环境
"best_test": { "best_test": {
//
CHAIN_BROWSER_URL_PREFIX: 'http://120.26.174.69:9032/', CHAIN_BROWSER_URL_PREFIX: 'http://120.26.174.69:9032/',
// CHAIN_BROWSER_URL_PREFIX: 'http://120.26.174.69:9007/',
INERFACE_URL_PREFIX: 'http://172.16.101.87:46789', INERFACE_URL_PREFIX: 'http://172.16.101.87:46789',
INDEX: { INDEX: {
entry: './src/entry/best/main.ts', entry: './src/entry/best/main.ts',
...@@ -56,7 +55,7 @@ const configModules = { ...@@ -56,7 +55,7 @@ const configModules = {
filename: 'index.html' filename: 'index.html'
} }
}, },
// 溯源>正式环境 // 百斯特>正式环境
"best_prod": { "best_prod": {
CHAIN_BROWSER_URL_PREFIX: 'https://llq.hrzl.net.cn/', // 浏览器 CHAIN_BROWSER_URL_PREFIX: 'https://llq.hrzl.net.cn/', // 浏览器
INERFACE_URL_PREFIX: 'https://hrzl.net.cn/api', // 服务器地址 INERFACE_URL_PREFIX: 'https://hrzl.net.cn/api', // 服务器地址
...@@ -66,7 +65,7 @@ const configModules = { ...@@ -66,7 +65,7 @@ const configModules = {
filename: 'index.html' filename: 'index.html'
} }
}, },
// hd // hd>测试环境
"hd_test": { "hd_test": {
CHAIN_BROWSER_URL_PREFIX: 'http://120.26.174.69:9032/', CHAIN_BROWSER_URL_PREFIX: 'http://120.26.174.69:9032/',
INERFACE_URL_PREFIX: 'http://172.16.101.87:46789', INERFACE_URL_PREFIX: 'http://172.16.101.87:46789',
...@@ -76,7 +75,7 @@ const configModules = { ...@@ -76,7 +75,7 @@ const configModules = {
filename: 'index.html' filename: 'index.html'
} }
}, },
// hd // hd>正式环境
"hd_prod": { "hd_prod": {
CHAIN_BROWSER_URL_PREFIX: 'https://cx.honordecent.com/', CHAIN_BROWSER_URL_PREFIX: 'https://cx.honordecent.com/',
INERFACE_URL_PREFIX: 'https://sy.honordecent.com/api', INERFACE_URL_PREFIX: 'https://sy.honordecent.com/api',
...@@ -86,6 +85,7 @@ const configModules = { ...@@ -86,6 +85,7 @@ const configModules = {
filename: 'index.html' filename: 'index.html'
} }
}, },
// dl>测试环境
"dl_test": { "dl_test": {
CHAIN_BROWSER_URL_PREFIX: 'http://120.26.174.69:9032/', CHAIN_BROWSER_URL_PREFIX: 'http://120.26.174.69:9032/',
INERFACE_URL_PREFIX: 'http://172.16.101.87:46789', INERFACE_URL_PREFIX: 'http://172.16.101.87:46789',
...@@ -95,6 +95,7 @@ const configModules = { ...@@ -95,6 +95,7 @@ const configModules = {
filename: 'index.html' filename: 'index.html'
} }
}, },
// dl>正式环境
"dl_prod": { "dl_prod": {
CHAIN_BROWSER_URL_PREFIX: 'https://browser.scdliot.com/', CHAIN_BROWSER_URL_PREFIX: 'https://browser.scdliot.com/',
INERFACE_URL_PREFIX: 'https://user.scdliot.com/api', INERFACE_URL_PREFIX: 'https://user.scdliot.com/api',
...@@ -104,6 +105,7 @@ const configModules = { ...@@ -104,6 +105,7 @@ const configModules = {
filename: 'index.html' filename: 'index.html'
} }
}, },
// hl>测试环境
"hl_test": { "hl_test": {
CHAIN_BROWSER_URL_PREFIX: 'http://120.26.174.69:9032/', CHAIN_BROWSER_URL_PREFIX: 'http://120.26.174.69:9032/',
INERFACE_URL_PREFIX: 'http://172.16.101.87:46789', INERFACE_URL_PREFIX: 'http://172.16.101.87:46789',
...@@ -123,5 +125,15 @@ const configModules = { ...@@ -123,5 +125,15 @@ const configModules = {
filename: 'index.html' filename: 'index.html'
} }
}, },
// boe>测试环境
"boe_test": {
CHAIN_BROWSER_URL_PREFIX: 'http://120.26.174.69:9032/',
INERFACE_URL_PREFIX: 'http://172.16.101.87:46789',
INDEX: {
entry: './src/entry/boe/main.ts',
template: './public/boe/index.html',
filename: 'index.html'
}
},
} }
exports.model = configModules[process.env.VUE_APP_CURRENTMODE] exports.model = configModules[process.env.VUE_APP_CURRENTMODE]
\ No newline at end of file
src/entry/boe/App.vue 0 → 100644
View file @ 7bc06a30
<template>
<div id="App">
<router-view />
</div>
</template>
<script>
export default {
name: "app",
};
</script>
<style>
html {
height: 100%;
}
#App {
height: 100%;
}
html,
input,
button {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
* {
margin: 0;
padding: 0;
}
a:hover,
a:visited,
a:active,
a:link {
color: inherit;
text-decoration: none;
}
body {
height: 100%;
margin: 0;
font-size: 14px;
}
input::-webkit-search-cancel-button {
display: none;
}
input::-ms-clear {
display: none;
}
</style>
src/entry/boe/components/banner.vue 0 → 100644
View file @ 7bc06a30
<template>
<!-- 图片裁切部分 -->
<div class="picture-cutting">
<h1>上传手机banner图</h1>
<div class="picture-cutting__center">
<div class="picture-cutting__left">
<p class="title">封面预览</p>
<div class="picture-cutting__imgbox">
<div class="stance"></div>
<div class="mask">
<img
:src="previews.url"
v-if="previews.url"
:style="previews.img"
/>
</div>
</div>
<p class="tip-title">建议尺寸700x280</p>
<p class="tip">只支持JPG/PNG,大小不超过5M</p>
<p class="tip">（最多上传四张）</p>
</div>
<div class="picture-cutting__right">
<p class="title">裁切封面</p>
<div class="cutting-box">
<VueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="true"
:full="option.full"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixedBox="option.fixedBox"
:centerBox="option.centerBox"
@realTime="realTime"
@imgLoad="imgLoad"
></VueCropper>
</div>
<div class="operate-box">
<div class="right-box" v-if="previews.url">
<div @click="changeScale(-1)">
<i class="iconfont iconsuoxiao"></i>
</div>
<div @click="changeScale(1)">
<i class="iconfont iconfangda"></i>
</div>
<!-- <div @click="rotateRight">
<i class="iconfont iconxuanzhuan"></i>
</div>-->
<div @click="cuttingFinished">确定</div>
</div>
</div>
<ul class="pcupload-box">
<li class="pcupload-box__up" @click.stop="check">
<div>
<i class="iconfont iconshangchuan"></i>
</div>
<p>上传图片</p>
<input
ref="inputDom"
type="file"
accept="image/jpeg, image/png"
@click.stop
@change.stop="fileChange"
hidden
/>
</li>
<!-- 已有 -->
<li v-for="(item, index) in ExistingImg" :key="`img` + index">
<img :src="item.url" />
<div class="d-box" @click="DeleteExistingImg(index)">
<i class="iconfont iconshanchu1"></i>
</div>
</li>
<!-- 本地 -->
<li v-for="(item, index) in localImg" :key="index">
<img :src="item.img" />
<div class="d-box" @click="DeleteLocalImg(index)">
<i class="iconfont iconshanchu1"></i>
</div>
</li>
</ul>
</div>
</div>
<div class="btn-box">
<div class="btn" @click="imgCancel">取消</div>
<div class="btn" @click="imgConfirm">确定</div>
</div>
</div>
</template>
<script>
import { VueCropper } from "vue-cropper";
import CommonDialog from "@/components/CommonDialog.vue";
import { GO_URLS } from "@/config/URLS";
export default {
// 引入组件
components: {
VueCropper,
},
props: ["TemplateId", "incrementId"],
data() {
return {
previews: {}, // 图片预览
option: {
img: "", // 被裁剪图片的地址
outputType: "jpeg", // 裁剪生成图片的格式
autoCrop: true, // 是否默认生成截图框
autoCropWidth: "172", //截图框宽度
fixedBox: false, // 固定截图框大小 不允许改变
autoCropHeight: "70", //截图框高度
fixedNumber: [7, 3], //固定截图框的宽高比例
canMoveBox: true, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
canMove: false,
centerBox: true,
},
// 本地数据
localImg: [],
// 模拟数据
banners: [],
localData: null,
hashes: [],
ExistingImg: [], //回显需要
t: null,
};
},
created() {
if (this.TemplateId && this.TemplateId !== 0) this.EssentialInformation();
if (this.incrementId && this.incrementId !== 0) this.getincrement();
},
computed: {},
methods: {
// 获取增量
async getincrement() {
const res = await this.$ajax({
type: "get",
url: GO_URLS.incrementId + `/` + this.incrementId,
});
if (res) {
this.localData = JSON.parse(res.data.note);
if (this.localData.banners && this.localData.banners.length > 0) {
for (let index = 0; index < this.localData.banners.length; index++) {
const element = this.localData.banners[index];
this.hashes.push(element.hash);
if (this.hashes.length === this.localData.banners.length) {
this.getfiles();
}
}
}
}
},
//右旋转
// rotateRight() {
// this.$refs.cropper.rotateRight();
// },
//放大/缩小
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
// 取消
imgCancel() {
this.$emit("closeBanner");
},
// 查询基本信息
async EssentialInformation() {
const res = await this.$ajax({
type: "get",
params: {
id: this.TemplateId,
},
url: GO_URLS.proof,
});
if (res) {
this.localData = JSON.parse(res.data.note);
if (this.localData.banners && this.localData.banners.length > 0) {
for (let index = 0; index < this.localData.banners.length; index++) {
const element = this.localData.banners[index];
this.hashes.push(element.hash);
if (this.hashes.length === this.localData.banners.length) {
this.getfiles();
}
}
}
}
},
// 通过hash获取图片
async getfiles() {
const res = await this.$ajax({
type: "post",
url: GO_URLS.getFiles,
params: {
hashes: this.hashes,
},
});
if (res) {
this.ExistingImg = res.data.files;
}
},
// 更新note数据
async update() {
const res = await this.$ajax({
type: "put",
url:
this.TemplateId !== 0
? GO_URLS.update
: GO_URLS.incrementId + `/` + this.incrementId,
params: {
id: this.TemplateId !== 0 ? this.TemplateId : this.incrementId,
note: JSON.stringify(this.localData),
},
});
if (res) {
this.$message({
showClose: true,
message: "图片上传成功",
type: "success",
});
this.$emit("closeBanner", JSON.stringify(this.banners));
}
},
// 图片上传请求
async imageUpload(formData) {
const res = await this.$ajax({
type: "post",
url: GO_URLS.upload + `?file_type=png`,
params: formData,
});
if (res) {
this.banners.push({
hash: res.data.hash,
target: "",
});
if (
this.banners.length ===
this.localImg.length + this.ExistingImg.length
) {
this.localData.banners = this.banners;
this.update();
}
}
},
// 图片上传事件
async imgConfirm() {
if (this.localImg.length + this.ExistingImg.length === 0) {
this.$message({
message: "请先上传图片",
type: "warning",
});
return;
}
// 判断是否有旧的图片
if (this.ExistingImg.length !== 0) {
for (let index = 0; index < this.ExistingImg.length; index++) {
const element = this.ExistingImg[index];
this.banners.push({
hash: element.hash,
target: "",
});
}
if (this.localImg.length === 0 && this.banners.length) {
this.localData.banners = this.banners;
this.update();
}
}
for (let index = 0; index < this.localImg.length; index++) {
const formData = new FormData();
const element = this.localImg[index];
let blob = this.dataURLtoFile(element.img, "image/png");
var fileOfBlob = new Blob([blob], { type: "image/png" });
formData.append("file_data", fileOfBlob, new Date() + ".png");
this.imageUpload(formData);
}
},
//将base64转换为blob
dataURLtoFile(dataURI, type) {
let binary = atob(dataURI.split(",")[1]);
let array = [];
for (let i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], { type: type });
},
// 删除本地的base64位图片
DeleteLocalImg(index) {
this.localImg.splice(index, 1);
},
// 删除已有图片
DeleteExistingImg(index) {
this.ExistingImg.splice(index, 1);
},
// 确定裁切
cuttingFinished() {
if (this.t) window.clearTimeout(this.t);
this.t = setTimeout(() => {
this.$refs.cropper.getCropData((data) => {
this.localImg.push({ img: data });
this.previews.url = "";
this.option.img = " ";
});
}, 500);
},
// 触发input上传事件
check() {
// 获取长度，转化为可点击数，进行递减
if (this.localImg.length + this.ExistingImg.length === 4) {
this.$message({
message: "最多可上传四张图片",
type: "warning",
});
return;
}
this.$refs.inputDom.click();
},
// 图片-本地上传
fileChange(e) {
this.previews.url = "";
this.option.img = " ";
const file = e.target.files[0];
if (file) this.option.img = URL.createObjectURL(file);
},
imgLoad(msg) {
if (msg === "error") {
setTimeout(() => {
this.previews.url = "";
}, 300);
}
},
// 图片预览
realTime(data) {
this.previews = {
...data,
};
},
},
};
</script>
<style scoped lang="less">
// 图片裁减--覆盖原有公共样式
.picture-cutting {
width: 926px;
height: 617px;
background: rgba(255, 255, 255, 1);
border-radius: 10px;
h1 {
font-weight: 400;
font-size: 18px;
line-height: 67px;
text-align: center;
margin: 0;
padding: 0;
font-size: 22px;
color: #353535;
border-bottom: 1px solid #e9e9e9;
}
.picture-cutting__center {
height: 450px;
border-bottom: 1px solid #e9e9e9;
.picture-cutting__left {
width: 222px;
border-right: 1px solid #e9e9e9;
float: left;
height: 100%;
.title {
font-size: 14px;
font-weight: 400;
margin: 0;
color: rgba(53, 53, 53, 1);
line-height: 20px;
padding-top: 16px;
padding-left: 26px;
}
.tip-title {
color: #353535;
padding-top: 6px;
font-size: 12px;
text-align: center;
line-height: 20px;
margin: 0;
}
.tip {
text-align: center;
font-size: 10px;
margin: 0;
color: #797d84;
line-height: 20px;
}
.picture-cutting__imgbox {
width: 202px;
height: 298px;
margin: 0 auto;
text-align: center;
position: relative;
.stance {
width: 202px;
height: 298px;
background-image: url("../images/TemplateManage/Stance.png");
background-size: 100% 100%;
}
.mask {
max-width: 172px !important;
max-height: 70px !important;
position: absolute;
top: 43px;
overflow: hidden;
border-radius: 5px;
left: 15px;
img {
width: 100%;
height: 100%;
}
}
}
}
.picture-cutting__right {
float: left;
height: 100%;
width: 703px;
.title {
margin: 0;
font-size: 14px;
font-weight: 400;
color: rgba(53, 53, 53, 1);
line-height: 20px;
padding-top: 15px;
padding-bottom: 8px;
padding-left: 31px;
}
.cutting-box {
width: 641px;
height: 256px;
margin-left: 31px;
border: 1px solid rgba(235, 235, 235, 1);
// border: 1px solid #000;
/deep/.vue-cropper {
background: url("../../../assets/images/template/12-bg@2x.png")
no-repeat center;
background-size: 100%;
}
}
.operate-box {
border: 1px solid rgba(235, 235, 235, 1);
border-top: none;
width: 641px;
height: 40px;
margin-left: 31px;
line-height: 40px;
text-align: right;
.right-box {
float: right;
div {
float: left;
cursor: pointer;
padding-right: 22px;
font-size: 14px;
color: #9b9c9c;
&:last-child {
color: #3f79fe;
}
}
}
}
// 图片上传和展示部分
.pcupload-box {
list-style: none;
width: 641px;
height: 82px;
margin: 0 auto;
margin-top: 14px;
padding: 0;
li {
float: left;
width: 119px;
height: 82px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
border: 1px solid rgba(234, 234, 234, 1);
margin-right: 9px;
position: relative;
img {
width: 100%;
height: 100%;
}
.d-box {
position: absolute;
right: 0;
width: 21px;
background: rgba(0, 0, 0, 1);
opacity: 0.6;
height: 21px;
top: 0;
cursor: pointer;
text-align: center;
line-height: 21px;
i {
color: white;
}
}
&:last-child {
margin-right: 0;
}
}
.pcupload-box__up {
cursor: pointer;
text-align: center;
i {
color: #c4c4c4;
}
div {
margin-top: 19px;
color: #797d84;
}
p {
padding: 0;
margin: 0;
font-size: 12px;
padding-top: 8px;
font-weight: 400;
color: rgba(121, 125, 132, 1);
}
}
}
}
}
.btn-box {
text-align: center;
overflow: hidden;
margin-top: 30px;
.btn {
display: inline-block;
width: 120px;
height: 40px;
background: rgba(236, 236, 236, 1);
border-radius: 4px;
color: #5c6476;
font-size: 14px;
cursor: pointer;
text-align: center;
line-height: 40px;
&:first-child {
margin-right: 10px;
}
&:last-child {
margin-left: 10px;
background: rgba(63, 121, 254, 1);
color: white;
}
}
}
}
</style>
src/entry/boe/main.ts 0 → 100644
View file @ 7bc06a30
import Vue from 'vue';
// 取本地
import App from './App.vue';
import router from './router';
// 取公用
import axiosPlugin from '@/plugins/axios-plugin';
import '@/plugins/element.js';
import store from '@/store';
import Gfilters from '@/utils/tool/filter';
import md5 from 'js-md5'
Vue.prototype.$md5 = md5
Vue.use(axiosPlugin);
Vue.config.productionTip = false;
Gfilters(Vue);
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
src/entry/boe/router.ts 0 → 100644
View file @ 7bc06a30
import Vue from 'vue';
import Router from 'vue-router';
import { getLoginCode } from '@/plugins/storage';
Vue.use(Router);
let router = new Router({ // todo 移除旧页面
routes: [
// 宣传页
{
path: '/',
name: 'home',
component: () => import('./views/Home.vue'),
},
// 登录
{
path: '/signIn',
name: 'signIn',
component: () => import('./views/SignIn.vue'),
},
// 首页
{
path: '/main',
component: () => import(/* webpackChunkName: "main" */ './views/Main.vue'),
children: [
// 主页
{
path: '/categoryManage',
name: 'categoryManage',
component: () => import(/* webpackChunkName: "categoryManage" */ '@/components/category/Index.vue'),
},
// 个人中心
{
path: '/userCenter',
name: 'userCenter',
component: () => import(/* webpackChunkName: "userCenter" */ '@/views/userCenter/index.vue')
},
// 选择套餐
{
path: '/choosePackage',
name: 'choosePackage',
component: () => import(/* webpackChunkName: "companyVerify" */ './views/user/choosePackage.vue')
},
// 设置登录密码
{
path: '/initPassword',
name: 'initPassword',
component: () => import(/* webpackChunkName: "initPassword" */ '@/views/userCenter/SetPassword.vue'),
},
// 公司认证
{
path: '/companyVerify',
name: 'companyVerify',
component: () => import(/* webpackChunkName: "companyVerify" */ '@/views/userCenter/CompanyVerify.vue')
},
// 编辑密码
{
path: '/editPassword',
name: 'editPassword',
component: () => import(/* webpackChunkName: "editPassword" */ '@/views/userCenter/EditPassword.vue'),
},
// 变更手机
{
path: '/editPhone',
name: 'editPhone',
component: () => import(/* webpackChunkName: "editPhone" */ '@/views/userCenter/EditPhone.vue'),
},
// 个人认证
{
path: '/personVerify',
name: 'personVerify',
component: () => import(/* webpackChunkName: "personVerify" */ '@/views/userCenter/PersonVerify.vue')
},
// 模板相关
{
path: '/editTemplate',
name: 'editTemplate',
component: () => import(/* webpackChunkName: "editTemplate" */ './views/template/editTemplate.vue'),
}
]
}
],
});
router.beforeEach((to, from, next) => {
const urls = ['/', '/signIn'];
if (to.path === `/signIn` && getLoginCode()) {
if (to.query && to.query.type && to.query.type == '1') {
}
else {
}
next();
}
if (!urls.includes(to.path) && !getLoginCode()) {
return next({ path: "/signIn" });
}
else {
next();
}
})
export default router;
src/entry/boe/views/Home.vue 0 → 100644
View file @ 7bc06a30
<template>
<div class="home">
<!-- 主页第一个分块 -->
<section class="home-1">
<!-- 头部背景图 -->
<section class="home-bg">
<header>
<img class="header-left" src="../images/Home/home_logo.png" alt />
<div class="header-right">
<span class="header-login cursor-pointer" @click="toLoginPanel()"
>登录 / 注册</span
>
<span class="header-btn cursor-pointer" @click="toLoginPanel(true)"
>免费试用</span
>
</div>
</header>
<div class="bg-layout">
<div class="bg-content">
<span class="bg-content-title">BOE追溯平台</span>
<span class="bg-content-text"
>核心技术CHAIN33区块链底层开源， 构建数字一体化生态体系</span
>
<div class="bg-search">
<input
v-model="hashText"
class="bg-search-input"
type="text"
placeholder="请输入追源码"
/>
<span class="search-btn cursor-pointer" @click="searchHash"
>点击搜索</span
>
</div>
</div>
<div class="bg-phone"></div>
</div>
</section>
<!-- 优势 -->
<section class="advantage">
<div class="advantage-in">
<span class="advantage-in-title">领先级技术研发</span>
<br />
<span class="advantage-in-text"
>已累计申请近 200项区块链发明专利，与阿里、腾讯同列全球专利数排名前
10。</span
>
</div>
<div class="advantage-in">
<span class="advantage-in-title">专业化团队运营</span>
<br />
<span class="advantage-in-text"
>作为专业的区块链解决方案服务商，引入不同国家的技术专家、电商创业者等行业精英。</span
>
</div>
<div class="advantage-in">
<span class="advantage-in-title">500强合作伙伴</span>
<br />
<span class="advantage-in-text"
>已为海航海平线、美的金融、电力巨头等多家世界 500
强企业正式上线区块链项目。</span
>
</div>
</section>
<!-- 功能展示 -->
<section class="features">
<div class="features-left"></div>
<div class="features-right">
<span class="features-title">功能展示</span>
<div class="features-content">
<div
v-for="(item, index) in featuresContent"
:key="index"
class="features-content-in"
>
<i class="features-content-in-icon iconfont">&#xe628;</i>
<span class="features-content-in-text">{{ item.text }}</span>
</div>
</div>
</div>
</section>
</section>
<!-- 主页第二个模块 我们的优势 -->
<section class="home-2">
<img
class="home-2-icon"
src="../../../assets/images/Home/home-2-icon.png"
alt
/>
<span class="home-title">我们的优势</span>
<div class="home-2-in">
<div class="content">
<div
class="content-in"
v-for="(item, index) in ourAdvantages"
:key="index"
>
<!--<i class="content-in-icon iconfont" v-html="item.icon"></i>-->
<img
class="advantage-icon2"
:class="'advantage-icon' + index"
:src="item.src"
/>
<span class="content-in-title">{{ item.title }}</span>
<span class="content-in-text">{{ item.text }}</span>
</div>
</div>
</div>
</section>
<!-- 企业独立部署 -->
<section class="home-3">
<span class="home-title">企业独立部署</span>
<div class="home-3-in">
<div class="home-3-in-left">
<div
class="content cursor-pointer"
:class="{ 'content-click': currentDeploy === index }"
v-for="(item, index) in deploys"
@click="currentDeploy = index"
:key="index"
>
<span class="content-title">{{ item.title }}</span>
<span class="content-text">{{ item.text }}</span>
</div>
</div>
<img
class="home-3-in-right"
v-show="currentDeploy === 0"
src="../../../assets/images/Home/home3_baner3.png"
alt
/>
<img
class="home-3-in-right"
v-show="currentDeploy === 1"
src="../../../assets/images/Home/home3_baner1.png"
alt
/>
<img
class="home-3-in-right"
v-show="currentDeploy === 2"
src="../../../assets/images/Home/home3_baner2.png"
alt
/>
</div>
</section>
<!-- 适用行业 -->
<section class="home-4">
<span class="home-title">适用行业</span>
<div class="home-4-in">
<i
class="home-4-in-img cursor-pointer iconfont"
:style="industryLeft.style"
@click="nextIndustry(`right`)"
v-html="industryLeft.icon"
/>
<div class="content">
<div
:style="industryStyle.style"
class="content-in"
v-for="(item, index) in industrys"
:key="index"
>
<i
class="content-in-icon iconfont"
:style="[{ background: item.color }]"
v-html="item.icon"
></i>
<span class="content-in-title">{{ item.title }}</span>
<span class="content-in-text">{{ item.text }}</span>
</div>
</div>
<i
class="home-4-in-img cursor-pointer iconfont"
:style="industryRight.style"
@click="nextIndustry(`left`)"
v-html="industryRight.icon"
/>
</div>
</section>
<!-- 免费试用上链查 -->
<section class="home-5">
<span class="home-5-title">免费试用BOE工业互联网</span>
<span class="home-5-text"
>不需要注册和审批只需手机登录就可以直接使用</span
>
<span class="home-5-btn cursor-pointer" @click="$router.push(`/login`)"
>免费使用</span
>
</section>
<!-- 底部 -->
<footer class="footer">
<div class="footer-in">
<!-- <div class="footer-block footer-phone">
<div class="footer-block-in">
<div class="content-title">公司电话</div>
<div class="content-title-line"></div>
<div class="content-text">0571-81671360</div>
</div>
</div> -->
<!-- <div class="footer-block footer-email">
<div class="footer-block-in">
<div class="content-title">联系地址</div>
<div class="content-title-line"></div>
<div class="content-text">
Raffles place +005-00 Singapore republic place (048619)
</div>
</div>
</div> -->
<!-- <div class="footer-block footer-addr">
<div class="footer-block-in">
<div class="content-title">联系地址</div>
<div class="content-title-line"></div>
<div class="content-text">
四川省达州市高新区斌郎乡七河路智造园4栋2楼19~20号
</div>
</div>
</div> -->
<!-- <div class="footer-block footer-qs">
<div class="footer-block-in">
<div class="content-title">商业合作</div>
<div class="content-title-line"></div>
<div class="content-text">
<img
class="footer-qs-img"
src="../images/Home/qr.png"
alt="二维码"
/>
客服二维码
</div>
</div>
</div> -->
</div>
</footer>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
let UrlPrefixObj = require("@/config/UrlPrefix");
@Component({})
export default class Home extends Vue {
public featuresContent = [
{ text: `产品资料隐私性` },
{ text: `团队权限管理` },
{ text: `定期维护更新` },
{ text: `专业技术支持` },
{ text: `全程自定义` },
{ text: `全程协同合作` },
];
public hashText = ``;
// 我们的优势
public ourAdvantages = [
{
src: require("../../../assets/images/Home/advantage1_szhfwcz.png"),
icon: `&#xe61e;`,
title: `数字化防伪存证`,
text: `区块链共识算法、非对称加密、分布式存储等技术特性，存证安全加密，溯源真实。`,
},
{
src: require("../../../assets/images/Home/advantage2_qzqsjjk.png"),
icon: `&#xe632;`,
title: `全周期数据监控`,
text: `上链数据无法作弊、不可篡改，从源头控制数据，实现存证全生命周期监控。`,
},
{
src: require("../../../assets/images/Home/advantage3_djdsycz.png"),
icon: `&#xe61b;`,
title: `多节点溯源见证`,
text: `高质量溯源系统稳定可靠，存证关键控制点提供警告、预防、管控提示，数据可控。`,
},
{
src: require("../../../assets/images/Home/advantage4_zdyslmb.png"),
icon: `&#xe61c;`,
title: `自定义上链模板`,
text: `个性化模板自由定制，类目产品任意添加，数字化一体存证，操作更灵活。`,
},
{
src: require("../../../assets/images/Home/advantage5_dcbgxlz.png"),
icon: `&#xe617;`,
title: `低成本高效流转`,
text: `上链即生成专属二维码，有效提高协调效率，线上线下易流转，降低传播成本。`,
},
{
src: require("../../../assets/images/Home/advantage6_ganfhtx.png"),
icon: `&#xe61a;`,
title: `高安全防护体系`,
text: `多维度、多层防护确保系统技术安全，保障产品及服务的无系统性风险运作。`,
},
];
// 企业独立部署
public deploys = [
{
title: `增量更新`,
text: `信息上链后可持续录入，多次上链，上传更便捷。`,
},
{
title: `用户管理`,
text: `管理员统一设用户权限，专人专责，管理更规范。`,
},
{
title: `权限交接`,
text: `现有工作信息一键移交，尽在掌握，操作更简单。`,
},
];
public currentDeploy = 0; // 当前选中的企业部署
public industryStyle = {
style: {}, // transform移动
width: 252, // 盒子的宽度
margin: 100, // 盒子间距
currentNum: 0, // 当前移动了多少
currentIndex: 0, // 当前显示的最左边是哪个
box: 3, // 一次显示几个盒子
};
// 使用行业
public industrys = [
{
color: `#15CBBA`,
icon: `&#xe62f;`,
title: `商品上链`,
text: `对商品实现从源头的信息采集记录，原料来源追溯、⽣产过程、加⼯环节、仓储信息、检验批次、物流周转、到第三⽅质检、海关出⼊境、防伪鉴证的全程可追溯。`,
},
{
color: `#6587FD`,
icon: `&#xe62e;`,
title: `证书上链`,
text: `各种教育资质证书均可上链，将个人学习、培训记录和证书存放在区块链数据库中，使得证书验证更加安全、有效，保证学习记录和证书的真实性并永久保存。`,
},
{
color: `#FFA475`,
icon: `&#xe645;`,
title: `文章上链`,
text: `上链后文章将永久被记录在区块链上，不可篡改且不可删除，区块链文章为原创文章作者应有的版权保驾护航，让维权更简单。`,
},
{
color: `#FF7575`,
icon: `&#xe631;`,
title: `古董字画存证`,
text: `上链后赋予每一件艺术品独一无二的身份信息，即便在交易流转过程中也可进行信息追加，让赝品、仿品无可乘之机，有效保障艺术品交易双方利益。`,
},
];
public mounted() {
this.industryStyle.currentIndex = 1;
}
// 左边按钮是否可已点击
get industryLeft() {
const isFlag =
this.industryStyle.currentIndex >=
this.industrys.length - this.industryStyle.box + 1;
return {
icon: !isFlag ? `&#xe61f;` : `&#xe622;`,
style: { color: !isFlag ? `#EFEFEF` : `#9DA0D6` },
isFlag: isFlag,
};
}
// 右边按钮是否可以点击
get industryRight() {
const isFlag = this.industryStyle.currentIndex <= 1;
return {
icon: !isFlag ? `&#xe621;` : `&#xe620;`,
style: { color: !isFlag ? `#EFEFEF` : `#9DA0D6` },
isFlag: isFlag,
};
}
// 点击轮播切换
public nextIndustry(type: string) {
const industryStyle = this.industryStyle;
if (type === `left`) {
if (this.industryLeft.isFlag) return;
industryStyle.currentNum =
industryStyle.currentNum - (industryStyle.width + industryStyle.margin);
industryStyle.currentIndex++;
} else {
if (this.industryRight.isFlag) return;
industryStyle.currentNum =
industryStyle.currentNum + (industryStyle.width + industryStyle.margin);
industryStyle.currentIndex--;
}
industryStyle.style = {
transform: `translateX(${industryStyle.currentNum}px)`,
};
}
toLoginPanel(isRegister: boolean) {
this.$router.push(`/signIn`);
}
public searchHash() {
if (this.hashText.trim() === "") {
window.open(UrlPrefixObj.model.CHAIN_BROWSER_URL_PREFIX);
} else {
window.open(
UrlPrefixObj.model.CHAIN_BROWSER_URL_PREFIX +
"product?hash=" +
this.hashText
);
}
}
}
</script>
<style lang="less" scoped>
.home-search-placeholder() {
font-size: 14px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(192, 192, 192, 1);
line-height: 28px;
}
.home-title {
display: block;
width: 100%;
text-align: center;
height: 42px;
font-size: 30px;
font-family: PingFangSC-Light;
font-weight: 300;
color: rgba(53, 53, 53, 1);
line-height: 42px;
}
.home {
min-width: 1200px;
}
.home-1 {
padding-bottom: 100px;
background: linear-gradient(
180deg,
rgba(234, 245, 255, 1) 0%,
rgba(255, 255, 255, 1) 100%
);
.home-bg {
width: 100%;
min-width: 1200px;
min-height: 724px;
height: 36.77vw;
background-image: url("../../../assets/images/Home/banner.png");
background-size: cover;
header {
width: 100%;
height: 61px;
display: flex;
justify-content: space-between;
align-items: center;
background: white;
.header-left {
margin-left: 200px;
width: 184px;
}
.header-right {
display: flex;
text-align: center;
margin-right: 200px;
line-height: 36px;
padding: 10px 0;
.header-login {
color: #353535;
margin-right: 40px;
}
.header-btn {
text-align: center;
width: 106px;
height: 36px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 10px 0px rgba(63, 121, 254, 0.52);
border-radius: 36px;
color: #7b4ee5;
}
}
}
.bg-content {
width: 465px;
height: 350px;
position: absolute;
top: 100px;
left: 54%;
transform: translate(-562.5px, 0);
z-index: 1;
}
.bg-content-title {
display: block;
color: white;
padding-top: 80px;
font-size: 30px;
}
.bg-content-text {
display: block;
color: white;
margin-top: 15px;
font-size: 32px;
opacity: 0.3;
}
.bg-search {
width: 390px;
height: 40px;
background: rgba(255, 255, 255, 1);
border-radius: 20px;
margin: 55px 0 0 0;
padding: 0 6px 0 20px;
display: flex;
align-items: center;
.bg-search-input {
width: 300px;
height: 32px;
line-height: 32px;
font-size: 14px;
background: white;
color: #797d84;
border-width: 0;
border-radius: 0;
vertical-align: middle;
}
.bg-search-input::placeholder {
color: #c0c0c0;
}
.bg-search-input:focus {
border-width: 0;
outline: none;
}
.search-btn {
width: 102px;
height: 32px;
margin-left: 10px;
background: rgba(21, 203, 186, 1);
border-radius: 20px;
text-align: center;
font-size: 14px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 32px;
}
}
.bg-phone {
width: 1340px;
height: 498px;
background-image: url("../images/Home/banner-phone.png");
background-size: cover;
background-repeat: no-repeat;
position: absolute;
left: 45%;
top: 94px;
transform: translate(-680px, 0);
}
}
.advantage {
width: 1200px;
height: 500px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
.advantage-in {
width: 350px;
height: 350px;
background-size: 100% 100%;
text-align: center;
.advantage-in-title {
display: inline-block;
margin-top: 160px;
font-size: 20px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(0, 0, 0, 1);
line-height: 28px;
}
.advantage-in-text {
display: block;
width: 66%;
margin: 10px auto;
font-size: 14px;
opacity: 0.6;
font-family: PingFangSC-Regular;
color: rgba(74, 74, 74, 1);
line-height: 30px;
}
&:nth-child(1) {
background-image: url("../../../assets/images/Home/advantage1.png");
}
&:nth-child(2) {
background-image: url("../../../assets/images/Home/advantage2.png");
}
&:nth-child(3) {
background-image: url("../../../assets/images/Home/advantage3.png");
}
transition: all 0.2s linear;
}
.advantage-in:hover {
cursor: pointer;
transform: scale(1.1);
transition: all 0.2s linear;
}
}
.features {
width: 1200px;
height: 240px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(
90deg,
rgba(69, 71, 111, 1) 0%,
rgba(103, 106, 171, 1) 100%
);
border-radius: 20px;
border: 1px solid rgba(151, 151, 151, 1);
.features-left {
width: 296px;
height: 196px;
margin-left: 100px;
background: linear-gradient(
312deg,
rgba(144, 147, 236, 1) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: url("../../../assets/images/Home/features.png");
background-size: 100% 100%;
}
.features-right {
width: 520px;
height: 196px;
margin-right: 100px;
.features-title {
font-size: 20px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 28px;
}
.features-content {
width: 100%;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
.features-content-in {
width: 240px;
height: 43px;
margin: 5px;
background: #3b3562;
line-height: 43px;
display: flex;
align-items: center;
justify-content: flex-start;
&:nth-child(2n-1) {
margin-left: 0;
}
.features-content-in-icon {
width: 34px;
height: 28px;
color: #14cbba;
opacity: 1;
font-size: 20px;
margin-left: 20px;
margin-bottom: 12px;
}
.features-content-in-text {
width: 112px;
height: 22px;
font-size: 16px;
margin-left: 10px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(162, 157, 202, 1);
line-height: 22px;
}
}
}
}
}
}
.home-2 {
width: 100%;
margin-top: -80px;
.home-2-icon {
width: 50px;
height: 50px;
display: block;
margin: 0 auto;
transform: translateY(144px);
}
.home-2-in {
margin-top: 10px;
width: 100%;
height: 684px;
background-image: url("../../../assets/images/Home/home2.png");
background-size: 100% 100%;
.content {
width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.content-in {
margin-top: 150px;
width: 28%;
&:nth-child(n + 4) {
margin-top: 50px;
}
.content-in-icon {
display: block;
color: #7a7de7;
font-size: 50px;
}
.advantage-icon2 {
max-width: 60px;
max-height: 60px;
}
.advantage-icon1 {
max-width: 55px;
max-height: 55px;
}
.advantage-icon3 {
max-width: 50px;
max-height: 50px;
}
.advantage-icon5 {
max-width: 55px;
max-height: 55px;
}
.content-in-title {
margin-top: 10px;
display: block;
height: 56px;
font-size: 20px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 28px;
}
.content-in-text {
display: block;
width: 290px;
height: 51px;
font-size: 12px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(162, 157, 202, 1);
line-height: 17px;
}
}
}
}
}
.cursor-pointer {
cursor: pointer;
}
.home-3 {
width: 100%;
height: 640px;
background-image: url("../../../assets/images/Home/home3.png");
background-position: right center;
background-repeat: no-repeat;
.home-3-in {
width: 1200px;
margin: 75px auto;
display: flex;
justify-content: space-between;
.home-3-in-left {
.content {
width: 404px;
height: 95px;
padding-top: 25px;
padding-left: 30px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.19);
&:nth-child(n + 2) {
margin-top: 12px;
}
.content-title {
display: block;
width: 224px;
height: 23px;
font-size: 20px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(39, 34, 105, 1);
line-height: 28px;
}
.content-text {
display: block;
margin-top: 15px;
width: 281px;
height: 41px;
font-size: 12px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(125, 117, 176, 1);
line-height: 20px;
}
}
transition: all 0.2s linear;
}
.home-3-in-left > .content {
opacity: 0.3;
}
.home-3-in-left > .content-click {
opacity: 1;
cursor: pointer;
transform: scale(1.1);
transition: all 0.2s linear;
}
.home-3-in-right {
width: 680px;
height: 380px;
margin-left: 20px;
}
}
}
.home-4 {
width: 100%;
.home-4-in {
width: 1200px;
height: 400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
.iconfont {
font-size: 30px;
}
.home-4-in-img {
display: block;
width: 54px;
height: 37px;
text-align: center;
line-height: 37px;
}
.content {
width: 976px;
height: 300px;
display: flex;
flex-wrap: nowrap;
overflow: hidden;
.content-in {
flex-shrink: 0;
width: 252px;
height: 290px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 10px 20px 0px rgba(106, 92, 255, 0.16);
border-radius: 6px;
transition: transform 0.6s;
.content-in-icon {
display: block;
margin: 40px auto 0 auto;
width: 82px;
height: 82px;
color: white;
line-height: 82px;
text-align: center;
border-radius: 50%;
font-size: 40px;
}
.content-in-title {
display: block;
margin: 15px auto 0 auto;
width: 100%;
height: 22px;
font-size: 16px;
text-align: center;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(53, 53, 53, 1);
line-height: 22px;
}
.content-in-text {
display: block;
margin: 15px auto 0 auto;
width: 199px;
height: 82px;
font-size: 12px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(162, 157, 202, 1);
line-height: 17px;
}
.content-in-move {
display: block;
margin: 0 auto;
width: 29px;
height: 17px;
font-size: 13px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(21, 203, 186, 1);
line-height: 17px;
}
&:nth-child(1) {
margin-left: 10px;
}
&:nth-child(n + 2) {
margin-left: 100px;
}
}
}
}
}
.home-5 {
margin-top: 100px;
width: 100%;
height: 501px;
background-image: url("../images/Home/db.png");
background-size: 100% 100%;
.home-5-title {
display: block;
margin: 0 auto;
padding-top: 100px;
width: 383px;
height: 48px;
font-size: 34px;
font-family: PingFangSC-Light;
font-weight: 300;
color: black;
line-height: 48px;
}
.home-5-text {
display: block;
margin: 0 auto;
padding-top: 20px;
width: 336px;
height: 22px;
font-size: 16px;
font-family: PingFangSC-Light;
font-weight: 300;
color: black;
line-height: 22px;
}
.home-5-btn {
display: block;
margin: 40px auto 0 auto;
width: 148px;
height: 50px;
line-height: 50px;
font-size: 16px;
font-family: PingFangSC-Light;
font-weight: 300;
color: rgba(255, 255, 255, 1);
background: linear-gradient(90deg, #18ccbb 0%, #03d0bc 100%);
text-align: center;
border-radius: 25px;
}
}
.footer {
margin-top: -130px;
width: 100%;
height: 112px;
text-align: center;
.footer-in {
display: inline-block;
width: 1200px;
text-align: center;
}
.footer-block {
color: white;
width: 265px;
height: 92px;
line-height: 92px;
text-align: left;
display: inline-block;
vertical-align: bottom;
}
.footer-block-in {
display: inline-block;
line-height: 16px;
vertical-align: bottom;
}
.footer-block .content-title {
display: inline-block;
color: white;
opacity: 0.5;
font-size: 12px;
}
.footer-block .content-text {
display: inline-block;
position: relative;
overflow: visible;
font-size: 14px;
&::before {
position: absolute;
top: 3px;
left: -20px;
display: inline-block;
content: "";
width: 10px;
height: 10px;
border: 1px solid #526069;
border-radius: 50%;
}
}
.footer-block .content-title-line {
height: 1px;
width: 20px;
background-color: #c5cfe8;
margin: 4px 0 18px 0;
}
.footer-addr {
padding-right: 40px;
width: 349px;
}
.footer-email {
float: left;
}
.footer-qs {
width: 200px;
float: right;
.footer-qs-img {
position: absolute;
top: -60px;
left: 104px;
display: inline-block;
width: 92px;
height: 92px;
}
}
}
.bg-layout {
overflow: hidden;
}
@media screen and (max-width: 1200px) {
.home-1 .home-bg .bg-phone {
width: 1000px;
height: 372px;
left: 50px;
top: 94px;
transform: translate(0, 0);
}
}
@media screen and (min-width: 1200px) {
.home-1 .home-bg .bg-phone {
width: 80vw;
height: 29.73vw;
left: 10vw;
top: 94px;
transform: translate(0, 0);
}
}
</style>
src/entry/boe/views/Main.vue 0 → 100644
View file @ 7bc06a30
<template>
<div class="main">
<!-- 左侧导航 -->
<main-menu class="col_left" />
<div class="col_right">
<main-header />
<div class="main_wrapper">
<router-view />
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import MainHeader from "./MainHeader.vue";
import MainMenu from "@/components/MainMenu/MainMenu.vue";
@Component({
components: {
MainMenu,
MainHeader,
},
})
export default class Main extends Vue {}
</script>
<style scoped>
.main {
display: flex;
height: 100%;
}
.col_left {
flex-shrink: 0;
}
.col_right {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.main_wrapper {
flex: 1;
min-height: 0;
overflow-y: scroll;
background: white;
height: 100%;
}
</style>
src/entry/boe/views/MainHeader.vue 0 → 100644
View file @ 7bc06a30
<template>
<header class="main_header">
<img class="icon_logo" src="../images/SigIn/logo.png" alt="logo" />
<div class="user_wrapper">
<i class="iconfont iconShapecopy1"></i>
<span class="user-text">UID:{{ getid || "10086" }}</span>
<ul class="menu_box">
<li @click="go()">退出</li>
</ul>
<i class="iconxiangyousanjiao iconfont"></i>
</div>
</header>
</template>
<script lang="ts">
import { GO_URLS } from "@/config/URLS";
import { Component, Vue } from "vue-property-decorator";
@Component
export default class MainHeader extends Vue {
[x: string]: any;
get getid() {
return JSON.parse(String(sessionStorage.getItem("user"))).id;
}
public go() {
sessionStorage.removeItem("user");
this.$router.push("/");
}
// 获取用户基本信息
async getUserInfos() {
const res = await this.$ajax({
type: "get",
url:
GO_URLS.user +
`/` +
JSON.parse(String(sessionStorage.getItem("user"))).id,
});
if (res) {
this.$store.commit("setuserInfos", res.data);
}
}
public mounted() {
this.getUserInfos();
}
}
</script>
<style scoped lang='less'>
// 大盒子
.main_header {
z-index: 1; /* shadow覆盖底部 */
position: relative;
height: 50px;
padding-right: 35px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 40px 0px rgba(65, 70, 76, 0.07);
}
// logo
.icon_logo {
margin-left: 27px;
margin-top: 6px;
height: 36px;
}
.user_wrapper {
margin-top: 12px;
float: right;
height: 100%;
color: #353535;
cursor: pointer;
.iconShapecopy1 {
vertical-align: middle;
margin-right: 6px;
font-size: 20px;
color: #d6d8e1;
}
.iconxiangyousanjiao {
color: #b4b4b4;
transform: rotate(90deg);
display: inline-block;
font-size: 12px;
margin-left: 14px;
}
}
.user_wrapper .menu_box {
display: none;
}
.user_wrapper:hover .menu_box {
display: block;
}
.user-icon {
/* todo ui切块错误 */
margin-right: 6px;
vertical-align: middle;
height: 20px;
}
.user-text {
vertical-align: middle;
color: #b4b4b4;
}
.menu_box {
position: absolute;
top: 100%;
right: 35px;
margin: 0;
padding: 0;
line-height: 41px; /* 非精确ui */
width: 107px; /* 109 - border */
list-style: none;
border: 1px solid #e7e7e7;
text-align: center;
color: #797d84;
background: #fff;
}
.menu_box li {
transition: 0.5s;
cursor: pointer;
background: white;
}
.menu_box li:hover {
background: #f5f5f5;
}
</style>
src/entry/boe/views/SignIn.vue 0 → 100644
View file @ 7bc06a30
<template>
<div class="sign-in">
<div class="img"></div>
<div class="fixed">
<div class="background-left"></div>
<div class="sign-in-box">
<!-- 手机+密码登录模块 -->
<phone-login
v-if="showPlg"
@change-email="changeEmail"
@SetPassword="
showPlg = false;
showSpd = true;
"
></phone-login>
<!-- email登录模块 -->
<email-login
v-if="showEmail"
@phone-email="phoneEmail"
@SetPassword="
showEmail = false;
showSpd = true;
"
></email-login>
<!-- 设置密码模块 -->
<set-password v-if="showSpd" @showLogin="showLogin"></set-password>
</div>
</div>
</div>
</template>
<script>
import SetPassword from "@/components/signin/setPassword.vue";
import PhoneLogin from "@/components/signin/phoneLogin.vue";
import EmailLogin from "@/components/signin/emailLogin.vue";
export default {
data() {
return {
showSpd: false, //设置密码
showPlg: true, //手机登录
showEmail: false, // 邮箱登录
};
},
components: {
SetPassword,
PhoneLogin,
EmailLogin,
},
computed: {
getType: function () {
return this.$store.state.businessType;
},
},
methods: {
showLogin() {
this.showSpd = false;
if (this.getType === 0 || this.getType === 1) {
this.showPlg = true;
} else {
this.showEmail = true;
}
},
// 切换至email登录
changeEmail() {
this.showEmail = true;
this.showPlg = false;
},
// 切换至手机登录
phoneEmail() {
this.showEmail = false;
this.showPlg = true;
},
},
};
</script>
<style lang="less" scoped>
.sign-in {
position: relative;
background: #ececec;
}
.img {
position: absolute;
left: 26px;
top: 14px;
width: 125px;
height: 32px;
background: url("../images/SigIn/logo.png") no-repeat center;
background-size: 100% 100%;
}
.fixed {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 895px;
box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.07);
}
.sign-in-box {
width: 443px;
height: 554px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
padding: 0 26px;
float: left;
position: relative;
}
.background-left {
background: url("../images/SigIn/login_bg.png") no-repeat center;
background-size: 100% 100%;
float: left;
background-color: #faf8fd;
height: 554px;
width: 400px;
}
</style>
\ No newline at end of file
src/entry/boe/views/template/editTemplate.vue 0 → 100644
View file @ 7bc06a30
<template>
<div class="add_template">
<!-- 提示用语 -->
<!-- <div class="add-template__confirm" v-if="returnConfirm">
<div class="template-confirm__center">
<div class="confirm-left">
<i class="iconfont icongantanhao-xianxingyuankuang"></i>
<p>您还未保存，返回后信息不会保存。</p>
</div>
<div class="confirm-btn" @click="gogo">继续返回</div>
</div>
<i class="iconfont iconjiufuqianbaoicon08" @click="backCancel"></i>
</div>-->
<!-- end -->
<div class="add_template__center">
<div
class="col_left"
:class="{ col_left_full: !isShowBar }"
@click="onCancelSelected"
>
<header class="header">
<button class="header-btn_back" @click="back">
<i class="iconfont iconZUO1 header-btn_back-icon"></i>
<span class="header-btn_back-text">返回</span>
</button>
<name-editor
class="header-title"
:operation="!ShowPastData"
v-model="templateName"
ref="editor"
>
<!-- 新增三个按钮 -->
<div class="header-btnbox" v-if="!ShowPastData">
<div class="header-btnbox__btn" @click="UpperChain">
<span> <i class="iconfont iconshanglian"></i> </span>上链
</div>
<div class="header-btnbox__btn" @click="SelectTemplate">
<span> <i class="iconfont iconxuanzemoban"></i> </span>选择模板
</div>
<div
class="header-btnbox__btn"
@click="uploadBanner"
v-if="existingEvidenceList.length < 1"
>
<span> <i class="iconfont iconshenglvehao1"></i> </span
>上传banner图
</div>
</div>
</name-editor>
<!-- 增量数据列表 -->
<ul class="existing-evidence" v-if="existingEvidenceList">
<li
:class="{ 'existing-evidence__list': item.id === checkId }"
v-for="(item, index) in existingEvidenceList"
:key="index"
@click="DataHandover(item, index)"
>
{{ item.name }}
<i
class="iconfont iconwsmp-bianji"
v-show="item.status === 0"
></i>
</li>
</ul>
</header>
<read-only :displayData="displayData"></read-only>
<main class="main_container" v-if="!ShowPastData">
<add-level1-button
v-if="rootUnitList.length === 0"
@click="showAddRootDialog"
title="点击添加"
class="main-btn_add_l1_center"
/>
<div class="main-template_wrapper">
<div>
<root-unit
v-for="item in rootUnitList"
:unit="item"
@del="deleteItem"
@addNextlevel="showAddChildDialog"
@modifyTitle="modifyTitleShow"
:selectedItem="selectedEditItem"
@selected="handleSelectedProperty"
@modifyForms="modifyFormsShow = true"
:key="item.id"
/>
</div>
<div class="mask"></div>
<footer class="main-footer" v-if="rootUnitList.length !== 0">
<add-level1-button @click="showAddRootDialog" />
</footer>
<div class="main-top-btn-zone">
<div
@click="save(saveState)"
class="richTextShow_btn"
:class="{ 'richTextShow_btn--focus': personalTemplateId !== 0 }"
>
<i class="iconfont iconbaocun-"></i>
保存存证
</div>
<div
class="richTextShow_btn"
@click="SaveTemplate(TemplateType)"
:class="{
'richTextShow_btn--focus':
$route.query.systemTemplateId ||
$route.query.personalTemplate,
}"
>
<i class="iconfont iconbaocun-"></i>
保存模板
</div>
</div>
</div>
</main>
</div>
<!-- 右侧 -->
<div class="col_right" v-if="!ShowPastData">
<set-bar
v-show="isShowBar"
class="col_right-bar"
@add-child="showAddChildDialog"
:selectTarget="selectedEditItem"
@select-type="changeType"
@delete="deleteItem"
></set-bar>
<div
class="col_right-switch"
ref="col_right_switch"
@click="isShowBar = !isShowBar"
>
<i
class="iconfont iconxiangxia col_right-switch-icon"
:class="{ 'js-col_right-switch-icon_left': !isShowBar }"
></i>
</div>
</div>
</div>
<!-- 添加一级标题弹窗 -->
<add-root-dialog
v-if="isShowAddRootDialog"
@close="isShowAddRootDialog = false"
@confirm="addRootUnit"
></add-root-dialog>
<!-- 子级标题添加弹窗 -->
<add-child-dialog
v-if="isShowAddChildDialog"
@close="isShowAddChildDialog = false"
@confirm="confirmAddChild"
></add-child-dialog>
<!-- 选择模板弹窗 -->
<common-dialog
v-if="SelectTemplateShow"
@closePopup="SelectTemplateShow = false"
showMask
class="template-popup__style"
>
<template-popup @Determine="Determine"></template-popup>
</common-dialog>
<!-- 上链弹窗 -->
<div class="chain-dialog" v-show="isShowToChainDialog">
<div class="chain-mask" @click="isShowToChainDialog = false"></div>
<div class="chain-content">
<i
class="iconfont iconjiufuqianbaoicon08"
@click="isShowToChainDialog = false"
></i>
<img src="../../../../assets/images/category/chain_notice.png" />
<div class="part-bottom">
<h3>上链提示</h3>
<p class="line-one">
信息上链后，即将展示在区块链上以作永恒记录，如有虚假，
</p>
<p class="line-two">登记⽅需⾃愿承担由此产⽣的⼀切后果。</p>
<div class="chain-btn" @click="uploadConfirm">确定上链</div>
</div>
</div>
</div>
<!-- banner部分 -->
<common-dialog
v-if="isShowBanner"
@closePopup="isShowBanner = false"
showMask
class="style-ShowReduction"
>
<banner
:TemplateId="personalTemplateId"
:incrementId="incrementId"
@closeBanner="closeBanner"
/>
</common-dialog>
<!-- 修改标题 -->
<common-dialog
v-if="isModifyTitleShow"
@closePopup="isModifyTitleShow = false"
showMask
>
<modify-title
:selectedEditItem="selectedEditItem"
@close="isModifyTitleShow = false"
></modify-title>
</common-dialog>
<!-- 改变形式 -->
<common-dialog
v-if="modifyFormsShow"
@closePopup="modifyFormsShow = false"
showMask
>
<modify-presentation
:selectedEditItem="selectedEditItem"
@select-type="changeType"
@cancel="modifyFormsShow = false"
></modify-presentation>
</common-dialog>
<uncertified
v-if="showUncertified"
@confirm="showUncertified = false"
@cancel="UncertifiedConfirm"
></uncertified>
<common-dialog
v-if="ClassificationPopups"
@closePopup="ClassificationPopups = false"
showMask
>
<choose-classification
@successCallback="successCallback"
@close="ClassificationPopups = false"
/>
</common-dialog>
<!-- 引导页 -->
<!-- <common-dialog close class="dg-guide" v-if="showGuide">
<guide @close="showGuide=false" :stepIndex="stepIndex"></guide>
</common-dialog>-->
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { formatTemplateApi2Local, formatApiJson } from "@/plugins/Template";
import { PropertyType } from "@/plugins/types";
import { Property, Unit, ResUploadFiles } from "@/plugins/types2";
import { GO_URLS } from "@/config/URLS";
import { ImageInfo, ImageItem } from "@/utils/app/AddProductTypes";
import CommonDialog from "@/components/CommonDialog.vue";
import NameEditor from "@/components/NameEditor.vue";
import ReadOnly from "@/views/template/readOnly.vue"; // 回显
import AddLevel1Button from "@/components/editTemplate/AddLevel1Button.vue";
import SetBar from "@/components/editTemplate/SetBar.vue";
import RootUnit from "@/components/editTemplate/RootUnit.vue";
import ModifyPresentation from "@/components/editTemplate/ModifyPresentation.vue"; //修改表现形式
import banner from "../../components/banner.vue";
import TemplatePopup from "@/views/template/TemplatePopup.vue";
import AddChildDialog from "@/components/editTemplate/AddChildDialog.vue"; //添加下一级
import AddRootDialog from "@/components/editTemplate/AddRootDialog.vue";
import ModifyTitle from "@/components/editTemplate/ModifyTitle.vue"; //修改标题
// 未认证提示组件
import Uncertified from "@/components/Uncertified.vue";
import ChooseClassification from "@/components/editTemplate/ChooseClassification.vue";
// import guide from "@/views/template/AddTemplate/guide.vue";
@Component({
components: {
NameEditor,
CommonDialog,
ReadOnly,
AddLevel1Button,
RootUnit,
SetBar,
ModifyPresentation,
banner,
TemplatePopup,
AddChildDialog,
AddRootDialog,
ModifyTitle,
Uncertified,
ChooseClassification,
// guide
},
})
export default class editTemplate extends Vue {
public isShowAddChildDialog: boolean = false; // 子级添加弹窗
public selectedEditItem: Unit | Property | null = null; // 选中编辑的项
public isShowBar: boolean = false; // 展开右栏
public isShowBanner = false; //banner图组件显示or隐藏
public SelectTemplateShow: Boolean = false; // 选择模板显示or隐藏
public personalTemplateId: number = 0; //个人存证id
public saveState: Number = 0; // 保存存证需要的状态
public ShowPastData: Boolean = false; // 显示过往数据
public isShowToChainDialog: Boolean = false; //控制上链弹窗显示or隐藏
public rootUnitList: Unit[] = []; // 一级单元
public templateName: string = ""; // 模板名称
public isInActive: boolean = false; //防抖
public localData: string = ""; //本地化note数据
public isModifyTitleShow: Boolean = false; //修改标题
public modifyFormsShow: Boolean = false; // 改变表现形式
public existingEvidenceList: any = []; //增量数据列表
public checkId: number = -1;
public incrementId: number = 0;
public isShowAddRootDialog: boolean = false;
public displayData: any = [];
public TemplateType: number = 0;
public showUncertified: Boolean = false;
public ClassificationPopups: boolean = false;
public MemoryCardType: String = ""; //存证类型
// 系统模板>建立个人模板or建立存证
// 个人模板>建立存证or更新模板
// 建立存证>保存存证or保存模板
@Watch("templateName")
public onChange(newVal: number, oldVal: number) {
if (
this.existingEvidenceList[0] &&
this.checkId !== this.existingEvidenceList[0].id
)
return false;
if (this.existingEvidenceList.length > 0 && !this.ShowPastData)
this.existingEvidenceList[0].name = newVal;
}
public created() {
// 取值
const query = this.$route.query;
if (query.personalTemplate) {
this.gettemplate(query.personalTemplate);
this.TemplateType = 1;
} else if (query.systemTemplateId) {
// 模板进入
this.gettemplate(query.systemTemplateId);
} else if (query.personalTemplateId && !query.childId) {
// 个人存证进入
this.personalTemplateId = Number(query.personalTemplateId);
this.checkId = Number(query.personalTemplateId);
this.information(3);
this.saveState = 1;
// 父存证>进入页面>获取数据>根据参数决定是否调用增量列表接口
} else if (
query.personalTemplateId &&
query.childId &&
query.personalTemplateName
) {
this.personalTemplateId = Number(query.personalTemplateId);
this.checkId = Number(query.childId);
this.incrementId = Number(query.childId);
this.saveState = 2;
this.information(1);
}
}
// 更新个人模板
public async SaveTemplate(key: number) {
switch (key) {
case 0:
// 创建个人模板
this.CreateTemplate();
break;
case 1:
// 更新个人模板
this.updateCustomize();
break;
default:
break;
}
}
public async successCallback(val: number) {
var newrout = formatApiJson(this.rootUnitList);
for (let index = 0; index < newrout.length; index++) {
const element = newrout[index];
if (element.label === "ext") {
newrout.splice(index, 1);
}
}
const res = await this.$ajax({
type: "post",
url: GO_URLS.customize,
params: {
folder_id: val,
name: this.templateName,
info: this.templateName,
detail: JSON.stringify(newrout),
},
});
if (res) {
this.$message({
message: "创建成功",
type: "success",
});
this.$router.push({
path: "/categoryManage",
query: { type: "MyTemplate" },
});
}
}
// 创建个人模板
public async CreateTemplate() {
this.ClassificationPopups = true;
}
// 更新个人模板
public async updateCustomize() {
await this.fileHandler();
const res = await this.$ajax({
type: "put",
url: GO_URLS.updateCustomize,
params: {
id: Number(this.$route.query.personalTemplate),
name: this.templateName,
detail: JSON.stringify(formatApiJson(this.rootUnitList)),
},
});
if (res) {
this.$message({
message: "更新成功",
type: "success",
});
this.$router.push({
path: "/categoryManage",
query: { type: "MyTemplate" },
});
}
}
// 获取基础信息
public async information(state: number) {
const res = await this.$ajax({
type: "get",
params: {
id: this.personalTemplateId,
},
url: GO_URLS.proof,
});
if (res) {
// 第一步
this.templateName = res.data.name;
if (state === 1 || state === 0) {
// 增量存证进入，先获取所有的增量存证列表，再获取当前增量存证数据
await this.expandTheList(res.data.hash);
this.getincrement(this.checkId);
} else if (state === 2) {
// 切换至原始存证的数据
this.displayData = res.data.detail;
} else if (state === 3) {
this.localData = res.data.note;
// 存证进入，可能有增量，可能无增量
if (
res.data.status === 2 ||
res.data.status === 4 ||
res.data.status === 5 ||
res.data.status === 6
) {
this.displayData = res.data.detail;
this.ShowPastData = true;
if (res.data.increment_num > 0) {
this.expandTheList(res.data.hash);
}
} else {
if (res.data.detail !== "") {
this.rootUnitList = formatTemplateApi2Local(
JSON.parse(res.data.detail)
);
} else {
this.rootUnitList = [];
}
}
}
}
}
// 获取增量的数据
public async getincrement(id: number) {
const res = await this.$ajax({
type: "get",
url: GO_URLS.incrementId + `/` + id,
});
if (res) {
// 第三步
if (
res.data.status === 2 ||
res.data.status === 4 ||
res.data.status === 5 ||
res.data.status === 6
) {
this.ShowPastData = true;
this.templateName = res.data.name;
this.displayData = res.data.detail;
} else {
this.ShowPastData = false;
this.templateName = res.data.name;
this.localData = res.data.note;
if (res.data.detail !== "") {
this.rootUnitList = formatTemplateApi2Local(
JSON.parse(res.data.detail)
);
} else {
this.rootUnitList = [];
}
}
}
}
// 关闭banner图设置窗口
public closeBanner(val: string) {
this.isShowBanner = false;
if (val) {
if (this.localData !== "") {
var newBanner = JSON.parse(this.localData);
newBanner.banners = JSON.parse(val);
this.localData = JSON.stringify(newBanner);
}
}
}
// 设置banner图
public uploadBanner() {
this.isShowBanner = true;
}
// 获取模板
public async gettemplate(id: any) {
const res = await this.$ajax({
type: "get",
url: GO_URLS.getSystemTemplate,
params: {
id: id,
},
});
if (res) {
// 获取模板数据
this.templateName = res.data.name;
this.MemoryCardType = res.data.name;
if (res.data.detail)
this.rootUnitList = formatTemplateApi2Local(
JSON.parse(res.data.detail)
);
}
}
// 保存存证
public save(key: number) {
switch (key) {
case 0:
this.addTemplate();
break;
case 1:
this.updateTemplate();
break;
case 2:
this.updateIncremental();
break;
default:
break;
}
}
// 更新增量存证
public async updateIncremental() {
await this.fileHandler();
var newDetail = new Array();
newDetail = formatApiJson(this.rootUnitList);
// 更新ext数据
for (let index = 0; index < newDetail.length; index++) {
const element = newDetail[index];
if (element.label === "ext") {
for (let index2 = 0; index2 < element.data.length; index2++) {
const element2 = element.data[index2];
if (element2.label === "存证名称") {
element2.data.value = this.templateName;
} else if (
element2.label === "存证类型" &&
this.MemoryCardType !== ""
) {
element2.data.value = this.MemoryCardType;
}
}
if (index === 0) {
newDetail.push(newDetail.shift());
}
}
}
if (JSON.parse(this.localData).stepName !== this.templateName) {
var newdata = JSON.parse(this.localData);
newdata.stepName = this.templateName;
this.localData = JSON.stringify(newdata);
}
const res = await this.$ajax({
type: "put",
url: GO_URLS.incrementId + `/` + this.incrementId,
params: {
detail: JSON.stringify(newDetail),
id: this.incrementId,
name: this.templateName,
note: this.localData,
},
});
if (res) {
this.$message({
message: "编辑成功",
type: "success",
});
this.$router.push("/categoryManage");
}
}
// 更新普通存证
public async updateTemplate() {
await this.fileHandler();
var newDetail = new Array();
newDetail = formatApiJson(this.rootUnitList);
// return
// 更新ext数据
for (let index = 0; index < newDetail.length; index++) {
const element = newDetail[index];
if (element.data && element.data.length === 0) {
newDetail.splice(index, 1);
}
if (element.label === "ext") {
for (let index2 = 0; index2 < element.data.length; index2++) {
const element2 = element.data[index2];
if (element2.label === "存证名称") {
element2.data.value = this.templateName;
} else if (
element2.label === "存证类型" &&
this.MemoryCardType !== ""
) {
element2.data.value = this.MemoryCardType;
}
}
if (index === 0) {
newDetail.push(newDetail.shift());
}
}
}
if (JSON.parse(this.localData).evidenceName !== this.templateName) {
var newdata = JSON.parse(this.localData);
newdata.evidenceName = this.templateName;
this.localData = JSON.stringify(newdata);
}
const res = await this.$ajax({
type: "put",
url: GO_URLS.update,
params: {
id: Number(this.$route.query.personalTemplateId),
name: this.templateName,
detail: JSON.stringify(newDetail),
note: this.localData,
},
});
if (res) {
this.$message({
message: "编辑成功",
type: "success",
});
this.$router.push("/categoryManage");
}
}
// 模板>新存证
public async addTemplate() {
await this.fileHandler();
let newext = {
label: "ext",
key: "",
type: 3,
data: [
{
data: {
type: "text",
format: "string",
value: this.templateName,
},
type: 0,
key: "存证名称",
label: "存证名称",
},
{
data: {
type: "text",
format: "hash",
value: "null",
},
type: 0,
key: "basehash",
label: "basehash",
},
{
data: {
type: "text",
format: "hash",
value: "null",
},
type: 0,
key: "prehash",
label: "prehash",
},
{
data: {
type: "text",
format: "string",
value: this.MemoryCardType,
},
type: 0,
key: "存证类型",
label: "存证类型",
},
],
};
var newDetail = new Array();
newDetail = formatApiJson(this.rootUnitList);
newDetail.push(newext);
const res = await this.$ajax({
type: "post",
url: GO_URLS.add,
params: {
name: this.templateName,
detail: JSON.stringify(newDetail),
note: JSON.stringify({
version: 1,
userName: this.$store.state.userInfos.user || "",
userIcon: this.$store.state.userInfos.icon || "",
evidenceName: this.templateName,
stepName: "",
banners: [],
}),
},
});
if (res) {
this.$message({
message: "创建成功",
type: "success",
});
this.$router.push("/categoryManage");
}
}
// 展示修改标题弹窗
public modifyTitleShow() {
this.isModifyTitleShow = true;
}
// 新增增量数据列表的请求
async expandTheList(hash: string) {
const res = await this.$ajax({
type: "post",
url: GO_URLS.incrementList,
params: {
base_hash: hash,
page: 1,
page_size: 10,
},
});
if (res) {
// 第二步
var firstData = {
name: this.templateName,
id: this.personalTemplateId,
hash: hash,
};
res.data.results.push(firstData);
this.existingEvidenceList = res.data.results;
for (let index = 0; index < this.existingEvidenceList.length; index++) {
const element = this.existingEvidenceList[index];
if (this.checkId === element.id) {
this.templateName = element.name;
}
}
}
}
// 切换数据显示
public DataHandover(item: any, index: number) {
if (item.status === 1) return false;
if (this.checkId === item.id) return false;
this.checkId = item.id;
// this.templateName = item.name;
if (this.existingEvidenceList.length - index > 1) {
// 切换至增量数据
let child: any = this.$refs["editor"];
child.startEdit();
this.displayData = [];
this.incrementId = item.id;
this.personalTemplateId = 0;
this.getincrement(item.id);
this.saveState = 2;
} else {
// 切换至第一条数据
this.personalTemplateId = item.id;
this.incrementId = 0;
this.ShowPastData = true;
this.saveState = 1;
this.information(2);
}
}
// 切换模板
public async Determine(val: number) {
this.SelectTemplateShow = false;
const data = await this.$ajax({
type: "get",
params: {
id: val,
},
url: GO_URLS.getSystemTemplate,
});
if (data && data.data.detail) {
this.MemoryCardType = data.data.name;
if (this.rootUnitList.length === 1) {
this.rootUnitList.push(
...formatTemplateApi2Local(JSON.parse(data.data.detail))
);
} else {
for (let index = 0; index < this.rootUnitList.length; index++) {
const element = this.rootUnitList[index];
if (element.title === "ext") {
var newroot = this.rootUnitList.splice(index, 1);
this.rootUnitList = [];
this.rootUnitList.push(
...formatTemplateApi2Local(JSON.parse(data.data.detail))
);
this.rootUnitList.push(newroot[0]);
}
}
}
}
}
// 选择模板
public SelectTemplate() {
this.SelectTemplateShow = true;
}
// 上链请求
async uploadConfirm() {
this.incrementId === 0
? this.witnessTheChain()
: this.incrementWitnessTheChain();
}
async incrementWitnessTheChain() {
if (this.isInActive) return;
this.isInActive = true;
const res = await this.$ajax({
type: "post",
url: GO_URLS.sendBlockIncrementChain,
params: { id: this.incrementId },
});
if (res) {
this.$message({
type: "success",
message: "上链信息提交成功!",
});
this.isShowToChainDialog = false;
this.$router.push("/categoryManage");
}
this.isInActive = false;
}
// 存证上链
async witnessTheChain() {
if (this.isInActive) return;
this.isInActive = true;
const res = await this.$ajax({
type: "post",
url: GO_URLS.sendBlockChian,
params: { id: this.personalTemplateId },
});
if (res) {
// this.getList();
this.$message({
type: "success",
message: "上链信息提交成功!",
});
this.isShowToChainDialog = false;
this.$router.push("/categoryManage");
}
this.isInActive = false;
}
// 上链
async UpperChain() {
const res = await this.$ajax({
type: "get",
url:
GO_URLS.user +
`/` +
JSON.parse(String(sessionStorage.getItem("user"))).id,
});
if (res) {
if (res.data.auth_suc === 1) {
this.isShowToChainDialog = true;
} else {
this.showUncertified = true;
}
}
}
// 跳转个人中心
UncertifiedConfirm() {
this.$router.push("/userCenter");
}
// 返回确认框
public back() {
this.$router.go(-1);
}
// 打开一级标题添加
public showAddRootDialog() {
this.isShowAddRootDialog = true;
}
// 选中效果去除
public handleSelectedProperty(item: Unit | Property) {
this.selectedEditItem = item;
}
// 右侧变更触发
public changeType(val: PropertyType) {
(this.selectedEditItem as Property).type = val;
(this.selectedEditItem as Property).value = "";
}
/**
* 点击添加下一级
*/
public showAddChildDialog() {
this.isShowAddChildDialog = true;
}
// 删除子级
public deleteItem() {
const target = this.selectedEditItem;
if (target) {
let list = target.parent ? target.parent.children : this.rootUnitList;
const index = list.indexOf(target);
if (index > -1) {
list.splice(index, 1);
}
//删除干净之后
if (list.length == 0) {
if (target && target.parent && target.parent.parent) {
let justIdx = target.parent.parent.children.indexOf(target.parent);
Vue.set(
target.parent.parent.children,
justIdx,
new Property(target.parent.title, "", target.parent.parent)
);
}
}
}
}
// 子级添加回调
public confirmAddChild(name: string[]) {
const target = this.selectedEditItem;
if (target) {
const newTarget =
target instanceof Property
? target.parent.changeChild2Unit(target)
: target;
name.forEach((item) => {
newTarget.addInputChildren(item);
});
}
}
// 一级标题成功之后的回调
public addRootUnit(title: string) {
this.rootUnitList.push(new Unit(title));
}
// 点击空白部分触发
public onCancelSelected() {
// 清空选中数据
this.selectedEditItem = null;
}
/**
* 获取需要上传的文件数组和对应的对应的本地图片对象数组
*/
private getFiles(apiUnits: any[]) {
let files: File[] = [];
let fileInfos: ImageInfo[] = [];
apiUnits.forEach((l1) => {
l1.children.forEach((l2: any) => {
if (l2.type === PropertyType.Image) {
let dd = Array.from(l2.value);
if (dd) {
(dd as ImageItem[]).forEach((img) => {
if (img.file) {
files.push(img.file);
}
});
fileInfos.push(l2);
}
}
});
});
return {
files,
fileInfos,
};
}
// 图片上传请求
private async imageUpload(formData: object) {
const res = await this.$ajax({
type: "post",
url: GO_URLS.upload + `?file_type=png`,
params: formData,
});
if (res) {
return (res as ResUploadFiles).data;
}
}
/**
*上传文件
*/
private async submitFiles(files: File[]) {
var res = [];
for (let index = 0; index < files.length; index++) {
const formData = new FormData();
const element = files[index];
formData.append("file_data", element, new Date() + ".png");
res.push(await this.imageUpload(formData));
}
if (res.length === files.length) {
return res;
}
}
public async fileHandler() {
const { files, fileInfos } = this.getFiles(this.rootUnitList);
if (files.length > 0) {
const fileItems = await this.submitFiles(files);
// files是未上传的图片数组
if (fileItems) {
//fileInfos是已有的
fileInfos.forEach((imageInfo: any) => {
//去除以前的空白元素
for (let i = imageInfo.value.length; i > -1; i--) {
if (
!imageInfo.value[i] ||
(!imageInfo.value[i].dataUrl && !imageInfo.value[i].url)
) {
imageInfo.value.splice(i, 1);
}
}
//
for (let i = 0; i < imageInfo.value.length; i++) {
let img = imageInfo.value[i];
// img已经存在,不能用这个赋值.
if (!img.url) {
let fileItems_fmt = fileItems[0] as any;
img.url = fileItems_fmt.url;
img.hash = fileItems_fmt.hash;
fileItems.splice(0, 1);
}
}
});
}
}
}
}
</script>
<style scoped lang='less'>
.style-ShowReduction {
.dialog_content {
background: none;
max-height: none;
}
}
.dg-guide {
/deep/.dialog_content {
width: 100%;
height: 100%;
box-shadow: none;
background: none;
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
transform: none;
max-height: none;
}
}
.existing-evidence {
overflow: hidden;
margin: 0;
margin-bottom: 18px;
padding: 0;
.existing-evidence__list {
color: white;
background: #3f79fe;
border: 1px solid #3f79fe;
}
li {
list-style: none;
font-size: 14px;
cursor: pointer;
font-weight: 400;
float: left;
color: #353535;
padding: 0 16px;
border: 1px solid #e3e7ed;
border-radius: 5px;
margin-right: 10px;
line-height: 34px;
i {
color: white;
}
}
}
.menu {
z-index: 100;
position: absolute;
top: 60px;
right: -32px;
margin: 0;
padding: 0;
width: 107px;
list-style: none;
background: #fff;
text-align: center;
border: 1px solid #e7e7e7;
border-radius: 2px;
}
.menu-item__one {
&::after {
content: "";
display: block;
position: absolute;
width: 10px;
height: 10px;
border-top: 1px solid #e7e7e7;
border-left: 1px solid #e7e7e7;
background: white;
top: -6px;
left: 32px;
transform: rotate(45deg);
}
&:hover {
background: rgba(242, 244, 246, 1);
&::after {
background: rgba(242, 244, 246, 1);
}
}
}
.menu-item {
line-height: 43px;
color: #797d84;
font-size: 14px;
cursor: pointer;
}
.chain-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.chain-mask {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.2;
}
.chain-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 550px;
background-color: white;
.iconjiufuqianbaoicon08 {
position: absolute;
top: -30px;
font-size: 28px;
cursor: pointer;
right: -30px;
color: rgba(0, 0, 0, 0.4);
}
}
.chain-content .part-bottom {
padding-top: 30px;
text-align: center;
}
.chain-content .part-bottom h3 {
font-size: 20px;
color: #353535;
margin-bottom: 15px;
}
.chain-content .part-bottom p {
font-size: 16px;
color: #989fa5;
// margin-bottom: 36px;
}
.chain-content .part-bottom .line-two {
margin-bottom: 36px;
}
.chain-content .part-bottom .chain-btn {
font-size: 14px;
color: white;
background-color: #3f79fe;
border-radius: 4px;
width: 120px;
height: 40px;
line-height: 40px;
cursor: pointer;
display: inline-block;
}
.add_template {
display: flex;
height: 100%;
min-height: 0;
overflow: auto;
background: white;
flex-direction: column; // 设置方向
/*隐藏滚动条，当IE下溢出，仍然可以滚动*/
-ms-overflow-style: none;
/*火狐下隐藏滚动条*/
overflow: -moz-scrollbars-none;
&::-webkit-scrollbar {
display: none;
}
.add-template__confirm {
width: 100%;
height: 40px;
max-height: 40px;
flex: 1;
background: rgba(250, 118, 67, 0.1);
position: relative;
text-align: center;
.iconjiufuqianbaoicon08 {
position: absolute;
right: 30px;
top: 50%;
font-size: 20px;
transform: translateY(-50%);
cursor: pointer;
color: #fa7640;
}
.template-confirm__center {
width: 387px;
display: inline-block;
line-height: 40px;
font-size: 16px;
font-family: PingFangSC;
font-weight: 400;
overflow: hidden;
color: rgba(252, 118, 67, 1);
.confirm-left {
float: left;
line-height: 40px;
p {
display: inline-block;
margin: 0;
padding: 0;
font-size: 16px;
vertical-align: top;
}
i {
vertical-align: top;
font-size: 20px;
margin-right: 6px;
}
}
.confirm-btn {
float: right;
width: 100px;
height: 30px;
margin-top: 5px;
cursor: pointer;
line-height: 30px;
text-align: center;
background: rgba(250, 118, 64, 1);
border-radius: 4px;
font-size: 14px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
}
}
.add_template__center {
display: flex;
flex: 1;
flex-direction: row;
}
}
.col_left {
width: calc(100% - 254px);
overflow-y: scroll; /* 超出横向滚动 ui未给出 */
scrollbar-color: transparent transparent;
}
.col_left_full {
width: 100%;
}
.col_left::-webkit-scrollbar {
/*滚动条整体样式*/
display: none;
/*高宽分别对应横竖滚动条的尺寸*/
// height: 1px;
}
.col_left::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
display: none;
}
.col_right {
position: fixed;
right: 0;
height: calc(100% - 50px);
}
.col_right--hidden {
display: none;
}
.col_right-bar {
width: 258px;
background: #fafafd;
}
.col_right-switch {
position: absolute;
top: 50%;
margin-top: -35px;
left: -17px;
width: 17px;
height: 69px;
line-height: 69px;
background: #8ca5ff;
border-radius: 7px 0 0 7px;
cursor: pointer;
}
.col_right-switch-icon {
display: inline-block;
font-size: 12px; /* 估10px */
transform: scale(0.833) rotate(90deg);
color: #fff;
}
.js-col_right-switch-icon_left {
transform: scale(0.833) rotate(-90deg);
}
.header {
padding-left: 53px;
line-height: 80px;
}
.header-btnbox {
// overflow: hidden;
font-weight: 400;
position: relative;
font-size: 12px;
line-height: 84px;
padding-left: 30px;
float: right;
.header-btnbox__btn {
&:first-child {
padding-right: 18px;
}
&:nth-child(2) {
padding-right: 18px;
}
color: #797d84;
cursor: pointer;
span {
width: 26px;
height: 26px;
display: inline-block;
border-radius: 50%;
text-align: center;
line-height: 26px;
margin-right: 4px;
background: #dadada;
i {
font-size: 12px;
color: white;
}
}
float: left;
}
}
.header-btn_back {
vertical-align: middle;
width: 110px;
height: 40px;
background: transparent;
border: 1px solid #e8e8e8;
border-radius: 22px;
outline: none;
cursor: pointer;
}
.header-btn_back-icon {
font-size: 16px; /* 有空白 */
color: #8e8e8e;
vertical-align: middle;
}
.header-btn_back-text {
vertical-align: middle;
margin-left: 5px;
font-size: 14px;
}
.header-title {
margin-left: 31px;
}
.header-select {
float: right;
margin-right: 50px;
}
.main_container {
flex: 1;
position: relative;
}
.main-btn_add_l1_center {
display: block;
width: 138px;
margin: 284px auto 0;
}
// 隐藏添加一级标题按钮
.add-level1-button--hidden {
display: none;
}
.main_upload {
margin-left: 45px;
}
// 富文本存在的情况下隐藏图片上传
.main_upload--hidden {
display: none;
}
// 富文本编辑器
.richText {
// margin-left: 45px;
margin-top: 38px;
}
.main-template_wrapper {
padding-left: 45px; /* 63 - 18 */
}
.main-footer {
height: 49px;
bottom: 49px;
width: 40px;
position: fixed;
}
.main-top-btn-zone {
position: fixed;
top: 0;
right: 338px;
z-index: 1;
overflow: hidden;
}
// 富文本编辑器保存按钮
.richTextShow_btn {
width: 96px;
height: 30px;
z-index: 99;
float: left;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
color: #757575;
margin-right: 10px;
font-family: PingFangSC;
text-align: center;
font-weight: 400;
line-height: 30px;
margin-top: 10px;
i {
font-size: 14px;
}
}
.richTextShow_btn--focus {
background: #5779f4;
color: white;
}
.btn-box {
height: 50px;
.main-top-btn_save {
float: right;
height: 50px;
line-height: 50px;
cursor: pointer;
text-align: center;
color: #757575;
font-size: 14px;
font-family: PingFangSC-Regular;
font-weight: 400;
i {
font-size: 14px;
}
}
.main-top-btn_save--one {
width: 96px;
height: 30px;
background: rgba(87, 121, 244, 1);
border-radius: 4px;
line-height: 30px;
text-align: center;
color: white;
margin-top: 10px;
}
.main-top-btn_save--two {
width: 144px;
}
.main-top-btn_save--three {
width: 120px;
}
}
.btn-box--hidden {
display: none;
}
.mask {
height: 145px;
}
.template-popup__style {
/deep/.dialog_content {
background: none;
max-height: none;
}
}
</style>
src/entry/boe/views/user/choosePackage.vue 0 → 100644
View file @ 7bc06a30
<template>
<div class="body">
<div class="content">
<div class="head">
<span class="back-button" @click="back">
<span class="i-box">
<i class="iconfont iconyidong"></i>
</span>
返回
</span>
</div>
<!-- 套餐列表 -->
<ul class="package-list" v-if="steps === 0">
<li v-for="(item, index) in thePackageList" :key="index">
<div
class="package-name"
:class="{
'package-name--A': item.level === 1,
'package-name--B': item.level === 2,
'package-name--C': item.level === 3,
'package-name--D': item.level === 4,
'package-name--E': item.level === 5,
}"
>
{{ item.name }}
</div>
<div class="VIP-level">
<div class="vip-box">
<div
class="title-box"
:class="{
'title-box--A': item.level === 1,
'title-box--B': item.level === 2,
'title-box--C': item.level === 3,
'title-box--D': item.level === 4,
'title-box--E': item.level === 5,
}"
>
VIP{{ item.level }}
<div
class="icon-box"
:class="{
'icon-box--A': item.level === 1,
'icon-box--B': item.level === 2,
'icon-box--C': item.level === 3,
'icon-box--D': item.level === 4,
'icon-box--E': item.level === 5,
}"
>
<i class="iconfont iconshoucang"></i>
</div>
</div>
</div>
</div>
<p class="number number--A">
{{ item.chain_times }}
<span>次</span>
</p>
<p class="price">
价格：
<span>{{ item.price }}</span
>元人民币
</p>
<p class="average-price">上链均价：{{ item.chain_price }}</p>
<div class="buy">
<div class="buy-button" @click="buyNow(item)">立即购买</div>
</div>
</li>
</ul>
<!-- 提示 -->
<div class="tip-box" v-if="steps === 0">
<p>提示：</p>
<p>
1、由于BEST的价格波动性，所以充值数量为估算，具体金额根据当前交易时间BEST的市值来计算；
</p>
<p>
2、燃料充值年费说明：开通年费会员后，充值的套餐有效期一年，隔年自动作废，请尽快使用；
</p>
<p>
3、套餐选购：按需购买套餐，套餐金额越大，单价越低，根据您的上链数量进行选购；
</p>
<p>
4、由于BEST的市场价值波动，避免账户大量囤积，账户的上链次数使用完才能进行下一次充值；
</p>
<p>
5、充值未完成时请不要切换账户，或者退出，否则可能出现充值不到账的情况；
</p>
</div>
<!-- 订单列表 -->
<div v-if="steps === 1">
<div class="order-box">
<div class="order-box-top">
<div class="order-box-left">
<div class="icondingdanshijian2x-box">
<i class="iconfont icondingdanshijian2x"></i>
</div>
</div>
<div class="order-box-right">
<p class="prompt-order">
您的订单已提交成功，现在只差最后一步啦！
</p>
<p class="the-order-no">订单编号：{{ orderId }}</p>
</div>
</div>
<p class="amount-payable">
应付金额：
<span>￥{{ price }}.00</span> 元
</p>
</div>
<div class="method-payment">
<p class="title">支付方式</p>
<ul>
<li
v-for="(item, index) in PaymentList"
:key="index"
:class="{ check: index === activeIndex }"
@click="choose(item, index)"
>
<img :src="item.s_image_url" />
<div class="selected" v-if="index === activeIndex">
<i class="iconfont iconxuanzhong"></i>
</div>
</li>
</ul>
<div class="button" @click="determinePay">去支付</div>
</div>
<p class="warm-prompt">
温馨提示：所有套餐都是年费套餐，超过一年剩余的套餐将会被清零，详情请
<span class="contact-customer-service">联系客服</span>
<span class="customer-service-WeChat">
<p class="title">客服微信</p>
<span class="imgbox">
<img src="../../images/Home/qr.png" alt />
</span>
<p class="tip">扫一扫添加客服微信号</p>
</span>
</p>
</div>
<!-- 步骤三 -->
<div v-if="steps === 2">
<div class="top-box">
<div
class="bg-box"
v-if="this.PaymentList[this.activeIndex].type === 1"
></div>
<div
class="bg-box--other"
v-if="this.PaymentList[this.activeIndex].type === 2"
:style="bg"
></div>
<div>
<p>
距离二维码过期还剩 <span>{{ times }}S</span>
</p>
<div class="right">订单编号：{{ orderId }}</div>
</div>
</div>
<div
class="money-box"
v-if="this.PaymentList[this.activeIndex].type === 1"
>
应付金额：<span>￥{{ price }}.00</span> 元
</div>
<!-- -->
<div
class="money-box"
v-if="this.PaymentList[this.activeIndex].type === 2"
>
应付{{ this.PaymentList[this.activeIndex].coin }}：<span>{{
price
}}</span>
个
</div>
<div class="Qr-code">
<img :src="payUrl" />
</div>
<div
class="prompt-box"
v-if="this.PaymentList[this.activeIndex].type === 1"
>
<div class="left">
<i class="iconfont iconsaoma"></i>
</div>
<div class="right">
<p>请使用微信扫一扫</p>
<p>扫描二维码支付</p>
</div>
</div>
<div
class="prompt-box prompt-box--blue"
v-if="this.PaymentList[this.activeIndex].type === 2"
>
<div class="left">
<i class="iconfont iconsaoma"></i>
</div>
<div class="right">
<p>请使用HD钱包扫一扫</p>
<p>扫描二维码支付</p>
</div>
</div>
<div
class="download"
v-if="this.PaymentList[this.activeIndex].type === 2"
>
<a href="https://d.honordecent.com/" target="_blank"
>HD钱包下载地址： https://d.honordecent.com/</a
>
</div>
<div
class="top-up-hints"
v-if="this.PaymentList[this.activeIndex].type === 2"
>
<span>提示：</span>
实际到账时间取决于区块链确认速度，大概需要5-30分钟时间。
</div>
</div>
</div>
<common-dialog showMask v-if="PromptShow" @closePopup="PromptShow = false">
<prompt
tip="您的账户还很充足奥~请剩余少量余额时在进行充值"
@close="PromptShow = false"
/>
</common-dialog>
</div>
</template>
<script>
import {
packageList,
pay,
orderType,
getMethods,
} from "@/views/userCenter/Api.service";
import { payQR } from "@/utils/app/common";
import { GO_URLS } from "@/config/URLS";
import { getLoginCode } from "@/plugins/storage";
import CommonDialog from "@/components/CommonDialog.vue";
import prompt from "@/components/userCenter/prompt.vue";
export default {
data() {
return {
thePackageList: [],
steps: 0, //步骤
price: 0,
orderId: 0,
payUrl: "",
time: 18,
isclick: true,
PromptShow: false,
PaymentList: [], // 支付方式列表
activeIndex: 0,
times: 180,
};
},
components: {
CommonDialog,
prompt,
},
created() {
this.getlist();
this.Payment();
if (this.$route.query.charset) {
this.back();
}
},
computed: {
bg() {
return (
"background-image:url('" +
this.PaymentList[this.activeIndex].s_image_url +
"')"
);
},
},
methods: {
//
// 倒计时
reduce() {
this.timeID = setInterval(() => {
this.times--;
if (this.times === 0) {
clearInterval(this.timeID);
}
}, 1000);
},
// 确定支付
determinePay() {
if (this.PaymentList[this.activeIndex].type === 0) {
// 支付宝
this.PaymentOrder(this.PaymentList[this.activeIndex].type);
} else if (this.PaymentList[this.activeIndex].type === 1) {
// 微信
this.WeChatPay(this.PaymentList[this.activeIndex].type);
this.steps = 2;
this.reduce();
} else if (this.PaymentList[this.activeIndex].type === 2) {
// 币钱包支付
this.OtherPayment(
this.PaymentList[this.activeIndex].type,
this.PaymentList[this.activeIndex].coin
);
this.steps = 2;
this.reduce();
}
},
async OtherPayment(type, coin) {
const res = await pay({
coin: coin,
device: 0,
id: this.orderId,
method: type,
return_url: window.location.href,
});
if (res) {
this.cycle();
this.price = JSON.parse(res.data.pay_url).amount / 100000000;
if (res.data.pay_url) this.payUrl = await payQR(res.data.pay_url);
}
},
choose(item, index) {
this.activeIndex = index;
},
// 查询订单状态
async getOrder() {
const res = await orderType(this.orderId);
if (res) {
if (res.data.status === 2) {
clearInterval(this.intervalHandle);
clearInterval(this.timeID);
this.$message({
message: "恭喜您支付成功",
type: "success",
});
this.$router.push({
path: "/userCenter",
});
}
}
},
// 倒计时
cycle() {
this.intervalHandle = setInterval(() => {
if (this.time > 0) {
this.time--;
this.getOrder();
} else {
clearInterval(this.intervalHandle);
this.$router.push({
path: "/userCenter",
});
}
}, 10000);
},
// 微信支付
async WeChatPay(type) {
const res = await pay({
device: 0,
id: this.orderId,
method: type,
return_url: window.location.href,
});
if (res) {
this.cycle();
this.payUrl = await payQR(res.data.pay_url);
}
},
// 支付宝支付
async PaymentOrder(type) {
if (!this.isclick) return;
this.isclick = false;
const res = await pay({
device: 0,
id: this.orderId,
method: type,
return_url: window.location.href,
});
if (res) {
this.isclick = true;
this.cycle();
window.open(res.data.pay_url);
}
},
// 购买套餐
async buyNow(item) {
this.price = item.price;
this.addOrder(item.id);
},
// 获取所有支付方式列表
async Payment() {
const res = await getMethods();
if (res) this.PaymentList = res.data.pay_methods;
},
// 新增订单
async addOrder(id) {
var xhr = new XMLHttpRequest();
var url = GO_URLS.addOrder;
let data = {
plan_id: id,
};
let token = "Bearer " + getLoginCode();
xhr.open("post", url, true);
xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
xhr.setRequestHeader("Authorization", token);
xhr.onload = this.uploadComplete; //请求完成、
xhr.onerror = this.uploadFailed; //请求失败
xhr.send(JSON.stringify(data));
},
uploadComplete(xhr) {
//返回的结果
const res = JSON.parse(xhr.target.response);
if (res.code === 10603) {
this.PromptShow = true;
} else if (res.code === 200) {
this.orderId = res.data.id;
this.steps = 1;
} else if (res.code == 403) {
this.$message({
message: "登录过期,请刷新页面",
type: "warning",
});
sessionStorage.removeItem("user");
router.push({ path: "/" });
}
},
uploadFailed(xhr) {
this.$message({
message: "网络异常",
type: "error",
});
},
// 返回上个操作，删除所有定时器
back() {
clearInterval(this.intervalHandle);
clearInterval(this.timeID);
this.$router.push({ path: "/userCenter" });
},
async getlist() {
const res = await packageList();
if (res) {
this.thePackageList = res.data.results;
}
},
},
};
</script>
<style lang="less" scoped>
.body {
min-width: 1000px;
padding: 16px 21px 56px 19px;
background: rgba(248, 250, 251, 1);
}
.content {
background: white;
padding-left: 28px;
height: 755px;
padding-right: 38px;
}
.head {
padding-top: 20px;
padding-bottom: 36px;
}
.top-box {
height: 65px;
background: #f9f9f9;
border-radius: 4px;
line-height: 65px;
p {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #353535;
display: inline-block;
span {
color: #f3322d;
}
}
.right {
float: right;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #797d84;
margin-right: 44px;
}
}
.money-box {
text-align: center;
margin-top: 62px;
height: 30px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #353535;
line-height: 20px;
margin-bottom: 17px;
span {
color: #ff3838;
font-size: 22px;
}
}
.Qr-code {
width: 187px;
height: 187px;
margin: 0 auto;
border: 1px solid #000;
img {
width: 100%;
}
}
.prompt-box {
width: 196px;
height: 49px;
background: #60cd48;
margin: 0 auto;
margin-top: 11px;
color: white;
.left {
float: left;
height: 100%;
line-height: 49px;
margin-left: 31px;
i {
font-size: 24px;
}
}
.right {
float: left;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
height: 49px;
color: #ffffff;
margin-left: 13px;
P {
&:first-child {
padding-top: 7px;
padding-bottom: 4px;
}
}
}
}
.prompt-box--blue {
background: #3f79fe;
}
.download {
text-align: center;
margin-top: 12px;
margin-bottom: 30px;
height: 17px;
cursor: pointer;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #353535;
line-height: 17px;
}
.top-up-hints {
width: 435px;
height: 45px;
background: #f5f9fc;
border-radius: 4px;
line-height: 45px;
margin: 0 auto;
text-align: center;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #797d84;
span {
color: #462f2e;
}
}
.bg-box {
width: 150px;
margin-right: 57px;
height: 34px;
float: left;
margin-top: 15px;
margin-left: 96px;
background: url("../../../../assets/images/userCenter/WeChat.png") no-repeat
center;
}
.bg-box--other {
width: 160px;
margin-right: 57px;
height: 34px;
float: left;
margin-top: 15px;
margin-left: 96px;
// background: url("../../assets/images/userCenter/other.png") no-repeat center;
background-position: center;
background-repeat: no-repeat;
}
.back-button {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
cursor: pointer;
color: rgba(63, 121, 254, 1);
.i-box {
transform: rotate(180deg);
display: inline-block;
vertical-align: middle;
i {
font-size: 14px;
}
}
}
.tip-box {
margin-top: 26px;
p:first-child {
height: 20px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #3f79fe;
line-height: 20px;
}
p {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #797d84;
line-height: 20px;
}
}
.package-list {
overflow: hidden;
margin: 0;
padding: 0;
li {
list-style: none;
width: calc(20% - 22px);
max-width: 294px;
height: 420px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(248, 250, 251, 1);
border-radius: 3px;
&:hover {
border: 1px solid rgba(63, 121, 254, 1);
}
}
}
.package-name {
font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 64px;
text-align: center;
height: 64px;
}
.package-name--A {
background: linear-gradient(
270deg,
rgba(52, 172, 255, 1) 0%,
rgba(63, 128, 254, 1) 100%
);
}
.package-name--B {
background: linear-gradient(
270deg,
rgba(95, 190, 255, 1) 0%,
rgba(0, 178, 254, 1) 100%
);
}
.package-name--C {
background: linear-gradient(
270deg,
rgba(52, 226, 255, 1) 0%,
rgba(63, 190, 254, 1) 100%
);
}
.package-name--D {
background: linear-gradient(
270deg,
rgba(52, 226, 255, 1) 0%,
rgba(63, 190, 254, 1) 100%
);
}
.package-name--E {
background: linear-gradient(
270deg,
rgba(52, 226, 255, 1) 0%,
rgba(63, 190, 254, 1) 90%
);
}
.VIP-level {
margin-top: 54px;
margin-bottom: 12px;
.vip-box {
margin: 0 auto;
width: 40px;
}
}
.title-box {
width: 56px;
height: 24px;
border-radius: 12px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 24px;
position: relative;
text-indent: 22px;
}
.title-box--A {
color: rgba(53, 53, 53, 1);
background: rgba(193, 231, 245, 1);
}
.title-box--B {
color: white;
background: rgba(239, 200, 153, 1);
}
.title-box--C {
color: white;
background: rgba(255, 160, 101, 1);
}
.title-box--D {
color: white;
background: rgba(246, 210, 38, 1);
}
.title-box--E {
color: white;
background: rgba(246, 200, 38, 1);
}
.icon-box {
width: 30px;
position: absolute;
height: 30px;
border-radius: 15px;
text-align: center;
top: -3px;
left: -11px;
line-height: 30px;
text-indent: initial;
i {
color: white;
}
}
.icon-box--A {
background: rgba(129, 188, 227, 1);
}
.icon-box--B {
background: rgba(195, 141, 83, 1);
}
.icon-box--C {
background: rgba(255, 127, 39, 1);
}
.icon-box--D {
background: rgba(250, 203, 48, 1);
}
.icon-box--E {
background: rgba(246, 200, 38, 1);
}
.number {
text-align: center;
margin: 0;
height: 42px;
font-size: 30px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 42px;
span {
color: #353535;
font-size: 14px;
}
}
.number--A {
color: rgba(193, 210, 246, 1);
}
.number--B {
color: #c37e3d;
}
.number--C {
color: #ff7700;
}
.number--D {
color: #ffd200;
}
.price {
height: 22px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(53, 53, 53, 1);
text-align: center;
line-height: 22px;
margin: 0;
margin-top: 32px;
margin-bottom: 10px;
span {
color: #3f79fe;
font-size: 16px;
}
}
.average-price {
text-align: center;
margin: 0;
height: 20px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(129, 129, 129, 1);
line-height: 20px;
}
.buy {
margin-top: 46px;
.buy-button {
width: 120px;
height: 40px;
margin: 0 auto;
background: rgba(63, 121, 254, 1);
border-radius: 4px;
text-align: center;
line-height: 40px;
color: white;
cursor: pointer;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
transition: 0.3s;
&:hover {
transform: scale(1.1);
}
}
}
.order-box {
height: 172px;
background: #f9f9f9;
border-radius: 4px;
padding-left: 42px;
}
.order-box-top {
height: 116px;
overflow: hidden;
}
.order-box-left,
.order-box-right {
float: left;
}
.order-box-right {
padding-left: 20px;
}
.order-box-left {
width: 44px;
height: 100%;
.icondingdanshijian2x-box {
width: 44px;
height: 44px;
margin-top: 38px;
background: #3f79fe;
border-radius: 50%;
line-height: 44px;
text-align: center;
}
i {
color: white;
font-size: 22px;
}
}
.prompt-order {
height: 28px;
font-size: 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #353535;
line-height: 28px;
padding-top: 32px;
padding-bottom: 8px;
}
.the-order-no {
height: 20px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #797d84;
line-height: 20px;
}
.amount-payable {
line-height: 55px;
font-size: 14px;
border-top: 1px solid #e7e7e7;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #353535;
span {
color: #ff3838;
font-size: 22px;
}
}
.method-payment {
overflow: hidden;
margin-top: 42px;
.title {
height: 22px;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #353535;
line-height: 22px;
margin-bottom: 19px;
}
ul {
overflow: hidden;
li {
width: 242px;
list-style: none;
height: 70px;
border-radius: 4px;
margin-right: 28px;
float: left;
border: 1px solid #c8c8c8;
cursor: pointer;
position: relative;
img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.selected {
position: absolute;
bottom: -1px;
right: 0;
color: #3f79fe;
i {
font-size: 24px;
}
}
}
.check {
border: 1px solid #3f79fe;
}
}
.button {
margin-top: 31px;
width: 120px;
height: 40px;
background: #3f79fe;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
cursor: pointer;
line-height: 40px;
}
}
.warm-prompt {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(129, 129, 129, 1);
margin: 0;
margin-top: 75px;
position: relative;
}
.contact-customer-service {
color: #3f79fe;
cursor: pointer;
&:hover + .customer-service-WeChat {
display: block;
}
}
.customer-service-WeChat {
position: absolute;
width: 153px;
height: 194px;
display: none;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.13);
top: -97px;
left: 590px;
.title {
text-align: center;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(53, 53, 53, 1);
margin: 0;
margin-top: 17px;
margin-bottom: 7px;
}
.imgbox {
width: 103px;
height: 103px;
display: block;
margin: 0 auto;
img {
width: 100%;
}
}
.tip {
margin: 0;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(129, 129, 129, 1);
text-align: center;
margin-top: 7px;
}
}
</style>>
src/plugins/axios-plugin.ts
View file @ 7bc06a30
...@@ -22,6 +22,9 @@ if (key) { ...@@ -22,6 +22,9 @@ if (key) {
else if (key.indexOf('hl') === 0) { else if (key.indexOf('hl') === 0) {
// hl // hl
router = require('@/entry/hl/router'); router = require('@/entry/hl/router');
} else if (key.indexOf('boe') === 0) {
// boe
router = require('@/entry/boe/router');
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment