338 lines
7.6 KiB
Vue
338 lines
7.6 KiB
Vue
<template>
|
|
<div class="settings-index">
|
|
<div>
|
|
<div class="notification">
|
|
<div class="header">{{ $t("Seller.notifications") }}</div>
|
|
<div class="content">
|
|
<div class="left">
|
|
<div class="title">{{ $t("Seller.notificationsTitle") }}</div>
|
|
<div class="tip">{{ $t("Seller.notificationsTip") }}</div>
|
|
</div>
|
|
<div class="right">
|
|
<a-switch v-model:checked="checked" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="payout">
|
|
<div class="header">{{ $t("Seller.payout") }}</div>
|
|
<div class="content">
|
|
<div class="header">
|
|
<div class="title">{{ $t("Seller.payoutTitle") }}</div>
|
|
<div class="tip">{{ $t("Seller.payoutTip") }}</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 || $t("Seller.unbound") }}</div>
|
|
</div>
|
|
<div class="right">
|
|
<button v-if="v.value" class="manage">{{ $t("Seller.manage") }}</button>
|
|
<button v-else class="bind-now">{{ $t("Seller.bindNow") }}</button>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<div class="left">
|
|
<div class="title">{{ $t("Seller.paymentCurrency") }}</div>
|
|
<div class="tip">{{ $t("Seller.HKD") }}</div>
|
|
</div>
|
|
<div class="right">
|
|
<button>{{ $t("Seller.fixed") }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="data-privacy">
|
|
<div class="header">{{ $t("Seller.dataPrivacy") }}</div>
|
|
<div class="content">
|
|
<div class="title">{{ $t("Seller.dataPrivacyTitle") }}</div>
|
|
<div class="tip">{{ $t("Seller.dataPrivacyTip1") }}</div>
|
|
<div class="tip">{{ $t("Seller.dataPrivacyTip2") }}</div>
|
|
<div
|
|
class="tip"
|
|
v-html="
|
|
$t('Seller.dataPrivacyTip3', { click: 'onSellerSettingsContactUs' })
|
|
"
|
|
></div>
|
|
<div class="btns">
|
|
<button @click="onDownloadDataPrivacy">
|
|
<span class="icon"><svg-icon name="seller-download" size="14" /></span>
|
|
<span class="label">{{ $t("Seller.downloadToView") }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="stop">
|
|
<div class="header">{{ $t("Seller.stopSelling") }}</div>
|
|
<div class="content">
|
|
<div class="title">{{ $t("Seller.stopSellingTitle") }}</div>
|
|
<div class="tip">{{ $t("Seller.stopSellingTip") }}</div>
|
|
<div class="btns">
|
|
<button @click="onStopSelling">{{ $t("Seller.deactivate") }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue"
|
|
import { Modal } from "ant-design-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"
|
|
import { useI18n } from "vue-i18n"
|
|
const { t } = useI18n()
|
|
|
|
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"
|
|
}
|
|
])
|
|
window.onSellerSettingsContactUs = () => {
|
|
console.log("contact us")
|
|
}
|
|
const onDownloadDataPrivacy = () => {
|
|
console.log("download data privacy")
|
|
}
|
|
const onStopSelling = () => {
|
|
Modal.confirm({
|
|
title: t("Seller.stopSellingTitle"),
|
|
content: t("Seller.stopSellingTip"),
|
|
okText: t("Seller.confirm"),
|
|
cancelText: t("Seller.cancel"),
|
|
centered: true,
|
|
onOk() {
|
|
console.log("stop selling")
|
|
}
|
|
})
|
|
}
|
|
</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;
|
|
&:deep(*) {
|
|
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>
|