CZKJ.YOUXUAN/src/pages/recommend/detail.vue

<template>
    <div class="page" :class="{ page_red: theme === 1 }">
        <scroll-view
            class="page__scroll"
            :class="{ 'page__scroll--iphoneX': iphoneX }"
            :scroll-y="true"
            :refresher-enabled="true"
            :refresher-triggered="triggered"
            @refresherrefresh="refresherrefresh"
            @scrolltolower="getMoreGoods"
            :scroll-into-view="scroll"
        >
            <swiper
                class="swiper"
                :indicator-dots="true"
                @change="swiperChange($event)"
            >
                <swiper-item
                    class="swiper__item"
                    v-if="goods.videos.orgVideoUrl"
                >
                    <video
                        id="goodVideo"
                        class="swiper__video"
                        :src="goods.videos.orgVideoUrl"
                        :poster="goods.videos.orgCoverUrl"
                        :show-mute-btn="true"
                    ></video>
                </swiper-item>
                <swiper-item
                    class="swiper__item"
                    v-for="(item, index) in goods.pictureUrls"
                    :key="index"
                >
                    <my-image class="swiper__img" :src="item"></my-image>
                </swiper-item>
            </swiper>
            <div class="info">
                <div class="info__top">
                    <div class="price">
                        <div class="price__present">
                            <span class="price__rmb">¥</span>
                            <span class="price__big">{{
                                goods.minPrice / 100 || "0.00"
                            }}</span>
                        </div>
                        <div
                            class="price__original"
                            v-if="goods.tagPrice !== '0.00'"
                        >
                            {{ "¥" + (goods.tagPrice / 100 || "0.00") }}
                        </div>
                    </div>
                    <!-- <div class="info__num">
                        {{ "销量" + (goods.weSold || "0") }}
                    </div> -->
                </div>
                <div class="info__bottom">
                    <div class="info__title">
                        {{ goods.name || "" }}
                    </div>
                    <div class="share" @click="oprenShare">
                        <img
                            class="share__img"
                            src="/static/goods/share.png"
                            alt=""
                        />
                        <div class="share__text">分享</div>
                    </div>
                </div>
                <div class="info__bottom">
                    <div class="info__title info__deliveryDesc">
                        发货：{{ activityData.deliveryDesc }}
                    </div>
                </div>
                <div
                    class="info__tag"
                    v-if="
                        activityData.activityLabelBOList &&
                        activityData.activityLabelBOList.length
                    "
                >
                    <span
                        class="tag-item"
                        v-for="item of activityData.activityLabelBOList"
                        :key="item.prices"
                        >{{ item.prices }}</span
                    >
                </div>
            </div>

            <button
                v-if="user.login"
                class="button"
                @click="openSpec('spec', $event)"
            >
                <div class="specification" v-if="goods.skuList.length">
                    <div class="specification__left">
                        <img
                            class="specification__img"
                            src="/static/goods/specification.png"
                            alt=""
                        />
                        <span class="specification__text">{{
                            spec ? "已选择" : "请选择"
                        }}</span>
                        <span
                            class="specification__text"
                            v-for="(item, index) in sepcTextLsit"
                            :key="index"
                            >{{ item }}</span
                        >
                    </div>
                    <i class="iconfont iconarrow specification__arrows"></i>
                </div>
            </button>
            <button
                v-if="!user.login"
                class="button"
                open-type="getUserInfo"
                lang="zh_CN"
                @getuserinfo="openSpec('spec', $event)"
            >
                <div class="specification" v-if="goods.skuList.length">
                    <div class="specification__left">
                        <img
                            class="specification__img"
                            src="/static/goods/specification.png"
                            alt=""
                        />
                        <span class="specification__text">{{
                            spec ? "已选择" : "请选择规格"
                        }}</span>
                        <span
                            class="specification__text"
                            v-for="(item, index) in sepcTextLsit"
                            :key="index"
                            >{{ item }}</span
                        >
                    </div>
                    <i class="iconfont iconarrow specification__arrows"></i>
                </div>
            </button>

            <div class="activity">
                <div class="info">
                    <my-image
                        :src="activityData.brandLogo"
                        class="shop-img"
                    ></my-image>
                    <div class="r">
                        <div class="main">
                            <div class="name">{{ activityData.brandName }}</div>
                            <div class="other">
                                <span class="tag"
                                    >{{
                                        activityData.onlineProductCount
                                    }}款</span
                                >

                                <span class="date">
                                    {{ activityData.endTime | viewDate2 }}</span
                                >
                            </div>
                        </div>
                        <span class="btn" @click="jumpList(activityData)"
                            >进入会场</span
                        >
                    </div>
                </div>
                <div class="good-list">
                    <section
                        class="good-item"
                        v-for="good of activityData.prods"
                        :key="good.pid"
                        @click="jumpDetail(good)"
                    >
                        <div class="box">
                            <my-image
                                mode="widthFix"
                                :src="good.pictureUrls[0]"
                                class="good-img"
                            ></my-image>
                            <div class="good-name">{{ good.name }}</div>
                            <div class="price">
                                ￥{{ good.minPrice | minuteToRmb2 }}
                            </div>
                            <div
                                class="tag-price"
                                v-if="
                                    good.maxPrice &&
                                    good.maxPrice !== good.minPrice
                                "
                            >
                                ￥{{ good.maxPrice | minuteToRmb2 }}
                            </div>
                        </div>
                    </section>
                </div>
            </div>

            <div class="describe" v-if="goods.itemInfo.desc">
                <!-- <div class="describe__title">商品描述</div> -->
                <ul class="describe__list">
                    <li class="describe__item">{{ goods.itemInfo.desc }}</li>
                </ul>
            </div>
            <ul id="a" class="nav">
                <li
                    class="nav__item"
                    :class="{ 'nav__item--active': nav === 'a' }"
                    @click="setNav('a')"
                >
                    图文详情
                </li>
            </ul>

            <div
                class="images"
                v-if="goods.detailUrlList && goods.detailUrlList.length"
            >
                <my-image
                    class="images__item"
                    mode="widthFix"
                    :src="item"
                    v-for="(item, index) in goods.detailUrlList"
                    :key="index"
                ></my-image>
            </div>

            <div class="images" v-else>
                <my-image
                    class="images__item"
                    mode="widthFix"
                    :src="item"
                    v-for="(item, index) in goods.pictureUrls"
                    :key="index"
                ></my-image>
            </div>

            <div class="explain">
                <ul class="explain-list">
                    <li class="item">
                        <div class="ex-des bold">划线价格</div>
                        <div class="ex-des">
                            商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，<span
                                class="bold"
                                >并非原价</span
                            >，仅供参考。
                        </div>
                    </li>
                    <li class="item">
                        <div class="ex-des bold">未划线价格</div>
                        <div class="ex-des">
                            商品的<span class="bold">实时标价</span
                            >，不因标书的差异改变性质，集体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。
                        </div>
                    </li>
                    <li class="item">
                        <div class="ex-des">
                            商家详情页（含主图）以图片或文字标注的一口价、促销价、优惠价等价格可能是在使用优惠券、满减或特定优惠活动和时段等情形下的价格，集体轻易结算页面的标价、优惠条件活动规则为准。
                        </div>
                    </li>
                    <li class="item">
                        <div class="ex-des">此说明仅当价格出现比较时有效。</div>
                    </li>
                </ul>
            </div>

            <div class="bg-white">
                <div class="everybody">- 大家都在买 -</div>
                <ul class="goods">
                    <li
                        class="goods__item"
                        v-for="(item, index) in goodsList"
                        :key="index"
                    >
                        <my-image
                            class="goods__img"
                            :src="item.pictureUrls[0]"
                            @click="jumpGoodsDetail(item)"
                        ></my-image>
                        <div
                            class="goods__title"
                            @click="jumpGoodsDetail(item)"
                        >
                            {{ item.name }}
                        </div>
                        <div
                            class="goods__coupon"
                            v-if="item.coupon"
                            @click="jumpGoodsDetail(item)"
                        >
                            {{ item.coupon }}
                        </div>
                        <div class="goods__price">
                            <div
                                class="goods__present"
                                @click="jumpGoodsDetail(item)"
                            >
                                <span class="goods__big"
                                    >¥{{ item.minPrice / 100 }}</span
                                >
                            </div>
                            <div
                                class="goods__original"
                                @click="jumpGoodsDetail(item)"
                                v-if="item.tagPrice !== 0"
                            >
                                {{ "¥" + item.tagPrice / 100 }}
                            </div>
                        </div>
                    </li>
                </ul>
                <div
                    class="more-text"
                    v-if="goodsList.length && !isHaveMore && goodListLoading"
                >
                    - 加载中 -
                </div>
                <div
                    class="more-text"
                    v-if="goodsList.length && !isHaveMore && !goodListLoading"
                >
                    - 没有更多了 -
                </div>
                <div class="null" v-if="loading && !goodsList.length">
                    <img
                        class="null__img"
                        src="/static/common/goods_null_2.jpg"
                        alt
                    />
                    <div class="null__title">抱歉！没有找到相关商品~</div>
                </div>
            </div>
        </scroll-view>

        <!--<div class="back" @click="jump({isTabBer: true, path: '/pages/index/index'})">返回首页</div>-->
        <div class="navigation" :class="{ 'navigation--iphoneX': iphoneX }">
            <ul class="navigation__list">
                <button class="button" open-type="contact">
                    <li class="navigation__item">
                        <i class="iconfont iconkefu navigation__icon"></i>
                        <div class="navigation__text">找客服</div>
                    </li>
                </button>
                <li
                    class="navigation__item"
                    @click="
                        jump({ isTabBer: true, path: '/pages/goods/index' })
                    "
                >
                    <i class="iconfont icondianpu navigation__icon"></i>
                    <div class="navigation__text">首页</div>
                </li>
                <li class="navigation__item">
                    <button v-if="user.login" class="button" @click="jumpCart">
                        <i class="iconfont icongouwuche navigation__icon"></i>
                        <div class="navigation__text">购物车</div>
                    </button>
                    <button
                        v-else
                        class="button"
                        lang="zh_CN"
                        open-type="getUserInfo"
                        @getuserinfo="jumpCart"
                    >
                        <i class="iconfont icongouwuche navigation__icon"></i>
                        <div class="navigation__text">购物车</div>
                    </button>
                    <div class="navigation__num" v-if="cartNum">
                        {{ cartNum }}
                    </div>
                </li>
            </ul>
            <div class="navigation__right">
                <button
                    v-if="user.login"
                    class="button"
                    @click="openSpec('cart', $event)"
                >
                    <div class="navigation__btn navigation__btn--cart">
                        加入购物车
                    </div>
                </button>
                <button
                    v-if="user.login"
                    class="button"
                    @click="openSpec('buy', $event)"
                >
                    <div class="navigation__btn">立即购买</div>
                </button>
                <button
                    v-if="!user.login"
                    class="button"
                    open-type="getUserInfo"
                    lang="zh_CN"
                    @getuserinfo="openSpec('cart', $event)"
                >
                    <div class="navigation__btn navigation__btn--cart">
                        加入购物车
                    </div>
                </button>
                <button
                    v-if="!user.login"
                    class="button"
                    open-type="getUserInfo"
                    lang="zh_CN"
                    @getuserinfo="openSpec('buy', $event)"
                >
                    <div class="navigation__btn">立即购买</div>
                </button>
                <div class="navigation__null" v-if="goods.totalInventory <= 0">
                    已售罄
                </div>
            </div>
        </div>
        <div
            class="canvas"
            v-show="canvasShow"
            @touchmove.stop=""
            @click="closeCanvas"
        >
            <div class="canvas__content">
                <div class="canvas__close">
                    <img
                        class="canvas__img"
                        src="/static/live/close.png"
                        alt=""
                    />
                </div>
                <canvas
                    class="canvas__box"
                    canvas-id="canvas"
                    :disable-scroll="true"
                    @click.stop="viewImg()"
                ></canvas>
            </div>
        </div>
        <my-share ref="share" @share="saveImage" :hideMany="true"></my-share>
        <g-spec ref="spec" :goods="goods" :spec.sync="spec"></g-spec>
        <!-- <g-coupon ref="coupon" :goods-id="goodsId"></g-coupon> -->
        <canvas
            class="canvas__forward"
            canvas-id="canvas2"
            :disable-scroll="true"
        ></canvas>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import GSpec from "./spec";
import MyShare from "../../components/share/index";
import config from "../../common/js/config";
let app = getApp();

export default {
    name: "",
    components: { MyImage, MyShare, GSpec },
    // 数据
    data() {
        return {
            roomId: "",
            videoId: "",
            goodsId: "",
            goods: "",
            nav: "a",
            scroll: "",
            cartNum: 0,
            spec: "",
            canvasShow: false,
            canvasHandleStatus: false,
            shoprRecommendList: [],
            couponText: "",
            canvasImgPath: "",

            deliveryConfig: null,
            layout: null,

            triggered: false,
            activityData: {},

            canvasforwardPath: "",

            page: 1,
            goodsList: [],
            loading: false,
            isHaveMore: false,
            goodListLoading: true,
        };
    },

    async onShow() {
        const self = this;
        console.log(1122);
        await self.fn.init();
        console.log("after");

        this.deliveryConfig = this.$store.state.common.storeConfig.deliveryConfig;
        self.fn.shareMenu();
        self.router.getScene(self.$mp.query).then((res) => {
            self.roomId = self.$mp.query.roomId || res.roomId;
            self.videoId = self.$mp.query.roomId || res.videoId;
            self.goodsId = self.$mp.query.goodsId || res.goodsId;
            self.getCartNumber();
            self.getGoodsDetail();
        });
    },

    onShareAppMessage() {
        const self = this;
        let obj = {
            ...self.$mp.query,
            // storeId: self.goods.storeInfo.storeId,
            shopId: this.activeShop.id,
            uid: this.user.user.id,
        };
        let title = self.goods.name;
        if (self.goods.skuList && self.goods.skuList.length) {
            title += " [" + self.goods.minPrice / 100 + "元起]";
        } else {
            title += " [" + self.goods.agentFee / 100 + "元]";
        }
        return {
            title: title,
            path: self.router.getPath(self.$mp.page.route, obj),
            imageUrl: self.canvasforwardPath || self.goods.pictureUrls[0],
        };
    },

    // 函数
    methods: {
        refresherrefresh() {
            const self = this;
            this.triggered = true;
            self.getCartNumber();
            self.getGoodsDetail();
        },

        // 获取商品详情
        getGoodsDetail() {
            const self = this;

            uni.showLoading({
                title: "加载中...",
            });
            self.api
                .get(
                    "/Product/GetHHSGProduct",
                    {
                        pid: self.goodsId,
                    },
                    {
                        pass: true,
                    }
                )
                .then((res) => {
                    uni.hideLoading();
                    self.triggered = false;
                    if (res.data) {
                        let data = JSON.parse(res.data);
                        self.goods = data;
                        self.getActivity(data.activityNo);
                        self.fn.setTitle(data.name);
                        console.log(self.goods);
                        self.creationShare2();
                        self.getGoodsList();
                        if (data.skuList && data.skuList.length === 1) {
                            self.spec = data.skuList[0];
                            self.spec.active = true;
                        }
                    } else {
                        self.fn
                            .showModal({
                                title: "商品已下架",
                                showCancel: false,
                            })
                            .then((res) => {
                                if (res.confirm) {
                                    self.router.push({
                                        path: "/pages/goods/index",
                                        isTabBer: true,
                                    });
                                }
                            });
                    }
                });
        },

        getActivity(aid) {
            this.api
                .get("/Product/GetActivity", {
                    aid: aid,
                })
                .then((res) => {
                    let data = JSON.parse(res.data);
                    this.activityData = data;
                });
        },

        // 修改导航
        setNav(val) {
            const self = this;

            self.nav = val;
            self.scroll = val;
        },

        // 获取购物车数量
        getCartNumber() {
            const self = this;
            self.api.get("/Order/GetCartCount").then((res) => {
                self.cartNum = res.data;
            });
        },

        // 打开规则选项
        openSpec(type, user) {
            const self = this;
            let userInfo = user.detail.userInfo;

            if (!self.user.login) {
                self.$refs.spec.open(type, (res) => {
                    if (type === "cart") {
                        self.getCartNumber();
                        self.fn.showToast("已成功加入购物车");
                    } else if (type === "buy") {
                        this.deliveryConfig = this.$store.state.common.storeConfig.deliveryConfig;
                        if (this.deliveryConfig) {
                            self.router.push({
                                path: "/pages/order/affirm",
                                query: {
                                    ids: res.data,
                                    productSource: 1,
                                },
                            });
                        } else {
                            self.fn
                                .showModal({
                                    title: "提示",
                                    content: "你还未选择店铺，请选择店铺后购买",
                                })
                                .then((modal) => {
                                    if (modal.confirm) {
                                        self.router.push({
                                            path: "/pages/index/index",
                                            isTabBer: true,
                                        });
                                    }
                                });
                        }
                    }
                });
            } else {
                if (userInfo) {
                    self.api
                        .post("/User/UpdateUserWechatInfo", userInfo)
                        .then(() => {
                            self.$store.commit("user/update", {
                                login: true,
                                userInfo: userInfo,
                            });
                        });

                    self.$refs.spec.open(type, (res) => {
                        if (type === "cart") {
                            self.getCartNumber();
                        } else if (type === "buy") {
                            this.deliveryConfig = this.$store.state.common.storeConfig.deliveryConfig;
                            if (this.deliveryConfig) {
                                self.router.push({
                                    path: "/pages/order/affirm",
                                    query: {
                                        ids: res.data,
                                        productSource: 1,
                                    },
                                });
                            } else {
                                self.fn
                                    .showModal({
                                        title: "提示",
                                        content:
                                            "你还未选择店铺，请选择店铺后购买",
                                    })
                                    .then((modal) => {
                                        if (modal.confirm) {
                                            self.router.push({
                                                path: "/pages/index/index",
                                                isTabBer: true,
                                            });
                                        }
                                    });
                            }
                        }
                    });
                } else {
                    self.fn.showToast("授权失败请重试");
                }
            }
        },

        jumpList(item) {
            this.router.replace({
                path: "/pages/recommend/list",
                query: {
                    aid: item.activityNo,
                },
            });
        },

        jumpDetail(good) {
            this.router.replace({
                path: "/pages/recommend/detail",
                query: {
                    goodsId: good.pid,
                },
            });
        },
        // 跳转到购物车
        jumpCart(user) {
            const self = this;
            let userInfo = user.detail.userInfo;

            if (self.user.login) {
                self.router.push({
                    isTabBer: true,
                    path: "/pages/cart/index",
                });
            } else {
                if (userInfo) {
                    if (!self.user.login) {
                        self.api
                            .post("/User/UpdateUserWechatInfo", userInfo)
                            .then(() => {
                                self.$store.commit("user/update", {
                                    login: true,
                                    userInfo: userInfo,
                                });
                            });
                    }
                    self.router.push({
                        isTabBer: true,
                        path: "/pages/cart/index",
                    });
                } else {
                    self.fn.showToast("授权失败请重试");
                }
            }
        },

        // 跳转到商品详情

        // 打开分享
        oprenShare() {
            const self = this;

            self.$refs.share.open(() => {
                self.canvasShow = false;
            });
        },

        // 获取换算成画布使用的像素
        getPx(size) {
            let windowWidth = uni.getSystemInfoSync().windowWidth || 414;
            let multiple = (windowWidth / 1080) * (920 / 670);
            size = size * multiple;

            return Number(size.toFixed(2));
        },

        viewImg() {
            let self = this;
            //查看图片
            uni.previewImage({
                urls: self.canvasImgPath,
                longPressActions: true,
            });
        },

        // 关闭海报
        closeCanvas() {
            const self = this;

            self.canvasShow = false;
        },

        // swiper切换
        swiperChange(e) {
            let videoContext = uni.createVideoContext("goodVideo");
            let index = e.detail.current;
            if (videoContext) {
                if (index === 0) {
                    videoContext.play();
                } else {
                    videoContext.pause();
                }
            }
        },

        kefuTel() {
            if (this.activeShop.managerTelephone) {
                uni.makePhoneCall({
                    phoneNumber: this.activeShop.managerTelephone,
                });
            } else {
                this.fn.showToast("当前店铺未设置客服手机号");
            }
        },

        // 保存图片到相册
        async saveImage(type) {
            const self = this;

            if (type === "single" && !self.canvasHandleStatus) {
                // 分享图
                self.canvasHandleStatus = true;
                // 获取用户设置
                uni.getSetting({
                    success(res) {
                        if (
                            res.authSetting["scope.writePhotosAlbum"] === false
                        ) {
                            //用户拒绝权限打开设置界面
                            self.fn
                                .showModal({
                                    title: "图片保存失败",
                                    content:
                                        "需要你打开允许使用“相册”权限，才能成功保存图片",
                                    confirmText: "去设置",
                                })
                                .then((res) => {
                                    if (res.confirm) {
                                        self.canvasHandleStatus = false;
                                        self.fn.openSetting();
                                    }
                                });
                        } else {
                            // 生成分享图
                            self.creationShare().then((res) => {
                                // 保存分享图到相册
                                uni.saveImageToPhotosAlbum({
                                    filePath: res,
                                    success: function () {
                                        self.fn.showToast("保存成功");
                                    },
                                    complete: function () {
                                        self.canvasHandleStatus = false;
                                    },
                                });
                            });
                        }
                    },
                });
            }
        },

        // 创建分享图
        creationShare() {
            const self = this;
            const ctx = uni.createCanvasContext("canvas", self);

            uni.showLoading({
                title: "正在生成海报",
            });

            return new Promise((resolve) => {
                let logoUrl =
                    "https://youxuan.ixiaokejia.com/home/forwardimg?url=" +
                    encodeURI(self.goods.pictureUrls[0]);
                let brandLogo =
                    "https://youxuan.ixiaokejia.com/home/forwardimg?url=" +
                    encodeURI(self.goods.brandLogo);
                self.api.get(logoUrl).then((logoRes) => {
                    self.api.get(brandLogo).then((brandLogoRes) => {
                        self.router.getScene(self.$mp.query).then((res) => {
                            res.uid = self.user.id;
                            res.shopId = self.activeShop.id;

                            Promise.all([
                                uni.getImageInfo({
                                    src: brandLogoRes.data,
                                }),
                                uni.getImageInfo({
                                    src: logoRes.data,
                                }),
                                // 获取小程序吗
                                self.api
                                    .get("/Share/GetQRCode", {
                                        path: self.$mp.page.route,
                                        paremeters: JSON.stringify(res),
                                    })
                                    .then((res) => {
                                        return uni.getImageInfo({
                                            src: res.data,
                                        });
                                    }),
                            ]).then((res) => {
                                // 背景
                                ctx.setFillStyle("#fff");
                                ctx.fillRect(
                                    0,
                                    0,
                                    self.getPx(670),
                                    self.getPx(1080)
                                );

                                // 头像
                                if (res[0][1].path) {
                                    let avatarurl_width = self.getPx(70);
                                    let avatarurl_heigth = self.getPx(70);
                                    let avatarurl_x = self.getPx(30);
                                    let avatarurl_y = self.getPx(40);
                                    ctx.save();
                                    ctx.beginPath();
                                    ctx.arc(
                                        avatarurl_width / 2 + avatarurl_x,
                                        avatarurl_heigth / 2 + avatarurl_y,
                                        avatarurl_width / 2,
                                        0,
                                        Math.PI * 2,
                                        true
                                    );
                                    ctx.clip();
                                    ctx.drawImage(
                                        res[0][1].path,
                                        avatarurl_x,
                                        avatarurl_y,
                                        avatarurl_width,
                                        avatarurl_heigth
                                    );
                                    ctx.restore();
                                }

                                // 昵称
                                ctx.setFontSize(self.getPx(28));
                                ctx.setFillStyle("#333");
                                ctx.fillText(
                                    self.goods.brandName,
                                    self.getPx(115),
                                    self.getPx(90)
                                );
                                ctx.stroke();

                                // // 商品图片
                                ctx.drawImage(
                                    res[1][1].path,
                                    self.getPx(0),
                                    self.getPx(145),
                                    self.getPx(670),
                                    self.getPx(670)
                                );

                                // 商品标题，第一行
                                let goodsName = self.goods.name;

                                if (goodsName.length > 12) {
                                    goodsName = goodsName.substr(0, 12);
                                }
                                ctx.setFontSize(self.getPx(28));
                                ctx.setFillStyle("#333");
                                ctx.fillText(
                                    goodsName,
                                    self.getPx(50),
                                    self.getPx(880)
                                );
                                ctx.stroke();

                                // 商品标题，第二行
                                let goodsName2 = self.goods.name;
                                if (goodsName2.length > 12) {
                                    goodsName2 =
                                        goodsName2.substr(12, 10) + "...";

                                    ctx.setFontSize(self.getPx(28));
                                    ctx.setFillStyle("#333");
                                    ctx.fillText(
                                        goodsName2,
                                        self.getPx(50),
                                        self.getPx(920)
                                    );
                                    ctx.stroke();
                                }

                                // 商品描述，第一行
                                let descName = self.goods.description;

                                if (descName.length > 14) {
                                    descName = descName.substr(0, 14);
                                }
                                ctx.setFontSize(self.getPx(24));
                                ctx.setFillStyle("#666");
                                ctx.fillText(
                                    descName,
                                    self.getPx(50),
                                    self.getPx(965)
                                );
                                ctx.stroke();

                                // 商品描述，第二行
                                let descName2 = self.goods.description;
                                if (descName2.length > 14) {
                                    descName2 =
                                        descName2.substr(14, 14) + "...";

                                    ctx.setFontSize(self.getPx(24));
                                    ctx.setFillStyle("#666");
                                    ctx.fillText(
                                        descName2,
                                        self.getPx(50),
                                        self.getPx(995)
                                    );
                                    ctx.stroke();
                                }

                                // 商品价格符号
                                ctx.setFontSize(self.getPx(20));
                                ctx.setFillStyle("#f8662a");
                                ctx.fillText(
                                    "¥",
                                    self.getPx(50),
                                    self.getPx(1050)
                                );
                                ctx.stroke();

                                // 商品价格
                                ctx.setFontSize(self.getPx(40));
                                ctx.setFillStyle("#f8662a");
                                ctx.fillText(
                                    self.goods.minPrice / 100,
                                    self.getPx(65),
                                    self.getPx(1050)
                                );
                                ctx.stroke();

                                // 小程序吗
                                ctx.drawImage(
                                    res[2][1].path,
                                    self.getPx(460),
                                    self.getPx(850),
                                    self.getPx(170),
                                    self.getPx(170)
                                );

                                // 长按扫码购买
                                ctx.setFontSize(self.getPx(24));
                                ctx.setFillStyle("#999");
                                ctx.fillText(
                                    "长按扫码购买",
                                    self.getPx(470),
                                    self.getPx(1050)
                                );
                                ctx.stroke();

                                ctx.draw();

                                self.canvasShow = true;
                                uni.hideLoading();
                                setTimeout(() => {
                                    // 生成临时路径
                                    uni.canvasToTempFilePath({
                                        canvasId: "canvas",
                                        fileType: "jpg",
                                        success: function (res) {
                                            // self.canvasShow = false
                                            console.log(res.tempFilePath, 2222);
                                            self.canvasImgPath = [
                                                res.tempFilePath,
                                            ];
                                            resolve(res.tempFilePath);
                                        },
                                    });
                                }, 100);
                            });
                        });
                    });
                });
            });
        },

        // 创建分享图
        creationShare2() {
            const self = this;
            const ctx = uni.createCanvasContext("canvas2", self);

            return new Promise((resolve) => {
                self.router.getScene(self.$mp.query).then((res) => {
                    res.uid = self.user.id;
                    res.shopId = self.activeShop.id;

                    Promise.all([
                        uni.getImageInfo({
                            src:
                                "https://oss.ixiaokejia.com/images/common/share_bg.jpg",
                        }),
                        uni.getImageInfo({
                            src:
                                "https://oss.ixiaokejia.com/images/common/share_bg_box.png",
                        }),
                        uni.getImageInfo({
                            src: self.goods.pictureUrls[0],
                        }),
                        uni.getImageInfo({
                            src:
                                "https://oss.ixiaokejia.com/images/common/share_tag1.jpg",
                        }),
                        uni.getImageInfo({
                            src:
                                "https://oss.ixiaokejia.com/images/common/share_tag2.png",
                        }),
                    ]).then((res) => {
                        // 背景
                        ctx.drawImage(res[0][1].path, 0, 0, 500, 400);

                        // 标题
                        ctx.setFontSize(28);
                        ctx.setFillStyle("#fff");
                        ctx.fillText("厂商直邮", 205, 40);
                        ctx.stroke();

                        ctx.setFontSize(24);
                        ctx.setFillStyle("#fff");
                        ctx.fillText("免费包邮，厂商快递直邮到家", 100, 75);
                        ctx.stroke();

                        // 背景box
                        ctx.drawImage(res[1][1].path, 10, 92, 477, 292);

                        // // 商品图片
                        ctx.drawImage(res[2][1].path, 20, 100, 275, 275);

                        // 特惠商品
                        ctx.drawImage(res[3][1].path, 310, 110, 157, 46);

                        ctx.setFontSize(28);
                        ctx.setFillStyle("#fff");
                        ctx.fillText("特惠商品", 330, 144);

                        // 价格
                        let minPrice = self.goods.minPrice / 100;
                        ctx.setFontSize(38);
                        ctx.setFillStyle("#f00");
                        ctx.fillText("￥" + minPrice, 320, 220);
                        ctx.stroke();

                        // 价格2
                        if (self.goods.tagPrice) {
                            let tagPrice = self.goods.tagPrice / 100;
                            ctx.setFontSize(28);
                            ctx.setFillStyle("#999");
                            ctx.fillText("￥" + tagPrice, 325, 265);
                            ctx.fillRect(
                                328,
                                253,
                                (String(tagPrice).length + 1) * 20,
                                2
                            );
                            ctx.stroke();
                        }

                        // buy
                        ctx.drawImage(res[4][1].path, 307, 300, 170, 70);

                        ctx.setFontSize(28);
                        ctx.setFillStyle("#fff");
                        ctx.fillText("立即购买", 335, 345);

                        ctx.draw();

                        setTimeout(() => {
                            // 生成临时路径
                            uni.canvasToTempFilePath({
                                canvasId: "canvas2",
                                fileType: "jpg",
                                success: function (res) {
                                    // self.canvasShow = false
                                    self.canvasforwardPath = res.tempFilePath;
                                },
                            });
                        }, 100);
                    });
                });
            });
        },

        // 获取商品列表
        getGoodsList() {
            const self = this;

            self.page = 1;
            uni.showLoading({
                title: "加载中...",
            });
            this.goodListLoading = true;
            self.api
                .get("/Product/GetRelevant", {
                    keyword: self.goods.name,
                    pageIndex: self.page,
                    pageSize: 20,
                })
                .then((res) => {
                    this.goodListLoading = false;
                    uni.hideLoading();
                    uni.stopPullDownRefresh();
                    let data = JSON.parse(res.data.list);
                    if (data.length) {
                        self.page++;
                    } else {
                        self.isHaveMore = false;
                    }

                    self.goodsList = data;
                    self.loading = true;
                    uni.hideLoading();
                });
        },

        // 获取更多商品
        getMoreGoods() {
            const self = this;
            this.goodListLoading = true;
            self.api
                .get("/Product/GetRelevant", {
                    keyword: self.goods.name,
                    pageIndex: self.page,
                    pageSize: 20,
                })
                .then((res) => {
                    this.goodListLoading = false;
                    let data = JSON.parse(res.data.list);
                    if (data.length) {
                        self.page++;
                    } else {
                        self.isHaveMore = false;
                    }

                    self.goodsList = self.goodsList.concat(data);
                });
        },

        // 跳转到商品详情
        jumpGoodsDetail(val) {
            const self = this;

            self.router.replace({
                path: "/pages/recommend/detail",
                query: {
                    goodsId: val.pid,
                },
            });
        },
    },

    // 数据计算
    computed: {
        activeShop() {
            return this.$store.state.common.activeShop;
        },
        // 判断主题  1:红色  2：绿色
        theme() {
            console.log(this.$store.state.common.theme, 111);
            return this.$store.state.common.theme;
        },
        user() {
            return this.$store.state.user;
        },
        distribution() {
            return this.$store.state.common.distribution;
        },
        sepcTextLsit() {
            const self = this;

            let list = [];

            if (self.spec) {
                list = [];
                list.push(self.spec.properties);
            }

            return list;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style>
page {
    height: 100%;
}
</style>

<style lang="scss" scoped>
.page {
    position: relative;
    height: 100%;

    &__scroll {
        position: absolute;
        top: 0;
        bottom: px(185);
        left: 0;
        right: 0;
        z-index: 1;

        &--iphoneX {
            bottom: px(215);
        }
    }
}

.swiper {
    width: 100%;
    height: px(1080);

    &__video {
        width: 100%;
        height: 100%;
    }

    &__img /deep/ img {
        width: px(1080);
        height: px(1080);
    }
}

.info {
    padding: px(40) 0 px(35) px(60);
    background-color: #fff;

    &__top {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    &__num {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(165);
        height: px(56);
        font-size: px(30);
        color: #27a34f;
        border-radius: px(28) 0 0 px(28);
        background-color: #f8f8f8;
    }

    &__share {
        margin-top: px(40);
        font-size: px(44);
        color: #999;
        font-weight: 600;
    }

    &__bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: px(50);
    }

    &__title {
        @include omits(2);
        flex: 1;
        padding-right: px(35);
        font-size: px(44);
        color: #333;
    }
}

.price {
    display: flex;
    align-items: baseline;

    &__present {
        color: #27a34f;
        font-weight: 600;
    }

    &__rmb {
        font-size: px(38);
    }

    &__big {
        margin-left: px(10);
        font-size: px(68);
    }

    &__original {
        position: relative;
        margin-left: px(30);
        font-size: px(32);
        color: #999;

        &:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            z-index: 1;
            width: 100%;
            height: px(1);
            transform: translateY(-100%);
            background-color: #999;
        }
    }
}

.share {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 px(60) 0 px(30);
    border-left: dashed px(3) #e7e7e7;

    &__icon {
        font-size: px(60);
        color: #262626;
    }
    &__img {
        width: px(50);
        height: px(50);
        object-fit: contain;
    }

    &__text {
        margin-top: px(10);
        font-size: px(30);
        color: #999;
    }
}

.specification {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: px(130);
    margin-top: px(30);
    padding: 0 px(60);
    background-color: #fff;

    &__left {
        display: flex;
        align-items: center;
    }

    &__img {
        width: px(34);
        height: px(34);
        margin-right: px(15);
    }

    &__text {
        margin-right: px(30);
        font-size: px(42);
        color: #333;
    }

    &__arrows {
        font-size: px(40);
        color: #999;
    }
}

.describe {
    // margin-top: px(30);
    padding: px(0) px(60) px(40);
    background-color: #fff;

    &__title {
        font-size: px(42);
        color: #333;
        font-weight: 700;
    }

    &__list {
        // margin-top: px(50);
    }

    &__item {
        // margin-top: px(15);
        font-size: px(36);
        color: #666;
    }
}

.nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: px(130);
    margin-top: px(30);
    background-color: #fff;

    &__item {
        font-size: px(44);
        color: #333;
        font-weight: 700;

        &:after {
            content: "";
            display: block;
            height: px(8);
            margin-top: px(20);
            background-color: #fff;
        }

        &--active {
            &:after {
                background-color: #333;
            }
        }
    }
}

.images {
    &__item /deep/ img {
        width: 100%;
    }
}

.recommend {
    margin-top: px(30);
    background-color: #fff;

    &__title {
        display: flex;
        align-items: center;
        padding: px(50) px(60);
        font-size: px(44);
        color: #333;
        font-weight: 700;
    }
}

.goods {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 px(25) px(30);

    &__item {
        width: px(500);
        padding-bottom: px(30);
        margin-top: px(25);
        overflow: hidden;
        border-radius: px(15);
        background-color: #fff;
        position: relative;

        &:nth-child(2n + 1) {
            margin-right: px(30);
        }
    }
    .button {
        // overflow: visible;
        // position: absolute;
        // bottom: 0;
        // right: 0;
        // z-index: 1;
        // padding: px(10) px(30) px(30) px(10);
    }
    .btns {
        overflow: visible;
        position: absolute;
        bottom: px(30);
        right: px(30);
        z-index: 1;
        display: flex;
        align-items: center;
    }
    .cart-num {
        // padding: px(30) px(10) px(10) px(30);
        padding: 0 px(30);
        box-sizing: border-box;
        min-width: px(60);
    }
    .num-input {
        overflow: visible;
        position: absolute;
        bottom: px(20);
        right: px(20);
        z-index: 1;
    }
    &__add-text {
        height: px(60);
        line-height: px(60);
        background-color: #27a34f;
        color: #fff;
        font-size: px(30);
        padding: 0 px(20);
        border-radius: px(30);
    }
    &__add {
        background-color: #27a34f;
        width: px(60);
        height: px(60);
        border-radius: 50%;
        // box-shadow: px(1) px(2) px(6) #27A34F;
        position: relative;
        &::after,
        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            width: 60%;
            height: px(6);
            border-radius: px(6);
            background: #fff;
        }
        &::after {
            transform: translate(-50%, -50%);
        }
        &::before {
            transform-origin: center;
            transform: translate(-50%, -50%) rotate(90deg);
        }
    }

    &__remove {
        background-color: #fff;
        width: px(60);
        height: px(60);
        border-radius: 50%;
        border: 1px solid #999;
        position: relative;
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            width: 60%;
            height: px(6);
            border-radius: px(6);
            background: #999;
            transform: translate(-50%, -50%);
        }
    }

    &__img /deep/ img {
        width: px(500);
        height: px(500);
    }

    &__title {
        @include omits(2);
        height: px(100);
        margin: px(20);
        font-size: px(40);
        color: #333;
    }

    &__coupon {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: px(40);
        padding: 0 px(15);
        margin: 0 px(20);
        font-size: px(30);
        color: #27a34f;
        border-radius: px(20);
        border: solid px(3) #27a34f;
    }

    &__price {
        display: flex;
        align-items: flex-end;
        padding: 0 px(20);
        margin-top: px(20);
    }

    &__present {
        color: #000;
    }

    &__rmb {
        font-size: px(30);
    }

    &__big {
        font-size: px(38);
        color: #27a34f;
    }

    &__original {
        position: relative;
        margin-left: px(20);
        font-size: px(32);
        color: #999;

        &:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            z-index: 1;
            width: 100%;
            height: px(1);
            transform: translateY(-100%);
            background-color: #999;
        }
    }
}

.live {
    position: fixed;
    bottom: px(420);
    right: px(30);
    z-index: 995;
    width: px(150);
    height: px(150);
}

.back {
    position: fixed;
    bottom: px(290);
    right: 0;
    z-index: 995;
    display: flex;
    justify-content: center;
    align-items: center;
    width: px(225);
    height: px(90);
    font-size: px(36);
    color: #fff;
    border-radius: px(45) 0 0 px(45);
    background-color: #505050;
}

.navigation {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 995;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: px(185);
    padding: 0 px(40);
    background-color: #fff;

    &--iphoneX {
        height: px(215);
        padding-bottom: px(30);
    }

    &__list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: px(400);
    }

    &__item {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    &__icon {
        font-size: px(54);
        color: #666;
    }

    &__text {
        margin-top: px(20);
        font-size: px(32);
        color: #666;
    }

    &__num {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: px(40);
        height: px(40);
        padding: 0 px(15);
        transform: translate(30%, -30%);
        font-size: px(26);
        color: #fff;
        border-radius: px(20);
        background-color: #ff4421;
    }

    &__right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        margin-left: px(40);
    }

    &__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(270);
        height: px(110);
        font-size: px(40);
        color: #fff;
        border-radius: px(55);
        background-color: #27a34f;

        &--cart {
            color: #262626;
            background-color: #e5e5e5;
        }
    }

    &__null {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: px(110);
        font-size: px(40);
        color: #fff;
        border-radius: px(55);
        background-color: #e5e5e5;
    }
}
.null {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: px(115);

    &__img {
        width: px(741);
        height: px(340);
    }

    &__title {
        margin-top: px(60);
        font-size: px(42);
        color: #666;
    }
}

.canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 996;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);

    &__content {
        position: relative;
        width: 100%;
        height: 100%;
        padding: px(200) px(80) 0;
        z-index: 10;
    }

    &__close {
        position: absolute;
        top: px(50);
        right: px(120);
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(100);
        height: px(100);
        border-radius: 50%;
        border: solid px(3) #fff;

        &:after {
            content: "";
            position: absolute;
            top: px(100);
            left: 50%;
            z-index: 1;
            display: block;
            width: px(3);
            height: px(50);
            transform: translateX(-50%);
            background-color: #fff;
        }
    }

    &__img {
        width: px(60);
        height: px(60);
    }

    &__box {
        width: px(920);
        height: px(1483);
        background-color: #fff;
    }
}
.canvas__forward {
    width: 500px;
    height: 400px;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    position: fixed;
    left: -999px;
    top: -999px;
    z-index: -1;
}

.shop-recommend {
    margin-top: px(30);
    background-color: #fff;

    &__title {
        padding: px(50) px(55) 0;
        font-size: px(44);
        color: #333;
        font-weight: 700;
    }

    &__swiper {
        height: px(540);
        padding: 0 px(55);
        margin-top: px(50);
    }
}

.shop-goods {
    display: flex;
    height: 100%;

    &__item {
        width: px(305);
        height: 100%;
        margin-left: px(27.5);

        &:first-child {
            margin-left: 0;
        }
    }

    &__img /deep/ img {
        width: px(305);
        height: px(305);
        border-radius: px(10);
    }

    &__title {
        @include omits(2);
        height: px(100);
        margin-top: px(20);
        font-size: px(36);
        color: #333;
        font-weight: 700;
    }

    &__price {
        margin-top: px(25);
        font-size: px(36);
        font-weight: 600;
    }
}

.coupon {
    height: px(240);
    padding: 0 px(55);
    margin-top: px(30);
    background-color: #fff;

    &__title {
        display: flex;
        align-items: center;
        height: px(130);
        font-size: px(42);
        color: #333;
        font-weight: 700;
        border-bottom: solid px(3) #f8f8f8;
    }

    &__content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: px(30);
    }

    &__left {
        display: flex;
        align-items: center;
        flex: 1;
        margin-right: px(30);
    }

    &__label {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(155);
        height: px(50);
        font-size: px(36);
        color: #f66829;
        border-radius: px(25);
        border: solid px(3) #f66829;
    }

    &__text {
        @include omit(px(620));
        flex: 1;
        margin-left: px(30);
        font-size: px(36);
        color: #f66829;
    }

    &__right {
        display: flex;
        align-items: baseline;
    }

    &__btn {
        font-size: px(36);
        color: #999;
    }

    &__arrows {
        margin-left: px(30);
        font-size: px(40);
        color: #999;
    }
}

.coupon-info {
    display: flex;
    align-items: center;
    margin-top: px(40);

    &__label {
        width: px(33);
        height: px(33);
    }

    &__text {
        margin-left: px(10);
        font-size: px(36);
        color: #666;
    }

    &__price {
        margin-left: px(15);
        font-size: px(36);
        color: #f66829;
    }
}

.page_red {
    .info__num {
        color: #27a34f;
    }
}
.special {
    margin-top: px(10);
    background-color: #fff;
    padding: px(40);
    color: #666;
    .tit {
        font-size: px(44);
        text-align: center;
    }
    .des {
        font-size: px(38);
        padding-top: px(20);
    }
}

.info__tag {
    margin-top: px(40);
    .tag-item {
        font-size: px(36);
        margin: 0 px(16) px(16) 0;
        padding: 0 px(7);
        display: inline-block;
        line-height: px(56);
        border: 1px solid #d9d9d9;
        border-radius: px(4);
        opacity: 1;
        transition: all 0.3s;
        white-space: nowrap;
        color: #fa8c16;
        background: #fff7e6;
        border-color: #ffd591;
    }
}
.activity {
    padding: px(30);
    background-color: #fff;
    border-top: 1px solid #f1f1f1;
    margin-top: px(30);
    & ~ .shop-item {
        margin-top: px(30);
    }
    .info {
        display: flex;
        justify-content: space-between;
        .shop-img {
            width: px(110);
            margin-right: px(30);
            border: 1px solid #fafafa;
            flex-shrink: 0;
            /deep/ img {
                width: px(110);
                height: px(110);
            }
        }
        .r {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .main {
                width: 100%;
            }
            .btn {
                color: #fff;
                background-color: $color;
                padding: px(15) px(25);
                flex-shrink: 0;
                font-size: px(38);
            }
            .name {
                font-size: px(40);
                @include omits(2);
            }
            .other {
                margin-top: px(10);
            }
            .tag {
                height: px(44);
                font-size: px(32);
                line-height: px(44);
                padding: 0 px(8);
                display: inline-block;
                margin-right: px(15);
                color: $color;
                border: 1px solid $color;
                border-radius: px(5);
            }
            .date {
                display: inline-block;
                margin-left: px(10);
                font-size: px(38);
                color: #666;
            }
        }
    }
    .good-list {
        margin: px(30) px(20) 0;
        display: flex;
        .good-item {
            width: 33.333333%;
            padding: 0 px(20);
        }
        .good-img {
            width: 100%;
            /deep/ img {
                width: 100%;
            }
        }
        .good-name {
            margin-top: px(20);
            font-size: px(40);
            @include omits(2);
        }
        .price {
            margin-top: px(20);
            color: $color;
            font-size: px(42);
        }
        .tag-price {
            margin-top: px(10);
            color: #999;
            line-height: 1;
            font-size: px(36);
            text-decoration: line-through;
        }
    }
}
.info__deliveryDesc {
    font-size: px(42);
    color: #666;
    display: block;
}
.explain {
    padding: px(60) px(40);
    background-color: #fff;
    .item {
        margin-bottom: px(30);
        line-height: 1.4;
        font-size: px(38);
        color: #666;
    }
    .ex-des:first-child {
        position: relative;
        &::after {
            content: "";
            display: block;
            width: px(14);
            height: px(14);
            border-radius: 50%;
            position: absolute;
            top: px(23);
            left: px(-20);
            z-index: 10;
            background-color: rgb(152, 81, 84);
        }
    }
    .ex-des ~ .ex-des {
        margin-top: px(10);
    }
}
.bold {
    font-weight: bold;
}
.more-text {
    display: flex;
    justify-content: center;
    padding-bottom: px(60);
    font-size: px(34);
    color: #999;
}
.bg-white {
    background-color: #fff;
    margin-top: px(30);
}
.everybody {
    text-align: center;
    padding: px(30);
    font-size: px(44);
}
</style>