微信小程序 仿发布朋友圈页面

发表动态可以选择图片和视频

wxml：

<l-form name="form" l-form-btn-class="l-form-btn-class" bind:linsubmit="submit">
  <l-form-item label="标题:" name="title" rules="{{form.titleRule}}">
    <l-input id="title" value="{{form.title}}" hide-label show-row="{{false}}" />
  </l-form-item>
  <l-form-item name="content">
    <l-textarea id="content" placeholder="说说你的想法吧..." />
  </l-form-item>
  <l-form-item name="address">
    <l-input id="address" value="{{address}}" style="display: none;" />
  </l-form-item>
  <l-form-item name="label_id">
        <l-input id="label_id" value="{{label_id}}" style="display: none;" />
  </l-form-item>
  <l-form-item name="resource_type">
        <l-input id="resource_type" value="{{resource_type}}" style="display: none;" />
  </l-form-item>
  <block wx:if="{{resource_type != 3}}">
    <l-form-item name="resource_path">
      <l-image-picker count="9" bind:linchange="onChangeTap" />
    </l-form-item>
    <l-form-item name="resource_path">
        <l-input id="resource_path" value="{{resource_path}}" style="display: none;" />
  </l-form-item>
  </block>
  <view slot="submit">
    <l-button>提交</l-button>
  </view>
  <l-toast show="{{false}}" />
</l-form>

可以选择发布的位置（使用微信的地图组件）和选择标签

  <l-popup show="{{is_show}}" animation="hide">
    <view style="width: 300px;height: 300px;background-color: #fff;">
        <l-checkbox-group bind:linchange="change2">
          <l-checkbox wx:for="{{label}}" wx:key="{{item.id}}" key="{{item.id}}" value="{{item.name}}" checked="{{item.checked}}">
            {{item.name}}
          </l-checkbox>
        </l-checkbox-group>
    </view>
  </l-popup>
  <l-list title="位置" icon="address" bindtap="address" />
  <l-list title="标签" icon="checked" bindtap="label" />
  <l-list title="私密贴" icon="password">
    <view slot="right-section">
      <switch />
    </view>
  </l-list>

js：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    resource_type: 0,
    form: {
      title: '',
      content: '',
      titleRule: {
        required: true,
        message: '标题不能为空',
      }
    },
    address: '',
    is_show: false,
    label: [{
        id: 1,
        name: '日常记录',
        checked: false
      },
      {
        id: 2,
        name: 'vlog',
        checked: false
      },
      {
        id: 3,
        name: '自拍',
        checked: false
      }
    ],
    label_id: [],
    resource_path:[]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.lin.initValidateForm(this)
    this.setData({
      resource_type: options.resource_type
    })
  },
  onChangeTap(e) {
    let img_url = e.detail.current
    let token = wx.getStorageSync('token')
    for (let index = 0; index < img_url.length; index++) {
      wx.uploadFile({
        filePath: img_url[index],
        name: 'file',
        url: '',
        header:{token},
        success: res => {
          let data = JSON.parse(res.data)
          let resource_path = this.data.resource_path
          resource_path.push(data.data)
          this.setData({
            resource_path
          })
        }
      })
    }
  },
  change2(e) {
    let label = this.data.label
    let label_id = this.data.label_id
    label.map(function (v, k) {
      if (v.id == e.detail.key) {
        if (v.checked == false) {
          label[k].checked = true
          if (label_id.indexOf(e.detail.key) == -1) {
            label_id.push(e.detail.key)
          }
        } else {
          label[k].checked = false
          if (label_id.indexOf(e.detail.key) != -1) {
            label_id.splice(label_id.indexOf(e.detail.key), 1)
          }
        }
      }
    })
    this.setData({
      label,
      label_id
    })
  },
  address() {
    wx.chooseLocation({
      latitude: 0,
      success: res => {
        this.setData({
          address: res.address
        })
      }
    })
  },
  label() {
    this.setData({
      is_show: true
    })
  },
  submit(e) {
    let data = e.detail.values
    let token = wx.getStorageSync('token')
    wx.request({
      url: '',
      method: 'POST',
      data: data,
      header: {
        token
      },
      success: res => {
        wx.showToast({
          title: res.data.msg,
          success:ret=>{
            setTimeout(() => {
              wx.reLaunch({
                url: '/pages/index/index',
              })
            }, 1500);
          }
        })
      }
    })
  }
})