赚积分

.env

@@ -7,13 +7,13 @@ NODE_ENV = 'production'
 VUE_APP_ENV = develop
 
 # 接口请求基地址
-VUE_APP_API_BASE_URL =  https://youxuan.ixiaokejia.com
+VUE_APP_API_BASE_URL =  http://localhost:8077
 
 # 接口请求基地址
 VUE_APP_WEBSOCKET_BASE_URL = 
 
 # 图片基地址
-VUE_APP_IMAGE_BASE_URL =  https://youxuan.ixiaokejia.com
+VUE_APP_IMAGE_BASE_URL =  http://localhost:8077
 VUE_APP_IMAGE_RESOURCE_URL = https://oss.ixiaokejia.com
 
 # 微信小程序appId

src/pages.json

@@ -231,6 +231,12 @@
                 "navigationBarTextStyle": "white",
                 "navigationBarBackgroundColor": "#262626"
             }
+        },
+        {
+            "path": "pages/pay/order-share",
+            "style": {
+                "navigationBarTitleText": "订单分享"
+            }
         }
     ]
 }

src/pages/pay/order-share.vue

@@ -0,0 +1,585 @@
+<template>
+    <div class="page">
+        <div class="head-main">
+            <div class="user-info">
+                <my-image
+                    class="user-head"
+                    :src="orderData.user.headIcon"
+                ></my-image>
+                <span class="name"
+                    >{{ orderData.user.nickName }}向您推荐了订单</span
+                >
+            </div>
+            <div class="line">
+                <span class="line-ele"></span>
+                <span class="text">大家都在抢</span>
+                <span class="line-ele"></span>
+            </div>
+            <ul class="good-list">
+                <li
+                    class="item"
+                    v-for="(item, index) of orderData.productList"
+                    :key="index"
+                >
+                    <my-image
+                        class="good-img"
+                        @click="goDetail(item)"
+                        :src="item.image"
+                    ></my-image>
+                    <div class="con">
+                        <div class="info">
+                            <div class="name" @click="goDetail(item)">
+                                {{ item.name }}
+                            </div>
+                            <div
+                                class="tag-price"
+                                @click="goDetail(item)"
+                                v-if="item.tagPrice"
+                            >
+                                <span class="symbol">￥</span>
+                                {{ item.tagPrice / 100 }}
+                            </div>
+                            <div class="price" @click="goDetail(item)">
+                                <span class="symbol">￥</span>
+                                {{ item.price / 100 }}
+                            </div>
+                        </div>
+                        <div class="tool">
+                            <div class="btn" @click="addCart(item)">
+                                加入购物车
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+        <div class="more-list">
+            <div class="more-tit">精品推荐</div>
+            <ul class="good-list">
+                <li
+                    class="item"
+                    v-for="(item, index) of goodsList"
+                    :key="index"
+                >
+                    <my-image
+                        class="good-img"
+                        @click="goDetail(item)"
+                        :src="item.pictureUrls[0]"
+                    ></my-image>
+                    <div class="con">
+                        <div class="info" @click="goDetail(item)">
+                            <div class="name">{{ item.name }}</div>
+                            <!-- <div class="des">
+                                <span>5月14日提货</span>
+                                <span>已售5.6万件</span>
+                            </div> -->
+                            <div
+                                class="tag-price"
+                                @click="goDetail(item)"
+                                v-if="item.tagPrice"
+                            >
+                                <span class="symbol">￥</span>
+                                {{ item.tagPrice / 100 }}
+                            </div>
+                            <div class="price" @click="goDetail(item)">
+                                <span class="symbol">￥</span>
+                                {{ item.minPrice / 100 }}
+                            </div>
+                        </div>
+                        <div class="tool" @click="addCart(item)">
+                            <div class="btn">加入购物车</div>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+            <div class="more-loading">加载中...</div>
+        </div>
+        <div class="navigation">
+            <ul class="navigation__list">
+                <!-- <button class="button">
+                    <li class="navigation__item">
+                        <i class="iconfont iconkefu navigation__icon"></i>
+                        <div class="navigation__text">找客服</div>
+                    </li>
+                </button> -->
+                <li
+                    class="navigation__item"
+                    @click="
+                        jump({ isTabBer: true, path: '/pages/goods/index' })
+                    "
+                >
+                    <i class="iconfont icondianpu navigation__icon"></i>
+                    <div class="navigation__text">首页</div>
+                </li>
+                <li class="navigation__item">
+                    <button v-if="user.login" class="button" @click="jumpCart">
+                        <i class="iconfont icongouwuche navigation__icon"></i>
+                        <div class="navigation__text">购物车</div>
+                    </button>
+
+                    <div class="navigation__num" v-if="cartInfo.count">
+                        {{ cartInfo.count }}
+                    </div>
+                </li>
+            </ul>
+            <div class="navigation__right">
+                <div class="price">
+                    总价：<span class="symbol">￥</span
+                    ><span class="num">{{cartInfo.amount / 100}}</span>
+                </div>
+                <button class="button" @click="submit">
+                    <div class="navigation__btn">去结算</div>
+                </button>
+            </div>
+        </div>
+        <g-spec ref="spec" :goods="goods" :spec.sync="spec"></g-spec>
+    </div>
+</template>
+
+<script>
+import MyImage from "../../components/image/index";
+import GSpec from "../recommend/spec";
+export default {
+    name: "",
+    components: { MyImage, GSpec },
+    // 数据
+    data() {
+        return {
+            orderId: "",
+            orderData: {},
+            cartInfo: {},
+            goods: {},
+
+            isHaveMore: true, // 是否有更多数据
+            loading: false, // 是否加载完成
+            goodsList: [], // 详情数据 加入购物车时用
+            page: 1,
+            moreLoading: true,
+        };
+    },
+
+    async onShow() {},
+    onLoad(opts) {
+        this.orderId = opts.orderId;
+        this.getCartNumber();
+        this.getOrderData();
+        this.getGoodsList();
+    },
+
+    onReachBottom() {
+        this.getMoreGoods();
+    },
+    // 函数
+    methods: {
+        getOrderData() {
+            this.api
+                .get("/Order/GetOrderInfo", {
+                    id: this.orderId,
+                })
+                .then((res) => {
+                    this.orderData = res.data;
+                    console.log(this.orderData);
+                    // this.orderProuct = this.orderData.
+                    this.fn.shareMenu();
+                    console.log(this.orderData);
+                });
+        },
+
+        // 获取商品列表
+        getGoodsList() {
+            const self = this;
+
+            self.page = 1;
+            uni.showLoading({
+                title: "加载中...",
+            });
+            self.api
+                .get("/Product/GetHHSGProductList", {
+                    pageIndex: self.page,
+                    pageSize: 20,
+                    aid: "1391692975070859265",
+                })
+                .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;
+                    console.log(data);
+                    // self.loading = true;
+                    uni.hideLoading();
+                });
+        },
+
+        // 加入购物车
+        addCart(val) {
+            const self = this;
+            let pid = val.id || val.pid;
+            uni.showLoading({
+                title: "处理中...",
+            });
+            self.api
+                .get(
+                    "/Product/GetHHSGProduct",
+                    {
+                        pid,
+                    },
+                    {
+                        pass: true,
+                    }
+                )
+                .then((res) => {
+                    self.goods = JSON.parse(res.data);
+                    console.log(self.goods);
+                    if (self.goods.skuList.length === 1) {
+                        self.api
+                            .post("/Order/AddCart", {
+                                productId: pid,
+                                count: 1,
+                                skuId: self.goods.skuList[0].skuNo,
+                                productSource: 1, // 优选,
+                            })
+                            .then((res) => {
+                                uni.hideLoading();
+                                this.fn.showToast("已成功加入购物车");
+                                this.getCartNumber();
+                            });
+                    } else {
+                        uni.hideLoading();
+                        this.openSpec();
+                    }
+                });
+        },
+        goDetail(val) {
+            const self = this;
+
+            self.router.push({
+                path: "/pages/recommend/detail",
+                query: {
+                    goodsId: val.id || val.pid,
+                },
+            });
+        },
+        // 打开规则选项
+        openSpec() {
+            this.$refs.spec.open("cart", (res) => {
+                this.getCartNumber();
+                this.fn.showToast("已成功加入购物车");
+            });
+        },
+
+        // 获取购物车数量
+        getCartNumber() {
+            const self = this;
+            self.api.get("/Order/GetCartInfo",{productSource:1}).then((res) => {
+                this.cartInfo = res.data;
+            });
+        },
+
+        // 获取更多商品
+        getMoreGoods() {
+            const self = this;
+            this.moreLoading = true;
+            self.api
+                .get("/Product/GetHHSGProductList", {
+                    pageIndex: self.page,
+                    pageSize: 20,
+                    aid: "1391692975070859265",
+                })
+                .then((res) => {
+                    this.moreLoading = false;
+                    let data = JSON.parse(res.data.list);
+                    if (data.length) {
+                        self.page++;
+                    } else {
+                        self.isHaveMore = false;
+                    }
+
+                    self.goodsList = self.goodsList.concat(data);
+                });
+        },
+
+        // 跳转到购物车
+        jumpCart() {
+            this.router.push({
+                isTabBer: true,
+                path: "/pages/cart/index",
+            });
+        },
+    },
+
+    // 数据计算
+    computed: {
+        user() {
+            return this.$store.state.user;
+        },
+    },
+
+    // 数据监听
+    watch: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.page {
+    height: 100vh;
+    overflow: auto;
+    padding-bottom: px(185);
+}
+.head-main {
+    padding: px(45);
+    background: linear-gradient(#27a34f, #78d197);
+    font-size: px(44);
+    .user-info {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .user-head {
+        width: px(70);
+        height: px(70);
+        border-radius: 50%;
+        background-color: #eee;
+        flex-shrink: 0;
+        margin-right: px(20);
+        /deep/ img {
+            width: px(60);
+            height: px(60);
+        }
+    }
+    .name {
+        color: #fff;
+    }
+    .line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: px(30);
+    }
+    .text {
+        font-size: px(40);
+        color: #fff;
+        padding: 0 px(20);
+    }
+    .line-ele {
+        height: 1px;
+        width: 35%;
+        background-color: #fff;
+    }
+}
+.good-list {
+    margin-top: px(60);
+    .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: stretch;
+        background-color: #fff;
+        border-radius: px(20);
+        padding: px(30);
+        .good-img {
+            background-color: pink;
+            width: px(440);
+            height: px(440);
+            flex-shrink: 0;
+            margin-right: px(30);
+            /deep/ img {
+                width: px(440);
+                height: px(440);
+            }
+        }
+        .con {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            .name {
+                font-size: px(44);
+                color: #333;
+                font-weight: bold;
+                @include omits(2);
+            }
+            .des {
+                font-size: px(40);
+                color: #888;
+                margin-top: px(20);
+                span ~ span {
+                    margin-left: px(10);
+                    padding-left: px(10);
+                    border-left: 1px solid #f1f1f1;
+                }
+            }
+            .price {
+                color: #e30b00;
+                font-size: px(54);
+                margin-top: px(20);
+                .symbol {
+                    font-size: px(40);
+                }
+            }
+            .tag-price {
+                margin-top: px(20);
+                color: #999;
+                text-decoration: line-through;
+                font-size: px(42);
+                .symbol {
+                    font-size: px(40);
+                }
+            }
+            .tool {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .btn {
+                    width: 100%;
+                    height: px(100);
+                    border-radius: px(50);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: #fff;
+                    font-size: px(40);
+                    background-color: #27a34f;
+                }
+            }
+        }
+    }
+    .item ~ .item {
+        margin-top: px(30);
+    }
+}
+.navigation {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 995;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: px(185);
+    padding: 0 px(40);
+    background-color: #fff;
+    border-top: 1px solid #f1f1f1;
+
+    &--iphoneX {
+        height: px(215);
+        padding-bottom: px(30);
+    }
+
+    &__list {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: px(200);
+    }
+
+    &__item {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__icon {
+        font-size: px(54);
+        color: #666;
+    }
+
+    &__text {
+        margin-top: px(20);
+        font-size: px(32);
+        color: #666;
+    }
+
+    &__num {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-width: px(40);
+        height: px(40);
+        padding: 0 px(15);
+        transform: translate(30%, -30%);
+        font-size: px(26);
+        color: #fff;
+        border-radius: px(20);
+        background-color: #ff4421;
+    }
+
+    &__right {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        flex: 1;
+        margin-left: px(40);
+    }
+
+    &__btn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: px(270);
+        height: px(110);
+        font-size: px(40);
+        color: #fff;
+        border-radius: px(55);
+        background-color: #27a34f;
+        margin-left: px(20);
+        &--cart {
+            color: #262626;
+            background-color: #e5e5e5;
+        }
+    }
+
+    &__null {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: px(110);
+        font-size: px(40);
+        color: #fff;
+        border-radius: px(55);
+        background-color: #e5e5e5;
+    }
+    .price {
+        font-size: px(40);
+    }
+    .symbol {
+    }
+    .symbol,
+    .num {
+        color: red;
+    }
+    .num {
+        font-size: px(50);
+    }
+}
+
+.more-loading {
+    font-size: px(40);
+    color: #999;
+    text-align: center;
+    padding: px(30);
+}
+.more-list {
+    padding: px(45);
+    background-color: #f1f1f1;
+}
+.more-tit {
+    font-size: px(50);
+    font-weight: bold;
+    text-align: center;
+    padding-top: px(30);
+}
+</style>

src/pages/pay/result.vue

@@ -1,41 +1,107 @@
 <template>
     <div class="page">
         <div class="pay">
+            <div class="status-img">
+                <my-image
+                    v-if="type === 'success'"
+                    src="/static/icon/select.png"
+                ></my-image>
+                <my-image v-else src="/static/icon/error.png"></my-image>
+            </div>
             <div class="pay__title" v-if="type === 'success'">订单支付成功</div>
             <div class="pay__title" v-else>支付已取消</div>
             <div class="pay__content">
-                <div class="pay__sub-title">订单金额：</div>
+                <div class="pay__sub-title">支付金额：</div>
                 <div class="pay__price">{{ "¥" + (price || "0.00") }}</div>
             </div>
-            <div class="pay__btns">
-                <div class="pay__btn" @click="jumpOrderDetail">查看订单</div>
-                <div
-                    class="pay__btn"
-                    v-if="type === 'success'"
-                    @click="
-                        jump({ isTabBer: true, path: '/pages/goods/index' })
-                    "
-                >
-                    去逛首页
+
+            <div class="btn-box">
+                <button open-type="share" class="big__btn" v-if="type === 'success'">
+                    {{enablePoints?'分享到群，赚积分':'分享到群，提醒群主接单'}}
+                </button>
+                <div class="pay__btns">
+                    <div class="pay__btn" @click="jumpOrderDetail">
+                        查看订单
+                    </div>
+                    <div
+                        class="pay__btn"
+                        v-if="type === 'success'"
+                        @click="
+                            jump({ isTabBer: true, path: '/pages/goods/index' })
+                        "
+                    >
+                        去逛首页
+                    </div>
+                    <div class="pay__btn" v-else @click="pay">立即支付</div>
                 </div>
-                <div class="pay__btn" v-else @click="pay">立即支付</div>
-                <div
-                    class="pay__btn"
-                    v-if="IsVoucher"
-                    @click="jump('/pages/voucher/index')"
+            </div>
+        </div>
+
+        <!-- yx -->
+        <div v-if="goodsList && goodsList.length">
+            <div class="more-title">买了又买</div>
+            <ul class="goods">
+                <li
+                    class="goods__item"
+                    v-for="(item, index) in goodsList"
+                    :key="index"
                 >
-                    {{ cashCouponName }}
-                </div>
+                    <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="moreLoading">- 加载中... -</div>
+            <div class="more-text" v-else-if="goodsList.length && !isHaveMore">
+                - {{ moreLoading ? "加载中..." : "没有更多了" }} -
+            </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>
 </template>
 
 <script>
-
+import MyImage from "../../components/image/index";
 export default {
     name: "",
-    components: {  },
+    components: { MyImage },
     // 数据
     data() {
         return {
@@ -43,8 +109,15 @@ export default {
             orderId: "",
             price: "",
             layout: [],
-            IsVoucher: false,
             sub: "",
+            orderData: {},
+
+            isHaveMore: true, // 是否有更多数据
+            loading: false, // 是否加载完成
+            goodsList: [], // 详情数据 加入购物车时用
+            page: 1,
+            moreLoading: true,
+            enablePoints:false,
         };
     },
 
@@ -55,25 +128,49 @@ export default {
         self.orderId = self.$mp.query.orderId;
         self.price = self.$mp.query.price;
         self.sub = self.$mp.query.sub;
-            self.fn.getMsgTpls(self.orderId, self.type === 'success'?2:1);
-
+        self.fn.getMsgTpls(self.orderId, self.type === "success" ? 2 : 1);
+        if (this.orderId && self.type === "success") {
+            this.getOrderData();
+            this.getEnablePoints();
+        }
         await self.fn.init();
-        // self.getIsVoucher();
+        this.getGoodsList();
+    },
+
+    onReachBottom() {
+        this.getMoreGoods();
     },
+    onShareAppMessage() {
+        let url = `/pages/pay/order-share?orderId=${this.orderId}`;
 
+        return {
+            title: `来自${this.orderData.user.nickName}的订单分享`,
+            path: url,
+            imageUrl: this.orderData.productList.image,
+        };
+    },
     // 函数
     methods: {
 
-        // 是否是代金券
-        getIsVoucher() {
-            const self = this;
+        getEnablePoints(){
+            this.api
+                .get("/Shop/GetEnablePoints", {
+                    id: this.orderId,
+                })
+                .then((res) => {
+                    this.enablePoints = res.data;
+                });
+        },
 
-            self.api
-                .get("/Order/GetHadCashCoupon", {
-                    orderId: self.orderId,
+        getOrderData() {
+            this.api
+                 .get("/Order/GetOrderInfo", {
+                    id: this.orderId,
                 })
                 .then((res) => {
-                    self.IsVoucher = res.data;
+                    this.orderData = res.data;
+                    this.fn.shareMenu();
+                    console.log(this.orderData)
                 });
         },
 
@@ -82,6 +179,8 @@ export default {
             const self = this;
 
             self.fn.pay(self.orderId, self.price);
+
+            
         },
 
         // 跳转到订单详情
@@ -99,6 +198,72 @@ export default {
                 self.fn.showToast("暂不支持查看订单");
             }
         },
+
+        // 获取商品列表
+        getGoodsList() {
+            const self = this;
+
+            self.page = 1;
+            uni.showLoading({
+                title: "加载中...",
+            });
+            self.api
+                .get("/Product/GetHHSGProductList", {
+                    pageIndex: self.page,
+                    pageSize: 20,
+                    aid: "1391692975070859265",
+                })
+                .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;
+                    console.log(data);
+                    // self.loading = true;
+                    uni.hideLoading();
+                });
+        },
+
+        // 获取更多商品
+        getMoreGoods() {
+            const self = this;
+            this.moreLoading = true;
+            self.api
+                .get("/Product/GetHHSGProductList", {
+                    pageIndex: self.page,
+                    pageSize: 20,
+                    aid: "1391692975070859265",
+                })
+                .then((res) => {
+                    this.moreLoading = false;
+                    let data = JSON.parse(res.data.list);
+                    if (data.length) {
+                        self.page++;
+                    } else {
+                        self.isHaveMore = false;
+                    }
+
+                    self.goodsList = self.goodsList.concat(data);
+                });
+        },
+
+        // 跳转到商品详情
+        jumpGoodsDetail(val) {
+            const self = this;
+
+            self.router.push({
+                path: "/pages/recommend/detail",
+                query: {
+                    goodsId: val.pid,
+                },
+            });
+        },
     },
 
     // 数据计算
@@ -121,9 +286,9 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: px(385);
     background-color: #fff;
-
+    // min-height: 100vh;
+    padding-bottom: px(50);
     &__title {
         margin-top: px(60);
         font-size: px(50);
@@ -149,20 +314,254 @@ export default {
 
     &__btns {
         display: flex;
-        margin-top: px(60);
+        margin-top: px(40);
     }
 
     &__btn {
         display: flex;
         justify-content: center;
         align-items: center;
-        width: px(190);
-        height: px(80);
+        width: 48%;
+        height: px(120);
         margin: 0 px(15);
-        font-size: px(38);
+        font-size: px(44);
         color: #666;
-        border-radius: px(40);
+        border-radius: px(60);
         border: solid px(3) #ddd;
     }
 }
+.btn-box {
+    padding: 0 px(60);
+    width: 100%;
+}
+.big__btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: px(120);
+    margin: 0 px(15);
+    font-size: px(44);
+    color: #fff;
+    border-radius: px(60);
+    border: solid px(3) #ddd;
+    background-color: #27a34f;
+    margin-top: px(60);
+}
+.status-img {
+    width: px(200);
+    height: px(230);
+    margin: 0 auto;
+    padding-top: px(30);
+    /deep/ img {
+        display: block;
+        width: px(200);
+        height: px(200);
+    }
+}
+
+.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;
+        }
+    }
+}
+
+.more-title {
+    margin-top: px(60);
+    margin-bottom: px(30);
+    text-align: center;
+    font-size: px(50);
+    font-weight: bold;
+}
+.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(741);
+        height: px(340);
+    }
+
+    &__title {
+        margin-top: px(60);
+        font-size: px(42);
+        color: #666;
+    }
+}
 </style>