微信小程序社区项目----前端

【项目介绍】

# 智慧社区-小程序
    -欢迎页面
    -首页
        -轮播图
        -公告
        -信息采集，社区活动，人脸检测，语音识别，心率检测，积分商城
   -信息采集页面
        -采集人数
   -采集详情页面
   -采集统计页面
   -人脸检测页面
   -语音识别页面
   -积分商城页面
   -活动
        -活动列表
        -报名活动
        -加载更多
   -公告
        -公告列表
   -我的
        -信息展示
   -登录

 

【项目创建】

 

 

【欢迎页面】

　　# 1 欢迎页面
　　-onLoad---》向后端发送请求
　　-拿回图片，盖住整个屏幕
　　-倒计时3s（跳过）--》进入到首页

前期准备:

 tabBar配置

app.json里部分配置修改

 

 安装vant app

 编译以后的样式

 welcome

 1 wxml
 2 
 3 <!--pages/welcome/welcome.wxml-->
 4 <view class="container">
 5     <text bindtap="doJump" class="jump">跳过{{seconds}}秒</text>
 6     <image class="img" src="{{img}}" bind:tap="goPage"/>
 7 </view>
 8 
 9 
10 -------------------------------------------------------------------------------------------
11 js
12 
13 import api from '../../static/js/api.js'
14 Page({
15 
16   data: {
17     seconds:3,
18     img:'/static/img/bg/splash2.png',
19     url:'/pages/log/log'
20   },
21   onLoad(options) {
22 
23     // 发送请求，获取欢迎页
24     wx.request({
25       url: api.welcome,
26       method:'GET',
27       success:(res)=>{
28         this.setData({
29           img:res.data[0].img,
30           url:res.data[0].url
31         })
32       }
33     })
34 
35 
36     
37     let t=setInterval(()=>{
38       if(this.data.seconds <= 0){
39         //定时器清除
40         clearInterval(t)
41         //跳转到项目页面 + 配置tabBar
42         wx.switchTab({
43           url: '/pages/index/index',
44         })
45       }else{
46         this.setData({
47           seconds:this.data.seconds - 1
48         })
49       }
50     },1000)
51   },
52   goPage(){
53     wx.navigateTo({
54       url: '/pages/second/heart/heart',
55     })
56   },
57   doJump(){
58     wx.switchTab({
59       url: '/pages/index/index',
60     })
61   }
62   
63 })
64 
65 -------------------------------------------------------------------------------
66 wxss
67 
68 /* pages/welcome/welcome.wxss */
69 page{
70     height: 100%;
71 }
72 
73 .container {
74   height: 100%;
75   width: 100%;
76 } 
77 
78 .container .img{
79   height: 100%;
80   width: 100%;
81 }
82 
83 .jump{
84   font-size: 30rpx;
85   position: absolute;
86   left: 600rpx;
87   top: 80rpx;
88   background-color: #dddddd;
89   padding: 10rpx 20rpx;
90   border-radius: 20rpx;
91 }

 

 

首页index

  1 wxml
  2 
  3 <!--index.wxml-->
  4 <view class="container">
  5 
  6 <!-- 轮播图 -->
  7 <view class="banner">
  8   <swiper autoplay indicator-dots circular indicator-color='#FFFFF' interval='3000'>
  9     <swiper-item>
 10       <image src="/static/img/banner/banner1.png" mode="widthFix" />
 11     </swiper-item>
 12     <swiper-item>
 13       <image src="/static/img/banner/banner2.png" mode="widthFix" />
 14     </swiper-item>
 15     <swiper-item>
 16       <image src="/static/img/banner/banner3.png" mode="widthFix" />
 17     </swiper-item>
 18   </swiper>
 19 </view>
 20 
 21 <van-notice-bar left-icon="volume-o" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" />
 22 
 23 <van-grid column-num="3">
 24   <van-grid-item icon="/static/img/menu/ht.png" text="信息采集" bind:click="gotoCollection" />
 25   <van-grid-item icon="/static/img/menu/wyf.png" text="社区活动" bind:click="gotoActivity" />
 26   <van-grid-item icon="/static/img/menu/wygl.png" text="人脸检测" bind:click="gotoFace" />
 27   <!-- 可以根据需要添加更多的快捷入口 -->
 28   <van-grid-item icon="/static/img/menu/wylx.png" text="语音识别" bind:click="gotoVoice" />
 29   <van-grid-item icon="https://b.yzcdn.cn/vant/icon-demo-1126.png" text="心率检测" bind:click="gotoHeart" />
 30   <van-grid-item icon="/static/img/menu/ht.png" text="积分商城" bind:click="gotoGoods" />
 31 </van-grid>
 32 
 33 <view class="bottom">
 34   <view>
 35     <image src="/static/img/home/cute_1.jpg" mode="scaleToFill" />
 36   </view>
 37   <view>
 38     <image src="/static/img/home/cute_2.jpg" mode="scaleToFill" />
 39   </view>
 40   <view>
 41     <image src="/static/img/home/cute_3.jpg" mode="scaleToFill" />
 42   </view>
 43   <view>
 44     <image src="/static/img/home/cute_4.jpg" mode="scaleToFill" />
 45   </view>
 46 
 47 </view>
 48 
 49 </view>
 50 
 51 
 52 =================================================
 53 js
 54 
 55 // index.js
 56 Page({
 57 
 58 
 59   gotoCollection(){
 60     wx.navigateTo({
 61       url: '/pages/second/collection/collection'
 62     })
 63   },
 64   gotoFace(){
 65     wx.navigateTo({
 66       url: '/pages/second/face/face'
 67     })
 68   },
 69   gotoVoice(){
 70     wx.navigateTo({
 71       url: '/pages/second/voice/voice'
 72     })
 73   },
 74 
 75   gotoActivity(){
 76     wx.switchTab({
 77       url: '/pages/activity/activity',
 78     })
 79   },
 80 gotoHeart(){
 81   wx.navigateTo({
 82     url: '/pages/second/heart/heart',
 83   })
 84 },
 85 gotoGoods(){
 86   wx.navigateTo({
 87     url: '/pages/second/goods/goods',
 88   })
 89 },
 90 
 91 })
 92 
 93 
 94 ================================================
 95 wxss
 96 
 97 /**index.wxss**/
 98 .banner image{
 99   width: 100%; /* 图片宽度拉伸至容器宽度 */
100   height: 100%; /* 图片高度拉伸至容器高度 */
101   object-fit: cover; /* 图片将覆盖整个容器区域，可能被裁剪 */
102 }
103 
104 .bottom{
105   display: flex;
106   justify-content: space-evenly;
107   margin-top: 20rpx;
108   flex-wrap: wrap;
109 }
110 
111 .bottom>view>image{
112   width: 345rpx;
113   height: 200rpx;
114 }

 

 

信息采集collection

采用了阿里矢量图标库，加入购物车的用法

 然后在

 

  1 wxml
  2 
  3 <!--pages/second/collection/collection.wxml-->
  4 <!-- 信息采集页 -->
  5 <view class="container">
  6   <view class="top">
  7     <view class="tip">今日采集数量(人)</view>
  8     <view class="count">{{dataDict.today_count}}</view>
  9   </view>
 10   <view class="function">
 11     <view class="menu" style="border-right:1rpx solid #ddd;" bindtap="bindToForm"> 
 12       <text class="iconfont icon-xinxicaiji"></text> 信息采集
 13     </view>
 14     <view class="menu" bindtap="bindToStatistics">  
 15       <text class="iconfont icon-shujutongji" ></text> 数据统计
 16     </view>
 17   </view>
 18   <view class="table">
 19     <view class="item">
 20       <view class="title">社区信息列表（{{dataDict.today_count}}人）</view>
 21     </view>
 22     <view class="item" wx:for="{{dataDict.result}}" wx:for-item="row" wx:key="index">
 23       <view class="record">
 24         <view class="avatar">
 25           <image src="{{row.avatar}}"></image>
 26         </view>
 27         <view class="desc">
 28           <view class="username">{{row.name}}</view>    
 29           <view>
 30             <view class="txt-group">
 31               <label class="zh">网格区域</label>
 32               <label class="en"> | {{row.area.desc}}</label>
 33             </view>
 34             <view class="area"> 
 35               <label class="fa fa-map-marker"></label> {{row.area.name}} 
 36             </view>
 37           </view>
 38         </view>
 39         <view class="delete" bindtap="doDeleteRow" data-nid="{{row.id}}" data-index="{{index}}" >
 40           <label class="iconfont icon-shanchu"></label>
 41         </view>
 42       </view>
 43     </view>
 44   </view>
 45 </view>
 46 
 47 --------------------------------------------------------------------------------
 48 js
 49 
 50 Page({
 51   bindToForm(){
 52     wx.navigateTo({
 53       url: '/pages/second/camera/camera',
 54     })
 55   }
 56 })
 57 
 58 -------------------------------------------------------------------------------------
 59 
 60 wxss
 61 
 62 /* pages/second/collection/collection.wxss */
 63 .top{
 64   background-color: #01ccb6;
 65   height: 200rpx;
 66   display: flex;
 67   flex-direction: column;
 68   align-items: center;
 69   color:white;
 70 }
 71 
 72 .top .tip{
 73   font-size: 22rpx;
 74   font-weight: 100;
 75 }
 76 
 77 .top .count{
 78   padding: 10rpx;
 79   font-size: 58rpx;
 80 }
 81 
 82 .function{
 83   display: flex;
 84   flex-direction: row;
 85   justify-content: space-around;
 86   background-color: #02bfae;
 87 }
 88 
 89 .function .menu{
 90   font-size: 28rpx;
 91   margin: 25rpx 0;
 92   color: white;
 93   width: 50%;
 94   text-align: center;
 95   flex-direction: row;
 96   flex-direction: column;
 97   align-items: center;
 98 }
 99 
100 .table .item{
101   border-bottom: 1rpx solid #e7e7e7;
102 }
103 
104 .table .item .title{
105   margin: 20rpx 30rpx;
106   padding-left: 10rpx;
107   border-left: 5rpx solid #02bfae;
108   font-size: 26rpx;
109 }
110 
111 .record{
112   margin: 30rpx 40rpx;
113   display: flex;
114   flex-direction: row;
115   justify-content: flex-start;
116 }
117 
118 .record .avatar{
119   width: 200rpx;
120   height: 200rpx;
121 }
122 
123 .record .avatar image{
124   width: 100%;
125   height: 100%;
126   border-radius: 30rpx;
127 }
128 
129 .record .desc{
130   margin: 0 40rpx;
131 }
132 
133 .desc{
134   width: 290rpx;
135   display: flex;
136   flex-direction: column;
137   justify-content: space-between;
138 }
139 
140 .desc .username{
141   margin-top:25rpx ;
142   font-size: 38rpx;
143 }
144 
145 .txt-group{
146   font-size: 27rpx;
147   margin:10rpx 0;
148 }
149 
150 .txt-group .zh{
151   color: #8c8c8c;
152 }
153 
154 .txt-group .en{
155   color: #cccccc;
156 }
157 
158 .area{
159   color: #00c8b6;
160   font-weight: bold;
161 }
162 
163 .delete{
164   width: 100rpx;
165   color: red;
166   text-align: center;
167   display: flex;
168   flex-direction: column;
169   justify-content: center;
170 }
171 
172 
173 ------------------------------------------------------------------------------------
174 wxjson
175 
176 {
177   "usingComponents": {},
178   "navigationBarBackgroundColor": "#01ccb6",
179   "navigationBarTitleText": "",
180   "enablePullDownRefresh": true,
181   "navigationBarTextStyle":"white",
182   "backgroundColor":"#01ccb6"
183 }

信息采集详情camera

 1 wxml
 2 
 3 <!--pages/second/camera/camera.wxml-->
 4 <!-- 拍照页面 -->
 5 <camera class="camera"  device-position="{{ backFront ? 'back' : 'front' }}"  flash="off" frame-size="medium" ></camera>
 6 
 7 <view class="function">
 8   <view class="switch"> </view>
 9   <view class="record" bindtap="takePhoto">
10     <image src="/static/img/camera/record_on.png"></image>
11   </view>
12   <view class="switch" bindtap="switchCamera">
13     <image src="/static/img/camera/rotate-camera-white.png"></image>
14   </view>
15  </view>
16 
17 
18 -------------------------------------------------------------------------
19 js
20 
21 // pages/second/camera/camera.js
22 Page({
23   data: {
24     backFront:true
25 
26   },
27 
28   switchCamera(e) {
29     var old = this.data.backFront
30     this.setData({
31       backFront: !old
32     })
33   },
34 })
35 
36 ---------------------------------------------------------------------------------
37 wxss
38 
39 page{
40     height: 100%;
41 }
42 .camera{
43   height: 80%;
44   width: 100%;
45 }
46 
47 
48 .function{
49   height: 20%;
50   background-color: black;
51   
52   display: flex;
53   flex-direction: row;
54   justify-content: space-around;
55   align-items: center;
56 }
57 .record image{
58   width: 160rpx;
59   height: 160rpx;
60 }
61 
62 .switch{
63   color: white;
64   width: 80rpx;
65   height: 80rpx;
66 }
67 .switch image{
68   width: 80rpx;
69   height: 80rpx;
70 }

 

人脸识别

# 1 注册百度人脸识别接口
https://cloud.baidu.com/product/face.html
# 2 免费领取额度：https://console.bce.baidu.com/ai/#/ai/face/overview/index

# 3 创建应用：https://console.bce.baidu.com/ai/#/ai/face/app/list

# 4 查看人脸库：https://console.bce.baidu.com/ai/#/ai/face/facelib/groupList~appId=4652887

 

 

 

 

 

 

 还有一个语音识别

 

首页轮播图和公告接口

 1 index页面
 2 
 3 js
 4 
 5 // index.js
 6 import api from '../../static/js/api'
 7 
 8 Page({
 9   data: {
10     banner_list: ['/images/banner/banner1.png'],
11     notice:'社区最大交友平台上线啦~~'
12   },
13   onLoad(options) {
14     console.log(api)
15     wx.request({
16       url: api.banner,
17       method:'GET',
18       success:(res)=>{
19         console.log(res.data)
20         if(res.data.code==100){
21           this.setData({
22             banner_list:res.data.banner,
23             notice:res.data.notice.content
24           })
25         }else{
26           wx.showToast({
27             title: '轮播图网络加载失败',
28           })
29         }
30       }
31     })
32   },
33 
34   gotoCollection(){
35     wx.navigateTo({
36       url: '/pages/second/collection/collection'
37     })
38   },
39   gotoFace(){
40     wx.navigateTo({
41       url: '/pages/second/face/face'
42     })
43   },
44   gotoVoice(){
45     wx.navigateTo({
46       url: '/pages/second/voice/voice'
47     })
48   },
49 
50   gotoActivity(){
51     wx.switchTab({
52       url: '/pages/activity/activity',
53     })
54   },
55 gotoHeart(){
56   wx.navigateTo({
57     url: '/pages/second/heart/heart',
58   })
59 },
60 gotoGoods(){
61   wx.navigateTo({
62     url: '/pages/second/goods/goods',
63   })
64 },
65 
66 })
67 
68 
69 ============================================
70 wxml
71 
72 <!-- 轮播图 -->
73 <view class="banner">
74   <swiper autoplay indicator-dots circular indicator-color='#FFFFF' interval='3000'>
75     <swiper-item wx:for="{{banner_list}}" wx:key="*this" >
76       <image src="{{item.img}}" mode="widthFix" />
77     </swiper-item>
78   </swiper>
79 </view>
80 <van-notice-bar left-icon="volume-o" text="{{notice}}"/>

 

采集列表页面-collection

  1 wxml
  2 
  3 <view class="container">
  4   <view class="top">
  5     <view class="tip">今日采集数量(人)</view>
  6     <view class="count">{{dataDict.today_count}}</view>
  7   </view>
  8 
  9   <view class="function">
 10 
 11     <view class="menu" style="border-right:1rpx solid #ddd;" bindtap="bindToForm"> 
 12       <text class="iconfont icon-xinxicaiji"></text> 信息采集
 13     </view>
 14 
 15     <view class="menu" bindtap="bindToStatistics">  
 16       <text class="iconfont icon-shujutongji" ></text> 数据统计
 17     </view>
 18 
 19   </view>
 20   
 21   <view class="table">
 22     <view class="item">
 23       <view class="title">社区信息列表（{{dataDict.today_count}}人）</view>
 24     </view>
 25 
 26     <view class="item" wx:for="{{dataDict.result}}" wx:for-item="row" wx:key="index">
 27       <view class="record">
 28         <view class="avatar">
 29           <image src="{{row.avatar}}"></image>
 30         </view>
 31 
 32         <view class="desc">
 33           <view class="username">{{row.name}}</view>
 34           
 35           <view>
 36             <view class="txt-group">
 37               <label class="zh">网格区域</label>
 38               <label class="en"> | {{row.area.desc}}</label>
 39             </view>
 40             <view class="area"> 
 41               <label class="fa fa-map-marker"></label> {{row.area.name}} 
 42             </view>
 43           </view>
 44         </view>
 45         <view class="delete" bindtap="doDeleteRow" data-nid="{{row.id}}" data-index="{{index}}" >
 46           <label class="iconfont icon-shanchu"></label>
 47         </view>
 48       </view>
 49     </view>
 50 
 51   </view>
 52 </view>
 53 
 54 
 55 ================================================
 56 js
 57 
 58 import api from '../../../static/js/api.js'
 59 Page({
 60   data: {
 61     dataDict: {
 62       result: [
 63       
 64     ],
 65       today_count: 0,
 66     }
 67 
 68   },
 69 
 70   onLoad(options) {
 71     //发送网络请求... 
 72     this.refresh();
 73   },
 74   onShow(){
 75     this.refresh();
 76   },
 77   refresh() {
 78     //1.发送网络请求
 79     //2.数据绑定
 80     wx.showLoading({
 81       mask: true
 82     })
 83     wx.request({
 84       url: api.collection,
 85       method: "GET",
 86       success: (res) => {
 87         this.setData({
 88           dataDict: res.data
 89         })
 90       },
 91       complete() {
 92         wx.hideLoading()
 93       }
 94     })},
 95 
 96   bindToForm(){
 97     wx.navigateTo({
 98       url: '/pages/second/form/form',
 99     })
100   },
101   doDeleteRow(e){
102     wx.showModal({
103       title: '确认是否删除？',
104       confirmColor: "#ff461f",
105       success: (res) => {
106         if (!res.confirm) {
107           return
108         }
109         
110         var nid = e.currentTarget.dataset.nid
111         
112         wx.showLoading({
113           title: '删除中',
114           mask:true
115         })
116 
117         wx.request({
118           url: api.collection + nid + '/',
119           method:'DELETE',
120           success:(res) =>{
121             this.refresh()
122           },
123           complete() {
124             wx.hideLoading()
125           }
126         })
127        
128       }
129     })
130   },
131 })
132 
133 =========================================
134 scc
135 
136 .top {
137   background-color: #01ccb6;
138   height: 200rpx;
139 
140   display: flex;
141   flex-direction: column;
142   align-items: center;
143   color: white;
144 }
145 
146 .top .tip {
147   font-size: 22rpx;
148   font-weight: 100;
149 }
150 
151 .top .count {
152   padding: 10rpx;
153   font-size: 58rpx;
154 }
155 
156 .function {
157   display: flex;
158   flex-direction: row;
159   justify-content: space-around;
160   background-color: #02bfae;
161 }
162 
163 .function .menu {
164   font-size: 28rpx;
165   margin: 25rpx 0;
166   color: white;
167   width: 50%;
168   text-align: center;
169   flex-direction: row;
170   flex-direction: column;
171   align-items: center;
172 }
173 
174 .table .item {
175   border-bottom: 1rpx solid #e7e7e7;
176 
177 }
178 
179 .table .item .title{
180   margin: 20rpx 30rpx;
181   padding-left: 10rpx;
182   border-left: 5rpx solid #02bfae;
183   font-size: 26rpx;
184 }
185 
186 .record{
187   margin: 30rpx 40rpx;
188   display: flex;
189   flex-direction: row;
190   justify-content: flex-start;
191 }
192 
193 .record .avatar{
194   width: 200rpx;
195   height: 200rpx;
196 }
197 
198 .record .avatar image{
199   width: 100%;
200   height: 100%;
201   border-radius: 30rpx;
202 }
203 
204 
205 
206 .record .desc{
207   margin: 0 40rpx;
208 }
209 .desc{
210   width: 290rpx;
211   display: flex;
212   flex-direction: column;
213   justify-content: space-between;
214 }
215 .desc .username{
216   margin-top: 25rpx;
217   font-size: 38rpx;
218 }
219 
220 .txt-group{
221   font-size: 27rpx;
222   margin: 10rpx 0;
223 }
224 .txt-group .zh{
225   color: #8c8c8c;
226 }
227 
228 .txt-group .en{
229   color: #cccccc;
230 }
231 
232 .area{
233   color: #00c8b6;
234   font-weight: bold;
235 }
236 
237 .delete{
238   width: 100rpx;
239   color: red;
240   text-align: center;
241   display: flex;
242   flex-direction: column;
243   justify-content: center;
244 }

 

信息采集form页---form

  1 wxml
  2 
  3 <view class="avatar">
  4   <image src='{{avatar}}' bindtap="bindToCamera"></image>
  5 </view>
  6 
  7 <view class="form">
  8   <view class="row-group">
  9     <input placeholder="请填写姓名" placeholder-class='txt' model:value="{{name}}" bindinput="bindNameChange" />
 10   </view>
 11 
 12   <view class="picker-group">
 13     <picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" range-key="name">
 14 
 15       <view wx:if="{{ index > -1}}" class="picker-txt picker">当前网格：{{objectArray[index].name}}</view>
 16       <view wx:else class="picker-txt" >请选择网格</view>
 17       
 18     </picker>
 19   </view>
 20   <view>
 21     <button class="submit" bindtap="postUser" > 提 交 </button>
 22   </view>
 23 </view>
 24 
 25 
 26 ==============================================
 27 js
 28 
 29 // pages/second/form/form.js
 30 import api from '../../../static/js/api.js'
 31 Page({
 32   data: {
 33     avatar: "/static/img/camera/camera.png",
 34     objectArray: [
 35     ],
 36     index: -1,
 37     name:""
 38   },
 39 
 40   bindToCamera(e){
 41     wx.navigateTo({
 42       url: '/pages/second/camera/camera',
 43     })
 44   },
 45   onLoad(){
 46     wx.request({
 47       url: api.area,
 48       method:'GET',
 49       success:(res)=>{
 50         this.setData({
 51           objectArray:res.data
 52         })
 53       }
 54     })
 55 
 56   },
 57   postUser(e){
 58     wx.showLoading({
 59       title: '提交中',
 60       mask:true
 61     })
 62 
 63     wx.uploadFile({
 64       url: api.collection,
 65       filePath: this.data.avatar,
 66       name: 'avatar',
 67       formData: {
 68         'name': this.data.name,
 69         'area': this.data.objectArray[this.data.index].id
 70       },
 71       success(res) {
 72         console.log(res);
 73         // 上一个页面新增数据
 74         // 上传成功
 75         // 跳转回上一页
 76         wx.navigateBack({});
 77      
 78       },
 79       complete() {
 80         wx.hideLoading()
 81       }
 82     })
 83 
 84   },
 85 
 86   bindPickerChange(e) {
 87     this.setData({
 88       index: e.detail.value
 89     })
 90   },
 91 
 92 })
 93 
 94 =========================================
 95 scc
 96 
 97 /* pages/second/form/form.wxss */
 98 .avatar{
 99   display: flex;
100   flex-direction: column;
101   align-items: center;
102 }
103 
104 .avatar image {
105   margin-top: 140rpx;
106   width: 300rpx;
107   height: 300rpx;
108   border-radius: 30rpx;
109   border: 1px solid #ddd;
110 }
111 
112 .form{
113   padding: 40rpx;
114 }
115 
116 .form .row-group{
117   padding: 10rpx 0;
118   border-bottom: 1rpx solid #ddd;
119   position: relative;
120   margin-top: 30rpx;
121 }
122 
123 
124 
125 .form .row-group text{
126   font-size: 28rpx;
127   padding:20rpx 0;
128 }
129 
130 .form .row-group input{
131   padding: 10rpx 0;
132 }
133 
134 .form .row-group .txt{
135   color: #ccc;
136   font-size: 28rpx;
137 }
138 
139 .form .picker-group{
140   border-bottom: 1rpx solid #ddd;
141 }
142 
143 .form .picker-group .picker-txt{
144   color: #ccc;
145   font-size: 28rpx;
146   padding: 40rpx 0 20rpx 0;
147 }
148 
149 .form .picker-group .picker{
150   color: black;
151 }
152 
153 .form .submit{
154   margin-top: 80rpx;
155   color: #fff;
156   border: 2rpx solid #00c8b6;
157   background-color: #00c8b6;
158   font-size: 32rpx;
159   font-weight: bold;
160 }

 

拍照页面camera

 1 wxml
 2 
 3 <!--pages/second/camera/camera.wxml-->
 4 <!-- 拍照页面 -->
 5 <camera class="camera"  device-position="{{ backFront ? 'back' : 'front' }}"  flash="off" frame-size="medium" ></camera>
 6 
 7  
 8 <view class="function">
 9   <view class="switch"> </view>
10   <view class="record" bindtap="takePhoto">
11     <image src="/static/img/camera/record_on.png"></image>
12   </view>
13   <view class="switch" bindtap="switchCamera">
14     <image src="/static/img/camera/rotate-camera-white.png"></image>
15   </view>
16  </view>
17 
18 
19 ==============================================
20 js
21 
22 // pages/second/camera/camera.js
23 Page({
24 
25   /**
26    * 页面的初始数据
27    */
28   data: {
29     backFront:true
30 
31   },
32 
33   takePhoto(){
34     const ctx = wx.createCameraContext()
35     ctx.takePhoto({
36       quality: 'high',
37       success: (res) => {    
38         // 获取照片 
39         //console.log(res);
40 
41         // 对上一个页面中的值，进行修改
42         var pages = getCurrentPages();
43         var prevPage = pages[pages.length - 2];
44         // 把上个页面的图片位置设为刚刚拍的照
45         prevPage.setData({
46           avatar: res.tempImagePath
47         })
48 
49         //跳转回上一个页面  [v1,v2,v2]
50         wx.navigateBack({});
51       }
52     })
53   },
54 
55 
56   switchCamera(e) {
57     var old = this.data.backFront
58     this.setData({
59       backFront: !old
60     })
61   },
62 })
63 
64 ===============================================
65 scc
66 
67 page{
68     height: 100%;
69 }
70 .camera{
71   height: 80%;
72   width: 100%;
73 }
74 
75 
76 .function{
77   height: 20%;
78   background-color: black;
79   
80   display: flex;
81   flex-direction: row;
82   justify-content: space-around;
83   align-items: center;
84 }
85 .record image{
86   width: 160rpx;
87   height: 160rpx;
88 }
89 
90 .switch{
91   color: white;
92   width: 80rpx;
93   height: 80rpx;
94 }
95 .switch image{
96   width: 80rpx;
97   height: 80rpx;
98 }

 

 

信息采集统计statistics

 1 wxml
 2 
 3 <view class="container">
 4   <view class="menu" wx:for="{{dataList}}" wx:key="index">
 5     <view> <label class="iconfont  icon-SCHEDULE" ></label>   {{item.date}}</view>
 6     <label>{{item.count}}个</label>
 7   </view>
 8 </view>
 9 
10 
11 =============================================
12 wxss
13 
14 .container{
15   border-top: 1px solid #ddd;
16 }
17 
18 .container .menu{
19   font-size: small;
20   padding: 10px 40rpx;
21   border-bottom: 1px dotted #ddd;
22   text-align: center;
23 
24   display: flex;
25   flex-direction: row;
26   justify-content: space-between;
27   background-color: white;
28 }
29 
30 ===============================================
31 js
32 
33 import api from '../../../static/js/api.js'
34 
35 Page({
36   data: {
37     dataList:[]
38   },
39   getRecord:function(){
40     wx.showLoading({mask:true})
41     wx.request({
42       url: api.statistics,
43       method:"GET",
44       success :(res) =>{
45         this.setData({
46           dataList:res.data
47         })
48       },
49       complete:()=>{
50         wx.hideLoading()
51       }
52     })
53   },
54   onLoad(options) {
55       this.getRecord();
56   },
57   onPullDownRefresh() {
58     this.getRecord();
59   },
60 
61 })
62 
63 
64 ============================================
65 json
66 
67 
68 {
69   "usingComponents": {},
70   "navigationBarTitleText": "采集统计",
71   "enablePullDownRefresh": true
72 }

 

 

人脸检测face

  1 wxml
  2 
  3 <view class="header">
  4   <camera class="camera" device-position="{{ backFront ? 'back' : 'front' }}" flash="off" frame-size="medium"></camera>
  5 
  6   <view class="switch" bindtap="switchCamera">
  7     <image src="/images/camera/rotate-camera-white.png"></image>
  8   </view>
  9   <button class="submit" bindtap="takePhoto"> 拍照检测 </button>
 10 </view>
 11 
 12 <view class="table">
 13   <view class="item">
 14     <view class="title">检测记录</view>
 15   </view>
 16   <view class="item" wx:for="{{record}}" wx:for-item="row" wx:key="index">
 17     <view class="record">
 18       <view class="avatar">
 19         <image src="{{row.avatar}}"></image>
 20       </view>
 21       <view class="desc">
 22         <view wx:if="{{row.code == 100}}" class="username">检测成功：{{row.user_id}}</view>
 23         <view wx:else class="username">检测失败:{{row.msg}}</view>
 24         <view>
 25           <view class="txt-group">
 26             <label class="zh">{{row.error_msg}}</label>
 27           </view>
 28         </view>
 29       </view>
 30       <view class="delete">
 31         <block wx:if="{{row.code == 100}}">
 32           <label class="iconfont icon-ziyuanxhdpi" style="color:green"></label>
 33         </block>
 34         <block wx:else>
 35           <label class="iconfont icon-ziyuanxhdpi" style="color:red"></label>
 36         </block>
 37       </view>
 38     </view>
 39   </view>
 40 </view>
 41 
 42 
 43 =============================================
 44 js
 45 
 46 import api from '../../../static/js/api.js'
 47 
 48 Page({
 49   data: {
 50     backFront:true,
 51     record:[]
 52   },
 53   switchCamera(e) {
 54     var old = this.data.backFront
 55     this.setData({
 56       backFront: !old
 57     })
 58   },
 59   takePhoto(e){
 60     wx.showLoading({
 61       title: '检测中',
 62       mask:true
 63     })
 64 
 65     const ctx = wx.createCameraContext()
 66     ctx.takePhoto({
 67       quality: 'high',
 68       success: (res) => {
 69         wx.uploadFile({
 70           url: api.face,
 71           filePath: res.tempImagePath,
 72           name: 'avatar',
 73           success:(response)=>{
 74             
 75             let resdata = JSON.parse(response.data)
 76             console.log(resdata)
 77             if(resdata.code==100 || resdata.code==102){
 78               console.log(resdata)
 79               resdata.avatar = res.tempImagePath
 80               var oldRecord = this.data.record
 81               oldRecord.unshift(resdata)
 82               console.log(oldRecord)
 83               this.setData({
 84                 record:oldRecord
 85               })
 86 
 87             }else{
 88               wx.showToast({
 89                 title: '请正常拍照'
 90               })
 91             }
 92           },
 93           complete:function(){
 94             wx.hideLoading()
 95           }
 96         })
 97       }
 98     })
 99   },
100 
101 })
102 
103 
104 ===============================================
105 wxss
106 
107 /* pages/second/face/face.wxss */
108 .header{
109   position: relative;
110 }
111 .camera{
112   height: 600rpx;
113   width: 100%;
114 }
115 
116 
117 .switch{
118   position: absolute;
119   top: 10rpx;
120   right: 20rpx;
121 
122   height: 80rpx;
123   width: 80rpx;
124 }
125 
126 .switch image{
127   height: 100%;
128   width: 100%;
129 }
130 
131 .submit{
132   margin-top: 40rpx;
133   color: #fff;
134   border: 2rpx solid #00c8b6;
135   background-color: #00c8b6;
136   font-size: 32rpx;
137   font-weight: normal;
138 }
139 
140 .table{
141   margin-top: 40rpx;
142   border-top: 1rpx solid #e7e7e7;
143 }
144 
145 .table .item {
146   border-bottom: 1rpx solid #e7e7e7;
147 
148 }
149 
150 .table .item .title{
151   margin: 20rpx 30rpx;
152   padding-left: 10rpx;
153   border-left: 5rpx solid #02bfae;
154   font-size: 26rpx;
155 }
156 
157 .record{
158   margin: 10rpx 40rpx;
159   display: flex;
160   flex-direction: row;
161   justify-content: space-between;
162 }
163 
164 .record .avatar{
165   width: 100rpx;
166   height: 100rpx;
167 }
168 
169 .record .avatar image{
170   width: 100%;
171   height: 100%;
172   border-radius: 30rpx;
173 }
174 
175 .record .desc{
176   margin: 0 40rpx;
177 }
178 .desc{
179   width: 290rpx;
180   display: flex;
181   flex-direction: column;
182   justify-content: space-around;
183 }
184 .desc .username{
185   font-size: 25rpx;
186 }
187 
188 .txt-group{
189   font-size: 20rpx;
190   margin: 5rpx 0;
191 }
192 .txt-group .zh{
193   color: #8c8c8c;
194 }
195 
196 .txt-group .en{
197   color: #cccccc;
198 }
199 
200 .area{
201   color: #00c8b6;
202   font-weight: bold;
203 }
204 
205 .delete{
206   width: 100rpx;
207   text-align: center;
208   display: flex;
209   flex-direction: column;
210   justify-content: center;
211 }
212 
213 
214 ==============================================
215 json
216 
217 {
218   "usingComponents": {},
219   "navigationBarTitleText": "人脸检测"
220 }

 

公告

  1 wxml
  2 
  3 <view class="container">
  4   <!-- 使用wx:for循环遍历社区公告列表 -->
  5   <view wx:for="{{noticeList}}" wx:key="index" class="notice-item">
  6     <!-- 左侧图片 -->
  7     <image class="notice-image" src="{{item.img}}" mode="aspectFill"></image>
  8     <!-- 右侧内容 -->
  9     <view class="notice-content">
 10       <view class="notice-title">{{item.title}}</view>
 11       <view class="notice-time">{{item.create_time}}</view>
 12       <view class="notice-details">{{item.content}}</view>
 13     </view>
 14   </view>
 15 </view>
 16 
 17 ==============================================
 18 js
 19 
 20 import api from '../../static/js/api'
 21 Page({
 22   data: {
 23     noticeList: [
 24       {
 25         title: '公告标题1',
 26         create_time: '2024-04-25',
 27         content: '公告内容描述1，公告内容描述1，公告内容描述1。', // 可以根据实际情况添加更多内容
 28         img: '/images/notice/notice1.jpg' // 图片路径，根据实际情况修改
 29       },
 30       {
 31         title: '公告标题2',
 32         create_time: '2024-04-26',
 33         content: '公告内容描述2，公告内容描述2，公告内容描述2。', // 可以根据实际情况添加更多内容
 34         img: '/images/notice/notice2.jpg' // 图片路径，根据实际情况修改
 35       },
 36     ]
 37   },
 38   onLoad: function () {
 39     // 页面加载时执行的逻辑
 40     this.refresh()
 41   },
 42   refresh(){
 43     wx.showLoading({
 44       mask: true
 45     })
 46     wx.request({
 47       url: api.notice,
 48       method: "GET",
 49       success: (res) => {
 50         this.setData({
 51           noticeList: res.data
 52         })
 53       },
 54       complete() {
 55         wx.hideLoading()
 56       }
 57     })
 58 
 59   },
 60   onPullDownRefresh(){
 61     this.refresh
 62   }
 63 })
 64 
 65 ============================================
 66 wxss
 67 
 68 .container {
 69   padding: 20rpx;
 70 }
 71 
 72 .notice-item {
 73   display: flex;
 74   align-items: flex-start;
 75   margin-bottom: 20rpx; /* 添加间距 */
 76   border-bottom: 1px solid #f0f0f0; /* 添加底部边框 */
 77   padding-bottom: 20rpx; /* 增加底部内边距 */
 78 }
 79 
 80 .notice-image {
 81   width: 150rpx;
 82   height: 120rpx;
 83   border-radius: 6rpx;
 84   margin-right: 20rpx;
 85 }
 86 
 87 .notice-content {
 88   flex: 1;
 89 }
 90 
 91 .notice-title {
 92   font-size: 28rpx;
 93   font-weight: bold;
 94   margin-bottom: 10rpx;
 95 }
 96 
 97 .notice-time {
 98   font-size: 24rpx;
 99   color: #666666;
100   margin-bottom: 10rpx;
101 }
102 
103 .notice-details {
104   font-size: 24rpx;
105   color: #333333;
106 }

 

活动报名caticity

  1 wxml
  2 
  3 
  4 <view class="container">
  5   <!-- 使用wx:for循环遍历活动报名列表 -->
  6   <view wx:for="{{activityList}}" wx:key="index" class="activity-item">
  7     <!-- 活动内容 -->
  8     <view class="activity-content">
  9       <view class="activity-title">{{item.title}}</view>
 10       <view class="activity-enrollment">报名人数：{{item.count}}  |  总人数：{{item.total_count}}</view>
 11       <view class="activity-time">获得积分：{{item.score}}</view>
 12       <view class="activity-time">{{item.date}}</view>
 13       <view class="activity-description">{{item.text}}</view> 
 14     </view>
 15     <!-- 报名按钮 -->
 16     <button class="signup-btn" bindtap="handleSignup" data-id="{{item.id}}">报名</button>
 17   </view>
 18 </view>
 19 
 20 
 21 ==============================================
 22 js
 23 
 24 // pages/activity/activity.js
 25 var app = getApp();
 26 import api from '../../static/js/api'
 27 Page({
 28   data: {
 29     activityList: [   
 30     ]
 31   },
 32   onLoad: function () {
 33     // 页面加载时执行的逻辑
 34     this.refresh()
 35   },
 36   refresh(){
 37     wx.showLoading({
 38       mask: true
 39     })
 40     wx.request({
 41       url: api.activity,
 42       method: "GET",
 43       success: (res) => {
 44         this.setData({
 45           activityList: res.data
 46         })
 47       },
 48       complete() {
 49         wx.hideLoading()
 50       }
 51     })
 52 
 53   },
 54   handleSignup: function (event) {
 55     // 处理报名按钮点击事件
 56     var index = event.currentTarget.dataset.id; // 获取当前点击的活动索引
 57     console.log('点击了报名按钮，索引为：', index);
 58   },
 59   onPullDownRefresh(){
 60     this.refresh
 61   }
 62 })
 63 
 64 
 65 =============================================
 66 wxss
 67 
 68 .container {
 69   padding: 20rpx;
 70 }
 71 
 72 .activity-item {
 73   display: flex;
 74   align-items: flex-start;
 75   justify-content: space-between;
 76   margin-bottom: 20rpx;
 77   border-bottom: 1px solid #ebebeb;
 78   padding-bottom: 20rpx;
 79 }
 80 
 81 .activity-content {
 82   flex: 1;
 83 }
 84 
 85 .activity-title {
 86   font-size: 28rpx;
 87   font-weight: bold;
 88   margin-bottom: 10rpx;
 89 }
 90 
 91 .activity-time {
 92   font-size: 24rpx;
 93   color: #666666;
 94   margin-bottom: 10rpx;
 95 }
 96 
 97 .activity-enrollment {
 98   font-size: 24rpx;
 99   color: #999999;
100   margin-bottom: 10rpx;
101 }
102 
103 .activity-description {
104   font-size: 24rpx;
105   color: #333333;
106   margin-top: 10rpx;
107   white-space: pre-wrap; /* 自动换行 */
108 }
109 
110 .signup-btn {
111   background-color: #50c8ff;
112   color: #ffffff;
113   border: none;
114   border-radius: 4rpx;
115   padding: 10rpx 20rpx;
116   font-size: 24rpx;
117 }

 

登录页面 my

  1 wxml
  2 
  3 <!--pages/my/my.wxml-->
  4 <block wx:if="{{userInfo==null}}">
  5 <view class="container1">
  6   <view class="main">
  7     <view class="icon-view">
  8       <!-- 应用图标 -->
  9       <image src="/static/img/icon/icon.png" class="app-icon"></image>
 10       <text class="title">智慧社区</text>
 11     </view>
 12   </view>
 13   <van-cell-group>
 14     <van-cell>
 15       <button type="warn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">手机号快捷登录</button>
 16     </van-cell>
 17   </van-cell-group>
 18 
 19   <!-- 其他手机号登录 -->
 20   <van-cell-group>
 21     <van-cell>
 22       <button type="primary" plain bindtap="handleOtherLogin">其他手机号登录</button>
 23     </van-cell>
 24   </van-cell-group>
 25 
 26   <!-- 用户协议同意 -->
 27   <view class="agreement-container">
 28     <checkbox class="checkbox" value="{{agreed}}" bindchange="handleAgreeChange"></checkbox>
 29     <text class="agreement-text">我已阅读并同意</text>
 30     <navigator url="" class="agreement-link">《用户协议》</navigator>
 31   </view>
 32 </view>
 33 </block>
 34 
 35 
 36 <block wx:else>
 37   <view class="container">
 38   <view class="top-view">
 39     <view class="user">
 40       <view class="row">
 41         <image class="avatar" src="{{userInfo.avatar}}"></image>
 42         <view class="name">
 43           <view bindtap="logout">{{userInfo.name}}</view>
 44         </view>
 45       </view>
 46 
 47     </view>
 48     <view class="numbers">
 49       <view class="row">
 50         <text>{{userInfo.score}}</text>
 51         <text>积分</text>
 52       </view>
 53       <view class="row">
 54         <text>55</text>
 55         <text>其他</text>
 56       </view>
 57       <view class="row">
 58         <text>77</text>
 59         <text>其他</text>
 60       </view>
 61       <view class="row">
 62         <text>56</text>
 63         <text>其他</text>
 64       </view>
 65     </view>
 66   </view>
 67   <van-list>
 68     <van-cell title="积分兑换记录" is-link />
 69     <van-cell title="我参加的活动" is-link />
 70     <van-cell title="分享应用" is-link />
 71     <van-cell title="联系客服" is-link />
 72     <van-cell title="退出登录" is-link bind:tap="handleLogout"/>
 73   </van-list>
 74 </view>
 75 
 76 </block>
 77 
 78 =============================================
 79 js
 80 
 81 // pages/my/my.js
 82 var app = getApp(); // 拿到的是 app.js中data的数据
 83 import api from '../../static/js/api.js'
 84 Page({
 85 
 86   data: {
 87     userInfo: null,
 88   },
 89   getPhoneNumber(event) {
 90     console.log(event)
 91     // 通过获取手机号返回的code--传递给后端--后端调用：POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN -->获取手机号--》后端签发token给前端
 92     wx.request({
 93       url: api.quick_login,
 94       method: 'POST',
 95       data: {
 96         code: event.detail.code
 97       },
 98       success: (res) => {
 99         console.log(res)
100         //在此返回登录信息，用户登录
101         var data = res.data;
102         console.log(data)
103         if (data.code == 100) {
104           console.log('---', data)
105           var token = data.token
106           var name = data.name
107           var score = data.score
108           var avatar = data.avatar
109           app.initUserInfo(name, score, avatar, token)
110           var info = app.globalData.userInfo
111           console.log('globalData.userInfo', info)
112           if (info) {
113             this.setData({
114               userInfo: info
115             })
116           }
117         } else {
118           wx.showToast({
119             title: '登录失败',
120           })
121         }
122       }
123 
124     })
125   },
126   handleOtherLogin(e) {
127     wx.navigateTo({
128       url: '/pages/second/otherlogin/otherlogin'
129     })
130   },
131   onShow() {
132     var info = app.globalData.userInfo
133     console.log('globalData.userInfo', info)
134     if (info) {
135       this.setData({
136         userInfo: info
137       })
138     }
139 
140   },
141   handleLogout() {
142     app.logoutUserInfo()
143     this.setData({
144       userInfo: null
145     })
146   }
147 })
148 
149 
150 ================================================
151 wxss
152 
153 /* pages/my/my.wxss */
154 page{
155   height: 100%;
156 }
157 
158 .login-area{
159   height: 100%;
160   display: flex;
161   flex-direction: column;
162   justify-content: center;
163   align-items: center;
164 }
165 .login-area .btn{
166   width: 200rpx;
167   height: 200rpx;
168   border-radius: 500%;
169   background-color: #5cb85c;
170   color: white;
171   
172   display: flex;
173   flex-direction: row;
174   align-items: center;
175   justify-content: center;
176 }
177 
178 
179 
180 
181 .user-area{
182   height: 100%;
183   display: flex;
184   flex-direction: column;
185   justify-content: center;
186   align-items: center;
187 }
188 .user-area image{
189   width: 200rpx;
190   height: 200rpx;
191   border-radius: 500%;
192 }
193 .user-area .name{
194   font-size: 30rpx;
195   padding: 30rpx 0;
196 }
197 
198 .user-area .logout{
199   color: #a94442;
200 }
201 
202 
203 
204 .top-view{
205   background-color: #01ccb6;
206 
207   color: white;
208   padding: 40rpx;
209 }
210 
211 .top-view .user{
212   display: flex;
213   flex-direction: row;
214   justify-content: space-between;
215   align-items: center;
216 }
217 .top-view .user .row{
218   display: flex;
219   flex-direction: row;
220   justify-content: flex-start;
221   align-items: center;
222 }
223 .top-view .user .avatar{
224   width: 100rpx;
225   height: 100rpx;
226   border-radius: 50%;
227 }
228 
229 .top-view .user .name{
230   display: flex;
231   flex-direction: row;
232   justify-content: flex-start;
233   padding-left: 20rpx;
234 }
235 .top-view .user .name navigator{
236   padding: 0 5rpx;
237 }
238 
239 .top-view .site{
240   background-color: rgba(0, 0, 0, 0.16);
241   padding: 20rpx;
242   border-top-left-radius: 32rpx;
243   border-bottom-left-radius: 32rpx;
244 }
245 
246 .top-view .numbers{
247   display: flex;
248   flex-direction: row;
249   justify-content: space-between;
250   font-size: 28rpx;
251   padding: 40rpx;
252   padding-bottom: 0rpx;
253 }
254 
255 .top-view .numbers .row{
256    display: flex;
257   flex-direction: column;
258   align-items: center;
259 }
260 
261 /* login.wxss */
262 .container1 {
263   padding: 20rpx;
264 }
265 .main{
266   display: flex;
267   justify-content: center;
268   align-items: center;
269 }
270 .icon-view{
271   display: flex;
272   flex-direction: column;
273   margin-bottom: 50rpx;
274 }
275 
276 .app-icon {
277   width: 100rpx;
278   height: 100rpx;
279   margin: 40rpx auto 20rpx; /* 上边距为40rpx，下边距为20rpx，左右居中 */
280 }
281 
282 .quick-login-header {
283   display: flex;
284   align-items: center;
285 }
286 
287 .icon {
288   width: 40rpx;
289   height: 40rpx;
290   margin-right: 20rpx;
291 }
292 
293 .title {
294   font-size: 28rpx;
295   font-weight: bold;
296   color: #333333;
297 }
298 
299 .divider {
300   height: 20rpx;
301 }
302 
303 .login-option {
304   font-size: 28rpx;
305   color: #333333;
306 }
307 
308 .login-option .van-cell__icon {
309   color: #07c160;
310 }
311 
312 .agreement-container {
313   display: flex;
314   align-items: center;
315   margin-top: 20rpx;
316 }
317 
318 .checkbox {
319   margin-right: 10rpx;
320 }
321 
322 .agreement-text {
323   font-size: 24rpx;
324   color: #666666;
325 }
326 
327 .agreement-link {
328   font-size: 24rpx;
329   color: #07c160;
330 }
331 
332 ===============================================
333 
334 总的js
335 
336 
337 // app.js
338 App({
339   globalData:{
340     userInfo:null
341   },
342 initUserInfo:function(name,score,avatar,token){
343   var info={
344     name:name,
345     score:score,
346     avatar:avatar,
347     token:token
348   };
349   this.globalData.userInfo=info
350   wx.setStorageSync('userInfo', info);
351 },
352 logoutUserInfo:function(){
353   wx.removeStorageSync('userInfo');
354   this.globalData.userInfo=null;
355 },
356 onLaunch(){
357   var info=wx.getStorageSync('userInfo')
358   console.log(info)
359   this.globalData.userInfo=info
360 }
361 })

 

登录页面otherlogin

  1 wxml
  2 
  3 <view class="container">
  4   <view class="main">
  5     <view class="icon-view">
  6       <!-- 应用图标 -->
  7       <image src="/static/img/icon/icon.png" class="app-icon"></image>
  8       <text class="title">智慧社区</text>
  9     </view>
 10   </view>
 11 
 12 
 13   <van-field value="{{ phone }}" bind:input="onPhoneInput" label="手机号" type="tel" placeholder="请输入手机号" clearable="{{ true }}" />
 14 
 15 
 16   <van-field value="{{code}}" bind:input="onCodeInput" center clearable label="验证码" placeholder="请输入验证码" use-button-slot>
 17     <van-button slot="button" size="small" type="primary" bind:tap="sendCode" disabled='{{sendCodeDisabled}}'>
 18       {{buttonText}}
 19     </van-button>
 20   </van-field>
 21 
 22   <van-button type="info" block="{{ true }}" bind:tap="login">登录</van-button>
 23 </view>
 24 
 25 
 26 ==============================================
 27 js
 28 
 29 import api from '../../../static/js/api.js'
 30 var app = getApp()
 31 Page({
 32   data: {
 33     phone: '',
 34     code: '',
 35     agreed: false,
 36     sendCodeDisabled: false,
 37     buttonText: '发送验证码',
 38     loading: false,
 39     timer: null,
 40     countDown: 60
 41   },
 42 
 43 // 监听手机号输入
 44 onPhoneInput(event) {
 45   this.setData({
 46     phone: event.detail
 47   });
 48 },
 49 
 50 // 监听验证码输入
 51 onCodeInput(event) {
 52   this.setData({
 53     code: event.detail
 54   });
 55 },
 56 
 57   // 发送验证码
 58   sendCode() {
 59     // 在这里编写发送验证码的逻辑，此处仅做示例
 60     console.log('发送验证码',this.data.phone,this.data.code);
 61 
 62     if(this.data.phone){
 63       wx.request({
 64         url: api.send_sms+'?mobile='+this.data.phone,
 65         method:'GET',
 66         success:(res)=>{
 67          wx.showToast({
 68            title: res.data.msg,
 69          })
 70         }
 71       })
 72       this.setData({
 73         sendCodeDisabled: true,
 74         timer: setInterval(this.countDown, 1000)
 75       });
 76     }else{
 77       wx.showToast({
 78         title: '请输入手机号',
 79       })
 80     }
 81 
 82   },
 83 
 84   // 登录
 85   login() {
 86     // 在这里编写登录逻辑，此处仅做示例
 87     console.log('登录');
 88     if(this.data.phone&&this.data.code){
 89       wx.request({
 90         url: api.login,
 91         method:'POST',
 92         data:{mobile:this.data.phone,code:this.data.code},
 93         success:(res)=>{
 94           var data = res.data;
 95           console.log(data)
 96           if (data.code == 100) {
 97             console.log('---', data)
 98             var token = data.token
 99             var name = data.name
100             var score = data.score
101             var avatar = data.avatar
102             app.initUserInfo(name, score, avatar, token)
103             var info = app.globalData.userInfo
104             console.log('globalData.userInfo', info)
105             wx.navigateBack()
106           } else {
107             wx.showToast({
108               title: '登录失败',
109             })
110           }
111         }
112       })
113       this.setData({
114         sendCodeDisabled: true,
115         timer: setInterval(this.countDown, 1000)
116       });
117     }else{
118       wx.showToast({
119         title: '请输入手机号和验证码',
120       })
121     }
122 
123   },
124 
125   // 倒计时
126   countDown() {
127     let countDown = this.data.countDown;
128     if (countDown === 0) {
129       clearInterval(this.data.timer);
130       this.setData({
131         buttonText: '发送验证码',
132         sendCodeDisabled: false,
133         countDown: 60
134       });
135       return;
136     }
137     this.setData({
138       buttonText: countDown + 's',
139       countDown: countDown - 1
140     });
141   },
142 
143   onUnload() {
144     clearInterval(this.data.timer);
145   }
146 });
147 
148 
149 =============================================
150 wxss
151 
152 /* pages/second/otherlogin/otherlogin.wxss */
153 .container {
154   padding: 20rpx;
155 
156 }
157 .main{
158   display: flex;
159   justify-content: center;
160   align-items: center;
161 }
162 .icon-view{
163   display: flex;
164   flex-direction: column;
165   margin-bottom: 50rpx;
166 }
167 .title {
168   font-size: 28rpx;
169   font-weight: bold;
170   color: #333333;
171 }
172 .app-icon {
173   width: 100rpx;
174   height: 100rpx;
175   margin: 40rpx auto 20rpx; /* 上边距为40rpx，下边距为20rpx，左右居中 */
176 }

 

 

posted on 2024-06-12 21:00  认真的六六  阅读(63)  评论(0)  编辑  收藏  举报
Copyright © 2024 认真的六六
Powered by .NET 9.0 on Kubernetes Powered By: 博客园