新增图片选择组件

src/components/lanju/lj-choose-img/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <view class="photoList">
+    <view class="itemBox photoBox" v-for="(img, index) in localValue" :key="index">
+      <view class="closeBtn" @click="deleteImg(index)">
+        <image class="img" src="../../../static/images/iconCloseGray.svg" mode="scaleToFill"></image>
+      </view>
+      <image class="img" :src="img" mode="aspectFit" @click="showScreenImg(index)"></image>
+    </view>
+    <view class="itemBox chooseBtn" @click="chooseImg">
+      <view class="inner">
+        <image class="img" src="../../../static/images/upload-pic-icon.svg" mode="scaleToFill"></image>
+        <text class="desc">添加照片</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script  lang="ts">
+
+import {session} from "@/store/modules/session";
+import {url} from "@/utils/url";
+
+export default {
+  name:"ljChooseImg",
+  props: {
+    imgList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+  },
+  data(){
+    return{
+      localValue:this.imgList
+    }
+  },
+  methods:{
+    deleteImg(index : any){
+      this.localValue.splice(index, 1);
+    },
+    chooseImg(){
+      uni.chooseImage({
+        count: 9,
+        sourceType: ['album', 'camera'],
+        success: (res) => {
+          let tempFilePaths: any = res.tempFilePaths;
+          tempFilePaths.map((item) => {
+            uni.uploadFile({
+              url: "http://192.168.202.34:30000/prod-api/file/upload",
+              fileType: 'image',
+              filePath: item,
+              header: {
+                Authorization: 'Bearer ' + session.user?.access_token,
+              },
+              name: 'file',
+              success: (res) => {
+                uni.hideLoading();
+                if (!res.data) {
+                  return;
+                }
+                let data = JSON.parse(res.data);
+                this.localValue = [...this.localValue, data.data.url];
+                uni.hideLoading();
+              },
+              fail: (err) => {
+                console.log(err);
+                uni.showToast({
+                  title:"图片上传失败！",
+                  icon:"none"
+                })
+                uni.hideLoading();
+              },
+            });
+          });
+        },
+      });
+    },
+    showScreenImg(index : any){
+      uni.previewImage({
+        current: index,
+        urls: this.localValue,
+        loop: true
+      });
+    }
+
+  },
+  watch: {
+    localValue(newVal) {
+      this.$emit('update:imgList', newVal);
+    }
+  }
+
+}
+
+
+</script>
+
+<style scoped lang="scss">
+
+.photoList {
+  display: flex;
+  flex-wrap: wrap;
+  padding-top: 12rpx;
+
+  .chooseBtn {
+    width: 202rpx;
+    height: 202rpx;
+    background: #fafafa;
+    border-radius: 12rpx;
+    border: 2rpx dashed #e2e2e2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .inner {
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .desc {
+      font-size: 28rpx;
+      font-weight: 400;
+      color: #24252a;
+      line-height: 40rpx;
+    }
+
+    .img {
+      width: 50rpx;
+      height: 50rpx;
+      margin-bottom: 6rpx;
+    }
+  }
+
+  .photoBox {
+    width: 202rpx;
+    height: 202rpx;
+    background: #fafafa;
+    border-radius: 12rpx;
+    position: relative;
+
+    .closeBtn {
+      position: absolute;
+      top: -12rpx;
+      right: -12rpx;
+      z-index: 2;
+      width: 36rpx;
+      height: 36rpx;
+
+      .img {
+        width: 36rpx;
+        height: 36rpx;
+      }
+    }
+
+    .img {
+      width: 202rpx;
+      height: 202rpx;
+      border-radius: 12rpx;
+    }
+  }
+
+  .itemBox {
+    flex: 0 0 202rpx;
+    margin-right: 10rpx;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>