Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 完成【我的】 #17

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: 完成【主页】
LindsBravill committed Sep 17, 2023

Unverified

This user has not yet uploaded their public signing key.
commit b0ecd0450c6d47ee65909407d7ab9e98645665e7
2 changes: 1 addition & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
@@ -28,4 +28,4 @@ module.exports = {
},
// extends: 'eslint:recommended',
rules: {},
}
}
26 changes: 24 additions & 2 deletions app.js
Original file line number Diff line number Diff line change
@@ -18,8 +18,30 @@ App({
}
})
})

// 获取topbar相关信息
const that = this;
// 顶部状态栏的信息
const systemInfo = wx.getSystemInfoSync();
// 胶囊按钮位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
// 导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度
that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
that.globalData.menuBottom = menuButtonInfo.top - systemInfo.statusBarHeight;
that.globalData.menuHeight = menuButtonInfo.height;
that.globalData.menuWidth = menuButtonInfo.width;
that.globalData.statusBarHeight = systemInfo.statusBarHeight;
},
globalData: {
userInfo: null
userInfo: null,

// 自定义topbar相关信息
navBarHeight: 0, // 导航栏高度
statusBarHeight: 0, // 状态栏的高度
menuRight: 0, // 胶囊距右方间距(保持左、右间距一致)
menuBottom: 0, // 胶囊距底部间距(保持底部间距一致)
menuHeight: 0, // 胶囊高度(自定义内容可与胶囊高度保证一致)
menuWidth: 0, // 胶囊宽度(自定义内容可与胶囊宽度保证一致)
}
})
})
17 changes: 8 additions & 9 deletions app.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
{
"pages": [
"pages/index/index",
"pages/explore/index",
"pages/home/index",
"pages/my/index"
],
"window": {
@@ -17,19 +16,19 @@
"backgroundColor": "#000000",
"list": [
{
"pagePath": "pages/index/index",
"pagePath": "pages/home/index",
"text": "首页"
},
{
"pagePath": "pages/explore/index",
"text": "发现"
},
{
"pagePath": "pages/my/index",
"text": "我的"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
"sitemapLocation": "sitemap.json",
"permission": {
"scope.userLocation": {
"desc": "您的位置信息仅用于当前小程序中获取定位"
}
}
}
25 changes: 25 additions & 0 deletions components/info-card/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// components/info-card/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
data: {
"type": Object,
"value": {}
}
},

/**
* 组件的初始数据
*/
data: {
},

/**
* 组件的方法列表
*/
methods: {

}
})
7 changes: 7 additions & 0 deletions components/info-card/index.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"t-image": "tdesign-miniprogram/image/image",
"stars-mark": "/components/stars-mark/index"
}
}
38 changes: 38 additions & 0 deletions components/info-card/index.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/* components/info-card/index.wxss */
.card {
height: 120px;
width: 343px;
margin: 16px auto;
border-radius: 9px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 6px 30px 5px #0000000d, 0 16px 24px 2px #0000000a, 0 8px 10px -5px #00000014;

.info {
height: 100%;
width: auto;
background-color: #fff;
display: inline-flex;
flex-direction: column;
justify-content: space-around;
padding-left: 16px;

.name {
color: #000000e6;
font-size: 14px;
font-weight: 400;
font-family: "PingFang SC";
text-align: left;
line-height: 22px;
}

.price {
color: #000000e6;
font-size: 14px;
font-weight: 600;
font-family: "PingFang SC";
text-align: left;
line-height: 22px;
}
}
}
10 changes: 10 additions & 0 deletions components/info-card/index.wxml
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!--components/info-card/index.wxml-->
<view class="card">
<t-image src="{{data.imgUrl}}" mode="aspectFill" width="120px" height="100%" class="imag" />
<view class="info">
<text class="name">{{data.name}}</text>
<stars-mark score="{{data.score}}"/>
<text class="price" wx:if="{{!data.free}}">¥{{data.floorPrice}} -¥{{data.ceilingPrice}}</text>
<text class="price" wx:if="{{data.free}}">{{data.free}}</text>
</view>
</view>
25 changes: 25 additions & 0 deletions components/stars-mark/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// components/stars-mark/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
score: {
"type": Number,
"value": ""
}
},

/**
* 组件的初始数据
*/
data: {
},

/**
* 组件的方法列表
*/
methods: {

}
})
6 changes: 6 additions & 0 deletions components/stars-mark/index.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-icon": "tdesign-miniprogram/icon/icon"
}
}
45 changes: 45 additions & 0 deletions components/stars-mark/index.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/* components/stars-mark/index.wxss */
.score {
height: 20px;
width: 143.6px;
font-size: 12px;
font-weight: 600;
font-family: "PingFang SC";
line-height: 20px;
display: inline-flex;
position: relative;

.stars-container {
display: inline-flex;
width: 100.6px;
position: relative;

.stars-background {
color: #dcdcdc;
display: inline-flex;
padding-top: 2px;

view {
padding-right: 5.15px;
}
}

.stars {
color: #e37318;
display: inline-flex;
padding-top: 2px;
position: absolute;
overflow: hidden;

view {
padding-right: 5.15px;
}
}
}

text {
color: #e37318;
position: absolute;
right: 0;
}
}
20 changes: 20 additions & 0 deletions components/stars-mark/index.wxml
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!--components/stars-mark/index.wxml-->
<view class="score">
<view class="stars-container">
<view class="stars-background">
<t-icon name="star-filled" size="16px" />
<t-icon name="star-filled" size="16px" />
<t-icon name="star-filled" size="16px" />
<t-icon name="star-filled" size="16px" />
<t-icon name="star-filled" size="16px" />
</view>
<view class="stars" style="width: {{score*16 + (score-0.5)*5.15}}px">
<t-icon name="star-filled" size="16px" />
<t-icon name="star-filled" size="16px" />
<t-icon name="star-filled" size="16px" />
<t-icon name="star-filled" size="16px" />
<t-icon name="star-filled" size="16px" />
</view>
</view>
<text>{{score}}分</text>
</view>
4 changes: 4 additions & 0 deletions config/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export const config = {
// 是否使用mock数据代替api返回
useMock: true
}
11 changes: 4 additions & 7 deletions custom-tab-bar/index.js
Original file line number Diff line number Diff line change
@@ -4,13 +4,10 @@ Component({
value: 'index',
list: [{
icon: 'home',
value: 'index',
value: 'home',
label: '首页',
},{
icon: 'control-platform',
value: 'explore',
label: '发现',
}, {
},
{
icon: 'user',
value: 'my',
label: '我的'
@@ -24,7 +21,7 @@ Component({
if (curPage) {
const nameRe = /pages\/(\w+)\/index/.exec(curPage.route);

if (nameRe[1]) {
if (nameRe) {
this.setData({
value: nameRe[1]
})
4 changes: 2 additions & 2 deletions custom-tab-bar/index.json
Original file line number Diff line number Diff line change
@@ -2,6 +2,6 @@
"component": true,
"usingComponents": {
"t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
"t-tab-bar-item": "tdesign-miniprogram/tab-bar/tab-bar-item"
}
"t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item"
}
}
4 changes: 2 additions & 2 deletions custom-tab-bar/index.wxml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<t-tab-bar value="{{value}}" bind:change="handleChange">
<t-tab-bar-item wx:for="{{list}}" wx:key="index" icon="{{item.icon}}" value="{{item.value}}">
<t-tab-bar value="{{value}}" bindchange="handleChange" theme="tag" split="{{false}}">
<t-tab-bar-item wx:for="{{list}}" wx:key="index" value="{{item.value}}" icon="{{item.icon}}">
{{item.label}}
</t-tab-bar-item>
</t-tab-bar>
1,122 changes: 1,122 additions & 0 deletions lib/qqmap/qqmap-wx-jssdk.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions lib/qqmap/qqmap-wx-jssdk.min.js

Large diffs are not rendered by default.

1,967 changes: 1,960 additions & 7 deletions package-lock.json

Large diffs are not rendered by default.

16 changes: 12 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -3,14 +3,22 @@
"version": "0.0.2",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint ."
},
"keywords": ["wechat", "miniprogram", "starter"],
"keywords": [
"wechat",
"miniprogram",
"starter"
],
"author": "leejim",
"license": "MIT",
"description": "a start-kit for wechat miniprogram powerby TDesign miniprogram",
"dependencies": {
"tdesign-miniprogram": "^0.12.1"
"mockjs": "^1.1.0",
"tdesign-miniprogram": "^1.1.15"
},
"devDependencies": {}
"devDependencies": {
"eslint": "^8.49.0"
}
}
59 changes: 59 additions & 0 deletions pages/home/components/custom-top-bar/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
// components/custom-top-bar/index.js
const app = getApp();
// 使用定位服务
var QQMapWX = require("../../../../lib/qqmap/qqmap-wx-jssdk");
var qqmapsdk;

Component({
/**
* 组件的属性列表
*/
properties: {

},

/**
* 组件的初始数据
*/
data: {
navBarHeight: app.globalData.navBarHeight,
statusBarHeight: app.globalData.statusBarHeight,
menuRight: app.globalData.menuRight,
menuBottom: app.globalData.menuBottom,
menuHeight: app.globalData.menuHeight,
menuWidth: app.globalData.menuWidth,

city: '深圳市',
title: '主页',

locateKey: 'K3NBZ-O7NK5-4JLIM-IWXVC-MOD67-6PF5G'
},

/**
* 组件的方法列表
*/
methods: {
getLocation: function () {
let component = this;
qqmapsdk.reverseGeocoder({
success: function(res){
console.log(res.result.ad_info.city);
component.setData({
city: res.result.ad_info.city
})
},
fail: function(error){
// console.log(error);
}
})
}
},
lifetimes: {
attached: function(){
qqmapsdk = new QQMapWX({
key: this.data.locateKey
});
this.getLocation();
}
}
})
6 changes: 6 additions & 0 deletions pages/home/components/custom-top-bar/index.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-icon": "tdesign-miniprogram/icon/icon"
}
}
14 changes: 14 additions & 0 deletions pages/home/components/custom-top-bar/index.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/* components/custom-top-bar/index.wxss */
.topbar-container {
.location {
display: inline-flex;
margin-left: 16px;
align-items: center;
color: #000000e6;
font-size: 14px;
font-weight: 400;
font-family: "PingFang SC";
text-align: center;
line-height: 20px;
}
}
6 changes: 6 additions & 0 deletions pages/home/components/custom-top-bar/index.wxml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<!--components/custom-top-bar/index.wxml-->
<view class="topbar-container" style="height: {{navBarHeight}}px; ">
<view class="location" style="height: {{navBarHeight - statusBarHeight}}px; margin-top: {{statusBarHeight}}px;">
<t-icon name="location" size="20px" style="margin-right: 4px;"></t-icon>{{city}}
</view>
</view>
50 changes: 50 additions & 0 deletions pages/home/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
// index.js
const app = getApp();
import {
fetchSwiperLis,
fetchAtvsList
} from '../../services/fetchAtvsList';

Page({
data: {
navBarHeight: app.globalData.navBarHeight,

current: 0,
autoplay: true,
duration: 500,
interval: 5000,
swiperList: [],
atvsList: [],

selectedColTitle: 1
},

// 转换标题的事件
selectColTitile(e) {
this.setData({
selectedColTitle: parseInt(e.currentTarget.dataset.index)
});
},

// 跳转到筛选地区的页面
// gotoFilter(){
// console.log('gotofilter');
// wx.navigateTo({
// url: '/pages/home/filter/index',
// })
// },

// 加载页面数据
async loadData() {
const swiper = await fetchSwiperLis();
const atvsList = await fetchAtvsList();
this.setData({
swiperList: swiper.data,
atvsList: atvsList.data
})
},

onLoad() {
this.loadData();
}
})
14 changes: 14 additions & 0 deletions pages/home/index.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"navigationBarTitleText": "首页",
"usingComponents": {
"custom-top-bar": "./components/custom-top-bar/index",
"t-search": "tdesign-miniprogram/search/search",
"t-swiper": "tdesign-miniprogram/swiper/swiper",
"t-swiper-nav": "tdesign-miniprogram/swiper-nav/swiper-nav",
"t-row": "tdesign-miniprogram/row/row",
"t-col": "tdesign-miniprogram/col/col",
"t-icon": "tdesign-miniprogram/icon/icon",
"info-card": "/components/info-card/index"
},
"navigationStyle": "custom"
}
113 changes: 113 additions & 0 deletions pages/home/index.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
/**index.wxss**/
.fixed-container {
width: 100%;
position: fixed;
z-index: 99;
background-size: cover;
background-color: #fff;

/* search */
.search {
height: 56px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;

.example-search {
height: 40px;
width: 343px;
}
}
}

scroll-view {
padding-bottom: calc(env(safe-area-inset-bottom) + 112rpx);

/* title */
.title {
width: 80px;
height: 28px;
opacity: 1;
color: #000000e6;
font-size: 20px;
font-weight: 600;
font-family: "PingFang SC";
text-align: left;
line-height: 28px;
margin-left: 16px;
}

/* swiper */
.swiper {
margin-top: 13px;

.card-theme {
--td-swiper-radius: 0;
--td-swiper-item-padding: 16px 0 41.81px 0;
--td-swiper-center-padding: 16px 12px 41.81px 12px;
--td-swiper-nav-dot-color: #e7e7e7;
--td-swiper-nav-dot-active-color: #0052d9;
}

.card-theme .card-theme-nav {
bottom: 23.81px;
}

.t-swiper__item {
height: 217px !important;
transition: box-shadow 1s ease,
padding 0.8s ease;
}

.t-swiper__item[aria-hidden="false"] {
padding: var(--td-swiper-center-padding, 0);
}

.t-swiper__item[aria-hidden="false"] .t-image {
box-shadow: 0 6px 30px 5px #0000000d, 0 16px 24px 2px #0000000a, 0 8px 10px -5px #00000014;
}

.t-image {
height: 100% !important;
}
}

/* activesList */
.t-row {
position: relative;
}

.t-icon {
display: inline-block;
vertical-align: sub;
}

.colTitle {
color: #000000e6;
font-size: 14px;
font-weight: 400;
font-family: "PingFang SC";
height: 48px;
line-height: 48px;
text-align: center;
border-bottom: 0.5px solid #e7e7e7;
}

.selectedColTitle {
color: #0052d9;
font-size: 14px;
font-weight: 600;
}

.colTitle:nth-child(3)::before {
content: '';
width: 1px;
height: 22px;
background-color: #e7e7e7;
position: absolute;
right: 33%;
top: 50%;
transform: translateY(-50%);
}
}
32 changes: 32 additions & 0 deletions pages/home/index.wxml
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!--index.wxml-->
<view class="fixed-container" style="background-image: url(/src/imgs/topbar/topbar-bc.png);">
<custom-top-bar></custom-top-bar>

<view class="search">
<view class="example-search">
<t-search placeholder="搜索活动" shape="round" />
</view>
</view>
</view>

<scroll-view scroll-y="true" style="padding-top: {{navBarHeight + 56}}px;">
<view class="swiper">
<view class="title">热门推荐</view>
<view class="card-theme">
<t-swiper height="217px" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" bindchange="onChange" navigation="{{ { type: 'dots' } }}" list="{{swiperList}}" image-props="{{ { shape: 'round' } }}" previousMargin="34px" nextMargin="34px" t-class-nav="card-theme-nav" />
</view>
</view>

<view class="list">
<view class="title">全部活动</view>
<t-row>
<t-col span="8" class="colTitle {{selectedColTitle == 1 ? 'selectedColTitle' : ''}}" bindtap="selectColTitile" data-index="1">最新活动</t-col>
<t-col span="8" class="colTitle {{selectedColTitle == 2 ? 'selectedColTitle' : ''}}" bindtap="selectColTitile" data-index="2">高分活动</t-col>
<t-col span="8" class="colTitle">
<t-icon name="filter" size="18px" />
筛选
</t-col>
</t-row>
<info-card wx:for="{{atvsList}}" wx:key="index" data="{{item}}"></info-card>
</view>
</scroll-view>
5 changes: 3 additions & 2 deletions project.config.json
Original file line number Diff line number Diff line change
@@ -43,11 +43,12 @@
"disableUseStrict": false,
"useCompilerPlugins": [
"less"
]
],
"condition": false
},
"compileType": "miniprogram",
"libVersion": "2.19.4",
"appid": "wxcdfa13a58381f0fc",
"appid": "wx05141a42c465a077",
"projectname": "miniprogram-starter",
"condition": {},
"editorSetting": {
2 changes: 1 addition & 1 deletion project.private.config.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"projectname": "miniprogram-starter",
"projectname": "tdesign-miniprogram-starter-apply",
"setting": {
"compileHotReLoad": true
},
6 changes: 6 additions & 0 deletions services/delay.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/** 模拟网络请求延时 */
export default function delay(ms = 500) {
return new Promise(resolve => {
setTimeout(resolve, ms);
})
}
80 changes: 80 additions & 0 deletions services/fetchAtvsList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/** 模拟主页的请求 */
import { config } from '../config/index';
import delay from './delay';

const swiperList = [
'/src/imgs/home/swiper1.png',
'/src/imgs/home/swiper2.png',
'/src/imgs/home/swiper1.png',
'/src/imgs/home/swiper2.png'
];
const atvsList = [{
imgUrl: '/src/imgs/home/atv1.png',
name: '2019 SICC服务设计创新大会',
floorPrice: '500.00',
ceilingPrice: '800.00',
free: '免费活动',
score: 5
},
{
imgUrl: '/src/imgs/home/atv2.png',
name: '2021 SICC服务设计创新大会',
floorPrice: '3000.00',
ceilingPrice: '4000.00',
score: 4.5
},
{
imgUrl: '/src/imgs/home/atv3.png',
name: '少年与星空 插画巡展',
floorPrice: '400.00',
ceilingPrice: '500.00',
score: 4.5
},
{
imgUrl: '/src/imgs/home/atv4.png',
name: 'Universe AI艺术展',
floorPrice: '500.00',
ceilingPrice: '800.00',
score: 3.5
},
];

// mock轮播图数据
function mockFetchSwiperList() {
return delay().then(() => {
return {
data: swiperList
}
})
}

// mock活动列表数据
function mockFetchAtvsList(){
return delay().then(() => {
return {
data: atvsList
}
})
}

// 获取轮播图的请求
export function fetchSwiperLis() {
if (config.useMock) {
return mockFetchSwiperList();
} else {
return new Promise((resolve) => {
resolve('real api')
})
}
};

// 获取活动的请求
export function fetchAtvsList() {
if (config.useMock) {
return mockFetchAtvsList();
} else {
return new Promise((resolve) => {
resolve('real api')
})
}
}
Binary file added src/imgs/home/atv1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/imgs/home/atv2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/imgs/home/atv3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/imgs/home/atv4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/imgs/home/swiper1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/imgs/home/swiper2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/imgs/topbar/topbar-bc.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added t.woff
Binary file not shown.