<template>
    <div class="page shop-cart-page" :class="{ page_red: theme === 1 }">
        <div class="search">
            <input
                class="search__input"
                type="text"
                :focus="true"
                v-model="keyword"
                @confirm="confirmSearch"
                placeholder="搜索本店商品"
            />
            <div class="search__cancel" @click="confirmSearch">搜索</div>
        </div>

        <div class="page-tab">
            <div
                class="tab-item"
                :class="{ on: curTab === '2' }"
                @click="tabClick('2')"
            >
                店铺商品
            </div>
            <div
                class="tab-item"
                :class="{ on: curTab === '0' }"
                @click="tabClick('0')"
            >
                直邮商品
            </div>
            <div
                class="tab-item"
                :class="{ on: curTab === '1' }"
                @click="tabClick('1')"
            >
                直邮活动
            </div>
        </div>

        <scroll-view
            class="page__scroll"
            :scroll-y="true"
            @scrolltolower="getMore"
        >
            <div v-if="curTab === '2'">
                <ul class="menu">
                    <li
                        class="menu__item"
                        :class="{
                            'menu__item--active': shopGoodSort === 'SaleDesc',
                        }"
                        @click="shopGoodSetSort('SaleDesc')"
                    >
                        <div class="menu__text">销量</div>
                    </li>
                    <li
                        class="menu__item"
                        :class="{
                            'menu__item--active': shopGoodSort === 'NewDesc',
                        }"
                        @click="shopGoodSetSort('NewDesc')"
                    >
                        <div class="menu__text">新品</div>
                    </li>
                    <li
                        class="menu__item"
                        :class="{
                            'menu__item--active':
                                shopGoodSort === 'Price' ||
                                shopGoodSort === 'PriceDesc',
                        }"
                        @click="shopGoodSetSort('Price')"
                    >
                        <div class="menu__text">价格</div>
                        <div
                            class="menu__sort"
                            :class="{
                                'menu__sort--up': shopGoodSort === 'Price',
                                'menu__sort--down':
                                    shopGoodSort === 'PriceDesc',
                            }"
                        ></div>
                    </li>
                </ul>
                <ul class="goods">
                    <li
                        class="goods__item"
                        v-for="(item, index) in shopGoodsList"
                        :key="index"
                    >
                        <my-image
                            class="goods__img"
                            :src="item.image"
                            @click="jumpShopGoodsDetail(item)"
                        ></my-image>
                        <div
                            class="goods__title"
                            @click="jumpShopGoodsDetail(item)"
                        >
                            {{ item.name }}
                        </div>
                        <div
                            class="goods__coupon"
                            v-if="item.coupon"
                            @click="jumpShopGoodsDetail(item)"
                        >
                            {{ item.coupon }}
                        </div>
                        <div class="goods__price">
                            <div
                                class="goods__present"
                                @click="jumpShopGoodsDetail(item)"
                            >
                                <span class="goods__rmb">¥</span>
                                <span class="goods__big">{{
                                    item.price / 100
                                }}</span>
                            </div>
                            <div
                                class="goods__original"
                                @click="jumpShopGoodsDetail(item)"
                                v-if="item.tagPrice !== 0"
                            >
                                {{ "¥" + item.tagPrice / 100 }}
                            </div>
                        </div>
                        <!-- 登录 -->
                        <div class="btns">
                            <block
                                v-if="
                                    user.login && !item.skus.length && item.cart
                                "
                            >
                                <button
                                    class="button button2"
                                    @click.stop="setCaetNum(item)"
                                >
                                    <div class="goods__remove"></div>
                                </button>
                                <span class="cart-num">{{
                                    item.cart.count
                                }}</span>
                            </block>
                            <button
                                v-if="user.login && !item.skus.length"
                                class="button"
                                @click.stop="addSpec(item, 'cart', $event)"
                            >
                                <div class="goods__add"></div>
                            </button>
                            <button
                                v-else-if="user.login && item.skus.length"
                                class="button"
                                @click.stop="openSpec(item, 'cart', $event)"
                            >
                                <div class="goods__add-text">选规格</div>
                            </button>
                            <!-- <f-input-number
                            class="num-input"
                            v-else-if="ifCart(item)"
                            v-model="ifCart(item).count"
                            :showMinText="false"
                            :mini="true"
                            :max="ifCart(item).stock"
                            @change="setCaetNum(item, $event)"
                        ></f-input-number> -->
                            <!-- 未登录 -->
                            <button
                                v-if="!user.login && !item.skus.length"
                                class="button"
                                open-type="getUserInfo"
                                lang="zh_CN"
                                @getuserinfo.stop="
                                    openSpec(item, 'cart', $event)
                                "
                            >
                                <div class="goods__add"></div>
                            </button>
                            <button
                                v-if="!user.login && item.skus.length"
                                class="button"
                                lang="zh_CN"
                                open-type="getUserInfo"
                                @getuserinfo.stop="
                                    openSpec(item, 'cart', $event)
                                "
                            >
                                <div class="goods__add-text">选规格</div>
                            </button>
                        </div>
                    </li>
                </ul>
                <div
                    class="more-text"
                    v-if="shopGoodsList.length && !isHaveMore"
                >
                    - 没有更多了 -
                </div>
                <div class="null" v-if="loading && !shopGoodsList.length">
                    <img
                        class="null__img"
                        src="/static/common/goods_null_2.jpg"
                        alt
                    />
                    <div class="null__title">抱歉！没有找到相关商品~</div>
                </div>
                <g-spec-modal
                    ref="spec"
                    :goods="goods"
                    :spec="'cart'"
                    @change="modalCartChange()"
                ></g-spec-modal>
                <shop-cart ref="shopCart"></shop-cart>
            </div>

            <div v-if="curTab === '0'">
                <ul class="menu">
                    <li
                        class="menu__item"
                        :class="{ 'menu__item--active': sort === 2 }"
                        @click="setSort(2)"
                    >
                        <div class="menu__text">销量</div>
                    </li>
                    <li
                        class="menu__item"
                        :class="{ 'menu__item--active': sort === 3 }"
                        @click="setSort(3)"
                    >
                        <div class="menu__text">新品</div>
                    </li>
                    <li
                        class="menu__item"
                        :class="{
                            'menu__item--active': sort === 1,
                        }"
                        @click="setSort('Price')"
                    >
                        <div class="menu__text">价格</div>
                        <div
                            class="menu__sort"
                            :class="{
                                'menu__sort--up': asc == 1 && sort === 1,
                                'menu__sort--down': asc == 0 && sort === 1,
                            }"
                        ></div>
                    </li>
                </ul>
                <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__rmb">¥</span>
                                <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">
                    - 没有更多了 -
                </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>
            <div v-if="curTab === '1'">
                <ul class="shop-list">
                    <li
                        class="shop-item"
                        v-for="item of activityList"
                        :key="item.aid"
                    >
                        <div class="info" @click="jumpList(item)">
                            <my-image
                                :src="item.brandLogo"
                                class="shop-img"
                            ></my-image>
                            <div class="r">
                                <div class="main">
                                    <div class="name">{{ item.brandName }}</div>
                                    <div class="other">
                                        <span class="tag"
                                            >{{
                                                item.onlineProductCount
                                            }}款</span
                                        >

                                        <span class="date"
                                            >{{
                                                item.beginTime | timestampToDate
                                            }}
                                            —
                                            {{
                                                item.endTime | timestampToDate
                                            }}</span
                                        >
                                    </div>
                                </div>
                                <span class="btn">进入会场</span>
                            </div>
                        </div>
                        <div class="good-list">
                            <section
                                class="good-item"
                                v-for="good of item.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>
                    </li>
                </ul>
                <div
                    class="more-text"
                    v-if="activityList.length && !isHaveMore"
                >
                    - 没有更多了 -
                </div>
                <div class="null" v-if="loading && !activityList.length">
                    <img
                        class="null__img"
                        src="/static/common/goods_null_2.jpg"
                        alt
                    />
                    <div class="null__title">抱歉！没有找到相关商品~</div>
                </div>
            </div>
        </scroll-view>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import FInputNumber from "../../components/form/inputNumber";
import ShopCart from "../../components/shop-cart/index";
import GSpec from "./spec";
import GSpecModal from "./specModal";

export default {
    name: "",
    components: { MyImage, FInputNumber, ShopCart, GSpec, GSpecModal },
    // 数据
    data() {
        return {
            keyword: "", // 标题（搜索关键字）
            page: 1, // 页码
            activityList: [],
            goodsList: [],
            isHaveMore: true, // 是否有更多数据
            loading: false, // 是否加载完成
            goods: null, // 详情数据 加入购物车时用
            curTab: "0",
            sort: -1, // 排序
            asc: 1,

            shopGoodAsc: -1,
            shopGoodSort: -1,
            shopGoodsList: [],
            cartList: [],
        };
    },

    onLoad(opts) {
        const self = this;
        self.fn.shareMenu();
        console.log(opts);
        self.curTab = opts.curTab || "0";

        if (!self.loading) {
            uni.showLoading({
                title: "加载中...",
            });
        }
    },

    async onShow() {
        const self = this;

        await self.fn.init();
        self.fn.shareMenu();
        if (self.$mp.query.title) {
            self.keyword = decodeURIComponent(self.$mp.query.title);
        }
        self.fn.setTitle(self.keyword);
        this.tabClick(self.curTab);
    },

    onShareAppMessage() {
        const self = this;
        let obj = {
            ...self.$mp.query,
            shopId: this.activeShop.id,
            uid: this.user.user.id,
        };
        if (self.keyword) {
            obj.title = self.keyword;
        }

        if (this.activeShop.store) {
            obj.storeId = this.activeShop.store.id;
        }
        console.log(self.router.getPath(self.$mp.page.route, obj), 111);
        return {
            title: self.siteTitle,
            path: self.router.getPath(self.$mp.page.route, obj),
        };
    },

    onPullDownRefresh() {
        const self = this;
        if (self.curTab === "0") {
            this.getGoodsList();
        } else if (self.curTab === "1") {
            self.getActivityList();
        } else {
            self.getShopGoodsList();
            this.getCartLsit();
        }
    },

    // 函数
    methods: {
        confirmSearch() {
            this.fn.setTitle(this.keyword);
            if (this.curTab === "0") {
                this.getGoodsList();
            } else if (this.curTab === "1") {
                this.getActivityList();
            } else {
                this.getShopGoodsList();
                this.getCartLsit();
            }
        },

        tabClick(val) {
            this.curTab = val;
            if (val === "0") {
                this.getGoodsList();
            } else if (this.curTab === "1") {
                this.getActivityList();
            } else {
                this.getShopGoodsList();
                this.getCartLsit();
            }
        },

        getMore() {
            const self = this;
            if (self.curTab === "0") {
                this.getMoreGoods();
            } else if (self.curTab === "1") {
                self.getMoreActivity();
            } else {
                this.getShopMoreGoods();
                this.getCartLsit();
            }
        },
        // 设置排序
        shopGoodSetSort(val) {
            const self = this;

            if (val === "Price") {
                self.shopGoodSort = 1;
                self.shopGoodAsc = self.asc === 1 ? 0 : 1;
            } else {
                self.shopGoodAsc = 0;
                self.shopGoodSort = val;
            }
            this.$forceUpdate();

            self.getShopGoodsList();
        },
        // 设置排序
        setSort(val) {
            const self = this;

            if (val === "Price") {
                self.sort = 1;
                self.asc = self.asc === 1 ? 0 : 1;
            } else {
                self.asc = 0;
                self.sort = val;
            }
            this.$forceUpdate();

            self.getGoodsList();
        },

        // 获取活动列表
        getActivityList() {
            const self = this;

            let keyword = self.keyword;

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

                    self.activityList = list;
                    self.loading = true;
                    uni.hideLoading();
                });
        },

        // 获取更多活动
        getMoreActivity() {
            const self = this;

            self.api
                .get("/Product/SearchActivity", {
                    keyword: self.keyword,
                    pageIndex: self.page,
                    pageSize: 20,
                })
                .then((res) => {
                    let list = JSON.parse(res.data.list);
                    if (list.length) {
                        self.page++;
                    } else {
                        self.isHaveMore = false;
                    }

                    self.activityList = self.activityList.concat(list);
                });
        },

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

            self.page = 1;
            uni.showLoading({
                title: "加载中...",
            });
            self.api
                .get("/Product/Search", {
                    asc: this.asc,
                    sortBy: self.sort,
                    keyword: self.keyword,
                    pageIndex: self.page,
                    pageSize: 20,
                })
                .then((res) => {
                    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;

            self.api
                .get("/Product/Search", {
                    asc: this.asc,
                    sortBy: self.sort,
                    keyword: self.keyword,
                    pageIndex: self.page,
                    pageSize: 20,
                })
                .then((res) => {
                    let data = JSON.parse(res.data.list);
                    if (data.length) {
                        self.page++;
                    } else {
                        self.isHaveMore = false;
                    }

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

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

        jumpDetail(good) {
            console.log(good);
            this.router.push({
                path: "/pages/recommend/detail",
                query: {
                    goodsId: good.pid,
                },
            });
        },
        // 跳转到商品详情
        jumpGoodsDetail(val) {
            const self = this;

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

        jumpShopGoodsDetail(val) {
            const self = this;

            self.router.push({
                path: "/pages/goods/detail",
                query: {
                    goodsId: val.id,
                },
            });
        },

        setCaetNum(item) {
            item.cart.count--;
            let num = item.cart.count;
            const self = this;
            if (num > 0) {
                self.api
                    .post("/Order/UpdateItemCount", {
                        id: item.cart.id,
                        count: num,
                    })
                    .then(() => {
                        self.$refs.shopCart.refresh();
                    });
            } else {
                let id = item.cart.id;
                delete item.cart;
                self.api
                    .delete("/Order/RemoveCart", {
                        ids: [id],
                    })
                    .then(() => {
                        self.$refs.shopCart.refresh();
                    });
            }
        },

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

            this.getDetail(item, () => {
                if (self.user.login) {
                    self.$refs.spec.num = 1;
                    self.$refs.spec.open(type, (res) => {
                        if (type === "cart") {
                            // self.fn.showToast("已成功加入购物车");
                            self.$refs.shopCart.refresh();
                        } else if (type === "buy") {
                            self.router.push({
                                path: "/pages/order/affirm",
                                query: {
                                    ids: res.data,
                                },
                            });
                        }
                    });
                } else {
                    if (userInfo) {
                        if (!self.user.login) {
                            self.api
                                .post("/User/UpdateUserWechatInfo", userInfo)
                                .then(() => {
                                    self.$store.commit("user/update", {
                                        login: true,
                                        userInfo: userInfo,
                                    });
                                });
                        }

                        self.$refs.spec.num = 1;
                        self.$refs.spec.open(type, (res) => {
                            if (type === "cart") {
                                // self.fn.showToast("已成功加入购物车");
                                self.$refs.shopCart.refresh();
                            } else if (type === "buy") {
                                self.router.push({
                                    path: "/pages/order/affirm",
                                    query: {
                                        ids: res.data,
                                    },
                                });
                            }
                        });
                    } else {
                        self.fn.showToast("授权失败请重试");
                    }
                }
            });
        },

        // 添加购物车
        addSpec(item) {
            const self = this;
            if (item.cart) {
                item.cart.count++;
                self.api
                    .post("/Order/UpdateItemCount", {
                        id: item.cart.id,
                        count: item.cart.count,
                    })
                    .then(() => {
                        self.$refs.shopCart.refresh();
                    })
                    .catch((res) => {
                        this.getCartLsit();
                    });
            } else {
                self.api
                    .post("/Order/AddCart", {
                        productId: item.id,
                        count: 1,
                    })
                    .then((res) => {
                        // self.fn.showToast("已成功加入购物车");
                        self.$refs.shopCart.refresh();
                    })
                    .catch((res) => {
                        this.getCartLsit();
                    });
            }
        },
        // 获取购物车列表
        getCartLsit() {
            const self = this;

            self.api
                .get("/Order/GetCartList", {
                    pageIndex: 1,
                    pageSize: 100,
                })
                .then((res) => {
                    res.data.forEach((item) => {
                        item.price = item.priceFmt;
                        item.active =
                            item.stock >= item.count &&
                            item.productStatus === 1;
                    });
                    self.cartList = res.data;
                    this.setShopGoodsList();
                });
        },
        setShopGoodsList() {
            // 删除全部
            for (let item of this.shopGoodsList) {
                item.cart = null;
            }
            // 重新赋值
            for (let item of this.shopGoodsList) {
                for (let cart of this.cartList) {
                    if (cart.productId === item.id) {
                        if (item.skus.length === 0) {
                            item.cart = cart;
                        } else {
                            if (item.cart) {
                                item.cart.push(cart);
                            } else {
                                item.cart = [cart];
                            }
                        }
                    }
                }
            }
            this.shopGoodsList = [...this.shopGoodsList];
        },
        modalCartChange() {
            this.$refs.shopCart.refresh();
        },

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

            let keyword = !self.categoryId && !self.brandId ? self.title : "";

            self.page = 1;
            uni.showLoading({
                title: "加载中...",
            });
            self.api
                .get("/Product/GetList", {
                    keywords: this.keyword,
                    sort: self.shopGoodSort,
                    pageIndex: self.page,
                    pageSize: 20,
                })
                .then((res) => {
                    uni.hideLoading();
                    uni.stopPullDownRefresh();
                    if (res.data.data.length) {
                        self.page++;
                    } else {
                        self.isHaveMore = false;
                    }

                    self.shopGoodsList = res.data.data;
                    self.loading = true;
                    self.setGoodsList();
                    uni.hideLoading();
                });
        },

        setGoodsList() {
            // 删除全部
            for (let item of this.goodsList) {
                item.cart = null;
            }
            // 重新赋值
            for (let item of this.shopGoodsList) {
                for (let cart of this.cartList) {
                    if (cart.productId === item.id) {
                        if (item.skus.length === 0) {
                            item.cart = cart;
                        } else {
                            if (item.cart) {
                                item.cart.push(cart);
                            } else {
                                item.cart = [cart];
                            }
                        }
                    }
                }
            }
            this.goodsList = [...this.goodsList];
        },

        // 获取更多商品
        getShopMoreGoods() {
            const self = this;

            self.api
                .get("/Product/GetList", {
                    keywords: this.keyword,
                    sort: self.shopGoodSort,
                    pageIndex: self.page,
                    pageSize: 20,
                })
                .then((res) => {
                    if (res.data.data.length) {
                        self.page++;
                    } else {
                        self.isHaveMore = false;
                    }

                    self.shopGoodsList = self.shopGoodsList.concat(
                        res.data.data
                    );
                    this.setShopGoodsList();
                    this.setGoodsList();
                });
        },
    },

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

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

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

<style lang="scss" scoped>
.search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: px(128);
    padding: 0 px(45) px(4);
    background-color: #efefef;

    &__input {
        width: px(820);
        height: px(86);
        padding: 0 px(24);
        font-size: px(36);
        color: #000;
        background-color: #fff;
        border-radius: px(8);
    }

    &__cancel {
        font-size: px(36);
        color: #000;
    }
}
.page-tab {
    // height: px(100);
    display: flex;
    justify-content: center;
    align-items: center;
    .tab-item {
        width: 40%;
        height: px(120);
        line-height: px(120);
        border-bottom: 1px solid #f1f1f1;
        text-align: center;
        font-size: px(44);
        &.on {
            color: #27a34f;
        }
    }
}
.page {
    position: relative;
    height: 100%;

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

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

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

.shop-list {
    .shop-item {
        padding: px(30);
        background-color: #fff;
        & ~ .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;
        }
    }
}
.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;
    margin-top: px(30);
    &__item {
        display: flex;
        align-items: center;
    }

    &__text {
        font-size: px(40);
        color: #000;
    }

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

.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(110);
        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);
    }

    &__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;
        }
    }
}
</style>