wangyifang
/
wx-yunyubang-miniprogram
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

月子会所

Browse Source 
Signed-off-by: wangxiaoping <809126545@qq.com>
master
wangxiaoping 4 years ago
parent 1964c5390b
commit c6cd6f94a7
17 changed files with 409 additions and 10 deletions
Show Stats Download Patch File Download Diff File

321
packages/packageCarecenter/pages/careCenter/careCenter.vue
Unescape View File

@ -0,0 +1,321 @@
<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 cur">
<text>严选商家</text>
<view class="line"><image src="../../static/img_qiehuan.png"></image></view>
</view>
<view class="tabCol">
<text>严选商品</text>
<view class="line"><image src="../../static/img_qiehuan.png"></image></view>
</view>
</view>
</view>
<view 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 class="intro_column" @tap="gotoDetail">
<view class="imgOuter"><image mode="aspectFill" src="../../static/690x400.jpg"></image><view class="i_intro">推荐</view></view>
<view class="columnInfo">
<view class="title">孕育邦孕妈妈摄影体验</view>
<view class="tags"><text>孕妈</text><text>宝宝成长</text><text class="grayBg">讲座知识</text></view>
<view class="subInfo flex_between"><text>东方之门/湖滨天地</text><text>2.5km</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 class="intro_column" @tap="gotoDetail">
<view class="imgOuter"><image mode="aspectFill" src="../../static/690x400.jpg"></image><view class="i_intro">推荐</view></view>
<view class="columnInfo">
<view class="title">孕育邦孕妈妈摄影体验</view>
<view class="tags"><text>孕妈</text><text>宝宝成长</text><text class="grayBg">讲座知识</text></view>
<view class="subInfo flex_between"><text>东方之门/湖滨天地</text><text>2.5km</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 class="intro_column" @tap="gotoDetail">
<view class="imgOuter"><image mode="aspectFill" src="../../static/690x400.jpg"></image><view class="i_intro">推荐</view></view>
<view class="columnInfo">
<view class="title">孕育邦孕妈妈摄影体验</view>
<view class="tags"><text>孕妈</text><text>宝宝成长</text><text class="grayBg">讲座知识</text></view>
<view class="subInfo flex_between"><text>东方之门/湖滨天地</text><text>2.5km</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>
</template>
<script>
export default {
data() {
return {}
},
methods: {
}
}
</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;
}
}
}
}
</style>

BIN
packages/packageCarecenter/static/690x400.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
packages/packageCarecenter/static/banner.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 KiB

BIN
packages/packageCarecenter/static/icon_gonglve.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
packages/packageCarecenter/static/icon_kefu.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
packages/packageCarecenter/static/icon_shaixuan.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 796 B

BIN
packages/packageCarecenter/static/img_qiehuan.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
packages/packageCarecenter/static/img_yuezizhongxin.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

21
pages.json
Unescape View File

@ -8,7 +8,7 @@
"navigationBarTextStyle": "white"
}
},
},
{
"path": "pages/active/active",
"style": {
@ -17,7 +17,7 @@
"navigationBarTextStyle": "white"
}
},
},
{
"path": "pages/member/member",
"style": {
@ -280,7 +280,22 @@
}
]
}
},
{
"root": "packages/packageCarecenter",
"pages": [
{
"path": "pages/careCenter/careCenter",
"style": {
"navigationBarTitleText": "月子中心",
"navigationBarBackgroundColor": "#FFFFFF"
}
}
]
}
],
"globalStyle": {
"navigationBarTextStyle": "black",

11
pages/active/active.vue
Unescape View File

@ -41,9 +41,9 @@
<image src="../../static/icon_home_shangcheng@2x.png"></image>
<view>母婴商城</view>
</view>
<view class="menuCol">
<image src="../../static/icon_home_ruzhu@2x.png"></image>
<view>商户入驻</view>
<view class="menuCol" @tap="goCarecenter">
<image src="../../static/icon_home_yuezizhongxin.png"></image>
<view>月子中心</view>
</view>
<view class="menuCol">
<image src="../../static/icon_home_women@2x.png"></image>
@ -127,6 +127,11 @@
this.getServiceList()
},
methods: {
goCarecenter(){
uni.navigateTo({
url:"../../packages/packageCarecenter/pages/careCenter/careCenter"
})
},
getActivityList() {
uni.request({
url: this.baseUrl + '/api/wechat/activity-index',

7
pages/home/home.vue
Unescape View File

@ -2,7 +2,7 @@
<view class="content">
<image class="banner" mode="widthFix" src="../../static/member_01.jpg"></image>
<view class="joinBTn" @tap="joinUs">会员福利</view>
<view class="joinBTn" @tap="goCarecenter">月子中心</view>
</view>
</template>
@ -18,6 +18,11 @@
url:"../member/member"
});
},
goCarecenter(){
uni.navigateTo({
url:"../../packages/packageCarecenter/pages/careCenter/careCenter"
});
},
myOrder(){
uni.navigateTo({
url:"../../packages/packageOrder/pages/myOrder/myOrder"

3
pages/member/member.vue
Unescape View File

@ -223,8 +223,7 @@
var cx = x + r;
var cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.setStrokeStyle('#FFFFFF')
ctx.stroke()
ctx.clip();
ctx.drawImage(img, x, y, d, d);
ctx.restore();

56
resources/css/common.css
Unescape View File

@ -41,4 +41,58 @@ image{
.padding_20{
padding:30rpx 0 10rpx 0;
}
.flex_column{
display:flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
align-content: center;
}
.flex_column_center{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
.flex_column_left{
display:flex;
flex-direction: column;
justify-content: center;
}
.flex_column_between{
display:flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
align-content: center;
}
.flex_top{
display:flex;
justify-content: flex-start;
}
.flex_center{
display:flex;
justify-content: center;
align-items: center;
align-content: center;
}
.flex_start{
display:flex;
justify-content: flex-start;
align-items: center;
align-content: center;
}
.flex_between{
display:flex;
justify-content: space-between;
align-items: center;
align-content: center;
}
.flex_between_top{
display:flex;
justify-content: space-between;
}
.flex_wrap{
flex-wrap: wrap;
}

BIN
static/i_left.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/i_right.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/icon_home_yuezizhongxin.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
static/member_banner.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

Write Preview
Loading…
Cancel
Save