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 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526
  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;">望京SOHO</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 v-model="modelShow" @confirm="readOk" :title="tit" width="720rpx">
  85. <view class="slot-content" style="padding: 20rpx;">
  86. <rich-text :nodes="content"></rich-text>
  87. </view>
  88. </u-modal>
  89. <view class="tips">
  90. 疫情防控 人人有责
  91. </view>
  92. <u-select :mask-close-able="false" v-model="Showhiddenunits" mode="single-column" :list="list" @cancel="cancel"
  93. @confirm="confirm"></u-select>
  94. </view>
  95. </template>
  96. <script>
  97. var app = getApp();
  98. var config = require("@/config");
  99. let domain = require("@/utils/domain")
  100. export default {
  101. data() {
  102. return {
  103. Showhiddenunits: false,
  104. list: [{
  105. label: '自然到访',
  106. value: '自然到访'
  107. },
  108. {
  109. label: '渠道推荐',
  110. value: '渠道推荐'
  111. },
  112. ],
  113. parames: {
  114. name: '',
  115. sex: 1,
  116. // sourceName: "自然到访",
  117. howMany: 1,
  118. projectId: '',
  119. phone: '',
  120. projectId: '',
  121. projectName: 'xxx',
  122. version:"",
  123. checked: false,
  124. },
  125. daitiReceptionobj: {},
  126. verifyPass: false,
  127. qrCodeUrl: '',
  128. // 是否同意隐私协议
  129. content:"",
  130. modelShow:false,
  131. tit:"",
  132. };
  133. },
  134. onLoad(options) {
  135. const sceneStr = decodeURIComponent(options.scene);
  136. console.log(options)
  137. this.parames.projectId = sceneStr
  138. this.initFetch()
  139. },
  140. watch: {
  141. parames: {
  142. deep: true,
  143. handler(newV) {
  144. if(newV.checked){
  145. if(newV.name.length != 0){
  146. this.verifyPass = true;
  147. }else{
  148. this.verifyPass = false;
  149. }
  150. }else{
  151. this.verifyPass = false;
  152. }
  153. // if (newV.name.length == 0) {
  154. // this.verifyPass = false;
  155. // } else {
  156. // this.verifyPass = true;
  157. // }
  158. }
  159. }
  160. },
  161. methods: {
  162. initFetch(){
  163. let appid = uni.getAccountInfoSync().miniProgram.appId;
  164. uni.request({
  165. url: config.service.privacyAgr,
  166. method: "GET",
  167. data:{
  168. id:appid
  169. },
  170. header: {
  171. 'content-type': 'application/json',
  172. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  173. },
  174. success: (res) => {
  175. this.content = res.data.data.content
  176. this.tit = res.data.data.title
  177. this.parames.version = res.data.data.version
  178. }
  179. })
  180. },
  181. openModel(){
  182. this.modelShow = true;
  183. },
  184. readOk(){
  185. this.parames.checked = true;
  186. },
  187. save() {
  188. if(this.parames.checked == false){
  189. uni.showToast({
  190. icon: "none",
  191. title: "请阅读并同意用户隐私协议"
  192. })
  193. return;
  194. }else{
  195. if (this.parames.name.length == 0) {
  196. uni.showToast({
  197. icon: "none",
  198. title: "姓名不能为空"
  199. })
  200. return;
  201. }
  202. }
  203. },
  204. getPhoneNumber(e) {
  205. this.qrCodeUrl = domain.baseUrl
  206. if (e.detail.errMsg == "getPhoneNumber:ok") {
  207. let data = {
  208. code: e.detail.code,
  209. appid: uni.getAccountInfoSync().miniProgram.appId,
  210. }
  211. uni.request({
  212. url: this.qrCodeUrl + '/code/loginSessionKey',
  213. method: "GET",
  214. data,
  215. success: (res) => {
  216. console.log(res.data.data)
  217. let phoneNum = JSON.parse(res.data.data).phone_info.phoneNumber
  218. this.parames.phone = phoneNum
  219. if (this.parames.phone != null && this.parames.phone != "") {
  220. if (this.parames.name.length > 8) {
  221. uni.showToast({
  222. icon: "none",
  223. title: "不能超过8个汉字"
  224. })
  225. } else {
  226. uni.request({
  227. url: this.qrCodeUrl + '/customer/codeAdd',
  228. method: "POST",
  229. data: this.parames,
  230. header: {
  231. 'content-type': 'application/json',
  232. 'Access-Token': uni.getStorageSync(
  233. 'weapp_session_login_data').token
  234. },
  235. success: (addres) => {
  236. if (addres.data.code == 10000) {
  237. uni.reLaunch({
  238. url: '/pages/mine/registerResult'
  239. })
  240. } else {
  241. uni.showToast({
  242. icon: "none",
  243. title: addres.data.message
  244. })
  245. }
  246. }
  247. })
  248. }
  249. }
  250. }
  251. })
  252. } else {
  253. return;
  254. }
  255. },
  256. changeSex(sex) {
  257. this.parames.sex = sex;
  258. },
  259. changeHowMany(num) {
  260. this.parames.howMany = num;
  261. },
  262. Buildingselection() {
  263. this.Showhiddenunits = true;
  264. },
  265. cancel() {
  266. this.Showhiddenunits = false;
  267. },
  268. confirm(e) {
  269. this.parames.sourceName = e[0].value;
  270. this.Showhiddenunits = false;
  271. },
  272. }
  273. };
  274. </script>
  275. <style lang="scss" scoped>
  276. .cented-box {
  277. position: relative;
  278. padding: 0 0 50rpx 0;
  279. width: 100vw;
  280. min-height: calc(100vh - var(--window-top));
  281. display: flex;
  282. flex-direction: column;
  283. .bg-img {
  284. width: 100%;
  285. height: 100%;
  286. z-index: -1;
  287. position: absolute;
  288. }
  289. .header {
  290. margin: 0 0 40rpx 0;
  291. width: 100%;
  292. display: flex;
  293. .lside {
  294. flex: 1;
  295. display: flex;
  296. flex-direction: column;
  297. justify-content: center;
  298. align-items: center;
  299. .text {
  300. color: #fff;
  301. font-size: 100rpx;
  302. font-weight: 800;
  303. }
  304. .top {
  305. font-size: 76rpx;
  306. }
  307. }
  308. .rside {
  309. flex: 1;
  310. display: flex;
  311. justify-content: center;
  312. align-items: center;
  313. image {
  314. width: 306rpx;
  315. height: 302rpx;
  316. }
  317. }
  318. }
  319. .container {
  320. position: relative;
  321. margin: 0 auto;
  322. width: 670rpx;
  323. height: 900rpx;
  324. background: #fff;
  325. border-radius: 16rpx;
  326. .chented {
  327. padding: 0 30rpx;
  328. width: 100%;
  329. .title {
  330. width: 100%;
  331. height: 110rpx;
  332. border-bottom: 1rpx solid #E0E0E0;
  333. display: flex;
  334. align-items: center;
  335. .titletext {
  336. width: 21%;
  337. font-size: 30rpx;
  338. font-weight: 400;
  339. color: #333333;
  340. }
  341. .titletext2 {
  342. width: 71%;
  343. }
  344. .titletext-input {
  345. width: 100%;
  346. height: 110rpx;
  347. font-size: 30rpx;
  348. font-weight: 400;
  349. color: #B2B2B2;
  350. line-height: 110rpx;
  351. padding-left: 10rpx;
  352. }
  353. .titleimg {
  354. width: 8%;
  355. text-align: right;
  356. .titleimg1 {
  357. width: 16rpx;
  358. height: 36rpx;
  359. }
  360. }
  361. }
  362. }
  363. .clive {
  364. margin: 100rpx auto 0;
  365. width: 610rpx;
  366. height: 88rpx;
  367. background: #2671E2;
  368. text-align: center;
  369. line-height: 88rpx;
  370. color: #FFFFFF;
  371. border-radius: 8rpx;
  372. font-size: 32rpx;
  373. }
  374. .dengji {
  375. margin: 60rpx 0 0 0;
  376. padding: 0 30rpx;
  377. width: 100%;
  378. display: flex;
  379. .d-lside {
  380. padding: 0 20rpx;
  381. height: 88rpx;
  382. display: flex;
  383. align-items: center;
  384. border-right: 1rpx solid #E0E0E0;
  385. font-size: 36rpx;
  386. font-weight: 500;
  387. }
  388. .d-rside {
  389. padding: 0 20rpx;
  390. height: 88rpx;
  391. display: flex;
  392. flex-direction: column;
  393. .top {
  394. display: flex;
  395. align-items: baseline;
  396. font-size: 24rpx;
  397. color: #333330;
  398. .t-time {
  399. margin-right: 20rpx;
  400. font-size: 36rpx;
  401. font-weight: 500;
  402. color: #333331;
  403. }
  404. }
  405. }
  406. }
  407. .bottoms {
  408. position: absolute;
  409. bottom: 30rpx;
  410. padding: 0 30rpx;
  411. width: 100%;
  412. .books {
  413. margin-left: -24rpx;
  414. color: #2671E2;
  415. font-size: 30rpx;
  416. }
  417. }
  418. }
  419. .tips {
  420. margin: 40rpx 0 0 0;
  421. width: 100%;
  422. text-align: center;
  423. color: #fff;
  424. font-size: 30rpx;
  425. }
  426. }
  427. .sexRadio {
  428. color: #BFBFBF;
  429. border: 1rpx solid #BFBFBF;
  430. font-size: 24upx;
  431. width: 120rpx;
  432. height: 60rpx;
  433. text-align: center;
  434. display: flex;
  435. align-items: center;
  436. justify-content: center;
  437. &:last-child {
  438. margin-left: 20rpx;
  439. }
  440. &.active {
  441. background: #2B6FFF;
  442. color: #fff;
  443. border-color: #2B6FFF;
  444. }
  445. }
  446. .num {
  447. width: 74rpx;
  448. height: 74rpx;
  449. border-radius: 8rpx;
  450. background: rgba(43, 110, 253, 0.1);
  451. color: #2B6EFD;
  452. font-size: 32rpx;
  453. display: flex;
  454. align-items: center;
  455. justify-content: center;
  456. &.active {
  457. background: #2B6EFD;
  458. color: #FFFFFF;
  459. }
  460. }
  461. .Pinspeak {
  462. width: 100%;
  463. height: 92rpx;
  464. border-bottom: 1rpx solid #E0E0E0;
  465. font-size: 32rpx;
  466. font-weight: bold;
  467. color: #333333;
  468. text-indent: 30rpx;
  469. line-height: 92rpx;
  470. background: #FFFFFF;
  471. margin-top: 20rpx;
  472. padding-left: 10rpx;
  473. }
  474. </style>