1.0yangche/pages/packageOne/service/classify/project_detail/project_detail.vue

<template>
	<view class="wrap">
		<view class="serve_title">
			<view class="company">
			    <view class="iconfont company_icon"></view>
			    {{allData.providerName}}
			</view>
			<view class="fuwu_title">{{allData.name}}</view>
			<view class="add">
			    <view class="add_lf">服务有效期:</view>
			    <view class="add_lf" v-if="allData.validityDateFormat != ''">有效期至{{allData.validityDateFormat}}</view>
			    <view class="add_lf" v-else>长期有效</view>
			</view>
			<view class="add">
			    <view class="add_lf">服务预约:</view>
			    <view class="add_lf" v-if="allData.aheadDays != ''">提前{{allData.aheadDays}}天预约</view>
			    <view class="add_lf" wx:else>无需预约</view>
			</view>
			<view class="fuwu_jianjie">
			    <view class="fuwu_title2">服务次数：{{allData.serviceTime}}</view>
			    <view class="fuwu_title3"><text class="dis">¥{{allData.disPrice}}元</text> <text class="price">¥{{allData.price}}元</text></view>
			</view>
		</view>
		<!-- 空白 -->
		<view class="back"></view>
		<!-- 图文详情 -->
		<view class="detail">
		    <view class="detail_line">
				<view class="detail_title">图文详情</view>
		    </view>
		    <view class="detail_content">
		        <view>{{allData.serviceIntroduce}}</view>
		        <image v-for="item,index in allData.imgList" :key="index" :src="url + item" mode="widthFix" class="fuwu_banner_img"></image>
		    </view>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<navigator open-type="reLaunch" url="../../serviceView/serviceView" hover-class="none" class="to_index">
			    <view class="iconfont back_index"></view>
			</navigator>
			<navigator v-if="allData.isEnter == 0" url="" class="ruzhu" hover-class="none">免费入驻</navigator>
			<navigator v-if="allData.isEnter == 1 && allData.isAuthInfo == 0" hover-class="none" class="ruzhu"url="">去认证</navigator>
			<navigator v-if="allData.isEnter == 1 && allData.isAuthInfo == 1 && allData.isPay == 0" url="" class="ruzhu" hover-class="none">去认证</navigator>
			<view v-if="allData.isEnter == 1 && allData.isAuthInfo == 1 && allData.isPay == 1 && allData.isAuthStatus == 0" class="ruzhu" @tap="audit">审核中</view>
			<navigator v-if="allData.isEnter == 1 && allData.isAuthInfo == 1 && allData.isPay == 1 && allData.isAuthStatus == 1" url="" class="ruzhu" hover-class="none">未通过</navigator>
			<navigator v-if="allData.isEnter == 1 && allData.isAuthInfo == 1 && allData.isPay == 1 && allData.isAuthStatus == 2 && allData.roleType == 1" url="" class="ruzhu" hover-class="none">店铺管理</navigator>
			<navigator v-if="allData.isEnter == 1 && allData.isAuthInfo == 1 && allData.isPay == 1 && allData.isAuthStatus == 2 && allData.roleType == 2" url="" class="ruzhu" hover-class="none">店铺管理</navigator>
		</view>
		<!-- 蒙版  删除按钮点击触发 -->
		<view :class="['masking',isMask === 1?'showMask':'']">
		    <view class="delete_wrap">
		        <view class="wrap_top">{{message}}</view>
		        <view class="wrap_bom">
					<view class="wrap_bom_lf" @tap="cancel">取消</view>
					<view class="confirm" @tap="confirmDelete">{{confirm}}</view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import api from "../../../../../api.js";
	export default {
		data() {
			return {
				url:app.globalData.url,
				token:app.globalData.token,
				id:'',//服务项目id
				allData:null,//页面数据
				isMask:0,//蒙版是否显示
				message:'',//蒙版显示信息
				confirm:'',//按钮内容
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getData();
		},
		methods: {
			// 加载数据
			getData(){
				let data = {
					id:this.id,
					token:app.globalData.token
				}
				api.getShopProjectDetail(data).then((res)=>{
					console.log(res);
					this.allData = res.data.data;
				})
			},
			//审核中
			audit(){
				this.message = '认证审核中，请耐心等待。';
				this.confirm = '关闭',
				this.isMask = 1
			},
			  //取消按钮
			cancel() {
			    this.isMask = 0
			},
			  //确认删除按钮
			confirmDelete() {
			    let value = this.confirm;
			    if(value == '去完善'){
			      
			    }else{
			      this.isMask = 0
			    }
			}
		}
	}
</script>

<style>
	page{
	  width:100%;
	  height:100%;
	}
	.fuwu_list_detail{
	  width:100%;
	  overflow: hidden;
	  margin-top:14rpx;
	}
	.company{
	  color:#666666;
	  font-size: 26rpx;
	  margin-left: 32rpx;
	}
	.company_icon{
	  display: inline-block;
	  font-size: 28rpx;
	  color:#979797;
	}
	.fuwu_jianjie{
	  width:100%;
	  overflow: hidden;
	  padding:0 30rpx;
	  box-sizing: border-box;
	  margin-top:10rpx;
	  display: flex;
	  justify-content: space-between;
	}
	.fuwu_title{
	  color:#2A2A2A;
	  font-size:32rpx;
	  font-weight: bold;
	  line-height: 36rpx;
	  margin-top:10rpx;
	  text-indent: 30rpx;
	}
	.fuwu_title2{
	  font-size: 28rpx;
	  color:#2A2A2A;
	  line-height: 36rpx;
	}
	.fuwu_title3{
	  line-height: 36rpx;
	}
	.dis{
	  font-size: 36rpx;
	  color:#E11521;
	  font-weight: bold;
	}
	.price{
	  font-size: 24rpx;
	  color: #999999;
	  text-decoration: line-through;
	  display: inline-block;
	  margin-left: 14rpx;
	}
	.fuwu_banner{
	  width:100%;
	  padding:0 30rpx 42rpx;
	  margin-top:30rpx;
	  box-sizing: border-box;
	}
	.fuwu_banner_img{
	  display: block;
	  width:100%;
	  height:100%;
	}
	.back{
	  width:100%;
	  height:20rpx;
	  background-color: #F7F7F7;
	}
	.detail{
	  width:100%;
	  min-height:600rpx;
	  overflow: hidden;
	  padding:0 30rpx 100rpx;
	  box-sizing: border-box;
	  position: relative;
	}
	.detail_line{
	  width:320rpx;
	  height:2rpx;
	  background-color:#f2f2f2;
	  position: relative;
	  margin:54rpx auto 0;
	}
	.detail_title{
	  font-size: 30rpx;
	  color:#222222;
	  padding:0 20rpx;
	  background-color: #ffffff;
	  position: absolute;
	  top:-20rpx;
	  left:50%;
	  transform: translateX(-50%);
	}
	.detail_content{
	  width:100%;
	  overflow: hidden;
	  margin-top:54rpx;
	  min-height: 100rpx;
	}
	.detail_content view{
	  font-size: 28rpx;
	  color:#666666;
	  line-height: 48rpx;
	}
	.detail_content image{
	  display: block;
	  width:100%;
	  margin:40rpx 0 30rpx 0;
	}
	.footer{
	  width:100%;
	  height:100rpx;
	  background:rgba(255,255,255,1);
	  box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
	  position: fixed;
	  left:0;
	  bottom:0;
	  padding:0 30rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	}
	.to_index{
	  width:calc(100% - 284rpx);
	  height:100%;
	  line-height: 100rpx;
	  text-align: center;
	  float:left;
	}
	.back_index{
	  font-size: 40rpx;
	  color:#222222;
	}
	.ruzhu{
	  width:284rpx;
	  height:72rpx;
	  background:rgba(231,120,23,1);
	  border-radius:6rpx;
	  color:#ffffff;
	  text-align: center;
	  line-height: 72rpx;
	  font-size: 30rpx;
	  float:right;
	  margin-top:14rpx;
	}
	.masking{
	  width:100%;
	  height:100%;
	  background:rgba(0,0,0,0.5);
	  position: absolute;
	  top:0;
	  left:0;
	  z-index:100;
	  display: none;
	}
	.showMask{
	  display: block;
	}
	.delete_wrap{
	  width:600rpx;
	  height:260rpx;
	  background:rgba(255,255,255,1);
	  border-radius:10rpx;
	  position: fixed;
	  top:50%;
	  left:50%;
	  transform: translate(-50%,-50%);
	}
	.wrap_top{
	  font-size: 32rpx;
	  color:#000000;
	  font-weight: bold;
	  text-align: center;
	  height:152rpx;
	  line-height: 152rpx;
	  border-bottom:1px solid #F2F2F2;
	  box-sizing: border-box;
	}
	.wrap_bom_lf{
	  width:50%;
	  border-right: 1px solid #f2f2f2;
	  box-sizing: border-box;
	  font-size: 32rpx;
	  color:#222222;
	  font-weight: bold;
	  text-align: center;
	  line-height: 106rpx;
	  display: inline-block;
	}
	.confirm{
	  width:50%;
	  display: inline-block;
	  text-align: center;
	  line-height: 106rpx;
	  font-size: 32rpx;
	  color:#E77817;
	  font-weight: bold;
	}
	.wrap{
	  width:100%;
	  height:100%;
	  position: relative;
	}
	.add{
	  width: 100%;
	  overflow: hidden;
	  padding: 0 30rpx;
	  box-sizing: border-box;
	  margin-top: 10rpx;
	  display: flex;
	  justify-content: space-between;
	}
	.add_lf{
	  font-size: 28rpx;
	  color: #2A2A2A;
	}
</style>