111
This commit is contained in:
1 parent
983674cfc9
commit
96a9bdfec8
18 files changed
+611
-117
No files matched your search
@@ -0,0 +1,76 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, withDefaults, defineProps, defineEmits } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
|
||||
import { hooks, router } from "@@/index"
|
||||
import { merchantApi } from "@@/api"
|
||||
|
||||
import ProductRow from './product-row.vue'
|
||||
import ProductTotal from './product-total.vue'
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "submit", "doContainer", "add", "remove"])
|
||||
|
||||
export type Props = {
|
||||
modelValue: any,
|
||||
carList: any,
|
||||
totPrice: number,
|
||||
totCount: number,
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: false,
|
||||
carList: [],
|
||||
totPrice: 0,
|
||||
totCount: 0,
|
||||
});
|
||||
|
||||
const state = reactive<any>({
|
||||
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
|
||||
});
|
||||
onShow(() => {
|
||||
|
||||
})
|
||||
|
||||
const doClose = () => {
|
||||
emit("update:modelValue")
|
||||
}
|
||||
|
||||
const doPay = () => {
|
||||
emit("submit")
|
||||
}
|
||||
|
||||
const doContainer = () => {
|
||||
emit("doContainer")
|
||||
}
|
||||
|
||||
const getHeight = () => {
|
||||
const { bottom } = uni.getSystemInfoSync().safeAreaInsets!;
|
||||
return `-${bottom + 16}px`
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<tm-drawer z-index="100" v-model:show="props.modelValue" showFooter title="购物车" position="bottom" size="50%"
|
||||
@close="doClose">
|
||||
<product-row v-for="(v, i) in props.carList" mode="car" :key="v.id" v-model="v.productCount" :pic="v.productPic"
|
||||
:count="v.productCount" :name="v.name" :price="v.productPrice" :marketPrice="v.marketPrice"
|
||||
:salesCount="v.salesCount" :stock="v.stock" @add="() => emit('add', v)" @remove="emit('remove', v)" />
|
||||
<template #footer>
|
||||
<view class="car z-200 p-x-30rpx p-y-30rpx bg-white" :style="{ marginBottom: getHeight() }">
|
||||
<product-total :totPrice="props.totPrice" :totCount="props.totCount" @submit="doPay"
|
||||
@doContainer="doContainer" />
|
||||
</view>
|
||||
</template>
|
||||
</tm-drawer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.car {
|
||||
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { ref, reactive, withDefaults, defineProps, defineEmits } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
|
||||
import { hooks, router } from "@@/index"
|
||||
import { merchantApi } from "@@/api"
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "add", "remove"])
|
||||
|
||||
export type Props = {
|
||||
mode: "default" | "car",
|
||||
productId: number | null,
|
||||
modelValue: number,
|
||||
pic: string,
|
||||
name: string,
|
||||
price: number,
|
||||
marketPrice: number,
|
||||
salesCount: number,
|
||||
stock: number,
|
||||
count: number,
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
mode: "default",
|
||||
productId: null,
|
||||
modelValue: 0,
|
||||
pic: '',
|
||||
name: '',
|
||||
price: 0,
|
||||
marketPrice: 0,
|
||||
salesCount: 0,
|
||||
stock: 0,
|
||||
count: 0,
|
||||
});
|
||||
|
||||
const state = reactive<any>({
|
||||
|
||||
})
|
||||
@@ -16,12 +43,63 @@ onShow(() => {
|
||||
|
||||
})
|
||||
|
||||
const add = () => {
|
||||
if (props.modelValue >= 99) {
|
||||
emit('update:modelValue', 99);
|
||||
return
|
||||
}
|
||||
emit('update:modelValue', props.modelValue + 1)
|
||||
emit('add')
|
||||
}
|
||||
|
||||
const remove = () => {
|
||||
if (props.modelValue < 0) {
|
||||
emit('update:modelValue', 0);
|
||||
return
|
||||
}
|
||||
emit('update:modelValue', props.modelValue - 1)
|
||||
emit('remove')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<view class="flex-row items-start card p-x-15rpx p-y-25rpx m-b-20rpx"
|
||||
@tap="props.productId && router.jump('/pages/merchant/product-detail', { id: props.productId })">
|
||||
<image v-if="props.mode == 'default'" class=" size-180rpx rounded-12rpx" :src="props.pic" mode="aspectFill" />
|
||||
<image v-if="props.mode == 'car'" class=" size-120rpx rounded-12rpx" :src="props.pic" mode="aspectFill" />
|
||||
|
||||
<view class="flex-1 m-l-20rpx">
|
||||
<view class="sub-text-28 show-line">{{ props.name }}</view>
|
||||
<view class="m-t-10rpx flex-row items-center">
|
||||
<view class="second-text-32 color-#f63a36!">
|
||||
¥{{ hooks.useMoney(props.price) }}
|
||||
</view>
|
||||
<view v-if="props.mode == 'default'" class="m-l-20rpx second-text-24 line-through">
|
||||
¥{{ hooks.useMoney(props.marketPrice) }}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="props.mode == 'car'" class="m-t-10rpx second-text-28">
|
||||
x{{ props.count }}
|
||||
</view>
|
||||
<view v-if="props.mode == 'default'" class="flex-row items-center MT 10rpx">
|
||||
<view class="second-text-24">{{ hooks.useFormatNum("库存", "", props.stock) }}</view>
|
||||
<view class="w-1px h-20rpx m-x-5rpx bg-#c4c4c4" />
|
||||
<view class="second-text-24">{{ hooks.useFormatNum("销量", "", props.salesCount) }}</view>
|
||||
</view>
|
||||
<view class="flex-row items-center justify-end m-t-20rpx">
|
||||
<view class="flex-row-center size-40rpx rounded-full border-1px border-solid border-color-#0094ff"
|
||||
@tap.stop="remove">
|
||||
<view class="iconfont icon-a--" />
|
||||
</view>
|
||||
<view class="sub-text-28 m-x-20rpx">{{ props.modelValue }}</view>
|
||||
<view class="flex-row-center size-40rpx rounded-full bg-#0094ff" @tap.stop="add">
|
||||
<view class="font-size-40rpx iconfont icon-a-" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, withDefaults, defineProps, defineEmits } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
|
||||
import { hooks, router } from "@@/index"
|
||||
import { merchantApi } from "@@/api"
|
||||
|
||||
const emit = defineEmits(["submit", "doContainer"])
|
||||
|
||||
export type Props = {
|
||||
totPrice: number,
|
||||
totCount: number,
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
totPrice: 0,
|
||||
totCount: 0,
|
||||
});
|
||||
|
||||
const state = reactive<any>({
|
||||
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
|
||||
});
|
||||
onShow(() => {
|
||||
|
||||
})
|
||||
|
||||
const doPay = () => {
|
||||
emit("submit")
|
||||
}
|
||||
|
||||
const doContainer = () => {
|
||||
emit("doContainer")
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<view class="flex-row items-center justify-between" @tap="doContainer">
|
||||
<view class="flex-row-center">
|
||||
<view class="flex-row-center size-80rpx rounded-full bg-#0094ff">
|
||||
<view class="color-white! iconfont icon-biaoqianlanicon_gouwuche-xuanzhong" />
|
||||
</view>
|
||||
<view class="flex-col m-l-30rpx">
|
||||
<view class="second-text-36 color-#f63a36!">¥ {{ hooks.useMoney(props.totPrice) }}</view>
|
||||
<view class="sub-text-28">共{{ props.totCount }}件</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-#0094ff p-x-30rpx p-y-20rpx text-center rounded-40rpx sub-text-30 color-white!"
|
||||
@tap.stop="doPay">
|
||||
购买
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
+307
-79
@@ -1,30 +1,44 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { ref, reactive, nextTick } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import { isEmpty } from "radash"
|
||||
|
||||
import { hooks } from "@@/index"
|
||||
import { merchantApi, foodApi } from "@@/api"
|
||||
import { hooks, router } from "@@/index"
|
||||
import { merchantApi, foodApi, payApi } from "@@/api"
|
||||
|
||||
import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue"
|
||||
import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue"
|
||||
|
||||
import ProductRow from './components/product-row.vue'
|
||||
|
||||
import ProductCar from './components/product-car.vue'
|
||||
import ProductTotal from './components/product-total.vue'
|
||||
|
||||
const data = {
|
||||
|
||||
}
|
||||
const state = reactive<any>({
|
||||
detailId: null,
|
||||
systemType: 3,
|
||||
totPrice: 0,
|
||||
totCount: 0,
|
||||
currentClassifyIndex: 0,
|
||||
showCarDialog: false,
|
||||
|
||||
detail: {},
|
||||
carList: [],
|
||||
classifyList: [],
|
||||
shopList: [],
|
||||
})
|
||||
|
||||
onLoad((options: any) => {
|
||||
if (!isEmpty(options.id)) {
|
||||
state.detailId = options.id
|
||||
getDetail()
|
||||
}
|
||||
});
|
||||
onShow(() => {
|
||||
|
||||
getDetail()
|
||||
getShopCar()
|
||||
getClassify()
|
||||
})
|
||||
|
||||
const getDetail = async () => {
|
||||
@@ -34,99 +48,313 @@ const getDetail = async () => {
|
||||
}
|
||||
|
||||
const getShopCar = async () => {
|
||||
const _pa = {}
|
||||
const _pa = { merchantId: state.detailId }
|
||||
const { data } = await foodApi.getShopCar(_pa)
|
||||
}
|
||||
console.log(data, "data");
|
||||
|
||||
const updateShopCar = async () => {
|
||||
const _pa = {}
|
||||
const { data } = await foodApi.updateShopCar(_pa)
|
||||
state.carList = data
|
||||
state.totPrice = state.carList
|
||||
.map(v => v.totalPrice)
|
||||
.reduce((pre, next) => pre + next, 0);
|
||||
state.totCount = state.carList
|
||||
.map(v => v.productCount)
|
||||
.reduce((pre, next) => pre + next, 0);
|
||||
}
|
||||
|
||||
const getClassify = async () => {
|
||||
const _pa = {}
|
||||
const _pa = { systemType: state.systemType, merchantId: state.detailId }
|
||||
const { data } = await foodApi.classify(_pa)
|
||||
state.classifyList = data
|
||||
if (!isEmpty(state.classifyList)) {
|
||||
getPorduct()
|
||||
}
|
||||
}
|
||||
|
||||
const updateShopCar = async () => {
|
||||
if (isEmpty(state.carList)) return
|
||||
const list = state.carList
|
||||
.filter(v => v.productCount && v.productCount > 0)
|
||||
.map(v => {
|
||||
return {
|
||||
productCount: v.productCount,
|
||||
productId: v.productId
|
||||
}
|
||||
})
|
||||
if (isEmpty(list)) return
|
||||
const _pa = { merchantId: state.detailId, list: list }
|
||||
const { data, code }: any = await foodApi.updateShopCar(_pa)
|
||||
if (code == 0) await getShopCar()
|
||||
}
|
||||
|
||||
const getPorduct = async () => {
|
||||
const _pa = {}
|
||||
const target = state.classifyList[state.currentClassifyIndex]
|
||||
if (isEmpty(target)) return
|
||||
const _pa = {
|
||||
systemType: state.systemType,
|
||||
merchantId: state.detailId,
|
||||
categoryId: target.id,
|
||||
}
|
||||
const { data } = await foodApi.product(_pa)
|
||||
state.shopList = data
|
||||
state.shopList.forEach(i => {
|
||||
if (i && i.foodSPURespVOList && i.foodSPURespVOList.length) {
|
||||
i.foodSPURespVOList.forEach(j => {
|
||||
j.productCount = 0
|
||||
j.productId = j.id
|
||||
})
|
||||
}
|
||||
})
|
||||
const shopList = [...state.shopList]
|
||||
if (state.carList && state.carList.length) {
|
||||
for (const i of shopList) {
|
||||
if (i && i.foodSPURespVOList && i.foodSPURespVOList.length) {
|
||||
for (const j of i.foodSPURespVOList) {
|
||||
for (const v of state.carList) {
|
||||
if (j.id == v.productId) {
|
||||
j.productCount = v.productCount
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
state.shopList = shopList;
|
||||
}
|
||||
|
||||
const doAdd = async (item: any) => {
|
||||
chentProductCount(item)
|
||||
}
|
||||
|
||||
const remove = async (item: any) => {
|
||||
chentProductCount(item)
|
||||
}
|
||||
|
||||
const chentProductCount = async (item: any) => {
|
||||
const target = state.carList.find(v => v.productId == item.productId)
|
||||
const targetIndex = state.carList.findIndex(v => v.productId == item.productId)
|
||||
if (target) {
|
||||
state.carList[targetIndex].productCount = item.productCount
|
||||
} else {
|
||||
state.carList.push({ ...item, productId: item.id })
|
||||
}
|
||||
nextTick(() => updateShopCar())
|
||||
}
|
||||
|
||||
const doClassify = (i: any) => {
|
||||
state.currentClassifyIndex = i
|
||||
getClassify()
|
||||
}
|
||||
|
||||
const doVisibleCar = async () => {
|
||||
state.showCarDialog = true
|
||||
}
|
||||
|
||||
const doPay = async () => {
|
||||
try {
|
||||
if (isEmpty(state.carList)) {
|
||||
uni.showToast({ title: '请至少购买一件商品', icon: "none" })
|
||||
return
|
||||
}
|
||||
uni.showLoading({ title: '支付中...', mask: false });
|
||||
const _createtPa = { carParentId: state.carList[0].parentCarId }
|
||||
const { data: createData, code: createCode }: any = await payApi.createHardwareOrder(_createtPa)
|
||||
if (createCode != 0) throw new Error()
|
||||
const _submitPa = { orderId: createData }
|
||||
const { data: submitData, code: submitCode }: any = await payApi.submitHardwareOrder(_submitPa)
|
||||
if (submitCode != 0) throw new Error()
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '支付成功', icon: "none" });
|
||||
router.jump("/pages/order/detail", { id: createData }, 3)
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
const getHeight = () => {
|
||||
const rpx = 480
|
||||
return `calc(100vh - ${uni.upx2px(rpx)}px)`
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<crud-layout bg="/static/page/blue-bg.png">
|
||||
<!-- start 简介 start -->
|
||||
<view class="h-10rpx" />
|
||||
<view flex-row card p-20rpx>
|
||||
<image class="w-160rpx h-160rpx rounded-12rpx" :src="state.detail.logo" mode="aspectFill" />
|
||||
<view class="flex-1 flex-col m-l-20rpx">
|
||||
<view class="flex-row items-center justify-between">
|
||||
<view class="flex-row-center sub-text-36">
|
||||
<text>{{ state.detail.name }}</text>
|
||||
<crud-layout mainIsScroll tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
|
||||
<tm-sticky>
|
||||
<!-- start 轮播 start -->
|
||||
<z-swiper>
|
||||
<z-swiper-item v-for="(v, i) in state.detail.swiper?.split(',')" :key="i">
|
||||
<image class="w-100vw h-400rpx" :src="v" mode="aspectFill" />
|
||||
</z-swiper-item>
|
||||
</z-swiper>
|
||||
<!-- end 轮播 end -->
|
||||
<tm-sticky-header>
|
||||
<view class="m-x-30rpx">
|
||||
<!-- start 简介 start -->
|
||||
<view class="h-15rpx" />
|
||||
<view flex-row card p-20rpx>
|
||||
<image class="w-160rpx h-160rpx rounded-12rpx" :src="state.detail.logo" mode="aspectFill" />
|
||||
<view class="flex-1 flex-col m-l-20rpx">
|
||||
<view class="flex-row items-center justify-between">
|
||||
<view class="flex-row-center sub-text-36">
|
||||
<text>{{ state.detail.name }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<tm-tag size="s">{{ state.detail.deptStr }}</tm-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-t-10rpx second-text-28">
|
||||
<text>营业时间</text>
|
||||
<text class="m-l-10rpx">
|
||||
{{ hooks.useTime(state.detail.applianceStartTime, "{h}:{i}") }}
|
||||
~
|
||||
{{ hooks.useTime(state.detail.applianceEndTime, "{h}:{i}") }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="m-t-10rpx second-text-28">
|
||||
<text>食堂地址</text>
|
||||
<text class="m-l-10rpx">{{ state.detail.addressDes }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<tm-tag size="s">{{ state.detail.deptStr }}</tm-tag>
|
||||
<!-- end 简介 end -->
|
||||
<!-- start 功能 start -->
|
||||
<view class="h-15rpx" />
|
||||
<view class="flex-row items-center justify-between card p-y-20rpx p-x-30rpx">
|
||||
<view class="flex-row-center">
|
||||
<view class="flex-row-center w-50rpx h-50rpx bg-#167aff rounded-full">
|
||||
<text class="font-size-28rpx! color-white iconfont icon-dianhua" />
|
||||
</view>
|
||||
<text class="m-l-20rpx sub-text-30">联系食堂</text>
|
||||
</view>
|
||||
<view class="w-1px h-30rpx bg-#c4c4c4" />
|
||||
<view class="flex-row-center">
|
||||
<view class="flex-row-center w-50rpx h-50rpx bg-#167aff rounded-full">
|
||||
<text class="font-size-28rpx! color-white iconfont icon-yuding" />
|
||||
</view>
|
||||
<text class="m-l-20rpx sub-text-28">包厢预定</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end 功能 end -->
|
||||
</view>
|
||||
<view class="m-t-10rpx second-text-28">
|
||||
<text>营业时间</text>
|
||||
<text class="m-l-10rpx">
|
||||
{{ hooks.useTime(state.detail.applianceStartTime, "{h}:{i}") }}
|
||||
~
|
||||
{{ hooks.useTime(state.detail.applianceEndTime, "{h}:{i}") }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="m-t-10rpx second-text-28">
|
||||
<text>食堂地址</text>
|
||||
<text class="m-l-10rpx">{{ state.detail.addressDes }}</text>
|
||||
</view>
|
||||
</tm-sticky-header>
|
||||
|
||||
<!-- start 商品 start -->
|
||||
<view class="h-15rpx" />
|
||||
<view class="flex-row">
|
||||
<scroll-view scroll-y :style="{ height: getHeight() }"
|
||||
class="menu w-200rpx h-full p-l-12rpx bg-#f6f6f6">
|
||||
<view class="menu_item flex-row-center" v-for="( v, i ) in state.classifyList " :key="v.id"
|
||||
:class="[{ 'menu_item_active': i == state.currentClassifyIndex }]" @tap="doClassify(i)">
|
||||
<view class="menu_item_title show-line">
|
||||
{{ v.name }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view scroll-y :style="{ height: getHeight() }" class="flex-1">
|
||||
<view v-for="( cV, cI ) in state.shopList " :key="cI">
|
||||
<view class="flex-row-center m-y-20rpx">
|
||||
<view class="w-25rpx h-1px bg-#d2d2d2" />
|
||||
<text class="p-x-15rpx second-text-28">
|
||||
{{ cV.categoryName }}
|
||||
</text>
|
||||
<view class="w-25rpx h-1px bg-#d2d2d2" />
|
||||
</view>
|
||||
<view class="m-x-15rpx">
|
||||
<product-row v-for="( pV, pI ) in cV.foodSPURespVOList " :key="pV.id"
|
||||
v-model="pV.productCount" :productId="pV.productId" :pic="pV.picUrl" :name="pV.name"
|
||||
:price="pV.price" :marketPrice="pV.marketPrice" :salesCount="pV.salesCount"
|
||||
:stock="pV.stock" @add="doAdd(pV)" @remove="remove(pV)" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end 简介 end -->
|
||||
<!-- start 功能 start -->
|
||||
<view class="h-10rpx" />
|
||||
<view class="flex-row items-center justify-between card p-y-20rpx p-x-30rpx">
|
||||
<view class="flex-row-center">
|
||||
<view class="flex-row-center w-50rpx h-50rpx bg-#167aff rounded-full">
|
||||
<text class="font-size-28rpx! color-white iconfont icon-dianhua" />
|
||||
</view>
|
||||
<text class="m-l-20rpx sub-text-30">联系食堂</text>
|
||||
</view>
|
||||
<view class="w-1px h-30rpx bg-#515151" />
|
||||
<view class="flex-row-center">
|
||||
<view class="flex-row-center w-50rpx h-50rpx bg-#167aff rounded-full">
|
||||
<text class="font-size-28rpx! color-white iconfont icon-yuding" />
|
||||
</view>
|
||||
<text class="m-l-20rpx sub-text-28">包厢预定</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end 功能 end -->
|
||||
|
||||
<!-- start 轮播 start -->
|
||||
<!-- <view class="h-10rpx" /> -->
|
||||
<!-- end 轮播 end -->
|
||||
|
||||
<!-- start 商品 start -->
|
||||
<view class="h-10rpx" />
|
||||
|
||||
<view>
|
||||
<view>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</tm-sticky>
|
||||
<!-- end 商品 end -->
|
||||
<template #main-bottom>
|
||||
<view class="car z-200 p-x-30rpx p-y-30rpx bg-white">
|
||||
<product-total :totPrice="state.totPrice" :totCount="state.totCount" @submit="doPay"
|
||||
@doContainer="doVisibleCar" />
|
||||
</view>
|
||||
</template>
|
||||
</crud-layout>
|
||||
<product-car v-model="state.showCarDialog" :carList="state.carList" :totPrice="state.totPrice"
|
||||
:totCount="state.totCount" @add="doAdd" @remove="remove" />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.layout_main>scroll-view {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
&_item {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
position: relative;
|
||||
transition: all linear 0.2s;
|
||||
|
||||
&_title {
|
||||
width: 100%;
|
||||
line-height: 32rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
margin-left: 28rpx;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 64rpx;
|
||||
height: 12rpx;
|
||||
background: linear-gradient(90deg, #0094ff, #e9f5fe) !important;
|
||||
position: absolute;
|
||||
left: -64rpx;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transition: all linear 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&.menu_item_active {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -20rpx;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
right: 0;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
|
||||
}
|
||||
|
||||
.menu_item_title {
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.car {
|
||||
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
@@ -10,16 +10,10 @@ import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue"
|
||||
import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue"
|
||||
|
||||
const data = {
|
||||
list: [
|
||||
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg',
|
||||
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
|
||||
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe3.jpg',
|
||||
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe4.jpg',
|
||||
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe5.jpg',
|
||||
]
|
||||
}
|
||||
const state = reactive<any>({
|
||||
detailId: null,
|
||||
detail: null,
|
||||
})
|
||||
|
||||
onLoad((options: any) => {
|
||||
@@ -34,29 +28,40 @@ onShow(() => {
|
||||
const getDetail = async () => {
|
||||
const _pa = { id: state.detailId }
|
||||
const { data } = await productApi.get(_pa)
|
||||
state.detail = data
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<crud-layout title="订单详情" tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
|
||||
<z-swiper v-model="data.list">
|
||||
<z-swiper-item v-for="(v, i) in data.list" :key="i">
|
||||
<image class="w-100vw" :src="v" mode="aspectFill" />
|
||||
<z-swiper>
|
||||
<z-swiper-item v-for="(v, i) in state.detail.sliderPicUrls" :key="i">
|
||||
<image class="w-100vw" :src="v" mode="widthFix" />
|
||||
</z-swiper-item>
|
||||
</z-swiper>
|
||||
<view class="p-x-15rpx">
|
||||
<view class="flex-row items-center justify-between card p-y-20rpx p-x-30rpx">
|
||||
<view></view>
|
||||
<view></view>
|
||||
<view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
|
||||
<view class="flex-row items-center justify-between">
|
||||
<view class="flex-row items-center">
|
||||
<view class="second-text-46 color-#f63a36!">¥{{ state.detail.price }}</view>
|
||||
<view class="m-l-20rpx second-text-28 line-through">¥{{ state.detail.marketPrice }}</view>
|
||||
</view>
|
||||
<view class="second-text-26">已售{{ state.detail.salesCount }}</view>
|
||||
</view>
|
||||
<view class="flex-col m-t-15rpx">
|
||||
<view class="sub-text-32">{{ state.detail.name }}</view>
|
||||
<view class="m-t-15rpx second-text-26">{{ state.detail.introduction }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="h-15rpx" />
|
||||
<view class="flex-row items-center justify-between card p-y-20rpx p-x-30rpx">
|
||||
<view class="prefix_title">评价</view>
|
||||
</view>
|
||||
<view class="h-15rpx" />
|
||||
<view class="flex-row items-center justify-between card p-y-20rpx p-x-30rpx">
|
||||
<view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
|
||||
<view class="prefix_title">详情</view>
|
||||
<view class="m-t-15rpx" v-html="state.detail.description"></view>
|
||||
</view>
|
||||
</view>
|
||||
</crud-layout>
|
||||
|
||||
@@ -66,7 +66,7 @@ const getShopCarList = async () => {
|
||||
<view>部门</view>
|
||||
<view>{{ state.detail.deptName }}</view>
|
||||
</view>
|
||||
<view class="m-t-15rpx h-1px bg-#515151 bg-opacity-5" />
|
||||
<view class="m-t-15rpx h-1px bg-#c4c4c4 bg-opacity-5" />
|
||||
<view class="info_cell">
|
||||
<view>订单号</view>
|
||||
<view>{{ state.detail.id }}</view>
|
||||
@@ -100,7 +100,7 @@ const getShopCarList = async () => {
|
||||
<view class="sub-text-32">¥ {{ hooks.useMoney(v.totalPrice) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-y-15rpx h-1px bg-#515151 bg-opacity-5" />
|
||||
<view class="m-y-15rpx h-1px bg-#c4c4c4 bg-opacity-5" />
|
||||
<view class="flex-row items-center justify-between">
|
||||
<view class="sub-text-32">实付款</view>
|
||||
<view class="flex-row items-end">
|
||||
@@ -123,7 +123,7 @@ const getShopCarList = async () => {
|
||||
}
|
||||
|
||||
&>view {
|
||||
color: #515151;
|
||||
color: #c4c4c4;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 1.4em;
|
||||
|
||||
@@ -6,7 +6,9 @@ import { hooks, router } from "@@/index"
|
||||
import { merchantApi } from "@@/api"
|
||||
|
||||
const state = reactive<any>({
|
||||
|
||||
pa: {
|
||||
pagesize: 10
|
||||
}
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
|
||||
@@ -9,7 +9,7 @@ import { merchantApi, userApi, walletApi } from "@@/api"
|
||||
const data = {
|
||||
serviceList: [
|
||||
{ text: '钱包管理', icon: '/static/icon/service_3.png', router: '/pages/wallet/list' },
|
||||
{ text: '车牌管理', icon: '/static/icon/service_2.png', router: '/pages/user/diff-price' },
|
||||
// { text: '车牌管理', icon: '/static/icon/service_2.png', router: '/pages/user/diff-price' },
|
||||
{ text: '外来人员就餐', icon: '/static/icon/service_1.png', router: '/pages/apply/foreign-list' },
|
||||
{ text: '跨单位就餐', icon: '/static/icon/service_1.png', router: '/pages/apply/stride-list' },
|
||||
]
|
||||
@@ -93,7 +93,6 @@ const doLogout = async () => {
|
||||
</view>
|
||||
|
||||
<view class="m-t-40rpx rounded-20rpx shadow-main p-30rpx p-b-40rpx bg-white!">
|
||||
<view class="main-text-30 m-b-35rpx">我的服务</view>
|
||||
<view class="service_item flex-row items-center justify-between" v-for="(v, i) in data.serviceList" :key="i"
|
||||
@tap="router.jump(v.router)">
|
||||
<view class="flex-row-center">
|
||||
|
||||
@@ -67,7 +67,7 @@ const doToDetail = (v: any) => {
|
||||
<view class="flex-row items-center justify-between">
|
||||
<view class="flex-row items-center">
|
||||
<view class="main-text-28">{{ v.merchantStr }}</view>
|
||||
<view class="m-l-15rpx color-#515151 font-size-26rpx! iconfont icon-youjiantou" />
|
||||
<view class="m-l-15rpx color-#c4c4c4 font-size-26rpx! iconfont icon-youjiantou" />
|
||||
</view>
|
||||
<tm-tag v-if="v.orderStatus == 1" color="info" size="xs">未支付</tm-tag>
|
||||
<tm-tag v-if="v.orderStatus == 5" color="success" size="xs">待核销</tm-tag>
|
||||
@@ -123,8 +123,8 @@ const doToDetail = (v: any) => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.botder_btn {
|
||||
border: 1px solid #515151;
|
||||
color: #515151;
|
||||
border: 1px solid #c4c4c4;
|
||||
color: #c4c4c4;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
border-radius: 10rpx;
|
||||
|
||||
@@ -17,4 +17,20 @@ export default {
|
||||
data,
|
||||
});
|
||||
},
|
||||
// 创建硬件订单
|
||||
createHardwareOrder: (data) => {
|
||||
return request({
|
||||
url: "/hardware/order/create-order",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
},
|
||||
// 结算
|
||||
submitHardwareOrder: (data) => {
|
||||
return request({
|
||||
url: "/hardware/order/submit-order",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
},
|
||||
};
|
||||
@@ -3,7 +3,7 @@ import request from "@/sheep/utils/request";
|
||||
export default {
|
||||
get: (params) => {
|
||||
return request({
|
||||
url: "/product/spu/get-detail",
|
||||
url: "/onlinefood/spu/get-detail",
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
|
||||
@@ -34,7 +34,6 @@ export const usePage = (
|
||||
const setPage = async (list: Array<any>) => {
|
||||
if (ref == null) return;
|
||||
state.list.totalList = await ref.value.complete(list);
|
||||
console.log(state.list, "list");
|
||||
};
|
||||
const startPage = async (
|
||||
page: number,
|
||||
|
||||
@@ -4,6 +4,27 @@ export const useMoney = (num) => {
|
||||
return (parsedNumber / 100.0).toFixed(1);
|
||||
};
|
||||
|
||||
export function useFormatNum(
|
||||
prefix: string,
|
||||
type: "exact" | string,
|
||||
num: number
|
||||
) {
|
||||
num = num || 0;
|
||||
if (type === "exact") {
|
||||
return prefix + num;
|
||||
}
|
||||
if (num < 10) {
|
||||
return `${prefix}≤10`;
|
||||
}
|
||||
// 情况三:大于 10,除第一位外,其它位都显示为0
|
||||
// 例如:100 - 199 显示为 100+
|
||||
// 9000 - 9999 显示为 9000+
|
||||
const numStr = num.toString();
|
||||
const first = numStr[0];
|
||||
const other = "0".repeat(numStr.length - 1);
|
||||
return `${prefix}${first}${other}+`;
|
||||
}
|
||||
|
||||
export function useTime(time, pattern) {
|
||||
if (arguments.length === 0 || !time) {
|
||||
return null;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@font-face {
|
||||
font-family: "iconfont";
|
||||
/* Project id 4740692 */
|
||||
src: url('//at.alicdn.com/t/c/font_4740692_4h93hfstead.woff2?t=1731328362704') format('woff2'),
|
||||
url('//at.alicdn.com/t/c/font_4740692_4h93hfstead.woff?t=1731328362704') format('woff'),
|
||||
url('//at.alicdn.com/t/c/font_4740692_4h93hfstead.ttf?t=1731328362704') format('truetype');
|
||||
src: url('//at.alicdn.com/t/c/font_4740692_o39uyvhjlur.woff2?t=1731367840461') format('woff2'),
|
||||
url('//at.alicdn.com/t/c/font_4740692_o39uyvhjlur.woff?t=1731367840461') format('woff'),
|
||||
url('//at.alicdn.com/t/c/font_4740692_o39uyvhjlur.ttf?t=1731367840461') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@@ -14,6 +14,18 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-biaoqianlanicon_gouwuche-xuanzhong:before {
|
||||
content: "\e61c";
|
||||
}
|
||||
|
||||
.icon-a-:before {
|
||||
content: "\e651";
|
||||
}
|
||||
|
||||
.icon-a--:before {
|
||||
content: "\e652";
|
||||
}
|
||||
|
||||
.icon-dianhua:before {
|
||||
content: "\e614";
|
||||
}
|
||||
|
||||
@@ -588,7 +588,6 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.tmDrawerFooter {
|
||||
width: 100%;
|
||||
padding: 0 24rpx 0px 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted, watch, PropType } from "vue";
|
||||
import { computed, ref, onMounted, watch, type PropType } from "vue";
|
||||
import { arrayNumberValid, getUid, arrayNumberValidByStyleMP, arrayNumberValidByStyleBorderColor, arrayNumberValidByStyleBorderStyle, covetUniNumber, linearValid, getUnit } from "../../libs/tool";
|
||||
import { useTmConfig } from "../../libs/config";
|
||||
import { getDefaultColor, getDefaultColorObj, getOutlineColorObj, getTextColorObj, getThinColorObj } from "../../libs/colors";
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted, watch, PropType } from "vue";
|
||||
import { computed, ref, onMounted, watch, type PropType } from "vue";
|
||||
import { arrayNumberValid, getUid, arrayNumberValidByStyleMP, arrayNumberValidByStyleBorderColor, arrayNumberValidByStyleBorderStyle, covetUniNumber, linearValid, getUnit } from "../../libs/tool";
|
||||
import { useTmConfig } from "../../libs/config";
|
||||
import { getDefaultColor, getDefaultColorObj, getOutlineColorObj, getTextColorObj, getThinColorObj } from "../../libs/colors";
|
||||
@@ -28,15 +28,15 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.tmSticky{
|
||||
.tmSticky {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="tmSticky">
|
||||
<!--
|
||||
<view class="tmSticky">
|
||||
<!--
|
||||
@slot 正常布局内容,如果想粘性头,tm-sticky-header组件必须是直接子节点组件
|
||||
-->
|
||||
<slot></slot>
|
||||
</view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
+1
-1
@@ -63,7 +63,7 @@ export default {
|
||||
([, d]) => ({
|
||||
"font-size": `${d}rpx`,
|
||||
"font-weight": 500,
|
||||
color: "#515151",
|
||||
color: "#c4c4c4",
|
||||
"line-height": `1.4em`,
|
||||
}),
|
||||
],
|
||||
|
||||
Reference in new issue
Block a user