小程序项目实例——招聘

标签的选中与否

知识点：事件绑定catchtap,传参，class样式三元运算符，传参data-

<view class="title">您好，请选择标签？</view>
<view class="bq">
    <text catchtap="bqCheck" wx:for="{{biaoqian}}" wx:key="index" data-index="{{index}}" class="{{item.type==false?'':'active'}}">{{item.name}}</text>
</view>

  data: {
    biaoqian: [
      {
        name: "测试1",
        type: false
      },
      {
        name: "测试2",
        type: false
      },
      {
        name: "测试3",
        type: false
      }, {
        name: "测试4",
        type: false
      }, {
        name: "测试6",
        type: false
      }, {
        name: "其他",
        type: false
      }
    ]
  },

  // 标签选择
  bqCheck: function (e) {
    var that = this;
    var biaoqian = that.data.biaoqian;
    biaoqian[e.currentTarget.dataset.index].type = !biaoqian[e.currentTarget.dataset.index].type;
    that.setData({
      biaoqian: biaoqian
    })
  },

图片上传

 

<view class="imgs">

        <view class="items" catchtap="chooseImg" data-type="1">
            <block wx:if="{{!jianli}}">
                <image src="/images/xiangji.png" class="xj"></image>
                <text>个人简历</text>
            </block>
            <block wx:if="{{jianli}}">
                <image src="{{jianli}}" class="picture" mode="aspectFill"></image>
            </block>
        </view>

        <view class="items" catchtap="chooseImg" data-type="2">
            <block wx:if="{{!myphoto}}">
                <image src="/images/xiangji.png" class="xj"></image>
                <text>我的照片</text>
            </block>
            <block wx:if="{{myphoto}}">
                <image src="{{myphoto}}" class="picture" mode="aspectFill"></image>
            </block>
        </view>

        <view class="items" catchtap="chooseImg" data-type="3">
            <block wx:if="{{!photo}}">
                <image src="/images/xiangji.png" class="xj"></image>
                <text>上传照片</text>
            </block>
            <block wx:if="{{photo}}">
                <image src="{{photo}}" class="picture" mode="aspectFill"></image>
            </block>
        </view>

</view>

.imgs {
  display: flex;
  margin: 20rpx 40rpx;
}

.imgs .items {
  width: 173rpx;
  height: 187rpx;
  border: 1rpx solid rgba(175, 175, 175, 1);
  overflow: hidden;
  border-radius: 5rpx;
  margin-right: 15rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.imgs .items .xj {
  width: 58rpx;
  height: 58rpx;
  margin-bottom: 20rpx;
  margin-top: 40rpx;
}

.imgs .items text {
  display: block;
  font-size: 24rpx;
  color: #AFAFAF;
}

.picture {
  width: 171rpx;
  height: 187rpx;
}

  // 上传图片
  chooseImg: function (e) {
    var that = this;
    wx.chooseImage({
      count: 1,
      success(res) {
        const tempFilePaths = res.tempFilePaths;
        if (e.currentTarget.dataset.type == 0) {
          //上传头像
          that.setData({
            tx: tempFilePaths[0]
          })
        }else if (e.currentTarget.dataset.type == 1) {
          //个人简历
          that.setData({
            jianli: tempFilePaths[0]
          })
        } else if (e.currentTarget.dataset.type == 2) {
          // 我的照片
          that.setData({
            myphoto: tempFilePaths[0]
          })
        } else if (e.currentTarget.dataset.type == 3) {
          // 上传照片
          that.setData({
            photo: tempFilePaths[0]
          })
        } 
        // wx.uploadFile({
        //   url: '', //仅为示例，非真实的接口地址
        //   filePath: tempFilePaths[0],
        //   name: 'file',
        //   formData: {
        //     'user': 'test'
        //   },
        //   success (res){
        //     console.log(res);
        //     const data = res.data
        //     //do something
        //   }
        // })
      }
    })
  },

循环遍历嵌套

  

<view class="item" wx:for="{{zhanpin}}">
      <view class="title">
        <view class="left">{{item.gangwei}}</view>
        <view class="right">{{item.money}}</view>
      </view>
      <view class="dd">
        <view class="left">
          <view>
            <image src="/images/icon17.png" class="map"></image>{{item.area}}
          </view>
          <view>
            <image src="/images/icon18.png" class="time"></image>{{item.time}}
          </view>
          <view>
            <image src="/images/icon16.png" class="xueli"></image>{{item.xueli}}
          </view>
        </view>
        <view class="right">
          <view class="btn">总赏金{{item.shangjin}}元</view>
        </view>
      </view>
　　　　
　　　　// 循环遍历
      <view class="buzhu cl">
      <block wx:for="{{item.fuli}}">
        <view class="btn">{{item}}</view>
      </block>
      </view>
      <view class="name">{{item.company}}</view>
      <view class="desc">
        <view class="left"> <text>{{item.rongzi}}</text> | <text>{{item.number}}</text>人</view>
        <view class="link">查看详情</view>
      </view>
      <view class="rtFix">
        <view class="{{item.type == '0' ? 'btn' :'btn1'}}">已申请</view>
        <view class="btn">分享职位</view>
      </view>
</view>

 data: {
      
    zhanpin:[
      {
        gangwei:"前端开发工程师",
        money:"11-14千/月",
        area:"中山",
        time:"3-5年",
        xueli:"大专",
        shangjin:"400",
        fuli:["五险一金","交通补助","年终奖","弹性工作"],
        company:"中山市某某某有限公司",
        rongzi:"不需要融资",
        number:"50-100",
        type:"0"
      },
      {
        gangwei:"前端开发工程师",
        money:"11-14千/月",
        area:"中山",
        time:"3-5年",
        xueli:"大专",
        shangjin:"400",
        fuli:["五险一金","交通补助","年终奖","弹性工作","环境舒适","餐补","下午茶","十三薪"],
        company:"中山市某某某有限公司",
        rongzi:"不需要融资",
        number:"50-100",
        type:"1"
      }
    ]
  },

删除

<view class="item" wx:for="{{gly}}" wx:key="index">
    <image src="/images/close.png" class="closebtn" catchtap="delete" data-index="{{index}}"></image>
    <view class="tx">姓名</view>
    <view class="name">{{item}}</view>
</view>

  

/**
  * 页面的初始数据
  */
 data: {
   gly:["张三","李四","老五"]
 },
  
// 删除管理员
delete:function(e){
  var that = this;
  var gly = that.data.gly;
  gly.splice(e.currentTarget.dataset.index,1);
  that.setData({
    gly: gly
  })
},