products/uni-shop/components/pay-modal/pay-modal.vue

<template>
  <modal v-model="vValue">
    <view class="screen_all center">
      <view class="pay-modal center">
        <image v-if="icon" :src="icon" class="pay-modal-icon"></image>
        <view class="pay-success-title">{{message || ''}}</view>
        <view class="pay-button-group row"
          :class="['pay-button-'+useType+'-group']"
        >
          <view class="pay-button center"
                v-for="(item,index) in buttonData"
                :key="index"
                :class="{'pay-button-detail': item.border}"
                @click="trigger(item)"
          >{{item.label}}</view>
        </view>
      </view>
    </view>
  </modal>
</template>

<script>
import props from './props';
import mixins from './mixins';
import Modal from "../../components/modal/main";
import buttonData from './data/button';
export default {
  name: "pay-modal",
  props,
  mixins,
  data(){
    return {
      vValue:false
    }
  },

  computed:{
    buttonData(){
      return buttonData[this.useType];
    },
    useType(){
      if (this.type) {
        return this.type;
      } else if(this.fail){
        return 'fail'
      } else {
        return 'default';
      }
    }
  },

  watch:{
    value(){
      this.changeValue(this.value);
    }
  },

  methods:{
    changeValue(value){
      if (this.vValue !== value) {
        this.vValue = value;

        if (this.value !== value) {
          return this.$emit('input',value);
        }
      }
    }
  },

  created(){
    this.changeValue(this.value);
  },

  components:{
    Modal,
  }
}
</script>

<style scoped lang="scss" src="./style.scss">

</style>