配送选择

src/components/address-select/index.vue

@@ -0,0 +1,214 @@
+<template>
+    <div class="c-share" v-if="show" @click="close">
+        <div class="c-share__content" @click.stop>
+  
+            <div class="c-share__division">地址选择</div>
+            <ul class="c-list">
+                <li class="c-list__item" @click="tabClick('import')">
+                    <div class="c-list__content">
+                        <img
+                            class="c-list__icon"
+                            src="/static/share/icon_2.jpg"
+                            alt
+                        />
+                        <div class="c-list__text">从微信导入</div>
+                    </div>
+                </li>
+                <li class="c-list__item" @click="tabClick('add')">
+                    <div class="c-list__content">
+                        <img
+                            class="c-list__icon"
+                            src="/static/share/icon_3.jpg"
+                            alt
+                        />
+                        <div class="c-list__text">添加地址</div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "AddressSelect",
+    props: {
+        	hideMany: {
+				type: Boolean,
+				default: false
+			},
+    },
+    // 数据
+    data() {
+        return {
+            show: false,
+            price: "",
+            callback: "",
+
+            distribution: false,
+            vip: false,
+        };
+    },
+
+    // 函数
+    methods: {
+        // 打开
+        open(callback) {
+            const self = this;
+
+            self.show = true;
+            // self.price = price
+            // self.distribution = distribution
+            // self.vip = vip
+            self.callback = callback;
+        },
+
+        // 关闭
+        close() {
+            const self = this;
+
+            self.show = false;
+
+            if (self.fn.getType(self.callback) === "function") {
+                self.callback();
+            }
+        },
+
+
+        // 点击
+        tabClick(type){
+            self.$emit("share", type);
+        }
+    },
+
+    // 数据计算
+    computed: {},
+
+    // 数据监听
+    watch: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.c-share {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 995;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+
+    &__content {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 100;
+        width: 100%;
+        background-color: #fff;
+        border-radius: px(16) px(16) 0 0;
+    }
+
+    &__box {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    &__top {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: px(230);
+        height: px(230);
+        margin-top: px(-115);
+        border-radius: 50%;
+        background-color: #ef4a37;
+    }
+
+    &__icon {
+        width: px(137);
+        height: px(134);
+    }
+    &__vip {
+        margin-top: px(80);
+        color: #f8662a;
+    }
+    &__title {
+        font-size: px(42);
+        margin-top: px(30);
+        color: #333;
+        &.mt {
+            margin-top: px(80);
+        }
+    }
+
+    &__price {
+        margin-top: px(70);
+    }
+
+    &__division {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: px(60);
+        font-size: px(34);
+        color: #999;
+
+        &:before,
+        &:after {
+            content: "";
+            display: block;
+            width: px(460);
+            height: px(3);
+            background-color: #e7e7e7;
+        }
+    }
+}
+
+.c-price {
+    display: flex;
+    align-items: baseline;
+
+    &__sign {
+        font-size: px(26);
+        color: #f8662a;
+    }
+
+    &__text {
+        font-size: px(54);
+        color: #f8662a;
+    }
+}
+
+.c-list {
+    display: flex;
+    justify-content: space-around;
+    height: px(345);
+    padding-top: px(70);
+
+    &__item {
+        flex: 1;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    &__icon {
+        width: px(100);
+        height: px(100);
+        margin-bottom: px(20);
+    }
+
+    &__text {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: px(32);
+        color: #999;
+    }
+}
+</style>