更新

src/student/live-class/live-detail.tsx

@@ -34,7 +34,7 @@ export default defineComponent({
       courseId: query.classId,
       live: {} as any,
       shareStatus: false,
-      shareUrl: '',
+      shareUrl: ''
     }
   },
   computed: {
@@ -263,11 +263,13 @@ export default defineComponent({
   render() {
     return (
       <div class={[styles['live-detail'], 'mb12']}>
-        <ColHeader v-slots={{
-          right: () => (
-            <img src={iconShare} onClick={() => this.shareStatus = true} />
-          )
-        }} />
+        <ColHeader
+          v-slots={{
+            right: () => (
+              <img src={iconShare} onClick={() => (this.shareStatus = true)} />
+            )
+          }}
+        />
         <UserDetail userInfo={this.userInfo} showBuy={false} />
         <SectionDetail border>
           <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>

src/views/music/album-detail/index.tsx

@@ -3,7 +3,7 @@ import { useRoute, useRouter } from 'vue-router'
 import request from '@/helpers/request'
 import ColHeader from '@/components/col-header'
 import { postMessage } from '@/helpers/native-message'
-import { Button, Icon, Image, List, NavBar, Sticky } from 'vant'
+import { Button, Dialog, Icon, Image, List, NavBar, Sticky } from 'vant'
 // import classNames from 'classnames'
 // import Footer from '../album/footer'
 // import FavoriteIcon from '../album/favorite.svg'
@@ -24,6 +24,7 @@ import MusicGrid from '../component/music-grid'
 import { useEventTracking } from '@/helpers/hooks'
 import ColSticky from '@/components/col-sticky'
 import { moneyFormat } from '@/helpers/utils'
+import { orderStatus } from '@/views/order-detail/orderStatus'
 
 const noop = () => {}
 
@@ -125,40 +126,53 @@ export default defineComponent({
     }
 
     const onBuy = async () => {
-      // const member: any = this.selectMember
-      // // 判断是否有会员
-      // const startTime = this.userInfo.memberRankSettingId
-      //   ? dayjs(this.userInfo.membershipEndTime).toDate()
-      //   : new Date()
-      // let endTime = new Date()
-      // if (member.period === 'MONTH') {
-      //   endTime = dayjs(startTime).add(1, 'month').toDate()
-      // } else if (member.period === 'QUARTERLY') {
-      //   endTime = dayjs(startTime).add(3, 'month').toDate()
-      // } else if (member.period === 'YEAR_HALF') {
-      //   endTime = dayjs(startTime).add(6, 'month').toDate()
-      // } else if (member.period === 'YEAR') {
-      //   endTime = dayjs(startTime).add(1, 'year').toDate()
-      // }
-      // orderStatus.orderObject.orderType = 'VIP'
-      // orderStatus.orderObject.orderName = '小酷Ai' + member.title
-      // orderStatus.orderObject.orderDesc = '小酷Ai' + member.title
-      // orderStatus.orderObject.actualPrice = this.calcSalePrice(member)
+      const album = albumDetail.value
+      orderStatus.orderObject.orderType = 'ALBUM'
+      orderStatus.orderObject.orderName = album.albumName
+      orderStatus.orderObject.orderDesc = album.albumName
+      orderStatus.orderObject.actualPrice = album.albumPrice
       // orderStatus.orderObject.recomUserId = this.recomUserId
       // orderStatus.orderObject.activityId = this.activityId
-      // orderStatus.orderObject.orderNo = ''
-      // orderStatus.orderObject.orderList = [
-      //   {
-      //     orderType: 'VIP',
-      //     goodsName: '小酷Ai' + member.title,
-      //     id: member.id,
-      //     title: member.title,
-      //     price: this.calcSalePrice(member),
-      //     startTime: dayjs(startTime).format('YYYY-MM-DD'),
-      //     endTime: dayjs(endTime).format('YYYY-MM-DD'),
-      //     recomUserId: this.recomUserId
-      //   }
-      // ]
+      orderStatus.orderObject.orderNo = ''
+      orderStatus.orderObject.orderList = [
+        {
+          orderType: 'ALBUM',
+          goodsName: album.albumName,
+          price: album.albumPrice,
+          ...album
+        }
+      ]
+
+      const res = await request.post('/api-student/userOrder/getPendingOrder', {
+        data: {
+          goodType: 'ALBUM',
+          bizId: album.id
+        }
+      })
+
+      const result = res.data
+      if (result) {
+        Dialog.confirm({
+          title: '提示',
+          message: '您有一个未支付的订单，是否继续支付？',
+          confirmButtonColor: '#269a93',
+          cancelButtonText: '取消订单',
+          confirmButtonText: '继续支付'
+        })
+          .then(async () => {
+            orderStatus.orderObject.orderNo = result.orderNo
+            orderStatus.orderObject.actualPrice = result.actualPrice
+            orderStatus.orderObject.discountPrice = result.discountPrice
+            routerTo()
+          })
+          .catch(() => {
+            Dialog.close()
+            // 只用取消订单，不用做其它处理
+            cancelPayment(result.orderNo)
+          })
+      } else {
+        routerTo()
+      }
       // this.$router.push({
       //   path: '/orderDetail',
       //   query: {
@@ -166,6 +180,26 @@ export default defineComponent({
       //   }
       // })
     }
+    const routerTo = () => {
+      const album = albumDetail.value
+      router.push({
+        path: '/orderDetail',
+        query: {
+          orderType: 'ALBUM',
+          album: album.id
+        }
+      })
+    }
+    const cancelPayment = async (orderNo: string) => {
+      try {
+        await request.post('/api-student/userOrder/orderCancel', {
+          data: {
+            orderNo
+          }
+        })
+        // this.routerTo()
+      } catch {}
+    }
 
     return () => {
       return (
@@ -317,7 +351,7 @@ export default defineComponent({
                 >
                   购买专辑
                 </Button>
-                {albumDetail.value?.musicPaymentTypes.includes('CHARGE') && (
+                {albumDetail.value?.musicPaymentTypes.includes('VIP') && (
                   <Button
                     block
                     round

src/views/order-detail/index.tsx

@@ -28,6 +28,7 @@ import OrderPinao from './order-pinao'
 import { getMusicDetail } from '@/student/trade/tradeOrder'
 import OrderActive from './order-active'
 import UseCoupon from './use-coupons'
+import OrderAlbum from './order-album'
 
 export default defineComponent({
   name: 'order-detail',
@@ -221,6 +222,8 @@ export default defineComponent({
                 return <OrderPinao item={item} />
               } else if (item.orderType === 'ACTI_REGIST') {
                 return <OrderActive item={item} />
+              } else if (item.orderType === 'ALBUM') {
+                return <OrderAlbum item={item} />
               }
             })}
 

src/views/order-detail/order-album/index.module.less

@@ -0,0 +1,81 @@
+.item {
+  background-color: var(--music-list-item-background-color);
+  // margin: 10px 14px;
+  margin-bottom: 12px;
+  padding: 10px;
+  border-radius: 9px;
+  .header {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--music-list-item-border-color);
+    padding-bottom: 12px;
+    .mate {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      .icon {
+        width: 40px;
+        height: 40px;
+      }
+      .info {
+        margin-left: 14px;
+        > h4 {
+          color: var(--music-list-item-title-color);
+          font-size: 14px;
+          font-weight: 600;
+        }
+        > p {
+          color: var(--music-list-item-mate-color);
+          line-height: 17px;
+        }
+      }
+    }
+    .btn {
+      width: 54px;
+      height: 22px;
+      font-size: 12px;
+      border-radius: 11px;
+      padding: 0;
+      border: none;
+      &.vip {
+        background-color: var(--music-list-item-vip-bg);
+        color: var(--music-list-item-vip-color);
+      }
+      &.free {
+        background-color: var(--music-list-item-free-bg);
+        color: var(--music-list-item-free-color);
+      }
+      &.charge {
+        background-color: var(--music-list-item-charge-bg);
+        color: var(--music-list-item-charge-color);
+      }
+    }
+  }
+  .footer {
+    display: flex;
+    padding-top: 8px;
+    align-items: center;
+    justify-content: space-between;
+    .user {
+      display: flex;
+      align-items: center;
+      padding: 0 10px;
+      .userIcon {
+        width: 20px;
+        height: 20px;
+        margin-right: 8px;
+      }
+    }
+    .favorite {
+      font-size: 16px;
+    }
+    .tags {
+      display: flex;
+      align-items: center;
+      --van-tag-default-color: #fff1de;
+      --van-tag-text-color: #ff8c00;
+    }
+  }
+
+  --van-button-disabled-opacity: 1;
+}

src/views/order-detail/order-album/index.tsx

@@ -0,0 +1,29 @@
+import { Button, Icon, Image, Tag } from 'vant'
+import classNames from 'classnames'
+import MusicIcon from '@/views/music/list/icons/music-icon.png'
+import InitUserIcon from '@/views/music/list/icons/init-user-icon.png'
+// import FavoriteIcon from '@/student/music/album/favorite.svg'
+// import FavoritedIcon from '@/student/music/album/favorited.svg'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import Item from '@/views/music/album/item'
+
+const chargeTypes = {
+  CHARGE: '点播',
+  FREE: '免费',
+  VIP: 'VIP'
+}
+
+export default defineComponent({
+  name: 'OrderMusic',
+  props: {
+    item: {
+      type: Object,
+      default: {}
+    }
+  },
+  render() {
+    const item = this.item
+    return <Item data={item} style={{ margin: '0 0 10px' }} />
+  }
+})

src/views/order-detail/orderStatus.ts

@@ -12,6 +12,7 @@ type orderType =
   | 'MUSIC'
   | 'PINAO_ROOM'
   | 'ACTI_REGIST'
+  | 'ALBUM'
   | ''
 
 const original = () => {
@@ -113,6 +114,12 @@ export const orderInfos = () => {
         actualPrice: item.actualPrice || 0,
         clientType: state.platformType
       }
+    } else if (item.orderType === 'ALBUM') {
+      params.bizContent = {
+        id: item.id,
+        actualPrice: item.actualPrice || 0,
+        clientType: state.platformType
+      }
     } else if (item.orderType === 'PINAO_ROOM') {
       params.bizContent = item.id
     } else if (item.orderType === 'ACTI_REGIST') {