mine.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. <template>
  2. <view class="mine">
  3. <img src="../../static/mine/banner.png" class="banner" />
  4. <div class="title-mine">我的</div>
  5. <div class="info">
  6. <div class="headerandwelcome">
  7. <img src="../../static/mine/head.png" alt="" class="header" />
  8. <div class="welcome">
  9. <div class="title">欢迎您!</div>
  10. <div class="weltxt">
  11. 189*******12345
  12. <!-- {{ getUserLocalStorageInfo.user.phone }} -->
  13. </div>
  14. </div>
  15. </div>
  16. <div style="border-radius: 2rem; padding: 6rpx 32rpx; background: white">
  17. <div class="labelpage_row">
  18. <img height="44rpx" src="../../static/mine/versionicon.png" alt="" />
  19. <div class="labelpage_text">
  20. <div class="labelpage_name">当前版本号</div>
  21. <div class="labelpage_value">v1.0.1</div>
  22. </div>
  23. </div>
  24. <div v-if="!bindFlag" class="labelpage_row" @click="bindWxId()">
  25. <img height="44rpx" src="../../static/mine/versionicon.png" alt="" />
  26. <div class="labelpage_text">
  27. <div class="labelpage_name">绑定微信账号</div>
  28. <!-- <div class="labelpage_value">v1.0.1</div> -->
  29. </div>
  30. </div>
  31. <div v-if="bindFlag" class="labelpage_row" @click="unbindWxId()">
  32. <img height="44rpx" src="../../static/mine/versionicon.png" alt="" />
  33. <div class="labelpage_text">
  34. <div class="labelpage_name">解绑微信账号</div>
  35. <!-- <div class="labelpage_value">v1.0.1</div> -->
  36. </div>
  37. </div>
  38. <div class="labelpage_row" @click="bindPush()">
  39. <img src="../../static/mine/versionicon.png" alt="" />
  40. <div class="labelpage_text">
  41. <div class="labelpage_name">绑定消息推送</div>
  42. <!-- <div class="labelpage_value">v1.0.1</div> -->
  43. </div>
  44. </div>
  45. <div class="labelpage_row" @click="editPassWord()">
  46. <img height="44rpx" src="../../static/mine/editpassword.png" alt="" />
  47. <div class="labelpage_text">
  48. <div class="labelpage_name">密码修改</div>
  49. <div class="labelpage_value">
  50. <img
  51. src="../../static/mine/youjiantou.png"
  52. height="44rpx"
  53. alt=""
  54. />
  55. </div>
  56. <!-- <div class="border"></div> -->
  57. </div>
  58. </div>
  59. <div class="labelpage_row" @click="outLogin()" style="border: none">
  60. <img height="44rpx" src="../../static/mine/outicon.png" alt="" />
  61. <div class="labelpage_text">
  62. <div class="labelpage_name">退出账号</div>
  63. <div class="labelpage_value">
  64. <img
  65. src="../../static/mine/youjiantou.png"
  66. height="44rpx"
  67. alt=""
  68. />
  69. </div>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </view>
  75. </template>
  76. <script>
  77. import {
  78. getUserInfo,
  79. getUserLocalStorageInfo,
  80. bindWxOpenId,
  81. getWxUserById,
  82. unbindWxId,
  83. } from "@/js_sdk/http";
  84. export default {
  85. data() {
  86. return {
  87. userInfo: {},
  88. bindFlag: 1,
  89. getUserLocalStorageInfo: getUserLocalStorageInfo(),
  90. };
  91. },
  92. onLoad() {
  93. this.getWxUserById();
  94. //option为object类型,会序列化上个页面传递的参数
  95. // this.getUserInfo(); //打印出上个页面传递的参数。
  96. },
  97. methods: {
  98. bindPush() {
  99. let that = this;
  100. // wx.requestSubscribeMessage({
  101. // tmplIds: [
  102. // "HL4csSthBOnLbntYxrs4QE_Nb94Im8lN62t4lvl65XY",
  103. // "Zt7a0xK-gy0aBe0owXmHi98t46n9vxrlkiQwz3ThnfQ",
  104. // "iwqrwmxwjgQrGXFdZ3_kqYXOU52bfREK1cQJGwreKRE",
  105. // ],
  106. // success(res) {
  107. // console.log(res);
  108. // },
  109. // });
  110. wx.getSetting({
  111. withSubscriptions: true,
  112. success(res) {
  113. var itemSettings = res.subscriptionsSetting.itemSettings;
  114. console.log(itemSettings);
  115. if (
  116. itemSettings["HL4csSthBOnLbntYxrs4QE_Nb94Im8lN62t4lvl65XY"] ==
  117. "accept"
  118. ) {
  119. that.$showToast("请勿重复绑定");
  120. }
  121. if (
  122. itemSettings &&
  123. itemSettings["HL4csSthBOnLbntYxrs4QE_Nb94Im8lN62t4lvl65XY"] ==
  124. "accept"
  125. ) {
  126. return false;
  127. } else {
  128. wx.showModal({
  129. title: "授权",
  130. content: "是否进行订阅授权?",
  131. success(res) {
  132. if (res.confirm) {
  133. //获取订阅权限
  134. wx.requestSubscribeMessage({
  135. tmplIds: [
  136. "HL4csSthBOnLbntYxrs4QE_Nb94Im8lN62t4lvl65XY",
  137. "Zt7a0xK-gy0aBe0owXmHi98t46n9vxrlkiQwz3ThnfQ",
  138. "iwqrwmxwjgQrGXFdZ3_kqYXOU52bfREK1cQJGwreKRE",
  139. ],
  140. success: (res) => {
  141. console.log("成功!!!!!!!!!!!!_:", res);
  142. },
  143. fail(err) {
  144. console.log("失败!!!!!!!!!!!!_:", err);
  145. },
  146. });
  147. } else if (res.cancel) {
  148. console.log("用户点击取消");
  149. }
  150. },
  151. });
  152. }
  153. },
  154. });
  155. },
  156. async getWxUserById() {
  157. let { data } = await getWxUserById(getUserLocalStorageInfo().user.id);
  158. console.log("data.bindFlag", data.bindFlag);
  159. this.bindFlag = data.bindFlag ? true : false;
  160. console.log(data);
  161. },
  162. async unbindWxId() {
  163. let data = await unbindWxId({
  164. userId: getUserLocalStorageInfo().user.id,
  165. });
  166. this.getWxUserById();
  167. this.$showToast("解绑成功");
  168. },
  169. bindWxId() {
  170. let _this = this;
  171. wx.login({
  172. success: async function (res) {
  173. if (res.code) {
  174. var code = res.code; // 获取到用户的临时登录凭证 code
  175. // 发送 code 到服务器端
  176. let data = await bindWxOpenId({
  177. code: res.code,
  178. userId: getUserLocalStorageInfo().user.id,
  179. });
  180. console.log(data.errmsg);
  181. if (data.errmsg == "成功") {
  182. // _this.$showToast("绑定成功");
  183. uni.showToast({
  184. title: "绑定成功",
  185. duration: 500,
  186. });
  187. _this.getWxUserById();
  188. } else {
  189. uni.showToast({
  190. title: data.errMsg,
  191. duration: 500,
  192. });
  193. }
  194. console.log(data);
  195. // ...
  196. } else {
  197. console.log("登录失败!" + res.errMsg);
  198. }
  199. },
  200. });
  201. },
  202. outLogin() {
  203. wx.showModal({
  204. title: "提示!",
  205. content: "是否确认退出登录?",
  206. success: function (res) {
  207. if (res.confirm) {
  208. uni.clearStorageSync();
  209. uni.reLaunch({
  210. url: "/pages/login/login",
  211. });
  212. }
  213. },
  214. });
  215. },
  216. editPassWord() {
  217. uni.navigateTo({
  218. url: "/pages/subPackages/password/index",
  219. });
  220. },
  221. async getUserInfo() {
  222. let data = await getUserInfo();
  223. this.userInfo = data.data;
  224. },
  225. },
  226. };
  227. </script>
  228. <style scoped lang="scss">
  229. .mine {
  230. .welcome {
  231. margin-left: 32rpx;
  232. .title {
  233. font-weight: bold;
  234. font-size: 48rpx;
  235. color: #18172a;
  236. }
  237. }
  238. .banner {
  239. width: 100%;
  240. height: 100vh;
  241. position: absolute;
  242. z-index: 1;
  243. }
  244. .headerandwelcome {
  245. display: flex;
  246. align-items: center;
  247. margin-bottom: 60rpx;
  248. height: 120rpx;
  249. width: 100%;
  250. }
  251. .title-mine {
  252. position: absolute;
  253. top: 110rpx;
  254. width: 100%;
  255. text-align: center;
  256. color: #18172a;
  257. font-weight: 400;
  258. font-size: 36rpx;
  259. }
  260. .info {
  261. position: absolute;
  262. top: 260rpx;
  263. width: calc(100% - 64rpx);
  264. margin: 0 32rpx 0 32rpx;
  265. z-index: 2;
  266. }
  267. .header {
  268. height: 120rpx;
  269. width: 120rpx;
  270. margin-left: 15rpx;
  271. border-radius: 50%;
  272. }
  273. .weltxt {
  274. font-weight: 400;
  275. font-size: 32rpx;
  276. color: #333333;
  277. margin-top: 12rpx;
  278. }
  279. .labelpage {
  280. // width: calc(100% - 96rpx);
  281. // height: 308rpx;
  282. // padding: 96rpx 48rpx;
  283. border-radius: 12rpx 12rpx 12rpx 12rpx;
  284. background: #ffffff;
  285. }
  286. .labelpage_row {
  287. border-bottom: 1px solid rgba(230, 230, 230, 1);
  288. display: flex;
  289. // width: 686rpx;
  290. padding: 32rpx;
  291. padding-left: 0;
  292. padding-right: 0;
  293. box-sizing: border-box;
  294. background: white;
  295. // padding: 32rpx;
  296. // height: 83rpx;
  297. // width: 100%;
  298. img {
  299. height: 44rpx;
  300. width: 44rpx;
  301. margin-right: 24rpx;
  302. }
  303. .labelpage_text {
  304. display: flex;
  305. justify-content: space-between;
  306. // height: 44rpx;
  307. align-items: center;
  308. width: 580rpx;
  309. // line-height: 44rpx;
  310. }
  311. .labelpage_name {
  312. // height: 44rpx;
  313. // line-height: 44rpx;
  314. // width: 440rpx;
  315. font-size: 28rpx;
  316. color: #081640;
  317. font-weight: 400;
  318. }
  319. .labelpage_value {
  320. height: 44rpx;
  321. // line-height: 44rpx;
  322. float: right;
  323. font-size: 28rpx;
  324. color: #1d18bc;
  325. font-weight: 400;
  326. }
  327. // .border {
  328. // margin-top: 48rpx;
  329. // width: 100%;
  330. // height: 1rpx;
  331. // border-bottom: 2rpx solid #e6e6e6;
  332. // }
  333. }
  334. }
  335. </style>