src/api/api.type.d.ts

@@ -718,9 +718,9 @@ namespace Api {
     chargeOrder?: ChargeOrderInfo
   }
   interface ChargeOrderInfo {
-  /**
-   * 充电电站名称
-   */
+    /**
+     * 充电电站名称
+     */
     powerStationName?: string | null
     /**
      * 充电订单创建时间
@@ -2215,4 +2215,240 @@ namespace Api {
     totalMoney?: number
 
   }
+
+  interface videoRightHomePage {
+    list?: VideoProductVo[]
+  }
+  interface VideoProductVo {
+    /**
+     * 业务类型 XNSP-虚拟商品
+     */
+    businessType?: string
+    /**
+     * 面值，单位：元（最多保留4位小数）
+     */
+    faceValue?: number
+    /**
+     * 主键id
+     */
+    id?: string
+    /**
+     * 库存
+     */
+    inventory?: number
+    /**
+     * 价格
+     */
+    price?: number
+    /**
+     * 第三方商品编码
+     */
+    productId?: string
+    /**
+     * 商品名称
+     */
+    productName?: string
+    /**
+     * 商品编号
+     */
+    productNumber?: string
+    /**
+     * 上下架状态 0-上架 1-下架
+     */
+    productStatus?: number
+    /**
+     * 商品类型：卡密、直充
+     */
+    productType?: string
+    /**
+     * 部分特殊商品存在此项
+     */
+    templateId?: string
+    [property: string]: any
+  }
+  interface VideoProductOrderPreviewVo {
+    /**
+     * 转换为金额
+     */
+    availablePointsMoney?: number
+    /**
+     * 可用积分
+     */
+    availablePointsTotal?: number
+    /**
+     * 业务类型 XNSP-虚拟商品
+     */
+    businessType?: string
+    /**
+     * 面值，单位：元（最多保留4位小数）
+     */
+    faceValue?: number
+    /**
+     * 主键id
+     */
+    id?: string
+    /**
+     * 库存
+     */
+    inventory?: number
+    /**
+     * 价格
+     */
+    price?: number
+    /**
+     * 第三方商品编码
+     */
+    productId?: string
+    /**
+     * 商品名称
+     */
+    productName?: string
+    /**
+     * 商品编号
+     */
+    productNumber?: string
+    /**
+     * 上下架状态 0-上架 1-下架
+     */
+    productStatus?: number
+    /**
+     * 商品类型：卡密、直充
+     */
+    productType?: string
+    /**
+     * 部分特殊商品存在此项
+     */
+    templateId?: string
+    [property: string]: any
+  }
+
+  interface videoRightCreateOrder {
+    /**
+     * 返回数据对象
+     */
+    data?: ThirdVideoOrderResponseDTO
+  }
+
+  interface ThirdVideoOrderResponseDTO {
+    /**
+     * 扩展参数
+     */
+    extra?: string
+    /**
+     * 平台订单号
+     */
+    orderNo?: string
+    [property: string]: any
+  }
+
+  interface videoRightsubmitOrder {
+    /**
+     * 本地商品ID
+     */
+    productId?: string
+    /**
+     * 充值账号
+     */
+    rechargeAccount?: string
+    /**
+     * 账号类型：1手机号 2QQ号 0其他
+     */
+    accountType?: number
+  }
+
+  interface VirtualOrderDetailVo {
+    /**
+     * 卡密信息（卡密类商品）
+     */
+    cardInfo?: string
+    /**
+     * 订单时间
+     */
+    createTime?: string
+    /**
+     * 失败原因
+     */
+    failReason?: string
+    /**
+     * 积分抵扣（分）
+     */
+    offsetPoints?: number
+    /**
+     * 订单号
+     */
+    orderNumber?: string
+    /**
+     * 已支付金额
+     */
+    paidAmount?: number
+    /**
+     * 支付方式
+     */
+    payType?: string
+    /**
+     * 商品名称
+     */
+    productName?: string
+    /**
+     * 商品图片/类型
+     */
+    productType?: string
+    /**
+     * 数量
+     */
+    quantity?: number
+    /**
+     * 充值账号
+     */
+    rechargeAccount?: string
+    /**
+     * 充值状态：1-处理中 2-成功 3-失败
+     */
+    rechargeStatus?: number
+    /**
+     * 充值状态描述
+     */
+    rechargeStatusDesc?: string
+    /**
+     * 商品总价
+     */
+    totalPrice?: number
+    [property: string]: any
+  }
+
+  interface DataVirtualOrderListVo {
+    list?: VirtualOrderListVo[]
+    total?: number
+  }
+  interface VirtualOrderListVo {
+    /**
+     * 订单时间
+     */
+    createTime?: string
+    /**
+     * 订单号
+     */
+    orderNumber?: string
+    /**
+     * 商品名称
+     */
+    productName?: string
+    /**
+     * 商品类型/图标
+     */
+    productType?: string
+    /**
+     * 充值状态：1-处理中 2-成功 3-失败
+     */
+    rechargeStatus?: number
+    /**
+     * 充值状态描述
+     */
+    rechargeStatusDesc?: string
+    /**
+     * 售价
+     */
+    sellPrice?: number
+    [property: string]: any
+  }
 }

src/api/apiDefinitions.ts

@@ -95,4 +95,11 @@ export default {
   'charge.stopCharge': ['POST', '/smqjh-system/applet/v1/station/stopCharge'],
   'charge.stationInfoMapList': ['GET', '/smqjh-system/applet/v1/homePage/getStationInfoMapList'],
   'charge.orderDetail': ['GET', '/smqjh-oms/api/v1/order/getChargeOrder'],
+
+  'videoRight.findAppByPage': ['GET', '/smqjh-pms/app-api/v1/videoProduct/findAppByPage'],
+  'videoRight.goodsDetail': ['GET', '/smqjh-pms/app-api/v1/videoProduct/findById'],
+  'videoRight.goodsPreview': ['GET', '/smqjh-pms/app-api/v1/videoProduct/findByIdOrderPreview'],
+  'videoRight.orderCreate':['POST', '/smqjh-oms/app-api/v1/order/virtual'],
+  'videoRight.orderDetail':['GET', '/smqjh-oms/app-api/v1/order/virtual/detail'],
+  'videoRight.orderList':['GET', '/smqjh-oms/app-api/v1/order/virtual/list'],
 };

src/api/globals.d.ts

@@ -449,7 +449,7 @@ declare global {
         Config extends Alova2MethodConfig<listData<Api.xsbOrderList>> & {
           data: {
             businessType?: string;
-            orderStatus?: string|number;
+            orderStatus?: string | number;
             pageNum?: number;
             pageSize?: number;
             dvyType?: number | string;
@@ -665,8 +665,8 @@ declare global {
         config: Config
       ): Alova2Method<apiResData<Api.smqjhCategoryList[]>, 'smqjh.getCategoryList', Config>;
     },
-    film:{
-       getCityList<
+    film: {
+      getCityList<
         Config extends Alova2MethodConfig<ApiResponse<Api.filmCityList>> & {
 
         }
@@ -688,7 +688,7 @@ declare global {
       getMovieDetail<
         Config extends Alova2MethodConfig<ApiResponse<Api.filmMovieList>> & {
           data: {
-            id?: number|string;
+            id?: number | string;
           }
         }
       >(
@@ -697,31 +697,31 @@ declare global {
       getFilmList<
         Config extends Alova2MethodConfig<ApiResponse<Api.filmList>> & {
           data: {
-            cityId?: number|string;
-            cinemaId?: number|string;
-            movieId?: number|string;
-            districtId?: number|string;
-            showDates?: number|string;
-            hall?: number|string;
-            lat?: number|null;
-            lng?: number|null;
+            cityId?: number | string;
+            cinemaId?: number | string;
+            movieId?: number | string;
+            districtId?: number | string;
+            showDates?: number | string;
+            hall?: number | string;
+            lat?: number | null;
+            lng?: number | null;
 
           }
         }
       >(
         config: Config
       ): Alova2Method<ApiResponse<Api.filmList>, 'film.getFilmList', Config>;
-       getFilmDateList<
+      getFilmDateList<
         Config extends Alova2MethodConfig<ApiResponse<Api.filmDateList>> & {
           data: {
-            movieId?:string
+            movieId?: string
           }
         }
       >(
         config: Config
       ): Alova2Method<ApiResponse<Api.filmDateList>, 'film.getFilmDateList', Config>;
 
-       getFilmBrandList<
+      getFilmBrandList<
         Config extends Alova2MethodConfig<ApiResponse<Api.filmBrandList>> & {
 
         }
@@ -732,8 +732,8 @@ declare global {
       getFilmMovieList<
         Config extends Alova2MethodConfig<ApiResponse<Api.filmOwnMovieList>> & {
           data: {
-            cinemaId:string
-            movieId:string
+            cinemaId: string
+            movieId: string
 
           }
         }
@@ -744,9 +744,9 @@ declare global {
       getFilmMovieSeat<
         Config extends Alova2MethodConfig<ApiResponse<Api.filmMovieSeat>> & {
           data: {
-            sessionId:string
-            movieId:string
-            cinemaId:string
+            sessionId: string
+            movieId: string
+            cinemaId: string
 
           }
         }
@@ -756,13 +756,13 @@ declare global {
       addFilmOrder<
         Config extends Alova2MethodConfig<ApiResponse<Api.addFilmOrder>> & {
           data: {
-            cinemaCode:string
-            hallName:string
-            orderPayMode:string
-            originPrice:number
-            seatNames:string
-            sessionBeginTime:string
-            switchSeat:boolean
+            cinemaCode: string
+            hallName: string
+            orderPayMode: string
+            originPrice: number
+            seatNames: string
+            sessionBeginTime: string
+            switchSeat: boolean
 
           }
         }
@@ -772,7 +772,7 @@ declare global {
       filmOrderDetail<
         Config extends Alova2MethodConfig<ApiResponse<Api.filmOrder>> & {
           data: {
-            id:string
+            id: string
           }
         }
       >(
@@ -886,8 +886,8 @@ declare global {
       stationInfoMapList<
         Config extends Alova2MethodConfig<apiResData<any>> & {
           data: {
-            longitude?: number|null;
-            latitude?: number|null;
+            longitude?: number | null;
+            latitude?: number | null;
           }
         }
       >(
@@ -897,13 +897,76 @@ declare global {
       orderDetail<
         Config extends Alova2MethodConfig<apiResData<chargeOrderDetail>> & {
           data: {
-            orderNumber?: string|null;
+            orderNumber?: string | null;
           }
         }
       >(
         config: Config
       ): Alova2Method<apiResData<chargeOrderDetail>, 'charge.orderDetail', Config>;
     }
+
+    videoRight: {
+      findAppByPage<
+        Config extends Alova2MethodConfig<apiResData<videoRightHomePage>> & {
+          data: {
+            pageNum?: number;
+            pageSize?: number;
+          }
+        }
+      >(
+        config: Config
+      ): Alova2Method<apiResData<videoRightHomePage>, 'videoRight.findAppByPage', Config>;
+
+      goodsDetail<
+        Config extends Alova2MethodConfig<apiResData<VideoProductVo>> & {
+          data: {
+            id: string
+          }
+        }
+      >(
+        config: Config
+      ): Alova2Method<apiResData<VideoProductVo>, 'videoRight.goodsDetail', Config>;
+
+      goodsPreview<
+        Config extends Alova2MethodConfig<apiResData<VideoProductOrderPreviewVo>> & {
+          data: {
+            id: string
+          }
+        }
+      >(
+        config: Config
+      ): Alova2Method<apiResData<VideoProductOrderPreviewVo>, 'videoRight.goodsPreview', Config>;
+
+      orderCreate<
+        Config extends Alova2MethodConfig<videoRightCreateOrder> & {
+          data: Api.videoRightsubmitOrder;
+        }
+      >(
+        config: Config
+      ): Alova2Method<videoRightCreateOrder, 'videoRight.orderCreate', Config>;
+
+      orderDetail<
+        Config extends Alova2MethodConfig<apiResData<VirtualOrderDetailVo>> & {
+          data: {
+            orderNumber: string
+          }
+        }
+      >(
+        config: Config
+      ): Alova2Method<apiResData<VirtualOrderDetailVo>, 'videoRight.goodsPreview', Config>;
+
+      orderList<
+        Config extends Alova2MethodConfig<apiResData<DataVirtualOrderListVo>> & {
+          data: {
+            rechargeStatus?: string
+            pageNum?: number
+            pageSize?: number
+          }
+        }
+      >(
+        config: Config
+      ): Alova2Method<apiResData<DataVirtualOrderListVo>, 'videoRight.orderList', Config>;
+    }
   }
 }
 var Apis: Apis;

src/config/index.ts

@@ -7,7 +7,7 @@ const mapEnvVersion = {
   // develop: 'http://192.168.0.157:8080',
   // develop: 'http://192.168.1.253:8080',
   // develop: 'http://192.168.0.19:8080',
-  // develop: 'http://192.168.0.217:8080',
+  // develop: 'http://192.168.0.217:8080', // 黄
   // develop: 'http://192.168.1.89:8080', // 田
   // develop: 'http://74949mkfh190.vicp.fun', // 付
   // develop: 'http://47.109.84.152:8081',

src/pages.json

@@ -492,6 +492,22 @@
           "style": {
             "navigationBarTitleText": "详情"
           }
+        },
+        {
+          "path": "videoRightsOrderInfo/videoRightsOrderInfo",
+          "name": "video-rights-order-info",
+          "islogin": false,
+          "style": {
+            "navigationBarTitleText": "订单确认"
+          }
+        },
+        {
+          "path": "videoRightsSubmitOrder/videoRightsSubmitOrder",
+          "name": "video-rights-submit-order",
+          "islogin": false,
+          "style": {
+            "navigationBarTitleText": "订单确认"
+          }
         }
       ]
     }

src/pages/index/index.vue

@@ -56,9 +56,9 @@ onReachBottom(() => {
 const navList = computed(() => {
   const list = [
     { icon: `${StaticUrl}/xsb.png`, title: '星闪豹', name: 'xsb-homeTabbar', show: true },
-    { icon: `${StaticUrl}/smqjh-index-cd.png`, title: '充电', name: 'charge-index', show: true }, // !isOnlineAudit.value
+    { icon: `${StaticUrl}/smqjh-index-cd.png`, title: '充电', name: 'charge-index', show: true },
     { icon: `${StaticUrl}/smqjh-sp.png`, title: '电影演出', name: 'film-index', show: true },
-    { icon: `${StaticUrl}/smqjh-vip.png`, title: '视频权益', name: '', show: !isOnlineAudit.value },
+    { icon: `${StaticUrl}/smqjh-vip.png`, title: '视频权益', name: 'video-rights-tabbar', show: true },
     { icon: `${StaticUrl}/smqjh-diancan.png`, title: '大牌点餐', name: '', show: !isOnlineAudit.value },
     { icon: `${StaticUrl}/smqjh-jiayou.png`, title: '加油', name: '', show: !isOnlineAudit.value },
     { icon: `${StaticUrl}/smqjh-jiudian.png`, title: '酒店民宿', name: '', show: !isOnlineAudit.value },

src/subPack-charge/chargeDetail/chargeDetail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatStatusName } from '../utils/index'
+import { ScanCodeUtil, formatStatusName } from '../utils/index'
 import router from '@/router'
 import { StaticUrl } from '@/config'
 
@@ -64,6 +64,31 @@ function getTabStyle(tab: string) {
     ? { background: '#9ED605', color: '#FFF' }
     : {}
 }
+async function getDeviceInfo(connectorCode: string) {
+  useGlobalLoading().loading({})
+  const res = await Apis.charge.connectorDetail({ data: { connectorCode } })
+  useGlobalLoading().close()
+  if (res.data.status === 0 || res.data.status === 255) {
+    useGlobalMessage().alert('此设备异常或被占用，请更换其他设备')
+  }
+  else {
+    router.push({ name: 'charge-start', params: { connectorCode } })
+  }
+}
+async function scanCode() {
+  try {
+    const connectorCode = await ScanCodeUtil.scanAndGetConnectorCode()
+    if (!connectorCode) {
+      useGlobalMessage().alert('二维码不正确')
+      return
+    }
+    // 获取设备信息
+    getDeviceInfo(connectorCode)
+  }
+  catch (error) {
+    console.error('扫码失败:', error)
+  }
+}
 </script>
 
 <template>
@@ -205,6 +230,7 @@ function getTabStyle(tab: string) {
     <view class="h-180rpx" />
     <view
       class="fixed bottom-66rpx left-24rpx h-100rpx w-702rpx rounded-16rpx bg-[linear-gradient(90deg,#DBFC81_0%,#9ED605_100%)] text-center text-28rpx font-800 line-height-[100rpx] shadow-[inset_0rpx_6rpx_20rpx_2rpx_#FFFFFF]"
+      @click="scanCode"
     >
       扫码充电
     </view>

src/subPack-charge/chargeSiteDetail/chargeSiteDetail.vue

@@ -30,7 +30,7 @@ onMounted(() => {
 const stationDetail = ref<Api.chargeStationDetail>()
 async function getStationDetail() {
   useGlobalLoading().loading({})
-  const res = await Apis.charge.detail({ data: { stationId: stationId.value, latitude: Location.value.latitude, longitude: Location.value.longitude } })
+  const res = await Apis.charge.detail({ data: { stationId: stationId.value, latitude: Location.value.latitude || 0, longitude: Location.value.longitude || 0 } })
   stationDetail.value = res.data
   useGlobalLoading().close()
 }

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

@@ -48,6 +48,13 @@ async function getData(orderNo: string) {
   }
 }
 function call() {
+  if (!orderInfo.value.phone) {
+    uni.showToast({
+      title: '暂无联系电话',
+      icon: 'none',
+    })
+    return
+  }
   uni.makePhoneCall({
     phoneNumber: orderInfo.value.phone,
   })

src/subPack-videoRights/commonTab/components/home.vue

@@ -1,7 +1,32 @@
 <script setup lang="ts">
 import router from '@/router'
+import { StaticUrl } from '@/config'
+import { createGlobalLoadingMiddleware } from '@/api/core/middleware'
 
 const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
+/**
+ * 获取视频权益列表
+ */
+const { data: videoDataList, isLastPage, page, refresh } = usePagination((pageNum, pageSize) =>
+  Apis.videoRight.findAppByPage({ data: { pageNum, pageSize } }), {
+  data: (resp) => {
+    return resp.data?.list
+  },
+  initialData: [],
+  initialPage: 1,
+  initialPageSize: 10,
+  append: true,
+  immediate: true,
+  middleware: createGlobalLoadingMiddleware(),
+})
+onShow(() => {
+  refresh()
+})
+onReachBottom(() => {
+  if (!isLastPage.value) {
+    page.value++
+  }
+})
 </script>
 
 <template>
@@ -14,16 +39,16 @@ const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
     <view class="box-border px24rpx">
       <scroll-view scroll-y type="custom">
         <grid-view type="masonry" cross-axis-count="2" main-axis-gap="10" cross-axis-gap="10">
-          <view class="mt-18rpx rounded-16rpx bg-#FFF" @click="router.push({ name: 'video-rights-detail' })">
+          <view v-for="item in videoDataList" :key="item.id" class="mt-18rpx rounded-16rpx bg-#FFF" @click="router.push({ name: 'video-rights-detail', params: { id: item.id } })">
             <view>
               <image
                 class="h-342rpx w-342rpx rounded-16rpx"
-                src="../../../static/tab/class-tab1.png"
+                :src="`${StaticUrl}/list-page-img.png`"
               />
             </view>
             <view class="mx20rpx my-24rpx">
               <view class="text-28rpx font-bold">
-                网易云黑胶VIP月卡
+                {{ item.productName }}
               </view>
               <view class="mt-30rpx flex items-center gap-18rpx">
                 <view class="text-#FF4D3A">
@@ -31,15 +56,16 @@ const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
                     ￥
                   </text>
                   <text class="text-36rpx font-800">
-                    18
+                    {{ item.price }}
                   </text>
                 </view>
                 <view class="text-24rpx text-#AAA decoration-line-through">
-                  市场价￥30
+                  市场价￥{{ item.faceValue }}
                 </view>
               </view>
             </view>
           </view>
+          <StatusTip v-if="!videoDataList.length" tip="暂无内容" />
         </grid-view>
       </scroll-view>
     </view>

src/subPack-videoRights/commonTab/components/order.vue

@@ -1,7 +1,45 @@
 <script setup lang="ts">
+import { StaticUrl } from '@/config'
+import { createGlobalLoadingMiddleware } from '@/api/core/middleware'
+import router from '@/router'
+
 const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
 const tab = ref<number>(0)
 const tabsList = ref(['全部', '成功', '失败'])
+const rechargeStatus = ref<string>('')
+const { data: orderList, isLastPage, page, refresh } = usePagination((pageNum, pageSize) =>
+  Apis.videoRight.orderList({ data: { pageNum, pageSize, rechargeStatus: rechargeStatus.value } }), {
+  data: (resp) => {
+    return resp.data?.list
+  },
+  initialData: [],
+  initialPage: 1,
+  initialPageSize: 10,
+  append: true,
+  immediate: true,
+  middleware: createGlobalLoadingMiddleware(),
+})
+onShow(() => {
+  refresh()
+})
+onReachBottom(() => {
+  if (!isLastPage.value) {
+    page.value++
+  }
+})
+
+function handleClick(e: any) {
+  if (e.index === 0) {
+    rechargeStatus.value = ''
+  }
+  else if (e.index === 1) {
+    rechargeStatus.value = '2'
+  }
+  else if (e.index === 2) {
+    rechargeStatus.value = '3'
+  }
+  refresh()
+}
 </script>
 
 <template>
@@ -11,46 +49,47 @@ const tabsList = ref(['全部', '成功', '失败'])
       safe-area-inset-top fixed
     />
     <view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" />
-    <wd-tabs v-model="tab" animated>
+    <wd-tabs v-model="tab" animated @click="handleClick">
       <block v-for="item in tabsList" :key="item">
         <wd-tab :title="item">
           <view class="box-border bg-#f6f6f6 px24rpx">
-            <view class="h-28rpx" />
-            <view class="rounded-16rpx bg-#FFF p-24rpx">
+            <view class="h-4rpx" />
+            <view v-for=" order in orderList" :key="order.orderNumber" class="mt-28rpx rounded-16rpx bg-#FFF p-24rpx" @click="router.push({ name: 'video-rights-order-info', params: { orderNo: order.orderNumber } })">
               <view class="flex items-center justify-between">
                 <view class="text-28rpx">
-                  2024-12-13 11：12：30
+                  {{ order.createTime }}
                 </view>
                 <view class="text-28rpx font-bold">
-                  充值成功
+                  {{ order.rechargeStatusDesc }}
                 </view>
               </view>
               <view class="mt-24rpx h-2rpx w-full bg-#F0F0F0" />
               <view class="mt-24rpx flex items-center justify-between">
                 <view class="flex items-center gap-20rpx">
                   <view class="h-160rpx w-160rpx">
-                    image
+                    <image class="h-160rpx w-160rpx" :src="`${StaticUrl}/list-page-img.png`" />
                   </view>
                   <view>
                     <view class="text-32rpx font-bold">
-                      网易云黑胶VIP月卡
+                      {{ order.productName }}
                     </view>
                     <view class="mt-16rpx text-#FF4D3A">
                       <text class="text-22rpx font-500">
                         ￥
                       </text>
                       <text class="text-36rpx font-800">
-                        18
+                        {{ order.sellPrice }}
                       </text>
                     </view>
                     <view class="mt-16rpx text-24rpx">
-                      XN123458625484359845
+                      {{ order.orderNumber }}
                     </view>
                   </view>
                 </view>
                 <wd-icon name="chevron-right" size="22px" color="#222222" />
               </view>
             </view>
+            <StatusTip v-if="!orderList.length" tip="暂无内容" />
           </view>
         </wd-tab>
       </block>

src/subPack-videoRights/components/StatusDisplay.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+  status: number
+  staticUrl: string
+}
+
+const props = defineProps<Props>()
+
+const statusConfig = computed(() => {
+  const statusMap = {
+    1: { text: '处理中', color: 'text-#ff9300', icon: null },
+    2: { text: '充值成功', color: 'text-#52C41A', icon: 'videoRight-right.png' },
+    3: { text: '充值失败', color: 'text-#FF4D3A', icon: 'videoRight-err.png' },
+  }
+
+  return statusMap[props.status as keyof typeof statusMap] || { text: '', color: '', icon: null }
+})
+</script>
+
+<template>
+  <view class="flex items-center justify-center gap-16rpx">
+    <image
+      v-if="statusConfig.icon"
+      class="h-40rpx w-40rpx"
+      :src="`${staticUrl}/${statusConfig.icon}`"
+    />
+    <view
+      class="text-32rpx font-bold"
+      :class="statusConfig.color"
+    >
+      {{ statusConfig.text }}
+    </view>
+  </view>
+</template>

src/subPack-videoRights/videoRightsDetail/videoRightsDetail.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { StaticUrl } from '@/config'
+import router from '@/router'
 
 definePage({
   name: 'video-rights-detail',
@@ -8,12 +9,25 @@ definePage({
     navigationBarTitleText: '详情',
   },
 })
+const goodsId = ref()
+onLoad((options: any) => {
+  goodsId.value = options.id
+})
+onMounted(() => {
+  getGoodsDetail()
+})
+
+const goodsDetail = ref()
+async function getGoodsDetail() {
+  const res = await Apis.videoRight.goodsDetail({ data: { id: goodsId.value } })
+  goodsDetail.value = res.data
+}
 </script>
 
 <template>
   <view class="video-rights-detail-page">
     <view class="relative h-750rpx">
-      <image class="h-750rpx w-full" src="https://picx.zhimg.com/v2-ab23d513fab6abd0a27cda9ba9676383_720w.jpg?source=172ae18b" />
+      <image class="h-750rpx w-full" :src="`${StaticUrl}/videoRight-goodsDetail.png`" />
       <view class="absolute bottom-0 left-24rpx right-24rpx rounded-16rpx bg-#FFF p-24rpx">
         <view class="flex items-center gap-18rpx">
           <view class="text-#FF4D3A">
@@ -21,15 +35,15 @@ definePage({
               ￥
             </text>
             <text class="text-36rpx font-800">
-              18
+              {{ goodsDetail?.price }}
             </text>
           </view>
           <view class="text-24rpx text-#AAA decoration-line-through">
-            ￥30
+            ￥{{ goodsDetail?.faceValue }}
           </view>
         </view>
         <view class="mt-20rpx text-32rpx font-bold">
-          网易云黑胶VIP月卡
+          {{ goodsDetail?.productName }}
         </view>
       </view>
     </view>
@@ -84,9 +98,9 @@ definePage({
       </view>
     </view>
     <view class="fixed bottom-0 h-174rpx w-full border-[1rpx_solid_#EEEEEE] bg-#FFF px-24rpx">
-      <view class="mt-10rpx h-80rpx w-702rpx rounded-46rpx bg-#9ED605 text-center text-#FFF line-height-[80rpx]">
+      <wd-button custom-class="w-702rpx mt-10rpx" block size="large" @click="router.push({ name: 'video-rights-submit-order', params: { id: goodsDetail?.id } })">
         立即充值
-      </view>
+      </wd-button>
     </view>
   </view>
 </template>

src/subPack-videoRights/videoRightsOrderInfo/videoRightsOrderInfo.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import StatusDisplay from '../components/StatusDisplay.vue'
+import { StaticUrl } from '@/config'
+import router from '@/router'
+
+definePage({
+  name: 'video-rights-order-info',
+  islogin: false,
+  style: {
+    navigationBarTitleText: '订单确认',
+  },
+})
+
+const orderNo = ref('')
+onLoad((options: any) => {
+  orderNo.value = options.orderNo
+  console.log(options, '页面数据')
+})
+onMounted(() => {
+  getOrderDetail()
+})
+
+const videoRightOrderDetail = ref<Api.VirtualOrderDetailVo>()
+async function getOrderDetail() {
+  const res = await Apis.videoRight.orderDetail({ data: { orderNumber: orderNo.value } })
+  videoRightOrderDetail.value = res.data
+}
+</script>
+
+<template>
+  <view class="video-rights-order-info-page">
+    <view class="box-border px24rpx">
+      <view class="h-22rpx" />
+      <StatusDisplay
+        v-if="videoRightOrderDetail?.rechargeStatus"
+        :status="videoRightOrderDetail.rechargeStatus"
+        :static-url="StaticUrl"
+      />
+      <view class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
+        <view class="flex items-center gap-20rpx">
+          <view class="h-160rpx w-160rpx">
+            <image class="h-160rpx w-160rpx" :src="`${StaticUrl}/list-page-img.png`" />
+          </view>
+          <view>
+            <view class="text-32rpx font-bold">
+              {{ videoRightOrderDetail?.productName }}
+            </view>
+            <view class="mt-20rpx text-22rpx">
+              ×{{ videoRightOrderDetail?.quantity }}
+            </view>
+          </view>
+        </view>
+        <view class="mt-26rpx h-2rpx w-full bg-#F0F0F0" />
+        <view class="mt-24rpx flex items-center justify-between text-28rpx">
+          <view>商品总价</view>
+          <view>￥{{ videoRightOrderDetail?.totalPrice }}</view>
+        </view>
+        <view class="mt-24rpx flex items-center justify-between text-28rpx">
+          <view>已支付</view>
+          <view class="text-#FF4A39">
+            ￥{{ videoRightOrderDetail?.paidAmount }}
+          </view>
+        </view>
+        <view class="mt-24rpx flex items-center justify-between text-28rpx">
+          <view>积分抵扣</view>
+          <view class="text-#FF4A39">
+            -{{ videoRightOrderDetail?.offsetPoints }}
+          </view>
+        </view>
+        <view class="mt-26rpx h-2rpx w-full bg-#F0F0F0" />
+        <view class="mt-24rpx text-22rpx">
+          充值账号:{{ videoRightOrderDetail?.rechargeAccount }}
+        </view>
+      </view>
+      <view class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
+        <view class="flex items-center justify-between">
+          <view class="text-28rpx text-#AAA">
+            订单编号
+          </view>
+          <view class="text-28rpx font-bold">
+            {{ videoRightOrderDetail?.orderNumber }}
+          </view>
+        </view>
+        <view class="mt-28rpx flex items-center justify-between">
+          <view class="text-28rpx text-#AAA">
+            订单时间
+          </view>
+          <view class="text-28rpx font-bold">
+            {{ videoRightOrderDetail?.createTime }}
+          </view>
+        </view>
+        <view class="mt-28rpx flex items-center justify-between">
+          <view class="text-28rpx text-#AAA">
+            支付方式
+          </view>
+          <view class="text-28rpx font-bold">
+            {{ videoRightOrderDetail?.payType }}
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="fixed bottom-0 h-174rpx w-full border-[1rpx_solid_#EEEEEE] bg-#FFF px-24rpx">
+      <wd-button custom-class="w-702rpx mt-10rpx" block size="large" @click="router.back()">
+        返回
+      </wd-button>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped></style>

src/subPack-videoRights/videoRightsSubmitOrder/videoRightsSubmitOrder.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { StaticUrl } from '@/config'
+import router from '@/router'
+
+definePage({
+  name: 'video-rights-submit-order',
+  islogin: false,
+  style: {
+    navigationBarTitleText: '订单确认',
+  },
+})
+
+const goodsId = ref()
+onLoad((options: any) => {
+  goodsId.value = options.id
+})
+onMounted(() => {
+  getGoodsPreview()
+})
+
+const previewGoods = ref()
+async function getGoodsPreview() {
+  const res = await Apis.videoRight.goodsPreview({ data: { id: goodsId.value } })
+  previewGoods.value = res.data
+}
+
+const submitFrom = ref<Api.videoRightsubmitOrder>({
+  productId: '',
+  rechargeAccount: '',
+  accountType: 1, // 1 手机号;2 QQ号
+})
+
+// 添加账户类型选择功能
+function selectAccountType(type: number) {
+  submitFrom.value.rechargeAccount = ''
+  submitFrom.value.accountType = type
+}
+
+function submitPay() {
+  if (submitFrom.value.rechargeAccount === '') {
+    useGlobalToast().show({ msg: '请输入充值账号' })
+    return
+  }
+  submitFrom.value.productId = previewGoods.value.id
+  useGlobalMessage().confirm({
+    title: '提示',
+    msg: `确认为账户${submitFrom.value.rechargeAccount}充值吗？`,
+    success: async () => {
+      useGlobalLoading().loading({ msg: '提交中...' })
+      const res = await Apis.videoRight.orderCreate({ data: submitFrom.value })
+      useGlobalLoading().close()
+      router.push({ name: 'video-rights-order-info', params: { orderNo: res.data } })
+    },
+  })
+}
+</script>
+
+<template>
+  <view class="video-rights-submit-order-page">
+    <view class="box-border px24rpx">
+      <view class="h-20rpx" />
+      <view class="flex items-center gap-20rpx rounded-16rpx bg-#FFF p-24rpx">
+        <view class="h-160rpx w-160rpx">
+          <image class="h-160rpx w-160rpx" :src="`${StaticUrl}/list-page-img.png`" />
+        </view>
+        <view>
+          <view class="text-32rpx font-bold">
+            {{ previewGoods?.productName }}
+          </view>
+          <view class="mt-20rpx text-#FF4D3A">
+            <text class="text-22rpx font-500">
+              ￥
+            </text>
+            <text class="text-36rpx font-800">
+              {{ previewGoods?. price }}
+            </text>
+          </view>
+        </view>
+      </view>
+      <view class="mt-20rpx gap-20rpx rounded-16rpx bg-#FFF p-24rpx">
+        <view class="text-28rpx font-bold">
+          我的积分余额
+        </view>
+        <view class="mt-24rpx flex items-center gap-28rpx">
+          <view class="flex items-center gap-12rpx">
+            <text class="text-40rpx text-#9ED605 font-bold">
+              {{ previewGoods?.availablePointsTotal }}
+            </text>
+            <text class="text-24rpx">
+              积分
+            </text>
+          </view>
+          <image class="h-48rpx w-48rpx" :src="`${StaticUrl}/charge-acc.png`" />
+          <view class="flex items-center gap-12rpx">
+            <text class="text-40rpx text-#9ED605 font-bold">
+              {{ previewGoods?.availablePointsMoney }}
+            </text>
+            <text class="text-24rpx">
+              元
+            </text>
+          </view>
+        </view>
+      </view>
+      <view class="mt-20rpx gap-20rpx rounded-16rpx bg-#FFF p-24rpx">
+        <view class="flex items-center gap-20rpx">
+          <view class="text-28rpx font-bold">
+            充值账户
+          </view>
+          <view class="flex items-center gap-8rpx">
+            <wd-icon name="warning" size="14px" color="#FF4A39 " />
+            <text class="text-24rpx text-#AAA">
+              请确认账号无误，充值成功后不支持退款
+            </text>
+          </view>
+        </view>
+        <view class="mt-24rpx flex items-center gap-20rpx">
+          <view
+            class="rounded-26rpx px24rpx py6rpx text-28rpx"
+            :class="submitFrom.accountType === 1 ? 'bg-#9ED605 text-#FFF' : 'bg-#F9F9F9 text-#AAA'"
+            @click="selectAccountType(1)"
+          >
+            手机号码
+          </view>
+          <view
+            class="rounded-26rpx px24rpx py6rpx text-28rpx"
+            :class="submitFrom.accountType === 2 ? 'bg-#9ED605 text-#FFF' : 'bg-#F9F9F9 text-#AAA'"
+            @click="selectAccountType(2)"
+          >
+            QQ号码
+          </view>
+        </view>
+        <view class="mt-32rpx rounded-16rpx bg-#F9F9F9 p-24rpx">
+          <input
+            v-model="submitFrom.rechargeAccount"
+            placeholder="请输入您的充值账户"
+            placeholder-class="text-24rpx text-#AAA"
+          >
+        </view>
+      </view>
+    </view>
+    <view class="fixed bottom-0 h-174rpx w-full border-[1rpx_solid_#EEEEEE] bg-#FFF px-24rpx">
+      <view class="mt-20rpx w-702rpx flex items-center justify-between">
+        <view class="flex items-center gap-6rpx">
+          <view class="text-24rpx text-#AAA">
+            共1件
+          </view>
+          <view class="text-24rpx">
+            合计
+          </view>
+          <view class="text-#FF4D3A">
+            <text class="text-22rpx font-500">
+              ￥
+            </text>
+            <text class="text-32rpx font-bold">
+              {{ previewGoods?. price }}
+            </text>
+          </view>
+        </view>
+        <wd-button @click="submitPay">
+          立即充值
+        </wd-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped></style>

src/uni-pages.d.ts

@@ -45,7 +45,9 @@ interface NavigateToOptions {
        "/subPack-charge/chargeStart/chargeStart" |
        "/subPack-charge/index/index" |
        "/subPack-videoRights/commonTab/index" |
-       "/subPack-videoRights/videoRightsDetail/videoRightsDetail";
+       "/subPack-videoRights/videoRightsDetail/videoRightsDetail" |
+       "/subPack-videoRights/videoRightsOrderInfo/videoRightsOrderInfo" |
+       "/subPack-videoRights/videoRightsSubmitOrder/videoRightsSubmitOrder";
 }
 interface RedirectToOptions extends NavigateToOptions {}