首页 > 小程序教程 > 微信小程序红色风格修改商家登录密码页面样式设计制作开发教程

微信小程序红色风格修改商家登录密码页面样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序红色风格修改商家登录密码页面样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/shopmanage/shoppwd.wxml-->
<view class="container">
 
   <view class="classname">
   <view class="tips">*新开通的商家初始密码为888888,账号名为您当前微信昵称,如果昵称包含表情请修改为不包含再登陆本平台即可视为改名成功,为了您的账号安全,请尽快修改登陆密码</view>

 <form bindsubmit="editpwd">        
         <view class="xing">新密码
           <input placeholder-class='placeholder'  placeholder='请输入新密码'  class="in" name='pwd' value="" />
         </view>
         <view class="xing">确认密码
           <input placeholder-class='placeholder'  placeholder='请确认密码'  class="in" name='repwd' value="" />
         </view>
<button type="" form-type="submit" hover-class='button-hover' class='su'>保存</button>
   </form>   
   </view>

</view> 
 
二、wxss样式文件代码如下:
/* pages/shopmanage/shoppwd.wxss */
.tit {
  height: 300rpx;
  width: 100%;
}

.container {
  padding: 0px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  font-family: '微软雅黑';
}

.classname {
  background: #f4f4f4;
  width: 100%;
  text-align: center;
  padding-bottom: 150rpx;
}

.jj {
  font-size: 24rpx;
  padding-top: 20rpx;
  font-family: "微软雅黑", "黑体";
  margin: 0 auto;
  color: #ccc;
  padding-bottom: 20rpx;
}

.xing {
  font-family: "微软雅黑", "黑体";
  height: 54rpx;
  width: 579rpx;
  border-radius: 10rpx;
  background: #fff;
  margin: 0 auto;
  text-align: left;
  line-height: 54rpx;
  font-size: 28rpx;
  padding: 10rpx;
  margin-top: 38rpx;
  padding-left: 30rpx;
}

.xi {
  font-family: "微软雅黑", "黑体";
  height: 200rpx;
  width: 579rpx;
  border-radius: 10rpx;
  background: #fff;
  margin: 0 auto;
  text-align: left;
  line-height: 54rpx;
  font-size: 28rpx;
  padding: 10rpx;
  margin-top: 38rpx;
  padding-left: 30rpx;
}

.placeholder {
  color: #ccc;
  font-size: 26rpx;
}

.in {
  float: right;
  width: 75%;
  padding-top: 0rpx;
  font-size: 28rpx;
  color: #000;
}

.i {
  float: right;
  width: 72%;
  height: 100%;
  padding-top: 12rpx;
  font-size: 28rpx;
  color: #000;
}

textarea {
  height: 100px;
}

.t {
  font-family: "微软雅黑", "黑体";
  width: 20%;
  height: 60rpx;
  /*background: #fff;*/
  margin-left: 57rpx;
  padding: 5rpx;
  line-height: 60rpx;
  margin-top: 40rpx;
  font-size: 28rpx;
  display: inline-block;
  border: 1px solid #ccc;
  float: left;
}

.su {
  width: 84%;
  color: #fff;
  height: 69rpx;
  line-height: 69rpx;
  font-size: 30rpx;
  font-family: "微软雅黑", "黑体";
  top: 103rpx;
  background: red;
}

button[type="primary"] {
  color: #000;
  background-color: #fff;
}
.shuoming{
  height: 50rpx;
font-size: 30rpx;
}
.label-1, .label-2{
    margin-bottom: 15px;
}
.label-1__text, .label-2__text {
    display: inline-block;
    vertical-align: middle;
}

.label-1__icon {
    position: relative;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    background: #fcfff4;
    border: 1px solid #ccc
}

.label-1__icon-checked {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    background: #d9002f;
}
.tips{
  text-align:center;
  color:red;
  font-size:35rpx;
  padding:0 60rpx;
}
三、js页面代码如下:
// pages/shopmanage/shoppwd.js
var app = getApp();
Page({

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },
  editpwd:function (e){
     var that=this; 
     var fdata=e.detail.value;
     if(fdata.pwd==fdata.repwd){
       wx.request({
         url: app.d.ceshiUrl + '/Api/Shangchang/editshoppwd',
         method: 'post',
         data: { 
           uid: app.globalData.userInfo.id,
           pwd: fdata.pwd
         },
         header: {
           'Content-Type': 'application/x-www-form-urlencoded'
         },
         success: function (res) {
           //--init data
           var status = res.data.status;
           if (status == 1) {
             wx.showToast({
               title: '修改成功',
             })
             setTimeout(function(){
               wx.navigateBack()
             },2500)
           } else {
             wx.showToast({
               title: res.data.err,
             })
           }
         },
         fail: function () {
           // fail
           wx.showToast({
             title: '网络异常!',
             duration: 30000
           });
         }
       })
     }else{
       wx.showToast({
         title: '密码不一致!',
       })
     }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

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

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

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

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

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

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

模板简介:该模板名称为【微信小程序红色风格修改商家登录密码页面样式设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 19,315次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-04
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信文章 单页式简历模板 自适应 微信素材 微信模板 微信图片 html5 微信公众平台 企业网站 响应式
您可能会喜欢的其他模板