https://samurai.ru/local/templates/new_design/components_vue/EditerAddress/index.js?v=2

1import MapContainer from "./../MapContainer/index.js";
2import OverlappingContent from "./../OverlappingContent/index.js";
3import CarouselBody from "./../CarouselBody/index.js";
4
5const mapGetters = Vuex.mapGetters;
6const mapActions = Vuex.mapActions;
7
8export default {
9  template: /* html */ `
10    <overlapping-content modalKey="editer-address" class="modal --address" :show>
11        <div class="modal_title" v-if="!address_add">Адрес доставки</div>
12        <div class="modal_title" v-else>Добавить адрес</div>
13        <!--<div class="modal_section ">
14          <div class="input-block">
15            <select name="city" :class="{'--is_selected':address.city}" v-model="address.city">
16              <option disabled selected value="null">Выберете город</option>
17              <option v-for="city in cities" :selected="$cfg.host == city.url" :value="city.name">{{ city.name }}</option>
18            </select>
19          </div>
20            <button class="button dark" type="button">Выбрать</button>
21        </div>-->
22        <div class="modal_section" v-if="!address_add">
23            <label type="button" class="tab m-tab-switch">Доставка <input type="radio" value="1" v-model="address.type_receipt"/></label>
24            <label type="button" class="tab m-tab-switch">Самовывоз <input type="radio" value="2" v-model="address.type_receipt"/></label>
25        </div>
26        <div class="modal_container" v-show="address.type_receipt == 1">
27
28            <div class="modal_subtitle addres_add" v-if="!address_add">Мои адреса 
29              <button v-if="addresses.length != 0" class="addresses_title-add button-ico" :class="{'--showed':addressAdd}" @click="addressAdd = !addressAdd">
30                <img :src="$cfg.templatePath+'/assets/images/icons/ui/plus.svg'" alt="">
31              </button>
32            </div>
33
34            <div class="modal_section" v-show="addressAdd || addresses.length==0"> 
35                <div class="input-block">
36                  <input type="text" v-model="address.street" placeholder="Введите улицу и дом" autocomplete="false" id="street">
37                </div>
38                <div class="input-block" v-if="address_add">
39                  <input type="text" v-model="address.flat" placeholder="Введите номер квартиры" autocomplete="false" id="flat">
40                </div>
41                <button class="button dark" type="button" @click="select_new_address();">{{address_add ? 'Добавить' : 'Доставить сюда' }}</button>
42            </div>
43
44            <a v-if="false" href="javascript:" class="check-geo" v-show="addressAdd || addresses.length==0">
45              <img :src="$cfg.templatePath + '/assets/images/icons/ui/map_point.svg'" alt="">
46              <span>Определить местоположение</span>
47            </a>
48
49            <div 
50              v-if="addresses.length && !address_add" 
51              class="adresses_carousel"
52              >
53                <carousel-body
54                    base_class="adresses_carousel"
55                    :buttons="false"
56                    :addresses="addresses"
57                    :swiper_options="{
58                        autoheight: true,
59                        spaceBetween: 20,
60                        slidesPerView: 'auto',
61                    }"
62                    @select_address = "select_old_address"
63                  >
64                </carousel-body>
65            </div>
66        </div>
67        
68        <div 
69          v-if="user.address"
70          v-show="address.type_receipt == 2" 
71          class="modal_section"  
72          >
73            <div class="input-block">
74              <select v-model="picupPoint" :class="{'--is_selected':picupPoint !== null}">
75                  <option value="null" disabled selected>Выберите кафе для самовывоза</option>
76                  <option :value="pickup_point.id" v-for="(pickup_point, key) in user.address.pickup_point" :key  v-html="getAddressName(pickup_point)"></option>
77              </select>
78            </div>
79            <button class="button dark" @click="select_pickup_point();" type="button">Заберу отсюда</button>
80        </div>
81        
82        
83        <div class="modal_map map" id="address_map">
84
85              <map-container 
86                  key="delivery"
87                  v-show="address.type_receipt == 1"
88                  :location="{
89                      center: address.coord,
90                      zoom: address.zoom,
91                  }"
92                  @click-popup-button="select_new_address();"
93                  v-model:dadata="address.dadata"
94                  v-model:select-address="selectAddress"
95                  :type_receipt="address.type_receipt"
96              >
97              </map-container>
98            
99
100              <map-container 
101                  key="pickup"
102                  v-show="address.type_receipt == 2"
103                  :location="{
104                      center: address.coord,
105                      zoom: address.zoom,
106                  }"
107                  @show-popup="(data)=>{picupPoint = data}"
108                  @click-popup-button="(data)=>{picupPoint = data; select_pickup_point();}"
109                  :markers="pickupMarkers"
110                  :type_receipt="address.type_receipt"
111              >
112              </map-container>
113       
114        </div>
115    </overlapping-content>
116    `,
117  components: {
118    OverlappingContent,
119    MapContainer,
120    CarouselBody,
121  },
122  data() {
123    return {
124      dragStop: false,
125      picupPoint: null,
126      address: {
127        type_receipt: 1,
128        city: null,
129        street: "",
130        coord: [43.972108, 56.329068],

131        dadata: {},
132        zoom: 9,
133      },
134      addressAdd: this.address_add,
135      selectAddress: false,
136      pickupMarkers: [],
137    };
138  },
139  methods: {
140    getAddressName(point) {
141      if (point.is_user_city) {
142        return point.name;
143      }
144      else {
145        return `(${point.city.split(' ')
146          .map(word => word.slice(0, 4))
147          .join('.')}.) ` + point.name;
148      }
149    },
150    ...mapActions(["set_address", "closeAddressEditor"]),
151    get_location() {
152      var serviceUrl =
153        "https://suggestions.dadata.ru/suggestions/api/4_1/rs/iplocate/address";
154      var params = {
155        type: "GET",
156        contentType: "application/json",
157        headers: {
158          Authorization: "Token cf0c882f71fecd9fe05af580b7c5b988599b3d1b",
159        },
160      };
161    },
162    initSuggestions() {
163      $("#street").suggestions({
164        token: "fecc8692fbd4ee158bff27753e5fb86889188868",
165        // token: "d2b7072d3a32d944fcc153641dc1eadbee33dadb",
166        type: "ADDRESS",
167        count: 5,
168        bounds: "street-house",
169        autoSelectFirst: true,
170        location: {
171          country_iso_code: "RU",
172        },
173        onSelect: (suggestion) => {
174          this.address.coord = [
175            suggestion.data.geo_lon,
176            suggestion.data.geo_lat,
177          ];
178          if (this.address.street != suggestion.value) {
179            this.address.street = suggestion.value;
180          }
181          this.address.city = suggestion.data.city;
182          this.address.dadata = suggestion;
183          this.address.zoom = 17;
184          this.selectAddress = {
185            coord: this.address.coord,
186            popup: false,
187            title: this.address.street,
188            updateField: false,
189          };
190        },
191      });
192    },
193    async select_pickup_point() {
194      let res = await this.set_address({
195        address_data: this.picupPoint,
196        address_type: "pickup_point",
197      });
198      if (res) {
199        this.closeAddressEditor();
200        this.$emit("close");
201      }
202    },
203    async select_old_address(address) {
204      if (address.is_pickup == "1") {
205        let res = await this.set_address({
206          address_data: address.pickup_point,
207          address_type: "pickup_point",
208        });
209        if (res) {
210          this.closeAddressEditor();
211          this.$emit("close");
212        }
213      } else {
214        let res = await this.set_address({ address_data: address.hash });
215        if (res) {
216          this.closeAddressEditor();
217          this.$emit("close");
218        }
219      }
220    },
221    async select_new_address() {
222      let res = await this.set_address({
223        address_data: this.address.dadata,
224        address_type: "delivery_new",
225        address_flat: this.address.flat,
226      });
227      if (res) {
228        this.closeAddressEditor();
229        this.$emit("close");
230      }
231    },
232    getCityDomain(city) {
233      let cityName = '';
234      this.cities.forEach(function (checkCity) {
235        if (checkCity.name == city) {
236          cityName = checkCity.url;
237        }
238      });
239      return cityName;
240    },
241  },
242  props: {
243    show: { //показать модалку
244      type: Boolean,
245      required: false,
246    },
247    address_add: { //скрытие элементов выбора, оставляет только добавление (используется в лк)
248      type: Boolean,
249      default: false,
250    },
251  },
252  updated() {
253    this.initSuggestions(this.user.address.pickup_point);
254  },
255  computed: {
256    ...mapGetters({
257      user: "GET_USER",
258      basket: "GET_BASKET",
259      cities: "GET_CITIES",
260      addresses: "GET_ADDRESSES",
261    }),
262  },
263  watch: {
264    picupPoint(newVal) {
265      this.pickupMarkers.forEach((point) => {
266        if (point.eventData == newVal) point.show = true;
267        else point.show = false;
268      });
269    },
270    "user.address"() {
271      if (this.user.address) {
272        this.user.address.pickup_point.forEach((pickup_point) => {
273          this.pickupMarkers.push({
274            city_domain: this.getCityDomain(pickup_point.city),
275            is_user_city: pickup_point.is_user_city,
276            draggable: false,
277            popup_title: pickup_point.name,
278            eventData: pickup_point.id,
279            coord: pickup_point.coord.reverse(),
280            popup_button: "Заберу отсюда",
281            popup: true,
282            show: false,
283          });
284        });
285      }
286    },
287    selectAddress() {
288      if (this.selectAddress.updateField) {
289        this.address.zoom = 17;
290        this.address.coord = this.selectAddress.coord;
291        this.address.street = this.selectAddress.popup_title;
292
293        if (this.selectAddress.popup) {
294          this.selectAddress.show = false;
295          this.selectAddress.popup_button = this.address_add
296            ? false
297            : "Доставить сюда";
298          this.selectAddress.show = true;
299        }
300      }
301    },
302  },
303};