YXGJ/packageCase/imgs/detail.vue

<template>
    <view>

        <swiper class="swiper" circular v-if="slides.length" :indicator-dots="slides.length > 1" indicator-color="#DC808B"
            indicator-active-color="#C30D23">
            <swiper-item class="swiper-item" v-for="item in slides" :key="item.url">
                <image class="image" :src="item.cover" mode="aspectFill" lazy-load="true" />
                <view class="qrcode" @click="saveQrcode">
                    <text class="iconfont icon-xiazai" />
                    二维码
                </view>
            </swiper-item>
        </swiper>
        <view class="head">
            <view class="line1">
                <view class="left">
                    <text class="iconfont icon-biaoqian" />
                    {{ detail.renderingstype }}
                </view>
                <view class="right" 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>
            <view class="title">{{ detail.title }}</view>
            <view class="subtitle" v-if="detail.subtitle">{{ detail.subtitle }}</view>
        </view>


        <scroll-view v-if="productList.length" class="product-list" scroll-x lower-threshold="200" enable-flex
            @scrolltolower="scrolltolower">
            <navigator class="product" v-for="item in productList" :key="item.sa_fadid"
                :url="'/packageCase/product/detail?id=' + item.sa_fadid" hover-class="navigator-hover">
                <u--image :src="item.cover" :lazy-load="true" :width="tovw(112)" :height="tovw(112)" radius="5">
                    <template v-slot:loading>
                        <u-loading-icon color="red"></u-loading-icon>
                    </template>
                </u--image>
                <view class="label u-line-1">
                    {{ item.name }}
                </view>
            </navigator>
        </scroll-view>


        <view class="introduce" v-if="detail.notes">
            <view class="introduce-title">
                产品介绍
            </view>
            <view class="introduce-text">
                {{ detail.notes }}
            </view>
        </view>
        <storeInfo />
        <view style="position: absolute;z-index: -999;top: 0;">
            <l-painter ref="painter" hidden css="padding:10px;background:#fff;width: 148px;">
                <l-painter-view>
                    <l-painter-view css="margin: 0 auto;width: 128px;">
                        <l-painter-qrcode :text="detail.appleturl" css="width: 128px; height: 128px;color:#000;" />
                    </l-painter-view>
                    <l-painter-view css="width: 108px;text-align: center;margin: 10px auto 0;">
                        <l-painter-text :text="detail.title" />
                    </l-painter-view>
                </l-painter-view>
            </l-painter>
        </view>
        <bottomForm type="效果图" ownertable="sat_sharematerial" :ownerid="sat_sharematerialid" />
    </view>
</template>

<script>
import lPainter from "../../uni_modules/lime-painter/components/l-painter/l-painter.vue"
import lPainterText from "../../uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue"
import lPainterView from "../../uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue"
import lPainterQrcode from "../../uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue"
export default {
    components: { lPainter, lPainterQrcode, lPainterText, lPainterView },
    data() {
        return {
            sat_sharematerialid: null,
            detail: {},
            slides: [],
            collectLoading: false,
            content: {
                "pageNumber": 1,
                "pageTotal": 1,
                "pageSize": 20,
                "where": {
                    "condition": ""
                }
            },
            productList: []
        }
    },
    onLoad(options) {
        this.sat_sharematerialid = options.id;
        this.getDetail(true);
        this.scrolltolower()
    },
    methods: {
        getDetail(init = false) {
            if (!init) return;
            this.$Http.basic({
                "id": 20240415164302,
                "content": {
                    "sat_sharematerialid": this.sat_sharematerialid
                },
            }).then(res => {
                console.log("获取效果图详情", res)
                if (this.cutoff(res.msg)) return;
                this.detail = res.data;
                this.slides = res.data.attinfos_pic.map(v => {
                    return {
                        cover: this.getSpecifiedImage(v.attinfos[0], 'compressed'),
                        url: v.attinfos[0].url
                    }
                })
                uni.setNavigationBarTitle({
                    title: res.data.title
                });
            })
        },
        handleCollect(iscollect) {
            this.collectLoading = true;
            this.$Http.basic({
                "id": 20240416133702,
                "content": {
                    "ownertable": "sat_sharematerial",
                    "ownerid": this.detail.sat_sharematerialid,
                    "type": 1
                },
            }).then(res => {
                console.log("收藏", res)
                this.collectLoading = false;
                if (this.cutoff(res.msg)) return;
                this.detail.iscollect = iscollect ? 0 : 1
            })
        },
        saveQrcode() {
            let that = this;
            that.$refs.painter.canvasToTempFilePathSync({
                fileType: "jpg",
                // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
                pathType: 'url',
                quality: 1,
                success: (res) => {
                    console.log(res.tempFilePath);
                    // 非H5 保存到相册
                    // H5 提示用户长按图另存
                    uni.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success: function (e) {
                            uni.showModal({
                                title: '提示',
                                content: '图片已保存到系统相册',
                                showCancel: false
                            })
                            that.loading = false;
                        },
                        fail: ({ errMsg }) => {
                            if (errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
                                uni.showModal({
                                    title: '提示',
                                    content: '请授权添加到相册权限后再试！',
                                    showCancel: false,
                                    complete: (complete) => {
                                        uni.openSetting({
                                            success: res => {
                                                that.loading = false;
                                                if (res.authSetting['scope.writePhotosAlbum']) {
                                                    this.saveTheImage()
                                                } else {
                                                    uni.showModal({
                                                        title: '提示',
                                                        content: '未获取授权！已取消保存',
                                                        showCancel: false,
                                                    })
                                                }
                                            }
                                        })
                                    },
                                })
                            } else {
                                that.loading = false;
                                uni.showModal({
                                    title: '提示',
                                    content: '已取消保存',
                                    showCancel: false,
                                })
                            }
                        },
                    });
                },
            });
        },
        getSheraDate() {
            let detail = this.detail
            return {
                title: detail.title, // 标题
                path: "/packageCase/imgs/detail?id=" + detail.sat_sharematerialid, // 分享路径
                imageUrl: this.detail.attinfos.find(v => v.usetype == "sat_sharematerial").url || ""// 分享图
            };
        },
        scrolltolower() {
            let content = this.content;
            content.sat_sharematerialid = this.sat_sharematerialid;
            if (content.pageNumber > content.pageTotal) return console.log("已加载全部单品")
            this.$Http.basic({
                "id": 20240419135802,
                content
            }).then(res => {
                console.log("关联单品", res)
                if (this.cutoff(res.msg)) return;
                res.data = res.data.map(v => {
                    v.cover = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "sa_fad") || v.attinfos[0]) : uni.getStorageSync("site").logo || ''
                    return v
                })
                this.productList = res.pageNumber == 1 ? res.data : this.productList.concat(res.data);
                content.pageNumber = res.pageNumber + 1;
                content.pageTotal = res.pageTotal;
            })
        }
    },
    onShareAppMessage(res) {
        return this.getSheraDate()
    },
    onShareTimeline() {
        return this.getSheraDate()
    }
}
</script>

<style lang="scss">
.swiper {
    width: 375px;
    height: 231px;
    background: #F5F5F5;
    border-radius: 5px;
    box-sizing: border-box;

    .swiper-item {
        position: relative;
        width: 100%;
        height: 100%;

        .image {
            width: 100%;
            height: 100%;
        }

        .qrcode {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            top: 10px;
            right: 10px;
            width: 70px;
            height: 25px;
            background: rgba($color: #333333, $alpha: 0.5);
            font-size: 12px;
            color: #FFFFFF;

            .iconfont {
                margin-right: 4px;
            }
        }
    }


}

.head {
    background: #fff;
    padding: 8px 10px 15px;
    margin-bottom: 10px;

    .line1 {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

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

            line-height: 17px;
            font-size: 12px;
            color: #999999;
        }

        .right {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 24px;
            border-radius: 12px;
            border: 1px solid #CCCCCC;
            font-family: PingFang SC, PingFang SC;
            font-size: 12px;
            color: #333333;

            .iconfont {
                margin-right: 5px;
            }
        }
    }

    .title {
        line-height: 20px;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 14px;
        color: #333333;
        margin: 10px 0;
    }

    .subtitle {
        line-height: 17px;
        font-family: PingFang SC, PingFang SC;
        font-size: 12px;
        color: #666666;
    }
}

.product-list {
    display: flex;
    width: 100vw;
    height: 162px;
    white-space: nowrap;
    box-sizing: border-box;
    padding-top: 10px;
    background: #fff;
    margin-bottom: 10px;

    .product {
        width: 112px;
        height: 142px;
        margin-left: 10px;
        flex-shrink: 0;
        background: #fff;

        .label {
            width: 112px;
            line-height: 20px;
            font-family: PingFang SC, PingFang SC;
            font-size: 14px;
            color: #333333;
            margin-top: 10px;
            white-space: Normal;
        }
    }
}

.introduce {
    background: #fff;
    padding: 0 10px;

    &-title {
        line-height: 45px;
        background: #FFFFFF;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
    }

    &-text {
        line-height: 20px;
        font-family: PingFang SC, PingFang SC;
        font-size: 14px;
        color: #333333;
        padding-bottom: 10px;
    }
}
</style>