123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648 |
- <template>
- <!-- v-show="liveId" -->
- <view class="content" >
- <view class="uni-nav-bar" :style="{backgroundColor: `rgba(58, 17, 1,${opacity})`}">
- <view :style="{height: statusBarHeight + 'px',width: '100%'}"></view>
- <view class="uni-nav-barbox">
- <view class="uni-nav-back">
- <u-icon name="arrow-left" color="#333" size="20" @click="rightClick"></u-icon>
- </view>
- <view class="uni-nav-title"
- :style="{opacity: 1,width:`calc(100vw - 100rpx - ${menuRight} - ${menuWidth})`}">
- <view class="inputbox" :style="{background: opacity >= 0.6 ? '#f7f7f7':'#fff'}" @click="toSearch">
- <image class="icon-search" src="/static/images/search.png" mode=""></image>
- <view>搜索店内药品</view>
- </view>
- </view>
- </view>
- </view>
- <view class="bg"></view>
- <!-- <image class="bg" src="/static/images/chu_query.png" mode="widthFix"></image> -->
- <view class="content-body">
- <view class="store-head" v-show="storeInfo.storeName">
- <view class="store-head-top">
- <view class="store-head-logo">
- <u-image shape="square" :src="storeInfo.logoUrl || logoUrl" width="100rpx" height="100rpx"
- radius="6"></u-image>
- </view>
- <view class="store-head-name">{{storeInfo.storeName || ''}}</view>
- </view>
- <view class="store-head-desc">
- <view>销售{{storeInfo.salesCount }}</view>
- <view>24小时营业</view>
- <view>支持预订</view>
- </view>
- </view>
- <view class="storebox">
- <u-sticky bgColor="#fff" :offset-top="statusBarHeight + 44">
- <u-tabs :list="tabbar" :current="current" @click="clickTab" class="u-tabs"></u-tabs>
- </u-sticky>
- <!-- 商品 -->
- <view :style="{height: divHeight,display: current == 0 ? 'flex' : 'none'}" class="medic-box">
- <view class="cate-list">
- <view v-for="(item,index) in cates" :key="index" :class="cateSelect == item.cateId?'item active':'item'" @click="choseCate(item)">
- {{item.cateName }}</view>
- </view>
- <view class="medic">
- <!-- 轮播图 -->
- <view class="banner-box">
- <swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true"
- :interval="3000" :duration="1000" indicator-color="rgba(255, 255, 255, 0.6)"
- indicator-active-color="#ffffff">
- <swiper-item class="swiper-item" v-for="(item,index) in advs" :key="index" @click="handleAdvClick(item)">
- <image :src="item.imageUrl" mode=""></image>
- </swiper-item>
- </swiper>
- </view>
- <!-- 药品列表 -->
- <view class="medic-list">
- <view class="inner-list">
- <view class="definite" v-for="(subItem,index) in products" :key="index" @click="showProductList(subItem)">
- <view class="img-box">
- <image :src="subItem.imgUrl" mode="aspectFit"></image>
- </view>
- <view class="name ellipsis">{{subItem.productName}}</view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <!-- 商家信息 -->
- <view class="storebox-info" :style="{height: divHeight}" v-show="current == 1">
- <view class="storebox-map">
- <u-icon name="map" color="#ccc" size="18"></u-icon>
- <view style="margin-left: 10rpx;">{{storeInfo.address || "--"}}</view>
- </view>
- <view class="storebox-map" v-if="storeInfo.phone">
- <u-icon name="phone" color="#ccc" size="18"></u-icon>
- <view style="margin-left: 10rpx;">{{storeInfo.phone || "--"}}</view>
- </view>
- <view class="storebox-qualifications" v-if="storeInfo.descs">
- <u-icon name="volume" color="#ccc" size="18"></u-icon>
- <view style="margin-left: 10rpx;">{{storeInfo.descs || "--"}}</view>
- </view>
- <view class="storebox-qualifications">
- <u-icon name="file-text" color="#ccc" size="18"></u-icon>
- <view style="margin-left: 10rpx;">商家资质</view>
- </view>
- <view class="qualifications">
- <view v-for="(img,i) in licenseImagesList" :key="i">
- <u-image shape="square" lazyLoad :src="img" width="100%" mode="widthFix" radius="6"
- @click="previewImage(i)"></u-image>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- // 小黄车
- liveStore, //店铺展示,
- } from '@/api/live'
- // import {getProductCate} from '@/api/product';
- // import {getAdv} from '@/api/adv';
- // import { getStoreById } from "@/api/store.js";
- export default {
- data() {
- return {
- products:[],
- liveId:null,
- statusBarHeight: uni.getWindowInfo().statusBarHeight,
- // 右侧的胶囊距离右侧屏幕距离-px
- menuRight: uni.getStorageSync('menuInfo').menuRight,
- // 右侧的胶囊宽度-px
- menuWidth: uni.getStorageSync('menuInfo').menuWidth,
- opacity: 0,
- opacityTxt: 0,
- // storeId: "",
- tabbar: [{
- name: '商品',
- }, {
- name: '商家',
- }],
- current: 0,
- storeInfo: {},
- // logoUrl: "/static/images/adfd21c004854c9b8997d371d7a0ce8c.jpg",
- // 商家资质图片
- // licenseImagesList: ["/static/images/sjzz.jpg"],
- divHeight: '0px',
- allCates: [],
- cates: [],
- subCates: [],
- // 选中药品分类
- cateSelect: 0,
- // 轮播图
- advs: [],
- // 'company'表示销售管理的进来的
- from: ""
- }
- },
- onLoad(options) {
- if (options.liveId) {
- this.liveId = options.liveId;
- console.log("接收到的liveId:", this.liveId);
- }
-
-
-
-
- this.storeId = options.storeId || ""
- this.from = options.from || ''
- if (this.storeId) {
- this.getStoreInfo()
- this.getProductCate();
- } else {
- uni.showToast({
- title: "storeId不存在~",
- icon: "none"
- })
- }
- },
- mounted() {
- this.getliveStore() // 获取小黄车 店铺展示
- },
- onShow() {
- this.divHeight = `calc(100vh - 44px - 88rpx - ${this.statusBarHeight}px)`
- // this.getAdv();
- },
- onPageScroll(e) {
- if (e.scrollTop <= 44) {
- this.opacityTxt = 0
- this.opacity = e.scrollTop > this.statusBarHeight ? 0.6 : 0
- } else if (e.scrollTop > 50) {
- this.opacity = 1
- this.opacityTxt = 1
- }
- },
- methods: {
-
- //小黄车 店铺展示
- getliveStore() {
- let data = {
- pageSize: 10,
- page: 1
- }
- liveStore(this.liveId, data).then(res => {
- if (res.code == 200) {
- console.log("小黄车 店铺展示>>>>", res)
- this.products = res.data
- } else {
- uni.showToast({
- title: res.msg,
- icon: 'none'
- });
- }
- },
- rej => {}
- );
- },
-
-
-
-
-
-
- rightClick() {
- uni.navigateBack()
- },
- clickTab(item) {
- this.current = item.index
- },
- // 预览图片
- previewImage(index) {
- uni.previewImage({
- current: index,
- urls: this.licenseImagesList
- });
- },
- getStoreInfo() {
- getStoreById({
- storeId: this.storeId
- }).then(
- res => {
- if (res.code == 200) {
- this.storeInfo = res.data || {}
- // this.licenseImagesList = this.storeInfo.licenseImages ? this.storeInfo.licenseImages.split(',') : []
- } else {
- uni.showToast({
- icon: 'none',
- title: res.msg,
- });
- }
- },
- rej => {}
- );
- },
- toSearch() {
- if (this.from == 'company') {
- uni.navigateTo({
- url: '/pages_company/order/productList?storeId=' + this.storeId || ''
- })
- } else {
- uni.navigateTo({
- url: '/pages/home/productSearch?storeId=' + this.storeId || ''
- })
- }
- },
- handleAdvClick(item) {
- if (item.showType == 1) {
- uni.setStorageSync('url', item.advUrl);
- uni.navigateTo({
- url: "/pages/home/h5?storeId=" + this.storeId || ""
- })
- } else if (item.showType == 2) {
- uni.navigateTo({
- url: item.advUrl
- })
- } else if (item.showType == 3) {
- uni.setStorageSync('content', item.content);
- uni.navigateTo({
- url: "/pages/home/content?storeId=" + this.storeId || ""
- })
- }
- },
- // getAdv() {
- // let data = {
- // advType: 2
- // };
- // getAdv(data).then(
- // res => {
- // if (res.code == 200) {
- // this.advs = res.data;
- // }
- // },
- // rej => {}
- // );
- // },
- getProductCate() {
- let data = {};
- getProductCate(data).then(
- res => {
- if (res.code == 200) {
- this.allCates = res.data;
- this.cates = this.allCates.filter(function(item) {
- return item.pid == 0
- });
- if (this.cates != null && this.cates.length > 0) {
- this.cateSelect = this.cates[0].cateId;
- this.getSubCate()
- }
- } else {
- uni.showToast({
- icon: 'none',
- title: "请求失败",
- });
- }
- },
- rej => {}
- );
- },
- // 药品分类选择
- choseCate(item) {
- this.cateSelect = item.cateId;
- this.getSubCate()
- },
- getSubCate() {
- var that = this;
- this.subCates = this.allCates.filter(function(item) {
- // let subList = that.allCates.filter(child => {
- // //返回每一项的子级数组
- // return child.pid === item.cateId
- // });
- // subList.length > 0 ? item.children = subList : [];
- return item.pid == that.cateSelect
- });
- },
- // 查看药品详情
- showProductList(item) {
- uni.navigateTo({
- url: '/pages/shopping/productList?cateId=' + item.cateId + "&pid=" + item.pid + '&storeId=' +
- this.storeId + '&from=' + this.from
- })
- }
- }
- }
- </script>
- <style scoped lang="scss">
- @mixin u-flex($flexD, $alignI, $justifyC) {
- display: flex;
- flex-direction: $flexD;
- align-items: $alignI;
- justify-content: $justifyC;
- }
- .inputbox {
- height: 60rpx;
- padding: 0 20rpx;
- @include u-flex(row, center, flex-start);
- border-radius: 40rpx;
- line-height: 60rpx;
- font-size: 28rpx;
- color: #999;
- .icon-search {
- width: 28rpx;
- height: 28rpx;
- margin-right: 20rpx;
- }
- }
- .uni-nav-bar {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- z-index: 999;
- overflow: hidden;
- font-weight: 500;
- .uni-nav-barbox {
- width: 100%;
- height: 88rpx;
- @include u-flex(row, center, flex-start);
- position: relative;
- font-size: 24rpx;
- }
- .uni-nav-title {
- /* #ifdef APP-PLUS */
- font-size: 34rpx;
- /* #endif */
- /* #ifndef APP-PLUS */
- font-size: 14px;
- /* #endif */
- overflow: hidden;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .uni-nav-back {
- margin-left: 20rpx;
- margin-right: 20rpx;
- height: 88rpx;
- @include u-flex(row, center, flex-start);
- }
- }
- .content {
- width: 100%;
- position: relative;
- .bg {
- width: 100%;
- height: auto;
- position: absolute;
- top: 0;
- left: 0;
- height: 388rpx;
- background: #3A1101;
- }
- &-body {
- position: relative;
- padding-top: calc(var(--status-bar-height) + 88rpx);
- }
- }
- .store-head {
- position: relative;
- z-index: 9;
- margin: 0 24rpx 0 24rpx;
- padding: 24rpx;
- background: #FFFFFF;
- border-radius: 16rpx 16rpx 16rpx 16rpx;
- font-family: PingFang SC, PingFang SC;
- color: #222222;
- box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
- &-top {
- display: flex;
- align-items: center;
- }
- &-logo {
- flex-shrink: 0;
- margin-right: 24rpx;
- }
- &-name {
- font-weight: 600;
- font-size: 32rpx;
- }
- &-desc {
- margin-top: 16rpx;
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- gap: 20rpx;
- position: relative;
- z-index: 2;
- view {
- padding-right: 20rpx;
- font-size: 26rpx;
- position: relative;
- &::after {
- content: "";
- width: 0;
- height: 28rpx;
- border-right: 1rpx solid #eee;
- position: absolute;
- right: 0;
- top: 50%;
- transform: translate(0, -50%);
- }
- &:last-child::after {
- border: none;
- }
- }
- }
- }
- .border_bottom_line {
- position: relative;
- &::after {
- content: "";
- position: absolute;
- bottom: 0;
- left: 0;
- border-bottom: 1px solid #F5F7FA;
- width: 100%;
- transform: scaleY(0.5);
- border-top-color: #F5F7FA;
- border-right-color: #F5F7FA;
- border-left-color: #F5F7FA;
- }
- }
- .storebox {
- width: 100%;
- margin-top: -60rpx;
- padding-top: 80rpx;
- background-color: #fff;
- box-shadow: 0 -20rpx 16rpx #fff;
- position: relative;
- z-index: 1;
- &-info {
- padding: 24rpx 24rpx 0 24rpx;
- background-color: #fff;
- font-family: PingFang SC, PingFang SC;
- font-size: 28rpx;
- color: #333333;
- position: relative;
- border-top: 4px solid #F5F7FA;
- }
- &-map {
- display: flex;
- align-items: center;
- word-break: break-all;
- padding: 24rpx 0;
- }
- &-qualifications {
- display: flex;
- align-items: center;
- padding: 24rpx 0;
- }
- .qualifications {
- padding: 24rpx 0;
- }
- }
- .medic-box {
- display: flex;
- .cate-list {
- box-sizing: border-box;
- width: 200upx;
- background: #F2F5F9;
- display: flex;
- flex-direction: column;
- padding: 20upx 0;
- overflow-y: scroll;
- .item {
- height: 100upx;
- line-height: 100upx;
- padding-left: 30upx;
- font-size: 28upx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #333333;
- position: relative;
- &.active {
- color: #0bb3f2;
- &::after {
- content: "";
- width: 8upx;
- height: 50upx;
- background: #0bb3f2;
- position: absolute;
- top: 25upx;
- left: 0;
- }
- }
- }
- }
- .medic {
- box-sizing: border-box;
- width: calc(100% - 200upx);
- height: 100%;
- padding: 0 30upx;
- .banner-box {
- margin-top: 30rpx;
- width: 100%;
- height: 160upx;
- border-radius: 10upx;
- overflow: hidden;
- .swiper,
- .swiper-item,
- .swiper-item image {
- width: 100%;
- height: 100%;
- }
- }
- .medic-list {
- box-sizing: border-box;
- padding: 30upx 0;
- overflow-y: auto;
- height: calc(100% - 220upx);
- position: relative;
- // .item{
- // .title{
- // font-size: 28upx;
- // font-family: PingFang SC;
- // font-weight: bold;
- // color: #333333;
- // padding-top: 20upx;
- // margin-bottom: 30upx;
- // }
- // }
- .inner-list {
- display: flex;
- flex-wrap: wrap;
- .definite {
- width: calc(33% - 20upx);
- margin-right: 30upx;
- margin-bottom: 30upx;
- .img-box {
- width: 100%;
- height: 144upx;
- background: #F5F5F5;
- border-radius: 8upx;
- overflow: hidden;
- display: flex;
- align-items: center;
- image {
- max-width: 100%;
- }
- }
- .name {
- width: 100%;
- margin-top: 20upx;
- font-size: 24upx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #666666;
- text-align: center;
- }
- &:nth-child(3n) {
- margin-right: 0;
- }
- }
- }
- }
- }
- }
- </style>
|