1.0yangche/components/shop_error/shop_error.vue

<template>
	<view class="wrap">
		<view class="header">
			<view class="back"></view>
			<view class="error_class">
			    <view class="error_class_header">
					<view class="error_title">
						出错类型
						<view class="line"></view>
					</view>
			    </view>
			    <view class="error">
			        <view v-for="item,index in error_list"  :key="index" 
															:class="['error_one',isshow === index?'active':'']" 
															@tap="changeActive(item)">{{item.title}}</view>
			    </view>
			</view>
			<view class="back"></view>
		</view>
		<messageError v-if="isshow == 0" :storeid="storeid" :type="type"></messageError>
		<noBussiness v-else :storeid="storeid" :type="type"></noBussiness>
	</view>
</template>

<script>
	import messageError from "@/components/message_error/message_error";
	import noBussiness from "@/components/no_bussiness/no_bussiness";
	export default {
		data() {
			return {
				error_list:[
				    {index:0, id: 1, title:'信息错误'},
				    {index:1, id: 2, title:'不营业'}
				],
				isshow:0,//导航栏显示
				storeid:'',
				type:'信息错误',//报错类型
			}
		},
		onLoad(options) {
			console.log(options);
			this.storeid = options.id;
		},
		components:{
			messageError,
			noBussiness
		},
		methods: {
			changeActive(item){
				this.isshow = item.index;
				this.type = item.title
			}
		}
	}
</script>

<style scoped>
	.back{
	  width:100%;
	  height:20rpx;
	  background-color: #F7F7F7;
	  border-top:1px solid #f2f2f2;
	  box-sizing: border-box;
	}
	.error_class{
	  width:100%;
	  overflow: hidden;
	}
	.error_class_header{
	  padding-left: 30rpx;
	  box-sizing: border-box;
	}
	.error_title{
	  font-size: 32rpx;
	  color:#222222;
	  font-weight: bold;
	  margin-top:32rpx;
	  position: relative;
	  padding-left: 14rpx;
	}
	.line{
	  width:6rpx;
	  height:30rpx;
	  background-color: #E77817;
	  position: absolute;
	  top:6rpx;
	  left:0rpx;
	}
	.error{
	  width:100%;
	  padding:0 48rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	  margin-top:40rpx;
	  padding-bottom: 40rpx;
	}
	.error_one{
	  width:calc(50% - 11rpx);
	  height:72rpx;
	  background:rgba(255,255,255,1);
	  border-radius:2rpx;
	  border:2rpx solid rgba(207,207,207,1);
	  text-align: center;
	  line-height: 72rpx;
	  display: inline-block;
	  box-sizing: border-box;
	  margin-right: 11rpx;
	  font-size: 28rpx;
	  color:#222222;
	}
	.error_one:nth-child(2){
	  margin-right: 0;
	  margin-left: 11rpx;
	}
	.active{
	  background:rgba(250,225,203,1);
	  border:1px solid rgba(231,120,23,1);
	  color:#E77817;
	}
</style>