wenfp/temple-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更改寺庙列表导航和定位

Browse Source
This commit is contained in:
wenfp
2022-03-21 10:27:02 +08:00
parent 5ebf00a86f
commit ec94965858
10 changed files with 99 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -1
View File
@@ -43,7 +43,8 @@
"eslintConfig": { "eslintConfig": {
"root": true, "root": true,
"globals": { "globals": {
"wx": true "wx": true,
"wechatInstance": true
}, },
"env": { "env": {
"node": true "node": true
src/api/index.js
+1 -1
View File
@@ -132,7 +132,7 @@ const getDynamicDetail = (dynamic_id = '') => service.get(`/api/dynamic/detail?i
const getCommonGoods = (temple_id = '', page, size = 10) => service.get(`/api/common/get-list?temple_id=${temple_id}&page=${page}&size=${size}`); const getCommonGoods = (temple_id = '', page, size = 10) => service.get(`/api/common/get-list?temple_id=${temple_id}&page=${page}&size=${size}`);
// 获取订单榜 // 获取订单榜
const getOrderCompare = (temple_id = '1', page = 1, type = '', goods_id = '', goods_type = '') => service.get(`/api/order/get-compare?temple_id=${temple_id}&page=${page}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}`); const getOrderCompare = (temple_id = '1', page = 1, type = '', goods_id = '', goods_type = '', size = 3) => service.get(`/api/order/get-compare?temple_id=${temple_id}&page=${page}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}&limit=${size}`);
// 根据agent_id获取订单榜 // 根据agent_id获取订单榜
const getOrderCompareByAgentId = (agent_id = '1', type = '', goods_id = '', goods_type = '') => service.get(`/api/order/get-compare?agent_id=${agent_id}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}`); const getOrderCompareByAgentId = (agent_id = '1', type = '', goods_id = '', goods_type = '') => service.get(`/api/order/get-compare?agent_id=${agent_id}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}`);
src/common/wechat-web.js
+9 -2
View File
@@ -79,11 +79,18 @@ function signToWechat(config, shareConfig) {
} }
function getLocation() { function getLocation() {
return new Promise(resolve => { return new Promise((resolve, reject) => {
wechatInstance.getLocation({ wechatInstance.getLocation({
type: 'wgs84', type: 'wgs84',
success: res => { success: res => {
resolve(res); if(res.errMsg === 'getLocation:ok'){
resolve(res);
} else {
reject();
}
},
error: () => {
reject();
} }
}); });
}); });
src/components/temple/index.vue
+34 -20
View File
@@ -3,8 +3,10 @@
<img :src="data.picture" alt=""> <img :src="data.picture" alt="">
<div class="info"> <div class="info">
<span class="name">{{data.unit_name}}</span> <span class="name">{{data.unit_name}}</span>
<span class="visitor">{{data.visit}} 人到访</span> <span class="location" @click.stop="onLocationTo">
<span class="iconfont icon-dingwei"></span> <span class="visitor">{{data.visit}} 人到访</span>
<span class="iconfont icon-dingwei" ></span>
</span>
</div> </div>
</div> </div>
</template> </template>
@@ -17,9 +19,9 @@ export default {
type: Object, type: Object,
default(){ default(){
return { return {
picture: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F24237%2F24236884.jpg&refer=http%3A%2F%2Fimg8.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638518604&t=074af50479ac14ca13fc6616380fe0f5', picture: '',
unit_name: '重庆石林寺', unit_name: '',
visit: 100 visit: 0
} }
} }
} }
@@ -27,6 +29,9 @@ export default {
methods: { methods: {
onTo(){ onTo(){
this.$router.push({ name: 'temple-home', query: { temple_id: this.data.id }}) this.$router.push({ name: 'temple-home', query: { temple_id: this.data.id }})
},
onLocationTo(){
this.$emit('location-to', this.data)
} }
} }
} }
@@ -44,26 +49,35 @@ export default {
img{ img{
height: 4rem; height: 4rem;
width: 100%; width: 100%;
vertical-align: top;
} }
.info{ .info{
display: flex; padding: .4rem .4rem;
height: 1.07rem; display: flex;
align-items: center; justify-content: space-between;
padding: 0 .4rem; align-items: center;
.name{ .name{
font-size: .37rem; font-size: .37rem;
flex: 1;
}
.visitor{
font-size: .3rem;
color: #666;
margin-right: .4rem;
}
.iconfont{
font-size: .4rem;
padding: 0;
color: rgb(60, 202, 60);
} }
.location{
display: flex;
justify-content: space-between;
align-items: center;
.visitor{
font-size: .3rem;
color: #666;
margin-right: .1rem;
vertical-align: middle;
}
.iconfont{
font-size: .4rem;
padding: 0;
color: rgb(60, 202, 60);
vertical-align: middle;
}
}
} }
} }
</style> </style>
src/components/user-merit/index.vue
+1
View File
@@ -50,6 +50,7 @@ export default {
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
margin-right: .4rem; margin-right: .4rem;
line-height: 1.3;
} }
span:last-child { span:last-child {
font-size: 0.32rem; font-size: 0.32rem;
src/pages/goods-light-detail/index.vue
+4 -4
View File
@@ -215,7 +215,7 @@ export default {
// 获取更多感恩功德1 // 获取更多感恩功德1
loadMoreFn(){ loadMoreFn(){
this.page += 1; this.page += 1;
this.getPayRecords({id: this.listType}, this.page) this.getPayRecords({id: this.listType}, this.page, 10)
}, },
onToFillMeritName(){ onToFillMeritName(){
this.$router.push({ this.$router.push({
@@ -241,7 +241,7 @@ export default {
this.currentLightSize = this.currentLight.children[0].id this.currentLightSize = this.currentLight.children[0].id
await this.getPayRecords({ id: 1}, 1); await this.getPayRecords({ id: 1}, 1);
this.$nextTick(() => { this.$nextTick(() => {
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50
}) })
this.wechatReady({ this.wechatReady({
...this.data.shareConfig, ...this.data.shareConfig,
@@ -249,10 +249,10 @@ export default {
}) })
}, },
// 获取感恩功德 // 获取感恩功德
async getPayRecords(lType, page){ async getPayRecords(lType, page, size = 3){
this.listType = lType.id; this.listType = lType.id;
this.page = page; this.page = page;
const res = await getOrderCompare(this.query.temple_id, this.page, this.listType, '', this.query.goods_type ); const res = await getOrderCompare(this.query.temple_id, this.page, this.listType, '', this.query.goods_type, size );
if(this.page === 1){ if(this.page === 1){
this.payList = []; this.payList = [];
} }
src/pages/home.vue
+1
View File
@@ -162,6 +162,7 @@ export default {
this.data = res; this.data = res;
this.$store.commit('setTempleMeritId', res.temple_merit_id); this.$store.commit('setTempleMeritId', res.temple_merit_id);
this.data.icon_data = this.sliceNav(res.icon_data); this.data.icon_data = this.sliceNav(res.icon_data);
console.log(123, this.data)
setTimeout(() => { setTimeout(() => {
document.title = '自在福田'; document.title = '自在福田';
}, 10) }, 10)
src/pages/temple-home/index.vue
-9
View File
@@ -241,18 +241,9 @@ export default {
const res = await getTempleIndex(this.query.temple_id); const res = await getTempleIndex(this.query.temple_id);
this.data = res; this.data = res;
this.data.icon_data = this.sliceNav(res.icon_data); this.data.icon_data = this.sliceNav(res.icon_data);
setTimeout(() => { setTimeout(() => {
document.title = res.temple_data.unit_name; document.title = res.temple_data.unit_name;
}, 30) }, 30)
// this.wechatReady(wx => {
// // const { title, desc, link, imageUrl } = res.shareConfig;
// this.shareToWechat(wx, {
// ...res.shareConfig,
// link: location.href,
// })
// })
this.wechatReady({ this.wechatReady({
...res.shareConfig, ...res.shareConfig,
link: location.href, link: location.href,
src/pages/temple-list/index.vue
+45 -6
View File
@@ -8,7 +8,11 @@
</template> </template>
</van-search> </van-search>
<div class="operation-bar"> <div class="operation-bar">
<div class="position" @click="onGetLocation"> <div class="position" v-if="positioning" >
<span class="iconfont icon-dingwei positioning"></span>
<span>正在获取位置...</span>
</div>
<div class="position" v-else @click="onGetLocation">
<span class="iconfont icon-dingwei"></span> <span class="iconfont icon-dingwei"></span>
<span>重新定位</span> <span>重新定位</span>
</div> </div>
@@ -23,9 +27,7 @@
</div> </div>
</div> </div>
<div > <div >
<!-- <div class="temple-container content" v-if="mode === 'list'">
<temple v-for="i in 10" :key="i"></temple>
</div> -->
<div class="temple-list-container" :style="{height: containerHeight + 'px'}" v-if="mode === 'list'" > <div class="temple-list-container" :style="{height: containerHeight + 'px'}" v-if="mode === 'list'" >
<scroll-view <scroll-view
@@ -37,7 +39,7 @@
@pulldown="refresh" @pulldown="refresh"
@pullup="loadMore" @pullup="loadMore"
> >
<temple v-for="temple in templeList" :key="temple.id" :data="temple"></temple> <temple v-for="temple in templeList" :key="temple.id" :data="temple" @location-to="onLocationTo"></temple>
</scroll-view> </scroll-view>
</div> </div>
<div class="temple-map" v-show="mode === 'map'" :style="{height: containerHeight + 'px'}"> <div class="temple-map" v-show="mode === 'map'" :style="{height: containerHeight + 'px'}">
@@ -50,7 +52,7 @@
<script> <script>
import { getTempleList } from '@/api'; import { getTempleList } from '@/api';
import TMAPLoader from '@/common/tmap'; import TMAPLoader from '@/common/tmap';
import { getLocation } from '@/common/wechat-web'; import { getLocation, openLocation } from "@/common/wechat-web";
export default { export default {
data(){ data(){
@@ -64,6 +66,7 @@ export default {
lng: '', lng: '',
lat: '', lat: '',
map: null, map: null,
positioning: false
} }
}, },
inject: ['root', 'parentHeight'], inject: ['root', 'parentHeight'],
@@ -86,6 +89,7 @@ export default {
} }
this.getTempleList(); this.getTempleList();
this.wechatReady()
}, },
methods: { methods: {
initMap(){ initMap(){
@@ -131,10 +135,25 @@ export default {
}) })
}, },
onGetLocation(){ onGetLocation(){
this.positioning = true;
getLocation().then(res => { getLocation().then(res => {
console.log(res)
this.positioning = false
this.lng = res.longitude; this.lng = res.longitude;
this.lat = res.latitude; this.lat = res.latitude;
this.page = 1;
this.getTempleList(); this.getTempleList();
}).catch((a) => {
console.log(a)
this.positioning = false;
})
},
onLocationTo(data){
openLocation({
longitude: data.lng,
latitude: data.lat,
name: data.unit_name,
address: data.address
}) })
}, },
onModeSwitch(mode){ onModeSwitch(mode){
@@ -162,6 +181,23 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@keyframes positioning {
0%{
opacity: 1;
}
25%{
opacity: 0;
}
50%{
opacity: 1;
}
75%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.temple-list{ .temple-list{
.operation-bar{ .operation-bar{
display: flex; display: flex;
@@ -179,6 +215,9 @@ export default {
display: inline-block; display: inline-block;
margin-right: .13rem; margin-right: .13rem;
} }
.positioning{
animation: positioning 3s linear infinite;
}
} }
.show-mode{ .show-mode{
line-height: .37rem; line-height: .37rem;
wap/index.html
+1 -1
View File
File diff suppressed because one or more lines are too long