HomeSlideImagePage.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <template>
  2. <q-page padding>
  3. <q-btn
  4. round
  5. title="增加一张"
  6. color="primary"
  7. icon="add"
  8. @click="addSlide"
  9. />
  10. <q-btn
  11. round
  12. title="减少一张"
  13. color="orange"
  14. style="margin-left: 10px"
  15. icon="remove"
  16. @click="removeSlide"
  17. />
  18. <q-btn
  19. color="primary"
  20. style="margin-left: 40px"
  21. label="提交"
  22. @click="submitSliders"
  23. ></q-btn>
  24. <label style="margin-left: 40px">当前轮播图数:{{ numberofslides }}</label>
  25. <div
  26. class="row justify-left"
  27. style="margin-top: 50px; border-style: dotted"
  28. v-for="index in numberofslides"
  29. :key="index"
  30. >
  31. <q-input
  32. label="滚动图URL"
  33. v-model="sliders[index - 1]['imageUrl']"
  34. class="col-12"
  35. placeholder="例:http://photoprism.hichinatravel.com/api/v1/t/a33b041a545ac346c67627708086dcca7e33c94f/3exfuda9/fit_2048"
  36. ></q-input>
  37. <q-input
  38. class="col-12"
  39. label="标题"
  40. v-model="sliders[index - 1]['title']"
  41. ></q-input>
  42. <q-input
  43. class="col-12"
  44. label="副标题"
  45. v-model="sliders[index - 1]['subTitle']"
  46. ></q-input>
  47. <q-input
  48. class="col-12"
  49. label="指向博客链接"
  50. v-model="sliders[index - 1]['linkToBlog']"
  51. ></q-input>
  52. <label>图片预览:</label>
  53. <img
  54. style="height: 220px; width: 780px"
  55. :src="sliders[index - 1]['imageUrl']"
  56. />
  57. </div>
  58. </q-page>
  59. </template>
  60. <script>
  61. import { api } from "boot/axios";
  62. import { useQuasar } from "quasar";
  63. export default {
  64. name: "HomeSlideImagePage",
  65. setup() {
  66. const $q = useQuasar();
  67. return {
  68. onRowClick: (row) => alert(`${row.name} clicked`),
  69. showNotifyMessageFail(msg) {
  70. $q.notify({
  71. message: msg,
  72. color: "red",
  73. position: "top-right",
  74. });
  75. },
  76. showNotifyMessageSucceed(msg) {
  77. $q.notify({
  78. message: msg,
  79. color: "green",
  80. position: "top-right",
  81. });
  82. },
  83. };
  84. },
  85. data() {
  86. return {
  87. numberofslides: 3,
  88. sliders: [
  89. { imageUrl: "", title: "", subTitle: "", linkToBlog: "" },
  90. { imageUrl: "", title: "", subTitle: "", linkToBlog: "" },
  91. { imageUrl: "", title: "", subTitle: "", linkToBlog: "" },
  92. ],
  93. };
  94. },
  95. mounted() {
  96. this.loadExistingHomeSliders();
  97. },
  98. methods: {
  99. loadExistingHomeSliders() {
  100. api
  101. .get("/api/v1/pagecontent/homesliders")
  102. .then((response) => {
  103. if (response.data.ok == true) {
  104. this.sliders = response.data.data;
  105. this.numberofslides = response.data.data.length;
  106. } else {
  107. this.showNotifyMessageFail(response.data.message);
  108. }
  109. })
  110. .catch((e) => {
  111. console.log(e);
  112. storeThis.showNotifyMessageFail(e.response);
  113. });
  114. },
  115. validateSliders() {
  116. for (var index in this.sliders) {
  117. if (
  118. this.sliders[index].imageUrl == null ||
  119. this.sliders[index].imageUrl == ""
  120. ) {
  121. this.showNotifyMessageFail(
  122. "第" + (eval(index) + 1) + "个轮播图的图片链接为空"
  123. );
  124. return false;
  125. }
  126. if (
  127. this.sliders[index].title == null ||
  128. this.sliders[index].title == ""
  129. ) {
  130. this.showNotifyMessageFail("第" + (index + 1) + "个轮播图的标题为空");
  131. return false;
  132. }
  133. if (
  134. this.sliders[index].subTitle == null ||
  135. this.sliders[index].subTitle == ""
  136. ) {
  137. this.showNotifyMessageFail(
  138. "第" + (index + 1) + "个轮播图的副标题为空"
  139. );
  140. return false;
  141. }
  142. if (
  143. this.sliders[index].linkToBlog == null ||
  144. this.sliders[index].linkToBlog == ""
  145. ) {
  146. this.showNotifyMessageFail(
  147. "第" + (index + 1) + "个轮播图的指向博客链接为空"
  148. );
  149. return false;
  150. }
  151. }
  152. return true;
  153. },
  154. submitSliders() {
  155. if (!this.validateSliders()) {
  156. return;
  157. } else {
  158. api
  159. .post("/api/v1/pagecontent/homesliders", this.sliders)
  160. .then((response) => {
  161. if (response.data.ok === true) {
  162. this.showNotifyMessageSucceed(response.data.message);
  163. } else {
  164. this.showNotifyMessageFail(response.data.message);
  165. }
  166. })
  167. .catch((e) => {
  168. this.showNotifyMessageFail(e.toString());
  169. });
  170. }
  171. },
  172. addSlide() {
  173. this.numberofslides += 1;
  174. var obj = { imageUrl: "", title: "", subTitle: "", linkToBlog: "" };
  175. this.sliders.push(obj);
  176. },
  177. removeSlide() {
  178. if (this.numberofslides <= 3) {
  179. this.showNotifyMessageFail("最少3张轮播图");
  180. return;
  181. } else {
  182. this.sliders.pop();
  183. this.numberofslides -= 1;
  184. }
  185. },
  186. testMongo() {
  187. api
  188. .get("/api/v1/demo")
  189. .then((response) => {
  190. console.log(response.data);
  191. this.showNotifyMessageSucceed("成功插入");
  192. })
  193. .catch((e) => {
  194. console.log(e);
  195. this.showNotifyMessageFail("失败");
  196. });
  197. },
  198. },
  199. };
  200. </script>