更新笔触和管理员页面
BIN
public/image/brush/CrayonBrush.jpg
Normal file
|
After Width: | Height: | Size: 8.9 KiB |
BIN
public/image/brush/InkBrush.jpg
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
public/image/brush/LongfurBrush.jpg
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
public/image/brush/MarkerBrush.jpg
Normal file
|
After Width: | Height: | Size: 3.7 KiB |
BIN
public/image/brush/PencilBrush-2.jpg
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
public/image/brush/PencilBrush.jpg
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
public/image/brush/RibbonBrush.jpg
Normal file
|
After Width: | Height: | Size: 7.4 KiB |
BIN
public/image/brush/SpraypaintBrush.jpg
Normal file
|
After Width: | Height: | Size: 5.8 KiB |
BIN
public/image/brush/WritingBrush.jpg
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
@@ -15,6 +15,7 @@
|
|||||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script> -->
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script> -->
|
||||||
<script src="./js/color-thief.js"></script>
|
<script src="./js/color-thief.js"></script>
|
||||||
<script src="./js/fabric.min.js"></script>
|
<script src="./js/fabric.min.js"></script>
|
||||||
|
<script src="./js/fabric.brushes.js"></script>
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
</noscript>
|
</noscript>
|
||||||
|
|||||||
1216
public/js/fabric.brushes.js
Normal file
|
Before Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 36 KiB |
@@ -595,6 +595,130 @@ li {
|
|||||||
.libraryPageCascader .ant-cascader-menu {
|
.libraryPageCascader .ant-cascader-menu {
|
||||||
margin-top: 4rem;
|
margin-top: 4rem;
|
||||||
}
|
}
|
||||||
|
.admin_page {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_search {
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 2rem 3.5rem 5rem 2.8rem;
|
||||||
|
background: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_search .admin_search {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_search .admin_search .admin_search_item {
|
||||||
|
background: #343579;
|
||||||
|
border-color: #343579;
|
||||||
|
height: 4rem;
|
||||||
|
padding: 0.64rem 1.5rem;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_search .admin_state {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_search .admin_state .admin_state_item {
|
||||||
|
margin-right: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_search .admin_state .admin_state_item > span {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #030303;
|
||||||
|
margin-right: 15px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: block;
|
||||||
|
min-width: 13rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_search .admin_state .admin_current {
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_search .admin_state .header_user_content {
|
||||||
|
position: absolute;
|
||||||
|
border: 2px solid;
|
||||||
|
border-radius: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
top: 0;
|
||||||
|
transform: translateY(6rem);
|
||||||
|
z-index: 2;
|
||||||
|
display: none;
|
||||||
|
margin-left: -2rem;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_search .admin_state .header_user_content .username {
|
||||||
|
padding: 0 2rem;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_search .admin_state .header_user_content .username:hover {
|
||||||
|
background: #e1e1e1;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_search .admin_state .header_user_content.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_content {
|
||||||
|
margin-top: 2.6rem;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 13.7rem);
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_content .ant-table {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_content .ant-table-body {
|
||||||
|
overflow-y: auto !important;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
overflow: -moz-scrollbars-none;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_content .ant-table-body::-webkit-scrollbar {
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_content .ant-table-thead > tr > th {
|
||||||
|
background: #ffffff00;
|
||||||
|
border-bottom: none;
|
||||||
|
backdrop-filter: blur(1rem);
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_content .ant-table-tbody > tr > td {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_content .ant-table-tbody > tr:hover > td {
|
||||||
|
background: #ffffff3a;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_content .ant-table-pagination-right {
|
||||||
|
padding-right: 3.5rem;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_content .operate_list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
.admin_page .admin_table_content .operate_list .operate_item {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-family: Roboto;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #343579;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
.closeIcon {
|
.closeIcon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(2rem*1.2);
|
top: calc(2rem*1.2);
|
||||||
|
|||||||
@@ -707,6 +707,142 @@ input:focus{
|
|||||||
margin-top: 4rem;
|
margin-top: 4rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
//管理员页面的查询
|
||||||
|
.admin_page {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
// min-width: 1440px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.admin_table_search {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 2rem 3.5rem 5rem 2.8rem;
|
||||||
|
background: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.admin_search{
|
||||||
|
width: 40%;
|
||||||
|
.admin_search_item{
|
||||||
|
background: #343579;
|
||||||
|
border-color: #343579;
|
||||||
|
height: 4rem;
|
||||||
|
padding: .64rem 1.5rem;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.admin_state {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 60%;
|
||||||
|
.admin_state_item{
|
||||||
|
margin-right: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
>span{
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #030303;
|
||||||
|
margin-right: 15px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: block;
|
||||||
|
min-width: 13rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.admin_current{
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.header_user_content {
|
||||||
|
position: absolute;
|
||||||
|
border: 2px solid;
|
||||||
|
border-radius: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
top: 0;
|
||||||
|
transform: translateY(6rem);
|
||||||
|
z-index: 2;
|
||||||
|
display: none;
|
||||||
|
margin-left: -2rem;
|
||||||
|
.username{
|
||||||
|
padding: 0 2rem;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.username:hover{
|
||||||
|
background: #e1e1e1;
|
||||||
|
}
|
||||||
|
&.active{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin_table_content {
|
||||||
|
margin-top: 2.6rem;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 13.7rem);
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
.ant-table {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-body {
|
||||||
|
overflow-y: auto !important;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
overflow: -moz-scrollbars-none;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-table-thead > tr > th {
|
||||||
|
background: #ffffff00;
|
||||||
|
border-bottom: none;
|
||||||
|
backdrop-filter: blur(1rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-tbody > tr > td {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
// color: #fff;
|
||||||
|
}
|
||||||
|
.ant-table-tbody > tr {
|
||||||
|
&:hover > td {
|
||||||
|
background: #ffffff3a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-table-pagination-right {
|
||||||
|
padding-right: 3.5rem;
|
||||||
|
}
|
||||||
|
.operate_list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 1rem;
|
||||||
|
|
||||||
|
.operate_item {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-family: Roboto;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #343579;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.closeIcon{
|
.closeIcon{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(2rem*1.2);
|
top: calc(2rem*1.2);
|
||||||
|
|||||||
@@ -1,108 +1,62 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="test_cli">
|
<div class="test_cli admin_page">
|
||||||
<div class="page_content">
|
<div class="admin_table_search">
|
||||||
<img
|
<div class="admin_state">
|
||||||
class="page_content_bg"
|
|
||||||
src="@/assets/images/homePage/bg1.jpg"
|
<div class="admin_state_item">
|
||||||
/>
|
<span>State:</span>
|
||||||
<div class="page_content_body">
|
<a-range-picker
|
||||||
<div class="test_cli_body">
|
class="range_picker"
|
||||||
<div class="trial_table_search">
|
v-model:value="rangePickerValue"
|
||||||
<a-range-picker
|
:placeholder="[
|
||||||
class="range_picker"
|
$t('HistoryPage.StartDate'),
|
||||||
v-model:value="rangePickerValue"
|
$t('HistoryPage.EndDate'),
|
||||||
:placeholder="[
|
]"
|
||||||
$t('HistoryPage.StartDate'),
|
valueFormat="YYYY-MM-DD"
|
||||||
$t('HistoryPage.EndDate'),
|
>
|
||||||
]"
|
<template #suffixIcon>
|
||||||
valueFormat="YYYY-MM-DD"
|
<span
|
||||||
>
|
class="icon iconfont range_picker_icon icon-rili"
|
||||||
<template #suffixIcon>
|
></span>
|
||||||
<span
|
</template>
|
||||||
class="icon iconfont range_picker_icon icon-rili"
|
</a-range-picker>
|
||||||
></span>
|
</div>
|
||||||
</template>
|
<div class="admin_state_item">
|
||||||
</a-range-picker>
|
<span>Time:</span>
|
||||||
<div class="content_search_block">
|
<a-time-range-picker class="range_picker" valueFormat="HH:mm:ss" v-model:value="rangeTimeValue" />
|
||||||
<input
|
</div>
|
||||||
class="search_input"
|
|
||||||
:placeholder="$t('HistoryPage.inputContent1')"
|
|
||||||
v-model="searchCollectionName"
|
|
||||||
@keydown.enter="searchHistoryList()"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="search_icon_block"
|
|
||||||
@click="searchHistoryList()"
|
|
||||||
>
|
|
||||||
<span class="icon iconfont icon-sousuo"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="trial_table_content" ref="historyTable">
|
</div>
|
||||||
<a-table
|
<div class="admin_search">
|
||||||
:columns="columns"
|
<div class="admin_search_item" @click="searchHistoryList">Search</div>
|
||||||
:data-source="collectionList"
|
</div>
|
||||||
:scroll="{ y: historyTableHeight }"
|
</div>
|
||||||
@change="changePage"
|
|
||||||
:pagination="{
|
<div class="admin_table_content" ref="historyTable">
|
||||||
showSizeChanger: true,
|
<a-table
|
||||||
current: currentPage,
|
:columns="columns"
|
||||||
pageSize: pageSize,
|
:data-source="dataList"
|
||||||
total: total,
|
:scroll="{ y: historyTableHeight }"
|
||||||
showQuickJumper: true,
|
@change="changePage"
|
||||||
bordered: false,
|
:pagination="{
|
||||||
}"
|
showSizeChanger: true,
|
||||||
>
|
current: currentPage,
|
||||||
<template
|
pageSize: pageSize,
|
||||||
#bodyCell="{ column, text, record, index }"
|
total: total,
|
||||||
>
|
showQuickJumper: true,
|
||||||
<div
|
bordered: false,
|
||||||
class="operate_list"
|
}"
|
||||||
v-if="column?.Operations"
|
>
|
||||||
>
|
</a-table>
|
||||||
<div
|
</div>
|
||||||
v-show="status == 0"
|
|
||||||
class="operate_item"
|
|
||||||
@click="setConsent(record, index)"
|
|
||||||
>
|
|
||||||
consent
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-show="status == 0"
|
|
||||||
class="operate_item"
|
|
||||||
@click="setRefuse(record, index)"
|
|
||||||
>
|
|
||||||
refuse
|
|
||||||
</div>
|
|
||||||
<!-- <div
|
|
||||||
class="operate_item"
|
|
||||||
@click="deleteGroup(record, index)"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, ref, createVNode, computed } from "vue";
|
import { defineComponent, ref, createVNode, computed } from "vue";
|
||||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
|
||||||
import HeaderComponent from "@/component/HomePage/Header.vue";
|
import HeaderComponent from "@/component/HomePage/Header.vue";
|
||||||
import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
|
import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
|
||||||
import router from "@/router/index";
|
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
import { formatTime } from "@/tool/util";
|
|
||||||
import { Modal, message } from "ant-design-vue";
|
|
||||||
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
||||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
|
||||||
import { useI18n } from "vue-i18n";
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
HeaderComponent,
|
HeaderComponent,
|
||||||
@@ -111,6 +65,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
let rangePickerValue: any = ref([]);
|
let rangePickerValue: any = ref([]);
|
||||||
|
let rangeTimeValue: any = ref([]);
|
||||||
let renameData: any = ref({}); //修改名字选中的数据
|
let renameData: any = ref({}); //修改名字选中的数据
|
||||||
const columns: any = computed(() => {
|
const columns: any = computed(() => {
|
||||||
return [
|
return [
|
||||||
@@ -118,16 +73,22 @@ export default defineComponent({
|
|||||||
title: 'Email',
|
title: 'Email',
|
||||||
align: "center",
|
align: "center",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
width: 170,
|
dataIndex: "userEmail",
|
||||||
dataIndex: "email",
|
key: "userEmail",
|
||||||
key: "email",
|
},
|
||||||
|
{
|
||||||
|
title: 'User Id',
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
dataIndex: "accountId",
|
||||||
|
key: "accountId",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Create Time',
|
title: 'User Name',
|
||||||
align: "center",
|
align: "center",
|
||||||
ellipsis: 200,
|
ellipsis: 200,
|
||||||
dataIndex: "updateTime",
|
dataIndex: "userName",
|
||||||
key: "updateTime",
|
key: "userName",
|
||||||
// customRender: (record: any) => {
|
// customRender: (record: any) => {
|
||||||
// let time = formatTime(
|
// let time = formatTime(
|
||||||
// record.text / 1000,
|
// record.text / 1000,
|
||||||
@@ -137,56 +98,27 @@ export default defineComponent({
|
|||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'State',
|
title: 'isTrial',
|
||||||
align: "center",
|
align: "center",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
width: 150,
|
dataIndex: "isTrial",
|
||||||
dataIndex: "status",
|
key: "isTrial",
|
||||||
key: "status",
|
|
||||||
customRender: (record: any) => {
|
customRender: (record: any) => {
|
||||||
let str
|
let str
|
||||||
if(record.value == 0){
|
if(record.value == 1){
|
||||||
str ='pending'
|
str ='Yes'
|
||||||
}else if(record.value == 1){
|
}else{
|
||||||
str ='consent'
|
str ='No'
|
||||||
}else if(record.value == 2){
|
|
||||||
str ='reject'
|
|
||||||
}
|
}
|
||||||
return str;
|
return str;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Address',
|
title: 'Frequency',
|
||||||
align: "center",
|
align: "center",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
width: 150,
|
dataIndex: "useDesignTimes",
|
||||||
dataIndex: "country",
|
key: "useDesignTimes",
|
||||||
key: "country",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Surname',
|
|
||||||
align: "center",
|
|
||||||
ellipsis: true,
|
|
||||||
width: 150,
|
|
||||||
dataIndex: "surname",
|
|
||||||
key: "surname",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Name',
|
|
||||||
align: "center",
|
|
||||||
ellipsis: true,
|
|
||||||
width: 150,
|
|
||||||
dataIndex: "userName",
|
|
||||||
key: "userName",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Operations',
|
|
||||||
key: "operation",
|
|
||||||
align: "center",
|
|
||||||
fixed: "right",
|
|
||||||
width: 200,
|
|
||||||
// slots:{customRender:'action'}
|
|
||||||
Operations: true,
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
});
|
});
|
||||||
@@ -209,17 +141,16 @@ export default defineComponent({
|
|||||||
value:2,
|
value:2,
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
let collectionList: any = ref([]);
|
let dataList: any = ref([]);
|
||||||
let status: any = ref(0);
|
let status: any = ref(0);
|
||||||
let voluntarily: any = ref(false);
|
|
||||||
return {
|
return {
|
||||||
rangePickerValue,
|
rangePickerValue,
|
||||||
|
rangeTimeValue,
|
||||||
columns,
|
columns,
|
||||||
collectionList,
|
dataList,
|
||||||
renameData,
|
renameData,
|
||||||
status,
|
status,
|
||||||
state,
|
state,
|
||||||
voluntarily,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -228,10 +159,6 @@ export default defineComponent({
|
|||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
total: 0,
|
total: 0,
|
||||||
historyTableHeight: 0,
|
historyTableHeight: 0,
|
||||||
newCollectionName: "",
|
|
||||||
renameVisivle: false, //修改名字弹窗
|
|
||||||
collectionName: "", //选中的名字
|
|
||||||
searchCollectionName: "",
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@@ -244,7 +171,7 @@ export default defineComponent({
|
|||||||
changePage(e: any) {
|
changePage(e: any) {
|
||||||
this.currentPage = e.current;
|
this.currentPage = e.current;
|
||||||
this.pageSize = e.pageSize;
|
this.pageSize = e.pageSize;
|
||||||
this.gettrialList();
|
// this.gettrialList();
|
||||||
},
|
},
|
||||||
|
|
||||||
//查询列表
|
//查询列表
|
||||||
@@ -252,53 +179,33 @@ export default defineComponent({
|
|||||||
this.currentPage = 1;
|
this.currentPage = 1;
|
||||||
this.gettrialList();
|
this.gettrialList();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//获取列表
|
//获取列表
|
||||||
gettrialList() {
|
gettrialList() {
|
||||||
|
let startTime: any = this.rangeTimeValue[0]
|
||||||
|
? this.rangeTimeValue[0]
|
||||||
|
: '00:00:00';
|
||||||
|
let endTime: any = this.rangeTimeValue[1]
|
||||||
|
? this.rangeTimeValue[1]
|
||||||
|
: '00:00:00';
|
||||||
let startDate: any = this.rangePickerValue[0]
|
let startDate: any = this.rangePickerValue[0]
|
||||||
? this.rangePickerValue[0]+' '+'00:00:00'
|
? this.rangePickerValue[0]+' '+startTime
|
||||||
: "";
|
: "";
|
||||||
let endDate: any = this.rangePickerValue[1]
|
let endDate: any = this.rangePickerValue[1]
|
||||||
? this.rangePickerValue[1]+' '+'00:00:00'
|
? this.rangePickerValue[1]+' '+endTime
|
||||||
: "";
|
: "";
|
||||||
let data = {
|
let data = {
|
||||||
endTime:startDate,
|
endTime:endDate,
|
||||||
startTime:endDate,
|
startTime:startDate,
|
||||||
}
|
}
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
console.log(this.rangePickerValue,startDate,endDate);
|
|
||||||
Https.axiosGet(Https.httpUrls.getDesignStatistic,{params:data}).then((rv: any) => {
|
Https.axiosGet(Https.httpUrls.getDesignStatistic,{params:data}).then((rv: any) => {
|
||||||
if (rv) {
|
if (rv) {
|
||||||
console.log(rv);
|
this.dataList = rv
|
||||||
|
|
||||||
// this.workspaceItem.position = this.singleTypeList[0].label
|
// this.workspaceItem.position = this.singleTypeList[0].label
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
setConsent(record: any, index: number){
|
|
||||||
const formData = new FormData()
|
|
||||||
formData.append('ids',record.id)
|
|
||||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
|
||||||
Https.axiosPost(Https.httpUrls.trialOrderApproval, {ids:record.id}).then(
|
|
||||||
(rv: any) => {
|
|
||||||
message.success('同意成功~')
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
setRefuse(record: any, index: number){
|
|
||||||
const formData = new FormData()
|
|
||||||
formData.append('ids',record.id)
|
|
||||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
|
||||||
Https.axiosPost(Https.httpUrls.trialOrderRefuse, formData,config).then(
|
|
||||||
(rv: any) => {
|
|
||||||
this.gettrialList();
|
|
||||||
message.success('拒绝成功~')
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
//删除分组
|
//删除分组
|
||||||
// deleteGroup(record: any, index: number) {
|
// deleteGroup(record: any, index: number) {
|
||||||
// let deleteGroupFun = (id: any, index: number) => {
|
// let deleteGroupFun = (id: any, index: number) => {
|
||||||
@@ -307,7 +214,7 @@ export default defineComponent({
|
|||||||
// };
|
// };
|
||||||
// Https.axiosPost(Https.httpUrls.deleteUserGroup, data).then(
|
// Https.axiosPost(Https.httpUrls.deleteUserGroup, data).then(
|
||||||
// (rv: any) => {
|
// (rv: any) => {
|
||||||
// this.collectionList.splice(index, 1);
|
// this.dataList.splice(index, 1);
|
||||||
// }
|
// }
|
||||||
// );
|
// );
|
||||||
// };
|
// };
|
||||||
@@ -329,144 +236,5 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.test_cli {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
// min-width: 1440px;
|
|
||||||
position: relative;
|
|
||||||
.page_content {
|
|
||||||
position: relative;
|
|
||||||
.page_content_bg {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page_content_body {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.test_cli_body {
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 7rem);
|
|
||||||
box-sizing: border-box;
|
|
||||||
.trial_table_search {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 5rem;
|
|
||||||
color: #fff;
|
|
||||||
.range_picker {
|
|
||||||
width: 36rem;
|
|
||||||
height: 4.8rem;
|
|
||||||
|
|
||||||
.ant-picker-input > input {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.range_picker_icon {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.content_search_block {
|
|
||||||
margin-left: 4rem;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.search_input {
|
|
||||||
width: 32.8rem;
|
|
||||||
padding-left: 1.5rem;
|
|
||||||
height: 4.8rem;
|
|
||||||
line-height: 4.6rem;
|
|
||||||
background: #ffffff;
|
|
||||||
border: 0.1rem solid #f1f1f1;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
font-weight: 400;
|
|
||||||
&::placeholder {
|
|
||||||
color: #c2c2c2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search_icon_block {
|
|
||||||
width: 7.2rem;
|
|
||||||
height: 4.8rem;
|
|
||||||
line-height: 4.8rem;
|
|
||||||
text-align: center;
|
|
||||||
background: #343579;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.icon-sousuo {
|
|
||||||
font-size: 2rem;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.trial_table_content {
|
|
||||||
margin-top: 2.6rem;
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 13.7rem);
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
padding-bottom: 3rem;
|
|
||||||
border-radius: 2rem;
|
|
||||||
backdrop-filter: blur(3rem);
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.38);
|
|
||||||
.ant-table {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-body {
|
|
||||||
overflow-y: auto !important;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
overflow: -moz-scrollbars-none;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-table-thead > tr > th {
|
|
||||||
background: #ffffff00;
|
|
||||||
color: #fff;
|
|
||||||
border-bottom: none;
|
|
||||||
backdrop-filter: blur(1rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-tbody > tr > td {
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
// color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-tbody > tr {
|
|
||||||
&:hover > td {
|
|
||||||
background: #ffffff3a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-pagination-right {
|
|
||||||
padding-right: 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.operate_list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 1rem;
|
|
||||||
|
|
||||||
.operate_item {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-family: Roboto;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #343579;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,26 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="allUser_page">
|
<div class="allUser_page">
|
||||||
<div class="allUser_table_search">
|
<div class="allUser_table_search">
|
||||||
<!-- <div class="allUser_state">
|
|
||||||
<div class="allUser_state_item allUser_table_voluntarily">
|
|
||||||
<span>voluntarily:</span>
|
|
||||||
<a-switch v-model:checked="voluntarily" @change="setIsAutoApproval" />
|
|
||||||
</div>
|
|
||||||
<div class="allUser_state_item">
|
|
||||||
<span>State:</span>
|
|
||||||
<a-select v-model:value="currentState.value" size="large" style="width:280px" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="allUser_search">
|
|
||||||
<div class="allUser_search_item" @click="searchHistoryList">Search</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="allUser_table_content" ref="historyTable">
|
<div class="allUser_table_content" ref="historyTable">
|
||||||
<a-table
|
<a-table
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:data-source="collectionList"
|
:data-source="dataList"
|
||||||
:scroll="{ y: historyTableHeight }"
|
:scroll="{ y: historyTableHeight}"
|
||||||
@change="changePage"
|
@change="changePage"
|
||||||
:pagination="{
|
:pagination="{
|
||||||
showSizeChanger: true,
|
showSizeChanger: true,
|
||||||
@@ -31,36 +18,11 @@
|
|||||||
bordered: false,
|
bordered: false,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<template
|
<!-- <template
|
||||||
#bodyCell="{ column, text, record, index }"
|
#bodyCell="{ column, text, record, index }"
|
||||||
>
|
>
|
||||||
<div
|
|
||||||
class="operate_list"
|
</template> -->
|
||||||
v-if="column?.Operations"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-show="status == 0"
|
|
||||||
class="operate_item"
|
|
||||||
@click="setConsent(record, index)"
|
|
||||||
>
|
|
||||||
consent
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-show="status == 0"
|
|
||||||
class="operate_item"
|
|
||||||
@click="setRefuse(record, index)"
|
|
||||||
>
|
|
||||||
refuse
|
|
||||||
</div>
|
|
||||||
<!-- <div
|
|
||||||
class="operate_item"
|
|
||||||
@click="deleteGroup(record, index)"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-table>
|
</a-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -91,114 +53,68 @@ export default defineComponent({
|
|||||||
title: 'Email',
|
title: 'Email',
|
||||||
align: "center",
|
align: "center",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
width: 70,
|
width: 30,
|
||||||
dataIndex: "email",
|
dataIndex: "email",
|
||||||
key: "email",
|
key: "email",
|
||||||
|
fixed: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'User Id',
|
||||||
|
align: "center",
|
||||||
|
width: 30,
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'User Name',
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
width: 30,
|
||||||
|
dataIndex: "userName",
|
||||||
|
key: "userName",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Given Name',
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
width: 30,
|
||||||
|
dataIndex: "givenName",
|
||||||
|
key: "givenName",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Create Time',
|
title: 'Create Time',
|
||||||
align: "center",
|
align: "center",
|
||||||
width: 70,
|
width: 30,
|
||||||
dataIndex: "updateTime",
|
dataIndex: "createTime",
|
||||||
key: "updateTime",
|
key: "createTime",
|
||||||
// customRender: (record: any) => {
|
|
||||||
// let time = formatTime(
|
|
||||||
// record.text / 1000,
|
|
||||||
// "YYYY-MM-DD hh:mm:ss"
|
|
||||||
// );
|
|
||||||
// return time;
|
|
||||||
// },
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'State',
|
title: 'Title',
|
||||||
align: "center",
|
align: "center",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
width: 70,
|
width: 30,
|
||||||
dataIndex: "status",
|
dataIndex: "title",
|
||||||
key: "status",
|
key: "title",
|
||||||
customRender: (record: any) => {
|
|
||||||
let str
|
|
||||||
if(record.value == 0){
|
|
||||||
str ='pending'
|
|
||||||
}else if(record.value == 1){
|
|
||||||
str ='consent'
|
|
||||||
}else if(record.value == 2){
|
|
||||||
str ='reject'
|
|
||||||
}
|
|
||||||
return str;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Address',
|
title: 'Country',
|
||||||
align: "center",
|
align: "center",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
width: 70,
|
width: 30,
|
||||||
dataIndex: "country",
|
dataIndex: "country",
|
||||||
key: "country",
|
key: "country",
|
||||||
|
fixed: 'right',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: 'Surname',
|
|
||||||
align: "center",
|
|
||||||
ellipsis: true,
|
|
||||||
width: 70,
|
|
||||||
dataIndex: "surname",
|
|
||||||
key: "surname",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Name',
|
|
||||||
align: "center",
|
|
||||||
ellipsis: true,
|
|
||||||
width: 70,
|
|
||||||
dataIndex: "userName",
|
|
||||||
key: "userName",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Operations',
|
|
||||||
key: "operation",
|
|
||||||
align: "center",
|
|
||||||
fixed: "right",
|
|
||||||
width: 70,
|
|
||||||
// slots:{customRender:'action'}
|
|
||||||
Operations: true,
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
});
|
});
|
||||||
let currentState = ref({
|
let dataList: any = ref([]);
|
||||||
name:'all',
|
|
||||||
value:'',
|
|
||||||
state:false,
|
|
||||||
},)
|
|
||||||
let state:any = ref([
|
|
||||||
{
|
|
||||||
label:'all',
|
|
||||||
value:'',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label:'pending',
|
|
||||||
value:0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label:'consent',
|
|
||||||
value:1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label:'rejected',
|
|
||||||
value:2,
|
|
||||||
},
|
|
||||||
])
|
|
||||||
let collectionList: any = ref([]);
|
|
||||||
let userInfo: any = {};
|
let userInfo: any = {};
|
||||||
let status: any = ref(0);
|
|
||||||
let voluntarily: any = ref(false);
|
|
||||||
return {
|
return {
|
||||||
columns,
|
columns,
|
||||||
collectionList,
|
dataList,
|
||||||
renameData,
|
renameData,
|
||||||
userInfo,
|
userInfo,
|
||||||
status,
|
|
||||||
currentState,
|
|
||||||
state,
|
|
||||||
voluntarily,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -219,80 +135,29 @@ export default defineComponent({
|
|||||||
this.gettrialList();
|
this.gettrialList();
|
||||||
let userInfo:any = getCookie("userInfo")
|
let userInfo:any = getCookie("userInfo")
|
||||||
this.userInfo = JSON.parse(userInfo);
|
this.userInfo = JSON.parse(userInfo);
|
||||||
this.getIsAutoApproval()
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//改变页码
|
//改变页码
|
||||||
changePage(e: any) {
|
changePage(e: any) {
|
||||||
this.currentPage = e.current;
|
this.currentPage = e.current;
|
||||||
this.pageSize = e.pageSize;
|
this.pageSize = e.pageSize;
|
||||||
this.gettrialList();
|
// this.gettrialList();
|
||||||
},
|
},
|
||||||
//获取是否自动审批
|
|
||||||
getIsAutoApproval(){
|
|
||||||
Https.axiosPost(Https.httpUrls.getIsAutoApproval, {}).then(
|
|
||||||
(rv: any) => {
|
|
||||||
this.voluntarily = rv
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
//查询列表
|
//查询列表
|
||||||
searchHistoryList() {
|
searchHistoryList() {
|
||||||
this.currentPage = 1;
|
this.currentPage = 1;
|
||||||
this.gettrialList();
|
this.gettrialList();
|
||||||
},
|
},
|
||||||
|
|
||||||
setIsAutoApproval(){
|
|
||||||
Https.axiosPost(Https.httpUrls.switchIsAutoApproval, {}).then(
|
|
||||||
(rv: any) => {
|
|
||||||
this.getIsAutoApproval
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
//获取列表
|
//获取列表
|
||||||
gettrialList() {
|
gettrialList() {
|
||||||
let data = {
|
Https.axiosGet(Https.httpUrls.inquiryGetTrial).then((rv)=>{
|
||||||
page: this.currentPage,
|
console.log(rv);
|
||||||
size: this.pageSize,
|
this.dataList = rv
|
||||||
status: this.currentState.value,
|
|
||||||
// startDate:startDate,
|
})
|
||||||
// endDate:endDate
|
|
||||||
};
|
|
||||||
Https.axiosPost(Https.httpUrls.trialOrderList, data).then(
|
|
||||||
(rv: any) => {
|
|
||||||
this.collectionList = rv.content;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
setConsent(record: any, index: number){
|
|
||||||
const formData = new FormData()
|
|
||||||
formData.append('ids',record.id)
|
|
||||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
|
||||||
Https.axiosPost(Https.httpUrls.trialOrderApproval, {ids:record.id}).then(
|
|
||||||
(rv: any) => {
|
|
||||||
message.success('同意成功~')
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
setRefuse(record: any, index: number){
|
|
||||||
const formData = new FormData()
|
|
||||||
formData.append('ids',record.id)
|
|
||||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
|
||||||
Https.axiosPost(Https.httpUrls.trialOrderRefuse, formData,config).then(
|
|
||||||
(rv: any) => {
|
|
||||||
this.gettrialList();
|
|
||||||
message.success('拒绝成功~')
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
setState(){
|
|
||||||
this.currentState.state = true
|
|
||||||
},
|
|
||||||
setStateItem(item:any){
|
|
||||||
this.currentState = item
|
|
||||||
this.currentState.state = false
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,22 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="trial_page">
|
<div class="admin_page">
|
||||||
<div class="trial_table_search">
|
<div class="admin_table_search">
|
||||||
<div class="trial_state">
|
<div class="admin_state">
|
||||||
<div class="trial_state_item trial_table_voluntarily">
|
<div class="admin_state_item admin_table_voluntarily">
|
||||||
<span>voluntarily:</span>
|
<span>voluntarily:</span>
|
||||||
<a-switch v-model:checked="voluntarily" @change="setIsAutoApproval" />
|
<a-switch v-model:checked="voluntarily" @change="setIsAutoApproval" />
|
||||||
</div>
|
</div>
|
||||||
<div class="trial_state_item">
|
<div class="admin_state_item">
|
||||||
<span>State:</span>
|
<span>State:</span>
|
||||||
<a-select v-model:value="currentState.value" size="large" style="width:280px" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
|
<a-select v-model:value="currentState.value" size="large" style="width:280px" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="trial_search">
|
<div class="admin_search">
|
||||||
<div class="trial_search_item" @click="searchHistoryList">Search</div>
|
<div class="admin_search_item" @click="searchHistoryList">Search</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="trial_table_content" ref="historyTable">
|
<div class="admin_table_content" ref="historyTable">
|
||||||
<a-table
|
<a-table
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:data-source="collectionList"
|
:data-source="collectionList"
|
||||||
@@ -297,139 +297,5 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.trial_page {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
// min-width: 1440px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.trial_table_search {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 2rem;
|
|
||||||
padding: 2rem 3.5rem 5rem 2.8rem;
|
|
||||||
background: #fff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
.trial_search{
|
|
||||||
width: 40%;
|
|
||||||
.trial_search_item{
|
|
||||||
background: #343579;
|
|
||||||
border-color: #343579;
|
|
||||||
height: 4rem;
|
|
||||||
padding: .64rem 1.5rem;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
border-radius: 2px;
|
|
||||||
display: inline-block;
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.trial_state {
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 60%;
|
|
||||||
.trial_state_item{
|
|
||||||
margin-right: 2rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
>span{
|
|
||||||
font-size: 1.6rem;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #030303;
|
|
||||||
margin-right: 15px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: block;
|
|
||||||
min-width: 13rem;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.trial_current{
|
|
||||||
background: #fff;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.header_user_content {
|
|
||||||
position: absolute;
|
|
||||||
border: 2px solid;
|
|
||||||
border-radius: 1rem;
|
|
||||||
overflow: hidden;
|
|
||||||
top: 0;
|
|
||||||
transform: translateY(6rem);
|
|
||||||
z-index: 2;
|
|
||||||
display: none;
|
|
||||||
margin-left: -2rem;
|
|
||||||
.username{
|
|
||||||
padding: 0 2rem;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
.username:hover{
|
|
||||||
background: #e1e1e1;
|
|
||||||
}
|
|
||||||
&.active{
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.trial_table_content {
|
|
||||||
margin-top: 2.6rem;
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 13.7rem);
|
|
||||||
padding-bottom: 3rem;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 2rem;
|
|
||||||
overflow: hidden;
|
|
||||||
.ant-table {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-body {
|
|
||||||
overflow-y: auto !important;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
overflow: -moz-scrollbars-none;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-table-thead > tr > th {
|
|
||||||
background: #ffffff00;
|
|
||||||
border-bottom: none;
|
|
||||||
backdrop-filter: blur(1rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-tbody > tr > td {
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
// color: #fff;
|
|
||||||
}
|
|
||||||
.ant-table-tbody > tr {
|
|
||||||
&:hover > td {
|
|
||||||
background: #ffffff3a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-table-pagination-right {
|
|
||||||
padding-right: 3.5rem;
|
|
||||||
}
|
|
||||||
.operate_list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 1rem;
|
|
||||||
|
|
||||||
.operate_item {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-family: Roboto;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #343579;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -95,6 +95,30 @@
|
|||||||
<div >Size:</div>
|
<div >Size:</div>
|
||||||
<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
|
<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
|
||||||
</label>
|
</label>
|
||||||
|
<label v-show="operation == 'pencil'">
|
||||||
|
<div >Brushwork:</div>
|
||||||
|
<a-select
|
||||||
|
ref="select"
|
||||||
|
class="label_select"
|
||||||
|
size="small"
|
||||||
|
v-model:value="brushworkValue"
|
||||||
|
style="flex: 1"
|
||||||
|
@change="brushworkChange"
|
||||||
|
>
|
||||||
|
<!-- v-model:value="brushwork" -->
|
||||||
|
<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
|
||||||
|
<img :src="item.url" alt="">
|
||||||
|
</a-select-option>
|
||||||
|
<!-- <a-select-option value="Marking">Marking</a-select-option>
|
||||||
|
<a-select-option value="InkBrush">InkBrush</a-select-option>
|
||||||
|
<a-select-option value="CrayonBrush">CrayonBrush</a-select-option>
|
||||||
|
<a-select-option value="RibbonBrush">RibbonBrush</a-select-option>
|
||||||
|
<a-select-option value="MarkerBrush">MarkerBrush</a-select-option>
|
||||||
|
<a-select-option value="WritingBrush">WritingBrush</a-select-option>
|
||||||
|
<a-select-option value="LongfurBrush">LongfurBrush</a-select-option>
|
||||||
|
<a-select-option value="SpraypaintBrush">SpraypaintBrush</a-select-option> -->
|
||||||
|
</a-select>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
|
<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
|
||||||
@@ -577,6 +601,9 @@ export default defineComponent({
|
|||||||
y: 0,
|
y: 0,
|
||||||
height: 0,
|
height: 0,
|
||||||
};
|
};
|
||||||
|
operation.value = 'move'
|
||||||
|
operation.value = 'fill'
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
//设置画布宽高
|
//设置画布宽高
|
||||||
@@ -720,6 +747,8 @@ export default defineComponent({
|
|||||||
// reverseCanvasState.value.push(canvasAsJson);
|
// reverseCanvasState.value.push(canvasAsJson);
|
||||||
}
|
}
|
||||||
normalCanvasState.value.push(canvasAsJson);
|
normalCanvasState.value.push(canvasAsJson);
|
||||||
|
console.log(normalCanvasState.value);
|
||||||
|
|
||||||
if (isLoadCanvas) {
|
if (isLoadCanvas) {
|
||||||
reverseCanvasState.value = []
|
reverseCanvasState.value = []
|
||||||
isLoadCanvas = false;
|
isLoadCanvas = false;
|
||||||
@@ -747,12 +776,25 @@ export default defineComponent({
|
|||||||
let operation = ref('move')
|
let operation = ref('move')
|
||||||
let operationMode = ref('fill')
|
let operationMode = ref('fill')
|
||||||
//铅笔颜色 大小
|
//铅笔颜色 大小
|
||||||
|
let brushworkValue = ref('PencilBrush')
|
||||||
|
let brushworkChange = (value)=>{
|
||||||
|
brushworkValue.value = value
|
||||||
|
setPencil()
|
||||||
|
}
|
||||||
|
|
||||||
|
// let brushwork = ref('')
|
||||||
|
|
||||||
let canvasPencilColor = ref('#000000')
|
let canvasPencilColor = ref('#000000')
|
||||||
let canvasPencilWidth = ref(20)
|
let canvasPencilWidth = ref(20)
|
||||||
let setOperation = (str)=>{
|
let setOperation = (str)=>{
|
||||||
operation.value = str
|
operation.value = str
|
||||||
|
//折线图的时候切换其他形状或者笔触需要把未完成的折线图删掉
|
||||||
canvas.discardActiveObject();//取消所有选中边框
|
canvas.discardActiveObject();//取消所有选中边框
|
||||||
clearPatterning()//临时图形置为空并且添加撤回对象里面
|
if(createPatterningIs){
|
||||||
|
canvas.remove(currentPatterning)
|
||||||
|
}
|
||||||
|
canvas.remove(polyLineBtn)
|
||||||
|
|
||||||
if(str == 'pencil'){
|
if(str == 'pencil'){
|
||||||
setPencil()
|
setPencil()
|
||||||
}else if(str == 'move'){
|
}else if(str == 'move'){
|
||||||
@@ -779,15 +821,83 @@ export default defineComponent({
|
|||||||
visible :true,
|
visible :true,
|
||||||
erasable: false,
|
erasable: false,
|
||||||
});
|
});
|
||||||
|
let hexToRgba=(hex, alpha)=> {
|
||||||
|
const r = parseInt(hex.slice(1, 3), 16);
|
||||||
|
const g = parseInt(hex.slice(3, 5), 16);
|
||||||
|
const b = parseInt(hex.slice(5, 7), 16);
|
||||||
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
||||||
|
}
|
||||||
|
let brushList = ref([
|
||||||
|
{
|
||||||
|
value:'PencilBrush',
|
||||||
|
url:'./image/brush/PencilBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'Marking',
|
||||||
|
url:'./image/brush/PencilBrush-2.jpg'
|
||||||
|
},{
|
||||||
|
value:'InkBrush',
|
||||||
|
url:'./image/brush/InkBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'CrayonBrush',
|
||||||
|
url:'./image/brush/CrayonBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'RibbonBrush',
|
||||||
|
url:'./image/brush/RibbonBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'MarkerBrush',
|
||||||
|
url:'./image/brush/MarkerBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'WritingBrush',
|
||||||
|
url:'./image/brush/WritingBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'LongfurBrush',
|
||||||
|
url:'./image/brush/LongfurBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'SpraypaintBrush',
|
||||||
|
url:'./image/brush/SpraypaintBrush.jpg'
|
||||||
|
},
|
||||||
|
])
|
||||||
let setPencil =()=>{
|
let setPencil =()=>{
|
||||||
let pencil = new fabric.PencilBrush(canvas); //笔
|
let pencil
|
||||||
canvas.preserveObjectStacking = true;
|
canvas.preserveObjectStacking = true;
|
||||||
canvas.isDrawingMode = true//开启绘画模式
|
canvas.isDrawingMode = true//开启绘画模式
|
||||||
|
if(brushworkValue.value == 'PencilBrush'){
|
||||||
|
pencil = new fabric.PencilBrush(canvas,{}); //普通笔
|
||||||
|
}else if(brushworkValue.value == 'Marking'){
|
||||||
|
pencil = new fabric.PencilBrush(canvas,); //记号笔
|
||||||
|
}else if(brushworkValue.value == 'InkBrush'){
|
||||||
|
pencil = new fabric.InkBrush(canvas,{}); //油画笔
|
||||||
|
}else if(brushworkValue.value=='CrayonBrush'){
|
||||||
|
pencil = new fabric.CrayonBrush(canvas,{}); //蜡笔
|
||||||
|
}else if(brushworkValue.value == 'RibbonBrush'){
|
||||||
|
pencil = new fabric.RibbonBrush(canvas,{width: 1,}); //色带
|
||||||
|
}else if(brushworkValue.value == 'MarkerBrush'){
|
||||||
|
pencil = new fabric.MarkerBrush(canvas,{}); //书写笔
|
||||||
|
}else if(brushworkValue.value == 'WritingBrush'){
|
||||||
|
pencil = new fabric.WritingBrush(canvas,{}); //毛笔
|
||||||
|
}else if(brushworkValue.value == 'LongfurBrush'){
|
||||||
|
pencil = new fabric.LongfurBrush(canvas,{width: 1,}); //色带
|
||||||
|
}else if(brushworkValue.value == 'SpraypaintBrush'){
|
||||||
|
pencil = new fabric.SpraypaintBrush(canvas,{}); //长毛刷
|
||||||
|
}
|
||||||
|
|
||||||
canvas.freeDrawingBrush = pencil
|
canvas.freeDrawingBrush = pencil
|
||||||
canvas.freeDrawingBrush.color = canvasPencilColor.value;
|
canvas.freeDrawingBrush.width = canvasPencilWidth.value;
|
||||||
|
|
||||||
|
if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
|
||||||
|
canvas.freeDrawingBrush.width = 1;
|
||||||
|
}
|
||||||
|
if(brushworkValue.value == 'Marking'){
|
||||||
|
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
|
||||||
|
}else if(brushworkValue.value == 'InkBrush'){
|
||||||
|
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
|
||||||
|
}else{
|
||||||
|
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
|
||||||
|
}
|
||||||
|
|
||||||
brushIndicator.set('fill',canvasPencilColor.value)
|
brushIndicator.set('fill',canvasPencilColor.value)
|
||||||
canvas.freeDrawingBrush.isEraser = false
|
canvas.freeDrawingBrush.isEraser = false
|
||||||
canvas.freeDrawingBrush.width = canvasPencilWidth.value;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let setMove = () =>{
|
let setMove = () =>{
|
||||||
@@ -811,20 +921,32 @@ export default defineComponent({
|
|||||||
clearTimeout(setTimeOut.color)
|
clearTimeout(setTimeOut.color)
|
||||||
setTimeOut.color = setTimeout(()=>{
|
setTimeOut.color = setTimeout(()=>{
|
||||||
// brushIndicator.fill = canvasPencilColor.value;
|
// brushIndicator.fill = canvasPencilColor.value;
|
||||||
|
|
||||||
if(canvas.freeDrawingBrush.isEraser){
|
if(canvas.freeDrawingBrush.isEraser){
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
brushIndicator.set({fill: canvasPencilColor.value});
|
brushIndicator.set({fill: canvasPencilColor.value});
|
||||||
}
|
}
|
||||||
canvas.freeDrawingBrush.color = canvasPencilColor.value;
|
if(brushworkValue.value == 'Marking'){
|
||||||
|
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
|
||||||
|
}else if(brushworkValue.value == 'InkBrush'){
|
||||||
|
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
|
||||||
|
}else{
|
||||||
|
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
|
||||||
|
}
|
||||||
|
|
||||||
},300)
|
|
||||||
|
},100)
|
||||||
}
|
}
|
||||||
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
|
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
|
||||||
clearTimeout(setTimeOut.width)
|
clearTimeout(setTimeOut.width)
|
||||||
canvasPencilWidth.value = Number(canvasPencilWidth.value)
|
canvasPencilWidth.value = Number(canvasPencilWidth.value)
|
||||||
setTimeOut.width = setTimeout(()=>{
|
setTimeOut.width = setTimeout(()=>{
|
||||||
canvas.freeDrawingBrush.width = canvasPencilWidth.value;
|
if(brushworkValue.value == 'LongfurBrush' || brushworkValue.value == 'RibbonBrush'){
|
||||||
|
canvas.freeDrawingBrush.width = 1;
|
||||||
|
}else{
|
||||||
|
canvas.freeDrawingBrush.width = canvasPencilWidth.value;
|
||||||
|
}
|
||||||
// setPencil()
|
// setPencil()
|
||||||
},300)
|
},300)
|
||||||
}
|
}
|
||||||
@@ -912,8 +1034,10 @@ export default defineComponent({
|
|||||||
let setCanvasUp = (event)=>{
|
let setCanvasUp = (event)=>{
|
||||||
upPoint = event.absolutePointer
|
upPoint = event.absolutePointer
|
||||||
if(canvas.isDrawingMode){
|
if(canvas.isDrawingMode){
|
||||||
canvas.remove(brushIndicator)
|
setTimeout(() => {
|
||||||
updateCanvasState()
|
canvas.remove(brushIndicator)
|
||||||
|
updateCanvasState()
|
||||||
|
}, 100);
|
||||||
}else{
|
}else{
|
||||||
// event.target && (event.target.bringToFront())//设置优先级
|
// event.target && (event.target.bringToFront())//设置优先级
|
||||||
}
|
}
|
||||||
@@ -946,47 +1070,56 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
let setHDExport = ()=>{
|
let setHDExport = ()=>{
|
||||||
let selectedObject = canvas.getActiveObject();
|
var activeObjects = canvas.getActiveObjects();
|
||||||
if (selectedObject && selectedObject.type === 'image') {
|
var group = new fabric.Group(activeObjects, {
|
||||||
// 如果是图片对象,则可以对其进行操作
|
// 组的属性设置
|
||||||
let selectedImage = selectedObject;
|
});
|
||||||
let img = new Image
|
|
||||||
img.src = selectedImage.getSrc()
|
// 创建一个新的 Canvas
|
||||||
img.onload = ()=>{
|
var exportCanvas = new fabric.StaticCanvas(null, {
|
||||||
console.log(img.width,img.height);
|
width: group.width,
|
||||||
}
|
height: group.height
|
||||||
// 输出图片对象的 URL
|
});
|
||||||
console.log('Selected image URL:', selectedImage.getSrc());
|
|
||||||
} else {
|
// 将组添加到新的 Canvas 上
|
||||||
console.log('No image selected.');
|
canvas.add(group);
|
||||||
}
|
|
||||||
|
// 导出 Canvas 为图像数据
|
||||||
|
var imageDataURL = exportCanvas.toDataURL({
|
||||||
|
format: 'png',
|
||||||
|
quality: 1
|
||||||
|
});
|
||||||
|
console.log(imageDataURL);
|
||||||
}
|
}
|
||||||
onMounted(() => {});
|
onMounted(() => {});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
showUpgradePlan,
|
showUpgradePlan,//当前弹窗是否打开
|
||||||
canvasWH,
|
canvasWH,//画布初始宽高
|
||||||
credits,
|
credits,//积分 用来判断HD导出积分是否够用
|
||||||
init,
|
init,//首页点击导出后初始化
|
||||||
setExport,
|
setExport,//导出所有内容
|
||||||
cancelDsign,
|
cancelDsign,//关闭画布
|
||||||
setMaxInput,
|
setMaxInput,//设置画布宽高
|
||||||
isShowMark,
|
isShowMark,//加载遮罩
|
||||||
allBoardData,
|
allBoardData,//选择画布所有内容
|
||||||
closeNav,
|
closeNav,//导航展开或者收起来状态
|
||||||
setCloseNav,
|
setCloseNav,//给图片导航或者工具收起来或者展开
|
||||||
multiselect,
|
multiselect,//获取整体高度
|
||||||
onDragstart,
|
onDragstart,//拖拽函数
|
||||||
historyState,
|
historyState,//执行撤回或者反撤回
|
||||||
operation,
|
operation,//设置当前鼠标状态绘画或者矩形或者移动
|
||||||
operationMode,
|
operationMode,//设置矩形是边框还是填充
|
||||||
setOperation,
|
setOperation,//设置当前鼠标状态绘画或者矩形或者移动方法
|
||||||
setOperationMode,
|
setOperationMode,//设置矩形是边框还是填充方法
|
||||||
canvasPencilColor,
|
brushList,//笔触列表
|
||||||
canvasPencilWidth,
|
canvasPencilColor,//input选择颜色
|
||||||
setPencilColor,
|
canvasPencilWidth,//input选择宽度
|
||||||
setPencilWidth,
|
setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
|
||||||
setHDExport,
|
setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
|
||||||
|
setHDExport,//高清导出选择的图片
|
||||||
|
brushworkChange,//切换笔触的回调
|
||||||
|
brushworkValue,//当前笔触
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data(prop) {
|
data(prop) {
|
||||||
@@ -1090,12 +1223,20 @@ export default defineComponent({
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
width: 100%;
|
||||||
div {
|
div {
|
||||||
width: 5rem;
|
width: 8rem;
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
width: 10em;
|
// width: 10em;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
.label_select{
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.exportCanvasBox_left_item.closeNav{
|
.exportCanvasBox_left_item.closeNav{
|
||||||
// max-height: 1000rem;
|
// max-height: 1000rem;
|
||||||
@@ -1163,6 +1304,7 @@ export default defineComponent({
|
|||||||
&.leftAlign{
|
&.leftAlign{
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
i{
|
i{
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -1243,5 +1385,17 @@ export default defineComponent({
|
|||||||
font-size: calc(1.6rem * 1.2);
|
font-size: calc(1.6rem * 1.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.ant-select:hover .ant-select-selector{
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.label_select_item{
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -415,11 +415,11 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
}else{
|
}else{
|
||||||
await Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
await Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
||||||
this.$router.replace("/login");
|
|
||||||
WriteCookie("token");
|
WriteCookie("token");
|
||||||
});
|
});
|
||||||
|
this.$router.replace("/login");
|
||||||
}
|
}
|
||||||
window.location.reload()
|
// window.location.reload()
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
338
src/component/Pay/allOrder.vue
Normal file
@@ -0,0 +1,338 @@
|
|||||||
|
<template>
|
||||||
|
<div class="allOrder_page">
|
||||||
|
<div class="allOrder_table_search">
|
||||||
|
<!-- <a-range-picker
|
||||||
|
class="range_picker"
|
||||||
|
v-model:value="rangePickerValue"
|
||||||
|
:placeholder="[
|
||||||
|
$t('HistoryPage.StartDate'),
|
||||||
|
$t('HistoryPage.EndDate'),
|
||||||
|
]"
|
||||||
|
valueFormat="YYYY-MM-DD"
|
||||||
|
>
|
||||||
|
<template #suffixIcon>
|
||||||
|
<span
|
||||||
|
class="icon iconfont range_picker_icon icon-rili"
|
||||||
|
></span>
|
||||||
|
</template>
|
||||||
|
</a-range-picker> -->
|
||||||
|
<!-- <div class="content_search_block">
|
||||||
|
<input
|
||||||
|
class="search_input"
|
||||||
|
:placeholder="
|
||||||
|
$t('HistoryPage.inputContent1')
|
||||||
|
"
|
||||||
|
v-model="searchCollectionName"
|
||||||
|
@keydown.enter="searchAllOrderList()"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="search_icon_block"
|
||||||
|
@click="searchAllOrderList()"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="icon iconfont icon-sousuo"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="allOrder_table_content" ref="historyTable">
|
||||||
|
<a-table
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="collectionList"
|
||||||
|
:scroll="{ y: historyTableHeight }"
|
||||||
|
@change="changePage"
|
||||||
|
:pagination="{
|
||||||
|
showSizeChanger: true,
|
||||||
|
current: currentPage,
|
||||||
|
pageSize: pageSize,
|
||||||
|
total: total,
|
||||||
|
showQuickJumper: true,
|
||||||
|
bordered: false,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
#bodyCell="{ column, text, record, index }"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="operate_list"
|
||||||
|
v-if="column?.Operations"
|
||||||
|
>
|
||||||
|
<!-- <div
|
||||||
|
v-if="record.orderStatus == '支付成功'"
|
||||||
|
class="operate_item"
|
||||||
|
@click="refund(record)"
|
||||||
|
>
|
||||||
|
refund
|
||||||
|
</div> -->
|
||||||
|
<div class="operate_item">{{ $t('HistoryPage.Delete') }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref, createVNode, computed } from "vue";
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
let renameData: any = ref({}); //修改名字选中的数据
|
||||||
|
const columns: any = computed(() => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
title: "Serial",
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
dataIndex: "orderNo",
|
||||||
|
key: "orderNo",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Title",
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
dataIndex: "title",
|
||||||
|
key: "title",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Money",
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
dataIndex: "totalFee",
|
||||||
|
key: "totalFee",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Payment",
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
dataIndex: "paymentType",
|
||||||
|
key: "paymentType",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "State",
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
dataIndex: "orderStatus",
|
||||||
|
key: "orderStatus",
|
||||||
|
},
|
||||||
|
|
||||||
|
// {
|
||||||
|
// title: useI18n().t("HistoryPage.Operations"),
|
||||||
|
// key: "operation",
|
||||||
|
// align: "center",
|
||||||
|
// // slots:{customRender:'action'}
|
||||||
|
// Operations: true,
|
||||||
|
// },
|
||||||
|
];
|
||||||
|
});
|
||||||
|
let dataList: any = ref([]);
|
||||||
|
let rangePickerValue: any = ref([]);
|
||||||
|
let collectionList: any = ref([]);
|
||||||
|
let allDataList: any = ref([]);
|
||||||
|
let userInfo: any = {};
|
||||||
|
return {
|
||||||
|
columns,
|
||||||
|
dataList,
|
||||||
|
renameData,
|
||||||
|
rangePickerValue,
|
||||||
|
collectionList,
|
||||||
|
allDataList,
|
||||||
|
userInfo,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
historyTableHeight: 0,
|
||||||
|
searchCollectionName: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
let historyTable: any = this.$refs.historyTable;
|
||||||
|
this.historyTableHeight = historyTable.clientHeight - 130;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init(){
|
||||||
|
this.currentPage = 1
|
||||||
|
this.pageSize = 10
|
||||||
|
this.getAllOrderList()
|
||||||
|
},
|
||||||
|
//改变页码
|
||||||
|
changePage(e: any) {
|
||||||
|
this.currentPage = e.current;
|
||||||
|
this.pageSize = e.pageSize;
|
||||||
|
this.collectionList = this.allDataList.slice(
|
||||||
|
(this.currentPage - 1) * this.pageSize,
|
||||||
|
(this.currentPage - 1) * this.pageSize + this.pageSize
|
||||||
|
);
|
||||||
|
},
|
||||||
|
//查询列表
|
||||||
|
searchAllOrderList() {
|
||||||
|
this.currentPage = 1;
|
||||||
|
this.getAllOrderList();
|
||||||
|
},
|
||||||
|
//获取列表
|
||||||
|
getAllOrderList() {
|
||||||
|
let startDate: any = this.rangePickerValue
|
||||||
|
? new Date(this.rangePickerValue[0]).getTime()
|
||||||
|
: "";
|
||||||
|
let endDate: any = this.rangePickerValue
|
||||||
|
? new Date(this.rangePickerValue[1]).getTime()
|
||||||
|
: "";
|
||||||
|
|
||||||
|
|
||||||
|
Https.axiosGet(Https.httpUrls.orderInfoList).then((rv: any) => {
|
||||||
|
this.total = rv.length;
|
||||||
|
this.allDataList = rv
|
||||||
|
this.collectionList = this.allDataList.slice(
|
||||||
|
(this.currentPage - 1) * this.pageSize,
|
||||||
|
(this.currentPage - 1) * this.pageSize + this.pageSize
|
||||||
|
);
|
||||||
|
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.allOrder_page {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
// min-width: 1440px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.allOrder_table_search {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 2rem 3.5rem 5rem 2.8rem;
|
||||||
|
background: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.allOrder_search{
|
||||||
|
width: 40%;
|
||||||
|
.allOrder_search_item{
|
||||||
|
background: #343579;
|
||||||
|
border-color: #343579;
|
||||||
|
height: 4rem;
|
||||||
|
padding: .64rem 1.5rem;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.allOrder_state {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 60%;
|
||||||
|
.allOrder_state_item{
|
||||||
|
margin-right: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
>span{
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #030303;
|
||||||
|
margin-right: 15px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: block;
|
||||||
|
min-width: 13rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.allOrder_current{
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.header_user_content {
|
||||||
|
position: absolute;
|
||||||
|
border: 2px solid;
|
||||||
|
border-radius: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
top: 0;
|
||||||
|
transform: translateY(6rem);
|
||||||
|
z-index: 2;
|
||||||
|
display: none;
|
||||||
|
margin-left: -2rem;
|
||||||
|
.username{
|
||||||
|
padding: 0 2rem;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.username:hover{
|
||||||
|
background: #e1e1e1;
|
||||||
|
}
|
||||||
|
&.active{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.allOrder_table_content {
|
||||||
|
width: 100%;
|
||||||
|
// height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
.ant-table {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-body {
|
||||||
|
overflow-y: auto !important;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
overflow: -moz-scrollbars-none;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-table-thead > tr > th {
|
||||||
|
background: #ffffff00;
|
||||||
|
border-bottom: none;
|
||||||
|
backdrop-filter: blur(1rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-tbody > tr > td {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
// color: #fff;
|
||||||
|
}
|
||||||
|
.ant-table-tbody > tr {
|
||||||
|
&:hover > td {
|
||||||
|
background: #ffffff3a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-table-pagination-right {
|
||||||
|
padding-right: 3.5rem;
|
||||||
|
}
|
||||||
|
.operate_list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 1rem;
|
||||||
|
|
||||||
|
.operate_item {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-family: Roboto;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #343579;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
339
src/component/Pay/creditsDetail.vue
Normal file
@@ -0,0 +1,339 @@
|
|||||||
|
<template>
|
||||||
|
<div class="creditsDetail_page">
|
||||||
|
<div class="creditsDetail_table_search">
|
||||||
|
<!-- <a-range-picker
|
||||||
|
class="range_picker"
|
||||||
|
v-model:value="rangePickerValue"
|
||||||
|
:placeholder="[
|
||||||
|
$t('HistoryPage.StartDate'),
|
||||||
|
$t('HistoryPage.EndDate'),
|
||||||
|
]"
|
||||||
|
valueFormat="YYYY-MM-DD"
|
||||||
|
>
|
||||||
|
<template #suffixIcon>
|
||||||
|
<span
|
||||||
|
class="icon iconfont range_picker_icon icon-rili"
|
||||||
|
></span>
|
||||||
|
</template>
|
||||||
|
</a-range-picker> -->
|
||||||
|
<!-- <div class="content_search_block">
|
||||||
|
<input
|
||||||
|
class="search_input"
|
||||||
|
:placeholder="
|
||||||
|
$t('HistoryPage.inputContent1')
|
||||||
|
"
|
||||||
|
v-model="searchCollectionName"
|
||||||
|
@keydown.enter="searchCreditDetailList()"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="search_icon_block"
|
||||||
|
@click="searchCreditDetailList()"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="icon iconfont icon-sousuo"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="creditsDetail_table_content" ref="historyTable">
|
||||||
|
<a-table
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="collectionList"
|
||||||
|
:scroll="{ y: historyTableHeight }"
|
||||||
|
@change="changePage"
|
||||||
|
:pagination="{
|
||||||
|
showSizeChanger: true,
|
||||||
|
current: currentPage,
|
||||||
|
pageSize: pageSize,
|
||||||
|
total: total,
|
||||||
|
showQuickJumper: true,
|
||||||
|
bordered: false,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
#bodyCell="{ column, text, record, index }"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="operate_list"
|
||||||
|
v-if="column?.Operations"
|
||||||
|
>
|
||||||
|
<!-- <div
|
||||||
|
v-if="record.orderStatus == '支付成功'"
|
||||||
|
class="operate_item"
|
||||||
|
@click="refund(record)"
|
||||||
|
>
|
||||||
|
refund
|
||||||
|
</div> -->
|
||||||
|
<div class="operate_item">{{ $t('HistoryPage.Delete') }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref, createVNode, computed } from "vue";
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { formatTime } from "@/tool/util";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
let renameData: any = ref({}); //修改名字选中的数据
|
||||||
|
const columns: any = computed(() => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
title: "Serial",
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
dataIndex: "orderNo",
|
||||||
|
key: "orderNo",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Title",
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
dataIndex: "title",
|
||||||
|
key: "title",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Money",
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
dataIndex: "totalFee",
|
||||||
|
key: "totalFee",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Payment",
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
dataIndex: "paymentType",
|
||||||
|
key: "paymentType",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "State",
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
dataIndex: "orderStatus",
|
||||||
|
key: "orderStatus",
|
||||||
|
},
|
||||||
|
|
||||||
|
// {
|
||||||
|
// title: useI18n().t("HistoryPage.Operations"),
|
||||||
|
// key: "operation",
|
||||||
|
// align: "center",
|
||||||
|
// // slots:{customRender:'action'}
|
||||||
|
// Operations: true,
|
||||||
|
// },
|
||||||
|
];
|
||||||
|
});
|
||||||
|
let dataList: any = ref([]);
|
||||||
|
let rangePickerValue: any = ref([]);
|
||||||
|
let allDataList: any = ref([]);
|
||||||
|
let collectionList: any = ref([]);
|
||||||
|
let userInfo: any = {};
|
||||||
|
return {
|
||||||
|
columns,
|
||||||
|
dataList,
|
||||||
|
renameData,
|
||||||
|
rangePickerValue,
|
||||||
|
allDataList,
|
||||||
|
collectionList,
|
||||||
|
userInfo,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
historyTableHeight: 0,
|
||||||
|
searchCollectionName: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
let historyTable: any = this.$refs.historyTable;
|
||||||
|
this.historyTableHeight = historyTable.clientHeight - 130;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init(){
|
||||||
|
this.currentPage = 1
|
||||||
|
this.pageSize = 10
|
||||||
|
this.getCreditDetailList()
|
||||||
|
},
|
||||||
|
//改变页码
|
||||||
|
changePage(e: any) {
|
||||||
|
this.currentPage = e.current;
|
||||||
|
this.pageSize = e.pageSize;
|
||||||
|
this.collectionList = this.allDataList.slice(
|
||||||
|
(this.currentPage - 1) * this.pageSize,
|
||||||
|
(this.currentPage - 1) * this.pageSize + this.pageSize
|
||||||
|
);
|
||||||
|
},
|
||||||
|
//查询列表
|
||||||
|
searchCreditDetailList() {
|
||||||
|
this.currentPage = 1;
|
||||||
|
this.getCreditDetailList();
|
||||||
|
},
|
||||||
|
//获取列表
|
||||||
|
getCreditDetailList() {
|
||||||
|
let startDate: any = this.rangePickerValue
|
||||||
|
? new Date(this.rangePickerValue[0]).getTime()
|
||||||
|
: "";
|
||||||
|
let endDate: any = this.rangePickerValue
|
||||||
|
? new Date(this.rangePickerValue[1]).getTime()
|
||||||
|
: "";
|
||||||
|
|
||||||
|
|
||||||
|
Https.axiosGet(Https.httpUrls.orderInfoList).then((rv: any) => {
|
||||||
|
this.total = rv.length;
|
||||||
|
this.allDataList = rv
|
||||||
|
this.collectionList = this.allDataList.slice(
|
||||||
|
(this.currentPage - 1) * this.pageSize,
|
||||||
|
(this.currentPage - 1) * this.pageSize + this.pageSize
|
||||||
|
);
|
||||||
|
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.creditsDetail_page {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
// min-width: 1440px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.creditsDetail_table_search {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 2rem 3.5rem 5rem 2.8rem;
|
||||||
|
background: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.creditsDetail_search{
|
||||||
|
width: 40%;
|
||||||
|
.creditsDetail_search_item{
|
||||||
|
background: #343579;
|
||||||
|
border-color: #343579;
|
||||||
|
height: 4rem;
|
||||||
|
padding: .64rem 1.5rem;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.creditsDetail_state {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 60%;
|
||||||
|
.creditsDetail_state_item{
|
||||||
|
margin-right: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
>span{
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #030303;
|
||||||
|
margin-right: 15px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: block;
|
||||||
|
min-width: 13rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.creditsDetail_current{
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.header_user_content {
|
||||||
|
position: absolute;
|
||||||
|
border: 2px solid;
|
||||||
|
border-radius: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
top: 0;
|
||||||
|
transform: translateY(6rem);
|
||||||
|
z-index: 2;
|
||||||
|
display: none;
|
||||||
|
margin-left: -2rem;
|
||||||
|
.username{
|
||||||
|
padding: 0 2rem;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.username:hover{
|
||||||
|
background: #e1e1e1;
|
||||||
|
}
|
||||||
|
&.active{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.creditsDetail_table_content {
|
||||||
|
width: 100%;
|
||||||
|
// height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
.ant-table {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-body {
|
||||||
|
overflow-y: auto !important;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
overflow: -moz-scrollbars-none;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-table-thead > tr > th {
|
||||||
|
background: #ffffff00;
|
||||||
|
border-bottom: none;
|
||||||
|
backdrop-filter: blur(1rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-tbody > tr > td {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
// color: #fff;
|
||||||
|
}
|
||||||
|
.ant-table-tbody > tr {
|
||||||
|
&:hover > td {
|
||||||
|
background: #ffffff3a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-table-pagination-right {
|
||||||
|
padding-right: 3.5rem;
|
||||||
|
}
|
||||||
|
.operate_list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 1rem;
|
||||||
|
|
||||||
|
.operate_item {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-family: Roboto;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #343579;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -10,129 +10,22 @@
|
|||||||
wrapClassName="#app"
|
wrapClassName="#app"
|
||||||
:keyboard="false"
|
:keyboard="false"
|
||||||
>
|
>
|
||||||
|
|
||||||
<div class="closeIcon">
|
<div class="closeIcon">
|
||||||
<!-- <div class="header_right_block" @click.stop="">
|
|
||||||
<div class="header_cancel_button" >Cancel</div>
|
|
||||||
</div> -->
|
|
||||||
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
|
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="history_page">
|
<div class="payOrder_page">
|
||||||
<div class="page_content">
|
<div class="payOrder_page_title">
|
||||||
<div class="page_content_body">
|
<div class="payOrder_page_title_item" @click="setState('paypal')" :class="{active:presentState == 'paypal'}">订单信息</div>
|
||||||
<div class="history_page_body">
|
<div class="payOrder_page_title_item" @click="setState('credits')" :class="{active:presentState == 'credits'}">积分信息</div>
|
||||||
<div class="history_table_search">
|
</div>
|
||||||
<!-- <a-range-picker
|
|
||||||
class="range_picker"
|
|
||||||
v-model:value="rangePickerValue"
|
|
||||||
:placeholder="[
|
|
||||||
$t('HistoryPage.StartDate'),
|
|
||||||
$t('HistoryPage.EndDate'),
|
|
||||||
]"
|
|
||||||
valueFormat="YYYY-MM-DD"
|
|
||||||
>
|
|
||||||
<template #suffixIcon>
|
|
||||||
<span
|
|
||||||
class="icon iconfont range_picker_icon icon-rili"
|
|
||||||
></span>
|
|
||||||
</template>
|
|
||||||
</a-range-picker> -->
|
|
||||||
<div class="content_search_block">
|
|
||||||
<input
|
|
||||||
class="search_input"
|
|
||||||
:placeholder="
|
|
||||||
$t('HistoryPage.inputContent1')
|
|
||||||
"
|
|
||||||
v-model="searchCollectionName"
|
|
||||||
@keydown.enter="searchHistoryList()"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="search_icon_block"
|
|
||||||
@click="searchHistoryList()"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="icon iconfont icon-sousuo"
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="history_table_content" ref="historyTable">
|
<div class="payOrder_table_content" ref="historyTable">
|
||||||
<a-table
|
<creditsDetail ref="creditsDetail" v-show="presentState == 'credits'"></creditsDetail>
|
||||||
:columns="columns"
|
<allOrder ref="allOrder" v-show="presentState == 'paypal'"></allOrder>
|
||||||
:data-source="collectionList"
|
</div>
|
||||||
:scroll="{ y: historyTableHeight }"
|
|
||||||
@change="changePage"
|
|
||||||
:pagination="{
|
|
||||||
showSizeChanger: true,
|
|
||||||
current: currentPage,
|
|
||||||
pageSize: pageSize,
|
|
||||||
total: total,
|
|
||||||
showQuickJumper: true,
|
|
||||||
bordered: false,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<template
|
|
||||||
#bodyCell="{ column, text, record, index }"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="operate_list"
|
|
||||||
v-if="column?.Operations"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="record.orderStatus == '支付成功'"
|
|
||||||
class="operate_item"
|
|
||||||
@click="refund(record)"
|
|
||||||
>
|
|
||||||
refund
|
|
||||||
</div>
|
|
||||||
<div class="operate_item">{{ $t('HistoryPage.Delete') }}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<a-modal
|
|
||||||
class="modal_component refund_reason"
|
|
||||||
v-model:visible="showRefundReason"
|
|
||||||
:footer="null"
|
|
||||||
width="50%"
|
|
||||||
:maskClosable="false"
|
|
||||||
:mask="false"
|
|
||||||
:centered="true"
|
|
||||||
:closable="false"
|
|
||||||
wrapClassName="#app"
|
|
||||||
:keyboard="false"
|
|
||||||
>
|
|
||||||
<div class="closeIcon">
|
|
||||||
<!-- <div class="header_right_block" @click.stop="">
|
|
||||||
<div class="header_cancel_button" >Cancel</div>
|
|
||||||
</div> -->
|
|
||||||
<i class="fi fi-rr-cross-small" @click.stop="cancelRefundreason()"></i>
|
|
||||||
</div>
|
|
||||||
<div class="modal_title_text">
|
|
||||||
Refund Reason
|
|
||||||
</div>
|
|
||||||
<div class="reason">
|
|
||||||
<label>
|
|
||||||
<div>
|
|
||||||
<input name="reason" type="radio" @click="getReasonCategory" value="noLike" v-model="reason">
|
|
||||||
<span>Dislike</span>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<div>
|
|
||||||
<input name="reason" type="radio" @click="getReasonCategory" value="Rests" v-model="reason">
|
|
||||||
<span>Rests</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<textarea v-show="reason == 'Rests'" name="" id="" cols="40" rows="10" v-model="reasonTextarea"></textarea>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="subitOkPreviewBtn" @click="setReason">OK</div>
|
|
||||||
</a-modal>
|
|
||||||
</a-modal>
|
</a-modal>
|
||||||
<div class="mark_loading" v-show="loadingShow">
|
<div class="mark_loading" v-show="loadingShow">
|
||||||
<a-spin size="large" />
|
<a-spin size="large" />
|
||||||
@@ -144,234 +37,50 @@ import { Https } from "@/tool/https";
|
|||||||
import { formatTime } from "@/tool/util";
|
import { formatTime } from "@/tool/util";
|
||||||
import { Modal, message } from "ant-design-vue";
|
import { Modal, message } from "ant-design-vue";
|
||||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||||
|
import allOrder from "@/component/Pay/allOrder.vue";
|
||||||
|
import creditsDetail from "@/component/Pay/creditsDetail.vue";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
|
creditsDetail,
|
||||||
|
allOrder,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
let rangePickerValue: any = ref([]);
|
let presentState: any = ref('paypal');
|
||||||
let renameData: any = ref({}); //修改名字选中的数据
|
|
||||||
const columns: any = computed(() => {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
title: "Serial",
|
|
||||||
align: "center",
|
|
||||||
ellipsis: true,
|
|
||||||
width: 90,
|
|
||||||
dataIndex: "orderNo",
|
|
||||||
key: " ",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Title",
|
|
||||||
align: "center",
|
|
||||||
ellipsis: true,
|
|
||||||
width: 90,
|
|
||||||
dataIndex: "title",
|
|
||||||
key: "sketchCounts",
|
|
||||||
},
|
|
||||||
// { title: useI18n().t('HistoryPage.UptateTime'), align:'center', ellipsis: true,width: 90, dataIndex: 'updateDate', key: 'updateTime',customRender:(record:any)=>{
|
|
||||||
// // let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
|
|
||||||
// return record.record.updateTime
|
|
||||||
// }},
|
|
||||||
{
|
|
||||||
title: "Money",
|
|
||||||
align: "center",
|
|
||||||
ellipsis: true,
|
|
||||||
width: 90,
|
|
||||||
dataIndex: "totalFee",
|
|
||||||
key: "sketchCounts",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Payment",
|
|
||||||
align: "center",
|
|
||||||
ellipsis: true,
|
|
||||||
width: 90,
|
|
||||||
dataIndex: "paymentType",
|
|
||||||
key: "sketchCounts",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "State",
|
|
||||||
align: "center",
|
|
||||||
ellipsis: true,
|
|
||||||
width: 90,
|
|
||||||
dataIndex: "orderStatus",
|
|
||||||
key: "sketchCounts",
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
title: useI18n().t("HistoryPage.Operations"),
|
|
||||||
key: "operation",
|
|
||||||
align: "center",
|
|
||||||
fixed: "left",
|
|
||||||
width: 90,
|
|
||||||
// slots:{customRender:'action'}
|
|
||||||
Operations: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
});
|
|
||||||
let showPayOrder: any = ref(false);
|
let showPayOrder: any = ref(false);
|
||||||
let showRefundReason: any = ref(false);
|
|
||||||
let collectionList: any = ref([]);
|
|
||||||
let record: any = ref();//订单编号
|
|
||||||
let reason: any = ref('noLike');//原因
|
|
||||||
let reasonTextarea: any = ref();//原因
|
|
||||||
let loadingShow: any = ref(false);//原因
|
let loadingShow: any = ref(false);//原因
|
||||||
let { t } = useI18n();
|
let { t } = useI18n();
|
||||||
return {
|
return {
|
||||||
rangePickerValue,
|
presentState,
|
||||||
columns,
|
|
||||||
collectionList,
|
|
||||||
showPayOrder,
|
showPayOrder,
|
||||||
showRefundReason,
|
|
||||||
record,
|
|
||||||
reason,
|
|
||||||
reasonTextarea,
|
|
||||||
renameData,
|
|
||||||
loadingShow,
|
loadingShow,
|
||||||
t,
|
t,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
currentPage: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
total: 0,
|
|
||||||
historyTableHeight: 0,
|
|
||||||
newCollectionName: "",
|
|
||||||
groupDetails: {}, //每个collection的详情
|
|
||||||
collectionName: "", //选中的名字
|
|
||||||
searchCollectionName: "",
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
init() {
|
||||||
this.showPayOrder = true;
|
this.showPayOrder = true;
|
||||||
this.getHistoryList();
|
|
||||||
nextTick().then(() => {
|
|
||||||
let history_table_content = document.getElementsByClassName(
|
|
||||||
"history_table_content"
|
|
||||||
)[0];
|
|
||||||
this.historyTableHeight =
|
|
||||||
history_table_content.scrollHeight - 130;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
cancelDsign() {//关闭订单页面
|
setState(str:any){
|
||||||
this.showPayOrder = false;
|
this.presentState = str
|
||||||
},
|
let setInit:any
|
||||||
cancelRefundreason(){//关闭退款页面
|
if(str == 'paypal'){
|
||||||
this.record = ''
|
setInit = this.$refs.creditsDetail
|
||||||
this.showRefundReason = false;
|
|
||||||
},
|
|
||||||
//改变页码
|
|
||||||
changePage(e: any) {
|
|
||||||
this.currentPage = e.current;
|
|
||||||
this.pageSize = e.pageSize;
|
|
||||||
this.getHistoryList();
|
|
||||||
},
|
|
||||||
|
|
||||||
//查询列表
|
|
||||||
searchHistoryList() {
|
|
||||||
this.currentPage = 1;
|
|
||||||
this.getHistoryList();
|
|
||||||
},
|
|
||||||
|
|
||||||
getHistoryList() {
|
|
||||||
let startDate: any = this.rangePickerValue
|
|
||||||
? new Date(this.rangePickerValue[0]).getTime()
|
|
||||||
: "";
|
|
||||||
let endDate: any = this.rangePickerValue
|
|
||||||
? new Date(this.rangePickerValue[1]).getTime()
|
|
||||||
: "";
|
|
||||||
let data = {
|
|
||||||
page: this.currentPage,
|
|
||||||
size: this.pageSize,
|
|
||||||
collectionName: this.searchCollectionName,
|
|
||||||
startDate: startDate,
|
|
||||||
endDate: endDate,
|
|
||||||
};
|
|
||||||
|
|
||||||
Https.axiosGet(Https.httpUrls.orderInfoList).then((rv: any) => {
|
|
||||||
this.total = rv.length;
|
|
||||||
this.collectionList = rv.slice(
|
|
||||||
(this.currentPage - 1) * this.pageSize,
|
|
||||||
(this.currentPage - 1) * this.pageSize + this.pageSize
|
|
||||||
);
|
|
||||||
|
|
||||||
});
|
|
||||||
// Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
|
|
||||||
// (rv: any) => {
|
|
||||||
// this.collectionList = rv.content
|
|
||||||
// this.total = rv.total
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
},
|
|
||||||
|
|
||||||
//删除分组
|
|
||||||
// deleteGroup(record:any,index:number){
|
|
||||||
// let deleteGroupFun = (id:any,index:number) =>{
|
|
||||||
// let data = {
|
|
||||||
// userGroupId:id
|
|
||||||
// }
|
|
||||||
// Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
|
|
||||||
// (rv: any) => {
|
|
||||||
// message.success(this.t('HistoryPage.jsContent1'))
|
|
||||||
// this.collectionList.splice(index,1)
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
// Modal.confirm({
|
|
||||||
// title: this.t('HistoryPage.jsContent2'),
|
|
||||||
// icon: createVNode(ExclamationCircleOutlined),
|
|
||||||
// okText: 'Yes',
|
|
||||||
// cancelText: 'No',
|
|
||||||
// centered:true,
|
|
||||||
// mask:false,
|
|
||||||
// onOk() {
|
|
||||||
// deleteGroupFun(record.id,index)
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// },
|
|
||||||
|
|
||||||
refund(record: any) {
|
|
||||||
// this.$router.push({name:'home',params: {id:record.id}})
|
|
||||||
this.record = record
|
|
||||||
this.showRefundReason = true
|
|
||||||
},
|
|
||||||
getReasonCategory(){
|
|
||||||
if(this.reason == 'Rests'){
|
|
||||||
}else{
|
}else{
|
||||||
this.reasonTextarea = ''
|
setInit = this.$refs.allOrder
|
||||||
}
|
}
|
||||||
},
|
setInit.init()
|
||||||
setReason(){
|
}
|
||||||
let reason = this.reason
|
|
||||||
this.loadingShow = true
|
|
||||||
if(this.reason == 'Rests'){
|
|
||||||
reason = this.reasonTextarea?this.reasonTextarea:this.reason
|
|
||||||
}
|
|
||||||
|
|
||||||
// return
|
|
||||||
|
|
||||||
let httpsUrl = Https.httpUrls.tradeRefundAlipay
|
|
||||||
if(this.record.paymentType == "PayPal"){
|
|
||||||
httpsUrl = Https.httpUrls.tradeRefundPaypal
|
|
||||||
}
|
|
||||||
Https.axiosPost(
|
|
||||||
httpsUrl + `/${this.record.orderNo}/${reason}`,
|
|
||||||
{}
|
|
||||||
).then((rv: any) => {
|
|
||||||
this.getHistoryList()
|
|
||||||
this.loadingShow = false
|
|
||||||
this.showRefundReason = false
|
|
||||||
})
|
|
||||||
.catch((res) => {});
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.payOrder_modal ,.refund_reason{
|
.payOrder_modal {
|
||||||
// max-width: 1200px ;
|
// max-width: 1200px ;
|
||||||
// max-width: 1150px ;
|
// max-width: 1150px ;
|
||||||
.ant-modal-content {
|
.ant-modal-content {
|
||||||
@@ -396,209 +105,53 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal_component.refund_reason{
|
|
||||||
.ant-modal-content {
|
|
||||||
.ant-modal-body {
|
|
||||||
// height: calc(65vh - 6.4rem);
|
|
||||||
padding: 3rem;
|
|
||||||
height: calc(40rem * 1.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.payOrder_modal {
|
.payOrder_modal {
|
||||||
.closeIcon {
|
.closeIcon {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.history_page {
|
.payOrder_page {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 9rem;
|
padding: 9rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
// min-width: 1440px;
|
// min-width: 1440px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
.payOrder_page_title{
|
||||||
.page_content {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.page_content_bg {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page_content_body {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.history_page_body {
|
|
||||||
width: 100%;
|
|
||||||
// height: calc(100% - 7rem);
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.history_header {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
height: 6.3rem;
|
|
||||||
line-height: 6.3rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history_table_search {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.range_picker {
|
|
||||||
width: 36rem;
|
|
||||||
height: 4.8rem;
|
|
||||||
|
|
||||||
.ant-picker-input > input {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.range_picker_icon {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content_search_block {
|
|
||||||
margin-left: 4rem;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.search_input {
|
|
||||||
width: 32.8rem;
|
|
||||||
padding-left: 1.5rem;
|
|
||||||
height: 4.8rem;
|
|
||||||
line-height: 4.6rem;
|
|
||||||
background: #ffffff;
|
|
||||||
border: 0.1rem solid #f1f1f1;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: #c2c2c2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search_icon_block {
|
|
||||||
width: 7.2rem;
|
|
||||||
height: 4.8rem;
|
|
||||||
line-height: 4.8rem;
|
|
||||||
text-align: center;
|
|
||||||
background: #343579;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.icon-sousuo {
|
|
||||||
font-size: 2rem;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.history_table_content {
|
|
||||||
margin-top: 2.6rem;
|
|
||||||
width: 100%;
|
|
||||||
// height: calc(100% - 13.7rem);
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(255, 255, 255, 0.6);
|
|
||||||
padding-bottom: 3rem;
|
|
||||||
.ant-table {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-body {
|
|
||||||
overflow-y: auto !important;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
overflow: -moz-scrollbars-none;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-thead > tr > th {
|
|
||||||
background: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-tbody > tr > td {
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-tbody > tr {
|
|
||||||
&:hover > td {
|
|
||||||
background: #ffffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-pagination-right {
|
|
||||||
padding-right: 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.operate_list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 1rem;
|
|
||||||
|
|
||||||
.operate_item {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-family: Roboto;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #343579;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.refund_reason{
|
|
||||||
.reason{
|
|
||||||
height: calc(27rem * 1.2);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 0 3rem;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
label{
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
.payOrder_page_title_item{
|
||||||
flex-direction: column;
|
padding: 2rem 1rem;
|
||||||
overflow: hidden;
|
margin: 0 2rem;
|
||||||
div{
|
position: relative;
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
input,span{
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
font-size: var(--aida-fsize1-8);
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all .3s;
|
||||||
|
&.active{
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
&.active::before{
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
span{
|
.payOrder_page_title_item::before{
|
||||||
margin: 0 1rem;
|
position: absolute;
|
||||||
}
|
content: "";
|
||||||
textarea{
|
width: 0%;
|
||||||
flex: 1;
|
height: 0.5rem;
|
||||||
width: 100%;
|
background: #000;
|
||||||
outline-color:#767676;
|
bottom: .8rem;
|
||||||
resize: none;
|
left: auto;
|
||||||
}
|
right: 0;
|
||||||
textarea:focus-visible {
|
transition: all .3s;
|
||||||
border-color: #767676;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
.payOrder_table_content{
|
||||||
.subitOkPreviewBtn{
|
height: 100%;
|
||||||
margin-top: 1rem;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
216
src/component/Pay/refund.vue
Normal file
@@ -0,0 +1,216 @@
|
|||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
class="modal_component refund_reason"
|
||||||
|
v-model:visible="showRefundReason"
|
||||||
|
:footer="null"
|
||||||
|
width="50%"
|
||||||
|
:maskClosable="false"
|
||||||
|
:mask="false"
|
||||||
|
:centered="true"
|
||||||
|
:closable="false"
|
||||||
|
wrapClassName="#app"
|
||||||
|
:keyboard="false"
|
||||||
|
>
|
||||||
|
<div class="closeIcon">
|
||||||
|
|
||||||
|
<i class="fi fi-rr-cross-small" @click.stop="cancelRefundreason()"></i>
|
||||||
|
</div>
|
||||||
|
<div class="modal_title_text">
|
||||||
|
Refund Reason
|
||||||
|
</div>
|
||||||
|
<div class="reason">
|
||||||
|
<label>
|
||||||
|
<div>
|
||||||
|
<input name="reason" type="radio" @click="getReasonCategory" value="noLike" v-model="reason">
|
||||||
|
<span>Dislike</span>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<div>
|
||||||
|
<input name="reason" type="radio" @click="getReasonCategory" value="Rests" v-model="reason">
|
||||||
|
<span>Rests</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<textarea v-show="reason == 'Rests'" name="" id="" cols="40" rows="10" v-model="reasonTextarea"></textarea>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="subitOkPreviewBtn" @click="setReason">OK</div>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref, createVNode, computed, nextTick } from "vue";
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { formatTime } from "@/tool/util";
|
||||||
|
import { Modal, message } from "ant-design-vue";
|
||||||
|
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
let showRefundReason: any = ref(false);
|
||||||
|
let record: any = ref();//订单编号
|
||||||
|
let reason: any = ref('noLike');//原因
|
||||||
|
let reasonTextarea: any = ref();//原因
|
||||||
|
let loadingShow: any = ref(false);
|
||||||
|
let { t } = useI18n();
|
||||||
|
return {
|
||||||
|
showRefundReason,
|
||||||
|
record,
|
||||||
|
reason,
|
||||||
|
reasonTextarea,
|
||||||
|
loadingShow,
|
||||||
|
t,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
cancelRefundreason(){//关闭退款页面
|
||||||
|
this.record = ''
|
||||||
|
this.showRefundReason = false;
|
||||||
|
},
|
||||||
|
//删除分组
|
||||||
|
// deleteGroup(record:any,index:number){
|
||||||
|
// let deleteGroupFun = (id:any,index:number) =>{
|
||||||
|
// let data = {
|
||||||
|
// userGroupId:id
|
||||||
|
// }
|
||||||
|
// Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
|
||||||
|
// (rv: any) => {
|
||||||
|
// message.success(this.t('HistoryPage.jsContent1'))
|
||||||
|
// this.collectionList.splice(index,1)
|
||||||
|
// }
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// Modal.confirm({
|
||||||
|
// title: this.t('HistoryPage.jsContent2'),
|
||||||
|
// icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
// okText: 'Yes',
|
||||||
|
// cancelText: 'No',
|
||||||
|
// centered:true,
|
||||||
|
// mask:false,
|
||||||
|
// onOk() {
|
||||||
|
// deleteGroupFun(record.id,index)
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
|
||||||
|
refund(record: any) {
|
||||||
|
// this.$router.push({name:'home',params: {id:record.id}})
|
||||||
|
this.record = record
|
||||||
|
this.showRefundReason = true
|
||||||
|
},
|
||||||
|
getReasonCategory(){
|
||||||
|
if(this.reason == 'Rests'){
|
||||||
|
}else{
|
||||||
|
this.reasonTextarea = ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setReason(){
|
||||||
|
let reason = this.reason
|
||||||
|
this.loadingShow = true
|
||||||
|
if(this.reason == 'Rests'){
|
||||||
|
reason = this.reasonTextarea?this.reasonTextarea:this.reason
|
||||||
|
}
|
||||||
|
|
||||||
|
// return
|
||||||
|
|
||||||
|
let httpsUrl = Https.httpUrls.tradeRefundAlipay
|
||||||
|
if(this.record.paymentType == "PayPal"){
|
||||||
|
httpsUrl = Https.httpUrls.tradeRefundPaypal
|
||||||
|
}
|
||||||
|
Https.axiosPost(
|
||||||
|
httpsUrl + `/${this.record.orderNo}/${reason}`,
|
||||||
|
{}
|
||||||
|
).then((rv: any) => {
|
||||||
|
this.loadingShow = false
|
||||||
|
this.showRefundReason = false
|
||||||
|
})
|
||||||
|
.catch((res) => {});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.refund_reason{
|
||||||
|
// max-width: 1200px ;
|
||||||
|
// max-width: 1150px ;
|
||||||
|
.ant-modal-content {
|
||||||
|
border-radius: calc(1rem * 1.2);
|
||||||
|
overflow: hidden;
|
||||||
|
.ant-modal-header {
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.ant-modal-body {
|
||||||
|
// height: calc(65vh - 6.4rem);
|
||||||
|
height: calc(65rem * 1.2);
|
||||||
|
}
|
||||||
|
//进度完成字体颜色
|
||||||
|
|
||||||
|
.ant-progress-circle.ant-progress-status-success .ant-progress-text {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.ant-progress-circle .ant-progress-text {
|
||||||
|
color: rgba(0, 0, 0, 0.55);
|
||||||
|
font-size: calc(1.6rem * 1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal_component.refund_reason{
|
||||||
|
.ant-modal-content {
|
||||||
|
.ant-modal-body {
|
||||||
|
// height: calc(65vh - 6.4rem);
|
||||||
|
padding: 3rem;
|
||||||
|
height: calc(40rem * 1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="less">
|
||||||
|
.refund_reason{
|
||||||
|
.reason{
|
||||||
|
height: calc(27rem * 1.2);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0 3rem;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
label{
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
div{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
input,span{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
margin: 0 1rem;
|
||||||
|
}
|
||||||
|
textarea{
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
outline-color:#767676;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
textarea:focus-visible {
|
||||||
|
border-color: #767676;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.subitOkPreviewBtn{
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -117,11 +117,10 @@ router.beforeEach((to, from, next) => {
|
|||||||
let token = getCookie("token");
|
let token = getCookie("token");
|
||||||
let isMurmur = JSON.parse(getIsMurmur)
|
let isMurmur = JSON.parse(getIsMurmur)
|
||||||
let routeList = ['/testClickData','/trialApproval']//指定页面需要指定id才能进入
|
let routeList = ['/testClickData','/trialApproval']//指定页面需要指定id才能进入
|
||||||
let userIdList = [83,88,6]
|
let userIdList = [83,88,6,87]
|
||||||
const routeExists = router.getRoutes().some(({ name }) =>{
|
const routeExists = router.getRoutes().some(({ name }) =>{
|
||||||
if(name){
|
if(name){
|
||||||
console.log(name , to.name);
|
return name === to.name
|
||||||
return name === to.name
|
|
||||||
}else{
|
}else{
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
@@ -141,7 +140,7 @@ router.beforeEach((to, from, next) => {
|
|||||||
if(userIdList.indexOf(userInfo.userId) > -1){
|
if(userIdList.indexOf(userInfo.userId) > -1){
|
||||||
next();
|
next();
|
||||||
}else{
|
}else{
|
||||||
next({ name: 'home' });
|
next({ name: '/404' });
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
next();
|
next();
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import Fingerprint2 from 'fingerprintjs2';//获取浏览器唯一标识
|
import Fingerprint2 from 'fingerprintjs2';//获取浏览器唯一标识
|
||||||
const isEmail = (email) => {
|
const isEmail = (email) => {//判断邮箱格式
|
||||||
let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
|
let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
|
||||||
let result = reg.test(email)
|
let result = reg.test(email)
|
||||||
return result
|
return result
|
||||||
@@ -11,7 +11,7 @@ const getUploadUrl = () => {
|
|||||||
return url
|
return url
|
||||||
}
|
}
|
||||||
|
|
||||||
function dataURLtoBlob(dataurl) {
|
function dataURLtoBlob(dataurl) {//吧data url转为blob对象
|
||||||
var arr = dataurl.split(',');
|
var arr = dataurl.split(',');
|
||||||
var mime = arr[0].match(/:(.*?);/)[1];
|
var mime = arr[0].match(/:(.*?);/)[1];
|
||||||
var bstr = atob(arr[1]);
|
var bstr = atob(arr[1]);
|
||||||
@@ -23,7 +23,7 @@ function dataURLtoBlob(dataurl) {
|
|||||||
return new Blob([u8arr], { type: mime });
|
return new Blob([u8arr], { type: mime });
|
||||||
}
|
}
|
||||||
|
|
||||||
function blobToFile(blob, fileName) {
|
function blobToFile(blob, fileName) {//给blob文件设置名字和日期
|
||||||
blob.lastModifiedDate = new Date();
|
blob.lastModifiedDate = new Date();
|
||||||
blob.name = fileName;
|
blob.name = fileName;
|
||||||
return blob;
|
return blob;
|
||||||
@@ -51,7 +51,7 @@ function downloadIamge(imgsrc, name) { // 下载图片地址和图片名
|
|||||||
image.src = imgsrc
|
image.src = imgsrc
|
||||||
}
|
}
|
||||||
|
|
||||||
function dataURLtoFile(dataurl, filename) {
|
function dataURLtoFile(dataurl, filename) {//吧url转为文件对象,指定文件名称
|
||||||
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
||||||
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
||||||
while (n--) {
|
while (n--) {
|
||||||
@@ -61,7 +61,7 @@ function dataURLtoFile(dataurl, filename) {
|
|||||||
return blobToFile(blob, filename);
|
return blobToFile(blob, filename);
|
||||||
}
|
}
|
||||||
|
|
||||||
const base64toFile = (dataurl, filename = 'file') => {
|
const base64toFile = (dataurl, filename = 'file') => {//转换base64
|
||||||
let arr = dataurl.split(',')
|
let arr = dataurl.split(',')
|
||||||
let mime = arr[0].match(/:(.*?);/)[1]
|
let mime = arr[0].match(/:(.*?);/)[1]
|
||||||
let suffix = mime.split('/')[1]
|
let suffix = mime.split('/')[1]
|
||||||
@@ -77,7 +77,7 @@ const base64toFile = (dataurl, filename = 'file') => {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function rgbToHsv([R, G, B]) {
|
function rgbToHsv([R, G, B]) {//根据rgb获取hsv
|
||||||
R /= 255
|
R /= 255
|
||||||
G /= 255
|
G /= 255
|
||||||
B /= 255
|
B /= 255
|
||||||
@@ -108,7 +108,7 @@ function rgbToHsv([R, G, B]) {
|
|||||||
return [H, S, V]
|
return [H, S, V]
|
||||||
}
|
}
|
||||||
|
|
||||||
const formatTime = (timestamp, fmt) => {
|
const formatTime = (timestamp, fmt) => {//吧时间戳转为YYYY-MM-DD hh:mm:ss格式
|
||||||
// date = new Date(), fmt = 'MM/dd/yyyy';
|
// date = new Date(), fmt = 'MM/dd/yyyy';
|
||||||
let date = new Date();
|
let date = new Date();
|
||||||
date.setTime(timestamp * 1000);
|
date.setTime(timestamp * 1000);
|
||||||
@@ -146,7 +146,7 @@ const formatTime = (timestamp, fmt) => {
|
|||||||
return fmt;
|
return fmt;
|
||||||
}
|
}
|
||||||
|
|
||||||
const isMoible = () => {
|
const isMoible = () => {//判断是否是移动端
|
||||||
let is_mobile = navigator.userAgent.toLowerCase().match(/(ipad|ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
|
let is_mobile = navigator.userAgent.toLowerCase().match(/(ipad|ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
|
||||||
// alert(navigator.userAgent.toLowerCase())
|
// alert(navigator.userAgent.toLowerCase())
|
||||||
var isiPad = /iPad/.test(navigator.platform) || (navigator.maxTouchPoints && navigator.maxTouchPoints > 2);
|
var isiPad = /iPad/.test(navigator.platform) || (navigator.maxTouchPoints && navigator.maxTouchPoints > 2);
|
||||||
@@ -184,7 +184,7 @@ function getBrowserInfo() {//获取是什么浏览器
|
|||||||
return agent.match(regStr_saf);
|
return agent.match(regStr_saf);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
async function murmur(){
|
async function murmur(){//生成唯一标识 ,暂时没有使用
|
||||||
return await new Promise((resolve,reject)=>{
|
return await new Promise((resolve,reject)=>{
|
||||||
Fingerprint2.get(function (components) {
|
Fingerprint2.get(function (components) {
|
||||||
const values = components.map(function (
|
const values = components.map(function (
|
||||||
|
|||||||
@@ -104,14 +104,14 @@ export default defineComponent({
|
|||||||
// },
|
// },
|
||||||
// ],
|
// ],
|
||||||
},{
|
},{
|
||||||
name:'Trial User Approval',
|
name:'Design Frequency',
|
||||||
route:'/administrator/testClickData',
|
route:'/administrator/testClickData',
|
||||||
icon:'shenpi',
|
icon:'shenpi',
|
||||||
expandIcon:'icon-xiala',
|
expandIcon:'icon-xiala',
|
||||||
key:'/administrator/testClickData',
|
key:'/administrator/testClickData',
|
||||||
isShow:true,
|
isShow:true,
|
||||||
},{
|
},{
|
||||||
name:'Design Frequency',
|
name:'Trial User Approval',
|
||||||
route:'/administrator/trialApproval',
|
route:'/administrator/trialApproval',
|
||||||
icon:'usetime',
|
icon:'usetime',
|
||||||
key:'/administrator/trialApproval',
|
key:'/administrator/trialApproval',
|
||||||
|
|||||||
@@ -1010,126 +1010,6 @@ export default defineComponent({
|
|||||||
let exportModel:any = this.$refs.ExportModel
|
let exportModel:any = this.$refs.ExportModel
|
||||||
exportModel.init()
|
exportModel.init()
|
||||||
},
|
},
|
||||||
//导出合成图
|
|
||||||
// async exportCanvas() {
|
|
||||||
// let collectionReview: any = document.querySelector(
|
|
||||||
// "#exportNewCoolection"
|
|
||||||
// );
|
|
||||||
// let rightContentImgBlock: any = document.querySelector(
|
|
||||||
// "#right_content_img_block"
|
|
||||||
// );
|
|
||||||
// if(this.driver__.driver){
|
|
||||||
// nextTick().then(()=>{
|
|
||||||
// driverObj__.moveNext();
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
|
|
||||||
// let a = document.createElement("a");
|
|
||||||
// // this.isShowMark = true;
|
|
||||||
// let img:any = []
|
|
||||||
// await html2canvas(collectionReview, { useCORS: true, scale: 3 }).then(
|
|
||||||
// async (canvas) => {
|
|
||||||
// let blob: any = dataURLtoBlob(
|
|
||||||
// canvas.toDataURL("image/png")
|
|
||||||
// );
|
|
||||||
// let allBoardData: any =
|
|
||||||
// this.store.state.UploadFilesModule.allBoardData;
|
|
||||||
// let index = 0;
|
|
||||||
// img.push({
|
|
||||||
// imgUrl: URL.createObjectURL(blob),
|
|
||||||
// name: "collection.png",
|
|
||||||
// })
|
|
||||||
// let num = 0
|
|
||||||
// for (let key in allBoardData) {
|
|
||||||
// if (key !== "colorBoards" && key !== "moodTemplateId") {
|
|
||||||
// if(this.exportNav[num]?.change || key == 'disposeMoodboard'){
|
|
||||||
// for (let item of allBoardData[key]) {
|
|
||||||
// if(key == 'disposeMoodboard' && allBoardData[key][0]==undefined){
|
|
||||||
// break
|
|
||||||
// }
|
|
||||||
// let nameTail = item?.imgUrl?.split(".").pop().split("?").shift();
|
|
||||||
// let data = {
|
|
||||||
// imgUrl: item.imgUrl,
|
|
||||||
// name:
|
|
||||||
// item?.resData?.name +
|
|
||||||
// index +
|
|
||||||
// "." +
|
|
||||||
// nameTail,
|
|
||||||
// };
|
|
||||||
// img.push(data);
|
|
||||||
// index++;
|
|
||||||
// }
|
|
||||||
// }else{
|
|
||||||
// }
|
|
||||||
// num++
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// let dataList:any = []
|
|
||||||
// this.likeDesignCollectionList.forEach((item:any)=>{
|
|
||||||
// let nameTail = item?.designOutfitUrl?.split(".").pop().split("?").shift();
|
|
||||||
// let data = {
|
|
||||||
// imgUrl: item.designOutfitUrl,
|
|
||||||
// name:
|
|
||||||
// 'result' +
|
|
||||||
// index +
|
|
||||||
// "." +
|
|
||||||
// nameTail,
|
|
||||||
// };
|
|
||||||
// dataList.push(item.designItemId)
|
|
||||||
// img.push(data);
|
|
||||||
// index++;
|
|
||||||
// })
|
|
||||||
// let mannequinList:any = []
|
|
||||||
// await Https.axiosPost(Https.httpUrls.designGetModel, dataList)
|
|
||||||
// .then((rv: any) => {
|
|
||||||
// mannequinList = rv
|
|
||||||
// })
|
|
||||||
// .catch((rv) => {
|
|
||||||
// });
|
|
||||||
|
|
||||||
// mannequinList.forEach((item:any) => {
|
|
||||||
// let nameTail = item?.split(".").pop().split("?").shift();
|
|
||||||
// let data = {
|
|
||||||
// imgUrl: item,
|
|
||||||
// name:
|
|
||||||
// 'mannequin' +
|
|
||||||
// index +
|
|
||||||
// "." +
|
|
||||||
// nameTail,
|
|
||||||
// };
|
|
||||||
// img.push(data);
|
|
||||||
// index++;
|
|
||||||
// });
|
|
||||||
// // a.setAttribute('href', URL.createObjectURL(blob));
|
|
||||||
// // a.setAttribute('download', `collection.png`);
|
|
||||||
// // a.click();
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
// //单独导出模特图
|
|
||||||
// // await html2canvas(rightContentImgBlock, { useCORS: true, scale: 3 }).then(
|
|
||||||
// // (canvas) => {
|
|
||||||
// // let blob: any = dataURLtoBlob(
|
|
||||||
// // canvas.toDataURL("image/png")
|
|
||||||
// // );
|
|
||||||
// // let allBoardData: any =
|
|
||||||
// // this.store.state.UploadFilesModule.allBoardData;
|
|
||||||
// // let index = 0;
|
|
||||||
// // img.push({
|
|
||||||
// // imgUrl: URL.createObjectURL(blob),
|
|
||||||
// // name: "achievement.png",
|
|
||||||
// // },)
|
|
||||||
// // this.likeDesignCollectionList.forEach((item:any) => {
|
|
||||||
// // let data = {
|
|
||||||
// // imgUrl:item.designItemUrl,
|
|
||||||
// // name:item.pictureName
|
|
||||||
// // }
|
|
||||||
// // img.push(data)
|
|
||||||
// // });
|
|
||||||
// // }
|
|
||||||
// // );
|
|
||||||
// // return
|
|
||||||
// this.downImg(img);
|
|
||||||
// },
|
|
||||||
|
|
||||||
//打开图片详情
|
//打开图片详情
|
||||||
designDetail(
|
designDetail(
|
||||||
@@ -1166,54 +1046,6 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
//通过url 转为blob格式的数据
|
|
||||||
getImgArrayBuffer(url: any) {
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
//通过请求获取文件blob格式
|
|
||||||
let xmlhttp = new XMLHttpRequest();
|
|
||||||
xmlhttp.open("GET", url, true);
|
|
||||||
xmlhttp.responseType = "blob";
|
|
||||||
xmlhttp.onload = function () {
|
|
||||||
if (this.status == 200) {
|
|
||||||
resolve(this.response);
|
|
||||||
} else {
|
|
||||||
reject(this.status);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xmlhttp.send();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// imgDataUrl 数据的url数组
|
|
||||||
// downImg(imagesParams: any) {
|
|
||||||
// let _this: any = this;
|
|
||||||
// let zip = new JSZip();
|
|
||||||
// let cache: any = {};
|
|
||||||
// let promises = [];
|
|
||||||
// for (let item of imagesParams) {
|
|
||||||
// const promise = _this
|
|
||||||
// .getImgArrayBuffer(item.imgUrl)
|
|
||||||
// .then((data: any) => {
|
|
||||||
// // 下载文件, 并存成ArrayBuffer对象(blob)
|
|
||||||
// zip.file(item.name, data, { binary: true }); // 逐个添加文件
|
|
||||||
// cache[item.title] = data;
|
|
||||||
// });
|
|
||||||
// promises.push(promise);
|
|
||||||
// }
|
|
||||||
// Promise.all(promises)
|
|
||||||
// .then(() => {
|
|
||||||
// zip.generateAsync({ type: "blob" }).then((content: any) => {
|
|
||||||
// // 生成二进制流
|
|
||||||
// FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件 自定义文件名
|
|
||||||
// this.isShowMark = false;
|
|
||||||
// });
|
|
||||||
// })
|
|
||||||
// .catch((res) => {
|
|
||||||
// message.warning(this.t('HomeView.jsContent3'));
|
|
||||||
// this.isShowMark = false;
|
|
||||||
// });
|
|
||||||
// },
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||