计算购物车钱之前
This commit is contained in:
wwz
93
pages/product/components/shopindex.vue
Normal file
93
pages/product/components/shopindex.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 店铺详情 -->
|
||||
<up-popup :show="showShopInfo" :round="20" mode="bottom" @close="showShopInfo = false" height="500">
|
||||
<view class="shop-info-wrap">
|
||||
<view class="info-wrap flex-between">
|
||||
<view></view>
|
||||
<text class="shopName">{{ shopInfo.shopName }}</text>
|
||||
<view class="close" @click="showShopInfo = false">
|
||||
<up-icon name="close" color="#999999" size="16"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-wrap-title">商家信息</view>
|
||||
<view class="row" style="margin-bottom: 20rpx;">
|
||||
<view class="col">
|
||||
<text class="l">营业时间：</text>
|
||||
<text
|
||||
class="t">{{ (shopInfo.businessStartDay || '--') +'至'+ (shopInfo.businessEndDay || '--') +' '+ (shopInfo.businessTime || '')}}</text>
|
||||
</view>
|
||||
<view class="col">
|
||||
<text class="l">商家地址：</text>
|
||||
<text class="t">{{ shopInfo.address }}</text>
|
||||
</view>
|
||||
<view class="col" @click="makePhoneCall(shopInfo.phone)">
|
||||
<text class="l">商家电话：</text>
|
||||
<text class="t">{{ shopInfo.phone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-wrap-title">商家公告</view>
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
<text class="l">公告：</text>
|
||||
<text class="t">{{ shopInfo.detail }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
defineExpose
|
||||
} from "vue";
|
||||
//店铺详情
|
||||
const showShopInfo = ref(false)
|
||||
const shopInfo = uni.cache.get('shopInfo')
|
||||
|
||||
const childMethod = () => {
|
||||
showShopInfo.value = !showShopInfo.value
|
||||
};
|
||||
defineExpose({
|
||||
childMethod
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.shop-info-wrap {
|
||||
padding: 0 30rpx 50rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.info-wrap {
|
||||
padding: 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.shopName {
|
||||
align-self: center;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.row {
|
||||
.col {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.l,
|
||||
.t {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
146
pages/product/components/shoppingCartBilling.vue
Normal file
146
pages/product/components/shoppingCartBilling.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<view class="cart-wrap" v-if="cartListsdatashow">
|
||||
<view class="cart-content">
|
||||
<view class="left">
|
||||
<view class="iconBox">
|
||||
<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopDetails/shopIcon.png"
|
||||
mode="aspectFill" @click="isOpen">
|
||||
</image>
|
||||
<text class="u-badge"> {{cartLists_count<99?cartLists_count:'99+'}} </text>
|
||||
</view>
|
||||
|
||||
<text class="i">￥</text>
|
||||
<text class="num"
|
||||
v-if="shopInfo.isVip == 1 && cartLists.memberAmount > 0">{{cartLists.memberAmount||'0.00'}}</text>
|
||||
<text class="num" v-else>{{cartLists.amount||'0.00'}}</text>
|
||||
</view>
|
||||
<view class="btn" @tap="$u.debounce(orderdetail, 500)">
|
||||
<text class="t">去结算</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
defineProps,
|
||||
} from 'vue'
|
||||
|
||||
const shopInfo = uni.cache.get('shopInfo')
|
||||
const cartListsdatashow = ref(false)
|
||||
const showCart = ref(false)
|
||||
const orderdetail = () => {
|
||||
|
||||
if (this.cartLists.data.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请先添加商品',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
uni.navigateTo({
|
||||
url: `/pagesOrder/confirm_order/index?storeInfo=${encodeURIComponent(JSON.stringify(this.storeInfo))}&cartLists=${JSON.stringify(this.cartLists)}&tableCode=${this.tableCode||''}`
|
||||
});
|
||||
|
||||
}
|
||||
const isOpen = () => {
|
||||
showCart.value = !showCart.value
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cart-wrap {
|
||||
width: 100%;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
bottom: 40rpx;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
|
||||
.cart-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 128rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.15);
|
||||
border-radius: 58rpx;
|
||||
padding: 0 36rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.iconBox {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 76rpx;
|
||||
height: 88rpx;
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
|
||||
.u-badge {
|
||||
position: absolute;
|
||||
top: -30rpx;
|
||||
right: -30rpx;
|
||||
background-color: #FF4B33;
|
||||
color: #fff;
|
||||
border-radius: 58rpx;
|
||||
padding: 5rpx 14rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.i,
|
||||
.num {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.i {
|
||||
font-size: 20upx;
|
||||
position: relative;
|
||||
top: 4upx;
|
||||
margin-left: 64rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 42upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 100%;
|
||||
width: 40%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.t {
|
||||
width: 160rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
text-align: center;
|
||||
background: #E7AE7B;
|
||||
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
||||
border: 2rpx solid #E8AD7B;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
397
pages/product/components/shoppingCartes.vue
Normal file
397
pages/product/components/shoppingCartes.vue
Normal file
@@ -0,0 +1,397 @@
|
||||
<template>
|
||||
<view>
|
||||
<up-popup :show="showCart" :round="20" :safeAreaInsetBottom="false" :zIndex="98" :overlayStyle="{ zIndex: 98 }"
|
||||
@close="close">
|
||||
<view class="cart-list-wrap">
|
||||
<view class="cart-header flex-between">
|
||||
<view class="num">已点 {{ cartLists_count }} 份</view>
|
||||
<view class="clear" @click="cartclear">
|
||||
<up-icon name="trash" color="#999"></up-icon>
|
||||
<text class="t">清空</text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y class="scroll-view">
|
||||
<view class="list-wrap">
|
||||
<view class="shop-item" v-for="(item,index) in props.cartList" :key="item.id">
|
||||
<view class="shop-item-content">
|
||||
<view class="cover" v-if="item.productId!=-999">
|
||||
<up-image :src="item.coverImg" width="120" radius="10" height="120"></up-image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="name"> {{ item.name }} </view>
|
||||
<view class="select-sku-wrap" v-if="item.skuList">
|
||||
<text v-for="i in item.skuList" :key="i.id">
|
||||
{{item.id == i.productId && item.skuId == i.id ? i.specInfo :""}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="price-wrap" style="padding-top: 0;">
|
||||
<view class="price">
|
||||
<text class="i">￥</text>
|
||||
<!-- 会员价与价格 -->
|
||||
<text
|
||||
class="price">{{shopInfo.isVip ==1?item.memberPrice:item.salePrice}}</text>
|
||||
<!-- <text class="originalprice"
|
||||
v-if="item.originPrice">¥{{item.originPrice}}</text>
|
||||
<text class="unit" v-if="item.unitName">/{{item.unitName}}</text> -->
|
||||
</view>
|
||||
|
||||
|
||||
<view class="operation-wrap">
|
||||
<view class="btn">
|
||||
<up-icon name="minus-circle-fill" size="25"></up-icon>
|
||||
<view class="btnClick" @click="cartListadd(item,'-')"></view>
|
||||
</view>
|
||||
<text class="num">{{ ifcartNumber(item) }}</text>
|
||||
<view class="btn">
|
||||
<!-- <up-icon name="plus-circle-fill"
|
||||
:color="shopInfo.isVip == 1 ? '#CECECE' : '#E9AB7A'"
|
||||
size="25"></up-icon> -->
|
||||
<up-icon name="plus-circle-fill" color="#E9AB7A" size="25"></up-icon>
|
||||
<view class="btnClick" @click="cartListadd(item,'+')"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="shop-item-remark" v-if="item.productId!=-999">
|
||||
<view class="label">备注</view>
|
||||
<up--input placeholder="商品备注(选填)" border="none" v-model="item.note"
|
||||
@blur="productBlur(item)"></up--input>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
defineProps,
|
||||
computed,
|
||||
defineEmits
|
||||
} from 'vue';
|
||||
import {
|
||||
productStore
|
||||
} from '@/stores/user.js';
|
||||
|
||||
// 定义自定义事件
|
||||
const emits = defineEmits(['customevent', 'close']);
|
||||
|
||||
const props = defineProps({
|
||||
cartList: {
|
||||
type: Array
|
||||
},
|
||||
cartLists_count: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
showCart: {
|
||||
type: Boolean
|
||||
},
|
||||
});
|
||||
const shopInfo = uni.cache.get('shopInfo')
|
||||
|
||||
// 定义 ifcartNumber 计算属性方法
|
||||
const ifcartNumber = computed(() => {
|
||||
return (item) => {
|
||||
// 如果 item 为空或者 cartNumber 不是字符串类型，返回 0
|
||||
if (!item || typeof item.cartNumber !== 'string') {
|
||||
return 0;
|
||||
}
|
||||
let numValue = parseFloat(item.cartNumber);
|
||||
if (isNaN(numValue)) {
|
||||
// 如果转换结果是 NaN，说明 cartNumber 不是有效的数字字符串，返回 0
|
||||
return 0;
|
||||
}
|
||||
// type string 商品类型 single-单规格商品 sku-多规格商品 package-套餐商品 weight-称重商品 coupon-团购券
|
||||
if (item.type === 'weight') {
|
||||
// 如果类型是称重重量，将值保留两位小数
|
||||
return parseFloat(numValue.toFixed(2));
|
||||
} else {
|
||||
// 如果类型是整数，将值转换为整数
|
||||
return Math.round(numValue);
|
||||
}
|
||||
// 如果类型不匹配，返回原始值
|
||||
return item.cartNumber;
|
||||
};
|
||||
})
|
||||
|
||||
const close = () => {
|
||||
emits("close", false)
|
||||
}
|
||||
// 购物车加减
|
||||
const cartListadd = async (item, i) => {
|
||||
emits('customevent', {
|
||||
id: item.cartListId ? item.cartListId : '',
|
||||
type: 'shopping',
|
||||
table_code: uni.cache.get('tableCode'),
|
||||
shop_id: uni.cache.get('shopId'),
|
||||
operate_type: calculateValue(item.cartNumber, i) == 'del' ? 'del' : item.cartListId &&
|
||||
item.cartNumber > 0 ? 'edit' : 'add',
|
||||
product_id: item.id,
|
||||
sku_id: item.skuId,
|
||||
number: await calculateValue(item.cartNumber, i),
|
||||
})
|
||||
}
|
||||
|
||||
// 封装加法函数
|
||||
const calculateValue = (cartNumber, i, step = 1) => {
|
||||
if (i == '+') {
|
||||
const result = parseFloat(cartNumber) + step;
|
||||
return result.toFixed(2);
|
||||
} else {
|
||||
const result = parseFloat(cartNumber) - step;
|
||||
return result == 0 ? 'del' : result.toFixed(2);
|
||||
}
|
||||
};
|
||||
|
||||
// 菜品备注修改
|
||||
const productBlur = (item) => {
|
||||
let params = {
|
||||
"skuId": item.skuId,
|
||||
"num": item.number, //数量
|
||||
"type": item.type,
|
||||
"isVip": item.isVip,
|
||||
"productId": item.productId, //商品id
|
||||
"note": item.note,
|
||||
"shopId": this.shopId,
|
||||
"userId": uni.cache.get('userInfo').id,
|
||||
"tableId": this.tableCode,
|
||||
}
|
||||
this.$emit("addCart", params)
|
||||
}
|
||||
|
||||
// 清空购物车
|
||||
const cartclear = () => {
|
||||
emits('customevent', {
|
||||
type: 'shopping',
|
||||
table_code: uni.cache.get('tableCode'),
|
||||
shop_id: uni.cache.get('shopId'),
|
||||
operate_type: 'cleanup',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cart-list-wrap {
|
||||
.cart-header {
|
||||
display: flex;
|
||||
height: 72rpx;
|
||||
background-color: #F2F2F2;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20upx 28rpx;
|
||||
border-radius: 20upx 20upx 0 0;
|
||||
|
||||
.num {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.clear {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
margin-left: 4upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
max-height: 50vh;
|
||||
margin-bottom: 190rpx;
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
padding: 28rpx 0 0 28rpx;
|
||||
}
|
||||
|
||||
.shop-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 28rpx;
|
||||
|
||||
.shop-item-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.shop-item-remark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 180rpx;
|
||||
margin-top: 10rpx;
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.langcover {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.langcover::after {
|
||||
content: '加载中..';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #e8e8e8;
|
||||
color: #6b6b6b;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
line-height: 180rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
padding-left: 20upx;
|
||||
padding-right: 28rpx;
|
||||
|
||||
.name {
|
||||
font-size: 28upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.select-sku-wrap {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.i,
|
||||
.num {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.i {
|
||||
position: relative;
|
||||
bottom: 4upx;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.originalprice {
|
||||
margin-left: 10rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.lineThrough {
|
||||
font-weight: normal;
|
||||
text-decoration: line-through;
|
||||
color: #999 !important;
|
||||
font-size: 24rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sku-wrap {
|
||||
padding: 6upx 16upx;
|
||||
background-color: #ffd100;
|
||||
border-radius: 12upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20upx;
|
||||
position: absolute;
|
||||
padding: 2upx 12upx;
|
||||
border-radius: 8upx;
|
||||
background-color: #eb5232;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: -14upx;
|
||||
right: -8upx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.operation-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.num {
|
||||
font-size: 32upx;
|
||||
padding: 0 16upx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.btnClick {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
position: absolute;
|
||||
// bottom: 0;
|
||||
}
|
||||
|
||||
.btnClick.l {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.btnClick.r {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user