Skip to content

X
xinrenli-app
Commit 51184dcc by honghong
Options

2023-3-8语音弹窗

parent 7d02e77f
Showing with 677 additions and 175 deletions
App.vue
......@@ -75,4 +75,8 @@ export default {
<style>
/*每个页面公共css */
@import '@/utils/both.css';
page{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
</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>
<view class="sound-recording">
<view class="time">{{status==0?'录音时长':(status==3?'录音已完成':'正在录音中')}}：{{time}} 秒</view>
<view class="btn">
<view class="time">{{status==0?'录音时长':(status==3?'录音已完成':'正在录音中')}}：<span class="time-span">{{time}}秒</span>
</view>
<!-- <view class="btn">
<view :class="status==3?'show':'hide'" @click="reset" hover-class="jump-hover">重新录制</view>
<view :class="status==3 && playStatus==0?'show':'hide'" @click="bofang" hover-class="jump-hover">{{playStatus==1?'录音播放中':'播放录音'}}</view>
</view>
</view> -->
<view class="progress">
<progress :percent="time*(100/(duration/1000))" border-radius="10" color="#2C66FF" stroke-width="8"
backgroundColor="rgba(44,102,255,0.14)" />
<text class="txt">最大录音时长（{{duration/1000}}秒 = {{duration/60000}}分钟）</text>
<progress :percent="time*(100/(duration/1000))" border-radius="10" color="green" stroke-width="10" backgroundColor="#fff" />
</view>
<view class="anniu">
<view :class="status==0?'row':'no-clicking'" @click="kaishi" hover-class="jump-hover">开始</view>
<view class="d-flex j-sa">
<view class="d-flex flex-column a-center" @click="handleStart">
<img class="record-icon"
: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') "
alt="">
<view>{{status==0 ? '开始' : status==1 ? '暂停' : status==2 ? '继续' : '开始'}}</view>
</view>
<view class="d-flex flex-column a-center" @click="tingzhi">
<img class="record-icon" src="../../static/recordIcon/stop.png" alt="">
<view>停止</view>
</view>
<view class="d-flex flex-column a-center" @click="reset">
<img class="record-icon" src="../../static/recordIcon/again.png" alt="">
<view>重新录制</view>
</view>
<view class="d-flex flex-column a-center" @click="bofang">
<img class="record-icon" src="../../static/recordIcon/play.png" alt="">
<view>{{playStatus==1?'录音播放中':'播放录音'}}</view>
</view>
</view>
<!-- <view :class="status==0?'row':'no-clicking'" @click="kaishi" hover-class="jump-hover">开始</view>
<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>
<view :class="status==1 || status==2?'row':'no-clicking'" @click="tingzhi" hover-class="jump-hover">停止</view>
<view :class="status==1 || status==2?'row':'no-clicking'" @click="tingzhi" hover-class="jump-hover">停止</view> -->
</view>
</view>
</template>
......@@ -33,6 +56,16 @@
}
},
methods: {
handleStart() {
let that = this
if (that.status == 0) {
that.kaishi()
} else if (that.status == 1) {
that.zanting()
} else if (that.status == 2) {
that.jixu()
}
},
kaishi: function() {
clearInterval(init) //清除定时器
//监听录音自动结束事件(如果不加，录音时间到最大值自动结束后，没获取到录音路径将无法正常进行播放)
......@@ -65,7 +98,6 @@
* 暂停录音
*/
zanting: function() {
console.log('zanting');
recorderManager.onPause(() => {
console.log('recorder pause')
this.status = 2
......@@ -103,7 +135,7 @@
*/
bofang: function() {
//音频地址
console.log(this.tempFilePath);
console.log(this.tempFilePath, '音频地址');
innerAudioContext.src = this.tempFilePath
//在ios下静音时播放没有声音，默认为true，改为false就好了。
// innerAudioContext.obeyMuteSwitch = false
......@@ -157,11 +189,22 @@
</script>
<style>
.sound-recording {
/* .sound-recording {
background-color: rgb(234, 234, 234);
margin: 10rpx 30rpx;
border-radius: 20rpx;
padding: 5rpx 0rpx;
} */
.time-span {
font-size: 24rpx;
color: #2C66FF;
font-weight: bold;
}
.record-icon {
width: 50rpx;
height: 50rpx;
}
.btn {
......@@ -199,7 +242,7 @@
.time {
line-height: 70rpx;
text-align: center;
font-size: 30rpx;
font-size: 24rpx;
}
.progress {
......@@ -219,8 +262,9 @@
.anniu {
margin: 10rpx 50rpx;
display: flex;
justify-content: space-between;
font-size: 24rpx;
/* display: flex;
justify-content: space-between; */
}
.row {
......
demand/payment/index.vue
......@@ -37,6 +37,14 @@
<image src="@/static/icon/jt.png" mode=""></image>
</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 class="content-accomplish">
<view class="">
截止1小时内支付完成 <text>00:59:42</text>
......@@ -54,7 +62,8 @@
imgBgUrl: apiBaseConfig.imgBgUrl,
globalData: getApp().globalData,
scrollTopHeader: 0,
times:'0'
times:'0',
isUse:true
};
},
onLoad() {},
......@@ -69,6 +78,10 @@
url: `/demand/confirm/index`
});
}
},
changeUse(e){
let that = this
that.isUse = e
}
}
}
......@@ -77,6 +90,12 @@
page {
background: #F7F8F9;
}
.u-switch__node{
background: #888888 !important;
}
.u-switch__node--on{
background: #2C66FF !important;
}
</style>
<style lang="scss" scoped>
.content {
......
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>
<view>
<view style="padding-bottom: 100rpx;">
<view class="padding-x-four d-flex flex-wrap">
<view v-for="item in 6">
<image class="evaluateListImgItem"
......@@ -12,7 +13,9 @@
<view class="evaluate-title">文章标题文章标题文章标题文章标题文章标题</view>
<view class="d-flex a-center j-sb margin-top-two">
<view class="d-flex a-center">
<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>
<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>
<view class="evaluate-name">张三</view>
</view>
......@@ -28,6 +31,13 @@
<comment-list :personEvalList="personEvalList"></comment-list>
</view>
</view>
</view>
<view class="comment-box">
<view class="paddding-x-two comment-box-height d-flex a-center j-sb">
<input class="send-input" type="text" placeholder="评论一下吧">
<view class="send-btn-box">发送</view>
</view>
</view>
</view>
</template>
......@@ -48,6 +58,24 @@
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: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
},
{
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 @@
</script>
<style>
page{
page {
background: #F7F8F9;
}
.padding-aval{
.padding-aval {
padding: 30rpx 40rpx;
}
.eval-box{
.eval-box {
width: 710rpx;
background: #FFFFFF;
border-radius: 10rpx;
......@@ -72,11 +102,13 @@
box-sizing: border-box;
margin: 20rpx auto;
}
.evaluate-title {
font-size: 28rpx;
font-weight: bold;
margin-top: 10rpx;
}
/* 头像 */
.img {
width: 60rpx;
......@@ -89,12 +121,14 @@
font-size: 28rpx;
margin-left: 10rpx;
}
.evaluateListImgItem {
width: 210rpx;
height: 210rpx;
margin-right: 10rpx;
margin-top: 10rpx;
}
/* 内容样式 */
.evaluateText {
margin-top: 10rpx;
......@@ -102,11 +136,47 @@
letter-spacing: 0.5px;
line-height: 40rpx;
}
.text-indent{
.text-indent {
text-indent: 2rem;
}
.eval-time{
.eval-time {
color: #666666;
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>
pages.json
......@@ -21,13 +21,19 @@
{
"path": "pages/release/index",
"style": {
"navigationBarTitleText": "发布"
"navigationBarTitleText": "发布",
"mp-weixin": {
"navigationStyle": "custom"
}
}
},
{
"path": "pages/order/index",
"style": {
"navigationBarTitleText": "动态"
"navigationBarTitleText": "动态",
"mp-weixin": {
"navigationStyle": "custom"
}
}
},
{
......@@ -76,6 +82,13 @@
"navigationStyle": "custom"
}
}
}, {
"path": "login/login",
"style": {
"navigationBarTitleText": "授权登录",
"enablePullDownRefresh": false
}
}]
},
{
......@@ -107,20 +120,25 @@
"navigationBarTitleText": "支付成功",
"enablePullDownRefresh": false
}
}, {
"path": "updateForm/updateForm",
"style": {
"navigationBarTitleText": "订单修改",
"enablePullDownRefresh": false
}
}
]
},
{
"root": "order",
"pages": [
{
"pages": [{
"path": "detail/detail",
"style": {
"navigationBarTitleText": "动态",
"enablePullDownRefresh": false
}
}
]
}]
}
],
"globalStyle": {
......
pages/demand/components/index.vue
......@@ -25,9 +25,13 @@
<button class="buttonclde" @click.stop="abolish(1)">取消订单</button>
</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 class="unpaid" v-if="subscript == '2'">
<view class="unpaid-paid">
......@@ -105,6 +109,13 @@
this.show = true
}
},
//重新发布按钮事件
handleAgainAdd(){
let that = this
that.$uniGo.navigateTo({
url:'/demand/updateForm/updateForm'
})
},
// 再看看
aindex(){
this.show = false
......@@ -223,10 +234,12 @@
}
.reject {
margin-top: 40rpx;
margin-top: 20rpx;
font-size: 24rpx;
font-weight: 400;
color: #FD0000;
line-height: 33rpx;
letter-spacing: 3rpx;
}
.unpaid {
......
pages/my/index.vue
......@@ -25,7 +25,7 @@
</view>
<image src="@/static/icon/my09.png" mode=""></image>
</view>
<view class="content-in-btn">
<view class="content-in-btn" @click="handleLogin">
<u-button
text="退出登录"
color="#EA654E"
......@@ -162,6 +162,11 @@ export default {
url: row.url
});
}
},
handleLogin(){
this.$uniGo.navigateTo({
url:'/my/login/login'
})
}
}
};
......
pages/order/index.vue
<template>
<view class="content">
<view :style="{ height: `calc(${globalData.statusBarHeight}rpx + 130rpx)` }"></view>
<view class="friends-list-box" @click="handleDetail">
<evaluateList :list="evaluateList"></evaluateList>
<view class="margin-top-two">
<comment-list :personEvalList="personEvalList"></comment-list>
</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>
</template>
......@@ -17,6 +52,7 @@
},
data() {
return {
globalData: getApp().globalData,
evaluateList: [{
name: '马保国',
image: 'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e01ec0ba02a9.jpg',
......@@ -54,6 +90,30 @@
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: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
},
{
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 @@
methods: {
handleDetail() {
let that = this
that.$uniGo.navigateTo({url:'/order/detail/detail'})
that.$uniGo.navigateTo({
url: '/order/detail/detail'
})
}
}
......
pages/release/index.vue
<template>
<view>
<recordCom></recordCom>
<view class="paddding-x-two">
<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="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 :style="{ height: `calc(${globalData.statusBarHeight}rpx + 130rpx)` }"></view>
<view class="paddding-x-two ">
<releaseForm></releaseForm>
<view class="submit-btn">发布需求</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>
</template>
<script>
import freeAudio from '@/components/chengpeng-audio/free-audio.vue'
import releaseForm from '@/components/form.vue'
import recordCom from '@/components/record/record.vue'
export default {
components: {
freeAudio,recordCom
releaseForm,
recordCom,
},
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:''
globalData: getApp().globalData,
}
},
onShow() {
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: {
// 时间选择器确认事件
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>
<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>
utils/common.css
......@@ -98,6 +98,12 @@
.padding-x-four{
padding: 0 40rpx;
}
.padding-y-two{
padding: 20rpx 0;
}
.padding-bottom-diatence{
padding-bottom: 150rpx !important;
}
.margin-left-one{
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