187 lines
4.5 KiB
Vue
187 lines
4.5 KiB
Vue
<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 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>
|
||
page {
|
||
background: #f9f9f9;
|
||
}
|
||
@import './styles/confirm-order.scss';
|
||
</style>
|