393 lines
8.0 KiB
Vue
393 lines
8.0 KiB
Vue
<template>
|
|
<view>
|
|
<view class="app">
|
|
<view class="righttext">
|
|
<image class="picture" src="../../static/mentoutu.png"></image>
|
|
<view class="title">
|
|
{{list.nurseStationName}}
|
|
</view>
|
|
<view class="address">{{list.address}} </view>
|
|
<view class="callme" @tap="gophone()">
|
|
<u-icon name="phone-fill" color="#ffffff" size="28"></u-icon>
|
|
联系我们
|
|
</view>
|
|
<view class="Navigation">
|
|
<image src="/static/daohang.png" mode="">导航</image>
|
|
</view>
|
|
</view>
|
|
<view class="detail">
|
|
<view class="Introduction">机构简介</view>
|
|
<view class="textInfo">
|
|
{{list.agencyIntroduce}}
|
|
</view>
|
|
</view>
|
|
<view class="Nursestationconfiguration">
|
|
<view class="configuration">
|
|
护理站配置
|
|
<view class="config" v-for="(item,index) in nurseStationLabelList" :key="index">
|
|
<view class="measure">
|
|
<text>{{item.labelDescription}}</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tive">
|
|
<view class="tab-box">
|
|
<view class="tab-item" @tap="testTabClick(index)" :class="tabIndex == index?'active':''"
|
|
v-for="(item,index) in tabList" :key="index">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
<view class="item" v-for="(item,index) in servelist" :key="index" v-show='choicetab==false'>
|
|
<image src="../../static/fuwutu.png"></image>
|
|
<view class="huanyao">{{item.nurseItemName}}
|
|
<view class="pingfen">
|
|
<u-rate :count="5" value="2"></u-rate>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="servicetime">服务时长:{{item.serveDurationUnit}}</view>
|
|
<view class="appointment" @tap='goappointments(item)'>预约</view>
|
|
<view class="price">￥{{item.price}}</view>
|
|
</view>
|
|
|
|
<view class="item" v-show='choicetab' v-for="(item,index) in productlist" :key="index">
|
|
<view>
|
|
<image src="../../static/fuwutu.png"></image>
|
|
</view>
|
|
<view class="product">{{item.goodsName}}</view>
|
|
<view class="appointment">购买</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
introductionList,
|
|
itemList,
|
|
productInformation,
|
|
|
|
} from '@/api/nursestation/nursestation.js';
|
|
import baseurl from '@/api/baseurl.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
choicetab: false, //切换
|
|
list: [],
|
|
servelist: [], //服务项目
|
|
productlist: [], //产品
|
|
stationid: '', //护理站id
|
|
nurseStationId: 2,
|
|
nurseStationLabelList: [], //护理站配置
|
|
nearbyNursingStationItemList: [],
|
|
patientId: 46,
|
|
pageNum: 1,
|
|
stationId: 2,
|
|
stationItemId: 2,
|
|
stationItemPriceId: 3,
|
|
pageSize: 10,
|
|
tabIndex: 0,
|
|
tabList: [{
|
|
name: "服务项目"
|
|
}, {
|
|
name: "产品"
|
|
}, ]
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getInfo(),
|
|
this.serveinfo(),
|
|
this.productinfo()
|
|
},
|
|
methods: {
|
|
//
|
|
goappointments(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/appointmenttime/appointmenttime?stationId=${item.stationId}&stationItemId=${item.stationItemId}&stationItemPriceId=${item.stationItemPriceId}`,
|
|
|
|
})
|
|
},
|
|
getInfo() {
|
|
introductionList(this.nurseStationId).then(res => {
|
|
this.list = res[0]
|
|
this.nurseStationLabelList = res[0].nurseStationLabelList
|
|
// this.nearbyNursingStationItemList = res[0].nearbyNursingStationItemList
|
|
console.log(this.nurseStationLabelList);
|
|
})
|
|
},
|
|
serveinfo() {
|
|
itemList(this.nurseStationId, this.pageSize, this.pageNum).then(res => {
|
|
this.servelist = res.rows
|
|
console.log(this.servelist)
|
|
})
|
|
},
|
|
productinfo() {
|
|
productInformation(this.nurseStationId, this.pageNum, this.pageSize).then(res => {
|
|
this.productlist = res.rows
|
|
console.log(this.productlist)
|
|
})
|
|
},
|
|
testTabClick(index) {
|
|
console.log(index)
|
|
this.tabIndex = index
|
|
this.choicetab = !this.choicetab
|
|
}
|
|
},
|
|
|
|
gophone() {
|
|
var that = this
|
|
uni.getSystemInfo({
|
|
success: function(res) {
|
|
// console.log(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.phone //仅为示例
|
|
});
|
|
}
|
|
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
|
|
},
|
|
fail: function(res) {
|
|
// console.log(res.errMsg);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
//全局
|
|
.app {
|
|
font-size: 36rpx;
|
|
padding-top: 10rpx;
|
|
.tive {
|
|
width: 94%;
|
|
background-color: #ffffff;
|
|
margin: 0 auto;
|
|
margin-top: 3%;
|
|
border-radius: 11px;
|
|
|
|
.item {
|
|
width: 99%;
|
|
height: 184rpx;
|
|
|
|
image {
|
|
width: 170rpx;
|
|
height: 170rpx;
|
|
margin-left: 3%;
|
|
}
|
|
|
|
.servicetime {
|
|
color: #999999;
|
|
line-height: 37rpx;
|
|
margin-left: 35%;
|
|
}
|
|
|
|
.appointment {
|
|
width: 125rpx;
|
|
height: 71rpx;
|
|
background: #4C7BC9;
|
|
border-radius: 26rpx;
|
|
float: right;
|
|
margin-top: -5%;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
line-height: 71rpx;
|
|
}
|
|
|
|
.price {
|
|
color: red;
|
|
font-size: 32rpx;
|
|
margin-top: 3%;
|
|
margin-left: 35%;
|
|
}
|
|
|
|
.product {
|
|
margin-top: -26%;
|
|
margin-left: 28%;
|
|
}
|
|
|
|
.huanyao {
|
|
margin-left: 35%;
|
|
margin-top: -24%;
|
|
color: #000000;
|
|
|
|
.pingfen {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.tab-box {
|
|
display: flex;
|
|
|
|
.tab-item {
|
|
flex-shrink: 0;
|
|
padding: 3%;
|
|
position: relative;
|
|
transition: all 0.2s linear;
|
|
font-size: 31rpx;
|
|
|
|
&::after {
|
|
transition: all 0.2s linear;
|
|
transform: translateX(-50%) scaleX(0);
|
|
content: '';
|
|
width: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 20rpx;
|
|
border-bottom: 6rpx solid #D43953;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
&.active {
|
|
&::after {
|
|
content: '';
|
|
width: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%) scaleX(1);
|
|
bottom: 20rpx;
|
|
border-bottom: 6rpx solid red;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.Nursestationconfiguration {
|
|
width: 94%;
|
|
height: 184rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin: 0 auto;
|
|
|
|
.configuration {
|
|
font-size: 31rpx;
|
|
color: #333333;
|
|
line-height: 12rpx;
|
|
padding: 6%;
|
|
margin-left: -3%;
|
|
margin-top: 3%;
|
|
|
|
.config {
|
|
display: flex;
|
|
|
|
.measure {
|
|
background: #F6F6F6;
|
|
border-radius: 33rpx;
|
|
text-align: center;
|
|
line-height: 67rpx;
|
|
display: inline-block;
|
|
margin-left: 5%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.detail {
|
|
position: relative;
|
|
width: 94%;
|
|
height: 443rpx;
|
|
margin: 0 auto;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin-top: 3%;
|
|
font-size: 31rpx;
|
|
padding: 3%;
|
|
|
|
.textInfo {
|
|
font-size: 29rpx;
|
|
text-indent: 2rem;
|
|
line-height: 42rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.Introduction {
|
|
font-size: 31rpx;
|
|
color: #333333;
|
|
line-height: 12rpx;
|
|
margin-left: -3%;
|
|
padding: 3%;
|
|
}
|
|
}
|
|
|
|
.righttext {
|
|
position: relative;
|
|
width: 94%;
|
|
height: 252rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
margin: 10px auto;
|
|
|
|
.picture {
|
|
position: absolute;
|
|
width: 170rpx;
|
|
height: 170rpx;
|
|
margin-left: 5%;
|
|
margin-top: 5%;
|
|
}
|
|
|
|
.Navigation {
|
|
width: 103rpx;
|
|
height: 48rpx;
|
|
background: #00C176;
|
|
border-radius: 24px;
|
|
font-size: 21rpx;
|
|
color: #ffffff;
|
|
line-height: 48rpx;
|
|
margin-left: 60%;
|
|
text-align: center;
|
|
margin-top: -6%;
|
|
image {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
}
|
|
.callme {
|
|
width: 149rpx;
|
|
height: 48rpx;
|
|
background: #D43953;
|
|
border-radius: 24px;
|
|
font-size: 21rpx;
|
|
color: #ffffff;
|
|
line-height: 48rpx;
|
|
margin-left: 35%;
|
|
margin-top: 3%;
|
|
text-align: center;
|
|
}
|
|
.title {
|
|
margin-left: 35%;
|
|
line-height: 49px;
|
|
font-size: 33rpx;
|
|
}
|
|
.address {
|
|
font-size: 25rpx;
|
|
margin-left: 35%;
|
|
color: #999999;
|
|
line-height: 37rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|