秒杀 团购
This commit is contained in:
parent
72c6cd95cc
commit
af5303d758
|
|
@ -131,6 +131,10 @@
|
|||
uni.navigateTo({//返回项目订单
|
||||
url:'/my/order/payModifyMs'
|
||||
})
|
||||
}else if(this.content=='拼团'){
|
||||
uni.navigateTo({//返回项目订单
|
||||
url:'/my/order/payModifyPt'
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<view class="padding-bottom u-skeleton">
|
||||
<view class="bgImg u-skeleton-fillet">
|
||||
<view class="head-top">
|
||||
<view class="pay-title" style="">{{orderXm.type=='104'?'服务套餐':orderXm.type=='105'?'项目次卡':'服务疗程'}}</view>
|
||||
<view class="pay-title" style="">服务项目</view>
|
||||
<view class="flex">
|
||||
<view class="" style="width: 160upx;height: 160upx;">
|
||||
<image :src="orderXm.packageImg"
|
||||
|
|
@ -296,7 +296,6 @@
|
|||
startTime:that.orderXm.startTime,
|
||||
endTime:that.orderXm.endTime,
|
||||
couponId: that.couponId,
|
||||
orders:'',
|
||||
ordersPackageList:[
|
||||
{packageId: that.orderXm.id,num: that.number},
|
||||
],
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -7,7 +7,7 @@
|
|||
<view class="bgImg u-skeleton-fillet" v-if="order.ordersPackageList && order.ordersPackageList.length > 0"
|
||||
style="padding: 0 29rpx;">
|
||||
<view class="head-top">
|
||||
<view class="pay-title" style="">{{orderXm.type=='104'?'服务套餐':orderXm.type=='105'?'项目次卡':'服务疗程'}}</view>
|
||||
<view class="pay-title" style="">服务项目</view>
|
||||
<view class="flex justify-around">
|
||||
<view class="" style="width: 160upx;height: 160upx;">
|
||||
<image :src="order.ordersPackageList[0].packageImg"
|
||||
|
|
@ -51,11 +51,11 @@
|
|||
<view class="fei-title">费用明细</view>
|
||||
<view class="fei-view">
|
||||
<view class="fei-view-list">
|
||||
<span>{{orderXm.type=='104'?'套餐':orderXm.type=='105'?'次卡':'疗程'}}价格</span>
|
||||
<span>￥{{order.sumMoney}}</span>
|
||||
<span>项目价格</span>
|
||||
<span>￥{{order.ordersPackageList[0].price}}</span>
|
||||
</view>
|
||||
<view class="fei-view-list">
|
||||
<span>{{orderXm.type=='104'?'套餐':orderXm.type=='105'?'次卡':'疗程'}}数量</span>
|
||||
<span>项目数量</span>
|
||||
<span>{{order.ordersPackageList[0].num}}</span>
|
||||
</view>
|
||||
<view class="fei-view-list" v-if="order.couponMoney">
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
53
pages.json
53
pages.json
|
|
@ -53,6 +53,28 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/pinTuanOderDrtail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "拼团详情",
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/pTuanOderDrtail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "拼团订单详情",
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/myMsOderDrtail",
|
||||
"style": {
|
||||
|
|
@ -111,7 +133,18 @@
|
|||
{
|
||||
"path": "pages/my/newTeaml",
|
||||
"style": {
|
||||
"navigationBarTitleText": "团购",
|
||||
"navigationBarTitleText": "团购列表",
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/newTeamlDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "团购详情",
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
|
|
@ -651,6 +684,24 @@
|
|||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},{
|
||||
"path": "order/payModifyPt",
|
||||
"style": {
|
||||
"navigationBarTitleText": "拼团订单",
|
||||
"enablePullDownRefresh": false,
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},{
|
||||
"path": "order/paydingPt",
|
||||
"style": {
|
||||
"navigationBarTitleText": "拼团订单",
|
||||
"enablePullDownRefresh": false,
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},{
|
||||
"path": "order/payModifyMs",
|
||||
"style": {
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
<image src="../../static/index-fenglei10.png" mode="widthFix"></image>
|
||||
<span class="feng_word">充值赠送</span>
|
||||
</view>
|
||||
<view class="index-project-content" @click="qidai()">
|
||||
<view class="index-project-content" @click="goNav('/pages/my/newTeaml?text='+'index')">
|
||||
<image src="../../static/index-fenglei5.png" mode="widthFix"></image>
|
||||
<span class="feng_word">超值拼团</span>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@
|
|||
<image src="../../static/my-liaocheng.png" mode=""></image>
|
||||
<span class="my-serve-list-text">服务疗程</span>
|
||||
</view>
|
||||
<view class="my-serve-list" @click="miaoshao()">
|
||||
<view class="my-serve-list" @click="tuangou()">
|
||||
<image src="../../static/my-liaocheng2.png" mode=""></image>
|
||||
<span class="my-serve-list-text">新人拼团</span>
|
||||
</view>
|
||||
|
|
@ -606,6 +606,11 @@
|
|||
})
|
||||
}
|
||||
},
|
||||
tuangou(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/my/newTeaml?text='+'my'
|
||||
})
|
||||
},
|
||||
miaoshao(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/my/newseckill?text='+'my'
|
||||
|
|
|
|||
|
|
@ -21,10 +21,10 @@
|
|||
<view class="header-bottom-money-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{mainData.price}}</span>
|
||||
<span>/套</span>
|
||||
<span>/次</span>
|
||||
</view>
|
||||
<view class="header-bottom-money-jia">
|
||||
￥{{mainData.oldPrice}}/套
|
||||
￥{{mainData.oldPrice}}/次
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
</view>
|
||||
<view class="detail-foot">
|
||||
<view class="detail-foot-nav">
|
||||
<span class="detail-foot-nav-text">套餐详情</span>
|
||||
<span class="detail-foot-nav-text">项目详情</span>
|
||||
<span class="detail-foot-nav-bor"></span>
|
||||
</view>
|
||||
<view class="detail-foot-mian">
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
<view style="display: flex; align-items: flex-end;">
|
||||
<view class="header-bottom-money-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{item.price}}</span>
|
||||
<span>{{item.packagePrice}}</span>
|
||||
</view>
|
||||
<view class="header-bottom-money-jia" >
|
||||
￥{{item.oldPrice}}
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@
|
|||
<view class="header-bottom-title">
|
||||
<view class="header-bottom-title-text">
|
||||
<span>{{getList.title}}</span>
|
||||
<span class="header-bottom-title-liao">
|
||||
<!-- <span class="header-bottom-title-liao">
|
||||
套餐
|
||||
</span>
|
||||
</span> -->
|
||||
</view>
|
||||
<view class="header-bottom-title-num">
|
||||
<span>{{getList.sales}}</span>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<view class="header-bottom-money">
|
||||
<view class="header-bottom-money-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{getList.price}}</span>
|
||||
<span>{{getList.packagePrice}}</span>
|
||||
</view>
|
||||
<view class="header-bottom-money-jia">
|
||||
￥{{getList.oldPrice}}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -45,7 +45,7 @@
|
|||
<!-- <view class="item-line"></view> -->
|
||||
<view class="item-img">
|
||||
<image :src="item.packageImg" mode=""></image>
|
||||
<span class="img-span" v-if="text=='my'">{{item.status=='1'?'未用完':item.status=='2'?'退款':'已用完'}}</span>
|
||||
<span class="img-span" v-if="text=='my'">{{item.status=='1'?'未用完':item.status=='2'?'退款':item.status=='9'?'已用完':'其他'}}</span>
|
||||
</view>
|
||||
<view class="item-view">
|
||||
<view class="view-cata">
|
||||
|
|
@ -55,9 +55,8 @@
|
|||
<view class="item-view-bottom-qian">
|
||||
<span>￥</span>
|
||||
<span>{{item.price}}</span>
|
||||
<span>/{{item.serviceCount}}次</span>
|
||||
<span>￥</span>
|
||||
<span>{{item.oldPrice}}/{{item.serviceCount}}次</span>
|
||||
<!-- <span>/{{item.serviceCount}}次</span> -->
|
||||
<span>￥{{item.oldPrice}}</span>
|
||||
</view>
|
||||
<view class="shop_label" v-if="tagsData">
|
||||
<span v-for="tag in tagsData" :key="tag">{{tag}}</span>
|
||||
|
|
@ -295,7 +294,7 @@
|
|||
color: #848484;
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
.item-view-bottom-qian span:nth-child(4){
|
||||
.item-view-bottom-qian span:nth-child(3){
|
||||
font-size: 28rpx;
|
||||
color: #848484;
|
||||
text-decoration-line: line-through;
|
||||
|
|
@ -311,11 +310,7 @@
|
|||
font-size: 36.81rpx;
|
||||
color: #F95900;
|
||||
}
|
||||
.item-view-bottom-qian span:nth-child(3){
|
||||
font-weight: 400;
|
||||
font-size: 25rpx;
|
||||
color: #F95900;
|
||||
}
|
||||
|
||||
.item-view-bottom{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
</view>
|
||||
<view class="push-button">
|
||||
<view class="detail-btn" :class="[mainData.btnShow==true?'aBavk':'hBack']" @click="goumai(mainData)">
|
||||
{{text=='index'?'立即购买':'立即预约'}}
|
||||
{{dataList.name=='index'?'立即购买':'立即预约'}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- 支付方式 -->
|
||||
|
|
@ -178,9 +178,18 @@
|
|||
goumai(item){//立即购买
|
||||
this.$queue.setData('mainData',item)
|
||||
this.$queue.setData('youhui','');
|
||||
uni.navigateTo({
|
||||
url:'/my/order/payModifyMs?ordersId='+item.id
|
||||
})
|
||||
|
||||
if(item.btnShow=='false'){
|
||||
uni.showToast({
|
||||
icon:'error',
|
||||
title:'已过秒杀时间，无法下单！'
|
||||
})
|
||||
}else{
|
||||
uni.navigateTo({
|
||||
url:'/my/order/payModifyMs?ordersId='+item.id
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
goNav(e) {
|
||||
uni.navigateTo({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,606 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="header">
|
||||
<view class="header-top" :style="backgroundStyle" @click="goNav('/my/vip/index')">
|
||||
<image src="../../static/servicePackage/member_ba.png" mode="widthFix" v-if="!isVIP"></image>
|
||||
<image src="../../static/activate2.png" mode="widthFix" v-if="isVIP"></image>
|
||||
</view>
|
||||
<view class="header-bottom-top-list">
|
||||
<view class="header-bottom-foot-view2">
|
||||
<image class="header-bottom-foot-view2-img1" src="../../static/servicePackage/idCard.png" mode=""></image>
|
||||
<span>实名认证</span>
|
||||
</view>
|
||||
<view class="header-bottom-foot-view2" style="margin: 0px 7px;">
|
||||
<image class="header-bottom-foot-view2-img2" src="../../static/servicePackage/money.png" mode=""></image>
|
||||
<span>资质认证</span>
|
||||
</view>
|
||||
<view class="header-bottom-foot-view2">
|
||||
<image class="header-bottom-foot-view2-img3" src="../../static/servicePackage/shuangyue.png" mode=""></image>
|
||||
<span>平台担保</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="header-bottom">
|
||||
<view class="header-bottom-top">
|
||||
|
||||
<view class="header-bottom-title">
|
||||
<view class="header-bottom-title-text">
|
||||
<span>{{getList.title}}</span>
|
||||
<!-- <span class="header-bottom-title-liao">
|
||||
套餐
|
||||
</span> -->
|
||||
</view>
|
||||
<view class="header-bottom-title-num">
|
||||
<span>{{getList.sales}}</span>
|
||||
<span> 人选择</span>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="header-bottom-money-view">
|
||||
<view class="header-bottom-money">
|
||||
<view class="header-bottom-money-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{getList.packagePrice}}</span>
|
||||
</view>
|
||||
<view class="header-bottom-money-jia">
|
||||
￥{{getList.oldPrice}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="header-bottom-foot">
|
||||
<view class="header-bottom-foot-cont">
|
||||
<!-- <view class="header-fubz">保障</view> -->
|
||||
<view class="header-bottom-foot-view">
|
||||
<image class="header-bottom-foot-view-img1" src="../../static/servicePackage/idCard.png" mode=""></image>
|
||||
<span>未服务全额退款</span>
|
||||
</view>
|
||||
<view class="header-bottom-foot-view" style="margin: 0px 7px;width: 26%;">
|
||||
<image class="header-bottom-foot-view-img2" src="../../static/servicePackage/money.png" mode=""></image>
|
||||
<span>不满意重做</span>
|
||||
</view>
|
||||
<view class="header-bottom-foot-view">
|
||||
<image class="header-bottom-foot-view-img3" src="../../static/servicePackage/shuangyue.png" mode=""></image>
|
||||
<span>最快30分钟上门</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--<view class="header-bottom-foot">
|
||||
<view class="header-bottom-foot-title">服务保障</view>
|
||||
<view class="header-bottom-foot-cont">
|
||||
<view class="header-bottom-foot-view">
|
||||
<image class="header-bottom-foot-view-img1" src="../../static/servicePackage/idCard.png" mode=""></image>
|
||||
<span>未服务全额退款</span>
|
||||
</view>
|
||||
<view class="header-bottom-foot-view" style="margin: 0px 7px;">
|
||||
<image class="header-bottom-foot-view-img2" src="../../static/servicePackage/money.png" mode=""></image>
|
||||
<span>不满意重做</span>
|
||||
</view>
|
||||
<view class="header-bottom-foot-view">
|
||||
<image class="header-bottom-foot-view-img3" src="../../static/servicePackage/shuangyue.png" mode=""></image>
|
||||
<span>最快30分钟上门</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>-->
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-foot">
|
||||
<view class="detail-foot-nav">
|
||||
<span class="detail-foot-nav-text">适用说明</span>
|
||||
<span class="detail-foot-nav-bor"></span>
|
||||
</view>
|
||||
<view class="detail-foot-mian">
|
||||
<view class="detail-foot-mian-top">
|
||||
<span class="detail-foot-mian-top-title">性别限制: </span>
|
||||
<span class="detail-foot-mian-top-text">不限性别</span>
|
||||
</view>
|
||||
<view class="detail-foot-mian-top-bottom">
|
||||
<span class="detail-foot-mian-top-title">适应人群: </span>
|
||||
<span class="detail-foot-mian-top-text">
|
||||
{{getList.applyPeople}}
|
||||
</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-foot">
|
||||
<view class="detail-foot-nav">
|
||||
<span class="detail-foot-nav-text">项目详情</span>
|
||||
<span class="detail-foot-nav-bor"></span>
|
||||
</view>
|
||||
<view class="detail-foot-mian">
|
||||
<image class="detail-foot-mian-img" v-for="(item,index) in contentImg" :key="index" :src="item" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-btn" v-if="dataList.status=='0'" @click="goumai(getList)">
|
||||
立即预约
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
dataList:[],
|
||||
getList:[],
|
||||
isVIP:false,
|
||||
// 背景图片的URL可以是动态的，比如从API获取或根据条件生成
|
||||
backgroundImageUrl: '',
|
||||
nameText:'',
|
||||
labels:[],
|
||||
contentImg:[],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
backgroundStyle() {
|
||||
return {
|
||||
backgroundImage: `url(${this.backgroundImageUrl})`,
|
||||
backgroundSize: 'cover', // 根据需要调整
|
||||
};
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
var that=this;
|
||||
that.dataList=e;
|
||||
that.isVIP=this.$queue.getData('isVIP');
|
||||
that.getData();
|
||||
},
|
||||
methods:{
|
||||
goNav(e) {
|
||||
uni.navigateTo({
|
||||
url: e
|
||||
})
|
||||
},
|
||||
goumai(item){//立即购买
|
||||
this.$queue.setData('getJishi','')
|
||||
this.$queue.setData('daibudan','');
|
||||
this.$queue.setData('mainData',item);
|
||||
this.$queue.setData('xiangmu',item);
|
||||
this.$queue.setData('getJishi','');
|
||||
this.$queue.setData('youhui','');
|
||||
uni.navigateTo({
|
||||
url:'/my/order/payModifyTcMy?ordersId='+item.id
|
||||
})
|
||||
},
|
||||
getData(){
|
||||
var that=this;
|
||||
let data = {
|
||||
id: that.dataList.id,
|
||||
page: that.page,
|
||||
limit: that.limit,
|
||||
}
|
||||
that.$Request.get('/app/user/package/detail/getMyPackageDetail', data).then(res => {
|
||||
if (res.code == 0) {
|
||||
that.getList=res.data;
|
||||
that.backgroundImageUrl=that.getList.massageImg
|
||||
// that.labels=res.data.labels.split(',');
|
||||
that.contentImg=res.data.contentImg.split(",");
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.lab-view{
|
||||
width:100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.detail-foot-mian-txet{
|
||||
width: 50%;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.header-fubz{
|
||||
font-size: 26rpx;
|
||||
color: #029c88;
|
||||
font-weight: bold;
|
||||
}
|
||||
.header-bottom-title-liao{
|
||||
display: inline-block;
|
||||
padding: 2px 7px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
background: linear-gradient(-90deg, #FF6F48, #FF9E69);
|
||||
border-radius: 7px;
|
||||
margin-left: 5px;
|
||||
font-size: 10px;
|
||||
border-top-left-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
.detail-btn{
|
||||
width:95%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
|
||||
border-radius: 46rpx;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.detail-foot-mian-txet span:nth-child(1){
|
||||
color: #777777;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.detail-foot-mian-txet span:nth-child(2){
|
||||
color: #333;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
.detail-foot-mian-txet span:nth-child(3){
|
||||
color: #777777;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.detail-foot-mian-txet{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.detail-foot-mian-img{
|
||||
width: 100%;
|
||||
height:auto;
|
||||
}
|
||||
.detail-foot-mian-top-bottom{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.detail-foot-mian-top-title{
|
||||
color: #333333;
|
||||
}
|
||||
.detail-foot-mian-top-text{
|
||||
color: #777777;
|
||||
width:80%;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.detail-foot-mian-top,.detail-foot-mian-top-bottom{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.header-bottom-title-bottom span{
|
||||
font-weight: bold;
|
||||
font-size: 22rpx;
|
||||
color: #20AB95;
|
||||
}
|
||||
.header-bottom-title-bottom image{
|
||||
width: 34.03rpx;
|
||||
height: 30.56rpx;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.header-bottom-title-bottom{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.shouc image{
|
||||
width: 34.03rpx;
|
||||
height: 32.64rpx;
|
||||
}
|
||||
|
||||
.shouc{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.detail-foot-nav-bor{
|
||||
width: 64px;
|
||||
height: 11rpx;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: linear-gradient(90deg,rgba(234, 248, 245,0.7),rgba(132, 211, 196,0.7));
|
||||
}
|
||||
.detail-foot-nav-text{
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.detail-foot-nav{
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.detail-foot{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 5rpx 0rpx;
|
||||
|
||||
}
|
||||
|
||||
.tese span:nth-child(1){
|
||||
font-weight: bold;
|
||||
font-size: 22rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.tese span:nth-child(2){
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #8D9194;
|
||||
}
|
||||
.tese{
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2; /* 显示的行数，可以根据需要修改 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.detail-foot-list-top span:nth-child(1){
|
||||
font-weight: bold;
|
||||
font-size: 31rpx;
|
||||
color: #3F3F3F;
|
||||
}
|
||||
.detail-foot-list-top span:nth-child(2){
|
||||
width: 76rpx;
|
||||
height: 33rpx;
|
||||
line-height: 33rpx;
|
||||
text-align: center;
|
||||
border-radius: 16rpx;
|
||||
border: 1px solid #7D7D7D;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #777777;
|
||||
margin: 0px 25px 0px 5px;
|
||||
}
|
||||
.detail-foot-list-top span:nth-child(3){
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
.detail-foot-mian{
|
||||
width: 95%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
border-radius: 21rpx;
|
||||
padding: 15px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.jianjie{
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #8D9194;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2; /* 显示的行数，可以根据需要修改 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.header-bottom-mian{
|
||||
margin: 10px 0px;
|
||||
}
|
||||
.header-bottom-mian-title{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.header-bottom-mian-title span{
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #20AB95;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.header-bottom-mian-title image{
|
||||
width: 30.56rpx;
|
||||
height: 29.86rpx;
|
||||
}
|
||||
.header-bottom-foot-view-img1{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
.header-bottom-foot-view-img2{
|
||||
width: 23rpx;
|
||||
height: 23rpx;
|
||||
}
|
||||
.header-bottom-foot-view-img3{
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
.header-bottom-foot-view image{
|
||||
margin-right: 3px;
|
||||
}
|
||||
.header-bottom-foot-view{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1px 8px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
background-color: rgba(230, 246, 243, 1);
|
||||
border-radius: 15px;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
color: #029c88;
|
||||
}
|
||||
.header-bottom-foot-view2-img1{
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
}
|
||||
.header-bottom-foot-view2-img2{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
.header-bottom-foot-view2-img3{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
.header-bottom-foot-view2 image{
|
||||
margin-right: 3px;
|
||||
}
|
||||
.header-bottom-foot-view2{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2px 20px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color: rgba(230, 246, 243, 1);
|
||||
border-radius: 30px;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #019c88;
|
||||
margin: 5rpx auto;
|
||||
}
|
||||
.header-bottom-foot-title{
|
||||
width:100%;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
font-size: 23rpx;
|
||||
color: #08A28A;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.header-bottom-foot-cont{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-bottom-top-list{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: rgba(230, 246, 243, 0.6);
|
||||
}
|
||||
.header-bottom-foot{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
.header-bottom-money-jia{
|
||||
font-size: 28rpx;
|
||||
color: #848484;
|
||||
line-height: 37rpx;
|
||||
text-decoration-line: line-through;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.header-bottom-money-zhen span{
|
||||
color: #F95900;
|
||||
}
|
||||
.header-bottom-money-zhen span:nth-child(1){
|
||||
font-size: 25rpx;
|
||||
}
|
||||
.header-bottom-money-zhen span:nth-child(2){
|
||||
font-size:45.81rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.header-bottom-money-zhen span:nth-child(3){
|
||||
font-size: 25rpx;
|
||||
}
|
||||
.header-bottom-money-zhen{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.header-bottom-money-view{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top:5px;
|
||||
}
|
||||
.header-bottom-money{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
.header-bottom-title-num span{
|
||||
font-weight: bold;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
.header-bottom-title-num span:nth-child(1){
|
||||
font-weight: bold;
|
||||
color: #08A28A;
|
||||
}
|
||||
.header-bottom-title-num span:nth-child(2){
|
||||
color: #848485;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.header-bottom-title-text{
|
||||
font-weight: bold;
|
||||
font-size: 35rpx;
|
||||
color: #13141A;
|
||||
}
|
||||
.header-bottom-title{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-bottom-top{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header-bottom{
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.header-top image{
|
||||
width: 706.25rpx;
|
||||
height: 105.07rpx;
|
||||
}
|
||||
.header-top{
|
||||
width: 100%;
|
||||
height: 745.83rpx;
|
||||
background-image: url('../../static/servicePackage/display.png');
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
.header{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
background-color: #f7f7f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,690 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="header">
|
||||
<view class="header-top" :style="backgroundStyle" @click="goNav('/my/vip/index')">
|
||||
<image src="../../static/servicePackage/member_ba.png" mode="widthFix" v-if="!isVip"></image>
|
||||
<image src="../../static/activate2.png" mode="widthFix" v-if="isVip"></image>
|
||||
</view>
|
||||
<view class="header-bottom">
|
||||
<view class="header-bottom-top">
|
||||
<view class="header-bottom-title">
|
||||
<view class="header-bottom-title-text">
|
||||
{{mainData.title}}
|
||||
</view>
|
||||
<view class="header-bottom-title-num">
|
||||
<span>{{mainData.sales}}</span>
|
||||
<span> 人选择</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="header-bottom-money-view">
|
||||
<view class="header-bottom-money">
|
||||
<view class="header-bottom-money-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{mainData.price}}</span>
|
||||
<span>/次</span>
|
||||
</view>
|
||||
<view class="header-bottom-money-jia">
|
||||
￥{{mainData.oldPrice}}/次
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="header-bottom-mian">
|
||||
<view class="header-bottom-mian-title">
|
||||
<image src="../../static/servicePackage/jianjie.png" mode=""></image>
|
||||
<span>套餐简介</span>
|
||||
</view>
|
||||
<view class="jianjie">
|
||||
{{mainData.content}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="header-bottom-foot">
|
||||
<view><image class="header-bottom-foot-title" src="../../static/dituzhaoren1.png" ></image></view>
|
||||
<view class="header-bottom-foot-view">
|
||||
<image class="header-bottom-foot-view-img1" src="../../static/servicePackage/idCard.png" mode=""></image>
|
||||
<span>实名认证</span>
|
||||
</view>
|
||||
<view class="header-bottom-foot-view" style="margin: 0px 7px;">
|
||||
<image class="header-bottom-foot-view-img2" src="../../static/servicePackage/money.png" mode=""></image>
|
||||
<span>资质认证</span>
|
||||
</view>
|
||||
<view class="header-bottom-foot-view">
|
||||
<image class="header-bottom-foot-view-img3" src="../../static/servicePackage/shuangyue.png" mode=""></image>
|
||||
<span>平台担保</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-foot">
|
||||
<view class="detail-foot-nav">
|
||||
<span class="detail-foot-nav-text">项目详情</span>
|
||||
<span class="detail-foot-nav-bor"></span>
|
||||
</view>
|
||||
<view class="detail-foot-mian">
|
||||
<view class="detail-foot-list" v-for="(item,index) in detailData" :key="index" @click="detail(item)">
|
||||
<view class="detail-foot-list-top">
|
||||
<span style="margin-right: 5px;">{{item.title}}</span>
|
||||
</view>
|
||||
<view class="detail-view" style="position: relative;">
|
||||
<image class="detail-view-img" :src="item.massageImg" mode=""></image>
|
||||
<span v-if="serviData.name!='index'" class="img-span">{{item.status=='1'?'已使用':'未使用'}}</span>
|
||||
<view class="detail-view-mina">
|
||||
<view class="header-bottom-money" style="margin: 7px 0px;display: flex;justify-content: space-between; ">
|
||||
<view style="display: flex; align-items: flex-end;">
|
||||
<view class="header-bottom-money-zhen">
|
||||
<span>￥</span>
|
||||
<span>{{item.packagePrice}}</span>
|
||||
</view>
|
||||
<view class="header-bottom-money-jia" >
|
||||
￥{{item.oldPrice}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="service-more" @click.stop="xiangqing(item)">{{item.status=='1'?'详情':'预约'}}</view>
|
||||
</view>
|
||||
<view style="color: #019c88; font-size: 26rpx;">服务时长:{{item.duration}}分钟</view>
|
||||
<view class="tese">
|
||||
<span>项目特色: </span>
|
||||
<span>{{item.jianjie}}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-foot-title">
|
||||
服务项目{{index+1}}
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 70rpx;"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="push-button">
|
||||
<view class="detail-btn" v-if="serviData.name=='index'" @click="openpay(mainData)">
|
||||
立即购买
|
||||
</view>
|
||||
</view>
|
||||
<!-- 支付方式 -->
|
||||
<u-popup v-model="showpay" mode="bottom" :closeable="closeable">
|
||||
<view class="popup_pay">
|
||||
<view style="background-color: #fff;">
|
||||
<view style="padding: 0 20upx;margin-top: 60rpx;margin-bottom: 20rpx;display: flex;flex-direction: column;justify-content: center;">
|
||||
<view
|
||||
style="width:92%;display: flex;height: 100upx;align-items: center;padding: 20upx 0;justify-content: center;"
|
||||
v-for="(item,index) in openLists" :key='item.id'>
|
||||
<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;">
|
||||
</image>
|
||||
<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">
|
||||
{{item.text}}
|
||||
</view>
|
||||
<radio-group name="openWay" style="margin-left: 45upx;" @tap='selectWay(item)'>
|
||||
<label class="tui-radio">
|
||||
<radio color="#096f4b" :checked="openWay === item.id ? true : false" />
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pay_btn" @click="pay()">确认支付</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
checkbox:false,
|
||||
couponData:[],
|
||||
couponId:'',
|
||||
tordersId: '',
|
||||
tpayMoney: '',
|
||||
paySel: 0,
|
||||
openWay: 1,
|
||||
openLists: [],
|
||||
closeable: true,
|
||||
showpay: false,
|
||||
serviData:[],
|
||||
isVip:false,
|
||||
mainData:[],
|
||||
detailData:[],
|
||||
// 背景图片的URL可以是动态的，比如从API获取或根据条件生成
|
||||
backgroundImageUrl: '',
|
||||
zong:''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
backgroundStyle() {
|
||||
return {
|
||||
backgroundImage: `url(${this.backgroundImageUrl})`,
|
||||
backgroundSize: 'cover', // 根据需要调整
|
||||
};
|
||||
}
|
||||
},
|
||||
onLoad(e){
|
||||
var that=this;
|
||||
that.serviData=e;
|
||||
that.getData();
|
||||
that.isVip=this.$queue.getData('isVIP');
|
||||
},
|
||||
|
||||
methods:{
|
||||
goNav(e) {
|
||||
uni.navigateTo({
|
||||
url: e
|
||||
})
|
||||
},
|
||||
openpay(item) {
|
||||
|
||||
uni.navigateTo({
|
||||
url:'/my/order/payModifyTc?ordersId='+item.id
|
||||
})
|
||||
// this.goOrder()
|
||||
// this.showpay = true
|
||||
},
|
||||
xiangqing(item){
|
||||
uni.navigateTo({
|
||||
url:'/pages/my/pTuanOderDrtail?mainId='+item.mainId+'&id='+item.id+
|
||||
'&massageTypeId='+item.massageTypeId+
|
||||
'&status='+item.status
|
||||
})
|
||||
},
|
||||
detail(item){
|
||||
if(item.status=='1'){
|
||||
uni.showToast({
|
||||
title:'该项目已使用！'
|
||||
})
|
||||
}else{
|
||||
uni.navigateTo({
|
||||
url:'/pages/my/pTuanOderDrtail?mainId='+item.mainId+'&id='+item.id+
|
||||
'&massageTypeId='+item.massageTypeId+
|
||||
'&page='+1+
|
||||
'&limit='+10
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
getData(){
|
||||
var that=this;
|
||||
let data = {
|
||||
mainId: that.serviData.id,
|
||||
page: that.serviData.page,
|
||||
limit: that.serviData.limit,
|
||||
}
|
||||
that.$Request.get('/app/user/package/detail/findMyPackageDetailList',data).then(res => {
|
||||
if (res.code == 0) {
|
||||
that.mainData=res.data.mainData;
|
||||
that.detailData=res.data.detailData;
|
||||
that.backgroundImageUrl=that.mainData.packageImg;
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.img-span{
|
||||
padding: 2px 5px;
|
||||
font-weight: 400;
|
||||
font-size: 8px;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(-90deg, #FF6F48, #FF9E69);
|
||||
border-radius: 7px 0px 7px 0px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
margin-bottom: 14px;
|
||||
margin-left: 27px;
|
||||
}
|
||||
.detail-view-mina{
|
||||
width: 74%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.detail-view-img{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.detail-view{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
/deep/uni-checkbox .uni-checkbox-input{
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.youhui-img{
|
||||
width: 111.81rpx;
|
||||
height: 111.81rpx;
|
||||
}
|
||||
.youhui-view-right-btn{
|
||||
width: 158rpx;
|
||||
height: 64rpx;
|
||||
background: linear-gradient(-90deg, #019C88, #2DC48E);
|
||||
border-radius: 32rpx;
|
||||
text-align: center;
|
||||
line-height: 64rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0rpx 2rpx 4rpx rgba(0,119,104,0.44);
|
||||
margin-left: 10px;
|
||||
}
|
||||
.youhui-view-right-time{
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.youhui-view-right-title{
|
||||
width: 105px;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.youhui-view-right-top{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.youhui-view-right{
|
||||
width: 502.08rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.youhui-view-left-bottom{
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.youhui-view-left-yuan{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.youhui-view-left-num{
|
||||
font-weight: bold;
|
||||
font-size: 89rpx;
|
||||
}
|
||||
.youhui-view-left-text{
|
||||
font-weight: bold;
|
||||
font-size:24.31rpx;
|
||||
}
|
||||
.youhui-view-left{
|
||||
width: 199rpx;
|
||||
height: 242rpx;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.youhui-yiyong{
|
||||
background-image: url('../../static/youhuijuan/coupons7.png');
|
||||
}
|
||||
.youhui-weiyong{
|
||||
background-image: url('../../static/youhuijuan/coupons1.png');
|
||||
}
|
||||
.youhui-list{
|
||||
width: 95%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 242rpx;
|
||||
border-radius: 21rpx;
|
||||
background-size: 100%;
|
||||
margin: 20px auto;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.popup_pay {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding-bottom: 45rpx;
|
||||
/* height: 400px; */
|
||||
/* height: 160px; */
|
||||
/* #ifndef MP-WEIXIN */
|
||||
/* height: 130px; */
|
||||
/* #endif */
|
||||
|
||||
}
|
||||
.pay_btn {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
|
||||
height: 80rpx;
|
||||
border-radius: 60rpx;
|
||||
color: #ffffff;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
.push-button{
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.detail-btn{
|
||||
display: inline-block;
|
||||
width: 92%;
|
||||
text-align: center;
|
||||
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
|
||||
height: 40px;
|
||||
border-radius: 28px;
|
||||
color: #ffffff;
|
||||
line-height: 40px;
|
||||
margin-top: 4px;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.header-top image{
|
||||
width: 706.25rpx;
|
||||
height: 105.07rpx;
|
||||
}
|
||||
.header-top{
|
||||
width: 100%;
|
||||
height: 745.83rpx;
|
||||
background-image: url('../../static/servicePackage/display.png');
|
||||
/* background-size: 100%;
|
||||
background-repeat: no-repeat; */
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
.shouc image{
|
||||
width: 34.03rpx;
|
||||
height: 32.64rpx;
|
||||
}
|
||||
|
||||
.shouc{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.detail-foot-nav-bor{
|
||||
width: 64px;
|
||||
height: 11rpx;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: linear-gradient(90deg,rgba(234, 248, 245,0.7),rgba(132, 211, 196,0.7));
|
||||
}
|
||||
.detail-foot-nav-text{
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.detail-foot-nav{
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
.detail-foot-title{
|
||||
width: 115px;
|
||||
height: 32px;
|
||||
background-image: url(../../static/servicePackage/horn.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #FFFFFF;
|
||||
text-align: right;
|
||||
line-height: 32px;
|
||||
padding-right: 15px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.detail-foot-list-top{
|
||||
width: 95%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.detail-foot-list{
|
||||
width: 95%;
|
||||
border-radius: 21rpx;
|
||||
position: relative;
|
||||
margin: 6px 0px 5px 0px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
}
|
||||
.detail-foot{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 15px 0px;
|
||||
}
|
||||
|
||||
.tese span:nth-child(1){
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
.tese span:nth-child(2){
|
||||
font-size: 24rpx;
|
||||
color: #8D9194;
|
||||
}
|
||||
.tese{
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2; /* 显示的行数，可以根据需要修改 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
.detail-foot-list-top span:nth-child(1){
|
||||
font-weight: bold;
|
||||
font-size: 31rpx;
|
||||
color: #3F3F3F;
|
||||
}
|
||||
.detail-foot-list-top span:nth-child(2){
|
||||
width: 76rpx;
|
||||
height: 33rpx;
|
||||
line-height: 33rpx;
|
||||
text-align: center;
|
||||
border-radius: 16rpx;
|
||||
border: 1px solid #7D7D7D;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #777777;
|
||||
margin: 0px 25px 0px 5px;
|
||||
}
|
||||
.detail-foot-list-top span:nth-child(3){
|
||||
font-size: 30rpx;
|
||||
color: #029d88;
|
||||
}
|
||||
|
||||
.detail-foot-mian{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.jianjie{
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #8D9194;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2; /* 显示的行数，可以根据需要修改 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.header-bottom-mian{
|
||||
margin: 3px 0px;
|
||||
}
|
||||
.header-bottom-mian-title{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header-bottom-mian-title span{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #20AB95;
|
||||
margin-left: 5px;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
.header-bottom-mian-title image{
|
||||
width: 30.56rpx;
|
||||
height: 29.86rpx;
|
||||
}
|
||||
.header-bottom-foot-view-img1{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
.header-bottom-foot-view-img2{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
.header-bottom-foot-view-img3{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
.header-bottom-foot-view image{
|
||||
margin-right: 3px;
|
||||
}
|
||||
.header-bottom-foot-view{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
background-color: rgba(8, 162, 138, 0.1);
|
||||
border-radius: 8px;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #029D88;
|
||||
}
|
||||
.header-bottom-foot-title{
|
||||
width: 65px;
|
||||
height: 17px;
|
||||
margin-right: 8rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
.header-bottom-foot{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.header-bottom-money-jia{
|
||||
font-size: 28rpx;
|
||||
color: #848484;
|
||||
line-height: 37rpx;
|
||||
text-decoration-line: line-through;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.header-bottom-money-zhen span{
|
||||
color: #F95900;
|
||||
}
|
||||
.header-bottom-money-zhen span:nth-child(1){
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.header-bottom-money-zhen span:nth-child(2){
|
||||
font-size:38rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.header-bottom-money-zhen span:nth-child(3){
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.header-bottom-money-zhen{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.header-bottom-money-view{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top:8px;
|
||||
}
|
||||
.header-bottom-money{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.header-bottom-title-num span{
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.header-bottom-title-num span:nth-child(1){
|
||||
font-weight: bold;
|
||||
color: #08A28A;
|
||||
}
|
||||
.header-bottom-title-num span:nth-child(2){
|
||||
color: #848485;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.header-bottom-title-text{
|
||||
font-weight: bold;
|
||||
font-size: 35rpx;
|
||||
color: #13141A;
|
||||
}
|
||||
.header-bottom-title{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-bottom-top{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header-bottom{
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
background-color: #f7f7f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.service-more{
|
||||
width: 50px;
|
||||
height: 26px;
|
||||
font-size: 13px;
|
||||
border-radius: 15px;
|
||||
line-height: 26px;
|
||||
border: 1px #2dbe93 solid ;
|
||||
color: #019c88;
|
||||
text-align: center;
|
||||
justify-content: fex-end;
|
||||
background: #eefffa;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
## 1.2.3（2024-02-20）
|
||||
- 新增 支持控制小时，分钟的显隐：showHour showMinute
|
||||
## 1.2.2（2022-01-19）
|
||||
- 修复 在微信小程序中样式不生效的bug
|
||||
## 1.2.1（2022-01-18）
|
||||
- 新增 update 方法 ，在动态更新时间后，刷新组件
|
||||
## 1.2.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-countdown](https://uniapp.dcloud.io/component/uniui/uni-countdown)
|
||||
## 1.1.3（2021-10-18）
|
||||
- 重构
|
||||
- 新增 font-size 支持自定义字体大小
|
||||
## 1.1.2（2021-08-24）
|
||||
- 新增 支持国际化
|
||||
## 1.1.1（2021-07-30）
|
||||
- 优化 vue3下小程序事件警告的问题
|
||||
## 1.1.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.0.5（2021-06-18）
|
||||
- 修复 uni-countdown 重复赋值跳两秒的 bug
|
||||
## 1.0.4（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.0.3（2021-05-08）
|
||||
- 修复 uni-countdown 不能控制倒计时的 bug
|
||||
## 1.0.2（2021-02-04）
|
||||
- 调整为uni_modules目录规范
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"uni-countdown.day": "day",
|
||||
"uni-countdown.h": "h",
|
||||
"uni-countdown.m": "m",
|
||||
"uni-countdown.s": "s"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"uni-countdown.day": "天",
|
||||
"uni-countdown.h": "时",
|
||||
"uni-countdown.m": "分",
|
||||
"uni-countdown.s": "秒"
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"uni-countdown.day": "天",
|
||||
"uni-countdown.h": "時",
|
||||
"uni-countdown.m": "分",
|
||||
"uni-countdown.s": "秒"
|
||||
}
|
||||
|
|
@ -0,0 +1,288 @@
|
|||
<template>
|
||||
<view class="uni-countdown">
|
||||
<text v-if="showDay" :style="[timeStyle]" class="uni-countdown__number">{{ d }}</text>
|
||||
<text v-if="showDay" :style="[splitorStyle]" class="uni-countdown__splitor">{{dayText}}</text>
|
||||
<text v-if="showHour" class="uni-countdown__number">{{ h }}</text>
|
||||
<text v-if="showHour" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text>
|
||||
<text v-if="showMinute" class="uni-countdown__number">{{ i }}</text>
|
||||
<text v-if="showMinute" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : minuteText }}</text>
|
||||
<text class="uni-countdown__number">{{ s }}</text>
|
||||
<text v-if="!showColon" :style="[splitorStyle]" class="uni-countdown__splitor">{{secondText}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from './i18n/index.js'
|
||||
const {
|
||||
t
|
||||
} = initVueI18n(messages)
|
||||
/**
|
||||
* Countdown 倒计时
|
||||
* @description 倒计时组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=25
|
||||
* @property {String} backgroundColor 背景色
|
||||
* @property {String} color 文字颜色
|
||||
* @property {Number} day 天数
|
||||
* @property {Number} hour 小时
|
||||
* @property {Number} minute 分钟
|
||||
* @property {Number} second 秒
|
||||
* @property {Number} timestamp 时间戳
|
||||
* @property {Boolean} showDay = [true|false] 是否显示天数
|
||||
* @property {Boolean} showHour = [true|false] 是否显示小时
|
||||
* @property {Boolean} showMinute = [true|false] 是否显示分钟
|
||||
* @property {Boolean} show-colon = [true|false] 是否以冒号为分隔符
|
||||
* @property {String} splitorColor 分割符号颜色
|
||||
* @event {Function} timeup 倒计时时间到触发事件
|
||||
* @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
|
||||
*/
|
||||
export default {
|
||||
name: 'UniCountdown',
|
||||
emits: ['timeup'],
|
||||
props: {
|
||||
showDay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showHour: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showMinute: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showColon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
start: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
fontSize: {
|
||||
type: Number,
|
||||
default: 14
|
||||
},
|
||||
splitorColor: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
day: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
hour: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
minute: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
second: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
timestamp: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
syncFlag: false,
|
||||
d: '00',
|
||||
h: '00',
|
||||
i: '00',
|
||||
s: '00',
|
||||
leftTime: 0,
|
||||
seconds: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dayText() {
|
||||
return t("uni-countdown.day")
|
||||
},
|
||||
hourText(val) {
|
||||
return t("uni-countdown.h")
|
||||
},
|
||||
minuteText(val) {
|
||||
return t("uni-countdown.m")
|
||||
},
|
||||
secondText(val) {
|
||||
return t("uni-countdown.s")
|
||||
},
|
||||
timeStyle() {
|
||||
const {
|
||||
color,
|
||||
backgroundColor,
|
||||
fontSize
|
||||
} = this
|
||||
return {
|
||||
color,
|
||||
backgroundColor,
|
||||
fontSize: `${fontSize}px`,
|
||||
width: `${fontSize * 22 / 14}px`, // 按字体大小为 14px 时的比例缩放
|
||||
lineHeight: `${fontSize * 20 / 14}px`,
|
||||
borderRadius: `${fontSize * 3 / 14}px`,
|
||||
}
|
||||
},
|
||||
splitorStyle() {
|
||||
const { splitorColor, fontSize, backgroundColor } = this
|
||||
return {
|
||||
color: splitorColor,
|
||||
fontSize: `${fontSize * 12 / 14}px`,
|
||||
margin: backgroundColor ? `${fontSize * 4 / 14}px` : ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
day(val) {
|
||||
this.changeFlag()
|
||||
},
|
||||
hour(val) {
|
||||
this.changeFlag()
|
||||
},
|
||||
minute(val) {
|
||||
this.changeFlag()
|
||||
},
|
||||
second(val) {
|
||||
this.changeFlag()
|
||||
},
|
||||
start: {
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.startData();
|
||||
} else {
|
||||
if (!oldVal) return
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
created: function(e) {
|
||||
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
|
||||
this.countDown()
|
||||
},
|
||||
// #ifndef VUE3
|
||||
destroyed() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
unmounted() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
toSeconds(timestamp, day, hours, minutes, seconds) {
|
||||
if (timestamp) {
|
||||
return timestamp - parseInt(new Date().getTime() / 1000, 10)
|
||||
}
|
||||
return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
|
||||
},
|
||||
timeUp() {
|
||||
clearInterval(this.timer)
|
||||
this.$emit('timeup')
|
||||
},
|
||||
countDown() {
|
||||
let seconds = this.seconds
|
||||
let [day, hour, minute, second] = [0, 0, 0, 0]
|
||||
if (seconds > 0) {
|
||||
day = Math.floor(seconds / (60 * 60 * 24)/2)
|
||||
hour = Math.floor(seconds / (60 * 60)) - (day * 24)
|
||||
minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
|
||||
second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
|
||||
|
||||
} else {
|
||||
this.timeUp()
|
||||
}
|
||||
|
||||
if (day < 10) {
|
||||
day = '0' + day
|
||||
}
|
||||
if (hour < 10) {
|
||||
hour = '0' + hour
|
||||
}
|
||||
if (minute < 10) {
|
||||
minute = '0' + minute
|
||||
}
|
||||
if (second < 10) {
|
||||
second = '0' + second
|
||||
}
|
||||
this.d = day
|
||||
this.h = hour
|
||||
this.i = minute
|
||||
this.s = second
|
||||
},
|
||||
startData() {
|
||||
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
|
||||
if (this.seconds <= 0) {
|
||||
this.seconds = this.toSeconds(0, 0, 0, 0, 0)
|
||||
this.countDown()
|
||||
return
|
||||
}
|
||||
clearInterval(this.timer)
|
||||
this.countDown()
|
||||
this.timer = setInterval(() => {
|
||||
this.seconds--
|
||||
if (this.seconds < 0) {
|
||||
this.timeUp()
|
||||
return
|
||||
}
|
||||
this.countDown()
|
||||
}, 1000)
|
||||
},
|
||||
update(){
|
||||
this.startData();
|
||||
},
|
||||
changeFlag() {
|
||||
if (!this.syncFlag) {
|
||||
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
|
||||
this.startData();
|
||||
this.syncFlag = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
$font-size: 14px;
|
||||
.uni-countdown__number{
|
||||
background: #000;
|
||||
border-radius: 30rpx;
|
||||
padding: 8rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.uni-countdown {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
&__splitor {
|
||||
margin: 0 2px;
|
||||
font-size: $font-size;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&__number {
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
font-size: $font-size;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
{
|
||||
"id": "uni-countdown",
|
||||
"displayName": "uni-countdown 倒计时",
|
||||
"version": "1.2.3",
|
||||
"description": "CountDown 倒计时组件",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"countdown",
|
||||
"倒计时"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
|
||||
## CountDown 倒计时
|
||||
> **组件名：uni-countdown**
|
||||
> 代码块： `uCountDown`
|
||||
|
||||
倒计时组件。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-countdown)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
|
||||
v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '00'))"
|
||||
>
|
||||
{{ separator == 'colon' ? ':' : '天' }}
|
||||
{{ separator == 'colon' ? '天' : '天' }}
|
||||
</view>
|
||||
<view class="u-countdown-item" :style="[itemStyle]" v-if="showHours">
|
||||
<view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}">
|
||||
|
|
|
|||
Loading…
Reference in New Issue