glasses/src/views/Home.vue

<template>
  <div class="home">
    <section>
      <MCover :width="width">
        <template #center="{ active, target }">
          <template v-if="active">
            <MCamera
              v-if="tab === 0"
              @reject="$event => handleReject($event, target)"
              @error="handleError"
              @photo="handleGet"
              @close="target(false)">
            </MCamera>
            <MFeature
              v-if="tab === 1"
              :items="face"
              @reTake="tab = 0; width = CLIENT_WIDTH + 'px'"
              @click:try="handleTry"
              @error="handleError"
            ></MFeature>
            <MTry
              v-if="tab === 2"
              :src="imgBase64"
              :item="tryItem"
              @feature="tab = 1; width = '80%'"
              @retake="tab = 0; width = CLIENT_WIDTH + 'px'"
            ></MTry>
          </template>
        </template>
      </MCover>
    </section>
    <modal name="VueDialog" height="200" width="350">
      <div class="model">
        <div class="model-title">提示</div>
        <div class="model-content">{{ error }}</div>
        <div class="model-btn">
          <button class="btn" @click="$modal.hide('VueDialog')">关闭</button>
        </div>
      </div>
    </modal>
  </div>
</template>

<script>
import MCover from './components/MCover'
import MCamera from './components/MCamera'
import MFeature from './components/MFeature'
import MTry from './components/MTry'
const CLIENT_WIDTH = window.innerWidth < 480 ? window.innerWidth : 480
export default {
  name: 'home-view',
  components: {
    MCover,
    MCamera,
    MFeature,
    MTry
  },
  provide: {
    size: {
      width: CLIENT_WIDTH,
      height: window.innerWidth < 480 ? window.innerWidth / 480 * 640 : 640
    }
  },
  data () {
    return {
      CLIENT_WIDTH,
      imgBase64: '',
      tab: 0,
      width: `${CLIENT_WIDTH}px`,
      error: '',
      tryItem: {}
    }
  },
  methods: {
    handleError (error) {
      this.error = error
      this.$modal.show('VueDialog')
    },
    handleReject (error, target) {
      this.width = CLIENT_WIDTH + 'px'
      this.tab = 0
      target && target(false)
      if (error) {
        this.error = error
        this.$modal.show('VueDialog')
      }
    },
    handleGet (data, imgBase64) {
      this.imgBase64 = imgBase64
      this.face = data
      this.width = '80%'
      this.tab = 1
    },
    handleTry (item) {
      this.tryItem = item
      this.width = CLIENT_WIDTH + 'px'
      this.tab = 2
    }
  }
}
</script>

<style scoped lang="less">
section {
  height: 100vh;
  width: 100vw;
}
.home {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.model{
  padding: 20px;
  &-title {
    font-size: 24px;
    font-weight: bolder;
    margin-bottom: 12px;
  }
  &-content {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    &-link {
      color: #141e8c;
      cursor: pointer;
    }
  }
  &-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    .btn {
      -webkit-tap-highlight-color: transparent;
      width: 100px;
      height: 40px;
      border-radius: 20px;
      background: #eee;
      color: #666;
      border: none;
      outline: none;
      cursor: pointer;
    }
    ._primary {
      background: #141e8c;
      color: #fff;
    }
    .default {
      background: #eee;
      color: #666;
    }
  }
}
</style>