feat 完成页面

This commit is contained in:
AERWEN\26795 2023-10-29 15:07:55 +08:00
parent adf3e37eaf
commit 01669b8c2b
13 changed files with 710 additions and 71 deletions

View File

@ -6,6 +6,7 @@
"pages/login/authorize-avatar-name/index",
"pages/login/phone-register/index",
"pages/login/agree-link/index",
"pages/emoticon/result/index",
"pages/usercenter/index",
"pages/usercenter/goods-collect/index",
"pages/usercenter/goods-history/index",

View File

@ -0,0 +1,179 @@
/* eslint-disable no-param-reassign */
import Toast from 'tdesign-miniprogram/toast/index';
const initFilters = {
overall: 1,
sorts: '',
};
Page({
data: {
emoticonDataList: [{
emoticonDataId: 1,
emoticonDataImg: "http://mall.api.aerwen.net/Uploads/uploads/20231029/C59225894486D6A4.jpg",
emoticonDataName: "loopy表情包"
},],
tabList: [{
text: "全部",
key: 0,
},
{
text: "可爱loopy",
key: 1,
},
],
categoryGuid: 0,
overall: 1,
show: false,
hasLoaded: false,
keywords: '',
loadMoreStatus: 0,
loading: true,
},
privateData: {
tabIndex: 0,
},
total: 0,
pageNum: 1,
pageSize: 10,
onLoad(options) {
const {
searchValue = ''
} = options || {};
this.setData({
keywords: searchValue,
},
() => {
this.init(true);
},
);
},
generalQueryData(reset = false) {
const {
keywords,
} = this.data;
const {
pageNum,
pageSize
} = this;
const params = {
pageNum: 1,
pageSize: 6,
goodsName: keywords,
};
if (reset) return params;
return {
...params,
pageNum: pageNum + 1,
pageSize,
};
},
// 点击分类
tabChangeHandle(e) {
this.privateData.tabIndex = e.detail;
this.setData({
categoryGuid: e.detail.value,
});
// 刷新列表
this.init()
},
async init(reset = true) {
const {
loadMoreStatus,
emoticonDataList = []
} = this.data;
const params = this.generalQueryData(reset);
if (loadMoreStatus !== 0) return;
this.setData({
loadMoreStatus: 1,
loading: true,
});
// try {
// const result = await getemoticonList(params);
// const data = result.data;
// if (result.code == 200) {
// const {
// result,
// totalPage = 0
// } = data;
// if (totalPage === 0 && reset) {
// this.total = totalPage;
// this.setData({
// emptyInfo: {
// tip: '抱歉,未找到相关商品',
// },
// hasLoaded: true,
// loadMoreStatus: 0,
// loading: false,
// emoticonDataList: [],
// });
// return;
// }
// const _emoticonDataList = reset ? result : emoticonDataList.concat(result);
// const _loadMoreStatus = _emoticonDataList.length === totalPage ? 2 : 0;
// this.pageNum = params.pageNum || 1;
// this.total = totalPage;
// this.setData({
// emoticonDataList: _emoticonDataList,
// loadMoreStatus: _loadMoreStatus,
// });
// } else {
// this.setData({
// loading: false,
// });
// wx.showToast({
// title: '查询失败,请稍候重试',
// });
// }
// } catch (error) {
// this.setData({
// loading: false,
// });
// }
this.setData({
hasLoaded: true,
loading: false,
});
},
handleSubmit(e) {
this.setData({
emoticonDataList: [],
loadMoreStatus: 0,
keywords: e.detail.value
},
() => {
this.init(true);
},
);
},
onReachBottom() {
const {
emoticonDataList
} = this.data;
const {
total = 0
} = this;
if (emoticonDataList.length === total) {
this.setData({
loadMoreStatus: 2,
});
return;
}
this.init(false);
},
});

View File

@ -0,0 +1,13 @@
{
"navigationBarTitleText": "搜索",
"usingComponents": {
"t-search": "tdesign-miniprogram/search/search",
"t-input": "tdesign-miniprogram/input/input",
"t-empty": "tdesign-miniprogram/empty/empty",
"t-toast": "tdesign-miniprogram/toast/toast",
"t-icon": "tdesign-miniprogram/icon/icon",
"t-tabs": "tdesign-miniprogram/tabs/tabs",
"t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel"
},
"onReachBottomDistance": 50
}

View File

@ -0,0 +1,34 @@
<view class="result-container">
<t-search
t-class="t-search"
t-class-input-container="t-class__input-container"
t-class-left="t-search__left-icon"
t-class-input="t-search__input"
value="{{keywords}}"
leftIcon=""
placeholder="搜索你想要的表情/头像/壁纸"
bind:submit="handleSubmit"
>
<t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" />
</t-search>
<!-- 分类 -->
<view class="home-page-tabs">
<t-tabs t-class="t-tabs" t-class-active="tabs-external__active" t-class-item="tabs-external__item" defaultValue="{{0}}" space-evenly="{{false}}" bind:change="tabChangeHandle">
<t-tab-panel wx:for="{{tabList}}" wx:for-index="index" wx:key="index" label="{{item.text}}" value="{{item.key}}" />
</t-tabs>
</view>
<view class="empty-wrap" wx:if="{{emoticonDataList.length === 0 && hasLoaded}}">
<t-empty t-class="empty-tips" size="240rpx" description="暂无相关表情包" />
</view>
<!-- 列表 -->
<view class="last-updated-list">
<view class="last-updated-list-item" wx:for="{{emoticonDataList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
<image class="image-box" src="{{item.emoticonDataImg}}" mode="aspectFill" />
</view>
</view>
<load-more wx:if="{{emoticonDataList.length > 0}}" status="{{loadMoreStatus}}" no-more-text="没有更多了" />
</view>
<t-toast id="t-toast" />

View File

@ -0,0 +1,146 @@
page {
background-color: #fff;
}
page view {
box-sizing: border-box;
}
.result-container {
display: block;
}
.result-container .t-search {
padding: 0 30rpx;
background-color: #fff;
}
.result-container .t-class__input-container {
height: 64rpx !important;
border-radius: 32rpx !important;
}
.result-container .t-search__left-icon {
display: flex;
align-items: center;
}
.result-container .t-search__input {
font-size: 28rpx !important;
color: #333 !important;
}
.result-container .category-goods-list {
background-color: #f2f2f2;
padding: 20rpx 24rpx;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.result-container .category-goods-list .goods-card__body {
width: 100% !important;
}
.result-container .wr-goods-list {
background: #f2f2f2 !important;
}
.result-container .t-image__mask {
display: flex !important;
}
.result-container .empty-wrap {
margin-top: 184rpx;
margin-bottom: 120rpx;
height: 300rpx;
}
.result-container .empty-wrap .empty-tips .empty-content .content-text {
margin-top: 40rpx;
}
.result-container .price-container {
padding: 32rpx;
height: 100vh;
max-width: 632rpx;
background-color: #fff;
border-radius: 30rpx 0 0 30rpx;
}
.result-container .price-between {
font-size: 26rpx;
font-weight: 500;
color: rgba(51, 51, 51, 1);
}
.result-container .price-ipts-wrap {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 24rpx;
}
.result-container .price-ipts-wrap .price-divided {
position: relative;
width: 22rpx;
margin: 0 20rpx;
color: #222427;
}
.result-container .price-ipts-wrap .price-ipt {
box-sizing: border-box;
width: 246rpx;
font-size: 24rpx;
height: 56rpx;
padding: 0 24rpx;
text-align: center;
border-radius: 8rpx;
color: #333;
background: rgba(245, 245, 245, 1);
}
.t-class-input {
font-size: 24rpx !important;
}
.t-search__clear {
font-size: 40rpx !important;
}
.result-container .price-ipts-wrap .price-ipt::after {
border: none !important;
}
.result-container .t-input__control {
font-size: 24rpx !important;
text-align: center;
}
.home-page-tabs {
--td-tab-nav-bg-color: transparent;
--td-tab-border-color: transparent;
--td-tab-item-color: #666;
--td-tab-track-color: red;
}
.last-updated-list{
margin-top: 20rpx;
display: flex;
flex-wrap: wrap;
}
.last-updated-list-item{
width: 200rpx;
height: 200rpx;
border: 1rpx solid #E0E0E0;
border-radius: 10rpx;
margin: 15rpx;
overflow: hidden;
}
.last-updated-list-item .image-box{
width: 100%;
height: 100%;
}

View File

@ -1,25 +1,55 @@
import {
getbannerList
} from '~/services/home/getbannerList';
import {
getHomeCategoryListApi
} from '~/services/home/getHomeCategoryListApi';
import {
getNoticeList
} from '~/services/home/getNoticeList';
import {
getSearchRecList
} from '~/services/home/getSearchRecList';
import Toast from 'tdesign-miniprogram/toast/index';
Page({
data: {
imgSrcs: [],
tabList: [
tabList: [{
text: "精选推荐",
key: 0,
categoryGuid: 1,
}],
hotCategoryList: [{
emotionCategoryId: 1,
emotionCategoryImg: "http://mall.api.aerwen.net/Uploads/uploads/20231029/C59225894486D6A4.jpg",
emotionCategoryName: "loopy表情包"
},
{
text: "精选推荐",
key: 0,
categoryGuid: 1,
}
emotionCategoryId: 2,
emotionCategoryImg: "http://mall.api.aerwen.net/Uploads/uploads/20231029/C59225894486D6A4.jpg",
emotionCategoryName: "loopy表情包"
},
{
emotionCategoryId: 2,
emotionCategoryImg: "http://mall.api.aerwen.net/Uploads/uploads/20231029/C59225894486D6A4.jpg",
emotionCategoryName: "loopy表情包"
},
{
emotionCategoryId: 2,
emotionCategoryImg: "http://mall.api.aerwen.net/Uploads/uploads/20231029/C59225894486D6A4.jpg",
emotionCategoryName: "loopy表情包"
},
{
emotionCategoryId: 2,
emotionCategoryImg: "http://mall.api.aerwen.net/Uploads/uploads/20231029/C59225894486D6A4.jpg",
emotionCategoryName: "loopy表情包"
},
],
lastUpdatedList: [{
emoticonDataId: 1,
emoticonDataImg: "http://mall.api.aerwen.net/Uploads/uploads/20231029/C59225894486D6A4.jpg",
emoticonDataName: "loopy表情包"
}, ],
noticeList: [],
popularWords: [],
marquee: {
speed: 40,
loop: -1,
@ -81,38 +111,31 @@ Page({
}
});
// 获取首页推荐类目
// getHomeCategoryListApi().then((res) => {
// this.setData({
// tabList: res.data,
// });
// this.data.tabList.unshift({
// text: "精选推荐",
// key: 0,
// categoryGuid: 1,
// })
// this.setData({
// tabList: res.data,
// pageLoading: false,
// });
// // 刷新列表
// });
// 获取公告列表
getNoticeList().then((res) => {
// 获取搜索推荐
getSearchRecList().then((res) => {
if (res.code == 200) {
const _noticeData = res.data.map((v) => {
return {
...v,
visible: true
};
});
this.setData({
noticeList: _noticeData,
popularWords: res.data,
pageLoading: false
});
}
} else {}
});
// 获取公告列表
// getNoticeList().then((res) => {
// if (res.code == 200) {
// const _noticeData = res.data.map((v) => {
// return {
// ...v,
// visible: true
// };
// });
// this.setData({
// noticeList: _noticeData,
// pageLoading: false
// });
// }
// });
},
// 点击分类
@ -134,4 +157,37 @@ Page({
},
// 点击搜索推荐
handleRecTap(e) {
const {
dataset
} = e.currentTarget;
const _searchValue = dataset?.value;
if (_searchValue) {
wx.navigateTo({
url: `/pages/emoticon/result/index?searchValue=${_searchValue}`,
});
}
},
// 点击热门分类
handleClickHotCategory(e) {
const {
dataset
} = e.currentTarget;
const _searchValue = dataset?.value;
if (_searchValue) {
wx.navigateTo({
url: `/pages/emoticon/result/index?searchValue=${_searchValue}`,
});
}
},
//点击全部
handleClickAll() {
wx.navigateTo({
url: `/pages/emoticon/result/index`,
});
},
});

View File

@ -1,6 +1,7 @@
{
"navigationBarTitleText": "首页",
"navigationBarTitleText": "表情包图片大全",
"onReachBottomDistance": 10,
"navigationBarBackgroundColor": "#EDD6AF",
"backgroundTextStyle": "light",
"enablePullDownRefresh": true,
"usingComponents": {

View File

@ -3,28 +3,8 @@
</view>
<view class="home-page-header">
<!-- 搜索框 -->
<view class="search" bind:tap="navToSearchPage">
<t-search t-class-input="t-search__input" t-class-input-container="t-search__input-container" placeholder="请输入关键词" leftIcon="" disabled>
<t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" />
</t-search>
</view>
<!-- 轮播图 -->
<view class="swiper-wrap">
<t-swiper wx:if="{{imgSrcs.length > 0}}" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" navigation="{{navigation}}" imageProps="{{swiperImageProps}}" list="{{imgSrcs}}" />
<!-- bind:click="navToActivityDetail" -->
</view>
</view>
<view class="home-page-container">
<!-- 分类 -->
<view class="home-page-tabs">
<t-tabs t-class="t-tabs" t-class-active="tabs-external__active" t-class-item="tabs-external__item" defaultValue="{{0}}" space-evenly="{{false}}" bind:change="tabChangeHandle">
<t-tab-panel wx:for="{{tabList}}" wx:for-index="index" wx:key="index" label="{{item.text}}" value="{{item.key}}" />
</t-tabs>
</view>
<!-- 公告 -->
<view class="notice-container ">
<!-- <view class="notice-container ">
<view wx:for="{{noticeList}}">
<t-notice-bar class="notice-bar" visible="{{item.visible}}" prefixIcon="null" marquee="{{marquee}}" content="{{item.noticeContent}}">
<view slot="prefix-icon" class="notice-title">
@ -35,9 +15,88 @@
</view>
</t-notice-bar>
</view>
</view> -->
<!-- 轮播图 -->
<view class="swiper-wrap">
<t-swiper wx:if="{{imgSrcs.length > 0}}" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" navigation="{{navigation}}" imageProps="{{swiperImageProps}}" list="{{imgSrcs}}" />
<!-- bind:click="navToActivityDetail" -->
</view>
<!-- 搜索框 -->
<view class="search" bind:tap="navToSearchPage">
<t-search t-class-input="t-search__input" t-class-input-container="t-search__input-container" placeholder="搜索你想要的表情/头像/壁纸" leftIcon="" disabled>
<t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" />
</t-search>
<!-- 热门搜索 -->
<view class="popular-wrap">
<view class="search-content" wx:if="{{popularWords.length > 0}}">
<view class="search-item" hover-class="hover-history-item" wx:for="{{popularWords}}" data-value="{{item.title}}" bind:tap="handleRecTap" data-index="{{index}}" wx:key="*this">
{{item.title}}
</view>
</view>
<view wx:else class="search-item">
暂无数据
</view>
</view>
</view>
</view>
<view class="home-page-container">
<!-- 热门表情分类 -->
<view class="hot-emoticon-categoty-box">
<!-- 头部 -->
<view class="emoticon-header-box">
<view class="emoticon-header-title-box">
<image class="emoticon-header-icon" src="http://mall.api.aerwen.net/Uploads/uploads/20231029/C8ABBC8BEAFA9E5D.png" mode="heightFix" />
<view class="emoticon-header-title">
<view class="emoticon-header-title-text">热门表情包</view>
<view class="emoticon-header-title-line"></view>
</view>
</view>
<view class="emoticon-header-more-box" bind:tap="handleClickAll">
<view class="emoticon-header-more-text">全部</view>
<t-icon name="chevron-right" size="32rpx" data-name="chevron-right" />
</view>
</view>
<!-- 列表 -->
<view class="hot-emoticon-categoty-lsit">
<view class="hot-emoticon-categoty-item" wx:for="{{hotCategoryList}}" wx:for-item="item" wx:for-index="index" wx:key="index" data-value="{{item.emotionCategoryName}}" bind:tap="handleClickHotCategory">
<view class="image-box">
<image src="{{item.emotionCategoryImg}}" mode="aspectFill" />
</view>
<view class="text">{{item.emotionCategoryName}}</view>
</view>
</view>
</view>
<!-- 最近更新 -->
<view class="last-updated-box">
<!-- 头部 -->
<view class="emoticon-header-box">
<view class="emoticon-header-title-box">
<image class="emoticon-header-icon" src="http://mall.api.aerwen.net/Uploads/uploads/20231029/C8ABBC8BEAFA9E5D.png" mode="heightFix" />
<view class="emoticon-header-title">
<view class="emoticon-header-title-text">最近更新</view>
<view class="emoticon-header-title-line"></view>
</view>
</view>
<view class="emoticon-header-more-box" bind:tap="handleClickAll">
<view class="emoticon-header-more-text">全部</view>
<t-icon name="chevron-right" size="32rpx" data-name="chevron-right" />
</view>
</view>
<!-- 列表 -->
<view class="last-updated-list">
<view class="last-updated-list-item" wx:for="{{lastUpdatedList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
<image class="image-box" src="{{item.emoticonDataImg}}" mode="aspectFill" />
</view>
</view>
</view>
<!-- 列表 -->
<!-- <load-more list-is-empty="{{!goodsList.length}}" status="{{goodsListLoadStatus}}" bind:retry="onReTry" /> -->
</view>
<t-toast id="t-toast" />

View File

@ -22,6 +22,7 @@ page {
}
.home-page-header .t-search__input-container {
background-color: #ffffff;
border-radius: 32rpx !important;
height: 64rpx !important;
}
@ -32,7 +33,7 @@ page {
}
.home-page-header .swiper-wrap {
margin-top: 20rpx;
margin: 20rpx 0;
}
.home-page-header .t-image__swiper {
@ -107,6 +108,10 @@ page {
--td-tab-track-color: red;
}
.notice-container {
margin: 20rpx 0;
}
.notice-bar {
align-items: center !important;
}
@ -121,6 +126,150 @@ page {
align-items: center;
}
.notice-icon{
.notice-icon {
margin-right: 10rpx;
}
.popular-wrap {
padding-top: 15rpx;
padding-bottom: 24rpx;
}
.search-content {
overflow: hidden;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
margin-top: 24rpx;
}
.search-item {
color: #333333;
font-size: 24rpx;
line-height: 32rpx;
font-weight: normal;
margin-right: 24rpx;
/* margin-bottom: 24rpx; */
background: white;
border-radius: 38rpx;
padding: 15rpx 24rpx;
}
.hover-history-item {
position: relative;
top: 3rpx;
left: 3rpx;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1) inset;
}
/* 热门表情 */
.hot-emoticon-categoty-box {
padding: 30rpx 0;
}
.emoticon-header-box {
display: flex;
justify-content: space-between;
align-items: center;
}
.emoticon-header-title-box {
display: flex;
align-items: center;
}
.emoticon-header-icon {
width: 35rpx;
height: 35rpx;
margin-right: 10rpx;
}
.emoticon-header-title {
position: relative;
}
.emoticon-header-title-text {
font-weight: bold;
font-size: 36rpx;
letter-spacing: 3rpx;
}
.emoticon-header-title-line {
width: 100%;
height: 7rpx;
background-color: #F4E6CF;
position: absolute;
bottom: 0rpx;
}
.emoticon-header-more-box {
display: flex;
align-items: center;
color: #BBBBBB;
}
.emoticon-header-more-text {
font-size: 28rpx;
}
/* 热门分类列表 */
.hot-emoticon-categoty-lsit {
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
}
.hot-emoticon-categoty-item {
width: 155rpx;
height: 200rpx;
overflow: hidden;
margin: 11.5rpx;
}
.hot-emoticon-categoty-item .image-box {
width: 100%;
height: 80%;
overflow: hidden;
border-radius: 8rpx;
}
.hot-emoticon-categoty-item .image-box image {
width: 100%;
height: 100%;
}
.hot-emoticon-categoty-item .text {
text-align: center;
font-size: 26rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 5rpx;
}
/* 最近更新 */
.last-updated-box{
}
.last-updated-list{
margin-top: 20rpx;
display: flex;
flex-wrap: wrap;
}
.last-updated-list-item{
width: 200rpx;
height: 200rpx;
border: 1rpx solid #E0E0E0;
border-radius: 10rpx;
margin: 15rpx;
overflow: hidden;
}
.last-updated-list-item .image-box{
width: 100%;
height: 100%;
}

View File

@ -30,7 +30,7 @@ Page({
deleteIndex: '',
onShow() {
this.queryHistory();
// this.queryHistory();
this.queryPopular();
},
@ -137,7 +137,7 @@ Page({
const _searchValue = historyWords[dataset.index || 0].historySearchContent || '';
if (_searchValue) {
wx.navigateTo({
url: `/pages/goods/result/index?searchValue=${_searchValue}`,
url: `/pages/emoticon/result/index?searchValue=${_searchValue}`,
});
}
},
@ -151,7 +151,7 @@ Page({
const _searchValue = dataset?.value;
if (_searchValue) {
wx.navigateTo({
url: `/pages/goods/result/index?searchValue=${_searchValue}`,
url: `/pages/emoticon/result/index?searchValue=${_searchValue}`,
});
}
},
@ -169,7 +169,7 @@ Page({
this.queryHistory();
});
wx.navigateTo({
url: `/pages/goods/result/index?searchValue=${value}`,
url: `/pages/emoticon/result/index?searchValue=${value}`,
});
},
});

View File

@ -3,7 +3,7 @@
<t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" />
</t-search>
<view class="search-wrap">
<view class="history-wrap">
<!-- <view class="history-wrap">
<view class="search-header">
<text class="search-title">历史搜索</text>
<text class="search-clear" bind:tap="handleClearHistory">清除</text>
@ -16,7 +16,7 @@
<view wx:else class="search-item">
暂无数据
</view>
</view>
</view> -->
<view class="popular-wrap">
<view class="search-header">
<text class="search-title">搜索推荐</text>

View File

@ -24,6 +24,7 @@ Page({
// 获取手机号
getPhoneNumber(e) {
console.log(e,'adsasdasdasd');
let that = this
if (that.data.checked == false) {
Toast({

View File

@ -48,7 +48,7 @@
},
"compileType": "miniprogram",
"libVersion": "2.23.1",
"appid": "wx8b03fffabbbfe804",
"appid": "wxcdeaf70fb4239637",
"projectname": "tdesign-miniprogram-starter-retail",
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},