TALL-MUI-4/plugins/p-deliver/p-deliver.vue

<template>
 <!-- <view class="deliver-container">p-deliver</view> -->

 <view class="my-2 bg-white p-2 rounded-md relative"  @longpress="logoTime" v-if="deliverRef">
    <!-- 插件名称输入和提交 -->
    <view class=" flex item-center justify-between py-3 pl-2" :class="inputRef">
     <u-input v-model="iptValue" type="text" :border="false" placeholder="请编辑交付物名称" />
     <view class="self-center" :class="viewRef">{{iptValue}}</view>
     <u-button type="primary" size="mini" @click="submit" class="self-center" :disabled="sbumitState">提交</u-button>
      <u-icon v-show="historyIcon" name="arrow-right" class="ml-1" @click="historical"></u-icon>
    </view>
    <view :class="viewRef" class="py-3 pl-2">
      <span class="relative px-1">
      <u-badge :is-dot="true" is-center></u-badge>
      {{iptValue}}
      </span>
    </view>
    <!-- 插件上传方式 -->
    <view>
      <u-input v-model="linkValue" type="text" :border="true" placeholder="请输入交付物地址/链接">
      </u-input>
      <view class="btns flexitems-start mt-3">
          <u-button size="mini" :plain="true" style="color: #007AFF;" class="mr-3" @click="paste">粘贴</u-button>
          <u-button size="mini" :plain="true" style="color: #007AFF;" class="mr-3" @click="getfile">文件</u-button>
          <u-button size="mini" :plain="true" style="color: #007AFF;" class="mr-3" @click="photos">拍照</u-button>
      </view>
    </view>
    <!-- 提示框 -->
    <u-toast ref="tips" />

    <!-- 取消和确定 -->
    <u-mask :show="showRef" @click="showRef = false">
        <view class="warp">
            <view class="rect rounded-md" @tap.stop>
                <view class="text-center my-7 font-semibold">
                  交付物标题名称
                </view>
                <view class="">
                  <u-input :border="true" class="m-5" placeholder="请输入交付物名称" v-model="newInputRef"/>
                </view>
                <view class="flex justify-around h-12 mt-7 justify-self-stretch" style="border-top: 1px solid #D1D5DB;">
                    <view class="leading-12 flex-1 text-center" style="border-right: 1px solid #D1D5DB;" @click="cancelClick">
                      取消
                    </view>
                    <view class="text-blue-700 leading-12 flex-1 text-center" @click="sureClick">
                      确定
                    </view>
                </view>
            </view>
        </view>
    	</u-mask>

    <!-- 编辑和删除的遮罩层 -->
    <view class="mask flex items-center justify-center bg-grey" :class="maskRef" @click="close"  >
        <view class="bg-yellow-500 text-white w-12 h-12 text-center leading-12 rounded-w-12 mx-8" @click="revisePlugin" @tap.stop>修改</view>
        <view class="bg-red-500 text-white w-12 h-12 text-center leading-12 rounded-w-12 mx-8" @click="deletePlugin" @tap.stop>删除</view>
    </view>
    <!-- 插件审核人员选择 -->
     <Reviewer/>
 </view>



</template>

<script setup>
  import {ref,computed,reactive} from 'vue'
 // 插件名称
  const deliverRef = ref(true)
  const iptValue = ref('')
  const linkValue = ref('')
  const historyIcon = ref(false)
  const tips = ref('')
  const showRef = ref(false)
  const maskRef = ref('hidden')
  const inputRef = ref('block')
  const viewRef = ref('hidden')
  const newInputRef = ref('')
  const submitHistory = reactive([])

  // 判断提交按钮的状态
  const sbumitState = computed(()=>!(iptValue.value && linkValue.value))

  // 获取当前时间
  function getTime(){
    const MM = uni.$dayjs().$M+1
    const DD = uni.$dayjs().$D
    const HH = uni.$dayjs().$H
    const mm = uni.$dayjs().$m
    const getTime = MM + '/' + DD + ' ' + HH + ':' + (mm < 10 ? '0' + mm : mm)
    return getTime
  }
  // 提交后验证链接并修改状态
  function submit(){
    const reg=/^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?$/;
    if(!reg.test(linkValue.value)){
      // 显示toast信息
        uni.$ui.showToast('请输入正确的链接')
    }else{
      inputRef.value = 'hidden'
      viewRef.value = 'block'
      const time = getTime()
      const obj = {}
      obj.name = iptValue.value
      obj.time = time
      obj.link = linkValue.value
      submitHistory.push(obj)
      console.log(submitHistory)
    }
  }

  // 查看历史记录
  function historical(){
    uni.navigateTo({
      url: '/pages/submitList/submitList'
    });

  }

  // 粘贴上传
  function paste(){
    uni.getClipboardData({
        success: function (res) {
            linkValue.value = res.data
        }
    });
  }

  // 文件上传
  function getfile (){
    uni.chooseFile({
      count: 1, //默认100
      extension:['.zip','.doc'],
        success: function (res) {
           linkValue.value = JSON.stringify(res.tempFilePaths)
        }
    });
  }

  // 拍照上传
function photos (){
 uni.chooseImage({
     count: 1, //默认9
     sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
     sourceType: ['album','camera'], //从相册选择
     success: function (res) {
         linkValue.value = JSON.stringify(res.tempFilePaths)
     }
 });
}

function close(){
     maskRef.value = 'hidden'
  }

// 长按出现遮罩（编辑和删除按钮）
function logoTime(){
  if( viewRef.value === 'block'){
     maskRef.value = 'block'
  }
}
// 修改插件按钮
function revisePlugin(){
   showRef.value = true
}

// 修改界面的取消按钮事件
function cancelClick(){
    showRef.value = false
    // maskRef.value = 'hidden'
}
// 修改界面的确定按钮事件
function sureClick (){
    iptValue.value = newInputRef.value
    newInputRef.value = ''
    inputRef.value = 'block'
    viewRef.value = 'hidden'
    historyIcon.value = true
    showRef.value = false
    maskRef.value = 'hidden'
}
// 删除插件按钮
function deletePlugin(){
  deliverRef.value = false
}

</script>

<style lang="scss">
  .warp {
  		display: flex;
  		align-items: center;
  		justify-content: center;
  		height: 80%;
  	}
  	.rect {
  		width: 80%;
  		height: 380rpx;
  		background-color: #fff;
  	}

</style>