|
|
@@ -17,35 +17,43 @@
|
|
|
<el-form-item label="广告名称" prop="name">
|
|
|
<el-input v-model="ruleForm.name" style="width: 50%" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item style="border: 1px solid #dddfe6; padding: 0 0 0 5px">
|
|
|
+ <div style="display: flex; border: 1px solid #dddfe6; padding: 0 0 0 5px; margin-bottom: 20px">
|
|
|
<div style="width: 50%; padding-left: 5px; border-right: 1px solid #dddfe6">
|
|
|
<el-scrollbar height="700px">
|
|
|
- <el-collapse v-model="activeNames" @change="handleChange">
|
|
|
- <el-collapse-item name="1">
|
|
|
+ <el-collapse v-model="activeNames" @change="handleChange" style="border-top: none; border-bottom: none">
|
|
|
+ <el-collapse-item name="1" style="padding-right: 10px">
|
|
|
<template #title> <span style="color: #e47470; margin-right: 4px">*</span>品牌名称和徽标</template>
|
|
|
<el-form-item prop="brandName">
|
|
|
- <el-input v-model="ruleForm.brandName" style="padding: 0 10px 5px 0"></el-input>
|
|
|
+ <el-input v-model="ruleForm.brandName" placeholder="请输入品牌名称" style="padding: 0 0 5px 0"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-upload
|
|
|
- class="upload-demo"
|
|
|
- drag
|
|
|
- action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
|
|
- multiple
|
|
|
- style="padding-right: 10px">
|
|
|
- <el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
- <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
|
|
|
+
|
|
|
+ <el-upload action="#" list-type="picture-card" :auto-upload="false" v-model:file-list="fileList" :limit="1">
|
|
|
+ <el-icon><Plus /></el-icon>
|
|
|
+ <template #file="{ file }">
|
|
|
+ <div>
|
|
|
+ <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
|
|
+ <span class="el-upload-list__item-actions">
|
|
|
+ <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
|
|
+ <el-icon><zoom-in /></el-icon>
|
|
|
+ </span>
|
|
|
+ <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
|
|
|
+ <el-icon><Delete /></el-icon>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
<template #tip>
|
|
|
<div style="margin-top: 10px">
|
|
|
<div style="display: flex; align-items: center; justify-content: space-between">
|
|
|
- <span style="line-height: 17px; font-weight: 600; color: #1e2128;">徽标规格</span>
|
|
|
- <el-button type="primary" :icon="Picture">从素材库中选择</el-button>
|
|
|
+ <span style="line-height: 17px; font-weight: 600; color: #1e2128">徽标规格</span>
|
|
|
+ <el-button type="primary" :icon="Picture" @click="openDialog">从素材库中选择</el-button>
|
|
|
</div>
|
|
|
<div class="introduce-item">1、图片大小: 400x400 像素或更大</div>
|
|
|
<div class="introduce-item">2、文件大小: 1MB 或更小</div>
|
|
|
<div class="introduce-item">3、文件格式: PNG 或 JPG</div>
|
|
|
<div class="introduce-item">
|
|
|
4、内容: 徽标必须填满图片或置于白色或透明背景上详细了解我们的徽标要求
|
|
|
- <span style="margin-left: 25px; position: relative;">
|
|
|
+ <span style="margin-left: 25px; position: relative">
|
|
|
<el-icon size="14" style="position: absolute; left: -14px; top: 1px"><Link /></el-icon>
|
|
|
<el-link
|
|
|
type="primary"
|
|
|
@@ -59,70 +67,99 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-upload>
|
|
|
+ <!-- 预览弹窗 -->
|
|
|
+ <el-dialog v-model="dialogVisible">
|
|
|
+ <img w-full :src="dialogImageUrl" alt="Preview Image" />
|
|
|
+ </el-dialog>
|
|
|
</el-collapse-item>
|
|
|
- <el-collapse-item name="2">
|
|
|
- <template #title> <span style="color: #e47470; margin-right: 4px">*</span>视频</template>
|
|
|
- <div style="display: flex; align-items: center; justify-content: space-between">
|
|
|
- <span style="color: #1e2128; font-size: 15px; font-weight: 450">选择视频</span>
|
|
|
- <el-button type="primary" text>查看视频批准提示</el-button>
|
|
|
+ <el-collapse-item name="2" style="padding-right: 10px">
|
|
|
+ <template #title><span style="color: #e47470; margin-right: 4px">*</span>视频</template>
|
|
|
+ <div style="display: flex; justify-content: space-between">
|
|
|
+ <div style="font-weight: 700; color: #1d2129; line-height: 18px; font-size: 14px">选择视频</div>
|
|
|
+ <el-button type="primary" link>查看视频批准提示</el-button>
|
|
|
</div>
|
|
|
- <div style="color: #666666; margin-bottom: 10px">
|
|
|
+ <div style="margin: 10px 0; font-size: 12px; font-weight: 400; color: #666; line-height: 18px">
|
|
|
保持视频简短并紧扣主题。视频会自动播放，因此请确保前 2
|
|
|
秒极具吸引力，并且不依靠声音来传递信息。如果您在视频中使用了文字，请确保文字清晰易辨。字幕或音频必须与将展示您广告的区域相匹配。
|
|
|
</div>
|
|
|
- <div class="upload-button-group">
|
|
|
- <el-upload
|
|
|
- v-model:file-list="fileList"
|
|
|
- class="upload-demo"
|
|
|
- action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
|
|
- multiple
|
|
|
- :on-preview="handlePreview"
|
|
|
- :on-remove="handleRemove"
|
|
|
- :before-remove="beforeRemove"
|
|
|
- :limit="3"
|
|
|
- :on-exceed="handleExceed">
|
|
|
- <el-button type="primary">上传文件</el-button>
|
|
|
-
|
|
|
- <template #tip>
|
|
|
- <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
|
|
|
- </template>
|
|
|
- </el-upload>
|
|
|
- <el-button type="primary" :icon="Picture" style="margin-left: -120px" @click="handleSelect">从素材库中选择</el-button>
|
|
|
- </div>
|
|
|
- <div style="display: flex; align-items: center; justify-content: space-between">
|
|
|
- <span style="color: #1e2128; font-size: 15px; font-weight: 450">视频文件要求:</span>
|
|
|
- <el-button type="primary" text>了解更多</el-button>
|
|
|
- </div>
|
|
|
+ <el-upload
|
|
|
+ v-model:file-list="fileList"
|
|
|
+ class="upload-demo"
|
|
|
+ action="#"
|
|
|
+ accept=".mp4, .mov"
|
|
|
+ multiple
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :before-remove="beforeRemove"
|
|
|
+ :limit="1"
|
|
|
+ :on-exceed="handleExceed">
|
|
|
+ <el-button type="primary">上传文件</el-button>
|
|
|
+ <template #tip>
|
|
|
+ <el-button type="primary" style="margin-left: 20px">从素材库中选择</el-button>
|
|
|
+ <!-- <div class="el-upload__tip">div> -->
|
|
|
+ <hr style="margin: 10px 0" />
|
|
|
+ <div>
|
|
|
+ <div style="display: flex; justify-content: space-between;">
|
|
|
+ <span style="font-weight: 700; color: #1d2129; line-height: 18px; font-size: 14px;">视频文件要求:</span>
|
|
|
+ <el-button type="primary" link>了解更多</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="tip-list-title">视频格式</div>
|
|
|
+ <div class="tip-item">1.纵横比：16：9</div>
|
|
|
+ <div class="tip-item">2.尺寸：1280 x 720 像素、1920 x 1080 像素或 3840 x 2160 像素</div>
|
|
|
+ <div class="tip-item">3.文件大小：500MB 或更小</div>
|
|
|
+ <div class="tip-item">4.文件格式：MP4 或 MOV</div>
|
|
|
+ <div class="tip-item">5.长度：6-45 秒</div>
|
|
|
+ <div class="tip-item">6.帧率：23.976、23.98、24、25、29.97 或 29.98 fps</div>
|
|
|
+ <div class="tip-item">7.比特率：1 Mbps 或更高</div>
|
|
|
+ <div class="tip-item">8.编解码器：H.264 或 H.2651</div>
|
|
|
+ <div class="tip-item">9.配置文件：主配置文件或基线配置文件</div>
|
|
|
+ <div class="tip-item">10.视频流：仅为 1</div>
|
|
|
+ <div class="tip-list-title">音频规格</div>
|
|
|
+ <div class="tip-item">1.语言：必须与广告投放区域匹配</div>
|
|
|
+ <div class="tip-item">2.采样率：44.1 kHz 或更高</div>
|
|
|
+ <div class="tip-item">3.编解码器：PCM、AAC 或 MP3</div>
|
|
|
+ <div class="tip-item">4.比特率：96 kbps 或更高</div>
|
|
|
+ <div class="tip-item">5.格式：立体声或单声道</div>
|
|
|
+ <div class="tip-item">6.音频流：仅为 1</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
|
|
|
- <div>
|
|
|
- <span style="color: #1e2128; font-size: 13px; font-weight: 450">视频规格</span>
|
|
|
- <div class="introduce-item">1.纵横比：16：9</div>
|
|
|
- <div class="introduce-item">2.尺寸：1280 x 720 像素、1920 x 1080 像素或 3840 x 2160 像素</div>
|
|
|
- <div class="introduce-item">3.文件大小：500MB 或更小</div>
|
|
|
- <div class="introduce-item">4.文件格式：MP4 或 MOV</div>
|
|
|
- <div class="introduce-item">5.长度：6-45 秒</div>
|
|
|
- <div class="introduce-item">6.帧率：23.976、23.98、24、25、29.97 或 29.98 fps</div>
|
|
|
- <div class="introduce-item">7.比特率：1 Mbps 或更高</div>
|
|
|
- <div class="introduce-item">8.编解码器：H.264 或 H.265</div>
|
|
|
- <div class="introduce-item">9.配置文件：主配置文件或基线配置文件</div>
|
|
|
- <div class="introduce-item">10.视频流：仅为 1</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <span style="color: #1e2128; font-size: 13px; font-weight: 450">音频规格</span>
|
|
|
- <div class="introduce-item">1.语言：必须与广告投放区域匹配</div>
|
|
|
- <div class="introduce-item">2.采样率：44.1 kHz 或更高</div>
|
|
|
- <div class="introduce-item">3.编解码器：PCM、AAC 或 MP3</div>
|
|
|
- <div class="introduce-item">4.比特率：96 kbps 或更高</div>
|
|
|
- <div class="introduce-item">5.格式：立体声或单声道</div>
|
|
|
- <div class="introduce-item">6.音频流：仅为 1</div>
|
|
|
- </div>
|
|
|
+ <!-- 预览弹窗 -->
|
|
|
+ <el-dialog v-model="dialogVisible">
|
|
|
+ <img w-full :src="dialogImageUrl" alt="Preview Image" />
|
|
|
+ </el-dialog>
|
|
|
</el-collapse-item>
|
|
|
|
|
|
- <el-collapse-item name="3">
|
|
|
+ <el-collapse-item name="commodity" v-loading="commodityLoading" style="padding-right: 10px">
|
|
|
<template #title> <span style="color: #e47470; margin-right: 4px">*</span>商品</template>
|
|
|
- <el-button type="primary" :icon="Plus" :disabled="true">添加商品</el-button>
|
|
|
+ <div v-for="(item, index) in flattenedCommodityCard" :key="index" style="margin: 0 0 5px 0">
|
|
|
+ <el-card shadow="hover" body-style="padding: 10px; display: flex;">
|
|
|
+ <div style="margin-right: 8px; line-height: normal">
|
|
|
+ <el-image class="img-box" :src="item.image_link" />
|
|
|
+ </div>
|
|
|
+ <div style="position: relative">
|
|
|
+ <el-tooltip class="box-item" effect="dark" :content="item.title" placement="top">
|
|
|
+ <div class="double-line">{{ item.title }}</div>
|
|
|
+ </el-tooltip>
|
|
|
+ <span>
|
|
|
+ <span style="color: #6d7784">ASIN: </span>
|
|
|
+ <span class="data-color" style="margin-right: 8px">{{ item.asin }}</span>
|
|
|
+ </span>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ link
|
|
|
+ @click="() => openCommodityDialog(index)"
|
|
|
+ style="position: absolute; bottom: 2px; right: 0">
|
|
|
+ 更换商品
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
</el-collapse-item>
|
|
|
- <el-collapse-item name="4">
|
|
|
+ <el-collapse-item name="4" style="padding-right: 10px">
|
|
|
<template #title> <span style="color: #e47470; margin-right: 4px">*</span>标题</template>
|
|
|
<el-form-item prop="title">
|
|
|
<el-input v-model="ruleForm.title" maxlength="50" placeholder="请输入标题" show-word-limit style="padding: 0 10px 0 0"></el-input>
|
|
|
@@ -131,25 +168,133 @@
|
|
|
</el-collapse>
|
|
|
</el-scrollbar>
|
|
|
</div>
|
|
|
- </el-form-item>
|
|
|
+ <div style="width: 50%; padding: 0 10px; position: relative">
|
|
|
+ <el-button type="primary" plain @click="clickSave" style="position: absolute; top: 92%; left: 46%">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-form>
|
|
|
</el-card>
|
|
|
+ <el-dialog v-model="centerDialogVisible" title="从素材库中选择" width="65%">
|
|
|
+ <el-input :prefix-icon="Search"></el-input>
|
|
|
+ <div class="grid-container">
|
|
|
+ <div
|
|
|
+ class="grid-item"
|
|
|
+ v-for="item in cards"
|
|
|
+ :key="item.id"
|
|
|
+ @click="selectCard(item)"
|
|
|
+ :class="{ selected: isSelected(item.id), hover: hoverId === item.id }"
|
|
|
+ @mouseover="hoverId = item.id"
|
|
|
+ @mouseleave="hoverId = null">
|
|
|
+ <el-card :body-style="{ padding: '0px' }">
|
|
|
+ <el-image class="image" :src="item.imageUrl" fit="cover" />
|
|
|
+ <div style="padding: 10px">
|
|
|
+ <span>
|
|
|
+ <el-tooltip placement="top" :content="item.title">
|
|
|
+ {{ item.title }}
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="bottom-item">{{ item.size }}KB</div>
|
|
|
+ <div class="bottom-item">{{ item.width }} * {{ item.height }}</div>
|
|
|
+ <div class="bottom-item">徽标</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="centerDialogVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="handleConfirmSelection">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog v-model="lifeStyleDialog" title="从素材库中选择" width="65%">
|
|
|
+ <el-input :prefix-icon="Search"></el-input>
|
|
|
+ <div class="grid-container">
|
|
|
+ <div
|
|
|
+ class="grid-item"
|
|
|
+ v-for="item in lifeStyleCards"
|
|
|
+ :key="item.id"
|
|
|
+ @click="selectCard(item)"
|
|
|
+ :class="{ selected: isSelected(item.id), hover: hoverId === item.id }"
|
|
|
+ @mouseover="hoverId = item.id"
|
|
|
+ @mouseleave="hoverId = null">
|
|
|
+ <el-card :body-style="{ padding: '0px' }">
|
|
|
+ <el-image class="image" :src="item.imageUrl" fit="cover" />
|
|
|
+ <div style="padding: 10px">
|
|
|
+ <span>
|
|
|
+ <el-tooltip placement="top" :content="item.title">
|
|
|
+ {{ item.title }}
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="bottom-item">{{ item.size }}KB</div>
|
|
|
+ <div class="bottom-item">{{ item.width }} * {{ item.height }}</div>
|
|
|
+ <div class="bottom-item">徽标</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="centerDialogVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="centerDialogVisible = false">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog v-model="commodityDialog" title="更换商品" width="50%">
|
|
|
+ <el-radio-group
|
|
|
+ v-loading="dialogLoading3"
|
|
|
+ v-model="selectedCommodity"
|
|
|
+ style="display: flex; flex-direction: column; align-content: flex-start; align-items: flex-start">
|
|
|
+ <div v-for="(item, index) in flattenedReplaceableCommodity" :key="index">
|
|
|
+ <el-radio :label="item.asin" style="height: 80px; border-bottom: 1px solid #ccc">
|
|
|
+ <div style="padding: 10px; display: flex; align-items: center">
|
|
|
+ <div style="margin-right: 8px; line-height: normal">
|
|
|
+ <el-image class="img-box" :src="item.image_link" />
|
|
|
+ </div>
|
|
|
+ <div style="position: relative">
|
|
|
+ <el-tooltip class="box-item" effect="dark" :content="item.title" placement="top">
|
|
|
+ <div class="double-line">{{ item.title }}</div>
|
|
|
+ </el-tooltip>
|
|
|
+ <span>
|
|
|
+ <span style="color: #6d7784">ASIN: </span>
|
|
|
+ <span class="data-color" style="margin-right: 8px">{{ item.asin }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-radio>
|
|
|
+ </div>
|
|
|
+ </el-radio-group>
|
|
|
+ <div style="margin-top: 20px; display: flex; justify-content: center">
|
|
|
+ <el-button type="primary" :disabled="!selectedCommodity" @click="handleSelectedCommodity">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { reactive, ref } from 'vue'
|
|
|
+import { reactive, ref, inject, Ref, watch, computed } from 'vue'
|
|
|
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
-import { Plus, Picture } from '@element-plus/icons-vue'
|
|
|
+import { Plus, Picture, Search, Delete, Download, ZoomIn } from '@element-plus/icons-vue'
|
|
|
+import type { UploadFile } from 'element-plus'
|
|
|
+import { getAssets, getLifeStyleAssets, getPageAsins, getCommodityCard } from '../api/index'
|
|
|
+import { storeToRefs } from 'pinia'
|
|
|
+import { useShopInfo } from '/@/stores/shopInfo'
|
|
|
+
|
|
|
+const shopInfo = useShopInfo()
|
|
|
+const { profile } = storeToRefs(shopInfo)
|
|
|
+
|
|
|
+const ruleFormRef = ref<FormInstance>()
|
|
|
|
|
|
interface RuleForm {
|
|
|
name: string
|
|
|
brandName: string
|
|
|
title: string
|
|
|
}
|
|
|
-
|
|
|
-const ruleFormRef = ref<FormInstance>()
|
|
|
const ruleForm = reactive<RuleForm>({
|
|
|
name: '视频 广告 - 1/15/2024 17:51:10.236',
|
|
|
brandName: '',
|
|
|
@@ -176,21 +321,27 @@ const submitForm = async (formEl: FormInstance | undefined) => {
|
|
|
const activeNames = ref(['1'])
|
|
|
const handleChange = (val: string[]) => {
|
|
|
console.log(val)
|
|
|
+ if (val.includes('commodity')) {
|
|
|
+ getCommodityCardData()
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-const fileList = ref<UploadUserFile[]>([
|
|
|
- {
|
|
|
- name: 'element-plus-logo.svg',
|
|
|
- url: 'https://element-plus.org/images/element-plus-logo.svg',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'element-plus-logo2.svg',
|
|
|
- url: 'https://element-plus.org/images/element-plus-logo.svg',
|
|
|
- },
|
|
|
-])
|
|
|
+const imageUrl = ref('')
|
|
|
+
|
|
|
+const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
|
|
|
+ imageUrl.value = URL.createObjectURL(uploadFile.raw!)
|
|
|
+ console.log('success!')
|
|
|
+}
|
|
|
|
|
|
-const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
|
|
|
- console.log(file, uploadFiles)
|
|
|
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
|
|
+ if (rawFile.type !== 'image/jpeg') {
|
|
|
+ ElMessage.error('Avatar picture must be JPG format!')
|
|
|
+ return false
|
|
|
+ } else if (rawFile.size / 1024 / 1024 > 2) {
|
|
|
+ ElMessage.error('Avatar picture size can not exceed 2MB!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
}
|
|
|
|
|
|
const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
|
|
|
@@ -208,9 +359,269 @@ const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
|
|
|
)
|
|
|
}
|
|
|
|
|
|
-function handleSelect() {
|
|
|
- // console.log()
|
|
|
+// 图片上传相关
|
|
|
+const dialogImageUrl = ref('')
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const disabled = ref(false)
|
|
|
+const fileList = ref([])
|
|
|
+const selectedId = ref(null)
|
|
|
+const hoverId = ref(null)
|
|
|
+const selectedCards = ref([])
|
|
|
+const selectedImageUrl = ref('')
|
|
|
+const centerDialogVisible = ref(false)
|
|
|
+const cards = reactive([])
|
|
|
+
|
|
|
+function handleRemove(file: UploadFile) {
|
|
|
+ fileList.value = []
|
|
|
+}
|
|
|
+
|
|
|
+function handlePictureCardPreview(file: UploadFile) {
|
|
|
+ dialogImageUrl.value = file.url!
|
|
|
+ dialogVisible.value = true
|
|
|
+}
|
|
|
+
|
|
|
+function selectCard(item) {
|
|
|
+ if (isSelected(item.id)) {
|
|
|
+ selectedCards.value = selectedCards.value.filter((card) => card.id !== item.id)
|
|
|
+ } else {
|
|
|
+ selectedCards.value.push(item)
|
|
|
+ }
|
|
|
+ selectedId.value = item.id
|
|
|
+}
|
|
|
+
|
|
|
+function handleConfirmSelection() {
|
|
|
+ if (selectedCards.value.length > 0) {
|
|
|
+ // 清空 fileList
|
|
|
+ fileList.value.length = 0
|
|
|
+
|
|
|
+ // 假设每次只选择一个图片
|
|
|
+ selectedImageUrl.value = selectedCards.value[0].imageUrl
|
|
|
+
|
|
|
+ // 创建一个新的 UploadFile 对象
|
|
|
+ const newFile = {
|
|
|
+ name: selectedCards.value[0].title, // 或者任何你希望用作文件名的字符串
|
|
|
+ url: selectedImageUrl.value,
|
|
|
+ // 根据需要添加更多属性
|
|
|
+ }
|
|
|
+
|
|
|
+ // 将新的文件对象添加到 fileList 中
|
|
|
+ fileList.value.push(newFile)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清空选中卡片
|
|
|
+ selectedCards.value = []
|
|
|
+ // 关闭对话框
|
|
|
+ centerDialogVisible.value = false
|
|
|
+}
|
|
|
+
|
|
|
+function isSelected(id) {
|
|
|
+ return selectedId.value === id
|
|
|
+}
|
|
|
+
|
|
|
+async function getAssetsData() {
|
|
|
+ const query = {
|
|
|
+ profile_id: profile.value.profile_id,
|
|
|
+ assetType: 'IMAGE',
|
|
|
+ assetSubType: 'LOGO',
|
|
|
+ }
|
|
|
+ const response = await getAssets(query)
|
|
|
+ console.log('🚀 ~ getAssetsData ~ response-->>', response)
|
|
|
+
|
|
|
+ cards.splice(0, cards.length)
|
|
|
+
|
|
|
+ response.data.forEach((asset) => {
|
|
|
+ cards.push({
|
|
|
+ id: asset.assetId,
|
|
|
+ title: asset.name,
|
|
|
+ imageUrl: asset.storageLocationUrls.defaultUrl,
|
|
|
+ width: asset.fileMetadata.width,
|
|
|
+ height: asset.fileMetadata.height,
|
|
|
+ size: bytesToKB(asset.fileMetadata.sizeInBytes),
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function bytesToKB(bytes) {
|
|
|
+ return (bytes / 1024).toFixed(2) // 保留两位小数
|
|
|
}
|
|
|
+
|
|
|
+function openDialog() {
|
|
|
+ centerDialogVisible.value = true
|
|
|
+ getAssetsData()
|
|
|
+}
|
|
|
+
|
|
|
+const lifeStyleDialog = ref(false)
|
|
|
+const lifeStyleCards = reactive([])
|
|
|
+async function getLifeStyleAssetsData() {
|
|
|
+ try {
|
|
|
+ const query = {
|
|
|
+ profile_id: profile.value.profile_id,
|
|
|
+ assetType: 'IMAGE',
|
|
|
+ assetSubType: 'LIFESTYLE_IMAGE',
|
|
|
+ }
|
|
|
+ const response = await getLifeStyleAssets(query)
|
|
|
+ console.log('🚀 ~ getLifeStyleAssetsData ~ response-->>', response)
|
|
|
+
|
|
|
+ lifeStyleCards.splice(0, lifeStyleCards.length)
|
|
|
+
|
|
|
+ response.data.forEach((asset) => {
|
|
|
+ lifeStyleCards.push({
|
|
|
+ id: asset.assetId,
|
|
|
+ title: asset.name,
|
|
|
+ imageUrl: asset.storageLocationUrls.defaultUrl,
|
|
|
+ width: asset.fileMetadata.width,
|
|
|
+ height: asset.fileMetadata.height,
|
|
|
+ size: bytesToKB(asset.fileMetadata.sizeInBytes),
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } catch (error) {
|
|
|
+ console.log('error:', error)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function openLifeStyleDialog() {
|
|
|
+ lifeStyleDialog.value = true
|
|
|
+ getLifeStyleAssetsData()
|
|
|
+}
|
|
|
+
|
|
|
+const pageOptionsValue = inject<Ref>('pageOptionsValue')
|
|
|
+const asinList = ref([])
|
|
|
+const commodityLoading = ref(false)
|
|
|
+
|
|
|
+async function getCommodityCollapseData() {
|
|
|
+ commodityLoading.value = true
|
|
|
+ try {
|
|
|
+ const query = {
|
|
|
+ profile_id: profile.value.profile_id,
|
|
|
+ pageurl: pageOptionsValue.value,
|
|
|
+ }
|
|
|
+ const response = await getPageAsins(query)
|
|
|
+ asinList.value = response.data.asinList
|
|
|
+ console.log('asinList', asinList.value)
|
|
|
+ } catch (error) {
|
|
|
+ console.log('error:', error)
|
|
|
+ } finally {
|
|
|
+ commodityLoading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function clickSave() {
|
|
|
+ console.log(123, fileList.value)
|
|
|
+}
|
|
|
+
|
|
|
+let lastQueriedAsins = []
|
|
|
+const commodityCard = ref([])
|
|
|
+async function getCommodityCardData() {
|
|
|
+ try {
|
|
|
+ commodityLoading.value = true
|
|
|
+ const topAsins = asinList.value.slice(0, 3)
|
|
|
+
|
|
|
+ const newAsins = topAsins.filter((asin) => !lastQueriedAsins.includes(asin))
|
|
|
+ if (newAsins.length === 0) {
|
|
|
+ commodityLoading.value = false
|
|
|
+ return // 如果没有新的 ASIN，直接返回
|
|
|
+ }
|
|
|
+
|
|
|
+ lastQueriedAsins = [...topAsins]
|
|
|
+
|
|
|
+ // 清空commodityCard，为新数据做准备
|
|
|
+ commodityCard.value = []
|
|
|
+
|
|
|
+ // 对每个新的 ASIN 发送请求
|
|
|
+ for (const asin of newAsins) {
|
|
|
+ const query = {
|
|
|
+ profile_id: profile.value.profile_id,
|
|
|
+ asin: asin,
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const response = await getCommodityCard(query)
|
|
|
+ commodityCard.value.push(response.data)
|
|
|
+ // console.log('Response for ASIN', asin, ':', response)
|
|
|
+ } catch (error) {
|
|
|
+ console.log('Error for ASIN', asin, ':', error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log('Outer error:', error)
|
|
|
+ } finally {
|
|
|
+ commodityLoading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 更改商品功能
|
|
|
+const commodityDialog = ref(false)
|
|
|
+const selectedCommodity = ref()
|
|
|
+const replaceableCommodity = ref([])
|
|
|
+const dialogLoading3 = ref(false)
|
|
|
+let currentEditingIndex = ref(null)
|
|
|
+
|
|
|
+function openCommodityDialog(index) {
|
|
|
+ currentEditingIndex.value = index
|
|
|
+ commodityDialog.value = true
|
|
|
+}
|
|
|
+
|
|
|
+async function getAdditionalCommodityData() {
|
|
|
+ try {
|
|
|
+ dialogLoading3.value = true
|
|
|
+ // 获取除前三个之外的所有 ASIN
|
|
|
+ const additionalAsins = asinList.value.slice(3)
|
|
|
+
|
|
|
+ // 清空 replaceableCommodity，为新数据做准备
|
|
|
+ replaceableCommodity.value = []
|
|
|
+
|
|
|
+ // 对每个额外的 ASIN 发送请求
|
|
|
+ for (const asin of additionalAsins) {
|
|
|
+ const query = {
|
|
|
+ profile_id: profile.value.profile_id,
|
|
|
+ asin: asin,
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const response = await getCommodityCard(query)
|
|
|
+ replaceableCommodity.value.push(response.data)
|
|
|
+ console.log('🚀 ~ getAdditionalCommodityData ~ replaceableCommodity-->>', replaceableCommodity.value)
|
|
|
+ // console.log('Response for additional ASIN', asin, ':', response)
|
|
|
+ } catch (error) {
|
|
|
+ console.log('Error for additional ASIN', asin, ':', error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log('Outer error:', error)
|
|
|
+ } finally {
|
|
|
+ dialogLoading3.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function handleSelectedCommodity() {
|
|
|
+ if (currentEditingIndex.value !== null && selectedCommodity.value) {
|
|
|
+ const selectedCommodityData = flattenedReplaceableCommodity.value.find((item) => item.asin === selectedCommodity.value)
|
|
|
+ if (selectedCommodityData) {
|
|
|
+ commodityCard.value[currentEditingIndex.value] = selectedCommodityData
|
|
|
+ }
|
|
|
+ commodityDialog.value = false
|
|
|
+ console.log('commodityCard', commodityCard.value)
|
|
|
+ currentEditingIndex.value = null
|
|
|
+ selectedCommodity.value = null
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => pageOptionsValue.value,
|
|
|
+ async () => {
|
|
|
+ await getCommodityCollapseData()
|
|
|
+ getCommodityCardData()
|
|
|
+ getAdditionalCommodityData()
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
+const flattenedCommodityCard = computed(() => {
|
|
|
+ return commodityCard.value.flat()
|
|
|
+})
|
|
|
+
|
|
|
+const flattenedReplaceableCommodity = computed(() => {
|
|
|
+ return replaceableCommodity.value.flat()
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -225,4 +636,131 @@ function handleSelect() {
|
|
|
font-size: 12px;
|
|
|
color: #88909b;
|
|
|
}
|
|
|
+.tip-list-title {
|
|
|
+ line-height: 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1d2129;
|
|
|
+ padding-top: 8px;
|
|
|
+ padding-bottom: 4px;
|
|
|
+}
|
|
|
+.tip-item {
|
|
|
+ line-height: 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #86909c;
|
|
|
+}
|
|
|
+.avatar-uploader .avatar {
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+::v-deep(.avatar-uploader .el-upload) {
|
|
|
+ border: 1px dashed var(--el-border-color);
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: var(--el-transition-duration-fast);
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep(.avatar-uploader .el-upload:hover) {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
+}
|
|
|
+::v-deep(.el-icon.avatar-uploader-icon) {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+::v-deep(.avatar-uploader .el-upload.el-upload--text) {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.grid-container {
|
|
|
+ flex-wrap: wrap;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: left;
|
|
|
+}
|
|
|
+.grid-item {
|
|
|
+ transition: outline, background-color 0.3s;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid #ffffff00;
|
|
|
+ cursor: pointer;
|
|
|
+ width: calc(25% - 10px);
|
|
|
+ margin: 10px 5px;
|
|
|
+}
|
|
|
+.grid-item span {
|
|
|
+ display: block; /* 或者 inline-block */
|
|
|
+ white-space: nowrap; /* 保持文本在一行 */
|
|
|
+ overflow: hidden; /* 隐藏超出部分 */
|
|
|
+ text-overflow: ellipsis; /* 超出部分显示省略号 */
|
|
|
+ max-width: 100%; /* 限制最大宽度 */
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 22px;
|
|
|
+}
|
|
|
+.grid-item.hover,
|
|
|
+.grid-item.selected {
|
|
|
+ border: 1px solid #306cd8;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+.grid-item.selected > :first-child {
|
|
|
+ background-color: #f5f7fe;
|
|
|
+}
|
|
|
+.image {
|
|
|
+ width: 100%;
|
|
|
+ height: 146.49px;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.image > :first-child {
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+.bottom {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+.bottom-item {
|
|
|
+ background-color: #f5f7fe;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 0 3px;
|
|
|
+}
|
|
|
+.uploaded-image {
|
|
|
+ width: 100%; /* 或根据需要调整 */
|
|
|
+ height: auto; /* 保持图片的原始宽高比 */
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 10px; /* 或根据需要调整 */
|
|
|
+}
|
|
|
+
|
|
|
+.upload-content {
|
|
|
+ text-align: center;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+.el-carousel__item h3 {
|
|
|
+ color: #edf5fe;
|
|
|
+ opacity: 0.75;
|
|
|
+ line-height: 200px;
|
|
|
+ margin: 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+::v-deep(button.el-carousel__button) {
|
|
|
+ background-color: #3569d6;
|
|
|
+}
|
|
|
+.img-box {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ border: 1px solid rgb(194, 199, 207);
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+.double-line {
|
|
|
+ color: #1e2128;
|
|
|
+ font-weight: 500;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ word-break: break-word;
|
|
|
+}
|
|
|
</style>
|
