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>
|