平台端兑换专区

src/api/threeSelection.js

@@ -0,0 +1,93 @@
+import request from '@/utils/request'
+
+
+//  获取选品分组列表
+export function requertGroupList(params) {
+  return request({
+    url: '/banziSelect/getApiLists',
+    method: 'GET',
+    params
+  })
+}
+
+// 获取逐级类目
+export function requertCategoryList(params) {
+  return request({
+    url: '/banziSelect/getCategory',
+    method: 'GET',
+    params
+  })
+}
+
+
+//  获取类目里面所有的商品
+export function requertGoodsList(data) {
+  return request({
+    url: '/banziSelect/getNewList',
+    method: 'POST',
+    data
+  })
+}
+
+//  获取商品详情
+export function requertGoodsDetail(params) {
+  return request({
+    url: '/banziSelect/getApiGoodDetail',
+    method: 'GET',
+    params
+  })
+}
+
+//  将商品加入商品分组
+export function requertAddGoods(params) {
+  return request({
+    url: '/banziSelect/getApiGoodsAdd',
+    method: 'GET',
+    params
+  })
+}
+
+//  获取选品库里面的商品
+export function requertSelection(params) {
+  return request({
+    url: '/banziSelect/getApiMyLists',
+    method: 'GET',
+    params
+  })
+}
+// 商品分类
+export function getClassify(data) {
+  return request({
+    url: '/classify/getAll',
+    method: 'post',
+    data
+  })
+}
+
+
+// 编辑商品类别
+export function commdityClassgetById(data) {
+  return request({
+    url: '/classify/getById',
+    method: 'post',
+    data
+  })
+}
+
+//  获取 186 商户自己的分组
+export function requertShopGroup(data) {
+  return request({
+    url: '/shopGroup/getAll',
+    method: 'POST',
+    data
+  })
+}
+
+//  移除选品库里面的商品
+export function requertRemove(params) {
+  return request({
+    url: '/banziSelect/getApiRemove',
+    method: 'GET',
+    params
+  })
+}

src/views/threeSelection/fattySelection/components/tableCom.vue

@@ -0,0 +1,390 @@
+<template>
+    <div class="tableCom">
+        <div class="tableContainer">
+            <el-table :data="tableData" border style="width: 100%" v-loading="loading">
+                <el-table-column prop="title" label="商品名称" align="center"></el-table-column>
+                <el-table-column label="商品图片" align="center">
+                    <template slot-scope="scope">
+                        <img :src="scope.row.cover" alt="" style="width: 100px;height: 100px;">
+                    </template>
+                </el-table-column>
+                <el-table-column prop="third_brand_name" label="品牌" align="center"></el-table-column>
+                <el-table-column prop="third_category_name" label="品牌类目" align="center"></el-table-column>
+                <el-table-column label="协议价" align="center">
+                    <template slot-scope="scope">
+                        <span>￥{{ (scope.row.agreement_price / 1000).toFixed(2) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="利润率" align="center">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.promotion_rate }}%</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="指导价" align="center">
+                    <template slot-scope="scope">
+                        <span>￥{{ (scope.row.guide_price / 1000).toFixed(2) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="最小利润" align="center">
+                    <template slot-scope="scope">
+                        <span>{{ (scope.row.guide_price / 1000).toFixed(2) }}%</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="discount" label="折扣" align="center"></el-table-column>
+                <el-table-column label="毛利率" align="center">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.gross_profit_rate }}%</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="200" align="center">
+                    <template slot-scope="scope">
+                        <el-button type="text" @click="Godetails(scope.row)">查看详情</el-button>
+                        <el-button type="text" @click="addLibrary(scope.row)">加入选品库</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="fenye">
+                <el-pagination :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="10"
+                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange" />
+            </div>
+        </div>
+        <div class="tableDialog">
+            <el-dialog title="详情" width="74%" :visible.sync="visible" :before-close="handleClose">
+                <el-card class="box-card">
+                    <label>商品详情</label>
+                    <div class="GoodBox">
+                        <el-row class="detail-box">
+                            <el-col :span="24">
+                                <div>商品名称：{{ productItem.title }}</div>
+                                <div>商品类别：{{ productItem.third_category_name }}</div>
+                                <div>
+                                    商品图片：
+                                    <div>
+                                        <el-image v-for="item2 in productItem.covers"
+                                            style="width: 100px; height: 100px" :src="item2"
+                                            :preview-src-list="productItem.covers">
+                                        </el-image>
+                                    </div>
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </el-card>
+                <el-card class="box-card cardOne">
+                    <label>商品简介</label>
+                    <br>
+                    <br>
+                    <div v-html="productItem.description" />
+                </el-card>
+            </el-dialog>
+        </div>
+        <div class="addDoalog">
+            <el-dialog title="加入选品库" width="64%" :visible.sync="addVisible" @closed="addClose">
+                <div class="platformClass">
+                    <div class="businessGroup">
+                        <h2>官方分类</h2>
+                        <el-cascader v-model="form.classifyId" placeholder="请选择官方分类" clearable :props="props"
+                            @change="handleChangeCascader" />
+                    </div>
+                    <div class="businessGroup">
+                        <h2>商品分组</h2>
+                        <el-cascader v-model="form.groupId" placeholder="请选择商品的分组" :options="businessGroup" clearable :props="{
+                checkStrictly: false,
+                label: 'groupName',
+                value: 'shopGroupId',
+                children: 'childs',
+                checkStrictly: true,
+                emitPath: false
+            }" @change="handleChangeCascader" />
+                    </div>
+                </div>
+                <div class="btn">
+                    <el-button type="info" plain @click="cancelAdd">取消</el-button>
+                    <el-button type="primary" @click="addProduct">加入选品库</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+let arrList = [];
+import { requertGoodsList, requertGoodsDetail, requertAddGoods, commdityClassgetById, getClassify } from '@/api/threeSelection'
+export default {
+    props: {
+        val: {
+            type: Object,
+        },
+        queryData: {
+            type: Object
+        },
+        businessGroup: {
+            type: Array
+        },
+        classifyList: {
+            type: Array
+        }
+    },
+    created() {
+        this.getList()
+    },
+    data() {
+        return {
+            //  控制加载
+            loading: false,
+            listQuery: {
+                page: 1,
+                limit: 10,
+                search_words: '',
+                source: 0,
+                category_id: "",
+                brand_ids: "",
+                sort: "asc",
+                type: "",
+                is_free_shipping: "",
+                shop_words: "",
+                group_id: "",
+                recommend: "",
+                goods_type: ""
+            },
+            tableData: [],
+            total: null,
+            //  控制弹框显示
+            visible: false,
+            productItem: {},
+            url: '',
+            //  控制加入选品弹框
+            addVisible: false,
+            //  加入选品库的参数
+            form: {
+                classifyId: "",
+                goods_ids: "",
+                shopId: "",
+                groupId: ""
+            },
+            //  异步加载
+            props: {
+                lazy: true,
+                checkStrictly: true,
+                label: 'classifyName',
+                value: 'classifyId',
+                lazyLoad(node, resolve) {
+                    const { level, value } = node;
+                    if (level === 0) {
+                        getClassify({ page: 1, pageSize: 15 }).then(res => {
+                            resolve(res.data.list)
+                        })
+                    } else if (level === 1) {
+                        commdityClassgetById({ oneClassifyId: value }).then(res => {
+                            // 将里面所有的childs.categoryName 换为classifyName
+                            let arr = res.data.childs.map(item => {
+                                item.classifyName = item.categoryName
+                                item.classifyId = item.id
+                                return item
+                            })
+                            arrList = arr
+                            resolve(arr)
+                        })
+                    } else {
+                        //  过滤出对应id
+                        let arrItem = arrList.filter(item => {
+                            return item.classifyId == value
+                        })
+                        if (arrItem.length <= 0) return
+                        let arr = arrItem[0].childs.map(item => {
+                            item.classifyName = item.categoryName
+                            item.classifyId = item.id
+                            return item
+                        })
+                        resolve(arr)
+                    }
+                }
+            }
+        }
+    },
+    methods: {
+        handleChangeCascader() {
+            console.log(this.form.classifyId)
+        },
+        //  加入选品库
+        addLibrary(row) {
+            this.addVisible = true
+            this.form.goods_ids = row.id
+        },
+        async getList() {
+            this.loading = true
+            try {
+                this.listQuery.category_id = this.val.id
+                let res = await requertGoodsList(this.listQuery);
+                this.tableData = res.data.list
+                this.total = res.data.total
+            } catch (error) {
+
+            } finally {
+                this.loading = false
+            }
+
+        },
+        handleSizeChange(val) {
+            this.listQuery.limit = val
+            this.getList()
+        },
+        handleCurrentChange(val) {
+            this.listQuery.page = val
+            this.getList()
+        },
+        // 查看详情
+        async Godetails(row) {
+            this.visible = true
+            let res = await requertGoodsDetail({ id: row.id })
+            this.productItem = res.data
+            this.url = res.data.covers[0]
+        },
+        // 关闭弹框
+        handleClose() {
+            this.visible = false
+        },
+        //  取消加入选品
+        cancelAdd() {
+            this.addVisible = false
+        },
+        //  关闭弹框
+        addClose() {
+            this.form = {
+                classifyId: "",
+                goods_ids: "",
+                shopId: "",
+                groupId: ""
+            }
+        },
+        //  加入选品
+        async addProduct() {
+            console.log(this.form)
+            let obj = {...this.form}
+            obj.classifyId =  this.form.classifyId[this.form.classifyId.length - 1]
+            if(!obj.classifyId){
+                this.$message({
+                    message: '请选择平台分类',
+                    type: 'warning'
+                })
+                return
+            }
+            if(obj.groupId == ""){
+                this.$message({
+                    message: '请选择商家分组',
+                    type: 'warning'
+                })
+                return
+            }
+            let res = await requertAddGoods(obj)
+            if(res.code == ""){
+                this.$message({
+                    message: '添加成功',
+                    type: 'success'
+                })
+            }
+            this.addVisible = false
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.tableCom {
+    .fenye {
+        margin: 30px auto;
+    }
+}
+
+::v-deep .el-dialog__wrapper {
+    padding: 40px;
+    box-sizing: border-box;
+}
+
+.platformClass{
+
+    .businessGroup{
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        margin: 20px 0; 
+    }
+}
+.btn{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top:40px ;
+    }
+
+.box-card {
+    margin: 20px;
+}
+
+.cardOne {
+    height: 400px;
+    overflow-y: scroll;
+}
+
+.btnList {
+    float: right;
+    padding: 3px 0;
+    width: 100px;
+    height: 48px;
+    border-radius: 4px;
+    margin-right: 30px;
+}
+
+.addTitle {
+    font-size: 24px;
+    color: #333333;
+    line-height: 50px;
+}
+
+.GoodBox {
+    padding: 40px;
+
+    .detail-box {
+        div {
+            line-height: 60px;
+
+            .proImage {
+                margin-right: 20px;
+                width: 80px;
+                height: 80px;
+            }
+        }
+    }
+}
+
+.tinymce-wrap {
+    margin-top: 10px;
+}
+
+.check-image-dialog {
+    margin-top: -100px;
+    text-align: center;
+
+    .img {
+        text-align: center;
+    }
+}
+
+::v-deep .el-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.tableDialog {
+    ::v-deep .el-dialog {
+        margin-top: 0 !important;
+    }
+}
+
+
+::v-deep .el-image {
+    margin-left: 20px;
+}
+</style>

src/views/threeSelection/fattySelection/components/tableComents.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="tableCom">
+        <div class="tableContainer">
+            <el-table :data="tableData" border style="width: 100%" v-loading="loading">
+                <el-table-column prop="title" label="商品名称" align="center"></el-table-column>
+                <el-table-column label="商品图片" align="center">
+                    <template slot-scope="scope">
+                        <img :src="scope.row.cover" alt="" style="width: 100px;height: 100px;">
+                    </template>
+                </el-table-column>
+                <el-table-column prop="third_brand_name" label="品牌" align="center"></el-table-column>
+                <el-table-column prop="third_category_name" label="品牌类目" align="center"></el-table-column>
+                <el-table-column label="协议价" align="center">
+                    <template slot-scope="scope">
+                        <span>￥{{ (scope.row.agreement_price / 1000).toFixed(2) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="利润率" align="center">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.promotion_rate }}%</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="指导价" align="center">
+                    <template slot-scope="scope">
+                        <span>￥{{ (scope.row.guide_price / 1000).toFixed(2) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="最小利润" align="center">
+                    <template slot-scope="scope">
+                        <span>{{ (scope.row.guide_price / 1000).toFixed(2) }}%</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="discount" label="折扣" align="center"></el-table-column>
+                <el-table-column label="毛利率" align="center">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.gross_profit_rate }}%</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="200" align="center">
+                    <template slot-scope="scope">
+                        <el-button type="text" @click="Godetails(scope.row)">查看详情</el-button>
+                        <el-button type="text" @click="addLibrary(scope.row)">加入选品库</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="fenye">
+                <el-pagination :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="10"
+                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { requertGoodsList } from '@/api/threeSelection'
+export default {
+    methods: {
+        async getList() {
+            this.loading = true
+            try {
+                this.listQuery.category_id = this.val.id
+                let res = await requertGoodsList(this.listQuery);
+                this.tableData = res.data.list
+                this.total = res.data.total
+            } catch (error) {
+
+            } finally {
+                this.loading = false
+            }
+
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/threeSelection/fattySelection/index.vue

@@ -0,0 +1,159 @@
+<template>
+    <div class="fattySelection">
+        <div class="search-cate">
+            <div class="sarch-box">
+                <span>商品类目：</span>
+                <el-input v-model="searchCategory" placeholder="请输入你要搜索的类目"></el-input>
+            </div>
+            <el-button type="primary" @click="sarchClick">搜索</el-button>
+            <el-button type="primary" @click="reastClick">重置</el-button>
+        </div>
+
+        <template v-if="screenCategory.length <= 0">
+            <el-tabs v-model="activeName">
+                <el-tab-pane v-for="item in categoryList" :label="item.title" :name="item.title" :key="item.id">
+                    <template v-if="activeName == item.title">
+                        <tableCom :val="item" :queryData="queryData" :businessGroup="businessGroup" :classifyList="classifyList"></tableCom>
+                    </template>
+                </el-tab-pane>
+            </el-tabs>
+        </template>
+        <template v-else>
+            <el-tabs v-model="screenName">
+                <el-tab-pane v-for="item in screenCategory" :label="item.title" :name="item.title" :key="item.id">
+                    <tableCom :val="item" :groupList="groupList" :queryData="queryData"
+                        @handleCurrentChangeAdd="handleChange" :addLoading="addLoading"></tableCom>
+                </el-tab-pane>
+            </el-tabs>
+        </template>
+    </div>
+</template>
+
+<script>
+import { requertGroupList, requertCategoryList, getClassify, requertShopGroup } from '@/api/threeSelection'
+import tableCom from './components/tableCom.vue'
+export default {
+    created() {
+        this.getCategoryList()
+        this.getClassifyList()
+        this.getShopGroup()
+    },
+    components: {
+        tableCom
+    },
+    data() {
+        return {
+            //  获取我们平台自己的分组
+            queryData: {
+                page: 1,
+                limit: 20
+            },
+            activeName: null,
+            //  获取逐级类目的参数
+            queryCategory: {
+                parent_id: 0,
+                source: 0
+            },
+            categoryList: [],
+            screenCategory: [],
+            screenName: '',
+            //  搜索的类目
+            searchCategory: '',
+            //  自己的分组
+            groupList: {},
+            //  平台分类
+            classifyList: [],
+            //  186商家分组
+            businessGroup: [],
+            addLoading: false
+        }
+    },
+    methods: {
+        //  请求平台分类
+        async getClassifyList() {
+            let res = await getClassify({ page: 1, pageSize: 15 })
+            this.classifyList =  res.data.list
+        },
+        //  获取 186 自己的分组
+        async getShopGroup() {
+            let res = await requertShopGroup({ page: 1, pageSize: 10 })
+            this.businessGroup = res.data.list
+        },
+        //  获取平台分组
+        // async getGroupList() {
+        //     this.addLoading = true
+        //     try {
+        //         let res = await requertGroupList(this.queryData);
+        //         this.groupList = res.data
+        //     } catch (error) {
+
+        //     } finally {
+        //         this.addLoading = false
+        //     }
+        // },
+        //  获取胖子的逐级分类
+        async getCategoryList() {
+            let res = await requertCategoryList(this.queryCategory)
+            this.categoryList = res.data
+            this.activeName = res.data[0].title
+        },
+        //  筛选类目
+        sarchClick() {
+            if (this.searchCategory == '') {
+                this.$message({
+                    type: 'warning',
+                    message: '请输入你要搜索的类目'
+                });
+                return
+            }
+            //  搜索点击
+            this.screenCategory = this.categoryList.reduce((prev, item, index) => {
+                if (item.title.includes(this.searchCategory)) {
+                    prev.push(item)
+                }
+                return prev
+            }, [])
+            if (this.screenCategory.length > 0) {
+                this.screenName = this.screenCategory[0].title
+            } else {
+                this.$message({
+                    type: 'warning',
+                    message: '没有你要搜索的类目'
+                });
+            }
+
+        },
+        //  重置按钮
+        reastClick() {
+            this.searchCategory = ''
+            this.screenCategory = []
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.fattySelection {
+    padding: 50px;
+    box-sizing: border-box;
+
+    .search-cate {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+        margin: 20px 0;
+
+        .sarch-box {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+
+            span {
+                width: 120px;
+                white-space: nowrap;
+                font-size: 18px;
+            }
+        }
+    }
+}
+</style>

src/views/threeSelection/selectionLibrary/components/tableCom.vue

@@ -0,0 +1,309 @@
+<template>
+    <div class="tableCom">
+        <div class="tableContainer">
+            <el-table :data="tableData" border style="width: 100%" v-loading="loading">
+                <el-table-column prop="title" label="商品名称" align="center"></el-table-column>
+                <el-table-column label="商品图片" align="center">
+                    <template slot-scope="scope">
+                        <img :src="scope.row.cover" alt="" style="width: 100px;height: 100px;">
+                    </template>
+                </el-table-column>
+                <el-table-column prop="third_brand_name" label="品牌" align="center"></el-table-column>
+                <el-table-column prop="third_category_name" label="品牌类目" align="center"></el-table-column>
+                <el-table-column label="协议价" align="center">
+                    <template slot-scope="scope">
+                        <span>￥{{ (scope.row.agreement_price / 1000).toFixed(2) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="利润率" align="center">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.promotion_rate }}%</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="指导价" align="center">
+                    <template slot-scope="scope">
+                        <span>￥{{ (scope.row.guide_price / 1000).toFixed(2) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="最小利润" align="center">
+                    <template slot-scope="scope">
+                        <span>{{ (scope.row.guide_price / 1000).toFixed(2) }}%</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="discount" label="折扣" align="center"></el-table-column>
+                <el-table-column label="毛利率" align="center">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.gross_profit_rate }}%</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="200" align="center">
+                    <template slot-scope="scope">
+                        <el-button type="text" @click="Godetails(scope.row)">查看详情</el-button>
+                        <el-button type="text" @click="addLibrary(scope.row)">加入选品库</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="fenye">
+                <el-pagination :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="10"
+                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange" />
+            </div>
+        </div>
+        <div class="tableDialog">
+            <el-dialog title="详情" width="74%" :visible.sync="visible" :before-close="handleClose">
+                <el-card class="box-card">
+                    <label>商品详情</label>
+                    <div class="GoodBox">
+                        <el-row class="detail-box">
+                            <el-col :span="24">
+                                <div>商品名称：{{ productItem.title }}</div>
+                                <div>商品类别：{{ productItem.third_category_name }}</div>
+                                <div>
+                                    商品图片：
+                                    <div>
+                                        <el-image v-for="item2 in productItem.covers"
+                                            style="width: 100px; height: 100px" :src="item2"
+                                            :preview-src-list="productItem.covers">
+                                        </el-image>
+                                    </div>
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </el-card>
+                <el-card class="box-card cardOne">
+                    <label>商品简介</label>
+                    <br>
+                    <br>
+                    <div v-html="productItem.description" />
+                </el-card>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { requertSelection } from '@/api/threeSelection'
+export default {
+    props: {
+        val: {
+            type: Object,
+        },
+        queryData: {
+            type: Object
+        },
+        groupList: {
+            type: Object,
+        },
+        addLoading: {
+            type: Boolean,
+        }
+    },
+    created() {
+        this.getList()
+    },
+    data() {
+        return {
+            //  控制加载
+            loading: false,
+            listQuery: {
+                page: 1,
+                limit: 10,
+            },
+            tableData: [],
+            total: null,
+            //  控制弹框显示
+            visible: false,
+            productItem: {},
+            url: '',
+            // 控制加入选品库
+            addVisible: false,
+            //  选品库id列表
+            groupIdList: [],
+            //  要加入选品库的商品id
+            addProductId: '',
+        }
+    },
+    methods: {
+        async getList() {
+            this.loading = true
+            try {
+                this.listQuery.category_id = this.val.id
+                let res = await requertGoodsList(this.listQuery);
+                this.tableData = res.data.list
+                this.total = res.data.total
+            } catch (error) {
+
+            } finally {
+                this.loading = false
+            }
+
+        },
+        handleSizeChange(val) {
+            this.listQuery.limit = val
+            this.getList()
+        },
+        handleCurrentChange(val) {
+            this.listQuery.page = val
+            this.getList()
+        },
+        // 查看详情
+        async Godetails(row) {
+            this.visible = true
+            let res = await requertGoodsDetail({ id: row.id })
+            this.productItem = res.data
+            this.url = res.data.covers[0]
+        },
+        // 关闭弹框
+        handleClose() {
+            this.visible = false
+        },
+        //  取消加入选品
+        cancelAdd() {
+            this.addVisible = false
+        },
+        //  关闭弹框
+        addClose() {
+            this.groupIdList = []
+            this.$emit('resetPage')
+        },
+        //  加入选品
+        async addProduct() {
+            if (this.groupIdList.length <= 0) {
+                this.$message({
+                    type: 'warning',
+                    message: '请选择你要添加的选品类目'
+                });
+                return
+            }
+            let res = await requertAddGoods({
+                // group_ids: this.groupIdList.join(','),
+                goods_ids: this.addProductId
+            })
+            console.log(res);
+            // this.$emit('addProduct',this.groupIdList.join(','),this.addProductId)
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.tableCom {
+    .fenye {
+        margin: 30px auto;
+    }
+}
+
+::v-deep .el-dialog__wrapper {
+    padding: 40px;
+    box-sizing: border-box;
+}
+
+.box-card {
+    margin: 20px;
+}
+
+.cardOne {
+    height: 400px;
+    overflow-y: scroll;
+}
+
+.btnList {
+    float: right;
+    padding: 3px 0;
+    width: 100px;
+    height: 48px;
+    border-radius: 4px;
+    margin-right: 30px;
+}
+
+.addTitle {
+    font-size: 24px;
+    color: #333333;
+    line-height: 50px;
+}
+
+.GoodBox {
+    padding: 40px;
+
+    .detail-box {
+        div {
+            line-height: 60px;
+
+            .proImage {
+                margin-right: 20px;
+                width: 80px;
+                height: 80px;
+            }
+        }
+    }
+}
+
+.tinymce-wrap {
+    margin-top: 10px;
+}
+
+.check-image-dialog {
+    margin-top: -100px;
+    text-align: center;
+
+    .img {
+        text-align: center;
+    }
+}
+
+::v-deep .el-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.tableDialog {
+    ::v-deep .el-dialog {
+        margin-top: 0 !important;
+    }
+}
+
+
+::v-deep .el-image {
+    margin-left: 20px;
+}
+
+.addDoalog {
+    .selectAdd {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 20px;
+        height: 320px;
+
+        .select-box {
+            width: 18%;
+            height: 50px;
+            line-height: 50px;
+            text-align: center;
+            border: 1px solid #dcdfe6;
+            cursor: pointer;
+            border-radius: 5px;
+        }
+
+        .act {
+            color: #FFFFFF;
+            background-color: #fb6a42;
+        }
+
+        &::after {
+            content: '';
+            flex: auto;
+        }
+    }
+
+    .btn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 20px;
+    }
+}
+</style>

src/views/threeSelection/selectionLibrary/index.vue

@@ -0,0 +1,211 @@
+<template>
+    <div class="selectionLibrary">
+        <div class="tableContainer">
+            <el-table :data="tableData" border style="width: 100%" v-loading="loading">
+                <el-table-column prop="title" label="商品名称" align="center"></el-table-column>
+                <el-table-column label="商品图片" align="center">
+                    <template slot-scope="scope">
+                        <img :src="scope.row.cover" alt="" style="width: 100px;height: 100px;">
+                    </template>
+                </el-table-column>
+                <el-table-column prop="third_brand_name" label="品牌" align="center"></el-table-column>
+                <el-table-column prop="third_category_name" label="品牌类目" align="center"></el-table-column>
+                <el-table-column label="协议价" align="center">
+                    <template slot-scope="scope">
+                        <span>￥{{ (scope.row.agreement_price / 1000).toFixed(2) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="利润率" align="center">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.promotion_rate }}%</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="指导价" align="center">
+                    <template slot-scope="scope">
+                        <span>￥{{ (scope.row.guide_price / 1000).toFixed(2) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="最小利润" align="center">
+                    <template slot-scope="scope">
+                        <span>{{ (scope.row.guide_price / 1000).toFixed(2) }}%</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="discount" label="折扣" align="center"></el-table-column>
+                <el-table-column label="毛利率" align="center">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.gross_profit_rate }}%</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="200" align="center">
+                    <template slot-scope="scope">
+                        <el-button type="text" @click="Godetails(scope.row)">查看详情</el-button>
+                        <el-button type="text" @click="removeLibrary(scope.row)">移出选品库</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="fenye">
+                <el-pagination :current-page="queryData.page" :page-sizes="[10, 20, 30, 50]" :page-size="10"
+                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange" />
+            </div>
+        </div>
+        <div class="tableDialog">
+            <el-dialog title="详情" width="74%" :visible.sync="visible" :before-close="handleClose">
+                <el-card class="box-card">
+                    <label>商品详情</label>
+                    <div class="GoodBox">
+                        <el-row class="detail-box">
+                            <el-col :span="24">
+                                <div>商品名称：{{ productItem.title }}</div>
+                                <div>商品类别：{{ productItem.third_category_name }}</div>
+                                <div>
+                                    商品图片：
+                                    <div>
+                                        <el-image v-for="item2 in productItem.covers"
+                                            style="width: 100px; height: 100px" :src="item2"
+                                            :preview-src-list="productItem.covers">
+                                        </el-image>
+                                    </div>
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </el-card>
+                <el-card class="box-card cardOne">
+                    <label>商品简介</label>
+                    <br>
+                    <br>
+                    <div v-html="productItem.description" />
+                </el-card>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { requertSelection, requertGoodsDetail, requertRemove } from '@/api/threeSelection'
+export default {
+    created() {
+        this.getList()
+    },
+    data() {
+        return {
+            queryData: {
+                page: 1,
+                limit: 10,
+            },
+            loading: false,
+            // 列表数据,
+            tableData: [],
+            total: null,
+            //  控制弹框显示
+            visible: false,
+            productItem: {},
+            url: '',
+        }
+    },
+    methods: {
+        async getList() {
+            this.loading = true
+            try {
+                let res = await requertSelection(this.queryData);
+                this.tableData = res.data.list
+                this.total = res.data.total
+            } catch (error) {
+
+            } finally {
+                this.loading = false
+            }
+
+        },
+        handleSizeChange(val) {
+
+            this.queryData.limit = val
+            this.getList()
+        },
+        handleCurrentChange(val) {
+            this.queryData.page = val
+            this.getList()
+        },
+        // 查看详情
+        async Godetails(row) {
+            this.visible = true
+            let res = await requertGoodsDetail({ id: row.id })
+            this.productItem = res.data
+            this.url = res.data.covers[0]
+        },
+        removeLibrary(row) {
+            this.$confirm('此操作将永久删除该选品, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(async () => {
+                let res = await requertRemove({ goods_ids: row.id })
+                if (res.code == '') {
+                    this.$message({
+                        type: 'success',
+                        message: '删除成功!'
+                    });
+                    this.getList()
+                }
+
+            })
+        },
+        // 关闭弹框
+        handleClose() {
+            this.visible = false
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.selectionLibrary {
+    padding: 50px;
+    box-sizing: border-box;
+
+    .fenye {
+        margin: 30px auto;
+    }
+}
+
+.tableDialog {
+    ::v-deep .el-dialog {
+        margin-top: 0 !important;
+    }
+
+    padding: 40px;
+
+    .detail-box {
+        div {
+            line-height: 60px;
+
+            .proImage {
+                margin-right: 20px;
+                width: 80px;
+                height: 80px;
+            }
+        }
+    }
+
+    .box-card {
+        margin: 20px;
+    }
+
+    .cardOne {
+        height: 400px;
+        overflow-y: scroll;
+    }
+}
+
+
+::v-deep .el-image {
+    margin-left: 20px;
+}
+
+::v-deep .el-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>