新增邀请好友
This commit is contained in:
parent
a9691e5891
commit
af90b029df
|
|
@ -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
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<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-form-item label="门店名称" prop="shopName">
|
||||||
<el-input v-model.trim="form.shopName" placeholder="请输入门店名称" style="width: 500px;"></el-input>
|
<el-input v-model.trim="form.shopName" placeholder="请输入门店名称" style="width: 500px;"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
@ -66,16 +66,12 @@
|
||||||
<el-checkbox label="take-out">允许打包</el-checkbox>
|
<el-checkbox label="take-out">允许打包</el-checkbox>
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="是否启用会员价">
|
<!-- <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-radio-group v-model="form.consumeColony">
|
<el-radio-group v-model="form.consumeColony">
|
||||||
<el-radio label="all">所有</el-radio>
|
<el-radio label="all">所有</el-radio>
|
||||||
<el-radio label="vip">仅针对会员</el-radio>
|
<el-radio label="vip">仅针对会员</el-radio>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
<el-form-item label="联系电话" prop="phone">
|
<el-form-item label="联系电话" prop="phone">
|
||||||
<el-input v-model.trim="form.phone" placeholder="请输入联系电话" style="width: 500px;"></el-input>
|
<el-input v-model.trim="form.phone" placeholder="请输入联系电话" style="width: 500px;"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
@ -127,11 +123,15 @@
|
||||||
<el-switch v-model.trim="form.isTableFee" :active-value="1" :inactive-value="0" active-text="免餐位费">
|
<el-switch v-model.trim="form.isTableFee" :active-value="1" :inactive-value="0" active-text="免餐位费">
|
||||||
</el-switch>
|
</el-switch>
|
||||||
</el-form-item>
|
</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>
|
<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> -->
|
<!-- <div style="color: #999;">是否允许用户在小程序端支付订单</div> -->
|
||||||
</el-form-item>
|
</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>
|
<el-switch v-model.trim="form.isUseVip" :active-value="1" :inactive-value="0"></el-switch>
|
||||||
<!-- <div style="color: #999;">是否允许用户在小程序端支付订单</div> -->
|
<!-- <div style="color: #999;">是否允许用户在小程序端支付订单</div> -->
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue