修改部分自写公共组件代码

This commit is contained in:
YeMingfei666 2024-09-28 15:05:54 +08:00
parent c3d4f1d78c
commit 1aa502103b
4 changed files with 100 additions and 58 deletions

View File

@ -105,7 +105,7 @@ import { computed } from 'vue';
margin: auto; margin: auto;
} }
.shadow{ .shadow{
box-shadow: 0 0 10px #999; box-shadow: 0 0 10px #aaa;
} }
.btn { .btn {
font-size: 28rpx; font-size: 28rpx;

View File

@ -1,10 +1,11 @@
<template> <template>
<view class="my-radio u-font-28 u-flex color-333" @tap.stop="changeVal" > <view class="my-radio u-font-28 u-flex color-333" @tap.stop="changeVal">
<view class="circle u-flex u-row-center" :style="computedStyle()" :class="{active:modelValue,square:shape==='square'}"> <view class="circle u-flex u-row-center" :style="computedStyle()"
:class="{active:modelValue,square:shape==='square'}">
<uni-icons type="checkmarkempty" v-if="modelValue" :size="size-4" color="#fff"></uni-icons> <uni-icons type="checkmarkempty" v-if="modelValue" :size="size-4" color="#fff"></uni-icons>
</view> </view>
<view class="u-m-l-12"> <view class="u-m-l-12">
{{text}} <slot>{{text}}</slot>
</view> </view>
</view> </view>
</template> </template>
@ -14,11 +15,11 @@
} from 'vue' } from 'vue'
import color from '@/commons/color.js' import color from '@/commons/color.js'
const props = defineProps({ const props = defineProps({
disabled:{ disabled: {
type: [Boolean], type: [Boolean],
default: false default: false
}, },
borderColor:{ borderColor: {
type: String, type: String,
default: '#bbb', default: '#bbb',
}, },
@ -29,10 +30,10 @@
}, },
// v-modal // v-modal
modelValue: { modelValue: {
type: [Number,Boolean], type: [Number, Boolean],
default: false, default: false,
}, },
shape:{ shape: {
//circle square //circle square
type: String, type: String,
default: 'circle', default: 'circle',
@ -52,18 +53,19 @@
` `
} }
const emits = defineEmits(['update:modelValue', 'change']) const emits = defineEmits(['update:modelValue', 'change'])
function changeVal() { function changeVal() {
if(props.disabled){ if (props.disabled) {
return return
} }
emits('click') emits('click')
let currentVal=props.modelValue let currentVal = props.modelValue
let type=typeof currentVal let type = typeof currentVal
if(type==='number'){ if (type === 'number') {
currentVal=currentVal===0?1:0 currentVal = currentVal === 0 ? 1 : 0
} }
if(type==='boolean'){ if (type === 'boolean') {
currentVal=!currentVal currentVal = !currentVal
} }
emits('update:modelValue', currentVal) emits('update:modelValue', currentVal)
emits('change', currentVal) emits('change', currentVal)
@ -75,7 +77,7 @@
.circle { .circle {
background: #FFFFFF; background: #FFFFFF;
&.active { &.active {
background-color: $my-main-color; background-color: $my-main-color;
border-color: $my-main-color; border-color: $my-main-color;
@ -84,7 +86,8 @@
border: 1px solid #707070; border: 1px solid #707070;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
&.square{
&.square {
border-radius: 8rpx; border-radius: 8rpx;
} }
} }

View File

@ -6,7 +6,7 @@
<view class="left-line" :class="{hide:index==list.length-1}"></view> <view class="left-line" :class="{hide:index==list.length-1}"></view>
</view> </view>
<view class="u-p-l-12 "> <view class="u-p-l-12 ">
<view class="u-font-20">{{item[titleKey]||''}}</view> <view class="u-font-20">{{formatTitle(item[titleKey]||'') }}</view>
<view class="u-font-24 u-m-t-2">{{item[contentKey]||''}}</view> <view class="u-font-24 u-m-t-2">{{item[contentKey]||''}}</view>
</view> </view>
</view> </view>
@ -14,6 +14,7 @@
</template> </template>
<script setup> <script setup>
import dayjs from 'dayjs';
const props = defineProps({ const props = defineProps({
active: { active: {
type: [String, Number], type: [String, Number],
@ -32,6 +33,10 @@
default: 'content' default: 'content'
} }
}) })
function formatTitle(time){
return dayjs(time).format('YYYY-M-D HH:MM:ss')
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -1,69 +1,103 @@
<template> <template>
<up-upload :fileList="images" @afterRead="afterRead" @delete="deletePic" :multiple="multiple" <up-upload :fileList="images" @afterRead="afterRead" @delete="deletePic" :multiple="multiple" :width="width"
:width="width" :height="height" :height="height" :maxCount="maxCount"></up-upload>
:maxCount="10"></up-upload>
</template> </template>
<script setup> <script setup>
import {$uploadFile} from '@/http/yskApi/file.js'
import { import {
ref, watch $uploadFile
} from '@/http/yskApi/file.js'
import {
ref,
watch
} from 'vue'; } from 'vue';
const props=defineProps({ const props = defineProps({
modelValue:{ modelValue: {
type:Array, type: Array,
default:()=>[] default: () => []
}, },
width:{ width: {
type:[String,Number], type: [String, Number],
default:60 default: 60
}, },
height:{ height: {
type:[String,Number], type: [String, Number],
default:60 default: 60
}, },
multiple:{ maxCount: {
type:Boolean, type: [Number],
default:true default: 10
},
multiple: {
type: Boolean,
default: true
} }
}) })
const emits=defineEmits(['update:modelValue']) const emits = defineEmits(['update:modelValue'])
const images = ref(props.modelValue) const images = ref(props.modelValue)
function afterRead(e){
for(let i in e.file){ function afterRead(e) {
const file=e.file[i].file console.log(e);
if (Array.isArray(e)) {
for (let i in e.file) {
const file = e.file[i].file
$uploadFile(file).then(res => {
console.log(res);
images.value.push({
url: e.file[i].url,
serveUrl: res.data[0]
})
}).catch(res => {
console.log(res);
if (res.errMsg) {
images.value.splice(i, 1)
uni.showToast({
title: '图片大小超出限制',
icon: 'error'
})
}
})
}
}else{
const i=0
const file = e.file.file
$uploadFile(file).then(res => { $uploadFile(file).then(res => {
console.log(res); console.log(res);
images.value.push({ images.value.push({
url: e.file[i].url, url: e.file.url,
serveUrl: res.data[0] serveUrl: res.data[0]
}) })
}).catch(res=>{ }).catch(res => {
console.log(res); console.log(res);
if(res.errMsg){ if (res.errMsg) {
images.value.splice(i,1) images.value.splice(i, 1)
uni.showToast({ uni.showToast({
title:'图片大小超出限制', title: '图片大小超出限制',
icon:'error' icon: 'error'
}) })
} }
}) })
} }
} }
function deletePic(e){
const {index}=e function deletePic(e) {
images.value.splice(index,1) const {
index
} = e
images.value.splice(index, 1)
} }
watch(()=>images.value,(newval)=>{ watch(() => images.value, (newval) => {
emits('update:modelValue',newval) emits('update:modelValue', newval)
}) })
watch(()=>props.modelValue,(newval)=>{ watch(() => props.modelValue, (newval) => {
images.value=newval images.value = newval
}) })
</script> </script>