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

<template>
	<view class="content">
		<!-- <view @click="goto(1)">月子中心</view>
		<view @click="goto(2)">月嫂</view> -->
		<view>
			<image @click="goto(1)" class="careBanner" src="../../static/carecenter.png"></image>
			<image @click="goto(2)" 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="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 {
				btnStyle: {
					border: 'none',
					background: 'transparent',
					color: '#fff',
					width: '136rpx',
					height: '48rpx',
					fontSize: '34rpx',
					fontWeight: 400,
					marginLeft: '20rpx'
				},
				strategies: [], //攻略
			}
		},
		mounted(){
			this.getStrategy();
		},
		methods: {
			goto(type){
				let url = type==1?"/packages/packageCarecenter/pages/careCenter/careCenter":"/packages/packageCarecenter/pages/commonService/commonCenter?type=maternity";
				uni.redirectTo({
					url:url
				})
			},
			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);
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.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;
				}
			}
		}
	}
	.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;
	
		}
	}
</style>