jiaoyi-uni/pages/user/complaint/detail.vue

<template>
	<view>
		<view class="loading-content" v-if="loading">
			<view class="store-header">
				<view class="logo"><view class="skeleton-line animate"></view></view>
				<view class="info">
					<view class="skeleton-line animate"></view>
					<view class="skeleton-line animate mt15"></view>
				</view>
			</view>
			<view class="store-detail">
				<view class="detail-left">
					<view class="skeleton-line animate"></view>
					<view class="skeleton-line animate mt15"></view>
				</view>
			</view>
			<view class="store-goods">
				<view class="goods-item" v-for="(item,index) in 3" :key="index">
					<view class="image"><view class="skeleton-line animate"></view></view>
					<view class="info">
						<view class="skeleton-line animate"></view>
						<view class="skeleton-line animate mt15"></view>
						<view class="skeleton-line animate mt15"></view>
					</view>
				</view>
			</view>
		</view>
		<block v-else>
		<view class="ts-header">
			<view class="ts-h-title">投诉门店</view>
			<view class="store-info">
				<view class="store-left">
					<view class="name">{{dataInfo.store.poi_name}}</view>
					<view class="address">{{dataInfo.store.poi_address}}</view>
				</view>
			</view>
		</view>
		<view class="ts-body">
			<view class="order-status" v-if="dataInfo.status == 0">
				<image src="https://jymini.oss-cn-guangzhou.aliyuncs.com/mini/complaint-2.svg"></image>
			</view>
			<view class="order-status" v-if="dataInfo.status == 1">
				<image src="https://jymini.oss-cn-guangzhou.aliyuncs.com/mini/complaint-3.svg"></image>
			</view>
			<view class="ts-form">
				<view class="ts-form-item">
					<view class="form-title">具体问题 <text>*</text></view>
					<view class="form-input">
						{{dataInfo.question}}
					</view>
				</view>
				<view class="ts-form-item">
					<view class="form-title">问题订单 <text>*</text></view>
					<view class="form-input">
						{{dataInfo.order_sn}}
					</view>
				</view>
				<view class="ts-form-item">
					<view class="form-title">联系方式</view>
					<view class="form-input">
						{{dataInfo.mobile}}
					</view>
				</view>
				<view class="ts-form-item">
					<view class="form-title">详细补充 <text>*</text></view>
					<view class="form-input-text">
						{{dataInfo.content}}
					</view>
				</view>
				<view class="ts-form-item">
					<view class="form-title">回复结果 <text>*</text></view>
					<view class="form-input-text">
						<view class="data" v-html="dataInfo.remark"></view>
					</view>
				</view>
			</view>
		</view>
		</block>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/complaint.js";
export default {
	data() {
		return {
			options:null,
			disabled:false,
			dataInfo:null,
			loading:true
		}
	},
	onLoad(options) {
		app = this;
		app.options = options;
		app.getDetail()
	},
	methods: {
		tipsPop(){
			app.$refs.tspopup.close()
		},
		getDetail(){
			app.loading = true;
			Api.detail(app.options).then((res)=>{
				app.loading = false;
				if (res.code == 0) {
					app.$dialog.showSuccess(validation,"none",function(){
						uni.navigateBack()
					});
					return false;
				}
				app.dataInfo = res.data;
			})
		},
		submitTs(){
			var validation = form.validation(app.options,[
				{name:"content",rule:["required"],msg:["请输入描述内容"]}
			]);
			if(validation){
				app.$dialog.showSuccess(validation);
				return false;
			}
			Api.complaint(app.options).then((res)=>{
				if (res.code == 0) {
					return app.$dialog.showSuccess(res.msg);
				}
				app.$dialog.showSuccess(res.msg,"none",function(){
					uni.navigateBack()
				});
			})
		}
	}
}
</script>

<style>
page{background-color: #f8f8f8;}
.loading-content{margin: 20upx;}
.form-input-text{font-size: 28upx;line-height: 43upx;}
.form-input-text image{width: 100%;}
.form-input-text img{width: 100%;}
.ts-popup{background-color: #fff;width: 90vw;border-radius: 20upx;}
.ts-popup .title{font-size: 32upx;color: #333;font-weight: bold;padding: 30upx 0;text-align: center;}
.ts-popup .sub-title{color: #f00;padding: 20upx 0;text-align: center;font-size: 28upx;}
.ts-popup .tips-body{width: 90%;margin: 0 auto;}
.ts-popup .tips-body .item-title{font-size: 28upx;color: #333;padding: 15upx 0;}
.ts-popup .tips-body .item-desc{font-size: 28upx;color: #333;line-height: 46upx;margin-bottom: 20upx;}
.ts-popup .pup-close{padding-top: 40upx;}
.ts-popup .pup-close .pop-btn{border: 0;background-color: #f00;font-size: 32upx;color: #fff;border-radius: 0 0 20upx 20upx;padding: 15upx 0;cursor: pointer;}

.ts-header{padding: 20upx 0;margin-bottom: 20upx;}
.ts-header .ts-h-title{font-size: 28upx;color: #666;padding: 20upx;}
.ts-header .store-info{background-color: #fff;padding: 20upx;}
.ts-header .store-info .store-left .name{font-size: 30rpx;color: #333;font-weight: bold;line-height: 80upx;}
.ts-header .store-info .store-left .address{font-size: 24rpx;color: #999;}
.ts-body{background-color: #fff;padding: 20upx;position: relative;}

.ts-body .order-status{position: absolute;right: 20upx;top: 20upx;}
.ts-body .order-status image{width: 120upx;height: 120upx;transform: rotate(45deg);}

.ts-form .ts-form-item{border-bottom: 2upx solid #f8f8f8;padding-bottom: 10upx;}
.ts-form .ts-form-item:last-child{border-bottom: 0;}
.ts-form .ts-form-item .form-title{color: #333;font-size: 28upx;padding: 20upx 0;}
.ts-form .ts-form-item .form-title text{color: #f00;margin-left: 10upx;}
.ts-form .ts-form-item .form-input{font-size: 28upx;color: #333;height: 80upx;display: flex;align-items: center;}
.ts-form .ts-form-item .ts-input{height: 100%;border: 0;box-shadow: none;width: 100%;}
.ts-form .form-input-textarea{height: 200upx;font-size: 28upx;color: #333;}
.footer{position: fixed;bottom: 0;background-color: #fff;padding: 20upx 20upx 0 20upx;border-top: 2upx solid #f8f8f8;left: 0;right: 0;}
.footer .footer-safe {height: env(safe-area-inset-bottom);width: 100%;}
.footer .footer-btn{padding: 20upx 0;}
.footer .footer-btn .btn{color: #fff;background-color: #f00;border-radius: 10upx;}
</style>