API tools faq
paste
MarkUa

Untitled

MarkUa
May 4th, 2020
412
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 15.16 KB | None | 0 0
raw download clone embed print report
  1. <template>
  2.     <div>
  3.     <div class="container p-3 my-3 border c">
  4.         <b-form @submit="onSubmit" @reset="onReset" v-if="show">
  5.             <b-tabs v-model="form.selected" content-class="mt-3" fill>
  6.                 <b-tab v-on:click="onChange(1)" title="Продаж" active>
  7.                     <b-form-group
  8.                            id="input-group-1"
  9.                            label-for="input-1"
  10.                            description="введіть заголовок для опису пропозиції максимум 130 символів.">
  11.                         <b-form-input
  12.                                id="input-1"
  13.                                v-model="form.email"
  14.                                type="email"
  15.                                required
  16.                                placeholder="Введіть заголовок"
  17.                        ></b-form-input>
  18.  
  19.                     </b-form-group>
  20.  
  21.                     <b-form-group
  22.                     description="введіть опису пропозиції максимум 10000 символів.">
  23.                          <b-form-textarea
  24.        id="textarea-default"
  25.        placeholder="Опис пропозиції"
  26.      ></b-form-textarea>
  27.                     </b-form-group>
  28.  
  29.                     <b-form-group>
  30.                          <div class="d-flex justify-content-start">
  31.       <b-form-radio v-model="selected" name="some-radios" value="Товари" style="margin-right: 10px;">Товари</b-form-radio>
  32.       <b-form-radio v-model="selected" name="some-radios" value="Послуги">Послуги</b-form-radio>
  33.                              </div>
  34.     </b-form-group>
  35.  
  36.                          <b-form-group >
  37.                     <tree_select2 v-on:select-category="Set_Category"/>
  38.                      </b-form-group>
  39.  
  40.                      <b-form-group>
  41.         <selectize_/>
  42.              </b-form-group>
  43.  
  44.                     <!--
  45.                                        <b-form-group id="input-group-3" label="Food:" label-for="input-3">
  46.                                            <b-form-select
  47.                                                    id="input-3"
  48.                                                    v-model="form.food"
  49.                                                    :options="foods"
  50.                                                    required
  51.                                            ></b-form-select>
  52.                                        </b-form-group>
  53.  
  54.                                        <b-form-group id="input-group-4">
  55.                                            <b-form-checkbox-group v-model="form.checked" id="checkboxes-4">
  56.                                                <b-form-checkbox value="me">Check me out</b-form-checkbox>
  57.                                                <b-form-checkbox value="that">Check that out</b-form-checkbox>
  58.                                            </b-form-checkbox-group>
  59.                                        </b-form-group> -->
  60.  
  61.                      <b-form-group id="input-group-3"  label-for="input-3">
  62.                           <div class="d-flex justify-content-around">
  63.                         <b-form-select
  64.                                id="input-3"
  65.                                v-model="form.state"
  66.                                :options="state"
  67.                                required
  68.                                style="margin-right: 5px;margin-left: 5px"
  69.                        ></b-form-select>
  70.                                 <b-form-select
  71.                                id="input-3"
  72.                                v-model="form.state"
  73.                                :options="state"
  74.                                required
  75.                                style="margin-right: 5px;margin-left: 5px"
  76.                        ></b-form-select>
  77.  
  78.                                 <b-form-select
  79.                                id="input-3"
  80.                                v-model="form.state"
  81.                                :options="state"
  82.                                required
  83.                                style="margin-right: 5px;margin-left: 5px"
  84.                        ></b-form-select>
  85.                               </div>
  86.                     </b-form-group>
  87.  
  88.                     <b-form-group id="input-group-5">
  89.                         <div class="d-flex justify-content-start">
  90.                             <b-form-checkbox v-model="form.add_images" style="margin-left: 5px; margin-right: 5px;">Додати фото</b-form-checkbox>
  91.                             <br/>
  92.                             <b-form-checkbox v-model="form.add_location"  style="margin-left: 5px; margin-right: 5px;">Долати локацію</b-form-checkbox>
  93.  
  94.                         </div>
  95.                     </b-form-group>
  96.  
  97.  
  98.  
  99.  
  100.                     <b-form-group id="input-group-6"
  101.                     description="додайте фото для опису пропозиції ліміт 10 фото">
  102.                         <div class="d-flex justify-content-around">
  103.                             <img_up :dat="form.name" v-if="form.add_images" v-on:update-item="onUpdateItem"></img_up>
  104.                             <img_up :dat="form.name" v-if="form.add_location" v-on:update-item="onUpdateItem"></img_up>
  105.  
  106.                         </div>
  107.                     </b-form-group>
  108.                     <b-button type="submit" variant="primary" style="margin-right: 10px">Створити</b-button>
  109.                     <b-button type="reset" variant="danger">Очистити</b-button>
  110.                 </b-tab>
  111.                 <b-tab v-on:click="onChange(2)" title="Обмін">
  112.  
  113.                     <b-form-group
  114.                            id="input-group-1"
  115.                            label="Email address:"
  116.                            label-for="input-1"
  117.                            description="We'll never share your email with anyone else.">
  118.                         <b-form-input
  119.                                id="input-1"
  120.                                v-model="form.email"
  121.                                type="email"
  122.                                required
  123.                                placeholder="Enter email"
  124.                        ></b-form-input>
  125.                     </b-form-group>
  126.  
  127.                     <b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
  128.                         <b-form-input
  129.                                id="input-2"
  130.                                v-model="form.name"
  131.                                required
  132.                                placeholder="Enter name"
  133.                        ></b-form-input>
  134.                     </b-form-group>
  135.  
  136.                     <b-form-group id="input-group-3" label="Food:" label-for="input-3">
  137.                         <b-form-select
  138.                                id="input-3"
  139.                                v-model="form.food"
  140.                                :options="foods"
  141.                                required
  142.                        ></b-form-select>
  143.                     </b-form-group>
  144.  
  145.                     <b-form-group id="input-group-4">
  146.                         <b-form-checkbox-group v-model="form.checked" id="checkboxes-4">
  147.                             <b-form-checkbox value="me">Check me out</b-form-checkbox>
  148.                             <b-form-checkbox value="that">Check that out</b-form-checkbox>
  149.                         </b-form-checkbox-group>
  150.                     </b-form-group>
  151.  
  152.                     <b-button type="submit" variant="primary">Submit</b-button>
  153.                     <b-button type="reset" variant="danger">Reset</b-button>
  154.  
  155.                 </b-tab>
  156.                 <b-tab v-on:click="onChange(3)" title="Оренда">
  157.  
  158.                     <b-form-group
  159.                            id="input-group-1"
  160.                            label-for="input-1"
  161.                            description="Введіть заголовок пропозиції.">
  162.                         <b-form-input
  163.                                id="input-1"
  164.                                v-model="form.email"
  165.                                required
  166.                                placeholder="Заголовок"
  167.                        ></b-form-input>
  168.                     </b-form-group>
  169.  
  170.                     <b-form-group >
  171.                         <b-form-textaria
  172.  
  173.                                v-model="form.name"
  174.                                required
  175.                                placeholder="Введіть опис"
  176.                                rows="3"
  177.                                max-rows="6"
  178.                        ></b-form-textaria>
  179.                     </b-form-group>
  180.  
  181.                     <b-form-group id="input-group-3" label="Food:" label-for="input-3">
  182.                         <b-form-select
  183.                                id="input-3"
  184.                                v-model="form.food"
  185.                                :options="foods"
  186.                                required
  187.                        ></b-form-select>
  188.                     </b-form-group>
  189.                     <b-form-group>
  190.                          <b-form-textarea
  191.        id="textarea-default"
  192.        placeholder="Default textarea"
  193.      ></b-form-textarea>
  194.                     </b-form-group>
  195.                     <b-form-group id="input-group-4">
  196.                         <b-form-checkbox-group v-model="form.checked" id="checkboxes-4">
  197.                             <b-form-checkbox value="me">Check me out</b-form-checkbox>
  198.                             <b-form-checkbox value="that">Check that out</b-form-checkbox>
  199.                         </b-form-checkbox-group>
  200.                     </b-form-group>
  201.  
  202.                     <b-button type="submit" variant="primary">Submit</b-button>
  203.                     <b-button type="reset" variant="danger">Reset</b-button>
  204.  
  205.                 </b-tab>
  206.             </b-tabs>
  207.         </b-form>
  208.     <!--    <b-card class="mt-3" header="Form Data Result">
  209.            <pre class="m-0">{{ form }}</pre>
  210.        </b-card>
  211.        <button v-on:click="up()">Upload</button> -->
  212.             <p>{{form}}</p>
  213.  
  214.  
  215.     </div>
  216.                               <!-- <loc  v-if="form.add_location"  v-on:update-item="UpdateLocation" /> -->
  217.                            <!--                <loc  v-if="form.add_location"  v-on:update-item="onUpdateItem" v-on:close-map="setA"/> -->
  218.  
  219. <!--<selectize_/>-->
  220.     </div>
  221. </template>
  222. <style>
  223.  selected   form{
  224.  
  225.     }
  226.     .c{
  227.  
  228.         max-width: 700px;
  229.         border: 1px  black;
  230.         border-radius: 10px;
  231.         padding-bottom: 10px;
  232.         padding-left: 10px;
  233.         padding-right: 10px;
  234.         padding-top: 10px;
  235.           box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  236.     }
  237.  
  238.  
  239.  
  240. </style>
  241. <script>
  242.     import selectize_ from "../selectize_.vue"
  243.     import tree_select2 from "../three_select/tree_select2.vue"
  244.      import loc from "../location_user/loc.vue";
  245.     import 'bootstrap/dist/css/bootstrap.css'
  246.     import 'bootstrap-vue/dist/bootstrap-vue.css'
  247.     import img_up from "../image_upload/image_upload.vue"
  248.     //import  tag_search_select from  "../tag_search_select/tag_search_select.vue"
  249.     import axios from "axios"
  250.     import $ from "jquery"
  251.  
  252.     export default {
  253.         name: 'PhoneNumberLine',
  254.         components: {img_up,loc,tree_select2,selectize_ },
  255.         data() {
  256.             return {
  257.  
  258.                 form: {
  259.                     category: "",
  260.                     add_images: false,
  261.                     add_images2: false,
  262.                     tabIndex: 0,
  263.                     email: '',
  264.                     name: 'grgeg',
  265.                     food: null,
  266.                     state: null,
  267.                     checked: [],
  268.                     images_files: null,
  269.                     add_search_tags: false,
  270.                     add_location: false
  271.                 },
  272.                 foods: [{text: 'Select One', value: null}, 'Carrots', 'Beans', 'Tomatoes', 'Corn'],
  273.                 state: [{text:"Виберіть стан", value: null}, "Новий", "Вживаний"],
  274.  
  275.                 show: true
  276.             }
  277.         },
  278.         watch: {
  279.           /*  selected(value) {
  280.                   alert(value);
  281.             }*/
  282.         },
  283.         methods: {
  284.             setA(){
  285.            //     alert("c");
  286.               this.form.add_location = false;
  287.             },
  288.             onUpdateItem(e) {
  289.                 //  alert(JSON.stringify( e));
  290.                 this.form.images_files = e;
  291.             },
  292.             onChange(e) {
  293.                 this.form.tabIndex = e;
  294.             },
  295. selected(value) {
  296.                   alert(value);
  297.             },
  298.              upload() {
  299.  
  300.            /*     axios
  301.       .post("http://127.0.0.1:8000/upload_image/", {
  302.     username: "passw",
  303.     password: "fewfwe"
  304.   })
  305.       .then(response => {
  306.         this.form.email  = response.data;
  307.        // alert(response);
  308.         return response;
  309.       })
  310.       .catch(error => {
  311. return "error";
  312.       })
  313.       .finally(() => {return "sss";});*/
  314.             var vm = this;
  315.               /*  $.post({
  316.                     async: false,
  317.                     url: "http://127.0.0.1:8000/upload_image/",
  318.                     data: {"get_d":JSON.stringify({"images": vm.form.images_files })},
  319.                     dataType: "json",
  320.  
  321.                   //  contentType: 'application/json',
  322.                     success: function (data) {
  323.                         alert(JSON.stringify(data));
  324.  
  325.                         vm.form.email = data;
  326.                         return data+"ff";
  327.                     },
  328.                     error: function (e) {
  329.                         console.log(JSON.stringify(e));
  330.  
  331.                     }
  332.                 });*/
  333.  
  334.  
  335.             },
  336.  
  337.             async up() {
  338.              //   alert(31);
  339.                      await this.upload();
  340.                    // alert("i "+i);
  341.               /*  $.when( this.upload()).done((e) => {
  342.                     alert("done");
  343.                     alert("e "+JSON.stringify(e));
  344.                 });*/
  345.  
  346.              //   alert("w3");
  347.                 //  alert(JSON.stringify(this.form))
  348.  
  349.                 // const res =  this.upload();
  350.                 //  alert("res "+JSON.stringify(res) );
  351.             },
  352.             UpdateLocation(e){
  353.                 alert(JSON.stringify(e));
  354.             },
  355.             onSubmit(evt) {
  356.                 evt.preventDefault()
  357.                 alert(JSON.stringify(this.form))
  358.  
  359.                // const res = this.upload();
  360.              //   alert("res " + JSON.stringify(res));
  361.             },
  362.             Set_Category(e){
  363.                 this.form.category = e;
  364.             },
  365.             onReset(evt) {
  366.                 evt.preventDefault()
  367.                 // Reset our form values
  368.                 this.form.email = ''
  369.                 this.form.name = ''
  370.                 this.form.food = null
  371.                 this.form.checked = []
  372.                 // Trick to reset/clear native browser form validation state
  373.                 this.show = false
  374.                 this.$nextTick(() => {
  375.                     this.show = true
  376.                 })
  377.             }
  378.         }
  379.     }
  380. </script>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!