|
|
@@ -0,0 +1,78 @@
|
|
|
+<template>
|
|
|
+ <view class="">
|
|
|
+ <view class="grid grid-square flex-sub margin-top-50" :class="'col-'+count">
|
|
|
+ <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="viewImage(index)">
|
|
|
+ <image :src="imgList[index]" mode="aspectFill"></image>
|
|
|
+ <view class="cu-tag bg-red" @tap.stop="delImg(index)">
|
|
|
+ <text class='cuIcon-close'></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="border" @click="uploadShopPics" v-if="imgList.length< count">
|
|
|
+ <image class="icon" src="@/static/icon/camera.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ count: {
|
|
|
+ type: Number,
|
|
|
+ default: 4
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imgList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async uploadShopPics() {
|
|
|
+ let resp = await this.$mpi.chooseImage()
|
|
|
+ let res=await this.$api.uploadFile(resp[0])
|
|
|
+ this.imgList.push(res.data.link)
|
|
|
+ this.$emit('click',this.imgList)
|
|
|
+ },
|
|
|
+ viewImage(index) {
|
|
|
+ uni.previewImage({
|
|
|
+ urls: this.imgList,
|
|
|
+ current: index
|
|
|
+ });
|
|
|
+ },
|
|
|
+ delImg(index) {
|
|
|
+ let _this = this
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定删除',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ _this.imgList.splice(index, 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .border {
|
|
|
+ border: 4rpx dashed #e1e1e1;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ top: 0;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+</style>
|
