dengrui/pagesA/evaluate/evaluate.vue

<template>
    <view class="">
        <!-- 使用标题栏 -->
        <status-nav :statusBackw="true" :statusTitle="true" :title-val="'评价'" :tabcolor="'#ffffff'"></status-nav>
        <view :style="{paddingTop:statusHNH+'px'}">
            <view class="margin-s20 bacb padding-zy20 borbot padding-x20">
                <view class="dis padding-sx30">
                    <image class="flexs goodsImg" :src="orderPing.skuList[0].src" mode="aspectFill"></image>
                    <view class="margin-z20">
                        <view class="clips2 fon28 color33">{{orderPing.skuList[0].title}}</view>
                        <view v-if="rateCon!=''" class="fon24 colorf78 margin-s20">已评价{{rateNum}}星,{{rateCon}}.</view>
                    </view>
                </view>
                <view class="borbot"></view>
                <view class="disac fon30 padding-sx30">
                    <view class="color33 margin-y20">商品评价</view>
                    <rate :size="42" :gutter="20" v-model="rateNum" @change="chooseRate"></rate>
                    <view class="color9">{{rateCon}}</view>
                </view>
                <view class="dis padding-sx30 padding-zy30" style="background-color: #f6f6f6;height: 144rpx;border-radius: 8rpx;">
                    <image class="flexs" style="width: 32rpx;height: 35rpx;" src="/static/img/public/evaEdit.png" mode=""></image>
                    <textarea v-model="content" style="height: auto;" maxlength="500" class="fon26 color9 margin-z20" placeholder="多方面描述评价宝，可以帮助等多想买的人哦！" />
                </view>
                <view class=" margin-s20 flexs disac flw padding-x40">
                    <view v-if="imgSrc.length!=0" v-for="(item,index) in imgSrc" :key="index" class="posir margin-y20 margin-x20 pimg-box">
                        <image @tap="previewImg(index)" style="border-radius: 8rpx;height: 159rpx;width: 159rpx;" :src="item" mode="aspectFill"></image>
                        <image @tap="delimg(index)" class="posia" style="width: 30rpx;height: 30rpx;right: 6rpx;top: 6rpx;" src="/static/img/product/pclose.png"  mode=""></image>
                    </view>
                    <view @tap="chooseImg" class="discc margin-x20" style="height: 159rpx;width: 159rpx;border: 1rpx dashed #9c9c9c;border-radius: 8rpx;">
                        <image style="width: 63rpx;height: 57rpx;" src="/static/img/public/bussiness.png" mode=""></image>
                        <view class="fon26 margin-s20" style="color: #7d7b7e;">添加图片</view>
                    </view>
                </view>
            </view>
            <view class="disbc">
                <button class="businessbtn" @tap="submit" :disabled="disabled">{{btncon}}</button>
            </view>
        </view>
    </view>
</template>

<script>
    import rate from '@/components/rate.vue';
    export default {
        components:{
            rate
        },
        data() {
            return {
                imgSrc:[],
                rateNum:5,
                rateCon:'非常好',
                content:'',
                btncon:'提交评价',
                disabled:false,
				orderPing:{},
				chuanImg:'',
				statusHNH:uni.getStorageSync('statusHNH')
            }
        },
		onUnload() {
			uni.removeStorageSync('orderPing')
		},
        onLoad() {
            this.orderPing = uni.getStorageSync('orderPing')
			// console.log('数据：',this.orderPing);
        },
		onShow() {
			this.$toolAll.tools.guoq()
		},
        methods: {
            submit(){//提交评价事件
				this.disabled = true
				this.btncon = '正在提交评价...'
				let pingObj = {
					order_sku_id:this.orderPing.skuList[0].danId,
					grade:this.rateNum,
					content:this.content,
					images:this.chuanImg
				}
				// console.log(pingObj);
				this.$requst.post('order/comment-add',pingObj).then(res=>{
					// console.log(res);
					if(res.code==0){
						this.$toolAll.tools.showToast('提交评论成功')
						this.btncon = '提交评价'
						setTimeout(()=>{
							this.disabled = false
							uni.navigateTo({
								url:'/pagesA/myOrder/myOrder'
							})
						},500)
					}
				},error=>{
					this.disabled = false
					this.$toolAll.tools.showToast('提交评论失败')
				})
            },
            chooseRate(val){
                this.rateNum = val
                if(val==1){this.rateCon = '极差'}
                if(val==2){this.rateCon = '差'}
                if(val==3){this.rateCon = '一般'}
                if(val==4){this.rateCon = '好'}
                if(val==5){this.rateCon = '非常好'}
            },
            chooseImg(){
                uni.chooseImage({
                    count:9,
                    sizeType:['compressed'],
                    success: (res) => {
						let len = res.tempFilePaths.length
						let imgArr = []
                        res.tempFilePaths.forEach(item=>{
							this.$requst.upload('file/upload/image',{file:item}).then(res=>{
								// console.log('图片',res);
								if(res.code==0){//	src原图
									let imgsrc = this.$http + res.data.src//缩略图
									imgArr.push(res.data.src)
									this.imgSrc.push(imgsrc)
									len--
									if(len!=0){
										uni.showToast({
											title:`正在上传第 ${len} 张`,
											icon:'loading'
										})
									} else {
										this.$toolAll.tools.showToast('图片上传成功(*^▽^*)')
										this.chuanImg = imgArr.join(',');
									}
								}
							},error=>{})
                        })
                    }
                })
            },
            previewImg(index){//预览图片
                uni.previewImage({
                    current:index,
                    urls:this.imgSrc
                })
            },
            delimg(index){//删除图片
                this.imgSrc.splice(index,1)
            }
        }
    }
</script>

<style>
</style>