Skip to content

dev / zhiliang-light-mp

Go to a project
Toggle navigation
Toggle navigation pinning
fafba665 by simon
Options

版本提交

1 parent fca038b5
Inline Side-by-side
Showing 16 changed files with 598 additions and 53 deletions
......@@ -27,7 +27,7 @@
justify-content: space-between;
// text-align: center;
box-sizing: border-box;
font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif, FZY3JW-GB1-0;
font-family: PingFangSC-Regular, -apple-system-font, Helvetica Neue, Helvetica, sans-serif, FZY3JW-GB1-0;
}
.app__width {
......@@ -89,7 +89,7 @@
@font-face {
font-family: "iconfont";
src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOsAAsAAAAAB6gAAANdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDDIJmATYCJAMMCwgABCAFhG0HORuvBsgOJUHBwIABAAlgPHyN/f7c3UVEk0mi+3QSQxJNJCoexUrxUhhKIyT4UsKbL89+kizTNWb3wyt7UkR96ayA4xev1q04fZzIa32ey/Gt5wc26luWy5iT9qKFAcYBBbQ3RgEFWiAJesPYlRdxn0C9YccRqxl5ZcBCYSwLxJFS3gwsUk6lpj7UCtUle4t4Yqo2XaeXAHj0vx//QUhYkFRlxtq1w/Q2kPRz+iOmhipDoM51Gx7PD3aIjBlAITZLgxuoMDODUq8YTerLqxUhjRU3GgFfqeqrzT88kiCqGbWNYAJlEz+nbQmJP1h91rUZVMPcGeAZM51XhqohJw97O/vO23paqy3T6coNhsqQ1esr3nVWF19mTZ3YnOwtWwPk5bvMfvYCQV11V+xUzZx02tPO6H02TtP0y4dn5a7M9ravfPvs/poNl43TTmVrW87O66dcKzd3myo2Tjo5rW07l6+fcXXd3KmUDdBKXH240GtvAAw49qfa2BeatkTevUsumTJX5pzRRVy781FXe+YP15YALi0+kkDHQRm8OLz2sP/U1NGjIPxKdyVpafxHpKWvbajtddvnaxmZHLP0XGY1d2wvLarJWrd3LMD6Q1DiSPHusrPgvOxtlAKDyt7bk32nH3emP+npcwo2dKU/Vj040Jn2+HTvAU5VFtOf5vZDf683NVrpbEvIO7N3IX421A40MRbmdVIPQGXQhMi7/+o3vjanTBtt4/7Vygr4/p/GIHW7aqBWorXqz7QVQMVYCK4xXLnISlup57Ntpvcth3Ju8j8aod2b/tauu8+FWl0xkhpDyGqNEIWZQZUG86hWawH1pmUebtBBQolShynjAKHVFSTNPpG1ekUU5jWqdPuGaq1Bod56OJ7ZYCyUdKqEmjFqgy3dUNkqCozlwXRQX4Lk7VyzlNT4XAWSNMo4DA4IyuYzkYCkMTZoOuQhGDOQkUQeZoDHEMeJUC2JKtSKAxQYq2MCA5myFwW0ijygrZAgzTCkDdSiG6TUSiRg3MEYnft8CUSuHaeZVNNTka6ASDSUo0PBAgS1IDKNQquea3lGo4NcCAxjQAyJiAdlgFkIhyOC1OWzVJBWWABFj5RajECzH9PWGDC/mX++Q1DPGJsjRY6i5hgx1hSNwhTxatwNAAAAAA==') format('woff2'),
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOsAAsAAAAAB6gAAANdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDDIJmATYCJAMMCwgABCAFhG0HORuvBsgOJUHBwIABAAlgPHyN/f7c3UVEk0mi+3QSQxJNJCoexUrxUhhKIyT4UsKbL89+kizTNWb3wyt7UkR96ayA4xev1q04fZzIa32ey/Gt5wc26luWy5iT9qKFAcYBBbQ3RgEFWiAJesPYlRdxn0C9YccRqxl5ZcBCYSwLxJFS3gwsUk6lpj7UCtUle4t4Yqo2XaeXAHj0vx//QUhYkFRlxtq1w/Q2kPRz+iOmhipDoM51Gx7PD3aIjBlAITZLgxuoMDODUq8YTerLqxUhjRU3GgFfqeqrzT88kiCqGbWNYAJlEz+nbQmJP1h91rUZVMPcGeAZM51XhqohJw97O/vO23paqy3T6coNhsqQ1esr3nVWF19mTZ3YnOwtWwPk5bvMfvYCQV11V+xUzZx02tPO6H02TtP0y4dn5a7M9ravfPvs/poNl43TTmVrW87O66dcKzd3myo2Tjo5rW07l6+fcXXd3KmUDdBKXH240GtvAAw49qfa2BeatkTevUsumTJX5pzRRVy781FXe+YP15YALi0+kkDHQRm8OLz2sP/U1NGjIPxKdyVpafxHpKWvbajtddvnaxmZHLP0XGY1d2wvLarJWrd3LMD6Q1DiSPHusrPgvOxtlAKDyt7bk32nH3emP+npcwo2dKU/Vj040Jn2+HTvAU5VFtOf5vZDf683NVrpbEvIO7N3IX421A40MRbmdVIPQGXQhMi7/+o3vjanTBtt4/7Vygr4/p/GIHW7aqBWorXqz7QVQMVYCK4xXLnISlup57Ntpvcth3Ju8j8aod2b/tauu8+FWl0xkhpDyGqNEIWZQZUG86hWawH1pmUebtBBQolShynjAKHVFSTNPpG1ekUU5jWqdPuGaq1Bod56OJ7ZYCyUdKqEmjFqgy3dUNkqCozlwXRQX4Lk7VyzlNT4XAWSNMo4DA4IyuYzkYCkMTZoOuQhGDOQkUQeZoDHEMeJUC2JKtSKAxQYq2MCA5myFwW0ijygrZAgzTCkDdSiG6TUSiRg3MEYnft8CUSuHaeZVNNTka6ASDSUo0PBAgS1IDKNQquea3lGo4NcCAxjQAyJiAdlgFkIhyOC1OWzVJBWWABFj5RajECzH9PWGDC/mX++Q1DPGJsjRY6i5hgx1hSNwhTxatwNAAAAAA==') format('woff2'),
}
.iconfont {
......@@ -98,7 +98,7 @@
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
.iconrefresh:before {
content: "\e874";
......@@ -111,3 +111,8 @@
.drop-down-item :last-child {
border-bottom: none;
}
.link {
color: $colorBlue;
}
......
......@@ -8,6 +8,24 @@
*
*/
// 居中按钮样式
@mixin btn-center($width, $height) {
width: $width;
height: $height;
line-height: $height;
text-align: center;
}
// 超过多少行自动省略 默认一行
@mixin ellipsis($line:1) {
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
overflow: hidden;
text-overflow: ellipsis;
}
// 文字截取
@mixin text-overflow() {
overflow: hidden;
......@@ -32,11 +50,13 @@
// 清除浮动
@mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
......
......@@ -237,3 +237,8 @@
width: 100%;
height: 100%;
}
.shadow {
box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10);
border-radius: 8px;
}
......
let app = getApp();
Page({
data: {},
onLoad(options) {}
onLoad(options) {},
// 编辑收货地址
onAddressEditHandler() {
app.router.push({
path: "addressEdit"
})
},
// 添加收货地址
onAddressAddHandler() {
app.router.push({
path: "addressEdit"
})
}
})
......
{
"navigationBarTitleText": "more"
"navigationBarTitleText": "我的收货地址"
}
......
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';
$contentWidth:690px;
.page {
.bgc {}
.bgc {
background: #F8F8F8;
}
.bg {}
.main {
.top-space {
height: 0px;
height: 20px;
}
// 内容容器通用样式
.cont-wrap {
margin: 20px auto 0;
width: $contentWidth;
background: #fff;
padding: 30px 28px;
@extend .bb;
@extend .shadow;
}
.content {
position: relative;
.manage-wrap {}
// 表单
.form {
padding: 30px 30px;
&-tit {
margin-bottom: 28px;
display: flex;
justify-content: space-between;
font-size: 24px;
.address-message {
color: #333333;
display: flex;
align-content: center;
align-items: center;
height: 36px;
.address {
font-size: 32px;
margin-right: 20px;
vertical-align: middle;
}
.used {
color: #fff;
background: #FF7B21;
border-radius: 8px;
display: inline-block;
padding: 2px 12px;
text-align: center;
}
}
.address-edit {
color: #3680EB;
font-size: 28px;
}
}
&-item {
margin-bottom: 20px;
font-size: 28px;
display: flex;
.label {
min-width: 140px;
color: #666666;
}
.cont {
color: #333333;
@extend .bb;
padding-left: 20px;
}
}
}
// 添加地址
.manage-add {
width: $contentWidth;
margin: 20px auto;
@extend .bb;
background: #fff;
padding: 38px 30px;
font-size: 32px;
color: #3680EB;
@extend .shadow;
}
}
}
}
......
......@@ -3,6 +3,54 @@
<view class="app__bg bg"></view>
<view class="app__content main">
<view class="top-space"></view>
<view class="content"></view>
<view class="content">
<!-- 地址 item -->
<view class="manage-wrap">
<view class="cont-wrap form">
<view class="form-tit">
<view class="address-message">
<view class="address">地址一：默认地址</view>
<view class="used">当前使用</view>
</view>
<view bindtap="onAddressEditHandler" class="address-edit">编辑</view>
</view>
<view class="form-item">
<view class="label">收货人</view>
<view class="cont">郑亮亮</view>
</view>
<view class="form-item">
<view class="label">收货电话</view>
<view class="cont">13800000000</view>
</view>
<view class="form-item">
<view class="label">收货地址</view>
<view class="cont">深圳市龙岗区XXX路</view>
</view>
</view>
<view class="cont-wrap form">
<view class="form-tit">
<view class="address-message">
<view class="address">地址一：默认地址</view>
<view class="used">当前使用</view>
</view>
<view bindtap="onAddressEditHandler" class="address-edit">编辑</view>
</view>
<view class="form-item">
<view class="label">收货人</view>
<view class="cont">郑亮亮</view>
</view>
<view class="form-item">
<view class="label">收货电话</view>
<view class="cont">13800000000</view>
</view>
<view class="form-item">
<view class="label">收货地址</view>
<view class="cont">深圳市龙岗区XXX路</view>
</view>
</view>
</view>
<!-- 添加地址 -->
<view bindtap="onAddressAddHandler" class="manage-add">+添加地址</view>
</view>
</view>
</view>
......
let app = getApp();
Page({
data: {},
onLoad(options) {}
onLoad(options) {},
/**
* 确认兑换 / 提交订单
*/
onSubmitHandler() {
},
/**
* 收获地址管理
*/
onAddressManagementHandler() {
app.router.push({
path:"addressManagement"
})
}
})
......
{
"navigationBarTitleText": "more"
"navigationBarTitleText": "礼物详情"
}
......
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';
$contentWidth:690px;
.page {
.bgc {}
.bgc {
background: #F8F8F8;
}
.bg {}
.main {
.top-space {
height: 0px;
height: 20px;
}
.content {
position: relative;
// 内容容器通用样式
.cont-wrap {
margin: 20px auto 0;
width: $contentWidth;
background: #fff;
padding: 30px 28px;
@extend .bb;
@extend .shadow;
}
// 产品
.product {
width: $contentWidth;
margin: 0 auto;
&-item {
background: #fff;
width: $contentWidth;
height: 260px;
margin: 20px 0;
@extend .shadow;
@extend .bb;
padding: 30px;
display: flex;
justify-content: space-between;
.image-wrap {
width: 200px;
height: 200px;
.img {}
}
.cont {
position: relative;
flex: 1;
@extend .bb;
padding-left: 20px;
display: flex;
flex-wrap: wrap;
align-content: center;
.name {
font-size: 36px;
color: #333333;
@include ellipsis(2);
}
.integral {
margin-top: 16px;
font-size: 28px;
color: #FF7900;
}
}
}
}
// 京东卡使用规则
.use-rule {
color: #666666;
font-size: 28px;
line-height: 48px;
}
// 表单
.form {
padding: 30px 30px 40px;
&-tit {
margin-bottom: 22px;
display: flex;
justify-content: space-between;
font-size: 24px;
.address-message {
color: #333333;
}
.address-edit {
color: #3680EB;
}
}
&-item {
margin-bottom: 30px;
font-size: 28px;
display: flex;
.label {
min-width: 140px;
color: #666666;
}
.cont {
color: #333333;
@extend .bb;
padding-left: 20px;
}
}
&-remark {
background: #F8F8F8;
border: 0 solid #CCCCCC;
border-radius: 4px;
min-height: 200px;
@extend .bb;
padding: 20px;
color: #333333;
font-size: 28px;
}
}
}
// 底部
.bottom {
position: fixed;
bottom: 0;
// 提交栏
.submit-bar {
width: 750px;
height: 100px;
display: flex;
justify-content: space-between;
background-color: #fff;
&-cont {
flex: 1;
height: 100px;
line-height: 100px;
font-size: 32px;
@extend .bb;
padding: 0 30px;
.integral {
color: $colorBlue;
}
}
&-btn {
background: #3680EB;
color: #fff;
font-size: 32px;
@include btn-center(240px, 100px);
}
}
}
}
}
......
......@@ -3,6 +3,58 @@
<view class="app__bg bg"></view>
<view class="app__content main">
<view class="top-space"></view>
<view class="content"></view>
<view class="content">
<view class="product">
<view class="product-item">
<view class="image-wrap">
<!-- <image /> -->
</view>
<view class="cont">
<view class="name">某东购物卡200元某东购物卡200元</view>
<view class="integral">消耗积分：3000分</view>
</view>
</view>
</view>
<block wx:if="{{1<0}}">
<!-- 使用规则 (京东卡) -->
<view class="cont-wrap use-rule">
京东E卡可在京东商城
<span class="link">www.jd.com</span>
上购买自营商品（“自营商品”指在商品详情页明确标识为自营的商品），用户可在订单结算时输入E卡密码并使用。
</view>
</block>
<block wx:else>
<!-- 表单提交 (实物) -->
<view class="cont-wrap form">
<view class="form-tit">
<view class="address-message">收货信息</view>
<view bindtap="onAddressManagementHandler" class="address-edit">更改地址</view>
</view>
<view class="form-item">
<view class="label">收货人</view>
<view class="cont">郑亮亮</view>
</view>
<view class="form-item">
<view class="label">收货电话</view>
<view class="cont">13800000000</view>
</view>
<view class="form-item">
<view class="label">收货地址</view>
<view class="cont">深圳市龙岗区XXX路</view>
</view>
<textarea placeholder="备注您的其他要求" class="form-remark"></textarea>
</view>
</block>
</view>
<view class="bottom">
<view class="submit-bar">
<view class="submit-bar-cont">
现有积分
<span class="integral">350</span>
分
</view>
<view bindtap="onSubmitHandler" class="submit-bar-btn">确认兑换</view>
</view>
</view>
</view>
</view>
......
let app = getApp();
Page({
data: {},
onLoad(options) {}
data: {
productList: ["", "", ""]
},
onLoad(options) {},
/**
* 显示礼物详情
*/
onShowGiftDetailHandler() {
app.router.push({
path: "giftDetail"
});
}
})
......
......@@ -82,10 +82,9 @@ $contentWidth:690px;
&-item {
background: #fff;
width: $contentWidth;
height: 260px;
// height: 260px;
margin: 20px 0;
box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10);
border-radius: 8px;
@extend .shadow;
@extend .bb;
padding: 30px;
display: flex;
......@@ -100,16 +99,20 @@ $contentWidth:690px;
.cont {
position: relative;
flex: 1;
@extend .bb;
padding-left: 20px;
.name {
font-size: 32px;
color: #333333;
@include ellipsis;
}
.desc {
font-size: 24px;
color: #999999;
margin-top: 12px;
@include ellipsis(2);
}
.integral {
......@@ -125,9 +128,9 @@ $contentWidth:690px;
bottom: 0;
right: 0;
width: 140px;
height: 64px;
line-height: 64px;
width: 142px;
height: 60px;
line-height: 60px;
text-align: center;
color: #fff;
border-radius: 8px;
......
......@@ -24,37 +24,15 @@
<view class="top-space"></view>
<view class="content">
<view class="product">
<view class="product-item">
<view class="product-item" wx:for="{{productList}}" wx:key="{{index}}">
<view class="image-wrap">
<!-- <image /> -->
</view>
<view class="cont">
<view class="name">某东购物卡200元</view>
<view class="desc">可在xx超市使用，可够买xxx</view>
<view class="desc">可在xx超市使用，可够买xxx可在xx超市使用，可够买xxx可在xx超市使用，可够买xxx</view>
<view class="integral">消耗积分：3000分</view>
<view class="btn">查看</view>
</view>
</view>
<view class="product-item">
<view class="image-wrap">
<!-- <image /> -->
</view>
<view class="cont">
<view class="name">某东购物卡200元</view>
<view class="desc">可在xx超市使用，可够买xxx</view>
<view class="integral">消耗积分：3000分</view>
<view class="btn">查看</view>
</view>
</view>
<view class="product-item">
<view class="image-wrap">
<!-- <image /> -->
</view>
<view class="cont">
<view class="name">某东购物卡200元</view>
<view class="desc">可在xx超市使用，可够买xxx</view>
<view class="integral">消耗积分：3000分</view>
<view class="btn">查看</view>
<view bindtap="onShowGiftDetailHandler" data-data="{{item}}" class="btn">查看</view>
</view>
</view>
</view>
......
......@@ -28,8 +28,7 @@ $contentWidth:670px;
width: $contentWidth;
height: 100px;
background: #FFFFFF;
box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10);
border-radius: 8px;
@extend .shadow;
margin: 222px auto 0;
display: flex;
justify-content: space-between;
......
......@@ -8,6 +8,31 @@ function checkMobile(str) {
}
/**
* 链接参数转换为obj
* 入参 完整链接
* @param {*} url
*/
function param2Obj(url) {
const search = url.split('?')[1]
if (!search) {
return {}
}
return JSON.parse(
'{"' +
decodeURIComponent(search)
.replace(/"/g, '\\"')
.replace(/&/g, '","')
.replace(/=/g, '":"') +
'"}'
)
}
/**
* 格式化日期常规日期
* 格式yyyy-MM-dd hh:mm:ss
* @param {*} date
*/
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
......@@ -17,18 +42,18 @@ function formatTime(date) {
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
/**
* 格式化数字，不足一位补充0
* @param {*} n
*/
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
/**
* 获取屏幕剩余高度
* useHeight 单位是rpx
......@@ -52,8 +77,142 @@ function getLastScreenHeight(useHeight = 0, unit = 'rpx') {
return lastHeight;
}
/**
* px转rpx
* @param {*} value
*/
function pxToRpx(value) {
let sysInfo = wx.getSystemInfoSync();
let clientWidth = sysInfo.windowWidth;
let result = value / 750 * clientWidth
return result;
}
// 格式化星期几
function formatWeek(week) {
let result = "";
switch (week) {
case 1:
result = "一";
break;
case 2:
result = "二";
break;
case 3:
result = "三";
break;
case 4:
result = "四";
break;
case 5:
result = "五";
break;
case 6:
result = "六";
break;
case 0:
result = "日";
break;
default:
break;
}
return result;
}
/**
* 获取点击传值
* @param {*} evt
* @param {*} key
*/
function getBindtapData(evt, key = "data") {
let keyStr = key || "data";
return evt.currentTarget.dataset[keyStr];
}
/**
* 获取小程序码
* path = "/pages/index/index?pa=1"
* @param {*} path
*/
function wxacodeGet(path) {
return " https://api.k.wxpai.cn/bizproxy/mzcfsapi/qrcode/create?path=" + encodeURIComponent(path);
}
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行，false 表非立即执行
*/
function debounce(func, wait, immediate) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
} else {
timeout = setTimeout(function () {
func.apply(context, args)
}, wait);
}
}
}
/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
* @param type 1 表时间戳版，2 表定时器版
* 时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。
*/
function throttle(func, wait, type) {
if (type === 1) {
var previous = 0;
} else if (type === 2) {
var timeout;
}
return function () {
let context = this;
let args = arguments;
if (type === 1) {
let now = Date.now();
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
} else if (type === 2) {
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
}
module.exports = {
formatTime: formatTime,
checkMobile: checkMobile,
getLastScreenHeight: getLastScreenHeight
getLastScreenHeight: getLastScreenHeight,
debounce: debounce,
throttle: throttle,
param2Obj: param2Obj,
pxToRpx: pxToRpx,
formatWeek: formatWeek,
getBindtapData: getBindtapData,
wxacodeGet: wxacodeGet,
}
......