【学习笔记】大三集中实训做的一个微信小程序之点餐系统（静态页面不包含java后台逻辑）

最新推荐文章于 2023-10-18 16:19:59 发布

Zhang_Dream

最新推荐文章于 2023-10-18 16:19:59 发布

阅读量1.2k

点赞数 7

分类专栏：学习笔记文章标签：前端小程序

本文链接：https://blog.csdn.net/qq_45621392/article/details/109713601

版权

学习笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

点餐系统

注：大三集中实训的时候由于没有什么经验，只实现了静态页面，但微信小程序开发文档里面所有的功能差不多都实现（视频的上传与下载以及登录等等）所以在这里记录自己的学习笔记

**点餐系统**
- 1. 导航栏
- 2.项目结构
- 3. 运行成功截图
一、学做菜
- cook.wxml【这个模块使用了template模板】
- cook.js
- cook.wxss
二、头条模块
三、美食圈
- food.wxml
- food.js
- food.wxss
四、消息模块
- message.wxml
- message.js
- message.wxss
五、登录模块
- login.wxml
- login.js
- login.wxss
六登录测试
输入正确用户名和错误密码
- 输入正确登录成功
- successuser.wxml
- successuser.js
- success.wxss
七、添加银行卡页面
- withdraw.wxml
- withdraw.js
- withdraw.wxss
八、银行卡账户充值
- mybackcard.wxml
- mybackcard.js
- mybackcard.wxss
九、点击拍照功能
- cameara.wxml
- cameara.js
- camera.wxss
十、视频列表的播放与下载
- dowonload.wxml
- download.js
- download.wxss
十一、视频上传
- shangshuanvideo.wxml
- shangchuanvideo.js
- shanchuanvideo.wxss
十二、忘记密码
- forgertpassword.wxml
- forgretpassword.js
- forgretpassword.wxss

1. 导航栏

底部导航栏分为学做菜、头条、美食圈、消息、我的

2.项目结构

在这里插入图片描述

3. 运行成功截图

学做菜

在这里插入图片描述

早餐

在这里插入图片描述

中餐

在这里插入图片描述

晚餐

在这里插入图片描述

头条

在这里插入图片描述

消息

在这里插入图片描述

一、学做菜

cook.wxml【这个模块使用了template模板】

<view class="content">
  <!-- <view class="img">
    <image src="../images/haibao/haibao-1.jpg" style="width:100%;height:230px;"></image>
  </view> -->
  <swiper class="swiper" indicator-dots="{{in}}" autoplay="{{autoplay}}" interval="{{interval}}"
   duration="{{duration}}"
   current="{{current}}" bindchange="swiperChange"
  >
        <block wx:for="{{imgUrls}}" wx:key="*this">
         <swiper-item bindtap="swiperClick">
          <image src="{{item}}" class-image="silde-images" style="width:100%;"></image>
         </swiper-item>
        
        </block>
  </swiper>

  <view class="nav">
    <scroll-view class="scroll-view_item" scroll-x="true" bindscroll="scroll" >

     <view class="nav-item">
        <view> <image src="../images/icon/fenlei.jpg" style="width:25px;height:23px;"></image></view>
        <view>菜谱分类</view>
     </view>
       <view class="nav-item" bindtap="videoplayer">
        <view> <image src="../images/icon/shipin.jpg" style="width:25px;height:23px;"></image></view>
        <view>视频</view>
     </view>
      <view class="nav-item">
        <view> <image src="../images/icon/meishi.jpg" style="width:25px;height:23px;"></image></view>
        <view>美食养生</view>
     </view>
     <view class="nav-item">
        <view> <image src="../images/icon/shangou.jpg" style="width:25px;height:23px;"></image></view>
        <view>闪购</view>
     </view>
     <view class="nav-item" bindtap="cameare">
        <view> <image src="../images/icon/paizhao.png" style="width:25px;height:23px;"></image></view>
        <view>点击拍照</view>
     </view>
      <view class="nav-item" bindtap="weather">
        <view> <image src="../images/icon/weather.png" style="width:25px;height:23px;"></image></view>
        <view>查看天气</view>
      </view>
     <view class="nav-item" bindtap="photos">
        <view> <image src="../images/icon/photos.png" style="width:25px;height:23px;"></image></view>
        <view>相册选择</view>
     </view>
     <view class="nav-item" bindtap="downloada">
        <view> <image src="../images/icon/downloada.png" style="width:25px;height:23px;"></image></view>
        <view>菜谱视频列表</view>
     </view>
     <view class="nav-item" bindtap="shangchuangvideo">
        <view> <image src="../images/upload-video.png" style="width:25px;height:23px;"></image></view>
        <view>视频上传</view>
     </view>
   </scroll-view>
  </view>
  <view class="hr"></view>
  <view class="head">
     <view>香哈头条</view>
     <view class="right"><image src="../images/more.png" style="width:19px;height:18px;"></image></view>
  </view>
  <import src="../template/template" />
  <view class="list">
    <template is="cooks" data="{{array}}"/>
  </view>
</view>

cook.js

// pages/cook/cook.js
Page({
  data:{
    in:true,
    autoplay:true,
    interval:5000,
    duration:1000,
    current: 0,
    imgUrls:["../images/haibao/haibao-1.jpg","../images/haibao/haibao-2.jpg","../images/haibao/haibao-3.jpg"],
    array:[]
  },
  intervalChange: function (e) {//自动切换时间间隔
    this.setData({
        interval: e.detail.value
    })
},
durationChange: function (e) {//滑动动画时长
    duration: e.detail.value
},
changeIndicatorDots: function (e) {//是否显示小圆圈
    this.setData({
        dotsBoll: !this.data.dotsBoll
    })
},
changeAutoplay: function (e) {//是否自动播放
    this.setData({
        autoplay: !this.data.autoplay
    })
},
swipclick: function (e) {//点击图片触发事件
    console.log(this.data.imageUrls[this.data.current]);
},
bindchange:function(e){//轮播图发生改变
    this.setData({
        current:e.detail.current
    })
},
  onLoad:function(options){
    var array = this.initData();
    this.setData({array:array});
  },
   initData:function(){
    var array = [];
    var object1 = new Object();
    object1.img = '../images/list/food-1.jpg';
    object1.title='爱心早餐';
    object1.type='健康养生';
    object1.liulan='20696浏览';
    object1.pinglun='7000评论';
    array[0] = object1;

    var object2 = new Object();
    object2.img = '../images/list/food-2.jpg';
    object2.title='困了只想喝咖啡';
    object2.type='家庭医生在线';
    object2.liulan='29628浏览';
    object2.pinglun='10万+评论';
    array[1] = object2;

    var object3 = new Object();
    object3.img = '../images/list/food-3.jpg';
    object3.title='吃大龙虾吗？';
    object3.type='家庭医生在线';
    object3.liulan='19585浏览';
    object3.pinglun='100评论';
    array[2] = object3;

    var object4 = new Object();
    object4.img = '../images/list/food-4.jpg';
    object4.title='搜狐新闻，手机用久了';
    object4.type='广告';
    object4.liulan='4688浏览';
    object4.pinglun='2000评论';
    array[3] = object4;

    var object5 = new Object();
    object5.img = '../images/list/food-5.jpg';
    object5.title='小娃娃中餐';
    object5.type='家庭医生在线';
    object5.liulan='29628浏览';
    object5.pinglun='1300评论';
    array[4] = object5;

    return array;
  },
  aixing: function (e) {

    wx.redirectTo({
      url: '../cook-1/cook-1'
    })
    /*wx.switchTab({
      url: '../headline/headline'
    })*/
  },
  videoplayer: function(e){
    wx.navigateTo({
      url: '../shipingplayer/shipingplayer' 
  })
},
cameare: function(e){
  wx.navigateTo({
    url: '../cameare/cameare' 
})
},
weather: function(e){
  wx.navigateTo({
    url: '../weather/weather' 
})
},
photos: function(e){
  wx.navigateTo({
    url: '../photos/photos' 
})
},
downloada: function(){
  wx.navigateTo({
    url: '../downloadvideo/downloadvideo' 
})
},
shangchuangvideo: function(){
  wx.navigateTo({
    url: '../shangchuangvideo/shangchaungvideo' 
})
},
swiperChange:function(e){
    this.setData({
     current: e.detail.current
    })
},
swiperClick:function(e){
 
  var me = this.data.current;
  
  if(me==0){
    wx.navigateTo({
      url: '../morning/morning';
  })
  }
   if(me==1){
    wx.navigateTo({
      url: '../lunch/lunch' 
  })
  console.log(me)
  }
  if(me==2){
    wx.navigateTo({
      url: '../dinner/dinner' 
  })
  console.log(me)
  }
},
})

cook.wxss

.swiper{
    width:100%;
    height:180px;
}
.silde-images{
    width:100%;
    height:180px;
}
.nav{
  display: flex;
  flex-direction: row;
  text-align: center;
}
.nav-item{
  margin-top:20px;
  font-size: 12px; 
  display: inline-block;
  width: 25%;
  height: 100rpx;

}
.hr{
    height: 5px;
    background-color: #cccccc;
    margin-top:15px;
    opacity: 0.5; 
}
.head{
    display: flex;
    flex-direction: row;
    margin: 10px;
    font-size: 13px;
    color: #999999;
}
.right{
    position: absolute;
    right: 10px;
    color: #cccccc;
}
.hr2{
    height: 2px;
    background-color: #cccccc;
    opacity: 0.2;  
}
.item{
    display: flex;
    flex-direction: row;
    margin-left: 10px;
    margin-bottom:5px; 
    margin-top:5px;
}
.desc{
    margin-left: 20px;
    line-height: 30px;
}
.title{
    font-weight: bold;
}
.count{
    display: flex;
    flex-direction: row;
    font-size: 12px;
    color: #999999;
}
.liulan{
    position: absolute;
    right: 70px;
}
.pinglun{
    position: absolute;
    right: 10px;
}
  .scroll-view_item{
    white-space: nowrap;
  }

二、头条模块

由于跟学做菜模块类似，此处将不展示代码

三、美食圈

注：此模块主要是八大菜谱的显示

food.wxml

<view style="text-align: center;">
  <view>{{year}}</view>
  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
    <picker-view-column>
      <view wx:for="{{years}}" style="line-height: 50px;">{{item}}</view>
    </picker-view-column>
  </picker-view>
</view>

food.js

// pages/food/food.js
Page({
  data:{
    array: ['鲁菜', '川菜', '粤菜', '苏菜','闽菜','浙菜','湘菜','徽菜'],
    index: 0,
    years: ['鲁菜', '川菜', '粤菜', '闽菜','苏菜','浙菜','湘菜','徽菜'],
    year: '川菜'
  },
  bindChange: function (e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
    })
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

food.wxss

/* pages/food/food.wxss */
.section__title{
  font-size: 30px;
  margin-left: 80px;
}
.picker{
  margin-top: 10px;

   font-size: 18px;
}

四、消息模块

message.wxml

<!--pages/message/message.wxml-->
<view class="container log-list">
  <view class="content" hover-class="none" hover-stop-propagation="false">
    <button plain open-type='contact'> 
    <view class="item" hover-class="none" hover-stop-propagation="false">
        <image class="" src="../../images/xt01.png"></image>
        <view class="info" hover-class="none" hover-stop-propagation="false">
          <view class="top" hover-class="none" hover-stop-propagation="false">客服通知</view>
          <view class="bottom" hover-class="none" hover-stop-propagation="false">
            小子圣诞节大结局跟设计稿改数据风骨霸刀分接口搞不定共和国的
          </view>
        </view>
        <view class="time" hover-class="none" hover-stop-propagation="false">2020-11-04</view>
    </view>
      </button>
    <view class="item" hover-class="none" hover-stop-propagation="false" wx:for="{{list}}" data-state='{{item.state}}' bindtap='toDetail'>
      <image class="" src="{{item.url}}"></image>
      <view class="info" hover-class="none" hover-stop-propagation="false">
        <view class="top" hover-class="none" hover-stop-propagation="false">{{item.title}}</view>
        <view class="bottom" hover-class="none" hover-stop-propagation="false">
          {{item.content}}
        </view>
      </view>
      <view class="time" hover-class="none" hover-stop-propagation="false">2020-11-04</view>
    </view>
  </view>
</view>

message.js

const util = require('../../utils/util.js')
Page({
  data: {
    logs: [],
    list :[
    {title:"饭店通知",
    content:'今年来无锡市三国城明德饭店享受95折优惠！！！',
    url:'../../images/tz01.png',
    state:1
  },
  {title:"钱包通知",
  content:'您今日已在学校食堂使用58.00元，您今日已超额.......欢迎访问个人博客：https://zhangxujun-123.github.io/',
  url:'../../images/qb01.png',
  state:2
},
    ]
  },
  toDetail(e) {
    let state = e.currentTarget.dataset.state
    if (state == 1 ) {
      wx.navigateTo({
        url: '../../pages/ptInfo/ptInfo',
        success: (result)=>{
          
        },
        fail: ()=>{},
        complete: ()=>{}
      });
    } else {
      wx.navigateTo({
        url: '../msg/msg',
        success: (result)=>{
          
        },
        fail: ()=>{},
        complete: ()=>{}
      });
    }
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })
  }
})

message.wxss

.log-list {
  padding: 15rpx 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
}
.log-list button {
  outline: none;
  background: transparent;
  margin: 0;
  padding: 0;
  text-align: left;
  line-height: 100%;
  border: none;
}
.log-list .item {
  background-color: #fff;
  width: 100%;
  height: 155rpx;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  display: flex;
  align-items: center;
  margin-bottom: 13rpx;
  box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(159, 186, 207, 0.1);
  border-radius: 10rpx;
  position: relative;
}
.log-list .item image {
  width: 94rpx;
  height: 94rpx;
}
.log-list .item .time {
  position: absolute;
  right: 30rpx;
  top: 26rpx;
  font-size: 22rpx;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: #959595;
}
.log-list .item .info {
  margin-left: 16rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  overflow: hidden;
  height: 100%;
}
.log-list .item .info .top {
  font-size: 32rpx;
  font-family: PingFang-SC-Regular;
  font-weight: bold;
  color: #000000;
}
.log-list .item .info .bottom {
  font-size: 28rpx;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: #666666;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

五、登录模块

login.wxml

<view class="content">
  <view class="account">
    <view class="title">账号</view>
    <view class="num">
      <input bindblur="accountInput" placeholder="用户名/邮箱/手机号" placeholder-style="color:#999999;"/>
    </view>
  </view>
  <view class="hr"></view>
   <view class="account">
      <view class="title">密码</view>
      <view class="num">
       
          <input password="{{passwordType}}"  bindinput="passwordInput" placeholder="请输入6位字符密码"  placeholder-style="color:#999999;" />
      </view>
      <view class="see">
          <image bindtap='eyeStatus' src='{{defaultType? "../images/see2.jpg": "../images/see1.jpg"}}' style="width:42px;height:30px;" ></image>
      </view>
  </view>
  <view class="hr"></view>
 <button class="btn" type="{{btnstate}}" bindtap="login">登录</button>
  <view class="operate">
     <view><navigator url="../mobile/mobile">手机快速注册</navigator></view>
     <view><navigator url="../company/company">企业用户注册</navigator></view>
     <view bindtap="mimaforget"><navigator url="">找回密码</navigator></view>
  </view>
  <view class="login">
    <view><image src="../images/23.gif" style="width:70px;height:98px;"></image></view>
    <view><image src="../images/25.gif" style="width:70px;height:98px;"></image></view>
  </view>
</view>

login.js

Page({
  data:{
    disabled:true,
    btnstate:"default",
    phone: '',
    password: '',
    defaultType: true,
    passwordType: true,
  }, 
  //defaultType：眼睛状态   passwordType：密码可见与否状态
  eyeStatus: function(){
    this.data.defaultType= !this.data.defaultType
    this.data.passwordType= !this.data.passwordType
    this.setData({
      defaultType: this.data.defaultType,
      passwordType: this.data.passwordType
  })
  },
 
  // 获取输入账号
  accountInput: function (e) {
    this.setData({
    phone: e.detail.value
    })
    var phone = this.data.phone;
    console.log(phone);
    if(phone != ''){
       this.setData({disabled:false,btnstate:"primary",account:phone});
    }else{
       this.setData({disabled:true,btnstate:"default"});
    }
  },
  // 获取输入密码
  passwordInput: function (a) {
      this.setData({
      password: a.detail.value
    })
  },
  // 登录
  login: function () {
if (this.data.phone == "" || this.data.password == "") {
  wx.showToast({
  title: '用户名和密码不能为空',
  icon: 'none',   
  duration: 2000 
  })  
  } else if(this.data.phone=="admin"&&this.data.password=="123456") {  
    // 这里修改成跳转的页面
    wx.showToast({
      title: '登录成功',
      icon: 'success',
      duration: 2000,
      success:function(){
        wx.navigateTo({
        url: '../successuser/successuser' 
    }) 
  } 
  })
    }else{  
      wx.showToast({
        title: '用户名或者密码错误，3次后即将锁定账户', 
        icon: 'none',
        duration: 2000
      })  
    }
  } ,
  
  mimaforget: function (e) {

    wx.redirectTo({
      url: '../forgertpassword/forgertpassword'
    })
    
    /*wx.switchTab({
      url: '../headline/headline'
    })*/
  },
 /* login: function () {
    wx.redirectTo({
      url: '../successuser/successuser'
    })
  }*/
/*  pwdBlur:function(e){
      var password = e.detail.value;
      if(password != ''){
         this.setData({password:password});
      }
  }*/
})

login.wxss

.content{
  margin-top: 40px;
}
.account{
   display: flex;
   flex-direction: row;
   padding-left: 20px;
   padding-top: 20px;
   padding-bottom: 10px;
   width: 90%;
}
.title{
   margin-right: 30px;
   width: 50px;
   font-weight: bold;
}
.hr{
  border: 1px solid #cccccc;
  opacity: 0.2;
  width: 90%;
  margin: 0 auto;
}
.see{
  position: absolute;
  right: 20px;
}
.btn{
  width: 90%;
  margin-top:40px;
  color: #999999;
}
.operate{
   display: flex;
   flex-direction: row;
}
.operate view{
  margin: 0 auto;
  margin-top:40px;
  font-size: 14px;
  color: #333333;
}
.login{
  display: flex;
  flex-direction: row;
  margin-top:15px;
}
.login view{
  margin: 0 auto;
}

六登录测试

输入正确用户名和错误密码

在这里插入图片描述

输入正确登录成功

在这里插入图片描述

successuser.wxml

<view class="container">
  <view class="my-details">
    <image class="img" src="../../images/tb04.png"></image>
    <view class="details">
      <view class="left">
        <image class="head" src="../../images/tx04.png"></image>
        <view class="name">
          <view>admin <test catchtap="Invitation">会员用户</test></view>
          <view>1245846114987</view>
        </view>
      </view>
      <image class="arrIcon" src="../../images/xy08.png"></image>
    </view>
  </view>

  <view class="money" bindtap="pageTo" data-url="../withdraw/withdraw">
    <view>
      <test>¥ 60.00</test>
      <test>已使用</test>
    </view>
    <view></view>
    <view>
      <test>¥ 88.00</test>
      <test>总金额</test>
    </view>
  </view>

  <view class="ul">
    <view class="li" >
      <view class="left">
        <image src="../../images/td01.png" mode="widthFix" style="width:20px;"></image>
        <text>我的朋友</text>
      </view>
      <image class="arrIcon" src="../../images/zy01.png"></image>
    </view>
    <view class="li" >
      <view class="left">
        <image src="../../images/sc10.png" mode="widthFix" style="width:20px;"></image>
        <text>我的点餐</text>
      </view>
      <image class="arrIcon" src="../../images/zy01.png"></image>
    </view>
    <view class="li"  bindtap="pageTo" data-url="../withdraw/withdraw">
      <view class="left">
        <image src="../../images/yj01.png" mode="widthFix" style="width:20px;"></image>
        <text>添加银行卡</text>
      </view>
      <image class="arrIcon" src="../../images/zy01.png"></image>
    </view>
    <view class="li" >
      <view class="left">
        <image src="../../images/bz01.png" mode="widthFix" style="width:20px;"></image>
        <text>帮助中心</text>
      </view>
      <image class="arrIcon" src="../../images/zy01.png"></image>
    </view>
    <view class="li">
      <view class="left">
        <image src="../../images/gy01.png" mode="widthFix" style="width:20px;"></image>
        <text>关于我们</text>
      </view>
      <image class="arrIcon" src="../../images/zy01.png"></image>
    </view>
  </view>

  <view class="proup" wx:if="{{isProup}}">
    <view class="box">
      <view class="Exhibition">
        <image src="../../images/1558148062.png"></image>
        <view class="white"></view>
        <view class="text">邀请码：123456</view>
        <button plain class="btn">分享</button>
      </view>
      <image class="errIcon" src="../../images/gb01.png" bindtap="Invitation"></image>
    </view>
  </view>
</view>

successuser.js

// pages/my/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isProup: false
  },

  pageTo({currentTarget: {dataset}}){
    // console.log(dataset);
    wx.navigateTo({
      url: dataset.url
    })
  },
  Invitation(){
    this.setData({
      isProup: !this.data.isProup
    })
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

success.wxss

.container {
  min-height: 100vh;
  background-color: #F7F8F8
}

.container .my-details {
  position: relative;
  height: 427rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9
}

.container .my-details .img {
  width: 100%;
  height: 427rpx;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0
}

.container .my-details .details {
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  width: 100%
}

.container .my-details .details .left {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.container .my-details .details .left .head {
  width: 110rpx;
  height: 110rpx;
  margin-right: 15rpx
}

.container .my-details .details .left .name view:first-child {
  font-size: 34rpx;
  font-family: PingFang-SC-Medium;
  font-weight: bold;
  color: #FFFFFF
}

.container .my-details .details .left .name view:first-child test {
  display: inline-block;
  width: 100rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  border-radius: 20rpx;
  background-color: #01AF7E;
  font-size: 25rpx
}

.container .my-details .details .left .name view:last-child {
  font-size: 28rpx;
  font-family: PingFang-SC-Medium;
  color: #FFFFFF
}

.container .my-details .details .arrIcon {
  width: 15rpx;
  height: 20rpx
}

.container .money {
  position: relative;
  z-index: 10;
  width: 710rpx;
  margin: -92rpx auto 0;
  height: 208rpx;
  background-color: #fff;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center
}

.container .money view:first-child,
.container .money view:last-child {
  flex: 1;
  overflow: hidden
}

.container .money view:first-child test,
.container .money view:last-child test {
  display: block;
  text-align: center
}

.container .money view:first-child test:first-child,
.container .money view:last-child test:first-child {
  font-size: 40rpx;
  font-family: PingFang-SC-Medium;
  font-weight: bold;
  color: #FF2424
}

.container .money view:first-child test:last-child,
.container .money view:last-child test:last-child {
  font-size: 24rpx;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: #656362
}

.container .money view:nth-child(2) {
  width: 2rpx;
  height: 134rpx;
  background-color: #D4D4D4
}

.container .ul {
  width: 710rpx;
  margin: 33rpx auto 0;
  background-color: #fff;
  border-radius: 10rpx
}

.container .ul .li {
  height: 110rpx;
  padding: 0 35rpx;
  border-bottom: 1rpx solid #E4E4E4;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.container .ul .li .left {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: #000000
}

.container .ul .li .left image {
  margin-right: 15rpx
}

.container .ul .li image.arrIcon {
  width: 19rpx;
  height: 31rpx
}

.container .ul .li:last-child {
  border: none
}

.container .proup {
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center
}

.container .proup .box {
  text-align: center
}

.container .proup .box image.errIcon {
  width: 56rpx;
  height: 56rpx;
  margin-top: 30rpx
}

.container .proup .box .Exhibition {
  background-color: #fff;
  width: 590rpx;
  height: 694rpx;
  border-radius: 10rpx;
  text-align: center
}

.container .proup .box .Exhibition image {
  width: 373rpx;
  height: 373rpx;
  margin-top: 40rpx
}

.container .proup .box .Exhibition .white {
  width: 407rpx;
  height: 36rpx;
  background-color: #EEEEEE;
  border-radius: 50%;
  margin: 0 auto
}

.container .proup .box .Exhibition .text {
  font-size: 36rpx;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: #383838;
  margin-top: 30rpx
}

.container .proup .box .Exhibition .btn {
  width: 300rpx;
  height: 84rpx;
  line-height: 84rpx;
  background: linear-gradient(-90deg, #38c6a0 0%, #6de0c3 100%);
  border-radius: 42rpx;
  font-size: 36rpx;
  font-family: PingFang-SC-Regular;
  font-weight: bold;
  color: #FFFFFF;
  margin: 40rpx auto 0;
  border: none
}

七、添加银行卡页面

在这里插入图片描述

withdraw.wxml

<view class="container">

  <view class="my-details">
    <image class="img" src="../../images/bg.png"></image>
    <view class="details" >
      <view class="balance">
        <text>余额</text>
        <view>
          <image src="../../images/gc01.png"></image>
          <view class="text">提现需要到银行卡</view>
        </view>

      </view>
      <view class="withdrawal">
         <test>￥1000.12</test>
         <!-- <button plain bindtap="cashTap">提现</button> -->
      </view>
    </view>
  </view>

  <view class="ul">
    <view class="li" bindtap="pageTo" data-url="../myBankCard/myBankCard">
      <view class="left">
        <image src="../../images/yhk01.png" mode="widthFix" style="width:25px;"></image>
        <text>账户充值</text>
      </view>
      <view class="right">
        <image class="arrIcon" src="../../images/zy01.png"></image>
      </view>
    </view>
    <view class="li" >
      <view class="left">
        <image src="../../images/qianbao.png" mode="widthFix" style="width:25px;"></image>
        <text>总余额</text>
      </view>
      <view class="right">
        <text>¥ 6000.00</text>
        <image class="arrIcon" src="../../images/zy01.png"></image>
      </view>
    </view>
    <view class="li">
      <view class="left">
        <image src="../../images/tx01.png" mode="widthFix" style="width:25px;"></image>
        <text>已提现</text>
      </view>
      <view class="right">
        <text>¥ 600.00</text>
        <image class="arrIcon" src="../../images/zy01.png"></image>
      </view>
    </view>
  </view>

  <view class="proup" wx:if="{{isProup}}">
    <view class="box">
      <view class="Exhibition">
        <image src="../../images/ts01.png"></image>
        <view class="text">提现规则</view>
        <view class="richtext">
          <view>1.可提现金额最少为2000元</view>
          <view>2.提现时间：每月10/20/30号；</view>
          <view> 3.提现前提必须实名认证并绑定银行卡</view>
        </view>
      </view>
      <image class="errIcon" src="../../images/gb01.png" bindtap="Invitation"></image>
    </view>
  </view>
</view>

withdraw.js


const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isProup: false,
    height: app.globalData.height
  },

  pageTo({currentTarget: {dataset}}){
    // console.log(dataset);
    wx.navigateTo({
      url: dataset.url
    })
  },
  Invitation(){
    this.setData({
      isProup: !this.data.isProup
    })
  },
  goback(){
    wx.navigateBack()
  },
  cashTap(){
    wx.navigateTo({ url: '../drawMoney/drawMoney' });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

withdraw.wxss

.container {
  min-height: 100vh;
  background-color: #F7F8F8
}

.container .tabs {
  position: absolute;
  z-index: 999;
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.container .tabs .title {
  text-align: center;
  font-size: 36rpx;
  font-family: PingFang-SC-Regular;
  font-weight: bold;
  color: #fff;
  flex: 1;
  height: 88rpx;
  line-height: 88rpx
}

.container .tabs image {
  width: 50rpx;
  height: 50rpx;
  margin-left: 20rpx
}

.container .tabs .white {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx
}

.container .my-details {
  position: relative;
  height: 400rpx;
  z-index: 9
}

.container .my-details .img {
  width: 100%;
  height: 400rpx;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0
}

.container .my-details .details {
  padding-top: 150rpx;
  position: absolute;
  width: 100%
}

.container .my-details .details .balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 39rpx
}

.container .my-details .details .balance text {
  font-size: 32rpx;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: #FFFFFF
}

.container .my-details .details .balance image {
  width: 38rpx;
  height: 38rpx;
  margin-right: 30rpx
}

.container .my-details .details .balance view {
  text-align: center
}

.container .my-details .details .balance view .text {
  font-size: 24rpx;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: #fff;
  margin-top: 10rpx
}

.container .my-details .details .withdrawal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 36rpx;
  margin-top: 50rpx
}

.container .my-details .details .withdrawal test {
  font-size: 60rpx;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: #FFFFFF
}

.container .my-details .details .withdrawal button {
  width: 226rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #FFFFFF;
  border-radius: 30rpx;
  font-size: 30rpx;
  font-family: Adobe Heiti Std R;
  font-weight: normal;
  color: #14AE85;
  border: none;
  margin: 0
}

.container .ul {
  margin-top: 30rpx;
  background-color: #fff;
  padding: 0 30rpx
}

.container .ul .li {
  height: 110rpx;
  border-bottom: 1rpx solid #E4E4E4;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.container .ul .li .left {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: #000000
}

.container .ul .li .left image {
  margin-right: 25rpx
}

.container .ul .li .right {
  font-size: 32rpx;
  font-family: PingFang-SC-Medium;
  font-weight: bold;
  color: #FF2626;
  display: flex;
  align-items: center
}

.container .ul .li .right image.arrIcon {
  width: 19rpx;
  height: 31rpx;
  margin-left: 20rpx
}

.container .ul .li:last-child {
  border: none
}

.container .proup {
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center
}

.container .proup .box {
  text-align: center
}

.container .proup .box image.errIcon {
  width: 56rpx;
  height: 56rpx;
  margin-top: 30rpx
}

.container .proup .box .Exhibition {
  background-color: #fff;
  width: 550rpx;
  height: 531rpx;
  border-radius: 10rpx;
  text-align: center
}

.container .proup .box .Exhibition image {
  width: 281rpx;
  height: 180rpx;
  margin-top: 74rpx
}

.container .proup .box .Exhibition .text {
  font-size: 32rpx;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: #000;
  margin-top: 30rpx
}

.container .proup .box .Exhibition .richtext {
  text-align: left;
  font-size: 28rpx;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: #383838;
  padding: 0 20rpx;
  margin-top: 20rpx;
  line-height: 42rpx
}

八、银行卡账户充值

在这里插入图片描述

mybackcard.wxml

<view class="container">
  <!-- 银行卡列表 -->
  <view class="bankList">
    <view class="items" wx:for="{{2}}">
      <van-swipe-cell right-width="{{ 70 }}" async-close bind:close="onClose">
        <view class="box"> 
          <image src="../../images/kh01.png"></image>
          <view class="bank">
            <view>开户银行：邮政银行（无锡市)</view>
            <view>银行账号：**** **** **** **** **** 5613</view>
            <view>开户人:zhangs</view>
          </view>
        </view>
        <view slot="right" class="right">
          <image src="../../images/sc12.png" slot="right"></image>
        </view>
      </van-swipe-cell>
    </view>
  </view>
  <!-- 添加银行卡 -->
  <view class="addBank">
    <view bindtap="pageTo">添加银行卡</view>
  </view>
</view>

mybackcard.js


Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  onClose(event) {
    const { position, instance } = event.detail;
    switch (position) {
      case 'left':
      case 'cell':
        instance.close();
        break;
      case 'right':
        wx.showModal({
          content: '确定删除吗？',
          success(res) {
            if (res.confirm) {
              console.log('用户点击确定')
              instance.close();
            } else if (res.cancel) {
              console.log('用户点击取消')
              instance.close();
            }
          }
        })
        break;
    }
  },
  pageTo({currentTarget: {dataset}}){
    // console.log(dataset);
    wx.navigateTo({
      url: dataset.url
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

mybackcard.wxss

.container {
  min-height: 100vh;
  background-color: #F7F8F8;
  padding-bottom: 104rpx
}

.container .bankList {
  padding: 15rpx 15rpx 0
}

.container .bankList .items {
  margin-bottom: 15rpx;
  padding: 22rpx 16rpx;
  background: #Fff;
  box-shadow: 0px 4rpx 6rpx 0px rgba(183, 182, 182, 0.06);
  border-radius: 10rpx
}

.container .bankList .items .box {
  height: 234rpx;
  border-radius: 10rpx;
  position: relative
}

.container .bankList .items .box image {
  position: absolute;
  width: 100%;
  height: 100%
}

.container .bankList .items .box .bank {
  position: absolute;
  z-index: 2;
  padding-left: 30rpx
}

.container .bankList .items .box .bank view {
  font-size: 30rpx;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: #fefefe
}

.container .bankList .items .box .bank view:first-child {
  margin-top: 30rpx;
  margin-bottom: 30rpx
}

.container .bankList .items .box .bank view:last-child {
  margin-top: 10rpx
}

.container .bankList .items .right {
  width: 140rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

.container .bankList .items .right image {
  width: 71rpx;
  height: 71rpx
}

.container .addBank {
  background-color: #Fff;
  padding: 10rpx 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0
}

.container .addBank view {
  width: 626rpx;
  height: 84rpx;
  line-height: 84rpx;
  background: linear-gradient(-90deg, #38c6a0 0%, #6de0c3 100%);
  border-radius: 42rpx;
  font-size: 36rpx;
  font-family: PingFang-SC-Regular;
  font-weight: bold;
  color: #FFFFFF;
  margin: 0 auto;
  text-align: center
}

九、点击拍照功能

在这里插入图片描述

cameara.wxml

<view class="page-body">
  <view class="page-body-wrapper">
    <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
    <view class="btn-area">
      <button type="primary" bindtap="takePhoto">拍照</button>
    </view>
    <view class="btn-area">
      <button type="primary" bindtap="startRecord">开始录像</button>
    </view>
    <view class="btn-area">
      <button type="primary" bindtap="stopRecord">结束录像</button>
    </view>
    <view class="preview-tips">预览</view>
    <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
    <video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
  </view>
</view>

cameara.js

Page({
  onLoad() {
    this.ctx = wx.createCameraContext()
  },
  takePhoto() {
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  startRecord() {
    this.ctx.startRecord({
      success: (res) => {
        console.log('startRecord')
      }
    })
  },
  stopRecord() {
    this.ctx.stopRecord({
      success: (res) => {
        this.setData({
          src: res.tempThumbPath,
          videoSrc: res.tempVideoPath
        })
      }
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

camera.wxss

/* pages/cameare/cameare.wxss */
.preview-tips {
  margin: 20rpx 0;  
}
.video {
  margin: 50px auto;
  width: 100%;
  height: 300px;
}
.btn-area{
  margin: 30rpx auto;
}
.preview-tips{
  
  margin-left: 42%;
}

十、视频列表的播放与下载

dowonload.wxml

<!--pages/downloadvideo/downloadvideo.wxml-->
<view class="mainContent">
    <view wx:for="{{videoList}}" wx:key="{{index}}" class="mainList">
        <view class="playerInfo" data-src="{{item.videoUrl}}" wx:if="{{current_id && current_id == item.id}}">
            <view class="video">
                <video class="videoContent" id="videoId{{item.id}}" show-center-play-btn="true" autoplay="true"
                 src="{{item.videoUrl}}" object-fit="fill" bindfullscreenchange="fullscreenchange"></video>
            </view>
        </view>
        <view class="playerInfo" data-src="{{item.videoUrl}}" wx:if="{{current_id =='' || current_id != item.id}}">
            <view class="video">
                <image class="playImg" src="../images/play.png" mode="aspectFill" bindtap="videoPlay" id="{{item.id}}" data-index="videoId{{item.id}}"/>
                <image class="videoContent" src="{{item.poster}}" mode="aspectFill" bindtap="videoPlay" id="{{item.id}}" data-index="videoId{{item.id}}"/>
            </view>
        </view>
        <view class="actionBtn">
            <image class="img" src="../images/upload.png" data-url="{{item.videoUrl}}" mode="aspectFit" bindtap="toUploadVideo"></image>
        </view>
    </view>
</view>

download.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    current_id:'',//当前播放视频id
    videoList:[
      {id:"1","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"},
      {id:"2","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"},
      {id:"3","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"},
      {id:"4","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"}
    
    ]

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  //视频列表点击事件
  videoPlay:function(e){
    console.log(e)
    var id= e.currentTarget.dataset.index
    var currentId=e.currentTarget.id
    //没有播放时播放视频
    if(!this.data.current_id){
      this.setData({
        current_id: currentId
      })
      var videoContext = wx.createVideoContext(id)
      videoContext.play()
      
    }else{//有播放时先将prev暂停，再播放当前点击的current
      if(this.data.current_id != currentId){
        var preVideoID='videoId'+this.data.current_id
        var videoContextPrev = wx.createVideoContext(preVideoID)
        videoContextPrev.pause()
      }
      this.setData({
        current_id: currentId
      })
      var videoContext = wx.createVideoContext(id)
      videoContext.play()
    }
  },
  //点击下载视频并保存到
  toUploadVideo(e){
    console.log(wx.env)
    //wx.env.USER_DATA_PATH:微信小程序提供的本地用户文件目录
    wx.showLoading({
      title: '正在下载，请稍后',
      mask: true
    })
    var url = e.currentTarget.dataset.url
    let fileName = new Date().valueOf()
     //1.下载文件资源到本地
    wx.downloadFile({
      url: url,//下载资源的url
      filePath:wx.env.USER_DATA_PATH+'/'+fileName+'.mp4',//指定文件下载后存储的路径（本地路径）(filePath放开手机没问题，开发者工具报超限错误)
      name:'file',
      // header: {}, // 设置请求的 header
      // formData: {}, // HTTP 请求中其他额外的 form data
      success: function(res){
        console.log('downloadFile',res)
        wx.hideLoading()
        // success
        //2.保存视频到系统相册。支持mp4视频格式
        wx.saveVideoToPhotosAlbum({
          filePath: res.filePath,//视频文件路径，可以是临时文件路径也可以是永久文件路径（本地路径）
          success :function(ress) {
            wx.showToast({
              title: '下载成功',
              icon: 'success'
            })
            //删除临时文件
            var fileManager = wx.getFileSystemManager();//全局唯一的文件管理器
            fileManager.unlink({//删除
              filePath: wx.env.USER_DATA_PATH+'/'+fileName+'.mp4',
              success: function(resf) {
                console.log('unlink',resf)
              }
            })
          },
          fail (ress) {
            console.log('保存视频失败',ress)
            //未授权
            if(ress.errMsg == 'saveVideoToPhotosAlbum:fail auth deny'){
              wx.showModal({
                title: '提示',
                content: '需要您授权保存相册',
                showCancel: false,
                success: function(c) {
                  //调起客户端小程序设置界面，返回用户设置的操作结果。
                  wx.openSetting({
                    success: function(settingdata) {
                      if(settingdata.authSetting['scope.writePhotosAlbum']){
                        wx.showModal({
                          title: "提示",
                          content: "获取权限成功，再次点击下载即可保存",
                          showCancel: false
                        })
                      }else{
                        wx.showModal({
                          title: "提示",
                          content: "获取权限失败，将无法保存到相册哦",
                          showCancel: false
                        })
                      }
                    }
                  })
                }
              })
            }
          },
        })
      },
      fail: function(res) {
        // fail
        wx.hideLoading()
        console.log('下载失败',res)
      }
    })
  },
  //获取该小程序下已保存的本地缓存文件列表  并 删除
  handleSavedFileList(){
    //1.获取该小程序下已保存的本地缓存文件列表(小程序本地存储的文件列表)
    wx.getSavedFileList({
      success: function(res){
        console.log("getSavedFileList",res)
        //遍历小程序本地存储的文件列表
        res.fileList.forEach((val,key) =>{
          //2.删除存储的垃圾数据
          wx.removeSavedFile({
            filePath: val.filePath
          })
        })
      }
    })
  }
})

download.wxss

/* pages/downloadvideo/downloadvideo.wxss */
.mainContent{
  background: #ffffff;
  overflow: auto;
}
.mainList{
  width:100%;
  background: #ffffff;
  height: 416rpx;
}
.video{
  width:94%;
  height: 324rpx;
  margin-left: 20rpx;
  position: relative;
  text-align: center;
}
.videoContent{
  width:100%;
  height: 324rpx;
}
/*播放小图标*/
.playImg{
  position: absolute;
  top: 46%;
  left:46%;
  width:64rpx;
  height: 64rpx;
}
.actionBtn{
width: 100%;
margin-top: 10rpx;
}
.actionBtn .img{
  width:60rpx;
  height: 60rpx;
  margin-left: 20rpx;
}

十一、视频上传

shangshuanvideo.wxml

<!--pages/video/video.wxml-->
<view class="main">
    <view class="playerInfo">
        <view class="video" wx:if="{{clickFlag}}">
            <image class="videoContent" wx:if="{{poster}}" src="{{poster}}" mode="aspectFill" bindtap="chooseVideo"/>
            <view class="videoContent"  wx:else bindtap="chooseVideo" >
                <image class="playImg" src="../images/upload-video (1).png" mode="aspectFill"/>
            </view>
        </view>
        <view class="video" wx:else>
            <image class="videoContent" wx:if="{{poster}}" src="{{poster}}" mode="aspectFill"/>
            <view class="videoContent"  wx:else>
                <image class="playImg" src="../images/uploadVideo.png" mode="aspectFill"/>
            </view>
        </view>
    </view>
    <view class="footerbtn">
        <button type="default" style="width:40%;" bindtap = "chooseVideo" wx:if="{{clickFlag}}">上传视频</button>
        <button type="default" style="width:40%;color:#cccccc;" wx:else>上传视频</button>
        <button type="primary" style="width:40%;" bindtap = "saveVideo">保存</button>
    </view>
    <view class="videoUrlResult" wx:if="{{videoUrl}}" >
        <view class="title">上传的视频：</view>
        <!--autoplay="true" 视频自动播放-->
        <video class="videoContent" style="width: 90%;margin-left: 5%;margin-top: 20rpx;" 
               show-center-play-btn="true" src="{{videoUrl}}" object-fit="fill" 
               bindfullscreenchange="fullscreenchange">
        </video>
    </view>
</view>

shangchuanvideo.js


var app=getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    videoUrl:"",
    poster:"",
    clickFlag:true //防重复点击 
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },
  /**
   * 拍摄或选择视频并上传服务器
   */
  chooseVideo: function () {
    console.log("chooseVideo")
    this.setData({clickFlag: false})
 
    let that = this
    //1.拍摄视频或从手机相册中选择视频
    wx.chooseVideo({
      sourceType: ['album', 'camera'], // album 从相册选视频，camera 使用相机拍摄
      // maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒。最长支持60秒
      camera: 'back',//默认拉起的是前置或者后置摄像头，默认back
      compressed: true,//是否压缩所选择的视频文件
      success: function(res){
        //console.log(res)
        let tempFilePath = res.tempFilePath//选择定视频的临时文件路径（本地路径）
        let duration = res.duration //选定视频的时间长度
        let size = parseFloat(res.size/1024/1024).toFixed(1) //选定视频的数据量大小
        // let height = res.height //返回选定视频的高度
        // let width = res.width //返回选中视频的宽度
        that.data.duration = duration
        if(parseFloat(size) > 100){
          that.setData({
            clickFlag: true,
            duration: ''
          })
          let beyondSize = parseFloat(size) - 100
          wx.showToast({
            title: '上传的视频大小超限，超出'+beyondSize+'MB,请重新上传',
            //image: '',//自定义图标的本地路径，image的优先级高于icon
            icon:'none'
          })
        }else{
          //2.本地视频资源上传到服务器
          that.uploadFile(tempFilePath)
        }
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  /**
   * 将本地资源上传到服务器
   * 
   */
  uploadFile:function(tempFilePath){
    let that = this
    let third_session = wx.getStorageSync('third_session')
    wx.showLoading({
      title: '上传进度：0%',
      mask: true //是否显示透明蒙层，防止触摸穿透
    })
    const uploadTask = wx.uploadFile({
      //url: 'http://192.168.0.77:8083/upload/uploadVideo',//开发者服务器地址
      filePath:tempFilePath,//要上传文件资源的路径（本地路径）
      name:'file',//文件对应key,开发者在服务端可以通过这个 key 获取文件的二进制内容
      // header: {}, // 设置请求的 header
      formData: {
        third_session: third_session
      }, // HTTP 请求中其他额外的 form data
      success: function(res){
        console.log("uploadFile",res)
        // success
        let data = JSON.parse(res.data)
        wx.hideLoading()
        if(data.returnCode == 200){
          that.setData({
            videoUrl: data.videoUrl,
            poster: data.imgUrl,
            duration: that.data.duration,
            clickFlag:true
          })
          wx.showToast({
            title: '上传成功',
            icon: 'success'
          })
        }else{
          that.setData({
            videoUrl: '',
            poster: '',
            duration: '',
            clickFlag:true
          })
          wx.showToast({
            title: '上传失败',
            icon: 'none'
          })
        }
       
      },
      fail: function() {
        // fail
        wx.hideLoading()
        this.setData({
          videoUrl: '',
          poster: '',
          duration: '',
          clickFlag:true
        })
        wx.showToast({
          title: '上传失败',
          icon: 'none'
        })
      }
    })
    //监听上传进度变化事件
    uploadTask.onProgressUpdate((res) =>{
      wx.showLoading({
        title: '上传进度：'+res.progress+'%',
        mask: true //是否显示透明蒙层，防止触摸穿透
      })
      console.log("上传进度",res.progress)
      console.log("已经上传的数据长度，单位 Bytes:",res.totalBytesSent)
      console.log("预期需要上传的数据总长度，单位 Bytes:",res.totalBytesExpectedToSend)
    })
  },
  //保存数据库
  saveVideo(){
    //调用服务器保存视频信息接口
    
  }
})

shanchuanvideo.wxss

/* pages/shangchuangvideo/shangchaungvideo.wxss */
/* pages/video/video.wxss */
.main{
  width:100%;
}
.playerInfo{
  margin: 20rpx 20rpx 0 20rpx;
}
.video{
  border :2rpx solid #cccccc;
}
.videoContent{
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
  height: 324rpx;
  position: relative;
}
/*播放小图标*/
.playImg{
  position: absolute;
  top: 36%;
  left:46%;
  width:64rpx;
  height: 64rpx;
}
.footerbtn{
  display: flex;
  margin-top: 20rpx;
}
.button{
  width:40%;
}
.videoUrlResult{
  width: 100%;
  margin-top: 20rpx;
}
.videoUrlResult .title{ 
  font-size: 28rpx;
  font-weight: bold;
  color: red;
  margin-left: 20rpx;
}

十二、忘记密码

forgertpassword.wxml

<!--pages/forgertpassword/forgertpassword.wxml-->
<view class="nichen">
  找回密码
</view>
<view class="content">
  <view class="account">
       <view class="title">手机号:</view>
      <view class="num">
          <input bindinput="accountInput" placeholder="输入手机号" maxlength="11" placeholder-style="color:#999999;" />
      </view>
      <view class="see1">
          <button class="button" style="width:80px;height:30px">验证码</button>
      </view>
</view>
  <view class="hr"></view>
   <view class="account">
      <view class="title">新密码:</view>

      <view class="num">
          <input password='{{passwordType}}' placeholder="请输入密码" maxlength="11" placeholder-style="color:#999999;" />
      </view>
      <view class="see">
          <image src='{{defaultType? "../images/see2.jpg": "../images/see1.jpg"}}' style="width:42px;height:30px;" bindtap='eyeStatus'></image>
      </view>
  </view>
    <view class="hr"></view>
    <view class="account">
      <view class="title">确认新密码:</view>

      <view class="num">
          <input password='{{passwordType}}' placeholder="请输入密码" maxlength="11" placeholder-style="color:#999999;" />
      </view>
      <view class="see">
          <image src='{{defaultType? "../images/see2.jpg": "../images/see1.jpg"}}' style="width:42px;height:30px;"  bindtap='eyeStatus'></image>
      </view>
    </view>
  <view class="hr"></view>
  <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login">修改密码</button>
  
</view>

forgretpassword.js

// pages/forgertpassword/forgertpassword.js
Page({
  data:{
    disabled:true,
    btnstate:"default",
    account:"",   
    defaultType: true,
    passwordType: true
  },
  //defaultType：眼睛状态   passwordType：密码可见与否状态
  eyeStatus: function(){
    this.data.defaultType= !this.data.defaultType
    this.data.passwordType= !this.data.passwordType
    this.setData({
      defaultType: this.data.defaultType,
      passwordType: this.data.passwordType
  })
  },
  accountInput:function(e){
      var content = e.detail.value;
      console.log(content);
      if(content != ''){
         this.setData({disabled:false,btnstate:"primary",account:content});
      }else{
         this.setData({disabled:true,btnstate:"default"});
      }
  },
})

forgretpassword.wxss

/* pages/forgertpassword/forgertpassword.wxss */
.content{
  margin-top: 15px;
}
.account{
   display: flex;
   flex-direction: row;
   padding-left: 20px;
   padding-top: 20px;
   padding-bottom: 10px;
   width: 90%;
}
.title{
   margin-right: 30px;
   width: 120px;
   font-weight: bold;
}
.hr{
  border: 1px solid #cccccc;
  opacity: 0.2;
  width: 65%;
  float: right;
}
.see{
  position: absolute;
  right: 20px;
}
.btn{
  width: 90%;
  margin-top:40px;
  color: #999999;
}
.operate{
   display: flex;
   flex-direction: row;
}
.operate view{
  margin: 0 auto;
  margin-top:40px;
  font-size: 14px;
  color: #333333;
}
.login{
  display: flex;
  flex-direction: row;
  margin-top:15px;
}
.login view{
  margin: 0 auto;
}

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  padding: 1px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  line-height:20px;
  color: white;
}
.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
  color: rgb(88, 84, 84);
}


.nichen{
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

*** 注：部分功能就不写啦，完整代码之后有时间会上传到资源**

大佬勿喷，我记录了一下学习笔记

Zhang_Dream

关注

7
点赞
踩
18

收藏

觉得还不错? 一键收藏
8
评论
【学习笔记】大三集中实训做的一个微信小程序之点餐系统（静态页面不包含java后台逻辑）

点餐系统注：大三集中实训的时候由于没有什么经验，只实现了静态页面，但微信小程序开发文档里面所有的功能差不多都实现（视频的上传与下载以及登录等等）所以在这里记录自己的学习笔记导航栏底部导航栏分为学做菜、头条、美食圈、消息、我的3.项目结构运行成功截图学做菜早餐中餐晚餐头条消息登录学做菜cook.xml【这个模块使用了template模板】<view class="content"> <!-- <view class="img"&
复制链接

扫一扫