xinyilu/nurseWeChatAppletUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/jihan_0203_小程序功能开发分支' into dev

Browse Source
This commit is contained in:
纪寒 2023-02-23 14:57:11 +08:00
commit 2eb77a91f2
72 changed files with 2467 additions and 1971 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
App.vue
View File

@ -15,12 +15,11 @@
}
.app {
background-color: #F4F5F7;
width: 100%;
height: 100%;
position: relative;
// position: relative;
color: #000000;
padding: 30rpx 0 200rpx 0;
padding: 30rpx 0 150rpx 0;
.cards {
width: 94%;

8
api/Healthknowledge/index.js Normal file
View File

@ -0,0 +1,8 @@
import request from "../request.js"
export function getHeathHousingList(pageNum, pageSize) {
return request({
url: `/nurseApplet/nearbyNursingStation/getHeathHousingList?pageNum=${pageNum}&pageSize=${pageSize}&informationCategoryType=HEALTH_NOUS`,
method: 'get',
})
}

2
api/ProjectDetails/index.js
View File

@ -2,7 +2,7 @@ import request from "../request.js"
export function getAppStationItemInfo(stationId, stationItemId, stationItemPriceId) {
return request({
url: `/nurseApp/login/getAppStationItemInfo?stationId=${stationId}&stationItemId=${stationItemId}&stationItemPriceId=${stationItemPriceId}`,
url: `/nurseApplet/login/getStationItemInfo?stationId=${stationId}&stationItemId=${stationItemId}&stationItemPriceId=${stationItemPriceId}`,
method: 'GET'
})
}

9
api/homepage/index.js Normal file
View File

@ -0,0 +1,9 @@
import request from "../request.js"
export function getPoserInfoListByType() {
return request({
url: `/nurseApplet/nearbyNursingStation/getPoserInfoListByType?moduleType=HOME_PAGE_MODULE`,
method: 'GET'
})
}

4
api/nursestation/nursestation.js
View File

@ -9,9 +9,9 @@ export function introductionList(id) {
}
export function itemList(id,pageSize,pageNum) {
export function itemList(id,pageSize,pageNum,nurseClassifyInfoId) {
return request({
url: `/nurseApplet/nearbyNursingStation/itemList?pageSize=${pageSize}&pageNum=${pageNum}&nurseStationId=${id}`,
url: `/nurseApplet/nearbyNursingStation/itemList?pageSize=${pageSize}&pageNum=${pageNum}&nurseStationId=${id}&nurseClassifyInfoId=${nurseClassifyInfoId}`,
method: 'GET'
})
}

17
api/site/site.js
View File

@ -1,11 +1,8 @@
import request from "../request.js"
export function nearbyList(pageSize,pageNum,longitude, latitude) {
export function nearbyList(pageSize, pageNum, longitude, latitude,ClassifyInfoId,itemClassId,searchName) {
return request({
url: `/nurseApplet/nearbyNursingStation/nearbyList?pageSize=${pageSize}&pageNum=${pageNum}&homeLongitude=${longitude}&homeLatitude=${latitude}`,
url: `/nurseApplet/nearbyNursingStation/nearbyList?pageSize=${pageSize}&pageNum=${pageNum}&homeLongitude=${longitude}&homeLatitude=${latitude}&nurseClassifyInfoId=${ClassifyInfoId}&nurseItemClassifyInfoId=${itemClassId}&searchName=${searchName}`,
method: 'GET'
})
}
@ -16,4 +13,12 @@ export function getPatientInfo(id) {
url: `/nurseApplet/login/getPatientInfo?patientId=${id}`,
method: 'GET'
})
}
}
//护理站和护理项目分类
export function getNurseClassifyList() {
return request({
url: `/nurseApplet/nearbyNursingStation/getNurseClassifyList?moduleType=NURSE_AGENCY_INTRODUCE_MODULE`,
method: 'GET'
})
}

13
manifest.json
View File

@ -43,13 +43,19 @@
]
},
/* ios打包配置 */
"ios" : {},
"ios" : {
"dSYMs" : false
},
/* SDK配置 */
"sdkConfigs" : {
"geolocation" : {
"system" : {
"__platform__" : [ "ios", "android" ]
}
},
"ad" : {},
"push" : {
"unipush" : null
}
},
"splashscreen" : {
@ -84,7 +90,10 @@
"uniStatistics" : {
"enable" : true
},
"lazyCodeLoading" : "requiredComponents"
"lazyCodeLoading" : "requiredComponents",
"unipush" : {
"enable" : false
}
},
"mp-alipay" : {
"usingComponents" : true

132
pages.json
View File

@ -9,6 +9,13 @@
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
}, {
"path": "pages/ProjectDetails/ProjectDetails",
"style": {
"navigationBarTitleText": "护理项目详情",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff" //背景颜色
}
}, {
"path": "pages/modifyAddress/modifyAddress",
"style": {
@ -31,23 +38,13 @@
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff"
}
}, {
"path": "pages/ServiceDetails/ServiceDetails",
"style": {
"navigationBarTitleText": "服务详情",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff" //背景颜色
}
}, {
"path": "pages/ProjectDetails/ProjectDetails",
"style": {
"navigationBarTitleText": "护理项目详情",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff" //背景颜色
}
}, {
"path": "pages/goodsorderRate/goodsorderRate",
"style": {
@ -55,13 +52,6 @@
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff" //背景颜色
}
}, {
"path": "pages/Bodysatelliteintegration/Bodysatelliteintegration",
"style": {
"navigationBarTitleText": "体卫融合",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff" //背景颜色
}
},
{
"path": "pages/modify/modify",
@ -98,7 +88,8 @@
"navigationBarTitleText": "医路优品",
"navigationBarBackgroundColor": "#ffffff",
"onReachBottomDistance": 40, //距离底部多远时触发 单位为px
"enablePullDownRefresh": true //设置参数为true
"enablePullDownRefresh": true ,//设置参数为true
"navigationStyle": "custom"
}
}, {
"path": "pages/CommodityOrder/CommodityOrder",
@ -109,7 +100,6 @@
"enablePullDownRefresh": true //设置参数为true
}
},
{
"path": "pages/user/user",
"style": {
@ -142,13 +132,12 @@
"navigationBarBackgroundColor": "#ffffff"
}
},
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录",
// "navigationStyle": "custom"
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff" //背景颜色
}
},
{
@ -159,11 +148,10 @@
"navigationBarBackgroundColor": "#ffffff" //背景颜色
}
},
{
"path": "pages/Nursingstationserviceorder/Nursingstationserviceorder",
"style": {
"navigationBarTitleText": "护理站服务订单",
"navigationBarTitleText": "护理机构服务订单",
"navigationBarBackgroundColor": "#ffffff", //背景颜色
"onReachBottomDistance": 40, //距离底部多远时触发 单位为px
"enablePullDownRefresh": true //设置参数为true
@ -202,7 +190,6 @@
"enablePullDownRefresh": false
}
},
{
"path": "pages/order/order",
"style": {
@ -217,17 +204,16 @@
"navigationBarTitleText": "预约详情",
"enablePullDownRefresh": false
}
},
{
"path": "pages/homepage/homepage",
"style": {
"navigationBarTitleText": "泉医到家",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff"
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#ffffff",
"enablePullDownRefresh": false
}
},
{
"path": "pages/confirmOrder/confirmOrder",
"style": {
@ -258,7 +244,6 @@
"path": "pages/ProductList/ProductList", //商品列表
"style": {
"navigationBarTitleText": "医路优品",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff",
"onReachBottomDistance": 40, //距离底部多远时触发 单位为px
"enablePullDownRefresh": true //设置参数为true
@ -275,75 +260,86 @@
{
"path": "pages/nursestation/nursestation",
"style": {
"navigationBarTitleText": "护理站详情",
"navigationBarTitleText": "护理机构详情",
"navigationBarBackgroundColor": "#ffffff",
"onReachBottomDistance": 100, //距离底部多远时触发 单位为px
"enablePullDownRefresh": true //设置参数为true
}
},
{
"path": "pages/site/site",
"style": {
"navigationBarTitleText": "附近护理站",
"navigationBarTitleText": "护理机构",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff", //背景颜色
"onReachBottomDistance": 40, //距离底部多远时触发 单位为px
"onReachBottomDistance": 100, //距离底部多远时触发 单位为px
"enablePullDownRefresh": true //设置参数为true
}
},
{
"path": "pages/detail/detail",
"style": {
"navigationBarTitleText": "护理站简介",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff" //背景颜色
}
},
{
"path": "pages/medicine/medicine",
"style": {
"navigationBarTitleText": "就医",
"navigationBarTitleText": "健康咨询",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff"
}
},
{
"path": "pages/Doctordetails/Doctordetails",
"style": {
"navigationBarTitleText": "医生信息",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff"
}
}, {
"path": "pages/Geriatricdisease/Geriatricdisease",
"style": {
"navigationBarTitleText": "老年病中心",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff"
}
}, {
"path": "pages/diseasemanagement/diseasemanagement",
"style": {
"navigationBarTitleText": "专病管理",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff"
}
}, {
"path": "pages/toptabbar/toptabbar",
},
{
"path": "pages/utabs/u-tabs",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff"
}
},
{
"path": "pages/classification/classification",
"style": {
"navigationBarTitleText": "分类",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"disableScroll": true
// "navigationBarBackgroundColor": "#ffffff",
// "onReachBottomDistance": 50 //距离底部多远时触发 单位为px
// "enablePullDownRefresh": true //设置参数为true
}
}, {
"path": "pages/Healthknowledge/Healthknowledge",
"style": {
"navigationBarTitleText": "健康常识",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff"
}
}, {
"path": "pages/Healthitem/Healthitem",
"style": {
"navigationBarTitleText": "健康常识",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff"
}
},
{
"path": "pages/customerservice/customerservice",
"style": {
"navigationBarTitleText": "在线客服",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff"
}
}, {
"path": "pages/materialbenefits/materialbenefits",
"style": {
"navigationBarTitleText": "新人福利",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff"
}
}
@ -366,11 +362,17 @@
"selectedIconPath": "static/homepagews.png",
"text": "首页"
},
{
"pagePath": "pages/shopping/shopping",
"iconPath": "static/shoping.png",
"selectedIconPath": "static/shopingw.png",
"text": "商城"
},
{
"pagePath": "pages/Personal/Personal",
"iconPath": "static/userw.png",
"selectedIconPath": "static/users.png",
"text": "个人中心"
"text": "我的"
}
]
}

1
pages/CommodityDetails/CommodityDetails.vue
View File

@ -410,6 +410,7 @@
// 查询商品详细信息
goodsDetailsinfo(goodsInfoId) {
let that = this
this.info = []
goodsDetails(goodsInfoId).then(res => {
uni.removeStorageSync('Refresh');
if (res.data.goodsRemark) {

120
pages/Doctordetails/Doctordetails.vue
View File

@ -1,120 +0,0 @@
<template>
<view class="app">
<view class="info">
<view class="image">
</view>
<view class="name">
某某某
</view>
<view class="position">
主任医师
</view>
<view class="border">
</view>
<view class="text">
熟悉呼吸系统疾病的诊治，尤其擅 长肺栓塞、肺动脉高压和慢性气道疾 病的研究。
</view>
</view>
<view class="price">
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
//1.分享给朋友
onShareAppMessage(res) {
let pages = getCurrentPages();
let url = pages[pages.length - 1].$page.fullPath
return {
title: '泉医到家',
path: url,
}
},
//2.分享到朋友圈
onShareTimeline(res) {
let pages = getCurrentPages();
let url = pages[pages.length - 1].$page.fullPath
return {
title: '泉医到家',
path: url,
}
},
}
</script>
<style lang="scss">
.app {
padding-top: 20rpx;
.price {
width: 94%;
height: 105rpx;
background: #FFFFFF;
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
border-radius: 20rpx;
margin: 0 auto;
margin-top: 15rpx;
}
.info {
width: 94%;
height: 651rpx;
margin: 0 auto;
background: #FFFFFF;
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
border-radius: 20rpx;
position: relative;
font-size: 36rpx;
.text {
width: 90%;
line-height: 67rpx;
position: absolute;
left: 5%;
top: 263rpx;
text-indent: 1em;
}
.border {
width: 90%;
margin: 0 auto;
height: 1rpx;
background: #D8D4D4;
position: absolute;
left: 5%;
top: 209rpx;
}
.position {
font-size: 35rpx;
color: #969394;
position: absolute;
left: 264rpx;
top: 122rpx;
}
.name {
position: absolute;
left: 264rpx;
top: 68rpx;
}
.image {
width: 147rpx;
height: 150rpx;
background: #BFBFBF;
border-radius: 25rpx;
position: absolute;
left: 74rpx;
top: 32rpx;
}
}
}
</style>

95
pages/Geriatricdisease/Geriatricdisease.vue
View File

@ -1,95 +0,0 @@
<template>
<view class="app">
<view class="concent">
<view class="background">
<image src="/static/logo.png" mode=""></image>
<view>
<view class="detailed">
<view class="">
国家老年病中心山东分中心是依托于首都医科大学宣武医院的国家老年疾病临床医学研究中心（国家科技部、国家卫计委、中央军委后勤保障部、国家食品药品监督管理总局联合批准的国家级临床医学研究中心），老年慢性病全国网络化诊治体系及医疗大数据系统，医疗与健康一体化的新型服务体系和数据体系山东省建设单位。为提升山东省基层医院老年病学科水平，建设区域老年疾病预防、管理体系。利用国家中心在老年疾病临床诊疗的优势：在衰老、老年常见重大疾病（帕金森和老年痴呆等老年神经变性病、心脑及外周血管病、糖尿病）和老年综合征（衰弱、跌倒、便秘等）防治领域，围绕老年高龄外科围手术期管理、老年用药管理、老年共病、老年重症、以及老年常见疾病（帕金森病、痴呆、心脑外周血管病、糖尿病等）早期预警、干预及全程管理的综合评估、干预和管理新技术。
</view>
<view class="">
主要开展的科室有：帕金森，两腺科，妇科，心脑血管等精准治疗
</view>
<view class="">
开展项目有：慢病管理，血液净化（高血脂症）妇科筛查，老年病筛查、康复治疗等
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
//1.分享给朋友
onShareAppMessage(res) {
let pages = getCurrentPages();
let url = pages[pages.length - 1].$page.fullPath
return {
title: '泉医到家',
path: url,
}
},
//2.分享到朋友圈
onShareTimeline(res) {
let pages = getCurrentPages();
let url = pages[pages.length - 1].$page.fullPath
return {
title: '泉医到家',
path: url,
}
},
}
</script>
<style lang="scss">
.app {
padding-top: 10rpx;
.concent {
width: 701rpx;
height: 100%;
background: #4C7BC9;
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
border-radius: 20rpx;
margin: 5% auto 20px;
padding: 30rpx 0;
.background {
width: 657rpx;
height: 100%;
background: #FFFFFF;
border-radius: 25rpx;
background-color: white;
margin: 0 auto;
image {
width: 178rpx;
height: 84rpx;
background: #FFFFFF;
border-radius: 25px;
margin-left: 68%;
margin-top: 5%;
}
}
}
}
.detailed {
width: 657rpx;
height: 100%;
padding: 0 42rpx 20rpx;
line-height: 56rpx;
}
.detailed view {
text-indent: 2em;
}
</style>

50
pages/Healthitem/Healthitem.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<view class="app">
<view class="title">
{{item.informationTitle}}
</view>
<view class="text" v-html="item.informationContent">
</view>
</view>
</template>
<script>
export default {
data() {
return {
item: null,
};
},
onLoad(options) { //获取传值
this.item = JSON.parse(decodeURIComponent(options.item))
this.item.informationContent = this.item.informationContent.replace(/\<img/gi,
"<br/> <img class='richPic'")
},
onReady() { //更改导航栏文字
},
}
</script>
<style lang="scss">
.title {
padding-left: 3%;
font-size: 38rpx;
font-weight: bold;
white-space: normal;
word-break: break-all;
margin-bottom: 20rpx;
}
.text {
width: 96%;
margin: 0 auto;
background-color: #fff;
padding: 20rpx;
border-radius: 10rpx;
}
/deep/ .richPic {
width: 100% !important;
height: 100% !important;
}
</style>

174
pages/Healthknowledge/Healthknowledge.vue Normal file
View File

@ -0,0 +1,174 @@
<template>
<view class="app">
<u-tabs :list="tabList" :current="tabcurrent" @change="change"></u-tabs>
<view class="Healthknowledge" v-if="informationCategoryVOList.length>0">
<!-- <view class="title">
健康常识
</view> -->
<view class="list">
<view class="item" v-for="(item,index) in informationCategoryVOList" :key="index"
@tap='gohealthitem(item)'>
<view class="text">
{{item.informationTitle}}
</view>
<view class="author"></view>
<image :src="item.leadThumbnailUrl" mode=""></image>
</view>
</view>
</view>
<view class="noorder" v-else>
<image src="../../static/noorder.png" mode=""></image>
<view class="">
暂无内容
</view>
</view>
<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
</template>
<script>
import {
getHeathHousingList
} from '@/api/Healthknowledge/index.js'
import baseurl from '@/api/baseurl.js'
export default {
data() {
return {
tabcurrent: 0,
tabList: [{
name: '健康常识'
}],
pageNum: 1,
pageSize: 10,
informationCategoryVOList: [],
total: 0,
scrollTop: 0,
};
},
onShow() {},
onLoad() {
this.pageNum = 1
this.getHeathHousing();
},
methods: {
//跳转健康咨询item
gohealthitem(item) {
uni.navigateTo({
url: `/pages/Healthitem/Healthitem?item=${encodeURIComponent(JSON.stringify(item))}`
})
},
getHeathHousing() {
getHeathHousingList(this.pageNum, this.pageSize).then(res => {
res.rows.forEach(e => {
e.leadThumbnailUrl = baseurl + e.leadThumbnailUrl
})
this.informationCategoryVOList = res.rows
this.total = res.total
})
},
change() {},
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
onReachBottom() { //下滑加载
if (this.informationCategoryVOList.length >= this.total) {} else {
this.pageNum++
getHeathHousingList(this.pageNum, this.pageSize).then(res => {
if (res.rows) {
res.rows.forEach(e => {
e.leadThumbnailUrl = baseurl + e.leadThumbnailUrl
this.informationCategoryVOList.push(e)
})
}
})
}
},
onPullDownRefresh() { //下拉刷新
this.pageNum = 1;
this.getHeathHousing();
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
}
</script>
<style lang="scss">
.app {
padding: 0;
.noorder {
margin-top: 20%;
image {
display: block;
margin: 0 auto;
width: 200rpx;
height: 240rpx;
}
view {
margin-top: 100rpx;
text-align: center;
font-size: 36rpx;
color: #BFBFBF;
}
}
.Healthknowledge {
width: 94%;
margin: 20rpx auto;
padding: 0 50rpx 50rpx;
background-color: #fff;
position: relative;
line-height: 46rpx;
.list {
width: 100%;
margin: 20rpx auto 0;
.item {
width: 100%;
height: 200rpx;
position: relative;
border-bottom: 2rpx solid #CDC9C9;
image {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 253rpx;
height: 164rpx;
border-radius: 10rpx;
}
.author {
position: absolute;
bottom: 20rpx;
left: 0;
font-size: 20rpx;
color: #969494;
}
.text {
position: absolute;
top: 20rpx;
left: 0;
width: 50%;
font-size: 30rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.title {
font-size: 38rpx;
font-weight: bold;
}
}
}
</style>

67
pages/Personal/Personal.vue
View File

@ -1,37 +1,19 @@
<template>
<view class="app">
<view class="cards">
<view class="item" style="background-color: #9E4DD0;" @tap='gouser'>
<image src="../../static/user.png" mode=""></image>
<view class="title">
个人信息
</view>
</view>
<view class=" item" style="background-color: #E1AE3C ;" @tap='goorder'>
<image src="../../static/dingdan.png" mode=""></image>
<view class="title">
我的订单
</view>
</view>
<!-- <view class="item" style="background-color: #00C176 ;">
<image src="../../static/home.png" mode=""></image>
<view class="title" style="font-size: 42rpx;">
我的家庭
</view>
</view> -->
<view class="item">
</view>
<view class="item">
</view>
<view class="item">
</view>
<view class="item">
<view class="item" @tap='gouser'>
<image src="../../static/user.png" mode=""></image>
<view class="title">
个人信息
</view>
</view>
<view class=" item" @tap='goorder'>
<image src="../../static/dingdan.png" mode=""></image>
<view class="title">
我的订单
</view>
</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
existPatientInfo
@ -153,14 +135,29 @@
<style lang="scss">
.app {
.cards {
padding: 22px 0 20px 0;
padding: 0;
.item {
width: 94%;
margin: 20rpx auto 0;
background-color: #fff;
position: relative;
height: 100rpx;
border-radius: 5rpx;
.title {
position: absolute;
left: 150rpx;
top: 50%;
transform: translateY(-50%);
font-size: 44rpx;
}
.item {
.title {
width: 80%;
top: 60%;
}
image {
position: absolute;
left: 40rpx;
top: 50%;
transform: translateY(-50%);
width: 55rpx;
height: 55rpx;
}
}
}

52
pages/ProductList/ProductList.vue
View File

@ -1,9 +1,12 @@
<template>
<view class="app">
<view class="" v-if='GoodsCategorychildrenlist.length>1'>
<top-tabbar :tabIndex="tabIndex" :tabBars="GoodsCategorychildrenlist" @toggleToptab="toggleTab"
selectedBottomColor="#D43953" selectedTextColor="#D43953" textColor="#7d7e80" bgColor="#ffffff">
</top-tabbar>
<u-tabs :list="GoodsCategorychildrenlist" :current="tabIndex" @change="toggleTab"
v-if="GoodsCategorychildrenlist.length>=2"></u-tabs>
<view class="fenlei" @tap='toggleTab(1111111111111)' v-if="GoodsCategorychildrenlist.length>=2">
<image src="../../static/fenlei.png" mode=""></image>
<view class="">
分类
</view>
</view>
<view class="inputs">
<i class="icon"></i>
@ -41,11 +44,8 @@
getGoodsCategoryNameList
} from '@/api/ProductList/ProductList.js';
import baseurl from '@/api/baseurl.js'
import topTabbar from '../toptabbar/toptabbar.vue'
export default {
components: {
topTabbar
},
components: {},
data() {
return {
//将选中标签的索引绑定为tabIndex，以便后续的调用
@ -137,10 +137,11 @@
GoodsCategorychildren(value) {
getGoodsCategoryNameList(value).then(res => {
this.GoodsCategorychildrenlist = [{
goodsCategoryName: '全部',
name: '全部',
id: 99999999999999999,
}]
res.data.forEach(e => {
e.name = e.goodsCategoryName
this.GoodsCategorychildrenlist.push(e)
})
})
@ -216,9 +217,42 @@
</script>
<style lang="scss">
::v-deep .u-tabs {
width: 80%;
}
.app {
padding: 0;
.fenlei {
width: 20%;
display: inline-block;
background-color: #fff;
line-height: 86rpx;
font-weight: normal;
height: 86rpx;
text-align: center;
color: #000000;
position: absolute;
right: 0;
top: 0;
font-size: 32rpx;
view {
position: absolute;
right: 20%;
}
image {
width: 45rpx;
height: 45rpx;
position: absolute;
left: 10%;
top: 50%;
transform: translateY(-50%);
}
}
.noorder {
view {
text-align: center;

126
pages/ProjectDetails/ProjectDetails.scss
View File

@ -1,9 +1,25 @@
.app {
height: 100%;
padding: 2% 2% 150rpx 2%;
padding: 0 0 0 0;
padding-top: 10rpx;
font-size: 34rpx;
position: relative;
.swiper-box {
width: 100%;
height: 500rpx;
}
.swiper-item {
height: 500rpx;
text-align: center;
image{
width: 100%;
height: 500rpx !important;
}
}
video{
height: 100%;
width: 100%;
}
.mask {
.information {
width: 70%;
@ -49,101 +65,69 @@
}
}
}
.appointment {
width: 120rpx;
height: 70rpx;
background: #4C7BC9;
border-radius: 26rpx;
color: #ffffff;
text-align: center;
line-height: 70rpx;
position: absolute;
bottom:20rpx;
right:5%;
.bottomcontent{
position: fixed;
width: 100%;
height: 100rpx;
bottom: 0;
background-color: #FFFFFF;
.appoinprice{
padding-left: 20rpx;
font-size: 48rpx;
color: #F44B2F;
line-height: 70rpx;
}
.appointment {
width: 200rpx;
height: 70rpx;
background: #F44B2F;
border-radius: 30rpx;
color: #ffffff;
text-align: center;
line-height: 70rpx;
position: absolute;
bottom:20rpx;
right:5%;
}
}
.detailtitle {
position: relative;
width: 94%;
width: 100%;
height: 100%;
margin: 0 auto;
background: #FFFFFF;
border-radius: 20rpx;
margin-top: 3%;
font-size: 31rpx;
padding: 3%;
padding-bottom: 50rpx;
padding-bottom: 150rpx;
.textInfo {
word-break:break-all;
font-size: 29rpx;
text-indent: 2rem;
line-height: 42rpx;
color: #666666;
padding-top: 30rpx;
/deep/ .richPic {
width: 100% !important;
height: 100% !important;
}
}
.Introduction {
font-size: 31rpx;
color: #333333;
line-height: 12rpx;
margin-left: -3%;
padding: 3%;
padding: 3% 3% 3% 0;
font-size: 32rpx;
}
}
.item {
width: 95%;
height: 100%;
margin: 0 auto;
width: 100%;
height: 200rpx;
background: #FFFFFF;
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
border-radius: 20rpx;
margin: 20rpx auto 0;
padding: 3% 3% 40rpx 3%;
line-height: 60rpx;
position: relative;
image {
width: 170rpx;
height: 170rpx;
margin-left: 3%;
}
.servicetime {
color: #999999;
line-height: 37rpx;
font-size: 30rpx;
position: absolute;
top: 35%;
left: 35%;
}
.price {
color: red;
font-size: 32rpx;
position: absolute;
top: 65%;
left: 35%;
}
.product {
color: #000000;
width: 60%;
position: absolute;
top: 14%;
left: 32%;
font-size: 28rpx;
}
.huanyao {
color: #000000;
position: absolute;
top: 10%;
left: 35%;
width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.text{
padding: 40rpx 20% 0 40rpx;
width: 100%;
height: 81rpx;
font-size: 38rpx;
font-weight: 500;
}
}

102
pages/ProjectDetails/ProjectDetails.vue
View File

@ -1,30 +1,55 @@
<template>
<view class="app">
<view class="item">
<image :src="list.itemPictureUrl"></image>
<view class="huanyao" v-if='list.nurseItemName'>{{list.nurseItemName}}
<view class="container">
<view>
<!-- 轮播图 -->
<swiper indicator-dots="true" indicator-color='#fff' indicator-active-color='#0086d6'
:autoplay="autoplay" interval="3000" duration="1500" show-center-play-btn="true" class="swiper-box"
circular='true' @change="swiperChange">
<swiper-item v-for="(item ,index) in lbinfo" :key="index">
<view class="swiper-item" v-show="!splits(item)" wx-if="{item}">
<image v-if="item" :src="item" mode="widthFix"></image>
</view>
<view class="swiper-item" v-show="splits(item)" v-if="item">
<video :id="'myVideo'+index" :autoplay="false" :src="item" controls show-fullscreen-btn
object-fit="fill" @play="play" @pause="pause" @ended="ended" auto-pause-if-navigate
show-play-btn :enable-progress-gesture='true' :show-center-play-btn='true'
enable-play-gesture auto-pause-if-open-native show-mute-btn></video>
</view>
</swiper-item>
</swiper>
</view>
<view class="huanyao" v-else>暂无
</view>
<!-- <u-swiper v-if="lbinfo" :list="lbinfo" height="350" style='background-size: 100%;' mode='none'></u-swiper> -->
<view class="item">
<view class="text" v-if='list.nurseItemName'>{{list.nurseItemName}}
</view>
<view class="text" v-else>暂无
</view>
<view class="classtype">
</view>
<!-- <view class="pingfen">
<u-rate :count="5" value="2"></u-rate>
</view> -->
<view class="servicetime">服务时长:{{list.serveDurationUnit?list.serveDurationUnit:'0'}}</view>
<view class="price">￥{{list.nurseItemPrice==null?'0':list.nurseItemPrice}}</view>
</view>
<view class="Consumablespackage" v-if='list.itemConsumableList'>耗材包详情:
<!-- <view class="Consumablespackage" v-if='list.itemConsumableList'>耗材包详情:
<span>￥{{list.consumableTotalPrice==null?'0':list.consumableTotalPrice}}</span>
<view class="detail" v-for='(item,index) in list.itemConsumableList' :key="index">
·{{item.consumableDetail}}
<span>{{item.consumableCount}}{{item.consumableUnit}}/￥{{item.consumablePrice}}</span>
</view>
</view>
</view> -->
<view class="detailtitle">
<view class="Introduction">服务详情:</view>
<view class="textInfo" v-html="list.nurseItemContent">
<view class="textInfo" v-if="list.nurseItemContent" v-html="list.nurseItemContent">
</view>
</view>
<view class="appointment" @tap.stop='goappointments(item)'>预约</view>
<view class="bottomcontent">
<view class="appoinprice" v-if="list.totalPrice">
￥{{list.totalPrice}}
</view>
<view class="appointment" @tap.stop='goappointments(item)'>立即预约</view>
</view>
<u-toast ref="uToast" />
<u-mask :show="usershow" class='mask'>
<view class="information">
@ -53,11 +78,13 @@
export default {
data() {
return {
lbinfo: [], //轮播
autoplay: true, //自动切换轮播图
videoContext: '',
baseurl: '',
list: {},
orderNo: '',
usershow: false, //完善信息开关
list: [], //护理站list
list: {}, //护理站list
timer: null,
stationId: null,
stationItemId: null,
@ -70,11 +97,46 @@
this.stationItemPriceId = options.stationItemPriceId
},
onShow() {
this.baseurl = baseurl
this.usershow = false
// 耗材包详情方法调用
this.getlist(this.stationId, this.stationItemId, this.stationItemPriceId)
},
methods: {
swiperChange(e) {
let {
current,
source
} = e.detail
this.videoContext = uni.createVideoContext('myVideo' + (current - 1));
//只有手动切换时开始轮播，并且上一页视频暂停
if (source === 'touch') {
this.videoContext.pause(); //暂停
this.autoplay = true
}
},
// 获取数据
GetBanner() {},
// 处理banner返回的是是视频还是图片
splits(url) {
if (url.indexOf('.') != -1) {
var ext = url.substring(url.lastIndexOf('.') + 1);
return ['mp4', 'webm', 'mpeg4', 'ogg'].indexOf(ext) != -1
}
},
// 点击开始/继续播放
play() {
this.autoplay = false
// this.videoContext.requestFullScreen()
},
// 视频暂停
pause() {
this.autoplay = true
},
// 视频结束
ended() {
this.autoplay = true
},
//预约
goappointments() {
let that = this
@ -87,7 +149,7 @@
if (res.data.loginFlag) {
that.usershow = false
uni.navigateTo({
url: `/pages/appointmenttime/appointmenttime?stationId=${this.list.stationId}&stationItemId=${this.list.stationItemId}&stationItemPriceId=${this.list.stationItemPriceId}`,
url: `/pages/appointmenttime/appointmenttime?stationId=${this.stationId}&stationItemId=${this.stationItemId}&stationItemPriceId=${this.stationItemPriceId}`,
})
} else {
that.usershow = true
@ -138,12 +200,24 @@
},
// 信息
getlist(stationId, stationItemId, stationItemPriceId) {
this.lbinfo = []
getAppStationItemInfo(stationId, stationItemId, stationItemPriceId).then(res => {
if (res.data.nurseItemContent) {
res.data.nurseItemContent = res.data.nurseItemContent.replace(/\<img/gi,
"<br/> <img class='richPic'")
}
res.data.itemPictureUrl = baseurl + res.data.itemPictureUrl
if (res.data.poserInfoList.length >= 1) {
res.data.poserInfoList.forEach(e => {
e.image = baseurl + e.posterPictureUrl
this.lbinfo.push(e.image)
})
if (res.data.poserInfoList[0].video) {
res.data.poserInfoList[0].video = baseurl + res.data.poserInfoList[0].posterVideoUrl
this.lbinfo.push(res.data.poserInfoList[0].video)
}
} else {
this.lbinfo.push(this.baseurl + res.data.itemPictureUrl)
}
this.list = res.data
})
},

3
pages/ServiceDetails/ServiceDetails.vue
View File

@ -40,7 +40,8 @@
<view class="contacts">·联系人：{{list.patientName}}</view>
<view class="contacts">·电话：{{list.patientPhone}}</view>
<view class="contacts">·地址：{{list.serviceAddress}}</view>
<view class="contacts">·时间：{{list.serviceDate}} {{list.serviceStartTime}}-{{list.serviceEndTime}}</view>
<view class="contacts">·预约时间：{{list.serviceDate}} {{list.serviceStartTime}}</view>
<view class="contacts">·下单时间：{{list.createTime}}</view>
</view>
<view class="Package">套餐信息：
<span>￥{{list.nurseItemPrice}}</span>

111
pages/appointmenttime/appointmenttime.scss
View File

@ -2,7 +2,7 @@
font-size: 34rpx;
padding-top: 10rpx;
height: 100%;
-webkit-overflow-scrolling: touch;
.mask {
.Agreement {
width: 100%;
@ -98,31 +98,66 @@
border-radius: 20rpx;
line-height: 93rpx;
.selecttime {
height: 93rpx;
margin-left: 3%;
position: relative;
text {
font-size: 34rpx;
color: #878987;
}
image {
width: 18rpx;
height: 27rpx;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
.addition {
color: #666666;
line-height: 30rpx;
.timeyear{
.bottomtext{
-webkit-overflow-scrolling: touch;
width: 96%;
margin: 0 auto;
.items{
display: flex;
justify-content:flex-start;
flex-wrap: wrap;
text-align: center;
.timeitem{
width: 21%;
margin: 0 2% 20rpx;
height: 86rpx;
border-radius: 5rpx;
font-size: 28rpx;
line-height: 86rpx;
border: 2rpx solid #DADADA;
}
.timeitemtap{
width: 21%;
margin: 0 2% 20rpx;
height: 86rpx;
border: 2rpx solid #F44B2F;
border-radius: 5rpx;
font-size: 28rpx;
color: #F44B2F;
line-height: 86rpx;
}
}
}
.toptext{
-webkit-overflow-scrolling: touch;
padding-top: 10rpx;
display: flex;
justify-content:space-around;
height: 50rpx;
color: #000000;
line-height: 27rpx;
margin-bottom: 30rpx;
text-align: center;
.Soonerorlater{
width: 200rpx;
font-size: 36rpx;
height: 50rpx;
}
.Soonerorlaterclass{
font-size: 36rpx;
color: #F44B2F;
width: 200rpx;
height: 50rpx;
}
view:nth-child(2){
width: 4rpx;
height: 27rpx;
background: #C5C3C3;
border-radius: 2rpx;
}
}
}
.item {
width: 97%;
@ -139,7 +174,6 @@
.remarks {
width: 94%;
height: 382rpx;
margin: 10rpx auto;
padding: 3%;
font-size: 34rpx;
@ -151,7 +185,13 @@
span {
display: inline-block;
width: 20%;
width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
top:50%;
transform: translateY(-50%);
}
input {
@ -262,10 +302,25 @@
margin-top: 20rpx;
position: relative;
padding-bottom: 40rpx;
::v-deep .u-checkbox__label{
width: 100% !important;
}
.detail {
width: 100%;
line-height: 100rpx;
// padding: 20rpx 0 0 40rpx;
position: relative;
.itemConsumabletitle{
width:55%;
position: absolute;
top:50%;
transform: translateY(-50%);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
font-size: 28rpx;
}
/deep/ .u-checkbox{
margin: 40rpx 0 0;
position: relative;
@ -273,7 +328,7 @@
span{
width: 100%;
display: inline-block;
font-size: 30rpx;
font-size: 28rpx;
color: #D43953;
text-align: right;
position: absolute;
@ -297,6 +352,9 @@
position: relative;
.detail {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 31rpx;
font-size: 32rpx;
color: #666666;
@ -304,6 +362,7 @@
position: absolute;
left: 10%;
top: 60%;
width: 90%;
}
}

136
pages/appointmenttime/appointmenttime.vue
View File

@ -14,24 +14,41 @@
<view class='addition'>{{personInfo.address}}</view>
</view>
<view class="item" style="border: 0;">
<span></span>
<span class='addition'>请您选择希望护理员到达的时间区间</span>
<span>上门时间：</span>
<span class='addition'>请您选择希望护理员到达的时间</span>
</view>
<view class="selecttime" @tap='yearshow=true'>
<span>日期：</span>
<text v-if="yeartime==''" class='addition'>请选择日期
<image src="../../static/jiantou.png"></image>
</text>
<text v-else class='addition'>{{yeartime}}</text>
<tabs :list="orderlist.appointmentTimeList" :current="timecurrent" @change="timechange">
</tabs>
<view class="timeyear">
<view class="toptext">
<view :class="Soonerorlater=='morning'?'Soonerorlaterclass':'Soonerorlater'"
@tap="tapSoonerorlater('morning')">
上午
</view>
<view class="">
</view>
<view :class="Soonerorlater=='after'?'Soonerorlaterclass':'Soonerorlater'"
@tap="tapSoonerorlater('after')">
下午
</view>
</view>
<view class="bottomtext">
<view class="items" v-if="Soonerorlater=='morning'">
<view @tap='taptime(item,index)'
v-for="(item ,index) in orderlist.appointmentTimeList[timecurrent].morningList"
:class="timeindex==index?'timeitemtap':'timeitem'">
{{item}}
</view>
</view>
<view class="items" v-if="Soonerorlater=='after'">
<view @tap='taptime(item,index)'
v-for="(item ,index) in orderlist.appointmentTimeList[timecurrent].afternoonList"
:class="timeindex==index?'timeitemtap':'timeitem'">
{{item}}
</view>
</view>
</view>
</view>
<view class="selecttime" @tap='timeshow=true'>
<span>时间：</span>
<text v-if="usertime==''" class='addition'>请选择时间区间
<image src="../../static/jiantou.png"></image>
</text>
<text v-else class='addition'>{{usertime}}</text>
</view>
</view>
<view class="remarks">
服务时长:
@ -46,11 +63,11 @@
<view class="Consumablespackage">耗材包详情：
<text class="money">￥{{consumableTotalPrice}}</text>
<view class="detail">
<u-checkbox-group @change="checkboxGroupChange" wrap='true'>
<u-checkbox-group @change="checkboxGroupChange" :wrap='true'>
<u-checkbox @change="checkboxChange(item)" v-model="item.radio"
v-for="(item, index) in orderlist.itemConsumableList" :key="index"
:name="item.consumableDetail">
<view style='display: inline-block;'> {{item.consumableDetail}}</view>
<view class='itemConsumabletitle'> {{item.consumableDetail}}</view>
<span>{{item.consumableCount}}{{item.consumableUnit}}/￥{{item.consumablePrice}}</span>
</u-checkbox>
</u-checkbox-group>
@ -75,9 +92,6 @@
<view class="queren" @tap='updata'>确认预约</view>
</view>
<u-toast ref="uToast" />
<u-picker v-model="yearshow" mode="time" start-year='2022' :params="yearparams" @confirm='yeartimeconfirm'>
</u-picker>
<upicker v-model="timeshow" mode="time" :params="timeparams" @confirm='timeconfirm'></upicker>
<!-- //用户协议 -->
<u-mask :show="maskshow" class='mask' @click='maskshow=false'>
<view class="Agreement">
@ -105,37 +119,18 @@
appletAppointmentOrderPay
} from '@/api/appointmenttime/appointmenttime.js'
import baseurl from '@/api/baseurl.js'
import upicker from '../picker/picker.vue'
import appointmenttext from './text.vue'
import tabs from '../utabs/u-tabs.vue'
export default {
components: {
upicker,
appointmenttext
appointmenttext,
tabs
},
data() {
return {
Soonerorlater: 'morning',
timecurrent: 0, //时间下标
openid: '',
timeparams: { //picker组件所需
year: false,
month: false,
day: false,
hour: true,
endhour: true,
minute: true,
endminute: true,
},
timeshow: false, //时间开关
usertime: '', //页面展示时间
yearparams: { //picker组件所需
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
yearshow: false, //时间开关
yeartime: '', //页面展示时间
maskshow: false, //用户协议开关
radio: 1, //用户协议
personInfo: {}, //用户信息
@ -150,7 +145,7 @@
stationItemPriceId: '',
serviceAddress: "",
serviceDate: "",
serviceStartTime: "",
serviceStartTime: null,
serviceEndTime: "",
nurseItemName: "",
nurseItemPrice: '',
@ -161,6 +156,7 @@
orderConsumableList: [],
orderChannel: '',
},
timeindex: 0,
}
},
onShow() {
@ -188,9 +184,24 @@
} catch (e) {}
//耗材包详情方法调用
this.getPatientInfo(options.stationId, options.stationItemId, options.stationItemPriceId)
that.userinfo();
this.userinfo();
},
methods: {
//切换上下午
tapSoonerorlater(item) {
this.Soonerorlater = item
this.timeindex = 0
if (item == 'morning') {
this.orderlist.serviceStartTime = this.orderlist.appointmentTimeList[this.timecurrent].morningList[0]
} else if (item == 'after') {
this.orderlist.serviceStartTime = this.orderlist.appointmentTimeList[this.timecurrent].afternoonList[0]
}
},
//选择时间
taptime(item, index) {
this.orderlist.serviceStartTime = item
this.timeindex = index
},
userinfo() {
//取出patientId
var that = this
@ -202,12 +213,14 @@
getAppPatientList(that.patientId).then(response => {
that.personInfo = response.data
that.personInfo.address = response.data.areaName + response.data.address
that.orderlist.patientId = response.data.patientId
that.orderlist.serviceAddress = response.data.areaName + response.data.address
})
}
} catch (e) {}
},
timechange(index) {
this.orderlist.serviceDate = this.orderlist.appointmentTimeList[index].date
this.timecurrent = index
},
//获取耗材包详情
getPatientInfo(stationId, stationItemId, stationItemPriceId) {
getAppStationItemInfo(stationId, stationItemId, stationItemPriceId).then(res => {
@ -218,7 +231,13 @@
e.radio = true
})
}
res.data.appointmentTimeList.forEach(e => {
e.dates = e.date.slice(5, 10)
e.name = e.week
})
this.orderlist = res.data
this.orderlist.serviceStartTime = res.data.appointmentTimeList[0].morningList[0]
this.orderlist.serviceDate = res.data.appointmentTimeList[0].date
this.consumableTotalPrice = res.data.consumableTotalPrice
}
})
@ -226,6 +245,7 @@
//确认预约
updata() {
var that = this
console.log(this.orderlist)
this.orderlist.consumableTotalPrice = null
this.orderlist.orderChannel = 'WECHAT_APPLET'
if (this.radio == 1) {
@ -243,6 +263,12 @@
}
})
}
this.orderlist.afternoonOpenEndTime = this.orderlist.afternoonOpenEndTime.slice(0, 5)
this.orderlist.afternoonOpenStartTime = this.orderlist.afternoonOpenStartTime.slice(0, 5)
this.orderlist.morningOpenEndTime = this.orderlist.morningOpenEndTime.slice(0, 5)
this.orderlist.morningOpenStartTime = this.orderlist.morningOpenStartTime.slice(0, 5)
this.orderlist.patientId = this.patientId
this.orderlist.serviceAddress = this.personInfo.areaName + this.personInfo.address
submitAppointment(this.orderlist).then(res => {
if (res.code == 500) {
that.$refs.uToast.show({
@ -376,18 +402,6 @@
},
// 选中任一checkbox时，由checkbox-group触发
checkboxGroupChange(e) {},
//获取时间
timeconfirm(e) {
this.orderlist.serviceStartTime = e.hour + ":" + e.minute
this.usertime = e.hour + ":" + e.minute + '--' + e.endhour + ":" + e.endminute
this.orderlist.serviceEndTime = e.endhour + ":" + e.endminute
this.orderlist.patientId = this.personInfo.patientId
this.orderlist.serviceAddress = this.personInfo.address
},
yeartimeconfirm(e) {
this.orderlist.serviceDate = e.year + '-' + e.month + '-' + e.day
this.yeartime = e.year + '年' + e.month + '月' + e.day + "日"
},
goaddress() {
uni.navigateTo({
url: `/pages/modifyAddress/modifyAddress?updata=${JSON.stringify(this.orderlist)}`

379
pages/classification/classification.vue
View File

@ -1,10 +1,52 @@
<template>
<view class="app">
<view class="inputs">
<i class="icon"></i>
<input v-model="goodsName" type="text" name="" id="" class="input" placeholder="请输入商品名称">
<view class="apps">
<view class="" style="background-color: #fff;position: fixed;width: 100%;height: 85rpx;">
<view class="inputs">
<i class="icon"></i>
<input v-model="goodsName" type="text" name="" id="" class="input" placeholder="请输入商品名称">
</view>
</view>
<view class="lefttabbar">
<view class="tabbar">
<view class="lefttabbar">
<view class="lefttabbarlist">
<view class="item" v-for="(item,index) in GoodsCategorychildrenlist" :key='item.id'
@tap='tapscroll(item,index)'>
<view :class="tabIndex==index?'actives':'active'">
{{item.goodsCategoryName}}
</view>
</view>
</view>
</view>
<view class="righttabbar">
<view class="productlist" v-if='goodsList.length>0' @touchstart="start" @touchend="end"
@touchmove="move">
<view class="item" @tap='goCommodityDetails(item)' v-for="(item,index) in goodsList" :key="index">
<image :src="baseurl+item.goodsPictureUrl" mode=""></image>
<view class="title">
{{item.goodsName}}
</view>
<view class="text">
{{item.attributeDetailsName}}
</view>
<view class="price">
￥{{item.goodsPrice}}
</view>
</view>
<view style="width: 45%;" v-if="goodsList.length%2!=0">
</view>
<view v-if="goodsList.length <total">
用力上滑加载更多
</view>
</view>
<view class="noorder" v-if='goodsList.length==0'>
<image src="../../static/noorder.png" mode=""></image>
<view class="">
暂无商品
</view>
</view>
</view>
</view>
<!-- <view class="lefttabbar">
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
@scrolltolower="lower" @scroll="scroll">
<view class="scroll-view-item" v-for="(item,index) in GoodsCategorychildrenlist" :key='item.id'
@ -14,32 +56,7 @@
</view>
</view>
</scroll-view>
</view>
<view class="" style="display: inline-block;width: 80%;position: absolute;right: 0%;">
<view class="productlist" v-if='goodsList.length>0'>
<view class="item" @tap='goCommodityDetails(item)' v-for="(item,index) in goodsList" :key="index">
<image :src="baseurl+item.goodsPictureUrl" mode=""></image>
<view class="title">
{{item.goodsName}}
</view>
<view class="text">
{{item.attributeDetailsName}}
</view>
<view class="price">
￥{{item.goodsPrice}}
</view>
</view>
<view style="width: 45%;" v-if="goodsList.length%2!=0">
</view>
</view>
<view class="noorder" v-if='goodsList.length==0'>
<image src="../../static/noorder.png" mode=""></image>
<view class="">
暂无商品
</view>
</view>
</view>
<u-back-top :scroll-top="scrollTop2"></u-back-top>
</view> -->
</view>
</template>
@ -64,10 +81,15 @@
GoodsCategorychildrenlist: [], //子分类list
GoodsCategorychildrenid: null,
scrollTop: 0,
scrollTop2: 0,
old: {
scrollTop: 0
}
},
startData: {
clientX: '',
clientY: '',
},
moveX: 0,
touch: {},
};
},
watch: { //监听
@ -103,8 +125,32 @@
this.GoodsCategorychildren(this.goodsCategoryId);
},
methods: {
onPageScroll(e) {
this.scrollTop2 = e.scrollTop;
// 触摸touch事件
start(e) { //@touchstart 触摸开始
console.log(e)
this.startData.pageY = e.changedTouches[0].pageY; //手指按下时的Y坐标
},
end(e) { //@touchend触摸结束
console.log(this.startData.pageY - this.touch.pageY)
if ((this.startData.pageY - this.touch.pageY) > 200) { //在事件结束时，判断滑动的距离是否达到出发需要执行事件的要求
if (this.goodsList.length >= this.total) {} else {
this.pageNum++;
goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(res => {
if (res.code == 200) {
res.rows.forEach(e => {
this.goodsList.push(e)
})
}
})
}
} else {
// this.touch = {};
}
},
move(event) { //@touchmove触摸移动
console.log(event, 2)
let touch = event.touches[0]; //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
this.touch = touch;
},
tapscroll(item, index) {
this.tabIndex = index
@ -171,28 +217,28 @@
})
},
},
onReachBottom() { //下滑加载
if (this.goodsList.length >= this.total) {} else {
this.pageNum++;
goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(res => {
if (res.code == 200) {
res.rows.forEach(e => {
this.goodsList.push(e)
})
}
})
}
},
onPullDownRefresh() { //下拉刷新
this.pageNum = 1;
goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(res => {
this.goodsList = res.rows
this.total = res.total
})
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
// onReachBottom() { //下滑加载
// if (this.goodsList.length >= this.total) {} else {
// this.pageNum++;
// goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(res => {
// if (res.code == 200) {
// res.rows.forEach(e => {
// this.goodsList.push(e)
// })
// }
// })
// }
// },
// onPullDownRefresh() { //下拉刷新
// this.pageNum = 1;
// goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(res => {
// this.goodsList = res.rows
// this.total = res.total
// })
// setTimeout(function() {
// uni.stopPullDownRefresh();
// }, 1000);
// },
//1.分享给朋友
onShareAppMessage(res) {
let pages = getCurrentPages();
@ -217,13 +263,12 @@
</script>
<style lang="scss">
.app {
padding: 0;
.apps {
width: 100%;
height: 100%;
background-color: #F4F5F7;
color: #000000;
.inputs {
position: fixed;
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
border: 1px solid #f0f0f0;
width: 90%;
@ -231,7 +276,7 @@
margin: 10rpx 0 10rpx 50%;
transform: translateX(-50%);
border-radius: 20rpx;
background-color: #Ffffff;
background-color: #f0f0f0;
z-index: 999;
.input {
@ -256,43 +301,130 @@
}
}
.lefttabbar {
position: fixed;
width: 20%;
display: inline-block;
height: 100%;
top: 100rpx;
.scroll-Y {
height: 100%;
}
.actives {
color: red;
font-size: 34rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.active {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.scroll-view-item {
color: #7d7e80;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 30rpx;
padding: 0 10rpx;
}
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
.tabbar {
display: flex;
padding-top: 100rpx;
height: 100vh;
width: 100%;
.righttabbar {
width: 70%;
// display: inline-block;
// height: calc(100vh - 85rpx);
height: 100%;
.productlist {
padding-bottom: 40rpx;
overflow: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 15rpx;
border-radius: 25rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
background-color: #ffffff;
.item {
width: 45%;
background: #FFFFFF;
border-radius: 25rpx;
padding-bottom: 10rpx;
box-shadow: 0px 4rpx 8rpx 4rpx rgba(199, 200, 202, 0.8);
margin-bottom: 30rpx;
height: 450rpx;
.price {
font-size: 28rpx;
color: #D43953;
line-height: 50rpx;
padding-left: 10rpx;
}
.text {
font-size: 22rpx;
padding: 0 10rpx;
// text-overflow: ellipsis;
// overflow: hidden;
// white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.title {
font-size: 28rpx;
color: #000000;
line-height: 50rpx;
padding-left: 10rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
image {
border-radius: 25rpx 25rpx 0 0;
width: 100%;
height: 270rpx;
}
}
}
}
.lefttabbar {
width: 30%;
// display: inline-block;
height: 100%;
padding-top: 20rpx;
.lefttabbarlist {
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
}
.actives {
color: red;
font-size: 34rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: #ffffff;
// border-radius: 25rpx 0 0 25rpx;
}
.active {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item {
color: #000000;
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 30rpx;
width: 100%;
}
}
}
.noorder {
view {
text-align: center;
@ -307,58 +439,5 @@
height: 200rpx;
}
}
.productlist {
width: 100%;
margin: 120rpx auto 0;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
.item {
width: 45%;
background: #FFFFFF;
border-radius: 25rpx;
padding-bottom: 10rpx;
box-shadow: 0px 4rpx 8rpx 4rpx rgba(199, 200, 202, 0.8);
margin-bottom: 30rpx;
.price {
font-size: 28rpx;
color: #D43953;
line-height: 50rpx;
padding-left: 10rpx;
}
.text {
font-size: 22rpx;
padding: 0 10rpx;
// text-overflow: ellipsis;
// overflow: hidden;
// white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.title {
font-size: 28rpx;
color: #000000;
line-height: 50rpx;
padding-left: 10rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
image {
border-radius: 25rpx 25rpx 0 0;
width: 100%;
height: 270rpx;
}
}
}
}
</style>

67
pages/customerservice/customerservice.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<view class="app">
<view class="title">
长按识别二维码
</view>
<image src="../../static/kefuzx.jpg" mode="" :show-menu-by-longpress="true"></image>
</view>
</template>
<script>
export default {
data() {
return {
imageUrl: [
'../../static/kefuzx.jpg'
]
};
},
methods: {
previewImage(e) {
uni.previewImage({
// 需要预览的图片链接列表。若无需预览，可以注释urls
urls: this.imageUrl,
// 为当前显示图片的链接/索引值
current: 0,
// 图片指示器样式
indicator: 'default',
// 是否可循环预览
loop: false,
// 长按图片显示操作菜单，如不填默认为保存相册
// longPressActions:{
// itemList:[this.l('发送给朋友'),this.l]
// },
success: res => {
console.log('previewImage res', res);
},
fail: err => {
console.log('previewImage err', err);
}
});
},
}
}
</script>
<style lang="scss">
.app {
width: 100%;
height: 100vh;
padding: 0;
background-color: #000000;
position: relative;
.title {
color: #fff;
width: 100%;
text-align: center;
position: absolute;
top: 50rpx;
}
image {
width: 100%;
height: 1300rpx;
}
}
</style>

129
pages/detail/detail.vue
View File

@ -1,129 +0,0 @@
<template>
<view class="app">
<view class="concent">
<view class="background">
<image src="/static/logo.png" mode=""></image>
<view>
<view class="detailed">
<view>护理站是以维护社区人群健康、满足社区 人群基本医疗护理需求为宗旨，以护士为核心 的各类护理人员组成的团队，在一定社区范围 内，为长期卧床老人、患者、残疾人、临终患
者和其他需要护理服务者提供基础护理、专科 护理、临终护理、消毒隔离技术指导、营养指导、社区康复指导、健康宣教和其他护理服务 的医疗机构。</view>
<view>护理站以遵医嘱的上门护理服务为主，包括生活护理和医疗护理，详情如下：</view>
</view>
</view>
</view>
</view>
<view class="concenta">
<view class="life">生活护理 </view>
<image src="/static/lifeserve.png" mode=""></image>
</view>
<view class="concentb">
<view class="life">医疗护理 </view>
<image src="/static/yiliaohuli.png" mode=""></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {},
//1.分享给朋友
onShareAppMessage(res) {
let pages = getCurrentPages();
let url = pages[pages.length - 1].$page.fullPath
return {
title: '泉医到家',
path: url,
}
},
//2.分享到朋友圈
onShareTimeline(res) {
let pages = getCurrentPages();
let url = pages[pages.length - 1].$page.fullPath
return {
title: '泉医到家',
path: url,
}
},
}
</script>
<style lang="scss">
.app {
padding-top: 10rpx;
.concent {
width: 98%;
height: 811rpx;
background: #4C7BC9;
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
border-radius: 20rpx;
margin: 10rpx auto 10rpx;
.background {
position: relative;
width: 657rpx;
height: 727rpx;
background: #FFFFFF;
border-radius: 25rpx;
background-color: white;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
image {
width: 178rpx;
height: 84rpx;
background: #FFFFFF;
border-radius: 25px;
margin-left: 68%;
margin-top: 5%;
}
}
}
}
.concenta,
.concentb {
margin: 0 auto 10rpx;
width: 98%;
height: 900rpx;
padding-bottom: 40rpx;
border-radius: 25rpx;
.life {
padding: 15rpx 0;
font-size: 38rpx;
text-align: center;
color: #ffffff;
}
image {
margin: 0 auto;
width: 89%;
display: block;
height: 91%;
// margin-left: 3%;
}
}
.concenta {
background: #E1AE3C;
}
.concentb {
background: #00C176;
}
.detailed {
width: 657rpx;
padding: 0 42rpx;
line-height: 56rpx;
}
.detailed view {
text-indent: 2em;
}
</style>

10
pages/diseasemanagement/diseasemanagement.vue
View File

@ -49,7 +49,7 @@
.concent {
width: 701rpx;
height: 850rpx;
height: 900rpx;
background: #4C7BC9;
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
border-radius: 20rpx;
@ -58,7 +58,7 @@
.background {
position: relative;
width: 657rpx;
height: 800rpx;
height: 850rpx;
background: #FFFFFF;
border-radius: 25rpx;
background-color: white;
@ -68,11 +68,11 @@
image {
width: 178rpx;
height: 84rpx;
height: 160rpx;
background: #FFFFFF;
border-radius: 25px;
margin-left: 68%;
margin-top: 5%;
margin-top: 0;
}
}
}
@ -80,7 +80,7 @@
.detailed {
width: 657rpx;
padding: 0 42rpx;
padding: 0 20rpx;
line-height: 56rpx;
}

445
pages/homepage/homepage.vue
View File

@ -1,40 +1,81 @@
<template>
<view class="app">
<view class="cards">
<view class="nursing item" @tap="gosite">
<image src="../../static/jjhl.png" mode=""></image>
<!-- <u-swiper :list="swiperImgUrls" effect3d='true' height='400' interval='5000' duration='2000'></u-swiper> -->
<!-- <swiper class="swiper-block" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
:circular='true' previous-margin='90rpx' next-margin='90rpx' current='0' @change="swiperChange">
<swiper-item class="swiper-item" v-for="(item,index) in swiperImgUrls">
<image :src="item" :class="['slide-image', currentIndex === index?'active':'']" mode="aspectFill">
</image>
</swiper-item>
</swiper> -->
<view class="container">
<view>
<swiper :indicator-dots="true" :current="currentIndex" :circular="true" previous-margin="80rpx"
next-margin="80rpx" :autoplay="autoplay" interval="3000" duration="1000" show-center-play-btn="true"
class="swiper-block" circular='true' @change="swiperChange">
<swiper-item v-for="(item ,index) in swiperImgUrls" :key="index" class="swiper-item">
<view v-show="!splits(item)" wx-if="{item}">
<image v-if="item" :src="item" :class="['slide-image', currentIndex === index?'active':'']"
mode="aspectFill">
</image>
</view>
<view v-show="splits(item)" v-if="item">
<video :id="'myVideo'+index" :autoplay="false" :src="item" controls show-fullscreen-btn
object-fit="fill" @play="play" @pause="pause" @ended="ended" auto-pause-if-navigate
show-play-btn :enable-progress-gesture='true' :show-center-play-btn='true'
enable-play-gesture auto-pause-if-open-native show-mute-btn :poster='poster'
:class="['slide-image', currentIndex === index?'active':'']"></video>
</view>
</swiper-item>
</swiper>
</view>
</view>
<view class="items">
<view class="item" @tap="gosite">
<image src="../../static/hlz.png" mode=""></image>
<view class="title">
护理站
护理机构
</view>
</view>
<view class="expert item" @tap='gomedicine'>
<image src="../../static/zhuanjia.png" mode=""></image>
<view class="item" @tap="gomedicine">
<image src="../../static/jkzx.png" mode=""></image>
<view class="title">
就医
健康咨询
</view>
</view>
<view class="item knowledge" @tap='godiseasemanagement'>
<image src="../../static/zs.png" mode=""></image>
<view class="item" @tap='godiseasemanagement'>
<image src="../../static/zbgl.png" mode=""></image>
<view class="title">
专病管理
</view>
</view>
<view class="item Bodyguard" @tap='goBodysatelliteintegration'>
<image src="../../static/pb.png" mode=""></image>
<view class="title">
体卫融合
</view>
</view>
<view class="Welfarecustomerservice">
<image src="../../static/fuli.png" mode="" @tap='gomaterialbenefits'></image>
<image src="../../static/kefu.png" mode="" @tap='gocustomerservice'></image>
</view>
<view class="Healthknowledge">
<view class="title">
健康常识
</view>
<view class="elderly item" @tap='goGeriatricdisease'>
<image src="../../static/ylfw.png" mode=""></image>
<view class="title" style="font-size: 40rpx;">
国家老年病中心
</view>
</view>
<view class='item shopping' @tap="goshopping">
<image src="../../static/shopping.png" mode=""></image>
<view class="more" @tap='gohealth'>
<view class="title">
商城
查看更多
</view>
<image src="../../static/huijiantou.png" mode=""></image>
</view>
<view class="list">
<view class="item" v-for="(item,index) in informationCategoryVOList" :key="index"
@tap='gohealthitem(item)'>
<view class="text">
{{item.informationTitle}}
</view>
<view class="author"></view>
<image :src="item.leadThumbnailUrl" mode=""></image>
</view>
</view>
</view>
@ -43,10 +84,164 @@
</template>
<script>
import {
getPoserInfoListByType
} from '@/api/homepage/index.js'
import {
getHeathHousingList
} from '@/api/Healthknowledge/index.js'
import baseurl from '../../api/baseurl';
export default {
data() {
return {};
return {
swiperImgUrls: [],
autoplay: true, //自动切换轮播图
videoContext: '',
currentIndex: 0,
informationCategoryVOList: [], //咨询信息
informationCategorytotal: 0,
pageNum: 1,
pageSize: 5,
poster: '' //视频封面
};
},
onShow() {
this.pageNum = 1
this.swiperImgUrls = []
this.getPoserInfo();
},
methods: {
swiperChange(e) {
this.currentIndex = event.detail.current
let {
current,
source
} = e.detail
this.videoContext = uni.createVideoContext('myVideo' + (current - 1));
//只有手动切换时开始轮播，并且上一页视频暂停
if (source === 'touch') {
this.videoContext.pause(); //暂停
this.autoplay = true
}
},
// 获取数据
GetBanner() {},
// 处理banner返回的是是视频还是图片
splits(url) {
if (url.indexOf('.') != -1) {
var ext = url.substring(url.lastIndexOf('.') + 1);
return ['mp4', 'webm', 'mpeg4', 'ogg'].indexOf(ext) != -1
}
},
// 点击开始/继续播放
play() {
this.autoplay = false
// this.videoContext.requestFullScreen()
},
// 视频暂停
pause() {
this.autoplay = true
},
// 视频结束
ended() {
this.autoplay = true
},
//跳转健康咨询item
gohealthitem(item) {
uni.navigateTo({
url: `/pages/Healthitem/Healthitem?item=${encodeURIComponent(JSON.stringify(item))}`
})
},
//健康咨询
getHeathHousing() {
getHeathHousingList(this.pageNum, this.pageSize).then(res => {
if (res.rows) {
res.rows.forEach(e => {
e.leadThumbnailUrl = baseurl + e.leadThumbnailUrl
})
}
this.informationCategoryVOList = res.rows
this.informationCategorytotal = res.total
})
},
//海报
getPoserInfo() {
getPoserInfoListByType().then(res => {
if (res.code == 200) {
if (res.data.poserInfoList) {
res.data.poserInfoList.forEach(e => {
e.image = baseurl + e.posterPictureUrl
this.swiperImgUrls.push(e.image)
})
if(res.data.poserInfoList[0].video){
res.data.poserInfoList[0].video = baseurl + res.data.poserInfoList[0].posterVideoUrl
this.swiperImgUrls.push(res.data.poserInfoList[0].video)
}
}
this.getHeathHousing();
}
})
},
swiperChange(event) {
this.currentIndex = event.detail.current
},
//专病管理
godiseasemanagement() {
uni.navigateTo({
url: '/pages/diseasemanagement/diseasemanagement'
})
},
//健康咨询
gomedicine() {
uni.navigateTo({
url: '/pages/medicine/medicine'
})
},
//跳转客服
gocustomerservice() {
uni.navigateTo({
url: '/pages/customerservice/customerservice'
})
},
//跳转护理站页面
gosite() {
uni.navigateTo({
url: '/pages/site/site'
})
},
//健康常识
gohealth() {
uni.navigateTo({
url: '/pages/Healthknowledge/Healthknowledge'
})
},
//新人福利
gomaterialbenefits() {
uni.navigateTo({
url: '/pages/materialbenefits/materialbenefits'
})
},
},
// onReachBottom() { //下滑加载
// if (this.informationCategoryVOList.length >= this.informationCategorytotal) {} else {
// this.pageNum++
// getHeathHousingList(this.pageNum, this.pageSize).then(res => {
// if (res.rows) {
// res.rows.forEach(e => {
// e.leadThumbnailUrl = baseurl + e.leadThumbnailUrl
// this.informationCategoryVOList.push(e)
// })
// }
// })
// }
// },
// onPullDownRefresh() { //下拉刷新
// this.pageNum = 1;
// this.getHeathHousing();
// setTimeout(function() {
// uni.stopPullDownRefresh();
// }, 1000);
// },
//1.分享给朋友
onShareAppMessage(res) {
let pages = getCurrentPages();
@ -65,74 +260,170 @@
path: url,
}
},
methods: {
//专病管理
godiseasemanagement() {
uni.navigateTo({
url: '/pages/diseasemanagement/diseasemanagement'
})
},
//老年病中心
goGeriatricdisease() {
uni.navigateTo({
url: '/pages/Geriatricdisease/Geriatricdisease'
})
},
//体卫融合
goBodysatelliteintegration() {
uni.navigateTo({
url: "/pages/Bodysatelliteintegration/Bodysatelliteintegration"
})
},
//跳转护理站页面
gosite() {
uni.navigateTo({
url: '/pages/site/site'
})
},
//跳转商城页面
goshopping() {
uni.navigateTo({
url: '/pages/shopping/shopping'
})
},
//跳转就医页面
gomedicine() {
uni.navigateTo({
url: '/pages/medicine/medicine'
})
},
}
}
</script>
<style lang="scss">
.app {
.cards {
padding: 22px 0 20px 0;
padding: 100rpx 0 0 0;
-webkit-overflow-scrolling: touch;
.swiper-block {
height: 500rpx;
width: 100%;
}
.shopping {
background: #F58540;
.swiper-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow: unset;
}
.slide-image {
height: 300rpx;
width: 520rpx;
border-radius: 9rpx;
box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
margin: 0rpx 30rpx;
z-index: 1;
}
.active {
transform: scale(1.2);
transition: all 0.2s ease-in 0s;
z-index: 20;
}
video {
// height: 100%;
// width: 100%;
}
.Healthknowledge {
width: 100%;
padding: 40rpx 50rpx 50rpx;
background-color: #fff;
position: relative;
line-height: 46rpx;
.more {
position: absolute;
right: 20rpx;
top: 40rpx;
height: 46rpx;
width: 30%;
.title {
position: absolute;
right: 30rpx;
top: 50%;
text-align: right;
transform: translateY(-50%);
font-size: 26rpx;
font-family: Adobe Heiti Std;
font-weight: normal;
color: #969494;
}
image {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 15rpx;
height: 25rpx;
}
}
.Bodyguard {
background-color: #00C176;
.list {
width: 100%;
margin: 20rpx auto 0;
.item {
width: 100%;
height: 250rpx;
position: relative;
border-bottom: 2rpx solid #CDC9C9;
image {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
}
.author {
position: absolute;
bottom: 20rpx;
left: 0;
font-size: 20rpx;
color: #969494;
}
.text {
position: absolute;
top: 20rpx;
left: 0;
width: 50%;
font-size: 30rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.knowledge {
background: #9E4DD0;
.title {
font-size: 38rpx;
font-weight: bold;
}
}
.Welfarecustomerservice {
display: flex;
justify-content: center;
background-color: #fff;
width: 100%;
padding: 30rpx 0;
margin-bottom: 20rpx;
image:nth-child(1) {
margin: 0 5rpx 0 0;
}
.elderly {
background-color: #E1AE3C;
image:nth-child(2) {
margin: 0 0 0 5rpx;
}
.expert {
background-color: #D43953;
image {
width: 350rpx;
height: 200rpx;
}
}
.nursing {
background: #4C7BC9;
.items {
background-color: #fff;
padding: 30rpx 80rpx 20px;
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
.item {
image {
width: 150rpx;
height: 150rpx;
display: block;
margin: 0 auto 20rpx;
}
.title {
font-size: 40rpx;
font-weight: 550;
text-align: center;
}
}
}
}

3
pages/login/login.scss
View File

@ -3,6 +3,7 @@
color: #C3C1C1;
font-weight: 400;
height:100vh;
background-color: #ffffff;
.title{
position: absolute;
top:20%;
@ -17,7 +18,7 @@
}
image{
width: 200rpx;
height: 100rpx;
height: 200rpx;
}
}

25
pages/Bodysatelliteintegration/Bodysatelliteintegration.vue → pages/materialbenefits/materialbenefits.vue
View File

@ -3,12 +3,8 @@
<view class="concent">
<view class="background">
<image src="/static/logo.png" mode=""></image>
<view>
<view class="detailed">
<view>
“体卫融合”是推进我国全民健身与全民健康深度融合的重要途径，在发挥全民健身提高人民身体素质和健康水平、促进人的全面发展方面具有不可替代作用。“体卫融合”可引导广大居民践行“掌握一项体育技能、享受一生健康生活”的健康活动方式，树立“健康在我、预防为先、科学健身、贵在坚持”等生活理念，使全面健康新理念深入人心。
</view>
</view>
<view class="detailed">
敬请期待
</view>
</view>
</view>
@ -46,10 +42,11 @@
<style lang="scss">
.app {
padding-top: 10rpx;
font-size: 34rpx;
.concent {
width: 701rpx;
height: 850rpx;
height: 440rpx;
background: #4C7BC9;
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
border-radius: 20rpx;
@ -58,7 +55,7 @@
.background {
position: relative;
width: 657rpx;
height: 800rpx;
height: 400rpx;
background: #FFFFFF;
border-radius: 25rpx;
background-color: white;
@ -68,23 +65,19 @@
image {
width: 178rpx;
height: 84rpx;
height: 160rpx;
background: #FFFFFF;
border-radius: 25px;
margin-left: 68%;
margin-top: 5%;
margin-top: 0;
}
}
}
}
.detailed {
width: 657rpx;
padding: 0 42rpx;
padding: 0 20rpx;
line-height: 56rpx;
}
.detailed view {
text-indent: 2em;
text-align: center;
}
</style>

21
pages/medicine/medicine.vue
View File

@ -1,23 +1,5 @@
<template>
<view class="app">
<!-- <view class="cards">
<view class="item" style="background: #4C7BC9;" @tap='godoctorslist'>
<image src="../../static/yuyue.png" mode=""></image>
<view class="title" style="font-size: 42rpx;">
预约医生
</view>
</view>
<view class="item" style="background-color: #E1AE3C;">
<image src="../../static/chaxun.png" mode=""></image>
<view class="title" style="font-size: 42rpx;">
查看结果
</view>
</view>
</view> -->
<view class="concent">
<view class="background">
<image src="/static/logo.png" mode=""></image>
@ -102,11 +84,10 @@
image {
width: 178rpx;
height: 84rpx;
height: 160rpx;
background: #FFFFFF;
border-radius: 25px;
margin-left: 68%;
margin-top: 5%;
}
}
}

3
pages/menttimeorder/menttimeorder.vue
View File

@ -40,7 +40,8 @@
<view class="contacts">·联系人：{{list.patientName}}</view>
<view class="contacts">·电话:{{list.patientPhone}}</view>
<view class="contacts">·地址：{{list.serviceAddress}}</view>
<view class="contacts">·时间：{{list.serviceDate}} {{list.serviceStartTime}}-{{list.serviceEndTime}}</view>
<view class="contacts">·预约时间：{{list.serviceDate}} {{list.serviceStartTime}}</view>
<view class="contacts">·下单时间：{{list.createTime}}</view>
</view>
<view class="Package">套餐信息：
<span>￥{{list.nurseItemPrice}}</span>

246
pages/nursestation/nursestation.scss
View File

@ -1,6 +1,25 @@
.app{
padding:10rpx 0 0 0;
-webkit-overflow-scrolling: touch;
}
.swiper-box {
width: 100%;
height: 500rpx;
}
.swiper-item {
height: 500rpx;
text-align: center;
image{
width: 100%;
height: 500rpx !important;
}
}
video{
height: 100%;
width: 100%;
}
.mask {
.information {
width: 70%;
@ -48,11 +67,16 @@
}
.content {
font-size: 36rpx;
font-size: 34rpx;
padding-bottom: 10rpx;
// margin-top: -80rpx;
z-index: 999;
::v-deep .u-tabs{
padding-bottom: 10rpx;
border-radius: 20rpx;
}
.tive {
width: 94%;
background-color: #ffffff;
margin: 20rpx auto;
border-radius: 11rpx;
padding-bottom: 60rpx;
@ -74,74 +98,92 @@
width: 100%;
height: 100%;
position: relative;
padding: 30rpx 30rpx;
background-color: #fff;
padding: 30rpx 0;
margin: 10rpx auto;
border-radius: 20rpx;
color: #000000;
image {
width: 170rpx;
height: 170rpx;
margin-left: 3%;
}
.servicetime {
color: #999999;
line-height: 37rpx;
font-size: 30rpx;
position: absolute;
top:35%;
left:35%;
}
// .servicetime {
// color: #999999;
// line-height: 37rpx;
// font-size: 30rpx;
// position: absolute;
// top:35%;
// left:35%;
// }
.appointment {
font-size: 30rpx;
width: 120rpx;
height: 70rpx;
background: #4C7BC9;
height: 52rpx;
border-radius: 26rpx;
color: #ffffff;
background: #F44B2F;
text-align: center;
line-height: 70rpx;
line-height: 52rpx;
position: absolute;
top:40%;
top:70%;
right:5%;
}
.buy{
position: absolute;
top: 55%;
}
.price {
color: red;
font-size: 32rpx;
height: 52rpx;
color: #F44B2F;
line-height: 52rpx;
font-size: 36rpx;
position: absolute;
top:65%;
top:70%;
left:35%;
}
.product {
color: #000000;
width: 60%;
position: absolute;
top:14%;
left:32%;
font-size: 28rpx;
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.huanyao {
color: #000000;
position: absolute;
top:10%;
top:15%;
left:35%;
width: 60%;
width: 65%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.day{
font-size: 24rpx;
position: absolute;
top:53%;
left:35%;
width: 65%;
}
.huanyao {
position: absolute;
top:10%;
left:35%;
width: 45%;
line-height: 50rpx;
height: 100rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
white-space:normal;
word-break:break-all;
}
.pingfen {
float: right;
}
}
.tab-box {
display: flex;
font-weight: 600;
.tab-item {
flex-shrink: 0;
padding: 3%;
position: relative;
transition: all 0.2s linear;
font-size: 31rpx;
font-size: 36rpx;
&::after {
transition: all 0.2s linear;
transform: translateX(-50%) scaleX(0);
@ -150,10 +192,10 @@
position: absolute;
left: 50%;
bottom: 10rpx;
border-bottom: 6rpx solid #D43953;
border-radius: 4rpx;
}
&.active {
color: #2979ff;
&::after {
content: '';
width: 50%;
@ -161,36 +203,25 @@
left: 50%;
transform: translateX(-50%) scaleX(1);
bottom: 10rpx;
border-bottom: 6rpx solid red;
}
}
}
}
}
.Nursestationconfiguration {
width: 94%;
height: 100%;
background: #FFFFFF;
border-radius: 20rpx;
padding-bottom: 30rpx;
margin: 20rpx auto;
.configuration {
font-size: 31rpx;
color: #333333;
padding: 3%;
margin:20rpx 30rpx 0;
padding-bottom: 30rpx;
border-bottom: 1rpx solid #CDC9C9;
.text {
margin-top: 10rpx;
background: #F8D7D1;
border-radius: 15rpx;
display: inline-block;
padding: 10rpx 20rpx;
margin-right: 18rpx;
line-height: 40rpx;
background-color: #f6f6f6;
border-radius: 34rpx;
margin-right: 10rpx;
font-size: 24rpx;
color: #666666;
color: #F44B2F;
}
}
}
.detail {
position: relative;
width: 94%;
@ -228,76 +259,65 @@
background-color: #ffffff;
border-radius: 20rpx;
margin: 10px auto;
padding-bottom: 20rpx;
.picture {
position: absolute;
width: 170rpx;
height: 170rpx;
margin-left: 5%;
margin-top: 5%;
padding-bottom: 30rpx;
.time{
font-size: 30rpx;
margin: 10rpx 0;
color: #666666;
.timeday{
display: inline-block;
}
.text{
margin:0 10rpx 0 30rpx;
display: inline-block;
}
.texttime{
margin:0 20rpx 0 30rpx;
view{
display: inline-block;
margin-right: 20rpx;
}
}
}
.title {
margin-left: 35%;
line-height: 49px;
font-size: 33rpx;
padding-top: 40rpx;
margin:0 0 0 30rpx;
font-size: 40rpx;
line-height: 59rpx;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.call {
// display: flex;
.Navigation {
width: 103rpx;
height: 48rpx;
background: #00C176;
border-radius: 24px;
font-size: 21rpx;
color: #ffffff;
line-height: 48rpx;
margin-left: 5%;
text-align: center;
margin-top: 3%;
image {
width: 24rpx;
height: 24rpx;
}
}
.callme {
width: 150rpx;
height: 48rpx;
background: #D43953;
border-radius: 24px;
font-size: 21rpx;
color: #ffffff;
line-height: 48rpx;
margin-left: 35%;
margin-top: 3%;
text-align: center;
position: relative;
.icon{
position: absolute;
left:10%;
top:50%;
transform: translateY(-50%);
}
.text{
position: absolute;
top:50%;
right:10%;
transform: translateY(-50%);
}
}
}
.address {
font-size: 25rpx;
margin-left: 35%;
color: #999999;
line-height: 37rpx;
font-size: 30rpx;
color: #666666;
margin:40rpx 0 20rpx 30rpx;
word-break:break-all;
line-height: 50rpx;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
position: relative;
.distance{
// position: absolute;
// right:30rpx;
// top:50%;
float: right;
display: inline-block;
padding-right: 10rpx;
}
.text{
padding-left: 40rpx;
display: inline-block;
}
image{
position: absolute;
top:50%;
transform: translateY(-50%);
width: 28rpx;
height: 35rpx;
}
}
}
}

255
pages/nursestation/nursestation.vue
View File

@ -1,61 +1,122 @@
<template>
<view class="app">
<view class="container">
<view>
<!-- 轮播图 -->
<swiper indicator-dots="true" indicator-color='#fff' indicator-active-color='#0086d6'
:autoplay="autoplay" interval="2000" duration="1000" show-center-play-btn="true" class="swiper-box"
circular='true' @change="swiperChange">
<swiper-item v-for="(item ,index) in Banners" :key="index">
<view class="swiper-item" v-show="!splits(item)" wx-if="{item}">
<image v-if="item" :src="item" mode="widthFix"></image>
</view>
<view class="swiper-item" v-show="splits(item)" v-if="item">
<video :id="'myVideo'+index" :autoplay="false" :src="item" controls show-fullscreen-btn
object-fit="fill" @play="play" @pause="pause" @ended="ended" auto-pause-if-navigate
show-play-btn :enable-progress-gesture='true' :show-center-play-btn='true'
enable-play-gesture auto-pause-if-open-native show-mute-btn></video>
</view>
</swiper-item>
</swiper>
</view>
</view>
<!-- <swiper class="swiper" circular>
<swiper-item>
<view class="swiper-item ">A</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">B</view>
</swiper-item>
<swiper-item>
<video @play = 'videoplay'
src="http://192.168.16.30:8088/profile/posterVideoUrl/2023/02/21/QQ录屏20221019175958_20230221170920A01781ba346416.mp4"></video>
</swiper-item>
</swiper> -->
<!-- <u-swiper v-if="lbinfo" :list="lbinfo" height="450" style='background-size: 100%;' mode='none'></u-swiper> -->
<view class="content">
<view class="righttext">
<image class="picture" :src="list.stationIntroducePcitureUrl"></image>
<view class="title" v-if="list.nurseStationName">
{{list.nurseStationName}}
</view>
<view class="title" v-else>
暂无
</view>
<view class="address" v-if="list.address">{{list.address}} </view>
<view class="address" v-else>
暂无
</view>
<view class="call">
<view class="callme" @tap="gophone()">
<u-icon class='icon' name="phone-fill" color="#ffffff" size="30"></u-icon>
<view class="text">联系我们</view>
<view class="time">
<view class="text">
{{list.businessStatus}}
</view>
<!-- <view class="Navigation">
<image src="/static/daohang.png" mode="">导航</image>
</view> -->
</view>
</view>
<view class="detail">
<view class="Introduction">机构简介</view>
<view class="textInfo" v-html="list.agencyIntroduce">
</view>
</view>
<view class="Nursestationconfiguration">
<view class="configuration">
护理站配置
<view class="" style="margin-top: 30rpx;">
<view class="text" v-for="(item,index) in nurseStationLabelList" :key="index">
{{item.labelDescription}}
<view class="timeday" v-if="list.openingHoursDescribe">
{{list.openingHoursDescribe}}
</view>
<view class="texttime">
<view class="">
上午：{{list.morningOpenStartTime}}-{{list.morningOpenEndTime}}
</view>
<view class="">
下午：{{list.afternoonOpenStartTime}}-{{list.afternoonOpenEndTime}}
</view>
</view>
</view>
<view class="configuration">
<view class="text" v-for="(item,index) in nurseStationLabelList" :key="index">
{{item.labelDescription}}
</view>
</view>
<view class="address" v-if="list.address" @tap="goMap">
<image src="../../static/locatinsmall.png" mode=""></image>
<view class="text">
{{list.address}}
</view>
<view class="distance">
{{distance}}KM
</view>
</view>
<view class="address" v-else>
<image src="../../static/locatinsmall.png" mode=""></image>
<view class="text">
暂无
</view>
<view class="distance">
{{distance}}KM
</view>
</view>
<view class="address" v-if="list.dutyPhone" style="margin: 20rpx 0 0 33rpx;" @tap='gophone'>
<image src="../../static/phone.png" mode=""></image>
<view class="text">
{{list.dutyPhone}}
</view>
</view>
<view class="address" v-else style="margin: 20rpx 0 0 33rpx">
<image src="../../static/phone.png" mode=""></image>
<view class="text">
暂无
</view>
</view>
</view>
<view class="tive">
<view class="tab-box">
<view class="tab-item" @tap="testTabClick(index)" v-for="(item,index) in tabList" :key="index"
<view class="tab-item" @tap="testTabClick(item)" v-for="(item,index) in tabLists" :key="index"
:class="tabIndex == index?'active':''">
{{item.name}}
</view>
</view>
<view class="" v-if="servelist.length>0&&choicetab==false">
<u-tabs v-if="choicetab==false" :list="tabList" :current="classifycurrent" @change="change">
</u-tabs>
<view class="" v-if="servelist.length>0&&choicetab==false" style="margin:0">
<view class="item" v-for="item in servelist" :key="" v-show='choicetab==false'
@click.stop='goProjectDetails(item)'>
<image :src="item.itemPictureUrl"></image>
<view class="huanyao">{{item.nurseItemName}}
</view>
<view class="day">
{{item.advanceAppointDuration=='HALF_DAY'?'提前预约时长:半天':''}}
{{item.advanceAppointDuration=='ONE_DAY'?'提前预约时长:一天':''}}
</view>
<!-- <view class="pingfen">
<u-rate :count="5" value="2"></u-rate>
</view> -->
<view class="servicetime">服务时长:{{item.serveDurationUnit?item.serveDurationUnit:'0'}}</view>
<view class="appointment" @tap.stop='goappointments(item)'>预约</view>
<!-- <view class="servicetime">服务时长:{{item.serveDurationUnit?item.serveDurationUnit:'0'}}</view> -->
<view class="appointment" @click.stop='goappointments(item)'>预约</view>
<view class="price">￥{{item.nurseItemPrice==null?'0':item.nurseItemPrice}}</view>
</view>
</view>
@ -69,9 +130,11 @@
<view class="item" v-show='choicetab' v-for="(item,index) in productlist" :key="index">
<image :src="item.goodsPictureUrl"></image>
<view class="product">{{item.goodsName}}</view>
<view class="product" style="top:38%;font-size: 24rpx;color: #999999;">{{item.attributeDetailsName}}</view>
<view class="buy appointment" @tap="goCommodityDetails(item)">购买</view>
<view class="price" style="left:32%">￥{{item.goodsPrice==null?'0':item.goodsPrice}}</view>
<!-- <view class="product" style="top:38%;font-size: 24rpx;color: #999999;">
{{item.attributeDetailsName}}
</view> -->
<view class="appointment" @tap="goCommodityDetails(item)">购买</view>
<view class="price">￥{{item.goodsPrice==null?'0':item.goodsPrice}}</view>
</view>
</view>
<view class="noorder" v-if="productlist.length==0&&choicetab">
@ -97,6 +160,7 @@
</view>
</u-mask>
<u-toast ref="uToast" />
<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
</template>
@ -113,6 +177,10 @@
export default {
data() {
return {
Banners: [], //轮播图
autoplay: true, //自动切换轮播图
videoContext: '',
baseurl: '',
usershow: false, //完善信息开关
choicetab: false, //切换
list: [], //护理站list
@ -126,23 +194,95 @@
nurseStationId: '',
pageNum: 1,
pageSize: 10,
tabIndex: 0,
timer: null,
tabList: [{
name: "服务项目"
}, {
name: "产品"
}, ]
name: '全部',
id: ''
}], //分类标题
tabIndex: 0,
tabLists: [{
name: '服务项目',
id: 0,
},
{
name: '产品',
id: 1,
}
],
classifycurrent: 0, //分类下标
distance: null, //距离
nurseClassifyInfoId: '', //分类id
scrollTop: 0,
}
},
onShow() {
this.baseurl = baseurl
this.usershow = false
this.getInfo()
},
onLoad(options) {
let that = this
this.GetBanner()
this.nurseStationId = options.nurseStationId
this.distance = options.distance
},
methods: {
//跳转地图
goMap() {
uni.openLocation({
latitude: Number(this.list.latitude),
longitude: Number(this.list.longitude),
})
},
swiperChange(e) {
let {
current,
source
} = e.detail
this.videoContext = uni.createVideoContext('myVideo' + (current - 1));
//只有手动切换时开始轮播，并且上一页视频暂停
if (source === 'touch') {
this.videoContext.pause(); //暂停
this.autoplay = true
}
},
// 获取数据
GetBanner() {},
// 处理banner返回的是是视频还是图片
splits(url) {
if (url.indexOf('.') != -1) {
var ext = url.substring(url.lastIndexOf('.') + 1);
return ['mp4', 'webm', 'mpeg4', 'ogg'].indexOf(ext) != -1
}
},
// 点击开始/继续播放
play() {
this.autoplay = false
// this.videoContext.requestFullScreen()
},
// 视频暂停
pause() {
this.autoplay = true
},
// 视频结束
ended() {
this.autoplay = true
},
testTabClick(item) {
this.tabIndex = item.id
if (item.id == 0) {
this.choicetab = false
} else {
this.choicetab = true
}
},
//点击分类标题
change(index) {
this.classifycurrent = index;
this.nurseClassifyInfoId = this.tabList[index].id
this.serveinfo()
},
//预约
goappointments(item) {
let that = this
try {
@ -197,14 +337,38 @@
getInfo() {
introductionList(this.nurseStationId).then(res => {
if (res.code == 200) {
this.Banners = []
this.serveinfo()
this.productinfo()
res.data.morningOpenStartTime = res.data.morningOpenStartTime.slice(0, 5)
res.data.morningOpenEndTime = res.data.morningOpenEndTime.slice(0, 5)
res.data.afternoonOpenStartTime = res.data.afternoonOpenStartTime.slice(0, 5)
res.data.afternoonOpenEndTime = res.data.afternoonOpenEndTime.slice(0, 5)
res.data.stationIntroducePcitureUrl = baseurl + res.data.stationIntroducePcitureUrl
res.data.stationPictureUrl = baseurl + res.data.stationPictureUrl
if (res.data.agencyIntroduce) {
res.data.agencyIntroduce = res.data.agencyIntroduce.replace(/\<img/gi,
"<br/><img class='richPic'")
}
res.data.nurseClassifyInfoList.forEach(e => {
e.name = e.classifyName
this.tabList.push(e)
})
this.list = res.data
if (res.data.poserInfoList.length >= 1) {
res.data.poserInfoList.forEach(e => {
e.image = baseurl + e.posterPictureUrl
this.Banners.push(e.image)
})
if (res.data.poserInfoList[0].video) {
res.data.poserInfoList[0].video = baseurl + res.data.poserInfoList[0]
.posterVideoUrl
this.Banners.push(res.data.poserInfoList[0].video)
}
} else {
this.Banners.push(res.data.stationPictureUrl)
this.Banners.push(res.data.stationIntroducePcitureUrl)
}
if (res.data.nurseStationLabelList) {
this.nurseStationLabelList = res.data.nurseStationLabelList
}
@ -213,7 +377,7 @@
},
serveinfo() {
this.pageNum = 1
itemList(this.nurseStationId, this.pageSize, this.pageNum).then(res => {
itemList(this.nurseStationId, this.pageSize, this.pageNum, this.nurseClassifyInfoId).then(res => {
uni.removeStorageSync('Refresh');
res.rows.forEach(e => {
e.itemPictureUrl = baseurl + e.itemPictureUrl
@ -233,10 +397,6 @@
this.producttotal = res.total
})
},
testTabClick(index) {
this.tabIndex = index
this.choicetab = this.tabIndex
},
//跳转商品详情页
goCommodityDetails(item) {
uni.navigateTo({
@ -280,11 +440,11 @@
});
}
},
onReachBottom() { //下滑加载
if (this.choicetab == 0) {
onReachBottom() { //上滑加载
if (!this.choicetab) {
if (this.servelist.length >= this.servetotal) {} else {
this.pageNum++
itemList(this.nurseStationId, this.pageSize, this.pageNum).then(res => {
itemList(this.nurseStationId, this.pageSize, this.pageNum, this.nurseClassifyInfoId).then(res => {
res.rows.forEach(e => {
e.itemPictureUrl = baseurl + e.itemPictureUrl
this.servelist.push(e)
@ -305,7 +465,7 @@
},
onPullDownRefresh() { //下拉刷新
this.pageNum = 1;
if (this.choicetab == 0) {
if (!this.choicetab) {
itemList(this.nurseStationId, this.pageSize, this.pageNum).then(res => {
res.rows.forEach(e => {
e.itemPictureUrl = baseurl + e.itemPictureUrl
@ -342,6 +502,9 @@
path: url,
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
}
</script>

562
pages/picker/picker.vue
View File

@ -1,562 +0,0 @@
<template>
<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
:safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
<view class="u-datetime-picker">
<view class="u-picker-header" @touchmove.stop.prevent="">
<view class="u-btn-picker u-btn-picker--tips" :style="{ color: cancelColor }" hover-class="u-opacity"
:hover-stay-time="150" @tap="getResult('cancel')">{{cancelText}}</view>
<view class="u-picker__title">{{ title }}</view>
<view class="u-btn-picker u-btn-picker--primary" :style="{ color: moving ? cancelColor : confirmColor }"
hover-class="u-opacity" :hover-stay-time="150" @touchmove.stop="" @tap.stop="getResult('confirm')">
{{confirmText}}
</view>
</view>
<view class="u-picker-body">
<picker-view :value="valueArr" @change="change" class="u-picker-view" @pickstart="pickstart"
@pickend="pickend">
<picker-view-column v-if="!reset && params.year" style="flex:6">
<view class="u-column-item" v-for="(item, index) in years" :key="index">
{{ item }}
<text class="u-text" v-if="showTimeTag">年</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.month" style="flex:5">
<view class="u-column-item" v-for="(item, index) in months" :key="index">
{{ formatNumber(item) }}
<text class="u-text" v-if="showTimeTag">月</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.day" style="flex:5">
<view class="u-column-item" v-for="(item, index) in days" :key="index">
{{ formatNumber(item) }}
<text class="u-text" v-if="showTimeTag">日</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.hour" style="flex:6">
<view class="u-column-item" v-for="(item, index) in hours" :key="index">
<view class="" style="font-size:38rpx">
{{ formatNumber(item) }}
</view>
<text class="u-text" v-if="showTimeTag">时</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.minute" style="flex:6">
<view class="u-column-item" v-for="(item, index) in minutes" :key="index">
<view class="" style="font-size:38rpx">
{{ formatNumber(item) }}
</view>
<text class="u-text" v-if="showTimeTag">分</text>
</view>
</picker-view-column>
<picker-view-column style="flex:2">
<view class="u-column-item">
<text class="u-text">至</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.endhour" style="flex:6">
<view class="u-column-item" v-for="(item, index) in endhours" :key="index">
<view class="" style="font-size:38rpx">
{{ formatNumber(item) }}
</view>
<text class="u-text" v-if="showTimeTag">时</text>
</view>
</picker-view-column>
<picker-view-column v-if="!reset && params.endminute" style="flex:6">
<view class="u-column-item" v-for="(item, index) in endminutes" :key="index">
<view class="" style="font-size:38rpx">
{{ formatNumber(item) }}
</view>
<text class="u-text" v-if="showTimeTag">分</text>
</view>
</picker-view-column>
</picker-view>
</view>
</view>
</u-popup>
</template>
<script>
/**
* picker picker弹出选择器
* @description 此选择器有两种弹出模式：一是时间模式，可以配置年，日，月，时，分，秒参数 二是地区模式，可以配置省，市，区参数
* @tutorial https://www.uviewui.com/components/picker.html
* @property {Object} params 需要显示的参数，见官网说明
* @property {String} mode 模式选择，region-地区类型，time-时间类型（默认time）
* @property {String Number} start-year 可选的开始年份，mode=time时有效（默认1950）
* @property {String Number} end-year 可选的结束年份，mode=time时有效（默认2050）
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示
* @property {String} cancel-color 取消按钮的颜色（默认#606266）
* @property {String} confirm-color 确认按钮的颜色（默认#2979ff）
* @property {String} default-time 默认选中的时间，mode=time时有效
* @property {String} confirm-text 确认按钮的文字
* @property {String} cancel-text 取消按钮的文字
* @property {String} default-region 默认选中的地区，中文形式，mode=region时有效
* @property {String} default-code 默认选中的地区，编号形式，mode=region时有效
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
* @property {String Number} z-index 弹出时的z-index值（默认1075）
* @property {Array} default-selector 数组形式，其中每一项表示选择了range对应项中的第几个
* @property {Array} range 自定义选择的数据，mode=selector或mode=multiSelector时有效
* @property {String} range-key 当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容
* @event {Function} confirm 点击确定按钮，返回当前选择的值
* @event {Function} cancel 点击取消按钮，返回当前选择的值
* @example <u-picker v-model="show" mode="time"></u-picker>
*/
export default {
name: 'u-picker',
props: {
// picker中需要显示的参数
params: {
type: Object,
default () {
return {
year: false,
month: true,
day: true,
hour: true,
endhour: true,
minute: true,
endminute: true,
second: false,
};
}
},
// 当mode=selector或者mode=multiSelector时，提供的数组
range: {
type: Array,
default () {
return [];
}
},
// 当mode=selector或者mode=multiSelector时，提供的默认选中的下标
defaultSelector: {
type: Array,
default () {
return [0];
}
},
// 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
rangeKey: {
type: String,
default: ''
},
// 模式选择，region-地区类型，time-时间类型，selector-单列模式，multiSelector-多列模式
mode: {
type: String,
default: 'time'
},
// 年份开始时间
startYear: {
type: [String, Number],
default: 1950
},
// 年份结束时间
endYear: {
type: [String, Number],
default: 2050
},
// "取消"按钮的颜色
cancelColor: {
type: String,
default: '#606266'
},
// "确定"按钮的颜色
confirmColor: {
type: String,
default: '#2979ff'
},
// 默认显示的时间，2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02
defaultTime: {
type: String,
default: ''
},
// 时间模式时，是否显示后面的年月日中文提示
showTimeTag: {
type: Boolean,
default: true
},
safeAreaInsetBottom: {
type: Boolean,
default: false
},
// 是否允许通过点击遮罩关闭Picker
maskCloseAble: {
type: Boolean,
default: true
},
// 通过双向绑定控制组件的弹出与收起
value: {
type: Boolean,
default: false
},
// 弹出的z-index值
zIndex: {
type: [String, Number],
default: 0
},
// 顶部标题
title: {
type: String,
default: '预约时间区间'
},
// 取消按钮的文字
cancelText: {
type: String,
default: '取消'
},
// 确认按钮的文字
confirmText: {
type: String,
default: '确认'
}
},
data() {
return {
years: [],
months: [],
days: [],
hours: [],
endhours: [],
minutes: [],
endminutes: [],
seconds: [],
year: 0,
month: 0,
day: 0,
hour: 0,
endhour: 0,
minute: 0,
endminute: 0,
second: 0,
reset: false,
startDate: '',
endDate: '',
valueArr: [],
moving: false // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
};
},
mounted() {
this.init();
},
computed: {
propsChange() {
// 引用这几个变量，是为了监听其变化
return `${this.mode}-${this.defaultTime}-${this.startYear}-${this.endYear}-${this.defaultRegion}-${this.areaCode}`;
},
regionChange() {
// 引用这几个变量，是为了监听其变化
return `${this.province}-${this.city}`;
},
yearAndMonth() {
return `${this.year}-${this.month}`;
},
uZIndex() {
// 如果用户有传递z-index值，优先使用
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
}
},
watch: {
propsChange() {
this.reset = true;
setTimeout(() => this.init(), 10);
},
// 如果地区发生变化，为了让picker联动起来，必须重置this.citys和this.areas
regionChange(val) {
this.citys = citys[this.province];
this.areas = areas[this.province][this.city];
},
// watch监听月份的变化，实时变更日的天数，因为不同月份，天数不一样
// 一个月可能有30，31天，甚至闰年2月的29天，平年2月28天
yearAndMonth(val) {
if (this.params.year) this.setDays();
},
// 微信和QQ小程序由于一些奇怪的原因(故同时对所有平台均初始化一遍)，需要重新初始化才能显示正确的值
value(n) {
if (n) {
this.reset = true;
setTimeout(() => this.init(), 10);
}
}
},
methods: {
// 标识滑动开始，只有微信小程序才有这样的事件
pickstart() {
// #ifdef MP-WEIXIN
this.moving = true;
// #endif
},
// 标识滑动结束
pickend() {
// #ifdef MP-WEIXIN
this.moving = false;
// #endif
},
// 对单列和多列形式的判断是否有传入变量的情况
getItemValue(item, mode) {
// 目前(2020-05-25)uni-app对微信小程序编译有错误，导致v-if为false中的内容也执行，错误导致
// 单列模式或者多列模式中的getItemValue同时被执行，故在这里再加一层判断
if (this.mode == mode) {
return typeof item == 'object' ? item[this.rangeKey] : item;
}
},
// 小于10前面补0，用于月份，日期，时分秒等
formatNumber(num) {
return +num < 10 ? '0' + num : String(num);
},
// 生成递进的数组
generateArray: function(start, end) {
// 转为数值格式，否则用户给end-year等传递字符串值时，下面的end+1会导致字符串拼接，而不是相加
start = Number(start);
end = Number(end);
end = end > start ? end : start;
// 生成数组，获取其中的索引，并剪出来
return [...Array(end + 1).keys()].slice(start);
},
getIndex: function(arr, val) {
let index = arr.indexOf(val);
// 如果index为-1(即找不到index值)，~(-1)=-(-1)-1=0，导致条件不成立
return ~index ? index : 0;
},
//日期时间处理
initTimeValue() {
// 格式化时间，在IE浏览器(uni不存在此情况)，无法识别日期间的"-"间隔符号
let fdate = this.defaultTime.replace(/\-/g, '/');
fdate = fdate && fdate.indexOf('/') == -1 ? `2020/01/01 ${fdate}` : fdate;
let time = null;
if (fdate) time = new Date(fdate);
else time = new Date();
// 获取年日月时分秒
this.year = time.getFullYear();
this.month = Number(time.getMonth()) + 1;
this.day = time.getDate();
this.hour = time.getHours();
this.minute = time.getMinutes();
this.endhour = time.getHours();
this.endminute = time.getMinutes();
// this.second = time.getSeconds();
},
init() {
this.valueArr = [];
this.reset = false;
if (this.mode == 'time') {
this.initTimeValue();
if (this.params.year) {
this.valueArr.push(0);
this.setYears();
}
if (this.params.month) {
this.valueArr.push(0);
this.setMonths();
}
if (this.params.day) {
this.valueArr.push(0);
this.setDays();
}
if (this.params.hour) {
this.valueArr.push(0);
this.setHours();
}
if (this.params.minute) {
this.valueArr.push(0);
this.setMinutes();
}
if (this.params.endhour) {
this.valueArr.push(0);
this.setendHours();
}
if (this.params.endminute) {
this.valueArr.push(0);
this.setendMinutes();
}
// if (this.params.second) {
// this.valueArr.push(0);
// this.setSeconds();
// }
}
this.$forceUpdate();
},
// 设置picker的某一列值
setYears() {
// 获取年份集合
this.years = this.generateArray(this.startYear, this.endYear);
// 设置this.valueArr某一项的值，是为了让picker预选中某一个值
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.years, this.year));
},
setMonths() {
this.months = this.generateArray(1, 12);
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.months, this.month));
},
setDays() {
let totalDays = new Date(this.year, this.month, 0).getDate();
this.days = this.generateArray(1, totalDays);
let index = 0;
// 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, xxx)做法
// 因为this.month和this.year变化时，会触发watch中的this.setDays()，导致this.valueArr.length计算有误
if (this.params.year && this.params.month) index = 2;
else if (this.params.month) index = 1;
else if (this.params.year) index = 1;
else index = 0;
// 当月份变化时，会导致日期的天数也会变化，如果原来选的天数大于变化后的天数，则重置为变化后的最大值
// 比如原来选中3月31日，调整为2月后，日期变为最大29，这时如果day值继续为31显然不合理，于是将其置为29(picker-column从1开始)
if (this.day > this.days.length) this.day = this.days.length;
this.valueArr.splice(index, 1, this.getIndex(this.days, this.day));
},
setHours() {
this.hours = this.generateArray(0, 23);
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.hours, this.hour));
},
setMinutes() {
this.minutes = this.generateArray(0, 59);
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.minutes, this.minute));
},
setendHours() {
this.endhours = this.generateArray(0, 23);
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.endhours, this.endhour));
},
setendMinutes() {
this.endminutes = this.generateArray(0, 59);
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.endminutes, this.endminute));
},
// setSeconds() {
// this.seconds = this.generateArray(0, 59);
// this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.seconds, this.second));
// },
close() {
this.$emit('input', false);
},
// 用户更改picker的列选项
change(e) {
this.valueArr = e.detail.value;
let i = 0;
if (this.mode == 'time') {
// 这里使用i++，是因为this.valueArr数组的长度是不确定长度的，它根据this.params的值来配置长度
// 进入if规则，i会加1，保证了能获取准确的值
if (this.params.year) this.year = this.years[this.valueArr[i++]];
if (this.params.month) this.month = this.months[this.valueArr[i++]];
if (this.params.day) this.day = this.days[this.valueArr[i++]];
if (this.params.hour) this.hour = this.hours[this.valueArr[i++]];
if (this.params.minute) this.minute = this.minutes[this.valueArr[i++]];
if (this.params.endhour) this.endhour = this.hours[this.valueArr[3]]
if (this.params.endminute) this.endminute = this.endminutes[this.valueArr[4]];
// if (this.params.second) this.second = this.seconds[this.valueArr[i++]];
}
},
// 用户点击确定按钮
getResult(event = null) {
// #ifdef MP-WEIXIN
if (this.moving) return;
// #endif
let result = {};
// 只返回用户在this.params中配置了为true的字段
if (this.mode == 'time') {
if (this.params.year) result.year = this.formatNumber(this.year || 0);
if (this.params.month) result.month = this.formatNumber(this.month || 0);
if (this.params.day) result.day = this.formatNumber(this.day || 0);
if (this.params.hour) result.hour = this.formatNumber(this.hour || 0);
if (this.params.minute) result.minute = this.formatNumber(this.minute || 0);
if (this.params.endhour) result.endhour = this.formatNumber(this.endhour || 0);
if (this.params.endminute) result.endminute = this.formatNumber(this.endminute || 0);
// if (this.params.second) result.second = this.formatNumber(this.second || 0);
// if (this.params.timestamp) result.timestamp = this.getTimestamp();
}
if (event) this.$emit(event, result);
this.close();
},
// 获取时间戳
getTimestamp() {
// yyyy-mm-dd为安卓写法，不支持iOS，需要使用"/"分隔，才能二者兼容
let time = this.year + '/' + this.month + '/' + this.day + ' ' + this.hour + ':' + this.minute + ':' + this
.second;
return new Date(time).getTime() / 1000;
}
}
};
</script>
<style lang="scss" scoped>
// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
@mixin vue-flex($direction: row) {
/* #ifndef APP-NVUE */
display: flex;
flex-direction: $direction;
/* #endif */
}
.u-datetime-picker {
position: relative;
z-index: 999;
}
.u-picker-view {
height: 100%;
box-sizing: border-box;
}
.u-picker-header {
width: 100%;
height: 90rpx;
padding: 0 40rpx;
@include vue-flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
font-size: 30rpx;
background: #fff;
position: relative;
}
.u-picker-header::after {
content: '';
position: absolute;
border-bottom: 1rpx solid #eaeef1;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
bottom: 0;
right: 0;
left: 0;
}
.u-picker__title {
color: $u-content-color;
}
.u-picker-body {
width: 100%;
height: 500rpx;
overflow: hidden;
background-color: #fff;
}
.u-column-item {
@include vue-flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: $u-main-color;
padding: 0 8rpx;
}
.u-text {
font-size: 24rpx;
padding-left: 8rpx;
}
.u-btn-picker {
padding: 16rpx;
box-sizing: border-box;
text-align: center;
text-decoration: none;
}
.u-opacity {
opacity: 0.5;
}
.u-btn-picker--primary {
color: $u-type-primary;
}
.u-btn-picker--tips {
color: $u-tips-color;
}
</style>

72
pages/shopping/shopping.vue
View File

@ -1,10 +1,10 @@
<template>
<view class="app">
<view class="cards">
<view class="item" :style="{background:listcolor[index]}" @tap='goProductList(item)'
<view class="card">
<view class="items" :style="{background:listcolor[index % listcolor.length]}" @tap='goProductList(item)'
v-for="(item,index) in goodsCategoryList" :key="index">
<image :src="item.goodsCategoryPicture" mode=""></image>
<view class="title" style="font-size:42rpx">
<view class="titles" style="font-size:42rpx">
{{item.goodsCategoryName}}
</view>
</view>
@ -25,23 +25,7 @@
pageSize: 10, //列
total: 0, //list总长度
goodsCategoryList: [], //商品列表list
// listimg:[
// {
// img:'../../static/sp.png',
// },
// {
// img:'../../static/yyss.png',
// },
// {
// img:'../../static/znsb.png',
// },
// {
// img:'../../static/cp.png',
// },
// ],
listcolor: ['#00C176', '#D43953', '#E1AE3C', '#4C7BC9', '#9e4dd0', '#00C176', '#D43953', '#E1AE3C',
'#4C7BC9', '#9e4dd0',
], //颜色随动
listcolor: ['#E69874', '#09C87E', '#E4B958', '#6592DC', '#EF6A80'] //颜色随动
};
},
//1.分享给朋友
@ -63,10 +47,18 @@
}
},
//初始化加载
onLoad(options) {},
onShow() {
onLoad(options) {
this.pageNum = 1
this.goodsCategory()
},
onShow() {
let that = this
this.pageNum = 1
const value = uni.getStorageSync('Refresh');
if (value) {
that.goodsCategory();
}
},
methods: {
//跳转到商品列表页面
goProductList(item) {
@ -118,8 +110,40 @@
<style lang="scss">
.app {
.cards {
padding: 22px 0 20px 0;
padding: 165rpx 0 0;
background-color: #fff;
.card {
width: 100%;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
.items {
width: 45%;
height: 360rpx;
margin-bottom: 40rpx;
z-index: 1;
border-radius: 25rpx;
position: relative;
image {
border-radius: 25rpx;
width: 100%;
height: 100%;
z-index: -1;
}
.titles {
width: 90%;
font-size: 36rpx;
color: #FCFCFC;
position: absolute;
top: 30rpx;
left: 30rpx;
z-index: 999;
}
}
}
}
</style>

191
pages/site/site.scss
View File

@ -1,54 +1,173 @@
//护理站列表
.app{
padding: 0 0 5rpx 0;
.map{
padding-top: 100rpx;
z-index: 1;
.map{
z-index: 1;
padding: 0;
background-color: #fff;
}
::v-deep .u-swiper-item{
}
::v-deep .u-swiper-image {
}
::v-deep .u-tabs{
background-color: #F4F5F7 !important;
padding-bottom: 20rpx;
}
.Classificationlist{
margin: 30rpx 0 0;
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
text-align: center;
.itemclass{
color: #4C7BC9;
width: 25%;
height: 190rpx;
image{
display: block;
margin: 0 auto;
width: 100rpx;
height: 100rpx;
}
.title{
padding: 0 10rpx;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 30rpx;
font-weight: 600;
line-height: 70rpx;
}
}
.item{
width: 25%;
height: 190rpx;
image{
display: block;
margin: 0 auto;
width: 100rpx;
height: 100rpx;
}
.title{
padding: 0 10rpx;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 30rpx;
font-weight: 500;
line-height: 70rpx;
}
}
}
.inputs {
border: 1px solid #f0f0f0;
width: 90%;
height: 65rpx;
margin: 0 0 10rpx 50%;
transform: translateX(-50%);
border-radius: 20rpx;
background-color: #F4F5F7;
z-index: 999;
.input {
margin: 0 auto;
position: absolute;
height: 65rpx;
// top: 8%;
left: 10%;
width: 90%;
font-size: 26rpx;
color: #000000;
}
.icon {
background: url(@/static/sousuo.png) no-repeat;
width: 30rpx;
height: 28rpx;
background-size: cover;
position: absolute;
top: 30%;
left: 3%;
}
}
.conNew {
width: 96%;
// z-index: 999;
// position: fixed;
// top: 450rpx;
background-color: #F4F5F7;
width: 100%;
padding: 30rpx 0 50rpx;
margin: 0 auto;
// left: 2%;
height: 100%;
.noorder{
margin-top: 90rpx;
image{
display: block;
margin: 0 auto;
width: 100rpx;
height: 120rpx;
}
view{
text-align: center;
font-size: 36rpx;
color: #BFBFBF;
}
}
.title{
font-size: 32rpx;
font-weight: bold;
padding-left: 2%;
}
.addressContent {
width: 100%;
width: 96%;
background-color: #ffffff;
margin: 0 auto;
}
.lists {
background-color: #ffffff;
width: 100%;
height: 240rpx;
height: 300rpx;
margin-bottom: 14rpx;
border-radius: 20rpx;
position: relative;
.nurse {
font-size: 28rpx;
background-color: #ffffff;
.tags{
display: flex;
position: absolute;
top: 15%;
top: 55%;
left: 35%;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
width: 65%;
flex-wrap: wrap;
.tag{
background: #F8D7D1;
opacity: 0.8;
margin: 0 10rpx 10rpx 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 10rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
border-radius: 10rpx;
font-size: 22rpx;
color: #F44B2F;
}
}
.nurse {
font-size: 32rpx;
position: absolute;
top: 12%;
left: 35%;
width: 63%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.distance {
position: absolute;
bottom: 20%;
font-size: 24rpx;
left: 35%;
top: 32%;
left:35%;
font-size: 27rpx;
color: #666666;
}
@ -82,20 +201,6 @@
display: block;
margin: 10% auto;
}
.understand {
font-size: 28rpx;
color: #ffffff;
width: 160rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
background-color: #4C7BC9;
position: absolute;
bottom: 10%;
right: 1%;
border-radius: 35rpx;
}
}
}

244
pages/site/site.vue
View File

@ -1,26 +1,58 @@
<template>
<view class="app">
<view class="nursetation" @tap='detailed()'>
<text class="what">什么是护理站？</text>
<u-icon class="icon" name="arrow-right"></u-icon>
<view class="inputs">
<i class="icon"></i>
<input v-model="searchName" type="text" name="" id="" class="input" placeholder="请输入">
</view>
<view class="map" style="height:35vh;">
<map style="width:100%; height:100%" scale="17" :latitude="latitude" :longitude="longitude"
:markers="markers"></map>
<view class="Classificationlist">
<view v-for="(item,index) in nurseItemClassifyInfoList" :key="index" @tap='tapitemclass(item)'
:class="item.id == itemClassId?'itemclass':'item'">
<image :src="item.classifyPictureUrl" mode=""></image>
<view class="title">
{{item.classifyName}}
</view>
</view>
<view class="item" v-if='nurseItemClassifyInfoList.length==7&&lengthlistshow' @tap='lengthlist(true)'>
<image src="../../static/gd.png" mode=""></image>
<view class="title">
更多
</view>
</view>
<view class="item" v-if='nurseItemClassifyInfoList.length>7&&!lengthlistshow' @tap='lengthlist(false)'>
<image src="../../static/gd.png" mode=""></image>
<view class="title">
收起
</view>
</view>
</view>
<u-swiper :list="lbinfo" height='200' interval='3000' duration='1500' mode='none'></u-swiper>
<view class="conNew">
<view class="addressContent" v-for="(item,index) in nursestationlist" :key="index">
<view class="lists" @tap='godetails(item)'>
<view class="nurse">{{item.nurseStationName}}</view>
<view class="distance"
v-show="homeLatitudeLongitude.homeLatitude&&homeLatitudeLongitude.homeLongitude">
距离您{{item.distance}}KM</view>
<image class="background" :src="item.stationPictureUrl" mode=""></image>
<view class="understand">
点击了解
<view class="title">
周边医养机构
</view>
<u-tabs :list="nurseAgencyClassifyInfoList" :current="conNewcurrent" @change="change"></u-tabs>
<view class="" v-if="nursestationlist.length>0">
<view class="addressContent" v-for="(item,index) in nursestationlist" :key="index">
<view class="lists" @tap='godetails(item)'>
<view class="nurse">{{item.nurseStationName}}</view>
<view class="distance"
v-show="homeLatitudeLongitude.homeLatitude&&homeLatitudeLongitude.homeLongitude">
距离您{{item.distance}}KM</view>
<image class="background" :src="item.stationPictureUrl" mode=""></image>
<view class="tags">
<view class="tag" v-for="uitem in item.classifyInfoList">
{{uitem.classifyName}}
</view>
</view>
</view>
</view>
</view>
<view class="noorder" v-else>
<image src="../../static/noorder.png" mode=""></image>
<view class="">
暂无护理站
</view>
</view>
</view>
<view class="masks" style="" v-if="mask">
<view class="mask">
@ -36,31 +68,93 @@
</view>
</view>
</view>
<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
</template>
<script>
import {
nearbyList,
getPatientInfo
getPatientInfo,
getNurseClassifyList
} from '@/api/site/site.js';
import baseurl from '@/api/baseurl.js'
export default {
data() {
return {
nurseAgencyClassifyInfoList: [], //护理站分类
conNewcurrent: 0,
nurseItemClassifyInfoList: [], //护理项目分类
nurseItemClassifyInfolength: 0,
nurseItemClassifyInfolistlength: [],
lengthlistshow: true,
lbinfo: [], //轮播list
nursestationlist: [],
mask: false,
pageNum: 1,
pageSize: 10,
total: 0,
//map地图所需
id: 0, // 使用 marker点击事件 需要填写id
latitude: 39.90374,
longitude: 116.397827,
markers: [],
homeLatitudeLongitude: null,
nurseClassId: '', //护理站分类id
itemClassId: '', //护理项目分类id
searchName: '', //通用名称
scrollTop: 0,
}
},
methods: {
lengthlist(item) {
uni.showLoading({
title: '',
duration: 1000
});
setTimeout((e) => {
this.lengthlistshow = !this.lengthlistshow
if (item) {
this.nurseItemClassifyInfoList = this.nurseItemClassifyInfolistlength
} else {
this.nurseItemClassifyInfoList = this.nurseItemClassifyInfolistlength.slice(0, 7)
}
uni.hideLoading();
}, 1000)
},
//点击护理项目分类
tapitemclass(item) {
if (this.itemClassId == item.id) {
this.itemClassId = ''
} else {
this.itemClassId = item.id
}
this.requestinfo()
},
//护理站和护理项目分类
getNurseClassifyinfo() {
getNurseClassifyList().then(res => {
this.nurseAgencyClassifyInfoList.push({
name: '全部',
id: '',
})
res.data.nurseAgencyClassifyInfoList.forEach(e => {
e.name = e.classifyName
this.nurseAgencyClassifyInfoList.push(e)
})
res.data.nurseItemClassifyInfoList.forEach(e => {
e.classifyPictureUrl = baseurl + e.classifyPictureUrl
})
res.data.poserInfoList.forEach(e => {
e.image = baseurl + e.posterPictureUrl
})
this.nurseItemClassifyInfolength = res.data.nurseItemClassifyInfoList.length
this.nurseItemClassifyInfolistlength = res.data.nurseItemClassifyInfoList
this.lbinfo = res.data.poserInfoList
this.nurseItemClassifyInfoList = res.data.nurseItemClassifyInfoList.slice(0, 7)
})
},
change(index) {
this.conNewcurrent = index;
this.nurseClassId = this.nurseAgencyClassifyInfoList[index].id
this.requestinfo()
},
getlocation(value) {
var that = this
uni.openSetting({
@ -71,14 +165,6 @@
// success: function(res) {
// that.latitude = res.latitude
// that.longitude = res.longitude
// that.markers.push({
// id: 3,
// latitude: res.Latitude,
// longitude: res.Longitude,
// width: 20,
// height: 25,
// iconPath: "../../static/locatinsmall.png"
// })
// that.mask = false
// }
// });
@ -88,26 +174,24 @@
},
requestinfo() {
this.pageNum = 1;
nearbyList(this.pageSize, this.pageNum, this.longitude, this.latitude, this.nurseTypeCode).then(res => {
if (res.total > 0) {
nearbyList(this.pageSize, this.pageNum, this.longitude, this.latitude, this.nurseClassId, this.itemClassId,
this.searchName)
.then(res => {
uni.removeStorageSync('Refresh');
res.rows.forEach(e => {
e.stationPictureUrl = baseurl + e.stationPictureUrl
if (e.classifyInfoList && e.classifyInfoList.length >= 1) {
e.classifyInfoList = e.classifyInfoList.slice(0, 2)
}
})
this.nursestationlist = res.rows
this.mask = false
this.total = res.total
}
})
})
},
godetails(item) {
uni.navigateTo({
url: `/pages/nursestation/nursestation?nurseStationId=${item.nurseStationId}`
})
},
detailed() {
uni.navigateTo({
url: `/pages/detail/detail`
url: `/pages/nursestation/nursestation?nurseStationId=${item.nurseStationId}&distance=${item.distance}`
})
},
cancel() {
@ -117,13 +201,17 @@
})
},
},
onReachBottom() {
onReachBottom() { //上滑加载
if (this.nursestationlist.length >= this.total) {} else {
this.pageNum++;
nearbyList(this.pageSize, this.pageNum, this.longitude, this.latitude, this.nurseTypeCode, this.iptVal)
nearbyList(this.pageSize, this.pageNum, this.longitude, this.latitude, this.nurseClassId, this.itemClassId,
this.searchName)
.then(res => {
res.rows.forEach(e => {
e.stationPictureUrl = baseurl + e.stationPictureUrl
if (e.classifyInfoList && e.classifyInfoList.length >= 1) {
e.classifyInfoList = e.classifyInfoList.slice(0, 2)
}
this.nursestationlist.push(e)
})
})
@ -131,23 +219,22 @@
},
onPullDownRefresh() { //下拉刷新
this.pageNum = 1;
nearbyList(this.pageSize, this.pageNum, this.longitude, this.latitude, this.nurseTypeCode, this.iptVal)
.then(res => {
res.rows.forEach(e => {
e.stationPictureUrl = baseurl + e.stationPictureUrl
})
this.nursestationlist = res.rows
})
// this.requestinfo()
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
watch: {
iptVal() {
// this.requestinfo()
searchName() {
this.itemClassId = ''
this.nurseClassId = ''
this.conNewcurrent = 0
this.requestinfo()
},
},
onShow() {
this.nurseClassId = ''
this.itemClassId = ''
var that = this
const value = uni.getStorageSync('patientId');
if (value) {
@ -157,32 +244,14 @@
if (res.data.homeLatitude && res.data.homeLongitude) {
that.latitude = res.data.homeLatitude
that.longitude = res.data.homeLongitude
that.markers.push({
id: 3,
latitude: res.data.homeLatitude,
longitude: res.data.homeLongitude,
width: 20,
height: 25,
iconPath: "../../static/locatinsmall.png"
})
that.requestinfo();
} else {
that.latitude = that.latitude
that.longitude = that.longitude
that.requestinfo();
// uni.getLocation({
// type: 'wgs84',
// success: function(resp) {
// that.latitude = resp.latitude
// that.longitude = resp.longitude
// that.markers.push({
// id: 3,
// latitude: resp.latitude,
// longitude: resp.longitude,
// width: 20,
// height: 25,
// iconPath: "../../static/locatinsmall.png"
// })
// that.requestinfo();
// },
// fail(err) {
@ -190,51 +259,17 @@
// }
// });
}
} else if (res.code == 9999) {
} else {
that.latitude = that.latitude
that.longitude = that.longitude
} else if (res.code == 9999) {} else {
that.requestinfo();
// that.markers.push({
// uni.getLocation({
// type: 'wgs84',
// success: function(resh) {
// that.latitude = resh.latitude
// that.longitude = resh.longitude
// that.markers.push({
// id: 3,
// latitude: resh.latitude,
// longitude: resh.longitude,
// width: 20,
// height: 25,
// iconPath: "../../static/locatinsmall.png"
// })
// that.requestinfo();
// },
// fail(err) {
// that.mask = true;
// }
// });
}
})
} else {
that.latitude = that.latitude
that.longitude = that.longitude
that.requestinfo();
// uni.getLocation({
// type: 'wgs84',
// success: function(res) {
// that.latitude = res.latitude
// that.longitude = res.longitude
// that.markers.push({
// id: 3,
// latitude: res.latitude,
// longitude: res.longitude,
// width: 20,
// height: 25,
// iconPath: "../../static/locatinsmall.png"
// })
// that.requestinfo();
// },
// fail(err) {
@ -243,7 +278,9 @@
// });
}
},
onLoad() {},
onLoad() {
this.getNurseClassifyinfo();
},
//1.分享给朋友
onShareAppMessage(res) {
let pages = getCurrentPages();
@ -262,6 +299,9 @@
path: url,
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
}
</script>
<style lang="scss">

7
pages/startup/startup.vue
View File

@ -13,9 +13,7 @@
} from '@/api/startup/index.js'
export default {
data() {
return {
};
return {};
},
//1.分享给朋友
onShareAppMessage(res) {
@ -49,11 +47,12 @@
<style lang="scss">
.app {
height: 100vh;
background-color: #fff;
}
image {
width: 50%;
height: 200rpx;
height: 400rpx;
position: absolute;
left: 25%;
top: 28%;

167
pages/toptabbar/toptabbar.vue
View File

@ -1,167 +0,0 @@
<template>
<view style="position: relative;">
<!--顶部导航栏-->
<view class="uni-top-tabbar">
<scroll-view scroll-x="true" class="uni-swiper-tab" :style="{backgroundColor:bgColor}">
<view v-for="(tabBar,index) in tabBars" :key="index" class="swiper-tab-list"
:class="{'active': tabIndex==index}" :style="{color:tabIndex==index?selectedTextColor:textColor}"
@tap="toggleTab(index)">
<view class="title">
{{tabBar.goodsCategoryName}}
</view>
<view class="swiper-tab-line"
:style="{backgroundColor:tabIndex==index?selectedBottomColor:bgColor}"></view>
</view>
</scroll-view>
<view class="fenlei" @tap='toggleTab(1111111111111)'>
<image src="../../static/fenlei.png" mode=""></image>
<view class="">
分类
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "topTabbar",
props: {
//选中标签栏的索引
tabIndex: {
type: Number,
default: 0
},
//导航栏标签内容
tabBars: {
type: Array,
default: [{
goodsCategoryName: '标签1',
id: 1
},
{
goodsCategoryName: '标签2',
id: 2
},
{
goodsCategoryName: '标签3',
id: 3
},
{
goodsCategoryName: '标签4',
id: 4
},
{
goodsCategoryName: '标签5',
id: 5
},
{
goodsCategoryName: '标签6',
id: 6
}
]
},
//选中时底部横条颜色
selectedBottomColor: {
type: String,
default: '#D43953'
},
//导航区背景颜色
bgColor: {
type: String,
default: '#ffffff'
},
//选中时文字颜色
selectedTextColor: {
type: String,
default: '#D43953'
},
//默认文本颜色
textColor: {
type: String,
default: '#7d7e80'
}
},
data() {
return {}
},
methods: {
//点击导航栏标签触发
toggleTab(index) {
this.$emit("toggleToptab", index)
}
}
}
</script>
<style lang="scss">
.fenlei {
width: 25%;
display: inline-block;
background-color: #fff;
line-height: 70rpx;
font-weight: normal;
height: 75rpx;
text-align: center;
color: #7d7e80;
position: absolute;
right: 0;
top: 0;
view {
position: absolute;
right: 25%;
}
image {
width: 40rpx;
height: 40rpx;
position: absolute;
left: 25%;
top: 50%;
transform: translateY(-55%);
}
}
.title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.uni-top-tabbar {
/* 以下3项设置用于开启底部阴影显示 */
/* position: relative;
z-index: 1;
overflow: visible; */
width: 75%;
.uni-swiper-tab {
height: 75rpx;
//设置底部阴影
//box-shadow: rgba(170, 170, 170, 0.5) 0 2rpx 8rpx 0;
white-space: nowrap;
.swiper-tab-list {
font-size: 28rpx;
font-weight: normal;
line-height: 70rpx;
//设置标签宽度
width: 25%;
text-align: center;
display: inline-block;
}
.active {
.swiper-tab-line {
height: 4rpx;
width: 80rpx;
margin: auto;
}
}
}
}
</style>

385
pages/utabs/u-tabs.vue Normal file
View File

@ -0,0 +1,385 @@
<template>
<view class="u-tabs" :style="{
background: bgColor
}">
<!-- $u.getRect()对组件根节点无效，因为写了.in(this)，故这里获取内层接点尺寸 -->
<view :id="id">
<scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation>
<view class="u-scroll-box" :class="{'u-tabs-scorll-flex': !isScroll}">
<view class="u-tab-item u-line-1" :id="'u-tab-item-' + index" v-for="(item, index) in list"
:key="index" @tap="clickTab(index)" :style="[tabItemStyle(index)]">
<view class="">
{{item.dates}}
</view>
<u-badge :count="item[count] || item['count'] || 0" :offset="offset" size="mini"></u-badge>
{{ item[name] || item['name']}}
</view>
<view v-if="showBar" class="u-tab-bar" :style="[tabBarStyle]"></view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
/**
* tabs 标签
* @description 该组件，是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
* @tutorial https://www.uviewui.com/components/tabs.html
* @property {Boolean} is-scroll tabs是否可以左右拖动（默认true）
* @property {Array} list 标签数组，元素为对象，如[{name: '推荐'}]
* @property {String Number} current 指定哪个tab为激活状态（默认0）
* @property {String Number} height 导航栏的高度，单位rpx（默认80）
* @property {String Number} font-size tab文字大小，单位rpx（默认30）
* @property {String Number} duration 滑块移动一次所需的时间，单位秒（默认0.5）
* @property {String} active-color 滑块和激活tab文字的颜色（默认#2979ff）
* @property {String} inactive-color tabs文字颜色（默认#303133）
* @property {String Number} bar-width 滑块宽度，单位rpx（默认40）
* @property {Object} active-item-style 活动tabs item的样式，对象形式
* @property {Object} bar-style 底部滑块的样式，对象形式
* @property {Boolean} show-bar 是否显示底部的滑块（默认true）
* @property {String Number} bar-height 滑块高度，单位rpx（默认6）
* @property {String Number} item-width 标签的宽度（默认auto）
* @property {String Number} gutter 单个tab标签的左右内边距之和，单位rpx（默认40）
* @property {String} bg-color tabs导航栏的背景颜色（默认#ffffff）
* @property {String} name 组件内部读取的list参数中的属性名（tab名称），见官网说明（默认name）
* @property {String} count 组件内部读取的list参数中的属性名（badge徽标数），同name属性的使用，见官网说明（默认count）
* @property {Array} offset 设置badge徽标数的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx（默认[5, 20]）
* @property {Boolean} bold 激活选项的字体是否加粗（默认true）
* @event {Function} change 点击标签时触发
* @example <u-tabs ref="tabs" :list="list" :is-scroll="false"></u-tabs>
*/
export default {
name: "u-tabs",
props: {
// 导航菜单是否需要滚动，如只有2或者3个的时候，就不需要滚动了，此时使用flex平分tab的宽度
isScroll: {
type: Boolean,
default: true
},
//需循环的标签列表
list: {
type: Array,
default () {
return [];
}
},
// 当前活动tab的索引
current: {
type: [Number, String],
default: 0
},
// 导航栏的高度和行高
height: {
type: [String, Number],
default: 80
},
// 字体大小
fontSize: {
type: [String, Number],
default: 28
},
// 过渡动画时长, 单位ms
duration: {
type: [String, Number],
default: 0.5
},
// 选中项的主题颜色
activeColor: {
type: String,
default: '#F44B2F;'
},
// 未选中项的颜色
inactiveColor: {
type: String,
default: '#303133'
},
// 菜单底部移动的bar的宽度，单位rpx
barWidth: {
type: [String, Number],
default: 40
},
// 移动bar的高度
barHeight: {
type: [String, Number],
default: 6
},
// 单个tab的左或有内边距（左右相同）
gutter: {
type: [String, Number],
default: 30
},
// 导航栏的背景颜色
bgColor: {
type: String,
default: '#ffffff'
},
// 读取传入的数组对象的属性(tab名称)
name: {
type: String,
default: 'name'
},
// 读取传入的数组对象的属性(徽标数)
count: {
type: String,
default: 'count'
},
// 徽标数位置偏移
offset: {
type: Array,
default: () => {
return [5, 20]
}
},
// 活动tab字体是否加粗
bold: {
type: Boolean,
default: true
},
// 当前活动tab item的样式
activeItemStyle: {
type: Object,
default () {
return {}
}
},
// 是否显示底部的滑块
showBar: {
type: Boolean,
default: true
},
// 底部滑块的自定义样式
barStyle: {
type: Object,
default () {
return {}
}
},
// 标签的宽度
itemWidth: {
type: [Number, String],
default: 'auto'
}
},
data() {
return {
scrollLeft: 0, // 滚动scroll-view的左边滚动距离
tabQueryInfo: [], // 存放对tab菜单查询后的节点信息
componentWidth: 0, // 屏幕宽度，单位为px
scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离
parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离
id: this.$u.guid(), // id值
currentIndex: this.current,
barFirstTimeMove: true, // 滑块第一次移动时(页面刚生成时)，无需动画，否则给人怪异的感觉
};
},
watch: {
// 监听tab的变化，重新计算tab菜单的布局信息，因为实际使用中菜单可能是通过
// 后台获取的（如新闻app顶部的菜单），获取返回需要一定时间，所以list变化时，重新获取布局信息
list(n, o) {
// list变动时，重制内部索引，否则可能导致超出数组边界的情况
if (n.length !== o.length) this.currentIndex = 0;
// 用$nextTick等待视图更新完毕后再计算tab的局部信息，否则可能因为tab还没生成就获取，就会有问题
this.$nextTick(() => {
this.init();
});
},
current: {
immediate: true,
handler(nVal, oVal) {
// 视图更新后再执行移动操作
this.$nextTick(() => {
this.currentIndex = nVal;
this.scrollByIndex();
});
}
},
},
computed: {
// 移动bar的样式
tabBarStyle() {
let style = {
width: this.barWidth + 'rpx',
transform: `translate(${this.scrollBarLeft}px, -100%)`,
// 滑块在页面渲染后第一次滑动时，无需动画效果
'transition-duration': `${this.barFirstTimeMove ? 0 : this.duration }s`,
'background-color': this.activeColor,
height: this.barHeight + 'rpx',
opacity: this.barFirstTimeMove ? 0 : 1,
// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现
'border-radius': `${this.barHeight / 2}px`
};
Object.assign(style, this.barStyle);
return style;
},
// tab的样式
tabItemStyle() {
return (index) => {
let style = {
height: this.height + 'rpx',
'line-height': '33rpx',
'font-size': this.fontSize + 'rpx',
'transition-duration': `${this.duration}s`,
padding: this.isScroll ? `0 ${this.gutter}rpx` : '',
flex: this.isScroll ? 'auto' : '1',
width: this.$u.addUnit(this.itemWidth)
};
// 字体加粗
if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
if (index == this.currentIndex) {
style.color = this.activeColor;
// 给选中的tab item添加外部自定义的样式
style = Object.assign(style, this.activeItemStyle);
} else {
style.color = this.inactiveColor;
}
return style;
}
}
},
methods: {
// 设置一个init方法，方便多处调用
async init() {
// 获取tabs组件的尺寸信息
let tabRect = await this.$uGetRect('#' + this.id);
// tabs组件距离屏幕左边的宽度
this.parentLeft = tabRect.left;
// tabs组件的宽度
this.componentWidth = tabRect.width;
this.getTabRect();
},
// 点击某一个tab菜单
clickTab(index) {
// 点击当前活动tab，不触发事件
if (index == this.currentIndex) return;
// 发送事件给父组件
this.$emit('change', index);
},
// 查询tab的布局信息
getTabRect() {
// 创建节点查询
let query = uni.createSelectorQuery().in(this);
// 历遍所有tab，这里是执行了查询，最终使用exec()会一次性返回查询的数组结果
for (let i = 0; i < this.list.length; i++) {
// 只要size和rect两个参数
query.select(`#u-tab-item-${i}`).fields({
size: true,
rect: true
});
}
// 执行查询，一次性获取多个结果
query.exec(
function(res) {
this.tabQueryInfo = res;
// 初始化滚动条和移动bar的位置
this.scrollByIndex();
}.bind(this)
);
},
// 滚动scroll-view，让活动的tab处于屏幕的中间位置
scrollByIndex() {
// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
let tabInfo = this.tabQueryInfo[this.currentIndex];
if (!tabInfo) return;
// 活动tab的宽度
let tabWidth = tabInfo.width;
// 活动item的左边到tabs组件左边的距离，用item的left减去tabs的left
let offsetLeft = tabInfo.left - this.parentLeft;
// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
let scrollLeft = offsetLeft - (this.componentWidth - tabWidth) / 2;
this.scrollLeft = scrollLeft < 0 ? 0 : scrollLeft;
// 当前活动item的中点点到左边的距离减去滑块宽度的一半，即可得到滑块所需的移动距离
let left = tabInfo.left + tabInfo.width / 2 - this.parentLeft;
// 计算当前活跃item到组件左边的距离
this.scrollBarLeft = left - uni.upx2px(this.barWidth) / 2;
// 第一次移动滑块的时候，barFirstTimeMove为true，放到延时中将其设置false
// 延时是因为scrollBarLeft作用于computed计算时，需要一个过程需，否则导致出错
if (this.barFirstTimeMove == true) {
setTimeout(() => {
this.barFirstTimeMove = false;
}, 100)
}
}
},
mounted() {
this.init();
}
};
</script>
<style lang="scss" scoped>
// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
@mixin vue-flex($direction: row) {
/* #ifndef APP-NVUE */
display: flex;
flex-direction: $direction;
/* #endif */
}
.u-tabs {
padding: 20rpx 0;
-webkit-overflow-scrolling: touch;
}
view,
scroll-view {
box-sizing: border-box;
}
/* #ifndef APP-NVUE */
::-webkit-scrollbar,
::-webkit-scrollbar,
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
/* #endif */
.u-scroll-box {
position: relative;
/* #ifdef MP-TOUTIAO */
white-space: nowrap;
/* #endif */
}
/* #ifdef H5 */
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
scroll-view ::v-deep ::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
/* #endif */
.u-scroll-view {
width: 100%;
white-space: nowrap;
position: relative;
}
.u-tab-item {
position: relative;
/* #ifndef APP-NVUE */
display: inline-block;
/* #endif */
text-align: center;
transition-property: background-color, color;
}
.u-tab-bar {
position: absolute;
bottom: 0;
}
.u-tabs-scorll-flex {
@include vue-flex;
justify-content: space-between;
}
</style>

BIN
static/192x192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
static/chaxun.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 KiB

BIN
static/cp.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

BIN
static/dingdan.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/fuli.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
static/gd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
static/head.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
static/hlz.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
static/home.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
static/huijiantou.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 316 B

BIN
static/jjhl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.4 KiB

BIN
static/jkzx.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
static/kefu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
static/kefuzx.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
static/lifeserve.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
static/locatinsmall.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 990 B

BIN
static/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
static/order.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/pb.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

BIN
static/person.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

BIN
static/phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 901 B

BIN
static/shoping.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/shopingw.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 834 B

BIN
static/shopping.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

BIN
static/sp.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
static/user.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/yiliaohuli.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 47 KiB

BIN
static/ylfw.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

BIN
static/yuyue.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
static/yyss.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

BIN
static/zbgl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
static/zhuanjia.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 KiB

BIN
static/znsb.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/zs.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB