<template>
<view>
<!-- 评分 -->
<view class="grade" v-for="(item,index) in talk" :key="index">
<view>
<view>{{item.title}}</view>
<view>
<uni-rate v-model="item.value" @change="(e)=>{onChange(e,item,index)}" activeColor="red" />
</view>
</view>
<view>1.0分</view>
</view>
<!-- 评价 -->
<view class="discuss">
<view>评价</view>
<view>
<textarea value="" placeholder="" />
</view>
</view>
<!-- 上传 -->
<view class="up_photo_video">
<view class="up_photo_video_m_b">
<view class="up_photo_video_m" @tap="chooseVideoImage(1)">
<view>
<image src="../../static/icon/up.png"></image>
</view>
<view>上传图片</view>
</view>
<view class="up_photo_video_m" style="margin-left: 20rpx;" @tap="chooseVideoImage(2)">
<view>
<image src="../../static/icon/up.png"></image>
</view>
<view>上传视频</view>
</view>
</view>
<view class="burst-wrap-bg">
<view>
<!-- 信息提交 -->
<view class="burst-info">
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<!-- 图片 -->
<view class="image_b">
<block v-for="(image,index) in imageList" :key="index">
<view class="uni-uploader__file">
<view class="delete_x" @click.stop="delect(index)">X</view>
<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
</view>
</block>
</view>
<!-- 视频 -->
<view class="uni-uploader__file" v-if="src">
<view class="uploader_video">
<view class="icon iconfont icon-cuo" @tap="delectVideo"></view>
<video :src="src" class="video"></video>
</view>
</view>
<view class="uni-uploader__input-box" v-if="VideoOfImagesShow">
<view class="uni-uploader__input" @tap="chooseVideoImage"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import uRate from '@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue'
export default {
data() {
return {
talk: [
{
id: 1,
title: '态度',
value: 5
},
{
id: 2,
title: '服务',
value: 5
},
{
id: 3,
title: '性价比',
value: 5
},
{
id: 4,
title: '环境',
value: 5
},
], // 评论数据
feedback: '',// 反馈
iphone: '',// 联系方式
gradeArr: [
{
id: 1,
title: '态度',
value: 5
},
{
id: 2,
title: '服务',
value: 5
},
{
id: 3,
title: '性价比',
value: 5
},
{
id: 4,
title: '环境',
value: 5
},
], // 评级的数据
suid: 0, // 客服id
// 上传
imageList:[],//图片
src:"",//视频存放
sourceTypeIndex: 2,
checkedValue:true,
checkedIndex:0,
sourceType: ['拍摄', '相册', '拍摄或相册'],
cameraList: [{
value: 'back',
name: '后置摄像头',
checked: 'true'
},
{
value: 'front',
name: '前置摄像头'
},
],
cameraIndex: 0,
VideoOfImagesShow:true,
};
},
components: {
uRate
},
onUnload() {
this.src = '',
this.sourceTypeIndex = 2,
this.sourceType = ['拍摄', '相册', '拍摄或相册'];
},
methods:{
// 星星评级
onChange(d,title,index) {
console.log(d)
let obj ={
id: title.id,
star:d.value,
title:title.title
}
this.$set(this.gradeArr,index,obj)
console.log(this.gradeArr)
},
// 上传
chooseVideoImage(msg){
console.log(msg)
if(msg == 1){
this.chooseImages()
}else{
this.chooseVideo()
}
// uni.showActionSheet({
// title:"选择上传类型",
// itemList: ['图片','视频'],
// success: (res) => {
// console.log(res)
// if(res.tapIndex == 0){
// this.chooseImages()
// } else {
// this.chooseVideo()
// }
// }
// })
},
chooseImages(){
// 上传图片
uni.chooseImage({
count: 9, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album','camera'], //从相册选择
success:(res)=> {
this.imageList = this.imageList.concat(res.tempFilePaths);
if(this.imageList.length == 4) {
this.VideoOfImagesShow = false
}
}
});
},
chooseVideo(){
// 上传视频
console.log('上传视频')
uni.chooseVideo({
maxDuration:10,
count: 1,
camera: this.cameraList[this.cameraIndex].value,
sourceType: ['album','camera'],
success: (res) => {
console.log(JSON.stringify(res.tempFilePath),'视频')
this.src = res.tempFilePath;
console.log(this.src)
}
})
},
previewImage: function(e) {
//预览图片
var current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.imageList
})
},
delect(index){
uni.showModal({
title: "提示",
content: "是否要删除该图片",
success: (res) => {
if (res.confirm) {
this.imageList.splice(index, 1)
}
}
})
},
delectVideo(){
uni.showModal({
title:"提示",
content:"是否要删除此视频",
success:(res) =>{
if(res.confirm){
this.src = ''
}
}
})
}
}
}
</script>
<style lang="less" scoped>
* {
margin: 0;
padding: 0;
}
page {
background: #F5F7F9;
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.hidden {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
// 评分
.grade{
height: 52rpx;
width: 92%;
margin: 0 auto;
margin-top: 50rpx;
.flex;
>view:first-child{
height: 52rpx;
width: 80%;
display: flex;
align-items: center;
>view:first-child{
height: 52rpx;
width: 25%;
font-size: 28rpx;
font-weight: 550;
line-height: 52rpx;
}
>view:last-child{
height: 52rpx;
width: 100%;
}
}
>view:last-child{
height: 52rpx;
width: 18%;
line-height: 52rpx;
text-align: right;
font-size: 24rpx;
color: #1D1D2C;
}
}
// 评价
.discuss{
height: 232rpx;
width: 92%;
margin: 0 auto;
margin-top: 80rpx;
>view:first-child{
height: 40rpx;
width: 100%;
font-size: 24rpx;
color: #767783;
}
>view:last-child{
height: 160rpx;
width: 100%;
margin-top: 34rpx;
background: #FFFFFF;
border-radius: 4px;
>textarea{
height: 160rpx;
width: 100%;
font-size: 24rpx;
}
}
}
// 上传
.up_photo_video{
width: 92%;
margin: 0 auto;
margin-top: 30rpx;
.up_photo_video_m_b{
height: 200rpx;
width: 100%;
display: flex;
.up_photo_video_m{
height: 200rpx;
width: 200rpx;
background: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
>view:first-child{
height: 80rpx;
width: 80rpx;
>image{
height: 80rpx;
width: 80rpx;
}
}
>view:last-child{
height: 40rpx;
width: 100%;
line-height: 40rpx;
text-align: center;
font-size: 24rpx;
}
}
}
}
.image_b{
height: auto;
width: 100%;
display: flex;
flex-wrap: wrap;
// background: red;
}
.uni-uploader__file{
height: 200rpx;
width: 200rpx;
position: relative;
margin-left: 20rpx;
margin-top: 20rpx;
}
.uni-uploader__img{
height: 200rpx;
width: 200rpx;
}
.delete_x{
height: 40rpx;
width: 40rpx;
position: absolute;
top: 10rpx;
right: 4rpx;
font-size: 28rpx;
z-index: 9999;
}
</style>
提供CDN加速