2019-07-16 条件选择 组件 唯一的条件值

2019-07-16  本文已影响0人  太阳照常升起_9c4e
image.png
<!--pages/component/product_sort/index.wxml-->
<!-- 条件选择 start -->
    <view class="product-header">
        <view wx:for="{{condition}}" wx:key='index' bindtap="on_slect" data-id="{{item.id}}" class="product-header-title {{item.img_display!=true?'yellow':''}}">{{item.name}}<image src="https://dk-shop-img.oss-cn-beijing.aliyuncs.com/icon_top_bottom.png" wx:if="{{item.imgnone}}" hidden="{{item.img_display}}" class="user-arrow {{item.fx!=true?'rotate':'rotate1'}}"></image></view> 
      </view>  
  <!-- 条件选择 End -->
var curindex = 0;
//请求数据初始化值
var ifLoadMore = null;
var order = 0;//默认综合排序列
var orderindex = 0;//默认排序id
Component({
  properties: {
  },
  data: {
    // 这里是一些组件内部数据
    condition: [
      { "id": 0, "name": "综合", "img_display": false, "yellow": "yellow", "fx": false, "imgnone": false },
      { "id": 1, "name": "佣金", "img_display": true, "yellow": "", "fx": false, "imgnone": true },
      { "id": 2, "name": "价格", "img_display": true, "yellow": "", "fx": false, "imgnone": true },
      { "id": 3, "name": "销量", "img_display": true, "yellow": "", "fx": false, "imgnone": true }
    ],
    //排序方式:0-综合排序;1-按佣金比率升序;2-按佣金比例降序;3-按价格升序;4-按价格降序;5-按销量升序;6-按销量降序;
    orders: [
      [
        { "id": 0, "title": 0, "msg": "综合排序" },
        { "id": 1, "title": 0, "msg": "综合排序" }],
      [{ "id": 0, "title": 1, "msg": "佣金比率升序" },
      { "id": 1, "title": 2, "msg": "按佣金比例降序" }],
      [{ "id": 0, "title": 3, "msg": "按价格升序" },
      { "id": 1, "title": 4, "msg": "按价格降序" }],
      [{ "id": 0, "title": 5, "msg": "按销量升序" },
      { "id": 1, "title": 6, "msg": "按销量降序" }]
    ],
  },
  methods: {
    // 这里放置自定义方法
    //条件选择器
    on_slect: function (event) {
      let e = event.currentTarget.dataset,
        that = this,
        id = e.id,
        list = this.data.condition,
        belist = this.data.condition[curindex];//上一个选中所在
      order = id
      //判断是点击第二次
      if (id === curindex) {
        // //改变排序
        if (orderindex === 0) {
          orderindex = 1
        } else {
          orderindex = 0
        }
        //改变 图标方向 最高 最低
        let fx = `condition[${id}].fx`;
        this.setData({
          [fx]: !this.data.condition[id].fx
        })
      } else {
        //改变排序
        orderindex = 0
        //初始化 图片箭头方向
        let fx = `condition[${id}].fx`;
        this.setData({
          [fx]: false
        })
      }
      //修改数组中对象的值
      let img_display = `condition[${curindex}].img_display`;
      this.setData({
        [img_display]: true
      })
      img_display = `condition[${id}].img_display`;
      this.setData({
        [img_display]: false
      })
      curindex = id
      // this.setData({
      //   goodsResultList: []
      // })
      // page = 1
      let order_id = this.data.orders[order][orderindex].title//按照什么排序
      console.log("排序是:"+order_id)
      // // this.getoptList(leixing, order_id)
      this.triggerEvent('myevent', { order_id: order_id });
    },
  },
  ready() {
    console.log(this.data.orders);
  },
})
<!-- 调用 综合排序组件 -->
<product_sort bind:myevent="onMyEvent"/>
上一篇下一篇

猜你喜欢

热点阅读