spotCheckList.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <view class="pageInfo">
  3. <!-- 自定义导航栏 -->
  4. <u-navbar title-color="#fff" back-icon-size="30" back-icon-color="#fff" :border-bottom="false" :background="background">
  5. <view class="slot-wrap">
  6. <view class="left-icon">
  7. 点检任务配置
  8. </view>
  9. <!-- 新增 -->
  10. <view class="right-icon" @click="openAddPage">
  11. <u-icon name="plus-circle" size="30" color="#fff" label="新增" label-color="#fff"></u-icon>
  12. <uni-font-icons type="icon-sousuo" size="16" color="#fff"></uni-font-icons>
  13. </view>
  14. </view>
  15. </u-navbar>
  16. <!-- 任务列表 -->
  17. <view class="pageBody">
  18. <view v-for="item in listData" :key="item.id" class="itemInfo">
  19. <view class="itemName">
  20. <span class="name">{{item.name}}</span>
  21. <u-switch size="40" v-model="item.checked"></u-switch>
  22. </view>
  23. <view class="itemName">
  24. <span>{{item.time}}</span>
  25. <span>
  26. <u-button v-if="item.checked==false" type="warning" size="mini" style="margin-right: 15upx;" @click="handetail">查看</u-button>
  27. <u-button type="primary" size="mini" style="margin-right: 15upx;" @click="handedit">编辑</u-button>
  28. <u-button type="error" size="mini" @click="handelete">删除</u-button>
  29. </span>
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. export default{
  37. data(){
  38. return{
  39. background: {
  40. // 渐变色
  41. backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
  42. },
  43. listData:[
  44. {name:'夏季活动',time:'2020-05-20',checked:true,controlStatus: false},
  45. {name:'夏季活动',time:'2020-05-20',checked:false},
  46. {name:'夏季活动',time:'2020-05-20',checked:true},
  47. {name:'夏季活动',time:'2020-05-20',checked:false},
  48. ]
  49. }
  50. },
  51. watch: {
  52. checked(val) {
  53. // 等于false,意味着用户手动关闭了switch
  54. if (val == false) {
  55. if(this.controlStatus == true) {
  56. this.controlStatus = false;
  57. return ;
  58. }
  59. // 重新打开switch,并让它处于加载中的状态
  60. this.checked = true;
  61. this.loading = true;
  62. // 模拟向后端发起请求
  63. this.getRestultFromServer();
  64. }
  65. }
  66. },
  67. methods:{
  68. openAddPage(){
  69. console.log('-------------------')
  70. uni.navigateTo({
  71. url:'/pages/spotCheckConfigure/addSpotCheck'
  72. })
  73. },
  74. // 查看详情
  75. handetail(){
  76. uni.navigateTo({
  77. url:'/pages/spotCheckConfigure/spotCheckDetail/spotCheckDetail'
  78. })
  79. },
  80. // 编辑
  81. handedit(){
  82. uni.navigateTo({
  83. url:'/pages/spotCheckConfigure/addSpotCheck'
  84. })
  85. },
  86. // 删除
  87. handelete(){
  88. }
  89. }
  90. }
  91. </script>
  92. <style lang="scss">
  93. page{
  94. height: 100%;
  95. background-color: #eee;
  96. }
  97. .slot-wrap {
  98. display: flex;
  99. align-items: center;
  100. /* 如果您想让slot内容占满整个导航栏的宽度 */
  101. flex: 1;
  102. /* 如果您想让slot内容与导航栏左右有空隙 */
  103. padding: 0 30rpx 0 0;
  104. color: #fff;
  105. font-size: 28upx;
  106. .left-icon{
  107. flex-grow: 1;
  108. font-size: 32upx;
  109. }
  110. .right-icon{
  111. padding-left:50upx;
  112. }
  113. .uni-icons{
  114. margin-right: 10upx;
  115. }
  116. }
  117. .pageBody{
  118. .itemInfo{
  119. margin: 20upx;
  120. background-color: #fff;
  121. border-radius: 3px;
  122. .itemName{
  123. padding: 25upx 35upx;
  124. display: flex;
  125. justify-content: space-between;
  126. }
  127. .itemName:first-child{
  128. border-bottom: 1px solid #f8f8f8;
  129. }
  130. }
  131. }
  132. </style>