<template>
|
<view class="container">
|
<view class="no-login" v-if="!token">
|
<view class="c">
|
<text>还没有登录</text>
|
<button style="background-color: #a9a9a9" @click="goLogin">去登录</button>
|
</view>
|
</view>
|
<view class="login" v-else>
|
<!-- <view class="service-policy">
|
<view class="item">30天无忧退货</view>
|
<view class="item">48小时快速退款</view>
|
</view> -->
|
<view class="no-cart" v-if="cartGoods.length <= 0">
|
<view class="c">
|
<text>空空如也~</text>
|
<text>去添加点什么吧</text>
|
</view>
|
</view>
|
<view class="cart-view" v-else>
|
<view class="list">
|
<view class="group-item">
|
<view class="goods">
|
<view :class="'item ' + (isEditCart ? 'edit' : '')" v-for="(item, index) in cartGoods"
|
:key="index">
|
|
<view class="cart-goods">
|
|
<checkbox-group @change="checkedItem($event, { itemIndex: index })"
|
:data-item-index="index">
|
<checkbox class="checko" :checked="item.checked"></checkbox>
|
</checkbox-group>
|
|
<image class="img" :src="item.picUrl"></image>
|
<view class="info">
|
<view class="t">
|
<text class="name">{{ item.goodsName }}</text>
|
<text class="num">x{{ item.number }}</text>
|
</view>
|
<view class="attr">{{ isEditCart ? '已选择:' : '' }}{{ item.specifications || '' }}
|
</view>
|
<view class="b">
|
<text class="price">￥{{ item.price }}</text>
|
<!-- <view class="selnum">
|
<view class="cut" @tap="cutNumber" :data-item-index="index">-</view>
|
<input :value="item.number" class="number" :disabled="true"
|
type="number" />
|
<view class="add" @tap="addNumber" :data-item-index="index">+</view>
|
</view> -->
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="cart-bottom">
|
|
<checkbox-group class="van-checkbox" @change="checkedAll">
|
<checkbox :checked="checkedAllStatus">全选（{{ cartTotal.checkedGoodsCount }}）</checkbox>
|
</checkbox-group>
|
|
<view class="total">{{ !isEditCart ? '￥' + cartTotal.checkedGoodsAmount : '' }}</view>
|
|
<view class="action_btn_area">
|
<!-- <view :class="!isEditCart ? 'edit' : 'sure'" @tap="editCart">{{ !isEditCart ? '编辑' : '完成' }}
|
</view> -->
|
<view class="delete" @tap="deleteCart">删除({{ cartTotal.checkedGoodsCount }})
|
</view>
|
<view class="checkout" @tap="checkoutOrder" v-if="!isEditCart">立即预约</view>
|
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 底部弹窗 -->
|
<view class="example-body box">
|
<uni-popup ref="popup" type="bottom" background-color="#fff" style="height: 200px;">
|
<view class="box2">
|
<view style="font-size: 20px;font-weight: 600;">套餐名称：{{pacById.goodsName}}</view>
|
<view style="display: flex;align-items: flex-end;">
|
<div style="color: black;font-size: 20px">￥{{pacById.price}}</div>
|
</view>
|
<view style="display: flex;">
|
<view class="geren" @click="tiaozhuan(pacById.goodsId)">
|
<view style="margin-top: 4px;margin-left: 4px;">个人预约</view>
|
</view>
|
<view class="tuandui">
|
<view style="margin-top: 4px;margin-left: 4px;">团队预约</view>
|
</view>
|
</view>
|
</view>
|
</uni-popup>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
getMyCart,
|
removeMyCart
|
} from "@/api/system/cart";
|
export default {
|
data() {
|
return {
|
cartGoods: [],
|
checkedadd:[],
|
token: "",
|
cartTotal: {
|
goodsCount: 0,
|
goodsAmount: 0,
|
checkedGoodsCount: 0,
|
checkedGoodsAmount: 0
|
},
|
isEditCart: false,
|
checkedAllStatus: false,
|
editCartList: [],
|
hasLogin: false,
|
checkedall: [],
|
pacById: {}
|
};
|
},
|
onShareAppMessage() { //点亮发送给朋友
|
|
},
|
onLoad: function(options) {
|
console.log(options)
|
// 页面初始化 options为页面跳转所带来的参数
|
},
|
onReady: function() {
|
// 页面渲染完成
|
},
|
onPullDownRefresh() {
|
uni.showNavigationBarLoading(); //在标题栏中显示加载
|
this.getCartList();
|
uni.hideNavigationBarLoading(); //完成停止加载
|
uni.stopPullDownRefresh(); //停止下拉刷新
|
},
|
onShow: function() {
|
this.token = this.$store.state.user.token
|
if (this.token) {
|
this.getCartList();
|
}
|
},
|
onHide: function() {
|
// 页面隐藏
|
},
|
onUnload: function() {
|
// 页面关闭
|
},
|
methods: {
|
goLogin() {
|
uni.navigateTo({
|
url: '/pages/login'
|
});
|
},
|
|
getCartList: function() {
|
getMyCart().then(res => {
|
this.cartGoods = res.data
|
this.checkedadd = []
|
this.cartGoods.forEach(item => {
|
if (item.checked == 1) {
|
this.checkedadd.push(item)
|
}
|
})
|
if (this.checkedadd != []) {
|
this.checkedAllStatus = true
|
this.cartTotal.checkedGoodsAmount = 0
|
this.checkedadd.forEach(item => {
|
this.cartTotal.checkedGoodsAmount += item.price
|
})
|
this.cartTotal.checkedGoodsCount = this.checkedadd.length
|
this.cartTotal.checkedGoodsCount = this.checkedadd.length
|
}
|
})
|
},
|
|
isCheckedAll: function() {
|
//判断购物车商品已全选
|
return this.cartGoods.every(function(element, index, array) {
|
if (element.checked == true) {
|
return true;
|
} else {
|
return false;
|
}
|
});
|
},
|
|
doCheckedAll: function() {
|
//console.log("doCheckedAll")
|
},
|
|
checkedItem: function(event, _dataset) {
|
let itemIndex = event.target.dataset.itemIndex;
|
if (this.cartGoods[itemIndex].checked == 1) {
|
this.cartGoods[itemIndex].checked = 0
|
this.checkedAllStatus = false
|
this.checkedall = []
|
this.cartGoods.forEach((item => {
|
if (item.checked == 1) {
|
this.checkedall.push(item)
|
}
|
}))
|
this.cartTotal.checkedGoodsAmount = 0
|
this.checkedall.forEach((item => {
|
this.cartTotal.checkedGoodsAmount += item.price
|
}))
|
this.cartTotal.checkedGoodsCount = this.checkedall.length
|
this.cartTotal.checkedGoodsCount = this.checkedall.length
|
} else if (this.cartGoods[itemIndex].checked == 0) {
|
this.cartGoods[itemIndex].checked = 1
|
this.checkedall = []
|
this.cartGoods.forEach((item => {
|
if (item.checked == 1) {
|
this.checkedall.push(item)
|
}
|
}))
|
this.cartTotal.checkedGoodsAmount = 0
|
this.checkedall.forEach((item => {
|
this.cartTotal.checkedGoodsAmount += item.price
|
}))
|
if (this.checkedall.length == this.cartGoods.length) {
|
this.checkedAllStatus = true
|
}
|
this.cartTotal.checkedGoodsCount = this.checkedall.length
|
this.cartTotal.checkedGoodsCount = this.checkedall.length
|
}
|
|
},
|
|
getCheckedGoodsCount: function() {
|
|
},
|
|
checkedAll: function() {
|
let that = this
|
if (that.checkedAllStatus == true) {
|
that.checkedAllStatus = false
|
that.cartGoods.forEach(item => {
|
item.checked = 0
|
})
|
that.cartTotal.checkedGoodsCount = 0
|
that.cartTotal.checkedGoodsCount = 0
|
that.cartTotal.checkedGoodsAmount = 0
|
} else if (that.checkedAllStatus == false) {
|
that.checkedAllStatus = true
|
that.cartGoods.forEach(item => {
|
item.checked = 1
|
that.cartTotal.checkedGoodsAmount += item.price
|
})
|
that.cartTotal.checkedGoodsCount = that.cartGoods.length
|
that.cartTotal.checkedGoodsCount = that.cartGoods.length
|
}
|
|
},
|
|
editCart: function() {
|
|
},
|
|
updateCart: function(productId, goodsId, number, id) {
|
|
},
|
|
cutNumber: function(event) {
|
|
},
|
|
addNumber: function(event) {
|
|
},
|
|
checkoutOrder: function() {
|
// storage中设置了cartId，则是购物车购买
|
try {
|
uni.setStorageSync('cartId', 0);
|
if (this.checkedall.nv_length > 0) {
|
if (this.checkedall.length == 1) {
|
this.checkedall.forEach(item => {
|
this.pacById = item
|
})
|
this.toggle();
|
} else {
|
this.$modal.msgError("请选择一项进行预约")
|
}
|
} else {
|
if (this.checkedadd.length == 1) {
|
this.checkedadd.forEach(item => {
|
this.pacById = item
|
})
|
this.toggle();
|
} else {
|
this.$modal.msgError("请选择一项进行预约")
|
}
|
}
|
} catch (e) {}
|
},
|
toggle(type) {
|
this.type = type
|
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
|
this.$refs.popup.open(type)
|
},
|
|
tiaozhuan(pacId) {
|
uni.navigateTo({
|
url: `/pagesA/physicalAppointment/physicalAppointment?pacId=${pacId}`
|
})
|
},
|
|
deleteCart: function() {
|
let data = []
|
this.cartGoods.forEach(item => {
|
if (item.checked == 1) {
|
data.push(item.id)
|
}
|
})
|
removeMyCart(data).then(res => {
|
this.$modal.showToast("删除成功")
|
this.getCartList()
|
})
|
}
|
|
}
|
};
|
</script>
|
|
<style>
|
@import './cart.css';
|
|
.box2 {
|
height: 200px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-evenly;
|
align-items: flex-start;
|
margin-left: 10px;
|
}
|
|
.geren {
|
width: 70px;
|
height: 30px;
|
margin-right: 20px;
|
background-color: #ff834c;
|
color: #fff;
|
border-radius: 10px;
|
text-align: center;
|
line-height: 20px;
|
}
|
|
.tuandui {
|
width: 70px;
|
height: 30px;
|
background-color: #ff834c;
|
color: #fff;
|
border-radius: 10px;
|
text-align: center;
|
line-height: 20px;
|
}
|
</style>
|
