nav-bar.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <view class="nav">
  3. <view class="navbar">
  4. <button class="scanbara" @click="handleScanbara">复核扫码</button>
  5. <view class="status">{{props.userInfo.workStatus === '0'?"接单中":"暂停接单"}}</view>
  6. <view class="userinfo">
  7. <button class="lef" @click="handleChange">{{props.userInfo.workStatus === '0'?"暂停接单":"开始接单"}}</button>
  8. <image class="mid" aspectFill src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/cat-1.png" />
  9. <view class="rig">
  10. <text class="name">{{props.userInfo.name?props.userInfo.name:"张三三"}}</text>
  11. <view size="mini" @click="handleLogout" class="logout">退出<uni-icons class="item" type="forward" color="#ff" size="20"></uni-icons></view>
  12. </view>
  13. </view>
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. name: 'NavBar'
  20. }
  21. </script>
  22. <script setup>
  23. import { onMounted,ref } from 'vue'
  24. import {updateWorkStatus, updateOnlineStatus } from "@/static/api.js"
  25. const props = defineProps({
  26. userInfo: {
  27. default: function() {
  28. return {}
  29. },
  30. type: Object
  31. }
  32. })
  33. const emit = defineEmits(['updateUser'])
  34. console.log("props.userInfo.workStatus", props.userInfo.workStatus)
  35. onMounted(() => {
  36. // userInfo.value = props.userInfo
  37. // console.log("props.userInfo.name", props.userInfo.name)
  38. })
  39. const handleChange =async()=>{
  40. console.log("hangdleChange props.userInfo.workStatus", props.userInfo.workStatus)
  41. const token = uni.getStorageSync('token')
  42. const userId = uni.getStorageSync('userId')
  43. if(props.userInfo.workStatus){
  44. const params = {
  45. token: token,
  46. data: {
  47. pharmacistUserId: userId,
  48. workStatus: props.userInfo.workStatus ==='1'?'0':'1'
  49. }
  50. }
  51. console.log('params.data.workStatus', params)
  52. const {data:res} = await updateWorkStatus(params)
  53. if (res.code === 200) {
  54. emit('updateUser', params.data.workStatus)
  55. }
  56. emit('updateUser', props.userInfo.workStatus)
  57. }
  58. }
  59. const handleScanbara = ()=>{
  60. uni.scanCode({
  61. scanType: ['barCode'],
  62. success: function (res) {
  63. console.log('条码类型:' + res.scanType);
  64. console.log('条码内容:' + res.result);
  65. if(res.result) {
  66. uni.navigateTo({
  67. url:`/pages/edit/edit?preId=${res.result}&depolyStatus=2`
  68. })
  69. }
  70. }
  71. });
  72. }
  73. const handleLogout = async()=>{
  74. console.log("handleLogout", 555)
  75. const tokens = uni.getStorageSync('token')
  76. const userId = uni.getStorageSync('userId')
  77. const params = {
  78. token: tokens,
  79. data: {
  80. pharmacistUserId: userId,
  81. onlineStatus: 1
  82. }
  83. }
  84. const {data:res} = await updateOnlineStatus(params)
  85. uni.redirectTo({
  86. url:"/pages/login/login"
  87. })
  88. }
  89. </script>
  90. <style lang="scss">
  91. .nav{
  92. display:flex;
  93. justify-content:flex-end;
  94. align-items:flex-end;
  95. width: 1200px;
  96. background-color: #18C7B0;
  97. padding-bottom: 20rpx;
  98. // position: fixed;
  99. .navbar{
  100. width: 1200px;
  101. display: flex;
  102. align-items: center;
  103. justify-content: space-between;
  104. .scanbara{
  105. // display: flex;
  106. height: 54px;
  107. font-size: 20px;
  108. color:#18C7B0;
  109. margin: 0 33px;
  110. }
  111. .status{
  112. font-size: 20rpx;
  113. color:#fff;
  114. margin-left: 200px;
  115. }
  116. .userinfo{
  117. display: flex;
  118. justify-content: space-between;
  119. align-items: center;
  120. .lef{
  121. height: 54px;
  122. // width: 60rpx;
  123. // padding: 14rpx;
  124. margin-right: 30rpx;
  125. font-size: 20px;
  126. color:#18C7B0;
  127. margin: 0 20px;
  128. }
  129. .mid{
  130. height: 50rpx;
  131. width: 50rpx;
  132. margin-right: 20px;
  133. border-radius: 50%;
  134. }
  135. .rig{
  136. margin-right: 40px;
  137. display: flex;
  138. flex-direction: column;
  139. align-items: center;
  140. .name{
  141. margin-bottom: 10px;
  142. // width: 50rpx;
  143. font-size: 28px;
  144. color: #fff;
  145. text-align: center;
  146. }
  147. .logout{
  148. // width: 50rpx;
  149. background-color: #18C7B0;
  150. font-size: 24px;
  151. color: #fff;
  152. border: 1px solid #18C7B0;
  153. display: flex;
  154. align-items: center;
  155. justify-content: center;
  156. }
  157. }
  158. }
  159. }
  160. }
  161. </style>