You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
381 lines
9.9 KiB
381 lines
9.9 KiB
<template> |
|
<view class="maboxbg" v-if="isshow" @click="checkbox(0)"> |
|
<view class="modtips" @click.stop.prevent v-if="tipstate==1"> |
|
<view class="title"> |
|
{{title||'提示'}} |
|
</view> |
|
<!-- <view class="contents"> |
|
{{content||'提示内容模板'}} |
|
</view> --> |
|
<view class="inputbx"> |
|
<input v-model="inputtext" :placeholder="placeholder" /> |
|
</view> |
|
<view class="buts"> |
|
<view @click="checkbox(1)" v-if="isshowcancel" class="cancel">{{cancelTxt||'取消'}}</view> |
|
<view @click="checkbox(2)" class="confirm">{{confirmTxt||'确认'}}</view> |
|
</view> |
|
</view> |
|
<view class="modtips" @click.stop.prevent v-if="tipstate==2"> |
|
<view class="title"> |
|
{{title||'提示'}} |
|
</view> |
|
<!-- <view class="contents"> |
|
{{content||'提示内容模板'}} |
|
</view> --> |
|
<!-- <view> |
|
<input placeholder="请输入搜索内容"/> |
|
</view> --> |
|
<view class="selviebx" v-if="!isonecheck"> |
|
<view @click="checkall" v-if="checklength!=checklist.length">全选</view> |
|
<view @click="removeall" v-else>全不选</view> |
|
</view> |
|
<view class="listcheck"> |
|
<view @click="checkitem(index)" v-for="(item,index) in list"> |
|
<image :src="checklist.indexOf(index)==-1?'/static/nocheck.png':'/static/check.png'"></image> |
|
<view>{{item}}</view> |
|
</view> |
|
</view> |
|
<view class="buts"> |
|
<view @click="checkbox(1)" v-if="isshowcancel" class="cancel">{{cancelTxt||'取消'}}</view> |
|
<view @click="checkbox(2)" class="confirm">{{confirmTxt||'确认'}}</view> |
|
</view> |
|
</view> |
|
<view class="modtips" @click.stop.prevent v-if="tipstate==3"> |
|
<view class="title"> |
|
{{title||'提示'}} |
|
</view> |
|
<!-- <view class="contents"> |
|
{{content||'提示内容模板'}} |
|
</view> --> |
|
<scroll-view scroll-y="true" class="scvboxs"> |
|
<view class="tpstitl">请上传上门照:</view> |
|
<view class="imgbx"> |
|
<view v-for="(item,index) in details.imglist"> |
|
<image :src="item"></image> |
|
<image @click="remove(index)" src="/compoment/cus-selects-fan/cha.png"></image> |
|
</view> |
|
<view @click="updateimg" v-if="details.imglist.length!=details.maximglength"> |
|
<image src="/static/add.png"></image> |
|
</view> |
|
</view> |
|
<view class="tpstitl">请上传货物堆放照:</view> |
|
<view class="imgbx"> |
|
<view v-for="(item,index) in details.imglist"> |
|
<image :src="item"></image> |
|
<image @click="remove(index)" src="/compoment/cus-selects-fan/cha.png"></image> |
|
</view> |
|
<view @click="updateimg" v-if="details.imglist.length!=details.maximglength"> |
|
<image src="/static/add.png"></image> |
|
</view> |
|
</view> |
|
<view class="tpstitl">请上传签收照:</view> |
|
<view class="imgbx"> |
|
<view v-for="(item,index) in details.imglist"> |
|
<image :src="item"></image> |
|
<image @click="remove(index)" src="/compoment/cus-selects-fan/cha.png"></image> |
|
</view> |
|
<view @click="updateimg" v-if="details.imglist.length!=details.maximglength"> |
|
<image src="/static/add.png"></image> |
|
</view> |
|
</view> |
|
<view class="tpstitl">请上传易碎品贵重物品照:</view> |
|
<view class="imgbx"> |
|
<view v-for="(item,index) in details.imglist"> |
|
<image :src="item"></image> |
|
<image @click="remove(index)" src="/compoment/cus-selects-fan/cha.png"></image> |
|
</view> |
|
<view @click="updateimg" v-if="details.imglist.length!=details.maximglength"> |
|
<image src="/static/add.png"></image> |
|
</view> |
|
</view> |
|
<view class="tpstitl">请上传家配照:</view> |
|
<view class="imgbx"> |
|
<view v-for="(item,index) in details.imglist"> |
|
<image :src="item"></image> |
|
<image @click="remove(index)" src="/compoment/cus-selects-fan/cha.png"></image> |
|
</view> |
|
<view @click="updateimg" v-if="details.imglist.length!=details.maximglength"> |
|
<image src="/static/add.png"></image> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
|
|
<!-- <view class="tpstitl">货物堆放照:</view> |
|
<view class="imgbx"> |
|
<view v-for="(item,index) in details.imglist"> |
|
<image :src="item"></image> |
|
<image @click="remove(index)" src="/compoment/cus-selects-fan/cha.png"></image> |
|
</view> |
|
<view @click="updateimg" v-if="details.imglist.length!=details.maximglength"> |
|
<image src="/static/add.png"></image> |
|
</view> |
|
</view> |
|
<view class="tpstitl">易碎品贵重物品:</view> |
|
<view class="imgbx"> |
|
<view v-for="(item,index) in details.imglist"> |
|
<image :src="item"></image> |
|
<image @click="remove(index)" src="/compoment/cus-selects-fan/cha.png"></image> |
|
</view> |
|
<view @click="updateimg" v-if="details.imglist.length!=details.maximglength"> |
|
<image src="/static/add.png"></image> |
|
</view> |
|
</view> --> |
|
<view class="inputbx"> |
|
<input v-model="inputtext" :placeholder="placeholder" /> |
|
</view> |
|
<view class="buts"> |
|
<view @click="checkbox(1)" v-if="isshowcancel" class="cancel">{{cancelTxt||'取消'}}</view> |
|
<view @click="checkbox(2)" class="confirm">{{confirmTxt||'确认'}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import functions from '@/utils/functions.js' |
|
import { tiplistType } from '@/interfaces/compoment/tiplist' |
|
import { reactive,ref,toRefs,watch } from "vue"; |
|
let details=reactive<tiplistType>({ |
|
tipstate:2, |
|
title:'', |
|
placeholder:'', |
|
isshowcancel:true, |
|
confirmTxt:'', |
|
cancelTxt:'', |
|
success:null, |
|
cancel:null, |
|
close:null, |
|
isshow:false, |
|
list:['12341131212'], |
|
checklist:[], |
|
inputtext:'', |
|
isonecheck:false, |
|
imglist:[], |
|
maximglength:3, |
|
checklength:0, |
|
}) |
|
watch(()=>{details.checklist},()=>{ |
|
details.checklength=details.checklist.length |
|
}) |
|
// watchEffect(()=>{ |
|
// if(details.checklist.length>-1){ |
|
// details.checklength=details.checklist.length |
|
// } |
|
// }) |
|
function setdetails(objs:any){ |
|
for(let key in objs){ |
|
details[key]=objs[key] |
|
} |
|
} |
|
function checkitem(index:number){ |
|
if(details.isonecheck){ |
|
if(details.checklist.indexOf(index)==-1){ |
|
details.checklist=[index] |
|
}else{ |
|
details.checklist.splice(details.checklist.indexOf(index),1) |
|
} |
|
return |
|
} |
|
if(details.checklist.indexOf(index)==-1){ |
|
details.checklist.push(index) |
|
}else{ |
|
details.checklist.splice(details.checklist.indexOf(index),1) |
|
} |
|
} |
|
function checkbox(type:number){ |
|
switch (type){ |
|
case 0: |
|
if(details.close){ |
|
details.close(details) |
|
} |
|
break; |
|
case 1: |
|
if(details.cancel){ |
|
details.cancel(details) |
|
} |
|
break; |
|
case 2: |
|
if(details.success){ |
|
details.success(details) |
|
} |
|
break; |
|
} |
|
} |
|
function remove(index){ |
|
details.imglist.splice(index,1) |
|
} |
|
function updateimg(){ |
|
uni.chooseImage({ |
|
count:details.maximglength, |
|
success:async (chooseImageRes) => { |
|
const tempFilePaths = chooseImageRes.tempFilePaths as any; |
|
// let url=await functions.upfile(tempFilePaths[0]) |
|
tempFilePaths.map(async (item)=>{ |
|
let url=await functions.upfile(item) |
|
details.imglist.push(url.link) |
|
}) |
|
// uni.uploadFile({ |
|
// url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址 |
|
// filePath: tempFilePaths[0], |
|
// name: 'file', |
|
// success: (uploadFileRes) => { |
|
// console.log(uploadFileRes.data); |
|
// } |
|
// }); |
|
} |
|
}); |
|
} |
|
function checkall(){ |
|
details.list.map((item,index)=>{ |
|
details.checklist.push(index) |
|
}) |
|
} |
|
function removeall(){ |
|
details.checklist=[] |
|
|
|
} |
|
defineExpose({setdetails}) |
|
const { isonecheck,checklength,imglist,inputtext,checklist,list,isshow,tipstate,title,isshowcancel,placeholder,confirmTxt,cancelTxt }=toRefs(details) |
|
</script> |
|
|
|
<style lang="scss"> |
|
.tpstitl{ |
|
font-size: 26upx; |
|
width: 550upx; |
|
} |
|
.maboxbg{ |
|
width: 100%; |
|
height: 100%; |
|
position: fixed; |
|
left: 0; |
|
top: 0; |
|
background-color: #00000050; |
|
z-index: 9999; |
|
} |
|
.modtips{ |
|
width: 630upx; |
|
// height: 63upx; |
|
background: #FFFFFF; |
|
border-radius: 7upx; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
padding:40upx 20upx; |
|
position: absolute; |
|
left: 50%; |
|
top: 50%; |
|
transform: translateX(-50%) translateY(-50%); |
|
box-sizing: border-box; |
|
.selviebx{ |
|
display: flex; |
|
align-items: center; |
|
width: 500upx; |
|
justify-content: flex-start; |
|
>view{ |
|
font-size: 26upx; |
|
color: #d3832a; |
|
} |
|
} |
|
.title{ |
|
font-size: 34upx; |
|
color: #092C4D; |
|
} |
|
.contents{ |
|
max-width: 480upx; |
|
font-size: 29upx; |
|
color:#90A0AF; |
|
margin-top: 30upx; |
|
} |
|
.scvboxs{ |
|
width: 100%; |
|
height: 500upx; |
|
} |
|
.imgbx{ |
|
width: 550upx; |
|
display: grid; |
|
grid-template-columns: 33% 33% 33%; |
|
margin-top: 20upx; |
|
>view{ |
|
width: 130upx; |
|
height: 130upx; |
|
padding: 10upx; |
|
box-sizing: border-box; |
|
border: 1upx solid #e6e6e6; |
|
margin-bottom: 15upx; |
|
border-radius: 8upx; |
|
position: relative; |
|
>image:nth-of-type(1){ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
>image:nth-of-type(2){ |
|
width: 28upx; |
|
height: 28upx; |
|
position: absolute; |
|
right: 10upx; |
|
top: 10upx; |
|
} |
|
} |
|
} |
|
.buts{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin-top: 40upx; |
|
>view{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
width: 260upx; |
|
height: 88upx; |
|
border-radius: 8upx; |
|
font-size: 32upx; |
|
} |
|
>.cancel{ |
|
background-color: #F5F5F6; |
|
color: #5A6875; |
|
margin-right: 20upx; |
|
} |
|
>.confirm{ |
|
background-color: #D3832A; |
|
color: #FFFFFF; |
|
} |
|
} |
|
.inputbx{ |
|
margin-top: 30upx; |
|
margin-bottom: 10upx; |
|
border: 1upx solid #092C4D20; |
|
padding: 15upx 30upx; |
|
padding-left: 20upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
box-sizing: border-box; |
|
border-radius: 10upx; |
|
font-size: 27upx; |
|
color: #092C4D; |
|
>input{ |
|
width: 480upx; |
|
flex: 1; |
|
} |
|
} |
|
.listcheck{ |
|
display: flex; |
|
flex-direction: column; |
|
margin-top: 30upx; |
|
>view{ |
|
width: 420upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-start; |
|
font-size: 28upx; |
|
padding: 10upx 0; |
|
>image{ |
|
width: 30upx; |
|
height: 30upx; |
|
margin-right: 15upx; |
|
} |
|
} |
|
} |
|
} |
|
</style> |