第一次上传
This commit is contained in:
@@ -0,0 +1,693 @@
|
||||
<template>
|
||||
<view class="search-page">
|
||||
<!-- 顶部导航栏 - 橙色背景 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-content">
|
||||
<view class="nav-back" @click="Service.GoPageBack()">
|
||||
<image class="back-icon" src="/static/icons/back.svg" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="search-input-wrapper" >
|
||||
<image class="search-icon" src="https://img.icons8.com/ios-glyphs/30/999999/search--v1.png"
|
||||
mode="aspectFit" />
|
||||
<input class="search-input" v-model="searchKeyword" placeholder="搜索商家或商品"
|
||||
placeholder-class="search-placeholder" @input="onSearchInput" @confirm="onSearch" />
|
||||
<!-- <image v-if="searchKeyword" class="clear-icon"
|
||||
src="https://img.icons8.com/ios-glyphs/30/999999/close-window--v1.png" mode="aspectFit"
|
||||
@click="clearSearch" /> -->
|
||||
</view>
|
||||
<!-- <text class="search-btn" @click="onSearch">搜索</text> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索内容区域 -->
|
||||
<view class="content-wrapper">
|
||||
<!-- 搜索历史 - 无搜索内容时显示 -->
|
||||
<view v-if="hasSearched" class="search-history-section">
|
||||
<!-- 搜索历史 -->
|
||||
<view v-if="searchHistory.length > 0" class="history-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">搜索历史</text>
|
||||
<image class="delete-icon" src="https://img.icons8.com/ios-glyphs/30/999999/delete--v1.png"
|
||||
mode="aspectFit" @click="clearHistory" />
|
||||
</view>
|
||||
<view class="history-tags">
|
||||
<view v-for="(item, index) in searchHistory" :key="index" class="history-tag"
|
||||
@click="searchFromHistory(item)">
|
||||
<text class="history-tag-text">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 热门搜索 -->
|
||||
<view class="hot-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">热门搜索</text>
|
||||
</view>
|
||||
<view class="hot-tags">
|
||||
<view v-for="(item, index) in hotSearches" :key="index" class="hot-tag"
|
||||
@click="searchFromHistory(item)">
|
||||
<text class="hot-tag-text" :class="{ 'top-tag': index < 3 }">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索结果 - 有搜索内容时显示 -->
|
||||
<view class="search-results-section">
|
||||
<!-- 搜索建议 - 输入时显示 -->
|
||||
<!-- <view class="suggestions-section">
|
||||
<view v-for="(item, index) in searchSuggestions" :key="index" class="suggestion-item"
|
||||
@click="searchFromHistory(item)">
|
||||
<image class="suggestion-icon" src="https://img.icons8.com/ios-glyphs/30/999999/search--v1.png"
|
||||
mode="aspectFit" />
|
||||
<text class="suggestion-text">{{ item }}</text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 搜索结果列表 -->
|
||||
<view class="results-list">
|
||||
<!-- 商家列表 -->
|
||||
<view class="shop-list">
|
||||
<view v-for="shop in goodsList" :key="shop.merchId" class="shop-card" @click="Service.GoPage('/pages/community/merchantDetail?merchId='+shop.merchId)">
|
||||
<!-- 左侧图片 -->
|
||||
<image class="shop-image" :src="Service.GetMateUrlByImg(shop.logo)" mode="aspectFill" />
|
||||
|
||||
<!-- 右侧信息 -->
|
||||
<view class="shop-info">
|
||||
<!-- 店名 -->
|
||||
<view class="shop-header">
|
||||
<text class="shop-name">{{ shop.name }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 评分和销量 -->
|
||||
<view class="shop-info-left">
|
||||
<view class="shop-rating">
|
||||
<text class="rating-score">{{ Number(shop.score).toFixed(1)}}</text>
|
||||
<text class="rating-unit">分</text>
|
||||
</view>
|
||||
<text class="shop-sales">月售{{ shop.sale }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 距离、用时、人均价格 - 同一行 -->
|
||||
<view class="shop-info-row">
|
||||
<!-- 距离和用时 - 左侧 -->
|
||||
<view class="shop-info-left">
|
||||
<view class="distance-wrapper">
|
||||
<up-icon name="map" color="#000" size="12"></up-icon>
|
||||
<text class="distance-text">{{ formatDistance(shop.distance ) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 人均价格 - 右侧 -->
|
||||
<view class="shop-avg-price-inline">
|
||||
<text class="avg-price-small">¥</text>
|
||||
<text class="avg-price-value-small">{{ shop.price }}</text>
|
||||
<text class="avg-price-text-small">人均</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部标签 -->
|
||||
<view class="shop-bottom-tags">
|
||||
<text v-for="(tag, index) in shop.tips" :key="index" class="shop-tag" style="font-size: 24rpx; margin-left: 4rpx;"
|
||||
:class="getTagClass(tag)">
|
||||
{{ tag }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 右上角标签 -->
|
||||
<view class="shop-badges" style="top: 24rpx;" >
|
||||
<text v-if="shop.code=='Discounts'" class="badge-partner" style="font-size: 24rpx;">联盟商家</text>
|
||||
<text v-else class="badge-coop" style="font-size: 24rpx;" >合作商家</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-if="goodsList.length== 0" class="no-results" style="text-align: center;" >
|
||||
<text class="no-results-text">未找到相关结果</text>
|
||||
<text class="no-results-hint">换个关键词试试吧</text>
|
||||
</view>
|
||||
<up-loadmore v-else :status="status" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
import {
|
||||
onLoad, onReachBottom
|
||||
} from '@dcloudio/uni-app'
|
||||
import { Service } from "@/Service/Service"
|
||||
import { vpMerchService } from '@/Service/vp/vpMerchService'
|
||||
|
||||
|
||||
// 搜索关键词
|
||||
const searchKeyword = ref('')
|
||||
|
||||
// 是否已搜索
|
||||
const hasSearched = ref(false)
|
||||
|
||||
// 是否显示搜索结果
|
||||
const showResults = ref(false)
|
||||
|
||||
// 搜索结果
|
||||
const searchResults = ref([])
|
||||
|
||||
// 搜索历史
|
||||
const searchHistory = ref(['汉堡', '奶茶', '炸鸡', '披萨'])
|
||||
|
||||
// 热门搜索
|
||||
const hotSearches = ref(['汉堡王', '肯德基', '麦当劳', '星巴克', '必胜客', '喜茶', '奈雪的茶', '瑞幸咖啡'])
|
||||
|
||||
// 模拟商家数据
|
||||
const mockShops = [{
|
||||
id: 1,
|
||||
name: '河南省许昌市汉堡王(宏安店)',
|
||||
cover: 'https://img.icons8.com/color/96/000000/burger.png',
|
||||
rating: '4.8',
|
||||
sales: '2000+',
|
||||
distance: '500m',
|
||||
time: '25分钟',
|
||||
avgPrice: '25.0',
|
||||
coupons: ['12%积分', '可用券'],
|
||||
badgeType: 'partner' // 只使用一个类型标签
|
||||
}
|
||||
]
|
||||
|
||||
let longitude=ref(0)
|
||||
let latitude=ref(0)
|
||||
|
||||
let status=ref('nomore')
|
||||
let goodsList=ref<Array<any>>([])
|
||||
let page=ref(1)
|
||||
|
||||
// 页面加载
|
||||
onLoad((data : any) => {
|
||||
console.log(data);
|
||||
searchKeyword.value = data.search
|
||||
getLocation()
|
||||
})
|
||||
|
||||
onReachBottom(()=>{
|
||||
getList()
|
||||
})
|
||||
|
||||
// 搜索建议
|
||||
const searchSuggestions = ref([])
|
||||
|
||||
const getLocation = () => {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: function (res) {
|
||||
longitude.value = res.longitude
|
||||
latitude.value = res.latitude
|
||||
getdata()
|
||||
},
|
||||
fail: function (e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const getdata = () => {
|
||||
goodsList.value=[]
|
||||
status.value = 'loadmore'
|
||||
page.value = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () => {
|
||||
|
||||
if (status.value !== 'loadmore') {
|
||||
return
|
||||
}
|
||||
status.value = 'loading'
|
||||
|
||||
|
||||
vpMerchService.GetMerchList('', searchKeyword.value, longitude.value, latitude.value,0,0, page.value).then(res => {
|
||||
goodsList.value=[...goodsList.value,...res.data.merchList]
|
||||
status.value = res.data.merchList.length == 10 ? 'loadmore' : 'nomore'
|
||||
page.value++
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 输入搜索关键词
|
||||
const onSearchInput = () => {
|
||||
if (searchKeyword.value.trim()) {
|
||||
// 模拟搜索建议
|
||||
searchSuggestions.value = hotSearches.value.filter(item =>
|
||||
item.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
||||
).slice(0, 5)
|
||||
} else {
|
||||
searchSuggestions.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 执行搜索
|
||||
const onSearch = () => {
|
||||
const keyword = searchKeyword.value.trim()
|
||||
|
||||
if (!keyword) {
|
||||
uni.showToast({
|
||||
title: '请输入搜索关键词',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
getdata()
|
||||
|
||||
// // 保存到搜索历史
|
||||
// if (!searchHistory.value.includes(keyword)) {
|
||||
// searchHistory.value.unshift(keyword)
|
||||
// if (searchHistory.value.length > 10) {
|
||||
// searchHistory.value = searchHistory.value.slice(0, 10)
|
||||
// }
|
||||
// }
|
||||
|
||||
// // 执行搜索 - 使用模拟数据
|
||||
// // hasSearched.value = true
|
||||
// showResults.value = true
|
||||
|
||||
// // 过滤模拟数据
|
||||
// searchResults.value = mockShops.filter(shop =>
|
||||
// shop.name.toLowerCase().includes(keyword.toLowerCase())
|
||||
// )
|
||||
|
||||
// // 如果没有匹配结果，显示所有数据（方便演示）
|
||||
// if (searchResults.value.length === 0) {
|
||||
// searchResults.value = mockShops
|
||||
// }
|
||||
}
|
||||
|
||||
// 从历史/热门搜索
|
||||
const searchFromHistory = (keyword) => {
|
||||
searchKeyword.value = keyword
|
||||
onSearch()
|
||||
}
|
||||
|
||||
// 清除搜索
|
||||
const clearSearch = () => {
|
||||
searchKeyword.value = ''
|
||||
searchSuggestions.value = []
|
||||
showResults.value = false
|
||||
}
|
||||
|
||||
// 清除搜索历史
|
||||
const clearHistory = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定清空搜索历史吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
searchHistory.value = []
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取标签样式类
|
||||
const getTagClass = (tagText:any) => {
|
||||
const tagMap = {
|
||||
'12%积分': 'tag-points',
|
||||
'15%积分': 'tag-points',
|
||||
'可用积分': 'tag-points-available',
|
||||
'可用券': 'tag-coupon'
|
||||
}
|
||||
return tagMap[tagText] || 'tag-points'
|
||||
}
|
||||
|
||||
// 格式化距离
|
||||
const formatDistance = (distance : any) => {
|
||||
if (distance < 1) {
|
||||
return `${Number(distance*1000).toFixed(1)}m`
|
||||
}
|
||||
return `${(distance).toFixed(1)}km`
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-page {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.nav-bar {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: calc(var(--status-bar-height) + 146rpx);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 90rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
width: 60%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #222222;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.search-placeholder {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
font-size: 15px;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
/* 搜索内容区域 */
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: #FAFAFA;
|
||||
min-height: calc(100vh - var(--status-bar-height) - 60px);
|
||||
}
|
||||
|
||||
/* 搜索历史和热门搜索 */
|
||||
.search-history-section {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.history-section,
|
||||
.hot-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.history-tags,
|
||||
.hot-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.history-tag,
|
||||
.hot-tag {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E0E0E0;
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.history-tag-text,
|
||||
.hot-tag-text {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hot-tag .top-tag {
|
||||
color: #FF6B00;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 搜索建议 */
|
||||
.suggestions-section {
|
||||
background: #FFFFFF;
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #F0F0F0;
|
||||
}
|
||||
|
||||
.suggestion-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.suggestion-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.suggestion-text {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* 搜索结果 */
|
||||
.search-results-section {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.results-list {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 商家列表 */
|
||||
.shop-list {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.shop-card {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E0E0E0;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 商家图片 */
|
||||
.shop-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
/* 商家信息 */
|
||||
.shop-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 店名 */
|
||||
.shop-header {
|
||||
margin-bottom: 6px;
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 左侧信息：评分、类型、销量 */
|
||||
.shop-info-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.shop-rating {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.rating-score {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
.rating-unit {
|
||||
font-size: 10px;
|
||||
color: #FF9800;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.shop-info-left .shop-type {
|
||||
font-size: 12px;
|
||||
color: #4CAF50;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.shop-info-left .shop-sales {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* 距离、用时、人均价格 - 同一行 */
|
||||
.shop-info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.distance-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.location-icon {
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.distance-text {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* 人均价格 - 小号内联样式 */
|
||||
.shop-avg-price-inline {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.avg-price-small {
|
||||
font-size: 11px;
|
||||
color: #FF6B00;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.avg-price-value-small {
|
||||
font-size: 15px;
|
||||
color: #FF6B00;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.avg-price-text-small {
|
||||
font-size: 11px;
|
||||
color: #FF6B00;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* 底部标签 */
|
||||
.shop-bottom-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* 无搜索结果 */
|
||||
.no-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 20px;
|
||||
}
|
||||
|
||||
.no-results-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.no-results-text {
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.no-results-hint {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
@@ -0,0 +1,372 @@
|
||||
{
|
||||
"easycom": {
|
||||
// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
|
||||
"custom": {
|
||||
"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
|
||||
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
|
||||
"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
|
||||
}
|
||||
},
|
||||
|
||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
|
||||
{
|
||||
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页",
|
||||
"navigationBarBackgroundColor": "#36394D",
|
||||
"navigationStyle": "custom",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/community",
|
||||
"style": {
|
||||
"navigationBarTitleText": "社区",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/user",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/index/shop",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "积分商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/index/order",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "我的订单"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "v派商家",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
},
|
||||
"subPackages": [{
|
||||
"root": "pages/community",
|
||||
"pages": [{
|
||||
"path": "noticeList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "社区公告"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "merchantCom",
|
||||
"style": {
|
||||
"navigationBarTitleText": "社区商家"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "merchantDetail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "美食小店"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/goods",
|
||||
"pages": [
|
||||
{
|
||||
"path": "integralGoods",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分商品"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "merchant",
|
||||
"style": {
|
||||
"navigationBarTitleText": "热门商家"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "goodsDetail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "商品详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "goodsContro",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "商品管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "addGoods",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "添加商品"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "Pay",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "付款"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goodsPay",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分订单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "search",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "搜索",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "goodsClass",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "分类",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "orderDetail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "订单详情",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/article",
|
||||
"pages": [{
|
||||
"path": "articleCom",
|
||||
"style": {
|
||||
"navigationBarTitleText": "社区公告"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "newsList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "新闻公告"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "news",
|
||||
"style": {
|
||||
"navigationBarTitleText": "新闻详情"
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
}, {
|
||||
"root": "pages/userFunc",
|
||||
"pages": [{
|
||||
"path" : "setData",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "编辑资料"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "integration",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "积分明细",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "trade",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "交易记录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "editStore",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "编辑店铺"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "set",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "设置",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "bind",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "绑定手机号"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "password",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "修改支付密码"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "storeInter",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "余额明细"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "withdrow",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "提现"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "vip",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "会员码",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "promoteCode",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "推广码"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "addressList",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "收货地址"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "addAddress",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "添加地址"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "alliance-card",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的联盟卡",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "member-benefits",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员权益",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "promotion",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的推广",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "invite",
|
||||
"style": {
|
||||
"navigationBarTitleText": "邀请好友",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "feedback",
|
||||
"style": {
|
||||
"navigationBarTitleText": "意见反馈",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "about-us",
|
||||
"style": {
|
||||
"navigationBarTitleText": "关于我们",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "coupon",
|
||||
"style": {
|
||||
"navigationBarTitleText": "优惠券",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "favorites",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的收藏",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
"tabBar": {
|
||||
"color": "#8a8a8a",
|
||||
"selectedColor": "#EC754B",
|
||||
"backgroundColor": "#ffffff",
|
||||
"list": [{
|
||||
"text": "首页",
|
||||
"pagePath": "pages/index/index",
|
||||
"iconPath": "/static/tabBar/home.png",
|
||||
"selectedIconPath": "/static/tabBar/homed.png"
|
||||
},
|
||||
// {
|
||||
// "text": "社区",
|
||||
// "pagePath": "pages/index/community",
|
||||
// "iconPath": "/static/tabBar/community.png",
|
||||
// "selectedIconPath": "/static/tabBar/communityed.png"
|
||||
// }
|
||||
// ,
|
||||
// {
|
||||
// "text": "积分商城",
|
||||
// "pagePath": "pages/index/shop",
|
||||
// "iconPath": "/static/tabBar/shop.png",
|
||||
// "selectedIconPath": "/static/tabBar/shoped.png"
|
||||
// },
|
||||
{
|
||||
"text": "我的订单",
|
||||
"pagePath": "pages/index/order",
|
||||
"iconPath": "/static/tabBar/shop.png",
|
||||
"selectedIconPath": "/static/tabBar/shoped.png"
|
||||
},
|
||||
{
|
||||
"text": "个人中心",
|
||||
"pagePath": "pages/index/user",
|
||||
"iconPath": "/static/tabBar/user.png",
|
||||
"selectedIconPath": "/static/tabBar/usered.png"
|
||||
}]
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
## 1.0.7（2023-09-15）
|
||||
改为uni_modules规范
|
||||
### cityPicker 省市区选择器（兼容vue3）
|
||||
|
||||
**使用方法：**
|
||||
|
||||
```
|
||||
<template>
|
||||
<view>
|
||||
<button @tap="open">打开</button>
|
||||
<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible"/>
|
||||
<view>{{str}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
maskCloseAble: true,
|
||||
str: '',
|
||||
defaultValue: '420103',
|
||||
// defaultValue: ['河北省','唐山市','丰南区'],
|
||||
column: 3
|
||||
}
|
||||
},
|
||||
components: {
|
||||
cityPicker
|
||||
},
|
||||
methods: {
|
||||
open () {
|
||||
this.visible = true
|
||||
},
|
||||
confirm (val) {
|
||||
console.log(val)
|
||||
this.str = JSON.stringify(val)
|
||||
this.visible = false
|
||||
},
|
||||
cancel () {
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
if (res.from === 'button') { // 来自页面内分享按钮
|
||||
console.log(res.target)
|
||||
}
|
||||
return {
|
||||
title: 'data-cityPicker省市区地址选择器！',
|
||||
path: '/pages/cityPicker/cityPicker'
|
||||
}
|
||||
},
|
||||
onShareTimeline(res) {
|
||||
if (res.from === 'button') { // 来自页面内分享按钮
|
||||
console.log(res.target)
|
||||
}
|
||||
return {
|
||||
title: 'data-cityPicker省市区地址选择器！'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
### 注：近期收到使用用户反馈，存在以下一个问题（如有好的建议，期待私信，谢谢）
|
||||
|
||||
1、之前只支持默认值传入地区编码，已更新可以支持传入中文省市区数组
|
||||
|
||||
defaultValue可以传入defaultValue:['河北省','唐山市','丰南区']数组类型以及defaultValue: '420103'地区编码字符串类型
|
||||
|
||||
可以使用const reg =/([\u4e00-\u9fa5]+省|自治区|[\u4e00-\u9fa5]+市|[\u4e00-\u9fa5]+区)/g;将自己的省市区数据进行处理为数组再传入
|
||||
|
||||
2、有些用户反馈vue3下watch监听有问题
|
||||
|
||||
我自己创建一个vue项目，导入插件后，按照示例原封不动进行测试，没有发现问题; 发现有问题的朋友可以提供一下可以复现的demo给我，我这边看看具体什么情况
|
||||
|
||||
3、有些用户返回无法关闭弹框
|
||||
|
||||
不要把插件放到scroll-view里面，请务必放到最外层进行使用
|
||||
|
||||
#### 事件说明
|
||||
|
||||
| 事件名 | 返回值 | 描述 |
|
||||
| :---------: | :----: | :------------: |
|
||||
| @confirm | 对象(code,完整地区名称) | 点击确定的回调 |
|
||||
| @cancel | 无 | 点击取消的回调 |
|
||||
|
||||
#### Prop
|
||||
|
||||
| 参数名称 | 描述 |
|
||||
| -------- | ------------------------------ |
|
||||
| visible | 控制选择器显示和隐藏 |
|
||||
| column | 可选值2和3，2是省市两列选择；3是省市区三列选择 |
|
||||
| maskCloseAble | 点击模态框是否关闭弹框 |
|
||||
| defaultValue | 初始地区编码（例:420102或者['河北省','唐山市','丰南区']） |
|
||||
|
||||
### 数据来源：[点击查看省市区数据来源](https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/pca-code.json)
|
||||
### 可接定制化组件开发
|
||||
### 右侧有本人代表作小程序二维码，可以扫码体验
|
||||
### 如使用过程中有问题或有一些好的建议，欢迎加QQ群互相学习交流：120594820
|
||||
Reference in New Issue
Block a user