model.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
  1. <template>
  2. <view>
  3. <view class="js_dialog" :class="is_show?'showCont':''" id="iosDialog2">
  4. <view class="weui-mask" @click="hideModal"></view>
  5. <view class="weui-dialog">
  6. <view class="weui-dialog__hd">
  7. <text class="weui-dialog__title">提示</text>
  8. </view>
  9. <view class="weui-dialog__bd">{{obj.content}}</view>
  10. <view class="weui-dialog__ft">
  11. <view hover-class="weui-dialog__btn_cl" @click="hideModal"
  12. class="weui-dialog__btn weui-dialog__btn_default">
  13. {{cancelText}}
  14. </view>
  15. <button hover-class="weui-dialog__btn_cl" :data-tel="mobile" open-type="getPhoneNumber"
  16. @getphonenumber="onGetphoneNumber" class="weui-dialog__btn weui-dialog__btn_primary">
  17. {{confirmText}}
  18. </button>
  19. </view>
  20. </view>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. import {
  26. mapState,
  27. mapMutations
  28. } from 'vuex'
  29. export default {
  30. props: {
  31. obj: {
  32. type: Object,
  33. default: {
  34. content: null,
  35. href: null,
  36. showCancel: false,
  37. }
  38. },
  39. title: {
  40. type: String,
  41. default: "温馨提示"
  42. },
  43. cancelText: {
  44. type: String,
  45. default: "取消"
  46. },
  47. confirmText: {
  48. type: String,
  49. default: "马上完善"
  50. },
  51. },
  52. computed: {
  53. ...mapState(['is_show'])
  54. },
  55. data() {
  56. return {
  57. is_hide: false,
  58. }
  59. },
  60. methods: {
  61. showModal(e) {
  62. this.$store.state.is_show = false;
  63. },
  64. hideModal(e) {
  65. this.$store.state.is_show = false;
  66. },
  67. // 微信成为会员
  68. onGetphoneNumber(e) {
  69. let userInfo=uni.getStorageSync("userInfo"),
  70. store_id=uni.getStorageSync("store_id");
  71. if (e.detail.errMsg == "getPhoneNumber:ok") {
  72. this.$http.request('xcx/Jiemi', {
  73. id:userInfo.id,
  74. data: e.detail.encryptedData,
  75. iv: e.detail.iv,
  76. sessionKey: uni.getStorageSync('user_xcx_info').session_key,
  77. store_id: store_id,
  78. }, "", "", true).then(res => {
  79. this.phoneNumber = res.data.phoneNumber;
  80. uni.setStorageSync('phone', res.data.phoneNumber);
  81. uni.showModal({
  82. title: '授权成功',
  83. content: '享受更多优惠!',
  84. showCancel: false,
  85. cancelText: '',
  86. confirmText: '确定',
  87. success: res => {
  88. let subscribe = uni.getStorageSync('balance_subscribe');
  89. this.$store.state.is_show = false;
  90. uni.requestSubscribeMessage({
  91. tmplIds: [subscribe.member_tid],
  92. success: (r) => {
  93. },
  94. complete: (r) => {
  95. this.menber_info();
  96. }
  97. })
  98. },
  99. fail: () => {},
  100. complete: () => {}
  101. });
  102. })
  103. } else {
  104. uni.showToast({
  105. title: "授权失败,请重新授权",
  106. icon: 'none'
  107. })
  108. }
  109. },
  110. // 成为会员,更新用户信息
  111. menber_info() {
  112. let userInfo = uni.getStorageSync('userInfo');
  113. this.$http.request('xcx/userinfo', {
  114. id: userInfo.id,
  115. }, "", "", true).then(res => {
  116. if (res.code == "200"&&res.data.mobile) {
  117. this.$store.commit("SET_USER_INFO",res.data)
  118. // uni.setStorageSync('userInfo', res.data);
  119. // uni.switchTab({
  120. // url:"../pages/my/my"
  121. // })
  122. console.log(411111)
  123. this.$emit("success",res.data);
  124. }
  125. }).catch((res) => {
  126. uni.showToast({
  127. title: res.message,
  128. icon: 'none'
  129. })
  130. });
  131. },
  132. },
  133. }
  134. </script>
  135. <style>
  136. .iosDialog2 {
  137. position: fixed;
  138. left: 0;
  139. top: 0;
  140. background-color: rgba(0, 0, 0, 0.5);
  141. width: 100%;
  142. height: 100%;
  143. z-index: 999;
  144. }
  145. .js_dialog {
  146. display: none;
  147. }
  148. /*定义样式*/
  149. page .showCont {
  150. display: block;
  151. /* animation: showPopUp 0.5s; */
  152. /* animation-fill-mode: forwards; */
  153. }
  154. page .hiddenCont {
  155. display: none;
  156. /* animation: hiddenPopUp 0.5s; */
  157. /* animation-fill-mode: forwards; */
  158. }
  159. /*定义动画*/
  160. @keyframes showPopUp {
  161. 0% {
  162. opacity: 0;
  163. z-index: 999;
  164. }
  165. 100% {
  166. opacity: 1;
  167. z-index: 999;
  168. }
  169. }
  170. @keyframes hiddenPopUp {
  171. 0% {
  172. opacity: 0;
  173. z-index: 999;
  174. }
  175. 100% {
  176. opacity: 1;
  177. display: none;
  178. z-index: 999;
  179. }
  180. }
  181. .weui-mask {
  182. position: fixed;
  183. top: 0;
  184. right: 0;
  185. left: 0;
  186. bottom: 0;
  187. background: rgba(0, 0, 0, 0.6);
  188. z-index: 999;
  189. }
  190. .weui-dialog {
  191. position: fixed;
  192. width: 600rpx;
  193. margin: 0 auto;
  194. top: 50%;
  195. left: 16px;
  196. right: 16px;
  197. -webkit-transform: translate(0, -50%);
  198. transform: translate(0, -50%);
  199. background-color: #fff;
  200. text-align: center;
  201. border-radius: 12px;
  202. overflow: hidden;
  203. display: -webkit-box;
  204. display: -webkit-flex;
  205. display: flex;
  206. -webkit-flex-direction: column;
  207. -webkit-box-orient: vertical;
  208. -webkit-box-direction: normal;
  209. flex-direction: column;
  210. max-height: 90%;
  211. z-index: 999;
  212. }
  213. .weui-dialog__hd {
  214. padding: 64rpx 48rpx 32rpx;
  215. }
  216. .weui-dialog__title {
  217. font-weight: 700;
  218. font-size: 34rrpx;
  219. line-height: 1.4;
  220. }
  221. .weui-dialog__bd:first-child {
  222. min-height: 40px;
  223. padding: 32px 24px 0;
  224. font-weight: 700;
  225. color: rgba(0, 0, 0, 0.9);
  226. display: -webkit-box;
  227. display: -webkit-flex;
  228. display: flex;
  229. -webkit-flex-direction: column;
  230. -webkit-box-orient: vertical;
  231. -webkit-box-direction: normal;
  232. flex-direction: column;
  233. -webkit-box-pack: center;
  234. -webkit-justify-content: center;
  235. justify-content: center;
  236. }
  237. .weui-dialog__bd {
  238. /* overflow-y: auto; */
  239. -webkit-overflow-scrolling: touch;
  240. padding: 0 24px;
  241. margin-bottom: 32px;
  242. font-size: 17px;
  243. line-height: 1.4;
  244. word-wrap: break-word;
  245. -webkit-hyphens: auto;
  246. hyphens: auto;
  247. color: rgba(0, 0, 0, 0.5);
  248. }
  249. .weui-dialog__ft {
  250. position: relative;
  251. line-height: 56px;
  252. min-height: 56px;
  253. font-size: 17px;
  254. display: -webkit-box;
  255. display: -webkit-flex;
  256. display: flex;
  257. }
  258. .weui-dialog__btn {
  259. display: block;
  260. -webkit-box-flex: 1;
  261. -webkit-flex: 1;
  262. flex: 1;
  263. color: #576b95;
  264. font-weight: 700;
  265. text-decoration: none;
  266. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  267. position: relative;
  268. }
  269. .weui-dialog__btn:after {
  270. content: " ";
  271. position: absolute;
  272. left: 0;
  273. top: 0;
  274. width: 1px;
  275. bottom: 0;
  276. border-left: 1px solid rgba(0, 0, 0, 0.1);
  277. border-left: 1px solid
  278. /* var(--weui-DIALOG-LINE-COLOR) */
  279. ;
  280. color: rgba(0, 0, 0, 0.1);
  281. /* color: var(--weui-DIALOG-LINE-COLOR); */
  282. -webkit-transform-origin: 0 0;
  283. transform-origin: 0 0;
  284. -webkit-transform: scaleX(0.5);
  285. transform: scaleX(0.5);
  286. }
  287. .weui-dialog__ft:after {
  288. content: " ";
  289. position: absolute;
  290. left: 0;
  291. top: 0;
  292. right: 0;
  293. height: 1px;
  294. border-top: 1px solid rgba(0, 0, 0, 0.1);
  295. color: rgba(0, 0, 0, 0.1);
  296. -webkit-transform-origin: 0 0;
  297. transform-origin: 0 0;
  298. -webkit-transform: scaleY(0.5);
  299. transform: scaleY(0.5);
  300. }
  301. .weui-dialog__btn_default {
  302. color: rgba(0, 0, 0, 0.9);
  303. }
  304. .weui-dialog__btn_cl {
  305. background: #F1F1F1;
  306. }
  307. /* 去除button默认样式 */
  308. .weui-dialog__ft button::after {
  309. border: none;
  310. }
  311. .weui-dialog__ft button {
  312. background-color: transparent;
  313. padding-left: 0;
  314. padding-right: 0;
  315. line-height: inherit;
  316. }
  317. .weui-dialog__ft button {
  318. border-radius: 0;
  319. }
  320. </style>