temu-plugin/src/view/Home.vue

<template>
  <div class="admin">
    <div class="admin-top">
      <div class="logo">
        <!-- <img src="../../assets/images/logo.png" /> -->
        <div>
          <h1>TEMU助手</h1>
        </div>
      </div>
      <div class="admin-right">
        <div class="left" @click="toActive">
          <span>{{ $store.state.userInfo.name + "(" + $store.state.userInfo.phone + ")" }}</span>
          <div :style="{marginLeft: '10px', color: $store.state.userInfo.flag == 1? 'green': 'red'}">({{ getStateInfo }})</div>
        </div>
        <el-dropdown @command="onMallChange" v-if="mallName">
          <div class="userinfo">
            <span>{{ mallName }}</span>
            <img src="../assets/images/bottom.png" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in mallList"
              :command="item"
              :key="index">
              {{ item.mallName }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="admin-main">
      <el-scrollbar class="left">
        <el-menu
          :default-active="activePath"
          :collapse-transition="true"
          unique-opened
          background-color="#545c64"
          router
          text-color="#fff"
          :collapse="isCollapse">
          <el-menu-item index="/welcome">
            <i class="el-icon-monitor"></i>
            <span slot="title">工作台</span>
          </el-menu-item>
          <el-menu-item index="/normalSendGoods">
            <i class="el-icon-shopping-cart-2"></i>
            <span slot="title">普通备货单</span>
          </el-menu-item>
          <el-menu-item index="/copyProduct">
            <i class="el-icon-document-copy"></i>
            <span slot="title">商品复制</span>
          </el-menu-item>
          <el-menu-item index="/saleData">
            <i class="el-icon-s-data"></i>
            <span slot="title">销售数据</span>
          </el-menu-item>
          <el-menu-item index="/learning">
            <i class="el-icon-s-data"></i>
            <span slot="title">学习园地</span>
          </el-menu-item>
          <!-- <el-menu-item index="/statistics">
            <i class="el-icon-s-data"></i>
            <span slot="title">数据统计</span>
          </el-menu-item> -->
        </el-menu>
        <div style="position: absolute; bottom: 20px; padding-left: 20px; ">
          <div style="cursor: pointer; font-size: 16px;" @click="$store.commit('SignOut', true)">
            <i class="el-icon-back" style="color: white; margin-right: 5px;"></i>
            <span style="color: white">退出</span>
          </div>
        </div>
      </el-scrollbar>
      <div class="container">
        <transition name="fade-transform" mode="out-in">
          <keep-alive include="NormalSendGoods">
            <router-view class="container-app"></router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
    <el-dialog
      title="用户激活"
      :visible="$store.state.activeDlgShow"
      :close-on-click-modal="false"
      width="30%"
      :before-close="handleClose">
      <el-form :model="form" label-position="top" ref="form" label-width="100px" class="form">
        <el-form-item
          prop="mallName"
          label="当前绑定账号"
          :rules="[{ required: true, message: '请先登录拼多多跨境卖家中心', trigger: 'blur' }]">
          <el-input readonly placeholder="请先登录拼多多跨境卖家中心" v-model="form.mallName"></el-input>
        </el-form-item>
        <el-form-item
          prop="mallId"
          v-show="false"
          :rules="[{ message: '请输入商城ID', trigger: 'blur' }]">
          <el-input placeholder="请输入商城ID" v-model="form.mallId"></el-input>
        </el-form-item>
        <el-form-item
          prop="code"
          label="激活码"
          :rules="[{ required: true, message: '请输入激活码', trigger: 'blur' }]">
          <el-input placeholder="请输入激活码" v-model="form.code"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="$store.commit('setActiveDlgShow', false)">取 消</el-button>
        <el-button type="primary" @click="active">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    data () {
      return {
        isCollapse: false,
        activePath: '/home',
        form: {
          mallId: this.$store.state.mallId,
          mallName: this.$store.state.mallName,
          code: ''
        },
        vipType: ["体验会员","月会员","半年会员","年会员","年会员多店通用"]
      }
    },
    computed: {
      getStateInfo() {
        if (this.$store.state.userInfo.flag == 0) {
          return '未激活';
        } else if (this.$store.state.userInfo.flag == 1) {
          return this.vipType[this.$store.state.userInfo.type] + '/有效期至' + this.$store.state.userInfo.expireTime;
        } else {
          return '已过期';
        }
      },

      ...mapState(['mallName', 'mallList'])
    },

    watch: {
      $route (v) {
        this.activePath = v.fullPath
      }
    },

    created () {
      this.activePath = this.$route.fullPath
    },

    methods: {
      onMallChange (e) {
        this.$store.commit('setMallName', e.mallName)
        this.$store.commit('setMallId', e.mallId)
        location.reload()
      },

      handleClose() {
        this.form.mallId = "";
        this.form.mallName = "";
        this.form.code = "";
        this.$store.commit('setActiveDlgShow', false)
      },
      toActive() {
        this.$store.commit('setActiveDlgShow', true)
      },
      getMessage(type) {
        return `你使用的是“${this.vipType[type]}”兑换券，确定兑换？`;
      },
      active() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$http.post(`/api/coupon/getDetail`, null, {
              params: {
                code: this.form.code
              }
            }).then(res => {
              if (res.code == 0) {
                let msg = this.getMessage(res.data.type);
                this.$confirm(msg, '温馨提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'info'
                }).then(() => {
                  this.$http.post(`/api/order/upgradeByCode`, null, {
                    params: {
                      ...this.form
                    }
                  }).then(res => {
                    if (res.code == 0) {
                      this.$message.success('激活成功')
                      this.$store.dispatch('getUserInfo')
                      this.$store.commit('setActiveDlgShow', false)
                    }
                  })
                })
              }
            });

          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .admin {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #f4f4f4;

    .fade-transform-leave-active,
    .fade-transform-enter-active {
      transition: all .4s;
    }

    .fade-transform-enter {
      opacity: 0;
      transform: translateX(-20px);
    }

    .fade-transform-leave-to {
      opacity: 0;
      transform: translateX(20px);
    }

    .admin-main {
      display: flex;
      align-items: center;
      height: calc(100% - 64px);
      overflow: hidden;
      border-top: 1px solid rgba(0,0,0,0.15);

      .container {
        flex: 1;
        height: 100%;
        overflow: hidden;

        .container-app {
          width: 100%;
          height: 100%;
          overflow-y: auto;
        }
      }

      .left {
        width: 246px;
        height: 100%;
        background: #545c64;

        img {
          width: 16px;
          height: 16px;
          margin-right: 10px;
          opacity: 0.8;
        }
      }
    }

    .admin-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
      padding: 0 24px 0 36px;
      // box-shadow: 0px 1px 0px 0px rgba(128, 128, 128, 0.1);
      background: #fff;

      .logo {
        display: flex;
        align-items: center;
        cursor: pointer;

        &:hover {
          opacity: 0.6;
        }

        img {
          width: 42px;
          height: 42px;
          margin-right: 12px;
        }

        h1 {
          line-height: 25px;
          color: #1F2635;
          font-size: 18px;
          font-weight: 600;
        }

        p {
          margin-top: 1px;
          line-height: 17px;
          font-size: 12px;
          font-weight: 400;
          color: #A5A9BC;
        }
      }

      .admin-middle {
        display: flex;
        align-items: center;
        height: 64px;

        span {
          position: relative;
          margin-right: 60px;
          height: 64px;
          line-height: 64px;
          font-size: 16px;
          color: #1F2635;
          cursor: pointer;
          transition: all ease 0.5s;

          &.active::after {
            position: absolute;
            left: 50%;
            bottom: 9px;
            z-index: 1;
            width: 52px;
            height: 4px;
            background: #00A971;
            transform: translateX(-50%);
            content: ' ';
          }

          &.active, &:hover {
            color: #1FBAD6;
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }

      .admin-right {
        display: flex;
        align-items: center;
        height: 100%;

        .left {
          display: flex;
          align-items: center;
          cursor: pointer;
          transition: all ease 0.3s;

          &:hover {
            opacity: 0.5;
          }
        }

        .userinfo {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 56px;
          margin-left: 20px;
          cursor: pointer;
          transition: all ease 0.3s;

          &:hover {
            opacity: 0.5;
          }

          .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
          }

          span {
            margin-right: 8px;
            color: #1F2635;
            font-size: 14px;
          }
        }
      }
    }
  }
</style>