<template>
    <div class="page shop-cart-page" :class="{ page_red: theme === 1 }">
        <div class="page__top">
            <div class="search">
                <i class="iconfont icontubiao- search__icon"></i>
                <input
                    class="search__text"
                    v-model="searchVal"
                    @confirm="search()"
                    type="text"
                    placeholder="搜索你想要的商品"
                />
                <i
                    class="iconfont iconclose_icon search__icon remove-icon"
                    @click="closeSearchVal"
                ></i>
            </div>
        </div>

        <div class="page__content">
            <div class="page__box">
                <div class="page__right">
                    <div class="goods">
                        <scroll-view
                            class="goods__scroll"
                            :scroll-y="true"
                            @scrolltolower="getMoreGoods"
                        >
                            <div class="a-info" v-if="activity">
                                <div class="head">
                                    <my-image
                                        class="a-img"
                                        :src="activity.brandLogo"
                                    ></my-image>
                                    <div class="head-con">
                                        <div class="a-name">
                                            {{ activity.brandName }}
                                        </div>
                                        <div class="tags">
                                            <span
                                                >{{
                                                    activity.onlineProductCount
                                                }}款</span
                                            >
                                            <span>正品保障</span>
                                            <span>包邮</span>
                                        </div>
                                        <div class="date">
                                            {{ activity.endTime | viewDate }}
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="info__tag"
                                    v-if="
                                        activity.activityLabelBOList &&
                                        activity.activityLabelBOList.length
                                    "
                                >
                                    <span
                                        class="tag-item"
                                        v-for="item of activity.activityLabelBOList"
                                        :key="item.prices"
                                        >{{ item.prices }}</span
                                    >
                                </div>
                                <div class="des" v-if="activity.description">
                                    <span class="key">说明：</span>
                                    <span
                                        class="val"
                                        @click="
                                            showContent(
                                                '说明',
                                                activity.description
                                            )
                                        "
                                        >{{ activity.description }}</span
                                    >
                                    <my-image
                                        class="arrow"
                                        src="/static/common/arrows_left.png"
                                    ></my-image>
                                </div>
                                <div class="des" v-if="activity.deliveryDesc">
                                    <span class="key">发货：</span
                                    ><span
                                        class="val"
                                        @click="
                                            showContent(
                                                '发货',
                                                activity.deliveryDesc
                                            )
                                        "
                                        >{{ activity.deliveryDesc }}</span
                                    ><my-image
                                        class="arrow"
                                        src="/static/common/arrows_left.png"
                                    ></my-image>
                                </div>
                                <div class="des" v-if="activity.service">
                                    <span class="key">服务：</span>
                                    <span
                                        class="val"
                                        @click="
                                            showContent(
                                                '服务',
                                                activity.service
                                            )
                                        "
                                    >
                                        {{ activity.service }}</span
                                    >
                                    <my-image
                                        class="arrow"
                                        src="/static/common/arrows_left.png"
                                    ></my-image>
                                </div>
                                <div class="a-btns">
                                    <span @click="setActivityTop(activity)">
                                        {{
                                            activity.top === 0
                                                ? "置顶"
                                                : "取消置顶"
                                        }}</span
                                    >
                                    <span @click="setActivityDisplay(activity)">
                                        {{
                                            activity.display === 1
                                                ? "隐藏"
                                                : "取消隐藏"
                                        }}</span
                                    >
                                    <span @click="pushGive(activity)">
                                        推送到群</span
                                    >
                                    <span @click="shareApp(activity)">
                                        分享</span
                                    >
                                </div>
                            </div>
                            <ul class="menu">
                                <li
                                    class="menu__item"
                                    :class="{
                                        'menu__item--active':
                                            sort === 0 || sort === -100,
                                    }"
                                    @click="setSort(0)"
                                >
                                    <div class="menu__text">综合</div>
                                    <div
                                        class="menu__sort"
                                        :class="{
                                            'menu__sort--up': sort === 0,
                                            'menu__sort--down': sort === -100,
                                        }"
                                    ></div>
                                </li>
                                <li
                                    class="menu__item"
                                    :class="{
                                        'menu__item--active':
                                            sort === 2 || sort === -2,
                                    }"
                                    @click="setSort(2)"
                                >
                                    <div class="menu__text">销量</div>
                                    <div
                                        class="menu__sort"
                                        :class="{
                                            'menu__sort--up': sort === 2,
                                            'menu__sort--down': sort === -2,
                                        }"
                                    ></div>
                                </li>
                                <li
                                    class="menu__item"
                                    :class="{
                                        'menu__item--active':
                                            sort === 1 || sort === -1,
                                    }"
                                    @click="setSort(1)"
                                >
                                    <div class="menu__text">价格</div>
                                    <div
                                        class="menu__sort"
                                        :class="{
                                            'menu__sort--up': sort === 1,
                                            'menu__sort--down': sort === -1,
                                        }"
                                    ></div>
                                </li>
                                <li
                                    class="menu__item"
                                    :class="{
                                        'menu__item--active':
                                            sort === 4 || sort === -4,
                                    }"
                                    @click="setSort(4)"
                                >
                                    <div class="menu__text">佣金</div>
                                    <div
                                        class="menu__sort"
                                        :class="{
                                            'menu__sort--up': sort === 4,
                                            'menu__sort--down': sort === -4,
                                        }"
                                    ></div>
                                </li>
                            </ul>
                            <ul class="goods__list">
                                <li
                                    class="goods__item"
                                    v-for="(item, index) in goodList"
                                    :key="index"
                                >
                                    <div class="main" @click="goDetail(item)">
                                        <my-image
                                            class="goods__img"
                                            :src="item.pictureUrls[0]"
                                        ></my-image>
                                        <div class="goods__info">
                                            <div class="goods__box">
                                                <div class="goods__title">
                                                    {{ item.name }}
                                                </div>
                                                <div class="goods__sale">
                                                    <span v-if="item.minPrice">
                                                        价格：￥{{
                                                            item.minPrice / 100
                                                        }}
                                                    </span>

                                                    <span
                                                        v-if="item.tagPrice"
                                                        class="text-line"
                                                    >
                                                        原价：￥{{
                                                            item.tagPrice / 100
                                                        }}
                                                    </span>
                                                </div>
                                                <div class="goods__sale">
                                                    <span
                                                        v-if="item.agentFee"
                                                        class="red"
                                                    >
                                                        赚：￥{{
                                                            item.agentFee / 100
                                                        }}
                                                    </span>

                                                    <span
                                                        v-if="
                                                            item.totalInventory
                                                        "
                                                    >
                                                        库存：{{
                                                            item.totalInventory
                                                        }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="btns">
                                        <div
                                            class="btn"
                                            @click="sharePoster(item)"
                                        >
                                            {{
                                                item.shareLoading
                                                    ? "生成中"
                                                    : "海报"
                                            }}
                                        </div>
                                        <div
                                            class="btn"
                                            @click="pushProduct(item)"
                                        >
                                            推荐
                                        </div>
                                        <div
                                            class="btn"
                                            @click="shareGoodFun(item)"
                                        >
                                            分享
                                        </div>
                                        <div
                                            class="btn"
                                            @click="openMore(item)"
                                        >
                                            更多
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div
                                class="more-text"
                                v-if="goodsList.length && !isHaveMore"
                            >
                                - 没有更多商品了 -
                            </div>
                            <div
                                class="null"
                                v-if="loading && !goodsList.length"
                            >
                                <img
                                    class="null__img"
                                    src="/static/common/goods_null.jpg"
                                    alt
                                />
                                <div class="null__title">
                                    抱歉！没有找到相关商品~
                                </div>
                            </div>
                        </scroll-view>
                    </div>
                </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>
        <!-- 描述 -->
        <div class="des-modal" v-if="desModalVisible">
            <div class="bg" @click="hideContent"></div>
            <div class="main">
                <div class="head">
                    <span class="head-tit">{{ desModalTitle }}</span>
                    <div class="head-r" @click="hideContent">关闭</div>
                </div>
                <div class="body">
                    {{ desModalDes }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import fn from "../../common/js/function";
export default {
    name: "",
    components: { MyImage },
    // 数据
    data() {
        return {
            aid: "",
            activity: {},
            goodList: [],
            goodPageIndex: 1,
            sort: 0,
            dataEnd: false,
            shopId: "",
            searchVal: "",
            otherUrl: "https://bot.ixiaokejia.com/",

            // 分享
            canvasShow: false,
            shareGood: {},
            shareRootLoading: false,
            shareLoadList: [],

            // 文字弹框
            desModalVisible: false,
            desModalTitle: "",
            desModalDes: "",
        };
    },
    filters: {
        viewDate(dateStr) {
            if (!dateStr) {
                return "";
            }
            if (isNaN(Date.parse(dateStr))) {
                return dateStr;
            }
            dateStr = dateStr.replace(/-/g, "/");
            let dateNow = Date.parse(dateStr);

            let mius = dateNow - Date.now();

            let minute = 1000 * 60;
            let hour = minute * 60;
            let day = hour * 24;
            let month = day * 30;
            let quarter = month * 3;
            let year = quarter * 12;
            if (mius < 0) {
                return `结束时间：${fn.dateFormat(dateStr, "MM-dd hh:mm")}`;
            } else if (mius < minute) {
                return `距结束还有${Math.floor(mius / 1000)}秒`;
            } else if (mius < hour) {
                return `距结束还有${Math.floor(mius / minute)}分钟`;
            } else if (mius < day) {
                return `距结束还有${Math.floor(mius / hour)}小时`;
            } else if (mius < month) {
                return `距结束还有${Math.floor(mius / day)}天`;
            } else if (mius < quarter) {
                return `结束时间：${fn.dateFormat(dateStr, "MM-dd hh:mm")}`;
            }
        },
    },

    onLoad(opts) {
        this.aid = opts.id;

        this.activity = this.$store.state.common.activityData;
        // console.log(this.activity)
        this.getGoods();
        this.getShopInfo();
    },

    async onShow() {},

    onPullDownRefresh() {},

    // 函数
    methods: {
        // 获取店铺信息
        getShopInfo() {
            this.api
                .get("/Shop/GetInfo", {}, { pass: true })
                .then((infoRes) => {
                    this.shopId = infoRes.data.id;
                });
        },
        // 设置排序
        setSort(val) {
            const self = this;

            if (val === this.sort) {
                if (val === 0) {
                    this.sort = -100;
                } else if (val === -100) {
                    this.sort = 0;
                } else {
                    this.sort = -this.sort;
                }
            } else {
                this.sort = val;
            }

            this.getGoods();
        },
        getGoods() {
            this.goodPageIndex = 1;
            this.dataEnd = false;
            let sendData = {
                aid: this.activity.activityNo,
                // keyword:'',
                // asc:'',升降序，0-倒序，1-正序
                // sortBy:''
                pageIndex: this.goodPageIndex++,
            };
            if (this.searchVal) {
                sendData.keyword = this.searchVal;
            }
            sendData = this.pushSort(sendData);

            uni.showLoading({
                title: "加载中...",
            });
            this.api.get("/Supplier/GetProductList", sendData).then((res) => {
                uni.hideLoading();
                this.goodList = res.data.data;
                // this.goodList = res.data.item2;
                if (!res.data.data.length) {
                    this.dataEnd = true;
                }
            });
        },
        getMoreGoods() {
            if (this.dataEnd) {
                return;
            }
            let sendData = {
                aid: this.activity.activityNo,
                // keyword:'',
                // asc:'',升降序，0-倒序，1-正序
                // sortBy:''
                pageIndex: this.goodPageIndex++,
            };
            if (this.searchVal) {
                sendData.keyword = this.searchVal;
            }
            sendData = this.pushSort(sendData);

            this.api.get("/Yx/GetProductList", sendData).then((res) => {
                this.goodList = [...this.goodList, ...res.data.data];
                if (!res.data.data.length) {
                    this.dataEnd = true;
                }
            });
        },
        // 搜索
        search() {
            if (this.searchVal) {
                this.getGoods();
            }
        },

        closeSearchVal() {
            this.searchVal = "";
            this.getGoods();
        },

        pushSort(sendData) {
            switch (this.sort) {
                case 0:
                    sendData.sortBy = 0;
                    sendData.asc = 1;
                    break;
                case -100:
                    sendData.sortBy = 0;
                    sendData.asc = 0;
                    break;
                case 1:
                    sendData.sortBy = 1;
                    sendData.asc = 1;
                    break;
                case -1:
                    sendData.sortBy = 1;
                    sendData.asc = 0;
                    break;
                case 2:
                    sendData.sortBy = 2;
                    sendData.asc = 1;
                    break;
                case -2:
                    sendData.sortBy = 2;
                    sendData.asc = 0;
                    break;
                case 4:
                    sendData.sortBy = 4;
                    sendData.asc = 1;
                    break;
                case -4:
                    sendData.sortBy = 4;
                    sendData.asc = 0;
                    break;
            }
            return sendData;
        },

        //  设置活动置顶
        setActivityTop(val) {
            if (val.top > 0) {
                // 取消置顶
                this.api
                    .get("/Yx/CancelActivityTop", {
                        aid: val.aid,
                    })
                    .then((res) => {
                        if (res.success) {
                            val.top = 0;
                            this.goodList.sort((x, y) => {
                                return y.top - x.top;
                            });
                            this.$forceUpdate();
                            this.fn.showToast("取消成功");
                        } else {
                            this.fn.showModal({
                                title: "设置失败",
                                content: res.message,
                                showCancel: false,
                            });
                        }
                    });
            } else {
                // 置顶
                this.api
                    .get("/Yx/SetActivityTop", {
                        aid: val.aid,
                    })
                    .then((res) => {
                        if (res.success) {
                            val.top = 1;
                            this.goodList.sort((x, y) => {
                                return y.top - x.top;
                            });
                            this.$forceUpdate();
                            this.fn.showToast("置顶成功");
                        } else {
                            this.fn.showModal({
                                title: "设置失败",
                                content: res.message,
                                showCancel: false,
                            });
                        }
                    });
            }
        },

        // 设置活动显示或隐藏
        setActivityDisplay(val) {
            let display = 0;
            if (val.display === 1) {
                // 隐藏
                display = 0;
            } else {
                // 置顶
                display = 1;
            }
            this.api
                .get("/Yx/SetActivityDisplay", {
                    aid: val.aid,
                    display,
                })
                .then((res) => {
                    if (res.success) {
                        val.display = display;
                        this.$forceUpdate();
                        this.fn.showToast("设置成功");
                    } else {
                        this.fn.showModal({
                            title: "设置失败",
                            content: res.message,
                            showCancel: false,
                        });
                    }
                });
        },

        // 推送
        pushGive(item) {
            let sendData = {
                aid: item.activityNo,
            };

            this.api
                .get("/Yx/SendActivity", sendData, {
                    pass: true,
                })
                .then((res) => {
                    let data = JSON.parse(res.data);
                    this.fn.showToast(data.message);
                });
        },

        // 分享
        shareApp(val) {
            uni.navigateToMiniProgram({
                appId: "wx7d16ba51271496b8",
                path: `/pages/recommend/list?shopId=${this.shopId}&aid=${val.activityNo}`,
                extraData: {
                    shopId: this.shopId,
                    aid: val.activityNo,
                },
            });
        },

        // 推荐商品
        pushProduct(item, type) {
            let sendData = {
                pid: item.id,
            };

            this.api
                .get("/Yx/Sendproduct", sendData, {
                    pass: true,
                })
                .then((res) => {
                    let data = JSON.parse(res.data);
                    this.fn.showToast(data.message);
                });
        },

        // 分享商品
        shareGoodFun(val) {
            uni.navigateToMiniProgram({
                appId: "wx7d16ba51271496b8",
                path: `/pages/recommend/detail?shopId=${this.shopId}&goodsId=${val.id}`,
                extraData: {
                    shopId: this.shopId,
                    id: val.id,
                },
            });
        },

        // 更多
        openMore(val) {
            let arr = [];
            if (val.top === 0) {
                arr.push("置顶");
            } else {
                arr.push("取消置顶");
            }
            this.fn.showActionSheet(arr).then((res) => {
                switch (arr[res]) {
                    case "置顶":
                        this.setProductTop(val, true);
                        break;
                    case "取消置顶":
                        this.setProductTop(val, false);
                        break;
                }
            });
        },

        // 商品置顶
        setProductTop(val, isUp) {
            if (isUp) {
                // 置顶
                this.api
                    .get("/Yx/SetProductTop", {
                        pid: val.id,
                    })
                    .then((res) => {
                        if (res.success) {
                            val.top = 99;
                            this.$forceUpdate();
                            this.fn.showToast("置顶成功");
                        } else {
                            this.fn.showModal({
                                title: "设置失败",
                                content: res.message,
                                showCancel: false,
                            });
                        }
                    });
            } else {
                // 取消置顶
                this.api
                    .get("/Yx/CancelProductTop", {
                        pid: val.id,
                    })
                    .then((res) => {
                        if (res.success) {
                            val.top = 0;
                            this.$forceUpdate();
                            this.fn.showToast("取消成功");
                        } else {
                            this.fn.showModal({
                                title: "设置失败",
                                content: res.message,
                                showCancel: false,
                            });
                        }
                    });
            }
        },

        // 去详情
        goDetail(val) {
            this.router.push({
                path: "/pages/youxuan/good-detail",
                query: {
                    id: val.id,
                },
            });
        },

        shareLoading(id, status) {
            for (let item of this.goodList) {
                if (item.id === id) {
                    item.shareLoading = status;
                }
            }
            this.goodList = [...this.goodList];
        },

        // 分享
        sharePoster(val) {
            if (val.shareLoading) {
                return;
            }
            if (this.shareRootLoading) {
                this.shareLoadList.push(val);
            }
            this.shareRootLoading = true;
            const self = this;
            this.shareLoading(val.id, true);
            // uni.showLoading({
            //     title: "加载中...",
            //     mask:true
            // });
            this.api.get("/Supplier/GetProduct", { id: val.id }).then((res) => {
                this.shareGood = JSON.parse(res.data);
                // uni.hideLoading();
                // self.$refs.share.open("", "", "", () => {
                //     self.canvasShow = false;
                // });
                this.saveImage("single");
            });
        },
        // 获取换算成画布使用的像素
        getPx(size) {
            let windowWidth = uni.getSystemInfoSync().windowWidth || 414;
            let multiple = (windowWidth / 1080) * (920 / 670);
            size = size * multiple;

            return Number(size.toFixed(2));
        },
        // 创建分享图
        creationShare() {
            const self = this;
            const ctx = uni.createCanvasContext("canvas", self);

            // uni.showLoading({
            //     title: "正在生成海报",
            //     mask:true
            // });
            return new Promise((resolve) => {
                self.router.getScene(self.$mp.query).then((res) => {
                    Promise.all([
                        uni.getImageInfo({
                            src:
                                this.user.appLogo ||
                                self.config.imageResourceUrl +
                                    "images/common/avatar.png",
                        }),
                        uni.getImageInfo({
                            src: self.shareGood.pictureUrls[0],
                        }),
                        // 获取小程序吗
                        self.api
                            .get("/Share/GetQRCode", {
                                path: "pages/recommend/detail",
                                paremeters: JSON.stringify({
                                    goodsId: self.shareGood.pid,
                                    shopId: this.shopId,
                                }),
                            })
                            .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.user.appName,
                            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.shareGood.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.shareGood.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.shareGood.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.shareGood.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.shareGood.agentFee / 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;
                                    self.canvasImgPath = [res.tempFilePath];
                                    resolve(res.tempFilePath);
                                },
                            });
                        }, 100);
                    });
                });
            });
        },
        viewImg() {
            let self = this;
            //查看图片
            uni.previewImage({
                urls: self.canvasImgPath,
                longPressActions: true,
            });
        },

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

            self.canvasShow = false;
        },
        // 创建多张分享图
        creationShares(url) {
            const self = this;
            const ctx = uni.createCanvasContext("canvas", self);

            return new Promise((resolve) => {
                self.router.getScene(self.$mp.query).then((res) => {
                    Promise.all([
                        uni.getImageInfo({
                            src:
                                this.user.avatar ||
                                self.config.imageResourceUrl +
                                    "images/common/avatar.png",
                        }),
                        uni.getImageInfo({
                            src: url,
                        }),
                        uni.getImageInfo({
                            src:
                                self.config.imageResourceUrl +
                                "resource/share/recognition.jpg",
                        }),
                        // 获取小程序吗
                        self.api
                            .get("/Share/GetQRCode", {
                                path: "pages/goods/detail",
                                paremeters: JSON.stringify({
                                    goodsId: self.shareGood.pid,
                                    shopId: this.shopId,
                                }),
                            })
                            .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.user.nickName + "分享一件好物给你~",
                            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)
                        );

                        // 底部图片
                        ctx.drawImage(
                            res[2][1].path,
                            self.getPx(30),
                            self.getPx(880),
                            self.getPx(400),
                            self.getPx(120)
                        );

                        // 小程序吗
                        ctx.drawImage(
                            res[3][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) {
                                    resolve(res.tempFilePath);
                                },
                            });
                        }, 100);
                    });
                });
            });
        },
        // 保存图片到相册
        async saveImage(type) {
            const self = this;
            const good = this.shareGood;
            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.shareEnd();
                                        self.fn.openSetting();
                                    } else {
                                        self.shareLoading(good.pid, false);
                                    }
                                });
                        } else {
                            // 生成分享图
                            self.creationShare().then((res) => {
                                // 保存分享图到相册
                                uni.saveImageToPhotosAlbum({
                                    filePath: res,
                                    success: function () {
                                        self.shareLoading(good.pid, false);
                                        self.shareEnd();
                                        self.fn.showToast("海报保存成功");
                                    },
                                    complete: function () {
                                        // self.shareLoading(
                                        //     good.baseInfo.id,
                                        //     false
                                        // );
                                        self.canvasHandleStatus = false;
                                        // self.shareEnd();
                                    },
                                });
                            });
                        }
                    },
                });
            } else {
                // 素材图
                let setting = await uni.getSetting();

                if (
                    setting[1].authSetting["scope.writePhotosAlbum"] === false
                ) {
                    //用户拒绝权限打开设置界面
                    self.fn
                        .showModal({
                            title: "图片保存失败",
                            content:
                                "需要你打开允许使用“相册”权限，才能成功保存图片",
                            confirmText: "去设置",
                        })
                        .then((res) => {
                            if (res.confirm) {
                                self.fn.openSetting();
                            }
                        });
                } else if (!self.canvasHandleStatus) {
                    let imageList = self.shareGood.images;
                    let num = imageList.length;

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

                    for (let i = 0; i < num; i++) {
                        let url = await self.creationShares(imageList[i]);

                        // 保存分享图到相册
                        uni.saveImageToPhotosAlbum({
                            filePath: url,
                            complete: function () {
                                if (i + 1 === num) {
                                    self.canvasHandleStatus = false;
                                    self.canvasShow = false;
                                    self.fn.showModal({
                                        title:
                                            "已经保存" +
                                            num +
                                            "张商品素材图到手机相册可在相册直接查看",
                                        showCancel: false,
                                        confirmText: "我知道了",
                                    });
                                }
                            },
                        });
                    }
                }
            }
        },

        shareEnd() {
            this.shareRootLoading = false;
            if (this.shareLoadList.length > 0) {
                let val = this.shareLoadList[0];
                this.shareLoadList.splice(0, 1);
                this.shareLoadList = [...this.shareLoadList];
                val.shareLoading = false;
                this.sharePoster(val);
            }
        },

        showContent(tit, con) {
            this.desModalVisible = true;
            this.desModalTitle = tit;
            this.desModalDes = con;
        },

        hideContent() {
            this.desModalVisible = false;
            this.desModalTitle = "";
            this.desModalDes = "";
        },
    },

    // 数据计算
    computed: {
        // 判断主题  1:红色  2：绿色
        theme() {
            return this.$store.state.common.theme;
        },
        user() {
            return this.$store.state.user.user;
        },
    },

    // 数据监听
    watch: {
        categoryId(val) {
            const self = this;
            self.getSubCategory(val);
        },
    },
};
</script>

<style>
page {
    height: 100%;
    background-color: #fff;
}
</style>

<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    height: 100%;

    &__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: px(145);
        padding: 0 px(50);
        background-color: #fff;
        // box-shadow: 0 px(-5) px(10) #333;
    }

    &__content {
        position: relative;
        flex: 1;
        margin-top: px(5);
    }

    &__box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        display: flex;
        justify-content: space-between;
    }

    &__right {
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;
    }
}

.search {
    display: flex;
    align-items: center;
    width: 100%;
    height: px(86);
    padding: 0 px(35);
    background-color: #f8f8f8;
    border-radius: px(43);

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

    &__text {
        margin-left: px(15);
        font-size: px(36);
        color: #999;
        width: 100%;
    }
}

.service {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

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

    &__text {
        font-size: px(30);
        color: #666;
    }
}

.category {
    width: px(225);
    height: 100%;
    background-color: #f8f6f7;

    &__item {
        position: relative;
        display: flex;
        justify-content: center;
        font-size: px(40);
        color: #888;
        background-color: #f8f6f7;
        padding: px(60) 0;

        &--active {
            // font-weight: 700;
            color: #333;
            background-color: #fff;
            &:before {
                content: "";
                position: absolute;
                top: 50%;
                left: 0;
                z-index: 1;
                display: block;
                width: px(8);
                height: 100%;
                transform: translateY(-50%);
                border-radius: px(4);
                background-color: #27a34f;
            }
        }
    }
}

.category-sub {
    position: relative;
    height: px(130);
    background-color: #fff;
    margin-right: px(140);
    margin-left: px(20);
    &__scroll {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }

    &__list {
        display: flex;
        align-items: center;
        height: 100%;
    }

    &__toggle {
        position: absolute;
        top: 0;
        right: px(-140);
        z-index: 2;
        width: px(140);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: px(30);
        transform: rotate(90deg);
        &.active {
            transform: rotate(-90deg);
        }
    }

    &__item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        height: 100%;
        font-size: px(34);
        width: px(220);
        color: #333;
        height: px(70);
        border-radius: px(35);
        background-color: #f6f6f6;
        border: 1px solid #f6f6f6;
        color: #888;
        margin: 0 px(10);
        &--active {
            color: #262626;
            background-color: rgba(39, 163, 79, 0.2);
            border: 1px solid #27a34f;
            color: #27a34f;
        }
    }
}

.category-sub-all {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 10;
    margin-top: px(130);
    &__bg {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }
    &__scroll {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
    }
    &__list {
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
        padding: px(60) px(40);
    }
    &__item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        height: 100%;
        font-size: px(34);
        width: px(220);
        color: #333;
        height: px(70);
        border-radius: px(35);
        background-color: #f6f6f6;
        border: 1px solid #f6f6f6;
        color: #888;
        margin: 0 px(20) px(30);
        flex-shrink: 0;
        &--active {
            color: #262626;
            background-color: rgba(39, 163, 79, 0.2);
            border: 1px solid #27a34f;
            color: #27a34f;
        }
    }
}

.goods {
    position: relative;
    flex: 1;
    border-top: 1px solid #f6f6f6;

    &__scroll {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        background-color: #fff;
    }

    &__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: px(35) 0 0 0;
        background-color: #fff;
        border-top: 3px solid #f1f1f1;
    }

    &__item {
        width: 100%;
        margin-bottom: px(60);
        border-bottom: 1px solid #f1f1f1;
    }
    .main {
        width: 100%;
        overflow: hidden;
        // border-radius: px(20) px(20) 0 0;
        display: flex;
        justify-content: space-between;
        padding: 0 px(35);
    }

    &__img {
        flex-shrink: 0;
        margin-right: px(30);
        /deep/ img {
            width: px(230);
            height: px(230);
        }
    }

    &__info {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        width: 100%;
    }

    &__box {
        width: 100%;
    }
    &__title {
        width: 100%;
        @include omits(2);
        max-height: px(88);
        line-height: px(48);
        margin-top: px(30);
        font-size: px(40);
        color: #333;
    }

    &__price {
        // margin-top: px(30);
    }
    &__sale {
        font-size: px(38);
        line-height: px(40);
        color: #666;
        margin-top: px(30);
        span ~ span {
            margin-left: px(40);
        }
    }

    &__present {
        font-size: px(36);
        color: #000;
        font-weight: 600;
    }

    &__original {
        position: relative;
        font-size: px(30);
        color: #999;
        margin-top: px(20);
        text-decoration: line-through;
        &:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            z-index: 1;
            width: 100%;
            height: px(1);
            transform: translateY(-100%);
            background-color: #999;
        }
    }
    .btns {
        overflow: visible;
        // position: absolute;
        // bottom: 0;
        // right: 0;
        // z-index: 1;
        width: 100%;
        display: flex;
        align-items: center;
        max-width: 100%;
        border-top: 1px solid #f1f1f1;
        margin-top: px(20);
    }
    .btn {
        width: 25%;
        height: px(100);
        line-height: px(100);
        // background-color: #27a34f;
        color: #333;
        font-size: px(40);
        padding: 0 px(20);
        text-align: center;
        & ~ .btn {
            border-left: 1px solid #f1f1f1;
        }
    }
    .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: 0;
        right: 0;
        z-index: 1;
    }

    &__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%);
        }
    }
}

.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: px(110);
    margin-bottom: px(5);
    padding: 0 px(85);
    background-color: #fff;
    // box-shadow: 0 px(-5) px(10) #333;

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

    &__text {
        font-size: px(36);
        color: #888;
    }

    &__item--active &__text {
        color: #27a34f;
    }

    &__sort {
        margin-left: px(15);

        &:before {
            display: block;
            content: "";
            width: 0;
            height: 0;
            margin-bottom: px(10);
            border-width: px(12);
            border-style: solid;
            border-color: transparent transparent #ccc transparent;
        }

        &:after {
            display: block;
            content: "";
            width: 0;
            height: 0;
            border-width: px(12);
            border-style: solid;
            border-color: #ccc transparent transparent transparent;
        }

        &--up:before {
            border-color: transparent transparent #27a34f transparent;
        }

        &--down:after {
            border-color: #27a34f transparent transparent transparent;
        }
    }
}

.more-text {
    display: flex;
    justify-content: center;
    padding-bottom: px(60);
    font-size: px(34);
    color: #999;
}

.null {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: px(115);

    &__img {
        width: px(576);
        height: px(281);
    }

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

.page_red {
    /deep/ {
        .category {
            &__item {
                &--active {
                    &:before {
                        background-color: #fe6661;
                    }
                }
            }
        }
        .category-sub {
            &__item {
                &--active {
                    background-color: rgba(254, 102, 97, 0.2);
                    border: 1px solid #fe6661;
                    color: #fe6661;
                }
            }
        }
        .category-sub-all {
            &__item {
                &--active {
                    color: #262626;
                    background-color: rgba(254, 102, 97, 0.2);
                    border: 1px solid #fe6661;
                    color: #fe6661;
                }
            }
        }
        .goods {
            &__add-text {
                background-color: #fe6661;
            }
            &__add {
                background-color: #fe6661;
                box-shadow: px(1) px(2) px(6) #fe6661;
            }
        }

        .menu {
            .menu__item--active .menu__text {
                color: #fe6661;
            }

            &__sort {
                &--up:before {
                    border-color: transparent transparent #fe6661 transparent;
                }

                &--down:after {
                    border-color: #fe6661 transparent transparent transparent;
                }
            }
        }
    }
}
.item_one {
    border-bottom: 3px solid #c9c9c9;
    background-color: #efefef;
    padding: px(20) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.switch {
    transform: scale(0.7);
}
.canvas {
    position: fixed;
    top: -100%;
    left: -100%;
    z-index: -11;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    &__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;
    }
}
.remove-icon {
    padding-left: px(20);
}
.quick-add {
    font-size: px(44);
    color: rgb(0, 188, 38);
    flex-shrink: 0;
    margin-right: px(30);
}

.a-info {
    background-color: #fff;
    margin: 0 px(30) px(50);
    border-radius: px(5);
    padding: px(30);
    .head {
        display: flex;
        justify-content: space-between;
        .a-img {
            display: block;
            width: px(180);
            flex-shrink: 0;
            margin-right: px(30);
            border: 1px solid #f1f1f1;
            border-radius: px(5);
            /deep/ img {
                height: px(180);
                width: px(180);
            }
        }
        .head-con {
            width: 100%;
        }
        .a-name {
            font-size: px(44);
            @include omits(2);
        }
    }
    .date {
        color: #666;
        font-size: px(40);
        margin-top: px(10);
    }
    .des {
        margin-top: px(30);
        font-size: px(40);
        line-height: 1.5;
        color: #888;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        line-height: px(60);

        & ~ .des {
            margin-top: px(10);
        }
        .key {
            color: #333;
            width: px(130);
            flex-shrink: 0;
        }
        .val {
            width: 100%;
            @include omits(2);
        }
        .arrow {
            width: px(40);
            height: px(40);
            margin-left: px(10);
            flex-shrink: 0;
            transform: rotate(180deg) translate(0, -3px);
            /deep/ img {
                width: px(40);
                height: px(40);
            }
        }
    }
    .tags {
        display: flex;
        align-items: center;
        color: #666;
        font-size: px(40);
        margin-top: px(20);
        span ~ span {
            margin-left: px(40);
        }
    }
}
.a-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: px(30);
    span {
        padding: px(20);
        min-width: px(150);
        height: px(60);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #f1f1f1;
        border-radius: px(10);
        font-size: px(40);
    }
}
.des-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    .bg {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .head-r {
        font-size: px(40);
        color: #666;
    }
    .main {
        max-height: 80vh;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 100;
        background-color: #fff;
    }
    .head {
        height: px(120);
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f1f1f1;
        padding: 0 px(40);
    }
    .body {
        padding: px(60) px(40);
        font-size: px(44);
        line-height: 1.5;
        text-indent: 2em;
    }
}
.text-line {
    text-decoration: line-through;
}
.blod {
    font-weight: bold;
}
.red {
    color: #ff4b26;
}
.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;
    }
}
</style>