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

1

Browse Source
master
王文杰 8 months ago
parent 88c5d558de
commit 74a75e5c21
4 changed files with 541 additions and 12 deletions
Show Stats Download Patch File Download Diff File

12
src/pages.json
Unescape View File

@ -51,18 +51,6 @@
"navigationBarTitleText": "订单列表" "navigationBarTitleText": "订单列表"
} }
}, },
{
"path": "pages/cart/cart",
"style": {
"navigationBarTitleText": "购物车"
}
},
{
"path": "pages/cart/cart2",
"style": {
"navigationBarTitleText": "购物车"
}
},
{ {
"path": "pages/my/my", "path": "pages/my/my",
"style": { "style": {

119
src/pages/serviceSite/components/SiteItem.vue
Unescape View File

@ -0,0 +1,119 @@
<script setup lang="ts">
// const handlePhone = () => {
// uni.makePhoneCall({
// phoneNumber: '400-123-000', //仅为示例
// })
// }
const handleToto = () => {
uni.navigateTo({ url: '/pages/siteDetail/siteDetail' })
}
</script>
<template>
<view class="item-site" @tap="handleToto">
<view class="module-cont">
<image
class="left"
src="https://img.36krcdn.com/20200410/v2_41365a0f26a244fdab8e3f5be081ed2b_img_000"
/>
<view class="md">
<view class="name"> <span class="zuijin"> 最近 </span>上海市松江区佘山镇 </view>
<view class="time">营业时间：09-18:00</view>
<view class="loction">上海市松江区新松江路92弄开元地中海园区</view>
</view>
<view class="right">
<view class="num">1.03km</view>
<image
class="img"
src="https://img.36krcdn.com/20200410/v2_41365a0f26a244fdab8e3f5be081ed2b_img_000"
/>
</view>
</view>
<view class="md-tag"
><span class="tag-before">回收品类</span>旧衣·纸品·金属·家电·塑料·玻璃</view
>
<view class="foot-desc">
<view class="item">特色服务：上门服务、家电维修</view>
<view class="item">优惠活动：预约回收立享双倍积分</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.item-site {
padding: 32rpx 20rpx;
margin: 16rpx;
background-color: #fff;
border-radius: 4rpx;
.module-cont {
padding: 20rpx 0;
display: flex;
flex-direction: row;
.left {
width: 140rpx;
height: 140rpx;
border-radius: 12rpx;
}
.md {
flex: 1;
margin: 0 10rpx;
font-size: 24rpx;
color: #0d0d26;
.name {
font-size: 30rpx;
.zuijin {
font-size: 24rpx;
color: #ff7d00;
background: #fff7e8;
padding: 4rpx 4rpx;
margin-right: 6rpx;
border-radius: 4rpx;
}
}
.time {
color: #95969d;
margin: 8rpx 0;
}
.loction {
color: #0d0d26;
}
}
.right {
.num {
font-size: 28rpx;
color: #95969d;
}
.img {
width: 72rpx;
height: 72rpx;
margin-top: 20rpx;
border-radius: 10rpx;
}
}
}
.md-tag {
background: #e8fffb;
color: #0fc6c2;
margin: 10rpx 0;
font-weight: 400;
font-size: 24rpx;
padding: 6rpx 0rpx;
.tag-before {
background: #0fc6c2;
color: #fff;
font-size: 24rpx;
font-weight: 500;
padding: 4rpx 8rpx;
border-radius: 4rpx;
margin-right: 10rpx;
}
}
.foot-desc {
.item {
font-size: 24rpx;
color: #95969d;
margin: 10rpx 0;
}
}
}
</style>

179
src/pages/serviceSite/serviceSite.vue
Unescape View File

@ -0,0 +1,179 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import SiteItem from './components/siteItem.vue'
const activeMenuKey = ref(0)
const menuList = [
{
id: 1,
name: '地区',
},
{
id: 2,
name: '回收品类',
},
{
id: 3,
name: '服务',
},
{
id: 4,
name: '筛选',
},
]
type siteParams = {
page: Number
pageSize: Number
menuState: String
}
// 请求参数
const queryParams: Required<siteParams> = {
page: 1,
pageSize: 5,
menuState: '1',
}
// 获取订单列表
const dataList = ref<any[]>([])
// 是否加载中标记，用于防止滚动触底触发多次请求
const isLoading = ref(false)
// 是否分页结束
const isFinish = ref(false)
const getDataList = async () => {
// 如果数据出于加载中，退出函数
if (isLoading.value) return
// 退出分页判断
if (isFinish.value === true) {
return uni.showToast({ icon: 'none', title: '没有更多数据~' })
}
// 发送请求前，标记为加载中
isLoading.value = true
// 发送请求
// const res = await getMemberOrderAPI(queryParams)
const res = await new Promise((resolve, reject) => {
setTimeout(() => {
const data = [
{
id: 1,
},
{
id: 2,
},
{
id: 3,
},
{
id: 4,
},
{
id: 5,
},
{
id: 6,
},
{
id: 7,
},
{
id: 8,
},
]
const obj = {
result: data,
pages: 4,
}
resolve(obj)
}, 100)
})
// 发送请求后，重置标记
isLoading.value = false
// 数组追加
dataList.value.push(...res.result)
// 分页条件
if (queryParams.page < res.result.pages) {
// 页码累加
queryParams.page++
} else {
// 分页已结束
isFinish.value = true
}
}
const isTriggered = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
// 开始动画
isTriggered.value = true
// 重置数据
queryParams.page = 1
dataList.value = []
isFinish.value = false
// 加载数据
await getDataList()
// 关闭动画
isTriggered.value = false
}
const handleMenuChange = (val) => {
activeMenuKey.value = val
getDataList()
}
onMounted(() => {
getDataList()
})
</script>
<template>
<view class="service-site">
<view class="menu-list">
<view
class="item"
@tap="handleMenuChange(index)"
:class="{ active: activeMenuKey == index }"
v-for="(item, index) in menuList"
:key="item.id"
>{{ item.name }} >
</view>
</view>
<scroll-view
enable-back-to-top
scroll-y
class="scroll-view"
:refresher-triggered="isTriggered"
@refresherrefresh="onRefresherrefresh"
@scrolltolower="getDataListList"
>
<siteItem class="item" v-for="item in dataList" :key="item.id" />
</scroll-view>
</view>
<!-- 底部占位空盒子 -->
<view class="toolbar-height" safe-area-inset-bottom></view>
</template>
<style lang="scss">
page {
height: 100%;
}
.service-site {
height: calc(100% - 100rpx);
.menu-list {
height: 80rpx;
line-height: 80rpx;
display: flex;
justify-content: space-around;
.item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
&.active {
color: #5386e4;
}
}
}
.scroll-view {
overflow: auto;
}
}
// 底部占位空盒子
.toolbar-height {
height: 100rpx;
}
</style>

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

@ -0,0 +1,243 @@
<script setup lang="ts">
import { ref } from 'vue'
const bannerList = [
{
hrefUrl: '1005000',
id: '25',
imgUrl:
'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/e83efb1b-309c-46f7-98a3-f1fefa694338.jpg',
type: '1',
},
{
hrefUrl: '1005000',
id: '21',
imgUrl:
'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/dfc11bb0-4af5-4e9b-9458-99f615cc685a.jpg',
type: '1',
},
]
const leiList = [
{
id: 1,
name: '旧衣服',
},
{
id: 2,
name: '家用电器',
},
{
id: 2,
name: '废纸废书',
},
{
id: 3,
name: '废金属',
},
{
id: 4,
name: '废塑料',
},
]
const rateValue = ref(2)
</script>
<template>
<view class="site-detail">
<XtxSwiper :list="bannerList" />
<view class="cont">
<view class="info">
<view class="hd">
<view class="name">上海松江区佘山镇</view>
<view class="num">1.03km</view>
</view>
<view class="md">
<view class="label">营业时间：</view>
<view class="time">09:00 - 18:00</view>
</view>
<view class="fd">
<view class="label">地址：上海市松江区新松江路92弄开元地中海园区</view>
<view class="img"></view>
</view>
</view>
<view class="module-menu">
<view
class="item"
@tab="handleMenuChange(index)"
:class="{ active: activeMenuKey == index }"
v-for="(item, index) in leiList"
:key="item.id"
>{{ item.name }}</view
>
</view>
<view class="detail-list">
<view class="item arrow flex-row">
<view class="service-title">服务</view>
<view class="tag-list">
<view class="tag">上门服务</view>
<view class="tag">家电维修</view>
<view class="tag">品控质检</view>
</view>
</view>
<view class="item flex-column rate">
<view class="service-title">评分</view>
<uni-rate active-color="#FF7D00" v-model="rateValue" />
</view>
<view class="item flex-column activity">
<view class="activity-title">活动</view>
<view class="activity-list">
<view class="activity-item">会员价</view>
<view class="activity-item">赠送积分</view>
</view>
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.site-detail {
background: #f2f2fa;
.cont {
background-color: #fff;
margin: 32rpx;
padding: 16rpx;
min-height: 80vh;
.info {
padding: 20rpx 0;
box-shadow: 0px 0px 8px 0px rgba(161, 161, 177, 0.12);
.hd {
display: flex;
justify-content: space-between;
.name {
font-size: 30rpx;
font-weight: 500;
color: #0d0d26;
}
.num {
font-size: 28rpx;
color: #95969d;
}
}
.md {
margin: 10rpx 0;
font-size: 24rpx;
color: #95969d;
display: flex;
}
.fd {
display: flex;
justify-content: space-between;
align-items: center;
.label {
font-size: 24rpx;
}
.img {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
background-color: #3a82fb;
}
}
}
.module-menu {
display: flex;
padding: 36rpx 0rpx;
box-shadow: 0px 0px 8px 0px rgba(161, 161, 177, 0.12);
.item {
flex: 1;
color: #95969d;
padding: 10rpx 0;
border-radius: 10rpx;
text-align: center;
&.active {
background: #fff7e8;
}
}
}
/* 列表 */
.detail-list {
padding: 0 20rpx;
background-color: #fff;
margin-bottom: 20rpx;
border-radius: 10rpx;
.item {
// line-height: 90rpx;
padding-left: 10rpx;
font-size: 30rpx;
color: #333;
border-bottom: 1rpx solid #ddd;
position: relative;
text-align: left;
border-radius: 0;
background-color: #fff;
display: flex;
&::after {
width: auto;
height: auto;
left: auto;
border: none;
}
// &:first-child {
// border: none;
// }
&::after {
right: 5rpx;
}
&.flex-column {
flex-direction: column;
&:first-child {
}
}
&.rate {
line-height: 90rpx;
padding-bottom: 20rpx;
}
&.flex-row {
line-height: 90rpx;
flex-direction: row;
}
.tag-list {
display: flex;
margin-left: 20rpx;
.tag {
color: #95969d;
font-size: 24rpx;
}
}
&.activity {
margin: 20rpx 0;
.activity-list {
display: flex;
.activity-item {
margin: 20rpx 10rpx;
&:first-child {
background: #484540;
padding: 4rpx 6rpx;
border-radius: 10rpx;
color: #ffe6b5;
font-size: 24rpx;
}
&:last-child {
padding: 4rpx 6rpx;
border-radius: 10rpx;
color: #ffb739;
border: 2rpx solid #ffb739;
font-size: 24rpx;
}
}
}
}
}
.arrow::after {
content: '\e6c2';
position: absolute;
top: 50%;
color: #ccc;
font-family: 'erabbit' !important;
font-size: 32rpx;
transform: translateY(-50%);
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save