chenkainan
/
flavorOfTimeSz
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

个人中心改版

master
jiazhipeng 1 week ago
parent
5b642210e5
commit
76df918a8a
3 changed files with 259 additions and 246 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 48
      pages/login/login.vue
  2. 382
      pages/user/user.vue
  3. 3
      static/js/CommonFunction.js

48
pages/login/login.vue
View File

@ -1,20 +1,21 @@
<template>
<view style="padding-top: 88rpx;">
<view style="padding: 113rpx 58rpx 0;">
<view class="login-tip">时味苏州 申请获得</view>
<view class="login-tip2">以下权限</view>
<view class="login-tip-box">
<text>获得你的公开信息（昵称、头像、地区及性别）</text>
</view>
<view class="btn-box">
<button bindtap="cancel" type="default" @click="redirectIndex">取消</button>
<button type="primary" @click="getUserInfo">同意</button>
</view>
<view class="flex-center article-box">
<view class="article-box">
<radio-group @change="toggleAgreement">
<radio value="1" :checked="isAgreed" style="transform:scale(0.7)"></radio>
</radio-group>
<view>同意<text @click="gotoInfo(9)">《用户服务协议》、</text><text @click="gotoInfo(12)">《隐私政策》</text></view>
</view>
<view class="btn-box">
<button bindtap="cancel" type="default" @click="redirectIndex">取消</button>
<button type="primary" @click="getUserInfo">同意</button>
</view>
<uni-popup ref="popup" type="bottom" background-color="#fff">
<button type="default" open-type="getPhoneNumber" @getphonenumber="handlePhoneNumber" style="width: 100%;height: 12vh;line-height: 12vh;">点击授权手机号</button>
</uni-popup>
@ -158,25 +159,25 @@ export default {
<style>
.login-tip {
font-size: 28rpx;
margin: 0 60rpx;
margin-top: 40rpx;
font-weight: 400;
font-size: 29rpx;
color: #020202;
}
.login-tip2 {
font-size: 44rpx;
margin: 0rpx 60rpx;
margin-top: 20rpx;
font-weight: 400;
font-size: 48rpx;
color: #000000;
}
.login-tip-box {
display: flex;
align-items: flex-start;
margin: 0 60rpx;
font-size: 28rpx;
font-weight: 400;
font-size: 29rpx;
color: #000000;
margin-top: 40rpx;
line-height: 40rpx;
}
.login-tip-box .icon-gou1 {
@ -190,22 +191,21 @@ export default {
display: flex;
position: absolute;
bottom: 100rpx;
left: 0;
right: 0;
left: 22rpx;
right: 22rpx;
}
.btn-box button {
width: 400rpx;
width: 347rpx;
}
.article-box {
position: absolute;
left: 0;
right: 0;
justify-content: center;
font-size: 24rpx;
color: #1aad19;
bottom: 40rpx;
font-weight: 400;
font-size: 27rpx;
color: #00B200;
margin-top: 30rpx;
display: flex;
align-items: center;
}
.article-box .iconfont {

382
pages/user/user.vue
View File

@ -1,20 +1,30 @@
<template>
<view class="bg bg-padding">
<view class="topBox flex-between" @click="gotoProfile">
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/user/topIcon.png" class="topIcon"></image>
<image class="top-image" src="https://static.ticket.sz-trip.com/uploads/20251011/50e0ae7f09f23c278cab8472b6e99c07.png"></image>
<view class="flex-center" style="position: relative;">
<view class="avatar-box">
<view class="main-content">
<view class="topBox" >
<view class="avatar-box" @click="gotoProfile">
<image :src="showImg(userInfo.avatar)" mode="aspectFill" class="headImg" v-if="userInfo.avatar"></image>
<image src="https://static.ticket.sz-trip.com/yandu/images/user/grxx.png" mode="aspectFill"
class="headImg" v-else></image>
<view class="username w-full" style="display: flex;align-items: center;" v-if="userInfo.nickname">
<view class="text-overflow" style="max-width: 300rpx;padding-right: 12rpx;">{{userInfo.nickname}}</view>
<image class="flex-shrink-0" style="width: 24rpx;height: 24rpx;" src="https://static.ticket.sz-trip.com/uploads/20251011/5b8d4b5d6e0aefe9deddbc4ca8799264.png"></image>
</view>
<view class="username" v-if="userInfo.nickname">{{userInfo.nickname}}</view>
<view class="username" v-else>请登录/注册 ></view>
</view>
<view class="top-right" v-if="userInfo.nickname">
个人信息 <image src="https://static.ticket.sz-trip.com/tongli/images/user/rightIcon1.png" mode=""></image>
<view class="flex-column-center">
<view class="title">优惠券</view>
<view class="num">7</view>
</view>
<view style="height: 35rpx;width: 2rpx;background:#E3E3E3;"></view>
<view class="flex-column-center">
<view class="title">积分</view>
<view class="num">0</view>
</view>
</view>
<view class="orderBox">
@ -22,11 +32,11 @@
我的订单
<span class="flex-between">
全部订单
<image src="https://static.ticket.sz-trip.com/tongli/images/user/rightIcon1.png" mode=""></image>
<image src="https://static.ticket.sz-trip.com/uploads/20251011/b0d85d510903fdd7f18c29b4ba375bf6.png" mode=""></image>
</span>
</navigator>
<view class="flex-around" style="margin-top: 20rpx;flex-wrap: wrap;justify-content: flex-start;">
<view style="margin-top: 30rpx;display: flex;flex-wrap: wrap;">
<view class="orderItem" v-for="(item,index) in orderList" :key="index" @click="goTrades(item)">
<img :src="item.src" alt="">
<view>{{item.title}}</view>
@ -49,36 +59,28 @@
</swiper> -->
</view>
<view class="cygj">
<view v-for="(item,index) in cyList" :key="index"
@click="gotoUrl(item,index)" v-if="item.isShow">
<!-- <button id="contact" class="cyItem flex-between" open-type="contact" bindcontact="handleContact" session-from="sessionFrom" v-if="index == 2">
<view class="flex-center">
<img src="https://static.ticket.sz-trip.com/shiweisuzhou/images/user/lxkf.png" class="headIcon">
联系我们
</view>
<img src="https://static.ticket.sz-trip.com/dongtai/images/user/rightIcon-gray.png" class="rightIcon">
</button> -->
<view class="cyItem flex-between">
<view class="flex-center">
<view class="moreBox">我的服务</view>
<view style="display:flex;align-items:center;flex-wrap:wrap">
<view :class="['cyItem',item.customClass]" v-for="(item,index) in cyList.filter(x=>x.isShow)" :key="index"
@click="gotoUrl(item,index)">
<img :src="item.src" class="headIcon">
{{item.title}}
<view>{{item.title}}</view>
</view>
<img src="https://static.ticket.sz-trip.com/yandu/images/user/rightIcon-gray.png" class="rightIcon">
</view>
</view>
</view>
<!-- 旅游咨询弹框 -->
<!-- 图片 -->
<uni-popup ref="popup" type="center">
<view class="consult-popup">
即将拨打客服电话
<view class="consult-subtitle">服务时间：周一至周五<br>8:30-11:30，14:30-18:00</view>
<view class="consult-btns">
<view @click="$refs.popup.close()">取消</view>
<view @click="clickPhone('0515-69186109')">确定</view>
</view>
</view>
<image class="consult-popup" :src="showImg" :show-menu-by-longpress="true"></image>
</uni-popup>
<uni-popup ref="kfpopup" type="bottom" :safe-area="false">
@ -138,76 +140,100 @@
nowDateTime: '', //当前时间秒数
userInfo: {},
orderList: [{
src: 'https://static.ticket.sz-trip.com/shiweisuzhou/images/user/dfki.png',
src: 'https://static.ticket.sz-trip.com/uploads/20251011/785234bf4df1fac233ee020627cdc262.png',
title: '待付款',
status: 'WAIT_PAYMENT'
},
{
src: 'https://static.ticket.sz-trip.com/shiweisuzhou/images/user/dfh.png',
src: 'https://static.ticket.sz-trip.com/uploads/20251011/806d65eb846e60a98352ba09d8660ce7.png',
title: '待发货',
status: 'WAIT_POST'
},
{
src: 'https://static.ticket.sz-trip.com/shiweisuzhou/images/user/dcx.png',
src: 'https://static.ticket.sz-trip.com/uploads/20251011/f3ea0d6a80ae0e10be1b974ad10955fb.png',
title: '待使用/出行',
status: 'WAIT_USE'
},
{
src: 'https://static.ticket.sz-trip.com/shiweisuzhou/images/user/dsh.png',
src: 'https://static.ticket.sz-trip.com/uploads/20251011/4c0812afada05c7005c213a9f012955e.png',
title: '待收货',
status: 'WAIT_DELIVERY'
},
{
src: 'https://static.ticket.sz-trip.com/shiweisuzhou/images/user/tksh.png',
src: 'https://static.ticket.sz-trip.com/uploads/20251011/7a0bc28efe4ef85d3c2ed98277afcd00.png',
title: '退款/售后',
status: 'NEED_REFUND'
},
],
cyList: [
{
src: 'https://static.ticket.sz-trip.com/shiweisuzhou/images/user/yhq.png',
src: 'https://static.ticket.sz-trip.com/uploads/20251011/aa4ad71297f5b96b0f14696143a38ea1.png',
title: '优惠券',
path: '/subPackages/user/coupon',
isShow: true
},
{
src: 'https://static.ticket.sz-trip.com/shiweisuzhou/images/user/cxr.png',
src: 'https://static.ticket.sz-trip.com/uploads/20251011/19fff40782bc7d9a9c78ed5c394dc030.png',
title: '出行人',
path: '/subPackages/user/travelerList?showType=0',
isShow: true
},
{
src: 'https://static.ticket.sz-trip.com/shiweisuzhou/images/user/lxkf.png',
title: '联系我们',
path: '',
isShow: true
},
{
src: 'https://static.ticket.sz-trip.com/shiweisuzhou/images/user/shdz.png',
src: 'https://static.ticket.sz-trip.com/uploads/20251011/c9c81700bc66a8d4dc26757aa6737dfa.png',
title: '收货地址',
path: '/subPackages/user/travelerList?showType=1',
isShow: true
},
{
src: 'https://static.ticket.sz-trip.com/shiweisuzhou/images/user/shhx.png',
src: 'https://static.ticket.sz-trip.com/uploads/20251011/c7e34c9011fc80966520b2c06a4faaf5.png',
title: '商户核销',
path: '',
isShow: true,
webUrl: "https://supplier-h5.sutenong.com",
},
{
src: 'https://static.ticket.sz-trip.com/shiweisuzhou/images/user/yhxy.png',
src: 'https://static.ticket.sz-trip.com/uploads/20251011/5d884b6d3abf2d38fdffa928795184a7.png',
title: '积分商城',
path: '',
isShow: true,
},
{
src: 'https://static.ticket.sz-trip.com/uploads/20251011/8020e99149c493a838c2b136560509ec.png',
title: '联系客服',
path: '',
isShow: true,
isKeFU: true,
},
{
src: 'https://static.ticket.sz-trip.com/uploads/20251011/bcd540021d5ee3bc4051b9116299c9df.png',
title: '公众号',
path: '',
isShow: true,
GZHImg: "https://static.ticket.sz-trip.com/uploads/20251011/40183cb1d655217642c34da3baea4e28.jpg"
},
{
src: 'https://static.ticket.sz-trip.com/uploads/20251011/a1c19ffa332ff9a5de9fcc983874baea.png',
title: '进群抽奖',
path: '',
isShow: true,
customClass: "prize",
},
{
src: 'https://static.ticket.sz-trip.com/uploads/20251011/c6c29ace07206eec5418fb51068fa4ca.png',
title: '用户协议',
path: '/subPackages/user/privacyInfo?id=9',
isShow: true
},
{
src: 'https://static.ticket.sz-trip.com/shiweisuzhou/images/user/yszc.png',
src: 'https://static.ticket.sz-trip.com/uploads/20251011/b22eac8abd4639fa166195f91c78c6e6.png',
title: '隐私管理',
path: '/subPackages/user/privacyInfo?id=12',
isShow: true
}
],
showImg: "",
}
},
onShow() {
@ -340,19 +366,30 @@
// this.$refs.popup.open('center')
// },
gotoUrl(item, index) {
if (index == 2) {
this.$refs.kfpopup.open()
return;
}
if (index == 4) {
if (item.path) {
uni.navigateTo({
url:'/subPackages/webPage/webPage?url='+item.webUrl
url: item.path
})
return
}
if (item.webUrl) {
uni.navigateTo({
url: item.path
url:'/subPackages/webPage/webPage?url='+item.webUrl
})
return
}
if (item.isKeFU) {
this.$refs.kfpopup.open()
return;
}
if (item.GZHImg) {
this.showImg = item.GZHImg;
this.$refs.popup.open()
return
}
this.qidai()
},
qidai() {
uni.showToast({
@ -401,44 +438,75 @@
.bg {
min-height: 100vh;
overflow-x: hidden;
background-color: rgba(237, 245, 220, 1);
}
.top-image{
width: 100%;
height: 453.43rpx;
display: block;
}
.main-content{
width: 750rpx;
background: linear-gradient( 180deg, #FFFFFF 0%, #F1F2F4 100%);
border-radius: 43rpx 43rpx 0rpx 0rpx;
position: relative;
margin-top: -50rpx;
padding: 38rpx 27rpx;
}
.topBox {
width: 750rpx;
height: 538rpx;
width: 100%;
box-sizing: border-box;
display: flex;
background-image: url('https://static.ticket.sz-trip.com/shiweisuzhou/images/user/topBg.png');
background-size: 100% 100%;
padding: 0rpx 40rpx 65rpx 28rpx;
align-items: center;
position: relative;
.topIcon {
width: 734.67rpx;
height: 538rpx;
position: absolute;
top: 0;
right: 0;
}
overflow: visible;
.avatar-box {
width: 120rpx;
height: 120rpx;
height: 80rpx;
position: relative;
display: flex;
flex-direction: column;
width: 100rpx;
flex: 1;
margin-left: 28rpx;
padding-top: 30rpx;
.headImg{
width: 133rpx;
height: 133rpx;
border: 4rpx solid #FFFFFF;
border-radius: 50%;
overflow: hidden;
background: #FFFFFF;
flex-shrink: 0;
position: absolute;
left: 0;
top: -115rpx;
}
.headImg {
width: 100%;
height: 100%;
}
.flex-column-center{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 80rpx;
flex-shrink: 0;
min-width: 150rpx;
.title{
font-weight: 400;
font-size: 24rpx;
color: #535355;
}
.num{
font-family: DIN Condensed, DIN Condensed;
font-weight: bold;
font-size: 37rpx;
color: #6A8C29;
}
}
.username {
margin-left: 20rpx;
font-size: 40rpx;
color: #000000;
font-weight: 500;
font-size: 32rpx;
color: #1C1C1C;
}
.top-right {
@ -456,48 +524,46 @@
.orderBox {
width: 697rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 23rpx 0rpx rgba(80, 80, 80, 0.12);
border-radius: 13rpx;
margin: -185rpx auto 0;
padding-bottom: 30.6rpx;
margin: 30rpx auto 0;
background: #F9FFF4;
border-radius: 21rpx 21rpx 21rpx 21rpx;
border: 1rpx solid #DAF7A2;
position: relative;
padding: 26rpx 0;
.moreBox {
height: 84rpx;
padding:0 29rpx;
margin: auto;
font-size: 31rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
padding: 0 13rpx 0 26rpx;
span {
font-weight: 500;
font-size: 25rpx;
color: #100E0E;
font-size: 32rpx;
color: #1C1C1C;
align-items: baseline;
span {
font-weight: 400;
font-size: 24rpx;
color: #8D8D8D;
box-sizing: border-box;
image {
width: 11.33rpx;
width: 20rpx;
height: 20rpx;
margin-left: 18rpx;
margin-left: 8rpx;
}
}
}
.orderItem {
font-weight: 400;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #111111;
color: #535355;
width: 20%;
text-align: center;
img {
width: 62rpx;
height: 62rpx;
margin-bottom: 20rpx;
width: 48rpx;
height: 48rpx;
margin-bottom: 12rpx;
}
}
.orderItem:nth-child(n+6) {
@ -505,70 +571,44 @@
}
}
.lxwm {
width: 696rpx;
height: 447rpx;
background: #FFFFFF;
box-shadow: 0px 4rpx 12rpx 0px rgba(150, 149, 149, 0.3);
border-radius: 20rpx;
margin: auto;
padding: 27rpx 19rpx 0 19rpx;
font-size: 31rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
.midBox {
padding: 26rpx 43rpx 21rpx 44rpx;
box-sizing: border-box;
img {
width: 265rpx;
height: 252rpx;
border-radius: 15rpx;
}
}
.botBox {
padding: 0 30rpx 0 51rpx;
font-size: 27rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
}
}
.cygj {
width: 697rpx;
background: #FFFFFF;
border-radius: 20rpx;
margin: 30rpx auto 0;
padding: 0 27rpx;
font-size: 28rpx;
font-family: PingFang SC;
border-radius: 21rpx 21rpx 21rpx 21rpx;
margin: 20rpx auto 0;
padding: 27rpx 0;
font-weight: 500;
color: #000000;
font-size: 32rpx;
color: #1C1C1C;
.moreBox{
padding:0 29rpx;
font-weight: 500;
font-size: 32rpx;
color: #1C1C1C;
margin-bottom: 28rpx;
}
.cyItem {
height: 106rpx;
width:25%;
display: flex;
align-items: center;
border-bottom: 1rpx solid #D8D8D8;
flex-direction:column;
font-weight: 400;
font-size: 24rpx;
color: #535355;
margin-bottom:28rpx;
.headIcon {
width: 42rpx;
height: 42rpx;
margin-right: 15rpx;
width: 48rpx;
height: 48rpx;
margin-bottom:10rpx;
}
.rightIcon {
width: 20rpx;
height: 20rpx;
}
}
.cyItem:last-child {
border: none;
.prize.cyItem{
color: #F47736;
}
}
@ -682,39 +722,9 @@
}
.consult-popup {
width: 487rpx;
height: 367rpx;
background: #F0F0F0;
border-radius: 20rpx;
padding: 65rpx 0 23rpx;
font-weight: bold;
font-size: 32rpx;
color: #000000;
text-align: center;
.consult-subtitle {
font-weight: 500;
font-size: 27rpx;
color: #333333;
margin-top: 43rpx;
}
.consult-btns {
display: flex;
margin-top: 75rpx;
view {
width: 50%;
font-weight: bold;
font-size: 32rpx;
color: #71B580;
line-height: 54rpx;
}
view:first-child {
border-right: 1rpx solid #D8D8D8;
color: #000000;
}
}
width: 480rpx;
height: 480rpx;
border-radius: 25rpx;
}
/* 弹窗内容容器 */

3
static/js/CommonFunction.js
View File

@ -14,6 +14,9 @@ Vue.prototype.formateRichText = str => {
str = str.replace(reg, 'div');
reg = new RegExp("↵", "g");
str = str.replace(reg, '<br />');
str = `<div style="font-size:0">` + str + `</div>`
return str;
}

Write Preview
Loading…
Cancel
Save