itsm-wx-handle/components/NumberModal.vue

<template>
  <view class="container" @touchmove.stop.prevent>
    <view class="container_head">
      数量
    </view>
    <view class="container_form">
      <view class="content">
        <template v-if="selectType === 'editConsumable' || selectType === 'addConsumable'">
        {{ selectData.consumableName }}({{ selectData.consumableBrandModel }}) {{ selectData.consumableEndPrice }}元
        </template>
        <template v-else-if="selectType === 'editWorkHourManagement'">
        {{ selectData.workName }}{{ selectData.wage }}元
        </template>
      </view>
      
      <view class="number">
        <uni-number-box v-model="pageData.num" :background="primaryColor" color="#fff" :min="1" :max="10000" />
      </view>
    </view>
    <view class="container_foot">
      <view class="foot_btns">
        <view class="cancel btn" @click="cancel">取消</view>
        <view v-if="showRemove" class="remove btn" @click="remove">移除</view>
        <view class="confirm btn" @click="confirm">确认</view>
      </view>
    </view>
  </view>
  <view class="mask" @touchmove.stop.prevent></view>
</template>

<script setup>
  import { defineEmits, ref, reactive, defineProps } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { defaultColor } from '@/static/js/theme.js'
  
  const emit = defineEmits(['cancelEmit', 'confirmEmit', 'removeEmit']);
  const { selectData, selectType, evtNumber, showRemove } = defineProps({
    selectData: Object,
    selectType: String,
    evtNumber: {
      type: Number,
      default: 1,
    },
    showRemove: {
      type: Boolean,
      default: false,
    }
  });
  
  // 主题颜色
  const primaryColor = ref(defaultColor)
  
  // 页面数据
  const pageData = reactive({
    num: 1,
  });
  
  // 取消
  function cancel(){
    emit('cancelEmit')
  }
  
  // 确认
  function confirm(){
    emit('confirmEmit', pageData.num);
  }
  
  // 移除
  function remove(){
    emit('removeEmit', pageData.num);
  }
  
  onLoad((option) => {
    pageData.num = evtNumber;
  })
</script>

<style lang="scss" scoped>
.mask{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
}
.container{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 690rpx;
  background-color: #fff;
  border-radius: 10rpx;
  
  .container_head{
    padding: 55rpx;
    font-size: 32rpx;
    color: #333;
    text-align: center;
  }
  
  .container_form{
    padding: 0 55rpx;
    .content{
      text-align: center;
      font-size: 28rpx;
    }
    .number{
      padding: 24rpx 0;
      display: flex;
      justify-content: center;
    }
  }
  
  .container_foot{
    .foot_btns{
      display: flex;
      border-top: 1rpx solid #DDDDDD;
      .btn{
        border-right: 1rpx solid #E3E3E3;
        &:last-of-type{
          border-right: none;
        }
      }
      .confirm{
        flex: 1;
        font-size: 32rpx;
        padding: 30rpx;
        display: flex;
        justify-content: center;
        color: $uni-primary;
      }
      
      .remove{
        flex: 1;
        font-size: 32rpx;
        padding: 30rpx;
        display: flex;
        justify-content: center;
        color: red;
      }
      
      .cancel{
        flex: 1;
        background-color: #fff;
        font-size: 32rpx;
        padding: 30rpx;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>