图片和来电音频

components/IncidentAttachment.vue

@@ -0,0 +1,185 @@
+<template>
+  <view class="container" @touchstart.stop>
+    <view class="container_head">
+      {{incidentData.reqAttachment ? '报修图片' : ''}}{{incidentData.reqAttachment && incidentData.callID ? '及' : ''}}{{incidentData.callID ? '录音' : ''}}
+    </view>
+    <view class="container_form">
+      <view class="repairImgList" v-if="incidentData.reqAttachment">
+        <image class="repairImg" :src="img.previewUrl" mode="aspectFill" v-for="(img, i) in pageData.repairImgList" :key="i" @click="previewImg(i)"></image>
+      </view>
+      <view class="audio" v-if="incidentData.callID">
+        <!-- <sy-audio isCountDown src='https://m801.music.126.net/20240418145806/654da83af722660e0fd769b4751127f0/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/22271469539/935c/9115/d211/9dba43d41e350fbea95efe39cf5d7e07.m4a' audioTitle="" subheading=""></sy-audio> -->
+        <sy-audio ref="audio" isCountDown :src='pageData.audioSrc' audioTitle="" subheading=""></sy-audio>
+      </view>
+    </view>
+    <view class="container_foot">
+      <view class="foot_btns">
+        <view class="know" @click="know">知道了</view>
+      </view>
+    </view>
+  </view>
+  <view class="mask" @touchstart.stop></view>
+</template>
+
+<script setup>
+  import { defineEmits, ref, reactive, defineProps } from 'vue'
+  import { onLoad } from '@dcloudio/uni-app'
+  import { useLoginUserStore } from '@/stores/loginUser'
+  import { api_wechatRequesterIncident, api_callrecord } from "@/http/api.js"
+  
+  const emit = defineEmits(['cancelEmit', 'knowEmit']);
+  const { incidentData } = defineProps({
+    incidentData: Object,
+  });
+  const loginUserStore = useLoginUserStore();
+  
+  // 页面数据
+  const pageData = reactive({
+    repairImgList: [],//报修图片
+    audioSrc: '',//音频
+  });
+  
+  const audio = ref(null);
+  
+  // 取消
+  function cancel(){
+    emit('cancelEmit')
+  }
+  
+  // 确认
+  function know(){
+    audio.value.audioDestroy()
+    emit('knowEmit');
+  }
+  
+  // 预览图片
+  function previewImg(index){
+    uni.previewImage({
+      current: index,
+      urls: pageData.repairImgList.map(v => v.previewUrl),
+      longPressActions: {
+        itemList: ['发送给朋友', '保存图片', '收藏'],
+        success: function(data) {
+          console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
+        },
+        fail: function(err) {
+          console.log(err.errMsg);
+        }
+      }
+    });
+  }
+  
+  // 获取报修图片
+  function getRepairImgs() {
+    uni.showLoading({
+      title: "加载中",
+      mask: true,
+    });
+    api_wechatRequesterIncident(incidentData.id).then((res) => {
+        uni.hideLoading();
+        res.data = res.data || [];
+        res.data.forEach(v => {
+          v.previewUrl = location.origin + "/file" + v.relativeFilePath;
+        })
+        pageData.repairImgList = res.data;
+      });
+  }
+  
+  // 获取通话音频
+  function getCallrecord() {
+    uni.showLoading({
+      title: "加载中",
+      mask: true,
+    });
+    let postData = {
+      idx: 0,
+      sum: 1,
+      callrecord: {callAccept: incidentData.callID},
+    };
+    api_callrecord(postData).then((res) => {
+        uni.hideLoading();
+        if(res.status == 200){
+          res.list = res.list || [];
+          if(res.list.length){
+            pageData.audioSrc = location.protocol + "//" + location.hostname + res.list[0].recordingFileName;
+          }else{
+            pageData.audioSrc = '';
+          }
+          pageData.audioSrc = 'https://webfs.tx.kugou.com/202404181537/6389dd96e215021020c845b8cbe26e24/v2/eb95a90ba7c513810d694d548b924a29/G347/M01/D0/C3/O5UEAGUDY0aAC4eQADXnW-VR_t4017.mp3'
+        }else{
+          uni.showToast({
+            icon: 'none',
+            title: res.msg || '请求数据失败！'
+          });
+        }
+      });
+  }
+  
+  onLoad((option) => {
+    incidentData.reqAttachment && getRepairImgs();
+    incidentData.callID && getCallrecord();
+  })
+</script>
+
+<style lang="scss" scoped>
+.mask{
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 999;
+}
+.container{
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  width: 690rpx;
+  background-color: #fff;
+  border-radius: 10rpx;
+  
+  .container_head{
+    padding: 55rpx;
+    font-size: 32rpx;
+    color: #333;
+    text-align: center;
+  }
+  
+  .container_form{
+    padding: 0 55rpx;
+    .repairImgList{
+      margin-bottom: 55rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 15rpx;
+      .repairImg{
+        width: 184rpx;
+        height: 186rpx;
+      }
+    }
+    
+    .audio{
+      margin-bottom: 45rpx;
+    }
+  }
+  
+  .container_foot{
+    .foot_btns{
+      display: flex;
+      border-top: 1rpx solid #DDDDDD;
+      .know{
+        flex: 1;
+        font-size: 32rpx;
+        padding: 30rpx;
+        display: flex;
+        justify-content: center;
+        color: $uni-primary;
+      }
+    }
+  }
+}
+</style>

components/IncidentListFilter.vue

@@ -225,7 +225,7 @@
     }
   }
   
-  onLoad(async (option) => {
+  onLoad((option) => {
     searchData.hospital = evt.hospital;
     searchData.selected = evt.selected;
     searchData.area = evt.area;

http/api.js

@@ -24,7 +24,7 @@ export function api_bindAccount(data){
 /**
  * 获取系统名称
  */
-export function api_getSysNameAndLogo(data){
+export function api_getSysNameAndLogo(){
   return get("/auth/getSysNameAndLogo");
 }
 
@@ -61,4 +61,18 @@ export function api_area(data){
  */
 export function api_incidentcategory(data){
   return post("/bpm/data/fetchDataList/incidentcategory", data);
+}
+
+/**
+ * 获取报修图片列表
+ */
+export function api_wechatRequesterIncident(data){
+  return get("/common/common/listAttachment/wechatRequesterIncident/" + data);
+}
+
+/**
+ * 获取通话音频
+ */
+export function api_callrecord(data){
+  return post("/bpm/data/fetchDataList/callrecord", data);
 }

pages/incidentList/incidentList.vue

@@ -25,18 +25,12 @@
           <view class="body_item_content_p" v-if="data.currentLog && data.currentLog.extra1DTO && data.currentLog.extra2 && data.currentLog.startTime">
             <text class="name ellipsis">延期处理：{{currentLogOverTime(data.currentLog)}}</text>
           </view>
-          <view class="body_item_content_p" v-if="data.assigneeName">
-            <text class="name">处理人：{{data.assigneeName}}</text>
-            <view class="icon_all">
-              <uni-icons type="mic-filled" class="mic-filled" :size="22" color="#949494"></uni-icons>
-              <uni-icons type="image-filled" class="image-filled" :size="22" color="#949494"></uni-icons>
-            </view>
-          </view>
-          <view class="body_item_content_p" v-if="data.candidateGroupsName">
-            <text class="name">处理组：{{data.candidateGroupsName}}</text>
-            <view class="icon_all">
-              <uni-icons type="mic-filled" class="mic-filled" :size="22" color="#949494"></uni-icons>
-              <uni-icons type="image-filled" class="image-filled" :size="22" color="#949494"></uni-icons>
+          <view class="body_item_content_p">
+            <text class="name"><template v-if="data.assigneeName">处理人：{{data.assigneeName}}</template></text>
+            <text class="name"><template v-if="data.candidateGroupsName">处理组：{{data.candidateGroupsName}}</template></text>
+            <view class="icon_all" @click="attachmentClick(data)">
+              <uni-icons type="mic-filled" class="mic-filled" :size="22" color="#949494" v-if="data.callID"></uni-icons>
+              <uni-icons type="image-filled" class="image-filled" :size="22" color="#949494" v-if="data.reqAttachment"></uni-icons>
             </view>
           </view>
         </view>
@@ -58,11 +52,13 @@
       <text class="newicon newicon-zanwu"></text>
     </view>
   </view>
-  <incidentListFilter v-if="dataInfo.isFilter" @cancelEmit="cancelFilter" @confirmEmit="conformFilter" :evt="dataInfo.evt"></incidentListFilter>
+  <incidentListFilter v-if="dataInfo.isFilter" @cancelEmit="cancelFilter" @confirmEmit="conformFilter" :evt="dataInfo.evtFilter"></incidentListFilter>
+  <IncidentAttachment v-if="dataInfo.isAttachment" @knowEmit="knowAttachment" :incidentData="dataInfo.incidentData"></IncidentAttachment>
 </template>
 
 <script setup>
   import IncidentListFilter from '@/components/IncidentListFilter.vue';
+  import IncidentAttachment from '@/components/IncidentAttachment.vue';
   import { ref, reactive } from 'vue'
   import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
   import { api_getDictionary, api_incident, api_incident_count } from "@/http/api.js"
@@ -94,7 +90,9 @@
     idx: 0,//页码
     hasMore: true,//是否有更多数据
     isFilter: false,//筛选框开关
-    evt: {
+    isAttachment: false,//图片和录音开关
+    incidentId: undefined,
+    evtFilter: {
       hospital: {},
       selected: 'todoingAll',
       area: {id: 0, area: '全部'},
@@ -135,9 +133,8 @@
   }
   
   // 确认筛选
-  function conformFilter(evt){
-    console.log(evt)
-    dataInfo.evt = evt;
+  function conformFilter(evtFilter){
+    dataInfo.evtFilter = evtFilter;
     dataInfo.isFilter = false;
     getList(0);
   }
@@ -147,6 +144,17 @@
     dataInfo.isFilter = false;
   }
   
+  // 点击图片和录音
+  function attachmentClick(incidentData){
+    dataInfo.incidentData = incidentData;
+    dataInfo.isAttachment = true;
+  }
+  
+  // 知道了图片和录音
+  function knowAttachment(){
+    dataInfo.isAttachment = false;
+  }
+  
   // 处理按钮
   function handler(type){
     uni.navigateTo({
@@ -156,19 +164,19 @@
   
   // 获取列表信息
   function getList(idx){
-    dataInfo.idx = idx === undefined ? dataInfo.idx : idx;
-    if(dataInfo.idx === 0){
-      dataInfo.list = [];
-    }
     uni.showLoading({
       title: "加载中",
       mask: true,
     });
+    dataInfo.idx = idx === undefined ? dataInfo.idx : idx;
+    if(dataInfo.idx === 0){
+      dataInfo.list = [];
+    }
     let postData = {
         "idx": dataInfo.idx,
         "sum": 10,
         "incident": {
-            "queryTask": dataInfo.evt.selected || undefined,
+            "queryTask": dataInfo.evtFilter.selected || undefined,
             "assignee": loginUserStore.loginUser.user.id,
             "statusId": dataInfo.tabActiveId || undefined,
         }
@@ -182,11 +190,11 @@
       postData.incident.branch = loginUserStore.loginUser.user.branch.id;
     }
     
-    if(dataInfo.evt && dataInfo.evt.category && dataInfo.evt.category.id){
-      postData.incident.levelCategory = dataInfo.evt.category;
+    if(dataInfo.evtFilter && dataInfo.evtFilter.category && dataInfo.evtFilter.category.id){
+      postData.incident.levelCategory = dataInfo.evtFilter.category;
     }
-    if(dataInfo.evt && dataInfo.evt.area && dataInfo.evt.area.id){
-      postData.incident.area = dataInfo.evt.area;
+    if(dataInfo.evtFilter && dataInfo.evtFilter.area && dataInfo.evtFilter.area.id){
+      postData.incident.area = dataInfo.evtFilter.area;
     }
     
     api_incident(postData).then(res => {
@@ -194,6 +202,7 @@
       uni.stopPullDownRefresh();
       if(res.status == 200){
         let list = res.list || [];
+        list = list.map(v => ({...v, ...{reqAttachment: true, callID:123}}))//模拟
         if(list.length){
           dataInfo.hasMore = true;
           dataInfo.list = dataInfo.idx === 0 ? list : dataInfo.list.concat(list);
@@ -248,13 +257,13 @@
             delete incident.candidateGroups;
         }
         
-        if(dataInfo.evt && dataInfo.evt.category && dataInfo.evt.category.id){
-          incident.levelCategory = dataInfo.evt.category;
+        if(dataInfo.evtFilter && dataInfo.evtFilter.category && dataInfo.evtFilter.category.id){
+          incident.levelCategory = dataInfo.evtFilter.category;
         }
         
-        if(dataInfo.evt && dataInfo.evt.area && dataInfo.evt.area.id){
+        if(dataInfo.evtFilter && dataInfo.evtFilter.area && dataInfo.evtFilter.area.id){
           incident.place = {
-            area: dataInfo.evt.area
+            area: dataInfo.evtFilter.area
           }
         }
     })

static/scss/common.scss

@@ -5,8 +5,9 @@ page{
   height: calc(100vh - 50px);
 }
 
-uni-toast{
-  z-index: 99999;
+uni-toast,
+[longpressactions]{
+  z-index: 99999!important;
 }
 
 .page_padding{

uni_modules/sy-audio/changelog.md

@@ -0,0 +1,7 @@
+## 1.0.6（2024-04-03）
+修复音频文件为服务器地址时不播放的问题
+## 1.0.5（2023-04-27）
+1.修复VUE3已知的问题
+2.新增change事件
+## 1.0.4（2023-04-10）
+修复vue3时已知的问题

uni_modules/sy-audio/components/sy-audio/sy-audio.vue

@@ -0,0 +1,311 @@
+<template>
+	<view class="audio_center">
+		<view class="audio_center_cover">
+			<image v-if="audioCover" class="audio_center_cover_img" mode="aspectFill" :src="audioCover"></image>
+			<view class="iconfont" @tap="clickAudio" :class="audio_status ?'icon-play-stop':'icon-play-cell'"></view>
+		</view>
+		<view class="audio_center_right">
+			<view v-if="stringObject(src) == 'string'" class="single">
+				<view class="single_title">
+					<view class="single_title_info" :style="{color:audioTitleColor}">{{audioTitle}}</view>
+					<view class="tips">{{timeTxt}}</view>
+				</view>
+				<view class="tips">{{subheading}}</view>
+				<slider :backgroundColor='backgroundColor' :activeColor='activeColor' @change="sliderChange"
+					:value="sliderIndex" :max="maxSliderIndex" :block-size='0' />
+			</view>
+			<view v-else>相关功能正在开发中~</view>
+		</view>
+	</view>
+</template>
+<script>
+	let timer;
+	export default {
+		name: 'syAudio',
+		emits: ['audioPlay', 'audioPause', 'audioEnd', 'audioCanplay', 'change'],
+		data() {
+			return {
+				audio_status: false,
+
+				timeTxt: '00 : 00',
+				timeIndex: 0,
+
+				sliderIndex: 0,
+				maxSliderIndex: 100,
+
+				stringObject: (data) => {
+					return typeof(data)
+				},
+				innerAudioContext: uni.createInnerAudioContext()
+			}
+		},
+		props: {
+			//是否自动播放(只支持微信内置浏览器,小程序，app)
+			autoplay: {
+				type: Boolean,
+				default: false
+			},
+			//音频地址
+			src: {
+				type: [String, Array],
+				default: ''
+			},
+			//是否倒计时
+			isCountDown: {
+				type: Boolean,
+				default: false
+			},
+			//音乐封面
+			audioCover: {
+				type: String,
+				default: ''
+			},
+			//标题
+			audioTitle: {
+				type: String,
+				default: 'new Audio Title'
+			},
+			//标题颜色
+			audioTitleColor: {
+				type: String,
+				default: '#333'
+			},
+			//副标题
+			subheading: {
+				type: String,
+				default: 'new Audio Subheading'
+			},
+			//滑块左侧已选择部分的线条颜色
+			activeColor: {
+				type: String,
+				default: '#bf41a2'
+			},
+			//滑块右侧背景条的颜色
+			backgroundColor: {
+				type: String,
+				default: '#f1c38b'
+			}
+		},
+		watch: {
+			src: {
+				handler: function(newVal, oldVal) {
+					this.innerAudioContext.src = typeof(newVal) == 'string' ? newVal : newVal;
+				},
+				deep: true
+			}
+		},
+		async mounted() {
+			this.innerAudioContext.src = typeof(this.src) == 'string' ? this.src : this.src[0];
+      this.countDown();
+
+			if (this.autoplay) {
+				if (!this.src) return console.error('src cannot be empty，The target value is string or array')
+
+				// #ifdef H5
+				var ua = window.navigator.userAgent.toLowerCase();
+				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
+					const jweixin = require('../../utils/jweixin');
+
+					jweixin.config({});
+					jweixin.ready(() => {
+						WeixinJSBridge.invoke('getNetworkType', {}, (e) => {
+							this.innerAudioContext.play();
+							this.countDown()
+						})
+					})
+				}
+				// #endif
+
+				// #ifndef H5
+				this.innerAudioContext.autoplay = true;
+				// #endif
+			}
+
+			this.innerAudioContext.onPlay(() => {
+				this.audio_status = true;
+				this.$emit('audioPlay')
+				setTimeout(() => {
+					this.maxSliderIndex = parseFloat(this.innerAudioContext.duration).toFixed(2);
+					this.countDown();
+				}, 100)
+			});
+
+			this.innerAudioContext.onPause(() => {
+				this.$emit('audioPause');
+			});
+
+			this.innerAudioContext.onEnded(() => {
+				this.audio_status = !this.audio_status;
+				this.$emit('audioEnd');
+			});
+
+			this.innerAudioContext.onCanplay((event) => {
+				this.$emit('audioCanplay');
+				// #ifdef MP
+				this.maxSliderIndex = parseFloat(this.innerAudioContext.duration).toFixed(2);
+				// #endif
+			});
+
+			this.innerAudioContext.onPlay(() => {
+				this.$emit('change', {
+					state: true
+				});
+			});
+
+			this.innerAudioContext.onPause(() => {
+				this.$emit('change', {
+					state: false
+				});
+			});
+		},
+		methods: {
+			//销毁innerAudioContext()实例
+			audioDestroy() {
+				if (this.innerAudioContext) {
+					this.innerAudioContext.destroy();
+					this.audio_status = false;
+				}
+			},
+			//跳转到指定位置
+			audioSeek(value) {
+				this.sliderChange(value)
+			},
+			//控制音乐播放/暂停
+			audioPause() {
+				this.clickAudio()
+			},
+			countDown() {
+				timer = setInterval(() => {
+					this.sliderIndex = parseFloat(this.innerAudioContext.currentTime).toFixed(2);
+
+					this.timeTxt = this.getTime(this.isCountDown ? this.innerAudioContext.duration - this
+						.innerAudioContext
+						.currentTime : this.innerAudioContext.currentTime);
+					this.timeTxt = this.isCountDown ? '- ' + this.timeTxt : this.timeTxt;
+
+					if (this.innerAudioContext.currentTime >= this.innerAudioContext.duration) {
+						clearInterval(timer);
+					}
+				}, 100)
+			},
+			clickAudio() {
+
+				if (this.audio_status && !this.innerAudioContext.paused) {
+					this.innerAudioContext.pause();
+					clearInterval(timer);
+				} else {
+					this.innerAudioContext.play();
+				}
+
+				this.audio_status = !this.audio_status;
+			},
+			getTime(time) {
+				let m = parseInt(time / 60 % 60)
+				m = m < 10 ? '0' + m : m
+				let s = parseInt(time % 60)
+				s = s < 10 ? '0' + s : s
+				return m + ' : ' + s
+			},
+			sliderChange(e) {
+				this.innerAudioContext.seek(e.detail ? e.detail.value : e);
+				this.sliderIndex = e.detail ? e.detail.value : e;
+			}
+		},
+		onUnload() {
+			this.audioDestroy()
+		},
+		onHide() {
+			this.audioDestroy()
+		},
+		beforeDestroy() {
+			this.audioDestroy()
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import url('../../static/font/iconfont.css');
+
+	::v-deep uni-slider,
+	::v-deep slider {
+		margin: 0;
+		overflow: hidden;
+		padding: 0;
+	}
+
+	.audio_center {
+		display: flex;
+		box-shadow: 0 0 10rpx #c3c3c3;
+		border-radius: 10rpx;
+		overflow: hidden;
+		align-items: stretch;
+
+		.single {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			padding: 16rpx 24rpx 10rpx 0;
+
+			.tips {
+				font-size: 22rpx;
+				color: #919191;
+				flex-shrink: 0;
+			}
+
+			&_title {
+				&_info {
+					font-size: 28rpx;
+					overflow: hidden;
+					display: -webkit-box;
+					-webkit-line-clamp: 1;
+					-webkit-box-orient: vertical;
+					margin-right: 20rpx;
+				}
+
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-end;
+			}
+		}
+
+		&_cover {
+			flex-shrink: 0;
+			background: #f5f5f5;
+			position: relative;
+			display: flex;
+			align-items: stretch;
+			width: 127rpx;
+
+			.iconfont {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				margin: auto;
+				z-index: 9;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 64rpx;
+				background: rgba(0, 0, 0, .25);
+				color: #fff;
+			}
+
+			&_img {
+				width: 127rpx;
+				height: 100%;
+				border-radius: 10rpx 0 0 10rpx;
+			}
+
+			margin-right:30rpx;
+		}
+
+		&_right {
+			display: flex;
+			align-items: stretch;
+			flex: 1;
+		}
+	}
+</style>

uni_modules/sy-audio/package.json

@@ -0,0 +1,85 @@
+{
+  "id": "sy-audio",
+  "displayName": "sy-audio",
+  "version": "1.0.6",
+  "description": "sy-audio基于uni.createInnerAudioContext()方法搭建，并支持全端环境；",
+  "keywords": [
+    "audio",
+    "播放器",
+    "createInnerAudio",
+    "音乐播放器",
+    "音频倍速播放"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.6.13"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y",
+          "钉钉": "y",
+          "快手": "y",
+          "飞书": "y",
+          "京东": "y"
+        },
+        "快应用": {
+          "华为": "y",
+          "联盟": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/sy-audio/readme.md

@@ -0,0 +1,62 @@
+
+
+欢迎使用 sy-audio 在线音乐播放器
+
+## props (组件属性)
+
+  属性  | 类型 | 默认值 | 备注
+------------- | ------------- | ---------
+autoplay  |Boolean| false | 是否自动播放(只支持微信内置浏览器,小程序，app)
+src  |String| '' | 音频地址
+isCountDown  |Boolean| false |是否倒计时
+audioCover  |String| '' | 音乐封面
+audioTitle  |String| new Audio Title | 标题
+audioTitleColor  |String| #333 | 标题颜色
+subheading  |String| new Audio Subheading | 副标题
+activeColor  |String| #bf41a2 | 滑块左侧已选择部分的线条颜色
+backgroundColor  |String| #f1c38b | 滑块右侧背景条的颜色
+
+
+## 组件事件
+
+  事件  | 事件内容
+------------- | -------------
+@audioPlay | 音频播放事件
+@audioPause | 音频暂停事件
+@audioEnd | 音频自然播放结束事件
+@change | 音频播放状态监听（返回true/false）
+@audioCanplay | 音频进入可以播放状态，但不保证后面可以流畅播放
+
+## ref 事件
+  事件  | 事件内容
+------------- | -------------
+audioPause() | 控制音乐播放/暂停
+audioSeek() | 跳转到指定位置
+audioDestroy() | 销毁innerAudioContext()实例
+
+```html
+<sy-audio isCountDown ref="audio" src='' audioCover='' subheading='' audioTitle=''></sy-audio>
+
+//项目为vue2时 调用跳转到音乐15s位置方法，如下:
+this.$refs.audio.audioSeek(15)
+
+//项目为vue3时 请通过value形式调用子组件方法
+```
+
+#### View代码
+```html
+<sy-audio isCountDown ref="audio" src='' audioCover='' subheading='' audioTitle=''></sy-audio>
+
+//项目为vue2时 src为本地路径时，使用require方法，如下:
+<sy-audio :src="require('@/static/audio.mp3')"></sy-audio>
+
+//项目为vue3时 src为本地路径时，使用自定义方法，如下:
+<sy-audio :src="toUrl('../../static/audio.mp3')"></sy-audio>
+methods: {
+	toUrl(src){
+		return new URL(src, import.meta.url).href
+	}
+}
+```
+
+> sy-audio将会持续更新，欢迎大家踊跃提出宝贵建议；

uni_modules/sy-audio/static/font/iconfont.css

@@ -0,0 +1,37 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3988464 */
+  src: url('../../static/font/iconfont.ttf') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-play-stop:before {
+  content: "\e662";
+}
+
+.icon-play-stop-new:before {
+  content: "\e605";
+}
+
+.icon-play-cell-new:before {
+  content: "\ea83";
+}
+
+.icon-play-nav:before {
+  content: "\e63c";
+}
+
+.icon-play-next:before {
+  content: "\e63e";
+}
+
+.icon-play-cell:before {
+  content: "\ea82";
+}
+