90 lines
3.2 KiB
Vue
90 lines
3.2 KiB
Vue
<template>
|
||
<crud-layout title="购物车" mainIsScroll tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
|
||
<view v-if="cartStore.totCount > 0" class="flex-row card p-x-15rpx p-y-25rpx m-t-20rpx" v-for="(v, i) in cartStore.cart" :key="i">
|
||
<image class="size-160rpx rounded-12rpx" :src="filePath(v.picUrl)" mode="aspectFill" />
|
||
<view class="flex-1 m-l-20rpx">
|
||
<view class="sub-text-28 show-line">{{ v.productName }}</view>
|
||
<view class="second-text-26 show-line">单位：{{ v.unit }}</view>
|
||
<view class="flex-row justify-between items-center">
|
||
<view class="second-text-30"> ¥{{ hooks.useMoney(v.productPrice) }} </view>
|
||
<view class="second-text-30">x {{ v.productCount }}</view>
|
||
</view>
|
||
<view class="flex-row justify-between items-center">
|
||
<view class="second-text-32 c-red!"> ¥{{ hooks.useMoney(v.totalPrice) }} </view>
|
||
<view class="flex-row justify-between items-center">
|
||
<view
|
||
class="flex-row-center size-40rpx rounded-full border-1px border-solid border-color-#0094ff"
|
||
@tap.stop="remove(v.productId)"
|
||
>
|
||
<view class="iconfont icon-a--" />
|
||
</view>
|
||
<view class="sub-text-28 m-x-20rpx">{{ v.productCount }}</view>
|
||
<view class="flex-row-center size-40rpx rounded-full bg-#0094ff" @tap.stop="add(v.productId)">
|
||
<view class="font-size-40rpx color-white iconfont icon-a-" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex-col justify-center items-center pt-300rpx" v-else>
|
||
<image src="@/static/page/cart_empty.png" class="w-350rpx h-350rpx" />
|
||
<text class="sub-text-32 font-bold">购物车空空如也</text>
|
||
</view>
|
||
|
||
<template #main-bottom>
|
||
<view class="z-200 p-x-30rpx p-y-30rpx bg-white">
|
||
<product-total :totPrice="cartStore.totPrice" :totCount="cartStore.totCount" @doContainer="" @submit="doBuy" />
|
||
</view>
|
||
</template>
|
||
</crud-layout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import ProductTotal from "./components/product-total.vue"
|
||
import { isEmpty } from "radash"
|
||
import { useCartStore } from "@/sheep/stores/cart"
|
||
import { payApi } from "@/sheep/api"
|
||
import { hooks, router } from "@/sheep"
|
||
import { filePath } from "@/sheep/utils/file"
|
||
|
||
const cartStore = useCartStore()
|
||
|
||
// 点击提交订单
|
||
const doBuy = async () => {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "是否确定购买",
|
||
confirmColor: "#0094ff",
|
||
success: async (res) => {
|
||
if (!res.confirm) return
|
||
submitPay()
|
||
},
|
||
})
|
||
}
|
||
|
||
// 提交订单
|
||
const submitPay = async () => {
|
||
try {
|
||
if (isEmpty(cartStore.cart)) return uni.showToast({ title: "请至少购买一件商品", icon: "none" })
|
||
|
||
uni.showLoading({ title: "支付中...", mask: false })
|
||
const { data, code }: any = await payApi.createSupermarketOrder({ carParentId: cartStore.cart[0].parentCarId, hardType: "SUPERMARKET" })
|
||
if (code != 0) throw new Error()
|
||
uni.showToast({ title: "支付成功", icon: "none" })
|
||
router.jump("/pages/tabbar/order")
|
||
} catch (error) {
|
||
console.error(error)
|
||
} finally {
|
||
uni.hideLoading()
|
||
}
|
||
}
|
||
|
||
const add = async (productId: string) => {
|
||
await cartStore.addProductCount(productId)
|
||
}
|
||
const remove = async (productId: string) => {
|
||
await cartStore.removeProductCount(productId)
|
||
}
|
||
</script>
|