【随心写作】共享充电宝小程序添加门店页

逻辑

const app = getApp()

Page({
  goUrl(e) {
    const url = e.currentTarget.dataset.url
    console.log(e)
    wx.navigateTo({
      url: url,
    })
  },

  add(e) {
    const that = this

    if(this.data.isLoading == true) return

    this.data.isLoading = true
    wx.showToast({
      title: '添加中',
      icon: 'none'
    })

    wx.request({
      url: app.globalData.apiUrl + '/store/add',
      method: 'POST',
      data: that.data.insertData,
      headers: {
        'content-type': 'application/json',
      },
      dataType: 'json',
      success: function (res) {
        if(res.data.result == "ok") {
          wx.showToast({
            title: '添加成功',
            icon: 'none'
          })
         wx.reLaunch({
           url: '/pages/index/index',
         })
        } else {
          wx.showToast({
            title: res.data.error_info,
            icon: 'none'
          })
        }
        that.data.isLoading =false
      },
      fail(ret) {
        wx.showToast({
          title: "添加失败",
          icon: 'none'
        })
        that.data.isLoading = false
      }
    })
  },
  setStoreName(e) {
    console.log(e.detail.value)
    this.data.insertData.store_name = e.detail.value
  },

  /**
   * 页面的初始数据
   */
  data: {
    insertData: {
      store_name: "",
      full_address: "",
      province_code: "",
      city_code: "",
      district_code: "",
      store_image: "/static/image/home/logo.png"
    }
  },

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

  },

  setChooseAddress() {
    const that = this
    wx.chooseLocation({
      success (res) {
        that.data.insertData.full_address = res.address
        that.data.insertData.latitude = res.latitude
        that.data.insertData.longitude = res.longitude

        wx.request({
          url: 'https://apis.map.qq.com/ws/geocoder/v1/',
          data: {
            location: res.latitude + "," + res.longitude,
            key: "X4RBZ-2A5RX-Z7O4V-7HB4K-ZOSHF-OXBNA"
          },
          success: function(res) {
            const adcode = res.data.result.ad_info.adcode
            const province_code = adcode.substr(0, 2)
            const city_code = adcode.substr(2, 2)
            const district_code = adcode.substr(4, 2)

            that.data.insertData.province_code = province_code
            that.data.insertData.city_code = city_code
            that.data.insertData.district_code = district_code

            that.setData({
              insertData: that.data.insertData
            })
          }
        })
        console.log(that.data.insertData)
      },
      fail(error) {
        console.log(error)
      }
    })
  },
  uploadImage(e) {
    console.log(e)

    let tempFilePath = e.detail.tempFilePaths[0]
    wx.uploadFile({
      url: 'https://yourbucketname.oss-cn-beijing.aliyuncs.com', // Bucket 域名，注意要使用 HTTPS 协议
      filePath: tempFilePath,
      name: 'file',
      header: {
        'content-type': 'multipart/form-data',
      },
      formData: {
        'key': '上传路径', // 上传到 OSS 的路径，可自定义
        'policy': '上传策略',
        'OSSAccessKeyId': 'AccessKeyId', // 这里需要替换成自己的 AccessKeyId
        'success_action_status': '200', // 上传成功后的返回状态码，默认为 204
        'signature': '上传签名', // 上传签名，可在服务端生成
      },
      success(res) {
        console.log('上传成功', res)
      },
      fail(res) {
        console.error('上传失败', res)
      }
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

页面

<mp-form>
  <mp-cell title="店铺名称">
    <view slot="footer">
      <input placeholder="请输入店铺名称" bindinput="setStoreName" value="{{insertData.store_name}}" />
    </view>
  </mp-cell>   

  <mp-cell title="选择地址" bindtap="setChooseAddress">
    <view slot="footer">
      {{ insertData.full_address || "请选择" }}
      <mp-icon type="field" icon="arrow" color="#999" size="{{10}}"></mp-icon>
    </view>
  </mp-cell>   

  <mp-cell title="店铺头像">
    <view slot="footer">
     <mp-uploader bindselect="uploadImage"></mp-uploader>
    </view>
  </mp-cell>

  <mp-cell>
    <button type="primary" bindtap="add">添加</button>
  </mp-cell> 
</mp-form>

样式
/* pages/store/add.wxss */
配置

{
  "usingComponents": {
    "mp-form": "weui-miniprogram/form/form",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell",
    "mp-uploader": "weui-miniprogram/uploader/uploader",
    "mp-icon": "weui-miniprogram/icon/icon"
  }
}