|
|
@@ -0,0 +1,168 @@
|
|
|
+<template>
|
|
|
+ <view class="image-upload-container">
|
|
|
+ <view class="upload-list">
|
|
|
+ <view class="upload-item" v-for="(item, index) in value" :key="index">
|
|
|
+ <u-image :src="item" width="160rpx" height="160rpx" border-radius="8"
|
|
|
+ @click="onPreview(index)"></u-image>
|
|
|
+ <view class="delete-btn" @click.stop="onDelete(index)">
|
|
|
+ <u-icon name="close" color="#ffffff" size="20"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="upload-btn" v-if="value.length < maxCount" @click="onChoose" :style="{ backgroundColor: bgColor }">
|
|
|
+ <u-icon name="camera" size="48" color="#909399"></u-icon>
|
|
|
+ <text class="btn-text">图片/视频</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="upload-tip">
|
|
|
+ <u-icon name="info-circle" size="24" color="#909399"></u-icon>
|
|
|
+ <text class="tip-text">上传“有效截图”可以让问题优先被发现哦！</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'ImageUpload',
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ maxCount: {
|
|
|
+ type: Number,
|
|
|
+ default: 9
|
|
|
+ },
|
|
|
+ bgColor: {
|
|
|
+ type: String,
|
|
|
+ default: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onChoose() {
|
|
|
+ uni.chooseImage({
|
|
|
+ count: this.maxCount - this.value.length,
|
|
|
+ success: async (res) => {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '上传中...'
|
|
|
+ });
|
|
|
+ const tempFilePaths = res.tempFilePaths;
|
|
|
+ const uploadPromises = tempFilePaths.map(path => {
|
|
|
+ return this.uploadFeedbackFileAjax(path);
|
|
|
+ });
|
|
|
+
|
|
|
+ try {
|
|
|
+ const results = await Promise.all(uploadPromises);
|
|
|
+ const newList = [...this.value, ...results];
|
|
|
+ this.$emit('input', newList);
|
|
|
+ uni.hideLoading();
|
|
|
+ } catch (e) {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: '上传失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ console.error(e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ uploadFeedbackFileAjax: (filePath) => {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ uni.uploadFile({
|
|
|
+ url: uni.$u.http.config.baseUrl + '/token/shop/feedback/fileUpload',
|
|
|
+ filePath: filePath,
|
|
|
+ name: 'file',
|
|
|
+ header: {
|
|
|
+ 'Authorization': uni.getStorageSync('token') || '',
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ const data = JSON.parse(res.data);
|
|
|
+ if (data.code == 200) {
|
|
|
+ resolve(data.data);
|
|
|
+ } else {
|
|
|
+ reject(data.msg);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ reject(err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ onDelete(index) {
|
|
|
+ const newList = [...this.value];
|
|
|
+ newList.splice(index, 1);
|
|
|
+ this.$emit('input', newList);
|
|
|
+ },
|
|
|
+ onPreview(index) {
|
|
|
+ uni.previewImage({
|
|
|
+ urls: this.value,
|
|
|
+ current: index
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .image-upload-container {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: 0 -10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-item,
|
|
|
+ .upload-btn {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ margin: 10rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-btn {
|
|
|
+ background-color: #f4f5f6;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .btn-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #909399;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ border-bottom-left-radius: 8rpx;
|
|
|
+ border-top-right-radius: 8rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-tip {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .tip-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #909399;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
