StoreIndex.vue 11 KB

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