首页页面完善

2024-02-03 19:51:36 +08:00
parent 486ea5013a
commit 82b09c68a5
34 changed files with 1060 additions and 73 deletions
--- a/src/pages/qrcode/index.vue
+++ b/src/pages/qrcode/index.vue
@@ -1,25 +1,249 @@
 <template>
-  <view class="flex flex-col items-center justify-center">
-    <image
-      class="mb-50rpx mt-200rpx h-200rpx w-200rpx"
-      src="@/static/images/logo.png"
-      width="200rpx"
-      height="200rpx"
-    />
-    <view class="flex justify-center">
-      <text class="font-size-36rpx color-gray-700">
-        {{ title }}
-      </text>
+  <view class='content'>
+    <view class='member-info-view'>
+      <image :src='assetsUrl+"ic_crown.png"' />
+      <view class='flex flex-col'>
+        <text>武汉白银会员</text>
+        <view />
+      </view>
+    </view>
+
+    <view class='qrcode-card'>
+      <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">
-import { useUserStore } from '@/store';
+<script setup lang='ts'>
+import { onLoad, onShow } from '@dcloudio/uni-app';
+import { generateBarCode, generateQrCode } from '@/api/common';
+import { assetsUrl } from '@/utils/assets';

-const title = ref<string>();
-title.value = import.meta.env.VITE_APP_TITLE;
+const code = ref<{ barCode: string, qrCode: string }>();
+const codeContent = ref<string>(Date.now().toFixed(0));
+const codeRefreshInterval = ref(30);

-const store = useUserStore();
-console.log('store.user_name', store.user_name);
+onLoad(() => {
+  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>