首页页面完善

.env.development

@@ -5,7 +5,7 @@ VITE_APP_TITLE='uniapp-vue3-project'
 VITE_APP_ENV='development'
 
 # 接口地址
-VITE_APP_BASE_API='/api'
+VITE_APP_BASE_API='https://apidev.lakeapp.cn/'
 
 # 删除console
 VITE_DROP_CONSOLE=false

.env.production

@@ -5,7 +5,7 @@ VITE_APP_TITLE='uniapp-vue3-project'
 VITE_APP_ENV='production'
 
 # 接口地址
-VITE_APP_BASE_API='/'
+VITE_APP_BASE_API='http://api.lakeapp.cn/'
 
 # 删除console
 VITE_DROP_CONSOLE=true

src/api/common/index.ts

@@ -2,11 +2,13 @@
  * 通用接口
  */
 import type { SendCodeParams, SendCodeResult, UploadImageResult } from './types';
-import { post, upload } from '@/utils/request';
+import { get, post, upload } from '@/utils/request';
 
 enum URL {
   upload = '/common/upload',
   sendCode = '/sendCode',
+  barCode = '/ext2/qr/barimg',
+  qrCode = '/ext2/qr/qrimg'
 }
 
 // 图片上传
@@ -15,3 +17,12 @@ export const uploadImage = (imagePath: string) =>
 
 // 发送验证码
 export const sendCode = (data: SendCodeParams) => post<SendCodeResult>({ url: URL.sendCode, data });
+
+export const generateBarCode = (data: string) => get<ArrayBuffer>({
+  url: `${URL.barCode}?v=${data}`,
+  responseType: 'arraybuffer'
+});
+export const generateQrCode = (data: string) => get<ArrayBuffer>({
+  url: `${URL.qrCode}?v=${data}`,
+  responseType: 'arraybuffer'
+});

src/pages.json

@@ -11,13 +11,14 @@
     {
       "path": "pages/home/index",
       "style": {
-        "navigationBarTitleText": "首页"
+        "navigationBarTitleText": "首页",
+        "navigationStyle": "custom"
       }
     },
     {
       "path": "pages/qrcode/index",
       "style": {
-        "navigationBarTitleText": "支付码"
+        "navigationBarTitleText": "会员支付码"
       }
     },
     {
@@ -91,7 +92,7 @@
   "globalStyle": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "uni-app",
-    "navigationBarBackgroundColor": "#F8F8F8",
+    "navigationBarBackgroundColor": "#FFFFFF",
-    "backgroundColor": "#F8F8F8"
+    "backgroundColor": "#F7F7F7"
   }
 }

src/pages/home/index.vue

@@ -1,18 +1,276 @@
 <template>
-  <view class='flex flex-col items-center justify-center'>
+  <view class='u-flex-column'>
-    <swiper class='swiper'>
+    <swiper class='swiper' :indicator-dots='true' :autoplay='true' :interval='3000' :duration='1000'
+            @change='swiperChange'>
       <swiper-item v-for='(item, index) in bannerList' :key='index'>
         <image :src='item' mode='aspectFill' />
       </swiper-item>
     </swiper>
+
+    <view class='basic-view'>
+      <view class='indicator-view'>
+        <view v-for='(item,index) in bannerList' :key='item' class='normal'
+              :class="{'active': index === currentBannerIndex}">
+        </view>
+      </view>
+
+      <view class='user-info-card'>
+        <image class='user-avatar' :src='bannerList[0]' mode='aspectFill' />
+        <text class='user-name'>设计小仙女</text>
+        <view class='integral-view'>
+          <text>1000</text>
+          <text>积分</text>
+        </view>
+        <view class='divider' style='height: 83rpx' />
+        <view class='balance-view'>
+          <text>998.00</text>
+          <text>余额（元）</text>
+        </view>
+      </view>
+
+      <view class='menu-view'>
+        <view>
+          <image :src='assetsUrl+"ic_member_card.png"' style='width: 108rpx;height: 72rpx;padding: 11rpx 0' />
+          <text>会员充值</text>
+        </view>
+        <view class='divider' style='margin: 0;height: 153rpx' />
+        <view>
+          <image :src='assetsUrl + "ic_coupon.png"' style='width: 108rpx;height: 95rpx' />
+          <text>优惠券</text>
+        </view>
+      </view>
+
+      <view class='second-menu-view'>
+        <view v-for='(item, index) in submenuList' :key='index'>
+          <view class='menu-item' @click='toPath(item.path)'>
+            <image :src='item.icon' />
+            <text>{{ item.title }}</text>
+          </view>
+        </view>
+      </view>
+
+      <text class='hot-recommend'>热门推荐</text>
+
+      <view class='bottom-banner-view'>
+        <swiper :indicator-dots='true' :autoplay='true' :interval='3000' :duration='1000'>
+          <swiper-item v-for='(item, index) in bannerList' :key='index'>
+            <image :src='item' mode='aspectFill' />
+          </swiper-item>
+        </swiper>
+      </view>
+    </view>
   </view>
 </template>
 
 <script setup lang='ts'>
 import { useUserStore } from '@/store';
+import { assetsUrl } from '@/utils/assets';
 
 const store = useUserStore();
 
-const bannerList = ref<string[]>(['1', '2', '3', '4']);
+const bannerList = ref<string[]>(['https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0D/0D/ChMkJ1eV_EiIckZnAAxoKo4d-a0AAT0gwJxjq4ADGhC893.jpg',
+  'https://img95.699pic.com/photo/50059/8720.jpg_wh860.jpg',
+  'https://sc.68design.net/photofiles/201312/oSOHcEln8X.jpg',
+  'https://img.zcool.cn/community/01c8f15aeac135a801207fa16836ae.jpg@1280w_1l_2o_100sh.jpg']);
+const currentBannerIndex = ref(0);
+
+const submenuList = [
+  {
+    title: '注册有礼',
+    icon: assetsUrl + 'ic_register_gift.png',
+    path: '/pages/order/order'
+  },
+  {
+    title: '团购秒杀',
+    icon: assetsUrl + 'ic_groupbuy.png',
+    path: '/pages/order/order'
+  },
+  {
+    title: '入群有礼',
+    icon: assetsUrl + 'ic_group_gift.png',
+    path: '/pages/order/order'
+  }
+];
+
+const swiperChange = (e: any) => {
+  currentBannerIndex.value = e.detail.current;
+};
+
 console.log('store.user_name', store.user_name);
 </script>
+
+<style lang='scss'>
+.swiper {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 520rpx;
+
+  image {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.basic-view {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  top: -100rpx;
+}
+
+.indicator-view {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  justify-content: center;
+
+  .normal {
+    width: 16rpx;
+    height: 16rpx;
+    background: #707070;
+    border-radius: 50%;
+    margin: 0 8rpx;
+  }
+
+  .active {
+    @extend .normal;
+    background: #333333;
+  }
+}
+
+.card {
+  background: #FFFFFF;
+  border-radius: 20rpx 20rpx 20rpx 20rpx;
+  margin: 0 24rpx;
+}
+
+.user-info-card {
+  @extend .card;
+  display: flex;
+  flex-direction: row;
+  padding: 30rpx;
+  align-items: center;
+  margin-top: 14rpx;
+
+  .user-avatar {
+    width: 88rpx;
+    height: 88rpx;
+    border-radius: 50%;
+  }
+
+  .user-name {
+    display: flex;
+    flex: 1;
+    font-size: 30rpx;
+    font-weight: bold;
+    color: #333333;
+    margin-left: 16rpx;
+  }
+
+  .integral-view {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    text:nth-child(1) {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #333333;
+    }
+
+    text:nth-child(2) {
+      font-size: 26rpx;
+      font-weight: 400;
+      color: #333333;
+      margin-top: 10rpx;
+    }
+  }
+
+  .balance-view {
+    @extend .integral-view;
+
+    text:nth-child(1) {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #F32B2B;
+    }
+  }
+}
+
+.divider {
+  margin: 0 40rpx;
+  width: 0.5rpx;
+  height: 100%;
+  background: #C7C7C7;
+}
+
+.menu-view {
+  @extend .card;
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  padding: 40rpx 0 32rpx 0;
+  margin-top: 20rpx;
+
+  view:not(:nth-of-type(2)):nth-of-type(n+1) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+  }
+
+  text {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333333;
+    margin-top: 16rpx;
+  }
+}
+
+.second-menu-view {
+  @extend .menu-view;
+
+  image {
+    width: 88rpx;
+    height: 88rpx;
+  }
+
+  text {
+    font-size: 28rpx;
+    color: #333333;
+    margin-top: 23rpx;
+  }
+}
+
+.hot-recommend {
+  margin-top: 30rpx;
+  margin-left: 24rpx;
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333333;
+}
+
+.bottom-banner-view {
+  display: flex;
+  flex-direction: column;
+  margin: 20rpx 24rpx 0 24rpx;
+  border-radius: 20rpx;
+  height: 285rpx;
+
+  swiper {
+    width: 100%;
+    height: 100%;
+
+    image {
+      width: 100%;
+      height: 100%;
+      border-radius: 20rpx;
+    }
+  }
+}
+</style>

src/pages/mall/index.vue

@@ -1,25 +1,211 @@
 <template>
-  <view class="flex flex-col items-center justify-center">
+  <view class='content'>
-    <image
+    <view class='search-view'>
-      class="mb-50rpx mt-200rpx h-200rpx w-200rpx"
+      <view class='search-input'>
-      src="@/static/images/logo.png"
+        <image :src='assetsUrl+"ic_search.png"'></image>
-      width="200rpx"
+        <input placeholder='输入名称、款号搜索' />
-      height="200rpx"
+      </view>
-    />
+    </view>
-    <view class="flex justify-center">
+
-      <text class="font-size-36rpx color-gray-700">
+    <view class='container'>
-        {{ title }}
+      <scroll-view class='category-list' :scroll-y='true'>
-      </text>
+        <view v-for='(item,index) in categoryList' :key='index' class='category-item'
+              @click.stop='changeCategory(index)'
+              :class="{'category-item-active': index === categorySelectedIndex}">
+          <text>{{ item }}</text>
+        </view>
+      </scroll-view>
+
+      <scroll-view class='goods-list' :scroll-y='true' type='custom'>
+        <grid-view type='masonry' :cross-axis-count='2'>
+          <view v-for='(item, index) in goodsList' :key='index' class='goods-item'>
+            <image class='goods-image' :src='item.goodsImage' />
+            <text class='goods-name'>{{ item.goodsName }}</text>
+            <text class='goods-price'>¥{{ item.goodsPrice }}</text>
+            <image class='add-image' :src='assetsUrl+"ic_add_goods.png"' />
+          </view>
+        </grid-view>
+      </scroll-view>
+    </view>
+
+    <view class='shopping-cart'>
+      <image :src='assetsUrl+"ic_shopping_cart.png"' />
     </view>
   </view>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
-import { useUserStore } from '@/store';
+import { assetsUrl } from '@/utils/assets';
 
-const title = ref<string>();
+const categoryList = ref<string[]>(['女装', '男装', '鞋包配饰', '母婴', '美妆个护', '运动户外', '户外运动', '户外运动']);
-title.value = import.meta.env.VITE_APP_TITLE;
+const categorySelectedIndex = ref<number>(0);
 
-const store = useUserStore();
+const goodsList = ref<any[]>([
-console.log('store.user_name', store.user_name);
+  {
+    goodsName: '女童夏装套装洋气装短袖阔腿裤子…',
+    goodsImage: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0D/0D/ChMkJ1eV_EiIckZnAAxoKo4d-a0AAT0gwJxjq4ADGhC893.jpg',
+    goodsPrice: 90
+  },
+  {
+    goodsName: '女童夏装套装洋气装短袖阔腿裤子…女童夏装套装洋气装短袖阔腿裤子',
+    goodsImage: 'https://img95.699pic.com/photo/50059/8720.jpg_wh860.jpg',
+    goodsPrice: 100
+  }, {
+    goodsName: '女童夏装套装洋气装短袖阔腿裤子…',
+    goodsImage: 'https://sc.68design.net/photofiles/201312/oSOHcEln8X.jpg',
+    goodsPrice: 95
+  }, {
+    goodsName: '女童夏装套装洋气装短袖阔腿裤女童夏装套装洋气装短袖阔腿裤子',
+    goodsImage: 'https://img.zcool.cn/community/01c8f15aeac135a801207fa16836ae.jpg@1280w_1l_2o_100sh.jpg',
+    goodsPrice: 93
+  },
+  {
+    goodsName: '女童夏装套装洋气装短袖阔腿裤子…女童夏装套装洋气装短袖阔腿裤子',
+    goodsImage: 'https://img95.699pic.com/photo/50059/8720.jpg_wh860.jpg',
+    goodsPrice: 89
+  }, {
+    goodsName: '女童夏装套装洋气装短袖阔腿裤子…',
+    goodsImage: 'https://sc.68design.net/photofiles/201312/oSOHcEln8X.jpg',
+    goodsPrice: 108
+  }
+]);
+
+const changeCategory = (index: number) => {
+  categorySelectedIndex.value = index;
+};
 </script>
+
+<style lang='scss' scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.search-view {
+  display: flex;
+  flex-direction: row;
+  background: white;
+  padding: 19rpx 30rpx;
+
+  .search-input {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background: #F7F7F7;
+    padding: 17rpx 23rpx;
+    width: 100%;
+
+    image {
+      width: 32rpx;
+      height: 32rpx;
+      margin-right: 20rpx;
+    }
+  }
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  margin-top: 20rpx;
+
+  .category-list {
+    display: flex;
+    flex-direction: column;
+    width: 210rpx;
+
+    .category-item {
+      display: flex;
+      width: 100%;
+      height: 92rpx;
+      overflow: hidden;
+      align-items: center;
+      justify-content: center;
+      white-space: nowrap;
+
+      text {
+        width: 100%;
+        text-align: center;
+      }
+    }
+
+    .category-item-active {
+      @extend .category-item;
+      background: #FFFFFF;
+    }
+
+    .category-item-active:before {
+      content: '';
+      position: absolute;
+      width: 5rpx;
+      left: 15rpx;
+      height: 30rpx;
+      background: #333333;
+      color: #333333;
+    }
+  }
+
+  .goods-list {
+    display: flex;
+    background: white;
+    padding: 38rpx 20rpx 0 20rpx;
+
+    .goods-item {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      margin-bottom: 10rpx;
+      padding: 10rpx 10rpx;
+
+      .goods-image {
+        border-radius: 10rpx;
+        width: 100%;
+        max-height: 200rpx;
+      }
+
+      .goods-name {
+        font-size: 28rpx;
+        font-weight: 400;
+        color: #333333;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-top: 10rpx;
+      }
+
+      .goods-price {
+        font-size: 36rpx;
+        font-weight: bold;
+        color: #F32B2B;
+      }
+
+      .add-image {
+        width: 42rpx;
+        height: 42rpx;
+        position: absolute;
+        bottom: 10rpx;
+        right: 10rpx;
+      }
+    }
+  }
+}
+
+.shopping-cart {
+  display: flex;
+  position: fixed;
+  bottom: 30rpx;
+  right: 40rpx;
+  width: 90rpx;
+  height: 90rpx;
+  background: #FFFFFF;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 20rpx 1rpx rgba(78, 78, 78, 0.16);
+
+  image {
+    width: 40rpx;
+    height: 40rpx;
+  }
+}
+</style>

src/pages/mine/index.vue

@@ -1,21 +1,120 @@
 <template>
-  <view class="flex flex-col items-center justify-center">
+  <view class='content'>
-    <image
+    <view class='user-info-view'>
-      class="mb-50rpx mt-200rpx h-200rpx w-200rpx"
+      <image
-      src="@/static/images/logo.png"
+        class='image-bg'
-      width="200rpx"
+        :src="assetsUrl+'test_bg.png'"
-      height="200rpx"
+      />
-    />
+
-    <view class="flex justify-center">
+      <view class='top-row'>
-      <text class="font-size-36rpx color-gray-700">
+        <image :src='assetsUrl+"ic_coupon.png"' />
-        {{ title }}
+
-      </text>
+        <view class='u-flex-column'>
+          <text>设计小仙女</text>
+          <text>15542535625</text>
+        </view>
+
+        <image :src='assetsUrl+"ic_qrcode_white.png"' />
+      </view>
+
+      <view class='bottom-row'>
+        <view>
+          <text>100</text>
+          <text>积分</text>
+        </view>
+        <view>
+          <text>255.00</text>
+          <text>余额</text>
+        </view>
+        <view>
+          <text>3</text>
+          <text>优惠券</text>
+        </view>
+      </view>
+    </view>
+
+    <view class='integral-add-view'>
+      <text>将会员卡放入微信卡包，及时了解积分变动</text>
+      <text>去添加</text>
+      <image :src='assetsUrl+"ic_arrow_right_yellow.png"' />
+    </view>
+
+    <text class='title-view'>
+      我的订单
+    </text>
+    <view class='card-order-view'>
+      <view v-for='(item,index) in orderActionList' :key='index'>
+        <image :src='item.icon' />
+        <text>{{ item.title }}</text>
+        <text v-if='item.amount>0'>{{ item.amount }}</text>
+      </view>
+    </view>
+
+    <text class='title-view'>
+      会员服务
+    </text>
+
+    <view class='card-service-view'>
+      <view v-for='(item,index) in serviceList' :key='index'>
+        <image :src='item.icon' />
+        <text>{{ item.title }}</text>
+      </view>
     </view>
   </view>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { useUserStore } from '@/store';
+import { assetsUrl } from '@/utils/assets';
+
+const orderActionList = ref([{
+  title: '进行中',
+  icon: assetsUrl + 'ic_order_progressing.png',
+  path: '',
+  amount: 10
+}, {
+  title: '已结束',
+  icon: assetsUrl + 'ic_order_finish.png',
+  path: '',
+  amount: 0
+}, {
+  title: '全部订单',
+  icon: assetsUrl + 'ic_order_all.png',
+  path: '',
+  amount: 0
+}]);
+
+const serviceList = [
+  {
+    title: '会员信息',
+    icon: assetsUrl + 'ic_member_service_info.png',
+    path: ''
+  },
+  {
+    title: '消费记录',
+    icon: assetsUrl + 'ic_member_service_record.png',
+    path: ''
+  },
+  {
+    title: '关注公众号',
+    icon: assetsUrl + 'ic_member_service_follow.png',
+    path: ''
+  },
+  {
+    title: '收货地址',
+    icon: assetsUrl + 'ic_member_service_address.png',
+    path: ''
+  }, {
+    title: '联系商家',
+    icon: assetsUrl + 'ic_member_service_contact.png',
+    path: ''
+  }
+  // ,{
+  //   title: '推广中心',
+  //   icon: assetsUrl + 'ic_order_progressing.png',
+  //   path: ''
+  // }
+];
 
 const title = ref<string>();
 title.value = import.meta.env.VITE_APP_TITLE;
@@ -23,3 +122,200 @@ title.value = import.meta.env.VITE_APP_TITLE;
 const store = useUserStore();
 console.log('store.user_name', store.user_name);
 </script>
+
+<style lang='scss' scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  padding: 30rpx;
+}
+
+.user-info-view {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 275rpx;
+
+  .image-bg {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+
+  .top-row {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    margin-left: 33rpx;
+    margin-top: 43rpx;
+    margin-right: 28rpx;
+    align-items: center;
+
+    image:nth-of-type(1) {
+      width: 80rpx;
+      height: 80rpx;
+      border-radius: 50%;
+      border: #FFFFFF solid 2rpx;
+    }
+
+    view:nth-of-type(1) {
+      display: flex;
+      flex-direction: column;
+      color: white;
+      flex: 1;
+      margin-left: 20rpx;
+
+      text:nth-of-type(1) {
+        font-size: 30rpx;
+        font-weight: 800;
+      }
+
+      text:nth-of-type(2) {
+        font-size: 24rpx;
+        font-weight: 400;
+        margin-top: 5rpx;
+      }
+    }
+
+    image:nth-of-type(2) {
+      width: 36rpx;
+      height: 36rpx;
+    }
+  }
+
+  .bottom-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    position: relative;
+    margin-top: 33rpx;
+
+    view:nth-of-type(n+1) {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      flex: 1;
+
+      text:nth-of-type(1) {
+        font-size: 36rpx;
+        font-weight: 400;
+        color: #FFFFFF;
+      }
+
+      text:nth-of-type(2) {
+        font-size: 26rpx;
+        font-weight: 400;
+        margin-top: 8rpx;
+        color: #FFFFFF;
+      }
+    }
+  }
+}
+
+.integral-add-view {
+  display: flex;
+  flex-direction: row;
+  background: #F8ECDE;
+  align-items: center;
+  border-radius: 10rpx;
+  padding: 20rpx 17rpx;
+  margin-top: 30rpx;
+
+  text:nth-of-type(1) {
+    display: flex;
+    font-size: 24rpx;
+    font-weight: 400;
+    color: #333333;
+    flex: 1;
+  }
+
+  text:nth-of-type(2) {
+    font-size: 26rpx;
+    font-weight: 400;
+    color: #DB7400;
+  }
+
+  image {
+    width: 30rpx;
+    height: 30rpx;
+    margin-left: 14rpx;
+  }
+}
+
+.title-view {
+  font-size: 30rpx;
+  font-weight: 800;
+  color: #333333;
+  margin-top: 30rpx;
+}
+
+.card-view {
+  display: flex;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  margin-top: 20rpx;
+}
+
+.card-order-view {
+  @extend .card-view;
+  flex-direction: row;
+  padding: 30rpx 0;
+
+  view:nth-of-type(n+1) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    flex: 1;
+
+    image {
+      width: 58rpx;
+      height: 58rpx;
+    }
+
+    text:nth-of-type(1) {
+      font-size: 28rpx;
+      font-weight: 400;
+      color: #333333;
+      margin-top: 10rpx;
+    }
+
+    text:nth-of-type(2) {
+      display: flex;
+      position: absolute;
+      min-width: 40rpx;
+      min-height: 35rpx;
+      align-items: center;
+      justify-content: center;
+      background: #F32B2B;
+      border-radius: 50%;
+      color: #FFFFFF;
+      top: -10rpx;
+      right: 70rpx;
+    }
+  }
+}
+
+.card-service-view {
+  @extend .card-view;
+  display: grid;
+  grid-template-columns:repeat(4, 1fr);
+
+  view:nth-of-type(n+1) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 30rpx 0;
+  }
+
+  image {
+    width: 54rpx;
+    height: 54rpx;
+  }
+}
+
+
+</style>

src/pages/qrcode/index.vue

@@ -1,25 +1,249 @@
 <template>
-  <view class="flex flex-col items-center justify-center">
+  <view class='content'>
-    <image
+    <view class='member-info-view'>
-      class="mb-50rpx mt-200rpx h-200rpx w-200rpx"
+      <image :src='assetsUrl+"ic_crown.png"' />
-      src="@/static/images/logo.png"
+      <view class='flex flex-col'>
-      width="200rpx"
+        <text>武汉白银会员</text>
-      height="200rpx"
+        <view />
-    />
+      </view>
-    <view class="flex justify-center">
+    </view>
-      <text class="font-size-36rpx color-gray-700">
+
-        {{ title }}
+    <view class='qrcode-card'>
-      </text>
+      <view class='balance-view'>
+        <text class='balance-text'>账户余额：256.32元</text>
+        <view class='btn-recharge'>
+          <text>去充值</text>
+          <image :src='assetsUrl+"ic_arrow_right.png"' />
+        </view>
+      </view>
+      <view class='divider' />
+      <view class='barcode-view'>
+        <image class='barcode' :src='code?.barCode'></image>
+        <text>{{ codeContent }}</text>
+      </view>
+
+      <view class='qrcode-view'>
+        <image class='qrcode' :src='code?.qrCode'></image>
+        <text>倒计时{{ codeRefreshInterval }}S后自动更新</text>
+      </view>
+
+      <view class='card-info-view'>
+        <view>
+          <image :src='assetsUrl+"ic_card.png"' />
+          <text>卡信息</text>
+        </view>
+
+        <text>店铺名称（武汉xx店）</text>
+        <text>253654587852</text>
+      </view>
+
     </view>
   </view>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
-import { useUserStore } from '@/store';
+import { onLoad, onShow } from '@dcloudio/uni-app';
+import { generateBarCode, generateQrCode } from '@/api/common';
+import { assetsUrl } from '@/utils/assets';
 
-const title = ref<string>();
+const code = ref<{ barCode: string, qrCode: string }>();
-title.value = import.meta.env.VITE_APP_TITLE;
+const codeContent = ref<string>(Date.now().toFixed(0));
+const codeRefreshInterval = ref(30);
 
-const store = useUserStore();
+onLoad(() => {
-console.log('store.user_name', store.user_name);
+  generateCode();
+
+  setInterval(() => {
+    codeRefreshInterval.value -= 1;
+    if(codeRefreshInterval.value == 0) {
+      codeRefreshInterval.value = 30;
+      codeContent.value = Date.now().toFixed(0);
+      generateCode();
+    }
+  }, 1000);
+});
+
+const generateCode = async () => {
+  const barCode = await generateBarCode(codeContent.value);
+  const qrCode = await generateQrCode(codeContent.value);
+  code.value = {
+    barCode: convertBase64(barCode),
+    qrCode: convertBase64(qrCode)
+  };
+};
+
+const convertBase64 = (data: ArrayBuffer) => {
+  return 'data:image/png;base64,' + uni.arrayBufferToBase64(data);
+};
 </script>
+
+<style lang='scss' scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  padding: 28rpx 24rpx 0 24rpx;
+}
+
+.member-info-view {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  image {
+    width: 39rpx;
+    height: 34rpx;
+    margin-right: 10rpx;
+  }
+
+  view:nth-of-type(1) {
+    text {
+      font-size: 32rpx;
+      font-weight: 800;
+      color: #333333;
+    }
+
+    view {
+      width: 100%;
+      height: 4rpx;
+      margin-top: 4rpx;
+      background: #333333
+    }
+  }
+}
+
+.qrcode-card {
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  padding: 25rpx;
+  margin-top: 27rpx;
+
+  .balance-view {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .balance-text {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #333333;
+      flex: 1;
+    }
+
+    .btn-recharge {
+      display: flex;
+      flex-direction: row;
+      width: 178rpx;
+      height: 63rpx;
+      align-items: center;
+      justify-content: center;
+      background: #333333;
+      border-radius: 32rpx;
+
+      text {
+        font-size: 30rpx;
+        font-weight: 400;
+        color: #FFFFFF;
+        white-space: nowrap;
+        margin-left: 10rpx;
+        text-align: center;
+      }
+
+      image {
+        width: 30rpx;
+        height: 30rpx;
+        margin-left: 13rpx;
+      }
+    }
+  }
+
+  .divider {
+    width: 100%;
+    height: 1rpx;
+    background: #D4D4D4;
+    margin-top: 35rpx;
+    margin-bottom: 50rpx;
+  }
+
+  .barcode-view {
+    display: flex;
+    width: 80%;
+    flex-direction: column;
+    align-self: center;
+    justify-content: center;
+    align-items: center;
+
+    image {
+      width: 100%;
+      height: 130rpx;
+    }
+
+    text {
+      font-size: 26rpx;
+      font-weight: bold;
+      color: #333333;
+      margin-top: 10rpx;
+    }
+  }
+
+  .qrcode-view {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 57rpx;
+
+    image {
+      width: 432rpx;
+      height: 432rpx;
+    }
+
+    text {
+      font-size: 26rpx;
+      font-weight: 400;
+      color: #666666;
+      margin-top: 18rpx;
+    }
+  }
+
+  .card-info-view {
+    display: flex;
+    flex-direction: column;
+    margin-top: 57rpx;
+    margin-left: 5rpx;
+
+    view:nth-of-type(1) {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-bottom: 20rpx;
+
+      image {
+        width: 35rpx;
+        height: 32rpx;
+      }
+
+      text {
+        font-size: 30rpx;
+        font-weight: 400;
+        margin-left: 10rpx;
+        color: #666666;
+      }
+    }
+
+    text:nth-of-type(1) {
+      font-size: 30rpx;
+      font-weight: 400;
+      color: #333333;
+    }
+
+    text:nth-of-type(2) {
+      font-size: 32rpx;
+      font-weight: bold;
+      margin-top: 18rpx;
+      color: #333333;
+    }
+  }
+}
+</style>

src/utils/assets.ts

@@ -0,0 +1 @@
+export const assetsUrl ='/static/images/'

src/utils/request/index.ts

@@ -1,5 +1,5 @@
 // 引入配置
-import type { HttpRequestConfig } from 'uview-plus/libs/luch-request/index';
+import type { HttpRequestConfig } from 'uview-plus/libs/luch-request';
 import { requestInterceptors, responseInterceptors } from './interceptors';
 import type { IResponse } from './type';
 
@@ -14,11 +14,15 @@ export function setupRequest() {
   responseInterceptors();
 }
 
-export function request<T = any>(config: HttpRequestConfig): Promise<T> {
+export function request<T = any>(config: HttpRequestConfig): Promise<T | any> {
   return new Promise((resolve) => {
     uni.$u.http.request(config).then((res: IResponse) => {
-      const { result } = res;
+      if(res instanceof ArrayBuffer) {
-      resolve(result as T);
+        resolve(res);
+      } else {
+        const { result } = res;
+        resolve(result as T);
+      }
     });
   });
 }

src/utils/request/interceptors.ts

@@ -1,8 +1,8 @@
 import type {
   HttpError,
   HttpRequestConfig,
-  HttpResponse,
+  HttpResponse
-} from 'uview-plus/libs/luch-request/index';
+} from 'uview-plus/libs/luch-request';
 import { showMessage } from './status';
 import { getToken } from '@/utils/auth';
 import useUserStore from '@/store/modules/user';
@@ -24,16 +24,17 @@ function requestInterceptors() {
       config.data = config.data || {};
       // token设置
       const token = getToken();
-      if (token && config.header) {
+      if(token && config.header) {
         config.header.token = token;
       }
       return config;
     },
     (
-      config: any, // 可使用async await 做异步操作
+      config: any // 可使用async await 做异步操作
-    ) => Promise.reject(config),
+    ) => Promise.reject(config)
   );
 }
+
 function responseInterceptors() {
   /**
    * 响应拦截
@@ -48,15 +49,19 @@ function responseInterceptors() {
       // 自定义参数
       const custom = config?.custom;
 
+      if(config.responseType === 'arraybuffer') {
+        return data;
+      }
+
       // 请求成功则返回结果
-      if (data.code === 200) {
+      if(data.code === 200) {
         return data || {};
       }
 
       // 登录状态失效，重新登录
-      if (data.code === 401) {
+      if(data.code === 401) {
         // 是否在获取token中,防止重复获取
-        if (!isRefreshing) {
+        if(!isRefreshing) {
           // 修改登录状态为true
           isRefreshing = true;
           await useUserStore().authLogin();
@@ -78,26 +83,27 @@ function responseInterceptors() {
       }
 
       // 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
-      if (custom?.toast !== false) {
+      if(custom?.toast !== false) {
         uni.$u.toast(data.message);
       }
 
       // 如果需要catch返回，则进行reject
-      if (custom?.catch) {
+      if(custom?.catch) {
         return Promise.reject(data);
       } else {
         // 否则返回一个pending中的promise
-        return new Promise(() => {});
+        return new Promise(() => {
+        });
       }
     },
     (response: HttpError) => {
-      if (response.statusCode) {
+      if(response.statusCode) {
         // 请求已发出，但是不在2xx的范围
         showMessage(response.statusCode);
         return Promise.reject(response.data);
       }
       showMessage('网络连接异常,请稍后再试!');
-    },
+    }
   );
 }