zd2.0/pages/user/reportForRepair/status2.vue

<template>
	<view class="content">
		<view class="shopContent flex">
			<view class="shoplogo">
				<image class="logo" :src="reportDeatil.store.image" mode="scaleToFill"></image>
			</view>
			<view class="shopDetail">
				<view class="shopName clamp">
					{{reportDeatil.store.name}}
				</view>
				<view class="shopDetailText clamp2" v-if="reportDeatil.processor_uid==0">
					{{reportDeatil.store.detailed_address}}
				</view>
				<view class="shopDetailText" v-if="reportDeatil.processor_uid!=0">
					<view>
						已安排：{{reportDeatil.processor_user.staff_name}}
					</view>
					<!-- <view>
						预计{{detail.time}}小时到达维修地点
					</view> -->
				</view>
			</view>
			<view class="buttomShop" @click="payShopPhonw">
				联系商家
			</view>
		</view>
		<view class="listBox">
			<view class="list">
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">当前车辆</text>
					</view>
					<view class="right flex">
						{{cartInfo.car_name}}
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">维修单号</text>
					</view>
					<view class="right flex">
						{{reportDeatil.order_id}}
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">维修地点</text>
					</view>
					<view class="right flex">
						{{reportDeatil.address}}
					</view>
				</view>
				<!-- <view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">联系电话</text>
					</view>
					<view class="right flex" @click="edit">
						<text class="margin-r-10">
							{{reportDeatil.phone}}
						</text>
						<image class="img" src="../../../static/icon/addressIcon1.png" mode="widthFix"></image>
					</view>
				</view> -->
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">申报时间</text>
					</view>
					<view class="right flex">
						{{reportDeatil.add_time}}
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">故障简述</text>
					</view>
					<view class="right flex">
						{{reportDeatil.content}}
					</view>
				</view>

				<view class="listItem" v-if="imglist.length>0">
					<view class="flex titleBox">
						<text class="title">已传图片</text>
					</view>
					<view class="right flex imgList">
						<view v-if="" class="position-relative margin-r-20" v-for="(item,index) in imglist">
							<image class="upImg" :src="item" mode="scaleToFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="base-buttom" @click="outBxiu">
			撤销报修
		</view>


		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" title="请输入修改手机号" @confirm="editPhone">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		cancel_question
	} from '@/api/user.js';
	export default {
		props: {
			cartInfo: {
				type: Object,
				default: function() {
					return {}
				}
			},
			reportDeatil: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		computed: {
			imglist() {
				return this.reportDeatil.images.split(',')
			}
		},
		data() {
			return {};
		},
		created() {
			// console.log('调用方法2');
		},
		methods: {
			// 撤销报修
			outBxiu() {
				uni.showModal({
					title: '提示',
					content: '是否撤销报修？',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...',
								mask: true
							});
							cancel_question({
								id: this.reportDeatil.id
							}).then((e) => {
								uni.hideLoading()
								uni.showModal({
									title: '提示',
									content: '撤销成功',
									showCancel: false,
									success: res => {
										uni.navigateBack()
									},
								});
							}).catch((e) => {
								uni.hideLoading()
							})
						}
					},
				});
			},
			// 打开修改弹窗
			edit() {
				this.$refs.popup.open();
			},
			editPhone(e) {
				console.log(e, '修改手机号');
			},
			payShopPhonw() {
				uni.makePhoneCall({
					phoneNumber: this.reportDeatil.store.phone //仅为示例
				});
			}

		}
	}
</script>

<style lang="scss">
	.content{
		padding-bottom: 30rpx;
	}
	.base-buttom{
		margin-top: 30rpx;
	}
	.base-buttom {
		color: $color-red;
		border: 1px solid $color-red;
		background-color: $page-color-base;
	}

	.shopContent {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		height: 160rpx;
		padding: 20rpx;
		margin: 0 $page-row-spacing;
		margin-bottom: 20rpx;

		.buttomShop {
			border-radius: 99rpx;
			border: 1px solid $color-green;
			color: $color-green;
			font-size: 24rpx;
			padding: 20rpx 50rpx;
			line-height: 1;
			flex-shrink: 0;
		}

		.shoplogo {
			flex-shrink: 0;
			background-color: $font-color-white;
			width: 120rpx;
			height: 120rpx;
			border-radius: 20rpx;

			.logo {
				height: 100%;
				width: 100%;
				border-radius: 20rpx;
			}
		}

		.shopDetail {
			padding-left: 30rpx;
			flex-grow: 1;

			.shopName {
				line-height: 1;
				margin-bottom: 15rpx;
				font-size: 28rpx;
				color: $font-base;
			}

			.shopDetailText {
				font-size: 22rpx;
				color: $font-color-light;
			}
		}
	}

	.listBox {
		margin: $page-row-spacing;
		margin-top: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.list {
		.input {
			text-align: right;
			font-size: $font-base;
			color: $color-gray;
			width: 100%;
		}

		.listItem {
			padding: 35rpx 40rpx;
			border-bottom: 1px solid $page-color-light;

			.imgList {
				margin-top: 30rpx;
				justify-content: flex-start;

				.topExit {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}

		.listIconImg {
			width: 36rpx;
		}

		.right {
			color: $font-color-light;
			font-size: $font-base;
			justify-content: flex-end;
			position: relative;
			padding-left: 10rpx;

			.img {
				width: 26rpx;
			}

			.upImg {
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
				background-color: $font-color-disabled;
			}

			.textarea_text {
				background-color: $page-color-base;
				width: 100%;
				margin-top: 30rpx;
				border-radius: 20rpx;
				padding: 30rpx;
			}

			.maxShow {
				position: absolute;
				bottom: 10rpx;
				right: 20rpx;
				font-size: 24rpx;
			}

		}

		.titleBox {
			flex-shrink: 0;

			.title {
				color: $font-color-base;
				font-size: $font-base;
			}
		}
	}
</style>