index.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510
  1. <template>
  2. <view v-if="is_login==1">
  3. <view class="tui-mybg-box">
  4. <view class="tui-header-center">
  5. <image :src="detail.touxiang || '/static/images/my/mine_def_touxiang_3x.png'" class="tui-avatar">
  6. </image>
  7. <view class="tui-info">
  8. <view class="tui-nickname">
  9. {{detail.title}}
  10. </view>
  11. <view class="tui-explain">{{detail.UsersRoles.title}}</view>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="tui-content-box">
  16. <view class="tui-box tui-tool-box">
  17. <tui-list-view>
  18. <tui-list-cell @tap="navigateTo('/pagesA/my/admin/order')" :arrow="true">
  19. <view class="tui-item-box">
  20. <tui-icon name="clock-fill" :size="24" color="#5677fc"></tui-icon>
  21. <view class="tui-list-cell_name">订单管理</view>
  22. </view>
  23. </tui-list-cell>
  24. <!-- #ifdef MP-WEIXIN -->
  25. <tui-list-cell @tap="navigateTo('/pagesA/my/userInfo/setmpopenid')" :arrow="true">
  26. <view class="tui-item-box">
  27. <tui-icon name="setup" :size="24" color="#5677fc"></tui-icon>
  28. <view class="tui-list-cell_name">绑定公众号通知</view>
  29. </view>
  30. </tui-list-cell>
  31. <!-- #endif -->
  32. <tui-list-cell @tap="navigateTo('/pages/login/logout?ptype=admin')" :arrow="true">
  33. <view class="tui-item-box">
  34. <tui-icon name="setup" :size="24" color="#5677fc"></tui-icon>
  35. <view class="tui-list-cell_name">安全退出</view>
  36. </view>
  37. </tui-list-cell>
  38. </tui-list-view>
  39. </view>
  40. </view>
  41. </view>
  42. </template>
  43. <script>
  44. export default {
  45. data() {
  46. return {
  47. isLogin: false,
  48. is_login: 0,
  49. top: 0, //标题图标距离顶部距离
  50. opacity: 0,
  51. scrollTop: 0.5,
  52. detail: []
  53. };
  54. },
  55. onLoad: function(options) {
  56. let _this = this;
  57. let obj = {};
  58. // #ifdef MP-WEIXIN
  59. obj = wx.getMenuButtonBoundingClientRect();
  60. // #endif
  61. // #ifdef MP-BAIDU
  62. obj = swan.getMenuButtonBoundingClientRect();
  63. // #endif
  64. // #ifdef MP-ALIPAY
  65. my.hideAddToDesktopMenu();
  66. // #endif
  67. uni.getSystemInfo({
  68. success: res => {
  69. this.width = obj.left || res.windowWidth;
  70. this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
  71. this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
  72. this.scrollH = res.windowWidth * 0.6;
  73. }
  74. });
  75. },
  76. onShow() {
  77. let _this = this;
  78. _this.$request.get('admin.detail', {
  79. samkey: (new Date()).valueOf()
  80. }).then(res => {
  81. if (res.errno == 0 && res.is_login == 1) {
  82. _this.is_login = res.is_login;
  83. _this.detail = res.data;
  84. } else {
  85. uni.showModal({
  86. title: '提示',
  87. content: res.message || '您不是管理员!',
  88. showCancel: false,
  89. //是否显示取消按钮
  90. success: function(res) {
  91. if (res.cancel) { //点击取消,默认隐藏弹框
  92. } else {
  93. uni.reLaunch({
  94. url: "/pages/login/userlogin?ptype=admin",
  95. })
  96. }
  97. }
  98. });
  99. }
  100. });
  101. },
  102. methods: {
  103. navigateTo(url) {
  104. uni.navigateTo({
  105. url: url
  106. });
  107. },
  108. initNavigation(e) {
  109. this.opacity = e.opacity;
  110. this.top = e.top;
  111. },
  112. opacityChange(e) {
  113. this.opacity = e.opacity;
  114. },
  115. },
  116. onPageScroll(e) {
  117. this.scrollTop = e.scrollTop;
  118. },
  119. onPullDownRefresh() {
  120. setTimeout(() => {
  121. uni.stopPullDownRefresh();
  122. }, 200);
  123. },
  124. onReachBottom: function() {
  125. }
  126. };
  127. </script>
  128. <style>
  129. .tui-set-box {
  130. display: flex;
  131. align-items: center;
  132. justify-content: space-between;
  133. }
  134. .tui-icon-box {
  135. position: relative;
  136. }
  137. .tui-icon-setup {
  138. margin-left: 8rpx;
  139. }
  140. .tui-badge {
  141. position: absolute;
  142. font-size: 24rpx;
  143. height: 32rpx;
  144. min-width: 20rpx;
  145. padding: 0 6rpx;
  146. border-radius: 40rpx;
  147. right: 10rpx;
  148. top: -5rpx;
  149. transform: scale(0.8) translateX(60%);
  150. transform-origin: center center;
  151. display: flex;
  152. align-items: center;
  153. justify-content: center;
  154. z-index: 10;
  155. }
  156. .tui-badge-red {
  157. background: #f74d54;
  158. color: #fff;
  159. }
  160. .tui-badge-white {
  161. background: #fff;
  162. color: #f74d54;
  163. }
  164. .tui-badge-dot {
  165. position: absolute;
  166. height: 12rpx;
  167. width: 12rpx;
  168. border-radius: 50%;
  169. right: -12rpx;
  170. top: 0;
  171. background: #f74d54;
  172. }
  173. .tui-mybg-box {
  174. width: 100%;
  175. height: 200rpx;
  176. position: relative;
  177. background-color: #e41f19;
  178. }
  179. .tui-my-bg {
  180. width: 100%;
  181. height: 464rpx;
  182. display: block;
  183. }
  184. .tui-header-center {
  185. position: absolute;
  186. width: 100%;
  187. height: 100rpx;
  188. left: 0;
  189. top: 18rpx;
  190. padding: 0 30rpx;
  191. box-sizing: border-box;
  192. display: flex;
  193. align-items: center;
  194. }
  195. .tui-avatar {
  196. flex-shrink: 0;
  197. width: 128rpx;
  198. height: 128rpx;
  199. border-radius: 50%;
  200. display: block;
  201. }
  202. .tui-info {
  203. width: 60%;
  204. padding-left: 30rpx;
  205. }
  206. .tui-nickname {
  207. font-size: 30rpx;
  208. font-weight: 500;
  209. color: #fff;
  210. display: flex;
  211. align-items: center;
  212. }
  213. .tui-img-vip {
  214. width: 56rpx;
  215. height: 24rpx;
  216. margin-left: 18rpx;
  217. }
  218. .tui-explain {
  219. width: 80%;
  220. font-size: 24rpx;
  221. font-weight: 400;
  222. color: #fff;
  223. opacity: 0.75;
  224. padding-top: 8rpx;
  225. white-space: nowrap;
  226. overflow: hidden;
  227. text-overflow: ellipsis;
  228. }
  229. .tui-btn-edit {
  230. flex-shrink: 0;
  231. padding-right: 22rpx;
  232. }
  233. .tui-header-btm {
  234. width: 100%;
  235. padding: 0 30rpx;
  236. box-sizing: border-box;
  237. position: absolute;
  238. left: 0;
  239. top: 280rpx;
  240. display: flex;
  241. align-items: center;
  242. justify-content: space-between;
  243. color: #fff;
  244. }
  245. .tui-btm-item {
  246. flex: 1;
  247. display: flex;
  248. flex-direction: column;
  249. align-items: center;
  250. justify-content: center;
  251. }
  252. .tui-btm-num {
  253. font-size: 32rpx;
  254. font-weight: 600;
  255. position: relative;
  256. }
  257. .tui-btm-text {
  258. font-size: 24rpx;
  259. opacity: 0.85;
  260. padding-top: 4rpx;
  261. }
  262. .tui-content-box {
  263. width: 100%;
  264. padding: 0 30rpx;
  265. box-sizing: border-box;
  266. position: relative;
  267. top: 5rpx;
  268. z-index: 10;
  269. }
  270. .tui-box {
  271. width: 100%;
  272. background: #fff;
  273. box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
  274. border-radius: 30rpx;
  275. overflow: hidden;
  276. }
  277. .tui-order-box {
  278. height: 208rpx;
  279. }
  280. .tui-cell-header {
  281. width: 100%;
  282. height: 74rpx;
  283. padding: 0 26rpx;
  284. box-sizing: border-box;
  285. display: flex;
  286. align-items: center;
  287. justify-content: space-between;
  288. }
  289. .tui-cell-title {
  290. font-size: 30rpx;
  291. line-height: 30rpx;
  292. font-weight: 600;
  293. color: #333;
  294. }
  295. .tui-cell-sub {
  296. font-size: 26rpx;
  297. font-weight: 400;
  298. color: #999;
  299. padding-right: 28rpx;
  300. }
  301. .tui-order-list {
  302. width: 100%;
  303. height: 134rpx;
  304. padding: 0 30rpx;
  305. box-sizing: border-box;
  306. display: flex;
  307. align-items: center;
  308. justify-content: space-between;
  309. }
  310. .tui-order-item {
  311. flex: 1;
  312. display: flex;
  313. flex-direction: column;
  314. align-items: center;
  315. }
  316. .tui-order-text,
  317. .tui-tool-text {
  318. font-size: 26rpx;
  319. font-weight: 400;
  320. color: #666;
  321. padding-top: 4rpx;
  322. }
  323. .tui-tool-text {
  324. font-size: 24rpx;
  325. }
  326. .tui-order-icon {
  327. width: 56rpx;
  328. height: 56rpx;
  329. display: block;
  330. }
  331. .tui-assets-box {
  332. height: 178rpx;
  333. margin-top: 20rpx;
  334. }
  335. .tui-assets-list {
  336. height: 84rpx;
  337. }
  338. .tui-assets-num {
  339. font-size: 38rpx;
  340. font-weight: 500;
  341. color: #333;
  342. font-weight: bold;
  343. position: relative;
  344. }
  345. .tui-assets-text {
  346. font-size: 24rpx;
  347. font-weight: 400;
  348. color: #666;
  349. padding-top: 6rpx;
  350. }
  351. .tui-tool-box {
  352. margin-top: 20rpx;
  353. }
  354. .tui-flex-wrap {
  355. flex-wrap: wrap;
  356. height: auto;
  357. padding-bottom: 30rpx;
  358. }
  359. .tui-tool-item {
  360. width: 33%;
  361. display: flex;
  362. align-items: center;
  363. justify-content: center;
  364. flex-direction: column;
  365. padding-top: 30rpx;
  366. }
  367. .tui-tool-icon {
  368. width: 64rpx;
  369. height: 64rpx;
  370. display: block;
  371. }
  372. .tui-badge-icon {
  373. width: 66rpx;
  374. height: 30rpx;
  375. position: absolute;
  376. right: 0;
  377. transform: translateX(88%);
  378. top: -15rpx;
  379. }
  380. /*为你推荐*/
  381. .tui-product-list {
  382. display: flex;
  383. justify-content: space-between;
  384. flex-direction: row;
  385. flex-wrap: wrap;
  386. box-sizing: border-box;
  387. }
  388. .tui-product-container {
  389. width: 100%;
  390. display: flex;
  391. flex-direction: row;
  392. flex-wrap: wrap;
  393. }
  394. .tui-pro-item {
  395. background: #fff;
  396. box-sizing: border-box;
  397. overflow: hidden;
  398. border-radius: 12rpx;
  399. width: 48%;
  400. margin-left: 1%;
  401. margin-right: 1%;
  402. margin-bottom: 2%;
  403. }
  404. .tui-pro-img {
  405. width: 100%;
  406. display: block;
  407. }
  408. .tui-pro-content {
  409. display: flex;
  410. flex-direction: column;
  411. justify-content: space-between;
  412. box-sizing: border-box;
  413. padding: 20rpx;
  414. }
  415. .tui-pro-tit {
  416. color: #2e2e2e;
  417. font-size: 26rpx;
  418. word-break: break-all;
  419. overflow: hidden;
  420. text-overflow: ellipsis;
  421. display: -webkit-box;
  422. -webkit-box-orient: vertical;
  423. -webkit-line-clamp: 2;
  424. }
  425. .tui-pro-price {
  426. padding-top: 18rpx;
  427. }
  428. .tui-sale-price {
  429. font-size: 34rpx;
  430. font-weight: 500;
  431. color: #e41f19;
  432. }
  433. .tui-factory-price {
  434. font-size: 24rpx;
  435. color: #a0a0a0;
  436. text-decoration: line-through;
  437. padding-left: 12rpx;
  438. }
  439. .tui-pro-pay {
  440. padding-top: 10rpx;
  441. font-size: 24rpx;
  442. color: #656565;
  443. }
  444. .tui-item-box {
  445. width: 100%;
  446. display: flex;
  447. align-items: center;
  448. }
  449. .tui-list-cell_name {
  450. padding-left: 20rpx;
  451. display: flex;
  452. align-items: center;
  453. justify-content: center;
  454. }
  455. </style>