```

feat: 添加二维码功能并优化订单详情页面

- 新增uqrcodejs依赖包用于生成二维码
- 创建二维码组件src/subPack-film/components/code.vue
- 在订单详情页集成二维码显示功能
- 更新订单详情页面数据绑定，显示真实订单信息
- 修改开发环境API地址配置
- 修复时间格式化工具函数中的日期格式错误
- 添加手机号码拨打功能
- 优化座位信息显示布局
```

package.json

@@ -83,6 +83,7 @@
     "alova": "^3.3.4",
     "echarts": "^6.0.0",
     "pinia": "^2.3.1",
+    "uqrcodejs": "^4.0.7",
     "vue": "~3.4.38",
     "vue-demi": "^0.14.10",
     "vue-i18n": "^9.14.0",

pnpm-lock.yaml

@@ -82,6 +82,9 @@ importers:
       pinia:
         specifier: ^2.3.1
         version: 2.3.1(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4))
+      uqrcodejs:
+        specifier: ^4.0.7
+        version: 4.0.7
       vue:
         specifier: ~3.4.38
         version: 3.4.38(typescript@5.5.4)
@@ -6848,6 +6851,9 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  uqrcodejs@4.0.7:
+    resolution: {integrity: sha512-84+aZmD2godCVI+93lxE3YUAPNY8zAJvNA7xRS7R7U+q57KzMDepBSfNCwoRUhWOfR6eHFoAOcHRPwsP6ka1cA==}
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -15429,6 +15435,8 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  uqrcodejs@4.0.7: {}
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1

src/config/index.ts

@@ -9,9 +9,9 @@ const mapEnvVersion = {
   // develop: 'http://192.168.0.19:8080',
   // develop: 'http://192.168.0.217:8080',
   // develop: 'http://192.168.1.89:8080', // 田
-  develop: 'http://74949mkfh190.vicp.fun', // 付
+  // develop: 'http://74949mkfh190.vicp.fun', // 付
   // develop: 'http://47.109.84.152:8081',
-  // develop: 'https://smqjh.api.zswlgz.com',
+  develop: 'https://smqjh.api.zswlgz.com',
   /**
    * 体验版
    */

src/subPack-film/components/code.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-expect-error
+import UQRCode from 'uqrcodejs'
+
+const props = defineProps<{ canvasWidth: number, text: string }>()
+const instance = getCurrentInstance()
+function getQrcode() {
+  const code = new UQRCode()
+  code.data = props.text
+  code.size = props.canvasWidth * 0.29
+  code.areaColor = 'rgba(25,147,227,0.5)'
+  code.make()
+  const canvasText = uni.createCanvasContext('qrcodeCanvas', instance)
+  code.canvasContext = canvasText
+  code.drawCanvas()
+  console.log(code, 'code')
+}
+onReady(() => {
+  getQrcode()
+})
+defineExpose({ getQrcode })
+</script>
+
+<template>
+  <canvas
+    id="qrcodeCanvas" :style="{ width: `${canvasWidth * 0.29}px`, height: `${canvasWidth * 0.29}px` }"
+    canvas-id="qrcodeCanvas" type="2d"
+  />
+</template>
+
+<style scoped>
+
+</style>

src/subPack-film/order-detail/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { filterDay, timeFormat } from '../utils'
 import { StaticUrl } from '@/config'
 
 definePage({
@@ -44,6 +45,12 @@ async function getData(orderNo: string) {
   // const res = await Apis.film.filmOrderDetail({ data: { id } })
 
   orderInfo.value = res.data
+  orderInfo.value.codeList = orderInfo.value.orderMovieItems[0].ticketCode.split(',')
+}
+function call() {
+  uni.makePhoneCall({
+    phoneNumber: orderInfo.value.phone,
+  })
 }
 
 onLoad((options) => {
@@ -75,11 +82,14 @@ onLoad((options) => {
 
     <!-- 取票码 -->
     <view class="ticket-info block">
-      <view v-for="(item, index) in orderInfo.orderMovieItems" :key="index" class="ticket-item">
+      <view class="ticket-item">
         <view class="seat">
-          座位：6排4座
+          座位：
+          <view v-for="(item, index) in orderInfo.orderMovieItems" :key="index">
+            {{ `${item.name} ` }} &nbsp;
+          </view>
         </view>
-        <view class="code-box">
+        <!-- <view class="code-box">
           <view class="code">
             取票码：{{ item.ticketCode || '暂无' }}
           </view>
@@ -87,20 +97,25 @@ onLoad((options) => {
         </view>
         <view class="notice">
           (前为取票码，后为验票码)
-        </view>
+        </view> -->
         <view class="qrcode-box">
-          <view class="qrcode" />
+          <view class="qrcode">
+            <!-- <uqrcode value="test" canvas-id="qrcode" />
+              -->
+          </view>
+          <Qrcode content="https://example.com/测试中文内容" :size="260" color="#333333" error-level="H" />
+
           <view class="download-btn" @click="downloadImg">
             下载到手机
           </view>
         </view>
       </view>
-      <view class="open-box">
+      <!-- <view class="open-box">
         <view class="text">
           展开(共{{ orderInfo.orderMovieItems.length }}个)
         </view>
         <image class="arrow" :src="`${StaticUrl}/film-black-arrow.png`" mode="scaleToFill" />
-      </view>
+      </view> -->
     </view>
 
     <!-- 退款信息 -->
@@ -165,13 +180,14 @@ onLoad((options) => {
 
     <!-- 影片信息 -->
     <view class="movie-info block">
-      <image class="img" :src="`${StaticUrl}/film-ing-icon.png`" />
+      <image class="img" :src="orderInfo.orderImage" />
       <view class="title-box">
         <view class="title">
           {{ orderInfo.movieName }}
         </view>
+
         <view class="time-box">
-          {{ orderInfo.movieName }}（今天）11：50-15：08 英语3D
+          {{ filterDay(orderInfo.session) == '今天' ? '今天' : timeFormat(orderInfo.session) }} 英语3D
         </view>
       </view>
     </view>
@@ -188,7 +204,7 @@ onLoad((options) => {
             导航
           </view>
         </view>
-        <view class="icon-item">
+        <view class="icon-item" @click="call">
           <image class="icon" :src="`${StaticUrl}/film-phone.png`" />
           <view class="text">
             电话
@@ -249,13 +265,13 @@ onLoad((options) => {
       <view class="line" />
       <view class="total-box">
         <view class="reduce">
-          总计￥159.9 共减￥159
+          总计￥{{ orderInfo.orderMoney }}共减￥{{ orderInfo.offsetPoints / 100 }}
         </view>
         <view class="text">
           实际付款
         </view>
         <view class="total">
-          ￥10.9
+          ￥{{ orderInfo.total }}
         </view>
       </view>
     </view>
@@ -269,8 +285,8 @@ onLoad((options) => {
           订单编号
         </view>
         <view class="value">
-          1234567890
-          <image class="icon" :src="`${StaticUrl}/film-copy.png`" @click="handleCopy('1234567890')" />
+          {{ orderInfo.orderNumber }}
+          <image class="icon" :src="`${StaticUrl}/film-copy.png`" @click="handleCopy(orderInfo.orderNumber)" />
         </view>
       </view>
       <view class="item">
@@ -286,7 +302,7 @@ onLoad((options) => {
           支付时间
         </view>
         <view class="value">
-          2024-12-13 11：12：30
+          {{ orderInfo.payTime }}
         </view>
       </view>
       <view class="item">
@@ -294,7 +310,7 @@ onLoad((options) => {
           下单时间
         </view>
         <view class="value">
-          2024-12-13 11：12：30
+          {{ orderInfo.createTime }}
         </view>
       </view>
     </view>
@@ -380,6 +396,7 @@ onLoad((options) => {
       font-weight: bold;
       font-size: 28rpx;
       color: #222222;
+      display: flex;
     }
     .code-box{
       display: flex;

src/subPack-film/utils/index.ts

@@ -41,10 +41,10 @@ export function filterDay(val: string) {
   if (val === timeFormat(new Date().getTime(), 'yyyy-MM-dd')) {
     return '今天'
   }
-  else if (val === timeFormat(new Date().getTime() + 1000 * 60 * 60 * 24, 'yyyy-mm-dd')) {
+  else if (val === timeFormat(new Date().getTime() + 1000 * 60 * 60 * 24, 'yyyy-MM-dd')) {
     return '明天'
   }
-  else if (val === timeFormat(new Date().getTime() + 1000 * 60 * 60 * 24 * 2, 'yyyy-mm-dd')) {
+  else if (val === timeFormat(new Date().getTime() + 1000 * 60 * 60 * 24 * 2, 'yyyy-MM-dd')) {
     return '后天'
   }
   else {

tsconfig.json

@@ -28,6 +28,7 @@
     "src/**/*.tsx",
     "src/**/*.vue",
     "async-import.d.ts",
-    "async-component.d.ts"
+    "async-component.d.ts",
+    "src/**/*.js"
   ]
 }