Browse Source

拼多多

xiaomei 1 year ago
parent
commit
ff37e2d87b

+ 25 - 0
src/pages.json

@@ -241,6 +241,13 @@
 			"style": {
 				"navigationBarTitleText": "享好物"
 			}
+		},
+		{
+			"path": "pages/shoppingMall/index",
+			"style": {
+				"navigationBarTitleText": "商城购物",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"subPackages": [
@@ -637,6 +644,24 @@
 					"style": {
 						"navigationBarTitleText": "OE兑换"
 					}
+				},
+				{
+					"path": "shoppingMallType/index",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "shoppingMallType/p_details",
+					"style": {
+						"navigationBarTitleText": "商品详情"
+					}
+				},
+				{
+					"path": "shoppingMallType/order/list",
+					"style": {
+						"navigationBarTitleText": "我的消费"
+					}
 				}
 			]
 		}

+ 562 - 0
src/pages/shoppingMall/index.vue

@@ -0,0 +1,562 @@
+<template>
+  <div class="container">
+    <div
+      class="l_tabBar flex_r flex_jb"
+      v-show="!head"
+      :style="{
+        background: `url(${banner.image}) no-repeat`,
+        'background-size': '100% 100%',
+      }"
+    >
+      <div class="search-box flex_r flex_jb">
+        <div class="search flex_r flex_jb flex_ac">
+          <span class="iconfont">&#xe661;</span>
+          <input
+            v-model="keyword"
+            @confirm="toSearch"
+            class="inp"
+            placeholder="搜索你要的内容"
+          />
+          <span class="search_btn" @click="toSearch">搜索</span>
+        </div>
+      </div>
+    </div>
+    <div class="head" v-show="head">
+      <p class="title">商城购物</p>
+    </div>
+    <div class="nav_box flex_r flex_jb">
+      <div
+        class="item flex_c flex_ac"
+        v-for="(i, s) in tabs"
+        :key="s"
+        @click="goto(i.url + '&name=' + i.name)"
+      >
+        <uni-badge
+          size="small"
+          :text="i.badge"
+          absolute="rightTop"
+          type="error"
+        >
+          <img :src="i.image" alt="" class="ico" />
+        </uni-badge>
+
+        <div class="tit">{{ i.name }}</div>
+        <div class="tit1">{{ i.text }}</div>
+      </div>
+    </div>
+    <div class="flex_r flex_jb flex_ac">
+      <div
+        :class="navIndex == s ? 'nav nav-active' : 'nav'"
+        v-for="(i, s) in tabs"
+        :key="s"
+        @click="navIndex = s"
+      >
+        <span>{{ i.name }}</span>
+      </div>
+    </div>
+    <div class="sort_box flex_r flex_jb flex_ac">
+      <div
+        :class="sortIndex == s ? 'sort sort-active' : 'sort'"
+        v-for="(i, s) in sort"
+        :key="s"
+        @click="search(i, s)"
+      >
+        <span>{{ i.cat_name }}</span>
+      </div>
+    </div>
+    <view class="product-list" v-if="goods.length > 0">
+      <view
+        class="product"
+        v-for="(i, s) in goods"
+        :key="s"
+        @click="NavToGoodsDetail(i.goods_sign)"
+      >
+        <view class="image-view">
+          <image class="product-image" :src="i.goods_image_url"></image>
+        </view>
+        <view class="content-view">
+          <view :class="['product-title', 'ellipsis2']">
+            <span class="product-type">
+              {{ tabs[navIndex].name }}
+            </span>
+            <span>{{ i.goods_name }}</span>
+          </view>
+          <view class="quan_box flex_r flex_ac">
+            <view class="quan" v-if="i.has_coupon">
+              <span class="pl">券</span>
+              <span>¥{{ i.coupon_discount / 100 }}</span>
+            </view>
+            <view class="quan">
+              <span>返现</span>
+              <span
+                >¥
+                {{
+                  Math.floor(
+                    (i.min_group_price / 100) * (i.promotion_rate / 1000) * 100
+                  ) / 100
+                }}
+              </span>
+            </view>
+          </view>
+          <view class="product-price">
+            <text class="product-price-original">
+              {{
+                Math.floor(
+                  (i.min_group_price / 100 - i.coupon_discount / 100) * 100
+                ) / 100
+              }}
+            </text>
+            <text class="product-price-favour"
+              >¥{{ i.min_group_price / 100 }}</text
+            >
+          </view>
+        </view>
+      </view>
+    </view>
+    <not-goods v-else textStr="暂无数据"></not-goods>
+    <!-- 精品推荐-end -->
+    <view class="fz_w_text">好生活,茶付宝!</view>
+  </div>
+</template>
+<script>
+let page = 1;
+import { post } from "@/request/api.js";
+import notGoods from "@/components/not-goods/index.vue";
+export default {
+  components: { notGoods },
+  data() {
+    return {
+      goods: [], // 精品推荐
+      haveGoods: false, // 是否有商品
+      tabs: [], //分类
+      navIndex: 0,
+      sort: [], //小分类
+      sortIndex: 0,
+      head: false,
+      cat_id: 0,
+      keyword: "", // 搜索关键字
+      banner: {},
+    };
+  },
+  async onShow() {
+    uni.setTabBarStyle({
+      color: "#999",
+      selectedColor: "#E68B1E",
+    });
+    page = 1;
+    this.goods = [];
+    this.duoduoCats();
+    this.goodsDay();
+    this.getIcon();
+  },
+  onLoad(da) {
+    uni.setTabBarStyle({
+      color: "#999",
+      selectedColor: "#E68B1E",
+    });
+  },
+  onHide() {},
+  onPageScroll(e) {
+    if (e.scrollTop > 0) {
+      this.head = true;
+    } else {
+      this.head = false;
+    }
+  },
+  methods: {
+    // 分类
+    getIcon() {
+      post("v1/cashback/getIcon").then((res) => {
+        if (res.code === 0) {
+          this.tabs = res.data;
+        } else {
+          this.$toast(res.msg);
+        }
+      });
+    },
+    duoduoCats() {
+      post("v1/cashback/duoduoCats").then((res) => {
+        if (res.code === 0) {
+          this.sort = res.data.cats;
+          this.banner = res.data.banner[0];
+        } else {
+          this.$toast(res.msg);
+        }
+      });
+    },
+    toPage(url) {
+      this.goto(url);
+    },
+    toSearch() {
+      page = 1;
+      this.goods = [];
+      this.goodsDay();
+    },
+    search(item, index) {
+      this.sortIndex = index;
+      page = 1;
+      this.goods = [];
+      this.cat_id = item.cat_id;
+      this.goodsDay();
+    },
+    // 获取商品列表
+    goodsDay() {
+      uni.showLoading();
+      let that = this;
+      let data = { p: page, cat_id: this.cat_id, keyword: this.keyword };
+      post("v1/cashback/duoduoList", data)
+        .then((res) => {
+          uni.hideLoading();
+          if (res.code === 0) {
+            let obj = JSON.parse(res.data).goods_search_response.goods_list;
+            console.log(obj);
+
+            if (page <= 1) that.goods = [];
+            if (obj.length > 0) {
+              obj.forEach((e) => {
+                that.goods.push(e);
+              });
+            } else {
+              if (page == 1) {
+                that.haveGoods = true;
+                page = -1;
+              } else {
+                page = -1;
+                this.$toast("暂无更多");
+              }
+            }
+          } else {
+            if (page == 1) {
+              that.haveGoods = true;
+              page = -1;
+            } else {
+              page = -1;
+              this.$toast("暂无更多");
+            }
+          }
+        })
+        .catch((e) => {
+          uni.hideLoading();
+        });
+    },
+    // 跳转到商品详情页
+    NavToGoodsDetail(goods_sign, type) {
+      this.goto("/pagesC/shoppingMallType/p_details", {
+        goods_sign,
+        type: this.type,
+      });
+    },
+  },
+  //页面上拉触底事件的处理函数
+  onReachBottom() {
+    if (page != -1) {
+      setTimeout(() => {
+        ++page;
+        this.goodsDay();
+      }, 500);
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+// 页面配置
+page {
+  background: #f5f5f5;
+}
+
+.head {
+  width: 100%;
+  height: 160rpx;
+  text-align: center;
+  position: fixed;
+  top: 0;
+  z-index: 999;
+  //   padding: calc(var(--status-bar-height) + 50rpx) 0 36rpx;
+  background: #fff;
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    padding-top: calc(var(--status-bar-height) + 46rpx);
+  }
+}
+
+// 页面配置-end
+
+.product-list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  padding: 0 30rpx;
+
+  .product {
+    width: 48.5%;
+    margin-bottom: 20rpx;
+    padding-bottom: 12rpx;
+    border-radius: 10rpx;
+    box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.06);
+    background-color: #fff;
+
+    &:nth-child(2n) {
+      margin-left: 3%;
+    }
+  }
+
+  .product-image {
+    border-radius: 10rpx 10rpx 0 0;
+    width: 100%;
+    height: 42.3vw;
+    object-fit: cover;
+  }
+
+  .content-view {
+    padding: 0 16rpx;
+  }
+
+  .product-title {
+    width: 100%;
+    overflow: hidden;
+    line-height: 1.5;
+    font-size: 26rpx;
+    font-weight: bold;
+    color: #121212;
+  }
+  .product-type {
+    font-size: 16rpx;
+    font-weight: bold;
+    color: #fff;
+    height: 26rpx;
+    display: inline-block;
+    line-height: 26rpx;
+    padding: 0 8rpx;
+    border-radius: 4rpx;
+    margin-right: 16rpx;
+    background-color: #e90406;
+  }
+
+  .product-price {
+    color: #121212;
+    font-size: 28rpx;
+    // position: relative;
+    margin: 16rpx 0 4rpx;
+  }
+
+  .product-price-original {
+    color: #000;
+    font-size: 32rpx;
+    font-weight: bold;
+
+    &:before {
+      content: "¥";
+      font-size: 20rpx;
+    }
+  }
+
+  .quan_box {
+    font-size: 20rpx;
+    color: #e90406;
+    margin: 16rpx 0 0;
+
+    .quan {
+      padding: 2rpx 8rpx;
+      border-radius: 8rpx;
+      border: 1rpx solid rgba($color: #e90406, $alpha: 0.3);
+      margin-right: 10rpx;
+
+      .pl {
+        padding-right: 10rpx;
+      }
+    }
+  }
+
+  .product-price-favour {
+    color: #888888;
+    font-size: 22rpx;
+    text-decoration: line-through;
+    margin-left: 20rpx;
+  }
+
+  .product-tip {
+    position: absolute;
+    right: 20rpx;
+    background-color: #ff3333;
+    color: #ffffff;
+    padding: 0 20rpx;
+    border-radius: 10rpx;
+  }
+
+  .product-unit {
+    font-size: 24rpx;
+    color: #18bb88;
+  }
+
+  .product-txt,
+  .product-text {
+    font-size: 22rpx;
+    color: #787878;
+
+    .iconfont {
+      margin-right: 6rpx;
+    }
+  }
+
+  .product-text {
+    margin-left: 16rpx;
+  }
+
+  .red {
+    color: #fa2e18;
+  }
+
+  .fenxiang {
+    font-size: 20rpx;
+    background: rgba(250, 46, 24, 0.08);
+    display: inline-block;
+    border-radius: 6rpx;
+    padding: 0 16rpx;
+  }
+}
+
+// 活动-end
+
+.l_tabBar {
+  height: 400rpx;
+  flex-wrap: wrap;
+  padding: 10rpx 20rpx;
+  border-radius: 10rpx;
+  margin: 0 0 20rpx;
+  //   background: url("https://img1.baidu.com/it/u=3052557249,4146060588&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=465")
+  // no-repeat;
+  background-size: 100% 100%;
+
+  .search-box {
+    width: 100%;
+    padding: 10rpx;
+    margin-top: 68rpx;
+    margin-bottom: 12rpx;
+
+    .district {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #333;
+
+      .iconfont {
+        font-size: 20rpx;
+        margin-left: 12rpx;
+      }
+    }
+
+    .search {
+      border: 1px solid #d78c2e;
+      height: 60rpx;
+      line-height: 60rpx;
+      padding-left: 20rpx;
+      border-radius: 31rpx;
+      background-color: #fff;
+
+      .iconfont {
+        font-size: 30rpx;
+      }
+
+      .inp {
+        font-size: 25rpx;
+        padding: 0 8rpx;
+        width: 300rpx;
+      }
+
+      .search_btn {
+        background-color: #d78c2e;
+        height: 100%;
+        color: #fff;
+        border-radius: 31rpx;
+        font-size: 28rpx;
+        padding: 0 28rpx;
+      }
+    }
+
+    .scan-ico {
+      font-size: 55rpx;
+    }
+  }
+}
+
+.nav_box {
+  margin: -50rpx 0 10rpx;
+  padding: 20rpx 20rpx;
+  border-radius: 20rpx;
+  flex-wrap: wrap;
+  background-color: #f5f6f8;
+
+  .item {
+    width: 22%;
+    margin: 10rpx 10rpx;
+  }
+
+  .ico {
+    width: 72rpx;
+    height: 72rpx;
+  }
+
+  .tit {
+    font-size: 24rpx;
+    padding-top: 12rpx;
+  }
+  .tit1 {
+    font-size: 20rpx;
+    color: #a0a0a0;
+  }
+}
+.nav {
+  width: 25%;
+  height: 40rpx;
+  line-height: 40rpx;
+  text-align: center;
+  font-size: 28rpx;
+  color: #a0a0a0;
+  margin-bottom: 16rpx;
+}
+.nav:nth-child(2) {
+  border-left: 1rpx solid rgba($color: #a0a0a0, $alpha: 0.5);
+  border-right: 1rpx solid rgba($color: #a0a0a0, $alpha: 0.5);
+}
+.nav:nth-child(3) {
+  border-right: 1rpx solid rgba($color: #a0a0a0, $alpha: 0.5);
+}
+.nav-active {
+  color: #1f1f1f;
+}
+.sort_box {
+  position: sticky;
+  position: -webkit-sticky;
+  top: 160rpx;
+  overflow: scroll;
+  flex-wrap: nowrap;
+  padding: 16rpx 0;
+  margin: 0 30rpx 10rpx;
+  background-color: #f5f6f8;
+
+  .sort {
+    white-space: nowrap;
+    font-size: 23rpx;
+    color: #a0a0a0;
+    padding: 6rpx 15rpx;
+    border-radius: 6rpx;
+    border: 1rpx solid #fff;
+    margin-right: 14rpx;
+    background-color: #fff;
+  }
+
+  .sort-active {
+    color: #15acda;
+    border: 1rpx solid rgba($color: #58b0d9, $alpha: 0.5);
+    background-color: rgba($color: #e3f3fd, $alpha: 1);
+  }
+}
+.container {
+  overflow: visible;
+}
+/* 隐藏滚动条 */
+::-webkit-scrollbar {
+  display: none;
+}
+</style>

+ 799 - 0
src/pagesC/shoppingMallType/index.vue

@@ -0,0 +1,799 @@
+<template>
+  <div class="container">
+    <view class="hander-top">
+      <view class="icon-back-wrap" @click="onBack">
+        <image
+          class="icon-back"
+          src="@/static/preview/icon-back.png"
+          mode="widthFix"
+        />
+      </view>
+      <view class="count">{{ typeObj.name }}购物</view>
+      <view class="capsule"></view>
+    </view>
+    <div
+      class="l_tabBar"
+      v-show="!head"
+      :style="{
+        background: `url(${banner.image}) no-repeat`,
+        'background-size': '100% 100%',
+      }"
+    >
+      <div class="search-box flex_r flex_jc">
+        <div class="search flex_r flex_jb flex_ac">
+          <span class="iconfont">&#xe661;</span>
+          <input
+            v-model="keyword"
+            @confirm="toSearch"
+            class="inp"
+            placeholder="搜索你要的内容"
+          />
+          <span class="search_btn" @click="toSearch">搜索</span>
+        </div>
+      </div>
+    </div>
+    <div class="head" v-show="head">
+      <image
+        class="back"
+        src="/static/preview/arrow-right.png"
+        mode="widthFix"
+        @click="onBack"
+      />
+      <p class="title">{{ typeObj.name }}购物</p>
+    </div>
+    <div class="nav_box flex_r flex_jb">
+      <div
+        class="item flex_c flex_ac"
+        v-for="(i, s) in tabs"
+        :key="s"
+        @click="clickPd(i)"
+      >
+        <uni-badge
+          size="small"
+          :text="i.badge"
+          absolute="rightTop"
+          type="error"
+        >
+          <img :src="i.image" alt="" class="ico" />
+        </uni-badge>
+        <div class="tit">{{ i.name }}</div>
+      </div>
+    </div>
+    <div class="sort_box flex_r flex_jb flex_ac">
+      <div
+        :class="sortIndex == s ? 'sort sort-active' : 'sort'"
+        v-for="(i, s) in sort"
+        :key="s"
+        @click="search(i, s)"
+      >
+        <span>{{ i.cat_name }}</span>
+      </div>
+    </div>
+    <view class="product-list" v-if="goods.length > 0">
+      <view
+        class="product flex_r flex_jb flex_ac"
+        v-for="(i, s) in goods"
+        :key="s"
+        @click="NavToGoodsDetail(i.goods_sign)"
+      >
+        <view class="image-view">
+          <image class="product-image" :src="i.goods_image_url"></image>
+        </view>
+        <view class="content-view flex_c flex_jb">
+          <view :class="['product-title', 'ellipsis2']">
+            <span class="product-type">
+              {{ typeObj.name }}
+            </span>
+            {{ i.goods_name }}
+          </view>
+          <view class="flex_r flex_jb flex_ae">
+            <view class="product-price">
+              <text class="product-price-original">
+                {{
+                  Math.floor(
+                    (i.min_group_price / 100 - i.coupon_discount / 100) * 100
+                  ) / 100
+                }}
+              </text>
+              <text class="product-price-favour"
+                >¥{{ i.min_group_price / 100 }}</text
+              >
+            </view>
+            <view class="buyed"> {{ i.sales_tip }}人已购 </view>
+          </view>
+          <view class="quan_box flex_r flex_ac">
+            <view class="quan" v-if="i.has_coupon">
+              <span class="pl">券</span>
+              <span>¥{{ i.coupon_discount / 100 }}</span>
+            </view>
+            <view class="quan">
+              <span>返现</span>
+              <span
+                >¥{{
+                  Math.floor(
+                    (i.min_group_price / 100) * (i.promotion_rate / 1000) * 100
+                  ) / 100
+                }}</span
+              >
+            </view>
+          </view>
+          <view class="shop"> {{ i.mall_name }} </view>
+        </view>
+      </view>
+    </view>
+    <not-goods v-else textStr="暂无数据"></not-goods>
+    <!-- 精品推荐-end -->
+    <view class="fz_w_text">好生活,茶付宝!</view>
+
+    <uni-popup ref="popup" type="center">
+      <div class="popup_con">
+        <div class="p_tit">
+          <span>{{ channel.name }}</span>
+        </div>
+        <div class="p_con flex_r flex_ac">
+          <img
+            class="logo"
+            src="https://teaclub.oss-cn-chengdu.aliyuncs.com/mall/logo.png"
+            alt=""
+          />
+          <img
+            class="sp"
+            src="https://teaclub.oss-cn-chengdu.aliyuncs.com/mall/%E5%BD%A9%E8%89%B2-%E5%90%91%E5%8F%B3.png"
+            alt=""
+          />
+          <img
+            src="https://teaclub.oss-cn-chengdu.aliyuncs.com/mall/%E6%8B%BC%E5%A4%9A%E5%A4%9A%20%281%29.png"
+            alt=""
+          />
+        </div>
+        <div class="btnbar flex_r flex_ac flex_jb">
+          <div class="btn" @click="copy">复制链接</div>
+          <div class="btn right" @click="toPdd">前往购买</div>
+        </div>
+      </div>
+    </uni-popup>
+  </div>
+</template>
+<script>
+let page = 1;
+import { post } from "@/request/api.js";
+import uniCopy from "@/utils/copy";
+import notGoods from "@/components/not-goods/index.vue";
+export default {
+  components: { notGoods },
+  data() {
+    return {
+      goods: [], // 精品推荐
+      haveGoods: false, // 是否有商品
+      tabs: [],
+      navIndex: 0,
+      sort: [], // 小分类
+      sortIndex: 0,
+      head: false,
+      cat_id: "",
+      channel: {},
+      typeObj: {},
+      keyword: "",
+      banner: {},
+    };
+  },
+  async onShow() {
+    uni.setNavigationBarTitle({
+      title: "拼多多购物",
+    });
+    page = 1;
+    this.goods = [];
+    this.duoduoCats();
+    this.goodsDay();
+  },
+  onLoad(da) {
+    uni.setTabBarStyle({
+      color: "#999",
+      selectedColor: "#E68B1E",
+    });
+    console.log(da);
+
+    this.typeObj = da;
+  },
+  onHide() {},
+  onPageScroll(e) {
+    if (e.scrollTop > 0) {
+      this.head = true;
+    } else {
+      this.head = false;
+    }
+  },
+  methods: {
+    toSearch() {
+      page = 1;
+      this.goods = [];
+      this.goodsDay();
+    },
+    search(item, index) {
+      this.sortIndex = index;
+      page = 1;
+      this.goods = [];
+      this.cat_id = item.cat_id;
+      this.goodsDay();
+    },
+    duoduoCats() {
+      post("v1/cashback/duoduoCats").then((res) => {
+        if (res.code === 0) {
+          this.sort = res.data.cats;
+          this.tabs = res.data.channel;
+          this.banner = res.data.banner[this.typeObj.type];
+        } else {
+          this.$toast(res.msg);
+        }
+      });
+    },
+    toPage(url) {
+      this.goto(url);
+    },
+    clickPd(e) {
+      console.log(e);
+      this.channel = e;
+
+      this.$refs.popup.open("center");
+    },
+    copy() {
+      let _this = this;
+      post("v1/cashback/duoduoGs", {
+        channel_type: this.channel.activity_tags,
+      }).then((res) => {
+        if (res.code === 0) {
+          let data = null;
+          if (
+            _this.channel.activity_tags == 4 ||
+            _this.channel.activity_tags == 39996
+          ) {
+            data = JSON.parse(res.data).resource_url_response;
+            console.log(data);
+            uniCopy({
+              content: data.single_url_list.short_url,
+              success: (res) => {
+                _this.$refs.popup.close();
+                uni.showToast({
+                  title: "已复制",
+                  icon: "none",
+                  duration: 1000,
+                });
+              },
+              error: (e) => {},
+            });
+          } else {
+            data = JSON.parse(res.data).rp_promotion_url_generate_response
+              .url_list[0];
+            console.log(data);
+            uniCopy({
+              content: data.short_url,
+              success: (res) => {
+                _this.$refs.popup.close();
+                uni.showToast({
+                  title: "已复制",
+                  icon: "none",
+                  duration: 1000,
+                });
+              },
+              error: (e) => {},
+            });
+          }
+        } else {
+          this.$toast(res.msg);
+        }
+      });
+    },
+    toPdd() {
+      let _this = this;
+      post("v1/cashback/duoduoGs", {
+        channel_type: this.channel.activity_tags,
+      }).then((res) => {
+        console.log(JSON.parse(res.data));
+
+        if (res.code === 0) {
+          let data = null;
+          if (
+            this.channel.activity_tags == 4 ||
+            this.channel.activity_tags == 39996
+          ) {
+            data = JSON.parse(res.data).resource_url_response;
+            console.log(data);
+            wx.navigateToMiniProgram({
+              appId: data.we_app_info.app_id,
+              path: data.we_app_info.page_path,
+              extraData: {
+                user_name: data.we_app_info.user_name,
+              },
+              envVersion: "release",
+              success(res) {
+                // 打开成功
+                _this.$refs.popup.close();
+              },
+            });
+          } else {
+            data = JSON.parse(res.data).rp_promotion_url_generate_response
+              .url_list[0];
+            console.log(data);
+            wx.navigateToMiniProgram({
+              appId: data.we_app_info.app_id,
+              path: data.we_app_info.page_path,
+              extraData: {
+                user_name: data.we_app_info.user_name,
+              },
+              envVersion: "release",
+              success(res) {
+                // 打开成功
+                _this.$refs.popup.close();
+              },
+            });
+          }
+        } else {
+          this.$toast(res.msg);
+        }
+      });
+    },
+    // 获取商品列表
+    goodsDay() {
+      uni.showLoading();
+      let that = this;
+      let data = { p: page, cat_id: this.cat_id, keyword: this.keyword };
+      post("v1/cashback/duoduoList", data)
+        .then((res) => {
+          uni.hideLoading();
+          if (res.code === 0) {
+            let obj = JSON.parse(res.data).goods_search_response.goods_list;
+            console.log(obj);
+
+            if (page <= 1) that.goods = [];
+            if (obj.length > 0) {
+              obj.forEach((e) => {
+                that.goods.push(e);
+              });
+            } else {
+              if (page == 1) {
+                that.haveGoods = true;
+                page = -1;
+              } else {
+                page = -1;
+                this.$toast("暂无更多");
+              }
+            }
+          } else {
+            if (page == 1) {
+              that.haveGoods = true;
+              page = -1;
+            } else {
+              page = -1;
+              this.$toast("暂无更多");
+            }
+          }
+        })
+        .catch((e) => {
+          uni.hideLoading();
+        });
+    },
+    onBack() {
+      uni.navigateBack();
+    },
+    // 跳转到商品详情页
+    NavToGoodsDetail(goods_sign, type) {
+      this.goto("/pagesC/shoppingMallType/p_details", {
+        goods_sign,
+        type: this.type,
+      });
+    },
+  },
+  //页面上拉触底事件的处理函数
+  onReachBottom() {
+    if (page != -1) {
+      setTimeout(() => {
+        ++page;
+        this.goodsDay();
+      }, 500);
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+// 页面配置
+page {
+  background: #f5f5f5;
+}
+
+.head {
+  width: 100%;
+  height: 160rpx;
+  text-align: center;
+  position: fixed;
+  top: 0;
+  z-index: 999;
+  //   padding: calc(var(--status-bar-height) + 50rpx) 0 36rpx;
+  background: #fff;
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    padding-top: calc(var(--status-bar-height) + 46rpx);
+  }
+
+  .back {
+    width: 36rpx;
+    height: 36rpx;
+    position: absolute;
+    top: calc(var(--status-bar-height) + 48rpx);
+    left: 30rpx;
+  }
+}
+
+// 页面配置-end
+
+.product-list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  padding: 0 30rpx;
+
+  .product {
+    width: 100%;
+    margin-bottom: 20rpx;
+    padding: 12rpx;
+    border-radius: 10rpx;
+    box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.06);
+    background-color: #fff;
+
+    &:nth-child(2n) {
+      // margin-left: 3%;
+    }
+  }
+
+  .product-image {
+    border-radius: 10rpx;
+    width: 29vw;
+    height: 29vw;
+    object-fit: cover;
+  }
+
+  .content-view {
+    padding: 0 16rpx;
+  }
+
+  .product-title {
+    width: 100%;
+    overflow: hidden;
+    line-height: 1.5;
+    font-size: 26rpx;
+    font-weight: bold;
+    color: #121212;
+  }
+  .product-type {
+    font-size: 14rpx;
+    font-weight: bold;
+    color: #fff;
+    line-height: 100%;
+    padding: 4rpx 6rpx;
+    border-radius: 4rpx;
+    margin-right: 16rpx;
+    background-color: #e90406;
+  }
+
+  .product-price {
+    color: #121212;
+    font-size: 28rpx;
+    // position: relative;
+    margin: 16rpx 0 4rpx;
+  }
+  .buyed {
+    color: #888888;
+    font-size: 22rpx;
+    margin: 16rpx 0 4rpx;
+  }
+
+  .product-price-original {
+    color: #000;
+    font-size: 32rpx;
+    font-weight: bold;
+
+    &:before {
+      content: "¥";
+      font-size: 20rpx;
+    }
+  }
+
+  .quan_box {
+    font-size: 20rpx;
+    color: #e90406;
+    margin: 12rpx 0 14rpx;
+
+    .quan {
+      padding: 2rpx 8rpx;
+      border-radius: 8rpx;
+      border: 1rpx solid rgba($color: #e90406, $alpha: 0.3);
+      margin-right: 10rpx;
+
+      .pl {
+        padding-right: 10rpx;
+      }
+    }
+  }
+  .shop {
+    font-size: 22rpx;
+    color: #c4c4c4;
+  }
+
+  .product-price-favour {
+    color: #a0a0a0;
+    font-size: 22rpx;
+    text-decoration: line-through;
+    margin-left: 16rpx;
+  }
+
+  .product-tip {
+    position: absolute;
+    right: 20rpx;
+    background-color: #ff3333;
+    color: #ffffff;
+    padding: 0 20rpx;
+    border-radius: 10rpx;
+  }
+
+  .product-unit {
+    font-size: 24rpx;
+    color: #18bb88;
+  }
+
+  .product-txt,
+  .product-text {
+    font-size: 22rpx;
+    color: #787878;
+
+    .iconfont {
+      margin-right: 6rpx;
+    }
+  }
+
+  .product-text {
+    margin-left: 16rpx;
+  }
+
+  .red {
+    color: #fa2e18;
+  }
+
+  .fenxiang {
+    font-size: 20rpx;
+    background: rgba(250, 46, 24, 0.08);
+    display: inline-block;
+    border-radius: 6rpx;
+    padding: 0 16rpx;
+  }
+}
+
+// 活动-end
+.hander-top {
+  position: absolute;
+  z-index: 1000;
+  top: 90rpx;
+  left: 0;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+
+  .icon-back-wrap {
+    width: 64rpx;
+    height: 64rpx;
+
+    .icon-back {
+      width: 64rpx;
+      height: 64rpx;
+    }
+  }
+
+  .count {
+    color: #fff;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 64rpx;
+  }
+  .capsule {
+    width: 64rpx;
+  }
+}
+.l_tabBar {
+  height: 450rpx;
+  flex-wrap: wrap;
+  padding: 10rpx 20rpx;
+  border-radius: 10rpx;
+  margin: 0 0 20rpx;
+  // background: url("https://preview.qiantucdn.com/58pic/33/87/38/37i58PICu2JQFGbjHJ3bE_PIC2018.jpg%21qt_gao320")
+  //   no-repeat;
+  background-size: 100% 100%;
+
+  .search-box {
+    width: 100%;
+    padding: 10rpx;
+    margin-top: 300rpx;
+    margin-bottom: 12rpx;
+
+    .district {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #333;
+
+      .iconfont {
+        font-size: 20rpx;
+        margin-left: 12rpx;
+      }
+    }
+
+    .search {
+      border: 1px solid #d78c2e;
+      height: 60rpx;
+      line-height: 60rpx;
+      padding-left: 20rpx;
+      border-radius: 31rpx;
+      background-color: #fff;
+
+      .iconfont {
+        font-size: 30rpx;
+      }
+
+      .inp {
+        font-size: 25rpx;
+        padding: 0 8rpx;
+        width: 300rpx;
+      }
+
+      .search_btn {
+        background-color: #d78c2e;
+        height: 100%;
+        color: #fff;
+        border-radius: 31rpx;
+        font-size: 28rpx;
+        padding: 0 28rpx;
+      }
+    }
+
+    .scan-ico {
+      font-size: 55rpx;
+    }
+  }
+}
+
+.nav_box {
+  margin: -50rpx 0 0;
+  padding: 20rpx 20rpx 0;
+  border-radius: 20rpx;
+  flex-wrap: wrap;
+  background-color: #f5f6f8;
+
+  .item {
+    width: 22%;
+    margin: 10rpx 10rpx;
+  }
+
+  .ico {
+    width: 72rpx;
+    height: 72rpx;
+  }
+
+  .tit {
+    font-size: 24rpx;
+    padding-top: 12rpx;
+  }
+  .tit1 {
+    font-size: 20rpx;
+    color: #a0a0a0;
+  }
+}
+.nav {
+  width: 25%;
+  height: 40rpx;
+  line-height: 40rpx;
+  text-align: center;
+  font-size: 28rpx;
+  color: #a0a0a0;
+  margin-bottom: 16rpx;
+}
+.nav:nth-child(2) {
+  border-left: 1rpx solid rgba($color: #a0a0a0, $alpha: 0.5);
+  border-right: 1rpx solid rgba($color: #a0a0a0, $alpha: 0.5);
+}
+.nav:nth-child(3) {
+  border-right: 1rpx solid rgba($color: #a0a0a0, $alpha: 0.5);
+}
+.nav-active {
+  color: #1f1f1f;
+}
+.sort_box {
+  position: sticky;
+  position: -webkit-sticky;
+  top: 160rpx;
+  overflow: scroll;
+  flex-wrap: nowrap;
+  padding: 16rpx 0;
+  margin: 0 30rpx 10rpx;
+  background-color: #f5f6f8;
+
+  .sort {
+    white-space: nowrap;
+    font-size: 23rpx;
+    color: #a0a0a0;
+    padding: 6rpx 15rpx;
+    border-radius: 6rpx;
+    border: 1rpx solid #fff;
+    margin-right: 14rpx;
+    background-color: #fff;
+  }
+
+  .sort-active {
+    color: #15acda;
+    border: 1rpx solid rgba($color: #58b0d9, $alpha: 0.5);
+    background-color: rgba($color: #e3f3fd, $alpha: 1);
+  }
+}
+.container {
+  overflow: visible;
+}
+/* 隐藏滚动条 */
+::-webkit-scrollbar {
+  display: none;
+}
+
+.popup_con {
+  width: 600rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 40rpx;
+  border-radius: 20rpx;
+  margin: 0 auto;
+  background-color: #fff;
+
+  .p_tit {
+    text-align: center;
+    font-size: 30rpx;
+    font-weight: 600;
+  }
+
+  .p_con {
+    margin: 70rpx 0;
+    img {
+      width: 100rpx;
+      height: 100rpx;
+    }
+
+    .logo {
+      border-radius: 50%;
+      border: 2rpx solid #00a141;
+    }
+
+    .sp {
+      width: 50rpx;
+      height: 50rpx;
+      margin: 0 60rpx;
+    }
+  }
+
+  .btnbar {
+    width: 100%;
+    .btn {
+      width: 48%;
+      color: #000;
+      font-size: 24rpx;
+      text-align: center;
+      padding: 26rpx 0;
+      border-radius: 6rpx;
+      border: 1rpx solid#c5c5c5;
+      background-color: #fff;
+    }
+    .right {
+      color: #fff;
+      border: 1rpx solid#46AFE6;
+      background-color: #46afe6;
+    }
+  }
+}
+</style>

+ 656 - 0
src/pagesC/shoppingMallType/order/list.vue

@@ -0,0 +1,656 @@
+<template>
+    <view class="container">
+        <view class="status-box">
+            <view class="status_tap_box" style="position: relative">
+                <view @tap="statusTap" class="status-label" v-for="(item, index) in statusType" :key="index" :class="item[0] == currentType ? 'active' : ''" :data-index="item[0]">{{ item[1] }}</view>
+            </view>
+        </view>
+        <not-goods v-if="haveGoods" textStr="抱歉!暂无相关订单" />
+        <view class="order-list" v-if="orderList && orderList.length > 0">
+            <view v-for="(li, index) in orderList" :key="index">
+                <view class="a-order">
+                    <view class="overflow" :data-id="li.id">
+                        <view class="list-title flex_r flex_ac flex_jb">
+                            <view class="fz_text">立邦官方旗舰店</view>
+                            <view :class="['fz_text', 'typetag', 'tagcolor' + li.type]">拼多多</view>
+                        </view>
+                        <view class="goods-info flex_r flex_jb" :data-type="li.type" @tap="toDetails(li)">
+                            <image :src="li.original_img" mode="cover" class="goods-img" />
+                            <view class="goodsDetail_info flex_c flex_jb">
+                                <view class="good_name flex_r flex_ac flex_jb">
+                                    <span class="width_r ellipsis">{{ li.goods_name || "" }}</span>
+                                    <span class="status_text">即将到账</span>
+                                </view>
+                                <view class="good_text flex_r flex_ac flex_jb" :style="{bottom:li.type == 1?'15rpx':0}">
+                                    <view class="unimport flex_r flex_ac flex_jb width_r">
+                                        <span class="width_r_1 ellipsis">交易编号:241025-276048145972667</span>
+                                        <view class="copy">复制</view>
+                                    </view>
+                                    <span class="status_text status_text_1">已付款</span>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="price-box flex_r flex_ac">
+                        <view class="item flex_c flex_ac">
+                            <span class="k">实付</span>
+                            <span class="v">¥18.90</span>
+                        </view>
+                        <view class="item flex_c flex_ac">
+                            <span class="k">预估收益</span>
+                            <span class="v">¥18.90></span>
+                        </view>
+                    </view>
+                    <view class="time">付款时间:2024/10/28 11:56:58</view>
+                </view>
+            </view>
+        </view>
+        <view class="loading-indicator opacity">{{ loadingTip }}</view>
+        <!-- <authorize-module ref="autho" :shopInfo="shopInfo" @authGetTelSuccess="onauthGetTelSuccess" /> -->
+    </view>
+</template>
+<script>
+var page = 1;
+var app = getApp();
+import { ToPayOpre } from "@/utils/reqTools.js";
+var toPayOpre = new ToPayOpre();
+import notGoods from "@/components/not-goods/index";
+import authorizeModule from "@/components/authorize-module/index";
+import { post } from "@/request/api.js";
+export default {
+    components: {
+        notGoods,
+        authorizeModule
+    },
+    data() {
+        return {
+            statusType: [
+                ["1", "已付款"],
+                ["2", "退款/售后"],
+            ],
+            orderList: [],
+            currentType: "0",
+            haveGoods: false,
+            loadingMoreHidden: true,
+            loadingTip: "没有更多了",
+            userId: "",
+            isweixin: "",
+            pt: {},
+            shopInfo: {}, // 商铺信息
+            unid: "",
+            token: uni.getStorageSync("token"),
+        };
+    },
+    onLoad(options) {
+        this.currentType = options.status ? options.status : 0;
+    },
+    onShow() {
+        page = 1
+        if (!this.token) this.login()
+        else this.loadData();
+    },
+    methods: {
+        login() {
+            let that = this;
+            // #ifdef  MP-WEIXIN
+            wx.login({
+                success(res) {
+                    if (res.code) {
+                        post("v1/appletLogin", {
+                            code: res.code,
+                            invite: uni.getStorageSync("inviteCode") || "",
+                        }).then((res) => {
+                            if (res.code === 0) {
+                                if (res.data.token) {
+                                    uni.setStorageSync("token", res.data.token);
+                                    that.loadData();
+                                } else {
+                                    that.unid = res.data.unid;
+                                    uni.setStorageSync("unid", res.data.unid);
+                                    that.shopInfo = app.globalData.shopInfo;
+                                    // that.SoHAuth(); //调取授权弹窗
+                                }
+                            }
+                        });
+                    }
+                },
+            });
+            // #endif
+        },
+        // 获取手机号
+        // onauthGetTelSuccess(da) {
+        //     this.SoHAuth();
+        //     post("v1/getMobile", {
+        //         unid: this.unid,
+        //         ...da.detail,
+        //     }).then((res) => {
+        //         if (res.code === 0) {
+        //             uni.setStorageSync("token", res.data.token);
+        //             this.loadData();
+        //         }
+        //     });
+        // },
+        // SoHAuth() {
+        //     this.$refs.autho.onSoHAuth();
+        // },
+        
+        clearData(isclearCat = true, callBack) {
+            page = 1;
+            this.orderList = [];
+            this.haveGoods = false;
+            if (callBack) {
+                callBack();
+            }
+        },
+        loadData() {
+            if (page == -1) {
+                return;
+            }
+            uni.showLoading({
+                title: "加载中…",
+                mask: true,
+            });
+            var data = {
+                page,
+                type: this.currentType,
+            };
+
+            post("v1/my/order", data).then((res) => {
+                if (res.code === 0) {
+                    uni.hideLoading();
+                    uni.stopPullDownRefresh();
+                    let da = res.data.data.data;
+
+                    if (page <= 1) {
+                        this.orderList = [];
+                        if (!da.length) this.haveGoods = true;
+                    }
+                    this.orderList = [...this.orderList, ...da];
+                } else {
+                    this.$toast(res.msg || "");
+                    this.loadingMoreHidden = false;
+                }
+            });
+        },
+        toDetails(da) {
+            this.goto("/pages/szw-order-details/index", { id: da.order_id });
+        },
+
+        // 立即支付
+        toPay(e) {
+            let type = "jsapi";
+            // #ifdef  H5
+            type = "H5";
+            // #endif
+            // #ifdef  APP
+            type = "app";
+            // #endif
+            // #ifdef  MP-WEIXIN
+            type = "jsapi";
+            // #endif
+            post("v1/goods/payOrder", {
+                id: e.order_id,
+                trade_type: type,
+            }).then((res) => {
+                if(res.data && res.data != 200){
+                    let data = JSON.parse(res.data)
+                    data.prepayid = data.package?data.package.split('prepay_id=')[1]:''
+                    if (res.code === 0 && data.prepayid) {
+                        toPayOpre.toPay(data, (da) => {
+                            if (!da) {
+                                // 支付成功
+                                this.$toast("支付成功");
+                            } else {
+                                // 支付失败
+                                this.$toast("支付已取消");
+                            }
+                            // this.$toast('支付成功');
+                            this.loadData();
+                        });
+                    }
+                }
+            });
+        },
+        // 取消订单
+        toCancel(e) {
+            let that = this;
+            uni.showModal({
+                title: "温馨提示",
+                content: "取消订单后,微信支付部分也将退回至余额账户",
+                // showCancel: false,
+                confirmText: "知道了",
+                confirmColor: "#f02f2f",
+                cancelText: "取消",
+                cancelColor: "#bbb",
+                success(res) {
+                    if (res.confirm) {
+                        post("v1/my/orderCancel", {
+                            order_id: e.order_id,
+                        }).then((res) => {
+                            if (res.code === 0) {
+                                that.$toast(res.msg);
+                                that.loadData();
+                            }
+                        });
+                    }
+                },
+            });
+        },
+        // 确认收货
+        toTake(e) {
+            let that = this;
+            uni.showModal({
+                content: "亲,“确定收货”代表着本订单的交付流程已经完成,不再支持任何形式的退换货。",
+                confirmText: "确认收货",
+                confirmColor: "#fa2f2e",
+                cancelText: "取消",
+                cancelColor: "#bbb",
+                success(res) {
+                    if (res.confirm) {
+                        post("v1/goods/confirmOrder", {
+                            order_id: e.order_id,
+                        }).then((res) => {
+                            if (res.code === 0) {
+                                that.$toast(res.msg);
+                                page = 1
+                                that.loadData();
+                            }
+                        });
+                    }
+                },
+            });
+        },
+        toCode(e) {
+            this.goto("/pagesB/order/verificationCode", { id: e.order_id });
+        },
+        //菜单切换
+        statusTap(e) {
+            //重置数据
+            var curType = e.currentTarget.dataset.index;
+            this.currentType = curType;
+            this.clearData(false, this.loadData);
+        },
+
+        //删除订单
+        removeItem(order_id) {
+            let that = this;
+            uni.showModal({
+                content: "亲,确认删除本订单吗?",
+                confirmText: "确认删除",
+                confirmColor: "#fa2f2e",
+                cancelText: "取消",
+                cancelColor: "#bbb",
+                success(res) {
+                    if (res.confirm) {
+                        post("v1/my/orderDel", {
+                            order_id
+                        }).then(res => {
+                            if (res.code === 0) {
+                                that.$toast(res.msg);
+                                that.loadData();
+                            }
+                        });
+                    }
+                },
+            });
+        }
+    },
+    computed: {
+        // 0  支付状态   1 订单状态
+        tidyStatus() {
+            return (da) => {
+                let str;
+                if (da[1] === 0) str = "待发货";
+                if (da[1] === 1) str = "已发货";
+                if (da[1] === 2) str = "已完成";
+                if (da[1] === 3) str = "申请退货";
+                if (da[1] === 4) str = "确认退货";
+                if (da[1] === 5) str = "已作废";
+                if (da[1] === 6) str = "转邮寄";
+                if (da[1] === 7) str = "待收货";
+                if (da[1] === 8) str = "待自提";
+                if ([0, 2].includes(da[0]) && da[1] != 5) str = "待支付";
+                return str;
+            };
+        },
+    },
+    //上拉加载事件
+    onReachBottom() {
+        if (page != -1) {
+            var that = this;
+            setTimeout(() => {
+                // 为页数迭加1
+                ++page;
+                that.loadData();
+            }, 800);
+        }
+    },
+    // 下拉刷新
+    onPullDownRefresh() {
+        var that = this;
+        that.clearData(false, () => {
+            that.loadData();
+        });
+    },
+    // 监听卸载页面  同等于  返回拦截
+    onUnload() {
+        let pages = getCurrentPages();
+        let prevPage = pages[pages.length - 2]?.route
+        if (prevPage == "pages/to-pay-list/index") {
+            uni.switchTab({ url: "/pages/my/index" });
+        }
+    },
+};
+</script>
+<style lang="scss">
+page {
+    background-color: #f3f5f7;
+}
+
+.container {
+    width: 100%;
+}
+
+.fl {
+    float: left;
+}
+
+.fr {
+    float: right;
+}
+
+.overflow {
+    overflow: hidden;
+}
+
+.r_color {
+    color: #fa2f2e;
+}
+
+.loading-indicator {
+    width: 100%;
+    text-align: center;
+    font-size: 24rpx;
+    color: #666;
+    margin: 20rpx 0;
+    line-height: 1.5;
+}
+
+.opacity {
+    opacity: 0;
+    display: none;
+}
+
+.terraceComp {
+    height: 84rpx;
+}
+
+.terraceComp_fix {
+    position: fixed;
+    top: -12rpx;
+    left: 0;
+    right: 0;
+    z-index: 15;
+}
+
+.status-box {
+    width: 100%;
+    height: 94rpx;
+}
+
+.status_tap_box {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    overflow: hidden;
+    line-height: 88rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    z-index: 300;
+    box-shadow: 0rpx 8rpx 8rpx rgba(0, 0, 0, 0.025);
+}
+
+.status-box .status-label {
+    flex-grow: 1;
+    height: 100%;
+    text-align: center;
+    font-size: 28rpx;
+    color: #353535;
+    box-sizing: border-box;
+    position: relative;
+    border-bottom: 6rpx solid transparent;
+}
+
+.status-box .status-label.active {
+    color: #e05f0b;
+    border-bottom-color: #e05f0b;
+}
+
+.order-list {
+    width: 100%;
+    overflow: hidden;
+}
+
+.order-list .a-order {
+    // width: 100%;
+    padding: 30rpx;
+    box-sizing: border-box;
+    background-color: #fff;
+    margin: 24rpx;
+    border-radius: 6rpx;
+}
+
+.order-list .a-order .order-date {
+    padding: 16rpx 30rpx 20rpx;
+    line-height: 40rpx;
+    font-size: 26rpx;
+    color: #000;
+    overflow: hidden;
+}
+
+.order-list .a-order .order-date .red {
+    font-size: 26rpx;
+    color: #fa2f2e;
+}
+
+.order-list .a-order .order-date text.r_color {
+    font-weight: 600;
+}
+
+.a-order .list-title {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #000;
+    padding: 0 0 16rpx;
+}
+
+.avaImgs {
+    width: 54rpx;
+    height: 54rpx;
+    overflow: hidden;
+    border-radius: 50%;
+    background-color: #f3f5f7;
+    margin-right: 20rpx;
+}
+
+.order-list .a-order .price-box {
+    // width: 100%;
+    box-sizing: border-box;
+    padding: 16rpx 0;
+    font-size: 26rpx;
+    justify-content: center;
+    border-radius: 6rpx;
+    margin: 16rpx 0;
+    background-color: #F4F4F4;
+    .item{
+        width: 50%;
+        .k{
+            font-size: 26rpx;
+            color: #868686;
+            padding-bottom: 16rpx;
+        }
+        .v{
+            font-size: 30rpx;
+            color: #000;
+        }
+    }
+
+    
+}
+
+.a-order .price-box .btn {
+    box-sizing: border-box;
+    text-align: center;
+    border-radius: 40rpx;
+    margin-left: 20rpx;
+    border: 1rpx solid #ccc;
+    padding: 12rpx 24rpx;
+}
+
+.order-list .a-order .price-box .total-price {
+    color: #e05f0b;
+}
+
+.a-order .price-box .topay-btn {
+    border-color: #e05f0b;
+    color: #e05f0b;
+}
+
+.a-order .price-box .r_topay-btn {
+    border-color: #e05f0b;
+    background-color: #e05f0b;
+    color: #fff;
+}
+.time{
+    color: #868686;
+    font-size: 24rpx;
+}
+.goods-info{
+    padding: 12rpx 0;
+    .goods-img{
+        width: 120rpx;
+        height: 120rpx;
+        border-radius: 10rpx;
+    }
+    .goodsDetail_info{
+        width: calc(100% - 130rpx);
+        padding: 10rpx 0 10rpx 20rpx;
+        position: relative;
+    }
+    .good_name{
+        font-size: 28rpx;
+        // font-weight: 600;
+    }
+    .width_r{
+        width: calc(100% - 130rpx);
+    }
+    .width_r_1{
+        width: calc(100% - 60rpx);
+        color: #868686;
+        font-size: 26rpx;
+    }
+    .status_text {
+        font-size: 22rpx;
+        display: inline-block;
+        width: 150rpx;
+        text-align: right;
+    }
+    .status_text_1{
+        color: #868686;
+    }
+    .copy{
+        font-size: 18rpx;
+        color: #868686;
+        padding: 3rpx 6rpx;
+        border-radius: 2rpx;
+        border: 1rpx solid rgba($color: #868686, $alpha: 0.5);
+    }
+    
+    .good_text{
+        width: 100%;
+        // padding-left: 28rpx;
+        // position: absolute;
+        // bottom: 0;
+        // left: 0;
+    }
+    .good_server{
+        font-size: 20rpx;
+        color: rgb(245, 8, 8);
+        text-align: right;
+        position: absolute;
+        bottom: -10rpx;
+        right: 0;
+    }
+    .goods_price{
+        font-weight: 600;
+        font-size: 32rpx;
+    }
+    .unimport{
+        font-size: 26rpx;
+    }
+}
+
+.typetag {
+    border: 1px solid #ccc;
+    border-radius: 10rpx;
+    padding: 2rpx 10rpx;
+    font-size: 22rpx;
+    font-weight: 500;
+}
+
+.tagcolor1 {
+    border-color: #007aff;
+    color: #007aff;
+}
+
+.tagcolor2 {
+    border-color: #4cd964;
+    color: #4cd964;
+}
+
+.tagcolor3 {
+    border-color: #f0ad4e;
+    color: #f0ad4e;
+}
+
+.tagcolor4 {
+    border-color: #dd524d;
+    color: #dd524d;
+}
+
+.tagcolor5 {
+    border-color: #4335d6;
+    color: #4335d6;
+}
+
+.tagcolor6 {
+    border-color: rgb(245, 8, 8);
+    color: rgb(245, 8, 8);
+}
+
+.tagcolor7 {
+    border-color: #b44ddd;
+    color: #b44ddd;
+}
+
+// 商品规格-start
+.goods_spec{
+    font-size: 24rpx;
+    color: #868686;
+    padding-top: 16rpx;
+    text{
+        padding: 10rpx 20rpx;
+        border-radius: 10rpx;
+        margin-right: 12rpx;
+        background-color: #f5f5f5;
+        
+    }
+    &_text{
+        padding-right: 8rpx;
+    }
+}
+// 商品规格-end
+</style>

+ 750 - 0
src/pagesC/shoppingMallType/p_details.vue

@@ -0,0 +1,750 @@
+<template>
+  <view class="container">
+    <!-- 轮播图 -->
+    <swiper-banner
+      imgScale="1:1"
+      :imgArr="detail.goods_img"
+      :duration="1000"
+      :interval="5000"
+      :circular="true"
+      :autoplay="true"
+      :indicator-dots="true"
+      indicator-active-color="#12B280"
+      indicator-color="rgba(255, 255, 255, .82)"
+    ></swiper-banner>
+    <!-- 轮播图-end -->
+    <!-- 价格信息栏 -->
+    <view class="price_info flex_r flex_ac flex_jb">
+      <view class="price flex_c flex_jb">
+        <view class="text1"> 到手价 </view>
+        <view class="bottom">
+          <span class="text2">
+            {{ goods_price }}
+          </span>
+          <text class="text3">¥{{ detail.min_group_price / 100 }}</text>
+        </view>
+      </view>
+      <view class="price flex_c flex_jb">
+        <view class="text4">预估下单返</view>
+        <view class="text5 bottom">
+          {{ yj_price }}
+        </view>
+      </view>
+      <view class="price flex_c flex_jb">
+        <view class="text6">销量</view>
+        <view class="text7 bottom">{{ detail.sales_tip }}</view>
+      </view>
+    </view>
+    <!-- 价格信息栏-end -->
+    <!-- 标题信息栏 -->
+    <view class="title_info">
+      <view class="goods_name">
+        <span class="product-type"> 拼多多 </span>
+        {{ detail.goods_name }}
+      </view>
+      <view class="quan flex_r flex_ac flex_jb" v-if="detail.has_coupon">
+        <view class="left flex_r flex_ac">
+          <view class="quan_price">{{ detail.coupon_discount / 100 }}</view>
+          <view class="flex_c time">
+            <span>专属优惠券</span>
+            <span>
+              {{ $day(detail.coupon_start_time * 1000).format("YYYY.MM.DD") }}
+              -
+              {{ $day(detail.coupon_end_time * 1000).format("YYYY.MM.DD") }}
+            </span>
+          </view>
+        </view>
+        <view class="split"></view>
+        <view class="right" @click="buttonClick"> 立即领券 </view>
+      </view>
+    </view>
+    <view class="mall flex_r flex_ac">
+      <img src="/static/img/shop.png" alt="" class="mall_img" />
+      <view class="text7 bottom">{{ detail.mall_name }}</view>
+    </view>
+    <!-- 标题信息栏-end -->
+    <!-- 产品简介 -->
+    <view class="brief mar_t20">
+      <view class="brief_title flex_r flex_ac">产品简介</view>
+      <view class="brief_con">
+        <!-- <mp-html :content="detail.goods_content" ref="jyf"></mp-html> -->
+        <img
+          v-for="(i, s) in detail.goods_img"
+          :key="s"
+          :src="i"
+          alt=""
+          mode="widthFix"
+        />
+      </view>
+    </view>
+    <!-- 产品简介-end -->
+    <!-- 底部导航组件 -->
+    <view class="option">
+      <uni-goods-nav
+        :fill="true"
+        :options="options"
+        :buttonGroup="buttonGroup"
+        @click="onClick"
+        @buttonClick="buttonClick"
+      />
+      <button open-type="share" class="share"></button>
+    </view>
+  </view>
+</template>
+<script>
+let app = getApp();
+import { post } from "@/request/api.js";
+import mpHtml from "@/uni_modules/mp-html/components/mp-html/mp-html.vue";
+import swiperBanner from "@/components/swiperBanner/index.vue";
+import uniGoodsNav from "@/components/uni-goods-nav/uni-goods-nav.vue";
+import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue";
+import authorizeModule from "@/components/authorize-module/index";
+export default {
+  components: {
+    mpHtml,
+    uniGoodsNav,
+    swiperBanner,
+    uniNumberBox,
+    authorizeModule,
+  },
+  data() {
+    return {
+      imgArr: ["/static/goods5.jpg"],
+      content: "",
+      options: [],
+      buttonGroup: [
+        {
+          text: "分享好友",
+          backgroundColor: "#fff",
+          color: "#000",
+        },
+        {
+          text: "下单省",
+          backgroundColor: "#46AFE6",
+          color: "#fff",
+        },
+      ],
+      btnIndex: 0, // 用户点击按钮事件判断 0:加入购物车;1:立即购买
+      type: null, // 商品类型,1零售 2批发 3精品 4今日值买
+      goodsId: "", // 商品ID
+      id: "", //合伙人套餐ID
+      detail: {
+        goods: {},
+        goods_spec_list: [],
+      }, // 商品详情
+      checked: false, //是否选中协议
+      buyNum: 1, //购买数量
+      pfway: "1", // 批发
+      qhway: "0", //提货方式
+      shopInfo: {}, // 商铺信息
+      // showAuth: false,
+
+      userinfo: {},
+      goodsDa: {},
+      unid: "",
+      goodsSpecIndex: 0,
+      goodsAttrIndex: 0,
+      specId: "0",
+      attrId: "0",
+      afterSpecPrice: 0, // 规格选择后显示价格
+      goods_price: 0, //到手价
+      yj_price: 0, // 返利金额
+    };
+  },
+  onLoad: function (e) {
+    this.userinfo = uni.getStorageSync("userinfo");
+    let token = uni.getStorageSync("token");
+    this.type = e.type;
+    this.goodsDa = e;
+    this.loadData(e);
+
+    if (!token) this.login();
+  },
+  onShow: function () {},
+  methods: {
+    // 商品详情信息
+    loadData(da) {
+      post("v1/cashback/duoduoInfo", da).then((res) => {
+        if (res.code === 0) {
+          this.detail = JSON.parse(
+            res.data
+          ).goods_detail_response.goods_details[0];
+          console.log(JSON.parse(res.data));
+          console.log(this.detail);
+          console.log(this.detail.sku_list);
+          this.detail.goods_img = this.detail.goods_gallery_urls;
+          this.goods_price =
+            Math.floor(
+              (this.detail.min_group_price / 100 -
+                this.detail.coupon_discount / 100) *
+                100
+            ) / 100;
+
+          this.yj_price =
+            Math.floor(
+              (this.detail.min_group_price / 100) *
+                (this.detail.promotion_rate / 1000) *
+                100
+            ) / 100;
+
+          this.buttonGroup[1].text =
+            "下单省\n¥" + (this.yj_price + this.detail.coupon_discount / 100);
+        } else {
+          uni.showModal({
+            title: "提示",
+            content: res.msg,
+            showCancel: false,
+            success: function (res) {
+              if (res) {
+                uni.navigateBack({
+                  delta: 1,
+                });
+              }
+            },
+          });
+        }
+      });
+    },
+    // 去购买
+    ToPayPage: function () {},
+    // 点击底部主页购物车等按钮
+    onClick(e) {
+      console.log(e, "onClick");
+    },
+    // 点击立即购买或加入购物车
+    buttonClick: function (e) {
+      if (e.index === 0) {
+        // console.log(111);
+        //   uni.share({
+        //     provider: "weixin",
+        //     scene: "WXSceneSession",
+        //     type: 5,
+        //     imageUrl: _this.detail.goods_image_url,
+        //     title: _this.detail.goods_name,
+        //     miniProgram: {
+        //       id: "gh_e871cdeb44e1",
+        //       path: "pagesC/shoppingMallType/p_details",
+        //       type: 1,
+        //       webUrl: "",
+        //     },
+        //     success: (ret) => {
+        //       console.log(JSON.stringify(ret));
+        //     },
+        //   });
+      } else {
+        let _this = this;
+        post("v1/cashback/duoduoZs", {
+          goods_sign: _this.detail.goods_sign,
+        }).then((res) => {
+          if (res.code === 0) {
+            let data = JSON.parse(res.data)
+              .goods_promotion_url_generate_response
+              .goods_promotion_url_list[0];
+            console.log(data);
+            wx.navigateToMiniProgram({
+              shortLink: data.weixin_short_link, //上图找到目标小程序的链接
+              //develop开发版;trial体验版;release正式版
+              envVersion: "release",
+              success(res1) {
+                // 打开成功
+                console.log("跳转小程序成功!", res1);
+              },
+            });
+          }
+        });
+      }
+    },
+
+    login(invite) {
+      let that = this;
+      // #ifdef  MP-WEIXIN
+      wx.login({
+        success(res) {
+          if (res.code) {
+            post("v1/appletLogin", {
+              code: res.code,
+              invite: uni.getStorageSync("inviteCode") || "",
+            }).then((res) => {
+              if (res.code === 0) {
+                if (res.data.token) {
+                  uni.setStorageSync("token", res.data.token);
+                  that.getuserInfo();
+                } else {
+                  that.unid = res.data.unid;
+                  uni.setStorageSync("unid", res.data.unid);
+                  that.shopInfo = app.globalData.shopInfo;
+                  // that.SoHAuth(); //调取授权弹窗
+                }
+              }
+            });
+          }
+        },
+      });
+      // #endif
+    },
+    // onauthGetTelSuccess(da) {
+    //     this.SoHAuth();
+    //     post("v1/getMobile", {
+    //         unid: this.unid,
+    //         ...da.detail,
+    //     }).then((res) => {
+    //         if (res.code === 0) {
+    //             uni.setStorageSync("token", res.data.token);
+    //             this.getuserInfo();
+    //         }
+    //     });
+    // },
+    async getuserInfo() {
+      this.userinfo = await uni.userfun();
+    },
+  },
+  onShareAppMessage() {
+    // let userinfo = uni.getStorageSync("userinfo");
+    var path = `pagesC/shoppingMallType/p_details?goods_sign=${this.detail.goods_sign}&type=${this.type}`;
+    var title = this.detail.goods_name;
+    console.log(this.detail.goods_name);
+    
+    return {
+      title: title,
+      path: path,
+      imageUrl: this.detail.goods_image_url,
+    };
+  },
+};
+</script>
+<style lang="scss">
+// 页面配置
+page {
+  background: #f5f5f5;
+}
+
+.container {
+  padding-bottom: 90rpx;
+}
+
+// 页面配置-end
+
+.price_info {
+  background: #fff;
+  margin: 20rpx 0;
+  //   height: 92rpx;
+  //   width: 100%;
+  padding: 20rpx;
+  box-sizing: border-box;
+
+  .price {
+    height: 100rpx;
+  }
+
+  .text1,
+  .text4,
+  .text6,
+  .text7 {
+    font-size: 28rpx;
+  }
+  .text1 {
+    color: #000;
+  }
+  .text6,
+  .text7 {
+    color: #999;
+  }
+  .text4 {
+    color: #fa2e18;
+  }
+  .text7 {
+    padding-bottom: 8rpx;
+  }
+  .text2,
+  .text5 {
+    font-size: 40rpx;
+    color: #000;
+    font-weight: 600;
+  }
+  .text2::before,
+  .text5::before {
+    content: "¥";
+    font-size: 24rpx;
+    font-weight: normal;
+  }
+  .text5 {
+    color: #fa2e18;
+  }
+  .text3 {
+    color: #999;
+    font-size: 24rpx;
+    text-decoration: line-through;
+    padding-left: 12rpx;
+  }
+}
+
+.mall {
+  font-size: 26rpx;
+  background: #fff;
+  margin: 20rpx 0;
+  padding: 20rpx;
+  box-sizing: border-box;
+  &_img {
+    width: 36rpx;
+    height: 36rpx;
+    padding: 6rpx;
+    margin-right: 20rpx;
+    border-radius: 50%;
+    border: 1rpx solid rgba($color: #cdcdcd, $alpha: 0.5);
+  }
+}
+
+// 价格信息栏-end
+.quan {
+  color: #e90406;
+  box-sizing: border-box;
+  margin: 20rpx 0;
+  .left {
+    width: 70%;
+    height: 150rpx;
+    box-sizing: border-box;
+    padding: 0 40rpx;
+    border-radius: 15rpx;
+    background-color: #ffeff0;
+
+    .time {
+      font-size: 26rpx;
+      line-height: 180%;
+      padding-left: 30rpx;
+    }
+
+    .quan_price {
+      font-size: 40rpx;
+      font-weight: 600;
+    }
+    .quan_price::before {
+      content: "¥";
+      font-size: 28rpx;
+      font-weight: normal;
+    }
+  }
+  .split {
+    width: 2rpx;
+    height: 120rpx;
+    border: 2rpx dotted #fcc9c3;
+  }
+  .right {
+    width: 30%;
+    height: 150rpx;
+    text-align: center;
+    line-height: 150rpx;
+    box-sizing: border-box;
+    border-radius: 15rpx;
+    background-color: #ffeff0;
+  }
+}
+// 优惠券-start
+
+// 优惠券-end
+
+// 标题信息栏
+
+.title_info {
+  width: 100%;
+  overflow: hidden;
+  background: #ffffff;
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+
+.goods_name {
+  width: 100%;
+  overflow: hidden;
+  font-size: 32rpx;
+  color: #1b1b1b;
+  font-family: "SourceHanSansCN-Bold";
+  font-weight: bold;
+  margin-bottom: 20rpx;
+}
+
+.product-type {
+  font-size: 16rpx;
+  font-weight: bold;
+  color: #fff;
+  height: 26rpx;
+  display: inline-block;
+  line-height: 26rpx;
+  padding: 0 8rpx;
+  border-radius: 4rpx;
+  margin-right: 16rpx;
+  background-color: #e90406;
+}
+
+// 标题信息栏-end
+
+// 产品简介
+.brief {
+  width: 100%;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.brief_con {
+  width: 100%;
+  overflow: hidden;
+  padding: 20rpx;
+  box-sizing: border-box;
+  img {
+    width: 100%;
+  }
+}
+
+.brief_title {
+  width: 100%;
+  overflow: hidden;
+  font-size: 26rpx;
+  color: #1b1b1b;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+  border-bottom: 3rpx solid rgba(0, 0, 0, 0.12);
+  height: 74rpx;
+}
+
+// 产品简介-end
+
+// 底部导航组件
+.option {
+  width: 100%;
+  overflow: hidden;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  .share {
+    position: absolute;
+    left: 20rpx;
+    top: 10rpx;
+    width: 348rpx;
+    height: 80rpx;
+    background-color: rgba(153, 50, 50, 0);
+    z-index: 99999;
+  }
+}
+
+// 底部导航组件-end
+
+// 购买或加入购物车弹窗
+.option_box text {
+  color: #2db389;
+}
+
+.close_img {
+  font-size: 38rpx;
+  color: #999;
+}
+
+.option_box {
+  font-size: 26rpx;
+  margin-top: 80rpx;
+}
+
+.goods_raido:nth-last-child(1) {
+  margin-right: 0;
+}
+
+.num_con {
+  // width: 100%;
+  overflow: hidden;
+  padding-bottom: 3rpx;
+}
+.quota_text {
+  font-size: 28rpx;
+  color: #545454;
+  padding-left: 6rpx;
+}
+.quota_num_text {
+  font-size: 24rpx;
+  color: #545454;
+  padding-left: 6rpx;
+}
+.num_str {
+  font-size: 14px;
+  color: #989898;
+}
+
+.goods_option {
+  width: 100%;
+  overflow: hidden;
+  padding-top: 50rpx;
+}
+
+.close_con {
+  width: 100%;
+  overflow: hidden;
+  margin-bottom: 35rpx;
+}
+
+.raido_text {
+  font-size: 26rpx;
+  color: #545454;
+  margin-left: 18rpx;
+}
+
+.goods_con {
+  width: calc(100% - 202rpx - 30rpx);
+  overflow: hidden;
+}
+
+.goods_img {
+  width: 202rpx;
+  height: 187rpx;
+  margin-right: 30rpx;
+  border-radius: 12rpx;
+}
+
+.confim {
+  width: 100%;
+  height: 80rpx;
+  border-radius: 40rpx;
+  background: #2db389;
+  color: #fff;
+  font-size: 26rpx;
+  margin-top: 44rpx;
+}
+
+.shopping {
+  width: 100%;
+  overflow: hidden;
+  padding: 20rpx;
+  box-sizing: border-box;
+  border-radius: 30rpx 30rpx 0 0;
+  background: #fff;
+}
+
+.goods_info {
+  width: 100%;
+  overflow: hidden;
+  align-items: inherit;
+  padding-bottom: 48rpx;
+  border-bottom: 3rpx solid rgba(0, 0, 0, 0.12);
+}
+
+.shop_names {
+  width: 100%;
+  overflow: hidden;
+  font-family: "SourceHanSansCN-Bold";
+  font-weight: bold;
+  color: #1b1b1b;
+  font-size: 32rpx;
+}
+
+.goods_msg {
+  width: 100%;
+  overflow: hidden;
+  font-size: 34rpx;
+  color: #18bb88;
+  font-family: "SourceHanSansCN-Medium";
+  font-weight: 500;
+}
+.goods_smsg {
+  font-size: 22rpx;
+  color: #ff6d44;
+}
+
+.raido_img {
+  width: 39rpx;
+  height: 35rpx;
+  background: url(~@/static/img/weixuanzhong.png);
+  background-repeat: no-repeat;
+  background-size: 35rpx 35rpx;
+  background-position: center center;
+}
+
+.raido_box {
+  background: url(~@/static/img/consent.png);
+  background-repeat: no-repeat;
+  background-size: 39rpx 35rpx;
+  background-position: center center;
+}
+
+// 购买或加入购物车弹窗-end
+
+.goods_teac {
+  .product-txt,
+  .product-text {
+    font-size: 22rpx;
+    color: #787878;
+  }
+
+  .product-text {
+    margin-left: 16rpx;
+  }
+
+  .red {
+    color: #fa2e18;
+  }
+
+  .fenxiang {
+    font-size: 22rpx;
+    background: rgba(250, 46, 24, 0.08);
+    display: inline-block;
+    border-radius: 6rpx;
+    padding: 0 16rpx;
+  }
+}
+
+// 商品规格样式-start
+.goods_spec {
+  font-size: 28rpx;
+  padding-top: 28rpx;
+}
+.goods_spec_list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding-top: 20rpx;
+
+  &_item {
+    font-size: 24rpx;
+    padding: 14rpx 28rpx;
+    border-radius: 10rpx;
+    border: 2rpx solid #f7f7f7;
+    margin-right: 12rpx;
+    margin-bottom: 14rpx;
+    background-color: #f7f7f7;
+  }
+  &_item_active {
+    color: #ff6d44;
+    border: 2rpx solid #ff6d44;
+    background-color: #fff8f2;
+  }
+}
+
+// 商品规格样式-end
+
+::v-deep .uni-numbox {
+  border-radius: 10rpx !important;
+  background-color: #f7f7f7 !important;
+}
+::v-deep .uni-numbox__value {
+  border-radius: 10rpx !important;
+  background-color: #f7f7f7 !important;
+}
+::v-deep .uni-numbox__minus,
+::v-deep .uni-numbox__plus {
+  // border: 1rpx solid #888888 !important;
+  // color: #fff !important;
+  background-color: #f0f0f0 !important;
+}
+::v-deep .uni-tab__right {
+  border-radius: 0 !important;
+  // border: 1rpx ;
+}
+::v-deep .uni-tab__cart-button-right:first-child {
+  border: 1rpx solid#c5c5c5 !important;
+  margin-right: 2rpx;
+}
+::v-deep .uni-tab__cart-button-right:last-child {
+  font-size: 26rpx !important;
+  border: 1rpx solid#46AFE6 !important;
+  margin-left: 2rpx;
+}
+::v-deep .uni-tab__cart-button-right-text {
+  text-align: center !important;
+  font-size: 26rpx !important;
+}
+</style>

BIN
src/static/img/shop.png


BIN
src/static/preview/arrow-right.png