GuangYuYuan-app/src/points/productDetails/components/selectProduct.vue

<template>
    <view class="content">
        <image style="width: 35rpx;height: 35rpx;position: absolute;right: 40rpx;top:40rpx" @click="closeSelectProduct"
            src="@/static/points/closeIcon.png" mode=""></image>
        <view class="addressBox">
            <image style="width: 40rpx;height: 40rpx;" src="@/static/points/addressIcon.png" mode=""></image>

            <text class="name" v-if="defaultAddress">{{ defaultAddress.userName }}</text>

            <text class="address" v-if="defaultAddress">{{ defaultAddress.address + defaultAddress.atlasAdd
                }}</text>
            <view style="position: absolute;right: 0;display: flex;width: 195rpx;align-items: center;height: 33rpx;
            ">
                <text class="address" style="color: #999;" v-if='!defaultAddress'>添加收货地址</text>

                <image style="width: 35rpx;height: 35rpx;position: absolute;right: 0;top: 0;" @click="addressSelectFun"
                    src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
            </view>



        </view>
        <view class="productPrice">
            <view style="display:flex;justify-content: space-between;">
                <view style="display:flex;">
                    <view style="display: flex;align-items: center;">
                        <image v-if="selectedObj" style="width: 120rpx;height: 120rpx;"
                            :src="$globalData.publicUrl + selectedObj.image" mode="heightFix">
                        </image>
                        <image v-else style="width: 120rpx;height: 120rpx;"
                            :src="$globalData.publicUrl + params.productMainImage" mode="">
                        </image>
                    </view>
                    <view
                        style="margin-left: 24rpx;display: flex;flex-direction: column;justify-content: space-between;">
                        <view class="price" v-if="selectedObj">实付价
                            {{ params.paymentType == 1 ? selectedObj.pricePoint + '积分' :
                                params.paymentType == 2 ? '￥' + selectedObj.priceMoney + '元' :
                                    params.paymentType == 3 ? '￥' + selectedObj.priceMoney + '元' + '+' +
                                        selectedObj.pricePoint + '积分' : null }}
                        </view>
                        <view class="price" v-else>实付价
                            {{ params.paymentType == 1 ? params.pricePoint + '积分' :
                                params.paymentType == 2 ? '￥' + params.priceMoney + '元' :
                                    params.paymentType == 3 ? '￥' + params.priceMoney + '元' + '+' +
                                        params.pricePoint + '积分' : null }}
                        </view>
                        <view class="spec" v-if="selectedObj">已选:{{ selectedObj.specValueText }} </view>
                    </view>

                </view>
                <view class="deletePrice" v-if="selectedObj">{{ selectedObj.originPrice }}元</view>
            </view>
        </view>
        <!--选择规格 -->
        <view class="specClass">
            <view v-for="arr in specList">
                <view class="title">{{ arr[0] }} ({{ Array.from(arr[1]).length }})</view>
                <view style="display: flex;flex-wrap: wrap;">
                    <view class="specCombination" @click="selectedSpecFun(value, arr[0])"
                        :class="selectedObj ? selectedObj.specValueText.indexOf(value) != -1 ? 'active' : '' : ''"
                        v-for="value in Array.from(arr[1])">
                        {{ value }}
                    </view>
                </view>
            </view>
        </view>
        <!--运费 -->
        <view class="yunFeiClass">
            <view class="text">运费</view>
            <view class="price">￥{{ params.freight }}</view>

        </view>
        <!--订单备注 -->
        <view class="nodeClass">
            <view class="text">订单备注</view>
            <input type="text" maxlength="200" v-model="orderRemarks" placeholder="选填，请填写您的备注信息，限200字" />


        </view>
        <!--支付方式 -->
        <u-radio-group v-if="selectPayMeth" class="nodeClass" v-model="selectPayMeth">
            <view style="width: 100%;">
                <view style="display: flex;justify-content: space-between;width: 100%;">
                    <view style="display: flex;">
                        <image style="width: 40rpx;height: 40rpx;" src="@/static/points/weiXin.png" mode="">
                        </image>
                        <view class="text" style="color: #333;margin-left: 16rpx;">微信支付</view>
                    </view>
                    <view>
                        <u-radio activeColor="#03C1B8 " name='1' style="margin: 0;"></u-radio>
                    </view>

                </view>
                <view style="display: flex;justify-content: space-between;width: 100%;margin-top: 24rpx;">
                    <view style="display: flex;">
                        <image style="width: 40rpx;height: 40rpx;" src="@/static/points/yue.png" mode="">
                        </image>
                        <view class="text" style="color: #333;margin-left: 16rpx;">余额支付</view>
                    </view>
                    <u-radio activeColor="#03C1B8 " name='2'></u-radio>
                </view>
            </view>
        </u-radio-group>

        <view class="footer-bar">

            <u-button v-if="!selectedObj" :customStyle="{
                color: '#fff',
                background: '#03C1B8'
            }">请选择</u-button>
            <u-button :disabled="redeemNowBtnDisable" v-else-if="selectedObj && selectedObj.stock" :customStyle="{
                color: '#fff',
                background: '#03C1B8'
            }" @click="redeemNowFun">实付价 {{ params.paymentType == 1 ? selectedObj.pricePoint + '积分' :
                params.paymentType == 2 ? '￥' + selectedObj.priceMoney + '元' :
                    params.paymentType == 3 ? '￥' + selectedObj.priceMoney + '元' + '+' +
                        selectedObj.pricePoint + '积分' : null }}</u-button>
            <u-button v-else-if="selectedObj.stock === 0" :customStyle="{
                color: '#999999 ',
                background: '#eee'
            }">库存不足</u-button>
        </view>
    </view>

</template>

<script>

export default {
    components: {},
    props: {
        params: {
            type: Object,
            default: {}
        },
        defaultAddress: {
            type: Object,
            default: null
        },
        redeemNowBtnDisable: {
            type: Boolean,
            default: false
        },

    },
    data() {
        return {
            orderRemarks: '',
            selectPayMeth: '1',
            reasonRefusal: '',
            showPopup: false,
            specValueText: '',
            specValuePrice: '',
            specList: [],
            selectedObj: null,

        }
    },
    onLoad(data) {
        console.log('555')
    },
    onShow() {
        console.log('555')
        this.$emit('getAddrListFun')

    },
    onPageScroll() {
    },
    create() {
        console.log('55522')
    },
    computed: {
        // specValuePrice() {
        //     return ;
        // }
    },

    methods: {
        //
        onShowFun(selectedObj, orderRemarks, selectPayMeth) {
            if (orderRemarks) this.orderRemarks = orderRemarks
            if (selectPayMeth) this.selectPayMeth = selectPayMeth
            if (selectedObj) {
                this.selectedObj = JSON.parse(JSON.stringify(selectedObj))
            } else {
                this.selectedObj = this.params.specComboVOList[0]
            }
            const map = new Map();
            this.params.specComboVOList.forEach(item => {
                item.specNameValueList.forEach(spec => {
                    const key = spec.specName;
                    if (!map.has(key)) {
                        map.set(key, new Set());
                    }
                    map.get(key).add(spec.specValue);
                });
            })
            this.specList = Array.from(map)
        },
        //立即兑换
        redeemNowFun() {
            this.$emit('redeemNowFun', this.selectedObj ? JSON.parse(JSON.stringify(this.selectedObj)) : null, this.selectPayMeth, this.orderRemarks, true)
        },
        //点击选规则
        selectedSpecFun(specValue, specName) {
            if (this.selectedObj) {
                let selectedObj = JSON.parse(JSON.stringify(this.selectedObj))
                let specValueT
                selectedObj.specNameValueList.forEach((e, i) => {
                    if (e.specName == specName) {
                        specValueT = e.specValue
                    }
                })
                selectedObj.specValues.forEach((r, n) => {
                    if (r == specValueT) {
                        selectedObj.specValues.splice(n, 1)
                    }
                })
                this.params.specComboVOList.forEach((item, index) => {
                    if (item.specValueText.indexOf(specValue) != -1 && item.specValueText.indexOf(selectedObj.specValues.toString()) != -1) {
                        this.selectedObj = item
                    }

                })
            }

            //console.log(this.selectedObj, 'this.selectedObj')
            //console.log(specValue, specName, 'value,specName')

        },
        //关闭选择商品页
        closeSelectProduct() {
            this.$emit('closeSelectProduct', this.selectedObj ? JSON.parse(JSON.stringify(this.selectedObj)) : null, this.selectPayMeth, this.orderRemarks)
        },
        //去我的地址页面
        addressSelectFun() {
            uni.navigateTo({
                url: `/pages/address/index?selectedAddressId=${this.defaultAddress?this.defaultAddress.id:null}`
            });
        }

    }
}
</script>

<style lang="scss" scoped>
.content {
    background-color: #F5F8F8;
    padding: 24rpx 32rpx 32rpx 32rpx;
    font-family: PingFang SC, PingFang SC;
    height: 1000rpx;
    border-radius: 20rpx 20rpx 0 0;
    overflow-y: auto;
    position: relative;
    .addressBox {
        position: relative;
        margin-top: 70rpx;
        display: flex;
        align-items: center;
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        .name {
            margin: 0 24rpx;
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .address {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            text-align: left;
            font-style: normal;
            text-transform: none;
            width: 460rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .productPrice {
        background-color: #fff;
        margin-top: 24rpx;
        padding: 24rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        .price {
            font-weight: bold;
            font-size: 28rpx;
            color: #03C1B8;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .spec {
            font-weight: 500;
            font-size: 26rpx;
            color: #999999;
            text-align: left;
            font-style: normal;
            text-transform: none;

        }

        .deletePrice {
            font-weight: 500;
            font-size: 32rpx;
            color: #666666;
            text-align: left;
            font-style: normal;
            text-decoration-line: line-through;
            text-transform: none;
        }
    }

    .specClass {
        background-color: #fff;
        margin-top: 24rpx;
        padding: 0 24rpx 24rpx 24rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        .title {
            padding-top: 24rpx;
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .specCombination {
            font-weight: 500;
            font-size: 24rpx;
            color: #666666;
            text-align: left;
            font-style: normal;
            text-transform: none;
            height: 56rpx;
            background: #F0F0F0;
            border-radius: 38rpx 38rpx 38rpx 38rpx;
            margin-right: 16rpx;
            padding: 8rpx 16rpx;
            margin-top: 24rpx;
        }

        .active {
            background: #03C1B8;
            border-radius: 38rpx 38rpx 38rpx 38rpx;
            color: #fff;
        }


    }

    .yunFeiClass {
        display: flex;
        justify-content: space-between;
        height: 92rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-top: 24rpx;
        align-items: center;
        padding: 24rpx;

        .text {
            font-weight: 500;
            font-size: 28rpx;
            color: #666666;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    ::v-deep .nodeClass {
        margin-top: 24rpx;
        padding: 24rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30rpx;

        .u-radio__icon-wrap {
            margin: 0;
        }

        .text {
            width: 115rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #666666;
            line-height: 40rpx;
            text-align: left;

        }

        input {
            font-weight: 500;
            font-size: 26rpx;
            color: #999999;
            line-height: 40rpx;
            text-align: right;
            font-style: normal;
            text-transform: none;
            width: 450rpx;
        }
    }
}



.footer-bar {
    .u-button {
        width: 670rpx;
        height: 84rpx;
        border-radius: 98rpx 98rpx 98rpx 98rpx;
        margin: 20rpx 40rpx;
        background: '#000';

    }
}
</style>