TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

完善商品搜索，商品分页，调整聊聊栏目提示开发提示，新增检查版本更新

Browse Source
This commit is contained in:
唐明明
2022-01-14 10:19:17 +08:00
parent e46e35cfbd
commit 1c4393bb6a
9 changed files with 419 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
pages/im/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<view class="content">
<block v-if="messageArr.length >= 1">
<block v-if="messageArr.length < 1">
<view class="vertical null-list">
<u-empty
icon="http://cdn.uviewui.com/uview/empty/message.png"
@@ -17,22 +17,30 @@
<!-- <button type="default">连接</button> -->
<!-- <button type="default">发送</button> -->
<view v-for="item in 2" :key="item" class="mssage-box">
<view class="mssage-action" @click="$Router.push({name: 'ImChat'})">
<u-avatar
clsss="mssage-action-cover"
src="https://cdn.uviewui.com/uview/album/1.jpg"
size="44"
text="唐"
font-size="14"
randomBgColor
></u-avatar>
<view v-for="(item, index) in messageArr" :key="index" class="mssage-box">
<view class="mssage-action" @click="openChum">
<block v-if="item.cover === ''">
<u-avatar
clsss="mssage-action-cover"
size="44"
:text="item.text"
font-size="14"
randomBgColor
></u-avatar>
</block>
<block v-else>
<u-avatar
clsss="mssage-action-cover"
:src="item.cover"
size="44"
></u-avatar>
</block>
<view class="mssage-action-content">
<view class="mssage-header">
<view class="header-name">唐明明</view>
<view class="header-time">2021/12/31</view>
<view class="header-name">{{item.name}}</view>
<view class="header-time">{{item.time}}</view>
</view>
<view class="mssage-msg">消息</view>
<view class="mssage-msg">{{item.message}}</view>
</view>
</view>
</view>
@@ -45,7 +53,33 @@
export default {
data() {
return {
messageArr : [],
messageArr : [
{
cover: 'https://cdn.uviewui.com/uview/album/1.jpg',
name: '班班五月',
message: '咱们进直播间了吗？上课啦~今天教大家【拆解项目背后的逻辑】',
time: '昨天'
},
{
cover: 'https://cdn.uviewui.com/uview/album/4.jpg',
name: '周磊',
message: '[语音]',
time: '周一'
},
{
cover: '',
text: 'S',
name: 'SKY',
message: '谢谢',
time: '2022/1/5'
},
{
cover: 'https://cdn.uviewui.com/uview/album/5.jpg',
name: '俊少',
message: '[语音]',
time: '2022/1/4'
},
],
optionsAction: [
{
text: '删除',
@@ -58,17 +92,26 @@
},
methods:{
openChum(){
this.$Router.push({name: 'ImChum'})
console.log("好友列表")
uni.showToast({
title: '聊聊系统正在开发中，敬请期待',
icon : 'none'
})
}
},
onNavigationBarButtonTap(e) {
switch (e.index){
case 1:
this.openChum()
uni.showToast({
title: '聊聊好友系统正在开发中，敬请期待',
icon : 'none'
})
break;
case 0:
console.log("扫码添加好友")
uni.showToast({
title: '聊聊扫一扫系统正在开发中，敬请期待',
icon : 'none'
})
break;
}
}

108
pages/index/search.vue
View File

@@ -1,26 +1,28 @@
<template>
<view class="content">
<view>
<!-- 搜索 -->
<view class="search">
<view class="search-nav">
<u-search
v-model="keyword"
placeholder="请输入食物名称"
focus
:clearabled="true"
:showAction="false"
@change="change"
@search="search"
@clear="clear"
color="#000000"
bgColor="#F3F6FB"
searchIconColor="#34CE98"
/>
</view>
<view class="search-cancel" @click="$router.back(-1)">
取消
</view>
</view>
<u-sticky>
<view class="header ios-top">
<view class="search">
<view class="search-nav">
<u-search
v-model="keyword"
placeholder="请输入食物名称"
focus
:clearabled="true"
:showAction="false"
@change="change"
@search="search"
@clear="clear"
color="#000000"
bgColor="#F3F6FB"
searchIconColor="#34CE98"
/>
</view>
<view class="search-cancel" @click="$Router.back()">取消</view>
</view>
</view>
</u-sticky>
<view class="recommend" v-if="listArr == ''">
<view class="recommend-title">
@@ -123,44 +125,34 @@
</script>
<style lang="scss" scoped>
.content {
padding-top: calc(var(--status-bar-height) + 120rpx);
overflow: hidden;
}
// 搜索
.search {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
height: 120rpx;
background-color: white;
@extend .ios-top;
padding: $padding;
box-sizing: border-box;
.search-nav {
width: calc(100% - 100rpx);
background: $window-color;
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
color: $text-gray;
font-size: $title-size-lg;
display: flex;
}
.search-cancel {
color: $main-color;
position: absolute;
right: $padding;
top: $padding;
line-height: 80rpx;
width: 100rpx;
text-align: right;
}
}
.header{
background-color: white;
.search {
position: relative;
padding: $padding/2 $padding;
box-sizing: border-box;
.search-nav {
width: calc(100% - 100rpx);
background: $window-color;
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
color: $text-gray;
font-size: $title-size-lg;
display: flex;
}
.search-cancel {
color: $main-color;
position: absolute;
right: $padding;
top: $padding/2;
line-height: 80rpx;
width: 100rpx;
text-align: right;
}
}
}
.recommend {
padding: $padding;
box-sizing: border-box;

2
pages/order/index.vue
View File

@@ -5,6 +5,7 @@
<u-tabs
class="tabs"
:list="tabs"
:current="index"
lineColor="#34CE98"
@click="onTabs"
sticky
@@ -63,6 +64,7 @@
}
},
mounted() {
this.index = this.$Route.query.index
this.getOrder()
},
methods:{

3
pages/store/index.vue
View File

@@ -89,6 +89,9 @@
},
onPullDownRefresh() {
this.getMall()
},
onNavigationBarButtonTap() {
this.$Router.push({name: 'StoreSearch'})
}
}
</script>

37
pages/store/list.vue
View File

@@ -11,6 +11,10 @@
color="#e6576b"
@onGoods="$Router.push({ name: 'StoreGoods', params: {id: $event.goods_id}})"
/>
<!-- 加载更多 -->
<view class="pages-load">
<u-loadmore :status="status" />
</view>
</block>
<block v-else>
<view class="vertical pages-empty">
@@ -34,7 +38,8 @@
classify: [
{ name: "全部", category_id: "" }
],
cid : ""
cid : "",
page : 1
};
},
mounted(){
@@ -46,12 +51,17 @@
},
methods:{
// 商品列表
getLists(cid) {
getLists() {
lists({
category_id : this.$Route.query.id,
category_cid: this.cid
category_cid: this.cid,
page : this.page
}).then(res => {
this.goodsArr = res.data
if(res.page.current === 1){
this.goodsArr = []
}
this.goodsArr = this.goodsArr.concat(res.data)
this.status = res.page.has_more ? 'loadmore' : 'nomore'
uni.stopPullDownRefresh()
})
},
@@ -66,10 +76,22 @@
this.goodsArr = []
this.cid = e.category_id
this.getLists()
}
},
},
onPullDownRefresh() {
this.page = 1
this.getLists()
},
onReachBottom() {
if(this.status === 'loadmore'){
this.page += 1
this.status = 'loading'
this.getLists()
}
},
onNavigationBarButtonTap() {
this.$Router.push({name: 'StoreSearch'})
}
}
</script>
@@ -83,4 +105,9 @@
.pages-empty{
height: 70vh;
}
// 加载分页
.pages-load{
padding-bottom: $padding;
}
</style>

116
pages/store/search.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<view class="content">
<!-- 搜索 -->
<view class="header">
<input type="text" v-model="searchVlaue" focus placeholder="输入产品关键搜索" />
<view class="btn" @click="getLists()">搜索</view>
</view>
<!-- 搜索列表 -->
<block v-if="goodsArr.length >= 1">
<oct-goods
:lists="goodsArr"
color="#e6576b"
@onGoods="$Router.push({ name: 'StoreGoods', params: {id: $event.goods_id}})"
/>
<!-- 加载更多 -->
<view class="pages-load">
<u-loadmore :status="status" />
</view>
</block>
<block v-else>
<view class="vertical pages-empty">
<u-empty
icon="http://cdn.uviewui.com/uview/empty/search.png"
textColor="#999"
text="暂无搜索结果"
></u-empty>
</view>
</block>
</view>
</template>
<script>
import { lists } from "@/apis/interfaces/store"
export default {
data() {
return {
searchVlaue : '',
goodsArr : [],
status : "loading",
page : 1
};
},
methods:{
getLists() {
lists({
name: this.searchVlaue,
page: this.page
}).then(res => {
console.log(res.page)
if(res.page.current === 1){
this.goodsArr = []
}
this.goodsArr = this.goodsArr.concat(res.data)
this.status = res.page.has_more ? 'loadmore' : 'nomore'
})
}
},
onReachBottom() {
if(this.status === 'loadmore'){
this.page += 1
this.status = 'loading'
this.getLists()
}
}
}
</script>
<style lang="scss" scoped>
.content{
min-height: 100vh;
padding-top: 110rpx;
background: $window-color;
box-sizing: border-box;
}
// 搜索
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 120rpx;
padding: 20rpx ($padding + 150) 20rpx $padding;
box-sizing: border-box;
background: white;
input{
background: $window-color;
height: 70rpx;
line-height: 70rpx;
padding: 0 $padding;
border-radius: 35rpx;
font-size: $title-size-lg;
}
.btn{
position: absolute;
top: 20rpx;
right: $padding;
width: 130rpx;
background: $window-color;
line-height: 70rpx;
text-align: center;
font-size: $title-size-lg;
color: $main-color;
font-weight: bold;
border-radius: 35rpx;
}
}
// 结果空
.pages-empty{
height: 80vh;
}
// 加载分页
.pages-load{
padding-bottom: $padding;
}
</style>