From 93854290fe04a9fb26e7dc44c22923491d99320e Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Wed, 13 Nov 2024 10:23:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=88=86=E4=BA=AB=E5=A5=BD?=
 =?UTF-8?q?=E5=8F=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/invite_friend/share.vue        | 426 ++++++++++++++++++
 src/views/application/invite_friend.vue       |   5 +-
 2 files changed, 430 insertions(+), 1 deletion(-)
 create mode 100644 src/views/application/components/invite_friend/share.vue

diff --git a/src/views/application/components/invite_friend/share.vue b/src/views/application/components/invite_friend/share.vue
new file mode 100644
index 0000000..08a2a78
--- /dev/null
+++ b/src/views/application/components/invite_friend/share.vue
@@ -0,0 +1,426 @@
+<template>
+    <div>
+        <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
+            <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">建议尺寸：630*504</div>
+            </el-form-item>
+            <el-form-item label="演示">
+                <div class="preview_wrap">
+                    <div class="message_wrap">
+                        <div class="msg">
+                            <div class="content">
+                                <div class="name">
+                                    <img class="logo" :src="shopInfo.logo">
+                                    <span class="t">{{ shopInfo.name }}</span>
+                                </div>
+                                <div class="title">{{ form.title }}</div>
+                                <el-image :src="form.shareImg" style="width: 100%;height: 130px;" fit="cover">
+                                    <div slot="error" class="image-slot">
+                                        <i class="el-icon-folder-delete"></i>
+                                    </div>
+                                </el-image>
+                                <div class="btm">
+                                    <i class="icon el-icon-link"></i>
+                                    小程序
+                                </div>
+                            </div>
+                            <img class="avatar" src="@/assets/images/avatar.png">
+                        </div>
+                    </div>
+                    <div class="footer">
+                        <i class="icon el-icon-microphone"></i>
+                        <div class="ipt"></div>
+                        <i class="icon el-icon-picture-outline-round"></i>
+                        <i class="icon el-icon-circle-plus-outline"></i>
+                    </div>
+                </div>
+            </el-form-item>
+            <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
+            shopInfo: {
+                name: localStorage.getItem('shopName'),
+                logo: localStorage.getItem('logo')
+            },
+            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;
+        }
+    }
+}
+
+.preview_wrap {
+    width: 328px;
+    height: 368px;
+    background-color: #EDEDED;
+    position: relative;
+    padding: 20px 10px;
+
+    .message_wrap {
+        display: flex;
+        justify-content: flex-end;
+
+        .msg {
+            display: flex;
+
+            .content {
+                width: 200px;
+                background-color: #fff;
+                border-radius: 4px;
+                padding: 10px 10px 6px;
+
+                .name {
+                    display: flex;
+                    align-items: center;
+                    line-height: 10px;
+
+                    .logo {
+                        width: 20px;
+                        height: 20px;
+                        border-radius: 50%;
+                    }
+
+                    .t {
+                        font-size: 10px;
+                        color: #999;
+                        margin-left: 6px;
+                    }
+                }
+
+                .btm {
+                    font-size: 10px;
+                    color: #999;
+                    line-height: 10px;
+                    display: flex;
+                    align-items: center;
+                    border-top: 1px solid #ececec;
+                    padding-top: 6px;
+
+                    .icon {
+                        font-size: 14px;
+                        color: rgb(87, 87, 253);
+                        margin-right: 6px;
+                    }
+                }
+            }
+
+            .avatar {
+                width: 40px;
+                height: 40px;
+                margin-left: 10px;
+            }
+        }
+    }
+
+    .footer {
+        background-color: #F6F6F6;
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        padding: 0 10px;
+        gap: 10px;
+        padding-top: 10px;
+        padding-bottom: 40px;
+
+        &::after {
+            content: "";
+            width: 100px;
+            height: 4px;
+            border-radius: 4px;
+            position: absolute;
+            bottom: 10px;
+            left: 50%;
+            margin-left: -50px;
+            background-color: #333;
+        }
+
+        .ipt {
+            flex: 1;
+            height: 36px;
+            background-color: #fff;
+            border-radius: 4px;
+        }
+
+        .icon {
+            font-size: 28px;
+            color: #333;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/application/invite_friend.vue b/src/views/application/invite_friend.vue
index 36903d5..f2ba5e5 100644
--- a/src/views/application/invite_friend.vue
+++ b/src/views/application/invite_friend.vue
@@ -6,22 +6,25 @@
             <el-tab-pane label="邀请记录" name="3"></el-tab-pane>
         </el-tabs>
         <Setting v-if="activeName == 1" />
+        <Share v-if="activeName == 2" />
         <Record v-if="activeName == 3" />
     </div>
 </template>
 
 <script>
 import Setting from './components/invite_friend/setting.vue'
+import Share from './components/invite_friend/share.vue'
 import Record from './components/invite_friend/record.vue'
 export default {
     name: 'invite_friend',
     components: {
         Setting,
+        Share,
         Record
     },
     data() {
         return {
-            activeName: '1'
+            activeName: '2'
         }
     },
     methods: {}