BUG 26029

src/apps/AppAskForm/Result.vue

@@ -0,0 +1,162 @@
+<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} from 'vuex'
+
+export default {
+  name: 'Result',
+
+  computed: {
+    params() {
+      return this.$route.query || {}
+    }
+  },
+  mounted() {
+    this.injectJWeixin(['sendChatMessage', 'selectEnterpriseContact'])
+  },
+  methods: {
+    ...mapActions(['injectJWeixin', 'wxInvoke']),
+    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.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.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({})
+    }
+  },
+  onShow() {
+    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>