join2.vue 10 KB

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