Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

我的收藏 在线商品订单 会员信息 编辑信息 在线聊天

master
Enzo 4 years ago
parent
2d00f666f9
commit
6bdc17b9f7
9 changed files with 1366 additions and 21 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. 70
      common/styles/iconfont.css
  2. 13
      components/lf-waterfall-shopdetails/lf-waterfall.vue
  3. 35
      pages.json
  4. 558
      pages/order/index/onlineorder.vue
  5. 211
      pages/user/my/chatonline.vue
  6. 277
      pages/user/my/collect.vue
  7. 32
      pages/user/my/editname.vue
  8. 157
      pages/user/my/vipinfo.vue
  9. 34
      project.config.json

70
common/styles/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "lf-iconfont"; /* Project id 2779107 */ font-family: "lf-iconfont"; /* Project id 2779107 */
src: url('//at.alicdn.com/t/font_2779107_i410qmxy80m.woff2?t=1630489955128') format('woff2'),
url('//at.alicdn.com/t/font_2779107_i410qmxy80m.woff?t=1630489955128') format('woff'),
url('//at.alicdn.com/t/font_2779107_i410qmxy80m.ttf?t=1630489955128') format('truetype');
src: url('//at.alicdn.com/t/font_2779107_oxe2x6h7xg.woff2?t=1630658615119') format('woff2'),
url('//at.alicdn.com/t/font_2779107_oxe2x6h7xg.woff?t=1630658615119') format('woff'),
url('//at.alicdn.com/t/font_2779107_oxe2x6h7xg.ttf?t=1630658615119') format('truetype');
} }
.iconfont { .iconfont {
@ -13,6 +13,70 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-huiyuan:before {
content: "\e65d";
}
.icon-Group-:before {
content: "\e6ae";
}
.icon-Member:before {
content: "\e613";
}
.icon-daishouhuo:before {
content: "\e651";
}
.icon-shoucang1:before {
content: "\f49a";
}
.icon-daifukuan:before {
content: "\e682";
}
.icon-tihuo:before {
content: "\e62e";
}
.icon-huiyuan1:before {
content: "\f81e";
}
.icon-icon:before {
content: "\e658";
}
.icon-cuo:before {
content: "\e63f";
}
.icon-cuo1:before {
content: "\e635";
}
.icon-xuanzhong:before {
content: "\e600";
}
.icon-bianji:before {
content: "\f021";
}
.icon-erweima:before {
content: "\e634";
}
.icon-shanchu:before {
content: "\f36d";
}
.icon-tupian:before {
content: "\f46e";
}
.icon-xiangyou:before { .icon-xiangyou:before {
content: "\e6af"; content: "\e6af";
} }

13
components/lf-waterfall-shopdetails/lf-waterfall.vue
View File

@ -4,8 +4,8 @@
<template v-slot:left="{leftList}"> <template v-slot:left="{leftList}">
<view class="list-warter" v-for="(item, index) in leftList" :key="index"> <view class="list-warter" v-for="(item, index) in leftList" :key="index">
<view v-if="!item.is_ad" @click="onClick(item.id)"> <view v-if="!item.is_ad" @click="onClick(item.id)">
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.picture" :index="index">
<view class="list-label">已售{{item.sale}}</view>
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :height="!ifsale?333:0" :img-mode="ifsale?'aspectFill':''" :image="item.picture" :index="index">
<view class="list-label" v-if="ifsale">已售{{item.sale}}</view>
</u-lazy-load> </u-lazy-load>
<view class="lf-p-20"> <view class="lf-p-20">
<view class="list-title"> <view class="list-title">
@ -31,8 +31,8 @@
<template v-slot:right="{rightList}"> <template v-slot:right="{rightList}">
<view class="list-warter" v-for="(item, index) in rightList" :key="index"> <view class="list-warter" v-for="(item, index) in rightList" :key="index">
<view v-if="!item.is_ad" @click="onClick(item.id)"> <view v-if="!item.is_ad" @click="onClick(item.id)">
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.picture" :index="index">
<view class="list-label">已售{{item.sale}}</view>
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :height="!ifsale?333:0" :img-mode="ifsale?'aspectFill':''" :image="item.picture" :index="index">
<view class="list-label" v-if="ifsale">已售{{item.sale}}</view>
</u-lazy-load> </u-lazy-load>
<view class="lf-p-20"> <view class="lf-p-20">
<view class="list-title"> <view class="list-title">
@ -73,6 +73,10 @@
listlength: { listlength: {
type: Number, type: Number,
default: 1 default: 1
},
ifsale: {
type: Boolean,
default: true
} }
}, },
data(){ data(){
@ -84,6 +88,7 @@
dataList: { dataList: {
get() { get() {
console.log('组件当前数据====',this.list) console.log('组件当前数据====',this.list)
console.log(this.ifsale)
return this.list; return this.list;
}, },
set(newValue) { console.log('newvalue',newValue) } set(newValue) { console.log('newvalue',newValue) }

35
pages.json
View File

@ -3,6 +3,41 @@
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}, },
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/order/index/onlineorder",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/user/my/chatonline",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/user/my/collect",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/user/my/vipinfo",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/user/my/editname",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{ {
"path": "pages/user/my/setting", "path": "pages/user/my/setting",
"style": { "style": {

558
pages/order/index/onlineorder.vue
View File

@ -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>

211
pages/user/my/chatonline.vue
View File

@ -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>

277
pages/user/my/collect.vue
View File

@ -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>

32
pages/user/my/editname.vue
View File

@ -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>

157
pages/user/my/vipinfo.vue
View File

@ -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>

34
project.config.json
View File

@ -4,31 +4,37 @@
"ignore": [] "ignore": []
}, },
"setting": { "setting": {
"bundle": false,
"userConfirmedBundleSwitch": false,
"urlCheck": true,
"scopeDataCheck": false,
"coverView": true,
"urlCheck": false,
"es6": true, "es6": true,
"enhance": false,
"postcss": true, "postcss": true,
"compileHotReLoad": false,
"preloadBackgroundData": false, "preloadBackgroundData": false,
"minified": true, "minified": true,
"autoAudits": false,
"newFeature": false, "newFeature": false,
"coverView": true,
"nodeModules": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false, "uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true, "uploadWithSourceMap": true,
"useIsolateContext": true,
"nodeModules": false,
"enhance": false,
"useCompilerModule": true,
"userConfirmedUseCompilerModuleSwitch": false,
"compileHotReLoad": false,
"useMultiFrameRuntime": true, "useMultiFrameRuntime": true,
"useApiHook": true, "useApiHook": true,
"useApiHostProcess": true, "useApiHostProcess": true,
"showShadowRootInWxmlPanel": true,
"packNpmManually": false,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"enableEngineNative": false, "enableEngineNative": false,
"useIsolateContext": true,
"useCompilerModule": true,
"userConfirmedUseCompilerModuleSwitch": false,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [], "packNpmRelationList": [],
"minifyWXSS": true "minifyWXSS": true
}, },

Write Preview
Loading…
Cancel
Save