dvcp_v2_wxcp_app/library/apps/AppAskForm/Result.vue

<template>
  <div class="result">
    <image class="result-success" :src="`${$cdn}form/result-success.png`"/>
    <h2>创建成功</h2>
    <p>表单创建成功，您现在可以把表单分享给更多的好友，来填写数据！</p>
    <div class="result-btn" @click="confirm">确定</div>
    <!-- <div class="result-footer">
      <div class="result-footer__item" @click="copy">
        <div>
          <image :src="`${$cdn}form/form-copylink.png`"/>
        </div>
        <h3>复制链接</h3>
      </div>
      <div class="result-footer__item" @click="shareWechat">
        <div>
          <image :src="`${$cdn}form/form-wechat.png`"/>
        </div>
        <h3>微信好友</h3>
      </div>
      <div class="result-footer__item" @click="share">
        <div>
          <image :src="`${$cdn}form/form-share.png`"/>
        </div>
        <h3>分享</h3>
      </div>
    </div> -->
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'
import qs from "query-string"

export default {
  name: 'Result',

  computed: {
    params() {
      return qs.parse(decodeURIComponent(location.search))
    },
    ...mapState(['wxwork'])
  },

  methods: {
    ...mapActions(['injectJWeixin', 'wxInvoke', 'agentSign']),

    copy() {
      let oInput = document.createElement('input')
      oInput.value = this.params.linkUrl
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      this.$u.toast('已复制')
      oInput.remove()
    },
    share() {
      this.agentSign().then(() => {
        this.injectJWeixin(['shareAppMessage', 'shareWechatMessage']).then(() => {
          this.wxInvoke(['shareAppMessage', {
            title: this.params.title,
            desc: this.params.tableExplain,
            link: this.params.linkUrl,
            imgUrl: this.params.headPicture
          }])
        })
      })
    },
    shareWechat() {
      this.agentSign().then(() => {
        this.injectJWeixin(['shareAppMessage', 'shareWechatMessage']).then(() => {
          this.wxInvoke(['shareWechatMessage', {
            title: this.params.title,
            desc: this.params.tableExplain,
            link: this.params.linkUrl,
            imgUrl: this.params.headPicture
          }])
        })
      })
    },
    confirm() {
      uni.navigateBack({
        delta: 2
      })
    }
  },
  onShow() {
    document.title = '问卷表单'
    wx.hideOptionMenu();
  }
}
</script>

<style lang="scss" scoped>
.result {
  min-height: 100vh;
  padding: 96px 96px 0;
  text-align: center;
  box-sizing: border-box;
  background: #fff;

  .result-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 96px;

    .result-footer__item {
      flex: 1;
      text-align: center;

      div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 100px;
        margin: 0 auto 16px;
        border-radius: 50%;
        background: #F4F6FA;

        image {
          width: 100px;
          height: 100px;
        }
      }

      h3 {
        color: #666666;
        font-size: 24px;
        font-weight: normal;
      }
    }
  }

  .result-success {
    display: block;
    width: 192px;
    height: 192px;
    margin: 0 auto 16px;
  }

  p {
    margin: 16px 0 32px;
    color: #999999;
    font-size: 30px;
  }

  .result-btn {
    width: 100%;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 36px;
    color: #fff;
    background: #197DF0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.02);
    border-radius: 4px;

    &:active {
      opacity: 0.8;
    }
  }

  h2 {
    color: #333333;
    font-size: 36px;
    font-weight: 700;
  }
}
</style>