property/user_wxui/work/pages/clean/detail.vue

<template>
	<view class="house">
		<!-- :style="'padding-top:'+nvaHeight+'px;'" -->
		<view class="navbox">
			<uni-nav-bar  color="#272727" left-icon="left"  @clickLeft="getBackFn"  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
				<!-- 暂放详情，评价 -->
			</uni-nav-bar>
		</view>
		<view>
			<swiper  class="swiper" circular :indicator-color="incolorh" :indicator-active-color="activecolorh" :indicator-dots="indicatorDotsh" :autoplay="autoplay">
				<!-- v-if="checkPermi(['system:application:list'])" -->
				<swiper-item>
					<image :src="housebg"></image>
				</swiper-item>
				<swiper-item>
					<image :src="housebg"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- <image :src="housebg" class="navbg"></image> -->
		<view class="wymain">
			<view class="plr15">
				<view class="detop flex mb16">
					<view class="tit"><text class="f13">¥</text> 299</view>
					<view class="tbtn">券后¥249</view>
				</view>
				<view class="detopa mb7 flex">
					<view class="tit">单次深度清洁</view>
					<view class="txt">销量1.2W+单</view>
				</view>
				<view class="detip mb10">单次服务时长3小时(超出部分须支付超时费)</view>
				<view class="detbtns mb15">
					<view>三级证书</view>
					<view>慢必赔</view>
				</view>
				<view class="detlists flexcw mb6">
					<view class="dlist">
						<view class="img">
							<image :src="cleara" class="imga"></image>
						</view>
						<view>全屋整理</view>
					</view>
					<view class="dlist">
						<view class="img">
							<image :src="clearb" class="imgb"></image>
						</view>
						<view>深度清洁</view>
					</view>
					<view class="dlist">
						<view class="img">
							<image :src="clearc" class="imgb"></image>
						</view>
						<view>3重消杀</view>
					</view>
				</view>
			</view>
			<!-- 评价 -->
			<view class="evaluate">
				<view class="tit">用户评价</view>
				<view class="evalist">
					<image :src="housebg" class="limg"></image>
					<view class="flex1 overh">
						<view class="evalr mb14 plr5">
							<view class="flex1 overh">
								<view class="evatit over">183****0624</view>
								<view class="evatime">2024-11-17</view>
							</view>
							<view class="evaimgs flexc flex0">
								<image :src="start"></image>
								<image :src="nstart"></image>
								<view>非常满意</view>
							</view>
						</view>
						<view class="evatxt">按时上门，打扫的特别干净，阿姨干活非常专业，也很认真，速度很快，但是保质保量！</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="rfbtn" @click="getBuyFn">券后 ¥249 | 立即购买</view>
		<buy-pay :type="type" @getAddressFn="getAddressFn" @getClose="getClose"></buy-pay>
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import buyPay from "@/work/components/popup/pay.vue"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{buyPay},
		data(){
			return{
				housebg:require('@/static/images/home/cbga.png'),
				cleara:require('@/work/static/clear/cleara.png'),
				clearb:require('@/work/static/clear/clearb.png'),
				clearc:require('@/work/static/clear/clearc.png'),
				start:require('@/work/static/clear/start.png'),
				nstart:require('@/work/static/clear/nstart.png'),
				backgroundColor: "transparent",
				nvaHeight:44,
				list:[{tit:'123'}],
				pageSize: 10,
				pageNum: 1,
				reachflag: true,
				wtdt:'',
				autoplay:false,
				incolorh:'#E6E6E6',
				activecolorh:'#A7A7A7',
				indicatorDotsh: true,
				type:"buy",
				pjlist:[{tit:"非常满意"},{tit:"满意"},{tit:"一般"},{tit:"差"},{tit:"非常差"},],
			}
		},
		onLoad: function() {
			uni.getSystemInfo({
				success: (e) => {
					this.nvaHeight = Number(e.statusBarHeight)+44;
				}
			})
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#ffffff'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		methods:{
			checkPermi, checkRole,
			getBuyFn(){
				this.type='buy'
				// this.$tab.navigateTo("/work/pages/clean/order")
			},
			getAddressFn(){
				this.$tab.navigateTo("/my/pages/house/address")
			},
			getClose(){
				this.type=''
			},
			getBackFn(){
				uni.navigateBack({
					delta:1
				})
			},
			getDataFn(){
				return
				var params={
					pageSize:this.pageSize,
					pageNum: this.pageNum,
				}
				params.noticeType=this.tabidx
				getNoticeList(params).then(res=>{
					if(res.code==200){
						
					}else{
						this.$toast(res.msg)
					}
				})
				
			},
		}
	}
</script>
<style lang="scss" scoped>
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.swiper{height: 504rpx;image{width: 100%;height: 100%;}}
.wymain{background: #FFFFFF;border-radius: 20rpx 20rpx 0 0;margin-top: -26rpx;z-index: 1;position: relative;padding-top: 40rpx;
	.detop{
		.tit{font-weight: bold;font-size: 40rpx;color: #161616;margin-right: 30rpx;word-break: break-all;}
		.tbtn{background: #FF9E00;height: 46rpx;font-weight: 500;
font-size:24rpx;padding: 0 12rpx;flex: 0 0 auto;color: #FFFFFF;border-radius: 10rpx;line-height: 46rpx;}
	}
	.detopa{
		.tit{font-size: 32rpx;color: #161616;font-weight: bold;flex: 1;}
		.txt{font-weight: 500;margin-left: 30rpx;flex: 0 0 auto;font-size: 24rpx;color: #808080;line-height: 42rpx;}
	}
	.detip{font-weight: 500;font-size: 22rpx;color: #808080;}
	.detbtns{
		display: flex;flex-wrap: wrap;
		view{font-weight: 500;font-size: 24rpx;color: #45CB99;border-radius: 10rpx;height: 44rpx;padding: 4rpx 12rpx;margin-right: 26rpx;border: 2rpx solid #45CB99;margin-bottom: 10rpx;}
	}
	.detlists{padding: 0 30rpx;
		.dlist{display: flex;flex-direction: column;align-items: center;justify-content: center;width: 33.3%;margin-bottom: 20rpx;
			.img{width: 52rpx;height: 52rpx;display: flex;align-items: center;justify-content: center;margin-bottom: 20rpx;
				.imga{width: 52rpx;height: 48rpx;}
				.imgb{width: 44rpx;height: 52rpx;}
			}
			view{font-weight: 500;font-size: 24rpx;color: #666666;}
		}
	}
	// 评价
	.evaluate{border-top: 2rpx solid #E5E5E5;padding:36rpx 18rpx 0;
		.tit{font-weight: bold;font-size: 30rpx;color: #272727;padding-left: 14rpx;}
		// 评价列表
		.evalist{padding: 30rpx 16rpx 32rpx 14rpx;border-bottom: 2rpx solid #E5E5E5;display: flex;margin-bottom: 10rpx;
			.limg{
				width: 78rpx;height: 78rpx;margin-right: 10rpx;flex: 0 0 auto;border-radius: 50%;
			}
			.evaimgs{margin-left: 12rpx;margin-top:22rpx;
				image{width: 20rpx;height: 20rpx;margin-left: 4rpx;}
				view{margin-left: 14rpx;font-weight: 500;font-size: 20rpx;color: #AAAAAA;min-width: 90rpx;}
			}
			.evalr{display: flex;align-items: flex-start;
				.evatit{font-size: 28rpx;font-weight: bold;color: #272727;margin-bottom: 6rpx;margin-top: 8rpx;word-break: break-all;}
				.evatime{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
				
			}
			.evatxt{font-weight: 500;font-size: 26rpx;color: #272727;line-height: 36rpx;}
		}
	}
}
</style>