swiper-news-subscription.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <template>
  2. <!-- 消息订阅组件 -->
  3. <view class="message_subscription" style="color: #FFFFFF;">
  4. <u-cell-group>
  5. <u-cell title="审批结果" @click="judgementMessageSwitch('qgp7iG6xTRm4JewW8N46nXJT-E6xorFn2hZ2V7gD8wY')"
  6. :isLink="true">
  7. </u-cell>
  8. <u-cell title="待审批" @click="judgementMessageSwitch('Toomi1XWGMzNxOCoPX1rRNj7gLuykgszEzUstXaAp9c')"
  9. :isLink="true">
  10. </u-cell>
  11. <u-cell title="预定提醒" @click="judgementMessageSwitch('2nFR6OXrC7d6w3ZkqaLsKjXYBQB3k78xzRvQoPacfKA')"
  12. :isLink="true">
  13. </u-cell>
  14. <u-cell title="工资单通知" @click="judgementMessageSwitch('SSsS8EV9dfv-CC7-w_JUKYnfEuWm6FiGL_eED8hf80Q')"
  15. :isLink="true">
  16. </u-cell>
  17. </u-cell-group>
  18. <!-- <u-button @click="judgementMessageSwitch('qgp7iG6xTRm4JewW8N46nXJT-E6xorFn2hZ2V7gD8wY')"
  19. style="margin: 20px;background-color: rgb(55,186,189);">审批结果</u-button> -->
  20. <u-popup v-model="showOpenSettingDialog" mode="center" width="520rpx" :mask-close-able="false" height="300rpx"
  21. border-radius="18">
  22. <div class="mock-dialog">
  23. <div class="mock-dialog-content">
  24. <div class="mock-dialog-title">提示</div>
  25. <div class="mock-dialog-text">
  26. {{tipsContent}}
  27. </div>
  28. </div>
  29. <div class="mock-dialog-button">
  30. <div class="color-gray" @click="dontOpenSetting">{{buttonCancelText}}</div>
  31. <div class="color-blue" @click="openSetting">{{buttonConfirmText}}</div>
  32. </div>
  33. </div>
  34. </u-popup>
  35. </view>
  36. </template>
  37. <script>
  38. export default {
  39. name: 'messageSubscription',
  40. components: {},
  41. data() {
  42. return {
  43. showOpenSettingDialog: false, // 授权询问弹框,uview
  44. tipsContent: '为了及时获取订单状态,您是否想接收订单状态的消息提醒?', // 弹框提示内容,
  45. buttonConfirmText: '去开启消息提醒',
  46. buttonCancelText: '不需要提醒',
  47. tmplId: []
  48. }
  49. },
  50. methods: {
  51. // 判断消息订阅总开关是否打开
  52. judgementMessageSwitch(flag) {
  53. let that = this
  54. uni.getSetting({
  55. withSubscriptions: true,
  56. success(res) {
  57. console.log(res)
  58. if (!res.subscriptionsSetting.mainSwitch) { // 订阅消息的总开关,如果是关着的,引导用户去打开
  59. that.showOpenSettingDialog = true
  60. } else { // 如果开着,则继续向下打开弹窗,获取用户授权
  61. that.messageSubscription(flag)
  62. }
  63. },
  64. fail() {
  65. that.messageSubscription(flag) // 如果失败,则继续向下打开弹窗,获取用户授权
  66. }
  67. })
  68. },
  69. // 弹窗点订阅,开启消息订阅提醒
  70. openSetting() {
  71. if (this.buttonConfirmText == '确定') {
  72. this.messageSubscription()
  73. return
  74. }
  75. var that = this
  76. uni.openSetting({
  77. withSubscriptions: true,
  78. complete(res) {
  79. uni.getSetting({
  80. withSubscriptions: true,
  81. success(res) {
  82. if (res.subscriptionsSetting.mainSwitch) { // 订阅消息的总开关,如果是开着的
  83. that.tipsContent = '再次点击确定,弹出可订阅列表进行订阅'
  84. that.buttonCancelText = '取消'
  85. that.buttonConfirmText = '确定'
  86. } else {
  87. that.showOpenSettingDialog = false;
  88. }
  89. }
  90. })
  91. }
  92. })
  93. },
  94. getUser() {
  95. uni.getUserProfile({
  96. desc: "获取你的昵称、头像信息", //必填项,声明获取用户个人信息后的用途,不超过30个字符
  97. success: (res) => {
  98. const userInfo = res.userInfo;
  99. console.log("用户基本信息", userInfo);
  100. },
  101. fail: (res) => {
  102. //拒绝授权
  103. wx.showToast({
  104. title: "获取失败",
  105. icon: "error",
  106. duration: 2000,
  107. });
  108. return;
  109. },
  110. });
  111. },
  112. // 弹窗点不订阅
  113. dontOpenSetting() {
  114. this.showOpenSettingDialog = false;
  115. },
  116. // 订阅申请弹出,只允许点击弹出
  117. messageSubscription(text) {
  118. let that = this
  119. that.showOpenSettingDialog = false;
  120. let tmplId = [text]
  121. // let tmplId = ['qgp7iG6xTRm4JewW8N46nXJT-E6xorFn2hZ2V7gD8wY']
  122. // 'Toomi1XWGMzNxOCoPX1rRNj7gLuykgszEzUstXaAp9c', 'CdLBnE4unNbHlQikYoGHehagWZAK8gSGu52QCbAesLIQUE'
  123. // 模板ID,去小程序后台管理开一个,写进数组里,官方文档也有介绍
  124. uni.requestSubscribeMessage({
  125. tmplIds: tmplId,
  126. success(res) {}
  127. })
  128. }
  129. }
  130. }
  131. </script>
  132. <style lang="scss" scoped></style>