添加地址功能：手机号需要添加正则验证

pages/mall/confirm-order.vue

@@ -1,7 +1,186 @@
-<script setup></script>
+<script setup>
+  import { onLoad } from '@dcloudio/uni-app'
+  import { getProductDetail } from '@/api/mall'
+  import { reactive, ref } from 'vue'
+  import { formatRMB } from '@/utils'
+  import { getUserAddress } from '@/api'
+  import { navigateTo } from '@/utils/router'
+
+  const viewData = ref({})
+
+  /** 单价 */
+  const priceData = ref(0)
+  const formData = reactive({
+    /** 数量 */
+    num: 1,
+    /** 规格 */
+    spec: 0,
+    /** 默认支付方式 */
+    payWay: 1,
+    /** 合计 */
+    total: 0,
+    /** 默认地址 */
+    address: '',
+    /** 可选数量 */
+    maxNum: 1
+  })
+
+  /** 获取用户地址 */
+  const userRess = async () => {
+    const res = await getUserAddress()
+    console.log(res)
+  }
+
+  /** 用户地址跳转 */
+  const onRess = () => {
+    navigateTo('/pages/address/add')
+  }
+
+  const getData = async productId => {
+    const res = await getProductDetail(productId)
+    viewData.value = res.data
+    const { id, price, stockQuantity } = res.data.skuList.find(
+      v => v.isDefault == 1
+    )
+    formData.maxNum = stockQuantity
+    formData.spec = id
+    priceData.value = price
+    formData.total = price
+  }
+
+  /** 数量切换 */
+  const onChange = i => {
+    formData.total = priceData.value * i
+  }
+
+  /** 规格选择 */
+  const onSpecChange = item => {
+    formData.spec = item.id
+    formData.num = 1
+    formData.total = item.price
+    priceData.value = item.price
+    formData.maxNum = item.stockQuantity
+  }
+
+  // 提交订单
+  const onConfirm = () => {}
+
+  onLoad(async e => {
+    await userRess()
+    await getData(e.productId)
+  })
+</script>
 
 <template>
-  <view class="mall-confirm-order">确认订单</view>
+  <view class="mall-confirm-order">
+    <!-- 地址 -->
+    <view class="address-box" @click="onRess">
+      <view class="left-name">
+        <text class="adres">重庆沙坪坝龙湖光年4号楼3009</text>
+        <view class="bottom-name">
+          <text>名字</text>
+          <text>137******</text>
+        </view>
+      </view>
+      <!-- <text class="wu-adres">
+        暂无收货地址(点击添加)
+      </text> -->
+      <image
+        src="/static/images/public/right-arrow.png"
+        mode="heightFix"
+        class="right-box"
+      ></image>
+    </view>
+
+    <!-- 商品展示 -->
+    <view class="product-box">
+      <image
+        :src="viewData.mainImage"
+        mode="scaleToFill"
+        class="left-img"
+      ></image>
+      <view class="right-content">
+        <text class="product-name">
+          {{ viewData.productName }}
+        </text>
+        <view class="line-box">
+          <view class="rmb-box">
+            <text>¥{{ viewData.maxPrice }}</text>
+            <text>¥{{ viewData.minPrice }}</text>
+          </view>
+          <!-- 添加数量 -->
+          <view class="add-num">
+            <uni-number-box
+              v-model="formData.num"
+              :min="1"
+              :max="formData.maxNum"
+              @change="onChange"
+            ></uni-number-box>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 规格 -->
+    <view class="spec-box">
+      <text class="title">规格</text>
+      <view class="spec-item">
+        <text
+          v-for="(item, index) in viewData.skuList"
+          :key="index"
+          :class="{
+            'on-text': formData.spec === item.id,
+            disabled: item.stockQuantity <= 0
+          }"
+          @click="item.stockQuantity > 0 && onSpecChange(item)"
+        >
+          {{ item.specText }}*{{ item.stockQuantity }}
+        </text>
+      </view>
+    </view>
+
+    <!-- 合计 -->
+    <view class="total-box">
+      <text class="name">合计：</text>
+      <view class="num">
+        <text>¥</text>
+        <text>{{ formatRMB(formData.total) }}</text>
+      </view>
+    </view>
+
+    <!-- 付款方式 -->
+    <view class="pay-way">
+      <view class="pay-way-item" @click="formData.payWay = 1">
+        <view class="icon">
+          <image
+            src="/static/images/public/integral.png"
+            mode="aspectFit"
+            class="left-icon"
+          ></image>
+          <text>积分</text>
+        </view>
+
+        <view class="check">
+          <image
+            v-show="formData.payWay == 1"
+            src="/static/images/public/check-to-confirm.png"
+            mode="aspectFit"
+            class="check-icon"
+          ></image>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部按钮 -->
+    <bottom-view>
+      <cb-button @click="onConfirm">确认支付</cb-button>
+    </bottom-view>
+  </view>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  page {
+    background: #f9f9f9;
+  }
+  @import './styles/confirm-order.scss';
+</style>