Skip to content

X
xinrenli-app
Commit 51184dcc by honghong
Options

2023-3-8语音弹窗

parent 7d02e77f
Showing with 1077 additions and 576 deletions
App.vue
...@@ -74,5 +74,9 @@ export default { ...@@ -74,5 +74,9 @@ export default {
</style> </style>
<style> <style>
/*每个页面公共css */ /*每个页面公共css */
@import '@/utils/both.css'; @import '@/utils/both.css';
page{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
</style> </style>
components/form.vue 0 → 100644
<template>
<view>
<view class="d-flex a-center j-sb form-item-height paddding-x-three">
<view class="form-item-name">标题<span class="must-sign">*</span></view>
<view class="input-box">
<input type="text" placeholder="请输入标题">
</view>
</view>
<view class="d-flex a-center j-sb form-item-height">
<view class="form-item-name">联系人<span class="must-sign">*</span></view>
<view class="input-box">
<input type="text" placeholder="请输入联系人姓名">
</view>
</view>
<view class="d-flex a-center j-sb form-item-height">
<view class="form-item-name">联系电话<span class="must-sign">*</span></view>
<view class="input-box">
<input type="text" placeholder="请输入联系人手机号">
</view>
</view>
<view class="d-flex a-center j-sb form-item-height">
<view class="form-item-name">维修时间<span class="must-sign">*</span></view>
<view class="input-box d-flex a-center" @click="showTime = true">
<u-datetime-picker ref="datePicker" :formatter="formatter" v-model="time" :show="showTime" mode="date"
@confirm="handleConfirmDate" @cancel="handleClose"></u-datetime-picker>
<input type="text" v-model="time" placeholder="请选择时间">
<u-icon name="arrow-down-fill" color="#000000" size="28"></u-icon>
</view>
</view>
<view class="d-flex a-center j-sb form-item-height">
<view class="form-item-name">维修地址<span class="must-sign">*</span></view>
<view class="input-box">
<input type="text" placeholder="请填写维修地址">
</view>
</view>
<view class="d-flex a-center j-sb form-item-height">
<view class="form-item-name">预算金额<span class="must-sign">*</span></view>
<view class="input-box">
<input type="text" placeholder="请填写预算金额">
</view>
</view>
<view class="paddding-x-three">
<view class="form-item-name margin-y-two">备注</view>
<u--textarea v-model="remark" height="128" placeholder="备注说明"></u--textarea>
</view>
<view>
<view>
<view class="d-flex j-sb a-center form-item-height-only">
<view class="form-item-name">上传图片</view>
<view class="form-tips">一下内容三选一必填</view>
</view>
<view class="paddding-x-three">
<comUpload></comUpload>
</view>
</view>
<view>
<view class="d-flex j-sb a-center form-item-height-only">
<view class="form-item-name">上传视频</view>
</view>
<view class="paddding-x-three">
<comUpload :acceptType="acceptType"></comUpload>
</view>
</view>
<view>
<view class="d-flex j-sb a-center form-item-height-only">
<view class="form-item-name">语音描述</view>
</view>
<!-- <view class="paddding-x-three margin-y-two">
<free-audio startPic='../../static/play.png' endPic='../../static/stop.png' audioId='audio1'
:url='path' @delete="handleDelete"></free-audio>
</view> -->
<view class="paddding-x-three d-flex j-center " @click="showPopup = true">
<view class="voice-box d-flex a-center j-center">
<u-icon name="mic" color="#2979ff" size="32"></u-icon>
<view>添加语音描述</view>
</view>
</view>
<u-popup :show="showPopup" @close="handleClosePopup" @open="handleOpenPopup">
<view class="padding-y-two">
<recordCom></recordCom>
</view>
</u-popup>
</view>
</view>
</view>
</template>
<script>
import freeAudio from '@/components/chengpeng-audio/free-audio.vue'
export default {
name: "form",
components: {
freeAudio,
},
data() {
return {
showTime: false, //时间选择器是否显示
time: undefined, //时间选择器的值
remark: '',
acceptType: 'video',
path: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
voicePath: '',
showPopup: false
};
},
//暂停所有音频（一般用于页面切换时停止正在播放的音频）
onUnload() { //普通页面在 onUnload 生命周期中执行
uni.$emit('stop')
},
onHide() { //tabBar页面在onHide生命周期中执行
uni.$emit('stop')
},
created() {
let that = this
// 时间格式化默认值
that.time = uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd');
},
methods: {
// 时间选择器确认事件
async handleConfirmDate(e) {
// value:返回所选时间戳，mode:当前模式
let that = this
that.showTime = false
// 时间格式化
const timeFormat = uni.$u.timeFormat;
let timeValue = await timeFormat(e.value, 'yyyy-mm-dd');
that.time = timeValue
},
//时间选择器的关闭按钮事件
handleClose() {
this.showTime = false
},
//弹窗打开事件
handleOpenPopup() {
let that = this
// console.log('open');
},
//弹窗关闭事件
handleClosePopup() {
let that = this
that.showPopup = false
},
// 删除语音
handleDelete() {
console.log('删除')
// const recorderManager = uni.getRecorderManager()
// console.log(recorderManager,'大数据可能')
},
//时间选择器格式化
formatter(type, value) {
if (type === 'year') {
return `${value}年`
}
if (type === 'month') {
return `${value}月`
}
if (type === 'day') {
return `${value}日`
}
return value
},
}
}
</script>
<style>
@import url("@/css/form.css");
::v-deep .u-border {
border: 0 !important;
background: #F5F5F5 !important;
}
::v-deep .u-upload__wrap__preview {
margin: 0 6rpx 10rpx 0 !important;
}
</style>
components/record/record.vue
<template> <template>
<view class="sound-recording"> <view class="sound-recording">
<view class="time">{{status==0?'录音时长':(status==3?'录音已完成':'正在录音中')}}：{{time}} 秒</view> <view class="time">{{status==0?'录音时长':(status==3?'录音已完成':'正在录音中')}}：<span class="time-span">{{time}}秒</span>
<view class="btn"> </view>
<view :class="status==3?'show':'hide'" @click="reset" hover-class="jump-hover">重新录制</view> <!-- <view class="btn">
<view :class="status==3 && playStatus==0?'show':'hide'" @click="bofang" hover-class="jump-hover">{{playStatus==1?'录音播放中':'播放录音'}}</view> <view :class="status==3?'show':'hide'" @click="reset" hover-class="jump-hover">重新录制</view>
</view> <view :class="status==3 && playStatus==0?'show':'hide'" @click="bofang" hover-class="jump-hover">{{playStatus==1?'录音播放中':'播放录音'}}</view>
<view class="progress"> </view> -->
<text class="txt">最大录音时长（{{duration/1000}}秒 = {{duration/60000}}分钟）</text> <view class="progress">
<progress :percent="time*(100/(duration/1000))" border-radius="10" color="green" stroke-width="10" backgroundColor="#fff" /> <progress :percent="time*(100/(duration/1000))" border-radius="10" color="#2C66FF" stroke-width="8"
</view> backgroundColor="rgba(44,102,255,0.14)" />
<view class="anniu"> <text class="txt">最大录音时长（{{duration/1000}}秒 = {{duration/60000}}分钟）</text>
<view :class="status==0?'row':'no-clicking'" @click="kaishi" hover-class="jump-hover">开始</view> </view>
<view :class="status==1?'row':'no-clicking'" @click="zanting" hover-class="jump-hover">暂停</view> <view class="anniu">
<view :class="status==2?'row':'no-clicking'" @click="jixu" hover-class="jump-hover">继续</view> <view class="d-flex j-sa">
<view :class="status==1 || status==2?'row':'no-clicking'" @click="tingzhi" hover-class="jump-hover">停止</view> <view class="d-flex flex-column a-center" @click="handleStart">
</view> <img class="record-icon"
</view> :src="status==0 ? require('../../static/recordIcon/start.png') : status==1 ? require('../../static/recordIcon/pause.png') : status==2 ? require('../../static/recordIcon/start.png') : require('../../static/recordIcon/start.png') "
</template> alt="">
<view>{{status==0 ? '开始' : status==1 ? '暂停' : status==2 ? '继续' : '开始'}}</view>
<script> </view>
const recorderManager = uni.getRecorderManager() <view class="d-flex flex-column a-center" @click="tingzhi">
const innerAudioContext = uni.createInnerAudioContext() <img class="record-icon" src="../../static/recordIcon/stop.png" alt="">
var init <view>停止</view>
export default { </view>
data() { <view class="d-flex flex-column a-center" @click="reset">
return { <img class="record-icon" src="../../static/recordIcon/again.png" alt="">
time: 0, //录音时长 <view>重新录制</view>
duration: 600000, //录音最大值ms 600000/10分钟 </view>
tempFilePath: "", //音频路径 <view class="d-flex flex-column a-center" @click="bofang">
status: 0, //录音状态 0:未开始录音 1:正在录音 2:暂停录音 3:已完成录音 <img class="record-icon" src="../../static/recordIcon/play.png" alt="">
playStatus: 0, //录音播放状态 0:未播放 1:正在播放 <view>{{playStatus==1?'录音播放中':'播放录音'}}</view>
} </view>
},
methods: { </view>
kaishi: function() { <!-- <view :class="status==0?'row':'no-clicking'" @click="kaishi" hover-class="jump-hover">开始</view>
clearInterval(init) //清除定时器 <view :class="status==1?'row':'no-clicking'" @click="zanting" hover-class="jump-hover">暂停</view>
//监听录音自动结束事件(如果不加，录音时间到最大值自动结束后，没获取到录音路径将无法正常进行播放) <view :class="status==2?'row':'no-clicking'" @click="jixu" hover-class="jump-hover">继续</view>
recorderManager.onStop((res) => { <view :class="status==1 || status==2?'row':'no-clicking'" @click="tingzhi" hover-class="jump-hover">停止</view> -->
console.log('recorder stop', res) </view>
this.tempFilePath = res.tempFilePath </view>
this.status = 3 </template>
this.recordingTimer(this.time)
}) <script>
const recorderManager = uni.getRecorderManager()
const options = { const innerAudioContext = uni.createInnerAudioContext()
duration: this.duration, //指定录音的时长，单位 ms var init
sampleRate: 16000, //采样率 export default {
numberOfChannels: 1, //录音通道数 data() {
encodeBitRate: 96000, //编码码率 return {
format: 'mp3', //音频格式，有效值 aac/mp3 time: 0, //录音时长
frameSize: 10, //指定帧大小，单位 KB duration: 600000, //录音最大值ms 600000/10分钟
} tempFilePath: "", //音频路径
this.recordingTimer() status: 0, //录音状态 0:未开始录音 1:正在录音 2:暂停录音 3:已完成录音
recorderManager.start(options) playStatus: 0, //录音播放状态 0:未播放 1:正在播放
// 监听音频开始事件 }
recorderManager.onStart((res) => { },
console.log('recorder start') methods: {
this.status = 1 handleStart() {
}) let that = this
console.log(this.status); if (that.status == 0) {
}, that.kaishi()
} else if (that.status == 1) {
/** that.zanting()
* 暂停录音 } else if (that.status == 2) {
*/ that.jixu()
zanting: function() { }
console.log('zanting'); },
recorderManager.onPause(() => { kaishi: function() {
console.log('recorder pause') clearInterval(init) //清除定时器
this.status = 2 //监听录音自动结束事件(如果不加，录音时间到最大值自动结束后，没获取到录音路径将无法正常进行播放)
}) recorderManager.onStop((res) => {
this.recordingTimer(this.time) console.log('recorder stop', res)
recorderManager.pause() this.tempFilePath = res.tempFilePath
}, this.status = 3
this.recordingTimer(this.time)
/** })
* 继续录音
*/ const options = {
jixu: function() { duration: this.duration, //指定录音的时长，单位 ms
this.status = 1 sampleRate: 16000, //采样率
this.recordingTimer() numberOfChannels: 1, //录音通道数
recorderManager.resume() encodeBitRate: 96000, //编码码率
}, format: 'mp3', //音频格式，有效值 aac/mp3
frameSize: 10, //指定帧大小，单位 KB
/** }
* 停止录音 this.recordingTimer()
*/ recorderManager.start(options)
tingzhi: function() { // 监听音频开始事件
debugger recorderManager.onStart((res) => {
recorderManager.onStop((res) => { console.log('recorder start')
console.log('recorder stop', res) this.status = 1
this.tempFilePath = res.tempFilePath })
this.status = 3 console.log(this.status);
}) },
this.recordingTimer(this.time)
recorderManager.stop() /**
* 暂停录音
}, */
zanting: function() {
/** recorderManager.onPause(() => {
* 播放录音 console.log('recorder pause')
*/ this.status = 2
bofang: function() { })
//音频地址 this.recordingTimer(this.time)
console.log(this.tempFilePath); recorderManager.pause()
innerAudioContext.src = this.tempFilePath },
//在ios下静音时播放没有声音，默认为true，改为false就好了。
// innerAudioContext.obeyMuteSwitch = false /**
* 继续录音
//点击播放 */
if (this.playStatus == 0) { jixu: function() {
this.playStatus = 1 this.status = 1
innerAudioContext.play() this.recordingTimer()
} recorderManager.resume()
// //播放结束 },
innerAudioContext.onEnded(() => {
innerAudioContext.stop() /**
this.playStatus = 0 * 停止录音
}) */
}, tingzhi: function() {
recordingTimer: function(time) { debugger
var that = this recorderManager.onStop((res) => {
if (time == undefined) { console.log('recorder stop', res)
//将计时器赋值给init this.tempFilePath = res.tempFilePath
init = setInterval(function() { this.status = 3
var time = that.time + 1; })
that.time = time this.recordingTimer(this.time)
}, 1000); recorderManager.stop()
} else {
clearInterval(init) },
console.log("暂停计时")
} /**
}, * 播放录音
*/
/** bofang: function() {
* 重新录制 //音频地址
*/ console.log(this.tempFilePath, '音频地址');
reset: function() { innerAudioContext.src = this.tempFilePath
var that = this //在ios下静音时播放没有声音，默认为true，改为false就好了。
wx.showModal({ // innerAudioContext.obeyMuteSwitch = false
title: "重新录音",
content: "是否重新录制?", //点击播放
success(res) { if (this.playStatus == 0) {
if (res.confirm) { this.playStatus = 1
that.time = 0 innerAudioContext.play()
that.tempFilePath = '' }
that.status = 0 // //播放结束
that.playStatus = 0 innerAudioContext.onEnded(() => {
innerAudioContext.stop() innerAudioContext.stop()
} this.playStatus = 0
} })
}) },
} recordingTimer: function(time) {
} var that = this
} if (time == undefined) {
</script> //将计时器赋值给init
init = setInterval(function() {
<style> var time = that.time + 1;
.sound-recording { that.time = time
background-color: rgb(234, 234, 234); }, 1000);
margin: 10rpx 30rpx; } else {
border-radius: 20rpx; clearInterval(init)
padding: 5rpx 0rpx; console.log("暂停计时")
} }
},
.btn {
margin: 0rpx 100rpx; /**
display: flex; * 重新录制
justify-content: space-between; */
align-items: center; reset: function() {
} var that = this
wx.showModal({
.btn .show { title: "重新录音",
padding: 10rpx; content: "是否重新录制?",
width: 200rpx; success(res) {
font-size: 25rpx; if (res.confirm) {
display: flex; that.time = 0
justify-content: center; that.tempFilePath = ''
align-items: center; that.status = 0
background-color: rgb(178, 228, 228); that.playStatus = 0
border-radius: 20rpx; innerAudioContext.stop()
border: 5rpx solid rgb(127, 204, 214); }
} }
})
.btn .hide { }
padding: 10rpx; }
width: 200rpx; }
font-size: 25rpx; </script>
display: flex;
justify-content: center; <style>
align-items: center; /* .sound-recording {
border-radius: 20rpx; background-color: rgb(234, 234, 234);
border: 5rpx solid #eee; margin: 10rpx 30rpx;
pointer-events: none; border-radius: 20rpx;
background-color: rgba(167, 162, 162, 0.445); padding: 5rpx 0rpx;
} } */
.time { .time-span {
line-height: 70rpx; font-size: 24rpx;
text-align: center; color: #2C66FF;
font-size: 30rpx; font-weight: bold;
} }
.progress { .record-icon {
margin: 20rpx; width: 50rpx;
} height: 50rpx;
}
.play {
margin: 0rpx 20rpx; .btn {
} margin: 0rpx 100rpx;
display: flex;
.txt { justify-content: space-between;
display: flex; align-items: center;
justify-content: center; }
line-height: 60rpx;
font-size: 25rpx; .btn .show {
} padding: 10rpx;
width: 200rpx;
.anniu { font-size: 25rpx;
margin: 10rpx 50rpx; display: flex;
display: flex; justify-content: center;
justify-content: space-between; align-items: center;
} background-color: rgb(178, 228, 228);
border-radius: 20rpx;
.row { border: 5rpx solid rgb(127, 204, 214);
display: flex; }
justify-content: center;
align-items: center; .btn .hide {
border-radius: 50%; padding: 10rpx;
font-size: 25rpx; width: 200rpx;
width: 80rpx; font-size: 25rpx;
height: 80rpx; display: flex;
background-color: rgb(178, 228, 228); justify-content: center;
border: 5rpx solid rgb(127, 204, 214); align-items: center;
} border-radius: 20rpx;
border: 5rpx solid #eee;
.jump-hover { pointer-events: none;
transform: scale(0.9); background-color: rgba(167, 162, 162, 0.445);
} }
/*禁止点击*/ .time {
line-height: 70rpx;
.anniu .no-clicking { text-align: center;
pointer-events: none; font-size: 24rpx;
background-color: rgba(167, 162, 162, 0.445); }
display: flex;
justify-content: center; .progress {
align-items: center; margin: 20rpx;
border-radius: 50%; }
font-size: 25rpx;
width: 80rpx; .play {
height: 80rpx; margin: 0rpx 20rpx;
border: 5rpx solid rgb(241, 244, 245); }
}
</style> .txt {
\ No newline at end of file display: flex;
justify-content: center;
line-height: 60rpx;
font-size: 25rpx;
}
.anniu {
margin: 10rpx 50rpx;
font-size: 24rpx;
/* display: flex;
justify-content: space-between; */
}
.row {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: 25rpx;
width: 80rpx;
height: 80rpx;
background-color: rgb(178, 228, 228);
border: 5rpx solid rgb(127, 204, 214);
}
.jump-hover {
transform: scale(0.9);
}
/*禁止点击*/
.anniu .no-clicking {
pointer-events: none;
background-color: rgba(167, 162, 162, 0.445);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: 25rpx;
width: 80rpx;
height: 80rpx;
border: 5rpx solid rgb(241, 244, 245);
}
</style>
demand/payment/index.vue
...@@ -36,6 +36,14 @@ ...@@ -36,6 +36,14 @@
{{times}}元 {{times}}元
<image src="@/static/icon/jt.png" mode=""></image> <image src="@/static/icon/jt.png" mode=""></image>
</view> </view>
</view>
<view class="content-discounts">
<view class="">
您当前可享1单9折优惠,是否使用
</view>
<view class="">
<u-switch v-model="isUse" activeColor="#D6E1FF" inactiveColor="#F1F1F1" @change="changeUse"></u-switch>
</view>
</view> </view>
<view class="content-accomplish"> <view class="content-accomplish">
<view class=""> <view class="">
...@@ -54,7 +62,8 @@ ...@@ -54,7 +62,8 @@
imgBgUrl: apiBaseConfig.imgBgUrl, imgBgUrl: apiBaseConfig.imgBgUrl,
globalData: getApp().globalData, globalData: getApp().globalData,
scrollTopHeader: 0, scrollTopHeader: 0,
times:'0' times:'0',
isUse:true
}; };
}, },
onLoad() {}, onLoad() {},
...@@ -69,6 +78,10 @@ ...@@ -69,6 +78,10 @@
url: `/demand/confirm/index` url: `/demand/confirm/index`
}); });
} }
},
changeUse(e){
let that = this
that.isUse = e
} }
} }
} }
...@@ -76,6 +89,12 @@ ...@@ -76,6 +89,12 @@
<style> <style>
page { page {
background: #F7F8F9; background: #F7F8F9;
}
.u-switch__node{
background: #888888 !important;
}
.u-switch__node--on{
background: #2C66FF !important;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
......
demand/updateForm/updateForm.vue 0 → 100644
<template>
<view>
<view class="paddding-x-two ">
<releaseForm></releaseForm>
<view class="submit-btn">确认修改</view>
</view>
</view>
</template>
<script>
import releaseForm from '@/components/form.vue'
export default {
components: {
releaseForm
},
data() {
return {
}
},
methods: {
}
}
</script>
<style>
@import url("@/css/form.css");
::v-deep .u-border {
border: 0 !important;
background: #F5F5F5 !important;
}
::v-deep .u-upload__wrap__preview {
margin: 0 6rpx 10rpx 0 !important;
}
</style>
my/login/login.vue 0 → 100644
<template>
<view>
<view :style="'height:' + height + 'px'" class="d-flex flex-column j-center a-center">
<image class="logo-img" src="../../static/logoLogin.png" >
</image>
<view class="distence-top">
<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信手机号授权登录</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
height:0
}
},
onLoad() {
let that = this
// 获取系统的高度
uni.getSystemInfo({
success(res) {
that.height = res.windowHeight
}
})
// this.getUserInfo()
},
methods: {
// 1.调用微信自带登录方法获取code
getUserInfo(){
let that = this
uni.login({
success(res) {
that.loginParams.code = res.code
that.getSessionkeyAndOpenId()
}
})
uni.getUserInfo({
success(info) {
that.signature = info.signature
that.rawData = info.rawData
}
})
},
// 2.获取sessionKey,openId
async getSessionkeyAndOpenId() {
const res = await this.$myRequest({
url:`/xcxLogin?appid=${this.loginParams.appid}&code=${this.loginParams.code}`,
})
if(res.data.code == 200){
let dataObj = JSON.parse(res.data.data)
this.sessionKey = dataObj.sessionKey
this.openid = dataObj.openid
}
},
// 3.授权手机号登录拿到encryptedData和iv
getPhoneNumber(e) {
// 同意登录
if (e.detail.errMsg == "getPhoneNumber:ok") {
const iv = e.detail.iv
const encryptedData = e.detail.encryptedData
this.getNumberAndToken(iv,encryptedData)
} else {
// 取消授权 清空头像和昵称
uni.navigateBack({
delta: 1
})
}
},
// 4.获取token
async getNumberAndToken(iv, encryptedData) {
const res = await this.$myRequest({
url:'/phone',
method:'POST',
data:{
appid:this.loginParams.appid,
encryptedData:encryptedData,
iv:iv,
sessionKey:this.sessionKey,
openid:this.openid,
rawData:this.rawData,
signature:this.signature
}
})
if(res.data.code == 200){
console.log(res.data.data.token,'token')
uni.setStorageSync('token',res.data.data.token)
uni.setStorageSync('powerIds',res.data.data.powerIds)
uni.setStorageSync('userInfo',res.data.data.feederUserVo)
uni.showToast({
title:'登录成功',
icon:'none',
duration:2000,
success() {
setTimeout(()=>{
uni.reLaunch({
url:'../index/index'
})
},1000)
}
})
}
},
//使用账号密码
handleUse(){
uni.navigateTo({
url:'../chooseLogin/chooseLogin'
})
}
}
}
</script>
<style>
page{
padding:0;
}
.logo-img{
width: 200rpx;
height:200rpx;
border-radius: 50%;
}
.button {
color: #FFFFFF;
height: 90rpx;
font-size: 18px;
text-align: center;
line-height: 90rpx;
width: 550rpx;
border-radius: 8px;
background: #3476ff;
}
.use-text{
text-align: center;
font-size: 24rpx;
color: #3476ff;
margin: 20rpx auto;
}
.distence-top{
margin-top: 429rpx;
}
</style>
order/detail/detail.vue
<template> <template>
<view> <view>
<view class="padding-x-four d-flex flex-wrap"> <view style="padding-bottom: 100rpx;">
<view v-for="item in 6"> <view class="padding-x-four d-flex flex-wrap">
<image class="evaluateListImgItem" <view v-for="item in 6">
src="https://img2.baidu.com/it/u=955956276,3392954639&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" <image class="evaluateListImgItem"
mode="scaleToFill"></image> src="https://img2.baidu.com/it/u=955956276,3392954639&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
mode="scaleToFill"></image>
</view>
</view> </view>
</view> <view class="paddding-x-two">
<view class="paddding-x-two"> <view class="eval-box">
<view class="eval-box"> <view class="evaluate-title">文章标题文章标题文章标题文章标题文章标题</view>
<view class="evaluate-title">文章标题文章标题文章标题文章标题文章标题</view> <view class="d-flex a-center j-sb margin-top-two">
<view class="d-flex a-center j-sb margin-top-two"> <view class="d-flex a-center">
<view class="d-flex a-center"> <image class="img"
<image class="img" src="https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="widthFix"></image> src="https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
<view class="evaluate-name">张三</view> mode="widthFix"></image>
<view class="evaluate-name">张三</view>
</view>
<view class="eval-time">发布于2022-11-16</view>
</view>
<view class="evaluateText text-indent">
评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容
</view> </view>
<view class="eval-time">发布于2022-11-16</view>
</view> </view>
<view class="evaluateText text-indent"> </view>
评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容 <view class="bgWhite">
<view class="padding-aval">
<comment-list :personEvalList="personEvalList"></comment-list>
</view> </view>
</view> </view>
</view> </view>
<view class="bgWhite"> <view class="comment-box">
<view class="padding-aval"> <view class="paddding-x-two comment-box-height d-flex a-center j-sb">
<comment-list :personEvalList="personEvalList"></comment-list> <input class="send-input" type="text" placeholder="评论一下吧">
<view class="send-btn-box">发送</view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
...@@ -48,6 +58,24 @@ ...@@ -48,6 +58,24 @@
date: '2022-05-11', date: '2022-05-11',
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
}, },
{
avatar: 'https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
nickname: '李晓扎',
date: '2022-05-11',
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
},
{
avatar: 'https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
nickname: '李小乖',
date: '2022-05-11',
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
},
{
avatar: 'https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
nickname: '李晓扎',
date: '2022-05-11',
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
},
] ]
} }
}, },
...@@ -58,13 +86,15 @@ ...@@ -58,13 +86,15 @@
</script> </script>
<style> <style>
page{ page {
background: #F7F8F9; background: #F7F8F9;
} }
.padding-aval{
.padding-aval {
padding: 30rpx 40rpx; padding: 30rpx 40rpx;
} }
.eval-box{
.eval-box {
width: 710rpx; width: 710rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx; border-radius: 10rpx;
...@@ -72,11 +102,13 @@ ...@@ -72,11 +102,13 @@
box-sizing: border-box; box-sizing: border-box;
margin: 20rpx auto; margin: 20rpx auto;
} }
.evaluate-title { .evaluate-title {
font-size: 28rpx; font-size: 28rpx;
font-weight: bold; font-weight: bold;
margin-top: 10rpx; margin-top: 10rpx;
} }
/* 头像 */ /* 头像 */
.img { .img {
width: 60rpx; width: 60rpx;
...@@ -84,17 +116,19 @@ ...@@ -84,17 +116,19 @@
display: table; display: table;
border-radius: 50%; border-radius: 50%;
} }
.evaluate-name { .evaluate-name {
font-size: 28rpx; font-size: 28rpx;
margin-left: 10rpx; margin-left: 10rpx;
} }
.evaluateListImgItem { .evaluateListImgItem {
width: 210rpx; width: 210rpx;
height: 210rpx; height: 210rpx;
margin-right: 10rpx; margin-right: 10rpx;
margin-top: 10rpx; margin-top: 10rpx;
} }
/* 内容样式 */ /* 内容样式 */
.evaluateText { .evaluateText {
margin-top: 10rpx; margin-top: 10rpx;
...@@ -102,11 +136,47 @@ ...@@ -102,11 +136,47 @@
letter-spacing: 0.5px; letter-spacing: 0.5px;
line-height: 40rpx; line-height: 40rpx;
} }
.text-indent{
.text-indent {
text-indent: 2rem; text-indent: 2rem;
} }
.eval-time{
.eval-time {
color: #666666; color: #666666;
font-size: 24rpx; font-size: 24rpx;
} }
.comment-box {
width: 100%;
height: 98rpx;
background: #F8F8F8;
position: fixed;
bottom: 0;
}
.comment-box-height {
height: 98rpx;
}
.send-input {
width: 550rpx;
height: 60rpx;
background: #FFFFFF;
border-radius: 6rpx;
color: #999999;
font-size: 22rpx;
padding-left: 26rpx;
box-sizing: border-box;
}
.send-btn-box {
width: 140rpx;
height: 60rpx;
background: #2C66FF;
border-radius: 6rpx;
text-align: center;
line-height: 60rpx;
color: #FFFFFF;
font-size: 22rpx;
}
</style> </style>
pages.json
{ {
"easycom": { "easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}, },
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{ {
"path": "pages/home/index", "path": "pages/home/index",
"style": { "style": {
"navigationBarTitleText": "uni-app", "navigationBarTitleText": "uni-app",
"mp-weixin": { "mp-weixin": {
"navigationStyle": "custom" "navigationStyle": "custom"
} }
} }
}, },
{ {
"path": "pages/demand/index", "path": "pages/demand/index",
"style": { "style": {
"navigationBarTitleText": "需求" "navigationBarTitleText": "需求"
} }
}, },
{ {
"path": "pages/release/index", "path": "pages/release/index",
"style": { "style": {
"navigationBarTitleText": "发布" "navigationBarTitleText": "发布",
} "mp-weixin": {
}, "navigationStyle": "custom"
{ }
"path": "pages/order/index", }
"style": { },
"navigationBarTitleText": "动态" {
} "path": "pages/order/index",
}, "style": {
{ "navigationBarTitleText": "动态",
"path": "pages/my/index", "mp-weixin": {
"style": { "navigationStyle": "custom"
"navigationBarTitleText": "个人", }
"mp-weixin": { }
"navigationStyle": "custom" },
} {
} "path": "pages/my/index",
} "style": {
], "navigationBarTitleText": "个人",
//分包加载配置，此配置为小程序的分包加载机制。 "mp-weixin": {
"subPackages": [{ "navigationStyle": "custom"
"root": "home", //子包的根目录 }
"pages": [{ //这里的配置路径和pages里的一样 }
"path": "index/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好 }
"style": { ],
"navigationBarTitleText": "订单详情", //分包加载配置，此配置为小程序的分包加载机制。
"enablePullDownRefresh": false "subPackages": [{
} "root": "home", //子包的根目录
}] "pages": [{ //这里的配置路径和pages里的一样
}, "path": "index/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
{ "style": {
"root": "my", //子包的根目录 "navigationBarTitleText": "订单详情",
"pages": [{ //这里的配置路径和pages里的一样 "enablePullDownRefresh": false
"path": "feedback/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好 }
"style": { }]
"navigationBarTitleText": "意见反馈" },
} {
}, { //这里的配置路径和pages里的一样 "root": "my", //子包的根目录
"path": "invite/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好 "pages": [{ //这里的配置路径和pages里的一样
"style": { "path": "feedback/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
"navigationBarTitleText": "我的邀请" "style": {
} "navigationBarTitleText": "意见反馈"
}, { //这里的配置路径和pages里的一样 }
"path": "agreeOn/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好 }, { //这里的配置路径和pages里的一样
"style": { "path": "invite/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
"navigationBarTitleText": "用户协议" "style": {
} "navigationBarTitleText": "我的邀请"
}, { //这里的配置路径和pages里的一样 }
"path": "coupon/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好 }, { //这里的配置路径和pages里的一样
"style": { "path": "agreeOn/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
"navigationBarTitleText": "优惠券", "style": {
"mp-weixin": { "navigationBarTitleText": "用户协议"
"navigationStyle": "custom" }
} }, { //这里的配置路径和pages里的一样
} "path": "coupon/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
}] "style": {
}, "navigationBarTitleText": "优惠券",
{ "mp-weixin": {
"root": "demand", //子包的根目录 "navigationStyle": "custom"
"pages": [{ //这里的配置路径和pages里的一样 }
"path": "index/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好 }
"style": { }, {
"navigationBarTitleText": "订单详情", "path": "login/login",
"enablePullDownRefresh": false "style": {
} "navigationBarTitleText": "授权登录",
}, "enablePullDownRefresh": false
{ //这里的配置路径和pages里的一样 }
"path": "payment/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
"style": { }]
"navigationBarTitleText": "确认支付", },
"enablePullDownRefresh": false {
} "root": "demand", //子包的根目录
}, "pages": [{ //这里的配置路径和pages里的一样
{ //这里的配置路径和pages里的一样 "path": "index/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
"path": "confirm/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好 "style": {
"style": { "navigationBarTitleText": "订单详情",
"navigationBarTitleText": "确认支付", "enablePullDownRefresh": false
"enablePullDownRefresh": false }
} },
}, { //这里的配置路径和pages里的一样
{ //这里的配置路径和pages里的一样 "path": "payment/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
"path": "prosperity/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好 "style": {
"style": { "navigationBarTitleText": "确认支付",
"navigationBarTitleText": "支付成功", "enablePullDownRefresh": false
"enablePullDownRefresh": false }
} },
} { //这里的配置路径和pages里的一样
] "path": "confirm/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
}, "style": {
{ "navigationBarTitleText": "确认支付",
"root": "order", "enablePullDownRefresh": false
"pages": [ }
{ },
"path": "detail/detail", { //这里的配置路径和pages里的一样
"style": { "path": "prosperity/index", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
"navigationBarTitleText": "动态", "style": {
"enablePullDownRefresh": false "navigationBarTitleText": "支付成功",
} "enablePullDownRefresh": false
} }
] }, {
} "path": "updateForm/updateForm",
], "style": {
"globalStyle": { "navigationBarTitleText": "订单修改",
"navigationBarTextStyle": "black", "enablePullDownRefresh": false
"navigationBarBackgroundColor": "#FFFFFF", }
"backgroundColor": "#f3f4f6",
"app-plus": { }
"background": "#efeff4" ]
}, },
"backgroundTextStyle": "light", {
"enablePullDownRefresh": false, "root": "order",
"onReachBottomDistance": 50 "pages": [{
} "path": "detail/detail",
"style": {
"navigationBarTitleText": "动态",
"enablePullDownRefresh": false
}
}]
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#f3f4f6",
"app-plus": {
"background": "#efeff4"
},
"backgroundTextStyle": "light",
"enablePullDownRefresh": false,
"onReachBottomDistance": 50
}
} }
pages/demand/components/index.vue
...@@ -24,10 +24,14 @@ ...@@ -24,10 +24,14 @@
<button class="buttoncl">修改</button> <button class="buttoncl">修改</button>
<button class="buttonclde" @click.stop="abolish(1)">取消订单</button> <button class="buttonclde" @click.stop="abolish(1)">取消订单</button>
</view> </view>
<!-- // 已驳回 --> <!-- // 已驳回 -->
<view class="reject" v-if="subscript == '1'"> <view class="d-flex a-end j-sb" v-if="subscript == '1'">
驳回理由：没有明确问题描述 <view class="reject flex-1 hiddenMore" >
驳回理由：没有明确问题描述没有明确问题描述没有明确问题描述没有明确问题描述
</view>
<button @click.stop="handleAgainAdd" class="buttoncl" style="margin-left: 20rpx;">重新发布</button>
</view> </view>
<!-- // 待支付 --> <!-- // 待支付 -->
<view class="unpaid" v-if="subscript == '2'"> <view class="unpaid" v-if="subscript == '2'">
<view class="unpaid-paid"> <view class="unpaid-paid">
...@@ -104,6 +108,13 @@ ...@@ -104,6 +108,13 @@
this.titbut = '2' this.titbut = '2'
this.show = true this.show = true
} }
},
//重新发布按钮事件
handleAgainAdd(){
let that = this
that.$uniGo.navigateTo({
url:'/demand/updateForm/updateForm'
})
}, },
// 再看看 // 再看看
aindex(){ aindex(){
...@@ -223,10 +234,12 @@ ...@@ -223,10 +234,12 @@
} }
.reject { .reject {
margin-top: 40rpx; margin-top: 20rpx;
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
color: #FD0000; color: #FD0000;
line-height: 33rpx;
letter-spacing: 3rpx;
} }
.unpaid { .unpaid {
......
pages/my/index.vue
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</view> </view>
<image src="@/static/icon/my09.png" mode=""></image> <image src="@/static/icon/my09.png" mode=""></image>
</view> </view>
<view class="content-in-btn"> <view class="content-in-btn" @click="handleLogin">
<u-button <u-button
text="退出登录" text="退出登录"
color="#EA654E" color="#EA654E"
...@@ -162,6 +162,11 @@ export default { ...@@ -162,6 +162,11 @@ export default {
url: row.url url: row.url
}); });
} }
},
handleLogin(){
this.$uniGo.navigateTo({
url:'/my/login/login'
})
} }
} }
}; };
......
pages/order/index.vue
<template> <template>
<view class="content"> <view class="content">
<view :style="{ height: `calc(${globalData.statusBarHeight}rpx + 130rpx)` }"></view>
<view class="friends-list-box" @click="handleDetail"> <view class="friends-list-box" @click="handleDetail">
<evaluateList :list="evaluateList"></evaluateList> <evaluateList :list="evaluateList"></evaluateList>
<view class="margin-top-two"> <view class="margin-top-two">
<comment-list :personEvalList="personEvalList"></comment-list> <comment-list :personEvalList="personEvalList"></comment-list>
</view> </view>
</view> </view>
<com-navbar :leftIcon="false" :homeShow="false" bgColor="#fff" title="动态"
:titleStyle="{ color: '#000', fontSize: '32rpx',scrollTopHeader: scrollTopHeader }" />
<com-tabbar :list=" [{
name: '首页',
icon: '/static/tabbar/tb1.png',
selectIcon:'/static/tabbar/td1.png',
url: '/pages/home/index',
type: 'type'
}, {
name: '我的需求',
icon: '/static/tabbar/tb2.png',
selectIcon: '/static/tabbar/td2.png',
url: '/pages/demand/index',
type: 'type'
}, {
name: '发布',
icon: '/static/tabbar/fb.png',
selectIcon:'/static/tabbar/fb.png',
url: '/pages/release/index',
type: 'type'
}, {
name: '动态',
icon: '/static/tabbar/tb3.png',
selectIcon: '/static/tabbar/td3.png',
url: '/pages/order/index',
type: 'order'
}, {
name:'我的' ,
icon:'/static/tabbar/tb4.png' ,
selectIcon:'/static/tabbar/td4.png',
url: '/pages/my/index',
type: 'type'
}]"></com-tabbar>
</view> </view>
</template> </template>
...@@ -17,6 +52,7 @@ ...@@ -17,6 +52,7 @@
}, },
data() { data() {
return { return {
globalData: getApp().globalData,
evaluateList: [{ evaluateList: [{
name: '马保国', name: '马保国',
image: 'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e01ec0ba02a9.jpg', image: 'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e01ec0ba02a9.jpg',
...@@ -54,6 +90,30 @@ ...@@ -54,6 +90,30 @@
date: '2022-05-11', date: '2022-05-11',
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
}, },
{
avatar: 'https://img2.baidu.com/it/u=955956276,3392954639&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
nickname: '李哈哈',
date: '2022-01-31',
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
},
{
avatar: 'https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
nickname: '李小乖',
date: '2022-05-11',
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
},
{
avatar: 'https://img2.baidu.com/it/u=955956276,3392954639&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
nickname: '李哈哈',
date: '2022-01-31',
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
},
{
avatar: 'https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
nickname: '李小乖',
date: '2022-05-11',
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
},
] ]
} }
}, },
...@@ -63,7 +123,9 @@ ...@@ -63,7 +123,9 @@
methods: { methods: {
handleDetail() { handleDetail() {
let that = this let that = this
that.$uniGo.navigateTo({url:'/order/detail/detail'}) that.$uniGo.navigateTo({
url: '/order/detail/detail'
})
} }
} }
......
pages/release/index.vue
<template> <template>
<view> <view>
<recordCom></recordCom> <view :style="{ height: `calc(${globalData.statusBarHeight}rpx + 130rpx)` }"></view>
<view class="paddding-x-two"> <view class="paddding-x-two ">
<view class="d-flex a-center j-sb form-item-height paddding-x-three"> <releaseForm></releaseForm>
<view class="form-item-name">标题<span class="must-sign">*</span></view>
<view class="input-box">
<input type="text" placeholder="请输入标题">
</view>
</view>
<view class="d-flex a-center j-sb form-item-height">
<view class="form-item-name">联系人<span class="must-sign">*</span></view>
<view class="input-box">
<input type="text" placeholder="请输入联系人姓名">
</view>
</view>
<view class="d-flex a-center j-sb form-item-height">
<view class="form-item-name">联系电话<span class="must-sign">*</span></view>
<view class="input-box">
<input type="text" placeholder="请输入联系人手机号">
</view>
</view>
<view class="d-flex a-center j-sb form-item-height">
<view class="form-item-name">维修时间<span class="must-sign">*</span></view>
<view class="input-box d-flex a-center" @click="showTime = true">
<u-datetime-picker ref="datePicker" :formatter="formatter" v-model="time" :show="showTime"
mode="date" @confirm="handleConfirmDate" @cancel="handleClose"></u-datetime-picker>
<input type="text" v-model="time" placeholder="请选择时间">
<u-icon name="arrow-down-fill" color="#000000" size="28"></u-icon>
</view>
</view>
<view class="d-flex a-center j-sb form-item-height">
<view class="form-item-name">维修地址<span class="must-sign">*</span></view>
<view class="input-box">
<input type="text" placeholder="请填写维修地址">
</view>
</view>
<view class="d-flex a-center j-sb form-item-height">
<view class="form-item-name">预算金额<span class="must-sign">*</span></view>
<view class="input-box">
<input type="text" placeholder="请填写预算金额">
</view>
</view>
<view class="paddding-x-three">
<view class="form-item-name margin-y-two">备注</view>
<u--textarea v-model="remark" height="128" placeholder="备注说明"></u--textarea>
</view>
<view>
<view>
<view class="d-flex j-sb a-center form-item-height-only">
<view class="form-item-name">上传图片</view>
<view class="form-tips">一下内容三选一必填</view>
</view>
<view class="paddding-x-three">
<comUpload></comUpload>
</view>
</view>
<view>
<view class="d-flex j-sb a-center form-item-height-only">
<view class="form-item-name">上传视频</view>
</view>
<view class="paddding-x-three">
<comUpload :acceptType="acceptType"></comUpload>
</view>
</view>
<view>
<view class="d-flex j-sb a-center form-item-height-only">
<view class="form-item-name">语音描述</view>
</view>
<!-- <view class="paddding-x-three margin-y-two">
<free-audio startPic='../../static/play.png' endPic='../../static/stop.png' audioId='audio1'
:url='path' @delete="handleDelete"></free-audio>
</view> -->
<view class="paddding-x-three d-flex j-center " @click="handleAddVoice">
<view class="voice-box d-flex a-center j-center">
<u-icon name="mic" color="#2979ff" size="32"></u-icon>
<view>添加语音描述</view>
</view>
</view>
</view>
</view>
<view class="submit-btn">发布需求</view> <view class="submit-btn">发布需求</view>
</view> </view>
<com-navbar :leftIcon="false" :homeShow="false" bgColor="#fff" title="发布"
:titleStyle="{ color: '#000', fontSize: '32rpx',scrollTopHeader: scrollTopHeader }" />
<com-tabbar :list=" [{
name: '首页',
icon: '/static/tabbar/tb1.png',
selectIcon:'/static/tabbar/td1.png',
url: '/pages/home/index',
type: 'type'
}, {
name: '我的需求',
icon: '/static/tabbar/tb2.png',
selectIcon: '/static/tabbar/td2.png',
url: '/pages/demand/index',
type: 'type'
}, {
name: '发布',
icon: '/static/tabbar/fb.png',
selectIcon:'/static/tabbar/fb.png',
url: '/pages/release/index',
type: 'release'
}, {
name: '动态',
icon: '/static/tabbar/tb3.png',
selectIcon: '/static/tabbar/td3.png',
url: '/pages/order/index',
type: 'type'
}, {
name:'我的' ,
icon:'/static/tabbar/tb4.png' ,
selectIcon:'/static/tabbar/td4.png',
url: '/pages/my/index',
type: 'type'
}]"></com-tabbar>
</view> </view>
</template> </template>
<script> <script>
import freeAudio from '@/components/chengpeng-audio/free-audio.vue' import releaseForm from '@/components/form.vue'
import recordCom from '@/components/record/record.vue' import recordCom from '@/components/record/record.vue'
export default { export default {
components: { components: {
freeAudio,recordCom releaseForm,
recordCom,
}, },
data() { data() {
return { return {
showTime: false, //时间选择器是否显示 globalData: getApp().globalData,
time: undefined, //时间选择器的值
remark: '',
acceptType: 'video',
path: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
voicePath:''
} }
}, },
onShow() { onShow() {
let that = this let that = this
}, },
onLoad() {
let that = this
// 时间格式化默认值
that.time = uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd');
},
//暂停所有音频（一般用于页面切换时停止正在播放的音频）
onUnload() { //普通页面在 onUnload 生命周期中执行
uni.$emit('stop')
},
onHide() { //tabBar页面在onHide生命周期中执行
uni.$emit('stop')
},
methods: { methods: {
// 时间选择器确认事件
async handleConfirmDate(e) {
// value:返回所选时间戳，mode:当前模式
let that = this
that.showTime = false
// 时间格式化
const timeFormat = uni.$u.timeFormat;
let timeValue = await timeFormat(e.value, 'yyyy-mm-dd');
that.time = timeValue
},
//时间选择器的关闭按钮事件
handleClose() {
this.showTime = false
},
//添加语音
handleAddVoice() {
let that = this
},
// 删除语音
handleDelete() {
console.log('删除')
// const recorderManager = uni.getRecorderManager()
// console.log(recorderManager,'大数据可能')
},
//时间选择器格式化
formatter(type, value) {
if (type === 'year') {
return `${value}年`
}
if (type === 'month') {
return `${value}月`
}
if (type === 'day') {
return `${value}日`
}
return value
},
} }
} }
</script> </script>
<style scoped> <style scoped>
@import url("@/css/form.css");
::v-deep .u-border {
border: 0 !important;
background: #F5F5F5 !important;
}
::v-deep .u-upload__wrap__preview {
margin: 0 6rpx 10rpx 0 !important;
}
</style> </style>
utils/common.css
...@@ -98,6 +98,12 @@ ...@@ -98,6 +98,12 @@
.padding-x-four{ .padding-x-four{
padding: 0 40rpx; padding: 0 40rpx;
} }
.padding-y-two{
padding: 20rpx 0;
}
.padding-bottom-diatence{
padding-bottom: 150rpx !important;
}
.margin-left-one{ .margin-left-one{
margin-left: 10rpx; margin-left: 10rpx;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment