728 lines
19 KiB
Vue
728 lines
19 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<div class="btn_wraps">
|
||
<div
|
||
class="btn"
|
||
:class="{ active: tableActive == item.autoKey }"
|
||
v-for="item in tableData"
|
||
:key="item.autoKey"
|
||
@click="selectItemChange(item.autoKey)"
|
||
>
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
<div class="form">
|
||
<div class="preview_wrap">
|
||
<div class="phone_wrap">
|
||
<div class="index_bg" v-if="tableActive == 'index_bg'">
|
||
<img class="bg" :src="selectItem.value" />
|
||
<div class="menu_wrap">
|
||
<div class="menu_wrap_div">
|
||
<div class="left">
|
||
<div class="icon_wrap">
|
||
<SvgIcon
|
||
style="margin-right: 0"
|
||
color="rgb(0,0,0)"
|
||
size="30"
|
||
iconClass="Coffee"
|
||
></SvgIcon>
|
||
</div>
|
||
<div class="info">
|
||
<div class="t1">点餐</div>
|
||
<div class="t2">在线点不排队</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="btn">
|
||
<SvgIcon
|
||
style="margin-right: 0"
|
||
size="30"
|
||
color="rgb(0,0,0)"
|
||
iconClass="postcard"
|
||
></SvgIcon>
|
||
<div class="info">
|
||
<div class="t1">会员</div>
|
||
<div class="t2">入会享权益</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn">
|
||
<SvgIcon
|
||
style="margin-right: 0"
|
||
color="rgb(0,0,0)"
|
||
size="30"
|
||
iconClass="wallet"
|
||
></SvgIcon>
|
||
<div class="info">
|
||
<div class="t1">充值</div>
|
||
<div class="t2">充值享更多优惠</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="my_bg" v-if="tableActive == 'my_bg'">
|
||
<img class="bg" :src="selectItem.value" />
|
||
<div class="content">
|
||
<div class="item" style="display: flex">
|
||
<div class="left">
|
||
<div class="avatar">
|
||
<i class="icon el-icon-s-custom"></i>
|
||
</div>
|
||
<span>微信用户</span>
|
||
</div>
|
||
<div class="ewm">
|
||
<i class="icon el-icon-menu"></i>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="title" style="padding-bottom: 10px">我的资产</div>
|
||
<div class="flex">
|
||
<div class="btn">
|
||
<i class="icon el-icon-s-finance"></i>
|
||
<span class="name">储值</span>
|
||
<span class="num">**</span>
|
||
</div>
|
||
<div class="btn">
|
||
<i class="icon el-icon-s-ticket"></i>
|
||
<span class="name">优惠券</span>
|
||
<span class="num">**</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="title" style="padding-bottom: 10px">我的功能</div>
|
||
<div class="row">
|
||
<div class="left">
|
||
<i class="icon el-icon-s-ticket"></i>
|
||
<div class="label">我的优惠券</div>
|
||
</div>
|
||
<i class="arrow el-icon-arrow-right"></i>
|
||
</div>
|
||
<div class="row">
|
||
<div class="left">
|
||
<i class="icon el-icon-s-order"></i>
|
||
<div class="label">我的订单</div>
|
||
</div>
|
||
<i class="arrow el-icon-arrow-right"></i>
|
||
</div>
|
||
<div class="row">
|
||
<div class="left">
|
||
<i class="icon el-icon-user-solid"></i>
|
||
<div class="label">个人资料</div>
|
||
</div>
|
||
<i class="arrow el-icon-arrow-right"></i>
|
||
</div>
|
||
<div class="row">
|
||
<div class="left">
|
||
<i class="icon el-icon-s-management"></i>
|
||
<div class="label">我的会员卡</div>
|
||
</div>
|
||
<i class="arrow el-icon-arrow-right"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="member_bg" v-if="tableActive == 'member_bg'">
|
||
<div class="card_wrap">
|
||
<div class="card">
|
||
<img class="bg" :src="selectItem.value" />
|
||
<div class="content">
|
||
<div class="ewm">
|
||
<i class="icon el-icon-menu"></i>
|
||
</div>
|
||
<div class="title">{{ shopName }}会员卡 Lv.1</div>
|
||
<div class="tips">
|
||
<span>欢迎加入本店会员</span>
|
||
<span>查看特权</span>
|
||
</div>
|
||
<div class="btm">
|
||
<div class="item">
|
||
<span>0.00</span>
|
||
<span>储值</span>
|
||
</div>
|
||
<div class="item">
|
||
<span>0</span>
|
||
<span>积分</span>
|
||
</div>
|
||
<div class="item">
|
||
<span>0</span>
|
||
<span>优惠券</span>
|
||
</div>
|
||
<div class="item">
|
||
<span>0</span>
|
||
<span>权益卡</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="info_wrap">
|
||
<div class="avatar">
|
||
<i class="icon el-icon-user"></i>
|
||
</div>
|
||
<div class="info">
|
||
<div class="t1">感谢你2天陪伴</div>
|
||
<div class="t2">
|
||
您今天的幸运词：
|
||
<span>林波微步</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="shopinfo_bg" v-if="tableActive == 'shopinfo_bg'">
|
||
<img class="bg" :src="selectItem.value" />
|
||
<div class="shop_name">{{ shopName }}</div>
|
||
<img class="content" src="@/assets/images/shop_editor_bg.png" alt="" />
|
||
</div>
|
||
<div class="ticket_wrap" v-if="tableActive == 'ticket_logo'">
|
||
<img class="logo" :src="selectItem.value" />
|
||
<img class="ewm" src="@/assets/images/1024.png" />
|
||
<div class="row">
|
||
<span class="num">123</span>
|
||
<span>座位号：#A9</span>
|
||
</div>
|
||
<div class="row">甜橙马黛茶</div>
|
||
<div class="row">
|
||
<span class="sku">加珍珠、加糖</span>
|
||
</div>
|
||
<div class="row">
|
||
<span class="b">2020-10-24 13:14:52</span>
|
||
</div>
|
||
<div class="row">
|
||
<span class="sku">建议尽快享用，风味更佳</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="editor_wrap">
|
||
<div class="header" style="padding-bottom: 20px">
|
||
<div class="t1">
|
||
{{ selectItem.name }}
|
||
</div>
|
||
<div class="t2">注：点击图片更换</div>
|
||
</div>
|
||
<div class="form_item">
|
||
<SingleImageUpload v-model="selectItem.value" @onSuccess="onSuccess">
|
||
<img v-if="selectItem.value" :src="selectItem.value" class="avatar" />
|
||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||
</SingleImageUpload>
|
||
<!-- <el-upload
|
||
:headers="headers"
|
||
class="avatar-uploader"
|
||
:action="qiNiuUploadApi"
|
||
:show-file-list="false"
|
||
:on-success="handleSuccess"
|
||
style="width: 200px; height: 200px"
|
||
>
|
||
<img v-if="selectItem.value" :src="selectItem.value" class="avatar" />
|
||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||
</el-upload> -->
|
||
<!-- <div class="title" style="padding-left: 20px;">跳转路径</div>
|
||
<el-input style="width: 300px;margin-left: 20px;" />
|
||
<el-button type="primary" style="margin-left: 20px;">修改</el-button> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { ElMessage } from "element-plus";
|
||
import shopExtendApi from "@/api/account/shopExtend";
|
||
export default {
|
||
data() {
|
||
return {
|
||
tableActive: "",
|
||
tableData: [],
|
||
selectItem: {},
|
||
imageUrl: "",
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
// 刷新列表数据
|
||
async doSubmit() {
|
||
await shopExtendApi.edit({
|
||
...this.selectItem,
|
||
autokey: this.selectItem.autoKey,
|
||
});
|
||
ElMessage({
|
||
message: "编辑成功",
|
||
type: "success",
|
||
});
|
||
this.getList();
|
||
},
|
||
onSuccess(response) {
|
||
this.doSubmit();
|
||
},
|
||
// 切换类型
|
||
selectItemChange(key) {
|
||
this.tableActive = key;
|
||
const { autoKey, id, name, value } = this.tableData.find((item) => item.autoKey == key);
|
||
this.selectItem = { autoKey, id, name, value };
|
||
console.log(this.selectItem);
|
||
},
|
||
// 获取装修数据
|
||
async getList() {
|
||
try {
|
||
let res = await shopExtendApi.get({});
|
||
this.tableData = res;
|
||
this.tableActive = !this.tableActive ? res[0].autoKey : this.tableActive;
|
||
this.selectItemChange(this.tableActive);
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.btn_wraps {
|
||
display: flex;
|
||
$color: #40a9ff;
|
||
gap: 30px;
|
||
|
||
.btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
border: 1px solid $color;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 0 0 4px #40a9ff29;
|
||
color: $color;
|
||
cursor: pointer;
|
||
|
||
&.active {
|
||
background-color: $color;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.form {
|
||
display: flex;
|
||
padding-top: 30px;
|
||
|
||
.preview_wrap {
|
||
width: 317px;
|
||
|
||
.phone_wrap {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
|
||
.index_bg {
|
||
padding-bottom: 50px;
|
||
.bg {
|
||
width: 100%;
|
||
height: 500px;
|
||
object-fit: cover;
|
||
position: relative;
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-top: 10px;
|
||
|
||
.t1 {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.t2 {
|
||
font-size: 10px;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.menu_wrap {
|
||
padding: 0 20px;
|
||
margin-top: -50px;
|
||
position: relative;
|
||
|
||
.menu_wrap_div {
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
padding: 20px 10px;
|
||
border-radius: 10px;
|
||
background-color: #fff;
|
||
|
||
.left {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.icon_wrap {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.icon {
|
||
font-size: 34px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-left: 1px solid #ddd;
|
||
padding-left: 20px;
|
||
|
||
.btn {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&:last-child {
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.icon {
|
||
font-size: 30px;
|
||
}
|
||
|
||
.info {
|
||
flex: 1;
|
||
padding-top: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.my_bg {
|
||
background-color: #f5f5f5;
|
||
height: 100%;
|
||
padding-bottom: 50px;
|
||
|
||
.bg {
|
||
width: 100%;
|
||
height: 180px;
|
||
object-fit: cover;
|
||
position: relative;
|
||
}
|
||
|
||
.content {
|
||
padding: 0 10px;
|
||
margin-top: -40px;
|
||
position: relative;
|
||
|
||
.item {
|
||
padding: 10px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
margin-bottom: 10px;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.avatar {
|
||
width: 50px;
|
||
height: 50px;
|
||
background-color: #efefef;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
|
||
.icon {
|
||
font-size: 24px;
|
||
color: #ddd;
|
||
}
|
||
}
|
||
|
||
span {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
.ewm {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
background-color: #e3ad7f;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.icon {
|
||
font-size: 20px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
|
||
.btn {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
|
||
.icon {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.name {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.num {
|
||
color: #e3ad7f;
|
||
}
|
||
}
|
||
}
|
||
|
||
.row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 0;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.icon {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.label {
|
||
font-size: 14px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
.arrow {
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.member_bg {
|
||
height: 100%;
|
||
background-color: #f5f5f5;
|
||
padding: 10px;
|
||
padding-bottom: 400px;
|
||
|
||
.card_wrap {
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
|
||
.card {
|
||
height: 144px;
|
||
position: relative;
|
||
|
||
.bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
object-fit: cover;
|
||
border-radius: 0 0 10px 10px;
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
border-radius: 0 0 10px 10px;
|
||
color: #fff;
|
||
padding: 20px;
|
||
font-size: 14px;
|
||
|
||
.ewm {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
background-color: #000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 20px;
|
||
|
||
.icon {
|
||
font-size: 16px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.tips {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
color: inherit;
|
||
}
|
||
|
||
.btm {
|
||
width: 100%;
|
||
display: flex;
|
||
position: absolute;
|
||
bottom: 20px;
|
||
left: 0;
|
||
|
||
.item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.info_wrap {
|
||
padding: 20px 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background-color: #efefef;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.icon {
|
||
color: #555;
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
flex: 1;
|
||
|
||
.t1 {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.t2 {
|
||
font-size: 10px;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shopinfo_bg {
|
||
.bg {
|
||
width: 100%;
|
||
height: 120px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.shop_name {
|
||
padding: 10px 10px 0 10px;
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.ticket_wrap {
|
||
padding: 15px;
|
||
position: relative;
|
||
|
||
.ewm {
|
||
width: 80px;
|
||
height: 80px;
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 15px;
|
||
}
|
||
|
||
.logo {
|
||
width: 90px;
|
||
height: 30px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.row {
|
||
margin-top: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.sku {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
.b {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.num {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.editor_wrap {
|
||
padding-left: 20px;
|
||
|
||
.header {
|
||
.t2 {
|
||
color: #999;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.form_item {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.avatar {
|
||
display: block;
|
||
width: 200px;
|
||
height: 200px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.title {
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |