w-front-end / select_good · Commits

Commit 4814f9036b4abde4cfe995090fca5c24b134ea7b

Authored by zhiyangdu
1 parent 195ea8e9

地址列表页添加地址页编辑地址页

Inline Side-by-side
Showing 19 changed files with 2746 additions and 1 deletions
.postcssrc.js
  View file @4814f90
@@ -16,7 +16,7 @@ module.exports = { @@ -16,7 +16,7 @@ module.exports = {
16 "viewportHeight": 1334, 16 "viewportHeight": 1334,
17 "unitPrecision": 2, 17 "unitPrecision": 2,
18 "viewportUnit": 'vw', 18 "viewportUnit": 'vw',
19 - "selectorBlackList": ['.ignore', '.hairlines'], 19 + "selectorBlackList": ['.ignore', '.hairlines', "van"],
20 "minPixelValue": 1, 20 "minPixelValue": 1,
21 "mediaQuery": false 21 "mediaQuery": false
22 }, 22 },
src/components/addressCreateBar/addressCreateBar.less 0 → 100755
  View file @4814f90
  1 +@charset "UTF-8";
  2 +
  3 +@width_bar: 100%;
  4 +@height_bar: 140px;
  5 +@font_size_btn: 34px;
  6 +@border_radius_btn: 100px;
  7 +@background_color_bright: #FF725C;
  8 +@color_btn_bright: #fff;
  9 +@box_shadow_btn: 0 4px 12px #F8ADA2;
  10 +@width_btn_bright: 546px;
  11 +@height_btn_bright: 90px;
  12 +@width_btn_bright_img: 38px;
  13 +@height_btn_bright_img: 38px;
  14 +@padding_left_btn_bright_text: 37px;
  15 +
  16 +.address-create-bar {
  17 + .box {
  18 + position: fixed;
  19 + bottom: 0;
  20 + z-index: 100;
  21 + background-color: transparent;
  22 + width: @width_bar;
  23 + height: @height_bar;
  24 + @supports (padding-bottom: env(safe-area-inset-bottom)) {
  25 + & {
  26 + padding-bottom: env(safe-area-inset-bottom);
  27 + }
  28 + }
  29 + .buttons {
  30 + .btn {
  31 + font-size: @font_size_btn;
  32 + border-radius: @border_radius_btn;
  33 + &.btn-bright {
  34 + display: flex;
  35 + flex-direction: row;
  36 + justify-content: center;
  37 + align-items: center;
  38 + background-color: @background_color_bright;
  39 + color: @color_btn_bright;
  40 + width: @width_btn_bright;
  41 + height: @height_btn_bright;
  42 + box-shadow: @box_shadow_btn;
  43 + margin: 0 auto;
  44 + .img {
  45 + width: @width_btn_bright_img;
  46 + height: @height_btn_bright_img;
  47 + }
  48 + .img + .text {
  49 + padding-left: @padding_left_btn_bright_text;
  50 + }
  51 + }
  52 + }
  53 + }
  54 + }
  55 + .placeholder-box {
  56 + // background-color: #ffffff;
  57 + background-color: transparent;
  58 + padding-top: 30px;
  59 + border-top: 1px solid transparent;
  60 + border-bottom: 1px solid transparent;
  61 + width: @width_bar;
  62 + height: @height_bar;
  63 + }
  64 +}
0 \ No newline at end of file 65 \ No newline at end of file
src/components/addressCreateBar/addressCreateBar.vue 0 → 100755
  View file @4814f90
  1 +<template>
  2 + <div class="address-create-bar">
  3 + <div class="placeholder-box"></div>
  4 + <div class="box">
  5 + <div class="buttons">
  6 + <div class="btn btn-bright" @click="doCreate">
  7 + <img src="/static/img/icon_add.png" class="img"/>
  8 + <div class="text">新增地址</div>
  9 + </div>
  10 + </div>
  11 + </div>
  12 + </div>
  13 +</template>
  14 +
  15 +<script>
  16 + export default {
  17 + name: 'addressCreateBar',
  18 + data: function () {
  19 + return {
  20 +
  21 + }
  22 + },
  23 + methods: {
  24 +
  25 + /**
  26 + * 创建地址
  27 + */
  28 + doCreate() {
  29 + this.$emit('doCreate');
  30 + }
  31 + }
  32 + }
  33 +</script>
  34 +
  35 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  36 +<style rel="stylesheet/less" lang="less">
  37 + @import './addressCreateBar';
  38 +</style>
0 \ No newline at end of file 39 \ No newline at end of file
src/components/addressList/addressList.less 0 → 100755
  View file @4814f90
  1 +@charset "UTF-8";
  2 +
  3 +@padding_top_no_address: 30vh;
  4 +@width_no_address_img: 177px;
  5 +@height_no_address_img: 177px;
  6 +@color_no_address_text: #9C9C9C;
  7 +@font_size_no_address_text: 28px;
  8 +@padding_top_no_address_text: 20px;
  9 +
  10 +page {
  11 + background-color: #F1F2F6;
  12 +}
  13 +
  14 +.address-list {
  15 + .box {
  16 + .item {
  17 + background-color: #ffffff;
  18 + width: 100%;
  19 + // height: 300px;
  20 + margin-top: 10px;
  21 + color: #3A3A3A;
  22 + font-size: 30px;
  23 + .content {
  24 + display: flex;
  25 + flex-direction: row;
  26 + justify-content: space-between;
  27 + width: 670px;
  28 + margin: 0 auto;
  29 + .info {
  30 + display: flex;
  31 + flex-direction: column;
  32 + justify-content: center;
  33 + width: 100%;
  34 + .base {
  35 + display: flex;
  36 + flex-direction: row;
  37 + justify-content: space-between;
  38 + align-items: center;
  39 + padding-top: 36px;
  40 + .left {
  41 + display: flex;
  42 + flex-direction: row;
  43 + align-items: center;
  44 + max-width: 70%;
  45 + .title {
  46 + padding-right: 20px;
  47 + }
  48 + .name {
  49 + max-width: 70%;
  50 + white-space: nowrap;
  51 + text-overflow: ellipsis;
  52 + overflow: hidden;
  53 + }
  54 + }
  55 + .phone {
  56 + white-space: nowrap;
  57 + text-overflow: ellipsis;
  58 + overflow: hidden;
  59 + }
  60 + }
  61 + .address-box {
  62 + display: flex;
  63 + flex-direction: row;
  64 + align-items: center;
  65 + padding-top: 26px;
  66 + padding-bottom: 36px;
  67 + .title {
  68 + padding-right: 20px;
  69 + }
  70 + .waiting {
  71 + background-color: #FEF5E5;
  72 + color: #F5A623;
  73 + font-size: 26px;
  74 + margin-right: 20px;
  75 + padding: 0 10px;
  76 + border-radius: 12px;
  77 + }
  78 + .address {
  79 + max-width: 77%;
  80 + white-space: nowrap;
  81 + text-overflow: ellipsis;
  82 + overflow: hidden;
  83 + &.address-waiting {
  84 + max-width: 60%;
  85 + }
  86 + }
  87 + }
  88 + }
  89 + }
  90 + .funcs-box {
  91 + display: flex;
  92 + flex-direction: row;
  93 + justify-content: space-between;
  94 + align-items: center;
  95 + width: 670px;
  96 + margin: 0 auto;
  97 + border-top: 1px #DEDEDE solid;
  98 + padding-top: 36px;
  99 + padding-bottom: 24px;
  100 + .check-group {
  101 + display: flex;
  102 + flex-direction: row;
  103 + justify-content: flex-end;
  104 + align-items: center;
  105 + flex: 1;
  106 + .check-box {
  107 + width: 36px;
  108 + height: 36px;
  109 + }
  110 + .text {
  111 + padding-left: 26px;
  112 + }
  113 + }
  114 + .buttons-box {
  115 + display: flex;
  116 + flex-direction: row;
  117 + justify-content: flex-end;
  118 + align-items: center;
  119 + flex: 2.6;
  120 + position: unset;
  121 + .edit-box {
  122 + padding: 8px 30px;
  123 + border: 1px solid #D2D2D2;
  124 + border-radius: 12px;
  125 + }
  126 + .delete-box {
  127 + color: #FF725C;
  128 + padding: 8px 30px;
  129 + border: 1px solid #FF725C;
  130 + border-radius: 12px;
  131 + }
  132 + .buttons + .buttons {
  133 + margin-left: 20px;
  134 + }
  135 + }
  136 + }
  137 + }
  138 + }
  139 +}
  140 +.no-address {
  141 + width: 100%;
  142 + height: 100%;
  143 + text-align: center;
  144 + padding-top: @padding_top_no_address;
  145 + .img {
  146 + width: @width_no_address_img;
  147 + height: @height_no_address_img;
  148 + }
  149 + .text {
  150 + color: @color_no_address_text;
  151 + font-size: @font_size_no_address_text;
  152 + padding-top: @padding_top_no_address_text;
  153 + }
  154 +}
0 \ No newline at end of file 155 \ No newline at end of file
src/components/addressList/addressList.vue 0 → 100755
  View file @4814f90
  1 +<template>
  2 + <div class="address-list"
  3 + v-if="addresss && addresss.list.length">
  4 + <div class="box">
  5 + <div class="item"
  6 + v-for="(item, index) in addresss.list"
  7 + :key="index">
  8 + <div class="content">
  9 + <div class="info"
  10 + @click="doSelect(item)">
  11 + <div class="base">
  12 + <div class="left">
  13 + <div class="title">收货人:</div>
  14 + <div class="name">{{item.name}}</div>
  15 + </div>
  16 + <div class="phone">{{item.phoneS}}</div>
  17 + </div>
  18 + <div class="address-box">
  19 + <div class="title">收货地址:</div>
  20 + <div class="waiting"
  21 + v-if="item.state == 0">待完善</div>
  22 + <div class="address"
  23 + :class="{'address-waiting': item.state == 0}">{{item.address}}</div>
  24 + </div>
  25 + </div>
  26 + </div>
  27 + <div class="funcs-box"
  28 + v-if="!addresss.options.defaultContact.hide || !addresss.options.edit.hide || !addresss.options.delete.hide">
  29 + <label class="label check-group"
  30 + v-if="!addresss.options.defaultContact.hide"
  31 + @click="setDefaultContact(item)">
  32 + <input v-show="false" type="checkbox" name="like" :value="item.state == 2">
  33 + <img src="/static/img/icon_check_active.png"
  34 + class="check-box"
  35 + v-if="item.state == 2" />
  36 + <img src="/static/img/icon_check.png"
  37 + class="check-box"
  38 + v-else/>
  39 + <text class="text">
  40 + <img src="/static/img/icon_check.png"
  41 + class="check-box"/>
  42 + </text>
  43 + </label>
  44 + <div class="buttons-box">
  45 + <div class="edit-box buttons"
  46 + v-if="!addresss.options.edit.hide"
  47 + @click="doEdit(item)">
  48 + 编辑
  49 + </div>
  50 + <div class="delete-box buttons"
  51 + v-if="!addresss.options.delete.hide"
  52 + @click="doDelete(item)">
  53 + 删除
  54 + </div>
  55 + </div>
  56 + </div>
  57 + </div>
  58 + </div>
  59 + </div>
  60 + <div class="no-address"
  61 + v-else>
  62 + <img src="/static/img/icon_no_address.png"
  63 + class="img" />
  64 + <div class="text">还没有地址哦～</div>
  65 + </div>
  66 +</template>
  67 +
  68 +<script>
  69 +export default {
  70 + name: 'addressList',
  71 + data: function () {
  72 + return {
  73 + radio:1,
  74 + }
  75 + },
  76 + props: ["addresss"],
  77 + methods: {
  78 +
  79 + /**
  80 + * 选择地址
  81 + * @param {Object} item [地址对象]
  82 + */
  83 + doSelect (item) {
  84 + this.$emit('doSelect', item);
  85 + },
  86 +
  87 + /**
  88 + * 编辑地址
  89 + * @param {Object} item [地址对象]
  90 + */
  91 + doEdit (item) {
  92 + this.$emit('doEdit', item);
  93 + },
  94 +
  95 + /**
  96 + * 删除地址
  97 + * @param {Object} item [地址对象]
  98 + */
  99 + doDelete (item) {
  100 + this.$emit('doDelete', item);
  101 + },
  102 +
  103 + /**
  104 + * 设置默认联系人
  105 + * @param {Object} item [地址对象]
  106 + */
  107 + setDefaultContact (item) {
  108 + this.$emit('setDefaultContact', item);
  109 + }
  110 + }
  111 +}
  112 +</script>
  113 +
  114 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  115 +<style rel="stylesheet/less" lang="less">
  116 +@import './addressList';
  117 +</style>
0 \ No newline at end of file 118 \ No newline at end of file
src/components/addressSelectLayer/addressSelectLayer.less 0 → 100755
  View file @4814f90
  1 +@charset "UTF-8";
  2 +
  3 +.address-select-layer {
  4 + .layer-box {
  5 + position: fixed;
  6 + top: 0;
  7 + left: 0;
  8 + z-index: 110;
  9 + background-color: rgba(0, 0, 0, 0.26);
  10 + width: 100%;
  11 + height: 100%;
  12 + .box {
  13 + position: absolute;
  14 + left: 0;
  15 + bottom: 0;
  16 + background-color: #ffffff;
  17 + z-index: 111px;
  18 + width: 100%;
  19 + height: 800px;
  20 + .bar-box {
  21 + width: 100%;
  22 + height: 100px;
  23 + border: 1px solid #EBE9EA;
  24 + .bar-box-center {
  25 + display: flex;
  26 + flex-direction: row;
  27 + align-items: center;
  28 + text-align: center;
  29 + color: #999999;
  30 + font-size: 26px;
  31 + width: 690px;
  32 + height: 100%;
  33 + margin: 0 auto;
  34 + .now-city {
  35 + display: flex;
  36 + flex-direction: row;
  37 + align-items: center;
  38 + flex: 3;
  39 + height: 100%;
  40 + .now-item {
  41 + display: flex;
  42 + flex-direction: row;
  43 + justify-content: center;
  44 + align-items: center;
  45 + flex: 1;
  46 + width: 100%;
  47 + height: 100%;
  48 + &.selected {
  49 + color: #333333;
  50 + }
  51 + &.active {
  52 + border-top: 4px solid transparent;
  53 + border-bottom: 4px solid #FF725C;
  54 + }
  55 + }
  56 + }
  57 + .buttons-box {
  58 + display: flex;
  59 + flex-direction: row;
  60 + align-items: center;
  61 + flex: 1;
  62 + position: unset;
  63 + height: 100%;
  64 + .func-button {
  65 + position: relative;
  66 + display: flex;
  67 + justify-content: center;
  68 + align-items: center;
  69 + margin: 0;
  70 + padding: 0;
  71 + width: 100%;
  72 + height: 100%;
  73 + color: #333333;
  74 + font-size: 26px;
  75 + box-sizing: border-box;
  76 + text-align: center;
  77 + text-decoration: none;
  78 + line-height: normal;
  79 + border-radius: none;
  80 + overflow: hidden;
  81 + background-color: transparent;
  82 + &.active {
  83 + border-top: 4px solid transparent;
  84 + border-bottom: 4px solid #FF725C;
  85 + border-radius: 0;
  86 + }
  87 + &[disabled] {
  88 + color: #999999;
  89 + pointer-events: none;
  90 + }
  91 + &::after {
  92 + content: none;
  93 + }
  94 + }
  95 + }
  96 + }
  97 + }
  98 + .select-view-box {
  99 + width: 100%;
  100 + height: 700px;
  101 + color: #666666;
  102 + font-size: 28px;
  103 + .item {
  104 + display: flex;
  105 + align-items: center;
  106 + width: 690px;
  107 + height: 80px;
  108 + margin: 0 auto;
  109 + }
  110 + }
  111 + }
  112 + }
  113 +}
0 \ No newline at end of file 114 \ No newline at end of file
src/components/addressSelectLayer/addressSelectLayer.vue 0 → 100755
  View file @4814f90
  1 +<template>
  2 + <div class="address-select-layer"
  3 + v-if="isShow && cityList.list.length">
  4 + <div class="layer-box"
  5 + @click="hideLayer">
  6 + <div class="box"
  7 + @click="stopPropagation">
  8 + <div class="bar-box">
  9 + <div class="bar-box-center">
  10 + <div class="now-city">
  11 + <div class="now-item"
  12 + :class="{'selected': nowCity.province.id != 0, 'active': cityList.activityLevel == 1}"
  13 + @click="changeCity('1')">{{nowCity.province.nowName || nowCity.province.name}}</div>
  14 + <div class="now-item"
  15 + :class="{'selected': nowCity.city.id != 0, 'active': cityList.activityLevel == 2}"
  16 + @click="changeCity('2')">{{nowCity.city.nowName || nowCity.city.name}}</div>
  17 + <div class="now-item"
  18 + :class="{'selected': nowCity.area.id != 0, 'active': cityList.activityLevel == 3}"
  19 + @click="changeCity('3')">{{nowCity.area.nowName || nowCity.area.name}}</div>
  20 + </div>
  21 + <div class="buttons-box">
  22 + <div class="func-button"
  23 + :class="{'active': cityList.activityLevel == 4}"
  24 + :disabled="nowCity.province.id == 0 || nowCity.city.id == 0 || nowCity.area.id == 0"
  25 + @click="doSubmit">确定</div>
  26 + </div>
  27 + </div>
  28 + </div>
  29 + <scroll-div class="select-view-box"
  30 + scroll-y
  31 + scroll-with-animation>
  32 + <div class="item"
  33 + v-if="cityList && cityList.list && cityList.list.length"
  34 + v-for="(item, index) in cityList.list"
  35 + :key="index"
  36 + @click="selectCity(item)">
  37 + {{item.name}}
  38 + </div>
  39 + </scroll-div>
  40 + </div>
  41 + </div>
  42 + </div>
  43 +</template>
  44 +
  45 +<script>
  46 +import Vue from "vue";
  47 +import { Toast } from 'vant';
  48 +Vue.use(Toast);
  49 +export default {
  50 + data: function () {
  51 + return {
  52 + isShow: false,
  53 + stop: false,
  54 + cityList: {
  55 + activityLevel: "0",
  56 + list: []
  57 + },
  58 + nowCity: {
  59 + province: {
  60 + id: "0",
  61 + pid: "0",
  62 + level: "1",
  63 + name: "省份",
  64 + nowName: ""
  65 + },
  66 + city: {
  67 + id: "0",
  68 + pid: "0",
  69 + level: "2",
  70 + name: "城市",
  71 + nowName: ""
  72 + },
  73 + area: {
  74 + id: "0",
  75 + pid: "0",
  76 + level: "3",
  77 + name: "区县",
  78 + nowName: ""
  79 + }
  80 + }
  81 + }
  82 + },
  83 + props: ["addressInfo"],
  84 + methods: {
  85 +
  86 + /**
  87 + * 显示省市县层，初始化信息等
  88 + */
  89 + showSelectLayer () {
  90 +
  91 + // 获取目前设置的省市县名称
  92 + this.getCityName();
  93 +
  94 + // 设置初始化列表参数
  95 + let id = this.nowCity.area.pid;
  96 + let level = this.nowCity.area.id && this.nowCity.area.id != "0" ? this.nowCity.area.level : "0";
  97 +
  98 + // 获取地址列表项目
  99 + this.getCityList(id, level);
  100 + },
  101 +
  102 + /**
  103 + * 隐藏省市县选择层
  104 + */
  105 + hideLayer () {
  106 +
  107 + // 判断是否阻止事件冒泡
  108 + if (!this.stop) {
  109 + this.isShow = false;
  110 + } else {
  111 + this.stop = false;
  112 + }
  113 + },
  114 +
  115 + /**
  116 + * 阻止事件冒泡
  117 + */
  118 + stopPropagation () {
  119 + this.stop = true;
  120 + },
  121 +
  122 + /**
  123 + * 获取省市县列表
  124 + * @param {number} id [列表id]
  125 + * @param {number} level [活动项目级别，1 省 2 室 3 区县]
  126 + */
  127 + getCityList (id = 0, level = 0) {
  128 +
  129 + /* 获取省列表 开始 */
  130 +
  131 + // 请求接口（获取省列表）
  132 + this.http("/Api/" + (this.getApiVersion().index) + "/getCityList", {
  133 + id: id
  134 + }, this.getCityListCallback, {
  135 + method: "POST",
  136 + level
  137 + })
  138 +
  139 + /* 获取省列表 结束 */
  140 + },
  141 +
  142 + /**
  143 + * 初始化省市县列表回调
  144 + * @param {object} res [服务器返回数据]
  145 + * @param {object} ext [扩展参数]
  146 + */
  147 + getCityListCallback (res, ext) {
  148 +
  149 + // 返回处理
  150 + if (res.code == 200) {
  151 +
  152 + // 解构数据
  153 + let datas = res.data;
  154 +
  155 + // 设置初始化省列表
  156 + this.$set(this.cityList, "activityLevel", parseInt(ext.level) + 1);
  157 + this.$set(this.cityList, "list", datas.list);
  158 +
  159 + // 显示选择省市县浮层
  160 + this.isShow = true;
  161 +
  162 + // 隐藏loading
  163 + Toast.clear();
  164 + // uni.hideLoading();
  165 + } else if (res.code == 400) {
  166 +
  167 + // 获取列表失败
  168 + Toast(res.message);
  169 + } else {
  170 +
  171 + // 获取列表失败
  172 + Toast("获取列表失败");
  173 + }
  174 + },
  175 +
  176 + /**
  177 + * 获取目前设置的省市县名称
  178 + */
  179 + getCityName () {
  180 +
  181 + /* 获取目前设置的省市县名称信息 开始 */
  182 +
  183 + // 判断是否设置了省市县地址
  184 + if (this.addressInfo.province_id && this.addressInfo.city_id && this.addressInfo.area_id) {
  185 +
  186 + // 拆分省市县名称
  187 + let cityNameArr = this.addressInfo.city_name.split(" ");
  188 +
  189 + // 判断数组长度，赋值给相关变量
  190 + if (cityNameArr.length === 3) {
  191 +
  192 + // 赋值
  193 + this.$set(this.nowCity.province, "id", this.addressInfo.province_id);
  194 + this.$set(this.nowCity.province, "pid", "0");
  195 + this.$set(this.nowCity.province, "nowName", cityNameArr[0]);
  196 + this.$set(this.nowCity.city, "id", this.addressInfo.city_id);
  197 + this.$set(this.nowCity.city, "pid", this.addressInfo.province_id);
  198 + this.$set(this.nowCity.city, "nowName", cityNameArr[1]);
  199 + this.$set(this.nowCity.area, "id", this.addressInfo.area_id);
  200 + this.$set(this.nowCity.area, "pid", this.addressInfo.city_id);
  201 + this.$set(this.nowCity.area, "nowName", cityNameArr[2]);
  202 + }
  203 + }
  204 + /* 获取目前设置的省市县名称信息 结束 */
  205 +
  206 + },
  207 +
  208 + /**
  209 + * 设置用户修改后的省市县数据
  210 + */
  211 + setCityName () {
  212 +
  213 + /* 获取目前设置的省市县名称信息 开始 */
  214 +
  215 + // 判断是否设置了省市县地址
  216 + if (this.nowCity.province.id && this.nowCity.city.id && this.nowCity.area.id) {
  217 +
  218 + // 拆分省市县名称
  219 + let cityNameString = this.nowCity.province.nowName + " " + this.nowCity.city.nowName + " " + this.nowCity.area.nowName;
  220 +
  221 + // 判断数组长度，赋值给相关变量
  222 + if (cityNameString) {
  223 +
  224 + // 赋值
  225 + this.$set(this.addressInfo, "province_id", this.nowCity.province.id);
  226 + this.$set(this.addressInfo, "city_id", this.nowCity.city.id);
  227 + this.$set(this.addressInfo, "area_id", this.nowCity.area.id);
  228 + this.$set(this.addressInfo, "city_name", cityNameString);
  229 + }
  230 + }
  231 + /* 获取目前设置的省市县名称信息 结束 */
  232 +
  233 + },
  234 +
  235 + /**
  236 + * 设置nowCity的值，该值在确定后会被赋值给addressInfo的相关属性
  237 + * @param {object} nowCityItem [nowCity相关对象值]
  238 + */
  239 + setNowCity (nowCityItem) {
  240 +
  241 + // 判断项目，设置nowCity值
  242 + switch (nowCityItem.level) {
  243 + case "1":
  244 +
  245 + // 设置新数据
  246 + this.$set(this.nowCity.province, "id", nowCityItem.id);
  247 + this.$set(this.nowCity.province, "pid", nowCityItem.pid);
  248 + this.$set(this.nowCity.province, "nowName", nowCityItem.name);
  249 +
  250 + // 清除下级数据
  251 + this.$set(this.nowCity.city, "id", "0");
  252 + this.$set(this.nowCity.city, "pid", "0");
  253 + this.$set(this.nowCity.city, "nowName", "");
  254 +
  255 + this.$set(this.nowCity.area, "id", "0");
  256 + this.$set(this.nowCity.area, "pid", "0");
  257 + this.$set(this.nowCity.area, "nowName", "");
  258 + break;
  259 + case "2":
  260 +
  261 + // 设置新数据
  262 + this.$set(this.nowCity.city, "id", nowCityItem.id);
  263 + this.$set(this.nowCity.city, "pid", nowCityItem.pid);
  264 + this.$set(this.nowCity.city, "nowName", nowCityItem.name);
  265 +
  266 + // 清除下级数据
  267 + this.$set(this.nowCity.area, "id", "0");
  268 + this.$set(this.nowCity.area, "pid", "0");
  269 + this.$set(this.nowCity.area, "nowName", "");
  270 + break;
  271 + case "3":
  272 + this.$set(this.nowCity.area, "id", nowCityItem.id);
  273 + this.$set(this.nowCity.area, "pid", nowCityItem.pid);
  274 + this.$set(this.nowCity.area, "nowName", nowCityItem.name);
  275 + break;
  276 + }
  277 + },
  278 +
  279 + /**
  280 + * 选择地址列表项目
  281 + * @param {object} item [地址项对象]
  282 + */
  283 + selectCity (item) {
  284 +
  285 + // 设置nowCity值
  286 + this.setNowCity(item);
  287 +
  288 + if (item.level < 3) {
  289 +
  290 + // 显示loading
  291 + Toast.loading({
  292 + duration: 0, // 持续展示 toast
  293 + message: '加载中...',
  294 + forbidClick: true,
  295 + loadingType: 'spinner',
  296 + });
  297 + // uni.showLoading({
  298 + // title: "",
  299 + // mask: true
  300 + // })
  301 +
  302 + // 获取省市县列表
  303 + this.getCityList(item.id, item.level);
  304 + } else {
  305 +
  306 + // 设置activityLevel=4，可以确定了
  307 + this.$set(this.cityList, "activityLevel", parseInt(item.level) + 1);
  308 + }
  309 + },
  310 +
  311 + /**
  312 + * 选择地址列表项目
  313 + * @param {object} nowCity [需要切换的数据对象]
  314 + */
  315 + changeCity (level) {
  316 +
  317 + // 如果是空的，点击无效
  318 + switch (level) {
  319 + case "1":
  320 + if (this.nowCity.province.id == "0") {
  321 + return false;
  322 + }
  323 + break;
  324 + case "2":
  325 + if (this.nowCity.city.id == "0") {
  326 + return false;
  327 + }
  328 + break;
  329 + case "3":
  330 + if (this.nowCity.area.id == "0") {
  331 + return false;
  332 + }
  333 + break;
  334 + }
  335 +
  336 + // 需要读取的列表id
  337 + let id = "0";
  338 +
  339 + // 根据级别，获取参数，做相应设置
  340 + switch (level) {
  341 + case "1":
  342 + id = this.nowCity.province.pid;
  343 + break;
  344 + case "2":
  345 + id = this.nowCity.city.pid;
  346 + break;
  347 + case "3":
  348 + id = this.nowCity.area.pid;
  349 + break;
  350 + }
  351 +
  352 + // 显示loading
  353 + Toast.loading({
  354 + duration: 0, // 持续展示 toast
  355 + message: '加载中...',
  356 + forbidClick: true,
  357 + loadingType: 'spinner',
  358 + });
  359 + // uni.showLoading({
  360 + // title: "",
  361 + // mask: true
  362 + // })
  363 +
  364 + // 获取省市县列表
  365 + this.getCityList(id, parseInt(level) - 1);
  366 + },
  367 +
  368 + /**
  369 + * 点击确定，修改地址的相关地址设置参数
  370 + */
  371 + doSubmit () {
  372 +
  373 + // 设置用户修改后的省市县数据
  374 + this.setCityName();
  375 +
  376 + // 隐藏选择省市县浮层
  377 + this.isShow = false;
  378 + }
  379 + }
  380 +}
  381 +</script>
  382 +
  383 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  384 +<style rel="stylesheet/less" lang="less">
  385 +@import './addressSelectLayer';
  386 +</style>
0 \ No newline at end of file 387 \ No newline at end of file
src/components/navBar/navBar.less 0 → 100755
  View file @4814f90
  1 +@charset "UTF-8";
  2 +
  3 +.nav-bar {
  4 + position: fixed;
  5 + top: 0;
  6 + left: 0;
  7 + z-index: 1;
  8 + width: 100%;
  9 + height: 44px;
  10 + background-color: transparent;
  11 + .box {
  12 + position: relative;
  13 + display: flex;
  14 + justify-content: space-between;
  15 + align-items: center;
  16 + width: 690rpx;
  17 + height: 100%;
  18 + margin: 0 auto;
  19 + .left-box {
  20 + .back {
  21 + width: 38rpx;
  22 + height: 38rpx;
  23 + .img {
  24 + display: block;
  25 + width: 38rpx;
  26 + height: 38rpx;
  27 + }
  28 + }
  29 + &.visibility {
  30 + visibility: hidden;
  31 + width: 38rpx;
  32 + height: 38rpx;
  33 + }
  34 + }
  35 + .center-box {
  36 + position: absolute;
  37 + top: 0;
  38 + left: 0;
  39 + right: 0;
  40 + bottom: 0;
  41 + z-index: 1;
  42 + pointer-events: none;
  43 + .title {
  44 + display: flex;
  45 + justify-content: center;
  46 + align-items: center;
  47 + margin: 0 auto;
  48 + color: #333333;
  49 + font-size: 36rpx;
  50 + font-weight: 600;
  51 + width: 500rpx;
  52 + height: 44px;
  53 + white-space: nowrap;
  54 + text-overflow: ellipsis;
  55 + overflow: hidden;
  56 + }
  57 + }
  58 + .right-box {
  59 + display: flex;
  60 + align-items: center;
  61 + .func-box {
  62 + display: flex;
  63 + align-items: center;
  64 + .img {
  65 + display: block;
  66 + width: 38rpx;
  67 + height: 38rpx;
  68 + & + .text {
  69 + margin-left: 10rpx;
  70 + }
  71 + }
  72 + .text {
  73 + color: #999999;
  74 + font-size: 28rpx;
  75 + font-weight: 400;
  76 + & + .symbol-img {
  77 + margin-left: 10rpx;
  78 + }
  79 + }
  80 + .symbol-img {
  81 + display: block;
  82 + width: 10rpx;
  83 + height: 10rpx;
  84 + }
  85 + & + .func-box {
  86 + margin-left: 20rpx;
  87 + }
  88 + }
  89 + &.visibility {
  90 + visibility: hidden;
  91 + width: 38rpx;
  92 + height: 38rpx;
  93 + }
  94 + }
  95 + }
  96 +}
0 \ No newline at end of file 97 \ No newline at end of file
src/components/navBar/navBar.vue 0 → 100755
  View file @4814f90
  1 +<template>
  2 + <div class="nav-bar"
  3 + v-if="navs"
  4 + :style="navs.style || ''">
  5 + <div class="box">
  6 + <div class="left-box"
  7 + v-if="navs.back">
  8 + <div class="back"
  9 + @tap="doBack">
  10 + <img :src="navs.back.img"
  11 + class="img" />
  12 + </div>
  13 + </div>
  14 + <div class="left-box visibility"
  15 + v-else></div>
  16 + <div class="center-box">
  17 + <div class="title"
  18 + v-if="navs.title">{{navs.title}}</div>
  19 + </div>
  20 + <div class="right-box"
  21 + v-if="navs.funcs">
  22 + <div class="func-box"
  23 + v-for="(func, index) in navs.funcs"
  24 + :key="index"
  25 + @tap="doFunc(func)">
  26 + <img :src="func.img"
  27 + v-if="func.img"
  28 + class="img" />
  29 + <div class="text"
  30 + v-if="func.text">{{func.text}}</div>
  31 + <img :src="func.symbol"
  32 + v-if="func.symbol"
  33 + class="symbol-img" />
  34 + </div>
  35 + </div>
  36 + <div class="right-box visibility"
  37 + v-else></div>
  38 + </div>
  39 + </div>
  40 +</template>
  41 +
  42 +<script>
  43 +export default {
  44 + name: 'navBar',
  45 + data: function () {
  46 + return {
  47 +
  48 + }
  49 + },
  50 + props: ["navs"],
  51 + methods: {
  52 +
  53 + /**
  54 + * 后退
  55 + */
  56 + doBack () {
  57 +
  58 + // 后退事件
  59 + this.$emit('back');
  60 + },
  61 +
  62 + /**
  63 + * 自定义函数
  64 + * @param {function} func [需要执行的函数]
  65 + */
  66 + doFunc (func) {
  67 + if (typeof func === "object" && typeof func.func === "function") {
  68 + if (func.params !== null && func.params !== undefined && func.params) {
  69 + func.func(func.params);
  70 + } else {
  71 + func.func();
  72 + }
  73 + }
  74 + }
  75 + }
  76 +}
  77 +</script>
  78 +
  79 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  80 +<style rel="stylesheet/less" lang="less">
  81 +@import './navBar';
  82 +</style>
0 \ No newline at end of file 83 \ No newline at end of file
src/pages/addressCreate/addressCreate.less 0 → 100755
  View file @4814f90
  1 +@charset "UTF-8";
  2 +
  3 +@font_size_label: 28px;
  4 +@width_label: 650px;
  5 +@height_label: 108px;
  6 +@border_bottom_label: 1px solid #E4E4E4;
  7 +@width_text: 240px;
  8 +@color_text: #3A3A3A;
  9 +@color_address_item: #333333;
  10 +@width_check_box: 35px;
  11 +@height_check_box: 35px;
  12 +@width_bar: 100%;
  13 +@height_bar: 140px;
  14 +@font_size_btn: 34px;
  15 +@border_radius_btn: 100px;
  16 +@background_color_bright: #FF725C;
  17 +@background_color_bright_o: rgba(255, 114, 92, 0.8);
  18 +@color_btn_bright: #fff;
  19 +@box_shadow_btn: 0 4px 12px #F8ADA2;
  20 +@width_btn_bright: 546px;
  21 +@height_btn_bright: 90px;
  22 +@width_btn_bright_img: 38px;
  23 +@height_btn_bright_img: 38px;
  24 +@padding_left_btn_bright_text: 37px;
  25 +
  26 +.address-create-page {
  27 + .nav {
  28 + position: fixed;
  29 + top: 0;
  30 + z-index: 100;
  31 + width: 100%;
  32 + .nav-bar {
  33 + position: unset;
  34 + background-color: #FFFFFF;
  35 + border-bottom: 1px solid #E6E6E6;
  36 + }
  37 + }
  38 + .pl {
  39 + background-color: transparent;
  40 + width: 100%;
  41 + &.is-cnlive {
  42 + height: 44px;
  43 + }
  44 + &.not-is-cnlive {
  45 + height: 0;
  46 + &.is-open-app {
  47 + height: 124px;
  48 + }
  49 + }
  50 + &.not-is-cnlive {
  51 + &.not-is-wechat {
  52 + height: 44px;
  53 + }
  54 + }
  55 + }
  56 + > .box {
  57 + .label {
  58 + display: flex;
  59 + align-items: center;
  60 + font-size: @font_size_label;
  61 + width: @width_label;
  62 + height: @height_label;
  63 + margin: 0 auto;
  64 + border-bottom: @border_bottom_label;
  65 + &:last-child {
  66 + border-bottom: none;
  67 + }
  68 + &.check-group {
  69 + justify-content: space-between;
  70 + }
  71 + .text {
  72 + color: @color_text;
  73 + width: @width_text;
  74 + }
  75 + .address-item {
  76 + color: @color_address_item;
  77 + font-size: 28px;
  78 + width: 100%;
  79 + border:none;
  80 + &.address-pl-text {
  81 + color: #C8C8C8;
  82 + }
  83 + }
  84 + .check-box {
  85 + width: @width_check_box;
  86 + height: @height_check_box;
  87 + }
  88 + }
  89 + }
  90 + .address-create-btn {
  91 + .box {
  92 + position: fixed;
  93 + bottom: 0;
  94 + z-index: 100;
  95 + background-color: transparent;
  96 + width: @width_bar;
  97 + height: @height_bar;
  98 + @supports (padding-bottom: env(safe-area-inset-bottom)) {
  99 + & {
  100 + padding-bottom: env(safe-area-inset-bottom);
  101 + }
  102 + }
  103 + .buttons {
  104 + .btn {
  105 + font-size: @font_size_btn;
  106 + border-radius: @border_radius_btn;
  107 + &.btn-bright {
  108 + display: flex;
  109 + flex-direction: row;
  110 + justify-content: center;
  111 + align-items: center;
  112 + background-color: @background_color_bright;
  113 + color: @color_btn_bright;
  114 + width: @width_btn_bright;
  115 + height: @height_btn_bright;
  116 + box-shadow: @box_shadow_btn;
  117 + margin: 0 auto;
  118 + &[disabled] {
  119 + background-color: @background_color_bright_o;
  120 + pointer-events: none;
  121 + }
  122 + .img {
  123 + width: @width_btn_bright_img;
  124 + height: @height_btn_bright_img;
  125 + }
  126 + .img + .text {
  127 + padding-left: @padding_left_btn_bright_text;
  128 + }
  129 + }
  130 + }
  131 + }
  132 + }
  133 + .placeholder-box {
  134 + background-color: transparent;
  135 + border-top: 1px solid transparent;
  136 + border-bottom: 1px solid transparent;
  137 + width: @width_bar;
  138 + height: @height_bar;
  139 + }
  140 + }
  141 +}
0 \ No newline at end of file 142 \ No newline at end of file
src/pages/addressCreate/addressCreate.vue 0 → 100755
  View file @4814f90
  1 +<template>
  2 + <div class="address-create-page">
  3 +
  4 + <!-- 导航栏 -->
  5 + <!-- <div class="nav"
  6 + :style="{'paddingTop': top.value + 'px'}"> -->
  7 +
  8 + <!-- navBar -->
  9 + <!-- <nav-bar v-if="!this.isWeChat.value"
  10 + @back="back"
  11 + :navs="navs">
  12 + </nav-bar> -->
  13 + <!-- </div> -->
  14 +
  15 + <!-- <div class="pl"
  16 + :class="{'is-cnlive': isCNLive2.value, 'not-is-wechat': !isWeChat.value, 'not-is-cnlive': !isCNLive2.value, 'is-open-app': isOpenApp.value}"
  17 + :style="{'paddingTop': top.value + 'px'}"></div> -->
  18 +
  19 + <address-select-layer ref="selectLayer"
  20 + :addressInfo="addressInfo">
  21 + </address-select-layer>
  22 +
  23 + <div class="box">
  24 + <form class="address-create-form">
  25 + <label class="label">
  26 + <div class="text">收件人：</div>
  27 + <input type="text"
  28 + placeholder-style="color: #C8C8C8;"
  29 + placeholder="请输入收货人姓名(不超过20个字)"
  30 + maxlength="20"
  31 + v-model="addressInfo.contactName"
  32 + class="address-item"
  33 + @blur="onBlur('contactName')"
  34 + v-focus="contactNameFocus" />
  35 + </label>
  36 + <label class="label">
  37 + <div class="text">手机号码：</div>
  38 + <input type="number"
  39 + placeholder-style="color: #C8C8C8;"
  40 + placeholder="请输入手机号"
  41 + v-model="addressInfo.contactPhone"
  42 + class="address-item"
  43 + @blur="onBlur('contactPhone')"
  44 + v-focus="contactPhoneFocus" />
  45 + </label>
  46 + <label class="label"
  47 + @click="showSelectLayer">
  48 + <div class="text">所在地区：</div>
  49 + <div class="address-item"
  50 + v-if="addressInfo.city_name">{{addressInfo.city_name}}</div>
  51 + <div class="address-item address-pl-text"
  52 + v-else>请选择省份、城市、区县</div>
  53 + </label>
  54 + <label class="label">
  55 + <div class="text">详细地址：</div>
  56 + <input type="text"
  57 + placeholder-style="color: #C8C8C8;"
  58 + placeholder="填写详细地址"
  59 + v-model="addressInfo.address"
  60 + class="address-item"
  61 + @blur="onBlur('address')"
  62 + v-focus="addressFocus" />
  63 + </label>
  64 + </form>
  65 + </div>
  66 +
  67 + <!-- 提交新增地址按钮 -->
  68 + <div class="address-create-btn">
  69 + <div class="placeholder-box"></div>
  70 + <div class="box">
  71 + <div class="buttons">
  72 + <div class="btn btn-bright"
  73 + @click="checkAddressCreate(addressInfo)"
  74 + :disabled="isDisabled">
  75 + <div class="text">确定</div>
  76 + </div>
  77 + </div>
  78 + </div>
  79 + </div>
  80 + </div>
  81 +</template>
  82 +
  83 +<script>
  84 +
  85 +// 引入组件
  86 +import navBar from '@/components/navBar/navBar';
  87 +import addressSelectLayer from "@/components/addressSelectLayer/addressSelectLayer.vue";
  88 +import Vue from "vue";
  89 +import { Toast } from 'vant';
  90 +Vue.use(Toast);
  91 +export default {
  92 + name: 'addressCreatePage',
  93 + data () {
  94 + return {
  95 + title: "",
  96 + query: {},
  97 + isDisabled: false, // 防止重复点击
  98 + navs: null, // navBar配置参数
  99 + contactNameFocus: false, // 姓名获得焦点
  100 + contactPhoneFocus: false, // 手机号码获得焦点
  101 + cityNameFocus: false, // 城市获得焦点
  102 + addressFocus: false, // 详细地址获得焦点
  103 + addressInfo: { // 地址信息对象
  104 + uid: null,
  105 + contactName: "",
  106 + contactPhone: "",
  107 + address: "",
  108 + province_id: "0",
  109 + city_id: "0",
  110 + area_id: "0",
  111 + city_name: ""
  112 + }
  113 + }
  114 + },
  115 + components: {
  116 + navBar,
  117 + addressSelectLayer
  118 + },
  119 + created () {
  120 +
  121 + // 设置标题
  122 + this.$set(this, 'title', '新增收货地址');
  123 +
  124 + // 设置地址栏请求参数
  125 + this.$set(this, "query", this.$router.query);
  126 +
  127 + this.$set(this, "navs", {
  128 + back: {
  129 + img: "/static/img/icon_back.png"
  130 + },
  131 + title: this.title
  132 + });
  133 +
  134 + // 设置uid属性
  135 + this.$set(this.addressInfo, 'uid', this.getStore("uid"));
  136 +
  137 + // #ifdef H5 || APP-PLUS
  138 +
  139 + // 更新页面title
  140 + this.$emit("updateHead");
  141 +
  142 + // #endif
  143 + },
  144 + mounted () {
  145 + },
  146 +
  147 + methods: {
  148 +
  149 + /**
  150 + * 显示 选择省市县层
  151 + */
  152 + showSelectLayer () {
  153 +
  154 + // 调用组件内函数，处理层的显示
  155 + this.$refs.selectLayer.showSelectLayer();
  156 + },
  157 +
  158 + /**
  159 + * 检查收货地址
  160 + * @param {Object} addressInfo [地址信息对象]
  161 + */
  162 + checkAddressCreate (addressInfo) {
  163 +
  164 + /* 检查地址参数 开始 */
  165 +
  166 + if (!addressInfo.contactName.trim()) {
  167 + this.$set(addressInfo, 'contactName', '');
  168 + Toast('请输入收货人姓名');
  169 + return false;
  170 + }
  171 +
  172 + if (!addressInfo.contactPhone.trim()) {
  173 + Toast('请输入手机号');
  174 + return false;
  175 + }
  176 +
  177 + if (addressInfo.contactPhone.trim()) {
  178 +
  179 + // 校验手机号格式
  180 + let valid_rule = /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/; // 手机号码校验规则
  181 +
  182 + if (!valid_rule.test(addressInfo.contactPhone)) {
  183 + Toast('手机号格式错误');
  184 + return false;
  185 + }
  186 + }
  187 +
  188 + if (!addressInfo.city_name || addressInfo.province_id == "0" || addressInfo.city_id == "0" || addressInfo.area_id == "0") {
  189 + Toast('请选择所在地区');
  190 + return false;
  191 + }
  192 +
  193 + if (!addressInfo.address.trim()) {
  194 + Toast('请填写详细地址');
  195 + return false;
  196 + }
  197 +
  198 + /* 检查地址参数 结束 */
  199 +
  200 + // 新增地址操作
  201 + this.doAddressCreate(addressInfo);
  202 + },
  203 +
  204 + /**
  205 + * 新增地址操作
  206 + * @param {Object} addressInfo [地址信息对象]
  207 + */
  208 + doAddressCreate (addressInfo) {
  209 + console.log(addressInfo);
  210 + // 校验必选参数
  211 + if (addressInfo.uid && addressInfo.contactName && addressInfo.contactPhone && addressInfo.address && addressInfo.province_id != "0" && addressInfo.city_id != "0" && addressInfo.area_id != "0") {
  212 +
  213 + // 禁止按钮点击
  214 + this.$set(this, 'isDisabled', true);
  215 +
  216 + // 显示loading
  217 + Toast.loading({
  218 + duration: 0, // 持续展示 toast
  219 + message: '加载中...',
  220 + forbidClick: true,
  221 + loadingType: 'spinner',
  222 + });
  223 +
  224 + // 请求接口
  225 + this.http("/Api/" + (this.getApiVersion().index) + "/addAddress", addressInfo, this.doAddressCreateCallback, {
  226 + method: "POST"
  227 + });
  228 + } else {
  229 +
  230 + // 参数错误
  231 + Toast("请完整填写收货地址信息");
  232 + }
  233 + },
  234 +
  235 + /**
  236 + * 新增地址操作回调
  237 + * @param {Object} res [服务器返回数据]
  238 + * @param {Object} res [扩展参数]
  239 + */
  240 + doAddressCreateCallback (res, ext) {
  241 +
  242 + // 返回处理
  243 + if (res.code == 200) {
  244 + Toast.clear();
  245 + // Toast("添加地址成功");
  246 + // 先返回列表页，在列表页显示操作结果（Storage传输）
  247 + window.localStorage.setItem("addressOption", "添加地址成功");
  248 +
  249 + // 后退
  250 + this.back();
  251 + } else if (res.code == 400) {
  252 +
  253 + // 添加地址出错
  254 + Toast(res.message);
  255 + } else {
  256 +
  257 + // 添加地址出错
  258 + Toast("添加地址出错");
  259 + }
  260 +
  261 + // 允许按钮点击
  262 + this.$set(this, 'isDisabled', false);
  263 + },
  264 +
  265 + /**
  266 + * 失去焦点事件，处理微信端页面滚动条不归位的问题
  267 + * @param {String} what [具体输入框控制变量]
  268 + */
  269 + onBlur (what) {
  270 +
  271 + if (!this.contactNameFocus && !this.contactPhoneFocus && !this.addressFocus) {
  272 +
  273 + // #ifdef H5 || APP-PLUS
  274 +
  275 + // 设置滚动条位置
  276 + window.scrollTo(0, 0);
  277 +
  278 + // #endif
  279 + }
  280 +
  281 + // 设置变量
  282 + switch (what) {
  283 + case "contactName":
  284 + this.contactNameFocus = false;
  285 + break;
  286 + case "contactPhone":
  287 + this.contactPhoneFocus = false;
  288 + break;
  289 + case "city_name":
  290 + this.cityNameFocus = false;
  291 + break;
  292 + case "address":
  293 + this.addressFocus = false;
  294 + break;
  295 + }
  296 + },
  297 +
  298 + /**
  299 + * 返回
  300 + */
  301 + back () {
  302 + window.history.go(-1);
  303 + // 判断是否有返回函数
  304 + // if (typeof this.helper.$Apps2 === 'object' && typeof this.helper.$Apps2.back === 'function') {
  305 +
  306 + // // 调用返回
  307 + // this.helper.$Apps2.back();
  308 + // } else {
  309 +
  310 + // // 后退
  311 + // uni.navigateBack({
  312 + // delta: 1
  313 + // });
  314 + // }
  315 + }
  316 + },
  317 + directives: {
  318 + focus: {
  319 + update: function (el, { value }) {
  320 + if (value) {
  321 + el.children[0].children[0].focus();
  322 + }
  323 + }
  324 + }
  325 + },
  326 + head: {
  327 + title () {
  328 + return {
  329 + inner: this.title
  330 + }
  331 + }
  332 + },
  333 + watch: {
  334 +
  335 + /**
  336 + * 设置页面标题
  337 + * @param {Object} newVal [标题新值]
  338 + */
  339 + title (newVal) {
  340 +
  341 + /* 设置页面标题 开始 */
  342 + // this.setTitle(newVal);
  343 + /* 设置页面标题 结束 */
  344 + }
  345 + }
  346 +}
  347 +</script>
  348 +
  349 +<style rel="stylesheet/less" lang="less">
  350 +@import './addressCreate';
  351 +</style>
0 \ No newline at end of file 352 \ No newline at end of file
src/pages/addressEdit/addressEdit.less 0 → 100755
  View file @4814f90
  1 +@charset "UTF-8";
  2 +
  3 +@font_size_label: 28px;
  4 +@width_label: 650px;
  5 +@height_label: 108px;
  6 +@border_bottom_label: 1px solid #E4E4E4;
  7 +@width_text: 240px;
  8 +@color_text: #3A3A3A;
  9 +@color_address_item: #333333;
  10 +@width_check_box: 35px;
  11 +@height_check_box: 35px;
  12 +@width_bar: 100%;
  13 +@height_bar: 140px;
  14 +@font_size_btn: 34px;
  15 +@border_radius_btn: 100px;
  16 +@background_color_bright: #FF725C;
  17 +@background_color_bright_o: rgba(255, 114, 92, 0.8);
  18 +@color_btn_bright: #fff;
  19 +@color_btn_bright_o: #FF725C;
  20 +@border_btn: 1px solid #FF725C;
  21 +@box_shadow_btn: 0 4px 12px #F8ADA2;
  22 +@width_btn_bright: 546px;
  23 +@height_btn_bright: 90px;
  24 +@width_btn_bright_img: 38px;
  25 +@height_btn_bright_img: 38px;
  26 +@padding_left_btn_bright_text: 37px;
  27 +
  28 +.address-edit-page {
  29 + .nav {
  30 + position: fixed;
  31 + top: 0;
  32 + z-index: 100;
  33 + width: 100%;
  34 + .nav-bar {
  35 + position: unset;
  36 + background-color: #FFFFFF;
  37 + border-bottom: 1px solid #E6E6E6;
  38 + }
  39 + }
  40 + .pl {
  41 + background-color: transparent;
  42 + width: 100%;
  43 + &.is-cnlive {
  44 + height: 44px;
  45 + }
  46 + &.not-is-cnlive {
  47 + height: 0;
  48 + &.is-open-app {
  49 + height: 124px;
  50 + }
  51 + }
  52 + &.not-is-cnlive {
  53 + &.not-is-wechat {
  54 + height: 44px;
  55 + }
  56 + }
  57 + }
  58 + > .box {
  59 + .label {
  60 + display: flex;
  61 + align-items: center;
  62 + font-size: @font_size_label;
  63 + width: @width_label;
  64 + height: @height_label;
  65 + margin: 0 auto;
  66 + border-bottom: @border_bottom_label;
  67 + &:last-child {
  68 + border-bottom: none;
  69 + }
  70 + &.check-group {
  71 + justify-content: space-between;
  72 + }
  73 + .text {
  74 + color: @color_text;
  75 + width: @width_text;
  76 + }
  77 + .address-item {
  78 + color: @color_address_item;
  79 + font-size: 28px;
  80 + width: 100%;
  81 + border: none;
  82 + &.address-pl-text {
  83 + color: #C8C8C8;
  84 + }
  85 + }
  86 + .check-box {
  87 + width: @width_check_box;
  88 + height: @height_check_box;
  89 + }
  90 + }
  91 + }
  92 + .address-edit-btn {
  93 + .box {
  94 + position: fixed;
  95 + bottom: 0;
  96 + z-index: 100;
  97 + background-color: transparent;
  98 + width: @width_bar;
  99 + height: @height_bar;
  100 + @supports (padding-bottom: env(safe-area-inset-bottom)) {
  101 + & {
  102 + padding-bottom: env(safe-area-inset-bottom);
  103 + }
  104 + }
  105 + .buttons {
  106 + .btn {
  107 + font-size: @font_size_btn;
  108 + border-radius: @border_radius_btn;
  109 + &.btn-bright {
  110 + display: flex;
  111 + flex-direction: row;
  112 + justify-content: center;
  113 + align-items: center;
  114 + background-color: @background_color_bright;
  115 + color: @color_btn_bright;
  116 + width: @width_btn_bright;
  117 + height: @height_btn_bright;
  118 + box-shadow: @box_shadow_btn;
  119 + margin: 0 auto;
  120 + &[disabled] {
  121 + background-color: @background_color_bright_o;
  122 + pointer-events: none;
  123 + }
  124 + .img {
  125 + width: @width_btn_bright_img;
  126 + height: @height_btn_bright_img;
  127 + }
  128 + .img + .text {
  129 + padding-left: @padding_left_btn_bright_text;
  130 + }
  131 + }
  132 + }
  133 + }
  134 + }
  135 + .placeholder-box {
  136 + background-color: transparent;
  137 + border-top: 1px solid transparent;
  138 + border-bottom: 1px solid transparent;
  139 + width: @width_bar;
  140 + height: @height_bar;
  141 + }
  142 + }
  143 +}
0 \ No newline at end of file 144 \ No newline at end of file
src/pages/addressEdit/addressEdit.vue 0 → 100755
  View file @4814f90
  1 +<template>
  2 + <div class="address-edit-page">
  3 +
  4 + <!-- 导航栏 -->
  5 + <!-- <div class="nav"
  6 + :style="{'paddingTop': top.value + 'px'}"> -->
  7 +
  8 + <!-- navBar -->
  9 + <!-- <nav-bar v-if="!this.isWeChat.value"
  10 + @back="back"
  11 + :navs="navs">
  12 + </nav-bar> -->
  13 + <!-- </div> -->
  14 +
  15 + <!-- <div class="pl"
  16 + :class="{'is-cnlive': isCNLive2.value, 'not-is-wechat': !isWeChat.value, 'not-is-cnlive': !isCNLive2.value, 'is-open-app': isOpenApp.value}"
  17 + :style="{'paddingTop': top.value + 'px'}"></div> -->
  18 +
  19 + <address-select-layer ref="selectLayer"
  20 + :addressInfo="addressInfo">
  21 + </address-select-layer>
  22 +
  23 + <div class="box">
  24 + <form class="address-edit-form">
  25 + <label class="label">
  26 + <div class="text">收货人：</div>
  27 + <input type="text"
  28 + placeholder-style="color: #C8C8C8;"
  29 + placeholder="请输入收货人姓名(不超过20个字)"
  30 + maxlength="20"
  31 + v-model="addressInfo.name"
  32 + class="address-item"
  33 + @blur="onBlur('name')"
  34 + v-focus="nameFocus" />
  35 + </label>
  36 + <label class="label">
  37 + <div class="text">联系电话：</div>
  38 + <input type="number"
  39 + placeholder-style="color: #C8C8C8;"
  40 + placeholder="请输入手机号"
  41 + v-model="addressInfo.phone"
  42 + class="address-item"
  43 + @blur="onBlur('phone')"
  44 + v-focus="phoneFocus" />
  45 + </label>
  46 + <label class="label"
  47 + @click="showSelectLayer">
  48 + <div class="text">所在地区：</div>
  49 + <div class="address-item"
  50 + v-if="addressInfo.city_name">{{addressInfo.city_name}}</div>
  51 + <div class="address-item address-pl-text"
  52 + v-else>请选择省份、城市、区县</div>
  53 + </label>
  54 + <label class="label">
  55 + <div class="text">详细地址：</div>
  56 + <input type="text"
  57 + placeholder="请填写详细地址"
  58 + v-model="addressInfo.write_address"
  59 + class="address-item"
  60 + @blur="onBlur('write_address')"
  61 + v-focus="writeAddressFocus" />
  62 + </label>
  63 + </form>
  64 + </div>
  65 +
  66 + <!-- 提交新增地址按钮 -->
  67 + <div class="address-edit-btn">
  68 + <div class="placeholder-box"></div>
  69 + <div class="box">
  70 + <div class="buttons">
  71 + <div class="btn btn-bright"
  72 + @click="checkAddressEdit(addressInfo)"
  73 + :disabled="isDisabled">
  74 + <div class="text">确定</div>
  75 + </div>
  76 + </div>
  77 + </div>
  78 + </div>
  79 + </div>
  80 +</template>
  81 +
  82 +<script>
  83 +
  84 +// 引入组件
  85 +import navBar from '@/components/navBar/navBar';
  86 +import addressSelectLayer from "@/components/addressSelectLayer/addressSelectLayer.vue";
  87 +import Vue from "vue";
  88 +import { Toast } from 'vant';
  89 +Vue.use(Toast);
  90 +export default {
  91 + name: 'addressEditPage',
  92 + data () {
  93 + return {
  94 + title: "",
  95 + query: {},
  96 + isDisabled: false, // 防止重复点击
  97 + navs: null, // navBar配置参数
  98 + nameFocus: false, // 姓名获得焦点
  99 + phoneFocus: false, // 手机号码获得焦点
  100 + // cityNameFocus: false, // 城市获得焦点
  101 + writeAddressFocus: false, // 详细地址获得焦点
  102 + addressInfo: {} // 地址信息对象
  103 + }
  104 + },
  105 + components: {
  106 + navBar,
  107 + addressSelectLayer
  108 + },
  109 + created () {
  110 +
  111 + // 设置标题
  112 + this.$set(this, 'title', '编辑收货地址');
  113 +
  114 + // 设置地址栏请求参数
  115 + this.$set(this, "query", this.$route.query);
  116 +
  117 + this.$set(this, "navs", {
  118 + back: {
  119 + img: "/static/img/icon_back.png"
  120 + },
  121 + title: this.title
  122 + });
  123 +
  124 + // 获取收件人详情
  125 + this.getAddressInfo();
  126 + // #ifdef H5 || APP-PLUS
  127 +
  128 + // 更新页面title
  129 + this.$emit("updateHead");
  130 +
  131 + // #endif
  132 + },
  133 + mounted () {
  134 +
  135 +
  136 +
  137 + },
  138 + methods: {
  139 +
  140 + /**
  141 + * 获取收件人详情
  142 + */
  143 + getAddressInfo () {
  144 + // 校验必选参数
  145 + if (this.query.id && this.getStore("uid")) {
  146 +
  147 + // 显示loading
  148 + Toast.loading({
  149 + duration: 0, // 持续展示 toast
  150 + message: '加载中...',
  151 + forbidClick: true,
  152 + loadingType: 'spinner',
  153 + });
  154 + console.log(this.query.id);
  155 + // 请求接口
  156 + this.http("/Api/" + (this.getApiVersion().index) + "/addressInfo", {
  157 + id: this.query.id
  158 + }, this.getAddressInfoCallback, {
  159 + method: "POST"
  160 + });
  161 + } else {
  162 +
  163 + // 参数错误
  164 + Toast("获取收件人详情失败");
  165 + }
  166 + },
  167 +
  168 + /**
  169 + * 获取收件人详情回调
  170 + * @param {Object} res [服务器返回数据]
  171 + * @param {Object} ext [扩展参数]
  172 + */
  173 + getAddressInfoCallback (res, ext) {
  174 +
  175 + // 返回处理
  176 + if (res.code == 200) {
  177 +
  178 + // 解构数据
  179 + let datas = res.data;
  180 +
  181 + /* 设置地址相关属性（不含默认值选项） 开始 */
  182 + this.addressInfo = datas;
  183 +
  184 + // 删除默认地址选项，避免接口调用报错
  185 + delete this.addressInfo.state;
  186 +
  187 + /* 设置地址相关属性（不含默认值选项） 结束 */
  188 +
  189 + // 隐藏loading
  190 + Toast.clear();
  191 + } else if (res.code == 400) {
  192 +
  193 + // 获取收件人详情失败
  194 + Toast(res.message);
  195 + } else {
  196 +
  197 + // 获取收件人详情失败
  198 + Toast("获取收件人详情失败");
  199 + }
  200 + },
  201 +
  202 + /**
  203 + * 显示 选择省市县层
  204 + */
  205 + showSelectLayer () {
  206 +
  207 + // 调用组件内函数，处理层的显示
  208 + this.$refs.selectLayer.showSelectLayer();
  209 + },
  210 +
  211 + /**
  212 + * 检查收货地址
  213 + * @param {Object} addressInfo [地址信息对象]
  214 + */
  215 + checkAddressEdit (addressInfo) {
  216 +
  217 + /* 检查地址参数 开始 */
  218 +
  219 + if (!addressInfo.name.trim()) {
  220 + this.$set(addressInfo, 'name', '');
  221 + Toast('请输入收货人姓名');
  222 + return false;
  223 + }
  224 +
  225 + if (!addressInfo.phone.trim()) {
  226 + Toast('请输入手机号');
  227 + return false;
  228 + }
  229 +
  230 + if (addressInfo.phone.trim()) {
  231 +
  232 + // 校验手机号格式
  233 + let valid_rule = /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/; // 手机号码校验规则
  234 +
  235 + if (!valid_rule.test(addressInfo.phone)) {
  236 + Toast('手机号格式错误');
  237 + return false;
  238 + }
  239 + }
  240 +
  241 + if (!addressInfo.city_name || addressInfo.province_id == "0" || addressInfo.city_id == "0" || addressInfo.area_id == "0") {
  242 + Toast('请选择所在地区');
  243 + return false;
  244 + }
  245 +
  246 + if (!addressInfo.write_address.trim()) {
  247 + Toast('请填写详细地址');
  248 + return false;
  249 + }
  250 +
  251 + /* 检查地址参数 结束 */
  252 +
  253 + // 新增地址操作
  254 + this.doAddressEdit(addressInfo);
  255 + },
  256 +
  257 + /**
  258 + * 编辑地址操作
  259 + * @param {Object} addressInfo [地址信息对象]
  260 + */
  261 + doAddressEdit (addressInfo) {
  262 +
  263 + // 校验必选参数
  264 + if (addressInfo.uid && addressInfo.id && addressInfo.name && addressInfo.phone && addressInfo.province_id != "0" && addressInfo.city_id != "0" && addressInfo.area_id != "0") {
  265 +
  266 + // 禁止按钮点击
  267 + this.$set(this, 'isDisabled', true);
  268 +
  269 + // 显示loading
  270 + Toast.loading({
  271 + duration: 0, // 持续展示 toast
  272 + message: '加载中...',
  273 + forbidClick: true,
  274 + loadingType: 'spinner',
  275 + });
  276 +
  277 + let options = {
  278 + id: addressInfo.id,
  279 + uid: addressInfo.uid,
  280 + contactName: addressInfo.name,
  281 + contactPhone: addressInfo.phone,
  282 + address: addressInfo.write_address,
  283 + province_id: addressInfo.province_id,
  284 + city_id: addressInfo.city_id,
  285 + area_id: addressInfo.area_id
  286 + };
  287 +
  288 + // 请求接口
  289 + this.http("/Api/" + (this.getApiVersion().index) + "/editAddress", options, this.doAddressEditCallback, {
  290 + method: "POST",
  291 + addressInfo
  292 + });
  293 + } else {
  294 +
  295 + // 参数错误
  296 + Toast("请完整填写收货地址信息");
  297 + }
  298 + },
  299 +
  300 + /**
  301 + * 编辑地址操作回调
  302 + * @param {Object} res [服务器返回数据]
  303 + * @param {Object} ext [扩展参数]
  304 + */
  305 + doAddressEditCallback (res, ext) {
  306 +
  307 + // 返回处理
  308 + if (res.code == 200) {
  309 + // 隐藏loading
  310 + Toast.clear();
  311 + // 解构数据
  312 + let datas = res.data;
  313 +
  314 + /* 处理当前设置的地址，如果修改的是当前设置的地址，同步数据 开始 */
  315 +
  316 + // 获取当前设置的地址对象
  317 + let currentAddress = window.localStorage.getItem('currentAddress', datas);;
  318 +
  319 + if (currentAddress && currentAddress.id === datas.id) {
  320 +
  321 + // 同步当前选中的地址信息
  322 + window.localStorage.setItem('currentAddress', datas);
  323 + }
  324 +
  325 + /* 处理当前设置的地址，如果修改的是当前设置的地址，同步该数据 结束 */
  326 +
  327 + // 先返回列表页，在列表页显示操作结果（Storage传输）
  328 + window.localStorage.setItem('currentAddress', '修改地址成功');
  329 + // 后退
  330 + this.back();
  331 + } else if (res.code == 200) {
  332 + // 修改地址出错
  333 + Toast(res.message);
  334 + } else {
  335 + // 修改地址出错
  336 + Toast("修改地址出错");
  337 + }
  338 +
  339 + // 允许按钮点击
  340 + this.$set(this, 'isDisabled', false);
  341 + },
  342 +
  343 + /**
  344 + * 设置默认联系人（实时调用）
  345 + * @param {Object} item [联系人对象]
  346 + */
  347 + setDefaultContact (item) {
  348 +
  349 + // 判断是否可设置为默认联系人，如果已经是默认联系人，不能取消
  350 + if (item.state == 2) {
  351 +
  352 + // 已是默认联系人
  353 + Toast("已是默认联系人，无需设置。");
  354 + } else {
  355 +
  356 + // 显示loading
  357 + Toast.loading({
  358 + duration: 0, // 持续展示 toast
  359 + message: '加载中...',
  360 + forbidClick: true,
  361 + loadingType: 'spinner',
  362 + });
  363 +
  364 + // 请求接口
  365 + this.http("/Api/" + (this.getApiVersion().index) + "/editAddress", {
  366 + uid: item.uid,
  367 + id: item.id,
  368 + state: "2"
  369 + }, this.setDefaultContactCallback, {
  370 + method: "POST",
  371 + item
  372 + });
  373 + }
  374 + },
  375 +
  376 + /**
  377 + * 编辑地址操作回调
  378 + * @param {Object} res [服务器返回数据]
  379 + * @param {Object} res [扩展参数]
  380 + */
  381 + setDefaultContactCallback (res, ext) {
  382 +
  383 + // 返回处理
  384 + if (res.code == 200) {
  385 +
  386 + // 获取地址列表
  387 + this.getMyAddress();
  388 +
  389 + // 输出地址操作结果
  390 + Toast('设置默认地址成功');
  391 +
  392 + // showToasting
  393 + this.$set(this, 'showToasting', true);
  394 + } else if (res.code == 200) {
  395 +
  396 + // 设置默认联系人出错
  397 + Toast(res.message);
  398 + } else {
  399 +
  400 + // 设置默认联系人出错
  401 + Toast("设置默认联系人出错");
  402 + }
  403 + },
  404 +
  405 + /**
  406 + * 失去焦点事件，处理微信端页面滚动条不归位的问题
  407 + * param {string} what [具体输入框控制变量]
  408 + */
  409 + onBlur (what) {
  410 +
  411 + if (!this.nameFocus && !this.phoneFocus && !this.addressFocus) {
  412 +
  413 + // #ifdef H5 || APP-PLUS
  414 +
  415 + // 设置滚动条位置
  416 + window.scrollTo(0, 0);
  417 +
  418 + // #endif
  419 + }
  420 +
  421 + // 设置变量
  422 + switch (what) {
  423 + case "name":
  424 + this.nameFocus = false;
  425 + break;
  426 + case "phone":
  427 + this.phoneFocus = false;
  428 + break;
  429 + // case "city_name":
  430 + // this.cityNameFocus = false;
  431 + // break;
  432 + case "write_address":
  433 + this.writeAddressFocus = false;
  434 + break;
  435 + }
  436 + },
  437 +
  438 + /**
  439 + * 返回
  440 + */
  441 + back () {
  442 + window.history.go(-1);
  443 + // 判断是否有返回函数
  444 + // if (typeof this.helper.$Apps2 === 'object' && typeof this.helper.$Apps2.back === 'function') {
  445 +
  446 + // // 调用返回
  447 + // this.helper.$Apps2.back();
  448 + // } else {
  449 +
  450 + // // 后退
  451 + // uni.navigateBack({
  452 + // delta: 1
  453 + // });
  454 + // }
  455 + }
  456 + },
  457 + directives: {
  458 + focus: {
  459 + update: function (el, { value }) {
  460 + if (value) {
  461 + el.children[0].children[0].focus();
  462 + }
  463 + }
  464 + }
  465 + },
  466 + head: {
  467 + title () {
  468 + return {
  469 + inner: this.title
  470 + }
  471 + }
  472 + },
  473 + watch: {
  474 +
  475 + /**
  476 + * 设置页面标题
  477 + * @param {Object} newVal [标题新值]
  478 + */
  479 + title (newVal) {
  480 +
  481 + /* 设置页面标题 开始 */
  482 + // this.setTitle(newVal);
  483 + /* 设置页面标题 结束 */
  484 + }
  485 + }
  486 +}
  487 +</script>
  488 +
  489 +<style rel="stylesheet/less" lang="less">
  490 +@import './addressEdit';
  491 +</style>
0 \ No newline at end of file 492 \ No newline at end of file
src/pages/addressList/addressList.less 0 → 100755
  View file @4814f90
  1 +@charset "UTF-8";
  2 +
  3 +.address-list-page {
  4 + .nav {
  5 + position: fixed;
  6 + top: 0;
  7 + z-index: 100;
  8 + width: 100%;
  9 + .nav-bar {
  10 + position: unset;
  11 + background-color: #FFFFFF;
  12 + border-bottom: 1px solid #E6E6E6;
  13 + }
  14 + }
  15 + .pl {
  16 + background-color: transparent;
  17 + width: 100%;
  18 + &.is-cnlive {
  19 + height: 44px;
  20 + }
  21 + &.not-is-cnlive {
  22 + height: 0;
  23 + &.is-open-app {
  24 + height: 124px;
  25 + }
  26 + }
  27 + &.not-is-cnlive {
  28 + &.not-is-wechat {
  29 + height: 44px;
  30 + }
  31 + }
  32 + }
  33 +}
0 \ No newline at end of file 34 \ No newline at end of file
src/pages/addressList/addressList.vue 0 → 100755
  View file @4814f90
  1 +<template>
  2 + <div class="address-list-page">
  3 +
  4 + <!-- 导航栏 -->
  5 + <!-- <div class="nav"
  6 + :style="{'paddingTop': top.value + 'px'}"> -->
  7 +
  8 + <!-- navBar -->
  9 + <!-- <nav-bar v-if="!this.isWeChat.value"
  10 + @back="back"
  11 + :navs="navs">
  12 + </nav-bar> -->
  13 + <!-- </div> -->
  14 +
  15 + <!-- <div class="pl"
  16 + :class="{'is-cnlive': isCNLive2.value, 'not-is-wechat': !isWeChat.value, 'not-is-cnlive': !isCNLive2.value, 'is-open-app': isOpenApp.value}"
  17 + :style="{'paddingTop': top.value + 'px'}"></div> -->
  18 +
  19 + <!-- 收货地址列表 -->
  20 + <address-list @doSelect="doSelect"
  21 + @doEdit="doEdit"
  22 + @doDelete="doDelete"
  23 + @setDefaultContact="setDefaultContact"
  24 + :addresss="addresss">
  25 + </address-list>
  26 +
  27 + <!-- 添加地址按钮 -->
  28 + <address-create-bar v-if="!query.mode || query.mode.toLowerCase() != 'select'"
  29 + @doCreate="doCreate"></address-create-bar>
  30 + </div>
  31 +</template>
  32 +
  33 +<script>
  34 +
  35 +// 引入组件
  36 +import navBar from '@/components/navBar/navBar';
  37 +import addressList from "@/components/addressList/addressList.vue";
  38 +import addressCreateBar from "@/components/addressCreateBar/addressCreateBar.vue";
  39 +import Vue from "vue";
  40 +import { Toast, Dialog } from 'vant';
  41 +Vue.use(Toast);
  42 +export default {
  43 + name: 'addressListPage',
  44 + data () {
  45 + return {
  46 + title: "",
  47 + query: {},
  48 + navs: null, // navBar配置参数
  49 + showToasting: false, // 显示操作结果
  50 + addresss: null, // 地址列表数据
  51 + creates: { // 创建按钮对象
  52 + create: {
  53 + func: this.doCreate
  54 + }
  55 + }
  56 + }
  57 + },
  58 + components: {
  59 + navBar,
  60 + addressList,
  61 + addressCreateBar
  62 + },
  63 + created () {
  64 + // 设置标题
  65 + this.$set(this, 'title', '收货地址');
  66 +
  67 + // 设置地址栏请求参数
  68 + this.$set(this, "query", this.$route.query);
  69 +
  70 + this.$set(this, "navs", {
  71 + back: {
  72 + img: "/static/img/icon_back.png"
  73 + },
  74 + title: this.title
  75 + });
  76 +
  77 + // #ifdef H5 || APP-PLUS
  78 +
  79 + // 更新页面title
  80 + this.$emit("updateHead");
  81 +
  82 + // #endif
  83 +
  84 + // 获取地址列表
  85 + this.getMyAddress();
  86 +
  87 + // 获取地址操作结果，如果有，输出结果
  88 + const value = window.localStorage.getItem('addressOption');
  89 +
  90 + if (value) {
  91 +
  92 + // 输出地址操作结果
  93 + Toast(value);
  94 +
  95 + // showToasting
  96 + this.$set(this, 'showToasting', true);
  97 +
  98 + // 删除地址操作结果
  99 + window.localStorage.removeItem('addressOption');
  100 + }
  101 + },
  102 + mounted () {
  103 +
  104 +
  105 + },
  106 + // #endif
  107 + methods: {
  108 +
  109 + /**
  110 + * 获取地址列表
  111 + */
  112 + getMyAddress () {
  113 +
  114 + // 必要参数
  115 + if (this.getStore("uid")) {
  116 +
  117 + // 显示loading
  118 + Toast.loading({
  119 + duration: 0, // 持续展示 toast
  120 + message: '加载中...',
  121 + forbidClick: true,
  122 + loadingType: 'spinner',
  123 + });
  124 +
  125 + // 请求接口
  126 + this.http("/Api/" + (this.getApiVersion().index) + "/myAddress", {
  127 + uid: this.getStore("uid"),
  128 + }, this.getMyAddressCallback, {
  129 + method: "POST"
  130 + });
  131 + }
  132 + },
  133 +
  134 + /**
  135 + * 获取地址列表回调
  136 + * @param {Object} res [服务器返回数据]
  137 + * @param {Object} res [扩展参数]
  138 + */
  139 + getMyAddressCallback (res, ext) {
  140 + // 返回处理
  141 + if (res.code == 200) {
  142 + Toast.clear();
  143 + // 解构数据
  144 + let datas = res.data;
  145 + // 添加加星电话号码
  146 + for (let i = 0; i < datas.length; i++) {
  147 + this.$set(datas[i], "phoneS", this.formatPhoneNumber(datas[i].phone, 3, 4));
  148 + }
  149 +
  150 + // 设置地址列表对象
  151 + this.addresss = {};
  152 + this.addresss.list = datas;
  153 + this.addresss.options = {
  154 + select: {},
  155 + edit: {},
  156 + delete: {},
  157 + defaultContact: {}
  158 + };
  159 + console.log(this.addresss);
  160 + /**
  161 + * 列表功能模式配置
  162 + * mode:
  163 + * select: 仅可选择地址，不能做其它操作
  164 + * select_edit: 选择地址，可编辑操作
  165 + */
  166 +
  167 + // 根据参数判断是否要隐藏部分功能
  168 + if (this.query.mode) {
  169 +
  170 + // 判断来源页面
  171 + switch (this.query.mode) {
  172 + case 'select':
  173 +
  174 + // 设置地址簿显示隐藏功能按钮
  175 + this.$set(this.addresss.options.defaultContact, 'hide', true); // 隐藏“设为默认”按钮
  176 + this.$set(this.addresss.options.delete, 'hide', true); // 隐藏“删除”按钮
  177 + this.$set(this.addresss.options.edit, 'hide', true); // 隐藏“编辑”按钮
  178 + break;
  179 + }
  180 + }
  181 +
  182 + // 没有提示内容
  183 + // if (!Toasting) {
  184 +
  185 + // // 隐藏loading
  186 + // uni.hideLoading();
  187 + // } else {
  188 +
  189 + // // showToasting
  190 + // this.$set(this, 'showToasting', false);
  191 + // }
  192 + } else if (res.code == 400) {
  193 +
  194 + // 清空现有地址列表数据
  195 + this.$set(this, 'addresss', null);
  196 +
  197 + // 获取地址列表出错
  198 + Toast(res.message);
  199 + } else {
  200 +
  201 + // 获取地址列表出错
  202 + Toast("获取地址列表出错");
  203 + }
  204 + },
  205 +
  206 + /**
  207 + * 我的首选地址
  208 + */
  209 + getMyFirstAddress () {
  210 +
  211 + // 校验必要参数
  212 + if (this.getStore("uid")) {
  213 +
  214 + // 请求接口
  215 + this.http("/Api/" + (this.getApiVersion().index) + "/myFirstAddress", {
  216 + uid: this.getStore("uid")
  217 + }, this.getMyFirstAddressCallback, {
  218 + method: "POST"
  219 + })
  220 + }
  221 + },
  222 +
  223 + /**
  224 + * 我的首选地址回调
  225 + * @param {object} res [服务器返回数据]
  226 + * @param {object} ext [扩展参数]
  227 + */
  228 + getMyFirstAddressCallback (res, ext) {
  229 +
  230 + // 返回处理
  231 + if (res.code == 200) {
  232 +
  233 + // 解构数据
  234 + let datas = res.data;
  235 +
  236 +
  237 + if (datas.uid === this.getStore("uid")) {
  238 +
  239 + // 同步当前选中的地址信息
  240 + window.localStorage.setItem('currentAddress', datas);
  241 + }
  242 + }
  243 + },
  244 +
  245 + /**
  246 + * 跳转添加收货地址页面
  247 + */
  248 + doCreate () {
  249 + // 跳转添加收货地址页面
  250 + this.$router.push({
  251 + path: "addressCreate"
  252 + })
  253 + },
  254 +
  255 + /**
  256 + * 选择地址
  257 + * @param {Object} item [地址对象]
  258 + */
  259 + doSelect (item) {
  260 +
  261 + // 判断来源页面
  262 + switch (this.query.mode) {
  263 + case 'select': // 选择状态，只可选择地址，不能编辑
  264 + case "select_edit": // 选择状态，可选择地址，可以编辑
  265 +
  266 + // 验证工具类是否存在
  267 + // 设置选择的地址到Storage（当前选择的地址）
  268 + window.localStorage.setItem('currentAddress', item);
  269 +
  270 + // 后退
  271 + this.back();
  272 + break;
  273 + default:
  274 +
  275 + // 编辑地址
  276 + this.doEdit(item);
  277 + }
  278 + },
  279 +
  280 + /**
  281 + * 编辑地址
  282 + * @param {Object} item [地址对象]
  283 + */
  284 + doEdit (item) {
  285 + // 跳转编辑收货地址页面
  286 + this.$router.push({
  287 + path: "addressEdit",
  288 + query: {
  289 + id: item.id
  290 + }
  291 + })
  292 + },
  293 +
  294 + /**
  295 + * 删除地址操作
  296 + * @param {Object} item [地址信息对象]
  297 + */
  298 + doDelete (item) {
  299 + Dialog.alert({
  300 + title: '标题',
  301 + message: '确定删除收件人？',
  302 + }).then((res) => {
  303 + // 用户点击确定
  304 + if (res) {
  305 +
  306 + // 执行删除操作，校验必选参数
  307 + if (item.uid && item.id) {
  308 +
  309 + // 显示loading
  310 + Toast.loading({
  311 + duration: 0, // 持续展示 toast
  312 + message: '加载中...',
  313 + forbidClick: true,
  314 + loadingType: 'spinner',
  315 + });
  316 +
  317 + // 请求接口
  318 + this.http("/Api/" + (this.getApiVersion().index) + "/delAddress", {
  319 + uid: item.uid,
  320 + id: item.id
  321 + }, this.doDeleteCallback, {
  322 + method: "POST",
  323 + uid: item.uid,
  324 + id: item.id
  325 + })
  326 + } else {
  327 +
  328 + // 参数错误
  329 + Toast("删除收件人参数错误");
  330 + }
  331 + }
  332 + });
  333 + },
  334 +
  335 + /**
  336 + * 删除地址操作回调
  337 + * @param {Object} res [服务器返回数据]
  338 + * @param {Object} res [扩展参数]
  339 + */
  340 + doDeleteCallback (res, ext) {
  341 +
  342 + // 返回处理
  343 + if (res.code == 200) {
  344 +
  345 + /* 判断如果被删除地址是当前设置地址处理 开始 */
  346 +
  347 + let tempCurrentAddress = window.localStorage.getItem('currentAddress');
  348 +
  349 + if (tempCurrentAddress && tempCurrentAddress.id === ext.id) {
  350 +
  351 + // 删除刷新Storage
  352 + window.localStorage.removeItem('currentAddress');
  353 +
  354 + // 设置首选地址
  355 + this.getMyFirstAddress();
  356 + }
  357 +
  358 + /* 判断如果被删除地址是当前设置地址处理 结束 */
  359 +
  360 + // 获取地址列表
  361 + this.getMyAddress();
  362 +
  363 + // 删除成功提醒
  364 + Toast('删除收货地址成功');
  365 +
  366 + // showToasting
  367 + this.$set(this, 'showToasting', true);
  368 + } else if (res.statusCode === 200 && res.data.code == 400) {
  369 +
  370 + // 删除收件人失败
  371 + Toast(res.message);
  372 + } else {
  373 +
  374 + // 删除收件人失败
  375 + Toast("删除收件人失败");
  376 + }
  377 + },
  378 +
  379 + /**
  380 + * 设置默认联系人（实时调用）
  381 + * @param {Object} item [联系人对象]
  382 + */
  383 + setDefaultContact (item) {
  384 +
  385 + // 判断是否可设置为默认联系人，如果已经是默认联系人，不能取消
  386 + if (item.state == 2) {
  387 +
  388 + // 已是默认联系人
  389 + Toast("已是默认联系人，无需设置。");
  390 + } else {
  391 +
  392 + // 显示loading
  393 + Toast.loading({
  394 + duration: 0, // 持续展示 toast
  395 + message: '加载中...',
  396 + forbidClick: true,
  397 + loadingType: 'spinner',
  398 + });
  399 +
  400 + // 请求接口
  401 + this.http("/Api/" + (this.getApiVersion().index) + "/editAddress", {
  402 + uid: item.uid,
  403 + id: item.id,
  404 + state: "2"
  405 + }, this.setDefaultContactCallback, {
  406 + method: "POST",
  407 + item
  408 + })
  409 + }
  410 + },
  411 +
  412 + /**
  413 + * 编辑地址操作回调
  414 + * @param {Object} res [服务器返回数据]
  415 + * @param {Object} res [扩展参数]
  416 + */
  417 + setDefaultContactCallback (res, ext) {
  418 +
  419 + // 返回处理
  420 + if (res.code == 200) {
  421 +
  422 + // 获取地址列表
  423 + this.getMyAddress();
  424 +
  425 + // 输出地址操作结果
  426 + Toast('设置默认地址成功');
  427 +
  428 + // showToasting
  429 + this.$set(this, 'showToasting', true);
  430 + } else if (res.statusCode === 200 && res.data.code == 400) {
  431 +
  432 + // 设置默认联系人出错
  433 + Toast(res.message);
  434 + } else {
  435 +
  436 + // 设置默认联系人出错
  437 + Toast("设置默认联系人出错");
  438 + }
  439 + },
  440 +
  441 + /**
  442 + * 返回
  443 + */
  444 + back () {
  445 + // 后退
  446 + window.history.go(-1);
  447 + },
  448 + /**
  449 + * 设置start -> end位置内容为 “ * ” 号代替
  450 + * @param {Object} value
  451 + * @param {Object} start
  452 + * @param {Object} end
  453 + */
  454 + formatPhoneNumber (value, start, end) {
  455 +
  456 + // 返回值
  457 + let result = Array();
  458 +
  459 + // 判断号码长度，确定处理方式
  460 + if (value.length <= start + end) {
  461 + return value;
  462 + }
  463 +
  464 + for (let i = 0; i < value.length; i++) {
  465 + if (i >= start && i < value.length - end) {
  466 + result.push("*");
  467 + } else {
  468 + result.push(value[i].toString());
  469 + }
  470 + }
  471 +
  472 + return result.join("");
  473 + },
  474 + },
  475 + //对象内部的属性监听，也叫深度监听
  476 + head: {
  477 + title () {
  478 + return {
  479 + inner: this.title
  480 + }
  481 + }
  482 + },
  483 + watch: {
  484 + // 设置页面标题
  485 + title (newVal) {
  486 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  487 + this.$iFrame.insertIFrame(newVal);
  488 + } else {
  489 + this.$emit("updateHead");
  490 + }
  491 + }
  492 + },
  493 +}
  494 +</script>
  495 +
  496 +<style rel="stylesheet/less" lang="less">
  497 +@import './addressList';
  498 +</style>
0 \ No newline at end of file 499 \ No newline at end of file
src/router/index.js
  View file @4814f90
@@ -378,7 +378,45 @@ const router = new Router({ @@ -378,7 +378,45 @@ const router = new Router({
378 meta: { 378 meta: {
379 requireAuth: false 379 requireAuth: false
380 } 380 }
  381 + },
  382 + /* H5地址开始 */
  383 + {
  384 + // 创建地址
  385 + path: "/addressCreate",
  386 + name: "addressCreate",
  387 + component: resolve => {
  388 + require([
  389 + "@/pages/addressCreate/addressCreate"
  390 + ], resolve);
  391 + },
  392 + meta: {
  393 + requireAuth: false
  394 + }
  395 + },
  396 + {
  397 + // 编辑地址
  398 + path: "/addressEdit",
  399 + name: "addressEdit",
  400 + component: resolve => {
  401 + require(["@/pages/addressEdit/addressEdit"], resolve);
  402 + },
  403 + meta: {
  404 + requireAuth: false
  405 + }
  406 + },
  407 + // 添加地址
  408 + {
  409 + // 编辑地址
  410 + path: "/addressList",
  411 + name: "addressList",
  412 + component: resolve => {
  413 + require(["@/pages/addressList/addressList"], resolve);
  414 + },
  415 + meta: {
  416 + requireAuth: false
  417 + }
381 } 418 }
  419 + /* H5地址结束 */
382 ] 420 ]
383 }, 421 },
384 { 422 {
static/img/icon_check.png 0 → 100755
View file @4814f90

1.01 KB
static/img/icon_check_active.png 0 → 100755
View file @4814f90

997 Bytes
static/img/icon_no_address.png 0 → 100644
View file @4814f90

8.12 KB