nurseWeChatAppletUI/pages/nursestation/nursestation.vue
2023-05-22 15:54:07 +08:00

537 lines
16 KiB
Vue

<template>
<view class="app">
<!-- 轮播图 -->
<swiper :indicator-dots="true" indicator-color='#fff' indicator-active-color='#0086d6' :autoplay="autoplay"
:interval="2000" :duration="1000" 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}" @tap='goswiper(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>
<!-- <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">
<view class="title" v-if="list.nurseStationName">
{{list.nurseStationName}}
</view>
<view class="title" v-else>
暂无
</view>
<view class="time">
<view class="text">
{{list.businessStatus}}
</view>
<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" v-if="distance!=null">
{{distance}}KM
</view>
</view>
<view class="address" v-else>
<image src="../../static/locatinsmall.png" mode=""></image>
<view class="text">
暂无
</view>
<view class="distance" v-if="distance!=null">
{{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(item)" v-for="(item,index) in tabLists" :key="index"
:class="tabIndex == index?'active':''">
{{item.name}}
</view>
</view>
<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" @click.stop='goappointments(item)'>预约</view>
<view class="price">¥{{item.nurseItemPrice==null?'0':item.nurseItemPrice}}</view>
</view>
</view>
<view class="noorder" v-if='servelist.length==0&&choicetab==false'>
<u-empty mode="list" icon-size='220' text='暂无服务项目'></u-empty>
</view>
<view class="" v-if="productlist.length>0&&choicetab">
<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="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">
<u-empty mode="list" icon-size='220' text='暂无产品'></u-empty>
</view>
</view>
</view>
<u-mask :show="usershow" class='mask'>
<view class="information">
<image src="../../static/information.png" mode=""></image>
<view class="title">
请完善个人信息
</view>
<view class="cancel" @tap='usershow=false'>
取消
</view>
<view class="determine" @tap='goinformation'>
去完善
</view>
</view>
</u-mask>
<u-toast ref="uToast" />
<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
</template>
<script>
import {
AppIdentification
} from '@/api/AppIdentification/index.js'
import {
introductionList,
itemList,
productInformation,
} from '@/api/nursestation/nursestation.js';
import {
createMobileToken
} from '@/api/login/index.js'
import baseurl from '@/api/baseurl.js'
export default {
data() {
return {
swiperImglink: [], //sweiper跳转link
Banners: [], //轮播图
autoplay: true, //自动切换轮播图
videoContext: '',
baseurl: '',
usershow: false, //完善信息开关
choicetab: false, //切换
list: [], //护理站list
servelist: [], //服务项目
productlist: [], //产品
servetotal: 0, //服务项目total
producttotal: 0, //产品total
stationid: '', //护理站id
nurseStationLabelList: [], //护理站配置
nearbyNursingStationItemList: [],
nurseStationId: '',
pageNum: 1,
pageSize: 10,
tabList: [{
name: '全部',
id: ''
}], //分类标题
tabIndex: 0,
tabLists: [{
name: '服务项目',
id: 0,
},
{
name: '产品',
id: 1,
}
],
classifycurrent: 0, //分类下标
distance: null, //距离
nurseClassifyInfoId: '', //分类id
scrollTop: 0,
hospitalcare: false,
}
},
onShow() {
this.classifycurrent = 0
this.nurseClassifyInfoId = ''
this.baseurl = baseurl
this.usershow = false
this.getInfo()
},
onLoad(options) {
let that = this
this.nurseStationId = options.nurseStationId
this.hospitalcare = options.hospitalcare
// scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
if (options.scene) {
this.nurseStationId = decodeURIComponent(options.scene)
this.hospitalcare = true
if (this.nurseStationId) {
createMobileToken().then(res => {
uni.setStorageSync("token", res.data.token)
})
uni.setStorageSync("scenenurseStationId", this.nurseStationId)
}
}
},
methods: {
//跳转swiper
goswiper(item) {
this.swiperImglink.forEach(e => {
e.image = baseurl + e.posterPictureUrl
if (e.image == item) {
if (e.jumpLink == '/pages/homepage/homepage' || e.jumpLink == '/pages/Personal/Personal') {
uni.switchTab({
url: e.jumpLink
})
} else {
uni.navigateTo({
url: e.jumpLink
})
}
}
})
},
//跳转地图
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
}
},
// 处理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
this.serveinfo()
} else {
this.choicetab = true
this.productinfo()
}
},
//点击分类标题
change(index) {
this.classifycurrent = index;
this.nurseClassifyInfoId = this.tabList[index].id
this.serveinfo()
},
//预约
goappointments(item) {
let that = this
const value = uni.getStorageSync('openid');
const value2 = uni.getStorageSync('patientId');
if (value && value2) {
if (that.hospitalcare) {
const scenenurseStationId = uni.getStorageSync('scenenurseStationId');
// if (scenenurseStationId) {
uni.navigateTo({
url: `/pages/hospitalcare/hospitalcare?stationId=${item.stationId}&stationItemId=${item.stationItemId}&stationItemPriceId=${item.stationItemPriceId}`,
})
// } else {
// that.goAppIdentification(value2, item)
// }
} else {
that.goAppIdentification(value2, item)
}
} else {
that.$refs.uToast.show({
title: '未登录,请先登录',
type: 'error',
url: '/pages/login/login'
})
}
},
goAppIdentification(value, item) {
let that = this
AppIdentification(value).then(res => {
if (res.code == 200) {
if (res.data.loginFlag) {
that.usershow = false
uni.navigateTo({
url: `/pages/appointmenttime/appointmenttime?stationId=${item.stationId}&stationItemId=${item.stationItemId}&stationItemPriceId=${item.stationItemPriceId}`,
})
} else {
that.usershow = true
}
} else if (res.code == 9999) {} else {
that.$refs.uToast.show({
title: res.msg,
type: 'error',
url: '/pages/login/login'
})
}
})
},
getInfo() {
introductionList(this.nurseStationId).then(res => {
if (res.code == 200) {
this.distance = res.data.distance
this.Banners = []
this.tabList = [{
name: '全部',
id: ''
}]
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) {
this.swiperImglink = res.data.poserInfoList
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
}
}
})
},
serveinfo() {
this.pageNum = 1
itemList(this.nurseStationId, this.pageSize, this.pageNum, this.nurseClassifyInfoId).then(res => {
uni.removeStorageSync('Refresh');
res.rows.forEach(e => {
e.itemPictureUrl = baseurl + e.itemPictureUrl
})
this.servelist = res.rows
this.servetotal = res.total
})
},
productinfo() {
this.pageNum = 1
productInformation(this.nurseStationId, this.pageNum, this.pageSize).then(res => {
uni.removeStorageSync('Refresh');
res.rows.forEach(e => {
e.goodsPictureUrl = baseurl + e.goodsPictureUrl
})
this.productlist = res.rows
this.producttotal = res.total
})
},
//跳转商品详情页
goCommodityDetails(item) {
uni.navigateTo({
url: `/pages/CommodityDetails/CommodityDetails?goodsPrice=${item.goodsPrice}&goodsInfoId=${item.goodsInfoId}&buySource=${'NURSE_STATION'}&goodsAttributeId=${item.goodsAttributeId}`
})
},
//跳转完善页面
goinformation() {
this.usershow = false
uni.navigateTo({
url: '/pages/information/information'
})
},
goProjectDetails(item) {
uni.navigateTo({
url: `/pages/ProjectDetails/ProjectDetails?stationId=${item.stationId}&stationItemId=${item.stationItemId}&stationItemPriceId=${item.stationItemPriceId}`,
})
},
gophone() {
var that = this
uni.getSystemInfo({
success: function(res) {
if (res.platform == 'ios') {
uni.makePhoneCall({
phoneNumber: that.list.phone //仅为示例
});
} else {
uni.showActionSheet({
itemList: ['呼叫'],
success: function(res) {
if (res.tapIndex + 1 == 1) {
uni.makePhoneCall({
phoneNumber: that.list.dutyPhone //仅为示例
});
}
},
fail: function(res) {}
});
}
}
});
}
},
onReachBottom() { //上滑加载
if (!this.choicetab) {
if (this.servelist.length >= this.servetotal) {} else {
this.pageNum++
itemList(this.nurseStationId, this.pageSize, this.pageNum, this.nurseClassifyInfoId).then(res => {
res.rows.forEach(e => {
e.itemPictureUrl = baseurl + e.itemPictureUrl
this.servelist.push(e)
})
})
}
} else {
if (this.productlist.length >= this.producttotal) {} else {
this.pageNum++
productInformation(this.nurseStationId, this.pageNum, this.pageSize).then(res => {
res.rows.forEach(e => {
e.goodsPictureUrl = baseurl + e.goodsPictureUrl
this.productlist.push(e)
})
})
}
}
},
onPullDownRefresh() { //下拉刷新
this.pageNum = 1;
if (!this.choicetab) {
itemList(this.nurseStationId, this.pageSize, this.pageNum).then(res => {
res.rows.forEach(e => {
e.itemPictureUrl = baseurl + e.itemPictureUrl
})
this.servelist = res.rows
})
} else {
productInformation(this.nurseStationId, this.pageNum, this.pageSize).then(res => {
res.rows.forEach(e => {
e.goodsPictureUrl = baseurl + e.goodsPictureUrl
})
this.productlist = res.rows
})
}
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
//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,
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
}
</script>
<style lang="scss">
@import './nursestation.scss';
</style>