網(wǎng)站首頁(yè) 編程語(yǔ)言 正文
<template>
<view>
<!-- 評(píng)分 -->
<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>
<!-- 評(píng)價(jià) -->
<view class="discuss">
<view>評(píng)價(jià)</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: '態(tài)度',
value: 5
},
{
id: 2,
title: '服務(wù)',
value: 5
},
{
id: 3,
title: '性價(jià)比',
value: 5
},
{
id: 4,
title: '環(huán)境',
value: 5
},
], // 評(píng)論數(shù)據(jù)
feedback: '',// 反饋
iphone: '',// 聯(lián)系方式
gradeArr: [
{
id: 1,
title: '態(tài)度',
value: 5
},
{
id: 2,
title: '服務(wù)',
value: 5
},
{
id: 3,
title: '性價(jià)比',
value: 5
},
{
id: 4,
title: '環(huán)境',
value: 5
},
], // 評(píng)級(jí)的數(shù)據(jù)
suid: 0, // 客服id
// 上傳
imageList:[],//圖片
src:"",//視頻存放
sourceTypeIndex: 2,
checkedValue:true,
checkedIndex:0,
sourceType: ['拍攝', '相冊(cè)', '拍攝或相冊(cè)'],
cameraList: [{
value: 'back',
name: '后置攝像頭',
checked: 'true'
},
{
value: 'front',
name: '前置攝像頭'
},
],
cameraIndex: 0,
VideoOfImagesShow:true,
};
},
components: {
uRate
},
onUnload() {
this.src = '',
this.sourceTypeIndex = 2,
this.sourceType = ['拍攝', '相冊(cè)', '拍攝或相冊(cè)'];
},
methods:{
// 星星評(píng)級(jí)
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, //默認(rèn)9
sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album','camera'], //從相冊(cè)選擇
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) {
//預(yù)覽圖片
var current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.imageList
})
},
delect(index){
uni.showModal({
title: "提示",
content: "是否要?jiǎng)h除該圖片",
success: (res) => {
if (res.confirm) {
this.imageList.splice(index, 1)
}
}
})
},
delectVideo(){
uni.showModal({
title:"提示",
content:"是否要?jiǎng)h除此視頻",
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;
}
// 評(píng)分
.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;
}
}
// 評(píng)價(jià)
.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
相關(guān)推薦
- 2022-04-11 Python寫一個(gè)簡(jiǎn)單的在線編輯器_python
- 2022-12-24 C++中類的三種訪問權(quán)限解析:private、public與protect_C 語(yǔ)言
- 2022-08-19 Python運(yùn)行時(shí)修改業(yè)務(wù)SQL代碼_python
- 2022-07-06 windows清理系統(tǒng)垃圾bat腳本及使用步驟_DOS/BAT
- 2022-09-13 iOS實(shí)現(xiàn)手動(dòng)和自動(dòng)屏幕旋轉(zhuǎn)_IOS
- 2023-02-10 C/C++?extern關(guān)鍵字用法示例全面解析_C 語(yǔ)言
- 2022-07-24 Nginx靜態(tài)壓縮和代碼壓縮提高訪問速度詳解_nginx
- 2023-07-14 vite配置別名，并處理報(bào)錯(cuò)：找不到模塊“xxx”或其相應(yīng)的類型聲明
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版（
- Linux 中運(yùn)行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符，流程控制 Flo
- 1. Int 和Integer 的區(qū)別，Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過(guò)濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤：Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串（SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列，發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支
提供CDN加速