xioayue
/
why_in_h5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增页面 公共数据专区 数据超市 文化资源数据 文化数字内容

master
wanghongjun 2 years ago
parent
dea2282910
commit
1c51b7224f
7 changed files with 2038 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      pages.json
  2. 15
      pages/index/index.vue
  3. 496
      pages/targetdata/culturalnumbers.vue
  4. 496
      pages/targetdata/culturalresources.vue
  5. 496
      pages/targetdata/publicdata.vue
  6. 496
      pages/targetdata/supermarket.vue
  7. 9
      utils/request/index.js

40
pages.json
View File

@ -299,6 +299,46 @@
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/targetdata/publicdata",
"style" :
{
"navigationBarTitleText" : "公共数据专区",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/targetdata/supermarket",
"style" :
{
"navigationBarTitleText" : "数据超市",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/targetdata/supermarket",
"style" :
{
"navigationBarTitleText" : "数据超市",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/targetdata/culturalresources",
"style" :
{
"navigationBarTitleText" : "文化资源数据",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/targetdata/culturalnumbers",
"style" :
{
"navigationBarTitleText" : "文化数字内容",
"enablePullDownRefresh" : false
}
}
],
"globalStyle": {

15
pages/index/index.vue
View File

@ -14,19 +14,19 @@
</view>
<!-- 标签和导航区 -->
<view class="linkzone">
<view class="lkbox">
<view class="lkbox" @click="jumpToPage('publicdata')">
<view class="lkimg"><image mode="widthFix" src="../../static/next.png"/></view>
<view class="lktxt">公共数据专区</view>
</view>
<view class="lkbox">
<view class="lkbox" @click="jumpToPage('supermarket')">
<view class="lkimg"><image mode="widthFix" src="../../static/next.png"/></view>
<view class="lktxt">数据超市</view>
</view>
<view class="lkbox">
<view class="lkbox" @click="jumpToPage('culturalresources')">
<view class="lkimg"><image mode="widthFix" src="../../static/next.png"/></view>
<view class="lktxt">文化资源数据</view>
</view>
<view class="lkbox">
<view class="lkbox" @click="jumpToPage('culturalnumbers')">
<view class="lkimg"><image mode="widthFix" src="../../static/next.png"/></view>
<view class="lktxt">文化数字内容</view>
</view>
@ -246,8 +246,11 @@
*/
onTargetGoods(gislicode) {
this.$navTo('pages/goods/detail', { gislicode })
}
},
jumpToPage(url) {
this.$navTo('pages/targetdata/'+url)
},
},
// 以下空，moune 兄弟元素
}

496
pages/targetdata/culturalnumbers.vue
View File

@ -0,0 +1,496 @@
<template>
<view class="container">
<!-- 搜索 -->
<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>
</view>
<view class="search-button">
<view class="button" @click="onSearch">搜索</view>
</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() {
if (this.searchValue == '') {
this.$error('请输入搜索关键词');
} else {
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}
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;
// 搜索
.sozone{
position: relative;
z-index: 70;
.sovue{
padding: 20rpx;
position: absolute;
top: 20rpx;
left: 4rpx;
width: 100%;
}
.search-wrapper {
display: flex;
height: 84rpx;
}
// 搜索输入框
.search-input {
width: 80%;
background: #fff;
border-radius: 10rpx 0 0 10rpx;
box-sizing: border-box;
overflow: hidden;
.search-input-wrapper {
display: flex;
.left {
display: flex;
width: 60rpx;
justify-content: center;
align-items: center;
.search-icon {
display: block;
color: #b4b4b4;
font-size: 28rpx;
}
}
.right {
flex: 1;
input {
font-size: 28rpx;
height: 84rpx;
display: flex;
align-items: center;
.input-placeholder {
color: #aba9a9;
}
}
}
}
}
// 搜索按钮
.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;
}
}
}
.order {
display: flex;
padding: 150rpx 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;
.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>

496
pages/targetdata/culturalresources.vue
View File

@ -0,0 +1,496 @@
<template>
<view class="container">
<!-- 搜索 -->
<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>
</view>
<view class="search-button">
<view class="button" @click="onSearch">搜索</view>
</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() {
if (this.searchValue == '') {
this.$error('请输入搜索关键词');
} else {
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}
rqdata.record_type = 1
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;
// 搜索
.sozone{
position: relative;
z-index: 70;
.sovue{
padding: 20rpx;
position: absolute;
top: 20rpx;
left: 4rpx;
width: 100%;
}
.search-wrapper {
display: flex;
height: 84rpx;
}
// 搜索输入框
.search-input {
width: 80%;
background: #fff;
border-radius: 10rpx 0 0 10rpx;
box-sizing: border-box;
overflow: hidden;
.search-input-wrapper {
display: flex;
.left {
display: flex;
width: 60rpx;
justify-content: center;
align-items: center;
.search-icon {
display: block;
color: #b4b4b4;
font-size: 28rpx;
}
}
.right {
flex: 1;
input {
font-size: 28rpx;
height: 84rpx;
display: flex;
align-items: center;
.input-placeholder {
color: #aba9a9;
}
}
}
}
}
// 搜索按钮
.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;
}
}
}
.order {
display: flex;
padding: 150rpx 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;
.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>

496
pages/targetdata/publicdata.vue
View File

@ -0,0 +1,496 @@
<template>
<view class="container">
<!-- 搜索 -->
<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>
</view>
<view class="search-button">
<view class="button" @click="onSearch">搜索</view>
</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() {
if (this.searchValue == '') {
this.$error('请输入搜索关键词');
} else {
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}
rqdata.price_type = 1
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;
// 搜索
.sozone{
position: relative;
z-index: 70;
.sovue{
padding: 20rpx;
position: absolute;
top: 20rpx;
left: 4rpx;
width: 100%;
}
.search-wrapper {
display: flex;
height: 84rpx;
}
// 搜索输入框
.search-input {
width: 80%;
background: #fff;
border-radius: 10rpx 0 0 10rpx;
box-sizing: border-box;
overflow: hidden;
.search-input-wrapper {
display: flex;
.left {
display: flex;
width: 60rpx;
justify-content: center;
align-items: center;
.search-icon {
display: block;
color: #b4b4b4;
font-size: 28rpx;
}
}
.right {
flex: 1;
input {
font-size: 28rpx;
height: 84rpx;
display: flex;
align-items: center;
.input-placeholder {
color: #aba9a9;
}
}
}
}
}
// 搜索按钮
.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;
}
}
}
.order {
display: flex;
padding: 150rpx 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;
.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>

496
pages/targetdata/supermarket.vue
View File

@ -0,0 +1,496 @@
<template>
<view class="container">
<!-- 搜索 -->
<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>
</view>
<view class="search-button">
<view class="button" @click="onSearch">搜索</view>
</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() {
if (this.searchValue == '') {
this.$error('请输入搜索关键词');
} else {
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}
rqdata.price_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;
// 搜索
.sozone{
position: relative;
z-index: 70;
.sovue{
padding: 20rpx;
position: absolute;
top: 20rpx;
left: 4rpx;
width: 100%;
}
.search-wrapper {
display: flex;
height: 84rpx;
}
// 搜索输入框
.search-input {
width: 80%;
background: #fff;
border-radius: 10rpx 0 0 10rpx;
box-sizing: border-box;
overflow: hidden;
.search-input-wrapper {
display: flex;
.left {
display: flex;
width: 60rpx;
justify-content: center;
align-items: center;
.search-icon {
display: block;
color: #b4b4b4;
font-size: 28rpx;
}
}
.right {
flex: 1;
input {
font-size: 28rpx;
height: 84rpx;
display: flex;
align-items: center;
.input-placeholder {
color: #aba9a9;
}
}
}
}
}
// 搜索按钮
.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;
}
}
}
.order {
display: flex;
padding: 150rpx 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;
.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>

9
utils/request/index.js
View File

@ -110,10 +110,11 @@ $http.dataFactory = async res => {
// 提示登录
if(res.response.statusCode==401){
store.dispatch('Logout')
return Promise.reject({
statusCode: res.response.statusCode,
errMsg: '登录失效了，请重新登录系统'
})
uni.$error('登录失效了，请重新登录系统')
uni.navigateTo({
url: "/pages/login/index"
})
return
}

Write Preview
Loading…
Cancel
Save