451 lines
9.9 KiB
Vue
451 lines
9.9 KiB
Vue
<template>
|
||
<view class="container safe-area-inset-bottom">
|
||
<MessageNotification />
|
||
<view class="card">
|
||
<image src="https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk-client-wx/static/empty/yhq.png" mode=""></image>
|
||
<view class="store">
|
||
<view class="name">
|
||
<text>当前门店</text>
|
||
{{ infoList.store && infoList.store.name }}
|
||
<u-tag
|
||
v-if="infoList.store"
|
||
:text="getStoreTypeLabel(infoList.store.type)"
|
||
:type="getStoreTypeTag(infoList.store.type)"
|
||
size="mini"
|
||
class="type-tag"
|
||
/>
|
||
</view>
|
||
<view class="info" v-if="infoList.store">
|
||
<text class="iconfont icon-icon-"></text>
|
||
营业时间 ：
|
||
{{ infoList.store.start_time }}-{{ infoList.store.end_time }}
|
||
</view>
|
||
<view class="info" v-if="infoList.store">
|
||
<text class="iconfont icon-tel"></text>
|
||
联系电话：
|
||
{{ infoList.store.mobile }}
|
||
</view>
|
||
<view class="info" v-if="infoList.store">
|
||
<text class="iconfont icon-shouhuodizhi"></text>
|
||
地址 ：
|
||
{{ infoList.store.position }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list">
|
||
<view class="title">
|
||
其他门店
|
||
</view>
|
||
|
||
<view class="tabs-wrap">
|
||
<u-tabs
|
||
:list="tabList"
|
||
:is-scroll="false"
|
||
:current="tabIndex"
|
||
@change="onTabChange"
|
||
></u-tabs>
|
||
</view>
|
||
|
||
<swiper
|
||
class="store-swiper"
|
||
:current="tabIndex"
|
||
@change="onSwiperChange"
|
||
>
|
||
<swiper-item v-for="(tab, tabIdx) in tabList" :key="tabIdx">
|
||
<scroll-view scroll-y class="store-scroll">
|
||
<view class="empty" v-if="getFilteredStores(tabIdx).length <= 0">
|
||
<image src="https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk-client-wx/static/empty/orders.png" mode="aspectFit"></image>
|
||
<text>暂无{{ tab.name }}信息</text>
|
||
</view>
|
||
|
||
<view
|
||
class="item"
|
||
:class="{ 'item-current': isCurrentStore(item.store.id) }"
|
||
@click="onStoreItemClick(item)"
|
||
v-for="item in getFilteredStores(tabIdx)"
|
||
:key="item.id"
|
||
>
|
||
<view class="name">
|
||
{{ item.store.name }}
|
||
<u-tag
|
||
v-if="isCurrentStore(item.store.id)"
|
||
text="当前"
|
||
type="info"
|
||
size="mini"
|
||
class="type-tag"
|
||
/>
|
||
<u-tag
|
||
:text="getStoreTypeLabel(item.store.type)"
|
||
:type="getStoreTypeTag(item.store.type)"
|
||
size="mini"
|
||
class="type-tag"
|
||
/>
|
||
</view>
|
||
<view class="timer" v-if="item.store">
|
||
营业时间：{{ item.store.start_time }}-{{ item.store.end_time }}
|
||
</view>
|
||
<view class="timer">地址：{{ item.store.position }}</view>
|
||
</view>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
storeChange,
|
||
storeInfo,
|
||
storeList
|
||
} from '../../request/api/api'
|
||
import { isGuestMode } from '@/common/utils/auth.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
storeinfo: [],
|
||
infoList: {
|
||
store: null
|
||
},
|
||
headerTitle: '',
|
||
tabIndex: 0,
|
||
tabChanging: false,
|
||
tabList: [
|
||
{ name: '诊所' },
|
||
{ name: '药店' }
|
||
],
|
||
}
|
||
},
|
||
created() {
|
||
this.getStore();
|
||
this.getInfo();
|
||
},
|
||
onReady() {
|
||
uni.setNavigationBarTitle({
|
||
title: this.headerTitle,
|
||
});
|
||
uni.setNavigationBarColor({
|
||
frontColor: '#000000',
|
||
})
|
||
},
|
||
methods: {
|
||
parseApiData(res) {
|
||
if (res.data.code === 0 || res.data.code === '0') {
|
||
return res.data.result;
|
||
}
|
||
if (res.data.errcode === 0 || res.data.errcode === '0') {
|
||
return res.data.data;
|
||
}
|
||
return null;
|
||
},
|
||
isApiSuccess(res) {
|
||
return (res.data.code === 0 || res.data.code === '0')
|
||
|| (res.data.errcode === 0 || res.data.errcode === '0');
|
||
},
|
||
getStoreTypeLabel(type) {
|
||
return (type === 1 || type === '1') ? '药店' : '诊所';
|
||
},
|
||
getStoreTypeTag(type) {
|
||
return (type === 1 || type === '1') ? 'success' : 'primary';
|
||
},
|
||
getFilteredStores(tabIdx) {
|
||
return this.storeinfo.filter((item) => {
|
||
if (!item.store) return false;
|
||
const storeType = item.store.type;
|
||
return tabIdx === 1
|
||
? (storeType === 1 || storeType === '1')
|
||
: (storeType === 0 || storeType === '0');
|
||
});
|
||
},
|
||
isCurrentStore(storeId) {
|
||
const currentStoreId = this.infoList.store && this.infoList.store.id;
|
||
return currentStoreId && storeId === currentStoreId;
|
||
},
|
||
onStoreItemClick(item) {
|
||
if (!item.store) return;
|
||
if (this.isCurrentStore(item.store.id)) {
|
||
uni.showToast({
|
||
title: '当前已经在这个门店了',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
this.toChang(item.store.id, item.store.type);
|
||
},
|
||
setDefaultTabByStoreType(type) {
|
||
this.tabIndex = (type === 1 || type === '1') ? 1 : 0;
|
||
},
|
||
onTabChange(index) {
|
||
if (this.tabChanging) return;
|
||
this.tabChanging = true;
|
||
this.tabIndex = index;
|
||
this.$nextTick(() => {
|
||
this.tabChanging = false;
|
||
});
|
||
},
|
||
onSwiperChange(e) {
|
||
if (this.tabChanging) return;
|
||
this.tabChanging = true;
|
||
this.tabIndex = e.detail.current;
|
||
this.$nextTick(() => {
|
||
this.tabChanging = false;
|
||
});
|
||
},
|
||
toChang(storeId, storeType) {
|
||
const token = uni.getStorageSync('token');
|
||
if (!token || isGuestMode()) {
|
||
uni.setStorageSync('store_id', storeId);
|
||
uni.setStorageSync('stores_id', storeId);
|
||
if (storeType !== undefined && storeType !== null) {
|
||
uni.setStorageSync('store_type', storeType);
|
||
}
|
||
uni.showToast({
|
||
title: '切换成功',
|
||
duration: 2000,
|
||
icon: 'success'
|
||
});
|
||
uni.switchTab({ url: '/pages/home/home' });
|
||
return;
|
||
}
|
||
|
||
storeChange({
|
||
method: 'post',
|
||
data: { store_id: storeId }
|
||
}).then((res) => {
|
||
if (this.isApiSuccess(res)) {
|
||
const data = this.parseApiData(res);
|
||
uni.setStorageSync('store_id', storeId);
|
||
uni.setStorageSync('stores_id', storeId);
|
||
const type = data && data.store ? data.store.type : storeType;
|
||
if (type !== undefined && type !== null) {
|
||
uni.setStorageSync('store_type', type);
|
||
}
|
||
uni.showToast({
|
||
title: '切换成功',
|
||
duration: 2000,
|
||
icon: 'success'
|
||
});
|
||
uni.switchTab({ url: '/pages/home/home' });
|
||
}
|
||
});
|
||
},
|
||
getStore() {
|
||
storeList({
|
||
method: 'post',
|
||
data: {
|
||
store_id: uni.getStorageSync('store_id') || '11001'
|
||
}
|
||
}).then((res) => {
|
||
if (this.isApiSuccess(res)) {
|
||
const data = this.parseApiData(res);
|
||
if (data && data.list) {
|
||
this.storeinfo = data.list;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getInfo() {
|
||
storeInfo({
|
||
method: 'post',
|
||
data: {
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
}
|
||
}).then((res) => {
|
||
if (this.isApiSuccess(res)) {
|
||
const data = this.parseApiData(res);
|
||
if (data && data.store) {
|
||
this.infoList = data;
|
||
this.headerTitle = data.store.name;
|
||
this.setDefaultTabByStoreType(data.store.type);
|
||
uni.setNavigationBarTitle({
|
||
title: this.headerTitle,
|
||
});
|
||
uni.setNavigationBarColor({
|
||
frontColor: '#000000',
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
width: 750rpx;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
background: #F5F5F5;
|
||
box-sizing: border-box;
|
||
|
||
.card {
|
||
width: 750rpx;
|
||
min-height: 310rpx;
|
||
background: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 40rpx 20rpx;
|
||
flex-shrink: 0;
|
||
|
||
image {
|
||
width: 172rpx;
|
||
height: 188rpx;
|
||
vertical-align: middle;
|
||
margin-right: 36rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.store {
|
||
flex: 1;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
|
||
.name {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.type-tag {
|
||
margin-left: 12rpx;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin: 12rpx 0;
|
||
|
||
.iconfont {
|
||
font-size: 26rpx;
|
||
color: #4175EE;
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list {
|
||
width: 750rpx;
|
||
padding: 34rpx;
|
||
margin: 30rpx auto 0;
|
||
border-radius: 20rpx;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
box-sizing: border-box;
|
||
|
||
.tabs-wrap {
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
margin-top: 20rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.store-swiper {
|
||
flex: 1;
|
||
height: 0;
|
||
min-height: 400rpx;
|
||
}
|
||
|
||
.store-scroll {
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.item {
|
||
width: 688rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
padding: 20rpx 32rpx;
|
||
background: #FFFFFF;
|
||
margin: 20rpx auto;
|
||
border-radius: 20rpx;
|
||
|
||
&.item-current {
|
||
background: #FFFFFF;
|
||
|
||
.name {
|
||
color: #999999;
|
||
}
|
||
|
||
.timer {
|
||
color: #AAAAAA;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
margin-top: 8rpx;
|
||
|
||
.type-tag {
|
||
margin-left: 12rpx;
|
||
}
|
||
}
|
||
|
||
.timer {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #232323;
|
||
border-bottom: 1rpx solid #DDDDDD;
|
||
padding: 0 0 20rpx 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.empty {
|
||
width: 490rpx;
|
||
height: 498rpx;
|
||
margin: 40rpx auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 370rpx;
|
||
height: 278rpx;
|
||
z-index: 10;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #232323;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|