You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

736 lines
16 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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" @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';
export default {
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'
})
})
},
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
},
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: 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>