|
@@ -1,6 +1,60 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- pages/cart/cart
|
|
|
+ <view class="cart-pages">
|
|
|
+ <view class="cart-bar">
|
|
|
+ <view>共25件商品</view>
|
|
|
+ <view @click="editCart">
|
|
|
+ <text class="blue" v-if="!isEdit">管理</text>
|
|
|
+ <text class="blue" v-else>完成</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goods-list">
|
|
|
+ <!-- 按分类显示 -->
|
|
|
+ <view class="goods-class-box" v-for="item in 2">
|
|
|
+ <view class="goods-class-head">
|
|
|
+ <view>
|
|
|
+ <u-checkbox shape="circle" name='goodsClas' @change="goodsClasChange">
|
|
|
+ 人气零食
|
|
|
+ </u-checkbox>
|
|
|
+ </view>
|
|
|
+ <view class="des">
|
|
|
+ 满<text>300</text>乐豆才可购买
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goods-class-list">
|
|
|
+ <!-- 商品列表 -->
|
|
|
+ <view class="goods-item" v-for="(item,index) in 3" :key="index">
|
|
|
+ <view class="checkbox">
|
|
|
+ <u-checkbox v-if="index!=1||isEdit" shape="circle" name='goodsItem'></u-checkbox>
|
|
|
+ </view>
|
|
|
+ <view class="goods-imgs">
|
|
|
+ <view v-if="index==1" class="goods-staus">已售罄</view>
|
|
|
+ <u-image width="150rpx" height="150rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg"></u-image>
|
|
|
+ </view>
|
|
|
+ <view class="goods-info">
|
|
|
+ <view class="good-name">拉就是两地分居拉进来就是两地分居拉进来就是两地分居拉进来进来</view>
|
|
|
+ <view class="goods-price">
|
|
|
+ <view><text>50</text>乐豆</view>
|
|
|
+ <view v-if="index!=1">
|
|
|
+ <u-number-box :min="1"></u-number-box>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cart-submit">
|
|
|
+ <view>
|
|
|
+ <u-checkbox shape="circle" name='checkAll' @change="checkAllChange" v-model="checkAll">全选</u-checkbox>
|
|
|
+ </view>
|
|
|
+ <view v-if="!isEdit">
|
|
|
+ <view>总计:<text>450</text>乐豆</view>
|
|
|
+ <u-button type="warning" @click="toOrder()">立即下单</u-button>
|
|
|
+ </view>
|
|
|
+ <view v-else>
|
|
|
+ <u-button type="error">删除</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -8,12 +62,151 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ checkAll: false,// 全选
|
|
|
+ isEdit: false, // 是否编辑模式
|
|
|
};
|
|
|
- }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 全选
|
|
|
+ checkAllChange(e) {
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ // 每个分类的全选
|
|
|
+ goodsClasChange(e){
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ // 编辑购物车
|
|
|
+ editCart(){
|
|
|
+ this.isEdit = !this.isEdit
|
|
|
+ },
|
|
|
+ //立即下单
|
|
|
+ toOrder(){
|
|
|
+ uni.redirectTo({
|
|
|
+ url:"/pages/toOrder/index"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-
|
|
|
+page{
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.cart-pages{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .cart-bar{
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 1px 1px 3px #eee;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding:20upx;
|
|
|
+ .blue{
|
|
|
+ color: #007AFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-list{
|
|
|
+ padding: 20upx 0;
|
|
|
+ flex-grow: 1;
|
|
|
+ overflow: auto;
|
|
|
+ .goods-class-box{
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 1px 1px 3px #eee;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ .goods-class-head{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20upx;
|
|
|
+ border-bottom: 1px solid #F8F8F8;
|
|
|
+ justify-content: space-between;
|
|
|
+ .des{
|
|
|
+ font-size: 26upx;
|
|
|
+ text{
|
|
|
+ color: #FA3534;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-item{
|
|
|
+ padding: 20upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #F8F8F8;
|
|
|
+ &:last-child{
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ .checkbox{
|
|
|
+ width: 80rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .goods-imgs{
|
|
|
+ position: relative;
|
|
|
+ .goods-staus{
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10000;
|
|
|
+ border-radius: 100%;
|
|
|
+ background: rgba($color: #000000, $alpha: 0.5);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 100rpx;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -50rpx;
|
|
|
+ margin-left: -50rpx;
|
|
|
+ color: #eee;
|
|
|
+ font-size: 24upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-info{
|
|
|
+ padding-left: 20upx;
|
|
|
+ }
|
|
|
+ .goods-price{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-top: 20upx;
|
|
|
+ >view{
|
|
|
+ &:first-child{
|
|
|
+ font-size: 22upx;
|
|
|
+ text{
|
|
|
+ color: red;
|
|
|
+ font-size: 30upx;
|
|
|
+ margin-right: 6upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cart-submit{
|
|
|
+ padding: 20upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 1px 1px 3px #eee;
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ >view{
|
|
|
+ &:last-child{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 26upx;
|
|
|
+ text{
|
|
|
+ color: red;
|
|
|
+ font-size: 40upx;
|
|
|
+ }
|
|
|
+ > view{
|
|
|
+ padding: 0 20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|