yunxi
/
app-nx-personal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

Browse Source
master
王文杰 7 months ago
parent 2b130be81c
commit 3e15ee72d2
2 changed files with 490 additions and 63 deletions
Show Stats Download Patch File Download Diff File

430
src/pages/siteDetail/components/PageSkeleton.vue
Unescape View File

@ -0,0 +1,430 @@
<template name="skeleton">
<view class="sk-container">
<scroll-view
:scroll-y="true"
class="viewport sk-transparent"
id="scroller"
:enable-back-to-top="true"
>
<view class="overview sk-image" style="padding-top: 64px">
<view class="status sk-transparent sk-text-0-0000-826 sk-text">待收货</view>
</view>
<view class="shipment">
<navigator class="logistics sk-image sk-pseudo sk-pseudo-circle" hover-class="none">
<view class="message sk-transparent sk-text-14-2857-512 sk-text"
>到了小福家里，请签收</view
>
<view class="date sk-transparent sk-text-14-2857-990 sk-text">2023-04-15 23:23:04</view>
</navigator>
<view class="locate sk-image">
<view class="user sk-transparent sk-text-14-2857-630 sk-text">苏东坡 13633336666</view>
<view class="address sk-transparent sk-text-14-2857-606 sk-text"
>广东省 广州市 天河区吉山幼儿园</view
>
</view>
</view>
<view class="goods">
<view class="item">
<navigator class="navigator" hover-class="none">
<image class="cover sk-image"></image>
<view class="meta">
<view class="name ellipsis sk-transparent sk-text-14-2857-474 sk-text"
>厚厚一按就干爽，埃及进口长绒棉毛巾</view
>
<view class="type sk-transparent sk-text-22-2222-237 sk-text"
>超值4条装（灰蓝色+粉色+银灰+嫩黄）</view
>
<view class="price">
<view class="actual">
<text class="symbol sk-transparent sk-opacity">¥</text>
<text class="sk-transparent sk-text-14-2857-102 sk-text">68</text>
</view>
</view>
<view class="quantity sk-transparent sk-opacity">x1</view>
</view>
</navigator>
<navigator class="navigator" hover-class="none">
<image class="cover sk-image"></image>
<view class="meta">
<view class="name ellipsis sk-transparent sk-text-14-2857-969 sk-text"
>KJE金属色系轻量电动车骑行盔男女通用</view
>
<view class="type sk-transparent sk-text-22-2222-510 sk-text">玫瑰金L</view>
<view class="price">
<view class="actual">
<text class="symbol sk-transparent sk-opacity">¥</text>
<text class="sk-transparent sk-text-14-2857-431 sk-text">120</text>
</view>
</view>
<view class="quantity sk-transparent sk-opacity">x1</view>
</view>
</navigator>
<navigator class="navigator" hover-class="none">
<image class="cover sk-image"></image>
<view class="meta">
<view class="name ellipsis sk-transparent sk-text-14-2857-130 sk-text"
>源自澳洲进口羊毛，儿童奢暖羊毛被升级款</view
>
<view class="type sk-transparent sk-text-22-2222-110 sk-text"
>春秋款， 100%羊毛款：150x200cm，适合1.2米/1.35米床</view
>
<view class="price">
<view class="actual">
<text class="symbol sk-transparent sk-opacity">¥</text>
<text class="sk-transparent sk-text-14-2857-273 sk-text">289</text>
</view>
</view>
<view class="quantity sk-transparent sk-opacity">x1</view>
</view>
</navigator>
</view>
<view class="total">
<view class="row">
<view class="text sk-transparent sk-text-0-0000-302 sk-text">商品总价: </view>
<view
class="symbol sk-transparent sk-text-0-0000-998 sk-text sk-pseudo sk-pseudo-circle"
>477</view
>
</view>
<view class="row">
<view class="text sk-transparent sk-text-0-0000-912 sk-text">运费: </view>
<view
class="symbol sk-transparent sk-text-0-0000-208 sk-text sk-pseudo sk-pseudo-circle"
>2</view
>
</view>
<view class="row">
<view class="text sk-transparent sk-text-0-0000-538 sk-text">应付金额: </view>
<view
class="symbol primary sk-transparent sk-text-0-0000-858 sk-text sk-pseudo sk-pseudo-circle"
>479</view
>
</view>
</view>
</view>
<view class="detail">
<view class="title sk-transparent sk-text-0-0000-66 sk-text">订单信息</view>
<view class="row">
<view class="item sk-transparent">
订单编号: 1645809639951962113
<text class="copy sk-transparent sk-text-0-0000-522 sk-text">复制</text>
</view>
<view class="item sk-transparent sk-text-0-0000-353 sk-text"
>下单时间: 2023-04-11 23:22:50</view
>
</view>
</view>
<view class="toolbar" style="padding-bottom: 34px">
<view
class="button primary sk-transparent sk-text-31-9444-411 sk-text"
style="background-position-x: 50%"
>再次购买</view
>
</view>
</scroll-view>
</view>
</template>
<style>
.sk-transparent {
color: transparent !important;
}
.sk-text-14-2857-107 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 44.8rpx;
position: relative !important;
}
.sk-text {
background-origin: content-box !important;
background-clip: content-box !important;
background-color: transparent !important;
color: transparent !important;
background-repeat: repeat-y !important;
}
.sk-text-0-0000-826 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 36rpx;
position: relative !important;
}
.sk-text-14-2857-512 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-990 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 33.6rpx;
position: relative !important;
}
.sk-text-14-2857-630 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-606 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 33.6rpx;
position: relative !important;
}
.sk-text-14-2857-474 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-22-2222-237 {
background-image: linear-gradient(
transparent 22.2222%,
#eeeeee 0%,
#eeeeee 77.7778%,
transparent 0%
) !important;
background-size: 100% 43.2rpx;
position: relative !important;
}
.sk-opacity {
opacity: 0 !important;
}
.sk-text-14-2857-102 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 33.6rpx;
position: relative !important;
}
.sk-text-14-2857-969 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-22-2222-510 {
background-image: linear-gradient(
transparent 22.2222%,
#eeeeee 0%,
#eeeeee 77.7778%,
transparent 0%
) !important;
background-size: 100% 43.2rpx;
position: relative !important;
}
.sk-text-14-2857-431 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 33.6rpx;
position: relative !important;
}
.sk-text-14-2857-130 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-22-2222-110 {
background-image: linear-gradient(
transparent 22.2222%,
#eeeeee 0%,
#eeeeee 77.7778%,
transparent 0%
) !important;
background-size: 100% 43.2rpx;
position: relative !important;
}
.sk-text-14-2857-273 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
#eeeeee 85.7143%,
transparent 0%
) !important;
background-size: 100% 33.6rpx;
position: relative !important;
}
.sk-text-0-0000-302 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 26rpx;
position: relative !important;
}
.sk-text-0-0000-998 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 26rpx;
position: relative !important;
}
.sk-text-0-0000-912 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 26rpx;
position: relative !important;
}
.sk-text-0-0000-208 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 26rpx;
position: relative !important;
}
.sk-text-0-0000-538 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 26rpx;
position: relative !important;
}
.sk-text-0-0000-858 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 36rpx;
position: relative !important;
}
.sk-text-0-0000-66 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 30rpx;
position: relative !important;
}
.sk-text-0-0000-522 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 20rpx;
position: relative !important;
}
.sk-text-0-0000-353 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 26rpx;
position: relative !important;
}
.sk-text-0-0000-375 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
#eeeeee 100%,
transparent 0%
) !important;
background-size: 100% 32rpx;
position: relative !important;
}
.sk-text-31-9444-411 {
background-image: linear-gradient(
transparent 31.9444%,
#eeeeee 0%,
#eeeeee 68.0556%,
transparent 0%
) !important;
background-size: 100% 72rpx;
position: relative !important;
}
.sk-image {
background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
background: #efefef !important;
background-image: none !important;
color: transparent !important;
border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
border-radius: 50% !important;
}
.sk-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: transparent;
}
</style>

47
src/pages/siteDetail/siteDetail.vue
Unescape View File

@ -2,20 +2,8 @@
import { ref, reactive } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { getSiteDetailAPI } from '@/services/site'
const bannerList = [
{
id: '1',
imgUrl: '/static/images/banner1.jpg',
hrefUrl: '1013001',
type: '1',
},
{
id: '2',
imgUrl: '/static/images/banner1.jpg',
hrefUrl: '1019000',
type: '1',
},
]
import { fileDomain } from '@/services/constants'
import PageSkeleton from './components/PageSkeleton.vue'
const leiList = [
{
id: 1,
@ -38,9 +26,9 @@ const leiList = [
name: '废塑料',
},
]
const siteInfo = ref(null)
const siteInfo = ref({})
const rateValue = ref(5)
const isLoading = ref(false)
const isLoading = ref(true)
const getDataList = async (stationId) => {
// 如果数据出于加载中，退出函数
// 发送请求前，标记为加载中
@ -50,9 +38,14 @@ const getDataList = async (stationId) => {
stationId,
}
const res = await getSiteDetailAPI(queryParams)
if (res.code == 200) {
siteInfo.value = res.data
}
const obj = res.data
const arr = obj.stationImg && JSON.parse(obj.stationImg)
const imgUrl = fileDomain + arr[0].url
obj.imgUrl = imgUrl
const categoryArr = obj.stationProducts?.map((q) => q.name) || []
obj.categoryStr = categoryArr.join('.')
siteInfo.value = obj
// 发送请求后，重置标记
isLoading.value = false
}
@ -60,16 +53,15 @@ const getDataList = async (stationId) => {
onLoad((options) => {
getDataList(options.siteId)
})
</script>
<template>
<view class="site-detail">
<XtxSwiper :list="bannerList" />
<template v-if="!isLoading">
<view class="cont">
<view class="info">
<view class="hd">
<view class="name">{{ siteInfo.stationName }}</view>
<view class="num">{{ siteInfo.distance }}m</view>
<view class="name">{{ siteInfo?.stationName }}</view>
<view class="num">{{ siteInfo.distance || 0.0 }}米</view>
</view>
<view class="md">
<view class="label">营业时间：</view>
@ -77,7 +69,7 @@ onLoad((options) => {
</view>
<view class="fd">
<view class="label">地址：{{ siteInfo.address }}</view>
<view class="img"></view>
<!-- <view class="img"></view> -->
</view>
</view>
<view class="module-menu">
@ -112,6 +104,10 @@ onLoad((options) => {
</view>
</view>
</view>
</template>
<template v-else>
<PageSkeleton />
</template>
</view>
</template>
<style lang="scss" scoped>
@ -119,9 +115,10 @@ onLoad((options) => {
background: #f2f2fa;
.cont {
background-color: #fff;
margin: 32rpx;
margin: 20rpx;
padding: 16rpx;
min-height: 80vh;
overflow: auto;
.info {
padding: 20rpx 0;
box-shadow: 0px 0px 8px 0px rgba(161, 161, 177, 0.12);

Write Preview
Loading…
Cancel
Save