微信小程序个人店铺信息填写页面样式设计制作开发教程

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

一、wxml页面代码如下：

<view class="cont ">
<!--头部-->
  <view class="tou" wx:if="{{rztype=='geren'}}">
    <view bindtap="gotogeren">
      个人信息
      <view class="san">
        <text class="jiao"></text>
      </view>
    </view>
    <view>></view>

    <view bindtap="gotodianpu">店铺信息</view>
    <view>></view>
    <view bindtap="gotoshenhe">提交审核</view>
  </view>

  <view class="tou" wx:if="{{rztype=='qiye'}}">
    <view bindtap="gotoqiye">企业信息</view>
    <view>></view>
    <view bindtap="gotogeren">
      个人信息
      <view class="qiyesan">
        <text class="jiao"></text>
      </view>
    </view>
    <view>></view>

    <view bindtap="gotodianpu">店铺信息</view>
    <view>></view>
    <view bindtap="gotoshenhe">提交审核</view>
  </view>
<!--end-->
  <view class="log">
    <view class="log_s">店铺Logo</view>
    <view class="log_o"> </view>
    <view class="log_g">
      <block wx:if="{{logo}}">
        <view class="cl_img">
          <image src="{{logo}}" mode="aspectFit"  bindtap="logo"></image>
        </view>
      </block>
      <block wx:else>
        <view class="cl_img">
          <image src="../../images/jia.png" bindtap="logo"></image>
        </view>
      </block>
      <view style="margin-left:40rpx;color:#ccc">></view>
    </view>
  </view>
<view class="tishi">
<text style="margin-right:20rpx">推荐Logo尺寸512*512</text>  
</view>
<form bindsubmit="saveshop">
<!--店铺名字-->
<view class="shopstore">
    <view class="shopstore_log">
    <text style="padding-left:30rpx">店铺名字</text>
      <input placeholder-class='placeholder' placeholder-style='font-size:26rpx;' placeholder='为您的店铺起一个名字' class="in" name="shopname" value="{{shopname}}"/>
    </view>
</view>

<view class="tishi">
<text style="margin-right:20rpx">店铺名字不能重名，不能使用他人的注册商标</text>  
</view>


    <view class="section">

  <view class="jieshang" >店铺介绍</view>
  <view  class="xian"></view>

            <textarea placeholder-style='font-size:28rpx;' style="font-size:30rpx" maxlength='150' placeholder="请介绍你的店铺(150字以内)" name="digest" value="{{digest}}"/>
           
           
           
           

        </view>

 <button style="margin-top:50rpx;" form-type="submit" hover-class='button-hover' class='su'>保存并下一步</button>

   </form>
</view>

二、wxss样式文件代码如下：

.cont {
  font-family: "微软雅黑";
  height: 100%;
  width: 100%;
}

.tou{
  display: flex;
  justify-content: center;
  background: #d9002f;
  color: 	#fff;
  font-size: 24rpx;
}
.tou view{
 padding: 25rpx 20rpx;
}
.jiao{
    float:left;
    clear:both;  
    font-size: 0;  
    line-height: 0;  
    border-width: 13px;  
    border-color:  #d9002f;  
    border-bottom-width: 0;  
    border-style: dashed;  
    border-top-style: solid;  
    border-left-color: transparent;  
    border-right-color: transparent;  
}
.san{
  position: absolute;
  top: 55rpx;
  left:332rpx;
}
.qiyesan{
  position: absolute;
  top: 55rpx;
  left:426rpx;
}


/*店铺*/
.log {
  display: flex;
  background: #fff;
  margin-top: 20rpx;
  align-content: center;
  height: 150rpx;
}

.log_s {
  font-size: 32rpx;
  height: 150rpx;
  line-height: 150rpx;
  flex: 1;
  text-align: center;
  padding-left: 30rpx;
}

.cl_img {
  width: 150rpx;
  height: 150rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left:71rpx;
}

.cl_img image {
  width: 120rpx;
  height: 120rpx;

}
.log_o{
  flex: 1
}
.log_g{
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center
}

/*店铺名字*/
.shopstore{
   display: flex;
   width: 100%;
   background: #fff;
   padding: 20rpx 0;
   font-size: 32rpx;

}
.shopstore_log{
   width: 100%;
   display: flex;

}
.in{
  width: 70%;
  padding-left: 30rpx;
  font-family: "微软雅黑";  
}
.tishi{
 width:100%;font-size:26rpx;
 text-align: right;
 padding: 20rpx 0;
 color: #999;
 padding-right: 10rpx;
}
.section{
  background: #fff
}
.xian{
  width: 90%;
  background: #ccc;
  height: 2rpx;
}
.jieshang{
  margin-left:30rpx; 
  padding: 20rpx 0;
  font-size: 32rpx;

}
.xian{
  margin-left:25rpx; 
  margin-bottom: 20rpx;
}
textarea{
  width: 100%;
  margin-left: 20rpx;
}

button{
  background: #d9002f;
  color: #fff;
  width: 80%;
  font-size: 34rpx;
}

三、js页面代码如下：

//logs.js
var app = getApp();
var uploadFileUrl = app.d.ceshiUrl + "/Api/Renzheng/uploadimg";
Page({
  data: {
    
  },
  onLoad: function (options) {
    var that = this;
    var rztype = options.rztype;
    that.setData({
      rztype: rztype
    })
    wx.request({
      url: app.d.ceshiUrl + '/Api/Renzheng/readinfo',
      method: 'post',
      data: {
        uid: app.globalData.userInfo.id,
        dtype: "shop"
      },
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        if (res.data.status == 1) {
          var fdata = res.data.respondData;
          that.setData({
            logo: fdata.logo,
            shopname: fdata.shopname,
            digest: fdata.digest,
            uplogo: fdata.uplogo,
          })
        }
      },
      error: function (e) {
        wx.showToast({
          title: '网络异常！',
          duration: 30000
        });
      },
    })
  },
  saveshop: function (e) {
    var that = this;
    var rztype = that.data.rztype;
    console.log(e.detail.value);
    var fdata = e.detail.value;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Renzheng/saveshop',
      method: 'post',
      data: {
        uid: app.globalData.userInfo.id,
        logo: that.data.uplogo,
        shopname: fdata.shopname,
        digest: fdata.digest
      },
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        wx.showToast({
          title: res.data.message,
        })
        if (res.data.status == 1) {
          wx.redirectTo({
            url: '../examine/examine?rztype=' + rztype,
            success: function (res) { },
            fail: function (res) { },
            complete: function (res) { },
          })
        }
      },
      error: function (e) {
        wx.showToast({
          title: '网络异常！',
          duration: 30000
        });
      },
    })
  },
  // 上传图片
  logo: function () {
    var self = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'],
      success: function (res) {
        console.log('chooseImage success, temp path is', res.tempFilePaths)
        var imageSrc = res.tempFilePaths[0];

        wx.uploadFile({
          url: uploadFileUrl,
          filePath: imageSrc,
          name: 'data',
          success: function (res) {
            console.log('uploadImage success, res is:', res)

            wx.showToast({
              title: '上传成功',
              icon: 'success',
              duration: 1000
            })

            self.setData({
              logo: imageSrc,
              uplogo:res.data
            })
          },
          fail: function ({errMsg}) {
            console.log('uploadImage fail, errMsg is', errMsg)
          }
        })

      },
      fail: function ({errMsg}) {
        console.log('chooseImage fail, err is', errMsg)
      }
    })
  },
  gotoqiye: function (e) {
    var that = this;
    var rztype = that.data.rztype;
    wx.redirectTo({
      url: '../rzqiye/rzqiye?rztype=' + rztype,
    })
  },
  gotogeren: function (e) {
    var that = this;
    var rztype = that.data.rztype;
    wx.redirectTo({
      url: '../renzheng/renzheng?rztype=' + rztype,
    })
  },
  gotodianpu: function (e) {
    var that = this;
    var rztype = that.data.rztype;
    wx.redirectTo({
      url: '../rzshop/rzshop?rztype=' + rztype,
    })
  },
  gotoshenhe: function (e) {
    var that = this;
    var rztype = that.data.rztype;
    wx.redirectTo({
      url: '../examine/examine?rztype=' + rztype,
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }


})

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