index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542
  1. <template>
  2. <view v-if="!isLoading" class="container">
  3. <!-- 页面头部 -->
  4. <view class="main-header">
  5. <!-- 商户信息 -->
  6. <view v-if="isLogin" class="user-info">
  7. <view class="user-content">
  8. <view v-if="dataInfo.confirmInfo.storeInfo" class="belong">{{ dataInfo.confirmInfo.storeInfo.name }}<text class="nick-name">{{ dataInfo.confirmInfo.realName }}</text></view>
  9. <view v-else class="belong">{{ dataInfo.confirmInfo.merchantInfo.name }}<text class="nick-name">{{ dataInfo.confirmInfo.realName }}</text></view>
  10. </view>
  11. <view class="amount-info">
  12. <view class="amount-tip">今日交易金额(元)</view>
  13. <view v-if="dataInfo.payMoney" class="amount-num">{{ dataInfo.payMoney.toFixed(2) }}</view>
  14. <view v-if="!dataInfo.payMoney" class="amount-num">0.00</view>
  15. </view>
  16. </view>
  17. <!-- 未登录 -->
  18. <view v-if="!isLogin" class="user-info" @click="handleLogin">
  19. <view class="user-content">
  20. <view class="nick-name">未登录</view>
  21. <view class="login-tips">点击登录账号</view>
  22. </view>
  23. </view>
  24. </view>
  25. <view v-if="isLogin" class="user-app">
  26. <view class="item">
  27. <view class="tool" @click="scanCodeConfirm">
  28. <view class="icon">
  29. <image class="image" src="/static/icon/saoyisao.png" mode="scaleToFill"></image>
  30. </view>
  31. <view class="text">核销卡券</view>
  32. </view>
  33. </view>
  34. <view class="item">
  35. <view class="tool" @click="scanCodeCashier">
  36. <view class="icon">
  37. <image class="image" src="/static/icon/saoma.png" mode="scaleToFill"></image>
  38. </view>
  39. <view class="text">扫码收款</view>
  40. </view>
  41. </view>
  42. </view>
  43. <!-- 概述 -->
  44. <view class="my-asset">
  45. <view class="asset-left flex-box dis-flex flex-x-center">
  46. <view class="asset-left-item" @click="onTargetMember('all')">
  47. <view class="item-value dis-flex flex-x-center">
  48. <text>{{ dataInfo.userCount }}</text>
  49. </view>
  50. <view class="item-name dis-flex flex-x-center">
  51. <text>总会员</text>
  52. </view>
  53. </view>
  54. <view class="asset-left-item" @click="onTargetMember('todayActive')">
  55. <view class="item-value dis-flex flex-x-center">
  56. <text>{{ dataInfo.todayUser ? dataInfo.todayUser : 0}}</text>
  57. </view>
  58. <view class="item-name dis-flex flex-x-center">
  59. <text>今日活跃</text>
  60. </view>
  61. </view>
  62. <view class="asset-left-item" @click="onTargetOrder('today')">
  63. <view class="item-value dis-flex flex-x-center">
  64. <text>{{ dataInfo.orderCount }}</text>
  65. </view>
  66. <view class="item-name dis-flex flex-x-center">
  67. <text>今日订单</text>
  68. </view>
  69. </view>
  70. </view>
  71. </view>
  72. <!-- 待办操作 -->
  73. <view class="order-navbar">
  74. <view class="order-navbar-item" v-for="(item, index) in orderNavbar" :key="index" @click="onTargetTodo(item)">
  75. <view class="item-icon">
  76. <text class="iconfont" :class="[`icon-${item.icon}`]"></text>
  77. </view>
  78. <view class="item-name">{{ item.name }}</view>
  79. <text class="order-badge" v-if="item.count && item.count > 0">{{ item.count }}</text>
  80. </view>
  81. </view>
  82. <!-- 我的服务 -->
  83. <view class="my-service">
  84. <view class="service-title">我的管理</view>
  85. <view class="service-content clearfix">
  86. <block v-for="(item, index) in service" :key="index">
  87. <view v-if="item.type == 'link'" class="service-item" @click="handleService(item)">
  88. <view class="item-icon">
  89. <text class="iconfont" :class="[`icon-${item.icon}`]"></text>
  90. </view>
  91. <view class="item-name">{{ item.name }}</view>
  92. </view>
  93. <view v-if="item.type == 'button' && $platform == 'MP-WEIXIN'" class="service-item">
  94. <button class="btn-normal" :open-type="item.openType">
  95. <view class="item-icon">
  96. <text class="iconfont" :class="[`icon-${item.icon}`]"></text>
  97. </view>
  98. <view class="item-name">{{ item.name }}</view>
  99. </button>
  100. </view>
  101. </block>
  102. </view>
  103. </view>
  104. </view>
  105. </template>
  106. <script>
  107. import SettingKeyEnum from '@/common/enum/setting/Key'
  108. import SettingModel from '@/common/model/Setting'
  109. import * as MerchantApi from '@/api/merchant'
  110. import * as OrderApi from '@/api/order'
  111. import { checkLogin } from '@/utils/app'
  112. // 订单操作
  113. const orderNavbar = [
  114. { id: 'all', name: '全部待办', icon: 'qpdingdan' },
  115. { id: 'refund', name: '售后处理', icon: 'daifukuan', count: 1 },
  116. { id: 'confirm', name: '待核销', icon: 'shouhou', count: 1 },
  117. { id: 'book', name: '预约确认', icon: 'daishouhuo', count: 3 },
  118. ]
  119. /**
  120. * 我的服务
  121. * id: 标识; name: 标题名称; icon: 图标; type 类型(link和button); url: 跳转的链接
  122. */
  123. const service = [
  124. { id: 'myCoupon', name: '卡券管理', icon: 'youhuiquan', type: 'link', url: 'pages/my-coupon/index' },
  125. { id: 'coupon', name: '营销活动', icon: 'lingquan', type: 'link', url: 'pages/merchant/activity/index' },
  126. { id: 'points', name: '订单管理', icon: 'dingdan', type: 'link', url: 'pages/merchant/order/index' },
  127. { id: 'help', name: '会员管理', icon: 'tuandui', type: 'link', url: 'pages/merchant/member/index' },
  128. { id: 'address', name: '报表数据', icon: 'zhibozhong', type: 'link', url: 'pages/merchant/data/index' },
  129. { id: 'refund', name: '售后服务', icon: 'shouhou', type: 'link', url: 'pages/refund/index' },
  130. { id: 'setting', name: '商家设置', icon: 'shezhi1', type: 'link', url: 'pages/user/setting' },
  131. { id: 'staff', name: '店铺员工', icon: 'sy-yh', type: 'link', url: 'pages/staff/index' },
  132. ]
  133. export default {
  134. data() {
  135. return {
  136. // 枚举类
  137. SettingKeyEnum,
  138. // 当前运行的终端 (此处并不冗余,因为微信小程序端view层无法直接读取$platform)
  139. $platform: this.$platform,
  140. // 正在加载
  141. isLoading: true,
  142. // 是否已登录
  143. isLogin: false,
  144. // 系统设置
  145. setting: {},
  146. // 当前商户数据
  147. dataInfo: {},
  148. // 账户资产
  149. assets: { prestore: '--', timer: '--', coupon: '--' },
  150. // 我的服务
  151. service,
  152. // 订单操作
  153. orderNavbar,
  154. // 当前用户待处理数量
  155. todoCounts: { refund: 0, book: 0, confirm: 0 }
  156. }
  157. },
  158. /**
  159. * 生命周期函数--监听页面显示
  160. */
  161. onShow(options) {
  162. // 判断是否已登录
  163. this.isLogin = checkLogin()
  164. // 获取页面数据
  165. this.getPageData()
  166. },
  167. methods: {
  168. // 获取页面数据
  169. getPageData(callback) {
  170. const app = this
  171. app.isLoading = true
  172. Promise.all([app.getSetting(), app.getUserInfo()])
  173. .then(result => {
  174. app.isLoading = false
  175. // 初始化我的服务数据
  176. app.initService()
  177. // 初始化订单操作数据
  178. app.initOrderTabbar()
  179. // 执行回调函数
  180. callback && callback()
  181. })
  182. .catch(err => {
  183. console.log('catch', err)
  184. })
  185. },
  186. // 初始化我的服务数据
  187. initService() {
  188. const app = this
  189. const newService = []
  190. service.forEach(item => {
  191. newService.push(item)
  192. })
  193. app.service = newService
  194. },
  195. // 初始化订单操作数据
  196. initOrderTabbar() {
  197. const app = this
  198. const newOrderNavbar = []
  199. orderNavbar.forEach(item => {
  200. if (item.hasOwnProperty('count')) {
  201. item.count = app.todoCounts[item.id]
  202. }
  203. newOrderNavbar.push(item)
  204. })
  205. app.orderNavbar = newOrderNavbar
  206. },
  207. // 获取设置
  208. getSetting() {
  209. const app = this
  210. app.setting = {}
  211. },
  212. // 获取当前用户信息
  213. getUserInfo() {
  214. const app = this
  215. return new Promise((resolve, reject) => {
  216. !app.isLogin ? resolve(null) : MerchantApi.info()
  217. .then(result => {
  218. app.dataInfo = result.data
  219. resolve(app.dataInfo)
  220. })
  221. .catch(err => {
  222. if (err.result && err.result.status == 1001) {
  223. app.isLogin = false
  224. resolve(null)
  225. } else {
  226. reject(err)
  227. }
  228. })
  229. })
  230. },
  231. // 扫码核销
  232. scanCodeConfirm() {
  233. const app = this
  234. uni.scanCode({
  235. success:function(res){
  236. app.$navTo('pages/confirm/doConfirm?code=' + res.result + '&id=0')
  237. }
  238. });
  239. },
  240. // 扫码收款
  241. scanCodeCashier() {
  242. const app = this
  243. uni.scanCode({
  244. success:function(res){
  245. app.$navTo('pages/pay/cashier?code=' + res.result)
  246. }
  247. });
  248. },
  249. // 跳转到登录页
  250. handleLogin() {
  251. !this.isLogin && this.$navTo('pages/login/index')
  252. },
  253. // 跳转到订单页
  254. onTargetOrder(item) {
  255. this.$navTo('pages/merchant/order/index', { dataType: item.id })
  256. },
  257. // 跳转到我的积分页面
  258. onTargetPoints() {
  259. this.$navTo('pages/merchant/points/log')
  260. },
  261. // 跳转会员列表
  262. onTargetMember(dataType) {
  263. this.$navTo('pages/merchant/member/index', { dataType: dataType });
  264. },
  265. // 跳转到服务页面
  266. handleService({ url }) {
  267. this.$navTo(url)
  268. },
  269. },
  270. /**
  271. * 下拉刷新
  272. */
  273. onPullDownRefresh() {
  274. // 获取首页数据
  275. this.getPageData(() => {
  276. uni.stopPullDownRefresh()
  277. })
  278. }
  279. }
  280. </script>
  281. <style lang="scss" scoped>
  282. // 页面头部
  283. .main-header {
  284. position: relative;
  285. height: 240rpx;
  286. background-size: 100% 100%;
  287. overflow: hidden;
  288. display: block;
  289. align-items: center;
  290. background: $fuint-theme;
  291. padding: 10rpx;
  292. margin: 20rpx 20rpx 0rpx 20rpx;
  293. border-top-left-radius: 8rpx;
  294. border-top-right-radius: 8rpx;
  295. .user-info {
  296. display: block;
  297. height: 100rpx;
  298. margin-top: 1rpx;
  299. text-align: center;
  300. width: 100%;
  301. .user-content {
  302. display: block;
  303. margin-left: 0rpx;
  304. text-align: left;
  305. color: #ffffff;
  306. .belong {
  307. font-size: 28rpx;
  308. color: #fff;
  309. .nick-name {
  310. padding-left: 15rpx;
  311. }
  312. }
  313. .login-tips {
  314. margin-top: 12rpx;
  315. font-size: 28rpx;
  316. }
  317. }
  318. .amount-info {
  319. margin-top: 25rpx;
  320. color: #fff;
  321. display: block;
  322. text-align: center;
  323. .amount-tip {
  324. font-size: 28rpx;
  325. }
  326. .amount-num {
  327. margin-top: 10rpx;
  328. font-weight: bold;
  329. font-size: 58rpx;
  330. }
  331. }
  332. }
  333. }
  334. .user-app {
  335. display: flex;
  336. height: 260rpx;
  337. text-align: center;
  338. color: #fff;
  339. background: $fuint-theme;
  340. margin: 0 20rpx;
  341. border-bottom-left-radius: 8rpx;
  342. border-bottom-right-radius: 8rpx;
  343. padding-bottom: 60rpx;
  344. .item {
  345. width: 50%;
  346. height: 100%;
  347. margin: 20rpx;
  348. padding: 20rpx;
  349. text-align: right;
  350. .tool {
  351. width: 280rpx;
  352. clear: both;
  353. padding: 20rpx;
  354. border: 1rpx solid #fff;
  355. border-radius: 30rpx;
  356. text-align: center;
  357. margin:0 auto;
  358. .icon {
  359. .image {
  360. height: 68rpx;
  361. width: 68rpx;
  362. font-weight: bold;
  363. }
  364. }
  365. .text {
  366. margin-top: 10rpx;
  367. font-size: 30rpx;
  368. text-align: center;
  369. font-weight: bold;
  370. }
  371. }
  372. }
  373. }
  374. // 我的资产
  375. .my-asset {
  376. display: flex;
  377. padding: 40rpx 0;
  378. box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  379. border-radius: 5rpx;
  380. margin: 25rpx 20rpx 5rpx 20rpx;
  381. background: #ffffff;
  382. .asset-right {
  383. width: 200rpx;
  384. border-left: 1rpx solid #eee;
  385. }
  386. .asset-right-item {
  387. text-align: center;
  388. color: #545454;
  389. .item-icon {
  390. font-size: 60rpx;
  391. }
  392. .item-name {
  393. margin-top: 10rpx;
  394. }
  395. .item-name text {
  396. font-size: 20rpx;
  397. }
  398. }
  399. .asset-left-item {
  400. text-align: center;
  401. color: #666;
  402. padding: 0 72rpx;
  403. .item-value {
  404. font-size: 36rpx;
  405. color: #f03c3c;
  406. font-weight: bold;
  407. }
  408. .item-name {
  409. margin-top: 6rpx;
  410. }
  411. .item-name {
  412. font-size: 24rpx;
  413. }
  414. }
  415. }
  416. // 订单操作
  417. .order-navbar {
  418. display: flex;
  419. margin: 20rpx auto 20rpx auto;
  420. padding: 20rpx 0;
  421. width: 94%;
  422. box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  423. font-size: 30rpx;
  424. border-radius: 5rpx;
  425. background: #fff;
  426. &-item {
  427. position: relative;
  428. width: 25%;
  429. .item-icon {
  430. text-align: center;
  431. margin: 0 auto;
  432. padding: 10rpx 0;
  433. color: #545454;
  434. font-size: 40rpx;
  435. }
  436. .item-name {
  437. font-size: 24rpx;
  438. color: #545454;
  439. text-align: center;
  440. margin-right: 10rpx;
  441. }
  442. .order-badge {
  443. position: absolute;
  444. top: 0;
  445. right: 55rpx;
  446. font-size: 22rpx;
  447. background: #fa2209;
  448. text-align: center;
  449. line-height: 28rpx;
  450. color: #fff;
  451. border-radius: 100%;
  452. min-height: 30rpx;
  453. min-width: 30rpx;
  454. padding: 1rpx;
  455. }
  456. }
  457. }
  458. // 我的服务
  459. .my-service {
  460. margin: 22rpx auto 22rpx auto;
  461. padding: 20rpx 0;
  462. width: 94%;
  463. box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  464. border-radius: 5rpx;
  465. background: #fff;
  466. .service-title {
  467. padding-left: 20rpx;
  468. margin-bottom: 30rpx;
  469. font-size: 28rpx;
  470. }
  471. .service-content {
  472. // margin-bottom: -30rpx;
  473. .service-item {
  474. position: relative;
  475. width: 25%;
  476. float: left;
  477. margin-bottom: 30rpx;
  478. .item-icon {
  479. text-align: center;
  480. margin: 0 auto;
  481. padding: 10rpx 0;
  482. color: #ff3800;
  483. font-size: 40rpx;
  484. }
  485. .item-name {
  486. font-size: 24rpx;
  487. color: #545454;
  488. text-align: center;
  489. margin-right: 10rpx;
  490. }
  491. }
  492. }
  493. }
  494. </style>