Jacob
4 天以前 f564a64d3c99b4d300e54e038446227a440bba48
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<template>
   <view class="page" :style="{ paddingTop: (menuTop + lineHeight) + 'px' }">
       <view class="header" :style="{ paddingTop: menuTop + 'px' }">
           <view class="header_text" :style="{ lineHeight: lineHeight + 'px' }">
               <view class="return iconfont icon-xiangzuo" @click.stop="goback"></view>解绑手机号
           </view>
       </view>
       <view class="page_wrapper">
           <scroll-view class="content" scroll-y="true" :style="'height:' + pageHeight + 'px'">
               <view class="info">
                   <view class="section title bigTitle">解绑前请仔细阅读</view>
                   <view class="section title">尊敬的用户:</view>
                   <view class="section">您正在申请解除当前手机号与「悦养商城」账号的绑定关系。为保障您的账号及资产安全,执行解绑前,请务必知悉以下事项:</view>
                   <view class="section">1.解绑成功后,当前手机号将立即与账号解除绑定,<text class="strong">无法再继续登录悦养商城小程序</text>;
                       <br>2.解绑后如需继续使用悦养商城,<text class="strong">需使用新的手机号重新注册账号</text>,原账号的订单记录、优惠券、悦养豆及会员权益等<text
                           class="strong">无法迁移至新账号</text>;
                       <br>3.若当前账号存在进行中的订单、售后申请或未使用的优惠券,建议您处理完毕后再执行解绑。
                   </view>
                   <view class="section">
                       <text class="strong">解绑操作一经确认即不可撤销</text>,因解绑导致的账号无法登录、资产无法找回等损失需由您自行承担。<text
                           class="strong">我们已使用橙色加粗字体标注与您权益(可能)存在重大关系的内容,请您重点阅读、谨慎操作。</text>
                   </view>
                   <view class="section title">关于我们</view>
                   <view class="section">悦养商城小程序、网站、APP的经营者为:上海蓝鹿信息科技有限公司。如您对解绑操作有任何疑问,可随时联系在线客服咨询。
                   </view>
               </view>
           </scroll-view>
       </view>
       <div class="btn" @click="unbindUser">确认解绑</div>
       <div class="cancel" @click="goback">再想想</div>
       <div class="tips acea-row">
           <text class="tips_text">如有疑问,请联系</text>
           <!-- #ifndef MP -->
           <text class="contact" @click="kefuClick">
               <image :src="servicePic"></image>
               <text>在线客服</text>
           </text>
           <!-- #endif -->
           <!-- #ifdef MP -->
           <button class="contact" open-type='contact' hover-class='none'>
               <text>在线客服</text>
           </button>
           <!-- #endif -->
       </div>
   </view>
</template>
 
<script>
import { unbindUser } from '@/api/user.js';
import {
   mapGetters
} from "vuex";
export default {
   components: {
 
   },
   computed: mapGetters(['isLogin', 'chatUrl', 'uid']),
   data() {
       return {
           pageHeight: 0,
           menuTop: 0,
           lineHeight: 34,
       }
   },
   mounted() {
   },
   onLoad() {
       let that = this;
       uni.getSystemInfo({
           success(res) {
               console.log(res);
               let windowHeight = res.windowHeight;
               that.menuTop = uni.getMenuButtonBoundingClientRect().top;
               that.lineHeight = uni.getMenuButtonBoundingClientRect().height;
               that.$set(that, 'pageHeight', windowHeight - 190 / 750 * windowHeight - that.menuTop - that
                   .lineHeight);
           }
       });
   },
   methods: {
       kefuClick() {
           location.href = this.chatUrl;
       },
       /**
        * 解绑用户
        */
       async unbindUser() {
           let that = this;
           that.$refs.showConfirm.show({
                   title: '',
                   content: '是否解绑?',
                   confirmText: '是',
                   cancelText: '否',
                   center: true,
                   success: function (res) {
                       if (res.confirm) {
                           unbindUser().then(res => {
                                   uni.showToast({
                                       title: '解绑成功',
                                       icon: 'success',
                                       duration: 2000
                                   });
                                   that.$store.commit('LOGOUT');
                                   setTimeout(() => {
                                       uni.reLaunch({
                                           url: '/pages/user/index',
                                           complete: () => {
                                               //reLaunch 不会重跑 App onLaunch,需主动发起匿名重登,
                                               //恢复游客 token/unionId/归属信息并触发 BELONG_READY,否则首页数据不加载
                                               uni.$emit('reloginAfterLogout');
                                           }
                                       });
                                   }, 2000);
                                   // uni.navigateBack({
                                   //     delta: 1,
                                   // })
                               });
                           
                       } else {
           
                       }
                   },
               });
           
           },
       goback() {
           return uni.navigateBack({
               delta: 1,
           })
       }
   }
}
</script>
 
<style scoped lang="scss">
.page {
   padding-top: 210rpx;
   padding-bottom: 30rpx;
   height: 100%;
   box-sizing: border-box;
   overflow: hidden;
}
 
.header {
   width: 750rpx;
   height: 334rpx;
   position: sticky;
   top: 0;
   z-index: 1;
   width: 100%;
   text-align: center;
   padding-top: 88rpx;
   font-size: 30rpx;
   line-height: 64rpx;
   font-weight: bold;
   text-align: center;
   position: fixed;
   left: 0;
   top: 0;
   background: linear-gradient(to bottom, #FFEF7D 0%, #FFE945 37%, rgba(255, 226, 14, 0) 100%);
}
 
.header_text {
   position: relative;
}
 
.return {
   position: absolute;
   left: 30rpx;
   top: 0;
}
 
.page_wrapper {
   width: 630rpx;
   padding: 30rpx 0;
   margin: 45rpx auto 0 auto;
   background-color: #ffffff;
   border-radius: 15rpx;
   position: relative;
   z-index: 2;
}
 
.btn {
   width: 630rpx;
   font-size: 27rpx;
   line-height: 72rpx;
   margin: 0 auto;
   margin-top: 30rpx;
   background-color: #e18136;
   font-weight: bold;
   color: #ffffff;
   text-align: center;
   border-radius: 36rpx;
}
 
.cancel {
   font-size: 27rpx;
   line-height: 72rpx;
   text-align: center;
}
 
.tips {
   text-align: center;
   font-size: 18rpx;
   line-height: 32rpx;
   color: #a4a5a6;
   justify-content: center;
   align-items: center;
 
   .tips_text {
       display: inline-block;
       line-height: 32rpx;
   }
 
   .contact {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background: none;
       font-size: 18rpx;
       line-height: 32rpx;
       color: #e18136;
       padding: 0;
       margin: 0;
 
       image {
           width: 32rpx;
           height: 32rpx;
           margin-right: 6rpx;
           vertical-align: middle;
       }
   }
}
 
.info {
   padding: 0 30rpx;
   font-size: 23rpx;
   line-height: 1.5em;
   position: relative;
   z-index: 2;
   text-align: justify;
 
   .title {
       font-weight: bold;
 
       &.bigTitle {
           font-size: 1.5em;
           padding-left: 1.5em;
           background: url(https://ossacmall.bluedeer.com.cn/app/static/images/icon_unbindTips.png) left center/auto 30rpx no-repeat;
       }
   }
 
   .section {
       margin-bottom: 1.5em;
   }
 
   .strong {
       color: #FF780D;
       font-weight: bold;
   }
}
</style>