aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

Browse Source
This commit is contained in:
zhangyahui
2026-04-27 17:18:56 +08:00
parent 05178c4cb0 813918eb39
commit 04ad920590
10 changed files with 1137 additions and 1113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
.prettierrc.js
View File

@@ -1,33 +0,0 @@
/** @type {import('prettier').Config} */
module.exports = {
// 打印宽度
printWidth: 100,
// 使用 4 空格缩进
tabWidth: 4,
// 使用 4 空格缩进，不使用制表符
useTabs: true,
// 行尾使用 LF (Unix 风格)
endOfLine: 'lf',
// 语句末尾使用分号
semi: false,
// 使用单引号
singleQuote: false,
// 对象和数组末尾不添加尾随逗号
trailingComma: 'none',
// JSX 引号使用单引号
jsxSingleQuote: false,
// 括号内侧空格
bracketSpacing: true,
// JSX 标签不换行
bracketSameLine: false,
// 箭头函数参数始终使用括号
arrowParens: 'always',
// HTML、Vue、Angular 和 Markdown 使用 LF
htmlWhitespaceSensitivity: 'css',
// Vue 文件脚本和样式缩进
vueIndentScriptAndStyle: false,
// 行注释位置在注释上方，不加空格
proseWrap: 'preserve',
// 根据文件类型自动推断
embeddedLanguageFormatting: 'auto',
};

17
.prettierrc.json Normal file
View File

@@ -0,0 +1,17 @@
{
"printWidth": 100,
"tabWidth": 4,
"useTabs": true,
"endOfLine": "lf",
"semi": false,
"singleQuote": false,
"trailingComma": "none",
"jsxSingleQuote": false,
"bracketSpacing": true,
"bracketSameLine": false,
"arrowParens": "always",
"htmlWhitespaceSensitivity": "css",
"vueIndentScriptAndStyle": true,
"proseWrap": "preserve",
"embeddedLanguageFormatting": "auto"
}

5
src/store/seller/index.ts
View File

@@ -49,8 +49,11 @@ const seller: Module<Seller, RootState> = {
}, },
set_designerInfo(state: Seller, value: DesignerInfo) { set_designerInfo(state: Seller, value: DesignerInfo) {
state.designerInfo = { state.designerInfo = {
...state.designerInfo,
...value, ...value,
socialLinks: JSON.parse(value.socialLinks) }
if (value.socialLinks) {
state.designerInfo.socialLinks = JSON.parse(value.socialLinks)
} }
}, },
}, },

4
src/tool/https.js
View File

@@ -474,6 +474,7 @@ export const Https = {
// 卖家端接口 // 卖家端接口
sellerUploadFile: '/seller/file/upload', // 卖家上传文件
checkSellerDesigner: '/seller/designer/check', // 检查卖家是否为设计师 checkSellerDesigner: '/seller/designer/check', // 检查卖家是否为设计师
getSellerApplyStatus: '/seller/designer/apply/status', // 获取卖家申请状态 getSellerApplyStatus: '/seller/designer/apply/status', // 获取卖家申请状态
submitSellerApply: '/seller/designer/apply', // 提交卖家申请 submitSellerApply: '/seller/designer/apply', // 提交卖家申请
@@ -483,7 +484,8 @@ export const Https = {
getSellerOrderList: '/seller/order/page', // 获取卖家订单列表 getSellerOrderList: '/seller/order/page', // 获取卖家订单列表
getListingPopup: '/seller/listing/popup/check', // 获取是否勾选发布作品提示 getListingPopup: '/seller/listing/popup/check', // 获取是否勾选发布作品提示
setListingPopup: '/seller/listing/popup/set', // 设置是否勾选发布作品提示 setListingPopup: '/seller/listing/popup/set', // 设置是否勾选发布作品提示
getListingList: '/seller/listing/page', // 获取商品列表,发布和未发布
putListingStatus: '/seller/listing/status', // 更新商品状态
}, },
axiosGet(url, config, pathParams) { axiosGet(url, config, pathParams) {

633
src/views/SellerDashboard/BrandProfile/image-clip.vue
View File

@@ -12,7 +12,6 @@
centerBox centerBox
@realTime="onChange" @realTime="onChange"
outputType="png" outputType="png"
v-bind="bindProps"
></VueCropper> ></VueCropper>
</div> </div>
<div class="clip_opterate"> <div class="clip_opterate">
@@ -35,357 +34,351 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, useAttrs, onMounted, onBeforeUnmount, computed, nextTick, watch } from "vue" import { ref, useAttrs, onMounted, onBeforeUnmount, computed, nextTick, watch } from "vue"
import "vue-cropper/dist/index.css" import "vue-cropper/dist/index.css"
import { VueCropper } from "vue-cropper" import { VueCropper } from "vue-cropper"
const props = defineProps({ const props = defineProps({
url: { url: {
type: String, type: String,
default: "" default: ""
}, },
ratio: { ratio: {
type: Array, type: Array,
default: () => [1, 1] default: () => [1, 1]
}, },
isProduct: { isProduct: {
type: Boolean, type: Boolean,
default: false default: false
}, },
type: { fixedBox: {
type: String, type: Boolean,
default: () => "" default: true
} },
}) type: {
const attrs = useAttrs() type: String,
default: () => ""
const autoCropHeight = computed(() => {
let height = 426
if (props.type === "cover") height = 375
else if (props.type === "apparel") height = 320
return height
})
const bindProps = computed(() => {
// :autoCropWidth="isProduct ? undefined : type === 'cover' ? 297 : 242"
// :autoCropHeight="isProduct ? undefined : autoCropHeight"
// if (props.isProduct) {
// return {
// autoCropHeight: autoCropHeight.value,
// autoCropWidth: props.type === "cover" ? 297 : 242
// }
// }
})
const onChange = (data) => {
if (attrs.onChange) {
getCropUrl().then((url) => attrs.onChange(url))
}
}
const cropper = ref(null)
const imageClipBody = ref(null)
let injectLabelFrame = 0
const observer = new ResizeObserver((entries) => {
refreshCrop()
})
const clearCropLabels = (cropperBox) => {
if (!cropperBox) return
cropperBox.querySelectorAll(".cropper-line-label").forEach((node) => node.remove())
}
const createCropLabel = ({ text, top, className }) => {
const label = document.createElement("div")
label.className = `cropper-line-label ${className}`
label.textContent = text
label.style.top = top
label.style.left = className === "label-v" ? "50%" : "0"
label.style.transform = className === "label-v" ? "translate(-50%, -50%)" : "translateY(-50%)"
return label
}
const cropLabelMap = {
cover: [
{ text: "crown", top: "2.67%", className: "label-h" },
{ text: "hip line", top: "63.47%", className: "label-h" },
{ text: "mid-thigh", top: "92.8%", className: "label-h" },
{ text: "center", top: "0", className: "label-v" }
],
mainProductImage: [
{ text: "crown", top: "2.67%", className: "label-h" },
{ text: "footbase", top: "97.6%", className: "label-h" },
{ text: "center", top: "0", className: "label-v" }
],
sketch: [
{ text: "crown", top: "2.67%", className: "label-h" },
{ text: "footbase", top: "97.6%", className: "label-h" },
{ text: "center", top: "0", className: "label-v" }
],
apparel: [{ text: "center", top: "0", className: "label-v" }]
}
const injectCropLabel = () => {
const cropperBox = imageClipBody.value?.querySelector(".cropper-view-box")
if (!cropperBox) return false
clearCropLabels(cropperBox)
;(cropLabelMap[props.type] || []).forEach((config) => {
cropperBox.appendChild(createCropLabel(config))
})
return true
}
const scheduleInjectCropLabel = (retry = 0) => {
cancelAnimationFrame(injectLabelFrame)
injectLabelFrame = requestAnimationFrame(() => {
if (!injectCropLabel() && retry < 10) {
scheduleInjectCropLabel(retry + 1)
} }
}) })
} const attrs = useAttrs()
onMounted(() => { const autoCropHeight = computed(() => {
observer.observe(imageClipBody.value) let height = 426
scheduleInjectCropLabel() if (props.type === "cover") height = 375
}) else if (props.type === "apparel") height = 320
onBeforeUnmount(() => { return height
observer.disconnect()
cancelAnimationFrame(injectLabelFrame)
})
const rotateLeft = () => {
cropper.value.rotateLeft()
}
const rotateRight = () => {
cropper.value.rotateRight()
}
const refreshCrop = () => {
cropper.value.refresh()
}
const changeScale = (num = 1) => {
cropper.value.changeScale(num)
}
const getCropUrl = () => {
return new Promise((resolve, reject) => {
cropper.value.getCropData(resolve)
}) })
}
const getCropBlob = () => {
return new Promise((resolve, reject) => {
cropper.value.getCropBlob(resolve)
})
}
watch( const onChange = (data) => {
[() => props.type, () => props.url], if (attrs.onChange) {
async () => { getCropUrl().then((url) => attrs.onChange(url))
await nextTick() }
}
const cropper = ref(null)
const imageClipBody = ref(null)
let injectLabelFrame = 0
const observer = new ResizeObserver((entries) => {
refreshCrop()
})
const clearCropLabels = (cropperBox) => {
if (!cropperBox) return
cropperBox.querySelectorAll(".cropper-line-label").forEach((node) => node.remove())
}
const createCropLabel = ({ text, top, className }) => {
const label = document.createElement("div")
label.className = `cropper-line-label ${className}`
label.textContent = text
label.style.top = top
label.style.left = className === "label-v" ? "50%" : "0"
label.style.transform =
className === "label-v" ? "translate(-50%, -50%)" : "translateY(-50%)"
return label
}
const cropLabelMap = {
cover: [
{ text: "crown", top: "2.67%", className: "label-h" },
{ text: "hip line", top: "63.47%", className: "label-h" },
{ text: "mid-thigh", top: "92.8%", className: "label-h" },
{ text: "center", top: "0", className: "label-v" }
],
mainProductImage: [
{ text: "crown", top: "2.67%", className: "label-h" },
{ text: "footbase", top: "97.6%", className: "label-h" },
{ text: "center", top: "0", className: "label-v" }
],
sketch: [
{ text: "crown", top: "2.67%", className: "label-h" },
{ text: "footbase", top: "97.6%", className: "label-h" },
{ text: "center", top: "0", className: "label-v" }
],
apparel: [{ text: "center", top: "0", className: "label-v" }]
}
const injectCropLabel = () => {
const cropperBox = imageClipBody.value?.querySelector(".cropper-view-box")
if (!cropperBox) return false
clearCropLabels(cropperBox)
;(cropLabelMap[props.type] || []).forEach((config) => {
cropperBox.appendChild(createCropLabel(config))
})
return true
}
const scheduleInjectCropLabel = (retry = 0) => {
cancelAnimationFrame(injectLabelFrame)
injectLabelFrame = requestAnimationFrame(() => {
if (!injectCropLabel() && retry < 10) {
scheduleInjectCropLabel(retry + 1)
}
})
}
onMounted(() => {
observer.observe(imageClipBody.value)
scheduleInjectCropLabel() scheduleInjectCropLabel()
}, })
{ flush: "post" } onBeforeUnmount(() => {
) observer.disconnect()
cancelAnimationFrame(injectLabelFrame)
})
const rotateLeft = () => {
cropper.value.rotateLeft()
}
const rotateRight = () => {
cropper.value.rotateRight()
}
const refreshCrop = () => {
cropper.value.refresh()
}
const changeScale = (num = 1) => {
cropper.value.changeScale(num)
}
const getCropUrl = () => {
return new Promise((resolve, reject) => {
cropper.value.getCropData(resolve)
})
}
const getCropBlob = () => {
return new Promise((resolve, reject) => {
cropper.value.getCropBlob(resolve)
})
}
defineExpose({ watch(
getCropUrl, [() => props.type, () => props.url],
getCropBlob async () => {
}) await nextTick()
scheduleInjectCropLabel()
},
{ flush: "post" }
)
defineExpose({
getCropUrl,
getCropBlob
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.image-clip { .image-clip {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
// height: 100%;
background: #fff;
border-radius: calc(2rem * 1.2);
padding: calc(1.3rem * 1.2) calc(1.3rem * 1.2) calc(2rem * 1.2);
box-sizing: border-box;
.image-clip-body {
width: 100%; width: 100%;
height: calc(40rem * 1.2); height: 100%;
// height: 53rem;
background: yellow;
:deep(.cropper-box) {
.cropper-box-canvas {
background-color: #ffffff;
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;
}
}
}
}
.clip_opterate {
margin: calc(2.7rem * 1.2) auto 0;
border-radius: calc(1.6rem * 1.2);
display: flex; display: flex;
overflow: hidden; flex-direction: column;
border: 1px solid #e2e2e4; // height: 100%;
width: calc(24rem * 1.2); background: #fff;
border-radius: calc(2rem * 1.2);
padding: calc(1.3rem * 1.2) calc(1.3rem * 1.2) calc(2rem * 1.2);
box-sizing: border-box;
.item {
width: calc(4.7rem * 1.2);
height: calc(4rem * 1.2);
display: flex;
align-items: center;
justify-content: center;
border-right: 0.1rem solid #e6e8ea;
cursor: pointer;
.icon_chexiao_sec {
transform: rotateY(180deg); /* 垂直镜像翻转 */
}
.operate_icon {
font-size: calc(1.8rem * 1.2);
color: rgba(102, 102, 102, 1);
font-weight: bold;
}
.icon_font {
font-size: calc(2.5rem * 1.2);
position: relative;
top: calc(-0.3rem * 1.2);
user-select: none;
}
.icon-shuaxin {
font-size: calc(1.4rem * 1.2);
}
&:last-child {
border: none;
}
}
}
&.is-product {
.image-clip-body { .image-clip-body {
width: 45.7rem; width: 100%;
height: 45.7rem; height: calc(40rem * 1.2);
:deep(.cropper-modal) { // height: 53rem;
background: transparent; background: yellow;
} :deep(.cropper-box) {
:deep(.vue-cropper .cropper-view-box) { .cropper-box-canvas {
position: relative; background-color: #ffffff;
overflow: visible !important;
/* 原有的蓝色边框（outline）由组件控制，这里不干涉 */
}
:deep(.vue-cropper .cropper-view-box::after) { img {
content: ""; height: 100%;
position: absolute; }
top: 0; }
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9; /* 位于图片之上，但在控制点之下 */
background-image: none;
background-repeat: no-repeat;
} }
} &.is-cover {
:deep(.vue-cropper) {
&[data-crop-type="cover"] { overflow: hidden;
.image-clip-body { }
:deep(.vue-cropper .cropper-view-box::after) { :deep(.cropper-box-canvas) {
background-image: width: 31.1rem !important;
linear-gradient(to right, #4ba5ff 50%, transparent 50%), left: 50% !important;
linear-gradient(to right, #4ba5ff 50%, transparent 50%), transform: translateX(-50%) !important;
linear-gradient(to right, #4ba5ff 50%, transparent 50%), img {
linear-gradient(to bottom, #4ba5ff 50%, transparent 50%); display: none;
background-repeat: repeat-x, repeat-x, repeat-x, repeat-y; }
background-size:
8px 1px,
8px 1px,
8px 1px,
1px 8px;
background-position:
0 2.67%,
0 63.47%,
0 92.8%,
50% 0;
} }
} }
} }
&[data-crop-type="mainProductImage"], .clip_opterate {
&[data-crop-type="sketch"] { margin: calc(2.7rem * 1.2) auto 0;
.image-clip-body { border-radius: calc(1.6rem * 1.2);
:deep(.vue-cropper .cropper-view-box::after) { display: flex;
background-image: overflow: hidden;
linear-gradient(to right, #4ba5ff 50%, transparent 50%), border: 1px solid #e2e2e4;
linear-gradient(to right, #4ba5ff 50%, transparent 50%), width: calc(24rem * 1.2);
linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
background-repeat: repeat-x, repeat-x, repeat-y; .item {
background-size: width: calc(4.7rem * 1.2);
8px 1px, height: calc(4rem * 1.2);
8px 1px, display: flex;
1px 8px; align-items: center;
background-position: justify-content: center;
0 2.67%, border-right: 0.1rem solid #e6e8ea;
0 97.6%, cursor: pointer;
50% 0;
.icon_chexiao_sec {
transform: rotateY(180deg); /* 垂直镜像翻转 */
}
.operate_icon {
font-size: calc(1.8rem * 1.2);
color: rgba(102, 102, 102, 1);
font-weight: bold;
}
.icon_font {
font-size: calc(2.5rem * 1.2);
position: relative;
top: calc(-0.3rem * 1.2);
user-select: none;
}
.icon-shuaxin {
font-size: calc(1.4rem * 1.2);
}
&:last-child {
border: none;
} }
} }
} }
&[data-crop-type="apparel"] { &.is-product {
.image-clip-body { .image-clip-body {
width: 45.7rem;
height: 45.7rem;
:deep(.cropper-modal) {
background: transparent;
}
:deep(.vue-cropper .cropper-view-box) {
position: relative;
overflow: visible !important;
/* 原有的蓝色边框（outline）由组件控制，这里不干涉 */
}
:deep(.vue-cropper .cropper-view-box::after) { :deep(.vue-cropper .cropper-view-box::after) {
background-image: linear-gradient(to bottom, #4ba5ff 50%, transparent 50%); content: "";
background-repeat: repeat-y; position: absolute;
background-size: 1px 8px; top: 0;
background-position: 50% 0; left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9; /* 位于图片之上，但在控制点之下 */
background-image: none;
background-repeat: no-repeat;
}
}
&[data-crop-type="cover"] {
.image-clip-body {
:deep(.vue-cropper .cropper-view-box::after) {
background-image:
linear-gradient(to right, #4ba5ff 50%, transparent 50%),
linear-gradient(to right, #4ba5ff 50%, transparent 50%),
linear-gradient(to right, #4ba5ff 50%, transparent 50%),
linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
background-repeat: repeat-x, repeat-x, repeat-x, repeat-y;
background-size:
8px 1px,
8px 1px,
8px 1px,
1px 8px;
background-position:
0 2.67%,
0 63.47%,
0 92.8%,
50% 0;
}
}
}
&[data-crop-type="mainProductImage"],
&[data-crop-type="sketch"] {
.image-clip-body {
:deep(.vue-cropper .cropper-view-box::after) {
background-image:
linear-gradient(to right, #4ba5ff 50%, transparent 50%),
linear-gradient(to right, #4ba5ff 50%, transparent 50%),
linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
background-repeat: repeat-x, repeat-x, repeat-y;
background-size:
8px 1px,
8px 1px,
1px 8px;
background-position:
0 2.67%,
0 97.6%,
50% 0;
}
}
}
&[data-crop-type="apparel"] {
.image-clip-body {
:deep(.vue-cropper .cropper-view-box::after) {
background-image: linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
background-repeat: repeat-y;
background-size: 1px 8px;
background-position: 50% 0;
}
} }
} }
} }
} }
}
</style> </style>
<style lang="less"> <style lang="less">
.cropper-line-label { .cropper-line-label {
position: absolute; position: absolute;
color: #4ba5ff; /* 统一颜色 */ color: #4ba5ff; /* 统一颜色 */
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
background: rgba(255, 255, 255); /* 浅色背景确保在深色图片上可见 */ background: rgba(255, 255, 255); /* 浅色背景确保在深色图片上可见 */
// padding: 0 4px; // padding: 0 4px;
border-radius: 2px; border-radius: 2px;
white-space: nowrap; white-space: nowrap;
pointer-events: none; pointer-events: none;
z-index: 10; z-index: 10;
line-height: 1.2; line-height: 1.2;
} }
/* 水平线名称：放在线段上方 2px */ /* 水平线名称：放在线段上方 2px */
.label-h { .label-h {
transform: translateY(-100%); transform: translateY(-100%);
margin-top: -2px; margin-top: -2px;
left: 4px; left: 4px;
} }
/* 垂直线名称：放在裁剪框顶部边缘上方 */ /* 垂直线名称：放在裁剪框顶部边缘上方 */
.label-v { .label-v {
transform: translateX(-50%); transform: translateX(-50%);
top: -20px; top: -20px;
left: 50%; left: 50%;
} }
</style> </style>

44
src/views/SellerDashboard/BrandProfile/index.vue
View File

@@ -25,8 +25,8 @@
<div class="and-profile-footer"> <div class="and-profile-footer">
<template v-if="isEdit"> <template v-if="isEdit">
<div class="btns"> <div class="btns">
<button class="cancel" @click="onCancel">Cancel</button> <button class="cancel" @click="onCancel()">Cancel</button>
<button class="submit" @click="onSubmit">Save Change</button> <button class="submit" @click="onSubmit()">Save Change</button>
</div> </div>
<p class="tip">Changes will be reflected on your Stylish Parade brand page.</p> <p class="tip">Changes will be reflected on your Stylish Parade brand page.</p>
</template> </template>
@@ -47,6 +47,7 @@
import ImageClipDialog from "./image-clip-dialog.vue" import ImageClipDialog from "./image-clip-dialog.vue"
import { useStore } from "vuex" import { useStore } from "vuex"
const store = useStore() const store = useStore()
store.dispatch("seller/get_designerInfo")
const designerInfo = computed(() => store.state.seller.designerInfo) const designerInfo = computed(() => store.state.seller.designerInfo)
const avatar = computed(() => designerInfo.value.avatar) const avatar = computed(() => designerInfo.value.avatar)
const banner = computed(() => designerInfo.value.brandBanner) const banner = computed(() => designerInfo.value.brandBanner)
@@ -69,13 +70,25 @@
input.click() input.click()
} }
const uploadFile = async (file) => {
const formData = new FormData()
formData.append("file", file)
return Https.axiosPost(Https.httpUrls.sellerUploadFile, formData, {
headers: {
"Content-Type": "multipart/form-data"
}
})
}
const onChangeBanner = () => { const onChangeBanner = () => {
uploadImg(({ url }) => { uploadImg(({ url }) => {
imageClipDialogRef.value.open( imageClipDialogRef.value.open(
url, url,
(file) => { async (file) => {
// banner.value = URL.createObjectURL(file) store.commit("set_loading", true)
console.log(URL.createObjectURL(file)) const res = await uploadFile(file)
onSubmit({ brandBanner: res })
store.commit("set_loading", false)
}, },
{ ratio: [40, 7], isPreview: false, title: "Crop Brand Banner" } { ratio: [40, 7], isPreview: false, title: "Crop Brand Banner" }
) )
@@ -85,9 +98,11 @@
uploadImg(({ url }) => { uploadImg(({ url }) => {
imageClipDialogRef.value.open( imageClipDialogRef.value.open(
url, url,
(file) => { async (file) => {
// avatar.value = URL.createObjectURL(file) store.commit("set_loading", true)
console.log(URL.createObjectURL(file)) const res = await uploadFile(file)
onSubmit({ avatar: res })
store.commit("set_loading", false)
}, },
{ ratio: [1, 1], isPreview: true, title: "Crop Avatar" } { ratio: [1, 1], isPreview: true, title: "Crop Avatar" }
) )
@@ -99,12 +114,16 @@
const onCancel = () => { const onCancel = () => {
isEdit.value = false isEdit.value = false
} }
const onSubmit = async () => { const onSubmit = async (value = null) => {
const res = await brandInfoRef.value.submit() const res = value ? value : await brandInfoRef.value.submit()
const data = { const data = {
...designerInfo.value, ...designerInfo.value,
...res, ...res
socialLinks: JSON.stringify(res.socialLinks) }
try {
data.socialLinks = JSON.stringify(data.socialLinks)
} catch (error) {
data.socialLinks = JSON.stringify([])
} }
Https.axiosPut(Https.httpUrls.updateDesignerInfo, data).then((res) => { Https.axiosPut(Https.httpUrls.updateDesignerInfo, data).then((res) => {
isEdit.value = false isEdit.value = false
@@ -123,6 +142,7 @@
margin-bottom: 6rem; margin-bottom: 6rem;
> .bg { > .bg {
position: relative; position: relative;
min-height: 15rem;
> img { > img {
width: 100%; width: 100%;
height: auto; height: auto;

136
src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue
View File

@@ -20,85 +20,85 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from "vue" import { computed } from "vue"
interface Option { interface Option {
name: string | number name: string | number
value: string | number | boolean value: string | number | boolean
key: string key: string
optype: boolean optype: boolean
}
const props = defineProps<{
modelValue: string | number | boolean | Array<string | number | boolean> | null
options: Option[] // 按钮选项数组
multiple?: boolean // 是否支持多选，默认为 false
}>()
const emit = defineEmits<{
(e: "update:modelValue", value: any): void
}>()
const multiple = props.multiple === true
const selectedValues = computed(() => {
if (!multiple) {
return typeof props.modelValue === 'undefined' || props.modelValue === null
? []
: [props.modelValue]
} }
return Array.isArray(props.modelValue) ? props.modelValue : [] const props = defineProps<{
}) modelValue: string | number | boolean | Array<string | number | boolean> | null
options: Option[] // 按钮选项数组
multiple?: boolean // 是否支持多选，默认为 false
}>()
const selectOption = (value: any) => { const emit = defineEmits<{
if (multiple) { (e: "update:modelValue", value: any): void
const current = Array.isArray(props.modelValue) ? [...props.modelValue] : [] }>()
const index = current.indexOf(value)
if (index >= 0) { const multiple = props.multiple === true
current.splice(index, 1)
} else { const selectedValues = computed(() => {
current.push(value.toLocaleLowerCase) if (!multiple) {
return typeof props.modelValue === "undefined" || props.modelValue === null
? []
: [props.modelValue]
} }
emit("update:modelValue", current)
return
}
if (props.modelValue !== value) { return Array.isArray(props.modelValue) ? props.modelValue : []
emit("update:modelValue", value) })
const selectOption = (value: any) => {
if (multiple) {
const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
const index = current.indexOf(value)
if (index >= 0) {
current.splice(index, 1)
} else {
current.push(value.toLocaleLowerCase)
}
emit("update:modelValue", current)
return
}
if (props.modelValue !== value) {
emit("update:modelValue", value)
}
} }
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.radio-button-group { .radio-button-group {
display: flex; display: flex;
gap: 8px; gap: 8px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.radio-button { .radio-button {
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
height: 3.2rem; height: 3.2rem;
min-width: 8rem; min-width: 8rem;
padding: 0 1.7rem; padding: 0 1.7rem;
color: #000; color: #000;
cursor: pointer; cursor: pointer;
border-radius: 2rem; border-radius: 2rem;
outline: none; outline: none;
background-color: #fff; background-color: #fff;
font-size: 1.2rem; font-size: 1.2rem;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.radio-button:hover { .radio-button:hover {
border-color: #000; border-color: #000;
} }
.radio-button.is-active { .radio-button.is-active {
color: #fff; color: #fff;
background-color: #000; background-color: #000;
border-color: #000; border-color: #000;
font-family: pingfang_medium; font-family: pingfang_medium;
} }
</style> </style>

1315
src/views/SellerDashboard/MyListings/EditDetail/index.vue
View File

File diff suppressed because it is too large Load Diff

61
src/views/SellerDashboard/MyOrders/index.vue
View File

@@ -65,7 +65,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="null" v-show="list.length === 0 && !loading && finish">no data</div> <div class="null" v-show="list.length === 0 && !loading && finish">
<img src="@/assets/images/homePage/null_img.png" alt="" />
</div>
<div class="placeholder" ref="placeholderRef" v-show="!loading"></div> <div class="placeholder" ref="placeholderRef" v-show="!loading"></div>
<div class="footer" :class="{ null: list.length === 0 }" v-if="!finish"> <div class="footer" :class="{ null: list.length === 0 }" v-if="!finish">
<a-spin :delay="0.5" v-show="loading" /> <a-spin :delay="0.5" v-show="loading" />
@@ -120,28 +122,33 @@
size: size.value size: size.value
} }
if (nameOrId.value) data.keyword = nameOrId.value if (nameOrId.value) data.keyword = nameOrId.value
Https.axiosGet(Https.httpUrls.getSellerOrderList, { params: data }).then((res) => { Https.axiosGet(Https.httpUrls.getSellerOrderList, { params: data })
res.content?.forEach((v) => { .then((res) => {
const obj = { res.content?.forEach((v) => {
orderId: v.orderId, const obj = {
items: v.items.map((item) => ({ orderId: v.orderId,
id: item.productId, items: v.items.map((item) => ({
url: item.thumbnailUrl, id: item.productId,
title: item.productName url: item.thumbnailUrl,
})), title: item.productName
price: "HK$ " + v.price, })),
username: v.buyerUsername, price: "HK$ " + v.price,
date: v.date, username: v.buyerUsername,
time: v.date date: v.date,
} time: v.date
list.value.push(obj) }
}) list.value.push(obj)
})
total.value = res.total total.value = res.total
page.value++ page.value++
finish.value = page.value > total.value / size.value finish.value = page.value > total.value / size.value
loading.value = false loading.value = false
}) })
.catch(() => {
finish.value = true
loading.value = false
})
} }
const getSummary = () => { const getSummary = () => {
Https.axiosGet(Https.httpUrls.getSellerOrderSummary).then((res) => { Https.axiosGet(Https.httpUrls.getSellerOrderSummary).then((res) => {
@@ -360,8 +367,14 @@
} }
> .null { > .null {
margin-top: 10rem; margin-top: 10rem;
text-align: center; display: flex;
color: #999; align-items: center;
justify-content: center;
flex-direction: column;
> img {
width: 30rem;
height: auto;
}
} }
> .footer { > .footer {
min-height: 10rem; min-height: 10rem;

2
src/views/SellerDashboard/index.vue
View File

@@ -25,7 +25,7 @@
import myEvent from "@/tool/myEvents.js" import myEvent from "@/tool/myEvents.js"
import { useStore } from "vuex" import { useStore } from "vuex"
const store = useStore() const store = useStore()
store.dispatch("seller/get_designerInfo") // store.dispatch("seller/get_designerInfo")
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const visible = ref(false) const visible = ref(false)