You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1040 lines
24 KiB
1040 lines
24 KiB
<template>
|
|
<view class="container">
|
|
<block v-if="isload">
|
|
<view class="pages-hd"
|
|
:style="{'padding-top': menuButtonTop + 'px'}">
|
|
<view class="navigation flex al-item-center" v-if="!storeInfo.name"
|
|
:style="{'height': menuButtonHeight + 'px'}">
|
|
<text class="iconfont icon-icon_arrow_left" v-if="isShowBack" @click="goBack"></text>
|
|
<view class="navigation-title">{{storeInfo.name ? '商品分类' : '全部商品'}}</view>
|
|
</view>
|
|
<view class="pages-hd__search">
|
|
<view class="left" @click="goto" data-url="/pagesA/shop/sizeShop?types=classify" v-if="!storeInfo.name">
|
|
<view class="l_top">
|
|
<text class="iconfont icon-dianpu1"></text>
|
|
<text class="txt">请选择店铺</text> <text class="iconfont icon-shang"></text>
|
|
</view>
|
|
</view>
|
|
|
|
<view @tap.stop="goto" :data-url="'/pages/shop/search?bid='+bid" class="search-container">
|
|
<view class="search-box">
|
|
<image class="img" :src="event_rul + '/static/img/static/img/search_ico.png'"></image>
|
|
<view class="search-text">搜索感兴趣的商品</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="pages-hd__shop" @click="goto" data-url="/pagesA/shop/sizeShop?types=classify" v-if="storeInfo.name">
|
|
<view class="shop-name flex al-item-center">{{storeInfo.name}}<text class="iconfont icon-arrow-right"></text></view>
|
|
<view class="shop-distance">
|
|
<text class="iconfont icon-didian"></text>距离{{storeInfo.juli}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="coentent_box" v-if="!storeInfo.name" style="flex: 1; overflow: hidden;">
|
|
<view class="nav-pai1">
|
|
<view class="nav-paili1 flex al-item-center j-center" :class="(!field||field=='sort')?'actived':''" @tap="changeOrder" data-field="sort" data-order="desc">综合</view>
|
|
<view class="nav-paili1 flex al-item-center j-center" :class="field=='sales'?'actived':''" @tap="changeOrder" data-field="sales" data-order="desc">销量</view>
|
|
<view class="nav-paili1 flex al-item-center j-center" :class="field=='createtime'?'actived':''" @tap="changeOrder" data-field="createtime" data-order="desc">上新</view>
|
|
<view class="nav-paili1 flex al-item-center j-center" @tap="changeOrder" data-field="sell_price" :data-order="order=='asc'?'desc':'asc'">
|
|
<view :class="field=='sell_price'?'selected':''">价格</view>
|
|
<text style="font-size: 26rpx; " class="iconfont icon-danbianjiantou1" :style="field=='sell_price'&&order=='asc'?'color:'+'#333333;':''"></text>
|
|
<text style="margin-left: -10rpx; font-size: 26rpx;" class="iconfont icon-danbianjiantou" :style="field=='sell_price'&&order=='desc'?'color:'+'#333333;':''"></text>
|
|
</view>
|
|
</view>
|
|
<scroll-view class="classify-box" scroll-y="true" @scrolltolower="scrolltolower">
|
|
<view class="product-container" style="padding: 20rpx;">
|
|
<block v-if="datalist && datalist.length>0">
|
|
<!-- <dp-product-item types='search' :data="datalist" :menuindex="-1"></dp-product-item> -->
|
|
<view class="product-box flex flex-w j-between">
|
|
<block v-for="(item, idx) in datalist" :key="idx">
|
|
<view
|
|
class="product-item bg-color-white overflow-hd"
|
|
@click="goto"
|
|
:data-url="'/pages/shop/product?id=' + item.id"
|
|
>
|
|
<view class="product-item__hd flex j-center al-item-center">
|
|
<image
|
|
class="product-img"
|
|
:src="item.pic"
|
|
mode="widthFix"
|
|
></image>
|
|
</view>
|
|
<view class="item-info">
|
|
<view class="item-info__name text-overflow-line">{{ item.name }}</view>
|
|
<view class="item-info__salse">已售 {{ item.sales ? (item.sales >= 10000 ? (item.sales / 10000).toFixed(1) + '万': item.sales) : 0 }}</view>
|
|
<view class="item-info__price"><text class="symbol">¥</text>{{ item.sell_price }}</view>
|
|
<view class="item-info__shop flex al-item-center j-between">
|
|
<view class="item-info__shop-bd flex al-item-center"
|
|
@click="goto"
|
|
:data-url="'/pagesA/shop/index?id=' + item.business.id">
|
|
<image class="item-info__shop-logo" :src="item.business.logo"></image>
|
|
<view class="item-info__shop-name">{{item.business.name}}</view>
|
|
</view>
|
|
<view
|
|
class="item-info__shop-cart flex border-rius-r al-item-center j-center"
|
|
@click.stop="buydialogChange"
|
|
:data-proid="item.id"
|
|
>
|
|
<text class="iconfont icon-gouwuche1"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</block>
|
|
<nomore text="没有更多商品了" v-else></nomore>
|
|
<!-- <nodata text="没有查找到相关商品" v-if="nodata"></nodata> -->
|
|
<!-- <loading v-if="loading"></loading> -->
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="content-container" v-else>
|
|
<view class="nav_left">
|
|
<view :class="'nav_left_items ' + (curIndex == -1 ? 'active' : '')" @tap="switchRightTab"
|
|
data-index="-1" data-id="0">全部
|
|
</view>
|
|
<block v-for="(item, index) in clist" :key="index">
|
|
<view :class="'nav_left_items ' + (curIndex == index ? 'active' : '')" @tap="switchRightTab"
|
|
:data-index="index" :data-id="item.id">{{item.name}}
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<view class="nav_right">
|
|
<scroll-view class="nav_right-scroll" v-if="curIndex>-1" scroll-x="true">
|
|
<view class="nav-paili" :class="{'nav-pailiz':curIndex2==-1}"
|
|
@tap="changeCTab" :data-id="clist[curIndex].id" data-index="-1">全部</view>
|
|
<view class="nav-paili" :class="{'nav-pailiz':curIndex2== idx2}"
|
|
v-for="(item, idx2) in clist[curIndex].child" :key="idx2" @tap="changeCTab"
|
|
:data-id="item.id" :data-index="idx2">{{item.name}}</view>
|
|
</scroll-view>
|
|
<view class="nav_right-content">
|
|
<scroll-view class="classify-box" scroll-y="true" @scrolltolower="scrolltolower">
|
|
<view class="product-itemlist">
|
|
<view class="item" v-for="(item,index) in datalist" :key="index" @click="goto"
|
|
:data-url="'/pages/shop/product?id='+item.id">
|
|
<view class="product-pic">
|
|
<image class="image" :src="item.pic" mode="widthFix" />
|
|
</view>
|
|
<view class="product-info flex j-between">
|
|
<view class="product-info__name"><text>{{item.name}}</text></view>
|
|
<view class="product-info__bot flex j-between">
|
|
<view class="product-info__price">
|
|
<text class="current-price"><text
|
|
class="symbol">￥</text>{{item.sell_price}}</text>
|
|
<text class="original-price"
|
|
v-if="item.market_price*1 > item.sell_price*1">￥{{item.market_price}}</text>
|
|
</view>
|
|
<view class="car-btn"
|
|
@click.stop="buydialogChange" :data-proid="item.id"><text
|
|
class="iconfont icon-jiahao"></text></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<nomore text="没有更多商品了" v-if="nomore"></nomore>
|
|
<nodata text="暂无相关商品" v-if="nodata"></nodata>
|
|
<view style="width:100%;height:100rpx"></view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</block>
|
|
<buydialog v-if="buydialogShow" :proid="proid" @buydialogChange="buydialogChange" :menuindex="menuindex">
|
|
</buydialog>
|
|
<loading v-if="loading" ></loading>
|
|
<dp-tabbar v-if="tab_show" :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
|
|
<popmsg ref="popmsg"></popmsg>
|
|
<!-- 弹窗 -->
|
|
<view class="hm_box" v-if="hm_show">
|
|
<view class="contoent">
|
|
<view class="title">
|
|
检测到您的定位已经发生变化，是否切换店铺为你提供服务？
|
|
</view>
|
|
|
|
<view class="item">
|
|
<text class="wai" @click="hm30_show = !hm30_show "><text v-if="hm30_show" class="nei"></text></text> 最近30天内不显示该选项
|
|
</view>
|
|
<view class="btn_box">
|
|
<view class="left" @click="hm_btn(1)">
|
|
切换
|
|
</view>
|
|
<view class="right" @click="hm_btn(0)">
|
|
不切换
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 悬浮按钮 -->
|
|
<drag-button></drag-button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var app = getApp();
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
tab_show:true,
|
|
class_hm30_show: uni.getStorageSync('class_hm30_show') || '',
|
|
hm_show:false,
|
|
hm30_show:false,
|
|
storeInfo: uni.getStorageSync('class_store_info')?JSON.parse(uni.getStorageSync('class_store_info')): {},
|
|
opt: {},
|
|
loading: false,
|
|
isload: false,
|
|
menuindex: -1,
|
|
pagenum: 1,
|
|
nomore: false,
|
|
nodata: false,
|
|
order: '',
|
|
field: '',
|
|
clist: [],
|
|
curIndex: -1,
|
|
curIndex2: -1,
|
|
datalist: [],
|
|
nodata: false,
|
|
curCid: 0,
|
|
proid: 0,
|
|
buydialogShow: false,
|
|
bid: '',
|
|
menuButtonTop: 0,
|
|
menuButtonHeight: 40,
|
|
isShowBack: true,
|
|
|
|
event_rul: app.globalData.event_url,
|
|
};
|
|
},
|
|
|
|
onLoad: function(opt) {
|
|
this.opt = app.getopts(opt);
|
|
const pages = getCurrentPages();
|
|
if (pages.length === 1) {
|
|
this.isShowBack = false;
|
|
} else {
|
|
this.isShowBack = true;
|
|
}
|
|
|
|
if(this.storeInfo.id){
|
|
this.bid = this.storeInfo.id ||'';
|
|
}else{
|
|
this.bid = this.opt.bid ||'';
|
|
}
|
|
|
|
|
|
|
|
if(opt.homeType){ //首页进来,默认全部商品
|
|
this.storeInfo ={};
|
|
this.bid= '';
|
|
this.tab_show = false;
|
|
|
|
}else{
|
|
if(this.storeInfo.id&&(!this.class_hm30_show || Number(new Date) >(this.class_hm30_show+ 2592000000))){
|
|
this.resetFn();
|
|
}
|
|
}
|
|
// #ifdef MP
|
|
// 获取右上角胶囊坐标信息
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
|
this.menuButtonHeight = menuButtonInfo.height; // 胶囊的高度
|
|
|
|
if(this.storeInfo.name) {
|
|
this.menuButtonTop = menuButtonInfo.top - (48 - this.menuButtonHeight) / 2;
|
|
} else {
|
|
this.menuButtonTop = menuButtonInfo.top;
|
|
}
|
|
// #endif
|
|
|
|
|
|
this.getdata();
|
|
|
|
},
|
|
onPullDownRefresh: function() {
|
|
this.getdata();
|
|
},
|
|
methods: {
|
|
hm_btn(e){
|
|
if(this.hm30_show){
|
|
uni.setStorageSync('class_hm30_show',Number(new Date))
|
|
}
|
|
if(e == 1){
|
|
uni.navigateTo({
|
|
url:'/pagesA/shop/sizeShop'
|
|
})
|
|
}else{
|
|
this.hm_show = false;
|
|
}
|
|
},
|
|
resetFn(){
|
|
var that = this;
|
|
let newTime = Number(new Date)
|
|
let oldTime = this.storeInfo.resetTime || 0
|
|
console.log(newTime,oldTime)
|
|
if(newTime > (oldTime+3600000)){
|
|
app.getLocation(function(res) {
|
|
var latitude = res.latitude;
|
|
var longitude = res.longitude;
|
|
app.post('ApiBusiness/nearby',{latitude,longitude,bid:that.bid},function (res){
|
|
if(res.bid !== 0){
|
|
that.hm_show = true;
|
|
}
|
|
})
|
|
})
|
|
|
|
}
|
|
},
|
|
getdata: function() {
|
|
var that = this;
|
|
var nowcid = that.opt.cid;
|
|
if (!nowcid) nowcid = '';
|
|
that.pagenum = 1;
|
|
that.datalist = [];
|
|
that.loading = true;
|
|
app.get('ApiShop/classify', {
|
|
cid: nowcid,
|
|
bid: that.bid
|
|
}, function(res) {
|
|
that.loading = false;
|
|
var clist = res.data;
|
|
that.clist = clist;
|
|
if (nowcid) {
|
|
for (var i = 0; i < clist.length; i++) {
|
|
if (clist[i]['id'] == nowcid) {
|
|
that.curIndex = i;
|
|
that.curCid = nowcid;
|
|
}
|
|
var downcdata = clist[i]['child'];
|
|
var isget = 0;
|
|
for (var j = 0; j < downcdata; j++) {
|
|
if (downcdata[j]['id'] == nowcid) {
|
|
that.curIndex = i;
|
|
that.curIndex2 = j;
|
|
that.curCid = nowcid;
|
|
isget = 1;
|
|
break;
|
|
}
|
|
}
|
|
if (isget) break;
|
|
}
|
|
}
|
|
that.loaded();
|
|
that.getdatalist();
|
|
});
|
|
},
|
|
|
|
getdatalist: function(loadmore) {
|
|
if (!loadmore) {
|
|
this.pagenum = 1;
|
|
this.datalist = [];
|
|
}
|
|
|
|
var that = this;
|
|
|
|
var pagenum = that.pagenum;
|
|
|
|
var cid = that.curCid;
|
|
var bid = this.bid;
|
|
var order = that.order;
|
|
|
|
var field = that.field;
|
|
that.loading = true;
|
|
that.nodata = false;
|
|
that.nomore = false;
|
|
var wherefield = {};
|
|
wherefield.pagenum = pagenum;
|
|
wherefield.field = field;
|
|
wherefield.order = order;
|
|
wherefield.bid = bid;
|
|
if (bid > 0) {
|
|
wherefield.cid2 = cid;
|
|
} else {
|
|
wherefield.cid = cid;
|
|
}
|
|
app.post('ApiShop/getprolist', wherefield, function(res) {
|
|
that.loading = false;
|
|
|
|
uni.stopPullDownRefresh();
|
|
|
|
var data = res.data;
|
|
if (data.length == 0) {
|
|
if (pagenum == 1) {
|
|
that.nodata = true;
|
|
} else {
|
|
that.nomore = true;
|
|
}
|
|
}
|
|
var datalist = that.datalist;
|
|
var newdata = datalist.concat(data);
|
|
that.datalist = newdata;
|
|
});
|
|
|
|
},
|
|
|
|
scrolltolower: function() {
|
|
|
|
if (!this.nomore) {
|
|
|
|
this.pagenum = this.pagenum + 1;
|
|
this.getdatalist(true);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//改变子分类
|
|
|
|
changeCTab: function(e) {
|
|
|
|
var that = this;
|
|
|
|
var id = e.currentTarget.dataset.id;
|
|
var index = parseInt(e.currentTarget.dataset.index);
|
|
|
|
this.curIndex2 = index;
|
|
this.nodata = false;
|
|
|
|
this.curCid = id;
|
|
|
|
this.pagenum = 1;
|
|
|
|
this.datalist = [];
|
|
|
|
this.nomore = false;
|
|
|
|
this.getdatalist();
|
|
|
|
},
|
|
|
|
//改变排序规则
|
|
|
|
changeOrder: function(e) {
|
|
|
|
var t = e.currentTarget.dataset;
|
|
|
|
this.field = t.field;
|
|
this.order = t.order;
|
|
|
|
this.pagenum = 1;
|
|
this.datalist = [];
|
|
this.nomore = false;
|
|
|
|
this.getdatalist();
|
|
|
|
},
|
|
|
|
//事件处理函数
|
|
|
|
switchRightTab: function(e) {
|
|
|
|
var that = this;
|
|
|
|
var id = e.currentTarget.dataset.id;
|
|
|
|
var index = parseInt(e.currentTarget.dataset.index);
|
|
|
|
this.curIndex = index;
|
|
this.curIndex2 = -1;
|
|
this.nodata = false;
|
|
this.curCid = id;
|
|
this.pagenum = 1;
|
|
this.datalist = [];
|
|
this.nomore = false;
|
|
|
|
this.getdatalist();
|
|
|
|
},
|
|
buydialogChange: function(e) {
|
|
if (!this.buydialogShow) {
|
|
this.proid = e.currentTarget.dataset.proid
|
|
}
|
|
this.buydialogShow = !this.buydialogShow;
|
|
},
|
|
goBack() {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
})
|
|
}
|
|
}
|
|
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
// 弹窗
|
|
.hm_box{
|
|
position: fixed;
|
|
z-index: 9;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
background-color: rgba($color: #000000, $alpha: .5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.contoent{
|
|
width: 598rpx;
|
|
background-color: #fff;
|
|
padding: 60rpx 50rpx 44rpx;
|
|
border-radius: 12rpx;
|
|
.title {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
}
|
|
.btn_box{
|
|
margin-top: 50rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.left,.right{
|
|
width: 336rpx;
|
|
text-align: center;
|
|
padding: 0rpx 20rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
line-height: 80rpx;
|
|
}
|
|
.left {
|
|
border: 1rpx solid #E8E8E8;
|
|
}
|
|
.right{
|
|
margin-left: 26rpx;
|
|
color: #FFFFFF;
|
|
background: linear-gradient(to right,#00AE68 0%,#096742 100%);
|
|
}
|
|
}
|
|
.item{
|
|
margin-top: 20rpx;
|
|
width: 100%;
|
|
justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
line-height: 34rpx;
|
|
.wai{
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 6rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
padding: 4rpx;
|
|
border: 1px solid#0A5D3B;
|
|
}
|
|
.nei{
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background-color: #0A5D3B;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.coentent_box{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.nav-pai1{
|
|
width: 100%;display:flex;align-items:center;justify-content:center;background: #FFF;
|
|
.nav-paili1{
|
|
flex:1; text-align:center;color:#999; font-size:28rpx;height:80rpx;line-height:80rpx;
|
|
&.actived,.selected {
|
|
font-weight:bold;
|
|
position: relative;
|
|
color: #333;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
&::after {
|
|
content: '';position: absolute;left: 50%;bottom: 10rpx;width:42rpx;height: 6rpx;transform: translateX(-50%);background: #0A5D3B;border-radius: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
.nav-paili1 .iconshangla{position: absolute;top:-4rpx;padding: 0 6rpx;font-size: 20rpx;color:#7D7D7D}
|
|
.nav-paili1 .icondaoxu{position: absolute;top: 8rpx;padding: 0 6rpx;font-size: 20rpx;color:#7D7D7D}
|
|
|
|
}
|
|
.head_nav{
|
|
margin-bottom: 20rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.item{
|
|
color: #333;
|
|
}
|
|
.itemz{
|
|
color: #f0bd71;
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
}
|
|
.pages-hd {
|
|
background: #FFF;
|
|
&__search {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12rpx 24rpx 10rpx;
|
|
// #ifdef H5
|
|
padding: 28rpx 24rpx 10rpx;
|
|
// #endif
|
|
.left {
|
|
margin-right: 16rpx;
|
|
.l_top {
|
|
color: #333;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #F7F7F7;
|
|
height: 72rpx;
|
|
border-radius: 36rpx;
|
|
padding: 0 20rpx;
|
|
flex-shrink: 0;
|
|
width: 274rpx;
|
|
|
|
.txt {
|
|
font-weight: 28rpx;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin: 0 20rpx;
|
|
}
|
|
.iconfont {
|
|
color: #333333;
|
|
font-weight: 600;
|
|
}
|
|
.icon-dianpu1 {
|
|
font-size: 32rpx;
|
|
}
|
|
.icon-shang {
|
|
font-size: 22rpx;
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__shop {
|
|
padding: 22rpx 24rpx 10rpx;
|
|
.shop-name {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 44rpx;
|
|
.iconfont {
|
|
font-size: 36rpx;
|
|
line-height: 44rpx;
|
|
}
|
|
}
|
|
.shop-distance {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
line-height: 36rpx;
|
|
margin-top: 12rpx;
|
|
.iconfont {
|
|
font-size: 28rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
page {
|
|
height: 100%;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #f5f5f5;
|
|
display: flex;
|
|
flex-direction: column
|
|
}
|
|
.product-box {
|
|
.product-item {
|
|
width: 340rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 24rpx;
|
|
&__hd {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.product-img {
|
|
width: 100%rpx;
|
|
height: 260rpx;
|
|
}
|
|
.item-info {
|
|
padding: 24rpx 20rpx;
|
|
width: 100%;
|
|
&__name {
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
line-height: 36rpx;
|
|
height: 72rpx;
|
|
}
|
|
&__salse {
|
|
margin-top: 10rpx;
|
|
font-size: 20rpx;
|
|
color: #999999;
|
|
line-height: 22rpx;
|
|
}
|
|
&__price {
|
|
margin-top: 4rpx;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #ED5925;
|
|
line-height:50rpx;
|
|
.symbol {
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
}
|
|
}
|
|
&__shop {
|
|
margin-top: 14rpx;
|
|
&-bd {
|
|
flex: 1;
|
|
|
|
}
|
|
&-logo {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
margin-right: 6rpx;
|
|
}
|
|
&-name {
|
|
flex: 1;
|
|
max-width: 175rpx;
|
|
font-size: 22rpx;
|
|
color: #666666;
|
|
line-height: 32rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
&-cart {
|
|
width:52rpx;
|
|
height:52rpx;
|
|
background: linear-gradient(to bottom,#01a664 0%,#086e45 100%);
|
|
|
|
.iconfont {
|
|
font-size:36rpx;
|
|
height: 52rpx;
|
|
line-height: 50rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.product-b-t {
|
|
padding-top: 28rpx;
|
|
|
|
.b-t1 {
|
|
color: #ED5925;
|
|
font-size: 24rpx;
|
|
}
|
|
.b-t2 {
|
|
font-size: 36rpx;
|
|
margin-left: 6rpx;
|
|
}
|
|
.car {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
background: linear-gradient(to bottom,#F96648 0%,#FD4641 100%);
|
|
|
|
.icon-gouwuche1 {
|
|
color: #fff;
|
|
font-size: 36rpx;
|
|
line-height: 44rpx;
|
|
height: 48rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.shops-cont:nth-child(2n) {
|
|
// margin-left: calc(100% - 680rpx);
|
|
margin-left: 2%;
|
|
}
|
|
.shops-cont:nth-child(n + 3) {
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
.navigation {
|
|
box-sizing: content-box;
|
|
.icon-icon_arrow_left {
|
|
font-size: 45rpx;
|
|
color: #000000;
|
|
}
|
|
&-title {
|
|
flex: 1;
|
|
padding-right: 44rpx;
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 50rpx;
|
|
}
|
|
}
|
|
|
|
.search-container {
|
|
width: 100%;
|
|
height: 72rpx;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 36rpx;
|
|
border: 0;
|
|
background-color: #F7F7F7;
|
|
flex: 1
|
|
}
|
|
|
|
.search-box .img {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 16rpx;
|
|
margin-left: 20rpx
|
|
}
|
|
|
|
.search-box .search-text {
|
|
font-size: 28rpx;
|
|
color: #C2C2C2;
|
|
width: 100%;
|
|
}
|
|
|
|
.content-container {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav_left {
|
|
width: 176rpx;
|
|
height: 100%;
|
|
background: #F5F5F5;
|
|
overflow-y: scroll;
|
|
&_items {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #666666;
|
|
font-size: 28rpx;
|
|
line-height: 108rpx;
|
|
&.active {
|
|
position: relative;
|
|
background: #fff;
|
|
color: #333333;
|
|
font-size: 28rpx;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
font-weight: bold;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: relative;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 6rpx;
|
|
height: 46rpx;
|
|
border-radius: 6rpx;
|
|
background: #0A5D3B;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav_right {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #FFFFFF;
|
|
box-sizing: border-box;
|
|
padding: 20rpx 20rpx 0 20rpx;
|
|
&-scroll {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
& ::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav_right-content {
|
|
background: #ffffff;
|
|
padding-right: 20rpx;
|
|
height: 100%
|
|
}
|
|
|
|
.nav-paili {
|
|
display: inline-block;
|
|
margin: 0 10rpx 20rpx 0;
|
|
min-width: 96rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 22rpx;
|
|
border-radius: 54rpx;
|
|
background: #F7F7F7;
|
|
height: 54rpx;
|
|
line-height: 54rpx;
|
|
color: #666;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.nav-pailiz {
|
|
background: #E2F7EF;
|
|
color: #0A5D3B;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nav-paili .iconshangla {
|
|
position: absolute;
|
|
top: -4rpx;
|
|
padding: 0 6rpx;
|
|
font-size: 20rpx;
|
|
color: #7D7D7D
|
|
}
|
|
|
|
.nav-paili .icondaoxu {
|
|
position: absolute;
|
|
top: 8rpx;
|
|
padding: 0 6rpx;
|
|
font-size: 20rpx;
|
|
color: #7D7D7D
|
|
}
|
|
|
|
.classify-ul {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
.classify-li {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
background: #F5F6F8;
|
|
border-radius: 22rpx;
|
|
color: #6C737F;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
padding: 0 28rpx;
|
|
margin: 12rpx 10rpx 12rpx 0
|
|
}
|
|
|
|
.classify-box {
|
|
width: 100%;
|
|
height: calc(100%);
|
|
overflow-y: scroll;
|
|
& ::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.classify-box .nav_right_items {
|
|
width: 100%;
|
|
border-bottom: 1px #f4f4f4 solid;
|
|
padding: 16rpx 0;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
|
|
.product-itemlist {
|
|
height: auto;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 0px;
|
|
display: flex;
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
.product-itemlist .item {
|
|
width: 100%;
|
|
display: inline-block;
|
|
position: relative;
|
|
margin-bottom: 12rpx;
|
|
background: #fff;
|
|
display: flex;
|
|
padding: 14rpx 0;
|
|
border-radius: 10rpx;
|
|
border-bottom: 1px solid #F4F4F4;
|
|
}
|
|
|
|
.product-itemlist .product-pic {
|
|
width: 180rpx;
|
|
overflow: hidden;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.product-itemlist .product-pic .image {
|
|
width: 100%;
|
|
}
|
|
.product-itemlist .product-info {
|
|
flex-direction: column;
|
|
flex: 1;
|
|
padding: 0 10rpx 5rpx 20rpx;
|
|
&__name {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 36rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
/* autoprefixer: ignore next */
|
|
-webkit-box-orient: vertical;
|
|
text-align: justify;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
&__price {
|
|
.current-price {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #ED5925;
|
|
line-height: 36rpx;
|
|
}
|
|
.original-price {
|
|
margin-left: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #aaa;
|
|
text-decoration: line-through;
|
|
}
|
|
.symbol {
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
.icon-jiahao {
|
|
color: #068150;
|
|
font-size: 45rpx;
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
color: transparent;
|
|
}
|
|
</style>
|
|
|