|
|
@@ -1,924 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="details">
|
|
|
- <view class="content_top">
|
|
|
-
|
|
|
-
|
|
|
- <view class="detail-content">
|
|
|
- <view class="show_img">
|
|
|
- <image :src="$globalData.publicUrl+ detail.cCover" />
|
|
|
- </view>
|
|
|
- <view class="content">
|
|
|
- <view class="name">
|
|
|
- <view class="names"> <text></text> {{detail.cTitle}}</view>
|
|
|
- <view class="price">
|
|
|
- <!-- <image src="/static/identify/time.png" />{{detail.nMinute}}分钟 -->
|
|
|
- ¥<text>{{price}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="time">{{detail.nMinute}}分钟/超{{detail.nSaleNumber}}人选择</view>
|
|
|
- <view class="state">
|
|
|
- <!-- <view class="state1">适用说明</view> -->
|
|
|
- <view class="state2">性别限制:不限</view>
|
|
|
- <view class="state2">
|
|
|
- 适用人群:{{detail.cSyrq}}
|
|
|
- </view>
|
|
|
- <view class="state2">
|
|
|
- 功能作用:{{detail.cLdList}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="service">
|
|
|
- 服务履约保障
|
|
|
- </view>
|
|
|
- <view class="three">
|
|
|
- <view>
|
|
|
- <image src="/static/identify/approve.png" mode=""></image>实名认证
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <image src="/static/identify/approve.png" mode="">爽约包赔
|
|
|
- </view>
|
|
|
- <view @click="goApprove(details.id)">
|
|
|
- <image src="/static/identify/approve.png" mode="">商户认证
|
|
|
- <!-- <image src="/static/identify/more.png" mode=""></image> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-<!-- <view class="bottom">
|
|
|
- <view class="recommend">
|
|
|
- <view class="option" :class="current == 0?'cleck_recommend':''" @click="current =0">
|
|
|
- 项目介绍
|
|
|
- </view>
|
|
|
- <view class="option" :class="current == 1?'cleck_recommend':''" @click="current =1">
|
|
|
- 推荐商户
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="cDetail" style="width: 100%;" v-if="current == 0">
|
|
|
- <image :src="$globalData.publicUrl + detail.cDetail" style="" />
|
|
|
- </view>
|
|
|
- <view class="recommend_js" v-else>
|
|
|
- <view class="item" v-for="(item,index) in jsList" :key="index" @click.stop="godetails(item.id)">
|
|
|
- <view class="itemL">
|
|
|
- <view class="hot" v-if="item.nB3 == 1">
|
|
|
- <image src="https://moxiaoxiang.com/h5/static/xg.gif" mode="" />
|
|
|
- </view>
|
|
|
- <view class="img">
|
|
|
- <image :src="$globalData.publicUrl + item.cPortrait" />
|
|
|
- </view>
|
|
|
- <view class="new" v-if="item.nB2 == 1">
|
|
|
- new
|
|
|
- </view>
|
|
|
- <view class="status">{{item.nStatus ===1?'服务中' :'可服务'}}</view>
|
|
|
- </view>
|
|
|
- <view class="itemR">
|
|
|
- <view class="title">
|
|
|
- <view class="name">{{item.cName}}</view>
|
|
|
- <view class="address">
|
|
|
- <image src="/static/identify/address.png" mode="" />{{item.distance}}km
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="mark">
|
|
|
- <view class="center">
|
|
|
- <image src="/static/identify/star.png" mode="" />{{item.nStar}}
|
|
|
- </view>
|
|
|
- <view class="right">
|
|
|
- 已服务 <text>{{item.nNum}}</text> 单
|
|
|
- </view>
|
|
|
- <view class="right">
|
|
|
- <text>{{item.number}}</text> 收藏
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="num">
|
|
|
- <view class="free_box">
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="btn" @click.stop="bookNow(item)">
|
|
|
- <text>立即预约</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="more" @click="more">
|
|
|
- 更多
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- <view class="reserved">
|
|
|
- <view @click="choose">选择商户</view>
|
|
|
- </view> -->
|
|
|
- <view class="dialog" v-if="dialogShow">
|
|
|
- <view class="back" @click="dialogShow = false">
|
|
|
-
|
|
|
- </view>
|
|
|
- <!-- <view class="closebox" @click="closeDialog"></view> -->
|
|
|
- <view class="dialog_content">
|
|
|
- <view class="box">
|
|
|
- <view class="lists" v-for="(item,index) in projects" :key="index">
|
|
|
- <view class="imgs">
|
|
|
- <image :src="$globalData.publicUrl + item.cCover" mode="" />
|
|
|
- </view>
|
|
|
- <view class="right">
|
|
|
- <view class="list_title">
|
|
|
- <view class="title">{{item.cTitle}}</view>
|
|
|
- <view class="time">{{item.nMinute}}分钟</view>
|
|
|
- </view>
|
|
|
- <view class="price">
|
|
|
- <view class="money">¥{{item.dPrice}}</view>
|
|
|
- <view class="counter">
|
|
|
- <view @click="decrease(item,index)">-</view>
|
|
|
- <text>{{item.number}}</text>
|
|
|
- <view @click="increase(index)">+</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="now" @click="nowYuyue"><text>立即预约</text></view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="cDetail">
|
|
|
-
|
|
|
- <image :src="$globalData.publicUrl+ detail.cDetail" ></image>
|
|
|
- </view>
|
|
|
- <view class="reserved">
|
|
|
- <view @click="nowYuyue()">立即预约</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import {
|
|
|
- projectDetails,
|
|
|
- engineerDetails,
|
|
|
- addOrder,
|
|
|
- engineer
|
|
|
- } from '@/api/index'
|
|
|
- import {
|
|
|
- getAddrList,
|
|
|
- } from '@/api/address';
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- detail: [],
|
|
|
- price: 0,
|
|
|
- cDetail: '',
|
|
|
- current: 0,
|
|
|
- jsList: [],
|
|
|
- deptName: '',
|
|
|
- distance: '',
|
|
|
- projects: [],
|
|
|
- details: '',
|
|
|
- dialogShow: false,
|
|
|
- isAddress:false,
|
|
|
- longitude: '',
|
|
|
- latitude:'',
|
|
|
- cid:'',
|
|
|
- recommendTechnicianList:[]
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //选择商户
|
|
|
- bookNow(item) {
|
|
|
- this.distance = item.distance
|
|
|
- if (!uni.getStorageSync('access-token')) {
|
|
|
- uni.showModal({
|
|
|
- title: '请先登录!',
|
|
|
- success: (res) => {
|
|
|
- if (res.confirm) {
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/my/my'
|
|
|
- })
|
|
|
- } else if (res.cancel) {
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- return
|
|
|
- } else if (item.nStatus === 1) {
|
|
|
- uni.showToast({
|
|
|
- title: '该商户不可预约!',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- this.projects = []
|
|
|
- var id = {
|
|
|
- id: item.id
|
|
|
- }
|
|
|
- engineerDetails(id).then(res => {
|
|
|
- res.data.data.projects.forEach(element => {
|
|
|
- element.number = 0
|
|
|
- });
|
|
|
- this.details = res.data.data,
|
|
|
- this.projects = res.data.data.projects,
|
|
|
- this.dialogShow = true
|
|
|
- })
|
|
|
- },
|
|
|
- // 选择项目加一
|
|
|
- decrease(item, index) {
|
|
|
- if (item.number == 0) {
|
|
|
- return
|
|
|
- }
|
|
|
- let list = this.projects
|
|
|
- this.projects[index].number--
|
|
|
- // this.projects = list
|
|
|
- },
|
|
|
- //选择项目减一
|
|
|
- increase(index) {
|
|
|
- this.projects[index].number++
|
|
|
- // let list = this.projects
|
|
|
- // console.log(list[index])
|
|
|
- // // list[index].number++;
|
|
|
- // this.projects=list
|
|
|
- },
|
|
|
- // 预约
|
|
|
- nowYuyue() {
|
|
|
- uni.setStorageSync('projectId',this.cid)
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/identify/identify',
|
|
|
- })
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // const allCountsZero = this.projects.every(item => item.number === 0);
|
|
|
- // if (!uni.getStorageSync('access-token')) {
|
|
|
- // uni.showModal({
|
|
|
- // title: '请先登录!',
|
|
|
- // })
|
|
|
- // return
|
|
|
- // } else if (allCountsZero) {
|
|
|
- // uni.showToast({
|
|
|
- // title: '请先选择项目!',
|
|
|
- // duration: 1000,
|
|
|
- // icon: 'none',
|
|
|
- // })
|
|
|
- // return
|
|
|
- // } else if (!this.isAddress) {
|
|
|
- // uni.showModal({
|
|
|
- // title: '提示',
|
|
|
- // content: '你还没有添加地址哦!是否去添加?',
|
|
|
- // confirmText: '确定', // 确定按钮的文字
|
|
|
- // cancelText: '取消', // 取消按钮的文字
|
|
|
- // success(res) {
|
|
|
- // if (res.confirm) {
|
|
|
- // setTimeout(() => {
|
|
|
- // uni.navigateTo({
|
|
|
- // url: '/pages/address/address-edit'
|
|
|
- // })
|
|
|
- // }, 100)
|
|
|
- // // 用户点击确定按钮后的操作
|
|
|
- // } else if (res.cancel) {}
|
|
|
- // }
|
|
|
- // })
|
|
|
- // return
|
|
|
- // } else {
|
|
|
- // // console.log(this.data.projects,"project")
|
|
|
- // var list = []
|
|
|
- // this.projects.forEach(element => {
|
|
|
- // if (element.number > 0) {
|
|
|
- // element.sum = element.number * element.dPrice
|
|
|
- // list.push(element)
|
|
|
- // }
|
|
|
- // });
|
|
|
- // var total = 0
|
|
|
- // for (let i = 0; i < list.length; i++) {
|
|
|
- // total += list[i].sum;
|
|
|
- // }
|
|
|
- // var data = {
|
|
|
- // cJsId: this.details.id,
|
|
|
- // cGoods: list,
|
|
|
- // cOpenId: uni.getStorageSync('wx_copenid'),
|
|
|
- // dTotalMoney: total,
|
|
|
- // distance: this.distance
|
|
|
- // }
|
|
|
- // addOrder(data).then(res => {
|
|
|
- // if (res.data.code == 200) {
|
|
|
- // uni.navigateTo({
|
|
|
- // url: '/pages/identify/pay_order?orderNo=' + res.data.data.orderNo
|
|
|
- // // url:'/pages/identify/pay_order'
|
|
|
- // })
|
|
|
- // this.dialogShow = true
|
|
|
- // } else {
|
|
|
- // uni.showModal({
|
|
|
- // title: res.data.msg,
|
|
|
- // })
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
-
|
|
|
- },
|
|
|
- more(){
|
|
|
- uni.setStorageSync('projectId', this.cid)
|
|
|
- uni.switchTab({
|
|
|
- url:'/pages/identify/identify'
|
|
|
- })
|
|
|
- },
|
|
|
- //商户详情
|
|
|
- godetails(id) {
|
|
|
- if (!uni.getStorageSync('access-token')) {
|
|
|
- uni.showModal({
|
|
|
- title: '请先登录!',
|
|
|
- success: (res) => {
|
|
|
- if (res.confirm) {
|
|
|
- this.list = []
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/my/my'
|
|
|
- })
|
|
|
- } else if (res.cancel) {
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- return
|
|
|
- } else {
|
|
|
- uni.navigateTo({
|
|
|
- url: '../../pages/identify/details?id=' + id
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- choose() {
|
|
|
- uni.switchTab({
|
|
|
- url: '../identify/identify',
|
|
|
- })
|
|
|
- },
|
|
|
- getAddress() {
|
|
|
- var that = this
|
|
|
- var data = {
|
|
|
- openId: uni.getStorageSync('wx_copenid'),
|
|
|
- }
|
|
|
- getAddrList(data).then(res => {
|
|
|
- if (res.data.data[0]) {
|
|
|
- this.isAddress = true
|
|
|
- } else {
|
|
|
- this.isAddress = false
|
|
|
- }
|
|
|
- }).catch(err => {})
|
|
|
- },
|
|
|
- getDetails(cid, deptName) {
|
|
|
- const cId = {
|
|
|
- cId: cid,
|
|
|
- deptName: deptName,
|
|
|
- nStatus:0,
|
|
|
- longitude: uni.getStorageSync('longitude'),
|
|
|
- latitude: uni.getStorageSync('latitude'),
|
|
|
- }
|
|
|
- projectDetails(cId).then(res => {
|
|
|
- if (res.data.code == 200) {
|
|
|
- this.detail = res.data.data,
|
|
|
- this.recommendTechnicianList = res.data.data.recommendTechnicianList
|
|
|
-
|
|
|
- // res.data.data.jsList.length>3? this.jsList = res.data.data.jsList.slice(0,3):this.jsList = res.data.data.jsList
|
|
|
- this.price = res.data.data.dPrice.toFixed(2)
|
|
|
- this.getJsList()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getJsList(){
|
|
|
- let data = {
|
|
|
- recommendTechnicianList: this.recommendTechnicianList,
|
|
|
- longitude: uni.getStorageSync('longitude'),
|
|
|
- latitude: uni.getStorageSync('latitude'),
|
|
|
- projectId:this.cid
|
|
|
-
|
|
|
- }
|
|
|
- engineer(data).then(res=>{
|
|
|
- res.data.data.records.length>3? this.jsList = res.data.data.records.slice(0,3):this.jsList = res.data.data.records
|
|
|
- })
|
|
|
- },
|
|
|
- getlocaltion() {
|
|
|
- uni.getLocation({
|
|
|
- type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,可以设置为 gcj02 返回可用于 `uni.openLocation` 的坐标
|
|
|
- success: function(res) {
|
|
|
- this.latitude = res.latitude
|
|
|
- this.longitude = res.longitude
|
|
|
- // this.current = 0
|
|
|
- // this.city = res.address.city
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- onLoad: function(options) {
|
|
|
- this.cid = options.cid
|
|
|
- this.getDetails(options.cid, options.deptName)
|
|
|
- // this.getDetails(09493ab2baf94e03b4c014a76b801cc4)
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.getAddress()
|
|
|
- this.getlocaltion()
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .details {
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- overflow-y: auto;
|
|
|
- .content_top{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- background: #F7FFFF;
|
|
|
- padding: 30rpx 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- }
|
|
|
- .detail-content {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #E5FDFB;
|
|
|
- // display: flex;
|
|
|
- // flex-direction: column;
|
|
|
- .show_img {
|
|
|
- width: 638rpx;
|
|
|
- height: 638rpx;
|
|
|
- border-radius: 24rpx;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- image {
|
|
|
- width: 638rpx;
|
|
|
- height: 638rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .recommend_js {
|
|
|
- flex: 1;
|
|
|
- background: linear-gradient(to bottom right, rgb(246, 249, 242), rgb(210, 241, 243));
|
|
|
- padding: 10rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- .more{
|
|
|
- width: 100px;
|
|
|
- height: 30px;
|
|
|
- background: #35c99d;
|
|
|
- border-radius: 10rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 30px;
|
|
|
- margin: 0 auto;
|
|
|
- color:#fff;
|
|
|
- }
|
|
|
- .item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- // border: 1px solid rgb(212, 211, 211);
|
|
|
- margin-bottom: 20rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
- padding: 30rpx;
|
|
|
- background-color: #fff;
|
|
|
- box-sizing: border-box;
|
|
|
- .itemL {
|
|
|
- position: relative;
|
|
|
- width: 150rpx;
|
|
|
- height: 220rpx;
|
|
|
- margin-right: 30rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .hot {
|
|
|
- position: absolute;
|
|
|
- width: 150px;
|
|
|
- height: 150px;
|
|
|
- top: -36px;
|
|
|
- left: -36px;
|
|
|
- // display: flex;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .img {
|
|
|
- width: 150rpx;
|
|
|
- height: 150rpx;
|
|
|
- border-radius: 50%;
|
|
|
- overflow: hidden;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .status {
|
|
|
- font-size: 24rpx;
|
|
|
- position: absolute;
|
|
|
- bottom: 0px;
|
|
|
- background-color: #59b7b6;
|
|
|
- color: #fff;
|
|
|
- padding: 3px 10px;
|
|
|
- border-radius: 20px;
|
|
|
- // margin: 10px 0px;
|
|
|
- }
|
|
|
- .new {
|
|
|
- position: absolute;
|
|
|
- top: -20rpx;
|
|
|
- left: -16rpx;
|
|
|
- padding: 0rpx 5rpx;
|
|
|
- background-color: #f9792d;
|
|
|
- opacity: .8;
|
|
|
- border-radius: 10rpx;
|
|
|
- color: #f3f3f3;
|
|
|
- }
|
|
|
- }
|
|
|
- .itemR {
|
|
|
- flex: 1;
|
|
|
- height: 220rpx;
|
|
|
- .title {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .name {
|
|
|
- width: 30%;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- .address {
|
|
|
- // width: 40%;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #585858;
|
|
|
- image {
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- vertical-align: text-bottom;
|
|
|
- }
|
|
|
- }
|
|
|
- .status {
|
|
|
- color: #fff;
|
|
|
- background-color: #0ec891;
|
|
|
- font-size: 18rpx;
|
|
|
- padding: 5rpx 15rpx;
|
|
|
- border-radius: 30px;
|
|
|
- height: 30rpx;
|
|
|
- line-height: 30rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .mark {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin: 20px 0;
|
|
|
- .right {
|
|
|
- text {
|
|
|
- color: #f9792d;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- .center {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- image {
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .num {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- // padding-left: 30rpx;
|
|
|
- color: #9e9e9e;
|
|
|
- .free_box {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #59b7b6;
|
|
|
- }
|
|
|
- image {
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- }
|
|
|
- .btn {
|
|
|
- background-color: #59b7b6;
|
|
|
- padding: 10px;
|
|
|
- border-radius: 3px 10px 10px 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- .items {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 10rpx 0;
|
|
|
- image {
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- vertical-align: text-top;
|
|
|
- }
|
|
|
- view {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .btn {
|
|
|
- font-size: 26rpx;
|
|
|
- background-color: #2cb8d4;
|
|
|
- border-radius: 30px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- padding: 10rpx 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .slogan {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- font-size: 22rpx;
|
|
|
- padding: 20rpx 0;
|
|
|
- view {
|
|
|
- &:before {
|
|
|
- content: '';
|
|
|
- display: inline-block;
|
|
|
- width: 20rpx;
|
|
|
- height: 20rpx;
|
|
|
- background-color: #2cb8d4;
|
|
|
- border-radius: 10px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .content {
|
|
|
- // padding: 0 30rpx;
|
|
|
- .name {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- .names {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- text{
|
|
|
- display: inline-block;
|
|
|
- width: 6rpx;
|
|
|
- height: 34rpx;
|
|
|
- background: #20CBC2;
|
|
|
- margin-right: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .price {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #F53E54;
|
|
|
- font-weight: bold;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- text{
|
|
|
- font-weight: 600;
|
|
|
- font-size: 44rpx;
|
|
|
- color: #F53E54;
|
|
|
- line-height: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .time {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #45BBB5;
|
|
|
- margin-top: 8rpx;
|
|
|
- padding-left: 30rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .state {
|
|
|
- width: 100%;
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0px 4rpx 12rpx 0px rgba(88,209,187,0.1);
|
|
|
- border-radius: 16rpx ;
|
|
|
- padding: 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- .state1 {
|
|
|
- font-size: 32rpx;
|
|
|
- // font-weight: bold;
|
|
|
- }
|
|
|
- .state2 {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #2F3437;
|
|
|
- line-height: 33rpx;
|
|
|
- }
|
|
|
- .state2:nth-child(2){
|
|
|
- margin: 16rpx 0px;
|
|
|
- }
|
|
|
- }
|
|
|
- .service {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #2F3437;
|
|
|
- line-height: 33rpx;
|
|
|
- margin: 20rpx 0;
|
|
|
- }
|
|
|
-
|
|
|
- .three {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #2F3437;
|
|
|
- padding: 20rpx 0;
|
|
|
- background-color: #ffffff;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 16rpx;
|
|
|
-
|
|
|
- view {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .bottom {
|
|
|
- flex: 1;
|
|
|
- width: 100vw;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- margin-top: 32rpx;
|
|
|
- .recommend {
|
|
|
- width: 100%;
|
|
|
- height: 50px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- .option {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- .cleck_recommend {
|
|
|
- color: #2cb8d4;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .cDetail {
|
|
|
- width: 100vw;
|
|
|
- margin-bottom: 130rpx;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 2600rpx;
|
|
|
- // object-fit: cover;
|
|
|
- }
|
|
|
- }
|
|
|
- .reserved {
|
|
|
- width: 100%;
|
|
|
- height: 116rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- padding: 20rpx 40rpx;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0 0 30rpx #ece9e9;
|
|
|
- background-color: #fff;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- view {
|
|
|
- background: linear-gradient( 90deg, #1AD7CE 0%, #21C9C1 100%);
|
|
|
- color: #fff;
|
|
|
- width: 100%;
|
|
|
- height: 76rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: 106rpx;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .dialog {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0, 0, 0, .5);
|
|
|
- z-index: 10;
|
|
|
- transition: transform 0.3s ease-out;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .back {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- .closebox {
|
|
|
- height: calc(50vh - 60rpx);
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .dialog_content {
|
|
|
- background-color: #fff;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- width: calc(100% - 60rpx);
|
|
|
- height: 50vh;
|
|
|
- border-top-left-radius: 20rpx;
|
|
|
- border-top-right-radius: 20rpx;
|
|
|
- padding: 30rpx;
|
|
|
- background-color: #f3f3f3;
|
|
|
- // padding-bottom: 100rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .box {
|
|
|
- height: 90%;
|
|
|
- overflow-y: auto;
|
|
|
- .lists {
|
|
|
- // height: 90%;
|
|
|
- background-color: #fff;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 20rpx 10rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- // overflow-y: auto;
|
|
|
- .imgs {
|
|
|
- width: 240rpx;
|
|
|
- height: 160rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- overflow: hidden;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- padding-left: 30rpx;
|
|
|
- .list_title {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .title {
|
|
|
- width: 280rpx;
|
|
|
- font-size: 34rpx;
|
|
|
- font-weight: bold;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- .time {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #45BBB5;
|
|
|
- }
|
|
|
- }
|
|
|
- .price {
|
|
|
- padding-top: 50rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .money {
|
|
|
- font-size: 42rpx;
|
|
|
- color: #e61b1b;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .counter {
|
|
|
- display: flex;
|
|
|
- view {
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- line-height: 60rpx;
|
|
|
- background-color: #f7f8fa;
|
|
|
- text-align: center;
|
|
|
- border-radius: 60rpx;
|
|
|
- font-size: 50rpx;
|
|
|
- }
|
|
|
- text {
|
|
|
- display: block;
|
|
|
- width: 100rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 60rpx;
|
|
|
- font-size: 30rpx
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .now {
|
|
|
- height: 10%;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- height: 100rpx;
|
|
|
- padding-top: 10rpx;
|
|
|
- text {
|
|
|
- display: inline-block;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- width: 90%;
|
|
|
- background-color: #2cb8d4;
|
|
|
- color: #fff;
|
|
|
- border-radius: 50rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|