wx-yunyubang-miniprogram/packages/packageCarecenter/pages/careCenter/careCenter.vue

<template>
	<view class="content">
		<image class="careBanner" src="../../static/banner.png"></image>
		<view class="strategyBox">
			<view class="strate">
				<view class="strTit flex_between">
					<view class="strL flex_start">
						<image src="../../static/icon_gonglve.png"></image><text>月子攻略</text>
					</view>
					<view class="more">更多</view>
				</view>
				<view class="strCol flex_start">
					<view class="strPic">
						<image mode="aspectFill" src="../../static/banner.png"></image>
					</view>
					<view class="strInfo">
						<view class="h3">月子会所价格为何相差巨大月子会所价格为何相差巨大月子会所价格为何相差巨大？</view>
						<view class="p">市场纷繁复杂的套餐究竟如何选？</view>
					</view>
				</view>
				<view class="strCol flex_start">
					<view class="strPic">
						<image mode="aspectFill" src="../../static/banner.png"></image>
					</view>
					<view class="strInfo">
						<view class="h3">月子会所价格为何相差巨大月子会所价格为何相差巨大月子会所价格为何相差巨大？</view>
						<view class="p">市场纷繁复杂的套餐究竟如何选？</view>
					</view>
				</view>
				<view class="strCol flex_start">
					<view class="strPic">
						<image mode="aspectFill" src="../../static/banner.png"></image>
					</view>
					<view class="strInfo">
						<view class="h3">月子会所价格为何相差巨大月子会所价格为何相差巨大月子会所价格为何相差巨大？</view>
						<view class="p">市场纷繁复杂的套餐究竟如何选？</view>
					</view>
				</view>
			</view>
		</view>
		<view class="careBox">
			<view class="careTabs flex_start">
				<view class="tabCol" :class="{'cur':tabIndex === 1}" @click="tabIndex = 1,status = 'loadmore'">
					<text>严选商家</text>
					<view class="line">
						<image src="../../static/img_qiehuan.png"></image>
					</view>
				</view>
				<view class="tabCol" :class="{'cur':tabIndex === 2}" @click="tabIndex = 2,status = 'loadmore'">
					<text>严选商品</text>
					<view class="line">
						<image src="../../static/img_qiehuan.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="proBox" v-if="tabIndex === 1">
			<view class="termBox">
				<view class="termOuter">
					<view class="termCol cur">综合排序<text class="iconfont icon-arrowbottom"></text></view>
					<view class="termCol">全部地区<text class="iconfont icon-arrowbottom"></text></view>
					<view class="termCol">筛选<text class="iconfont icon-filter"></text></view>
				</view>
			</view>
			<view class="tagGroup flex_start">
				<text>月子餐试吃</text>
				<text>已探店</text>
			</view>
			<view class="introBox">
				<view v-for="(item,index) in serviceList" :key="item.id" class="intro_column"
					@tap="gotoDetail(item.id)">
					<view class="imgOuter">
						<image mode="aspectFill" :src="item.cover_picture"></image>
						<view v-if="item.recommend == 1" class="i_intro">推荐</view>
					</view>
					<view class="columnInfo">
						<view class="title">{{nameComputed(item.name)}}</view>
						<view class="tags">
							<text v-for="(tag,index1) in featureLabelSplit(item.featured_label)"
								:key="index1">{{tag}}</text>
							<!-- <text>孕妈</text><text>宝宝成长</text><text class="grayBg">讲座知识</text> -->
						</view>
						<view class="subInfo flex_between">
							<text>{{addressComputed(item.address)}}</text><text
								v-if="item.distance">{{distanceComputed(item.distance)}}</text>
						</view>
						<view class="price"><text class="smallIcon">￥</text><text>30200</text>&nbsp;&nbsp;-&nbsp;&nbsp;
							<text class="smallIcon">￥</text><text>45000</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="proBox">
			<view class="termBox">
				<view class="termOuter">
					<view class="termCol cur">综合排序<text class="iconfont icon-arrowbottom"></text></view>
					<view class="termCol">全部地区<text class="iconfont icon-arrowbottom"></text></view>
					<view class="termCol">筛选<text class="iconfont icon-filter"></text></view>
				</view>
			</view>
			<view class="tagGroup flex_start">
				<text>月子餐试吃</text>
				<text>已探店</text>
			</view>
			<view class="introBox">
				<view v-for="(item,index) in productList" :key="item.id" class="intro_column"
					@tap="gotoDetail(item.id)">
					<view class="imgOuter">
						<image mode="aspectFill" :src="item.cover_picture"></image>
						<view v-if="item.recommend == 1" class="i_intro">推荐</view>
					</view>
					<view class="columnInfo">
						<view class="title">{{nameComputed(item.name)}}</view>
						<view class="tags">
							<text v-for="(tag,index1) in featureLabelSplit(item.featured_label)"
								:key="index1">{{tag}}</text>
							<!-- <text>孕妈</text><text>宝宝成长</text><text class="grayBg">讲座知识</text> -->
						</view>
						<view class="subInfo flex_between"><text>{{addressComputed(item.service.name)}}</text></view>
						<view class="price"><text class="smallIcon">￥</text><text>{{item.price}}</text>
							<!-- &nbsp;&nbsp;-&nbsp;&nbsp;
							<text class="smallIcon">￥</text><text>{{item.price}}</text> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" :load-text='loadText' @loadmore='loadmore' />
	</view>
</template>

<script>
	import {
		weixin
	} from '@/utils/weixin.js'
	export default {
		data() {
			return {
				tabIndex: 1, //1为严选商家，2为严选商品
				serviceList: [],
				serviceSelect: {
					page_size: 10,
					page: 1,
					latitude: 0,
					longitude: 0,
				},
				productList: [],
				productSelect: {
					page_size: 10,
					page: 1
				},
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉或点击',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
			}
		},
		methods: {
			init() {
				this.tabSelect()
				this.tabIndex = 2
				this.tabSelect()
				this.tabIndex = 1
			},
			featureLabelSplit(res) {
				if (res) {
					return res.split(',')
				}
				return []
			},

			tabSelect() {

				if (this.tabIndex === 1) {
					weixin.request({
						newUrl: true,
						api: '/api/member/get-confinement-service',
						data: this.serviceSelect,
						utilSuccess: (res) => {
							if (res.rows.length > 0 && res.rows) {
								this.serviceList.push(...res.rows)
								this.status = 'loadmore'
							} else {
								this.status = 'nomore'
								if (this.serviceSelect.page > 1) {
									this.serviceSelect.page--
								}
							}

						}
					})
				}
				if (this.tabIndex === 2) {
					weixin.request({
						newUrl: true,
						api: '/api/member/get-confinement-product',
						data: this.productSelect,
						utilSuccess: (res) => {
							if (res.rows.length > 0 && res.rows) {
								this.productList.push(...res.rows)
								this.status = 'loadmore'
							} else {
								this.status = 'nomore'
								if (this.productSelect.page > 1) {
									this.productSelect.page--
								}
							}
						}
					})
				}
			},

			loadmore() {
				this.status = 'loading'
				if (this.tabIndex === 1) {
					this.serviceSelect.page++
					this.tabSelect()
				}
				if (this.tabIndex === 2) {
					this.productSelect.page++
					this.tabSelect()
				}
			},

			gotoDetail(id) {
				this.$u.throttle(() => {
					if (this.tabIndex === 1) {
						uni.navigateTo({
							url: `/packages/packageCarecenter/pages/careCenter/serviceDetail?id=${id}`
						})
					}
					if (this.tabIndex === 2) {
						uni.navigateTo({
							url: `/packages/packageCarecenter/pages/careCenter/productDetail?id=${id}`
						})
					}
				})
			}
		},
		computed: {
			nameComputed() {
				return function(name) {
					if (!name) {
						return '未知'
					}
					if (name.length > 12) {
						return name.slice(0, 11) + '..'
					}
					return name
				}
			},
			addressComputed() {
				return function(address) {
					if (!address) {
						return '无'
					}
					if (address && (address.length > 12)) {
						return address.slice(0, 11) + '..'
					}
					return address
				}
			},
			distanceComputed() {
				return function(dis) {
					if (dis) {
						if (dis.indexOf('km') !== -1) {
							return Number(dis.split('km')[0]).toFixed(1) + 'km'
						}
						if (dis.indexOf('m') !== -1) {
							return Number(dis.split('m')[0]).toFixed(1) + 'm'
						}
					}
				}
			}
		},
		mounted() {
			uni.getLocation().then(res => {
				let {
					latitude,
					longitude
				} = res[1]
				this.serviceSelect.latitude = latitude
				this.serviceSelect.longitude = longitude

				this.init()
			})
		},
		onReachBottom() {

			this.loadmore()
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.careBanner {
		display: block;
		width: 690rpx;
		height: 220rpx;
		margin: 20rpx auto;
	}

	.strategyBox {
		width: 710rpx;
		padding-bottom: 16rpx;
		background-image: linear-gradient(180deg, #FFE4EC 0%, #FFFFFF 24%);
		border: 4rpx solid #FFFFFF;
		box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.03);
		border-radius: 16rpx;

		.strTit {
			padding: 30rpx 25rpx 15rpx 25rpx;

			.strL {
				font-size: 34rpx;
				color: #333333;
				letter-spacing: 1rpx;
				font-weight: 500;

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

			.more {
				font-size: 28rpx;
				color: #333333;
				font-weight: 400;
			}
		}

		.strCol {
			padding: 16rpx 25rpx;

			.strPic {
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;

				image {
					display: block;
					width: 140rpx;
					height: 140rpx;
					border-radius: 10rpx;
				}
			}

			.strInfo {
				flex: 1;
				padding-left: 30rpx;

				.h3 {
					font-size: 30rpx;
					color: #333333;
					font-weight: 500;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					width: 460rpx;
				}

				.p {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #999999;
					font-weight: 400;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					width: 460rpx;
				}
			}
		}
	}

	.careBox {
		width: 750rpx;
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 70%, rgba(255, 255, 255, 0.00) 100%);
		border-radius: 40rpx 40rpx 0 0;
		margin-top: 20rpx;

		.careTabs {
			width: 100%;
			height: 106rpx;

			.tabCol {
				width: 50%;
				height: 106rpx;
				line-height: 106rpx;
				font-size: 36rpx;
				color: #666666;
				text-align: center;
				font-weight: 400;
				position: relative;

				text {
					position: relative;
					z-index: 3;
				}

				.line {
					display: none;
					width: 94rpx;
					height: 33rpx;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 20rpx;
					z-index: 2;

					image {
						display: block;
						width: 94rpx;
						height: 33rpx;
					}
				}
			}

			.cur {
				color: #333333;
				font-weight: 600rpx;

				.line {
					display: block;
				}
			}
		}
	}

	.termBox {
		width: 100%;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0) 100%);
		border-radius: 40rpx 40rpx 0px 0px;

		.termOuter {
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: flex-start;

			.termCol {
				width: 33.33%;
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				padding: 30rpx 0;

				.iconfont {
					font-size: 24rpx;
					color: #666666;
					line-height: 28rpx;
					margin-left: 8rpx;
				}

			}

			.termCol.cur {
				color: #FF578A;

				.iconfont {
					color: #FF578A;
				}
			}

		}
	}

	.proBox {
		width: 710rpx;
		background: #fff;
		margin: 0 auto 30rpx auto;
		border-radius: 12rpx;
		box-sizing: border-box;

		.tagGroup {
			padding: 0 24rpx;

			text {
				display: inline-block;
				height: 64rpx;
				background: #F6F6F6;
				border-radius: 32rpx;
				padding: 0 30rpx;
				font-size: 26rpx;
				color: #666666;
				text-align: center;
				line-height: 64rpx;
				font-weight: 400;
				margin-right: 15rpx;
			}
		}
	}

	.introBox {
		padding: 0 24rpx;
	}

	.intro_column:first-child {
		border-top: none;
	}

	.intro_column {
		display: flex;
		justify-content: flex-start;
		padding: 20rpx 0;
		width: 100%;
		border-top: 2rpx solid #EAEAEA;

		.imgOuter {
			width: 260rpx;
			height: 210rpx;
			position: relative;
			border-radius: 10rpx;

			image {
				width: 260rpx;
				height: 210rpx;
				border-radius: 10rpx;
			}

			.i_intro {
				position: absolute;
				top: 0;
				left: 0;
				width: 68rpx;
				height: 32rpx;
				background: #FF578A;
				border-radius: 10rpx 0px 18rpx 0;
				font-size: 22rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
			}
		}

		.columnInfo {
			flex: 1;
			margin-left: 22rpx;
			position: relative;

			.title {
				width: 100%;
				font-size: 30rpx;
				font-weight: 700;
				color: #333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.tags {
				margin-top: 8rpx;
			}

			.tags text {
				height: 28rpx;
				background: rgba(255, 177, 62, 0.1);
				border-radius: 4rpx;
				line-height: 28rpx;
				font-size: 20rpx;
				padding: 0 10rpx;
				margin-right: 10rpx;
				color: #FF753E;
			}

			.grayBg {
				background: #F6F6F6 !important;
				color: #999999 !important;
			}

			.subInfo {
				width: 100%;
				font-size: 24rpx;
				color: #999;
				font-weight: 400;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-top: 15rpx;

				.font_red {
					margin-left: 10rpx;
				}
			}

			.price {
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				margin-top: 8rpx;

				text {
					margin-right: 10rpx;
				}

				font-size:36rpx;
				color:#FF578A;

				.smallIcon {
					font-size: 24rpx;
					margin-right: 3rpx;
				}
			}

		}
	}

	::v-deep .u-load-more-wrap {
		padding: 30rpx 0;
	}
</style>