cm-ross-popup.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <template name="cm-parameter">
  2. <!-- 相关规格 -->
  3. <tui-bottom-popup :radius="false" :show="popupShow">
  4. <view class="tui-popup-box clearfix">
  5. <view class="tui-popup-close" @click.stop="hidePopup">
  6. <text class="iconfont icon-iconfontguanbi"></text>
  7. </view>
  8. <view class="tui-popup-main" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
  9. <view class="tui-popup-from">
  10. <input
  11. class="input"
  12. type="text"
  13. v-model="consultParams.consultName"
  14. @input="handleInputName"
  15. placeholder="请输入名字"
  16. placeholder-style="color:#FFFFFF;"
  17. maxlength="10"
  18. />
  19. </view>
  20. <view class="tui-popup-from none">
  21. <input
  22. class="input"
  23. type="text"
  24. v-model="consultParams.consultMobile"
  25. @input="handleInputPhone"
  26. placeholder="请输入手机号"
  27. placeholder-style="color:#FFFFFF;"
  28. maxlength="11"
  29. />
  30. </view>
  31. </view>
  32. <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
  33. <view class="tui-modal-flex">
  34. <button class="tui-modal-button" :class="isDisabled ? 'disabled' : ''" @click="handleSubmit">
  35. 提交
  36. </button>
  37. </view>
  38. <view class="tui-modal-text">
  39. <view class="tui-modal-left" @click.stop="this.$api.navigateTo('/pages/login/register-select')">立即注册</view>
  40. <view class="tui-modal-right" @click.stop="this.$api.navigateTo('/pages/login/login')">登录</view>
  41. </view>
  42. </view>
  43. </view>
  44. </tui-bottom-popup>
  45. </template>
  46. <script>
  47. import { mapState, mapMutations } from 'vuex'
  48. export default {
  49. name: 'cm-ross-popup',
  50. props: {
  51. popupShow: {
  52. type: Boolean,
  53. default: true
  54. }
  55. },
  56. data() {
  57. return {
  58. userId: 0, // 用户Id
  59. consultParams: {
  60. ip:'',
  61. createTime:'',
  62. consultMobile: '',
  63. consultName: '',
  64. isClick:1
  65. },
  66. isDisabled: true
  67. }
  68. },
  69. created() {
  70. this.initData()
  71. },
  72. computed: {
  73. ...mapState(['hasLogin'])
  74. },
  75. methods: {
  76. async initData(data) {
  77. const userInfo = await this.$api.getStorage()
  78. this.userId = userInfo.userId ? userInfo.userId : 0
  79. },
  80. handleInputName(e) {
  81. this.consultParams.name = e.detail.value
  82. this.handldeCheckInput()
  83. },
  84. handleInputPhone(e) {
  85. this.consultParams.phone = e.detail.value
  86. this.handldeCheckInput()
  87. },
  88. handldeCheckInput() {
  89. if (this.consultParams.name !== '' && this.consultParams.phone !== '') {
  90. this.isDisabled = false
  91. } else {
  92. this.isDisabled = true
  93. }
  94. },
  95. handleSubmit() {
  96. // 提交联系人信息
  97. if (this.isDisabled) {
  98. return
  99. }
  100. this.userInformationInsertRoos(this.consultParams)
  101. },
  102. userInformationInsertRoos(params){
  103. // 游客关闭广告弹窗
  104. this.UserService.userInformationInsertRoos(params)
  105. .then(response => {
  106. this.$parent.showRossHtml = false
  107. })
  108. .catch(error => {
  109. console.log('游客关闭广告弹窗失败~')
  110. })
  111. },
  112. hidePopup() {
  113. this.userInformationInsertRoos(this.consultParams)
  114. }
  115. }
  116. }
  117. </script>
  118. <style lang="scss">
  119. .tui-popup-box {
  120. width: 100%;
  121. height: 852rpx;
  122. background: url(https://static.caimei365.com/app/img/ross/ross-bg@3x.png) no-repeat;
  123. background-size: cover;
  124. padding: 330rpx 75rpx 0 75rpx;
  125. box-sizing: border-box;
  126. .tui-popup-close{
  127. width: 80rpx;
  128. height: 80rpx;
  129. line-height: 80rpx;
  130. text-align: center;
  131. position: absolute;
  132. top: 0;
  133. right: 0;
  134. .icon-iconfontguanbi{
  135. color: #ffffff;
  136. font-size: 40rpx;
  137. }
  138. }
  139. .tui-popup-main{
  140. width: 100%;
  141. height: auto;
  142. .tui-popup-from{
  143. width: 100%;
  144. height: 80rpx;
  145. margin-bottom: 30rpx;
  146. &.none{
  147. margin-bottom: 0;
  148. }
  149. .input{
  150. width: 100%;
  151. height: 80rpx;
  152. box-sizing: border-box;
  153. line-height: 80rpx;
  154. font-size: 28rpx;
  155. color: #ffffff;
  156. border-bottom: 1px solid #ffffff;
  157. }
  158. }
  159. }
  160. }
  161. .tui-popup-btn {
  162. width: 100%;
  163. float: left;
  164. .tui-modal-flex {
  165. width: 100%;
  166. height: 84rpx;
  167. margin-top: 40rpx;
  168. display: flex;
  169. .tui-modal-button {
  170. flex: 1;
  171. line-height: 84rpx;
  172. font-size: $font-size-28;
  173. text-align: center;
  174. border-radius: 42rpx;
  175. padding: 0;
  176. margin: 0 15rpx;
  177. box-sizing: border-box;
  178. background: #202020;
  179. color: #ffffff;
  180. &.disabled {
  181. background: #cbcbcb;
  182. }
  183. }
  184. }
  185. .tui-modal-text{
  186. width: 100%;
  187. height: 68rpx;
  188. box-sizing: border-box;
  189. padding: 0 30rpx;
  190. .tui-modal-left{
  191. float: left;
  192. line-height: 68rpx;
  193. font-size: 28rpx;
  194. color: #ffffff;
  195. }
  196. .tui-modal-right{
  197. float: right;
  198. line-height: 68rpx;
  199. font-size: 28rpx;
  200. color: #ffffff;
  201. }
  202. }
  203. }
  204. </style>