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 @click="addOrCancel">
                        <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="show = true">
            <span class="left">已选 </span> {{ defaultSku.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="showDesc">
            <div style="height: 1rem;"></div>
            <van-card :num="confirm.orderItem.prodCount" :price="defaultSku.price ? defaultSku.price : prodData.price"
                :desc="prodData.brief" :title="defaultSku.skuName ? defaultSku.skuName : prodData.prodName"
                :thumb="defaultSku.pic ? defaultSku.pic : prodData.pic">
                <template #tags>
                </template>
                <template #footer>
                    <van-stepper v-model="confirm.orderItem.prodCount" integer />
                </template>
            </van-card>
            <div class="action-sheet-content">
                <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>

                <div class="shopcart-button">
                    <van-button class="left" :disabled="defaultSku.price ? false : true" type="danger"
                        @click="shopcartAdd">加入购物车</van-button>
                    <van-button class="right" :disabled="defaultSku.price ? false : true" type="danger"
                        @click="buynow">立即购买</van-button>
                </div>
            </div>
        </van-action-sheet>

        <!-- 选择型号 -->
        <van-action-sheet v-model="show" title="选择产品类别">
            <div class="action-sheet-content">
                <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="defaultSku.skuName ? false : true" type="danger" block
                    @click="show = false">确定</van-button>
            </div>
        </van-action-sheet>
        <van-goods-action>
            <van-goods-action-icon icon="cart-o" @click="$router.push('/shopCart')" text="购物车" />
            <van-goods-action-icon icon="shop-o" text="店铺" />
            <van-goods-action-button type="danger" text="立即购买" @click="showDesc = true" />
        </van-goods-action>
        <div style="height: 5rem;"> </div>
    </div>
</template>
<script>
import { prodInfo, prodCommData, isCollection, changeItem, confirm, addOrCancel }
    from '../api/prodinfo'
import { formatHtml } from '../utils/util'
import { Toast } from 'vant'
export default {
    data() {
        return {
            defaultSku: {},
            selectedTag: {},
            showDesc: false,
            prodData: {},
            skuList: [],
            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: ""
            }
        }
    },
    created() {
        this.loadData()
    },
    methods: {
        async loadData() {
            const prod = await prodInfo({ prodId: this.$route.query.prodId })
            this.skuList = prod.skuList
            this.transport = prod.transport
            prod.imgs = prod.imgs.split(",")
            this.prodData = prod
            this.commData = await prodCommData({ prodId: prod.prodId })
            this.isCollection = await isCollection({ prodId: prod.prodId })
            this.init(this.skuList)
        },
        async addOrCancel() {
            await addOrCancel(this.prodData.prodId)
            this.isCollection = await isCollection({ prodId: this.prodData.prodId })
        },
        buynow() {
            this.confirm.orderItem.prodId = this.prodData.prodId
            this.confirm.orderItem.skuId = this.defaultSku.skuId
            this.confirm.orderItem.shopId = this.prodData.shopId
            this.confirm.orderItem.distributionCardNo = ""
            sessionStorage.setItem("confirm", JSON.stringify(this.confirm) )
            this.$router.push("/submitinfo")
        },
        shopcartAdd() {
            this.shopcart.basketId = 0
            this.shopcart.prodId = this.prodData.prodId
            this.shopcart.skuId = this.defaultSku.skuId
            this.shopcart.shopId = this.prodData.shopId
            this.shopcart.count = this.confirm.orderItem.prodCount
            changeItem(this.shopcart).then(r => {
                Toast("添加成功!")
                this.showDesc = false
            }).catch(e => {
                console.log(e)
            })
        },
        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
                    this.defaultSku = sku[i]
                    if (sku.length === 1) return;
                }
                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])
            }
        },
        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) {
                    this.defaultSku = this.skuList[i]
                    return;
                }
            }
            this.defaultSku = {}
        },
        formatHtml(t) {
            return formatHtml(t)
        }
    }
}
</script>
<style scoped lang="less">
.shopcart-button {
    .left {
        width: 50%;
        background-color: #595959;
        border: 1px solid #595959;
    }

    .right {
        width: 50%;
    }
}

.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>