123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- <template>
- <view class="pageInfo">
- <!-- 自定义导航栏 -->
- <u-navbar title-color="#fff" back-icon-size="30" back-icon-color="#fff" :border-bottom="false" :background="background">
- <view class="slot-wrap">
- <view class="left-icon">
- 点检任务配置
- </view>
- <!-- 新增 -->
- <view class="right-icon" @click="openAddPage">
- <u-icon name="plus-circle" size="30" color="#fff" label="新增" label-color="#fff"></u-icon>
- <uni-font-icons type="icon-sousuo" size="16" color="#fff"></uni-font-icons>
- </view>
- </view>
- </u-navbar>
- <!-- 任务列表 -->
- <view class="pageBody">
- <view v-for="item in listData" :key="item.id" class="itemInfo">
- <view class="itemName">
- <span class="name">{{item.name}}</span>
- <u-switch size="40" v-model="item.checked"></u-switch>
- </view>
- <view class="itemName">
- <span>{{item.time}}</span>
- <span>
- <u-button v-if="item.checked==false" type="warning" size="mini" style="margin-right: 15upx;" @click="handetail">查看</u-button>
- <u-button type="primary" size="mini" style="margin-right: 15upx;" @click="handedit">编辑</u-button>
- <u-button type="error" size="mini" @click="handelete">删除</u-button>
- </span>
-
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default{
- data(){
- return{
- background: {
- // 渐变色
- backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
- },
- listData:[
- {name:'夏季活动',time:'2020-05-20',checked:true,controlStatus: false},
- {name:'夏季活动',time:'2020-05-20',checked:false},
- {name:'夏季活动',time:'2020-05-20',checked:true},
- {name:'夏季活动',time:'2020-05-20',checked:false},
- ]
- }
- },
- watch: {
- checked(val) {
- // 等于false,意味着用户手动关闭了switch
- if (val == false) {
- if(this.controlStatus == true) {
- this.controlStatus = false;
- return ;
- }
- // 重新打开switch,并让它处于加载中的状态
- this.checked = true;
- this.loading = true;
- // 模拟向后端发起请求
- this.getRestultFromServer();
- }
- }
- },
- methods:{
- openAddPage(){
- console.log('-------------------')
- uni.navigateTo({
- url:'/pages/spotCheckConfigure/addSpotCheck'
- })
- },
- // 查看详情
- handetail(){
- uni.navigateTo({
- url:'/pages/spotCheckConfigure/spotCheckDetail/spotCheckDetail'
- })
- },
- // 编辑
- handedit(){
- uni.navigateTo({
- url:'/pages/spotCheckConfigure/addSpotCheck'
- })
- },
- // 删除
- handelete(){
-
- }
- }
- }
- </script>
- <style lang="scss">
- page{
- height: 100%;
- background-color: #eee;
- }
- .slot-wrap {
- display: flex;
- align-items: center;
- /* 如果您想让slot内容占满整个导航栏的宽度 */
- flex: 1;
- /* 如果您想让slot内容与导航栏左右有空隙 */
- padding: 0 30rpx 0 0;
- color: #fff;
- font-size: 28upx;
- .left-icon{
- flex-grow: 1;
- font-size: 32upx;
- }
- .right-icon{
- padding-left:50upx;
- }
- .uni-icons{
- margin-right: 10upx;
- }
- }
- .pageBody{
- .itemInfo{
- margin: 20upx;
- background-color: #fff;
- border-radius: 3px;
- .itemName{
- padding: 25upx 35upx;
- display: flex;
- justify-content: space-between;
- }
- .itemName:first-child{
- border-bottom: 1px solid #f8f8f8;
- }
- }
-
-
-
- }
- </style>
|