微信小程序店铺立刻进驻申请填写信息页面样式设计制作开发教程

本文给大家带来的是微信小程序店铺立刻进驻申请填写信息页面样式设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="container">
 <image class="tit" src="{{guanggao}}"></image>
 
   <view class="classname">


  <form bindsubmit="reg">      
        <view class="xing">店铺名称：   
         <input placeholder-class='placeholder' placeholder='请输入店铺名称' class="in" name="shopname"/>
         </view>   

         <view class="xing">主营项目：
           <input placeholder-class='placeholder'  placeholder='请输入主营项目'  class="in" name='range' />
           </view>
         <view class="xing">联系人：
           <input placeholder-class='placeholder'  placeholder='请输入联系人'  class="in" name='linkman' />
           </view>

         <view class="xing">电话：
           <input placeholder-class='placeholder'  placeholder='请输入你的电话'  type='number' class="in" name='tel' />
           </view>

         <view class="xing">微信：
           <input placeholder-class='placeholder'  placeholder='请输入你的微信'  class="in" name='weixin' />
           </view>
 <view class="xi">店铺介绍：
           <textarea placeholder-class='placeholder'  placeholder='请简单介绍一下店铺'  class="i" name='digest'/>
           </view>
           <!--缩略图-->
          <view class="t">店铺logo↓</view>
          <view class="ii">(限制jpg、jpeg,像素：200*200 or 512*512)</view>
          <view class="page-body-info">
              <view class="kk">
                <block wx:if="{{logo}}">
                    <image src="{{logo}}" class="image" mode="aspectFit" bindtap="del" data-type="min"></image>
                </block>
                <block wx:else>
                  <view class="image-plus image-plus-nb" bindtap="chooselogo">
                    <image src="../../images/s.png" style="width:100%;height:100%"></image>
                  </view>
                </block>
              </view>
          </view>
          <!--end-->
 
      <view class="jj">请仔细填写联系方式，保证我们能尽快联系到你！</view>

<view class="shuoming">

<checkbox-group class="group" bindchange="checkboxChange">
    <view class="label-1" wx:for-items="{{checkboxItems}}">
        <label>
            <checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox>
            <view class="label-1__icon">
                <view class="label-1__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
            </view>
        </label>
        <text class="label-1__text">{{item.value}}</text><text class="label-2__text" style="color:#7171C6" bindtap="modalTap">【入驻申请协议】</text>
    </view>
</checkbox-group>


</view>


<button type="" form-type="submit" hover-class='button-hover' class='su'>立刻申请入驻</button>
   </form>   
   </view>

</view>

二、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;
}
.t{
  font-family: "微软雅黑", "黑体";
  width: 20%;
  height: 60rpx;
  margin-left: 57rpx;
  padding: 5rpx;
  line-height: 60rpx;
  margin-top: 40rpx;
  font-size: 28rpx;
  display: inline-block;
  border: 1px solid #ccc;
  float: left;
}
.ii{
margin-top:40rpx;
font-size:28rpx;
line-height:44rpx;
width:57%;
display:inline-block;
}
.image {
width:200rpx;
height:200rpx;
margin:10rpx 10rpx;

}
.page-body-info { 
  width: 100%;
  height: 200rpx;
}
.image-plus {
  width: 100%;
  height: 100%;
  /*border: 2rpx solid #D9D9D9;*/
  position: relative;
}
.kk{
width:200rpx;
height:200rpx;
margin:20rpx 10rpx;
display:inline-block;
}

三、js页面代码如下：

var app = getApp();
var common = require("../../utils/common.js");
Page({
  data: {
    checkboxItems: [
      { name: 'USA', value: '我已了解并阅读了' },
    ],
    content:'',
  },
  modalTap: function () {
    var that=this;
    wx.showModal({
      title: '免责声明',
      content:that.data.content,
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定')
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
  },
// 表单
  reg: function (e) {
    console.log(e.detail.value);
    var that=this;
    var formdata=e.detail.value;
    if (that.data.checkboxItems[0].checked==true){
      wx.request({
        url: app.d.ceshiUrl + '/Api/Applyshop/applysubmit',
        method: 'post',
        data: {
          user:app.globalData.userInfo.id,
          shopname: formdata.shopname,
          range: formdata.range,
          linkman: formdata.linkman,
          tel: formdata.tel,
          weixin: formdata.weixin,
          digest: formdata.digest,
          logo:that.data.uploadlogo
        },
        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(){

            },2000)
          } else {
            wx.showToast({
              title: res.data.message,
              duration:2000
            })
          }
        },
        fail: function () {
          wx.showToast({
            title: '网络异常！',
            duration: 30000
          });
        }
      })
    }else{
      wx.showToast({
        title: '请阅读入驻申请协议并同意！',
        duration: 2000
      });
    }
    
  },
  checkboxChange: function (e) {
    var checked = e.detail.value
    var changed = {}

  console.log(this.data.checkboxItems[0].name)
  if (checked.indexOf(this.data.checkboxItems[0].name) !== -1)
       {
    changed['checkboxItems[0].checked'] = true
      } else {
    changed['checkboxItems[0].checked'] = false
      }
    this.setData(changed)
    console.log(changed)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      var that=this;
      that.loadinfo();
  },
  loadinfo: function(){
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Applyshop/applysubmitinfo',
      method: 'post',
      data: {},
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        //--init data
        var status = res.data.status;
        if (status == 1) {
           console.log(res.data.respondData);
           that.setData({
             guanggao:res.data.respondData.guanggao,
             content: res.data.respondData.content,
           })
        } else {
          wx.showToast({
            title: res.data.message,
          })
        }
      },
      fail: function () {
        // fail
        wx.showToast({
          title: '网络异常！',
          duration: 30000
        });
      }
    })
  },
  // 上传图片
  chooselogo: function () {
    var self = this;
    // var uploadFileUrl=app.d.myUrl+'/Api/Submit/upload';
    wx.chooseImage({
      count: 1,
      sizeType: ['original'],
      sourceType: ['album'],
      success: function (res) {
        console.log('chooseImage success, temp path is', res.tempFilePaths[0])
        var imageSrc = res.tempFilePaths[0]
        wx.showLoading({
          title: '上传中!',
        })
        wx.uploadFile({
          url: app.d.ceshiUrl + '/Api/Shangchang/uploadlogo',
          filePath: imageSrc,
          name: 'data',
          header: {
            'content-type': 'multipart/form-data',
          },
          success: function (res) {
            console.log(res);
            self.setData({
              uploadlogo: res.data,
            })
            wx.hideLoading()
            wx.showToast({
              title: '上传成功',
              icon: 'success',
              duration: 1000
            })
            self.setData({
              logo: imageSrc,
            })
          },
          fail: function ({errMsg}) {
            console.log('uploadImage fail, errMsg is', errMsg)
          }
        })

      },
      fail: function ({errMsg}) {
        console.log('chooseImage fail, err is', errMsg)
      }
    })
  },
  del: function (e) {
    var that = this;
    that.setData({
      logo: ""
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

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