tutuxiang-eCommerce/src/components/SpecificationsContent.vue

<template>
    <div class='box weui-animate-fade-in' v-if="visible" @click="close()">
        <div class="content weui-animate-slide-up" @click.stop=''>
            <img class="image" v-if="productInfo.image" :src="productInfo.image+'?x-oss-process=image/resize,m_fill,h_120,w_120'" background-size="cover" alt="">
            <img class="image" v-else src="/static/images/icon_sirendingzhi.png" background-size="cover" alt="">
            <div class="price">
                {{totalMoney}}
            </div>

            <div class="chosse">
                <div class="title">选择支付方式</div>

                <div class="lableList">
                    <div class="lable" :class="{select:chooseType=='all'}" @click="changeType('all')">支付全价</div>
                    <div class="lable" v-if="productInfo.downPayment" :class="{select:chooseType=='down'}" @click="changeType('down')">支付定金</div>
                </div>
            </div>

            <div class="num">
                <div class="title">
                    购买数量
                </div>
                <div class="numVal">
                    <img v-if="num>1" @click="subNum" src="/static/images/icon_jianqu.png" alt="">
                    <img v-else src="/static/images/icon_jianqu_dis.png" alt="">
                    <input type="number" v-model="num" confirm-type='done' @input="checkNum" />
                    <img v-if="num<100" @click="addNum" src="/static/images/icon_zengjia.png" alt="">
                    <img v-else src="/static/images/icon_zengjia_dis.png" alt="">
                </div>
            </div>

            <button class="sureBtn" @click="close('sure')">
                确定
            </button>

            <img src="/static/images/icon_tanchuangclose_02.png" @click="close" alt="" class="close">
        </div>
    </div>
</template>
<script>
export default {
    name: 'SpecificationsContent',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        productInfo: {
            type: Object,
            default: () => {
                return {};
            },
        },
        totalMoney: {
            type: Number,
            default: 0,
        },
        chooseType: {
            type: String,
            default: 'all',
        },
        chooseNum: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {
            num: 1,
            preInfo: {
                chooseNum: 1,
                chooseType: 'all',
            },
        };
    },
    watch: {
        num() {
            this.$emit('changeNum', this.num);
        },
        visible() {
            this.num = this.chooseNum;
            this.preInfo.chooseNum = this.chooseNum;
            this.preInfo.chooseType = this.chooseType;
        },
    },
    mounted() {},
    methods: {
        addNum() {
            this.num = Number(this.num) + 1;
        },
        subNum() {
            this.num = Number(this.num) - 1;
        },
        checkNum() {
            this.num = Number(this.num);
        },
        close(type) {
            if (!type) {
                this.$emit('changeNum', this.preInfo.chooseNum);
                this.$emit('changeType', this.preInfo.chooseType);
            }
            else{
                this.$emit('changeChoose')
            }
            this.$emit('close');
        },
        changeType(type) {
            this.$emit('changeType', type);
        },
    },
    computed: {},
};
</script>
<style lang='less' scoped>
.box {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 200;
}
.content {
    bottom: 0;
    left: 0;
    z-index: 201;
    position: fixed;
    width: 100%;
    height: 320px;
    background: rgba(255, 255, 255, 1);
    border-radius: 8px 8px 0px 0px;
    box-sizing: border-box;
    padding: 40px 20px 8px;

    .image {
        width: 120px;
        height: 120px;
        border-radius: 6px;
        position: absolute;
        left: 20px;
        top: -40px;
    }

    .price {
        padding-left: 136px;
        font-size: 22px;
        font-weight: bold;
        color: rgba(255, 59, 48, 1);
        line-height: 30px;

        &::before {
            content: '¥';
            font-size: 16px;
        }
    }

    .close {
        position: absolute;
        right: 10px;
        top: 10px;
        width: 26px;
        height: 26px;
    }

    .chosse {
        margin-top: 30px;
        .title {
            font-size: 14px;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            line-height: 20px;
        }

        .lableList {
            display: flex;
            align-items: center;
            margin-top: 15px;

            .lable {
                font-size: 14px;
                color: rgba(51, 51, 51, 1);
                line-height: 32px;
                text-align: center;
                background: rgba(242, 244, 245, 1);
                width: 96px;
                height: 32px;
                border-radius: 16px;
                margin-right: 20px;

                &.select {
                    background: rgba(0, 197, 242, 1);
                    color: #ffffff;
                }
            }
        }
    }

    .num {
        display: flex;
        justify-content: space-between;
        align-self: stretch;
        align-items: center;
        margin-top: 34px;

        .title {
            font-size: 14px;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            line-height: 20px;
        }

        .numVal {
            display: flex;
            align-items: center;

            input {
                width: 60px;
                height: 28px;
                background: rgba(242, 244, 245, 1);
                border-radius: 4px;
                font-size: 28rpx;
                font-weight: bold;
                color: rgba(0, 0, 0, 1);
                text-align: center;
                margin: 0 8rpx;
            }

            img {
                min-width: 28px;
                width: 28px;
                height: 28px;
            }
        }
    }

    .sureBtn {
        width: 100%;
        height: 40px;
        background: rgba(0, 197, 242, 1);
        border-radius: 22px;
        font-size: 15px;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        line-height: 40px;
        margin-top: 40px;
    }
}
</style>