购物车确认订单

src/router/routes-common.ts

@@ -113,6 +113,22 @@ export const router = [
     meta: {
       title: '购物车'
     }
+  },
+  {
+    path: '/cartConfirm',
+    name: 'cartConfirm',
+    component: () => import('@/views/cart/cart-confirm'),
+    meta: {
+      title: '确认订单'
+    }
+  },
+  {
+    path: '/shopOrderDetail',
+    name: 'shopOrderDetail',
+    component: () => import('@/views/shop-mall/shop-order-detail'),
+    meta: {
+      title: '订单详情'
+    }
   }
 ]
 

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

@@ -0,0 +1,129 @@
+import { computed, ref, defineComponent, onMounted } from 'vue'
+import {
+  Card,
+  Cell,
+  CellGroup,
+  Checkbox,
+  Image,
+  Radio,
+  RadioGroup,
+  SubmitBar
+} from 'vant'
+import { carts } 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'
+export default defineComponent({
+  setup() {
+    const list = carts.list
+
+    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, '确认订单商品')
+    })
+
+    const payType = ref('wx')
+    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>
+            </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>
+                ),
+                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>
+        </SubmitBar>
+        <div style={{height: 'var(--van-submit-bar-height)'}}></div>
+      </div>
+    )
+  }
+})

src/views/cart/cart.ts

@@ -1,6 +1,5 @@
-import { reactive } from "vue";
+import { reactive,ref } from "vue";
 
-export const cart = reactive({
-    list: [] as any,
-    select: []
+export const carts = reactive({
+    list: [] as any
 })

src/views/cart/components/address/index.module.less

@@ -0,0 +1,34 @@
+.cellEntry {
+  align-items: center;
+  :global {
+    .van-badge__wrapper {
+      margin: 0;
+    }
+    .van-cell__title {
+      display: flex;
+      align-items: center;
+      margin-left: 14px;
+    }
+  }
+}
+.cell {
+  align-items: center;
+  :global {
+    .van-cell__title {
+      margin-left: 14px;
+    }
+  }
+}
+.userName{
+    color: #333;
+    font-size: 16px;
+    font-weight: 500;
+}
+.phone{
+    font-size: 16px;
+    color: #333;
+}
+.addressInfo{
+    font-size: 14px;
+    color: #666;
+}

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

@@ -0,0 +1,60 @@
+import { Cell, Icon } from 'vant'
+import { defineComponent, onMounted, ref } from 'vue'
+import styles from './index.module.less'
+import iconAddress from '@views/shop-mall/images/icon-address.png'
+import request from '@/helpers/request'
+
+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) {}
+    }
+    onMounted(() => {
+        getList()
+    })
+
+    return () => (
+      <>
+        {address.value === '' ? (
+          <Cell
+            class={styles.cellEntry}
+            is-link
+            v-slots={{
+              icon: () => <Icon name={iconAddress} size={38} />,
+              title: () => <span>去填写收货地址</span>
+            }}
+          ></Cell>
+        ) : (
+          <Cell
+            class={styles.cell}
+            is-link
+            v-slots={{
+              icon: () => <Icon name={iconAddress} size={19} />,
+              title: () => (
+                <div>
+                  <span class={styles.userName}>李晨</span>
+                  <span class={styles.phone}>173****3706</span>
+                </div>
+              ),
+              label: () => (
+                <span class={styles.addressInfo}>
+                  湖北省武汉市武昌区水果湖楚河汉街
+                </span>
+              )
+            }}
+          ></Cell>
+        )}
+      </>
+    )
+  }
+})

src/views/cart/index.module.less

@@ -1,5 +1,7 @@
 .cartBox {
   padding: 15px;
+}
+body {
   :global {
     --van-cart: #ff4e19;
     --van-stepper-button-round-theme-color: var(--van-primary);
@@ -26,6 +28,7 @@
   border-radius: 11px;
   padding-left: 12px;
   margin-bottom: 10px;
+  overflow: hidden;
   :global {
     .van-card {
       background: #fff;
@@ -63,3 +66,50 @@
     }
   }
 }
+.cartConfirm {
+  padding: 10px 14px;
+}
+
+.cartConfirmBox {
+  padding: 0;
+  border-radius: 11px;
+  overflow: hidden;
+  .cartItem {
+    margin: 0;
+    border-radius: 0;
+    padding: 0;
+  }
+  :global {
+    .van-cell__value {
+      color: #666;
+      font-weight: 500;
+    }
+  }
+}
+.price-des {
+  color: var(--van-cart);
+  font-size: 14px;
+  font-weight: 500;
+}
+.confirmBottom {
+  margin-right: auto;
+  font-size: 12px;
+}
+
+.payWrap {
+  :global {
+    .van-cell__value{
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+  .payType {
+    display: flex;
+    align-items: center;
+  }
+}
+.payIcon {
+  width: 30px;
+  height: 30px;
+}

src/views/cart/index.tsx

@@ -1,9 +1,9 @@
-import { defineComponent } 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 { cart } from './cart'
+import { carts } from './cart'
 
 export default defineComponent({
   name: 'cart',
@@ -36,7 +36,6 @@ export default defineComponent({
     }
   },
   mounted() {
-    console.log(cart)
     this.getCartList()
   },
   methods: {
@@ -87,13 +86,16 @@ export default defineComponent({
     // 结算
     settlement(){
         const selectItem = this.selectItems as any
-        const list: Array<any> = []
+        const list = [] as any
         this.cartList.forEach((item: any) => {
             if (selectItem.includes(item.id)) {
                 list.push(item)
             }
         })
-        cart.list = list
+        carts.list = list
+        this.$router.push({
+            path: '/cartConfirm'
+        })
     }
   },
   render() {
@@ -159,6 +161,7 @@ export default defineComponent({
                 buttonText={`结算(${this.len})`}
                 buttonColor="var(--van-primary)"
                 disabled={this.totalPrice === 0}
+                onSubmit={() => this.settlement()}
               >
                 <Checkbox
                   modelValue={this.checkAll}
@@ -170,6 +173,7 @@ export default defineComponent({
             </div>
           )}
         </div>
+        <div style={{height: 'var(--van-submit-bar-height)'}}></div>
       </>
     )
   }

src/views/shop-mall/components/shop-item/index.module.less

@@ -0,0 +1,43 @@
+body {
+  :global {
+    --van-cart: #ff4e19;
+  }
+}
+.item {
+  :global {
+    .van-card {
+      background: #fff;
+      flex: 1;
+      margin: 0;
+      padding: 14px 12px;
+    }
+    .van-card__title {
+      font-size: 16px;
+      color: #333;
+      font-weight: 400;
+      line-height: 22px;
+      max-height: 44px;
+    }
+    .van-card__desc {
+      font-size: 14px;
+      color: #999;
+      font-weight: 400;
+      line-height: 20px;
+      max-height: 40px;
+      white-space: break-spaces;
+    }
+    .van-card__thumb {
+      width: auto;
+      height: auto;
+    }
+    .van-image {
+      width: 100px !important;
+      height: 100px !important;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .van-card__price {
+      color: var(--van-cart);
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+import { Card } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'shop-item',
+  setup(props) {
+    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'}
+      ></Card>
+    )
+  }
+})