football/pages/cart/components/app-shop-product/app-shop-product.vue

<template>
    <view class="app-shop-product">
        <view class="app-mch dir-left-nowrap main-left cross-center">
            <view class="app-all-radio cross-center" @click="changeAllRadio(mch)" v-if="mch.new_status === 0 || editStatus">
                <view class="app-all" v-if="!mch.is_active"></view>
                <view class="app-all-active" v-else></view>
            </view>
            <view v-else class="app-all-radio cross-center">
                <view class="app-all app-all-n"></view>
            </view>
            <text class="app-mch-name">{{mch.name}}</text>
        </view>
        <view class="app-product dir-left-nowrap cross-top" v-for="(good, index) in mch.goods_list" :key="index">
            <view class="app-single-radio dir-left-nowrap main-center cross-center">
                <view v-if="good.new_status !== 0 && !editStatus" class="app-invalid">失效</view>
                <view class="app-radio dir-top-nowrap main-center cross-center" v-else
                      @click="changeSingleRadio(mch, good)">
                    <view class="radio-single" v-if="!good.is_active"></view>
                    <view class="radio-single-active" v-else></view>
                </view>
            </view>
            <view class="app-image" @click="jump(good)">
                <image :src="good.attrs.pic_url ? good.attrs.pic_url : good.goods.cover_pic"></image>
            </view>
            <view class="app-content">
                <text class="app-title" :class="{'app-failed-title': good.new_status !== 0}">
                    {{good.goods.name}}
                </text>
                <view class="app-specification-style">
                    <text v-for="(item, index) in good.attrs.attr" v-bind:key="index">
                        {{item.attr_group_name}}: {{item.attr_name}}
                    </text>
                </view>
                <view class="app-miaosha dir-left-nowrap main-left cross-center" v-if="good.sign === 'miaosha'">
                    <icon class="app-miaosha-icon"
                          v-if="good.miaosha_status === 2 || good.miaosha_status === 1"></icon>
                    <icon class="app-spike-icon" v-if="good.miaosha_status === 0"></icon>
                    <!--					<text class="app-not-start" v-if="good.miaosha_status === 2">秒杀未开始</text>-->
                    <view class="app-beginning" v-if="good.miaosha_status === 1">
                        秒杀中  还剩
                        {{good.miaosha_string}}
                        结束
                    </view>
                    <text class="app-over" v-if="good.miaosha_status === 0">秒杀已结束</text>
                </view>
                <view class="app-failed-goods" v-if="good.new_status !== 0">
                    <view v-if="good.new_status === 2" class="app-text dir-left-nowrap main-left cross-center">
                        商品已售罄,请联系卖家
                    </view>
                    <view v-else-if="good.new_status === 3"
                          class="app-text  dir-left-nowrap main-left cross-center">
                        商品已失效
                    </view>
                    <view v-else-if="good.new_status === 4"
                          class="app-text  dir-left-nowrap main-left cross-center">
                        商户已关闭
                    </view>
                    <view v-else-if="good.new_status === 5"
                          class="app-text dir-left-nowrap main-left cross-center">
                        商品已下架
                    </view>
                </view>
                <view class="dir-top-nowrap" v-else>
                    <view class="reduce-price" v-if="good.reduce_price > 0 && good.new_status === 0">
                        比加入时降￥{{good.reduce_price}}
                    </view>
                    <view class="app-price-button dir-left-nowrap main-between cross-center">
                        <text class="app-price">
                            {{good.attrs.price}}
                        </text>
                        <app-add-subtract
                            v-model="mch.goods_list[index].num"
                            :good_id="mch.goods_list[index].id"
                            :stock="good.attrs.stock"
                            @change="change"
                        ></app-add-subtract>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>


<script>
    import appRadio from '../../../../components/basic-component/app-radio/app-radio.vue';
    import appAddSubtract from '../app-add-subtract/app-add-subtract.vue';

    export default {
        name: "app-shop-product",
        components: {
            'app-radio': appRadio,
            'app-add-subtract': appAddSubtract,
        },
        props: {
            mch: {
                type: Object
            },
            editStatus: {
                type: Boolean,
                default() {
                    return false;
                }
            }
        },
        data() {
            return {
                timer: null,
                time: '0'
            }
        },
        methods: {
            changeSingleRadio(mch, item) {
                this.$emit('changeSingleRadio', mch, item);
            },
	        
            changeAllRadio(data) {
                this.$emit('changeRadioAll', data);
            },
	        
            jump(good) {
                if (good.new_status === 0) {
                    if (good.mch_id > 0) {
                        this.$jump({
                            open_type: 'navigate',
                            url: `/plugins/mch/goods/goods?id=${good.goods.id}&mch_id=${good.mch_id}`
                        })
                    } else if (good.sign === 'miaosha') {
                        this.$jump({
                            open_type: 'navigate',
                            url: `/plugins/miaosha/goods/goods?id=${good.goods.id}`
                        })
                    } else {
                        this.$jump({
                            open_type: 'navigate',
                            url: `/pages/goods/goods?id=${good.goods.id}`
                        })
                    }
                }
            },
	        
            change(number, id) {
                this.$emit('change', number, id, this.mch.mch_id);
            }
        },
    }
</script>

<style scoped lang="scss">
    .app-shop-product {
        width: #{750rpx};
        background-color: #ffffff;
        margin-top: #{32rpx};
    }

    .app-mch {
        border-bottom: #{1rpx} solid #e2e2e2;
        height: #{80rpx};
        width: 100%;
        .app-all-radio {
            width: #{94rpx};
            height: #{80rpx};
            .app-all {
                width: #{40rpx};
                height: #{40rpx};
                border-radius: 50%;
                margin-left: #{24rpx};
                background-color: white;
                border: #{1rpx} solid #e2e2e2;
            }
            .app-all-n {
                background-color: #cdcdcd !important;
            }
            .app-all-active {
                width: #{40rpx};
                height: #{40rpx};
                border-radius: 50%;
                margin-left: #{24rpx};
                background-repeat: repeat;
                background-size: 100% 100%;
                background-image: url("../../../../static/image/icon/icon-checkbox-checked-a.png");
            }
        }
        .app-mch-name {
            font-size: #{26rpx};
            color: #666666;
        }
    }

    .app-product {
        width: 100%;
        margin-top: #{30rpx};
        padding-bottom: #{30rpx};
        border-bottom: #{1rpx} solid #e2e2e2;
        .app-single-radio {
            width: #{84rpx};
            height: #{156rpx};
            .app-radio {
                width: #{84rpx};
                height: #{156rpx};
                .radio-single {
                    width: #{40rpx};
                    height: #{40rpx};
                    border-radius: 50%;
                    background-color: white;
                    border: #{1rpx} solid #e2e2e2;
                }
                .radio-single-active {
                    width: #{40rpx};
                    height: #{40rpx};
                    border-radius: 50%;
                    background-repeat: repeat;
                    background-size: 100% 100%;
                    background-image: url("../../../../static/image/icon/icon-checkbox-checked-a.png");
                }
            }
            .app-invalid {
                width: #{64rpx};
                height: #{32rpx};
                line-height: #{32rpx};
                border-radius: #{16rpx};
                text-align: center;
                font-size: #{24rpx};
                color: #FFFFFF;
                background-color: #cdcdcd;
            }
        }
        .app-image {
            width: #{156rpx};
            height: #{156rpx};
            image {
                width: 100%;
                height: 100%;
            }
        }
        .app-content {
            width: #{466rpx};
            background-color: white;
            margin: 0 #{24rpx} #{30rpx} #{20rpx};
            .app-title {
                width: 100%;
                font-size: #{28rpx};
                color: #353535;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                margin-bottom: #{10rpx};
            }
            .app-failed-title {
                color: #999999;
            }
            .app-specification-style {
                margin-bottom: #{16rpx};
                text {
                    font-size: #{24rpx};
                    color: #999999;
                    margin-right: #{36rpx};
                }
            }
            .app-miaosha {
                width: 100%;
                margin-bottom: #{24rpx};
                .app-miaosha-icon {
                    width: #{29rpx};
                    height: #{29rpx};
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    background-image: url("../../../../static/image/cart/miaosha.png");
                    margin-right: #{12rpx};
                }
                .app-spike-icon {
                    width: #{29rpx};
                    height: #{29rpx};
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    background-image: url("../../../../static/image/cart/spike-invalid.png");
                    margin-right: #{12rpx};
                }
                .app-beginning {
                    font-size: #{22rpx};
                    color: #ff4544;
                }
                .app-over {
                    font-size: #{22rpx};
                    color: #999999;
                }
            }
            .app-failed-goods {
                width: 100%;
                .app-text {
                    color: #353535;
                    font-size: #{25rpx};
                }
                .app-spike {
                    margin-bottom: #{24rpx};
                }
                .app-spike-icon {
                    width: #{29rpx};
                    height: #{29rpx};
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    background-image: url("../../../../static/image/cart/spike-invalid.png");
                    margin-right: #{12rpx};
                }
                .app-spike-text {
                    font-size: #{24rpx};
                    color: #999999;
                }
            }
            .app-price-button {
                width: 100%;
                height: #{60rpx};
                .app-price {
                    color: #ff5857;
                    font-size: #{32rpx};
                }
                .app-price:before {
                    content: '￥';
                    font-size: #{24rpx};
                }
            }

            .reduce-price {
                color: #ff4544;
                font-size: #{24rpx};
            }
        }
    }
</style>