|
@@ -0,0 +1,123 @@
|
|
|
+<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;">查看</u-button>
|
|
|
+ <u-button type="primary" size="mini" style="margin-right: 15upx;">编辑</u-button>
|
|
|
+ <u-button type="error" size="mini">删除</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'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</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>
|