倒计时

components/countDown.vue

+<template>
+	<view class="time_box" v-if="flag">
+		<view class="black_bg" v-if="day > 0">{{day}}天{{hour}}时</view>
+		<view class="black_bg" v-if="day === 0 && hour > 0">{{hour}}时{{minute}}分</view>
+		<view class="black_bg" v-if="day === 0 && hour === 0">{{minute}}分{{second}}秒</view>
+	</view>
+</template>
+
+<script>
+	import moment from 'moment';
+	export default {
+		props: {
+			time: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				day: '',
+				hour: '',
+				minute: '',
+				second: '',
+				flag: true
+			}
+		},
+		mounted() {
+			let timer = setInterval(() => {
+				const now = moment(new Date(), 'YYYY-MM-DD HH:mm:ss').format('x')-0,
+					  end = moment(this.time, 'YYYY-MM-DD HH:mm:ss').format('x')-0,
+					  du = moment.duration(end-now);
+				this.day = du.days();
+				this.hour = du.hours();
+				this.minute = du.minutes();
+				this.second = du.seconds();
+				if(du.days() <=0 && du.hours() <=0 && du.minutes() <=0 && du.seconds() <= 0) {
+					clearInterval(timer);
+					this.flag = false;
+				}
+			}, 1000);
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.time_box {
+		position: absolute;
+		left: 26rpx;
+		top: 40rpx;
+		z-index: 10;
+	}
+	.black_bg {
+		background:rgba(0,0,0,1);
+		height: 36rpx;
+		line-height: 36rpx;
+		color: #FFFFFF;
+		font-size: 24rpx;
+		padding: 0 20rpx;
+		width: 132rpx;
+		text-align: center;
+	}
+</style>

pages/search/search.vue

@@ -44,12 +44,23 @@
 		<!-- 商品列表 -->
 		<view class="goods-list" v-if="goods_list.length > 0">
 			<view class="goods-item" v-for="(item,index) in goods_list" :key="index">
+				<countDown v-if="item._source.is_pro === 1" :time="item._source.end_time"></countDown>
 				<view class="image-outer" @click="jumpPhpPage(`app=goods&id=${item._source.goods_id}`)">
 					<image :src="item._source.default_image || $noGoodsImg" lazy-load  @error="$__reloadResource(item)" mode="aspectFill"></image>
 				</view>
 				<view class="title">{{item._source.goods_name}}</view>
 				<view class="sub-title">{{item._source.goods_subname}}</view>
-				<view v-if="isLogin" class="price"><text class="price-tips">￥</text>{{item._source.price}}</view>
+				<view v-if="isLogin">
+					<view v-if="item._source.is_pro === 1">
+						<view class="price"><text class="price-tips">￥</text>{{item._source.pro_price.toFixed(2)}}
+							<text class="discount">{{(item._source.pro_price*10/Number(item._source.price)).toFixed(1)}}折</text>
+						</view>
+						<view class="origin_price">¥{{item._source.price}}</view>
+					</view>
+					<view v-if="item._source.is_pro === 0">
+						<view class="price"><text class="price-tips">￥</text>{{item._source.price}}</view>
+					</view>
+				</view>
 				<view v-if="!isLogin" class="unlogin_price">登录显示价格</view>
 				<!-- <view class="old-price"><text class="price-tips">￥</text>30.00</view> -->
 				<image class="cart-icon" @click="addCart(item._source.default_spec, 1)" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/credit_shop/global/icon_gouwuche%402x.png"></image>
@@ -61,6 +72,7 @@
 
 <script>
 	import uniIcons from "@/components/uni-icons/uni-icons.vue";
+	import countDown from "@/components/countDown.vue";
 	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
 	import empty from '@/components/empty.vue';
 	import service from '@/components/service.vue';
@@ -69,7 +81,8 @@
 		components: {
 			uniIcons,
 			empty,
-			uniLoadMore
+			uniLoadMore,
+			countDown
 		},
 		data() {
 			return {
@@ -166,6 +179,10 @@
 								this.goods_list = [];
 							}
 							this.goods_list = this.goods_list.concat(data.data);
+							this.goods_list.map((item, key) => {
+								if(item._source.is_pro === 1  && new Date(item._source.end_time).getTime() < new Date().getTime())
+								item._source.is_pro = 0;
+							});
 							this.isLogin = data.login_flg === 1;
 							const {total, page_size, current} = data.page;
 							this.param.current = current;
@@ -386,10 +403,29 @@
 			height: 44rpx;
 			line-height: 44rpx;
 			font-size: 32rpx;
-			color: #212121;
+			color: #AE8A57;
 			.price-tips{
 				font-size: 26rpx;
 			}
+			.discount {
+				display: inline-block;
+				padding: 0 14rpx;
+				height: 28rpx;
+				line-height: 28rpx;
+				text-align: center;
+				background:rgba(254,244,232,1);
+				color: #AE8A57;
+				font-size: 20rpx;
+				margin-left: 8px;
+				position: relative;
+				top: -4rpx;
+			}
+		}
+		.origin_price {
+			color: #aeaeae;
+			font-size: 24rpx;
+			line-height: 34rpx;
+			text-decoration: line-through;
 		}
 		.old-price{
 			height: 34rpx;