activity-entry.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
  1. <template>
  2. <view class="container cashier">
  3. <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true" :loadingType="5" />
  4. <template v-else>
  5. <!-- <custom :navbar-data='nvabarData' /> -->
  6. <view class="container-banner" :style="{ paddingTop:CustomBar + 115 +'px' }">
  7. <view class="container-title">{{ voteTitle }}</view>
  8. <view class="login-input">
  9. <input type="text"
  10. v-model="params.ticket"
  11. maxlength="20"
  12. disabled="true"
  13. class="input"
  14. />
  15. </view>
  16. <view class="login-input">
  17. <input type="text"
  18. v-model="params.name"
  19. maxlength="6"
  20. class="input"
  21. placeholder="您的姓名"
  22. :disabled="!isBundled"
  23. />
  24. </view>
  25. <view class="login-input">
  26. <input type="text"
  27. v-model="params.mobile"
  28. maxlength="11"
  29. class="input"
  30. placeholder="您的联系电话"
  31. :disabled="!isBundled"
  32. />
  33. </view>
  34. <view class="login-input code" v-show="isBundled">
  35. <input type="text"
  36. v-model="params.smsCode"
  37. maxlength="6"
  38. class="input code"
  39. placeholder="手机验证码"
  40. />
  41. <view class="code-btn" :class="[isMobileDisabled ? 'disabled' : '']">
  42. <button
  43. class="code-button"
  44. type="button"
  45. @click.stop="getMobileCodeFn"
  46. :disabled="isMobileDisabled"
  47. >
  48. {{ mobileCodeText }}
  49. </button>
  50. </view>
  51. </view>
  52. <view class="login-input">
  53. <input type="text"
  54. v-model="params.idCard"
  55. maxlength="20"
  56. class="input"
  57. placeholder="证件号码(身份证/港澳台通行证/护照)"
  58. :disabled="!isBundled"
  59. />
  60. </view>
  61. <view class="login-input">
  62. <input type="text"
  63. v-model="params.work"
  64. maxlength="10"
  65. class="input"
  66. placeholder="您的职业"
  67. :disabled="!isBundled"
  68. />
  69. </view>
  70. <view class="login-btn" v-show="isBundled" @click="handleEntry">激活门票</view>
  71. <view class="login-text">注:</view>
  72. <view class="login-text">1、门票绑定的证件号码是作为进入大会会场的凭证。</view>
  73. <view class="login-text">2、到采美专区签到打卡,可领取超值礼包,更多惊喜和福利等你来解琐。</view>
  74. </view>
  75. </template>
  76. <!-- 提示弹窗 -->
  77. <tui-modal
  78. :show="modal"
  79. @click="handleClick"
  80. :content="contentModalText"
  81. :button="modalButton"
  82. color="#333"
  83. :size="32"
  84. shape="circle"
  85. :maskClosable="false"
  86. />
  87. <activity-model :show="isShowModel" @cancel="hideModel"/>
  88. </view>
  89. </template>
  90. <script>
  91. import { mapState, mapMutations } from 'vuex'
  92. import authorize from '@/common/config/authorize.js'
  93. import wxLogin from '@/common/config/wxLogin.js'
  94. import activityModel from './components/activity-model.vue'
  95. export default{
  96. components:{
  97. activityModel
  98. },
  99. data(){
  100. return{
  101. nvabarData: { //顶部自定义导航
  102. haveBack:false,
  103. haveHome:true,
  104. showCapsule:1, // 是否显示左上角图标 1表示显示 0表示不显示,
  105. showSearch: 0,
  106. title: '', // 导航栏 中间的标题
  107. textLeft:this.$store.state.isIphone
  108. },
  109. isIphoneX:this.$store.state.isIphoneX,
  110. CustomBar:this.CustomBar,// 顶部导航栏高度
  111. skeletonShow:true,
  112. isShowModel:false,
  113. params:{
  114. unionId:'',
  115. name:'',
  116. idCard:'',
  117. ticket:'',
  118. mobile:'',
  119. smsCode:'',
  120. work:'',
  121. userId:''
  122. },
  123. voteTitle:'',
  124. modal: false,
  125. contentModalText: '', //操作文字提示语句
  126. modalButton: [
  127. {
  128. text: '联系客服',
  129. type: 'gray',
  130. plain: true //是否空心
  131. },
  132. {
  133. text: '确认激活',
  134. customStyle: {
  135. color: '#fff',
  136. bgColor: '#e10078'
  137. },
  138. plain: false
  139. }
  140. ],
  141. modalType:0,
  142. isMobileDisabled: false, //手机验证码按钮控制
  143. mobilCount: '', //倒计时
  144. mobileCodeText: '获取验证码',
  145. mobilTime: null,
  146. isBundled:true
  147. }
  148. },
  149. onLoad(option) {
  150. wxLogin.wxLoginAuthorize()
  151. setTimeout(()=>{
  152. this.initData(option)
  153. },2000)
  154. },
  155. computed: {
  156. ...mapState(['hasLogin', 'userInfo', ])
  157. },
  158. methods:{
  159. // 初始化
  160. async initData(option) {
  161. this.$util.msg('活动已结束', 2000)
  162. setTimeout(() => {
  163. this.$api.switchTabTo('/pages/tabBar/home/index')
  164. }, 2000)
  165. // const userInfo = await this.$api.getStorage()
  166. // this.params.ticket = option.ticket
  167. // this.voteTitle = option.voteType*1 === 1 ? '大会通票' : '学术套票'
  168. // console.log('userInfo',userInfo)
  169. // if(userInfo.userId){
  170. // this.params.userId = userInfo.userId
  171. // this.contentModalText = `您的采美帐号资料为【${userInfo.name}】,请确认并激活!`
  172. // }
  173. // this.getTicketDetails({ ticket: option.ticket ,userId: this.params.userId})
  174. },
  175. // 查询门票信息
  176. async getTicketDetails(params){
  177. try{
  178. const res = await this.UserService.getTicketDetails(params)
  179. const data = res.data
  180. if(data && data.ticketFlag === 1){
  181. this.modalType = 1
  182. this.contentModalText = '您已激活过门票,请勿重复激活!'
  183. this.modalButton = [
  184. {
  185. text: '知道了',
  186. customStyle: {
  187. color: '#fff',
  188. bgColor: '#e10078'
  189. },
  190. plain: false
  191. }
  192. ]
  193. this.modal = true
  194. }else{
  195. if(data.userId){
  196. this.isBundled = false
  197. this.params = {...this.params ,...data}
  198. this.params.idCard = data.idCard.substring(0, 4) + '**********' + data.idCard.substring(data.idCard.length - 4)
  199. this.params.name = this.exceptSurname(data.name)
  200. this.params.mobile = this.excePhoneNumber(data.mobile)
  201. }else{
  202. this.isBundled = true
  203. }
  204. this.skeletonShow = false
  205. }
  206. }catch(error){
  207. console.log('获取门票详情异常~')
  208. }
  209. },
  210. //点击绑定
  211. handleEntry(){
  212. if(!this.params.name){
  213. this.$util.msg('请输入您的姓名~', 2000)
  214. return
  215. }
  216. if(!this.params.idCard){
  217. this.$util.msg('请输入您的证件号码~', 2000)
  218. return
  219. }
  220. if(!this.params.mobile){
  221. this.$util.msg('请输入您的联系电话~', 2000)
  222. return
  223. }
  224. if (this.params.smsCode == '') {
  225. this.$util.msg('请输入手机验证码', 2000)
  226. return
  227. }
  228. if(!this.params.work){
  229. this.$util.msg('请输入您的职业~', 2000)
  230. return
  231. }
  232. if(this.hasLogin){
  233. this.modal = true
  234. }else{
  235. this.params.unionId = uni.getStorageSync('unionId')
  236. this.userTicketCheck({ mobile:this.params.mobile, smsCode:this.params.smsCode })
  237. }
  238. },
  239. // 校验
  240. async userTicketCheck(params){
  241. try{
  242. const res = await this.UserService.userTicketCheck(params)
  243. if(res.data && res.data.userId){
  244. this.params.userId = res.data.userId
  245. this.contentModalText = `您的采美帐号资料为【${userInfo.name}】,请确认并激活!`
  246. this.modal = true
  247. }else{
  248. this.userTicketBind(this.params)
  249. }
  250. }catch(error){
  251. this.$util.msg(error.msg,2000)
  252. }
  253. },
  254. //确认操作
  255. handleClick(e) {
  256. if(this.modalType === 0){
  257. if (e.index == 1) {
  258. if(this.modalType === 0){
  259. this.userTicketBind(this.params)
  260. }else{
  261. this.$api.navigateTo('/pages/h5/activity/activity-entry-list')
  262. }
  263. }else{
  264. // 拨号
  265. uni.makePhoneCall({
  266. phoneNumber: '15338851365' //仅为示例
  267. })
  268. }
  269. }else{
  270. this.$api.navigateTo('/pages/h5/activity/activity-entry-list')
  271. }
  272. this.modal = false
  273. },
  274. // 绑定门票
  275. async userTicketBind(params){
  276. try{
  277. await this.UserService.userTicketBind(params)
  278. wxLogin.wxLoginAuthorize()
  279. this.isShowModel = true
  280. this.params.idCard = ''
  281. }catch(error){
  282. this.$util.msg(error.msg,2000)
  283. }
  284. },
  285. getMobileCodeFn() {
  286. if (this.params.mobile == '') {
  287. this.$util.msg('请输入手机号', 2000)
  288. return
  289. }
  290. if (!this.$reg.isMobile(this.params.mobile)) {
  291. this.$util.msg('请输入正确的手机号', 2000)
  292. return
  293. }
  294. let params = {
  295. mobile: this.params.mobile,
  296. isCheckCaptcha: 1,
  297. activateCodeType: 16,
  298. platformType: 2
  299. }
  300. this.isMobileDisabled = true
  301. this.getMobileCode(params)
  302. },
  303. async getMobileCode(params){
  304. try{
  305. const TIME_COUNT = 60
  306. await this.PublicService.GetRegisterMobileCode(params)
  307. this.$util.msg('验证短信已发送', 2000)
  308. if (!this.mobilTime) {
  309. this.mobilCount = TIME_COUNT
  310. this.isMobileDisabled = true
  311. this.mobilTime = setInterval(() => {
  312. if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
  313. this.mobilCount--
  314. this.mobileCodeText = this.mobilCount + '秒后重发'
  315. } else {
  316. this.isMobileDisabled = false
  317. clearInterval(this.mobilTime)
  318. this.mobilTime = null
  319. this.mobileCodeText = '获取验证码'
  320. }
  321. }, 1000)
  322. }
  323. }catch(error){
  324. this.$util.msg('获取短信验证码异常~', 2000)
  325. this.isMobileDisabled = false
  326. }
  327. },
  328. hideModel(){
  329. this.isShowModel = false
  330. this.getTicketDetails({ticket:this.params.ticket})
  331. },
  332. exceptSurname(fullName) {
  333. const parts = fullName.split('')
  334. if (parts.length > 1) {
  335. // 只替换名字的第一个字符
  336. parts[0] = '*' + parts[0].slice(1)
  337. return parts.join('')
  338. } else {
  339. // 如果只有一个名字(或姓),则替换第一个字符
  340. return '*' + fullName.slice(1)
  341. }
  342. },
  343. excePhoneNumber(phoneNumber) {
  344. // 假设phoneNumber是一个有效的手机号字符串
  345. // 保留手机号的前三位和后四位,中间用星号(*)替换
  346. // 检查手机号长度,确保是11位(中国大陆手机号标准)
  347. if (phoneNumber.length === 11) {
  348. // 提取前三位和后四位
  349. const prefix = phoneNumber.substring(0, 3)
  350. const suffix = phoneNumber.substring(7)
  351. // 生成中间部分的星号(*),长度为原手机号长度减去前后保留的长度
  352. const middle = '*'.repeat(phoneNumber.length - prefix.length - suffix.length)
  353. // 拼接脱敏后的手机号
  354. return prefix + middle + suffix
  355. } else {
  356. // 如果手机号长度不是11位,可以返回原始手机号或进行其他处理
  357. console.warn('手机号长度不是11位,可能不是有效的手机号')
  358. return phoneNumber // 或者返回 null, '' 等,根据实际需求
  359. }
  360. }
  361. },
  362. onShow() {
  363. }
  364. }
  365. </script>
  366. <style lang="scss">
  367. page{
  368. background-color: #3d68eb;
  369. height: auto !important;
  370. }
  371. .container-banner{
  372. width: 100%;
  373. height: 1142rpx;
  374. background: url(https://static.caimei365.com/app/img/bg/ziluo_bg.jpg) no-repeat;
  375. background-size: contain;
  376. box-sizing: border-box;
  377. padding: 0 110rpx;
  378. .container-title{
  379. height: 120rpx;
  380. line-height: 120rpx;
  381. font-size: $font-size-48;
  382. font-weight: 600;
  383. text-align: center;
  384. color: #FFFFFF;
  385. }
  386. .login-title{
  387. font-size: $font-size-28;
  388. line-height: 58rpx;
  389. color: #ffffff;
  390. }
  391. .login-input{
  392. width: 100%;
  393. height: 88rpx;
  394. padding:0 24rpx;
  395. margin: 0 auto;
  396. margin-bottom: 40rpx;
  397. background: #FFFFFF;
  398. box-sizing: border-box;
  399. border-radius: 50rpx;
  400. position: relative;
  401. &.code{
  402. padding-right: 180rpx;
  403. }
  404. .input{
  405. width: 100%;
  406. height: 100%;
  407. background: #FFFFFF;
  408. font-size: $font-size-28;
  409. line-height: 88rpx;
  410. color: #333333;
  411. border-radius: 50rpx;
  412. &.code{
  413. width: 300rpx;
  414. }
  415. }
  416. .code-btn{
  417. width: 180rpx;
  418. height: 64rpx;
  419. float: left;
  420. background: #e10078;
  421. padding: 0;
  422. border-radius: 32rpx;
  423. position: absolute;
  424. right: 10rpx;
  425. top:10rpx;
  426. .code-button {
  427. width: 180rpx;
  428. height: 64rpx;
  429. line-height: 64rpx;
  430. padding: 0;
  431. color: #ffffff;
  432. background: #e10078;
  433. text-align: center;
  434. border-radius: 32rpx;
  435. font-size: $font-size-24;
  436. }
  437. &.disabled {
  438. background: #f7f7f7;
  439. .code-button {
  440. background: #f7f7f7;
  441. color: #999999;
  442. font-size: 24rpx;
  443. }
  444. }
  445. }
  446. }
  447. .login-btn {
  448. width: 100%;
  449. height: 88rpx;
  450. font-size: $font-size-30;
  451. font-weight: 600;
  452. letter-spacing: 3rpx;
  453. line-height: 88rpx;
  454. color: #ffffff;
  455. margin: 0 auto;
  456. text-align: center;
  457. background-color: #e10078;
  458. border-radius: 50rpx;
  459. margin-bottom: 10rpx;
  460. }
  461. .login-text{
  462. font-size: $font-size-22;
  463. line-height: 36rpx;
  464. color: #ffffff;
  465. margin-top: 10rpx;
  466. }
  467. }
  468. </style>