<template>
|
<view class="body">
|
<view class="main_view">
|
<view class="main_item" @click="goPage(0)">
|
<span style="color:#4F4F4F">类别</span>
|
<view>
|
<span style="color:#333333;margin-right: 20rpx;">{{ query.type }}</span>
|
<u-icon name="arrow-right" color="#687792" size="28"></u-icon>
|
</view>
|
</view>
|
<view class="main_item" @click="goPage(1)">
|
<span style="color:#4F4F4F">规格型号</span>
|
<view>
|
<span style="color:#333333;margin-right: 20rpx;">{{ query.model }}</span>
|
<u-icon name="arrow-right" color="#687792" size="28"></u-icon>
|
</view>
|
</view>
|
<view class="main_item" @click="goPage(2)">
|
<span style="color:#4F4F4F">图号</span>
|
<view>
|
<span style="color:#333333;margin-right: 20rpx;">{{ query.num }}</span>
|
<u-icon name="arrow-right" color="#687792" size="28"></u-icon>
|
</view>
|
</view>
|
<view class="main_item" @click="goPage(3)">
|
<span style="color:#4F4F4F">本体特征结构</span>
|
<view>
|
<span style="color:#333333;margin-right: 20rpx;">{{ query.structure }}</span>
|
<u-icon name="arrow-right" color="#687792" size="28"></u-icon>
|
</view>
|
</view>
|
<view class="main_item" @click="goPage(4)">
|
<span style="color:#4F4F4F">第一位</span>
|
<view>
|
<span style="color:#333333;margin-right: 20rpx;">{{ query.first }}</span>
|
<u-icon name="arrow-right" color="#687792" size="28"></u-icon>
|
</view>
|
</view>
|
<view class="main_item" @click="goPage(5)">
|
<span style="color:#4F4F4F">第二位</span>
|
<view>
|
<span style="color:#333333;margin-right: 20rpx;">{{ query.second }}</span>
|
<u-icon name="arrow-right" color="#687792" size="28"></u-icon>
|
</view>
|
</view>
|
</view>
|
<u-select v-model="selectShowType" :list="TypeList" @confirm="confirm($event, 'type')"></u-select>
|
<u-select v-model="selectShowModels" :list="modelsList" @confirm="confirm($event, 'model')"></u-select>
|
<u-select v-model="selectShowNum" :list="numList" @confirm="confirm($event, 'num')"></u-select>
|
<u-select v-model="selectShowStructure" :list="structureList" @confirm="confirm($event, 'structure')"></u-select>
|
<u-select v-model="selectShowFirst" :list="firstList" @confirm="confirm($event, 'first')"></u-select>
|
<u-select v-model="selectShowSecond" :list="secondList" @confirm="confirm($event, 'second')"></u-select>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "tool",
|
// import 引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
// 这里存放数据
|
return {
|
query: {
|
type: '',
|
model: '',
|
num: '',
|
structure: '',
|
first: '',
|
second: '',
|
},
|
selectShowType: false,
|
selectShowModels: false,
|
selectShowNum: false,
|
selectShowStructure: false,
|
selectShowFirst: false,
|
selectShowSecond: false,
|
TypeList: [
|
{
|
value: '1',
|
label: '干式变压器成品'
|
},
|
{
|
value: '2',
|
label: '干式变压器成品'
|
},
|
],
|
modelsList: [
|
{
|
value: '1',
|
label: 'SCB18-1600/10'
|
},
|
],
|
numList: [
|
{
|
value: '1',
|
label: 'G2023.1'
|
},
|
],
|
structureList: [
|
{
|
value: '1',
|
label: '00'
|
},
|
],
|
firstList: [
|
{
|
value: '0',
|
label: '力得常规温控仪'
|
},
|
{
|
value: '1',
|
label: '力得常规温控箱'
|
},
|
],
|
secondList: [
|
{
|
value: '0',
|
label: '1.5mm钢板外壳RAL7035（电磁锁＋行程开关）下进上出、下进侧出，散装、落地安装+常规尺寸'
|
},
|
{
|
value: '1',
|
label: '0.7m201不锈钢外壳本色（电磁锁+行程开关）下进上出、下进侧出，散装、落地安装＋常规尺寸'
|
},
|
],
|
}
|
},
|
// 方法集合
|
methods: {
|
goPage (index) {
|
switch(index){
|
case 0:
|
this.selectShowType = true;
|
break;
|
case 1:
|
this.selectShowModels = true;
|
break;
|
case 2:
|
this.selectShowNum = true;
|
break;
|
case 3:
|
this.selectShowStructure = true;
|
break;
|
case 4:
|
this.selectShowFirst = true;
|
break;
|
case 5:
|
this.selectShowSecond = true;
|
break;
|
}
|
},
|
confirm (e, item) {
|
console.log('e--', e)
|
console.log('item--', item)
|
switch(item){
|
case 'type':
|
this.query.type = e[0].label;
|
break;
|
case 'model':
|
this.query.model = e[0].label;
|
break;
|
case 'num':
|
this.query.num = e[0].label;
|
break;
|
case 'structure':
|
this.query.structure = e[0].label;
|
break;
|
case 'first':
|
this.query.first = e[0].label;
|
break;
|
case 'second':
|
this.query.second = e[0].label;
|
break;
|
}
|
},
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.body {
|
background: linear-gradient(to bottom, #E5F0FF, #F6F9FF);
|
box-sizing: border-box;
|
padding-top: 26rpx;
|
height: calc(100vh - 188rpx);
|
.main_view {
|
//background-image: url('~@/static/custom/home/home_img_bg.png');
|
//background-repeat: no-repeat;
|
//background-size: 100% auto;
|
background: linear-gradient(180deg, #DFEDFF 0%, #F7F7F8 100%);
|
border-radius: 15rpx;
|
height: 936rpx;
|
margin: 6rpx 30rpx 0;
|
box-sizing: border-box;
|
padding: 38rpx 26rpx;
|
.main_item{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 30rpx;
|
line-height: 112rpx;
|
border-bottom: 1rpx solid rgba(213,213,213, 0.67);
|
box-sizing: border-box;
|
}
|
}
|
}
|
</style>
|
