morePage.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
  1. <template>
  2. <view>
  3. <view class="morePages">
  4. <view class="list-box" v-if="hasRedPacket&&hasShelf">
  5. <view class="list-title flex align_center justify_between" @click="toPage('/pagesB/redPacket')">
  6. <view><u-icon size="34" color="#f10000" name="red-packet-fill"></u-icon> <text style="color: #ff0000;margin-left: 10rpx;">红包奖励</text></view>
  7. <view>
  8. <u-icon size="28" color="#969799" name="arrow-right"></u-icon>
  9. </view>
  10. </view>
  11. </view>
  12. <view class="list-box" v-if="hasLogin&&$hasPermissions('M_couponList_mini')">
  13. <view class="list-title flex align_center justify_between" @click="toPage('/pagesB/coupon')">
  14. <view><u-icon size="34" color="#ff7d0b" name="gift-fill"></u-icon> <text style="color: #ff7d0b;margin-left: 10rpx;">我的优惠券</text></view>
  15. <view>
  16. <u-icon size="28" color="#969799" name="arrow-right"></u-icon>
  17. </view>
  18. </view>
  19. </view>
  20. <!-- 网格图标 -->
  21. <view class="list-box" v-for="item in itemList" :key="item.id">
  22. <view class="list-title">
  23. <u-icon size="35" :name="item.icon"></u-icon> <text>{{item.text}}</text>
  24. </view>
  25. <view class="list-body">
  26. <uni-grid :column="3" :highlight="true" :show-border="false" :square="false" @change="e=>openPage(e,item.child)">
  27. <uni-grid-item v-for="(sub, idx) in item.child" :index="idx" :key="idx">
  28. <view class="grid-item-box">
  29. <u-icon class="icons" :color="sub.color" :name="sub.icon" custom-prefix="custom-icon"></u-icon>
  30. <text class="text">{{sub.text}}</text>
  31. </view>
  32. </uni-grid-item>
  33. </uni-grid>
  34. </view>
  35. </view>
  36. <view class="list-box" v-if="hasLogin&&dealerPhone">
  37. <view class="list-title flex justify_center phone" @click="call">
  38. <u-icon size="36" name="phone"></u-icon> <text>联系汽配商</text>
  39. </view>
  40. </view>
  41. <view class="list-box" v-if="hasLogin">
  42. <view class="list-title flex justify_center phone" @click="quitOut">
  43. <text>退出登录</text>
  44. </view>
  45. </view>
  46. <!-- 去认证弹框 -->
  47. <u-popup v-model="showPopup" mode="center" :border-radius="20" closeable>
  48. <view style="background-color: #fff;padding: 1rem;">
  49. <u-image width="533" height="415" src="/static/authimg.jpg"></u-image>
  50. <view style="padding-top:1rem;" class="flex justify_center">
  51. <u-button @click="toAuthStore()" shape="circle" :custom-style="{background:'#066cff',color:'#fff',width:'350rpx'}">开始认证</u-button>
  52. </view>
  53. </view>
  54. </u-popup>
  55. </view>
  56. <!-- tab -->
  57. <u-tabbar :list="vuex_tabBarList" :before-switch="beforeSwitch" :midButton="vuex_tabBarList.length==5"></u-tabbar>
  58. </view>
  59. </template>
  60. <script>
  61. import {
  62. mapState,
  63. mapMutations
  64. } from 'vuex'
  65. import { queryQplsConfig } from '@/api/shelf.js'
  66. export default {
  67. data() {
  68. return {
  69. dealerPhone: null, // 经销商电话
  70. showPopup: false,
  71. showPriceSet: false,
  72. shelfSn: null,
  73. }
  74. },
  75. computed: {
  76. ...mapState(['hasLogin','vuex_vinScanNums','vuex_scanMaxNums','vuex_tabBarList']),
  77. hasShelf(){
  78. return !!this.$store.state.vuex_storeShelf
  79. },
  80. userInfo(){
  81. return this.$store.state.vuex_userInfo
  82. },
  83. storeApply(){
  84. return this.$store.state.vuex_storeAuthInfo
  85. },
  86. hasRedPacket(){
  87. const rule = this.$store.state.vuex_rewardRule
  88. return rule&&rule.ruleStatus == 'release'
  89. },
  90. itemList(){
  91. const list = [
  92. {
  93. text: '货品管理',
  94. icon: 'bag',
  95. auth: true,
  96. child:[
  97. {
  98. text: '库存查询',
  99. icon: 'stockquery',
  100. auth: this.$hasPermissions('M_stockQueryList_mini'),
  101. path: '/pagesB/stockQuery/stockQuery',
  102. color: '#00aaff'
  103. },
  104. {
  105. text: '补货记录',
  106. icon: 'replenishment',
  107. auth: this.$hasPermissions('M_stockPut_mini'),
  108. path: '/pagesA/digitalShelf/stockPut',
  109. color: '#aa55ff'
  110. }
  111. ],
  112. },
  113. {
  114. text: '订单管理',
  115. icon: 'order',
  116. auth: true,
  117. child:[
  118. {
  119. text: '货架订单',
  120. icon: 'shelforder',
  121. auth: this.$hasPermissions('M_shelfOrder_mini'),
  122. path: '/pagesA/digitalShelf/orderList',
  123. color: '#0055ff'
  124. },
  125. {
  126. text: '急送订单',
  127. icon: 'yijianshansong',
  128. auth: this.$hasPermissions('M_tempShelfOrder_mini'),
  129. path: '/pagesA/digitalShelf/tempOrderList/tempOrderList',
  130. color: '#ff7b1c'
  131. },
  132. {
  133. text: '采购订单',
  134. icon: 'purchaseorder',
  135. auth: this.$hasPermissions('M_procureOrder_mini'),
  136. path: '/pagesB/procureOrderList',
  137. color: '#00aa00'
  138. }
  139. ],
  140. },
  141. {
  142. text: '电子质保单',
  143. icon: 'file-text',
  144. auth: true,
  145. child:[
  146. {
  147. text: '创建质保单',
  148. icon: 'zhibaodan',
  149. auth: this.$hasPermissions('M_creatWarranty_mini'),
  150. path: '/pagesA/qualityPolicy/creatOrder',
  151. color: '#5555ff'
  152. },
  153. {
  154. text: '质保单查询',
  155. icon: 'ordersearch',
  156. auth: this.$hasPermissions('M_searchWarranty_mini'),
  157. path: '/pagesA/qualityPolicy/searchOrder',
  158. color: '#ff557f'
  159. },
  160. ],
  161. },
  162. {
  163. text: '结算管理',
  164. icon: 'rmb-circle',
  165. auth: true,
  166. child:[
  167. {
  168. text: '结算记录',
  169. icon: 'settlement',
  170. auth: this.$hasPermissions('M_settlementRecord_mini'),
  171. path: '/pagesA/digitalShelf/settlementRecord/settlementRecord',
  172. color: '#00aaff'
  173. },
  174. {
  175. text: '付款结算',
  176. icon: 'payrecord',
  177. auth: this.$hasPermissions('M_settlementManage_mini'),
  178. path: '/pagesA/digitalShelf/settlementManage/settlementManage',
  179. color: '#ff5500'
  180. },
  181. ],
  182. },
  183. {
  184. text: '基础设置',
  185. icon: 'setting',
  186. auth: true,
  187. child:[
  188. {
  189. text: '员工管理',
  190. icon: 'employee',
  191. auth: this.$hasPermissions('M_employee_mini'),
  192. path: '/pages/storeManage/personnel',
  193. color: '#0055ff'
  194. },
  195. {
  196. text: '岗位权限',
  197. icon: 'job',
  198. auth: this.$hasPermissions('M_roleSetting_mini'),
  199. path: '/pages/storeManage/roleSetting/roleSetting',
  200. color: '#55aa00'
  201. },
  202. {
  203. text: '价格显示设置',
  204. icon: 'permission',
  205. auth: this.$hasPermissions('M_priceShow_mini')&&this.showPriceSet,
  206. path: '/pages/storeManage/priceSetting/priceSetting',
  207. color: '#ff5500'
  208. },
  209. ],
  210. }
  211. ]
  212. // 计算父节点,权限
  213. list.forEach(item => {
  214. item.id = this.$u.guid()
  215. item.child = item.child.filter(c => c.auth)
  216. item.auth = item.child.length > 0
  217. })
  218. return list
  219. }
  220. },
  221. onShow() {
  222. // 获取货架信息
  223. const shelfInfo = this.$store.state.vuex_storeShelf
  224. this.shelfSn = shelfInfo ? shelfInfo.shelfSn : ''
  225. this.dealerPhone = shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
  226. if(this.shelfSn){
  227. this.getPriceCofig()
  228. }
  229. },
  230. // 页面卸载
  231. onUnload() {
  232. uni.$off('refashProm')
  233. },
  234. methods: {
  235. // tab单击
  236. beforeSwitch(index){
  237. const row = this.$store.state.vuex_tabBarList[index]
  238. if(row.text == '促销'){
  239. uni.$emit('refashProm')
  240. }
  241. if(row.text == '扫描VIN'){
  242. this.openCamera()
  243. }else{
  244. return true
  245. }
  246. },
  247. // 网格打开页面
  248. openPage(e,child){
  249. const item = child[e.detail.index]
  250. this.toPage(item.path)
  251. },
  252. // 获取价格配置
  253. getPriceCofig(){
  254. queryQplsConfig({shelfSn: this.shelfSn}).then(res => {
  255. this.$store.state.vuex_configPrice = res.data || null
  256. const ret = [false,false]
  257. ret[0]= res.data.shelf_cost_show == '1' || res.data.non_shelf_cost_show == '1'
  258. ret[1]= res.data.shelf_price_show == '1' || res.data.non_shelf_price_show == '1'
  259. this.showPriceSet = ret.filter(item => !!item).length > 0
  260. })
  261. },
  262. // 去扫描
  263. openCamera(){
  264. if(this.hasLogin){
  265. if(this.userInfo.sysUserFlag == '0'){
  266. if(this.vuex_vinScanNums < this.vuex_scanMaxNums){
  267. uni.navigateTo({
  268. url: "/pages/scan-frame/scan-frame"
  269. })
  270. }else{
  271. uni.showModal({
  272. title: '提示',
  273. content: '个人用户扫描VIN仅限10次,您的次数已用完!',
  274. confirmText: '好的',
  275. showCancel: false,
  276. success(res) {}
  277. })
  278. }
  279. }else{
  280. uni.navigateTo({
  281. url: "/pages/scan-frame/scan-frame"
  282. })
  283. }
  284. }else{
  285. uni.navigateTo({
  286. url: '/pages/login/login'
  287. })
  288. }
  289. },
  290. // 跳转打开页面
  291. toPage(path){
  292. const _this = this
  293. if(this.hasLogin){
  294. // 游客未认证
  295. if(this.userInfo.sysUserFlag == '0'){
  296. if(this.storeApply&&this.storeApply.auditStatus=='WAIT'){
  297. uni.showModal({
  298. title: '提示',
  299. content: '门店认证资料审核中,请耐心等待!',
  300. confirmText: '知道了',
  301. showCancel: false
  302. })
  303. }
  304. // 如果审核已通过
  305. else if(this.storeApply&&this.storeApply.auditStatus=='PASS'){
  306. uni.showModal({
  307. title: '提示',
  308. content: '门店认证审核已通过,请重新登录!',
  309. confirmText: '去登录',
  310. showCancel: false,
  311. success() {
  312. _this.$store.dispatch('userLogout');
  313. uni.redirectTo({
  314. url: '/pages/login/login'
  315. });
  316. }
  317. })
  318. }else{
  319. this.showPopup = true
  320. }
  321. }else{
  322. // 已有数字货架
  323. if(this.hasShelf){
  324. uni.navigateTo({
  325. url: path
  326. })
  327. }else{
  328. uni.showToast({
  329. icon:'none',
  330. title: '门店没有关联数字货架,无法使用此功能!'
  331. })
  332. }
  333. }
  334. }else{
  335. uni.navigateTo({
  336. url: '/pages/login/login'
  337. })
  338. }
  339. },
  340. // 去认证
  341. toAuthStore(){
  342. this.showPopup = false
  343. uni.navigateTo({
  344. url: '/pages/storeManage/storeAuth'
  345. })
  346. },
  347. // 打电话
  348. call(){
  349. this.callPhone(this.dealerPhone)
  350. },
  351. // 退出登录
  352. quitOut(){
  353. let _this = this
  354. uni.showModal({
  355. title: '提示',
  356. content: '确定退出登录吗?',
  357. success: (ret) => {
  358. if(ret.confirm){
  359. _this.$store.dispatch('userLogout');
  360. uni.navigateTo({
  361. url: '/pages/login/login'
  362. });
  363. }
  364. }
  365. })
  366. }
  367. }
  368. }
  369. </script>
  370. <style lang="less">
  371. .morePages{
  372. width: 100%;
  373. padding: 30rpx;
  374. background-image: linear-gradient(#86defa 0%,#cdeff9 20%,#f8f8f8 30%);
  375. .list-box{
  376. background: #ffffff;
  377. margin-bottom: 20rpx;
  378. border-radius: 25rpx;
  379. overflow: hidden;
  380. box-shadow: 2rpx 2rpx 5rpx #eee;
  381. .list-title{
  382. padding: 25rpx 20rpx;
  383. font-size: 30rpx;
  384. > text{
  385. margin-left: 10rpx;
  386. }
  387. }
  388. &:first-child{
  389. box-shadow: 2rpx 2rpx 5rpx #cdeff9;
  390. }
  391. .list-body{
  392. padding: 0 20rpx 25rpx;
  393. }
  394. .grid-item-box{
  395. display: flex;
  396. flex-direction: column;
  397. align-items:center;
  398. justify-content: center;
  399. .text{
  400. text-align:center;
  401. color: #666;
  402. }
  403. .icons{
  404. font-size: 70rpx;
  405. width: 90rpx;
  406. height: 90rpx;
  407. text-align:center;
  408. display: flex;
  409. align-items: center;
  410. flex-direction: column;
  411. justify-content: center;
  412. }
  413. }
  414. }
  415. .phone{
  416. color: #00aaff;
  417. &:active{
  418. opacity: 0.8;
  419. transform:scale(0.9);
  420. }
  421. }
  422. }
  423. </style>