GuangYuYuan-app/pages/identify/identify.vue

<template>
	<view class="identify">
		<!-- <view class="title bigtitle" style="padding-top:{{navTop}}px;">
	    <view class="titles">商户</view>
	  </view> -->
		<view class="top">
			<view class="select">
				<view class="option" :class="selectIndex == index?'active':''" v-for="(item,index) in selectList" :key="index"
					@click="selectJs(item.value,index)">
					{{item.name}}
					<!-- <view class="bgc" v-if="selectIndex == index"></view> -->
				</view>
			</view>
			<view class="call">
				<!-- <image src="/static/other/call.png" mode=""></image> -->
				<view class="phone">
					<image src="/static/identify/shop.png" mode=""></image>	<text>本地商家客服电话：19935577015</text>
					<view class="call_btn" @click="call(19935577015)">
						<image src="/static/identify/call.png" mode=""></image>
						拨打
					</view>
				</view>
			</view>
			<view class="search_box" style="background: #F7FFFF;">
				<!-- <view class="address" v-if="city == ''" @click="show = true">
					选择市<image src="../../static/identify/down.png" mode=""></image>
				</view>
				<view class="address" v-else @click="show = true">
					<text>{{city}}</text>
					<image src="../../static/identify/down.png" mode=""></image>
				</view> -->
				<view class="weui-cells weui-cells_after-title">
					<!-- <u-select v-model="show" :list="citylist" @confirm="select"></u-select> -->
					<view class="address" @click="show = true" v-if="city == ''">
						<!-- 选择市<image src="../../static/identify/down.png" mode=""></image> -->
					</view>
					<view class="address" @click="show = true" v-else>
						{{city}}
						<!-- <image src="../../static/identify/down.png" mode=""></image> -->
					</view>
				</view>
				<view class="search">
					<u-search placeholder="请输入商家名称" v-model="jsName" @search="searList"></u-search>
					<!-- <input type="text" placeholder="请输入商家名称" v-model="jsName" @keydown.enter="getList"/> -->
				</view>
			</view>
			<!-- 			<view class="level">
				<view class="lv" :class="lvIndex == index?'selectLv':''" v-for="(item,index) in searchList" :key="index"
					@click="selectLv(item,index)">
					<image :src=item.src mode="" v-if="lvIndex == index"></image>
					{{item.name}}
				</view>
			</view> -->
		</view>
		<!-- <mescroll-body class="list" v-infinite-scroll="getlocaltion" :infinite-scroll-disabled="isInfiniteScrollDisabled"> -->
		<mescroll-uni class="list" :fixed="false" ref="mescrollRef" @up="getList" @init="mescrollInit">
			<view class="item" v-for="(item,index) in list" :key="index" @click.stop="godetails(item.id)">
				<view class="hot">
					<image src="../../static/identify/hot.png" mode="" />
				</view>
				<view class="itemL">
					<!-- <view class="hot" v-if="item.nB3 == 1"> -->

					<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.cNickName}}</view>
						<view class="intro_box">
							<view class="intro">
								简介
							</view>
							<view class="intro_content">
								
							{{item.cJianjie}}
							</view>
						</view>
						<!-- <view class="address">
							<image src="../../static/identify/address.png" mode="" />{{item.distance}}km
						</view> -->
					</view>
					<view class="mark">
						<!-- 评分，默认5星 -->
						<view class="center">
							<image src="../../static/identify/star.png" mode="" />{{item.nStar}}分
						</view>
						<!-- 收藏数量 -->
						<view class=" center right">
							<image src="../../static/identify/my1.png" mode="" />
							<text>{{item.nZan}}</text> 人
						</view>
						<!-- 服务数量 -->
						<view class="right">
							<!-- <image src="../../static/identify/serve.png" mode="" /> -->
							已服务: <text>{{item.nNum}}</text> 人
						</view>
					
					</view>
					<view class="num">
						<!-- <view class="free_box">
							<view class="free" v-if="free == 1">
								07:30-20:00 &nbsp; {{item.daytimeMileage}}公里免出行费
							</view>
							<view class="free" v-if="free == 1">
								20:00-07:30 &nbsp; {{item.nigthMileage}}公里免出行费
							</view>
						</view> -->
						<view class="free_box">
							<image src="../../static/identify/length.png" mode="" />
							{{item.distance}}km
						</view>

						<view class="btn" @click.stop="bookNow(item)">
							<!-- <view class="btn" @click="bookNow" data-id="{{item.id}}" data-fuwu="{{item.nStatus}}" data-distance="{{item.distance}}"> -->
							<text>立即预约</text>
						</view>
					</view>

				</view>
			</view>
		</mescroll-uni>


		<view class="dialog" v-if="dialogShow">
			<view class="back" @click="closeDialog">

			</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 class="price">
									<span>￥</span>{{item.dPrice}}
								</view>
							</view>
							<view class="num">
								{{item.cLdList}}
								<span>超{{item.nSaleNumber}}选择</span>
							</view>
							<view class="time">
								<view class="money">{{item.nMinute}}分钟</view>
								<view class="counter">
									<!-- <view @click="decrease(item,index)">-</view> -->
									<view class="minus" @click="decrease(item,index)">
										<image src="../../static/identify/minus.png" mode="" />
									</view>
									<text>{{item.number}}</text>
									<view class="minus" @click="increase(index)">
										<image src="../../static/identify/add.png" mode="" />
									</view>
									<!-- <view @click="increase(index)">＋</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="now" @click="nowYuyue"><text>立即预约</text></view>

			</view>

		</view>
	</view>

</template>

<script>
	// import infiniteScroll from 'vue-infinite-scroll'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		engineer,
		engineerDetails,
		addOrder,
		getInfo,
		addList,
		getCityList
	} from '../../api/index'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		// components: {
		// 	MescrollMixin
		// },
		data() {
			return {
				show: false,
				citylist: [],
				downOption: {
					use: false
				},
				lvIndex: 0,
				jsGrade: '',
				searchList: [{
						name: '全部',
						value: '',
						src: '../../static/identify/spa.png'
					},
					{
						name: '金牌',
						value: '1',
						src: '../../static/identify/gold.png'
					},
					{
						name: '银牌',
						value: '0',
						src: '../../static/identify/silver.png'
					},
				],
				selectIndex: 0,
				selectList: [{
						name: '全部',
						value: '1'
					},
					{
						name: '可服务',
						value: '2'
					},
					{
						name: '新商家',
						value: '3'
					},
					// {
					// 	name: '免出行费',
					// 	value: '4'
					// },
				],
				list: [],
				projects: [],
				dialogShow: false,
				count: 0,
				details: '',
				sum: 0,
				distance: 0,
				isAddress: false,
				latitude: '',
				longitude: '',
				projectId: '',
				nStatus: '',
				nB2: '',
				free: '',
				jsName: '',
				city: '',
				current: 1,
				total: 1,
			}
		},
		methods: {
			getCity() {
				getCityList().then(res => {
					this.citylist = res.data.data.map(({
						deptId,
						deptName
					}) => ({
						value: deptId,
						label: deptName
					}))
				});
			},
			select(e) {
				this.city = e[0].label
				this.list = []
				this.mescroll.resetUpScroll()
			},
			searList() {
				this.list = []
				this.mescroll.resetUpScroll()
			},
			selectLv(item, index) {
				// this.list = []
				// this.current = 0
				this.lvIndex = index
				this.jsGrade = item.value
				this.mescroll.resetUpScroll();
			},
			selectJs(value, index) {
				this.selectIndex = index
				this.list = []
				if (value == 1) {
					this.nStatus = ''
					this.free = ''
					this.nB2 = ''
					this.mescroll.resetUpScroll();
				} else if (value == 2) {
					this.nStatus = 0
					this.nB2 = ''
					this.free = ''
					this.mescroll.resetUpScroll();
				} else if (value == 3) {
					this.nStatus = ''
					this.nB2 = 1
					this.free = ''
					this.mescroll.resetUpScroll();
				} else if (value == 4) {
					this.nStatus = ''
					this.nB2 = ''
					this.free = 1
					this.mescroll.resetUpScroll();
				}

			},
			getList(page) {
				// 	let lastCity = this.city.charAt(this.city.length - 1)
				// 	let subcity = ''
				// 	lastCity =='市' ? subcity = this.city.slice(0,-1) : subcity =  this.city
				let data = {
					cNickName: this.jsName,
					current: page.num,
					size: page.size,
					nTong: 1,
					nStatus2: 0,
					projectId: uni.getStorageSync('projectId'),
					longitude: uni.getStorageSync('longitude'),
					latitude: uni.getStorageSync('latitude'),
					nStatus: this.nStatus,
					nB2: this.nB2,
					free: this.free,
					jsGrade: this.jsGrade,
					city: this.city
				}

				engineer(data).then(res => {
					// let page_num = res.data.data.total / 10
					// page_num <= 1 ? this.total = 1 : this.total = page_num
					// this.mescroll.endBySize(curPageLen, res.data.data.total); 
					this.mescroll.endSuccess(res.data.data.records.length,res.data.data.total);
					this.list = this.list.concat(res.data.data.records)
					// if(res.data.data.records.length == 0){
					// 	this.mescroll.endErr()
					// }

					// if (this.list == []) {
					// 	this.list = res.data.data.records

					// } else {
					// 	// this.list.push(...res.data.data.records)
					// }
				})
				.catch(() => {
					this.mescroll.endErr()
				})
			},
			//选择商户
			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,
						console.log(this.projects)
						this.dialogShow = true
				})
			},
			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
					})
				}

			},
			//弹窗关闭
			closeDialog() {
				this.dialogShow = false
			},
			// 选择项目加一
			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() {
				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: '../my/add_address'
									})
								}, 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: './pay_order?orderNo=' + res.data.data.orderNo
								// url:''
							})
							this.dialogShow = true
						} else {
							uni.showModal({
								title: res.data.msg,
							})
						}
					})
				}

			},
			getAddress() {
				var that = this
				var data = {
					openId: uni.getStorageSync('wx_copenid'),
				}
				addList(data).then(res => {
					if (res.data.data[0]) {
						this.isAddress = true
					} else {
						this.isAddress = false
					}
				}).catch(err => {})
			},
			goCity() {
				this.list = []
				uni.navigateTo({
					url: '/pages/identify/city'
				})
			},
			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
					},
				});
			},
			//打电话
			call(phone){
				uni.makePhoneCall({
					phoneNumber: phone 
				});
			}
		},
		onShow() {
			// this.getlocaltion()
			this.city = uni.getStorageSync('selectCity')
			this.getCity()
			this.getAddress()
			this.mescroll.resetUpScroll()
			// this.projectId = uni.getStorageSync('projectId');
			this.dialogShow = false
			uni.removeStorageSync('couponData');
		},
		mounted() {
			this.mescroll.optDown.use = false
		},
		onHide() {
			// this.dialogShow = false 
			// this.current = 0
			this.list = []
			this.projectId = ''
			uni.removeStorage({
				key: 'projectId'
			});
		}
	}
</script>

<style lang="scss" scoped>
	.identify {
		width: 100vw;
		height: 100%;
		// overflow-y: auto;
		// background: radial-gradient(circle, #b1fffc, #fcfdff);
		background: #F7FFFF;
		display: flex;
		flex-direction: column;
		position: fixed;

		.top {
			position: sticky;
			top: 0;
			width: 100%;
			background: linear-gradient( 180deg, #C1FFF8 0%, #B8FFF3 34%, #F5FFFF 100%);
			// background: linear-gradient(to bottom right, #fcfdff, #d1fefd);
			// background: radial-gradient(circle, #b1fffc, #fcfdff);
			// background-color: #ffffff;
			z-index: 999;
			padding-bottom: 20rpx;
			.call{
				position: relative;
				height: 100rpx;
				background: #E2FFFD;
				.phone{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: space-around;
					font-size: 34rpx;
					color: #FFFFFF;
					// position: absolute;
					// top: 50%;
					// transform: translateY(-50%);
					// left: 24rpx;
					z-index: 99;
					font-size: 28rpx;
					color: #08C0B7;
					image{
						width: 48rpx;
						height: 48rpx;
					}
					text{
						font-size: 32rpx
					}
					.call_btn{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 152rpx;
						height: 56rpx;
						background: #08C0B7;
						border-radius: 106rpx;
						font-size: 28rpx;
						color: #ffffff;
						box-sizing: border-box;
						image{
							width: 36rpx;
							height: 36rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}

		.select {
			width: 100%;
			display: flex;
			height: 90rpx;
			padding:24rpx 32rpx;
			box-sizing: border-box;

			// margin-bottom: 20rpx;
			.option {
				margin-right: 20px;
				height: 100%;
				position: relative;
				z-index: 9;
				font-size: 30rpx;
				line-height: 35px;
				
				.bgc {
					margin-right: 20px;
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 30%;
					background-color: #89dcdc;
					z-index: 0;
					opacity: 0.8;
				}
			}

			.active {
				color: #03C8BE;
				font-weight: 500;
				padding-bottom: 15rpx;
				border-bottom: 1px solid #03C8BE;
			}

		}

		.search_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;

			.address {
				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
			}

			.search {
				width: 70%;
			}
		}

		.level {
			display: flex;
			margin-top: 20rpx;
			// margin-bottom: 20rpx;
			padding-left: 20rpx;
			box-sizing: border-box;

			.lv {
				// width: 100rpx;
				height: 50rpx;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 0 10px;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding-top: 0;
				padding-bottom: 0;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}

			.selectLv {
				background-color: #89dcdc;
				color: #ffffff;
			}
		}

		.bigtitle {
			font-size: 28rpx;
			text-align: center;
			line-height: 60rpx;
			background-color: #2cb8d4;
			color: #fff;
		}

		.list {
			flex: 1;
			overflow-y: auto;
			// height: 100%;
			padding: 0rpx 20rpx;
			// box-sizing: border-box;

			.item {
				width: 100%;
				// height: 208rpx;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.1);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border: 1px solid rgb(212, 211, 211);
				margin-bottom: 20rpx;
				padding: 24rpx 32rpx;
				box-sizing: border-box;
				position: relative;

				.hot {
					position: absolute;
					top: 0;
					left: 0;
					width: 80rpx;
					height: 40rpx;
					z-index: 9;

					image {
						width: 100%;
						height: 100%;
					}

				}

				.itemL {
					position: relative;
					width: 160rpx;
					height: 100%;
					margin-right: 30rpx;
					display: flex;
					// flex-direction: column;
					align-items: center;
					justify-content: center;


					.img {
						width: 160rpx;
						height: 160rpx;
						// 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: 100%;

					.title {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 24rpx;
						.name {
							// width: 70rpx;
							font-size: 32rpx;
							font-weight: 500;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin-right: 24rpx;
						}

						.intro_box {
							flex: 1;
							display: flex;
							align-items: center;
							.intro {
								width: 64rpx;
								height: 32rpx;
								background: #DCFFFD;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								font-size: 24rpx;
								color: #20CAC2;
								text-align: center;
								line-height: 32rpx;
								margin-right: 20rpx;
							}

							.intro_content {
								width: 280rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								font-size: 24rpx;
								color: #666666;
							}
						}

						.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;
						color: #666666;

						.right {
font-size: 24rpx;
							color: #666666;
							text {
								color: #666666;
								margin-right: 5px;
							}
						}

						.center {
							display: flex;
							align-items: center;
							margin-right: 20rpx;
							font-size: 24rpx;
							color: #666666;
							image {
								width: 30rpx;
								height: 30rpx;
								margin-right: 4rpx;
							}
						}
					}

					.num {
						display: flex;
						align-items: center;
						justify-content: space-between;
						// padding-left: 30rpx;
						color: #9e9e9e;
						margin-top: 24rpx;

						.free_box {
							font-size: 24rpx;
							color: #999999;
							display: flex;
							align-items: center;
							image {
								width: 32rpx;
								height: 32rpx;
							}
						}



						.btn {
							font-size: 30rpx;line-height: 24rpx;
							padding: 16rpx 24rpx;
							background: linear-gradient( 135deg, #FF8B66 0%, #EE5B2D 100%);
							border-radius: 98rpx 98rpx 98rpx 98rpx;
						}
					}

					.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;
					}
				}
			}
		}

		.dialog {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .5);
			z-index: 1000;
			transition: transform 0.3s ease-out;
			display: flex;
			flex-direction: column;

			.back {
				flex: 1;
			}

			.closebox {
				height: calc(50vh - 60rpx);
				width: 100%;
			}



			.dialog_content {
				background: #F3F3F3;
				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: 24rpx 32rpx;
						border-radius: 24rpx;
						// overflow-y: auto;

						.imgs {
							width: 160rpx;
							height: 160rpx;
							border-radius: 16rpx;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.right {
							flex: 1;
							padding-left: 30rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.list_title {
								display: flex;
								justify-content: space-between;
								align-items: start;

								.title {
									width: 280rpx;
									font-size: 34rpx;
									// font-weight: bold;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}

								
								.price{
									font-size: 48rpx;
									color: #F53E54;
									display: flex;
									align-items: center;
									padding: 0;
									span{
										font-size: 24rpx
									}
								}
							}
							.num{
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-size: 24rpx;
								color: #888888;
							}

							.time {
								// padding-top: 50rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.money {
									font-size: 26rpx;
									color: #666666;
									font-weight: bold;
								}

								.counter {
									display: flex;
									align-items: center;
									.minus{
										image{
											width: 36rpx;
											height: 36rpx;
										}
									}
									text {
										line-height: 24rpx;
										font-size: 28rpx;
										margin: 0px 24rpx;
									}
								}
							}
						}
					}
				}

				.now {
					height: 76rpx;
					left: 0;
					width: 100%;
					text-align: center;
					height: 100rpx;
					padding-top: 10rpx;
					

					text {
						display: inline-block;
						height: 80rpx;
						line-height: 80rpx;
						width: 90%;
						color: #fff;
						background: linear-gradient( 90deg, #1AD7CE 0%, #21C9C1 100%);
						border-radius: 106rpx ;
					}
				}


			}
		}
	}
	::v-deep .u-input{
		background-color: #fff;
	}
	::v-deep .u-content{
		background-color: #fff;
	}
	
</style>