Vue 组件封装之 Result 结果页

一、Result 结果页

组件说明：

实现 Result 结果页。

效果展示：

实现的功能：

1. 提交或者操作完成之后，进入一个成功或者失败的结果页。
2. 包含成功或者失败的状态插图。
3. 包含成功或者失败的文案表述（标题及详情）。
4. 包含取消（推出应用）和确定（继续填写）两个按钮。

二、使用案例

<template>
  <div>
      <el-result
        :item="item"
        @on-cancel="cancel"
        @on-submit="submit"
      />
  </div>
</template>
<script>
  export default {
    
    
    name: "Result",
    data(){
    
    
      return{
    
    
        item: {
    
    
            title: '提交成功',
            submitText:"继续填写",
            cancelText:"退出应用",
            status:"success"
        },
      }
    },
    created(){
    
    
      let item = this.$route && this.$route.query;
      if(item.status==='fail'){
    
    
          this.item = {
    
    
            title: '提交失败，请联系开发人员',
            submitText:"重新填写",
            cancelText:"退出应用",
            status:"fail"
          }
      }
    },
    methods:{
    
    
      cancel(){
    
    
        dd.biz.navigation.close({
    
    
          onSuccess : function(result) {
    
    
            /*result结构
             {}
             */
          },
          onFail : function(err) {
    
    }
        })
      },
      submit(){
    
    
        this.$router.go(-1)
      }
    }
  }
</script>

三、API 使用指南

属性	说明	类型	默认值
item	页面展示的静态内容集合	Array	[]
title	描述标题	String	–
submitText	提交按钮文本	String	–
cancelText	取消按钮文本	String	–
status	输入值字段	String	–
on-cancel	取消按钮事件	Function	–
on-submit	提交按钮事件	Function	–

四、源代码

Result.vue
文件路径：share/result/Result.vue

<template>
  <div class="cm-tx-c cm-mt-08 cm-p-02">
    <el-image :src="item.status==='success'?successBg:failBg"
              style="width: 250px"
    >
      <div slot="placeholder" class="image-slot">
        图片加载中<span class="dot">...</span>
      </div>
    </el-image>
    <div :class="item.status==='success'?'success-title':'fail-title'">{
    
    {
    
    item.title}}</div>
    <div>{
    
    {
    
    item.describe}}</div>
    <div class="cm-flex cm-jc-sa">
      <div  @click="cancel()" class="cm-btn-cancel">{
    
    {
    
    item.cancelText}}</div>
      <div  @click="submit()" class="cm-btn-submit">{
    
    {
    
    item.submitText}}</div>
    </div>
  </div>
</template>
<script>
  import successBg from '../images/result-success.png';
  import failBg from '../images/result-fail.png';
  export default {
    
    
    name: "ElResult",
    data(){
    
    
      return{
    
    
        successBg,
        failBg
      }
    },
    props:{
    
    
      item:{
    
    
        type:Object,
        default:{
    
    }
      }
    },
    created(){
    
    

    },
    methods:{
    
    
      cancel(){
    
    
        this.$emit('on-cancel','');
      },
      submit(){
    
    
        this.$emit('on-submit','');
      }
    }
  }
</script>

<style scoped>
  .success-title{
    
    
    padding: 0.4rem;
    font-size: 0.35rem;
    color:#15bc83;
  }
  .fail-title{
    
    
    padding: 0.4rem;
    font-size: 0.35rem;
    color:#f25643;
  }
</style>

index.js
文件路径：share/result/index.js

import Result from './Result.vue';

/* istanbul ignore next */
Result.install = function(Vue) {
    
    
  Vue.component(Result.name, Result);
};

export default Result;

注：里面用到一些公共样式，公共样式内容比较多，就不贴出来了。有需要的留言。