caimei-applets-mcare/pages/user/order/components/goodsList.vue

<template name="goods">
    <view class="goods-template">
        <!-- 商品列表 -->
        <view class="goods-list">
            <view v-for="(item, index) in goodsCloneData" :key="index" class="goods-item">
                <view class="shoptitle">
                    <view class="title-text">{{ item.shopName }}</view>
                </view>
                <view class="productlist" v-for="(pros, idx) in item.cartList" :key="idx">
                    <view class="goods-pros-t">
                        <view class="pros-img"><image :src="pros.image" alt="" /></view>
                        <view class="pros-product">
                            <view class="producttitle">{{ pros.name }}</view>
                            <view class="productspec" v-if="pros.productCategory != 2">规格:{{ pros.unit }}</view>
                            <!-- 					<view class="productspec" v-if="pros.productCode!=''&&pros.productCode!=null">
								<view >商品编码:{{pros.productCode}}</view>
							</view> -->
                            <view class="productprice">
                                <view class="price">
                                    <text>￥{{ pros.price | NumFormat }}</text>
                                </view>
                                <view class="count">
                                    <text class="small">x</text>
                                    {{ pros.number }}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="goods-pros-m">
                    <view class="m-text">留言:</view>
                    <view class="m-input">
                        <input
                            type="text"
                            v-model="remark[index]"
                            @change="changeHandle(index)"
                            placeholder-class="placeholder"
                            maxlength="50"
                            placeholder="选填，最多不超过50个汉字"
                        />
                    </view>
                </view>
                <freight-popup
                    ref="freight"
                    :goodIndex="index"
                    :goodsData="[item]"
                    :ispopupShow="ispopupShow"
                    @show-freight="showFreight"
                    @change-freight="changeFreight"
                ></freight-popup>
                <view class="goods-pros-b">
                    <view class="sum">
                        <text>合计：</text>
                        <text class="money">￥</text>
                        <count-up
                            :num="item.totalPrice.toFixed(2)"
                            :width="16"
                            :height="40"
                            :fontSize="28"
                            color="#F94B4B"
                        ></count-up>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import FreightPopup from './freight-popup.vue'
import CountUp from './countUp.vue'
export default {
    name: 'goods',
    props: {
        goodsData: {
            type: Array
        }
    },
    components: {
        FreightPopup,
        CountUp
    },
    data() {
        return {
            remark: [],
            vipFlag: 0,
            ispopupShow: false, // 运费选择弹窗
            allPrice: 0,
            goodsCloneData: []
        }
    },
    created() {},
    filters: {
        NumFormat(value) {
            //处理金额
            return Number(value).toFixed(2)
        }
    },
    watch: {
        goodsData: {
            handler: function(el) {
                //监听对象的变换使用 function，箭头函数容易出现this指向不正确
                this.goodsCloneData = el
            },
            deep: true,
            immediate: true
        }
    },
    computed: {},
    methods: {
        PromotionsFormat(promo) {
            //促销活动类型数据处理
            if (promo != null) {
                if (promo.type == 1 && promo.mode == 1) {
                    return true
                } else {
                    return false
                }
            }
            return false
        },
        changeHandle(index) {
            //输入框的值被改变后
            this.goodsData[index].note = this.remark[index]
            this.$emit('handleGoodList', this.goodsData)
        },
        showFreight($event) {
            this.ispopupShow = $event
        },
        // 修改运费弹窗
        changeFreight($event) {
            this.goodsCloneData[$event[0]] = $event[1]
            this.goodsCloneData[$event[0]].totalPrice = this.goodsCloneData[$event[0]].originalPrice + $event[2]
            this.goodsCloneData[$event[0]].postage = $event[1].postageFlag === 2 ? 0 : JSON.parse(uni.getStorageSync('goodsData'))[$event[0]].postage
            this.$emit('handleGoodList', this.goodsCloneData)
            console.log('goodsCloneData', this.goodsCloneData)
        }
    }
}
</script>

<style lang="scss">
.goods-template {
    width: 100%;
    height: auto;
    background: #ffffff;
    float: left;
    margin-top: 24rpx;
    .goods-list {
        width: 100%;
        height: auto;
        background: #f7f7f7;
        .goods-item {
            width: 702rpx;
            padding: 0 24rpx;
            background: #ffffff;
            margin-bottom: 24rpx;
            &:last-child {
                margin-bottom: 0;
            }
        }
        .shoptitle {
            display: flex;
            align-items: center;
            height: 80rpx;
            line-height: 80rpx;
            .title-text {
                width: 400rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                float: left;
                font-size: $font-size-28;
                color: $text-color;
                text-align: left;
                line-height: 56rpx;
                font-weight: bold;
            }
        }
        .productlist {
            width: 100%;
            height: auto;
        }
        .goods-pros-t {
            display: flex;
            width: 100%;
            height: auto;
            padding: 12rpx 0;
            .pros-img {
                width: 210rpx;
                height: 100%;
                border-radius: 10rpx;
                margin: 0 26rpx 0 0;
                position: relative;
                image {
                    width: 210rpx;
                    height: 210rpx;
                    border-radius: 10rpx;
                    border: 1px solid #f3f3f3;
                }
            }
        }
        .pros-product {
            width: 468rpx;
            height: 100%;
            line-height: 40rpx;
            font-size: $font-size-26;
            position: relative;
            .producttitle {
                width: 100%;
                display: inline-block;
                height: auto;
                text-overflow: ellipsis;
                display: -webkit-box;
                word-break: break-all;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                margin-bottom: 8rpx;
            }
            .productspec {
                color: #999999;
                text-overflow: ellipsis;
                display: -webkit-box;
                word-break: break-all;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                margin: 8rpx 0 24rpx 0;
            }
            .productprice {
                height: 54rpx;
                width: 100%;
                float: left;
                .price {
                    line-height: 54rpx;
                    font-size: $font-size-28;
                    width: 48%;
                    color: #ff2a2a;
                    float: left;
                }
                .count {
                    height: 100%;
                    float: right;
                    position: relative;
                    .small {
                        color: #666666;
                    }
                }
            }
        }
        .goods-pros-m {
            height: 76rpx;
            line-height: 76rpx;
            font-size: $font-size-26;
            color: $text-color;
            margin-top: 12rpx;
            .m-text {
                width: 62rpx;
                float: left;
                padding-right: 20rpx;
                font-weight: bold;
            }
            .m-input {
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;
                position: relative;
                width: 580rpx;
                height: 36rpx;
                padding: 20rpx;
                background: #f7f7f7;
                border-radius: 10rpx;
                input {
                    width: 100%;
                    height: 100%;
                    background: #f7f7f7;
                    font-size: $font-size-26;
                    line-height: 36rpx;
                    color: #333333;
                    min-height: 36rpx;
                }
            }
        }
        .goods-pros-b {
            width: 100%;
            height: auto;
            padding: 10rpx 0;
            .sum-none {
                width: 100%;
                height: 48rpx;
                line-height: 48rpx;
                color: $text-color;
                float: left;
                text-align: right;
                .money {
                    font-size: $font-size-26;
                    color: #999999;
                    text-decoration: line-through;
                }
                .money-sign {
                    font-size: $font-size-26;
                    color: #999999;
                    text-decoration: line-through;
                }
                .money-reduced {
                    margin-left: 10rpx;
                    font-size: $font-size-26;
                    color: $color-system;
                    .iconfont {
                        font-size: $font-size-34;
                    }
                }
            }
            .sum {
                width: 100%;
                height: 48rpx;
                font-size: $font-size-28;
                line-height: 48rpx;
                color: $text-color;
                display: flex;
                justify-content: flex-end;
                .money {
                    color: #ff2a2a;
                    font-size: $font-size-28;
                }
            }
        }
    }
}
</style>