|
|
@@ -1,41 +1,141 @@
|
|
|
<template>
|
|
|
<view class="content" v-show="storeId">
|
|
|
- <view class="uni-nav-bar" :style="{backgroundColor: `rgba(255,255,255,${opacity})`}">
|
|
|
+ <!-- <view class="uni-nav-bar" :style="{backgroundColor: `rgba(255, 255, 255,${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>
|
|
|
+ <u-icon name="arrow-left" color="#fff" size="20" @click="rightClick"></u-icon>
|
|
|
</view>
|
|
|
<view class="uni-nav-title" :style="{opacity: 1,width:`calc(100vw - 100rpx - ${menuRight} - ${menuWidth})`}">
|
|
|
- <!-- {{storeInfo.storeName}} -->
|
|
|
- <view class="inputbox" :style="{background: opacity >= 0.6 ? '#f7f7f7':'#fff'}" @click="toSearch">
|
|
|
+ {{storeInfo.storeName}}
|
|
|
+ <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="uni-nav-bar" :style="{backgroundColor: `rgba(58, 17, 1, 1)`}">
|
|
|
+ <view :style="{height: statusBarHeight + 'px',width: '100%'}"></view>
|
|
|
+ <view class="uni-nav-barbox">
|
|
|
+ <view class="uni-nav-back">
|
|
|
+ <u-icon name="arrow-left" color="#fff" size="20" @click="rightClick"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="uni-nav-title" :style="{opacity: 1,width:`calc(100vw - 120rpx - ${menuRight} - ${menuWidth})`}">
|
|
|
+ <!-- {{storeInfo.storeName}} -->
|
|
|
+ <view class="inputbox" :style="{background:'rgba(255, 255, 255, 0.25)'}" @click="toSearch">
|
|
|
+ <image class="icon-search" src="../../static/images/search_white_icon12.png" mode=""></image>
|
|
|
+ <view>搜索店内药品</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <image class="bg" src="../../static/images/chu_query.png" mode="widthFix"></image>
|
|
|
- <view class="content-body">
|
|
|
+ <view class="content-top">
|
|
|
<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-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-info">
|
|
|
+ <view class="store-head-name">{{storeInfo.storeName || ''}}</view>
|
|
|
+ <view class="store-head-desc">
|
|
|
+ <!-- <view>销售{{utils.formatSalesNum(storeInfo.salesCount) }}</view> -->
|
|
|
+ <view>24小时营业 · 月售{{utils.formatSalesNum(storeInfo.salesCount) }}{{utils.formatSalesNum(storeInfo.salesCount)>1000?'+':''}}</view>
|
|
|
+ <!-- <view>支持预订</view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="store-head-bottom">
|
|
|
+ <view class="store-head-bottom-left">支持预定</view>
|
|
|
+ <view class="store-head-bottom-center">
|
|
|
+ <view>直降6元</view>
|
|
|
+ <view>低价换购</view>
|
|
|
+ <view>返15个芳华币</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="store-head-right">
|
|
|
+ <text>领卷</text>
|
|
|
+ <image class="w24 h24" src="../../static/images/back_white.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- tab切换 -->
|
|
|
+ <view class="pub-tab-box">
|
|
|
+ <view class="tab-inner">
|
|
|
+ <view
|
|
|
+ v-for="(item,index) in tabs"
|
|
|
+ :key="index"
|
|
|
+ :class="cateId == item.cateId?'item active':'item'"
|
|
|
+ @click="cateChange(item)">
|
|
|
+ <view class="text">
|
|
|
+ {{ item.cateName }}
|
|
|
+ <!-- <image v-show="cateId == item.cateId" class="tab-bg" src="../../static/images/tab_bg.png" mode=""></image> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 数据列表 -->
|
|
|
+ <view class="content-list">
|
|
|
+ <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
|
|
|
+ <view class="goods-list">
|
|
|
+ <view class="item" v-for="(item,index) in dataList" :key="index" @click="showDetail(item)">
|
|
|
+ <view class="img-box">
|
|
|
+ <image :src="item.image" mode="aspectFit"></image>
|
|
|
+ <view class="cf-box" v-if="item.productType==2">
|
|
|
+ <view class="title">处方药</view>
|
|
|
+ <view class="subTitle">请在医师指导下使用</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="info-box">
|
|
|
+ <view class="title ellipsis2">{{item.productName}}</view>
|
|
|
+ <view class="price-box">
|
|
|
+ <view class="now">
|
|
|
+ <text class="unit">¥</text>
|
|
|
+ <text class="num">{{item.price.toFixed(2)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="old">¥{{item.otPrice.toFixed(2)}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="store-head-name">{{storeInfo.storeName || ''}}</view>
|
|
|
</view>
|
|
|
- <view class="store-head-desc">
|
|
|
- <view>销售{{utils.formatSalesNum(storeInfo.salesCount) }}</view>
|
|
|
- <view>24小时营业</view>
|
|
|
- <view>支持预订</view>
|
|
|
+ </mescroll-body>
|
|
|
+ </view>
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <view class="btn-foot">
|
|
|
+ <view class="menu-box">
|
|
|
+ <view class="item" @click="goHome">
|
|
|
+ <image src="../../static/images/tab_home_icon24.png" mode=""></image>
|
|
|
+ <text class="label">首页</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item" @click="navgetTo('./cart')">
|
|
|
+ <uni-badge size="small" :text="cartCount" absolute="rightTop" type="error">
|
|
|
+ <image src="../../static/images/shopping_car_icon20.png" mode=""></image>
|
|
|
+ </uni-badge>
|
|
|
+ <text class="label">购物车</text>
|
|
|
+ </view>
|
|
|
+ <view class="item" style="position: relative;">
|
|
|
+ <image src="../../static/images/customer_service_icon24.png" mode=""></image>
|
|
|
+ <text class="label">客服</text>
|
|
|
+ <button class="contact-btn" open-type="contact"></button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- <image class="bg" src="../../static/images/chu_query.png" mode="widthFix"></image> -->
|
|
|
+ <!-- <view class="content-body">
|
|
|
+
|
|
|
<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>
|
|
|
+ </u-sticky> -->
|
|
|
<!-- 商品 -->
|
|
|
- <view :style="{height: divHeight,display: current == 0 ? 'flex' : 'none'}" class="medic-box">
|
|
|
+ <!-- <view :style="{height: divHeight,display: current == 0 ? 'flex' : 'none'}" class="medic-box">
|
|
|
<view class="cate-list">
|
|
|
<view
|
|
|
v-for="(item,index) in cates"
|
|
|
@@ -44,9 +144,9 @@
|
|
|
@click="choseCate(item)"
|
|
|
>{{item.cateName }}</view>
|
|
|
</view>
|
|
|
- <view class="medic">
|
|
|
+ <view class="medic"> -->
|
|
|
<!-- 轮播图 -->
|
|
|
- <view class="banner-box">
|
|
|
+ <!-- <view class="banner-box">
|
|
|
<swiper
|
|
|
class="swiper"
|
|
|
:indicator-dots="true"
|
|
|
@@ -61,11 +161,11 @@
|
|
|
<image :src="item.imageUrl" mode=""></image>
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
<!-- 药品列表 -->
|
|
|
- <view class="medic-list">
|
|
|
- <!-- <view class="item" v-for="(item,index) in subCates" :key="index">
|
|
|
- <view class="title">{{item.cateName}}</view> -->
|
|
|
+ <!-- <view class="medic-list">
|
|
|
+ <view class="item" v-for="(item,index) in subCates" :key="index">
|
|
|
+ <view class="title">{{item.cateName}}</view>
|
|
|
<view class="inner-list">
|
|
|
<view class="definite"v-for="(subItem,index) in subCates" @click="showProductList(subItem)">
|
|
|
<view class="img-box">
|
|
|
@@ -74,12 +174,12 @@
|
|
|
<view class="name ellipsis">{{subItem.cateName}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- </view> -->
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
<!-- 商家信息 -->
|
|
|
- <view class="storebox-info" :style="{height: divHeight}" v-show="current == 1">
|
|
|
+ <!-- <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>
|
|
|
@@ -111,7 +211,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -119,8 +219,10 @@
|
|
|
import {getProductCate} from '@/api/product';
|
|
|
import {getAdv} from '@/api/adv';
|
|
|
import { getStoreById } from "@/api/store.js";
|
|
|
-
|
|
|
+ import {getProductCateByPid,getProducts} from '@/api/product'
|
|
|
+ import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
|
export default {
|
|
|
+ mixins: [MescrollMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
|
|
@@ -150,11 +252,41 @@
|
|
|
// 轮播图
|
|
|
advs: [],
|
|
|
// 'company'表示销售管理的进来的
|
|
|
- from: ""
|
|
|
+ from: "",
|
|
|
+ dataList:[],
|
|
|
+ cateId:null,
|
|
|
+ tabs:[{
|
|
|
+ cateId: 178,
|
|
|
+ cateName: "推荐",
|
|
|
+ pid: 179,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ cateId: 100,
|
|
|
+ cateName: "分类",
|
|
|
+ pid: 179,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ //上拉加载的配置
|
|
|
+ upOption: {
|
|
|
+ onScroll:true,
|
|
|
+ use: true, // 是否启用上拉加载; 默认true
|
|
|
+ page: {
|
|
|
+ num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
|
|
|
+ size: 10 // 每页数据的数量,默认10
|
|
|
+ },
|
|
|
+ noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
|
|
|
+ empty: {
|
|
|
+ icon:'/static/images/no_data.png',
|
|
|
+ tip: '暂无数据',
|
|
|
+
|
|
|
+ },
|
|
|
+ textNoMore:"已经到底了",
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
this.storeId = option.storeId || ""
|
|
|
+ this.cateId = 178;
|
|
|
this.from= option.from || ''
|
|
|
if(this.storeId){
|
|
|
this.getStoreInfo()
|
|
|
@@ -276,6 +408,86 @@
|
|
|
rej => {}
|
|
|
);
|
|
|
},
|
|
|
+ // tab切换
|
|
|
+ cateChange(item) {
|
|
|
+ this.cateId = item.cateId;
|
|
|
+ this.mescroll.resetUpScroll()
|
|
|
+ },
|
|
|
+ mescrollInit(mescroll) {
|
|
|
+ this.mescroll = mescroll;
|
|
|
+ },
|
|
|
+ /*下拉刷新的回调 */
|
|
|
+ downCallback(mescroll) {
|
|
|
+ this.mescroll.resetUpScroll()
|
|
|
+ },
|
|
|
+ upCallback(page) {
|
|
|
+ //联网加载数据
|
|
|
+ var that = this;
|
|
|
+ var data = {
|
|
|
+ cateId:this.cateId,
|
|
|
+ defaultOrder:this.defaultOrder,
|
|
|
+ page: page.num,
|
|
|
+ pageSize: page.size,
|
|
|
+ productName: this.productName || "",
|
|
|
+ storeId: this.storeId
|
|
|
+ };
|
|
|
+ if(this.from == 'company') {
|
|
|
+ this.getSalesProducts(page,data)
|
|
|
+ } else {
|
|
|
+ this.getProducts(page,data)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getProducts(page,data) {
|
|
|
+ var that = this;
|
|
|
+ getProducts(data).then(res => {
|
|
|
+ if(res.code==200){
|
|
|
+ //设置列表数据
|
|
|
+ if (page.num == 1) {
|
|
|
+ that.dataList = res.data.list;
|
|
|
+ } else {
|
|
|
+ that.dataList = that.dataList.concat(res.data.list);
|
|
|
+ }
|
|
|
+ that.mescroll.endBySize(res.data.list.length, res.data.total);
|
|
|
+
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: "请求失败",
|
|
|
+ });
|
|
|
+ that.dataList = null;
|
|
|
+ that.mescroll.endErr();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 回到首页
|
|
|
+ goHome() {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/home/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 跳转页面
|
|
|
+ navgetTo(url) {
|
|
|
+ console.log("跳转")
|
|
|
+ this.utils.isLogin().then(res => {
|
|
|
+ if(res){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: url
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 查看药品详情
|
|
|
+ showDetail(item) {
|
|
|
+ if(this.from == 'company') {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages_company/order/productDetails?productId='+item.productId +`${this.storeId ? '&storeId='+this.storeId : ''}`
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: './productDetails?productId='+item.productId +`${this.storeId ? '&storeId='+this.storeId : ''}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
// 药品分类选择
|
|
|
choseCate(item) {
|
|
|
this.cateSelect = item.cateId;
|
|
|
@@ -318,7 +530,7 @@
|
|
|
border-radius: 40rpx;
|
|
|
line-height: 60rpx;
|
|
|
font-size:28rpx;
|
|
|
- color:#999;
|
|
|
+ color:#fff;
|
|
|
font-family: PingFang SC;
|
|
|
.icon-search{
|
|
|
width: 28rpx;
|
|
|
@@ -372,23 +584,48 @@
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
-
|
|
|
+ &-top{
|
|
|
+ position: fixed;
|
|
|
+ z-index: 999;
|
|
|
+ top: calc(var(--status-bar-height) + 120rpx);
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
&-body {
|
|
|
position: relative;
|
|
|
- padding-top: calc(var(--status-bar-height) + 88rpx);
|
|
|
+ padding-top: calc(var(--status-bar-height) + 360rpx);
|
|
|
+ }
|
|
|
+ &-list{
|
|
|
+ position: relative;
|
|
|
+ padding-top: calc(var(--status-bar-height) + 440rpx);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.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);
|
|
|
position: relative;
|
|
|
- z-index: 9;
|
|
|
- margin: 0 24rpx 0 24rpx;
|
|
|
- padding: 24rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
+ z-index: 999;
|
|
|
+ padding:30rpx 24rpx;
|
|
|
+ background:#3A1101;
|
|
|
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);
|
|
|
+ color: #fff;
|
|
|
+ width: calc(100% - 48rpx);
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+ &-info{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
&-top {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -401,7 +638,15 @@
|
|
|
font-weight: 600;
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
-
|
|
|
+ &-right{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24upx;
|
|
|
+ image{
|
|
|
+ transform: scaleX(-1);
|
|
|
+ margin-left: 5upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
&-desc {
|
|
|
margin-top: 16rpx;
|
|
|
display: flex;
|
|
|
@@ -411,8 +656,8 @@
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
view {
|
|
|
- padding-right: 20rpx;
|
|
|
- font-size: 26rpx;
|
|
|
+ // padding-right: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
position: relative;
|
|
|
|
|
|
&::after {
|
|
|
@@ -431,6 +676,245 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ &-bottom{
|
|
|
+ padding-top: 24upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24upx;
|
|
|
+ &-left{
|
|
|
+ background: rgba(255, 255, 255, 0.20);
|
|
|
+ padding: 4rpx 10rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ margin-right: 24upx;
|
|
|
+ }
|
|
|
+ &-center{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ view{
|
|
|
+ font-size: 20rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ background: linear-gradient(120deg, #FE8227 0%, #FE4E12 100%);
|
|
|
+ margin-right: 10rpx;
|
|
|
+ padding: 2rpx 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pub-tab-box{
|
|
|
+
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 33upx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ position: fixed;
|
|
|
+ top: calc(var(--status-bar-height) + 340rpx);
|
|
|
+ z-index: 999;
|
|
|
+ box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
|
|
|
+ .tab-inner{
|
|
|
+ height: 88upx;
|
|
|
+ line-height: 88upx;
|
|
|
+ display: flex;
|
|
|
+ overflow-x: auto;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ font-size: 28upx;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 1;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ margin-right: 90upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ &:last-child{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ width: 48rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ background: linear-gradient(120deg, #31A1FE 0%, #008FD3 100%);
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ border-radius: 6upx 6upx 0upx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .tab-bg{
|
|
|
+ width: 72upx;
|
|
|
+ height: 28upx;
|
|
|
+ position: absolute;
|
|
|
+ top: 17upx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-36upx);
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .goods-list{
|
|
|
+ padding: 20upx;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .item{
|
|
|
+ margin-right: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ width: 345rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ &:nth-child(2n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .img-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 334upx;
|
|
|
+ position: relative;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-box{
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 182upx;
|
|
|
+ padding: 20upx 20upx 30upx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ .title{
|
|
|
+ font-size: 26upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111111;
|
|
|
+ line-height: 40upx;
|
|
|
+ }
|
|
|
+ .price-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ .now{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ margin-right: 20upx;
|
|
|
+ .unit{
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FF6633;
|
|
|
+ line-height: 1.2;
|
|
|
+ margin-right: 4upx;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-size: 36upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF6633;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .old{
|
|
|
+ font-size: 26upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #BBBBBB;
|
|
|
+ line-height: 1.1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-foot{
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 100upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 0 30upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 99;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ border-radius: 50px;
|
|
|
+ box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
|
|
|
+ .menu-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-right: 48upx;
|
|
|
+ &:last-child{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ image{
|
|
|
+ width: 40upx;
|
|
|
+ height: 40upx;
|
|
|
+ margin-bottom: 10upx;
|
|
|
+ }
|
|
|
+ .label{
|
|
|
+ font-size: 20upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #626468;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep .uni-badge--x{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ ::v-deep .uni-badge{
|
|
|
+ border: none;
|
|
|
+ background-color: #FF3636;
|
|
|
+ font-family: Roboto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .btn{
|
|
|
+ width: 200upx;
|
|
|
+ height: 88upx;
|
|
|
+ line-height: 88upx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 44upx;
|
|
|
+ margin-left: 20upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ &:first-child{
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ &.cart{
|
|
|
+ background: #FF5030;
|
|
|
+ }
|
|
|
+ &.buy{
|
|
|
+ background: #008FD3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.border_bottom_line {
|
|
|
position: relative;
|
