v-button.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <template>
  2. <view class="">
  3. <uni-popup ref="popup" type="center" @maskClick="maskClick" :mask-click="false" :is-mask-click='false'>
  4. <view class="get-menber-pop">
  5. <view class="title">
  6. <view class="flex flex-y-center flex-x-center">温馨提示</view>
  7. </view>
  8. <view class="content">
  9. <view class="flex flex-y-center flex-x-center">完善资料享有更多优惠,是否完善</view>
  10. </view>
  11. <view class="btm-block flex-y-center">
  12. <button class="btn flex-grow-1 flex-center" @click="hideGetPhone">继续下单</button>
  13. <view class="line"></view>
  14. <!-- #ifdef MP-WEIXIN -->
  15. <button class="btn flex-grow-1 flex-center" open-type="getPhoneNumber"
  16. @getphonenumber="onGetphoneNumber" :style="{color:setColor}">马上完善</button>
  17. <!-- #endif -->
  18. <!-- #ifdef MP-ALIPAY -->
  19. <button @click="onGetphone"
  20. class="btn flex-grow-1 flex-center" :style="{color:setColor}">马上完善</button>
  21. <!-- #endif -->
  22. </view>
  23. </view>
  24. </uni-popup>
  25. <Vphone :getPhonePop="getPhonePop" @close="setClose"></Vphone>
  26. </view>
  27. </template>
  28. <script>
  29. import {
  30. mapState,
  31. mapMutations
  32. } from 'vuex'
  33. let hideLoading = true;
  34. import Vphone from '@/components/v-phone/v-phone.vue';
  35. export default {
  36. props: {
  37. getMenberPop: {
  38. type: Boolean,
  39. default: false
  40. },
  41. },
  42. watch: {
  43. getMenberPop: {
  44. handler(newVal) {
  45. console.log(newVal)
  46. if (newVal) {
  47. this.$refs.popup.open();
  48. }
  49. },
  50. }
  51. },
  52. data() {
  53. return {
  54. getPhonePop: false
  55. }
  56. },
  57. components: {
  58. Vphone
  59. },
  60. computed: {
  61. ...mapState(['systemInfo', 'setColor', 'store_id', 'userInfo', 'teen_index', 'address'])
  62. },
  63. methods: {
  64. maskClick(){
  65. this.$emit('maskClick',false)
  66. },
  67. hideGetPhone(){
  68. this.$emit('modelGetClose',false)
  69. this.$refs.popup.close();
  70. },
  71. onGetphoneNumber(e) {
  72. let pages = getCurrentPages();
  73. let { route, options } = pages[pages.length-1];
  74. // #ifdef MP-WEIXIN
  75. if (e.detail.errMsg == "getPhoneNumber:ok") {
  76. this.$http.request('xcx/Jiemi', {
  77. id: this.userInfo.id,
  78. data: e.detail.encryptedData,
  79. iv: e.detail.iv,
  80. sessionKey: uni.getStorageSync('user_xcx_info').session_key,
  81. store_id: this.store_id,
  82. }, "", "", hideLoading).then(res => {
  83. this.phoneNumber = res.data.phoneNumber;
  84. uni.setStorageSync('phone', res.data.phoneNumber);
  85. uni.showToast({
  86. title: '授权成功',
  87. icon: 'none'
  88. })
  89. setTimeout(()=>{
  90. this.$http.request('xcx/userinfo', {
  91. id: this.userInfo.id,
  92. }, "", "", hideLoading).then(res => {
  93. if (res.code == "200") {
  94. this.$store.commit('SET_USER_INFO',res.data)
  95. if (route =="pages/creatOrder/creatOrder") {
  96. uni.redirectTo({
  97. url: `/pages/creatOrder/creatOrder?teen_index=${options.teen_index}&eat_people=${options.eat_people}`
  98. })
  99. }
  100. }
  101. }).catch((res) => {
  102. uni.showToast({
  103. title: res.message,
  104. icon: 'none'
  105. })
  106. });
  107. },1500)
  108. })
  109. } else {
  110. uni.showToast({
  111. title: "授权失败,请重新授权",
  112. icon: 'none'
  113. })
  114. }
  115. // #endif
  116. },
  117. // 子组件传参
  118. setClose(e) {
  119. this.getPhonePop = e;
  120. },
  121. // 开启会员弹窗
  122. onGetphone(e) {
  123. if (this.userInfo.mobile) {
  124. uni.showToast({
  125. title: "您已经完善过会员信息了,无需重复操作!",
  126. icon: 'none'
  127. })
  128. return
  129. }
  130. this.getPhonePop = true;
  131. },
  132. },
  133. }
  134. </script>
  135. <style scoped lang="scss">
  136. .get-menber-pop{
  137. background: #FFFFFF;
  138. font-size: 30rpx;
  139. width: 560rpx;
  140. border-radius: 8rpx;
  141. box-shadow: 0 1px 2px #ccc;
  142. .title{
  143. text-align: center;
  144. font-size: 28rpx;
  145. padding: 30rpx 0;
  146. }
  147. .content{
  148. padding-bottom: 55rpx;
  149. padding-top: 29rpx;
  150. }
  151. .btm-block{
  152. font-size: 28rpx;
  153. height: 90rpx;
  154. border-top: 1rpx solid #f1f1f1;
  155. .line{
  156. width: 1rpx;
  157. height: 100%;
  158. background: #F1F1F1;
  159. }
  160. .btn{
  161. font-size: 30rpx;
  162. width: 50%;
  163. color: #999;
  164. }
  165. button::after {
  166. border: none;
  167. }
  168. button {
  169. background: none !important;
  170. height: auto !important;
  171. border: none !important;
  172. border-radius: 0 !important;
  173. font-family: inherit !important;
  174. // color: inherit !important;
  175. text-align: inherit;
  176. }
  177. }
  178. }
  179. .sub-btn {
  180. // width: 200rpx;
  181. // height: 100rpx;
  182. // background-color: $theme-color;
  183. // color: #fff;
  184. // font-weight: bold;
  185. // line-height: 100rpx;
  186. // text-align: center;
  187. // font-size: 32rpx;
  188. }
  189. </style>