wxd / MShopWeApp

Commit 545aaa8de1304d47133835052f60eadf159fd254

Authored by DESKTOP-QHAFKU5\iceling
1 parent e63897b4

标签页排版

Inline Side-by-side
Showing 4 changed files with 240 additions and 0 deletions
pages/user/labels/labels.js 0 → 100644
  View file @545aaa8
  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 117 \ No newline at end of file
... ...
pages/user/labels/labels.json 0 → 100644
  View file @545aaa8
  1 +{
  2 + "navigationBarTitleText": "兴趣标签"
  3 +}
0 4 \ No newline at end of file
... ...
pages/user/labels/labels.wxml 0 → 100644
  View file @545aaa8
  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 44 \ No newline at end of file
... ...
pages/user/labels/labels.wxss 0 → 100644
  View file @545aaa8
  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 79 \ No newline at end of file
... ...