index.vue 22 KB

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