ui
This commit is contained in:
李志鹏
3
src/assets/icons/seller/download.svg
Normal file
3
src/assets/icons/seller/download.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.4167 14H0.583333C0.2625 14 0 13.7375 0 13.4167C0 13.0958 0.2625 12.8333 0.583333 12.8333H13.4167C13.7375 12.8333 14 13.0958 14 13.4167C14 13.7375 13.7375 14 13.4167 14ZM8.61583 11.0017L12.32 7.06417C12.8275 6.55667 12.9733 5.83333 12.6992 5.17417C12.425 4.515 11.8125 4.10083 11.095 4.095H9.8875L9.87 2.31583C9.87 1.03833 8.83167 0 7.55417 0H6.39917C5.12167 0 4.08333 1.03833 4.08333 2.32167V4.08333H2.8875C2.17 4.08333 1.5575 4.4975 1.28333 5.1625C1.00917 5.82167 1.155 6.55083 1.65083 7.04083L5.34333 11.0075C5.7925 11.4567 6.3875 11.6842 6.9825 11.6842C7.5775 11.6842 8.16667 11.4567 8.62167 11.0075L8.61583 11.0017ZM4.66667 5.25C4.82417 5.25 4.97 5.18583 5.08083 5.08083C5.19167 4.97 5.25 4.82417 5.25 4.66667V2.31583C5.25 1.68 5.76333 1.16667 6.39917 1.16667H7.55417C8.19 1.16667 8.70333 1.68583 8.70333 2.32167L8.72083 4.68417C8.72083 5.005 8.98333 5.26167 9.30417 5.26167H11.0833C11.4392 5.26167 11.5792 5.53583 11.6083 5.6175C11.6433 5.69917 11.7367 5.99083 11.4683 6.25333L7.77583 10.1792C7.32667 10.6225 6.60333 10.6167 6.17167 10.185L2.47917 6.21833C2.22833 5.9675 2.32167 5.67583 2.35667 5.59417C2.39167 5.5125 2.53167 5.23833 2.88167 5.23833H4.66667V5.25Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
11
src/assets/icons/seller/eye.svg
Normal file
11
src/assets/icons/seller/eye.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1696_371)">
|
||||
<path d="M17.4527 7.06427C16.2894 5.16977 13.6434 1.99127 8.99943 1.99127C4.35543 1.99127 1.70943 5.16977 0.546178 7.06427C0.186574 7.6459 -0.00390625 8.3162 -0.00390625 9.00002C-0.00390625 9.68384 0.186574 10.3541 0.546178 10.9358C1.70943 12.8303 4.35543 16.0088 8.99943 16.0088C13.6434 16.0088 16.2894 12.8303 17.4527 10.9358C17.8123 10.3541 18.0028 9.68384 18.0028 9.00002C18.0028 8.3162 17.8123 7.6459 17.4527 7.06427ZM16.1739 10.1505C15.1749 11.775 12.9137 14.5088 8.99943 14.5088C5.08518 14.5088 2.82393 11.775 1.82493 10.1505C1.61128 9.80481 1.49812 9.40643 1.49812 9.00002C1.49812 8.59362 1.61128 8.19524 1.82493 7.84952C2.82393 6.22502 5.08518 3.49127 8.99943 3.49127C12.9137 3.49127 15.1749 6.22202 16.1739 7.84952C16.3876 8.19524 16.5007 8.59362 16.5007 9.00002C16.5007 9.40643 16.3876 9.80481 16.1739 10.1505Z" fill="black"/>
|
||||
<path d="M9 5.25C8.25832 5.25 7.5333 5.46993 6.91661 5.88199C6.29993 6.29404 5.81928 6.87971 5.53545 7.56494C5.25162 8.25016 5.17736 9.00416 5.32206 9.73159C5.46675 10.459 5.8239 11.1272 6.34835 11.6517C6.8728 12.1761 7.54098 12.5333 8.26841 12.6779C8.99584 12.8226 9.74984 12.7484 10.4351 12.4645C11.1203 12.1807 11.706 11.7001 12.118 11.0834C12.5301 10.4667 12.75 9.74168 12.75 9C12.7488 8.0058 12.3533 7.05267 11.6503 6.34967C10.9473 5.64666 9.9942 5.25119 9 5.25ZM9 11.25C8.55499 11.25 8.11998 11.118 7.74997 10.8708C7.37996 10.6236 7.09157 10.2722 6.92127 9.86104C6.75098 9.4499 6.70642 8.9975 6.79323 8.56105C6.88005 8.12459 7.09434 7.72368 7.40901 7.40901C7.72368 7.09434 8.12459 6.88005 8.56105 6.79323C8.99751 6.70642 9.44991 6.75097 9.86104 6.92127C10.2722 7.09157 10.6236 7.37996 10.8708 7.74997C11.118 8.11998 11.25 8.55499 11.25 9C11.25 9.59674 11.0129 10.169 10.591 10.591C10.169 11.0129 9.59674 11.25 9 11.25Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1696_371">
|
||||
<rect width="18" height="18" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
11
src/assets/icons/seller/gouwudai.svg
Normal file
11
src/assets/icons/seller/gouwudai.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1696_334)">
|
||||
<path d="M17.252 14.2499H15.752V12.7499C15.752 12.551 15.6729 12.3603 15.5323 12.2196C15.3916 12.079 15.2009 11.9999 15.002 11.9999C14.803 11.9999 14.6123 12.079 14.4716 12.2196C14.331 12.3603 14.252 12.551 14.252 12.7499V14.2499H12.752C12.553 14.2499 12.3623 14.329 12.2216 14.4696C12.081 14.6103 12.002 14.801 12.002 14.9999C12.002 15.1989 12.081 15.3896 12.2216 15.5303C12.3623 15.6709 12.553 15.7499 12.752 15.7499H14.252V17.2499C14.252 17.4489 14.331 17.6396 14.4716 17.7803C14.6123 17.9209 14.803 17.9999 15.002 17.9999C15.2009 17.9999 15.3916 17.9209 15.5323 17.7803C15.6729 17.6396 15.752 17.4489 15.752 17.2499V15.7499H17.252C17.4509 15.7499 17.6416 15.6709 17.7823 15.5303C17.9229 15.3896 18.002 15.1989 18.002 14.9999C18.002 14.801 17.9229 14.6103 17.7823 14.4696C17.6416 14.329 17.4509 14.2499 17.252 14.2499Z" fill="black"/>
|
||||
<path d="M15.75 4.5H13.5C13.5 3.30653 13.0259 2.16193 12.182 1.31802C11.3381 0.474106 10.1935 0 9 0C7.80653 0 6.66193 0.474106 5.81802 1.31802C4.97411 2.16193 4.5 3.30653 4.5 4.5H2.25C1.65326 4.5 1.08097 4.73705 0.65901 5.15901C0.237053 5.58097 0 6.15326 0 6.75L0 14.25C0.00119089 15.2442 0.396661 16.1973 1.09966 16.9003C1.80267 17.6033 2.7558 17.9988 3.75 18H10.5C10.6989 18 10.8897 17.921 11.0303 17.7803C11.171 17.6397 11.25 17.4489 11.25 17.25C11.25 17.0511 11.171 16.8603 11.0303 16.7197C10.8897 16.579 10.6989 16.5 10.5 16.5H3.75C3.15326 16.5 2.58097 16.2629 2.15901 15.841C1.73705 15.419 1.5 14.8467 1.5 14.25V6.75C1.5 6.55109 1.57902 6.36032 1.71967 6.21967C1.86032 6.07902 2.05109 6 2.25 6H4.5V7.5C4.5 7.69891 4.57902 7.88968 4.71967 8.03033C4.86032 8.17098 5.05109 8.25 5.25 8.25C5.44891 8.25 5.63968 8.17098 5.78033 8.03033C5.92098 7.88968 6 7.69891 6 7.5V6H12V7.5C12 7.69891 12.079 7.88968 12.2197 8.03033C12.3603 8.17098 12.5511 8.25 12.75 8.25C12.9489 8.25 13.1397 8.17098 13.2803 8.03033C13.421 7.88968 13.5 7.69891 13.5 7.5V6H15.75C15.9489 6 16.1397 6.07902 16.2803 6.21967C16.421 6.36032 16.5 6.55109 16.5 6.75V10.5C16.5 10.6989 16.579 10.8897 16.7197 11.0303C16.8603 11.171 17.0511 11.25 17.25 11.25C17.4489 11.25 17.6397 11.171 17.7803 11.0303C17.921 10.8897 18 10.6989 18 10.5V6.75C18 6.15326 17.7629 5.58097 17.341 5.15901C16.919 4.73705 16.3467 4.5 15.75 4.5ZM6 4.5C6 3.70435 6.31607 2.94129 6.87868 2.37868C7.44129 1.81607 8.20435 1.5 9 1.5C9.79565 1.5 10.5587 1.81607 11.1213 2.37868C11.6839 2.94129 12 3.70435 12 4.5H6Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1696_334">
|
||||
<rect width="18" height="18" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
3
src/assets/icons/seller/qiandaizi.svg
Normal file
3
src/assets/icons/seller/qiandaizi.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.236 4.11975C10.8907 3.594 11.565 2.8875 11.907 2.028C12.0855 1.5795 12.0278 1.07025 11.7533 0.666C11.4705 0.249 11.0017 0 10.5 0H6C5.49825 0 5.0295 0.249 4.74675 0.666C4.47225 1.07025 4.41525 1.5795 4.593 2.028C4.935 2.88675 5.60925 3.594 6.264 4.11975C2.772 5.41575 0 9.86925 0 13.5C0 15.9818 2.01825 18 4.5 18H12C14.4818 18 16.5 15.9818 16.5 13.5C16.5 9.86925 13.728 5.41575 10.236 4.11975ZM10.5128 1.47375C10.1258 2.4465 8.94225 3.2685 8.2485 3.65625C7.55625 3.2715 6.37725 2.45625 5.99925 1.5L10.5128 1.47375ZM11.9993 16.5H4.5C2.8455 16.5 1.5 15.1545 1.5 13.5C1.5 9.56775 5.0325 5.25 8.25 5.25C11.4675 5.25 15 9.56775 15 13.5C15 15.1545 13.6538 16.5 11.9993 16.5ZM8.24925 16.5C7.83525 16.5 7.49925 16.164 7.49925 15.75V15H7.29825C6.49725 15 5.751 14.5695 5.34975 13.8757C5.14275 13.5173 5.265 13.059 5.6235 12.8512C5.9805 12.6435 6.44025 12.7657 6.648 13.125C6.7815 13.356 7.03125 13.5 7.29825 13.5H8.99925C9.4125 13.5 9.74925 13.1632 9.74925 12.75C9.74925 12.4665 9.546 12.2265 9.26625 12.18L6.98475 11.7997C5.979 11.6325 5.2485 10.77 5.2485 9.75C5.2485 8.5095 6.258 7.5 7.4985 7.5V6.75C7.4985 6.336 7.8345 6 8.2485 6C8.6625 6 8.9985 6.336 8.9985 6.75V7.5H9.1995C9.99975 7.5 10.7467 7.93125 11.148 8.625C11.355 8.9835 11.2327 9.44175 10.8742 9.6495C10.5165 9.85725 10.0575 9.735 9.84975 9.37575C9.7155 9.144 9.4665 9.00075 9.1995 9.00075H7.4985C7.08525 9.00075 6.7485 9.3375 6.7485 9.75075C6.7485 10.0343 6.95175 10.2743 7.2315 10.3207L9.513 10.701C10.5188 10.8682 11.2492 11.7307 11.2492 12.7507C11.2492 13.9913 10.2397 15.0007 8.99925 15.0007V15.7507C8.99925 16.1647 8.66325 16.5 8.24925 16.5Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
3
src/assets/icons/seller/search.svg
Normal file
3
src/assets/icons/seller/search.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.7663 18.5889L14.7962 13.6188C16.1506 11.9623 16.8165 9.84866 16.6562 7.71497C16.4959 5.58128 15.5216 3.59083 13.9349 2.15534C12.3482 0.719841 10.2704 -0.0508742 8.13136 0.00260835C5.99233 0.0560909 3.95568 0.929679 2.44268 2.44268C0.929679 3.95568 0.0560909 5.99233 0.00260835 8.13136C-0.0508742 10.2704 0.719841 12.3482 2.15534 13.9349C3.59083 15.5216 5.58128 16.4959 7.71497 16.6562C9.84866 16.8165 11.9623 16.1506 13.6188 14.7962L18.5889 19.7663C18.7459 19.9179 18.9563 20.0019 19.1746 20C19.3929 19.9981 19.6017 19.9105 19.7561 19.7561C19.9105 19.6017 19.9981 19.3929 20 19.1746C20.0019 18.9563 19.9179 18.7459 19.7663 18.5889ZM8.35314 15.0143C7.03568 15.0143 5.74781 14.6237 4.65238 13.8917C3.55695 13.1598 2.70317 12.1194 2.199 10.9023C1.69483 9.6851 1.56292 8.34575 1.81994 7.05361C2.07697 5.76146 2.71138 4.57455 3.64297 3.64297C4.57455 2.71138 5.76146 2.07697 7.05361 1.81994C8.34575 1.56292 9.6851 1.69483 10.9023 2.199C12.1194 2.70317 13.1598 3.55695 13.8917 4.65238C14.6237 5.74781 15.0143 7.03568 15.0143 8.35314C15.0124 10.1192 14.3099 11.8123 13.0611 13.0611C11.8123 14.3099 10.1192 15.0124 8.35314 15.0143Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/seller/setting/alipay-chinese.png
Normal file
BIN
src/assets/images/seller/setting/alipay-chinese.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/assets/images/seller/setting/alipay-hk.png
Normal file
BIN
src/assets/images/seller/setting/alipay-hk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
src/assets/images/seller/setting/paypal.png
Normal file
BIN
src/assets/images/seller/setting/paypal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/assets/images/seller/setting/stripe.png
Normal file
BIN
src/assets/images/seller/setting/stripe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
@@ -223,13 +223,13 @@ const routes: Array<RouteRecordRaw> = [
|
||||
path: "myOrders",
|
||||
name: "myOrders",
|
||||
meta: { enter: "all" },
|
||||
component: () => import("@/views/SellerDashboard/BrandProfile/index.vue"),
|
||||
component: () => import("@/views/SellerDashboard/MyOrders/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "settings",
|
||||
name: "settings",
|
||||
meta: { enter: "all" },
|
||||
component: () => import("@/views/SellerDashboard/BrandProfile/index.vue"),
|
||||
component: () => import("@/views/SellerDashboard/Settings/index.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -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