event.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
  1. <!-- +---------------------------------------------------------------------- -->
  2. <!-- | CRMEB [ CRMEB赋能开发者,助力企业发展 ] -->
  3. <!-- +---------------------------------------------------------------------- -->
  4. <!-- | Copyright (c) 2016~2022 https://www.crmeb.com All rights reserved. -->
  5. <!-- +---------------------------------------------------------------------- -->
  6. <!-- | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权 -->
  7. <!-- +---------------------------------------------------------------------- -->
  8. <!-- | Author: CRMEB Team <admin@crmeb.com> -->
  9. <!-- +---------------------------------------------------------------------- -->
  10. {extend name="public/container" /}
  11. {block name="title"}填写资料{/block}
  12. {block name="head"}
  13. <style>
  14. body {
  15. background-color: #F5F5F5;
  16. }
  17. .picker .picker-panel .picker-choose .picker-title {
  18. font-weight: 500 !important;
  19. font-size: .32rem !important;
  20. line-height: 1.12rem !important;
  21. color: #282828 !important;
  22. }
  23. .select-multiple .panel {
  24. position: fixed;
  25. bottom: 0;
  26. left: 0;
  27. z-index: 600;
  28. display: flex;
  29. flex-direction: column;
  30. width: 100%;
  31. height: 4.86rem;
  32. border-radius: .16rem .16rem 0 0;
  33. background: #FFFFFF;
  34. transform: translateY(4.86rem);
  35. transition: all .5s;
  36. }
  37. .select-multiple .panel.on {
  38. transform: translateY(0);
  39. }
  40. .select-multiple .panel-head {
  41. display: flex;
  42. height: 1rem;
  43. font-size: .32rem;
  44. line-height: 1rem;
  45. text-align: center;
  46. color: #282828;
  47. }
  48. .select-multiple .panel-head div:first-child {
  49. width: 1.04rem;
  50. color: #999999;
  51. cursor: pointer;
  52. }
  53. .select-multiple .panel-head div:nth-child(2) {
  54. flex: 1;
  55. min-width: 0;
  56. overflow: hidden;
  57. white-space: nowrap;
  58. text-overflow: ellipsis;
  59. }
  60. .select-multiple .panel-head div:nth-child(3) {
  61. width: 1.04rem;
  62. color: #191C6E;
  63. cursor: pointer;
  64. }
  65. .select-multiple .panel-body {
  66. flex: 1;
  67. min-height: 0;
  68. padding: .2rem 0 0 .2rem;
  69. overflow-x: hidden;
  70. overflow-y: auto;
  71. }
  72. .select-multiple .panel-body label {
  73. display: inline-block;
  74. margin: 0 .2rem .2rem 0;
  75. font-size: .32rem;
  76. line-height: .8rem;
  77. color: #282828;
  78. }
  79. .select-multiple .panel-body input[type="checkbox"] {
  80. width: .32rem;
  81. height: .32rem;
  82. margin-right: .16rem;
  83. vertical-align: text-bottom;
  84. appearance: checkbox;
  85. }
  86. </style>
  87. {/block}
  88. {block name="content"}
  89. <div v-cloak id="app" class="activity-event">
  90. <div class="form-section">
  91. <form>
  92. <label :class="{ required: item.is_required }" v-for="(item, index) in event" :key="item.id">
  93. <div>{{ item.event_name }}</div>
  94. <input v-if="item.event_type === 1" v-model.trim="item.event_value" :placeholder="'请输入' + item.event_name" type="text">
  95. <input v-else-if="item.event_type === 4" v-model.trim="item.event_value" :placeholder="'请输入' + item.event_name" type="tel"
  96. maxlength="11">
  97. <input v-else-if="item.event_type === 5 || item.event_type === 2" v-model="item.event_value" :placeholder="'请选择' + item.event_name"
  98. type="text" readonly @focus="focusPicker(item.eventValue, item.event_name, index)">
  99. <input v-else-if="item.event_type === 3" v-model="item.event_value" :placeholder="'请选择' + item.event_name" type="text" readonly
  100. @focus="focusMultiple(item.eventValue, item.event_name, index)">
  101. <i v-if="item.event_type !== 1 && item.event_type !== 4" class="iconfont iconxiangyou"></i>
  102. </label>
  103. <label v-if="selectedPeople" class="required">
  104. <div>人数</div>
  105. <input v-model="selectedPeople" type="text" placeholder="请选择" readonly @focus="focusPicker(peopleOptions, '人数')">
  106. <i class="iconfont iconxiangyou"></i>
  107. </label>
  108. </form>
  109. </div>
  110. <div class="foot-section">
  111. <div>合计:</div>
  112. <div><span>¥</span>{{ total }}</div>
  113. <button type="button" @click="register">立即报名</button>
  114. </div>
  115. <!-- 支付弹窗 -->
  116. <pay-dialog :open.sync="payDialogOpen" :money="total" :now_money="nowMoney" :special_id="id" :pay_type_num="20" :is-wechat="isWechat"
  117. :is-alipay="!!isAlipay" :is-balance="isBalance" :signs="{ event: event }" :template-id="templateId" :wxpay-h5="wxpayH5"
  118. :price-id="priceId" :is-member="is_member" :member-money="price.length && price[selectedIndex].event_mer_price"
  119. :member-link="memberLink" @change="changeVal">
  120. </pay-dialog>
  121. <div class="select-multiple">
  122. <div :class="{ mask: multipleShow }"></div>
  123. <div :class="{ on: multipleShow }" class="panel">
  124. <div class="panel-head">
  125. <div @click="multipleShow = false">取消</div>
  126. <div>{{ multipleTitle }}</div>
  127. <div @click="multipleShow = false">确定</div>
  128. </div>
  129. <div class="panel-body">
  130. <label v-for="item in multipleOptions"><input v-model="event[multipleIndex].event_value" :value="item.value"
  131. type="checkbox">{{ item.text }}</label>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. {/block}
  137. {block name="foot"}
  138. <script>
  139. require(['vue', 'store', 'picker', 'components/pay-dialog/index'], function (Vue, store, Picker, PayDialog) {
  140. var level = "{$userInfo['level']}";
  141. var nowMoney = "{$now_money}";
  142. var isWechat = "{$isWechat}";
  143. var isAlipay = "{$is_alipay}";
  144. var isBalance = "{$is_yue}";
  145. var wxpayH5 = "{$is_h5_wechat_payment_switch}";
  146. var callbackUrl = "{$callback_url}";
  147. var memberLink = "{:url('special/member_recharge')}";
  148. new Vue({
  149. el: '#app',
  150. components: {
  151. 'pay-dialog': PayDialog
  152. },
  153. data: {
  154. id: 0,
  155. event: [],
  156. price: [],
  157. selectedPeople: '',
  158. selectedIndex: 0,
  159. total: 0,
  160. picker: null,
  161. payDialogOpen: false, // 是否显示支付弹窗
  162. nowMoney: nowMoney,
  163. isWechat: isWechat,
  164. isAlipay: Number(isAlipay),
  165. isBalance: isBalance,
  166. signs: 0,
  167. templateId: '',
  168. wxpayH5: wxpayH5,
  169. priceId: 0,
  170. peopleOptions: [],
  171. multipleTitle: '',
  172. multipleOptions: [],
  173. multipleIndex: 0,
  174. multipleShow: false,
  175. is_member: Number(level),
  176. memberLink: memberLink
  177. },
  178. created: function () {
  179. this.id = $h.getParmas('id');
  180. this.getActivityEventData();
  181. this.getActivityEventPrice();
  182. this.picker = new Picker({
  183. data: [[]],
  184. title: ''
  185. });
  186. this.picker.on('picker.select', this.pickerSelect);
  187. if (this.isWechat) {
  188. this.getTemplateIds();
  189. }
  190. },
  191. methods: {
  192. focusMultiple: function (data, title, index) {
  193. this.multipleShow = true;
  194. this.multipleTitle = title;
  195. this.multipleOptions = this.event[index].eventValue;
  196. this.multipleIndex = index;
  197. },
  198. // 资料项
  199. getActivityEventData: function () {
  200. var vm = this;
  201. store.baseGet($h.U({
  202. c: 'activity',
  203. a: 'getActivityEventData',
  204. q: {
  205. id: this.id
  206. }
  207. }), function (res) {
  208. var data = res.data.data;
  209. data.forEach(function (item) {
  210. item.eventValue = item.event_value.split('#');
  211. item.eventValue.forEach(function (value, index) {
  212. item.eventValue[index] = {
  213. text: value,
  214. value: value
  215. };
  216. });
  217. item.event_value = item.event_type == 3 ? [] : '';
  218. });
  219. vm.event = data;
  220. });
  221. },
  222. // 价格项
  223. getActivityEventPrice: function () {
  224. var vm = this;
  225. store.baseGet($h.U({
  226. c: 'activity',
  227. a: 'getActivityEventPrice',
  228. q: {
  229. id: this.id
  230. }
  231. }), function (res) {
  232. vm.price = res.data.data;
  233. vm.peopleOptions = vm.price.map(function (item) {
  234. return {
  235. text: item.event_number + '人',
  236. value: item.event_number
  237. };
  238. });
  239. vm.selectedPeople = vm.peopleOptions[vm.selectedIndex].value;
  240. vm.total = vm.price[vm.selectedIndex][level === '1' ? 'event_mer_price' : 'event_price'];
  241. vm.priceId = vm.price[vm.selectedIndex].id;
  242. });
  243. },
  244. // 订阅模板id
  245. getTemplateIds: function () {
  246. var vm = this;
  247. store.baseGet($h.U({
  248. c: 'special',
  249. a: 'getTemplateIds',
  250. q: {
  251. special_id: this.id,
  252. pay_type_num: 20
  253. }
  254. }), function (res) {
  255. vm.templateId = res.data.msg;
  256. });
  257. },
  258. // 确定人数
  259. pickerSelect: function (selectedVal, selectedIndex) {
  260. if (typeof this.focusIndex === 'undefined') {
  261. this.selectedPeople = selectedVal[0];
  262. this.selectedIndex = selectedIndex[0];
  263. this.total = this.price[this.selectedIndex][level === '1' ? 'event_mer_price' : 'event_price'];
  264. this.priceId = this.price[this.selectedIndex].id;
  265. } else {
  266. this.event[this.focusIndex].event_value = selectedVal[0];
  267. }
  268. },
  269. // 立即报名
  270. register: function () {
  271. $h._errorMsgOptions.offset = 'auto';
  272. $h._errorMsgOptions.time = 1500;
  273. for (var i = 0, len = this.event.length; i < len; i++) {
  274. if (!this.event[i].is_required) {
  275. continue;
  276. }
  277. switch (this.event[i].event_type) {
  278. case 1:
  279. if (!this.event[i].event_value) {
  280. $h.pushMsg('请输入' + this.event[i].event_name);
  281. return;
  282. }
  283. break;
  284. case 2:
  285. case 3:
  286. case 5:
  287. if (!this.event[i].event_value) {
  288. $h.pushMsg('请选择' + this.event[i].event_name);
  289. return;
  290. }
  291. break;
  292. case 4:
  293. if (!this.event[i].event_value) {
  294. $h.pushMsg('请输入' + this.event[i].event_name);
  295. return;
  296. } else if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.event[i].event_value)) {
  297. $h.pushMsg('请输入正确的' + this.event[i].event_name);
  298. return;
  299. }
  300. break;
  301. }
  302. }
  303. this.payDialogOpen = true;
  304. },
  305. changeVal: function (opt) {
  306. var action = '';
  307. var value = '';
  308. if (typeof opt !== 'object') {
  309. opt = {};
  310. }
  311. action = opt.action || '';
  312. value = opt.value || '';
  313. if (this[action]) {
  314. this[action](value);
  315. }
  316. },
  317. pay_order: function (data) {
  318. switch (data.data.status) {
  319. case "PAY_ERROR": case 'ORDER_EXIST': case 'ORDER_ERROR':
  320. this.extendOrder(data.msg);
  321. break;
  322. case 'WECHAT_PAY':
  323. this.wechatPay(data.data.result.jsConfig);
  324. break;
  325. case 'WECHAT_H5_PAY':
  326. this.payDialogOpen = false;
  327. window.location.assign(data.data.result.jsConfig.mweb_url + '&redirect_url=' + encodeURIComponent(callbackUrl + '?type=3&id=0'));
  328. break;
  329. case 'SUCCESS':
  330. this.successOrder(data.msg);
  331. break;
  332. case 'ZHIFUBAO_PAY':
  333. window.location.assign($h.U({
  334. m: 'wap',
  335. c: 'alipay',
  336. a: 'index',
  337. q: {
  338. info: data.data.result,
  339. params: 'signup'
  340. }
  341. }));
  342. break;
  343. }
  344. },
  345. focusPicker: function (data, title, index) {
  346. var vm = this;
  347. this.focusIndex = index;
  348. this.picker.show(function () {
  349. vm.picker.refill([data]);
  350. document.querySelector('.picker-title').innerHTML = title;
  351. });
  352. },
  353. successOrder: function (msg) {
  354. $h.showMsg({
  355. title: msg || '支付成功',
  356. icon: 'success',
  357. success: function () {
  358. window.location.assign($h.U({
  359. c: 'my',
  360. a: 'sign_list'
  361. }));
  362. }
  363. });
  364. },
  365. extendOrder: function (msg) {
  366. if (typeof msg === 'object') {
  367. if (msg.errMsg === 'chooseWXPay:cancel') {
  368. msg = '微信支付取消';
  369. } else {
  370. msg = '支付失败';
  371. }
  372. } else {
  373. msg = '支付失败';
  374. }
  375. $h.pushMsg(msg, function () {
  376. window.location.reload();
  377. });
  378. },
  379. wechatPay: function (config) {
  380. var vm = this;
  381. mapleWx($jssdk(), function () {
  382. this.chooseWXPay(config, function () {
  383. vm.successOrder();
  384. }, {
  385. fail: vm.extendOrder,
  386. cancel: vm.extendOrder
  387. });
  388. });
  389. }
  390. }
  391. });
  392. });
  393. </script>
  394. {/block}