ui
This commit is contained in:
李志鹏
@@ -116,8 +116,18 @@
|
||||
() => props.isEdit,
|
||||
(v) => (v ? edit() : cancel())
|
||||
)
|
||||
const edit = () => {}
|
||||
const cancel = () => {}
|
||||
const edit = () => {
|
||||
formData.storeName = "测试"
|
||||
formData.fullName = "测试"
|
||||
formData.email = "测试"
|
||||
formData.phoneNumber = "测试"
|
||||
formData.description = "测试"
|
||||
formData.links = ["https://www.baidu.com", "https://www.taobao.com"]
|
||||
}
|
||||
const cancel = () => {
|
||||
formRef.value.clearValidate()
|
||||
edit()
|
||||
}
|
||||
const submit = async () => {
|
||||
const valid = await formRef.value.validate()
|
||||
if (!valid) return Promise.reject(false)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="brand-profile-index">
|
||||
<div class="brand-profile-index mini-scrollbar">
|
||||
<div class="header">
|
||||
<div class="bg">
|
||||
<img v-if="banner" :src="banner" />
|
||||
|
||||
254
src/views/SellerDashboard/MyOrders/index.vue
Normal file
254
src/views/SellerDashboard/MyOrders/index.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="my-orders-index mini-scrollbar">
|
||||
<div class="total-box">
|
||||
<div class="total-item" v-for="v in totals" :key="v.title">
|
||||
<div class="title">
|
||||
<span class="icon"><svg-icon :name="v.icon" size="18" /></span>
|
||||
<span class="label">{{ v.title }}</span>
|
||||
</div>
|
||||
<div class="value">{{ v.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-box">
|
||||
<div class="left">
|
||||
<div class="title">All Invoice</div>
|
||||
<div class="tip">A summary of all completed transactions.</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="input">
|
||||
<span class="icon"><svg-icon name="seller-search" size="20" /></span>
|
||||
<input type="text" placeholder="Search by item name or order ID" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="header">
|
||||
<div class="order-id">Order ID</div>
|
||||
<div class="item">Item</div>
|
||||
<div class="price">Price</div>
|
||||
<div class="buyer-username">Buyer Username</div>
|
||||
<div class="date">Date</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="item" v-for="v in 10" :key="v">
|
||||
<div class="order-id">SP897772698</div>
|
||||
<div class="item">
|
||||
<div class="images">
|
||||
<img src="http://118.31.39.42:3000/falls/o-1.png" />
|
||||
<img src="http://118.31.39.42:3000/falls/o-2.png" />
|
||||
<span>+1 more</span>
|
||||
</div>
|
||||
<div class="titles">
|
||||
<div>North Outfit Set</div>
|
||||
<div>Heritage Layered Set</div>
|
||||
<span>...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">HK$ 100.00</div>
|
||||
<div class="buyer-username">@liuyuchen</div>
|
||||
<div class="date">
|
||||
<div>Mar 17, 2026</div>
|
||||
<div>10:15 AM</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
const totals = ref([
|
||||
{
|
||||
icon: "seller-qiandaizi",
|
||||
title: "Total Revenue",
|
||||
value: "HK$ 54,32.00"
|
||||
},
|
||||
{
|
||||
icon: "seller-gouwudai",
|
||||
title: "Total Purchases",
|
||||
value: "128"
|
||||
},
|
||||
{
|
||||
icon: "seller-eye",
|
||||
title: "Total Views",
|
||||
value: "4,982"
|
||||
}
|
||||
])
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.my-orders-index {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 3rem;
|
||||
margin: 0 3rem;
|
||||
gap: 4rem;
|
||||
> .total-box {
|
||||
display: flex;
|
||||
gap: 1.8rem;
|
||||
> .total-item {
|
||||
flex: 1;
|
||||
padding: 2.4rem;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 1.2rem;
|
||||
> .title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1.2rem;
|
||||
gap: 1.2rem;
|
||||
> .icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
border: 0.08rem solid #e4e4e4;
|
||||
}
|
||||
> .label {
|
||||
font-size: 2rem;
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
> .value {
|
||||
font-family: "pingfang_heavy";
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .filter-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
> .left {
|
||||
> .title {
|
||||
font-family: "pingfang_heavy";
|
||||
font-size: 2.4rem;
|
||||
color: #000;
|
||||
}
|
||||
> .tip {
|
||||
font-family: "pingfang_regular";
|
||||
font-size: 1.4rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
> .input {
|
||||
width: 30rem;
|
||||
height: 4rem;
|
||||
border-bottom: 0.15rem solid #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
> input {
|
||||
padding: 0 2rem;
|
||||
width: 0;
|
||||
flex: 1;
|
||||
outline: none;
|
||||
border: none;
|
||||
height: 100%;
|
||||
font-family: "pingfang_regular";
|
||||
font-size: 1.2rem;
|
||||
color: #000;
|
||||
&::placeholder {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .table {
|
||||
width: 100%;
|
||||
> .body > .item,
|
||||
> .header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> div {
|
||||
padding: 0 1.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
> .order-id {
|
||||
flex: 2;
|
||||
}
|
||||
> .item {
|
||||
flex: 3;
|
||||
}
|
||||
> .buyer-username {
|
||||
flex: 1.5;
|
||||
}
|
||||
}
|
||||
> .header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #f6f6f6;
|
||||
height: 5.6rem;
|
||||
border-width: 0.15rem 0 0.15rem 0;
|
||||
border-style: solid;
|
||||
border-color: #eaeaea;
|
||||
> div {
|
||||
font-size: 2rem;
|
||||
color: #979797;
|
||||
}
|
||||
}
|
||||
> .body {
|
||||
> .item {
|
||||
padding-top: 1.6rem;
|
||||
padding-bottom: 1.6rem;
|
||||
border-bottom: 0.1rem solid #f6f6f6;
|
||||
color: #000;
|
||||
> .order-id {
|
||||
font-family: "pingfang_regular";
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
> .price {
|
||||
font-family: "pingfang_medium";
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
> .buyer-username {
|
||||
font-family: "pingfang_regular";
|
||||
font-size: 1.8rem;
|
||||
color: #666;
|
||||
}
|
||||
> .date {
|
||||
font-family: "pingfang_regular";
|
||||
font-size: 1.6rem;
|
||||
color: #666;
|
||||
}
|
||||
> .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
> .images {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.2rem;
|
||||
> img {
|
||||
width: auto;
|
||||
height: 10rem;
|
||||
border-radius: 0.8rem;
|
||||
border: 0.1rem solid #e9e9e9;
|
||||
}
|
||||
> span {
|
||||
font-family: "pingfang_medium";
|
||||
font-size: 1.4rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
> .titles {
|
||||
font-family: "pingfang_medium";
|
||||
font-size: 1.8rem;
|
||||
color: #000;
|
||||
> span {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
323
src/views/SellerDashboard/Settings/index.vue
Normal file
323
src/views/SellerDashboard/Settings/index.vue
Normal file
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<div class="settings-index">
|
||||
<div>
|
||||
<div class="notification">
|
||||
<div class="header">Notifications</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="title">New order notification</div>
|
||||
<div class="tip">Receive an inbox message when a new order is placed.</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a-switch v-model:checked="checked" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payout">
|
||||
<div class="header">Payout</div>
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<div class="title">Payment Providers</div>
|
||||
<div class="tip">Select how you want to receive payments.</div>
|
||||
</div>
|
||||
<div class="pay-item" v-for="v in payList" :key="v.type">
|
||||
<div class="left">
|
||||
<img :src="v.icon" />
|
||||
<div class="value">{{ v.value || "Unbound" }}</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<button v-if="v.value" class="manage">Manage</button>
|
||||
<button v-else class="bind-now">Bind Now</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="left">
|
||||
<div class="title">Payment Currency</div>
|
||||
<div class="tip">HKD - Hong Kong Dollar</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<button>Fixed</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="data-privacy">
|
||||
<div class="header">Data & Privacy</div>
|
||||
<div class="content">
|
||||
<div class="title">Copyright licence</div>
|
||||
<div class="tip">
|
||||
A licence certificate is automatically included with every purchase
|
||||
download. View the default licensing terms applied to your listings.
|
||||
</div>
|
||||
<div class="tip">
|
||||
This licence is issued by Code-Create and is legally binding upon purchase.
|
||||
It certifies the buyer's right to use the purchased design asset in
|
||||
accordance with the terms below.
|
||||
</div>
|
||||
<div class="tip">
|
||||
For custom licensing arrangements, <span>contact us</span>.
|
||||
</div>
|
||||
<div class="btns">
|
||||
<button>
|
||||
<span class="icon"><svg-icon name="seller-download" size="14" /></span>
|
||||
<span class="label">Download to View</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stop">
|
||||
<div class="header">Stop Selling</div>
|
||||
<div class="content">
|
||||
<div class="title">Deactivate seller account</div>
|
||||
<div class="tip">
|
||||
Permanently deactivate your seller account. All listings and invoice records
|
||||
will be deleted. You may re-register as a seller in the future, but your
|
||||
previous sales data cannot be recovered.
|
||||
</div>
|
||||
<div class="btns">
|
||||
<button>Deactivate</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
import paypal from "@/assets/images/seller/setting/paypal.png"
|
||||
import stripe from "@/assets/images/seller/setting/stripe.png"
|
||||
import alipayHk from "@/assets/images/seller/setting/alipay-hk.png"
|
||||
import alipayChinese from "@/assets/images/seller/setting/alipay-chinese.png"
|
||||
const checked = ref(true)
|
||||
const payList = ref([
|
||||
{
|
||||
type: "paypal",
|
||||
icon: paypal,
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
type: "stripe",
|
||||
icon: stripe,
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
type: "alipay-hk",
|
||||
icon: alipayHk,
|
||||
value: "123123"
|
||||
},
|
||||
{
|
||||
type: "alipay-chinese",
|
||||
icon: alipayChinese,
|
||||
value: "123123"
|
||||
}
|
||||
])
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.settings-index {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin: 0 16rem;
|
||||
display: flex;
|
||||
gap: 4.2rem;
|
||||
> div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4.2rem;
|
||||
> div {
|
||||
border-radius: 1.2rem;
|
||||
overflow: hidden;
|
||||
border: 0.15rem solid #d1d1d1;
|
||||
> .header {
|
||||
line-height: 5rem;
|
||||
background-color: #f6f6f6;
|
||||
padding-left: 2.4rem;
|
||||
font-size: 2rem;
|
||||
color: #666;
|
||||
}
|
||||
> .content {
|
||||
padding: 2.4rem;
|
||||
}
|
||||
}
|
||||
> .stop {
|
||||
border-color: rgba(223, 44, 44, 0.2);
|
||||
> .header {
|
||||
background-color: rgba(223, 44, 44, 0.2);
|
||||
}
|
||||
}
|
||||
> .notification > .content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
> .left {
|
||||
> .title {
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
}
|
||||
> .tip {
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.4rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
.ant-switch {
|
||||
width: 4.8rem;
|
||||
height: 2.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .payout > .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
> .header {
|
||||
> .title {
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
}
|
||||
> .tip {
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.4rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
> .pay-item {
|
||||
padding: 1.7rem 2.4rem;
|
||||
border-radius: 0.8rem;
|
||||
border: 0.06rem solid #c4c4c4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
> .left {
|
||||
> img {
|
||||
width: auto;
|
||||
height: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
> .value {
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.2rem;
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
> button {
|
||||
width: 10rem;
|
||||
height: 3.8rem;
|
||||
border-radius: 2rem;
|
||||
font-family: pingfang_heavy;
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
background: #000000;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
> .manage {
|
||||
background: #fff;
|
||||
border: 0.1rem solid #000000;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .footer {
|
||||
margin-top: 2rem;
|
||||
border-top: 0.1rem solid #c4c4c4;
|
||||
padding: 1.4rem 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
> .left {
|
||||
> .title {
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
}
|
||||
> .tip {
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.2rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
> button {
|
||||
width: 10rem;
|
||||
height: 3.8rem;
|
||||
border-radius: 2rem;
|
||||
font-family: pingfang_heavy;
|
||||
font-size: 1.2rem;
|
||||
color: #bdbdbd;
|
||||
background: #f6f6f6;
|
||||
border: none;
|
||||
// cursor: pointer;
|
||||
// &:active {
|
||||
// opacity: 0.8;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .stop > .content,
|
||||
> .data-privacy > .content {
|
||||
> .title {
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
> .tip {
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.4rem;
|
||||
color: #999;
|
||||
margin-bottom: 3rem;
|
||||
> span {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
color: #0080ed;
|
||||
}
|
||||
}
|
||||
> .btns {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1.2rem;
|
||||
> button {
|
||||
padding: 0 2.4rem;
|
||||
height: 4rem;
|
||||
border-radius: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
font-family: pingfang_heavy;
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
background: #000000;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .stop > .content {
|
||||
> .btns {
|
||||
> button {
|
||||
background: #df2c2c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,7 +4,7 @@
|
||||
<div
|
||||
v-for="v in list"
|
||||
:key="v.path"
|
||||
:class="{ active: v.path === activePath }"
|
||||
:class="{ active: new RegExp(`^${v.path}`).test(activePath) }"
|
||||
@click="handleClick(v.path)"
|
||||
>
|
||||
<div class="icon"><svg-icon :name="v.icon" size="20" /></div>
|
||||
|
||||
Reference in New Issue
Block a user