650 lines
24 KiB
Vue
650 lines
24 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.title }}
|
|
</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">
|
|
<i class="icon el-icon-coffee"></i>
|
|
</div>
|
|
<div class="info">
|
|
<div class="t1">点餐</div>
|
|
<div class="t2">在线点不排队</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="btn">
|
|
<i class="icon el-icon-postcard"></i>
|
|
<div class="info">
|
|
<div class="t1">会员</div>
|
|
<div class="t2">入会享权益</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn">
|
|
<i class="icon el-icon-wallet"></i>
|
|
<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>
|
|
</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">
|
|
<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 { tbShopExtend, addtbShopExtend, deletetbShopExtend, querytbShopExtend, edittbShopExtend } from '@/api/extend.js'
|
|
import { getToken } from "@/utils/auth";
|
|
import { mapGetters } from "vuex";
|
|
export default {
|
|
computed: {
|
|
...mapGetters(["qiNiuUploadApi"])
|
|
},
|
|
data() {
|
|
return {
|
|
tableActive: 'index_bg',
|
|
tableData: [],
|
|
selectItem: {},
|
|
headers: {
|
|
Authorization: getToken()
|
|
},
|
|
imageUrl: '',
|
|
shopName: localStorage.getItem('shopName')
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
// 刷新列表数据
|
|
async doSubmit() {
|
|
await edittbShopExtend({
|
|
...this.selectItem,
|
|
})
|
|
this.$message({
|
|
message: '编辑成功',
|
|
type: 'success'
|
|
})
|
|
this.getList()
|
|
},
|
|
handleSuccess(response, file, fileList) {
|
|
this.selectItem.value = response.data[0];
|
|
console.log("上传成功", this.form);
|
|
this.doSubmit()
|
|
},
|
|
// 切换类型
|
|
selectItemChange(key) {
|
|
this.tableActive = key
|
|
this.selectItem = { ...this.tableData.find(item => item.autokey == key) }
|
|
},
|
|
// 获取装修数据
|
|
async getList() {
|
|
try {
|
|
let res = await tbShopExtend({
|
|
shopId: localStorage.getItem('shopId')
|
|
})
|
|
this.tableData = res.content
|
|
|
|
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%;
|
|
height: 686px;
|
|
background-color: #fff;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
|
|
.index_bg {
|
|
.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;
|
|
padding-top: 4px;
|
|
}
|
|
}
|
|
|
|
.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: 10px;
|
|
}
|
|
|
|
|
|
.icon {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.my_bg {
|
|
background-color: #f5f5f5;
|
|
height: 100%;
|
|
|
|
.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;
|
|
|
|
.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;
|
|
padding-left: 10px;
|
|
|
|
.t1 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.t2 {
|
|
font-size: 10px;
|
|
color: #999;
|
|
padding-top: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.shopinfo_bg {
|
|
.bg {
|
|
width: 100%;
|
|
height: 120px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.shop_name {
|
|
padding: 10px 10px 0 10px;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.editor_wrap {
|
|
padding-left: 20px;
|
|
|
|
.header {
|
|
.t2 {
|
|
color: #999;
|
|
font-size: 12px;
|
|
margin-top: 6px;
|
|
}
|
|
}
|
|
|
|
.form_item {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.avatar {
|
|
display: block;
|
|
width: 200px;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.title {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |