morePage.vue 20 KB

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