梁航：个人主页和详情页的更新
This commit is contained in:
hot777zz
157
components/TabBar/TabBar.vue
Normal file
157
components/TabBar/TabBar.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view class="tabbar-container">
|
||||
<block>
|
||||
<view class="tabbar-item" v-for="(item,index) in tabbarList" :class="[item.centerItem ? ' center-item' : '']"
|
||||
@click="changeItem(item)">
|
||||
<view class="item-top">
|
||||
<image :src="currentItem==item.id?item.selectIcon:item.icon"></image>
|
||||
</view>
|
||||
<view class="item-bottom" :class="[currentItem==item.id ? 'item-active' : '']">
|
||||
<text>{{item.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentItem: 0,
|
||||
tabbarList: [{
|
||||
id: 0,
|
||||
path: "/pages/index/index",
|
||||
icon: "/static/tabbar/di_icon_syh.png",
|
||||
selectIcon: "/static/tabbar/di_icon_sy.png",
|
||||
text: "首页",
|
||||
centerItem: false
|
||||
}, {
|
||||
id: 1,
|
||||
path: "/pages/shopTransfer/shopTransfer",
|
||||
icon: "/static/tabbar/di_icon_zrh.png",
|
||||
selectIcon: "/static/tabbar/di_icon_zr.png",
|
||||
text: "店铺转让",
|
||||
centerItem: false
|
||||
}, {
|
||||
id: 2,
|
||||
path: "/pages/publish/publish",
|
||||
icon: "/static/tabbar/di_icon_fb@2x.png",
|
||||
selectIcon: "/static/tabbar/di_icon_fb@2x.png",
|
||||
text: "发布",
|
||||
centerItem: true
|
||||
}, {
|
||||
id: 3,
|
||||
path: "/pages/shopAddress/shopAddress",
|
||||
icon: "/static/tabbar/di_icon_dzh.png",
|
||||
selectIcon: "/static/tabbar/di_icon_dz.png",
|
||||
text: "找店地址",
|
||||
centerItem: false
|
||||
}, {
|
||||
id: 4,
|
||||
path: "/pages/my/my",
|
||||
icon: "/static/tabbar/di_icon_wdh.png",
|
||||
selectIcon: "/static/tabbar/di_icon_wd.png",
|
||||
text: "我的",
|
||||
centerItem: false
|
||||
}]
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.currentItem = this.currentPage;
|
||||
uni.hideTabBar();
|
||||
},
|
||||
methods: {
|
||||
changeItem(item) {
|
||||
let _this = this;
|
||||
//_this.currentItem = item.id;
|
||||
uni.switchTab({
|
||||
url: item.path
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
view {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tabbar-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 98rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* padding: 5rpx 0; */
|
||||
color: #999999;
|
||||
z-index: 200;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.tabbar-container .tabbar-item {
|
||||
width: 20%;
|
||||
height: 82rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabbar-container .item-active {
|
||||
color: #339967;
|
||||
}
|
||||
|
||||
.tabbar-container .center-item {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabbar-container .tabbar-item .item-top {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
padding: 0rpx;
|
||||
}
|
||||
|
||||
.tabbar-container .center-item .item-top {
|
||||
flex-shrink: 0;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
position: absolute;
|
||||
top: -61rpx;
|
||||
left: calc(50% - 50rpx);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.tabbar-container .tabbar-item .item-top image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
tabbar-container .tabbar-item:nth-child(3) .item-top image {
|
||||
background: #ff0000;
|
||||
}
|
||||
|
||||
.tabbar-container .tabbar-item .item-bottom {
|
||||
font-size: 20rpx;
|
||||
width: 100%;
|
||||
margin-top: 3rpx;
|
||||
}
|
||||
|
||||
.tabbar-container .center-item .item-bottom {
|
||||
position: absolute;
|
||||
bottom: 5rpx;
|
||||
}
|
||||
</style>
|
||||
156
components/inputAndSwiper/inputAndSwiper.vue
Normal file
156
components/inputAndSwiper/inputAndSwiper.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="search-box">
|
||||
<view class="search-box-input">
|
||||
<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
|
||||
prefixIconStyle="font-size: 24px;color: #909399;" border="true">
|
||||
<template slot="suffix">
|
||||
<view style="display: flex;align-items: center;">
|
||||
<u-icon name="map-fill" color="#329866" size="22"></u-icon>
|
||||
<text class="position">{{position}}</text>
|
||||
</view>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
<u-swiper :list="headerBgList" height="300rpx" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js"
|
||||
export default {
|
||||
name: "inputAndSwiper",
|
||||
props: {
|
||||
headerBgList: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [
|
||||
"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
|
||||
"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
|
||||
"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"
|
||||
]
|
||||
}
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default () {
|
||||
return '定位'
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
options: {
|
||||
styleIsolation: 'shared', // 解除样式隔离
|
||||
},
|
||||
created() {
|
||||
// this.getLocation()
|
||||
},
|
||||
methods: {
|
||||
getLocation(){
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
// geocode: true, // 返回城市信息
|
||||
// enableHighAccuracy: false, // 开启高精度模式
|
||||
success: function(res) {
|
||||
let qqmapsdk = new QQMapWX({
|
||||
key: 'ZRKBZ-Q7FWL-GVZPK-MCRBU-4XFB5-ATBDB'
|
||||
});
|
||||
qqmapsdk.reverseGeocoder({
|
||||
location: {
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude
|
||||
},
|
||||
success: (re) => {
|
||||
console.log(re.result.ad_info.city, '成都市==');
|
||||
console.log(re.result.ad_info.district, '武侯区==');
|
||||
},
|
||||
fail: (re) => {
|
||||
console.log(re, '失败信息');
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
//提示用户开启定位服务
|
||||
open() {
|
||||
// uni.authorize({
|
||||
// scope: 'scope.userLocation',
|
||||
// success: function() {
|
||||
// console.log('授权成功');
|
||||
// },
|
||||
// fail: function() {
|
||||
// console.log('授权失败');
|
||||
// }
|
||||
// })
|
||||
// wx.getSetting({
|
||||
// success: (res) => {
|
||||
// if (res.authSetting['scope.userLocation'] === false) {
|
||||
// wx.showModal({
|
||||
// title: '提示',
|
||||
// content: '请打开定位服务后重新进入该页面',
|
||||
// confirmText: '去设置',
|
||||
// success: (res) => {
|
||||
// if (res.confirm) {
|
||||
// wx.openSetting()
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.search-box {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
width: 84.6%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.search-box-input {
|
||||
border-radius: 12rpx;
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
opacity: 0.85;
|
||||
|
||||
.u-border {
|
||||
border: none;
|
||||
|
||||
.u-input__content {
|
||||
height: 62rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.u-input__content__field-wrapper__field {
|
||||
font-size: 26rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.position {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #232323;
|
||||
line-height: 33rpx;
|
||||
}
|
||||
|
||||
.u-swiper {
|
||||
border-radius: 0 !important;
|
||||
|
||||
.u-swiper__wrapper__item__wrapper__image {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user