v1.0

pages/createAddress/createAddress.vue

@@ -0,0 +1,268 @@
+<template>
+  <layout>
+    <uv-navbar
+      :fixed="false"
+      :title="title"
+      left-arrow
+      @leftClick="$onClickLeft"
+    />
+    <view class="create-address">
+
+      <view class="list noBorder">
+        <view class="list-main">
+          <view class="list-label w-158">
+            收货地址
+          </view>
+          <view class="list-content">
+            <city-select
+              ref="cityselect"
+              :defaultValue="defaultAddress"
+              @callback="result"
+              :items="main.areaList"
+            ></city-select>
+
+          </view>
+        </view>
+      </view>
+      <view class="list">
+        <view class="list-main">
+          <view class="list-label w-158">
+            详细地址
+          </view>
+          <view class="list-content">
+            <input
+              type="text"
+              placeholder="请输入详细地址"
+              v-model="addressData.detail"
+            >
+
+          </view>
+        </view>
+      </view>
+      <view class="list">
+        <view class="list-main">
+          <view class="list-label w-158">
+            姓名
+          </view>
+          <view class="list-content">
+            <input
+              type="text"
+              placeholder="请输入姓名"
+              v-model="addressData.realName"
+            >
+
+          </view>
+        </view>
+      </view>
+      <view class="list">
+        <view class="list-main">
+          <view class="list-label w-158">
+            电话
+          </view>
+          <view class="list-content">
+            <input
+              type="number"
+              placeholder="请输入电话"
+              v-model="addressData.phone"
+            >
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="form-checkbox">
+      <uv-checkbox
+        shape="circle"
+        label="设为默认地址"
+        name="isDefault"
+        labelColor="#999999"
+        activeColor="#EE6D46"
+        v-model="addressData.isDefault"
+      ></uv-checkbox>
+    </view>
+    <div class="form-buttons">
+
+      <uv-button
+        type="primary"
+        text="提交"
+        customStyle="margin-top: 10px"
+        @click="onSave"
+      ></uv-button>
+    </div>
+
+  </layout>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { navigateTo, back } from '@/utils/router'
+import { onLoad } from '@dcloudio/uni-app'
+import { useMainStore } from '@/store/store'
+import {
+  getAddressDel,
+  getAddressDefault,
+  getAddressAddAndEdit,
+  getAddressList,
+  getAddressCityList,
+} from '@/api/address'
+// import { closeToast, showLoadingToast, showToast, showSuccessToast, showFailToast } from 'vant'
+
+const main = useMainStore()
+
+const areaList = ref(main.areaList)
+const title = ref('')
+
+const editId = ref('')
+const defaultAddress = ref('')
+
+const addressData = ref({
+  "realName": '',
+  "postCode": '',
+  "isDefault": '',
+  "detail": '',
+  "phone": '',
+  "cityId": '',
+  "city": '',
+  "district": '',
+  "province": '',
+});
+
+
+const onSave = async () => {
+
+  uni.showLoading({
+    title: '保存中',
+    mask: true,
+  })
+
+
+  try {
+    let res = await getAddressAddAndEdit({
+      id: editId.value,
+      realName: addressData.value.realName,
+      postCode: addressData.value.postCode,
+      isDefault: addressData.value.isDefault ? 1 : 0,
+      detail: addressData.value.detail,
+      phone: addressData.value.phone,
+      address: {
+        cityId: addressData.value.cityId,
+        city: addressData.value.city,
+        district: addressData.value.district,
+        province: addressData.value.province,
+      }
+    })
+
+    uni.showToast({
+      title: "保存成功",
+      icon: "none",
+      duration: 2000
+    });
+    uni.hideLoading()
+    main.getAddressList()
+
+  } catch (error) {
+    // closeToast()
+    if (error.msg) {
+      // showFailToast(error.msg);
+    }
+  }
+
+
+};
+
+const onDelete = async () => {
+  getAddressDel()
+  main.getAddressList()
+
+};
+
+const result = (values) => {
+  console.log(this)
+  console.log(values)
+  addressData.value.address = {
+    province: values.province.name || '',
+    city: values.city.name || '',
+    district: values.district.name || '',
+    city_id: values.city.id,
+  }
+}
+
+watch(() => main.areaList, (next) => {
+  areaList.value = next
+})
+
+watch(() => main.address, (next) => {
+  let data = next.filter(item => item.id == editId.value)[0]
+  if (!data) return
+  addressData.value = {
+    realName: data.realName,
+    phone: data.phone,
+    province: data.province,
+    city: data.city,
+    district: data.district,
+    detail: data.detail,
+    cityId: data.cityId,
+    isDefault: data.isDefault,
+  }
+  defaultAddress.value = {
+    province: {
+      name: data.province
+    },
+    city: {
+      name: data.city
+    },
+    district: {
+      name: data.district
+    }
+  }
+})
+
+onLoad((option) => {
+  const { id } = option
+
+  main.getAddressCityList()
+  main.getAddressList()
+
+  if (id) {
+    editId.value = id
+    title.value = '编辑地址'
+    let data = main.address.filter(item => item.id == id)[0]
+    if (!data) return
+    addressData.value = {
+      realName: data.realName,
+      phone: data.phone,
+      province: data.province,
+      city: data.city,
+      county: data.county,
+      detail: data.detail,
+      cityId: data.cityId,
+      isDefault: data.isDefault,
+    }
+    defaultAddress.value = {
+      province: {
+        name: data.province
+      },
+      city: {
+        name: data.city
+      },
+      district: {
+        name: data.district
+      }
+    }
+
+  } else {
+    title.value = '新增地址'
+
+  }
+})
+
+</script>
+
+<style lang="less">
+.create-address {
+  background: #fff;
+}
+
+.w-158 {
+  flex: 0 0 158rpx;
+}
+</style>