Commit e3a96fd2 authored by zL's avatar zL

新增cs环境

parent e73cf037
NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'cs_test'
VUE_APP_VERSION = '0'
\ No newline at end of file
......@@ -4,6 +4,7 @@
"private": true,
"scripts": {
"dev:sy": "vue-cli-service serve --mode sy_test",
"dev:cs": "vue-cli-service serve --mode cs_test",
"build:sy_test": "vue-cli-service build --mode sy_test_build",
"build:sy_prod": "vue-cli-service build --mode sy_prod_build",
"deploy:sy": "vue-cli-service build --mode sy_test_build && bash ./sy.sh"
......
<!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="./main/favicon.ico">
<title>区块链慈善登记</title>
<!-- 新iconfont -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_1321935_v0o359opzio.css">
<!-- 富文本编辑器 -->
<script src="https://cdn.bootcss.com/tinymce/4.7.4/tinymce.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but source-trace-manage doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
</body>
<style>
</style>
<script>
</script>
</html>
......@@ -4,14 +4,17 @@
<div class="imgbox">
<img src="../../assets/images/newProductList/default.png" />
</div>
<p>您还未添加存证</p>
<p>{{tips}}</p>
<div class="default-page-btn" @click="$emit('to-add')">去添加</div>
</div>
</div>
</template>
<script>
export default {};
//
export default {
props:['tips']
};
</script>
<style lang="less" scoped>
......
......@@ -25,5 +25,15 @@ const configModules = {
filename: 'index.html'
}
},
// 慈善>测试环境
"cs_test": {
CHAIN_BROWSER_URL_PREFIX: 'http://120.26.174.69:9033/',
INERFACE_URL_PREFIX: 'http://172.16.101.87:46788',
INDEX: {
entry: './src/entry/cs/main.ts',
template: './public/cs/index.html',
filename: 'index.html'
}
},
}
exports.model = configModules[process.env.VUE_APP_CURRENTMODE]
\ No newline at end of file
<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;
}
a:hover,
a:visited,
a:active,
a:link {
color: inherit;
text-decoration: none;
}
body {
height: 100%;
margin: 0;
font-size: 14px;
color: var(--base-color);
}
input::-webkit-search-cancel-button {
display: none;
}
input::-ms-clear {
display: none;
}
</style>
<template>
<div class="incremental-box">
<!-- 表头部分 -->
<ul class="list-title">
<li class="list-number">序号</li>
<li class="list-name">存证名称</li>
<li class="list-time">操作日期</li>
<li class="list-chain">上链</li>
<li class="list-qrcode">二维码</li>
<li class="list-search">区块链查询</li>
<li class="list-set">操作</li>
</ul>
<!-- 表体 -->
<ul class="list-content" v-for="(item, index) in getInfoList" :key="index">
<li>
<div class="content-placeholder">
<div
:class="{
'table-td-index--an': true,
'table-td-index--rotating': expandTheListIndex === index,
}"
v-if="item.increment_num > 0"
@click="expandTheList(item, index)"
>
<i class="iconfont iconxiangxia"></i>
</div>
</div>
<span class="content-number">{{ serialNumber(index) }}</span>
</li>
<li class="content-name" @click="showProduct(item)">{{ item.name }}</li>
<li class="content-time">{{ item.update_time | formatTime }}</li>
<li class="content-chain">
<div class="content-the-above-link" v-if="item.status === 2">
已上链
</div>
<div
class="content-on-the-chain"
v-if="item.status === 0"
@click="$emit('upload', item)"
>
点击上链
</div>
<div v-if="item.status === 1" class="content-status-ing">上链中</div>
<div
v-if="item.status === 3"
class="content-status--fail"
@click="$emit('upload', item)"
>
上链失败
</div>
</li>
<li class="content-qrcode">
<div class="content-code-box">
<div class="icon-box">
<i
@click.stop="openQRcode(item, index)"
class="iconfont iconerweima1"
:class="[
item.status === 2
? 'iconerweima--check'
: 'iconerweima--no-check',
]"
></i>
<div class="show-box" v-if="checkQR === index" @mousedown.stop>
<div class="imgbox" v-if="item.hash">
<img :src="QRcode" />
</div>
<div class="imgbox" v-else>
<img
src="https://f10.baidu.com/it/u=557133877,2120362237&fm=72"
/>
</div>
<p @click="QRdownload(item)">下载二维码</p>
<p class="copy-address" @click="CopyAddress(item)">复制地址</p>
</div>
</div>
</div>
</li>
<li class="content-search">
<div class="block">
<div class="icon-box">
<i
@click.stop="openBlock(item, index)"
class="iconfont iconfangdajing1"
:class="[
item.status === 2
? 'iconerweima--check'
: 'iconerweima--no-check',
]"
></i>
<!-- 浮动弹框 -->
<ul
class="set-menu block-ul"
v-if="checkBlock === index"
@mousedown.stop
>
<li @click="handleChain(item)">查看区块链</li>
<li @click="CopyAddress(item)">复制存证地址</li>
</ul>
</div>
</div>
</li>
<li class="content-set">
<div class="set-btn_wrapper">
<i
@click.stop="openSet(item, index)"
class="iconfont icongengduocaozuo"
></i>
<ul class="set-menu" v-if="checkSet === index" @mousedown.stop>
<!-- <li
v-if="item.status === 2"
@click="
$emit('increment', item);
checkSet = -1;
"
>
增量
</li> -->
<li
@click="
$emit('delete-goods', item);
checkSet = -1;
"
>
删除
</li>
</ul>
</div>
</li>
<!-- 增量数据列表 -->
<div style="width: 100%" v-show="expandTheListIndex === index">
<ul
class="incremental-list"
v-for="(item2, index2) in item.incrementList"
:key="index2"
>
<li class="incremental-icon">
<i
class="iconfont"
:class="[
item2.status === 2 ? 'iconxingzhuang2' : 'iconweixuanze',
]"
></i>
</li>
<li class="incremental-name" @click="enterDetails(item2, item)">
{{ item2.name }}
</li>
<li class="incremental-time">{{ item2.update_time | formatTime }}</li>
<li class="incremental-state">
<span v-if="item2.status === 2" class="state-ban">已上链</span>
<span
v-if="item2.status === 0"
class="state-start"
@click="$emit('incremental-chain', item2, item)"
>点击上链</span
>
<span v-if="item2.status === 1" class="state-ing">上链中</span>
<span v-if="item2.status === 3" class="state-fail">上链失败</span>
</li>
<li class="center-placeholder--one"></li>
<li class="center-placeholder--two"></li>
<li class="incremental-operation">
<div class="btn-box">
<span
@click="$emit('delete-incremental', item2)"
:class="{
'span-ban': item2.status === 1 || item2.status === 2,
}"
>删除</span
>
<span class="span-ban">复制</span>
</div>
</li>
</ul>
</div>
</ul>
</div>
</template>
<script>
import { downloadQrCode, getQR, openChainBrowser } from "@/utils/app/common";
export default {
data() {
return {
checkQR: -1, // 二维码弹窗
checkBlock: -1,
checkSet: -1,
expandTheListIndex: -1,
QRcode: "", // 二维码路劲
};
},
watch: {
getInfoList: function (newv, oldv) {
this.expandTheListIndex = -1;
},
},
computed: {
// 获取存证信息列表
getInfoList: function () {
return this.$store.state.listOfInformation;
},
// 获取当前页码
getPage: function () {
return this.$store.state.page;
},
// 序号
serialNumber: function (index) {
return function (index) {
return (this.getPage - 1) * 10 + (index + 1);
};
},
},
created() {},
methods: {
// 进入详情页
enterDetails(item2, item) {
if (item2.status === 1) return false;
this.$router.push({
path: "/editTemplate",
query: {
personalTemplateId: item.id, //父级id
personalTemplateName: item.name, // 父级name
childId: item2.id, // 当前存证id
},
});
},
// 展开增量数据列表
expandTheList(item, index) {
this.$emit("expandTheList", item, index);
setTimeout(() => {
this.expandTheListIndex = index;
}, 300);
},
// 打开区块链浏览器
handleChain(item) {
openChainBrowser(item.hash);
},
// 复制二维码
CopyAddress(item) {
var input = document.createElement("input"); // 直接构建input
input.value = item.hash; // 设置内容
document.body.appendChild(input); // 添加临时实例
input.select(); // 选择实例内容
let issafariBrowser =
/Safari/.test(navigator.userAgent) &&
!/Chrome/.test(navigator.userAgent);
if (issafariBrowser) {
//safari浏览器单独处理
input.setSelectionRange(0, 9999);
}
document.execCommand("Copy"); // 执行复制
document.body.removeChild(input);
this.$message({
message: "复制成功,请右键粘贴使用",
type: "success",
});
},
// 二维码下载
QRdownload(item) {
downloadQrCode(item.hash);
},
// 隐藏条件选中
onHindMenu() {
this.checkQR = -1;
this.checkBlock = -1;
this.checkSet = -1;
this.QRcode = "";
document.removeEventListener("mousedown", this.onHindMenu);
},
// 进入详情页
showProduct(item) {
if (item.status === 1 || item.status === 3) return false;
this.$router.push({
path: "/editTemplate",
query: {
personalTemplateId: item.id,
},
});
},
openSet(item, index) {
if (item.status === 1) return false;
this.checkSet = index;
document.addEventListener("mousedown", this.onHindMenu);
},
// 区块链查询弹窗
openBlock(item, index) {
if (item.status != 2) return;
this.checkBlock = index;
document.addEventListener("mousedown", this.onHindMenu);
},
// 控制二维码显示
async openQRcode(item, index) {
if (item.status != 2) return;
this.checkQR = index;
this.QRcode = await getQR(item.hash);
document.addEventListener("mousedown", this.onHindMenu);
},
},
};
</script>
<style lang="less" scoped>
.incremental-box {
padding: 14px 12px 0 12px;
min-width: 1024px;
}
// 表头
.list-title {
list-style: none;
overflow: hidden;
display: flex;
justify-content: space-between;
li {
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
color: rgba(155, 155, 155, 1);
line-height: 17px;
padding: 5px 0;
// border: 1px solid skyblue;
}
.list-name {
width: 176px;
}
.list-time {
width: 156px;
text-align: center;
}
.list-number {
width: 62px;
text-align: right;
}
.list-chain {
width: 80px;
text-align: center;
}
.list-qrcode {
width: 80px;
text-align: center;
}
.list-search {
width: 66px;
text-align: center;
}
.list-set {
width: 40px;
text-align: left;
}
}
// 内容部分
.list-content {
list-style: none;
display: flex;
justify-content: space-between;
background: white;
margin-top: 3px;
flex-wrap: wrap;
li {
line-height: 50px;
// border: 1px solid skyblue;
}
.content-on-the-chain {
width: 70px;
height: 25px;
line-height: 25px;
background: rgba(236, 243, 252, 1);
border-radius: 4px;
text-align: center;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
cursor: pointer;
color: rgba(63, 121, 254, 1);
margin: 0 auto;
margin-top: 14px;
}
.content-status-ing {
width: 70px;
height: 25px;
line-height: 25px;
border-radius: 4px;
text-align: center;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
cursor: no-drop;
margin: 0 auto;
margin-top: 14px;
color: #ffad0a;
background: rgba(255, 173, 10, 0.1);
}
.content-status--fail {
width: 70px;
height: 25px;
line-height: 25px;
border-radius: 4px;
text-align: center;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
cursor: pointer;
margin: 0 auto;
margin-top: 14px;
color: #f12f2f;
background: rgba(241, 47, 47, 0.1);
}
// 已上链
.content-the-above-link {
width: 70px;
height: 25px;
line-height: 25px;
background: rgba(242, 242, 242, 1);
border-radius: 4px;
text-align: center;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
cursor: no-drop;
color: #c4c4c4;
margin: 0 auto;
margin-top: 14px;
}
.content-name {
width: 176px;
cursor: pointer;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
color: rgba(53, 53, 53, 1);
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
text-align: left;
}
.content-placeholder {
float: left;
width: 20px;
height: 20px;
padding-left: 16px;
}
.content-qrcode {
width: 80px;
text-align: center;
}
.content-time {
width: 156px;
text-align: center;
}
.table-td-index--an {
color: #e8e8e8;
cursor: pointer;
transform: rotate(-90deg);
transition: transform 0.3s ease-in-out;
i {
font-size: 12px;
}
}
.table-td-index--rotating {
transform: rotate(0deg);
}
.content-number {
padding-left: 18px;
}
.content-code-box {
text-align: center;
.show-box {
position: absolute;
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;
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%;
}
}
}
}
.set-menu {
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;
& > li {
cursor: pointer;
padding-left: 31px;
&:hover {
background: rgba(245, 246, 250, 1);
}
}
}
.content-chain {
width: 80px;
text-align: left;
}
.content-search {
width: 66px;
text-align: center;
.block {
position: relative;
}
}
.content-set {
text-align: center;
width: 40px;
}
.set-btn_wrapper {
position: relative;
cursor: pointer;
padding-right: 10px;
}
}
.iconerweima--check {
color: #4a90e2;
cursor: pointer;
}
.iconerweima--no-check {
cursor: no-drop;
color: #b6b5ba;
}
.center-placeholder--two {
width: 64px;
}
.center-placeholder--one {
width: 78px;
}
// 增量列表
.incremental-list {
list-style: none;
width: 100%;
margin-top: 5px;
display: flex;
background: rgba(250, 250, 251, 1);
justify-content: space-between;
&:last-child {
margin-bottom: 14px;
}
li {
line-height: 30px;
height: 30px;
// overflow: hidden;
}
.incremental-icon {
height: 30px;
background: white;
// width: 123px;
padding-left: 50px;
color: #3f79fe;
i {
font-size: 12px;
}
}
.incremental-name {
width: 176px;
cursor: pointer;
}
.incremental-state {
width: 80px;
span {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
color: rgba(196, 196, 196, 1);
width: 100%;
display: inline-block;
text-align: center;
}
.state-start {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
color: rgba(63, 121, 254, 1);
cursor: pointer;
}
.state-ban {
cursor: no-drop;
}
.state-ing {
cursor: no-drop;
color: #ffad0a;
}
.state-fail {
color: #f12f2f;
cursor: pointer;
}
}
.incremental-operation {
background: white;
width: 42px;
position: relative;
.btn-box {
position: absolute;
top: 0;
right: 22px;
width: 123px;
background: #fafafb;
// border: 1px solid #000;
span {
color: #3f79fe;
padding-right: 10%;
float: right;
cursor: pointer;
}
.span-ban {
color: rgba(250, 250, 251, 1);
}
}
}
.incremental-time {
color: #b6b5ba;
width: 156px;
text-align: center;
}
}
</style>
\ No newline at end of file
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');
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: '/',
component: () => import('./views/SignIn.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/template/editTemplate.vue'),
}
]
}
]
}
],
});
router.beforeEach((to, from, next) => {
const urls = ['/', '/signIn'];
if (to.path === `/signIn` && getLoginCode()) {
if (to.query && to.query.type && to.query.type == '1') {
}
else {
}
next();
}
if (!urls.includes(to.path) && !getLoginCode()) {
return next({ path: "/signIn" });
}
else {
next();
}
})
export default router;
<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>
<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: 23px;
}
.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>
<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>
<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 class="bottom-zone">
<div>
<ul class="bottom-zone-center">
<li>
<div class="bottom-zone-center-item">运营:33慈善平台</div>
<div class="bottom-zone-center-item">技术支持:复杂美</div>
</li>
</ul>
</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: 100px;
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: cover;
float: left;
background-color: #faf8fd;
height: 554px;
width: 400px;
}
.bottom-zone {
position: fixed;
bottom: 0;
background-color: #333;
color: white;
width: 100%;
text-align: center;
}
.bottom-zone-mb {
width: 100%;
}
.bottom-zone-center {
list-style: none;
max-width: 800px;
text-align: left;
display: inline-block;
}
.bottom-zone-center-item {
width: 300px;
display: inline-block;
}
.bottom-zone-mb .bottom-zone-center-item {
width: 180px;
}
</style>
\ No newline at end of file
<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>
<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 }}
</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>
</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>
</div>
</template>
<script>
import CommonDialog from "@/components/CommonDialog.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,
};
},
components: {
SearchBar,
CategoryAdd,
CommonDialog,
AddTemplate,
},
created() {
this.listOfSystem();
if (this.$route.query.type) {
this.TemplateType = 1;
this.getFolderList();
}
},
methods: {
// 删除个人模板的请求
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;
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.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 {
line-height: 77px;
}
.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;
.item {
float: left;
width: 80px;
height: 30px;
background: #ffffff;
border-radius: 4px;
text-align: center;
line-height: 30px;
color: #353535;
margin-bottom: 10px;
margin-right: 10px;
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
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 {
width: 80px;
height: 30px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
line-height: 30px;
color: #3f79fe;
float: left;
text-align: center;
font-size: 12px;
cursor: pointer;
i {
font-size: 12px;
}
}
.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
<template>
<div class="subject">
<h1>添加捐赠记录</h1>
<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>
</template>
<script>
import { GO_URLS } from "@/config/URLS";
import * as storage from "@/plugins/storage";
export default {
// 引入组件
components: {},
props: [],
data() {
return {
theTemplateList: [], //系统模板>分类>模板: "",
};
},
created() {
this.listOfSystem();
},
computed: {
//
},
methods: {
// 进入系统模板
EnterSystemTemplate(item) {
this.$router.push({
path: "/editTemplate",
query: { systemTemplateId: item.id },
});
},
// 背景图
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')";
}
},
async listOfSystem() {
const res = await this.$ajax({
url: GO_URLS.systemList,
type: "post",
});
if (res && res.data && res.data.results[0]) {
// console.log(res.data.results);
this.theTemplateList = res.data.results[0].detail;
}
},
},
};
</script>
<style scoped lang="less">
.subject {
width: 799px;
height: 542px;
background: #ffffff;
border-radius: 10px;
}
h1 {
line-height: 67px;
text-align: center;
margin: 0;
padding: 0;
font-size: 22px;
color: #353535;
border-bottom: 1px solid #e9e9e9;
}
.default-list {
margin-top: 27px;
margin-left: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.default-list-item {
width: 228px;
height: 116px;
border-radius: 5px;
margin-bottom: 20px;
margin-left: 16px;
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: #ffffff;
line-height: 22px;
position: absolute;
top: 20px;
left: 20px;
}
</style>
<template>
<div class="body" :class="{ 'body--two': status === 0 }">
<h1 v-if="status === 2">删除</h1>
<h1 v-if="status === 0">提示</h1>
<textarea
placeholder="请输入删除原因"
v-model="deleteRemark"
v-if="status === 2"
></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;
case 2:
this.checkReason();
break;
default:
return false;
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
<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"
@expandTheList="expandTheList"
@upload="upload"
@delete-incremental="deleteTheIncremental"
@incremental-chain="incrementalOnChain"
/>
</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>
<!-- 增量弹窗 -->
<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"; // 未认证提示组件
export default {
components: {
CommonDialog,
Pagination,
defaultPage,
IncrementalDataList,
AddGoods,
Increments,
deleteGoods,
Uncertified,
},
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, //增量数据
};
},
created() {
this.getList(); // 获取所有商品
},
methods: {
// 展开增量更新列表
async expandTheList(item, index) {
const res = await this.$ajax({
type: "post",
url: GO_URLS.incrementList,
params: {
base_hash: item.hash,
page: 1,
page_size: 10,
},
});
if (res) {
let list = res.data.results;
this.$store.commit("setIncrementList", { list, index });
}
},
// 增量存证上链
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: 140px;
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;
color: var(--base-color);
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
......@@ -2,7 +2,7 @@
<template>
<div class="new-product-list">
<!-- 缺省页 -->
<default-page v-if="FirstEntry" @to-add="toEditTemplate" />
<default-page tips="您还未添加存证" v-if="FirstEntry" @to-add="toEditTemplate" />
<!-- 主体 -->
<div v-else class="new-product_list">
<!-- 头 -->
......
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