团购秒杀

src/components/official-account-dialog.vue

@@ -0,0 +1,74 @@
+<template>
+
+  <uni-popup type='bottom' ref='popupRef'>
+    <view class='popup-content c-flex-column'>
+      <view class='c-flex-row'>
+        <text>关注公众号</text>
+        <image :src='assetsUrl("ic_close.png")' @click.stop='close' />
+      </view>
+
+      <image class='qrcode' :src='assetsUrl("official_account_qrcode.png")' show-menu-by-longpress />
+      <text class='tips'>长按关注会员中心公众号\n
+        获得更多优惠和服务信息
+      </text>
+    </view>
+  </uni-popup>
+</template>
+
+<script lang='ts' setup>
+import { assetsUrl } from '@/utils/assets';
+
+const popupRef = ref();
+const show = () => {
+  popupRef.value.open();
+};
+
+const close = () => {
+  popupRef.value.close();
+};
+
+defineExpose({ show });
+
+</script>
+
+<style lang='scss' scoped>
+.popup-content {
+  background: #FFFFFF;
+  border-radius: 20rpx 20rpx 0 0;
+  padding: 38rpx;
+  align-items: center;
+  position: relative;
+
+  view:nth-of-type(1) {
+    image {
+      width: 35rpx;
+      height: 35rpx;
+      align-self: flex-end;
+      position: absolute;
+      right: 38rpx;
+    }
+
+    text {
+      font-weight: bold;
+      font-size: 30rpx;
+      color: #333333;
+      align-self: center;
+    }
+  }
+
+  .qrcode {
+    width: 377rpx;
+    height: 377rpx;
+    margin-top: 50rpx;
+    align-self: center;
+  }
+
+  .tips {
+    font-weight: bold;
+    font-size: 30rpx;
+    color: #333333;
+    align-self: center;
+    margin-top: 10rpx;
+  }
+}
+</style>

src/pages.json

@@ -48,6 +48,16 @@
             "navigationBarTitleText": "注册有礼"
           }
         },
+        {
+          "path": "groupbuy/index",
+          "style": {
+            "navigationBarTitleText": "团购秒杀",
+            "backgroundColor": "#F32B2B",
+            "backgroundColorTop": "#F32B2B",
+            "navigationBarTextStyle": "white",
+            "navigationBarBackgroundColor": "#F32B2B"
+          }
+        },
         {
           "path": "webview/index",
           "navigationBarTitleText": "网页"

src/pages/common/groupbuy/index.vue

@@ -1,11 +1,168 @@
 <template>
+  <view class='content'>
+    <view class='tab c-flex-row'>
+      <text class='tab-item' :class='{"tab-item-active":tabIndex==0}' @click.stop='tabIndex=0'>团购中</text>
+      <text class='tab-item' :class='{"tab-item-active":tabIndex==1}' @click.stop='tabIndex=1'>即将开始</text>
+    </view>
 
+    <scroll-view class='scroll-view'>
+      <view class='c-flex-column' v-for='(item, index) in 10' :key='index'>
+        <view class='item c-flex-row'>
+          <image class='goods-image' :src='assetsUrl("test_bg.png")' />
+          <view class='c-flex-column' style='flex: 1'>
+            <view class='goods-name'>女童夏装套装洋气装短袖阔腿裤短…</view>
+            <view class='middle-view c-flex-row'>
+              <text>原价：￥56</text>
+              <view class='decline c-flex-row'>
+                <image :src='assetsUrl("ic_decline.png")' />
+                <text>直降￥15</text>
+              </view>
+              <text>即将恢复</text>
+            </view>
+            <view class='bottom-price c-flex-row' :class='{"bottom-price-disabled":tabIndex==1}'>
+              <text>41</text>
+              <text>团购</text>
+            </view>
+          </view>
+        </view>
+        <view class='divider' style='margin: 0 30rpx' />
+      </view>
+    </scroll-view>
+  </view>
 </template>
 
 <script lang='ts' setup>
 
+import { assetsUrl } from '@/utils/assets';
+
+const tabIndex = ref(0);
 </script>
 
 <style lang='scss' scoped>
+.content {
+  background: #F32B2B;
+  padding-top: 30rpx;
+}
 
+.tab {
+  height: 92rpx;
+
+  .tab-item:nth-of-type(1) {
+    border-radius: 30rpx 0 0 0;
+  }
+
+.tab-item:nth-of-type(2) {
+    border-radius: 0 30rpx 0 0;
+  }
+
+  .tab-item {
+    display: flex;
+    flex: 1;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 30rpx;
+    color: #999999;
+    background: #F2F2F2;
+  }
+
+  .tab-item-active {
+    @extend .tab-item;
+    background: #FFFFFF;
+    color: #333333;
+  }
+}
+
+.scroll-view {
+  background: #FFFFFF;
+  .item {
+    padding: 40rpx 30rpx;
+    background: #FFFFFF;
+    position: relative;
+
+    .goods-image {
+      width: 180rpx;
+      height: 180rpx;
+      border-radius: 10rpx;
+      margin-right: 20rpx;
+    }
+
+    .goods-name {
+      font-weight: bold;
+      font-size: 30rpx;
+      color: #333333;
+      -webkit-line-clamp: 1;
+      text-overflow: ellipsis;
+      margin-top: 30rpx;
+    }
+
+    .middle-view {
+      justify-content: space-between;
+      margin-top: 16rpx;
+
+      text:nth-of-type(1) {
+        font-weight: bold;
+        font-size: 26rpx;
+        color: #333333;
+      }
+
+      .decline {
+        image {
+          width: 45rpx;
+          height: 45rpx;
+        }
+
+        text {
+          font-weight: bold;
+          font-size: 24rpx;
+          color: #AD6021;
+        }
+      }
+
+      text:nth-of-type(2) {
+        font-weight: 400;
+        font-size: 24rpx;
+        color: #AD6021;
+      }
+    }
+
+    .bottom-price {
+      display: flex;
+      width: 390rpx;
+      height: 83rpx;
+      margin-top: 20rpx;
+      align-self: flex-end;
+      background-image: url("../../../static/images/bg_groupbuy_price.png");
+      background-size: 100% 100%;
+      color: #FFFFFF;
+      justify-content: space-between;
+
+      text:nth-of-type(1) {
+        font-weight: bold;
+        font-size: 40rpx;
+        color: #FFFFFF;
+        margin-left: 40rpx;
+        margin-bottom: 5rpx;
+      }
+
+      text:nth-of-type(1):before {
+        content: "秒杀价 ¥ ";
+        font-size: 24rpx;
+        margin-bottom: 5rpx;
+      }
+
+      text:nth-of-type(2) {
+        font-weight: bold;
+        font-size: 30rpx;
+        color: #FFFFFF;
+        margin-right: 50rpx;
+      }
+    }
+
+    .bottom-price-disabled {
+      background-image: url("../../../static/images/bg_groupbuy_price_disabled.png");
+    }
+  }
+}
 </style>

src/pages/home/index.vue

@@ -84,7 +84,7 @@ const submenuList = [
   {
     title: '团购秒杀',
     icon: assetsUrl('ic_groupbuy.png'),
-    path: '/pages/order/order'
+    path: '/pages/common/groupbuy/index'
   },
   {
     title: '入群有礼',
@@ -95,7 +95,6 @@ const submenuList = [
 
 onLoad(async (e) => {
   const data = await getCompanyInfo('1471673498334113794');
-  console.log(data);
   bannerList.value = data.bannerinx?.map((res: { src: string }) => res.src);
   recommendBannerList.value = data.bannerhot?.map((res: { src: string }) => res.src);
 });

src/pages/mine/index.vue

@@ -8,7 +8,6 @@
 
       <view class='top-row'>
         <image :src='userInfo.image' />
-
         <view class='u-flex-column'>
           <text>{{ userInfo.nickName }}</text>
           <text>{{ userInfo.telephone }}</text>
@@ -18,15 +17,15 @@
       </view>
 
       <view class='bottom-row'>
-        <view @click.stop='goPath("/pages/mine/subs/integral/index")'>
+        <view @click.stop='gotoPath("/pages/mine/subs/integral/index")'>
           <text>{{ userInfo.integration }}</text>
           <text>积分</text>
         </view>
-        <view @click.stop='goPath("/pages/mine/subs/recharge/index")'>
+        <view @click.stop='gotoPath("/pages/mine/subs/recharge/index")'>
           <text>{{ userInfo.balance }}</text>
           <text>余额</text>
         </view>
-        <view @click.stop='goPath("/pages/mine/subs/coupon/coupon-list")'>
+        <view @click.stop='gotoPath("/pages/mine/subs/coupon/coupon-list")'>
           <text>3</text>
           <text>优惠券</text>
         </view>
@@ -43,7 +42,7 @@
       我的订单
     </text>
     <view class='card-order-view'>
-      <view v-for='(item,index) in orderActionList' :key='index' @click.stop='goPath(item.path)'>
+      <view v-for='(item,index) in orderActionList' :key='index' @click.stop='gotoPath(item.path)'>
         <image :src='item.icon' />
         <text>{{ item.title }}</text>
         <text v-if='item.amount>0'>{{ item.amount }}</text>
@@ -55,18 +54,23 @@
     </text>
 
     <view class='card-service-view'>
-      <view v-for='(item,index) in serviceList' :key='index' @click.stop='goPath(item.path)'>
+      <view v-for='(item,index) in serviceList' :key='index' @click.stop='gotoPath(item.path)'>
         <image :src='item.icon' />
         <text>{{ item.title }}</text>
       </view>
     </view>
   </view>
+
+  <official-account-dialog ref='officialAccountDialogRef' />
 </template>
 
 <script setup lang='ts'>
 import { useUserStore } from '@/store';
 import { assetsUrl } from '@/utils/assets';
 import { goPath } from '@/utils';
+import OfficialAccountDialog from '@/components/official-account-dialog.vue';
+
+const officialAccountDialogRef = ref();
 
 const orderActionList = ref([{
   title: '进行中',
@@ -99,7 +103,7 @@ const serviceList = [
   {
     title: '关注公众号',
     icon: assetsUrl('ic_member_service_follow.png'),
-    path: ''
+    path: 'follow_official_account'
   },
   {
     title: '收货地址',
@@ -123,6 +127,18 @@ title.value = import.meta.env.VITE_APP_TITLE;
 const store = useUserStore();
 const { userInfo } = storeToRefs(store);
 
+const gotoPath = (path: string) => {
+  if(path === 'follow_official_account') {
+    showOfficialAccountDialog();
+  } else {
+    goPath(path);
+  }
+};
+
+const showOfficialAccountDialog = () => {
+  officialAccountDialogRef.value.show();
+};
+
 </script>
 
 <style lang='scss' scoped>

src/pages/mine/subs/components/official-account-dialog.vue

@@ -0,0 +1,79 @@
+<template>
+
+  <uni-popup type='bottom' ref='popupRef' :mask-click='false' @touchmove.stop.prevent=''>
+    <view class='popup-content c-flex-column'>
+      <view class='c-flex-row'>
+        <text>关注公众号</text>
+        <image :src='assetsUrl("ic_close.png")' @click.stop='close()' />
+      </view>
+
+      <image class='qrcode' :src='assetsUrl("test_bg.png")' />
+
+      <text class='tips'>长按关注会员中心公众号
+        获得更多优惠和服务信息
+      </text>
+    </view>
+  </uni-popup>
+</template>
+
+<script lang='ts' setup>
+import { assetsUrl } from '@/utils/assets';
+
+const popupRef = ref();
+const show = () => {
+  popupRef.value.open();
+};
+
+const close = () => {
+  popupRef.value.close();
+};
+
+defineExpose({ show });
+
+</script>
+
+<style lang='scss' scoped>
+.popup-content {
+  background: #FFFFFF;
+  border-radius: 20rpx 20rpx 0 0;
+  padding: 38rpx 45rpx 140rpx 45rpx;
+
+  view:nth-of-type(1) {
+    display: flex;
+    margin-bottom: 70rpx;
+    position: relative;
+
+    image {
+      width: 35rpx;
+      height: 35rpx;
+      align-self: flex-start;
+    }
+
+    text {
+      font-weight: bold;
+      font-size: 30rpx;
+      color: #333333;
+      position: absolute;
+      left: 0;
+      right: 0;
+      text-align: center;
+    }
+  }
+
+  .qrcode {
+    width: 377rpx;
+    height: 377rpx;
+    margin-top: 50rpx;
+    align-self: center;
+  }
+
+  .tips {
+    font-weight: bold;
+    font-size: 30rpx;
+    color: #333333;
+    margin-top: 10rpx;
+    margin-bottom: 104rpx;
+  }
+
+}
+</style>

types/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    OfficialAccountDialog: typeof import('./../src/components/official-account-dialog.vue')['default']
     PageNav: typeof import('./../src/components/page-nav/page-nav.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']