Skip to content

S
singleStore
Commit 79e17ca8 authored by lmy's avatar lmy
Browse files
Options

feature: layout

parent 41acc0d0
Hide whitespace changes
Inline Side-by-side
Showing with 869 additions and 134 deletions
apis/category.js 0 → 100644
View file @ 79e17ca8
import { request } from "@/lib/service"
import { baseUrl } from '@/config'
/**
* @desc 获取分类列表
* @param { Number } search_type
* @param { Number } search_type_id
*
*/
export function getCatetories(search_type, search_type_id) {
return request({
url: `${baseUrl}/wxxcx/searchCategory.htm`,
method: 'post',
data: {
search_type,
search_type_id
}
})
}
apis/goods.js
View file @ 79e17ca8
......@@ -2,12 +2,39 @@
import { request } from "@/lib/service"
import { baseUrl } from '@/config'
/**
* @desc 商品+店铺集合+店铺搜索接口
* @param { Object } params so many key, see the api docs
* {
page 当前页码
pagenum 每页条数
sort 排序：1综合优先 2销量优先 3价格升序 4价格降序 5推荐 6离我最近
city 城市ID
keywords 关键字
cat_id 分类ID 0默认全部
...
}
*/
export function searchGoods(params) {
return request({
url: `${baseUrl}/wxxcx/searchGoodsXcx.htm`,
method: 'post',
data: params
})
}
/**
* @desc 商品详情
* @param { goods_id } 商品ID
* @param { shop_id } 当前店铺ID（分销功能使用）
* @param { agent_id } 代理商ID（分销功能使用）
*/
export function goodDetail() {
export function goodDetail(params) {
return request({
url: `${baseUrl}/a`
url: `${baseUrl}/wxxcx/goodsDetail.htm`,
method: 'post',
data: params
})
}
apis/test.js deleted 100644 → 0
View file @ 41acc0d0
import { request } from "@/lib/service"
import { baseUrl } from '@/config' // 将请求的baseUrl写这里，为了开发时调试请求地址
export function test() {
return request({
url: `${baseUrl}/api/web/getArticleList`
})
}
\ No newline at end of file
components/empty-view/index.vue
View file @ 79e17ca8
<template>
<view class="empty flex j-center a-center">空</view>
<view class="empty flex flex-column j-center a-center">
<image
style="width: 360rpx;"
class="mb-4"
v-if="iconSrc"
:src="iconSrc"
mode="widthFix"
/>
<text class="font-28">{{text}}</text>
</view>
</template>
<script>
export default {
props: {
iconSrc: {
type: String,
default: ""
},
text: {
type: String,
default: "暂无数据"
}
}
}
</script>
......
components/inputNumber/index.vue 0 → 100644
View file @ 79e17ca8
<template>
<view class="wrpper" @click.stop="">
<view class="btn" @click="subtraction">-</view>
<input class="input" type="number" :value="value" @input="inputVal" />
<view class="btn" @click="add">+</view>
</view>
</template>
<script>
export default {
props: {
min: {
type: Number,
default: 1
},
value: {
type: Number,
default: 1
},
index: {
type: Number,
default: 0
}
},
data() {
return {
calVal: this.value
}
},
watch: {
calVal(newVal) {
this.$emit('change', {
index: this.index,
val: Number(newVal)
})
}
},
methods: {
subtraction() {
const val = this.calVal
if(val === this.min) return this.$toast({title: `数量不能小于${this.min}`})
this.calVal = val - 1
},
add() {
this.calVal += 1
},
inputVal(e) {
this.calVal = e.detail.value
}
}
}
</script>
<style lang="scss" scoped>
.wrpper {
width: 100%;
height: 100%;
display: inline-block;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
background-color: #fff;
.btn {
display: inline-block;
width: 64rpx;
height: 64rpx;
border: 1px solid #ccc;
}
.input {
width: 120rpx;
}
}
</style>
components/pull-list/index.vue 0 → 100644
View file @ 79e17ca8
<template>
<!-- @refresherrestore="refresherrestore"
@refresherabort="refresherabort"
@refresherpulling="handlePulling" -->
<scroll-view
class="w-100 scroll-wrapper"
scroll-y
:refresher-enabled="refresherEnabled"
:refresher-threshold="threshold"
:refresher-default-style="refresherStyle"
:refresher-background="refresherBg"
:refresher-triggered="refresherStatus"
@scrolltolower="scrolltolower"
@refresherrefresh="refresherrefresh"
>
<slot />
</scroll-view>
</template>
<script>
export default {
props: { // 详细配置可以看微信开发者文档
refresherEnabled: { // 是否开启下拉刷新
type: Boolean,
default: true
},
threshold: { // 设置自定义下拉刷新阈值
type: Number,
default: 45
},
refresherStyle: { // black，white，none，none 表示不使用默认样式
type: String,
default: 'back'
},
refresherBg: { // 背景色
type: String,
default: "#FFF"
},
refresherStatus: { // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
type: Boolean,
default: false
}
},
methods: {
// 触底
scrolltolower() {
this.$emit('tolower')
},
// 下拉刷新控件被下拉(不常用)
// handlePulling() {
// console.log("下拉刷新控件被下拉")
// },
// 下拉刷新被触发
refresherrefresh() {
this.$emit('refresh')
},
// 下拉刷新被复位(不常用)
// refresherrestore() {
// console.log("下拉刷新被复位")
// },
// 下拉刷新被中止(不常用)
// refresherabort() {
// console.log("下拉刷新被中止")
// }
}
}
</script>
<style scoped>
.scroll-wrapper {
width: 100%;
height: 100%;
}
</style>
components/search-bar/index.vue 0 → 100644
View file @ 79e17ca8
<template>
<view class="w-100 search-bar flex j-center a-center" @click="nav">
<view class="search text-center">
<text class="mr-2">icon</text>
<text class="font-28">搜索商品</text>
</view>
</view>
</template>
<script>
export default {
methods: {
nav() {
uni.navigateTo({
url: '/pages/search/index'
})
}
}
}
</script>
<style lang="scss" scoped>
.search-bar {
height: 98rpx;
@include borderBox(20rpx, 20rpx);
background-color: yellow;
.search {
width: 710rpx;
height: 72rpx;
line-height: 72rpx;
background-color: #fff;
}
}
</style>
config/index.js
View file @ 79e17ca8
......@@ -10,3 +10,8 @@ export const baseUrl = env[__wxConfig.envVersion]
// // #ifndef MP-WEIXIN
// export const baseUrl = process.env.NODE_ENV === 'development' ? env.develop : env.release
// // #endif
// 商品图片的域名地址
export const imgUrl = process.env.NODE_ENV === 'development' ? 'https://d.gelifood.com/' : 'https://www.gelifood.com/'
export const publicKey = '-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCp3Rit6cNlpOa9dbTx2ddt6ZblmMO04zdY+UIHMvsAnjBHYxEYfm7hx1yNkf1ohZNg47K+Ox/z8WcTRYpGnSka5UHDUTeBEQp4BGD25PsJLkc5YUk0PXjqRq5m+vuB3mEn7r6DaTwCxX5n2G4ky77xhzmZbG7MDP85RQHBVsvqYwIDAQAB-----END PUBLIC KEY-----'
\ No newline at end of file
lib/service/index.js
View file @ 79e17ca8
......@@ -43,7 +43,8 @@ export function request (options) {
case 10:
resolve({
status: true,
data: data.list,
data: res.data.list || res.data.data,
res: res.data,
msg: data.rep_msg
})
break;
......@@ -56,10 +57,11 @@ export function request (options) {
break;
default:
Toast({title: data.rep_msg})
reject({
resolve({
status: false,
code: status, // 正常不返回为了好找 后端调试 -1 => 业务错误（一般失败情况返回此项）;-2 => 系统异常; -3 => 请先登录; -4 => 请求失败; -10 => 签名失败
data: data.list,
res: res.data.list || res.data.data,
msg: data.rep_msg
})
break;
......
pages.json
View file @ 79e17ca8
......@@ -3,7 +3,7 @@
{
"path": "pages/home/index",
"style": {
"navigationBarTitleText": "首页"
"navigationBarTitleText": " "
}
},
{
......@@ -40,7 +40,7 @@
{
"path": "pages/goods/detail",
"style": {
"navigationBarTitleText": "商品详情"
"navigationStyle": "custom"
}
},
{
......@@ -49,12 +49,17 @@
"navigationBarTitleText": "确认订单"
}
},
{
"path": "pages/search/index",
"style": {
"navigationBarTitleText": "搜索"
}
},
{
"path": "pages/search/list",
"style": {
"navigationBarTitleText": "搜索"
}
}
],
"subPackages": [{
......
pages/carts/index.vue
View file @ 79e17ca8
<template>
<view class="cart-wrap">
<template v-if="cartList.length === 0">
<empty-view></empty-view>
<empty-view
iconSrc="../../static/images/common/icon_nothing.png"
text="购物车为空"
/>
</template>
<template v-else>
......@@ -15,23 +18,12 @@
<view>
<text>{{item.checked ? '选中' : '未选中'}}</text> <text>{{item.price}}</text>
</view>
<view class="flex j-start a-center text-center counts-wrap">
<view
class="count-btn"
:class="item.counts <= 1 ? 'btn-grey' : null"
@click.stop="changeCounts('subtraction', index)"
>-</view>
<input
class="count-input"
type="number"
v-model="item.counts"
:data-index="index"
@input="inputCount"
<view style="width: 240rpx;height: 64rpx;">
<input-number
:index="index"
:value="item.counts"
@change="numberChange"
/>
<view
class="count-btn"
@click.stop="changeCounts('add', index)"
>+</view>
</view>
</view>
</view>
......@@ -42,6 +34,7 @@
</template>
<script>
import inputNumber from '@/components/inputNumber/index.vue'
export default {
data() {
return {
......@@ -65,6 +58,10 @@ export default {
}
},
components: {
inputNumber
},
onPullDownRefresh() {
console.log('refresh');
setTimeout(function () {
......@@ -86,27 +83,8 @@ export default {
item.checked = !item.checked
this.$set(this.cartList, index, item)
},
// 数量递增/递减
changeCounts(type, idx) {
switch (type) {
case 'subtraction':
const count = this.cartList[idx].counts
console.log(count)
if(count <= 1) return this.$toast({title: '数量不能小于1'})
this.cartList[idx].counts -= 1
break;
case 'add':
this.cartList[idx].counts += 1
break;
default:
break;
}
},
// 输入数量
inputCount(e) {
const { index } = e.currentTarget.dataset
this.cartList[index].counts = Number(e.detail.value)
numberChange(e) {
this.cartList[e.index].counts = e.val
}
}
}
......
pages/category/cate.js 0 → 100644
View file @ 79e17ca8
import { isArray } from "@/utils/types.js"
// 递归添加一个选中状态
function dealCate (list) {
if(list && !isArray(list)) return list
for(let i = 0; i < list.length; i ++) {
list[i].checked = false
if(isArray(list[i].list)) {
dealCate(list[i].list)
}
}
return list
}
export default {
dealCate
}
\ No newline at end of file
pages/category/index.vue
View file @ 79e17ca8
......@@ -3,26 +3,159 @@
<!-- search bar -->
<view class="searchBar-wrap w-100">搜索框</view>
<!-- category -->
<view class="category flex j-between w-100">
<!-- category 未优化，可以递归组件 -->
<view class="category flex j-between w-100 font-24">
<scroll-view
class="scroll-left"
class="scroll-left text-left"
scroll-y
>
<view class="flex j-center a-center p-2" v-for="(item, index) in 20" :key="index">1</view>
<view
class="flex j-center flex-column a-center p-2"
v-for="cate_1 in cate_list"
:key="cate_1.cat_id"
>
<view>
<view @click.stop="cateChange(cate_1.cat_id)">{{cate_1.cat_name}}</view>
<view v-show="cate_1.checked && cate_1.list.length > 0">
<view
class="ml-2"
v-for="cate_2 in cate_1.list"
:key="cate_2.cat_id"
>
<view @click.stop="cateChange(cate_2.cat_id)">{{cate_2.cat_name}}</view>
<!-- 三级 -->
<!-- <view v-show="cate_2.checked && cate_2.list.length > 0">
<view
class="ml-4"
v-for="cate_3 in cate_2.list"
:key="cate_3.cat_id"
>{{cate_3.cat_name}}</view>
</view> -->
</view>
</view>
</view>
</view>
</scroll-view>
<scroll-view
class="scroll-right flex-1"
scroll-y
>
<view>2</view>
</scroll-view>
<view class="scroll-right flex-1">
<pull-list
:refresherEnabled="false"
@tolower="handleTolower"
@refresh="handleRefresh"
>
<view
v-for="(item, index) in goods_list"
:key="item.goods_id"
>
<view
v-for="good in goods_list[index]"
:key="good.goods_id"
@click="navDetail(good)"
>
<image
style="width: 300rpx;height: 300rpx;"
lazy-load
:src="imgUrl + good.goods_thumb"
mode="aspectFit"
/>
<view>{{good.goods_name}}</view>
</view>
</view>
<view v-show="showNoMoreMsg">没有更多了+++++++++++++</view>
</pull-list>
</view>
</view>
</view>
</template>
<script>
import pullList from '@/components/pull-list/index.vue'
import { getCatetories } from '@/apis/category.js'
import { searchGoods } from '@/apis/goods.js'
import { imgUrl } from '@/config/index.js'
import LoadMore from '@/utils/load-more.js'
import cate_fn from './cate.js'
let cat_id = 0
const params = {
sort: 1,
city: 0,
keywords: '',
cat_id: 0
}
export default {
data() {
return {
imgUrl,
showNoMoreMsg: false,
cate_list: [],
cate_idex: [0, 0, 0], // 三级分类的下标，用于获取各个分类的name用于展示
goods_list: [] // 这里存二维数组，每10个(请求的条数)为一维 在小程序端更新数组不用setData整个数组
}
},
components: {
pullList
},
async created() {
this.getCate()
this.loadMore = new LoadMore(params)
},
methods: {
...cate_fn,
async getCate() {
try{
const { status, data } = await getCatetories(1, 0)
if(status) {
let cate_list = this.cate_list
cate_list = this.dealCate(data[1].list)
cate_list[0].checked = true
cate_list[0].list[0].checked = true
// cate_list[0].list[0].list[0].checked = true
cat_id = cate_list[0].cat_id
console.log(cat_id)
this.cate_list = cate_list
this.getCateGoods()
}
}catch(e){
this.$toast({title: e.msg || '程序错误'})
}
},
// 触底加载更多
handleTolower() {
this.getCateGoods()
},
cateChange(id) {
params.cat_id = id
cat_id = id
this.loadMore.resetParams()
this.goods_list = []
this.getCateGoods()
},
async getCateGoods() {
try{
const res = await this.loadMore.getList(params, searchGoods)
if(!res.status) return this.showNoMoreMsg = true
this.$set(this.goods_list, this.goods_list.length, res.data)
}catch(e){
console.log(e)
this.$toast({title: e.msg || '程序错误'})
}
},
// 商品详情
navDetail(good) {
uni.navigateTo({
url: `/pages/goods/detail?goods_id=${good.goods_id}&shop_id=${good.shop_id}&agent_id=${good.agent_id}`
})
}
}
}
</script>
<style lang="scss" scoped>
......
pages/goods/detail.vue
View file @ 79e17ca8
<template>
<view>商品详情
<view class="w-100">
</view>
<view class="w-100">
<swiper
class="w-100"
:autoplay="true"
:interval="3000"
:duration="1000"
>
<swiper-item
class="w-100"
v-for="(item, index) in detail.imgs"
:key="index"
>
<image :src="imgUrl + item.img_url" lazy-load mode="widthFix"></image>
</swiper-item>
</swiper>
<u-parse
:content="test"
@preview="preview"
:imageProp="imageProp"
/>
<template v-if="detail.goods_desc && detail.goods_desc !== '<p><br></p>'">
<u-parse
:content="detail.goods_desc"
@preview="preview"
:imageProp="imageProp"
/>
</template>
</view>
</template>
<script>
import uParse from '@/components/parse/parse.vue'
const test = '<p><img src="https://cms.gelifood.com/upload/editors/img/20190926/1569509957668808.jpg" style="" title="1569509957668808.jpg"></p><p><img src="https://cms.gelifood.com/upload/editors/img/20190926/1569509957470985.jpg" style="" title="1569509957470985.jpg"></p><p><img src="https://cms.gelifood.com/upload/editors/img/20190926/1569509957573691.jpg" style="" title="1569509957573691.jpg"></p><p><img src="https://cms.gelifood.com/upload/editors/img/20190926/1569509957225054.jpg" style="" title="1569509957225054.jpg"></p><p><img src="https://cms.gelifood.com/upload/editors/img/20190926/1569509957787652.jpg" style="" title="1569509957787652.jpg"></p><p><img src="https://cms.gelifood.com/upload/editors/img/20190926/1569509957604706.jpg" style="" title="1569509957604706.jpg"></p><p><img src="https://cms.gelifood.com/upload/editors/img/20190926/1569509957869862.jpg" style="" title="1569509957869862.jpg"></p><p><br></p>'
import { goodDetail } from '@/apis/goods.js'
import { imgUrl } from '@/config/index.js'
let goodsParams = {}
export default {
data() {
return {
test,
imageProp: {
mode: 'widthFix',
lazyLoad: true
}
},
imgUrl,
detail: null
}
},
components: {
uParse
},
onLoad(options) {
goodsParams = {...options}
this.getDetail()
},
methods: {
preview(src, e) {
// do something
},
async getDetail() {
try{
const { status, data } = await goodDetail(goodsParams)
if(status) {
this.detail = data
}
}catch(e){
console.log(e)
this.$toast({title: e.msg || '程序错误'})
}
}
}
}
</script>
......
pages/home/components/goods-module.vue 0 → 100644
View file @ 79e17ca8
<template>
<view class="w-100">
<view class="font-bold font-36 p-2">{{title}}</view>
<view class="w-100 flex j-start a-center flex-wrap">
<view
class="item mr-2"
v-for="item in list"
:key="item"
>
111
</view>
</view>
</view>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
},
list: {
type: Array,
default: () => []
}
}
}
</script>
<style lang="scss" scoped>
.item {
box-sizing: border-box;
width: 320rpx;
height: 375rpx;
border: 1rpx solid #ccc;
}
</style>
pages/home/index.vue
View file @ 79e17ca8
<template>
<view class="content">
<view>
<!-- 店铺信息 -->
<view class="storeInfo-wrap w-100 flex j-start a-center">
<view class="logo mx-2"></view>
<view class="introduct flex-1 flex j-between flex-column font-28">
<view>店铺名称</view>
<view class="intro-deatil">简介：店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介</view>
</view>
</view>
<!-- content -->
<template v-if="isOverdue">
<view class="w-100 content-wrap flex flex-column j-center a-center">
<view style="width: 300rpx;height:300rpx;background-color: red;"></view>
<view class="font-32 font-bold my-3">店铺已打烊</view>
<view class="mx-5 font-24">如需查看历史购买记录，请前往【我的】登录查看</view>
</view>
</template>
<template v-else>
<view class="w-100 content-wrap">
<!-- search bar -->
<search-bar />
<view class="menu w-100 flex j-around a-center flex-nowrap">
<view class="flex-1 font-28 flex-column flex j-center a-center" @click="handleMenu('contact')">
<view style="width: 100rpx;height: 100rpx;">icon位</view>
<view>联系老板</view>
</view>
<view class="flex-1 font-28 flex-column flex j-center a-center" @click="handleMenu('collect')">
<view style="width: 100rpx;height: 100rpx;">icon位</view>
<view>收藏历史</view>
</view>
<view class="flex-1 font-28 flex-column flex j-center a-center" @click="handleMenu('order')">
<view style="width: 100rpx;height: 100rpx;">icon位</view>
<view>我的订单</view>
</view>
<label for="share">
<view class="flex-1 font-28 flex-column flex j-center a-center">
<view style="width: 100rpx;height: 100rpx;">icon位</view>
<view>分享</view>
</view>
</label>
</view>
<view>
<goods-module title="热销111" :list="module1" />
</view>
</view>
</template>
<!-- <view class="test" @click="login">登录</view>
<view>{{str}}</view> -->
<!-- <city-picker @confirmCity="confirmCity"></city-picker> -->
<navigator url="/pages/goods/detail">详情页</navigator>
<!-- <navigator url="/pages/goods/detail">详情页</navigator> -->
<button type="default" open-type="share" id="share"></button>
</view>
</template>
<script>
import searchBar from '@/components/search-bar/index.vue'
import goodsModule from './components/goods-module.vue'
import cityPicker from '@/components/city-picker/index.vue'
import { mapState } from 'vuex'
import { test } from '@/apis/test.js'
import { checkLogin } from '@/utils/common.js'
export default {
data() {
return {
str: ""
module1: [2,1,1]
}
},
components: {
searchBar,
goodsModule,
cityPicker
},
computed: {
...mapState(['systemInfo'])
...mapState({
isOverdue: state => state.user.isOverdue,
token: state => state.user.token
})
},
async onLoad() {
created() {
// 获取店铺信息
uni.setNavigationBarTitle({
title: '测试店铺'
})
},
onShareAppMessage() {
return {
title: '分享title'
}
},
methods: {
handleMenu(type) {
checkLogin(() => {
switch(type) {
case 'contact':
uni.showModal({
content: ''
})
break;
case 'collect':
uni.navigateTo({
url: '/pages/order/order-list'
})
break;
case 'order':
uni.navigateTo({
url: '/pages/order/order-list'
})
break;
default:
this.$toast({title: '没有找到导航'})
break;
}
})
},
login() {
wx.navigateTo({
url: '/pages/login/index'
......@@ -41,10 +134,25 @@ export default {
}
</script>
<style lang="scss">
.test {
width: 300rpx;
height: 300rpx;
background: $test-primary;
<style lang="scss" scoped>
.storeInfo-wrap {
height: 240rpx;
.logo {
flex: 0 0 160rpx;
width: 160rpx;
height: 160rpx;
background-color: yellow;
}
.introduct {
height: 160rpx;
.intro-deatil {
@include text-ellipsis(2);
}
}
}
.content-wrap {
min-height: calc(100vh - 240rpx);
}
</style>
pages/search/index.vue
View file @ 79e17ca8
<template>
<view>search</view>
<view class="w-100">
<!-- searbar -->
<view class="search-bar flex j-between a-center">
<input
class="input"
type="text"
v-model="val"
placeholder="搜索商品"
confirm-type="search"
@confirm="search"
/>
<view class="font-28" @click="search">搜索</view>
<view class="search-icon">icon</view>
</view>
<!-- history -->
<view class="history-wrap w-100">
<view class="font-32 flex j-between w-100 font-bold py-2">
<view>历史记录</view>
<view @click="clearHistory">del</view>
</view>
<view class="w-100 flex j-start a-center flex-wrap">
<view
class="history-item px-1 mr-2 mb-2"
v-for="(item, index) in list"
:key="index"
@click="handleHistory(item)"
>{{item}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
val: '',
list: []
}
},
created() {
this.list = this.$getStorage('search-history') || []
},
onUnload() {
this.$setStorage('search-history', this.list)
},
methods: {
// 搜索
search() {
const { val, list } = this
if(!val) return this.$toast({title: '请输入搜索内容'})
if(!list.includes(val)) {
this.list.push(val)
}
uni.redirectTo({
url: `/pages/search/list?val=${val}`
})
},
// 点击历史
handleHistory(val) {
uni.redirectTo({
url: `/pages/search/list?val=${val}`
})
},
// 清除记录
clearHistory() {
this.list = []
}
}
}
</script>
<style>
<style lang="scss" scoped>
.search-bar {
position: relative;
@include borderBox(20rpx, 20rpx);
height: 98rpx;
background-color: yellow;
.input {
padding-left: 80rpx;
width: 640rpx;
background-color: #fff;
}
.search-icon {
position: absolute;
left: 20rpx;
top: 50%;
transform: translateY(-50%);
}
}
.history-wrap {
@include borderBox(20rpx, 20rpx);
.history-item {
border: 1rpx solid #ccc;
}
}
</style>
pages/search/list.vue 0 → 100644
View file @ 79e17ca8
<template>
<view class="w-100">
<!-- searchBar -->
<viwe class="search-bar w-100 flex j-between a-center">
<input
class="input"
type="text"
v-model="val"
placeholder="搜索商品"
confirm-type="search"
@confirm="search"
/>
<view @click="nav">icon</view>
</viwe>
<!-- list -->
<view class="w-100">
<view class="filter-bar w-100">
<view>综合</view>
<view>销量</view>
<view>价格</view>
</view>
<view class="list w-100">
</view>
</view>
</view>
</template>
<script>
import { searchGoods } from '@/apis/goods.js'
import LoadMore from '@/utils/load-more.js'
export default {
onLoad(options) {
this.loadmore = new LoadMore()
uni.setNavigationBarTitle({
title: options.val
})
},
methods: {
nav() {
uni.switchTab({
url: '/pages/carts/index'
})
},
}
}
</script>
<style lang="scss" scoped>
.search-bar {
position: relative;
@include borderBox(20rpx, 20rpx);
height: 98rpx;
background-color: yellow;
.input {
padding-left: 80rpx;
width: 640rpx;
background-color: #fff;
}
.search-icon {
position: absolute;
left: 20rpx;
top: 50%;
transform: translateY(-50%);
}
}
</style>
readme.md
View file @ 79e17ca8
......@@ -18,7 +18,10 @@
uni.setStorageSync("str2", str1) // "1"
getStorage("str1") === getStorage("str2") // true
```
+ 小程序和vue页面生命周期顺序
- created => onLoad => onShow => mounted => onReady => onUnload => destroyed
#### 未完成
+ 请求状态码
+ 分页封装未处理页数
\ No newline at end of file
+ 分页封装未处理页数
+ 封装数量递增/递减 分类树形递归 首页
\ No newline at end of file
store/modules/user.js
View file @ 79e17ca8
......@@ -3,6 +3,7 @@ import { getStorage, setStorage, removeStorage } from '@/lib/storage'
const state = {
token: '111',
isOverdue: false, // 服务是否过期
userInfo: ''
}
......
utils/list-page.js deleted 100644 → 0
View file @ 41acc0d0
import { isFunction } from '@/utils/types.js'
import Toast from '@/lib/storage/index.js'
/**
* 多页加载
*/
class ListPages {
constructor() {
this.page = 1 // 当前页面
this.counts = 10 // 每页的数量
this.flat = false // 是否在请求
}
async getList(cb) {
try {
if(this.flat || !isFunction(cb)) return console.log('正在请求中获取callback不是函数')
await cb.call(this, this.page, this.counts)
this.page ++
this.flat = false
} catch (error) {
console.log(error)
Toast({title: '获取列表失败'})
}
}
// 将页数重置为0 不重置为0也可以 看情况处理
async refresh(cb) {
try {
if(this.flat || !isFunction(cb)) return console.log('正在请求中获取callback不是函数')
this.page = 1
await cb.call(this, 1, this.counts)
this.page ++
this.flat = false
} catch (error) {
console.log(error)
Toast({title: '获取列表失败'})
}
}
}
export default ListPages
\ No newline at end of file
utils/load-more.js 0 → 100644
View file @ 79e17ca8
import { isFunction } from '@/utils/types.js'
/**
* 多页加载
*/
class LoadMore {
constructor() {
this.resetParams()
}
// params 和 页数页码合并组成参数
async getList(params, cb) {
try {
if(!isFunction(cb)) return { status: false, data: null, msg: '参数类型不正确' }
if(this.flat) return { status: false, data: null, msg: '请求中，请勿重复操作' }
if(!!this.totalPage && (this.page === this.totalPage)) return { status: false, data: null, msg: '没有更多页面了' }
const requestParams = Object.assign(params, {
page: this.page,
pagenum: this.pagenum
})
const { status, data, res } = await cb(requestParams)
if(!status) return { status: false, data: null, msg: '没有更多页面了' }
const count = res.pageinfo.count // 总数
const pages = Math.ceil(count / this.pagenum)
if(this.page < pages) {
this.page ++
}
this.total = count
this.totalPage = pages
this.flat = false
return { status: true, data, msg: '成功' }
} catch (e) {
// 如果无一页，接口code会返回-1 在封装走reject 在这里会直接抛出
return { status: false, data: null, msg: '获取列表失败' }
}
}
// 重置页数 页码参数
resetParams() {
this.page = 1 // 当前页面
this.pagenum = 10 // 每页的数量
this.total = 0
this.totalPage = 0 // 总页数
this.flat = false // 是否在请求
}
}
export default LoadMore
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment