index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550
  1. <template>
  2. <view>
  3. <view class="">
  4. <view class="bg"></view>
  5. <view class="bg-model">
  6. <view class="bg-model-pa">
  7. <image class="bg-model-img" src="../static/images/bg.png"></image>
  8. </view>
  9. <card :date="date" :obj="info" :textCollection="textCollection" />
  10. </view>
  11. </view>
  12. <view class="box-pack-between menber">
  13. <view class="menber-left menber-content">
  14. <view class="">
  15. 今日新增会员
  16. </view>
  17. <view class="number">
  18. {{obj.today_count||0}}
  19. </view>
  20. </view>
  21. <view class="menber-right menber-content">
  22. <view class="">
  23. 今日会员充值(元)
  24. </view>
  25. <view class="number">
  26. {{obj.today_total||0}}
  27. </view>
  28. </view>
  29. </view>
  30. <view class="haeder-content">
  31. <view class="flex-y-center haeder-title haeder-title-color">
  32. <view class="haeder flex-center haeder-color">
  33. <view class="haeder-bg">
  34. </view>
  35. </view>
  36. <view class="">
  37. 商品订单
  38. </view>
  39. </view>
  40. <view class="">
  41. <view class="haeder-bottom">
  42. <view class="haeder-bottom-price">
  43. {{obj.to_be_paid_order||0}}
  44. </view>
  45. <view class="haeder-bottom-title">
  46. 待支付
  47. </view>
  48. </view>
  49. <view class="haeder-bottom">
  50. <view class="haeder-bottom-price">
  51. {{obj.paid_order||0}}
  52. </view>
  53. <view class="haeder-bottom-title">
  54. 已支付
  55. </view>
  56. </view>
  57. <view class="haeder-bottom">
  58. <view class="haeder-bottom-price">
  59. {{obj.dai_peisong_order||0}}
  60. </view>
  61. <view class="haeder-bottom-title">
  62. 待配送
  63. </view>
  64. </view>
  65. <view class="haeder-bottom">
  66. <view class="haeder-bottom-price">
  67. {{obj.peisong_order||0}}
  68. </view>
  69. <view class="haeder-bottom-title">
  70. 配送中
  71. </view>
  72. </view>
  73. <view class="haeder-bottom">
  74. <view class="haeder-bottom-price">
  75. {{obj.picked_order||0}}
  76. </view>
  77. <view class="haeder-bottom-title">
  78. 待自提
  79. </view>
  80. </view>
  81. <view class="haeder-bottom">
  82. <view class="haeder-bottom-price">
  83. {{obj.refund_order||0}}
  84. </view>
  85. <view class="haeder-bottom-title">
  86. 已退款
  87. </view>
  88. </view>
  89. </view>
  90. </view>
  91. <view class="payCode" @click="upCode">
  92. <image src="../static/images/payCode.png" mode="widthFix"></image>
  93. </view>
  94. <view class="shopSolt haeder-content">
  95. <view class="flex-y-center haeder-title shop-titleColor">
  96. <view class="haeder flex-center shop-color">
  97. <view class="haeder-bg">
  98. </view>
  99. </view>
  100. <view class="">
  101. 商品销量排行
  102. </view>
  103. </view>
  104. <view class="solt-num">
  105. 排名实时更新
  106. </view>
  107. <view class="main">
  108. <view class="row tab-h sticky">
  109. <view class="td" :class="type==2?'flex-grow-1':'td'">排名</view>
  110. <view class="td" :class="type==2?'flex-grow-1':'td'">名称</view>
  111. <view class="td" :class="type==2?'flex-grow-1':'td'">数量</view>
  112. <!-- <view class="td" v-if="type==1">类型</view> -->
  113. </view>
  114. <view class="row" v-for="(item,index) in obj.goods_list" :key="item.id">
  115. <view class="td" :class="type==2?'flex-grow-1':'td'">
  116. <image class="number" v-if="index==0" src="../static/images/number1.png"></image>
  117. <image class="number" v-else-if="index==1" src="../static/images/number2.png"></image>
  118. <image class="number" v-else-if="index==2" src="../static/images/number3.png"></image>
  119. <block v-else>
  120. {{index+1}}
  121. </block>
  122. </view>
  123. <view class="td" :class="type==2?'flex-grow-1':'td'">{{item.name}}</view>
  124. <view class="td" :class="type==2?'flex-grow-1':'td'">{{item.num}}</view>
  125. </view>
  126. </view>
  127. </view>
  128. <view class="haeder-content" style="margin-top: 40rpx;margin-bottom: 40rpx;">
  129. <view class="flex-y-center haeder-title haeder-title-color">
  130. <!-- <view class="haeder flex-center haeder-color">
  131. <view class="haeder-bg">
  132. </view>
  133. </view> -->
  134. <image src="/static/images/icon_15.png" mode="aspectFit" class="gn-icon"></image>
  135. <view class="">
  136. 常用功能
  137. </view>
  138. </view>
  139. <view class="gn-list">
  140. <navigator url="/statistics/goodsData/goodsData" class="gn-item flex-column flex-center"
  141. hover-class="nav-hover">
  142. <image src="/static/images/gn_icon_1.png" mode="aspectFit" class="gn-icon"></image>
  143. <view class="name">商品统计</view>
  144. </navigator>
  145. </view>
  146. </view>
  147. <zx-footer-bar :active="0" :type="type" />
  148. </view>
  149. </template>
  150. <script>
  151. // #ifdef MP-WEIXIN
  152. import saveImgToPhotosAlbum from "@/static/js/saveImgToPhotosAlbum.js";
  153. // #endif
  154. import zxFooterBar from '../../components/zx-footer-bar/zx-footer-bar.vue'
  155. import card from '../components/card/card.vue'
  156. export default {
  157. components: {
  158. zxFooterBar,
  159. card,
  160. },
  161. data() {
  162. return {
  163. textCollection: {
  164. title: "营业额",
  165. type: 1, //'首页'
  166. wx: '微信支付',
  167. ali: '支付宝支付',
  168. money: '现金支付',
  169. menber: '会员支付',
  170. juhe: '聚合支付',
  171. },
  172. info: {},
  173. obj: {},
  174. type: 2,
  175. list: [],
  176. URL: getApp().globalData.URL,
  177. date: "今日"
  178. }
  179. },
  180. onLoad() {
  181. this.http();
  182. },
  183. onPullDownRefresh() {
  184. uni.showNavigationBarLoading();
  185. this.http();
  186. setTimeout(() => {
  187. uni.hideNavigationBarLoading()
  188. uni.stopPullDownRefresh()
  189. }, 1000)
  190. },
  191. methods: {
  192. http(e) {
  193. this.request({
  194. url: 'Smdcshop/store_index',
  195. data: {
  196. admin_id: uni.getStorageSync("admin_id")
  197. }
  198. }).then(res => {
  199. if (res.code == 200) {
  200. let info = {
  201. total: res.data.jryye_price,
  202. wx: res.data.jr_wx,
  203. zfb: res.data.jr_zfb,
  204. cash: res.data.jrxz_order,
  205. menber: res.data.jr_hy,
  206. juhe:res.data.jh_ping_juhema1
  207. }
  208. this.info = info;
  209. this.obj = res.data;
  210. }
  211. }).catch((res) => {
  212. uni.showToast({
  213. title: res.message,
  214. icon: 'none'
  215. })
  216. });
  217. },
  218. upCode(e) {
  219. // #ifdef H5
  220. uni.showModal({
  221. title: '提示',
  222. content: '请长按二维码图片进行保存',
  223. showCancel: false,
  224. confirmText: '好的',
  225. });
  226. // #endif
  227. // #ifdef MP-WEIXIN
  228. var url = this.URL + this.obj.skm_qrcode;
  229. console.log(url, "url")
  230. saveImgToPhotosAlbum.saveImgToPhotosAlbum(url).then((res) => {
  231. //成功的逻辑
  232. console.log(res, "保存成功")
  233. uni.showToast({
  234. title: '保存成功',
  235. icon: 'none',
  236. mask: true,
  237. })
  238. }).catch((err) => {
  239. console.log(err, "保存失败")
  240. if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
  241. err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
  242. "saveImageToPhotosAlbum:fail authorize no response") {
  243. // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
  244. uni.showModal({
  245. title: '提示',
  246. content: '需要您设置授权保存相册',
  247. showCancel: false,
  248. success: modalSuccess => {
  249. uni.openSetting({
  250. success(settingdata) {
  251. console.log("settingdata", settingdata)
  252. if (settingdata.authSetting[
  253. 'scope.writePhotosAlbum']) {
  254. uni.showModal({
  255. title: '提示',
  256. content: '获取权限成功,再次点击图片即可保存',
  257. showCancel: false,
  258. })
  259. } else {
  260. uni.showModal({
  261. title: '提示',
  262. content: '获取权限失败,将无法保存到相册哦~',
  263. showCancel: false,
  264. })
  265. }
  266. },
  267. fail(failData) {
  268. console.log("failData", failData)
  269. },
  270. complete(finishData) {
  271. console.log("finishData", finishData)
  272. }
  273. })
  274. }
  275. })
  276. }
  277. // 失败后的逻辑
  278. })
  279. // #endif
  280. },
  281. },
  282. }
  283. </script>
  284. <style lang="scss">
  285. page {
  286. background-color: #F4F5F7;
  287. }
  288. .bg {
  289. position: absolute;
  290. top: 0;
  291. left: 0;
  292. width: 100%;
  293. height: 313rpx;
  294. background: #3387ff;
  295. }
  296. .bg-model {
  297. position: relative;
  298. width: 100%;
  299. }
  300. .bg-model-pa {
  301. position: absolute;
  302. top: 0;
  303. left: 0;
  304. width: 100%;
  305. }
  306. .bg-model-img {
  307. width: 690rpx;
  308. height: 361rpx;
  309. display: block;
  310. margin: 0 auto;
  311. border-radius: 8rpx;
  312. box-shadow: 0px 6rpx 12rpx 0px rgba(230, 233, 240, 0.50);
  313. }
  314. .menber {
  315. width: 690rpx;
  316. margin: 40rpx auto;
  317. }
  318. .menber-content {
  319. width: 330rpx;
  320. height: 160rpx;
  321. border-radius: 8rpx;
  322. box-shadow: 0px 6px 16rpx 0px rgba(0, 60, 32, 0.06);
  323. color: #FFFFFF;
  324. padding: 31rpx 40rpx;
  325. font-size: 28rpx;
  326. }
  327. .menber-left {
  328. background: linear-gradient(180deg, #6fa8f8, #328afe);
  329. }
  330. .menber-right {
  331. background: linear-gradient(180deg, #fbd652, #fda03c);
  332. }
  333. .menber-content .number {
  334. font-size: 36rpx;
  335. }
  336. .haeder-content {
  337. width: 690rpx;
  338. margin: 0 auto;
  339. background-color: #FFFFFF;
  340. padding-bottom: 40rpx;
  341. border-radius: 8rpx;
  342. }
  343. .haeder-title {
  344. height: 90rpx;
  345. font-size: 32rpx;
  346. font-family: PingFang SC, PingFang SC-Medium;
  347. font-weight: 500;
  348. text-align: center;
  349. color: #333333;
  350. border-radius: 8rpx 8rpx 0px 0px;
  351. padding: 0 24rpx;
  352. }
  353. .haeder-title-color {
  354. background: linear-gradient(90deg, rgba(114, 178, 255, 0.30), rgba(114, 178, 255, 0.00));
  355. }
  356. .haeder-color {
  357. background: linear-gradient(136deg, #6397fd 4%, #3377ff 100%);
  358. }
  359. .shop-titleColor {
  360. background: linear-gradient(90deg, rgba(254, 160, 51, 0.30), rgba(254, 160, 51, 0.00));
  361. }
  362. .shop-color {
  363. background: linear-gradient(138deg, #ffb660 5%, #fea033 97%);
  364. }
  365. .haeder {
  366. width: 36rpx;
  367. height: 36rpx;
  368. border-radius: 50%;
  369. margin-right: 10rpx;
  370. }
  371. .gn-icon {
  372. flex: none;
  373. display: block;
  374. width: 36rpx;
  375. height: 36rpx;
  376. margin-right: 10rpx;
  377. }
  378. .haeder-bg {
  379. width: 16rpx;
  380. height: 19rpx;
  381. background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.60) 100%);
  382. border-radius: 4rpx;
  383. }
  384. .haeder-bottom {
  385. padding: 30rpx 0 0rpx 0;
  386. width: 25%;
  387. display: inline-block;
  388. text-align: center;
  389. }
  390. .haeder-bottom-price {
  391. font-size: 36rpx;
  392. font-family: PingFang SC, PingFang SC-Medium;
  393. font-weight: 500;
  394. text-align: center;
  395. color: #333333;
  396. margin-bottom: 12rpx;
  397. }
  398. .haeder-bottom-title {
  399. font-size: 24rpx;
  400. font-family: PingFang SC, PingFang SC-Regular;
  401. font-weight: 400;
  402. text-align: center;
  403. color: #a2a2a2;
  404. }
  405. .payCode {
  406. width: 690rpx;
  407. margin: 29rpx auto;
  408. /* height: 216rpx; */
  409. }
  410. .payCode image {
  411. width: 100%;
  412. height: 100%;
  413. }
  414. .solt-num {
  415. font-size: 24rpx;
  416. font-family: PingFang SC, PingFang SC-Regular;
  417. font-weight: 400;
  418. text-align: center;
  419. color: #999999;
  420. padding: 30rpx 0 24rpx 0;
  421. }
  422. .main {
  423. background-color: #fff;
  424. display: table;
  425. width: 100%;
  426. z-index: 3;
  427. }
  428. .main .row {
  429. display: flex;
  430. flex-flow: row nowrap;
  431. justify-content: flex-start;
  432. align-items: center;
  433. /* height: 80rpx; */
  434. padding: 20rpx 0;
  435. border-bottom: 2rpx solid #f5f5f5;
  436. }
  437. .main .row.tab-h {
  438. top: var(--window-top);
  439. background-color: #F9FBFF;
  440. }
  441. .main .row .td {
  442. text-align: center;
  443. font-size: 24rpx;
  444. color: #333;
  445. }
  446. .main .row .td:nth-child(1) {
  447. width: 10%;
  448. }
  449. .main .row .td:nth-child(2) {
  450. width: 40%;
  451. }
  452. .main .row .td:nth-child(3) {
  453. width: 30%;
  454. }
  455. .main .row .td:nth-child(4) {
  456. width: 20%;
  457. }
  458. .main .number {
  459. width: 36rpx;
  460. height: 43rpx;
  461. }
  462. .gn-list {
  463. display: flex;
  464. flex-flow: row wrap;
  465. justify-content: flex-start;
  466. align-content: flex-start;
  467. .gn-item {
  468. flex: none;
  469. width: 25%;
  470. padding-top: 40rpx;
  471. .gn-icon {
  472. display: block;
  473. width: 48rpx;
  474. height: 48rpx;
  475. }
  476. .name {
  477. font-size: 24rpx;
  478. line-height: 33rpx;
  479. margin-top: 16rpx;
  480. }
  481. }
  482. }
  483. </style>