更新笔触和管理员页面

This commit is contained in:
X1627315083
2024-03-15 09:21:17 +08:00
parent bc314a2f83
commit b15d2e467f
29 changed files with 2792 additions and 1385 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

@@ -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

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

View File

@@ -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);

View File

@@ -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);

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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()
}, },

View 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>

View 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>

View File

@@ -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>

View 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>

View File

@@ -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();

View File

@@ -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 (

View File

@@ -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',

View File

@@ -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>