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": {
"root": true,
"globals": {
"wx": true
"wx": true,
"wechatInstance": true
},
"env": {
"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 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获取订单榜
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() {
return new Promise(resolve => {
return new Promise((resolve, reject) => {
wechatInstance.getLocation({
type: 'wgs84',
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="">
<div class="info">
<span class="name">{{data.unit_name}}</span>
<span class="visitor">{{data.visit}} 人到访</span>
<span class="iconfont icon-dingwei"></span>
<span class="location" @click.stop="onLocationTo">
<span class="visitor">{{data.visit}} 人到访</span>
<span class="iconfont icon-dingwei" ></span>
</span>
</div>
</div>
</template>
@@ -17,9 +19,9 @@ export default {
type: Object,
default(){
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',
unit_name: '重庆石林寺',
visit: 100
picture: '',
unit_name: '',
visit: 0
}
}
}
@@ -27,6 +29,9 @@ export default {
methods: {
onTo(){
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{
height: 4rem;
width: 100%;
vertical-align: top;
}
.info{
display: flex;
height: 1.07rem;
align-items: center;
padding: 0 .4rem;
padding: .4rem .4rem;
display: flex;
justify-content: space-between;
align-items: center;
.name{
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>
src/components/user-merit/index.vue
+1
View File
@@ -50,6 +50,7 @@ export default {
vertical-align: top;
display: inline-block;
margin-right: .4rem;
line-height: 1.3;
}
span:last-child {
font-size: 0.32rem;
src/pages/goods-light-detail/index.vue
+4 -4
View File
@@ -215,7 +215,7 @@ export default {
// 获取更多感恩功德1
loadMoreFn(){
this.page += 1;
this.getPayRecords({id: this.listType}, this.page)
this.getPayRecords({id: this.listType}, this.page, 10)
},
onToFillMeritName(){
this.$router.push({
@@ -241,7 +241,7 @@ export default {
this.currentLightSize = this.currentLight.children[0].id
await this.getPayRecords({ id: 1}, 1);
this.$nextTick(() => {
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight()
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50
})
this.wechatReady({
...this.data.shareConfig,
@@ -249,10 +249,10 @@ export default {
})
},
// 获取感恩功德
async getPayRecords(lType, page){
async getPayRecords(lType, page, size = 3){
this.listType = lType.id;
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){
this.payList = [];
}
src/pages/home.vue
+1
View File
@@ -162,6 +162,7 @@ export default {
this.data = res;
this.$store.commit('setTempleMeritId', res.temple_merit_id);
this.data.icon_data = this.sliceNav(res.icon_data);
console.log(123, this.data)
setTimeout(() => {
document.title = '自在福田';
}, 10)
src/pages/temple-home/index.vue
-9
View File
@@ -241,18 +241,9 @@ export default {
const res = await getTempleIndex(this.query.temple_id);
this.data = res;
this.data.icon_data = this.sliceNav(res.icon_data);
setTimeout(() => {
document.title = res.temple_data.unit_name;
}, 30)
// this.wechatReady(wx => {
// // const { title, desc, link, imageUrl } = res.shareConfig;
// this.shareToWechat(wx, {
// ...res.shareConfig,
// link: location.href,
// })
// })
this.wechatReady({
...res.shareConfig,
link: location.href,
src/pages/temple-list/index.vue
+46 -7
View File
@@ -8,7 +8,11 @@
</template>
</van-search>
<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>重新定位</span>
</div>
@@ -23,9 +27,7 @@
</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'" >
<scroll-view
@@ -37,7 +39,7 @@
@pulldown="refresh"
@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>
</div>
<div class="temple-map" v-show="mode === 'map'" :style="{height: containerHeight + 'px'}">
@@ -50,7 +52,7 @@
<script>
import { getTempleList } from '@/api';
import TMAPLoader from '@/common/tmap';
import { getLocation } from '@/common/wechat-web';
import { getLocation, openLocation } from "@/common/wechat-web";
export default {
data(){
@@ -64,6 +66,7 @@ export default {
lng: '',
lat: '',
map: null,
positioning: false
}
},
inject: ['root', 'parentHeight'],
@@ -86,6 +89,7 @@ export default {
}
this.getTempleList();
this.wechatReady()
},
methods: {
initMap(){
@@ -131,11 +135,26 @@ export default {
})
},
onGetLocation(){
this.positioning = true;
getLocation().then(res => {
console.log(res)
this.positioning = false
this.lng = res.longitude;
this.lat = res.latitude;
this.page = 1;
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){
this.mode = mode;
@@ -162,6 +181,23 @@ export default {
</script>
<style lang="scss">
@keyframes positioning {
0%{
opacity: 1;
}
25%{
opacity: 0;
}
50%{
opacity: 1;
}
75%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.temple-list{
.operation-bar{
display: flex;
@@ -179,6 +215,9 @@ export default {
display: inline-block;
margin-right: .13rem;
}
.positioning{
animation: positioning 3s linear infinite;
}
}
.show-mode{
line-height: .37rem;
wap/index.html
+1 -1
View File
File diff suppressed because one or more lines are too long