add.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683
  1. <template>
  2. <div class="addActivity">
  3. <div class="reportBody">
  4. <ul class="detailUl">
  5. <li class="detailLi2">
  6. <span class="liName" style="margin-bottom: 16rpx"><span style="color: red">*</span> &nbsp;活动主题</span>
  7. <van-field
  8. :value="form.activityName"
  9. autosize
  10. type="textarea"
  11. placeholder="请填写活动名称"
  12. class="myField"
  13. maxlength="50"
  14. show-word-limit
  15. @change="changeActivityName"
  16. />
  17. </li>
  18. <li class="detailLi2">
  19. <span class="liName">
  20. <span style="color: red">*</span> &nbsp;选择类别
  21. </span>
  22. <div class="detailLi2Box">
  23. <div class="detailLi2BoxTop">
  24. <div class="checkItem" :class="item.value===form.activityType?'checked':''" v-for="item in tabList" @click="clickCheck(item)">{{item.label}}</div>
  25. </div>
  26. </div>
  27. </li>
  28. <li class="detailLi2">
  29. <span class="liName">
  30. <span style="color: red">*</span> &nbsp;主题图
  31. <span style="color: #B3B3B3;font-size: 28rpx">(支持图片/视频上传限20M内,最多1张)</span>
  32. </span>
  33. <div class="detailLi2Box" style="margin: 24rpx 0 0 0">
  34. <van-uploader
  35. :max-count="6"
  36. @delete="deleteRYXXZP"
  37. :file-list="fileList"
  38. @after-read="uploadRYXXZP"
  39. :show-upload="true"
  40. accept="media"
  41. />
  42. </div>
  43. </li>
  44. <li class="detailLi" style="border-bottom: none">
  45. <span class="liName">
  46. <span style="color: red">*</span>&nbsp; 联系电话
  47. </span>
  48. <input placeholder="请填写" v-model="form.activityPhone" class="liIpt">
  49. </li>
  50. </ul>
  51. </div>
  52. <div class="reportBody">
  53. <ul class="detailUl">
  54. <li class="detailLi2">
  55. <span class="liName" style="margin-bottom: 16rpx"><span style="color: red">*</span>&nbsp; 活动举办</span>
  56. <van-field
  57. :value="form.activitiesNotice"
  58. autosize
  59. type="textarea"
  60. placeholder="请填写活动举办相关信息"
  61. class="myField"
  62. maxlength="2000"
  63. show-word-limit
  64. @change="changeNotice"
  65. />
  66. </li>
  67. <li class="detailLi2">
  68. <span class="liName" style="margin-bottom: 16rpx">
  69. <span style="color: red">*</span>&nbsp; 活动内容
  70. </span>
  71. <van-field
  72. :value="form.activityContent"
  73. autosize
  74. type="textarea"
  75. placeholder="请填写活动举办相关信息"
  76. class="myField"
  77. maxlength="2000"
  78. show-word-limit
  79. @change="changeContent"
  80. />
  81. <span class="liName" style="margin: 24rpx 0">
  82. <span style="color: #B3B3B3;font-size: 28rpx">(支持图片上传限20M内,最多6张)</span>
  83. </span>
  84. <div class="detailLi2Box">
  85. <van-uploader
  86. :max-count="6"
  87. @delete="deleteRYXXZP2"
  88. :file-list="fileList2"
  89. @after-read="uploadRYXXZP2"
  90. :show-upload="true"
  91. />
  92. </div>
  93. </li>
  94. <li class="detailLi2">
  95. <span class="liName" style="margin-bottom: 16rpx">
  96. <span style="color: red">*</span>&nbsp; 活动时间
  97. </span>
  98. <div class="choosTimeBox">
  99. <input placeholder="请选择年月日时分" class="timeIpt" disabled v-model="form.activityStartTime" @click="showTime('actStartTime')">
  100. <span class="midZ">至</span>
  101. <input placeholder="请选择年月日时分" class="timeIpt" disabled v-model="form.activityEndTime" @click="showTime('actEndTime')">
  102. </div>
  103. </li>
  104. <li class="detailLi2" style="border-bottom: none">
  105. <span class="liName" style="margin-bottom: 16rpx">
  106. <span style="color: red">*</span>&nbsp; 活动地址
  107. </span>
  108. <div class="placeBox">
  109. <input placeholder="使用地图拾取" class="locationIpt" v-model="form.activityAddress" disabled>
  110. <van-icon name="location" style="color: rgba(51, 51, 51, 0.90);font-size: 30rpx" @tap="toMap"/>
  111. </div>
  112. <div class="placeBox">
  113. <input placeholder="请补充详细地址,如楼栋-门牌号" class="locationIpt" v-model="form.activityAddressDetail">
  114. </div>
  115. </li>
  116. </ul>
  117. </div>
  118. <div class="reportBody">
  119. <ul class="detailUl">
  120. <li class="detailLi2">
  121. <span class="liName" style="margin-bottom: 16rpx"><span style="color: red">*</span>&nbsp; 报名条件</span>
  122. <van-field
  123. :value="form.registrationConditions"
  124. autosize
  125. type="textarea"
  126. placeholder="请填写活动举办相关信息"
  127. class="myField"
  128. maxlength="2000"
  129. show-word-limit
  130. @change="changeCond"
  131. />
  132. </li>
  133. <li class="detailLi2">
  134. <span class="liName" style="margin-bottom: 16rpx">
  135. <span style="color: red">*</span>&nbsp; 报名时间
  136. </span>
  137. <div class="choosTimeBox">
  138. <input placeholder="请选择年月日时分" class="timeIpt" disabled v-model="form.registrationStartTime" @click="showTime('regStartTime')">
  139. <span class="midZ">至</span>
  140. <input placeholder="自动带出" class="timeIpt" disabled v-model="form.activityStartTime" style="background: white">
  141. <!-- <span>活动开始时间</span>-->
  142. </div>
  143. </li>
  144. <li class="detailLi2" style="border-bottom: none">
  145. <span class="liName" style="margin-bottom: 16rpx">活动参与</span>
  146. <van-field
  147. :value="form.activityQuota"
  148. autosize
  149. type="textarea"
  150. placeholder="请填写限制人数等"
  151. class="myField"
  152. maxlength="2000"
  153. show-word-limit
  154. @change="changeQuota"
  155. />
  156. </li>
  157. </ul>
  158. </div>
  159. <div class="buttonBox">
  160. <button class="btn zcBtn" @tap="submit('0')">暂存</button>
  161. <button class="btn fbBtn" @tap="submit('1')">发布</button>
  162. </div>
  163. <van-popup
  164. :show="timeShow"
  165. position="bottom"
  166. custom-style="height: 50%;"
  167. >
  168. <van-datetime-picker
  169. type="datetime"
  170. :value="currentDate"
  171. :formatter="formatter"
  172. @cancel="timeShow=false"
  173. @confirm="selectTime"
  174. />
  175. </van-popup>
  176. </div>
  177. </template>
  178. <script>
  179. import { getByCodes,insertHomeCommunityActivity, getUserLocalStorageInfo} from "@/js_sdk/http";
  180. export default {
  181. data(){
  182. return {
  183. dc_key:['activity_type'],
  184. timeShow:false,
  185. isCheck:false,
  186. isCheck2:false,
  187. time1Str:'',
  188. time2Str:'',
  189. regTime1Str:'',
  190. place:'',
  191. currentDate: new Date().getTime(),
  192. form:{
  193. createdBy:getUserLocalStorageInfo().userId,
  194. activityName:'',
  195. activityType:'3',
  196. activityPhone: '',
  197. activitiesNotice: '',
  198. activityContent: '',
  199. activityAddress:'',
  200. activityEndTime:'',
  201. activityStartTime:'',
  202. registrationConditions:'',
  203. activityAddressDetail:'',
  204. activityQuota:'',
  205. longitude:'',
  206. latitude:'',
  207. registrationStartTime:'',
  208. registrationEndTime:'',
  209. annex:'',
  210. releaseUserName:'',
  211. },
  212. phone:'',
  213. tabList:[],
  214. fileList:[],
  215. fileList2:[],
  216. optionsType:'',
  217. timePickerType:'',
  218. }
  219. },
  220. onLoad(options) {
  221. if (options.item){
  222. const form = JSON.parse(options.item)
  223. this.form = form
  224. this.fileList = JSON.parse(form.annex)
  225. const fileId = form.activityContentPicture.split(',')
  226. fileId.forEach(item=>{
  227. this.fileList2.push({
  228. imgUrl: "/FileController/download/" + item,
  229. id: item,
  230. url:
  231. this.$constant.BASE_URI +
  232. "/FileController/download/" +
  233. item,
  234. type:'image',
  235. isImage:true,
  236. });
  237. })
  238. }
  239. },
  240. onShow(){
  241. this.getByCodes()
  242. },
  243. methods:{
  244. toMap(){
  245. let _this = this
  246. uni.chooseLocation({
  247. success: function (res) {
  248. console.log('选择的位置:', res.name);
  249. _this.form.activityAddress = res.name
  250. console.log('纬度:' + res.latitude + ',经度:' + res.longitude);
  251. _this.form.longitude = res.longitude
  252. _this.form.latitude = res.latitude
  253. // 其他业务逻辑
  254. },
  255. fail: function (error) {
  256. console.error('Choose location failed: ' + JSON.stringify(error));
  257. },
  258. complete: function () {
  259. console.log('chooseLocation operation is complete');
  260. }
  261. });
  262. },
  263. changeActivityName(e){
  264. this.form.activityName = e.detail
  265. },
  266. changeNotice(e){
  267. this.form.activitiesNotice = e.detail
  268. },
  269. changeContent(e){
  270. this.form.activityContent = e.detail
  271. },
  272. changeCond(e){
  273. this.form.registrationConditions = e.detail
  274. },
  275. changeQuota(e){
  276. this.form.activityQuota = e.detail
  277. },
  278. async getByCodes() {
  279. let data = await getByCodes(JSON.stringify(this.dc_key));
  280. this.tabList = this.$common.handleDicList(data).activity_type;
  281. console.log('this.tabList',this.tabList)
  282. },
  283. clickCheck(item){
  284. this.form.activityType = item.value
  285. },
  286. selectTime(e){
  287. const dateString = this.timestampToDate(e.detail);
  288. if(this.timePickerType === 'actStartTime'){
  289. this.time1Str = e.detail
  290. if (this.time2Str){
  291. if (this.time1Str >= this.time2Str){
  292. this.$showToast("请选择合理时间");
  293. return
  294. }else{
  295. this.form.activityStartTime = dateString
  296. }
  297. }else{
  298. this.form.activityStartTime = dateString
  299. }
  300. }else if(this.timePickerType === 'actEndTime'){
  301. this.time2Str = e.detail
  302. if (this.time1Str){
  303. if (this.time1Str >= this.time2Str){
  304. this.$showToast("请选择合理时间");
  305. return
  306. }else{
  307. this.form.activityEndTime = dateString
  308. }
  309. }else{
  310. this.form.activityEndTime = dateString
  311. }
  312. }else if(this.timePickerType === 'regStartTime'){
  313. this.regTime1Str = e.detail
  314. if (this.time1Str){
  315. if (this.time1Str <= this.regTime1Str){
  316. this.$showToast("请选择合理时间");
  317. return
  318. }else{
  319. this.form.registrationStartTime = dateString
  320. }
  321. }else{
  322. this.form.registrationStartTime = dateString
  323. }
  324. }
  325. this.timeShow = false
  326. // console.log(dateString)
  327. },
  328. showTime(e){
  329. if (e === 'regStartTime'){
  330. if (!this.form.activityStartTime){
  331. this.$showToast("请先在上方选择活动开始时间");
  332. }else{
  333. this.timePickerType = e
  334. this.timeShow = true
  335. }
  336. } else{
  337. this.timePickerType = e
  338. this.timeShow = true
  339. }
  340. },
  341. submit(ele){
  342. const _this = this;
  343. if (_this.form.activityName === "") {
  344. this.$showToast("请填写活动主题");
  345. return;
  346. }
  347. if (_this.form.activityType === "") {
  348. this.$showToast("请选择活动类型");
  349. return;
  350. }
  351. if (_this.form.registrationStartTime === "") {
  352. this.$showToast("请选择报名开始时间");
  353. return;
  354. }
  355. if (_this.form.activityStartTime === "") {
  356. this.$showToast("请选择活动开始时间");
  357. return;
  358. }
  359. if (_this.form.activityEndTime === "") {
  360. this.$showToast("请选择活动结束时间");
  361. return;
  362. }
  363. if (!_this.fileList.length) {
  364. this.$showToast("请上传主题图");
  365. return;
  366. }
  367. if (!_this.fileList2.length) {
  368. this.$showToast("请上传活动内容图片");
  369. return;
  370. }
  371. if (_this.form.activityPhone === "") {
  372. this.$showToast("请输入联系电话");
  373. return;
  374. }
  375. if (_this.form.activityAddress === "") {
  376. this.$showToast("请输入活动地址");
  377. return;
  378. }
  379. if (!_this.form.registrationConditions) {
  380. this.$showToast("请输入报名条件");
  381. return;
  382. }
  383. if (!_this.form.activityAddressDetail) {
  384. this.$showToast("请补充详细地址");
  385. return;
  386. }
  387. if (!_this.form.registrationStartTime) {
  388. this.$showToast("请选择报名开始时间");
  389. return;
  390. }
  391. // 差报名条件等必填
  392. // console.log(_this.form)
  393. _this.form.registrationEndTime = this.form.activityStartTime
  394. _this.form.annex = JSON.stringify(_this.fileList);
  395. _this.form.releaseStatus = ele;
  396. if (ele==='1'){
  397. _this.form.releaseUserName = getUserLocalStorageInfo().username
  398. }
  399. const arr = []
  400. _this.fileList2.forEach(e=>{
  401. arr.push(e.id)
  402. })
  403. _this.form.activityContentPicture = arr.toString()
  404. console.log('_this.form',_this.form)
  405. insertHomeCommunityActivity(_this.form).then(res=>{
  406. if (res.errno == 0){
  407. this.$showToast("提交成功");
  408. uni.navigateBack()
  409. }else{
  410. this.$showToast(res.errMsg);
  411. }
  412. })
  413. },
  414. deleteRYXXZP(event) {
  415. this.fileList.splice(event.detail.index, 1);
  416. this.$forceUpdate();
  417. },
  418. deleteRYXXZP2(event) {
  419. this.fileList2.splice(event.detail.index, 1);
  420. this.$forceUpdate();
  421. },
  422. uploadRYXXZP(event) {
  423. // console.log(event)
  424. let that = this;
  425. const { file } = event.detail;
  426. console.log(event.detail)
  427. uni.uploadFile({
  428. url: that.$constant.BASE_URI + "/wx/fileController/upload",
  429. filePath: file.url,
  430. name: "file",
  431. formData: { user: "test" },
  432. success(res) {
  433. // 上传完成需要更新 fileList
  434. let data = JSON.parse(res.data);
  435. if (event.detail.file.type==='image'){
  436. that.fileList.push({
  437. imgUrl: "/FileController/download/" + data.data[0],
  438. id: data.data[0],
  439. url:
  440. that.$constant.BASE_URI +
  441. "/FileController/download/" +
  442. data.data[0],
  443. type:event.detail.file.type,
  444. isImage:true,
  445. });
  446. }else{
  447. that.fileList.push({
  448. imgUrl: "/FileController/download/" + data.data[0],
  449. id: data.data[0],
  450. url:
  451. that.$constant.BASE_URI +
  452. "/FileController/download/" +
  453. data.data[0],
  454. type:event.detail.file.type,
  455. isVideo:true
  456. });
  457. }
  458. },
  459. fail(res) {},
  460. });
  461. },
  462. uploadRYXXZP2(event) {
  463. // console.log(event)
  464. let that = this;
  465. const { file } = event.detail;
  466. console.log(event.detail)
  467. uni.uploadFile({
  468. url: that.$constant.BASE_URI + "/wx/fileController/upload",
  469. filePath: file.url,
  470. name: "file",
  471. formData: { user: "test" },
  472. success(res) {
  473. // 上传完成需要更新 fileList
  474. let data = JSON.parse(res.data);
  475. if (event.detail.file.type==='image'){
  476. that.fileList2.push({
  477. imgUrl: "/FileController/download/" + data.data[0],
  478. id: data.data[0],
  479. url:
  480. that.$constant.BASE_URI +
  481. "/FileController/download/" +
  482. data.data[0],
  483. type:event.detail.file.type,
  484. isImage:true,
  485. });
  486. }else{
  487. that.fileList2.push({
  488. imgUrl: "/FileController/download/" + data.data[0],
  489. id: data.data[0],
  490. url:
  491. that.$constant.BASE_URI +
  492. "/FileController/download/" +
  493. data.data[0],
  494. type:event.detail.file.type,
  495. isVideo:true
  496. });
  497. }
  498. },
  499. fail(res) {},
  500. });
  501. },
  502. // 时间选择单位
  503. formatter(type, val) {
  504. if (type === 'year') {
  505. return `${val}年`;
  506. } else if (type === 'month') {
  507. return `${val}月`;
  508. }else if (type === 'day') {
  509. return `${val}日`;
  510. }else if (type === 'hour') {
  511. return `${val}时`;
  512. }else if (type === 'minute') {
  513. return `${val}分`;
  514. }
  515. return val;
  516. },
  517. // 时间戳转换方法
  518. timestampToDate(timestamp) {
  519. const date = new Date(timestamp); // 如果timestamp是字符串,确保它是整数:parseInt(timestamp)
  520. const year = date.getFullYear();
  521. const month = (date.getMonth() + 1).toString().padStart(2, '0');
  522. const day = date.getDate().toString().padStart(2, '0');
  523. const hours = date.getHours().toString().padStart(2, '0');
  524. const minutes = date.getMinutes().toString().padStart(2, '0');
  525. const seconds = date.getSeconds().toString().padStart(2, '0');
  526. return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  527. },
  528. }
  529. }
  530. </script>
  531. <style lang="scss">
  532. .addActivity{
  533. .reportBody{
  534. margin-top: 24rpx;
  535. padding: 0rpx 36rpx;
  536. background: white;
  537. //height: 1416rpx;
  538. box-sizing: border-box;
  539. .record {
  540. display: flex;
  541. align-items: center;
  542. justify-content: flex-end;
  543. color: #0365F9;
  544. font-size: 32rpx;
  545. .recordImg{
  546. width: 36rpx;
  547. height: 36rpx;
  548. padding: 5rpx 0 0 10rpx;
  549. }
  550. }
  551. .detailUl{
  552. margin-top: 20rpx;
  553. .liName{
  554. font-size: 32rpx;
  555. color: rgba(51, 51, 51, 1);
  556. white-space: nowrap;
  557. }
  558. .liIpt{
  559. text-align: right;
  560. }
  561. .detailLi{
  562. display: flex;
  563. justify-content: space-between;
  564. align-items: center;
  565. padding: 32rpx 0;
  566. border-bottom: 2rpx solid #E6E6E6;
  567. .liInfo{
  568. display: inline-block;
  569. text-align: right;
  570. max-width: 428rpx;
  571. color: rgba(102, 102, 102, 1);
  572. font-size: 32rpx;
  573. line-height: 38rpx;
  574. display: flex;
  575. align-items: center;
  576. .radio{
  577. margin-left: 64rpx;
  578. }
  579. .phoneIcon{
  580. width: 64rpx;
  581. height: 64rpx;
  582. margin-left: 24rpx;
  583. }
  584. }
  585. }
  586. .detailLi2{
  587. display: flex;
  588. flex-direction: column;
  589. padding: 32rpx 0;
  590. border-bottom: 2rpx solid #E6E6E6;
  591. .detailLi2BoxTop{
  592. display: flex;
  593. flex-wrap: wrap;
  594. justify-content: space-between;
  595. margin: 12rpx 0;
  596. .checkItem{
  597. width: 160rpx;
  598. height: 64rpx;
  599. font-size: 28rpx;
  600. color: #666666;
  601. display: flex;
  602. align-items: center;
  603. justify-content: center;
  604. background: #F5F7FA;
  605. border-radius: 8rpx;
  606. margin: 12rpx 0;
  607. }
  608. .checked{
  609. background: #0365F9;
  610. color: white;
  611. }
  612. }
  613. .choosTimeBox{
  614. display: flex;
  615. align-items: center;
  616. justify-content: space-between;
  617. .timeIpt{
  618. width: 300rpx;
  619. height: 96rpx;
  620. background: rgba(245, 247, 250, 1);
  621. font-size: 32rpx;
  622. border-radius: 8rpx;
  623. padding: 0 20rpx;
  624. box-sizing: border-box;
  625. }
  626. .midZ{
  627. color: rgba(51, 51, 51, 1);
  628. font-size: 32rpx;
  629. }
  630. }
  631. .placeBox{
  632. display: flex;
  633. justify-content: space-between;
  634. align-items: center;
  635. font-size: 32rpx;
  636. margin: 12rpx 0;
  637. .locationIpt{
  638. width: 600rpx;
  639. height: 96rpx;
  640. font-size: 32rpx;
  641. border-radius: 8rpx;
  642. padding: 0 20rpx;
  643. box-sizing: border-box;
  644. }
  645. }
  646. }
  647. }
  648. }
  649. .van-cell {
  650. background: #F5F7FA !important;
  651. border-radius: 8rpx;
  652. font-size: 28rpx;
  653. }
  654. .buttonBox{
  655. display: flex;
  656. justify-content: center;
  657. .btn{
  658. width: 240rpx;
  659. height: 80rpx;
  660. display: flex;
  661. border-radius: 8rpx;
  662. align-items: center;
  663. justify-content: center;
  664. margin: 48rpx 16rpx 150rpx 16rpx;
  665. color: white;
  666. letter-spacing: 2rpx;
  667. text-indent: 2rpx;
  668. &::after{
  669. border: none;
  670. }
  671. }
  672. .zcBtn{
  673. background: rgba(254, 134, 67, 1);
  674. }
  675. .fbBtn{
  676. background: #0365F9;
  677. }
  678. }
  679. }
  680. </style>