Commit a3064abc4205e237807def30b2c84b035faae034
1 parent
4814f903
新增站外地址填写弹框
Showing
3 changed files
with
365 additions
and
0 deletions
src/components/addressModal/addressModal.less
0 → 100755
| 1 | +@charset "UTF-8"; | ||
| 2 | + | ||
| 3 | +.address-modal { | ||
| 4 | + .layer-box { | ||
| 5 | + position: fixed; | ||
| 6 | + top: 0; | ||
| 7 | + left: 0; | ||
| 8 | + z-index: 150; | ||
| 9 | + display: flex; | ||
| 10 | + flex-direction: column; | ||
| 11 | + justify-content: center; | ||
| 12 | + align-items: center; | ||
| 13 | + background-color: rgba(0, 0, 0, 0.7); | ||
| 14 | + width: 100%; | ||
| 15 | + height: 100%; | ||
| 16 | + .box { | ||
| 17 | + background-color: #FFFFFF; | ||
| 18 | + width: 560rpx; | ||
| 19 | + border-radius: 16rpx; | ||
| 20 | + .title { | ||
| 21 | + color: #333333; | ||
| 22 | + font-size: 32rpx; | ||
| 23 | + font-weight: 600; | ||
| 24 | + text-align: center; | ||
| 25 | + padding-top: 30rpx; | ||
| 26 | + } | ||
| 27 | + .message { | ||
| 28 | + background-color: #F9F9F9; | ||
| 29 | + margin: 30rpx auto 0 auto; | ||
| 30 | + color: #999999; | ||
| 31 | + font-size: 28rpx; | ||
| 32 | + font-weight: 500; | ||
| 33 | + line-height: 40rpx; | ||
| 34 | + width: 500rpx; | ||
| 35 | + border-radius: 16rpx; | ||
| 36 | + .message-item { | ||
| 37 | + margin: 0 auto; | ||
| 38 | + padding: 24rpx 0; | ||
| 39 | + width: 452rpx; | ||
| 40 | + .top { | ||
| 41 | + display: flex; | ||
| 42 | + justify-content: flex-start; | ||
| 43 | + align-items: center; | ||
| 44 | + .name { | ||
| 45 | + & + .phone { | ||
| 46 | + margin-left: 30rpx; | ||
| 47 | + } | ||
| 48 | + } | ||
| 49 | + & + .bottom { | ||
| 50 | + margin-top: 10rpx; | ||
| 51 | + } | ||
| 52 | + } | ||
| 53 | + .bottom { | ||
| 54 | + | ||
| 55 | + } | ||
| 56 | + } | ||
| 57 | + &.no-data { | ||
| 58 | + display: flex; | ||
| 59 | + justify-content: center; | ||
| 60 | + align-items: center; | ||
| 61 | + padding: 69rpx 0; | ||
| 62 | + .text { | ||
| 63 | + font-weight: 400; | ||
| 64 | + & + .text-a-link { | ||
| 65 | + margin-left: 30rpx; | ||
| 66 | + } | ||
| 67 | + } | ||
| 68 | + .text-a-link { | ||
| 69 | + color: #F5A623; | ||
| 70 | + } | ||
| 71 | + } | ||
| 72 | + } | ||
| 73 | + .bottom-slot { | ||
| 74 | + margin: 0 auto; | ||
| 75 | + width: 500rpx; | ||
| 76 | + /deep/ .address-bottom-tips { | ||
| 77 | + margin-top: 20rpx; | ||
| 78 | + color: #F5A623; | ||
| 79 | + font-size: 24rpx; | ||
| 80 | + font-weight: 400; | ||
| 81 | + text-align: justify; | ||
| 82 | + } | ||
| 83 | + } | ||
| 84 | + .buttons-box { | ||
| 85 | + margin-top: 20rpx; | ||
| 86 | + .buttons { | ||
| 87 | + display: flex; | ||
| 88 | + justify-content: space-between; | ||
| 89 | + align-items: center; | ||
| 90 | + margin: 0 auto; | ||
| 91 | + padding: 30rpx 0; | ||
| 92 | + width: 500rpx; | ||
| 93 | + border-top: 1rpx solid #E6E6E6; | ||
| 94 | + .btn { | ||
| 95 | + display: flex; | ||
| 96 | + justify-content: center; | ||
| 97 | + align-items: center; | ||
| 98 | + width: 236rpx; | ||
| 99 | + height: 78rpx; | ||
| 100 | + border-radius: 16rpx; | ||
| 101 | + &.btn-confirm { | ||
| 102 | + background: linear-gradient(180deg, #FE5B28 0%, #FF1C40 100%); | ||
| 103 | + color: #FFFFFF; | ||
| 104 | + font-size: 30rpx; | ||
| 105 | + font-weight: 600; | ||
| 106 | + &.big { | ||
| 107 | + width: 500rpx; | ||
| 108 | + } | ||
| 109 | + } | ||
| 110 | + &.btn-cancel { | ||
| 111 | + background-color: #F9F9F9; | ||
| 112 | + color: #B4B4B4; | ||
| 113 | + font-size: 30rpx; | ||
| 114 | + font-weight: 500; | ||
| 115 | + &.big { | ||
| 116 | + width: 500rpx; | ||
| 117 | + } | ||
| 118 | + } | ||
| 119 | + &.btn-yellow { | ||
| 120 | + background: linear-gradient(180deg, #F1CD3B 0%, #FE9B02 100%); | ||
| 121 | + color: #FFFFFF; | ||
| 122 | + } | ||
| 123 | + } | ||
| 124 | + } | ||
| 125 | + } | ||
| 126 | + } | ||
| 127 | + .bottomClose { | ||
| 128 | + margin-top: 99rpx; | ||
| 129 | + .close-img { | ||
| 130 | + display: block; | ||
| 131 | + width: 62rpx; | ||
| 132 | + height: 62rpx; | ||
| 133 | + } | ||
| 134 | + } | ||
| 135 | + &.douyin-url { | ||
| 136 | + background-color: rgba(0, 0, 0, 0.6); | ||
| 137 | + .box { | ||
| 138 | + background-color: #FFFFFF; | ||
| 139 | + width: 580rpx; | ||
| 140 | + border-radius: 24rpx; | ||
| 141 | + .message { | ||
| 142 | + background-color: #F9F9F9; | ||
| 143 | + color: #666666; | ||
| 144 | + font-size: 26rpx; | ||
| 145 | + width: 520rpx; | ||
| 146 | + margin: 30rpx auto 40rpx auto; | ||
| 147 | + padding: 0; | ||
| 148 | + border-radius: 16rpx; | ||
| 149 | + .message-content { | ||
| 150 | + width: 468rpx; | ||
| 151 | + margin: 0 auto; | ||
| 152 | + padding: 26rpx 0; | ||
| 153 | + text-align: left; | ||
| 154 | + } | ||
| 155 | + } | ||
| 156 | + .buttons-box { | ||
| 157 | + justify-content: space-between; | ||
| 158 | + align-items: center; | ||
| 159 | + width: 520rpx; | ||
| 160 | + margin: 0 auto 40rpx auto; | ||
| 161 | + .btn { | ||
| 162 | + display: flex; | ||
| 163 | + justify-content: center; | ||
| 164 | + align-items: center; | ||
| 165 | + border-radius:39rpx; | ||
| 166 | + & + .btn { | ||
| 167 | + margin-left: 48rpx; | ||
| 168 | + } | ||
| 169 | + &.btn-confirm { | ||
| 170 | + background:linear-gradient(270deg,rgba(207,146,117,1) 0%,rgba(238,185,143,1) 100%); | ||
| 171 | + width: 236rpx; | ||
| 172 | + height: 78rpx; | ||
| 173 | + color: #FFFFFF; | ||
| 174 | + font-size: 30rpx; | ||
| 175 | + letter-spacing: 1rpx; | ||
| 176 | + } | ||
| 177 | + &.btn-cancel { | ||
| 178 | + width: 234rpx; | ||
| 179 | + height: 76rpx; | ||
| 180 | + color: #D69B7B; | ||
| 181 | + font-size: 30rpx; | ||
| 182 | + letter-spacing: 1rpx; | ||
| 183 | + border:1rpx solid rgba(214,155,123,1); | ||
| 184 | + } | ||
| 185 | + } | ||
| 186 | + } | ||
| 187 | + } | ||
| 188 | + } | ||
| 189 | + } | ||
| 190 | +} |
src/components/addressModal/addressModal.vue
0 → 100755
| 1 | +<template> | ||
| 2 | + <div class="address-modal" | ||
| 3 | + v-if="isShow && options"> | ||
| 4 | + <div class="layer-box" | ||
| 5 | + :class="defaultOptions.classType || ''" | ||
| 6 | + @tap="hideLayer" | ||
| 7 | + @touchmove.stop.prevent> | ||
| 8 | + <div class="box" | ||
| 9 | + @tap.stop.prevent> | ||
| 10 | + | ||
| 11 | + <!-- 标题 --> | ||
| 12 | + <div class="title" | ||
| 13 | + v-if="defaultOptions.title">{{defaultOptions.title}}</div> | ||
| 14 | + | ||
| 15 | + <!-- 内容 --> | ||
| 16 | + <div class="message" | ||
| 17 | + v-if="defaultOptions.name && defaultOptions.phone && defaultOptions.address"> | ||
| 18 | + <div class="message-item"> | ||
| 19 | + <div class="top"> | ||
| 20 | + <div class="name">{{defaultOptions.name}}</div> | ||
| 21 | + <div class="phone">{{defaultOptions.phone}}</div> | ||
| 22 | + </div> | ||
| 23 | + <div class="bottom"> | ||
| 24 | + <div class="address">{{defaultOptions.address}}</div> | ||
| 25 | + </div> | ||
| 26 | + </div> | ||
| 27 | + </div> | ||
| 28 | + <div class="message no-data" | ||
| 29 | + v-else | ||
| 30 | + @tap="noData"> | ||
| 31 | + <div class="text">您未创建收货地址</div> | ||
| 32 | + <div class="text-a-link">去创建</div> | ||
| 33 | + </div> | ||
| 34 | + | ||
| 35 | + <!-- 插槽 --> | ||
| 36 | + <div class="bottom-slot"> | ||
| 37 | + <slot name="bottom"></slot> | ||
| 38 | + </div> | ||
| 39 | + | ||
| 40 | + <!-- 按钮组 --> | ||
| 41 | + <div class="buttons-box"> | ||
| 42 | + <div class="buttons"> | ||
| 43 | + <div class="btn btn-cancel" | ||
| 44 | + :class="defaultOptions.cancelButtonClass" | ||
| 45 | + v-if="defaultOptions.showCancelButton" | ||
| 46 | + @tap="cancel(defaultOptions.params || defaultOptions)">{{defaultOptions.cancelButtonText}}</div> | ||
| 47 | + <div class="btn btn-confirm" | ||
| 48 | + :class="defaultOptions.confirmButtonClass" | ||
| 49 | + v-if="defaultOptions.showConfirmButton" | ||
| 50 | + @tap="confirm(defaultOptions.params || defaultOptions)">{{defaultOptions.confirmButtonText}}</div> | ||
| 51 | + </div> | ||
| 52 | + </div> | ||
| 53 | + </div> | ||
| 54 | + <div class="bottomClose" | ||
| 55 | + v-if="defaultOptions.bottomClose" | ||
| 56 | + @tap="hideLayer"> | ||
| 57 | + <img src="/static/img/icon_layer_bottom_close.png" | ||
| 58 | + class="close-img" /> | ||
| 59 | + </div> | ||
| 60 | + </div> | ||
| 61 | + </div> | ||
| 62 | +</template> | ||
| 63 | + | ||
| 64 | +<script> | ||
| 65 | +export default { | ||
| 66 | + name: 'addressModal', | ||
| 67 | + data: function () { | ||
| 68 | + return { | ||
| 69 | + isShow: false, | ||
| 70 | + defaultOptions: null // 默认参数 | ||
| 71 | + } | ||
| 72 | + }, | ||
| 73 | + props: ["options"], | ||
| 74 | + methods: { | ||
| 75 | + | ||
| 76 | + /** | ||
| 77 | + * 显示提示用户升级层 | ||
| 78 | + */ | ||
| 79 | + showLayer () { | ||
| 80 | + | ||
| 81 | + // 设置浮层显示 | ||
| 82 | + this.$set(this, "isShow", true); | ||
| 83 | + }, | ||
| 84 | + | ||
| 85 | + /** | ||
| 86 | + * 隐藏提示用户升级层 | ||
| 87 | + */ | ||
| 88 | + hideLayer () { | ||
| 89 | + | ||
| 90 | + // 设置浮层隐藏 | ||
| 91 | + this.$set(this, "isShow", false); | ||
| 92 | + }, | ||
| 93 | + | ||
| 94 | + /** | ||
| 95 | + * 初始化showModal默认参数 | ||
| 96 | + */ | ||
| 97 | + initDefaultOptions () { | ||
| 98 | + | ||
| 99 | + // 初始化默认参数 | ||
| 100 | + this.$set(this, "defaultOptions", { | ||
| 101 | + title: '', // 标题 | ||
| 102 | + name: '', // 收件人姓名 | ||
| 103 | + phone: '', // 收件人电话 | ||
| 104 | + address: '', // 收件人地址 | ||
| 105 | + classType: '', // 整体附加样式 | ||
| 106 | + showConfirmButton: true, // 是否显示确认按钮 | ||
| 107 | + confirmButtonText: '确定', // 确认按钮文本 | ||
| 108 | + confirmButtonClass: '', // 确认按钮附加class | ||
| 109 | + confirmButtonCallback: null, // 确认按钮回调函数 | ||
| 110 | + showCancelButton: false, // 是否显示取消按钮 | ||
| 111 | + cancelButtonText: '', // 取消按钮文本 | ||
| 112 | + cancelButtonClass: '', // 取消按钮附加class | ||
| 113 | + cancelButtonCallback: null, // 取消按钮回调函数 | ||
| 114 | + noDataCallback: null, // 无地址数据时，提示“去创建”区域点击回调函数 | ||
| 115 | + bottomClose: false, // 是否显示底部关闭icon | ||
| 116 | + closeOnClickModal: true // 点击背景区域是否关闭浮层 | ||
| 117 | + }); | ||
| 118 | + }, | ||
| 119 | + | ||
| 120 | + /** | ||
| 121 | + * 点击"确定"回调 | ||
| 122 | + * @param {object} options [回调参数] | ||
| 123 | + */ | ||
| 124 | + confirm (options) { | ||
| 125 | + if (typeof this.options === "object" && typeof this.options.confirmButtonCallback === "function") { | ||
| 126 | + this.options.confirmButtonCallback(options); | ||
| 127 | + } | ||
| 128 | + }, | ||
| 129 | + | ||
| 130 | + /** | ||
| 131 | + * 点击"取消"回调 | ||
| 132 | + * @param {object} options [回调参数] | ||
| 133 | + */ | ||
| 134 | + cancel (options) { | ||
| 135 | + if (typeof this.options === "object" && typeof this.options.cancelButtonCallback === "function") { | ||
| 136 | + this.options.cancelButtonCallback(options); | ||
| 137 | + } | ||
| 138 | + }, | ||
| 139 | + | ||
| 140 | + /** | ||
| 141 | + * 点击"去创建"区域回调 | ||
| 142 | + * @param {object} options [回调参数] | ||
| 143 | + */ | ||
| 144 | + noData (options) { | ||
| 145 | + if (typeof this.options === "object" && typeof this.options.noDataCallback === "function") { | ||
| 146 | + this.options.noDataCallback(options); | ||
| 147 | + } | ||
| 148 | + } | ||
| 149 | + }, | ||
| 150 | + watch: { | ||
| 151 | + | ||
| 152 | + /** | ||
| 153 | + * 监听选项变化 | ||
| 154 | + */ | ||
| 155 | + options (newVal, oldVal) { | ||
| 156 | + | ||
| 157 | + // this.$nextTick(function() { | ||
| 158 | + if (newVal !== null && typeof newVal === "object") { | ||
| 159 | + | ||
| 160 | + // 初始化showModal默认参数 | ||
| 161 | + this.initDefaultOptions(); | ||
| 162 | + | ||
| 163 | + // 合并提示框配置选项 | ||
| 164 | + Object.assign(this.defaultOptions, newVal); | ||
| 165 | + } | ||
| 166 | + // }); | ||
| 167 | + } | ||
| 168 | + } | ||
| 169 | +} | ||
| 170 | +</script> | ||
| 171 | + | ||
| 172 | +<!-- Add "scoped" attribute to limit CSS to this component only --> | ||
| 173 | +<style rel="stylesheet/less" lang="less"> | ||
| 174 | +@import './addressModal'; | ||
| 175 | +</style> |
static/img/icon_layer_bottom_close.png
0 → 100755
1.55 KB