index.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  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. uni.checkSession({
  109. success: data => {
  110. this.$u.api.userBindPhone(phoneNumber.detail).then(data => {
  111. this.$u.vuex(this.$const.USER_DATA,data)
  112. this.userData = data;
  113. })
  114. },
  115. fail: err => {
  116. this.sureClearCache()
  117. }
  118. })
  119. },
  120. handleGetInfo(){
  121. let _this = this;
  122. uni.getUserProfile({
  123. desc: '重新获取用户信息',
  124. success: data => {
  125. let params = {
  126. encryptedData: data.encryptedData,
  127. iv: data.iv,
  128. }
  129. _this.$u.api.userUpdate(params).then(res => {
  130. _this.$u.vuex(_this.$const.USER_DATA, res)
  131. this.userData = res;
  132. })
  133. },
  134. fail: err => {
  135. console.log('-->data',err)
  136. _this.$u.toast('获取用户信息失败')
  137. }
  138. });
  139. },
  140. getUser(){
  141. this.$u.api.userGet().then(data => {
  142. console.log('-->data',data)
  143. })
  144. },
  145. getSetting(){
  146. this.$u.api.settingGet().then(data => {
  147. this.setting = data;
  148. })
  149. },
  150. handleClearCache(){
  151. this.modal.show = true
  152. },
  153. sureClearCache(){
  154. this.$u.vuex(this.$const.USER_TOKEN,null)
  155. this.$u.vuex(this.$const.USER_DATA,null)
  156. this.$jump({url:'/pages/login/login?redirect=pages/my/index',type:'redirect'})
  157. },
  158. handleCopy(){
  159. this.$util.copyText(this.setting.service_wechat)
  160. }
  161. },
  162. onLoad(){
  163. this.userData = this.vuex_user_data
  164. //this.getUser();
  165. },
  166. onShow(){
  167. this.getSetting();
  168. }
  169. }
  170. </script>
  171. <style lang="scss" scoped>
  172. /deep/.u-cell{
  173. padding: 22rpx 32rpx !important;
  174. }
  175. .cell-btn{
  176. border: 0;
  177. background: transparent;
  178. position: absolute;
  179. height: 80rpx;
  180. top: 0;
  181. width: 86%;
  182. z-index: 0;
  183. &:after{
  184. content: unset;
  185. }
  186. }
  187. .container{
  188. padding: 0;
  189. height: 100vh;
  190. .customer{
  191. position: relative;
  192. .bg{
  193. position: absolute;
  194. background: url("@/static/images/bg.png") no-repeat center;
  195. background-size: 100% 100%;
  196. height: 300rpx;
  197. left: 0;
  198. top: 0;
  199. width: 750rpx;
  200. z-index: 0;
  201. }
  202. .info{
  203. height: 300rpx;
  204. position: relative;
  205. color: #ffffff;
  206. z-index: 1;
  207. .nickname{
  208. margin: 8rpx 0;
  209. font-weight: 600;
  210. }
  211. }
  212. }
  213. .tab-list{
  214. margin-top: 32rpx;
  215. .icon{
  216. width: 32rpx;
  217. height: 32rpx;
  218. background-size: cover;
  219. background-repeat: no-repeat;
  220. background-position: center;
  221. margin-right: 8rpx;
  222. &.bridge{
  223. background-image: url("@/static/images/icons/bridge.png");
  224. }
  225. &.kefu{
  226. background-image: url("@/static/images/icons/kefu.png");
  227. }
  228. &.member{
  229. background-image: url("@/static/images/icons/member.png");
  230. }
  231. &.share{
  232. background-image: url("@/static/images/icons/share.png");
  233. }
  234. &.wechat{
  235. background-image: url("@/static/images/icons/wechat.png");
  236. }
  237. }
  238. }
  239. .qrcode{
  240. margin-top: 32rpx;
  241. >.title{
  242. padding: 8rpx 0;
  243. color: #6e6e6e;
  244. }
  245. }
  246. }
  247. </style>