xh-pan1
2 years ago
125 changed files with 1664 additions and 1022 deletions
-
15App.vue
-
17component/share.vue
-
1components/AliHbPay/index.vue
-
3components/CashierList/index.vue
-
88components/DefaultHead/index.vue
-
4components/Empty/index.vue
-
24components/GlobalLoading/index.js
-
89components/GlobalLoading/index.vue
-
148components/ListBottomTips/index.vue
-
1components/Loading/index.vue
-
56components/Skeleton/index.vue
-
5components/activities/combinedSales.vue
-
5components/adWindow.vue
-
5components/basics/categoryList.vue
-
300components/basics/categoryShow.vue
-
99components/basics/components/ProductSkeleton.vue
-
1components/canvasShow/basics/banner.vue
-
4components/canvasShow/basics/group/app/index.vue
-
40components/canvasShow/basics/header/mixin.js
-
23components/canvasShow/basics/live/app/item.vue
-
47components/canvasShow/basics/live/mixin.js
-
8components/canvasShow/basics/newProduct/mixin.js
-
25components/canvasShow/basics/product/app/index.vue
-
22components/canvasShow/basics/product/mixin.js
-
1components/canvasShow/basics/shop.vue
-
4components/canvasShow/basics/spike/app/index.vue
-
93components/canvasShow/basics/spike/mixin.js
-
13components/canvasShow/basics/video.vue
-
4components/canvasShow/canvasShowPage.vue
-
5components/canvasShow/config/api.js
-
3components/canvasShow/config/mixin/funMixin.js
-
30components/canvasShow/config/mixin/sendReqMixin.js
-
3components/canvasShow/config/mixin/server.js
-
5components/diyLoading/index.vue
-
36components/wx/wxSendCoupon.vue
-
16config/api.js
-
1main.js
-
18manifest.json
-
6pages.json
-
2pages/tabbar/cart/index.vue
-
74pages/tabbar/index/component/Agreement.vue
-
171pages/tabbar/index/component/FixedHead.vue
-
153pages/tabbar/index/component/Skeleton.vue
-
293pages/tabbar/index/index.vue
-
2pages/tabbar/user/index.data.js
-
3pages/tabbar/user/index.vue
-
2pages_category_page1/activity.vue
-
1pages_category_page1/coupon/list.vue
-
1pages_category_page1/coupon/product.vue
-
2pages_category_page1/discount/platformDiscount.vue
-
9pages_category_page1/discount/spikeList.vue
-
4pages_category_page1/distributionModule/invite.vue
-
4pages_category_page1/distributionModule/promotion.vue
-
6pages_category_page1/distributionModule/recruit.vue
-
1pages_category_page1/distributionModule/salesIndex.vue
-
1pages_category_page1/distributionModule/shareProduct.vue
-
1pages_category_page1/distributionModule/totalClient.vue
-
157pages_category_page1/goodsModule/Skeleton/GoodListSkeleton.vue
-
4pages_category_page1/goodsModule/addEvaluate.vue
-
2pages_category_page1/goodsModule/canvasGoods.vue
-
9pages_category_page1/goodsModule/combination.vue
-
2pages_category_page1/goodsModule/evaSuccessful.vue
-
2pages_category_page1/goodsModule/evaluate.vue
-
3pages_category_page1/goodsModule/evaluateDetails.vue
-
1pages_category_page1/goodsModule/evaluateList.vue
-
1pages_category_page1/goodsModule/goodsDetails.vue
-
132pages_category_page1/goodsModule/goodsList.vue
-
11pages_category_page1/goodsModule/invitePoster.vue
-
2pages_category_page1/goodsModule/inviteSpell.vue
-
3pages_category_page1/goodsModule/putQuestions.vue
-
1pages_category_page1/goodsModule/qADetail.vue
-
1pages_category_page1/integral/exchangeDetail.vue
-
1pages_category_page1/integral/index.vue
-
3pages_category_page1/integral/sign.vue
-
2pages_category_page1/memberCenter/activityList.vue
-
3pages_category_page1/memberCenter/index.vue
-
1pages_category_page1/memberCenter/memberSign.vue
-
2pages_category_page1/orderModule/Intervene.vue
-
4pages_category_page1/orderModule/addLogistics.vue
-
12pages_category_page1/orderModule/afterSaleApplyRefund.vue
-
11pages_category_page1/orderModule/afterSaleApplyRetund.vue
-
42pages_category_page1/orderModule/index.vue
-
10pages_category_page1/orderModule/orderConfirm.vue
-
8pages_category_page1/orderModule/orderDetails.vue
-
2pages_category_page1/orderModule/platformJoin.vue
-
4pages_category_page1/search/index/index.vue
-
3pages_category_page1/store/index.vue
-
1pages_category_page2/channelCoupon/index.vue
-
4pages_category_page2/livePage/components/liveBox.vue
-
1pages_category_page2/livePage/index.vue
-
2pages_category_page2/orderModule/afterSale.vue
-
2pages_category_page2/orderModule/returnDetails.vue
-
3pages_category_page2/userModule/accountLogin.vue
-
7pages_category_page2/userModule/addAddress.vue
-
10pages_category_page2/userModule/addBankcard.vue
-
6pages_category_page2/userModule/address.vue
-
12pages_category_page2/userModule/bindPhone.vue
-
4pages_category_page2/userModule/collection.vue
-
1pages_category_page2/userModule/footprintList.vue
-
3pages_category_page2/userModule/login.vue
@ -0,0 +1,88 @@ |
|||
<!-- |
|||
* @FileDescription: 适配自定义头部状态栏高度 |
|||
* @Author: kahu |
|||
* @Date: 2023/3/7 |
|||
* @LastEditors: kahu |
|||
* @LastEditTime: 2023/3/7 |
|||
--> |
|||
<template> |
|||
<view class="default_head_content"> |
|||
<!-- 小程序不支持style写computed形式 --> |
|||
<view |
|||
v-if="needSetStatusBarHeight" |
|||
class="status_bar_fit" |
|||
:style="{ |
|||
'height':`${statusBarHeight}px`, |
|||
'background-color':`${backgroundColor}` |
|||
}" |
|||
></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "DefaultHead", |
|||
props: { |
|||
needSetStatusBarHeight: { |
|||
type: Boolean, |
|||
default: () => true |
|||
}, |
|||
backgroundColor: { |
|||
type: String, |
|||
default: () => '#fff' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// 系统信息 |
|||
systemInfo: {}, |
|||
// 小程序胶囊信息 |
|||
menuButtonInfo: { |
|||
width: 0, |
|||
height: 0, |
|||
top: 0, |
|||
left: 0, |
|||
bottom: 0, |
|||
right: 0 |
|||
}, |
|||
// 手机状态栏高度 |
|||
statusBarHeight: 0 |
|||
} |
|||
}, |
|||
emits:['getInfoData'], |
|||
mounted() { |
|||
this.handleGetSystemInfo() |
|||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ |
|||
this.handleGetMenuButtonInfo() |
|||
// #endif |
|||
this.$emit('getInfoData',{ |
|||
systemInfo:this.systemInfo, |
|||
menuButtonInfo:this.menuButtonInfo |
|||
}) |
|||
}, |
|||
methods: { |
|||
handleGetSystemInfo() { |
|||
this.systemInfo = uni.getSystemInfoSync(); |
|||
this.statusBarHeight = this.systemInfo.statusBarHeight |
|||
}, |
|||
|
|||
handleGetMenuButtonInfo() { |
|||
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
scoped |
|||
> |
|||
.default_head_content { |
|||
width: 100%; |
|||
background: #fff; |
|||
|
|||
.status_bar_fit { |
|||
width: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,24 +0,0 @@ |
|||
import Vue from 'vue' |
|||
import store from "../../store"; |
|||
import GlobalLoading from "./index.vue"; |
|||
export function showLoading(info=''){ |
|||
store.commit("SET_SHOW_LOADING",{flag:true,info}) |
|||
} |
|||
|
|||
export function hideLoading(){ |
|||
store.commit("SET_SHOW_LOADING",{flag:false,info:''}) |
|||
} |
|||
|
|||
export function showLoadingAuto(info='',time = 2000){ |
|||
store.commit("SET_SHOW_LOADING",{flag:true,info}) |
|||
setTimeout(()=>{ |
|||
store.commit("SET_SHOW_LOADING",{flag:false,info:''}) |
|||
},time) |
|||
} |
|||
|
|||
Vue.prototype.$showLoading = showLoading |
|||
Vue.prototype.$hideLoading = hideLoading |
|||
Vue.prototype.$showLoadingAuto = showLoadingAuto |
|||
// Vue.component("globalLoading",GlobalLoading)
|
|||
|
|||
// export default GlobalLoading
|
|||
@ -1,89 +0,0 @@ |
|||
<template> |
|||
<view class="loading-content" v-if="loadingFlag" @touchmove.stop.prevent="moveHandle" |
|||
@click.stop.prevent="moveHandle"> |
|||
<!-- 遮罩 --> |
|||
<view catchtouchmove="true" class="full-mask" v-if="false"/> |
|||
<!-- loading --> |
|||
<view class="loading-gif"> |
|||
<view class="flex mask"> |
|||
<image src="@/static/images/loading/loading.gif"></image> |
|||
<!-- <p> {{ loadingInfo }} </p>--> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {mapGetters} from 'vuex' |
|||
|
|||
export default { |
|||
name: "GlobalLoading", |
|||
methods: { |
|||
moveHandle() { |
|||
return; |
|||
} |
|||
}, |
|||
mounted() { |
|||
console.log("+++++++++++++++++++__++++++++++++++++++++") |
|||
console.log(this.loadingFlag, this.loadingInfo) |
|||
}, |
|||
computed: { |
|||
...mapGetters(["loadingFlag", "loadingInfo"]) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.loading-content { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
z-index: 9999; |
|||
//pointer-events: none; |
|||
|
|||
.mask { |
|||
//background-color: rgba(75, 53, 53, 0.52); |
|||
} |
|||
|
|||
.full-mask { |
|||
position: absolute; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-color: rgba(0, 0, 0, 0.52); |
|||
z-index: 9998; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.loading-gif { |
|||
z-index: 9999; |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.flex { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
position: absolute; |
|||
border-radius: 15rpx; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
|
|||
image { |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
} |
|||
|
|||
p { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,148 @@ |
|||
<!-- |
|||
* @FileDescription: 底部 |
|||
* @Author: kahu |
|||
* @Date: 2023/3/7 |
|||
* @LastEditors: kahu |
|||
* @LastEditTime: 2023/3/7 |
|||
--> |
|||
<template> |
|||
<view class="bottom_tips_content"> |
|||
<view :class="['line_inner_row',loading?'is_loading':'']"> |
|||
<view class="text_box"> |
|||
<view |
|||
:class="['text_item', loading?'text_loading':'',`delay-${index % 10}`]" |
|||
v-for="(item,index) in type===0?onBottomText:loadingText" |
|||
:key="index" |
|||
> |
|||
{{ item }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "ListBottomTips", |
|||
data() { |
|||
return {} |
|||
}, |
|||
props: { |
|||
loadingText: { |
|||
type: String, |
|||
default: "加载中..." |
|||
}, |
|||
onBottomText:{ |
|||
type:String, |
|||
default:'已经到达底部了~' |
|||
}, |
|||
type:{ |
|||
type:Number, |
|||
default:0 // 0底部1加载 |
|||
}, |
|||
loading:{ |
|||
type:Boolean, |
|||
default:true |
|||
} |
|||
}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
scoped |
|||
> |
|||
.bottom_tips_content { |
|||
padding: 20rpx 30rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.line_inner_row { |
|||
width: 100%; |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
font-weight: bold; |
|||
|
|||
.text_box { |
|||
display: flex; |
|||
|
|||
.text_item { |
|||
animation-delay: calc(.1s * var(--jumpTime)) |
|||
} |
|||
|
|||
.delay-0{ |
|||
animation-delay: calc(0s ) |
|||
} |
|||
.delay-1{ |
|||
animation-delay: calc(.1s ) |
|||
} |
|||
.delay-2{ |
|||
animation-delay: calc(.2s ) |
|||
} |
|||
.delay-3{ |
|||
animation-delay: calc(.3s ) |
|||
} |
|||
.delay-4{ |
|||
animation-delay: calc(.4s ) |
|||
} |
|||
.delay-5{ |
|||
animation-delay: calc(.5s ) |
|||
} |
|||
.delay-6{ |
|||
animation-delay: calc(.6s ) |
|||
} |
|||
.delay-7{ |
|||
animation-delay: calc(.7s ) |
|||
} |
|||
.delay-8{ |
|||
animation-delay: calc(.8s ) |
|||
} |
|||
.delay-9{ |
|||
animation-delay: calc(.9s ) |
|||
} |
|||
|
|||
} |
|||
|
|||
&:before, &:after { |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
content: ''; |
|||
width: 20%; |
|||
height: 5rpx; |
|||
border-radius: 8rpx; |
|||
background-color: #898989; |
|||
} |
|||
} |
|||
|
|||
.is_loading { |
|||
animation: breathe 1s ease-in-out 0s infinite alternate; |
|||
} |
|||
.text_loading{ |
|||
animation: jump 2s ease-in-out infinite; |
|||
} |
|||
} |
|||
|
|||
@keyframes breathe { |
|||
from { |
|||
opacity: 1; |
|||
} |
|||
to { |
|||
opacity: .5; |
|||
} |
|||
} |
|||
|
|||
@keyframes jump { |
|||
|
|||
30% { |
|||
transform: translateY(-12rpx) |
|||
} |
|||
60% { |
|||
transform: translateY(12rpx) |
|||
} |
|||
0%,100% { |
|||
transform: translateY(0rpx) |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,99 @@ |
|||
<!-- |
|||
* @FileDescription: ProductSkeleton |
|||
* @Author: kahu |
|||
* @Date: 2023/3/8 |
|||
* @LastEditors: kahu |
|||
* @LastEditTime: 2023/3/8 |
|||
--> |
|||
<template> |
|||
<view v-if="isFirst"> |
|||
<Skeleton |
|||
:loading="isFirst && loading" |
|||
:animation="true" |
|||
bgColor="#FFF" |
|||
/> |
|||
<view class="skeleton_content u-skeleton"> |
|||
<view class="empty_row"></view> |
|||
<view class="product_box"> |
|||
<view |
|||
class="product_item " |
|||
v-for="item in 40" |
|||
> |
|||
<view class="image u-skeleton-fillet"></view> |
|||
<view class="text_box "> |
|||
<view |
|||
class="text u-skeleton-fillet" |
|||
v-for="item in 2" |
|||
></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import Skeleton from "@/components/Skeleton"; |
|||
export default { |
|||
name: "ProductSkeleton", |
|||
data() { |
|||
return {} |
|||
}, |
|||
methods: {}, |
|||
components:{Skeleton}, |
|||
props: { |
|||
isFirst: { |
|||
type: Boolean, |
|||
default: () => true |
|||
}, |
|||
loading: { |
|||
type: Boolean, |
|||
default: () => true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
scoped |
|||
> |
|||
.skeleton_content { |
|||
width: 100%; |
|||
height: calc(100vh - 50px); |
|||
padding: 30rpx 30rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.product_box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
|
|||
.product_item { |
|||
margin: 10rpx 0; |
|||
width: 49%; |
|||
height: 500rpx; |
|||
//padding: 30rpx 30rpx; |
|||
//box-sizing: border-box; |
|||
.image { |
|||
width: 100%; |
|||
height: 70%; |
|||
} |
|||
|
|||
.text_box { |
|||
padding: 0 20rpx; |
|||
|
|||
.text { |
|||
margin-top: 15rpx; |
|||
width: 100%; |
|||
height: 60rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,74 @@ |
|||
<!-- |
|||
* @FileDescription: Agreement |
|||
* @Author: kahu |
|||
* @Date: 2023/3/7 |
|||
* @LastEditors: kahu |
|||
* @LastEditTime: 2023/3/7 |
|||
--> |
|||
<template> |
|||
<TuiModal |
|||
:show="privacyShow" |
|||
:custom="true" |
|||
:fadein="true" |
|||
> |
|||
<view class="Put-box1"> |
|||
<view class="text-align fs34 fs-bold"> |
|||
协议与隐私政策 |
|||
</view> |
|||
<p class="mar-top-20">欢迎来到cereshop！我们根据最新的法律、法规、监管政策要求，更新了cereshop隐私政策。</p> |
|||
<view class="flex-display flex-sp-between"> |
|||
<view |
|||
class="btn submit" |
|||
@click="privacyShow = false" |
|||
> |
|||
同意 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</TuiModal> |
|||
</template> |
|||
|
|||
<script> |
|||
import TuiModal from "@/components/modal/modal"; |
|||
|
|||
export default { |
|||
name: "Agreement", |
|||
components: {TuiModal}, |
|||
data() { |
|||
return { |
|||
privacyShow: false, |
|||
} |
|||
}, |
|||
created() { |
|||
// this.privacyShow = true |
|||
if (!uni.getStorageSync('storage_key')) { |
|||
// #ifdef APP-PLUS |
|||
this.privacyShow = true |
|||
// #endif |
|||
} |
|||
}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
scoped |
|||
> |
|||
.Put-box1 { |
|||
.btn { |
|||
text-align: center; |
|||
margin-top: 40rpx; |
|||
border: 1px solid #333333; |
|||
height: 80upx; |
|||
line-height: 80upx; |
|||
width: 100%; |
|||
color: #333333; |
|||
} |
|||
|
|||
.submit { |
|||
background-color: #333333; |
|||
color: #FFEBC4; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,171 @@ |
|||
<!-- |
|||
* @FileDescription: index |
|||
* @Author: kahu |
|||
* @Date: 2023/3/7 |
|||
* @LastEditors: kahu |
|||
* @LastEditTime: 2023/3/7 |
|||
--> |
|||
<template> |
|||
<view class="header_content"> |
|||
<!-- 头部 --> |
|||
<view |
|||
class="header_box" |
|||
id="header_box" |
|||
> |
|||
<DefaultHead @getInfoData="handleGetSystemInfoData" /> |
|||
<!-- 和胶囊齐平nav条 --> |
|||
<view |
|||
:style="{ |
|||
'padding-top':`${headerObj.menuPadding}px`, |
|||
'transform':`translateY(-${headerObj.menuButtonTogetherNavInfo.transformTop}px)` |
|||
}" |
|||
class="logo_row" |
|||
> |
|||
<!-- logo --> |
|||
<view class="logo_box"> |
|||
<image src="https://ceres.zkthink.com/static/assets/img/logo.png" /> |
|||
</view> |
|||
<!-- 右侧搜索 --> |
|||
<template> |
|||
<!-- #ifndef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ --> |
|||
<view |
|||
class="search_box" |
|||
@click="handleSearch" |
|||
> |
|||
<image src="https://ceres.zkthink.com/static/img/search.png" /> |
|||
</view> |
|||
<!-- #endif --> |
|||
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ --> |
|||
<view |
|||
class="search_box" |
|||
:style="{ |
|||
'position':'absolute', |
|||
'left':`${headerObj.systemInfo.menuButtonInfo.left}px`, |
|||
'transform':`translateX(-110%)` |
|||
}" |
|||
@click="handleSearch" |
|||
> |
|||
<image src="https://ceres.zkthink.com/static/img/search.png" /> |
|||
</view> |
|||
<!-- #endif --> |
|||
</template> |
|||
</view> |
|||
<!-- 其他内容 --> |
|||
<slot /> |
|||
</view> |
|||
|
|||
<!-- 空盒子撑高 --> |
|||
<view |
|||
class="empty_box" |
|||
:style="{height:headerObj.height+'px'}" |
|||
/> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import DefaultHead from "@/components/DefaultHead"; |
|||
|
|||
export default { |
|||
name: "FixedHead", |
|||
components: { |
|||
DefaultHead |
|||
}, |
|||
data() { |
|||
return { |
|||
// 头部对象 |
|||
headerObj: { |
|||
height: 0, // 容器总体高度 |
|||
systemInfo: {}, // 系统此乃西 |
|||
menuPadding: 0, // 胶囊距离statusBar的高度（胶囊top - statusBarHeight） |
|||
// 胶囊配置信息 |
|||
menuButtonTogetherNavInfo: { |
|||
height: 36, // 跟胶囊齐平的nav高度（和CSS的nav高度一致） |
|||
transformTop: 0 // nav要相对于menuPadding以后向上位移高度 |
|||
} |
|||
}, |
|||
} |
|||
}, |
|||
methods: { |
|||
// 查询产品 |
|||
handleSearch() { |
|||
uni.navigateTo({ |
|||
url: `/pages_category_page1/search/index/index` |
|||
}) |
|||
}, |
|||
/** |
|||
* 获取系统信息 |
|||
* 由DefaultHead回调 |
|||
*/ |
|||
handleGetSystemInfoData(data) { |
|||
this.headerObj.systemInfo = data |
|||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ |
|||
this.headerObj.menuPadding = data.menuButtonInfo.top - data.systemInfo.statusBarHeight |
|||
const {menuButtonTogetherNavInfo} = this.headerObj |
|||
// 如果胶囊高度小于齐平的nav高度 |
|||
const menuButtonHeight = data.menuButtonInfo.height |
|||
const menuButtonTogetherNavHeight = menuButtonTogetherNavInfo.height |
|||
if (menuButtonHeight < menuButtonTogetherNavHeight) { |
|||
// 胶囊始终在nav高度中心位置 |
|||
menuButtonTogetherNavInfo.transformTop = (menuButtonTogetherNavHeight - menuButtonHeight) / 2 |
|||
} |
|||
// #endif |
|||
this.$nextTick(()=>{ |
|||
let query = uni.createSelectorQuery().in(this); |
|||
// 处理撑高逻辑 |
|||
query.select('#header_box').boundingClientRect(boxData => { |
|||
this.headerObj.height = boxData.height |
|||
if(boxData.height<data.menuButtonInfo.bottom){ |
|||
this.headerObj.height = data.menuButtonInfo.bottom+10 |
|||
} |
|||
}).exec() |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
scoped |
|||
> |
|||
.header_content { |
|||
position: relative; |
|||
// 头部 |
|||
.header_box { |
|||
width: 100%; |
|||
height: auto; |
|||
position: fixed; |
|||
background-color: #fff; |
|||
z-index: 9999; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.logo_row { |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
|
|||
.logo_box { |
|||
width: 286rpx; |
|||
height: 72rpx; |
|||
} |
|||
|
|||
.search_box { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.empty_box { |
|||
width: 100%; |
|||
position: relative; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,153 @@ |
|||
<!-- |
|||
* @FileDescription: Skeleton |
|||
* @Author: kahu |
|||
* @Date: 2023/3/8 |
|||
* @LastEditors: kahu |
|||
* @LastEditTime: 2023/3/8 |
|||
--> |
|||
<template> |
|||
<view v-if="isFirst"> |
|||
<Skeletons |
|||
:loading="loading && isFirst" |
|||
:animation="true" |
|||
bgColor="#FFF" |
|||
/> |
|||
<div class="skeleton_content u-skeleton"> |
|||
<div class="empty_box u-skeleton-fillet"></div> |
|||
<div class="banner_box u-skeleton-fillet"></div> |
|||
<div class="icon_box "> |
|||
<div class="icon_item" v-for="item in 4"> |
|||
<div class="img u-skeleton-fillet"></div> |
|||
<div class="text u-skeleton-fillet"></div> |
|||
</div> |
|||
</div> |
|||
<div class="hot_box "> |
|||
<div class="left u-skeleton-fillet"></div> |
|||
<div class="right "> |
|||
<div class="top u-skeleton-fillet"></div> |
|||
<div class="bottom u-skeleton-fillet"></div> |
|||
</div> |
|||
</div> |
|||
<div class="new_box "> |
|||
<div class="item u-skeleton-fillet" v-for="item in 3"></div> |
|||
</div> |
|||
<div class="hot_box "> |
|||
<div class="left u-skeleton-fillet"></div> |
|||
<div class="right "> |
|||
<div class="top u-skeleton-fillet"></div> |
|||
<div class="bottom u-skeleton-fillet"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import Skeletons from "@/components/Skeleton"; |
|||
export default { |
|||
name: "Skeleton", |
|||
components:{Skeletons}, |
|||
data() { |
|||
return {} |
|||
}, |
|||
props:{ |
|||
loading:{ |
|||
type:Boolean, |
|||
default:true |
|||
}, |
|||
isFirst:{ |
|||
type:Boolean, |
|||
default:true |
|||
} |
|||
}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
scoped |
|||
> |
|||
.skeleton_content { |
|||
width: 100%; |
|||
height: calc(100vh - 50px); |
|||
overflow-y: hidden; |
|||
box-sizing: border-box; |
|||
|
|||
.empty_box{ |
|||
width: 100%; |
|||
height: 140rpx; |
|||
} |
|||
|
|||
.banner_box { |
|||
width: 100%; |
|||
height: 320rpx; |
|||
} |
|||
|
|||
.icon_box { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 30rpx 60rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.icon_item { |
|||
width: 80rpx; |
|||
|
|||
.img { |
|||
width: 100%; |
|||
height: 80rpx; |
|||
} |
|||
|
|||
.text { |
|||
margin-top: 20rpx; |
|||
width: 100%; |
|||
height: 30rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hot_box { |
|||
width: 100%; |
|||
height: 390rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 20rpx 30rpx; |
|||
box-sizing: border-box; |
|||
.left { |
|||
width: 49%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.right { |
|||
width: 49%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
|
|||
.top, .bottom { |
|||
width: 100%; |
|||
height: 49%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.new_box { |
|||
width: 100%; |
|||
height: 390rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 20rpx 30rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.item { |
|||
width: 30%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,157 @@ |
|||
<!-- |
|||
* @FileDescription: GoodListSkeleton |
|||
* @Author: kahu |
|||
* @Date: 2023/3/9 |
|||
* @LastEditors: kahu |
|||
* @LastEditTime: 2023/3/9 |
|||
--> |
|||
<template> |
|||
<view |
|||
class="good_list_skeleton_content" |
|||
v-if="isFirst" |
|||
> |
|||
<Skeleton :loading="loading && isFirst" :isFixedOnFather="false"/> |
|||
<view class="good_list_skeleton u-skeleton"> |
|||
<!-- <view class="search_row"> |
|||
<view class="input_box u-skeleton-fillet"></view> |
|||
<view class="icon u-skeleton-fillet"></view> |
|||
</view>--> |
|||
<view class="good_row_box" v-for="item in 20"> |
|||
<view class="good_row_item"> |
|||
<view class="image u-skeleton-fillet"></view> |
|||
<view class="info_box"> |
|||
<view class="name u-skeleton-fillet"></view> |
|||
<view class="pay u-skeleton-fillet"></view> |
|||
<view class="price_row "> |
|||
<view class="price u-skeleton-fillet"></view> |
|||
<view class="old_price u-skeleton-fillet"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import Skeleton from "@/components/Skeleton"; |
|||
|
|||
export default { |
|||
name: "GoodListSkeleton", |
|||
components: { |
|||
Skeleton |
|||
}, |
|||
data() { |
|||
return {} |
|||
}, |
|||
props: { |
|||
loading: { |
|||
type: Boolean, |
|||
default: () => true |
|||
}, |
|||
isFirst: { |
|||
type: Boolean, |
|||
default: () => true |
|||
} |
|||
}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
scoped |
|||
> |
|||
.good_list_skeleton_content { |
|||
width: 100%; |
|||
height: calc(100vh - 80px); |
|||
background-color: #fff; |
|||
overflow: hidden; |
|||
box-sizing: border-box; |
|||
padding: 20rpx 30rpx; |
|||
|
|||
.good_list_skeleton { |
|||
width: 100%; |
|||
//height: 200px; |
|||
//background-color: #000; |
|||
.search_row { |
|||
width: 100%; |
|||
height: 78rpx; |
|||
padding: 10rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.input_box { |
|||
background-color: #000; |
|||
width: 85%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.icon { |
|||
background-color: #000; |
|||
width: 10%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.good_row_box { |
|||
width: 100%; |
|||
padding: 10rpx 10rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.good_row_item { |
|||
width: 100%; |
|||
height: 240rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.image { |
|||
width: 300rpx; |
|||
height: 100%; |
|||
} |
|||
|
|||
.info_box { |
|||
height: 100%; |
|||
flex: 1; |
|||
padding: 5rpx 10rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
|
|||
.name { |
|||
width: 100%; |
|||
height: 60rpx; |
|||
} |
|||
|
|||
.pay { |
|||
width: 30%; |
|||
height: 50rpx; |
|||
} |
|||
|
|||
.price_row { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: flex-start; |
|||
|
|||
.price { |
|||
width: 30%; |
|||
height: 50rpx; |
|||
} |
|||
|
|||
.old_price { |
|||
margin-left: 20rpx; |
|||
width: 30%; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Some files were not shown because too many files changed in this diff
Write
Preview
Loading…
Cancel
Save
Reference in new issue