zianxin/pj_h5_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://codeup.aliyun.com/bsdtec/biz-mobile-react-cloud

Browse Source 
# Conflicts:
#	.env
This commit is contained in:
zjf committed 2025-06-11 14:00:23 +08:00
2 parents 8eee595c01 8d555180b8
commit 1d853244ee
17 files changed
+654 -1129
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.env
+39
View File
@@ -0,0 +1,39 @@
#是否是TOC应用
VITE_IS_TOC=true
#是否是H5模式
VITE_IS_H5=true
#是否是微服务架构
VITE_IS_MICRO=true
# 后端请求前缀
VITE_API_URL = /api
# 前端加密密钥
VITE_PWD_ENC_KEY='pigxpigxpigxpigx'
# OAUTH2 APP模式客户端信息
VITE_OAUTH2_APP_CLIENT='mini:mini'
# --------------------------- 开发环境 api地址 ----------------------------------
# VITE_APP_DEV_SERVICE = https://stgl.pj.gov.cn/api # 域名线上
#VITE_APP_DEV_SERVICE = http://59.202.170.152:81/api # 信创线上
VITE_APP_DEV_SERVICE = http://192.168.101.139:9999 # 邓-本地
# VITE_APP_DEV_SERVICE = http://127.0.0.1:9999 # 邓-本地
# VITE_APP_DEV_SERVICE = http://123.156.230.15:8089/api # 测试线上
# --------------------------- 开发环境 图片访问基础地址 ---------------------------
# VITE_IMAGE_DEV_PATH = https://stgl.pj.gov.cn/api # 域名线上
#VITE_IMAGE_DEV_PATH = http://59.202.170.152:81/api # 信创线上
VITE_IMAGE_DEV_PATH = http://192.168.101.139:9999 # 邓-本地
# VITE_IMAGE_DEV_PATH = http://127.0.0.1:9999
# VITE_IMAGE_DEV_PATH = http://123.156.230.15:8089/api # 测试线上
# --------------------------- 生产环境 api地址 ----------------------------------
VITE_APP_PROD_SERVICE = https://stgl.pj.gov.cn/api # 域名线上
#VITE_APP_PROD_SERVICE = http://59.202.170.152:81/api # 信创线上
#VITE_APP_PROD_SERVICE = http://123.156.228.134:48080/app-api
# --------------------------- 生产环境 图片访问基础地址 ---------------------------
VITE_APP_PROD_IMAGE = https://stgl.pj.gov.cn/api # 域名线上
src/App.vue
+14 -9
View File
@@ -2,11 +2,6 @@
import { isDevEnv, getLaunchParam } from "@/sheep/utils/app"
import { getAppInfo } from "@@/utils/app"
// import { onLaunch, onShow, onHide } from "@dcloudio/uni-app"
// onLaunch(() => {})
// onShow(() => {})
// onHide(() => {})
interface TabbarItem {
pagePath: string
text: string
@@ -33,6 +28,14 @@ const tabbar: TabbarItem[] = [
launchParam: ["selfMerchant"],
auth: ["user"],
},
{
pagePath: "pages/tabbar/onlineShop",
text: "在线商城",
iconPath: "/static/tabbar/online-shop.png",
selectedIconPath: "/static/tabbar/online-shop-select.png",
launchParam: ["onlineShop"],
auth: ["user"],
},
{
pagePath: "pages/tabbar/coopMerchant",
text: "合作商家",
@@ -54,7 +57,7 @@ const tabbar: TabbarItem[] = [
text: "订单",
iconPath: "/static/tabbar/order.png",
selectedIconPath: "/static/tabbar/order-select.png",
launchParam: ["canteen", "selfMerchant", "coopMerchant"],
launchParam: ["canteen", "selfMerchant", "onlineShop", "coopMerchant"],
auth: ["user"],
},
{
@@ -94,7 +97,7 @@ const tabbar: TabbarItem[] = [
text: "我的",
iconPath: "/static/tabbar/my.png",
selectedIconPath: "/static/tabbar/my-select.png",
launchParam: ["canteen", "selfMerchant", "coopMerchant"],
launchParam: ["canteen", "selfMerchant", "onlineShop", "coopMerchant"],
auth: ["user", "merchant", "doorAdmin"],
},
]
@@ -149,6 +152,9 @@ export default {
case "selfMerchant":
uni.switchTab({ url: "/pages/tabbar/selfMerchant" })
break
case "onlineShop":
uni.switchTab({ url: "/pages/tabbar/onlineShop" })
break
case "coopMerchant":
uni.switchTab({ url: "/pages/tabbar/coopMerchant" })
break
@@ -169,6 +175,7 @@ export default {
return uni.switchTab({ url: "/pages/tabbar/individualOrder" })
case "user":
if (launchParam === "selfMerchant") return uni.switchTab({ url: "/pages/tabbar/selfMerchant" })
if (launchParam === "onlineShop") return uni.reLaunch({ url: "/pages/tabbar/onlineShop" })
if (launchParam === "coopMerchant") return uni.reLaunch({ url: "/pages/tabbar/coopMerchant" })
return
case "doorAdmin":
@@ -179,8 +186,6 @@ export default {
}
}
},
onShow() {},
onHide() {},
methods: {
async _initTabbar() {
src/pages.json
+15 -2
View File
@@ -23,6 +23,13 @@
"disableScroll": true
}
},
{
"path": "pages/tabbar/onlineShop",
"style": {
"navigationBarTitleText": "在线商城",
"disableScroll": true
}
},
{
"path": "pages/tabbar/coopMerchant",
"style": {
@@ -483,6 +490,12 @@
"iconPath": "",
"selectedIconPath": ""
},
{
"pagePath": "pages/tabbar/onlineShop",
"text": "",
"iconPath": "",
"selectedIconPath": ""
},
{
"pagePath": "pages/tabbar/coopMerchant",
"text": "",
@@ -521,7 +534,7 @@
},
{
"pagePath": "pages/tabbar/message",
"text": "通知公告",
"text": "",
"iconPath": "",
"selectedIconPath": ""
},
@@ -540,4 +553,4 @@
// }
]
}
}
}
src/pages/canteen/detail.vue
+1 -1
View File
@@ -156,7 +156,7 @@ const updateFoodCart = async () => {
}
// 打开购物车
const doVisibleCart = async () => (state.showCartDialog = true)
const doVisibleCart = () => (state.showCartDialog = true)
// 购买 打开预订时间段选择对话框
const doBuy = async () => {
src/pages/shop/components/product-car.vue → src/pages/shop/components/product-cart.vue
+27 -28
View File
@@ -6,27 +6,28 @@
title="购物车"
position="bottom"
size="60%"
bgColor="#ECF4F9"
@close="doClose"
>
<product-row
mode="car"
v-for="v in carList"
mode="cart"
v-for="v in cartList"
:key="v.id"
:productId="v.productId"
:spuId="v.spuId"
:merchantId="v.merchantId"
:picUrl="filePath(v.productPic)"
:productName="v.productName"
:productCount="v.productCount"
:productId="v.productId"
:productName="v.productName"
:picUrl="filePath(v.productPic)"
:productPrice="v.productPrice"
:spec="v.spec"
:spuId="v.spuId"
:totalPrice="v.totalPrice"
:unit="v.unit"
:spec="v.spec"
@add="(v) => emit('add', v)"
@remove="(v) => emit('remove', v)"
/>
<template #footer>
<view class="car z-200 p-x-30rpx p-y-30rpx bg-white" :style="{ marginBottom: getHeight() }">
<view class="z-200 p-x-30rpx p-y-30rpx bg-white" :style="{ marginBottom: getHeight() }">
<product-total :totPrice="props.totPrice" :totCount="props.totCount" @doPay="doPay" />
</view>
</template>
@@ -38,28 +39,26 @@ import { filePath } from "@/sheep/utils/file"
import ProductRow from "./product-row.vue"
import ProductTotal from "./product-total.vue"
const emit = defineEmits(["update:modelValue", "doPay", "add", "remove"])
const emit = defineEmits(["update:modelValue", "add", "remove", "submit"])
export type Props = {
modelValue: any
carList: any
totPrice: number
totCount: number
}
const props = withDefaults(defineProps<Props>(), {
modelValue: false,
carList: [],
totPrice: 0,
totCount: 0,
})
const props = withDefaults(
defineProps<{
modelValue: any
cartList: any
totPrice: number
totCount: number
}>(),
{
modelValue: false,
cartList: [],
totPrice: 0,
totCount: 0,
},
)
const doClose = () => {
emit("update:modelValue", false)
}
const doClose = () => emit("update:modelValue", false)
const doPay = () => {
emit("doPay")
}
const doPay = () => emit("submit")
const getHeight = () => {
const { bottom } = uni.getSystemInfoSync().safeAreaInsets!
src/pages/shop/components/product-row.vue
+45 -49
View File
@@ -1,46 +1,45 @@
<template>
<view
:class="[props.mode == 'car' ? 'car_border' : '']"
class="flex-row items-start card p-x-15rpx p-y-25rpx m-b-20rpx"
@tap="
props.productId && props.mode === 'default' && router.jump('/pages/shop/product-detail', { id: props.productId })
"
@tap="props.productId && props.mode == 'default' && router.jump('/pages/shop/product-detail', { id: props.productId })"
>
<image class="size-140rpx rounded-12rpx" :src="props.picUrl" mode="aspectFill" />
<image class="size-160rpx rounded-12rpx" :src="props.picUrl" mode="aspectFill" />
<view class="flex-1 m-l-20rpx">
<view class="sub-text-28 show-line">{{ props.productName }}</view>
<view class="sub-text-24 show-line">规格：{{ "" + props.spec + props.unit }}</view>
<view class="m-t-10rpx flex-row items-center">
<!-- <view class="second-text-32 color-red!"> ¥{{ hooks.useMoney(props.price) }} </view> -->
<!-- <view class="m-l-20rpx second-text-24 line-through"> ¥{{ hooks.useMoney(props.marketPrice) }} </view> -->
</view>
<view v-if="props.mode == 'car'" class="flex-row justify-between items-center">
<view class="m-t-10rpx second-text-32 c-red!"> ￥{{ (Number(productPrice) / 100).toFixed(2) }} </view>
<view class="m-t-10rpx second-text-28">x{{ productCount }}</view>
<view v-if="mode === 'default'" class="flex-row items-center">
<view class="second-text-32 c-red!"> ¥{{ hooks.useMoney(props.promotionPrice) }} </view>
<view class="m-l-20rpx second-text-26 line-through"> ¥{{ hooks.useMoney(props.retailPrice) }} </view>
</view>
<view class="second-text-26 show-line">单位：{{ props.unit }}</view>
<view v-if="mode === 'default'" class="flex-row items-center">
<view class="second-text-24">{{ hooks.useFormatNum("库存", "", props.stock) }}</view>
<view class="w-1px h-20rpx m-x-5rpx bg-#999" />
<view class="w-1px h-20rpx m-x-5rpx bg-#999 mx-1" />
<view class="second-text-24">{{ hooks.useFormatNum("销量", "", props.salesCount) }}</view>
</view>
<view v-if="mode == 'cart'" class="flex-row justify-between items-center">
<view class="second-text-30"> ¥{{ hooks.useMoney(productPrice) }} </view>
<view class="second-text-30">x {{ productCount }}</view>
</view>
<view
v-if="mode === 'default'"
class="second-text-24 w-200rpx py-1 border-1px border-solid border-#0094ff bg-#0094ff c-white! border-rd-8 text-center mt-3 float-right"
@tap.stop="handleClickAddToCar"
@tap.stop="handleClickAddToCart"
>
加入购物车
</view>
<view v-if="mode === 'car'" 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">{{ productCount }}</view>
<view class="flex-row-center size-40rpx rounded-full bg-#0094ff" @tap.stop="add">
<view class="font-size-40rpx color-white iconfont icon-a-" />
<view v-if="mode == 'cart'" class="flex-row justify-between items-center">
<view class="second-text-32 c-red!"> ¥{{ hooks.useMoney(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">
<view class="iconfont icon-a--" />
</view>
<view class="sub-text-28 m-x-20rpx">{{ productCount }}</view>
<view class="flex-row-center size-40rpx rounded-full bg-#0094ff" @tap.stop="add">
<view class="font-size-40rpx color-white iconfont icon-a-" />
</view>
</view>
</view>
</view>
@@ -50,49 +49,53 @@
<script setup lang="ts">
import { hooks, router } from "@@/index"
const emit = defineEmits(["onClickAddToCar", "add", "remove"])
const emit = defineEmits(["onClickAddToCart", "add", "remove"])
export type Props = {
mode?: "default" | "car"
mode?: "default" | "cart"
productId: string
spuId?: string
merchantId: string
merchantId?: string
picUrl: string
productName: string
productCount?: number
productPrice?: number
salesCount?: number
stock?: number
spec?: string
unit?: string
onClickAddToCar?: () => void
spec?: string
retailPrice?: number
promotionPrice?: number
productCount?: number
productPrice?: number
spuId?: string
totalPrice?: string | number
}
const props = withDefaults(defineProps<Props>(), {
mode: "default",
productId: "",
spuId: "",
merchantId: "",
picUrl: "",
productName: "",
productCount: 0,
productPrice: 0,
salesCount: 0,
stock: 0,
spec: "",
unit: "",
spec: "",
retailPrice: 0,
promotionPrice: 0,
productCount: 0,
productPrice: 0,
spuId: "",
totalPrice: 0,
})
const handleClickAddToCar = () => {
if (props.productId) {
emit("onClickAddToCar", { ...props })
}
const handleClickAddToCart = () => {
if (props.productId) emit("onClickAddToCart", { ...props })
}
const add = () => {
if (props.productCount + 1 >= 99) {
return
}
// emit("add", { productId: props.productId, productCount: props.productCount + 1 })
emit("add", { productId: props.productId, productCount: props.productCount, spuId: props.spuId })
}
@@ -100,13 +103,6 @@ const remove = () => {
if (props.productCount - 1 < 0) {
return
}
// emit("remove", { productId: props.productId, productCount: props.productCount - 1 })
emit("remove", { productId: props.productId, productCount: props.productCount, spuId: props.spuId })
}
</script>
<style lang="scss" scoped>
.car_border {
border: 1px solid #f2f2f2;
}
</style>
src/pages/shop/components/product-sku.vue
+83 -180
View File
@@ -5,70 +5,61 @@
showFooter
title="加入购物车"
position="bottom"
size="60%"
size="70%"
bgColor="#ECF4F9"
:duration="100"
@close="doClose"
>
<view class="px-20rpx">
<scroll-view scroll-y="true" class="max-h-7xl" @touchmove.stop>
<!-- 商品信息 -->
<view class="m-3 flex-row">
<image class="w-120rpx h-120rpx" :src="filePath(state.goodsDetail.picUrl)" mode="aspectFill" />
<view class="w-100% ml-3 flex flex-col justify-between">
<view class="sub-text-30 font-600! ws-nowrap text-ellipsis overflow-hidden">
{{ state.goodsDetail.productName }}
</view>
<view class="flex justify-between items-center">
<view class="flex-col justify-between items-left">
<view class="sub-text-26 line-through">售价￥{{ retailPrice }}</view>
<view class="sub-text-32 c-red!">促销价￥{{ promotionPrice }}</view>
</view>
<view class="flex-col justify-between items-left">
<view class="sub-text-28">库存{{ state.goodsDetail.stock }}</view>
<view class="sub-text-28">已售{{ state.goodsDetail.salesCount }}</view>
</view>
<scroll-view scroll-y="true" @touchmove.stop>
<!-- 商品信息 -->
<view class="flex-col card p-y-20rpx p-x-30rpx mb-20rpx">
<view class="prefix_title mb-15rpx">商品信息</view>
<view class="flex-row items-center">
<image class="w-120rpx h-120rpx bg-#0094ff" :src="filePath(state.goodsDetail.picUrl)" mode="aspectFill" />
<view class="ml-3 flex flex-col justify-between">
<view class="text-30 ws-nowrap text-ellipsis overflow-hidden">{{ state.goodsDetail.productName }}</view>
<view class="flex items-center">
<view class="second-text-30 c-red!">促销 ¥{{ state.selectedSku.promotionPrice }}</view>
<view class="m-l-20rpx second-text-28 line-through">原价 ¥{{ state.selectedSku.retailPrice }}</view>
</view>
<view class="second-text-26">内装数量：{{ state.selectedSku.packageNum }}</view>
</view>
</view>
</view>
<!-- 规格 -->
<!-- <view v-for="property in skuData" :key="property.id"> -->
<view class="sub-text-32 font-600! my-2">规格</view>
<!-- 包装单位 -->
<view class="flex-col card p-y-20rpx p-x-30rpx mb-20rpx">
<view class="prefix_title mb-15rpx">包装单位</view>
<view class="flex flex-wrap">
<button
class="text-center border-rd-4 c-black ml-0 mr-2 mb-2 border-1 border-solid border-blueGray sub-text-34"
v-for="value in state.goodsDetail?.skuList"
:key="value.id"
:style="{ 'background-color': state.selectedSku.id === value.id ? '#0094ff' : '#F4F4F4' }"
@click="onSelectSku(value)"
<view
class="text-center rounded-2 mr-4 mb-2 py-2 px-3 text-28 duration-200"
v-for="v in state.goodsDetail?.skuList"
:key="v.id"
:style="{ 'background-color': state.selectedSku.id === v.id ? '#0094ff66' : '#F0F0F0' }"
@click="onSelectSku(v)"
>
{{ value.spec + value.unit }}
</button>
</view>
<!-- </view> -->
<!-- 数量 -->
<view class="sub-text-32 font-600! my-2">购买数量</view>
<view class="flex-row items-center justify-end m-t-20rpx">
<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="handleNumRemove"
>
<view class="iconfont icon-a--" />
</view>
<view class="sub-text-28 m-x-20rpx">{{ String(state.goodsCount).padStart(2, "0") }}</view>
<view class="flex-row-center size-40rpx rounded-full bg-#0094ff" @tap.stop="handleNumAdd">
<view class="font-size-40rpx color-white iconfont icon-a-" />
</view>
{{ v.spec + " " + v.unit }}
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 购买数量 -->
<view class="flex-col card p-y-20rpx p-x-30rpx mb-20rpx">
<view class="prefix_title mb-15rpx">购买数量</view>
<view class="flex-row items-center justify-end">
<view class="flex-row-center size-40rpx rounded-full border-1px border-solid border-color-#0094ff" @tap.stop="handleNumRemove">
<view class="iconfont icon-a--" />
</view>
<view class="sub-text-28 m-x-20rpx">{{ String(state.goodsCount).padStart(2, "0") }}</view>
<view class="flex-row-center size-40rpx rounded-full bg-#0094ff" @tap.stop="handleNumAdd">
<view class="font-size-40rpx color-white iconfont icon-a-" />
</view>
</view>
</view>
</scroll-view>
<template #footer>
<button class="mx-12 border-rd-8 bg-#0094ff sub-text-30 py-2 c-white!" @tap="handleClickAddToCar">
加入购物车
</button>
<button class="mx-12 border-rd-8 bg-#0094ff sub-text-30 py-2 c-white!" @tap="handleSkuAddToCar">加入购物车</button>
</template>
</tm-drawer>
</template>
@@ -77,38 +68,37 @@
import { shopApi } from "@/sheep/api"
import { filePath } from "@/sheep/utils/file"
import { computed, reactive, watch } from "vue"
import { hooks } from "@@/index"
const emit = defineEmits(["update:modelValue", "onAddToCar"])
const emit = defineEmits(["update:modelValue", "onSkuAddToCart"])
const props = withDefaults(
defineProps<{
modelValue: boolean
productData: any
}>(),
{
modelValue: false,
productData: {},
},
)
export type Props = {
modelValue: boolean
productData: any
onAddToCar?: () => void
}
const props = withDefaults(defineProps<Props>(), {
modelValue: false,
productData: {},
})
const state = reactive<any>({
goodsCount: 1,
selectedSku: {},
selectedSku: {
retailPrice: 0,
promotionPrice: 0,
packageNum: 0,
},
goodsDetail: {},
})
// 售价
const retailPrice = computed(() =>
state.selectedSku.retailPrice ? Number(state.selectedSku.retailPrice) * Number(state.goodsCount) : 0,
)
// 优惠价
const promotionPrice = computed(() =>
state.selectedSku.promotionPrice ? Number(state.selectedSku.promotionPrice) * Number(state.goodsCount) : 0,
)
watch(
() => props.modelValue,
async (newValue) => {
if (newValue) {
// 获取商品详情
const { data } = await shopApi.getSupermarketSpuDetail({ id: props.productData.productId })
const { data } = await shopApi.getSupermarketSpuDetail({ id: props.productData.id })
state.goodsDetail = data
if (data.skuList.length > 0) {
state.selectedSku = state.goodsDetail.skuList[0]
@@ -117,122 +107,37 @@ watch(
},
)
// SKU 列表
// const skuList = computed(() => {
// let skuPrices = props.goodsInfo.skus;
// for (let price of skuPrices) {
// price.value_id_array = price.properties.map((item) => item.valueId);
// }
// return skuPrices;
// });
// 当前所选属性下，获取所有有库存的 SKU 们
// function getCanUseSkuList() {
// let newSkus = [];
// for (let sku of skuList.value) {
// if (sku.stock <= 0) {
// continue;
// }
// let isOk = true;
// state.currentPropertyArray.forEach((propertyId) => {
// // propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
// if (propertyId.toString() !== "" && sku.value_id_array.indexOf(propertyId) < 0) {
// isOk = false;
// }
// });
// if (isOk) {
// newSkus.push(sku);
// }
// }
// return newSkus;
// }
// 选择规格
function onSelectSku(skuItem: any) {
// const index = state.currentPropertyArray.findIndex((item: any) => item.id === skuItem.id);
// if (index === -1) {
// 选择规格/取消选择规格
const onSelectSku = (skuItem: any) => {
if (state.selectedSku.id === skuItem.id) {
state.selectedSku = {}
} else {
state.selectedSku = skuItem
return
}
// } else {
// state.currentPropertyArray.splice(index, 1);
// }
// 清空已选择
// let isChecked = true; // 选中 or 取消选中
// if (state.currentPropertyArray[propertyId] !== undefined && state.currentPropertyArray[propertyId] === valueId) {
// 点击已被选中的，删除并填充 ''
// isChecked = false;
// state.currentPropertyArray.splice(propertyId, 1, "");
// } else {
// 选中
// state.currentPropertyArray[propertyId] = valueId;
// }
// 选中的 property 大类
// let choosePropertyId: any = [];
// state.currentPropertyArray.forEach((currentPropertyId: string) => {
// if (currentPropertyId !== "") {
// // currentPropertyId 为空是反选 填充的
// choosePropertyId.push(currentPropertyId);
// }
// });
// 当前所选 property 下，所有可以选择的 SKU 们
// let newSkuList = getCanUseSkuList();
// 判断所有 property 大类是否选择完成
// if (choosePropertyId.length === skuData.length && newSkuList.length) {
// newSkuList[0].name = state.selectedSku.goods_num || 1;
// state.selectedSku = newSkuList[0];
// } else {
// state.selectedSku = {};
// }
// if (choosePropertyId.length === skuData.value.length) {
// state.selectedSku = state.currentPropertyArray;
// }
// 改变 property 禁用状态
// changeDisabled(isChecked, propertyId, valueId);
state.selectedSku = skuItem
}
// 加数量
const handleNumAdd = () => {
if (state.goodsCount >= state.goodsDetail.stock) {
return
}
if (state.goodsCount >= state.goodsDetail.stock) return uni.showToast({ title: "库存不足", icon: "none" })
state.goodsCount += 1
}
// 减数量
const handleNumRemove = () => {
if (state.goodsCount <= 1) {
return
}
if (state.goodsCount <= 1) return
state.goodsCount -= 1
}
// 点击加入购物车
const handleClickAddToCar = async () => {
// 检查规格选择
if (!state.selectedSku.id) {
uni.showToast({
title: "请选择规格",
icon: "none",
duration: 1000,
})
return
}
// 点击sku加入到购物车
const handleSkuAddToCar = async () => {
// 检查包装单位选择
if (!state.selectedSku.id) return uni.showToast({ title: "请选择包装单位", icon: "none" })
// 检查库存
try {
uni.showLoading({ title: "加载中", mask: true })
const { code }: any = await shopApi.checkSpuStock({
spuId: state.goodsDetail.id,
incrCount: state.goodsCount,
})
const { code }: any = await shopApi.checkSpuStock({ spuId: state.goodsDetail.id, incrCount: state.goodsCount })
if (code != 0) {
return uni.showToast({
title: "库存不足",
icon: "none",
duration: 1000,
})
return uni.showToast({ title: "库存不足", icon: "none" })
}
} catch (e) {
console.error(e)
@@ -240,22 +145,20 @@ const handleClickAddToCar = async () => {
uni.hideLoading()
}
// 检查库存
if (state.goodsDetail.stock === 0) {
uni.showToast({
title: "库存不足",
icon: "none",
duration: 1000,
})
return
}
emit("onAddToCar", { ...state.goodsDetail, productCount: state.goodsCount, productId: state.selectedSku.id })
if (state.goodsDetail.stock === 0) return uni.showToast({ title: "库存不足", icon: "none" })
emit("onSkuAddToCart", { ...state.goodsDetail, productCount: state.goodsCount, productId: state.selectedSku.id })
}
const doClose = () => {
emit("update:modelValue", false)
state.goodsCount = 1
state.selectedSku = {}
state.selectedSku = {
retailPrice: 0,
promotionPrice: 0,
packageNum: 0,
}
state.goodsDetail = {}
}
</script>
src/pages/shop/components/product-total.vue
+24 -24
View File
@@ -1,37 +1,37 @@
<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>
<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>
<script setup lang="ts">
import { hooks } from "@@/index";
import { hooks } from "@@/index"
const emit = defineEmits(["doPay", "doContainer"]);
const emit = defineEmits(["submit", "doContainer"])
export type Props = {
totPrice: number;
totCount: number;
};
totPrice: number
totCount: number
}
const props = withDefaults(defineProps<Props>(), {
totPrice: 0,
totCount: 0,
});
totPrice: 0,
totCount: 0,
})
const doPay = () => {
emit("doPay");
};
emit("submit")
}
const doContainer = () => {
emit("doContainer");
};
emit("doContainer")
}
</script>
src/pages/shop/components/select-sku.vue
-447
View File
@@ -1,447 +0,0 @@
<template>
<!-- 规格弹窗 -->
<su-popup :show="show" round="10" @close="emits('close')">
<!-- SKU 信息 -->
<view class="ss-modal-box bg-white ss-flex-col">
<view class="modal-header ss-flex ss-col-center">
<view class="header-left ss-m-r-30">
<image class="sku-image" :src="state.selectedSku.picUrl || goodsInfo.picUrl" mode="aspectFill" />
</view>
<view class="header-right ss-flex-col ss-row-between ss-flex-1">
<view class="goods-title ss-line-2">{{ goodsInfo.name }}</view>
<view class="header-right-bottom ss-flex ss-col-center ss-row-between">
<view class="ss-flex">
<view class="price-text">
{{ fen2yuan(state.selectedSku.promotionPrice || state.selectedSku.price || goodsInfo.price) }}
<text v-if="state.selectedSku.promotionType > 0">
<text class="iconBox" v-if="state.selectedSku.promotionType === 4"> 限时优惠 </text>
<text class="iconBox" v-else-if="state.selectedSku.promotionType === 6"> 会员价 </text>
<text class="origin-price-text">
{{ fen2yuan(state.selectedSku.price) }}
</text>
</text>
</view>
</view>
<view class="stock-text ss-m-l-20">
{{ formatStock("exact", state.selectedSku.stock || goodsInfo.stock) }}
</view>
</view>
</view>
</view>
<!-- 属性选择 -->
<view class="modal-content ss-flex-1">
<scroll-view scroll-y="true" class="modal-content-scroll" @touchmove.stop>
<view class="sku-item ss-m-b-20" v-for="property in propertyList" :key="property.id">
<view class="label-text ss-m-b-20">{{ property.name }}</view>
<view class="ss-flex ss-col-center ss-flex-wrap">
<button
class="ss-reset-button spec-btn"
v-for="value in property.values"
:class="[
{
'ui-BG-Main-Gradient': state.currentPropertyArray[property.id] === value.id,
},
{
'disabled-btn': value.disabled === true,
},
]"
:key="value.id"
:disabled="value.disabled === true"
@tap="onSelectSku(property.id, value.id)"
>
{{ value.name }}
</button>
</view>
</view>
<view class="buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40">
<view class="label-text">购买数量</view>
<su-number-box
:min="1"
:max="state.selectedSku.stock"
:step="1"
v-model="state.selectedSku.goods_num"
@change="onNumberChange($event)"
/>
</view>
</scroll-view>
</view>
<!-- 操作区 -->
<view class="modal-footer border-top">
<view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center">
<button class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart">加入购物车</button>
<button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
</view>
</view>
</view>
</su-popup>
</template>
<script setup>
import { computed, reactive, watch } from "vue"
import sheep from "@/sheep"
import { formatStock, convertProductPropertyList, fen2yuan } from "@/sheep/hooks/useGoods"
const emits = defineEmits(["change", "addCart", "buy", "close"])
const props = defineProps({
goodsInfo: {
type: Object,
default() {},
},
show: {
type: Boolean,
default: false,
},
})
const state = reactive({
selectedSku: {}, // 选中的 SKU
currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
})
const propertyList = convertProductPropertyList(props.goodsInfo.skus)
// SKU 列表
const skuList = computed(() => {
let skuPrices = props.goodsInfo.skus
for (let price of skuPrices) {
price.value_id_array = price.properties.map((item) => item.valueId)
}
return skuPrices
})
watch(
() => state.selectedSku,
(newVal) => {
emits("change", newVal)
},
{
immediate: true, // 立即执行
deep: true, // 深度监听
},
)
// 输入框改变数量
function onNumberChange(e) {
if (e === 0) return
if (state.selectedSku.goods_num === e) return
state.selectedSku.goods_num = e
}
// 加入购物车
function onAddCart() {
if (state.selectedSku.id <= 0) {
sheep.$helper.toast("请选择规格")
return
}
if (state.selectedSku.stock <= 0) {
sheep.$helper.toast("库存不足")
return
}
emits("addCart", state.selectedSku)
}
// 立即购买
function onBuy() {
if (state.selectedSku.id <= 0) {
sheep.$helper.toast("请选择规格")
return
}
if (state.selectedSku.stock <= 0) {
sheep.$helper.toast("库存不足")
return
}
emits("buy", state.selectedSku)
}
// 改变禁用状态：计算每个 property 属性值的按钮，是否禁用
function changeDisabled(isChecked = false, propertyId = 0, valueId = 0) {
let newSkus = [] // 所有可以选择的 sku 数组
if (isChecked) {
// 情况一：选中 property
// 获得当前点击选中 property 的、所有可用 SKU
for (let price of skuList.value) {
if (price.stock <= 0) {
continue
}
if (price.value_id_array.indexOf(valueId) >= 0) {
newSkus.push(price)
}
}
} else {
// 情况二：取消选中 property
// 当前所选 property 下，所有可以选择的 SKU
newSkus = getCanUseSkuList()
}
// 所有存在并且有库存未选择的 SKU 的 value 属性值 id
let noChooseValueIds = []
for (let price of newSkus) {
noChooseValueIds = noChooseValueIds.concat(price.value_id_array)
}
noChooseValueIds = Array.from(new Set(noChooseValueIds)) // 去重
if (isChecked) {
// 去除当前选中的 value 属性值 id
let index = noChooseValueIds.indexOf(valueId)
noChooseValueIds.splice(index, 1)
} else {
// 循环去除当前已选择的 value 属性值 id
state.currentPropertyArray.forEach((currentPropertyId) => {
if (currentPropertyId.toString() !== "") {
return
}
// currentPropertyId 为空是反选 填充的
let index = noChooseValueIds.indexOf(currentPropertyId)
if (index >= 0) {
// currentPropertyId 存在于 noChooseValueIds
noChooseValueIds.splice(index, 1)
}
})
}
// 当前已选择的 property 数组
let choosePropertyIds = []
if (!isChecked) {
// 当前已选择的 property
state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {
if (currentPropertyId !== "") {
// currentPropertyId 为空是反选 填充的
choosePropertyIds.push(currentValueId)
}
})
} else {
// 当前点击选择的 property
choosePropertyIds = [propertyId]
}
for (let propertyIndex in propertyList) {
// 当前点击的 property、或者取消选择时候，已选中的 property 不进行处理
if (choosePropertyIds.indexOf(propertyList[propertyIndex]["id"]) >= 0) {
continue
}
// 如果当前 property id 不存在于有库存的 SKU 中，则禁用
for (let valueIndex in propertyList[propertyIndex]["values"]) {
propertyList[propertyIndex]["values"][valueIndex]["disabled"] =
noChooseValueIds.indexOf(propertyList[propertyIndex]["values"][valueIndex]["id"]) < 0 // true 禁用 or false 不禁用
}
}
}
// 当前所选属性下，获取所有有库存的 SKU 们
function getCanUseSkuList() {
let newSkus = []
for (let sku of skuList.value) {
if (sku.stock <= 0) {
continue
}
let isOk = true
state.currentPropertyArray.forEach((propertyId) => {
// propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
if (propertyId.toString() !== "" && sku.value_id_array.indexOf(propertyId) < 0) {
isOk = false
}
})
if (isOk) {
newSkus.push(sku)
}
}
return newSkus
}
// 选择规格
function onSelectSku(propertyId, valueId) {
// 清空已选择
let isChecked = true // 选中 or 取消选中
if (state.currentPropertyArray[propertyId] !== undefined && state.currentPropertyArray[propertyId] === valueId) {
// 点击已被选中的，删除并填充 ''
isChecked = false
state.currentPropertyArray.splice(propertyId, 1, "")
} else {
// 选中
state.currentPropertyArray[propertyId] = valueId
}
// 选中的 property 大类
let choosePropertyId = []
state.currentPropertyArray.forEach((currentPropertyId) => {
if (currentPropertyId !== "") {
// currentPropertyId 为空是反选 填充的
choosePropertyId.push(currentPropertyId)
}
})
// 当前所选 property 下，所有可以选择的 SKU 们
let newSkuList = getCanUseSkuList()
// 判断所有 property 大类是否选择完成
if (choosePropertyId.length === propertyList.length && newSkuList.length) {
newSkuList[0].goods_num = state.selectedSku.goods_num || 1
state.selectedSku = newSkuList[0]
} else {
state.selectedSku = {}
}
// 改变 property 禁用状态
changeDisabled(isChecked, propertyId, valueId)
}
changeDisabled(false)
// TODO 芋艿：待讨论的优化点：1）单规格，要不要默认选中；2）默认要不要选中第一个规格
</script>
<style lang="scss" scoped>
// 购买
.buy-box {
padding: 10rpx 0;
.add-btn {
width: 356rpx;
height: 80rpx;
border-radius: 40rpx 0 0 40rpx;
background-color: var(--ui-BG-Main-light);
color: var(--ui-BG-Main);
}
.buy-btn {
width: 356rpx;
height: 80rpx;
border-radius: 0 40rpx 40rpx 0;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
.score-btn {
width: 100%;
margin: 0 20rpx;
height: 80rpx;
border-radius: 40rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
}
.ss-modal-box {
border-radius: 30rpx 30rpx 0 0;
max-height: 1000rpx;
.modal-header {
position: relative;
padding: 80rpx 20rpx 40rpx;
.sku-image {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
}
.header-right {
height: 160rpx;
}
.close-icon {
position: absolute;
top: 10rpx;
right: 20rpx;
font-size: 46rpx;
opacity: 0.2;
}
.goods-title {
font-size: 28rpx;
font-weight: 500;
line-height: 42rpx;
}
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.score-text {
font-size: 30rpx;
font-weight: 500;
color: $red;
font-family: OPPOSANS;
}
.price-text {
font-size: 30rpx;
font-weight: 500;
color: $red;
font-family: OPPOSANS;
&::before {
content: "￥";
font-size: 30rpx;
font-weight: 500;
color: $red;
}
}
.stock-text {
font-size: 26rpx;
color: #999999;
}
}
.modal-content {
padding: 0 20rpx;
.modal-content-scroll {
max-height: 600rpx;
.label-text {
font-size: 26rpx;
font-weight: 500;
}
.buy-num-box {
height: 100rpx;
}
.spec-btn {
height: 60rpx;
min-width: 100rpx;
padding: 0 30rpx;
background: #f4f4f4;
border-radius: 30rpx;
color: #434343;
font-size: 26rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.disabled-btn {
font-weight: 400;
color: #c6c6c6;
background: #f8f8f8;
}
}
}
}
.iconBox {
width: fit-content;
height: fit-content;
padding: 2rpx 10rpx;
background-color: rgb(255, 242, 241);
color: #ff2621;
font-size: 24rpx;
margin-left: 5rpx;
}
.origin-price-text {
font-size: 26rpx;
font-weight: 400;
text-decoration: line-through;
color: $gray-c;
font-family: OPPOSANS;
&::before {
content: "￥";
}
}
</style>
src/pages/shop/detail.vue
+133 -178
View File
@@ -66,15 +66,12 @@
:borderColor="['#89c0ff']"
>
<marquee class="flex items-center">{{ state.detail.discountsPrice }}</marquee>
<!-- <view class="w-full overflow-hidden flex">
<view class="scroll-text">{{ state.detail.discountsPrice }}</view>
</view> -->
</tm-alert>
<!-- start 商品 start -->
<view class="flex-row">
<scroll-view
v-if="state.classifyList?.length > 0"
v-if="state.classifyList.length"
scroll-y
:style="{ height: getHeight() }"
class="menu w-200rpx h-full p-l-12rpx p-b-20rpx bg-#f6f6f6"
@@ -86,61 +83,60 @@
:class="[{ menu_item_active: i == state.currentClassifyIndex }]"
@tap="doClassify(i)"
>
<view class="menu_item_title show-line">
{{ v.name }}
</view>
<view class="menu_item_title show-line">{{ v.name }}</view>
</view>
</scroll-view>
<scroll-view v-if="state.shopList?.length > 0" scroll-y :style="{ height: getHeight() }" class="flex-1 p-b-20rpx">
<view class="m-x-15rpx">
<product-row
v-for="goodsItem in state.goodsList"
:key="goodsItem.id"
:productId="goodsItem.id"
:merchantId="goodsItem.merchantId"
:picUrl="filePath(goodsItem.picUrl)"
:productName="goodsItem.productName"
:salesCount="goodsItem.salesCount"
:stock="goodsItem.stock"
@onClickAddToCar="onClickAddToCar"
/>
</view>
<scroll-view v-if="state.goodsList.length" scroll-y :style="{ height: getHeight() }" class="flex-1 p-b-20rpx p-x-15rpx">
<product-row
v-for="goodsItem in state.goodsList"
:key="goodsItem.id"
:productId="goodsItem.id"
:merchantId="goodsItem.merchantId"
:picUrl="filePath(goodsItem.picUrl)"
:productName="goodsItem.productName"
:salesCount="goodsItem.salesCount"
:stock="goodsItem.stock"
:unit="goodsItem.unit"
:retailPrice="goodsItem.retailPrice"
:promotionPrice="goodsItem.promotionPrice"
@onClickAddToCart="onClickAddToCart(goodsItem)"
/>
</scroll-view>
</view>
</tm-sticky>
<!-- end 商品 end -->
<template #main-bottom>
<view v-if="false" class="car z-200 p-x-30rpx p-y-30rpx bg-white">
<product-total :totPrice="state.totPrice" :totCount="state.totCount" @doContainer="doVisibleCar" @doPay="doPay" />
<view v-if="state.classifyList.length" class="car z-200 p-x-30rpx p-y-30rpx bg-white">
<product-total :totPrice="state.totPrice" :totCount="state.totCount" @doContainer="doVisibleCart" @submit="doBuy" />
</view>
</template>
</crud-layout>
<!-- 购物车弹框 -->
<product-car
v-model="showCarDialog"
:carList="state.carList"
<product-cart
v-model="state.showCartDialog"
:cartList="state.cartList"
:totPrice="state.totPrice"
:totCount="state.totCount"
@add="doAdd"
@remove="doRemove"
@doPay="doPay"
@submit="doBuy"
/>
<!-- 规格与数量弹框 -->
<product-sku v-model="showSkuDialog" :productData="curProductData" @onAddToCar="onAddToCar" />
<product-sku v-model="state.showSkuDialog" :productData="state.curProductData" @onSkuAddToCart="onSkuAddToCart" />
</template>
<script setup lang="ts">
import { reactive, nextTick, ref } from "vue"
import { reactive, nextTick } from "vue"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { isEmpty } from "radash"
import { router } from "@@/index"
import { foodApi, merchantApi, payApi, shopApi } from "@@/api"
import { filePath } from "@@/utils/file"
import ProductRow from "./components/product-row.vue"
import ProductCar from "./components/product-car.vue"
import ProductCart from "./components/product-cart.vue"
import ProductTotal from "./components/product-total.vue"
import ProductSku from "./components/product-sku.vue"
@@ -148,20 +144,21 @@ import ProductSku from "./components/product-sku.vue"
const state = reactive<any>({
merchantId: null,
detail: {},
classifyList: [],
currentClassifyIndex: 0,
goodsList: [],
carList: [],
cartList: [],
totPrice: 0,
totCount: 0,
classifyList: [],
currentClassifyIndex: 0,
showCartDialog: false,
showSkuDialog: false,
curProductData: {}, // 当前点击加入到购物车的商品信息
})
// 当前点击加入购物车的商品信息
const curProductData = ref<any>({})
// sku 弹框开关
const showSkuDialog = ref<boolean>(false)
// 购物车弹框开关
const showCarDialog = ref<boolean>(false)
onLoad((options: any) => {
if (!isEmpty(options.id)) {
@@ -169,126 +166,89 @@ onLoad((options: any) => {
}
})
onShow(async () => {
uni.showLoading({
title: "加载中...",
mask: true,
})
uni.showLoading({ title: "加载中...", mask: true })
try {
await getDetail()
// await getShopCar()
// await getClassify()
} catch (error) {
uni.showToast({
title: "加载失败",
icon: "error",
})
await getShopCart()
await getClassify()
} catch (error: any) {
uni.showToast({ title: error, icon: "error" })
} finally {
uni.hideLoading()
}
})
const getDetail = async () => {
const { data } = await merchantApi.detail({ id: state.merchantId })
state.detail = data
}
const getShopCar = async () => {
const { data } = await foodApi.getShopCar({ merchantId: state.merchantId, hardType: "SUPERMARKET" })
state.carList = data ?? []
console.log("car", data)
state.totPrice = state.carList.map((v) => Number(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 () => {
if (state.merchantId) {
const { data } = await shopApi.getSupermarketSpuCategory({ merchantId: state.merchantId })
state.classifyList = [{ id: null, name: "全部" }, ...data]
if (!isEmpty(state.classifyList)) {
getPorduct()
}
}
}
const getPorduct = async () => {
const target = state.classifyList[state.currentClassifyIndex]
if (isEmpty(target)) return
const { data } = await shopApi.getSupermarketSpuList({
// productName: target.name,
merchantId: state.merchantId,
categoryId: target.id,
current: 1,
size: 9999,
})
state.goodsList = data.records
// state.goodsList.forEach((i) => {
// if (i && i.foodSPURespVOList && i.foodSPURespVOList.length) {
// i.foodSPURespVOList.forEach((j) => {
// j.productCount = 0;
// j.productId = j.id;
// });
// }
// });
// const goodsList = [...state.goodsList];
// if (state.carList && state.carList.length) {
// for (const i of goodsList) {
// 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.goodsList = goodsList;
}
const doClassify = async (i: any) => {
state.currentClassifyIndex = i
await getPorduct()
}
// 联系商家
const doPhone = () => {
if (isEmpty(state.detail.phone)) {
uni.showToast({ title: "该商户没有预留电话", icon: "none" })
return
}
;(window as any).dd
.callPhone({
phoneNum: state.detail.phone,
})
.then((res) => {})
.catch((err) => {})
}
const getHeight = () => {
const rpx = 480
return `calc(100vh - ${uni.upx2px(rpx)}px)`
}
// 点击添加到购物车
const onClickAddToCar = (productData: any) => {
showSkuDialog.value = true
curProductData.value = productData
const getDetail = async () => {
const { data } = await merchantApi.detail({ id: state.merchantId })
state.detail = data
}
// 加入到购物车时
const onAddToCar = (cartGoodsInfo: any) => {
console.log("cartGoodsInfo", cartGoodsInfo)
chentProductCount(cartGoodsInfo) // 同步购物车中的数据
showSkuDialog.value = false
const getShopCart = async () => {
const { data } = await foodApi.getShopCar({ merchantId: state.merchantId, hardType: "SUPERMARKET" })
state.cartList = data ?? []
state.totPrice = state.cartList.map((v) => Number(v.totalPrice)).reduce((pre, next) => pre + next, 0)
state.totCount = state.cartList.map((v) => v.productCount).reduce((pre, next) => pre + next, 0)
}
const getClassify = async () => {
if (state.merchantId) {
const { data } = await shopApi.getSupermarketSpuCategory({ merchantId: state.merchantId })
state.classifyList = data ?? []
if (!isEmpty(state.classifyList)) {
getPorductList()
}
}
}
const getPorductList = async () => {
const target = state.classifyList[state.currentClassifyIndex]
if (isEmpty(target)) return
try {
uni.showLoading({ title: "加载中...", mask: true })
const { code, data }: any = await shopApi.getSupermarketSpuList({
merchantId: state.merchantId,
categoryId: target.id,
current: 1,
size: 99999,
})
if (code == 0) {
state.goodsList = data.records
return
}
state.goodsList = []
} finally {
uni.hideLoading()
}
}
const doClassify = async (i: any) => {
state.currentClassifyIndex = i
await getPorductList()
}
// 点击添加到购物车
const onClickAddToCart = (goodsItem: any) => {
state.curProductData = goodsItem
state.showSkuDialog = true
}
// 选择sku加入到购物车
const onSkuAddToCart = (skuGoodsInfo: any) => {
chentProductCount(skuGoodsInfo) // 同步购物车中的数据
state.showSkuDialog = false
}
// 同步购物车中的数据
const chentProductCount = async (item: any, type?: "add" | "remove") => {
try {
console.log("ccccccc", item)
uni.showLoading({ title: "加载中", mask: true })
// 在购物车中增减商品数量
let count = item.productCount
if (type === "add") {
count += 1
@@ -298,31 +258,27 @@ const chentProductCount = async (item: any, type?: "add" | "remove") => {
count -= 1
}
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 = count
state.carList[targetIndex].productId = item.productId
state.carList[targetIndex].spuId = item.spuId
console.log("1", state.carList[targetIndex])
const targetIndex = state.cartList.findIndex((v: any) => v.productId == item.productId)
if (targetIndex !== -1) {
state.cartList[targetIndex].productCount = count
state.cartList[targetIndex].productId = item.productId
state.cartList[targetIndex].spuId = item.spuId
} else {
state.carList.push(item)
console.log("2", item)
state.cartList.push(item)
}
nextTick(async () => await updateShopCar()) // 保存购物车数据
nextTick(async () => await updateShopCart()) // 保存购物车数据
} catch (e) {
console.error(e)
} finally {
uni.hideLoading()
}
}
// 保存购物车数据
const updateShopCar = async () => {
console.log("carList", state.carList)
if (isEmpty(state.carList)) return
const list = state.carList
// 保存购物车数据
const updateShopCart = async () => {
if (isEmpty(state.cartList)) return
const list = state.cartList
.filter((v) => v.productCount && v.productCount > 0)
.map((v) => {
return {
@@ -330,19 +286,12 @@ const updateShopCar = async () => {
productId: v.productId,
}
})
// if (isEmpty(list)) return
const { data, code }: any = await foodApi.updateShopCar({
merchantId: state.merchantId,
list,
hardType: "SUPERMARKET",
})
if (code == 0) await getShopCar()
const { code }: any = await foodApi.updateShopCar({ merchantId: state.merchantId, list, hardType: "SUPERMARKET" })
if (code == 0) await getShopCart()
}
// 显示购物车
const doVisibleCar = async () => {
showCarDialog.value = true
}
// 打开购物车
const doVisibleCart = () => (state.showCartDialog = true)
const doAdd = async (item: any) => {
chentProductCount(item, "add")
@@ -352,7 +301,7 @@ const doRemove = async (item: any) => {
}
// 点击提交订单
const doPay = async () => {
const doBuy = async () => {
uni.showModal({
title: "提示",
content: "是否确定购买",
@@ -367,25 +316,31 @@ const doPay = async () => {
// 提交订单
const submitPay = async () => {
try {
if (isEmpty(state.carList)) {
uni.showToast({ title: "请至少购买一件商品", icon: "none" })
return
}
if (isEmpty(state.cartList)) return uni.showToast({ title: "请至少购买一件商品", icon: "none" })
uni.showLoading({ title: "支付中...", mask: false })
const _createtPa = {
carParentId: state.carList[0].parentCarId,
hardType: "SUPERMARKET",
}
const { data: createData, code: createCode }: any = await payApi.createHardwareOrder(_createtPa)
if (createCode != 0) throw new Error()
uni.hideLoading()
const { data, code }: any = await payApi.createHardwareOrder({ carParentId: state.cartList[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 doPhone = () => {
if (isEmpty(state.detail.phone)) {
uni.showToast({ title: "该商户没有预留电话", icon: "none" })
return
}
;(window as any).dd
.callPhone({ phoneNum: state.detail.phone })
.then((res) => {})
.catch((err) => {})
}
</script>
<style lang="scss" scoped>
src/pages/shop/product-detail.vue
+8 -10
View File
@@ -35,25 +35,23 @@ const getDetail = async () => {
indicator-color="#ffffff"
:autoplay="true"
>
<swiper-item v-for="(v, i) in state.detail?.sliderPicUrls?.split(',')" :key="i">
<image class="w-full h-full" :src="filePath(state.detail.picUrl)" mode="aspectFill" />
<swiper-item v-for="(v, i) in state.detail?.picUrl?.split(',')" :key="i">
<image class="w-full h-full" :src="filePath(v)" mode="aspectFill" />
</swiper-item>
</swiper>
<view class="p-x-15rpx">
<view class="p-15rpx">
<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="prefix_title">商品</view>
<view class="sub-text-32 m-t-15rpx">{{ state.detail.productName }}</view>
<view class="flex-row items-center justify-between m-t-15rpx">
<!-- <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.stock }}</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.productName }}</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>
src/pages/tabbar/onlineShop.vue
+82
View File
@@ -0,0 +1,82 @@
<script setup lang="ts">
import { ref, reactive } from "vue"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { merchantApi } from "@@/api"
import { hooks, router } from "@@/index"
import { filePath } from "@@/utils/file"
const pageRef = ref<any>(null)
const state = reactive<any>({
pa: {
pagesize: 10,
type: "3",
},
})
const pageHook = hooks.usePage(pageRef, merchantApi.page, null, "data.records")
const query = (page: number, pagesize: number) => {
pageHook.startPage(page, pagesize, false, state.pa)
}
onLoad(() => {
const app = getApp()
app._initTabbar()
})
onShow(() => {
pageRef.value && pageRef.value.reload(false)
})
const toDetail = async (v: any) => {
const isLogin = await hooks.useCheckLogin()
if (isLogin) {
router.jump("/pages/shop/detail", { id: v.id })
}
}
</script>
<template>
<crud-layout bg="/static/page/blue-bg.png">
<z-paging
ref="pageRef"
height="100%"
:fixed="false"
v-model="pageHook.list"
:default-page-size="10"
safe-area-inset-bottom
:loading-more-enabled="true"
:show-scrollbar="false"
@query="query"
:auto-clean-list-when-reload="false"
:auto-scroll-to-top-when-reload="false"
@scroll="pageHook.scroll"
>
<view class="h-20rpx" />
<view class="flex-row card p-20rpx m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="toDetail(v)">
<image class="w-180rpx h-180rpx rounded-12rpx" :src="filePath(v.logoPic)" 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-34">{{ v.name }}</view>
<tm-tag size="s">{{ v.deptName }}</tm-tag>
</view>
<view class="m-t-10rpx">
<view v-if="v.phone" class="flex items-center">
<image class="w-24rpx h-24rpx" src="@/static/page/phone.svg" />
<view class="second-text-28 ml-1">{{ v.phone }}</view>
</view>
<view class="second-text-24">
<view class="second-text-28">{{ v.jobTime == ",," ? "" : "营业时间：" }}</view>
<view>{{ v.jobTime?.split(",")[0] ? "早：" + v.jobTime?.split(",")[0] : "" }}</view>
<view>{{ v.jobTime?.split(",")[1] ? "中：" + v.jobTime?.split(",")[1] : "" }}</view>
<view>{{ v.jobTime?.split(",")[2] ? "晚：" + v.jobTime?.split(",")[2] : "" }}</view>
</view>
<view v-if="v.addressDes" class="second-text-28">
<image class="w-24rpx h-24rpx" src="@/static/page/address.svg" />
<text class="ml-1">地址:</text>
<text class="m-l-10rpx">{{ v.addressDes }}</text>
</view>
</view>
</view>
</view>
</z-paging>
</crud-layout>
</template>
src/sheep/utils/app.ts
+2 -2
View File
@@ -3,8 +3,8 @@
export const isDevEnv = (): boolean => process.env.NODE_ENV === "development"
// 获取启动参数
export const getLaunchParam = (): "canteen" | "selfMerchant" | "coopMerchant" | "thirdApp" | null => {
return new URL(window.location.href).searchParams.get("launchParam") as "canteen" | "selfMerchant" | "coopMerchant" | "thirdApp" | null
export const getLaunchParam = (): string => {
return new URL(window.location.href).searchParams.get("launchParam") || ""
}
// 检测app信息判断运行环境
src/sheep/utils/request.ts
+180 -198
View File
@@ -1,20 +1,17 @@
import Request from "luch-request"
import { router, constant } from "@@/index"
import { userApi } from "../api"
import { isEmpty } from "radash"
import { isDevEnv } from "./app"
import { getAppInfo } from "@@/utils/app"
import { getAppInfo, isDevEnv } from "@@/utils/app"
import { userApi } from "../api"
import showVerifyDeviceImpModel from "../components/verifyDeviceImpModel/verifyDeviceImpModel"
const TOKEN_KEY = constant.storageConstant.TOKEN
const USER_INFO_KEY = constant.storageConstant.USERINFO
const SKIP_AUTH_URLS = ["/thirdparty/thirdPartyOAth2", "/sys/auth/refresh-token", "/auth/oauth2/token"]
let isRefreshing = false
// 队列存储发送失败的请求
let failedQueue: any[] = []
// 存储刷新token的Promise
let refreshTokenPromise: Promise<any> | null = null
let refreshTokenPromise: Promise<any> | null = null // 存储刷新token的Promise
let isRefreshing = false // 是否正在刷新
let failedQueue: any[] = [] // 队列存储发送失败的请求
// 处理队列中的请求
const processQueue = (error: any, token: any = null) => {
@@ -30,16 +27,185 @@ const processQueue = (error: any, token: any = null) => {
}
}
// 读取token并处理Authorization请求头
const getAuthHeader = (tokenStorage: any) => {
// 创建http请求实例
const http = new Request({
baseURL: import.meta.env.VITE_API_URL,
timeout: 15000,
method: "GET",
header: {
Accept: "*/*",
"Content-Type": "application/json;charset=UTF-8",
},
withCredentials: true,
custom: {
showSuccess: false, // 成功提醒 默认使用后端返回值
successMsg: "", // 成功消息
showError: true, // 显示失败消息 默认显示
errorMsg: "", // 失败提醒 默认使用后端返回信息
loadingMsg: "加载中", // loading提醒文字
auth: false, // 需要授权才能请求 默认放开
},
})
http.interceptors.request.use(async (config) => {
const tokenStorage = uni.getStorageSync(TOKEN_KEY)
const config_header: any = config.header || {}
// 设置租户请求头
config_header["TENANT-ID"] = "1"
if (import.meta.env.VITE_IS_TOC === "true") config_header["CLIENT-TOC"] = "Y"
// 判断是否需要设置认证头
if (!SKIP_AUTH_URLS.some((url) => config.url?.startsWith(url))) {
if (!isEmpty(tokenStorage)) {
// token存在，检查是否过期
if (isTokenExpires(tokenStorage)) {
// 过期，刷新token
const newTokenStorage = await refreshToken()
if (newTokenStorage) {
const tokenValue = getTokenValue(newTokenStorage)
if (tokenValue) config_header.Authorization = tokenValue
}
} else {
const tokenValue = getTokenValue(tokenStorage)
if (tokenValue) config_header.Authorization = tokenValue
}
} else {
// token不存在，刷新token
const newTokenStorage = await refreshToken()
if (newTokenStorage) {
const tokenValue = getTokenValue(newTokenStorage)
if (tokenValue) config_header.Authorization = tokenValue
}
}
}
return config
}, Promise.reject)
// 响应拦截器
http.interceptors.response.use(
async (response) => {
// 账号密码登录响应结果特殊处理
if (response.config.url === "/auth/oauth2/token") {
return Promise.resolve({
code: 0,
data: response.data,
msg: null,
})
}
return Promise.resolve(response.data)
},
async (error) => {
// 处理 424 错误(token过期)
if (error.statusCode === 424) {
if (isDevEnv()) {
// 开发环境直接清除token并跳转登录
uni.removeStorageSync(TOKEN_KEY)
uni.removeStorageSync(USER_INFO_KEY)
uni.showToast({ title: "登录已过期，请重新登录", icon: "none" })
router.jump("/pages/user/login")
} else {
try {
const newTokenStorage = await refreshToken()
if (newTokenStorage) {
const config = error.config
const tokenValue = getTokenValue(newTokenStorage)
if (tokenValue && config.header) config.header.Authorization = tokenValue
return http.request(config)
}
} catch (err) {
return Promise.reject(err)
}
}
}
// 显示错误信息
if (error?.data?.msg) {
uni.showToast({ title: error.data.msg, icon: "none", mask: true })
}
return Promise.resolve(error.data)
},
)
// 从tokenStorage中读取tokenValue值
const getTokenValue = (tokenStorage: any): string | null => {
if (isDevEnv()) {
return tokenStorage?.access_token ? `Bearer ${tokenStorage.access_token}` : null
}
return tokenStorage?.accessToken?.tokenValue ? `Bearer ${tokenStorage.accessToken.tokenValue}` : null
}
// 浙政钉登录 登录成功返回true，否则返回false
async function handleZzdLogin(): Promise<boolean> {
// 检查tokenStorage中tokenValue是否过期
const isTokenExpires = (tokenStorage: any): boolean => {
const { accessToken } = tokenStorage // 线上token字段
const { access_token } = tokenStorage // 测试token字段
const expiresDate = new Date(accessToken?.expiresAt || access_token?.expiresAt).getTime()
return new Date().getTime() >= expiresDate
}
async function refreshToken(): Promise<any> {
if (refreshTokenPromise) return refreshTokenPromise
if (!isRefreshing) {
isRefreshing = true
refreshTokenPromise = (async () => {
try {
const loginResult = await autoLogin()
if (loginResult) {
const newTokenStorage = uni.getStorageSync(TOKEN_KEY)
processQueue(null, newTokenStorage)
return newTokenStorage
} else {
// 检查是否需要设备验证
const tokenStorage = uni.getStorageSync(TOKEN_KEY)
if (tokenStorage?.data == -1) {
// 显示设备验证弹窗
await showVerifyDeviceImpModel(async () => {
// 验证完成后重新登录
const newLoginResult = await autoLogin()
if (newLoginResult) {
const newTokenStorage = uni.getStorageSync(TOKEN_KEY)
processQueue(null, newTokenStorage)
return newTokenStorage
} else {
processQueue(new Error("登录失败"), null)
throw new Error("登录失败")
}
})
} else {
processQueue(new Error("登录失败"), null)
}
}
} catch (error) {
processQueue(error, null)
throw error
} finally {
isRefreshing = false
refreshTokenPromise = null
}
})()
}
return refreshTokenPromise
}
// 根据应用环境自动登录 返回登录结果
const autoLogin = async (): Promise<boolean> => {
const appInfo = await getAppInfo()
// 浙政钉环境
if (appInfo == "zzd") return await loginByZzd()
// 诗画环境
if (appInfo == "sh") return await loginBySh()
uni.showToast({ title: "app环境错误", icon: "none" })
return false
}
// 浙政钉登录
async function loginByZzd(): Promise<boolean> {
try {
uni.showLoading({ title: "登录中...", mask: true })
const token = new URL(window.location.href).searchParams.get("uabaseToken")
@@ -60,8 +226,6 @@ async function handleZzdLogin(): Promise<boolean> {
uni.removeStorageSync(USER_INFO_KEY)
if (res.msg == "token已失效") {
uni.showToast({ title: "用户凭证已失效，请退出并重新进入智慧后勤应用", icon: "none", duration: 6000 })
} else {
uni.showToast({ title: res.msg || "登录失败", icon: "none" })
}
return false
}
@@ -73,8 +237,8 @@ async function handleZzdLogin(): Promise<boolean> {
}
}
// 诗画登录 登录成功返回true，否则返回false
async function handleShLogin(): Promise<boolean> {
// 诗画登录
async function loginBySh(): Promise<boolean> {
try {
uni.showLoading({ title: "登录中...", mask: true })
@@ -118,188 +282,6 @@ async function handleShLogin(): Promise<boolean> {
}
}
// 根据应用环境自动登录 返回登录结果
async function autoLogin(): Promise<boolean> {
const appInfo = await getAppInfo()
// 浙政钉环境
if (appInfo == "zzd") {
return await handleZzdLogin()
}
// 诗画环境
else if (appInfo == "sh") {
return await handleShLogin()
} else {
uni.showToast({ title: "app环境错误", icon: "none" })
return false
}
}
// token刷新
async function refreshToken(): Promise<any> {
if (refreshTokenPromise) {
return refreshTokenPromise
}
if (!isRefreshing) {
isRefreshing = true
refreshTokenPromise = (async () => {
try {
const loginResult = await autoLogin()
if (loginResult) {
const newTokenStorage = uni.getStorageSync(TOKEN_KEY)
processQueue(null, newTokenStorage)
return newTokenStorage
} else {
// 检查是否需要设备验证
const tokenStorage = uni.getStorageSync(TOKEN_KEY)
if (tokenStorage?.data == -1) {
// 显示设备验证弹窗
await showVerifyDeviceImpModel(async () => {
// 验证完成后重新登录
const newLoginResult = await autoLogin()
if (newLoginResult) {
const newTokenStorage = uni.getStorageSync(TOKEN_KEY)
processQueue(null, newTokenStorage)
return newTokenStorage
} else {
processQueue(new Error("登录失败"), null)
throw new Error("登录失败")
}
})
} else {
processQueue(new Error("登录失败"), null)
throw new Error("登录失败")
}
}
} catch (error) {
processQueue(error, null)
throw error
} finally {
isRefreshing = false
refreshTokenPromise = null
}
})()
}
return refreshTokenPromise
}
// token过期刷新检查
async function checkAndRefreshToken(tokenStorage: any) {
const { accessToken } = tokenStorage
if (!accessToken) return
const expiresDate = new Date(accessToken.expiresAt).getTime()
// token已过期，尝试刷新
if (new Date().getTime() >= expiresDate) {
return await refreshToken()
}
}
// 创建请求实例
const http = new Request({
baseURL: import.meta.env.VITE_API_URL,
timeout: 15000,
method: "GET",
header: {
Accept: "*/*",
"Content-Type": "application/json;charset=UTF-8",
},
withCredentials: true,
custom: {
showSuccess: false, // 成功提醒 默认使用后端返回值
successMsg: "", // 成功消息
showError: true, // 显示失败消息 默认显示
errorMsg: "", // 失败提醒 默认使用后端返回信息
loadingMsg: "加载中", // loading提醒文字
auth: false, // 需要授权才能请求 默认放开
},
})
// 请求拦截器
http.interceptors.request.use(async (config) => {
const tokenStorage = uni.getStorageSync(TOKEN_KEY)
const config_header: any = config.header || {}
// 设置租户请求头
config_header["TENANT-ID"] = "1"
if (import.meta.env.VITE_IS_TOC === "true") config_header["CLIENT-TOC"] = "Y"
// 判断是否需要设置认证头
if (!SKIP_AUTH_URLS.some((url) => config.url?.startsWith(url))) {
if (!isEmpty(tokenStorage)) {
// token存在，token过期刷新检查
const newTokenStorage = await checkAndRefreshToken(tokenStorage)
if (newTokenStorage) {
const authHeader = getAuthHeader(newTokenStorage)
if (authHeader) config_header.Authorization = authHeader
} else {
const authHeader = getAuthHeader(tokenStorage)
if (authHeader) config_header.Authorization = authHeader
}
} else {
// token不存在,刷新token
const newTokenStorage = await refreshToken()
if (newTokenStorage) {
const authHeader = getAuthHeader(newTokenStorage)
if (authHeader) config_header.Authorization = authHeader
}
}
}
return config
}, Promise.reject)
// 响应拦截器
http.interceptors.response.use(
async (response) => {
// 账号密码登录响应结果特殊处理
if (response.config.url === "/auth/oauth2/token") {
return Promise.resolve({
code: 0,
data: response.data,
msg: null,
})
}
return Promise.resolve(response.data)
},
async (error) => {
// 处理 424 错误(token过期)
if (error.statusCode === 424) {
if (isDevEnv()) {
// 开发环境直接清除token并跳转登录
uni.removeStorageSync(TOKEN_KEY)
uni.removeStorageSync(USER_INFO_KEY)
uni.showToast({ title: "登录已过期，请重新登录", icon: "none" })
router.jump("/pages/user/login")
} else {
try {
const newTokenStorage = await refreshToken()
if (newTokenStorage) {
// 重新发起失败的请求
const config = error.config
const authHeader = getAuthHeader(newTokenStorage)
if (authHeader && config.header) config.header.Authorization = authHeader
return http.request(config)
}
} catch (err) {
// 错误已在refreshToken中处理
return Promise.reject(err)
}
}
}
// 显示错误信息
if (error?.data?.msg) {
uni.showToast({ title: error.data.msg, icon: "none", mask: true })
}
return Promise.resolve(error.data)
},
)
// 请求函数
const request = (config: any) => {
return http.middleware(config)
src/static/tabbar/online-shop-select.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

src/static/tabbar/online-shop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

vite.config.ts
+1 -1
View File
@@ -32,7 +32,7 @@ export default defineConfig(({ mode }) => {
},
server: {
host: "0.0.0.0",
port: 8888,
port: 8889,
hmr: true,
proxy: {
"/api": {