caimei-applets-mcare/pages/user/order/components/freight-popup.vue

<template>
    <view class="freight">
        <view class="freight-switch">
            <view class="freight-switch-title">运费</view>
            <view class="freight-switch-fee" v-if="postAgeFlag(0)"><text>包邮</text></view>
            <view class="freight-switch-fee" v-if="postAgeFlag(1)">
                <text>{{ freightText }}</text>
                <text
                    class="cell-more iconfont icon-xiangyou"
                    @click="showPopup"
                ></text>
            </view>
            <view class="freight-switch-fee" v-if="postAgeFlag(2)"><text>到付</text></view>
        </view>
        <tui-bottom-popup :radius="true" :show="popupShow">
            <view class="freight-title">运费设置</view>
            <view class="freight-content">
                <radio-group @change="radioChange" v-if="designatedFlag()">
                    <label v-for="(item, index) in radioItems" :key="index">
                        <radio
                            style="transform:scale(0.7)"
                            color="#F3B574"
                            :id="item.name"
                            :value="item.name"
                            :checked="item.checked"
                        ></radio>
                        <label :for="item.name" class="label">
                            <text>{{ item.value }}</text>
                        </label>
                    </label>
                </radio-group>
                <view class="freight-form">
                    <view class="freight-form-item" v-if="infoData.designatedFlag !== 2 && infoData.coldChain > 0">
                        <view>冷链运输费</view>
                        <view style="position: relative;">
                            ￥{{ this.infoData.coldChain.toFixed(2) }}
                            <radio
                                class="freight-pay"
                                color="#F3B574"
                                @click="coldChainChange"
                                :checked="isCheck"
                            ></radio>
                        </view>
                    </view>
                    <block v-if="newPostAge() !== 0">
                        <view class="freight-form-item" v-if="isCPay">
                            <view>其他运费</view>
                            <view>{{ '￥' + postAge().toFixed(2) }}</view>
                        </view>
                        <view class="freight-form-item" v-else>
                            <view>其他运费</view>
                            <view>到付</view>
                        </view>
                    </block>
                    <view class="freight-form-item">
                        <view>总运费</view>
                        <view style="color: #F94B4B;">
                            <view style="display: flex;" v-if="allPostage !== 0 || isCPay">
                                ￥
                                <count-up
                                    :num="allPostage.toFixed(2)"
                                    :width="16"
                                    :height="40"
                                    :fontSize="28"
                                    color="#F94B4B"
                                ></count-up>
                            </view>
                            <text v-else>
                                到付
                            </text>
                        </view>
                    </view>
                </view>
                <view class="freight-btn" @click="fetchPostAge">确定</view>
            </view>
        </tui-bottom-popup>
    </view>
</template>

<script>
import CountUp from './countUp.vue'
export default {
    props: {
        ispopupShow: {
            type: Boolean,
            default: () => false
        },
        goodsData: {
            type: Array,
            default: () => []
        },
        goodIndex: {
            type: Number
        }
    },
    components: {
        CountUp
    },
    data() {
        return {
            radioItems: [
                {
                    value: '不包邮',
                    name: '0',
                    checked: true
                },
                {
                    value: '到付',
                    name: '1'
                }
            ],
            isCPay: true,
            isCheck: false,
            infoData: {},
            freightText: '',
            popupShow: false
        }
    },
    watch: {
        goodsData: {
            handler(val) {
                this.initData(val[0])
            },
            deep: true,
            immediate: true
        }
    },
    computed: {
        // 总运费
        allPostage() {
            this.freightText =
                (this.postAge() + (this.isCheck ? this.infoData.coldChain : 0) === 0) && !this.isCPay
                    ? '到付'
                    : '￥' + (this.postAge() + (this.isCheck ? this.infoData.coldChain : 0)).toFixed(2)
            return this.postAge() + (this.infoData.isColdChina ? this.infoData.coldChain : 0)
        },
        // 合计
        allPrice() {
            return Number(this.infoData.originalPrice) + Number(!this.isCPay ? 0 : this.allPostage)
        }
    },
    mounted() {
    },
    methods: {
        // 开启弹窗
        showPopup() {
            this.popupShow = true
            this.$emit('showFreight', true)
        },
        // 是否到付
        postAgeFlag(e) {
            return JSON.parse(uni.getStorageSync('goodsData'))[this.goodIndex].postageFlag === e
        },
        // 初始运费
        postAge() {
            if (this.isCPay) return this.newPostAge()
            else return 0
        },
        // 新运费
        newPostAge() {
            return JSON.parse(uni.getStorageSync('goodsData'))[this.goodIndex].postage
        },
        // 是否运费切换
        designatedFlag(index) {
            return JSON.parse(uni.getStorageSync('goodsData'))[this.goodIndex].designatedFlag !== 1
        },
        // 按钮切换
        radioChange($event) {
            console.log('切换运费')
            this.isCPay = !this.isCPay
            this.infoData.isColdChina = this.isCheck
            this.infoData.postageFlag = this.isCPay ? 1 : 2
        },
        // 初始化运费组件
        initData(data) {
            this.infoData = JSON.parse(JSON.stringify(data))
            this.isCheck = this.infoData.isColdChina
            this.infoFreightText(data)
        },
        // 设置运费
        infoFreightText(data) {
            switch (data.postageFlag) {
                case 0:
                    this.freightText = '包邮'
                    this.infoData.postage = 0
                    this.infoData.postageFlag = data.postageFlag
                    break
                case 1:
                    this.freightText = '￥' + (this.infoData.postage + this.infoData.coldChain)
                    // this.infoData.postage = this.freightText
                    this.infoData.postageFlag = data.postageFlag
                    break
                case 2:
                    this.freightText = '到付'
                    this.infoData.postage = 0
                    this.infoData.postageFlag = data.postageFlag
                    break
            }
        },
        // 是否选择冷链费
        coldChainChange() {
            this.isCheck = !this.isCheck
            this.freightText = this.isCheck ? this.allPostage : this.infoData.postage
            this.infoData.isColdChina = this.isCheck
        },

        // 运费参数
        fetchPostAge() {
            this.$emit('changeFreight', [this.goodIndex, this.infoData, this.allPostage])
            this.popupShow = false
            this.$emit('showFreight', false)
        }
    }
}
</script>

<style lang="scss" scoped>
.freight {
    position: relative;
}
.freight-switch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    padding: 24rpx 0;
    .freight-switch-title {
        color: #333333;
        font-size: 28rpx;
        font-weight: bold;
    }
    .freight-switch-fee {
        color: #333333;
        font-size: 28rpx;
    }
}
.all-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    width: 100%;
    padding-bottom: 24rpx;
    font-size: 28rpx;
    background-color: #ffffff;
    box-sizing: border-box;
    .all-price-content {
        display: flex;
    }
    .price {
        color: #f94b4b;
    }
}
.iconfont {
    font-size: 32rpx !important;
    margin-left: 15rpx;
}
.freight-title {
    color: #333333;
    font-size: 32rpx;
    text-align: center;
    margin: 50rpx 0 80rpx 0;
}
.freight-content {
    box-sizing: border-box;
    padding: 0 50rpx;
    radio {
        margin-right: 8rpx;
    }
    .label {
        color: #666666;
        font-size: 28rpx;
        margin-right: 102rpx;
    }
    .freight-btn {
        height: 90rpx;
        background: #f3b574;
        border-radius: 45rpx 45rpx 45rpx 45rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        width: 100%;
        margin: 100rpx 0 0 0;
    }
}
.freight-form {
    margin-top: 50rpx;
    width: 100%;
    .freight-form-item {
        width: 95%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24rpx;
        color: #666666;
        font-size: 28rpx;
    }
}
.freight-pay {
    position: absolute;
    right: -60%;
    transform: scale(0.7);
}
</style>