代客下单修改，增加线上店铺装修页面
This commit is contained in:
@@ -1 +1,727 @@
|
||||
<template></template>
|
||||
<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 == 'home'">
|
||||
<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 shopExtendApi from "@/api/account/shopExtend";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableActive: "home",
|
||||
tableData: [],
|
||||
selectItem: {},
|
||||
imageUrl: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 刷新列表数据
|
||||
async doSubmit() {
|
||||
await shopExtendApi.edit({
|
||||
...this.selectItem,
|
||||
autokey: this.selectItem.autoKey,
|
||||
});
|
||||
this.$message({
|
||||
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;
|
||||
console.log(this.tableData[0]);
|
||||
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>
|
||||
Reference in New Issue
Block a user