index.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011
  1. <template>
  2. <view>
  3. <view class="wrap">
  4. <!-- <view class='title'>收购业务管理</view> -->
  5. <view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
  6. <view class="cu-item" v-for="(item,index) in gridList" :key="index" @click="gridClick(item, index)"
  7. v-if="index<gridCol*2 && item.show">
  8. <view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
  9. <image :src="item.src" class="sign"></image>
  10. </view>
  11. <text>{{item.name}}</text>
  12. </view>
  13. </view>
  14. <!-- 检斤员权限 -->
  15. <!-- isShowAcquisitionInfo -->
  16. <!-- 获取当前用户负责的仓库,如果无仓库隐藏收购信息 -->
  17. <!-- &&sgId -->
  18. <!-- <view class="content2" v-if="isShowAcquisitionInfo">
  19. <view>收购信息</view>
  20. <view @click="navTo('/pages/erpbusiness/acquisitionInformation')">
  21. <u-button size="mini">查看</u-button>
  22. </view>
  23. </view> -->
  24. </view>
  25. <!-- <view class="wrap">
  26. <view class='title'>出库管理</view>
  27. <view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
  28. <view class="cu-item" v-for="(item,index) in gridList1" :key="index" @click="gridClick(item, index)"
  29. v-if="index<gridCol*2">
  30. <view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
  31. <image :src="item.src" class="sign"></image>
  32. </view>
  33. <text>{{item.name}}</text>
  34. </view>
  35. </view>
  36. </view> -->
  37. <u-modal v-model="isShowAlert" :title-style="{fontSize: '18px',fontWeight:'500'}"
  38. :content-style="{fontSize: '14px',fontWeight:'400'}" confirm-color='#22C572' confirm-text='确定' title='温馨提示'
  39. showCancelButton='false' :content="content" @confirm="goOpenService" @cancel="cancelClick"></u-modal>
  40. <u-modal v-model="isShowAlert1" :title-style="{fontSize: '18px',fontWeight:'500'}"
  41. :content-style="{fontSize: '14px',fontWeight:'400'}" confirm-color='#22C572' confirm-text='确定' title='提示'
  42. showCancelButton='false' :content="content1" @confirm="alertBtn1" @cancel="cancelClick1"></u-modal>
  43. </view>
  44. </template>
  45. <script>
  46. import dragButton from "@/components/drag-button/drag-button.vue";
  47. import {
  48. mapState
  49. } from 'vuex';
  50. let startY = 0,
  51. moveY = 0,
  52. pageAtTop = true;
  53. export default {
  54. components: {
  55. dragButton
  56. },
  57. data() {
  58. return {
  59. status: '',
  60. isShowAlert1: false,
  61. content1: '当前登入信息验证失败,是否重新登录?',
  62. isShowAlert: false,
  63. content: '您确定要退出吗?',
  64. a: false,
  65. inputShow: false,
  66. modalName: '',
  67. mycarStyle: '',
  68. feild: undefined,
  69. inputContent: '',
  70. coverTransform: 'translateY(0px)',
  71. coverTransition: '0s',
  72. moving: false,
  73. footprintList: [],
  74. isVip: false,
  75. userInfoTmp: [],
  76. inputStatus: 'none',
  77. carInfo: [],
  78. gridCol: 4,
  79. gridBorder: false,
  80. headUrl: "../../static/img/myimg/YongHu@3x.png",
  81. userphone: "",
  82. username: "请更改昵称",
  83. gridList: [{
  84. num: 0,
  85. name: '邀请用户',
  86. // icon: 'cuIcon-apps',
  87. src: '../../static/img/erp/yaoqingyonghu@3x.png',
  88. tips: 0,
  89. url: '/pages/erpbusiness/QRCode/QRCode',
  90. show: true
  91. },
  92. {
  93. num: 1,
  94. // name: '收购质检',
  95. name: '入库质检',
  96. // icon: 'cuIcon-calendar',
  97. src: '../../static/img/erp/shougouzhijian@3x.png',
  98. tips: 0,
  99. url: '/pages/erpbusiness/quality_testing?managementType=1',
  100. show: true
  101. },
  102. {
  103. num: 2,
  104. name: '入库检斤',
  105. // name: '收购检斤',
  106. // icon: 'cuIcon-copy',
  107. src: '../../static/img/erp/shougoujianjin@3x.png',
  108. tips: 0,
  109. url: '/pages/erpbusiness/acquisitionInspection/acquisitionInspection',
  110. show: true
  111. }
  112. ,
  113. {
  114. num: 3,
  115. name: '收购信息',
  116. // icon: 'cuIcon-copy',
  117. src: '../../static/img/erp/receiving@3x.png',
  118. tips: 0,
  119. url: '/pages/erpbusiness/acquisitionInformation',
  120. show: true
  121. }
  122. // {
  123. // num: 5,
  124. // name: '设置',
  125. // // icon: 'cuIcon-edit',
  126. // src:'../../static/img/sign/shezhi@2x.png',
  127. // tips: 0,
  128. // url: `/pages/user/setUp`,
  129. // show: true
  130. // }
  131. ],
  132. gridList1: [
  133. // {
  134. // num: 0,
  135. // name: '出库检斤',
  136. // // icon: 'cuIcon-apps',
  137. // src:'../../static/img/erp/chukujianjin@3x.png',
  138. // tips: 0,
  139. // url: '/pages/erpbusiness/acquisitionInspection/warehouseWeighing',
  140. // show: false
  141. // },
  142. {
  143. num: 1,
  144. name: '出库质检',
  145. // icon: 'cuIcon-calendar',
  146. src: '../../static/img/erp/chukuzhijian@3x.png',
  147. tips: 0,
  148. url: '/pages/erpbusiness/quality_testing?managementType=3',
  149. show: true
  150. }
  151. // {
  152. // num: 5,
  153. // name: '设置',
  154. // // icon: 'cuIcon-edit',
  155. // src:'../../static/img/sign/shezhi@2x.png',
  156. // tips: 0,
  157. // url: `/pages/user/setUp`,
  158. // show: true
  159. // }
  160. ],
  161. showTran: true,
  162. companyId: 1,
  163. current: 4,
  164. sgId: ''
  165. }
  166. },
  167. onLoad() {
  168. },
  169. // #ifndef MP
  170. onNavigationBarButtonTap(e) {
  171. const index = e.index;
  172. if (index === 0) {
  173. this.navTo('/pages/set/set');
  174. } else if (index === 1) {
  175. // #ifdef APP-PLUS
  176. const pages = getCurrentPages();
  177. const page = pages[pages.length - 1];
  178. const currentWebview = page.$getAppWebview();
  179. currentWebview.hideTitleNViewButtonRedDot({
  180. index
  181. });
  182. // #endif
  183. uni.navigateTo({
  184. url: '/pages/notice/notice'
  185. })
  186. }
  187. },
  188. // #endif
  189. computed: {
  190. ...mapState(['hasLogin', 'userInfo']),
  191. // 手机号中间4位加*
  192. starUserphone() {
  193. let reg = /^(\d{3})\d{4}(\d{4})$/;
  194. if (this.userphone) {
  195. return this.userphone.replace(reg, "$1****$2");
  196. }
  197. }
  198. },
  199. onShow() {
  200. this.isShow();
  201. uni.hideKeyboard()
  202. uni.showTabBar()
  203. this.loadData()
  204. this.isShowAcquisitionInfo = this.utils.getRoles('acquisitionInfor.view')
  205. this.getStatus()
  206. this.$api.doRequest('get', '/commonUser/api/checkSession').then(res => {
  207. console.log("checkSession", res)
  208. if (res.data.data == "INVALID") {
  209. this.isShowAlert1 = true;
  210. // uni.showModal({
  211. // title: '提示',
  212. // content: '当前登入信息验证失败,是否重新登录?',
  213. // showCancel: true,
  214. // confirmText: '登录',
  215. // success: (e) => {
  216. // if (e.confirm) {
  217. // uni.navigateTo({
  218. // url: '/pages/public/login'
  219. // })
  220. // }
  221. // },
  222. // fail: () => {},
  223. // complete: () => {}
  224. // })
  225. }
  226. })
  227. console.log("hasLogin", this.hasLogin)
  228. if (this.userInfo) {
  229. if (!this.userInfo.avatarUrl) {
  230. this.headUrl = "../../static/img/myimg/YongHu@3x.png"
  231. } else {
  232. this.headUrl = this.userInfo.avatarUrl
  233. }
  234. this.username = this.userInfo.userName
  235. this.userphone = this.userInfo.phone
  236. var that = this
  237. this.$api.doRequest('get', '/newNoticeTask/query/noticeTasks').then(res => {
  238. console.log("noticeNumber", res)
  239. if (res.data.data) {
  240. let name = 'myTip';
  241. let value = res.data.data.total;
  242. that.$store.commit('$uStore', {
  243. name,
  244. value
  245. });
  246. if (value != 0 && value) {
  247. uni.setTabBarBadge({
  248. index: 4,
  249. text: value + ""
  250. })
  251. }
  252. name = 'taskTip';
  253. value = res.data.data.total;
  254. that.$store.commit('$uStore', {
  255. name,
  256. value
  257. });
  258. // name = 'contractTip';
  259. // value = res.data.data.contractTip;
  260. // that.$store.commit('$uStore', {
  261. // name,
  262. // value
  263. // });
  264. }
  265. })
  266. } else {
  267. this.headUrl = "../../static/img/myimg/YongHu@3x.png"
  268. this.username = "立即登录"
  269. }
  270. console.log("this.userInfo", this.userInfo)
  271. },
  272. methods: {
  273. getStatus() {
  274. let _obj = {
  275. commonId: uni.getStorageSync("userInfo").id,
  276. }
  277. this.$api.doRequest('get', '/acquisitionInfo/getInfo', _obj).then(res => {
  278. if (res.data.code == 200) {
  279. if (res.data.data) {
  280. this.status = res.data.data.status
  281. this.sgId = res.data.data.commonId
  282. } else {
  283. this.status = '已隐藏'
  284. }
  285. }
  286. })
  287. },
  288. alertBtn1() {
  289. uni.navigateTo({
  290. url: '/pages/public/login'
  291. })
  292. },
  293. cancelClick() {
  294. this.isShowAlert = false
  295. },
  296. cancelClick1() {
  297. this.isShowAlert = false
  298. },
  299. goOpenService() {
  300. uni.hideTabBarRedDot({
  301. index: 3
  302. })
  303. uni.clearStorageSync();
  304. this.$store.commit('logout')
  305. this.$api.logout()
  306. uni.navigateTo({
  307. url: `/pages/public/login`
  308. })
  309. },
  310. getRoles: function(role) {
  311. let _roles = uni.getStorageSync('rolesList')
  312. for (let i = 0; i < _roles.length; i++) {
  313. if (_roles[i] == role) {
  314. return true
  315. }
  316. }
  317. return false
  318. },
  319. isShow() {
  320. for (let i = 0; i < this.gridList.length; i++) {
  321. if (i == 1) {
  322. this.gridList[i].show = this.getRoles('acquisitionQuality.view')
  323. } else if (i == 2) {
  324. this.gridList[i].show = this.getRoles('acquisitionWeight.view')
  325. }
  326. else if (i == 3) {
  327. this.gridList[i].show = this.utils.getRoles('acquisitionInfor.view')
  328. }
  329. }
  330. for (let k = 0; k < this.gridList1.length; k++) {
  331. if (k == 0) {
  332. this.gridList1[k].show = this.getRoles('acquisitionWeightOut.view')
  333. } else if (k == 1) {
  334. this.gridList1[k].show = this.getRoles('acquisitionQualityOut.view')
  335. }
  336. }
  337. },
  338. fankui() {
  339. uni.navigateTo({
  340. url: `/pages/user/fankui`
  341. })
  342. },
  343. zhibo() {
  344. uni.navigateTo({
  345. url: `/pageB/video/broadcast`
  346. })
  347. },
  348. look() {
  349. uni.navigateTo({
  350. url: `/pageB/video/look`
  351. })
  352. },
  353. contactUs() {
  354. const that = this
  355. uni.makePhoneCall({
  356. // 手机号
  357. phoneNumber: '18241771147',
  358. // 成功回调
  359. success: (res) => {},
  360. // 失败回调
  361. fail: (res) => {}
  362. });
  363. },
  364. loadData() {
  365. // const that = this
  366. // if(uni.getStorageSync("PageCur")){
  367. // that.PageCur = uni.getStorageSync("PageCur");
  368. // }
  369. // that.userInfoTmp = uni.getStorageSync("userInfo")
  370. // uni.showLoading({
  371. // title: '正在加载',
  372. // mask:true
  373. // })
  374. // that.$api.request('integral', 'getIndexData', failres => {
  375. // that.$api.msg(failres.errmsg)
  376. // uni.hideLoading()
  377. // }).then(res => {
  378. // let data = res.data
  379. // uni.setStorageSync("message", data.message);
  380. // uni.setStorageSync("task", data.task);
  381. // uni.setStorageSync("contract", data.contract);
  382. // uni.setStorageSync('showTran', data.showTran);
  383. // that.showTran = data.showTran
  384. // that.gridList[4].tips = data.task
  385. // that.gridList[2].tips = data.contract
  386. // that.companyId = data.companyId
  387. // uni.hideLoading()
  388. // })
  389. },
  390. gridClick(item, index) {
  391. var that = this
  392. if (item.name == "退出登录") {
  393. this.logout()
  394. return;
  395. } else if (item.name == "联系我们") {
  396. //#ifdef MP
  397. this.inputShow = true
  398. this.inputStatus = 'inline'
  399. this.feild = "nickname"
  400. this.inputContent = ''
  401. //#endif
  402. //#ifdef APP-PLUS
  403. this.contactUs()
  404. //#endif
  405. return;
  406. } else if (item.name == '我的车辆') {
  407. const that = this
  408. uni.showLoading({
  409. title: '正在加载',
  410. mask: true
  411. })
  412. that.$api.request('tran', 'getMyCarList', failres => {
  413. that.$api.msg(failres.errmsg)
  414. uni.hideLoading()
  415. }).then(res => {
  416. that.carInfo = res.data
  417. if (that.carInfo.length == 0) {
  418. that.$api.msg('暂无车辆信息')
  419. } else {
  420. var height = that.carInfo.length * 100
  421. var width = 500
  422. that.mycarStyle = "height:" + height + "rpx;width:" + width + "rpx"
  423. that.modalName = 'MycarModal'
  424. }
  425. uni.hideLoading()
  426. })
  427. return;
  428. }
  429. if (!this.hasLogin) {
  430. uni.showModal({
  431. title: '提示',
  432. content: '您尚未登录,是否立即登录?',
  433. showCancel: true,
  434. confirmText: '登录',
  435. success: (e) => {
  436. if (e.confirm) {
  437. uni.navigateTo({
  438. url: '/pages/public/login'
  439. })
  440. }
  441. },
  442. fail: () => {},
  443. complete: () => {}
  444. })
  445. } else {
  446. if (item.url) {
  447. uni.navigateTo({
  448. url: item.url
  449. })
  450. }
  451. }
  452. },
  453. setting() {
  454. if (!this.hasLogin) {
  455. uni.showModal({
  456. title: '提示',
  457. content: '您尚未登录,是否立即登录?',
  458. showCancel: true,
  459. confirmText: '登录',
  460. success: (e) => {
  461. if (e.confirm) {
  462. uni.navigateTo({
  463. url: '/pages/public/login'
  464. })
  465. }
  466. },
  467. fail: () => {},
  468. complete: () => {}
  469. })
  470. } else {
  471. uni.navigateTo({
  472. url: '/pages/user/setUp'
  473. })
  474. }
  475. },
  476. toLogin() {
  477. console.log("userInfo", this.userInfo)
  478. if (!this.hasLogin || !this.userInfo || this.username == "立即登录") {
  479. uni.navigateTo({
  480. url: '/pages/public/login_account_number'
  481. })
  482. } else {
  483. uni.navigateTo({
  484. url: '/pages/user/setUp'
  485. })
  486. }
  487. // else if(!this.userInfo.nickname){
  488. // this.inputShow = true
  489. // this.inputStatus = 'inline'
  490. // this.feild = "nickname"
  491. // this.inputContent = ''
  492. // }
  493. },
  494. confirm() {
  495. const that = this
  496. if (!that.inputContent) {
  497. that.$api.msg('输入不能为空')
  498. return
  499. }
  500. let obj = {}
  501. obj[that.feild] = that.inputContent
  502. that.$api.request('user', 'syncUserInfo', obj).then(res => {
  503. that.userInfo.nickname = that.inputContent
  504. that.inputContent = ''
  505. that.$store.commit('login', that.userInfo)
  506. })
  507. },
  508. cancel() {
  509. this.inputShow = false
  510. this.inputStatus = 'none'
  511. this.genderShow = false
  512. },
  513. myAccount() {
  514. uni.navigateTo({
  515. url: `/pageA/pages/contract`
  516. })
  517. },
  518. logout() {
  519. // const that = this
  520. this.isShowAlert = true
  521. // uni.showModal({
  522. // title: '询问',
  523. // content: '您确定要退出吗?',
  524. // cancelText: '取消',
  525. // confirmText: '确定',
  526. // success: (e) => {
  527. // if (e.confirm) {
  528. // uni.hideTabBarRedDot({
  529. // index:3
  530. // })
  531. // uni.clearStorageSync();
  532. // that.$store.commit('logout')
  533. // that.$api.logout()
  534. // uni.navigateTo({
  535. // url: `/pages/public/login`
  536. // })
  537. // }
  538. // }
  539. // })
  540. },
  541. /**
  542. * 统一跳转接口,拦截未登录路由
  543. * navigator标签现在默认没有转场动画,所以用view
  544. */
  545. navTo(url) {
  546. if (!this.hasLogin) {
  547. url = '/pages/public/login';
  548. }
  549. uni.navigateTo({
  550. url
  551. })
  552. },
  553. mycarClick(carNo) {
  554. this.modalName = null
  555. uni.navigateTo({
  556. url: `/pageB/car/mycar_detail?carNo=${carNo}`
  557. })
  558. },
  559. qrClick(userInfo) {
  560. this.modalName = null
  561. uni.navigateTo({
  562. url: `/pages/user/qr`
  563. })
  564. },
  565. scanCode() {
  566. uni.scanCode({
  567. success: function(res) {
  568. uni.navigateTo({
  569. url: res.result
  570. })
  571. }
  572. })
  573. },
  574. hideModal(e) {
  575. this.modalName = null
  576. },
  577. }
  578. }
  579. </script>
  580. <style lang='scss' scoped>
  581. page {
  582. background: #F5F6FA;
  583. }
  584. .container {
  585. padding-top: 85px;
  586. padding-top: 35px;
  587. background-color: #F5F6FA;
  588. position: relative;
  589. width: 100vw;
  590. height: 100vh;
  591. overflow: hidden;
  592. background: url('~@/static/img/login/bg_slices/bg@3x.png');
  593. background-size: 100% 100%;
  594. margin: 0 auto;
  595. }
  596. .cu-tag.badge {
  597. right: 26rpx;
  598. }
  599. .path {
  600. color: #007aff;
  601. display: inline-block;
  602. text-align: center;
  603. }
  604. .icon {
  605. margin-right: 10rpx;
  606. }
  607. .portrait-box {
  608. margin-top: 20rpx;
  609. }
  610. .qr-wrap {
  611. margin-top: 20upx;
  612. color: #fff;
  613. font-size: 32rpx;
  614. }
  615. .cu-list {
  616. /* height: 483rpx;
  617. overflow-y: scroll; */
  618. background: transparent;
  619. }
  620. .cu-list.grid.no-border {
  621. padding: 0;
  622. }
  623. .badge_user {
  624. color: #fff;
  625. background-color: #dc3545;
  626. display: inline-block;
  627. padding: .25em .4em;
  628. font-size: 75%;
  629. font-weight: 700;
  630. line-height: 1;
  631. text-align: center;
  632. white-space: nowrap;
  633. vertical-align: top;
  634. border-radius: 50%;
  635. transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  636. }
  637. @keyframes move_wave {
  638. 0% {
  639. transform: translateX(0) translateZ(0) scaleY(1)
  640. }
  641. 50% {
  642. transform: translateX(-25%) translateZ(0) scaleY(0.55)
  643. }
  644. 100% {
  645. transform: translateX(-50%) translateZ(0) scaleY(1)
  646. }
  647. }
  648. .bg {
  649. position: relative;
  650. height: 300rpx;
  651. /* background: linear-gradient(to bottom, #56ccf2, #2f80ed); */
  652. /*background: linear-gradient(to bottom, #0be9fe, #4bb0fe); */
  653. background: linear-gradient(to bottom, #d5f8ff, #56ccf2);
  654. }
  655. .bg_ware {
  656. position: absolute;
  657. left: 0;
  658. bottom: -2rpx;
  659. width: 100%;
  660. mix-blend-mode: screen;
  661. height: 224rpx;
  662. }
  663. %flex-center {
  664. display: flex;
  665. flex-direction: column;
  666. justify-content: center;
  667. align-items: center;
  668. }
  669. %section {
  670. display: flex;
  671. justify-content: space-around;
  672. align-content: center;
  673. background: #fff;
  674. border-radius: 10upx;
  675. }
  676. .grid-item-box {
  677. flex: 1;
  678. /* position: relative;
  679. */
  680. /* #ifndef APP-NVUE */
  681. display: flex;
  682. /* #endif */
  683. flex-direction: column;
  684. align-items: center;
  685. justify-content: center;
  686. padding: 15px 0;
  687. }
  688. .image {
  689. width: 80rpx;
  690. height: 80rpx;
  691. }
  692. .text {
  693. font-size: 26rpx;
  694. margin-top: 10rpx;
  695. }
  696. .user-section {
  697. height: 520upx;
  698. padding: 100upx 30upx 0;
  699. position: relative;
  700. .bg {
  701. position: absolute;
  702. left: 0;
  703. top: 0;
  704. width: 100%;
  705. height: 100%;
  706. filter: blur(1px);
  707. box-shadow: 0px 1px 8px #ccc;
  708. /* background:linear-gradient(#0eb0c9,#126bae); */
  709. /* opacity: .7; */
  710. }
  711. }
  712. .user-info-box {
  713. height: 180upx;
  714. /* display:flex; */
  715. /* align-items:center; */
  716. text-align: center;
  717. position: relative;
  718. z-index: 1;
  719. .portrait {
  720. width: 130upx;
  721. height: 130upx;
  722. border: 5upx solid #fff;
  723. border-radius: 50%;
  724. }
  725. .username {
  726. font-size: $font-lg + 3upx;
  727. color: #fff;
  728. margin-top: 20upx;
  729. }
  730. }
  731. .vip-card-box {
  732. display: flex;
  733. flex-direction: column;
  734. color: #f7d680;
  735. height: 240upx;
  736. background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
  737. border-radius: 16upx 16upx 0 0;
  738. overflow: hidden;
  739. position: relative;
  740. padding: 20upx 24upx;
  741. .card-bg {
  742. position: absolute;
  743. top: 20upx;
  744. right: 0;
  745. width: 380upx;
  746. height: 260upx;
  747. }
  748. .b-btn {
  749. position: absolute;
  750. right: 20upx;
  751. top: 16upx;
  752. width: 132upx;
  753. height: 40upx;
  754. text-align: center;
  755. line-height: 40upx;
  756. font-size: 22upx;
  757. color: #36343c;
  758. border-radius: 20px;
  759. background: linear-gradient(left, #f9e6af, #ffd465);
  760. z-index: 1;
  761. }
  762. .tit {
  763. font-size: $font-base+2upx;
  764. color: #f7d680;
  765. margin-bottom: 28upx;
  766. .yticon {
  767. color: #f6e5a3;
  768. margin-right: 16upx;
  769. }
  770. }
  771. .e-b {
  772. font-size: $font-sm;
  773. color: #d8cba9;
  774. margin-top: 10upx;
  775. }
  776. }
  777. .cover-container {
  778. padding: 1px 10px;
  779. padding-bottom: 200upx;
  780. /* background-color: #F5F6FA; */
  781. /* border-radius: 20px; */
  782. margin-top: 60upx;
  783. .arc {
  784. position: absolute;
  785. left: 0;
  786. top: -34upx;
  787. width: 100%;
  788. height: 36upx;
  789. }
  790. }
  791. .tj-sction {
  792. @extend %section;
  793. .tj-item {
  794. @extend %flex-center;
  795. flex-direction: column;
  796. height: 140upx;
  797. font-size: $font-sm;
  798. color: #75787d;
  799. }
  800. .num {
  801. font-size: $font-lg;
  802. color: $font-color-dark;
  803. margin-bottom: 8upx;
  804. }
  805. }
  806. .order-section {
  807. @extend %section;
  808. padding: 28upx 0;
  809. margin-top: 20upx;
  810. .order-item {
  811. @extend %flex-center;
  812. width: 120upx;
  813. height: 120upx;
  814. border-radius: 10upx;
  815. font-size: $font-sm;
  816. color: $font-color-dark;
  817. }
  818. .yticon {
  819. font-size: 48upx;
  820. margin-bottom: 18upx;
  821. color: #fa436a;
  822. }
  823. .icon-shouhoutuikuan {
  824. font-size: 44upx;
  825. }
  826. }
  827. .history-section {
  828. padding: 30upx 0 0;
  829. margin-top: 20upx;
  830. background: #fff;
  831. border-radius: 10upx;
  832. .sec-header {
  833. display: flex;
  834. align-items: center;
  835. font-size: $font-base;
  836. color: $font-color-dark;
  837. line-height: 40upx;
  838. margin-left: 30upx;
  839. .yticon {
  840. font-size: 44upx;
  841. color: #5eba8f;
  842. margin-right: 16upx;
  843. line-height: 40upx;
  844. }
  845. }
  846. .h-list {
  847. white-space: nowrap;
  848. padding: 30upx 30upx 0;
  849. image {
  850. display: inline-block;
  851. width: 160upx;
  852. height: 160upx;
  853. margin-right: 20upx;
  854. border-radius: 10upx;
  855. }
  856. }
  857. }
  858. .grid {
  859. display: flex;
  860. align-items: center;
  861. flex-wrap: wrap;
  862. /* border-top: 2upx solid rgba(172,172,172,.2); */
  863. .grid-item-3 {
  864. box-sizing: border-box;
  865. width: calc(100% / 3);
  866. border-bottom: 2upx solid rgba(172, 172, 172, .2);
  867. border-right: 2upx solid rgba(172, 172, 172, .2);
  868. text-align: center;
  869. padding: 40upx 0;
  870. position: relative;
  871. /* view{
  872. font-size: $font-sm;
  873. margin-top: 16upx;
  874. color: $font-color-dark;
  875. } */
  876. .grid_icon {
  877. font-size: 48upx;
  878. margin-bottom: 18upx;
  879. color: #fa436a;
  880. }
  881. .tip_text {
  882. display: block;
  883. padding: 4upx 8upx;
  884. text-align: center;
  885. border-radius: 36upx;
  886. font-size: 24upx;
  887. background-color: #fa436a;
  888. color: rgba(255, 255, 255, 1);
  889. position: absolute;
  890. right: 6upx;
  891. top: 6upx;
  892. }
  893. }
  894. .grid-item-3:nth-child(3n + 3),
  895. .grid-item-4:nth-child(4n + 4) {
  896. border-right: none;
  897. }
  898. }
  899. .headPortrait {
  900. width: 75px;
  901. height: 75px;
  902. border-radius: 40px;
  903. border: 2px solid #ffffff;
  904. }
  905. .personal {
  906. margin-top: 10px;
  907. margin-left: 20px;
  908. }
  909. .information {
  910. font-size: 15px;
  911. font-weight: 600;
  912. height: 36px;
  913. }
  914. .indexlow {
  915. /* margin-top: 30px; */
  916. border-radius: 10px;
  917. }
  918. .cu-list>.cu-item:after {
  919. border: none;
  920. }
  921. .sign {
  922. width: 40px;
  923. height: 40px;
  924. top: 4px;
  925. margin-right: 6px;
  926. }
  927. .indexUp {
  928. padding: 0 20px;
  929. align-items: center;
  930. }
  931. .wrap {
  932. background: #fff;
  933. margin: 10px;
  934. border-radius: 10px;
  935. padding: 10px;
  936. .title {
  937. font-size: 16px;
  938. }
  939. }
  940. .content2 {
  941. display: flex;
  942. justify-content: space-between;
  943. }
  944. </style>