From c0c3eeeb44433d5d1cc7fd7b349dae1402ff02e3 Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Wed, 30 Oct 2024 13:38:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BC=9A=E5=91=98=E7=A7=AF?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/member_points/record.vue       | 167 +++++++++++++++
 .../components/member_points/setting.vue      | 197 ++++++++++++++++++
 .../components/member_points/shop_add.vue     |  83 ++++++++
 .../components/member_points/shop_list.vue    |  42 ++++
 src/views/application/member_points.vue       |  37 +++-
 5 files changed, 524 insertions(+), 2 deletions(-)
 create mode 100644 src/views/application/components/member_points/record.vue
 create mode 100644 src/views/application/components/member_points/setting.vue
 create mode 100644 src/views/application/components/member_points/shop_add.vue
 create mode 100644 src/views/application/components/member_points/shop_list.vue

diff --git a/src/views/application/components/member_points/record.vue b/src/views/application/components/member_points/record.vue
new file mode 100644
index 0000000..25048c4
--- /dev/null
+++ b/src/views/application/components/member_points/record.vue
@@ -0,0 +1,167 @@
+<!-- 兑换记录 -->
+<template>
+    <div>
+        <div>
+            <el-form :model="query" inline label-position="left">
+                <el-form-item>
+                    <el-input placeholder="订单编号/核销码" v-model="query.name" />
+                </el-form-item>
+                <el-form-item>
+                    <el-select v-model="query.cateId" placeholder="领取方式" style="width: 140px;">
+                        <el-option label="自取" :value="1"></el-option>
+                        <el-option label="邮寄" :value="2"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-select v-model="query.cateId" placeholder="状态" style="width: 140px;">
+                        <el-option label="自取" :value="1"></el-option>
+                        <el-option label="邮寄" :value="2"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-date-picker v-model="query.createdAt" type="daterange" range-separator="至"
+                        start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"
+                        value-format="yyyy-MM-dd HH:mm:ss">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="getTableData">查询</el-button>
+                    <el-button @click="resetHandle">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div class="head-container">
+            <div class="collect_wrap">
+                <div class="item">
+                    <div class="icon_wrap" style="--bg-color:#ADDBBC">
+                        <i class="icon el-icon-s-goods"></i>
+                    </div>
+                    <div class="info">
+                        <div class="m">￥1231</div>
+                        <div class="t">总订单数</div>
+                    </div>
+                </div>
+                <div class="item">
+                    <div class="icon_wrap" style="--bg-color:#8CC4FC">
+                        <i class="icon el-icon-s-goods"></i>
+                    </div>
+                    <div class="info">
+                        <div class="m">￥0.00</div>
+                        <div class="t">已支付金额</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="head-container">
+            <el-table :data="tableData.list" v-loading="tableData.loading">
+                <el-table-column label="订单编号"></el-table-column>
+                <el-table-column label="用户名"></el-table-column>
+                <el-table-column label="商品"></el-table-column>
+                <el-table-column label="使用积分"></el-table-column>
+                <el-table-column label="支付金额"></el-table-column>
+                <el-table-column label="领取方式"></el-table-column>
+                <el-table-column label="状态"></el-table-column>
+                <el-table-column label="下单时间"></el-table-column>
+                <el-table-column label="操作"></el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            query: {
+                name: '',
+                cateId: '',
+                createdAt: []
+            },
+            tableData: {
+                sort: 'createdAt,desc',
+                list: [],
+                page: 0,
+                size: 30,
+                loading: false,
+                total: 0
+            },
+        }
+    },
+    methods: {
+        resetHandle() {
+
+        },
+        getTableData() {
+
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.collect_wrap {
+    display: flex;
+    gap: 14px;
+
+    .item {
+        width: 200px;
+        display: flex;
+        align-items: center;
+        background-color: #f5f5f5;
+        padding: 20px;
+
+        .icon_wrap {
+            $size: 34px;
+            $border: 6px;
+            width: $size;
+            height: $size;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: var(--bg-color);
+            border-radius: 50%;
+            position: relative;
+
+            &::after {
+                content: "";
+                width: $size + $border;
+                height: $size + $border;
+                border-radius: 50%;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                background-color: var(--bg-color);
+                opacity: 0.3;
+            }
+
+            .icon {
+                font-size: 16px;
+                color: #fff;
+            }
+
+            .img {
+                width: 20px;
+                height: 20px;
+            }
+        }
+
+        .info {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            padding-left: 10px;
+
+            .m {
+                font-weight: bold;
+            }
+
+            .t {
+                font-size: 12px;
+                color: #999;
+                padding-top: 4px;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/application/components/member_points/setting.vue b/src/views/application/components/member_points/setting.vue
new file mode 100644
index 0000000..a201c8a
--- /dev/null
+++ b/src/views/application/components/member_points/setting.vue
@@ -0,0 +1,197 @@
+<template>
+    <div>
+        <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
+            <el-form-item label="是否消费赠送积分">
+                <el-switch v-model.trim="form.isOpenYhq" :active-value="1" :inactive-value="0"></el-switch>
+            </el-form-item>
+            <el-form-item label="费赠送积分" v-if="form.isOpenYhq">
+                <el-input v-model="form.num" style="width: 300px;">
+                    <template slot="prepend">每消费</template>
+                    <template slot="append">元赠送1积分</template>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="开启下单积分抵扣" style="margin-top: 50px;">
+                <el-switch v-model.trim="form.isOpenYhq" :active-value="1" :inactive-value="0"></el-switch>
+            </el-form-item>
+            <el-form-item label="下单积分抵扣门槛">
+                <el-input v-model="form.num" style="width: 300px;">
+                    <template slot="append">积分</template>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="下单最高抵扣比例">
+                <el-input v-model="form.num" style="width: 300px;">
+                    <template slot="append">%</template>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="下单抵扣积分比例">
+                <el-input v-model="form.num" style="width: 300px;">
+                    <template slot="prepend">1元等于</template>
+                    <template slot="append">积分</template>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="开启积分商城" style="margin-top: 50px;">
+                <el-switch v-model.trim="form.isOpenYhq" :active-value="1" :inactive-value="0"></el-switch>
+            </el-form-item>
+            <el-form-item label="显示样式">
+                <div class="style_wrap">
+                    <div class="item style1" :class="{ active: styleActive == 1 }" @click="styleActive = 1">
+                        <div class="row">
+                            <div class="cover"></div>
+                            <div class="info">
+                                <div class="line"></div>
+                                <div class="line"></div>
+                                <div class="line"></div>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="cover"></div>
+                            <div class="info">
+                                <div class="line"></div>
+                                <div class="line"></div>
+                                <div class="line"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="item style2" :class="{ active: styleActive == 2 }" @click="styleActive = 2">
+                        <div class="row">
+                            <div class="cover"></div>
+                            <div class="line"></div>
+                        </div>
+                        <div class="row">
+                            <div class="cover"></div>
+                            <div class="line"></div>
+                        </div>
+                        <div class="row">
+                            <div class="cover"></div>
+                            <div class="line"></div>
+                        </div>
+                        <div class="row">
+                            <div class="cover"></div>
+                            <div class="line"></div>
+                        </div>
+                    </div>
+                </div>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary">保存</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+                isOpenYhq: 1,
+                num: ''
+            },
+            styleActive: 1,
+            rules: {}
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.style_wrap {
+    display: flex;
+    width: 350px;
+    gap: 50px;
+
+    .item {
+        flex: 1;
+        padding: 10px;
+        border: 1px solid #ddd;
+        $color: #3F9EFF;
+
+        &.active {
+            border-color: $color;
+        }
+
+        .cover {
+            background-color: $color;
+        }
+
+        .line {
+            background-color: #D9D9D9;
+        }
+
+        &.style1 {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+
+            .row {
+                flex: 1;
+                display: flex;
+
+                .cover {
+                    width: 40px;
+                    height: 40px;
+                }
+
+                .info {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 6px;
+                    padding-left: 10px;
+
+                    .line {
+                        flex: 1;
+
+                        &:nth-child(1) {
+                            width: 80%;
+                            flex: 2;
+                        }
+
+                        &:nth-child(3) {
+                            width: 50%;
+                        }
+                    }
+                }
+            }
+        }
+
+        &.style2 {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-template-rows: repeat(2, 1fr);
+            grid-column-gap: 10px;
+            grid-row-gap: 10px;
+
+            .row:nth-child(1) {
+                grid-area: 1 / 1 / 2 / 2;
+            }
+
+            .row:nth-child(2) {
+                grid-area: 1 / 2 / 2 / 3;
+            }
+
+            .row:nth-child(3) {
+                grid-area: 2 / 1 / 3 / 2;
+            }
+
+            .row:nth-child(4) {
+                grid-area: 2 / 2 / 3 / 3;
+            }
+
+            .row {
+                display: flex;
+                flex-direction: column;
+
+                .cover {
+                    flex: 1;
+                }
+
+                .line {
+                    height: 4px;
+                    margin-top: 4px;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/application/components/member_points/shop_add.vue b/src/views/application/components/member_points/shop_add.vue
new file mode 100644
index 0000000..bb0b8dc
--- /dev/null
+++ b/src/views/application/components/member_points/shop_add.vue
@@ -0,0 +1,83 @@
+<!-- 添加积分商品/优惠券 -->
+<template>
+    <div>
+        <el-dialog :title="form.id ? '编辑商品' : '添加商品'" :visible.sync="dialogVisible" @close="reset">
+            <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+                <el-form-item label="奖品类型">
+                    <el-radio-group v-model="form.registerType">
+                        <el-radio label="munchies">实物商品</el-radio>
+                        <el-radio label="restaurant">优惠券</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="商品图片">
+                    <div class="img_list">
+                        <div class="item" v-for="item in form.imgList" :key="item.id">
+                            <img class="img" :src="item.url">
+                        </div>
+                        <div class="item" @click="$refs.addImg.show()">
+                            <i class="icon el-icon-plus"></i>
+                        </div>
+                    </div>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+        <addImg ref="addImg" @successEvent="e => form.imgList.push(e[0])" />
+    </div>
+</template>
+
+<script>
+import addImg from "@/views/product/components/addImages.vue";
+export default {
+    components: {
+        addImg
+    },
+    data() {
+        return {
+            dialogVisible: false,
+            form: {
+                id: '',
+                registerType: 'munchies',
+                imgList: []
+            },
+            rules: {}
+        }
+    },
+    methods: {
+        reset() {
+
+        },
+        show() {
+            this.dialogVisible = true
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.img_list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    .item {
+        width: 100px;
+        height: 100px;
+        border: 1px dashed #ececec;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #F7F7FA;
+
+        .img {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+
+        .icon {
+            font-size: 20px;
+            color: #DDDFE6;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/application/components/member_points/shop_list.vue b/src/views/application/components/member_points/shop_list.vue
new file mode 100644
index 0000000..da29854
--- /dev/null
+++ b/src/views/application/components/member_points/shop_list.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <div><el-button type="primary" @click="$refs.ShopAdd.show()">添加商品</el-button></div>
+        <div class="head-container">
+            <el-table :data="tableData.list" v-loading="tableData.loading">
+                <el-table-column label="商品"></el-table-column>
+                <el-table-column label="所需积分"></el-table-column>
+                <el-table-column label="额外价格「元」"></el-table-column>
+                <el-table-column label="总数"></el-table-column>
+                <el-table-column label="库存"></el-table-column>
+                <el-table-column label="操作"></el-table-column>
+            </el-table>
+        </div>
+        <!-- 添加积分商品/积分 -->
+        <ShopAdd ref="ShopAdd" />
+    </div>
+</template>
+
+<script>
+import ShopAdd from './shop_add.vue'
+export default {
+    components: { ShopAdd },
+    data() {
+        return {
+            tableData: {
+                sort: 'createdAt,desc',
+                list: [],
+                page: 0,
+                size: 30,
+                loading: false,
+                total: 0
+            },
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.head-container {
+    margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/application/member_points.vue b/src/views/application/member_points.vue
index 32aa4bb..ffed912 100644
--- a/src/views/application/member_points.vue
+++ b/src/views/application/member_points.vue
@@ -1,3 +1,36 @@
 <template>
-    <div>会员积分</div>
-</template>
\ No newline at end of file
+    <div class="app-container">
+        <el-tabs v-model="activeName" type="card">
+            <el-tab-pane label="基本设置" name="1"></el-tab-pane>
+            <el-tab-pane label="商品设置" name="2"></el-tab-pane>
+            <el-tab-pane label="兑换记录" name="3"></el-tab-pane>
+        </el-tabs>
+        <Setting v-if="activeName == 1" />
+        <ShopList v-if="activeName == 2" />
+        <Record v-if="activeName == 3" />
+    </div>
+</template>
+
+<script>
+import Setting from './components/member_points/setting.vue'
+import ShopList from './components/member_points/shop_list.vue'
+import Record from './components/member_points/record.vue'
+export default {
+    components: {
+        Setting,
+        ShopList,
+        Record
+    },
+    data() {
+        return {
+            activeName: '3'
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.el-tabs) {
+    margin-bottom: 0;
+}
+</style>
\ No newline at end of file