czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 挂账管理更新，邀请列表更新，店铺配置更新

Browse Source
This commit is contained in:
YeMingfei666
2025-03-10 18:33:42 +08:00
parent 34068cf8dd
commit 89fe9b7639
31 changed files with 3292 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/views/application/marketing/share/components/addCoupon.vue Normal file
View File

@@ -0,0 +1,107 @@
<!-- 添加优惠券 -->
<template>
<el-dialog
:title="type == 1 ? '编辑优惠券' : '添加优惠券'"
v-model="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>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
</span>
</template>
</el-dialog>
</template>
<script>
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>

281
src/views/application/marketing/share/components/record.vue Normal file
View File

@@ -0,0 +1,281 @@
<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>
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>

383
src/views/application/marketing/share/components/setting.vue Normal file
View File

@@ -0,0 +1,383 @@
<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">
<single-image-upload
style="width: 80px; height: 80px"
v-model="form.shareImg"
></single-image-upload>
<div class="tips u-m-l-14">建议尺寸：750*622</div>
</el-form-item>
<el-form-item label="邀请顶部图" prop="invitedImg">
<single-image-upload
style="width: 80px; height: 80px"
v-model="form.invitedImg"
></single-image-upload>
<div class="tips u-m-l-14">建议尺寸：750*622</div>
</el-form-item>
<el-form-item label="被邀顶部图" prop="beInvitedImg">
<single-image-upload
style="width: 80px; height: 80px"
v-model="form.beInvitedImg"
></single-image-upload>
<div class="tips u-m-l-14">建议尺寸：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 #prepend>用户每邀请</template>
<template #append>人，可获得奖励券</template>
</el-input>
<el-button type="primary" @click="addRewardHandle('rewardCoupons')">添加券</el-button>
</el-form-item>
<el-form-item prop="rewardCoupons">
<div>
<div class="tips">奖励券不受优惠券发放数量影响</div>
</div>
<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>
<AddCoupon ref="AddCoupon" @success="addCouponSuccess" />
</div>
</template>
<script>
import shopShareApi from "@/api/account/shopShare";
import AddCoupon from "./addCoupon.vue";
export default {
components: { 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 shopShareApi.update(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 shopShareApi.get();
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 0.2s ease-in-out;
}
.img {
width: 100%;
height: 100%;
display: block;
}
.icon {
font-size: 20px;
color: #ddd;
}
}
}
</style>

448
src/views/application/marketing/share/components/share.vue Normal file
View File

@@ -0,0 +1,448 @@
<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">
<single-image-upload
style="width: 80px; height: 80px"
v-model="form.shareImg"
></single-image-upload>
</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: 110px" fit="cover">
<template #error>
<div class="image-slot">
<i class="el-icon-folder-delete"></i>
</div>
</template>
</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>
<AddCoupon ref="AddCoupon" @success="addCouponSuccess" />
</div>
</template>
<script>
import shopShareApi from "@/api/account/shopShare";
import AddCoupon from "./addCoupon.vue";
export default {
components: { 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 shopShareApi.update(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 0.2s ease-in-out;
}
.img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.icon {
font-size: 20px;
color: #ddd;
}
}
}
.preview_wrap {
width: 300px;
height: 368px;
background-color: #ededed;
position: relative;
padding: 20px 10px;
.message_wrap {
display: flex;
justify-content: flex-end;
.msg {
display: flex;
.content {
width: 180px;
background-color: #fff;
border-radius: 4px;
padding: 10px 10px 6px;
position: relative;
&::before {
$size: 8px;
content: "";
width: $size;
height: $size;
border-radius: 1px;
background-color: #fff;
position: absolute;
top: 10px;
right: $size / 2 * -1;
transform: rotate(-45deg);
}
.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;
}
}
.title {
font-size: 12px;
line-height: 16px;
padding: 6px 0;
}
.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: 30px;
height: 30px;
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: 30px;
background-color: #fff;
border-radius: 4px;
}
.icon {
font-size: 22px;
color: #333;
}
}
}
</style>

42
src/views/application/marketing/share/index.vue Normal file
View File

@@ -0,0 +1,42 @@
<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" />
<Share v-if="activeName == 2" />
<Record v-if="activeName == 3" />
</div>
</template>
<script>
import Setting from "./components/setting.vue";
import Share from "./components/share.vue";
import Record from "./components/record.vue";
export default {
name: "invite_friend",
components: {
Setting,
Share,
Record,
},
data() {
return {
activeName: "1",
};
},
methods: {},
};
</script>
<style scoped lang="scss">
:deep(.el-tabs) {
margin-bottom: 0;
}
.app-container {
background: #fff;
margin: 20px;
}
</style>