11 changed files with 5349 additions and 48 deletions
@ -0,0 +1,562 @@ |
|||||
|
<template> |
||||
|
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback"> |
||||
|
<!-- 页面头部 --> |
||||
|
<!-- 搜索 --> |
||||
|
<view class="search"> |
||||
|
<view class="search-wrapper"> |
||||
|
<view class="index-search"> |
||||
|
<view class="index-cont-search t-c"> |
||||
|
<text class="search-icon iconfont icon-search"></text> |
||||
|
<text class="search-text"> |
||||
|
<input type="text" placeholder="请输入关键字" v-model="searchValue"> |
||||
|
</text> |
||||
|
<button class="search-text-bu" @click="onSearch">搜索</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 基本信息 --> |
||||
|
<view class="dis-flex"> |
||||
|
<!-- 图片 --> |
||||
|
<view class="goods-item_left"> |
||||
|
<image class="image" :src="userList.doorHeadPhoto"></image> |
||||
|
</view> |
||||
|
<view class="goods-item_right"> |
||||
|
<!-- 名称 --> |
||||
|
<view class="goods-name"> |
||||
|
<text class="twoline-hide">{{ userList.name }}</text> |
||||
|
</view> |
||||
|
<view class="goods-auth-type"> |
||||
|
<text class="twoline-hide">{{ userList.authType }}</text> |
||||
|
</view> |
||||
|
<view class="goods-auth-num"> |
||||
|
<text class="twoline-hide">标的数量：{{ total }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 店铺信息 --> |
||||
|
<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 class="goods-item_left"> |
||||
|
<!-- 图片 --> |
||||
|
<view class="goods-image"> |
||||
|
<image class="image" mode="aspectFill" :src="item.gdimg"></image> |
||||
|
</view> |
||||
|
<view class="detail"> |
||||
|
<!-- 标题 --> |
||||
|
<view class="goods-name"> |
||||
|
<text class="twoline-hide">{{ item.goods_name }}</text> |
||||
|
</view> |
||||
|
<!-- 价格 --> |
||||
|
<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 class="detail-owner oneline-hide"> |
||||
|
<text class="oneline-hide"> {{ item.username }}</text> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</mescroll-body> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue' |
||||
|
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins' |
||||
|
import * as GoodsApi from '@/api/goods' |
||||
|
import { getEmptyPaginateObj, getMoreListData } from '@/core/app' |
||||
|
|
||||
|
//解压缩 |
||||
|
import pako from '@/core/pako' |
||||
|
import { base64ToUint8Array,numberWithCommas} from '@/utils/util' |
||||
|
|
||||
|
const pageSize = 8 |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
MescrollBody, |
||||
|
}, |
||||
|
|
||||
|
mixins: [MescrollMixin], |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
searchValue: '', |
||||
|
options: {}, // 当前页面参数 |
||||
|
list: getEmptyPaginateObj(), // 商品列表数据 |
||||
|
userList: {}, |
||||
|
// 上拉加载配置 |
||||
|
upOption: { |
||||
|
// 首次自动执行 |
||||
|
auto: true, |
||||
|
// 每页数据的数量; 默认10 |
||||
|
page: { size: pageSize }, |
||||
|
// 数量要大于4条才显示无更多数据 |
||||
|
noMoreSize: 4, |
||||
|
}, |
||||
|
tabText: [ |
||||
|
{ |
||||
|
title: '上新排序', |
||||
|
value: 1 |
||||
|
}, |
||||
|
{ |
||||
|
title: '销量排序', |
||||
|
value: 2 |
||||
|
}, |
||||
|
{ |
||||
|
title: '价格排序', |
||||
|
value: 3 |
||||
|
}, |
||||
|
{ |
||||
|
title: '更多', |
||||
|
value: 4 |
||||
|
}, |
||||
|
], |
||||
|
targetTab: 1, |
||||
|
total: 0, |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad(options) { |
||||
|
// 记录options |
||||
|
this.options = options |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 搜索 |
||||
|
async onSearch() { |
||||
|
if (this.searchValue == '') { |
||||
|
this.$error('请输入搜索关键词'); |
||||
|
} else { |
||||
|
await this.getGoodsList() |
||||
|
await this.getHomeListImage() |
||||
|
} |
||||
|
}, |
||||
|
// 切换tab |
||||
|
async changeTab(val) { |
||||
|
if (val == 4) { |
||||
|
let name = this.options.name |
||||
|
this.$navTo('pages/category/tradingentity/detail',{name}) |
||||
|
} else { |
||||
|
this.targetTab = val |
||||
|
await this.getGoodsList() |
||||
|
await this.getHomeListImage() |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 上拉加载的回调 (页面初始化时也会执行一次) |
||||
|
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
||||
|
* @param {Object} page |
||||
|
*/ |
||||
|
async upCallback(page) { |
||||
|
const app = this |
||||
|
// 设置列表数据 |
||||
|
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()) |
||||
|
|
||||
|
// 标的列表 |
||||
|
await app.getHomeListImage() |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 获取标的列表 |
||||
|
* @param {number} pageNo 页码 |
||||
|
*/ |
||||
|
getGoodsList(pageNo = 1) { |
||||
|
const app = this |
||||
|
const param = { |
||||
|
authorization: '', |
||||
|
entrust_name: '', |
||||
|
entrust_user_name: app.options.name, |
||||
|
goods_status: '1', |
||||
|
limit: pageSize, |
||||
|
order: 'desc', |
||||
|
order_type: '', |
||||
|
page: pageNo, |
||||
|
record_type: '', |
||||
|
source_type: '', |
||||
|
is_user_data: '1', |
||||
|
} |
||||
|
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) |
||||
|
.then(result => { |
||||
|
// 合并新数据 |
||||
|
const newList = app.initList(result.data) |
||||
|
app.total = result.data.total |
||||
|
app.list.data = getMoreListData(newList, app.list, pageNo) |
||||
|
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) => { |
||||
|
if (item.goods_image === "") { |
||||
|
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'}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 跳转商品详情页 |
||||
|
onTargetDetail(gislicode) { |
||||
|
this.$navTo('pages/goods/detail', { gislicode }) |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
// 搜索 |
||||
|
.search { |
||||
|
position: fixed; |
||||
|
float: top; |
||||
|
top: var(--window-top); |
||||
|
left: var(--window-left); |
||||
|
right: var(--window-right); |
||||
|
z-index: 19; |
||||
|
|
||||
|
.search-wrapper { |
||||
|
background: #1c223b; |
||||
|
padding: 0rpx 20rpx 20rpx 20rpx; |
||||
|
} |
||||
|
|
||||
|
.index-search { |
||||
|
border-bottom: 0; |
||||
|
background: #fff; |
||||
|
border-radius: 50rpx; |
||||
|
overflow: hidden; |
||||
|
font-size: 28rpx; |
||||
|
color: #6d6d6d; |
||||
|
box-sizing: border-box; |
||||
|
height: 64rpx; |
||||
|
line-height: 64rpx; |
||||
|
|
||||
|
.index-cont-search { |
||||
|
width: 100%; |
||||
|
font-size: 28rpx; |
||||
|
background: #f7f7f7; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
.search-icon { |
||||
|
font-size: 34rpx; |
||||
|
margin-left: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.search-text { |
||||
|
text-align: left; |
||||
|
float: left; |
||||
|
font-size: 20rpx; |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
.search-text-bu { |
||||
|
margin-right: 20rpx; |
||||
|
color: #ffffff; |
||||
|
background-color: #1c223b; |
||||
|
font-size: 20rpx; |
||||
|
width: 120rpx; |
||||
|
height: 50rpx; |
||||
|
text-align: center; |
||||
|
border-radius: 50rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 店铺基本信息 |
||||
|
.dis-flex { |
||||
|
display: flex; |
||||
|
width: 90%; |
||||
|
height: 240rpx; |
||||
|
margin: 100rpx 10rpx 20rpx 40rpx; |
||||
|
box-sizing: border-box; |
||||
|
background: #fff; |
||||
|
line-height: 1.6; |
||||
|
border-radius: 15rpx; |
||||
|
|
||||
|
.goods-item_left { |
||||
|
display: flex; |
||||
|
width: 220rpx; |
||||
|
background: #fff; |
||||
|
align-items: center; |
||||
|
|
||||
|
.image { |
||||
|
display: block; |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods-item_right { |
||||
|
margin-top: 20rpx; |
||||
|
|
||||
|
.goods-auth-type { |
||||
|
margin-top: 40rpx; |
||||
|
font-size: 26rpx; |
||||
|
color: #fbb154; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.goods-auth-num { |
||||
|
margin-top: 40rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #d7d7d7; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
// 店铺信息 |
||||
|
.dis-flex-info { |
||||
|
|
||||
|
position: relative; |
||||
|
width: 90%; |
||||
|
height: 300rpx; |
||||
|
background: #fff; |
||||
|
margin: 20rpx 40rpx; |
||||
|
border-radius: 10rpx; |
||||
|
color: #15192d; |
||||
|
|
||||
|
.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; |
||||
|
text { |
||||
|
display: block; |
||||
|
margin-bottom: 10rpx; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 排序 |
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
.tab_link { |
||||
|
border-bottom: 5rpx #1b223b solid; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 排序组件 |
||||
|
.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; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.sort-item-price .price-arrow { |
||||
|
margin-left: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #000; |
||||
|
|
||||
|
.icon { |
||||
|
&.active { |
||||
|
color: #e49a3d; |
||||
|
} |
||||
|
|
||||
|
&.up { |
||||
|
margin-bottom: -16rpx; |
||||
|
} |
||||
|
|
||||
|
&.down { |
||||
|
margin-top: -16rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// 商品列表 |
||||
|
.goods-list { |
||||
|
padding: 4rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
// 平铺显示 |
||||
|
|
||||
|
.goods-item { |
||||
|
float: left; |
||||
|
box-sizing: border-box; |
||||
|
padding: 6rpx; |
||||
|
width: 50%; |
||||
|
|
||||
|
.goods-image { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 0; |
||||
|
padding-bottom: 100%; |
||||
|
overflow: hidden; |
||||
|
background: #fff; |
||||
|
|
||||
|
&:after { |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
margin-top: 100%; |
||||
|
} |
||||
|
|
||||
|
.image { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
-o-object-fit: cover; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.detail { |
||||
|
padding: 8rpx; |
||||
|
background: #fff; |
||||
|
|
||||
|
.goods-name { |
||||
|
min-height: 68rpx; |
||||
|
line-height: 32rpx; |
||||
|
white-space: normal; |
||||
|
color: #484848; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
|
||||
|
.detail-price { |
||||
|
.goods-price { |
||||
|
font-weight: bold; |
||||
|
margin-right: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.line-price { |
||||
|
text-decoration: line-through; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods-sales { |
||||
|
float: right; |
||||
|
color: #484848; |
||||
|
font-size: 20rpx; |
||||
|
margin-top: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.detail-owner{ |
||||
|
padding: 4rpx; |
||||
|
font-size: 22rpx; |
||||
|
color: #999; |
||||
|
margin-left: 10rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,471 @@ |
|||||
|
<template> |
||||
|
<view class="container"> |
||||
|
<!-- 搜索 --> |
||||
|
<view class="search"> |
||||
|
<view class="search-wrapper"> |
||||
|
<view class="index-search"> |
||||
|
<view class="index-cont-search t-c"> |
||||
|
<text class="search-icon iconfont icon-search"></text> |
||||
|
<text class="search-text"> |
||||
|
<input type="text" placeholder="请输入搜索关键字" v-model="searchValue"> |
||||
|
</text> |
||||
|
<button class="search-text-bu" @click="onSearch">搜索</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</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="glistzone"> |
||||
|
<view class="diy-goods"> |
||||
|
<view class="goods-list display__list column__2"> |
||||
|
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" |
||||
|
@down="downCallback" :up="upOption" @up="upCallback"> |
||||
|
<view class="goods-item" v-for="(dataItem, index) in gdlist.data" :key="index" |
||||
|
@click="onTargetGoods(dataItem.goods_islicode)"> |
||||
|
<!-- 多列商品 --> |
||||
|
<block> |
||||
|
<!-- 标的图片 --> |
||||
|
<view class="goods-image"> |
||||
|
<image class="image" mode="aspectFill" :src="dataItem.gdimg"></image> |
||||
|
</view> |
||||
|
<view class="detail"> |
||||
|
<!-- 标的标题 --> |
||||
|
<view class="goods-name"> |
||||
|
<text class="twoline-hide">{{ dataItem.goods_name }}</text> |
||||
|
</view> |
||||
|
<!-- 标的价格 && 销量--> |
||||
|
<view class="detail-price oneline-hide"> |
||||
|
<text class="goods-price f-30 col-m">￥ {{ dataItem.price }}</text> |
||||
|
<text class="sale-count col-9 f-24">销量：{{ dataItem.sale_count }}</text> |
||||
|
</view> |
||||
|
<!-- 标的所有者的信息 --> |
||||
|
<view class="detail-owner oneline-hide"> |
||||
|
<text class="oneline-hide"> {{ dataItem.username }}</text> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</block> |
||||
|
|
||||
|
</view> |
||||
|
</mescroll-body> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 滚动加载 |
||||
|
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue' |
||||
|
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins' |
||||
|
import {getEmptyPaginateObj, getMoreListData} from '@/core/app' |
||||
|
import { base64ToUint8Array,numberWithCommas } from '@/utils/util' |
||||
|
import * as Api from '@/api/page' |
||||
|
import * as Gapi from '@/api/goods' |
||||
|
import pako from '@/core/pako' |
||||
|
|
||||
|
// 每页记录数量 |
||||
|
const pageSize = 10 |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
MescrollBody, // 滚动标签 |
||||
|
}, |
||||
|
mixins: [MescrollMixin], |
||||
|
data() { |
||||
|
return { |
||||
|
searchValue: '', |
||||
|
tabText: [ |
||||
|
{ |
||||
|
title: '上新排序', |
||||
|
value: 1 |
||||
|
}, |
||||
|
{ |
||||
|
title: '销量排序', |
||||
|
value: 2 |
||||
|
}, |
||||
|
{ |
||||
|
title: '价格排序', |
||||
|
value: 3 |
||||
|
}, |
||||
|
], |
||||
|
targetTab: 1, |
||||
|
// 上拉加载配置 |
||||
|
upOption: { |
||||
|
// 首次自动执行 |
||||
|
auto: true, |
||||
|
// 每页数据的数量; 默认10 |
||||
|
page: {size: pageSize}, |
||||
|
// 数量要大于4条才显示无更多数据 |
||||
|
noMoreSize: 4, |
||||
|
// 空布局 |
||||
|
empty: { |
||||
|
tip: '暂无记录' |
||||
|
} |
||||
|
}, |
||||
|
gdlist: getEmptyPaginateObj(), |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
// 搜索 |
||||
|
async onSearch() { |
||||
|
await this.getHomeList(1) |
||||
|
await this.getHomeListImage() |
||||
|
}, |
||||
|
// 切换tab |
||||
|
async changeTab(val) { |
||||
|
this.targetTab = val |
||||
|
await this.getHomeList(1) |
||||
|
await this.getHomeListImage() |
||||
|
}, |
||||
|
/** |
||||
|
* 上拉加载的回调 (页面初始化时也会执行一次) |
||||
|
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
||||
|
* @param {Object} page |
||||
|
*/ |
||||
|
async upCallback(page) { |
||||
|
const app = this |
||||
|
// 设置列表数据 |
||||
|
await app.getHomeList(page.num) |
||||
|
.then(list => { |
||||
|
const curPageLen = list.data.length |
||||
|
const totalSize = list.data.total |
||||
|
app.mescroll.endBySize(curPageLen, totalSize) |
||||
|
}) |
||||
|
.catch(() => app.mescroll.endErr()) |
||||
|
// 标的列表 |
||||
|
await app.getHomeListImage() |
||||
|
}, |
||||
|
//商品列表 |
||||
|
getHomeList(pageNo = 1) { |
||||
|
const app = this |
||||
|
// 必须的字段 |
||||
|
let stimestamp = new Date().getTime() |
||||
|
// promise 方式 |
||||
|
return new Promise((resolve, reject) => { |
||||
|
let rqdata = {"pay_type": 2, "goods_status": 1, "page": pageNo, "limit": pageSize,"entrust_user_name": app.options.name} |
||||
|
// rqdata.record_type = 2 |
||||
|
if (app.searchValue != '') { |
||||
|
rqdata.goods_name = app.searchValue |
||||
|
} |
||||
|
if (app.targetTab == 2) { |
||||
|
rqdata.order_type = 'sale' |
||||
|
} else if (app.targetTab == 3) { |
||||
|
rqdata.order_type = 'price' |
||||
|
rqdata.order = 'asc' |
||||
|
} |
||||
|
// 获取列表 |
||||
|
Gapi.nbgoods(rqdata) |
||||
|
.then(res => { |
||||
|
// 合并新数据 |
||||
|
const newList = app.initList(res.data) |
||||
|
app.gdlist.data = getMoreListData(newList, app.gdlist, pageNo) |
||||
|
resolve(newList) |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
// 初始化订单列表数据 |
||||
|
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.gdlist.data.forEach((item, key) => { |
||||
|
if (item.goods_image === "") { |
||||
|
Gapi.nbgoodsImage({"id": item.id}).then(res2 => { |
||||
|
if (res2.code === 200) { |
||||
|
this.gdlist.data[key].goods_image = res2.data.data[0].goods_image; |
||||
|
this.gdlist.data[key].gdimg = pako.inflateRaw(base64ToUint8Array(res2.data.data[0].goods_image), {to: 'string'}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
/** |
||||
|
* 跳转商品详情页 |
||||
|
*/ |
||||
|
onTargetGoods(gislicode) { |
||||
|
this.$navTo('pages/goods/detail', {gislicode}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
.container { |
||||
|
|
||||
|
position: relative; |
||||
|
min-height: 100vh; |
||||
|
background-color: #efefef; |
||||
|
|
||||
|
// 搜索 |
||||
|
.search { |
||||
|
position: fixed; |
||||
|
float: top; |
||||
|
top: var(--window-top); |
||||
|
left: var(--window-left); |
||||
|
right: var(--window-right); |
||||
|
z-index: 19; |
||||
|
|
||||
|
.search-wrapper { |
||||
|
background: #1c223b; |
||||
|
padding: 0rpx 20rpx 20rpx 20rpx; |
||||
|
} |
||||
|
|
||||
|
.index-search { |
||||
|
border-bottom: 0; |
||||
|
background: #fff; |
||||
|
border-radius: 50rpx; |
||||
|
overflow: hidden; |
||||
|
font-size: 28rpx; |
||||
|
color: #6d6d6d; |
||||
|
box-sizing: border-box; |
||||
|
height: 74rpx; |
||||
|
line-height: 74rpx; |
||||
|
|
||||
|
.index-cont-search { |
||||
|
width: 100%; |
||||
|
font-size: 28rpx; |
||||
|
background: #f7f7f7; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
.search-icon { |
||||
|
font-size: 34rpx; |
||||
|
margin-left: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.search-text { |
||||
|
text-align: left; |
||||
|
float: left; |
||||
|
margin-left: 20rpx; |
||||
|
width: 100%; |
||||
|
|
||||
|
input { |
||||
|
font-size: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
.search-text-bu { |
||||
|
margin-right: 20rpx; |
||||
|
color: #ffffff; |
||||
|
background-color: #1c223b; |
||||
|
font-size: 20rpx; |
||||
|
width: 120rpx; |
||||
|
height: 50rpx; |
||||
|
text-align: center; |
||||
|
border-radius: 50rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.order { |
||||
|
display: flex; |
||||
|
padding: 110rpx 10rpx 20rpx; |
||||
|
margin-left: -55rpx; |
||||
|
z-index: 65; |
||||
|
|
||||
|
.tab_text { |
||||
|
display: inline-block; |
||||
|
color: #1b223b; |
||||
|
font-size: 30rpx; |
||||
|
margin-left: 80rpx; |
||||
|
} |
||||
|
|
||||
|
.tab_link { |
||||
|
border-bottom: 1rpx #1b223b solid; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// goods |
||||
|
.glistzone{ |
||||
|
padding: 4rpx; |
||||
|
} |
||||
|
|
||||
|
.diy-goods { |
||||
|
.goods-list { |
||||
|
padding: 4rpx; |
||||
|
box-sizing: border-box; |
||||
|
margin-top: -20rpx; |
||||
|
|
||||
|
.goods-item { |
||||
|
// background-color: #fff; |
||||
|
box-sizing: border-box; |
||||
|
padding: 16rpx; |
||||
|
|
||||
|
.goods-image { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 0; |
||||
|
padding-bottom: 100%; |
||||
|
overflow: hidden; |
||||
|
background: #fff; |
||||
|
|
||||
|
&:after { |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
margin-top: 100%; |
||||
|
} |
||||
|
|
||||
|
.image { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
-o-object-fit: cover; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.detail { |
||||
|
padding: 8rpx; |
||||
|
background: #fff; |
||||
|
border-radius: 0 0 6% 6%; |
||||
|
box-shadow: #333 2rpx 3rpx 2rpx; |
||||
|
|
||||
|
.goods-name { |
||||
|
min-height: 68rpx; |
||||
|
line-height: 1.3; |
||||
|
white-space: normal; |
||||
|
color: #484848; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
|
||||
|
.detail-price { |
||||
|
.goods-price { |
||||
|
font-weight: 800; |
||||
|
margin-right: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.sale-count { |
||||
|
maring-left:20rpx; |
||||
|
font-size: 18rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.detail-owner{ |
||||
|
padding: 4rpx; |
||||
|
font-size: 22rpx; |
||||
|
color: #999; |
||||
|
margin-left: 10rpx; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.display__slide { |
||||
|
white-space: nowrap; |
||||
|
font-size: 0; |
||||
|
|
||||
|
.goods-item { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.display__list { |
||||
|
.goods-item { |
||||
|
float: left; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.column__2 { |
||||
|
.goods-item { |
||||
|
width: 50%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.column__3 { |
||||
|
.goods-item { |
||||
|
width: 33.33333%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.column__1 { |
||||
|
.goods-item { |
||||
|
width: 100%; |
||||
|
height: 280rpx; |
||||
|
margin-bottom: 12rpx; |
||||
|
padding: 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
background: #fff; |
||||
|
line-height: 1.6; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods-item_left { |
||||
|
display: flex; |
||||
|
width: 40%; |
||||
|
background: #fff; |
||||
|
align-items: center; |
||||
|
|
||||
|
.image { |
||||
|
display: block; |
||||
|
width: 240rpx; |
||||
|
height: 240rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods-item_right { |
||||
|
position: relative; |
||||
|
width: 60%; |
||||
|
|
||||
|
.goods-name { |
||||
|
margin-top: 20rpx; |
||||
|
min-height: 68rpx; |
||||
|
line-height: 1.3; |
||||
|
white-space: normal; |
||||
|
color: #484848; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods-item_desc { |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.desc-selling_point { |
||||
|
width: 400rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #e49a3d; |
||||
|
} |
||||
|
|
||||
|
.desc-goods_sales { |
||||
|
color: #999; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.desc_footer { |
||||
|
font-size: 24rpx; |
||||
|
|
||||
|
.price_x { |
||||
|
margin-right: 16rpx; |
||||
|
color: #f03c3c; |
||||
|
font-size: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.price_y { |
||||
|
text-decoration: line-through; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,562 @@ |
|||||
|
<template> |
||||
|
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback"> |
||||
|
<!-- 页面头部 --> |
||||
|
<!-- 搜索 --> |
||||
|
<view class="search"> |
||||
|
<view class="search-wrapper"> |
||||
|
<view class="index-search"> |
||||
|
<view class="index-cont-search t-c"> |
||||
|
<text class="search-icon iconfont icon-search"></text> |
||||
|
<text class="search-text"> |
||||
|
<input type="text" placeholder="请输入关键字" v-model="searchValue"> |
||||
|
</text> |
||||
|
<button class="search-text-bu" @click="onSearch">搜索</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 基本信息 --> |
||||
|
<view class="dis-flex"> |
||||
|
<!-- 图片 --> |
||||
|
<view class="goods-item_left"> |
||||
|
<image class="image" :src="userList.doorHeadPhoto"></image> |
||||
|
</view> |
||||
|
<view class="goods-item_right"> |
||||
|
<!-- 名称 --> |
||||
|
<view class="goods-name"> |
||||
|
<text class="twoline-hide">{{ userList.name }}</text> |
||||
|
</view> |
||||
|
<view class="goods-auth-type"> |
||||
|
<text class="twoline-hide">{{ userList.authType }}</text> |
||||
|
</view> |
||||
|
<view class="goods-auth-num"> |
||||
|
<text class="twoline-hide">标的数量：{{ total }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 店铺信息 --> |
||||
|
<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 class="goods-item_left"> |
||||
|
<!-- 图片 --> |
||||
|
<view class="goods-image"> |
||||
|
<image class="image" mode="aspectFill" :src="item.gdimg"></image> |
||||
|
</view> |
||||
|
<view class="detail"> |
||||
|
<!-- 标题 --> |
||||
|
<view class="goods-name"> |
||||
|
<text class="twoline-hide">{{ item.goods_name }}</text> |
||||
|
</view> |
||||
|
<!-- 价格 --> |
||||
|
<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 class="detail-owner oneline-hide"> |
||||
|
<text class="oneline-hide"> {{ item.username }}</text> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</mescroll-body> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue' |
||||
|
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins' |
||||
|
import * as GoodsApi from '@/api/goods' |
||||
|
import { getEmptyPaginateObj, getMoreListData } from '@/core/app' |
||||
|
|
||||
|
//解压缩 |
||||
|
import pako from '@/core/pako' |
||||
|
import { base64ToUint8Array,numberWithCommas} from '@/utils/util' |
||||
|
|
||||
|
const pageSize = 8 |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
MescrollBody, |
||||
|
}, |
||||
|
|
||||
|
mixins: [MescrollMixin], |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
searchValue: '', |
||||
|
options: {}, // 当前页面参数 |
||||
|
list: getEmptyPaginateObj(), // 商品列表数据 |
||||
|
userList: {}, |
||||
|
// 上拉加载配置 |
||||
|
upOption: { |
||||
|
// 首次自动执行 |
||||
|
auto: true, |
||||
|
// 每页数据的数量; 默认10 |
||||
|
page: { size: pageSize }, |
||||
|
// 数量要大于4条才显示无更多数据 |
||||
|
noMoreSize: 4, |
||||
|
}, |
||||
|
tabText: [ |
||||
|
{ |
||||
|
title: '上新排序', |
||||
|
value: 1 |
||||
|
}, |
||||
|
{ |
||||
|
title: '销量排序', |
||||
|
value: 2 |
||||
|
}, |
||||
|
{ |
||||
|
title: '价格排序', |
||||
|
value: 3 |
||||
|
}, |
||||
|
{ |
||||
|
title: '更多', |
||||
|
value: 4 |
||||
|
}, |
||||
|
], |
||||
|
targetTab: 1, |
||||
|
total: 0, |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad(options) { |
||||
|
// 记录options |
||||
|
this.options = options |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 搜索 |
||||
|
async onSearch() { |
||||
|
if (this.searchValue == '') { |
||||
|
this.$error('请输入搜索关键词'); |
||||
|
} else { |
||||
|
await this.getGoodsList() |
||||
|
await this.getHomeListImage() |
||||
|
} |
||||
|
}, |
||||
|
// 切换tab |
||||
|
async changeTab(val) { |
||||
|
if (val == 4) { |
||||
|
let name = this.options.name |
||||
|
this.$navTo('pages/category/tradingentity/detail',{name}) |
||||
|
} else { |
||||
|
this.targetTab = val |
||||
|
await this.getGoodsList() |
||||
|
await this.getHomeListImage() |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 上拉加载的回调 (页面初始化时也会执行一次) |
||||
|
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
||||
|
* @param {Object} page |
||||
|
*/ |
||||
|
async upCallback(page) { |
||||
|
const app = this |
||||
|
// 设置列表数据 |
||||
|
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()) |
||||
|
|
||||
|
// 标的列表 |
||||
|
await app.getHomeListImage() |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 获取标的列表 |
||||
|
* @param {number} pageNo 页码 |
||||
|
*/ |
||||
|
getGoodsList(pageNo = 1) { |
||||
|
const app = this |
||||
|
const param = { |
||||
|
authorization: '', |
||||
|
entrust_name: '', |
||||
|
entrust_user_name: app.options.name, |
||||
|
goods_status: '1', |
||||
|
limit: pageSize, |
||||
|
order: 'desc', |
||||
|
order_type: '', |
||||
|
page: pageNo, |
||||
|
record_type: '', |
||||
|
source_type: '', |
||||
|
is_user_data: '1', |
||||
|
} |
||||
|
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) |
||||
|
.then(result => { |
||||
|
// 合并新数据 |
||||
|
const newList = app.initList(result.data) |
||||
|
app.total = result.data.total |
||||
|
app.list.data = getMoreListData(newList, app.list, pageNo) |
||||
|
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) => { |
||||
|
if (item.goods_image === "") { |
||||
|
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'}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 跳转商品详情页 |
||||
|
onTargetDetail(gislicode) { |
||||
|
this.$navTo('pages/goods/detail', { gislicode }) |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
// 搜索 |
||||
|
.search { |
||||
|
position: fixed; |
||||
|
float: top; |
||||
|
top: var(--window-top); |
||||
|
left: var(--window-left); |
||||
|
right: var(--window-right); |
||||
|
z-index: 19; |
||||
|
|
||||
|
.search-wrapper { |
||||
|
background: #1c223b; |
||||
|
padding: 0rpx 20rpx 20rpx 20rpx; |
||||
|
} |
||||
|
|
||||
|
.index-search { |
||||
|
border-bottom: 0; |
||||
|
background: #fff; |
||||
|
border-radius: 50rpx; |
||||
|
overflow: hidden; |
||||
|
font-size: 28rpx; |
||||
|
color: #6d6d6d; |
||||
|
box-sizing: border-box; |
||||
|
height: 64rpx; |
||||
|
line-height: 64rpx; |
||||
|
|
||||
|
.index-cont-search { |
||||
|
width: 100%; |
||||
|
font-size: 28rpx; |
||||
|
background: #f7f7f7; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
.search-icon { |
||||
|
font-size: 34rpx; |
||||
|
margin-left: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.search-text { |
||||
|
text-align: left; |
||||
|
float: left; |
||||
|
font-size: 20rpx; |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
.search-text-bu { |
||||
|
margin-right: 20rpx; |
||||
|
color: #ffffff; |
||||
|
background-color: #1c223b; |
||||
|
font-size: 20rpx; |
||||
|
width: 120rpx; |
||||
|
height: 50rpx; |
||||
|
text-align: center; |
||||
|
border-radius: 50rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 店铺基本信息 |
||||
|
.dis-flex { |
||||
|
display: flex; |
||||
|
width: 90%; |
||||
|
height: 240rpx; |
||||
|
margin: 100rpx 10rpx 20rpx 40rpx; |
||||
|
box-sizing: border-box; |
||||
|
background: #fff; |
||||
|
line-height: 1.6; |
||||
|
border-radius: 15rpx; |
||||
|
|
||||
|
.goods-item_left { |
||||
|
display: flex; |
||||
|
width: 220rpx; |
||||
|
background: #fff; |
||||
|
align-items: center; |
||||
|
|
||||
|
.image { |
||||
|
display: block; |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods-item_right { |
||||
|
margin-top: 20rpx; |
||||
|
|
||||
|
.goods-auth-type { |
||||
|
margin-top: 40rpx; |
||||
|
font-size: 26rpx; |
||||
|
color: #fbb154; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.goods-auth-num { |
||||
|
margin-top: 40rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #d7d7d7; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
// 店铺信息 |
||||
|
.dis-flex-info { |
||||
|
|
||||
|
position: relative; |
||||
|
width: 90%; |
||||
|
height: 300rpx; |
||||
|
background: #fff; |
||||
|
margin: 20rpx 40rpx; |
||||
|
border-radius: 10rpx; |
||||
|
color: #15192d; |
||||
|
|
||||
|
.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; |
||||
|
text { |
||||
|
display: block; |
||||
|
margin-bottom: 10rpx; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 排序 |
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
.tab_link { |
||||
|
border-bottom: 5rpx #1b223b solid; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 排序组件 |
||||
|
.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; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.sort-item-price .price-arrow { |
||||
|
margin-left: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #000; |
||||
|
|
||||
|
.icon { |
||||
|
&.active { |
||||
|
color: #e49a3d; |
||||
|
} |
||||
|
|
||||
|
&.up { |
||||
|
margin-bottom: -16rpx; |
||||
|
} |
||||
|
|
||||
|
&.down { |
||||
|
margin-top: -16rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// 商品列表 |
||||
|
.goods-list { |
||||
|
padding: 4rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
// 平铺显示 |
||||
|
|
||||
|
.goods-item { |
||||
|
float: left; |
||||
|
box-sizing: border-box; |
||||
|
padding: 6rpx; |
||||
|
width: 50%; |
||||
|
|
||||
|
.goods-image { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 0; |
||||
|
padding-bottom: 100%; |
||||
|
overflow: hidden; |
||||
|
background: #fff; |
||||
|
|
||||
|
&:after { |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
margin-top: 100%; |
||||
|
} |
||||
|
|
||||
|
.image { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
-o-object-fit: cover; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.detail { |
||||
|
padding: 8rpx; |
||||
|
background: #fff; |
||||
|
|
||||
|
.goods-name { |
||||
|
min-height: 68rpx; |
||||
|
line-height: 32rpx; |
||||
|
white-space: normal; |
||||
|
color: #484848; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
|
||||
|
.detail-price { |
||||
|
.goods-price { |
||||
|
font-weight: bold; |
||||
|
margin-right: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.line-price { |
||||
|
text-decoration: line-through; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods-sales { |
||||
|
float: right; |
||||
|
color: #484848; |
||||
|
font-size: 20rpx; |
||||
|
margin-top: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.detail-owner{ |
||||
|
padding: 4rpx; |
||||
|
font-size: 22rpx; |
||||
|
color: #999; |
||||
|
margin-left: 10rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,34 @@ |
|||||
|
{ |
||||
|
"resultCode": "00000000", |
||||
|
"resultMsg": "SUCCESS", |
||||
|
"data": [ |
||||
|
{ |
||||
|
"consultingId": "762033233176170504", |
||||
|
"consultingName": "信息公开", |
||||
|
"consultingStatus": 0, |
||||
|
"consultingSort": 4, |
||||
|
"consultingCreationTime": "2022-08-30 16:49:06" |
||||
|
}, |
||||
|
{ |
||||
|
"consultingId": "762033263727480878", |
||||
|
"consultingName": "行业资讯", |
||||
|
"consultingStatus": 0, |
||||
|
"consultingSort": 3, |
||||
|
"consultingCreationTime": "2022-08-30 16:49:13" |
||||
|
}, |
||||
|
{ |
||||
|
"consultingId": "762033286561271818", |
||||
|
"consultingName": "最新活动", |
||||
|
"consultingStatus": 0, |
||||
|
"consultingSort": 2, |
||||
|
"consultingCreationTime": "2022-08-30 16:49:19" |
||||
|
}, |
||||
|
{ |
||||
|
"consultingId": "762033310561079327", |
||||
|
"consultingName": "专家观点", |
||||
|
"consultingStatus": 0, |
||||
|
"consultingSort": 1, |
||||
|
"consultingCreationTime": "2022-08-30 16:49:24" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
File diff suppressed because it is too large
Loading…
Reference in new issue