9 changed files with 1366 additions and 21 deletions
-
70common/styles/iconfont.css
-
13components/lf-waterfall-shopdetails/lf-waterfall.vue
-
35pages.json
-
558pages/order/index/onlineorder.vue
-
211pages/user/my/chatonline.vue
-
277pages/user/my/collect.vue
-
32pages/user/my/editname.vue
-
157pages/user/my/vipinfo.vue
-
34project.config.json
@ -0,0 +1,558 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav :spreadOut="true" :showIcon="true" bgColor="white" title="在线商城订单"></lf-nav> |
|||
<view class="lf-row-between lf-bg-white"> |
|||
<view class="online-tab" :class="online_tab==0?'online-active':''" @click="online_tab = 0">线上订单</view> |
|||
<view class="online-tab" :class="online_tab==1?'online-active':''" @click="online_tab = 1">线下订单</view> |
|||
</view> |
|||
<view v-if="online_tab == 0"> |
|||
线上订单 |
|||
</view> |
|||
<view v-else> |
|||
<view class="special_tab"> |
|||
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs> |
|||
</view> |
|||
<view class="lf-p-30 lf-flex lf-w-100 lf-bg-white lf-m-b-30"> |
|||
<u-icon name="search" class="search-icon"></u-icon> |
|||
<input class="rom-search" type="text" placeholder="请输入商品名称" /> |
|||
</view> |
|||
<swiper :style="{height: '1200rpx', width: '750rpx'}" :current="current" @change="swiperChange"> |
|||
<swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex"> |
|||
<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="tabItem.isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh"> |
|||
|
|||
<view v-for="(item2,index2) of tabItem.list" :key="index2" class="online-card"> |
|||
<view class="lf-font-24 lf-color-777"> |
|||
订单编号783974398749328 |
|||
</view> |
|||
<view class="lf-m-t-30"> |
|||
<text class="lf-iconfont icon-Group- lf-font-28"></text> |
|||
<text class="lf-color-black lf-font-28 lf-font-bold lf-m-l-10">精品超市</text> |
|||
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text> |
|||
</view> |
|||
<view v-for="i of 5"> |
|||
<view class="lf-m-t-30" style="display: flex;"> |
|||
<image class="content-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image> |
|||
<view class="lf-m-l-15"> |
|||
<view class="lf-color-333 lf-font-26 lf-line-2" style="max-width: 480rpx;">爱他美较大婴儿配方奶粉较大婴儿配方奶粉较大婴儿配方奶粉2段 900g</view> |
|||
<view class="lf-font-24 lf-color-777 lf-m-t-14 lf-row-between"> |
|||
<view>1件；900g</view> |
|||
<view class="lf-font-32 lf-color-price">￥385</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-row-between lf-m-t-30"> |
|||
<view class="lf-font-24 lf-color-777">订单关闭</view> |
|||
<view class="lf-color-price lf-font-24">删除订单</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="loading-more lf-m-b-10"> |
|||
<text :class="{'loading-more-text': tabItem.loadingClass}" v-if="tabItem.list.length">{{tabItem.loadingText}}</text> |
|||
<lf-nocontent v-else></lf-nocontent> |
|||
<!-- <view> |
|||
{{tabItem.list.length}} |
|||
</view> --> |
|||
</view> |
|||
|
|||
|
|||
</scroll-view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
online_tab: 1, |
|||
tab_list: [ |
|||
{ |
|||
id: 1, |
|||
name: '综合', |
|||
list: [ |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
}, |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
}, |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
}, |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
} |
|||
], |
|||
isRefresher: false, |
|||
loadingClass: false, |
|||
loadingText: '正在加载中', |
|||
page: 1, |
|||
isPage: true |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '销量', |
|||
list: [ |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
}, |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
}, |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
} |
|||
], |
|||
isRefresher: false, |
|||
loadingClass: true, |
|||
loadingText: '正在加载中', |
|||
page: 1, |
|||
isPage: true |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '上新', |
|||
list: [ |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
}, |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
}, |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
} |
|||
], |
|||
isRefresher: false, |
|||
loadingClass: true, |
|||
loadingText: '正在加载中', |
|||
page: 1, |
|||
isPage: true |
|||
}, |
|||
{ |
|||
id: 4, |
|||
name: '价格', |
|||
list: [ |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
}, |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
}, |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
} |
|||
], |
|||
isRefresher: false, |
|||
loadingClass: true, |
|||
loadingText: '正在加载中', |
|||
page: 1, |
|||
isPage: true |
|||
} |
|||
], |
|||
current: 0, |
|||
windowHeight: 0, |
|||
loadingClass: false, |
|||
loadingText: '没有更多数据啦~' |
|||
} |
|||
}, |
|||
methods: { |
|||
tabChange(index){ |
|||
this.current = index; |
|||
this.clearTabItem(); |
|||
this.getData(); |
|||
}, |
|||
getData() { |
|||
let tab_item = this.tab_list[this.current]; |
|||
let isPage = false; |
|||
tab_item.isPage = isPage; |
|||
if(!isPage){ |
|||
tab_item.loadingClass = false; |
|||
tab_item.loadingText = '没有更多数据啦~'; |
|||
} |
|||
tab_item.isRefresher = false; |
|||
}, |
|||
// 滑块下标值变化 |
|||
swiperChange(event){ |
|||
this.current = event.detail.current; |
|||
if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理 |
|||
}, |
|||
// 页面触底，加载下一页 |
|||
onScrolltolower(){ |
|||
let tab_item = this.tab_list[this.current]; |
|||
if(tab_item.isPage){ |
|||
tab_item.page = tab_item.page + 1; |
|||
this.getData(); |
|||
} |
|||
}, |
|||
// scroll-view 下拉刷新 |
|||
onRefresherrefresh(){ |
|||
this.$u.throttle(() => { |
|||
this.clearTabItem(); |
|||
this.getData(); |
|||
}, 200); |
|||
}, |
|||
clearTabItem(){ |
|||
let tab_item = this.tab_list[this.current]; |
|||
tab_item.page = 1; |
|||
tab_item.isPage = true; |
|||
tab_item.isRefresher = true; |
|||
tab_item.loadingClass = true; |
|||
tab_item.loadingText = '正在加载中'; |
|||
tab_item.list = []; |
|||
this.$set(this.tab_list, this.current, tab_item); |
|||
// this.$refs.uWaterfallFather[this.current].clear(); |
|||
} |
|||
}, |
|||
onShow(){ |
|||
this.windowHeight = getApp().globalData.windowHeight; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
background-color: #F8F8F8; |
|||
} |
|||
</style> |
|||
|
|||
<style scoped lang="scss"> |
|||
.content-img { |
|||
width: 130rpx; |
|||
height: 130rpx; |
|||
border-radius: 5rpx; |
|||
} |
|||
.online-card { |
|||
width: 686rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
margin-bottom: 30rpx; |
|||
padding: 30rpx; |
|||
} |
|||
.online-tab { |
|||
width: 375rpx; |
|||
height: 90rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #555555; |
|||
font-size: 32rpx; |
|||
} |
|||
.online-active { |
|||
background: #15716E; |
|||
color: #FFFFFF; |
|||
border-radius: 45rpx 45rpx 0rpx 0rpx; |
|||
} |
|||
//tab相关 |
|||
|
|||
.search-icon { |
|||
position: relative; |
|||
bottom: 0; |
|||
left: 54rpx; |
|||
} |
|||
/deep/.input-placeholder{ |
|||
color: #777; |
|||
font-size: 28rpx; |
|||
} |
|||
.rom-search { |
|||
width: 686rpx; |
|||
height: 60rpx; |
|||
background: #F4F8F8; |
|||
border-radius: 30rpx; |
|||
padding-left: 74rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
.goods-rom { |
|||
border-radius: 20rpx; |
|||
width: 333rpx; |
|||
height: 497rpx; |
|||
background-color: white; |
|||
box-shadow: 0px 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); |
|||
&:nth-child(2n) { |
|||
margin-right: 0; |
|||
} |
|||
&:nth-child(n + 3) { |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
.introduct { |
|||
padding: 0 0 30rpx 32rpx; |
|||
} |
|||
.com{ |
|||
width: 100%; |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
padding: 0rpx 28rpx; |
|||
} |
|||
.shop-head { |
|||
width: 100%; |
|||
height: 400rpx; |
|||
position: relative; |
|||
} |
|||
.shop-flex { |
|||
display: flex; |
|||
padding: 30rpx; |
|||
} |
|||
.shop-title { |
|||
width: 686rpx; |
|||
height: 274rpx; |
|||
border-radius: 20rpx; |
|||
background-color: white; |
|||
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); |
|||
margin: 0 auto; |
|||
position: relative; |
|||
top: -32rpx; |
|||
} |
|||
.shop-img { |
|||
width: 90rpx; |
|||
height: 90rpx; |
|||
margin-right: 15rpx; |
|||
} |
|||
.shop-function { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
font-size: 40rpx; |
|||
} |
|||
.function-total { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0 65rpx 0 65rpx; |
|||
} |
|||
|
|||
/deep/.u-scroll-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar { |
|||
background-color: #15716E!important; |
|||
width: 80rpx!important; |
|||
position: absolute; |
|||
height: 10rpx; |
|||
left: 0; |
|||
border-radius: 8rpx 8rpx 0px 0px!important; |
|||
bottom: -12rpx; |
|||
} |
|||
|
|||
/deep/ .u-tab-item { |
|||
font-size: 28rpx!important; |
|||
} |
|||
|
|||
|
|||
//价格筛选伪类 |
|||
// /deep/.special_tab .u-tab-item:nth-child(4n) ::after{ |
|||
// font-size: 48rpx!important; |
|||
// content: ''; |
|||
|
|||
// color: red; |
|||
// } |
|||
|
|||
// loading加载 |
|||
.loading-more { |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding-top: 10px; |
|||
padding-bottom: 10px; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
.loading-more-text::before { |
|||
content: ''; |
|||
width: 20px; |
|||
height: 20px; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
-webkit-animation: weuiLoading 1s steps(12, end) infinite; |
|||
animation: weuiLoading 1s steps(12, end) infinite; |
|||
background-repeat: no-repeat; |
|||
background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E"); |
|||
background-size: 100%; |
|||
} |
|||
@keyframes weuiLoading { |
|||
0% { |
|||
transform: rotate3d(0, 0, 1, 0deg); |
|||
} |
|||
100% { |
|||
transform: rotate3d(0, 0, 1, 360deg); |
|||
} |
|||
} |
|||
|
|||
|
|||
.list-warter { |
|||
border-radius: 20rpx; |
|||
margin: 10px 5px; |
|||
margin-top: 0px; |
|||
background-color: #ffffff; |
|||
// padding: 8px; |
|||
position: relative; |
|||
overflow: hidden; |
|||
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.u-close { |
|||
position: absolute; |
|||
top: 32rpx; |
|||
right: 32rpx; |
|||
} |
|||
|
|||
.list-image { |
|||
width: 100%; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.list-title { |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
color: $u-main-color; |
|||
} |
|||
|
|||
.list-label{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
background-color: rgba(0,0,0,0.5); |
|||
width: 140rpx; |
|||
height: 48rpx; |
|||
border-radius: 20rpx 0rpx 0rpx 0rpx; |
|||
font-size: 22rpx; |
|||
color: #FFFFFF; |
|||
line-height: 48rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.list-tag { |
|||
display: flex; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
.list-tag-owner { |
|||
background-color: $u-type-error; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 4rpx 14rpx; |
|||
border-radius: 50rpx; |
|||
font-size: 20rpx; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.list-tag-text { |
|||
border: 1px solid $u-type-primary; |
|||
color: $u-type-primary; |
|||
margin-left: 10px; |
|||
border-radius: 50rpx; |
|||
line-height: 1; |
|||
padding: 4rpx 14rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
border-radius: 50rpx; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.list-price { |
|||
font-size: 30rpx; |
|||
color: $u-type-error; |
|||
margin-top: 5px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,211 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav :spreadOut="true" :showIcon="true" title="在线咨询"></lf-nav> |
|||
<view class="cu-chat"> |
|||
<view class="cu-info round lf-m-t-30">客服在线时间：10:00～22:00，请在工作时间内喜咨询</view> |
|||
<view class="cu-item"> |
|||
<view class="lf-row-center lf-m-b-30 lf-font-24 lf-color-777">2021-09-01 18:38:24</view> |
|||
<view class="self-main"> |
|||
<view class="cu-avatar radius"> |
|||
<image class="lf-w-100 lf-h-100 round-radius" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" ></image> |
|||
</view> |
|||
<view class="main"> |
|||
<view class="content shadow"> |
|||
客服在线时间：10:00～22:00，请在工作时间内喜咨询请在工作时间内喜咨询 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="date"> 2021-09-01 18:38:24</view> --> |
|||
</view> |
|||
<view class="cu-item self"> |
|||
<view class="lf-row-center lf-m-b-30 lf-font-24 lf-color-777">2021-09-01 18:38:24</view> |
|||
<view class="self-main self-main1"> |
|||
<view class="main"> |
|||
<view class="content shadow"> |
|||
客服在线时间 |
|||
</view> |
|||
</view> |
|||
<view class="cu-avatar radius"> |
|||
<image class="lf-w-100 lf-h-100 round-radius" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" ></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
apllyBind() { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '确认联系对方吗?', |
|||
cancelText: '下次一定', |
|||
confirmColor: '#E21196', |
|||
success: function (res) { |
|||
if (res.confirm) { |
|||
console.log('用户点击确定'); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page{ |
|||
padding-bottom: 100upx; |
|||
background-color: #F5F5F5; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.self-main1 { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
.self-main { |
|||
display: flex; |
|||
} |
|||
.round-radius { |
|||
border-radius: 50%; |
|||
} |
|||
.cu-chat { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.cu-chat .cu-item { |
|||
display: flex; |
|||
padding: 30upx; |
|||
position: relative; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.cu-chat .cu-item>.self-main .cu-avatar { |
|||
width: 80upx; |
|||
height: 80upx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.cu-chat .cu-item>.self-main .main { |
|||
max-width: calc(100% - 200rpx); |
|||
margin: 0 40upx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.cu-chat .cu-item>image { |
|||
height: 320upx; |
|||
} |
|||
|
|||
.cu-chat .cu-item>.self-main .main .content { |
|||
padding: 20upx; |
|||
border-radius: 0 20rpx 20rpx 20rpx; |
|||
display: inline-flex; |
|||
max-width: 800rpx; |
|||
align-items: center; |
|||
font-size: 28upx; |
|||
position: relative; |
|||
min-height: 80upx; |
|||
line-height: 40upx; |
|||
text-align: left; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.cu-chat .cu-item>.self-main .main .content:not([class*="bg-"]) { |
|||
background-color: #15716E; |
|||
color: white; |
|||
} |
|||
|
|||
.cu-chat .cu-item .date { |
|||
position: absolute; |
|||
font-size: 24upx; |
|||
color: #777; |
|||
width: calc(100% - 320upx); |
|||
bottom: 20upx; |
|||
left: 160upx; |
|||
} |
|||
|
|||
.cu-chat .cu-item .action { |
|||
padding: 0 30upx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.cu-chat .cu-item>.self-main .main .content::after { |
|||
content: ""; |
|||
top: 27upx; |
|||
transform: rotate(45deg); |
|||
position: absolute; |
|||
z-index: 100; |
|||
display: inline-block; |
|||
overflow: hidden; |
|||
width: 24upx; |
|||
height: 24upx; |
|||
left: -12upx; |
|||
right: initial; |
|||
background-color: inherit; |
|||
} |
|||
|
|||
.cu-chat .cu-item.self>.self-main .main .content::after { |
|||
left: auto; |
|||
right: -12upx; |
|||
} |
|||
|
|||
.cu-chat .cu-item>.self-main .main .content::before { |
|||
content: ""; |
|||
top: 30upx; |
|||
transform: rotate(45deg); |
|||
position: absolute; |
|||
z-index: -1; |
|||
display: inline-block; |
|||
overflow: hidden; |
|||
width: 24upx; |
|||
height: 24upx; |
|||
left: -12upx; |
|||
right: initial; |
|||
background-color: inherit; |
|||
filter: blur(5upx); |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.cu-chat .cu-item>.self-main .main .content:not([class*="bg-"])::before { |
|||
background-color: #333333; |
|||
opacity: 0.1; |
|||
} |
|||
|
|||
.cu-chat .cu-item.self>.self-main .main .content::before { |
|||
left: auto; |
|||
right: -12upx; |
|||
} |
|||
|
|||
.cu-chat .cu-item.self { |
|||
justify-content: flex-end; |
|||
text-align: right; |
|||
} |
|||
|
|||
.cu-chat .cu-item.self .content { |
|||
background-color: #E8F1F1!important; |
|||
color: #222!important; |
|||
} |
|||
|
|||
.cu-chat .cu-info { |
|||
display: inline-block; |
|||
margin: 20upx auto; |
|||
font-size: 24rpx; |
|||
padding: 20upx 80rpx; |
|||
background-color: #15716E; |
|||
border-radius: 6upx; |
|||
color: #ffffff; |
|||
max-width: 100%; |
|||
line-height: 1.4; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,277 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav :spreadOut="true" :showIcon="true" title="收藏"></lf-nav> |
|||
<view v-if="title_tab.length"> |
|||
<u-tabs :list="title_tab" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="title_current" @change="titletabChange"></u-tabs> |
|||
</view> |
|||
|
|||
<view v-if="title_current==0"> |
|||
<view class="lf-p-30 lf-flex" v-for="i of 4"> |
|||
<image class="collect-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image> |
|||
<view class="lf-flex-column lf-m-l-20" style="min-height: 160rpx;justify-content: space-between;"> |
|||
<view class="lf-font-36 lf-color-black lf-line-1" style="width: 500rpx;">luckin coffee 瑞幸瑞幸咖啡瑞幸咖啡瑞幸咖啡瑞幸咖啡咖啡</view> |
|||
<view class="lf-font-24 lf-color-777">餐饮·美食｜18件在售</view> |
|||
<view class="lf-font-24 lf-color-777"><u-icon name="map" class="lf-m-r-10"></u-icon>L2</view> |
|||
</view> |
|||
<view class="lf-iconfont icon-shoucang lf-font-38" style="color: #FF9D9D;"></view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-b-30 lf-m-t-30" v-else> |
|||
<lf-waterfall :list="list" :ifsale="false" ref="uWaterfall"></lf-waterfall> |
|||
<!-- <u-loadmore v-if="recomm_list.length" status="已加载全部数据~" @loadmore="addRandomData"></u-loadmore> --> |
|||
<view class="loading-more"> |
|||
<text :class="{'loading-more-text': loading_class}" v-if="list.length">{{ loading_text }}</text> |
|||
<lf-nocontent v-else></lf-nocontent> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
title_tab: [ |
|||
{name:'推荐'}, |
|||
{name:'商品'} |
|||
], |
|||
title_current:0, |
|||
list: [ |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
}, |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
}, |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
}, |
|||
{ |
|||
id: 10, |
|||
original_price: "4111.00", |
|||
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
|||
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
|||
price: "2412.00", |
|||
product_id: 1008, |
|||
sale: 0, |
|||
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
|||
} |
|||
], |
|||
show_count: 0, |
|||
windowHeight: 0, |
|||
loading_text: '没有更多数据啦~', |
|||
loading_class: false |
|||
} |
|||
}, |
|||
components: { |
|||
lfWaterfall |
|||
}, |
|||
onShow(){ |
|||
this.windowHeight = getApp().globalData.windowHeight; |
|||
}, |
|||
methods: { |
|||
titletabChange(index){ |
|||
this.title_current = index; |
|||
}, |
|||
getData() { |
|||
let tab_item = this.tab_list[this.current]; |
|||
let isPage = false; |
|||
tab_item.isPage = isPage; |
|||
if(!isPage){ |
|||
tab_item.loadingClass = false; |
|||
tab_item.loadingText = '没有更多数据啦~'; |
|||
} |
|||
tab_item.isRefresher = false; |
|||
}, |
|||
// 滑块下标值变化 |
|||
swiperChange(event){ |
|||
this.current = event.detail.current; |
|||
if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理 |
|||
}, |
|||
// 页面触底，加载下一页 |
|||
onScrolltolower(){ |
|||
let tab_item = this.tab_list[this.current]; |
|||
if(tab_item.isPage){ |
|||
tab_item.page = tab_item.page + 1; |
|||
this.getData(); |
|||
} |
|||
}, |
|||
// scroll-view 下拉刷新 |
|||
onRefresherrefresh(){ |
|||
this.$u.throttle(() => { |
|||
this.clearTabItem(); |
|||
this.getData(); |
|||
}, 200); |
|||
}, |
|||
clearTabItem(){ |
|||
let tab_item = this.tab_list[this.current]; |
|||
tab_item.page = 1; |
|||
tab_item.isPage = true; |
|||
tab_item.isRefresher = true; |
|||
tab_item.loadingClass = true; |
|||
tab_item.loadingText = '正在加载中'; |
|||
tab_item.list = []; |
|||
this.$set(this.tab_list, this.current, tab_item); |
|||
// this.$refs.uWaterfallFather[this.current].clear(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.collect-img { |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
border-radius: 5rpx; |
|||
} |
|||
/deep/.u-scroll-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
/deep/.u-scroll-box .u-tab-bar { |
|||
background-color: #15716E!important; |
|||
width: 80rpx!important; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: -12rpx; |
|||
} |
|||
/deep/ .u-tab-item { |
|||
font-size: 28rpx!important; |
|||
} |
|||
|
|||
|
|||
// loading加载 |
|||
.loading-more { |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding-top: 10px; |
|||
padding-bottom: 10px; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
.loading-more-text::before { |
|||
content: ''; |
|||
width: 20px; |
|||
height: 20px; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
-webkit-animation: weuiLoading 1s steps(12, end) infinite; |
|||
animation: weuiLoading 1s steps(12, end) infinite; |
|||
background-repeat: no-repeat; |
|||
background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E"); |
|||
background-size: 100%; |
|||
} |
|||
@keyframes weuiLoading { |
|||
0% { |
|||
transform: rotate3d(0, 0, 1, 0deg); |
|||
} |
|||
100% { |
|||
transform: rotate3d(0, 0, 1, 360deg); |
|||
} |
|||
} |
|||
|
|||
|
|||
.list-warter { |
|||
border-radius: 20rpx; |
|||
margin: 10px 5px; |
|||
margin-top: 0px; |
|||
background-color: #ffffff; |
|||
// padding: 8px; |
|||
position: relative; |
|||
overflow: hidden; |
|||
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.u-close { |
|||
position: absolute; |
|||
top: 32rpx; |
|||
right: 32rpx; |
|||
} |
|||
|
|||
.list-image { |
|||
width: 100%; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.list-title { |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
color: $u-main-color; |
|||
} |
|||
|
|||
.list-label{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
background-color: rgba(0,0,0,0.5); |
|||
width: 140rpx; |
|||
height: 48rpx; |
|||
border-radius: 20rpx 0rpx 0rpx 0rpx; |
|||
font-size: 22rpx; |
|||
color: #FFFFFF; |
|||
line-height: 48rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.list-tag { |
|||
display: flex; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
.list-tag-owner { |
|||
background-color: $u-type-error; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 4rpx 14rpx; |
|||
border-radius: 50rpx; |
|||
font-size: 20rpx; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.list-tag-text { |
|||
border: 1px solid $u-type-primary; |
|||
color: $u-type-primary; |
|||
margin-left: 10px; |
|||
border-radius: 50rpx; |
|||
line-height: 1; |
|||
padding: 4rpx 14rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
border-radius: 50rpx; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.list-price { |
|||
font-size: 30rpx; |
|||
color: $u-type-error; |
|||
margin-top: 5px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,32 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav :spreadOut="true" :showIcon="true" title="修改昵称"></lf-nav> |
|||
<view class="lf-color-black lf-font-28 lf-p-30"> |
|||
可使用中英文、数字和下划线，字符限制1-10字符 |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag lf-border-bottom"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
<input type="text" placeholder="182****5380" /> |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<text class="lf-iconfont icon-cuo lf-font-24 lf-m-l-10 lf-color-777"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.set-tag { |
|||
height: 100rpx; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
// border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,157 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav :spreadOut="true" :showIcon="true" bgColor="#F8F8F8" title="会员资料"></lf-nav> |
|||
<view class="lf-font-26 lf-color-primary lf-p-30 lf-row-center"> |
|||
尊敬的会员，完善资料可以让我们为您提供更贴切的服务 |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag lf-border-bottom"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
*姓名 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<input type="text" class="edit-input" placeholder="182****5380" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag lf-border-bottom"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
国籍 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<input type="text" class="edit-input" placeholder="请输入你的国籍" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag lf-border-bottom"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
性别 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<input type="text" class="edit-input" placeholder="男" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag lf-border-bottom"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
出生日期 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<input type="text" class="edit-input" placeholder="1999-12-12" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag lf-border-bottom"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
身份证号 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<input type="text" class="edit-input" placeholder="450111199912122232（不可修改）" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag lf-border-bottom"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
通讯地址 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index"> |
|||
<text class="lf-font-28 lf-color-777">{{ marriage[marriage_index] || '请选择' }}</text> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag lf-border-bottom"> |
|||
<view class="lf-font-28 lf-color-black"></view> |
|||
<view class="lf-flex"> |
|||
<input type="text" class="edit-input" placeholder="请输入您的详细地址" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag lf-border-bottom"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
家庭地址 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<input type="text" class="edit-input" placeholder="请输入您的家庭地址" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="set-tag lf-border-bottom"> |
|||
<view class="lf-font-28 lf-color-black"> |
|||
学历 |
|||
</view> |
|||
<view class="lf-flex"> |
|||
<input type="text" class="edit-input" placeholder="请输入您的学历" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="lf-font-26 lf-color-999 lf-p-30 lf-row-center"> |
|||
温馨提示：身份证号出生日期不支持线上修改，如需修改请前往服务台办理。 |
|||
</view> |
|||
|
|||
<button class="set-btn">退出账号</button> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
marriage: ['已婚', '未婚'], |
|||
} |
|||
}, |
|||
methods: { |
|||
getValue(current, event){ |
|||
this[current +'_index'] = event.detail.value; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
// .input{ |
|||
// width: 400rpx; |
|||
// text-align: right; |
|||
// } |
|||
.picker-w{ |
|||
width: 400rpx; |
|||
text-align: right; |
|||
} |
|||
.set-btn { |
|||
width: 550rpx; |
|||
height: 100rpx; |
|||
background: #15716E; |
|||
border-radius: 50rpx; |
|||
margin: 40rpx auto; |
|||
font-size: 32rpx; |
|||
color: white; |
|||
} |
|||
.edit-input { |
|||
text-align: right; |
|||
font-size: 28rpx; |
|||
color: #777; |
|||
} |
|||
.set-tag { |
|||
height: 100rpx; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
// border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
/deep/.input-placeholder { |
|||
font-size: 28rpx; |
|||
color: #777; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue