海报完成

src/pages/goods/list.vue

@@ -391,30 +391,6 @@ export default {
             }
             return false;
         },
-
-        setCaetNum(val, num) {
-            let cartItem = this.ifCart(val);
-            console.log(cartItem, num);
-            const self = this;
-            if (num > 0) {
-                self.api
-                    .post("/Order/UpdateItemCount", {
-                        id: cartItem.id,
-                        count: num,
-                    })
-                    .then(() => {
-                        self.$refs.shopCart.refresh();
-                    });
-            } else {
-                self.api
-                    .delete("/Order/RemoveCart", {
-                        ids: [cartItem.id],
-                    })
-                    .then(() => {
-                        self.$refs.shopCart.refresh();
-                    });
-            }
-        },
         
         cartChange(){
         },

src/pages/goods/list2.vue

@@ -13,6 +13,13 @@
         </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' }"
@@ -34,6 +41,177 @@
             :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
@@ -212,10 +390,13 @@
 <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 },
+    components: { MyImage, FInputNumber, ShopCart, GSpec, GSpecModal },
     // 数据
     data() {
         return {
@@ -229,12 +410,18 @@ export default {
             curTab: "0",
             sort: -1, // 排序
             asc: 1,
+
+            shopGoodAsc: -1,
+            shopGoodSort: -1,
+            shopGoodsList: [],
         };
     },
 
-    onLoad() {
+    onLoad(opts) {
         const self = this;
         self.fn.shareMenu();
+        console.log(opts)
+        self.curTab = opts.curTab || '0';
 
         if (!self.loading) {
             uni.showLoading({
@@ -250,7 +437,7 @@ export default {
         self.fn.shareMenu();
         self.keyword = self.$mp.query.title;
         self.fn.setTitle(self.keyword);
-        this.tabClick("0");
+        this.tabClick(self.curTab);
     },
 
     onShareAppMessage() {
@@ -274,8 +461,10 @@ export default {
         const self = this;
         if (self.curTab === "0") {
             this.getGoodsList();
-        } else {
+        } else if (self.curTab === "1") {
             self.getActivityList();
+        } else {
+            self.getShopGoodsList();
         }
     },
 
@@ -285,8 +474,10 @@ export default {
             this.fn.setTitle(this.keyword);
             if (this.curTab === "0") {
                 this.getGoodsList();
-            } else {
+            } else if (this.curTab === "1") {
                 this.getActivityList();
+            } else {
+                this.getShopGoodsList();
             }
         },
 
@@ -294,8 +485,10 @@ export default {
             this.curTab = val;
             if (val === "0") {
                 this.getGoodsList();
-            } else {
+            } else if (this.curTab === "1") {
                 this.getActivityList();
+            } else {
+                this.getShopGoodsList();
             }
         },
 
@@ -303,9 +496,26 @@ export default {
             const self = this;
             if (self.curTab === "0") {
                 this.getMoreGoods();
-            } else {
+            } else if (self.curTab === "1") {
                 self.getMoreActivity();
+            } else {
+                this.getShopMoreGoods();
+            }
+        },
+        // 设置排序
+        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) {
@@ -375,7 +585,6 @@ export default {
                     }
 
                     self.activityList = self.activityList.concat(list);
-                    this.setGoodsList();
                 });
         },
 
@@ -464,6 +673,232 @@ export default {
                 },
             });
         },
+
+        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;
+                    this.setGoodsList();
+                    uni.hideLoading();
+                });
+        },
+
+        // 获取更多商品
+        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();
+                });
+        },
     },
 
     // 数据计算

src/pages/goods/search.vue

@@ -104,9 +104,10 @@ export default {
             const self = this;
             if (this.curTab == "0") {
                 self.router.push({
-                    path: "/pages/goods/list",
+                    path: "/pages/goods/list2",
                     query: {
                         title: keyword,
+                        curTab:'2'
                     },
                 });
             } else {

src/pages/order/affirm.vue

@@ -423,6 +423,7 @@
                 </div>
             </div>
         </div>
+        <address-select ref="addressSelect"></address-select>
     </div>
 </template>
 
@@ -430,10 +431,11 @@
 import MyImage from "../../components/image/index";
 import FInputNumber from "../../components/form/inputNumber";
 import OCoupon from "./coupon";
+import AddressSelect from "../../components/address-select/index";
 
 export default {
     name: "",
-    components: { FInputNumber, MyImage, OCoupon },
+    components: { FInputNumber, MyImage, OCoupon,AddressSelect },
     // 数据
     data() {
         return {
@@ -1341,6 +1343,15 @@ export default {
 
             return sum;
         },
+
+        // 打开地址
+        oprenAddress() {
+            const self = this;
+
+            self.$refs.openAddress.open((val) => {
+                console.log(val);
+            });
+        },
     },
 
     // 数据监听

src/pages/recommend/detail.vue

@@ -240,6 +240,64 @@
                     </li>
                 </ul>
             </div>
+
+            <div class="bg-white">
+                <div class="everybody">- 大家都在买 -</div>
+                <ul class="goods">
+                    <li
+                        class="goods__item"
+                        v-for="(item, index) in goodsList"
+                        :key="index"
+                    >
+                        <my-image
+                            class="goods__img"
+                            :src="item.pictureUrls[0]"
+                            @click="jumpGoodsDetail(item)"
+                        ></my-image>
+                        <div
+                            class="goods__title"
+                            @click="jumpGoodsDetail(item)"
+                        >
+                            {{ item.name }}
+                        </div>
+                        <div
+                            class="goods__coupon"
+                            v-if="item.coupon"
+                            @click="jumpGoodsDetail(item)"
+                        >
+                            {{ item.coupon }}
+                        </div>
+                        <div class="goods__price">
+                            <div
+                                class="goods__present"
+                                @click="jumpGoodsDetail(item)"
+                            >
+                                <span class="goods__big">¥{{
+                                    item.minPrice / 100
+                                }}</span>
+                            </div>
+                            <div
+                                class="goods__original"
+                                @click="jumpGoodsDetail(item)"
+                                v-if="item.tagPrice !== 0"
+                            >
+                                {{ "¥" + item.tagPrice / 100 }}
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+                <div class="more-text" v-if="goodsList.length && !isHaveMore">
+                    - 没有更多了 -
+                </div>
+                <div class="null" v-if="loading && !goodsList.length">
+                    <img
+                        class="null__img"
+                        src="/static/common/goods_null_2.jpg"
+                        alt
+                    />
+                    <div class="null__title">抱歉！没有找到相关商品~</div>
+                </div>
+            </div>
         </scroll-view>
 
         <!--<div class="back" @click="jump({isTabBer: true, path: '/pages/index/index'})">返回首页</div>-->
@@ -389,6 +447,11 @@ export default {
             activityData: {},
 
             canvasforwardPath: "",
+
+            page: 1,
+            goodsList: [],
+            loading: false,
+            isHaveMore: false,
         };
     },
 
@@ -465,6 +528,7 @@ export default {
                         self.fn.setTitle(data.name);
                         console.log(self.goods);
                         self.creationShare2();
+                        self.getGoodsList();
                     } else {
                         self.fn
                             .showModal({
@@ -651,16 +715,6 @@ export default {
         },
 
         // 跳转到商品详情
-        jumpGoodsDetail(val) {
-            const self = this;
-
-            self.router.push({
-                path: "/pages/goods/detail",
-                query: {
-                    goodsId: val.id,
-                },
-            });
-        },
 
         // 打开分享
         oprenShare() {
@@ -683,7 +737,6 @@ export default {
         viewImg() {
             let self = this;
             //查看图片
-            console.log(111, self.canvasImgPath);
             uni.previewImage({
                 urls: self.canvasImgPath,
                 longPressActions: true,
@@ -1065,6 +1118,70 @@ export default {
                 });
             });
         },
+
+        // 获取商品列表
+        getGoodsList() {
+            const self = this;
+
+            self.page = 1;
+            uni.showLoading({
+                title: "加载中...",
+            });
+            self.api
+                .get("/Product/GetRelevant", {
+                    keyword: self.goods.name,
+                    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/GetRelevant", {
+                    keyword: self.goods.name,
+                    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);
+                });
+        },
+
+        // 跳转到商品详情
+        jumpGoodsDetail(val) {
+            const self = this;
+
+            self.router.replace({
+                path: "/pages/recommend/detail",
+                query: {
+                    goodsId: val.pid,
+                },
+            });
+        },
     },
 
     // 数据计算
@@ -1357,39 +1474,173 @@ page {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    padding: 0 px(60);
-    background-color: #fff;
+    padding: 0 px(25) px(30);
 
     &__item {
-        width: px(310);
-        padding-bottom: px(100);
+        width: px(500);
+        padding-bottom: px(30);
+        margin-top: px(25);
         overflow: hidden;
-        border-radius: px(20);
+        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(310);
-        height: px(305);
+        width: px(500);
+        height: px(500);
     }
 
     &__title {
         @include omits(2);
         height: px(100);
-        margin-top: px(30);
-        font-size: px(36);
+        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;
-        margin-top: px(30);
+        padding: 0 px(20);
+        margin-top: px(20);
     }
 
     &__present {
-        font-size: px(38);
         color: #000;
     }
+
+    &__rmb {
+        font-size: px(30);
+    }
+
+    &__big {
+        font-size: px(38);
+        color: #27a34f;
+    }
+
+    &__original {
+        position: relative;
+        margin-left: px(20);
+        font-size: px(32);
+        color: #999;
+
+        &:after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 0;
+            z-index: 1;
+            width: 100%;
+            height: px(1);
+            transform: translateY(-100%);
+            background-color: #999;
+        }
+    }
 }
 
 .live {
@@ -1516,6 +1767,24 @@ page {
         background-color: #e5e5e5;
     }
 }
+.null {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: px(115);
+
+    &__img {
+        width: px(741);
+        height: px(340);
+    }
+
+    &__title {
+        margin-top: px(60);
+        font-size: px(42);
+        color: #666;
+    }
+}
 
 .canvas {
     position: fixed;
@@ -1579,6 +1848,10 @@ page {
     background-color: #fff;
     visibility: hidden;
     opacity: 0;
+    position: fixed;
+    left: -999px;
+    top: -999px;
+    z-index: -1;
 }
 
 .shop-recommend {
@@ -1893,4 +2166,20 @@ page {
 .bold {
     font-weight: bold;
 }
+.more-text {
+    display: flex;
+    justify-content: center;
+    padding-bottom: px(60);
+    font-size: px(34);
+    color: #999;
+}
+.bg-white{
+    background-color: #fff;
+    margin-top: px(30);
+}
+.everybody{
+    text-align: center;
+    padding: px(30);
+    font-size: px(44);
+}
 </style>

src/pages/recommend/list.vue

@@ -121,10 +121,10 @@
                             class="goods__present"
                             @click="jumpGoodsDetail(item)"
                         >
-                            <span class="goods__rmb">¥</span>
-                            <span class="goods__big">{{
-                                item.minPrice / 100
-                            }}</span>
+                            <!-- <span class="goods__rmb"></span> -->
+                            <span class="goods__big"
+                                >¥{{ item.minPrice / 100 }}</span
+                            >
                         </div>
                         <div
                             class="goods__original"
@@ -135,56 +135,7 @@
                         </div>
                     </div>
                     <!-- 登录 -->
-                    <div class="btns">
-                        <!-- <block v-if="user.login && !item.skuList.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.skuList.length"
-              class="button"
-              @click.stop="addSpec(item, 'cart', $event)"
-            >
-              <div class="goods__add"></div>
-            </button>
-            <button
-              v-else-if="user.login && item.skuList.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.skuList.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.skuList.length"
-              class="button"
-              lang="zh_CN"
-              open-type="getUserInfo"
-              @getuserinfo.stop="openSpec(item, 'cart', $event)"
-            >
-              <div class="goods__add-text">选规格</div>
-            </button> -->
-                    </div>
+                    <div class="btns"></div>
                 </li>
             </ul>
             <div class="more-text" v-if="goodsList.length && !isHaveMore">
@@ -220,6 +171,11 @@
                 </div>
             </div>
         </div>
+        <canvas
+            class="canvas__forward"
+            canvas-id="canvas2"
+            :disable-scroll="true"
+        ></canvas>
     </div>
 </template>
 
@@ -252,6 +208,8 @@ export default {
             desModalVisible: false,
             desModalTitle: "",
             desModalDes: "",
+
+            canvasforwardPath: "",
         };
     },
 
@@ -285,9 +243,13 @@ export default {
         if (this.activeShop.store) {
             obj.storeId = this.activeShop.store.id;
         }
+        let title =
+            self.activityData.brandName +
+            ` (${self.activityData.onlineProductCount}款)`;
+            title += `【${self.activityData.minPrice / 100}元起】`;
         return {
-            title: self.activityData.brandName,
-            imageUrl: self.activityData.brandLogo,
+            title: title,
+            imageUrl: self.canvasforwardPath || self.activityData.brandLogo,
             path: self.router.getPath(self.$mp.page.route, self.$mp.query),
         };
     },
@@ -337,6 +299,7 @@ export default {
                     let data = JSON.parse(res.data);
                     this.activityData = data;
                     this.fn.setTitle(data.brandName);
+                    this.creationShare2();
                 });
         },
 
@@ -650,6 +613,122 @@ export default {
                     });
             }
         },
+
+        // 创建分享图
+        creationShare2() {
+            const self = this;
+            const ctx = uni.createCanvasContext("canvas2", self);
+
+            return new Promise((resolve) => {
+                self.router.getScene(self.$mp.query).then((res) => {
+                    res.uid = self.user.id;
+                    res.shopId = self.activeShop.id;
+
+                    Promise.all([
+                        uni.getImageInfo({
+                            src:
+                                "https://oss.ixiaokejia.com/images/common/share_bg.jpg",
+                        }),
+                        uni.getImageInfo({
+                            src:
+                                "https://oss.ixiaokejia.com/images/common/share_bg_box.png",
+                        }),
+                        uni.getImageInfo({
+                            src: self.activityData.brandLogo,
+                        }),
+                        uni.getImageInfo({
+                            src:
+                                "https://oss.ixiaokejia.com/images/common/share_tag1.jpg",
+                        }),
+                        uni.getImageInfo({
+                            src:
+                                "https://oss.ixiaokejia.com/images/common/share_tag2.png",
+                        }),
+                    ]).then((res) => {
+                        // 背景
+                        ctx.drawImage(res[0][1].path, 0, 0, 500, 400);
+
+                        // 标题
+                        ctx.setFontSize(28);
+                        ctx.setFillStyle("#fff");
+                        ctx.fillText("厂商直邮", 205, 40);
+                        ctx.stroke();
+
+                        ctx.setFontSize(24);
+                        ctx.setFillStyle("#fff");
+                        ctx.fillText("免费包邮，厂商快递直邮到家", 100, 75);
+                        ctx.stroke();
+
+                        // 背景box
+                        ctx.drawImage(res[1][1].path, 10, 92, 477, 292);
+
+                        // // 商品图片
+                        ctx.drawImage(res[2][1].path, 20, 100, 275, 275);
+
+                        // 特惠商品
+                        ctx.drawImage(res[3][1].path, 310, 110, 157, 46);
+
+                        ctx.setFontSize(28);
+                        ctx.setFillStyle("#fff");
+                        ctx.fillText("限时活动", 330, 144);
+
+                        if (self.activityData.minDiscount) {
+                            //折扣
+                            let tagPrice = "最低";
+                            ctx.setFontSize(28);
+                            ctx.setFillStyle("#999");
+                            ctx.fillText(tagPrice, 325, 215);
+                            ctx.stroke();
+
+
+                            let itemPrice =self.activityData.minDiscount * 10;
+                            itemPrice = itemPrice.toFixed(1)+'折';
+                            ctx.setFontSize(40);
+                            ctx.setFillStyle("#f00");
+                            ctx.fillText(itemPrice, 320, 265);
+                            ctx.stroke();
+
+                        } else {
+                            // 价格
+                            let itemPrice =
+                                self.activityData.minPrice / 100 + "元";
+                            ctx.setFontSize(38);
+                            ctx.setFillStyle("#f00");
+                            ctx.fillText("￥" + itemPrice, 320, 220);
+                            ctx.stroke();
+
+                            // 价格2
+                            let tagPrice = "起购";
+                            ctx.setFontSize(28);
+                            ctx.setFillStyle("#999");
+                            ctx.fillText(tagPrice, 325, 265);
+                            ctx.stroke();
+                        }
+
+                        // buy
+                        ctx.drawImage(res[4][1].path, 307, 300, 170, 70);
+
+                        ctx.setFontSize(28);
+                        ctx.setFillStyle("#fff");
+                        ctx.fillText("立即购买", 335, 345);
+
+                        ctx.draw();
+
+                        setTimeout(() => {
+                            // 生成临时路径
+                            uni.canvasToTempFilePath({
+                                canvasId: "canvas2",
+                                fileType: "jpg",
+                                success: function (res) {
+                                    // self.canvasShow = false
+                                    self.canvasforwardPath = res.tempFilePath;
+                                },
+                            });
+                        }, 100);
+                    });
+                });
+            });
+        },
     },
 
     // 数据计算
@@ -900,6 +979,7 @@ page {
 
     &__big {
         font-size: px(38);
+        color: #27a34f;
     }
 
     &__original {
@@ -1095,4 +1175,15 @@ page {
     background: #fff7e6;
     border-color: #ffd591;
 }
+.canvas__forward {
+    width: 500px;
+    height: 400px;
+    background-color: #fff;
+    visibility: hidden;
+    opacity: 0;
+    position: fixed;
+    left: -999px;
+    top: -999px;
+    z-index: -1;
+}
 </style>