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

完成地址页面UI

master
邓平艺 4 years ago
parent
de52a8e5b0
commit
a75af92568
8 changed files with 264 additions and 47 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. 8
      common/styles/theme.css
  2. 63
      components/lf-multiColumnAd/lf-multiColumnAd.vue
  3. 2
      pages.json
  4. 20
      pages/address/add/add.less
  5. 40
      pages/address/add/add.vue
  6. 40
      pages/address/list/list.less
  7. 80
      pages/address/list/list.vue
  8. 58
      pages/index/index/index.vue

8
common/styles/theme.css
View File

@ -19,8 +19,8 @@ checkbox .uni-checkbox-input {
radio .uni-radio-input.uni-radio-input-checked, radio .uni-radio-input.uni-radio-input-checked,
checkbox .uni-checkbox-input.uni-checkbox-input-checked { checkbox .uni-checkbox-input.uni-checkbox-input-checked {
/* border-radius: 50%; */ /* border-radius: 50%; */
border: 1px solid #1998FE !important;
background: #1998FE !important;
border: 1px solid #186c6b !important;
background: #186c6b !important;
color: #FFFFFF !important; color: #FFFFFF !important;
} }
@ -45,8 +45,8 @@ checkbox .wx-checkbox-input {
radio .wx-radio-input.wx-radio-input-checked, radio .wx-radio-input.wx-radio-input-checked,
checkbox .wx-checkbox-input.wx-checkbox-input-checked { checkbox .wx-checkbox-input.wx-checkbox-input-checked {
border-radius: 50%; border-radius: 50%;
border: 1px solid #1998FE !important;
background: #1998FE !important;
border: 1px solid #186c6b !important;
background: #186c6b !important;
color: #FFFFFF !important; color: #FFFFFF !important;
} }

63
components/lf-multiColumnAd/lf-multiColumnAd.vue
View File

@ -0,0 +1,63 @@
<template>
<view class="content">
<view class="left">
<image class="left-img"></image>
</view>
<view class="right">
<view class="right-img">
<image></image>
</view>
<view class="right-img">
<image></image>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
}
},
created(){
},
methods: {
}
}
</script>
<style lang="scss" scoped="scoped">
.content{
width: 750rpx;
height: max-content;
box-sizing: border-box;
padding: 30rpx 32rpx;
display: flex;
justify-content: space-between;
.left{
width: 436rpx;
height: 436rpx;
.left-img{
width: 100%;
height: 100%;
background: #D8D8D8;
}
}
.right{
width: 228rpx;
height: 436rpx;
.right-img{
width: 228rpx;
height: 208rpx;
background: #D8D8D8;
&:nth-child(2n){
margin-top: 20rpx;
}
}
}
}
</style>

2
pages.json
View File

@ -744,7 +744,7 @@
}, },
{ {
"name": "测试", "name": "测试",
"path": "pages/index/classification/classification",
"path": "pages/user/personal/personal",
"query": "" "query": ""
} }

20
pages/address/add/add.less
View File

@ -8,16 +8,20 @@
} }
.address-info{ .address-info{
background: #FFFFFF; background: #FFFFFF;
padding: 0 32rpx;
.info-item{ .info-item{
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
padding-left: 15px;
// padding-left: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
color: #333333; color: #333333;
font-size: 13px; font-size: 13px;
font-weight:bold; font-weight:bold;
border-bottom: 1rpx solid #e5e5e5;
&:last-child{
border-bottom: none;
}
label{ label{
width: 80px; width: 80px;
display: block; display: block;
@ -115,12 +119,18 @@
} }
.button-box{ .button-box{
margin-top: 30px; margin-top: 30px;
display: flex;
justify-content: center;
.submit{ .submit{
background: @mainColor;
// background: @mainColor;
width: 550rpx;
height: 100rpx;
background: #15716E;
border-radius: 50rpx;
line-height: 100rpx;
} }
.delete { .delete {
background: @secColor;
// background: @secColor;
} }
button{ button{
margin: 0 20px 15px 20px; margin: 0 20px 15px 20px;

40
pages/address/add/add.vue
View File

@ -4,13 +4,25 @@
<image src="https://cdn.guojiang.club/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200403161800.png" mode="widthFix"></image> <image src="https://cdn.guojiang.club/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200403161800.png" mode="widthFix"></image>
</view> </view>
<view class="address-info"> <view class="address-info">
<view class="info-item mx-1px-bottom">
<view class="info-item">
<label for="name">姓名:</label> <label for="name">姓名:</label>
<view class="form-control"> <view class="form-control">
<input type="text" id="name" data-type="accept_name" :value="detail.accept_name" @input="input" /> <input type="text" id="name" data-type="accept_name" :value="detail.accept_name" @input="input" />
</view> </view>
</view> </view>
<view class="info-item mx-1px-bottom">
<view class="info-item">
<radio-group class="lf-flex">
<label>
<radio></radio>
<text class="lf-m-l-15">女士</text>
</label>
<label>
<radio></radio>
<text class="lf-m-l-15">先生</text>
</label>
</radio-group>
</view>
<view class="info-item">
<label for="phone">联系电话:</label> <label for="phone">联系电话:</label>
<view class="form-control"> <view class="form-control">
<input type="number" id="phone" data-type="mobile" :value="detail.mobile" @input="input" /> <input type="number" id="phone" data-type="mobile" :value="detail.mobile" @input="input" />
@ -18,7 +30,7 @@
</view> </view>
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<view class="info-item mx-1px-bottom">
<view class="info-item">
<label>所在地:</label> <label>所在地:</label>
<view class="form-control select"> <view class="form-control select">
<picker mode="region" @change="bindRegionChange" :value="detail.address_name"> <picker mode="region" @change="bindRegionChange" :value="detail.address_name">
@ -32,7 +44,7 @@
<!-- #ifdef APP-PLUS || H5 --> <!-- #ifdef APP-PLUS || H5 -->
<view class="mpvue-picker"> <view class="mpvue-picker">
<view class="info-item mx-1px-bottom uni-btn-v" @click="showMulLinkageThreePicker">
<view class="info-item uni-btn-v" @click="showMulLinkageThreePicker">
<label>所在地:</label> <label>所在地:</label>
<view class="form-control select"> <view class="form-control select">
<view class="picker uni-common-mt"> <view class="picker uni-common-mt">
@ -50,13 +62,20 @@
<view class="info-item mx-1px-bottom">
<view class="info-item">
<label for="address">详细地址:</label> <label for="address">详细地址:</label>
<view class="form-control"> <view class="form-control">
<input type="text" id="address" data-type="address" :value="detail.address" @input="input" /> <input type="text" id="address" data-type="address" :value="detail.address" @input="input" />
</view> </view>
</view> </view>
<view class="info-item mx-1px-bottom">
<!-- TODO -->
<view class="info-item">
<label for="name">门牌号:</label>
<view class="form-control">
<input type="text" id="name" data-type="accept_name" :value="detail.accept_name" @input="input" />
</view>
</view>
<view class="info-item">
<label class="checkbox" @tap="check"> <label class="checkbox" @tap="check">
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<checkbox color="red" :checked="detail.is_default"></checkbox> <checkbox color="red" :checked="detail.is_default"></checkbox>
@ -67,7 +86,7 @@
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<checkbox color="#FFFFFF" :checked="detail.is_default"></checkbox> <checkbox color="#FFFFFF" :checked="detail.is_default"></checkbox>
<!-- #endif --> <!-- #endif -->
<text>设为默认地址</text>
<text class="lf-m-l-10">设为默认地址</text>
</label> </label>
</view> </view>
</view> </view>
@ -80,7 +99,7 @@
</view> </view>
<view class="button-box"> <view class="button-box">
<button type="primary" :style="'background: ' + config.mainColor" class="submit" @tap="submit" :loading="loading">保存</button> <button type="primary" :style="'background: ' + config.mainColor" class="submit" @tap="submit" :loading="loading">保存</button>
<button type="warn" class="delete" :style="'background: ' + config.secColor" v-if="id" @tap="deleteAddress" :loading="deleteLoading">删除</button>
<!-- <button type="warn" class="delete" :style="'background: ' + config.secColor" v-if="id" @tap="deleteAddress" :loading="deleteLoading">删除</button> -->
</view> </view>
</view> </view>
@ -591,6 +610,9 @@ export default {
watch: {} watch: {}
}; };
</script> </script>
<style rel="stylesheet/less" lang="less">
<style rel="stylesheet/less" lang="less" scoped>
@import "add"; @import "add";
.identify-address>textarea{
border-color: #e5e5e5 !important;
}
</style> </style>

40
pages/address/list/list.less
View File

@ -1,14 +1,25 @@
#address-list{ #address-list{
.list-box{ .list-box{
padding-bottom: 20px;
// padding-bottom: 20px;
padding: 30rpx 32rpx;
width: 750rpx;
height: max-content;
box-sizing: border-box;
.list-item{ .list-item{
font-size:14px; font-size:14px;
background:#FFFFFF; background:#FFFFFF;
padding:15px 40px 15px 15px;
background-image:url("https://uto.ibrand.cc/m/static/img/ic_forward.png");
background-repeat:no-repeat;
background-position:100%;
background-size:20px;
// padding:15px 40px 15px 15px;
// background-image:url("https://uto.ibrand.cc/m/static/img/ic_forward.png");
// background-repeat:no-repeat;
// background-position:100%;
// background-size:20px;
width: 686rpx;
height: max-content;
background: #FFFFFF;
border-radius: 20rpx;
padding: 30rpx;
box-sizing: border-box;
margin-bottom: 30rpx;
.user{ .user{
display: flex; display: flex;
@ -33,18 +44,23 @@
} }
.add-address{ .add-address{
background-color: #ffffff;
display: flex;
justify-content: center;
// background-color: #ffffff;
padding:10px 12px; padding:10px 12px;
.small-btn{ .small-btn{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content:center; justify-content:center;
background-color:#FB5054;
// background-color:#FB5054;
color: #FFFFFF; color: #FFFFFF;
border-radius:4px;
height: 40px;
line-height: 40px;
// border-radius:4px;
// height: 40px;
line-height: 40rpx;
width: 550rpx;
height: 100rpx;
background: #15716E;
border-radius: 50rpx;
.icon{ .icon{
margin-right: 15px; margin-right: 15px;
} }

80
pages/address/list/list.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<view id="address-list"> <view id="address-list">
<view class="list-box"> <view class="list-box">
<view class="list-item mx-1px-bottom" :data-info="JSON.stringify(item)" :data-id="item.id" v-for="(item, index) in list" :key="index" @tap="setInfo">
<view class="user">
<view class="list-item" :data-info="JSON.stringify(item)" :data-id="item.id" v-for="(item, index) in list" :key="index">
<!-- <view class="user">
<view class="name"> <view class="name">
<text>{{item.accept_name}}</text> <text>{{item.accept_name}}</text>
<text class="phone">{{item.mobile}}</text> <text class="phone">{{item.mobile}}</text>
@ -11,17 +11,39 @@
默认 默认
</view> </view>
</view> </view>
<view class="address">{{item.address_name}} {{item.address}}</view>
<view class="address">{{item.address_name}} {{item.address}}</view> -->
<view class="lf-font-28 user-item" @tap="setInfo(item)">
<text class="lf-color-black lf-font-bold">{{item.accept_name}}</text>
<text class="lf-color-777 lf-m-l-20">{{item.mobile}}</text>
</view>
<view class="address-item lf-line-2" @tap="setInfo(item)">
<text>{{item.address_name}}</text>
<text>{{item.address}}</text>
</view>
<view class="menu-item lf-row-between lf-m-t-30">
<view class="lf-row-center">
<checkbox></checkbox>
<text class="lf-m-l-15 lf-font-24 lf-color-777">默认地址</text>
</view>
<view class="lf-row-between">
<view>
<text class="lf-iconfont icon--1"></text>
<text class="lf-m-l-10">编辑</text>
</view>
<view class="lf-m-l-50">
<text class="lf-iconfont icon--1"></text>
<text class="lf-m-l-10">删除</text>
</view>
</view>
</view>
</view> </view>
</view> </view>
<view class="add-address" @tap="add"> <view class="add-address" @tap="add">
<view class="small-btn"> <view class="small-btn">
<view class="icon iconfont icon-juxing">
</view>
<view>
新增收货地址
</view>
<text class="lf-iconfont icon--2"></text>
<text class="lf-m-l-10">新增收货地址</text>
</view> </view>
</view> </view>
</view> </view>
@ -33,7 +55,19 @@ import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';
export default { export default {
data() { data() {
return { return {
list: [],
list: [{
accept_name: '加号',
mobile: '12373873873',
address_name: '广西南宁',
address: '细丝里流向17号',
is_default: true
},{
accept_name: '加号',
mobile: '12373873873',
address_name: '广西南宁',
address: '细丝里流向17号',
is_default: true
}],
order_no: '', order_no: '',
url: '', url: '',
id:'' id:''
@ -41,7 +75,8 @@ export default {
}, },
onShow() { onShow() {
this.queryAddressList(); // let app =getApp();
this.queryAddressList(); // let app =getApp(); 暂时注释
// app.isBirthday().then(()=>{ // app.isBirthday().then(()=>{
// if(this.$cookieStorage.get("birthday_gift")){ // if(this.$cookieStorage.get("birthday_gift")){
// var giftData=this.$cookieStorage.get("birthday_gift").data; // var giftData=this.$cookieStorage.get("birthday_gift").data;
@ -51,6 +86,7 @@ export default {
}, },
onLoad(e) { onLoad(e) {
// 暂时注释
pageLogin(getUrl()); pageLogin(getUrl());
this.setData({ this.setData({
order_no: e.order_no, order_no: e.order_no,
@ -62,9 +98,10 @@ export default {
props: {}, props: {},
methods: { methods: {
setInfo(e) { setInfo(e) {
var from = e.currentTarget.dataset.info;
// var from = e.currentTarget.dataset.info;
var from = e;
var data = this.$cookieStorage.get('order_form'); var data = this.$cookieStorage.get('order_form');
var from=JSON.parse(from);
// var from=JSON.parse(from);
if (!data) { if (!data) {
return this.view(from.id); return this.view(from.id);
@ -152,6 +189,23 @@ export default {
watch: {} watch: {}
}; };
</script> </script>
<style>
page{
background-color: #F8F8F8;
}
</style>
<style rel="stylesheet/less" lang="less"> <style rel="stylesheet/less" lang="less">
@import "list"; @import "list";
.user-item, .menu-item{
height: 50rpx;
width: 100%;
}
.address-item{
width: 100%;
margin-top: 10rpx;
font-size: 28rpx;
color: #333333;
}
</style> </style>

58
pages/index/index/index.vue
View File

@ -90,6 +90,10 @@
<view class="lf-activity" v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length" @click="$msg('活动页入口')"> <view class="lf-activity" v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length" @click="$msg('活动页入口')">
<image src="https://picsum.photos/200" mode="aspectFill"></image> <image src="https://picsum.photos/200" mode="aspectFill"></image>
</view> </view>
<!-- TODO 广告活动模块 -->
<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
<lf-multi-column-ad></lf-multi-column-ad>
</view>
<!-- TODO 首页发现推荐模块 --> <!-- TODO 首页发现推荐模块 -->
<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length"> <view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
<lf-index-find></lf-index-find> <lf-index-find></lf-index-find>
@ -115,7 +119,9 @@
<indexGrouping :grouping-data="item.value" :meta="item.meta"></indexGrouping> <indexGrouping :grouping-data="item.value" :meta="item.meta"></indexGrouping>
</view> </view>
<!-- TODO 为你推荐模块 --> <!-- TODO 为你推荐模块 -->
<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
<lf-waterfall :list="recommend_list"></lf-waterfall>
</view>
</view> </view>
</block> </block>
<view class="author"> <view class="author">
@ -386,6 +392,8 @@
import lfIndexFind from '@/components/lf-indexFind/lf-indexFind.vue'; import lfIndexFind from '@/components/lf-indexFind/lf-indexFind.vue';
import lfIndexShopMatrix from '@/components/lf-indexShopMatrix/lf-indexShopMatrix.vue'; import lfIndexShopMatrix from '@/components/lf-indexShopMatrix/lf-indexShopMatrix.vue';
import lfShopGoodsCard from '@/components/lf-shopGoodsCard/lf-shopGoodsCard.vue'; import lfShopGoodsCard from '@/components/lf-shopGoodsCard/lf-shopGoodsCard.vue';
import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
import lfMultiColumnAd from '@/components/lf-multiColumnAd/lf-multiColumnAd.vue';
var app = getApp(); var app = getApp();
export default { export default {
data() { data() {
@ -426,7 +434,49 @@
microData:"", microData:"",
is_login:'',// 是否是登陆状态 is_login:'',// 是否是登陆状态
show_ad: true, // 是否显示ad广告 show_ad: true, // 是否显示ad广告
nav_bg_color: 'transparent' // 导航背景颜色
nav_bg_color: 'transparent' ,// 导航背景颜色
recommend_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)"
}
]
}; };
}, },
// 注册组件 // 注册组件
@ -451,7 +501,9 @@
lfAdModal, lfAdModal,
lfIndexFind, lfIndexFind,
lfIndexShopMatrix, lfIndexShopMatrix,
lfShopGoodsCard
lfShopGoodsCard,
lfWaterfall,
lfMultiColumnAd
}, },
onShow(e) { onShow(e) {

Write Preview
Loading…
Cancel
Save