reservation-uniapp-250509/service-uniapp-technician/pages/mine/upload.vue

<template>
    <view class="content">
		<mNavbar title="相册" :leftClick="leftClick" />

		<view class="item-card">
			<view class="flex">
				<view class="head-line"/>
				<view class="tt">我的相册（{{list.length}}/{{maxSize}}）</view>
			</view>
			<view class="list">
				<view v-for="(item, i) in list"
				class="item" @click="index = i;show = true">
					<image :src="item" mode="aspectFill" class="ii-image"></image>
				</view>
				<view class="ii" v-if="list.length < maxSize"
				@click="selectImage"></view>
			</view>
		</view>

        <view class="b-fiexd">
            <view class="button-submit" @click="submit">保存</view>
        </view>

		<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
    </view>
</template>

<script>
import mNavbar from '@/components/base/m-navbar.vue'
export default {
	components: {
		mNavbar,
	},
    data() {
        return {
			list : [],
			maxSize : 10,
			show : false,
			actions : [
				{ name: '查看图片', index : 0 },
				{ name: '删除图片', index : 1 },
			],
			index : 0,
			userInfo : {},
        }
    },
    onShow() {
		this.getUserInfo()
    },
    methods: {
		selectImage(){
			uni.chooseImage({
				count: this.maxSize - this.list.length, // 默认9，设置为1表示单选
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: (res) => {
					
					let resultPromise = [];
					
					res.tempFiles.forEach(file => {
						resultPromise.push(this.uploadFileToOSS(file));
					})
					Promise.all(resultPromise).then(imgPathArr => {
						this.list.push(...imgPathArr)
					})
				}
			});
		},
		submit(){
			this.$api('uploadTenImg', {
				file : this.list.join(',')
			}, res => {
				if(res.code == 200){
					uni.showToast({
						title : '保存成功',
						icon : 'none'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/center'
						})
					}, 1000)
				}
			})
		},
		getUserInfo() {
			this.$api('giveTenInfo', {}, res => {
				if (res.code == 200) {
					this.userInfo = res.result.msgTen;
					this.list = this.userInfo.images ? this.userInfo.images.split(',') : []
				}
			}, '加载中...')
		},
		onSelect(e){
			console.log(e);
			this.show = false
			if(e.index == 0){
				uni.previewImage({
					current: this.index,
					urls: this.list,
				});
			}else if(e.index == 1){
				this.deleteImage(this.index)
			}
		},
		deleteImage(index){
			let self = this
			uni.showModal({
			    title: '确认删除这张照片吗',
				confirmText : '确认',
				cancelText : '取消',
			    success: function (res) {
			        if (res.confirm) {
			            self.list.splice(index, 1)
			        } else if (res.cancel) {}
			    }
			});
		},
        clickBanner(){ uni.navigateTo({ url: '/pages/login/login' }) },
        clickInfo(id){ uni.navigateTo({ url: `/pages/index/infod?id=${id}`}) },
		leftClick(){ uni.switchTab({
			url: '/pages/index/center'
		}) },
    }
}
</script>

<style scoped lang="scss">
	
	.ii-image{
		width: 172rpx;
		height: 172rpx;
	}
	.list{
		display: flex;
		flex-wrap: wrap;
		.item{
			margin: 40rpx 20rpx 0 20rpx;
		}
	}

body{
    background-color: #f3f3f3;
}

.head-line{
	width: 8rpx;
	height: 34rpx;
	background: #60bda2;
	border-radius: 4rpx;
	margin: 8rpx 0;
}

.item-card{
	padding: 40rpx 48rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	min-height: 252rpx;
	width: 100vw;
}

.button-submit{
    width: 596rpx;
    height: 90rpx;
    line-height: 90rpx;
    background: linear-gradient(180deg,#6fdfbe, #5ac796);
    border-radius: 46rpx;

    margin: 20rpx auto;

    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
}

.tt{
	line-height: 48rpx;
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC-Bold;
	font-weight: 700;
	text-align: left;
	color: #333333;
	
	padding-left: 14rpx;
}

.ii{
	width: 172rpx;
	height: 172rpx;
	background-color: #f4f4f4;
	border-radius: 16rpx;
	
	margin-top: 40rpx;
	position: relative;
}
.ii::after{
	content: " ";
	width: 8rpx;
	height: 50rpx;
	background-color: #dfdfdf;
	
	position: absolute;
	top: calc(172rpx / 2 - 25rpx);
	left: calc(172rpx / 2 - 4rpx);
}
.ii::before{
	content: " ";
	width: 50rpx;
	height: 8rpx;
	background-color: #dfdfdf;
	
	position: absolute;
	top: calc(172rpx / 2 - 4rpx);
	left: calc(172rpx / 2 - 25rpx);
}
</style>