<!-- 资产清单 -->
|
<template>
|
<view>
|
<view class="">
|
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
|
<block slot="backText">返回</block>
|
<block slot="content">资产清单</block>
|
</cu-custom>
|
</view>
|
<view class="search-box">
|
<view class="item">
|
<u-search placeholder="请输入关键字" v-model="keyword" :clearabled="true" :show-action="false"></u-search>
|
</view>
|
</view>
|
<view class="">
|
<u-cell-group>
|
<u-cell @click="showPicker" title="分类" isLink>
|
<image slot="icon" class="u-cell-icon" src="https://cdn.uviewui.com/uview/demo/picker/5.png"
|
mode="widthFix"></image>
|
</u-cell>
|
</u-cell-group>
|
<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="cancel"
|
@change="changeHandler">
|
</u-picker>
|
</view>
|
|
<!-- 搜索结果 -->
|
<view class="cu-list menu-avatar">
|
<view class="cu-item">
|
<view class="cu-avatar radius lg"
|
style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);">
|
</view>
|
<view class="content">
|
<view>
|
<view class="text-cut text-bold text-xl">课桌</view>
|
<view class="cu-tag radius bg-orange sm">数量：100</view>
|
</view>
|
<view class="text-gray text-sm flex">
|
<view class="text-cut">规格：120*120 白色 编码：1234533333</view>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
|
<view class="">
|
<u-empty mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png">
|
</u-empty>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
keyword: '',
|
show: false,
|
columns: [
|
['中国', '美国'],
|
['深圳', '厦门', '上海', '拉萨']
|
],
|
columnData: [
|
['深圳', '厦门', '上海', '拉萨'],
|
['得州', '华盛顿', '纽约', '阿拉斯加']
|
]
|
}
|
},
|
methods: {
|
changeHandler(e) {
|
const {
|
columnIndex,
|
value,
|
values, // values为当前变化列的数组内容
|
index,
|
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
picker = this.$refs.uPicker
|
} = e
|
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
if (columnIndex === 0) {
|
// picker为选择器this实例，变化第二列对应的选项
|
picker.setColumnValues(1, this.columnData[index])
|
}
|
},
|
// 回调参数为包含columnIndex、value、values
|
confirm(e) {
|
console.log('confirm', e)
|
this.show = false
|
},
|
cancel() {
|
// console.log('cancel');
|
this.show = false
|
},
|
showPicker() {
|
this.show = true;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.search-box {
|
padding: 30rpx 30rpx 30rpx 30rpx;
|
// border: 1rpx red solid;
|
}
|
|
// 使用了cell组件的icon图片样式
|
.u-cell-icon {
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 8rpx;
|
}
|
</style>
|
