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

江拥羡橙

于 2024-09-05 10:45:30 发布

阅读量619

点赞数 3

分类专栏： # 小程序文章标签：小程序 javascript css3

本文链接：https://blog.csdn.net/qq_37215621/article/details/141924974

版权

小程序专栏收录该内容

23 篇文章 3 订阅

订阅专栏

在这里插入图片描述

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;
}