Result page of Vue component package

1. Result page

Component description:

Implement the Result page.

Show results:

Realized functions:

1. After the submission or operation is completed, a success or failure result page is entered.
2. Contains status illustrations of success or failure.
3. Contains a copy statement (title and details) of success or failure.
4. Contains two buttons, cancel (exit the application) and confirm (continue to fill in).

Two, use cases

<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>

3. API usage guide

Attributes	Description	Types of	Defaults
item	The static content collection displayed on the page	Array	[]
title	Description title	String	–
submitText	Submit button text	String	–
cancelText	Cancel button text	String	–
status	Enter value field	String	–
on-cancel	Cancel button event	Function	–
on-submit	Submit button event	Function	–

Fourth, the source code

Result.vue
file path: 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
file path: share/result/index.js

import Result from './Result.vue';

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

export default Result;

Note: Some public styles are used in it, and there are many public styles, so they will not be posted. There is a need to leave a message.