zhangjing/sykl-new
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

会员模块

Browse Source
This commit is contained in:
张慢慢
2023-12-15 17:53:08 +08:00
commit 2a998468d9
282 changed files with 14521 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
components/milliliter-input/milliliter-input.js Normal file
View File

@@ -0,0 +1,115 @@
// components/milliliter-input/milliliter-input.js
/** 附带输入框的数字拨盘自定义组件，封装了milliliter自定义组件
* 在引用页面使用 this.selectComponent() 获取组件对象，调用 number 可获取组件值
* careate by DH.tab
* 2021/07/14
*/
Component({
/**
* 组件的属性列表
*/
properties: {
/** 最大值 */
max: { type: Number, value: 120 },
/** 最小值 */
min: { type: Number, value: 0 },
/** 值 */
value: { type: Number, value: 0 },
/** 单位名称 */
unitName: { type: String },
/** 单位值 */
unitVal: { type: String, value: '厘米' },
/** 是否精确到3位小数 */
float: { type: Boolean, value: false },
/** 是否不可为空 */
noEmpty: { type: Boolean, value: false },
},
/**
* 组件的初始数据
*/
data: {
number: 0,
isblur: true,
first: true
},
attached() {
if(this.data.unitName == '身高') {
this.setData({ number: 160 })
} else {
this.setData({ number: 65 })
}
},
/**
* 组件的方法列表
*/
methods: {
/** 数字拨盘值改变事件 */
changeNumber(e) {
if (this.data.first)
this.setData({ first: false })
else
this.setData({ number: e.detail })
},
// 文本框获得焦点
onNumberFocus(e) {
this.setData({ isblur: false })
},
// 文本框输入事件
onNumberInput(e) {
let val = e.detail.value
// 检查是否出现多个小数点
let a = val.toString().indexOf('.'),
b = val.toString().lastIndexOf('.'),
res = '';
if (a != b) {
let t = val.toString().split('')
t.splice(t.lastIndexOf('.'), 1)
res = t.join('')
this.setData({ number: res })
}
},
// 文本框失去焦点
onNumberBlur(e) {
let val = e.detail.value
// 检查输入值是否溢出上限或下限
if (parseInt(val) > this.data.max)
val = this.data.max
if (parseInt(val) < this.data.min)
val = this.data.min
// 检查是否需要保留2位小数
if (this.data.float) {
let t = val.toString().split('.')
if (t.length > 1 && t[1].length > 3)
val = `${t[0]}.${t[1].substr(0, 3)}`
this.setData({
value: parseFloat(val),
number: parseFloat(val)
})
} else {
let tmp = val.toString().split('.')
if (tmp.length > 1)
this.setData({
value: parseFloat(tmp[0] + '.' + tmp[1].substr(0, 1)),
number: parseFloat(tmp[0] + '.' + tmp[1].substr(0, 1))
})
else
this.setData({
value: parseFloat(val),
number: parseFloat(val)
})
}
this.setData({ isblur: true })
},
}
})

6
components/milliliter-input/milliliter-input.json Normal file
View File

@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"milliliter": "../milliliter/milliliter"
}
}

15
components/milliliter-input/milliliter-input.wxml Normal file
View File

@@ -0,0 +1,15 @@
<!--
附带输入框的数字拨盘自定义组件，封装了milliliter自定义组件
components/milliliter-input/milliliter-input.wxml
-->
<view class="ctrlbox">
<view class="title">
<text wx:if="{{noEmpty}}">*</text>
<view class="title-name">{{unitName}}<text>*</text></view>
<view class="title-number">{{number + (isblur?' ':'')}}({{unitName == '体重' ? 'kg': 'cm'}})</view>
</view>
<milliliter isShow="{{true}}" isWeight="{{float}}" num="{{value}}" startNum="{{min}}" endNum="{{max}}" bind:getNum="changeNumber" />
<!-- <view class="numbox">
<input type="digit" value="{{number + (isblur?' '+unitVal:'')}}" bindinput="onNumberInput" catchtap="onNumberFocus" bindblur="onNumberBlur" data-key="height" maxlength="10" />
</view> -->
</view>

78
components/milliliter-input/milliliter-input.wxss Normal file
View File

@@ -0,0 +1,78 @@
/* components/milliliter-input/milliliter-input.wxss */
.ctrlbox {
width: 100%;
/* height: calc(312rpx - 41rpx); */
position: relative;
left: 50%;
transform: translate(-50%, 0);
padding-bottom: rpx;
overflow: hidden;
/* border-bottom: 3rpx dashed #e7e7e7; */
}
.ctrlbox>.title {
width: 100%;
height: 40rpx;
position: relative;
font-size: 30rpx;
color: #898d8d;
margin-bottom: 30rpx;
display: flex;
}
.title-name {
flex: 1;
color: #000000;
}
.title-number {
color: #000000;
}
.title-name text {
color: red;
padding-left: 10rpx;
}
.ctrlbox>.numbox {
width: 210rpx;
height: 73rpx;
line-height: 73rpx;
position: relative;
left: 50%;
transform: translate(-50%, 0);
background: #f5f5f5;
border-radius: 20rpx;
margin-top: 10rpx;
display: flex;
justify-content: center;
align-content: center;
}
.ctrlbox>.numbox>input {
width: 100%;
height: 100%;
line-height: 73rpx;
font-size: 30rpx;
font-weight: 500;
text-align: center;
color: #898d8d;
position: absolute;
left: 0;
}
.ctrlbox>.numbox>view {
width: 100%;
height: 100%;
line-height: 73rpx;
font-size: 30rpx;
font-weight: 500;
text-align: center;
color: #898d8d;
}
.ctrlbox>.title>text {
color: #fc0000;
margin-right: 10rpx;
}

122
components/milliliter/milliliter.js Normal file
View File

@@ -0,0 +1,122 @@
Component({
properties: {
// 显示开关
isShow: { type: Boolean, value: false },
// 设置返回单位（true：身高单位保留3位小数点）（false：体重单位保留1位小数点）
isWeight: { type: Boolean, value: false },
// 当前指数
num: {
type: Number, value: 0, observer: function () {
this.init()
}
},
// 最短指数
startNum: { type: Number, value: 0 },
// 最长指数
endNum: { type: Number, value: 200 },
},
data: {
type: '',
scrollWidth: 0,
scrollLeft: 0,
isEditVal: false,
currval: 0
},
methods: {
// 初始化
init() {
let { num } = this.data
this.setData({ displayNum: num })
if (num) {
if (this.data.scrollWidth) {
// 手动修改修改指数位置
this.setNum()
} else {
// 初始化修改指数位置
this.setData({ type: 'init', scrollLeft: 1 })
}
} else {
this.setData({ scrollLeft: 0 })
}
},
// (初始化/手动修改) 修改指数位置
setNum() {
// 当前指数
let { num } = this.data
// 只保留一位小数
num = Math.floor(num * 10) / 10
// 总宽度
let { scrollWidth, startNum, endNum } = this.data
// 10 / 20 * 100 == 50%
// 50% / 100 * 20 == 10
// 前后宽总值
let restValue = 20
// 实际总值
let value = endNum - startNum
// 得出前后宽占总宽的百分比 [+1以勉误差]
let restPercent = ((restValue + 1) / (restValue + value) * 100)
// 实际宽度 = (总宽度 - 前后宽度)
let width = scrollWidth - (restPercent / 100 * scrollWidth)
// 得出百分比
let percent = (num - startNum) / value * 100
// 得出x距离[+1以勉误差]
let scrollLeft = (percent / 100 * width) + 1
this.data.isEditVal = true
this.setData({ type: '', scrollLeft: scrollLeft, currval: num })
},
// 监听滚动
bindscroll(e) {
let { type, startNum, endNum, isWeight } = this.data
let { scrollLeft, scrollWidth } = e.detail
if (type == 'init') {
this.data.scrollWidth = scrollWidth
this.setNum()
} else {
// 前后宽总值
let restValue = 20
// 实际总值
let value = endNum - startNum
// 得出前后宽占总宽的百分比 [+1以勉误差]
let restPercent = ((restValue + 1) / (restValue + value) * 100)
// 实际宽度 = (总宽度 - 前后宽度)
let width = scrollWidth - (restPercent / 100 * scrollWidth)
// 当前进度百分比
let percent = scrollLeft / width * 100
// 得出当前百分比对应的值
let val1 = (startNum + (percent / 100 * value)).toFixed(1)
let list = val1.split('.')
let decimals = (list[1] >= 5) ? '' : ''
// let decimals = (list[1] >= 5) ? '.5' : '.0'
val1 = list[0] + decimals
let val2 = (startNum + (percent / 100 * value)).toFixed(0)
// 保留3位小数点
// let val2 = (startNum + (percent / 100 * value)).toFixed(3)
if (this.data.isEditVal) {
val2 = this.data.displayNum
this.data.isEditVal = false
} else
val2 = val2 > value ? value + '' : val2
// console.log({
// scrollLeft: '当前x距离' + scrollLeft,
// scrollWidth: '总宽度' + scrollWidth,
// restPercent: '前后宽占总宽的百分比' + restPercent,
// width: '实际宽度' + width,
// percent: '当前进度百分比' + percent,
// val1: '对应的值' + val1
// })
let res = isWeight ? val2 : val1
if(res>=endNum){
res=endNum
}
this.setData({ currval: res })
this.triggerEvent('getNum', res);
}
},
},
})

4
components/milliliter/milliliter.json Normal file
View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

86
components/milliliter/milliliter.wxml Normal file
View File

@@ -0,0 +1,86 @@
<view class="content" wx:if="{{isShow}}">
<view class="box">
<scroll-view scroll-x class="scroll-x" id="scroll-view" enhanced="{{true}}" bounces="{{false}}"
scroll-left="{{scrollLeft}}" show-scrollbar="{{false}}" bindscroll="bindscroll">
<view class="column long opacity-hide">
<view class="line"></view>
</view>
<view class="column short opacity-hide">
<view class="line"></view>
</view>
<view class="column short opacity-hide">
<view class="line"></view>
</view>
<view class="column short opacity-hide">
<view class="line"></view>
</view>
<view class="column short opacity-hide">
<view class="line"></view>
</view>
<view class="column long opacity-hide">
<view class="line"></view>
</view>
<view class="column short opacity-hide">
<view class="line"></view>
</view>
<view class="column short opacity-hide">
<view class="line"></view>
</view>
<view class="column short opacity-hide">
<view class="line"></view>
</view>
<view class="column short opacity-hide">
<view class="line"></view>
</view>
<block wx:for="{{endNum - startNum + 1}}" wx:key="endNum">
<block wx:if="{{item%5 == 0}}">
<view class="column long">
<view class="line"></view>
<view class="val">{{item + startNum}}</view>
</view>
<view class="column short {{(item == (endNum - startNum))? 'opacity-hide' : ''}}">
<view class="line"></view>
</view>
<view class="column short {{(item == (endNum - startNum))? 'opacity-hide' : ''}}">
<view class="line"></view>
</view>
<view class="column short {{(item == (endNum - startNum))? 'opacity-hide' : ''}}">
<view class="line"></view>
</view>
<view class="column short {{(item == (endNum - startNum))? 'opacity-hide' : ''}}">
<view class="line"></view>
</view>
</block>
</block>
<view class="column long opacity-hide">
<view class="line"></view>
</view>
<view class="column short opacity-hide">
<view class="line"></view>
</view>
<view class="column short opacity-hide">
<view class="line"></view>
</view>
<view class="column short opacity-hide">
<view class="line"></view>
</view>
<view class="column short opacity-hide">
<view class="line"></view>
</view>
<view class="column long opacity-hide">
<view class="line"></view>
</view>
</scroll-view>
</view>
<image class="pointer" src="https://api.siyuankunlun.com/storage/images/2023/11/15/9ffb11d9bde2ede9acdcd6f5c727f33d.png"></image>
<view class="shade-left"></view>
<!-- <view class="shade-left-hide" style="left:-{{shadeLeftPercent}}%;"></view> -->
<!-- <view class="shade-left-hide" style="transform: translateX(-{{shadeLeftPercent}}%);"></view> -->
<!-- <view class="shade-left-hide" style="width: {{shadeLeftPercent}}px;"></view> -->
<!-- <view class="shade-right-hide"></view> -->
<view class="shade-right"></view>
</view>

115
components/milliliter/milliliter.wxss Normal file
View File

@@ -0,0 +1,115 @@
.content {
width: 681rpx;
height: 139rpx;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.content .bg {
width: 681rpx;
height: 139rpx;
position: absolute;
left: 0;
top: 0;
}
.content .box {
width: 654rpx;
height: 139rpx;
white-space: nowrap;
}
.content .scroll-x {
width: 100%;
height: 100%;
white-space: nowrap;
}
.content .scroll-x .column {
width: 4.8%;
height: 100%;
position: relative;
display: inline-flex;
}
.content .scroll-x .column .val {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
font-size: 22rpx;
color: #898d8d;
text-align: center;
}
.content .scroll-x .opacity-hide {
opacity: 0;
}
.content .scroll-x .long .line {
width: 4rpx;
height: 86rpx;
position: absolute;
left: 50%;
top: 12%;
transform: translate(-50%, -12%);
background-color: #a4a7a7;
}
.content .scroll-x .short .line {
width: 4rpx;
height: 42rpx;
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -30%);
background-color: #a4a7a7;
}
.content .pointer {
width: 30rpx;
height: 100rpx;
position: absolute;
left: calc(50% + 3rpx);
top: 0;
transform: translateX(-50%);
}
.content .shade-left {
width: 80rpx;
height: 139rpx;
position: absolute;
left: 0;
top: 0;
background-image: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.38));
}
.content .shade-left-hide {
width: 326rpx;
height: 139rpx;
position: absolute;
left: 0;
top: 0;
background-color: #fff;
}
.content .shade-right {
width: 80rpx;
height: 139rpx;
position: absolute;
right: 0;
top: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.38), #ffffff);
}
.content .shade-right-hide {
width: 320rpx;
height: 139rpx;
position: absolute;
right: 0;
top: 0;
background-image: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 1));
}