Commit 545aaa8de1304d47133835052f60eadf159fd254
1 parent
e63897b4
标签页排版
Showing
4 changed files
with
240 additions
and
0 deletions
pages/user/labels/labels.js
0 → 100644
| 1 | +// pages/user/labels/labels.js | ||
| 2 | +Page({ | ||
| 3 | + | ||
| 4 | + /** | ||
| 5 | + * 页面的初始数据 | ||
| 6 | + */ | ||
| 7 | + data: { | ||
| 8 | + interest_lables: [{ | ||
| 9 | + lable: "学生" | ||
| 10 | + }, { | ||
| 11 | + lable: "学生", | ||
| 12 | + check: 0 | ||
| 13 | + }, { | ||
| 14 | + lable: "学生", | ||
| 15 | + check: 0 | ||
| 16 | + }, { | ||
| 17 | + lable: "学生", | ||
| 18 | + check: 0 | ||
| 19 | + }, { | ||
| 20 | + lable: "学生", | ||
| 21 | + check: 0 | ||
| 22 | + }, { | ||
| 23 | + lable: "学生", | ||
| 24 | + check: 0 | ||
| 25 | + }, { | ||
| 26 | + lable: "学生", | ||
| 27 | + check: 0 | ||
| 28 | + }, { | ||
| 29 | + lable: "学生", | ||
| 30 | + check: 0 | ||
| 31 | + }, { | ||
| 32 | + lable: "学生" | ||
| 33 | + }, { | ||
| 34 | + lable: "学生", | ||
| 35 | + check: 0 | ||
| 36 | + }, { | ||
| 37 | + lable: "学生", | ||
| 38 | + check: 0 | ||
| 39 | + }, { | ||
| 40 | + lable: "学生", | ||
| 41 | + check: 0 | ||
| 42 | + }, { | ||
| 43 | + lable: "学生", | ||
| 44 | + check: 0 | ||
| 45 | + }, { | ||
| 46 | + lable: "学生", | ||
| 47 | + check: 0 | ||
| 48 | + }, { | ||
| 49 | + lable: "学生", | ||
| 50 | + check: 0 | ||
| 51 | + }], //兴趣标签 | ||
| 52 | + check_label: [], //用户选中的标签集合 | ||
| 53 | + }, | ||
| 54 | + //点击选择兴趣标签把值放到已选中 | ||
| 55 | + click_label: function(e) { | ||
| 56 | + var th = this; | ||
| 57 | + var index = e.currentTarget.dataset.index; //选择兴趣标签的下标 | ||
| 58 | + var labels = th.data.interest_lables; //兴趣标签数组 | ||
| 59 | + var check_label = th.data.check_label; //已选中的数组 | ||
| 60 | + var labels_cid = th.data.interest_lables[index].check; //当前标签是否选中 | ||
| 61 | + var labels_check = 'interest_lables[' + index + '].check'; //用于点击标签把点击状态赋值进去 | ||
| 62 | + if (labels_cid) { | ||
| 63 | + labels_cid = 0; | ||
| 64 | + | ||
| 65 | + } else { | ||
| 66 | + labels_cid = 1; | ||
| 67 | + } | ||
| 68 | + //循环看哪些标签选中 | ||
| 69 | + for (var i = 0; i < labels.length; i++) { | ||
| 70 | + if (labels[i].check) { | ||
| 71 | + check_label.push(labels[i].lable); | ||
| 72 | + } | ||
| 73 | + } | ||
| 74 | + th.setData({ | ||
| 75 | + [labels_check]: labels_cid, | ||
| 76 | + check_label: check_label | ||
| 77 | + }) | ||
| 78 | + | ||
| 79 | + }, | ||
| 80 | + // var th = this; | ||
| 81 | + // var evaluate = th.data.is_evaluate; //0为未评价，未评价才可点击标签 | ||
| 82 | + // if(evaluate == 0) { | ||
| 83 | + // var index = e.currentTarget.dataset.index; | ||
| 84 | + // var label_id = th.data.labels[index].check; | ||
| 85 | + // var labels = 'labels[' + index + '].check'; | ||
| 86 | + // if (label_id) { | ||
| 87 | + // label_id = 0 | ||
| 88 | + // } else { | ||
| 89 | + // label_id = 1 | ||
| 90 | + // } | ||
| 91 | + // th.setData({ | ||
| 92 | + // [labels]: label_id | ||
| 93 | + // }) | ||
| 94 | + // } | ||
| 95 | + | ||
| 96 | + /** | ||
| 97 | + * 生命周期函数--监听页面加载 | ||
| 98 | + */ | ||
| 99 | + onLoad: function(options) { | ||
| 100 | + | ||
| 101 | + }, | ||
| 102 | + | ||
| 103 | + /** | ||
| 104 | + * 生命周期函数--监听页面显示 | ||
| 105 | + */ | ||
| 106 | + onShow: function() { | ||
| 107 | + | ||
| 108 | + }, | ||
| 109 | + | ||
| 110 | + /** | ||
| 111 | + * 页面上拉触底事件的处理函数 | ||
| 112 | + */ | ||
| 113 | + onReachBottom: function() { | ||
| 114 | + | ||
| 115 | + } | ||
| 116 | +}) | ||
| 0 | \ No newline at end of file | 117 | \ No newline at end of file |
pages/user/labels/labels.json
0 → 100644
pages/user/labels/labels.wxml
0 → 100644
| 1 | +<view class="container"> | ||
| 2 | + <!-- 兴趣标签集合 --> | ||
| 3 | + <view class="lables padding"> | ||
| 4 | + <!-- 兴趣标签标题 --> | ||
| 5 | + <view class="flex-vertical-between labels_head"> | ||
| 6 | + <view class="fs36">兴趣标签</view> | ||
| 7 | + <view class="skip flex-center fs28"> | ||
| 8 | + <view>跳过</view> | ||
| 9 | + </view> | ||
| 10 | + </view> | ||
| 11 | + | ||
| 12 | + <!-- 标签内容 --> | ||
| 13 | + <view class="label_aggregate"> | ||
| 14 | + <!-- 单个标签 --> | ||
| 15 | + <view class="label fs28 ellipsis-1 {{item.check==1?'click':''}}" wx:for="{{interest_lables}}" wx:for-item="item" wx:for-index="index" data-index="{{index}}" bindtap="click_label"> | ||
| 16 | + <view>{{item.lable}}</view> | ||
| 17 | + </view> | ||
| 18 | + </view> | ||
| 19 | + | ||
| 20 | + </view> | ||
| 21 | + | ||
| 22 | + <!-- 选中的兴趣集合标签 --> | ||
| 23 | + <view class="padding"> | ||
| 24 | + <view class="fs32 check_head">已选中</view> | ||
| 25 | + <view class="check_labels"> | ||
| 26 | + <view class="check_label ellipsis-1 fs28" wx:for="{{check_label}}" wx:for-item="it" wx:for-index="key"> | ||
| 27 | + <view> | ||
| 28 | + {{it}} | ||
| 29 | + </view> | ||
| 30 | + </view> | ||
| 31 | + </view> | ||
| 32 | + </view> | ||
| 33 | + | ||
| 34 | + <view class="flex-center"> | ||
| 35 | + <!-- 领取选择标签的奖励按钮 --> | ||
| 36 | + <view class="receive flex-center fs36"> | ||
| 37 | + <view>领取200成长值</view> | ||
| 38 | + </view> | ||
| 39 | + </view> | ||
| 40 | + | ||
| 41 | + | ||
| 42 | + | ||
| 43 | +</view> | ||
| 0 | \ No newline at end of file | 44 | \ No newline at end of file |
pages/user/labels/labels.wxss
0 → 100644
| 1 | +.padding { | ||
| 2 | + padding: 0rpx 65rpx; | ||
| 3 | +} | ||
| 4 | + | ||
| 5 | +.container { | ||
| 6 | + border-top: 6rpx solid rgb(238, 238, 238); | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +.labels_head { | ||
| 10 | + padding-top: 60rpx; | ||
| 11 | + padding-bottom: 25rpx; | ||
| 12 | + border-bottom: 3rpx solid rgb(238, 238, 238); | ||
| 13 | +} | ||
| 14 | + | ||
| 15 | +.skip { | ||
| 16 | + width: 100rpx; | ||
| 17 | + height: 40rpx; | ||
| 18 | + line-height: 45rpx; | ||
| 19 | + border: 2rpx solid rgb(155, 155, 155); | ||
| 20 | + border-radius: 30rpx; | ||
| 21 | + color: rgb(153, 153, 153); | ||
| 22 | +} | ||
| 23 | + | ||
| 24 | +.label_aggregate { | ||
| 25 | + height: 520rpx; | ||
| 26 | + padding-top: 30rpx; | ||
| 27 | + overflow-y: scroll; | ||
| 28 | +} | ||
| 29 | + | ||
| 30 | +.label { | ||
| 31 | + display: inline-block; | ||
| 32 | + max-width: 200rpx; | ||
| 33 | + height: 46rpx; | ||
| 34 | + border: 2rpx solid rgb(204, 204, 204); | ||
| 35 | + border-radius: 30rpx; | ||
| 36 | + line-height: 46rpx; | ||
| 37 | + padding: 0rpx 30rpx; | ||
| 38 | + margin-right: 25rpx; | ||
| 39 | + margin-bottom: 45rpx; | ||
| 40 | +} | ||
| 41 | +.click{ | ||
| 42 | + border: 2rpx solid rgb(255, 138, 160); | ||
| 43 | + background-color: rgb(255, 138, 160); | ||
| 44 | +} | ||
| 45 | +.check_head { | ||
| 46 | + padding-top: 50rpx; | ||
| 47 | + padding-bottom: 25rpx; | ||
| 48 | + border-bottom: 3rpx solid rgb(238, 238, 238); | ||
| 49 | + margin-bottom: 30rpx; | ||
| 50 | +} | ||
| 51 | + | ||
| 52 | +.check_label { | ||
| 53 | + display: inline-block; | ||
| 54 | + max-width: 200rpx; | ||
| 55 | + height: 46rpx; | ||
| 56 | + border: 2rpx solid rgb(255, 138, 160); | ||
| 57 | + line-height: 46rpx; | ||
| 58 | + margin-right: 25rpx; | ||
| 59 | + margin-bottom: 45rpx; | ||
| 60 | + padding: 0rpx 30rpx; | ||
| 61 | + border-radius: 30rpx; | ||
| 62 | + color: rgb(255, 255, 255); | ||
| 63 | + background-color: rgb(255, 138, 160); | ||
| 64 | +} | ||
| 65 | +.receive{ | ||
| 66 | + position: fixed; | ||
| 67 | + bottom:100rpx; | ||
| 68 | + width: 620rpx; | ||
| 69 | + height: 70rpx; | ||
| 70 | + line-height: 70rpx; | ||
| 71 | + background-color: rgb(255, 138, 160); | ||
| 72 | + color: rgb(255, 255, 255); | ||
| 73 | + border-radius: 40rpx; | ||
| 74 | +} | ||
| 75 | +.check_labels{ | ||
| 76 | + height: 300rpx; | ||
| 77 | + overflow-y: scroll; | ||
| 78 | +} | ||
| 0 | \ No newline at end of file | 79 | \ No newline at end of file |