95 lines
2.2 KiB
Vue
95 lines
2.2 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="uni-list">
|
||
<view class="uni-list-cell">
|
||
<view class="uni-list-cell-left">
|
||
车间：
|
||
</view>
|
||
<view class="uni-list-cell-db">
|
||
<picker @change="bindPickerChange" :value="index" :range="unitRange">
|
||
<view class="uni-input">{{unitRange[index]}}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<uni-section title="自定义列数" type="line" padding>
|
||
<uni-grid :column="3" :highlight="true" @change="change">
|
||
<uni-grid-item v-for="(item, index) in 9" :index="index" :key="index">
|
||
<view class="grid-item-box" style="background-color: #fff;">
|
||
<uni-icons type="image" :size="30" color="#777" />
|
||
<text class="text">{{username}}</text>
|
||
<text class="text">{{age}}</text>
|
||
</view>
|
||
</uni-grid-item>
|
||
</uni-grid>
|
||
</uni-section>
|
||
<button type="default" @click="addAge">add</button>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import store from '@/store/index.js'
|
||
import { mapState, mapMutations } from 'vuex'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
unitRange: ['IOT', 'SMART', '光源板厂', '自动化中心'],
|
||
index: 0
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
...mapMutations(['addAge']),
|
||
bindPickerChange: function(e) {
|
||
this.index = e.detail.value
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
username: state => state.homeModule.username,
|
||
age: state => state.homeModule.age
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.uni-list-cell-left {
|
||
font-weight: bold;
|
||
}
|
||
.uni-list {
|
||
padding: 10px;
|
||
}
|
||
.uni-list-cell {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
.uni-input {
|
||
color: #f00;
|
||
}
|
||
.grid-item-box {
|
||
flex: 1;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 15px 0;
|
||
}
|
||
|
||
.grid-item-box-row {
|
||
flex: 1;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 15px 0;
|
||
}
|
||
</style>
|