You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

registerForm.vue 12 KiB

2 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550
  1. <template>
  2. <view class="cented-box">
  3. <!-- 背景图 -->
  4. <image class="bg-img" src="@/static/images/screenCode/screen_bg.png" mode=""></image>
  5. <!-- 头部 -->
  6. <view class="header">
  7. <view class="lside">
  8. <text class="text top">访客入场</text>
  9. <text class="text">登记表</text>
  10. </view>
  11. <view class="rside">
  12. <image src="@/static/images/screenCode/screen_note.png" mode=""></image>
  13. </view>
  14. </view>
  15. <!-- 表单 -->
  16. <view class="container">
  17. <view class="chented">
  18. <view class="title">
  19. <view class="titletext">客户姓名</view>
  20. <view class="titletext2">
  21. <input maxlength="10" class="titletext-input" style="color: #333333;" v-model="parames.name"
  22. placeholder-class="titletext-input" placeholder-style="color:#B2B2B2;" type="text"
  23. placeholder="请输入客户姓名(必填)" />
  24. </view>
  25. <view class="titleimg"></view>
  26. </view>
  27. </view>
  28. <view class="chented">
  29. <view class="title">
  30. <view class="titletext">客户性别</view>
  31. <!-- <view class="titletext2 displayclick"
  32. style="display: flex;align-items: center;padding-left: 10rpx;">
  33. <view class="sexRadio" @click="changeSex(1)" :class="{active:parames.sex == 1}">男士</view>
  34. <view class="sexRadio" @click="changeSex(2)" :class="{active:parames.sex == 2}">女士</view>
  35. </view> -->
  36. <u-radio-group v-model="parames.sex">
  37. <view style="display: flex;align-items: center;">
  38. <u-radio :name="1" shape="circle">男士</u-radio>
  39. <u-radio :name="2" shape="circle">女士</u-radio>
  40. </view>
  41. </u-radio-group>
  42. </view>
  43. <view class="title">
  44. <view class="titletext">到访人数</view>
  45. <view class="titletext2" style="display: flex;align-items: center;justify-content: space-around;">
  46. <view class="num" v-for="i in 4" :key="i" :class="{active:parames.howMany == i+1}"
  47. @click="changeHowMany(i+1)">
  48. {{i + 1}}
  49. </view>
  50. </view>
  51. </view>
  52. <!-- <view class="title" @click="Buildingselection()">
  53. <view class="titletext">到访途径</view>
  54. <view class="titletext2"
  55. style="font-size: 30rpx;font-weight: 400;color: #B2B2B2;line-height: 110rpx;padding-left: 10rpx;">
  56. <text v-if="parames.sourceName" style="color: #333333;">{{parames.sourceName}}</text>
  57. <text v-else>请选择客户来源</text>
  58. </view>
  59. <view class="titleimg">
  60. <image class="titleimg1" src="../../static/images/arrow.png" mode=""></image>
  61. </view>
  62. </view> -->
  63. </view>
  64. <button class="clive" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
  65. v-if="verifyPass">提交</button>
  66. <view class="clive" @click="save" v-else>提交</view>
  67. <view class="dengji">
  68. <view class="d-lside">
  69. 入场登记
  70. </view>
  71. <view class="d-rside">
  72. <view class="top">
  73. <text class="t-time">{{$u.timeFormat(new Date(), 'hh:MM:ss')}}</text>
  74. <text class="date">{{$u.timeFormat(new Date(), 'yyyy/mm/dd')}}</text>
  75. </view>
  76. <view class="address" style="font-size: 36rpx;">{{pname}}</view>
  77. </view>
  78. </view>
  79. <view class="bottoms">
  80. <u-checkbox v-model="parames.checked">我已阅读并同意</u-checkbox>
  81. <text class="books" @click="openModel">《{{tit}}》</text>
  82. </view>
  83. </view>
  84. <u-modal class="aaa" v-model="modelShow" :title="tit" width="720rpx" :mask-close-able="true" :show-confirm-button="false">
  85. <view class="bbb">
  86. <u-icon class="close" @click="readOk" name="close-circle" color="#CCCCCC" size="60"></u-icon>
  87. </view>
  88. <view class="slot-content" style="padding:0 20rpx;height: 800rpx;overflow-y: auto;">
  89. <view class="cont">
  90. <scroll-view style="height: 800rpx;" scroll-y="true">
  91. <rich-text :nodes="content"></rich-text>
  92. </scroll-view>
  93. </view>
  94. </view>
  95. </u-modal>
  96. <view class="tips">
  97. 疫情防控 人人有责
  98. </view>
  99. <u-select :mask-close-able="false" v-model="Showhiddenunits" mode="single-column" :list="list" @cancel="cancel"
  100. @confirm="confirm"></u-select>
  101. </view>
  102. </template>
  103. <script>
  104. var app = getApp();
  105. var config = require("@/config");
  106. let domain = require("@/utils/domain")
  107. export default {
  108. data() {
  109. return {
  110. Showhiddenunits: false,
  111. list: [{
  112. label: '自然到访',
  113. value: '自然到访'
  114. },
  115. {
  116. label: '渠道推荐',
  117. value: '渠道推荐'
  118. },
  119. ],
  120. parames: {
  121. name: '',
  122. sex: 1,
  123. // sourceName: "自然到访",
  124. howMany: 1,
  125. projectId: '',
  126. phone: '',
  127. projectId: '',
  128. projectName: 'xxx',
  129. version:"",
  130. checked: true,
  131. },
  132. pname:"",
  133. daitiReceptionobj: {},
  134. verifyPass: false,
  135. qrCodeUrl: '',
  136. // 是否同意隐私协议
  137. content:"",
  138. modelShow:false,
  139. tit:"",
  140. };
  141. },
  142. onLoad(options) {
  143. console.log(options)
  144. const sceneStr = decodeURIComponent(options.scene);
  145. this.parames.projectId = sceneStr
  146. this.initFetch()
  147. },
  148. watch: {
  149. parames: {
  150. deep: true,
  151. handler(newV) {
  152. if(newV.checked){
  153. if(newV.name.length != 0){
  154. this.verifyPass = true;
  155. }else{
  156. this.verifyPass = false;
  157. }
  158. }else{
  159. this.verifyPass = false;
  160. }
  161. // if (newV.name.length == 0) {
  162. // this.verifyPass = false;
  163. // } else {
  164. // this.verifyPass = true;
  165. // }
  166. }
  167. }
  168. },
  169. methods: {
  170. initFetch(){
  171. let appid = uni.getAccountInfoSync().miniProgram.appId;
  172. uni.request({
  173. url: config.service.privacyAgr,
  174. method: "GET",
  175. data:{
  176. id:appid,
  177. projectId:this.parames.projectId
  178. },
  179. header: {
  180. 'content-type': 'application/json',
  181. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  182. },
  183. success: (res) => {
  184. this.content = res.data.data.content
  185. this.tit = res.data.data.title
  186. this.parames.version = res.data.data.version
  187. this.pname = res.data.data.projectName
  188. }
  189. })
  190. },
  191. openModel(){
  192. this.modelShow = true;
  193. },
  194. readOk(){
  195. this.parames.checked = true;
  196. this.modelShow = false;
  197. },
  198. save() {
  199. if(this.parames.checked == false){
  200. uni.showToast({
  201. icon: "none",
  202. title: "请阅读并同意用户隐私协议"
  203. })
  204. return;
  205. }else{
  206. if (this.parames.name.length == 0) {
  207. uni.showToast({
  208. icon: "none",
  209. title: "姓名不能为空"
  210. })
  211. return;
  212. }
  213. }
  214. },
  215. getPhoneNumber(e) {
  216. this.qrCodeUrl = domain.baseUrl
  217. if (e.detail.errMsg == "getPhoneNumber:ok") {
  218. let data = {
  219. code: e.detail.code,
  220. appid: uni.getAccountInfoSync().miniProgram.appId,
  221. }
  222. uni.request({
  223. url: this.qrCodeUrl + '/code/loginSessionKey',
  224. method: "GET",
  225. data,
  226. success: (res) => {
  227. console.log(res.data.data)
  228. let phoneNum = JSON.parse(res.data.data).phone_info.phoneNumber
  229. this.parames.phone = phoneNum
  230. if (this.parames.phone != null && this.parames.phone != "") {
  231. if (this.parames.name.length > 8) {
  232. uni.showToast({
  233. icon: "none",
  234. title: "不能超过8个汉字"
  235. })
  236. } else {
  237. uni.request({
  238. url: this.qrCodeUrl + '/customer/codeAdd',
  239. method: "POST",
  240. data: this.parames,
  241. header: {
  242. 'content-type': 'application/json',
  243. 'Access-Token': uni.getStorageSync(
  244. 'weapp_session_login_data').token
  245. },
  246. success: (addres) => {
  247. if (addres.data.code == 10000) {
  248. uni.reLaunch({
  249. url: '/pages/mine/registerResult'
  250. })
  251. } else {
  252. uni.showToast({
  253. icon: "none",
  254. title: addres.data.message
  255. })
  256. }
  257. }
  258. })
  259. }
  260. }
  261. }
  262. })
  263. } else {
  264. return;
  265. }
  266. },
  267. changeSex(sex) {
  268. this.parames.sex = sex;
  269. },
  270. changeHowMany(num) {
  271. this.parames.howMany = num;
  272. },
  273. Buildingselection() {
  274. this.Showhiddenunits = true;
  275. },
  276. cancel() {
  277. this.Showhiddenunits = false;
  278. },
  279. confirm(e) {
  280. this.parames.sourceName = e[0].value;
  281. this.Showhiddenunits = false;
  282. },
  283. }
  284. };
  285. </script>
  286. <style lang="scss" scoped>
  287. /deep/ .u-model-title{
  288. padding-top: 0px !important;
  289. padding:48rpx 0 24rpx !important;
  290. }
  291. .aaa{
  292. position: relative;
  293. .bbb{
  294. position: absolute;
  295. top: 8rpx;
  296. right: 8rpx;
  297. }
  298. }
  299. .cented-box {
  300. position: relative;
  301. padding: 0 0 50rpx 0;
  302. width: 100vw;
  303. min-height: calc(100vh - var(--window-top));
  304. display: flex;
  305. flex-direction: column;
  306. .bg-img {
  307. width: 100%;
  308. height: 100%;
  309. z-index: -1;
  310. position: absolute;
  311. }
  312. .header {
  313. margin: 0 0 40rpx 0;
  314. width: 100%;
  315. display: flex;
  316. .lside {
  317. flex: 1;
  318. display: flex;
  319. flex-direction: column;
  320. justify-content: center;
  321. align-items: center;
  322. .text {
  323. color: #fff;
  324. font-size: 100rpx;
  325. font-weight: 800;
  326. }
  327. .top {
  328. font-size: 76rpx;
  329. }
  330. }
  331. .rside {
  332. flex: 1;
  333. display: flex;
  334. justify-content: center;
  335. align-items: center;
  336. image {
  337. width: 306rpx;
  338. height: 302rpx;
  339. }
  340. }
  341. }
  342. .container {
  343. position: relative;
  344. margin: 0 auto;
  345. width: 670rpx;
  346. height: 900rpx;
  347. background: #fff;
  348. border-radius: 16rpx;
  349. .chented {
  350. padding: 0 30rpx;
  351. width: 100%;
  352. .title {
  353. width: 100%;
  354. height: 110rpx;
  355. border-bottom: 1rpx solid #E0E0E0;
  356. display: flex;
  357. align-items: center;
  358. .titletext {
  359. width: 21%;
  360. font-size: 30rpx;
  361. font-weight: 400;
  362. color: #333333;
  363. }
  364. .titletext2 {
  365. width: 71%;
  366. }
  367. .titletext-input {
  368. width: 100%;
  369. height: 110rpx;
  370. font-size: 30rpx;
  371. font-weight: 400;
  372. color: #B2B2B2;
  373. line-height: 110rpx;
  374. padding-left: 10rpx;
  375. }
  376. .titleimg {
  377. width: 8%;
  378. text-align: right;
  379. .titleimg1 {
  380. width: 16rpx;
  381. height: 36rpx;
  382. }
  383. }
  384. }
  385. }
  386. .clive {
  387. margin: 100rpx auto 0;
  388. width: 610rpx;
  389. height: 88rpx;
  390. background: #2671E2;
  391. text-align: center;
  392. line-height: 88rpx;
  393. color: #FFFFFF;
  394. border-radius: 8rpx;
  395. font-size: 32rpx;
  396. }
  397. .dengji {
  398. margin: 60rpx 0 0 0;
  399. padding: 0 30rpx;
  400. width: 100%;
  401. display: flex;
  402. .d-lside {
  403. padding: 0 20rpx;
  404. height: 88rpx;
  405. display: flex;
  406. align-items: center;
  407. border-right: 1rpx solid #E0E0E0;
  408. font-size: 36rpx;
  409. font-weight: 500;
  410. }
  411. .d-rside {
  412. padding: 0 20rpx;
  413. height: 88rpx;
  414. display: flex;
  415. flex-direction: column;
  416. .top {
  417. display: flex;
  418. align-items: baseline;
  419. font-size: 24rpx;
  420. color: #333330;
  421. .t-time {
  422. margin-right: 20rpx;
  423. font-size: 36rpx;
  424. font-weight: 500;
  425. color: #333331;
  426. }
  427. }
  428. }
  429. }
  430. .bottoms {
  431. position: absolute;
  432. bottom: 30rpx;
  433. padding: 0 30rpx;
  434. width: 100%;
  435. .books {
  436. margin-left: -24rpx;
  437. color: #2671E2;
  438. font-size: 30rpx;
  439. }
  440. }
  441. }
  442. .tips {
  443. margin: 40rpx 0 0 0;
  444. width: 100%;
  445. text-align: center;
  446. color: #fff;
  447. font-size: 30rpx;
  448. }
  449. }
  450. .sexRadio {
  451. color: #BFBFBF;
  452. border: 1rpx solid #BFBFBF;
  453. font-size: 24upx;
  454. width: 120rpx;
  455. height: 60rpx;
  456. text-align: center;
  457. display: flex;
  458. align-items: center;
  459. justify-content: center;
  460. &:last-child {
  461. margin-left: 20rpx;
  462. }
  463. &.active {
  464. background: #2B6FFF;
  465. color: #fff;
  466. border-color: #2B6FFF;
  467. }
  468. }
  469. .num {
  470. width: 74rpx;
  471. height: 74rpx;
  472. border-radius: 8rpx;
  473. background: rgba(43, 110, 253, 0.1);
  474. color: #2B6EFD;
  475. font-size: 32rpx;
  476. display: flex;
  477. align-items: center;
  478. justify-content: center;
  479. &.active {
  480. background: #2B6EFD;
  481. color: #FFFFFF;
  482. }
  483. }
  484. .Pinspeak {
  485. width: 100%;
  486. height: 92rpx;
  487. border-bottom: 1rpx solid #E0E0E0;
  488. font-size: 32rpx;
  489. font-weight: bold;
  490. color: #333333;
  491. text-indent: 30rpx;
  492. line-height: 92rpx;
  493. background: #FFFFFF;
  494. margin-top: 20rpx;
  495. padding-left: 10rpx;
  496. }
  497. </style>