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>

  <view class="box shadow-lg">
    <view class="deliver-container">p-deliver</view>
  </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(res) {
      linkValue.value = res.data;
    },
  });
}

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

// 拍照上传
function photos() {
  uni.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 从相册选择
    success(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;
}
.box {
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  overflow: hidden;
}
</style>