morePage.vue 20 KB

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