qimall/addons/QiDingDong/backend/views/goods/index.php

<?php
use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('components/com-goods-detail', \Yii::$app->controller->module->viewPath);
?>

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>精选好货</span>
        </div>
        <div class="table-body">
            <el-form size="small" :inline="true" flex="dir:left cross:center">
                <div class="item-box" style="margin-right: 15px">
                    <el-input clearable size="small" style="width: 200px" v-model="search.goods_id" placeholder="请输入商品ID"></el-input>
                </div>
                <div class="item-box" style="margin-right: 15px">
                    <el-input clearable size="small" style="width: 200px" v-model="search.goods_name" placeholder="请输入商品名称"></el-input>
                </div>
                <div class="item-box" style="margin-right: 15px">
                    <el-select v-model="search.cate_id" placeholder="请选择类目" clearable size="small">
                        <el-option v-for="(item, index) in cats" :key="index" :label="item.cate_name" :value="item.third_cate_id"></el-option>
                    </el-select>
                </div>
                <div class="item-box" style="margin-right: 15px">
                    <el-select v-model="search.goods_type" placeholder="商品类型" clearable size="small">
                        <el-option label="礼品" :value="2"></el-option>
                        <el-option label="通货" :value="3"></el-option>
                    </el-select>
                </div>
                <div class="item-box" style="margin-right: 15px">
                    <el-select v-model="search.discount" placeholder="折扣" clearable size="small">
                        <el-option label="1折及以下" :value="1"></el-option>
                        <el-option label="1~2折(含2折)" :value="2"></el-option>
                        <el-option label="2~3折(含3折)" :value="3"></el-option>
                        <el-option label="3~4折(含4折) " :value="4"></el-option>
                        <el-option label="4折以上" :value="5"></el-option>
                    </el-select>
                </div>
                <div class="item-box" flex="dir:left cross:center">
                    <el-button size="small" type="primary" style="padding: 9px 15px !important;" @click="searchs">搜索</el-button>
                </div>
            </el-form>
        </div>

        <div class="table-body">
            <el-row>
                <el-col :xs="1" :sm="1">
                    <el-checkbox v-model="checked" @change="allSelect">全选</el-checkbox>
                </el-col>
                <!--最新上架,本月销量,协议价,指导价,营销价,常规利润率-->
                <el-col :sm="2" class="search-sort" v-for="(item,key) in sort_list">
                    <div @click="searchSort" :data-key="item.key" :data-type="item.sort" :data-index="key">
                        <span class="">{{item.name}}</span>
                        <span class="caret-wrapper">
                            <i class="caret-top " :class="item.sort == 'desc' ? 'top-active' : ''"></i>
                            <i class="caret-bottom" :class="item.sort == 'asc' ? 'bottom-active' : ''"></i>
                        </span>
                    </div>
                </el-col>
                <el-col :sm="8" style="text-align: right">
                    <span style="margin-right: 20px;">已选{{ countIsSelect() }}件</span>
                    <el-button size="mini" :disabled="btnLoading" v-loading="btnLoading" type="primary" @click="batchAdd">批量加入</el-button>
                </el-col>
            </el-row>
            <!--商品信息-->
            <el-row class="goods-list"
                    v-loading="listLoading"
                    v-if="list"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
            >
                <el-col v-for="(goods,index) in list" :sm="4" :span="8" :gutter="4" style="padding: 10px">
                    <div class="goods-wrapper" @click="selectGoods(index)" :class="goods.is_select == true ? 'goods-select' : ''">
                        <el-col class="goods" style="padding: 5px;">
                            <el-col><img :src="goods.default_image" style="height: 200px;width: 100%;" width="100%"></el-col>
                            <el-col class="ellipsis">{{goods.goods_name}}</el-col>
                            <el-col>
                                <el-col class="goods-price agreement_price" :span="8">
                                    <div>
                                        <div class="title">供货价</div>
                                        <div class="number price">{{goods.price|addZero(rate)}}</div>
                                    </div>
                                </el-col>
                                <el-col class="goods-price rate" :span="8">
                                    <div>
                                        <div class="title">建议零售价</div>
                                        <div class="number price">{{goods.retail_price|addZero(rate)}}</div>
                                    </div>
                                </el-col>
                                <el-col class="goods-price rate" :span="8">
                                    <div>
                                        <div class="title">最低售价</div>
                                        <div class="number price">{{goods.lowest_price|addZero(rate)}}</div>
                                    </div>
                                </el-col>
                            </el-col>
                            <el-col class="bottom-price">
                                <el-col class="goods-action">
                                    <el-col :span="12" style="text-align: center">
                                        <div>
                                            <el-button @click="detailUrl(goods)" type="primary" plain size="mini">查看详情</el-button>
                                        </div>
                                    </el-col>
                                    <el-col :span="12" style="text-align: center">
                                        <div>
                                            <el-button type="info" disabled plain size="mini" v-if="goods.is_storage">已加入</el-button>
                                            <el-button v-else type="primary" plain @click="oneAdd(goods)" size="mini">加入选品库</el-button>
                                        </div>
                                    </el-col>
                                </el-col>
                            </el-col>
                        </el-col>
                    </div>
                </el-col>
            </el-row>

            <!-- 无数据 -->
            <el-row class="goods-list" v-loading="listLoading" v-else>
                <el-empty description="暂无商品"></el-empty>
            </el-row>

            <!-- 分页 -->
            <el-row type="flex" class="page" justify="end">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount" v-if="list"></el-pagination>
            </el-row>
        </div>
        <com-goods-detail :goods-id="goodsDetailId"></com-goods-detail>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            page: 1,
            time: [], //本地存时间，请求时不发送
            search: {
                goods_name: '',
                cate_id: '',
                goods_type: '',
                discount: '',
                sort: '',
                sort_type: '',
                goods_id: '',
            },
            loading: false,
            activeName: '-1',
            list: [], //列表数据
            btnLoading: false,
            listLoading: false,
            checked: false,
            sort_list: [
                {
                    name: "最新上架",
                    key: 'time',
                    is_active: false,
                    sort: '',
                },
                {
                    name: "供货价",
                    key: 'price',
                    is_active: false,
                    sort: '',
                },
            ],
            type: '',
            sort: '',
            goodsDetailId: 0,
            pageCount: 0,
            cats: <?= $cats ?>,
            rate: <?= $rate ?>,
        },
        mounted() {
            // 获取列表首页数据
            this.loadData(this.page, this.search); //获取列表数据
        },
        filters: {
            addZero: function(data, rate) {
                return (Math.floor(data * rate * 100) * 0.01).toFixed(2) + '元';
            },
            getRate: function(rate) {
                return Math.round(Number(rate) * 100, 2)
            },
        },
        methods: {
            // 1.0 获取视频列表
            loadData(page, others) {
                this.loading = true;
                request({
                    method: 'get',
                    params: {
                        r: 'qi-ding-dong/goods/index',
                        page: page,
                        limit: 18,
                        ...others, //其他搜索字段
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.list = e.data.data.list;
                        this.pageCount = Math.ceil(e.data.data.count / 18);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {});
            },
            pagination(page) {
                this.page = page;
                this.loadData(this.page, this.search);
            },
            searchs() {
                this.page = 1;
                this.loadData(this.page, this.search);
            },
            detailUrl(goods) {
                this.goodsDetailId = goods.goods_id
            },
            // 选择商品
            selectGoods(index) {
                if (this.list[index].is_storage) {
                    return false;
                }
                if (this.list[index].is_select) {
                    Vue.set(this.list[index], 'is_select', false);
                } else {
                    Vue.set(this.list[index], 'is_select', true);
                }
            },
            // 计算
            countIsSelect () {
                let count = 0
                this.list.forEach(item => {
                    if (item.is_select == true) {
                        count++
                    }
                })
                return count
            },
            // 单个加入
            oneAdd(goods) {
                this.post([goods]);
            },
            // 批量加入
            batchAdd() {
                let num = 0;
                let goods = []
                this.list.forEach(function(item, index) {
                    if (item.is_select) {
                        num++;
                        goods.push(item);
                    }
                })

                if (num <= 0) {
                    this.$message.error('请选择商品');
                    return false;
                }
                this.post(goods);
            },
            post(goods) {
                this.btnLoading = true
                request({
                    method: 'post',
                    params: {
                        r: 'qi-ding-dong/goods/import',
                    },
                    data: {
                        'goods': JSON.stringify(goods)
                    },
                }).then(e => {
                    this.btnLoading = false;
                    if (e.data.code === 0) {
                        this.loadData(this.page, this.search);
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.btnLoading = false;
                });
            },
            // 全选
            allSelect() {
                if (this.checked) {
                    this.list.forEach(function(item, index) {
                        if (!item.storage) {
                            item.is_select = true;
                        }
                    })
                } else {
                    this.list.forEach(function(item, index) {
                        item.is_select = false;
                    })
                }
            },
            searchSort(event) {
                let el = event.currentTarget;

                this.search.sort_type = el.dataset.key;

                let index = el.dataset.index;

                let data = this.sort_list[index];
                if (data.sort == '' || data.sort == 'asc') {
                    this.sort_list[index].sort = 'desc';
                } else {
                    this.sort_list[index].sort = 'asc';
                }
                this.sort_list.forEach(function(item, key) {
                    if (key != index) {
                        item.sort = '';
                    }
                })
                this.search.sort = this.sort_list[index].sort;

                this.searchs()

            },
        },
    });
</script>
<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .input-item {
        display: inline-block;
        width: 150px;
        margin: 0 0 20px;
    }

    .input-item .el-input__inner {
        border-right: 1px solid #dcdfe6;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .select {
        float: left;
        width: 100px;
        margin-right: 10px;
    }


    .el-table th>.cell {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .el-table__footer-wrapper,
    .el-table__header-wrapper {
        border-bottom: 1.4px solid #D6D6D6;
    }

    .search-sort {
        display: inline-block;
        margin: 0px 10px;
        cursor: pointer;
        color: rgb(51, 51, 51);
    }

    .caret-wrapper {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        height: 25px;
        width: 11px;
        vertical-align: middle;
        cursor: pointer;
        overflow: initial;
        position: relative;
    }

    .caret-top {
        border: 5px solid transparent;
        margin: 1px 0;
        border-bottom-color: rgb(51, 51, 51);

    }

    .caret-bottom {
        border: 5px solid transparent;
        margin: 1px 0;
        border-top-color: rgb(51, 51, 51);

    }

    .active {
        border-top-color: rgb(41, 186, 156);
    }

    .ellipsis {
        height: 40px;
        font-size: 14px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .goods-wrapper {
        border: 2px solid #CCCCCC;
        display: inline-block;
        border-radius: 2px;
    }

    .goods-select {
        border: 2px solid #bb730c;
    }

    .goods-price {
        text-align: center;
    }

    .goods-price .number {
        color: red;
        font-weight: 600;
        font-size: 14px;
    }

    .goods-price .title {
        padding: 5px 0;
        color: #999;
    ;
        font-size: 10px;
        font-weight: 600;
    }

    .bottom-price .title {
        padding: 5px 0;
        color: #8b8888;
    ;
        font-size: 10px;
    }

    .bottom-price .number {
        color: #ff5100;
        font-size: 10px;
    }

    .goods-action {
        margin-top: 8px;
    }

    .goods-action .title {
        color: #0634aa;
    }

    .bottom-active {
        border-bottom-color: rgb(186, 41, 92);
    }

    .top-active {
        border-top-color: rgb(186, 41, 92);
    }

    .price {
        white-space: nowrap;
    }

    .goods-list {
        min-height: 100px;
        margin-top: 5px;
    }

    .page {
        padding: 10px 0;
    }
</style>