網站首頁 編程語言 正文
<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>
原文鏈接：https://blog.csdn.net/weixin_45966782/article/details/121652150
相關推薦
- 2022-09-15 Python淺析生成器generator的使用_python
- 2022-03-28 Python垃圾回收及Linux?Fork_python
- 2022-07-30 windows安裝matplotlib方法（cmd+pycharm）+cmd不運行python命令解
- 2022-08-02 C#定時器組件FluentScheduler用法_C#教程
- 2022-12-29 react如何將字符串轉義成html語句_React
- 2023-07-26 webpack優化代碼運行之Code split
- 2023-01-03 利用Rust實現一個簡單的Ping應用_Rust語言
- 2022-12-05 numpy中的log和ln函數解讀_python
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速