Skip to content

J
jd-vx-app
Commit 8d7e2d89 authored by 程新智's avatar 程新智 👽
Browse files
Options

优化tabbar

parent 41e5bbb1
Hide whitespace changes
Inline Side-by-side
Showing with 1739 additions and 64 deletions
common/.DS_Store
View file @ 8d7e2d89
No preview for this file type
common/hans-tabbar/hans-tabbar.vue 0 → 100644
View file @ 8d7e2d89
<template>
<view class="weui-tabbar" :class="extClass">
<view @click="tabChange(index)" v-for="(item, index) in list" :key="index" class="weui-tabbar__item" :class="[{'weui-bar__item_on':index === current},{'flexd__icon':index===2}]">
<view style="position: relative;display:inline-block;"><image :src="current === index ? item.selectedIconPath : item.iconPath" class="weui-tabbar__icon"></image></view>
<view class="weui-tabbar__label">{{ item.text }}</view>
</view>
</view>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: function() {
return []
}
}
},
data() {
return {
extClass: '',
current: 0
};
},
methods: {
tabChange(index) {
if (index === this.current) {
return;
}
this.current = index;
this.$emit('tabChange',index)
}
}
};
</script>
<style lang="scss" scoped >
.weui-tabbar {
display: flex;
position: relative;
z-index: 500;
background-color: #ffffff;
box-shadow: 0px 8rpx 19rpx 2rpx rgba(215, 215, 215, 0.21);
}
.flexd__icon{
width: 100upx;
position: relative;
top: -40rpx;
left: 0;
right: 0;
text-align: center;
margin: 0 auto;
background: url('../../static/tarbar/index31.png') center center no-repeat;
background-size: contain;
width: 74rpx;
height: 74rpx;
}
.weui-tabbar:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
// border-top: 1rpx solid rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.1);
}
.weui-tabbar__item {
display: block;
flex: 1;
padding: 8px 0 4px;
padding-bottom: calc(8px + constant(safe-area-inset-bottom));
padding-bottom: calc(8px + env(safe-area-inset-bottom));
font-size: 0;
color: rgba(0, 0, 0, 0.5);
text-align: center;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.weui-tabbar__item:first-child {
padding-left: constant(safe-area-inset-left);
padding-left: env(safe-area-inset-left);
}
.weui-tabbar__item:last-child {
padding-right: constant(safe-area-inset-right);
padding-right: env(safe-area-inset-right);
}
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i,
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
color: rgba(225, 37, 27, 1);
}
.weui-tabbar__icon {
display: inline-block;
width: 46rpx;
height: 46rpx;
margin-bottom: 2px;
}
i.weui-tabbar__icon,
.weui-tabbar__icon > i {
font-size: 24px;
color: rgba(0, 0, 0, 0.5);
}
.weui-tabbar__icon image {
width: 100%;
height: 100%;
}
.weui-tabbar__label {
color: #333;
font-size: 10px;
line-height: 1.4;
}
</style>
pages.json
View file @ 8d7e2d89
......@@ -13,6 +13,12 @@
"navigationBarTitleText": "登录"
}
},
{
"path": "pages/main",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/binding/binding",
"style": {
......
pages/.DS_Store
View file @ 8d7e2d89
No preview for this file type
pages/binding/binding.vue
View file @ 8d7e2d89
......@@ -81,7 +81,7 @@ export default {
// });
//跳转到首页
uni.navigateTo({
url: '/pagesA/pages/index/index'
url: '/pages/main'
});
} else {
uni.showToast({
......
pages/binding/index.vue
View file @ 8d7e2d89
......@@ -20,12 +20,12 @@
</view> -->
<view v-if="isCanUse2">
<view>
<button class="login__btn" v-if="!checked" @click="" hover-class="none" type='primary'
<button class="login__btn" v-if="!checked" hover-class="none" type='primary'
@click="checkLogin">
微信一键登录
</button>
<button class="login__btn" v-if="checked" @click="" hover-class="none" type='primary'
<button class="login__btn" v-if="checked" hover-class="none" type='primary'
open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
微信一键登录
</button>
......@@ -176,7 +176,7 @@ export default {
uni.reLaunch({ //信息更新成功后跳转到小程序首页
//todo 京东账号绑定界面暂缓
//url: '/pages/binding/binding'
url: '/pagesA/pages/index/index'
url: '/pages/main'
})
// uni.navigateTo({
......
pages/home.vue 0 → 100644
View file @ 8d7e2d89
<template>
<view class="appCotent">
<view class="index-content">
<u-swiper :radius="0" :height="210" :list="list5" circular :autoplay="false">
<view slot="indicator" class="indicator">
<view class="indicator__dot" v-for="(item, index) in list5" :key="index" :class="[index === current && 'indicator__dot--active']">
</view>
</view>
</u-swiper>
<u-gap bgColor="transparent" height="15"></u-gap>
<div class="content__code">
<div class="code__img">
<image :src="freeCode.mainImgUrl" class="code__img"></image>
</div>
<div class="code__money">
<div class="money__title">
<text>{{freeCode.title}}</text>
</div>
<div class="code__tips">
<text>绑定京东账号，仅需支付邮费</text>
</div>
<div class="money__num">
<text class="num__one">￥0.00</text>
<text class="num__two">￥{{freeCode.originalPrice/100}}</text>
</div>
</div>
<div class="code__get" @click="getPrice">
<div>
立即
</div>
<div>
领取
</div>
</div>
</div>
<u-gap bgColor="transparent" height="15"></u-gap>
<div class="index__item3">
<image src="@/static/index/index23.png"></image>
</div>
<u-gap bgColor="transparent" height="15"></u-gap>
<div class="index__item3-1">
<image src="@/static/index/index14.png"></image>
</div>
<u-gap bgColor="transparent" height="15"></u-gap>
<div class="index__item4">
<image src="@/static/index/index20.png"></image>
</div>
<u-gap bgColor="transparent" height="15"></u-gap>
<div class="index__item5">
<image src="@/static/index/index8.png"></image>
</div>
<u-gap bgColor="transparent" height="60"></u-gap>
</view>
</view>
</template>
<script>
export default {
data() {
return {
current: 0,
balance: "0.00",
list5: [],
//免费挪车码
freeCode: {},
};
},
methods: {
getPrice() {
uni.showToast({
title: "您的免费领取次数已用完",
icon: 'none',
duration: 2000,
});
//跳转到领取优惠卷页面
uni.navigateTo({
url: '/pagesA/pages/index/getPrice?orderId=' + this.freeCode.id
});
},
getMoveCode() {
let opts = {
url: '/app/mall/free/code',
method: 'get'
};
this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) {
this.freeCode = res.data.data
}
})
},
getRotationList() {
let opts = {
url: '/app/index/carouse/1',
method: 'get'
};
this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) {
let data = []
data = res.data.data
let imgList = []
data.forEach(e => {
imgList.push(e.imageUrl)
})
this.list5 = imgList
}
})
},
},
created() {
this.getMoveCode()
this.getRotationList()
},
onReady: function () {
uni.setNavigationBarTitle({
title: '首页'
});
}
};
</script>
<style lang="scss">
.index-content {
background-color: #f9f9f9;
height: 100%;
.index__item3 {
width: 100%;
height: 356rpx;
image {
width: 100%;
height: 356rpx;
}
}
.index__item3-1 {
width: 100%;
height: 711rpx;
image {
width: 100%;
height: 711rpx;
}
}
.index__item4 {
width: 100%;
height: 646rpx;
image {
width: 100%;
height: 646rpx;
}
}
.index__item5 {
width: 100%;
height: 1289rpx;
image {
width: 100%;
height: 1289rpx;
}
}
.content__code {
padding: 28rpx;
box-sizing: border-box;
width: 630rpx;
height: 220rpx;
background: #ffffff;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 10rpx 40rpx 10rpx 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 30rpx;
position: relative;
.code__img {
width: 160rpx;
height: 160rpx;
background: #3699ff;
border-radius: 10rpx;
}
.code__money {
margin: 0 20rpx;
.money__title {
font-size: 36rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
line-height: 42rpx;
.code__tips {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 42rpx;
}
}
.money__num {
.num__one {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #e1251b;
line-height: 42rpx;
}
.num__two {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
line-height: 42rpx;
position: relative;
}
.num__two::before {
content: '';
width: 100%;
height: 1rpx;
background: #999;
position: absolute;
bottom: 16rpx;
left: 8rpx;
}
}
}
.code__get {
position: absolute;
right: -60rpx;
width: 90rpx;
height: 90rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
padding-top: 4rpx;
box-sizing: border-box;
text-align: center;
background: url("@/static/index/index26.png") no-repeat;
background-size: contain;
}
}
/deep/ .u-swiper__indicator {
right: 0 !important;
}
/deep/ .u-swiper {
border-radius: 0 0 0 100rpx !important;
}
.indicator {
@include flex(row);
justify-content: center;
&__dot {
height: 20rpx;
width: 20rpx;
border-radius: 100%;
background-color: rgba(255, 255, 255, 0.35);
margin: 0 10rpx;
transition: background-color 0.3s;
&--active {
background-color: #e1251b;
}
}
}
.indicator-num {
padding: 4rpx 0;
background-color: rgba(0, 0, 0, 0.35);
border-radius: 100%;
width: 35px;
@include flex;
justify-content: center;
&__text {
color: #ffffff;
font-size: 24rpx;
}
}
}
</style>
pages/main.vue 0 → 100644
View file @ 8d7e2d89
<template>
<view class="main_content">
<index v-if="tab=='index'"></index>
<moveCar v-if="tab=='moveCar'"></moveCar>
<shop v-if="tab=='shop'"></shop>
<personal v-if="tab=='personal'"></personal>
<u-gap bgColor="transparent" height="055"></u-gap>
<view class="tabbar">
<v-tabbar :list="tabbar" style="position:fixed;bottom:0;width:100%;left:0;right:0;" @tabChange="tabChange"></v-tabbar>
</view>
</view>
</template>
<script>
import {
mapState
} from 'vuex';
import tabbar from '@/common/hans-tabbar/hans-tabbar'
import index from './home'
import moveCar from './moveCar'
import shop from './shop'
import personal from './personal'
export default {
components: {
index,
moveCar,
personal,
shop,
'v-tabbar': tabbar
},
data() {
return {
tab: "index",
}
},
computed: {
...mapState({
tabbarTextColor: "tabbarTextColor",
tabbarTextActiveColor: "tabbarTextActiveColor",
tabbar: "tabbar"
})
},
onShow: function () {},
methods: {
tabChange(index) {
switch (index) {
case 0:
this.tab = 'index'
break;
case 1:
this.tab = 'moveCar'
break;
case 2:
uni.scanCode({
success: function (res) {
let path = res.path
if(path) {
let xcxIndexPath = uni.getStorageSync('xcxIndexPath')
console.info(xcxIndexPath);
if(xcxIndexPath) {
xcxIndexPath = path.replace(xcxIndexPath, '').replace("?", '')
if(xcxIndexPath.indexOf('scene') >= 0 ) {
let scene = xcxIndexPath.replace('scene=', '')
let param = {code : scene}
let opts = { url: '/app/index/check/move/code', method: 'post' }
console.log(param);
that.http.httpTokenRequest(opts, param).then(res => {
console.info(res)
if (res.data.code == 200) {
if(res.data.data.bindFlag) {
that.gotoMoveCar(scene)
} else {
that.gotoBindMoveCar(scene)
}
}
})
}
}
} else {
uni.showToast({
title:'扫码失败',
icon:'none',
})
}
}
});
break;
case 3:
this.tab = 'shop'
break;
case 4:
this.tab = 'personal'
break;
}
this.$forceUpdate();
},
},
onLoad() {}
}
</script>
<style lang="scss" scoped>
.main_content {
height: 100%;
overflow: hidden;
}
</style>
pages/moveCar.vue 0 → 100644
View file @ 8d7e2d89
<template>
<view class="appCotent">
<view class="moveCar">
<div class="move_car__content">
<div class="menu__top" @click="goUrl({
url: '/pagesB/pages/move-car/loveCar',
})">
<div>
<image src="@/static/move-car/move-car1.png" />
</div>
<div>
爱车管理
</div>
</div>
<div class="menu__list">
<div class="list__items" v-for="(vo,inx) in items" :key="inx" @click="goUrl(vo)">
<div>
<image :src="vo.icon" />
</div>
<div>
{{vo.title}}
</div>
</div>
</div>
</div>
</view>
</view>
</template>
<script>
export default {
data() {
return {
items: [{
icon: require("@/static/move-car/move-car6.png"),
url: "/pagesB/pages/move-car/oneMoveCar",
title: "扫一扫联系车主"
},
{
icon: require("@/static/move-car/move-car3.png"),
url: "/pagesB/pages/move-car/myCall",
title: "我的呼叫记录"
}, {
icon: require("@/static/move-car/move-car2.png"),
url: "/pagesB/pages/move-car/myMoveCar",
title: "我的挪车牌"
}, {
icon: require("@/static/move-car/move-car4.png"),
url: "/pagesB/pages/move-car/myRecord",
title: "我的挪车记录"
},
]
}
},
methods: {
goUrl(vo) {
const that = this
if (vo.title != "扫一扫联系车主") {
uni.navigateTo({
url: vo.url
})
} else {
//跳转绑定页面
// uni.navigateTo({
// url: vo.url
// })
//扫码
uni.scanCode({
success: function (res) {
let path = res.path
if (path) {
let xcxIndexPath = uni.getStorageSync('xcxIndexPath')
if (xcxIndexPath) {
xcxIndexPath = path.replace(xcxIndexPath, '').replace("?", '')
if (xcxIndexPath.indexOf('scene') >= 0) {
let scene = xcxIndexPath.replace('scene=', '')
let param = {
code: scene
}
let opts = {
url: '/app/index/check/move/code',
method: 'post'
}
that.http.httpTokenRequest(opts, param).then(res => {
console.info(res)
if (res.data.code == 200) {
if (res.data.data.bindFlag) {
that.gotoMoveCar(scene)
} else {
that.gotoBindMoveCar(scene)
}
}
})
}
}
} else {
uni.showToast({
title: '扫码失败',
icon: 'none',
})
}
}
});
}
},
//跳转到挪车页面
gotoMoveCar(s) {
let that = this;
uni.navigateTo({
url: '/pagesB/pages/move-car/oneMoveCar?scene=' + s
});
},
//跳转到绑定页面
gotoBindMoveCar(s) {
let that = this;
uni.navigateTo({
url: '/pagesB/pages/move-car/scan?moveCode=' + s
});
},
},
onReady: function () {
uni.setNavigationBarTitle({
title: '我要挪车'
});
}
};
</script>
<style lang="scss">
.moveCar {
.move_car__content {
padding: 40rpx;
.menu__top {
height: 220rpx;
background: #FFFFFF;
border: 1rpx solid #EFE7E7;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
margin-bottom: 30rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 45rpx 0;
>div {
width: 100%;
text-align: center;
}
>div:nth-of-type(1) {
image {
width: 58rpx;
height: 50rpx;
}
}
>div:nth-of-type(2) {
font-size: 40rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 42rpx;
}
}
.menu__list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.list__items {
width: 325rpx;
height: 220rpx;
background: #FFFFFF;
border: 1rpx solid #EFE7E7;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 45rpx 0;
margin-bottom: 30rpx;
>div {
width: 100%;
text-align: center;
}
>div:nth-of-type(1) {
image {
width: 58rpx;
height: 58rpx;
}
}
>div:nth-of-type(2) {
font-size: 40rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 42rpx;
}
}
.list__items:nth-of-type(2) {
>div:nth-of-type(1) {
image {
width: 55rpx;
height: 58rpx;
}
}
}
.list__items:nth-of-type(3) {
>div:nth-of-type(1) {
image {
width: 58rpx;
height: 58rpx;
}
}
}
.list__items:nth-of-type(4) {
>div:nth-of-type(1) {
image {
width: 54rpx;
height: 58rpx;
}
}
}
}
}
}
</style>
pages/personal.vue 0 → 100644
View file @ 8d7e2d89
<!--
* @Author: euzhi
* @Description: 个人中心
-->
<template>
<view class="appCotent">
<view class="content">
<view class="personal">
<div class="ps__bg">
<div class="ps__title"></div>
<div class="ps__info">
<div class="info__cover">
<image :src="avatar" />
</div>
<div>
<div class="info__name">{{userInfo.nickName}}</div>
<div class="view__info" @click="editInfo">
查看个人主页或编辑资料
<span>
<image src="@/static/my/my7.png">
</span>
</div>
</div>
</div>
<div class="ps__shop">
<div class="shop__tab">
<div class="tab__top">
<span>商品订单</span>
<div class="tab__all" @click="goOrder(0)">
<span>全部订单</span>
<span>
<image src="@/static/my/my5.png">
</span>
</div>
</div>
<div class="tab__bottom">
<div class="tab__item" v-for="(vo,inx) in items" :key="inx" @click="goOrder(inx+1)">
<image :src="vo.icon" />
<div>{{vo.title}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="ps__list">
<div class="list__item" v-for="(vo,inx) in menu" :key="inx" @click="goUrl(vo)">
<div class="list__left">
<image :src="vo.icon" alt="" srcset="">
{{vo.title}}
</div>
<div class="list__right">
<image src="@/static/my/my5.png" alt="" srcset="">
</div>
</div>
</div>
<div class="ps__btn" @click="loginOut">退出登录</div>
</view>
<u-gap bgColor="transparent" height="70"></u-gap>
</view>
</view>
</template>
<script>
export default {
data() {
return {
menu: [{
icon: require("@/static/my/my12.png"),
title: "我的地址",
url: "/pagesD/pages/personal/myAddress"
},
{
icon: require("@/static/my/my8.png"),
title: "使用帮助",
url: "/pagesD/pages/personal/help"
},
{
icon: require("@/static/my/my1.png"),
title: "常见问题",
url: "/pagesD/pages/personal/asking"
},
{
icon: require("@/static/my/my11.png"),
title: "问题反馈",
url: "/pagesD/pages/personal/ask"
},
{
icon: require("@/static/my/my15.png"),
title: "微信通知设置",
url: ""
},
],
items: [{
title: '待发货',
icon: require('@/static/my/my2.png'),
page: 0
},
{
title: '待收货',
icon: require('@/static/my/my3.png'),
page: 2
}, {
title: '已完成',
icon: require('@/static/my/my14.png'),
page: 3
}, {
title: '退款/售后',
icon: require('@/static/my/my9.png'),
page: 4
}
],
//用户信息
userInfo: {},
//头像
avatar: '',
}
},
methods: {
loginOut() {
let opts = {
url: '/logout',
method: 'post'
};
this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) {
uni.removeStorageSync('userToken')
uni.removeStorageSync('xcxIndexPath')
uni.navigateTo({
url: '/pages/binding/index'
});
}
})
},
goOrder(current) {
uni.navigateTo({
url: '/pagesD/pages/personal/myOrder?current=' + current
});
},
goUrl(vo) {
if (vo.title != '微信通知设置') {
uni.navigateTo({
url: vo.url
});
} else {
this.openMsg()
}
},
editInfo() {
uni.navigateTo({
url: '/pagesD/pages/personal/userInfo'
});
},
getUserInfo() {
let opts = {
url: '/app/user/info',
method: 'get'
};
this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) {
this.userInfo = res.data.data
this.avatar = this.http.baseUrl + this.userInfo.avatar
}
})
},
openMsg() {
var that = this;
let nc_templateid = that.nc_templateid;
// 获取用户的当前设置，判断是否点击了“总是保持以上，不在询问”
wx.getSetting({
withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
success(res) {
if (that.is_authorization) {
wx.openSetting({
withSubscriptions: true,
});
} else {
if (res.subscriptionsSetting[nc_templateid] == "reject") {
//用户点击了“总是保持以上，不再询问”
wx.showModal({
title: "温馨提示",
content: "检测到您没有开启订阅消息的权限，是否去设置？",
success: function (modal) {
if (modal.confirm) {
// 点击肯定
wx.openSetting({
withSubscriptions: true,
});
that.is_authorization = true;
uni.setStorageSync("is_authorization", true);
} else {
uni.showToast({
title: "您已拒绝订阅消息授权，无法接收通知",
icon: "error",
});
that.is_authorization = false;
}
},
});
} else {
// 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
// var templateid = that.setting.templateid.map(item => item.tempid)；
let tmpid = [nc_templateid];
uni.requestSubscribeMessage({
tmplIds: tmpid,
success(res) {
if (res[tmpid[0]] == "accept") {
uni.showToast({
title: "订阅成功",
icon: "none",
});
that.is_authorization = true;
uni.setStorageSync("is_authorization", true);
} else {
uni.showToast({
title: "您拒绝订阅消息授权，无法接收通知",
icon: "none",
});
that.is_authorization = false;
}
},
fail: (res) => {
wx.showModal({
title: "温馨提示",
content: "检测到您没有开启订阅消息的权限，是否去设置？",
success: function (modal) {
if (modal.confirm) {
// 点击肯定
wx.openSetting({
withSubscriptions: true,
});
that.is_authorization = true;
uni.setStorageSync("is_authorization", true);
} else {
uni.showToast({
title: "您已拒绝订阅消息授权，无法接收通知",
icon: "error",
});
that.is_authorization = false;
}
},
});
},
});
}
}
},
});
},
},
mounted() {
this.getUserInfo()
},
onReady: function () {
uni.setNavigationBarTitle({
title: '个人中心'
});
}
};
</script>
<style lang="scss" scoped>
.personal {
.ps__bg {
background: url('http://euzhi.com/my15.png') no-repeat;
background-size: cover;
z-index: 999;
.ps__title {
font-size: 40rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
text-align: center;
padding-top: 40rpx;
}
.ps__info {
padding: 65rpx 40rpx 30rpx 40rpx;
display: flex;
align-items: center;
position: relative;
.info__cover {
width: 130rpx;
height: 130rpx;
background: url('@/static/my/my10.png') no-repeat;
background-size: contain;
margin-right: 32rpx;
image {
width: 130rpx;
height: 130rpx;
border-radius: 50%;
}
}
.info__name {
font-size: 38rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
opacity: 0.96;
margin-bottom: 28rpx;
}
.view__info {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
opacity: 0.96;
display: flex;
align-items: center;
span {
position: absolute;
right: 40rpx;
image {
width: 16rpx;
height: 26rpx;
}
}
}
}
.ps__shop {
padding: 0 40rpx;
.shop__tab {
padding: 30rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
.tab__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
>span {
font-size: 34rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
.tab__all {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
image {
width: 11rpx;
height: 18rpx;
padding-left: 20rpx;
}
}
}
.tab__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20rpx;
.tab__item {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
width: 25%;
text-align: center;
image {
width: 60rpx;
height: 49rpx;
margin-bottom: 10rpx;
}
}
}
}
}
}
.ps__list {
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
margin-top: 20rpx;
.list__item {
position: relative;
padding: 26rpx 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
.list__left {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
display: flex;
align-items: center;
image {
width: 27rpx;
height: 33rpx;
margin-right: 34rpx;
}
}
.list__right {
image {
width: 11rpx;
height: 18rpx;
}
}
}
.list__item::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 650rpx;
height: 1rpx;
background: rgba(0, 0, 0, .1);
}
.list__item:nth-of-type(2) {
.list__left {
image {
width: 29rpx;
height: 25rpx;
margin-right: 32rpx;
}
}
}
.list__item:nth-of-type(3) {
.list__left {
image {
width: 28rpx;
height: 28rpx;
margin-right: 33rpx;
}
}
}
.list__item:nth-of-type(4) {
.list__left {
image {
width: 28rpx;
height: 28rpx;
margin-right: 33rpx;
}
}
}
.list__item:nth-last-of-type(1)::before {
content: '';
background: transparent
}
}
.ps__btn {
margin-top: 20rpx;
width: 100%;
height: 100rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
text-align: center;
line-height: 100rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
}
</style>
pages/shop.vue 0 → 100644
View file @ 8d7e2d89
<template>
<view class="appCotent">
<view>
<view class="shop">
<div class="my__search" @click='goSearch'>
<u-search placeholder="搜搜你最想知道的" :showAction='false' bgColor='#ffffff' v-model="keyword"></u-search>
</div>
<div class="shop__swiper">
<view class="u-demo-block">
<u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="false" height='150' radius="5" bgColor="#ffffff"></u-swiper>
</view>
</div>
<div class="view__content">
<div class="view__title">超低价养车好物</div>
<div class="shop__list2">
<div class="shop__item2" v-for="(vo,inx) in mallList" :key="inx" @click="goDetail(vo.id)">
<div class="item2__img">
<image :src="getImage(vo.mainImgUrl)" />
</div>
<div class="item2__title">{{vo.title}}</div>
<div class="item2__price">￥{{vo.currentPrice/100}}</div>
</div>
</div>
</div>
<div class="shop__list__one">
<div class="view__title">车主精选 养车必备</div>
<scroll-list ref="list" :option="option" @load="load">
<div class="list__one__items">
<div class="one__item" v-for="(vo,inx) in boutiqueMallList" :key="inx" @click="goDetail(vo.id)">
<div class="one__item__img">
<image :src="getImage(vo.mainImgUrl)" />
</div>
<div class="one__item__title">
{{vo.title}}
</div>
<div class="one__item__price">
￥{{vo.currentPrice/100}}<span class="num__two">￥{{vo.originalPrice/100}}</span>
</div>
</div>
</div>
</scroll-list>
</div>
</view>
<u-gap bgColor="transparent" height="60"></u-gap>
</view>
</view>
</template>
<script>
export default {
data() {
return {
option: {
size: 10,
auto: true
},
keyword: '',
list3: [
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
],
//普通商品列表
mallList: [],
//精品商品
boutiqueMallList: [],
}
},
methods: {
// 加载数据
load(paging) {
setTimeout(() => {
let opts = {
url: '/app/mall/list?pageSize=' + paging.size + '&pageNum=' + paging.page,
method: 'get'
};
this.http.httpTokenRequest(opts, {
classification: "2"
}).then(res => {
if (res.data.code == 200) {
let list = res.data.data.rows
this.boutiqueMallList = [...this.boutiqueMallList, ...list];
// 加载成功 参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
this.$refs.list.loadSuccess({
list: this.boutiqueMallList,
total: res.data.data.total
});
// 加载失败
// this.$refs.list.loadFail()
}
})
}, this.$u.random(100, 1000));
},
goSearch() {
uni.navigateTo({
url: '/pagesC/pages/shop/search'
})
},
goDetail(id) {
uni.navigateTo({
url: '/pagesC/pages/shop/detail?id=' + id
})
},
getMallList() {
let opts = {
url: '/app/mall/list',
method: 'get'
};
this.http.httpTokenRequest(opts, {
classification: "1"
}).then(res => {
if (res.data.code == 200) {
this.mallList = res.data.data.rows
}
})
},
getBoutiqueMallList() {
let opts = {
url: '/app/mall/list',
method: 'get'
};
this.http.httpTokenRequest(opts, {
classification: "2"
}).then(res => {
if (res.data.code == 200) {
this.boutiqueMallList = res.data.data.rows
}
})
},
getImage(imageUrl) {
return imageUrl;
},
getRotationList() {
let opts = {
url: '/app/index/carouse/2',
method: 'get'
};
this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) {
let data = []
data = res.data.data
let imgList = []
data.forEach(e => {
imgList.push(e.imageUrl)
})
this.list3 = imgList
}
})
},
},
onReady: function () {
uni.setNavigationBarTitle({
title: '精选商城'
});
},
mounted() {
this.getMallList()
this.getRotationList()
//this.getBoutiqueMallList()
}
};
</script>
<style lang="scss" scoped>
.shop {
height: 100%;
.shop__list__one {
padding: 0 30rpx;
background: #f9f9f9;
.list__one__items {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
.one__item {
width: 48%;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
margin-bottom: 30rpx;
.one__item__img {
width: 100%;
height: 320rpx;
background: #FFD4D4;
border-radius: 20rpx;
image {
width: 100%;
height: 100%;
border-radius: 20rpx;
}
}
.one__item__title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
margin: 20rpx 0;
text-indent: 20rpx;
margin-bottom: 10rpx;
}
.one__item__price {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #E1251B;
text-indent: 20rpx;
padding-bottom: 20rpx;
span {
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
}
}
}
}
}
.my__search {
padding: 30rpx;
}
.view__title {
font-size: 38rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
position: relative;
z-index: 999;
margin-bottom: 30rpx;
}
.view__title::before {
content: "";
width: 76rpx;
height: 14rpx;
display: inline-block;
background: url('@/static/move-car/love-car1.png') no-repeat;
background-size: contain;
position: absolute;
bottom: 7rpx;
z-index: -1;
}
.shop__swiper {
margin-bottom: 30rpx;
}
.view__content {
padding: 40rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
margin-bottom: 40rpx;
.shop__list2 {
display: flex;
align-items: center;
justify-content: space-between;
.shop__item2 {
width: 25%;
.item2__img {
margin-bottom: 20rpx;
text-align: center;
width: 145rpx;
height: 145rpx;
image {
width: 145rpx;
height: 145rpx;
}
}
.item2__title {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 42rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.item2__price {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #E1251B;
line-height: 42rpx;
}
}
}
}
}
</style>
pagesA/pages/index/index.vue
View file @ 8d7e2d89
<template>
<view class="appCotent">
<view class="index-content">
<custom-tarbar :selected="0"></custom-tarbar>
<u-swiper :radius="0" :height="210" :list="list5" circular :autoplay="false">
<view slot="indicator" class="indicator">
<view class="indicator__dot" v-for="(item, index) in list5" :key="index" :class="[index === current && 'indicator__dot--active']">
......@@ -56,11 +55,7 @@
</template>
<script>
import customTarbar from "@/common/wxcomponents/custom-tarbar/custom-tarbar.vue";
export default {
components: {
"custom-tarbar": customTarbar,
},
data() {
return {
current: 0,
......
pagesA/pages/index/main.vue 0 → 100644
View file @ 8d7e2d89
<template>
<view class="main_content">
<index v-if="tab=='index'"></index>
<moveCar v-if="tab=='moveCar'"></moveCar>
<shop v-if="tab=='shop'"></shop>
<personal v-if="tab=='personal'"></personal>
<view class="tabbar">
<v-tabbar :list="tabbar" style="position:fixed;bottom:0;width:100%;left:0;right:0;" @tabChange="tabChange"></v-tabbar>
</view>
</view>
</template>
<script>
import {
mapState
} from 'vuex';
import tabbar from '@/common/hans-tabbar/hans-tabbar'
import index from './index'
import moveCar from '../../../pagesB/pages/move-car/index.vue'
import shop from '../../../pagesC/pages/shop/index.vue'
import personal from '../../../pagesD/pages/personal/index.vue'
export default {
components: {
index,
moveCar,
personal,
shop,
'v-tabbar': tabbar
},
data() {
return {
tab: "shop",
}
},
computed: {
...mapState({
tabbarTextColor: "tabbarTextColor",
tabbarTextActiveColor: "tabbarTextActiveColor",
tabbar: "tabbar"
})
},
onShow: function () {},
methods: {
tabChange(index) {
console.log(index);
switch (index) {
case 0:
this.tab = 'index'
break;
case 1:
this.tab = 'moveCar'
break;
case 2:
this.tab = 'moveCar'
break;
case 3:
this.tab = 'shop'
break;
}
},
},
onLoad() {}
}
</script>
<style lang="scss" scoped>
.main_content {
height: 100%;
overflow: hidden;
}
</style>
pagesB/pages/move-car/index.vue
View file @ 8d7e2d89
<template>
<view class="appCotent">
<view class="moveCar">
<custom-tarbar :selected="1"></custom-tarbar>
<div class="move_car__content">
<div class="menu__top" @click="goUrl({
......@@ -32,11 +31,7 @@ url: '/pagesB/pages/move-car/loveCar',
</template>
<script>
import customTarbar from '@/common/wxcomponents/custom-tarbar/custom-tarbar.vue';
export default {
components: {
'custom-tarbar': customTarbar
},
data() {
return {
items: [{
......@@ -62,7 +57,7 @@ export default {
},
methods: {
goUrl(vo) {
const that = this
const that = this
if (vo.title != "扫一扫联系车主") {
uni.navigateTo({
url: vo.url
......@@ -73,53 +68,58 @@ export default {
// url: vo.url
// })
//扫码
uni.scanCode({
success: function (res) {
let path = res.path
if(path) {
let xcxIndexPath = uni.getStorageSync('xcxIndexPath')
if(xcxIndexPath) {
xcxIndexPath = path.replace(xcxIndexPath, '').replace("?", '')
if(xcxIndexPath.indexOf('scene') >= 0 ) {
let scene = xcxIndexPath.replace('scene=', '')
let param = {code : scene}
let opts = { url: '/app/index/check/move/code', method: 'post' }
that.http.httpTokenRequest(opts, param).then(res => {
console.info(res)
if (res.data.code == 200) {
if(res.data.data.bindFlag) {
that.gotoMoveCar(scene)
} else {
that.gotoBindMoveCar(scene)
uni.scanCode({
success: function (res) {
let path = res.path
if (path) {
let xcxIndexPath = uni.getStorageSync('xcxIndexPath')
if (xcxIndexPath) {
xcxIndexPath = path.replace(xcxIndexPath, '').replace("?", '')
if (xcxIndexPath.indexOf('scene') >= 0) {
let scene = xcxIndexPath.replace('scene=', '')
let param = {
code: scene
}
let opts = {
url: '/app/index/check/move/code',
method: 'post'
}
that.http.httpTokenRequest(opts, param).then(res => {
console.info(res)
if (res.data.code == 200) {
if (res.data.data.bindFlag) {
that.gotoMoveCar(scene)
} else {
that.gotoBindMoveCar(scene)
}
}
})
}
}
}
})
}
} else {
uni.showToast({
title: '扫码失败',
icon: 'none',
})
}
}
} else {
uni.showToast({
title:'扫码失败',
icon:'none',
})
}
}
});
});
}
},
//跳转到挪车页面
gotoMoveCar(s) {
let that = this;
uni.navigateTo({
url: '/pagesB/pages/move-car/oneMoveCar?scene=' + s
});
let that = this;
uni.navigateTo({
url: '/pagesB/pages/move-car/oneMoveCar?scene=' + s
});
},
//跳转到绑定页面
gotoBindMoveCar(s) {
let that = this;
uni.navigateTo({
url: '/pagesB/pages/move-car/scan?moveCode=' + s
});
let that = this;
uni.navigateTo({
url: '/pagesB/pages/move-car/scan?moveCode=' + s
});
},
},
......
pagesC/pages/shop/index.vue
View file @ 8d7e2d89
<template>
<view class="appCotent">
<view>
<custom-tarbar :selected="3"></custom-tarbar>
<view class="shop">
<div class="my__search" @click='goSearch'>
<u-search placeholder="搜搜你最想知道的" :showAction='false' bgColor='#ffffff' v-model="keyword"></u-search>
......@@ -51,11 +50,7 @@
</template>
<script>
import customTarbar from '@/common/wxcomponents/custom-tarbar/custom-tarbar.vue';
export default {
components: {
'custom-tarbar': customTarbar
},
data() {
return {
option: {
......
pagesC/pages/shop/payOk.vue
View file @ 8d7e2d89
......@@ -33,7 +33,7 @@ export default {
},
goGhome() {
uni.navigateTo({
url: '/pagesC/pages/shop/index'
url: '/pages/main'
})
}
},
......
pagesD/pages/personal/index.vue
View file @ 8d7e2d89
......@@ -5,7 +5,6 @@
<template>
<view class="appCotent">
<view class="content">
<custom-tarbar :selected="4"></custom-tarbar>
<view class="personal">
<div class="ps__bg">
<div class="ps__title"></div>
......@@ -62,11 +61,7 @@
</template>
<script>
import customTarbar from '@/common/wxcomponents/custom-tarbar/custom-tarbar.vue';
export default {
components: {
'custom-tarbar': customTarbar
},
data() {
return {
menu: [{
......
store/index.js
View file @ 8d7e2d89
......@@ -6,6 +6,55 @@ const store = new Vuex.Store({
state: {
token: "",
selectedCar: {},
tabbar: [
// {
// text: "首页",
// iconPath: require("@/static/image/home.png"),
// selectedIconPath: require("@/static/image/home2.png"),
// },
// {
// text: "我的",
// iconPath: require("@/static/image/user1.png"),
// selectedIconPath: require("@/static/image/user.png"),
// },
{
pagePath: '/pagesA/pages/index/index',
iconPath: '/static/tarbar/index22.png',
selectedIconPath: '/static/tarbar/index5.png',
text: '首页'
},
{
pagePath: '/pagesB/pages/move-car/index',
iconPath: '/static/tarbar/index17.png',
selectedIconPath: '/static/tarbar/index24.png',
text: '我要挪车'
},
{
pagePath: '/pagesC/pages/releaseBtn/releaseBtn',
iconPath: '',
selectedIconPath: '/static/tarbar/index31.png'
},
{
pagePath: '/pagesC/pages/shop/index',
iconPath: '/static/tarbar/index2.png',
selectedIconPath: '/static/tarbar/index21.png',
text: '精选商城'
},
{
pagePath: '/pagesD/pages/personal/index',
iconPath: '/static/tarbar/index11.png',
selectedIconPath: '/static/tarbar/index23.png',
text: '我的'
},
],
tabbarTextColor: "rgba(102, 102, 102, 1)",
tabbarTextActiveColor: "rgba(225, 37, 27, 1)",
},
mutations: {
SET_TABBAR(state, tabbar) {
state.tabbar = tabbar || [];
},
},
actions: {},
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment