admin/order
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

python学习

Browse Source
This commit is contained in:
jianbo
2020-11-17 18:52:15 +08:00
parent 780443e7d1
commit 51fd976127
329 changed files with 14341 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1362
native/template/calendar/index.js Normal file
View File

File diff suppressed because it is too large Load Diff

46
native/template/calendar/index.wxml Normal file
View File

@@ -0,0 +1,46 @@
<template name="calendar">
<view class="flex box box-tb box-align-center">
<view class="calendar pink-color box box-tb">
<view class="top-handle fs28 box box-lr box-align-center box-pack-center">
<!-- <view class="prev box box-rl" bindtap="choosePrevMonth" data-handle="prev">
<view class="prev-handle box box-lr box-align-center box-pack-center">《</view>
</view> -->
<view class="date-area box box-lr box-align-center box-pack-center">{{curYear || "--"}} 年 {{curMonth || "--"}} 月</view>
<!-- <view class="next box box-lr" bindtap="chooseNextMonth" data-handle="next">
<view class="next-handle box box-lr box-align-center box-pack-center">》</view>
</view> -->
</view>
<view class="weeks box box-lr box-align-center">
<view class="week fs28" wx:for="{{weeksCh}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
</view>
<view class="perspective">
<view class="days box box-lr box-wrap {{leftSwipe ? 'leftRoate' : ''}} {{rightSwipe ? 'rightRoate' : ''}}">
<view wx:if="{{empytGrids}}" class="grid disable-day-color box box-align-center box-pack-center"
wx:for="{{empytGrids}}"
wx:key="{{index}}"
data-idx="{{index}}">
<view class="day box box-align-center box-pack-center">{{item}}</view>
</view>
<view class="grid normal-day-color box box-align-center box-pack-center"
wx:for="{{days}}"
wx:key="{{index}}"
data-disable="{{item.disable}}"
data-idx="{{index}}"
bindtap="tapDayItem">
<view class="day-with-dot box box-tb box-align-center box-pack-center">
<view wx:if="{{item.showTodoLabel && todoLabelPos === 'top'}}" class="{{item.todoText ? 'todo-text' : 'todo-dot'}}" style="background-color: {{todoLabelColor}}">{{item.todoText}}</view>
<view class="day border-radius {{item.choosed ? 'day-choosed-color pink-bg' : ''}} {{ item.disable ? 'disable-day-color disable-day-circle' : '' }} box box-align-center box-pack-center">{{item.day}}</view>
<view wx:if="{{item.showTodoLabel && todoLabelPos === 'bottom'}}" class="{{item.todoText ? 'todo-text' : 'todo-dot'}}" style="background-color: {{todoLabelColor}}">{{item.todoText}}</view>
</view>
</view>
<view class="grid disable-day-color box box-align-center box-pack-center"
wx:for="{{lastEmptyGrids}}"
wx:key="{{index}}"
data-idx="{{index}}">
<view class="day box box-align-center box-pack-center">{{item}}</view>
</view>
</view>
</view>
</view>
</view>
</template>

275
native/template/calendar/index.wxss Normal file
View File

@@ -0,0 +1,275 @@
/* pages/calendar/calendar.wxss */
.box {
display: flex;
}
.box-lr {
flex-direction: row;
}
.box-rl {
flex-direction: row-reverse;
}
.box-tb {
flex-direction: column;
}
.box-pack-center {
justify-content: center;
}
.box-align-center {
align-items: center;
}
.box-wrap {
flex-wrap: wrap;
}
.flex {
flex-grow: 1;
}
.bg {
background-image: linear-gradient(to bottom, #faefe7, #ffcbd7);
overflow: hidden;
}
.pink-color {
color: #ff629a;
}
.white-color {
color: #fff;
}
.fs24 {
font-size: 24rpx;
}
.fs28 {
font-size: 28rpx;
}
.fs32 {
font-size: 32rpx;
}
.fs36 {
font-size: 36rpx;
}
.calendar {
width: 100%;
box-sizing: border-box;
}
.top-handle {
height: 80rpx;
}
.prev {
text-align: right;
height: 80rpx;
}
.next {
height: 80rpx;
}
.prev-handle {
width: 80rpx;
height: 100%;
}
.next-handle {
width: 80rpx;
height: 100%;
}
.date-area {
width: 375rpx;
height: 80rpx;
text-align: center;
}
.weeks {
height: 50rpx;
line-height: 50rpx;
opacity: 0.5;
}
.week {
text-align: center;
line-height: 104rpx;
}
.grid,
.week {
width: 104rpx;
height: 104rpx;
}
.day {
width: 60rpx;
height: 60rpx;
font-size: 26rpx;
font-weight: 200;
}
.normal-day-color {
color: #88d2ac;
}
.day-choosed-color {
color: #fff;
}
.todo-dot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background-color: #cc5226;
}
.todo-text {
font-size: 22rpx;
color: #c2c2c2;
}
.day-with-dot {
height: 72rpx;
}
.disable-day-color {
color: #cacaca;
}
.disable-day-circle {
background-color: #f6f6f7;
}
.border-radius {
border-radius: 50%;
position: relative;
left: 0;
top: 0;
}
.pink-bg {
background-color: #ff629a;
transition: all 0.3s;
animation-name: choosed;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
@keyframes choosed {
from {
transform: scale(1);
}
50% {
transform: scale(0.9);
}
to {
transform: scale(1);
}
}
.purple-bg {
background-color: #b8b8f1;
}
.right-triangle::after {
content: '';
display: block;
width: 0;
height: 0;
border: 15rpx solid transparent;
border-left-color: #ff629a;
position: absolute;
right: -22rpx;
top: 18rpx;
}
.left-triangle::before {
content: '';
display: block;
width: 0;
height: 0;
border: 15rpx solid transparent;
border-right-color: #ff629a;
position: absolute;
left: -22rpx;
top: 18rpx;
}
.tips {
text-align: center;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.types {
background-color: #ffedf4;
height: 50rpx;
}
.types-desc {
padding: 0 20rpx;
}
.type-name {
margin-top: 50rpx;
margin-bottom: 30rpx;
}
.type-desc {
padding: 0 35rpx;
line-height: 38rpx;
}
.explain {
border-top: 1px solid #eee;
width: 90%;
margin: 20rpx 5% 20rpx 5%;
padding: 20rpx 0;
}
.explain-title {
font-weight: bold;
margin-bottom: 15rpx;
}
.explain-item {
padding: 8rpx 20rpx;
color: #fff;
}
.left-border-radius {
border-top-left-radius: 20rpx;
border-bottom-left-radius: 20rpx;
}
.right-border-radius {
border-top-right-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
.perspective {
perspective: 750rpx;
}
.leftRoate {
transition: all 1s;
transform: rotateY(-5deg);
}
.rightRoate {
transition: all 1s;
transform: rotateY(5deg);
}

441
native/template/datepicker/index.js Normal file
View File

@@ -0,0 +1,441 @@
/**
* 上滑
* @param {object} e 事件对象
* @returns {boolean} 布尔值
*/
export function isUpSlide(e) {
const { startX, startY } = this.data.gesture;
if (this.slideLock) {
const t = e.touches[0];
const deltaX = t.clientX - startX;
const deltaY = t.clientY - startY;
if (deltaY < -60 && deltaX < 20 && deltaX > -20) {
this.slideLock = false;
return true;
} else {
return false;
}
}
}
/**
* 下滑
* @param {object} e 事件对象
* @returns {boolean} 布尔值
*/
export function isDownSlide(e) {
const { startX, startY } = this.data.gesture;
if (this.slideLock) {
const t = e.touches[0];
const deltaX = t.clientX - startX;
const deltaY = t.clientY - startY;
if (deltaY > 60 && deltaX < 20 && deltaX > -20) {
this.slideLock = false;
return true;
} else {
return false;
}
}
}
/**
* 左滑
* @param {object} e 事件对象
* @returns {boolean} 布尔值
*/
export function isLeftSlide(e) {
const { startX, startY } = this.data.gesture;
if (this.slideLock) {
const t = e.touches[0];
const deltaX = t.clientX - startX;
const deltaY = t.clientY - startY;
if (deltaX < -60 && deltaY < 20 && deltaY > -20) {
this.slideLock = false;
return true;
} else {
return false;
}
}
}
/**
* 右滑
* @param {object} e 事件对象
* @returns {boolean} 布尔值
*/
export function isRightSlide(e) {
const { startX, startY } = this.data.gesture;
if (this.slideLock) {
const t = e.touches[0];
const deltaX = t.clientX - startX;
const deltaY = t.clientY - startY;
if (deltaX > 60 && deltaY < 20 && deltaY > -20) {
this.slideLock = false;
return true;
} else {
return false;
}
}
}
const conf = {
/**
* 计算指定月份共多少天
* @param {number} year 年份
* @param {number} month 月份
*/
getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate();
},
/**
* 计算指定月份第一天星期几
* @param {number} year 年份
* @param {number} month 月份
*/
getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
},
/**
* 计算当前月份前后两月应占的格子
* @param {number} year 年份
* @param {number} month 月份
*/
calculateEmptyGrids(year, month) {
conf.calculatePrevMonthGrids.call(this, year, month);
conf.calculateNextMonthGrids.call(this, year, month);
},
/**
* 计算上月应占的格子
* @param {number} year 年份
* @param {number} month 月份
*/
calculatePrevMonthGrids(year, month) {
const prevMonthDays = conf.getThisMonthDays(year, month - 1);
const firstDayOfWeek = conf.getFirstDayOfWeek(year, month);
let empytGrids = [];
if (firstDayOfWeek > 0) {
const len = prevMonthDays - firstDayOfWeek;
for (let i = prevMonthDays; i > len; i--) {
empytGrids.push(i);
}
this.setData({
'datepicker.empytGrids': empytGrids.reverse()
});
} else {
this.setData({
'datepicker.empytGrids': null
});
}
},
/**
* 计算下月应占的格子
* @param {number} year 年份
* @param {number} month 月份
*/
calculateNextMonthGrids(year, month) {
const thisMonthDays = conf.getThisMonthDays(year, month);
const lastDayWeek = new Date(`${year}-${month}-${thisMonthDays}`).getDay();
let lastEmptyGrids = [];
if (+lastDayWeek !== 6) {
const len = 7 - (lastDayWeek + 1);
for (let i = 1; i <= len; i++) {
lastEmptyGrids.push(i);
}
this.setData({
'datepicker.lastEmptyGrids': lastEmptyGrids
});
} else {
this.setData({
'datepicker.lastEmptyGrids': null
});
}
},
/**
* 设置日历面板数据
* @param {number} year 年份
* @param {number} month 月份
*/
calculateDays(year, month, curDate) {
const { todayTimestamp } = this.data.datepicker;
let days = [];
let day;
let selectMonth;
let selectYear;
const thisMonthDays = conf.getThisMonthDays(year, month);
const selectedDay = this.data.datepicker.selectedDay;
if (selectedDay && selectedDay.length) {
day = selectedDay[0].day;
selectMonth = selectedDay[0].month;
selectYear = selectedDay[0].year;
}
for (let i = 1; i <= thisMonthDays; i++) {
days.push({
day: i,
choosed: curDate
? i === curDate
: year === selectYear && month === selectMonth && i === day,
year,
month
});
}
days.map(item => {
const timestamp = new Date(
`${item.year}-${item.month}-${item.day}`
).getTime();
if (this.config.disablePastDay && timestamp - todayTimestamp < 0) {
item.disable = true;
}
});
const tmp = {
'datepicker.days': days
};
if (curDate) {
tmp['datepicker.selectedDay'] = [
{
day: curDate,
choosed: true,
year,
month
}
];
}
this.setData(tmp);
},
/**
* 跳转至今天
*/
jumpToToday() {
const date = new Date();
const curYear = date.getFullYear();
const curMonth = date.getMonth() + 1;
const curDate = date.getDate();
conf.renderCalendar.call(this, curYear, curMonth, curDate);
},
/**
* 渲染日历
* @param {number} year
* @param {number} month
* @param {number} day
*/
renderCalendar(year, month, day) {
const timestamp = new Date(`${year}-${month}-${day}`).getTime();
this.setData({
'datepicker.curYear': year,
'datepicker.curMonth': month,
'datepicker.todayTimestamp': timestamp
});
conf.calculateEmptyGrids.call(this, year, month);
conf.calculateDays.call(this, year, month, day);
},
/**
* 初始化日历选择器
* @param {number} curYear
* @param {number} curMonth
* @param {number} curDate
*/
init(curYear, curMonth, curDate) {
const self = _getCurrentPage();
const weeksCh = ['日', '一', '二', '三', '四', '五', '六'];
self.setData({
'datepicker.weeksCh': weeksCh,
'datepicker.showDatePicker': true
});
if (!curYear && !curMonth && !curDate) return conf.jumpToToday.call(self);
conf.renderCalendar.call(self, curYear, curMonth, curDate);
},
/**
* 点击输入框调起日历选择器
* @param {object} e 事件对象
*/
showDatepicker(e) {
const value = e.detail.value;
if (value && typeof value === 'string') {
const tmp = value.split('-');
conf.init(+tmp[0], +tmp[1], +tmp[2]);
} else {
conf.init();
}
},
/**
* 当输入日期时
* @param {object} e 事件对象
*/
onInputDate(e) {
const self = _getCurrentPage();
this.inputTimer && clearTimeout(this.inputTimer);
this.inputTimer = setTimeout(() => {
const v = e.detail.value;
const _v = (v && v.split('-')) || [];
const RegExpYear = /^\d{4}$/;
const RegExpMonth = /^(([0]?[1-9])|([1][0-2]))$/;
const RegExpDay = /^(([0]?[1-9])|([1-2][0-9])|(3[0-1]))$/;
if (_v && _v.length === 3) {
if (
RegExpYear.test(_v[0]) &&
RegExpMonth.test(_v[1]) &&
RegExpDay.test(_v[2])
) {
conf.renderCalendar.call(self, +_v[0], +_v[1], +_v[2]);
}
}
}, 500);
},
/**
* 计算当前日历面板月份的前一月数据
*/
choosePrevMonth() {
const { curYear, curMonth } = this.data.datepicker;
let newMonth = curMonth - 1;
let newYear = curYear;
if (newMonth < 1) {
newYear = curYear - 1;
newMonth = 12;
}
conf.calculateDays.call(this, newYear, newMonth);
conf.calculateEmptyGrids.call(this, newYear, newMonth);
this.setData({
'datepicker.curYear': newYear,
'datepicker.curMonth': newMonth
});
},
/**
* 计算当前日历面板月份的后一月数据
*/
chooseNextMonth() {
const { curYear, curMonth } = this.data.datepicker;
let newMonth = curMonth + 1;
let newYear = curYear;
if (newMonth > 12) {
newYear = curYear + 1;
newMonth = 1;
}
conf.calculateDays.call(this, newYear, newMonth);
conf.calculateEmptyGrids.call(this, newYear, newMonth);
this.setData({
'datepicker.curYear': newYear,
'datepicker.curMonth': newMonth
});
},
/**
* 切换月份
* @param {!object} e 事件对象
*/
handleCalendar(e) {
const handle = e.currentTarget.dataset.handle;
if (handle === 'prev') {
conf.choosePrevMonth.call(this);
} else {
conf.chooseNextMonth.call(this);
}
},
/**
* 选择具体日期
* @param {!object} e 事件对象
*/
tapDayItem(e) {
const { idx, disable } = e.currentTarget.dataset;
if (disable) return;
const config = this.config;
const { afterTapDay, onTapDay } = config;
const { curYear, curMonth, days } = this.data.datepicker;
const key = `datepicker.days[${idx}].choosed`;
const selectedValue = `${curYear}-${curMonth}-${days[idx].day}`;
if (this.config.type === 'timearea') {
if (onTapDay && typeof onTapDay === 'function') {
config.onTapDay(this.data.datepicker.days[idx], e);
return;
}
this.setData({
[key]: !days[idx].choosed
});
} else if (this.config.type === 'normal' && !days[idx].choosed) {
const prev = days.filter(item => item.choosed)[0];
const prevKey = prev && `datepicker.days[${prev.day - 1}].choosed`;
if (onTapDay && typeof onTapDay === 'function') {
config.onTapDay(days[idx], e);
return;
}
const data = {
[key]: true,
'datepicker.selectedValue': selectedValue,
'datepicker.selectedDay': [days[idx]]
};
if (prevKey) {
data[prevKey] = false;
}
this.setData(data);
}
if (afterTapDay && typeof afterTapDay === 'function') {
config.afterTapDay(days[idx]);
}
},
/**
* 关闭日历选择器
*/
closeDatePicker() {
this.setData({
'datepicker.showDatePicker': false
});
},
datepickerTouchstart(e) {
const t = e.touches[0];
const startX = t.clientX;
const startY = t.clientY;
this.slideLock = true; // 滑动事件加锁
this.setData({
'gesture.startX': startX,
'gesture.startY': startY
});
},
datepickerTouchmove(e) {
if (isLeftSlide.call(this, e)) {
conf.chooseNextMonth.call(this);
}
if (isRightSlide.call(this, e)) {
conf.choosePrevMonth.call(this);
}
}
};
function _getCurrentPage() {
const pages = getCurrentPages();
const last = pages.length - 1;
return pages[last];
}
/**
* 跳转至今天
*/
export const jumpToToday = () => {
const self = _getCurrentPage();
conf.jumpToToday.call(self);
};
export default (config = {}) => {
const self = _getCurrentPage();
if (!config.type) config.type = 'normal';
self.config = config;
self.setData({
datepicker: {
showDatePicker: false,
showInput: config.showInput === true || config.showInput === undefined,
placeholder: config.placeholder || '请选择日期'
}
});
self.datepickerTouchstart = conf.datepickerTouchstart.bind(self);
self.datepickerTouchmove = conf.datepickerTouchmove.bind(self);
self.showDatepicker = conf.showDatepicker.bind(self);
self.onInputDate = conf.onInputDate.bind(self);
self.closeDatePicker = conf.closeDatePicker.bind(self);
self.tapDayItem = conf.tapDayItem.bind(self);
self.handleCalendar = conf.handleCalendar.bind(self);
};
/**
* 获取已选择的日期
*/
export const getSelectedDay = () => {
const self = _getCurrentPage();
return self.data.datepicker.selectedDay;
};

49
native/template/datepicker/index.wxml Normal file
View File

@@ -0,0 +1,49 @@
<template name="datepicker">
<view class="datepicker-bg" wx:if="{{showDatePicker}}" bindtap="closeDatePicker"></view>
<input
wx:if="{{showInput}}"
class="datepicker-input"
placeholder="{{placeholder}}"
value="{{selectedValue || ''}}"
type="text"
bindinput="onInputDate"
bindfocus="showDatepicker"/>
<view wx:if="{{showDatePicker}}" class="datepicker-wrap flex box box-tb box-align-center">
<view class="calendar pink-color box box-tb">
<view class="top-handle fs28 box box-lr box-align-center box-pack-center">
<view class="prev box box-rl" catchtap="handleCalendar" data-handle="prev">
<view class="prev-handle box box-lr box-align-center box-pack-center">《</view>
</view>
<view class="date-area box box-lr box-align-center box-pack-center">{{curYear || "--"}} 年 {{curMonth || "--"}} 月</view>
<view class="next box box-lr" catchtap="handleCalendar" data-handle="next">
<view class="next-handle box box-lr box-align-center box-pack-center">》</view>
</view>
</view>
<view wx:if="{{weeksCh}}" class="weeks box box-lr box-pack-center box-align-center">
<view class="flex week fs28" wx:for="{{weeksCh}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
</view>
<view class="days box box-lr box-wrap" bindtouchstart="datepickerTouchstart" bindtouchmove="datepickerTouchmove">
<view wx:if="{{empytGrids}}" class="grid disable-day-color box box-align-center box-pack-center"
wx:for="{{empytGrids}}"
wx:key="{{index}}"
data-idx="{{index}}">
<view class="day box box-align-center box-pack-center">{{item}}</view>
</view>
<view class="grid normal-day-color box box-align-center box-pack-center"
wx:for="{{days}}"
wx:key="{{index}}"
data-idx="{{index}}"
data-disable="{{item.disable}}"
catchtap="tapDayItem">
<view class="day border-radius {{item.choosed ? 'day-choosed-color pink-bg' : ''}} {{ item.disable ? 'disable-day-color disable-day-circle' : '' }} box box-align-center box-pack-center">{{item.day}}</view>
</view>
<view class="grid disable-day-color box box-align-center box-pack-center"
wx:for="{{lastEmptyGrids}}"
wx:key="{{index}}"
data-idx="{{index}}">
<view class="day box box-align-center box-pack-center">{{item}}</view>
</view>
</view>
</view>
</view>
</template>

248
native/template/datepicker/index.wxss Normal file
View File

@@ -0,0 +1,248 @@
.box {
display: flex;
}
.box-lr {
flex-direction: row;
}
.box-rl {
flex-direction: row-reverse;
}
.box-tb {
flex-direction: column;
}
.box-pack-center {
justify-content: center;
}
.box-align-center {
align-items: center;
}
.box-wrap {
flex-wrap: wrap;
}
.flex {
flex-grow: 1;
}
.bg {
background-image: linear-gradient(to bottom, #faefe7, #ffcbd7);
overflow: hidden;
}
.pink-color {
color: #ff629a;
}
.white-color {
color: #fff;
}
.fs24 {
font-size: 24rpx;
}
.fs28 {
font-size: 28rpx;
}
.fs32 {
font-size: 32rpx;
}
.fs36 {
font-size: 36rpx;
}
.datepicker-bg {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.datepicker-input {
width: 300rpx;
height: 50rpx;
border: 1rpx solid #dadada;
border-radius: 10rpx;
padding: 10rpx;
font-size: 28rpx;
}
/* stylelint-disable-next-line */
.datepicker-input::-webkit-input-placeholder {
color: #dadada;
}
.datepicker-wrap {
background-color: #fff;
box-shadow: 0 0 10rpx 0 #dadada;
position: relative;
}
.top-handle {
height: 80rpx;
}
.prev {
text-align: right;
height: 80rpx;
}
.next {
height: 80rpx;
}
.prev-handle {
width: 80rpx;
height: 100%;
}
.next-handle {
width: 80rpx;
height: 100%;
}
.date-area {
width: 50%;
height: 80rpx;
text-align: center;
}
.weeks {
height: 50rpx;
line-height: 50rpx;
opacity: 0.5;
}
.week {
text-align: center;
}
.days {
height: 500rpx;
}
.grid {
width: 14.285714285714286%;
}
.day {
width: 60rpx;
height: 60rpx;
font-size: 26rpx;
font-weight: 200;
}
.normal-day-color {
color: #88d2ac;
}
.day-choosed-color {
color: #fff;
}
.disable-day-color {
color: #ddd;
}
.disable-day-circle {
background-color: #fbfdff;
}
.border-radius {
border-radius: 50%;
position: relative;
left: 0;
top: 0;
}
.pink-bg {
background-color: #ff629a;
}
.purple-bg {
background-color: #b8b8f1;
}
.right-triangle::after {
content: '';
display: block;
width: 0;
height: 0;
border: 15rpx solid transparent;
border-left-color: #ff629a;
position: absolute;
right: -22rpx;
top: 18rpx;
}
.left-triangle::before {
content: '';
display: block;
width: 0;
height: 0;
border: 15rpx solid transparent;
border-right-color: #ff629a;
position: absolute;
left: -22rpx;
top: 18rpx;
}
.tips {
text-align: center;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.types {
background-color: #ffedf4;
height: 50rpx;
}
.types-desc {
padding: 0 20rpx;
}
.type-name {
margin-top: 50rpx;
margin-bottom: 30rpx;
}
.type-desc {
padding: 0 35rpx;
line-height: 38rpx;
}
.explain {
border-top: 1px solid #eee;
width: 90%;
margin: 20rpx 5% 20rpx 5%;
padding: 20rpx 0;
}
.explain-title {
font-weight: bold;
margin-bottom: 15rpx;
}
.explain-item {
padding: 8rpx 20rpx;
color: #fff;
}
.left-border-radius {
border-top-left-radius: 20rpx;
border-bottom-left-radius: 20rpx;
}
.right-border-radius {
border-top-right-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}

10
native/template/login/index.js Normal file
View File

@@ -0,0 +1,10 @@
const WXAPI = require('apifm-wxapi')
export default {
init(page) {
// page._cancelLogin = this._cancelLogin;
// page._processLogin = this._processLogin;
},
}

20
native/template/login/index.wxml Normal file
View File

@@ -0,0 +1,20 @@
<template name="apifmLogin">
<view class="apifmLogin" hidden="{{wxlogin}}">
<view class="s-b">
<view class="s-l-b">
<image src="/images/nologin.png" />
<text>授权登录</text>
</view>
<view class="s-t-b">
<view class="s-t-i">
<text>·</text>请授权小程序登录</view>
<view class="s-t-i">
<text>·</text>我们不会公布您的这些信息</view>
<view class="s-t-i">
<text>·</text>只是为了给您提供更好的服务</view>
</view>
<button class="l" open-type="getUserInfo" bindgetuserinfo="processLogin">允许</button>
<button class="c" bindtap="cancelLogin" type="default">暂不登录</button>
</view>
</view>
</template>

91
native/template/login/index.wxss Normal file
View File

@@ -0,0 +1,91 @@
.apifmLogin {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 99999999999;
}
.apifmLogin .s-b {
width: 70%;
margin: 0 auto;
height: 600rpx;
background-color: #fff;
margin-top: 40%;
border-radius: 10rpx;
}
.apifmLogin .s-b .s-l-b {
text-align: center;
width: 80%;
border-bottom: 1px solid #f5f5f5;
margin: 0 auto;
padding-top: 20px;
}
.apifmLogin .s-b .s-l-b image {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
display: block;
margin: 0 auto;
}
.apifmLogin .s-b .s-l-b text {
font-size: 32rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
color: #333;
}
.apifmLogin .s-b .s-t-b {
margin-top: 20rpx;
margin-bottom: 40rpx;
text-align: center;
}
.apifmLogin .s-b .s-t-b .s-t-n {
font-size: 30rpx;
color: #333;
width: 80%;
margin: 0 auto;
}
.apifmLogin .s-b .s-t-b .s-t-i {
width: 80%;
margin: 0 auto;
font-size: 24rpx;
color: #999;
margin-top: 10rpx;
}
.apifmLogin .s-b .s-t-b .s-t-i text {
margin-right: 10rpx;
font-size: 26rpx;
}
.apifmLogin .s-b button::after {
border-radius: 4rpx;
border: 0;
}
.apifmLogin .s-b .l {
width: 80%;
height: 70rpx;
line-height: 70rpx;
font-size: 30rpx;
background-color: #04be01;
color: #fff;
}
.apifmLogin .s-b .c {
margin-top: 20rpx;
margin-bottom: 20rpx;
width: 80%;
height: 70rpx;
line-height: 70rpx;
font-size: 30rpx;
background-color: #ccc;
color: #333;
}

124
native/template/share/index.js Normal file
View File

@@ -0,0 +1,124 @@
const WXAPI = require('apifm-wxapi')
let goodsDetail;
const ctx = wx.createCanvasContext('firstCanvas');
const clientWidth = wx.getSystemInfoSync().screenWidth;
function px(number) {
return number * clientWidth / 750;
}
export default {
init(page) {
page._createPoster = this._createPoster;
page._drawQrcode = this._drawQrcode;
page._saveToMobile = this._saveToMobile;
},
_createPoster(e) {
wx.showLoading({
title: '正在生成海报',
});
ctx.setFillStyle('#fff');
ctx.fillRect(0, 0, px(600), px(1000));
this._drawQrcode();
},
async _drawQrcode() {
const _this = this
const qrcodeRes = await WXAPI.wxaQrcode({
scene: _this.data.goodsDetail.basicInfo.id + ',' + wx.getStorageSync('uid'),
page: 'pages/goods-details/index',
is_hyaline: false,
expireHours: 1
})
if (qrcodeRes.code != 0) {
wx.showModal({
title: '错误',
content: '无法获取小程序码',
showCancel: false,
})
return
}
let x = 0,
y = 0;
wx.getImageInfo({
src: _this.data.goodsDetail.basicInfo.pic,
success(res) {
ctx.drawImage(res.path, 0, 0, res.width, res.height, x, y, px(600), px(600))
y += px(600)
// x = px(300);
// y = y + 20;
// ctx.setFontSize(14)
// ctx.setFillStyle('#333')
// ctx.setTextAlign('center')
// let name = _this.data.goodsDetail.basicInfo.name
// ctx.fillText(name, x, y)
// x = px(300);
// y = y + 30;
// ctx.setFontSize(12)
// ctx.setFillStyle('#ccc')
// ctx.setTextAlign('center')
// name = wx.getStorageSync('mallName')
// ctx.fillText(name, x, y)
y = y - 20
// 写入二维码
wx.getImageInfo({
src: qrcodeRes.data,
success(qrRes) {
x = px(150)
y = y + 30
ctx.drawImage(qrRes.path, 0, 0, qrRes.width, qrRes.height, x, y, px(300), px(300))
x = px(300);
y = y + px(300) + 20;
ctx.setFontSize(12)
ctx.setFillStyle('#aaa')
ctx.setTextAlign('center')
ctx.fillText('长按识别小程序码查看详情', x, y)
ctx.draw()
wx.hideLoading();
_this.setData({
posterShow: true
})
}
})
}
})
},
_saveToMobile() {
const _this = this
wx.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: function (res) {
let tempFilePath = res.tempFilePath
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: (res) => {
wx.showModal({
content: '图片已保存到手机相册',
showCancel: false,
confirmText: '知道了',
confirmColor: '#333'
})
},
complete: () => {
_this.setData({
posterShow: false
})
},
fail: (res) => {
wx.showToast({
title: res.errMsg,
icon: 'none',
duration: 2000
})
}
})
}
})
},
}

12
native/template/share/index.wxml Normal file
View File

@@ -0,0 +1,12 @@
<template name="apifmShare">
<view class="apifmShare">
<view class='share'>
<image src='/images/share/share1.png'></image>
<button open-type='share'></button>
</view>
<view class='share'>
<image src='/images/share/share2.png'></image>
<button bindtap="_createPoster" data-d="{{goodsDetail}}"></button>
</view>
</view>
</template>

65
native/template/share/index.wxss Normal file
View File

@@ -0,0 +1,65 @@
.apifmShare {
position: relative;
z-index: 10;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 130rpx;
}
.apifmShare .share {
width: 50rpx;
height: 50rpx;
right: 130rpx;
top: 100rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24rpx;
background: #fff;
z-index: 20;
}
.apifmShare .share image {
width: 50rpx;
height: 50rpx;
}
.apifmShare .share button {
position: absolute;
height: 100%;
width: 100%;
opacity: 0.1;
z-index: 99;
}
.poster-mask {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background:rgba(0,0,0,.3);
z-index: 888;
}
.poster {
position: fixed;
width: 600rpx;
height: 1000rpx;
top: 30rpx;
left: 75rpx;
z-index: 999;
background-color: #fff;
}
.poster canvas {
width: 100%;
height: 100%;
}
.poster-btn {
position: fixed;
top: 1080rpx;
left: 290rpx;
z-index: 999;
}
.poster-btn button {
background-color: #4896e0;
color:#fff;
}