Browse Source

feat: 地址列表新增字段closeBtnIcon&backBtnIcon

yangxiaolu3 5 years ago
parent
commit
329a71613b

File diff suppressed because it is too large
+ 13 - 0
src/assets/svg/back.svg


File diff suppressed because it is too large
+ 15 - 0
src/assets/svg/close.svg


+ 23 - 3
src/packages/address/address.vue

@@ -11,13 +11,13 @@
     >
     >
       <div class="title">
       <div class="title">
         <span class="arrow" @click="switchModule">
         <span class="arrow" @click="switchModule">
-          <nut-icon v-if="showModule == 'custom' && type == 'exist'" type="self" :url="require('../../assets/svg/arrows-back.svg')"></nut-icon>
+          <nut-icon v-if="showModule == 'custom' && type == 'exist' && backBtnIcon" type="self" :url="backBtnIcon"></nut-icon>
         </span>
         </span>
 
 
         <span v-if="type == 'custom'">{{ customAddressTitle }}</span>
         <span v-if="type == 'custom'">{{ customAddressTitle }}</span>
         <span v-if="type == 'exist'">{{ existAddressTitle }}</span>
         <span v-if="type == 'exist'">{{ existAddressTitle }}</span>
 
 
-        <span @click="handClose('hand')"><nut-icon type="circle-cross" size="18px"></nut-icon></span>
+        <span @click="handClose('hand')"><nut-icon v-if="closeBtnIcon" size="18px" type="self" :url="closeBtnIcon"></nut-icon></span>
       </div>
       </div>
 
 
       <!-- 请选择 -->
       <!-- 请选择 -->
@@ -136,6 +136,16 @@ export default {
       // 地址选择列表前 - 选中的图标
       // 地址选择列表前 - 选中的图标
       type: String,
       type: String,
       default: require('../../assets/svg/tick-red.svg')
       default: require('../../assets/svg/tick-red.svg')
+    },
+    closeBtnIcon:{
+      // 关闭弹框按钮 icon
+      type: String,
+      default: require('../../assets/svg/circle-cross.svg')
+    },
+    backBtnIcon:{
+      // 选择其他地址左上角返回 icon
+      type: String,
+      default: require('../../assets/svg/arrows-back.svg')
     }
     }
   },
   },
   data() {
   data() {
@@ -305,6 +315,9 @@ export default {
     },
     },
     // 手动关闭 点击叉号,或者蒙层
     // 手动关闭 点击叉号,或者蒙层
     handClose(type = 'self') {
     handClose(type = 'self') {
+
+      if(!this.closeBtnIcon) return
+
       if (type == 'hand') {
       if (type == 'hand') {
         this.closeWay = 'hand';
         this.closeWay = 'hand';
       } else {
       } else {
@@ -327,7 +340,14 @@ export default {
     },
     },
     // 选择其他地址
     // 选择其他地址
     switchModule() {
     switchModule() {
-      this.showModule = this.showModule == 'exist' ? 'custom' : 'exist';
+      
+      if(this.showModule == 'exist'){
+        this.showModule = 'custom'
+      }else{
+        if(!this.backBtnIcon) return
+        this.showModule = 'exist'
+      }
+
       this.initAddress();
       this.initAddress();
 
 
       this.$emit('switchModule', { type: this.showModule });
       this.$emit('switchModule', { type: this.showModule });

+ 5 - 0
src/packages/address/demo.vue

@@ -55,6 +55,7 @@
       @selected="selected3"
       @selected="selected3"
       :defaultIcon="defaultIcon"
       :defaultIcon="defaultIcon"
       :selectedIcon="selectedIcon"
       :selectedIcon="selectedIcon"
+      :closeBtnIcon="closeBtnIcon"
     ></nut-address>
     ></nut-address>
 
 
     <nut-address
     <nut-address
@@ -65,6 +66,7 @@
       :city="city"
       :city="city"
       :country="country"
       :country="country"
       :town="town"
       :town="town"
+      :backBtnIcon="backBtnIcon"
       @onChange="onChange4"
       @onChange="onChange4"
       @close="close4"
       @close="close4"
       @selected="selected4"
       @selected="selected4"
@@ -104,6 +106,9 @@ export default {
       selectedIcon: require('../../assets/svg/checked.svg'),
       selectedIcon: require('../../assets/svg/checked.svg'),
       defaultIcon: require('../../assets/svg/unchecked.svg'),
       defaultIcon: require('../../assets/svg/unchecked.svg'),
 
 
+      closeBtnIcon: require('../../assets/svg/close.svg'),
+      backBtnIcon: require('../../assets/svg/back.svg'),
+
       showPopupOther: false,
       showPopupOther: false,
       existAddress: [
       existAddress: [
         { id: 1, addressDetail: 'th ', cityName: '石景山区', countyName: '城区', provinceName: '北京', selectedAddress: true, townName: '' },
         { id: 1, addressDetail: 'th ', cityName: '石景山区', countyName: '城区', provinceName: '北京', selectedAddress: true, townName: '' },

+ 7 - 1
src/packages/address/doc.md

@@ -133,7 +133,8 @@ export default {
   :isShowCustomAddress="false" 
   :isShowCustomAddress="false" 
   @selected="selected3" 
   @selected="selected3" 
   :defaultIcon="defaultIcon" 
   :defaultIcon="defaultIcon" 
-  :selectedIcon='selectedIcon'>
+  :selectedIcon='selectedIcon'
+  :closeBtnIcon="closeBtnIcon">
 </nut-address>
 </nut-address>
 
 
 ```
 ```
@@ -146,6 +147,7 @@ export default {
         showPopupCustomImg:false,
         showPopupCustomImg:false,
         selectedIcon:require('../../assets/svg/checked.svg'),
         selectedIcon:require('../../assets/svg/checked.svg'),
         defaultIcon:require('../../assets/svg/unchecked.svg'),
         defaultIcon:require('../../assets/svg/unchecked.svg'),
+        closeBtnIcon: require('../../assets/svg/close.svg'),
         existAddress:[
         existAddress:[
           {"id":1,"addressDetail":"th ","cityName":"石景山区","countyName":"城区","provinceName":"北京","selectedAddress":true,"townName":""},
           {"id":1,"addressDetail":"th ","cityName":"石景山区","countyName":"城区","provinceName":"北京","selectedAddress":true,"townName":""},
           {"id":2,"addressDetail":"12_ ","cityName":"电饭锅","countyName":"扶绥县","provinceName":"北京","selectedAddress":false,"townName":""},
           {"id":2,"addressDetail":"12_ ","cityName":"电饭锅","countyName":"扶绥县","provinceName":"北京","selectedAddress":false,"townName":""},
@@ -200,6 +202,7 @@ export default {
     :city="city" 
     :city="city" 
     :country="country" 
     :country="country" 
     :town="town" 
     :town="town" 
+    :backBtnIcon="backBtnIcon"
     customAndExistTitle="选择其他地址"
     customAndExistTitle="选择其他地址"
     @onChange="onChange4" 
     @onChange="onChange4" 
     @close="close4" 
     @close="close4" 
@@ -225,6 +228,7 @@ export default {
       city:[{"id":7,"name":"朝阳区"},{"id":8,"name":"崇文区"},{"id":9,"name":"昌平区"},{"id":6,"name":"石景山区"}],// 市
       city:[{"id":7,"name":"朝阳区"},{"id":8,"name":"崇文区"},{"id":9,"name":"昌平区"},{"id":6,"name":"石景山区"}],// 市
       country:[{"id":3,"name":"八里庄街道"},{"id":9,"name":"北苑"},{"id":4,"name":"常营乡"}],// 县
       country:[{"id":3,"name":"八里庄街道"},{"id":9,"name":"北苑"},{"id":4,"name":"常营乡"}],// 县
       town:[], // 镇 必传值:name
       town:[], // 镇 必传值:name
+      backBtnIcon: require('../../assets/svg/back.svg'),
     };
     };
   },
   },
   methods: {
   methods: {
@@ -274,6 +278,8 @@ export default {
 | existAddress | 已存在地址列表,每个地址对象中,必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress(字段解释见下) | Array | []
 | existAddress | 已存在地址列表,每个地址对象中,必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress(字段解释见下) | Array | []
 | defaultIcon | 已有地址列表默认图标,type=‘exist’ 时生效 | string | ''
 | defaultIcon | 已有地址列表默认图标,type=‘exist’ 时生效 | string | ''
 | selectedIcon | 已有地址列表选中图标,type=‘exist’ 时生效 | string | ''
 | selectedIcon | 已有地址列表选中图标,type=‘exist’ 时生效 | string | ''
+| closeBtnIcon | 自定义关闭弹框按钮图标 | string | -
+| backBtnIcon | 自定义地址与已有地址切换时,自定义返回的按钮图标 | string | -
 | isShowCustomAddress | 是否可以切换自定义地址选择,type=‘exist’ 时生效 | Boolean | true
 | isShowCustomAddress | 是否可以切换自定义地址选择,type=‘exist’ 时生效 | Boolean | true
 | customAddressTitle  | 自定义地址选择文案,type='custom' 时生效 | string | '请选择所在地区'
 | customAddressTitle  | 自定义地址选择文案,type='custom' 时生效 | string | '请选择所在地区'
 | existAddressTitle| 已有地址文案 ,type=‘exist’ 时生效| string | '配送至'
 | existAddressTitle| 已有地址文案 ,type=‘exist’ 时生效| string | '配送至'