建材商城系统20241014
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

284 lines
5.6 KiB

<template>
<view class="page">
<navbar bgColor="#DC2828"/>
<view class="head">
<view class="headImage">
<image :src="headImage" mode=""></image>
</view>
<view class="info">
<view class="name">
倾心.
<view>
<uv-icon name="edit-pen" size="40rpx" color="#fff"></uv-icon>
修改资料
</view>
</view>
<view class="tips">
手机号1300000000
</view>
</view>
</view>
<view class="user">
<view class="swipe">
<uv-swiper
:list="bannerList"
indicator
height="220rpx"
keyName="url"></uv-swiper>
</view>
<view class="line grid">
<view class="title">
我的服务
</view>
<uv-grid :col="4" :border="false">
<uv-grid-item @click="$utils.navigateTo('/index/order')">
<image class="image" src="/static/image/center/1.png" mode=""></image>
<text class="grid-text">我的订单</text>
</uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/GainPoints')">
<image class="image" src="/static/image/center/4.png" mode=""></image>
<text class="grid-text">我的团队</text>
</uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/IntegralRecord')">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">联系客服</text>
</uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+1)">
<image class="image" src="/static/image/center/6.png" mode=""></image>
<text class="grid-text">快捷订单</text>
</uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/address')">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">邀请好友</text>
</uv-grid-item>
<uv-grid-item @click="$utils.redirectTo('/index/consult')">
<image class="image" src="/static/image/center/6.png" mode=""></image>
<text class="grid-text">系统设置</text>
</uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/contract')">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">帮助与反馈</text>
</uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/promotion?index='+1)">
<image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">关于本程序</text>
</uv-grid-item>
</uv-grid>
</view>
</view>
<tabber select="2" />
</view>
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
import {
mapState
} from 'vuex'
export default {
components: {
tabber,
},
computed: {
...mapState(['userInfo']),
headImage(){
return '/static/image/center/headImage.png'
},
username(){
},
},
data() {
return {
show: false,
bannerList: [
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
},
],
}
},
methods: {
headBtn() {
let self = this
uni.showModal({
title: '演示切换角色之后的效果',
success(res) {
if (res.confirm) {
self.$store.state.shop = !self.$store.state.shop
}
}
})
},
// 联系客服按钮回调
contactUs() {
this.show = true
},
confirm() {
this.show = false
},
cancle() {
this.show = false
},
}
}
</script>
<style scoped lang="scss">
.page {
}
image {
width: 100%;
height: 100%;
}
.head {
display: flex;
background-color: $uni-color;
padding: 40rpx 20rpx;
align-items: center;
position: relative;
color: #fff;
padding-bottom: 70rpx;
.headImage {
width: 120rpx;
height: 120rpx;
// background-image: url(/static/image/center/3.png);
background-size: 100% 100%;
overflow: hidden;
border-radius: 50%;
margin-right: 40rpx;
}
.info {
font-size: 28rpx;
.name {
font-size: 32rpx;
display: flex;
padding-bottom: 10rpx;
view{
display: flex;
font-size: 20rpx;
align-items: center;
padding-left: 20rpx;
}
}
.tips {
font-size: 26rpx;
color: #fff;
}
}
// .headBtn {
// margin-left: auto;
// padding: 15rpx 20rpx;
// background-color: $uni-color;
// color: #fff;
// border-radius: 20rpx;
// margin-top: 50rpx;
// }
// .setting {
// position: absolute;
// right: 50rpx;
// top: 50rpx;
// }
}
.user {
position: relative;
padding-top: 30rpx;
.auth{
width: 690rpx;
position: absolute;
top: -50rpx;
left: 30rpx;
z-index: 99;
overflow: hidden;
background-color: #fff;
border-radius: 20rpx;
/deep/ text{
font-size: 26rpx;
}
}
.swipe{
margin: 30rpx;
border-radius: 20rpx;
overflow: hidden;
}
.line {
display: flex;
background-color: #fff;
margin-top: 20rpx;
padding: 20rpx 0;
margin: 30rpx;
border-radius: 20rpx;
overflow: hidden;
.item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 24rpx;
padding: 10rpx 0;
view{
padding: 5rpx 0;
}
}
}
.grid {
flex-direction: column;
font-size: 26rpx;
padding: 20rpx;
.title {
margin-bottom: 30rpx;
font-size: 28rpx;
}
.image {
width: 45rpx;
height: 45rpx;
margin-bottom: 10rpx;
}
text {
text-align: center;
margin-bottom: 20rpx;
}
}
}
</style>