Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite
This commit is contained in:
李志鹏
BIN
src/assets/images/seller/selectCollectionNullStatus.png
Normal file
BIN
src/assets/images/seller/selectCollectionNullStatus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="admin_page">
|
||||
<div class="admin_table_search" :style="{height:isAwayOrUnfold?'7rem':''}">
|
||||
<div class="admin_table_search" :style="{ height: isAwayOrUnfold ? '7rem' : '' }">
|
||||
<div class="admin_state">
|
||||
<div class="admin_state_item">
|
||||
<span>Create Time:</span>
|
||||
@@ -8,16 +8,11 @@
|
||||
style="width: 250px"
|
||||
class="range_picker"
|
||||
v-model:value="rangePickerValue"
|
||||
:placeholder="[
|
||||
$t('HistoryPage.StartDate'),
|
||||
$t('HistoryPage.EndDate'),
|
||||
]"
|
||||
:placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]"
|
||||
valueFormat="YYYY-MM-DD"
|
||||
>
|
||||
<template #suffixIcon>
|
||||
<span
|
||||
class="icon iconfont range_picker_icon icon-rili"
|
||||
></span>
|
||||
<span class="icon iconfont range_picker_icon icon-rili"></span>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</div>
|
||||
@@ -63,38 +58,50 @@
|
||||
show-search
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>Orgnization:</span>
|
||||
<a-select
|
||||
v-model:value="organizationId"
|
||||
placeholder="Select the organization"
|
||||
allow-clear
|
||||
style="width: 250px"
|
||||
@popupScroll="handleOrganizationScroll"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in organizationOptions"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin_search">
|
||||
<div class="admin_search_item" @click="searchHistoryList" :style="{height:isAwayOrUnfold?'4rem':''}">
|
||||
<div
|
||||
class="admin_search_item"
|
||||
@click="searchHistoryList"
|
||||
:style="{ height: isAwayOrUnfold ? '4rem' : '' }"
|
||||
>
|
||||
Search
|
||||
</div>
|
||||
<div class="admin_search_item" @click="addhHistoryList">
|
||||
Add
|
||||
</div>
|
||||
<div class="admin_search_item" @click="addhHistoryList">Add</div>
|
||||
</div>
|
||||
<div class="admin_state_list">
|
||||
<div
|
||||
class="admin_state_list_item"
|
||||
@click="lastGeTrialList('year')"
|
||||
>
|
||||
<div class="admin_state_list_item" @click="lastGeTrialList('year')">
|
||||
Nearly a year
|
||||
</div>
|
||||
<div
|
||||
class="admin_state_list_item"
|
||||
@click="lastGeTrialList('month')"
|
||||
>
|
||||
<div class="admin_state_list_item" @click="lastGeTrialList('month')">
|
||||
Last month
|
||||
</div>
|
||||
<div
|
||||
class="admin_state_list_item"
|
||||
@click="lastGeTrialList('week')"
|
||||
>
|
||||
Last week
|
||||
<div class="admin_state_list_item" @click="lastGeTrialList('week')">Last week</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="awayOrUnfold" :class="{active:isAwayOrUnfold}">
|
||||
<span class="icon iconfont menu_icon icon-xiala" @click="()=>isAwayOrUnfold = !isAwayOrUnfold"></span>
|
||||
<div class="awayOrUnfold" :class="{ active: isAwayOrUnfold }">
|
||||
<span
|
||||
class="icon iconfont menu_icon icon-xiala"
|
||||
@click="() => (isAwayOrUnfold = !isAwayOrUnfold)"
|
||||
></span>
|
||||
</div>
|
||||
<div class="admin_table_content" ref="historyTable">
|
||||
<a-table
|
||||
@@ -104,24 +111,19 @@
|
||||
:data-source="dataList"
|
||||
:scroll="{ y: historyTableHeight }"
|
||||
@change="changePage"
|
||||
:showSorterTooltip='false'
|
||||
:showSorterTooltip="false"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
current: currentPage,
|
||||
pageSize: pageSize,
|
||||
total: total,
|
||||
showQuickJumper: true,
|
||||
bordered: false,
|
||||
bordered: false
|
||||
}"
|
||||
>
|
||||
<template #bodyCell="{ column, text, record, index }">
|
||||
<div class="operate_list" v-if="column?.Operations">
|
||||
<div
|
||||
class="operate_item"
|
||||
@click="setAagree(record)"
|
||||
>
|
||||
Edit
|
||||
</div>
|
||||
<div class="operate_item" @click="setAagree(record)">Edit</div>
|
||||
<!-- <div
|
||||
class="operate_item"
|
||||
@click="deleteGroup(record, index)"
|
||||
@@ -132,34 +134,29 @@
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
<allUserPoerationsVue ref="allUserPoerationsVue" @searchHistoryList="searchHistoryList"></allUserPoerationsVue>
|
||||
<allUserPoerationsVue
|
||||
ref="allUserPoerationsVue"
|
||||
@searchHistoryList="searchHistoryList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent,
|
||||
ref,
|
||||
createVNode,
|
||||
computed,
|
||||
reactive,
|
||||
toRefs,
|
||||
onMounted,
|
||||
} from "vue";
|
||||
import { formatTime } from "@/tool/util";
|
||||
import { useStore } from "vuex";
|
||||
import { Https } from "@/tool/https";
|
||||
import allUserPoerationsVue from "./allUserPoerations.vue";
|
||||
import SelectUser from '@/component/common/SelectUser.vue'
|
||||
import { defineComponent, ref, createVNode, computed, reactive, toRefs, onMounted } from "vue"
|
||||
import { formatTime } from "@/tool/util"
|
||||
import { useStore } from "vuex"
|
||||
import { Https } from "@/tool/https"
|
||||
import allUserPoerationsVue from "./allUserPoerations.vue"
|
||||
import SelectUser from "@/component/common/SelectUser.vue"
|
||||
export default defineComponent({
|
||||
components: {allUserPoerationsVue,SelectUser},
|
||||
components: { allUserPoerationsVue, SelectUser },
|
||||
setup() {
|
||||
const store:any = useStore()
|
||||
const store: any = useStore()
|
||||
let filter: any = reactive({
|
||||
dataList: [],
|
||||
tableLoading: false,
|
||||
allCountry:[],
|
||||
isAwayOrUnfold:false
|
||||
});
|
||||
allCountry: [],
|
||||
isAwayOrUnfold: false
|
||||
})
|
||||
let filterData: any = reactive({
|
||||
rangePickerValue: [],
|
||||
currentPage: 1,
|
||||
@@ -172,40 +169,41 @@ export default defineComponent({
|
||||
occupation: "",
|
||||
systemUser: "",
|
||||
order: "", //'Ascending 升序 Descending 降序'
|
||||
orderBy:'',
|
||||
orderBy: "",
|
||||
userName: "",
|
||||
});
|
||||
organizationId: null
|
||||
})
|
||||
let state: any = ref([
|
||||
{
|
||||
label: "all",
|
||||
value: "",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
label:'visitor',
|
||||
value:'0',
|
||||
label: "visitor",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label:'yearly',
|
||||
value:'1',
|
||||
label: "yearly",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label:'monthly',
|
||||
value:'2',
|
||||
label: "monthly",
|
||||
value: "2"
|
||||
},
|
||||
{
|
||||
label:'trial',
|
||||
value:'3',
|
||||
label: "trial",
|
||||
value: "3"
|
||||
},
|
||||
{
|
||||
label: "userInEvent",
|
||||
value: "4",
|
||||
value: "4"
|
||||
},
|
||||
{
|
||||
label: "Edu Admin",
|
||||
value: "7",
|
||||
},
|
||||
]);
|
||||
let renameData: any = ref({}); //修改名字选中的数据
|
||||
value: "7"
|
||||
}
|
||||
])
|
||||
let renameData: any = ref({}) //修改名字选中的数据
|
||||
const columns: any = computed(() => {
|
||||
return [
|
||||
{
|
||||
@@ -213,25 +211,25 @@ export default defineComponent({
|
||||
align: "center",
|
||||
dataIndex: "id",
|
||||
key: "id",
|
||||
width:100,
|
||||
width: 100,
|
||||
fixed: "left",
|
||||
sorter: true,
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: "Email",
|
||||
align: "center",
|
||||
dataIndex: "userEmail",
|
||||
key: "userEmail",
|
||||
width:200,
|
||||
ellipsis:true
|
||||
width: 200,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: "User Name",
|
||||
align: "center",
|
||||
dataIndex: "userName",
|
||||
key: "userName",
|
||||
width:150,
|
||||
ellipsis:true
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
// customRender: (record: any) => {
|
||||
// let time = formatTime(
|
||||
// record.text / 1000,
|
||||
@@ -245,77 +243,77 @@ export default defineComponent({
|
||||
align: "center",
|
||||
dataIndex: "language",
|
||||
key: "language",
|
||||
width:100,
|
||||
ellipsis:true,
|
||||
width: 100,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: "Valid Start Time",
|
||||
align: "center",
|
||||
dataIndex: "validStartTime",
|
||||
key: "validstartTime",
|
||||
width:200,
|
||||
ellipsis:true,
|
||||
width: 200,
|
||||
ellipsis: true,
|
||||
customRender: (record: any) => {
|
||||
let time = ''
|
||||
if(record.text){
|
||||
time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
|
||||
let time = ""
|
||||
if (record.text) {
|
||||
time = formatTime(record.text / 1000, "YYYY-MM-DD hh:mm:ss")
|
||||
}
|
||||
return time
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Valid End Time",
|
||||
align: "center",
|
||||
dataIndex: "validEndTime",
|
||||
key: "validendTime",
|
||||
width:200,
|
||||
ellipsis:true,
|
||||
width: 200,
|
||||
ellipsis: true,
|
||||
customRender: (record: any) => {
|
||||
let time = ''
|
||||
if(record.text){
|
||||
time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
|
||||
let time = ""
|
||||
if (record.text) {
|
||||
time = formatTime(record.text / 1000, "YYYY-MM-DD hh:mm:ss")
|
||||
}
|
||||
return time
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Country or Region",
|
||||
align: "center",
|
||||
dataIndex: "country",
|
||||
key: "country",
|
||||
width:200,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Create Date",
|
||||
align: "center",
|
||||
dataIndex: "createDate",
|
||||
key: "createDate",
|
||||
width:200,
|
||||
sorter: true,
|
||||
width: 200,
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: "Is Beginner",
|
||||
align: "center",
|
||||
dataIndex: "isBeginner",
|
||||
key: "isBeginner",
|
||||
width:80,
|
||||
ellipsis:true,
|
||||
width: 80,
|
||||
ellipsis: true,
|
||||
customRender: (record: any) => {
|
||||
let str;
|
||||
let str
|
||||
if (record.value == 1) {
|
||||
str = "Yes";
|
||||
str = "Yes"
|
||||
} else {
|
||||
str = "No";
|
||||
str = "No"
|
||||
}
|
||||
return str
|
||||
}
|
||||
return str;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Machine Room Ip',
|
||||
title: "Machine Room Ip",
|
||||
align: "center",
|
||||
dataIndex: "browserIdentifiers",
|
||||
key: "browserIdentifiers",
|
||||
width:200,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Credits",
|
||||
@@ -326,11 +324,11 @@ export default defineComponent({
|
||||
// resizable: true,
|
||||
dataIndex: "credits",
|
||||
key: "credits",
|
||||
width:100,
|
||||
sorter: true,
|
||||
width: 100,
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'User Type',
|
||||
title: "User Type",
|
||||
align: "center",
|
||||
// width: 150,
|
||||
// minWidth: 100,
|
||||
@@ -338,84 +336,84 @@ export default defineComponent({
|
||||
// resizable: true,
|
||||
dataIndex: "systemUser",
|
||||
key: "systemUser",
|
||||
width:100,
|
||||
width: 100,
|
||||
customRender: (record: any) => {
|
||||
let str;
|
||||
let str
|
||||
if (record.value == 0) {
|
||||
str = "visitor";
|
||||
str = "visitor"
|
||||
} else if (record.value == 1) {
|
||||
str = "yearly";
|
||||
str = "yearly"
|
||||
} else if (record.value == 2) {
|
||||
str = "monthly";
|
||||
str = "monthly"
|
||||
} else if (record.value == 3) {
|
||||
str = "trial";
|
||||
str = "trial"
|
||||
} else if (record.value == 4) {
|
||||
str = "userInEvent";
|
||||
str = "userInEvent"
|
||||
} else if (record.value == 7) {
|
||||
str = "Edu Admin";
|
||||
str = "Edu Admin"
|
||||
}
|
||||
return str
|
||||
}
|
||||
return str;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Operations",
|
||||
key: "operation",
|
||||
width:120,
|
||||
width: 120,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
// slots:{customRender:'action'}
|
||||
Operations: true,
|
||||
},
|
||||
];
|
||||
});
|
||||
Operations: true
|
||||
}
|
||||
]
|
||||
})
|
||||
//改变页码
|
||||
let changePage = (e: any, filters:any, sorter:any) => {
|
||||
filterData.currentPage = e.current;
|
||||
filterData.pageSize = e.pageSize;
|
||||
if(sorter.order){
|
||||
if(sorter.columnKey == 'id'){
|
||||
filterData.orderBy = 'id'
|
||||
}else if(sorter.columnKey == "createDate"){
|
||||
filterData.orderBy = 'time'
|
||||
}else if(sorter.columnKey == "credits"){
|
||||
filterData.orderBy = 'credits'
|
||||
let changePage = (e: any, filters: any, sorter: any) => {
|
||||
filterData.currentPage = e.current
|
||||
filterData.pageSize = e.pageSize
|
||||
if (sorter.order) {
|
||||
if (sorter.columnKey == "id") {
|
||||
filterData.orderBy = "id"
|
||||
} else if (sorter.columnKey == "createDate") {
|
||||
filterData.orderBy = "time"
|
||||
} else if (sorter.columnKey == "credits") {
|
||||
filterData.orderBy = "credits"
|
||||
}
|
||||
}
|
||||
if(sorter.order){
|
||||
filterData.order = sorter.order == "descend" ? "Descending" : "Ascending";
|
||||
}else{
|
||||
filterData.order = ''
|
||||
if (sorter.order) {
|
||||
filterData.order = sorter.order == "descend" ? "Descending" : "Ascending"
|
||||
} else {
|
||||
filterData.order = ""
|
||||
}
|
||||
gettrialList()
|
||||
}
|
||||
gettrialList();
|
||||
};
|
||||
|
||||
//查询列表
|
||||
let searchHistoryList = () => {
|
||||
filterData.currentPage = 1;
|
||||
gettrialList();
|
||||
};
|
||||
filterData.currentPage = 1
|
||||
gettrialList()
|
||||
}
|
||||
let clearHistoryList = () => {
|
||||
filterData.rangePickerValue = [],
|
||||
filterData.currentPage = 1,
|
||||
filterData.pageSize = 10,
|
||||
filterData.total = 0,
|
||||
filterData.country = "",
|
||||
filterData.email = "",
|
||||
filterData.userType = "",
|
||||
filterData.ids = [],
|
||||
filterData.occupation = "",
|
||||
filterData.order = "", //'Ascending 升序 Descending 降序'
|
||||
filterData.orderBy = "", //'Ascending 升序 Descending 降序'
|
||||
filterData.systemUser = "",
|
||||
filterData.userName = "";
|
||||
};
|
||||
;((filterData.rangePickerValue = []),
|
||||
(filterData.currentPage = 1),
|
||||
(filterData.pageSize = 10),
|
||||
(filterData.total = 0),
|
||||
(filterData.country = ""),
|
||||
(filterData.email = ""),
|
||||
(filterData.userType = ""),
|
||||
(filterData.ids = []),
|
||||
(filterData.occupation = ""),
|
||||
(filterData.order = ""), //'Ascending 升序 Descending 降序'
|
||||
(filterData.orderBy = ""), //'Ascending 升序 Descending 降序'
|
||||
(filterData.systemUser = ""),
|
||||
(filterData.userName = ""))
|
||||
}
|
||||
let setHistoryListData = () => {
|
||||
let startDate: any = filterData.rangePickerValue?.[0]
|
||||
? filterData.rangePickerValue[0] + " " + "00:00:00"
|
||||
: "";
|
||||
: ""
|
||||
let endDate: any = filterData.rangePickerValue?.[1]
|
||||
? filterData.rangePickerValue[1] + " " + "23:59:59"
|
||||
: "";
|
||||
: ""
|
||||
let data = {
|
||||
endTime: endDate,
|
||||
startTime: startDate,
|
||||
@@ -430,63 +428,118 @@ export default defineComponent({
|
||||
order: filterData.order,
|
||||
orderBy: filterData.orderBy,
|
||||
userName: filterData.userName,
|
||||
};
|
||||
return data;
|
||||
};
|
||||
organizationId: filterData.organizationId
|
||||
}
|
||||
return data
|
||||
}
|
||||
//获取列表
|
||||
let gettrialList = () => {
|
||||
filter.tableLoading = true;
|
||||
let data = setHistoryListData();
|
||||
Https.axiosPost(Https.httpUrls.getUserInfo, data).then(
|
||||
(rv: any) => {
|
||||
filter.tableLoading = true
|
||||
let data = setHistoryListData()
|
||||
Https.axiosPost(Https.httpUrls.getUserInfo, data).then((rv: any) => {
|
||||
if (rv) {
|
||||
// this.dataList = rv
|
||||
filter.dataList = rv.records;
|
||||
filterData.total = rv.total;
|
||||
filter.tableLoading = false;
|
||||
filter.dataList = rv.records
|
||||
filterData.total = rv.total
|
||||
filter.tableLoading = false
|
||||
|
||||
// this.workspaceItem.position = this.singleTypeList[0].label
|
||||
}
|
||||
})
|
||||
}
|
||||
);
|
||||
};
|
||||
let lastGeTrialList = (str: string) => {
|
||||
clearHistoryList();
|
||||
let currentDate = new Date();
|
||||
let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
|
||||
clearHistoryList()
|
||||
let currentDate = new Date()
|
||||
let currentTimestamp = Math.floor(currentDate.getTime() / 1000)
|
||||
// 计算30天前的时间戳
|
||||
let thirtyDaysAgoTimestamp;
|
||||
let thirtyDaysAgoTimestamp
|
||||
if (str == "year") {
|
||||
thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60;
|
||||
thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60
|
||||
} else if (str == "month") {
|
||||
thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60;
|
||||
thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60
|
||||
} else if (str == "week") {
|
||||
thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60;
|
||||
thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60
|
||||
}
|
||||
filterData.rangePickerValue[0] = formatTime(thirtyDaysAgoTimestamp, "YYYY-MM-DD")
|
||||
gettrialList()
|
||||
}
|
||||
filterData.rangePickerValue[0] = formatTime(
|
||||
thirtyDaysAgoTimestamp,
|
||||
"YYYY-MM-DD"
|
||||
);
|
||||
gettrialList();
|
||||
};
|
||||
let filterOption = (input: any, option: any) => {
|
||||
// 使用 option.label 进行搜索
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
let addhHistoryList = () => {
|
||||
allUserPoerationsVue.value.init('Add','')
|
||||
};
|
||||
allUserPoerationsVue.value.init("Add", "")
|
||||
}
|
||||
let allUserPoerationsVue = ref()
|
||||
let setAagree = (data:any) =>{
|
||||
allUserPoerationsVue.value.init('Edit',data)
|
||||
let setAagree = (data: any) => {
|
||||
allUserPoerationsVue.value.init("Edit", data)
|
||||
}
|
||||
|
||||
const organizationOptions = ref([])
|
||||
const organizationParams = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 0
|
||||
})
|
||||
const organizationLoading = ref(false)
|
||||
const getOrganizationList = async (isLoadMore = false) => {
|
||||
console.log("111111")
|
||||
if (organizationLoading.value) return
|
||||
if (isLoadMore) {
|
||||
const loaded = organizationParams.page * organizationParams.size
|
||||
if (organizationParams.total && loaded >= organizationParams.total) return
|
||||
organizationParams.page += 1
|
||||
} else {
|
||||
organizationParams.page = 1
|
||||
organizationOptions.value = []
|
||||
}
|
||||
organizationLoading.value = true
|
||||
try {
|
||||
const { total, ...requestParams } = organizationParams
|
||||
const rv: any = await Https.axiosPost(
|
||||
Https.httpUrls.queryOrganization,
|
||||
requestParams
|
||||
)
|
||||
if (rv) {
|
||||
const newRecords = rv.records || []
|
||||
// 遍历新数据，如果已存在则覆盖，不存在则追加
|
||||
newRecords.forEach((newOrg: any) => {
|
||||
const newOrgId = String(newOrg.id)
|
||||
const existingIndex = organizationOptions.value.findIndex(
|
||||
(org: any) => String(org.id) === newOrgId
|
||||
)
|
||||
if (existingIndex !== -1) {
|
||||
// 如果已存在，用新数据覆盖旧项
|
||||
organizationOptions.value[existingIndex] = newOrg
|
||||
} else {
|
||||
// 如果不存在，追加到末尾
|
||||
organizationOptions.value.push(newOrg)
|
||||
}
|
||||
})
|
||||
organizationParams.total = rv.total || 0
|
||||
}
|
||||
} finally {
|
||||
organizationLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleOrganizationScroll = (e: any) => {
|
||||
const target = e?.target
|
||||
if (!target) return
|
||||
const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 20
|
||||
if (nearBottom) {
|
||||
getOrganizationList(true)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let allCountry: any = sessionStorage.getItem("allCountry");
|
||||
let allCountry: any = sessionStorage.getItem("allCountry")
|
||||
if (allCountry) {
|
||||
filter.allCountry = JSON.parse(allCountry);
|
||||
filter.allCountry = JSON.parse(allCountry)
|
||||
}
|
||||
gettrialList();
|
||||
});
|
||||
gettrialList()
|
||||
getOrganizationList()
|
||||
})
|
||||
return {
|
||||
...toRefs(filter),
|
||||
...toRefs(filterData),
|
||||
@@ -501,29 +554,32 @@ export default defineComponent({
|
||||
filterOption,
|
||||
allUserPoerationsVue,
|
||||
setAagree,
|
||||
};
|
||||
handleOrganizationScroll,
|
||||
getOrganizationList,
|
||||
organizationOptions,
|
||||
organizationParams
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
historyTableHeight: 0,
|
||||
handleResizeColumn: (w: any, col: any) => {
|
||||
col.width = w;
|
||||
},
|
||||
};
|
||||
col.width = w
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let historyTable: any = this.$refs.historyTable;
|
||||
this.historyTableHeight = historyTable.clientHeight - 200;
|
||||
let historyTable: any = this.$refs.historyTable
|
||||
this.historyTableHeight = historyTable.clientHeight - 200
|
||||
},
|
||||
methods: {},
|
||||
});
|
||||
methods: {}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.admin_page .admin_table_search .admin_state {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.admin_page{
|
||||
|
||||
.admin_page {
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1737,7 +1737,7 @@ export default {
|
||||
GetStarted: '开始体验',
|
||||
},
|
||||
SellerListEdit:{
|
||||
saveDraft: "保存草稿",
|
||||
saveDraft: "全部保存",
|
||||
publish: "发布",
|
||||
sketch: "线稿图",
|
||||
mainProductImage: "产品主图",
|
||||
|
||||
@@ -1788,7 +1788,7 @@ export default {
|
||||
GetStarted: 'Get Started',
|
||||
},
|
||||
SellerListEdit:{
|
||||
saveDraft:'Save Draft',
|
||||
saveDraft:'Save All New',
|
||||
publish:'Publish',
|
||||
sketch:'Sketch',
|
||||
mainProductImage:'Main Product Image',
|
||||
|
||||
@@ -144,7 +144,6 @@ const open = (url, callback, options, origin) => {
|
||||
coverOrigin.value = origin
|
||||
data.url = origin[0].url
|
||||
}
|
||||
console.log("-------", origin)
|
||||
show.value = true
|
||||
}
|
||||
const onCancel = () => {
|
||||
|
||||
@@ -204,23 +204,23 @@
|
||||
.cropper-box-canvas {
|
||||
background-color: #ffffff;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
// img {
|
||||
// height: 100%;
|
||||
// }
|
||||
}
|
||||
}
|
||||
&.is-cover {
|
||||
:deep(.vue-cropper) {
|
||||
overflow: hidden;
|
||||
}
|
||||
:deep(.cropper-box-canvas) {
|
||||
width: 31.1rem !important;
|
||||
left: 50% !important;
|
||||
transform: translateX(-50%) !important;
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// :deep(.cropper-box-canvas) {
|
||||
// width: 31.1rem !important;
|
||||
// left: 50% !important;
|
||||
// transform: translateX(-50%) !important;
|
||||
// img {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import type { ListingItem } from "../types"
|
||||
|
||||
defineProps<{
|
||||
sketchList: ListingItem["sketchList"]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "crop", data: string | null, type: "apparel", index?: number): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="apparel-container">
|
||||
<div class="title">
|
||||
<span class="main-title">{{ $t("SellerListEdit.apparelSketchTitle") }}</span>
|
||||
<span class="sub-title">{{ $t("SellerListEdit.apparelSketchSubTitle") }}</span>
|
||||
</div>
|
||||
<div class="sketch-list-container flex">
|
||||
<div
|
||||
v-for="(item, index) in sketchList"
|
||||
:key="index"
|
||||
class="sketch-element flex flex-center"
|
||||
>
|
||||
<img class="img-src" :src="item.url || ''" alt="" />
|
||||
<div class="crop-tool flex flex-center" @click="emit('crop', item.url, 'apparel', index)">
|
||||
<SvgIcon name="CCrop" color="#fff" size="12" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.apparel-container {
|
||||
margin-top: 3rem;
|
||||
|
||||
.title {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.8rem;
|
||||
|
||||
.main-title {
|
||||
font-weight: 400;
|
||||
font-style: bold;
|
||||
|
||||
&::after {
|
||||
content: "*";
|
||||
color: #df2b2c;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 1.2rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.sketch-list-container {
|
||||
column-gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.sketch-element {
|
||||
width: 10rem;
|
||||
height: 14.6rem;
|
||||
border: 0.15rem solid #c7c7c7;
|
||||
border-radius: 1.2rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.img-src {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.crop-tool {
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
right: 0.4rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
background-color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,222 @@
|
||||
<script setup lang="ts">
|
||||
import Radio from "./Radio.vue"
|
||||
import type { RadioOption } from "../types"
|
||||
|
||||
defineProps<{
|
||||
productName: string
|
||||
price: string
|
||||
desc: string
|
||||
gender: string
|
||||
category: string[] | null
|
||||
genderOptions: RadioOption[]
|
||||
categoryOptions: RadioOption[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "update:productName", value: string): void
|
||||
(e: "update:price", value: string): void
|
||||
(e: "update:desc", value: string): void
|
||||
(e: "update:gender", value: string): void
|
||||
(e: "update:category", value: string[] | null): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="form-container flex flex-col">
|
||||
<div class="form-item">
|
||||
<div class="form-item-label required">
|
||||
{{ $t("SellerListEdit.productName") }}
|
||||
</div>
|
||||
<div class="form-item-value product-name">
|
||||
<a-input
|
||||
:value="productName"
|
||||
show-count
|
||||
placeholder="Enter product name"
|
||||
:bordered="false"
|
||||
:maxlength="60"
|
||||
@update:value="emit('update:productName', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item-label required">{{ $t("SellerListEdit.price") }}</div>
|
||||
<div class="form-item-value price flex align-center">
|
||||
<span>HK$</span>
|
||||
<a-input
|
||||
:value="price"
|
||||
placeholder="0.00"
|
||||
:bordered="false"
|
||||
@update:value="emit('update:price', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item-label required">
|
||||
{{ $t("SellerListEdit.productDescription") }}
|
||||
</div>
|
||||
<div class="form-item-value desc">
|
||||
<a-textarea
|
||||
:value="desc"
|
||||
show-count
|
||||
:rows="4"
|
||||
placeholder="Enter product description"
|
||||
:bordered="false"
|
||||
:maxlength="500"
|
||||
@update:value="emit('update:desc', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item-label required">
|
||||
{{ $t("SellerListEdit.designFor") }}
|
||||
</div>
|
||||
<div class="form-item-value no-border">
|
||||
<Radio
|
||||
:options="genderOptions"
|
||||
:model-value="gender"
|
||||
@update:model-value="emit('update:gender', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item-label with-tip">
|
||||
<span class="required">{{ $t("SellerListEdit.productCategory") }}</span>
|
||||
<span class="help-text">{{ $t("SellerListEdit.categoryTips") }}</span>
|
||||
</div>
|
||||
<div class="form-item-value no-border">
|
||||
<Radio
|
||||
multiple
|
||||
:options="categoryOptions"
|
||||
:model-value="category"
|
||||
@update:model-value="emit('update:category', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="license-note flex align-center">
|
||||
<img src="@/assets/images/seller/tips.png" class="info-icon" />
|
||||
<div class="note-copy">
|
||||
{{ $t("SellerListEdit.policy") }}
|
||||
<a href="javascript:void(0)">{{ $t("SellerListEdit.learnMore") }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.required {
|
||||
&::after {
|
||||
content: "*";
|
||||
color: #df2b2c;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-container {
|
||||
row-gap: 3rem;
|
||||
|
||||
.form-item {
|
||||
.form-item-label {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
font-style: bold;
|
||||
margin-bottom: 0.6rem;
|
||||
line-height: 1.5;
|
||||
|
||||
&.with-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 0.8rem;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
font-size: 1rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item-value {
|
||||
border: 0.16rem solid #d1d1d1;
|
||||
border-radius: 1.2rem;
|
||||
position: relative;
|
||||
padding: 1.6rem;
|
||||
box-sizing: border-box;
|
||||
font-size: 1.2rem;
|
||||
color: #000;
|
||||
|
||||
&.no-border {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.price {
|
||||
column-gap: 0.6rem;
|
||||
}
|
||||
|
||||
:deep(.ant-input),
|
||||
:deep(.ant-input-affix-wrapper),
|
||||
:deep(.ant-input-textarea textarea) {
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-size: 1.2rem;
|
||||
color: #000;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
:deep(.ant-input-show-count-suffix) {
|
||||
color: #df2c2c;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
:deep(textarea.ant-input) {
|
||||
resize: none;
|
||||
min-height: 5.4rem;
|
||||
padding-bottom: 1.8rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
:deep(.ant-input-textarea-show-count) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
float: none;
|
||||
position: absolute;
|
||||
color: #df2c2c;
|
||||
bottom: 0;
|
||||
right: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.license-note {
|
||||
padding: 1.6rem;
|
||||
column-gap: 1.6rem;
|
||||
background: #f7f7f7;
|
||||
border-radius: 0.8rem;
|
||||
|
||||
.info-icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-copy {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.5;
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
font-style: medium;
|
||||
|
||||
a {
|
||||
color: #0080ed;
|
||||
text-decoration: underline;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,154 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue"
|
||||
import type { ListingItem } from "../types"
|
||||
|
||||
const props = defineProps<{
|
||||
imageList: ListingItem["prodImageList"]
|
||||
firstSelectedIndex: number | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "select", index: number): void
|
||||
}>()
|
||||
|
||||
const selectedCount = computed(() => props.imageList.filter((item) => item.selected).length)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="product-image-list-container">
|
||||
<div class="title flex align-center space-between">
|
||||
<div class="title-left">
|
||||
<span class="main-title">{{ $t("SellerListEdit.productImageMainTitle") }}</span>
|
||||
<span class="sub-title">{{ $t("SellerListEdit.productImageSubTitle") }}</span>
|
||||
</div>
|
||||
<div class="title-right">{{ selectedCount }}/{{ imageList.length }} selected</div>
|
||||
</div>
|
||||
<div class="product-image-list flex">
|
||||
<div
|
||||
v-for="(item, index) in imageList"
|
||||
:key="index"
|
||||
class="product-image-item flex flex-center"
|
||||
:class="{ selected: item.selected }"
|
||||
@click="emit('select', index)"
|
||||
>
|
||||
<img
|
||||
v-if="item.selected"
|
||||
src="@/assets/images/seller/checked.png"
|
||||
class="checked"
|
||||
alt=""
|
||||
/>
|
||||
<img class="img-src" :src="item.url" alt="" />
|
||||
<div v-if="item.selected && index === firstSelectedIndex" class="main-pic">
|
||||
main
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.product-image-list-container {
|
||||
margin-top: 3rem;
|
||||
|
||||
.title {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1.2rem;
|
||||
|
||||
.main-title {
|
||||
font-weight: 400;
|
||||
font-style: bold;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 1.2rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.title-right {
|
||||
color: #585858;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.product-image-list {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
column-gap: 0.8rem;
|
||||
max-width: 80.2rem;
|
||||
padding-bottom: 1.2rem;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #d9d9d9;
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #000000;
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
|
||||
.product-image-item {
|
||||
width: 11.6rem;
|
||||
height: 20.6rem;
|
||||
border-radius: 1rem;
|
||||
border: 0.15rem solid #c7c7c7;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: #fcfcfc;
|
||||
opacity: 0.7;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-color: #000;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.checked {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
position: absolute;
|
||||
top: 0.8rem;
|
||||
right: 0.8rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.img-src {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main-pic {
|
||||
position: absolute;
|
||||
height: 2.4rem;
|
||||
line-height: 2.4rem;
|
||||
left: 0.8rem;
|
||||
right: 0.8rem;
|
||||
bottom: 0.8rem;
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: #fff;
|
||||
font-size: 1.4rem;
|
||||
border-radius: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -8,7 +8,7 @@
|
||||
'radio-button',
|
||||
{
|
||||
'is-active': multiple
|
||||
? selectedValues.includes(item.key)
|
||||
? selectedValues.includes(normalizeValue(item.key))
|
||||
: modelValue === item.key
|
||||
}
|
||||
]"
|
||||
@@ -20,54 +20,73 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue"
|
||||
import { computed } from "vue"
|
||||
|
||||
interface Option {
|
||||
interface Option {
|
||||
name: string | number
|
||||
value: string | number | boolean
|
||||
key: string
|
||||
optype: boolean
|
||||
}
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string | number | boolean | Array<string | number | boolean> | null
|
||||
const props = defineProps<{
|
||||
modelValue:
|
||||
| string
|
||||
| number
|
||||
| boolean
|
||||
| Array<string | number | boolean | null | undefined>
|
||||
| null
|
||||
options: Option[] // 按钮选项数组
|
||||
multiple?: boolean // 是否支持多选，默认为 false
|
||||
}>()
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
const emit = defineEmits<{
|
||||
(e: "update:modelValue", value: any): void
|
||||
}>()
|
||||
}>()
|
||||
|
||||
const multiple = props.multiple === true
|
||||
const multiple = props.multiple === true
|
||||
|
||||
const selectedValues = computed(() => {
|
||||
const normalizeValue = (value: any) =>
|
||||
typeof value === "string" ? value.toLocaleLowerCase() : value
|
||||
|
||||
const selectedValues = computed(() => {
|
||||
if (!multiple) {
|
||||
return typeof props.modelValue === "undefined" || props.modelValue === null
|
||||
? []
|
||||
: [props.modelValue]
|
||||
}
|
||||
|
||||
return Array.isArray(props.modelValue) ? props.modelValue : []
|
||||
})
|
||||
return Array.isArray(props.modelValue)
|
||||
? props.modelValue
|
||||
.filter((value) => value !== null && typeof value !== "undefined")
|
||||
.map(normalizeValue)
|
||||
: []
|
||||
})
|
||||
|
||||
const selectOption = (value: any) => {
|
||||
const selectOption = (value: any) => {
|
||||
if (multiple) {
|
||||
const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
|
||||
const index = current.indexOf(value)
|
||||
const selectedValue = normalizeValue(value)
|
||||
const current = Array.isArray(props.modelValue)
|
||||
? props.modelValue
|
||||
.filter((item) => item !== null && typeof item !== "undefined")
|
||||
.map(normalizeValue)
|
||||
: []
|
||||
const index = current.indexOf(selectedValue)
|
||||
|
||||
if (index >= 0) {
|
||||
current.splice(index, 1)
|
||||
} else {
|
||||
current.push(value.toLocaleLowerCase)
|
||||
current.push(selectedValue)
|
||||
}
|
||||
emit("update:modelValue", current)
|
||||
|
||||
emit("update:modelValue", current.length ? current : null)
|
||||
return
|
||||
}
|
||||
|
||||
if (props.modelValue !== value) {
|
||||
emit("update:modelValue", value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
<script setup lang="ts">
|
||||
import type { TopImageType } from "../types"
|
||||
|
||||
defineProps<{
|
||||
images: Record<TopImageType, string | null>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "crop", data: string | null, type: TopImageType): void
|
||||
}>()
|
||||
|
||||
const topImageList: TopImageType[] = ["sketch", "mainProductImage", "cover"]
|
||||
const topImageTitleMap: Record<TopImageType, string> = {
|
||||
sketch: "SellerListEdit.sketch",
|
||||
mainProductImage: "SellerListEdit.mainProductImage",
|
||||
cover: "SellerListEdit.cover"
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main-image-container flex">
|
||||
<div
|
||||
v-for="type in topImageList"
|
||||
:key="type"
|
||||
:class="`main-image-item flex flex-col align-center ${type}`"
|
||||
>
|
||||
<div class="title" :class="{ required: type !== 'mainProductImage' }">
|
||||
{{ $t(topImageTitleMap[type]) }}
|
||||
</div>
|
||||
<div class="sketch-item flex flex-center" :class="type">
|
||||
<div
|
||||
v-if="images[type]"
|
||||
class="crop-tool flex flex-center"
|
||||
@click="emit('crop', images[type], type)"
|
||||
>
|
||||
<SvgIcon name="CCrop" color="#fff" size="12" />
|
||||
</div>
|
||||
<img
|
||||
v-if="images[type]"
|
||||
:src="images[type] || ''"
|
||||
class="sketch-img"
|
||||
:class="type"
|
||||
alt=""
|
||||
/>
|
||||
<div v-else class="trigger flex flex-col align-center">
|
||||
<div
|
||||
v-if="type === 'cover'"
|
||||
class="cover-trigger flex flex-col align-center"
|
||||
@click="emit('crop', null, 'cover')"
|
||||
>
|
||||
<SvgIcon class="trigger-icon" name="CCrop" color="#585858" size="24" />
|
||||
<div class="trigger-tips">
|
||||
{{ $t("SellerListEdit.cropDesc") }}
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="trigger-img placeholder"></div>
|
||||
<div class="trigger-tips">
|
||||
{{ $t("SellerListEdit.productImageDesc") }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.c-svg {
|
||||
width: initial;
|
||||
height: initial;
|
||||
}
|
||||
|
||||
.required {
|
||||
&::after {
|
||||
content: "*";
|
||||
color: #df2b2c;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.main-image-container {
|
||||
column-gap: 3.5rem;
|
||||
|
||||
.main-image-item {
|
||||
flex-shrink: 0;
|
||||
|
||||
.title {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sketch-item {
|
||||
width: 11.6rem;
|
||||
height: 20.4rem;
|
||||
border: 0.15rem solid #d1d1d1;
|
||||
border-radius: 1rem;
|
||||
position: relative;
|
||||
background-color: #f6f6f6;
|
||||
overflow: hidden;
|
||||
|
||||
&.cover {
|
||||
width: 16.2rem;
|
||||
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' rx='11' ry='11' fill='none' stroke='%23D1D1D1' stroke-width='1.5' stroke-dasharray='8%2c 5' stroke-linecap='square'/%3e%3c/svg%3e");
|
||||
border: none;
|
||||
}
|
||||
|
||||
.crop-tool {
|
||||
position: absolute;
|
||||
top: 0.8rem;
|
||||
right: 0.8rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
background-color: #000000;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sketch-img {
|
||||
height: 100%;
|
||||
|
||||
&.sketch {
|
||||
height: initial;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.trigger {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
padding: 6rem 2rem 0;
|
||||
|
||||
&,
|
||||
.cover-trigger {
|
||||
row-gap: 1.2rem;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
border-radius: 0.6rem;
|
||||
background: linear-gradient(135deg, #efefef 0%, #cdcdcd 100%);
|
||||
}
|
||||
|
||||
.trigger-tips {
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
color: #585858;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -28,191 +28,32 @@
|
||||
</seller-header>
|
||||
<div class="edit-detail-content flex">
|
||||
<div class="left">
|
||||
<div class="main-image-container flex">
|
||||
<div
|
||||
v-for="type in topImageList"
|
||||
:key="type"
|
||||
:class="`main-image-item flex flex-col align-center ${type}`"
|
||||
>
|
||||
<div class="title" :class="{ required: type !== 'mainProductImage' }">
|
||||
{{ $t(topImageTitleMap[type]) }}
|
||||
</div>
|
||||
<div class="sketch-item flex flex-center" :class="type">
|
||||
<div
|
||||
v-if="previewImageMap[type]"
|
||||
class="crop-tool flex flex-center"
|
||||
@click="handleClickCrop(previewImageMap[type], type)"
|
||||
>
|
||||
<SvgIcon name="CCrop" color="#fff" size="12" />
|
||||
</div>
|
||||
<img
|
||||
v-if="previewImageMap[type]"
|
||||
:src="previewImageMap[type]"
|
||||
class="sketch-img"
|
||||
:class="type"
|
||||
alt=""
|
||||
<TopImageSection :images="previewImageMap" @crop="handleClickCrop" />
|
||||
<ProductImageList
|
||||
:image-list="prodImgList"
|
||||
:first-selected-index="firstSelectedIndex"
|
||||
@select="handleSelectProdImg"
|
||||
/>
|
||||
<div v-else class="trigger flex flex-col align-center">
|
||||
<div
|
||||
v-if="type === 'cover'"
|
||||
class="cover-trigger flex flex-col align-center"
|
||||
@click="handleClickCrop(null, 'cover')"
|
||||
>
|
||||
<SvgIcon
|
||||
class="trigger-icon"
|
||||
name="CCrop"
|
||||
color="#585858"
|
||||
size="24"
|
||||
<ApparelSketchList
|
||||
:sketch-list="currentListing.sketchList"
|
||||
@crop="handleClickCrop"
|
||||
/>
|
||||
<div class="trigger-tips">
|
||||
{{ $t("SellerListEdit.cropDesc") }}
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="trigger-img placeholder"></div>
|
||||
<div class="trigger-tips">
|
||||
{{ $t("SellerListEdit.productImageDesc") }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-image-list-container">
|
||||
<div class="title flex align-center space-between">
|
||||
<div class="title-left">
|
||||
<span class="main-title">{{
|
||||
$t("SellerListEdit.productImageMainTitle")
|
||||
}}</span>
|
||||
<span class="sub-title">{{
|
||||
$t("SellerListEdit.productImageSubTitle")
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
{{ selectedProdImgs }}/{{ prodImgList.length }} selected
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-image-list flex">
|
||||
<div
|
||||
v-for="(item, index) in prodImgList"
|
||||
:key="index"
|
||||
class="product-image-item flex flex-center"
|
||||
:class="{ selected: item.selected }"
|
||||
@click="handleSelectProdImg(index)"
|
||||
>
|
||||
<img
|
||||
v-if="item.selected"
|
||||
src="@/assets/images/seller/checked.png"
|
||||
class="checked"
|
||||
alt=""
|
||||
/>
|
||||
<img class="img-src" :src="item.url" alt="" />
|
||||
<div
|
||||
v-if="item.selected && index === firstSelectedIndex"
|
||||
class="main-pic"
|
||||
>
|
||||
main
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="apparel-container">
|
||||
<div class="title">
|
||||
<span class="main-title">{{
|
||||
$t("SellerListEdit.apparelSketchTitle")
|
||||
}}</span>
|
||||
<span class="sub-title">
|
||||
{{ $t("SellerListEdit.apparelSketchSubTitle") }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="sketch-list-container flex">
|
||||
<div
|
||||
v-for="(item, index) in selectList[currentIndex].sketchList"
|
||||
:key="index"
|
||||
class="sketch-element flex flex-center"
|
||||
>
|
||||
<img class="img-src" :src="item.url" alt="" />
|
||||
<div
|
||||
class="crop-tool flex flex-center"
|
||||
@click="handleClickCrop(item.url, 'apparel')"
|
||||
>
|
||||
<SvgIcon name="CCrop" color="#fff" size="12" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="form-container flex flex-col">
|
||||
<div class="form-item">
|
||||
<div class="form-item-label required">
|
||||
{{ $t("SellerListEdit.productName") }}
|
||||
</div>
|
||||
<div class="form-item-value product-name">
|
||||
<a-input
|
||||
v-model:value="currentListing.productName"
|
||||
show-count
|
||||
placeholder="Enter product name"
|
||||
:bordered="false"
|
||||
:maxlength="60"
|
||||
<ListingForm
|
||||
:product-name="currentListing.productName"
|
||||
:price="currentListing.price"
|
||||
:desc="currentListing.desc"
|
||||
:gender="currentListing.gender"
|
||||
:category="currentListing.category"
|
||||
:gender-options="genderOptions"
|
||||
:category-options="categoryOptions"
|
||||
@update:product-name="currentListing.productName = $event"
|
||||
@update:price="currentListing.price = $event"
|
||||
@update:desc="currentListing.desc = $event"
|
||||
@update:gender="currentListing.gender = $event"
|
||||
@update:category="currentListing.category = $event"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item-label required">{{ $t("SellerListEdit.price") }}</div>
|
||||
<div class="form-item-value price flex align-center">
|
||||
<span>HK$</span>
|
||||
<a-input
|
||||
v-model:value="currentListing.price"
|
||||
placeholder="0.00"
|
||||
:bordered="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item-label required">
|
||||
{{ $t("SellerListEdit.productDescription") }}
|
||||
</div>
|
||||
<div class="form-item-value desc">
|
||||
<a-textarea
|
||||
v-model:value="currentListing.desc"
|
||||
show-count
|
||||
:rows="4"
|
||||
placeholder="Enter product description"
|
||||
:bordered="false"
|
||||
:maxlength="500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item-label required">
|
||||
{{ $t("SellerListEdit.designFor") }}
|
||||
</div>
|
||||
<div class="form-item-value no-border">
|
||||
<Radio :options="genderOptions" v-model="currentListing.gender" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item-label with-tip">
|
||||
<span class="required">{{ $t("SellerListEdit.productCategory") }}</span>
|
||||
<span class="help-text">{{ $t("SellerListEdit.categoryTips") }}</span>
|
||||
</div>
|
||||
<div class="form-item-value no-border">
|
||||
<Radio
|
||||
multiple
|
||||
:options="categoryOptions"
|
||||
v-model="currentListing.category"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="license-note flex align-center">
|
||||
<img src="@/assets/images/seller/tips.png" class="info-icon" />
|
||||
<div class="note-copy">
|
||||
{{ $t("SellerListEdit.policy") }}
|
||||
<a href="javascript:void(0)">{{ $t("SellerListEdit.learnMore") }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-control flex align-center" v-if="selectList.length > 1">
|
||||
<a-pagination
|
||||
v-model:current="currentPage"
|
||||
@@ -238,13 +79,16 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch, onMounted } from "vue"
|
||||
import { computed, ref, onMounted } from "vue"
|
||||
import { useRouter } from "vue-router"
|
||||
import { useI18n } from "vue-i18n"
|
||||
import { message } from "ant-design-vue"
|
||||
import SellerHeader from "../../seller-header.vue"
|
||||
import Radio from "./components/Radio.vue"
|
||||
import ImageClipDialog from "../../BrandProfile/image-clip-dialog.vue"
|
||||
import ApparelSketchList from "./components/ApparelSketchList.vue"
|
||||
import ListingForm from "./components/ListingForm.vue"
|
||||
import ProductImageList from "./components/ProductImageList.vue"
|
||||
import TopImageSection from "./components/TopImageSection.vue"
|
||||
import { useStore } from "vuex"
|
||||
import {
|
||||
fetchSketchDetail,
|
||||
@@ -252,6 +96,13 @@
|
||||
fetchListingDetailById,
|
||||
fetchUpdateListing
|
||||
} from "./api"
|
||||
import type {
|
||||
ListingDetailImage,
|
||||
ListingDetailResponse,
|
||||
ListingItem,
|
||||
RadioOption,
|
||||
StatusType
|
||||
} from "./types"
|
||||
|
||||
const ROUTER = useRouter()
|
||||
const { t } = useI18n()
|
||||
@@ -264,31 +115,6 @@
|
||||
|
||||
const STORE = useStore()
|
||||
|
||||
type CategoryOption = {
|
||||
label: string
|
||||
value: string
|
||||
}
|
||||
|
||||
type ListingItem = {
|
||||
designItemId: number | string | null
|
||||
sketch: string | null
|
||||
mainProductImage: string
|
||||
cover: string
|
||||
productImage: string[]
|
||||
apparelSketch: string[]
|
||||
productName: string
|
||||
price: string
|
||||
desc: string
|
||||
gender: string
|
||||
category: string[]
|
||||
prodImageList: Array<{
|
||||
url: string
|
||||
selected?: boolean
|
||||
}>
|
||||
sketchList: Array<{ url: string | null }>
|
||||
}
|
||||
type StatusType = "draft" | "publish"
|
||||
|
||||
const createListingItem = (
|
||||
sketch: string | null = null,
|
||||
designItemId: number | string | null = null
|
||||
@@ -308,16 +134,9 @@
|
||||
sketchList: []
|
||||
})
|
||||
|
||||
const topImageList = ["sketch", "mainProductImage", "cover"] as const
|
||||
const topImageTitleMap: Record<(typeof topImageList)[number], string> = {
|
||||
sketch: "SellerListEdit.sketch",
|
||||
mainProductImage: "SellerListEdit.mainProductImage",
|
||||
cover: "SellerListEdit.cover"
|
||||
}
|
||||
|
||||
const genderOptions = STORE.state.UserHabit?.sex.value || []
|
||||
|
||||
const fallbackCategoryOptions: Record<string, CategoryOption[]> = {
|
||||
const fallbackCategoryOptions: Record<string, RadioOption[]> = {
|
||||
MALE: STORE.state.UserHabit?.MalePosition || [],
|
||||
FEMALE: STORE.state.UserHabit?.FemalePosition || []
|
||||
}
|
||||
@@ -343,21 +162,96 @@
|
||||
cover: currentListing.value.cover
|
||||
}))
|
||||
|
||||
const firstSelectedIndex = ref(null) //显示main标签的图片索引
|
||||
const selectedProdImgs = computed(() => {
|
||||
return prodImgList.value.filter((item) => item.selected).length
|
||||
const firstSelectedIndex = ref<number | null>(null) //显示main标签的图片索引
|
||||
|
||||
const getSortedDetailImages = (images: ListingDetailImage[] = []) => {
|
||||
return [...images].sort((prev, next) => (prev.sortOrder ?? 0) - (next.sortOrder ?? 0))
|
||||
}
|
||||
|
||||
const getImageSelected = (value: ListingDetailImage["isSelected"]) =>
|
||||
value === true || value === 1 || value === "1"
|
||||
|
||||
const normalizeDetailGender = (value: ListingDetailResponse["designFor"]) => {
|
||||
const gender = String(value || "").toUpperCase()
|
||||
return gender === "MALE" || gender === "FEMALE" ? gender : "FEMALE"
|
||||
}
|
||||
|
||||
const normalizeDetailCategory = (
|
||||
value: ListingDetailResponse["productCategory"]
|
||||
): ListingItem["category"] => {
|
||||
const categories = Array.isArray(value) ? value : value ? [value] : []
|
||||
const normalized = categories
|
||||
.filter((category) => category !== null && typeof category !== "undefined")
|
||||
.map((category) => String(category).toLowerCase())
|
||||
|
||||
return normalized.length ? normalized : null
|
||||
}
|
||||
|
||||
const createListingItemFromDetail = (detail: ListingDetailResponse): ListingItem => {
|
||||
const listing = createListingItem()
|
||||
|
||||
listing.productName = detail.title || ""
|
||||
listing.price =
|
||||
detail.price === null || typeof detail.price === "undefined" ? "" : String(detail.price)
|
||||
listing.desc = detail.description || ""
|
||||
listing.gender = normalizeDetailGender(detail.designFor)
|
||||
listing.category = normalizeDetailCategory(detail.productCategory)
|
||||
|
||||
getSortedDetailImages(detail.images || []).forEach((image) => {
|
||||
const imageUrl = image.imageUrl || ""
|
||||
if (!imageUrl) return
|
||||
|
||||
if (image.category === "cover") {
|
||||
listing.cover = imageUrl
|
||||
return
|
||||
}
|
||||
|
||||
if (image.category === "sketch") {
|
||||
listing.sketch = imageUrl
|
||||
return
|
||||
}
|
||||
|
||||
if (image.category === "mainProductImage") {
|
||||
listing.mainProductImage = imageUrl
|
||||
return
|
||||
}
|
||||
|
||||
if (image.category === "main_product" || image.category === "product") {
|
||||
listing.prodImageList.push({
|
||||
url: imageUrl,
|
||||
selected: getImageSelected(image.isSelected)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (image.category === "apparel") {
|
||||
listing.sketchList.push({ url: imageUrl })
|
||||
}
|
||||
})
|
||||
|
||||
if (!listing.mainProductImage) {
|
||||
listing.mainProductImage =
|
||||
listing.prodImageList.find((item) => item.selected)?.url || ""
|
||||
}
|
||||
|
||||
listing.productImage = listing.prodImageList.map((item) => item.url)
|
||||
listing.apparelSketch = listing.sketchList
|
||||
.map((item) => item.url)
|
||||
.filter((url): url is string => Boolean(url))
|
||||
|
||||
return listing
|
||||
}
|
||||
|
||||
const handleSelectProdImg = (index: number) => {
|
||||
const target = prodImgList.value[index]
|
||||
|
||||
const willSelect = !target.selected
|
||||
|
||||
target.selected = willSelect
|
||||
|
||||
if (willSelect && !currentListing.value.mainProductImage) {
|
||||
if (willSelect && firstSelectedIndex.value === null) {
|
||||
currentListing.value.mainProductImage = target.url
|
||||
firstSelectedIndex.value = index
|
||||
return
|
||||
}
|
||||
|
||||
if (!willSelect && currentListing.value.mainProductImage === target.url) {
|
||||
@@ -367,7 +261,12 @@
|
||||
}
|
||||
|
||||
const cropType = ref("")
|
||||
const handleClickCrop = (data, type, list = []) => {
|
||||
const handleClickCrop = (data: any, type: string, paramThree: any = []) => {
|
||||
// 处理来自TopImageSection的调用: (data, type, list)
|
||||
// 处理来自ApparelSketchList的调用: (data, type, index)
|
||||
const index = typeof paramThree === 'number' ? paramThree : undefined
|
||||
const list = Array.isArray(paramThree) ? paramThree : []
|
||||
|
||||
// console.log(data, type)
|
||||
// console.log(selectList.value[currentIndex.value])
|
||||
let origin = []
|
||||
@@ -392,8 +291,11 @@
|
||||
(file) => {
|
||||
// console.log(file)
|
||||
uploadFile(file).then((res) => {
|
||||
console.log(res)
|
||||
if (type === "apparel" && typeof index !== "undefined") {
|
||||
selectList.value[currentIndex.value].sketchList[index].url = res
|
||||
} else {
|
||||
selectList.value[currentIndex.value][type] = res
|
||||
}
|
||||
})
|
||||
},
|
||||
{ ratio, isPreview: true, title: titleList[type], isProduct: true },
|
||||
@@ -450,35 +352,40 @@
|
||||
|
||||
const handleSaveForm = async (type: StatusType) => {
|
||||
const paramsList = []
|
||||
selectList.value.forEach((item) => {
|
||||
selectList.value.forEach((item: ListingItem) => {
|
||||
const params = {
|
||||
id: null,
|
||||
title: selectList.value[currentIndex.value].productName,
|
||||
description: selectList.value[currentIndex.value].desc,
|
||||
price: selectList.value[currentIndex.value].price,
|
||||
title: item.productName,
|
||||
description: item.desc,
|
||||
price: item.price,
|
||||
status: type === "draft" ? 0 : 1,
|
||||
images: [],
|
||||
designFor: selectList.value[currentIndex.value].gender.toLowerCase,
|
||||
productCategory: selectList.value[currentIndex.value].category
|
||||
designFor: item.gender.toLowerCase,
|
||||
productCategory: item.category
|
||||
}
|
||||
//
|
||||
topImageList.forEach((el) => {
|
||||
|
||||
;["sketch", "cover"].forEach((el) => {
|
||||
params.images.push({
|
||||
category: el,
|
||||
imageUrl: selectList.value[currentIndex.value][el],
|
||||
imageUrl: item[el],
|
||||
isSelected: 1
|
||||
})
|
||||
})
|
||||
selectList.value[currentIndex.value].prodImageList.forEach((item) => {
|
||||
if (item.selected) {
|
||||
if (item.mainProductImage) {
|
||||
params.images.push({
|
||||
category: "main_product",
|
||||
imageUrl: item.url,
|
||||
isSelected: Number(item.selected)
|
||||
category: 'main_product',
|
||||
imageUrl: item.mainProductImage,
|
||||
isSeleted:1
|
||||
})
|
||||
}
|
||||
item.prodImageList.forEach((item) => {
|
||||
params.images.push({
|
||||
category: "product",
|
||||
imageUrl: item.url,
|
||||
isSelected: Number(!!item.selected)
|
||||
})
|
||||
selectList.value[currentIndex.value].sketchList.forEach((item) => {
|
||||
})
|
||||
item.sketchList.forEach((item) => {
|
||||
params.images.push({
|
||||
category: "apparel",
|
||||
imageUrl: item.url,
|
||||
@@ -488,9 +395,14 @@
|
||||
paramsList.push(params)
|
||||
})
|
||||
console.log(paramsList)
|
||||
fetchUpdateListing(paramsList)
|
||||
debugger
|
||||
await fetchUpdateListing(paramsList)
|
||||
}
|
||||
const handleClickMenu = async (status: StatusType) => {
|
||||
if (status === "draft" && !selectList.value[currentIndex.value].cover) {
|
||||
message.error("请先完成封面制作")
|
||||
return
|
||||
}
|
||||
if (status === "publish" && !validatePublishRequired()) return
|
||||
|
||||
await handleSaveForm(status)
|
||||
@@ -516,14 +428,27 @@
|
||||
}))
|
||||
})
|
||||
})
|
||||
// fetchListingDetailById(itemId.value).then(res => {
|
||||
// console.log('iddetail',res)
|
||||
// })
|
||||
}
|
||||
|
||||
const handleGetDetailById = () => {
|
||||
fetchListingDetailById(itemId.value).then((res: ListingDetailResponse) => {
|
||||
const listing = createListingItemFromDetail(res)
|
||||
const selectedIndex = listing.prodImageList.findIndex((item) => item.selected)
|
||||
|
||||
currentPage.value = 1
|
||||
selectList.value = [listing]
|
||||
firstSelectedIndex.value = selectedIndex === -1 ? null : selectedIndex
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const designItemIds = history.state?.designItemIds || []
|
||||
const data = history.state
|
||||
if (data?.type === "edit") {
|
||||
itemId.value = history.state?.id || ""
|
||||
handleGetDetailById()
|
||||
} else {
|
||||
const designItemIds = history.state?.designItemIds || []
|
||||
|
||||
if (!designItemIds.length) return
|
||||
|
||||
currentPage.value = 1
|
||||
@@ -531,8 +456,9 @@
|
||||
createListingItem(item.designOutfitUrl, item.designItemId)
|
||||
)
|
||||
const list = designItemIds.map((el) => el.designItemId)
|
||||
console.log("list", list.length, list)
|
||||
// console.log("list", list.length, list)
|
||||
handleFetchItemDetial(list)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -602,362 +528,10 @@
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.required {
|
||||
&::after {
|
||||
content: "*";
|
||||
color: #df2b2c;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
// flex: 1;
|
||||
// min-width: 0;
|
||||
|
||||
.main-image-container {
|
||||
// max-width: 80.2rem;
|
||||
column-gap: 3.5rem;
|
||||
.main-image-item {
|
||||
flex-shrink: 0;
|
||||
|
||||
.title {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sketch-item {
|
||||
width: 11.6rem;
|
||||
height: 20.4rem;
|
||||
border: 0.15rem solid #d1d1d1;
|
||||
border-radius: 1rem;
|
||||
position: relative;
|
||||
background-color: #f6f6f6;
|
||||
overflow: hidden;
|
||||
|
||||
&.cover {
|
||||
width: 16.2rem;
|
||||
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' rx='11' ry='11' fill='none' stroke='%23D1D1D1' stroke-width='1.5' stroke-dasharray='8%2c 5' stroke-linecap='square'/%3e%3c/svg%3e");
|
||||
border: none;
|
||||
}
|
||||
|
||||
.crop-tool {
|
||||
position: absolute;
|
||||
top: 0.8rem;
|
||||
right: 0.8rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
background-color: #000000;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sketch-img {
|
||||
height: 100%;
|
||||
&.sketch {
|
||||
height: initial;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.trigger {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
padding: 6rem 2rem 0;
|
||||
&,
|
||||
.cover-trigger {
|
||||
row-gap: 1.2rem;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
border-radius: 0.6rem;
|
||||
background: linear-gradient(135deg, #efefef 0%, #cdcdcd 100%);
|
||||
}
|
||||
|
||||
.trigger-tips {
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
color: #585858;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-image-list-container {
|
||||
margin-top: 3rem;
|
||||
|
||||
.title {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1.2rem;
|
||||
|
||||
.main-title {
|
||||
font-weight: 400;
|
||||
font-style: bold;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 1.2rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.title-right {
|
||||
color: #585858;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.product-image-list {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
column-gap: 0.8rem;
|
||||
max-width: 80.2rem;
|
||||
padding-bottom: 1.2rem;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #d9d9d9;
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #000000;
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
|
||||
.product-image-item {
|
||||
width: 11.6rem;
|
||||
height: 20.6rem;
|
||||
border-radius: 1rem;
|
||||
border: 0.15rem solid #c7c7c7;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: #fcfcfc;
|
||||
opacity: 0.7;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-color: #000;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.checked {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
position: absolute;
|
||||
top: 0.8rem;
|
||||
right: 0.8rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.img-src {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main-pic {
|
||||
position: absolute;
|
||||
height: 2.4rem;
|
||||
line-height: 2.4rem;
|
||||
left: 0.8rem;
|
||||
right: 0.8rem;
|
||||
bottom: 0.8rem;
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: #fff;
|
||||
font-size: 1.4rem;
|
||||
border-radius: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apparel-container {
|
||||
margin-top: 3rem;
|
||||
|
||||
.title {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.8rem;
|
||||
|
||||
.main-title {
|
||||
font-weight: 400;
|
||||
font-style: bold;
|
||||
|
||||
&::after {
|
||||
content: "*";
|
||||
color: #df2b2c;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 1.2rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.sketch-list-container {
|
||||
column-gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.sketch-element {
|
||||
width: 10rem;
|
||||
height: 14.6rem;
|
||||
border: 0.15rem solid #c7c7c7;
|
||||
border-radius: 1.2rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.img-src {
|
||||
// height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.crop-tool {
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
right: 0.4rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
background-color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 55.2rem;
|
||||
flex-shrink: 0;
|
||||
|
||||
.form-container {
|
||||
row-gap: 3rem;
|
||||
|
||||
.form-item {
|
||||
.form-item-label {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
font-style: bold;
|
||||
margin-bottom: 0.6rem;
|
||||
line-height: 1.5;
|
||||
|
||||
&.with-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 0.8rem;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
font-size: 1rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item-value {
|
||||
border: 0.16rem solid #d1d1d1;
|
||||
border-radius: 1.2rem;
|
||||
position: relative;
|
||||
padding: 1.6rem;
|
||||
box-sizing: border-box;
|
||||
font-size: 1.2rem;
|
||||
color: #000;
|
||||
|
||||
&.no-border {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.price {
|
||||
column-gap: 0.6rem;
|
||||
}
|
||||
|
||||
:deep(.ant-input),
|
||||
:deep(.ant-input-affix-wrapper),
|
||||
:deep(.ant-input-textarea textarea) {
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-size: 1.2rem;
|
||||
color: #000;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
:deep(.ant-input-show-count-suffix) {
|
||||
color: #df2c2c;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
:deep(textarea.ant-input) {
|
||||
resize: none;
|
||||
min-height: 5.4rem;
|
||||
padding-bottom: 1.8rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
:deep(.ant-input-textarea-show-count) {
|
||||
position: relative;
|
||||
&::after {
|
||||
float: none;
|
||||
position: absolute;
|
||||
color: #df2c2c;
|
||||
bottom: 0;
|
||||
right: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.license-note {
|
||||
padding: 1.6rem;
|
||||
column-gap: 1.6rem;
|
||||
background: #f7f7f7;
|
||||
border-radius: 0.8rem;
|
||||
|
||||
.info-icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-copy {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.5;
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
font-style: medium;
|
||||
|
||||
a {
|
||||
color: #0080ed;
|
||||
text-decoration: underline;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-control {
|
||||
justify-content: flex-end;
|
||||
margin-top: 4rem;
|
||||
|
||||
47
src/views/SellerDashboard/MyListings/EditDetail/types.ts
Normal file
47
src/views/SellerDashboard/MyListings/EditDetail/types.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
export type RadioOption = {
|
||||
name: string | number
|
||||
value: string | number | boolean
|
||||
key: string
|
||||
optype: boolean
|
||||
}
|
||||
|
||||
export type TopImageType = "sketch" | "mainProductImage" | "cover"
|
||||
export type CropType = TopImageType | "apparel"
|
||||
|
||||
export type ListingItem = {
|
||||
designItemId: number | string | null
|
||||
sketch: string | null
|
||||
mainProductImage: string
|
||||
cover: string
|
||||
productImage: string[]
|
||||
apparelSketch: string[]
|
||||
productName: string
|
||||
price: string
|
||||
desc: string
|
||||
gender: string
|
||||
category: string[] | null
|
||||
prodImageList: Array<{
|
||||
url: string
|
||||
selected?: boolean
|
||||
}>
|
||||
sketchList: Array<{ url: string | null }>
|
||||
}
|
||||
|
||||
export type ListingDetailImage = {
|
||||
category?: string | null
|
||||
imageUrl?: string | null
|
||||
isSelected?: boolean | number | string | null
|
||||
sortOrder?: number | null
|
||||
}
|
||||
|
||||
export type ListingDetailResponse = {
|
||||
id?: number | string | null
|
||||
title?: string | null
|
||||
description?: string | null
|
||||
price?: number | string | null
|
||||
designFor?: string | null
|
||||
productCategory?: string | string[] | null
|
||||
images?: ListingDetailImage[] | null
|
||||
}
|
||||
|
||||
export type StatusType = "draft" | "publish"
|
||||
@@ -41,7 +41,10 @@ const getCreateList = ()=>{
|
||||
})
|
||||
}
|
||||
const selectCollectionItem = (item:any)=>{
|
||||
console.log(item)
|
||||
if(item.userLikeGroupVO?.groupDetails?.length > 0){
|
||||
emit('selectCollectionItem',item)
|
||||
}
|
||||
}
|
||||
onMounted(()=>{
|
||||
getCreateList()
|
||||
@@ -55,9 +58,12 @@ defineExpose({getCreateList})
|
||||
<div class="list">
|
||||
<div v-for="(item,index) in list" :key="index" class="item" @click="selectCollectionItem(item)">
|
||||
<div class="imgList">
|
||||
<div v-for="(img,index) in item.userLikeGroupVO?.groupDetails" :key="index" class="img">
|
||||
<div v-if="item.userLikeGroupVO?.groupDetails?.length > 0" v-for="(img,index) in item.userLikeGroupVO?.groupDetails" :key="index" class="img">
|
||||
<img :src="img.url" alt="">
|
||||
</div>
|
||||
<div v-else class="img null">
|
||||
<img src="@/assets/images/seller/selectCollectionNullStatus.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="name">{{item.name}}</div>
|
||||
@@ -123,6 +129,12 @@ defineExpose({getCreateList})
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
&.null{
|
||||
background-color: transparent;
|
||||
> img{
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
> img{
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
|
||||
@@ -45,8 +45,8 @@ const next = ()=>{
|
||||
router.push({
|
||||
path:'/home/seller/myListings/edit',
|
||||
state: {
|
||||
id:route.params.collectionId,
|
||||
designItemIds,
|
||||
type:'create'
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -83,7 +83,7 @@ const setDomSize = (width: number)=>{
|
||||
if(!listingsBoxRef.value)return
|
||||
let listDom = listingsBoxRef.value.querySelector('.list')
|
||||
let listItemDom = listDom.querySelector('.item')
|
||||
let offsetWidth = listItemDom.getBoundingClientRect().width
|
||||
let offsetWidth = listItemDom?.getBoundingClientRect?.()?.width
|
||||
let lineNum = Math.floor(width / offsetWidth)
|
||||
let itemNum = Math.floor((width - (lineNum - 1) * parseInt(gap.value[domSize.value])) / offsetWidth)
|
||||
listDom.style.maxWidth = ((itemNum - 1) * parseInt(gap.value[domSize.value]) + itemNum * (offsetWidth)) + 'px'
|
||||
|
||||
@@ -5,6 +5,8 @@ import contentItem from "./contentItem.vue"
|
||||
import selectMenu from '@/component/modules/selectMenu.vue'
|
||||
import deleteDrafts from './deleteDrafts.vue'
|
||||
import { Https } from '@/tool/https'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
@@ -63,11 +65,14 @@ const domSizeList = ref([
|
||||
|
||||
const visible = ref(false)
|
||||
const deleteDraftsRef = ref(null)
|
||||
const router = useRouter()
|
||||
|
||||
const deleteDraft = (item: any)=>{
|
||||
deleteDraftsRef.value.open(()=>{
|
||||
deleteDraftsRef.value.open(item,()=>{
|
||||
putListingStatus(item,2).then(()=>{
|
||||
list2.value = list2.value.filter((v: any)=>v.id != item.id)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const vObserve = {
|
||||
@@ -99,6 +104,7 @@ const getPublishedData = async ()=>{
|
||||
}
|
||||
await getPublishList(value).then((res)=>{
|
||||
if(res.content.length == 0)publishData.isNoData = true
|
||||
publishData.pageNum += 1
|
||||
list.value.push(...res.content)
|
||||
})
|
||||
publishData.isShowMark = false
|
||||
@@ -113,6 +119,7 @@ const getNoPublishedData = async ()=>{
|
||||
}
|
||||
await getPublishList(value).then((res)=>{
|
||||
if(res.content.length == 0)noPublishData.isNoData = true
|
||||
noPublishData.pageNum += 1
|
||||
list2.value.push(...res.content)
|
||||
})
|
||||
noPublishData.isShowMark = false
|
||||
@@ -127,28 +134,46 @@ const getPublishList = (data:any)=>{
|
||||
})
|
||||
}
|
||||
|
||||
const putListingStatus = ()=>{
|
||||
const putListingStatus = async (item,status:number)=>{
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
let data = {
|
||||
id:'',
|
||||
status:'',
|
||||
id:item.id,
|
||||
status:status,
|
||||
}
|
||||
Https.axiosPut(Https.httpUrls.putListingStatus,data).then((res:any)=>{
|
||||
resolve(res)
|
||||
}).catch((err:any)=>{
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const draftListing = (item: any)=>{
|
||||
const draftListing = async (item: any)=>{
|
||||
//数组前面添加item
|
||||
await putListingStatus(item,0).then(()=>{
|
||||
list2.value.unshift(item)
|
||||
list.value = list.value.filter((v: any)=>v.id != item.id)
|
||||
})
|
||||
message.success('Product moved to drafts and stats reset.')
|
||||
}
|
||||
|
||||
const publishListing = (item: any)=>{
|
||||
const publishListing = async (item: any)=>{
|
||||
await putListingStatus(item,1).then(()=>{
|
||||
list.value.unshift(item)
|
||||
list2.value = list2.value.filter((v: any)=>v.id != item.id)
|
||||
})
|
||||
message.success('Item is now live on the Marketplace.')
|
||||
}
|
||||
|
||||
const editListing = (item: any)=>{
|
||||
router.push({
|
||||
path:'/home/seller/myListings/edit',
|
||||
state: {
|
||||
id:item.id,
|
||||
type:'edit'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -167,7 +192,7 @@ const setDomSize = (width: number)=>{
|
||||
if(!listingsBoxRef.value)return
|
||||
let listDom = listingsBoxRef.value.querySelector('.list')
|
||||
let listItemDom = listDom.querySelector('.item')
|
||||
let offsetWidth = listItemDom.getBoundingClientRect().width
|
||||
let offsetWidth = listItemDom?.getBoundingClientRect?.()?.width
|
||||
let lineNum = Math.floor(width / offsetWidth)
|
||||
let itemNum = Math.floor((width - (lineNum - 1) * parseInt(gap.value[domSize.value])) / offsetWidth)
|
||||
listDom.style.maxWidth = ((itemNum - 1) * parseInt(gap.value[domSize.value]) + itemNum * (offsetWidth)) + 'px'
|
||||
|
||||
@@ -32,7 +32,7 @@ const {} = toRefs(data);
|
||||
<template>
|
||||
<div class="item" :draging="true" :class="domSize">
|
||||
<div class="imgBox">
|
||||
<img src="" alt="">
|
||||
<img :src="item.cover" alt="">
|
||||
<div class="maskBtn">
|
||||
<div @click="$emit('editListing',item)">
|
||||
<svgIcon name="seller-edit" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
|
||||
@@ -50,21 +50,21 @@ const {} = toRefs(data);
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="left">
|
||||
<div class="name">item name</div>
|
||||
<div class="price">$1123</div>
|
||||
<div class="name">{{item.title}}</div>
|
||||
<div class="price">${{item.price}}</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="detailItem" v-if="type == 'listings'">
|
||||
<div class="shopping1">
|
||||
<i class="fi fi-rr-shopping-bag-add"></i>
|
||||
</div>
|
||||
<span>123</span>
|
||||
<span>{{ item.salesVolume || 0 }}</span>
|
||||
</div>
|
||||
<div class="detailItem" v-if="type == 'listings'">
|
||||
<div class="eye1">
|
||||
<i class="fi fi-rs-eye"></i>
|
||||
</div>
|
||||
<span>123</span>
|
||||
<span>{{ item.viewCount }}</span>
|
||||
</div>
|
||||
<div class="detailItem drafts" v-if="type == 'drafts'" @click="$emit('deleteDraft',item)">
|
||||
<div class="">
|
||||
@@ -128,6 +128,11 @@ const {} = toRefs(data);
|
||||
position: relative;
|
||||
height: var(--itemImgHeight);
|
||||
width: 100%;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
> .maskBtn{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@@ -182,6 +187,7 @@ const {} = toRefs(data);
|
||||
gap: var(--detailRightItemGap);
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> div{
|
||||
color: var(--rightColor);
|
||||
display: flex;
|
||||
|
||||
@@ -15,12 +15,13 @@ const router = useRouter()
|
||||
const {t} = useI18n()
|
||||
let data = reactive({
|
||||
})
|
||||
|
||||
const item = ref<any>()
|
||||
const fun = ref(null)
|
||||
|
||||
let deleteDraftsRef = ref(null)
|
||||
|
||||
const open = (deleteFun)=>{
|
||||
const open = (data:any,deleteFun)=>{
|
||||
item.value = data
|
||||
fun.value = deleteFun
|
||||
emit('update:visible', true)
|
||||
}
|
||||
@@ -35,6 +36,7 @@ const deleteDrafts = ()=>{
|
||||
|
||||
|
||||
const cleardata = ()=>{
|
||||
item.value = null
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
@@ -78,11 +80,11 @@ const { showAgain } = toRefs(data);
|
||||
</div>
|
||||
<div class="deleteContent">
|
||||
<div class="img">
|
||||
<img src="" alt="">
|
||||
<img :src="item?.value?.cover" alt="">
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="name">Item Name</div>
|
||||
<div class="price">HK$392.00 · Draft</div>
|
||||
<div class="name">{{ item?.value?.title }}</div>
|
||||
<div class="price">HK${{ item?.value?.price }} · Draft</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnBox">
|
||||
|
||||
Reference in New Issue
Block a user