Merge branch 'wwz' into HEAD
This commit is contained in:
wwz
commit
aeb8398b25
|
|
@ -1,5 +1,6 @@
|
|||
// 引入 request 文件
|
||||
const url = '/account'
|
||||
const url = '/product'
|
||||
// const url = '/account'
|
||||
import request from '@/common/api/request.js'
|
||||
//首页上半部分
|
||||
export const APIhomehomePageUp = (data) => {
|
||||
|
|
@ -12,10 +13,18 @@ export const APIhomehomePageUp = (data) => {
|
|||
//首页xia半部分
|
||||
export const APIhome = (data) => {
|
||||
return request({
|
||||
url: url + '/user/home/home',
|
||||
url: url + '/user/home/product',
|
||||
method: 'GET',
|
||||
data: data,
|
||||
toast: false
|
||||
})
|
||||
}
|
||||
// 获取咖啡
|
||||
export const userdict = (data) => {
|
||||
return request({
|
||||
url: '/account/user/dict',
|
||||
method: 'GET',
|
||||
data: data,
|
||||
toast: false
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
181
manifest.json
181
manifest.json
|
|
@ -1,90 +1,93 @@
|
|||
{
|
||||
"name" : "wepp",
|
||||
"appid" : "__UNI__9EC799C",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wxd88fffa983758a30",
|
||||
"setting" : {
|
||||
"urlCheck" : false,
|
||||
"minified" : true,
|
||||
"es6" : true,
|
||||
"postcss" : true
|
||||
},
|
||||
"usingComponents" : true,
|
||||
"libVersion" : "latest",
|
||||
"permission" : {
|
||||
"scope.userLocation" : {
|
||||
"desc" : "你的位置信息将用于小程序位置接口的效果展示"
|
||||
}
|
||||
},
|
||||
"requiredPrivateInfos" : [ "getLocation", "onLocationChange", "chooseLocation", "chooseAddress" ]
|
||||
},
|
||||
"h5" : {},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true,
|
||||
"appid" : "2021004145625815",
|
||||
"devServer" : {
|
||||
"autoOpen" : true // 设置为true自动打开支付宝小程序
|
||||
},
|
||||
"unipush" : {
|
||||
"enable" : false
|
||||
}
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "3"
|
||||
}
|
||||
"name": "wepp",
|
||||
"appid": "__UNI__9EC799C",
|
||||
"description": "",
|
||||
"versionName": "1.0.0",
|
||||
"versionCode": "100",
|
||||
"transformPx": false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus": {
|
||||
"usingComponents": true,
|
||||
"nvueStyleCompiler": "uni-app",
|
||||
"compilerVersion": 3,
|
||||
"splashscreen": {
|
||||
"alwaysShowBeforeRender": true,
|
||||
"waiting": true,
|
||||
"autoclose": true,
|
||||
"delay": 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules": {},
|
||||
/* 应用发布信息 */
|
||||
"distribute": {
|
||||
/* android打包配置 */
|
||||
"android": {
|
||||
"permissions": [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios": {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs": {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp": {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin": {
|
||||
"appid": "wxd88fffa983758a30",
|
||||
"setting": {
|
||||
"urlCheck": false,
|
||||
"minified": true,
|
||||
"es6": true,
|
||||
"postcss": true
|
||||
},
|
||||
"usingComponents": true,
|
||||
"libVersion": "latest",
|
||||
"permission": {
|
||||
"scope.userLocation": {
|
||||
"desc": "你的位置信息将用于小程序位置接口的效果展示"
|
||||
}
|
||||
},
|
||||
"requiredPrivateInfos": ["getLocation", "onLocationChange", "chooseLocation", "chooseAddress"],
|
||||
"optimization": {
|
||||
"filterUnused": false
|
||||
}
|
||||
},
|
||||
"h5": {},
|
||||
"mp-alipay": {
|
||||
"usingComponents": true,
|
||||
"appid": "2021004145625815",
|
||||
"devServer": {
|
||||
"autoOpen": true // 设置为true自动打开支付宝小程序
|
||||
},
|
||||
"unipush": {
|
||||
"enable": false
|
||||
}
|
||||
},
|
||||
"mp-baidu": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-toutiao": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"uniStatistics": {
|
||||
"enable": false
|
||||
},
|
||||
"vueVersion": "3"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
13
pages.json
13
pages.json
|
|
@ -21,6 +21,18 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/drinks",
|
||||
"style": {
|
||||
"navigationBarTitleText": "咖啡饮品"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/freedaily",
|
||||
"style": {
|
||||
"navigationBarTitleText": "每日免单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/tothestore",
|
||||
"style": {
|
||||
|
|
@ -34,6 +46,7 @@
|
|||
"navigationBarTitleText": "红包中心"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/product/index",
|
||||
"style": {
|
||||
|
|
|
|||
|
|
@ -3,11 +3,12 @@
|
|||
<view class="onecontentleft" v-if="bannervo">
|
||||
现有<text style="color: #FC851E;font-size: 24rpx;">
|
||||
{{bannervo.coupons==null?116:bannervo.coupons}}人
|
||||
<!-- {{bannervo.coupons==null?116:bannervo.coupons}}人 -->
|
||||
</text>
|
||||
已免单
|
||||
</view>
|
||||
<view class="onecontentright flex-start">
|
||||
<view class="onecontentrightimage" v-if="bannervo">
|
||||
<!-- <view class="onecontentrightimage" v-if="bannervo">
|
||||
<view class="swiperPanel" @touchstart="startMove" @touchend="endMove">
|
||||
<view class="swiperItem" v-for="(item, index) in bannervo.counponsInfo" :key="index"
|
||||
:style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
|
||||
|
|
@ -16,17 +17,24 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view style="overflow: hidden;width: 100rpx;">
|
||||
<view style="width: 600rpx;" class="swiperstyle">
|
||||
<image style="width: 30rpx;height: 30rpx;border-radius: 50%;display: inline-block;"
|
||||
v-for="(item, index) in listData" :key="index" :src="item.logo">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentrighttext">
|
||||
<swiper class="swiper" circular :autoplay="true" :vertical='true' :interval="2000">
|
||||
<swiper-item class="swiperitem" v-for="(item,index) in bannervo.counponsInfo" :key="index">
|
||||
<swiper-item class="swiperitem" v-for="(item,index) in bannervo" :key="index">
|
||||
{{item.name}}已省{{item.money}}元钱
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 小内切圆 -->
|
||||
<view class="after"></view>
|
||||
<!-- <view class="after"></view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -35,7 +43,9 @@
|
|||
defineProps,
|
||||
onBeforeUnmount,
|
||||
reactive,
|
||||
defineExpose
|
||||
defineExpose,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
const props = defineProps({
|
||||
bannervo: {
|
||||
|
|
@ -51,6 +61,13 @@
|
|||
}] //
|
||||
}
|
||||
});
|
||||
|
||||
const listData = ref()
|
||||
const listdataNumber = ref(4)
|
||||
watch(() => props.bannervo, (n, o) => {
|
||||
listData.value = [...props.bannervo,...props.bannervo]
|
||||
})
|
||||
|
||||
const slideNote = reactive({
|
||||
x: 0,
|
||||
y: 0
|
||||
|
|
@ -137,6 +154,11 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.swiperstyle {
|
||||
position: relative;
|
||||
animation: animationName 5s linear infinite;
|
||||
}
|
||||
|
||||
.onecontentrightimage {
|
||||
width: 65rpx;
|
||||
position: relative;
|
||||
|
|
@ -207,7 +229,7 @@
|
|||
|
||||
.onecontentrighttext {
|
||||
width: 232rpx;
|
||||
|
||||
margin-left: 20rpx;
|
||||
.swiper {
|
||||
height: 28rpx;
|
||||
// width: 232rpx;
|
||||
|
|
@ -239,4 +261,16 @@
|
|||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animationName {
|
||||
0% {
|
||||
/* 动画开始时的样式 */
|
||||
left: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
/* 动画结束时的样式 */
|
||||
left: -290rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="therecontent flex-between" v-if="salesList">
|
||||
<view class="therecontent flex-between" >
|
||||
<view class="therecontent_box_item">
|
||||
<view class="therecontent_box_imge flex-between" @click="jrtoday(0)">
|
||||
<view class="therecontent_box_imge_text">
|
||||
|
|
@ -13,14 +13,14 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="therecontent_box_itembox">
|
||||
<view class="therecontent_box_itembox_item flex-between" v-for="(item,index) in todayList.todayList"
|
||||
<view class="therecontent_box_itembox_item flex-between" v-for="(item,index) in todayList.hotList"
|
||||
:key="index" @click="clickproduct(item)">
|
||||
<image :src="`${item.image}?x-oss-process=image/resize,m_lfit,w_114,h_136`" mode="aspectFill">
|
||||
<image :src="`${item.coverImg}?x-oss-process=image/resize,m_lfit,w_114,h_136`" mode="aspectFill">
|
||||
</image>
|
||||
<view class="therecontent_box_itembox_itemview flex-colum-start">
|
||||
<view class="therecontent_box_itembox_itemviewone">
|
||||
<text
|
||||
style="margin-left: 0;">{{item.productName.length>5?item.productName.substring(0,5)+'...':item.productName}}</text>
|
||||
style="margin-left: 0;">{{item.name.length>5?item.name.substring(0,5)+'...':item.name}}</text>
|
||||
</view>
|
||||
<view class="therecontent_box_itembox_itemviewtow flex-around">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/xia.png" mode="widthFix">
|
||||
|
|
@ -54,17 +54,17 @@
|
|||
<view class="therecontent_box_itembox">
|
||||
<view class="therecontent_box_itembox_item flex-between" v-for="(item,index) in salesList.hotList"
|
||||
:key="index" @click="clickproduct(item)">
|
||||
<image :src="`${item.image}?x-oss-process=image/resize,m_lfit,w_114,h_136`" mode="aspectFill">
|
||||
<image :src="`${item.coverImg}?x-oss-process=image/resize,m_lfit,w_114,h_136`" mode="aspectFill">
|
||||
</image>
|
||||
<view class="therecontent_box_itembox_itemview flex-colum-start">
|
||||
<view class="therecontent_box_itembox_itemviewone flex-start">
|
||||
<view class="therecontent_box_itembox_itemviewoneafter">
|
||||
TOP.{{index + 1}}
|
||||
</view>
|
||||
<text>{{ item.productName.length>5?item.productName.substring(0,5)+'...':item.productName }}</text>
|
||||
<text>{{ item.name.length>5?item.name.substring(0,5)+'...':item.name }}</text>
|
||||
</view>
|
||||
<view class="therecontent_box_itembox_itemviewtowdiscount flex-around">
|
||||
已抢{{item.realSalesNumber}}份
|
||||
已抢{{item.saleNum}}份
|
||||
</view>
|
||||
<view class="therecontent_box_itembox_itemviewthere ">
|
||||
<text>￥{{item.salePrice}}</text>
|
||||
|
|
|
|||
|
|
@ -1,310 +1,173 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat class="navbar" :opacity='opacitys' :title='toplist.name' :titleshow='false'></navseat>
|
||||
|
||||
<view class="onecontent">
|
||||
<image class="onecontentimage" :src="toplist.coverImg" mode="aspectFill"></image>
|
||||
<image class="onecontentimage" :src="datas.toplist.coverImg" mode="aspectFill"></image>
|
||||
<!-- 小内切圆 -->
|
||||
<view class="after"></view>
|
||||
<view class="onecontentabsolute">
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<!-- <view :class="isFixedTop?'towcontentlistxitemboxfixed':''" :style="{'top':customheighttop + 'px'}">
|
||||
<view class="towcontentlistxitem flex-start">
|
||||
<view class="towcontentlistxitembox flex-colum"
|
||||
:class="towcontentclickindex == index?'towcontentlistxitemboxopacity':''"
|
||||
v-for="(item,index) in listbox" :key="index" @click="towcontentclick(index)">
|
||||
<text>{{item.name}}</text>
|
||||
<image v-if="towcontentclickindex == index"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/dg.png" mode="widthFix">
|
||||
</image>
|
||||
<view class="twocontent" v-for="(item, index) in datas.list" :key="index" @click="clickproduct(item)">
|
||||
<view class="df twoBox">
|
||||
<view class="df ">
|
||||
<image :src="item.logo" style="width: 50rpx;height: 50rpx;margin-right: 10rpx;" mode="">
|
||||
</image>
|
||||
<view class="">
|
||||
{{ item.shopName }}
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view v-if="isFixedTop" :style="{'height':windowHeight - seighT + 'px'}"></view>
|
||||
<view class="towcontentboutton" :style="{'height':seighT + 'px'}">
|
||||
<!-- <scroll-view :style="{'height':seighT + 'px'}" scroll-y @scrolltolower="loadMore"> -->
|
||||
<view class="fivecontent_item" v-for="(item,index) in list" :key="index" @click="clickproduct(item)">
|
||||
<view class="fivecontent_item_nav flex-start">
|
||||
<image class="fivecontent_item_navimage" :src="item.shopImage" mode="aspectFill"></image>
|
||||
<view class="fivecontent_item_nav_left">
|
||||
<view class="fivecontent_item_nav_lefttop flex-between">
|
||||
<view>
|
||||
{{item.shopName}}
|
||||
</view>
|
||||
<view>
|
||||
{{item.distances}}
|
||||
<view class="">
|
||||
{{ item.distance }}m
|
||||
</view>
|
||||
</view>
|
||||
<view class="df" style=" justify-content: space-between; flex-wrap: wrap; padding: 30rpx 0rpx;">
|
||||
<image :src="item.coverImg" style="width: 192rpx;height: 192rpx;" mode=""></image>
|
||||
<view style="margin-left: 24rpx; flex: auto;">
|
||||
<view class="df" style="justify-content: space-between; flex-wrap: wrap;">
|
||||
<view style="font-weight: 500; font-size: 28rpx; color: #333333;">{{ item.name }}</view>
|
||||
<view style=" font-weight: 400; font-size: 24rpx; color: #999999;">已抢{{ item.saleNum
|
||||
}}份
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere " style="">
|
||||
<view class="df" style="align-items: normal;">
|
||||
<view class="df">
|
||||
<text
|
||||
style=" font-family: Source Han Sans CN, Source Han Sans CN; font-weight: 500; font-size: 16rpx; color: #FF7127;">
|
||||
到手
|
||||
</text>
|
||||
<text
|
||||
style="font-weight: 500; font-size: 24rpx; color: #FF7127;">￥{{item.salePrice}}</text>
|
||||
<view style=" margin-left: 4rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
border: 2rpx solid #FF7127;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #FF7127;">
|
||||
{{item.discount}}折
|
||||
</view>
|
||||
<text style=" margin-left: 6rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #999999;
|
||||
text-decoration-line: line-through;">￥{{item.originPrice}}</text>
|
||||
</view>
|
||||
<view class="fivecontent_item_nav_lefttopstart flex-start">
|
||||
<view class="fivecontent_item_nav_leftlang flex-start" v-for="(s,index1) in item.shopTag"
|
||||
:key="index1" :style="{'background':s.backColor,'color':s.backColor}">
|
||||
<image class="fivecontent_item_nav_leftlangimage" v-if="s.shareImg" :src="s.shareImg"
|
||||
mode="aspectFill"></image>
|
||||
<text class="fivecontent_item_nav_leftlangtext">{{s.name}}</text>
|
||||
</view>
|
||||
<view style=" position: absolute;
|
||||
top: 16rpx;
|
||||
right: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;">
|
||||
马上抢
|
||||
</view>
|
||||
</view>
|
||||
<view class="df" style="justify-content: space-between;">
|
||||
<view
|
||||
style="font-family: Source Han Sans CN, Source Han Sans CN; font-weight: 400; font-size: 24rpx; color: #999999; padding-bottom: 8rpx;">
|
||||
共省{{item.originPrice-item.salePrice}}元
|
||||
</view>
|
||||
<view
|
||||
style=" font-family: Source Han Sans CN, Source Han Sans CN; font-weight: bold; font-size: 16rpx;margin-right: 12rpx; color: #FFFFFF;">
|
||||
<uni-countdown :show-day="false" :hour="convertMilliseconds(item.endTime).hours"
|
||||
:minute="convertMilliseconds(item.endTime).minutes"
|
||||
:second="convertMilliseconds(item.endTime).seconds" :indexs='index' color="#FFFFFF"
|
||||
border-color="#00B26A" splitorColor="#FFFFFF" :font-size="7"></uni-countdown>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_item_box">
|
||||
<view class="fivecontent_item_boxitem flex-between">
|
||||
<image :src="item.image" mode=""></image>
|
||||
<view class="fivecontent_item_boxitemleft flex-colum-start">
|
||||
<view class="fivecontent_item_boxitemleftone flex-between">
|
||||
<view>{{item.productName.length>7?item.productName.substring(0,7)+'...':item.productName}}</view>
|
||||
<text>已抢{{item.realSalesNumber}}份</text>
|
||||
</view>
|
||||
<view class="flex-start flexstartboxfttow">
|
||||
<view class="fivecontent_item_boxitemlefttow flex-start"
|
||||
v-for="(c,index2) in item.proTag" :key="index2"
|
||||
:style="{'background':c.backColor,'color':c.backColor}">
|
||||
<image class="fivecontent_item_boxitemlefttowimage" v-if="c.shareImg"
|
||||
:src="c.shareImg" mode="aspectFill"></image>
|
||||
<text class="fivecontent_item_boxitemlefttowtext">{{c.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere flex-colum-start">
|
||||
<view class="indexboxitemleftthereabsolute">
|
||||
马上抢
|
||||
</view>
|
||||
<view class="indexboxitemlefttheretext flex-start">
|
||||
<view class="fivecontent_item_boxitemlefthere_one flex-start">
|
||||
<text class="flex_startone">到手</text>
|
||||
<text class="flex_starttow">¥{{item.salePrice}}</text>
|
||||
</view>
|
||||
<view class="fivecontent_item_boxitemlefthere_tow">
|
||||
{{item.discount || ''}}折
|
||||
</view>
|
||||
<view class="fivecontent_item_boxitemlefthere_there">
|
||||
¥{{item.originPrice}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere_countdown flex-between">
|
||||
<text class="indexboxitemleftthere_countdowntext">共省{{item.save}}元</text>
|
||||
<view class="indexboxitemleftthere_countdowntexts">
|
||||
<uni-countdown @timeup="updateCity" :show-day="false"
|
||||
:day="item.end_times.d" :hour="item.end_times.h"
|
||||
:minute="item.end_times.m" :second="item.end_times.s"
|
||||
:indexs='index' color="#FFFFFF" border-color="#00B26A"
|
||||
splitorColor="#FFFFFF" :font-size="7"></uni-countdown>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
|
||||
<!-- </scroll-view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import uniCountdown from '@/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue';
|
||||
|
||||
<script>
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
titlename: '咖啡',
|
||||
opacitys: false,
|
||||
towcontentclickindex: 0,
|
||||
windowHeight: '',
|
||||
seighT: '',
|
||||
customheighttop: '', //top高度
|
||||
isFixedTop: false,
|
||||
Topdistance: 3000, //吸顶初始距离
|
||||
list: [],
|
||||
toplist: {},
|
||||
listbox: [],
|
||||
form: {
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
distance: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
},
|
||||
type:''
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏
|
||||
this.opacitys = false
|
||||
} else {
|
||||
this.opacitys = true
|
||||
}
|
||||
if (e.scrollTop >= this.Topdistance) { //类别导航栏
|
||||
this.isFixedTop = true
|
||||
} else {
|
||||
this.isFixedTop = false
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
let _this = this
|
||||
uni.getStorage({
|
||||
key: 'itemData',
|
||||
success: function(res) {
|
||||
_this.type = res.data.value
|
||||
_this.distiricttopCommon()
|
||||
// setTimeout(() => {
|
||||
_this.GetTop()
|
||||
// _this.init_fn()
|
||||
// }, 1000)
|
||||
}
|
||||
});
|
||||
// this.type = e.value
|
||||
// this.distiricttopCommon()
|
||||
// setTimeout(() => {
|
||||
// this.GetTop()
|
||||
// }, 1000)
|
||||
},
|
||||
onShow() {
|
||||
let _this = this
|
||||
uni.getStorage({
|
||||
key: 'itemData',
|
||||
success: function(res) {
|
||||
_this.type = res.data.value
|
||||
_this.distiricttopCommon()
|
||||
// setTimeout(() => {
|
||||
// _this.GetTop()
|
||||
_this.init_fn()
|
||||
// }, 1000)
|
||||
}
|
||||
});
|
||||
// this.init_fn()
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickproduct(item){
|
||||
uni.pro.navigateTo('product/index',{
|
||||
id:item.id
|
||||
})
|
||||
},
|
||||
init_fn() {
|
||||
this.list = []
|
||||
this.form = {
|
||||
address: uni.cache.get('getLocationstorage').address, //地址
|
||||
lng: uni.cache.get('getLocationstorage').lng,
|
||||
lat: uni.cache.get('getLocationstorage').lat,
|
||||
type:this.type, //品类
|
||||
orderBy:0, //0.今日上新 1.离我最近 2.销量优先 3.价格优先 4.热榜推荐
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
dateType: 1,
|
||||
status: 'loadmore'
|
||||
}
|
||||
this.onLoadlist()
|
||||
},
|
||||
async distiricttopCommon(e) {
|
||||
let res = await this.api.distiricttopCommon({
|
||||
type: this.type, //团购卷品类Id/subShop-预约到店
|
||||
orderBy: ''
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.toplist = res.data.carousel[0]
|
||||
this.listbox = res.data.menu
|
||||
}
|
||||
},
|
||||
async onLoadlist() {
|
||||
try {
|
||||
let res = await this.api.indexlist(this.form)
|
||||
var dates = new Date().getTime();
|
||||
res.data.list.forEach((item, index) => {
|
||||
var leftTime = item.endTime - dates; //计算两日期之间相差的毫秒数
|
||||
if (leftTime >= 0) {
|
||||
let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
|
||||
let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
|
||||
let m = Math.floor(leftTime / 1000 / 60 % 60);
|
||||
let s = Math.floor(leftTime / 1000 % 60);
|
||||
item.end_times = {
|
||||
d: d,
|
||||
h: h,
|
||||
m: m,
|
||||
s: s
|
||||
}
|
||||
} else {
|
||||
item.end_times = 0
|
||||
}
|
||||
})
|
||||
if (res.data.pages < this.form.page) {
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res.data.list];
|
||||
this.form.status = 'loading';
|
||||
if (res.data.pageNum == res.data.pages) {
|
||||
this.form.status = 'nomore';
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
} catch (e) {}
|
||||
},
|
||||
//G滚动底部
|
||||
loadMore(e) {
|
||||
console.log(e)
|
||||
},
|
||||
//获取元素距离顶部的距离
|
||||
GetTop() {
|
||||
uni.getSystemInfo({
|
||||
success: (data) => {
|
||||
console.log(data)
|
||||
this.windowHeight = data.windowHeight - data.statusBarHeight //总高度
|
||||
// #ifdef MP-WEIXIN
|
||||
const custom = wx.getMenuButtonBoundingClientRect()
|
||||
this.seighT = data.windowHeight - custom.height - custom.top;
|
||||
console.log(custom)
|
||||
this.customheighttop = custom.height + custom.top
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
this.customheighttop = data.statusBarHeight / 2
|
||||
this.seighT = data.windowHeight - data.statusBarHeight / 2
|
||||
// #endif
|
||||
this.$u.getRect('.towcontentlistxitembt').then(res => {
|
||||
this.seighT = this.seighT - res.height //高度
|
||||
})
|
||||
this.$u.getRect('.towcontentlistxitem').then(res => {
|
||||
this.Topdistance = res.top - this.HeighT.heightBar //滚动距离 //滚动距离
|
||||
this.seighT = this.seighT - res.height //高度
|
||||
console.log(res)
|
||||
})
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
APIhome,
|
||||
userdict
|
||||
} from "@/common/api/index/index.js"
|
||||
import {
|
||||
reactive
|
||||
} from 'vue';
|
||||
let datas = reactive({
|
||||
titlename: '咖啡',
|
||||
opacitys: false,
|
||||
toplist: "",
|
||||
list: []
|
||||
})
|
||||
onLoad(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
towcontentclick(index) {
|
||||
this.towcontentclickindex = index
|
||||
}
|
||||
}
|
||||
};
|
||||
function clickproduct(item) {
|
||||
uni.pro.navigateTo('product/index', {
|
||||
id: item.id
|
||||
})
|
||||
}
|
||||
async function getList() {
|
||||
let ele = await userdict({
|
||||
type: "group"
|
||||
})
|
||||
datas.toplist = ele
|
||||
let res = await APIhome({
|
||||
lng: uni.cache.get('getLocationstorage').lng,
|
||||
lat: uni.cache.get('getLocationstorage').lat,
|
||||
address: uni.cache.get('getLocationstorage').address, //地址
|
||||
categoryId: 1,
|
||||
orderType: 0,
|
||||
name: '',
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
distanceType: ''
|
||||
})
|
||||
datas.list = res.records
|
||||
}
|
||||
|
||||
function convertMilliseconds(milliseconds) {
|
||||
// 计算天数
|
||||
const days = Math.floor(milliseconds / 86400000);
|
||||
// 计算剩余的毫秒数
|
||||
milliseconds %= 86400000;
|
||||
// 计算小时数
|
||||
const hours = Math.floor(milliseconds / 3600000);
|
||||
// 计算剩余的毫秒数
|
||||
milliseconds %= 3600000;
|
||||
// 计算分钟数
|
||||
const minutes = Math.floor(milliseconds / 60000);
|
||||
// 计算剩余的毫秒数
|
||||
milliseconds %= 60000;
|
||||
// 计算秒数
|
||||
const seconds = Math.floor(milliseconds / 1000);
|
||||
|
||||
return {
|
||||
days,
|
||||
hours,
|
||||
minutes,
|
||||
seconds
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 492rpx;
|
||||
|
|
@ -369,305 +232,35 @@
|
|||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
.twocontent {
|
||||
padding: 20rpx 40rpx;
|
||||
|
||||
.twoBox {
|
||||
background-color: #fff;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 0rpx;
|
||||
border-bottom: 1rpx solid #ccc;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemleftthere {
|
||||
position: relative;
|
||||
margin-top: -32rpx;
|
||||
|
||||
.towcontentlistxitemboxfixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
margin-top: 0rpx !important;
|
||||
}
|
||||
|
||||
.towcontentlistxitem {
|
||||
// margin-top: -32rpx;
|
||||
padding: 36rpx 28rpx 0rpx 28rpx;
|
||||
border-radius: 24rpx 0rpx 0rpx 0rpx;
|
||||
background: #F9F9F9;
|
||||
|
||||
.towcontentlistxitembox:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.towcontentlistxitembox {
|
||||
margin-left: 48rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentlistxitemboxopacity {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 38.83rpx;
|
||||
height: 8.62rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentlistxitembt {
|
||||
padding: 28rpx;
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
background: #F9F9F9;
|
||||
|
||||
.towcontentlistxitembtitem {
|
||||
flex: none;
|
||||
padding: 8rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.towcontentlistxitembtitem:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.towcontentlistxitembtitemaktev {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
background: #FEE06A;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.towcontentboutton {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.fivecontent_item:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.fivecontent_item {
|
||||
margin-top: 32rpx;
|
||||
padding: 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
|
||||
.fivecontent_item_nav {
|
||||
image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.fivecontent_item_nav_left {
|
||||
flex: auto;
|
||||
margin-left: 12rpx;
|
||||
|
||||
.fivecontent_item_nav_lefttop {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.fivecontent_item_nav_leftlang {
|
||||
margin-top: 8rpx;
|
||||
width: max-content;
|
||||
padding: 4rpx 10rpx;
|
||||
background: #FFF9E1;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
|
||||
text {
|
||||
margin-left: 6rpx;
|
||||
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #F9A511;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 10.82rpx;
|
||||
height: 14.06rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_nav_leftlang:nth-child(2) {
|
||||
margin-left: 12rpx;
|
||||
background: #FEE9DF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_box {
|
||||
margin-top: 20rpx;
|
||||
border-top: 2rpx solid #E5E5E5;
|
||||
padding-top: 14rpx;
|
||||
|
||||
.fivecontent_item_boxitem {
|
||||
image {
|
||||
width: 192rpx;
|
||||
height: 192rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemleft {
|
||||
margin-left: 24rpx;
|
||||
flex: auto;
|
||||
|
||||
.fivecontent_item_boxitemleftone {
|
||||
width: 100%;
|
||||
|
||||
text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
view {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefttow {
|
||||
margin-top: 8rpx;
|
||||
width: max-content;
|
||||
padding: 4rpx 10rpx;
|
||||
background: #FFF9E1;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
|
||||
text {
|
||||
margin-left: 6rpx;
|
||||
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #F9A511;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 10.82rpx;
|
||||
height: 14.06rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefttow:nth-child(2) {
|
||||
margin-left: 12rpx;
|
||||
background: #FFD6D7;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere {
|
||||
position: relative;
|
||||
margin-top: 30rpx;
|
||||
padding-left: 16rpx;
|
||||
width: 100%;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.indexboxitemleftthereabsolute {
|
||||
position: absolute;
|
||||
top: 14rpx;
|
||||
right: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.indexboxitemlefttheretext {
|
||||
// width: 100%;
|
||||
margin-top: 12rpx;
|
||||
// align-items: flex-end;
|
||||
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.fivecontent_item_boxitemlefthere_one {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.flex_startone {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #FF7127;
|
||||
}
|
||||
|
||||
.flex_starttow {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FF7127;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefthere_tow {
|
||||
margin-left: 4rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
border: 2rpx solid #FF7127;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #FF7127;
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefthere_there {
|
||||
margin-left: 6rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #999999;
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdown {
|
||||
width: 100%;
|
||||
padding-right: 7rpx;
|
||||
margin-top: 2rpx;
|
||||
.indexboxitemleftthere_countdowntext {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdowntexts {
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 16rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-top: 30rpx;
|
||||
padding: 16rpx 0;
|
||||
padding-left: 16rpx;
|
||||
width: 100%;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
.df {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat :opacity='opacity' :title='titlename' :titleshow='true'></navseat>
|
||||
<view class="onecontent">
|
||||
<view class="onecontentabsolute"></view>
|
||||
</view>
|
||||
|
|
@ -16,19 +14,18 @@
|
|||
<view class="towcontentoneboxswiper">
|
||||
<swiper class="swiper" circular :autoplay='true' :vertical='true' display-multiple-items="4"
|
||||
:interval="'3000'">
|
||||
<swiper-item class="swiperitem" v-for="(item,index) in orderfindWiningUserlist"
|
||||
<swiper-item class="swiperitem" v-for="(item, index) in orderfindWiningUserlist"
|
||||
:key="index">
|
||||
<view class="swiper-item">{{item.userName}}* 免单{{item.orderAmount}}元订单号：{{item.orderNo}}
|
||||
<view class="swiper-item">{{ item.userName }}* 免单{{ item.orderAmount }}元订单号：{{ item.orderNo }}
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentoness">
|
||||
<view class="towcontentonebox_box">
|
||||
订单数：{{total}}
|
||||
订单数：10
|
||||
</view>
|
||||
<view class="towcontentonebox">
|
||||
<view class="towcontentoneboxswiper">
|
||||
|
|
@ -43,36 +40,19 @@
|
|||
金额
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiperitem" v-for="(item,index) in ordermineWinnerList" :key="index">
|
||||
<view class="swiperitem" v-for="(item, index) in ordermineWinnerList" :key="index">
|
||||
<view class="swiper-item" style="margin-top: 32rpx;">
|
||||
<view class="swiper_itemone">
|
||||
{{item.isRefund == true ? '已免单':'待免单'}}
|
||||
{{ item.isRefund == true ? '已免单' : '待免单' }}
|
||||
</view>
|
||||
<view class="swiper_itemtow">
|
||||
{{item.orderNo}}
|
||||
{{ item.orderNo }}
|
||||
</view>
|
||||
<view class="swiper_itemthere">
|
||||
{{item.orderAmount}}元
|
||||
{{ item.orderAmount }}元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <swiper class="swiper" circular :autoplay='true' :vertical='true' interval="3000"
|
||||
display-multiple-items="4">
|
||||
<swiper-item class="swiperitem" v-for="(item,index) in orderfindWiningUserlist"
|
||||
:key="index">
|
||||
<view class="swiper-item">
|
||||
<view class="swiper_itemone">
|
||||
{{item.orderAmount}}元
|
||||
</view>
|
||||
<view class="swiper_itemtow">
|
||||
{{item.orderNo}}
|
||||
</view>
|
||||
<view class="swiper_itemthere">
|
||||
{{item.isRefund == true ? '已免单':'待免单'}}
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -83,295 +63,266 @@
|
|||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
forEach
|
||||
} from 'lodash';
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
titlename: '',
|
||||
opacity: false,
|
||||
orderfindWiningUserlist: [],
|
||||
ordermineWinnerList: [],
|
||||
form: {
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
},
|
||||
total:0
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.orderfindWiningUser()
|
||||
this.ordermineWinnerEvent()
|
||||
let _this = this
|
||||
uni.getStorage({
|
||||
key: 'itemData',
|
||||
success: function(res) {
|
||||
_this.titlename = res.data.name
|
||||
}
|
||||
});
|
||||
},
|
||||
onReachBottom() {
|
||||
this.ordermineWinnerEvent()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏
|
||||
this.opacity = false
|
||||
} else {
|
||||
this.opacity = true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
let orderfindWiningUserlist = ref([{
|
||||
userName: "王*",
|
||||
orderAmount: 12,
|
||||
orderNo: 213504512353548688546
|
||||
}, {
|
||||
userName: "赵*",
|
||||
orderAmount: 48,
|
||||
orderNo: 65481188834105643623210
|
||||
}, {
|
||||
userName: "钱*",
|
||||
orderAmount: 91,
|
||||
orderNo: 5891051346764518249444
|
||||
}, {
|
||||
userName: "孙*",
|
||||
orderAmount: 84,
|
||||
orderNo: 688472546798742575342
|
||||
}, {
|
||||
userName: "王",
|
||||
orderAmount: 73,
|
||||
orderNo: 597344582826533594131
|
||||
}, {
|
||||
userName: "郑*",
|
||||
orderAmount: 98,
|
||||
orderNo: 469867684658481051627
|
||||
}, {
|
||||
userName: "凯*",
|
||||
orderAmount: 95,
|
||||
orderNo: 895961781634536230631
|
||||
},
|
||||
|
||||
cut(str, firstStr, lastStr) {
|
||||
let start = str.indexOf(firstStr);
|
||||
let end = str.lastIndexOf(lastStr);
|
||||
return str.slice(start, end + 1); //slice方法截取的部分不包括第二参数所在位置
|
||||
},
|
||||
|
||||
async ordermineWinnerEvent() {
|
||||
let res = await this.api.ordermineWinner({
|
||||
userId: uni.getStorageSync('userInfo').id,
|
||||
page: this.form.page,
|
||||
size: this.form.size
|
||||
})
|
||||
if(res.code ==0){
|
||||
this.total = res.data.total
|
||||
if(this.form.page==1){
|
||||
this.ordermineWinnerList = res.data.list
|
||||
}else{
|
||||
this.ordermineWinnerList.push(...res.data.list)
|
||||
}
|
||||
this.form.page = ++this.form.page;
|
||||
}
|
||||
},
|
||||
async orderfindWiningUser() {
|
||||
let res = await this.api.orderfindWiningUser()
|
||||
this.orderfindWiningUserlist = res.data.map((i) => {
|
||||
i.userName = i.userName.slice(0, 1)
|
||||
return i
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
])
|
||||
let ordermineWinnerList = ref([{
|
||||
isRefund: true,
|
||||
orderNo: 895961781634536230631,
|
||||
orderAmount: "95"
|
||||
},
|
||||
{
|
||||
isRefund: true,
|
||||
orderAmount: 74,
|
||||
orderNo: 222674526516892311380
|
||||
},
|
||||
{
|
||||
isRefund: false,
|
||||
orderAmount: 23,
|
||||
orderNo: 862674526546892311380
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 684.19rpx;
|
||||
position: relative;
|
||||
background: linear-gradient(96deg, #F9F2D9 0%, #FBE1DA 100%);
|
||||
|
||||
.onecontentabsolute {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 534.19rpx;
|
||||
width: 100%;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 684.19rpx;
|
||||
position: relative;
|
||||
background: linear-gradient(96deg, #F9F2D9 0%, #FBE1DA 100%);
|
||||
.towcontent {
|
||||
position: relative;
|
||||
padding: 0 28rpx;
|
||||
width: 100%;
|
||||
margin-top: -100rpx;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 242, 217, 0.77) 10%, #F5DFDF 100%);
|
||||
|
||||
.onecontentabsolute {
|
||||
.towcontentone {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, rgba(255, 241, 204, 0.77) 0%, rgba(255, 255, 255, 0.56) 40%, #FFFFFF 100%);
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
padding: 32rpx 24rpx;
|
||||
|
||||
.towcontentoneimage {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 534.19rpx;
|
||||
top: -30rpx;
|
||||
left: 50%;
|
||||
transform: translatex(-50%);
|
||||
width: 118rpx;
|
||||
height: 46rpx;
|
||||
}
|
||||
|
||||
.towcontentonebox {
|
||||
width: 100%;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.towcontentoneboximage {
|
||||
width: 171.63rpx;
|
||||
height: 37.24rpx;
|
||||
}
|
||||
|
||||
.towcontentoneboxswiper {
|
||||
width: 100%;
|
||||
padding-top: 24rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.swiper {
|
||||
height: 242rpx;
|
||||
|
||||
.swiperitem {
|
||||
height: 40rpx;
|
||||
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: 40rpx;
|
||||
text-align: left;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
position: relative;
|
||||
padding: 0 28rpx;
|
||||
.towcontentoness {
|
||||
margin-top: 48rpx;
|
||||
width: 100%;
|
||||
margin-top: -100rpx;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 242, 217, 0.77) 10%, #F5DFDF 100%);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
padding: 38rpx 48rpx;
|
||||
|
||||
.towcontentone {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, rgba(255, 241, 204, 0.77) 0%, rgba(255, 255, 255, 0.56) 40%, #FFFFFF 100%);
|
||||
.towcontentonebox_box {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
width: 262rpx;
|
||||
height: 58rpx;
|
||||
line-height: 58rpx;
|
||||
background: #FFA436;
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
padding: 32rpx 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentoneimage {
|
||||
position: absolute;
|
||||
top: -30rpx;
|
||||
left: 50%;
|
||||
transform: translatex(-50%);
|
||||
width: 118rpx;
|
||||
height: 46rpx;
|
||||
.towcontentonebox {
|
||||
width: 100%;
|
||||
|
||||
.towcontentoneboximage {
|
||||
width: 171.63rpx;
|
||||
height: 37.24rpx;
|
||||
}
|
||||
|
||||
.towcontentonebox {
|
||||
width: 100%;
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.towcontentoneboximage {
|
||||
width: 171.63rpx;
|
||||
height: 37.24rpx;
|
||||
.swiper_itemone {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentoneboxswiper {
|
||||
width: 100%;
|
||||
padding-top: 24rpx;
|
||||
overflow: hidden;
|
||||
.swiper_itemtow {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 242rpx;
|
||||
.swiper_itemthere {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.swiperitem {
|
||||
height: 40rpx;
|
||||
.towcontentoneboxswiper {
|
||||
width: 100%;
|
||||
// height: 242rpx;
|
||||
padding-top: 24rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: 40rpx;
|
||||
text-align: left;
|
||||
.swiper {
|
||||
height: 230rpx;
|
||||
|
||||
.swiperitem {
|
||||
height: 40rpx;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.swiper_itemone {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemtow {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemthere {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentoness {
|
||||
margin-top: 48rpx;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
padding: 38rpx 48rpx;
|
||||
|
||||
.towcontentonebox_box {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
width: 262rpx;
|
||||
height: 58rpx;
|
||||
line-height: 58rpx;
|
||||
background: #FFA436;
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentonebox {
|
||||
width: 100%;
|
||||
|
||||
.towcontentoneboximage {
|
||||
width: 171.63rpx;
|
||||
height: 37.24rpx;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.swiper_itemone {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemtow {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemthere {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentoneboxswiper {
|
||||
width: 100%;
|
||||
// height: 242rpx;
|
||||
padding-top: 24rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.swiper {
|
||||
height: 230rpx;
|
||||
|
||||
.swiperitem {
|
||||
height: 40rpx;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.swiper_itemone {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemtow {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemthere {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontenttow {
|
||||
margin-top: 32rpx;
|
||||
padding-bottom: 144rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontenttow {
|
||||
margin-top: 32rpx;
|
||||
padding-bottom: 144rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,18 +3,18 @@
|
|||
<Nav v-if="showindex == 'index'" />
|
||||
<view class="content" v-if="showindex == 'index'">
|
||||
<!-- 轮播图 -->
|
||||
<swipers :carousel='hometoplist.carousel'></swipers>
|
||||
<swipers :carousel='hometoplist.bannerList'></swipers>
|
||||
<!-- 广告 -->
|
||||
<advertisement :bannervo='hometoplist.bannervo' :itemStyle='advertisementStyle' ref="refbannervo">
|
||||
<advertisement :bannervo='hometoplist.freeBannerList' :itemStyle='advertisementStyle' ref="refbannervo">
|
||||
</advertisement>
|
||||
<!-- 金刚区 -->
|
||||
<diamond :district='hometoplist.district'></diamond>
|
||||
<!-- 今日上线 -->
|
||||
<todaylist :todayList='hometoplist.todayList' :salesList='hometoplist.salesList'></todaylist>
|
||||
<todaylist :todayList='hometoplist.todayProInfo' :salesList="hometoplist.hotRanking" ></todaylist>
|
||||
<!-- 类目 -->
|
||||
<view :style="{'top':store.height+'px'}" class="fourcontent" id="fourcontent">
|
||||
<view class="flex-between" style="flex-wrap: inherit;">
|
||||
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu" :key="index"
|
||||
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menuList" :key="index"
|
||||
@click="viewHistory(item,index)"
|
||||
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
|
||||
<text style="margin-right: 10rpx;">{{item.name}}</text>
|
||||
|
|
@ -25,9 +25,10 @@
|
|||
</view>
|
||||
<view class="componentsclass" v-if="showproductlist">
|
||||
<AreaSelect v-if="viewHistoryindex == 0" @updateValue="openproductlist" />
|
||||
<grouping v-if="viewHistoryindex == 1 || viewHistoryindex == 2 || viewHistoryindex == 3"
|
||||
<grouping v-if="viewHistoryindex == 1 || viewHistoryindex == 2 || viewHistoryindex == 3"
|
||||
@grouping="openproductlist" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 首页抢购区域 -->
|
||||
<view class="fivecontent">
|
||||
|
|
@ -183,8 +184,8 @@
|
|||
const showindex = ref('index')
|
||||
//计算广告图片的重合尺寸是位移
|
||||
const getStyle = (e) => {
|
||||
if (e > hometoplist.bannervo.counponsInfo.length / 2) {
|
||||
var right = hometoplist.bannervo.counponsInfo.length - e
|
||||
if (e > hometoplist.freeBannerList.length / 2) {
|
||||
var right = hometoplist.freeBannerList.length - e
|
||||
return {
|
||||
transform: 'scale(' + (1) + ') translate(-' + (right * 20) + '%,0px)',
|
||||
zIndex: 9999 - right,
|
||||
|
|
@ -202,21 +203,16 @@
|
|||
const refbannervo = ref(null);
|
||||
//数据
|
||||
const hometoplist = reactive({
|
||||
bannervo: {
|
||||
counponsInfo: [],
|
||||
coupons: ''
|
||||
}
|
||||
|
||||
})
|
||||
// 首页上面数据
|
||||
const hometop = async () => {
|
||||
try {
|
||||
let res = await APIhomehomePageUp()
|
||||
Object.assign(hometoplist, res)
|
||||
if (hometoplist.bannervo.counponsInfo) {
|
||||
hometoplist.bannervo.counponsInfo.forEach((item, index) => {
|
||||
hometoplist.freeBannerList.forEach((item, index) => {
|
||||
advertisementStyle.value.push(getStyle(index))
|
||||
})
|
||||
}
|
||||
// 数据加载完后获取dom 高度
|
||||
setTimeout(() => {
|
||||
const query = uni.createSelectorQuery().select('#fourcontent');
|
||||
|
|
@ -229,12 +225,13 @@
|
|||
// 下面初始数据
|
||||
const formhomelist = reactive({ //筛选
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
categoryId: '1', //品类
|
||||
orderType: '1', //1.理我最近 2.销量优先 3.价格优先
|
||||
distanceType: '1000', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
status: 'loadmore',
|
||||
name:'1'
|
||||
})
|
||||
// 使用 reactive 创建响应式对象
|
||||
const timeData = ref({});
|
||||
|
|
@ -248,7 +245,7 @@
|
|||
try {
|
||||
let res = await APIhome(formhomelist)
|
||||
var dates = new Date().getTime();
|
||||
res.list.forEach((item, index) => {
|
||||
res.records.forEach((item, index) => {
|
||||
var leftTime = item.endTime - dates; //计算两日期之间相差的毫秒数
|
||||
if (leftTime >= 0) {
|
||||
let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
|
||||
|
|
@ -307,7 +304,7 @@
|
|||
const showproductlist = ref(false);
|
||||
// 定义方法
|
||||
const openproductlist = (e) => {
|
||||
hometoplist.menu[viewHistoryindex.value].name = e //下标更改name
|
||||
hometoplist.menuList[viewHistoryindex.value].name = e //下标更改name
|
||||
showproductlist.value = !showproductlist.value
|
||||
}
|
||||
|
||||
|
|
@ -327,7 +324,7 @@
|
|||
}
|
||||
// 是否有弹出层
|
||||
if (item.isChild) {
|
||||
showproductlist.value = showproductlist.value ? viewHistoryindex.value == index ? false : true : !
|
||||
showproductlist.value = showproductlist.value ? (viewHistoryindex.value == index ? false : true) : !
|
||||
showproductlist.value
|
||||
}
|
||||
viewHistoryindex.value = index
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
## 1.2.4（2024-09-21）
|
||||
- 新增 支持控制显示位数 默认显示2位
|
||||
## 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,276 @@
|
|||
<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" :style="[timeStyle]" class="uni-countdown__number">{{ h }}</text>
|
||||
<text v-if="showHour" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text>
|
||||
<text v-if="showMinute" :style="[timeStyle]" class="uni-countdown__number">{{ i }}</text>
|
||||
<text v-if="showMinute" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : minuteText }}</text>
|
||||
<text :style="[timeStyle]" 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
|
||||
},
|
||||
filterShow : {
|
||||
type:Object,
|
||||
default:{}
|
||||
}
|
||||
},
|
||||
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))
|
||||
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()
|
||||
}
|
||||
this.d = String(day).padStart(this.validFilterShow(this.filterShow.d), '0')
|
||||
this.h = String(hour).padStart(this.validFilterShow(this.filterShow.h), '0')
|
||||
this.i = String(minute).padStart(this.validFilterShow(this.filterShow.m), '0')
|
||||
this.s = String(second).padStart(this.validFilterShow(this.filterShow.s), '0')
|
||||
},
|
||||
validFilterShow(filter){
|
||||
return (filter && filter > 0) ? filter : 2;
|
||||
},
|
||||
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 {
|
||||
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,84 @@
|
|||
{
|
||||
"id": "uni-countdown",
|
||||
"displayName": "uni-countdown 倒计时",
|
||||
"version": "1.2.4",
|
||||
"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",
|
||||
"alipay": "n"
|
||||
},
|
||||
"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
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
## 1.0.3（2022-01-21）
|
||||
- 优化 组件示例
|
||||
## 1.0.2（2021-11-22）
|
||||
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
|
||||
## 1.0.1（2021-11-22）
|
||||
- 修复 vue3中scss语法兼容问题
|
||||
## 1.0.0（2021-11-18）
|
||||
- init
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import './styles/index.scss';
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
{
|
||||
"id": "uni-scss",
|
||||
"displayName": "uni-scss 辅助样式",
|
||||
"version": "1.0.3",
|
||||
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
|
||||
"keywords": [
|
||||
"uni-scss",
|
||||
"uni-ui",
|
||||
"辅助样式"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"JS SDK",
|
||||
"通用 SDK"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"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"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "n",
|
||||
"联盟": "n"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@import './setting/_variables.scss';
|
||||
@import './setting/_border.scss';
|
||||
@import './setting/_color.scss';
|
||||
@import './setting/_space.scss';
|
||||
@import './setting/_radius.scss';
|
||||
@import './setting/_text.scss';
|
||||
@import './setting/_styles.scss';
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.uni-border {
|
||||
border: 1px $uni-border-1 solid;
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
|
||||
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
|
||||
// @mixin get-styles($k,$c) {
|
||||
// @if $k == size or $k == weight{
|
||||
// font-#{$k}:#{$c}
|
||||
// }@else{
|
||||
// #{$k}:#{$c}
|
||||
// }
|
||||
// }
|
||||
$uni-ui-color:(
|
||||
// 主色
|
||||
primary: $uni-primary,
|
||||
primary-disable: $uni-primary-disable,
|
||||
primary-light: $uni-primary-light,
|
||||
// 辅助色
|
||||
success: $uni-success,
|
||||
success-disable: $uni-success-disable,
|
||||
success-light: $uni-success-light,
|
||||
warning: $uni-warning,
|
||||
warning-disable: $uni-warning-disable,
|
||||
warning-light: $uni-warning-light,
|
||||
error: $uni-error,
|
||||
error-disable: $uni-error-disable,
|
||||
error-light: $uni-error-light,
|
||||
info: $uni-info,
|
||||
info-disable: $uni-info-disable,
|
||||
info-light: $uni-info-light,
|
||||
// 中性色
|
||||
main-color: $uni-main-color,
|
||||
base-color: $uni-base-color,
|
||||
secondary-color: $uni-secondary-color,
|
||||
extra-color: $uni-extra-color,
|
||||
// 背景色
|
||||
bg-color: $uni-bg-color,
|
||||
// 边框颜色
|
||||
border-1: $uni-border-1,
|
||||
border-2: $uni-border-2,
|
||||
border-3: $uni-border-3,
|
||||
border-4: $uni-border-4,
|
||||
// 黑色
|
||||
black:$uni-black,
|
||||
// 白色
|
||||
white:$uni-white,
|
||||
// 透明
|
||||
transparent:$uni-transparent
|
||||
) !default;
|
||||
@each $key, $child in $uni-ui-color {
|
||||
.uni-#{"" + $key} {
|
||||
color: $child;
|
||||
}
|
||||
.uni-#{"" + $key}-bg {
|
||||
background-color: $child;
|
||||
}
|
||||
}
|
||||
.uni-shadow-sm {
|
||||
box-shadow: $uni-shadow-sm;
|
||||
}
|
||||
.uni-shadow-base {
|
||||
box-shadow: $uni-shadow-base;
|
||||
}
|
||||
.uni-shadow-lg {
|
||||
box-shadow: $uni-shadow-lg;
|
||||
}
|
||||
.uni-mask {
|
||||
background-color:$uni-mask;
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
@mixin radius($r,$d:null ,$important: false){
|
||||
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
|
||||
// Key exists within the $uni-radius variable
|
||||
@if (map-has-key($uni-radius, $r) and $d){
|
||||
@if $d == t {
|
||||
border-top-left-radius:$radius-value;
|
||||
border-top-right-radius:$radius-value;
|
||||
}@else if $d == r {
|
||||
border-top-right-radius:$radius-value;
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == b {
|
||||
border-bottom-left-radius:$radius-value;
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == l {
|
||||
border-top-left-radius:$radius-value;
|
||||
border-bottom-left-radius:$radius-value;
|
||||
}@else if $d == tl {
|
||||
border-top-left-radius:$radius-value;
|
||||
}@else if $d == tr {
|
||||
border-top-right-radius:$radius-value;
|
||||
}@else if $d == br {
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == bl {
|
||||
border-bottom-left-radius:$radius-value;
|
||||
}
|
||||
}@else{
|
||||
border-radius:$radius-value;
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $child in $uni-radius {
|
||||
@if($key){
|
||||
.uni-radius-#{"" + $key} {
|
||||
@include radius($key)
|
||||
}
|
||||
}@else{
|
||||
.uni-radius {
|
||||
@include radius($key)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $direction in t, r, b, l,tl, tr, br, bl {
|
||||
@each $key, $child in $uni-radius {
|
||||
@if($key){
|
||||
.uni-radius-#{"" + $direction}-#{"" + $key} {
|
||||
@include radius($key,$direction,false)
|
||||
}
|
||||
}@else{
|
||||
.uni-radius-#{$direction} {
|
||||
@include radius($key,$direction,false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
|
||||
@mixin fn($space,$direction,$size,$n) {
|
||||
@if $n {
|
||||
#{$space}-#{$direction}: #{$size*$uni-space-root}px
|
||||
} @else {
|
||||
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
|
||||
}
|
||||
}
|
||||
@mixin get-styles($direction,$i,$space,$n){
|
||||
@if $direction == t {
|
||||
@include fn($space, top,$i,$n);
|
||||
}
|
||||
@if $direction == r {
|
||||
@include fn($space, right,$i,$n);
|
||||
}
|
||||
@if $direction == b {
|
||||
@include fn($space, bottom,$i,$n);
|
||||
}
|
||||
@if $direction == l {
|
||||
@include fn($space, left,$i,$n);
|
||||
}
|
||||
@if $direction == x {
|
||||
@include fn($space, left,$i,$n);
|
||||
@include fn($space, right,$i,$n);
|
||||
}
|
||||
@if $direction == y {
|
||||
@include fn($space, top,$i,$n);
|
||||
@include fn($space, bottom,$i,$n);
|
||||
}
|
||||
@if $direction == a {
|
||||
@if $n {
|
||||
#{$space}:#{$i*$uni-space-root}px;
|
||||
} @else {
|
||||
#{$space}:#{-$i*$uni-space-root}px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $orientation in m,p {
|
||||
$space: margin;
|
||||
@if $orientation == m {
|
||||
$space: margin;
|
||||
} @else {
|
||||
$space: padding;
|
||||
}
|
||||
@for $i from 0 through 16 {
|
||||
@each $direction in t, r, b, l, x, y, a {
|
||||
.uni-#{$orientation}#{$direction}-#{$i} {
|
||||
@include get-styles($direction,$i,$space,true);
|
||||
}
|
||||
.uni-#{$orientation}#{$direction}-n#{$i} {
|
||||
@include get-styles($direction,$i,$space,false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
/* #ifndef APP-NVUE */
|
||||
|
||||
$-color-white:#fff;
|
||||
$-color-black:#000;
|
||||
@mixin base-style($color) {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
border-color: mix($-color-black, $color, 8%);
|
||||
&:not([hover-class]):active {
|
||||
background: mix($-color-black, $color, 10%);
|
||||
border-color: mix($-color-black, $color, 20%);
|
||||
color: $-color-white;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@mixin is-color($color) {
|
||||
@include base-style($color);
|
||||
&[loading] {
|
||||
@include base-style($color);
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
&,
|
||||
&[loading],
|
||||
&:not([hover-class]):active {
|
||||
color: $-color-white;
|
||||
border-color: mix(darken($color,10%), $-color-white);
|
||||
background-color: mix($color, $-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@mixin base-plain-style($color) {
|
||||
color:$color;
|
||||
background-color: mix($-color-white, $color, 90%);
|
||||
border-color: mix($-color-white, $color, 70%);
|
||||
&:not([hover-class]):active {
|
||||
background: mix($-color-white, $color, 80%);
|
||||
color: $color;
|
||||
outline: none;
|
||||
border-color: mix($-color-white, $color, 50%);
|
||||
}
|
||||
}
|
||||
@mixin is-plain($color){
|
||||
&[plain] {
|
||||
@include base-plain-style($color);
|
||||
&[loading] {
|
||||
@include base-plain-style($color);
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
&,
|
||||
&:active {
|
||||
color: mix($-color-white, $color, 40%);
|
||||
background-color: mix($-color-white, $color, 90%);
|
||||
border-color: mix($-color-white, $color, 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.uni-btn {
|
||||
margin: 5px;
|
||||
color: #393939;
|
||||
border:1px solid #ccc;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
background-color: #F9F9F9;
|
||||
// TODO 暂时处理边框隐藏一边的问题
|
||||
overflow: visible;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:not([type]),&[type=default] {
|
||||
color: #999;
|
||||
&[loading] {
|
||||
background: none;
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&[disabled]{
|
||||
color: mix($-color-white, #999, 60%);
|
||||
&,
|
||||
&[loading],
|
||||
&:active {
|
||||
color: mix($-color-white, #999, 60%);
|
||||
background-color: mix($-color-white,$-color-black , 98%);
|
||||
border-color: mix($-color-white, #999, 85%);
|
||||
}
|
||||
}
|
||||
|
||||
&[plain] {
|
||||
color: #999;
|
||||
background: none;
|
||||
border-color: $uni-border-1;
|
||||
&:not([hover-class]):active {
|
||||
background: none;
|
||||
color: mix($-color-white, $-color-black, 80%);
|
||||
border-color: mix($-color-white, $-color-black, 90%);
|
||||
outline: none;
|
||||
}
|
||||
&[disabled]{
|
||||
&,
|
||||
&[loading],
|
||||
&:active {
|
||||
background: none;
|
||||
color: mix($-color-white, #999, 60%);
|
||||
border-color: mix($-color-white, #999, 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not([hover-class]):active {
|
||||
color: mix($-color-white, $-color-black, 50%);
|
||||
}
|
||||
|
||||
&[size=mini] {
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.uni-btn-small {
|
||||
font-size: 14px;
|
||||
}
|
||||
&.uni-btn-mini {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&.uni-btn-radius {
|
||||
border-radius: 999px;
|
||||
}
|
||||
&[type=primary] {
|
||||
@include is-color($uni-primary);
|
||||
@include is-plain($uni-primary)
|
||||
}
|
||||
&[type=success] {
|
||||
@include is-color($uni-success);
|
||||
@include is-plain($uni-success)
|
||||
}
|
||||
&[type=error] {
|
||||
@include is-color($uni-error);
|
||||
@include is-plain($uni-error)
|
||||
}
|
||||
&[type=warning] {
|
||||
@include is-color($uni-warning);
|
||||
@include is-plain($uni-warning)
|
||||
}
|
||||
&[type=info] {
|
||||
@include is-color($uni-info);
|
||||
@include is-plain($uni-info)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
@mixin get-styles($k,$c) {
|
||||
@if $k == size or $k == weight{
|
||||
font-#{$k}:#{$c}
|
||||
}@else{
|
||||
#{$k}:#{$c}
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $child in $uni-headings {
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-#{$key} {
|
||||
@each $k, $c in $child {
|
||||
@include get-styles($k,$c)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
.container .uni-#{$key} {
|
||||
@each $k, $c in $child {
|
||||
@include get-styles($k,$c)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
// @use "sass:math";
|
||||
@import '../tools/functions.scss';
|
||||
// 间距基础倍数
|
||||
$uni-space-root: 2 !default;
|
||||
// 边框半径默认值
|
||||
$uni-radius-root:5px !default;
|
||||
$uni-radius: () !default;
|
||||
// 边框半径断点
|
||||
$uni-radius: map-deep-merge(
|
||||
(
|
||||
0: 0,
|
||||
// TODO 当前版本暂时不支持 sm 属性
|
||||
// 'sm': math.div($uni-radius-root, 2),
|
||||
null: $uni-radius-root,
|
||||
'lg': $uni-radius-root * 2,
|
||||
'xl': $uni-radius-root * 6,
|
||||
'pill': 9999px,
|
||||
'circle': 50%
|
||||
),
|
||||
$uni-radius
|
||||
);
|
||||
// 字体家族
|
||||
$body-font-family: 'Roboto', sans-serif !default;
|
||||
// 文本
|
||||
$heading-font-family: $body-font-family !default;
|
||||
$uni-headings: () !default;
|
||||
$letterSpacing: -0.01562em;
|
||||
$uni-headings: map-deep-merge(
|
||||
(
|
||||
'h1': (
|
||||
size: 32px,
|
||||
weight: 300,
|
||||
line-height: 50px,
|
||||
// letter-spacing:-0.01562em
|
||||
),
|
||||
'h2': (
|
||||
size: 28px,
|
||||
weight: 300,
|
||||
line-height: 40px,
|
||||
// letter-spacing: -0.00833em
|
||||
),
|
||||
'h3': (
|
||||
size: 24px,
|
||||
weight: 400,
|
||||
line-height: 32px,
|
||||
// letter-spacing: normal
|
||||
),
|
||||
'h4': (
|
||||
size: 20px,
|
||||
weight: 400,
|
||||
line-height: 30px,
|
||||
// letter-spacing: 0.00735em
|
||||
),
|
||||
'h5': (
|
||||
size: 16px,
|
||||
weight: 400,
|
||||
line-height: 24px,
|
||||
// letter-spacing: normal
|
||||
),
|
||||
'h6': (
|
||||
size: 14px,
|
||||
weight: 500,
|
||||
line-height: 18px,
|
||||
// letter-spacing: 0.0125em
|
||||
),
|
||||
'subtitle': (
|
||||
size: 12px,
|
||||
weight: 400,
|
||||
line-height: 20px,
|
||||
// letter-spacing: 0.00937em
|
||||
),
|
||||
'body': (
|
||||
font-size: 14px,
|
||||
font-weight: 400,
|
||||
line-height: 22px,
|
||||
// letter-spacing: 0.03125em
|
||||
),
|
||||
'caption': (
|
||||
'size': 12px,
|
||||
'weight': 400,
|
||||
'line-height': 20px,
|
||||
// 'letter-spacing': 0.03333em,
|
||||
// 'text-transform': false
|
||||
)
|
||||
),
|
||||
$uni-headings
|
||||
);
|
||||
|
||||
|
||||
|
||||
// 主色
|
||||
$uni-primary: #2979ff !default;
|
||||
$uni-primary-disable:lighten($uni-primary,20%) !default;
|
||||
$uni-primary-light: lighten($uni-primary,25%) !default;
|
||||
|
||||
// 辅助色
|
||||
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
|
||||
$uni-success: #18bc37 !default;
|
||||
$uni-success-disable:lighten($uni-success,20%) !default;
|
||||
$uni-success-light: lighten($uni-success,25%) !default;
|
||||
|
||||
$uni-warning: #f3a73f !default;
|
||||
$uni-warning-disable:lighten($uni-warning,20%) !default;
|
||||
$uni-warning-light: lighten($uni-warning,25%) !default;
|
||||
|
||||
$uni-error: #e43d33 !default;
|
||||
$uni-error-disable:lighten($uni-error,20%) !default;
|
||||
$uni-error-light: lighten($uni-error,25%) !default;
|
||||
|
||||
$uni-info: #8f939c !default;
|
||||
$uni-info-disable:lighten($uni-info,20%) !default;
|
||||
$uni-info-light: lighten($uni-info,25%) !default;
|
||||
|
||||
// 中性色
|
||||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
|
||||
$uni-main-color: #3a3a3a !default; // 主要文字
|
||||
$uni-base-color: #6a6a6a !default; // 常规文字
|
||||
$uni-secondary-color: #909399 !default; // 次要文字
|
||||
$uni-extra-color: #c7c7c7 !default; // 辅助说明
|
||||
|
||||
// 边框颜色
|
||||
$uni-border-1: #F0F0F0 !default;
|
||||
$uni-border-2: #EDEDED !default;
|
||||
$uni-border-3: #DCDCDC !default;
|
||||
$uni-border-4: #B9B9B9 !default;
|
||||
|
||||
// 常规色
|
||||
$uni-black: #000000 !default;
|
||||
$uni-white: #ffffff !default;
|
||||
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
|
||||
|
||||
// 背景色
|
||||
$uni-bg-color: #f7f7f7 !default;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-sm: 8px !default;
|
||||
$uni-spacing-base: 15px !default;
|
||||
$uni-spacing-lg: 30px !default;
|
||||
|
||||
// 阴影
|
||||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
|
||||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
|
||||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
|
||||
|
||||
// 蒙版
|
||||
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
// 合并 map
|
||||
@function map-deep-merge($parent-map, $child-map){
|
||||
$result: $parent-map;
|
||||
@each $key, $child in $child-map {
|
||||
$parent-has-key: map-has-key($result, $key);
|
||||
$parent-value: map-get($result, $key);
|
||||
$parent-type: type-of($parent-value);
|
||||
$child-type: type-of($child);
|
||||
$parent-is-map: $parent-type == map;
|
||||
$child-is-map: $child-type == map;
|
||||
|
||||
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
|
||||
$result: map-merge($result, ( $key: $child ));
|
||||
}@else {
|
||||
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
|
||||
}
|
||||
}
|
||||
@return $result;
|
||||
};
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
// 间距基础倍数
|
||||
$uni-space-root: 2;
|
||||
// 边框半径默认值
|
||||
$uni-radius-root:5px;
|
||||
// 主色
|
||||
$uni-primary: #2979ff;
|
||||
// 辅助色
|
||||
$uni-success: #4cd964;
|
||||
// 警告色
|
||||
$uni-warning: #f0ad4e;
|
||||
// 错误色
|
||||
$uni-error: #dd524d;
|
||||
// 描述色
|
||||
$uni-info: #909399;
|
||||
// 中性色
|
||||
$uni-main-color: #303133;
|
||||
$uni-base-color: #606266;
|
||||
$uni-secondary-color: #909399;
|
||||
$uni-extra-color: #C0C4CC;
|
||||
// 背景色
|
||||
$uni-bg-color: #f5f5f5;
|
||||
// 边框颜色
|
||||
$uni-border-1: #DCDFE6;
|
||||
$uni-border-2: #E4E7ED;
|
||||
$uni-border-3: #EBEEF5;
|
||||
$uni-border-4: #F2F6FC;
|
||||
|
||||
// 常规色
|
||||
$uni-black: #000000;
|
||||
$uni-white: #ffffff;
|
||||
$uni-transparent: rgba($color: #000000, $alpha: 0);
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
@import './styles/setting/_variables.scss';
|
||||
// 间距基础倍数
|
||||
$uni-space-root: 2;
|
||||
// 边框半径默认值
|
||||
$uni-radius-root:5px;
|
||||
|
||||
// 主色
|
||||
$uni-primary: #2979ff;
|
||||
$uni-primary-disable:mix(#fff,$uni-primary,50%);
|
||||
$uni-primary-light: mix(#fff,$uni-primary,80%);
|
||||
|
||||
// 辅助色
|
||||
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
|
||||
$uni-success: #18bc37;
|
||||
$uni-success-disable:mix(#fff,$uni-success,50%);
|
||||
$uni-success-light: mix(#fff,$uni-success,80%);
|
||||
|
||||
$uni-warning: #f3a73f;
|
||||
$uni-warning-disable:mix(#fff,$uni-warning,50%);
|
||||
$uni-warning-light: mix(#fff,$uni-warning,80%);
|
||||
|
||||
$uni-error: #e43d33;
|
||||
$uni-error-disable:mix(#fff,$uni-error,50%);
|
||||
$uni-error-light: mix(#fff,$uni-error,80%);
|
||||
|
||||
$uni-info: #8f939c;
|
||||
$uni-info-disable:mix(#fff,$uni-info,50%);
|
||||
$uni-info-light: mix(#fff,$uni-info,80%);
|
||||
|
||||
// 中性色
|
||||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
|
||||
$uni-main-color: #3a3a3a; // 主要文字
|
||||
$uni-base-color: #6a6a6a; // 常规文字
|
||||
$uni-secondary-color: #909399; // 次要文字
|
||||
$uni-extra-color: #c7c7c7; // 辅助说明
|
||||
|
||||
// 边框颜色
|
||||
$uni-border-1: #F0F0F0;
|
||||
$uni-border-2: #EDEDED;
|
||||
$uni-border-3: #DCDCDC;
|
||||
$uni-border-4: #B9B9B9;
|
||||
|
||||
// 常规色
|
||||
$uni-black: #000000;
|
||||
$uni-white: #ffffff;
|
||||
$uni-transparent: rgba($color: #000000, $alpha: 0);
|
||||
|
||||
// 背景色
|
||||
$uni-bg-color: #f7f7f7;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-sm: 8px;
|
||||
$uni-spacing-base: 15px;
|
||||
$uni-spacing-lg: 30px;
|
||||
|
||||
// 阴影
|
||||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
|
||||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
||||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
|
||||
|
||||
// 蒙版
|
||||
$uni-mask: rgba($color: #000000, $alpha: 0.4);
|
||||
Loading…
Reference in New Issue