YXGJ/store/product/detail.vue

<template>
    <view>
        <swiper class="swiper">
            <swiper-item v-for="item in files" :key="item.attachmentid">
                <u--image :src="item.cover" :lazy-load="true" width="100vw" :height="tovw(377)"
                    @click.stop="previewImg(item.url)">
                    <template v-slot:loading>
                        <u-loading-icon color="red" />
                    </template>
                </u--image>
            </swiper-item>
        </swiper>
        <view class="head">
            <view class="name u-line-1">{{ detail.name || '--' }}</view>
            <view class="tag u-line-1">
                {{ detail.tag }}
            </view>
            <view v-if="detail.pricetype == '一口价'" class="price-box">
                <text class="label">
                    价格
                </text>
                <text class="unit">
                    ￥
                </text>
                <text class="price">
                    {{ CNY(detail.price, '') }}
                </text>
                <text class="unit">
                    元/{{ detail.unitname }}
                </text>
            </view>
            <block v-else>
                <view class="price-box">
                    <text class="label">
                        总部返利价
                    </text>
                    <text class="unit">
                        ￥
                    </text>
                    <text class="price">
                        {{ CNY(detail.price_rebate, '') }}
                    </text>
                    <text class="unit">
                        元/{{ detail.unitname }}
                    </text>
                </view>

                <view class="price-box">
                    <text class="label">
                        门店价
                    </text>
                    <text class="unit">
                        ￥
                    </text>
                    <text class="price">
                        {{ CNY(detail.price_store, '') }}
                    </text>
                    <text class="unit">
                        元/{{ detail.unitname }}
                    </text>
                    <text class="delete">
                        原价：{{ CNY(detail.price_original) }} 元/{{ detail.unitname }}
                    </text>
                </view>

                <view class="price-box">
                    <text class="label">
                        定金
                    </text>
                    <text class="unit">
                        ￥
                    </text>
                    <text class="price">
                        {{ CNY(detail.price_deposit, '') }}
                    </text>
                    <text class="unit">
                        元/{{ detail.unitname }}
                    </text>
                </view>
            </block>
            <view style="height: 10px;" />
            <view class="row">
                型号：{{ detail.model || '--' }}
            </view>
            <view v-if="detail.subtitle" class="row">
                {{ detail.subtitle }}
            </view>
            <view class="collect" hover-class="navigator-hover"
                @click="collectLoading ? '' : handleCollect(detail.iscollect)">
                <u-loading-icon v-if="collectLoading" size="20" />
                <block v-else>
                    <text v-if="detail.iscollect == 0" class="iconfont icon-weishoucang" />
                    <text v-else class="iconfont icon-yishoucang" style="color: #FFC300;" />
                    收藏
                </block>
            </view>
        </view>

        <storeInfo marTop="10" />

        <view class="division">
            <view class="line" />
            详情
            <view class="line" />
        </view>
        <view v-if="detail.content" style="background-color: #fff;">
            <u-parse :content="detail.content" />
        </view>

        <u--image src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405081715135815557B4db50f9.webp"
            :lazy-load="true" width="100vw" height="none" mode="widthFix"
            @click.stop="previewImg('https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405081715135815557B4db50f9.webp')">
            <template v-slot:loading>
                <u-loading-icon color="red" />
            </template>
        </u--image>
        <view style="width: 100vw;height: 75px;background-color: #fff;" />

        <view class="footer">
            <view class="fun-but" @click="toHome" hover-class="navigator-hover">
                <view class="iconfont icon-a-biaoqianlanshouyexuanzhong" />
                <view class="text">
                    首页
                </view>
            </view>
            <view class="fun-but" hover-class="navigator-hover">
                <contact>
                    <view class="iconfont icon-kefu" />
                    <view class="text">
                        咨询
                    </view>
                </contact>
            </view>
            <view class="fun-but" v-if="phoneNumber" hover-class="navigator-hover" @click="callPhone(phoneNumber)">
                <view class="iconfont icon-dianhua" />
                <view class="text">
                    致电
                </view>
            </view>
            <view class="place-an-order" @click="purchase" hover-class="navigator-hover">
                预约购买
            </view>
        </view>
    </view>
</template>

<script>
import { viewImage, formattedFiles } from "../../utils/settleFiles"
import contact from "../../components/contact"

export default {
    components: { contact },
    data() {
        return {
            detail: {
                sa_fadid: 0
            },
            files: [],
            collectLoading: false,
            phoneNumber: uni.getStorageSync("shop").phonenumber || ''
        }
    },
    onLoad(options) {
        this.detail.sa_fadid = options.id;
        this.getDetail()
    },
    methods: {
        toHome() {
            if (this.$Http.changePage) {
                this.$Http.changePage("index", '首页')
                uni.navigateBack();
            } else {
                uni.redirectTo({
                    url: '/pages/index/index',
                })
            }
        },
        getDetail() {
            this.$Http.basic({
                "id": "20240428154202",
                "content": {
                    "sa_fadid": this.detail.sa_fadid
                }
            }).then(res => {
                console.log("商品详情", res)
                if (this.cutoff(res.msg)) return;
                this.files = formattedFiles(res.data.attinfos_pic.map(v => v.attinfos[0])).map((v, i) => {
                    if (v.fileType == 'image') v.cover = this.getSpecifiedImage(v, 'compressed')
                    if (i == 0) res.data.cover = v.cover;
                    return v
                })
                this.detail = res.data;
                uni.setNavigationBarTitle({
                    title: res.data.name || '商品详情'
                });
            })

        },
        previewImg(url) {
            viewImage(url)
        },
        handleCollect(iscollect) {
            this.collectLoading = true;
            this.$Http.basic({
                "id": 20240416133702,
                "content": {
                    "ownertable": "sa_fad",
                    "ownerid": this.detail.sa_fadid,
                    "type": 1
                },
            }).then(res => {
                console.log("收藏", res)
                this.collectLoading = false;
                if (this.cutoff(res.msg)) return;
                this.detail.iscollect = iscollect ? 0 : 1
            })
        },
        purchase() {
            uni.navigateTo({
                url: '/store/orderForm/insert?data=' + JSON.stringify(this.detail),
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.swiper {
    width: 100vw;
    height: 377px;
}

.head {
    position: relative;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;

    .name {
        width: 280px;
        height: 24px;
        line-height: 24px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
    }

    .tag {
        width: max-content;
        background: #FFFFFF;
        border: 1px solid #E3041F;
        padding: 2px 4px;
        box-sizing: border-box;
        font-family: PingFang SC, PingFang SC;
        font-size: 10px;
        color: #E3041F;
        margin-top: 5px;
        max-width: 355px;
    }

    .price-box {
        font-family: Source Han Sans SC, Source Han Sans SC;

        .label {
            color: #333;
            font-size: 12px;
        }

        .unit {
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 12px;
            color: #E3041F;
            margin-left: 4px;
        }

        .price {
            color: #E3041F;
            font-size: 18px;
            font-weight: bold;
        }

        .delete {
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 12px;
            color: #333333;
            text-decoration-line: line-through;
            margin-left: 10px;
        }
    }

    .price-box:last-child {
        margin-bottom: 10px;
        background: red;
    }

    .row {
        line-height: 17px;
        font-family: PingFang SC, PingFang SC;
        font-size: 12px;
        color: #999999;
        margin-bottom: 5px;
    }

    .collect {
        position: absolute;
        right: 0;
        top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 66px;
        height: 24px;
        border-radius: 12px 0px 0px 12px;
        border: 1px solid #CCCCCC;

        .iconfont {
            font-size: 14px;
            margin-right: 4px;
        }

        font-family: Source Han Sans SC,
        Source Han Sans SC;
        font-size: 12px;
        color: #666666;
    }
}

.division {
    width: 375px;
    height: 40px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bold;
    font-size: 14px;
    color: #333333;
    margin-top: 10px;

    .line {
        width: 20px;
        height: 1px;
        background: #333333;
        margin: 0 4px;
    }
}

.footer {
    position: fixed;
    display: flex;
    width: 100vw;
    height: 65px;
    background: #FFFFFF;
    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
    bottom: 0;
    left: 0;
    padding: 10px;
    padding-top: 5px;
    box-sizing: border-box;

    .fun-but {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 8px;
        width: 50px;
        border-radius: 5px;
        flex-shrink: 0;

        .iconfont {
            font-size: 16px;
            color: #333333;
            line-height: 20px !important;
        }

        .text {
            line-height: 14px !important;
            font-family: PingFang SC, PingFang SC;
            font-size: 10px;
            color: #333333;
            margin-top: 4px;
        }
    }

    .place-an-order {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 45px;
        background: #C30D23;
        border-radius: 5px;
        margin-left: 10px;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 14px;
        color: #FFFFFF;
    }
}
</style>