Merge branch 'test' of https://e.coding.net/g-cphe0354/yinshoukeguanliduan/management into test
This commit is contained in:
commit
a425baad52
|
|
@ -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>
|
||||||
|
|
@ -6,22 +6,25 @@
|
||||||
<el-tab-pane label="邀请记录" name="3"></el-tab-pane>
|
<el-tab-pane label="邀请记录" name="3"></el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
<Setting v-if="activeName == 1" />
|
<Setting v-if="activeName == 1" />
|
||||||
|
<Share v-if="activeName == 2" />
|
||||||
<Record v-if="activeName == 3" />
|
<Record v-if="activeName == 3" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Setting from './components/invite_friend/setting.vue'
|
import Setting from './components/invite_friend/setting.vue'
|
||||||
|
import Share from './components/invite_friend/share.vue'
|
||||||
import Record from './components/invite_friend/record.vue'
|
import Record from './components/invite_friend/record.vue'
|
||||||
export default {
|
export default {
|
||||||
name: 'invite_friend',
|
name: 'invite_friend',
|
||||||
components: {
|
components: {
|
||||||
Setting,
|
Setting,
|
||||||
|
Share,
|
||||||
Record
|
Record
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeName: '1'
|
activeName: '2'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {}
|
methods: {}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue