From af90b029df1a2df3c7bd0aff9b9ba62809cf0da2 Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Sat, 9 Nov 2024 18:19:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=82=80=E8=AF=B7=E5=A5=BD?=
 =?UTF-8?q?=E5=8F=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/inviteFirend.js                       |  44 +++
 .../components/invite_friend/addCoupon.vue    |  97 +++++
 .../components/invite_friend/record.vue       | 263 ++++++++++++
 .../components/invite_friend/setting.vue      | 374 ++++++++++++++++++
 src/views/application/invite_friend.vue       |  35 ++
 src/views/shop/components/shopInfo.vue        |  18 +-
 6 files changed, 822 insertions(+), 9 deletions(-)
 create mode 100644 src/api/inviteFirend.js
 create mode 100644 src/views/application/components/invite_friend/addCoupon.vue
 create mode 100644 src/views/application/components/invite_friend/record.vue
 create mode 100644 src/views/application/components/invite_friend/setting.vue
 create mode 100644 src/views/application/invite_friend.vue

diff --git a/src/api/inviteFirend.js b/src/api/inviteFirend.js
new file mode 100644
index 0000000..a70c324
--- /dev/null
+++ b/src/api/inviteFirend.js
@@ -0,0 +1,44 @@
+import request from "@/utils/request";
+
+/**
+ * 获取店铺设置
+ * @returns
+ */
+export function byShopId() {
+  let shopId = localStorage.getItem("shopId");
+  return request({
+    url: `/tbShopShare/byShopId`,
+    method: "get",
+    params: {
+      shopId: shopId
+    }
+  });
+}
+
+/**
+ * 分享-新增/编辑
+ * @returns
+ */
+export function tbShopShare(data) {
+  return request({
+    url: "/tbShopShare",
+    method: data.id ? "put" : "post",
+    data
+  });
+}
+
+/**
+ * 邀请记录
+ * @returns
+ */
+export function byShare(data) {
+  let shopId = localStorage.getItem("shopId");
+  return request({
+    url: `/tbShopShare/byShare`,
+    method: "post",
+    data: {
+      shopId: shopId,
+      ...data
+    }
+  });
+}
diff --git a/src/views/application/components/invite_friend/addCoupon.vue b/src/views/application/components/invite_friend/addCoupon.vue
new file mode 100644
index 0000000..5c4d1c2
--- /dev/null
+++ b/src/views/application/components/invite_friend/addCoupon.vue
@@ -0,0 +1,97 @@
+<!-- 添加优惠券 -->
+<template>
+    <el-dialog :title="type == 1 ? '编辑优惠券' : '添加优惠券'" :visible.sync="dialogVisible" @close="reset">
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+            <el-form-item label="券名称" prop="couponId">
+                <el-select v-model="form.couponId" placeholder="请选择优惠券">
+                    <el-option :label="item.title" :value="item.id" v-for="item in coupons" :key="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="数量">
+                <el-input-number v-model="form.couponNum" :min="1"></el-input-number>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+import { getTbShopCoupon } from '@/api/coupon.js'
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            loading: false,
+            coupons: [],
+            type: 1,
+            form: {
+                couponId: '',
+                couponName: '',
+                couponNum: ''
+            },
+            resetForm: {},
+            rules: {
+                couponId: [
+                    {
+                        required: true,
+                        message: '请选择优惠券',
+                        trigger: 'blur'
+                    }
+                ],
+            }
+        }
+    },
+    mounted() {
+        this.resetForm = { ...this.form }
+        this.getTbShopCoupon()
+    },
+    methods: {
+        // 提交
+        onSubmitHandle() {
+            this.$refs.form.validate(async valid => {
+                if (valid) {
+                    try {
+                        this.form.couponName = this.coupons.find(item => item.id == this.form.couponId).title
+                        this.$emit('success', { ...this.form })
+                        this.close()
+                    } catch (error) {
+                        console.log(error)
+                    }
+                }
+            })
+        },
+        // 获取优惠券列表
+        async getTbShopCoupon() {
+            try {
+                const res = await getTbShopCoupon({
+                    shopId: localStorage.getItem('shopId'),
+                    type: 1,
+                    page: 1,
+                    size: 100
+                })
+                this.coupons = res.content
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        reset() {
+            this.form = { ...this.resetForm }
+        },
+        close() {
+            this.dialogVisible = false
+        },
+        show(row) {
+            if (row && row.couponId) {
+                this.type = 1
+                this.form = { ...row }
+            } else {
+                this.type = 2
+            }
+            this.dialogVisible = true
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/application/components/invite_friend/record.vue b/src/views/application/components/invite_friend/record.vue
new file mode 100644
index 0000000..36bf7bb
--- /dev/null
+++ b/src/views/application/components/invite_friend/record.vue
@@ -0,0 +1,263 @@
+<template>
+    <div>
+        <div>
+            <el-form :model="query" inline label-position="left">
+                <el-form-item>
+                    <el-input placeholder="邀请人名称/被邀请人/昵称/手机号" v-model="query.search" style="width: 240px;" />
+                </el-form-item>
+                <el-form-item>
+                    <el-select v-model="query.status" placeholder="状态" style="width: 140px;">
+                        <el-option :label="item.label" :value="item.value" v-for="item in statusList"
+                            :key="item.value"></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="queryHandle">查询</el-button>
+                    <el-button @click="resetHandle">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div class="head-container">
+            <el-table :data="tableData.list" v-loading="tableData.loading">
+                <el-table-column label="邀请人" prop="invitedName">
+                    <template v-slot="scope">
+                        <div class="goods_info">
+                            <el-image :src="scope.row.invitedHeadImg" style="width:40px;height:40px;flex-shrink: 0;"
+                                :preview-src-list="avatarUrlList1">
+                                <div slot="error" class="image-slot">
+                                    <i class="el-icon-folder-delete"></i>
+                                </div>
+                            </el-image>
+                            <span>{{ scope.row.invitedName }}</span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="被邀请人" prop="beInvitedName">
+                    <template v-slot="scope">
+                        <div class="goods_info">
+                            <el-image :src="scope.row.beInvitedHeadImg" style="width:40px;height:40px;flex-shrink: 0;"
+                                :preview-src-list="avatarUrlList2">
+                                <div slot="error" class="image-slot">
+                                    <i class="el-icon-folder-delete"></i>
+                                </div>
+                            </el-image>
+                            <span>{{ scope.row.beInvitedName }}</span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="邀请状态" prop="status">
+                    <template v-slot="scope">
+                        <template v-if="scope.row.method == 'get' && scope.row.status == 2">
+                            <el-tag type="success" disable-transitions>已邀请成功</el-tag>
+                        </template>
+                        <template v-else-if="scope.row.method == 'use' && scope.row.status == 3">
+                            <el-tag type="success" disable-transitions>已邀请成功</el-tag>
+                        </template>
+                        <template v-else>
+                            <el-tag type="danger" disable-transitions>未邀请成功</el-tag>
+                        </template>
+                    </template>
+                </el-table-column>
+                <el-table-column label="邀请时间" prop="createTime"></el-table-column>
+                <el-table-column label="生效时间" prop="updateTime">
+                    <template v-slot="scope">
+                        <template v-if="scope.row.method == 'get'">{{ scope.row.updateTime }}</template>
+                        <template v-if="scope.row.method == 'use'">{{ scope.row.rewardTime }}</template>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="head-container">
+            <el-pagination :total="tableData.total" @size-change="handleSizeChange" :current-page="tableData.page"
+                :page-size="tableData.size" @current-change="paginationChange"
+                layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+import { byShare, byShopId } from '@/api/inviteFirend.js'
+const statusList = [
+    {
+        value: 0,
+        label: '非新用户'
+    },
+    {
+        value: 1,
+        label: '未领取'
+    },
+    {
+        value: 2,
+        label: '已领取'
+    },
+    {
+        value: 3,
+        label: '已使用'
+    },
+]
+export default {
+    data() {
+        return {
+            statusList,
+            avatarUrlList1: [],
+            avatarUrlList2: [],
+            shareId: '',
+            query: {
+                search: '',
+                status: ''
+            },
+            resetQuery: '',
+            tableData: {
+                list: [],
+                page: 1,
+                size: 30,
+                loading: false,
+                total: 0
+            },
+        }
+    },
+    filters: {
+        statusFilter(t) {
+            return statusList.find(item => item.value == t).label
+        }
+    },
+    mounted() {
+        this.resetQuery = { ...this.query }
+        this.byShopId()
+    },
+    methods: {
+        // 查询
+        queryHandle() {
+            this.getTableData()
+        },
+        // 重置查询
+        resetHandle() {
+            this.query = { ...this.resetQuery }
+            this.page = 1
+            this.size = 30
+            this.getTableData()
+        },
+        // 分页大小改变
+        handleSizeChange(val) {
+            this.tableData.size = val
+            this.getTableData()
+        },
+        // 分页回调
+        paginationChange(e) {
+            this.tableData.page = e
+            this.getTableData()
+        },
+        // 获取邀请设置
+        async byShopId() {
+            try {
+                const res = await byShopId()
+                this.shareId = res.id
+                this.getTableData()
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        // 获取表格数据
+        async getTableData() {
+            try {
+                this.tableData.loading = true
+                const res = await byShare({
+                    page: this.tableData.page,
+                    size: this.tableData.size,
+                    search: this.query.search,
+                    status: this.query.status,
+                    shareId: this.shareId
+                })
+                this.tableData.loading = false
+                this.tableData.list = res.content
+                this.tableData.total = res.totalElements
+                // 头像预览图集合
+                this.avatarUrlList1 = res.content.map(item => item.invitedHeadImg)
+                this.avatarUrlList2 = res.content.map(item => item.beInvitedHeadImg)
+            } catch (error) {
+                console.log(error);
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.goods_info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.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/invite_friend/setting.vue b/src/views/application/components/invite_friend/setting.vue
new file mode 100644
index 0000000..1c06421
--- /dev/null
+++ b/src/views/application/components/invite_friend/setting.vue
@@ -0,0 +1,374 @@
+<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.status" :active-value="1" :inactive-value="0"></el-switch>
+            </el-form-item>
+            <template v-if="form.status">
+                <el-form-item label="标题" prop="title">
+                    <el-input v-model="form.title" style="width: 500px;" placeholder="例如：邀请1人可得，双方各得10元优惠券"></el-input>
+                </el-form-item>
+                <el-form-item label="分享封面图" prop="shareImg">
+                    <div class="img_list">
+                        <div class="item" v-if="form.shareImg">
+                            <el-image :src="form.shareImg" style="width: 100%;height: 100%"
+                                :preview-src-list="urlList" />
+                            <div class="del" @click.stop="form.shareImg = ''">删除</div>
+                        </div>
+                        <div class="item upload" @click="formImgKey = 'shareImg'; $refs.addImg.show()" v-else>
+                            <i class="icon el-icon-plus"></i>
+                        </div>
+                    </div>
+                    <div class="tips">建议尺寸：750*622</div>
+                </el-form-item>
+                <el-form-item label="邀请顶部图" prop="invitedImg">
+                    <div class="img_list">
+                        <div class="item" v-if="form.invitedImg">
+                            <el-image :src="form.invitedImg" style="width: 100%;height: 100%"
+                                :preview-src-list="urlList" />
+                            <div class="del" @click.stop="form.invitedImg = ''">删除</div>
+                        </div>
+                        <div class="item upload" @click="formImgKey = 'invitedImg'; $refs.addImg.show()" v-else>
+                            <i class="icon el-icon-plus"></i>
+                        </div>
+                    </div>
+                    <div class="tips">建议尺寸：750*622</div>
+                </el-form-item>
+                <el-form-item label="被邀顶部图" prop="beInvitedImg">
+                    <div class="img_list">
+                        <div class="item" v-if="form.beInvitedImg">
+                            <el-image :src="form.beInvitedImg" style="width: 100%;height: 100%"
+                                :preview-src-list="urlList" />
+                            <div class="del" @click.stop="form.beInvitedImg = ''">删除</div>
+                        </div>
+                        <div class="item upload" @click="formImgKey = 'beInvitedImg'; $refs.addImg.show()" v-else>
+                            <i class="icon el-icon-plus"></i>
+                        </div>
+                    </div>
+                    <div class="tips">建议尺寸：750*622</div>
+                </el-form-item>
+                <el-form-item label="活动日期" prop="startTime">
+                    <el-date-picker v-model="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" @change="timeChange">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item label="新用户获得券" prop="newCoupons">
+                    <div>
+                        <el-button type="primary" @click="addRewardHandle('newCoupons')">添加券</el-button>
+                        <div class="tips">新用户的定义：没领过该活动券的都属于新用户，不管有没有下过单和是否第一次登录小程序。</div>
+                    </div>
+                    <el-table :data="form.newCoupons" border style="width: 600px;">
+                        <el-table-column label="券ID" prop="couponId"></el-table-column>
+                        <el-table-column label="名称" prop="couponName"></el-table-column>
+                        <el-table-column label="数量" prop="couponNum"></el-table-column>
+                        <el-table-column label="操作">
+                            <template v-slot="scope">
+                                <el-button type="text"
+                                    @click="addRewardHandle('newCoupons', 2, scope.row, scope.$index)">编辑</el-button>
+                                <el-button type="text" @click="form.newCoupons.splice(scope.$index, 1)">删除</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-form-item>
+                <el-form-item label="奖励券" prop="invitedNum">
+                    <el-input v-model="form.invitedNum" style="width: 350px;"
+                        @input="inputFilterInt($event, 'invitedNum')">
+                        <template slot="prepend">用户每邀请</template>
+                        <template slot="append">人，可获得奖励券</template>
+                    </el-input>
+                    <el-button type="primary" @click="addRewardHandle('rewardCoupons')">添加券</el-button>
+                </el-form-item>
+                <el-form-item prop="rewardCoupons">
+                    <el-table :data="form.rewardCoupons" border style="width: 600px;">
+                        <el-table-column label="券ID" prop="couponId"></el-table-column>
+                        <el-table-column label="名称" prop="couponName"></el-table-column>
+                        <el-table-column label="数量" prop="couponNum"></el-table-column>
+                        <el-table-column label="操作">
+                            <template v-slot="scope">
+                                <el-button type="text"
+                                    @click="addRewardHandle('rewardCoupons', 2, scope.row, scope.$index)">编辑</el-button>
+                                <el-button type="text"
+                                    @click="form.rewardCoupons.splice(scope.$index, 1)">删除</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-form-item>
+                <el-form-item label="奖励获得方法">
+                    <el-radio-group v-model="form.getMethod">
+                        <el-radio label="get">新用户领取获得</el-radio>
+                        <el-radio label="use">仅新用户使用获得会员</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+            </template>
+            <el-form-item>
+                <el-button type="primary" :loading="loading" @click="onSubmitHandle">保存</el-button>
+            </el-form-item>
+        </el-form>
+        <addImg ref="addImg" @successEvent="e => form[formImgKey] = e[0].url" />
+        <AddCoupon ref="AddCoupon" @success="addCouponSuccess" />
+    </div>
+</template>
+
+<script>
+import { byShopId, tbShopShare } from '@/api/inviteFirend.js'
+import addImg from "@/views/product/components/addImages.vue";
+import AddCoupon from './addCoupon.vue'
+export default {
+    components: { addImg, AddCoupon },
+    data() {
+        const imgValidate1 = (rule, value, callback) => {
+            if (!this.form.shareImg) {
+                callback(new Error("请上传分享封面图"));
+            } else {
+                callback()
+            }
+        }
+        const imgValidate2 = (rule, value, callback) => {
+            if (!this.form.invitedImg) {
+                callback(new Error("请上传邀请顶部图"));
+            } else {
+                callback()
+            }
+        }
+        const imgValidate3 = (rule, value, callback) => {
+            if (!this.form.beInvitedImg) {
+                callback(new Error("请上传被邀顶部图"));
+            } else {
+                callback()
+            }
+        }
+        const startTimeValidate = (rule, value, callback) => {
+            if (!this.form.startTime) {
+                callback(new Error("请选择活动日期"));
+            } else {
+                callback()
+            }
+        }
+        const newCouponsValidate = (rule, value, callback) => {
+            if (!this.form.newCoupons.length) {
+                callback(new Error("请添加新用户获得券"));
+            } else {
+                callback()
+            }
+        }
+        const rewardCouponsValidate = (rule, value, callback) => {
+            if (!this.form.rewardCoupons.length) {
+                callback(new Error("请添加奖励券"));
+            } else {
+                callback()
+            }
+        }
+        return {
+            loading: false,
+            createdAt: [],
+            formImgKey: '',
+            couponKey: '',
+            tableType: '1', // 1添加 2编辑
+            tableEditorIndex: 0, // 编辑时的index
+            form: {
+                status: 1,
+                title: '',
+                shareImg: '',
+                invitedImg: '',
+                beInvitedImg: '',
+                startTime: '',
+                endTime: '',
+                newCoupons: [],
+                invitedNum: '1',
+                rewardCoupons: [],
+                getMethod: 'get'
+            },
+            rules: {
+                title: [
+                    {
+                        required: true,
+                        message: '请输入标题',
+                        trigger: 'blur'
+                    }
+                ],
+                shareImg: [
+                    {
+                        required: true,
+                        validator: imgValidate1,
+                        trigger: 'change'
+                    }
+                ],
+                invitedImg: [
+                    {
+                        required: true,
+                        validator: imgValidate2,
+                        trigger: 'change'
+                    }
+                ],
+                beInvitedImg: [
+                    {
+                        required: true,
+                        validator: imgValidate3,
+                        trigger: 'change'
+                    }
+                ],
+                startTime: [
+                    {
+                        required: true,
+                        validator: startTimeValidate,
+                        trigger: 'change'
+                    }
+                ],
+                newCoupons: [
+                    {
+                        required: true,
+                        validator: newCouponsValidate,
+                        trigger: 'change'
+                    }
+                ],
+                invitedNum: [
+                    {
+                        required: true,
+                        message: '请输入邀请人数',
+                        trigger: 'blur'
+                    }
+                ],
+                rewardCoupons: [
+                    {
+                        required: true,
+                        validator: rewardCouponsValidate,
+                        trigger: 'change'
+                    }
+                ],
+            },
+            urlList: []
+        }
+    },
+    mounted() {
+        this.byShopId()
+    },
+    methods: {
+        // 添加完成优惠券
+        addCouponSuccess(e) {
+            if (this.tableType == 1) {
+                this.form[this.couponKey].push({ ...e })
+            } else {
+                // this.form[this.couponKey][this.tableEditorIndex] = { ...e }
+                this.$set(this.form[this.couponKey], this.tableEditorIndex, { ...e })
+            }
+        },
+        // 添加奖励券
+        addRewardHandle(key, type = 1, row = {}, index = 0) {
+            this.tableEditorIndex = index
+            this.tableType = type
+            this.couponKey = key
+            if (key == 'rewardCoupons' && !this.form.invitedNum) {
+                this.$refs.form.validateField('invitedNum')
+                return
+            }
+            this.$refs.AddCoupon.show(row)
+        },
+        // 日期回调
+        timeChange(e) {
+            this.form.startTime = e[0]
+            this.form.endTime = e[1]
+        },
+        // 过滤input只能输入整数
+        inputFilterInt(e, key) {
+            if (!e) return
+            setTimeout(() => {
+                this.form[key] = e.replace(/[^\d]/g, '')
+            }, 50)
+        },
+        // 提交
+        onSubmitHandle() {
+            this.$refs.form.validate(async valid => {
+                if (valid) {
+                    try {
+                        this.loading = true
+                        this.form.shopId = localStorage.getItem('shopId')
+                        await tbShopShare(this.form)
+                        this.loading = false
+                        this.$notify({
+                            title: '成功',
+                            message: `保存成功`,
+                            type: 'success'
+                        });
+                    } catch (error) {
+                        this.loading = false
+                        console.log(error)
+                    }
+                }
+            })
+        },
+        // 获取店铺设置
+        async byShopId() {
+            try {
+                const res = await byShopId()
+                if (res.id) {
+                    this.form = res
+                    this.createdAt = [res.startTime, res.endTime]
+                    this.urlList = [res.shareImg, res.invitedImg, res.beInvitedImg]
+                }
+            } catch (error) {
+                console.log(error);
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.img_list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    .item {
+        width: 100px;
+        height: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #F5F7FA;
+        position: relative;
+        overflow: hidden;
+
+        &.upload {
+            border: 1px dashed #ddd;
+        }
+
+        &:hover {
+            cursor: pointer;
+
+            .del {
+                transform: translateY(0);
+            }
+        }
+
+        .del {
+            width: 100%;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            background-color: rgba(255, 0, 0, 0.6);
+            backdrop-filter: blur(3px);
+            color: #fff;
+            font-size: 12px;
+            transform: translateY(100%);
+            transition: all .2s ease-in-out;
+        }
+
+        .img {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+
+        .icon {
+            font-size: 20px;
+            color: #ddd;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/application/invite_friend.vue b/src/views/application/invite_friend.vue
new file mode 100644
index 0000000..36903d5
--- /dev/null
+++ b/src/views/application/invite_friend.vue
@@ -0,0 +1,35 @@
+<template>
+    <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" />
+        <Record v-if="activeName == 3" />
+    </div>
+</template>
+
+<script>
+import Setting from './components/invite_friend/setting.vue'
+import Record from './components/invite_friend/record.vue'
+export default {
+    name: 'invite_friend',
+    components: {
+        Setting,
+        Record
+    },
+    data() {
+        return {
+            activeName: '1'
+        }
+    },
+    methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.el-tabs) {
+    margin-bottom: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/shop/components/shopInfo.vue b/src/views/shop/components/shopInfo.vue
index 2cbec62..f55a2bd 100644
--- a/src/views/shop/components/shopInfo.vue
+++ b/src/views/shop/components/shopInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-      <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
+      <el-form ref="form" :model="form" :rules="rules" label-width="160px" label-position="left">
         <el-form-item label="门店名称" prop="shopName">
           <el-input v-model.trim="form.shopName" placeholder="请输入门店名称" style="width: 500px;"></el-input>
         </el-form-item>
@@ -66,16 +66,12 @@
             <el-checkbox label="take-out">允许打包</el-checkbox>
           </el-checkbox-group>
         </el-form-item>
-        <el-form-item label="是否启用会员价">
-          <el-switch v-model.trim="form.isMemberPrice" :active-value="1" ::inactive-value="0"></el-switch>
-          <!-- <div style="color: #999;">是否允许用户在小程序端支付订单</div> -->
-        </el-form-item>
-        <el-form-item label="积分群体">
+        <!-- <el-form-item label="积分群体">
           <el-radio-group v-model="form.consumeColony">
             <el-radio label="all">所有</el-radio>
             <el-radio label="vip">仅针对会员</el-radio>
           </el-radio-group>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="联系电话" prop="phone">
           <el-input v-model.trim="form.phone" placeholder="请输入联系电话" style="width: 500px;"></el-input>
         </el-form-item>
@@ -127,11 +123,15 @@
           <el-switch v-model.trim="form.isTableFee" :active-value="1" :inactive-value="0" active-text="免餐位费">
           </el-switch>
         </el-form-item>
-        <el-form-item label="是否开启8折活动">
+        <!-- <el-form-item label="是否开启8折活动">
           <el-switch v-model.trim="form.isOpenYhq" active-value="true" inactive-value="false"></el-switch>
+          <div style="color: #999;">是否允许用户在小程序端支付订单</div>
+        </el-form-item> -->
+        <el-form-item label="是否启用商品会员价">
+          <el-switch v-model.trim="form.isMemberPrice" :active-value="1" ::inactive-value="0"></el-switch>
           <!-- <div style="color: #999;">是否允许用户在小程序端支付订单</div> -->
         </el-form-item>
-        <el-form-item label="是否开启会员支付">
+        <el-form-item label="是否开启会员余额支付">
           <el-switch v-model.trim="form.isUseVip" :active-value="1" :inactive-value="0"></el-switch>
           <!-- <div style="color: #999;">是否允许用户在小程序端支付订单</div> -->
         </el-form-item>