微信小程序 colorui购物车界面模板（无功能）

 

 

 

使用的是colorui的小程序UI框架。

colorui地址：https://www.color-ui.com/

---

index.wxml

<view class="cu-custom" style="height:{{CustomBar}}px;">
    <view class="cu-bar fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
        <view class="head-title">购物车</view>
    </view>
</view>

<view class="box"  style="top:{{CustomBar}}px;">
    <view class="canui-kong">
        <view class="bg-gradual-orange padding radius text-center shadow-blur canui-kong-icon">
            <text class="icon-cart"></text>
        </view>

        <view class="text-lg padding text-center">
            <text class="text-grey"> 购物车竟然是空的 </text>
        </view>

        <view class="padding flex flex-wrap justify-between align-center">
            <button class='cu-btn bg-gradual-green shadow-blur round'>去逛逛</button>
        </view>

    </view>

    <view class="cu-list menu menu-avatar goods-list" style="display: none;">

        <view class="cu-item">
            <view class='action-checkbox'>
                <checkbox class='round orange' checked></checkbox>
            </view>
            <view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
            <view class='content'>
                <view> 喵星人互动群 </view>
                <view class='goods-price-btn'>
                    <view class='text-red text-sm text-price'>100.00</view>
                    <view class='action-btn-sum'>
                        <button class='cu-btn'>-</button>
                        <input class='ca-sum' name='input' value="1"></input>
                        <button class='cu-btn'>+</button>
                    </view>
                </view>
            </view>
        </view>

        <view class="cu-item">
            <view class='action-checkbox'>
                <checkbox class='round orange' checked></checkbox>
            </view>
            <view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
            <view class='content'>
                <view> 喵星人互动群 </view>
                <view class='goods-price-btn'>
                    <view class='text-red text-sm text-price'>100.00</view>
                    <view class='action-btn-sum'>
                        <button class='cu-btn'>-</button>
                        <input class='ca-sum' name='input' value="1"></input>
                        <button class='cu-btn'>+</button>
                    </view>
                </view>
            </view>
        </view>
    </view>


    <view class="cu-bar bg-white solid-bottom canui-foor-fixed" style="display: none;">
        <view class="action canui-checked"> <checkbox class='round orange' checked></checkbox> </view>
        <view class="action canui-delete"> <button class='cu-btn icon-delete'></button> </view>
        <view class='submit canui-price'>合计 <text class="text-red text-price">200.00</text></view>
        <view class='bg-red submit canui-submit'>结算(2)</view>
    </view>

</view>

---

index.wxss

page {
    padding-top: 50px;
    padding-bottom:20rpx;
}
.cu-custom{
    position: absolute;
    width:100%;
}
.head-title{
    margin: 0 auto;
}
.cu-custom .cu-bar{
    padding-right:inherit;
    background-image:linear-gradient(45deg, #ff9700, #ed1c24);
}
.bg-gradual-green {
    background-image:linear-gradient(45deg, #ff9700, #ed1c24);
}
.text-green, .line-green, .lines-green {
    color:#e45c5c;
}
.box{
    position:absolute;
    width:100%;
}
.canui-kong{
    padding-top:100rpx;
}
.canui-kong-icon{
    width:260rpx;
    height:260rpx;
    line-height:220rpx;
    margin:0 auto;
    border-radius:200rpx;
    margin-bottom:30rpx;
}
.canui-kong-icon text{
    font-size:160rpx;
}
.canui-kong .bg-gradual-green{
    margin:0 auto;
}


.cu-list.menu-avatar>.cu-item{
    padding-left:220rpx;
}
.goods-list .cu-item .action-checkbox{
    left:30rpx;
    position:absolute;
}
.cu-list.menu-avatar>.cu-item>.cu-avatar{
    left:100rpx;
}
.goods-list .cu-item .goods-price-btn{
    position:relative;
}
.goods-list .cu-item .text-price{
    padding-right:260rpx;
}
.goods-list .cu-item .action-btn-sum{
    position:absolute;
    right:0px;
    top:0px;
    text-align:right;
    border:1px solid #D9D9D9;
    border-radius:2px;
}
.goods-list .cu-item .cu-btn{
    float:left;
    width:24px;
    height:24px;
    line-height:24px;
    border-radius:0px;
    font-size:18px;
    padding:0px;
    background-color: #F7F6F6;
}
.goods-list .cu-item .ca-sum{
    float:left;
    width:32px;
    height:24px;
    text-align:center;
    font-size:12px;
    line-height:24px;
    background-color: #fbfbfb;
    border-left:1px solid #D9D9D9;
    border-right:1px solid #D9D9D9;
    min-height:24px;
}
.canui-foor-fixed{
    position: fixed;
    bottom: 0;
    width: 100%;
    min-height:85rpx;
}
.canui-checked{
    width:75rpx;
}
.canui-delete{
    width:100rpx;
}
.canui-delete .cu-btn{
    background-color:#fff;
    font-size:35rpx;
}
.canui-price{
    width:400rpx;
    text-align:right;
    align-self:stretch;
    line-height:85rpx;
    padding-right:20px;
    font-size:13px;
}
.canui-submit{
    width:200rpx;
    align-self:stretch;
    align-items:center;
    display:flex;
    text-align:center;
    justify-content:center;
    font-size:13px;
}

 

---

index.js

const app = getApp();

Page({
	data: {
		StatusBar: app.globalData.StatusBar,
		CustomBar: app.globalData.CustomBar,
		hidden: true,
	},
	onLoad: function (option) {

	}
	
});

 

---

 

由于没有写功能，所以，js代码很少。