mobile-shop/src/views/ProdInfo.vue

<template>
    <div class="prod-info">
        <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-if="prodData.imgs" v-for="(img, index) in prodData.imgs " :key="index">
                <van-image alt="" :src="img" />
            </van-swipe-item>
        </van-swipe>

        <van-divider />

        <!-- 商品信息介绍 -->
        <div class="prod-title">
            <van-row>
                <van-col class="prod-title-name" span="18">
                    {{ prodData.prodName }}
                </van-col>
                <van-col span="6" class="prod-title-icon">
                    <div>
                        <van-icon v-if="!isCollection" name="like-o" size="20" />
                        <van-icon v-if="isCollection" style="color:red" name="like" size="20" />
                        <span> 收藏</span>
                    </div>
                </van-col>
            </van-row>
            <van-row>
                <van-col span="20" class="prod-title-brief">
                    {{ prodData.brief }}
                </van-col>
                <van-col span="4" class="prod-title-icon">
                </van-col>
            </van-row>
            <van-row>
                <van-col class="prod-title-name prod-title-price" span="20">
                    ￥<span class="title-price">{{ prodData.price }}</span>
                </van-col>
                <van-col span="4" class="prod-title-icon">
                </van-col>
            </van-row>
        </div>

        <!-- 分割线 -->
        <van-divider :style="{ border: '.5rem solid #ebedf0' }" />

        <!-- 类别 -->
        <div class="prod-categray" v-if="skuList.length > 0" @click="openSkuPlan">
            <span class="left">已选 </span> {{ skuList[0].skuName }} <span class="right">...</span>
        </div>

        <!-- 分割线 -->
        <van-divider :style="{ border: '.5rem solid #ebedf0', marginBottom: 0 }" />

        <!-- 评价信息 -->
        <van-cell title-style="cell-title" center value="共0条" is-link>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">评价: </span>
                <span>好评{{ commData.positiveRating }}%</span>
            </template>
        </van-cell>
        <van-grid :column-num="5" :border="false">
            <van-grid-item><van-tag type="warning">全部({{ commData.number }})</van-tag></van-grid-item>
            <van-grid-item><van-tag type="warning">好评({{ commData.praiseNumber }})</van-tag></van-grid-item>
            <van-grid-item><van-tag type="warning">中评({{ commData.secondaryNumber }})</van-tag></van-grid-item>
            <van-grid-item><van-tag type="warning">差评({{ commData.negativeNumber }})</van-tag></van-grid-item>
            <van-grid-item><van-tag type="warning">有图({{ commData.picNumber }})</van-tag></van-grid-item>
        </van-grid>
        <div class="content" v-if="prodData.content" v-html="formatHtml(prodData.content)"></div>
        <van-action-sheet v-model="show" title="标题">
            <div class="action-sheet-content">
                <van-card v-if="skuSelected" :num="skuSelected.prodCount" :price="skuSelected.price"
                    :desc="skuSelected.skuName" :title="skuSelected.prodName" :thumb="skuSelected.pic">
                    <template #tags>

                    </template>
                    <template #footer>
                        <van-stepper async-change integer />
                    </template>
                </van-card>
                <div>
                    <div v-for="(tag, idx) in tags" :key="idx">
                        <div style="text-align: left;">
                            {{ idx }}
                        </div>
                        <van-tag @click="selectTag(idx, t)" :class="{ 'prop-selected' : selectedTag[idx] === t ? true : false }"  plain v-for="(t, index) in tag"
                            :key="index" type="danger">{{ t }}</van-tag>
                    </div>

                </div>
                <div style="margin-top: 2rem;"></div>
                <van-button :disabled="confirm.orderItem.skuId === 0" type="danger" block @click="handclick">确定</van-button>
            </div>
        </van-action-sheet>
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" />
            <van-goods-action-icon icon="cart-o" text="购物车" />
            <van-goods-action-icon icon="shop-o" text="店铺" />
            <van-goods-action-button type="danger" text="立即购买" @click="onClickButton" />
        </van-goods-action>
        <div style="height: 5rem;"> </div>
    </div>
</template>
<script>
import { prodInfo, prodCommData, isCollection, changeItem, confirm } from '../api/prodinfo'
import { formatHtml } from '../utils/util'
export default {
    data() {
        return {
            selectedTag: {},
            prodId: 0,
            prodData: {},
            skuList: [],
            skuSelected: null,
            transport: {},
            commData: {
                positiveRating: 0,
                number: 0,
                praiseNumber: 0,
                secondaryNumber: 0,
                negativeNumber: 0,
                picNumber: 0
            },
            isCollection: false,
            show: false,
            tags: {},
            confirm: {
                basketIds: [],
                orderItem: {
                    prodId: 0,
                    skuId: 0,
                    prodCount: 1,
                    shopId: 0,
                    distributionCardNo: ""
                },
                addrId: 0,
                userChangeCoupon: 0,
                couponIds: []
            },
            shopcart: {
                basketId: 0,
                prodId: 0,
                skuId: 0,
                shopId: 0,
                count: 0,
                distributionCardNo: ""
            }
        }
    },
    computed: {
       
    },
    async created() {
        this.prodId = this.$route.query.prodId
        const prod = await prodInfo({ prodId: this.prodId })
        this.skuList = prod.skuList
        this.transport = prod.transport
        prod.imgs = prod.imgs.split(",")
        this.prodData = prod
        this.commData = await prodCommData({ prodId: this.prodId })
        this.isCollection = await isCollection({ prodId: this.prodId })
        this.init(this.skuList)
    },
    methods: {
        init(sku){
            const properties = []
            const propObject = {}
            let   defaultArr = []
            for ( let i = 0; i < sku.length; i++ ) {
                properties.push( sku[i].properties )
            }
            for (let i = 0; i < properties.length; i++) {
                const propStr =  properties[i]
                const propArr = propStr.split(";")
                if ( defaultArr.length === 0 ) {
                    defaultArr = propArr
                }
                for (let n = 0; n < propArr.length; n++) {
                    const valueStr = propArr[n];
                    const valueArr = valueStr.split(":")
                    if ( !propObject[valueArr[0]] ) {
                        propObject[valueArr[0]] = new Set()
                    }
                    propObject[valueArr[0]].add(valueArr[1])
                }
            }
            this.tags = propObject
            for ( let i = defaultArr.length - 1; i >= 0; i-- ) {
                const valueStr = defaultArr[i];
                const valueArr = valueStr.split(":")
                this.$set(this.selectedTag, valueArr[0], valueArr[1])
            }
        },
        onClickButton() {
            // this.confirm.orderItem.prodId = this.prodData.prodId
            // this.confirm.orderItem.prodCount = 1
            // this.confirm.orderItem.shopId = this.prodData.shopId

            this.shopcart.basketId = 0
            this.shopcart.prodId = this.prodData.prodId
            this.shopcart.skuId = this.confirm.orderItem.skuId
            this.shopcart.shopId = this.prodData.shopId
            this.shopcart.count = 1

            // confirm(this.confirm).then(r=>{
            //     console.log(r)
            // }).catch(e=>{
            //     console.log(e)
            // })
            changeItem(this.shopcart)
        },
        handclick() {
            this.show = !this.show
        },
        selectTag(propTitle, Propvalue) {
            //当用户选择一个属性的时候, 我们存储他的选择
            this.$set( this.selectedTag, propTitle, Propvalue )
            //然后我们判断 用户选择的属性时候能找到对应的prop
            let str =  ""
            for ( let item in this.selectedTag ) {
                str = item + ":" + this.selectedTag[item] + ";" + str
            }
            str = str.substring(0, str.length -1 )
            for ( let i = 0; i < this.skuList.length; i++ ) {
                if (this.skuList[i].properties === str) {
                    console.log(this.skuList[i].skuId  )
                    return;
                }
            }
        },
        openSkuPlan() {
            this.show = !this.show
        },
        formatHtml(t) {
            return formatHtml(t)
        }
    }
}
</script>
<style scoped lang="less">


.prop-selected {
    color: #FFF !important;
    background-color: red !important;
}
.prod-info /deep/ .van-tag {
    color: #ee0a24;
    margin-left: 1rem;
    padding: 0.3rem;
}

.prod-info /deep/ .action-sheet-content {
    padding: 1rem;
}

.prod-info /deep/ .van-card {
    background-color: #FFF;
}

.van-tag--warning {
    background-color: #ff976a;
    padding: 0.3rem;
}

.prod-info {
    padding: auto;

    .van-cell {
        .van-cell__title {
            text-align: left;
        }
    }

    .content {
        padding: 0%;
    }

    .prod-categray {
        height: 1rem;
        line-height: 1rem;
        text-align: left;
        padding-left: 1rem;
        font-weight: 700;

        .left {
            font-size: .9rem;
            color: grey;
            font-weight: 200;
        }

        .right {
            text-align: right;
            float: right;
            margin-right: 1rem;
            font-weight: 200;
        }
    }

    .prod-title {
        .prod-title-brief {
            height: 3rem;
            padding-left: 1rem;
            text-align: left;
            font-size: .6rem;
            color: #595959;
        }

        .prod-title-price {
            color: red;

            .title-price {
                font-size: 1.5rem;
                font-weight: 500;
            }
        }

        .prod-title-name {
            height: 3rem;
            padding-left: 1rem;
            text-align: left;
        }

        .prod-title-icon {
            height: 3rem;
            line-height: 3rem;
            padding-right: 1rem;
        }
    }
}
</style>