11 changed files with 522 additions and 22 deletions
@ -0,0 +1,19 @@ |
|||
<template> |
|||
<!-- 标题部分 --> |
|||
<view> |
|||
ssss |
|||
</view> |
|||
<!-- 输入框 --> |
|||
<view> |
|||
|
|||
</view> |
|||
<!-- 按钮 --> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -0,0 +1,91 @@ |
|||
<template> |
|||
<view class="deliverFoot border border-solid border-gray-300 rounded-md mt-3 p-2"> |
|||
<view class="top flex justify-between"> |
|||
<view class="mr-3"> |
|||
审核人 |
|||
</view> |
|||
<!-- 展示选择的审核人 --> |
|||
<view class="flex approver item-center truncate justify-end flex-1 text-sm" v-show="isUicon"> |
|||
<view v-for="item in computedDelivers"> |
|||
<view v-show="item.checked" class="mx-1"> |
|||
{{item.name}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 点击更换图标 --> |
|||
<view> |
|||
<u-icon v-if="isUicon" name="arrow-down" @click="changeIcon"></u-icon> |
|||
<u-icon v-else="isUicon" name="arrow-up" @click="changeIcon"></u-icon> |
|||
</view> |
|||
</view> |
|||
<!-- 隐藏的审核人选项 --> |
|||
<view v-show="!isUicon" class="foot mt-2 flex flex-wrap"> |
|||
<u-button |
|||
v-for="item in delivers" |
|||
size="mini" class="my-1 mx-2" |
|||
@click="item.checked = !item.checked" |
|||
:class="item.checked ? 'active' : '' " |
|||
> |
|||
{{item.name}} |
|||
</u-button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
|
|||
import {ref , reactive , computed }from 'vue' |
|||
// 图标切换 |
|||
let isUicon = ref('true') |
|||
// 审核人员列表 |
|||
const delivers = reactive([ |
|||
{ |
|||
checked:true, |
|||
name:'冯教授' |
|||
}, |
|||
{ |
|||
checked:false, |
|||
name:'陈历珺' |
|||
}, |
|||
{ |
|||
checked:false, |
|||
name:'张野' |
|||
}, |
|||
{ |
|||
checked:false, |
|||
name:'宋瑞芳' |
|||
}, |
|||
{ |
|||
checked:false, |
|||
name:'张斌' |
|||
}, |
|||
{ |
|||
checked:false, |
|||
name:'孙方圆' |
|||
} |
|||
]) |
|||
|
|||
// 显示已选择的审核人 |
|||
const computedDelivers = computed(()=>{ |
|||
let arr = []; |
|||
delivers.forEach((item)=>{ |
|||
if(item.checked){ |
|||
arr.push(item) |
|||
} |
|||
if(arr.length>3){ |
|||
arr = arr.splice(0,3) |
|||
arr[3] = {checked:true,name:'...'} |
|||
} |
|||
}) |
|||
return arr |
|||
}) |
|||
|
|||
// 点击切换箭头图标 |
|||
function changeIcon(){ |
|||
isUicon.value = !isUicon.value |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<theme class="h-full w-full pt-1"> |
|||
<view class="bg-white mx-5 my-2 rounded-md p-3"> |
|||
<view class="flex justify-between text-gray-400 mb-2"> |
|||
<view>插件名</view> <view>提交时间</view> |
|||
</view> |
|||
<view class="text-blue-400 mb-2"> |
|||
链接 |
|||
</view> |
|||
<view class="mb-2 text-gray-400">审核人</view> |
|||
</view> |
|||
</theme> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
}; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
</style> |
|||
@ -1,18 +1,196 @@ |
|||
<template> |
|||
<view class="box shadow-lg"> |
|||
<view class="deliver-container">p-deliver</view> |
|||
<!-- <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 scoped lang="scss"> |
|||
.box{ |
|||
border-radius: 8px; |
|||
background: #fff; |
|||
padding: 16px; |
|||
overflow: hidden; |
|||
} |
|||
.box { |
|||
border-radius: 8px; |
|||
background: #fff; |
|||
padding: 16px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.warp { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 80%; |
|||
} |
|||
.rect { |
|||
width: 80%; |
|||
height: 380rpx; |
|||
background-color: #fff; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,69 @@ |
|||
{ |
|||
"description": "项目配置文件", |
|||
"packOptions": { |
|||
"ignore": [] |
|||
}, |
|||
"setting": { |
|||
"bundle": false, |
|||
"userConfirmedBundleSwitch": false, |
|||
"urlCheck": true, |
|||
"scopeDataCheck": false, |
|||
"coverView": true, |
|||
"es6": true, |
|||
"postcss": true, |
|||
"compileHotReLoad": false, |
|||
"lazyloadPlaceholderEnable": false, |
|||
"preloadBackgroundData": false, |
|||
"minified": true, |
|||
"autoAudits": false, |
|||
"newFeature": false, |
|||
"uglifyFileName": false, |
|||
"uploadWithSourceMap": true, |
|||
"useIsolateContext": true, |
|||
"nodeModules": false, |
|||
"enhance": true, |
|||
"useMultiFrameRuntime": true, |
|||
"useApiHook": true, |
|||
"useApiHostProcess": true, |
|||
"showShadowRootInWxmlPanel": true, |
|||
"packNpmManually": false, |
|||
"enableEngineNative": false, |
|||
"packNpmRelationList": [], |
|||
"minifyWXSS": true, |
|||
"showES6CompileOption": false, |
|||
"minifyWXML": true |
|||
}, |
|||
"compileType": "miniprogram", |
|||
"libVersion": "2.21.3", |
|||
"appid": "wx0d9aabee071e228e", |
|||
"projectname": "TALL", |
|||
"debugOptions": { |
|||
"hidedInDevtools": [] |
|||
}, |
|||
"scripts": {}, |
|||
"staticServerOptions": { |
|||
"baseURL": "", |
|||
"servePath": "" |
|||
}, |
|||
"isGameTourist": false, |
|||
"condition": { |
|||
"search": { |
|||
"list": [] |
|||
}, |
|||
"conversation": { |
|||
"list": [] |
|||
}, |
|||
"game": { |
|||
"list": [] |
|||
}, |
|||
"plugin": { |
|||
"list": [] |
|||
}, |
|||
"gamePlugin": { |
|||
"list": [] |
|||
}, |
|||
"miniprogram": { |
|||
"list": [] |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue