187 lines
4.1 KiB
Vue
187 lines
4.1 KiB
Vue
<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> |