update

src/pages/merchant/components/AddComment.vue

@@ -0,0 +1,61 @@
+<script setup>
+import XSelect from "../../../components/XSelect/index.vue";
+import {reactive, ref} from "vue";
+import UploadAvatar from "../../../components/upload/UploadAvatar.vue";
+import Api from "../../../api/index.js";
+
+const {id} = defineProps({
+    id: {
+        type: Number,
+        default: null,
+    }
+});
+const form = reactive({
+    type: 0,
+    files: []
+});
+const visible = ref(false);
+const success = async () => {
+
+}
+</script>
+
+<template>
+    <a-button v-if="!$slots.default" type="primary" @click="visible=true">
+        添加评论
+    </a-button>
+    <div @click="visible=true" v-else>
+        <slot></slot>
+    </div>
+
+    <a-modal
+        title-align="start"
+        title="添加评论"
+        v-model:visible="visible"
+        @ok="success">
+        <a-form layout="vertical">
+            <a-form-item label="是否回复之前评论">
+                <a-radio-group v-model:model-value="form.type">
+                    <a-radio :value="0">否</a-radio>
+                    <a-radio :value="1">是</a-radio>
+                </a-radio-group>
+            </a-form-item>
+            <a-form-item label="需要回复的评论" v-if="form.type===1">
+                <x-select api=""></x-select>
+            </a-form-item>
+            <a-form-item label="添加图片">
+                <UploadAvatar
+                    v-model:files="form.files"
+                    :api="Api.system.uploadFile2">
+                </UploadAvatar>
+            </a-form-item>
+            <a-form-item label="添加文字">
+                <a-textarea placeholder="请输入评论内容"></a-textarea>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages/merchant/components/AddMaterial.vue

@@ -0,0 +1,91 @@
+<script setup>
+import {reactive, ref} from "vue";
+import XImage from "../../../components/XImage/Index.vue";
+import UploadButton from "../../../components/upload/UploadButton.vue";
+import Api from "../../../api/index.js";
+import {v4} from "uuid";
+import MaterialSource from "./MaterialSource.vue";
+
+const MaterialSourceRef = ref();
+const visible = ref(false);
+const targetList = reactive([]);
+const {id} = defineProps({
+    id: {
+        type: Number,
+        default: null,
+    }
+});
+
+const uploadSuccess = (url) => {
+    targetList.push({
+        id: v4(),
+        image: url,
+    });
+}
+
+const success = async () => {
+    
+}
+</script>
+
+<template>
+    <!-- 素材库 -->
+    <a-button v-if="!$slots.default" type="primary" @click="visible=true">
+        添加素材
+    </a-button>
+    <div @click="visible=true" v-else>
+        <slot></slot>
+    </div>
+
+    <a-modal
+        @ok="success"
+        title-align="start"
+        :width="820"
+        v-model:visible="visible"
+        title="添加素材">
+        <div class="target">
+            <div class="text-[#1D2129] text-[14px]">已添加5个素材（长摁图片可拖动排序）</div>
+            <div class="grid grid-cols-6 mt-[10px] gap-[16px]">
+                <x-image
+                    @delete="targetList.splice(index,1)"
+                    v-for="(v, index) in targetList"
+                    :key="v.id"
+                    :src="v.image"
+                    :aspect="true"
+                    width="100%"
+                    height="100%">
+                </x-image>
+            </div>
+        </div>
+
+        <div class="mt-[20px]">
+            <div class="text-[#1D2129] text-[14px] mb-[12px]">从本地添加</div>
+            <UploadButton :multiple="true" :api="Api.system.uploadFile2" @success="uploadSuccess">
+                <template #upload-button>
+                    <a-button>
+                        <template #icon>
+                            <icon-upload/>
+                        </template>
+                        本地上传
+                    </a-button>
+                </template>
+            </UploadButton>
+        </div>
+
+        <div class="mt-[20px]">
+            <div class="text-[#1D2129] text-[14px] mb-[12px]">从素材库添加</div>
+            <MaterialSource
+                ref="MaterialSourceRef"
+                v-model:select-list="targetList"
+                :id="id">
+            </MaterialSource>
+        </div>
+    </a-modal>
+</template>
+
+<style scoped lang="scss">
+.target {
+    @apply p-[20px] bg-[#F7F8FA];
+    border: 1px solid #E5E6EB;
+}
+</style>

src/pages/merchant/components/MaterialLibrary.vue

@@ -0,0 +1,92 @@
+<script setup>
+import XImage from "../../../components/XImage/Index.vue";
+import {reactive, ref, watch} from "vue";
+import Api from "../../../api/index.js";
+import UploadButton from "../../../components/upload/UploadButton.vue";
+import {Message} from "@arco-design/web-vue";
+
+const {id} = defineProps({
+    id: {
+        type: Number,
+        default: null,
+    }
+});
+const visible = ref(false);
+const materialList = reactive([]);
+const getMaterialList = async () => {
+    const {data} = await Api.merchant.getMaterialList(id);
+    materialList.length = 0;
+    materialList.push(...data);
+}
+
+watch(
+    () => visible.value,
+    (val) => {
+        if (val) getMaterialList();
+    },
+    {deep: true}
+)
+
+const uploadSuccess = async (url) => {
+    const {msg} = await Api.merchant.addMaterial({
+        id: id,
+        image: url
+    });
+    Message.success(msg);
+    await getMaterialList();
+}
+
+const deleteImage = async (id) => {
+    const {msg} = await Api.merchant.delMaterial(id);
+    Message.success(msg);
+    await getMaterialList();
+}
+</script>
+
+<template>
+    <!-- 素材库 -->
+    <a-button v-if="!$slots.default" type="primary" @click="visible=true">
+        <template #icon>
+            <icon-apps/>
+        </template>
+        素材库
+    </a-button>
+    <div @click="visible=true" v-else>
+        <slot></slot>
+    </div>
+
+    <a-modal
+        title-align="start"
+        :width="820"
+        v-model:visible="visible"
+        title="素材库">
+        <UploadButton :multiple="true" :api="Api.system.uploadFile2" @success="uploadSuccess">
+            <template #upload-button>
+                <a-button>
+                    <template #icon>
+                        <icon-plus/>
+                    </template>
+                    从本地添加到素材
+                </a-button>
+            </template>
+        </UploadButton>
+
+        <div class="box">
+            <x-image
+                @delete="deleteImage(v.id)"
+                height="80px"
+                width="80px"
+                v-for="v in materialList"
+                :key="v.id"
+                :src="v.image">
+            </x-image>
+        </div>
+    </a-modal>
+</template>
+
+<style scoped lang="scss">
+.box {
+    @apply p-[20px] mt-[20px] flex gap-[14px] flex-wrap;
+    border: 1px solid #E5E6EB;
+}
+</style>

src/pages/merchant/components/MaterialSource.vue

@@ -0,0 +1,104 @@
+<script setup>
+import {onMounted, reactive, ref} from "vue";
+import Api from "../../../api/index.js";
+
+const selectList = defineModel('select-list');
+const type = ref(0);
+const list = reactive([]);
+const {id} = defineProps({
+    id: {
+        type: Number,
+        default: null,
+    }
+});
+
+onMounted(() => {
+    Api.merchant.getMaterialList(id).then(({data}) => {
+        list.length = 0;
+        list.push(...data);
+    });
+});
+const select = (v) => {
+    const flag = selectList.value.findIndex(k => k.id === v.id);
+    console.log(flag);
+    if (flag !== -1) { // 删除
+        selectList.value.splice(flag, 1);
+    } else { // 新增
+        selectList.value.push(v);
+    }
+}
+const handle = async () => {
+    if (type === 0) {
+        
+    }
+}
+</script>
+
+<template>
+    <div class="source">
+        <div>
+            <a-radio-group v-model:model-value="type">
+                <a-radio :value="0">添加并从素材库删除</a-radio>
+                <a-radio :value="1">添加并在素材库保留</a-radio>
+            </a-radio-group>
+        </div>
+        <div class="mt-[12px] grid grid-cols-8 gap-[14px]">
+            <div
+                @click="select(v)"
+                :class="['checkbox-image', selectList.find(k => k.id===v.id)?'select':'']"
+                v-for="v in list"
+                :key="v.id">
+                <a-image
+                    :preview="false"
+                    fit="contain"
+                    :src="v.image"
+                    width="100%"
+                    height="100%">
+                </a-image>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.source {
+    @apply p-[20px] bg-[#F7F8FA];
+    border: 1px solid #E5E6EB;
+}
+
+.checkbox-image {
+    cursor: pointer;
+    width: 100%;
+    aspect-ratio: 1/1;
+    border: 1px solid #E5E6EB;
+    overflow: hidden;
+    transition: 300ms;
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        display: block;
+        width: 14px;
+        height: 14px;
+        background-color: rgb(var(--arcoblue-6));
+        border-top-left-radius: 2px;
+        background-image: url("../../../assets/images/Combined.png");
+        background-size: 9px 9px;
+        background-repeat: no-repeat;
+        background-position: 3px 3px;
+        transition: 300ms;
+        opacity: 0;
+    }
+}
+
+.select {
+    border: 1px solid rgb(var(--arcoblue-6));
+
+    &::after {
+        opacity: 1;
+    }
+}
+</style>