ADD: 轮播图组件

src/api/goods.js

@@ -31,6 +31,16 @@ export function deleteGoods(ids){
     return axios.post(`/admin/goods/delete_all`, {
         ids
     })
+}
+
+
+export function readGoods(id){
+    return axios.get(`/admin/goods/read/${id}`)
+}
+
+
+export function setGoodsBanner(id, data){
+    return axios.post(`/admin/goods/banners/${id}`, data)
 
 }
 

src/pages/goods/banners.vue

+<template>
+    <el-drawer title="设置轮播图" v-model="dialogVisible"  size="50%"
+        destroy-on-close>
+
+    <el-form :model="form" label-width="80px">
+        <el-form-item label="轮播图">
+            <ChooseImage v-model="form.banners" />
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary" @click="submit">提交</el-button>
+        </el-form-item>
+    </el-form>
+    
+    </el-drawer>
+</template>
+
+
+<script setup>
+import { ref, reactive } from 'vue'
+import ChooseImage from "@/components/ChooseImage.vue"
+import {
+    readGoods,
+    setGoodsBanner
+} from "@/api/goods"
+
+const dialogVisible = ref(false)
+const form = reactive({
+    banners:[]
+})
+
+const goodsId = ref(0)
+const open = (row)=>{
+    goodsId.value = row.id
+    readGoods(goodsId.value)
+    .then(res=>{
+        form.banners = res.goodsBanner.map(o=>o.url)
+        dialogVisible.value = true
+    })
+}
+
+
+const submit = ()=>{
+
+}
+
+
+defineExpose({
+    open
+
+})
+</script>
\ No newline at end of file

src/pages/goods/list.vue

@@ -76,7 +76,8 @@
                         <div v-if="searchForm.tab != 'delete'">
                             <el-button class="px-1" type="primary" size="small" text @click="handleEdit(scope.row)">修改</el-button>
                             <el-button class="px-1" type="primary" size="small" text>商品规格</el-button>
-                            <el-button class="px-1" type="primary" size="small" text>设置轮播图</el-button>
+                            <el-button class="px-1" type="primary" size="small" text 
+                            @click="handleSetGoodsBanners(scope.row)">设置轮播图</el-button>
                             <el-button class="px-1" type="primary" size="small" text>商品详情</el-button>
                             <el-popconfirm title="是否删除该商品?" confirm-button-text="确认" cancel-button-text="取消"
                                 @confirm="handleDelete(scope.row.id)">
@@ -149,10 +150,9 @@
                         </el-radio-group>
                     </el-form-item>
                 </el-form>
-
             </FormDrawer>
-
         </el-card>
+        <banners ref="bannerRef"/>
     </div>
 </template>
 
@@ -180,6 +180,8 @@ import ListHeader from "@/components/ListHeader.vue"
 import ChooseImage from "@/components/ChooseImage.vue"
 import Search from "@/components/Search.vue"
 import SearchItem from "@/components/SearchItem.vue"
+import banners from "./banners.vue"
+
 import { useInitTable, useInitForm } from "@/composables/useCommon.js"
 
 
@@ -278,6 +280,13 @@ const tabbars = [{
 const category_list = ref([])
 getCategoryList().then(res => category_list.value = res)
 
+// 设置轮播图相关
+const bannerRef = ref(null)
+const handleSetGoodsBanners = (row)=>{
+    bannerRef.value.open(row)
+
+}
+
 
 
 </script>
\ No newline at end of file