quickapp_front/src/components/short/index.ux

<template>
  <div class="short-wrap">
    <div class="short-content" @click="createShortcut">
      <image src="../../assets/imgs/sign_banner.png"></image>
    </div>
  </div>
</template>
<script>
import shortcut from '@system.shortcut'
import prompt from '@system.prompt'
import { userAddDsktop } from '../../api/index.js'
export default {
  data: {},
  onInit() {},
  createShortcut() {
    // 创建快捷方式
    shortcut.hasInstalled({
      success: ret => {
        if (!ret) {
          shortcut.install({
            message: '添加【海天阅读】到桌面，方便下次阅读',
            success: () => {
              this.$emit('addshort', { installed: true })
              if (this.$app.$def.data.backClickCount === 0) {
                this.$app.$def.data.backClickCount++
                return true
              }
              userAddDsktop(1)
                .then(res => {
                  //TODO 加桌后统计上报
                })
                .catch(r => {
                  //TODO 失败后统计上报
                })
            },
            fail: code => {
              console.log(code)
              this.$emit('addshort', { installed: false, msg: code })
            }
          })
        }
      }
    })
  }
}
</script>

<style lang="less" scoped>
.short {
  &-wrap {
    position: fixed;
    bottom: 190px;
    height: 148px;
    z-index: 60;
    justify-content: center;
    width: 100%;
    opacity: 0.95;
  }
  &-content {
    width: 678px;
    height: 152px;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
    image {
      width: 678px;
      height: 152px;
    }
  }
  &-left {
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    background-color: #ff453c;
    width: 444px;
    height: 80px;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    opacity: 0.95;
  }
  &-right {
    text-align: center;
    font-weight: bold;
    font-size: 28px;
    background-color: #ffb540;
    width: 206px;
    height: 80px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    opacity: 0.95;
  }
}
</style>