Skip to content

7
7-Eleven
Commit d9229f06 by 赵雅纹
Options

Merge branch 'feature-zyw-sc' into 'dev_7.1.0' 

新增地址

See merge request !50
parents 4e5026e9 6251d6c1
Showing with 220 additions and 103 deletions
src/pages/addAddress/addAddress.js
......@@ -5,21 +5,28 @@ Page({
* 页面的初始数据
*/
data: {
isSelect:true,
addressId:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log(options)
if(options.id){
wx.setNavigationBarTitle({
title: '编辑地址'
})
this.setData({
addressId: options.id
})
}else{
wx.setNavigationBarTitle({
title: '新增地址'
})
}
},
/**
......@@ -29,38 +36,9 @@ Page({
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
settingDefaultAddress(){
this.setData({
isSelect: !this.data.isSelect
})
}
})
\ No newline at end of file
src/pages/addAddress/addAddress.wxml
......@@ -4,22 +4,32 @@
<form>
<view class="form">
<view class="form-label">姓名</view>
<input class="form-input" name="input" placeholder="请输入收货人真实姓名" />
<input class="form-input" placeholder-class="placeholder-picker" name="input" placeholder="请输入收货人真实姓名" />
</view>
<view class="form">
<view class="form-label">电话</view>
<input class="form-input" name="input" placeholder="请输入收货人手机号" />
<input class="form-input" placeholder-class="placeholder-picker" name="input" placeholder="请输入收货人手机号" />
</view>
<view class="form">
<view class="form-label">地区</view>
<input class="form-input" name="input" placeholder="" />
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}" class="form-input">
<view class="{{haveAddress ? 'picker' : 'placeholder-picker'}}">
请选择地区
</view>
</picker>
</view>
<view class="form">
<view class="form-label">详细地址</view>
<input class="form-input" name="input" placeholder="请输入街道、楼牌号" />
<input class="form-input" placeholder-class="placeholder-picker" name="input" placeholder="请输入街道、楼牌号" />
</view>
<view class="default-address" bindtap="settingDefaultAddress">
<view class="{{isSelect ? 'theme-color' : ''}} circle-radio" >
<image wx:if="{{isSelect}}" class="tick-success" src="/assets/imgs/7_1_0/tick-success.png" mode="widthFix"></image>
</view>
<text class="setting-default">设为默认地址</text>
</view>
<view class="address-bottom">
<button class="address-btn theme-color">保存并使用</button>
<button class="address-btn theme-color">{{addressId ? '保存并使用' : '保存收货地址'}}</button>
</view>
</form>
</view>
......
src/pages/addAddress/addAddress.wxss
......@@ -34,4 +34,29 @@
font-size: 25rpx;
height: 88rpx;
line-height: 88rpx;
}
.placeholder-picker{
color: #bbbbbb;
}
.circle-radio{
width: 32rpx;
height: 32rpx;
border-radius: 50%;
border: 1rpx solid rgba(0, 0, 0, 0.2);
line-height: 26rpx;
text-align: center;
}
.tick-success{
width: 18rpx;
}
.default-address{
position: fixed;
bottom: 116rpx;
left: 30rpx;
display: flex;
}
.setting-default{
margin-left: 22rpx;
color: #333333;
font-size: 25rpx;
}
\ No newline at end of file
src/pages/cart/cart.wxml
......@@ -15,7 +15,7 @@
<!-- 购物车列表 -->
<view class="cart-content">
<view class="cart-item" wx:for="{{cartList}}" wx:key="{{index}}">
<view class="cart-list" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="{{item.shows}}" data-index="{{ index}}">
<view class="cart-list" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="{{item.shows}}" data-index="{{index}}">
<view class="select-radio" catchtap="selectPro" data-index="{{index}}">
<view class="{{item.isSelect ? 'theme-color' : ''}} circle-radio" >
<image wx:if="{{item.isSelect}}" class="tick-success" src="/assets/imgs/7_1_0/tick-success.png" mode="widthFix"></image>
......
src/pages/myAddress/myAddress.js
......@@ -5,7 +5,23 @@ Page({
* 页面的初始数据
*/
data: {
isSelect:0,
addressList:[
{
name:'111',
phone:'211',
address:'JKDHFJHDF',
shows:''
},
{
name: '111',
phone: '211',
address: 'JKDHFJHDF',
shows:''
}
],
startX: '',
delBtnWidth: 66,//删除按钮宽度单位（rpx）
},
/**
......@@ -15,12 +31,6 @@ Page({
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
......@@ -29,40 +39,6 @@ Page({
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
//获取微信地址
chooseWxAddress() {
......@@ -78,4 +54,89 @@ Page({
}
})
},
//设置默认地址
settingDefalutAddress(e){
console.log(e)
this.setData({
isSelect: e.currentTarget.dataset.index
})
},
// 开始滑动事件
touchS: function (e) {
console.log('e', e)
if (e.touches.length == 1) {
this.setData({
//设置触摸起始点水平方向位置
startX: e.touches[0].clientX
});
}
},
touchM: function (e) {
console.log('333', e)
if (e.touches.length == 1) {
//手指移动时水平方向位置
var moveX = e.touches[0].clientX;
//手指起始点位置与移动期间的差值
var disX = this.data.startX - moveX;
var delBtnWidth = this.data.delBtnWidth;
var txtStyle = "";
if (disX == 0 || disX < 0) { //如果移动距离小于等于0，文本层位置不变
txtStyle = "left:0px";
} else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
txtStyle = "left:-" + disX + "px";
if (disX >= delBtnWidth) {
//控制手指移动距离最大值为删除按钮的宽度
txtStyle = "left:-" + delBtnWidth + "px";
}
}
var index = e.currentTarget.dataset.index;
var addressList = this.data.addressList;
addressList[index].shows = txtStyle;
console.log("1", addressList[index].shows);
//更新列表的状态
this.setData({
addressList: addressList
});
}
},
// 滑动中事件
touchE: function (e) {
if (e.changedTouches.length == 1) {
//手指移动结束后水平位置
var endX = e.changedTouches[0].clientX;
//触摸开始与结束，手指移动的距离
var disX = this.data.startX - endX;
var delBtnWidth = this.data.delBtnWidth;
//如果距离小于删除按钮的1/2，不显示删除按钮
var txtStyle = "";
txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
//获取手指触摸的是哪一项
var index = e.currentTarget.dataset.index;
var addressList = this.data.addressList;
addressList[index].shows = txtStyle;
console.log("1", addressList[index].shows);
//更新列表的状态
this.setData({
addressList: addressList
});
} else {
}
},
deleteAddress(e){
wx.showModal({
title: '提示',
content: '确认删除该地址吗？',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
})
\ No newline at end of file
src/pages/myAddress/myAddress.wxml
......@@ -4,19 +4,24 @@
<image class="wx-icon" src="/assets/imgs/7_1_0/wx-icon.png" mode="widthFix"></image>
<text class="wx-text">使用微信地址</text>
<image class="arrow-right" src="/assets/imgs/7_1_0/arrow-right.png" mode="widthFix"></image>
</view>
<view class="address-wrap">
<view class="address-ul">
<view class="address-list">
<view class="address-list" wx:for="{{addressList}}" wx:key="{{index}}" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="{{item.shows}}" data-index="{{index}}">
<view class="name">
姓名 1839787887
{{item.name}} {{item.phone}}
</view>
<view class="address-detail">详细地址</view>
<view class="default-address">设为默认地址</view>
<navigator url="/pages/addAddress/addAddress">
<view class="address-detail">{{item.address}}</view>
<view class="default-address" bindtap="settingDefalutAddress" data-index="{{index}}">
<view class="{{isSelect == index ? 'theme-color' : ''}} circle-radio" >
<image wx:if="{{isSelect == index}}" class="tick-success" src="/assets/imgs/7_1_0/tick-success.png" mode="widthFix"></image>
</view>
<text class="setting-default">设为默认地址</text>
</view>
<navigator url="/pages/addAddress/addAddress?id=1">
<image class="edit-img" mode="widthFix" src="/assets/imgs/7_1_0/edit.png"></image>
</navigator>
<view class="delete" bindtap="deleteAddress">删除</view>
</view>
</view>
</view>
......
src/pages/myAddress/myAddress.wxss
/* pages/myAddress/myAddress.wxss */
@import './../../base/base.wxss';
page{
width: 750rpx;
padding-bottom: 88rpx;
overflow-x: hidden;
}
.wx-address{
padding: 0 30rpx;
......@@ -25,13 +27,17 @@ page{
font-size: 25rpx;
margin-left: 15rpx;
}
.address-wrap{
width: 750rpx;
overflow-x: hidden;
}
.address-ul{
padding: 0 20rpx;
}
.address-list{
padding: 0 10rpx 37rpx;
padding: 37rpx 10rpx ;
border-bottom: 1px solid rgba(151,151,151,0.3);
margin-top: 37rpx;
/* margin-top: 37rpx; */
position: relative;
}
.name{
......@@ -43,15 +49,11 @@ page{
color: #787878;
margin-top: 8rpx;
}
.default-address{
font-size: 22rpx;
color: #808080;
margin-top: 25rpx;
}
.edit-img{
width: 24rpx;
position: absolute;
top: 0;
top: 37rpx;
right: 10rpx;
}
.address-bottom{
......@@ -66,4 +68,36 @@ page{
font-size: 25rpx;
height: 88rpx;
line-height: 88rpx;
}
.circle-radio{
width: 32rpx;
height: 32rpx;
border-radius: 50%;
border: 1rpx solid rgba(0, 0, 0, 0.2);
line-height: 26rpx;
text-align: center;
}
.tick-success{
width: 18rpx;
}
.default-address{
display: flex;
margin-top: 25rpx;
}
.setting-default{
margin-left: 19rpx;
font-size: 22rpx;
color: #808080;
}
.delete{
width: 132rpx;
height: 212rpx;
background-color: rgba(149, 149, 149, 1);
color: #ffffff;
font-size: 25rpx;
text-align: center;
line-height: 244rpx;
position: absolute;
top: 0;
right: -169rpx;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment