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

382
pages/user/user.vue
View File

@ -1,20 +1,30 @@
<template> <template>
<view class="bg bg-padding"> <view class="bg bg-padding">
<view class="topBox flex-between" @click="gotoProfile"> <image class="top-image" src="https://static.ticket.sz-trip.com/uploads/20251011/50e0ae7f09f23c278cab8472b6e99c07.png"></image>
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/user/topIcon.png" class="topIcon"></image>
<view class="flex-center" style="position: relative;"> <view class="main-content">
<view class="avatar-box"> <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="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" <image src="https://static.ticket.sz-trip.com/yandu/images/user/grxx.png" mode="aspectFill"
class="headImg" v-else></image> 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>
<view class="username" v-if="userInfo.nickname">{{userInfo.nickname}}</view>
<view class="username" v-else>请登录/注册 ></view> <view class="username" v-else>请登录/注册 ></view>
</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> </view>
<view class="orderBox"> <view class="orderBox">
@ -22,11 +32,11 @@
我的订单 我的订单
<span class="flex-between"> <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> </span>
</navigator> </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)"> <view class="orderItem" v-for="(item,index) in orderList" :key="index" @click="goTrades(item)">
<img :src="item.src" alt=""> <img :src="item.src" alt="">
<view>{{item.title}}</view> <view>{{item.title}}</view>
@ -49,36 +59,28 @@
</swiper> --> </swiper> -->
</view> </view>
<view class="cygj"> <view class="cygj">
<view v-for="(item,index) in cyList" :key="index" <view class="moreBox">我的服务</view>
@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 style="display:flex;align-items:center;flex-wrap:wrap">
<view class="flex-center"> <view :class="['cyItem',item.customClass]" v-for="(item,index) in cyList.filter(x=>x.isShow)" :key="index"
<img src="https://static.ticket.sz-trip.com/shiweisuzhou/images/user/lxkf.png" class="headIcon"> @click="gotoUrl(item,index)">
联系我们
</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">
<img :src="item.src" class="headIcon"> <img :src="item.src" class="headIcon">
{{item.title}} <view>{{item.title}}</view>
</view> </view>
<img src="https://static.ticket.sz-trip.com/yandu/images/user/rightIcon-gray.png" class="rightIcon">
</view> </view>
</view> </view>
</view> </view>
<!-- 旅游咨询弹框 -->
<!-- 图片 -->
<uni-popup ref="popup" type="center"> <uni-popup ref="popup" type="center">
<view class="consult-popup"> <image class="consult-popup" :src="showImg" :show-menu-by-longpress="true"></image>
即将拨打客服电话
<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>
</uni-popup> </uni-popup>
<uni-popup ref="kfpopup" type="bottom" :safe-area="false"> <uni-popup ref="kfpopup" type="bottom" :safe-area="false">
@ -138,76 +140,100 @@
nowDateTime: '', //当前时间秒数 nowDateTime: '', //当前时间秒数
userInfo: {}, userInfo: {},
orderList: [{ 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: '待付款', title: '待付款',
status: 'WAIT_PAYMENT' 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: '待发货', title: '待发货',
status: 'WAIT_POST' 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: '待使用/出行', title: '待使用/出行',
status: 'WAIT_USE' 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: '待收货', title: '待收货',
status: 'WAIT_DELIVERY' 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: '退款/售后', title: '退款/售后',
status: 'NEED_REFUND' status: 'NEED_REFUND'
}, },
], ],
cyList: [ 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: '优惠券', title: '优惠券',
path: '/subPackages/user/coupon', path: '/subPackages/user/coupon',
isShow: true 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: '出行人', title: '出行人',
path: '/subPackages/user/travelerList?showType=0', path: '/subPackages/user/travelerList?showType=0',
isShow: true isShow: true
}, },
{ {
src: 'https://static.ticket.sz-trip.com/shiweisuzhou/images/user/lxkf.png', src: 'https://static.ticket.sz-trip.com/uploads/20251011/c9c81700bc66a8d4dc26757aa6737dfa.png',
title: '联系我们',
path: '',
isShow: true
},
{
src: 'https://static.ticket.sz-trip.com/shiweisuzhou/images/user/shdz.png',
title: '收货地址', title: '收货地址',
path: '/subPackages/user/travelerList?showType=1', path: '/subPackages/user/travelerList?showType=1',
isShow: true 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: '商户核销', title: '商户核销',
path: '', path: '',
isShow: true, isShow: true,
webUrl: "https://supplier-h5.sutenong.com", 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: '用户协议', title: '用户协议',
path: '/subPackages/user/privacyInfo?id=9', path: '/subPackages/user/privacyInfo?id=9',
isShow: true 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: '隐私管理', title: '隐私管理',
path: '/subPackages/user/privacyInfo?id=12', path: '/subPackages/user/privacyInfo?id=12',
isShow: true isShow: true
} }
], ],
showImg: "",
} }
}, },
onShow() { onShow() {
@ -340,19 +366,30 @@
// this.$refs.popup.open('center') // this.$refs.popup.open('center')
// }, // },
gotoUrl(item, index) { gotoUrl(item, index) {
if (index == 2) { if (item.path) {
this.$refs.kfpopup.open()
return;
}
if (index == 4) {
uni.navigateTo({ uni.navigateTo({
url:'/subPackages/webPage/webPage?url='+item.webUrl url: item.path
}) })
return return
} }
if (item.webUrl) {
uni.navigateTo({ 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() { qidai() {
uni.showToast({ uni.showToast({
@ -401,44 +438,75 @@
.bg { .bg {
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; 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 { .topBox {
width: 750rpx; width: 100%;
height: 538rpx;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
background-image: url('https://static.ticket.sz-trip.com/shiweisuzhou/images/user/topBg.png'); align-items: center;
background-size: 100% 100%;
padding: 0rpx 40rpx 65rpx 28rpx;
position: relative; position: relative;
overflow: visible;
.topIcon {
width: 734.67rpx;
height: 538rpx;
position: absolute;
top: 0;
right: 0;
}
.avatar-box { .avatar-box {
width: 120rpx; height: 80rpx;
height: 120rpx; 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%; border-radius: 50%;
overflow: hidden; flex-shrink: 0;
background: #FFFFFF; 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 { .username {
margin-left: 20rpx; font-weight: 500;
font-size: 40rpx; font-size: 32rpx;
color: #000000; color: #1C1C1C;
} }
.top-right { .top-right {
@ -456,48 +524,46 @@
.orderBox { .orderBox {
width: 697rpx; width: 697rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 23rpx 0rpx rgba(80, 80, 80, 0.12);
border-radius: 13rpx; border-radius: 13rpx;
margin: -185rpx auto 0; margin: 30rpx auto 0;
padding-bottom: 30.6rpx; background: #F9FFF4;
border-radius: 21rpx 21rpx 21rpx 21rpx;
border: 1rpx solid #DAF7A2;
position: relative; position: relative;
padding: 26rpx 0;
.moreBox { .moreBox {
height: 84rpx; padding:0 29rpx;
margin: auto; margin: auto;
font-size: 31rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
padding: 0 13rpx 0 26rpx;
span {
font-weight: 500; font-weight: 500;
font-size: 25rpx; font-size: 32rpx;
color: #100E0E; color: #1C1C1C;
align-items: baseline;
span {
font-weight: 400;
font-size: 24rpx;
color: #8D8D8D;
box-sizing: border-box; box-sizing: border-box;
image { image {
width: 11.33rpx; width: 20rpx;
height: 20rpx; height: 20rpx;
margin-left: 18rpx; margin-left: 8rpx;
} }
} }
} }
.orderItem { .orderItem {
font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFang SC; color: #535355;
font-weight: 500;
color: #111111;
width: 20%; width: 20%;
text-align: center; text-align: center;
img { img {
width: 62rpx; width: 48rpx;
height: 62rpx; height: 48rpx;
margin-bottom: 20rpx; margin-bottom: 12rpx;
} }
} }
.orderItem:nth-child(n+6) { .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 { .cygj {
width: 697rpx; width: 697rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 20rpx; border-radius: 21rpx 21rpx 21rpx 21rpx;
margin: 30rpx auto 0; margin: 20rpx auto 0;
padding: 0 27rpx; padding: 27rpx 0;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500; 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 { .cyItem {
height: 106rpx; width:25%;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1rpx solid #D8D8D8; flex-direction:column;
font-weight: 400;
font-size: 24rpx;
color: #535355;
margin-bottom:28rpx;
.headIcon { .headIcon {
width: 42rpx; width: 48rpx;
height: 42rpx; height: 48rpx;
margin-right: 15rpx; margin-bottom:10rpx;
} }
.rightIcon {
width: 20rpx;
height: 20rpx;
}
} }
.cyItem:last-child { .prize.cyItem{
border: none; color: #F47736;
} }
} }
@ -682,39 +722,9 @@
} }
.consult-popup { .consult-popup {
width: 487rpx; width: 480rpx;
height: 367rpx; height: 480rpx;
background: #F0F0F0; border-radius: 25rpx;
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;
}
}
} }
/* 弹窗内容容器 */ /* 弹窗内容容器 */

3
static/js/CommonFunction.js
View File

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

Write Preview
Loading…
Cancel
Save