微信小程序餐饮商户资质信息样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<!-- 可用组件：https://mp.weixin.qq.com/debug/wxadoc/dev/component/ -->
<view hidden="{{ allHidden }}">
  <!--第一页显示 店铺地址-->
  <view hidden="{{ hiddenMain }}" wx:if="{{ showMain }}" class="businessCooperation">
    <view class="shop-top">
      <view>店铺地址</view>
      <!--<input type="text" disabled="true" class="input-txt triangle" placeholder="地区信息"  placeholder-class="c-gray" value="{{province}}-{{city}}-{{county}}" focus="{{focus}}" bindfocus="open" />-->
      <view bindtap="open" class="input-txt triangle">{{province}}-{{city}}-{{county}}</view>
    </view>
    <view class="shop-center">
      <input value="{{ addressDetail }}" data-type="addressDetail" bindinput="inputMessage" placeholder="请填写详细地址"/>
    </view>
    <view bindtap="addMapSite" class="add-map iconfont icon-icglobaltitlebar48iconfontmap">
      {{ shopAddress }}
    </view>
    <view class="lxr">
      <text>联系人</text>
      <input value="{{ lxrName }}" data-type="lxrName" bindinput="inputMessage" placeholder="请输入真实姓名"/>
    </view>
    <view class="tel">
      <text>联系人电话</text>
      <input value="{{ lxrPhone }}" data-type="lxrPhone" bindinput="inputMessage" placeholder="请输入电话号码" type="number"/>
    </view>
    <view class="addpic">
      <text>店铺照片</text>
      <text bindtap="addPic" class="triangle">{{ addPicText }}</text>
    </view>
    <button bindtap="nextStep" class="start-shop">下一步</button>
  </view>
  <!--第二页显示 照片上传-->
  <view hidden="{{ hiddenMain }}" wx:if="{{ !showMain }}" class="add-shop-pic">
    <view class="pic">店铺照片仅用于核实您的店铺是否真实存在，不会对外展示</view>
    <view class="face">
      <view class="face-left">
        <text>门脸图</text>
        <image src="{{ faceImg }}"></image>
      </view>
      <view class="face-right">
        <text>需要拍出完整门匾、门框（建议正对门店2米处拍摄）</text>
        <button data-shop='faceImg' bindtap='upFacePic'>上传</button>
      </view>
    </view>
    <view class="bottom">
      <view class="bottom-left">
        <text>店内环境图</text>
        <image src="{{ insideImg }}"></image>
      </view>
      <view class="bottom-right">
        <text>需真实反映用餐环境（收银台、用餐桌椅）</text>
        <button data-shop='insideImg' bindtap='upFacePic'>上传</button>
      </view>
    </view>
    <button bindtap="saveShopImg" class="start-shop">保存</button>
  </view>
  <!--第三页显示 资质信息-->
  <view hidden="{{ !hiddenMain }}" class="zizhi">
    <view class="face">
      <view class="face-left">
        <text>法人手持身份证</text>
        <image src="{{ IdFaceImg }}"></image>
      </view>
      <view class="face-right">
        <view class="text-wrap">
          <text>1需要清晰展示五官和文字信息</text>
          <text>2不可自拍、不可只拍身份证</text>
        </view>
        <button data-shop='IdFaceImg' bindtap='upFacePic'>上传</button>
      </view>
    </view>
    <view class="name">
      <text>法人姓名</text>
      <input data-type="frName" bindinput="inputMessage" placeholder="请输入姓名" type="text"/>
    </view>
    <view class="id-number">
      <text>法人身份证号</text>
      <input data-type="frIdNumber" bindinput="inputMessage" placeholder="请输入身份证号" type="idcard"/>
    </view>
    <view class="license-kind">
      <view>执照类型</view>
      <radio-group class="radio-group" bindchange="radioChange">
        <label class="radio" wx:for="{{ license }}">
          <radio color="#f00" value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
        </label>
      </radio-group>
    </view>
    <view class="license-img">
      <view class="face-left">
        <text>营业执照</text>
        <image src="{{ licenseImg }}"></image>
      </view>
      <view class="face-right">
        <view class="text-wrap">
          <text>1.需要文字清晰、边框完整、露出国徽</text>
          <text>2.拍复印件需加盖印章，可用有效特许证件代替</text>
        </view>
        <button data-shop='licenseImg' bindtap='upFacePic'>上传</button>
      </view>

    </view>
    <view class="license-name">
      <text>执照名称</text>
      <input data-type="zzName" bindinput="inputMessage" placeholder="请输入执照名称" type="text"/>
    </view>
    <view class="license-number">
      <text>执照注册号</text>
      <input data-type="zzNumber" bindinput="inputMessage" placeholder="请输入执照注册号" type="text"/>
    </view>
    <view class="license-site">
      <text>执照所在地</text>
      <input data-type="zzAddress" bindinput="inputMessage" placeholder="请输入执照所在地" type="text"/>
    </view>
    <view class="license-time">
      <view>执照有效期</view>
      <radio-group class="radio-group" bindchange="radioChange">
        <label class="radio" wx:for="{{ licenseTime }}">
          <radio color="#f00" value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
        </label>
      </radio-group>
    </view>
    <view class="restaurant-license">
      <view class="face-left">
        <text>餐饮服务许可证</text>
        <image src="{{ restaurantLicenseImg }}"></image>
      </view>
      <view class="face-right">
        <view class="text-wrap">
          <text>需要文字清晰、边框完整、真实有效</text>
        </view>
        <button data-shop='restaurantLicenseImg' bindtap='upFacePic'>上传</button>
      </view>
    </view>
    <view class="restaurant-license-name">
      <text>许可证名称</text>
      <input data-type="xkzName" bindinput="inputMessage" placeholder="请输入许可证名称" type="text"/>
    </view>
    <view class="restaurant-license-number">
      <text>许可证注册号</text>
      <input data-type="xkzNumber" bindinput="inputMessage" placeholder="请输入许可证注册号" type="number"/>
    </view>
    <view class="restaurant-license-site">
      <text>许可证所在地</text>
      <input data-type="xkzAddress" bindinput="inputMessage" placeholder="请输入许可证所在地" type="text"/>
    </view>
    <view class="restaurant-license-time">
      <view>许可证有效期</view>
      <radio-group class="radio-group" bindchange="radioChange">
        <label class="radio" wx:for="{{ restaurantLicenseTime }}">
          <radio color="#f00" value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
        </label>
      </radio-group>
    </view>
    <button bindtap="nextStep2" class="start-shop">下一步</button>
  </view>
</view>
<!--第四页 审核-->
<view class="shenhe" hidden="{{ !allHidden }}">
  <view class="iconfont icon-shenhe">
    资质信息已提交，审核中......
  </view>
</view>
<!-- S 选择省市区 -->
<view wx:if="{{condition}}" class="citypicker">
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange" class="citybody">
  <view class="cityheader">
    <view bindtap="open" class="city-cancel">取消</view>
    <view bindtap="open" class="city-true">确定</view>
  </view>
  <picker-view-column>
    <view wx:for="{{provinces}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view>
  </picker-view-column>
  <picker-view-column>
    <view wx:for="{{citys}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view>
  </picker-view-column>
  <picker-view-column>
    <view wx:for="{{countys}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view>
  </picker-view-column>
</picker-view>
</view>
<!-- E 选择省市区 -->

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

.shop-top {
  border-top: 20rpx solid #eee;
  display: flex;
}
.shop-top view {
  width: 200rpx;
  font-size: 32rpx;
  color: #333;
  line-height: 80rpx;
  text-align: center;
  font-weight: 700;
  margin-right: 20rpx;
}
.shop-top .input-txt {
  flex: 1;
  padding-left: 20rpx;
  border-bottom: 1rpx solid #eee;
  height: 80rpx;
}
.shop-top .triangle::after {
  right: 30rpx;
}
.shop-center {
  margin-top: 10rpx;
}
.shop-center input {
  border-bottom: 1rpx solid #eee;
  height: 80rpx;
  padding-left: 20rpx;
}
.add-map {
  color: #ed4d30;
  font-size: 30rpx;
  text-align: center;
  line-height: 60rpx;
  border-bottom: 20rpx solid #eee;
}
.lxr,
.tel,
.addpic,
.name,
.id-number,
.license-name,
.license-number,
.license-site,
.restaurant-license-name,
.restaurant-license-number,
.restaurant-license-site {
  display: flex;
  margin: 20rpx 0;
  padding: 0 20rpx;
  font-size: 32rpx;
}
.lxr input,
.tel input,
.addpic input,
.name input,
.id-number input,
.license-name input,
.license-number input,
.license-site input,
.restaurant-license-name input,
.restaurant-license-number input,
.restaurant-license-site input {
  flex: 1;
  text-align: right;
  font-size: 24rpx;
}
.license-name,
.license-number,
.license-site,
.restaurant-license-name,
.restaurant-license-number,
.restaurant-license-site {
  border-bottom: 1rpx solid #eee;
}
.lxr {
  padding: 0;
  margin: 20rpx 20rpx;
  border-bottom: 1rpx solid #eee;
}
.addpic text:nth-child(2) {
  flex: 1;
  text-align: right;
  margin-right: 20rpx;
  color: #999;
}
.add-shop-pic {
  background-color: #efeff4;
}
.add-shop-pic .pic {
  font-size: 26rpx;
  color: #666;
  padding: 33rpx 45rpx 22rpx 46rpx;
}
.face,
.bottom,
.license-img,
.restaurant-license {
  background-color: #fff;
  border-bottom: 30rpx solid #eee;
  display: flex;
  padding: 35rpx 34rpx;
}
.face .face-left,
.bottom .face-left,
.license-img .face-left,
.restaurant-license .face-left,
.face .face-right,
.bottom .face-right,
.license-img .face-right,
.restaurant-license .face-right,
.face .bottom-left,
.bottom .bottom-left,
.license-img .bottom-left,
.restaurant-license .bottom-left,
.face .bottom-right,
.bottom .bottom-right,
.license-img .bottom-right,
.restaurant-license .bottom-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.face .face-left,
.bottom .face-left,
.license-img .face-left,
.restaurant-license .face-left,
.face .bottom-left,
.bottom .bottom-left,
.license-img .bottom-left,
.restaurant-license .bottom-left {
  margin-right: 26rpx;
}
.face .face-left image,
.bottom .face-left image,
.license-img .face-left image,
.restaurant-license .face-left image,
.face .bottom-left image,
.bottom .bottom-left image,
.license-img .bottom-left image,
.restaurant-license .bottom-left image {
  width: 294rpx;
  height: 226rpx;
}
.face .face-right text,
.bottom .face-right text,
.license-img .face-right text,
.restaurant-license .face-right text,
.face .bottom-right text,
.bottom .bottom-right text,
.license-img .bottom-right text,
.restaurant-license .bottom-right text {
  margin-top: 48rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  color: #999;
}
.face .face-right button,
.bottom .face-right button,
.license-img .face-right button,
.restaurant-license .face-right button,
.face .bottom-right button,
.bottom .bottom-right button,
.license-img .bottom-right button,
.restaurant-license .bottom-right button {
  width: 252rpx;
  line-height: 72rpx;
  color: #fff;
  background-color: #ed4d30;
}
.zizhi .face {
  border-bottom-width: 1rpx;
}
.zizhi .text-wrap {
  display: flex;
  flex-direction: column;
}
.zizhi .text-wrap text:nth-child(2) {
  margin-top: 0rpx;
}
.zizhi .name,
.zizhi .id-number {
  margin: 0 20rpx;
  line-height: 80rpx;
  align-items: center;
  border-bottom: 1rpx solid #eee;
}
.zizhi .id-number {
  margin: 0;
  padding: 0 40rpx;
  border-bottom: 20rpx solid #eee;
}
.zizhi .license-kind,
.zizhi .license-time,
.zizhi .restaurant-license-time {
  height: 80rpx;
  font-size: 30rpx;
  align-items: center;
  display: flex;
  margin: 0 20rpx;
  border-bottom: 1rpx solid #eee;
}
.zizhi .license-kind .radio-group,
.zizhi .license-time .radio-group,
.zizhi .restaurant-license-time .radio-group {
  flex: 1;
  text-align: right;
}
.zizhi .license-img,
.zizhi .restaurant-license {
  border-bottom: none;
}
.zizhi .license-time,
.zizhi .restaurant-license-time {
  margin: 0;
  padding: 0 20rpx;
  border-bottom: 20rpx solid #eee;
}
.shenhe {
  display: flex;
  align-items: center;
  justify-content: center;
}
.shenhe .iconfont {
  position: relative;
  margin-top: 400rpx;
}
.shenhe .iconfont::before {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -300rpx);
  font-size: 200rpx;
  color: #999;
}
/* S 省市区 */
.citybody {
  position: fixed;
  bottom: 0px;
  z-index: 3;
  background: #fff;
}
.cityheader {
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 4;
}
.city-cancel {
  float: left;
  margin: 20rpx;
  color: #818181;
}
.city-true {
  float: right;
  margin: 20rpx;
  color: #2FB42E;
}
.section .picker {
  background-color: #fff;
  border-bottom: 1px #d9d9d9 solid;
  border-top: 1px #d9d9d9 solid;
  padding: 20rpx;
}
/* E 省市区 */

三、js页面代码如下：

'use strict';

// 获取全局应用程序实例对象
// const app = getApp()
var tcity = require('../../utils/city');
// 创建页面实例对象
Page({
  /**
   * 页面的初始数据
   */
  data: {
    title: 'businessCooperation',
    // 地区选择相关
    provinces: [],
    province: '',
    citys: [],
    city: '',
    countys: [],
    county: '',
    value: [0, 0, 0],
    values: [0, 0, 0],
    condition: false,
    // 地区选择相关
    shopAddress: '添加地图标记',
    showMain: true,
    allHidden: false,
    hiddenMain: false,
    // 图片上传
    addPicText: '立即上传',
    faceImg: '../../images/4.png',
    insideImg: '../../images/5.png',
    IdFaceImg: '../../images/6.png',
    licenseImg: '../../images/2.png',
    restaurantLicenseImg: '../../images/3.png',
    upStatus: 0,
    license: [{ name: 'noraml', value: '营业执照', checked: 'true' }, { name: 'special', value: '特许证件' }],
    licenseTime: [{ name: 'noTime', value: '长期有效', checked: 'true' }, { name: 'haveTime', value: '固定有效期' }],
    restaurantLicenseTime: [{ name: 'noTime', value: '长期有效', checked: 'true' }, { name: 'haveTime', value: '固定有效期' }]
  },
  /**
   * 信息录入
   * @param e
   */
  inputMessage: function inputMessage(e) {
    var obj = {};
    obj[e.currentTarget.dataset.type] = e.detail.value;
    this.setData(obj);
  },

  /**
   * 执行下一步操作
   */
  //
  //
  nextStep2: function nextStep2() {
    if (!this.data.xkzAddress || !this.data.xkzNumber || !this.data.xkzName || !this.data.zzAddress || !this.data.zzNumber || !this.data.zzName || !this.data.frIdNumber || !this.data.frName || this.data.IdFaceImg.indexOf('wxfile') === -1 || this.data.licenseImg.indexOf('wxfile') === -1 || this.data.restaurantLicenseImg.indexOf('wxfile') === -1) {
      return wx.showModal({
        title: '抱歉',
        content: '请补全您的资质信息，再进行下一步操作',
        showCancel: false
      });
    }
    this.setData({
      allHidden: true
    });
  },

  /**
   * 单项选择设置
   * @param e
   */
  radioChange: function radioChange(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value);
  },

  /**
   * 选择地区
   * @param e
   */
  bindChange: function bindChange(e) {
    // console.log(e);
    var val = e.detail.value;
    var t = this.data.values;
    var cityData = this.data.cityData;

    if (val[0] !== t[0]) {
      console.log('province no ');
      var citys = [];
      var countys = [];

      for (var i = 0; i < cityData[val[0]].sub.length; i++) {
        citys.push(cityData[val[0]].sub[i].name);
      }
      for (var _i = 0; _i < cityData[val[0]].sub[0].sub.length; _i++) {
        countys.push(cityData[val[0]].sub[0].sub[_i].name);
      }
      this.setData({
        province: this.data.provinces[val[0]],
        city: cityData[val[0]].sub[0].name,
        citys: citys,
        county: cityData[val[0]].sub[0].sub[0].name,
        countys: countys,
        values: val,
        value: [val[0], 0, 0]
      });
      return;
    }
    if (val[1] !== t[1]) {
      console.log('city no');
      var _countys = [];
      for (var _i2 = 0; _i2 < cityData[val[0]].sub[val[1]].sub.length; _i2++) {
        _countys.push(cityData[val[0]].sub[val[1]].sub[_i2].name);
      }
      this.setData({
        city: this.data.citys[val[1]],
        county: cityData[val[0]].sub[val[1]].sub[0].name,
        countys: _countys,
        values: val,
        value: [val[0], val[1], 0]
      });
      return;
    }
    if (val[2] !== t[2]) {
      // console.log('county no')
      this.setData({
        county: this.data.countys[val[2]],
        values: val,
        value: [val[0], val[1], val[2]]
      });
      return;
    }
  },
  /**
   * 地区显示开关
   */
  open: function open() {
    this.setData({
      condition: !this.data.condition
    });
  },
  /**
   * 添加店铺图片
   */
  addPic: function addPic() {
    this.setData({
      showMain: false
    });
  },

  /**
   * 选择地址
   */
  addMapSite: function addMapSite() {
    var that = this;
    wx.chooseLocation({
      success: function success(res) {
        // console.log(res)
        that.setData({
          shopAddress: res.name || res.address || '添加地图标记'
        });
      }
    });
    // todo 添加地址后展示地址
  },

  /**
   * 保存上传后的店铺图片
   */
  saveShopImg: function saveShopImg() {
    this.setData({
      showMain: true
    });
    if (this.data.upStatus === 1) {
      this.setData({
        addPicText: '重新上传图片'
      });
    }
  },

  /**
   * 上传门脸图
   */
  upFacePic: function upFacePic(e) {
    var that = this;
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function success(res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths[0];
        // console.log(tempFilePaths)
        if (e.currentTarget.dataset.shop === 'faceImg') {
          that.setData({
            faceImg: tempFilePaths
          });
        } else if (e.currentTarget.dataset.shop === 'insideImg') {
          that.setData({
            insideImg: tempFilePaths
          });
        } else if (e.currentTarget.dataset.shop === 'IdFaceImg') {
          that.setData({
            IdFaceImg: tempFilePaths
          });
        } else if (e.currentTarget.dataset.shop === 'licenseImg') {
          that.setData({
            licenseImg: tempFilePaths
          });
        } else if (e.currentTarget.dataset.shop === 'restaurantLicenseImg') {
          that.setData({
            restaurantLicenseImg: tempFilePaths
          });
        }
        that.setData({
          upStatus: 1
        });
      }
    });
  },

  /**
   * 显示资质信息
   */
  nextStep: function nextStep() {
    if (this.data.shopAddress === '添加地图标记' || this.data.insideImg.indexOf('wxfile') === -1 || this.data.faceImg.indexOf('wxfile') === -1 || !this.data.addressDetail || !this.data.lxrName || !this.data.lxrPhone) {
      return wx.showModal({
        title: '抱歉',
        content: '请补全相关信息，再进行下一步操作',
        showCancel: false
      });
    }
    this.setData({
      hiddenMain: true
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function onLoad(e) {
    // TODO: onLoad
    var that = this;
    tcity.init(that);
    var cityData = that.data.cityData;
    var provinces = [];
    var citys = [];
    var countys = [];
    for (var i = 0; i < cityData.length; i++) {
      provinces.push(cityData[i].name);
    }
    // console.log('省份完成')
    for (var _i3 = 0; _i3 < cityData[0].sub.length; _i3++) {
      citys.push(cityData[0].sub[_i3].name);
    }
    // console.log('city完成')
    for (var _i4 = 0; _i4 < cityData[0].sub[0].sub.length; _i4++) {
      countys.push(cityData[0].sub[0].sub[_i4].name);
    }
    that.setData({
      'provinces': provinces,
      'citys': citys,
      'countys': countys,
      'province': cityData[0].name,
      'city': cityData[0].sub[0].name,
      'county': cityData[0].sub[0].sub[0].name
    });
    // console.log('初始化完成')
    console.log(e);
  },


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

  },


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


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


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


  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function onPullDownRefresh() {
    // TODO: onPullDownRefresh
  }
});
//# sourceMappingURL=businessCooperation.js.map

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