|
|
@@ -1,39 +1,148 @@
|
|
|
<template>
|
|
|
- <div>这是外卖设置</div>
|
|
|
+ <div class="shopInfo">
|
|
|
+ <el-row class="order_tab">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="tabList">
|
|
|
+ <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
|
|
|
+ <span class="item" v-if="!item.children">{{item.name}}</span>
|
|
|
+ <el-dropdown v-else @command="chooseCoupon">
|
|
|
+ <span class="el-dropdown-link item">
|
|
|
+ {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </span>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item :command="v.command" v-for="(v,index) in item.children" :key="index">{{v.name}}</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ <div class="tab_line"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="content">
|
|
|
+ <component v-if="renderComponent" :is="activeName"></component>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import printerList from "./shopCompoents/bindPrinter.vue";
|
|
|
+import usbPrinter from "./shopCompoents/bindUsbPrint.vue";
|
|
|
+import pictureManagement from "./waimaiComponents/pictureManagement.vue";
|
|
|
+import addressManagement from "./waimaiComponents/addressManagement.vue";
|
|
|
+import deliverySetting from "./waimaiComponents/deliverySetting.vue";
|
|
|
+import voiceSetting from "./waimaiComponents/voiceSetting.vue";
|
|
|
export default {
|
|
|
name: "waimai",
|
|
|
+ components: {
|
|
|
+ printerList,
|
|
|
+ usbPrinter,
|
|
|
+ pictureManagement,
|
|
|
+ addressManagement,
|
|
|
+ deliverySetting,
|
|
|
+ voiceSetting,
|
|
|
+ },
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ activeName: "deliverySetting",
|
|
|
+ tabList: [
|
|
|
+ { name: "配送设置", index: 0, activeName: "deliverySetting" },
|
|
|
+ { name: "语音设置", index: 1, activeName: "voiceSetting" },
|
|
|
+ {
|
|
|
+ name: "打印机管理",
|
|
|
+ index: 2,
|
|
|
+ activeName: "printerList",
|
|
|
+ children: [
|
|
|
+ { name: "云打印机", command: "printerList" },
|
|
|
+ { name: "USB打印机", command: "usbPrinter" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ { name: "商品管理", index: 3, activeName: "pictureManagement" },
|
|
|
+ { name: "常用地址", index: 4, activeName: "addressManagement" },
|
|
|
+ ],
|
|
|
+ tabNum: 0,
|
|
|
+ renderComponent: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.changeTabs(0);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ chooseCoupon(e) {
|
|
|
+ this.tabNum = 2;
|
|
|
+ this.activeName = e;
|
|
|
+ },
|
|
|
+ forceRerender() {
|
|
|
+ // 从 DOM 中删除 my-component 组件
|
|
|
+ this.renderComponent = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 在 DOM 中添加 my-component 组件
|
|
|
+ this.renderComponent = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ changeTabs(i) {
|
|
|
+ if (i === this.tabNum) {
|
|
|
+ this.forceRerender();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.tabNum = i;
|
|
|
+ this.activeName = this.tabList[i].activeName;
|
|
|
+ },
|
|
|
},
|
|
|
- // 监听属性 类似于data概念
|
|
|
- computed: {},
|
|
|
- // 监控data中的数据变化
|
|
|
- watch: {},
|
|
|
- // 方法集合
|
|
|
- methods: {},
|
|
|
- // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created() {},
|
|
|
- // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted() {},
|
|
|
- // 生命周期 - 创建之前
|
|
|
- beforeCreate() {},
|
|
|
- // 生命周期 - 挂载之前
|
|
|
- beforeMount() {},
|
|
|
- // 生命周期 - 更新之前
|
|
|
- beforeUpdate() {},
|
|
|
- // 生命周期 - 更新之后
|
|
|
- updated() {},
|
|
|
- // 生命周期 - 销毁之前
|
|
|
- beforeDestroy() {},
|
|
|
- // 生命周期 - 销毁完成
|
|
|
- destroyed() {},
|
|
|
- // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
- activated() {},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped type="text/css">
|
|
|
-</style>
|
|
|
+<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
+<style scoped lang="scss">
|
|
|
+.shopInfo {
|
|
|
+ .order_tab {
|
|
|
+ width: 100%;
|
|
|
+ height: 74px;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .tabList {
|
|
|
+ width: 100%;
|
|
|
+ height: 74px;
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-left: 36px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .tab_item {
|
|
|
+ min-width: 58px;
|
|
|
+ margin-right: 56px;
|
|
|
+ .item {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #b1b1b1;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .tab_line {
|
|
|
+ width: 58px;
|
|
|
+ height: 6px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin: 15px auto 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab_item_ac {
|
|
|
+ color: #fc7200;
|
|
|
+
|
|
|
+ .tab_line {
|
|
|
+ background: #fc7200;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Funny