初始化
This commit is contained in:
魏啾
165
pages/my/index.vue
Normal file
165
pages/my/index.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="index_box">
|
||||
|
||||
<view class="onebox">
|
||||
<view class="onebox_one">
|
||||
<text class="onebox_one_text">我的订单</text>
|
||||
<view class="onebox_one_one flex-around">
|
||||
<view class="flex-colum" v-for="(item,index) in 4" :key="index" @click="order(index)">
|
||||
<text>待付款</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towbox flex-between">
|
||||
<view class="towbox_item flex-start" v-for="(item,index) in 2">
|
||||
<image src="@/static/logo.png" mode=""></image>
|
||||
<view class="flex-colum">
|
||||
<text>余额</text>
|
||||
<view>0<text>元</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therebox">
|
||||
<view class="therebox_item flex-between" v-for="(item,index) in 3">
|
||||
<view class="flex-start">
|
||||
<image src="@/static/logo.png" mode=""></image>
|
||||
<text>优惠券</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#9b9b9b" size="14"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<bottombbar :valuebbar='3'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navtitle: '', //名称
|
||||
navboxshow: '0', //显示
|
||||
Background: 'none',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
order(e){
|
||||
uni.pro.navigateTo('my/order/index',{e:e})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.index_box {
|
||||
padding: 0 32rpx;
|
||||
width: 100%;
|
||||
height: 502rpx;
|
||||
background-size: cover;
|
||||
|
||||
.index_boxone {
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.onebox {
|
||||
position: relative;
|
||||
top:40rpx;
|
||||
.onebox_one {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
padding: 32rpx;
|
||||
.onebox_one_text{
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
.onebox_one_one{
|
||||
margin-top: 32rpx;
|
||||
.flex-colum{
|
||||
image{
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
text{
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.towbox{
|
||||
margin-top: 64rpx;
|
||||
.towbox_item{
|
||||
width:48%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx 30rpx;
|
||||
border-radius:12rpx;
|
||||
image{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
.flex-colum{
|
||||
margin-left: 28rpx;
|
||||
text{
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
view{
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
text{
|
||||
color: #333333;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.therebox{
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius:12rpx;
|
||||
padding:0 32rpx 32rpx 32rpx;
|
||||
.therebox_item{
|
||||
padding-top: 32rpx;
|
||||
.flex-start{
|
||||
image{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
text{
|
||||
margin-left: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
539
pages/my/order/index.vue
Normal file
539
pages/my/order/index.vue
Normal file
@@ -0,0 +1,539 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="onecontent">
|
||||
<view class="onecontent_oen flex-start">
|
||||
<input class="onecontent_oen_input" type="text" placeholder="搜索订单/商家名/商品名">
|
||||
<text class="onecontent_oen_text">搜索</text>
|
||||
</view>
|
||||
<view class="onecontent_tow flex-between">
|
||||
<view ref="uTabs" class="onecontent_tow_item flex-colum" v-for="(item,index) in swipercurrentdata"
|
||||
:key="index" @click="orderswitch(index)">
|
||||
<view :class="swiperCurrent == index?'onecontent_tow_itemtexts':'onecontent_tow_itemtext'">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="towcontent">
|
||||
<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{height:height}">
|
||||
<swiper-item v-for="(item, index) in list_" :key="index">
|
||||
<scroll-view scroll-y style="width: 100%;" :style="{height:height}" @scrolltolower="lower">
|
||||
<view class="towcontentitem" v-for="(item,index1) in list_[index].data" :key="index1">
|
||||
<view class="towcontentitemone flex-between">
|
||||
<text class="towcontentitemone_one">KIKI美发（龙首店）</text>
|
||||
<view class="towcontentitemone_tow flex-start">
|
||||
<image class="towcontentitemone_towimage"
|
||||
src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/my/order/shijian.png"
|
||||
mode="">
|
||||
</image>待付款
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-start">
|
||||
<image class="towcontentitemtow_imge" src="@/static/logo.png" mode=""></image>
|
||||
<view class="towcontentitemtow_one flex-colum-start">
|
||||
<text class="towcontentitemtow_one_one">【人气】高级染烫+单人护理</text>
|
||||
<text class="towcontentitemtow_one_tow"><text
|
||||
style="font-size:28rpx;">¥</text>120.00</text>
|
||||
</view>
|
||||
<view class="towcontentitemtow_tow">
|
||||
x1
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentitemthere">
|
||||
<view class="towcontentitemthereitem towcontentitemthereitem_tow"
|
||||
@click="overlayshow = true">
|
||||
取消订单
|
||||
</view>
|
||||
<view class="towcontentitemthereitem towcontentitemthereitem_there">
|
||||
待服务
|
||||
</view>
|
||||
<view class="towcontentitemthereitem towcontentitemthereitem_one">
|
||||
去付款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore style="padding-bottom: 20rpx;"
|
||||
v-if="list_[index].is_end&&list_[index].data.length>0" :status="form.status" />
|
||||
<view v-if="list_[index].data.length<=0" class="flex-colum_image flex-colum">
|
||||
<image class=""
|
||||
src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/my/order/nothave.png"
|
||||
mode="">
|
||||
</image>
|
||||
<text>诶呀，暂无数据~</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
</view>
|
||||
<u-overlay :show="overlayshow" @click="overlayshow = false">
|
||||
<view class="warp">
|
||||
<view class="rect flex-colum" @tap.stop>
|
||||
<view class="rectone">
|
||||
确定删除订单吗?
|
||||
</view>
|
||||
<view class="recttow flex-between">
|
||||
<view class="recttow_one">
|
||||
确定
|
||||
</view>
|
||||
<view class="recttow_tow" @click="overlayshow = false">
|
||||
取消
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
height: "",
|
||||
// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
|
||||
current: 0, // tabs组件的current值，表示当前活动的tab选项
|
||||
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
|
||||
overlayshow: false,
|
||||
swipercurrentdata: [{
|
||||
name: '全部'
|
||||
}, {
|
||||
name: '待付款'
|
||||
}, {
|
||||
name: '待服务'
|
||||
}, {
|
||||
name: '已完成'
|
||||
}, {
|
||||
name: '退款/售后'
|
||||
}],
|
||||
form: {
|
||||
status: 'loadmore',
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// this.swiperCurrent = option.type;
|
||||
},
|
||||
onShow() {
|
||||
this.init_fn();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
var query = uni.createSelectorQuery().in(this).select('.onecontent')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
console.log(res, ele)
|
||||
that.height = (res.windowHeight - ele.height) + "px";
|
||||
console.log(that.height)
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
|
||||
methods: {
|
||||
init_fn() {
|
||||
this.list_ = {
|
||||
list1: { //全部
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list2: { //代付款
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list3: { //待发货
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list4: { //待收货
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list5: { //已完成
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
}
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
this.get_order_list(i);
|
||||
}
|
||||
},
|
||||
async get_order_list(order_status) {
|
||||
this.form.status = 'loading';
|
||||
let page = null; //页数
|
||||
switch (order_status) {
|
||||
case 0:
|
||||
order_status = "";
|
||||
page = this.list_.list1.page;
|
||||
break;
|
||||
case 1:
|
||||
order_status = 0;
|
||||
page = this.list_.list2.page;
|
||||
break;
|
||||
case 2:
|
||||
order_status = 1;
|
||||
page = this.list_.list3.page;
|
||||
break;
|
||||
case 3:
|
||||
order_status = 3;
|
||||
page = this.list_.list4.page;
|
||||
break;
|
||||
case 4:
|
||||
order_status = 5;
|
||||
page = this.list_.list5.page;
|
||||
break;
|
||||
}
|
||||
// let res = await uni.ajax.get_order_list({
|
||||
// order_status: order_status, //加载那个
|
||||
// page: page
|
||||
// })
|
||||
let res = []
|
||||
// res.data.forEach(item=>{//计算待支付订单剩余时间
|
||||
// if(item.order_status==0){
|
||||
// item.timeDiff=(new Date(item.estimate_close_at).getTime() -new Date().getTime())/1000;
|
||||
// }
|
||||
// })
|
||||
switch (order_status) {
|
||||
case "":
|
||||
this.paging(res, this.list_.list1)
|
||||
break;
|
||||
case 0:
|
||||
this.paging(res, this.list_.list2)
|
||||
break;
|
||||
case 1:
|
||||
this.paging(res, this.list_.list3)
|
||||
break;
|
||||
case 3:
|
||||
this.paging(res, this.list_.list4)
|
||||
break;
|
||||
case 5:
|
||||
this.paging(res, this.list_.list5)
|
||||
break;
|
||||
}
|
||||
uni.hideLoading();
|
||||
},
|
||||
paging(res, list) {
|
||||
list.data = list.data.concat(res.data);
|
||||
if (res.next_page_url == null) {
|
||||
list.is_end = true;
|
||||
this.form.status = 'nomore'
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
list.page = list.page + 1;
|
||||
}
|
||||
},
|
||||
lower() {
|
||||
switch (this.current) {
|
||||
case 0:
|
||||
this.onReachBottom_fn(this.list_.list1)
|
||||
break;
|
||||
case 1:
|
||||
this.onReachBottom_fn(this.list_.list2)
|
||||
break;
|
||||
case 2:
|
||||
this.onReachBottom_fn(this.list_.list3)
|
||||
break;
|
||||
case 3:
|
||||
this.onReachBottom_fn(this.list_.list4)
|
||||
break;
|
||||
case 4:
|
||||
this.onReachBottom_fn(this.list_.list5)
|
||||
break;
|
||||
}
|
||||
},
|
||||
onReachBottom_fn(list) {
|
||||
if (!list.is_end) {
|
||||
this.get_order_list(this.current);
|
||||
}
|
||||
},
|
||||
// tabs通知swiper切换
|
||||
orderswitch(index) {
|
||||
this.swiperCurrent = index;
|
||||
},
|
||||
// swiper-item左右移动，通知tabs的滑块跟随移动
|
||||
transition(e) {
|
||||
let dx = e.detail.dx
|
||||
console.log(e, dx)
|
||||
this.$refs.uTabs.setDx(dx);
|
||||
},
|
||||
// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态 swiper滑动结束，分别设置tabs和swiper的状态
|
||||
animationfinish(e) {
|
||||
let current = e.detail.current;
|
||||
this.swiperCurrent = current;
|
||||
this.current = current;
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 10rpx 28rpx;
|
||||
|
||||
.onecontent_oen {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
border-radius: 36rpx;
|
||||
border: 2rpx solid #333333;
|
||||
padding-right: 8rpx;
|
||||
|
||||
.onecontent_oen_input {
|
||||
padding-left: 32rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.onecontent_oen_text {
|
||||
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 56rpx;
|
||||
width: 116rpx;
|
||||
height: 56rpx;
|
||||
background: #333333;
|
||||
border-radius: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontent_tow {
|
||||
padding: 32rpx 0 32rpx 0;
|
||||
width: 100%;
|
||||
|
||||
.onecontent_tow_item {
|
||||
position: relative;
|
||||
|
||||
.onecontent_tow_itemtexts {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontent_tow_itemtext {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.onecontent_tow_itemtexts::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 19.33rpx;
|
||||
height: 6.66rpx;
|
||||
background: url(https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/my/order/order1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.flex-colum_image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
text {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitem {
|
||||
margin-top: 32rpx;
|
||||
padding: 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.towcontentitemone {
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
|
||||
.towcontentitemone_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentitemone_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
|
||||
.towcontentitemone_towimage {
|
||||
margin-right: 10rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
position: relative;
|
||||
padding: 22rpx 0;
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
|
||||
.towcontentitemtow_imge {
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
background: #666666;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.towcontentitemtow_one {
|
||||
margin-left: 32rpx;
|
||||
|
||||
.towcontentitemtow_one_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentitemtow_one_tow {
|
||||
margin-top: 24rpx;
|
||||
font-size: 40rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #FC5F69;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow_tow {
|
||||
position: absolute;
|
||||
bottom: 32rpx;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Regular, Roboto;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemthere {
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.towcontentitemthereitem {
|
||||
margin-left: 24rpx;
|
||||
padding: 8rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_one {
|
||||
background: linear-gradient(101deg, #FA8E5D 0%, #F45E4D 100%);
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_tow {
|
||||
background: #F6F6F6;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_there {
|
||||
background: linear-gradient(101deg, #8083A7 0%, #4D4E64 100%);
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
padding: 40rpx 68rpx;
|
||||
width: 480rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 42rpx;
|
||||
|
||||
.rectone {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow {
|
||||
width: 100%;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.recttow_one {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
border: 2rpx solid #999999;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow_tow {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #333333;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
187
pages/my/setup/index.vue
Normal file
187
pages/my/setup/index.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="onecontent">
|
||||
个人信息
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<view class="towcontent_item flex-between">
|
||||
<view class="towcontent_item_text">
|
||||
头像
|
||||
</view>
|
||||
<view class="towcontent_item_box">
|
||||
<image class="towcontent_item_box_imge" src="@/static/logo.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent_item flex-between">
|
||||
<view class="towcontent_item_text">
|
||||
UID
|
||||
</view>
|
||||
<view class="towcontent_item_box flex-start">
|
||||
<text class="towcontent_item_box_text">ID:1001468</text>
|
||||
<u-icon name="arrow-right" color="#909399" size="14"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent_item flex-between">
|
||||
<view class="towcontent_item_text">
|
||||
昵称
|
||||
</view>
|
||||
<view class="towcontent_item_box flex-start">
|
||||
<text class="towcontent_item_box_text">卡卡</text>
|
||||
<u-icon name="arrow-right" color="#909399" size="14"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent_item flex-between">
|
||||
<view class="towcontent_item_text">
|
||||
性别
|
||||
</view>
|
||||
<view class="towcontent_item_box flex-start">
|
||||
<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
|
||||
<u-radio v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name">
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent_item flex-between" @click="datetimeshow = true">
|
||||
<view class="towcontent_item_text">
|
||||
生日
|
||||
</view>
|
||||
<view class="towcontent_item_box flex-start">
|
||||
<text class="towcontent_item_box_text">{{datetimevalue | timeFrom}}</text>
|
||||
<u-icon name="arrow-right" color="#909399" size="14"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<navigator :url="'/pages/my/setup/phone'" class="towcontent_item flex-between">
|
||||
<view class="towcontent_item_text">
|
||||
手机号
|
||||
</view>
|
||||
<view class="towcontent_item_box flex-start">
|
||||
<text class="towcontent_item_box_text">去绑定</text>
|
||||
<u-icon name="arrow-right" color="#909399" size="14"></u-icon>
|
||||
</view>
|
||||
<!-- <view class="towcontent_item_box flex-start">
|
||||
<text class="towcontent_item_box_text">{{phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</text>
|
||||
<view class="towcontent_item_box_ghbd">
|
||||
更换绑定
|
||||
</view>
|
||||
</view> -->
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="thereconse">
|
||||
保存
|
||||
</view>
|
||||
<u-datetime-picker :minDate="-946800000000" :maxDate="2240409600000" :show="datetimeshow"
|
||||
v-model="datetimevalue" @cancel='datetimeshow = false' @confirm="confirmdatetime" mode="date"></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radiolist1: [{
|
||||
name: '男',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '女',
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
phone:'15309275801',
|
||||
datetimeshow: false,
|
||||
datetimevalue:'',
|
||||
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
|
||||
radiovalue1: '男',
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
computed: {},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
confirmdatetime(e){
|
||||
this.datetimeshow = false
|
||||
this.datetimevalue = e.value
|
||||
},
|
||||
groupChange(n) {
|
||||
console.log('groupChange', n);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.index {
|
||||
padding: 28rpx;
|
||||
|
||||
.onecontent {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
padding: 0 32rpx;
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.towcontent_item {
|
||||
padding: 22rpx;
|
||||
border-bottom: 1rpx dotted #ccc;
|
||||
|
||||
.towcontent_item_text {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontent_item_box {
|
||||
.towcontent_item_box_imge {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.towcontent_item_box_text {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
.towcontent_item_box_ghbd{
|
||||
padding: 4rpx 8rpx;
|
||||
margin-left: 24rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #9397C1;
|
||||
border-radius: 10rpx;
|
||||
border: 2rpx solid #9397C1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thereconse {
|
||||
width: 630rpx;
|
||||
height: 80rpx;
|
||||
background: #999999;
|
||||
border-radius: 40rpx;
|
||||
font-size: 36rpx;
|
||||
text-align: center;
|
||||
margin: 84rpx auto;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
216
pages/my/setup/phone.vue
Normal file
216
pages/my/setup/phone.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view class="Box">
|
||||
<!-- <view class="Box_one">设置新手机</view>
|
||||
<view class="Box_T">设置新手机号需要通过短信验证</view>
|
||||
<view class="Box_there">当前手机号：{{ form.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</view> -->
|
||||
<view class="Box_consitem">
|
||||
<view class="Box_box flex-start">
|
||||
<text class="top_box_one_text">中国大陆+86</text>
|
||||
<input type="number" class="top_box_one_textinput" v-model="form.phone" style="font-size: 24rpx;" placeholder="请输入手机号" maxlength="11" data-key="mobile" />
|
||||
</view>
|
||||
<view class="Box_box flex-between"
|
||||
style="padding: 14rpx 0;border-top: 1rpx solid #efefef;border-bottom: 1rpx solid #efefef; margin-top: 0;">
|
||||
<text class="top_box_one_text" style="border-right:none;">验证码</text>
|
||||
<input type="number" style="font-size: 24rpx;" v-model="form.code" placeholder="请输入短信验证码"
|
||||
data-key="mobile" />
|
||||
<text class="top_box_one_texts">
|
||||
<view v-if="showText == true" class="yzm" @click="CodeRegister">{{ Recapture }}</view>
|
||||
<view v-else style="color: #ccc; background-color: #f9f9f9; border-radius:16px; padding: 10rpx;">
|
||||
{{ second }}s重新发送
|
||||
</view>
|
||||
</text>
|
||||
</view>
|
||||
<view class="flex-colum">
|
||||
<view class="Box_bottom" @click="userInfochangePhone">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
phone: '',
|
||||
code: '',
|
||||
oldPhone: '',
|
||||
password: ''
|
||||
},
|
||||
// 注册定时器 初始值
|
||||
second: 60,
|
||||
showText: true,
|
||||
Recapture: '发送验证码'
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
computed: {},
|
||||
methods: {
|
||||
async CodeRegister() {
|
||||
//发起验证码
|
||||
if (this.form.phone == null || this.form.phone == '') {
|
||||
uni.showToast({
|
||||
title: '请输入电话号码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
const res = await this.api.verifyPhoneIsExist({
|
||||
// post 手机验证码
|
||||
phone: this.form.phone
|
||||
});
|
||||
console.log(res);
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: '验证码获取成功',
|
||||
icon: 'none'
|
||||
});
|
||||
// 定时器
|
||||
this.showText = false;
|
||||
this.Recapture = '重新获取';
|
||||
var interval = setInterval(() => {
|
||||
let times = --this.second;
|
||||
this.second = times < 10 ? '0' + times : times; //小于10秒补 0
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
clearInterval(interval);
|
||||
this.second = 60;
|
||||
this.showText = true;
|
||||
}, 60000);
|
||||
}
|
||||
},
|
||||
async userInfochangePhone() {
|
||||
if (this.form.phone == null || this.form.phone == '') {
|
||||
uni.showToast({
|
||||
title: '请输入新电话号码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.password == null || this.form.password == '') {
|
||||
uni.showToast({
|
||||
title: '请输入登录密码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.code == null || this.form.code == '') {
|
||||
uni.showToast({
|
||||
title: '请输入验证码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
let res = await this.api.userInfochangePhone({
|
||||
code: this.form.code,
|
||||
password: this.form.password,
|
||||
oldPhone: this.$store.state.czguserInfo.phone,
|
||||
phone: this.form.phone
|
||||
});
|
||||
console.log(res)
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: '修改成功请重新登录',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.removeStorageSync("token");
|
||||
uni.removeStorageSync("userId");
|
||||
uni.removeStorageSync('myLoginName')
|
||||
uni.reLaunch({
|
||||
url: '../../../pages/login/login'
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.Box {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.Box_one {
|
||||
padding-top: 38rpx;
|
||||
font-size: 40rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.Box_T {
|
||||
margin-top: 2rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.Box_there {
|
||||
margin-top: 70rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.Box_consitem {
|
||||
background: #ffffff;
|
||||
padding: 32rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-top: 22rpx;
|
||||
|
||||
.Box_box {
|
||||
padding: 18rpx 0;
|
||||
.top_box_one_text {
|
||||
width: auto;
|
||||
padding: 0 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
border-right: 1rpx solid #ccc;
|
||||
}
|
||||
.top_box_one_textinput{
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.top_box_one_texts {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #5082fd;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-colum {
|
||||
width: 100%;
|
||||
margin-top: 64rpx;
|
||||
|
||||
.Box_bottom {
|
||||
width: 558rpx;
|
||||
height: 72rpx;
|
||||
background: linear-gradient(115deg, #7E81A5 0%, #4D4E64 100%);
|
||||
border-radius: 50rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user