中团餐饮(进度24%):

1、首页的食堂招租跳转页面的静态页面已完成,列表数据已对接,剩余搜索功能的实现;
2、个人中心的签到页面:静态页面已完成,剩余底部四行任务按钮的跳转和实现;
3、个人中心的采用原商城的页面能正常跳转,剩余部分需要与UI设计图对比进行调整
This commit is contained in:
wangzimeng 2025-07-22 18:19:21 +08:00
parent 4fe9dfa923
commit 414da254b2
11 changed files with 1690 additions and 491 deletions

View File

@ -23,7 +23,8 @@
{
"path": "pages/index/fabu",
"style": {
"navigationBarTitleText": "发布"
"navigationBarTitleText": "发布",
"enablePullDownRefresh": true
},
"meta": {
"sync": true,
@ -95,7 +96,49 @@
}
}
],
"subPackages": [{
"subPackages": [
{
"root": "pages/canteenRent",
"pages": [{
"path": "rentList",
"style": {
"navigationBarTitleText": "食堂招租"
},
"meta": {
"auth": true,
"title": "食堂招租"
}
},
{
"path": "rentDetail",
"style": {
"navigationBarTitleText": "招租详情"
},
"meta": {
"sync": true,
"title": "招租详情",
"group": "食堂招租"
}
}
]
},
{
"root": "pages/school",
"pages": [{
"path": "schoolIndex",
"style": {
"navigationBarTitleText": "平台学院"
},
"meta": {
"auth": true,
"title": "平台学院"
}
}
]
},
{
"root": "pages/goods",
"pages": [{
"path": "index",
@ -304,6 +347,18 @@
"group": "用户中心"
}
},
{
"path": "myRelease/list",
"style": {
"navigationBarTitleText": "我的发布"
},
"meta": {
"auth": true,
"sync": true,
"title": "我的发布",
"group": "用户中心"
}
},
{
"path": "goods-collect",
"style": {

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,9 @@
<template>
<s-layout title="招租详情"></s-layout>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>

View File

@ -0,0 +1,398 @@
<template>
<s-layout title="食堂招租">
<view class="container">
<!-- 顶部 -->
<view class="top">
<!-- 顶部-地址&搜索 -->
<view class="locTop">
<view class="locTop-right">
<uni-section style="border-radius: 192rpx;padding: 0;" type="line">
<uni-search-bar :value="listQuery.keywords" style="border-radius: 192rpx;" radius="23" placeholder="搜索您需要的信息"
bgColor="#EEEEEE" clearButton="none" cancelButton="none" @confirm="searchRent"
@blur="searchRent1" />
</uni-section>
<!-- <uni-search-bar></uni-search-bar> @confirm="search"-->
</view>
<view class="locTop-left">
<view class="locTop-left-left" @click="state.showRegion = true">
<view
style="font-size: 28rpx;font-weight: 400;line-height: 32rpx;color: #999999;width: auto;">
{{state.model.city_name ? proCity:'地区' }}
</view>
<image style="width: 27rpx;height: 27rpx;margin-left: 10rpx;"
src="https://jiangxiaoxian.0rui.cn/rentMore.png" mode=""></image>
</view>
<picker mode="selector" :value="tagList" :range="tagList" range-key="dictLabel"
@change="onChangeTag">
<view class="picker"
style="width: auto; position: relative;font-size: 28rpx;font-weight: 400;color: #999999;line-height: 32rpx;">
{{dictLabel || '标签'}}
<image style="width: 27rpx;height: 27rpx;margin-left: 6rpx;"
src="https://jiangxiaoxian.0rui.cn/rentMore.png" mode=""></image>
</view>
</picker>
</view>
</view>
</view>
<!-- 推荐列表 -->
<view class="recommend-box">
<view class="rrecommList" v-for="(item,index) in rentList" :key="index">
<view class="reListItem">
<!-- 左侧图片 -->
<view class="listItem-images">
<image v-if="item.recommend == 1"
style="width: 77rpx;height: 36rpx;z-index: 100;position: relative;top: 34rpx;left: 0rpx;"
src="https://jiangxiaoxian.0rui.cn/hot.png"></image>
<image class="iamges-mainImg" :src="item.images[0]"></image>
</view>
<!-- 右侧内容 -->
<view class="listItem-contents">
<view class="title2" style="margin-bottom: 20rpx;">{{item.platform_title}}</view>
<scroll-view class="">标签</scroll-view>
<view class="cons-third">
<view style="display: flex;">
<image style="width: 24rpx;height: 24rpx;"
src="https://jiangxiaoxian.0rui.cn/locationList.png"></image>
<view class="title3" style="margin-left: 10rpx;">{{item.address_city_text}}</view>
</view>
<view class="title3">{{item.release_time_text}}</view>
<view style="display: flex;">
<image style="width: 26rpx;height: 20rpx;"
src="https://jiangxiaoxian.0rui.cn/eye.png"></image>
<view class="title3" style="margin-left: 10rpx;">{{item.views}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 省市区弹窗 -->
<su-regionCity-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm">
</su-regionCity-picker>
<uni-load-more
v-if="state.pagination.total > 0"
:status="state.loadStatus"
:content-text="{
contentdown: '上拉加载更多',
}"
@tap="loadmore"
/>
</s-layout>
</template>
<script setup>
import {
computed,
ref,
reactive,
} from 'vue';
import {
onLoad,
onShow,
onPageScroll,
onPullDownRefresh,
onReachBottom
} from '@dcloudio/uni-app';
import {
consignee,
mobile,
address,
region
} from '@/sheep/validate/form';
import rent from '../../sheep/api/rent';
import sheep from '@/sheep';
const listQuery = ref({
page: 1,
limit: 10,
addrLatitude: null,
addrLongitude: null,
address: null,
address1: null,
categoryId: null,
tags: '',
area: null,
city: null,
district: null,
keywords:null,
// district: '',
})
const dictLabel = ref(null)
const tagList = ref([])
onLoad(() => {
getList();
})
onShow(() => {})
//
const pagination = {
data: [],
current_page: 1,
total: 1,
last_page: 1,
};
const state = reactive({
showRegion: false,
model: {
consignee: '',
mobile: '',
address: '',
is_default: false,
region: '',
},
rules: {
consignee,
mobile,
address,
region,
},
currentTab: 0,
pagination: {
data: [],
current_page: 1,
total: 1,
last_page: 1,
},
loadStatus: '',
type: '',
});
const proCity = ref(''); //
function searchRent() {
console.log('搜索');
}
const onRegionConfirm = (e) => {
console.log('onRegionConfirm', e);
state.model = {
...state.model,
...e,
};
proCity.value = state.model.province_name + " " + state.model.city_name
console.log('onRegionConfirm33', state.model, proCity.value);
state.showRegion = false;
};
/* 标签 */
// const getTagList = () => {
// const obj = [{
// dictLabel:'',
// dictCode:''
// }]
// getTag(listQuery.value).then(res => {
// tagList.value = obj.concat(res.data)
// total.value = res.total
// })
// }
/**选择标签 */
// function onChangeTag(e) {
// const value = e.detail.value;
// listQuery.value.tags = tagList.value[e.detail.value].dictLabel;
// dictLabel.value = tagList.value[e.detail.value].dictLabel;
// console.log('',listQuery.value);
// getList(listQuery.value);
// }
const rentList = ref([])
//
async function getList() {
// state.loadStatus = 'loading';
let res = await sheep.$api.rent.rentlist({
keywords: listQuery.keywords,
page:listQuery.page,
limit: listQuery.limit,
my:1,
order:'normal',
status:1,
});
console.log('getList',res);
if (res.code === 1) {
rentList.value = res.data.list
for(let i = 0;i<rentList.value.length;i++) {
rentList.value[i].release_time_text = rentList.value[i].release_time_text.split(' ')[0]
}
console.log('rentList', rentList.value);
}
// if (state.pagination.current_page < state.pagination.last_page) {
// state.loadStatus = 'more';
// } else {
// state.loadStatus = 'noMore';
// }
}
//
function loadmore() {
if (state.loadStatus !== 'noMore') {
if (state.currentTab == 0) {
getList(state.pagination.current_page + 1);
} else {
getList(state.pagination.current_page + 1);
}
}
}
onReachBottom(() => {
// loadmore();
});
</script>
<style lang="scss" scoped>
.search-result {
padding-top: 10px;
padding-bottom: 20px;
text-align: center;
}
.search-result-text {
text-align: center;
font-size: 14px;
color: #666;
}
.example-body {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
padding: 0px;
}
.uni-mt-10 {
margin-top: 10px;
}
.title2 {
color: #3d3d3d;
font-size: 30rpx;
font-weight: 800;
line-height: 42rpx;
}
.title3 {
font-size: 20rpx;
font-weight: 400;
color: #999999;
line-height: 22rpx;
}
.container {
width: 100%;
height: 100%;
.top {
width: 100%;
height: 80rpx;
background-color: #ffffff;
// background-image: url('https://jiangxiaoxian.0rui.cn/topBack.png');
background-size: 100%;
padding: 20rpx 30rpx;
display: grid;
.locTop {
width: 96%;
height: 70rpx;
display: flex;
// justify-content: space-between;
align-items: center;
.locTop-left {
position: absolute;
right: 5%;
width: 176rpx auto;
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 20rpx;
.locTop-left-left {
width: 176rpx auto;
display: flex;
align-items: center;
justify-content: flex-start;
margin-right: 20rpx;
}
}
.locTop-right {
width: 406rpx;
height: 70rpx;
}
}
}
.recommend-box {
margin-top: 30rpx;
padding: 0rpx 30rpx;
.rrecommList {
// margin: 0 auto;
// margin-top: 30rpx;
// padding: 30rpx;
.reListItem {
background-color: #ffffff;
width: 640rpx;
height: 190rpx;
padding: 30rpx;
display: flex;
justify-content: flex-start;
align-items: center;
border-radius: 18rpx;
.listItem-images {
display: grid;
justify-content: flex-start;
.iamges-mainImg {
width: 190rpx;
height: 190rpx;
position: relative;
right: 0rpx;
bottom: 18rpx;
z-index: 1;
}
}
.listItem-contents {
margin-left: 20rpx;
.cons-third {
margin-top: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
}
}
}
}
}
</style>

View File

@ -7,10 +7,10 @@
<view class="top">
<!-- 顶部-地址&搜索 -->
<view class="locTop">
<view class="locTop-left">
<view class="locTop-left" @click="state.showRegion = true">
<image style="width: 34rpx;height: 34rpx;"
src="https://jiangxiaoxian.0rui.cn/locationTop.png" mode=""></image>
<view style="margin-left: 10rpx;font-size: 30rpx;font-weight: 800;line-height: 26rpx;">全国
<view style="margin-left: 10rpx;font-size: 30rpx;font-weight: 800;line-height: 26rpx;">{{state.model.city_name ? proCity:'全国' }}
</view>
</view>
<view class="locTop-right">
@ -24,12 +24,12 @@
<!-- 顶部-三个内容跳转 -->
<view class="navTop">
<view class="navTop-left">
<view class="navTop-left" @click="toPage('/pages/canteenRent/rentList')">
<view class="title" style="">食堂招租</view>
<view class="intro" style="color: #f42b2b;margin-top: 20rpx;">味揽商机 食载未来</view>
</view>
<view class="navTop-right">
<view class="navRight1">
<view class="navRight1" @click="toPage('/pages/school/schoolIndex')">
<view class="title" style="">平台学院</view>
<view class="intro" style="color: #05b0b0;margin-top: 20rpx;">学知赋能成长</view>
</view>
@ -112,6 +112,14 @@
</view>
<!-- 省市区弹窗 -->
<su-regionCity-picker
:show="state.showRegion"
@cancel="state.showRegion = false"
@confirm="onRegionConfirm"
>
</su-regionCity-picker>
</s-layout>
</view>
</template>
@ -119,7 +127,8 @@
<script setup>
import {
computed,
ref
ref,
reactive,
} from 'vue';
import {
onLoad,
@ -128,6 +137,7 @@
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import $share from '@/sheep/platform/share';
import { consignee, mobile, address, region } from '@/sheep/validate/form';
// tabBar
uni.hideTabBar({
@ -138,6 +148,41 @@
const isLogin = computed(() => sheep.$store('user').isLogin);
const qualification = ref(false)
const state = reactive({
showRegion: false,
model: {
consignee: '',
mobile: '',
address: '',
is_default: false,
region: '',
},
rules: {
consignee,
mobile,
address,
region,
},
});
const proCity = ref('')
const onRegionConfirm = (e) => {
console.log('onRegionConfirm',e);
state.model = {
...state.model,
...e,
};
proCity.value = state.model.province_name + " " + state.model.city_name
console.log('onRegionConfirm33',state.model,proCity.value);
state.showRegion = false;
};
onLoad((options) => {
// #ifdef MP
//
@ -179,7 +224,6 @@
uni.navigateTo({
url: e
})
qualification.value = true;
}else{
uni.showToast({
@ -195,18 +239,6 @@
}, 2000);
}
// uni.navigateTo({
// url:'/packageA/search/index'
// })
}
function haveQualification() {
console.log('qualification',isLogin.value);
if(isLogin.value == true) {
qualification.value = true;
}else{
qualification.value = true;
}
}
</script>

View File

@ -28,7 +28,7 @@
</view>
<view class="fs-28 weight4" style="margin-top: 30rpx;">剩余拨打次数 {{ userInfo.mobile_num ? userInfo.mobile_num : 0 }}</view>
</view>
<view class="head-signInBox">
<view class="head-signInBox" @click="toPage('/pages/app/sign')">
<image style="width: 46rpx;height: 44rpx;" src="https://jiangxiaoxian.0rui.cn/signIn.png"
mode=""></image>
<view class="signInText" style="margin-left: 10rpx;">签到</view>
@ -38,19 +38,19 @@
<!-- 四个主内容 -->
<view class="head-secondBox">
<view class="collect">
<view class="collect" @click="toPage('/pages/user/goods-collect')">
<view class="collect-num">14</view>
<view class="collect-text">收藏</view>
</view>
<view class="feetPrint">
<view class="feetPrint" @click="toPage('/pages/user/goods-log')">
<view class="feetPrint-num">14</view>
<view class="feetPrint-text">足迹</view>
</view>
<view class="feetPrint">
<view class="feetPrint" @click="toPage('/pages/user/wallet/score')">
<view class="feetPrint-num">{{ userInfo.score ? userInfo.score : 0 }}</view>
<view class="feetPrint-text">积分</view>
</view>
<view class="collect">
<view class="collect" @click="toPage('/pages/coupon/list')">
<view class="collect-num">14</view>
<view class="collect-text">优惠券</view>
</view>
@ -59,7 +59,7 @@
<!-- 我的订单 -->
<view class="myOrder">
<view class="myOrder-first">
<view class="myOrder-first" @click="toPage('/pages/order/list')">
<view style="font-weight: 800;font-size: 34rpx;line-height: 28rpx;color: #3d3d3d;">我的订单</view>
<view style="display: flex;align-items: center;justify-content: center;">
<view style="font-size: 26rpx;line-height: 26rpx;font-weight: 400;color: #999999;">全部订单
@ -70,19 +70,19 @@
</view>
</view>
<view class="myOrder-second">
<view class="pendingBox">
<view class="pendingBox" @click="toPage('/pages/order/list')">
<image class="pendImg" src="https://jiangxiaoxian.0rui.cn/pendPay.png"></image>
<view class="fs-28 weight4" style="margin-top: 20rpx;color: #3d3d3d;">待支付</view>
</view>
<view class="pendingBox">
<view class="pendingBox" @click="toPage('/pages/order/list')">
<image class="pendImg" src="https://jiangxiaoxian.0rui.cn/shipment.png"></image>
<view class="fs-28 weight4" style="margin-top: 20rpx;color: #3d3d3d;">待发货</view>
</view>
<view class="pendingBox">
<view class="pendingBox" @click="toPage('/pages/order/list')">
<image class="pendImg" src="https://jiangxiaoxian.0rui.cn/pendingDoods.png"></image>
<view class="fs-28 weight4" style="margin-top: 20rpx;color: #3d3d3d;">待收货</view>
</view>
<view class="pendingBox">
<view class="pendingBox" @click="toPage('/pages/order/list')">
<image class="pendImg" src="https://jiangxiaoxian.0rui.cn/completed.png"></image>
<view class="fs-28 weight4" style="margin-top: 20rpx;color: #3d3d3d;">已完成</view>
</view>
@ -91,8 +91,9 @@
<!-- 发布分享等 -->
<view class="sixBox">
<view class="fabuBox">
<view class="flex align-items">
<!-- 我的发布 -->
<view class="fabuBox" @click="toPage('/pages/user/myRelease/list')">
<view class="flex align-items" >
<image style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"
src="https://jiangxiaoxian.0rui.cn/myRelease.png"></image>
<view style="font-size: 30rpx;font-weight: 800;line-height: 28rpx;color: #333333;">我的发布
@ -102,8 +103,8 @@
src="https://jiangxiaoxian.0rui.cn/rightMore.png" mode=""></image>
</view>
<view class="line-row" style="margin: 30rpx 0;"></view>
<view class="fabuBox">
<!-- 积分商城 -->
<view class="fabuBox" @click="toPage('/pages/app/score-shop')">
<view class="flex align-items">
<image style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"
src="https://jiangxiaoxian.0rui.cn/points.png"></image>
@ -114,7 +115,7 @@
src="https://jiangxiaoxian.0rui.cn/rightMore.png" mode=""></image>
</view>
<view class="line-row" style="margin: 30rpx 0;"></view>
<!-- 分享好友 -->
<view class="fabuBox">
<view class="flex align-items">
<image style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"
@ -126,8 +127,8 @@
src="https://jiangxiaoxian.0rui.cn/rightMore.png" mode=""></image>
</view>
<view class="line-row" style="margin: 30rpx 0;"></view>
<view class="fabuBox">
<!-- 官方客服 -->
<view class="fabuBox" @click="toPage('/pages/chat/index')">
<view class="flex align-items">
<image style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"
src="https://jiangxiaoxian.0rui.cn/service.png"></image>
@ -138,8 +139,8 @@
src="https://jiangxiaoxian.0rui.cn/rightMore.png" mode=""></image>
</view>
<view class="line-row" style="margin: 30rpx 0;"></view>
<view class="fabuBox">
<!-- 意见反馈 -->
<view class="fabuBox" @click="toPage('/pages/public/feedBack')">
<view class="flex align-items">
<image style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"
src="https://jiangxiaoxian.0rui.cn/feedBack.png"></image>
@ -150,7 +151,7 @@
src="https://jiangxiaoxian.0rui.cn/rightMore.png" mode=""></image>
</view>
<view class="line-row" style="margin: 30rpx 0;"></view>
<!-- 设置 -->
<view class="fabuBox" @click="toSetting">
<view class="flex align-items">
<image style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"
@ -327,6 +328,28 @@
})
}
}
//
const toPage = (e) => {
if(isLogin.value == true) {
uni.navigateTo({
url: e
})
}else{
uni.showToast({
title: '请先登录',
icon: 'none',
duration: 2000
})
// setTimeout(function() {
// uni.switchTab({
// url: '/pages/index/user'
// })
// }, 2000);
}
}
</script>
<style lang="scss" scoped>

View File

@ -0,0 +1,178 @@
<template>
<s-layout title="平台学院">
<view class="container">
<!-- 顶部 -->
<view class="top">
<!-- 顶部-地址&搜索 -->
<view class="locTop">
<view class="locTop-right">
<uni-section style="border-radius: 192rpx;padding: 0;" type="line">
<uni-search-bar style="border-radius: 192rpx;" radius="23" placeholder="搜索您需要的信息"
bgColor="#EEEEEE" clearButton="none" cancelButton="none" @confirm="searchRent" @blur="searchRent1"/>
</uni-section>
<!-- <uni-search-bar></uni-search-bar> @confirm="search"-->
</view>
</view>
</view>
<!-- 推荐列表 -->
<view class="recommend-box">
<view class="rrecommList">
<view class="reListItem">
<!-- 左侧图片 -->
<view class="listItem-images">
<image style="width: 77rpx;height: 36rpx;z-index: 100;position: relative;top: 34rpx;left: 0rpx;"
src="https://jiangxiaoxian.0rui.cn/hot.png"></image>
<image class="iamges-mainImg" src="https://jiangxiaoxian.0rui.cn/model.png"></image>
</view>
<!-- 右侧内容 -->
<view class="listItem-contents">
<view class="title2" style="margin-bottom: 20rpx;">食堂餐厅外包]洛阳某本科食堂新装修</view>
<view class="">标签</view>
<view class="cons-third">
<view style="display: flex;">
<image style="width: 24rpx;height: 24rpx;"
src="https://jiangxiaoxian.0rui.cn/locationList.png"></image>
<view class="title3" style="margin-left: 10rpx;">河南省洛阳市</view>
</view>
<view class="title3">2025-07-24</view>
<view style="display: flex;">
<image style="width: 26rpx;height: 20rpx;"
src="https://jiangxiaoxian.0rui.cn/eye.png"></image>
<view class="title3" style="margin-left: 10rpx;">11400</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</s-layout>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.search-result {
padding-top: 10px;
padding-bottom: 20px;
text-align: center;
}
.search-result-text {
text-align: center;
font-size: 14px;
color: #666;
}
.example-body {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
padding: 0px;
}
.uni-mt-10 {
margin-top: 10px;
}
.title2 {
color: #3d3d3d;
font-size: 30rpx;
font-weight: 800;
line-height: 42rpx;
}
.title3 {
font-size: 20rpx;
font-weight: 400;
color: #999999;
line-height: 22rpx;
}
.container {
width: 100%;
height: 100%;
.top {
width: 100%;
height: 80rpx;
background-color: #ffffff;
// background-image: url('https://jiangxiaoxian.0rui.cn/topBack.png');
background-size: 100%;
padding: 30rpx ;
display: grid;
.locTop {
width: 96%;
height: 70rpx;
display: flex;
justify-content: space-between;
// align-items: center;
.locTop-right {
width: 96%;
height: 70rpx;
}
}
}
.recommend-box {
margin-top: 30rpx;
padding: 0rpx 30rpx;
.rrecommList {
// margin: 0 auto;
// margin-top: 30rpx;
// padding: 30rpx;
.reListItem {
background-color: #ffffff;
width: 640rpx;
height: 190rpx;
padding: 30rpx;
display: flex;
justify-content: flex-start;
align-items: center;
border-radius: 18rpx;
.listItem-images {
display: grid;
justify-content: flex-start;
.iamges-mainImg {
width: 190rpx;
height: 190rpx;
position: relative;
right: 0rpx;
bottom: 18rpx;
z-index: 1;
}
}
.listItem-contents {
margin-left: 20rpx;
.cons-third {
margin-top: 20rpx;
display: flex;
justify-content: space-around;
align-items: center;
}
}
}
}
}
}
</style>

View File

@ -0,0 +1,9 @@
<template>
<s-layout title="我的发布"></s-layout>
</template>
<script>
</script>
<style>
</style>

View File

@ -12,6 +12,7 @@ import pay from "./pay"
import third from "./third"
import trade from "./trade"
import user from "./user"
import rent from "./rent"
export default {
activity,
@ -28,5 +29,6 @@ export default {
third,
trade,
user,
rent,
}

34
sheep/api/rent.js Normal file
View File

@ -0,0 +1,34 @@
import request from '@/sheep/request';
export default {
// 招租列表
rentlist: (params) =>
request({
url: 'meal.information/information_list',
method: 'GET',
params,
custom: {
showLoading: false,
},
}),
// 标签列表
tagsList: (params) =>
request({
url: 'meal.information/cate_list',
method: 'GET',
params,
custom: {
showLoading: false,
},
}),
// detail: (id, user_coupon_id) =>
// request({
// url: 'coupon/detail',
// method: 'GET',
// params: {
// id: id,
// user_coupon_id,
// },
// }),
};

View File

@ -0,0 +1,262 @@
<template>
<su-popup :show="show" @close="onCancel" round="20">
<view class="ui-regionCity-picker">
<su-toolbar
:cancelColor="cancelColor"
:confirmColor="confirmColor"
:cancelText="cancelText"
:confirmText="confirmText"
title="选择区域"
@cancel="onCancel"
@confirm="onConfirm('confirm')"
></su-toolbar>
<view class="ui-picker-body">
<picker-view
:value="state.currentIndex"
@change="change"
class="ui-picker-view"
@pickstart="pickstart"
@pickend="pickend"
>
<picker-view-column>
<view class="ui-column-item" v-for="province in provinceList" :key="province.id">
<view :style="getSizeByNameLength(province.name)">{{ province.name }}</view>
</view>
</picker-view-column>
<picker-view-column>
<view class="ui-column-item" v-for="city in cityList" :key="city.id">
<view :style="getSizeByNameLength(city.name)">{{ city.name }}</view>
</view>
</picker-view-column>
<!-- <picker-view-column>
<view class="ui-column-item" v-for="district in districtList" :key="district.id">
<view :style="getSizeByNameLength(district.name)">{{ district.name }}</view>
</view>
</picker-view-column> -->
</picker-view>
</view>
</view>
</su-popup>
</template>
<script setup>
/**
* picker picker弹出选择器
* @property {Object} params 需要显示的参
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配默认false
* @property {Boolean} show-time-tag 时间模式时是否显示后面的年月日中文提示
* @property {String} cancel-color 取消按钮的颜色
* @property {String} confirm-color 确认按钮的颜色
* @property {String} confirm-text 确认按钮的文字
* @property {String} cancel-text 取消按钮的文字
* @property {String} default-region 默认选中的地区
* @property {String} default-code 默认选中的地区
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker默认true
* @property {String Number} z-index 弹出时的z-index值默认1075
* @property {Array} default-selector 数组形式其中每一项表示选择了range对应项中的第几个
* @property {String} range-key 当range参数的元素为对象时指定Object中的哪个key的值作为选择器显示内容
* @event {Function} confirm 点击确定按钮返回当前选择的值
* @event {Function} cancel 点击取消按钮返回当前选择的值
*/
import { computed, reactive } from 'vue';
const props = defineProps({
show: {
type: Boolean,
default: false,
},
// ""
cancelColor: {
type: String,
default: '#6666',
},
// ""
confirmColor: {
type: String,
default: 'var(--ui-BG-Main)',
},
//
cancelText: {
type: String,
default: '取消',
},
//
confirmText: {
type: String,
default: '确认',
},
});
// const areaData = uni.getStorageSync('areaData');
const proFirst = [{
children: [],
id: '',
level: "province",
name: "全国",
pid: 0
}]
const areaData = proFirst.concat(uni.getStorageSync('areaData'))
const getSizeByNameLength = (name) => {
let length = name.length;
if (length <= 7) return '';
if (length < 9) {
return 'font-size:28rpx';
} else {
return 'font-size: 24rpx';
}
};
const state = reactive({
currentIndex: [0, 0, 0],
moving: false, //
});
const emits = defineEmits(['confirm', 'cancel', 'change']);
const provinceList = areaData;
const cityList = computed(() => {
if(areaData[state.currentIndex[0]].name == '全部'){
return []
}else {
return areaData[state.currentIndex[0]].children;
}
});
const districtList = computed(() => {
return cityList.value[state.currentIndex[1]]?.children;
});
//
const pickstart = () => {
// #ifdef MP-WEIXIN
state.moving = true;
// #endif
};
//
const pickend = () => {
// #ifdef MP-WEIXIN
state.moving = false;
// #endif
};
const init = () => {};
const onCancel = () => {
emits('cancel');
};
// picker
const change = (e) => {
if (
state.currentIndex[0] === e.detail.value[0] &&
state.currentIndex[1] === e.detail.value[1]
) {
//
state.currentIndex[2] = e.detail.value[2];
return;
} else {
//
if (state.currentIndex[0] !== e.detail.value[0]) {
e.detail.value[1] = 0;
}
e.detail.value[2] = 0;
state.currentIndex = e.detail.value;
}
emits('change', state.currentIndex);
};
//
const onConfirm = (event = null) => {
// #ifdef MP-WEIXIN
if (state.moving) return;
// #endif
let index = state.currentIndex;
let province = provinceList[index[0]];
let city = cityList.value[index[1]];
// let district = districtList.value[index[2]];
let result = {
province_name: province.name,
province_id: province.id,
city_name: city.name,
city_id: city.id,
// district_name: district.name,
// district_id: district.id,
};
console.log('su-regionCity-picker result',result);
if (event) emits(event, result);
};
</script>
<style lang="scss" scoped>
.ui-regionCity-picker {
position: relative;
z-index: 999;
}
.ui-picker-view {
height: 100%;
box-sizing: border-box;
}
.ui-picker-header {
width: 100%;
height: 90rpx;
padding: 0 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
font-size: 30rpx;
background: #fff;
position: relative;
}
.ui-picker-header::after {
content: '';
position: absolute;
border-bottom: 1rpx solid #eaeef1;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
bottom: 0;
right: 0;
left: 0;
}
.ui-picker__title {
color: #333;
}
.ui-picker-body {
width: 100%;
height: 500rpx;
overflow: hidden;
background-color: #fff;
}
.ui-column-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: #333;
padding: 0 8rpx;
}
.ui-btn-picker {
padding: 16rpx;
box-sizing: border-box;
text-align: center;
text-decoration: none;
}
.ui-opacity {
opacity: 0.5;
}
.ui-btn-picker--primary {
color: blue;
}
.ui-btn-picker--tips {
color: red;
}
</style>