初始化

pages/shop/upload.vue

@@ -0,0 +1,187 @@
+<template>
+	<view class="index">
+		<view class="title_text">
+			上传图片
+		</view>
+		<view class="onecontent">
+			<u-scroll-list :indicator="false">
+				<view v-for="(item, index) in list" :key="index" class="onecontentscroll">
+					<view class="onecontentscroll_item">
+						<image class="onecontentscroll_itemimage" :src="item"></image>
+						<view class="onecontentscrollicon" @click="remove(index)">
+							<u-icon name="close-circle-fill" color="#333" size="20"></u-icon>
+						</view>
+					</view>
+				</view>
+				<view class="onecontentscrolllang" v-if="list.length<25" @click="add(1)">
+					<view class="onecontentscroll_item flex-colum">
+						<u-icon name="plus" color="#333" size="20"></u-icon>
+					</view>
+				</view>
+			</u-scroll-list>
+		</view>
+		<view class="title_text">
+			上传首页背景
+		</view>
+		<view class="onecontent" style="padding-top: 20rpx;">
+			<view class="onecontentscrolls flex-colum">
+				<image class="onecontentscrollsimage" @click="add(2)" v-if="background" :src="background" mode="">
+				</image>
+				<u-icon name="plus" v-else color="#333" size="20"></u-icon>
+
+			</view>
+			<view class="onecontentone" @click="useruploadalbum">
+				保存
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+	import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
+	export default {
+		data() {
+			return {
+				background: "https://cdn.uviewui.com/uview/goods/1.jpg",
+				list: ["https://cdn.uviewui.com/uview/goods/1.jpg", "https://cdn.uviewui.com/uview/goods/2.jpg"]
+			}
+		},
+		async onLoad() {
+			let res = await this.api.useralbumview()
+			this.background = res.data.background
+			this.list = res.data.album
+		},
+		onShow() {},
+		methods: {
+			remove(e) {
+				this.list.splice(e, 1)
+			},
+			add(elang) {
+				// 上传
+				uni.showLoading({
+					title: '上传中',
+					mask: true
+				})
+				uni.chooseImage({
+					count: 1, //默认9
+					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album'], //从相册选择
+					success: (res) => {
+						let file = res.tempFilePaths[0];
+						uploadImage(file, 'wechat/upload/',
+							result => {
+								if (elang == 1) {
+									this.list.push(result)
+								} else {
+									this.background = result
+								}
+								uni.hideLoading()
+							}, result => {
+								uni.hideLoading()
+							})
+					},
+					fail: (res) => {
+						uni.hideLoading()
+					}
+				});
+			},
+			async useruploadalbum(e) { //上传相册
+			console.log( this.list)
+				let res = await this.api.useruploadalbum({
+					album: this.list,
+					background: this.background
+				});
+				console.log(res)
+				if (res.code == 1) {
+					uni.showToast({
+						title: '保存成功',
+						icon: 'none'
+					});
+					setTimeout(() => {
+						uni.navigateBack()
+					}, 1000);
+				}
+			},
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background: #F6F6F6;
+	}
+
+	.index {
+		.title_text {
+			padding: 12rpx 40rpx;
+			font-size: 28rpx;
+			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
+			font-weight: 400;
+			color: #666666;
+		}
+
+		.onecontent {
+			background: #ffffff;
+			padding-bottom: 20rpx;
+
+			.onecontentscrolls {
+				width: 564rpx;
+				height: 190rpx;
+				margin: 0 auto;
+				border-radius: 10rpx;
+				background: #f5f5f5;
+
+				.onecontentscrollsimage {
+					width: 564rpx;
+					height: 190rpx;
+				}
+			}
+
+			.onecontentone {
+				width: 694rpx;
+				text-align: center;
+				margin: 20rpx auto;
+				background: #6699FF;
+				border-radius: 16rpx;
+				padding: 18rpx 0;
+				font-size: 32rpx;
+				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
+				font-weight: 400;
+				color: #FFFFFF;
+			}
+
+			.onecontentscrolllang {
+				padding: 50rpx 20rpx;
+
+				.onecontentscroll_item {
+					background: #f5f5f5;
+					border-radius: 10rpx;
+					width: 140rpx;
+					height: 140rpx;
+				}
+			}
+
+			.onecontentscroll {
+				padding: 50rpx 20rpx;
+
+				.onecontentscroll_item {
+					position: relative;
+
+					.onecontentscroll_itemimage {
+						border-radius: 10rpx;
+						width: 140rpx;
+						height: 140rpx;
+					}
+
+					.onecontentscrollicon {
+						position: absolute;
+						top: -10rpx;
+						right: -10rpx;
+
+					}
+				}
+
+			}
+		}
+	}
+</style>