|
@@ -3,8 +3,8 @@
|
|
|
<view class="cart-bar">
|
|
|
<view>共25件商品</view>
|
|
|
<view @click="editCart">
|
|
|
- <text class="blue" v-if="!isEdit">管理</text>
|
|
|
- <text class="blue" v-else>完成</text>
|
|
|
+ <text class="edit" v-if="!isEdit">管理</text>
|
|
|
+ <text class="save" v-else>完成</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="goods-list">
|
|
@@ -12,28 +12,33 @@
|
|
|
<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 shape="circle" active-color="#01c9b2" name='goodsClas' @change="goodsClasChange">
|
|
|
人气零食
|
|
|
</u-checkbox>
|
|
|
</view>
|
|
|
<view class="des">
|
|
|
- 满<text>300</text>乐豆才可购买
|
|
|
+ <view>满<text>300</text></view>
|
|
|
+ <u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
|
|
|
+ <view>才可购买</view>
|
|
|
</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>
|
|
|
+ <u-checkbox v-if="index!=1||isEdit" shape="circle" active-color="#01c9b2" 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>
|
|
|
+ <u-image border-radius="12" width="158rpx" height="140rpx" src="/static/goods.png"></u-image>
|
|
|
</view>
|
|
|
<view class="goods-info">
|
|
|
<view class="good-name">拉就是两地分居拉进来就是两地分居拉进来就是两地分居拉进来进来</view>
|
|
|
<view class="goods-price">
|
|
|
- <view><text>50</text>乐豆</view>
|
|
|
+ <view>
|
|
|
+ <text>50</text>
|
|
|
+ <u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
|
|
|
+ </view>
|
|
|
<view v-if="index!=1">
|
|
|
<u-number-box :min="1"></u-number-box>
|
|
|
</view>
|
|
@@ -45,14 +50,17 @@
|
|
|
</view>
|
|
|
<view class="cart-submit">
|
|
|
<view>
|
|
|
- <u-checkbox shape="circle" name='checkAll' @change="checkAllChange" v-model="checkAll">全选</u-checkbox>
|
|
|
+ <u-checkbox shape="circle" name='checkAll' active-color="#01c9b2" @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 class="heji">
|
|
|
+ <view>总计:<text>450</text></view>
|
|
|
+ <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
|
|
|
+ </view>
|
|
|
+ <u-button size="mini" :custom-style="toOrderButton" type="error" @click="toOrder()">立即下单</u-button>
|
|
|
</view>
|
|
|
<view v-else>
|
|
|
- <u-button type="error">删除</u-button>
|
|
|
+ <u-button size="mini" :custom-style="toOrderButton" type="error">删除</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -64,6 +72,12 @@
|
|
|
return {
|
|
|
checkAll: false,// 全选
|
|
|
isEdit: false, // 是否编辑模式
|
|
|
+ toOrderButton: {
|
|
|
+ borderRadius:'100rpx',
|
|
|
+ fontSize:'30rpx',
|
|
|
+ width: '180rpx',
|
|
|
+ height: '60rpx'
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -99,18 +113,17 @@ page{
|
|
|
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;
|
|
|
+ .edit{
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .save{
|
|
|
+ color: #00aaff;
|
|
|
}
|
|
|
}
|
|
|
.goods-list{
|
|
|
- padding: 20upx 0;
|
|
|
flex-grow: 1;
|
|
|
overflow: auto;
|
|
|
.goods-class-box{
|
|
@@ -124,7 +137,10 @@ page{
|
|
|
border-bottom: 1px solid #F8F8F8;
|
|
|
justify-content: space-between;
|
|
|
.des{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
font-size: 26upx;
|
|
|
+ color: #999;
|
|
|
text{
|
|
|
color: #FA3534;
|
|
|
}
|
|
@@ -148,24 +164,26 @@ page{
|
|
|
.goods-imgs{
|
|
|
position: relative;
|
|
|
.goods-staus{
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
position: absolute;
|
|
|
z-index: 10000;
|
|
|
- border-radius: 100%;
|
|
|
+ border-radius: 15rpx;
|
|
|
background: rgba($color: #000000, $alpha: 0.5);
|
|
|
text-align: center;
|
|
|
- line-height: 100rpx;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- margin-top: -50rpx;
|
|
|
- margin-left: -50rpx;
|
|
|
+ line-height: 140rpx;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
color: #eee;
|
|
|
font-size: 24upx;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
.goods-info{
|
|
|
padding-left: 20upx;
|
|
|
+ .good-name{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
.goods-price{
|
|
|
display: flex;
|
|
@@ -175,10 +193,13 @@ page{
|
|
|
>view{
|
|
|
&:first-child{
|
|
|
font-size: 22upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
text{
|
|
|
color: red;
|
|
|
- font-size: 30upx;
|
|
|
+ font-size: 32upx;
|
|
|
margin-right: 6upx;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -203,7 +224,11 @@ page{
|
|
|
font-size: 40upx;
|
|
|
}
|
|
|
> view{
|
|
|
- padding: 0 20upx;
|
|
|
+ padding-right: 50upx;
|
|
|
+ }
|
|
|
+ .heji{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
}
|
|
|
}
|