index.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379
  1. <template>
  2. <view class="app-content">
  3. <img src="static/beijing.png" alt="" class="tuku">
  4. <Nav :navname.sync="navname" :navtype="false" :navtypes="true"></Nav>
  5. <view class="cont">
  6. <view class="photograph" @tap="upindiv">
  7. <img src="static/shuai.png" alt="">
  8. </view>
  9. <view class="details">
  10. <p>Admin</p>
  11. <span>工号:E002</span>
  12. </view>
  13. <view class="detail_list">
  14. <view class="list_child">
  15. <p>分拣</p>
  16. <span>200</span>
  17. </view>
  18. <view class="list_child">
  19. <p>装车</p>
  20. <span>200</span>
  21. </view>
  22. <view class="list_child">
  23. <p>上机</p>
  24. <span>200</span>
  25. </view>
  26. <view class="list_child">
  27. <p>卸机</p>
  28. <span>200</span>
  29. </view>
  30. <view class="list_child">
  31. <p>卸车</p>
  32. <span>200</span>
  33. </view>
  34. </view>
  35. <view class="detail_type">
  36. <view class="list_child" @tap="recup">
  37. <view class="log bg1"></view>
  38. <p>我的记录</p>
  39. </view>
  40. <view class="list_child" @tap="uppop">
  41. <view class="log bg2"></view>
  42. <p>扫码开关</p>
  43. </view>
  44. <view class="list_child" @tap="uppops">
  45. <view class="log bg3"></view>
  46. <p>工作方式</p>
  47. </view>
  48. <view class="list_child" @tap="uphelp">
  49. <view class="log bg4"></view>
  50. <p>帮助</p>
  51. </view>
  52. </view>
  53. </view>
  54. <z-popup v-model="all">
  55. <view class="popup_title">
  56. <p>请选择扫码开关</p>
  57. </view>
  58. <view class="popup_content">
  59. <ul>
  60. <li v-for="(item, index) in list" :key="index" @tap="()=>selectup(index)">
  61. <p>{{item.name}}</p>
  62. <view class="start" v-if="action === index ? true: false">
  63. <img src="static/gou.png" alt="">
  64. </view>
  65. </li>
  66. </ul>
  67. <view class="top"></view>
  68. <view class="cancel" @tap="()=>topup()">取消</view>
  69. </view>
  70. </z-popup>
  71. <z-popup v-model="allshow">
  72. <view class="popup_title">
  73. <p>请选择工作方式</p>
  74. </view>
  75. <view class="popup_content">
  76. <ul>
  77. <li v-for="(item, index) in lists" :key="index" @tap="()=>selectup(index)">
  78. <p>{{item.name}}</p>
  79. <view class="start" v-if="action === index ? true: false">
  80. <img src="static/gou.png" alt="">
  81. </view>
  82. </li>
  83. </ul>
  84. <view class="top"></view>
  85. <view class="cancel" @tap="()=>topup()">取消</view>
  86. </view>
  87. </z-popup>
  88. </view>
  89. </template>
  90. <script>
  91. import Nav from '../../components/header/nav.vue'
  92. // import Popup from '../../uni_modules/z-popup/components/z-popup'
  93. export default {
  94. data() {
  95. return {
  96. main: null,
  97. poll: null,
  98. filter:null,
  99. pusher:null,
  100. intentServer:null,
  101. navname: '我的',
  102. all: false,
  103. allshow: false,
  104. action: '',
  105. list: [{
  106. name: '相机'
  107. },
  108. {
  109. name: '激光扫描枪'
  110. },
  111. {
  112. name: 'RFID读取器'
  113. }],
  114. lists: [
  115. {
  116. name: '单次扫描'
  117. },
  118. {
  119. name: '连续扫描'
  120. }
  121. ]
  122. }
  123. },
  124. created(option) {
  125. },
  126. onLoad(){
  127. },
  128. onUnload() {
  129. },
  130. onShow() {
  131. // uni.hideTabBar()//关闭导航栏
  132. // uni.showTabBar()//显示导航栏
  133. },
  134. mounted() {
  135. },
  136. components: {
  137. Nav
  138. },
  139. watch: {
  140. allshow () {
  141. if (this.allshow) {
  142. uni.hideTabBar({})
  143. } else{
  144. uni.showTabBar()
  145. }
  146. },
  147. all () {
  148. if (this.all) {
  149. uni.hideTabBar({})
  150. } else{
  151. uni.showTabBar()
  152. }
  153. }
  154. },
  155. methods: {
  156. recup () {
  157. uni.redirectTo({
  158. url: "/pages/myrecords/index"
  159. })
  160. },
  161. fall () {
  162. uni.switchTab({
  163. url: "/pages/index/index"
  164. })
  165. },
  166. upindiv () {
  167. uni.redirectTo({
  168. url: "/pages/individual/index"
  169. })
  170. },
  171. uphelp () {
  172. uni.redirectTo({
  173. url: "/pages/help/index"
  174. })
  175. },
  176. uppop () {
  177. uni.hideTabBar({})
  178. this.all = true
  179. },
  180. uppops () {
  181. uni.hideTabBar({})
  182. this.allshow = true
  183. },
  184. selectup (index) {
  185. this.action = index
  186. },
  187. topup () {
  188. this.all = false
  189. this.allshow = false
  190. uni.showTabBar()//显示导航栏
  191. }
  192. },
  193. }
  194. </script>
  195. <style lang="scss" scoped>
  196. .app-content{
  197. // position: relative;
  198. >.tuku{
  199. position: absolute;
  200. z-index: -1;
  201. width: 100%;
  202. top: 0;
  203. }
  204. >.cont{
  205. z-index: 999;
  206. >.photograph{
  207. width: 6rem;
  208. height: 6rem;
  209. // background: red;
  210. border-radius: 50%;
  211. margin: 0 auto;
  212. margin-top: .625rem;
  213. }
  214. >.details{
  215. width: 100%;
  216. height: 3.125rem;
  217. display: flex;
  218. flex-direction: column;
  219. align-items: center;
  220. justify-content: center;
  221. // background: red;
  222. margin-top: .625rem;
  223. >p{
  224. color: rgb(255, 255, 255);
  225. font-family: Noto Sans SC;
  226. font-size: 1rem;
  227. font-weight: 500;
  228. }
  229. >span{
  230. color: rgb(255, 255, 255);
  231. font-family: Noto Sans SC;
  232. font-size: .8125rem;
  233. font-weight: 500;
  234. }
  235. }
  236. >.detail_list{
  237. width: 100%;
  238. // background: red;
  239. display: flex;
  240. flex-wrap: wrap;
  241. margin-top: 1rem;
  242. >.list_child{
  243. width: 33%;
  244. display: flex;
  245. flex-direction: column;
  246. justify-items: center;
  247. align-items: center;
  248. margin-bottom: 1rem;
  249. >p{
  250. color: rgb(255, 255, 255);
  251. font-family: Noto Sans SC;
  252. font-size: .8125rem;
  253. font-weight: 500;
  254. }
  255. >span{
  256. color: rgb(255, 255, 255);
  257. font-family: Helvetica;
  258. font-size: 1rem;
  259. font-weight: 700;
  260. }
  261. }
  262. }
  263. >.detail_type{
  264. height: calc(100vh - 35.875rem);
  265. padding: 0 3.125rem 0 3.125rem;
  266. display: flex;
  267. justify-content: space-around;
  268. flex-wrap: wrap;
  269. flex: 1;
  270. >.list_child{
  271. width: 7.5rem;
  272. height: 7.5rem;
  273. background: rgb(37, 121, 160);
  274. box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  275. border-radius: 4px;
  276. margin-bottom: 4%;
  277. display: flex;
  278. flex-direction: column;
  279. justify-content: center;
  280. align-items: center;
  281. >.log{
  282. width: 2.25rem;
  283. height: 2.25rem;
  284. // background: rgb(196, 196, 196);
  285. margin-bottom: .5rem;
  286. }
  287. .bg1{
  288. background: url('../../static/gongzuo.png') no-repeat;
  289. background-size: 100% 100%;
  290. }
  291. .bg2{
  292. background: url('../../static/kaiguan.png') no-repeat;
  293. background-size: 100% 100%;
  294. }
  295. .bg3{
  296. background: url('../../static/jilu.png') no-repeat;
  297. background-size: 100% 100%;
  298. }
  299. .bg4{
  300. background: url('../../static/bagzu.png') no-repeat;
  301. background-size: 100% 100%;
  302. }
  303. >p{
  304. color: rgb(255, 255, 255);
  305. font-family: Noto Sans SC;
  306. font-size: .9375rem;
  307. font-weight: 500;
  308. }
  309. }
  310. }
  311. }
  312. .popup_title{
  313. width: 100%;
  314. height: 4.5rem;
  315. background: rgb(255, 255, 255);
  316. border-radius: 10px 10px 0px 0px;
  317. display: flex;
  318. align-items: center;
  319. color: rgb(16, 17, 22);
  320. font-family: Noto Sans SC;
  321. font-size: 1rem;
  322. font-weight: 700;
  323. >p{
  324. margin-left: 1.5rem;
  325. color: rgb(16, 17, 22);
  326. font-family: Noto Sans SC;
  327. font-size: 1rem;
  328. font-weight: 700;
  329. }
  330. }
  331. .popup_content{
  332. width: 100%;
  333. background: rgb(255, 255, 255);
  334. >ul{
  335. width: 100%;
  336. >li{
  337. width: 82%;
  338. height: 2.6875rem;
  339. display: flex;
  340. align-items: center;
  341. justify-content: space-between;
  342. >p{
  343. color: rgb(0, 0, 0);
  344. font-family: Noto Sans SC;
  345. font-size: .8125rem;
  346. font-weight: 400;
  347. }
  348. >.start{
  349. width: 1rem;
  350. height: 1rem;
  351. background: rgb(37, 121, 160);
  352. display: flex;
  353. align-items: center;
  354. justify-content: center;
  355. border-radius: 50%;
  356. }
  357. }
  358. }
  359. >.top{
  360. width: 100%;
  361. height: .875rem;
  362. background: rgb(249, 249, 249);
  363. }
  364. >.cancel{
  365. width: 100%;
  366. height: 3.3125rem;
  367. display: flex;
  368. align-items: center;
  369. justify-content: center;
  370. color: rgb(0, 0, 0);
  371. font-family: Noto Sans SC;
  372. font-size: .9375rem;
  373. font-weight: 500;
  374. }
  375. }
  376. }
  377. </style>