@alu008/test_yuanqikaixiang 1.0.0

package/subpackages/myAddress/myAddress.vue

@@ -0,0 +1,656 @@
+<template>
+  <view>
+    <u-sticky bgColor="#f6f6f6">
+          <Header title="地址管理"></Header>
+    </u-sticky>
+
+    <view :style="{
+      minHeight:`calc(100vh - ${statusBarHeight + 44}px)`
+    }" class="myAddressContent">
+      <view v-if="list == 0 && !isFirstLoading" class="noData">
+        <image src="https://img.shinemang.com/static/noData.png" mode="scaleToFill" />
+        <view>空空如也~快留下你的地址吧！</view>
+
+        <view class="toShop" hover-class="hoverActive" @click="addAddress"
+          >新建地址</view
+        >
+      </view>
+
+      <view v-if="list.length > 0" class="addressList">
+        <view v-for="value in list" :key="value.id" :class="['addressItem',value.checked ? 'selected':'']">
+          <view @click="selectAddress(value)" class="message">
+            <view style="display: flex; align-items: center">
+              <view class="name">{{ value.name }}</view
+              >&nbsp;&nbsp;{{ value.phoneNum }}
+              <view v-if="value.isDefault" class="default">
+                <text>默认</text>
+              </view></view
+            >
+            <view class="address over" style="width: 600rpx"
+              >{{ value.province }}{{ value.city }}{{ value.area
+              }}{{ value.subArea }}{{ value.address }}</view
+            >
+          </view>
+          <view
+            @click="editAddress(value)"
+            hover-class="hoverActive"
+            class="action"
+          >
+            <image src="https://img.shinemang.com/static/img/editAddressIcon.png" mode="scaleToFill" />
+          </view>
+        </view>
+      </view>
+
+      <view class="confirmBtn">
+        <view @click="addAddress" hover-class="hoverActive"
+          ><view style="font-size: 48rpx; margin-right: 20rpx">+</view>
+          <view>新增收货地址</view></view
+        >
+      </view>
+    </view>
+
+    <u-popup
+      @close="showAdressPopup = false"
+      :show="showAdressPopup"
+      mode="bottom"
+      :round="24"
+      :safeAreaInsetBottom="false"
+    >
+      <view class="editAndAddAddress">
+        <view class="title">
+          <image @click="showAdressPopup = false" src="https://img.shinemang.com/static/img/closeIcon.png" class="closeIcon" />
+          <text> {{ editType == 1 ? "新增地址" : "编辑地址" }}</text>
+        </view>
+        <view class="addressBox">
+          <view class="itemBox">
+            <view class="leftDesc">收货人</view>
+            <view>
+              <input
+                v-model="name"
+                placeholder-style="color:#999"
+                type="text"
+                placeholder="请输入收货人姓名"
+              />
+            </view>
+          </view>
+          <view class="itemBox">
+            <view class="leftDesc">手机号码</view>
+            <view>
+              <input
+                v-model="phoneNum"
+                placeholder-style="color:#999"
+                type="number"
+                placeholder="请输入收货人电话"
+              />
+            </view>
+          </view>
+          <view class="itemBox">
+            <view class="leftDesc">所在地区</view>
+            <view style="height: 100%">
+              <selectAddress
+                @changeLocation="changeLocation"
+                :defaultLocation="location.join(' ')"
+              ></selectAddress>
+              <!-- <picker value="location" @change="bindRegionChange" mode="region">
+                <view
+                  style="height: 100rpx; display: flex; align-items: center"
+                >
+                  <text v-if="location.length > 0">{{
+                    location.join(" ")
+                  }}</text>
+                  <text v-else style="color: #999999">请选择地址</text>
+                </view>
+              </picker> -->
+            </view>
+          </view>
+          <!-- grid-template-columns: 200rpx 380rpx; -->
+          <view class="itemBox">
+            <view class="leftDesc">详细地址</view>
+            <view>
+              <input
+                type="text"
+                v-model="address"
+                placeholder-style="color:#999"
+                placeholder="请输入详细地址"
+              />
+            </view>
+  
+          </view>
+          <view style="justify-content: space-between" class="itemBox">
+            <view style="width: 300rpx;" class="leftDesc">设置为默认地址</view>
+            <view style="width: auto; border-bottom: 0">
+              <u-switch activeColor="rgb(53, 199, 89)" v-model="value"></u-switch>
+            </view>
+          
+          </view>
+        </view>
+        <view v-if="editType == 1" class="confirmBtn">
+          <view :class="(name && phoneNum && address && location.length>0)? 'active' : ''" @click="saveAddress">保存</view>
+        </view>
+        <view v-else class="editConfirmBtn">
+          <view @click="deleteAddress" class="delete">删除</view>
+          <view @click="saveAddress" class="save">保存</view>
+        </view>
+      </view>
+    </u-popup>
+  </view>
+</template>
+
+<script>
+import { isMobilePhone, navagatorBack, reportMessage } from "@/utils";
+import selectAddress from "@/components/selectAddress/selectAddress.vue";
+import {
+  fetchActionAddress,
+  fetchAddressList,
+  fetchDeleteAddress,
+} from "@/utils/fetch";
+import Header from "@/components/header/header.vue";
+export default {
+  data() {
+    return {
+      comeType: 0,
+      location: [],
+      value: false,
+      showAdressPopup: false,
+      editType: 1, //1 新增 2 编辑
+      editAddressDetail: null,
+      list: [],
+      isFirstLoading: true,
+
+      name: "",
+      phoneNum: "",
+      address: "",
+      chooseAddress: "",
+      hasAddressId: -1,
+         statusBarHeight:0,
+  
+    };
+  },
+  components: {
+    selectAddress,
+    Header
+    // login,
+  },
+  onLoad(options) {
+    
+       const safeTop = uni.getStorageSync('safeTop')
+       this.statusBarHeight = safeTop;
+    if (options.isSelect) {
+      this.comeType = options.isSelect;
+    }
+    if (options.hasAddressId) {
+      this.hasAddressId = options.hasAddressId;
+    }
+    this.getAddressList();
+  },
+  methods: {
+    changeLocation(data) {
+      this.location = data.location;
+    },
+    selectAddress(value) {
+      console.log(value);
+      if (this.comeType) {
+        // 选择地址
+        // let pages = getCurrentPages();
+        // let prevPage = pages[pages.length - 2]; // 上一个页面
+        // // 给上个页面设置 data
+        // prevPage.$vm.address = value;
+        this.chooseAddress = value;
+         uni.setStorageSync("address", JSON.stringify(this.chooseAddress));
+         navagatorBack();
+        // uni.navigateBack({
+        //   delta: 1,
+        //   success: () => {},
+        // });
+      } else {
+        return;
+      }
+    },
+
+    deleteAddress() {
+      fetchDeleteAddress({
+        id: Number(this.editAddressDetail.id),
+      }).then((res) => {
+        uni.showToast({
+          title: "删除成功",
+          icon: "none",
+        });
+        this.showAdressPopup = false;
+        this.getAddressList();
+      });
+    },
+    saveAddress() {
+      if (!this.name) {
+        return uni.showToast({
+          title: "请输入姓名",
+          icon: "none",
+        });
+      }
+      if (!isMobilePhone(this.phoneNum)) {
+        return uni.showToast({
+          title: "请输入正确的联系电话",
+          icon: "none",
+        });
+      }
+      if (!this.location) {
+        return uni.showToast({
+          title: "请选择位置",
+          icon: "none",
+        });
+      }
+      if (!this.address) {
+        return uni.showToast({
+          title: "请输入详细地址",
+          icon: "none",
+        });
+      }
+
+      let params = {
+        name: this.name,
+        phone_num: this.phoneNum,
+        province: this.location[0],
+        city: this.location[1],
+        area: this.location[2],
+        address: this.address,
+        is_default: this.value ? true : false,
+      };
+
+      if (this.editType == 2 && this.editAddressDetail) {
+        params.id = this.editAddressDetail.id;
+      }
+      fetchActionAddress(this.editType == 1 ? true : false, {
+        data: params,
+      }).then((res) => {
+        uni.showToast({
+          title: "保存成功",
+          icon: "none",
+        });
+        this.showAdressPopup = false;
+        this.getAddressList();
+        this.resetInput(null);
+        // this.editAddressDetail = ''
+      });
+    },
+    getAddressList() {
+      fetchAddressList({}).then((res) => {
+        this.list = res.list;
+        if(this.hasAddressId != -1){
+          this.list.forEach((item) => {
+            if(item.id == this.hasAddressId){
+              item.checked = true;
+            }
+          })
+        }
+        this.isFirstLoading = false;
+      });
+    },
+    addAddress() {
+      reportMessage('集好运-点击地址管理界面-新增地址');
+      this.editType = 1;
+      this.showAdressPopup = true;
+      this.editAddressDetail = "";
+      this.resetInput(null);
+    },
+
+    resetInput(value) {
+      this.value = value ? value.isDefault : false;
+      this.name = value ? value.name : "";
+      this.phoneNum = value ? value.phoneNum : "";
+      this.location = value ? [value.province, value.city, value.area] : [];
+      this.address = value ? value.address : "";
+    },
+    editAddress(value) {
+      reportMessage('集好运-点击地址管理界面-编辑地址');
+      console.log(value, "vlau");
+      this.editType = 2;
+      this.showAdressPopup = true;
+      this.editAddressDetail = value;
+      this.resetInput(value);
+    },
+    chooseLocation() {
+      uni.chooseLocation({
+        useSecureNetwork: true,
+        success: function (res) {
+          console.log(res);
+        },
+        fail: function (err) {
+          console.log(err);
+        },
+      });
+    },
+    bindRegionChange(e) {
+      console.log(this.value);
+      this.location = e.detail.value;
+      console.log("picker发送选择改变,携带值为", e.detail.value);
+    },
+  },
+  onShow() {},
+
+  onUnload() {
+    if (this.comeType) {
+      if (this.chooseAddress) {
+        uni.setStorageSync("address", JSON.stringify(this.chooseAddress));
+      } else {
+        if (this.list.length > 0) {
+          // if (this.hasAddressId != -1) {
+          const address = this.list.find(
+            (item) => this.hasAddressId == item.id
+          );
+          if (address) {
+             uni.setStorageSync("address", JSON.stringify(address));
+          } else {
+            const isDefault = this.list.find((item) => item.isDefault == true);
+   
+            // 给上个页面设置 data
+            if (isDefault) {
+                uni.setStorageSync("address", JSON.stringify(isDefault));
+            
+            } else {
+                uni.setStorageSync("address", JSON.stringify(this.list[0]));
+            }
+          }
+     
+        } else {
+            uni.removeStorageSync("address");
+        }
+      }
+    }
+  },
+  onShareAppMessage() {},
+  onShareTimeline() {},
+};
+</script>
+
+<style lang="scss" scoped>
+page {
+  background-color: #f6f6f6 !important;
+  min-height: 100vh;
+}
+
+.myAddressContent {
+  padding-bottom: 150rpx;
+  border-radius: 48rpx 48rpx 0 0;
+  // height: 100vh;
+  background-color: #fff;
+  .noData {
+    text-align: center;
+    padding-top: 226rpx;
+    color: #999999;
+    font-size: 28rpx;
+    image {
+      width: 370rpx;
+      height: 368rpx;
+    }
+    view {
+      margin-top: -10rpx;
+    }
+
+    .toShop {
+      width: 322rpx;
+      height: 80rpx;
+      background: linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);;
+      border-radius: 864rpx 864rpx 864rpx 864rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 32rpx;
+      margin: auto;
+      margin-top: 40rpx;
+    }
+  }
+
+  .addressList {
+    .addressItem {
+      width: 100%;
+      // height: 160rpx;
+      background: rgba(255, 255, 255, 0.01);
+      // box-shadow: inset 0rpx -1rpx 0rpx 0rpx #eeeeee;
+      border-radius: 0rpx 0rpx 0rpx 0rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 32rpx;
+      &.selected{
+       background:  #EBF3FA;
+       .message{
+        color: #13B77F;
+        .address{
+           color: #13B77F;
+        }
+       }
+      }
+      .message {
+        font-size: 28rpx;
+        color: #000;
+        .name {
+          font-size: 32rpx;
+        
+          font-weight: bold;
+        }
+        .address {
+          font-size: 28rpx;
+          color: #505050;
+          margin-top: 12rpx;
+        }
+        .default {
+          width: 72rpx;
+          height: 36rpx;
+          background:#C8E2EA;
+          border-radius: 8rpx 8rpx 8rpx 8rpx;
+          color: #043661;
+          font-size: 24rpx;
+          margin-left: 28rpx;
+          display: flex;
+          line-height: 36rpx;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+      .action {
+        display: flex;
+        /* gap: 12rpx; */
+        align-items: center;
+        justify-content: flex-end;
+        image {
+          width: 36rpx;
+          height: 36rpx;
+        }
+      }
+    }
+  }
+  .confirmBtn {
+    margin-top: 80rpx;
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    height: 140rpx;
+    background: #ffffff;
+    padding-left: 32rpx;
+    z-index: 999;
+
+    // border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding-top: 16rpx;
+    > view {
+      width: 686rpx;
+      height: 80rpx;
+      background: linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);;
+      border-radius: 44rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 32rpx;
+      color: #fff;
+      font-weight: 600;
+      view {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        line-height: 80rpx;
+      }
+    }
+  }
+}
+.editAndAddAddress {
+  position: relative;
+  // padding: 20rpx 0rpx 0rpx 0rpx;
+  background: #fff;
+  /* height: 1172rpx; 24rpx 0rpx 0rpx */
+  border-radius: 24rpx 24rpx 0 0;
+  .title {
+    color: #000000;
+    font-size: 36rpx;
+    font-weight: 600;
+    // padding-left: 32rpx;
+    height: 100rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    .closeIcon {
+      position: absolute;
+      top: 26rpx;
+      left: 32rpx;
+      width: 48rpx;
+      height: 48rpx;
+    }
+  }
+
+  .confirmBtn {
+    margin-top: 40rpx;
+
+    width: 100%;
+    /* height: 140rpx; */
+    background: #ffffff;
+    display: flex;
+    justify-content: center;
+
+    // border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 16rpx 0;
+    border-radius: 0 0 24rpx 24rpx;
+    padding-bottom: 44rpx;
+    view {
+      width: 360rpx;
+      height: 80rpx;
+      background: linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);;
+      border-radius: 40rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #fff;
+      opacity: 0.5;
+      &.active {
+        opacity: 1;
+      }
+    }
+  }
+  .editConfirmBtn {
+    margin-top: 40rpx;
+
+    width: 100%;
+    /* height: 140rpx; */
+    background: #ffffff;
+    /* padding-left: 32rpx; */
+
+    // border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 16rpx 0;
+    display: flex;
+    /* gap: 20rpx; */
+    justify-content: center;
+    border-radius: 0 0 24rpx 24rpx;
+    padding-bottom: 32rpx;
+
+    view {
+      width: 328rpx;
+      height: 80rpx;
+      background: #ffffff;
+      border-radius: 40rpx 40rpx 40rpx 40rpx;
+      border: 2rpx solid #13B77F;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28rpx;
+      font-weight: bold;
+      line-height: 80rpx;
+    }
+    .delete {
+      color: #13B77F;
+      border: 1px solid #13B77F;
+      margin-right: 30rpx;
+    }
+    .save {
+      background: linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);;
+      color: #fff;
+    }
+  }
+
+  .addressBox {
+    /* margin-bottom: 30rpx; */
+    .itemBox {
+      height: 120rpx;
+      width: 100%;
+      background: rgba(255, 255, 255, 0.01);
+      // box-shadow: inset 0rpx -1rpx 0rpx 0rpx #eeeeee;
+      padding: 0 32rpx;
+      display: flex;
+      /* grid-template-columns: 200rpx 458rpx; */
+      align-items: center;
+      position: relative;
+
+      > view {
+        &:last-child {
+          width: 526rpx;
+          border-bottom: 2rpx solid #f6f6f6;
+        }
+      }
+      &:last-child {
+        box-shadow: none;
+      }
+
+      .leftDesc {
+        color: #000000;
+        width: 160rpx;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+      input {
+        font-size: 28rpx !important;
+        height: 120rpx;
+        &::placeholder {
+          color: #999999;
+        }
+      }
+      .rightDesc {
+        color: #999999;
+        font-size: 28rpx !important;
+
+        input {
+          font-size: 28rpx !important;
+          font-weight: 600;
+          &::placeholder {
+            color: #cccccc;
+          }
+        }
+      }
+      .chooseLocation {
+        position: absolute;
+        right: 32rpx;
+        display: flex;
+        top: 27rpx;
+        align-items: center;
+        image {
+          width: 36rpx;
+          height: 36rpx;
+        }
+      }
+    }
+  }
+}
+</style>
+