一、产品资料库
- wxml
<view class="page__bd">
<view class="weui-search-bar">
<view class="weui-search-bar__form">
<view class="weui-search-bar__box">
<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
<input type="text" class="weui-search-bar__input" placeholder="请输入产品型号" value="{{inputVal}}" focus="{{inputShowed}}" bindblur="blurChoice" bindinput="inputTyping" bindconfirm="searchShow" />
<view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
<icon type="clear" size="14"></icon>
</view>
</view>
<label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
<icon class="weui-icon-search" type="search" size="14"></icon>
<view class="weui-search-bar__text">请输入产品型号</view>
</label>
</view>
<view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
</view>
<view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}">
<view wx:for="{{searchList}}" class="weui-cell__bd" data-index="{{index}}" bindtap="searchConfirm">
<view>{{item.shortName}}</view>
</view>
</view>
</view>
<view class="page-head element-ctrl">
<view bindtap="openCategory" class="chioce-item" data-item="1" category-id="{{curType}}">
{{category}}
<image style="50rpx;height:50rpx;" class="icon-chioce" src="{{!isstart?openimg: offimg}}"></image>
</view>
<view bindtap="openCategory" class="chioce-item" data-item="2" model-id="{{curModel}}">
{{modelX}}
<image style="50rpx;height:50rpx;" class="icon-chioce" src="{{!isstart2?openimg: offimg}}"></image>
</view>
</view>
<view>
<!-- 所有类 -->
<view class="sorting-lits{{!isstart?' chioce-list-hide':' chioce-list-show'}}">
<view wx:for="{{CategoryList}}" catchtap="onclicks1" data-index="{{index}}" class="sorting-item" hover-class="click-category" wx:key="userInfoListId" >{{item.name}}</view>
<!-- <view wx:for="{{CategoryList}}" bindtap="PickCategory" type-index="{{index}}">{{item.name}}</view> -->
</view>
</view>
<view>
<!-- 产品 -->
<view class="sorting-lits{{!isstart2?' chioce-list-hide':' chioce-list-show'}}">
<view wx:for="{{curChooseModel}}" catchtap="onclicks2" data-index="{{index}}" class="sorting-item" hover-class="click-category" wx:key="userInfoListId" >{{item.name}}</view>
<!-- <view wx:for="{{CategoryList}}" bindtap="PickCategory" type-index="{{index}}">{{item.name}}</view> -->
</view>
</view>
<!--产品信息展示区域-->
<view class="element-ctrl">
<view class="page-head" hover-class="click-category">
<view class="table-cell cell-left">产品信息</view>
<view class="table-cell cell-right">描述</view>
</view>
<view class="page-head" hover-class="click-category">
<view class="table-cell cell-left">型号</view>
<view class="table-cell cell-right">{{curShowModel.shortName}}</view>
</view>
<view class="page-head" hover-class="click-category">
<view class="table-cell cell-left">长 cm</view>
<view class="table-cell cell-right">{{curShowModel.length}}</view>
</view>
<view class="page-head" hover-class="click-category">
<view class="table-cell cell-left">宽 cm</view>
<view class="table-cell cell-right">{{curShowModel.width}}</view>
</view>
<view class="page-head" hover-class="click-category">
<view class="table-cell cell-left">高 cm</view>
<view class="table-cell cell-right">{{curShowModel.height}}</view>
</view>
<view class="page-head" hover-class="click-category">
<view class="table-cell cell-left">容积 m<sup>3</sup></view>
<view class="table-cell cell-right">{{curShowModel.volumn}}</view>
</view>
<view class="page-head" hover-class="click-category">
<view class="table-cell cell-left">是否控温?</view>
<view class="table-cell cell-right">{{curShowModel.tem_ctrl?"是":"否"}}</view>
</view>
<view wx:if="{{curShowModel.tem_ctrl==1}}" class="page-head" hover-class="click-category">
<view class="table-cell cell-left">控温下限℃</view>
<view class="table-cell cell-right">{{curShowModel.tem_ctrl_low}}</view>
</view>
<view wx:if="{{curShowModel.tem_ctrl==1}}" class="page-head" hover-class="click-category">
<view class="table-cell cell-left">控温上限℃</view>
<view class="table-cell cell-right">{{curShowModel.tem_ctrl_high}}</view>
</view>
</view>
<view class="element-ctrl">
<view>说明：</view>
<text class="productSummary" space="emsp"> {{curShowModel.summary}}</text>
</view>
<view class="element-ctrl">
<image src="{{curShowModel.pic_addr}}"></image>
</view>
- js
Page({
data: {
inputShowed: false,
inputVal: "",
category:"类别选择",
modelX:"型号选择",
curType:0,
curModel:0,
searchList: [{ id: 0, name: "AI600信息试剂药剂管理柜", shortName: "AI600", length: 60, 60, height: 180, volumn: 600, tem_ctrl: 0, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" }],
CategoryList:[
{id:"ai6",name:"AI600系列"},
{id:"se8",name:"SE800系列"},
{id:"rc2",name:"RC2000系列"},
{id:"rc3",name:"RC3000系列"},
],
allProducts:
{
"ai6": [
{type_id:"ai6", id: 0, name: "AI600信息试剂药剂管理柜", shortName: "AI600", length: 60, 60, height: 180, volumn: 500, tem_ctrl: 0, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },
{type_id: "ai6", id: 1, name: "AI610信息试剂药剂管理柜", shortName: "AI610", length: 60, 60, height: 180, volumn: 501, tem_ctrl: 1, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },
{ type_id: "ai6", id: 2, name: "AI620信息试剂药剂管理柜", shortName: "AI620", length: 60, 60, height: 180, volumn: 500, tem_ctrl: 1, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" }
],
"se8": [
{ type_id: "se8", id: 0, name: "SE800信息试剂药剂管理柜", shortName: "SE800", length: 60, 60, height: 180, volumn: 500, tem_ctrl: 0, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },
{ type_id: "se8", id: 1, name: "SE810信息试剂药剂管理柜", shortName: "SE810", length: 60, 60, height: 180, volumn: 501, tem_ctrl: 1, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },
{ type_id: "se8", id: 2, name: "SE820信息试剂药剂管理柜", shortName: "SE820", length: 60, 60, height: 180, volumn: 500, tem_ctrl: 1, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" }
],
"rc2": [
{ type_id: "rc2", id: 0, name: "RC2000信息试剂药剂管理柜", shortName: "RC2000", length: 60, 60, height: 180, volumn: 500, tem_ctrl: 0, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },
{ type_id: "rc2", id: 1, name: "RC2000S信息试剂药剂管理柜", shortName: "RC2000S", length: 60, 60, height: 180, volumn: 501, tem_ctrl: 1, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },
],
"rc3": [
{ type_id: "rc3", id: 0, name: "RC3000信息试剂药剂管理柜", shortName: "RC3000", length: 60, 60, height: 180, volumn: 500, tem_ctrl: 0, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },
{ type_id: "rc3", id: 1, name: "RC3000S信息试剂药剂管理柜", shortName: "RC3000S", length: 60, 60, height: 180, volumn: 501, tem_ctrl: 1, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },
]
},
curChooseModel:[],
curShowModel: { id: 0, name: "AI600信息试剂药剂管理柜", shortName: "AI600", length: 60, 60, height: 180, volumn: 600, tem_ctrl: 0, summary: "产品简介、说明...", pic_addr:"/images/product/AI620.png"},
isstart: false,
isstart2:false,
openimg: "/images/down_arrow.jpg",
offimg: "/images/up_arrow.jpg"
},
openCategory: function (e) {
switch (e.currentTarget.dataset.item) {
case "1":
if (this.data.isstart) {
this.setData({
isstart: false,
});
}
else {
this.setData({
isstart2: false,
isstart: true,
});
}
break;
case "2":
if (this.data.isstart2) {
this.setData({
isstart2:false,
})
}
else {
this.setData({
isstart:false,
isstart2:true,
})
}
}
},
onclicks1: function (e) {
var index = e.currentTarget.dataset.index;
let name = this.data.CategoryList[index].name;
this.setData({
isstart: false,
isfinish: false,
isdates: false,
//start: this.data.CategoryList[index].name,
category:this.data.CategoryList[index].name,
curType:this.data.CategoryList[index].id,
curChooseModel: this.data.allProducts[this.data.CategoryList[index].id]
})
},
onclicks2: function (e) {
var index = e.currentTarget.dataset.index;
let name = this.data.curChooseModel[index].name;
this.setData({
isstart2: false,
isfinish: false,
isdates: false,
modelX: this.data.curChooseModel[index].shortName,
curModel: this.data.curChooseModel[index].id,
curShowModel:this.data.curChooseModel[index]
})
},
showInput: function () {
this.setData({
inputShowed: true
});
},
hideInput: function () {
this.setData({
inputVal: "",
inputShowed: false
});
},
clearInput: function () {
this.setData({
inputVal: ""
});
},
inputTyping: function (event) {
this.setData({
inputVal: event.detail.value
});
var value = event.detail.value;
var reg = RegExp(value, "i");
var matchList = [];
for (var key in this.data.allProducts) {
for (var i = 0; i < this.data.allProducts[key].length; i++) {
if (reg.test(this.data.allProducts[key][i]["name"])) {
matchList.push(this.data.allProducts[key][i])
}
}
}
this.setData({ searchList: matchList });
},
blurChoice:function (event) {
},
searchShow: function (event) {
var value = event.detail.value;
var reg = RegExp(value,"i");
var matchList = [];
for(var key in this.data.allProducts){
for(var i=0;i<this.data.allProducts[key].length;i++){
if(reg.test(this.data.allProducts[key][i]["name"])){
matchList.push(this.data.allProducts[key][i])
}
}
}
this.setData({searchList:matchList});
},
searchConfirm:function (event) {
var index = event.currentTarget.dataset.index;
let name = this.data.searchList[index].name;
this.setData({
isstart2: false,
isfinish: false,
isdates: false,
modelX: this.data.searchList[index].shortName,
curModel: this.data.searchList[index].id,
curShowModel: this.data.searchList[index],
searchList:[],
inputVal: this.data.searchList[index].shortName
})
}
})