erp/resources/frontend/src/views/group/group.vue

<template>
    <div>
        <el-card class="box-card" :body-style="{ padding: '20px 20px 0 20px' }">
            <el-form :inline="true" :model="formSearch" class="demo-form-inline">
                <el-form-item label="店铺">
                    <el-select v-model="formSearch.store_id" placeholder="全部">
                        <el-option v-for="store in stores" :key="store.id" :label="store.name" :value="store.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="团购状态">
                    <el-select v-model="formSearch.status" placeholder="团购状态">
                        <el-option label="未开始" value="0"></el-option>
                        <el-option label="跟团中" value="1"></el-option>
                        <el-option label="预览中" value="2"></el-option>
                        <el-option label="已结束" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动标题">
                    <el-input v-model="formSearch.title" placeholder="活动标题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getGroupList();">查询</el-button>
                    <el-button type="success" @click="groupSet(0);">新增团购</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card style="margin-top: 10px" class="box-card">
            <el-table v-loading="loading" :data="tableData" border style="width: 100%">
                <el-table-column prop="shop_name" label="店铺">
                </el-table-column>
                <el-table-column prop="title" label="活动标题">
                </el-table-column>
                <el-table-column prop="status" label="团购状态">
                </el-table-column>
                <el-table-column label="开团时间">
                    <template slot-scope="scope">
                        <div>{{scope.row.start_time}}</div>
                        <div>至</div>
                        <div>{{scope.row.end_time}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="手机查看">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.ercode"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="options" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="groupSet(scope.row.id)" type="text" size="small">查看</el-button>
                        <el-button @click="groupSet(scope.row.id)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>


<script>
import { storeList } from "../../api/shop";
import { groupList } from "../../api/group";
export default {
    data() {
        return {
            formSearch: {
                store_id: "",
                status: "",
                title: "",
            },
            stores: [],
            loading: false,
            tableData: [
                { id: 1, shop_name: "花富贵儿", title: "团购", status: "未开始", start_time: "2022-10-01 00:00:00", end_time: "2022-10-10 00:00:00", ercode: "https://ts1.cn.mm.bing.net/th/id/R-C.8c975bf1ced8f8aac41a73e8691b385c?rik=%2fOWwdmGCNTjfQA&riu=http%3a%2f%2ftupian.qqw21.com%2farticle%2fUploadPic%2f2012-9%2f201291621552596740.jpg&ehk=yDVF7XeRX8kqDF4CTnZ8JRMjF7yk%2f7G4GTzEVSmWlv0%3d&risl=&pid=ImgRaw&r=0" }
            ]
        }
    },
    mounted() {
        this.getStoreList();
        this.getGroupList();
    },
    methods: {
        getStoreList() {
            let page = {
                page: 0,
                per_page: 999,
            };
            storeList(page).then((res) => {
                this.stores = res.data.data;
            });
        },
        getGroupList() {
            console.log(this.formSearch)
            // groupList(this.formSearch).then((res) => {
            //     this.tableData = res.data.data;
            // })
        },
        groupSet(id) {
            this.$router.push({ path: "GROUP_ADD", query: { id: id } });
        }
    }
}
</script>