购物车修改
This commit is contained in:
GaoHao
353
pages/order_food/components/shoppingCart.vue
Normal file
353
pages/order_food/components/shoppingCart.vue
Normal file
@@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<viwe>
|
||||
<u-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">
|
||||
<u-icon name="trash" color="#999"></u-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 cartLists.data" :key="item.id">
|
||||
<view class="shop-item-content">
|
||||
<view class="cover" v-if="item.productId!=-999">
|
||||
<u-image :src="item.coverImg" width="120" height="120"></u-image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="name"> {{ item.name }} </view>
|
||||
<view class="select-sku-wrap"> {{ item.skuName }} </view>
|
||||
|
||||
<view class="price-wrap" style="padding-top: 0;">
|
||||
<view class="price">
|
||||
<text class="i">￥</text>
|
||||
<text class="num">{{ item.salePrice }}</text>
|
||||
</view>
|
||||
<view class="operation-wrap">
|
||||
<view class="btn" v-if="item.number&&item.productId!=-999" >
|
||||
<u-icon name="minus-circle-fill" size="50"></u-icon>
|
||||
<view class="btnClick" @click="cartListadd(item,index,'-')"></view>
|
||||
</view>
|
||||
<text class="num" v-if="item.number">{{ item.number }}</text>
|
||||
<view class="btn" v-if="item.productId!=-999">
|
||||
<u-icon name="plus-circle-fill" :color="item.isVip == 1 ? '#CECECE' : '#E9AB7A'" size="50"></u-icon>
|
||||
<view class="btnClick" @click="cartListadd(item,index,'+')"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-item-remark">
|
||||
<view class="label">备注</view>
|
||||
<u--input
|
||||
placeholder="商品备注(选填)"
|
||||
border="none"
|
||||
v-model="item.note"
|
||||
@blur="productBlur(item)"
|
||||
></u--input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</viwe>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
props:{
|
||||
cartLists:{
|
||||
type: Object
|
||||
},
|
||||
cartLists_count: {
|
||||
type: String
|
||||
},
|
||||
showCart:{
|
||||
type: Boolean
|
||||
},
|
||||
shopId:{
|
||||
type: String
|
||||
},
|
||||
tableCode:{
|
||||
type: String
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
|
||||
close () {
|
||||
this.$emit("close",false)
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 购物车加减
|
||||
* @param {Object} item
|
||||
* @param {Object} index
|
||||
* @param {Object} a
|
||||
*/
|
||||
async cartListadd(item, index, c) {
|
||||
try {
|
||||
if ( c == "+" && item.isVip == 1){
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
"skuId": item.skuId,
|
||||
"num": c == '+' ? item.number + 1 : item.number - 1, //数量
|
||||
"type": c == '+' ? 1 : 0,
|
||||
"isVip": item.isVip,
|
||||
"productId": item.productId, //商品id
|
||||
"note": item.note,
|
||||
"shopId": this.shopId,
|
||||
"userId": uni.cache.get('userInfo').id,
|
||||
"tableId": this.tableCode,
|
||||
}
|
||||
this.addCart(params);
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 菜品备注修改
|
||||
*/
|
||||
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.addCart(params);
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加到购物车
|
||||
*/
|
||||
async addCart(data) {
|
||||
let res = await this.api.cartAdd(data)
|
||||
if (res.code == 0) {
|
||||
this.showShopsku = false;
|
||||
this.pagemetashow = false;
|
||||
// this.$set(this, 'amountcartNumber', 0)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 清空购物车
|
||||
*/
|
||||
async cartclear() {
|
||||
let res = await this.api.cleanCart({
|
||||
"shopId": this.shopId,
|
||||
"tableId": this.tableCode,
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</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 $paddingSize;
|
||||
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: $paddingSize 0 0 $paddingSize;
|
||||
}
|
||||
|
||||
.shop-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: $paddingSize;
|
||||
.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: $paddingSize;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.num {}
|
||||
}
|
||||
|
||||
.sku-wrap {
|
||||
padding: 6upx 16upx;
|
||||
background-color: $color-priamry;
|
||||
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: $numColor;
|
||||
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>
|
||||
189
pages/order_food/components/shoppingCartBilling.vue
Normal file
189
pages/order_food/components/shoppingCartBilling.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<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">{{cartLists.amount||'0.00'}}</text>
|
||||
</view>
|
||||
<view class="btn" @tap="orderdetail">
|
||||
<text class="t">去结算</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
orderdetailFlag: true,
|
||||
|
||||
}
|
||||
},
|
||||
props:{
|
||||
cartListsdatashow: {
|
||||
type: Boolean
|
||||
},
|
||||
cartLists_count: {
|
||||
type: String
|
||||
},
|
||||
storeInfo:{
|
||||
type: Object
|
||||
},
|
||||
cartLists:{
|
||||
type: Object
|
||||
},
|
||||
showCart:{
|
||||
type: Boolean
|
||||
},
|
||||
shopId:{
|
||||
type: String
|
||||
},
|
||||
dinersNum:{
|
||||
type: String
|
||||
},
|
||||
tableCode:{
|
||||
type: String
|
||||
},
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 显示购物车
|
||||
*/
|
||||
isOpen () {
|
||||
this.$emit("isOpen",!this.showCart)
|
||||
},
|
||||
|
||||
/**
|
||||
* 结算直接生成订单
|
||||
*/
|
||||
orderdetail() {
|
||||
if (!this.orderdetailFlag) {
|
||||
return;
|
||||
}
|
||||
this.orderdetailFlag = false;
|
||||
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||''}&dinersNum=${this.dinersNum||''}`
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user