|
|
@@ -3,7 +3,7 @@
|
|
|
<!-- 顶部logo and 搜索 start-->
|
|
|
<view class="top-search flex">
|
|
|
<view class="top-logo">
|
|
|
- <image src="../../static/icon/sh-log.png" mode=""></image>
|
|
|
+ <image src="../../static/icon/logo.png" mode="widthFix"></image>
|
|
|
</view>
|
|
|
<view class="search-box flex" @click="clickSearch()">
|
|
|
<image class="search" src="../../static/icon/search-h.png" mode=""></image>
|
|
|
@@ -34,8 +34,78 @@
|
|
|
<view class="">超值正品优惠</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- 商品列表 -->
|
|
|
-
|
|
|
+ <!-- 预约 start-->
|
|
|
+ <view class="yuyue-wrap">
|
|
|
+ <view class="yuyue-top flex">
|
|
|
+ <image src="../../static/img/yuyue-top.png" mode="heightFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="yuyue-item" v-for="item in 3">
|
|
|
+ <view class="item-top">
|
|
|
+ <image src="../../static/img/yuyue.png" mode=""></image>
|
|
|
+ <view class="item-top-info flex">
|
|
|
+ <view class="">
|
|
|
+ 早上场<text>/大家都在买</text>
|
|
|
+ </view>
|
|
|
+ <view class="goto">
|
|
|
+ GO>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-info flex">
|
|
|
+ <view class="item-img">
|
|
|
+ <image src="../../static/img/zaoshang.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-val flex">
|
|
|
+ <view class="item-status">
|
|
|
+ 距离本场开始
|
|
|
+ </view>
|
|
|
+ <view class="item-djs">
|
|
|
+ <uni-countdown
|
|
|
+ color="#C6914E"
|
|
|
+ background-color="#F6EFDF"
|
|
|
+ :show-day="false"
|
|
|
+ :day="0"
|
|
|
+ :hour="10"
|
|
|
+ :minute="10"
|
|
|
+ :second="10"
|
|
|
+ ></uni-countdown>
|
|
|
+ </view>
|
|
|
+ <view class="item-base">
|
|
|
+ 开始时间 16:00:00 结束时间 16:30:00
|
|
|
+ </view>
|
|
|
+ <view class="item-btn" @click="yuyue()">
|
|
|
+ 已预约
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 预约 end-->
|
|
|
+ <!-- 预约弹窗 start-->
|
|
|
+ <uni-popup ref="popupyy" type="bottom">
|
|
|
+ <view class="popupyy-wrap">
|
|
|
+ <view class="popupyy-top">
|
|
|
+ 预约活动
|
|
|
+ </view>
|
|
|
+ <view class="popupyy-tit">
|
|
|
+ 本次预约冻结广告值
|
|
|
+ </view>
|
|
|
+ <view class="popupyy-val">
|
|
|
+ 330
|
|
|
+ </view>
|
|
|
+ <view class="" style="margin-top: 50rpx;">
|
|
|
+ 消费积分不低于100
|
|
|
+ </view>
|
|
|
+ <view class="" style="color: #FF4C4C;margin-top: 15rpx;">
|
|
|
+ 可用广告值700
|
|
|
+ </view>
|
|
|
+ <view class="popupyy-btn" @click="yuyueOk()">
|
|
|
+ 确认预约
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ <!-- 预约弹窗 end-->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -46,10 +116,10 @@
|
|
|
import {
|
|
|
loadIndexs
|
|
|
} from '@/api/index.js';
|
|
|
- import uniCountdowns from '@/components/uni-countdown/uni-countdowns.vue';
|
|
|
+ import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
|
|
|
export default {
|
|
|
components: {
|
|
|
- uniCountdowns
|
|
|
+ uniCountdown
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -119,6 +189,14 @@
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/product/product?id=' + id
|
|
|
});
|
|
|
+ },
|
|
|
+ // 打开预约弹窗
|
|
|
+ yuyue() {
|
|
|
+ this.$refs.popupyy.open()
|
|
|
+ },
|
|
|
+ // 确定预约
|
|
|
+ yuyueOk() {
|
|
|
+ this.$refs.popupyy.close()
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -138,12 +216,11 @@
|
|
|
background-color: #fff;
|
|
|
.top-logo {
|
|
|
width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
+ // height: 50rpx;
|
|
|
margin-right: 10rpx;
|
|
|
|
|
|
image {
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
+ width: 48rpx;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
@@ -202,4 +279,179 @@
|
|
|
height: 20rpx;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
+ .yuyue-wrap {
|
|
|
+ background-color: #fff;
|
|
|
+ .yuyue-top {
|
|
|
+ height: 117rpx;
|
|
|
+ justify-content: center;
|
|
|
+ image {
|
|
|
+ display: inline-block;
|
|
|
+ height: 31rpx;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .yuyue-item {
|
|
|
+ width: 690rpx;
|
|
|
+ margin: auto;
|
|
|
+
|
|
|
+ .item-top {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 18rpx;
|
|
|
+ // background-color: #bfa;
|
|
|
+ position: relative;
|
|
|
+ image {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ // position: relative;
|
|
|
+ }
|
|
|
+ .item-top-info {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ font-size: 33rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #C6914E;
|
|
|
+ padding-left: 35rpx;
|
|
|
+ padding-right: 25rpx;
|
|
|
+ text {
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #C6914E;
|
|
|
+ }
|
|
|
+ .goto {
|
|
|
+ width: 60rpx;
|
|
|
+ line-height: 26rpx;
|
|
|
+ background: #C6914E;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ font-size: 18rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-info {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 252rpx;
|
|
|
+ margin-top: -20rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
|
|
|
+ border-radius: 0px 0px 20rpx 20rpx;
|
|
|
+ padding: 0 25rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ .item-img {
|
|
|
+ width: 134rpx;
|
|
|
+ height: 133rpx;
|
|
|
+ background-color: red;
|
|
|
+ flex-shrink: 0;
|
|
|
+ image {
|
|
|
+ width: 134rpx;
|
|
|
+ height: 133rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-val {
|
|
|
+ flex-grow: 1;
|
|
|
+ height: 100%;
|
|
|
+ // background-color: #009688;
|
|
|
+ position: relative;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding-left: 25rpx;
|
|
|
+ justify-content: center;
|
|
|
+ .item-djs {
|
|
|
+ margin: 20rpx 0;
|
|
|
+ height: 42rpx;
|
|
|
+ }
|
|
|
+ .item-status {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .item-base {
|
|
|
+ font-size: 25rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .item-btn {
|
|
|
+ width: 159rpx;
|
|
|
+ height: 59rpx;
|
|
|
+ line-height: 59rpx;
|
|
|
+ background: #CCCCCC;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .popupyy-wrap {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 745rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx 20rpx 0px 0px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #999999;
|
|
|
+ font-weight: 500;
|
|
|
+ padding-top: 60rpx;
|
|
|
+ .popupyy-top {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ position: relative;
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ width: 138rpx;
|
|
|
+ height: 1rpx;
|
|
|
+ background: #CBCBCB;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 124rpx;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ width: 138rpx;
|
|
|
+ height: 1rpx;
|
|
|
+ background: #CBCBCB;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 124rpx;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .popupyy-tit {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 70rpx;
|
|
|
+ }
|
|
|
+ .popupyy-val {
|
|
|
+ font-size: 67rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ }
|
|
|
+ .popupyy-btn {
|
|
|
+ width: 680rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
+ background: #303030;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #F8DABA;
|
|
|
+ margin: 20rpx auto 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
