购物车和订单详情

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

@@ -1,129 +1,179 @@
-import { computed, ref, defineComponent, onMounted } from 'vue'
-import {
-  Card,
-  Cell,
-  CellGroup,
-  Checkbox,
-  Image,
-  Radio,
-  RadioGroup,
-  SubmitBar
-} from 'vant'
-import { carts } from '../cart'
+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 iconWx from '@views/shop-mall/images/icon-wx.png'
-import iconZfb from '@views/shop-mall/images/icon-zfb.png'
 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() {
-    const list = carts.list
+    const list = cartConfirm.cartPromotionItemList
+    const calcAmount = cartConfirm.calcAmount
 
-    const len = computed(() => {
-      return list.length
-    })
-    const totalPrice = computed(() => {
-      let price = 0
-      list.forEach((n: any) => {
-        price += n.price * n.quantity
-      })
-      return ((price * 100) / 100).toFixed(2)
-    })
     onMounted(() => {
-      console.log(list, '确认订单商品')
+      // console.log(cartConfirm, '确认订单商品')
+    })
+
+    const payType = ref(0) // 0->未支付；1->支付宝；2->微信
+
+    const address = cartConfirm.memberReceiveAddressList.length
+      ? cartConfirm.memberReceiveAddressList.find(
+          (n: any) => n.defaultStatus
+        ) || cartConfirm.memberReceiveAddressList[0]
+      : {}
+
+    const agreeStatus = ref(false)
+    const paymentPopup = ref(false)
+    const authPopup = ref(false)
+    const orderInfo = reactive({
+      orderNo: '',
+      actualPrice: 0
     })
+    // 提交
+    const onSubmit = () => {
+      if (!agreeStatus.value) {
+        Toast('请先阅读并同意《酷乐秀平台服务协议》')
+        return
+      }
+      const users = state.user.data
+      // 判断是否需要实名认证
+      if (!users?.realName || !users?.idCardNo) {
+        authPopup.value = true
+        return
+      }
 
-    const payType = ref('wx')
+      // 判断是否有订单号
+      if (orderInfo.orderNo) {
+        paymentPopup.value = true
+        return
+      }
+      createOrder()
+    }
+    const router = useRouter()
+    //创建订单
+    const createOrder = async () => {
+      const ids = list.reduce((arr, value: any) => {
+        arr.push(value.id)
+        return arr
+      }, [])
+      const body = {
+        cartIds: ids,
+        memberReceiveAddressId: (address as any)?.id,
+        payType: payType.value
+      }
+      try {
+        let { code, data } = await request.post(
+          '/api-mall-portal/order/generateOrder',
+          { data: body }
+        )
+        if (code === 200) {
+          paymentPopup.value = true
+          orderInfo.orderNo = data?.order.orderSn || ''
+          orderInfo.actualPrice = data?.order.payAmount || 0
+        }
+      } catch (error) {}
+    }
+
+    //认证成功
+    const onAuthSuccess = () => {
+      authPopup.value = false
+      onSubmit() // 实名成功后自动支付
+    }
     return () => (
-      <div class={styles.cartConfirm}>
-        <div class={styles.cartConfirmBox}>
-          <Address />
-        </div>
-        <div
-          style={{ marginTop: '20px' }}
-          class={[styles.cartBox, styles.cartConfirmBox]}
-        >
-          {list.map((item: any) => (
-            <div class={styles.cartItem}>
-              <Card
-                price={((item.price * item.quantity * 100) / 100).toFixed(2)}
-                desc={item.productAttr}
-                title={item.productName}
-                thumb={item.productPic}
-                num={item.quantity}
-              ></Card>
+      <>
+        {list.length ? (
+          <div class={styles.cartConfirm}>
+            <div class={styles.cartConfirmBox}>
+              <Address item={address as any} />
             </div>
-          ))}
-          <CellGroup border={false}>
-            <Cell
-              border={false}
-              title="总额"
-              value={'¥ ' + totalPrice.value}
-            ></Cell>
-            <Cell border={false} title="运费" value="¥ 0.00"></Cell>
-            <Cell border={false} title="优惠卷" value="暂无可用优惠卷"></Cell>
-            <Cell border={false} title="乐乐币抵扣" value="-¥ 0.00"></Cell>
-          </CellGroup>
-        </div>
-
-        <div
-          class={[styles.cartConfirmBox, styles.payWrap]}
-          style={{ marginTop: '20px' }}
-        >
-          <RadioGroup v-model={payType.value}>
-            <Cell
-              border={false}
-              v-slots={{
-                title: () => (
-                  <div class={styles.payType}>
-                    <Image class={styles.payIcon} src={iconWx}></Image>
-                    <span
-                      style={{
-                        marginLeft: '14px',
-                        fontSize: '14px',
-                        fontWeight: 500
-                      }}
-                    >
-                      微信支付
-                    </span>
-                  </div>
-                ),
-                value: () => <Radio name="wx"></Radio>
-              }}
-              onClick={() => (payType.value = 'wx')}
-            ></Cell>
-            <Cell
-              v-slots={{
-                title: () => (
-                  <div class={styles.payType}>
-                    <Image class={styles.payIcon} src={iconZfb}></Image>
-                    <span
-                      style={{
-                        marginLeft: '14px',
-                        fontSize: '14px',
-                        fontWeight: 500
-                      }}
-                    >
-                      支付宝支付
-                    </span>
+            <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.price * item.quantity * 100) / 100).toFixed(
+                        2
+                      )}
+                      desc={item.productAttr}
+                      title={item.productName}
+                      thumb={item.productPic}
+                      num={item.quantity}
+                    ></Card>
                   </div>
-                ),
-                value: () => <Radio name="zfb"></Radio>
-              }}
-              onClick={() => (payType.value = 'zfb')}
-            ></Cell>
-          </RadioGroup>
-        </div>
-        <SubmitBar
-          buttonText={`结算(${len.value})`}
-          buttonColor="var(--van-primary)"
-          disabled={len.value === 0}
-        >
-          <div class={styles.confirmBottom}>
-            合计 <span class={styles['price-des']}>¥{totalPrice.value}</span>
+                ))}
+              </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="暂无可用优惠卷"></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>
-        </SubmitBar>
-        <div style={{height: 'var(--van-submit-bar-height)'}}></div>
-      </div>
+        ) : (
+          <ColResult
+            buttonText="去购物车"
+            onClick={() => {
+              router.push({path: '/cart'})
+            }}
+          ></ColResult>
+        )}
+      </>
     )
   }
 })

src/views/cart/cart.ts

@@ -1,5 +1,29 @@
 import { reactive,ref } from "vue";
+interface amout{
+    freightAmount: number,
+    payAmount: number,
+    promotionAmount: number,
+    totalAmount: number
+}
+interface cart{
+    calcAmount: amout,
+    cartPromotionItemList: Array<any>[]
+}
 
-export const carts = reactive({
-    list: [] as any
+export interface addressType {
+    city: string
+    defaultStatus: number
+    detailAddress: string
+    id: number
+    memberId: number
+    name: string
+    phoneNumber: string
+    postCode: string
+    province: string
+    region: string
+  }
+export const cartConfirm = reactive({
+    calcAmount: {} as amout,
+    cartPromotionItemList: [] as Array<any>[],
+    memberReceiveAddressList: [] as Array<addressType>[]
 })

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

@@ -1,40 +1,35 @@
 import { Cell, Icon } from 'vant'
-import { defineComponent, onMounted, ref } 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'
+import { cartConfirm, addressType } from '../../cart'
 
 export default defineComponent({
   name: 'cart-address',
-  setup() {
-    const address = ref('')
-    const addressList = ref([])
-
-    const getList = async () => {
-      try {
-        const { code, data } = await request.get(
-          '/api-mall-portal/member/address/list'
-        )
-        if (code === 200) addressList.value = data
-        if (data.length) address.value = data[0] || ''
-      } catch (error) {}
+  props: {
+    item: {
+      type: Object as PropType<addressType>,
+      default: {}
     }
-    onMounted(() => {
-        getList()
+  },
+  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.value === '' ? (
-          <Cell
-            class={styles.cellEntry}
-            is-link
-            v-slots={{
-              icon: () => <Icon name={iconAddress} size={38} />,
-              title: () => <span>去填写收货地址</span>
-            }}
-          ></Cell>
-        ) : (
+        {!!address?.id ? (
           <Cell
             class={styles.cell}
             is-link
@@ -42,17 +37,24 @@ export default defineComponent({
               icon: () => <Icon name={iconAddress} size={19} />,
               title: () => (
                 <div>
-                  <span class={styles.userName}>李晨</span>
-                  <span class={styles.phone}>173****3706</span>
+                  <span class={styles.userName}>{address?.name}</span>
+                  <span class={styles.phone}>{address?.phoneNumber}</span>
                 </div>
               ),
               label: () => (
-                <span class={styles.addressInfo}>
-                  湖北省武汉市武昌区水果湖楚河汉街
-                </span>
+                <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>
         )}
       </>
     )

src/views/cart/index.module.less

@@ -21,20 +21,27 @@ body {
     }
   }
 }
+
 .cartItem {
   display: flex;
   align-items: center;
   background: #fff;
   border-radius: 11px;
-  padding-left: 12px;
+  padding: 14px 12px;
   margin-bottom: 10px;
   overflow: hidden;
   :global {
+    .van-checkbox{
+      flex: 1;
+    }
+    .van-checkbox__label{
+      flex: 1;
+    }
     .van-card {
       background: #fff;
       flex: 1;
       margin: 0;
-      padding: 14px 12px;
+      padding: 0;
     }
     .van-card__title {
       font-size: 16px;
@@ -69,7 +76,10 @@ body {
 .cartConfirm {
   padding: 10px 14px;
 }
-
+.shopBox{
+  padding: 14px 12px;
+  background: #fff;
+}
 .cartConfirmBox {
   padding: 0;
   border-radius: 11px;
@@ -113,3 +123,10 @@ body {
   width: 30px;
   height: 30px;
 }
+
+.payProtocol{
+  position: fixed;
+  bottom: var(--van-submit-bar-height);
+  left: 0;
+  right: 0;
+}

src/views/cart/index.tsx

@@ -1,9 +1,11 @@
-import { defineComponent,ref } from 'vue'
+import { defineComponent, ref } from 'vue'
 import ColHeader from '@/components/col-header'
 import styles from './index.module.less'
 import { Checkbox, SubmitBar, Card, Stepper, CheckboxGroup } from 'vant'
 import request from '@/helpers/request'
-import { carts } from './cart'
+import { cartConfirm } from './cart'
+import item from '@/teacher/music/list/item'
+import ColResult from '@/components/col-result'
 
 export default defineComponent({
   name: 'cart',
@@ -70,6 +72,16 @@ export default defineComponent({
       } catch (err) {}
     },
 
+    onChecked(id: number) {
+      const items = this.selectItems as number[]
+      if (items.includes(id)) {
+        items.splice(items.indexOf(id), 1)
+      } else {
+        items.push(id)
+      }
+      this.selectItems = items as []
+    },
+
     async onDeleteCartItem() {
       const ids = this.selectItems.join(',')
       try {
@@ -83,97 +95,128 @@ export default defineComponent({
         }
       } catch (error) {}
     },
-    // 结算
-    settlement(){
-        const selectItem = this.selectItems as any
-        const list = [] as any
-        this.cartList.forEach((item: any) => {
-            if (selectItem.includes(item.id)) {
-                list.push(item)
+    //生成确认订单
+    async generateConfirmOrder() {
+      const ids: number[] = [...this.selectItems]
+      try {
+        let { code, data } = await request.post(
+          '/api-mall-portal/order/generateConfirmOrder',
+          {
+            params: {
+              cartIds: ids.join(',')
             }
-        })
-        carts.list = list
-        this.$router.push({
+          }
+        )
+        if (code === 200) {
+          cartConfirm.calcAmount = data.calcAmount
+          cartConfirm.cartPromotionItemList = data.cartPromotionItemList
+          cartConfirm.memberReceiveAddressList = data.memberReceiveAddressList
+          this.$router.push({
             path: '/cartConfirm'
-        })
+          })
+        }
+      } catch (error) {}
+    },
+    gotoShopMall() {
+      this.$router.push({
+        path: '/shopMall'
+      })
     }
   },
   render() {
     return (
       <>
-        <ColHeader
-          isBack
-          onClickRight={() => (this.isManage = !this.isManage)}
-          v-slots={{
-            right: () => (
-              <span style={{ color: '#333', fontSize: '14px' }}>
-                {this.isManage ? '完成' : '管理'}
-              </span>
-            )
-          }}
-        ></ColHeader>
-        <div class={styles.cartBox}>
-          <CheckboxGroup v-model={this.selectItems}>
-            {this.cartList.map((item: any) => (
-              <div class={styles.cartItem}>
-                <Checkbox name={item.id} />
-                <Card
-                  price={((item.price * item.quantity * 100) / 100).toFixed(2)}
-                  desc={item.productAttr}
-                  title={item.productName}
-                  thumb={item.productPic}
-                  v-slots={{
-                    num: () => (
-                      <Stepper
-                        v-model={item.quantity}
-                        onChange={() => this.setCartItem(item)}
-                        inputWidth="50px"
-                        buttonSize="24px"
-                        min={1}
-                      />
-                    )
-                  }}
-                ></Card>
-              </div>
-            ))}
-          </CheckboxGroup>
+        {!this.cartList.length ? (
+          <ColResult
+            tips="购物车空空如也"
+            buttonText="去商城逛逛"
+            onClick={() => this.gotoShopMall()}
+          ></ColResult>
+        ) : (
+          <>
+            <ColHeader
+              isBack
+              onClickRight={() => (this.isManage = !this.isManage)}
+              v-slots={{
+                right: () => (
+                  <span style={{ color: '#333', fontSize: '14px' }}>
+                    {this.isManage ? '完成' : '管理'}
+                  </span>
+                )
+              }}
+            ></ColHeader>
+            <div class={styles.cartBox}>
+              <CheckboxGroup v-model={this.selectItems}>
+                {this.cartList.map((item: any) => (
+                  <div class={styles.cartItem}>
+                    <Checkbox name={item.id}>
+                      <Card
+                        price={(
+                          (item.price * item.quantity * 100) /
+                          100
+                        ).toFixed(2)}
+                        desc={item.productAttr}
+                        title={item.productName}
+                        thumb={item.productPic}
+                        v-slots={{
+                          num: () => (
+                            <Stepper
+                              v-model={item.quantity}
+                              onClick={e => {
+                                e.stopPropagation()
+                              }}
+                              onChange={() => this.setCartItem(item)}
+                              inputWidth="50px"
+                              buttonSize="24px"
+                              min={1}
+                            />
+                          )
+                        }}
+                      ></Card>
+                    </Checkbox>
+                  </div>
+                ))}
+              </CheckboxGroup>
 
-          {this.isManage ? (
-            <div class={styles.delete}>
-              <SubmitBar
-                buttonText="删除"
-                buttonColor="var(--van-primary)"
-                disabled={this.totalPrice === 0}
-                onSubmit={() => this.onDeleteCartItem()}
-              >
-                <Checkbox
-                  modelValue={this.checkAll}
-                  onClick={value => this.setCheckAll()}
-                >
-                  全选
-                </Checkbox>
-              </SubmitBar>
+              {this.isManage ? (
+                <div class={styles.delete}>
+                  <SubmitBar
+                    buttonText="删除"
+                    buttonColor="var(--van-primary)"
+                    disabled={this.totalPrice === 0}
+                    onSubmit={() => this.onDeleteCartItem()}
+                  >
+                    <Checkbox
+                      modelValue={this.checkAll}
+                      onClick={value => this.setCheckAll()}
+                    >
+                      全选
+                    </Checkbox>
+                  </SubmitBar>
+                </div>
+              ) : (
+                <div class={styles.submit}>
+                  <SubmitBar
+                    price={this.totalPrice}
+                    buttonText={`结算(${this.len})`}
+                    buttonColor="var(--van-primary)"
+                    disabled={this.totalPrice === 0}
+                    onSubmit={() => this.generateConfirmOrder()}
+                  >
+                    <Checkbox
+                      modelValue={this.checkAll}
+                      onClick={value => this.setCheckAll()}
+                    >
+                      全选
+                    </Checkbox>
+                  </SubmitBar>
+                </div>
+              )}
             </div>
-          ) : (
-            <div class={styles.submit}>
-              <SubmitBar
-                price={this.totalPrice}
-                buttonText={`结算(${this.len})`}
-                buttonColor="var(--van-primary)"
-                disabled={this.totalPrice === 0}
-                onSubmit={() => this.settlement()}
-              >
-                <Checkbox
-                  modelValue={this.checkAll}
-                  onClick={value => this.setCheckAll()}
-                >
-                  全选
-                </Checkbox>
-              </SubmitBar>
-            </div>
-          )}
-        </div>
-        <div style={{height: 'var(--van-submit-bar-height)'}}></div>
+          </>
+        )}
+
+        <div style={{ height: 'var(--van-submit-bar-height)' }}></div>
       </>
     )
   }

src/views/shop-mall/components/shop-item/index.tsx

@@ -4,17 +4,27 @@ import styles from './index.module.less'
 
 export default defineComponent({
   name: 'shop-item',
-  setup(props) {
+  props: {
+    item: {
+      type: Object,
+      default: {
+        productPic: '',
+        productName: '',
+        productAttr: '',
+        productPrice: 0,
+        productQuantity: 0
+      }
+    }
+  },
+  setup({ item }) {
     return () => (
       <Card
         class={styles.item}
-        thumb={
-          'https://ks3-cn-beijing.ksyuncs.com/daya/1651806221498G05XBBA00SsJYXv0B5Y11qAqJb5UaB.png'
-        }
-        title={'次中音号降调JBBR-1220'}
-        desc={'型号：默认'}
-        price={((100 * 100) / 100).toFixed(2)}
-        num={'1'}
+        thumb={item.productPic}
+        title={item.productName}
+        desc={item.productAttr}
+        price={((item.productPrice * 100) / 100).toFixed(2)}
+        num={item.productQuantity}
       ></Card>
     )
   }

src/views/shop-mall/modal/add-goods-cart/index.tsx

@@ -2,6 +2,7 @@ import { moneyFormat } from '@/helpers/utils'
 import {
   Button,
   Cell,
+  Dialog,
   Image,
   Loading,
   Radio,
@@ -99,7 +100,23 @@ export default defineComponent({
         let { code, data } = await request.post('/api-mall-portal/cart/add', {
           data: body
         })
-        code === 200 && Toast('加入购物车成功')
+        if (code === 200) {
+          Dialog.confirm({
+            title: '提示',
+            message: '加入购物车成功,是否去决算?',
+            cancelButtonText: '继续购买',
+            confirmButtonText: '去结算'
+          })
+            .then(() => {
+              // on confirm
+              this.$router.push({
+                path: '/cart'
+              })
+            })
+            .catch(() => {
+              // on cancel
+            })
+        }
       } catch (error) {}
     }
   },

src/views/shop-mall/shop-order-detail/index.module.less

@@ -1,6 +1,15 @@
-
 .shopOrderDetail {
   padding: 12px 14px;
+  :global{
+    .van-cell__title{
+      font-size: 14px;
+      color: #999;
+    }
+    .van-cell__value{
+      font-size: 14px;
+      color: #333;
+    }
+  }
 }
 body {
   background: #f7f8f9;
@@ -11,25 +20,22 @@ body {
   overflow: hidden;
   margin-bottom: 12px;
   padding: 14px;
-}
-.box {
   :global {
     .van-card {
       background: transparent;
       padding: 0;
     }
-    .van-cell-group__title{
-        font-size: 16px;
-        color: #333;
-        font-weight: 500;
+    .van-cell-group__title {
+      font-size: 16px;
+      color: #333;
+      font-weight: 500;
     }
   }
 }
-.addressDetail{
-    :global{
-        .van-cell__title{
-            flex: none
-        }
+.addressDetail {
+  :global {
+    .van-cell__title {
+      flex: none;
     }
+  }
 }
-

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

@@ -1,65 +1,139 @@
+import request from '@/helpers/request'
 import { Divider, Cell, CellGroup } from 'vant'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import ShopItem from '../components/shop-item'
 import styles from './index.module.less'
+import { order, item } from './shop-detial'
 
 export default defineComponent({
   name: 'shop-order-detail',
   setup() {
+    const route = useRoute()
+    let items = ref([])
+    let order = ref({}) as any
+    const getOrderInfo = async () => {
+      const id = route.query.id
+      if (!id) return
+      try {
+        let { code, data } = await request.get(
+          `/api-mall-portal/order/detail/${id}`
+        )
+        if (code === 200) {
+          items.value = data.orderItemList
+          delete data.orderItemList
+          order.value = data
+          order.value.address_data = [
+            data.receiverProvince,
+            data.receiverCity,
+            data.receiverRegion,
+            data.receiverDetailAddress
+          ].join('')
+        }
+      } catch (error) {}
+    }
+    onMounted(() => {
+      getOrderInfo()
+    })
+
+    const orderState = {
+      0: '待付款',
+      1: '待发货',
+      2: '已发货',
+      3: '已完成',
+      4: '已关闭',
+      5: '无效订单'
+    }
+
     return () => (
-      <div class={styles.shopOrderDetail}>
-        <div class={styles.box}>
-          {[1, 3].map((item, index) => (
-            <div>
-              <ShopItem></ShopItem>
-              {index === 1 ? null : <Divider></Divider>}
+      <>
+        {items.value.length ? (
+          <div class={styles.shopOrderDetail}>
+            <div class={styles.box}>
+              {items.value.map((item: any, index: number) => (
+                <div>
+                  <ShopItem item={item}></ShopItem>
+                  {index === items.value.length - 1 ? null : (
+                    <Divider></Divider>
+                  )}
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
 
-        <div class={styles.box} style={{ padding: 0 }}>
-          <Cell border={false} title="商品价格：" value="￥5,300.00"></Cell>
-          <Cell border={false} title="优惠价格：" value="￥3.00"></Cell>
-          <Cell border={false} title="余额支付：" value="￥100.00"></Cell>
-          <Cell border={false} title="现金支付：" value="￥3000.00"></Cell>
-          <Cell border={false} title="订单状态：" value="支付成功"></Cell>
-          <Cell border={false} title="收货状态：" value="未确认收货"></Cell>
-          <Divider style={{ margin: 0 }}></Divider>
-          <Cell border={false} title="订单号：" value="28974892321"></Cell>
-          <Cell
-            border={false}
-            title="交易流水号："
-            value="23214124124234645662"
-          ></Cell>
-          <Cell
-            border={false}
-            title="创建时间："
-            value="2020-09-16 13:23:43"
-          ></Cell>
-          <Cell
-            border={false}
-            title="付款时间："
-            value="2020-09-16 13:24:12"
-          ></Cell>
-        </div>
+            <div class={styles.box} style={{ padding: 0 }}>
+              <Cell
+                border={false}
+                title="商品价格："
+                value={'¥ ' + order.value?.totalAmount}
+              ></Cell>
+              <Cell
+                border={false}
+                title="优惠价格："
+                value={'-¥ ' + order.value?.promotionAmount}
+              ></Cell>
+              <Cell
+                border={false}
+                title="订单状态："
+                value={orderState[order.value?.status]}
+              ></Cell>
+              <Cell
+                border={false}
+                title="收货状态："
+                value={order.value?.confirmStatus ? '已确认收货' : '未确认收货'}
+              ></Cell>
+              <Divider style={{ margin: 0 }}></Divider>
+              <Cell
+                border={false}
+                title="订单号："
+                value={order.value?.orderSn}
+              ></Cell>
 
-        <div class={styles.box} style={{ padding: 0 }}>
-          <CellGroup title="收货信息" border={false}>
-            <Cell border={false} title="姓名：" value="李晨"></Cell>
-            <Cell border={false} title="手机号：" value="173 9536 3706"></Cell>
-            <Cell class={styles.addressDetail}
-              border={false}
-              title="地址："
-              value="湖北省武汉市武昌区水果湖楚河汉街"
-            ></Cell>
-            <Cell
-              border={false}
-              title="运单编号："
-              value="请耐心等待发货"
-            ></Cell>
-          </CellGroup>
-        </div>
-      </div>
+              <Cell
+                border={false}
+                title="创建时间："
+                value={order.value?.createTime}
+              ></Cell>
+              <Cell
+                border={false}
+                title="付款时间："
+                value={order.value?.paymentTime}
+              ></Cell>
+            </div>
+
+            <div class={styles.box} style={{ padding: 0 }}>
+              <CellGroup title="收货信息" border={false}>
+                <Cell
+                  border={false}
+                  title="姓名："
+                  value={order.value?.receiverName}
+                ></Cell>
+                <Cell
+                  border={false}
+                  title="手机号："
+                  value={order.value?.receiverPhone}
+                ></Cell>
+                <Cell
+                  class={styles.addressDetail}
+                  border={false}
+                  title="地址："
+                  value={order.value?.address_data}
+                ></Cell>
+                <Cell
+                  class={styles.addressDetail}
+                  border={false}
+                  title="物流公司(配送方式)"
+                  value={order.value?.deliveryCompany}
+                ></Cell>
+                <Cell
+                  border={false}
+                  title="运单编号："
+                  value={order.value?.deliverySn}
+                ></Cell>
+              </CellGroup>
+            </div>
+          </div>
+        ) : null}
+      </>
     )
   }
 })

src/views/shop-mall/shop-order-detail/shop-detial.ts

@@ -0,0 +1,42 @@
+export enum payType{
+    未支付 = 0,
+    支付宝 = 1,
+    微信 = 2,
+
+}
+export interface item {
+    couponAmount: number,
+    giftGrowth: number,
+    giftIntegration: number,
+    id: number | 0,
+    integrationAmount: number,
+    orderId: number,
+    orderSn: string,
+    productAttr: string,
+    productBrand: string,
+    productCategoryId: number,
+    productId: number,
+    productName: string,
+    productPic: string,
+    productPrice: number,
+    productQuantity: number,
+    productSkuCode: string,
+    productSkuId: number,
+    productSn: string,
+    promotionAmount: number,
+    promotionName: string,
+    realAmount: number
+}
+
+export interface order{
+    createTime: string,
+    id: number,
+    memberUsername: string
+    orderItemList: item[],
+    orderSn: string,
+    payAmount: number,
+    payType: payType,
+    promotionAmount: number,
+    status: number, // 0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单
+    totalAmount: number
+}