Files
xk-client-wx/pages/home/home.vue
2024-09-19 12:51:35 +08:00

1025 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="content safe-area-inset-bottom">
<view class="head">
<!-- 门店 -->
<view class="store" @click="toStore">
{{infoList.store['name'] || storeinfo[0].store['name'] || info.name || ''}}
<text class="iconfont icon-qiehuan"></text>
</view>
<!-- 定位 -->
<view class="area">
<view class="place">
<text class="iconfont icon-dizhi"></text>
{{infoList.store['position'] || storeinfo[0].store.position || info.position || ''}}
</view>
<!-- <view class="place" @click="toSee">
<text class="iconfont icon-saoyisao" style="font-size: 30rpx;"></text>
扫一扫
</view> -->
</view>
<!-- 搜索 -->
<!-- <view class="search">
<u-search placeholder="请输入商品名称" bg-color="#fff" border-color="#F8FAFC" :show-action="false"
:clearabled="true" shape="round" :disabled="true" @click="tosearch"></u-search>
</view> -->
</view>
<!-- 图片展示 -->
<view class="section">
<u-swiper :list="list" :img-mode="aspectFill" :height="300" :interval="4000" @click="toBanner"></u-swiper>
<!-- <image class="banner" mode="aspectFill" src="/static/home/banner.png"></image> -->
</view>
<!-- 导航栏 v-if="isShow_envVersion==false" -->
<view class="nav" v-if="isShow_envVersion==false">
<view class="nav_service" @click="goYard">
<view class="nav_service_img">
<image src="../../static/home/bg1.png" mode=""></image>
</view>
<view class="nav_service_title">
到店挂号
</view>
</view>
<view class="nav_service" @click="golist">
<view class="nav_service_img">
<image src="../../static/home/bg2.png" mode=""></image>
</view>
<view class="nav_service_title">
线上复诊
</view>
</view>
</view>
<view class="doctor_list" v-if="isShow_envVersion==false" @click="goYard">
医生列表
<view class="info">
更多 <text class="iconfont icon-jiantou1"></text>
</view>
</view>
<view class="doctor_list" v-if="isShow_envVersion" @click="goShop">
商品列表
<view class="info">
更多 <text class="iconfont icon-jiantou1"></text>
</view>
</view>
<!-- 医生列表 -->
<view class="" v-if="isShow_envVersion==false">
<view class="list" @click="goLookDoctor(item.id)" v-for="(item,index) in doctorList" :key="item.id">
<!-- 图片部分 -->
<view class="list_info">
<view class="list_left">
<image :src="item.avatar || '/static/mine/avatar_1.png'" mode="医生头像"></image>
<!-- 医生 -->
<view class="list_title">
<view class="titles_name">
<text class="doctor_name">{{item.name}}</text>
<text class="doctors">{{item.title}}</text>
</view>
<!-- 职称 -->
<view class="list_yard">
{{item.store}} &nbsp; {{item.depart}}
</view>
</view>
</view>
<!-- <view class="list_right" @click="goLookDoctor(item.id)">咨询</view> -->
</view>
<!-- 文字部分 -->
<view class="card">
<!-- 擅长 -->
<view class="list_going">
擅长{{item.good_at}}
</view>
<!-- 接诊率 -->
<view class="list_nums">
<view class="txt">问诊量 <text>{{item.inquiry_num }}</text></view>
<view class="txt">接诊率 <text>{{item.accept_percent}}</text></view>
<!-- <view class="txt">综合评分 <text>{{item.overall_score}}</text></view> -->
</view>
<!-- 价格 -->
<!-- <view class="list_price">
<view class="picture">
<text>{{item.service.image_price || '图文¥20'}}</text>
</view>
<view class="picture">
<text>{{item.service.video_price || '视频¥95'}}</text>
</view>
</view> -->
</view>
</view>
</view>
<view class="lists" v-if="isShow_envVersion">
<!-- 图片部分 -->
<!-- <view class="list_lefts" v-for="(item,index) in shopList" :key="item.id">
<image :src="item.image||'https://p3.maiyaole.com/img/971/971752/org_org.jpg?v=1'" mode=""></image>
<view class="its">
<view class="it_names">{{item.name}}</view>
<view class="it_infos">{{item.desc}}</view>
<view class="it_prices">
<text>{{item.price}}</text>
<text class="nums">x{{item.num}}</text>
</view>
</view>
</view> -->
<view class="list_info">
<view class="list_left">
<image src="https://p3.maiyaole.com/img/971/971752/org_org.jpg?v=1" mode=""></image>
<view class="it">
<view class="it_name">日康对乙酰氨基酚片0.3g*12*2/</view>
<view class="it_info">清热解毒,咽喉肿痛,牙痛</view>
<view class="it_price">
<text>34.00</text>
<text class="num">x1</text>
</view>
</view>
</view>
</view>
<view class="list_info">
<view class="list_left" @click="goList(2)">
<image src="https://p2.maiyaole.com/img/item/202210/24/202210241042513.jpg" mode=""></image>
<view class="it">
<view class="it_name">同仁堂 六味地黄丸(浓缩丸) 200/</view>
<view class="it_info">滋阴补肾用于阴肾亏损头晕耳鸣腰膝酸软骨蒸潮热盗汗遗精</view>
<view class="it_price">
<text>22.00</text>
<text class="num">x1</text>
</view>
</view>
</view>
</view>
</view>
<!-- 遮罩层 -->
<view class="bg-" v-if="bgShow" @click="bgShow=false">
<image src="/static/home/bg.png" mode=""></image>
</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
doctorList,
getBanner,
getToken,
storeChange,
storeInfo,
storeList
} from '../../request/api/api'
export default {
data() {
return {
storeinfo: [],
doctorList: [],
show: true,
showed: false,
shopList: {},
flag: false, //防止多次点击
headerTitle: "", // 标题
infoList: "", // 扫码 门店
list: [
// '/static/home/banner.png',
// '/static/home/banner.png',
// '/static/home/banner.png'
],
info: [],
bgShow: false,
isShow_envVersion: true
}
},
onLoad() {
setInterval(() => {
this.isShow_envVersion = uni.getStorageSync('isShow_envVersion')
}, 500)
},
created() {
const token = uni.getStorageSync('token')
const userInfo = uni.getStorageSync('userinfo')
if (!token || !userInfo) {
// console.log('token');
// if (this.isShow_envVersion) {
// uni.navigateTo({
// url: '/pages/home/index'
// })
// } else {
// uni.navigateTo({
// url: '/pages/login/login'
// })
// }
uni.navigateTo({
url: '/pages/home/index'
})
}
},
onReady() {
if (uni.getStorageSync('stores_id')) {
this.getStore();
} else {
this.goNewlist()
}
uni.setNavigationBarTitle({
title: this.headerTitle,
success() {
console.log(1111);
}
});
uni.setNavigationBarColor({
frontColor: '#000000', //前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000
})
},
methods: {
goYard() {
//订阅消息
uni.requestSubscribeMessage({
tmplIds: ['JdSs08cMSiL17xwwHZ8fZ5UBUqeY0eKAuvyW7n4Fl20',
'OERMugiahk-aKRVH9GHmdJCRBE3yldzEKTzbMCJhY6U',
'p-Ix0uIuwPKxm-_yKDlI8mkI-niUgPtaMUZyAaa5vvA'
],
complete: (res) => {
// console.log(res, 'xxxxxxxxxxxx');
uni.navigateTo({
url: '/pages/Inquiries/Inquiries?type=' + 1
})
}
})
},
goShop() {
uni.switchTab({
url: '/pages/cate/cate'
})
},
// 线上复诊
golist() {
// this.bgShow = true
let that = this
if (!this.flag) {
this.getH5()
this.flag = true
uni.showLoading({
title: "加载中"
});
setTimeout(() => {
uni.hideLoading();
if (uni.getStorageSync('token_platform_id')) {
uni.navigateTo({
url: '/subPackages/my/my_online',
success: () => {
setTimeout(() => {
that.flag = false;
}, 200)
uni.hideLoading();
},
fail: () => {
setTimeout(() => {
that.flag = false;
}, 200)
uni.hideLoading();
}
})
}
}, 600)
}
},
getH5() {
// 进入token
getToken({
method: "post",
data: {
user_id: uni.getStorageSync('user_id'),
avatarurl: uni.getStorageSync('userinfo')['avatarurl'],
mobile: uni.getStorageSync('userinfo')['mobile'],
nickname: uni.getStorageSync('userinfo')['nickname'],
openid: uni.getStorageSync('userinfo')['openid'],
session_key: uni.getStorageSync('userinfo')['session_key'],
store_id: uni.getStorageSync('stores_id') || '11001',
},
}).then((res) => {
if (res.data.errcode == 0) {
console.log(res.data.data.token, 'h5-token');
// uni.setStorageSync('platform_id', res.data.data.platform_id)
uni.setStorageSync('token_platform_id', res.data.data.token)
} else {
this.$refs.uToast.show({
title: res.data.msg,
type: 'default',
icon: false
})
}
})
},
tosearch() {
uni.navigateTo({
url: '/subPackages/shop/search-home'
})
},
toStore() {
uni.navigateTo({
url: '/subPackages/my/mystore'
})
},
goLookDoctor(id, sts_id) {
if (!sts_id) {
let sts_id = uni.getStorageSync('stores_id') || uni.getStorageSync('store_id')
}
setTimeout(() => {
//订阅消息
uni.requestSubscribeMessage({
tmplIds: ['JdSs08cMSiL17xwwHZ8fZ5UBUqeY0eKAuvyW7n4Fl20',
'OERMugiahk-aKRVH9GHmdJCRBE3yldzEKTzbMCJhY6U',
'p-Ix0uIuwPKxm-_yKDlI8mkI-niUgPtaMUZyAaa5vvA'
],
complete: (res) => {
// console.log(res, 'xxxxxxxxxxxx');
uni.navigateTo({
url: '/subPackages/doctor/doctor-detail?store_id=' + sts_id +
'&id=' + id
})
}
})
}, 200)
},
// 扫码
// toSee() {
// uni.scanCode({
// success: function(res) {
// // console.log('条码类型:' + res.scanType);
// // console.log('条码内容:' + res.result);
// uni.showToast({
// title: '扫码成功',
// duration: 2000,
// icon: "success"
// });
// },
// });
// },
// 门店
getStore() {
if (uni.getStorageSync('stores_id')) {
this.show = false
storeInfo({
method: "post",
data: {
store_id: uni.getStorageSync('stores_id') || '11001',
}
}).then((res) => {
// console.log(res, 'info');
if (res.data.errcode == 0) {
this.infoList = res.data.data
this.headerTitle = res.data.data.store['name']
uni.setNavigationBarTitle({
title: this.headerTitle,
success() {
console.log(7777);
},
fail() {
console.log(77888);
this.getStore()
}
});
uni.setNavigationBarColor({
frontColor: '#000000', //前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000
})
this.getList();
this.getBannered();
}
})
} else {
this.goNewlist()
}
},
goNewlist() {
storeList({
method: "post",
data: {
store_id: uni.getStorageSync('store_id') || '11001',
}
}).then((res) => {
// console.log(res, 'list');
if (res.data.errcode == 0) {
this.show = res.data.data.open_issue
this.showed = this.show
if (this.isShow_envVersion) {
this.shopList = res.data.data.list
this.getBannered();
} else {
this.storeinfo = res.data.data.list.filter((item) => item.is_online == 1)
uni.setStorageSync('store_id', this.storeinfo[0].store.id)
this.headerTitle = this.storeinfo[0].store['name']
uni.setNavigationBarTitle({
title: this.headerTitle,
success() {
console.log(3333);
}
});
uni.setNavigationBarColor({
frontColor: '#000000', //前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000
})
this.getList();
this.getBannered();
}
} else {
// uni.removeStorageSync('token')
if (this.isShow_envVersion) {
uni.navigateTo({
url: '/pages/home/index'
})
} else {
uni.navigateTo({
url: '/pages/login/login'
})
}
}
})
},
goList(id) {
uni.navigateTo({
url: '/pages/home/index-list?type=' + 1 + '&id?=' + id
})
},
// 医生列表
getList() {
doctorList({
method: "post",
data: {
store_id: uni.getStorageSync('stores_id') || uni.getStorageSync('store_id') || '11001',
}
}).then((res) => {
// console.log(res, 'list');
if (res.data.errcode == 0) {
this.doctorList = (res.data.data.list).slice(0, 3)
}
})
},
// 切换门店
toChang(e) {
// console.log(e, 'id');
storeChange({
method: "post",
data: {
store_id: e
}
}).then((res) => {
if (res.data.errcode == 0) {
this.getStore()
uni.showToast({
title: '切换成功',
duration: 2000,
icon: "success"
});
}
})
},
// 门店详情--轮播图
getBannered() {
getBanner({
method: "post",
data: {
store_id: uni.getStorageSync('stores_id') || uni.getStorageSync('store_id') || '11001',
}
}).then((res) => {
console.log(res, 'info');
if (res.data.errcode == 0) {
this.info = res.data.data
this.urlInfo = res.data.data.nav
this.list = (res.data.data.nav).map((item) => {
return item.pic
})
}
})
},
toBanner(e) {
if (!this.urlInfo[e].external_link) {
return
}
if (this.urlInfo[e].link_type == 1 && isShow_envVersion == false) {
// 内部
uni.navigateTo({
url: this.urlInfo[e].external_link,
success() {
// console.log(this.urlInfo[e].external_link, 'aaaaaaaaaa');
}
})
} else {
// link_type==2 外部
uni.navigateTo({
url: '/pages/home/home-banner?id=' + this.urlInfo[e].external_link,
success() {
// console.log(this.urlInfo[e].external_link, 'aaaaaaaaaa');
}
})
}
}
},
mounted() {
const token = uni.getStorageSync('token')
const id = uni.getStorageSync('stores_id')
const d_id = uni.getStorageSync('doctors_id')
const d_store = uni.getStorageSync('st_id')
if (token && id) {
console.log('门店码');
this.toChang(id)
}
if (d_id && token && d_store) {
this.goLookDoctor(d_id, d_store)
}
},
onShow() {
this.infoList = ""
this.goNewlist()
},
// onUnload() {
// this.infoList = ""
// }
}
</script>
<style lang="scss" scoped>
.content {
background-color: #fff;
width: 750rpx;
max-height: 100%;
min-height: 100vh;
padding-bottom: env(safe-area-inset-bottom);
position: relative;
.bg- {
min-width: 100vw;
min-height: 100vh;
background: rgba(0, 0, 0, 0.46);
text-align: center;
position: absolute;
left: 0;
top: 0;
image {
width: 510rpx;
height: 621rpx;
vertical-align: middle;
margin: 200rpx auto 0;
}
}
.head {
width: 750rpx;
height: 390rpx;
padding: 20rpx;
background: linear-gradient(180deg, #298DFF 0%, #9ECBFF 70%, #FFFFFF 100%);
.search {
width: 710rpx;
margin: 20rpx auto 0;
}
.store {
width: 700rpx;
height: 78rpx;
line-height: 78rpx;
font-size: 28rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #FFFFFF;
margin: 0rpx auto 0rpx;
.iconfont {
font-size: 27rpx;
color: #fff;
margin-left: 16rpx;
}
}
.area {
width: 700rpx;
height: 64rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0rpx auto;
.place {
font-size: 26rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 500;
color: #FFFFFF;
.iconfont {
font-size: 25rpx;
color: #FFFFFF;
margin-right: 10rpx;
}
}
}
}
.section {
width: 710rpx;
margin: -180rpx auto 30rpx;
height: 300rpx;
.banner {
width: 100%;
height: 100%;
}
}
.nav {
width: 710rpx;
background: #FFFFFF;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin: 30rpx auto;
.nav_service {
width: 348rpx;
height: 178rpx;
display: flex;
align-items: center;
justify-content: space-around;
background: url('/static/home/bg01.png') no-repeat;
background-size: 100% 100%;
.nav_service_img {
width: 116rpx;
height: 116rpx;
vertical-align: middle;
image {
width: 100%;
height: 100%;
}
}
.nav_service_title {
font-size: 40rpx;
font-family: PingFang SC-Heavy, PingFang SC;
font-weight: 800;
color: #FFFFFF;
}
}
.nav_service:last-child {
background: url('/static/home/bg02.png') no-repeat;
background-size: 100% 100%;
}
}
.doctor_list {
width: 710rpx;
font-size: 36rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #232323;
margin: 44rpx auto 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
.info {
font-size: 28rpx;
font-weight: 500;
color: #666666;
}
}
.list {
width: 710rpx;
background: linear-gradient(180deg, #E2F1FF 0%, #FBFDFF 54%, #FFFFFF 100%);
border-radius: 16rpx;
padding: 12rpx 30rpx 22rpx;
margin: 32rpx auto 52rpx;
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
.list_info {
display: flex;
justify-content: space-between;
.list_left {
height: 96rpx;
display: flex;
align-items: center;
justify-content: space-around;
image {
width: 96rpx;
height: 96rpx;
border-radius: 50%;
margin: 0 16rpx 0 0;
vertical-align: middle;
}
.list_title {
display: flex;
flex-direction: column;
.titles_name {
margin: 16rpx 0;
.doctor_name {
height: 40rpx;
font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #232323;
line-height: 40rpx;
margin-right: 16rpx;
}
.doctors {
height: 40rpx;
font-size: 20rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #232323;
line-height: 40rpx;
}
}
.list_yard {
font-size: 24rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
}
}
.list_right {
width: 88rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
background: #4175EE;
border-radius: 26rpx 26rpx 26rpx 26rpx;
font-size: 24rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #FFFFFF;
}
}
.card {
.list_nums {
height: 34rpx;
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 500;
color: #666666;
margin: 18rpx 0 24rpx;
display: flex;
align-items: center;
.txt {
margin-right: 30rpx;
text {
font-size: 28rpx;
color: #FEA54C;
margin: 0 10rpx;
}
}
}
.list_going {
font-size: 24rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #232323;
line-height: 44rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
margin: 16rpx auto;
}
.list_price {
display: flex;
align-items: center;
.picture {
width: 140rpx;
height: 60rpx;
line-height: 58rpx;
text-align: center;
border-radius: 4rpx 4rpx 4rpx 4rpx;
border: 2rpx solid #4175EE;
font-size: 24rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #4175EE;
margin: 0 30rpx 0 0;
}
}
}
}
.list_lefts {
display: flex;
justify-content: space-around;
margin: 32rpx 12rpx;
image {
width: 200rpx;
height: 200rpx;
margin-right: 20rpx;
}
.its {
width: 450rpx;
font-family: PingFang SC-Regular, PingFang SC;
.it_names {
height: 80rpx;
font-size: 28rpx;
font-weight: bold;
color: #232323;
}
.it_infos {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
font-size: 24rpx;
font-weight: 400;
color: #999999;
margin: 12rpx 0 34rpx 0;
}
.it_prices {
display: flex;
justify-content: space-between;
align-items: center;
text {
font-size: 28rpx;
font-weight: bold;
color: #232323;
}
.nums {
font-size: 28rpx;
font-weight: 400;
color: #232323;
}
}
}
}
.lists {
width: 710rpx;
background: linear-gradient(180deg, #E2F1FF 0%, #FBFDFF 54%, #FFFFFF 100%);
border-radius: 16rpx;
padding: 30rpx;
margin: 32rpx auto 52rpx;
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
.list_left {
display: flex;
justify-content: space-around;
margin-bottom: 22rpx;
image {
width: 200rpx;
height: 200rpx;
margin-right: 20rpx;
}
.it {
width: 450rpx;
font-family: PingFang SC-Regular, PingFang SC;
.it_name {
height: 80rpx;
font-size: 28rpx;
font-weight: bold;
color: #232323;
}
.it_info {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
font-size: 24rpx;
font-weight: 400;
color: #999999;
margin: 12rpx 0 34rpx 0;
}
.it_price {
display: flex;
justify-content: space-between;
align-items: center;
text {
font-size: 28rpx;
font-weight: bold;
color: #232323;
}
.num {
font-size: 28rpx;
font-weight: 400;
color: #232323;
}
}
}
}
.card {
.list_nums {
height: 34rpx;
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 500;
color: #666666;
margin: 18rpx 0 24rpx;
display: flex;
align-items: center;
.txt {
margin-right: 30rpx;
text {
font-size: 28rpx;
color: #FEA54C;
margin: 0 10rpx;
}
}
}
.list_going {
font-size: 24rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #232323;
line-height: 44rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
margin: 16rpx auto;
}
.list_price {
display: flex;
align-items: center;
.picture {
width: 140rpx;
height: 60rpx;
line-height: 58rpx;
text-align: center;
border-radius: 4rpx 4rpx 4rpx 4rpx;
border: 2rpx solid #4175EE;
font-size: 24rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #4175EE;
margin: 0 30rpx 0 0;
}
}
}
}
}
</style>