alarmClockList.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. <template>
  2. <view>
  3. <view class="head">
  4. <view class="left-top">
  5. <p class="left-top-p">{{$t('alarmClock.title')}}</p>
  6. </view>
  7. <view class="right-top">
  8. <p class="right-top-p" @click="addAlarmClockItem()">+</p>
  9. </view>
  10. </view>
  11. <view class="body">
  12. <uni-collapse :accordion="true">
  13. <uni-list>
  14. <view v-for="(alarmClock,index) in alarmClockList" :key="index">
  15. <uni-list-item :title="alarmClock.hour+'--'+alarmClock.name" :note="alarmClock.week+'---'+alarmClock.type"
  16. :rightText="alarmClock.status" clickable @click="onClick(alarmClock.id)" />
  17. </view>
  18. </uni-list>
  19. </uni-collapse>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. import {
  25. mapState,
  26. mapActions,
  27. mapMutations
  28. } from 'vuex';
  29. import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
  30. import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
  31. import uniList from '../../uni_modules/uni-list/components/uni-list/uni-list.vue';
  32. import uniListItem from '../../uni_modules/uni-list/components/uni-list-item/uni-list-item.vue';
  33. import uniIcons from '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
  34. // import {
  35. // dateUtils
  36. // } from '@/common/util.js';
  37. export default {
  38. components: {
  39. uniCollapse,
  40. uniCollapseItem,
  41. uniList,
  42. uniListItem,
  43. uniIcons
  44. },
  45. data() {
  46. return {
  47. globalUser: null,
  48. alarmClockList: [],
  49. }
  50. },
  51. onShow() {
  52. var token = uni.getStorageSync("token");
  53. uni.setNavigationBarTitle({
  54. title: this.$t('remoteList.alarmClock')
  55. });
  56. if (token.length > 1) {
  57. this.getAlarmClockList();
  58. } else {
  59. uni.reLaunch({
  60. url: '../../../pages/Login/Login',
  61. });
  62. }
  63. },
  64. methods: {
  65. getAlarmClockList() {
  66. var token = uni.getStorageSync("token");
  67. var adminId = uni.getStorageSync("globalUser").id;
  68. uni.request({
  69. url: this.serverurl + '/TAlarmClock/list',
  70. data: {
  71. "adminId": adminId
  72. },
  73. header: {
  74. 'token': token
  75. },
  76. method: "GET",
  77. success: (res) => {
  78. if (res.data.code) {
  79. var alarmClockList = [];
  80. var alarmClocks = res.data.data;
  81. // console.log("list");
  82. for (var i = 0; i < alarmClocks.length; i++) {
  83. var alarmClock = alarmClocks[i];
  84. var status = alarmClock.status;
  85. if (status == '0') {
  86. // 已关闭
  87. alarmClock.status = this.$t('alarmClock.status1')
  88. }
  89. if (status == '1') {
  90. // 已qiyong
  91. alarmClock.status = this.$t('alarmClock.status2')
  92. }
  93. var week = alarmClock.week;
  94. if (week != null || week != '') {
  95. var zhou = '';
  96. var w = week.split(",").sort();
  97. for (var j = 0; j < w.length; j++) {
  98. var t = w[j];
  99. switch (t) {
  100. case "1":
  101. zhou = zhou + this.$t('alarmClock.zhou')+this.$t('alarmClock.yi')+","
  102. break;
  103. case "2":
  104. zhou = zhou + this.$t('alarmClock.zhou')+this.$t('alarmClock.er')+","
  105. break;
  106. case "3":
  107. zhou = zhou + this.$t('alarmClock.zhou')+this.$t('alarmClock.san')+","
  108. break;
  109. case "4":
  110. zhou = zhou + this.$t('alarmClock.zhou')+this.$t('alarmClock.si')+","
  111. break;
  112. case "5":
  113. zhou = zhou + this.$t('alarmClock.zhou')+this.$t('alarmClock.wu')+","
  114. break;
  115. case "6":
  116. zhou = zhou + this.$t('alarmClock.zhou')+this.$t('alarmClock.liu')+","
  117. break;
  118. case "7":
  119. zhou = zhou + this.$t('alarmClock.zhou')+this.$t('alarmClock.qi')+","
  120. break;
  121. default:
  122. }
  123. }
  124. alarmClock.week = zhou;
  125. var type = alarmClock.type;
  126. switch (type) { //0:炉头开启,1:炉头关闭,2:开始休眠,3:结束休眠
  127. case "0":
  128. type = this.$t('alarmClock.kailutou')
  129. break;
  130. case "1":
  131. type = this.$t('alarmClock.guanlutou')
  132. break;
  133. case "2":
  134. type = this.$t('alarmClock.kaixiumian')
  135. break;
  136. case "3":
  137. type = this.$t('alarmClock.guanxiumian')
  138. break;
  139. default:
  140. }
  141. alarmClock.type = type;
  142. }
  143. alarmClockList.push(alarmClock);
  144. }
  145. this.alarmClockList = alarmClockList;
  146. } else {
  147. uni.showToast({
  148. title: res.data.message,
  149. duration: 2000
  150. });
  151. }
  152. },
  153. });
  154. },
  155. onClick(id) {
  156. // console.log("id==" + id);
  157. uni.setStorageSync("clock", id);
  158. uni.navigateTo({
  159. url: 'alarmClockItem'
  160. });
  161. },
  162. addAlarmClockItem() {
  163. // console.log("addAlarmClockItem");
  164. uni.setStorageSync("clock", "add");
  165. uni.navigateTo({
  166. url: 'alarmClockItem'
  167. });
  168. }
  169. }
  170. }
  171. </script>
  172. <style>
  173. .head {
  174. height: 100upx;
  175. display: flex;
  176. flex-direction: row;
  177. justify-content: flex-start;
  178. background: #F8F8F8;
  179. }
  180. .left-top {
  181. height: 100upx;
  182. width: 50%;
  183. text-align: left;
  184. }
  185. .left-top-p {
  186. height: 100upx;
  187. padding-left: 8upx;
  188. color: #363D44;
  189. font-size: 25px;
  190. font-family: "PingFang-SC-Bold";
  191. }
  192. .right-top {
  193. height: 100upx;
  194. width: 50%;
  195. text-align: right;
  196. /* 垂直居中 */
  197. /* position: relative;
  198. top: 50%; /*偏移*/
  199. /* transform: translateY(-50%); */
  200. }
  201. .right-top-p {
  202. height: 100upx;
  203. padding-right: 12upx;
  204. color: #3496FB;
  205. font-size: 35px;
  206. font-family: "PingFang-SC-Bold";
  207. /* 垂直居中 */
  208. position: relative;
  209. top: 25%;
  210. /*偏移*/
  211. transform: translateY(-50%);
  212. }
  213. .body {
  214. background: #F8F8F8;
  215. }
  216. </style>