project/point_sys_miniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
LittleBoy 2022-11-27 23:54:26 +08:00
parent f8a9856f0c
commit e989ab295b
19 changed files with 298 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
miniprogram/app.json
View File

@ -1,9 +1,9 @@
{
"pages": [
"pages/sign/index",
"pages/personal/personal",
"pages/user/login",
"pages/index/index",
"pages/personal/personal",
"pages/sign/index",
"pages/user/login",
"pages/logs/logs"
],
"window": {
@ -16,10 +16,14 @@
"list": [
{
"pagePath": "pages/index/index",
"iconPath":"assets/images/icon_home.png",
"selectedIconPath":"assets/images/icon_home_selected.png",
"text": "首页"
},
{
"pagePath": "pages/personal/personal",
"iconPath":"assets/images/icon_user.png",
"selectedIconPath":"assets/images/icon_user_selected.png",
"text": "个人中心"
}
]

14
miniprogram/app.less
View File

@ -1,13 +1,9 @@
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
/**global style**/
image{
max-width: 100%;
max-height: 100%;
}
/**app.wxss**/
@content-widht:90%;
.content-container{
width: @content-widht;

BIN
miniprogram/assets/images/18005888-5c529143bfc58.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 113 KiB

BIN
miniprogram/assets/images/icon_home.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
miniprogram/assets/images/icon_home_selected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
miniprogram/assets/images/icon_user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
miniprogram/assets/images/icon_user_selected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
miniprogram/pages/index/index.json
View File

@ -1,3 +1,5 @@
{
"usingComponents": {}
"usingComponents": {},
"navigationBarBackgroundColor": "#F96352",
"navigationBarTitleText": "积分商城"
}

115
miniprogram/pages/index/index.less
View File

@ -1,19 +1,110 @@
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
@box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
image {
width: 100%;
height: 100%;
}
.userinfo-avatar {
.box-border-radius {
border-radius: 10px;
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.usermotto {
margin-top: 200px;
.content-bg {
background: linear-gradient(to bottom, #F96352, #fff);
height: 120px;
width: 100%;
left: 0;
top: 0;
position: absolute;
}
.content-wrapper {
position: relative;
z-index: 2;
width: 90vw;
margin: auto;
padding: 10px 0;
}
// swiper
.top-swiper {
.box-border-radius;
}
.swiper-item {
height: 150px;
}
.index-act-1 {
width: 100%;
height: 110px;
.box-border-radius;
box-shadow: @box-shadow;
margin: 20px 0;
}
.recommend-wrapper,
.hot-wrapper {
margin: 20px 0;
}
.hot-title {
font-weight: bold;
font-size: 16px;
margin-bottom: 10px;
}
// panel
.panel {
.box-border-radius;
box-shadow: @box-shadow;
.panel-title {
font-weight: bold;
font-size: 16px;
padding: 20px 20px 0;
}
.panel-body {
padding: 20px;
}
}
.goods-list-row {
display: flex;
overflow: hidden;
.goods-item {
flex: 1;
min-width: 20%;
margin-right: 10px;
text-align: center;
&:last-child {
margin-right: 0px;
}
}
.image {
width: 100%;
aspect-ratio: 1/1;
}
.title {
word-break: break-all;
font-size: 12px;
line-height: 16px;
height: 32px;
overflow: hidden;
}
.price{
color: #f00;
margin-top: 5px;
}
}
.displex-flex {
display: flex;
}

90
miniprogram/pages/index/index.ts
View File

@ -1,49 +1,59 @@
// index.ts
// 获取应用实例
const app = getApp<IAppOption>()
const goodsItems = [
{
cover: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/103799/25/31581/57788/62e907f2E85845359/45e0568d42c9803d.jpg!q70.dpg.webp',
title: '轻奢高档女装 半身裙2022春秋女韩版中裙百褶中长款A字裙水兵舞防走光裙子跳舞裙子 酒红色 M',
price: 500,
stock: 20,
id: 1
},
{
cover: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/354/20/1552/77109/5b939e1aE8318003c/b7d99e9173a51fa7.jpg!q70.dpg.webp',
title: '微星（MSI） 微星Cubi-B171N8GL-009BCN迷你静音电脑PC主机BN6000处理器 准系统(不含内存硬盘)',
price: 2000,
stock: 10,
id: 2
},
{
cover: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/83150/10/23413/112462/63776142E6818d77c/2721b6f0420b15d2.jpg!q70.dpg.webp',
title: '爱普生（EPSON）L4268墨仓式品质款 彩色无线多功能一体机（打印复印扫描 wifi 自动双面）新旧包装随机发货',
price: 3000,
stock: 50,
id: 3
},
{
cover: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/103799/25/31581/57788/62e907f2E85845359/45e0568d42c9803d.jpg!q70.dpg.webp',
title: '轻奢高档女装 半身裙2022春秋女韩版中裙百褶中长款A字裙水兵舞防走光裙子跳舞裙子 酒红色 M',
price: 500,
stock: 20,
id: 4
},
]
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '../logs/logs',
})
swiperList: [
{
image: 'https://m15.360buyimg.com/mobilecms/jfs/t1/160398/4/32302/103427/6374d1f3E5b1ecb32/a593b9982d8378cc.jpg!cr_1125x449_0_166!q70.jpg',
url: null,
},
{
image: 'https://m15.360buyimg.com/mobilecms/jfs/t1/203775/20/26428/95041/637fab4dEf6a4434d/3f8770efe691537b.jpg!cr_1053x420_4_0!q70.jpg',
url: null,
},
{
image: 'https://m15.360buyimg.com/mobilecms/jfs/t1/160398/4/32302/103427/6374d1f3E5b1ecb32/a593b9982d8378cc.jpg!cr_1125x449_0_166!q70.jpg',
url: null,
},
{
image: 'https://m15.360buyimg.com/mobilecms/jfs/t1/203775/20/26428/95041/637fab4dEf6a4434d/3f8770efe691537b.jpg!cr_1053x420_4_0!q70.jpg',
url: null,
}
],
goodsItems,
recommendItems: goodsItems.filter(s => s.id <= 3)
},
onLoad() {
// @ts-ignore
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
},
getUserProfile() {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e: any) {
// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
console.log(e)
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})

94
miniprogram/pages/index/index.wxml
View File

@ -1,23 +1,79 @@
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<block wx:if="{{canIUseOpenData}}">
<view class="userinfo-avatar" bindtap="bindViewTap">
<open-data type="userAvatarUrl"></open-data>
<view class="content-bg">
</view>
<view class="content-wrapper">
<view class="top-swiper">
<swiper indicator-dots="{{true}}" autoplay="{{true}}">
<block wx:for="{{swiperList}}" wx:key="*this">
<swiper-item>
<view class="swiper-item">
<image src="{{item.image}}" />
</view>
</swiper-item>
</block>
</swiper>
</view>
<view class="recommend-wrapper">
<view class="panel">
<view class="panel-title">
<text>精选活动</text>
</view>
<view class="panel-body">
<view class="goods-list goods-list-row">
<view wx:for="{{goodsItems}}" wx:key="id" class="goods-item">
<view class="image">
<image src="{{item.cover}}"></image>
</view>
<view class="title">
<text>{{item.title}}</text>
</view>
<view class="price">
<text>{{item.price}}积分</text>
</view>
<view class="actions">
</view>
</view>
</view>
</view>
</view>
<open-data type="userNickName"></open-data>
</block>
<block wx:elif="{{!hasUserInfo}}">
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
<button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<view wx:else> 请使用1.4.4及以上版本基础库 </view>
</block>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="index-act-1">
<image src="https://file.wx.wm-app.xyz/os/picture/project/uestc/mini-app/18005888-5c529143bfc58.jpg"></image>
</view>
<view class="hot-wrapper">
<view class="hot-title">
<text>热门超值兑换</text>
</view>
<view class="panel">
<view class="panel-body">
<view class="goods-list">
<view wx:for="{{goodsItems}}" wx:key="id" class="goods-item">
<view class="image">
<image src="{{item.cover}}"></image>
</view>
<view class="title">
<text>{{item.title}}</text>
</view>
<view class="displex-flex">
<view class="price">
<text>{{item.price}}积分</text>
</view>
<view class="actions">
<button>立即兑换</button>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
</view>

19
miniprogram/pages/index/index.wxss
View File

@ -1,19 +0,0 @@
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
}
.userinfo-avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.usermotto {
margin-top: 200px;
}

1
miniprogram/pages/logs/logs.less Normal file
View File

@ -0,0 +1 @@
/* pages/logs/logs.wxss */

1
miniprogram/pages/personal/personal.json
View File

@ -1,6 +1,5 @@
{
"usingComponents": { },
"document-url":"https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html",
"navigationBarTitleText": "个人中心",
"navigationBarBackgroundColor": "#ceb17f",
"navigationBarTextStyle": "white"

8
miniprogram/pages/sign/index.ts
View File

@ -11,7 +11,13 @@ Page({
signToday: false,
continuousDays: 0,
dayTextArray:[
'一','二','三','四','五','六','七'
{text:'一',value:5},
{text:'二',value:10},
{text:'三',value:15},
{text:'四',value:20},
{text:'五',value:25},
{text:'六',value:30},
{text:'七',value:35},
]
},

6
miniprogram/pages/sign/index.wxml
View File

@ -31,15 +31,15 @@
<text>连续签到得积分</text>
</view>
<view class="sign-items">
<view wx:for="{{dayTextArray}}" class="item">
<view wx:for="{{dayTextArray}}" wx:key="value" class="item">
<view class="point {{index<continuousDays?'signed':''}}">
<view>
<image src="./../../assets/images/coin.svg" alt="" />
</view>
<text>{{(index +1 ) * 5}}积分</text>
<text>{{item.value}}积分</text>
</view>
<view>
<text>第{{item}}天</text>
<text>第{{item.text}}天</text>
</view>
</view>

36
miniprogram/pages/user/login.ts
View File

@ -1,6 +1,9 @@
import message from "../../utils/message"
import { getUserProfile, login } from "../../utils/promise-hooks"
import request, { BizError } from "../../utils/request";
type PageData = {
code: string
}
// pages/user/login.ts
Page({
@ -9,39 +12,42 @@ Page({
* 页面的初始数据
*/
data: {
code:''
},
/**
* 生命周期函数--监听页面加载
*/
async onLoad() {
// 发起登录的授权
const code = await login()
this.setData({
code
})
},
async onGetUserInfo() {
message.showLoading({})
if(!this.data.code){
this.onLoad()
message.toast('初始化错误,请重新登录')
return;
}
message.showLoading({ message: '登录中...' })
try {
// 发起登录的授权
const data = await getUserProfile()
const res = await request<UserInfo>('/wechat/login', data)
console.log(res)
data.code = this.data.code
const res = await request<UserInfo>('/user/login', data)
//
console.log(res);
} finally {
message.hideLoading()
}
},
async getCode() {
try {
const code = await login()
console.log(res)
} catch (e) {
message.toast(e)
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**

35
miniprogram/utils/promise-hooks.ts
View File

@ -35,31 +35,30 @@ type UserProfileData = {
* 用户登录凭证（有效期五分钟）。开发者需要在开发者服务器后台调用 auth.code2Session，
* 使用 code 换取 openid、unionid、session_key 等信息
*/
code: string
code?: string
}
export function getUserProfile(timeout = 10000) {
return new Promise<UserProfileData>((resolve, reject) => {
export function getUserProfile() {
return new Promise<UserProfileData>(async (resolve, reject) => {
// wx.login 必须在获取用户数据之前
wx.getUserProfile({
desc: '展示用户信息并参与相关活动',
success: (res) => {
if (res.errMsg == 'getUserProfile:ok' && res.encryptedData) {
login(timeout).then(code => {
desc: '展示用户信息并参与相关活动',
success: (res) => {
if (res.errMsg == 'getUserProfile:ok' && res.encryptedData) {
resolve({
encryptedData: res.encryptedData,
iv: res.iv,
code
iv: res.iv
})
}).catch(reject)
} else {
} else {
message.toast('登录失败,请重新登录', 'error')
reject('登录失败,' + res.errMsg)
}
},
fail: (e) => {
message.toast('登录失败,请重新登录', 'error')
reject('登录失败,' + res.errMsg)
reject('登录失败,' + e.errMsg)
}
},
fail: (e) => {
message.toast('登录失败,请重新登录', 'error')
reject('登录失败,' + e.errMsg)
}
})
})
});
}

6
miniprogram/utils/request.ts
View File

@ -48,6 +48,12 @@ function request<T>(api: string, data: any = null, method: HttpMethod = 'POST')
const result = res.data
// 验证接口是否正确
if (result.code !== 0) {
if(result.code === 403){
wx.navigateTo({
url:'/pages/user/login'
})
return;
}
reject(new BizError(result.message, result.code))
return;
}