|
|
@@ -0,0 +1,284 @@
|
|
|
+<template>
|
|
|
+ <view class="imgs">
|
|
|
+ <view v-if="type === '图片' || type === '视频'">
|
|
|
+ <view class="photo" v-for="(item, index) in value" :key="index" :style="{ width: size, height: size }">
|
|
|
+ <image :src="ip + item" mode="aspectFill" :style="{ width: size, height: size }" v-if="type === '图片'" @click.stop="preview(item)"></image>
|
|
|
+ <video :src="ip + item" v-if="type === '视频'" controls class="video" :style="{ width: size, height: size }"></video>
|
|
|
+ <text class="icon del" @click.stop="del(item)" v-if="!read"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <audio :src="ip + value[0]" v-if="type === '录音' && read" name="录音文件" controls></audio>
|
|
|
+ <view class="uploads" v-if="type != '录音' && value.length < 3 && !read" @click.stop="chooseImage()">
|
|
|
+ <view class="bw" v-if="type == '图片'">
|
|
|
+ <view class="icon"></view>
|
|
|
+ <view class="text">上传图片</view>
|
|
|
+ </view>
|
|
|
+ <view class="bw" v-if="type == '视频'">
|
|
|
+ <view class="icon"></view>
|
|
|
+ <view class="text">上传视频</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="type == '录音' && !read" class="audio">
|
|
|
+ <button @click="startRecord()" :disabled="stop">
|
|
|
+ <text class="icon"></text>
|
|
|
+ <text>开始</text>
|
|
|
+ </button>
|
|
|
+ <button @click="endRecord()" :disabled="!stop">
|
|
|
+ <text class="icon"></text>
|
|
|
+ <text>停止</text>
|
|
|
+ </button>
|
|
|
+ <button @click="playVoice()" :disabled="stop">
|
|
|
+ <text class="icon"></text>
|
|
|
+ <text>播放</text>
|
|
|
+ </button>
|
|
|
+ <button @click="again()">
|
|
|
+ <text class="icon"></text>
|
|
|
+ <text>重新</text>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+const recorderManager = uni.getRecorderManager();
|
|
|
+const innerAudioContext = uni.createInnerAudioContext();
|
|
|
+export default {
|
|
|
+ name: 'images',
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: Array
|
|
|
+ },
|
|
|
+ read: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ default: 'img'
|
|
|
+ },
|
|
|
+ size: {
|
|
|
+ type: String,
|
|
|
+ default: '80px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ stop: false,
|
|
|
+ ip: this.http.ip,
|
|
|
+ voicePath: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.type === '录音') {
|
|
|
+ recorderManager.onStop((res) => {
|
|
|
+ this.voicePath = res.tempFilePath;
|
|
|
+ uni.uploadFile({
|
|
|
+ url: this.ip + '/app/common/upload',
|
|
|
+ filePath: res.tempFilePath,
|
|
|
+ name: 'file',
|
|
|
+ header: { Authorization: this.getUser().token },
|
|
|
+ success: (res) => {
|
|
|
+ let data = JSON.parse(res.data);
|
|
|
+ if (data.code === 200) {
|
|
|
+ this.value.push(data.fileName);
|
|
|
+ this.$emit('input', this.value);
|
|
|
+ this.$forceUpdate();
|
|
|
+ } else {
|
|
|
+ uni.showModal({ content: data.msg, showCancel: false });
|
|
|
+ }
|
|
|
+ uni.hideLoading();
|
|
|
+ },
|
|
|
+ fail: (res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showModal({ content: '上传失败', showCancel: false });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ chooseImage() {
|
|
|
+ //照片选择
|
|
|
+ if (this.type === '图片') {
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 3, //默认9
|
|
|
+ sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
|
+ success: (res) => {
|
|
|
+ res.tempFilePaths.forEach((path) => {
|
|
|
+ uni.showLoading({ title: '正在上传图片', mask: true });
|
|
|
+ uni.uploadFile({
|
|
|
+ url: this.ip + '/app/common/upload',
|
|
|
+ filePath: path,
|
|
|
+ name: 'file',
|
|
|
+ header: { Authorization: this.getUser().token },
|
|
|
+ success: (res) => {
|
|
|
+ let data = JSON.parse(res.data);
|
|
|
+ if (data.code === 200) {
|
|
|
+ if (this.value.length < 3) {
|
|
|
+ this.value.push(data.fileName);
|
|
|
+ this.$emit('input', this.value);
|
|
|
+ this.$forceUpdate();
|
|
|
+ } else {
|
|
|
+ uni.showModal({ content: '最多只能上传5个附件', showCancel: false });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showModal({ content: data.msg, showCancel: false });
|
|
|
+ }
|
|
|
+ uni.hideLoading();
|
|
|
+ },
|
|
|
+ fail: (res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showModal({ content: '图片上传失败', showCancel: false });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (this.type === '视频') {
|
|
|
+ uni.chooseVideo({
|
|
|
+ count: 3,
|
|
|
+ sourceType: ['camera', 'album'],
|
|
|
+ maxDuration: 30,
|
|
|
+ success: (path) => {
|
|
|
+ uni.showLoading({ title: '正在上传...', mask: true });
|
|
|
+ uni.uploadFile({
|
|
|
+ url: this.ip + '/app/common/upload',
|
|
|
+ filePath: path.tempFilePath,
|
|
|
+ name: 'file',
|
|
|
+ header: { Authorization: this.getUser().token },
|
|
|
+ success: (res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ let data = JSON.parse(res.data);
|
|
|
+ if (data.code === 200) {
|
|
|
+ if (this.value.length < 3) {
|
|
|
+ this.value.push(data.fileName);
|
|
|
+ this.$emit('input', this.value);
|
|
|
+ this.$forceUpdate();
|
|
|
+ } else {
|
|
|
+ uni.showModal({ content: '最多只能上传5个附件', showCancel: false });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showModal({ content: data.msg, showCancel: false });
|
|
|
+ }
|
|
|
+ uni.hideLoading();
|
|
|
+ },
|
|
|
+ fail: (res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showModal({ content: '图片上传失败', showCancel: false });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (this.type === '录音') {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ startRecord() {
|
|
|
+ console.log('开始录音');
|
|
|
+ this.stop = true;
|
|
|
+ recorderManager.start();
|
|
|
+ },
|
|
|
+ endRecord() {
|
|
|
+ console.log('录音结束');
|
|
|
+ this.stop = false;
|
|
|
+ recorderManager.stop();
|
|
|
+ },
|
|
|
+ again() {
|
|
|
+ this.voicePath = '';
|
|
|
+ this.startRecord();
|
|
|
+ },
|
|
|
+ playVoice() {
|
|
|
+ console.log('播放录音');
|
|
|
+ if (this.voicePath) {
|
|
|
+ innerAudioContext.src = this.voicePath;
|
|
|
+ innerAudioContext.play();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ preview(item) {
|
|
|
+ let urls = [];
|
|
|
+ this.value.forEach((item) => {
|
|
|
+ urls.push(this.ip + item);
|
|
|
+ });
|
|
|
+ // 预览图片
|
|
|
+ uni.previewImage({
|
|
|
+ urls: urls,
|
|
|
+ current: this.ip + item,
|
|
|
+ success: (res) => {}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ del(item) {
|
|
|
+ this.value.splice(this.value.indexOf(item), 1);
|
|
|
+ this.$emit('input', this.value);
|
|
|
+ this.$forceUpdate();
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.imgs {
|
|
|
+ overflow: hidden;
|
|
|
+ .uploads {
|
|
|
+ float: left;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin: 5px 5px 5px 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ .bw {
|
|
|
+ padding-top: 10px;
|
|
|
+ .icon {
|
|
|
+ font-size: 30px;
|
|
|
+ display: block;
|
|
|
+ float: none;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #444444;
|
|
|
+ padding-top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .photo {
|
|
|
+ float: left;
|
|
|
+ margin: 5px 5px 5px 5px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ image {
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .video {
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .audio {
|
|
|
+ }
|
|
|
+ .del {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ right: 0px;
|
|
|
+ background-color: #00000078;
|
|
|
+ color: white;
|
|
|
+ padding: 3px 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ border-radius: 0px 0px 0px 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .audio {
|
|
|
+ background-color: #eeeeee;
|
|
|
+ border-radius: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 5px;
|
|
|
+ button {
|
|
|
+ float: left;
|
|
|
+ background-color: #eeeeee;
|
|
|
+ font-size: 14px;
|
|
|
+ .icon {
|
|
|
+ padding-right: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
lsw