index.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. <template>
  2. <app-layout class="app-my">
  3. <view class="container">
  4. <view class="customer">
  5. <view class="bg"></view>
  6. <view class="info dir-top-wrap cross-center main-center">
  7. <view class="head-img" @click="handleGetInfo">
  8. <u-image
  9. width="140"
  10. height="140"
  11. :src="userData.head_img"
  12. shape="circle"></u-image>
  13. </view>
  14. <view class="nickname">
  15. <template v-if="userData.nickname !== '微信用户'">{{userData.nickname}}</template>
  16. <template v-else>
  17. <u-button @click="handleGetInfo"
  18. type="success"
  19. size="mini"
  20. :custom-style="{backgroundColor: '#097268'}">获取头像/昵称</u-button>
  21. </template>
  22. </view>
  23. <view class="mobile">
  24. <!--#ifdef MP-WEIXIN-->
  25. <u-button size="mini"
  26. v-if="!userData.phone_num"
  27. :custom-style="{backgroundColor: '#097268'}"
  28. type="success" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</u-button>
  29. <text v-else>{{userData.phone_num}}</text>
  30. <!--#endif-->
  31. </view>
  32. </view>
  33. </view>
  34. <u-cell-group :border="false" class="tab-list">
  35. <u-cell-item title="桥架会员" :border-bottom="false" bg-color="#f9f9f9" @click="handleJumpBuy" v-if="!setting.review_mode">
  36. <view slot="icon" class="icon bridge"></view>
  37. </u-cell-item>
  38. <u-cell-item title="会员购买记录" :border-bottom="false" bg-color="#f9f9f9" v-if="!setting.review_mode" @click="$jump({url:'/pages/my/member-record',type:'to'})">
  39. <view slot="icon" class="icon member"></view>
  40. </u-cell-item>
  41. <u-cell-item title="分销中心" v-if="setting.open_share" :border-bottom="false" bg-color="#f9f9f9" @click="$jump({url:'/pages/share/index',type:'to'})">
  42. <view slot="icon" class="icon share"></view>
  43. </u-cell-item>
  44. <u-cell-item title="微信号" :border-bottom="false" bg-color="#f9f9f9" @click="handleCopy">
  45. {{setting.service_wechat}}
  46. <view slot="icon" class="icon wechat"></view>
  47. </u-cell-item>
  48. <u-cell-item title="在线客服" :border-bottom="false" :use-label-slot="true" bg-color="#f9f9f9" :value-style="{position: 'relative'}">
  49. <button open-type="contact" class="cell-btn" slot="label"></button>
  50. <view slot="icon" class="icon kefu"></view>
  51. </u-cell-item>
  52. <u-cell-item title="清除缓存" :border-bottom="false" icon="reload" bg-color="#f9f9f9" @click="handleClearCache">
  53. </u-cell-item>
  54. </u-cell-group>
  55. <view class="qrcode dir-top-wrap cross-center">
  56. <view class="img">
  57. <u-image
  58. width="260"
  59. height="260"
  60. :src="setting.service_qrcode"
  61. ></u-image>
  62. </view>
  63. <text class="title">扫描二维码联系客服</text>
  64. </view>
  65. </view>
  66. <u-modal v-model="modal.show"
  67. :show-cancel-button="true"
  68. content="确定清除缓存?"
  69. cancel-text="取消"
  70. cancel-color="#CCCCCC"
  71. confirm-text="确定"
  72. confirm-color="#046E64"
  73. @confirm="sureClearCache"
  74. >
  75. </u-modal>
  76. </app-layout>
  77. </template>
  78. <script>
  79. import appLayout from "@/components/app-layout"
  80. export default {
  81. components:{
  82. appLayout,
  83. },
  84. data() {
  85. return {
  86. userData: this.vuex_user_data,
  87. setting: {},
  88. modal: {
  89. show : false
  90. }
  91. }
  92. },
  93. methods: {
  94. handleJumpBuy(){
  95. /*if(this.$platform === 'ios'){
  96. uni.showModal({
  97. title: '提示',
  98. content: '由于相关规范,iOS功能暂不可用',
  99. success: function (res) {
  100. // res.confirm res.cancel
  101. }
  102. });
  103. return false
  104. }*/
  105. this.$jump({url:'/pages/my/member',type:'to'})
  106. },
  107. getPhoneNumber(phoneNumber){
  108. if(phoneNumber.detail.errMsg !== 'getPhoneNumber:ok'){
  109. this.$u.toast('已取消');
  110. return
  111. }
  112. uni.checkSession({
  113. success: data => {
  114. this.$u.api.userBindPhone(phoneNumber.detail).then(data => {
  115. this.$u.vuex(this.$const.USER_DATA,data)
  116. this.userData = data;
  117. })
  118. },
  119. fail: err => {
  120. this.sureClearCache()
  121. }
  122. })
  123. },
  124. handleGetInfo(){
  125. let _this = this;
  126. wx.getUserProfile({
  127. desc: '重新获取用户信息',
  128. success: data => {
  129. let params = {
  130. encryptedData: data.encryptedData,
  131. iv: data.iv,
  132. }
  133. _this.$u.api.userUpdate(params).then(res => {
  134. _this.$u.vuex(_this.$const.USER_DATA, res)
  135. this.userData = res;
  136. })
  137. },
  138. fail: err => {
  139. console.log('-->data',err)
  140. _this.$u.toast('获取用户信息失败')
  141. }
  142. });
  143. },
  144. getUser(){
  145. this.$u.api.userGet().then(data => {
  146. console.log('-->data',data)
  147. })
  148. },
  149. getSetting(){
  150. this.$u.api.settingGet().then(data => {
  151. this.setting = data;
  152. })
  153. },
  154. handleClearCache(){
  155. this.modal.show = true
  156. },
  157. sureClearCache(){
  158. this.$u.vuex(this.$const.USER_TOKEN,null)
  159. this.$u.vuex(this.$const.USER_DATA,null)
  160. this.$u.vuex(this.$const.USER_CONFIG,null)
  161. this.$jump({url:'/pages/login/login?redirect=pages/my/index',type:'redirect'})
  162. },
  163. handleCopy(){
  164. this.$util.copyText(this.setting.service_wechat)
  165. }
  166. },
  167. onLoad(){
  168. this.userData = this.vuex_user_data
  169. //this.getUser();
  170. },
  171. onShow(){
  172. this.getSetting();
  173. }
  174. }
  175. </script>
  176. <style lang="scss" scoped>
  177. /deep/.u-cell{
  178. padding: 22rpx 32rpx !important;
  179. }
  180. .cell-btn{
  181. border: 0;
  182. background: transparent;
  183. position: absolute;
  184. height: 80rpx;
  185. top: 0;
  186. width: 86%;
  187. z-index: 0;
  188. &:after{
  189. content: unset;
  190. }
  191. }
  192. .container{
  193. padding: 0;
  194. height: 100vh;
  195. .customer{
  196. position: relative;
  197. .bg{
  198. position: absolute;
  199. background: url("@/static/images/bg.png") no-repeat center;
  200. background-size: 100% 100%;
  201. height: 300rpx;
  202. left: 0;
  203. top: 0;
  204. width: 750rpx;
  205. z-index: 0;
  206. }
  207. .info{
  208. height: 300rpx;
  209. position: relative;
  210. color: #ffffff;
  211. z-index: 1;
  212. .nickname{
  213. margin: 8rpx 0;
  214. font-weight: 600;
  215. }
  216. }
  217. }
  218. .tab-list{
  219. margin-top: 32rpx;
  220. .icon{
  221. width: 32rpx;
  222. height: 32rpx;
  223. background-size: cover;
  224. background-repeat: no-repeat;
  225. background-position: center;
  226. margin-right: 8rpx;
  227. &.bridge{
  228. background-image: url("@/static/images/icons/bridge.png");
  229. }
  230. &.kefu{
  231. background-image: url("@/static/images/icons/kefu.png");
  232. }
  233. &.member{
  234. background-image: url("@/static/images/icons/member.png");
  235. }
  236. &.share{
  237. background-image: url("@/static/images/icons/share.png");
  238. }
  239. &.wechat{
  240. background-image: url("@/static/images/icons/wechat.png");
  241. }
  242. }
  243. }
  244. .qrcode{
  245. margin-top: 32rpx;
  246. >.title{
  247. padding: 8rpx 0;
  248. color: #6e6e6e;
  249. }
  250. }
  251. }
  252. </style>