一小时原生画小程序商品展示单页面【代码实现】

index.js

Page({data: {menu:['国内捎带','组团拼车','团购接龙','二手闲置'],actionMenu:2,menuclass:['护肤品','电动车','分类一','分类二'],actionMenuclass:0,hou:0,min:0,sed:0,countDownNum:45454545 },onLoad: function(){this.countDown();},menuClick(e){let index = e.currentTarget.dataset.index;this.setData({actionMenu:index})},menuclassClick(e){let index = e.currentTarget.dataset.index;this.setData({actionMenuclass:index})},countDown: function () {let that = this;let countDownNum = that.data.countDownNum;that.setData({timer: setInterval(function () {if(countDownNum>0){countDownNum--;}var d = parseInt(countDownNum  / 3600 / 24);var h = parseInt(countDownNum  / 3600 % 24);var m = parseInt(countDownNum   / 60 % 60);var s = parseInt(countDownNum  % 60);d < 10 ? d = '0' + d : d;h < 10 ? h = '0' + h : h;m < 10 ? m = '0' + m : m;s < 10 ? s = '0' + s : s;// console.log('day',d+','+h+','+m+','+s)that.setData({countDownNum: countDownNum,d:d,hou:h,min:m,sed:s})if (countDownNum == 0) {clearInterval(that.data.timer);var a= parseInt((new Date("2019-05-24 16:42:30".replace(/-/g, "/")).getTime() - new Date("2019-05-24 16:42:20".replace(/-/g, "/")).getTime())/1000)that.setData({countDownNum:a})that.countDown();}}, 1000)})},
})

index.json

{"navigationBarTitleText": "海外互助","usingComponents": {}
}

index.wxml

<view class="page"><view class="menu"><view class="menu-item {{index == actionMenu && 'actionMenu'}}" wx:for="{{menu}}" wx:key="item" bind:tap="menuClick" data-index="{{index}}">{{item}}<view class="hot" wx:if="{{index == 0}}">热</view></view></view><view class="menuclass"><view class="menuclass-left"><view class="menuclass-item {{index === actionMenuclass && 'actionMenuclass'}}" wx:for="{{menuclass}}" wx:key="item" bind:tap="menuclassClick" data-index="{{index}}">{{item}}</view></view><image class="menuclass-icon" src="/pages/images/right.png"></image></view><view class="card-div"><view class="viewlr card-div-top"><view style="color: #27749E;">韩国roundlad</view><view class="time"><view class="time-item">{{hou}}</view><view class="time-dot">:</view><view class="time-item">{{min}}</view><view class="time-dot">:</view><view class="time-item">{{sed}}</view></view></view><view class="card-text">本人亲测 不好用包退！！ 复购率百分之80% 快抢购吧</view><view class="card"><image class="card-img" src="https://img.js.design/assets/img/662a18c2bdf13478465fc858.jpg#6d5f1f21101578874b051b8374180b75"></image><view class="headinfo"><view class="head"></view><view class="head-name">蒋晓冬的特卖</view></view><view class="card-content"><view class="titleinfo"><view class="titleinfo-name"><view class="titleinfo-state">已认证</view>韩国roundlab独岛水乳套装补水保湿学生护肤全新/100+200ml+肤敏感肌精油护肤</view></view><view class="progress"></view><view class="viewlr goods" style="align-items: flex-end;"><view class="goods-money">$260,00</view><view class="goods-residue">剩余拼团268套</view></view><view class="viewr goods-info"><view class="goods-info-item">12分钟前</view><view class="goods-info-item">4366人查看</view><view class="goods-info-item">23次跟团</view></view><view class="btn">报名占位</view></view></view></view>
</view>

index.wxss

.page{background: rgba(234, 240, 255, 1);height: 100vh;padding-top: 20rpx;
}
.viewlr{display: flex;justify-content: space-between;
}
.viewr{display: flex;justify-content:flex-end;
}
.menu{width: 685rpx;height: 90rpx;opacity: 1;border-radius: 100rpx;background: #DEE4F2;margin: 0 auto;display: flex;justify-content:space-around;align-items: center;
}
.menu-item{font-size: 28rpx;font-weight: 400;letter-spacing: 0px;line-height: 41.16rpx;color: rgba(72, 94, 150, 1);text-align: left;position: relative;flex: 1;text-align: center;
}
.actionMenu{height: 85rpx;line-height: 85rpx;border-radius: 50px;background: #FFFFFF;box-shadow: 0px 0px 7px 1px #ACBCE6;align-items: center;position: relative;color: #485E96;
}
.hot{width: 46rpx;height: 29.5rpx;line-height: 29.5rpx;text-align: center;opacity: 1;background: #FF4A50;opacity: 1;font-size: 25rpx;font-weight: 400;color: rgba(255, 255, 255, 1);position: absolute;top: -25rpx;right: -20rpx;border-radius: 10rpx;
}
.menuclass{display: flex;margin-top: 20rpx;padding: 0 25rpx;
}
.menuclass-left{display: flex;flex: 1;justify-content:space-around;align-items: center;
}
.menuclass-icon{width: 40rpx;height: 40rpx;margin-top: 10rpx;
}
.menuclass-item{width: 74rpx;height: 35rpx;opacity: 1;display: flex;font-size: 25rpx;font-weight: 400;letter-spacing: 0px;line-height: 34.3rpx;color: rgba(72, 94, 150, 1);background: #DEE4F2;padding: 10rpx 18rpx;border-radius: 30rpx;
}
.actionMenuclass{background: #35C2F7;color: #FFFFFF;
}
.card-div{border-radius: 20rpx;background: linear-gradient(180deg, #AEE2FA 0%, #EAF0FF 100%);padding: 30rpx;margin-top: 30rpx;
}
.card-text{font-size: 26rpx;font-weight: 500;color: rgba(39, 116, 158, 1);margin-bottom: 10rpx;
}
.card-div-top{margin-bottom: 14rpx;
}
.card{border-radius: 20rpx;background-color: #FFFFFF;padding-bottom: 20rpx;
}
.headinfo{display: flex;justify-content: flex-start;align-items: flex-end;margin-top: -80rpx;margin-left: 20rpx;
}
.card-img{width: 100%;border-top-right-radius: 20rpx;border-top-left-radius: 20rpx;
}
.head{width: 150rpx;height: 150rpx;opacity: 1;background: #A6D4AE;border-radius: 50%;
}
.head-name{color: rgba(39, 116, 158, 1);padding-bottom: 10rpx;
}
.titleinfo{display: flex;justify-content: flex-start;/* padding: 0 20rpx; */
}
.titleinfo-state{display: inline;margin-right: 20rpx;color: #D98C28;
}
.titleinfo-name{flex: 1;color: rgba(39, 116, 158, 1);font-size: 26rpx;
}
.progress{margin: 0 auto;height: 14px;opacity: 1;background: #E4F6FE;margin-top: 20rpx;position: relative;
}
.progress::before{content: "";position: absolute;left: 0;top: 0;width: 50%;height: 14px;opacity: 1;background: #B5E3FD;
}
.card-content{padding: 20rpx
}
.btn{height: 100rpx;line-height: 100rpx;text-align: center;border-radius: 102px;background: linear-gradient(180deg, #A3DEF8 0%, #3CC6F4 100%);box-shadow: 0px 2px 20px -2px #666666;margin-top: 50rpx;color: #FFFFFF;
}
.goods{margin-top: 30rpx;margin-bottom: 15rpx;
}
.goods-money{color: #E33C64;font-size: 40rpx;
}
.goods-residue{font-size: 26rpx;color: #27749E;
}
.goods-info{font-size: 23rpx;color: rgba(166, 166, 166, 1);
}
.goods-info-item{margin-left: 20rpx;
}
.time{display: flex;
}
.time-item{background-color: #27749E;color: #FFFFFF;font-size: 27rpx;padding: 5rpx;border-radius: 4rpx;
}
.time-dot{margin: 0 5rpx;
}