用工小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

161 lines
5.0 KiB

7 months ago
  1. <template>
  2. <view class="u-page">
  3. <view class="se-pt-50 se-pb-120 se-px-40 se-bgc-orange se-c-white se-pos">
  4. <view class="se-flex">
  5. <image src="@/static/image/header.png" class="se-br-p-50 se-w-100 se-h-100" mode=""></image>
  6. <view class="se-ml-20 se-flex se-flex-v-sa se-flex-ai-fs">
  7. <view class="se-flex">
  8. <text class="se-fw-6 se-fs-30">热心小肖</text>
  9. <view class="se-flex se-flex-ai-c se-ml-20">
  10. <image class="se-a-25 se-mr-10" src="@/static/image/pencil.png" mode=""></image>
  11. <text class="se-fs-22">修改资料</text>
  12. </view>
  13. </view>
  14. <view class="se-fs-24 se-display-ib">
  15. <text>手机号:</text>
  16. <text class="se-ml-20">13189698114</text>
  17. </view>
  18. </view>
  19. </view>
  20. <view class="se-pos-cb se-flex se-flex-h-sb se-w-vw-82 se-br-10 se-bgc-white se-py-30 se-px-30"
  21. style="bottom: -80rpx;">
  22. <view class="se-flex se-flex-h-fs se-b-r se-flex-1">
  23. <view class="se-pos se-w-130">
  24. <image src="@/static/image/wall.png" class="se-w-120 se-h-120" mode=""></image>
  25. <view @click="onNavigateTo()" class="se-w-80 se-ta-c se-b-orange se-br-30 se-bgc-orange se-py-5 se-px-22 se-c-white se-fs-20 se-pos-cb">
  26. 钱包
  27. </view>
  28. </view>
  29. <view class="se-flex se-flex-v-sa se-flex-ai-fs">
  30. <view class="se-flex se-fs-28 se-c-black">
  31. 我的余额
  32. </view>
  33. <view class="se-fs-30 se-display-ib se-pt-20" style="color: #DC2828;">
  34. 1200
  35. </view>
  36. </view>
  37. </view>
  38. <view class="se-flex se-flex-h-fe se-flex-1 se-pr-20">
  39. <image src="@/static/image/piao.png" class="se-w-120 se-h-120" mode=""></image>
  40. <view class="se-flex se-flex-v-sa se-flex-ai-fs ">
  41. <view class="se-flex se-fs-28 se-c-black">
  42. 金额记录
  43. </view>
  44. <view class="se-fs-30 se-display-ib se-pt-20" @click="onRecord()">
  45. <view class="se-b-orange se-fs-22 se-c-orange se-br-30 se-py-5 se-px-20">
  46. 去查看
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. <view class="se-px-40 se-py-30 se-mt-80">
  54. <u-swiper :height="100" :list="list" @click="swiperClick"></u-swiper>
  55. </view>
  56. <view class="se-p-20 se-m-40 se-br-20 se-bgc-white">
  57. <view class="se-flex se-flex-ai-c se-pb-20">
  58. <view class="line-orange se-ml-10"></view>
  59. <view class="se-ml-10 se-fs-32 se-c-black se-fw-5">
  60. 我的服务
  61. </view>
  62. </view>
  63. <view class="se-grid">
  64. <view class="se-flex-v-c se-mb-20 se-mt-20 se-cursor-p" @click="onCustomerService()">
  65. <view class="se-w-80 se-h-80 se-flex se-flex-v-c">
  66. <image class="se-a-50" src="@/static/image/setting.png" mode=""></image>
  67. </view>
  68. <text class="se-h-60 se-lh-60 se-c-33 se-fs-26 se-ta-c se-mt-10 se-toe-2">联系客服</text>
  69. </view>
  70. <view class="se-flex-v-c se-mb-20 se-mt-20 se-cursor-p" @click="onSystem()">
  71. <view class="se-w-80 se-h-80 se-flex se-flex-v-c">
  72. <image class="se-a-50" src="@/static/image/setting.png" mode=""></image>
  73. </view>
  74. <text class="se-h-60 se-lh-60 se-c-33 se-fs-26 se-ta-c se-mt-10 se-toe-2">系统设置</text>
  75. </view>
  76. <view class="se-flex-v-c se-mb-20 se-mt-20 se-cursor-p" @click="onFeedback()">
  77. <view class="se-w-80 se-h-80 se-flex se-flex-v-c">
  78. <image class="se-a-50" src="@/static/image/setting.png" mode=""></image>
  79. </view>
  80. <text class="se-h-60 se-lh-60 se-c-33 se-fs-26 se-ta-c se-mt-10 se-toe-2">帮助与反馈</text>
  81. </view>
  82. <view class="se-flex-v-c se-mb-20 se-mt-20 se-cursor-p" @click="onVersion()">
  83. <view class="se-w-80 se-h-80 se-flex se-flex-v-c">
  84. <image class="se-a-50" src="@/static/image/setting.png" mode=""></image>
  85. </view>
  86. <text class="se-h-60 se-lh-60 se-c-33 se-fs-26 se-ta-c se-mt-10 se-toe-2">关于本程序</text>
  87. </view>
  88. </view>
  89. </view>
  90. </view>
  91. </template>
  92. <script>
  93. export default {
  94. data() {
  95. return {
  96. list: [
  97. // "../../static/image/59.png"
  98. // '@/static/image/banner.png',
  99. 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  100. // 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  101. ],
  102. }
  103. },
  104. methods: {
  105. swiperClick(event) {
  106. console.info(event);
  107. },
  108. onNavigateTo(){
  109. uni.navigateTo({
  110. url:"/pages_subpack/wallet/index"
  111. })
  112. },
  113. onRecord(){
  114. uni.navigateTo({
  115. url:"/pages_subpack/record/index"
  116. })
  117. },
  118. onSystem(){
  119. uni.navigateTo({
  120. url:"/pages_subpack/system/index"
  121. })
  122. },
  123. onFeedback(){
  124. uni.navigateTo({
  125. url:"/pages_subpack/feedback/index"
  126. })
  127. },
  128. onVersion(){
  129. uni.navigateTo({
  130. url:"/pages_subpack/version/index"
  131. })
  132. },
  133. onCustomerService(){
  134. uni.showModal({
  135. title: '联系客服',
  136. content: '确定拨打客服电话?',
  137. success: function (res) {
  138. if (res.confirm) {
  139. console.log('用户点击确定');
  140. } else if (res.cancel) {
  141. console.log('用户点击取消');
  142. }
  143. }
  144. });
  145. }
  146. }
  147. }
  148. </script>
  149. <style>
  150. page {
  151. background-color: #f5f5f5 !important;
  152. }
  153. .se-grid {
  154. display: grid;
  155. grid-template-columns: 1fr 1fr 1fr 1fr;
  156. gap: 10rpx;
  157. padding-bottom: 4rpx;
  158. }
  159. </style>