index.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <template>
  2. <view class="user-content">
  3. <!-- 头部 -->
  4. <view class="user-head" >
  5. <view>
  6. <open-data type="userAvatarUrl" class="user-photo"></open-data>
  7. </view>
  8. <view class="user-info">
  9. <view>
  10. <view v-if="hasLogin" class="user-info-item">{{userData.name ? userData.name :''}}</view>
  11. <view v-if="hasLogin" class="user-info-item">{{userData.mobile? userData.mobile:''}}</view>
  12. <u-button v-else="!hasLogin" plain size="mini" shape="circle" @click="toLoginPage">立即登录</u-button>
  13. </view>
  14. <view>
  15. <u-tag v-if="hasLogin" :text="userData?userData.reserveUserHistoryAccount+'元' :0+'元'" bg-color="#ff2c5c30" color="#FF2C5C" shape="circleLeft" mode="dark" class="tagPrice"/>
  16. </view>
  17. </view>
  18. </view>
  19. <!-- 列表 -->
  20. <view class="user-list">
  21. <u-cell-group>
  22. <u-cell-item icon="error-circle" icon-size="38" :value="version" @click="checkUpdate" title="版本检查"></u-cell-item>
  23. <u-cell-item v-if="hasLogin" icon="minus-circle" icon-size="38" @click="quitSys" title="退出登录"></u-cell-item>
  24. </u-cell-group>
  25. </view>
  26. </view>
  27. </template>
  28. <script>
  29. import { checkLogin, getUserInfo, logout } from '@/api/login.js'
  30. export default {
  31. data() {
  32. return {
  33. hasLogin: false,
  34. userData: {},
  35. price:'500元', // 交易金额
  36. version: '1.0.0' // 小程序版本
  37. };
  38. },
  39. onShow() {
  40. checkLogin().then(res => {
  41. this.hasLogin = res.status == 200
  42. console.log(this.hasLogin,res,'this.hasLogin')
  43. if(this.hasLogin){
  44. this.getUserInfo()
  45. }else{
  46. // uni.navigateTo({
  47. // url:"/pages/login/login"
  48. // })
  49. }
  50. })
  51. },
  52. computed: {
  53. user() {
  54. return this.userData
  55. }
  56. },
  57. onLoad() {
  58. // this.getVersion()
  59. // 开启分享
  60. uni.showShareMenu({
  61. withShareTicket: true,
  62. menus: ['shareAppMessage', 'shareTimeline']
  63. })
  64. },
  65. methods:{
  66. // 获取当前小程序版本
  67. getVersion(){
  68. const accountInfo = uni.getAccountInfoSync();
  69. this.version = accountInfo.miniProgram.version
  70. console.log(accountInfo,accountInfo.miniProgram.appId,'ppppppppp'); // 小程序 appId
  71. },
  72. // 检查更新
  73. checkUpdate(){
  74. if (uni.canIUse('getUpdateManager')) {
  75. const updateManager = uni.getUpdateManager()
  76. updateManager.onCheckForUpdate(function (res) {
  77. console.log('onCheckForUpdate====', res)
  78. // 请求完新版本信息的回调
  79. if (res.hasUpdate) {
  80. console.log('res.hasUpdate====')
  81. updateManager.onUpdateReady(function () {
  82. uni.showModal({
  83. title: '更新提示',
  84. content: '新版本已经准备好,是否重启应用?',
  85. success: function (res) {
  86. console.log('success====', res)
  87. // res: {errMsg: "showModal: ok", cancel: false, confirm: true}
  88. if (res.confirm) {
  89. // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
  90. updateManager.applyUpdate()
  91. }
  92. }
  93. })
  94. })
  95. updateManager.onUpdateFailed(function () {
  96. // 新的版本下载失败
  97. uni.showModal({
  98. title: '已经有新版本了哟~',
  99. content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~'
  100. })
  101. })
  102. } else {
  103. uni.showToast({
  104. title: '已是最新版本',
  105. icon: 'none'
  106. })
  107. }
  108. })
  109. }
  110. },
  111. // 获取用户信息
  112. getUserInfo(){
  113. getUserInfo().then(res => {
  114. console.log(res,'getUserInfo')
  115. if(res.status == 200){
  116. this.$u.vuex("vuex_userData",res.data)
  117. this.userData = res.data
  118. console.log(this.userData,'-----用户信息')
  119. }
  120. })
  121. },
  122. // 打开对应的页面
  123. toPage(index){
  124. console.log(index)
  125. let pageUrl=[
  126. '/pages/agreement/agreement?fromPage=usercenter',
  127. '/pages/userCenter/changePwd',
  128. ]
  129. uni.navigateTo({
  130. url: pageUrl[index]
  131. })
  132. },
  133. // 退出登录
  134. quitSys(){
  135. let _this = this
  136. uni.showModal({
  137. title: '提示',
  138. content: '您确定要退出登录吗?',
  139. success(res) {
  140. if (res.confirm) {
  141. logout().then(res => {
  142. console.log(res,'logout')
  143. getApp().globalData.token = ''
  144. _this.$u.vuex('vuex_token','')
  145. // 关闭socket
  146. uni.reLaunch({
  147. url: '/pages/login/login'
  148. })
  149. })
  150. }
  151. }
  152. })
  153. },
  154. toLoginPage(){
  155. uni.navigateTo({
  156. url: '/pages/login/login'
  157. })
  158. }
  159. }
  160. }
  161. </script>
  162. <style lang="scss">
  163. .user-content{
  164. width: 100%;
  165. .user-head{
  166. background: #fff;
  167. display: flex;
  168. align-items: center;
  169. padding: 35rpx 0rpx 35rpx 55rpx;
  170. .user-info{
  171. display: flex;
  172. justify-content: space-between;
  173. align-items: center;
  174. flex-grow: 1;
  175. padding-left: 20rpx;
  176. // color: #FFFFFF;
  177. .user-info-item{
  178. margin: 10rpx 0;
  179. :first-child{
  180. font-size: 34upx;
  181. }
  182. }
  183. .tagPrice{
  184. width: 200rpx;
  185. }
  186. }
  187. .user-photo{
  188. display: block;
  189. width: 100rpx;
  190. height: 100rpx;
  191. border-radius: 50%;
  192. overflow: hidden;
  193. }
  194. }
  195. .my-ledou{
  196. background: #FFFFFF;
  197. border-radius: 15upx;
  198. display: flex;
  199. align-items: center;
  200. justify-content: space-between;
  201. padding: 20upx;
  202. margin: 20upx;
  203. box-shadow: 0upx 3upx 6upx #eee;
  204. .user-jifen{
  205. display: flex;
  206. align-items: center;
  207. text{
  208. font-size: 40upx;
  209. font-weight: bold;
  210. color: red;
  211. }
  212. >view{
  213. &:first-child{
  214. display: flex;
  215. align-items: center;
  216. }
  217. }
  218. }
  219. }
  220. .user-list{
  221. border-radius: 15upx;
  222. margin: 20upx;
  223. overflow: hidden;
  224. box-shadow: 0upx 3upx 6upx #eee;
  225. .quit{
  226. margin-top: 20upx;
  227. }
  228. }
  229. .user-btn{
  230. padding: 85rpx 200rpx;
  231. }
  232. }
  233. </style>