index.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <template>
  2. <view>
  3. <u-navbar title-color="#fff" :custom-back="customBack" :border-bottom="false" back-icon-color="#CCE8FF" :background="{background: '#008CFF' }" title="我的"></u-navbar>
  4. <view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
  5. <view class="u-m-r-24" @click="login($store.state.vuex_hasLogin)">
  6. <u-avatar :src="userInfo.headImgUrl || userInfo.avatar||pic" size="140"></u-avatar>
  7. </view>
  8. <view class="u-flex-1" @click="login($store.state.vuex_hasLogin)">
  9. <view class="u-font-18 u-p-b-20">{{ userInfo.nickname || userInfo.userName || '请登录' }}</view>
  10. <view class="u-font-14">手机号:{{ userInfo.mobile || '暂无' }}</view>
  11. </view>
  12. <!-- <view class="u-m-l-10 u-p-10">
  13. <u-icon name="arrow-right" color="#fff" size="28"></u-icon>
  14. </view> -->
  15. </view>
  16. <view class="u-m-t-20">
  17. <u-cell-group>
  18. <u-cell-item title="贵州银行支付" @click="guizhouPay()">
  19. <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="wodecheliang"></u-icon>
  20. </u-cell-item>
  21. <u-cell-item title="我的车辆" @click="openPage('pages/myCars/myCars')">
  22. <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="wodecheliang"></u-icon>
  23. </u-cell-item>
  24. <u-cell-item title="停车记录" @click="openPage('pages/center/order/order')">
  25. <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="tingchejilu"></u-icon>
  26. </u-cell-item>
  27. </u-cell-group>
  28. </view>
  29. <view class="u-m-t-20">
  30. <u-cell-group>
  31. <u-cell-item title="充值" @click="openPage('pages/myCars/myCars')">
  32. <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="chongzhi"></u-icon>
  33. </u-cell-item>
  34. <u-cell-item title="包月" @click="openPage('pages/center/order/order')">
  35. <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="baoyue"></u-icon>
  36. </u-cell-item>
  37. <u-cell-item title="提现" @click="openPage('pages/center/order/order')">
  38. <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="tixian"></u-icon>
  39. </u-cell-item>
  40. <u-cell-item title="退款" @click="openPage('pages/center/order/order')">
  41. <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="tk"></u-icon>
  42. </u-cell-item>
  43. <u-cell-item title="账单记录" @click="openPage('pages/center/order/order')">
  44. <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="zhangdanjilu"></u-icon>
  45. </u-cell-item>
  46. </u-cell-group>
  47. </view>
  48. <view class="u-m-t-20">
  49. <u-cell-group>
  50. <u-cell-item title="我的优惠" @click="openPage('pages/myCars/myCars')">
  51. <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="wodeyouhui"></u-icon>
  52. </u-cell-item>
  53. </u-cell-group>
  54. </view>
  55. <view class="u-m-t-20">
  56. <u-cell-group>
  57. <u-cell-item title="发票管理" @click="openPage('pages/center/invoice/invoice')">
  58. <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="fapiaoguanli"></u-icon>
  59. </u-cell-item>
  60. </u-cell-group>
  61. </view>
  62. <view class="u-m-t-20 u-m-b-40">
  63. <u-cell-group>
  64. <u-cell-item title="拨打客服电话" @click="phoneCall(phoneNo)">
  65. <u-icon slot="icon" custom-prefix="custom-icon" size="35" name="dianhua"></u-icon>
  66. </u-cell-item>
  67. </u-cell-group>
  68. </view>
  69. <!-- <view class="u-m-t-20">
  70. <u-cell-group>
  71. <u-cell-item icon="phone" title="手机号登录" @click="openPage('/pages/center/phoneLogin/phoneLogin')"></u-cell-item>
  72. </u-cell-group>
  73. </view> -->
  74. <u-toast ref="uToast" />
  75. </view>
  76. </template>
  77. <script>
  78. import getUrlParams from "../../utils/getUrlParams.js";
  79. export default {
  80. data() {
  81. return {
  82. pic:'/static/img/default-avatar.png',
  83. userInfo:[],
  84. code:null,
  85. phoneNo:'114',
  86. }
  87. },
  88. onLoad() {
  89. },
  90. onShow() {
  91. if(this.$store.state.vuex_hasLogin){
  92. this.userInfo = this.$store.state.vuex_user;
  93. if(this.$store.state.vuex_wxinfo){
  94. this.userInfo = Object.assign(this.userInfo,this.$store.state.vuex_wxinfo);
  95. }
  96. }else{
  97. this.userInfo = [];
  98. };
  99. let locationLocaturl = window.location.search;
  100. this.code = getUrlParams(locationLocaturl,"code");
  101. if(this.code&&!this.$store.state.vuex_wxinfo.openId){this.handleGetWXInfo(this.code)};
  102. },
  103. methods: {
  104. openPage(path) {
  105. console.log('path',path);
  106. this.$u.route({
  107. url: path
  108. })
  109. },
  110. //登录判断
  111. login(status){
  112. console.log('this.$store.state.vuex_hasLogin',this.$store.state.vuex_hasLogin);
  113. if(!status){
  114. console.log('config',this.config);
  115. this.$u.route({
  116. url: 'pages/center/phoneLogin/phoneLogin'
  117. });
  118. }
  119. },
  120. customBack(){
  121. this.$u.route({
  122. type:'switchTab',
  123. url: 'pages/index/index'
  124. });
  125. },
  126. phoneCall(phone){
  127. uni.makePhoneCall({
  128. phoneNumber: phone
  129. });
  130. },
  131. // 贵州银行支付
  132. guizhouPay(){
  133. let tradeNo = new Date().getTime();
  134. uni.setStorage({
  135. key:'gzbankTradeNo',
  136. data:tradeNo
  137. });
  138. this.$u.api.gzbank({orderId:tradeNo,openid:'111'})
  139. .then(res=>{
  140. let resData = res.data;
  141. function toQueryPair(key, value) {
  142. if (typeof value == 'undefined') {
  143. return `&${key}=`;
  144. }
  145. return `&${key}=${value}`;
  146. };
  147. function objToParam(param) {
  148. if (Object.prototype.toString.call(param) !== '[object Object]') {
  149. return '';
  150. }
  151. let queryParam = '';
  152. for (let key in param) {
  153. if (param.hasOwnProperty(key)) {
  154. let value = param[key];
  155. queryParam += toQueryPair(key, encodeURIComponent(value));
  156. }
  157. }
  158. console.log('queryParam',queryParam)
  159. return queryParam.substr(1);
  160. }
  161. let bankLink = 'http://222.85.178.210:80/gateway/Merchantforurl.do?'+objToParam(resData);
  162. location.href = bankLink;
  163. console.log('gzbank',res);
  164. console.log('bankLink',bankLink);
  165. // console.log('URLEncode',URLEncode);
  166. // let divForm = document.getElementsByTagName('divform')
  167. // if (divForm.length) {
  168. // document.body.removeChild(divForm[0])
  169. // }
  170. // const div = document.createElement('divform')
  171. // div.innerHTML = res.retBody // res.data就是sb支付宝返回给你的form
  172. // document.body.appendChild(div);
  173. // // document.forms[0].setAttribute('target', '_blank') // 加了_blank可能出问题所以我注释了
  174. // document.punchout_form.submit();
  175. // // document.getElementById('alipay_submit').submit();
  176. // console.log('alipage',res);
  177. }).catch(err=>{
  178. console.log('gzbank err',err);
  179. });
  180. }
  181. }
  182. }
  183. </script>
  184. <style lang="scss" scoped>
  185. page{background-color: $my-page-bg-color;}
  186. .user-box{
  187. position: relative;
  188. background-color: $my-main-color;
  189. color: #fff;
  190. &:after{
  191. position: absolute;
  192. right: 0;
  193. bottom: 0;
  194. content: '';
  195. background: url(../../static/img/center-top-bg.png) no-repeat;
  196. background-position: -90rpx 0;
  197. width: 305rpx;
  198. height: 145rpx;
  199. z-index: 999;
  200. }
  201. }
  202. .u-avatar{border: 10rpx solid #4CAEFF;}
  203. .u-cell-box /deep/ .u-cell__left-icon-wrap,
  204. .u-cell-box /deep/ .custom-icon
  205. {color: $my-main-color;margin-right: 10rpx;}
  206. </style>