您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

subscription-form.js 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. var app = new Vue({
  2. el: '#app-subscription-form',
  3. data: {
  4. loading: true,
  5. idSubscription: 0,
  6. pointsSale: [],
  7. idPointSaleActive: 0,
  8. pointSaleActive: null,
  9. pointsSaleCodes: [],
  10. dateBegin: null,
  11. dateEnd: null,
  12. weekFrequency: 1,
  13. autoPayment: true,
  14. monday: false,
  15. tuesday: false,
  16. wednesday: false,
  17. thursday: false,
  18. friday: false,
  19. saturday: false,
  20. sunday: false,
  21. products: [],
  22. errors: [],
  23. disableSubmitButton: false,
  24. lastCountDays: 0,
  25. comment: ''
  26. },
  27. mounted: function() {
  28. this.init();
  29. },
  30. methods: {
  31. init: function() {
  32. var app = this ;
  33. if($('#subscription-id').val() != 0) {
  34. this.idSubscription = $('#subscription-id').val() ;
  35. }
  36. this.dateBegin = new Date() ;
  37. axios.get("ajax-infos",{params: {idSubscription : this.idSubscription}})
  38. .then(function(response) {
  39. app.products = response.data.products ;
  40. app.pointsSale = response.data.points_sale ;
  41. if(app.idSubscription > 0) {
  42. app.validatePointSale(response.data.id_point_sale) ;
  43. app.weekFrequency = response.data.week_frequency ;
  44. app.autoPayment = response.data.auto_payment ;
  45. var arrayDateBegin = response.data.date_begin.split('-') ;
  46. app.dateBegin = new Date(arrayDateBegin[0], arrayDateBegin[1] - 1, arrayDateBegin[2]) ;
  47. if(response.data.date_end && response.data.date_end.length > 0) {
  48. var arrayDateEnd = response.data.date_begin.split('-') ;
  49. app.dateEnd = new Date(arrayDateEnd[0], arrayDateEnd[1] - 1, arrayDateEnd[2]) ;
  50. }
  51. app.monday = response.data.monday ;
  52. app.tuesday = response.data.tuesday ;
  53. app.wednesday = response.data.wednesday ;
  54. app.thursday = response.data.thursday ;
  55. app.friday = response.data.friday ;
  56. app.saturday = response.data.saturday ;
  57. app.sunday = response.data.sunday ;
  58. app.comment = response.data.comment ;
  59. }
  60. app.loading = false ;
  61. });
  62. },
  63. formatDate: function(date) {
  64. if(date) {
  65. return ('0' + date.getDate()).slice(-2) + '/' + ('0' + (date.getMonth() + 1)).slice(-2) + '/' + date.getFullYear() ;
  66. }
  67. return false ;
  68. },
  69. pointSaleClick: function(event) {
  70. var app = this ;
  71. var idPointSale = event.currentTarget.getAttribute('data-id-point-sale') ;
  72. var hasCode = event.currentTarget.getAttribute('data-code') ;
  73. if(hasCode) {
  74. axios.get('ajax-validate-code-point-sale',{params: {
  75. idPointSale: idPointSale,
  76. code: this.pointsSaleCodes[idPointSale]
  77. }}).then(function(response) {
  78. if(response.data) {
  79. app.getPointSale(idPointSale).invalid_code = false ;
  80. app.validatePointSale(idPointSale) ;
  81. }
  82. else {
  83. app.getPointSale(idPointSale).invalid_code = true ;
  84. Vue.set(app.pointsSaleCodes, idPointSale, '');
  85. }
  86. }) ;
  87. }
  88. else {
  89. this.validatePointSale(idPointSale) ;
  90. }
  91. },
  92. validatePointSale: function(idPointSale) {
  93. if(this.idPointSaleActive != idPointSale) {
  94. this.monday = false ;
  95. this.tuesday = false ;
  96. this.wednesday = false ;
  97. this.thursday = false ;
  98. this.friday = false ;
  99. this.saturday = false ;
  100. this.sunday = false ;
  101. }
  102. this.pointSaleActive = this.getPointSale(idPointSale) ;
  103. this.idPointSaleActive = idPointSale ;
  104. opendistrib_scroll('step-date') ;
  105. },
  106. getPointSale: function(idPointSale) {
  107. for(var key in this.pointsSale) {
  108. if(this.pointsSale[key].id == idPointSale) {
  109. return this.pointsSale[key] ;
  110. }
  111. }
  112. },
  113. dayChange: function() {
  114. console.log(this.monday+' '+this.tuesday+' '+this.wednesday+' '+
  115. this.thursday+' '+this.friday+' '+this.saturday+' '+this.sunday) ;
  116. var count = Number(this.monday) + Number(this.tuesday) + Number(this.wednesday)
  117. + Number(this.thursday) + Number(this.friday) + Number(this.saturday)
  118. + Number(this.sunday) ;
  119. if(count == 1 && this.lastCountDays == 0) {
  120. this.lastCountDays = count ;
  121. opendistrib_scroll('step-days') ;
  122. }
  123. },
  124. checkProductAvailable: function(product) {
  125. var available = product.active &&
  126. (!this.monday || (this.monday && product.monday)) &&
  127. (!this.tuesday || (this.tuesday && product.tuesday)) &&
  128. (!this.wednesday || (this.wednesday && product.wednesday)) &&
  129. (!this.thursday || (this.thursday && product.thursday)) &&
  130. (!this.friday || (this.friday && product.friday)) &&
  131. (!this.saturday || (this.saturday && product.saturday)) &&
  132. (!this.sunday || (this.sunday && product.sunday)) ;
  133. if(!available) {
  134. product.quantity_form = 0 ;
  135. }
  136. return available ;
  137. },
  138. checkOneProductAvailable: function() {
  139. var count = 0 ;
  140. for(key in this.products) {
  141. if(this.checkProductAvailable(this.products[key])) {
  142. count ++ ;
  143. }
  144. }
  145. return count ;
  146. },
  147. productQuantityClick: function(product, quantity) {
  148. if( this.products[product.index].quantity_form + quantity >= 0) {
  149. this.products[product.index].quantity_form += quantity ;
  150. }
  151. },
  152. oneProductOrdered: function() {
  153. for(var key in this.products) {
  154. if(this.products[key].quantity_form > 0) {
  155. return true ;
  156. }
  157. }
  158. return false ;
  159. },
  160. formatPrice: function(price) {
  161. var isNumberRegExp = new RegExp(/^[-+]?[0-9]+(\.[0-9]+)*$/);
  162. if(isNumberRegExp.test(price) && price > 0) {
  163. return Number(price).toFixed(2).replace('.',',')+' €' ;
  164. }
  165. return '--' ;
  166. },
  167. priceTotal: function(format) {
  168. var price = 0 ;
  169. for(var key in this.products) {
  170. if(this.products[key].quantity_form > 0) {
  171. price += (this.products[key].quantity_form / this.products[key].coefficient_unit) * this.products[key].price ;
  172. }
  173. }
  174. if(format) {
  175. return this.formatPrice(price) ;
  176. }
  177. else {
  178. return price ;
  179. }
  180. },
  181. formSubmit: function() {
  182. this.checkForm() ;
  183. if(!this.errors.length && !this.disableSubmitButton) {
  184. this.disableSubmitButton = true ;
  185. var productsArray = {} ;
  186. for(var key in this.products) {
  187. if( this.products[key].quantity_form != null &&
  188. this.products[key].quantity_form > 0) {
  189. productsArray['product_'+this.products[key].id] = this.products[key].quantity_form ;
  190. }
  191. }
  192. axios.post('ajax-process', {
  193. idSubscription: this.idSubscription,
  194. SubscriptionForm: {
  195. id_point_sale: this.idPointSaleActive,
  196. date_begin: this.dateBegin ? this.formatDate(this.dateBegin) : '',
  197. date_end: this.dateEnd ? this.formatDate(this.dateEnd) : '',
  198. week_frequency: this.weekFrequency,
  199. auto_payment: this.autoPayment,
  200. monday: this.monday == true ? 1 : 0,
  201. tuesday: this.tuesday == true ? 1 : 0,
  202. wednesday: this.wednesday == true ? 1 : 0,
  203. thursday: this.thursday == true ? 1 : 0,
  204. friday: this.friday == true ? 1 : 0,
  205. saturday: this.saturday == true ? 1 : 0,
  206. sunday: this.sunday == true ? 1 : 0,
  207. products: productsArray,
  208. comment: this.comment
  209. }
  210. }).then(function(response) {
  211. window.location.href = opendistrib_base_url(true)+'subscription/index' ;
  212. });
  213. }
  214. },
  215. checkForm: function() {
  216. var app = this ;
  217. this.errors = [] ;
  218. if(!this.idPointSaleActive) {
  219. this.errors.push('Veuillez sélectionner un point de vente') ;
  220. }
  221. else {
  222. if(this.pointSaleActive.code && this.pointSaleActive.code.length > 0) {
  223. axios.get('ajax-validate-code-point-sale',{params: {
  224. idPointSale: this.idPointSaleActive,
  225. code: this.pointSaleActive.code
  226. }}).then(function(response) {
  227. if(response.data) {
  228. app.pointsSale[idPointSale].invalid_code = false ;
  229. }
  230. else {
  231. app.pointsSale[idPointSale].invalid_code = true ;
  232. Vue.set(app.pointsSaleCodes, idPointSale, '');
  233. }
  234. }) ;
  235. }
  236. }
  237. var regexDate = /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/;
  238. if(!this.dateBegin) {
  239. this.errors.push('Veuillez sélectionner une date de début') ;
  240. }
  241. else {
  242. if(!regexDate.test(this.formatDate(this.dateBegin))) {
  243. this.errors.push('Mauvais format de date de début') ;
  244. }
  245. }
  246. if(this.dateEnd && this.dateEnd.length > 0 && !regexDate.test(this.formatDate(this.dateEnd))) {
  247. this.errors.push('Mauvais format de date de fin') ;
  248. }
  249. if(this.weekFrequency != 1 && this.weekFrequency != 2 &&
  250. this.weekFrequency != 3 && this.weekFrequency != 4) {
  251. this.errors.push('Veuillez sélectionner une périodicité') ;
  252. }
  253. if(!this.monday && !this.tuesday && !this.wednesday && !this.thursday &&
  254. !this.friday && !this.saturday) {
  255. this.errors.push('Veuillez sélectionner un jour de distribution') ;
  256. }
  257. if(!this.oneProductOrdered()) {
  258. this.errors.push('Veuillez choisir au moins un produit') ;
  259. }
  260. if(this.errors.length) {
  261. window.scroll(0, $('#page-title').position().top - 25) ;
  262. }
  263. }
  264. }
  265. });