Skip to content

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

新增hd环境

parent 94f4eb97
Show whitespace changes
Inline Side-by-side
Showing with 5972 additions and 0 deletions
.env.hd_test 0 → 100644
View file @ f99643f8
NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'hd_test'
VUE_APP_VERSION = '0'
\ No newline at end of file
package.json
View file @ f99643f8
......@@ -6,6 +6,7 @@
"dev:sy": "vue-cli-service serve --mode sy_test",
"dev:cs": "vue-cli-service serve --mode cs_test",
"dev:best": "vue-cli-service serve --mode best_test",
"dev:hd": "vue-cli-service serve --mode hd_test",
"build:sy_prod": "vue-cli-service build --mode sy_prod_build",
"build:cs_prod": "vue-cli-service build --mode cs_prod_build",
"build:best_prod": "vue-cli-service build --mode best_prod_build",
......
public/hd/index.html 0 → 100644
View file @ f99643f8
<!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="./hd/favicon.ico">
<title>比特云科技</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_1321935_cdom05madx.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 @ f99643f8
......@@ -64,5 +64,15 @@ const configModules = {
filename: 'index.html'
}
},
// hd
"hd_test": {
CHAIN_BROWSER_URL_PREFIX: 'http://120.26.174.69:9007/',
INERFACE_URL_PREFIX: 'http://172.16.101.87:46789',
INDEX: {
entry: './src/entry/hd/main.ts',
template: './public/hd/index.html',
filename: 'index.html'
}
},
}
exports.model = configModules[process.env.VUE_APP_CURRENTMODE]
\ No newline at end of file
src/entry/hd/App.vue 0 → 100644
View file @ f99643f8
<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/hd/components/banner.vue 0 → 100644
View file @ f99643f8
<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("../images/TemplateManage/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/hd/main.ts 0 → 100644
View file @ f99643f8
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/hd/router.ts 0 → 100644
View file @ f99643f8
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" */ './views/category/Index.vue'),
},
// 个人中心
{
path: '/userCenter',
name: 'userCenter',
component: () => import(/* webpackChunkName: "userCenter" */ '@/views/userCenter/index.vue')
},
{
path: '/choosePackage',
name: 'choosePackage',
component: () => import(/* webpackChunkName: "companyVerify" */ '@/views/userCenter/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: '/templateManage',
name: 'templateManage',
component: () => import(/* webpackChunkName: "templateManage" */ '@/views/template/Index.vue'),
children: [
{
path: '/editTemplate',
name: 'editTemplate',
component: () => import(/* webpackChunkName: "editTemplate" */ './views/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/hd/views/Home.vue 0 → 100644
View file @ f99643f8
<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">比特云科技</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="../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="../images/Home/home3_baner3.png"
alt
/>
<img
class="home-3-in-right"
v-show="currentDeploy === 1"
src="../images/Home/home3_baner1.png"
alt
/>
<img
class="home-3-in-right"
v-show="currentDeploy === 2"
src="../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">免费试用比特云溯源</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">Honordecent@Outlook.com</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("../images/Home/advantage1_szhfwcz.png"),
icon: `&#xe61e;`,
title: `数字化防伪存证`,
text: `区块链共识算法、非对称加密、分布式存储等技术特性，存证安全加密，溯源真实。`,
},
{
src: require("../images/Home/advantage2_qzqsjjk.png"),
icon: `&#xe632;`,
title: `全周期数据监控`,
text: `上链数据无法作弊、不可篡改，从源头控制数据，实现存证全生命周期监控。`,
},
{
src: require("../images/Home/advantage3_djdsycz.png"),
icon: `&#xe61b;`,
title: `多节点溯源见证`,
text: `高质量溯源系统稳定可靠，存证关键控制点提供警告、预防、管控提示，数据可控。`,
},
{
src: require("../images/Home/advantage4_zdyslmb.png"),
icon: `&#xe61c;`,
title: `自定义上链模板`,
text: `个性化模板自由定制，类目产品任意添加，数字化一体存证，操作更灵活。`,
},
{
src: require("../images/Home/advantage5_dcbgxlz.png"),
icon: `&#xe617;`,
title: `低成本高效流转`,
text: `上链即生成专属二维码，有效提高协调效率，线上线下易流转，降低传播成本。`,
},
{
src: require("../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("../images/Home/banner.png");
background-size: cover;
header {
width: 100%;
height: 61px;
// padding: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
background: white;
.header-left {
margin-left: 200px;
width: 90px;
}
.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("../images/Home/advantage1.png");
}
&:nth-child(2) {
background-image: url("../images/Home/advantage2.png");
}
&:nth-child(3) {
background-image: url("../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("../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: #4f4e82;
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("../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("../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: 306px;
height: 48px;
font-size: 34px;
font-family: PingFangSC-Light;
font-weight: 300;
color: rgba(255, 255, 255, 1);
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: rgba(255, 255, 255, 1);
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,
rgba(24, 204, 187, 1) 0%,
rgba(3, 208, 188, 1) 100%
);
text-align: center;
border-radius: 25px;
}
}
.footer {
margin-top: -130px;
width: 100%;
height: 112px;
background: rgba(59, 53, 98, 1);
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/hd/views/Main.vue 0 → 100644
View file @ f99643f8
<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 "./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/hd/views/MainHeader.vue 0 → 100644
View file @ f99643f8
<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: 12px;
height: 31px;
}
.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/hd/views/MainMenu.vue 0 → 100644
View file @ f99643f8
<template>
<!-- 左侧导航栏 -->
<nav class="main_menu">
<div
class="menu-item menu-item_first"
:class="{ 'js-menu-item_active': currentRoute === 0 }"
@click="selectPage(0, 'categoryManage')"
>
<div class="menu-item_subject-icon">
<i class="iconfont">&#xe62b;</i>
</div>
<div class="menu-item-label">存证</div>
<div class="menu-item-active_border"></div>
</div>
<div
class="menu-item menu-item_product"
:class="{ 'js-menu-item_active': currentRoute === 1 }"
@click="selectPage(1)"
>
<div class="menu-item_product-icon">
<i class="iconfont">&#xe629;</i>
</div>
<div class="menu-item-label">溯源</div>
<div class="menu-item-active_border"></div>
</div>
<div
class="menu-item menu-item_template"
:class="{ 'js-menu-item_active': currentRoute === 2 }"
@click="selectPage(2, 'userCenter')"
>
<div class="menu-item_template-icon">
<i class="iconfont">&#xe62a;</i>
</div>
<div class="menu-item-label">管理</div>
<div class="menu-item-active_border"></div>
</div>
</nav>
</template>
<script>
let UrlPrefixObj = require("@/config/UrlPrefix");
export default {
data() {
return {
currentRoute: 0,
};
},
methods: {
selectPage(idnex, path) {
if (idnex === 1) {
window.open(UrlPrefixObj.model.CHAIN_BROWSER_URL_PREFIX);
} else {
this.currentRoute = idnex;
this.$router.push({ path: path });
}
},
},
};
</script>
<style scoped lang="less">
.main_menu {
width: 62px;
height: 100%;
background: #27272a;
color: rgba(255, 255, 255, 0.6);
text-align: center;
font-size: 12px;
}
.menu-item {
height: 60px;
position: relative;
}
.menu-item_first {
margin-top: 79px;
}
.menu-item_product {
margin-top: 21px; /* 30 - 9 */
}
.menu-item_template {
margin-top: 26px; /* 36 - 10 */
}
.js-menu-item_active {
background: #39393e;
cursor: pointer;
& > .menu-item-active_border {
display: initial;
}
}
.menu-item-active_border {
display: none;
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: #3f79fe;
}
.menu-item_subject-icon {
padding: 14px 0 5px 0;
& > i {
font-size: 14px;
}
}
.menu-item_product-icon {
padding: 12px 0 6px 0;
cursor: pointer;
& > i {
font-size: 15px;
}
}
.menu-item_template-icon {
padding: 9px 0 8px 0;
cursor: pointer;
& > i {
font-size: 16px;
}
}
.menu-item-label {
line-height: 17px;
}
</style>
src/entry/hd/views/SignIn.vue 0 → 100644
View file @ f99643f8
<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 * as storage from "@/plugins/storage";
import { GO_URLS } from "@/config/URLS";
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: 72px;
height: 30px;
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%;
float: left;
background-color: #faf8fd;
height: 554px;
width: 400px;
}
</style>
\ No newline at end of file
src/entry/hd/views/category/Index.vue 0 → 100644
View file @ f99643f8
<template>
<div class="category">
<div class="col_left">
<ul class="navigation_box">
<li @click="checkOne">
<div class="icon_box">
<i class="iconfont iconxingzhuang1"></i>
</div>
<span
class="title"
:class="{ title__check: this.$store.state.selectedStatus === 1 }"
>存证记录</span
>
<span class="num">{{ getGoods }}</span>
</li>
<li @click="checkTwo">
<div class="icon_box icon_box__green">
<i class="iconfont iconjilu-"></i>
</div>
<span
class="title"
:class="{ title__check: this.$store.state.selectedStatus === 2 }"
>模板管理</span
>
<span class="num">{{ getTemplate }}</span>
</li>
<li @click="checkThree">
<div class="icon_box icon_box__orange">
<i class="iconfont iconshanchu2"></i>
</div>
<span
class="title"
:class="{ title__check: this.$store.state.selectedStatus === 3 }"
>已删除</span
>
<span class="num">{{ deleteds }}</span>
</li>
</ul>
</div>
<!-- 左侧列 -->
<div
class="col_right"
:class="{ 'col_right--show': this.$store.state.selectedStatus === 1 }"
>
<new-productList @update="update"></new-productList>
</div>
<!-- 右侧列 -->
<div
class="col_right"
:class="{ 'col_right--show': this.$store.state.selectedStatus === 2 }"
>
<!-- 模板 -->
<template-manage></template-manage>
</div>
<div
class="col_right"
:class="{ 'col_right--show': this.$store.state.selectedStatus === 3 }"
>
<!-- 已删除 -->
<deleted :ToUpdate="ToUpdate"></deleted>
</div>
<!-- 引导页 -->
<common-dialog showMask2 close class="cdg-boot-page" v-if="showbootPage">
<boot-page @close="showbootPage = false"></boot-page>
</common-dialog>
</div>
</template>
<script lang="ts">
import { GO_URLS } from "@/config/URLS";
import { Component, Vue, Watch } from "vue-property-decorator";
// 模板管理部分
import TemplateManage from "./TemplateManage.vue";
// 右侧存证部分
import newProductList from "./newProductList.vue";
//删除页
import deleted from "@/views/category/deleted.vue";
// 引导页
import bootPage from "@/components/bootPage.vue";
import CommonDialog from "@/components/CommonDialog.vue";
@Component({
components: {
newProductList,
TemplateManage,
deleted,
bootPage,
CommonDialog,
},
})
export default class Template extends Vue {
[x: string]: any;
trigger: boolean = false;
ToUpdate: boolean = false;
showbootPage: Boolean = false;
created() {
this.getGoods;
this.getTemplate;
this.SelectedStatus;
}
mounted() {
if (localStorage.getItem("bootPage") === "show") {
this.showbootPage = true;
}
}
update() {
this.ToUpdate = !this.ToUpdate;
}
// 获取选中状态
get SelectedStatus() {
return this.$store.state.selectedStatus;
}
get getGoods() {
return this.$store.state.goodsNum;
}
get deleteds() {
return this.$store.state.deletedNum;
}
get getTemplate() {
return this.$store.state.templateNum;
}
// 显示存证
checkOne() {
this.$store.commit("setSelectedStatus", 1);
this.trigger = !this.trigger;
}
// 显示模板管理
checkTwo() {
this.$store.commit("setSelectedStatus", 2);
}
// 已删除
checkThree() {
this.$store.commit("setSelectedStatus", 3);
}
}
</script>
<style scoped lang="less">
.cdg-boot-page {
/deep/.dialog_content {
border-radius: 10px !important;
}
}
.category {
display: flex;
height: 100%;
//解决存证列表下方铺不满的问题
}
.col_left {
width: 237px;
background: #fff;
// 二期开发
.navigation_box {
margin: 0;
padding: 0;
padding-left: 18px;
margin-top: 20px;
li {
list-style: none;
height: 38px;
cursor: pointer;
line-height: 38px;
}
.title {
font-size: 12px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(53, 53, 53, 1);
}
.title__check {
color: #4a90e2;
}
.num {
font-size: 12px;
font-family: PingFangSC-Regular;
font-weight: 400;
float: right;
margin-right: 21px;
color: rgba(53, 53, 53, 1);
}
.icon_box {
float: left;
width: 27px;
height: 27px;
// 做点改动
margin-left: 8px;
margin-top: 5.5px;
margin-right: 14px;
background: linear-gradient(
180deg,
rgba(0, 94, 212, 1) 0%,
rgba(82, 149, 227, 1) 100%
);
text-align: center;
line-height: 27px;
border-radius: 10px;
i {
color: white;
font-size: 14px;
}
}
.icon_box__green {
background: linear-gradient(
180deg,
rgba(3, 213, 161, 1) 0%,
rgba(6, 217, 164, 1) 100%
);
}
.icon_box__orange {
background: linear-gradient(
180deg,
rgba(255, 177, 91, 1) 0%,
rgba(255, 177, 91, 1) 100%
);
}
}
// end
.subject {
margin-top: 15px;
}
}
.col_right {
display: none;
flex: 1;
background: #f8f8f8;
}
.col_right--show {
display: block;
overflow-y: scroll;
}
</style>
src/entry/hd/views/category/TemplateManage.vue 0 → 100644
View file @ f99643f8
<template>
<div class="template_manage">
<header>
<span
:class="{
'header-label_l1': true,
'header-label_l1--check': TemplateType === 0,
}"
@click="SwitchTemplate(1)"
>系统模板</span
>
<span
:class="{
'header-label_l1': true,
'header-label_l1--check': TemplateType === 1,
}"
@click="SwitchTemplate(0)"
>我的模板</span
>
<search-bar
v-if="TemplateType === 1"
v-model="key"
@search="search"
class="header-search"
></search-bar>
</header>
<div v-if="TemplateType === 0">
<ul class="classification-list">
<li
:class="{ item: true, 'item-check': checkIndex === index }"
v-for="(item, index) in classificationList"
@click="switchClassification(item, index)"
:key="index"
>
{{ item.folder_name }}
</li>
</ul>
<div class="default-list">
<div
class="default-list-item"
v-for="(item, index) in theTemplateList"
:key="index"
:style="bg(item)"
@click="EnterSystemTemplate(item)"
>
<span class="default-list-item-name">{{ item.name }}</span>
</div>
</div>
</div>
<!-- 个人模板 -->
<div v-if="TemplateType === 1">
<ul class="classification-list">
<li
:class="{ item: true, 'item-check': checkClassification === index }"
@click="switchPersonalClassification(item, index)"
v-for="(item, index) in MyCategories"
:key="index"
>
{{ item.name }}
<i
@click="editorClassification(item, index)"
v-if="checkClassification === index && index !== 0"
class="iconfont iconwsmp-bianji"
></i>
<ul
class="menu"
:class="{ menuShow: index === classIndex }"
@click="onMenuBlur"
@mousedown.stop
>
<li class="menu-item menu-item__one" @click="Rename(item)">
重命名
</li>
<li
class="menu-item menu-item__two"
@click="deleteTheClassification(item)"
>
删除分类
</li>
</ul>
</li>
<li class="add-the-classification" @click="addClassification">
<i class="iconfont iconjiahao"></i>
添加分类
</li>
</ul>
<!-- 模板列表 -->
<div class="template_list-box">
<div class="template_list-add" @click="AddTemplate">
<i class="iconfont iconjiahao"></i>
<p>添加新模板</p>
</div>
<div
class="template_item"
v-for="(item, index) in personalClassificationList"
:key="index"
@click="EnterPersonalTemplate(item)"
>
<i
class="iconfont icongengduocaozuo icon_menu"
@click.stop="showMenu(index)"
></i>
<h2 class="title">{{ item.name }}</h2>
<ul
class="menu"
:class="{ menuShow: index === ActionIndex }"
@click="onMenuBlur"
@mousedown.stop
>
<li class="menu-item menu-item__one" @click.stop="dle(item, index)">
删除
</li>
<li class="menu-item menu-item__two" @click.stop="copy(item)">
创建副本
</li>
</ul>
</div>
</div>
</div>
<!-- 添加分类 -->
<common-dialog
v-if="ClassificationPopups"
@closePopup="ClassificationPopups = false"
showMask
>
<category-add
@close="ClassificationPopups = false"
@successCallback="successCallback"
></category-add>
</common-dialog>
<!-- 添加模板 -->
<common-dialog
v-if="AddTemplatePopups"
@closePopup="AddTemplatePopups = false"
showMask
>
<add-template
@close="AddTemplatePopups = false"
@successCallback="addSuccess"
/>
</common-dialog>
<!-- CopyShow -->
<common-dialog v-if="CopyShow" @closePopup="CopyShow = false" showMask>
<copy-template
:TemplateID="TemplateID"
@successCallback="successCallback"
@close="CopyShow = false"
/>
</common-dialog>
<common-dialog v-if="renameShow" @closePopup="renameShow = false" showMask>
<rename
:oldName="itemName"
:oldID="itemID"
@close="renameShow = false"
@update="successCallback"
/>
</common-dialog>
</div>
</template>
<script>
import CopyTemplate from "@/components/TemplateManage/CopyTemplate.vue";
import CommonDialog from "@/components/CommonDialog.vue";
import rename from "@/components/TemplateManage/rename.vue";
import SearchBar from "@/components/TemplateManage/SearchBar.vue";
import CategoryAdd from "@/components/TemplateManage/CategoryAdd.vue";
import AddTemplate from "@/components/TemplateManage/AddTemplate.vue";
import { GO_URLS } from "@/config/URLS";
export default {
data() {
return {
key: "", //个人模板>搜索用>关键词
classificationList: [], //系统模板>分类
theTemplateList: [], //系统模板>分类>模板
checkIndex: 0, // 系统模板>分类>选中效果
TemplateType: 0, //个人模板or系统模板>选中效果
MyCategories: [], // 个人模板>分类
ClassificationPopups: false, //个人模板>分类>添加弹窗
checkClassification: 0, //个人模板>分类>选择效果
personalClassificationList: [], //个人模板>分类>模板
AddTemplatePopups: false, //个人模板>分类>添加模板
ActionIndex: -1,
CopyShow: false,
TemplateID: -1,
classIndex: -1,
renameShow: false,
itemName: "",
itemID: -1,
};
},
components: {
SearchBar,
CategoryAdd,
CommonDialog,
AddTemplate,
CopyTemplate,
rename,
},
created() {
this.listOfSystem();
if (this.$route.query.type) {
this.TemplateType = 1;
this.getFolderList();
}
},
methods: {
Rename(item) {
this.renameShow = true;
this.itemName = item.name;
this.itemID = item.id;
},
// 删除分类
async deleteTheClassification(item) {
const res = await this.$ajax({
url: GO_URLS.deleteFolder,
type: "DELETE",
params: {
id: item.id,
},
});
if (res) {
this.$message({
type: "success",
message: "删除成功!",
});
this.getFolderList();
}
},
editorClassification(item, index) {
this.classIndex = index;
document.addEventListener("mousedown", this.onMenuBlur);
},
// 复制
copy(item) {
this.CopyShow = true;
this.onMenuBlur();
this.TemplateID = item.id;
},
// 删除个人模板的请求
async deleteCustomize(id) {
const res = await this.$ajax({
type: "delete",
url: GO_URLS.deleteCustomize,
params: {
id: id,
},
});
if (res) {
this.$message({
type: "success",
message: "删除成功!",
});
this.onMenuBlur();
}
},
// 删除个人模板弹窗
dle(item, index) {
this.$confirm("此操作将永久删除该模板, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.deleteCustomize(item.id);
this.personalClassificationList.splice(index, 1);
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
// 进入个人模板
EnterPersonalTemplate(item) {
this.$router.push({
path: "/editTemplate",
query: { personalTemplate: item.id },
});
},
// 进入系统模板
EnterSystemTemplate(item) {
this.$router.push({
path: "/editTemplate",
query: { systemTemplateId: item.id },
});
},
addSuccess(val) {
this.AddTemplatePopups = false;
this.checkClassification = 0;
this.getpersonalList(val);
},
AddTemplate() {
this.AddTemplatePopups = true;
},
// 关闭弹窗
onMenuBlur() {
this.ActionIndex = -1;
this.classIndex = -1;
document.removeEventListener("mousedown", this.onMenuBlur);
},
// 显示弹窗
showMenu(index) {
this.ActionIndex = index;
document.addEventListener("mousedown", this.onMenuBlur);
},
// 获取个人分类下对应的模板list
async getpersonalList(id) {
const res = await this.$ajax({
type: "post",
url: GO_URLS.personalList,
params: {
id: [id],
},
});
if (res) {
if (res.data.results[0].detail) {
this.personalClassificationList = res.data.results[0].detail;
this.$store.commit(
"setTemplateNum",
res.data.results[0].detail.length
);
} else {
this.personalClassificationList = [];
this.$store.commit("setTemplateNum", 0);
}
}
},
// 个人模板>分类>切换
switchPersonalClassification(item, index) {
this.checkClassification = index;
this.getpersonalList(item.id);
},
// 个人模板>添加分类回调
successCallback() {
this.ClassificationPopups = false;
this.CopyShow = false;
this.getFolderList();
},
// 添加分类
addClassification() {
this.ClassificationPopups = true;
},
// 获取我的模板列表
async getFolderList() {
const res = await this.$ajax({
type: "post",
url: GO_URLS.folderList,
params: {
page: 1,
page_size: 100,
template_type: 1,
},
});
if (res) {
this.MyCategories = res.data.results;
this.getpersonalList(this.MyCategories[0].id);
this.checkClassification = 0;
}
},
//个人模板or系统模板切换
SwitchTemplate(key) {
switch (key) {
case 0:
this.TemplateType = 1;
this.getFolderList();
break;
case 1:
this.TemplateType = 0;
break;
default:
break;
}
},
// 背景图
bg(item) {
if (item.image_url) {
return "background-image:url('" + item.image_url + "')";
} else {
return "background-image:url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3622895792,2096692088&fm=26&gp=0.jpg')";
}
},
// 系统模板下的分类切换
switchClassification(item, index) {
this.checkIndex = index;
if (item.detail) {
this.theTemplateList = item.detail;
this.$store.commit("setTemplateNum", this.theTemplateList.length);
} else {
this.theTemplateList = [];
this.$store.commit("setTemplateNum", 0);
}
},
// 获取系统模板
async listOfSystem() {
const res = await this.$ajax({
url: GO_URLS.systemList,
type: "post",
});
if (res) {
this.classificationList = res.data.results;
if (res.data.results[0].detail) {
this.theTemplateList = res.data.results[0].detail;
this.$store.commit(
"setTemplateNum",
res.data.results[0].detail.length
);
} else {
this.theTemplateList = [];
this.$store.commit("setTemplateNum", 0);
}
}
},
async search() {
const res = await this.$ajax({
url: GO_URLS.searchCustomize,
type: "post",
params: {
key: this.key,
},
});
if (res) {
if (res.data.results) {
this.personalClassificationList = res.data.results;
} else {
this.personalClassificationList = [];
}
}
},
},
};
</script>
<style lang="less" scoped>
.template_manage {
height: 100%;
padding-left: 98px;
}
header {
padding-top: 47px;
}
.header-label_l1 {
cursor: pointer;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #353535;
padding-right: 34px;
}
.header-label_l1--check {
color: #3f79fe;
}
.header-search {
float: right;
margin-right: 68px;
margin-top: -15px;
}
.classification-list {
list-style: none;
overflow: hidden;
margin-top: 22px;
margin-bottom: 15px;
// height: 47px;
.item {
float: left;
position: relative;
background: #ffffff;
border-radius: 4px;
text-align: center;
color: #353535;
margin-bottom: 10px;
margin-right: 10px;
padding: 9px 16px;
cursor: pointer;
}
.item-check {
background: #3f79fe;
color: white;
}
}
.default-list {
flex-wrap: wrap;
display: flex;
display: -webkit-flex;
justify-content: space-between;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
}
.default-list-item {
width: 228px;
margin-right: 15px;
height: 116px;
border-radius: 5px;
margin-bottom: 20px;
background-size: contain;
background-repeat: no-repeat;
position: relative;
cursor: pointer;
}
.default-list-item-name {
font-size: 16px;
font-family: PingFangSC-Semibold;
font-weight: 600;
color: rgba(255, 255, 255, 1);
line-height: 22px;
position: absolute;
top: 20px;
left: 20px;
}
// .template_list-box {
// overflow: hidden;
// }
.add-the-classification {
border-radius: 4px;
color: #3f79fe;
float: left;
font-size: 14px;
cursor: pointer;
background: #ffffff;
text-align: center;
padding: 9px 16px;
cursor: pointer;
i {
font-size: 14px;
}
}
.template_item {
position: relative;
display: inline-block;
background-image: url("../../images/TemplateManage/self-tmpl-bg.png");
background-size: cover;
border-radius: 4px;
padding: 16px 23px;
width: 228px;
margin-right: 15px;
height: 118px;
margin-bottom: 15px;
box-sizing: border-box;
border: 1px solid white;
cursor: pointer;
&:hover {
border: 1px solid #5779f4;
.icon_menu {
display: block;
}
}
.title {
margin: 0;
font-size: 16px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(53, 53, 53, 1);
overflow: hidden;
margin-right: 24px;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon_menu {
display: none;
position: absolute;
top: 20px;
right: 11px; /* 15 - (13 - 4)/2 */
font-size: 13px;
color: #98a9bc;
cursor: pointer;
}
}
.template_list-add {
float: left;
background: #fff;
color: #797d84;
font-size: 16px;
margin-bottom: 15px;
border-radius: 4px;
width: 228px;
height: 118px;
box-sizing: border-box;
border: 1px solid white;
cursor: pointer;
margin-right: 16px;
text-align: center;
i {
font-size: 20px;
display: inline-block;
margin-bottom: 9px;
margin-top: 31px;
}
&:hover {
border: 1px solid #5779f4;
}
}
.menu {
z-index: 100; /* 避免被底部挡住 */
position: absolute;
top: 54px;
right: -15px;
margin: 0;
padding: 0;
width: 107px; /* 109 - 2 */
list-style: none;
background: #fff;
text-align: center;
border: 1px solid #e7e7e7;
border-radius: 2px;
display: none;
}
.menuShow {
display: block;
}
.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: 70px;
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;
}
.menu-item__two {
&:hover {
background: rgba(242, 244, 246, 1);
}
}
</style>
\ No newline at end of file
src/entry/hd/views/category/addGoods.vue 0 → 100644
View file @ f99643f8
<template>
<div class="subject">
<h1>添加存证</h1>
<input v-model.trim="name" type="text" placeholder="请输入存证名称" />
<div class="btn-box">
<div class="btn btn-cancel" @click="$emit('cancel')">取消</div>
<div class="btn btn-determine" @click="determine">确定</div>
</div>
</div>
</template>
<script>
import { GO_URLS } from "@/config/URLS";
import * as storage from "@/plugins/storage";
export default {
// 引入组件
components: {},
props: [],
data() {
return {
name: "",
};
},
created() {},
computed: {
//
},
methods: {
// 确认按钮
async determine() {
if (!this.name) {
this.$message("请输入名称");
return false;
}
const res = await this.$ajax({
type: "post",
url: GO_URLS.add,
params: {
name: this.name,
note: JSON.stringify({
version: 1,
userName: this.$store.state.userInfos.user || "",
userIcon: this.$store.state.userInfos.icon || "",
evidenceName: this.name,
stepName: "",
banners: [],
}),
detail: JSON.stringify([
{
label: "ext",
key: "",
type: 3,
data: [
{
data: {
type: "text",
format: "string",
value: this.name,
},
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: null,
},
type: 0,
key: "存证类型",
label: "存证类型",
},
],
},
{},
]),
},
});
if (res) {
this.$message({
message: "添加成功",
type: "success",
});
this.$router.push({
path: "/editTemplate",
query: {
personalTemplateId: res.data.id,
},
});
}
},
},
};
</script>
<style scoped lang="less">
.subject {
width: 512px;
height: 279px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 20px 0px rgba(61, 118, 249, 0.18);
padding: 0 44px;
}
h1 {
padding-top: 34px;
padding-bottom: 42px;
font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(53, 53, 53, 1);
}
input {
width: 500px;
height: 44px;
border: 1px solid rgba(226, 226, 226, 1);
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: black;
line-height: 25px;
text-indent: 26px;
&::-webkit-input-placeholder {
/* WebKit browsers */
color: #b6b5ba;
}
&:-moz-placeholder {
color: #b6b5ba;
}
&::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #b6b5ba;
}
&:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #b6b5ba;
}
}
input:focus {
outline: none;
border: 1px solid rgba(226, 226, 226, 1);
}
.btn-box {
overflow: hidden;
padding-top: 40px;
float: right;
}
.btn {
float: left;
width: 120px;
height: 40px;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 40px;
cursor: pointer;
}
.btn-cancel {
color: rgba(92, 100, 118, 1);
}
.btn-determine {
background: rgba(63, 121, 254, 1);
color: white;
}
</style>
src/entry/hd/views/category/deleteGoods.vue 0 → 100644
View file @ f99643f8
<template>
<div class="body" :class="{ 'body--two': status === 0 }">
<h1 v-if="status === 0">提示</h1>
<h1 v-else>删除</h1>
<textarea
placeholder="请输入删除原因"
v-model="deleteRemark"
v-if="status !== 0"
></textarea>
<p v-if="status === 0">此操作将永久删除该文件, 是否继续?</p>
<div class="footer" :class="{ 'footer--two': status === 0 }">
<div @click="cancel">取消</div>
<div class="determine" @click="Determine">确定</div>
</div>
</div>
</template>
<script>
import { GO_URLS } from "@/config/URLS";
export default {
props: {
id: 0,
status: null,
},
data() {
return {
deleteRemark: "",
};
},
created() {},
methods: {
checkReason() {
if (this.deleteRemark.trim() === "") {
this.$message({
message: "删除原因不可为空",
type: "warning",
});
return;
} else if (this.deleteRemark.trim().length > 30) {
this.$message({
showClose: true,
message: "删除原因长度不可大于三十字",
type: "warning",
});
return false;
}
this.moveRecycleBin();
},
Determine() {
switch (this.status) {
case 0:
this.deleteConfirm({ id: Number(this.id) });
break;
default:
this.checkReason();
break;
}
},
// 移入回收站
async moveRecycleBin() {
const res = await this.$ajax({
type: "post",
url: GO_URLS.abandon,
params: {
id: this.id,
abandon_remark: this.deleteRemark,
},
});
if (res) {
this.$emit("deleteSuccess");
}
},
// 删除存证
async deleteConfirm(params) {
const res = await this.$ajax({
type: "delete",
url: GO_URLS.delete,
params: params,
});
if (res) {
this.$emit("deleteSuccess");
}
},
cancel() {
this.$emit("CloseDg");
},
},
};
</script>
<style lang="less" scoped>
.body--two {
height: 284px !important;
}
.body {
width: 600px;
height: 327px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 20px 0px rgba(61, 118, 249, 0.18);
h1 {
font-size: 22px;
font-weight: 500;
margin: 0;
color: rgba(0, 0, 0, 1);
padding: 34px 0 18px 44px;
line-height: 1;
}
textarea {
width: 500px;
height: 112px;
border: 1px solid rgba(226, 226, 226, 1);
margin-left: 50px;
font-size: 18px;
resize: none;
line-height: 25px;
padding-top: 12px;
text-indent: 12px;
&::-webkit-input-placeholder {
font-size: 18px;
font-weight: 400;
color: rgba(192, 198, 210, 1);
line-height: 25px;
}
}
p {
width: 500px;
height: 112px;
line-height: 112px;
font-size: 18px;
text-align: center;
}
.footer--two {
padding-top: 0 !important;
}
.footer {
padding-top: 42px;
float: right;
padding-right: 50px;
overflow: hidden;
div {
float: left;
width: 120px;
height: 40px;
cursor: pointer;
border-radius: 4px;
text-align: center;
font-size: 14px;
color: #5c6476;
line-height: 40px;
}
.determine {
background: rgba(63, 121, 254, 1);
color: white;
}
}
}
</style>
\ No newline at end of file
src/entry/hd/views/category/newProductList.vue 0 → 100644
View file @ f99643f8
<template>
<div class="new-product-list">
<!-- 缺省页 -->
<default-page
tips="您还未添加存证"
v-if="FirstEntry"
@to-add="toEditTemplate"
/>
<!-- 主体 -->
<div v-else class="new-product_list">
<!-- 头 -->
<div class="head">
<!-- 添加存证 -->
<div class="add-goods" @click="toEditTemplate">
<i class="iconfont iconjiahao"></i>添加存证
</div>
<!-- 搜索条件 -->
<div class="search-form">
<div class="select" @click="showMenu">
<span class="select-text">{{ label }}</span>
<i class="iconfont iconxiangxia select-icon"></i>
</div>
<ul v-if="isShowMenu" class="select_menu" @mousedown.stop>
<li @click="Select('全部')">全部</li>
<li @click="Select('未上链')">未上链</li>
<li @click="Select('已上链')">已上链</li>
<li @click="Select('上链中')">上链中</li>
<li @click="Select('上链失败')">上链失败</li>
</ul>
</div>
<!-- 右侧搜索框 -->
<div class="search_input">
<input
v-model="searchvalue"
class="input_inner"
type="text"
placeholder="请输入名称、哈希、地址进行查询"
@blur="Search"
@keydown.enter="$event.target.blur()"
/>
<i class="iconfont iconsousuo icon_search"></i>
</div>
</div>
<!-- 表格 -->
<div class="center">
<IncrementalDataList
@increment="incrementOperation"
@delete-goods="deleteGoodsShow"
@upload="upload"
@delete-incremental="deleteTheIncremental"
@incremental-chain="incrementalOnChain"
@create-copy="createCopy"
@privacy-settings="privacySettings"
/>
</div>
<!-- 页码组件 -->
<pagination
class="pager"
v-model="page"
:total="total"
@change="pagechange"
:size="10"
>
<span class="pager-count">共{{ Math.ceil(total / 10) }}页</span>
</pagination>
</div>
<!-- 未认证提示组件 -->
<uncertified
v-if="showUncertified"
@confirm="showUncertified = false"
@cancel="UncertifiedConfirm"
></uncertified>
<!-- 增量 -->
<common-dialog
v-if="showIncrements"
@closePopup="showIncrements = false"
showMask
>
<Increments
:pre_hash="preHash"
:evidenceName="localName"
@update="IncrementUpdate"
@close="showIncrements = false"
></Increments>
</common-dialog>
<!-- 删除组件 -->
<common-dialog
v-if="showDeleteDialog"
@closePopup="showDeleteDialog = false"
showMask
>
<delete-goods
@CloseDg="showDeleteDialog = false"
:id="infoId"
:status="status"
@deleteSuccess="deleteSuccess"
></delete-goods>
</common-dialog>
<!-- 添加存证弹窗 -->
<common-dialog
v-if="isShowAdd"
@closePopup="isShowAdd = false"
showMask
class="style-addgoods"
>
<add-goods @cancel="isShowAdd = false"></add-goods>
</common-dialog>
<!-- copyGoods -->
<common-dialog
v-if="isShowCopy"
@closePopup="isShowCopy = false"
showMask
class="style-addgoods"
>
<copy-goods
@close="isShowCopy = false"
:Copydetails="Copydetails"
@update="getList"
></copy-goods>
</common-dialog>
<!-- prompt -->
<common-dialog showMask v-if="PromptShow" @closePopup="PromptShow = false">
<prompt
tip="确定要隐藏该条记录吗"
@close="PromptShow = false"
@confirm="hiddenCertificate"
/>
</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="../../images/newProductList/chain_notice.png" />
<div class="part-bottom">
<h3>上链提示</h3>
<p class="line-one">
信息上链后，即将展示在区块链上以作永恒记录，如有虚假，
</p>
<p class="line-two">登记⽅需⾃愿承担由此产⽣的⼀切后果。</p>
<div class="chain-btn" @click.stop="Confirm(TheIncrementalData)">
确定上链
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { GO_URLS } from "@/config/URLS";
import CommonDialog from "@/components/CommonDialog.vue";
import Pagination from "@/components/Pagination.vue";
import defaultPage from "@/components/newProductList/defaultPage.vue";
import IncrementalDataList from "@/components/newProductList/IncrementalDataList.vue"; //增量数据列表
import Increments from "@/components/newProductList/increment.vue"; // 增量
import AddGoods from "./addGoods.vue"; // 添加存证
import deleteGoods from "./deleteGoods.vue"; // 删除组件
import Uncertified from "@/components/Uncertified.vue"; // 未认证提示组件
import copyGoods from "@/components/newProductList/copyGoods.vue";
import prompt from "@/components/newProductList/prompt.vue";
export default {
components: {
CommonDialog,
Pagination,
defaultPage,
IncrementalDataList,
AddGoods,
Increments,
deleteGoods,
Uncertified,
copyGoods,
prompt,
},
data() {
return {
isShowMenu: false, // 用于控制搜索条件的显示
label: "全部", // 显示对应的搜索条件
searchvalue: "", // 搜索关键词
total: 10, // 存证总数
page: 1, // 当前页码
chainStatus: null, // 上链状态
FirstEntry: false, // 控制缺省页显示
showUncertified: false, // 个人认证
isShowToChainDialog: false, //上链弹窗
isInActive: false, //防抖
isFirst: false,
isShowAdd: false,
showIncrements: false, // 增量更新弹窗
showDeleteDialog: false, // 删除弹窗的显示和隐藏
infoId: null,
status: null,
preHash: "", // 上一条存证hash
localDetail: "",
localName: "",
localState: null,
IncrementalList: null, // 增量数据列表
TheIncrementalData: null, //增量数据
isShowCopy: false,
Copydetails: {},
PromptShow: false,
PromptID: -1,
};
},
created() {
this.getList(); // 获取所有商品
},
methods: {
async hiddenCertificate() {
const res = await this.$ajax({
type: "POST",
url: GO_URLS.deleteBlockChainProof,
params: {
id: this.PromptID,
},
});
if (res) {
this.getList();
this.PromptShow = false;
this.$message({
type: "success",
message: "隐藏成功!",
});
}
},
privacySettings(val) {
this.PromptID = val.id;
this.PromptShow = true;
},
// 创建副本
createCopy(item) {
this.Copydetails = item;
this.isShowCopy = true;
},
// 增量存证上链
incrementalOnChain(item2, item) {
this.isShowToChainDialog = true;
this.IncrementalList = item;
this.TheIncrementalData = item2;
},
// 增量更新的回调
IncrementUpdate() {
// 获取所有商品
this.getList();
},
// 增量更新
incrementOperation(item) {
if (item.status === 2 && item.increment_num === 0) {
this.preHash = item.hash;
this.localName = item.name;
this.$store.commit("setDepositCertificate", { item });
this.showIncrements = true;
} else if (
item.status === 2 &&
item.increment_num > 0 &&
!item.incrementList
) {
this.$message("请先展开已增量数据");
return false;
} else if (
item.status === 2 &&
item.increment_num > 0 &&
item.incrementList &&
item.incrementList[0].status === 2
) {
this.localName = item.name;
// prehash取列表最后一条数据的hash
this.preHash = item.incrementList[item.incrementList.length - 1].hash;
this.$store.commit("setDepositCertificate", { item });
this.showIncrements = true;
} else {
this.$message({
message: "增量数据未上链，无法继续增量",
type: "warning",
});
}
},
// 删除增量数据
deleteTheIncremental(item) {
if (item.status === 1 || item.status === 2) return false;
var that = this;
this.$confirm("此操作将永久删除该存证, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
that.deleteIncremental(item.id);
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
//上链>查询是否认证
upload(item) {
if (this.$store.state.userInfos.auth_suc === 1) {
this.isShowToChainDialog = true;
this.infoId = item.id;
this.localName = item.name;
this.localState = item.status;
this.localDetail = item.detail;
} else {
this.showUncertified = true;
}
},
// 删除增量存证
async deleteIncremental(id) {
const res = await this.$ajax({
type: "delete",
url: GO_URLS.deleteIncrement + `/` + id,
});
if (res) {
this.getList();
this.$message({
type: "success",
message: "删除成功!",
});
}
},
// 跳转个人中心
UncertifiedConfirm() {
this.$router.push("/userCenter");
},
Confirm(TheIncrementalData) {
switch (TheIncrementalData) {
case null:
this.uploadConfirm();
break;
default:
this.incrementalChain();
break;
}
},
// 增量存证上链
async incrementalChain() {
const res = await this.$ajax({
type: "post",
url: GO_URLS.sendBlockIncrementChain,
params: { id: this.TheIncrementalData.id },
});
if (res) {
this.$message({
type: "success",
message: "上链信息提交成功!",
});
this.isShowToChainDialog = false;
this.getList();
}
},
// 上链请求
uploadConfirm() {
if (this.localState === 3) {
this.witnessTheChain();
return false;
}
this.witnessTheChain();
},
// 普通存证上链
async witnessTheChain() {
if (this.isInActive) return;
this.isInActive = true;
const res = await this.$ajax({
type: "post",
url: GO_URLS.sendBlockChian,
params: { id: this.infoId },
});
if (res) {
this.$message({
type: "success",
message: "上链信息提交成功!",
});
this.isShowToChainDialog = false;
this.getList();
}
this.isInActive = false;
},
// 删除成功
deleteSuccess() {
this.showDeleteDialog = false;
this.getList();
this.$emit("update");
this.$message({
type: "success",
message: "删除存证成功!",
});
},
// 展开删除存证弹窗
deleteGoodsShow(item) {
this.showDeleteDialog = true;
this.infoId = item.id;
this.status = item.status;
},
// 请求
async getList() {
// 构建请求
let params = {
status: !this.chainStatus ? [] : [this.chainStatus],
is_valid: 0, //可用
page: this.page,
key_words: this.searchvalue,
page_size: 10,
};
const res = await this.$ajax({
type: "post",
url: GO_URLS.list,
params,
});
if (res) {
this.total = res.data.total;
this.$store.commit("setListOfInformation", res.data.results || []);
this.$store.commit("setGoodsNum", res.data.total);
if (!res.data.results && !this.isFirst) {
if (this.isFirst) return;
this.FirstEntry = true;
this.isFirst = true;
} else {
this.isFirst = true;
}
}
},
// 页码变更触发
pagechange() {
this.getList();
},
// 搜索按钮
Search() {
this.getList();
},
// 切换搜索条件
Select(val) {
this.isShowMenu = false;
this.label = val;
switch (val) {
case "全部":
this.chainStatus = null;
break;
case "未上链":
this.chainStatus = 0;
break;
case "上链中":
this.chainStatus = 1;
break;
case "已上链":
this.chainStatus = 2;
break;
case "上链失败":
this.chainStatus = 3;
break;
}
this.getList();
},
// 显示搜索条件
showMenu() {
this.isShowMenu = true;
document.addEventListener("mousedown", this.onHindMenu);
},
// 隐藏条件选中
onHindMenu() {
this.isShowMenu = false; //隐藏筛选条件
document.removeEventListener("mousedown", this.onHindMenu);
},
// 添加存证
toEditTemplate() {
this.isShowAdd = true;
},
},
};
</script>
<style lang="less" scoped>
.new-product-list {
.new-product_list {
padding-top: 27px;
min-height: 500px;
background: #f8f8f8;
// 头
.head {
position: relative;
padding-bottom: 5px;
// 添加按钮
.add-goods {
margin-left: 32px;
float: left;
width: 120px;
height: 36px;
cursor: pointer;
background: rgba(30, 15, 255, 1);
box-shadow: 0px 2px 10px 0px rgba(30, 15, 255, 0.14),
0px 2px 10px 0px rgba(30, 15, 255, 0.07);
border-radius: 18px;
padding: 0;
line-height: 36px;
text-align: center;
color: white;
font-size: 14px;
transition: 0.3s;
&:hover {
transform: scale(1.1);
overflow: hidden;
}
.iconfont {
font-size: 14px;
margin-right: 8px;
color: white;
vertical-align: top;
}
}
// 搜索条件
.search-form {
position: relative;
display: inline-block;
line-height: 36px;
height: 36px;
.select {
display: inline-block;
cursor: pointer;
height: 36px;
}
.select-text {
display: inline-block;
width: 64px;
font-size: 14px;
text-align: right;
color: #bababa;
}
.select-icon {
display: inline-block;
margin-left: 8px;
font-size: 8px;
color: #d6d6d6;
transform: scale(0.62);
}
.input {
margin-left: 12px;
vertical-align: top;
}
.select_menu {
line-height: 36px;
position: absolute;
top: 39px; /* 36 + 3 */
right: -20px;
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 2px;
text-align: center;
margin: 0;
padding: 0;
list-style: none;
width: 107px; /* 109 - 2 */
cursor: pointer;
li {
color: #797d84;
&:hover {
background: rgba(242, 244, 246, 1);
}
}
}
}
// 搜索框
.search_input {
margin-left: 16px;
display: inline-block;
position: relative;
.input_inner {
box-sizing: border-box;
padding: 0 40px 0 27px;
width: 288px;
height: 36px;
background: #fff;
border-radius: 21px;
border: none;
outline: none;
font-size: 14px;
&::-webkit-input-placeholder {
color: #bababa;
}
}
.icon_search {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
font-size: 19px;
color: #e0e0e0;
}
}
}
// 主体
.center {
// 表头
.table {
width: 100%;
border-collapse: separate;
border-spacing: 0 5px;
padding: 0 13px;
.table-head {
color: #9b9b9b;
height: 34px;
background: white;
font-weight: normal;
th {
font-weight: normal;
font-size: 12px;
}
// 图片
.table-head-img {
text-align: left;
width: 40px;
}
// 操作
.table-head-set {
padding-right: 19px;
text-align: right;
}
.table-head-index {
text-align: left;
padding-left: 38px;
}
}
}
.link-td {
cursor: pointer;
}
// 表体
.product_row {
height: 67px;
background: #fff;
color: #606266;
font-size: 12px;
position: relative;
.table-td-index {
text-align: left;
padding-left: 18px;
}
.placeholder {
float: left;
width: 20px;
height: 20px;
}
.table-td-index--an {
float: left;
color: #e8e8e8;
cursor: pointer;
line-height: 1;
transform: rotate(-90deg);
transition: transform 0.3s ease-in-out;
i {
font-size: 12px;
}
}
.table-td-index--rotating {
transform: rotate(0deg);
}
.serial-number {
padding-left: 18px;
// color: #9B9B9B;
}
// 缩略图
.imgbox {
.img {
width: 35px;
height: 35px;
background: #e8e8e8;
border-radius: 10px;
overflow: hidden;
font-size: 16px;
text-align: center;
line-height: 35px;
color: white;
img {
width: 100%;
height: 100%;
}
}
}
.middle {
text-align: center;
.status-box {
display: inline-block;
height: 25px;
line-height: 25px;
width: 75px;
overflow: hidden;
cursor: pointer;
border-radius: 4px;
background: rgba(155, 155, 155, 0.1);
color: #9b9b9b;
}
.status-box--ing {
color: #ffad0a;
background: rgba(255, 173, 10, 0.1);
}
.status-box--fail {
color: #f12f2f;
background: rgba(241, 47, 47, 0.1);
}
.status-box--success {
color: #4a90e2;
background: rgba(74, 144, 226, 0.1);
}
i {
font-size: 13px;
cursor: not-allowed;
color: #9b9b9b;
}
.iconerweima--check {
color: #4a90e2;
cursor: pointer;
}
}
.set {
text-align: right;
padding: 0;
}
.set-btn_set {
color: rgba(152, 169, 188, 1);
font-size: 20px;
cursor: pointer;
}
.set-btn_set--notallowed {
cursor: not-allowed;
}
.set-btn_wrapper {
position: relative;
vertical-align: top;
height: 40px;
line-height: 40px;
padding: 0 13px 0 0; /* 21 - (20 - 4) / 2 */
}
// 区块链
.block {
position: relative;
height: 25px;
width: 25px;
line-height: 25px;
margin: 0 auto;
// overflow: hidden;
border-radius: 4px;
background: rgba(155, 155, 155, 0.1);
.icon-box {
height: 25px;
width: 25px;
line-height: 25px;
margin: 0 auto;
overflow: hidden;
border-radius: 4px;
}
}
.icon-box--check {
background: rgba(74, 144, 226, 0.1) !important;
}
.block-ul {
display: none;
right: 54px !important;
}
.block-ul__check {
display: block !important;
top: 30px !important;
left: 50% !important;
transform: translate(-50%, 0);
}
// 二维码
.QRcode-box {
position: relative;
padding: 0;
margin: 0;
.icon-box {
height: 25px;
width: 25px;
background: rgba(155, 155, 155, 0.1);
line-height: 25px;
margin: 0 auto;
overflow: visible;
border-radius: 4px;
position: relative;
}
.show-box {
display: none;
width: 135px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.13);
overflow: hidden;
font-size: 12px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(155, 155, 155, 1);
line-height: 17px;
p {
padding: 0;
margin: 0;
cursor: pointer;
}
.copy-address {
padding-top: 6px;
padding-bottom: 12px;
}
.imgbox {
margin-left: 15px;
margin-top: 12px;
margin-bottom: 6px;
width: 106px;
height: 106px;
padding: 0;
img {
width: 100%;
height: 100%;
}
}
}
.show-box__check {
display: block !important;
position: absolute;
left: 12.5px;
top: 30px;
z-index: 100;
transform: translate(-50%, 0);
}
}
.set-menu__check {
display: block !important;
}
.set-menu {
display: none;
z-index: 1;
position: absolute;
top: 46px;
right: 2px;
margin: 0;
list-style: none;
padding: 0;
width: 148px;
border-radius: 2px;
border: 1px solid #e7e7e7;
background: #fff;
line-height: 40px;
font-size: 14px;
text-align: left;
// 修改组件样式
.move-box {
// 鼠标移入样式
&:hover {
/deep/.el-input__inner {
background: rgba(245, 246, 250, 1) !important;
}
}
/deep/.el-input__suffix-inner {
padding-right: 5px;
}
// 旋转箭头
/deep/ .el-icon-arrow-down {
transform: rotate(-90deg);
font-size: 18px;
color: #606266;
}
// 去掉原有边框
/deep/ .el-input__inner {
border: none !important;
cursor: pointer;
padding-left: 31px;
/*修改提示文字的颜色*/
&::-webkit-input-placeholder {
color: #606266;
}
&::-moz-placeholder {
color: black !important;
// color: red !important;
}
&::-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: black;
}
&::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #606266;
}
&:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #606266;
}
}
}
// end
.iconyidong {
float: right;
padding-right: 14px;
}
& > li {
cursor: pointer;
padding-left: 31px;
&:hover {
background: rgba(245, 246, 250, 1);
}
}
}
}
}
.pager {
margin-top: 13px; /* 23 - 10 */
text-align: right;
padding-right: 13px;
padding-bottom: 80px;
}
.pager-count {
margin-left: 12px;
font-size: 12px;
}
}
.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;
}
.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;
}
}
.style-addgoods {
.dialog_content {
background: none;
max-height: none;
}
}
</style>
\ No newline at end of file
src/entry/hd/views/editTemplate.vue 0 → 100644
View file @ f99643f8
<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="entry/sy/images/newProductList/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 * as storage from "@/plugins/storage";
import { formatTemplateApi2Local, formatApiJson } from "@/plugins/Template";
import { PropertyType } from "@/plugins/types";
import { Property, Unit, FileItem, 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.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) {
// 增量存证进入，先获取所有的增量存证列表，再获取当前增量存证数据
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) {
this.existingEvidenceList = res.data.results;
var firstData = {
name: this.templateName,
id: this.personalTemplateId,
hash: hash,
};
this.existingEvidenceList.push(firstData);
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;
// max-width: 280px;
// overflow: hidden;
// text-overflow:ellipsis;
// white-space: nowrap;
color: #353535;
padding: 8px 16px;
border: 1px solid #e3e7ed;
border-radius: 5px;
margin-right: 10px;
line-height: 1;
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>
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