|
@@ -1,132 +1,377 @@
|
|
|
<template>
|
|
|
- <view :style="{ minHeight: sys.windowHeight + 'px' }"
|
|
|
- :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
|
|
|
+ <view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
|
|
|
<tm-menubars title="我的评价" :shadow="0" :showback="true"></tm-menubars>
|
|
|
<div class="zhuti">
|
|
|
<tm-sheet class="kuang" style="padding-bottom: 70px !important;">
|
|
|
<view style="width: 94%;margin:0 auto;">
|
|
|
- <tm-cartCellListFood class="shangpin" :typeclick="typeclick" :mdata="item" :cart-num.sync="item.buy"></tm-cartCellListFood>
|
|
|
+ <tm-cartCellListFood class="shangpin" :typeclick="typeclick" :mdata="item"
|
|
|
+ :cart-num.sync="item.buy"></tm-cartCellListFood>
|
|
|
<view class="tiyan">
|
|
|
<text class="text-white mr-20">产品体验</text>
|
|
|
<tm-rate v-model="rate1"></tm-rate>
|
|
|
- <text class="ml-20 text-size-s">非常满意</text>
|
|
|
+ <text class="ml-20 text-size-s" v-if="rate1==5">非常满意</text>
|
|
|
+ <text class="ml-20 text-size-s" v-if="rate1<=4&&rate1>3">比较满意</text>
|
|
|
+ <text class="ml-20 text-size-s" v-if="rate1<=3&&rate1>0">一般满意</text>
|
|
|
</view>
|
|
|
<view class="tiyan">
|
|
|
<text class="text-white mr-20">派送评价</text>
|
|
|
<tm-rate v-model="rate2"></tm-rate>
|
|
|
- <text class="ml-20 text-size-s">比较满意</text>
|
|
|
+ <text class="ml-20 text-size-s" v-if="rate2==5">非常满意</text>
|
|
|
+ <text class="ml-20 text-size-s" v-if="rate2<=4&&rate2>3">比较满意</text>
|
|
|
+ <text class="ml-20 text-size-s" v-if="rate2<=3&&rate2>0">一般满意</text>
|
|
|
</view>
|
|
|
<view class="tiyan">
|
|
|
<text class="text-white mr-20">服务态度</text>
|
|
|
<tm-rate v-model="rate3"></tm-rate>
|
|
|
- <text class="ml-20 text-size-s">一般满意</text>
|
|
|
+ <text class="ml-20 text-size-s" v-if="rate3==5">非常满意</text>
|
|
|
+ <text class="ml-20 text-size-s" v-if="rate3<=4&&rate3>3">比较满意</text>
|
|
|
+ <text class="ml-20 text-size-s" v-if="rate3<=3&&rate3>0">一般满意</text>
|
|
|
</view>
|
|
|
- <tm-input class="shuru" :height="150" title="" :maxlength="144" :border-bottom="false" placeholder="快来发表评论吧!" input-type="textarea" v-model="val_1" bg-color="grey-lighten-5" clear></tm-input>
|
|
|
+ <tm-input class="shuru" :height="150" title="" :maxlength="144" :border-bottom="false"
|
|
|
+ placeholder="快来发表评论吧!" input-type="textarea" v-model="val_1" bg-color="grey-lighten-5" clear>
|
|
|
+ </tm-input>
|
|
|
<view class="mt-30">
|
|
|
- <tm-upload :tips="false" :filelist.sync="filelist"></tm-upload>
|
|
|
+ <view class="">
|
|
|
+ <view class="cent-bottom-m">
|
|
|
+ <view class="uploadImg" style="display: flex;justify-content: flex-start;flex-wrap: wrap;align-items: flex-start;">
|
|
|
+ <view v-for="(el, index) in fileList" :key="index">
|
|
|
+ <view class="uploadImg-image" >
|
|
|
+ <image @click="checkImgbox(fileList, index)" :src="imgUrl+el"
|
|
|
+ mode="aspectFill" style="width: 100%;height: 100%;border-radius: 4px;">
|
|
|
+ </image>
|
|
|
+ <view class="jian" @click="popImg(index)">
|
|
|
+ <tm-button class="shanchu" theme="white" size="s" icon="icon-times">
|
|
|
+ </tm-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="jia-btn" @click="openImagePage" v-if="uploadFlag">
|
|
|
+ <view class="jia">
|
|
|
+ <view>
|
|
|
+ <tm-button theme="white" size="m" icon="icon-plus"></tm-button>
|
|
|
+ </view>
|
|
|
+ <view style="font-size: 12px;">上传图片</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <tm-upload :tips="false" :filelist.sync="filelist" max='5'></tm-upload> -->
|
|
|
</view>
|
|
|
<tm-button :round="24" class="sao" block @click="submit">提交</tm-button>
|
|
|
</view>
|
|
|
</tm-sheet>
|
|
|
-
|
|
|
+
|
|
|
</div>
|
|
|
<!-- 弹出层消息 -->
|
|
|
<tm-message ref="toast"></tm-message>
|
|
|
</view>
|
|
|
-</template>
|
|
|
+</template>
|
|
|
<script>
|
|
|
-import{myRequest} from '@/api/request.js'
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- item: {
|
|
|
- img: '../../static/img/83.png',
|
|
|
- title: '丝缎质感纹理风衣',
|
|
|
- label: '黑色 - 6518/320',
|
|
|
- size:'S',
|
|
|
- price: '1299',
|
|
|
- id: 3,
|
|
|
- buy: 0,
|
|
|
- itemId: 0,
|
|
|
- checked:false,
|
|
|
- },
|
|
|
- typeclick:5,//1加入购物车,2购物车
|
|
|
- rate1:1,
|
|
|
- rate2:2,
|
|
|
- rate3:3,
|
|
|
- val_1:'',
|
|
|
- filelist:["https://picsum.photos/200?v=555","https://picsum.photos/200?v=555"],
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.sys = uni.getSystemInfoSync();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- aa(num){
|
|
|
- if(num==1){
|
|
|
- this.checked1=true;
|
|
|
- this.checked2=false;
|
|
|
- this.checked3=false;
|
|
|
- }else if(num==2){
|
|
|
- this.checked1=false;
|
|
|
- this.checked2=true;
|
|
|
- this.checked3=false;
|
|
|
- }else if(num==3){
|
|
|
- this.checked1=false;
|
|
|
- this.checked2=false;
|
|
|
- this.checked3=true;
|
|
|
+ import {
|
|
|
+ myRequest
|
|
|
+ } from '@/api/request.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ item: {
|
|
|
+ img: '../../static/img/83.png',
|
|
|
+ title: '丝缎质感纹理风衣',
|
|
|
+ label: '黑色 - 6518/320',
|
|
|
+ size: 'S',
|
|
|
+ price: '1299',
|
|
|
+ id: 3,
|
|
|
+ buy: 0,
|
|
|
+ itemId: 0,
|
|
|
+ checked: false,
|
|
|
+ },
|
|
|
+ // typeclick:5,//1加入购物车,2购物车
|
|
|
+ typeclick: 7, //1加入购物车,2购物车
|
|
|
+ rate1: 0,
|
|
|
+ rate2: 0,
|
|
|
+ rate3: 0,
|
|
|
+ val_1: '',
|
|
|
+ // filelist:["https://picsum.photos/200?v=555","https://picsum.photos/200?v=555"],
|
|
|
+ // filelist:[],
|
|
|
+ fileList: [],
|
|
|
+ imgUrl: "",
|
|
|
+ sizeType: ['compressed'],
|
|
|
+ imageList: [], // 申诉图片地址
|
|
|
+ uploadFlag: true, // 申诉图片大于3张隐藏上传按钮
|
|
|
+ orNo: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+ console.log(op);
|
|
|
+ if (op) {
|
|
|
+ this.orNo = op.no;
|
|
|
}
|
|
|
},
|
|
|
- // 提交评价
|
|
|
- submit(){
|
|
|
- console.log('11');
|
|
|
- myRequest({
|
|
|
- url:'/api/Order/orderEvaluate',
|
|
|
- method:'post',
|
|
|
- data:{
|
|
|
- experience_value:'' ,
|
|
|
- delivery_value:'',
|
|
|
- service_value:'',
|
|
|
- atlas:'',
|
|
|
- content:''
|
|
|
+ created() {
|
|
|
+ if (!uni.getStorageSync("token")) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/login/index",
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.sys = uni.getSystemInfoSync();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openImagePage() {
|
|
|
+ let that = this;
|
|
|
+ if (that.fileList.length > 5) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "最多支持5张图片",
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ return;
|
|
|
}
|
|
|
- }).then(res=>{
|
|
|
- if(res.data.code==200){
|
|
|
- console.log(res.data.data,'pingjia1!!');
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 1,
|
|
|
+ sizeType: ['compressed'],
|
|
|
+ sourceType: ['album', 'camera'],
|
|
|
+ success: function(res) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '图片上传中'
|
|
|
+ });
|
|
|
+ that.uploadImage(res.tempFilePaths)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ uploadImage(tempFilePaths) {
|
|
|
+ let _this = this;
|
|
|
+ uni.uploadFile({
|
|
|
+ url: 'http://yigui.liliju.com/common/uploads/upload', //接口地址
|
|
|
+ header: {
|
|
|
+ "token": uni.getStorageSync('token'),
|
|
|
+ }, //请求token
|
|
|
+ filePath: tempFilePaths[0],
|
|
|
+ name: 'file',
|
|
|
+ success: (res) => {
|
|
|
+ let data = JSON.parse(res.data);
|
|
|
+ console.log(data);
|
|
|
+ let url = data.data.yimg;
|
|
|
+ console.log(url, 'url');
|
|
|
+ // 选中图片
|
|
|
+ if (_this.fileList.indexOf(url) == -1) {
|
|
|
+ _this.fileList.push(url);
|
|
|
+ console.log(_this.fileList, 'haah');
|
|
|
+ }
|
|
|
+ uni.hideLoading();
|
|
|
+ if (_this.fileList.length > 5) {
|
|
|
+ _this.uploadFlag = false
|
|
|
+ } else {
|
|
|
+ _this.uploadFlag = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ checkImgbox(fileList, index) { //放大图片
|
|
|
+ console.log(fileList, index, 999)
|
|
|
+ let arr = [];
|
|
|
+ fileList.forEach((el) => {
|
|
|
+ arr.push(this.imgUrl + el);
|
|
|
+ })
|
|
|
+ uni.previewImage({
|
|
|
+ urls: arr,
|
|
|
+ current: index
|
|
|
+ });
|
|
|
+ },
|
|
|
+ popImg(index) { //删除图片
|
|
|
+ this.fileList.splice(index, 1);
|
|
|
+ if (this.fileList.length < 1) {
|
|
|
+ this.uploadFlag = true
|
|
|
}
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
-}
|
|
|
+ },
|
|
|
+ // 上传图片
|
|
|
+ aa(num) {
|
|
|
+ if (num == 1) {
|
|
|
+ this.checked1 = true;
|
|
|
+ this.checked2 = false;
|
|
|
+ this.checked3 = false;
|
|
|
+ } else if (num == 2) {
|
|
|
+ this.checked1 = false;
|
|
|
+ this.checked2 = true;
|
|
|
+ this.checked3 = false;
|
|
|
+ } else if (num == 3) {
|
|
|
+ this.checked1 = false;
|
|
|
+ this.checked2 = false;
|
|
|
+ this.checked3 = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 提交评价
|
|
|
+ submit() {
|
|
|
+ if (this.rate1 == 0 || this.rate2 == 0 || this.rate3 == 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择满意度',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ } else if (this.val_1 == '') {
|
|
|
+ uni.showToast({
|
|
|
+ title: '内容不能为空',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ let that = this;
|
|
|
+ myRequest({
|
|
|
+ url: '/api/Order/orderEvaluate',
|
|
|
+ method: 'post',
|
|
|
+ data: {
|
|
|
+ id: that.orNo,
|
|
|
+ experience_value: that.rate1,
|
|
|
+ delivery_value: that.rate2,
|
|
|
+ service_value: that.rate3,
|
|
|
+ atlas: that.fileList.join(','),
|
|
|
+ content: that.val_1
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ console.log(res.data.data, 'pingjia1!!');
|
|
|
+ that.$refs.toast.show({
|
|
|
+ model: 'success',
|
|
|
+ label: res.data.msg
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ that.$refs.toast.show({
|
|
|
+ model: 'error',
|
|
|
+ label: res.data.msg
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- /deep/ .tm-menubars .body{
|
|
|
+ /deep/ .tm-menubars .body {
|
|
|
background-color: #1b1b1b !important;
|
|
|
}
|
|
|
- /deep/ .zhuti{padding: 10px 10px;}
|
|
|
- /deep/ .kuang{margin:0 !important;padding: 0px !important;}
|
|
|
- .sao{width: 90%;margin: 0 auto;margin-top: 20px;}
|
|
|
- /deep/ .shuliang .text-size-n{color: white !important;}
|
|
|
- /deep/ .kuang .white.bk{background-color:#1b1b1b!important;}
|
|
|
- /deep/ .shangpin .tm-cartCellListFood{padding: 0px 0px 15px 0px !important;
|
|
|
- margin-top: 5px !important;margin-bottom: 20px !important;
|
|
|
- border-bottom: 1px solid #1B1B1B;}
|
|
|
- /deep/ .kuang .border-t-1.bk{border-top:1px solid #1b1b1b!important;}
|
|
|
- /deep/ .shangpin .title{color: white !important;}
|
|
|
- /deep/ .shangpin .text-red{color: white !important;}
|
|
|
- /deep/ .shangpin .round-3{width:90px !important;height:90px !important;}
|
|
|
- /deep/ .shangpin .tm-cartCellListFood-img{width:90px !important;height:90px !important;}
|
|
|
- /deep/ .shuliang .text-size-n{color: white !important;}
|
|
|
- .tiyan text{vertical-align: middle;}
|
|
|
- .tiyan{margin-top: 20px;}
|
|
|
- /deep/ .tiyan .text-primary.bk{color: #FFCC00 !important;}
|
|
|
- /deep/ .tiyan .opacity-6{opacity:1 !important;}
|
|
|
- /deep/ .shuru .grey-darken-4{background: #0D0D0D !important;}
|
|
|
- .shuru{padding:0px !important;margin-top: 20px !important;}
|
|
|
+
|
|
|
+ /deep/ .zhuti {
|
|
|
+ padding: 10px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .kuang {
|
|
|
+ margin: 0 !important;
|
|
|
+ padding: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadImg-image {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ margin: 0px 10px 10px 0px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shanchu {
|
|
|
+ position: absolute;
|
|
|
+ right: -15px;
|
|
|
+ top: -5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .jia .tm-button-btn {
|
|
|
+ padding: 0px !important;
|
|
|
+ margin: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .jia .tm-button-btn .px-12 {
|
|
|
+ padding: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .uploadImg-image .white {
|
|
|
+ background: none !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .jia .white {
|
|
|
+ background: none !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sao {
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .shuliang .text-size-n {
|
|
|
+ color: white !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .shangpin .tm-cartCellListFood {
|
|
|
+ padding: 0px 0px 15px 0px !important;
|
|
|
+ margin-top: 5px !important;
|
|
|
+ margin-bottom: 20px !important;
|
|
|
+ border-bottom: 1px solid #1B1B1B;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .kuang .border-t-1.bk {
|
|
|
+ border-top: 1px solid #1b1b1b !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .shangpin .title {
|
|
|
+ color: white !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .shangpin .text-red {
|
|
|
+ color: white !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .shangpin .round-3 {
|
|
|
+ width: 90px !important;
|
|
|
+ height: 90px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .shangpin .tm-cartCellListFood-img {
|
|
|
+ width: 90px !important;
|
|
|
+ height: 90px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .shuliang .text-size-n {
|
|
|
+ color: white !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tiyan text {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tiyan {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .tiyan .text-primary.bk {
|
|
|
+ color: #FFCC00 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .tiyan .opacity-6 {
|
|
|
+ opacity: 1 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .shuru .grey-darken-4 {
|
|
|
+ background: #0D0D0D !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shuru {
|
|
|
+ padding: 0px !important;
|
|
|
+ margin-top: 20px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jia {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jia-btn {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ }
|
|
|
</style>
|