CZKJ.XKJ.Helper/src/pages/manage/cashier/weighModal.vue

<template>
    <div class="g-spec-modal" v-if="show" :class="{ page_red: theme === 1 }">
        <div class="bg" @click="close"></div>
        <div class="main">
            <div class="head">
                <span class="tit">{{ good.baseInfo.name }}</span>
                <span class="close" @click="close">×</span>
            </div>
            <ul class="g-list">
                <li class="g-list__item">
                    <div class="g-list__title">单价:</div>
                    <div class="g-list__value">{{ weighData.price }}元</div>
                </li>
                <li class="g-list__item">
                    <div class="g-list__title">重量:</div>
                    <div class="g-list__value">{{ weighData.weight }}g</div>
                </li>
                <li class="g-list__item">
                    <div class="g-list__title">总价:</div>
                    <div class="g-list__value">{{ weighData.amt }}g</div>
                </li>
                <!-- <li style="text-align: right;">
                    <span class="refresh" @click="getData">刷新重量</span>
                </li> -->
            </ul>

            <div class="modal-bottom">
                <div class="price">
                    ￥
                    <span class="num">{{ weighData.amt }}</span>
                </div>
                <div class="btn" @click="addCart">加入列表</div>
            </div>
        </div>
    </div>
</template>

<script>
//#ifdef APP-PLUS
var testModule = uni.requireNativePlugin("TestModule");
//#endif
export default {
    name: "GSpecModal",
    components: {},
    props: {},

    // 数据
    data() {
        return {
            show: false,
            good: {},
            callBack: "",
            weighData: {
                price: "0",
                weight: "0",
                amt: "0",
            },
        };
    },

    // 函数
    methods: {
        // 打开
        open(good, callBack) {
            const self = this;
            self.show = true;
            self.good = good;
            self.callBack = callBack;
            this.getData();
        },

        // 关闭
        close() {
            const self = this;

            self.show = false;
        },

        // 加入购物车
        addCart() {
            const self = this;

            if (this.weighData.weight && this.weighData.price) {
                self.fn.showToast("没有称重数据");
            } else {
                // this.callBack(
                //     {
                //         ...this.good.baseInfo,
                //         _sku: this.cartSku,
                //         name:
                //             this.good.baseInfo.name +
                //             "(" +
                //             this.cartSku.key +
                //             ")",
                //         select_num: 1,
                //     },
                //     "add"
                // );
                // for (let item of self.good.skuInfo.skus) {
                //     if (item.skuId === this.cartSku.skuId) {
                //         item.select_num = 1;
                //         this.cartSku = item;
                //     }
                // }
                this.$forceUpdate();
            }
        },

        getData() {
            var ret = testModule.open({
                name: "unimp",
                age: 1,
            });
            setInterval(() => {
                this.getWeight();
                this.getPrice();
                this.getAmt();
            }, 300);
        },

        getWeight() {
            var ret = testModule.getWeight({
                name: "unimp",
                age: 1,
            });
            if (!ret) {
                this.fn.showToast("获取weight错误");
            }
            this.weighData.weight = ret.code;
        },
        getPrice() {
            var ret = testModule.getPrice({
                name: "unimp",
                age: 1,
            });
            if (!ret) {
                this.fn.showToast("获取price错误");
            }
            this.weighData.price = ret.code;
        },
        getAmt() {
            var ret = testModule.getAmt({
                name: "unimp",
                age: 1,
            });
            if (!ret) {
                this.fn.showToast("获取Amt错误");
            }
            this.weighData.amt = ret.code;
        },
    },

    // 数据计算
    computed: {
        // 判断主题  1:红色  2：绿色
        theme() {
            return this.$store.state.common.theme;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.g-spec-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    .bg {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .main {
        background-color: #fff;
        border-radius: px(30);
        position: absolute;
        top: 50%;
        left: px(100);
        right: px(100);
        transform: translate(0, -50%);
        max-height: 90vh;
        overflow: auto;
        z-index: 100;
        padding: px(40) 0;
    }
    .head {
        font-size: px(44);
        position: relative;
        padding-bottom: px(30);
        border-bottom: 1px solid #f1f1f1;
        line-height: px(88);
        padding: 0 px(40);
        .close {
            font-size: px(80);
            color: #666;
            position: absolute;
            right: px(40);
            top: 0%;
            z-index: 10;
        }
        .tit {
            margin-right: px(80);
            display: block;
            @include omit(100%);
            width: auto;
        }
    }
}

.g-list {
    padding: 0 px(40) px(50);
    border-bottom: solid px(3) #fafafa;

    &__item {
        padding-top: px(40);
        display: flex;
        align-items: center;
    }

    &__title {
        font-size: px(44);
        color: #333;
        margin-right: px(30);
        color: #999;
    }
}
.refresh {
    margin-top: px(30);

    display: inline-block;
    border: 1px solid #d9d9d9;
    color: #333;
    width: px(280);
    height: px(80);
    font-size: px(34);
    text-align: center;
    line-height: px(80);
    border-radius: px(40);
}

.modal-bottom {
    display: flex;
    margin-top: px(50);
    justify-content: space-between;
    align-items: center;
    padding: 0 px(40);
    .price {
        color: #fe6661;
        font-size: px(40);
        .num {
            font-size: px(50);
        }
    }
    .btn {
        display: block;
        background-color: #27a34f;
        color: #fff;
        width: px(280);
        height: px(80);
        font-size: px(34);
        text-align: center;
        line-height: px(80);
        border-radius: px(40);
    }
}

.btns {
    display: flex;
    align-items: center;
    .cart-num {
        // padding: px(30) px(10) px(10) px(30);
        padding: 0 px(30);
        box-sizing: border-box;
        min-width: px(60);
    }
    &__add {
        background-color: #27a34f;
        width: px(60);
        height: px(60);
        border-radius: 50%;
        // box-shadow: px(1) px(2) px(6) #27a34f;
        position: relative;
        &::after,
        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            width: 60%;
            height: px(6);
            border-radius: px(6);
            background: #fff;
        }
        &::after {
            transform: translate(-50%, -50%);
        }
        &::before {
            transform-origin: center;
            transform: translate(-50%, -50%) rotate(90deg);
        }
    }

    &__remove {
        background-color: #fff;
        width: px(60);
        height: px(60);
        border-radius: 50%;
        border: 1px solid #999;
        position: relative;
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            width: 60%;
            height: px(6);
            border-radius: px(6);
            background: #999;
            transform: translate(-50%, -50%);
        }
    }
}

.page_red {
    .modal-bottom .btn {
        background-color: #fe6661;
    }
    .btns__add {
        background-color: #fe6661;
    }
}
</style>