morePage.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680
  1. <template>
  2. <view>
  3. <view class="morePages">
  4. <!-- 头部栏 -->
  5. <view class="header-box">
  6. <UniStatusBar></UniStatusBar>
  7. <view class="title flex align_center" :style="{height:(navHeight+'px')}">
  8. <u-image src="/static/logo-h.png" width="349" height='40'></u-image>
  9. </view>
  10. </view>
  11. <!-- body -->
  12. <view class="morePages-body">
  13. <view class="body-box bg-blue">
  14. <!-- 名片 -->
  15. <view class="userCard flex align_center justify_between">
  16. <view class="userCard-info flex align_center">
  17. <view>
  18. <u-image shape='circle' v-if="!hasLogin" src="/static/def_personal_avatar.png" width="90" height="90"></u-image>
  19. <u-image shape='circle' v-else :src="avatarUrl||'/static/def_personal_avatar.png'" width="90" height="90"></u-image>
  20. </view>
  21. <view class="user-info" @click="toUser">
  22. <view v-if="!hasLogin" style="font-size: 40rpx;">
  23. 请点击登录
  24. </view>
  25. <view v-else>
  26. <view class="user-name">{{userInfo.userNameCN || userInfo.mobile}}</view>
  27. <view v-if="hasLogin&&userInfo&&userInfo.sysUserFlag == '0'">
  28. <u-tag text="个人用户" mode="dark" type="warning" shape="circle" size="mini" />
  29. </view>
  30. <view v-else>{{userInfo.orgName}}</view>
  31. </view>
  32. </view>
  33. </view>
  34. <view @click="toUser">
  35. <text v-if="hasLogin&&userInfo&&userInfo.sysUserFlag == '0'" class="user-rz">
  36. {{storeApply&&storeApply.auditStatus=='WAIT'?'认证门店审核中':'认证成为门店'}}
  37. </text>
  38. <u-icon name="arrow-right"></u-icon>
  39. </view>
  40. </view>
  41. </view>
  42. <view class="list-box" v-if="hasRedPacket&&hasShelf">
  43. <view class="list-title flex align_center justify_between" @click="toPage('/pagesB/redPacket')">
  44. <view><u-icon size="34" color="#f10000" name="red-packet-fill"></u-icon> <text style="color: #ff0000;margin-left: 10rpx;">红包奖励</text></view>
  45. <view>
  46. <u-icon size="28" color="#969799" name="arrow-right"></u-icon>
  47. </view>
  48. </view>
  49. </view>
  50. <view class="list-box" v-if="hasLogin&&$hasPermissions('M_couponList_mini')">
  51. <view class="list-title flex align_center justify_between" @click="toPage('/pagesB/coupon')">
  52. <view><u-icon size="34" color="#ff7d0b" name="gift-fill"></u-icon> <text style="color: #ff7d0b;margin-left: 10rpx;">我的优惠券</text></view>
  53. <view>
  54. <u-icon size="28" color="#969799" name="arrow-right"></u-icon>
  55. </view>
  56. </view>
  57. </view>
  58. <!-- 网格图标 -->
  59. <view class="list-box" v-for="item in itemList" :key="item.id">
  60. <view class="list-title" v-if="item.text">
  61. <text>{{item.text}}</text>
  62. </view>
  63. <view class="list-body" :style="{paddingTop:item.text?0:'10px'}">
  64. <uni-grid :column="item.column" :highlight="true" :show-border="false" :square="false" @change="e=>openPage(e,item.child)">
  65. <uni-grid-item v-for="(sub, idx) in item.child" :index="idx" :key="idx">
  66. <view class="grid-item-box">
  67. <u-icon class="icons" :color="sub.color" :size="item.size" :name="sub.icon" custom-prefix="custom-icon"></u-icon>
  68. <text class="text">{{sub.text}}</text>
  69. </view>
  70. </uni-grid-item>
  71. </uni-grid>
  72. </view>
  73. </view>
  74. <view class="list-box" v-if="hasLogin">
  75. <view class="list-title flex justify_center phone" @click="quitOut">
  76. <text>退出登录</text>
  77. </view>
  78. </view>
  79. </view>
  80. <!-- 去认证弹框 -->
  81. <u-popup v-model="showPopup" mode="center" :border-radius="20" closeable>
  82. <view style="background-color: #fff;padding: 1rem;">
  83. <u-image width="533" height="415" src="/static/authimg.jpg"></u-image>
  84. <view style="padding-top:1rem;" class="flex justify_center">
  85. <u-button @click="toAuthStore()" shape="circle" :custom-style="{background:'#066cff',color:'#fff',width:'350rpx'}">开始认证</u-button>
  86. </view>
  87. </view>
  88. </u-popup>
  89. </view>
  90. <!-- tab -->
  91. <u-tabbar :list="vuex_tabBarList" :before-switch="beforeSwitch" :midButton="vuex_tabBarList.length==5"></u-tabbar>
  92. </view>
  93. </template>
  94. <script>
  95. import {
  96. mapState,
  97. mapMutations
  98. } from 'vuex'
  99. import UniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue'
  100. import { queryQplsConfig,getProductfindByScanCode } from '@/api/shelf.js'
  101. export default {
  102. components: {
  103. UniStatusBar // 状态栏组件
  104. },
  105. data() {
  106. return {
  107. dealerPhone: null, // 经销商电话
  108. showPopup: false,
  109. showPriceSet: false,
  110. shelfSn: null,
  111. avatarUrl:'', // 用户图像
  112. navHeight: 44
  113. }
  114. },
  115. computed: {
  116. ...mapState(['hasLogin','vuex_vinScanNums','vuex_scanMaxNums','vuex_tabBarList']),
  117. hasShelf(){
  118. return !!this.$store.state.vuex_storeShelf
  119. },
  120. userInfo(){
  121. return this.$store.state.vuex_userInfo
  122. },
  123. storeApply(){
  124. return this.$store.state.vuex_storeAuthInfo
  125. },
  126. hasRedPacket(){
  127. const rule = this.$store.state.vuex_rewardRule
  128. return rule&&rule.ruleStatus == 'release'
  129. },
  130. itemList(){
  131. const list = [
  132. {
  133. text: '订单管理',
  134. icon: 'order',
  135. auth: true,
  136. column: 4,
  137. size: 60,
  138. child:[
  139. {
  140. text: '货架订单',
  141. icon: 'huojiaguanli',
  142. auth: this.$hasPermissions('M_shelfOrder_mini'),
  143. path: '/pagesA/digitalShelf/orderList',
  144. color: '#00aaff',
  145. isShelf: true
  146. },
  147. {
  148. text: '急送订单',
  149. icon: 'yijianshansong',
  150. auth: this.$hasPermissions('M_tempShelfOrder_mini'),
  151. path: '/pagesA/digitalShelf/tempOrderList/tempOrderList',
  152. color: '#ff7b1c',
  153. isShelf: true
  154. },
  155. {
  156. text: '采购订单',
  157. icon: 'purchaseorder',
  158. auth: this.$hasPermissions('M_procureOrder_mini'),
  159. path: '/pagesB/procureOrderList',
  160. color: '#00aa00'
  161. }
  162. ],
  163. },
  164. {
  165. text: '货架管理',
  166. icon: 'list-dot',
  167. auth: true,
  168. column: 4,
  169. size: 60,
  170. child:[
  171. {
  172. text: '编码取货',
  173. icon: 'ziyuanxhdpi',
  174. auth: this.userInfo && this.userInfo.sysUserFlag == '1',
  175. path: '#quhuo1',
  176. color: '#2196f3',
  177. isShelf: true
  178. },
  179. {
  180. text: '扫码取货',
  181. icon: 'saoma1',
  182. auth: this.userInfo && this.userInfo.sysUserFlag == '1',
  183. path: '#quhuo0',
  184. color: '#FF9800',
  185. isShelf: true
  186. },
  187. {
  188. text: 'VIN查询历史',
  189. icon: 'lishijilu',
  190. auth: this.hasLogin,
  191. path: '/pagesA/vinRecord/vinRecord',
  192. color: '#55557f',
  193. isShelf: true
  194. },
  195. {
  196. text: '库存查询',
  197. icon: 'stockquery',
  198. auth: this.$hasPermissions('M_stockQueryList_mini'),
  199. path: '/pagesB/stockQuery/stockQuery',
  200. color: '#00aaff',
  201. isShelf: true
  202. },
  203. {
  204. text: '补货记录',
  205. icon: 'replenishment',
  206. auth: this.$hasPermissions('M_stockPut_mini'),
  207. path: '/pagesA/digitalShelf/stockPut',
  208. color: '#aa55ff',
  209. isShelf: true
  210. },
  211. {
  212. text: '结算记录',
  213. icon: 'settlement',
  214. auth: this.$hasPermissions('M_settlementRecord_mini'),
  215. path: '/pagesA/digitalShelf/settlementRecord/settlementRecord',
  216. color: '#55aa00',
  217. isShelf: true
  218. },
  219. {
  220. text: '付款结算',
  221. icon: 'payrecord',
  222. auth: this.$hasPermissions('M_settlementManage_mini'),
  223. path: '/pagesA/digitalShelf/settlementManage/settlementManage',
  224. color: '#ff5500',
  225. isShelf: true
  226. },
  227. {
  228. text: '联系汽配商',
  229. icon: 'phone',
  230. auth: this.hasLogin&&this.dealerPhone,
  231. path: '#call',
  232. color: '#00aaff',
  233. isShelf: true
  234. },
  235. ],
  236. },
  237. {
  238. text: '轮胎质保单',
  239. icon: 'file-text',
  240. auth: true,
  241. column: 4,
  242. size: 60,
  243. child:[
  244. {
  245. text: '创建质保单',
  246. icon: 'zhibaodan',
  247. auth: this.$hasPermissions('M_creatWarranty_mini'),
  248. path: '/pagesA/qualityPolicy/creatOrder',
  249. color: '#5555ff'
  250. },
  251. {
  252. text: '质保单查询',
  253. icon: 'ordersearch',
  254. auth: this.$hasPermissions('M_searchWarranty_mini'),
  255. path: '/pagesA/qualityPolicy/searchOrder',
  256. color: '#ff557f'
  257. },
  258. ],
  259. },
  260. {
  261. text: '基础设置',
  262. icon: 'setting',
  263. auth: true,
  264. column: 4,
  265. size: 60,
  266. child:[
  267. {
  268. text: '员工管理',
  269. icon: 'employee',
  270. auth: this.$hasPermissions('M_employee_mini'),
  271. path: '/pages/storeManage/personnel',
  272. color: '#0055ff'
  273. },
  274. {
  275. text: '岗位权限',
  276. icon: 'job',
  277. auth: this.$hasPermissions('M_roleSetting_mini'),
  278. path: '/pages/storeManage/roleSetting/roleSetting',
  279. color: '#55aa00'
  280. },
  281. {
  282. text: '价格显示设置',
  283. icon: 'permission',
  284. auth: this.$hasPermissions('M_priceShow_mini')&&this.showPriceSet,
  285. path: '/pages/storeManage/priceSetting/priceSetting',
  286. color: '#ff5500',
  287. isShelf: true
  288. },
  289. ],
  290. }
  291. ]
  292. // 计算父节点,权限
  293. list.forEach(item => {
  294. item.id = this.$u.guid()
  295. item.child = item.child.filter(c => c.auth)
  296. item.auth = item.child.length > 0
  297. })
  298. return list
  299. }
  300. },
  301. onShow() {
  302. // 用户头像
  303. this.avatarUrl = uni.getStorageSync('userPhoto');
  304. // 获取货架信息
  305. const shelfInfo = this.$store.state.vuex_storeShelf
  306. this.shelfSn = shelfInfo ? shelfInfo.shelfSn : ''
  307. this.dealerPhone = shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
  308. if(this.shelfSn){
  309. this.getPriceCofig()
  310. }
  311. },
  312. // 页面卸载
  313. onUnload() {
  314. uni.$off('refashProm')
  315. },
  316. methods: {
  317. // 查看用户信息
  318. toUser(){
  319. if(this.hasLogin){
  320. // 用户详细信息 或 门店认证
  321. uni.navigateTo({
  322. url: this.userInfo.sysUserFlag == '1' ? '/pages/personData/personData' : '/pages/storeManage/storeAuth'
  323. })
  324. }else{
  325. uni.navigateTo({
  326. url: '/pages/login/login'
  327. })
  328. }
  329. },
  330. // tab单击
  331. beforeSwitch(index){
  332. const row = this.$store.state.vuex_tabBarList[index]
  333. if(row.text == '促销'){
  334. uni.$emit('refashProm')
  335. }
  336. if(row.text == '扫描VIN'){
  337. this.openCamera()
  338. }else{
  339. return true
  340. }
  341. },
  342. // 网格打开页面
  343. openPage(e,child){
  344. const item = child[e.detail.index]
  345. this.toPage(item.path,item.isShelf)
  346. },
  347. // 获取价格配置
  348. getPriceCofig(){
  349. queryQplsConfig({shelfSn: this.shelfSn}).then(res => {
  350. this.$store.state.vuex_configPrice = res.data || null
  351. const ret = [false,false]
  352. ret[0]= res.data.shelf_cost_show == '1' || res.data.non_shelf_cost_show == '1'
  353. ret[1]= res.data.shelf_price_show == '1' || res.data.non_shelf_price_show == '1'
  354. this.showPriceSet = ret.filter(item => !!item).length > 0
  355. })
  356. },
  357. // 去扫描
  358. openCamera(){
  359. if(this.hasLogin){
  360. if(this.userInfo.sysUserFlag == '0'){
  361. if(this.vuex_vinScanNums < this.vuex_scanMaxNums){
  362. uni.navigateTo({
  363. url: "/pages/scan-frame/scan-frame"
  364. })
  365. }else{
  366. uni.showModal({
  367. title: '提示',
  368. content: '个人用户扫描VIN仅限10次,您的次数已用完!',
  369. confirmText: '好的',
  370. showCancel: false,
  371. success(res) {}
  372. })
  373. }
  374. }else{
  375. uni.navigateTo({
  376. url: "/pages/scan-frame/scan-frame"
  377. })
  378. }
  379. }else{
  380. uni.navigateTo({
  381. url: '/pages/login/login'
  382. })
  383. }
  384. },
  385. // 取货
  386. openTakeGood(index){
  387. // 已有数字货架
  388. if(this.hasShelf){
  389. this.clickAction(index)
  390. }else{
  391. uni.showToast({
  392. icon:'none',
  393. title: '门店没有关联数字货架,无法使用此功能!'
  394. })
  395. }
  396. },
  397. // 选择取货方式
  398. clickAction(index){
  399. const shelfSn = this.hasShelf.shelfSn
  400. const _this = this
  401. // 扫描
  402. if(index == 0){
  403. uni.scanCode({
  404. success: function (ret) {
  405. console.log(ret);
  406. const params = {
  407. codeType: ret.scanType == 'QR_CODE' ? 0 : 1
  408. }
  409. // 二维码
  410. if(ret.scanType == 'QR_CODE'){
  411. const result = ret.result.split("&")
  412. params.productSn = result[2] // 产品编码sn
  413. }else{
  414. params.qrCode = ret.result
  415. }
  416. uni.showLoading({
  417. title: "正在查询产品..."
  418. })
  419. // 确认取货
  420. getProductfindByScanCode(params).then(res => {
  421. if(res.status == 200 && res.data){
  422. if(res.data.currentInven){
  423. const billSource = ret.scanType == 'QR_CODE' ? 'qr_code': 'bar_code'
  424. const retData = Object.assign({shelfSn: shelfSn, billSource: billSource},res.data)
  425. _this.$store.state.vuex_tempData = retData
  426. uni.navigateTo({
  427. url: '/pagesA/queryByCode/confirmQh'
  428. })
  429. }else{
  430. uni.showModal({
  431. title: '提示',
  432. content: '产品库存为0,无法取货!',
  433. confirmText: '好的',
  434. showCancel: false
  435. })
  436. }
  437. }else{
  438. uni.showModal({
  439. title: '提示',
  440. content: '产品不属于此货架,请重新扫描!',
  441. confirmText: '好的',
  442. showCancel: false
  443. })
  444. }
  445. uni.hideLoading()
  446. })
  447. }
  448. });
  449. }else{
  450. // 按编码搜索
  451. uni.navigateTo({
  452. url: '/pagesA/queryByCode/queryByCode'
  453. })
  454. }
  455. },
  456. // 跳转打开页面
  457. toPage(path,isShelf){
  458. const _this = this
  459. if(this.hasLogin){
  460. // 游客未认证
  461. if(this.userInfo.sysUserFlag == '0'){
  462. if(this.storeApply&&this.storeApply.auditStatus=='WAIT'){
  463. uni.showModal({
  464. title: '提示',
  465. content: '门店认证资料审核中,请耐心等待!',
  466. confirmText: '知道了',
  467. showCancel: false
  468. })
  469. }
  470. // 如果审核已通过
  471. else if(this.storeApply&&this.storeApply.auditStatus=='PASS'){
  472. uni.showModal({
  473. title: '提示',
  474. content: '门店认证审核已通过,请重新登录!',
  475. confirmText: '去登录',
  476. showCancel: false,
  477. success() {
  478. _this.$store.dispatch('userLogout');
  479. uni.redirectTo({
  480. url: '/pages/login/login'
  481. });
  482. }
  483. })
  484. }else{
  485. this.showPopup = true
  486. }
  487. }else{
  488. // 已有数字货架
  489. if(this.hasShelf || !isShelf){
  490. if(path.indexOf("/pages")>=0){
  491. uni.navigateTo({
  492. url: path
  493. })
  494. }else{
  495. if(path == '#quhuo1'){
  496. this.openTakeGood(1)
  497. }
  498. if(path == '#quhuo0'){
  499. this.openTakeGood(0)
  500. }
  501. if(path == '#call'){
  502. this.call()
  503. }
  504. }
  505. }else{
  506. uni.showToast({
  507. icon:'none',
  508. title: '门店没有关联数字货架,无法使用此功能!'
  509. })
  510. }
  511. }
  512. }else{
  513. uni.navigateTo({
  514. url: '/pages/login/login'
  515. })
  516. }
  517. },
  518. // 去认证
  519. toAuthStore(){
  520. this.showPopup = false
  521. uni.navigateTo({
  522. url: '/pages/storeManage/storeAuth'
  523. })
  524. },
  525. // 打电话
  526. call(){
  527. this.callPhone(this.dealerPhone)
  528. },
  529. // 退出登录
  530. quitOut(){
  531. let _this = this
  532. uni.showModal({
  533. title: '提示',
  534. content: '确定退出登录吗?',
  535. success: (ret) => {
  536. if(ret.confirm){
  537. _this.$store.dispatch('userLogout');
  538. uni.navigateTo({
  539. url: '/pages/login/login'
  540. });
  541. }
  542. }
  543. })
  544. }
  545. }
  546. }
  547. </script>
  548. <style lang="less">
  549. .morePages{
  550. width: 100%;
  551. background-image: linear-gradient(#86defa 0%,#cdeff9 20%,#f8f8f8 30%);
  552. .header-box{
  553. z-index: 5;
  554. padding: 0em 1em;
  555. background: #066cff;
  556. .title{
  557. padding: 0;
  558. }
  559. .version{
  560. color: #FFEB3B;
  561. font-size: 0.8em;
  562. margin-left: 1em;
  563. }
  564. }
  565. .morePages-body{
  566. padding: 0 30rpx;
  567. overflow: hidden;
  568. .body-box{
  569. margin-bottom: 10px;
  570. z-index: 4;
  571. }
  572. .bg-blue{
  573. position: relative;
  574. > view{
  575. z-index: 100;
  576. position: relative;
  577. }
  578. &::after{
  579. /* 这个伪类的作用就是一个圆弧的背景色 */
  580. width: 130%;
  581. height: 100%;
  582. position: absolute;
  583. /*设置水平居中*/
  584. left: -15%;
  585. /* 之所以left:20%,是因为width:140%,若width:160%,那么left:30%才能水平居中 */
  586. top: -25%;
  587. /*层叠顺序,最底层显示*/
  588. content: '';
  589. border-radius: 0 0 50% 50%;
  590. /*分别对应 左上 右上 右下 左下 可以修改成其它颜色*/
  591. background: linear-gradient(to bottom, #066cff, #1d77ff);
  592. }
  593. .userCard{
  594. position:relative;
  595. left:0;
  596. bottom:0;
  597. padding: 0.5rem;
  598. background: #fff;
  599. border-radius: 25rpx;
  600. box-shadow: 2rpx 2rpx 5rpx #bcdede;
  601. .userCard-info{
  602. flex-grow:1;
  603. > view{
  604. &:last-child{
  605. margin-left: 0.5em;
  606. line-height: 1.5em;
  607. .user-name{
  608. font-size: 1rem;
  609. }
  610. >view{
  611. padding: 0.2em;
  612. }
  613. }
  614. }
  615. .user-info{
  616. flex-grow:1;
  617. }
  618. }
  619. .user-rz{
  620. font-size: 0.8rem;
  621. color:#58aff5;
  622. }
  623. }
  624. }
  625. .list-box{
  626. background: #ffffff;
  627. margin-bottom: 20rpx;
  628. border-radius: 25rpx;
  629. overflow: hidden;
  630. box-shadow: 2rpx 2rpx 5rpx #eee;
  631. .list-title{
  632. padding: 25rpx 20rpx;
  633. color: #666;
  634. > text{
  635. font-size: 28rpx;
  636. }
  637. }
  638. &:first-child{
  639. box-shadow: 2rpx 2rpx 5rpx #cdeff9;
  640. }
  641. .list-body{
  642. padding: 0 20rpx;
  643. }
  644. .grid-item-box{
  645. display: flex;
  646. flex-direction: column;
  647. align-items:center;
  648. justify-content: center;
  649. margin-bottom: 15px;
  650. .text{
  651. text-align:center;
  652. color: #666;
  653. margin-top: 3px;
  654. font-size: 12px;
  655. }
  656. .icons{
  657. text-align:center;
  658. display: flex;
  659. align-items: center;
  660. flex-direction: column;
  661. justify-content: center;
  662. }
  663. }
  664. }
  665. .phone{
  666. color: #00aaff;
  667. &:active{
  668. opacity: 0.8;
  669. transform:scale(0.9);
  670. }
  671. }
  672. }
  673. }
  674. </style>