xiaohei
/
xq-csg-weapp_uni-ts
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

fix:添加位置、修改智慧社区

master
xiaohei 1 year ago
parent
5925040399
commit
ae0e2e117e
4 changed files with 516 additions and 397 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +24
    -4
      src/packages/people/pages/second/second.vue
  2. +460
    -392
      src/pages/life/life.vue
  3. +21
    -1
      src/pages/people/people.vue
  4. +11
    -0
      vite.config.ts

+ 24
- 4
src/packages/people/pages/second/second.vue View File

@@ -149,7 +149,9 @@
tabsIndex: 0,
pageNo: 1,
pageSize: 12,
total: 0
total: 0,
latitude:0,
longitude:0
};
},
/**
@@ -159,6 +161,24 @@
this.option = option
this.recursionApi();
this.callFcuntion();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
console.log(position.coords.latitude);
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
uni.setStorageSync(
"userLocation",
position.coords.longitude + "," + position.coords.latitude
);
},
function (error) {
console.log(error.message);
}
);
} else {
console.log("浏览器不支持地理定位功能");
}
},
onReachBottom() {
if (this.newsPageList.length === this.total) {
@@ -213,7 +233,7 @@
},

async hospitalPageApi() {
// const locationInfo = uni.getStorageSync('userLocation');
const locationInfo = uni.getStorageSync('userLocation');
// if (!Object.keys(locationInfo).length) {
// return uni.showToast({
// title: '未允许定位，当前页面功能无法完全体验',
@@ -225,8 +245,8 @@
pageNo: 1,
pageSize: 10,
nearFlag: this.nearFlag,
// posX: locationInfo.split[0],
// posY: locationInfo.split[1]
posX: locationInfo.split[0],
posY: locationInfo.split[1]
};
if (this.searchValue) {
param.name = this.searchValue;


+ 460
- 392
src/pages/life/life.vue View File

@@ -2,25 +2,49 @@
<view style="height: 100%">
<!-- <custom-nav-bar left-text="介休生活" /> -->

<swiper class="life-custom-swiper" :indicator-dots="indicatorDots" :indicator-color="indicatorColor"
:indicator-active-color="indicatorActiveColor">
<swiper
class="life-custom-swiper"
:indicator-dots="indicatorDots"
:indicator-color="indicatorColor"
:indicator-active-color="indicatorActiveColor"
>
<block v-for="(item, index) in imageList" :key="index">
<swiper-item>
<navigator v-if="item.clickUrl" class="line-navigator" :url="updateQuery(item.clickUrl,itemName)" hover-class="none"></navigator>
<navigator
v-if="item.clickUrl"
class="line-navigator"
:url="updateQuery(item.clickUrl, itemName)"
hover-class="none"
></navigator>
<image class="custom-swiper-img" :src="item.pic"></image>
</swiper-item>
</block>
</swiper>

<view class="life-section">
<view class="second-block" :style="item.cssStyle" v-for="(item, index) in recursionList" :key="index">
<view
class="second-block"
:style="item.cssStyle"
v-for="(item, index) in recursionList"
:key="index"
>
<view class="title flex">
<text class="title-name">{{ item.name }}</text>
</view>

<view class="menu flex flex-v-center flex-between" v-if="index === 0">
<view class="menu-item" :style="itemName.cssStyle" v-for="(itemName, idx) in item.children" :key="idx">
<navigator v-if="itemName.clickUrl" class="line-navigator" :url="updateQuery(itemName.clickUrl,itemName)" hover-class="none">
<view
class="menu-item"
:style="itemName.cssStyle"
v-for="(itemName, idx) in item.children"
:key="idx"
>
<navigator
v-if="itemName.clickUrl"
class="line-navigator"
:url="updateQuery(itemName.clickUrl, itemName)"
hover-class="none"
>
</navigator>

<image class="menu-item-ic-img" :src="itemName.icon"></image>
@@ -30,16 +54,27 @@
</view>

<view class="second-model flex flex-v-center flex-between" v-else>
<view :class="'second-line flex flex-col ' + (idx === 0 ? 'line1' : '')" :style="itemName.cssStyle"
v-for="(itemName, idx) in item.children" :key="idx">
<navigator v-if="itemName.clickUrl" class="line-navigator" :url="updateQuery(itemName.clickUrl,itemName)" hover-class="none">
<view
:class="'second-line flex flex-col ' + (idx === 0 ? 'line1' : '')"
:style="itemName.cssStyle"
v-for="(itemName, idx) in item.children"
:key="idx"
>
<navigator
v-if="itemName.clickUrl"
class="line-navigator"
:url="updateQuery(itemName.clickUrl, itemName)"
hover-class="none"
>
</navigator>
<!-- <image ></image> -->
<image class="line-bg" :src="itemName.icon"></image>

<view class="line-title">{{ itemName.name }}</view>

<view v-if="itemName.remark" class="line-msg">{{ itemName.remark }}</view>
<view v-if="itemName.remark" class="line-msg">{{
itemName.remark
}}</view>
</view>
</view>
</view>
@@ -50,12 +85,32 @@
<text class="title-name">精彩介休</text>
</view>
<view class="life-tabs">
<van-tabs v-model:active="tabs.active" @click-tab="onChange($event, { tagId: 'lifeTabs' })" line-width="40px"
:ellipsis="false" id="lifeTabs">
<van-tab :title="key.label" v-for="(key, index) in tabs.typeList" :key="index" :name="key.value">
<view v-if="dataList.length !== 0" class="life-conent" @tap="headleDetails" :data-item="item"
v-for="(item, index1) in dataList" :key="index1">
<image lazy-load class="life-conent-image" :src="item.merchantPhoto"></image>
<van-tabs
v-model:active="tabs.active"
@click-tab="onChange($event, { tagId: 'lifeTabs' })"
line-width="40px"
:ellipsis="false"
id="lifeTabs"
>
<van-tab
:title="key.label"
v-for="(key, index) in tabs.typeList"
:key="index"
:name="key.value"
>
<view
v-if="dataList.length !== 0"
class="life-conent"
@tap="headleDetails"
:data-item="item"
v-for="(item, index1) in dataList"
:key="index1"
>
<image
lazy-load
class="life-conent-image"
:src="item.merchantPhoto"
></image>

<view class="life-conent-article flex flex-col flex-between">
<view class="life-conent-title">{{ item.merchantName }}</view>
@@ -82,444 +137,457 @@
</van-tabs> -->
</view>
</view>
<view style="height:150rpx"></view>
<view style="height: 150rpx"></view>
</view>
</template>
<script>
import utils from '@/utils/util.map.js'
import * as publicApi from '@/api/publicApi.js'; // 公共 API
import * as lifeApi from '@/api/lifeApi'; // 生活
export default {
data() {
return {
indicatorDots: true,
indicatorColor: 'rgba(255,255,255,0.4)',
indicatorActiveColor: '#FFFFFF',
imageList: [],
recursionList: [],

tabs: {
active: 0,
merchantType: 1,
typeList: []
import utils from "@/utils/util.map.js";
import * as publicApi from "@/api/publicApi.js"; // 公共 API
import * as lifeApi from "@/api/lifeApi"; // 生活
export default {
data() {
return {
indicatorDots: true,
indicatorColor: "rgba(255,255,255,0.4)",
indicatorActiveColor: "#FFFFFF",
imageList: [],
recursionList: [],

tabs: {
active: 0,
merchantType: 1,
typeList: [],
},
latitude:0,
longitude:0,
dataList: [],
pageNo: 1,
pageSize: 10,
total: 0,
};
},
components: {},
onLoad() {
this.getBannerListApi();
this.recursionApi();
this.merchantPageApi();
this.getmerchantTypeApi();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
console.log(position.coords.latitude);
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
uni.setStorageSync(
"userLocation",
position.coords.longitude + "," + position.coords.latitude
);
},

dataList: [],
pageNo: 1,
pageSize: 10,
total: 0
};
function (error) {
console.log(error.message);
}
);
} else {
console.log("浏览器不支持地理定位功能");
}
},
onReachBottom() {
if (this.dataList.length === this.total) {
return;
}
this.merchantPageApi(false);
},
methods: {
updateQuery(url, name) {
console.log(utils.updateQuery(url, name));
return utils.updateQuery(url, name);
},
components: {},
onLoad() {
this.getBannerListApi();
this.recursionApi();
this.merchantPageApi();
this.getmerchantTypeApi();
/**
* 接口
*/
async recursionApi() {
const res = await publicApi.recursionApi({
bannerType: 2,
});
if (res.data) {
this.recursionList = res.data;
}
},
onReachBottom() {
if (this.dataList.length === this.total) {
return;

async getBannerListApi() {
const res = await publicApi.getBannerApi({
type: 2,
});
if (res.data) {
this.imageList = res.data.list;
}
this.merchantPageApi(false);
},
methods: {
updateQuery(url, name) {
console.log(utils.updateQuery(url, name))
return utils.updateQuery(url, name);
},
/**
* 接口
*/
async recursionApi() {
const res = await publicApi.recursionApi({
bannerType: 2
});
if (res.data) {
this.recursionList = res.data
}
},

async getBannerListApi() {
const res = await publicApi.getBannerApi({
type: 2
});
if (res.data) {
this.imageList = res.data.list;
async merchantPageApi(reset = true) {
const params = this.generalQueryData(reset);
let _goodsList = [];
// params.nearFlag = 1;
// params.pageSize = 10
const res = await lifeApi.merchantPageApi(params);
if (res.data) {
const { list = [], total = 0 } = res.data;
if (reset) {
_goodsList = list;
} else {
_goodsList = this.dataList.concat(list);
}
},

async merchantPageApi(reset = true) {
const params = this.generalQueryData(reset);
let _goodsList = []
// params.nearFlag = 1;
// params.pageSize = 10
const res = await lifeApi.merchantPageApi(params);
if (res.data) {
const {
list = [], total = 0
} = res.data;
if (reset) {
_goodsList = list;
} else {
_goodsList = this.dataList.concat(list);
}
this.pageNo = params.pageNo || 1;
this.total = total;
_goodsList.forEach((element) => {
if (element.merchantIntroduce) {
element.merchantIntroduce = element.merchantIntroduce.replace(/(\<img|\<p|src=null)/gi, function($0,
$1) {
this.pageNo = params.pageNo || 1;
this.total = total;
_goodsList.forEach((element) => {
if (element.merchantIntroduce) {
element.merchantIntroduce = element.merchantIntroduce.replace(
/(\<img|\<p|src=null)/gi,
function ($0, $1) {
return {
'<img': '<img style="width:100%;height:auto;display:none;" ',
'<p': '<p',
'<article': '<div',
'</article': '</div',
'<header': '<div',
'</header': '</div'
} [$1];
});
}
});
_goodsList.sort(function(a, b) {
return b.merchantGrade - a.merchantGrade;
});
this.dataList = _goodsList
}
},

// 字典类型
async getmerchantTypeApi() {
const {
tabs
} = this;
const res = await publicApi.getDictDataApi({
dictType: 'merchant_type',
pageSize: 50
});
if (res.data) {
this.tabs = {
...tabs,
typeList: res.data.list.reverse()
"<img": '<img style="width:100%;height:auto;display:none;" ',
"<p": "<p",
"<article": "<div",
"</article": "</div",
"<header": "<div",
"</header": "</div",
}[$1];
}
);
}
}
// 触发tabs重绘，解决tabs底部下划线位置错误
// this.zpSelectComponent('#lifeTabs').resize();
},

// 分页参数处理事件
generalQueryData(reset = false) {
const {
pageNo,
pageSize,
} = this;
// const {
// latitude,
// longitude
// } = app.globalData.config.locationInfo;
const params = {
pageNo: 1,
pageSize: 10,
// latitude,
// longitude
};
if (this.tabs.merchantType) {
params.merchantType = this.tabs.merchantType;
}
if (reset) {
return params;
}
return {
...params,
pageNo: pageNo + 1,
pageSize
};
},
});
_goodsList.sort(function (a, b) {
return b.merchantGrade - a.merchantGrade;
});
this.dataList = _goodsList;
}
},

// tabs切换
onChange(event, _dataset) {
console.log(event)
console.log(_dataset)
/* ---处理dataset begin--- */
this.generalQueryData(event, _dataset);
/* ---处理dataset end--- */
const {
tabs
} = this;
// 字典类型
async getmerchantTypeApi() {
const { tabs } = this;
const res = await publicApi.getDictDataApi({
dictType: "merchant_type",
pageSize: 50,
});
if (res.data) {
this.tabs = {
...tabs,
active: event.name,
merchantType: event.name
}
// 重新调用tabs切换
this.merchantPageApi();
},
typeList: res.data.list.reverse(),
};
}
// 触发tabs重绘，解决tabs底部下划线位置错误
// this.zpSelectComponent('#lifeTabs').resize();
},

// 进入详情页
headleDetails(event) {
const {
id
} = event.currentTarget.dataset.item;
uni.navigateTo({
url: `/packages/public/pages/details/details?name=店铺详情&referId=${id}`
});
},
// 分页参数处理事件
generalQueryData(reset = false) {
const { pageNo, pageSize,longitude,latitude } = this;
// const {
// latitude,
// longitude
// } = app.globalData.config.locationInfo;
const params = {
pageNo: 1,
pageSize: 10,
latitude,
longitude
};
if (this.tabs.merchantType) {
params.merchantType = this.tabs.merchantType;
}
if (reset) {
return params;
}
return {
...params,
pageNo: pageNo + 1,
pageSize,
};
},

// 通用函数
generalFunction(res, key) {
console.log(res);
if (res && res.createTime) {
res.createTime = app.globalData.util.timeFormat(res.createTime);
if (res.merchantIntroduce) {
res.merchantIntroduce = res.merchantIntroduce.replace(/(\<img|\<p|src=null)/gi, function($0, $1) {
// tabs切换
onChange(event, _dataset) {
console.log(event);
console.log(_dataset);
/* ---处理dataset begin--- */
this.generalQueryData(event, _dataset);
/* ---处理dataset end--- */
const { tabs } = this;
this.tabs = {
...tabs,
active: event.name,
merchantType: event.name,
};
// 重新调用tabs切换
this.merchantPageApi();
},

// 进入详情页
headleDetails(event) {
const { id } = event.currentTarget.dataset.item;
uni.navigateTo({
url: `/packages/public/pages/details/details?name=店铺详情&referId=${id}`,
});
},

// 通用函数
generalFunction(res, key) {
console.log(res);
if (res && res.createTime) {
res.createTime = app.globalData.util.timeFormat(res.createTime);
if (res.merchantIntroduce) {
res.merchantIntroduce = res.merchantIntroduce.replace(
/(\<img|\<p|src=null)/gi,
function ($0, $1) {
console.log($0, $1);
return {
'<img': '<img style="width:100%;height:auto;display:block;" ',
'<p': '<p style="text-indent: 24px;" ',
'<article': '<div',
'</article': '</div',
'<header': '<div',
'</header': '</div'
} [$1];
});
}
this.setData({
dataList: res
});
"<img": '<img style="width:100%;height:auto;display:block;" ',
"<p": '<p style="text-indent: 24px;" ',
"<article": "<div",
"</article": "</div",
"<header": "<div",
"</header": "</div",
}[$1];
}
);
}
this.setData({
dataList: res,
});
}
}
};
},
},
};
</script>
<style lang="less">
page {
--nav-bar-background-color: transparent;
--nav-bar-text-color: #ffffff; // 导航栏左侧文案样式
--rate-icon-size: 26rpx; // 评分大小
--rate-icon-gutter: 8rpx; // 评分图标之前的距离
}

.line-navigator {
page {
--nav-bar-background-color: transparent;
--nav-bar-text-color: #ffffff; // 导航栏左侧文案样式
--rate-icon-size: 26rpx; // 评分大小
--rate-icon-gutter: 8rpx; // 评分图标之前的距离
}

.line-navigator {
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
top: 0;
left: 0;
}

.life-custom-swiper {
height: 330rpx;
position: relative;

.custom-swiper-img {
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
top: 0;
left: 0;
display: block;
}
}

.life-custom-swiper {
height: 330rpx;
position: relative;

.custom-swiper-img {
width: 100%;
height: 100%;
display: block;
}
}
.life-section {
padding: 0 24rpx;

.life-section {
padding: 0 24rpx;
.title {
font-size: 36rpx;
font-weight: 500;
color: #000000;
line-height: 36rpx;
padding-left: 6rpx;

.title {
.title-name {
position: relative;
font-size: 36rpx;
font-weight: 500;
color: #000000;
line-height: 36rpx;
padding-left: 6rpx;

.title-name {
position: relative;
font-size: 36rpx;
font-weight: 500;
color: #333333;

&::after {
content: '';
position: absolute;
left: -6rpx;
bottom: 0;
z-index: -1;
// width: 175rpx;
width: 115%;
height: 10rpx;
background: var(--title-guides-color);
border-radius: 2rpx;
}
color: #333333;

&::after {
content: "";
position: absolute;
left: -6rpx;
bottom: 0;
z-index: -1;
// width: 175rpx;
width: 115%;
height: 10rpx;
background: var(--title-guides-color);
border-radius: 2rpx;
}
}
}
}

.second-block,
.third-block,
.fourth-block {
margin-top: 50rpx;
.second-block,
.third-block,
.fourth-block {
margin-top: 50rpx;

.second-model {
margin-top: 40rpx;
flex-wrap: wrap;
.second-model {
margin-top: 40rpx;
flex-wrap: wrap;

.second-line {
width: 343rpx;
height: 110rpx;
justify-content: center;
padding-left: 39rpx;
position: relative;
.second-line {
width: 343rpx;
height: 110rpx;
justify-content: center;
padding-left: 39rpx;
position: relative;

&:not(:first-child) {
margin-top: 16rpx;
}
&:not(:first-child) {
margin-top: 16rpx;
}

.line-bg {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
top: 0;
left: 0;
}
.line-bg {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
top: 0;
left: 0;
}

.line-title {
position: absolute;
font-size: 40rpx;
font-weight: 500;
line-height: 32rpx;
}
.line-title {
position: absolute;
font-size: 40rpx;
font-weight: 500;
line-height: 32rpx;
}

.line-msg {
position: absolute;
margin-top: 100rpx;
font-size: 26rpx;
font-weight: 400;
color: #666666;
line-height: 26rpx;
}
.line-msg {
position: absolute;
margin-top: 100rpx;
font-size: 26rpx;
font-weight: 400;
color: #666666;
line-height: 26rpx;
}
}

.line1 {
width: 100%;
height: 171rpx;
.line1 {
width: 100%;
height: 171rpx;

.line-title {
font-size: 40rpx;
font-weight: 500;
line-height: 40rpx;
}
.line-title {
font-size: 40rpx;
font-weight: 500;
line-height: 40rpx;
}
}
}

.menu {
flex-wrap: wrap;
.menu {
flex-wrap: wrap;

.menu-item {
width: 120rpx;
text-align: center;
margin-top: 32rpx;
margin-right: 62rpx;
position: relative;
.menu-item {
width: 120rpx;
text-align: center;
margin-top: 32rpx;
margin-right: 62rpx;
position: relative;

&:nth-child(4n) {
margin-right: 0;
}
&:nth-child(4n) {
margin-right: 0;
}

.menu-item-ic-img {
margin-bottom: 16rpx;
width: 120rpx;
height: 80rpx;
}
.menu-item-ic-img {
margin-bottom: 16rpx;
width: 120rpx;
height: 80rpx;
}

.menu-item-name {
font-size: 26rpx;
font-weight: 400;
color: #333333;
line-height: 26rpx;
}
.menu-item-name {
font-size: 26rpx;
font-weight: 400;
color: #333333;
line-height: 26rpx;
}
}
}
}

.first-block {
margin-top: 40rpx;
}

.second-block {
color: #fe6e72;
}

.third-block {
color: #3692d8;
}

.fourth-block {
color: #209182;
}

.tabs-section {
margin-top: 50rpx;
}

.life-tabs {
margin-top: 20rpx;
font-size: 32rpx;
font-weight: 500;
// transform: translateX(-30rpx);

.life-conent {
margin-top: 37rpx;
display: flex;
justify-content: space-between;
padding-bottom: 24rpx;
border-bottom: 1px solid #efefef;

.life-conent-image {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
}

.first-block {
margin-top: 40rpx;
}

.second-block {
color: #fe6e72;
}

.third-block {
color: #3692d8;
}

.fourth-block {
color: #209182;
}
.life-conent-article {
flex: 1;
margin-left: 24rpx;

.tabs-section {
margin-top: 50rpx;
}
.life-conent-title {
margin-top: 6rpx;
font-size: 30rpx;
font-weight: 500;
color: #333333;
line-height: 30rpx;
}

.life-tabs {
margin-top: 20rpx;
font-size: 32rpx;
font-weight: 500;
// transform: translateX(-30rpx);

.life-conent {
margin-top: 37rpx;
display: flex;
justify-content: space-between;
padding-bottom: 24rpx;
border-bottom: 1px solid #efefef;

.life-conent-image {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
.life-conent-block {
margin-top: 10rpx;
font-size: 26rpx;
font-weight: 400;
color: #666666;
line-height: 38rpx;
height: 80rpx;
}

.life-conent-article {
flex: 1;
margin-left: 24rpx;
.life-conent-rate {
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 24rpx;
margin-top: 9rpx;

.life-conent-title {
margin-top: 6rpx;
font-size: 30rpx;
font-weight: 500;
.rate-loca-active {
color: #333333;
line-height: 30rpx;
}

.life-conent-block {
margin-top: 10rpx;
font-size: 26rpx;
font-weight: 400;
color: #666666;
line-height: 38rpx;
height: 80rpx;
}

.life-conent-rate {
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 24rpx;
margin-top: 9rpx;

.rate-loca-active {
color: #333333;
}
}
}
}
}

rich-text {
overflow: hidden;
display: inline-block;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
</style>
}

rich-text {
overflow: hidden;
display: inline-block;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
</style>

+ 21
- 1
src/pages/people/people.vue View File

@@ -78,7 +78,9 @@
icon: '',
name: ''
},
e: []
e: [],
latitude:0,
longitude:0
};
}
/**
@@ -88,6 +90,24 @@
onLoad() {
this.getBannerList();
this.recursionApi();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
console.log(position.coords.latitude);
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
uni.setStorageSync(
"userLocation",
position.coords.longitude + "," + position.coords.latitude
);
},
function (error) {
console.log(error.message);
}
);
} else {
console.log("浏览器不支持地理定位功能");
}
},
methods: {
updateQuery(url, name) {


+ 11
- 0
vite.config.ts View File

@@ -1,9 +1,20 @@
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
const Timestamp = new Date().getTime()

// https://vitejs.dev/config/
export default defineConfig({
plugins: [uni()],
build: {
sourcemap: false, // 输出.map文件,默认是false
rollupOptions: {
output: {
chunkFileNames:`static/js/[name].[hash]${Timestamp}.js`,
entryFileNames: `static/js/[name].[hash]${Timestamp}.js`,
assetFileNames: `assets/[ext]/[name].[hash]${Timestamp}.[ext]`,
},
}
},
// publicPath: './',
// server: {
// proxy: {


Write Preview
Loading…
Cancel
Save