新增弹窗

董国庆

3 天以前 c3c8a7bfa080808136fe2da590e760ba7cb98f9e

新增弹窗

 H5/components/voiceInputPopup.vue

New file
@@ -0,0 +1,109 @@
<template>
  <u-popup :show="show" mode="bottom" :closeOnClickOverlay="false" @close="closePopup" zIndex="10071">
    <view class="voice-popup">
      <view class="header">
        <text class="pl-30">语音输入</text>
        <image src="/static/Appeal/close.png" class="w-34 h-34 mr-30" mode="" @click="closePopup"></image>
      </view>
      <view class="record-anim">
        <image src="/static/Appeal/step.png" class="w-153 h-119" mode=""  @click="onPlay"></image>
      </view>
      <view class="timer">{{ time }}</view>
      <view class="btns">
        <image src="/static/Appeal/start.png" class="w-153 h-153 mr-14" mode=""  @click="onPlay"></image>
        <image src="/static/Appeal/stop.png" class="w-153 h-153 mr-14" mode="" @click="onPause"></image>
        <image src="/static/Appeal/cancel.png" class="w-153 h-153 mr-14" mode="" @click="onStop"></image>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      time: '00:00:00',
      barHeights: [20, 30, 40, 30, 20], // 可做动画
    }
  },
  methods: {
    closePopup() {
      this.$emit('update:show', false)
    },
    onPlay() {},
    onPause() {},
    onStop() {},
  }
}
</script>

<style scoped lang="scss">
.voice-popup {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 40rpx 0 30rpx 0;
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 80rpx;
    text {
      flex: 1;
      text-align: center;
    }
    .u-icon {
      position: absolute;
      right: 30rpx;
      top: 0;
    }
  }
  .record-anim {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 57rpx;
    .bars {
      display: flex;
      align-items: flex-end;
      height: 60rpx;
      .bar {
        width: 10rpx;
        margin: 0 4rpx;
        background: linear-gradient(180deg, #ff4948 0%, #fc8d55 100%);
        border-radius: 6rpx;
        transition: height 0.3s;
      }
    }
  }
  .timer {
    text-align: center;
    font-size: 28rpx;
    color: #888;
    // margin-bottom: 30rpx;
  }
  .btns {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 40rpx 67rpx 76rpx 67rpx;
    // .u-button {
    //   width: 100rpx;
    //   height: 100rpx;
    //   border-radius: 50%;
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    //   margin: 0 10rpx;
    // }
  }
}
</style> 

 H5/pages/Appeal/Appeal.vue

@@ -59,7 +59,29 @@
                    class="uni-input flex1" placeholder="请输入详细地址描述" />
            </view>
            <view class="mt-35">
                <view class="flex a-center j-between">
                <text class="w-108 fs-27 font-bold mr-85">问题描述</text>
                    <view class="flex a-center" @click="voiceInput">

                        <text class="fs-23 red">语音输入</text>
                    </view>
                </view>
                <view v-for="item, index in videoContent" :key="index">
                    <view class="pl-19 pr-19 pb-17 pt-17 flex j-between a-center br-8 pink">
                        <view class="flex1">
                            <text class="fs-27 font-bold">语音文件{{ index + 1 }}</text>
                        </view>
                        <view class="flex j-between a-center">
                            <image src="/static/Appeal/delete.png" class="w-27 h-27 mr-38" mode=""></image>

                            <image src="/static/Appeal/open.png" class="w-27 h-27" mode="" v-if="!item.playing"
                                @click.stop="onPlayRecording(index)"></image>
                            <image src="/static/Appeal/pause.png" class="w-27 h-27" mode="" v-else
                                @click.stop="onPausePlaying(index)"></image>
                        </view>

                    </view>
                </view>
                <view class="bg mt-27 fs-27">
                    <!-- <view class="h-94 " style="border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);">
                        <input v-model="descriptionTitle" placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;"
@@ -117,6 +139,9 @@
            @confirm="confirmone" @close="close" @cancel="cancel"></u-datetime-picker>
        <u-picker :show="showList" :columns="columns" @confirm="confirmtwo" :closeOnClickOverlay="true" @close="close"
            @cancel="cancel"></u-picker>
        <!-- 语音输入弹窗 -->
        <voiceInputPopup :show="voiceInputShow" @update:show="voiceInputShow = $event" @close="closeVoiceInput"
            @submit="submitVoiceInput" />
    </view>
</template>

@@ -127,8 +152,16 @@
        getproblem
    } from './service.js'
    import config from '@/config/index.js'
import voiceInputPopup from '@/components/voiceInputPopup.vue'
import {
        mapActions,
        mapState
    } from "vuex";

    export default {
    components: {
        voiceInputPopup
    },
        data() {
            return {
                showList: false,
@@ -145,12 +178,20 @@
                detailedAddress: '',
                descriptionTitle: '',
                descriptionContent: '',
            videoContent: [
                { url: 'xxx1', playing: false },
                { url: 'xxx2', playing: false }
            ],
                latitude: '',
                longitude: '',
                images: [],
                videos: [],
                userInfo: uni.getStorageSync('userInfo'), //个人信息
            voiceInputShow: false,
            };
    },
    computed: {
        ...mapState(["playFlag"]),
        },
        onReady() {
            uni.setNavigationBarTitle({
@@ -161,7 +202,31 @@
            this.getproblem()
            this.time = dayjs().format('YYYY-MM-DD')
        },
	
        methods: {
        ...mapActions(["playRecording", "pausePlaying"]),
        onPlayRecording(index) {
            // 先处理本地播放状态
            this.videoContent.forEach((item, i) => {
                item.playing = i === index;
            });
            // 调用store的播放方法，传url
            this.playRecording(this.videoContent[index].url);
        },
        onPausePlaying(index) {
            this.videoContent[index].playing = false;
            this.pausePlaying(this.videoContent[index].url);
        },
        voiceInput() {
            this.voiceInputShow = true;
        },
        closeVoiceInput() {
            this.voiceInputShow = false;
        },
        submitVoiceInput(e) {
            this.videoContent.push(e);
            this.voiceInputShow = false;
        },
            previewImage(index) {
                uni.previewImage({
                    urls: this.images,
@@ -387,6 +452,16 @@
        min-height: 108rpx;
    }

.red {
    color: rgba(255, 73, 72, 1);
}

.pink {
    background: #FFF1F4;
    border-radius: 8rpx;
    margin-top: 19rpx;
}

    .card {
        border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);
    }

 H5/static/Appeal/cancel.png

 H5/static/Appeal/close.png

 H5/static/Appeal/delete.png

 H5/static/Appeal/open.png

 H5/static/Appeal/pause.png

 H5/static/Appeal/start.png

 H5/static/Appeal/step.png

 H5/static/Appeal/stop.png

 H5/static/Appeal/yuyin.png

 management/config/env.ts

@@ -1,7 +1,7 @@
export default {
  dev: {
    // SERVER_URL: 'http://192.168.110.188:6194',
    SERVER_URL: 'https://huacheng.psciio.com',
    SERVER_URL: 'http://192.168.110.188:6194',
    // SERVER_URL: 'https://huacheng.psciio.com',
  },
  test: {
    SERVER_URL: '',