morePage.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738
  1. <template>
  2. <view>
  3. <view class="morePages">
  4. <!-- 头部栏 -->
  5. <view class="header-box">
  6. <UniStatusBar></UniStatusBar>
  7. <view class="title flex align_center" :style="{height:(navHeight+'px')}">
  8. <u-image src="/static/logo-h.png" width="349" height='40'></u-image>
  9. </view>
  10. </view>
  11. <!-- body -->
  12. <view class="morePages-body">
  13. <view class="body-box bg-blue">
  14. <!-- 名片 -->
  15. <view class="userCard flex align_center justify_between">
  16. <view class="userCard-info flex align_center">
  17. <view>
  18. <u-image shape='circle' v-if="!hasLogin" src="/static/def_personal_avatar.png" width="90" height="90"></u-image>
  19. <u-image shape='circle' v-else :src="avatarUrl||'/static/def_personal_avatar.png'" width="90" height="90"></u-image>
  20. </view>
  21. <view class="user-info" @click="toUser">
  22. <view v-if="!hasLogin" style="font-size: 40rpx;">
  23. 请点击登录
  24. </view>
  25. <view v-else>
  26. <view class="user-name">{{userInfo.userNameCN || userInfo.mobile}}</view>
  27. <view v-if="hasLogin&&userInfo&&userInfo.sysUserFlag == '0'">
  28. <u-tag text="个人用户" mode="dark" type="warning" shape="circle" size="mini" />
  29. </view>
  30. <view v-else>{{userInfo.orgName}}</view>
  31. </view>
  32. </view>
  33. </view>
  34. <view @click="toUser">
  35. <text v-if="hasLogin&&userInfo&&userInfo.sysUserFlag == '0'" class="user-rz">
  36. {{storeApply&&storeApply.auditStatus=='WAIT'?'认证门店审核中':'认证成为门店'}}
  37. </text>
  38. <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
  39. </view>
  40. </view>
  41. </view>
  42. <!-- 余额数据 -->
  43. <view class="list-box">
  44. <view class="list-body" :style="{paddingTop:item.text?0:'10px'}">
  45. <uni-grid :column="4" :highlight="true" :show-border="false" :square="false" @change="e=>openDataList(e)">
  46. <uni-grid-item v-if="hasBalaceAuth">
  47. <view class="grid-item-box" :index="0">
  48. <text class="value">{{storeAccount.rechargeBalance}}</text>
  49. <text class="text">充值余额</text>
  50. </view>
  51. </uni-grid-item>
  52. <uni-grid-item v-if="hasBalaceAuth">
  53. <view class="grid-item-box" :index="1">
  54. <text class="value">{{storeAccount.giveBalance}}</text>
  55. <text class="text">抵扣余额</text>
  56. </view>
  57. </uni-grid-item>
  58. <uni-grid-item>
  59. <view class="grid-item-box" :index="2" v-if="$hasPermissions('M_couponList_mini')">
  60. <text class="value">{{hasShelf?couponCount:0}}</text>
  61. <text class="text">优惠券</text>
  62. </view>
  63. </uni-grid-item>
  64. <uni-grid-item>
  65. <view class="grid-item-box" :index="3" v-if="hasLogin&&hasRedPacket&&hasShelf">
  66. <text class="value">{{redPackCount}}</text>
  67. <text class="text">红包</text>
  68. </view>
  69. </uni-grid-item>
  70. </uni-grid>
  71. </view>
  72. </view>
  73. <!-- 网格图标 -->
  74. <view class="list-box" v-for="item in itemList" :key="item.id">
  75. <view class="list-title" v-if="item.text">
  76. <text>{{item.text}}</text>
  77. </view>
  78. <view class="list-body" :style="{paddingTop:item.text?0:'10px'}">
  79. <uni-grid :column="item.column" :highlight="true" :show-border="false" :square="false" @change="e=>openPage(e,item.child)">
  80. <uni-grid-item v-for="(sub, idx) in item.child" :index="idx" :key="idx">
  81. <view class="grid-item-box">
  82. <u-icon class="icons" :color="sub.color" :size="item.size" :name="sub.icon" custom-prefix="custom-icon"></u-icon>
  83. <text class="text">{{sub.text}}</text>
  84. </view>
  85. </uni-grid-item>
  86. </uni-grid>
  87. </view>
  88. </view>
  89. <view class="list-box" v-if="hasLogin">
  90. <view class="list-title flex justify_center phone" @click="quitOut">
  91. <text>退出登录</text>
  92. </view>
  93. </view>
  94. </view>
  95. <!-- 去认证弹框 -->
  96. <u-popup v-model="showPopup" mode="center" :border-radius="20" closeable>
  97. <view style="background-color: #fff;padding: 1rem;">
  98. <u-image width="533" height="415" src="/static/authimg.jpg"></u-image>
  99. <view style="padding-top:1rem;" class="flex justify_center">
  100. <u-button @click="toAuthStore()" shape="circle" :custom-style="{background:'#066cff',color:'#fff',width:'350rpx'}">开始认证</u-button>
  101. </view>
  102. </view>
  103. </u-popup>
  104. </view>
  105. <!-- tab -->
  106. <u-tabbar :list="vuex_tabBarList" :mid-button-size="80" :before-switch="beforeSwitch" :midButton="vuex_tabBarList.length==5"></u-tabbar>
  107. </view>
  108. </template>
  109. <script>
  110. import {
  111. mapState,
  112. mapMutations
  113. } from 'vuex'
  114. import UniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue'
  115. import { queryQplsConfig,getProductfindByScanCode } from '@/api/shelf.js'
  116. import { findUserReward } from '@/api/rewardRule.js'
  117. import { ticketQueryCount } from '@/api/user.js'
  118. import { clickTab, toLogin } from "@/utils/index.js"
  119. export default {
  120. components: {
  121. UniStatusBar // 状态栏组件
  122. },
  123. data() {
  124. return {
  125. dealerPhone: null, // 经销商电话
  126. showPopup: false,
  127. showPriceSet: false,
  128. shelfSn: null,
  129. avatarUrl:'', // 用户图像
  130. navHeight: 44,
  131. couponCount: 0,
  132. redPackCount: 0,
  133. dataList:[]
  134. }
  135. },
  136. computed: {
  137. ...mapState(['hasLogin','vuex_vinScanNums','vuex_scanMaxNums','vuex_tabBarList']),
  138. hasShelf(){
  139. return !!this.$store.state.vuex_storeShelf
  140. },
  141. userInfo(){
  142. return this.$store.state.vuex_userInfo
  143. },
  144. storeApply(){
  145. return this.$store.state.vuex_storeAuthInfo
  146. },
  147. hasRedPacket(){
  148. const rule = this.$store.state.vuex_rewardRule
  149. return rule&&rule.ruleStatus == 'release'
  150. },
  151. hasShopSeting(){
  152. return this.$store.state.vuex_hasShopiing
  153. },
  154. hasBalaceAuth(){
  155. return this.$store.state.vuex_showBalanceAuth
  156. },
  157. storeAccount(){
  158. return this.$store.state.vuex_storeAccount
  159. },
  160. itemList(){
  161. const list = [
  162. {
  163. text: '订单管理',
  164. icon: 'order',
  165. auth: true,
  166. column: 4,
  167. size: 60,
  168. child:[
  169. {
  170. text: '货架订单',
  171. icon: 'huojiaguanli',
  172. auth: this.$hasPermissions('M_shelfOrder_mini'),
  173. path: '/pagesA/digitalShelf/orderList',
  174. color: '#056cd9',
  175. isShelf: true
  176. },
  177. {
  178. text: '急送订单',
  179. icon: 'yijianshansong',
  180. auth: this.$hasPermissions('M_tempShelfOrder_mini'),
  181. path: '/pagesA/digitalShelf/tempOrderList/tempOrderList',
  182. color: '#dd6859',
  183. isShelf: true
  184. },
  185. {
  186. text: '采购订单',
  187. icon: 'purchaseorder',
  188. auth: this.$hasPermissions('M_procureOrder_mini'),
  189. path: '/pagesB/procureOrder/orderList',
  190. color: '#ffaa00'
  191. }
  192. ],
  193. },
  194. {
  195. text: '货架管理',
  196. icon: 'list-dot',
  197. auth: true,
  198. column: 4,
  199. size: 60,
  200. child:[
  201. {
  202. text: '库存查询',
  203. icon: 'stockquery',
  204. auth: this.$hasPermissions('M_stockQueryList_mini'),
  205. path: '/pagesB/stockQuery/stockQuery',
  206. color: '#ff87a3',
  207. isShelf: true
  208. },
  209. {
  210. text: '补货记录',
  211. icon: 'replenishment',
  212. auth: this.$hasPermissions('M_stockPut_mini'),
  213. path: '/pagesA/digitalShelf/stockPut',
  214. color: '#55aaff',
  215. isShelf: true
  216. },
  217. {
  218. text: '结算记录',
  219. icon: 'settlement',
  220. auth: this.$hasPermissions('M_settlementRecord_mini'),
  221. path: '/pagesA/digitalShelf/settlementRecord/settlementRecord',
  222. color: '#55aa7f',
  223. isShelf: true
  224. },
  225. {
  226. text: '付款结算',
  227. icon: 'payrecord',
  228. auth: this.$hasPermissions('M_settlementManage_mini'),
  229. path: '/pagesA/digitalShelf/settlementManage/settlementManage',
  230. color: '#ff9777',
  231. isShelf: true
  232. },
  233. {
  234. text: '编码取货',
  235. icon: 'ziyuanxhdpi',
  236. auth: this.userInfo && this.userInfo.sysUserFlag == '1',
  237. path: '#quhuo1',
  238. color: '#2196f3',
  239. isShelf: true
  240. },
  241. {
  242. text: '扫码取货',
  243. icon: 'saoma1',
  244. auth: this.userInfo && this.userInfo.sysUserFlag == '1',
  245. path: '#quhuo0',
  246. color: '#ffaa00',
  247. isShelf: true
  248. },
  249. {
  250. text: 'VIN查询历史',
  251. icon: 'lishijilu',
  252. auth: this.hasLogin,
  253. path: '/pagesA/vinRecord/vinRecord',
  254. color: '#799ff9',
  255. isShelf: true
  256. },
  257. {
  258. text: '联系汽配商',
  259. icon: 'lianxidianhua',
  260. auth: this.hasLogin&&this.dealerPhone,
  261. path: '#call',
  262. color: '#00aaff',
  263. isShelf: true
  264. },
  265. ],
  266. },
  267. {
  268. text: '轮胎质保单',
  269. icon: 'file-text',
  270. auth: true,
  271. column: 4,
  272. size: 60,
  273. child:[
  274. {
  275. text: '创建质保单',
  276. icon: 'zhibaodan',
  277. auth: this.$hasPermissions('M_creatWarranty_mini'),
  278. path: '/pagesA/qualityPolicy/creatOrder',
  279. color: '#056cd9'
  280. },
  281. {
  282. text: '质保单查询',
  283. icon: 'ordersearch',
  284. auth: this.$hasPermissions('M_searchWarranty_mini'),
  285. path: '/pagesA/qualityPolicy/searchOrder',
  286. color: '#ffaa7f'
  287. },
  288. ],
  289. },
  290. {
  291. text: '基础设置',
  292. icon: 'setting',
  293. auth: true,
  294. column: 4,
  295. size: 60,
  296. child:[
  297. {
  298. text: '员工管理',
  299. icon: 'employee',
  300. auth: this.$hasPermissions('M_employee_mini'),
  301. path: '/pages/storeManage/personnel',
  302. color: '#ff9d7c'
  303. },
  304. {
  305. text: '岗位权限',
  306. icon: 'job',
  307. auth: this.$hasPermissions('M_roleSetting_mini'),
  308. path: '/pages/storeManage/roleSetting/roleSetting',
  309. color: '#aaaaff'
  310. },
  311. {
  312. text: '价格显示授权',
  313. icon: 'permission',
  314. auth: this.$hasPermissions('M_priceShow_mini')&&this.showPriceSet,
  315. path: '/pages/storeManage/priceSetting/priceSetting',
  316. color: '#55aaff',
  317. isShelf: true
  318. },
  319. {
  320. text: '商城显示授权',
  321. icon: 'shangcheng',
  322. auth: this.$store.state.vuex_showShopAuth&&this.userInfo&&this.userInfo.superAdmin == 1,
  323. path: '/pagesB/shopShow/shopShow',
  324. color: '#4caf50',
  325. isShelf: true
  326. },
  327. {
  328. text: '余额支付授权',
  329. icon: 'payrecord',
  330. auth: this.userInfo&&this.userInfo.superAdmin == 1,
  331. path: '/pagesB/balanceSetting/balanceSetting',
  332. color: '#009688',
  333. isShelf: true
  334. },
  335. ],
  336. }
  337. ]
  338. // 计算父节点,权限
  339. list.forEach(item => {
  340. item.id = this.$u.guid()
  341. item.child = item.child.filter(c => c.auth)
  342. item.auth = item.child.length > 0
  343. })
  344. return list.filter(item => item.auth)
  345. }
  346. },
  347. onShow() {
  348. // 用户头像
  349. this.avatarUrl = uni.getStorageSync('userPhoto');
  350. // 获取货架信息
  351. const shelfInfo = this.$store.state.vuex_storeShelf
  352. this.shelfSn = shelfInfo ? shelfInfo.shelfSn : ''
  353. this.dealerPhone = shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
  354. if(this.shelfSn){
  355. this.getPriceCofig()
  356. }
  357. // 获取优惠券总数
  358. if(this.hasLogin&&this.$hasPermissions('M_couponList_mini')){
  359. this.getCouponCount()
  360. }
  361. // 红包总金额
  362. if(this.hasRedPacket&&this.hasShelf){
  363. this.getUserReward()
  364. }
  365. // 隐藏促销模块
  366. if(!this.hasLogin){
  367. this.hidePromoTab()
  368. }
  369. },
  370. // 页面卸载
  371. onUnload() {
  372. uni.$off('refashProm')
  373. },
  374. methods: {
  375. // 获取优惠券数量
  376. getCouponCount(){
  377. if(this.userInfo.sysUserFlag == '1'){
  378. ticketQueryCount().then(res => {
  379. this.couponCount = res.data ? res.data.ticketValue : 0
  380. })
  381. }
  382. },
  383. // 红包总金额
  384. getUserReward(){
  385. findUserReward().then(res => {
  386. this.redPackCount = res.data ? res.data.rewardAmount : 0
  387. })
  388. },
  389. // 查看用户信息
  390. toUser(){
  391. if(this.hasLogin){
  392. // 用户详细信息 或 门店认证
  393. uni.navigateTo({
  394. url: this.userInfo.sysUserFlag == '1' ? '/pages/personData/personData' : '/pages/storeManage/storeAuth'
  395. })
  396. }else{
  397. toLogin()
  398. }
  399. },
  400. // 隐藏促销模块
  401. hidePromoTab(){
  402. // 删除促销模块
  403. const promoIndex = this.$store.state.vuex_tabBarList.findIndex(item => item.text == '促销')
  404. if(promoIndex > -1){
  405. this.$store.state.vuex_tabBarList.splice(promoIndex,1)
  406. }
  407. // 扫描按钮不局中
  408. const scanTab = this.$store.state.vuex_tabBarList.find(item => item.text == '扫描VIN')
  409. if(scanTab){
  410. scanTab.iconPath = "/static/tab/tab_scan_normal.png"
  411. scanTab.midButton = false
  412. }
  413. },
  414. // tab单击
  415. beforeSwitch(index){
  416. const row = this.$store.state.vuex_tabBarList[index] // 当前tab
  417. const isNoAuth = this.userInfo ? this.userInfo.sysUserFlag == '0' : false // 是否认证门店
  418. return clickTab(row,this.hasLogin,isNoAuth,this.vuex_vinScanNums < this.vuex_scanMaxNums)
  419. },
  420. // 网格打开页面
  421. openPage(e,child){
  422. const item = child[e.detail.index]
  423. this.toPage(item.path,item.isShelf)
  424. },
  425. // 点击统计数据
  426. openDataList(e){
  427. const path = [
  428. '/pagesB/accountBalance/accountBalance',
  429. '/pagesB/accountBalance/accountBalance',
  430. '/pagesB/coupon',
  431. '/pagesB/redPacket'
  432. ]
  433. this.toPage(path[e.detail.index],true)
  434. },
  435. // 获取价格配置
  436. getPriceCofig(){
  437. queryQplsConfig({shelfSn: this.shelfSn}).then(res => {
  438. this.$store.state.vuex_configPrice = res.data || null
  439. const ret = [false,false]
  440. ret[0]= res.data.shelf_cost_show == '1' || res.data.non_shelf_cost_show == '1'
  441. ret[1]= res.data.shelf_price_show == '1' || res.data.non_shelf_price_show == '1'
  442. this.showPriceSet = ret.filter(item => !!item).length > 0
  443. })
  444. },
  445. // 取货
  446. openTakeGood(index){
  447. // 已有数字货架
  448. if(this.hasShelf){
  449. this.clickAction(index)
  450. }else{
  451. uni.showToast({
  452. icon:'none',
  453. title: '门店没有关联数字货架,无法使用此功能!'
  454. })
  455. }
  456. },
  457. // 选择取货方式
  458. clickAction(index){
  459. const shelfSn = this.hasShelf.shelfSn
  460. const _this = this
  461. // 扫描
  462. if(index == 0){
  463. uni.scanCode({
  464. success: function (ret) {
  465. console.log(ret);
  466. const params = {
  467. codeType: ret.scanType == 'QR_CODE' ? 0 : 1
  468. }
  469. // 二维码
  470. if(ret.scanType == 'QR_CODE'){
  471. const result = ret.result.split("&")
  472. params.productSn = result[2] // 产品编码sn
  473. }else{
  474. params.qrCode = ret.result
  475. }
  476. uni.showLoading({
  477. title: "正在查询产品..."
  478. })
  479. // 确认取货
  480. getProductfindByScanCode(params).then(res => {
  481. if(res.status == 200 && res.data){
  482. if(res.data.currentInven){
  483. const billSource = ret.scanType == 'QR_CODE' ? 'qr_code': 'bar_code'
  484. const retData = Object.assign({shelfSn: shelfSn, billSource: billSource},res.data)
  485. _this.$store.state.vuex_tempData = retData
  486. uni.navigateTo({
  487. url: '/pagesA/queryByCode/confirmQh'
  488. })
  489. }else{
  490. uni.showModal({
  491. title: '提示',
  492. content: '产品库存为0,无法取货!',
  493. confirmText: '好的',
  494. showCancel: false
  495. })
  496. }
  497. }else{
  498. uni.showModal({
  499. title: '提示',
  500. content: '产品不属于此货架,请重新扫描!',
  501. confirmText: '好的',
  502. showCancel: false
  503. })
  504. }
  505. uni.hideLoading()
  506. })
  507. }
  508. });
  509. }else{
  510. // 按编码搜索
  511. uni.navigateTo({
  512. url: '/pagesA/queryByCode/queryByCode'
  513. })
  514. }
  515. },
  516. // 跳转打开页面
  517. toPage(path,isShelf){
  518. const _this = this
  519. if(this.hasLogin){
  520. // 游客未认证
  521. if(this.userInfo.sysUserFlag == '0'){
  522. if(this.storeApply&&this.storeApply.auditStatus=='WAIT'){
  523. uni.showModal({
  524. title: '提示',
  525. content: '门店认证资料审核中,请耐心等待!',
  526. confirmText: '知道了',
  527. showCancel: false
  528. })
  529. }
  530. // 如果审核已通过
  531. else if(this.storeApply&&this.storeApply.auditStatus=='PASS'){
  532. uni.showModal({
  533. title: '提示',
  534. content: '门店认证审核已通过,请重新登录!',
  535. confirmText: '去登录',
  536. showCancel: false,
  537. success() {
  538. _this.$store.dispatch('userLogout');
  539. toLogin()
  540. }
  541. })
  542. }else{
  543. this.showPopup = true
  544. }
  545. }else{
  546. // 已有数字货架
  547. if(this.hasShelf || !isShelf){
  548. if(path.indexOf("/pages")>=0){
  549. uni.navigateTo({
  550. url: path
  551. })
  552. }else{
  553. if(path == '#quhuo1'){
  554. this.openTakeGood(1)
  555. }
  556. if(path == '#quhuo0'){
  557. this.openTakeGood(0)
  558. }
  559. if(path == '#call'){
  560. this.call()
  561. }
  562. }
  563. }else{
  564. uni.showToast({
  565. icon:'none',
  566. title: '门店没有关联数字货架,无法使用此功能!'
  567. })
  568. }
  569. }
  570. }else{
  571. toLogin()
  572. }
  573. },
  574. // 去认证
  575. toAuthStore(){
  576. this.showPopup = false
  577. uni.navigateTo({
  578. url: '/pages/storeManage/storeAuth'
  579. })
  580. },
  581. // 打电话
  582. call(){
  583. this.callPhone(this.dealerPhone)
  584. },
  585. // 退出登录
  586. quitOut(){
  587. let _this = this
  588. uni.showModal({
  589. title: '提示',
  590. content: '确定退出登录吗?',
  591. success: (ret) => {
  592. if(ret.confirm){
  593. _this.$store.dispatch('userLogout');
  594. toLogin()
  595. }
  596. }
  597. })
  598. }
  599. }
  600. }
  601. </script>
  602. <style lang="less">
  603. .morePages{
  604. width: 100%;
  605. background-image: linear-gradient(#86defa 0%,#cdeff9 20%,#f8f8f8 30%);
  606. .header-box{
  607. z-index: 5;
  608. padding: 0em 1em;
  609. background: #03A9F4;
  610. .title{
  611. padding: 0;
  612. }
  613. .version{
  614. color: #FFEB3B;
  615. font-size: 0.8em;
  616. margin-left: 1em;
  617. }
  618. }
  619. .morePages-body{
  620. padding: 0 30rpx;
  621. overflow: hidden;
  622. .body-box{
  623. margin-bottom: 10px;
  624. z-index: 4;
  625. }
  626. .bg-blue{
  627. position: relative;
  628. > view{
  629. z-index: 100;
  630. position: relative;
  631. }
  632. &::after{
  633. /* 这个伪类的作用就是一个圆弧的背景色 */
  634. width: 130%;
  635. height: 100%;
  636. position: absolute;
  637. /*设置水平居中*/
  638. left: -15%;
  639. /* 之所以left:20%,是因为width:140%,若width:160%,那么left:30%才能水平居中 */
  640. top: -25%;
  641. /*层叠顺序,最底层显示*/
  642. content: '';
  643. border-radius: 0 0 50% 50%;
  644. /*分别对应 左上 右上 右下 左下 可以修改成其它颜色*/
  645. background: linear-gradient(to bottom, #03A9F4, #02a6ec);
  646. }
  647. .userCard{
  648. position:relative;
  649. left:0;
  650. bottom:0;
  651. padding: 0.5rem;
  652. background: #fff;
  653. border-radius: 25rpx;
  654. box-shadow: 2rpx 2rpx 5rpx #bcdede;
  655. .userCard-info{
  656. flex-grow:1;
  657. > view{
  658. &:last-child{
  659. margin-left: 0.5em;
  660. line-height: 1.5em;
  661. .user-name{
  662. font-size: 1rem;
  663. }
  664. >view{
  665. padding: 0.2em;
  666. }
  667. }
  668. }
  669. .user-info{
  670. flex-grow:1;
  671. }
  672. }
  673. .user-rz{
  674. font-size: 0.8rem;
  675. color:#58aff5;
  676. }
  677. }
  678. }
  679. .list-box{
  680. background: #ffffff;
  681. margin-bottom: 20rpx;
  682. border-radius: 25rpx;
  683. overflow: hidden;
  684. box-shadow: 2rpx 2rpx 5rpx #eee;
  685. .list-title{
  686. padding: 25rpx 20rpx;
  687. color: #666;
  688. > text{
  689. font-size: 28rpx;
  690. }
  691. }
  692. &:first-child{
  693. box-shadow: 2rpx 2rpx 5rpx #cdeff9;
  694. }
  695. .list-body{
  696. padding: 0 20rpx;
  697. }
  698. .grid-item-box{
  699. display: flex;
  700. flex-direction: column;
  701. align-items:center;
  702. justify-content: center;
  703. margin-bottom: 15px;
  704. .value{
  705. text-align:center;
  706. color: #666;
  707. margin-top: 15px;
  708. font-size: 16px;
  709. }
  710. .text{
  711. text-align:center;
  712. color: #666;
  713. margin-top: 5px;
  714. font-size: 12px;
  715. }
  716. .icons{
  717. text-align:center;
  718. display: flex;
  719. align-items: center;
  720. flex-direction: column;
  721. justify-content: center;
  722. }
  723. }
  724. }
  725. .phone{
  726. color: #00aaff;
  727. &:active{
  728. opacity: 0.8;
  729. transform:scale(0.9);
  730. }
  731. }
  732. }
  733. }
  734. </style>