w-front-end / select_good · Commits

Commit a3064abc4205e237807def30b2c84b035faae034

Authored by zhiyangdu
1 parent 4814f903

新增站外地址填写弹框

Inline Side-by-side
Showing 3 changed files with 365 additions and 0 deletions
src/components/addressModal/addressModal.less 0 → 100755
  View file @a3064ab
  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
  View file @a3064ab
  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
View file @a3064ab

1.55 KB