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

<template>
	<view>
		<view class="strategy">
			<view class="strategy-title">
				<view class="strategy-title-icon">
					<u-image src="/packages/packageCarecenter/static/icon_gonglve.png" width="30" height="34"></u-image>
				</view>
				<view class="strategy-title-text">
					{{paraType[type]}}攻略
				</view>
			</view>

			<view class="strategy-content">
				<scroll-view scroll-y="true" style="height: 1000rpx;" @scrolltolower="loadmore">
					<view class="strategy-content-item" v-for="(item,index) in strategies" :key="item.id"
						@click="toDetail(item.id)">
						<view class="strategy-content-item-left">
							<u-image :src="item.cover_picture" width="160" height="150" border-radius="18"></u-image>
						</view>
						<view class="strategy-content-item-right">
							<view class="strategy-content-item-right-title">{{item.title}}</view>
							<view class="strategy-content-item-right-hubheading" v-if="item.subheading">
								{{item.subheading}}
							</view>
						</view>
					</view>

					<u-loadmore :status="status" :load-text='loadText' @loadmore='loadmore' />
				</scroll-view>
			</view>
		</view>

		<view class="bottom-btn">
			<view class="bottom-btn-boder">
				<u-image src="/packages/packageCarecenter/static/msg.png" width="39" height="39"></u-image>
				<u-button :custom-style="btnStyle" :hair-line="false" hover-class="none" open-type="contact">询问客服
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		weixin
	} from '@/utils/weixin.js'
	export default {
		data() {
			return {
				paraType: {
					"maternity": "月嫂",
					"hospital": "医院",
					"postpartumCare": "产后护理",
					"confinement": "月子中心"
				},
				type: "confinement",
				strategies: [],
				select: {
					page: 1,
					page_size: 10,
					call_logo: "confinement"
				},
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉或点击',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				btnStyle: {
					border: 'none',
					background: 'transparent',
					color: '#fff',
					width: '136rpx',
					height: '48rpx',
					fontSize: '34rpx',
					fontWeight: 400,
					marginLeft: '20rpx'
				}
			}
		},
		methods: {
			toDetail(id) {
				this.$u.throttle(() => {
					uni.navigateTo({
						url: `/packages/packageCarecenter/pages/careCenter/strategyDetail?id=${id}`
					})
				})
			},
			getStrategy() {
				weixin.request({
					newUrl: true,
					api: '/api/member/get-strategy',
					data: this.select,
					utilSuccess: res => {
						if (res.rows.length === 0) {
							if (this.select.page > 1) {
								this.select.page--
								this.status = 'nomore'
							}
							return
						}
						this.strategies.push(...res.rows)
						this.status = 'loadmore'
						console.log(this.strategies);
					}
				})
			},

			loadmore(e) {
				if (this.status === 'loadmore') {
					this.select.page++
					this.status = 'loading'
					this.getStrategy()
				}
			}
		},
		computed: {

		},
		mounted() {},
		onLoad(options) {
			this.type = options.type;
			this.select.call_logo = options.type;
			uni.setNavigationBarTitle({
				title: this.paraType[options.type] + '攻略'
			});
			this.getStrategy();
		}
	}
</script>

<style scoped lang="scss">
	.strategy {
		background: linear-gradient(180deg, #FFEFF4 0%, #FFFFFF 100%);
		border-radius: 40rpx;

		margin: 37rpx 20rpx;

		&-title {
			display: flex;
			align-items: center;

			padding-top: 29rpx;
			padding-left: 50rpx;

			&-text {
				font-weight: 400;
				color: #333333;
				font-size: 34rpx;

				padding-left: 21rpx;
			}
		}

		&-content {

			margin-top: 44rpx;
			padding: 0 50rpx;

			&-item {
				display: flex;
				align-items: center;

				margin-bottom: 30rpx;

				&-right {
					padding-left: 37rpx;

					&-title {
						font-weight: 400;
						color: #333333;
						font-size: 30rpx;
						text-overflow: ellipsis;

						padding: 11rpx 0;
					}

					&-subheading {
						font-weight: 400;
						color: #999999;
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.bottom-btn {
		height: 136rpx;
		background: #fff;
		border-top: 1rpx solid rgba(180, 180, 180, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;

		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		&-boder {
			width: 480rpx;
			height: 89rpx;
			border-radius: 45rpx;
			background: #FF578A;
			display: flex;
			align-items: center;
			justify-content: center;

		}
	}

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