Bladeren bron

添加分销对应页面

chengjunhui 1 maand geleden
bovenliggende
commit
2412f05792

+ 91 - 12
pages.json

@@ -92,6 +92,13 @@
 				"navigationBarTitleText": "确认订单",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/setup/edit",
+			"style": {
+				"navigationBarTitleText": "修改资料",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"subPackages": [
@@ -446,18 +453,6 @@
 				}
 			]
 		},
-		{
-			"root": "pages/setup",
-			"pages": [
-				{
-					"path": "edit",
-					"style": {
-						"navigationBarTitleText": "修改资料",
-						"navigationStyle": "custom"
-					}
-				}
-			]
-		},
 		{
 			"root": "pages/set",
 			"pages": [
@@ -499,6 +494,90 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "pages/groupBuying",
+			"pages": [
+				{
+					"path": "list",
+					"style": {
+						"navigationBarTitleText": "拼团",
+						"enablePullDownRefresh": true
+					}
+				},
+				{
+					"path": "details",
+					"style": {
+						"navigationBarTitleText": "商品详情"
+					}
+				},
+				{
+					"path": "myGbOrder/list",
+					"style": {
+						"navigationBarTitleText": "全部订单"
+					}
+				},
+				{
+					"path": "myGbOrder/details",
+					"style": {
+						"navigationBarTitleText": "订单详情"
+					}
+				}
+			]
+		},
+		{
+			"root": "pages/seckill",
+			"pages": [
+				{
+					"path": "list",
+					"style": {
+						"navigationBarTitleText": "限时秒杀",
+						"enablePullDownRefresh": true
+					}
+				},
+				{
+					"path": "details",
+					"style": {
+						"navigationBarTitleText": "商品详情"
+					}
+				}
+			]
+		},
+		{
+			"root": "pages/distribution",
+			"pages": [
+				{
+					"path": "index",
+					"style": {
+						"navigationBarTitleText": "分销中心"
+					}
+				},
+				{
+					"path": "moneyList",
+					"style": {
+						"navigationBarTitleText": "分佣订单",
+						"enablePullDownRefresh": true
+					}
+				},
+				{
+					"path": "partner",
+					"style": {
+						"navigationBarTitleText": "我的伙伴"
+					}
+				},
+				{
+					"path": "withdraw",
+					"style": {
+						"navigationBarTitleText": "提现"
+					}
+				},
+				{
+					"path": "withdrawTwo",
+					"style": {
+						"navigationBarTitleText": "转入余额"
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {

+ 256 - 0
pages/distribution/index.vue

@@ -0,0 +1,256 @@
+<template>
+  <view class="container">
+    <view class="distribution">
+      <view class="bg"></view>
+      <view class="userInfo">
+        <view class="u-plr30">
+          <view class="head u-flex-center-sb">
+            <view class="u-flex">
+              <image
+                v-if="accountInfo.head_photo"
+                :src="accountInfo.head_photo"
+              ></image>
+              <image v-else :src="$defaultAvatar()" mode=""></image>
+              <view class="u-ml30 u-mt15">
+                <view class="u-font30 u-1A1A1A u-text1" style="width: 350rpx">{{
+                  accountInfo.nickname
+                }}</view>
+                <view class="u-mt5 u-font24"
+                  >邀请码:
+                  <text class="u-mr30">{{ accountInfo.invitation_code }}</text>
+                  <text
+                    class="u-FF0000"
+                    @click="copy(accountInfo.invitation_code)"
+                    >复制</text
+                  >
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="u-plr30">
+          <view class="list-item u-mt30">
+            <view class="u-flex">
+              <view class="iconfont bg-E8F9EF">&#xeb99;</view>
+              <!-- 可提现 -->
+              <text class="u-bold u-font28 u-1A1A1A u-ml15 u-mt15"
+                >可提现金额</text
+              >
+            </view>
+            <view class="bg-fff u-mt20 u-flex-center-sb">
+              <view class="u-00BF5A u-bold u-font36 u-flex">
+                <rich-text
+                  :nodes="$mUtil.priceBigSmall(accountInfo.commission_able)"
+                ></rich-text>
+              </view>
+              <view class="u-flex-center">
+                <view class="wd-btn" @click="goWithdrawDeposit">
+                  <button class="u-font24">点击提现</button>
+                </view>
+                <view class="wd-btn u-ml10 bgc" @click="goWithdrawDeposittwo">
+                  <button class="u-font24">转入余额</button>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="list-item u-mt30">
+            <view class="u-flex">
+              <view class="iconfont bg-E8F9EF">&#xe673;</view>
+              <text class="u-bold u-font28 u-1A1A1A u-ml15 u-mt15"
+                >我的伙伴</text
+              >
+            </view>
+            <view class="bg-fff u-mt20 u-flex-center-sb" @click="goPartner">
+              <view>直接伙伴</view>
+              <view>
+                <text class="u-FF0000">{{ num }}</text> 人
+                <text class="iconfont u-font24 u-999 u-ml15">&#xe6c7;</text>
+              </view>
+            </view>
+          </view>
+          <view class="list-item u-mt30">
+            <view class="u-flex-center-sb">
+              <view class="u-flex-center">
+                <view class="iconfont bg-E8F9EF">&#xe63c;</view>
+                <text class="u-bold u-font28 u-1A1A1A u-ml15 u-mt15"
+                  >分销订单</text
+                >
+              </view>
+              <view class="u-flex-center" @click="getMoenyList">
+                <text class="u-font24 u-999">历史订单</text>
+                <text class="iconfont u-font24 u-999 u-mr30">&#xe6c7;</text>
+              </view>
+            </view>
+            <view class="bg-fff u-mt20 u-flex-center-sa">
+              <view>
+                <view>本周订单</view>
+                <view class="u-text-center u-mt10">
+                  <text class="u-00BF5A u-bold">{{
+                    userordergains.week_user_order_gains_num
+                  }}</text>
+                  <text class="u-font20 u-666 u-ml5">单</text>
+                </view>
+              </view>
+              <view>
+                <view>本月订单</view>
+                <view class="u-text-center u-mt10">
+                  <text class="u-00BF5A u-bold">
+                    {{ userordergains.month_user_order_gains_num }}
+                  </text>
+                  <text class="u-font20 u-666 u-ml5">单</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!--页面加载动画-->
+    <ldLoading isFullScreen :active="loading"></ldLoading>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { onShow } from "@dcloudio/uni-app";
+const $http = uni.$http;
+const $mUtil = uni.$mUtil;
+
+const loading = ref(true);
+const accountInfo = ref({}); // 用户信息
+const num = ref(0); // 伙伴个数
+const userordergains = ref({}); // 分销订单
+
+// 生命周期
+onShow((options) => {
+    return
+  // 获取用户信息
+  $http.get("/account/getAccountInfo").then((res) => {
+    if (res && res.code == 200) {
+      accountInfo.value = res.data;
+    }
+  });
+
+  // 获取伙伴个数
+  $http.get("/account/myPartnerNum").then((res) => {
+    if (res && res.code == 200) {
+      num.value = res.data;
+    }
+  });
+
+  // 获取分销订单
+  $http.get("/userordergains/slim-statistics").then((res) => {
+    loading.value = false;
+    if (res && res.code == 200) {
+      userordergains.value = res.data;
+    }
+  });
+});
+
+// 方法
+// 分润订单
+const getMoenyList = () => {
+  uni.navigateTo({
+    url: "moneyList",
+  });
+};
+
+// 提现
+const goWithdrawDeposit = () => {
+  uni.navigateTo({
+    url: "withdraw",
+  });
+};
+
+// 转入余额
+const goWithdrawDeposittwo = () => {
+  uni.navigateTo({
+    url: "withdrawTwo",
+  });
+};
+
+// 我的伙伴
+const goPartner = () => {
+  uni.navigateTo({
+    url: "partner",
+  });
+};
+
+// 复制邀请码
+const copy = (code) => {
+  uni.setClipboardData({
+    data: code,
+    success: () => {
+      uni.showToast({
+        title: "复制成功",
+      });
+    },
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.distribution {
+  position: relative;
+  view {
+    font-size: 28rpx;
+  }
+  .bg {
+    width: 100%;
+    height: 185rpx;
+    background-color: #00bf5a;
+  }
+
+  .userInfo {
+    position: absolute;
+    top: 68rpx;
+    width: 100%;
+
+    .head {
+      background-color: #fffaee;
+      padding: 40rpx 30rpx 36rpx;
+      border-radius: 20rpx;
+
+      image {
+        width: 106rpx;
+        height: 106rpx;
+        border: 4rpx solid #ffffff;
+        border-radius: 50%;
+      }
+
+      .font80 {
+        font-size: 80rpx;
+        color: #00bf5a;
+      }
+    }
+  }
+
+  .list-item {
+    .bg-E8F9EF {
+      background-color: #e8f9ef;
+      color: #00bf5a;
+      padding: 10rpx;
+      width: 50rpx;
+      height: 50rpx;
+      line-height: 50rpx;
+      text-align: center;
+      border-radius: 50%;
+    }
+
+    .bg-fff {
+      background-color: #ffffff;
+      box-sizing: border-box;
+      padding: 30rpx;
+      border-radius: 20rpx;
+      box-shadow: 0 0 20rpx #eee;
+
+      .wd-btn button {
+        width: 175rpx;
+        height: 60rpx;
+        border-radius: 30px;
+        background-color: #f7f7f7;
+      }
+    }
+  }
+}
+</style>

+ 583 - 0
pages/distribution/moneyList.vue

@@ -0,0 +1,583 @@
+<template>
+  <view class="container">
+    <div class="tabB" :style="{ top: tabTop + 'px' }">
+      <view class="order-type u-flex-center-sb" v-if="selTabIndex == 0">
+        <view
+          class="type-name u-font26 u-181818"
+          :class="{ active: isChange == item.value }"
+          v-for="(item, index) in orderType"
+          :key="index"
+          @click="clickBtn(item.value)"
+        >
+          {{ item.label }}
+        </view>
+      </view>
+    </div>
+    <view class="bigbox" :class="selTabIndex == 0 ? 'bigbox0' : 'bigbox3'">
+      <view v-if="listdata.length > 0">
+        <template v-if="selTabIndex == 0">
+          <view
+            class="u-bg-fff ppsPd umb20"
+            v-for="(item, index) in listdata"
+            :key="item.id"
+          >
+            <view
+              class="pt15-pb24 u-border-one-one"
+              style="padding-bottom: 30rpx"
+            >
+              <view class="u-flex-center-sb" style="align-items: center">
+                <view class="u-flex" style="align-items: center">
+                  <text
+                    class="iconfont2 u-font40"
+                    style="padding-top: 2rpx; color: #00bf5a"
+                    >&#xe611;</text
+                  >
+                  <text class="u-1A1A1A u-font30 u-ml15">{{
+                    item.shop_name
+                  }}</text>
+                </view>
+                <text class="u-00BF5A u-font28">{{ item.order_status }}</text>
+              </view>
+            </view>
+            <view>
+              <view class="goodsItem u-border-one-one u-flex">
+                <image
+                  :src="item.goods_img"
+                  class="u-goods200 u-ml15"
+                  mode=""
+                ></image>
+                <view class="u-flex1 u-flex-column-start rightText u-ml30">
+                  <view class="u-text2 u-1A1A1A u-font28">{{
+                    item.goods_title
+                  }}</view>
+                  <view class="bottext u-flex-column-start u-flex1">
+                    <text
+                      class="u-font22 u-999"
+                      style="width: 100%"
+                      v-if="item.sku_set_name"
+                      >规格:{{ item.sku_set_name }}</text
+                    >
+
+                    <view class="u-flex-center botPrice u-mt25">
+                      <view class="u-00BF5A u-font32 good-text">
+                        <rich-text
+                          :nodes="$mUtil.priceBigSmall(item.sale_price)"
+                        ></rich-text>
+                      </view>
+                      <text class="u-font26 u-999 u-ml15" v-if="item.number"
+                        >x {{ item.number }}</text
+                      >
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view class="botList">
+              <view class="u-flex-center-sb u-mt20">
+                <view class="u-font26 u-181818 opacity">购买人</view>
+                <text
+                  style="text-align: right"
+                  class="u-font26 u-999 u-text-width-two"
+                  >{{ item.user_info.nickname }}</text
+                >
+              </view>
+              <view class="u-flex-center-sb u-mt20">
+                <view class="u-font26 u-181818 opacity">下单时间</view>
+                <text class="u-font26 u-999">{{ item.create_time }}</text>
+              </view>
+              <view class="u-flex-center-sb u-mt20">
+                <view class="u-font26 u-181818 opacity">所得佣金</view>
+                <view class="u-font26 u-00BF5A u-bold">
+                  <rich-text
+                    :nodes="$mUtil.priceBigSmall(item.able_gains, false)"
+                  ></rich-text>
+                </view>
+              </view>
+              <view
+                class="u-flex-center-sb u-mt20"
+                v-if="item.balance_gains > 0"
+              >
+                <view class="u-font26 u-181818 opacity">所得金额</view>
+                <view class="u-font26 u-00BF5A u-bold">
+                  <rich-text
+                    :nodes="$mUtil.priceBigSmall(item.balance_gains, false)"
+                  ></rich-text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </template>
+        <template v-if="selTabIndex == 3">
+          <view class="offline">
+            <view class="order-item" v-for="item in listdata" :key="item.id">
+              <view class="order-item-head">
+                <view class="item-info">
+                  <view class="order-num">
+                    <text class="num">订单号:</text>
+                    <text class="">{{ item.offline_order.order_code }}</text>
+                  </view>
+                  <view class="order-time-price">
+                    <text class="time">{{ item.create_time }}</text>
+                    <text class=""
+                      >消费金额:{{ item.offline_order.sales_money }}</text
+                    >
+                  </view>
+                </view>
+              </view>
+              <view class="tip">
+                <view class="label">打赏积分:</view
+                >{{ item.offline_order.shop_consume_integral_able }}
+              </view>
+              <view class="tip">
+                <view class="label">所得收益:</view>{{ item.income_point }}
+              </view>
+            </view>
+          </view>
+        </template>
+        <loadMore v-if="listdata.length > 0" :status="status"></loadMore>
+      </view>
+      <nodata v-else :config="{ top: 20, content: '暂无数据~' }"></nodata>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { onReachBottom, onPullDownRefresh, onLoad } from "@dcloudio/uni-app";
+const $http = uni.$http;
+const $mUtil = uni.$mUtil;
+const app = getApp();
+
+const isChange = ref(0);
+const orderType = ref([
+  {
+    label: "全部订单",
+    value: "",
+  },
+  {
+    label: "已付款",
+    value: 1,
+  },
+  {
+    label: "已完成",
+    value: 2,
+  },
+  {
+    label: "已结算",
+    value: 3,
+  },
+]);
+const listdata = ref([]);
+const status = ref("more"); // more|loading|noMore
+const noData = ref(false);
+const parmas = ref({
+  page: 1,
+  limit: 10,
+  status: "",
+  // user_order_gains_type: 0
+});
+const tabTop = ref(0);
+const selTabIndex = ref(0);
+
+// 生命周期
+onLoad(() => {
+  tabTop.value = app.globalData.barHeight + 44;
+  listData();
+});
+
+// 上拉加载
+onReachBottom((e) => {
+  status.value = "loading";
+  parmas.value.page++;
+  if (selTabIndex.value == 0) {
+    listData();
+  } else {
+    getOfflineorderincome();
+  }
+});
+
+// 下拉刷新
+onPullDownRefresh(() => {
+  rest();
+  if (selTabIndex.value == 0) {
+    listData();
+  } else {
+    getOfflineorderincome();
+  }
+});
+
+// 重置
+const rest = () => {
+  parmas.value.page = 1;
+  listdata.value = [];
+};
+
+// 获取列表数据
+const listData = () => {
+  $http.get("/userordergains/pages", parmas.value).then(async (res) => {
+    if (res && res.code == 200) {
+      uni.stopPullDownRefresh();
+      listdata.value = listdata.value.concat(res.page.list);
+      if (listdata.value.length == 0) {
+        noData.value = true;
+      } else {
+        noData.value = false;
+      }
+      if (res.page.totalPage <= res.page.currPage) {
+        status.value = "noMore";
+      } else {
+        status.value = "more";
+      }
+    }
+  });
+};
+
+// 获取线下订单收益
+const getOfflineorderincome = () => {
+  $http.get("/offlineorderincome/page", parmas.value).then(async (res) => {
+    if (res && res.code == 200) {
+      uni.stopPullDownRefresh();
+      listdata.value = listdata.value.concat(res.page.list);
+      if (listdata.value.length == 0) {
+        noData.value = true;
+      } else {
+        noData.value = false;
+      }
+      if (res.page.totalPage <= res.page.currPage) {
+        status.value = "noMore";
+      } else {
+        status.value = "more";
+      }
+    }
+  });
+};
+
+// 点击按钮
+const clickBtn = (index) => {
+  isChange.value = index;
+  if (index == 0) {
+    parmas.value.status = "";
+  } else {
+    parmas.value.status = index;
+  }
+  rest();
+  listData();
+};
+</script>
+
+<style lang="scss">
+.tabBox {
+  display: flex;
+  justify-content: space-around;
+  padding: 0 30rpx;
+  border-bottom: 1rpx solid #e6e6e6;
+
+  > view {
+    font-size: 30rpx;
+    padding: 22rpx 0;
+    color: #1a1a1a;
+    position: relative;
+    font-weight: 700;
+  }
+
+  > .active {
+    color: #00bf5a;
+
+    &::after {
+      display: block;
+      width: 100%;
+      height: 4rpx;
+      content: "";
+      background: #00bf5a;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      border-radius: 2rpx;
+    }
+  }
+}
+
+.good-text {
+  font-weight: 700;
+}
+
+.opacity {
+  opacity: 0.9;
+}
+
+.rightText {
+  margin-top: 4rpx;
+}
+
+.contribution-txt {
+  margin-top: 6rpx;
+  color: #ff6600;
+  font-size: 26rpx;
+}
+
+// .bigbox {
+//   margin-top: 200rpx;
+// }
+
+.bigbox0 {
+  margin-top: 110rpx;
+  // margin-top: 200rpx;
+}
+
+.bigbox3 {
+  margin-top: 88rpx;
+}
+
+.ppsPd {
+  padding: 30rpx;
+  border-bottom: 0.5px solid #e6e6e6;
+}
+
+.goodsItem {
+  padding: 30rpx 0;
+  position: relative;
+}
+
+.umb20 {
+  margin-bottom: 20rpx;
+}
+
+.wt112 {
+  width: 140rpx;
+}
+
+.img30 {
+  width: 30rpx;
+  height: 30rpx;
+}
+
+.tabB {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  z-index: 66;
+  background: #ffffff;
+}
+
+.order-type {
+  height: 110rpx;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 30rpx;
+
+  .type-name {
+    border-radius: 30px;
+    padding: 12rpx 18rpx;
+    display: inline-block;
+    background: #f2f2f2;
+    border-radius: 30rpx;
+  }
+
+  .active {
+    background: #00bf5a;
+    color: #ffffff;
+  }
+}
+
+.wd-bgImg {
+  position: relative;
+  padding: 25rpx 0rpx;
+
+  image {
+    width: 100%;
+    height: 200rpx;
+    vertical-align: bottom;
+  }
+
+  .moneyInfo {
+    position: absolute;
+    top: 25rpx;
+    width: 92%;
+
+    .mt40 {
+      margin-top: 40rpx;
+    }
+
+    .detail-btn button {
+      height: 56rpx;
+      line-height: 30rpx;
+      border-radius: 28px;
+      opacity: 0.82;
+      padding: 10rpx 30rpx;
+      background-color: #eed9a9;
+      color: #0b844a;
+    }
+  }
+}
+
+.wdInput {
+  background-color: #ffffff;
+  border-radius: 18rpx 18rpx 0px 0rpx;
+  padding: 40rpx 22rpx 32rpx;
+
+  .input {
+    height: 80rpx;
+    line-height: 80rpx;
+    font-size: 60rpx;
+    border-bottom: 1rpx solid #d9d9d9;
+    padding-bottom: 25rpx;
+
+    input {
+      height: 80rpx;
+      line-height: 80rpx;
+      font-size: 36rpx;
+    }
+  }
+}
+
+.bg-fff {
+  background-color: #ffffff;
+  padding: 26rpx 22rpx 36rpx;
+  border-radius: 0rpx 0rpx 18px 18rpx;
+}
+
+.ml46 {
+  margin-left: 46rpx;
+}
+
+.apply-btn {
+  margin-top: 114rpx;
+
+  button {
+    background: #0b844a;
+    color: #ffffff;
+  }
+}
+
+.zfb-wx {
+  padding-bottom: 24rpx;
+
+  .payIcon {
+    color: #00aaef;
+    font-size: 32rpx;
+    margin-right: 18rpx;
+  }
+
+  .wxIcon {
+    color: rgb(37, 171, 56);
+    font-size: 32rpx;
+    margin-right: 18rpx;
+  }
+}
+
+.zhInput input {
+  width: 62%;
+  height: 70rpx;
+  line-height: 70rpx;
+  padding: 0rpx 20rpx;
+  border: 1rpx solid #d9d9d9;
+  border-radius: 6rpx;
+}
+
+.popup {
+  width: 100%;
+
+  .bg-top {
+    background-color: #f5f5f5;
+    padding: 20rpx 30rpx;
+    border-radius: 18rpx 18rpx 0px 0px;
+  }
+
+  .bankCardList {
+    background-color: #ffffff;
+    padding: 0rpx 30rpx;
+    padding-bottom: 185rpx;
+
+    .item {
+      height: 84rpx;
+      line-height: 84rpx;
+
+      image {
+        width: 48rpx;
+        height: 42rpx;
+        margin-top: 20rpx;
+        vertical-align: bottom;
+      }
+
+      .rh-br {
+        width: 100%;
+        border-bottom: 1rpx solid #e6e6e6;
+      }
+
+      .pull-right {
+        float: right !important;
+      }
+    }
+  }
+}
+
+.ml56 {
+  margin-left: 56rpx;
+}
+
+.ml200 {
+  margin-left: 200rpx;
+}
+
+.offline {
+  padding: 0 30rpx;
+
+  .order-item {
+    padding: 30rpx 0;
+    border-bottom: 1rpx solid #f2f2f2;
+
+    .order-item-head {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+    }
+
+    .item-info {
+      font-size: 28rpx;
+      font-family: PingFang SC, PingFang SC-Regular;
+      font-weight: 400;
+      color: #808080;
+
+      .order-num {
+        margin-bottom: 10rpx;
+
+        .num {
+          color: #1a1a1a;
+        }
+      }
+
+      .order-time-price {
+        font-size: 24rpx;
+
+        .time {
+          margin-right: 89rpx;
+        }
+      }
+    }
+
+    .tip {
+      display: flex;
+      justify-content: flex-end;
+      color: #808080;
+      font-size: 28rpx;
+      margin-bottom: 10rpx;
+
+      .label {
+        color: #1a1a1a;
+      }
+    }
+
+    .tip:last-child {
+      margin-bottom: 0;
+    }
+
+    .item-icon {
+      width: 32rpx;
+      height: 32rpx;
+      transform: rotate(-90deg);
+      flex-shrink: 0;
+    }
+  }
+}
+</style>

+ 165 - 0
pages/distribution/partner.vue

@@ -0,0 +1,165 @@
+<template>
+  <view class="container">
+    <view class="partner">
+      <image
+        class="top-bg"
+        :src="$mConfig.staticUrl + '/distribution-top-bg.png'"
+      ></image>
+      <view class="userInfo">
+        <view class="u-plr30">
+          <view class="head u-flex-sb">
+            <view class="u-flex">
+              <image
+                v-if="accountInfo.head_photo"
+                :src="accountInfo.head_photo"
+              ></image>
+              <image v-else :src="$defaultAvatar()" mode=""></image>
+
+              <view class="u-ml30 u-mt10">
+                <view class="u-font30 u-1A1A1A nickname u-text1">{{
+                  accountInfo.nickname
+                }}</view>
+              </view>
+            </view>
+            <view class="u-font24 u-999 u-mt10"
+              >直接伙伴:<text class="u-FF0000">{{ num }}</text
+              >人
+            </view>
+          </view>
+        </view>
+        <view class="partner-list">
+          <image
+            class="partner-bg"
+            :src="$mConfig.staticUrl + '/partner-bg.png'"
+          ></image>
+          <view class="position-ab">
+            <view v-if="partnerList.length > 0">
+              <view
+                class="item u-plr30"
+                v-for="(item, index) in partnerList"
+                :key="item.id"
+              >
+                <view class="u-flex u-border-one-one pd44">
+                  <image
+                    class="u-avatar106"
+                    v-if="item.head_photo"
+                    :src="item.head_photo"
+                  ></image>
+                  <image
+                    class="u-avatar106"
+                    v-else
+                    :src="$defaultAvatar()"
+                  ></image>
+                  <view class="u-font24 u-999">
+                    <view class="u-font28 u-1A1A1A ht36 u-text-width">{{
+                      item.nickname
+                    }}</view>
+                    <view>
+                      <rich-text
+                        :nodes="'*******' + $mUtil.cutOut(item.mobile)"
+                      ></rich-text>
+                    </view>
+                    <view>绑定时间:{{ item.register_time }}</view>
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view
+              class="nogoods u-mt30 u-flex-column-center"
+              v-if="partnerList.length == 0"
+            >
+              <nodata :config="{ top: 5, content: '暂无数据~' }"></nodata>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+
+const num = ref(0);
+const partnerList = ref([]);
+const accountInfo = ref({});
+
+onLoad(() => {
+  //获取用户信息
+  uni.$http.get("/account/getAccountInfo").then((res) => {
+    if (res && res.code == 200) {
+      accountInfo.value = res.data;
+    }
+  });
+  //获取伙伴列表
+  uni.$http.get("/account/myPartner").then((res) => {
+    if (res && res.code == 200) {
+      num.value = res.num;
+      partnerList.value = res.data;
+    }
+  });
+});
+</script>
+
+<style lang="scss">
+.nickname {
+  width: 300rpx;
+}
+.u-flex-sb {
+  display: flex;
+  justify-content: space-between;
+}
+.ht36 {
+  height: 36rpx;
+  line-height: 36rpx;
+}
+.partner {
+  position: relative;
+
+  .top-bg {
+    width: 100%;
+    height: 238rpx;
+  }
+
+  .userInfo {
+    position: absolute;
+    top: 68rpx;
+    width: 100%;
+
+    .head {
+      background-color: #fffaee;
+      padding: 40rpx 30rpx 36rpx;
+      border-radius: 20rpx;
+      z-index: -1;
+
+      image {
+        width: 106rpx;
+        height: 106rpx;
+        border: 4rpx solid #ffffff;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .partner-list {
+    margin-top: -48rpx;
+    position: relative;
+
+    .partner-bg {
+      height: 70vh;
+      width: 100%;
+    }
+
+    .position-ab {
+      position: absolute;
+      top: 50rpx;
+      width: 100%;
+    }
+
+    .pd44 {
+      padding: 44rpx 0rpx;
+    }
+  }
+}
+</style>

+ 611 - 0
pages/distribution/withdraw.vue

@@ -0,0 +1,611 @@
+<template>
+  <view class="main">
+    <navbar :config="config" backColor="#666"></navbar>
+    <view class="canWithdrawCls">
+      <view>
+        <view>可提现服务积分:</view>
+        <view class="canWithdrawCls_val"
+          ><text>{{ walletInfo.commission_able }}</text></view
+        >
+      </view>
+      <view class="u-mt20 markBox">
+        <view class="u-mr30"
+          >待入账 <view><text></text>{{ walletInfo.wait_account }}</view>
+        </view>
+        <view
+          >冻结中 <view><text></text>{{ walletInfo.freezing }}</view>
+        </view>
+      </view>
+    </view>
+
+    <view class="withdrawCls">
+      <view class="withdrawCls_lab"
+        >提现服务积分
+        <!-- <text>(最低提现佣金1公益服务积分)</text> -->
+        <text>(最低提现佣金{{ walletInfo.min_extract }})</text>
+      </view>
+      <view class="withdrawCls_val">
+        <!-- <text>¥</text> -->
+        <input
+          @input="getMoney"
+          maxlength="10"
+          type="digit"
+          v-model="dataForm.public_service_points"
+          placeholder-style="color:#CCCCCC"
+          placeholder="提现服务积分"
+        />
+      </view>
+      <view class="bg-fff">
+        <view class="u-flex-center-sb u-1A1A1A" @click="openBankCard">
+          <view class="u-flex">
+            <text class="u-font30">提现方式</text>
+            <view
+              class="ml46 u-font28"
+              v-if="bankCardList.length > 0 && dataForm.payment_term == 2"
+            >
+              <view>
+                <image :src="bankIcon" class="img30"></image>
+                <text class="u-ml20">{{ dataForm.bank_name }}</text>
+              </view>
+              <view class="u-999 u-mt5 u-ml45 u-flex">
+                尾号
+                <rich-text
+                  :nodes="$mUtil.cutOut(dataForm.withdraw_account)"
+                ></rich-text>
+                储蓄卡
+              </view>
+            </view>
+            <view
+              class="ml46 u-font28"
+              v-if="bankCardList.length <= 0 && dataForm.payment_term == 2"
+            >
+              添加银行卡
+            </view>
+            <view class="ml46 u-font28 sBox" v-if="dataForm.payment_term == 1">
+              <image
+                :src="$mUtil.staticUrl + '/alipay.png'"
+                class="img30"
+              ></image>
+              支付宝
+            </view>
+            <view class="ml46 u-font28 sBox" v-if="dataForm.payment_term == 0">
+              <image
+                :src="$mUtil.staticUrl + '/weChat.png'"
+                class="img30"
+              ></image>
+              微信
+            </view>
+            <view class="ml46 u-font28" v-if="dataForm.payment_term == 4">
+              提现到公益积分
+            </view>
+          </view>
+          <view class="iconfont u-font24 u-666"> &#xe6c7;</view>
+        </view>
+      </view>
+    </view>
+    <view class="btnBox">
+      <view @click="requestWithdrawal">提交申请</view>
+    </view>
+
+    <uni-popup
+      class="submit-popup"
+      ref="submitPopup"
+      type="center"
+      :mask-click="false"
+    >
+      <view class="content-box">
+        <view class="title">提交完成</view>
+        <view class="content">
+          <image
+            class="success-icon"
+            src="/static/common/success-icon.png"
+          ></image>
+          <view class="tip"> </view>
+          <button class="btn" @click="closePopup()">确 定</button>
+        </view>
+      </view>
+    </uni-popup>
+    <!--弹窗选择银行卡-->
+    <uniPopup type="bottom" ref="uniPopup">
+      <view class="popup">
+        <view class="bg-top">
+          <text class="iconfont u-999" @click="close">&#xe612;</text>
+          <text class="u-text-center ml200">选择优先付款方式</text>
+        </view>
+        <view class="bankCardList">
+          <view v-for="(item, index) in bankCardList" :key="item.id">
+            <!--index 下标,2 是类型自定义(下面支付宝,微信一样)-->
+            <view class="item u-flex" @click="pitchOn(index, 2)">
+              <image :src="item.icon"></image>
+              <view class="u-ml25 rh-br u-flex-sb">
+                <view class="u-flex">
+                  <text>{{ item.bank_name }}</text>
+                  (<rich-text :nodes="$mUtil.cutOut(item.card_num)"></rich-text
+                  >)
+                </view>
+                <text class="iconfont pull-right" v-if="pitchOnIndex == index"
+                  >&#xe63e;</text
+                >
+              </view>
+            </view>
+          </view>
+
+          <!--添加银行卡-->
+          <view class="item u-flex" @click="goAddBankCard">
+            <text class="iconfont">&#xe81a;</text>
+            <view class="u-ml25 rh-br">
+              <text>添加银行卡</text>
+            </view>
+          </view>
+
+          <!--支付宝-->
+          <view class="item u-flex" @click="pitchOn(-1, 1)">
+            <image :src="$mUtil.staticUrl + '/alipay.png'"></image>
+            <view class="u-ml25 rh-br">
+              <text>支付宝</text>
+              <text class="iconfont pull-right" v-if="pitchOnIndex == -1"
+                >&#xe63e;</text
+              >
+            </view>
+          </view>
+          <view class="item u-flex" @click="pitchOn(-2, 0)">
+            <image :src="$mUtil.staticUrl + '/weChat.png'"></image>
+            <view class="u-ml25 rh-br">
+              <text>微信</text>
+              <text class="iconfont pull-right" v-if="pitchOnIndex == -2"
+                >&#xe63e;</text
+              >
+            </view>
+          </view>
+          <view class="item u-flex" @click="pitchOn(-3, 4)">
+            <view class="u-ml25 rh-br">
+              <text>提现到公益积分</text>
+              <text class="iconfont pull-right" v-if="pitchOnIndex == -3"
+                >&#xe63e;</text
+              >
+            </view>
+          </view>
+        </view>
+      </view>
+    </uniPopup>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+
+const $http = uni.$http;
+
+const dataForm = ref({
+  public_service_points: "", // 提现金额
+  payment_term: 2, // * 收款方式:* 0 微信,* 1 支付宝,* 2 银行线下 * 3 现金支付
+  payee: "", // 收款人
+  withdraw_account: "", // 提现账户
+  withdraw_mobile: "", // 提现手机
+  bank_name: "", // 银行名称
+});
+const bankIcon = ref("");
+const pitchOnIndex = ref(0);
+const walletInfo = ref({
+  min_extract: 0,
+  wait_account: 0,
+  freezing: 0,
+}); // 账户信息
+const bankCardList = ref([]);
+const submitPopup = ref(null);
+const uniPopup = ref(null);
+
+// 生命周期
+onLoad(() => {
+  // 获取账户信息
+  getAccountMsg();
+  // 获取银行卡列表
+  getBankCardList();
+});
+
+// 方法
+// 获取账户信息
+const getAccountMsg = () => {
+  $http.get("/withdraw/getWalletInfo", {}).then(async (res) => {
+    if (res && res.code == 200) {
+      if (res.data) {
+        walletInfo.value = res.data;
+      }
+    }
+  });
+};
+
+// 获取银行卡列表
+const getBankCardList = () => {
+  $http.get("/member/bankcard/bankCardList", {}).then(async (res) => {
+    if (res && res.code == 200) {
+      bankCardList.value = res.list;
+      // 默认提方式为用户银行卡列表第一张银行卡
+      if (res.list.length > 0) {
+        dataForm.value.bank_name = res.list[0].bank_name;
+        dataForm.value.withdraw_account = res.list[0].card_num;
+        bankIcon.value = res.list[0].icon;
+        dataForm.value.payee = res.list[0].name;
+        dataForm.value.withdraw_mobile = res.list[0].mobile;
+        dataForm.value.user_bank_id = bankCardList.value[0].id;
+      }
+    }
+  });
+};
+
+// 打开弹窗银行卡列表
+const openBankCard = () => {
+  uniPopup.value.open();
+};
+
+// 关闭弹窗
+const close = () => {
+  uniPopup.value.close();
+};
+
+// 选择提现方式
+const pitchOn = (index, type) => {
+  pitchOnIndex.value = index;
+  dataForm.value.payment_term = type;
+  if (type == 2) {
+    dataForm.value.bank_name = bankCardList.value[index].bank_name;
+    dataForm.value.withdraw_account = bankCardList.value[index].card_num;
+    bankIcon.value = bankCardList.value[index].icon;
+    dataForm.value.user_bank_id = bankCardList.value[index].id;
+  } else {
+    dataForm.value.user_bank_id = null;
+  }
+  uniPopup.value.close();
+};
+
+// 跳到添加银行卡
+const goAddBankCard = () => {
+  uni.navigateTo({
+    url: "/pages/user/bankCard/addBankCard",
+  });
+};
+
+// 获取输入提现金额
+const getMoney = (e) => {
+  e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
+  // 重新赋值给 input
+  setTimeout(() => {
+    dataForm.value.public_service_points = e.target.value
+      ? e.target.value * 1
+      : "";
+  }, 0);
+};
+
+// 申请提现
+const requestWithdrawal = () => {
+  if (!dataForm.value.public_service_points) {
+    uni.$uv.toast("请输入提现服务积分");
+    return false;
+  }
+  if (dataForm.value.public_service_points < walletInfo.value.min_extract) {
+    uni.$uv.toast("提现金额超出您的最低提现服务积分");
+    return false;
+  }
+  if (dataForm.value.payment_term === "") {
+    uni.$uv.toast("请选择提现方式");
+    return false;
+  }
+  if (dataForm.value.payment_term == 2) {
+    if (!dataForm.value.bank_name) {
+      uni.$uv.toast("请先添加银行卡");
+      return false;
+    }
+  }
+
+  $http.post("/withdraw/memberWithdraw", dataForm.value).then(async (res) => {
+    if (res && res.code == 200) {
+      uni.$uv.toast("申请成功");
+      setTimeout(() => {
+        uni.navigateBack({
+          success: () => {
+            let page = getCurrentPages().pop(); // 跳转页面成功之后
+            if (!page) {
+              return;
+            } else {
+              page.onLoad(page.options); // page 自带 options 对象.
+            }
+          },
+        });
+      }, 2000);
+    } else {
+      uni.$uv.toast(res.msg);
+    }
+  });
+};
+
+// 关闭弹窗
+const closePopup = () => {
+  submitPopup.value.close();
+};
+</script>
+
+<style lang="scss" scoped>
+.canWithdrawCls {
+  font-size: 28rpx;
+  color: #1a1a1a;
+  padding: 60rpx;
+  border-bottom: 8rpx solid #f5f5f5;
+
+  .markBox {
+    text {
+      display: inline-block;
+      width: 10rpx;
+    }
+  }
+
+  > view {
+    display: flex;
+
+    .canWithdrawCls_val {
+      font-size: 24rpx;
+      align-items: baseline;
+
+      text {
+        font-size: 36rpx;
+        color: #ff0000;
+      }
+    }
+
+    > view {
+      display: flex;
+
+      text {
+        font-size: 24rpx;
+        color: #808080;
+      }
+
+      > view {
+        color: #808080;
+      }
+    }
+  }
+}
+
+.withdrawCls {
+  padding: 40rpx 60rpx;
+
+  .withdrawCls_lab {
+    font-size: 28rpx;
+    color: #1a1a1a;
+
+    text {
+      color: #808080;
+    }
+  }
+
+  .withdrawCls_val {
+    display: flex;
+    align-items: center;
+    font-size: 60rpx;
+    padding: 30rpx 0;
+    border-bottom: 3rpx dashed #808080;
+
+    text {
+      color: #181818;
+    }
+
+    input {
+      margin-left: 10rpx;
+      font-size: 42rpx;
+    }
+  }
+
+  .withdrawTypeCls {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 40rpx;
+
+    .withdrawTypeCls_lab {
+      font-size: 30rpx;
+      color: #1a1a1a;
+    }
+
+    .withdrawTypeCls_val {
+      font-size: 28rpx;
+      color: #999999;
+
+      .selLab {
+        color: #1a1a1a;
+      }
+    }
+
+    .withdrawTypeCls_dir {
+      color: #808080;
+    }
+  }
+}
+
+.btnBox {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: #ffffff;
+  padding: 30rpx 30rpx 60rpx 30rpx;
+
+  > view {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 32rpx;
+    color: #ffffff;
+    padding: 20rpx 0;
+    background: #0b844a;
+    border-radius: 40rpx;
+  }
+}
+
+.content-box {
+  width: 440rpx;
+  padding-bottom: 50rpx;
+}
+
+.bg-fff {
+  background-color: #ffffff;
+  padding: 26rpx 0rpx 36rpx;
+  border-radius: 0rpx 0rpx 18px 18rpx;
+}
+
+.ml46 {
+  margin-left: 46rpx;
+}
+
+.apply-btn {
+  margin-top: 80rpx;
+
+  button {
+    background: #0b844a;
+    color: #ffffff;
+  }
+}
+
+.zfb-wx {
+  padding-bottom: 24rpx;
+
+  .payIcon {
+    color: #00aaef;
+    font-size: 32rpx;
+    margin-right: 18rpx;
+  }
+
+  .wxIcon {
+    color: rgb(37, 171, 56);
+    font-size: 32rpx;
+    margin-right: 18rpx;
+  }
+}
+
+.zhInput input {
+  width: 62%;
+  height: 70rpx;
+  line-height: 70rpx;
+  padding: 0rpx 20rpx;
+  border: 1rpx solid #d9d9d9;
+  border-radius: 6rpx;
+}
+
+.popup {
+  width: 100%;
+
+  .bg-top {
+    background-color: #f5f5f5;
+    padding: 20rpx 30rpx;
+    border-radius: 18rpx 18rpx 0px 0px;
+  }
+
+  .bankCardList {
+    background-color: #ffffff;
+    padding: 0rpx 30rpx;
+    padding-bottom: 185rpx;
+
+    .item {
+      height: 84rpx;
+      line-height: 84rpx;
+
+      image {
+        width: 48rpx;
+        height: 42rpx;
+        // margin-top: 20rpx;
+        vertical-align: bottom;
+      }
+
+      .rh-br {
+        width: 100%;
+        border-bottom: 1rpx solid #e6e6e6;
+      }
+
+      .pull-right {
+        float: right !important;
+      }
+    }
+  }
+}
+
+.ml56 {
+  margin-left: 56rpx;
+}
+
+.ml200 {
+  margin-left: 200rpx;
+}
+
+.wt112 {
+  width: 140rpx;
+}
+
+.img30 {
+  width: 30rpx;
+  height: 30rpx;
+}
+
+.wd-bgImg {
+  position: relative;
+  padding: 25rpx 0rpx;
+
+  image {
+    width: 100%;
+    height: 200rpx;
+    vertical-align: bottom;
+  }
+
+  .moneyInfo {
+    position: absolute;
+    top: 25rpx;
+    width: 92%;
+
+    .mt40 {
+      margin-top: 40rpx;
+    }
+
+    .detail-btn button {
+      height: 56rpx;
+      line-height: 30rpx;
+      border-radius: 28px;
+      opacity: 0.82;
+      padding: 10rpx 30rpx;
+      background-color: #eed9a9;
+      color: #0b844a;
+    }
+  }
+}
+
+.wdInput {
+  background-color: #ffffff;
+  border-radius: 18rpx 18rpx 0px 0rpx;
+  padding: 40rpx 22rpx 32rpx;
+
+  .input {
+    height: 80rpx;
+    line-height: 80rpx;
+    font-size: 60rpx;
+    border-bottom: 1rpx solid #d9d9d9;
+    padding-bottom: 25rpx;
+
+    input {
+      height: 80rpx;
+      line-height: 80rpx;
+      font-size: 36rpx;
+    }
+  }
+}
+
+.u-flex-sb {
+  display: flex;
+  justify-content: space-between;
+}
+
+.sBox {
+  display: flex;
+  align-items: center;
+
+  > image {
+    margin-right: 10rpx;
+  }
+}
+</style>

+ 259 - 0
pages/distribution/withdrawTwo.vue

@@ -0,0 +1,259 @@
+<template>
+  <view class="container">
+    <view class="u-plr30">
+      <view class="u-bg-fff u-p30 u-mt20">
+        <view class="u-flex-center-sb">
+          <view>
+            <text>可转入金额</text>
+            <text class="u-ml20 u-00BF5A u-bold u-font36">{{
+              walletInfo.commission_able
+            }}</text>
+          </view>
+          <view @click="goWallet">
+            <text class="iconfont">&#xe638;</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="wdInput u-mt20">
+        <view class="u-mt20 input u-flex">
+          <text>¥</text>
+          <input
+            class="u-ml10"
+            maxlength="10"
+            type="digit"
+            @input="getMoney"
+            v-model="dataForm.money"
+            placeholder="输入金额"
+          />
+        </view>
+      </view>
+
+      <view class="apply-btn" @click="requestWithdrawal">
+        <button class="u-btn-two">确定转入</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+
+const $http = uni.$http;
+
+const dataForm = ref({
+  money: "", // 提现金额
+});
+const walletInfo = ref({
+  min_extract: 0,
+  wait_account: 0,
+  freezing: 0,
+}); // 账户信息
+
+// 生命周期
+onLoad(() => {
+  // 获取账户信息
+  $http.get("/withdraw/getWalletInfo", {}).then(async (res) => {
+    if (res && res.code == 200) {
+      if (res.data) {
+        walletInfo.value = res.data;
+      }
+    }
+  });
+});
+
+// 方法
+// 跳转到钱包明细
+const goWallet = () => {
+  uni.navigateTo({
+    url: "./wallet",
+  });
+};
+
+// 获取输入提现金额
+const getMoney = (e) => {
+  e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
+  // 重新赋值给 input
+  setTimeout(() => {
+    dataForm.value.money = e.target.value;
+  }, 0);
+};
+
+// 申请转入
+const requestWithdrawal = () => {
+  if (!dataForm.value.money) {
+    uni.$uv.toast("请输入金额");
+    return false;
+  }
+
+  $http.post("/withdraw/commission-to-balance", dataForm.value).then((res) => {
+    if (res && res.code == 200) {
+      uni.$uv.toast("转入成功");
+      setTimeout(() => {
+        uni.navigateBack({
+          success: () => {
+            let page = getCurrentPages().pop(); // 跳转页面成功之后
+            if (!page) {
+              return;
+            } else {
+              page.onLoad(page.options); // page 自带 options 对象.
+            }
+          },
+        });
+      }, 2000);
+    } else {
+      uni.$uv.toast(res.msg);
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+page {
+  background-color: #f5f5f5;
+}
+
+.wt112 {
+  width: 140rpx;
+}
+
+.img30 {
+  width: 30rpx;
+  height: 30rpx;
+}
+
+.wd-bgImg {
+  position: relative;
+  padding: 25rpx 0rpx;
+
+  image {
+    width: 100%;
+    height: 200rpx;
+    vertical-align: bottom;
+  }
+
+  .moneyInfo {
+    position: absolute;
+    top: 25rpx;
+    width: 92%;
+
+    .mt40 {
+      margin-top: 40rpx;
+    }
+
+    .detail-btn button {
+      height: 56rpx;
+      line-height: 30rpx;
+      border-radius: 28px;
+      opacity: 0.82;
+      padding: 10rpx 30rpx;
+      background-color: #eed9a9;
+      color: #00bf5a;
+    }
+  }
+}
+
+.wdInput {
+  background-color: #ffffff;
+  border-radius: 18rpx 18rpx 0px 0rpx;
+  padding: 40rpx 22rpx 32rpx;
+
+  .input {
+    height: 80rpx;
+    line-height: 80rpx;
+    font-size: 60rpx;
+    border-bottom: 1rpx solid #d9d9d9;
+    padding-bottom: 25rpx;
+
+    input {
+      height: 80rpx;
+      line-height: 80rpx;
+      font-size: 36rpx;
+    }
+  }
+}
+
+.bg-fff {
+  background-color: #ffffff;
+  padding: 26rpx 22rpx 36rpx;
+  border-radius: 0rpx 0rpx 18px 18rpx;
+}
+
+.ml46 {
+  margin-left: 46rpx;
+}
+
+.apply-btn {
+  margin-top: 80rpx;
+
+  button {
+    background: #00bf5a;
+    color: #ffffff;
+  }
+}
+
+.zfb-wx {
+  padding-bottom: 24rpx;
+
+  .payIcon {
+    color: #00aaef;
+    font-size: 32rpx;
+    margin-right: 18rpx;
+  }
+
+  .wxIcon {
+    color: rgb(37, 171, 56);
+    font-size: 32rpx;
+    margin-right: 18rpx;
+  }
+}
+
+.zhInput input {
+  width: 62%;
+  height: 70rpx;
+  line-height: 70rpx;
+  padding: 0rpx 20rpx;
+  border: 1rpx solid #d9d9d9;
+  border-radius: 6rpx;
+}
+
+.popup {
+  width: 100%;
+  .bg-top {
+    background-color: #f5f5f5;
+    padding: 20rpx 30rpx;
+    border-radius: 18rpx 18rpx 0px 0px;
+  }
+  .bankCardList {
+    background-color: #ffffff;
+    padding: 0rpx 30rpx;
+    padding-bottom: 185rpx;
+    .item {
+      height: 84rpx;
+      line-height: 84rpx;
+      image {
+        width: 48rpx;
+        height: 42rpx;
+        margin-top: 20rpx;
+        vertical-align: bottom;
+      }
+      .rh-br {
+        width: 100%;
+        border-bottom: 1rpx solid #e6e6e6;
+      }
+      .pull-right {
+        float: right !important;
+      }
+    }
+  }
+}
+
+.ml56 {
+  margin-left: 56rpx;
+}
+
+.ml200 {
+  margin-left: 200rpx;
+}
+</style>

+ 929 - 0
pages/seckill/list.vue

@@ -0,0 +1,929 @@
+<template>
+  <view class="time-limit">
+    <view class="top">
+      <view class="box">
+        <scroll-view scroll-x="true">
+          <view
+            class="time"
+            v-for="(item, index) in times"
+            :key="index"
+            @click="switeTime(item)"
+          >
+            <view class="number">
+              <!-- {{ item.st + ":00" }} -->
+              {{ item.start_hour }}
+            </view>
+            <view
+              :class="item.active ? 'font' : 'font-soon'"
+              v-if="item.value == 0"
+            >
+              即将开始
+            </view>
+
+            <view
+              :class="item.active ? 'font' : 'font-soon'"
+              v-if="item.value == 1"
+            >
+              已开抢
+            </view>
+            <view
+              :class="item.active ? 'font' : 'font-soon'"
+              v-if="item.value == 2"
+            >
+              正在抢购
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+      <view class="surplus">
+        <view class="transverse"> </view>
+        <view class="surplus-content" v-if="activeState == 1">
+          <view class="lable"> 本场剩余 </view>
+          <uni-countdown
+            v-if="countDown"
+            :backgroundColor="'#DCCDA4'"
+            :color="'#00bf5a'"
+            :splitorColor="'#fff'"
+            :show-day="time2[0] > 0"
+            :day="time2[0]"
+            :hour="time2[1]"
+            :minute="time2[2]"
+            :second="time2[3]"
+          >
+          </uni-countdown>
+        </view>
+        <view class="surplus-content" v-if="activeState == 0">
+          <view class="lable">即将开始</view>
+        </view>
+        <view class="surplus-content" v-if="activeState == 2">
+          <view class="lable">已开抢</view>
+        </view>
+        <view class="transverse"> </view>
+      </view>
+    </view>
+    <swiper
+      class="commodity"
+      :current="currentItem"
+      v-if="goodList && goodList.length > 0"
+      :indicator-dots="false"
+      :autoplay="false"
+      @change="imgActiveFun"
+    >
+      <swiper-item
+        class="commodity-item"
+        v-for="(item, key) in goodList"
+        :key="item.id"
+        @click="
+          goProductDetails('/pages/product/goods/seckillGoods?id=' + item.id)
+        "
+      >
+        <view
+          :class="[activeBannerIndex == key ? 'active-back' : 'swiper-back']"
+        >
+          <image
+            :class="[
+              activeBannerIndex == key ? 'current-item' : 'default-image',
+            ]"
+            :src="`${item.cover}?x-oss-process=style/w_350`"
+            mode=""
+          >
+          </image>
+          <view class="bottom-back">
+            <view
+              :class="[
+                activeBannerIndex == key ? 'active-name' : 'name',
+                'u-text2',
+              ]"
+            >
+              {{ item.title }}
+            </view>
+            <view class="content-number">
+              <view class="large">
+                <rich-text
+                  :nodes="$mUtil.priceBigSmall(item.min_price)"
+                ></rich-text>
+              </view>
+              <view class="small">
+                <rich-text
+                  :nodes="$mUtil.priceBigSmall(item.min_sale_price)"
+                ></rich-text>
+              </view>
+            </view>
+            <view class="soon">
+              <view class="soon-item">
+                <view
+                  class="orange"
+                  :style="{ width: (15.3 * item.rate) / 10 + 'rpx' }"
+                >
+                </view>
+              </view>
+              <view class="complete"> 已抢{{ item.rate }}% </view>
+            </view>
+          </view>
+        </view>
+      </swiper-item>
+    </swiper>
+
+    <view class="option" v-if="goodList && goodList.length > 0">
+      <!-- <view class="option-item active">
+				
+			</view> -->
+      <view
+        class="option-item"
+        :class="{ active: activeBannerIndex == index }"
+        v-for="(item, index) in goodList"
+        :key="index"
+      >
+      </view>
+    </view>
+    <view class="list">
+      <view v-if="goodList.length > 0">
+        <view
+          class="item"
+          v-for="(item, index) in goodList"
+          :key="index"
+          @click="
+            goProductDetails('/pages/product/goods/seckillGoods?id=' + item.id)
+          "
+        >
+          <view class="item-left">
+            <image
+              :src="`${item.cover}?x-oss-process=style/w_350`"
+              mode=""
+            ></image>
+          </view>
+          <view class="item-right">
+            <view class="title">
+              {{ item.title }}
+            </view>
+            <view class="list-soon">
+              <view class="soon-item">
+                <view
+                  class="orange"
+                  :style="{ width: (15.3 * item.rate) / 10 + 'rpx' }"
+                >
+                </view>
+              </view>
+              <view class="complete"> 已抢{{ item.rate }}% </view>
+            </view>
+            <view class="list-bottom">
+              <view class="number">
+                <view class="large">
+                  <rich-text
+                    :nodes="$mUtil.priceBigSmall(item.min_price)"
+                  ></rich-text>
+                </view>
+                <view class="small">
+                  <rich-text
+                    :nodes="$mUtil.priceBigSmall(item.min_sale_price)"
+                  ></rich-text>
+                </view>
+              </view>
+              <view class="no-button" v-if="activeState == 0">即将开始</view>
+              <view class="no-button" v-if="activeState == 2">已结束 </view>
+              <view class="button" v-if="activeState == 1 && ispay"
+                >立即抢购
+              </view>
+            </view>
+          </view>
+        </view>
+        <loadMore v-if="goodList.length > 0" :status="status"></loadMore>
+      </view>
+      <nodata v-else :config="{ top: 20, content: '暂无商品~' }"></nodata>
+    </view>
+    <ldLoading isFullScreen :active="loading"></ldLoading>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
+// import { getAllKillConfig } from "@/api/home";
+
+const $http = uni.$http;
+const $mUtil = uni.$mUtil;
+
+const loading = ref(true);
+const page = ref(1);
+const limit = ref(10);
+const activeState = ref(null);
+const times = ref([]);
+const countDown = ref(true);
+const curTime = ref(null);
+const goodList = ref([]);
+const time2 = ref([0, 0, 0, 0]); // 秒杀倒计时
+const httpCurTime = ref(null);
+const status = ref("more");
+const activeBannerIndex = ref(0);
+const params = ref({});
+const endTime = ref(null);
+const ispay = ref(getApp().globalData.openPay);
+const currentItem = ref(0);
+
+// 初始化参数
+const initParams = (options) => {
+  if (options.shopid) {
+    params.value.shop_id = options.shopid;
+  }
+};
+
+// 切换时间
+const switeTime = (item) => {
+  let st_hour = item.start_hour.split(":")[0];
+  let et_hour = item.end_hour.split(":")[0];
+  console.log(item, 1111);
+  countDown.value = false;
+  time2.value = [0, 0, 0, 0];
+
+  setTimeout(() => {
+    countDown.value = true;
+  }, 0);
+
+  httpCurTime.value = item.start_hour;
+  if (et_hour == "23") {
+    endTime.value = "23:59";
+  } else {
+    endTime.value = item.end_hour;
+  }
+
+  times.value.forEach((val) => {
+    val.active = false;
+  });
+  item.active = true;
+
+  goodList.value = [];
+  page.value = 1;
+
+  getList();
+};
+
+const goProductDetails = (url) => {
+  if (activeState.value == 1) {
+    uni.navigateTo({
+      url: url,
+    });
+  } else if (activeState.value == 0) {
+    $mUtil.toast("该活动还未开始");
+  } else {
+    $mUtil.toast("该活动已结束");
+  }
+};
+
+const imgActiveFun = (e) => {
+  activeBannerIndex.value = e.detail.current;
+  console.log(currentItem.value);
+  console.log(e.detail.current);
+};
+
+const getTime = async () => {
+	return
+  curTime.value = new Date().getHours();
+  times.value = await getAllKillConfig();
+
+  if (times.value && times.value.length > 0) {
+    times.value.forEach((val, index) => {
+      let st_hour = val.start_hour.split(":")[0];
+      let et_hour = val.end_hour.split(":")[0];
+
+      // 活动正在进行中
+      if (st_hour <= curTime.value && curTime.value < et_hour) {
+        val.value = 2;
+        httpCurTime.value = val.start_hour;
+        endTime.value = val.end_hour;
+        val.active = true;
+      } else if (curTime.value < et_hour) {
+        // 活动即将开始
+        val.value = 0;
+        if (httpCurTime.value == null) {
+          httpCurTime.value = val.start_hour;
+          endTime.value = val.end_hour;
+          val.active = true;
+        }
+      } else if (
+        curTime.value >= et_hour &&
+        curTime.value > times.value[index + 1]?.start_hour
+      ) {
+        // 活动已过期
+        val.value = 1;
+      }
+    });
+  }
+  getList();
+};
+
+const getList = () => {
+  loading.value = false;
+  $http
+    .get(
+      "/marketing/seckillActivityGoods/start-flash-sale",
+      {
+        start_hour: httpCurTime.value,
+        end_hour: endTime.value,
+        page: page.value,
+        limit: limit.value,
+        ...params.value,
+      },
+      false
+    )
+    .then((res) => {
+      if (res && res.code == 200) {
+        activeState.value = res.data.active_state;
+        time2.value = $mUtil
+          .countDown(Math.floor(res.data.finish_time / 1000), res.data.now_time)
+          .split(":")
+          .map((val) => Number(val));
+        goodList.value = goodList.value.concat(res.data.page.list);
+
+        if (res.data.page.totalPage <= res.data.page.currPage) {
+          status.value = "noMore";
+        } else {
+          status.value = "more";
+        }
+      }
+    });
+};
+
+// 生命周期
+onLoad((options) => {
+  initParams(options);
+  //   getTime();
+});
+
+onShow(() => {
+  // this.goodList=[];
+  //    this.getTime();
+});
+
+// 下拉刷新
+onPullDownRefresh(() => {
+  page.value = 1;
+  goodList.value = [];
+  times.value.forEach((item) => {
+    item.active = false;
+  });
+  getTime();
+  uni.stopPullDownRefresh();
+});
+
+// 上拉加载
+onReachBottom(() => {
+  page.value++;
+  getList();
+});
+</script>
+<style>
+page {
+  background-color: #f5f5f5;
+}
+</style>
+<style lang="scss" scoped>
+.no-button {
+  color: #1e402e;
+  font-size: 28rpx;
+  font-weight: 500;
+  padding: 12rpx 34rpx;
+  border: 2rpx solid #1e402e;
+  background-color: #ffffff;
+  border-radius: 32rpx;
+}
+
+.bottom-back {
+  background-color: #ffffff;
+  border-bottom-left-radius: 18rpx;
+  border-bottom-right-radius: 18rpx;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  z-index: -1;
+  bottom: 30rpx;
+  padding-top: 20rpx;
+
+  .soon {
+    padding: 0 20rpx;
+    display: flex;
+    margin-bottom: 6rpx;
+    align-items: center;
+
+    .soon-item {
+      width: 153rpx;
+      height: 10rpx;
+      border-radius: 6rpx;
+      border: 2rpx solid #00bf5a;
+      margin-right: 10rpx;
+
+      .orange {
+        width: 50rpx;
+        height: 10rpx;
+        border-radius: 5rpx;
+        background-color: #00bf5a;
+      }
+    }
+
+    .complete {
+      font-size: 20rpx;
+      color: #00bf5a;
+      line-height: 24rpx;
+      font-weight: 500;
+    }
+  }
+
+  .name {
+    padding: 0 20rpx 0 10rpx;
+    // margin: 20rpx 0 0 10rpx;
+    width: 380rpx;
+    box-sizing: border-box;
+    line-height: 36rpx;
+    height: 72rpx;
+    color: #181818;
+    font-weight: 400;
+    overflow: hidden;
+    // text-overflow: ellipsis;
+  }
+
+  .active-name {
+    padding: 0 20rpx 0 10rpx;
+    // margin: 20rpx 0 0 10rpx;
+    width: 420rpx;
+    box-sizing: border-box;
+    line-height: 36rpx;
+    height: 72rpx;
+    color: #181818;
+    font-weight: 400;
+    overflow: hidden;
+    transition: all 0.5s;
+  }
+
+  .content-number {
+    padding: 0 20rpx;
+    display: flex;
+    align-items: center;
+    margin: 15rpx 0;
+
+    .large {
+      font-size: 36rpx;
+      color: #00bf5a;
+      font-weight: bold;
+
+      text {
+        font-size: 36rpx;
+      }
+    }
+
+    .small {
+      font-size: 22rpx;
+      color: #cccccc;
+      font-weight: 500;
+      margin-left: 16rpx;
+      text-decoration: line-through;
+    }
+  }
+}
+
+.commodity {
+  margin-top: -139rpx;
+  width: 720rpx;
+  // padding: 0 30rpx;
+  // margin-left: 30rpx;
+  // margin-right: 30rpx;
+  height: 650rpx;
+  margin-left: 30rpx;
+  overflow: hidden;
+
+  ::v-deep swiper-item {
+    width: 450rpx !important;
+  }
+
+  ::v-deep .uni-swiper-slide-frame {
+    width: 420rpx !important;
+  }
+
+  .commodity-item {
+    //background-color: #FFFFFF;
+    // margin-right: 30rpx;
+    border-radius: 16rpx;
+    // padding: 18rpx;
+    padding-top: 0;
+    // text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .swiper-back {
+      border-radius: 16rpx;
+      overflow: hidden;
+      // background-color: #FFFFFF;
+      width: 380rpx;
+      // padding-top: 40rpx;
+      height: 610rpx;
+      margin-top: 40rpx;
+    }
+
+    .active-back {
+      // padding-top: 0;
+      // background-color: #FFFFFF;
+      width: 420rpx;
+      height: 650rpx;
+      border-radius: 16rpx;
+      position: relative;
+      transition: all 0.5s;
+    }
+
+    .default-image {
+      width: 380rpx;
+      height: 380rpx;
+      border-radius: 16rpx;
+      position: relative;
+    }
+
+    .current-item {
+      width: 420rpx;
+      height: 420rpx;
+      border-radius: 16rpx;
+      transition: all 0.5s;
+    }
+
+    .completed {
+      font-size: 22rpx;
+      margin-top: 2rpx;
+      font-weight: 400;
+      color: #333333;
+
+      text {
+        color: #00bf5a;
+      }
+    }
+
+    .number {
+      margin-top: 20rpx;
+      font-size: 22rpx;
+      color: #333333;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+
+      .zero {
+        margin-left: 20rpx;
+        font-size: 22rpx;
+        color: #00bf5a;
+        font-weight: 500;
+      }
+
+      .one {
+        color: #00bf5a;
+        font-size: 34rpx;
+        font-weight: 700;
+      }
+
+      .two {
+        color: #00bf5a;
+        font-size: 18rpx;
+        font-weight: 700;
+      }
+    }
+  }
+}
+
+.option {
+  margin: 30rpx 0;
+  display: flex;
+  justify-content: center;
+
+  .option-item {
+    background-color: #d9d9d9;
+    margin: 0 8rpx;
+    width: 14rpx;
+    height: 14rpx;
+    border-radius: 7rpx;
+  }
+
+  .active {
+    background-color: #00bf5a;
+    width: 35rpx;
+    height: 14rpx;
+    border-radius: 7rpx;
+  }
+}
+
+.list {
+  margin: 0 30rpx 26rpx 30rpx;
+
+  .item {
+    padding: 20rpx;
+    background-color: #ffffff;
+    border-radius: 18rpx;
+    display: flex;
+    margin-bottom: 25rpx;
+
+    .item-left {
+      image {
+        width: 187rpx;
+        height: 187rpx;
+        border-radius: 18rpx;
+      }
+    }
+
+    .item-right {
+      margin-left: 30rpx;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .title {
+        font-size: 28rpx;
+        font-weight: 400;
+        color: #181818;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        word-wrap: break-word;
+        word-break: break-all;
+        white-space: normal !important;
+      }
+
+      .list-bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .number {
+          display: flex;
+          align-items: center;
+
+          .large {
+            font-size: 36rpx;
+            color: #00bf5a;
+            font-weight: Bold;
+            margin-right: 17rpx;
+
+            text {
+              font-size: 36rpx;
+            }
+          }
+
+          .small {
+            font-size: 22rpx;
+            color: #cccccc;
+            font-weight: 500;
+            text-decoration: line-through;
+          }
+        }
+
+        .button {
+          color: #ffffff;
+          font-size: 28rpx;
+          font-weight: 500;
+          padding: 12rpx 34rpx;
+          background-color: #00bf5a;
+          border-radius: 32rpx;
+        }
+      }
+
+      .list-soon {
+        display: flex;
+        align-items: center;
+        margin-top: 12rpx;
+
+        .soon-item {
+          width: 153rpx;
+          height: 10rpx;
+          border: 2rpx solid #00bf5a;
+          border-radius: 6rpx;
+          margin-right: 10rpx;
+
+          .orange {
+            width: 50rpx;
+            height: 10rpx;
+            background-color: #00bf5a;
+            border-radius: 5rpx;
+          }
+        }
+
+        .complete {
+          font-size: 20rpx;
+          color: #00bf5a;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+}
+
+.spot {
+  display: flex;
+  justify-content: center;
+  margin: 27rpx 0 40rpx 0;
+
+  .spot-item {
+    width: 35rpx;
+    height: 14rpx;
+    background-color: #00bf5a;
+    margin-right: 16rpx;
+  }
+
+  .radius {
+    width: 14rpx;
+    height: 14rpx;
+    background-color: #d9d9d9;
+    border-radius: 7rpx;
+    margin-right: 16rpx;
+  }
+}
+
+.two-comtent-item {
+  margin: 0 30rpx;
+  background-color: #ffffff;
+  border-radius: 18rpx;
+
+  .two-image {
+    overflow: hidden;
+
+    image {
+      width: 380rpx;
+      height: 380rpx;
+      border-radius: 18rpx;
+    }
+  }
+
+  .two-content-number {
+    padding: 0 30rpx;
+    display: flex;
+    align-items: baseline;
+
+    .two-large {
+      font-size: 20rpx;
+      color: #00bf5a;
+      font-weight: bold;
+
+      text {
+        font-size: 36rpx;
+      }
+    }
+
+    .two-small {
+      font-size: 22rpx;
+      color: #cccccc;
+      font-weight: 500;
+      margin-left: 16rpx;
+      text-decoration: line-through;
+    }
+  }
+
+  .two-name {
+    padding: 0 20rpx;
+    width: 368rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-wrap: break-word;
+    word-break: break-all;
+    white-space: normal !important;
+  }
+}
+
+.two-soon {
+  padding: 0 30rpx;
+  display: flex;
+  align-items: center;
+
+  .two-soon-item {
+    width: 153rpx;
+    height: 10rpx;
+    border-radius: 6rpx;
+    border: 1rpx solid #00bf5a;
+    margin-right: 10rpx;
+
+    .two-orange {
+      width: 50rpx;
+      height: 10rpx;
+      border-radius: 5rpx;
+      background-color: #00bf5a;
+    }
+  }
+
+  .two-complete {
+    font-size: 20rpx;
+    color: #00bf5a;
+    line-height: 24rpx;
+    font-weight: 500;
+  }
+}
+
+.content {
+  //   align-items: center;
+  //   overflow: scroll;
+  //   white-space: nowrap;
+  // height: 300rpx;
+  // background-color: red;
+  margin-top: -139rpx;
+  //   display: flex;
+  margin-left: 30rpx;
+  height: 607rpx;
+
+  ::v-deep .uni-swiper-slide-frame {
+    width: 402rpx !important;
+    padding-right: 30rpx;
+  }
+
+  .comtent-item {
+    margin-right: 30rpx;
+    // padding: 0 30rpx;
+    background-color: #ffffff;
+    border-radius: 18rpx;
+
+    // width: 420rpx;
+
+    image {
+      width: 420rpx;
+      height: 420rpx;
+      border-radius: 18rpx;
+    }
+  }
+}
+
+.surplus {
+  margin-top: 43rpx;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding-bottom: 168rpx;
+
+  .surplus-content {
+    color: #ffffff;
+    font-size: 20rpx;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+
+    text {
+      color: #00bf5a;
+      padding: 1rpx 4rpx;
+      background-color: #dccda4;
+      border-radius: 4rpx;
+      margin: 0 6rpx 0 14rpx;
+    }
+  }
+
+  .lable {
+    margin-right: 8rpx;
+  }
+
+  ::v-deep .uni-countdown__number {
+    padding: 2rpx 8rpx;
+    border-radius: 8rpx;
+  }
+
+  .transverse {
+    width: 210rpx;
+    height: 1rpx;
+    opacity: 0.2;
+    background-color: #ffffff;
+  }
+}
+
+.top {
+  background-color: #00bf5a;
+
+  .box {
+    padding: 0 30rpx;
+    white-space: nowrap;
+    // display: flex;
+    // justify-content: space-around;
+
+    .time {
+      display: inline-block;
+      margin-right: 30rpx;
+      text-align: center;
+
+      .number {
+        font-size: 42rpx;
+        font-weight: 700;
+        color: #ffffff;
+      }
+
+      .font {
+        font-size: 22rpx;
+        font-weight: 500;
+        color: #053420;
+        padding: 2rpx 12rpx;
+        border-radius: 20rpx;
+        background-color: #dccda4;
+      }
+
+      .font-soon {
+        font-size: 22rpx;
+        font-weight: 500;
+        color: #f5f5f5;
+      }
+    }
+  }
+}
+
+.time-limit {
+  background-color: #f6f6f6;
+}
+</style>

+ 983 - 0
pages/seckill/seckillGoods.vue

@@ -0,0 +1,983 @@
+<template>
+  <view class="container">
+    <navbar :config="config" backColor="#666"></navbar>
+    <view id="page-top">
+      <view class="product">
+        <view class="u-bg-fff pb40">
+          <view class="pic">
+            <swiper
+              class="swiper"
+              indicator-dots="true"
+              :autoplay="true"
+              interval="2000"
+              duration="1500"
+              circular="true"
+            >
+              <swiper-item v-if="dataForm.video_url">
+                <j-video
+                  class="jvideo"
+                  :url="dataForm.video_url"
+                  width="750rpx"
+                  height="620rpx"
+                ></j-video>
+              </swiper-item>
+              <swiper-item v-for="(item, index) in imglist" :key="index">
+                <image :src="item" mode="aspectFill"></image>
+              </swiper-item>
+            </swiper>
+
+            <view class="p-price">
+              <view class="pd24 u-flex-center" style="align-items: baseline">
+                <view class="u-FFF u-font36">
+                  <rich-text
+                    :nodes="$mUtil.priceBigSmallTwo(dataForm.min_price)"
+                  ></rich-text>
+                </view>
+                <text class="discount u-font24 u-ml20 u-del"
+                  >¥{{ dataForm.max_sale_price }}</text
+                >
+              </view>
+              <view class="p-ab u-flex-center">
+                <view class="triangle-bottomright"></view>
+                <view class="seckill u-text-center u-font28">
+                  <!-- active_state 0:未开始 * 1:进行中 * 2:已结束 -->
+
+                  <view class="u-bold" v-if="dataForm.active_state == 1"
+                    >距结束</view
+                  >
+
+                  <view
+                    class="u-bold"
+                    v-if="
+                      dataForm.active_state == 0 || dataForm.active_state == 2
+                    "
+                    >已结束</view
+                  >
+                  <view v-if="dataForm.active_state != 2">
+                    <uni-countdown
+                      :backgroundColor="'none'"
+                      @timeup="overDown1"
+                      :color="'#3775F6'"
+                      :splitorColor="'#3775F6'"
+                      :show-day="time1[0] > 0"
+                      :day="time1[0]"
+                      :hour="time1[1]"
+                      :minute="time1[2]"
+                      :second="time1[3]"
+                    ></uni-countdown>
+                  </view>
+                </view>
+              </view>
+            </view>
+
+            <view class="mt10 u-plr30">
+              <view>
+                <view
+                  v-if="shop.platform_shop"
+                  class="tipsStatus"
+                  style="vertical-align: middle"
+                  >自营</view
+                >
+                <text class="u-font34 u-bold u-1A1A1A">{{
+                  dataForm.title
+                }}</text>
+              </view>
+              <view class="u-font24 u-mt15 u-999">
+                <text
+                  >已售
+                  <text class="u-FF0000">{{ dataForm.result_sale_num }}</text
+                  >件,仅剩<text class="u-FF0000">{{
+                    dataForm.residue_stock_total
+                  }}</text
+                  >件</text
+                >
+              </view>
+              <!--优惠-->
+            </view>
+          </view>
+        </view>
+
+        <view class="u-bg-fff u-mt10">
+          <view class="u-plr30 u-flex-center-sb pt-pb35">
+            <view class="u-flex-center" @click="goShop">
+              <view>
+                <image class="u-avatar104" :src="shop.logo"></image>
+              </view>
+              <view class="u-ml25">
+                <view class="u-font28 u-1A1A1A u-bold"
+                  >{{ shop.shop_name }}
+                </view>
+                <view class="u-999 u-font24 u-mt5 u-text2">
+                  <text
+                    class="iconfont"
+                    style="color: #00bf5a"
+                    @click.stop="goLocal"
+                    >&#xe6db;</text
+                  >
+                  {{ shop.province_name }}{{ shop.city_name }}{{ shop.area_name
+                  }}{{ shop.address }}
+                </view>
+              </view>
+            </view>
+            <view class="iconfont" @click="goShop">&#xe6c7;</view>
+          </view>
+        </view>
+      </view>
+
+      <view class="u-bg-fff u-mt10">
+        <view
+          class="tab u-flex-center-sa u-font30 u-1A1A1A u-border-one-one"
+          :style="[{ top: `calc(${statusBarHeight}px + 44px)` }]"
+        >
+          <view
+            @tap="change(0)"
+            class="pb30"
+            :class="{ active: isChecked == 0 }"
+            >商品详情</view
+          >
+          <view
+            @tap="change(1)"
+            class="pb30"
+            :class="{ active: isChecked == 1 }"
+            >用户评论({{ commentListLength }})</view
+          >
+        </view>
+        <view class="u-mt10">
+          <!--商品详情-->
+          <view v-if="isChecked == 0">
+            <view class="richText ql-editor-box">
+              <u-parse
+                class="custom-parse"
+                :html="goodsInfo.mobile_detail"
+              ></u-parse>
+            </view>
+          </view>
+
+          <!--评论-->
+          <view class="u-plr30" v-else>
+            <comment :value="commentList"></comment>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view style="height: 170rpx; background-color: white"></view>
+    <view class="bottom-btn u-bg-fff">
+      <view class="pt-pb30 u-plr30 u-flex-center-sb">
+        <button
+          open-type="share"
+          class="u-text-center"
+          style="line-height: normal; margin-left: 25rpx"
+        >
+          <view class="iconfont2 u-font44 u-999">&#xe684;</view>
+          <view class="u-font28 u-1A1A1A">分享</view>
+        </button>
+
+        <!--秒杀按钮-->
+        <view class="seckill-btn" v-if="dataForm.active_state == 0">
+          <button v-if="ispay" class="u-btn-two u-DCCDA4" @click="notStarted()">
+            立即购买
+          </button>
+        </view>
+        <view class="seckill-btn" v-if="dataForm.active_state == 1">
+          <button
+            v-if="ispay"
+            class="u-btn-two u-DCCDA4"
+            @click="buy(1, dataForm.id)"
+          >
+            立即购买
+          </button>
+        </view>
+        <view class="seckill-btn" v-if="dataForm.active_state == 2">
+          <button
+            v-if="ispay"
+            class="u-btn-two u-DCCDA4"
+            @click="itSover(1, dataForm.id)"
+          >
+            立即购买
+          </button>
+        </view>
+      </view>
+    </view>
+
+    <!--规格-->
+    <uv-popup type="bottom" ref="specOpenRef">
+      <view class="u-bg-fff spec">
+        <view class="u-plr30 flex-sb u-border-one-one pb30">
+          <view class="u-flex-center">
+            <image
+              class="u-goods200"
+              :src="choseConfig.cover ? choseConfig.cover : cover"
+            ></image>
+            <view class="u-ml20">
+              <view class="u-999 u-font24 u-flex-center">
+                <view class="u-00BF5A u-font36">
+                  <rich-text
+                    :nodes="
+                      $mUtil.priceBigSmall(
+                        choseConfig.activity_price
+                          ? choseConfig.activity_price
+                          : moPrice
+                      )
+                    "
+                  ></rich-text>
+                </view>
+
+                <text class="u-del u-ml15"
+                  >¥{{
+                    choseConfig.market_price
+                      ? choseConfig.market_price
+                      : moDelPrice
+                  }}
+                </text>
+              </view>
+              <view class="u-font22 u-999 u-mt5"
+                >活动库存 {{ stock }} 件
+                <text
+                  >商品库存{{
+                    choseConfig.able_stock
+                      ? choseConfig.able_stock
+                      : goods_total_stock
+                  }}</text
+                >
+              </view>
+              <view class="u-1A1A1A u-mt25"
+                >{{
+                  choseConfig.sku_set_name ? choseConfig.sku_set_name : "请选择"
+                }}
+              </view>
+            </view>
+          </view>
+          <view class="iconfont u-999 closeIcon" @click="specOpenRef.close()"
+            >&#xe612;</view
+          >
+        </view>
+
+        <view>
+          <view class="">
+            <view
+              class="u-mt30"
+              v-for="(item, index) in skuTab"
+              :key="item.head.id"
+            >
+              <view class="u-plr30">{{ item.head.name }}</view>
+              <view class="u-mt20 u-border-one-one pb30">
+                <view class="u-plr30 u-flex u-flex-warp">
+                  <view
+                    class="spec-item"
+                    :class="childrenItem.flag ? 'activeColor' : ''"
+                    @click="chonseSku(index, childrenItem.id)"
+                    v-for="childrenItem in item.values"
+                    :key="childrenItem.id"
+                    >{{ childrenItem.name }}</view
+                  >
+                </view>
+              </view>
+            </view>
+          </view>
+
+          <view class="u-plr30 u-mt30">
+            <view class="u-flex-center-sb">
+              <view>购买数量</view>
+              <view class="u-flex-center">
+                <view class="iconfont minus" @click="resNum">&#xe60b;</view>
+                <view class="num">{{ add_num }}</view>
+                <view class="iconfont plus-sign" @click="addNum">&#xe686;</view>
+              </view>
+            </view>
+            <view class="specOpen-btn">
+              <view v-if="btnType == 0">
+                <button class="u-btn-two" @click="btnBuy(btnType)">
+                  {{ btnName }}
+                </button>
+              </view>
+              <view v-else>
+                <button class="u-btn-two" @click="btnBuy(btnType)">
+                  {{ btnName }}
+                </button>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </uv-popup>
+    <!--页面加载动画-->
+    <ldLoading isFullScreen :active="loading"></ldLoading>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { onShareAppMessage, onShow, onLoad } from "@dcloudio/uni-app";
+import comment from "@/components/ld-comment/ld-comment.vue";
+
+const $http = uni.$http;
+const $mUtil = uni.$mUtil;
+const specOpenRef = ref(null);
+// 手机状态栏高度
+const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);
+
+const imglist = ref([]); // 详情图片数组
+const isChecked = ref(0);
+const btnName = ref("");
+const btnType = ref(""); // 0 购物车,1 立即购买
+const dataForm = ref({}); // 商品详情
+const shop = ref({}); // 店铺信息
+const shopDiscounts = ref({}); // 店铺首单优惠
+const stock = ref(0);
+const goods_total_stock = ref(0);
+const cover = ref("");
+const loading = ref(true);
+const moDelPrice = ref("");
+const moPrice = ref("");
+const goodsSkuList = ref([]); // sku 组合值
+const skuTab = ref([]); // sku 二位数组
+const goods_id = ref(null);
+const limit_buy_num = ref(0);
+const choseConfig = ref({});
+const hasId = ref("");
+const add_num = ref(1);
+const goStatus = ref(0); // 0: 购物车,1 下单
+const shop_id = ref(0);
+const commentList = ref([]);
+const commentListLength = ref(0);
+const goodsInfo = ref({});
+const time1 = ref([0, 0, 0, 0]);
+const ispay = ref(getApp().globalData.openPay);
+const able_stock = ref(0);
+
+// 生命周期
+onShow(() => {});
+
+onLoad((options) => {
+  // 当用户进来有缓存店铺
+
+  // 店铺推荐(商品)
+  if (options.id) {
+    getDetailInfo(options.id);
+  }
+  if (options.shareId) {
+    recordSave(options.shareId, options.id);
+  }
+});
+
+onShareAppMessage(() => {
+  let user = uni.getStorageSync("personal");
+  if (res.from === "button") {
+    // 来自页面内分享按钮
+    console.log(res.target);
+  }
+
+  return {
+    title: dataForm.value.title,
+    imageUrl: dataForm.value.cover,
+    path: `/pages/product/goods/seckillGoods?id=${
+      dataForm.value.id
+    }&share=1&shareId=${user.id || ""}`,
+  };
+});
+
+// 方法
+const notStarted = () => {
+  uni.$uv.toast("活动尚未开始");
+};
+
+const itSover = () => {
+  uni.$uv.toast("活动已结束");
+};
+
+const goLocal = () => {
+  uni.openLocation({
+    latitude: Number(shop.value.tx_latitude),
+    longitude: Number(shop.value.tx_longitude),
+    name: shop.value.name,
+    address: shop.value.address,
+    success: function () {
+      console.log("success");
+    },
+  });
+};
+
+const goShop = () => {
+  uni.navigateTo({
+    url: "/pages/convenienceService/shopDetails?shopId=" + shop_id.value,
+  });
+};
+
+const recordSave = (share_user_id, goods_id) => {
+  $http
+    .post("/share/record/save", {
+      share_user_id: share_user_id,
+      goods_id: goods_id,
+    })
+    .then((res) => {});
+};
+
+const getDetailInfo = (id) => {
+  $http.get("/marketing/seckillActivityGoods/info/" + id).then((res) => {
+    loading.value = false;
+    if (res && res.code == 200) {
+      dataForm.value = res.data;
+      shop_id.value = res.data.shop_id;
+      $http
+        .get("/marketing/firstOrder/getByShop/" + shop_id.value)
+        .then((res) => {
+          if (res && res.code == 200) {
+            shopDiscounts.value = res.data;
+          }
+        });
+      $http.get("/yxt/shop/info/" + shop_id.value).then((res) => {
+        if (res.data && res.code == 200) {
+          shop.value = res.data;
+        }
+      });
+      imglist.value = res.data.cover.split(",");
+
+      if (res.data.active_state == 0 || res.data.active_state == 2) {
+        time1.value = $mUtil
+          .countDown(res.data.will_start_time)
+          .split(":")
+          .map((val) => Number(val));
+      } else {
+        time1.value = $mUtil
+          .countDown(res.data.finish_time)
+          .split(":")
+          .map((val) => Number(val));
+      }
+      $http.get(`/goods/content/${dataForm.value.goods_id}`).then((res) => {
+        if (res && res.code == 200) {
+          goodsInfo.value = res.data;
+        }
+      });
+      $http
+        .get(`/comment/orderGoods/getgoodscomments/${dataForm.value.goods_id}`)
+        .then((res) => {
+          if (res && res.code == 200) {
+            commentList.value = res.list;
+            commentListLength.value =
+              res.list && res.list.length ? res.list.length : 0;
+          }
+        });
+    }
+  });
+};
+
+const change = (i) => {
+  isChecked.value = i;
+};
+
+const buy = (i, id) => {
+  btnType.value = i;
+  checkSku(id);
+  if (i == 0) {
+    btnName.value = "加入购物车";
+  } else {
+    btnName.value = "立即购买";
+  }
+};
+
+const resNum = () => {
+  if (add_num.value > 1) {
+    add_num.value--;
+  }
+};
+
+const addNum = () => {
+  add_num.value++;
+};
+
+const chonseSku = (index, id) => {
+  skuTab.value[index].values.forEach((res) => {
+    res.flag = false;
+    if (res.id == id) {
+      res.flag = true;
+    }
+  });
+  let choseId = [];
+  skuTab.value.forEach((res) => {
+    res.values.forEach((Key) => {
+      if (Key.flag) {
+        choseId.push(Key.id);
+      }
+    });
+  });
+  let totalId = choseId.sort((a, b) => a - b).join("|");
+  hasId.value = totalId;
+  goodsSkuList.value.forEach((res) => {
+    let temp = res.sku_hash_code;
+    let sku_hash_code_val = temp
+      .split("|")
+      .sort((a, b) => a - b)
+      .join("|");
+    if (sku_hash_code_val == totalId) {
+      choseConfig.value = res;
+      stock.value = dataForm.value.real_stock_total;
+      able_stock.value = res.able_stock;
+    }
+  });
+};
+
+const checkSku = (id) => {
+  $http
+    .get(`/marketing/seckillActivityGoods/skus/${dataForm.value.id}`)
+    .then((res) => {
+      loading.value = false;
+      goods_total_stock.value = res.data.goods_total_stock;
+      if (res && res.code == 200) {
+        choseConfig.value = {};
+        hasId.value = "";
+        res.data.goods.sku_table.forEach((keys) => {
+          keys.values.forEach((val) => {
+            val.flag = false;
+          });
+        });
+        limit_buy_num.value = dataForm.value.limit_buy_num;
+        goods_id.value = dataForm.value.goods_id;
+        goodsSkuList.value = res.data.goods_sku_list;
+        moPrice.value = dataForm.value.min_price;
+        moDelPrice.value = dataForm.value.min_sale_price;
+        cover.value = imglist.value[0];
+        stock.value = dataForm.value.real_stock_total;
+        if (res.data.goods_auth) {
+          if (res.data.goods_auth.added) {
+            specOpenRef.value.open();
+          } else {
+            uni.$uv.toast("该商品已经下架");
+          }
+        } else {
+          uni.$uv.toast("没有经营权限");
+        }
+        if (skuTab.value.length == 0) {
+          skuTab.value = res.data.goods.sku_table;
+          for (let i in skuTab.value) {
+            skuTab.value[i].values[0].flag = true;
+          }
+        }
+        chonseSku(0, skuTab.value[0].values[0].id);
+      }
+    });
+};
+
+const btnBuys = () => {
+  if (skuTab.value.length > 0 && hasId.value == "") {
+    uni.$uv.toast("请选中 sku");
+    return false;
+  }
+
+  if (add_num.value > limit_buy_num.value && limit_buy_num.value != 0) {
+    uni.$uv.toast("商品限购" + limit_buy_num.value + "件");
+    return false;
+  }
+  if (goodsSkuList.value.length > 0 && able_stock.value < add_num.value) {
+    uni.$uv.toast("商品库存只有" + able_stock.value + "件");
+    $http
+      .post(`/singlegoods/understockrecord/save`, {
+        shop_id: shop_id.value,
+        goods_id: goods_id.value,
+        single_goods_id: choseConfig.value.single_goods_id,
+        sku_set_name: choseConfig.value.sku_set_name,
+        buy_num: add_num.value,
+      })
+      .then((res) => {});
+    return false;
+  }
+  if (goStatus.value == 0) {
+    let data = {
+      goods_id: goods_id.value,
+      sku_hash_code: hasId.value,
+      add_num: add_num.value,
+      source_shop_id: shop_id.value.toString(),
+    };
+    $http.post(`/cart/add`, data).then((res) => {
+      if (res && res.code == 200) {
+        uni.$uv.toast("添加成功");
+        // specOpen.value.close();
+        choseConfig.value = {};
+        add_num.value = 1;
+        cartList();
+      }
+    });
+  } else {
+    psotJson();
+  }
+};
+
+const psotJson = () => {
+  let dataJson = {};
+  let childArr = [];
+  let parendArr = [];
+  choseConfig.value;
+
+  childArr.push({
+    user_cart_id: 0,
+    activity_goods_id: choseConfig.value.activity_goods_id,
+    goods_id: goods_id.value,
+    num: add_num.value,
+    sku_hash_code: choseConfig.value.sku_hash_code,
+  });
+  parendArr.push({
+    shop_id: shop.value.id,
+    source_shop_id: shop.value.id,
+    activity_id: dataForm.value.seckill_id,
+    sponsor_activity_id: 0,
+    user_remark: "",
+    items: childArr,
+  });
+  dataJson = {
+    is_cart: false,
+    receipt_id: null,
+    shipment_mode: 0,
+    shop_orders: parendArr,
+    marketing_type: 1,
+  };
+  uni.setStorageSync("dataJson", dataJson);
+  uni.navigateTo({
+    url: "../surePay/surePaySechill",
+  });
+};
+
+const btnBuy = (i) => {
+  goStatus.value = i;
+  let token = uni.getStorageSync("apiToken");
+  if (!token) {
+    uni.navigateTo({
+      url: "/pages/login/index",
+    });
+  } else {
+    btnBuys();
+  }
+};
+
+const cartList = () => {
+  // 实现购物车逻辑
+};
+</script>
+
+<style lang="scss" scoped>
+.pd24 {
+  padding: 24rpx;
+}
+
+.pd20 {
+  padding: 20rpx;
+}
+
+.pt20-pb14 {
+  padding-top: 20rpx;
+  padding-bottom: 14rpx;
+}
+
+.pt28-pb18 {
+  padding-top: 28rpx;
+  padding-bottom: 18rpx;
+}
+
+.pb30 {
+  padding-bottom: 30rpx;
+}
+
+.pb40 {
+  padding-bottom: 40rpx;
+}
+
+.pb50 {
+  padding-bottom: 50rpx;
+}
+
+.pt-pb30 {
+  padding-top: 30rpx;
+  padding-bottom: 30rpx;
+}
+
+.pt-pb35 {
+  padding-top: 35rpx;
+  padding-bottom: 35rpx;
+}
+
+.ml54 {
+  margin-left: 54rpx;
+}
+
+.ml138 {
+  margin-left: 138rpx;
+}
+
+.br-rd10 {
+  border-radius: 10rpx;
+}
+
+.br-rd20 {
+  border-radius: 20rpx;
+}
+
+.stb-btn {
+  padding: 8rpx 18rpx;
+  border-radius: 10rpx;
+}
+
+.br-FF0000 {
+  border: 1rpx solid #00bf5a;
+  border-radius: 24rpx;
+  padding: 6rpx 12rpx;
+}
+
+.bg-FFF6EE {
+  background-color: #fff6ee;
+}
+
+.mt80 {
+  margin-top: 80rpx;
+}
+
+.mt10 {
+  margin-top: 10rpx;
+}
+
+.product {
+  // padding-bottom: 150rpx;
+}
+
+.pic {
+  width: 100%;
+  position: relative;
+
+  .swiper {
+    // height: 620rpx;
+    height: 100vw;
+
+    video {
+      width: 100%;
+      // height: 620rpx;
+      height: 100vw;
+    }
+
+    image {
+      width: 100%;
+      // height: 620rpx;
+      height: 100vw;
+    }
+  }
+
+  .p-price {
+    width: 100%;
+    // position: absolute;
+    top: 460rpx;
+    // background: linear-gradient(90deg,#20a733, #0a824b);
+    background: #00bf5a;
+    border-radius: 20rpx 20rpx 0px 0px;
+    position: relative;
+    top: -16rpx;
+
+    .discount {
+      color: #ffffff;
+    }
+  }
+}
+
+.richText {
+  padding: 30rpx;
+
+  ::v-deep img {
+    margin-top: 0 !important;
+  }
+}
+
+//秒杀,拼团样式
+.p-ab {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+}
+
+.stb-list {
+  padding-bottom: 10rpx;
+}
+
+.triangle-bottomright {
+  width: 0;
+  height: 0;
+  border-bottom: 105rpx solid #dccda4;
+  border-left: 60rpx solid transparent;
+}
+
+.seckill {
+  background-color: #dccda4;
+  color: #00bf5a;
+  padding: 12rpx 15rpx;
+  box-sizing: border-box;
+  border-radius: 5rpx 20rpx 0px 0px;
+  text-align: center;
+  // width: 150rpx;
+}
+
+.seckill-btn {
+  width: 76%;
+}
+
+.br-284534 {
+  border-bottom: 1rpx solid rgba($color: #284534, $alpha: 0.3);
+}
+
+.gb-te {
+  padding-top: 20rpx;
+  padding-bottom: 15rpx;
+}
+
+.gb-btn {
+  padding: 18rpx 80rpx 8rpx;
+  line-height: 30rpx;
+}
+
+.btn-bg-dccda4 {
+  background: #dccda4;
+  border-radius: 48rpx 0rpx 0rpx 48rpx;
+}
+
+.btn-bg-00321E {
+  background: #0b844a;
+  border-radius: 0px 48px 48px 0px;
+}
+
+.tab {
+  position: sticky;
+  top: 0;
+  background-color: #fff;
+  padding-top: 38rpx;
+  z-index: 9;
+
+  .pb30 {
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      transform: translateX(-50%);
+      width: 0;
+      height: 2px;
+      background: #00bf5a;
+      transition: all 0.3s;
+    }
+
+    &.active {
+      font-size: 30rpx;
+      color: #00bf5a;
+      font-weight: 700;
+
+      &::before {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.bottom-btn {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  z-index: 9;
+  border-top: 1rpx solid #e6e6e6;
+
+  .cart {
+    position: relative;
+
+    .number {
+      position: absolute;
+      top: -10rpx;
+      left: 45rpx;
+      padding: 4rpx 8rpx;
+      background-color: #ff0000;
+      border: 4rpx solid #ffffff;
+      border-radius: 40rpx;
+    }
+  }
+
+  .cart-btn {
+    width: 230rpx;
+    height: 85rpx;
+    background: #dccda4;
+    border-radius: 43rpx 0rpx 0rpx 43rpx;
+  }
+
+  .buy-btn {
+    width: 230rpx;
+    height: 85rpx;
+    line-height: 85rpx;
+    background: #0b844a;
+    border-radius: 0rpx 43rpx 43rpx 0rpx;
+  }
+}
+
+.flex-sb {
+  display: flex;
+  justify-content: space-between;
+}
+
+//弹窗
+.spec {
+  border-radius: 18rpx 18rpx 0rpx 0rpx;
+  padding-top: 30rpx;
+  max-height: 900rpx;
+  overflow-y: auto;
+
+  .spec-item {
+    background-color: #f6f6f6;
+    border: 1px solid #f6f6f6;
+    padding: 12rpx 30rpx;
+    margin-bottom: 24rpx;
+    font-size: 24rpx;
+    color: #1a1a1a;
+    border-radius: 4px;
+  }
+
+  .activeColor {
+    background-color: #e1e6e3;
+    border: 1px solid #3775f6;
+    color: #00bf5a;
+    border-radius: 4px;
+  }
+
+  .spec-item:not(:last-child) {
+    margin-right: 24rpx;
+  }
+
+  //减号
+  .minus {
+    width: 50rpx;
+    height: 50rpx;
+    line-height: 50rpx;
+    text-align: center;
+    background: #dedede;
+    border-radius: 8rpx 0rpx 0rpx 8rpx;
+  }
+
+  .num {
+    width: 74rpx;
+    height: 46rpx;
+    line-height: 46rpx;
+    text-align: center;
+    border: 1px solid #dedede;
+  }
+
+  //加号
+  .plus-sign {
+    width: 50rpx;
+    height: 50rpx;
+    line-height: 50rpx;
+    text-align: center;
+    background: #dedede;
+    border-radius: 0rpx 8rpx 8rpx 0rpx;
+  }
+
+  .specOpen-btn {
+    margin-top: 68rpx;
+    padding-bottom: 34rpx;
+
+    button {
+      background-color: #00bf5a;
+      color: #ffffff;
+    }
+  }
+}
+</style>

+ 220 - 0
pages/shop/components/GroupBuyingGood.vue

@@ -0,0 +1,220 @@
+<template>
+  <view class="groupCard" v-if="groupList && groupList.length > 0">
+    <view class="group_title">
+      <view class="group_title_l">拼团购</view>
+      <view
+        class="group_title_r"
+        @click="goProductDetails('/pages/research/homepage/groupList')"
+      >
+        查看更多
+        <!-- <text class="iconfont">&#xe65f;</text> -->
+        <view style="display: inline-block;">
+            <uv-icon name="arrow-right" color="#333333" size="26rpx"></uv-icon>
+        </view>
+      </view>
+    </view>
+
+    <view class="goodsListBox">
+      <view
+        class="goods_item"
+        v-for="(item, index) in groupList"
+        :key="index"
+        @click="
+          goProductDetails('/pages/product/goods/puzzleGoods?id=' + item.id)
+        "
+      >
+        <view class="goods_item_img">
+          <!-- ?x-oss-process=style/w_350 -->
+          <image :src="`${item.coverImage}`" mode=""></image>
+        </view>
+        <view class="goods_item_data">
+          <view class="goods_item_data_title">{{ item.title }}</view>
+          <view class="goods_item_data_box">
+            <view class="goods_item_data_box_l">
+              <view class="num">
+                <view class="large">
+                  <rich-text
+                    :nodes="$mUtil.priceBigSmall(item.minPrice)"
+                  ></rich-text>
+                </view>
+                <view class="small">
+                  <text class="pintuanc6">¥ {{ item.minSalePrice }}</text>
+                </view>
+              </view>
+              <view class="goods_item_data_box_l_person">
+                {{ item.groupPeopleNum || 0 }}人团,已拼<text>{{
+                  item.resultSaleNum || 0
+                }}</text
+                >件
+              </view>
+            </view>
+            <view class="goods_item_data_box_r">去拼团</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+
+const groupList = ref([]);
+
+const goProductDetails = (url) => {
+  uni.navigateTo({
+    url: url,
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.groupCard {
+  margin: auto;
+  width: 720rpx;
+  // height: 1500rpx;
+  padding: 0 30rpx;
+  // background: url('/static/convenienceService/cardBg.png')0 0 no-repeat;
+  // background-size: 720rpx 1500rpx;
+  box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
+  border-radius: 16rpx;
+  box-sizing: border-box;
+
+  .num {
+    display: flex;
+    align-items: center;
+    margin-top: 46rpx;
+    font-weight: Bold;
+    font-size: 20rpx;
+    color: red;
+  }
+
+  .small {
+    color: #cccccc;
+    font-size: 22rpx;
+    font-weight: 500;
+    text-decoration: line-through;
+    margin-left: 17rpx;
+  }
+
+  .group_title {
+    display: flex;
+    justify-content: space-between;
+    padding: 35rpx 30rpx 20rpx 30rpx;
+    align-items: center;
+    border-bottom: 1rpx solid #e6e6e6;
+
+    .group_title_l {
+      font-size: 36rpx;
+      color: #1a1a1a;
+      font-weight: 700;
+    }
+
+    .group_title_r {
+      font-size: 24rpx;
+      color: #333333;
+    }
+  }
+
+  .goodsListBox {
+    .goods_item {
+      &:last-child {
+        border-bottom: none !important;
+      }
+
+      display: flex;
+      padding: 50rpx 0 40rpx;
+      border-bottom: 1rpx solid #e6e6e6;
+
+      .goods_item_img {
+        margin-right: 25rpx;
+
+        image {
+          width: 226rpx;
+          height: 226rpx;
+        }
+      }
+
+      .goods_item_data {
+        flex: 1;
+
+        .goods_item_data_title {
+          font-size: 28rpx;
+          min-height: 80rpx;
+          color: #181818;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+
+        .autotrophyCls {
+          width: 69rpx;
+          height: 30rpx;
+          margin-right: 10rpx;
+          margin-top: 10rpx;
+        }
+
+        .originalCls {
+          width: 116rpx;
+          height: 28rpx;
+          margin-top: 10rpx;
+        }
+
+        .goods_item_data_box {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 10rpx;
+
+          .goods_item_data_box_l {
+            .goods_item_data_box_l_price {
+              display: flex;
+              align-items: flex-end;
+              font-size: 20rpx;
+              color: #00bf5a;
+
+              text {
+                font-size: 36rpx;
+                font-weight: 500;
+                display: inline-block;
+                position: relative;
+                top: 4rpx;
+              }
+
+              > view {
+                font-size: 24rpx;
+                color: #cccccc;
+                margin-left: 30rpx;
+                text-decoration: line-through;
+              }
+            }
+
+            .goods_item_data_box_l_person {
+              font-size: 24rpx;
+              color: #333333;
+
+              text {
+                color: #ff0000;
+              }
+            }
+          }
+
+          .goods_item_data_box_r {
+            width: 138rpx;
+            height: 63rpx;
+            background: #00bf5a;
+            border-radius: 32rpx;
+            font-size: 28rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

+ 2 - 2
pages/shop/goodsDetails.vue

@@ -184,8 +184,8 @@ const goBack = () => {
   uni.navigateBack();
 };
 const goShop = () => {
-  uni.switchTab({
-    url: "/pages/tabtar/home",
+  uni.navigateTo({
+    url: "/pages/shop/index?businessId=" + shopDetails.value.businessId,
   });
 };
 const goTocart = () => {

+ 6 - 2
pages/shop/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view>
-    <uv-navbar title="店铺信息" placeholder></uv-navbar>
+    <uv-navbar title="店铺信息" placeholder autoBack></uv-navbar>
     <view class="top">
       <view class="shop">
         <view class="shop_l">
@@ -30,7 +30,9 @@
     </view>
 
     <!-- 限时秒杀 -->
-    <SeckillGood :currSeckill="list" />
+    <SeckillGood />
+    <!-- 拼团购 -->
+    <GroupBuyingGood />
 
     <view class="tabsBox">
       <uv-tabs
@@ -85,6 +87,7 @@ import {
   onReachBottom,
 } from "@dcloudio/uni-app";
 import SeckillGood from "./components/SeckillGood.vue"; // 限时秒杀组件
+import GroupBuyingGood from "./components/GroupBuyingGood.vue"; // 拼团购组件
 
 const details = ref({});
 const value = ref("");
@@ -241,6 +244,7 @@ const tabsClick = (e) => {
   align-items: center;
   position: relative;
   .shop_l {
+    width: 100%;
     display: flex;
     align-items: center;
     image {

+ 2 - 2
pages/tabtar/components/GroupBuy.vue

@@ -2,7 +2,7 @@
   <view class="group-work u-skeleton-fillet">
     <view
       class="head-item"
-      @click="goDetail('/pages/research/homepage/groupList')"
+      @click="goDetail('/pages/groupBuying/list')"
       :style="{ backgroundImage: `url(${bgImage || ''})` }"
     >
       <view class="top-left">
@@ -27,7 +27,7 @@
         <view
           class="middle"
           @click="
-            goProductDetails('/pages/product/goods/puzzleGoods?id=' + item.id)
+            goProductDetails('/pages/groupBuying/details?id=' + item.id)
           "
         >
           <view class="middle-left">

+ 1 - 1
pages/tabtar/home.vue

@@ -67,7 +67,7 @@
             :src="`${item.icon}`"
           >
           </image>
-          <div class="word u-skeleton-fillet">{{ item.name || "加载中" }}</div>
+          <div class="word u-skeleton-fillet u-font26">{{ item.name || "加载中" }}</div>
         </div>
       </div>
       <view

+ 14 - 0
pages/tabtar/personalCenter.vue

@@ -211,6 +211,20 @@ const shopInfo = ref({}); // 商家信息
 const integralAble = ref(0); // 用户积分数据
 
 const toolsList = ref([
+  {
+    label: "我的拼团",
+    icon: "/personalCenter/app_icon1.png",
+    url: "/pages/groupBuying/myGbOrder/list",
+    idNeedLogin: true,
+    isPage: true,
+  },
+  {
+    label: "分销中心",
+    icon: "/personalCenter/app_icon1.png",
+    url: "/pages/distribution/index",
+    idNeedLogin: true,
+    isPage: true,
+  },
   {
     label: "收货地址",
     icon: "/personalCenter/app_icon1.png",

+ 10 - 0
static/style/common.scss

@@ -531,6 +531,10 @@
 }
 
 // 字体大小相关
+.u-font20{
+  font-size: 20rpx;
+}
+
 .u-font22 {
   font-size: 22rpx;
 }
@@ -566,6 +570,12 @@
   align-items: center;
 }
 
+.u-flex-center-sa{
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
 .u-flex-center-sb {
   display: flex;
   align-items: center;