join2.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475
  1. <template>
  2. <view class="page">
  3. <view class="scoped-header">
  4. <view class="p1" style="color: #f00;font-weight: bold;">{{ curObj.estate_name || '' }} {{ curObj.remark || '' }}</view>
  5. <view class="p2" style="color: #f00;font-weight: bold;">截至时间:{{ curObj.end_at || ''}}</view>
  6. <view class="img">
  7. <view class="t">点击二维码进群:</view>
  8. <image class="i" :src="curObj.image" mode="widthFix" @click="codePreview" />
  9. </view>
  10. </view>
  11. <view class="form">
  12. <u-form :model="form" ref="uForm">
  13. <u-form-item label-width="150" label="公司/门店" prop="info1" required>
  14. <u-input placeholder="请输入公司/门店" v-model="form.info1" type="text"></u-input>
  15. </u-form-item>
  16. <u-form-item label-width="150" label="名字" prop="info2" required>
  17. <u-input placeholder="请输入名字" v-model="form.info2" type="text"></u-input>
  18. </u-form-item>
  19. <u-form-item label-width="150" label="电话" prop="info3" required>
  20. <u-input placeholder="请输入电话" v-model="form.info3" type="number"></u-input>
  21. </u-form-item>
  22. <u-form-item label-width="150" label="参加人数" prop="info4" required>
  23. <u-input placeholder="请输入参加人数" v-model="form.info4" type="number"></u-input>
  24. </u-form-item>
  25. <u-form-item label-width="150" label="办公区域" prop="info5" required>
  26. <u-input placeholder="请输入办公区域" v-model="form.info5" disabled @click="areaOpen" type="text"></u-input>
  27. </u-form-item>
  28. </u-form>
  29. <u-gap height="60"></u-gap>
  30. <u-button type="primary" @click="submitHandle">提交</u-button>
  31. </view>
  32. <u-select v-model="isareaShow" :list="areaList" label-name="dict_label" @confirm="areaClose"></u-select>
  33. </view>
  34. </template>
  35. <script>
  36. import { arrToObj } from '@/utils'
  37. export default {
  38. data() {
  39. return {
  40. curId: '',
  41. curObj: {},
  42. isareaShow: false,
  43. areaList: [],
  44. form: {
  45. info1: null,
  46. info2: null,
  47. info3: null,
  48. info4: null,
  49. info5: null,
  50. },
  51. eIds: [],
  52. eArr: [],
  53. phoneBefore3: '',
  54. phoneAfter4: '',
  55. customer_id: null,
  56. submitButtonDisabled: true,
  57. rules: {
  58. info1: [
  59. {
  60. required: true,
  61. message: '公司/门店不得为空',
  62. trigger: ['change', 'blur']
  63. },
  64. ],
  65. info2: [
  66. {
  67. required: true,
  68. message: '名字不得为空',
  69. trigger: ['change', 'blur']
  70. },
  71. ],
  72. info3: [
  73. {
  74. required: true,
  75. message: '电话不得为空',
  76. trigger: ['change', 'blur']
  77. },
  78. ],
  79. info4: [
  80. {
  81. required: true,
  82. message: '参加人数不得为空',
  83. trigger: ['change', 'blur']
  84. },
  85. ],
  86. info5: [
  87. {
  88. required: true,
  89. message: '办公区域不得为空',
  90. trigger: ['change', 'blur']
  91. },
  92. ],
  93. },
  94. propertySelectShow: false,
  95. propertySelectList: [],
  96. estateList: [],
  97. areaTypeObj: {},
  98. userInfo2: {},
  99. curEstateName: '',
  100. salerSelectShow: false,
  101. salerSelectList: [],
  102. submitModalShow: false,
  103. modalShow: false,
  104. modalContent: ''
  105. };
  106. },
  107. onLoad(data) {
  108. const curId = data.id
  109. this.curId = curId || ''
  110. uni.api.cust.apiactivityinfo({id: this.curId}).then(res => {
  111. this.curObj = res.activity || {}
  112. })
  113. const dictObj = uni.getStorageSync('MD_dict') || {}
  114. const atArr = dictObj.area_type || []
  115. let areaList = []
  116. atArr.forEach(item => {
  117. if (item.dict_label !== '独家合作' && item.dict_label !== '安义县' && item.dict_label !== '宜春' ) {
  118. areaList.push(item)
  119. }
  120. })
  121. this.areaList = [...areaList]
  122. },
  123. onShareAppMessage(options) {
  124. var shareObj = {
  125. title: `${this.curObj.estate_name}${this.curObj.remark}`,
  126. path: `/pages/agent/activity/join2?id=${this.curId}`,
  127. success: function(res) {
  128. },
  129. complete: function(res) {
  130. console.log(res)
  131. },
  132. }
  133. return shareObj
  134. },
  135. onShareTimeline(options) {
  136. var shareObj = {
  137. title: `${this.curObj.estate_name}${this.curObj.remark}`,
  138. path: `/pages/agent/activity/join2?id=${this.curId}`,
  139. success: function(res) {
  140. },
  141. complete: function(res) {
  142. console.log(res)
  143. },
  144. }
  145. return shareObj
  146. },
  147. created () {
  148. },
  149. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  150. onReady() {
  151. this.$refs.uForm.setRules(this.rules);
  152. },
  153. methods: {
  154. codePreview () {
  155. const imgUrl = this.curObj.image
  156. if (imgUrl) {
  157. uni.previewImage({
  158. current: imgUrl,
  159. urls: [imgUrl]
  160. })
  161. }
  162. },
  163. areaOpen () {
  164. this.isareaShow = true
  165. },
  166. areaClose (arr) {
  167. this.isareaShow = false
  168. if (arr) {
  169. this.form.info5 = arr[0].label
  170. }
  171. },
  172. phoneHandle () {
  173. let p = this.form.phone
  174. p = p.replace(/ /g, '')
  175. this.form.phone = p
  176. this.form = {...this.form}
  177. },
  178. getEstateList () {
  179. uni.api.estate.apiestatelist({page_size: 100, report_open: 1, is_inner: 2, estate_name: this.curEstateName}).then(res => {
  180. let list = res.list || []
  181. this.estateList = [...list]
  182. })
  183. },
  184. listItemHandle (val) {
  185. let eIds = [...this.eIds]
  186. let eArr = [...this.eArr]
  187. let cIndex = eIds.indexOf(val.estate_id)
  188. if (cIndex > -1 ) {
  189. eIds.splice(cIndex,1)
  190. eArr.splice(cIndex,1)
  191. } else {
  192. eIds.push(val.estate_id)
  193. eArr.push(val)
  194. }
  195. this.eIds = [...eIds]
  196. this.eArr = [...eArr]
  197. },
  198. clearListHandle () {
  199. this.propertySelectShow = false
  200. this.eIds = []
  201. this.eArr = []
  202. this.form.estate_name = ''
  203. },
  204. saveListHandle () {
  205. let errMsg = ''
  206. let eNames = this.eArr.map(item => {
  207. if (item.phone_type == '2') {
  208. errMsg = item.estate_name
  209. }
  210. return item.estate_name
  211. })
  212. this.form.estate_name = eNames.join(',')
  213. if (this.eArr.length === 1 && this.eArr[0].phone_type == '2') {
  214. this.form.phone_type = '2'
  215. } else {
  216. this.form.phone_type = '1'
  217. }
  218. if (errMsg && this.eArr.length > 1) {
  219. uni.$msg(`${errMsg}是前三后四报备项目,请单独报备`)
  220. } else {
  221. this.propertySelectShow = false
  222. }
  223. },
  224. // // 选择所属项目回调
  225. // propertySelectConfirm(e) {
  226. // e.map((val, index) => {
  227. // this.form.estate_id = val.value;
  228. // this.form.estate_name = val.label;
  229. // });
  230. // },
  231. // openEstateList () {
  232. // uni.navigateTo({
  233. // url: `/pages/estate/list?eid=${this.form.estate_id}&ename=${this.form.estate_name}`
  234. // })
  235. // },
  236. submitHandle() {
  237. const that = this
  238. this.$refs.uForm.validate(valid => {
  239. if (valid) {
  240. // 验证成功
  241. let params = {
  242. activity_id: that.curId,
  243. info1: that.form.info1,
  244. info2: that.form.info2,
  245. info3: that.form.info3,
  246. info4: that.form.info4,
  247. info5: that.form.info5,
  248. }
  249. uni.api.cust.apiactivityenroll(params).then(res => {
  250. uni.$msgConfirm('报名成功', () => {
  251. uni.redirectTo({
  252. url: `/pages/index/index`
  253. })
  254. }, () => {
  255. uni.redirectTo({
  256. url: `/pages/index/index`
  257. })
  258. })
  259. })
  260. } else {
  261. console.log('验证失败');
  262. }
  263. });
  264. },
  265. // 获取手机号
  266. getPhoneNumber: function(e) {
  267. // 点击获取手机号码按钮
  268. let _that = this;
  269. if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
  270. _that.$refs.uToast.show({
  271. title: '您可以在个人设置中再次绑定',
  272. type: 'warning'
  273. });
  274. setTimeout(() => {
  275. _that.reLunchUser();
  276. }, 1500);
  277. return; // 即用户拒绝授权
  278. }
  279. console.log(e.detail.errMsg);
  280. console.log(e.detail.iv);
  281. console.log(e.detail.encryptedData);
  282. let iv = e.detail.iv;
  283. let encryptedData = e.detail.encryptedData;
  284. // 不是登陆完第一时间授权
  285. wx.login({
  286. success(res) {
  287. if (res.code) {
  288. // 设置用户手机号
  289. _that.setUserPhoneNumber(encryptedData, iv, res.code);
  290. } else {
  291. this.$refs.uToast.show({
  292. title: res.errMsg,
  293. type: 'warning'
  294. });
  295. console.log('登录失败!' + res.errMsg);
  296. }
  297. }
  298. });
  299. },
  300. // 以下是工具函数
  301. // 关闭键盘
  302. hideKeyboard() {
  303. uni.hideKeyboard();
  304. },
  305. // 格式化日期的月份或天数的显示(小于10,在前面增加0)
  306. getFormatDate(value) {
  307. if (value == undefined || value == '') {
  308. return '';
  309. }
  310. var str = value;
  311. if (parseInt(value) < 10) {
  312. str = '0' + value;
  313. }
  314. return str;
  315. }
  316. }
  317. };
  318. </script>
  319. <style lang="scss">
  320. .scoped-header {
  321. .img {
  322. display: flex;
  323. align-content: center;
  324. align-items: center;
  325. .i {
  326. width: 200rpx;
  327. height: 200rpx;
  328. }
  329. }
  330. }
  331. .page {
  332. padding: 20rpx;
  333. background-color: #ffffff;
  334. }
  335. .form {
  336. border-radius: 10rpx;
  337. padding: 0 40rpx;
  338. }
  339. .popup-body {
  340. .tips-title {
  341. font-size: $u-p;
  342. margin-bottom: 20rpx;
  343. }
  344. .tips-content {
  345. font-size: $u-p2;
  346. color: $u-tips-color;
  347. margin-bottom: 60rpx;
  348. }
  349. }
  350. .id_card {
  351. color: #606266;
  352. width: 100%;
  353. height: 350rpx;
  354. display: flex;
  355. flex-direction: column;
  356. align-items: center;
  357. justify-content: center;
  358. background-color: #f4f5f6;
  359. font-size: $u-p2;
  360. }
  361. .footer {
  362. position: absolute;
  363. text-align: center;
  364. bottom: 40rpx;
  365. font-size: $u-p2;
  366. .agreement {
  367. color: $u-type-error;
  368. }
  369. }
  370. .slot-content {
  371. font-size: 28rpx;
  372. color: $u-content-color;
  373. padding: 20rpx;
  374. }
  375. .scoped-estate-list {
  376. .sel-item {
  377. display: flex;
  378. border-bottom: 1PX solid #dcdcdc;
  379. padding: 20rpx;
  380. &.cur {
  381. background: #369af7;
  382. border-radius: 10rpx;
  383. overflow: hidden;
  384. .img {
  385. opacity: .6;
  386. }
  387. .p1 {
  388. color: #fff;
  389. }
  390. .p3 {
  391. color: #fff;
  392. }
  393. }
  394. }
  395. .sel-left {
  396. width: 180rpx;
  397. border-radius: 10rpx;
  398. .img {
  399. width: 180rpx;
  400. height: 120rpx;
  401. border-radius: 10rpx;
  402. }
  403. }
  404. .sel-right {
  405. // width: 450rpx;
  406. margin-left: 20rpx;
  407. .p1 {
  408. font-size: 30rpx;
  409. font-weight: bold;
  410. margin-bottom: 10rpx;
  411. }
  412. .p2 {
  413. margin-bottom: 10rpx;
  414. }
  415. .p3 {
  416. color: #369af7;
  417. font-size: 24rpx;
  418. font-weight: bold;
  419. }
  420. }
  421. }
  422. .scoped-estate-popup {
  423. height: 100%;
  424. padding-bottom: 100rpx;
  425. .popup-body {
  426. box-sizing: border-box;
  427. border-bottom: 1PX solid #dcdcdc;
  428. }
  429. }
  430. .scoped-popup-header-input {
  431. position: fixed;
  432. width: 90%;
  433. display: flex;
  434. border-bottom: 1PX solid #dcdcdc;
  435. .input {
  436. flex: 1;
  437. padding-left: 20rpx;
  438. height: 80rpx;
  439. .u-input__input {
  440. height: 80rpx;
  441. }
  442. }
  443. .b {
  444. width: 200rpx;
  445. height: 80rpx;
  446. line-height: 80rpx;
  447. background: #2d8cf0;
  448. color: #fff;
  449. text-align: center;
  450. margin-left: 20rpx;
  451. }
  452. }
  453. </style>