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

<template>
	<view class="content">
		<!-- <carehome></carehome> -->
<!-- 		<view>
			<image class="careBanner" src="../../static/carecenter.png"></image>
			<image class="careBanner" src="../../static/commoncenter.png"></image>
		</view> -->
		
		<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" @click="toStrategyCenter">更多</view>
				</view>
				<view class="strCol flex_start" v-for="(item,index) in strategies" :key="item.id"
					@click="toStrategyDetail(item.id)">
					<view class="strPic">
						<image mode="aspectFill" :src="item.cover_picture || '../../static/banner.png'"></image>
					</view>
					<view class="strInfo">
						<view class="h3">{{item.title}}</view>
						<view class="p" v-if="item.subheading">
							{{item.subheading}}
						</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">
					<u-dropdown active-color="#FF578A">
						<u-dropdown-item v-model="search.sortValue" @change="changeSearchSort" :title="search.sortName"
							:options="parameter.sort">
						</u-dropdown-item>
						<u-dropdown-item v-model="search.area" @change="changeSearchArea" :title="search.areaName"
							:options="parameter.area">
						</u-dropdown-item>
					</u-dropdown>
				</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" v-if="item.low_price">￥</text>
							<text v-if="item.low_price">{{item.low_price}}&nbsp;&nbsp;-&nbsp;&nbsp;</text>
							<text class="smallIcon" v-if="item.heigh_price">￥</text>
							<text v-if="item.heigh_price">{{item.heigh_price}}</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>
						</view>
						<view class="subInfo flex_between"><text>{{addressComputed(item.service.name)}}</text></view>
						<view class="price"><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'
	import {
		data
	} from 'uview-ui/libs/mixin/mixin';
	// import carehome from '../home/home.vue'
	export default {
		// components:{
		// 	carehome
		// },
		data() {
			return {
				parameter: {
					sort: [{
						label: '综合排序',
						value: "0",
						name: "id",
					}, {
						label: '距离排序',
						value: "1",
						name: "id",
					}, {
						label: '价格排序',
						value: "2",
						name: "id",
					}, {
						label: '人气排序',
						value: "3",
						name: "id",
					}],
					area: []
				},
				search: {
					sortValue: "",
					sort: "",
					sortName: "综合排序",
					area: "",
					areaName: "全部区域"
				},
				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: '实在没有了'
				},

				strategies: [], //攻略
			}
		},
		methods: {
			changeSearchArea(e) {
				this.search.areaName = (e === "" ? "全部区域" : e);
				if (this.tabIndex === 1) {

					this.serviceSelect.page = 1;

				} else {
					this.productSelect.page = 1;
				}
				this.serviceList = [];
				//this.productList = [];
				this.tabSelect();
			},
			changeSearchSort(e) {
				this.search.sortName = this.parameter.sort[e].label;
				this.search.sort = this.parameter.sort[e].name;
			},
			toStrategyDetail(id) {
				this.$u.throttle(() => {
					uni.navigateTo({
						url: `/packages/packageCarecenter/pages/careCenter/strategyDetail?id=${id}`
					})
				})
			},
			toStrategyCenter() {
				this.$u.throttle(() => {
					uni.navigateTo({
						url: '/packages/packageCarecenter/pages/careCenter/strategyCenter?type=confinement'
					})
				})
			},
			init() {
				this.tabSelect()
				this.tabIndex = 2
				this.tabSelect()
				this.tabIndex = 1
			},
			featureLabelSplit(res) {
				if (res) {
					return res.split(',')
				}
				return []
			},
			async getParameter(code) {
				await weixin.request({
					newUrl: true,
					api: '/api/member/parameter/show',
					data: {
						number: code
					},
					utilSuccess: (res) => {
						this.parameter.area.push({
							label: "全部区域",
							value: ""
						})
						res.detail.map(item => {
							this.parameter.area.push({
								label: item.value,
								value: item.value
							})
						})

					}
				})
			},
			tabSelect() {

				if (this.tabIndex === 1) {
					weixin.request({
						newUrl: true,
						api: '/api/member/get-confinement-service',
						data: {
							sort_name: this.search.sort,
							area: this.search.area,
							...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: {
							sort_name: this.search.sort,
							area: this.search.area,
							...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}`
						})
					}
				})
			},

			getStrategy() {
				weixin.request({
					newUrl: true,
					api: '/api/member/get-strategy',
					data: {
						page: 1,
						page_size: 5,
						call_logo: "confinement"
					},
					utilSuccess: res => {
						this.strategies = res.rows
						console.log(this.strategies);
					}
				})
			},
		},
		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()
			})

			this.getStrategy();
			this.getParameter("area");
		},
		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: inline-block;
		width: 357rpx;
		height: 182rpx;
		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>