小程序：首页接口对接

htmldev/wxMini/app.json

@@ -26,6 +26,14 @@
     "pages/businessLeavingAMessage/businessLeavingAMessage",
     "pages/businessApply/businessApply"
   ],
+  "permission": {
+    "scope.userLocation": {
+      "desc": "你的位置信息将用于为了确认您所选的出发地、目的地地理位置"
+    }
+  },
+  "requiredPrivateInfos": [
+    "chooseLocation"
+  ],
   "window": {
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#CCCCCC",
@@ -68,4 +76,4 @@
       }
     ]
   }
-}
+}

htmldev/wxMini/mixin/upload.js

@@ -69,10 +69,12 @@ module.exports = {
   delete(event) {
     const { formkey } = event.currentTarget.dataset
     const { index } = event.detail
+    const temp = JSON.parse(JSON.stringify(this.data.form[formkey]))
+
+    temp.splice(index, 1)
 
-    this.data.form[formkey].splice(index, 1)
     this.setData({
-      ['form.' + formkey]: this.data.form[formkey]
+      ['form.' + formkey]: temp
     })
   },
   async uploadImg(event) {

htmldev/wxMini/pages/businessApply/api/index.js

@@ -0,0 +1,40 @@
+const { request } = require('../../../api/request')
+
+const mockData = {
+  'user_name': '潘勇测试', // 用户姓名
+  'shop_name': '潘勇的店铺', // 店铺名称
+  'user_card': '4203221111222223333', // 身份证
+  'shop_phone': '13429176706', // 手机号码
+  'country_msg': '乡村信息用在哪里的', // 乡村信息
+  'user_code_url': [
+    {
+      formkey: 'user_code_url',
+      url: 'https://tuotuoyinfu-oss.oss-cn-beijing.aliyuncs.com/images/user/bashi63266e3610822.jpg'
+    }
+  ], // 微信二维码
+  'user_wechat_code': 'wxid_aabbccddee', // 微信号
+  'shop_img_url': [
+    {
+      formkey: 'shop_img_url',
+      url: 'https://tuotuoyinfu-oss.oss-cn-beijing.aliyuncs.com/images/user/bashi63266e68d77f0.png'
+    }
+  ], // 店铺图片地址
+  'shop_address': {
+    'longitude': 120.1689, // 经度
+    'latitude': 30.24, // 纬度
+    'address_name': '浙江省杭州市上城区高银街121号', // 起点位置名称
+    'name': '河坊街步行街'
+  }, // 店铺地址 {"address_name":"","name":"","latitude":30.24,"longitude":120.1689}
+  'shop_remark': '这个一个测试的备注信息' // 备注
+}
+
+/**
+ * 申请商户
+ * @returns {Promise<*>}
+ */
+export const userApplyShop = (obj) => request({
+  url: '/api/user/apply/shop',
+  method: 'POST',
+  data: obj,
+  showLoading: true
+})

htmldev/wxMini/pages/businessApply/businessApply.js

@@ -1,4 +1,6 @@
 const uploadJS = require('../../mixin/upload.js')
+const { userApplyShop } = require('./api/index')
+const { isMobile } = require('../../utils/validate')
 
 Page({
 
@@ -7,17 +9,26 @@ Page({
    */
   data: {
     form: {
-      name: '',
-      card_id: '',
-      phone: '',
-      partner_name: '',
-      wx_code: [],
-      wxid: '',
-      address: {},
-      note: ''
-    }
+      'user_name': '', // 用户姓名
+      'shop_name': '', // 店铺名称
+      'user_card': '', // 身份证
+      'shop_phone': '', // 手机号码
+      'country_msg': '', // 乡村信息
+      'user_code_url': [], // 微信二维码
+      'user_wechat_code': '', // 微信号
+      'shop_img_url': [], // 店铺图片地址
+      'shop_address': {
+        'longitude': 0, // 经度
+        'latitude': 0, // 纬度
+        'address_name': '', // 起点位置名称
+        'name': ''
+      }, // 店铺地址
+      'shop_remark': '' // 备注
+    },
+    booLock: false
   },
-
+  tempFormKey: '',
+  tempPostData: {},
   /**
    * 生命周期函数--监听页面加载
    */
@@ -51,27 +62,6 @@ Page({
    */
   onUnload() {
 
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
   },
   ...uploadJS,
   uploadCallBack(res) {
@@ -88,12 +78,9 @@ Page({
     }
 
     switch (formkey) {
-      case 'product_img_url':
-        tempForm[`form.${formkey}`] = temp
-        break
-      case 'product_rotation_img_list':
-      case 'product_detail_img_list':
-        tempForm[`form.${formkey}`] = this.data.form[formkey].concat(...temp)
+      case 'user_code_url':
+      case 'shop_img_url':
+        tempForm[`form.${formkey}[0]`] = temp[0]
         break
       default:
     }
@@ -101,5 +88,221 @@ Page({
     if (Object.keys(tempForm).length > 0) {
       this.setData(tempForm)
     }
+  },
+  setFormValue(event) {
+    const { value } = event.detail
+    const { formkey } = event.target.dataset
+    let tempForm = {}
+
+    switch (formkey) {
+      case 'user_name':
+      case 'shop_name':
+      case 'user_card':
+      case 'country_msg':
+      case 'user_wechat_code':
+      case 'shop_remark':
+        tempForm[`form.${formkey}`] = value
+        break
+      case 'shop_phone':
+        tempForm[`form.${formkey}`] = value.replace(/[^\d]$/, '').replace(/^0/, '').replace(/(\d{11}(.*))/, '$1')
+        break
+      default:
+    }
+
+    this.setData(tempForm)
+  },
+  // 获取定位权限、定位权限授权
+  async handleGetSetting() {
+    const that = this
+
+    try {
+      const { errMsg, authSetting } = await wx.getSetting()
+      if (errMsg === 'getSetting:ok') {
+        // 有定位授权
+        if (authSetting['scope.userLocation']) {
+          if (that.tempFormKey === '') {
+
+          } else {
+            await that.chooseLocationBridge()
+          }
+          return
+        }
+      }
+    } catch (err) {}
+
+    try {
+      await wx.authorize({ scope: 'scope.userLocation' })
+      if (that.tempFormKey === '') {
+
+      } else {
+        await that.chooseLocationBridge()
+      }
+    } catch (err) {
+      wx.showModal({
+        title: '提示',
+        content: '未开启获取地理位置权限，去设置中打开',
+        success(res) {
+          if (res.confirm) {
+            that.openSetting()
+          }
+        }
+      })
+    }
+  },
+  // 去小程序自带设置页：返回
+  async openSetting() {
+    try {
+      const openSettingData = await wx.openSetting()
+      // 开启了定位权限
+      if (openSettingData.authSetting['scope.userLocation']) {
+        if (this.tempFormKey === '') {
+
+        } else {
+          await this.chooseLocationBridge()
+        }
+      }
+    } catch (err) {}
+  },
+  async handleChooseLocation(e) {
+    const { lat, lon, formkey } = e.currentTarget.dataset
+    this.tempPostData = lat && lon ? {
+      latitude: lat,
+      longitude: lon
+    } : {}
+    this.tempFormKey = 'form.' + formkey
+    await this.handleGetSetting()
+  },
+  async chooseLocationBridge() {
+    if (!this.tempFormKey) {
+      return
+    }
+    try {
+      const { errMsg, address, latitude, longitude, name } = await wx.chooseLocation(this.tempPostData)
+      if (errMsg === 'chooseLocation:ok' && address && name) {
+        const pointInfo = {
+          address_name: address,
+          name,
+          latitude,
+          longitude
+        }
+
+        this.setData({
+          [this.tempFormKey]: pointInfo
+        })
+      }
+    } catch (err) {
+      // 点击了取消按钮
+      if (err.errMsg === 'chooseLocation:fail cancel') {
+      }
+      // 未开启授权
+      if (err.errMsg === 'chooseLocation:fail auth deny') {
+      }
+    }
+  },
+  getForm() {
+    const {
+      user_name,
+      shop_name,
+      user_card,
+      shop_phone,
+      country_msg,
+      user_code_url,
+      user_wechat_code,
+      shop_img_url,
+      shop_address,
+      shop_remark
+    } = this.data.form
+
+    return {
+      user_name,
+      shop_name,
+      user_card,
+      shop_phone,
+      country_msg,
+      user_code_url: user_code_url.map(item => item.url).join(''),
+      user_wechat_code,
+      shop_img_url: shop_img_url.map(item => item.url).join(''),
+      shop_address,
+      shop_remark
+    }
+  },
+  verify() {
+    let errorList = []
+    const {
+      user_name,
+      shop_name,
+      user_card,
+      shop_phone,
+      country_msg,
+      user_code_url,
+      user_wechat_code,
+      shop_img_url,
+      shop_address,
+      shop_remark
+    } = this.getForm()
+
+    if (!user_name) {
+      errorList.push('请输入姓名')
+    }
+    if (!user_card) {
+      errorList.push('请输入身份证号码')
+    }
+    if (!isMobile(shop_phone)) {
+      errorList.push('请输入手机号')
+    }
+    if (!country_msg) {
+      errorList.push('请输入村信息')
+    }
+    if (!user_code_url) {
+      errorList.push('请上传个人二维码')
+    }
+    if (!user_wechat_code) {
+      errorList.push('请输入微信号')
+    }
+    if (!shop_name) {
+      errorList.push('请输入店铺名称')
+    }
+    if (!shop_img_url) {
+      errorList.push('请上传店铺图片')
+    }
+    if (!shop_address.address_name) {
+      errorList.push('请选择详细地址')
+    }
+    if (!shop_remark) {
+      errorList.push('请输入备注')
+    }
+
+    return errorList
+  },
+  async onSubmit() {
+    const temp = this.getForm()
+    const verifyList = this.verify()
+
+    if (verifyList.length) {
+      wx.showToast({
+        title: verifyList[0],
+        icon: 'none'
+      })
+      return
+    }
+    this.setData({
+      booLock: true
+    })
+    try {
+      const { status, data, msg } = await userApplyShop(temp)
+      if (status) {
+        wx.switchTab({
+          url: '/pages/mine/mine'
+        })
+      } else {
+        wx.showToast({
+          title: msg,
+          icon: 'none'
+        })
+      }
+    } catch (err) {}
+    this.setData({
+      booLock: false
+    })
   }
 })

htmldev/wxMini/pages/businessApply/businessApply.scss

@@ -95,3 +95,11 @@ button[type='primary'] {
   color: rgba(255, 255, 255, 1);
   background-color: rgba(145, 179, 121, 1);
 }
+
+.shop-address {
+  line-height: 42rpx;
+  font-size: 28rpx;
+  color: rgba(68, 68, 68, 1);
+  word-break: break-all;
+  word-wrap: break-word;
+}

htmldev/wxMini/pages/businessApply/businessApply.wxml

@@ -5,39 +5,38 @@
     </label>
     <view class="value">
       <input
-        value="{{form.product_title}}"
+        value="{{form.user_name}}"
         placeholder="请输入姓名"
         placeholder-class="placeholder"
-        data-formkey="product_title"
+        data-formkey="user_name"
         bind:input="setFormValue"></input>
     </view>
   </view>
-
   <view class="form-item">
     <label>
       <text>身份证</text>
     </label>
     <view class="value">
       <input
-        value="{{form.product_title}}"
+        value="{{form.user_card}}"
         placeholder="请输入身份证号码"
         placeholder-class="placeholder"
-        data-formkey="product_title"
+        data-formkey="user_card"
         bind:input="setFormValue"></input>
     </view>
   </view>
-
-
   <view class="form-item">
     <label>
       <text>手机号</text>
     </label>
     <view class="value">
       <input
-        value="{{form.product_title}}"
+        type="number"
+        maxlength="11"
+        value="{{form.shop_phone}}"
         placeholder="请输入手机号"
         placeholder-class="placeholder"
-        data-formkey="product_title"
+        data-formkey="shop_phone"
         bind:input="setFormValue"></input>
     </view>
   </view>
@@ -47,14 +46,13 @@
     </label>
     <view class="value">
       <input
-        value="{{form.product_title}}"
+        value="{{form.country_msg}}"
         placeholder="请输入村信息"
         placeholder-class="placeholder"
-        data-formkey="product_title"
+        data-formkey="country_msg"
         bind:input="setFormValue"></input>
     </view>
   </view>
-
   <view class="form-item">
     <label>
       <text>个人二维码</text>
@@ -63,62 +61,103 @@
       <view
         class="van-uploader-wrap">
         <van-uploader
-          file-list="{{ form.wx_code }}"
+          file-list="{{ form.user_code_url }}"
           max-count="{{1}}"
           multiple="{{false}}"
           accept="image"
-          data-formkey="wx_code"
+          data-formkey="user_code_url"
           bind:click-preview="uploadImg"
           bind:after-read="afterRead"
           bind:delete="delete"/>
       </view>
     </view>
   </view>
-
   <view class="form-item">
     <label>
       <text>微信号</text>
     </label>
     <view class="value">
       <input
-        value="{{form.product_title}}"
+        value="{{form.user_wechat_code}}"
         placeholder="请输入微信号"
         placeholder-class="placeholder"
-        data-formkey="product_title"
+        data-formkey="user_wechat_code"
         bind:input="setFormValue"></input>
     </view>
   </view>
-
   <view class="form-item">
     <label>
-      <text>详细地址</text>
+      <text>店铺名称</text>
     </label>
     <view class="value">
       <input
-        value="{{form.product_title}}"
-        placeholder="请输入详细地址"
+        value="{{form.shop_name}}"
+        placeholder="请输入店铺名称"
         placeholder-class="placeholder"
-        data-formkey="product_title"
+        data-formkey="shop_name"
         bind:input="setFormValue"></input>
     </view>
   </view>
-
+  <view class="form-item">
+    <label>
+      <text>店铺图片</text>
+    </label>
+    <view class="value">
+      <view
+        class="van-uploader-wrap">
+        <van-uploader
+          file-list="{{ form.shop_img_url }}"
+          max-count="{{1}}"
+          multiple="{{false}}"
+          accept="image"
+          data-formkey="shop_img_url"
+          bind:click-preview="uploadImg"
+          bind:after-read="afterRead"
+          bind:delete="delete"/>
+      </view>
+    </view>
+  </view>
+  <view
+    class="form-item"
+    data-formkey="shop_address"
+    data-lat="{{form.shop_address.latitude}}"
+    data-lon="{{form.shop_address.longitude}}"
+    bind:tap="handleChooseLocation">
+    <label>
+      <text>详细地址</text>
+    </label>
+    <view class="value">
+      <view
+        class="shop-address"
+        wx:if="{{form.shop_address.address_name}}">{{form.shop_address.address_name}}{{form.shop_address.name}}
+      </view>
+      <view
+        class="shop-address"
+        style="color: rgba(198, 202, 219, 1);"
+        wx:else>请输入详细地址
+      </view>
+    </view>
+  </view>
   <view class="form-item" style="padding-left: 0; border-bottom: none;">
     <label>
       <text>备注</text>
     </label>
     <view class="value">
       <textarea
-        value=""
+        value="{{form.shop_remark}}"
         placeholder="请输入备注"
         placeholder-class="placeholder"
         maxlength="{{200}}"
         auto-height="{{true}}"
-        data-formkey="product_desc"
+        data-formkey="shop_remark"
         bind:input="setFormValue"></textarea>
-      <view class="words-limit">{{form.product_desc.length}}/200</view>
+      <view class="words-limit">{{form.shop_remark.length}}/200</view>
     </view>
   </view>
   <view class="explain">*政府后台会审核村民信息是否真实，通过后就可发布</view>
-  <button type="primary">成为农户</button>
+  <button
+    type="primary"
+    disabled="{{booLock}}"
+    bind:tap="onSubmit">成为农户
+  </button>
 </view>

htmldev/wxMini/pages/home/home.wxss

@@ -52,7 +52,6 @@
   display: block;
   width: 100%;
   height: 100%;
-  background: pink;
 }
 
 .page-section .wx-swiper-dot {
@@ -140,6 +139,7 @@
   width: 342rpx;
   height: 224rpx;
 }
+
 .marketing-wrap .vr {
   width: 346rpx;
   height: 216rpx;