theluyuan/fangche
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

im ok

Browse Source
This commit is contained in:
luyuan
2021-04-07 15:18:17 +08:00
parent dfdf73fdfc
commit ab7a7cf62f
88 changed files with 2974 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/GoEasyAudioPlayer/goEasyAudioPlayer.js Normal file
View File

@@ -0,0 +1,63 @@
Component({
options: {
addGlobalClass: true,
},
properties: {
src: {
type: String,
value: ""
},
duration: {
type: Number,
value: 0
}
},
data: {
width: "",
play: false,
finalDuration: "",
audioContext: null
},
methods: {
playAudio() {
// 播放时才创建audioContext,播放完毕销毁
var self = this;
this.setData({
audioContext: wx.createInnerAudioContext()
});
this.data.audioContext.src = this.data.src;
this.switchAudioState();
setTimeout(() => {
self.switchAudioState();
self.data.audioContext.destroy();
}, self.data.finalDuration*1000);
this.data.audioContext.play();
this.data.audioContext.onPlay(()=>{
console.log("正在播放......");
});
this.data.audioContext.onError((res) => {
console.log("audio error:",res)
});
},
switchAudioState(){
this.setData({
play: !this.data.play
});
},
},
attached: function() {
// 在组件实例进入页面节点树时执行
this.setData({
width: Math.ceil(this.data.duration)*7+80,
finalDuration: Math.ceil(this.data.duration),
});
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
// 语音还在播放时退出该界面时audioContext还没有被销毁，因此调用该方法清空audioContext
if(this.data.audioContext != null){
this.data.audioContext.destroy();
}
},
})

4
components/GoEasyAudioPlayer/goEasyAudioPlayer.json Normal file
View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

7
components/GoEasyAudioPlayer/goEasyAudioPlayer.wxml Normal file
View File

@@ -0,0 +1,7 @@
<view class="goeasy-audio-player" bindtap="playAudio">
<view class="audio-facade" style="width:{{width}}rpx">
<image wx:if="{{!play}}" class="audio-facade-bg" src="/static/images/audioImage/voice.png"></image>
<image wx:else class="audio-facade-bg audio-play-icon" src="/static/images/audioImage/play.gif"></image>
<view class="record-second">{{finalDuration}}</view>
</view>
</view>

34
components/GoEasyAudioPlayer/goEasyAudioPlayer.wxss Normal file
View File

@@ -0,0 +1,34 @@
.goeasy-audio-player {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.audio-facade {
display: flex;
align-items: center;
min-width: 80rpx;
max-width: 300rpx;
height: 60rpx;
padding: 6rpx 10rpx;
border-radius: 14rpx;
line-height: 30rpx;
background: #D02129;
font-size: 24rpx;
color: #ffffff;
}
.audio-facade .audio-play-icon {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.audio-facade-bg {
width: 40rpx;
height: 35rpx;
}
.record-second {
padding-left: 14rpx;
}

49
components/GoEasyCustomMessage/customMessage.js Normal file
View File

@@ -0,0 +1,49 @@
/* customMessage.js */
Component({
data: {
to: null,//接收方
type: "", //私聊还是群聊
show: false,//是否展示自定义消息组件
goods : '',
price : '',
number : ''
},
methods:{
setNumber(e){
this.setData({
number: e.detail.value
});
},
setGoods(e){
this.setData({goods: e.detail.value});
},
setPrice(e){
this.setData({
price: e.detail.value
});
},
createCustomMessage () {
let customMessage = wx.im.createCustomMessage({
type : 'order',
payload : {
number : this.data.number,
goods : this.data.goods,
price : this.data.price
},
to: {
id : this.data.to.uuid,
type : this.data.type,
data : {name : this.data.to.name, avatar: this.data.to.avatar}
}
});
this.triggerEvent("sendCustomMessage",customMessage);
this.close();
},
close () {
this.setData({
show: false
});
}
}
})

5
components/GoEasyCustomMessage/customMessage.json Normal file
View File

@@ -0,0 +1,5 @@
{
"component": true,
"usingComponents":{},
"navigationBarTitleText": "自定义消息"
}

29
components/GoEasyCustomMessage/customMessage.wxml Normal file
View File

@@ -0,0 +1,29 @@
<view>
<view wx:if="{{show}}" class="goeasy-custom-message">
<view class="custom-message-box">
<view class="goeasy-custom-message-title">发送订单</view>
<view class="content">
<view>
<view class="order-item">编号：</view>
<view class="order-item">商品：</view>
<view class="order-item">金额：</view>
</view>
<view>
<view class="order-input">
<input class="input" type="text" bindinput="setNumber" maxlength="20"/>
</view>
<view class="order-input">
<input class="input" type="text" bindinput="setGoods" maxlength="20"/>
</view>
<view class="order-input">
<input class="input" type="text" bindinput="setPrice" maxlength="10" />
</view>
<view class="action-btn">
<view class="cancel-btn" bindtap="close">取消</view>
<view class="send-btn" bindtap="createCustomMessage">发送</view>
</view>
</view>
</view>
</view>
</view>
</view>

78
components/GoEasyCustomMessage/customMessage.wxss Normal file
View File

@@ -0,0 +1,78 @@
/* customMessage.wxss */
.goeasy-custom-message {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background: #fff;
}
.custom-message-box {
padding: 0 40rpx;
}
.goeasy-custom-message-title {
text-align: center;
font-weight: 600;
font-size: 40rpx;
line-height: 200rpx;
color: #000000;
}
.content {
display: flex;
justify-content: center;
}
.order-item {
display: flex;
align-items: center;
height: 80rpx;
margin-top: 40rpx;
}
.order-input {
height: 80rpx;
margin-top: 40rpx;
}
.input {
width: 500rpx;
height: 80rpx;
padding: 10rpx;
border-radius: 10rpx;
box-sizing: border-box;
font-size: 28rpx;
background: #EFEFEF;
}
.action-btn {
display: flex;
justify-content: space-around;
margin-top: 80rpx;
}
.send-btn {
width: 240rpx;
height: 80rpx;
background: #618DFF;
line-height: 80rpx;
text-align: center;
border-radius: 10rpx;
color: #FFFFFF;
font-size: 32rpx;
}
.cancel-btn {
width: 240rpx;
height: 80rpx;
background: #FFFFFF;
line-height: 80rpx;
text-align: center;
border-radius: 10rpx;
color: #666666;
font-size: 32rpx;
border: 1px solid rgba(0, 0, 0, 0.1)
}

67
components/GoEasyRecorder/goEasyRecorder.js Normal file
View File

@@ -0,0 +1,67 @@
const recorderManager = wx.getRecorderManager();
Component({
options: {
addGlobalClass: true, // 加载组件css文件,需在app.wxss中引入组件css文件
},
data: {
recording: false,
stopSignaled: false,
clickLongPress: false,
},
methods: {
startRecord: function() {
console.log('start');
this.setData({
clickLongPress: true
});
recorderManager.start();
},
stopRecord: function() {
console.log('end');
if (!this.data.recording && this.data.clickLongPress) {
console.log('in1', this.data.clickLongPress);
this.setData({
stopSignaled: true,
clickLongPress: false
});
} else {
this.setData({
recording: false,
});
recorderManager.stop();
}
}
},
attached() {
var self = this;
recorderManager.onStart(function() {
self.setData({
recording: true,
clickLongPress: false
});
if (self.data.stopSignaled) {
self.setData({
stopSignaled: false
});
recorderManager.stop();
}
});
recorderManager.onStop(function(res) {
self.setData({
recording: false
});
if(res.duration < 100) {
return;
}
self.triggerEvent('onStop', res);
});
recorderManager.onError(function() {
self.setData({
recording: false
});
});
}
})

4
components/GoEasyRecorder/goEasyRecorder.json Normal file
View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

6
components/GoEasyRecorder/goEasyRecorder.wxml Normal file
View File

@@ -0,0 +1,6 @@
<view class="goeasy-recorder">
<view bindtouchstart="startRecord" bindtouchend="stopRecord" class="record-msg-box">
{{recording ? '松开发送' : '按下录音'}}
</view>
<image wx:if="{{recording}}" class="record-icon" src="../../static/images/recordImage/loading.gif"></image>
</view>

32
components/GoEasyRecorder/goEasyRecorder.wxss Normal file
View File

@@ -0,0 +1,32 @@
.goeasy-recorder {
height: 80rpx;
background-color: #ffffff;
flex: 1;
display: flex;
}
.record-msg-box {
flex: 1;
height: 80rpx;
padding-left: 20rpx;
padding: 0;
border-radius: 12rpx;
box-sizing: border-box;
line-height: 80rpx;
font-size: 28rpx;
text-align: center;
color: #FFFFFF;
background: #cccccc;
}
.record-icon {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 158rpx;
margin: auto;
width: 316rpx;
height: 308rpx;
}

48
components/GoEasyVideoPlayer/goEasyVideoPlayer.js Normal file
View File

@@ -0,0 +1,48 @@
Component({
options: {
multipleSlots: true, // 在组件定义时的选项中启用多slot支持
},
data: {
videoContext: null,
show : false,
src : '',
duration : 0
},
methods: {
play({url='', duration=0}) {
this.setData({
show : true,
src : url,
duration : duration,
videoContext: wx.createVideoContext('videoPlayer', this)
})
},
onPlay () {
console.log('onplay');
this.data.videoContext.requestFullScreen({
direction : 0
})
},
onFullScreenChange(e) {
// 视频的全屏与退出全屏都会执行
//当退出全屏播放时，隐藏播放器
if(this.data.show && !e.detail.fullScreen){
this.setData({
show : false
})
this.data.videoContext.stop();
}
}
},
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
if(this.data.videoContext != null){
this.data.videoContext.stop();
}
}
})

4
components/GoEasyVideoPlayer/goEasyVideoPlayer.json Normal file
View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

3
components/GoEasyVideoPlayer/goEasyVideoPlayer.wxml Normal file
View File

@@ -0,0 +1,3 @@
<view class="goeasy-video-player" style="width0;height:0;overflow:hidden">
<video id="videoPlayer" wx:if="{{show}}" src="{{src}}" autoplay="true" custom-cache="{{false}}" bindfullscreenchange="onFullScreenChange" bindplay="onPlay" controls duration="{{duration}}"></video>
</view>

11
components/GoEasyVideoPlayer/goEasyVideoPlayer.wxss Normal file
View File

@@ -0,0 +1,11 @@
.goeasy-video-player {
width: 100%;
height: 100%;
}
.mask {
position: absolute;
top: 0;
z-index: 1;
opacity: 0.6;
background: #333;
}