staff.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  1. <template>
  2. <view class="content">
  3. <view class="fixed-top">
  4. <view class="search-user flex-y-center " style="position: relative;">
  5. <view class="search-content flex-y-center">
  6. <icon type="search" size="18" />
  7. <input confirm-type="search" v-model="seTval" @confirm="confirm" @input="getSearch"
  8. class="flex-grow-1" type="text" placeholder-style="font-size:26rpx" placeholder="请输入关键词" />
  9. <view class="flex-center" style="margin-left: 10rpx;" @click.stop="onDel" v-if="seTval">
  10. <icon type="clear" size="18" />
  11. </view>
  12. </view>
  13. <view class="search-btn" @click="search">
  14. 搜索
  15. </view>
  16. </view>
  17. <view class="box-pack-between headerScreen flex-y-center">
  18. <view class="flex-y-center flex-grow-1 ft26 header-text">
  19. <view style="width: 100%;" class="flex-grow-1 flex-center " data-text="1"
  20. :class="act_index==1?'act':''" @click="onTopBtnTap(1)">
  21. <view class="text-1" style="width: auto; max-width: 300rpx;">
  22. {{level_text}}
  23. </view>
  24. <view class="d3"></view>
  25. </view>
  26. <!-- <view style="width: 50%;" class="flex-grow-1 flex-center text-1" data-text="2"
  27. :class="act_index==2?'act':''" @click="onTopBtnTap(2)">
  28. <view class="text-1" style="width: auto; max-width: 300rpx;">
  29. {{type_text}}
  30. </view>
  31. <view class="d3"></view>
  32. </view> -->
  33. </view>
  34. </view>
  35. </view>
  36. <uni-popup ref="popup" type="top" :top="top" :maskClass="maskClass">
  37. <view class="showpay">
  38. <block v-if='act_index==1'>
  39. <view class="box-li" :class="store_id==0?'active':''" @click="Onlevel(0,'全部')"
  40. data-text='全部'>全部
  41. </view>
  42. <scroll-view scroll-y="true" style="height: 400rpx;">
  43. <view class="box-li" v-for="(item,index) of tableTypeList" :key='index'
  44. :class="item.id==store_id?'active':''" @click="Onlevel(item.id,item.title)">
  45. {{item.title}}
  46. </view>
  47. </scroll-view>
  48. </block>
  49. <block v-if='act_index==2'>
  50. <view class="box-li" :class="status==2?'active':''" @click="onStatus(2,'全部')" data-text='全部'>全部
  51. </view>
  52. <view class="box-li" :class="status==1?'active':''" @click="onStatus(1,'已签到')" data-text='已签到'>已签到
  53. </view>
  54. <view class="box-li" :class="status==0?'active':''" @click="onStatus(0,'未签到')" data-text='未签到'>未签到
  55. </view>
  56. </block>
  57. </view>
  58. </uni-popup>
  59. <view class="header-hg200"></view>
  60. <view class="list">
  61. <view @click="detail(item.id,item.admin_id)" class="item" v-for="(item,index) in list" :key="index">
  62. <view class="top flex flex-y-center box-pack-between">
  63. <view class="name">{{item.nickname}} </view>
  64. <view class="flex-y-center" style="padding-right: 10rpx;min-width: 114rpx;">
  65. {{item.sex=='男'?'♂':'♀'}} {{item.sex}}
  66. </view>
  67. </view>
  68. <view class="content flex flex-y-center box-pack-between" hover-class="nav-hover">
  69. <view class="cell flex flex-y-center">
  70. <view class="title">门店:</view>
  71. <view class="desc">{{item.title}}</view>
  72. </view>
  73. </view>
  74. <view class="content flex flex-y-center box-pack-between" hover-class="nav-hover">
  75. <view class="cell flex flex-y-center">
  76. <view class="title">真实姓名:</view>
  77. <view class="desc">{{item.name}}</view>
  78. </view>
  79. </view>
  80. <view class="content flex flex-y-center box-pack-between" hover-class="nav-hover">
  81. <view class="cell flex flex-y-center">
  82. <view class="title">手机号码:</view>
  83. <view class="desc">{{item.phone}}</view>
  84. </view>
  85. <!-- <view class="cell flex flex-y-center">
  86. <view class="title">密码:</view>
  87. <view class="desc">{{item.pass}}</view>
  88. </view> -->
  89. </view>
  90. <view class="content flex flex-y-center box-pack-between" hover-class="nav-hover">
  91. <view class="cell flex flex-y-center">
  92. <view class="title">密码:</view>
  93. <view class="desc">{{item.pass}}</view>
  94. </view>
  95. </view>
  96. <view class="content flex flex-y-center box-pack-between" hover-class="nav-hover">
  97. <view class="cell flex flex-y-center">
  98. <view class="title">创建时间:</view>
  99. <view class="desc">{{item.addtime}}</view>
  100. </view>
  101. </view>
  102. </view>
  103. <block v-if='list.length<=0'>
  104. <no-none></no-none>
  105. </block>
  106. </view>
  107. <view class="header-hg100"></view>
  108. <view class="footer-bar">
  109. <view class="content flex flex-center">
  110. <navigator :url="`./staffAdd?type=${type}`" class="btn">+新增员工</navigator>
  111. </view>
  112. </view>
  113. </view>
  114. </template>
  115. <script>
  116. export default {
  117. data() {
  118. return {
  119. type: 2,
  120. seTval: '',
  121. page: 1,
  122. list: [],
  123. admin_id: '',
  124. store_id: '',
  125. is_bottom: false,
  126. keywords: "",
  127. level_text: '门店',
  128. tableTypeList: [],
  129. act_index:1
  130. }
  131. },
  132. onLoad(e) {
  133. this.type = e.type;
  134. this.admin_id = uni.getStorageSync("admin_id");
  135. this.store_id = uni.getStorageSync("store_id");
  136. this.shop_store_index();
  137. },
  138. onShow() {
  139. this.list = [];
  140. this.getData(1)
  141. },
  142. onReachBottom() {
  143. if (!this.is_bottom) {
  144. this.getData(this.page + 1)
  145. }
  146. },
  147. methods: {
  148. shop_store_index() {
  149. let storeinfo = uni.getStorageSync("storeinfo");
  150. this.request({
  151. url: 'Smdcshop/shop_store_index',
  152. data: {
  153. admin_id: this.admin_id,
  154. }
  155. }).then(res => {
  156. if (res.code == 200) {
  157. if (res.data.length > 0) {
  158. this.tableTypeList = res.data;
  159. } else {
  160. this.tableTypeList = [{
  161. title: storeinfo.title,
  162. id: storeinfo.id,
  163. }];
  164. }
  165. }
  166. })
  167. },
  168. onTopBtnTap(e) {
  169. this.act_index = e;
  170. this.$refs.popup.open();
  171. },
  172. getSearch(e) {
  173. if (!e.detail.value) {
  174. this.list = [];
  175. this.keywords = "";
  176. this.getData(1);
  177. }
  178. this.keywords = e.detail.value;
  179. },
  180. onDel() {
  181. this.seTval = '';
  182. this.list = [];
  183. this.keywords = "";
  184. this.getData(1);
  185. },
  186. confirm(e) {
  187. this.list = [];
  188. this.keywords = e.detail.value;
  189. this.getData(1);
  190. },
  191. search(e) {
  192. this.list = [];
  193. this.getData(1);
  194. },
  195. detail(id, admin_id) {
  196. let type = this.type;
  197. uni.navigateTo({
  198. url: `./staffDetail?id=${id}&type=${type}`
  199. })
  200. },
  201. Onlevel(e, text) {
  202. this.store_id = e;
  203. this.level_text = text;
  204. this.list = [];
  205. this.getData(1);
  206. this.$refs.popup.close();
  207. },
  208. del(id) {
  209. uni.showModal({
  210. title: '提示',
  211. content: '是否要删除?',
  212. showCancel: true,
  213. cancelText: '取消',
  214. confirmText: '确定',
  215. success: res => {
  216. if (res.confirm) {
  217. this.request({
  218. url: 'Smdcshop/horn_delect',
  219. data: {
  220. id: id,
  221. },
  222. }).then(res => {
  223. console.log(res, "res")
  224. if (res.code === 200 || res.code === "200") {
  225. uni.showToast({
  226. title: "删除成功",
  227. icon: "none",
  228. })
  229. setTimeout(() => {
  230. this.getData(1)
  231. }, 2000)
  232. }
  233. }).catch((res) => {
  234. uni.showToast({
  235. title: res.message,
  236. icon: "none",
  237. })
  238. });
  239. }
  240. },
  241. fail: () => {},
  242. complete: () => {}
  243. });
  244. },
  245. getData(page) {
  246. if (page == 1) {
  247. this.list = []
  248. this.page = 1
  249. this.is_bottom = false
  250. }
  251. this.request({
  252. url: 'Smdcshop/staff_index',
  253. data: {
  254. admin_id: this.admin_id,
  255. page,
  256. serch: this.keywords,
  257. limit: 10,
  258. store_id: this.store_id,
  259. }
  260. }).then(res => {
  261. if (res.code == 200 && res.data.length) {
  262. this.list = this.list.concat(res.data)
  263. this.page = page
  264. } else {
  265. this.is_bottom = true
  266. }
  267. })
  268. }
  269. }
  270. }
  271. </script>
  272. <style>
  273. @import url("./static/css/common.css");
  274. page {
  275. background: #F9F9F9;
  276. }
  277. .fixed-top {
  278. position: fixed;
  279. top: 0rpx;
  280. width: 100%;
  281. }
  282. .search-user {
  283. z-index: 999;
  284. position: fixed;
  285. left: 0;
  286. width: 100%;
  287. height: 100rpx;
  288. background: #FFFFFF;
  289. margin-left: 15rpx;
  290. border-bottom: 1rpx solid #F1F1F1;
  291. }
  292. .search-user .search-content {
  293. width: 83%;
  294. height: 70rpx;
  295. background: #F1F1F1;
  296. border-radius: 100rpx;
  297. padding: 0 20rpx;
  298. }
  299. .search-user .search-content icon {
  300. margin-right: 10rpx;
  301. }
  302. .search-user .search-btn {
  303. margin-left: 20rpx;
  304. font-size: 28rpx;
  305. }
  306. .headerScreen {
  307. height: 100rpx;
  308. z-index: 999;
  309. background: #fff;
  310. border-bottom: 1rpx solid #F1F1F1;
  311. }
  312. .showpay {
  313. width: 100%;
  314. z-index: 10;
  315. background: #FFFFFF;
  316. }
  317. .box-li {
  318. background-color: #fff;
  319. text-align: center;
  320. border-bottom: 1rpx solid #f1f1f1;
  321. height: 80rpx;
  322. line-height: 80rpx;
  323. font-size: 26rpx;
  324. }
  325. page .active {
  326. color: #007AFF;
  327. }
  328. .d3 {
  329. width: 0;
  330. height: 0;
  331. border-width: 12rpx;
  332. border-style: solid;
  333. border-color: #000 transparent transparent transparent;
  334. margin-top: 14rpx;
  335. margin-left: 6rpx;
  336. }
  337. .header-hg200 {
  338. height: 210rpx;
  339. }
  340. /* .header-hg100 {
  341. height: 100rpx;
  342. } */
  343. .del {
  344. height: 44rpx;
  345. line-height: 44rpx;
  346. padding: 0 15rpx;
  347. font-size: 24rpx;
  348. background-color: #FF5722;
  349. margin-right: 25rpx;
  350. color: #fff;
  351. border-radius: 4rpx;
  352. }
  353. .list {
  354. padding: 30rpx 25rpx;
  355. }
  356. .list .item {
  357. border-radius: 8rpx;
  358. overflow: hidden;
  359. padding-left: 30rpx;
  360. background-color: #fff;
  361. margin-bottom: 30rpx;
  362. }
  363. .list .item .top {
  364. border-bottom: 1rpx solid #f5f5f5;
  365. padding: 10rpx 0;
  366. }
  367. .list .item .top .name {
  368. font-size: 30rpx;
  369. font-weight: bold;
  370. }
  371. .list .item .top .type-btn {
  372. zoom: 0.7;
  373. margin-right: 25rpx;
  374. }
  375. .list .item .content {
  376. padding: 20rpx 0 24rpx;
  377. }
  378. .list .item .content .cell {
  379. flex: none;
  380. box-sizing: border-box;
  381. padding-right: 20rpx;
  382. font-size: 26rpx;
  383. line-height: 37rpx;
  384. color: #666;
  385. }
  386. .list .item .content .cell .title {
  387. color: #99A0AD;
  388. }
  389. </style>