商城小程序-商品界面选择规格颜色等

原因：因为没有发现好用的组件，所以自己写了样式和判断方法，实际使用在真机演示时略显卡顿，等待后续优化

wxml：

商品图片、价格、以及选择规格颜色等信息

 

<view class="popup_information">

        <image src="{{data.productList[0].url}}" mode="" />

        <view class="money">

          <view>￥{{select_show?data.productList[0].price:select_conter.price}}{{select_show?'':'.00'}}</view>

          <view class="select_mr">

          <view>{{select_show?'请选择':'已选'}}</view>

          <block wx:for="{{data.specificationList}}" wx:key="index">

            <view wx:if="{{!item.show}}">{{item.name}}</view>

          </block>

          <block wx:for="{{select_conter.specifications}}" wx:key="index">

            <view wx:if="{{!select_show}}">{{item}}</view>

          </block>

          </view>

        </view>

      </view>

 

选择规格颜色等tag

 

<block wx:for="{{data.specificationList}}" wx:key="index">

        <view class="specifications">

        <view>

          {{item.name}}

        </view>

        <block wx:for="{{item.valueList}}" wx:key="index">

          <view data-id="{{item.id}}" bindtap="{{item.deleted=='nul'?'':'xuanze'}}" style="background: {{item.deleted=='nul'?'#f7f8fa':item.deleted?'#fde6e9':'#f7f8fa'}};color: {{item.deleted=='nul'?'#c8c9cc':item.deleted?'#ee0a24':'#323233'}};" class="specifications_item">

          {{item.value}}

        </view>

        </block>

      </view>

      </block>

 

js

 

data: {

    radio: true,

    ddd:false,

    gwc: 0,

    id: '',

    show: false,

    show2: false,

    number: 1,

    select_show:true,

    select_conter:{},

    qd:[]

  },

// 选择商品

  xuanze(e){

    let data = this.data.data

    let a=0

    let b=0

    for(let i in data.specificationList){

        for(let j in data.specificationList[i].valueList){

          if(data.specificationList[i].valueList[j].id==e.currentTarget.dataset.id){

            data.specificationList[i].valueList[j].deleted=!data.specificationList[i].valueList[j].deleted

            a=i

            b=j

            break

          }

        }

    }

    this.setData({

      data

    })

    this.yanzheng(a,b,data.specificationList[a].valueList[b].deleted)

  },

    // 验证tag选择状态

yanzheng(a,b,key){

  let data = this.data.data

  //还原其他行不可选状态

for(let i in data.specificationList){

  if(i!=a){

    for(let j in data.specificationList[i].valueList){

      if(data.specificationList[i].valueList[j].deleted=='nul'){

        data.specificationList[i].valueList[j].deleted=false

      }

    }

  }

}

this.setData({

  data

})

  // 验证本行

if(key){

  for(let i in data.specificationList[a].valueList){

    if(i!=b&&data.specificationList[a].valueList[i].deleted!='nul'){

      data.specificationList[a].valueList[i].deleted=false

    }

}

this.setData({

  data

})

// 验证其它行可选状态

for(let i in data.productList){

  if(data.productList[i].specifications[a]==data.specificationList[a].valueList[b].value){

    if(data.productList[i].number==0){

      for(let j in data.specificationList){

        if(j!=a){

          for(let d in data.specificationList[j].valueList){

            if(data.specificationList[j].valueList[d].value==data.productList[i].specifications[j]){

                data.specificationList[j].valueList[d].deleted='nul'

            }

          }

        }

      }

    }

  }

}

this.setData({

  data

})

}

this.jilu()

},

// 记录选项

jilu(){

  let data = this.data.data

  let qd = []

for(let i in data.specificationList){

for(let j in data.specificationList[i].valueList){

  if(data.specificationList[i].valueList[j].deleted&&data.specificationList[i].valueList[j].deleted!='nul'){

    data.specificationList[i].show=true

    qd[i] = data.specificationList[i].valueList[j].value

    break

  }

  data.specificationList[i].show=false

}

}

// 判断选择状态

for(let i in data.specificationList){

  this.setData({

    select_show:false

  })

  if(!data.specificationList[i].show){

    this.setData({

      select_show:true

    })

    break

  }

}

this.setData({

  data,

  qd  

})

if(!this.data.select_show){

  this.queding()

}else{

  this.setData({

    select_conter:[]

  })

}

},

// 确定选择项

queding(){

let data = this.data.data

let qd = this.data.qd

let select_conter=''

for(let i in data.productList){

  if(select_conter==''){

    select_conter=data.productList[i]

  }

  for(let j in data.productList[i].specifications){

    if(data.productList[i].specifications[j]!=qd[j]){

      select_conter=''

      break

    }

  }

  if(select_conter!=''){

    break

  }

}

this.setData({

  select_conter

})

},