You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

687 lines
19 KiB

<template>
<view>
<uni-nav-bar :statusBar="true" left-icon="left" title="Review" color="#FFF" backgroundColor="#000" :fixed="true" @clickLeft="back">
<block slot="right">
<view class="nav_right">
<button @click="reviewSub">Submit</button>
</view>
</block>
</uni-nav-bar>
<view class="body" v-for="(item,index) in orderDate " :key="index">
<view class="order_popup_commodity">
<view class="good_info" >
<view class="good_info_left ">
<view class="good_info_image">
<image :src="item.goods_thumb || item.goods_img" mode=""></image>
</view>
<view class="left_info">
<view class="info_name">{{item.goods_name}}</view>
<view class="left_info_bottom">
<view class="info_lable" v-if="item.goods_attr">
<text>{{item.goods_attr |goodsAttr}}</text>
<!-- <image src="/static/img/bottom.png" mode=""></image> -->
</view>
</view>
</view>
</view>
</view>
</view>
<view class="review">
<view class="review_title">
<text>Score</text>
<uni-rate size="22" disabledColor="#B22234" v-model="query.comment_rank" active-color="#B22234" :is-fill="false" class="rate" v-if="reviewType==0"/>
<uni-rate size="22" disabledColor="#B22234" v-model="query1.comments[index].comment_rank" active-color="#B22234" :is-fill="false" class="rate" v-else/>
</view>
<view class="review_content">
<image src="../../static/img/write.png" mode=""></image>
<textarea placeholder="Write reviews" v-if="reviewType==0" v-model="query.comment"></textarea>
<textarea placeholder="Write reviews" v-else v-model="query1.comments[index].comment"></textarea>
</view>
<view class="reason_upload">
<view class="reason_upload_item" @click="UploadVideo(index)">
<!-- <view class="reason_upload_item1 margin_left" @click="deleteImg(VideoId)" v-model="VideoId" v-if="VideoSrc"></view> -->
<image src="/static/img/vedio.png" class="upload_item_camera1" mode=""v-if="!item.src"></image>
<video :src="item.src" class="upload_item_image" mode=""
:id="item.src"
v-model="item.video_id"
controls
:autoplay="false"
object-fit="contain"
:poster="item.src"
@play="play(item,index)"
@fullscreenchange="fullscreenchange(item)"
@timeupdate="timeupdate"
v-else>
</video>
<view v-if="!item.src">Upload the video</view>
</view>
<view class="reason_upload_item " v-for="(item1,index1) in item.imglist" :key="index1">
<view class="reason_upload_item1" @click="deleteImg(0,item1.id,item,index,item1,index1)" v-model="item1.id"></view>
<image :src="item1.url" class="upload_item_image" mode="" @click="clickIMg(item1.url)"></image>
</view>
<view class="reason_upload_item" @click="Upimg(index)">
<image src="/static/img/camera.png" class="upload_item_camera" mode="" ></image>
<!-- <image :src="imgSrc" class="upload_item_camera" mode="" v-else></image> -->
<view>Upload pictures</view>
</view>
</view>
<view class="reason_upload_tips">Upload JPG, PNG format, within 3M</view>
<view class="reason_upload_tips"></view>
<view class="reason_upload_tipV" @click="deleteImg(1,item.video_id,item,index)" v-if="item.src">Delete Video</view>
<!-- <view style="height: 100rpx;width: 100rpx;">
<image :src="imgSrc" class="upload_item_image" style="height: 100%;width: 100%;"mode="" ></image>
</view> -->
</view>
</view>
</view>
</template>
<script>
import {defaultRequest,defaultRequest2,defaultRequest3} from '../../api/index.js'
import { encryptDes, decryptDes ,encrypt_by_des } from '@/utils/des.js'
import Base64 from 'base-64';
import cryptoJS from "crypto-js"
import { pathToBase64 } from '@/js_sdk/mmmm-image-tools/index.js'
export default {
data() {
return {
orderDate:[],
// 评论状态 0、单个评论 1批量评论
reviewType:0,
query:{
_action:'commentordergoods',
order_id:'',
order_sn:'',
rec_id:'',
goods_id:'',
comment:'',
comment_rank:'',
commentlabels:''
},
query1:{
_action:'commentorder',
order_id:'',
order_sn:'',
comments:[]
},
VideoSrc:'',
VideoId:'',
imgSrc:'',
imglist:[],
videoPlay: false,
videoUrl: '',
upvlist:[],
ids:'',
is_play:true,//是否自动播放
videoContext:'',
json_data:{
appcode:'DOPE+' ,//应用编码
appchannel:'FXXXXHUAWEI' ,//应用发布渠道
appver: '1.0.0',//应用版本
appname:'cnic_buyer' ,//应用名称
manufacturer:'HUAWEI' ,//设备生产商
phonebrand:'HORNOR' ,//设备品牌
phonetype:'X30' ,//设备型号
phoneos:'ANDROID',// 设备系统
}
}
},
methods:{
// 播放时进入全屏
play(item,index) {
this.VideoId = item.src
console.log(111)
// this.is_play = item.is_play
this.videoContext = uni.createVideoContext(item.src, this)
this.videoContext.requestFullScreen()
},
//退出全屏时暂停
fullscreenchange(item) {
// if (!e.detail.fullScreen) {
// uni.createVideoContext(item.src, this).pause();
// }
},
//视频播放
timeupdate(e){
console.log(e)
console.log(this.VideoId)
// if(e.detail.currentTime > 0){
// this.is_play = false
// // console.log(this.is_play)
// uni.createVideoContext(this.VideoId, this).pause();
// }
},
reviewSub(){
this.ids = this.ids.substring(0,this.ids.lastIndexOf(','))
this.query.attachments = this.ids
this.query1.comments.map(item =>{
item.attachments = item.attachments.substring(0,item.attachments.lastIndexOf(','))
})
// this.query1.comments = JSON.stringify(this.query1.comments)
// this.query1 = JSON.parse(this.query1)
if(this.reviewType==0){
this.commentordergoods()
}else{
this.query1.comments.attachments = this.ids
// data=this.query1
this.commentordergoods1()
}
// defaultRequest(this.query).then( res =>{
// console.log(res)
// if(res.error==0){
// uni.showToast({
// icon:'none',
// title:'Comment successful!'
// })
// setTimeout(function(){
// uni.navigateBack()
// },2000)
// }
// })
},
// 单个评论内容
commentordergoods(){
defaultRequest2(this.query).then(res=>{
console.info(res)
console.log(this.query)
if(res.error==0){
uni.showToast({
icon:'none',
title:'Comment successful!',
duration: 2000
})
setTimeout(function(){
uni.navigateBack()
},2000)
}
})
},
// 批量评论内容
commentordergoods1(){
// let str = Object.assign(this.json_data,this.query1)
// console.log(str)
// let data = encryptDes(JSON.stringify(str),'6780f04cf2e211ec86a8005056c00008');
// let str2 = decryptDes(data,'6780f04cf2e211ec86a8005056c00008')
// console.log(str2)
// uni.request({
// url:'https://lilbeattranapismits.dopeplus.com/mapi/api_v2011.php?appcode=DOPE+',
// method:'POST',
// data:data,
// success(res) {
// let res2= decryptDes(res.data,'6780f04cf2e211ec86a8005056c00008');
// console.log(JSON.parse(res2))
// },
// })
defaultRequest2(this.query1).then(res=>{
console.info(res)
console.log(this.query1)
// let str = encryptDes(JSON.stringify(this.query1),'6780f04cf2e211ec86a8005056c00008');
// console.log(str)
if(res.error==0){
uni.showToast({
icon:'none',
title:'Comment successful!',
duration: 2000
})
setTimeout(function(){
uni.navigateBack()
},2000)
}
})
},
clickIMg(url){
console.log(url)
let list = []
list.push(url)
wx.previewImage({
urls:list, //需要预览的图片http链接列表,
current: url,
indicator:'number',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
},
back(){
uni.navigateBack()
},
// 上传视频
UploadVideo(index){
var that = this
const json_data={
appcode:'DOPE+' ,//应用编码
appchannel:'FXXXXHUAWEI' ,//应用发布渠道
appver: '1.0.0',//应用版本
appname:'cnic_buyer' ,//应用名称
manufacturer:'HUAWEI' ,//设备生产商
phonebrand:'HORNOR' ,//设备品牌
phonetype:'X30' ,//设备型号
phoneos:'ANDROID',// 设备系统
_action:'uploadcommentfile',//上传图片
atype: 2,//视频类型
// afile:res.tempFiles[0]
}
let data = encryptDes(JSON.stringify(json_data),'6780f04cf2e211ec86a8005056c00008');
uni.chooseVideo({
sourceType: ['camera', 'album'],
success: function (res) {
console.log(res)
// that.VideoSrc = res.tempFilePath;
uni.uploadFile({
url: 'https://lilbeattranapismits.dopeplus.com/mapi/api_v2011.php?appcode=DOPE+',
filePath: res.tempFilePath,
name: 'afile',
formData:{
'data':data
},
success: (uploadFileRes) => {
console.log(uploadFileRes);
let data=decryptDes(uploadFileRes.data,'6780f04cf2e211ec86a8005056c00008');
console.log(JSON.parse(data));
let lists = JSON.parse(data)
that.VideoSrc = lists.data.attachment_url
console.log(that.orderDate)
that.orderDate[index].src = lists.data.attachment_url
that.orderDate[index].video_id = lists.data.attachment_id
that.orderDate[index].is_play = true
console.log(that.orderDate)
uni.setStorageSync('orderDate',that.orderDate)
that.ids += lists.data.attachment_id +','
console.log(that.ids)
uni.startPullDownRefresh()
that.query1.comments[index].attachments +=(lists.data.attachment_id) +','
uni.setStorageSync('ids',that.ids)
}
});
}
})
},
// 上传图片
Upimg(index){
var that = this
let url
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
console.info(res)
console.log(JSON.stringify(res.tempFilePaths));
const tempFilePaths = res.tempFilePaths
console.log(res.tempFiles[0])
uni.getImageInfo({
src: res.tempFilePaths[0],
success: (path) => {
pathToBase64(path.path).then(base64 => {
// console.log(base64); // 这就是转为base64格式的图片
url = base64
})
.catch(error => {
console.error(error)
})
}})
const json_data={
appcode:'DOPE+' ,//应用编码
appchannel:'FXXXXHUAWEI' ,//应用发布渠道
appver: '1.0.0',//应用版本
appname:'cnic_buyer' ,//应用名称
manufacturer:'HUAWEI' ,//设备生产商
phonebrand:'HORNOR' ,//设备品牌
phonetype:'X30' ,//设备型号
phoneos:'ANDROID',// 设备系统
_action:'uploadcommentfile',//上传图片
atype: 1,//图片类型
// afile:res.tempFiles[0]
}
//加密
let data = encryptDes(JSON.stringify(json_data),'6780f04cf2e211ec86a8005056c00008');
let file = encryptDes(JSON.stringify(res.tempFiles[0]),'6780f04cf2e211ec86a8005056c00008')
uni.uploadFile({
url:'https://lilbeattranapismits.dopeplus.com/mapi/api_v2011.php?appcode=DOPE+',
filePath: tempFilePaths[0],
name: 'afile',
formData:{
'data':data
},
success: (uploadFileRes) => {
console.log(uploadFileRes);
let data=decryptDes(uploadFileRes.data,'6780f04cf2e211ec86a8005056c00008');
console.log(JSON.parse(data));
let lists = JSON.parse(data)
let imglist = []
// that.imglist.push({
// id:lists.data.attachment_id,
// url:lists.data.attachment_url
// })
// that.imgSrc = lists.data.attachment_url
// this.imglist = this.imglist.push(lists.data)
that.orderDate[index].imglist.push({
id:lists.data.attachment_id,
url:lists.data.attachment_url
})
console.log(that.orderDate)
uni.setStorageSync('orderDate',that.orderDate)
uni.setStorageSync('orderDate',that.orderDate)
uni.startPullDownRefresh()
// that.ids.push(lists.data.attachment_id)
that.ids += lists.data.attachment_id +','
console.log(that.query1)
console.log(that.ids)
that.query1.comments[index].attachments +=(lists.data.attachment_id) +','
console.log(that.query1)
}
});
}
});
console.log(this.imglist)
},
//删除图片和视频
deleteImg(e,id,item,index,item1,index1){
if(e==0){
let id = item.id
console.log(item)
item.imglist.map(i =>{
if(i.id == item1.id){
console.log(111)
item.imglist.splice(index1,1)
console.log(item.imglist)
this.orderDate[index].imglist = item.imglist
uni.setStorageSync('orderDate',this.orderDate)
}
})
}else{
this.orderDate[index].src =''
this.orderDate[index].video_id =''
uni.setStorageSync('orderDate',this.orderDate)
}
this.orderDate = uni.getStorageSync('orderDate')
console.log(this.orderDate)
console.log(this.ids)
// this.ids.map(i =>{
// if(i==id){
// this.ids=this.ids.slice(id)
// }
// })
this.ids = this.ids.replace(id+',','')
console.log(this.ids)
// 多评论
this.query1.comments.map( i =>{
const id_index2 = i.attachments.indexOf(id)
i.attachments = i.attachments.replace(id+',','')
this.query1.comments[index].attachments = i.attachments
console.log(i.attachments)
console.log(typeof(i.attachments))
})
console.log(this.query1)
}
},
onLoad(e) {
let that = this;
let s = 0;
let time = setInterval(() => {
uni.getNetworkType({
success: (res) => {
console.log(res.networkType, s);
if (res.networkType == 'none') {
uni.showToast({
icon: 'none',
title: 'Please connect to the network',
duration: 3000,
})
} else if (res.networkType !== 'none') {
that.typee = 2;
clearInterval(time);
// uni.showToast({
// icon: 'none',
// title: 'Please connect to the network',
// duration: 3000,
// })
}
}
})
s++;
}, 1000);
let datas=JSON.parse(e.data)
console.log(datas)
// let orderDate = uni.getStorageSync('orderDate')
// this.ids = uni.getStorageSync('ids')
// if(orderDate){
// this.orderDate = orderDate
// }else{
// this.orderDate=datas.order_goods
// }
this.query.order_id = datas.order_id
this.query.order_sn = datas.order_sn
this.query.goods_id = datas.order_goods[0].goods_id
this.query.rec_id = datas.order_goods[0].grec_id
this.orderDate=datas.order_goods
this.orderDate.map(item =>{
if(!item.imglist){
item.imglist = []
}
item.src =''
item.video_id =''
})
if(datas.order_goods.length>1){
this.reviewType=1
this.query1.order_id=datas.order_id
this.query1.order_sn=datas.order_sn
datas.order_goods.map(item=>{
let data={
rec_id:item.rec_id,
goods_id:item.goods_id,
comment:'',
comment_rank:'',
commentlabels:item.goods_attr.replace(/\s\n/g,' '),
attachments:''
}
this.upvlist.push({
src:''
})
this.query1.comments.push(data)
})
}else{
this.query.order_id=datas.order_id
this.query.order_sn=datas.order_sn
this.query.rec_id=datas.order_goods[0].rec_id
this.query.goods_id=datas.order_goods[0].goods_id
this.commentlabels=datas.order_goods[0].goods_attr.replace(/\s\n/g,' ')
}
console.log(this.query1)
},
onPullDownRefresh(){
if(this.ids.length>0){
this.orderDate = uni.getStorageSync('orderDate')
}
setTimeout(function () {
uni.stopPullDownRefresh();
}, 1000);
},
filters:{
goodsAttr(e){
return e.replace(/\s\n/g,';');
}
}
}
</script>
<style lang="scss" scoped>
.review{
padding: 0 26rpx;
padding-top: 35.33rpx;
.review_title{
display: flex;
align-items: center;
font-weight: bold;
font-size: 32rpx;
margin-bottom: 44rpx;
.rate{
margin-left: 24.67rpx;
}
}
.review_content{
display: flex;
image{
width: 29.33rpx;
height: 29.33rpx;
}
textarea{
font-size: 28rpx;
font-weight: 400;
width: 100%;
height: 113.33rpx;
margin-left: 4rpx;
}
}
.reason_upload{
display: flex;
z-index:10;
background-color: #fff;
flex-wrap: wrap;
margin-bottom: 34.67rpx;
.reason_upload_item{
border: 1px dashed #D2D2D2;
background-size: 100% !important;
border-radius: 15rpx;
width: 156rpx;
height: 156rpx;
margin-top:5rpx;
z-index:19;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 12rpx;
color: #BFBCBC;
margin-right: 23.33rpx;
margin-left: 6rpx;
image{
height: 100%;
width: 100%;
}
&:nth-child(3n+3){
margin-right: 0;
}
.upload_item_camera{
width: 72rpx;
height: 54.67rpx;
margin-bottom: 14rpx;
}
.upload_item_camera1{
width: 72rpx;
height: 72rpx;
// margin-bottom: 14rpx;
}
.upload_item_camera2{
width: 156rpx;
height: 156rpx;
z-index:10 !important;
background-color: #ccc;
}
.upload_item_image{
// background-color: aqua;
width: 100%;
height: 100%;
border-radius: 15rpx;
z-index:20 !important;
}
}
.reason_upload_item1{
position: relative;
&::after{
content: "";
z-index:25;
width: 30.67rpx;
height: 30.67rpx;
position: absolute;
margin-left: 65rpx;
top: -12rpx;
background-image: url("@/static/img/close3.png");
background-size: 100% 100%;
}
}
.margin_left{
margin-left: 30rpx;
}
}
.reason_upload_tips{
font-size: 20rpx;
color: #666666;
}
.reason_upload_tipV{
margin-top: 20rpx;
margin-bottom: 20rpx;
font-size: 24rpx;
color: #8c0000;
}
}
.uni-navbar{
font-size: 32rpx;
font-weight: bold;
}
.nav_right{
button{
width: 116.67rpx;
height: 48rpx;
background-color: black;
margin: 0;
line-height: 48rpx;
border-radius: 24rpx;
font-size: 24rpx;
font-weight: bold;
color: white;
padding-left: 0;
padding-right: 0;
}
}
.body{
border-top: 14.67rpx #F6F5FA solid;
padding-bottom: 40rpx;
}
.order_popup_commodity{
padding: 0 33.33rpx;
border-bottom: 14.67rpx #F6F5FA solid;
}
</style>