订单列表(状态,继续支付,取消订单)

src/router/routes-common.ts

@@ -123,6 +123,14 @@ export const router = [
     }
   },
   {
+    path: '/cartConfirmAgin',
+    name: 'cartConfirmAgin',
+    component: () => import('@/views/cart/cart-confirm-agin'),
+    meta: {
+      title: '确认订单'
+    }
+  },
+  {
     path: '/shopOrderDetail',
     name: 'shopOrderDetail',
     component: () => import('@/views/shop-mall/shop-order-detail'),

src/views/cart/cart-confirm-agin/index.tsx

@@ -0,0 +1,168 @@
+import { computed, ref, defineComponent, onMounted, reactive } from 'vue'
+import { Card, Cell, CellGroup, Popup, SubmitBar, Toast } from 'vant'
+import { addressType, cartConfirm } from '../cart'
+import styles from '../index.module.less'
+import Address from '../components/address'
+import request from '@/helpers/request'
+import { useRouter } from 'vue-router'
+import ColProtocol from '@/components/col-protocol'
+import Payment from '@/views/order-detail/payment'
+import { state } from '@/state'
+import ColPopup from '@/components/col-popup'
+import UserAuth from '@/views/order-detail/userAuth'
+import ColResult from '@/components/col-result'
+export default defineComponent({
+  setup() {
+    console.log(cartConfirm)
+    const list = cartConfirm.orderInfo?.orderItemList || []
+    const calcAmount = {
+      totalAmount: cartConfirm.orderInfo?.totalAmount || 0,
+      payAmount: cartConfirm.orderInfo?.payAmount || 0,
+      freightAmount: cartConfirm.orderInfo?.freightAmount || 0
+    }
+
+    onMounted(() => {
+      // console.log(cartConfirm, '确认订单商品')
+    })
+
+    const payType = ref(0) // 0->未支付；1->支付宝；2->微信
+
+    const address: addressType = {
+      city: cartConfirm.orderInfo?.receiverCity,
+      detailAddress: cartConfirm.orderInfo?.receiverDetailAddress,
+      name: cartConfirm.orderInfo?.receiverName,
+      phoneNumber: cartConfirm.orderInfo?.receiverPhone,
+      postCode: cartConfirm.orderInfo?.receiverPostCode,
+      province: cartConfirm.orderInfo?.receiverProvince,
+      region: cartConfirm.orderInfo?.receiverRegion
+    }
+
+    const agreeStatus = ref(false)
+    const paymentPopup = ref(false)
+    const authPopup = ref(false)
+    const orderInfo = reactive({
+      orderNo: cartConfirm.orderInfo?.orderSn || '',
+      actualPrice: cartConfirm.orderInfo?.payAmount || 0
+    })
+    // 提交
+    const onSubmit = () => {
+      if (!agreeStatus.value) {
+        Toast('请先阅读并同意《酷乐秀平台服务协议》')
+        return
+      }
+      const users = state.user.data
+      // 判断是否需要实名认证
+      if (!users?.realName || !users?.idCardNo) {
+        authPopup.value = true
+        return
+      }
+
+      // 判断是否有订单号
+      if (orderInfo.orderNo) {
+        paymentPopup.value = true
+        return
+      }
+      Toast('没有订单号!')
+    }
+    const router = useRouter()
+
+    //认证成功
+    const onAuthSuccess = () => {
+      authPopup.value = false
+      onSubmit() // 实名成功后自动支付
+    }
+    return () => (
+      <>
+        {list.length ? (
+          <div class={styles.cartConfirm}>
+            <div class={styles.cartConfirmBox}>
+              <Address item={address as any} isLink={false} />
+            </div>
+            <div
+              style={{ marginTop: '20px' }}
+              class={[styles.cartBox, styles.cartConfirmBox]}
+            >
+              <div class={styles.shopBox}>
+                {list.map((item: any) => (
+                  <div
+                    class={[styles.cartItem]}
+                    style={{ marginBottom: '10px' }}
+                  >
+                    <Card
+                      price={((item.productPrice * 100) / 100).toFixed(
+                        2
+                      )}
+                      desc={item.productAttr}
+                      title={item.productName}
+                      thumb={item.productPic}
+                      num={item.productQuantity}
+                    ></Card>
+                  </div>
+                ))}
+              </div>
+              <CellGroup border={false}>
+                <Cell
+                  border={false}
+                  title="总额"
+                  value={'¥ ' + calcAmount.totalAmount}
+                ></Cell>
+                <Cell
+                  border={false}
+                  title="运费"
+                  value={calcAmount.freightAmount}
+                ></Cell>
+                <Cell border={false} title="优惠" value={'-¥ ' + cartConfirm.orderInfo?.promotionAmount}></Cell>
+                {/* <Cell border={false} title="优惠卷" value="暂无可用优惠卷"></Cell>
+            <Cell border={false} title="乐乐币抵扣" value={"-¥" + calcAmount.promotionAmount}></Cell> */}
+              </CellGroup>
+            </div>
+
+            <div class={styles.payProtocol}>
+              <ColProtocol v-model={agreeStatus.value}></ColProtocol>
+            </div>
+            <SubmitBar
+              buttonText={`结算(${list.length})`}
+              buttonColor="var(--van-primary)"
+              disabled={list.length === 0}
+              onSubmit={() => onSubmit()}
+            >
+              <div class={styles.confirmBottom}>
+                合计{' '}
+                <span class={styles['price-des']}>
+                  ¥{((calcAmount.payAmount * 1000) / 1000).toFixed(2)}
+                </span>
+              </div>
+            </SubmitBar>
+            <div style={{ height: 'var(--van-submit-bar-height)' }}></div>
+            <ColPopup v-model={authPopup.value}>
+              <UserAuth onSuccess={onAuthSuccess} />
+            </ColPopup>
+            <Popup
+              show={paymentPopup.value}
+              closeOnClickOverlay={false}
+              position="bottom"
+              round
+              closeOnPopstate
+              safeAreaInsetBottom
+              style={{ minHeight: '30%' }}
+            >
+              <Payment
+                v-model={paymentPopup.value}
+                orderInfo={orderInfo}
+                paymentType="goodsPay"
+                onBackOut={() => (paymentPopup.value = false)}
+              />
+            </Popup>
+          </div>
+        ) : (
+          <ColResult
+            buttonText="去购物车"
+            onClick={() => {
+              router.push({ path: '/cart' })
+            }}
+          ></ColResult>
+        )}
+      </>
+    )
+  }
+})

src/views/cart/cart-confirm/index.tsx

@@ -125,6 +125,7 @@ export default defineComponent({
                   title="运费"
                   value={calcAmount.freightAmount}
                 ></Cell>
+                <Cell border={false} title="优惠" value={'-¥ ' + calcAmount.promotionAmount}></Cell>
                 {/* <Cell border={false} title="优惠卷" value="暂无可用优惠卷"></Cell>
             <Cell border={false} title="乐乐币抵扣" value={"-¥" + calcAmount.promotionAmount}></Cell> */}
               </CellGroup>

src/views/cart/cart.ts

@@ -12,10 +12,10 @@ interface cart{
 
 export interface addressType {
     city: string
-    defaultStatus: number
+    defaultStatus?: number
     detailAddress: string
-    id: number
-    memberId: number
+    id?: number
+    memberId?: number
     name: string
     phoneNumber: string
     postCode: string
@@ -25,5 +25,6 @@ export interface addressType {
 export const cartConfirm = reactive({
     calcAmount: {} as amout,
     cartPromotionItemList: [] as Array<any>[],
-    memberReceiveAddressList: [] as Array<addressType>[]
+    memberReceiveAddressList: [] as Array<addressType>[],
+    orderInfo: {} as any
 })

src/views/cart/components/address/index.tsx

@@ -1,5 +1,5 @@
 import { Cell, Icon } from 'vant'
-import { defineComponent, onMounted, ref, computed,PropType, toRef } from 'vue'
+import { defineComponent, onMounted, ref, computed, PropType, toRef } from 'vue'
 import styles from './index.module.less'
 import iconAddress from '@views/shop-mall/images/icon-address.png'
 import request from '@/helpers/request'
@@ -11,51 +11,41 @@ export default defineComponent({
     item: {
       type: Object as PropType<addressType>,
       default: {}
+    },
+    isLink: {
+      type: Boolean,
+      default: true
     }
   },
   setup(props) {
     const address = props.item
     const addressInfo = computed(() => {
-      if (address?.id) {
-        return [
-          address.province,
-          address.city,
-          address.region,
-          address.detailAddress
-        ].join('')
-      }
-      return ''
+      return [
+        address.province,
+        address.city,
+        address.region,
+        address.detailAddress
+      ].join('')
     })
 
     return () => (
       <>
-        {!!address?.id ? (
-          <Cell
-            class={styles.cell}
-            is-link
-            v-slots={{
-              icon: () => <Icon name={iconAddress} size={19} />,
-              title: () => (
-                <div>
-                  <span class={styles.userName}>{address?.name}</span>
-                  <span class={styles.phone}>{address?.phoneNumber}</span>
-                </div>
-              ),
-              label: () => (
-                <span class={styles.addressInfo}>{addressInfo.value}</span>
-              )
-            }}
-          ></Cell>
-        ) : (
-          <Cell
-            class={styles.cellEntry}
-            is-link
-            v-slots={{
-              icon: () => <Icon name={iconAddress} size={38} />,
-              title: () => <span>去填写收货地址</span>
-            }}
-          ></Cell>
-        )}
+        <Cell
+          class={styles.cell}
+          is-link={props.isLink}
+          v-slots={{
+            icon: () => <Icon name={iconAddress} size={19} />,
+            title: () => (
+              <div>
+                <span class={styles.userName}>{address?.name}</span>
+                <span class={styles.phone}>{address?.phoneNumber}</span>
+              </div>
+            ),
+            label: () => (
+              <span class={styles.addressInfo}>{addressInfo.value}</span>
+            )
+          }}
+        ></Cell>
       </>
     )
   }

src/views/goods-order/index.tsx

@@ -1,15 +1,18 @@
 import ColHeader from '@/components/col-header'
 import ColResult from '@/components/col-result'
-import { Button, Cell, CellGroup, Image, List, Tab, Tabs } from 'vant'
+import request from '@/helpers/request'
+import { Button, Cell, CellGroup, Dialog, Image, List, Tab, Tabs } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
+import { orderState } from '@/views/shop-mall/shop-mall'
+import { cartConfirm } from '@/views/cart/cart'
 
 export default defineComponent({
   name: 'shop-order',
   data() {
     return {
-      active: '0',
-      list: [1],
+      active: -1,
+      list: [],
       dataShow: true, // 判断是否有数据
       loading: false,
       finished: false,
@@ -18,13 +21,76 @@ export default defineComponent({
         groupStatus: 'APPLY',
         page: 1,
         rows: 20
+      },
+      page: {
+        pageNum: 1,
+        pageSize: 10
       }
     }
   },
+  watch: {
+    active(val) {
+      this.init()
+      this.getList()
+    }
+  },
   methods: {
-    getList() {},
+    init() {
+      this.page.pageNum = 1
+      this.finished = false
+      this.list = []
+      this.dataShow = true
+    },
+    async getList() {
+      if (this.loading) return console.log(this.loading)
+      this.loading = true
+      try {
+        let { code, data } = await request.get('/api-mall-portal/order/list', {
+          params: {
+            ...this.page,
+            status: this.active
+          }
+        })
+
+        if (code === 200 && data.list) {
+          this.page.pageNum = data.totalPage
+          this.list = [].concat(this.list as any, data.list)
+        }
+        if (this.list.length >= data.total) {
+          this.finished = true
+        }
+
+        if (this.list.length === 0) {
+          this.dataShow = false
+        }
+      } catch (error) {}
+      this.loading = false
+    },
     onClickRight() {
       this.$router.push('/afterSale')
+    },
+
+    async cancelOrder(item: any) {
+      let dialog = await Dialog.confirm({
+        title: '提示',
+        message: '确认取消订单?',
+        confirmButtonText: '取消订单',
+        confirmButtonColor: 'var(--van-primary)'
+      })
+      if (dialog === 'confirm') {
+        let { code, data } = await request.post(
+          '/api-mall-portal/order/cancelUserOrder',
+          { params: { orderId: item.id } }
+        )
+        if (code === 200) {
+          this.init()
+          this.getList()
+        }
+      }
+    },
+    payOrder(item: any) {
+      cartConfirm.orderInfo = item
+      this.$router.push({ path: '/cartConfirmAgin' })
     }
   },
   render() {
@@ -40,9 +106,9 @@ export default defineComponent({
                 color="var(--van-primary)"
                 lineWidth={28}
               >
-                <Tab name="0" title="全部"></Tab>
-                <Tab name="1" title="处理中"></Tab>
-                <Tab name="2" title="已处理"></Tab>
+                <Tab name={-1} title="全部"></Tab>
+                <Tab name={1} title="处理中"></Tab>
+                <Tab name={2} title="已处理"></Tab>
               </Tabs>
             )
           }}
@@ -50,72 +116,61 @@ export default defineComponent({
 
         {this.dataShow ? (
           <List
-            v-model:loading={this.loading}
+            loading={this.loading}
             finished={this.finished}
             finishedText=" "
             class={[styles.goodsList]}
             onLoad={this.getList}
           >
             {this.list.map((item: any) => (
-              <CellGroup class={styles.cellGroup}>
+              <CellGroup
+                class={styles.cellGroup}
+                onClick={() => {
+                  this.$router.push({
+                    path: '/shopOrderDetail',
+                    query: { id: item.id }
+                  })
+                }}
+              >
                 <Cell
-                  title="2022年5月6日20:58:42"
+                  title={item.createTime}
                   titleClass={styles.payTime}
-                  value="待支付"
+                  value={orderState[item.status]}
                   valueClass={styles.payStatus}
                 ></Cell>
-                <Cell
-                  center
-                  v-slots={{
-                    icon: () => (
-                      <Image
-                        class={styles.goodsImg}
-                        src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-                        fit="cover"
-                      />
-                    ),
-                    default: () => (
-                      <div class={styles.goodsContainer}>
-                        <div class={[styles.goodsTitle, 'van-ellipsis']}>
-                          次中音号降调JBBR-1220次中音号降调JBBR-1220次中音号降调JBBR-1220
-                        </div>
-                        <div class={styles.model}>型号：默认</div>
-                        <div class={styles.goodsPrice}>
-                          <span class={styles.price}>
-                            <i>¥</i>2,5000.0
-                          </span>
-                          <span class={styles.num}>x1</span>
-                        </div>
-                      </div>
-                    )
-                  }}
-                ></Cell>
-                <Cell
-                  center
-                  v-slots={{
-                    icon: () => (
-                      <Image
-                        class={styles.goodsImg}
-                        src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-                        fit="cover"
-                      />
-                    ),
-                    default: () => (
-                      <div class={styles.goodsContainer}>
-                        <div class={styles.goodsTitle}>
-                          次中音号降调JBBR-1220
-                        </div>
-                        <div class={styles.model}>型号：默认</div>
-                        <div class={styles.goodsPrice}>
-                          <span class={styles.price}>
-                            <i>¥</i>2,5000.0
-                          </span>
-                          <span class={styles.num}>x 1</span>
-                        </div>
-                      </div>
-                    )
-                  }}
-                ></Cell>
+                {item.orderItemList
+                  ? item.orderItemList.map((n: any) => (
+                      <Cell
+                        center
+                        v-slots={{
+                          icon: () => (
+                            <Image
+                              class={styles.goodsImg}
+                              src={n.productPic}
+                              fit="cover"
+                            />
+                          ),
+                          default: () => (
+                            <div class={styles.goodsContainer}>
+                              <div class={[styles.goodsTitle, 'van-ellipsis']}>
+                                {n.productName}
+                              </div>
+                              <div class={styles.model}>{n.productAttr}</div>
+                              <div class={styles.goodsPrice}>
+                                <span class={styles.price}>
+                                  <i>¥</i>
+                                  {((n.productPrice * 100) / 100).toFixed(2)}
+                                </span>
+                                <span class={styles.num}>
+                                  x{n.productQuantity}
+                                </span>
+                              </div>
+                            </div>
+                          )
+                        }}
+                      ></Cell>
+                    ))
+                  : null}
                 <Cell
                   center
                   v-slots={{
@@ -126,19 +181,40 @@ export default defineComponent({
                           class={styles.price}
                           style={{ paddingLeft: '5px' }}
                         >
-                          <i>¥</i>2,5000.0
+                          <i>¥</i>
+                          {((item.payAmount * 100) / 100).toFixed(2)}
                         </span>
                       </div>
                     ),
                     default: () => (
                       <div class={styles.btnList}>
                         {/* <span class={styles.sureGoods}>已确认收货</span> */}
-                        <Button size="small" round>
-                          取消订单
-                        </Button>
-                        <Button size="small" round type="primary">
-                          继续支付
-                        </Button>
+
+                        {item.status === 0 || item.status === 6 ? (
+                          <>
+                            <Button
+                              size="small"
+                              round
+                              onClick={(e: Event) => {
+                                e.stopPropagation()
+                                this.cancelOrder(item)
+                              }}
+                            >
+                              取消订单
+                            </Button>
+                            <Button
+                              size="small"
+                              round
+                              type="primary"
+                              onClick={(e: Event) => {
+                                e.stopPropagation()
+                                this.payOrder(item)
+                              }}
+                            >
+                              继续支付
+                            </Button>
+                          </>
+                        ) : null}
                       </div>
                     )
                   }}

src/views/shop-mall/shop-mall.ts

@@ -0,0 +1,8 @@
+export const orderState = {
+    0: '待付款',
+    1: '待发货',
+    2: '已发货',
+    3: '已完成',
+    4: '已关闭',
+    5: '无效订单'
+  }

src/views/shop-mall/shop-order-detail/index.tsx

@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router'
 import ShopItem from '../components/shop-item'
 import styles from './index.module.less'
 import { order, item } from './shop-detial'
+import { orderState } from '@/views/shop-mall/shop-mall'
 
 export default defineComponent({
   name: 'shop-order-detail',
@@ -36,15 +37,6 @@ export default defineComponent({
       getOrderInfo()
     })
 
-    const orderState = {
-      0: '待付款',
-      1: '待发货',
-      2: '已发货',
-      3: '已完成',
-      4: '已关闭',
-      5: '无效订单'
-    }
-
     return () => (
       <>
         {items.value.length ? (