Skip to content

X
xinrenli-app
Commit 3f063d06 by honghong
Options

提交

parent 24c9921d
Showing with 1259 additions and 220 deletions
App.vue
......@@ -70,4 +70,5 @@ export default {
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import '@/uni_modules/uview-ui/index.scss';
@import url("@/utils/common.css");
</style>
components/chengpeng-audio/free-audio.vue 0 → 100644
<template>
<!-- 音频播放器组件 -->
<view v-if='url' class='flex justify-between align-center audio j-sb'>
<view class="d-flex a-center">
<view class='mr-3' @click='start(audioId)'>
<image :src='startPic' class='icon' v-show='!status'></image>
<image :src='endPic' class='icon' v-show='status'></image>
</view>
<!-- <view class='flex-1'>
<slider @change='changeAudio' :activeColor='activeColor' :min='0' :max='duration.toFixed(0)' :value='currentTime.toFixed(0)' :step='0.1'></slider>
</view> -->
<view>{{getTime(Math.round(currentTime))}}</view>
</view>
<view @click="handleIconDel">
<u-icon name="close-circle-fill" color="#D9001B" size="32"></u-icon>
</view>
</view>
</template>
<script>
export default {
data() {
return {
context: null,
currentTime: 0,
duration: 100,
status: false
}
},
props: {
url: String,
activeColor: {
type: String,
default: '#0E7EFC'
},
startPic: String,
endPic: String,
audioId: [String, Number]
},
created() {
this.context = uni.createInnerAudioContext();
this.context.src = this.url;
this.onTimeUpdate();
this.onCanplay();
this.onEnded();
uni.$on('stop', (id) => {
if (id && id != this.audioId) {
this.context.stop();
this.status = false;
} else if (!id) {
this.context.stop();
this.status = false;
}
})
},
methods: {
handleIconDel(){
this.$emit('delete')
},
start(id) { //点击播放
let audioId = id;
if (this.status) {
this.context.pause();
this.status = !this.status;
} else {
uni.$emit('stop', id)
this.context.play()
this.status = !this.status;
}
},
onCanplay() { //进入可播放状态
this.context.onCanplay(() => {
this.context.duration;
setTimeout(() => {
this.duration = this.context.duration;
}, 1000)
})
},
onTimeUpdate() { //音频播放进度
this.context.onTimeUpdate(() => {
if (!Number.isFinite(this.context.duration)) {
this.duration = this.context.currentTime + 10;
this.currentTime = this.context.currentTime;
} else {
this.duration = this.context.duration;
this.currentTime = this.context.currentTime;
}
})
},
onEnded() { //播放结束
this.context.onEnded(() => {
this.status = false;
this.currentTime = 0;
})
},
changeAudio(e) {
let paused = this.context.paused;
this.context.pause();
this.context.seek(e.detail.value)
if (!paused) {
this.context.play();
}
},
getTime(time) {
let m = parseInt(time / 60);
let s = time % 60;
return this.towNum(m) + ':' + this.towNum(s);
},
towNum(num) {
if (num >= 10) {
return num;
} else {
return '0' + num;
}
}
}
}
</script>
<style>
.audio {
background: #F4F4F4;
padding: 20rpx;
}
.icon {
width: 30rpx;
height: 30rpx;
}
.flex {
display: flex;
flex-direction: row;
}
.justify-between {
justify-content: between;
}
.align-center {
align-items: center;
}
.flex-1 {
flex: 1;
}
.ml-3 {
margin-left: 30rpx;
}
.mr-3 {
margin-right: 30rpx;
}
</style>
components/chengpeng-audio/redme.md 0 → 100644
## 参数
| url | activeColor | startPic | endPic | 组件id |
| -------- | ----------- | -------------- | -------------- | ----------------------------------------------------- |
| 音频链接 | 进度条颜色 | 开始播放的图片 | 暂停播放的图片 | audioId(必填，且id不可为数字0，建议格式 ‘audio’+数字) |
## 使用方法
```javascript
//html
<template>
<free-audio startPic='/static/images/icon/play.png' endPic='/static/images/icon/stop.png' :audioId='audio1' :url='path'></free-audio>
</template>
//js
import freeAudio from '@/components/free-audio.vue'
export default {
components: {freeAudio},
data() {
return{
path: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'
}
},
methods: {
},
}
//暂停所有音频（一般用于页面切换时停止正在播放的音频）
onUnload() { //普通页面在 onUnload 生命周期中执行
uni.$emit('stop')
},
onHide() { //tabBar页面在onHide生命周期中执行
uni.$emit('stop')
}
```
components/comment/comment.vue 0 → 100644
<template>
<view>
<view class="d-flex margin-top-two" v-for="(item,index) in personEvalList">
<img class="avatar-img" :src="item.avatar" alt="">
<view class="flex-1 margin-left-one">
<view class="d-flex a-center j-sb">
<view class="nickname">{{item.nickname}}</view>
<view class="font">{{item.date}}</view>
</view>
<view class="evaluateText">{{item.content}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "comment",
props:{
personEvalList:{
type: Array,
default: () => {
return []
}
}
},
data() {
return {
};
}
}
</script>
<style>
.avatar-img {
width: 84rpx;
height: 84rpx;
border-radius: 50%;
}
.nickname {
font-size: 28rpx;
font-weight: bold;
}
.evaluateText {
margin-top: 10rpx;
font-size: 24rpx;
letter-spacing: 0.5px;
line-height: 36rpx;
}
</style>
components/evaluate.vue 0 → 100644
<template>
<view class="container">
<!-- 评价 -->
<view class="evaluate">
<view class="evaluateCenter">
<view class="evaluateItem" v-for="(item, index) in list" :key="index">
<view class="evaluateTip d-flex a-center j-sb">
<view class="d-flex a-center">
<image class="img" :src="item.image" mode="widthFix"></image>
<view class="evaluate-name">{{ item.name}}</view>
</view>
<view class="font">{{item.time}}</view>
</view>
<view class="evaluate-title">这是文章标题！</view>
<view class="evaluateText" :class="{lineclamp2:item.contentAll}"> {{item.content}} </view>
<!-- <view class="" v-if="item.isMore">
<view class="rightText" v-if="item.contentAll" @click="changeAllFun(item, index)">全部</view>
<view class="rightText" v-else @click="changeAllFun(item, index)">收起</view>
</view> -->
<view class="evaluateListImg">
<view v-for="(itm, ind) in item.imageList" :key="ind">
<image class="evaluateListImgItem" :src="itm.url" mode="scaleToFill"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "evaluateList",
props: {
list: {
type: Array,
required: true,
default: () => {
return []
}
}
},
data() {
return {};
},
created() {
this.getlist()
},
onLoad() {
this.getlist()
},
methods: {
getlist() {
this.list.forEach(item => {
if (item.content.length > 60) {
item.isMore = true
item.contentAll = true
} else {
item.isMore = false
item.contentAll = false
}
})
},
changeAllFun(item, index) {
let list = JSON.parse(JSON.stringify(this.list));
list.forEach((elem, ind) => {
if (index === ind) {
elem.contentAll = !elem.contentAll
}
})
this.list = list
}
}
}
</script>
<style lang="scss" scoped>
.evaluate .evaluateCenter .evaluateItem {
display: inline-block;
}
// 展开收起
.rightText {
color: #4399FC;
text-align: right;
}
.evaluate {
.evaluateCenter {
overflow-x: auto;
.evaluateItem {
.evaluateTip {
//头像
.img {
width: 60rpx;
height: 60rpx;
display: table;
border-radius: 50%;
}
.evaluate-name {
font-size: 28rpx;
margin-left: 10rpx;
}
}
.evaluate-title {
font-size: 28rpx;
font-weight: bold;
margin-top: 10rpx;
}
// 内容样式
.evaluateText {
margin-top: 10rpx;
font-size: 24rpx;
letter-spacing: 0.5px;
line-height: 36rpx;
}
// 超出省略
.lineclamp2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
}
.evaluateListImg {
width: 100%;
.evaluateListImgItem {
width: 210rpx;
height: 210rpx;
float: left;
margin-right: 10rpx;
margin-top: 10rpx;
}
}
}
}
}
</style>
components/record/record.vue 0 → 100644
<template>
<view class="sound-recording">
<view class="time">{{status==0?'录音时长':(status==3?'录音已完成':'正在录音中')}}：{{time}} 秒</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 class="progress">
<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="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>
</view>
</template>
<script>
const recorderManager = uni.getRecorderManager()
const innerAudioContext = uni.createInnerAudioContext()
var init
export default {
data() {
return {
time: 0, //录音时长
duration: 600000, //录音最大值ms 600000/10分钟
tempFilePath: "", //音频路径
status: 0, //录音状态 0:未开始录音 1:正在录音 2:暂停录音 3:已完成录音
playStatus: 0, //录音播放状态 0:未播放 1:正在播放
}
},
methods: {
kaishi: function() {
clearInterval(init) //清除定时器
//监听录音自动结束事件(如果不加，录音时间到最大值自动结束后，没获取到录音路径将无法正常进行播放)
recorderManager.onStop((res) => {
console.log('recorder stop', res)
this.tempFilePath = res.tempFilePath
this.status = 3
this.recordingTimer(this.time)
})
const options = {
duration: this.duration, //指定录音的时长，单位 ms
sampleRate: 16000, //采样率
numberOfChannels: 1, //录音通道数
encodeBitRate: 96000, //编码码率
format: 'mp3', //音频格式，有效值 aac/mp3
frameSize: 10, //指定帧大小，单位 KB
}
this.recordingTimer()
recorderManager.start(options)
// 监听音频开始事件
recorderManager.onStart((res) => {
console.log('recorder start')
this.status = 1
})
console.log(this.status);
},
/**
* 暂停录音
*/
zanting: function() {
console.log('zanting');
recorderManager.onPause(() => {
console.log('recorder pause')
this.status = 2
})
this.recordingTimer(this.time)
recorderManager.pause()
},
/**
* 继续录音
*/
jixu: function() {
this.status = 1
this.recordingTimer()
recorderManager.resume()
},
/**
* 停止录音
*/
tingzhi: function() {
debugger
recorderManager.onStop((res) => {
console.log('recorder stop', res)
this.tempFilePath = res.tempFilePath
this.status = 3
})
this.recordingTimer(this.time)
recorderManager.stop()
},
/**
* 播放录音
*/
bofang: function() {
//音频地址
console.log(this.tempFilePath);
innerAudioContext.src = this.tempFilePath
//在ios下静音时播放没有声音，默认为true，改为false就好了。
// innerAudioContext.obeyMuteSwitch = false
//点击播放
if (this.playStatus == 0) {
this.playStatus = 1
innerAudioContext.play()
}
// //播放结束
innerAudioContext.onEnded(() => {
innerAudioContext.stop()
this.playStatus = 0
})
},
recordingTimer: function(time) {
var that = this
if (time == undefined) {
//将计时器赋值给init
init = setInterval(function() {
var time = that.time + 1;
that.time = time
}, 1000);
} else {
clearInterval(init)
console.log("暂停计时")
}
},
/**
* 重新录制
*/
reset: function() {
var that = this
wx.showModal({
title: "重新录音",
content: "是否重新录制?",
success(res) {
if (res.confirm) {
that.time = 0
that.tempFilePath = ''
that.status = 0
that.playStatus = 0
innerAudioContext.stop()
}
}
})
}
}
}
</script>
<style>
.sound-recording {
background-color: rgb(234, 234, 234);
margin: 10rpx 30rpx;
border-radius: 20rpx;
padding: 5rpx 0rpx;
}
.btn {
margin: 0rpx 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.btn .show {
padding: 10rpx;
width: 200rpx;
font-size: 25rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(178, 228, 228);
border-radius: 20rpx;
border: 5rpx solid rgb(127, 204, 214);
}
.btn .hide {
padding: 10rpx;
width: 200rpx;
font-size: 25rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20rpx;
border: 5rpx solid #eee;
pointer-events: none;
background-color: rgba(167, 162, 162, 0.445);
}
.time {
line-height: 70rpx;
text-align: center;
font-size: 30rpx;
}
.progress {
margin: 20rpx;
}
.play {
margin: 0rpx 20rpx;
}
.txt {
display: flex;
justify-content: center;
line-height: 60rpx;
font-size: 25rpx;
}
.anniu {
margin: 10rpx 50rpx;
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>
\ No newline at end of file
components/upload/aIndex.vue
<template>
<view class="index">
<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple :maxCount="1" width="170" height="170">
<view class="index-upload baiyin-flex baiyin-flex-c-t baiyin-flex-c-b">
<image v-if="imgType === 'camera'" src="@/static/icon/zp1.png" mode="widthFix"></image>
<view class="index-upload-tlo baiyin-flex baiyin-flex-wrap baiyin-flex-c-t baiyin-flex-c-b" v-else-if="imgType === 'cross'">
<image :class="crossTextShow ? 'index-upload-tlo-lp' : ''" src="@/static/icon/zp4.png" mode=""></image>
<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple :maxCount="1" width="210" height="210" :accept="acceptType">
<view class="index-upload d-flex j-center a-center">
<image v-if="imgType === 'camera'" src="@/static/icon/camera.png" mode="widthFix"></image>
<view class="index-upload-tlo d-flex flex-wrap j-center" v-else-if="imgType === 'cross'">
<image :class="crossTextShow ? 'index-upload-tlo-lp' : ''" src="@/static/icon/cross.png" mode=""></image>
<view class="" v-if="crossTextShow">上传</view>
</view>
</view>
......@@ -13,12 +13,16 @@
</template>
<script>
import apiBaseConfig from '@/config/index.js';
// import apiBaseConfig from '@/config/index.js';
export default {
props: {
imgType: {
type: String,
default: 'camera' //camera cross
default: 'cross' //camera cross
},
acceptType:{
type:String,
default:'image'
},
crossTextShow: {
type: Boolean,
......@@ -27,9 +31,19 @@ export default {
},
data() {
return {
imgBgUrl: apiBaseConfig.imgBgUrl,
globalData: getApp().globalData,
fileList6: []
// imgBgUrl: apiBaseConfig.imgBgUrl,
// globalData: getApp().globalData,
fileList6: [
{
url:'https://img2.baidu.com/it/u=955956276,3392954639&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
},
{
url:'https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
},
{
url:'https://img2.baidu.com/it/u=955956276,3392954639&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
},
]
};
},
onLoad() {},
......@@ -40,6 +54,7 @@ export default {
},
// 新增图片
async afterRead(event) {
console.log(event,'短时间内')
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file);
let fileListLen = this[`fileList${event.name}`].length;
......@@ -117,4 +132,7 @@ export default {
}
}
}
.index-upload-tlo-lp{
margin-bottom: 30rpx;
}
</style>
css/form.css 0 → 100644
.form-item-height{
height: 103rpx;
border-bottom: 1px solid #E7E7E7;
padding: 0 30rpx;
}
.form-item-height-only{
height: 103rpx;
padding: 0 30rpx;
}
.form-item-name{
font-size: 26rpx;
}
.input-box > input{
text-align: right;
color: #999999;
font-size: 24rpx;
}
.form-tips{
font-size: 20rpx;
color: #FD0000;
}
.submit-btn{
width: 710rpx;
height: 80rpx;
background: #2C66FF;
border-radius: 10rpx;
font-size: 26rpx;
color: #FFFFFF;
text-align: center;
line-height: 80rpx;
margin: 30rpx auto;
}
.voice-box{
width: 244rpx;
height: 58rpx;
border-radius: 29rpx;
border: 1px solid #2C66FF;
color: #2C66FF;
font-size: 24rpx;
}
\ No newline at end of file
main.js
......@@ -21,6 +21,9 @@ Vue.component('com-upload', comUpload)
import comNavBar from '@/components/navBar/aIndex';
Vue.component('com-navbar', comNavBar)
//人员评论列表
import commentList from '@/components/comment/comment.vue'
Vue.component('comment-list',commentList)
uni.$u.setConfig({
config: {
unit: 'rpx'
......
manifest.json
......@@ -50,9 +50,11 @@
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"appid" : "wx312fb4fecd3ee803",
"setting" : {
"urlCheck" : false
"urlCheck" : false,
"minified" : true,
"postcss" : true
},
"usingComponents" : true,
"optimization" : {
......
order/detail/detail.vue 0 → 100644
<template>
<view>
<view class="padding-x-four d-flex flex-wrap">
<view v-for="item in 6">
<image class="evaluateListImgItem"
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 class="paddding-x-two">
<view class="eval-box">
<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>
<view class="evaluate-name">张三</view>
</view>
<view class="eval-time">发布于2022-11-16</view>
</view>
<view class="evaluateText text-indent">
评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容
</view>
</view>
</view>
<view class="bgWhite">
<view class="padding-aval">
<comment-list :personEvalList="personEvalList"></comment-list>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
personEvalList: [{
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: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
},
]
}
},
methods: {
}
}
</script>
<style>
page{
background: #F7F8F9;
}
.padding-aval{
padding: 30rpx 40rpx;
}
.eval-box{
width: 710rpx;
background: #FFFFFF;
border-radius: 10rpx;
padding: 20rpx 30rpx;
box-sizing: border-box;
margin: 20rpx auto;
}
.evaluate-title {
font-size: 28rpx;
font-weight: bold;
margin-top: 10rpx;
}
/* 头像 */
.img {
width: 60rpx;
height: 60rpx;
display: table;
border-radius: 50%;
}
.evaluate-name {
font-size: 28rpx;
margin-left: 10rpx;
}
.evaluateListImgItem {
width: 210rpx;
height: 210rpx;
margin-right: 10rpx;
margin-top: 10rpx;
}
/* 内容样式 */
.evaluateText {
margin-top: 10rpx;
font-size: 24rpx;
letter-spacing: 0.5px;
line-height: 40rpx;
}
.text-indent{
text-indent: 2rem;
}
.eval-time{
color: #666666;
font-size: 24rpx;
}
</style>
package.json
{
"devDependencies": {
"sass": "^1.58.1",
"sass-loader": "^13.2.0",
"vuex": "^4.1.0"
},
"uni-app": {
"scripts": {
"custom-dev": {
"title": "新人力微信小程序开发版",
"env": {
"UNI_PLATFORM": "mp-weixin",
"UNI_BASE_ENV": "development",
"UNI_BASE_URL": "http://192.168.0.182:8996",
"UNI_BASE_API": "/custom"
},
"define": {
"CUSTOM-DEV": true
}
},
"custom-uat": {
"title": "新人力微信小程序开发版",
"env": {
"UNI_PLATFORM": "mp-weixin",
"UNI_BASE_ENV": "uat",
"UNI_BASE_URL": "http://baiyingroup.nyinhong.com",
"UNI_BASE_API": "/api"
},
"define": {
"CUSTOM-UAT": true
}
},
"custom-prod": {
"title": "新人力微信小程序开发版",
"env": {
"UNI_PLATFORM": "mp-weixin",
"UNI_BASE_ENV": "production",
"UNI_BASE_URL": "https://pepsibdp.masterkong.com.cn",
"UNI_BASE_API": "/api"
},
"define": {
"CUSTOM-PROD": true
}
}
}
"id": "chengpeng-audio",
"name": "音频播放器",
"version": "2.0.3",
"description": "音频播放器组件，支持跳转进度",
"keywords": [
"音频",
"音频播放器",
"audio",
"音乐",
"跳转"
],
"dcloudext": {
"category": [
"前端组件",
"通用组件"
]
}
}
\ No newline at end of file
pages.json
......@@ -27,7 +27,7 @@
{
"path": "pages/order/index",
"style": {
"navigationBarTitleText": "订单"
"navigationBarTitleText": "动态"
}
},
{
......@@ -36,6 +36,7 @@
"navigationBarTitleText": "个人"
}
}
],
//分包加载配置，此配置为小程序的分包加载机制。
"subPackages": [{
......@@ -46,8 +47,7 @@
"navigationBarTitleText": "订单详情",
"enablePullDownRefresh": false
}
}
]
}]
},
{
"root": "my", //子包的根目录
......@@ -57,9 +57,22 @@
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}]
},
{
"root": "order",
"pages": [
{
"path": "detail/detail",
"style": {
"navigationBarTitleText": "动态",
"enablePullDownRefresh": false
}
}
]
}],
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFFFFF",
......
pages/order/index.vue
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
<view class="friends-list-box" @click="handleDetail">
<evaluateList :list="evaluateList"></evaluateList>
<view class="margin-top-two">
<comment-list :personEvalList="personEvalList"></comment-list>
</view>
</view>
</view>
</template>
<script>
import evaluateList from '../../components/evaluate.vue'
export default {
components: {
evaluateList,
},
data() {
return {
title: 'Hello'
evaluateList: [{
name: '马保国',
image: 'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e01ec0ba02a9.jpg',
time: '2021.06.06',
content: '服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵',
imageList: [{
url: 'https://img2.baidu.com/it/u=955956276,3392954639&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
},
{
url: 'https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
},
{
url: 'https://img2.baidu.com/it/u=955956276,3392954639&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
},
{
url: 'https://img2.baidu.com/it/u=955956276,3392954639&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
},
{
url: 'https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
},
{
url: 'https://img2.baidu.com/it/u=955956276,3392954639&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
},
]
}],
personEvalList: [{
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: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
},
]
}
},
onLoad() {
},
methods: {
handleDetail() {
let that = this
that.$uniGo.navigateTo({url:'/order/detail/detail'})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
.friends-list-box {
background-color: #FFFFFF;
padding: 30rpx 20rpx;
border-radius: 10rpx;
margin: 10px 20rpx 0 20rpx;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}
</style>
pages/release/index.vue
<template>
<view class="content">
<image class="logo" src="/static//icon/sytb.png" @click="jump"></image>
<view :style="{ height: `calc(${globalData.statusBarHeight}rpx + 158rpx)` }"></view>
<view class="content-swiper">
<u-swiper :list="swiperList" keyName="img" @change="e => (current = e.current)" :autoplay="true"
height="300rpx">
<view slot="indicator" class="indicator">
<view class="indicator__dot" v-for="(item, index) in swiperList" :key="index"
:class="[index === current && 'indicator__dot--active']"></view>
<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>
</u-swiper>
</view>
<view class="content-matter">
<view class="content-matter-market">
<view></view>
<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 class="content-matter-marketplace" v-for="(v , index) in 10">
<image src="/static//icon/sytb.png" mode=""></image>
<view class="content-matter-marketplace-bazaar">
<view class="">
灯泡灯芯坏了
</view>
<view class="">
说明：有一个字不是特别亮，希望换一盏灯希望换一盏灯希望换一盏灯
<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 class="">
<text>维修时间：</text>
<text>2023-02-23</text>
</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>
<com-navbar :leftIcon="false" :homeShow="false" bgColor="transparent" title="首页"
:titleStyle="{ color: '#FFFFFF', fontSize: '32rpx' }" />
<com-tabbar></com-tabbar>
</view>
</template>
<script>
import apiBaseConfig from '@/config/index.js';
import freeAudio from '@/components/chengpeng-audio/free-audio.vue'
import recordCom from '@/components/record/record.vue'
export default {
components: {
freeAudio,recordCom
},
data() {
return {
title: 'Hello',
imgBgUrl: apiBaseConfig.imgBgUrl,
globalData: getApp().globalData,
showTime: false, //时间选择器是否显示
time: undefined, //时间选择器的值
remark: '',
acceptType: 'video',
path: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
voicePath:''
}
},
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: {
jump() {
uni.navigateTo({
url: `/pages/login/components/agreement`
});
}
}
}
</script>
<style>
page {
background-color: #f3f4f6;
}
</style>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
// align-items: center;
justify-content: center;
&-swiper {
height: 280rpx;
background: #d8d8d8;
border-radius: 10rpx;
overflow: hidden;
width: calc(100% - 20rpx * 2);
margin: 0rpx 20rpx 0rpx;
}
&-matter {
margin: 28rpx 20rpx 50rpx;
&-market {
display: flex;
align-items: center;
margin-bottom: 20rpx;
>view:nth-child(1) {
width: 6rpx;
height: 36rpx;
background: linear-gradient(180deg, #2C66FF 0%, #579FFF 100%);
border-radius: 3rpx;
margin-right: 14rpx;
}
>view:nth-child(2) {
font-size: 28rpx;
font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
font-weight: 500;
color: #333333;
}
}
&-marketplace {
display: flex;
background-color: #ffffff;
border-radius: 8rpx;
padding: 20rpx;
margin-bottom: 20rpx;
// 时间选择器确认事件
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
>image {
width: 170rpx;
height: 170rpx;
margin-right: 20rpx;
}
&-bazaar{
width: 460rpx;
>view:nth-child(1){
font-size: 28rpx;
font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
font-weight: 700;
color: #333333;
margin-top: 8rpx;
}
>view:nth-child(2){
margin-top: 6rpx;
font-size: 24rpx;
font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
font-weight: 400;
color: #444444;
}
>view:nth-child(3){
margin-top: 9rpx;
font-size: 20rpx;
font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
font-weight: 400;
color: #5281FF;
},
// 删除语音
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>
.logo {
width: 100%;
height: 340rpx;
position: absolute;
z-index: -1;
top: 0%;
left: 0%;
}
<style scoped>
@import url("@/css/form.css");
.text-area {
display: flex;
justify-content: center;
::v-deep .u-border {
border: 0 !important;
background: #F5F5F5 !important;
}
.title {
font-size: 36rpx;
color: #8f8f94;
::v-deep .u-upload__wrap__preview {
margin: 0 6rpx 10rpx 0 !important;
}
</style>
utils/common.css 0 → 100644
.d-flex {
display: flex;
}
.row {
box-sizing: border-box !important;
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
}
.d-block {
display: block;
}
.d-inline-block {
display: inline-block;
}
.flex-1 {
flex: 1;
}
/* 设置主轴方向 */
.flex-column {
flex-direction: column;
}
/* 竖（向右） */
.flex-row {
flex-direction: row;
}
/* 横（向左） */
.flex-wrap {
flex-wrap: wrap;
}
/* （换行） */
.flex-nowarp {
flex-wrap: nowarp;
}
/*（不换行） */
/* 设置主轴上的排列方式 */
.j-start {
justify-content: flex-start;
}
/*起点对齐 */
.j-center {
justify-content: center;
}
/* 中间 */
.j-end {
justify-content: flex-end;
}
/*中点对齐 */
.j-sb {
justify-content: space-between;
}
/*两端对齐 */
.j-sa {
justify-content: space-around;
}
/*空间一样 */
/* 设置交叉轴上的排列方式 */
.a-start {
align-items: flex-start;
}
/* 起点 */
.a-center {
align-items: center;
}
/* 中间 */
.a-end {
align-items: flex-end;
}
/* 终点 */
.a-strect {
align-items: stretch
}
/* 充满交叉轴 */
.paddding-x-two{
padding: 0 20rpx;
}
.paddding-x-three{
padding:0 30rpx;
}
.padding-x-four{
padding: 0 40rpx;
}
.margin-left-one{
margin-left: 10rpx;
}
.margin-y-two{
margin: 20rpx 0;
}
.margin-top-two{
margin-top: 20rpx;
}
.must-sign{
font-size: 28rpx;
color: #D9001B;
}
.font-bold {
font-weight: bold;
}
.hiddenTit {
overflow: hidden;
/* 超出的文本隐藏 */
text-overflow: ellipsis;
/* 溢出用省略号显示 */
white-space: nowrap;
/* 溢出不换行 */
width: 162rpx;
}
.hiddenMore {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.hiddenThree {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
white-space: normal;
}
.bgWhite {
background: #FFFFFF;
}
.swiper {
width: 100%;
height: 372rpx;
}
.swiper-item {
width: 100%;
height: 100%;
}
.text-center {
text-align: center;
}
.isOver {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 28rpx;
}
.text-justify {
text-align: justify;
}
.j-se {
justify-content: space-evenly;
}
.font{
font-size: 24rpx;
}
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