|
|
|
@ -1,54 +1,68 @@ |
|
|
|
<template> |
|
|
|
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback"> |
|
|
|
<!-- 页面头部 --> |
|
|
|
<view class="header"> |
|
|
|
<search class="search" :tips="options.search ? options.search : '搜索标的'" @event="handleSearch" /> |
|
|
|
<!-- 切换列表显示方式 --> |
|
|
|
<view class="show-view" @click="handleShowView"> |
|
|
|
<text class="iconfont icon-view-tile" v-if="showView"></text> |
|
|
|
<text class="iconfont icon-view-list" v-else></text> |
|
|
|
<!-- 搜索 --> |
|
|
|
<view class="sozone"> |
|
|
|
<view class="sovue"> |
|
|
|
<view class="search-wrapper"> |
|
|
|
<view class="search-input"> |
|
|
|
<view class="search-input-wrapper"> |
|
|
|
<view class="left"> |
|
|
|
<text class="search-icon iconfont icon-search"></text> |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<input v-model="searchValue" class="input" focus="true" placeholder="请输入搜索关键词" type="text"> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 标的列表 --> |
|
|
|
<view class="goods-list clearfix" :class="['column-' + (showView ? '1' : '2')]"> |
|
|
|
<view class="goods-item" v-for="(item, index) in list.data" :key="index" @click="onTargetDetail(item.goods_id)"> |
|
|
|
<!-- 单列显示 --> |
|
|
|
<view v-if="showView" class="dis-flex"> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="search-button"> |
|
|
|
<view class="button" @click="onSearch">搜索</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 基本信息 --> |
|
|
|
<view class="dis-flex"> |
|
|
|
<!-- 图片 --> |
|
|
|
<view class="goods-item_left"> |
|
|
|
<image class="image" :src="item.goods_image|gdimg"></image> |
|
|
|
<image class="image" :src="userList.doorHeadPhoto"></image> |
|
|
|
</view> |
|
|
|
<view class="goods-item_right"> |
|
|
|
<!-- 名称 --> |
|
|
|
<view class="goods-name"> |
|
|
|
<text class="twoline-hide">{{ item.goods_name }}</text> |
|
|
|
<text class="twoline-hide">{{ userList.name }}</text> |
|
|
|
</view> |
|
|
|
<view class="goods-item_desc"> |
|
|
|
<!-- 权益 --> |
|
|
|
<view class="desc-selling_point dis-flex"> |
|
|
|
<text class="oneline-hide">{{ item.goods_ownership_str }}</text> |
|
|
|
<view class="goods-auth-type"> |
|
|
|
<text class="twoline-hide">{{ userList.authType }}</text> |
|
|
|
</view> |
|
|
|
<!-- 用户 --> |
|
|
|
<view class="desc-selling_point dis-flex"> |
|
|
|
<text class="oneline-hide">{{ item.username }}</text> |
|
|
|
</view> |
|
|
|
<!-- 销量 --> |
|
|
|
<view class="desc-goods_sales dis-flex"> |
|
|
|
<text>已售{{ item.sale_count }}件</text> |
|
|
|
</view> |
|
|
|
<!-- 价格 --> |
|
|
|
<view class="desc_footer"> |
|
|
|
<text class="price_x">¥{{ item.price }}</text> |
|
|
|
<!-- 店铺信息 --> |
|
|
|
<view class="dis-flex-info"> |
|
|
|
<view class="vertical-line"></view> |
|
|
|
<view class="dis-flex-title">店铺信息</view> |
|
|
|
<view class="dis-flex-line"></view> |
|
|
|
<view class="dis-flex-content"> |
|
|
|
<text>卖方/授权方名称：{{userList.name}}</text> |
|
|
|
<text>认证类型：{{userList.userType}}</text> |
|
|
|
<text>认证状态：{{userList.stateStr}}</text> |
|
|
|
<text>交易主体标志码：{{userList.user_islicode}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!--排序--> |
|
|
|
<view class="order"> |
|
|
|
<view v-for="items in tabText" class="tab_text" :class="{tab_link : items.value === targetTab}" |
|
|
|
@click="changeTab(items.value)">{{ items.title }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 标的列表 --> |
|
|
|
<view class="goods-list clearfix"> |
|
|
|
<view class="goods-item" v-for="(item, index) in list.data" :key="index" @click="onTargetDetail(item.goods_islicode)"> |
|
|
|
<!-- 多列显示 --> |
|
|
|
<view v-else class=""> |
|
|
|
<view class="goods-item_left"> |
|
|
|
<!-- 图片 --> |
|
|
|
<view class="goods-image"> |
|
|
|
<image class="image" mode="aspectFill" :src="item.goods_image|gdimg"></image> |
|
|
|
<image class="image" mode="aspectFill" :src="item.gdimg"></image> |
|
|
|
</view> |
|
|
|
<view class="detail"> |
|
|
|
<!-- 标题 --> |
|
|
|
@ -58,6 +72,7 @@ |
|
|
|
<!-- 价格 --> |
|
|
|
<view class="detail-price oneline-hide"> |
|
|
|
<text class="goods-price f-30 col-m">￥{{ item.price }}</text> |
|
|
|
<text class="goods-sales">销量：{{item.sale_count}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -71,31 +86,26 @@ |
|
|
|
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins' |
|
|
|
import * as GoodsApi from '@/api/goods' |
|
|
|
import { getEmptyPaginateObj, getMoreListData } from '@/core/app' |
|
|
|
import Search from '@/components/search' |
|
|
|
|
|
|
|
//解压缩 |
|
|
|
import pako from '@/core/pako' |
|
|
|
import { base64ToUint8Array,numberWithCommas} from '@/utils/util' |
|
|
|
|
|
|
|
const pageSize = 15 |
|
|
|
const showViewKey = 'GoodsList-ShowView'; |
|
|
|
const pageSize = 8 |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
MescrollBody, |
|
|
|
Search |
|
|
|
}, |
|
|
|
|
|
|
|
mixins: [MescrollMixin], |
|
|
|
|
|
|
|
data() { |
|
|
|
return { |
|
|
|
showView: false, // 列表显示方式 (true列表、false平铺) |
|
|
|
sortType: 'all', // 排序类型 |
|
|
|
sortPrice: false, // 价格排序 (true高到低 false低到高) |
|
|
|
searchValue: '', |
|
|
|
options: {}, // 当前页面参数 |
|
|
|
list: getEmptyPaginateObj(), // 商品列表数据 |
|
|
|
|
|
|
|
userList: {}, |
|
|
|
// 上拉加载配置 |
|
|
|
upOption: { |
|
|
|
// 首次自动执行 |
|
|
|
@ -104,7 +114,26 @@ |
|
|
|
page: { size: pageSize }, |
|
|
|
// 数量要大于4条才显示无更多数据 |
|
|
|
noMoreSize: 4, |
|
|
|
} |
|
|
|
}, |
|
|
|
tabText: [ |
|
|
|
{ |
|
|
|
title: '上新排序', |
|
|
|
value: 1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '销量排序', |
|
|
|
value: 2 |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '价格排序', |
|
|
|
value: 3 |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '更多', |
|
|
|
value: 4 |
|
|
|
}, |
|
|
|
], |
|
|
|
targetTab: 1, |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
@ -114,32 +143,46 @@ |
|
|
|
onLoad(options) { |
|
|
|
// 记录options |
|
|
|
this.options = options |
|
|
|
// 设置默认列表显示方式 |
|
|
|
this.setShowView() |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
|
|
|
|
// 搜索 |
|
|
|
async onSearch() { |
|
|
|
if (this.searchValue == '') { |
|
|
|
this.$error('请输入搜索关键词'); |
|
|
|
} else { |
|
|
|
await this.getGoodsList() |
|
|
|
await this.getHomeListImage() |
|
|
|
} |
|
|
|
}, |
|
|
|
// 切换tab |
|
|
|
async changeTab(val) { |
|
|
|
if (val == 4) { |
|
|
|
this.$error('更多内容，敬请期待！') |
|
|
|
} else { |
|
|
|
this.targetTab = val |
|
|
|
await this.getGoodsList() |
|
|
|
await this.getHomeListImage() |
|
|
|
} |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 上拉加载的回调 (页面初始化时也会执行一次) |
|
|
|
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
|
|
|
* @param {Object} page |
|
|
|
*/ |
|
|
|
upCallback(page) { |
|
|
|
async upCallback(page) { |
|
|
|
const app = this |
|
|
|
// 设置列表数据 |
|
|
|
app.getGoodsList(page.num) |
|
|
|
await app.getGoodsList(page.num) |
|
|
|
.then(list => { |
|
|
|
const curPageLen = list.data.length |
|
|
|
const totalSize = list.data.total |
|
|
|
app.mescroll.endBySize(curPageLen, totalSize) |
|
|
|
}) |
|
|
|
.catch(() => app.mescroll.endErr()) |
|
|
|
}, |
|
|
|
|
|
|
|
// 设置默认列表显示方式 |
|
|
|
setShowView() { |
|
|
|
this.showView = uni.getStorageSync(showViewKey) || false |
|
|
|
// 标的列表 |
|
|
|
await app.getHomeListImage() |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
@ -149,33 +192,63 @@ |
|
|
|
getGoodsList(pageNo = 1) { |
|
|
|
const app = this |
|
|
|
const param = { |
|
|
|
// "pay_type":2,"goods_status":1,"page":1,"limit":6 |
|
|
|
order: 'desc', |
|
|
|
order_type: 'id', |
|
|
|
//entrust_user_name: app.options.k, |
|
|
|
goods_name:app.options.search, |
|
|
|
authorization: '', |
|
|
|
entrust_name: '', |
|
|
|
entrust_user_name: app.options.k, |
|
|
|
goods_status: '1', |
|
|
|
limit: pageSize, |
|
|
|
order: 'desc', |
|
|
|
order_type: '', |
|
|
|
page: pageNo, |
|
|
|
limit: pageSize |
|
|
|
record_type: '', |
|
|
|
source_type: '', |
|
|
|
} |
|
|
|
if (app.searchValue != '') { |
|
|
|
param.goods_name = app.searchValue |
|
|
|
} |
|
|
|
if (app.targetTab === 2) { |
|
|
|
param.order_type = 'sale' |
|
|
|
} else if (app.targetTab === 3) { |
|
|
|
param.order_type = 'price' |
|
|
|
} |
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
GoodsApi.nbgoods(param) |
|
|
|
//GoodsApi.soglist(param) |
|
|
|
//GoodsApi.list(param) |
|
|
|
.then(result => { |
|
|
|
// 合并新数据 |
|
|
|
const newList = result.data |
|
|
|
const newList = app.initList(result.data) |
|
|
|
app.list.data = getMoreListData(newList, app.list, pageNo) |
|
|
|
app.getHomeListImage() |
|
|
|
app.userList = newList.data[0].user |
|
|
|
app.userList.stateStr = this.getUserStateStr(app.userList.state) |
|
|
|
app.userList.user_islicode = newList.data[0].user_islicode |
|
|
|
resolve(newList) |
|
|
|
}) |
|
|
|
.catch(reject) |
|
|
|
}) |
|
|
|
}, |
|
|
|
getUserStateStr(state){ |
|
|
|
let str = '' |
|
|
|
if (state == "1" || state == "3" || state == "7" || state == "0") { |
|
|
|
str = '认证中' |
|
|
|
} else if (state == "2" || state == "4" || state == "5") { |
|
|
|
str = '认证失败' |
|
|
|
} else if (state == "6") { |
|
|
|
str = '认证成功' |
|
|
|
} |
|
|
|
return str |
|
|
|
}, |
|
|
|
// 初始化订单列表数据 |
|
|
|
initList(newList) { |
|
|
|
newList.data.forEach(item => { |
|
|
|
// 处理价格表现形式 |
|
|
|
item.price = numberWithCommas(item.price) |
|
|
|
item.gdimg = item.goods_image === "" ? '' : pako.inflateRaw(base64ToUint8Array(item.goods_image), {to: 'string'}) |
|
|
|
}) |
|
|
|
return newList |
|
|
|
}, |
|
|
|
async getHomeListImage() { |
|
|
|
this.list.data.forEach((item,key) => { |
|
|
|
this.list.data.forEach((item, key) => { |
|
|
|
if (item.goods_image === "") { |
|
|
|
GoodsApi.nbgoodsImage({"id": item.id}).then(res2=>{ |
|
|
|
GoodsApi.nbgoodsImage({"id": item.id}).then(res2 => { |
|
|
|
if (res2.code === 200) { |
|
|
|
this.list.data[key].goods_image = res2.data.data[0].goods_image; |
|
|
|
this.list.data[key].gdimg = pako.inflateRaw(base64ToUint8Array(res2.data.data[0].goods_image), {to: 'string'}) |
|
|
|
@ -184,33 +257,6 @@ |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 整理列表数据 |
|
|
|
initList(newList) { |
|
|
|
newList.data.forEach(item => { |
|
|
|
// 处理价格表现形式 |
|
|
|
item.price = numberWithCommas(item.price) |
|
|
|
item.gdimg = pako.inflateRaw(base64ToUint8Array(item.goods_image), {to: 'string'}) |
|
|
|
}) |
|
|
|
return newList |
|
|
|
}, |
|
|
|
|
|
|
|
// 切换排序方式 |
|
|
|
handleSortType(newSortType) { |
|
|
|
const app = this |
|
|
|
const newSortPrice = newSortType === 'price' ? !app.sortPrice : true |
|
|
|
app.sortType = newSortType |
|
|
|
app.sortPrice = newSortPrice |
|
|
|
// 刷新列表数据 |
|
|
|
app.list = getEmptyPaginateObj() |
|
|
|
app.mescroll.resetUpScroll() |
|
|
|
}, |
|
|
|
|
|
|
|
// 切换列表显示方式 |
|
|
|
handleShowView() { |
|
|
|
const app = this |
|
|
|
app.showView = !app.showView |
|
|
|
uni.setStorageSync(showViewKey, app.showView) |
|
|
|
}, |
|
|
|
|
|
|
|
// 跳转商品详情页 |
|
|
|
onTargetDetail(gislicode) { |
|
|
|
@ -234,175 +280,246 @@ |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
filters:{ |
|
|
|
// 解压缩图片 |
|
|
|
gdimg:function(value){ |
|
|
|
return pako.inflateRaw(base64ToUint8Array(value), {to: 'string'}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
// 页面头部 |
|
|
|
.header { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
// 搜索框 |
|
|
|
.search { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
// 搜索 |
|
|
|
.sozone{ |
|
|
|
position: relative; |
|
|
|
z-index: 70; |
|
|
|
|
|
|
|
// 切换显示方式 |
|
|
|
.show-view { |
|
|
|
width: 60rpx; |
|
|
|
height: 60rpx; |
|
|
|
line-height: 60rpx; |
|
|
|
font-size: 36rpx; |
|
|
|
color: #505050; |
|
|
|
} |
|
|
|
.sovue{ |
|
|
|
position: absolute; |
|
|
|
top: -100rpx; |
|
|
|
left: 4rpx; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
// 排序组件 |
|
|
|
.store-sort { |
|
|
|
position: sticky; |
|
|
|
top: var(--window-top); |
|
|
|
.search-wrapper { |
|
|
|
display: flex; |
|
|
|
padding: 20rpx 0; |
|
|
|
font-size: 28rpx; |
|
|
|
height: 84rpx; |
|
|
|
} |
|
|
|
|
|
|
|
// 搜索输入框 |
|
|
|
.search-input { |
|
|
|
width: 80%; |
|
|
|
background: #fff; |
|
|
|
color: #000; |
|
|
|
z-index: 99; |
|
|
|
border-radius: 10rpx 0 0 10rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.sort-item { |
|
|
|
flex-basis: 33.3333%; |
|
|
|
.search-input-wrapper { |
|
|
|
display: flex; |
|
|
|
|
|
|
|
.left { |
|
|
|
display: flex; |
|
|
|
width: 60rpx; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 50rpx; |
|
|
|
|
|
|
|
&.active { |
|
|
|
color: #e49a3d; |
|
|
|
} |
|
|
|
.search-icon { |
|
|
|
display: block; |
|
|
|
color: #b4b4b4; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.sort-item-price .price-arrow { |
|
|
|
margin-left: 20rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #000; |
|
|
|
|
|
|
|
.icon { |
|
|
|
&.active { |
|
|
|
color: #e49a3d; |
|
|
|
} |
|
|
|
|
|
|
|
&.up { |
|
|
|
margin-bottom: -16rpx; |
|
|
|
} |
|
|
|
.right { |
|
|
|
flex: 1; |
|
|
|
|
|
|
|
&.down { |
|
|
|
margin-top: -16rpx; |
|
|
|
input { |
|
|
|
font-size: 28rpx; |
|
|
|
height: 84rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.input-placeholder { |
|
|
|
color: #aba9a9; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 商品列表 |
|
|
|
.goods-list { |
|
|
|
padding: 4rpx; |
|
|
|
// 搜索按钮 |
|
|
|
.search-button { |
|
|
|
width: 20%; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.button { |
|
|
|
height: 84rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
border-radius: 0 10rpx 10rpx 0; |
|
|
|
background: #4399ff; |
|
|
|
color: #fff; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 单列显示 |
|
|
|
.goods-list.column-1 { |
|
|
|
.goods-item { |
|
|
|
width: 100%; |
|
|
|
height: 280rpx; |
|
|
|
margin-bottom: 12rpx; |
|
|
|
padding: 20rpx; |
|
|
|
// 店铺基本信息 |
|
|
|
.dis-flex { |
|
|
|
display: flex; |
|
|
|
width: 90%; |
|
|
|
height: 240rpx; |
|
|
|
margin: 100rpx 10rpx 20rpx 40rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
background: #fff; |
|
|
|
line-height: 1.6; |
|
|
|
|
|
|
|
&:last-child { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
border-radius: 15rpx; |
|
|
|
|
|
|
|
.goods-item_left { |
|
|
|
display: flex; |
|
|
|
width: 300rpx; |
|
|
|
width: 220rpx; |
|
|
|
background: #fff; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.image { |
|
|
|
display: block; |
|
|
|
width: 240rpx; |
|
|
|
height: 240rpx; |
|
|
|
width: 200rpx; |
|
|
|
height: 200rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.goods-item_right { |
|
|
|
margin-top: 20rpx; |
|
|
|
|
|
|
|
.goods-auth-type { |
|
|
|
margin-top: 40rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #fbb154; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
// 店铺信息 |
|
|
|
.dis-flex-info { |
|
|
|
|
|
|
|
position: relative; |
|
|
|
// width: 450rpx; |
|
|
|
flex: 1; |
|
|
|
width: 90%; |
|
|
|
height: 300rpx; |
|
|
|
background: #fff; |
|
|
|
margin: 20rpx 40rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
color: #15192d; |
|
|
|
|
|
|
|
.goods-name { |
|
|
|
margin-top: 10rpx; |
|
|
|
min-height: 68rpx; |
|
|
|
line-height: 1.3; |
|
|
|
.vertical-line { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
width: 12px; |
|
|
|
height: 100%; |
|
|
|
border-top-left-radius: 10rpx; |
|
|
|
border-bottom-left-radius: 10rpx; |
|
|
|
background: linear-gradient(to bottom, #15192d, #15192d 50%); /* 渐变背景色 */ |
|
|
|
} |
|
|
|
.dis-flex-title { |
|
|
|
font-size: 30rpx; |
|
|
|
margin-left: 40rpx; |
|
|
|
padding-top: 20rpx; |
|
|
|
padding-bottom: 10rpx; |
|
|
|
} |
|
|
|
.dis-flex-line { |
|
|
|
border-bottom: 5rpx #15192d solid; |
|
|
|
} |
|
|
|
.dis-flex-content { |
|
|
|
margin: 20rpx 40rpx; |
|
|
|
white-space: normal; |
|
|
|
color: #484848; |
|
|
|
text { |
|
|
|
display: block; |
|
|
|
margin-bottom: 10rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.goods-item_desc { |
|
|
|
margin-top: 8rpx; |
|
|
|
// 排序 |
|
|
|
.order { |
|
|
|
display: flex; |
|
|
|
padding: 20rpx 10rpx 20rpx; |
|
|
|
margin-left: -55rpx; |
|
|
|
z-index: 65; |
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
.tab_text { |
|
|
|
display: inline-block; |
|
|
|
color: #1b223b; |
|
|
|
font-size: 30rpx; |
|
|
|
margin-left: 80rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.desc-selling_point { |
|
|
|
width: 400rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #e49a3d; |
|
|
|
.tab_link { |
|
|
|
border-bottom: 5rpx #1b223b solid; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.desc-goods_sales { |
|
|
|
color: #999; |
|
|
|
font-size: 24rpx; |
|
|
|
// 排序组件 |
|
|
|
.store-sort { |
|
|
|
position: sticky; |
|
|
|
top: var(--window-top); |
|
|
|
display: flex; |
|
|
|
padding: 20rpx 0; |
|
|
|
font-size: 28rpx; |
|
|
|
background: #fff; |
|
|
|
color: #1b223b; |
|
|
|
z-index: 99; |
|
|
|
|
|
|
|
.sort-item { |
|
|
|
flex-basis: 33.3333%; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 50rpx; |
|
|
|
|
|
|
|
&.active { |
|
|
|
color: #e49a3d; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.desc_footer { |
|
|
|
.sort-item-price .price-arrow { |
|
|
|
margin-left: 20rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #000; |
|
|
|
|
|
|
|
.price_x { |
|
|
|
margin-right: 16rpx; |
|
|
|
color: #f03c3c; |
|
|
|
font-size: 30rpx; |
|
|
|
.icon { |
|
|
|
&.active { |
|
|
|
color: #e49a3d; |
|
|
|
} |
|
|
|
|
|
|
|
.price_y { |
|
|
|
text-decoration: line-through; |
|
|
|
&.up { |
|
|
|
margin-bottom: -16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&.down { |
|
|
|
margin-top: -16rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 平铺显示 |
|
|
|
.goods-list.column-2 { |
|
|
|
.goods-item { |
|
|
|
width: 50%; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// 商品列表 |
|
|
|
.goods-list { |
|
|
|
padding: 4rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
// 平铺显示 |
|
|
|
|
|
|
|
.goods-item { |
|
|
|
float: left; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 6rpx; |
|
|
|
width: 50%; |
|
|
|
|
|
|
|
.goods-image { |
|
|
|
position: relative; |
|
|
|
@ -450,6 +567,13 @@ |
|
|
|
text-decoration: line-through; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.goods-sales { |
|
|
|
float: right; |
|
|
|
color: #484848; |
|
|
|
font-size: 20rpx; |
|
|
|
margin-top: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
wanghongjun
2 years ago