厨房秤部分页面改版
|
|
@ -345,7 +345,7 @@ page {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: center;
|
||||||
|
|
||||||
icon {
|
icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -497,7 +497,7 @@ page {
|
||||||
.weight {
|
.weight {
|
||||||
width: auto;
|
width: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 12px;
|
font-size: 24rpx;
|
||||||
background: $uni-color-warning;
|
background: $uni-color-warning;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
|
||||||
|
|
@ -40,9 +40,13 @@
|
||||||
kcal: "",
|
kcal: "",
|
||||||
weight: "",
|
weight: "",
|
||||||
weightALL: "",
|
weightALL: "",
|
||||||
|
unit: '',
|
||||||
weight0: 0,
|
weight0: 0,
|
||||||
stopblue: false,
|
stopblue: false,
|
||||||
isConnection: 0, //是否连接成功
|
isConnection: 0, //是否连接成功
|
||||||
|
units: ['kg', '斤', 'st:lb', 'lb', 'g', 'ml', 'Waterml',
|
||||||
|
'milkml', 'oz', 'floz', 'lboz'
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -64,18 +68,23 @@
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
let that = this
|
let that = this
|
||||||
console.log("mounted", that.weightType)
|
console.log("mounted_new", that.weightType)
|
||||||
that.openBluetoothAdapter()
|
that.openBluetoothAdapter()
|
||||||
that.onBLEConnectionStateChange()
|
that.onBLEConnectionStateChange()
|
||||||
uni.onBluetoothAdapterStateChange(function(res) {
|
uni.onBluetoothAdapterStateChange(function(res) {
|
||||||
that.$store.commit("changeBluetooth", res.available);
|
that.$store.commit("changeBluetooth", res.available);
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
watch: {
|
destroyed() {
|
||||||
weightType: function() {
|
this.isConnection = 1
|
||||||
let that = this
|
this.closeBLEConnection()
|
||||||
that.openBluetoothAdapter()
|
this.closeBluetoothAdapter()
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
// weightType: function() {
|
||||||
|
// let that = this
|
||||||
|
// that.openBluetoothAdapter()
|
||||||
|
// },
|
||||||
isBluetoothTyle: function() {
|
isBluetoothTyle: function() {
|
||||||
let that = this
|
let that = this
|
||||||
if (!that.isBluetoothTyle) {
|
if (!that.isBluetoothTyle) {
|
||||||
|
|
@ -113,7 +122,8 @@
|
||||||
uni.startBluetoothDevicesDiscovery({
|
uni.startBluetoothDevicesDiscovery({
|
||||||
allowDuplicatesKey: true,
|
allowDuplicatesKey: true,
|
||||||
services: [
|
services: [
|
||||||
"F0A0",
|
// "F0A0",
|
||||||
|
// "A5FE"
|
||||||
],
|
],
|
||||||
success: res => {
|
success: res => {
|
||||||
that.isConnection = 0
|
that.isConnection = 0
|
||||||
|
|
@ -159,6 +169,8 @@
|
||||||
res.devices.forEach(device => {
|
res.devices.forEach(device => {
|
||||||
device.advertisData = device.advertisData ? device.advertisData : ''
|
device.advertisData = device.advertisData ? device.advertisData : ''
|
||||||
device.advertisServiceUUIDs = device.advertisServiceUUIDs ? device.advertisServiceUUIDs : ""
|
device.advertisServiceUUIDs = device.advertisServiceUUIDs ? device.advertisServiceUUIDs : ""
|
||||||
|
let value = that.$tools.ab2hex(device.advertisData, "")
|
||||||
|
let id = value.substring(0, 4)
|
||||||
if (!device.name && !device.localName) {
|
if (!device.name && !device.localName) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
@ -172,6 +184,7 @@
|
||||||
if (parseDataRes.status == 1) {
|
if (parseDataRes.status == 1) {
|
||||||
let data0 = parseDataRes.payload
|
let data0 = parseDataRes.payload
|
||||||
let data = parseInt(data0[3]).toString(16)
|
let data = parseInt(data0[3]).toString(16)
|
||||||
|
console.log('data:' + data)
|
||||||
let data1 = parseInt(data0[4]).toString(16)
|
let data1 = parseInt(data0[4]).toString(16)
|
||||||
let data2 = parseInt((data + data1), 16) //重量
|
let data2 = parseInt((data + data1), 16) //重量
|
||||||
//
|
//
|
||||||
|
|
@ -184,6 +197,9 @@
|
||||||
dot = num.toString().substring(1, 2)
|
dot = num.toString().substring(1, 2)
|
||||||
zfz = num.toString().substring(0, 1)
|
zfz = num.toString().substring(0, 1)
|
||||||
}
|
}
|
||||||
|
if(unit == '0') {
|
||||||
|
that.dw = 'g'
|
||||||
|
}
|
||||||
if (unit == "7") {
|
if (unit == "7") {
|
||||||
that.dw = "ml"
|
that.dw = "ml"
|
||||||
}
|
}
|
||||||
|
|
@ -210,10 +226,144 @@
|
||||||
that.kcal = (Number(that.weightKcal) / 100 * data2).toFixed(2)
|
that.kcal = (Number(that.weightKcal) / 100 * data2).toFixed(2)
|
||||||
console.log("analyzeData", data.weight, data2)
|
console.log("analyzeData", data.weight, data2)
|
||||||
}
|
}
|
||||||
|
}else if(device.name.indexOf('Chipsea-BLE') != -1 || device.localName.indexOf('Chipsea-BLE') != -1 || id == 'a5fe') {
|
||||||
|
that.stopBluetoothDevicesDiscovery()
|
||||||
|
that.connectDevice(device.deviceId)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
//连接设备
|
||||||
|
async connectDevice(device_id) {
|
||||||
|
let that = this;
|
||||||
|
uni.createBLEConnection({
|
||||||
|
deviceId: device_id,
|
||||||
|
success: res => {
|
||||||
|
setTimeout(function() {
|
||||||
|
that.getBLEDeviceServices(device_id)
|
||||||
|
}, 200)
|
||||||
|
},
|
||||||
|
fail: res => {
|
||||||
|
console.log("设备连接失败,请重新连接", res);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取设备的UUID
|
||||||
|
*/
|
||||||
|
getBLEDeviceServices(device_id) {
|
||||||
|
let serviceList = [];
|
||||||
|
let that = this;
|
||||||
|
uni.getBLEDeviceServices({
|
||||||
|
deviceId: device_id,
|
||||||
|
success: res => {
|
||||||
|
console.log("获取设备的UUID成功", res)
|
||||||
|
serviceList = res.services;
|
||||||
|
for (let i = 0; i < serviceList.length; i++) {
|
||||||
|
let service = serviceList[i];
|
||||||
|
if (service.uuid.indexOf("FFF0") != -1) {
|
||||||
|
that.getBLEDeviceCharacteristics(device_id, service.uuid);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: res => {
|
||||||
|
console.log('获取设备的UUID失败:', res)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取指定服务的特征值
|
||||||
|
*/
|
||||||
|
getBLEDeviceCharacteristics(deviceId, serviceId) {
|
||||||
|
let characteristicsList = [];
|
||||||
|
let that = this;
|
||||||
|
uni.getBLEDeviceCharacteristics({
|
||||||
|
deviceId: deviceId,
|
||||||
|
serviceId: serviceId,
|
||||||
|
success: res => {
|
||||||
|
console.log("服务的特征值成功", res)
|
||||||
|
let write, notify
|
||||||
|
for (let i = 0; i < res.characteristics.length; i++) {
|
||||||
|
let item = res.characteristics[i];
|
||||||
|
if (item.uuid.indexOf('0000FFF2') != -1) {
|
||||||
|
write = item.uuid
|
||||||
|
} else if (item.uuid.indexOf('0000FFF1') != -1) {
|
||||||
|
notify = item.uuid
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.notifyBLECharacteristicValueChange({
|
||||||
|
deviceId: deviceId,
|
||||||
|
serviceId: serviceId,
|
||||||
|
characteristicId: notify,
|
||||||
|
state: true,
|
||||||
|
success: () => {
|
||||||
|
that.isConnection = 3
|
||||||
|
that.$emit('connect_success')
|
||||||
|
|
||||||
|
uni.onBLECharacteristicValueChange(function(res) {
|
||||||
|
const value = res.value
|
||||||
|
const dataView = new DataView(value)
|
||||||
|
const header = dataView.getUint8(0)
|
||||||
|
|
||||||
|
// MCU主动上报数据
|
||||||
|
if (header === 0xC7) {
|
||||||
|
const cmd = dataView.getUint8(2)
|
||||||
|
|
||||||
|
switch (cmd) {
|
||||||
|
case 0x02:
|
||||||
|
that.parseWeightData(dataView)
|
||||||
|
break
|
||||||
|
|
||||||
|
case 0x03:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: res => {
|
||||||
|
console.log('获取特征值失败:', JSON.stringify(res))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: res => {
|
||||||
|
console.log('获取特征值失败:', JSON.stringify(res))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
parseWeightData(dataView) {
|
||||||
|
const statusByte = dataView.getUint8(4)
|
||||||
|
const isNegative = !!(statusByte & 0x80) // 最高位表示正负
|
||||||
|
const statusType = statusByte & 0x0F // 状态类型
|
||||||
|
|
||||||
|
// 组合24位重量值 (大端序)
|
||||||
|
const weightValue =
|
||||||
|
(dataView.getUint8(5) << 16) |
|
||||||
|
(dataView.getUint8(6) << 8) |
|
||||||
|
dataView.getUint8(7)
|
||||||
|
|
||||||
|
// 精度和单位
|
||||||
|
const unitByte = dataView.getUint8(8)
|
||||||
|
const precision = (unitByte & 0xF0) >> 4 // 高4位精度
|
||||||
|
const unitIndex = unitByte & 0x0F // 低4位单位
|
||||||
|
|
||||||
|
// 计算实际重量
|
||||||
|
let finalWeight = weightValue / Math.pow(10, precision)
|
||||||
|
if (isNegative) finalWeight = -finalWeight
|
||||||
|
|
||||||
|
// 更新状态
|
||||||
|
this.weight = finalWeight
|
||||||
|
this.dw = this.units[unitIndex] || 'g'
|
||||||
|
this.kcal = (Number(this.weightKcal) / 100 * finalWeight).toFixed(2)
|
||||||
|
// console.log('重量:' + finalWeight)
|
||||||
|
// console.log('单位:' + this.unit)
|
||||||
|
|
||||||
|
// 状态处理
|
||||||
|
// if (statusType === 0x02) {
|
||||||
|
// this.$emit('handleBle', finalWeight,this.unit,0)
|
||||||
|
// }
|
||||||
|
},
|
||||||
// 保存测量结果
|
// 保存测量结果
|
||||||
handlesub() {
|
handlesub() {
|
||||||
let that = this
|
let that = this
|
||||||
|
|
@ -232,31 +382,45 @@
|
||||||
handleDetailSub() {
|
handleDetailSub() {
|
||||||
let that = this
|
let that = this
|
||||||
if (that.weightType == 1) { //累计称重
|
if (that.weightType == 1) { //累计称重
|
||||||
that.weight0 = Number(that.weight) - Number(that.weightALL)
|
// that.weight0 = Number(that.weight) - Number(that.weightALL)
|
||||||
|
that.weight0 = Number((Number(that.weight) - Number(that.weightALL)).toFixed(2))
|
||||||
|
if(that.weight0 > 0) {
|
||||||
that.weightALL = that.weight
|
that.weightALL = that.weight
|
||||||
|
}else {
|
||||||
|
that.$tools.msg("数据异常,请清零后重新称重!")
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
that.weight0 = that.weight
|
that.weight0 = that.weight
|
||||||
}
|
}
|
||||||
if (Number(that.weight0) > 0) {
|
if (Number(that.weight0) > 0) {
|
||||||
that.$emit("handleDetailSub", that.weight0, that.dw, that.kcal)
|
that.$emit("handleDetailSub", that.weight0, that.dw, that.kcal)
|
||||||
that.stopBluetoothDevicesDiscovery() //取消蓝牙搜索
|
// that.stopBluetoothDevicesDiscovery() //取消蓝牙搜索
|
||||||
that.closeBLEConnection()
|
// that.closeBLEConnection()
|
||||||
that.closeBluetoothAdapter()
|
// that.closeBluetoothAdapter()
|
||||||
that.weight = 0
|
that.weight = 0
|
||||||
that.weight0 = 0
|
that.weight0 = 0
|
||||||
} else {
|
} else {
|
||||||
that.$tools.msg("数据异常,请清零后重新称重!")
|
that.$tools.msg("数据异常,请重新称重!")
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
//备料下一个
|
//备料下一个
|
||||||
handleDetailNext() {
|
handleDetailNext() {
|
||||||
let that = this
|
let that = this
|
||||||
if (that.weightType == 1) {
|
if (that.weightType == 1) {
|
||||||
that.weight0 = Number(that.weight) - Number(that.weightALL)
|
console.log('weight:' + that.weight)
|
||||||
|
console.log('weight0:' + that.weight0)
|
||||||
|
console.log('weightALL:' + that.weightALL)
|
||||||
|
// that.weight0 = Number(that.weight) - Number(that.weightALL)
|
||||||
|
that.weight0 = Number((Number(that.weight) - Number(that.weightALL)).toFixed(2))
|
||||||
|
if(that.weight0 > 0) {
|
||||||
that.weightALL = that.weight
|
that.weightALL = that.weight
|
||||||
|
}else {
|
||||||
|
that.$tools.msg("数据异常,请清零后重新称重!")
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
that.weight0 = that.weight
|
that.weight0 = that.weight
|
||||||
}
|
}
|
||||||
|
|
||||||
if (Number(that.weight0) > 0) {
|
if (Number(that.weight0) > 0) {
|
||||||
that.$emit("handleDetailNext", that.weight0, that.dw, that.kcal)
|
that.$emit("handleDetailNext", that.weight0, that.dw, that.kcal)
|
||||||
that.weight = 0
|
that.weight = 0
|
||||||
|
|
@ -266,6 +430,16 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
handlechongzhi(weight) {
|
||||||
|
let that = this
|
||||||
|
console.log('当前总重:' + that.weightALL)
|
||||||
|
console.log('重置重量:' + weight)
|
||||||
|
if (that.weightType == 1) {
|
||||||
|
that.weightALL = Number((Number(that.weightALL) - Number(weight)).toFixed(2))
|
||||||
|
console.log('剩余重量:' + that.weightALL)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
handleBack() {
|
handleBack() {
|
||||||
let that = this
|
let that = this
|
||||||
that.isConnection = 1
|
that.isConnection = 1
|
||||||
|
|
@ -296,6 +470,30 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
// isNutritionScale(advertisData) {
|
||||||
|
// const buffer = this.base64ToArrayBuffer(advertisData)
|
||||||
|
// const dataView = new DataView(buffer)
|
||||||
|
|
||||||
|
// // 检查厂商自定义数据头
|
||||||
|
// if (dataView.getUint16(0) !== 0xA5FE) return false
|
||||||
|
|
||||||
|
// // 检查产品类型 (营养秤:0x0001)
|
||||||
|
// const typeId = dataView.getUint16(2)
|
||||||
|
// if (typeId !== 0x0001) return false
|
||||||
|
|
||||||
|
// // 检查厂商ID (通用方案:0x0001)
|
||||||
|
// const vendorId = dataView.getUint16(4)
|
||||||
|
// return vendorId === 0x0001
|
||||||
|
// },
|
||||||
|
// base64ToArrayBuffer(base64) {
|
||||||
|
// const str = atob(base64)
|
||||||
|
// const buffer = new ArrayBuffer(str.length)
|
||||||
|
// const view = new Uint8Array(buffer)
|
||||||
|
// for (let i = 0; i < str.length; i++) {
|
||||||
|
// view[i] = str.charCodeAt(i)
|
||||||
|
// }
|
||||||
|
// return buffer
|
||||||
|
// }
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,15 @@
|
||||||
<image src="../static/cheng.png"></image>
|
<image src="../static/cheng.png"></image>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="isConnection == 3">
|
<view v-if="isConnection == 3">
|
||||||
|
<view class="weight-wrap">
|
||||||
<view class="weight">
|
<view class="weight">
|
||||||
<view>重量<text>{{weight}}</text>{{dw}}</view>
|
<text class="val">{{weight == '' ? '--':weight}}</text>
|
||||||
<view>热量<text>{{kcal}}</text>千卡</view>
|
<text class="unit">{{unitConversion(dw)}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="kcal">
|
||||||
|
<text class="val">{{kcal == '' ? 0 : kcal}}</text>
|
||||||
|
<text class="unit">千卡</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tips">
|
<view class="tips">
|
||||||
注:重新称重可更新当前数据
|
注:重新称重可更新当前数据
|
||||||
|
|
@ -37,7 +43,7 @@
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dw: "g",
|
dw: "g",
|
||||||
kcal: "",
|
kcal: 0,
|
||||||
weight: "",
|
weight: "",
|
||||||
weightALL: "",
|
weightALL: "",
|
||||||
unit: '',
|
unit: '',
|
||||||
|
|
@ -224,7 +230,7 @@
|
||||||
}
|
}
|
||||||
that.weight = data2
|
that.weight = data2
|
||||||
that.kcal = (Number(that.weightKcal) / 100 * data2).toFixed(2)
|
that.kcal = (Number(that.weightKcal) / 100 * data2).toFixed(2)
|
||||||
console.log("analyzeData", data.weight, data2)
|
that.$emit('realTimeWeight',data2,that.dw)
|
||||||
}
|
}
|
||||||
}else if(device.name.indexOf('Chipsea-BLE') != -1 || device.localName.indexOf('Chipsea-BLE') != -1 || id == 'a5fe') {
|
}else if(device.name.indexOf('Chipsea-BLE') != -1 || device.localName.indexOf('Chipsea-BLE') != -1 || id == 'a5fe') {
|
||||||
that.stopBluetoothDevicesDiscovery()
|
that.stopBluetoothDevicesDiscovery()
|
||||||
|
|
@ -358,6 +364,7 @@
|
||||||
this.kcal = (Number(this.weightKcal) / 100 * finalWeight).toFixed(2)
|
this.kcal = (Number(this.weightKcal) / 100 * finalWeight).toFixed(2)
|
||||||
// console.log('重量:' + finalWeight)
|
// console.log('重量:' + finalWeight)
|
||||||
// console.log('单位:' + this.unit)
|
// console.log('单位:' + this.unit)
|
||||||
|
this.$emit('realTimeWeight',finalWeight,this.dw)
|
||||||
|
|
||||||
// 状态处理
|
// 状态处理
|
||||||
// if (statusType === 0x02) {
|
// if (statusType === 0x02) {
|
||||||
|
|
@ -370,9 +377,9 @@
|
||||||
console.log("weight", that.weight)
|
console.log("weight", that.weight)
|
||||||
if (Number(that.weight) > 0) {
|
if (Number(that.weight) > 0) {
|
||||||
that.$emit("handleBle", that.weight, that.dw, that.kcal)
|
that.$emit("handleBle", that.weight, that.dw, that.kcal)
|
||||||
that.stopBluetoothDevicesDiscovery() //取消蓝牙搜索
|
// that.stopBluetoothDevicesDiscovery() //取消蓝牙搜索
|
||||||
that.closeBLEConnection()
|
// that.closeBLEConnection()
|
||||||
that.closeBluetoothAdapter()
|
// that.closeBluetoothAdapter()
|
||||||
} else {
|
} else {
|
||||||
that.$tools.msg("数据异常,请清零后重新称重!")
|
that.$tools.msg("数据异常,请清零后重新称重!")
|
||||||
}
|
}
|
||||||
|
|
@ -382,20 +389,25 @@
|
||||||
handleDetailSub() {
|
handleDetailSub() {
|
||||||
let that = this
|
let that = this
|
||||||
if (that.weightType == 1) { //累计称重
|
if (that.weightType == 1) { //累计称重
|
||||||
that.weight0 = Number(that.weight) - Number(that.weightALL)
|
// that.weight0 = Number(that.weight) - Number(that.weightALL)
|
||||||
|
that.weight0 = Number((Number(that.weight) - Number(that.weightALL)).toFixed(2))
|
||||||
|
if(that.weight0 > 0) {
|
||||||
that.weightALL = that.weight
|
that.weightALL = that.weight
|
||||||
|
}else {
|
||||||
|
that.$tools.msg("数据异常,请清零后重新称重!")
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
that.weight0 = that.weight
|
that.weight0 = that.weight
|
||||||
}
|
}
|
||||||
if (Number(that.weight0) > 0) {
|
if (Number(that.weight0) > 0) {
|
||||||
that.$emit("handleDetailSub", that.weight0, that.dw, that.kcal)
|
that.$emit("handleDetailSub", that.weight0, that.dw, that.kcal)
|
||||||
that.stopBluetoothDevicesDiscovery() //取消蓝牙搜索
|
// that.stopBluetoothDevicesDiscovery() //取消蓝牙搜索
|
||||||
that.closeBLEConnection()
|
// that.closeBLEConnection()
|
||||||
that.closeBluetoothAdapter()
|
// that.closeBluetoothAdapter()
|
||||||
that.weight = 0
|
that.weight = 0
|
||||||
that.weight0 = 0
|
that.weight0 = 0
|
||||||
} else {
|
} else {
|
||||||
that.$tools.msg("数据异常,请清零后重新称重!")
|
that.$tools.msg("数据异常,请重新称重!")
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
//备料下一个
|
//备料下一个
|
||||||
|
|
@ -405,11 +417,17 @@
|
||||||
console.log('weight:' + that.weight)
|
console.log('weight:' + that.weight)
|
||||||
console.log('weight0:' + that.weight0)
|
console.log('weight0:' + that.weight0)
|
||||||
console.log('weightALL:' + that.weightALL)
|
console.log('weightALL:' + that.weightALL)
|
||||||
that.weight0 = Number(that.weight) - Number(that.weightALL)
|
// that.weight0 = Number(that.weight) - Number(that.weightALL)
|
||||||
|
that.weight0 = Number((Number(that.weight) - Number(that.weightALL)).toFixed(2))
|
||||||
|
if(that.weight0 > 0) {
|
||||||
that.weightALL = that.weight
|
that.weightALL = that.weight
|
||||||
|
}else {
|
||||||
|
that.$tools.msg("数据异常,请清零后重新称重!")
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
that.weight0 = that.weight
|
that.weight0 = that.weight
|
||||||
}
|
}
|
||||||
|
|
||||||
if (Number(that.weight0) > 0) {
|
if (Number(that.weight0) > 0) {
|
||||||
that.$emit("handleDetailNext", that.weight0, that.dw, that.kcal)
|
that.$emit("handleDetailNext", that.weight0, that.dw, that.kcal)
|
||||||
that.weight = 0
|
that.weight = 0
|
||||||
|
|
@ -419,6 +437,16 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
handlechongzhi(weight) {
|
||||||
|
let that = this
|
||||||
|
console.log('当前总重:' + that.weightALL)
|
||||||
|
console.log('重置重量:' + weight)
|
||||||
|
if (that.weightType == 1) {
|
||||||
|
that.weightALL = Number((Number(that.weightALL) - Number(weight)).toFixed(2))
|
||||||
|
console.log('剩余重量:' + that.weightALL)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
handleBack() {
|
handleBack() {
|
||||||
let that = this
|
let that = this
|
||||||
that.isConnection = 1
|
that.isConnection = 1
|
||||||
|
|
@ -449,6 +477,18 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
unitConversion(unit) {
|
||||||
|
if(unit == 'kcal') {
|
||||||
|
return '千卡'
|
||||||
|
}else if(unit == 'g') {
|
||||||
|
return '克'
|
||||||
|
}else if(unit == 'lb') {
|
||||||
|
return '磅'
|
||||||
|
}else if(unit =='oz') {
|
||||||
|
return '盎司'
|
||||||
|
}
|
||||||
|
return unit
|
||||||
|
}
|
||||||
// isNutritionScale(advertisData) {
|
// isNutritionScale(advertisData) {
|
||||||
// const buffer = this.base64ToArrayBuffer(advertisData)
|
// const buffer = this.base64ToArrayBuffer(advertisData)
|
||||||
// const dataView = new DataView(buffer)
|
// const dataView = new DataView(buffer)
|
||||||
|
|
@ -482,37 +522,53 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: absolute;
|
position: relative;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 20px;
|
|
||||||
top: 60px;
|
|
||||||
margin-top: 20px;
|
|
||||||
|
|
||||||
.weight {
|
.weight-wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #666;
|
color: #666;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
view {
|
.weight, .kcal {
|
||||||
width: 60%;
|
|
||||||
height: 50px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-left: 25%;
|
justify-content: center;
|
||||||
align-items: flex-end;
|
align-items: center;
|
||||||
margin-bottom: 15px;
|
width: 70%;
|
||||||
|
padding: 40rpx 0;
|
||||||
text {
|
border-radius: 20rpx;
|
||||||
width: 80px;
|
background-color: #F8F8F8;
|
||||||
display: inline-block;
|
}
|
||||||
border-bottom: 1px solid #dfdfdf;
|
.weight {
|
||||||
margin: 0 10px;
|
margin-bottom: 30rpx;
|
||||||
font-size: 18px;
|
.val {
|
||||||
font-weight: bold;
|
font-size: 40rpx;
|
||||||
color: #f0ae43;
|
color: #F0AE43;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
padding: 10rpx;
|
||||||
|
margin-left: 30rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
background-color: #F0AE43;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.kcal {
|
||||||
|
font-size: 32rpx;
|
||||||
|
.val {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #F0AE43;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
margin-left: 20rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -554,7 +610,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tips {
|
.tips {
|
||||||
margin-bottom: 15px;
|
margin-top: 40rpx;
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
color: #999;
|
color: #999;
|
||||||
|
|
@ -0,0 +1,252 @@
|
||||||
|
<template>
|
||||||
|
<view id="select-ruler" class="select-ruler">
|
||||||
|
<!-- 遮罩层 -->
|
||||||
|
<view class="tap-mask" v-if="disable"></view>
|
||||||
|
<!-- 线 -->
|
||||||
|
<view class="line"></view>
|
||||||
|
<view class="row-line"></view>
|
||||||
|
<!-- 左右渐变遮罩 -->
|
||||||
|
<view class="mask mask-left"></view>
|
||||||
|
<view class="mask mask-right"></view>
|
||||||
|
<!-- 刻度尺 -->
|
||||||
|
<scroll-view :scroll-x="true" enhanced :show-scrollbar="false" @scroll="handleScroll" @scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper" :scroll-left="scroll_left">
|
||||||
|
<span :style="{'margin-left': index == 0 ? `${el_width+10}px`:'','margin-right':index==max?`${el_width-20}px`:''}"
|
||||||
|
class="ruler-item span-item" v-for="(item, index) in (max - min + 1)">
|
||||||
|
<span>{{((index + min)/multiple).toFixed(point)}}</span>
|
||||||
|
</span>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "select-ruler",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
number: 0,
|
||||||
|
scroll_left: 1,
|
||||||
|
last_scroll_left: 0,
|
||||||
|
el_width: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
scroll: {
|
||||||
|
detail: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 最小值
|
||||||
|
min: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 最大值
|
||||||
|
max: {
|
||||||
|
type: Number,
|
||||||
|
default: 500
|
||||||
|
},
|
||||||
|
// 缩放比例
|
||||||
|
multiple: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
// 默认值
|
||||||
|
defaultValue: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 是否禁用
|
||||||
|
disable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 小数点后保留位数
|
||||||
|
point: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 等待滚动条初始化完成
|
||||||
|
this.setDefault(this.defaultValue);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 刻度尺滚动监听
|
||||||
|
handleScroll(e) {
|
||||||
|
this.scroll = e;
|
||||||
|
console.log(e.detail.scrollLeft)
|
||||||
|
this.number = Math.round(e.detail.scrollLeft / 10)
|
||||||
|
if (this.number > this.max) {
|
||||||
|
this.number = this.max
|
||||||
|
} else {
|
||||||
|
}
|
||||||
|
this.$emit('change', ((this.number + this.min) / this.multiple).toFixed(this.point));
|
||||||
|
},
|
||||||
|
scrolltoupper() {
|
||||||
|
this.number = 0
|
||||||
|
this.$emit('change', this.number);
|
||||||
|
},
|
||||||
|
scrolltolower() {
|
||||||
|
this.number = this.max
|
||||||
|
this.$emit('change', this.number);
|
||||||
|
},
|
||||||
|
// 初始化刻度尺
|
||||||
|
initScroll() {
|
||||||
|
this.scroll_left = this.number * 10
|
||||||
|
this.last_scroll_left = this.scroll_left
|
||||||
|
},
|
||||||
|
// 设置默认值
|
||||||
|
setDefault(number) {
|
||||||
|
const query = wx.createSelectorQuery().in(this)
|
||||||
|
query.select('#select-ruler').boundingClientRect(rect => {
|
||||||
|
if (rect) {
|
||||||
|
this.el_width = rect.width / 2
|
||||||
|
if (number < this.min || number > this.max) {
|
||||||
|
uni.showToast({
|
||||||
|
title: `数值超出范围(${this.min/this.multiple}-${this.max/this.multiple})`,
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (number < this.min) number = this.min;
|
||||||
|
if (number > this.max) number = this.max;
|
||||||
|
this.number = number - this.min;
|
||||||
|
this.initScroll();
|
||||||
|
}
|
||||||
|
}).exec()
|
||||||
|
|
||||||
|
},
|
||||||
|
// 增加
|
||||||
|
plusValue(step) {
|
||||||
|
this.setDefault(this.number + this.min + Math.floor(step));
|
||||||
|
},
|
||||||
|
// 减少
|
||||||
|
reduceValue(step) {
|
||||||
|
this.setDefault(this.number + this.min - Math.floor(step));
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.select-ruler {
|
||||||
|
width: 100%;
|
||||||
|
height: 150rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.tap-mask {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 10px;
|
||||||
|
position: absolute;
|
||||||
|
left: 366rpx;
|
||||||
|
top: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
width: 6rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background: #00BC00;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: text-top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-line {
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: rgba(#3A414B, .07);
|
||||||
|
top: 40rpx;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask {
|
||||||
|
width: 150rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
&.mask-left {
|
||||||
|
left: 0;
|
||||||
|
background-image: linear-gradient(to right, #fff, rgba(#fff, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mask-right {
|
||||||
|
right: 0;
|
||||||
|
background-image: linear-gradient(to right, rgba(#fff, 0), #fff);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
scroll-view {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
.slot {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ruler-item {
|
||||||
|
width: 10px;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 40rpx;
|
||||||
|
|
||||||
|
// &:first-child {
|
||||||
|
// margin-left: 370rpx;
|
||||||
|
// }
|
||||||
|
// &:last-child {
|
||||||
|
// margin-right: 370rpx;
|
||||||
|
// }
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
width: 1px;
|
||||||
|
height: 30px;
|
||||||
|
background: rgba(#3A414B, .15);
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: text-top;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
position: absolute;
|
||||||
|
top: -10rpx;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
color: #3D3D3D;
|
||||||
|
font-size: 18px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(10n+1) {
|
||||||
|
&::before {
|
||||||
|
width: 1px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"id": "select-ruler",
|
||||||
|
"name": "滑动刻度尺选择组件,刻度值拖动选择,支持按钮控制。",
|
||||||
|
"displayName": "滑动刻度尺选择组件,刻度值拖动选择,支持按钮控制。",
|
||||||
|
"version": "v1.0.0",
|
||||||
|
"description": "超级简单刻度尺滑动选择,直接导入使用,美观流畅可扩展。",
|
||||||
|
"keywords": [
|
||||||
|
"滑动选择",
|
||||||
|
"刻度尺",
|
||||||
|
"选择组件",
|
||||||
|
"拖动选择"
|
||||||
|
],
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<!-- 搜索 -->
|
<!-- 搜索 -->
|
||||||
<search ref="search" :voice="true" @handleSearch="handleSearch" @mic="onShowSearchType(1)" @camera="onShowSearchType(2)"></search>
|
<search ref="search" :voice="true" @handleSearch="handleSearch" @mic="onShowSearchType(1)"
|
||||||
|
@camera="onShowSearchType(2)"></search>
|
||||||
|
|
||||||
<view class="box menu">
|
<view class="box menu">
|
||||||
<!-- 头部1级菜单栏 -->
|
<!-- 头部1级菜单栏 -->
|
||||||
|
|
@ -66,34 +67,81 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 语音拍照 -->
|
<uni-drawer ref="showRight" mode="right" width="300" @change="FoodDetailChange">
|
||||||
<!-- <view class="voice-photo-wrap">
|
<scroll-view style="height: 100%;" scroll-y="true">
|
||||||
<view class="voice" @click="onShowSearchType(1)">
|
<view class="foodDetail">
|
||||||
<div class="voice-icon"></div>
|
<view class="foodInfo">
|
||||||
|
<image :src="activeFoodDetail.pic_url" mode="aspectFill"></image>
|
||||||
|
<view class="info">
|
||||||
|
<view class="name">{{activeFoodDetail.name}}</view>
|
||||||
|
<view class="kcal">{{Number(activeType.kcal*activeType.weight/100).toFixed(1)}}千卡</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="photo" @click="onShowSearchType(2)">
|
|
||||||
<div class="photo-icon"></div>
|
|
||||||
</view>
|
</view>
|
||||||
</view> -->
|
<view class="foodContent">
|
||||||
|
<view class="title">热量和营养</view>
|
||||||
|
<view class="progress">
|
||||||
|
<div class="chart-wrap">
|
||||||
|
<qiun-data-charts type="ring" :opts="opts" :canvas2d="true" canvasId="foodCharts" :chartData="chartData" :cHeight="250"
|
||||||
|
:cWidth="250" />
|
||||||
|
<view class="uchart-kcal">{{Math.floor(activeType.kcal*activeType.weight/100)}}</view>
|
||||||
|
</div>
|
||||||
|
<view class="info" v-if="activeType.nutrients_four">
|
||||||
|
<view class="info-item" v-for="(item,index) in activeType.nutrients_four.slice(1)" :key="index">
|
||||||
|
<view class="color" :style="{'background-color':`${item.color}`}"></view>
|
||||||
|
<view>{{item.name}}:{{item.proportion}}%</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tips">
|
||||||
|
<text>营养素</text>
|
||||||
|
<text>{{activeType.weight}}克含量</text>
|
||||||
|
</view>
|
||||||
|
<view class="foodDetailList">
|
||||||
|
<view class="foodDetailItem" v-for="(item,index) in activeFoodDetail.nutrients_list" :key="index">
|
||||||
|
<view class="name">{{item.name_ch}}</view>
|
||||||
|
<view class="value">{{Number(item.value*activeType.weight/100).toFixed(2)}}{{item.unit}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</uni-drawer>
|
||||||
<!-- 称重区 -->
|
<!-- 称重区 -->
|
||||||
<view class="wrapper" v-if="IsWeight">
|
<view class="wrapper" v-if="IsWeight && !IsFoodDetail">
|
||||||
<view class="bg" @click='IsWeight=false'>
|
<view class="bg" @click='IsWeight=false'>
|
||||||
<view class="box" @click.stop>
|
<view class="box" @click.stop>
|
||||||
<view class="title">
|
<view class="title">
|
||||||
<view class="weight" @click="handleWeight()">
|
|
||||||
<icon class="iconfont icon-lianjie"></icon>
|
|
||||||
食物秤称重
|
|
||||||
</view>
|
|
||||||
<view class="cancel">
|
<view class="cancel">
|
||||||
<icon class="iconfont icon-error" @click="Cancelword()"></icon>
|
<icon class="iconfont icon-error" @click="Cancelword()"></icon>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
<view class="foodItem" @click="showFoodDetail(activeType)">
|
||||||
|
<view class="left">
|
||||||
|
<image :src="activeType.pic_url" mode="aspectFill"></image>
|
||||||
|
<view class="info">
|
||||||
<view class="name">{{activeType.name}}</view>
|
<view class="name">{{activeType.name}}</view>
|
||||||
<view class="val">
|
<view class="kcal">{{activeType.kcal}}千卡/100克</view>
|
||||||
<text>{{activeType.weight?activeType.weight:'0'}}</text>g
|
|
||||||
</view>
|
</view>
|
||||||
<view class="mybrankmask">
|
</view>
|
||||||
|
<view class="more">查看</view>
|
||||||
|
</view>
|
||||||
|
<view class="foodInfo">
|
||||||
|
<view class="foodInfoItem" v-for="(item,index) in activeType.nutrients_four" :key="index">
|
||||||
|
<view class="name">
|
||||||
|
<view class="color" :style="{'background-color':item.color}" v-if="item.color != ''"></view>
|
||||||
|
<text>{{item.name}}({{unitConversion(item.unit)}})</text>
|
||||||
|
</view>
|
||||||
|
<view class="value">{{ Number(activeType.weight/100 * item.value).toFixed(1) }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="weight" @click="handleWeight()">
|
||||||
|
<image class="chengIcon" src="../../static/chengIcon.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="name">{{activeType.name}}</view> -->
|
||||||
|
<view class="val">
|
||||||
|
<text>{{activeType.weight?Number(activeType.weight).toFixed(1):'0'}}</text>克
|
||||||
|
</view>
|
||||||
|
<view class="mybrankmask" v-if="wordType == 1">
|
||||||
<view class="MymaskAll">
|
<view class="MymaskAll">
|
||||||
<view class="MymaskList">
|
<view class="MymaskList">
|
||||||
<view class="maskListItem" @click="NumberCk(1)">1</view>
|
<view class="maskListItem" @click="NumberCk(1)">1</view>
|
||||||
|
|
@ -115,6 +163,7 @@
|
||||||
<view class="maskListItem" @click="NumberCk(0)">0</view>
|
<view class="maskListItem" @click="NumberCk(0)">0</view>
|
||||||
<view class="maskListItem" @click="Cancelword()">
|
<view class="maskListItem" @click="Cancelword()">
|
||||||
<image src="../../static/Clear.png"></image>
|
<image src="../../static/Clear.png"></image>
|
||||||
|
<!-- <image class="rulerIcon" src="../../static/ruler.png"></image> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -126,22 +175,49 @@
|
||||||
<view class="maskListItem width48" @click="Next()">保存</view>
|
<view class="maskListItem width48" @click="Next()">保存</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- <view class="rulerWrap" v-else>
|
||||||
|
<ruler ref="ruler" :min="0" :max="1000" :disable="false" :multiple="1" :point="0" :defaultValue="activeType.weight"
|
||||||
|
@change="rulerChange"></ruler>
|
||||||
|
<view class="rulerBtn">
|
||||||
|
<image src="../../static/keybord.png" @click="Changeword()"></image>
|
||||||
|
<view class="confirm" @click="Next()">保存</view>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!--蓝牙连接区 -->
|
<!--蓝牙连接区 -->
|
||||||
<view class="wrapper" v-show="isBle">
|
<view id="wrapper" class="wrapper" v-show="isBle && !IsFoodDetail">
|
||||||
<view class="bg" @click='isBle=false'>
|
<view class="bg" @click='isBle=false'>
|
||||||
<view class="box" @click.stop>
|
<view class="box" @click.stop>
|
||||||
<view class="title">
|
<view class="title">
|
||||||
<view class="weight" style="width: 242rpx;" @click="handleMannulWeight()">
|
|
||||||
<icon class="iconfont icon-lianjie"></icon>
|
|
||||||
手动称重
|
|
||||||
</view>
|
|
||||||
<view class="name">{{activeType.name}}</view>
|
|
||||||
<icon class="iconfont icon-error" @click='isBle=false'></icon>
|
<icon class="iconfont icon-error" @click='isBle=false'></icon>
|
||||||
</view>
|
</view>
|
||||||
<blue-tooth @handleBle="handleBle" :weightType="'2'" :weightKcal="weightKcal"></blue-tooth>
|
<view class="foodItem" @click="showFoodDetail(activeType)">
|
||||||
|
<view class="left">
|
||||||
|
<image :src="activeType.pic_url" mode="aspectFill"></image>
|
||||||
|
<view class="info">
|
||||||
|
<view class="name">{{activeType.name}}</view>
|
||||||
|
<view class="kcal">{{activeType.kcal}}千卡/100克</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="more">查看</view>
|
||||||
|
</view>
|
||||||
|
<view class="foodInfo">
|
||||||
|
<view class="foodInfoItem" v-for="(item,index) in activeType.nutrients_four" :key="index">
|
||||||
|
<view class="name">
|
||||||
|
<view class="color" :style="{'background-color':item.color}" v-if="item.color != ''"></view>
|
||||||
|
<text>{{item.name}}({{unitConversion(item.unit)}})</text>
|
||||||
|
</view>
|
||||||
|
<view class="value">{{ Number(activeType.weight/100 * item.value).toFixed(1) }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="weight" @click="handleMannulWeight()">
|
||||||
|
<image class="keybordIcon" src="../../static/keybordIcon.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
<view class="blue-tooth">
|
||||||
|
<blue-tooth @handleBle="handleBle" :weightType="'2'" :weightKcal="weightKcal" @realTimeWeight="realTimeWeight"></blue-tooth>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -170,14 +246,18 @@
|
||||||
let myTime
|
let myTime
|
||||||
// const plugin = requirePlugin("sdkPlugin").AiLink;
|
// const plugin = requirePlugin("sdkPlugin").AiLink;
|
||||||
import search from "../../components/search.vue"
|
import search from "../../components/search.vue"
|
||||||
import blueTooth from "../../components/bluetooth_new.vue"
|
import blueTooth from "../../components/bluetooth_food.vue"
|
||||||
import FoodItem from "../../components/food_item.vue"
|
import FoodItem from "../../components/food_item.vue"
|
||||||
|
// import ruler from "../../components/select-ruler/select-ruler.vue"
|
||||||
|
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
|
||||||
const plugin = requirePlugin("WechatSI")
|
const plugin = requirePlugin("WechatSI")
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
search,
|
search,
|
||||||
blueTooth,
|
blueTooth,
|
||||||
FoodItem
|
FoodItem,
|
||||||
|
qiunDataCharts,
|
||||||
|
// ruler
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -195,6 +275,7 @@
|
||||||
IsWeight: false,
|
IsWeight: false,
|
||||||
isShop: false,
|
isShop: false,
|
||||||
isBle: false,
|
isBle: false,
|
||||||
|
IsFoodDetail: false,
|
||||||
weightKcal: "",
|
weightKcal: "",
|
||||||
kcal: "",
|
kcal: "",
|
||||||
weight: "",
|
weight: "",
|
||||||
|
|
@ -206,9 +287,51 @@
|
||||||
autoSearchContent: '',
|
autoSearchContent: '',
|
||||||
isConnection: 0, //是否连接成功
|
isConnection: 0, //是否连接成功
|
||||||
showAutoSearchDlg: false,
|
showAutoSearchDlg: false,
|
||||||
mic_touch: false
|
mic_touch: false,
|
||||||
|
activeFoodDetail: {},
|
||||||
|
wordType: 1,
|
||||||
|
chartData: {},
|
||||||
|
opts: {
|
||||||
|
dataLabel: false,
|
||||||
|
color: ["#5180D8","#ED7886","#FFB169"],
|
||||||
|
background: "transparent",
|
||||||
|
canvas: {
|
||||||
|
background: "transparent"
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false // 这个设置将隐藏图例
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
name: "",
|
||||||
|
fontSize: 20,
|
||||||
|
offsetY: -3,
|
||||||
|
color: "#333333"
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
name: "千卡",
|
||||||
|
fontSize: 14,
|
||||||
|
offsetY: 12,
|
||||||
|
color: "#888888"
|
||||||
|
},
|
||||||
|
extra: {
|
||||||
|
ring: {
|
||||||
|
ringWidth: 10,
|
||||||
|
labelWidth: 0,
|
||||||
|
border: false,
|
||||||
|
// customRadius: 50
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
activeType: {
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
console.log(newVal)
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(["user", 'isConnected', "isBluetoothTyle", 'foodList']),
|
...mapState(["user", 'isConnected', "isBluetoothTyle", 'foodList']),
|
||||||
menuTop() {
|
menuTop() {
|
||||||
|
|
@ -219,6 +342,12 @@
|
||||||
name: '搜索'
|
name: '搜索'
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
|
getKcal() {
|
||||||
|
if(this.activeFoodDetail) {
|
||||||
|
return this.activeFoodDetail.kcal
|
||||||
|
}
|
||||||
|
return 0
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
let that = this
|
let that = this
|
||||||
|
|
@ -238,6 +367,39 @@
|
||||||
that.voiceManager.stop()
|
that.voiceManager.stop()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
showFoodDetail(item) {
|
||||||
|
this.activeFoodDetail = item
|
||||||
|
this.$refs.showRight.open();
|
||||||
|
this.IsFoodDetail = true
|
||||||
|
let chart_data = []
|
||||||
|
this.opts.color = []
|
||||||
|
|
||||||
|
// if(this.activeType.weight == '') {
|
||||||
|
// this.opts.title.name = '0'
|
||||||
|
// }else {
|
||||||
|
// this.opts.title.name = Math.floor(item.kcal * this.activeType.weight/100)
|
||||||
|
// }
|
||||||
|
|
||||||
|
for (let i = 1; i < item.nutrients_four.length; ++i) {
|
||||||
|
this.opts.color.push(item.nutrients_four[i].color)
|
||||||
|
chart_data.push({
|
||||||
|
name: item.nutrients_four[i].name,
|
||||||
|
value: Number(item.nutrients_four[i].proportion),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chartData = JSON.parse(JSON.stringify({
|
||||||
|
series: [{
|
||||||
|
data: chart_data
|
||||||
|
}]
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
getKcal() {
|
||||||
|
this.opts.title.name = this.activeFoodDetail.nutrients_four[0].value * this.activeType.weight
|
||||||
|
},
|
||||||
|
FoodDetailChange(show) {
|
||||||
|
this.IsFoodDetail = show
|
||||||
|
},
|
||||||
handleHomeInfo() {
|
handleHomeInfo() {
|
||||||
let that = this
|
let that = this
|
||||||
that.loading = true
|
that.loading = true
|
||||||
|
|
@ -318,7 +480,7 @@
|
||||||
var that = this;
|
var that = this;
|
||||||
that.myvalue = []
|
that.myvalue = []
|
||||||
that.activeType = ite
|
that.activeType = ite
|
||||||
that.activeType.weight = 100
|
that.activeType.weight = 0
|
||||||
// that.IsWeight = true
|
// that.IsWeight = true
|
||||||
that.weightKcal = that.activeType.kcal
|
that.weightKcal = that.activeType.kcal
|
||||||
that.isShop = false
|
that.isShop = false
|
||||||
|
|
@ -381,6 +543,10 @@
|
||||||
this.activeType = {}
|
this.activeType = {}
|
||||||
// console.log("取消")
|
// console.log("取消")
|
||||||
},
|
},
|
||||||
|
//切换键盘
|
||||||
|
Changeword() {
|
||||||
|
this.wordType = this.wordType == 1 ? 2 : 1
|
||||||
|
},
|
||||||
// 键盘清空
|
// 键盘清空
|
||||||
Clear() {
|
Clear() {
|
||||||
this.myvalue = []
|
this.myvalue = []
|
||||||
|
|
@ -401,6 +567,9 @@
|
||||||
}
|
}
|
||||||
console.log("保存", that.ActiveList)
|
console.log("保存", that.ActiveList)
|
||||||
},
|
},
|
||||||
|
rulerChange(val) {
|
||||||
|
this.activeType = Object.assign({}, this.activeType, { weight: val })
|
||||||
|
},
|
||||||
// 称重
|
// 称重
|
||||||
handleWeight() {
|
handleWeight() {
|
||||||
let that = this
|
let that = this
|
||||||
|
|
@ -424,6 +593,12 @@
|
||||||
that.Next()
|
that.Next()
|
||||||
console.log("返回", that.activeType, weight, unit, kcal)
|
console.log("返回", that.activeType, weight, unit, kcal)
|
||||||
},
|
},
|
||||||
|
//实时重量
|
||||||
|
realTimeWeight(weight,unit) {
|
||||||
|
if(!this.IsWeight) {
|
||||||
|
this.activeType = Object.assign({}, this.activeType, { weight: this.convertToGrams(weight,unit) })
|
||||||
|
}
|
||||||
|
},
|
||||||
onShowSearchType(type) {
|
onShowSearchType(type) {
|
||||||
let that = this
|
let that = this
|
||||||
this.autoSearchType = type
|
this.autoSearchType = type
|
||||||
|
|
@ -494,6 +669,28 @@
|
||||||
let that = this
|
let that = this
|
||||||
that.mic_touch = false
|
that.mic_touch = false
|
||||||
that.voiceManager.stop()
|
that.voiceManager.stop()
|
||||||
|
},
|
||||||
|
unitConversion(unit) {
|
||||||
|
if (unit == 'kcal') {
|
||||||
|
return '千卡'
|
||||||
|
} else if (unit == 'g') {
|
||||||
|
return '克'
|
||||||
|
}
|
||||||
|
return unit
|
||||||
|
},
|
||||||
|
convertToGrams(value, fromUnit) {
|
||||||
|
const conversionFactors = {
|
||||||
|
'lb': 453.59237, // 1磅 = 453.59237克
|
||||||
|
'oz': 28.349523125, // 1盎司 = 28.349523125克
|
||||||
|
'kg': 1000, // 1公斤 = 1000克
|
||||||
|
'g': 1
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!conversionFactors.hasOwnProperty(fromUnit)) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
return value * conversionFactors[fromUnit];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -535,9 +732,12 @@
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
column-count: 3; /* 分成两列 */
|
column-count: 3;
|
||||||
column-gap: 10px; /* 列间距 */
|
/* 分成两列 */
|
||||||
|
column-gap: 10px;
|
||||||
|
/* 列间距 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
break-inside: avoid;
|
break-inside: avoid;
|
||||||
/* 防止元素被分割到不同列 */
|
/* 防止元素被分割到不同列 */
|
||||||
|
|
@ -790,6 +990,7 @@
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
box-shadow: 0 0 20rpx #ccc;
|
box-shadow: 0 0 20rpx #ccc;
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -833,12 +1034,288 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.foodDetail {
|
||||||
|
background-color: #F7F7F7;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.foodInfo {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
box-sizing: 0 0 20rpx #f1f1f1;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: 30rpx;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kcal {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.foodContent {
|
||||||
|
width: 100%;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
box-sizing: 0 0 20rpx #f1f1f1;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.chart-wrap {
|
||||||
|
position: relative;
|
||||||
|
width: 250rpx;
|
||||||
|
height: 250rpx;
|
||||||
|
margin-top: -30rpx;
|
||||||
|
.uchart-kcal {
|
||||||
|
position: absolute;
|
||||||
|
left: 60rpx;
|
||||||
|
top: 120rpx;
|
||||||
|
width: 130rpx;
|
||||||
|
font-size: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
|
.color {
|
||||||
|
width: 6rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
border-radius: 3rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #f1f1f1;
|
||||||
|
padding: 16rpx 0;
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foodDetailList {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
|
||||||
|
.foodDetailItem {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
.val {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.icon-error {
|
.icon-error {
|
||||||
|
position: absolute;
|
||||||
|
right: 10rpx;
|
||||||
|
top: -35rpx;
|
||||||
font-size: 45px;
|
font-size: 45px;
|
||||||
margin-top: -30px;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 45px;
|
width: 45px;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
.box {
|
||||||
|
height: 800rpx !important;
|
||||||
|
padding: 15px !important;
|
||||||
|
|
||||||
|
.weight {
|
||||||
|
position: absolute;
|
||||||
|
right: 10rpx;
|
||||||
|
top: 260rpx;
|
||||||
|
padding: 10rpx;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mybrankmask .rulerIcon {
|
||||||
|
width: 60rpx !important;
|
||||||
|
height: 60rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rulerWrap {
|
||||||
|
margin-top: 50rpx;
|
||||||
|
.rulerBtn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
image {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
}
|
||||||
|
.confirm {
|
||||||
|
width: 60%;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
background-color: #ffbe76;
|
||||||
|
margin-left: 50rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.val {
|
||||||
|
margin: 25px 0 !important;
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 40px !important;
|
||||||
|
width: 140px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.keybordIcon {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 43rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chengIcon {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.foodItem {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
|
||||||
|
.more {
|
||||||
|
padding: 8rpx 15rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #f0ae43;
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: 30rpx;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kcal {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.foodInfo {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.foodInfoItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #8F8F8F;
|
||||||
|
|
||||||
|
.color {
|
||||||
|
width: 6rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
border-radius: 3rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-tooth {
|
||||||
|
margin-top: 80rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -119,18 +119,30 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="groupbtn" :style="{display: (isWeightType&&iSWeightSub) ? '' : 'none'}">
|
<!-- <view class="groupbtn" :style="{display: (isWeightType&&iSWeightSub) ? '' : 'none'}">
|
||||||
<view @click="handleWeightType(1)">累计称重</view>
|
<view @click="handleWeightType(1)">累计称重</view>
|
||||||
<view @click="handleWeightType(0)">分类称重</view>
|
<view @click="handleWeightType(0)">分类称重</view>
|
||||||
</view>
|
</view> -->
|
||||||
<view class="title" :style="{display: (!isWeightType&&iSWeightSub) ? '' : 'none'}">
|
<view class="title" :style="{display: (!isWeightType&&iSWeightSub) ? '' : 'none'}">
|
||||||
<view class="name">{{activeType.name}}</view>
|
<view class="name">{{activeType.name}}</view>
|
||||||
<blue-tooth @handleDetailNext="handleDetailNext" @handleDetailSub="handleDetailSub" @connect_success="handleWeight" :weightType="weightType"
|
<blue-tooth ref="blueTooth" @handleDetailNext="handleDetailNext" @handleDetailSub="handleDetailSub" @connect_success="handleWeight" :weightType="weightType"
|
||||||
:isLast="isLast" :weightKcal="weightKcal" />
|
:isLast="isLast" :weightKcal="weightKcal" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="saveFood" v-if="showSaveFood">
|
||||||
|
<view class="saveFoodInner">
|
||||||
|
<view class="title">是否保存至“计时器”为今日饮食?</view>
|
||||||
|
<view class="types">
|
||||||
|
<view class="type-item" :class="{'active':selectSaveType == index}" v-for="(item,index) in saveFoodTypes" :key="index" @click="selectSaveType=index">{{item}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-wrap">
|
||||||
|
<view class="confirm" @click="confirmSaveFood">确定</view>
|
||||||
|
<view class="cancel" @click="showSaveFood=false">取消</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -138,7 +150,7 @@
|
||||||
import {
|
import {
|
||||||
mapState
|
mapState
|
||||||
} from "vuex";
|
} from "vuex";
|
||||||
import blueTooth from "../../components/bluetooth_new.vue"
|
import blueTooth from "../../components/bluetooth.vue"
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -147,7 +159,7 @@
|
||||||
id: null,
|
id: null,
|
||||||
index: 0,
|
index: 0,
|
||||||
weightKcal: null,
|
weightKcal: null,
|
||||||
weightType: 2,
|
weightType: 0,
|
||||||
activeType: {},
|
activeType: {},
|
||||||
isBle: false,
|
isBle: false,
|
||||||
isWeightType: true,
|
isWeightType: true,
|
||||||
|
|
@ -155,6 +167,16 @@
|
||||||
listInd: 0,
|
listInd: 0,
|
||||||
isLast: false,
|
isLast: false,
|
||||||
cookIndex: null,
|
cookIndex: null,
|
||||||
|
showSaveFood: false,
|
||||||
|
saveFoodTypes: [
|
||||||
|
'早餐',
|
||||||
|
'午餐',
|
||||||
|
'晚餐',
|
||||||
|
'早加餐',
|
||||||
|
'午加餐',
|
||||||
|
'晚加餐',
|
||||||
|
],
|
||||||
|
selectSaveType: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -205,11 +227,11 @@
|
||||||
that.activeType = {}
|
that.activeType = {}
|
||||||
that.iSWeightSub = true
|
that.iSWeightSub = true
|
||||||
that.isWeightType = true
|
that.isWeightType = true
|
||||||
|
that.handleWeightType(0) //默认分类称重,取消累计称重
|
||||||
},
|
},
|
||||||
// 下一位
|
// 下一位
|
||||||
handleDetailNext(weight, dw, kcal) {
|
handleDetailNext(weight, dw, kcal) {
|
||||||
let that = this
|
let that = this
|
||||||
console.log("下一位id", weight, dw, kcal, that.activeType)
|
|
||||||
let ind = that.info.tags[0].list.findIndex(ite => ite.id == that.activeType.id)
|
let ind = that.info.tags[0].list.findIndex(ite => ite.id == that.activeType.id)
|
||||||
that.info.tags[0].list[ind].newweight = weight
|
that.info.tags[0].list[ind].newweight = weight
|
||||||
that.info.tags[0].list[ind].newunit = dw
|
that.info.tags[0].list[ind].newunit = dw
|
||||||
|
|
@ -217,10 +239,13 @@
|
||||||
that.listInd = that.listInd + 1
|
that.listInd = that.listInd + 1
|
||||||
that.activeType = that.info.tags[0].list[ind + 1]
|
that.activeType = that.info.tags[0].list[ind + 1]
|
||||||
that.weightKcal = that.activeType.kcal
|
that.weightKcal = that.activeType.kcal
|
||||||
if (that.listInd == that.info.tags[0].list.length - 1 || that.listInd == that.info.list.length) {
|
that.info.tags[0].list[that.listInd].newweight = ""
|
||||||
|
that.info.tags[0].list[that.listInd].newunit = ""
|
||||||
|
that.info.tags[0].list[that.listInd].newkcal = ""
|
||||||
|
if (that.listInd == that.info.tags[0].list.length - 1 || that.listInd == that.info.tags[0].list.length) {
|
||||||
that.isLast = true
|
that.isLast = true
|
||||||
|
console.log('已经称重完成')
|
||||||
}
|
}
|
||||||
console.log("下一位序号", that.listInd)
|
|
||||||
},
|
},
|
||||||
// 结束称重
|
// 结束称重
|
||||||
handleDetailSub(weight, dw, kcal) {
|
handleDetailSub(weight, dw, kcal) {
|
||||||
|
|
@ -229,12 +254,13 @@
|
||||||
that.info.tags[0].list[ind].newweight = weight
|
that.info.tags[0].list[ind].newweight = weight
|
||||||
that.info.tags[0].list[ind].newunit = dw
|
that.info.tags[0].list[ind].newunit = dw
|
||||||
that.info.tags[0].list[ind].newkcal = kcal
|
that.info.tags[0].list[ind].newkcal = kcal
|
||||||
that.iSWeightSub = false
|
that.showSaveFood = true
|
||||||
console.log("称重完成", weight, dw, kcal)
|
console.log("称重完成", weight, dw, kcal)
|
||||||
},
|
},
|
||||||
//重置
|
//重置
|
||||||
handlechongzhi(ite, ind) {
|
handlechongzhi(ite, ind) {
|
||||||
let that = this
|
let that = this
|
||||||
|
let weight = that.info.tags[0].list[ind].newweight
|
||||||
that.listInd = ind
|
that.listInd = ind
|
||||||
that.isLast = false
|
that.isLast = false
|
||||||
that.activeType = ite
|
that.activeType = ite
|
||||||
|
|
@ -247,6 +273,7 @@
|
||||||
if (that.listInd == that.info.tags[0].list.length - 1 || that.listInd == that.info.tags[0].list.length) {
|
if (that.listInd == that.info.tags[0].list.length - 1 || that.listInd == that.info.tags[0].list.length) {
|
||||||
that.isLast = true
|
that.isLast = true
|
||||||
}
|
}
|
||||||
|
this.$refs.blueTooth.handlechongzhi(weight)
|
||||||
console.log("重置", ind, that.info.tags[0].list.length)
|
console.log("重置", ind, that.info.tags[0].list.length)
|
||||||
},
|
},
|
||||||
//称重类型选择
|
//称重类型选择
|
||||||
|
|
@ -256,6 +283,40 @@
|
||||||
this.isWeightType = false
|
this.isWeightType = false
|
||||||
this.activeType = this.info.tags[0].list[0]
|
this.activeType = this.info.tags[0].list[0]
|
||||||
this.weightKcal = this.activeType.kcal
|
this.weightKcal = this.activeType.kcal
|
||||||
|
this.listInd = 0
|
||||||
|
if(this.info.tags[0].list.length == 1) {
|
||||||
|
this.isLast = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//保存称重结果到计时器
|
||||||
|
confirmSaveFood() {
|
||||||
|
let that = this
|
||||||
|
let newFoodList = []
|
||||||
|
for( let i = 0; i < that.info.tags[0].list.length; ++i ) {
|
||||||
|
if(that.info.tags[0].list[i].newweight) {
|
||||||
|
newFoodList.push({
|
||||||
|
id: that.info.tags[0].list[i].id,
|
||||||
|
weight: that.info.tags[0].list[i].newweight
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(newFoodList.length > 0) {
|
||||||
|
that.$model.getAddIntakeFood({
|
||||||
|
aud_id: that.user.aud_id,
|
||||||
|
meals_type: that.saveFoodTypes[that.selectSaveType],
|
||||||
|
food_list: newFoodList
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code != 0) return
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
that.showSaveFood = false
|
||||||
|
that.iSWeightSub = false
|
||||||
|
that.isBle = false
|
||||||
},
|
},
|
||||||
handleCang() {
|
handleCang() {
|
||||||
let that = this
|
let that = this
|
||||||
|
|
@ -574,7 +635,7 @@
|
||||||
width: 15%;
|
width: 15%;
|
||||||
text-align: right !important;
|
text-align: right !important;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -621,6 +682,69 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.saveFood {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
z-index: 99999;
|
||||||
|
.saveFoodInner {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 80%;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
padding-bottom: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
.title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.types {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
.type-item {
|
||||||
|
width: 30%;
|
||||||
|
height: 50rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border: 1px solid #f1f1f1;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
&.active {
|
||||||
|
border-color: #ff4c4f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-wrap {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
border-top: 1px solid #f1f1f1;
|
||||||
|
|
||||||
|
view {
|
||||||
|
width: 50%;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
view:first-child {
|
||||||
|
border-right: 1px solid #f1f1f1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.title2 {
|
.title2 {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -38,23 +38,23 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="weight">
|
<view class="weight">
|
||||||
<view class="item">
|
<view class="item">
|
||||||
<text>碳水化合物(克)</text>
|
<text class="name">碳水化合物(克)</text>
|
||||||
<view class="bold">
|
<view class="bold">
|
||||||
<view class="val" :style="{ width: carbohydratepercent + '%'}"></view>
|
<view class="val" :style="{ width: (carbohydratepercent>100?100:carbohydratepercent) + '%'}"></view>
|
||||||
<text>{{today_intake.carbohydrate}}/{{suggestion.carbohydrate}}</text>
|
<text>{{today_intake.carbohydrate}}/{{suggestion.carbohydrate}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="item">
|
<view class="item">
|
||||||
<text>蛋白质(克)</text>
|
<text class="name">蛋白质(克)</text>
|
||||||
<view class="bold">
|
<view class="bold">
|
||||||
<view class="val" :style="{ width: proteinpercent + '%'}"></view>
|
<view class="val" :style="{ width: (proteinpercent>100?100:proteinpercent) + '%'}"></view>
|
||||||
<text>{{today_intake.protein}}/{{suggestion.protein}}</text>
|
<text>{{today_intake.protein}}/{{suggestion.protein}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="item">
|
<view class="item">
|
||||||
<text>脂肪(克)</text>
|
<text class="name">脂肪(克)</text>
|
||||||
<view class="bold">
|
<view class="bold">
|
||||||
<view class="val" :style="{ width: fatpercent + '%'}"></view>
|
<view class="val" :style="{ width: (fatpercent>100?100:fatpercent) + '%'}"></view>
|
||||||
<text>{{today_intake.fat}}/{{suggestion.fat}}</text>
|
<text>{{today_intake.fat}}/{{suggestion.fat}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -98,11 +98,16 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="right">
|
<view class="right">
|
||||||
<view class="item" v-for="(it,id) in ite.list" :key="id">
|
<uni-swipe-action>
|
||||||
|
<uni-swipe-action-item v-for="(it,id) in ite.list" :key="id" :right-options="actionOptions" @click="delAcitionItem(it)">
|
||||||
|
<view class="item">
|
||||||
|
<image :src="it.pic_url" mode="aspectFill"></image>
|
||||||
<text>{{it.name}}</text>
|
<text>{{it.name}}</text>
|
||||||
<text>{{it.weight}}</text>
|
<text>{{it.weight}}</text>
|
||||||
<text>{{it.val}}</text>
|
<text>{{it.val}}</text>
|
||||||
</view>
|
</view>
|
||||||
|
</uni-swipe-action-item>
|
||||||
|
</uni-swipe-action>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -191,7 +196,16 @@
|
||||||
handTrue: true,
|
handTrue: true,
|
||||||
startDay: "",
|
startDay: "",
|
||||||
startM: "",
|
startM: "",
|
||||||
endM: ""
|
endM: "",
|
||||||
|
actionOptions: [
|
||||||
|
{
|
||||||
|
text: '删除',
|
||||||
|
style: {
|
||||||
|
backgroundColor: '#dd524d',
|
||||||
|
borderRadius: '10rpx'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -248,7 +262,7 @@
|
||||||
that.proteinpercent = Number(res.data.today_intake.protein) / Number(res.data.suggestion
|
that.proteinpercent = Number(res.data.today_intake.protein) / Number(res.data.suggestion
|
||||||
.protein) * 100
|
.protein) * 100
|
||||||
that.chartData.series[0].data = Number(res.data.today_intake.kcal) == 0 ? 1 :
|
that.chartData.series[0].data = Number(res.data.today_intake.kcal) == 0 ? 1 :
|
||||||
Number(res.data.today_intake.kcal) / Number(res.data.suggestion.kcal)
|
(Number(res.data.today_intake.kcal)>Number(res.data.suggestion.kcal) ? Number(res.data.suggestion.kcal) : Number(res.data.today_intake.kcal)) / Number(res.data.suggestion.kcal)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
//日期列表信息
|
//日期列表信息
|
||||||
|
|
@ -331,6 +345,21 @@
|
||||||
uni.reLaunch({
|
uni.reLaunch({
|
||||||
url: "/pageTwo/login/login"
|
url: "/pageTwo/login/login"
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
delAcitionItem(item) {
|
||||||
|
uni.showModal({
|
||||||
|
content: `是否删除[${item.name}]?`,
|
||||||
|
success: (res) => {
|
||||||
|
if(res.confirm) {
|
||||||
|
this.$model.delCEatAction({
|
||||||
|
aud_id: this.user.aud_id,
|
||||||
|
eat_log_id: item.id
|
||||||
|
}).then(res => {
|
||||||
|
this.handleCountFoodInfo()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -459,8 +488,14 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
.bold {
|
.bold {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #eaeaea;
|
background: #eaeaea;
|
||||||
|
|
@ -563,23 +598,34 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
height: 35px;
|
height: 40px;
|
||||||
line-height: 35px;
|
line-height: 40px;
|
||||||
border-bottom: 1px solid #f7f7f7;
|
border-bottom: 1px solid #f7f7f7;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
:nth-child(1) {
|
image {
|
||||||
width: 45%;
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
:nth-child(2) {
|
:nth-child(2) {
|
||||||
width: 25%;
|
width: 40%;
|
||||||
text-align: left;
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
:nth-child(3) {
|
:nth-child(3) {
|
||||||
width: 30%;
|
width: 20%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
:nth-child(4) {
|
||||||
|
width: 26%;
|
||||||
|
margin-right: 6rpx;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -131,12 +131,15 @@
|
||||||
},
|
},
|
||||||
// 商品详情
|
// 商品详情
|
||||||
handleDetail(id) {
|
handleDetail(id) {
|
||||||
if (!uni.getStorageSync('token')) {
|
// if (!uni.getStorageSync('token')) {
|
||||||
this.$tools.msg("登录后查看等多!")
|
// this.$tools.msg("登录后查看等多!")
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: "/pageTwo/me/menudetail?id=" + id
|
||||||
|
// })
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: "/pageTwo/me/menudetail?id=" + id
|
url: "/pages/test/test?id=" + id
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
After Width: | Height: | Size: 817 B |
|
After Width: | Height: | Size: 648 B |
|
After Width: | Height: | Size: 758 B |
|
After Width: | Height: | Size: 258 B |
|
|
@ -161,6 +161,11 @@ export default {
|
||||||
return res
|
return res
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
delCEatAction(param) { // 删除餐饮食物
|
||||||
|
return http.post("/kitchenscale/del_user_eat_log", param).then(res => {
|
||||||
|
return res
|
||||||
|
})
|
||||||
|
},
|
||||||
getLogList(param) { // 记食器角色饮食记录列表
|
getLogList(param) { // 记食器角色饮食记录列表
|
||||||
return http.post("/kitchenscale/get_log_list", param).then(res => {
|
return http.post("/kitchenscale/get_log_list", param).then(res => {
|
||||||
return res
|
return res
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
## 1.2.1(2021-11-22)
|
||||||
|
- 修复 vue3中个别scss变量无法找到的问题
|
||||||
|
## 1.2.0(2021-11-19)
|
||||||
|
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-drawer](https://uniapp.dcloud.io/component/uniui/uni-drawer)
|
||||||
|
## 1.1.1(2021-07-30)
|
||||||
|
- 优化 vue3下事件警告的问题
|
||||||
|
## 1.1.0(2021-07-13)
|
||||||
|
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.0.7(2021-05-12)
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.0.6(2021-02-04)
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
// #ifdef H5
|
||||||
|
export default {
|
||||||
|
name: 'Keypress',
|
||||||
|
props: {
|
||||||
|
disable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
const keyNames = {
|
||||||
|
esc: ['Esc', 'Escape'],
|
||||||
|
tab: 'Tab',
|
||||||
|
enter: 'Enter',
|
||||||
|
space: [' ', 'Spacebar'],
|
||||||
|
up: ['Up', 'ArrowUp'],
|
||||||
|
left: ['Left', 'ArrowLeft'],
|
||||||
|
right: ['Right', 'ArrowRight'],
|
||||||
|
down: ['Down', 'ArrowDown'],
|
||||||
|
delete: ['Backspace', 'Delete', 'Del']
|
||||||
|
}
|
||||||
|
const listener = ($event) => {
|
||||||
|
if (this.disable) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const keyName = Object.keys(keyNames).find(key => {
|
||||||
|
const keyName = $event.key
|
||||||
|
const value = keyNames[key]
|
||||||
|
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||||
|
})
|
||||||
|
if (keyName) {
|
||||||
|
// 避免和其他按键事件冲突
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$emit(keyName, {})
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('keyup', listener)
|
||||||
|
// this.$once('hook:beforeDestroy', () => {
|
||||||
|
// document.removeEventListener('keyup', listener)
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
render: () => {}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
@ -0,0 +1,183 @@
|
||||||
|
<template>
|
||||||
|
<view :style="{'display':visibleSync?'block':'none'}" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
|
||||||
|
<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
|
||||||
|
<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<keypress @esc="close('mask')" />
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// #ifdef H5
|
||||||
|
import keypress from './keypress.js'
|
||||||
|
// #endif
|
||||||
|
/**
|
||||||
|
* Drawer 抽屉
|
||||||
|
* @description 抽屉侧滑菜单
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=26
|
||||||
|
* @property {Boolean} mask = [true | false] 是否显示遮罩
|
||||||
|
* @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
|
||||||
|
* @property {Boolean} mode = [left | right] Drawer 滑出位置
|
||||||
|
* @value left 从左侧滑出
|
||||||
|
* @value right 从右侧侧滑出
|
||||||
|
* @property {Number} width 抽屉的宽度 ,仅 vue 页面生效
|
||||||
|
* @event {Function} close 组件关闭时触发事件
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'UniDrawer',
|
||||||
|
components: {
|
||||||
|
// #ifdef H5
|
||||||
|
keypress
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
emits:['change'],
|
||||||
|
props: {
|
||||||
|
/**
|
||||||
|
* 显示模式(左、右),只在初始化生效
|
||||||
|
*/
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 蒙层显示状态
|
||||||
|
*/
|
||||||
|
mask: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 遮罩是否可点击关闭
|
||||||
|
*/
|
||||||
|
maskClick:{
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 抽屉宽度
|
||||||
|
*/
|
||||||
|
width: {
|
||||||
|
type: Number,
|
||||||
|
default: 220
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visibleSync: false,
|
||||||
|
showDrawer: false,
|
||||||
|
rightMode: false,
|
||||||
|
watchTimer: null,
|
||||||
|
drawerWidth: 220
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.drawerWidth = this.width
|
||||||
|
// #endif
|
||||||
|
this.rightMode = this.mode === 'right'
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clear(){},
|
||||||
|
close(type) {
|
||||||
|
// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
|
||||||
|
if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
|
||||||
|
this._change('showDrawer', 'visibleSync', false)
|
||||||
|
},
|
||||||
|
open() {
|
||||||
|
// fixed by mehaotian 处理重复点击打开的事件
|
||||||
|
if(this.visibleSync) return
|
||||||
|
this._change('visibleSync', 'showDrawer', true)
|
||||||
|
},
|
||||||
|
_change(param1, param2, status) {
|
||||||
|
this[param1] = status
|
||||||
|
if (this.watchTimer) {
|
||||||
|
clearTimeout(this.watchTimer)
|
||||||
|
}
|
||||||
|
this.watchTimer = setTimeout(() => {
|
||||||
|
this[param2] = status
|
||||||
|
this.$emit('change',status)
|
||||||
|
}, status ? 50 : 300)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$uni-mask: rgba($color: #000000, $alpha: 0.4) ;
|
||||||
|
// 抽屉宽度
|
||||||
|
$drawer-width: 220px;
|
||||||
|
|
||||||
|
.uni-drawer {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: block;
|
||||||
|
/* #endif */
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-drawer__content {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: block;
|
||||||
|
/* #endif */
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: $drawer-width;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: $uni-bg-color;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-drawer--left {
|
||||||
|
left: 0;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
transform: translateX(-$drawer-width);
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
transform: translateX(-100%);
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-drawer--right {
|
||||||
|
right: 0;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
transform: translateX($drawer-width);
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
transform: translateX(100%);
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-drawer__content--visible {
|
||||||
|
transform: translateX(0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.uni-drawer__mask {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: block;
|
||||||
|
/* #endif */
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: $uni-mask;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-drawer__mask--visible {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: block;
|
||||||
|
/* #endif */
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
{
|
||||||
|
"id": "uni-drawer",
|
||||||
|
"displayName": "uni-drawer 抽屉",
|
||||||
|
"version": "1.2.1",
|
||||||
|
"description": "抽屉式导航,用于展示侧滑菜单,侧滑导航。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"drawer",
|
||||||
|
"抽屉",
|
||||||
|
"侧滑导航"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
|
||||||
|
|
||||||
|
## Drawer 抽屉
|
||||||
|
> **组件名:uni-drawer**
|
||||||
|
> 代码块: `uDrawer`
|
||||||
|
|
||||||
|
抽屉侧滑菜单。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-drawer)
|
||||||
|
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
## 1.3.16(2025-06-11)
|
||||||
|
- 修复 鸿蒙 next 浏览器上无法滑动的问题
|
||||||
|
## 1.3.14(2025-06-09)
|
||||||
|
- 优化 更新示例项目
|
||||||
|
## 1.3.13(2025-04-15)
|
||||||
|
- 修复 app 端 缺少leftOptions 或 rightOptions 时无法滑动的问题
|
||||||
|
## 1.3.12(2025-04-14)
|
||||||
|
- 修复 由上一个兼容版本引发的 安卓运行报错且无法回弹的问题
|
||||||
|
## 1.3.11(2025-04-08)
|
||||||
|
- 优化 兼容鸿蒙平台
|
||||||
|
- 修复 WEB 平台控制台报错
|
||||||
|
## 1.3.10(2024-01-17)
|
||||||
|
- 修复 点击按钮时,按钮会被点击穿透导致自动收缩的 bug(兼容阿里/百度/抖音小程序)
|
||||||
|
## 1.3.9(2024-01-17)
|
||||||
|
- 修复 点击按钮时,按钮会被点击穿透导致自动收缩的 bug
|
||||||
|
## 1.3.8(2023-04-13)
|
||||||
|
- 修复`uni-swipe-action`和`uni-swipe-action-item`不同时使用导致 closeOther 方法报错的 bug
|
||||||
|
## 1.3.7(2022-06-06)
|
||||||
|
- 修复 vue3 下使用组件不能正常运行的Bug
|
||||||
|
## 1.3.6(2022-05-31)
|
||||||
|
- 修复 h5端点击click触发两次的Bug
|
||||||
|
## 1.3.5(2022-05-23)
|
||||||
|
- 修复 isPC 找不到的Bug
|
||||||
|
## 1.3.4(2022-05-19)
|
||||||
|
- 修复 在 nvue 下 disabled 失效的bug
|
||||||
|
## 1.3.3(2022-03-31)
|
||||||
|
- 修复 按钮字体大小不能设置的bug
|
||||||
|
## 1.3.2(2022-03-16)
|
||||||
|
- 修复 h5和app端下报el错误的bug
|
||||||
|
## 1.3.1(2022-03-07)
|
||||||
|
- 修复 HBuilderX 1.4.X 版本中,h5和app端下报错的bug
|
||||||
|
## 1.3.0(2021-11-19)
|
||||||
|
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-swipe-action](https://uniapp.dcloud.io/component/uniui/uni-swipe-action)
|
||||||
|
## 1.2.4(2021-08-20)
|
||||||
|
- 优化 close-all 方法
|
||||||
|
## 1.2.3(2021-08-20)
|
||||||
|
- 新增 close-all 方法,关闭所有已打开的组件
|
||||||
|
## 1.2.2(2021-08-17)
|
||||||
|
- 新增 resize() 方法,在非微信小程序、h5、app-vue端出现不能滑动的问题的时候,重置组件
|
||||||
|
- 修复 app 端偶尔出现类似 Page[x][-x,xx;-x,xx,x,x-x] 的问题
|
||||||
|
- 优化 微信小程序、h5、app-vue 滑动逻辑,避免出现动态新增组件后不能滑动的问题
|
||||||
|
## 1.2.1(2021-07-30)
|
||||||
|
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
- 修复 跨页面修改组件数据 ,导致不能滑动的问题
|
||||||
|
## 1.1.10(2021-06-17)
|
||||||
|
- 修复 按钮点击执行两次的bug
|
||||||
|
## 1.1.9(2021-05-12)
|
||||||
|
- 新增 项目示例地址
|
||||||
|
## 1.1.8(2021-03-26)
|
||||||
|
- 修复 微信小程序 nv_navigator is not defined 报错的bug
|
||||||
|
## 1.1.7(2021-02-05)
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
- 新增 左侧滑动
|
||||||
|
- 新增 插槽使用方式
|
||||||
|
- 新增 threshold 属性,可以控制滑动缺省值
|
||||||
|
- 优化 长列表滚动性能
|
||||||
|
- 修复 滚动页面时触发组件滑动的Bug
|
||||||
|
|
@ -0,0 +1,302 @@
|
||||||
|
let bindIngXMixins = {}
|
||||||
|
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const BindingX = uni.requireNativePlugin('bindingx');
|
||||||
|
const dom = uni.requireNativePlugin('dom');
|
||||||
|
const animation = uni.requireNativePlugin('animation');
|
||||||
|
|
||||||
|
bindIngXMixins = {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
show(newVal) {
|
||||||
|
if (this.autoClose) return
|
||||||
|
if (this.stop) return
|
||||||
|
this.stop = true
|
||||||
|
if (newVal) {
|
||||||
|
this.open(newVal)
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
leftOptions() {
|
||||||
|
this.getSelectorQuery()
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
rightOptions(newVal) {
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.swipeaction = this.getSwipeAction()
|
||||||
|
if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
|
||||||
|
this.swipeaction.children.push(this)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.box = this.getEl(this.$refs['selector-box--hock'])
|
||||||
|
this.selector = this.getEl(this.$refs['selector-content--hock']);
|
||||||
|
this.leftButton = this.getEl(this.$refs['selector-left-button--hock']);
|
||||||
|
this.rightButton = this.getEl(this.$refs['selector-right-button--hock']);
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
// beforeDestroy() {
|
||||||
|
// this.swipeaction.children.forEach((item, index) => {
|
||||||
|
// if (item === this) {
|
||||||
|
// this.swipeaction.children.splice(index, 1)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.x = 0
|
||||||
|
this.button = {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
this.getSelectorQuery()
|
||||||
|
}, 200)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onClick(index, item, position) {
|
||||||
|
this.$emit('click', {
|
||||||
|
content: item,
|
||||||
|
index,
|
||||||
|
position
|
||||||
|
})
|
||||||
|
},
|
||||||
|
touchstart(e) {
|
||||||
|
// fix by mehaotian 禁止滑动
|
||||||
|
if (this.disabled) return
|
||||||
|
// 每次只触发一次,避免多次监听造成闪烁
|
||||||
|
if (this.stop) return
|
||||||
|
this.stop = true
|
||||||
|
if (this.autoClose && this.swipeaction) {
|
||||||
|
this.swipeaction.closeOther(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
const leftWidth = this.button.left.width
|
||||||
|
const rightWidth = this.button.right.width
|
||||||
|
let expression = this.range(this.x, -rightWidth, leftWidth)
|
||||||
|
let leftExpression = this.range(this.x - leftWidth, -leftWidth, 0)
|
||||||
|
let rightExpression = this.range(this.x + rightWidth, 0, rightWidth)
|
||||||
|
|
||||||
|
this.eventpan = BindingX.bind({
|
||||||
|
anchor: this.box,
|
||||||
|
eventType: 'pan',
|
||||||
|
props: [{
|
||||||
|
element: this.selector,
|
||||||
|
property: 'transform.translateX',
|
||||||
|
expression
|
||||||
|
}, {
|
||||||
|
element: this.leftButton,
|
||||||
|
property: 'transform.translateX',
|
||||||
|
expression: leftExpression
|
||||||
|
}, {
|
||||||
|
element: this.rightButton,
|
||||||
|
property: 'transform.translateX',
|
||||||
|
expression: rightExpression
|
||||||
|
}, ]
|
||||||
|
}, (e) => {
|
||||||
|
// nope
|
||||||
|
if (e.state === 'end') {
|
||||||
|
this.x = e.deltaX + this.x;
|
||||||
|
this.isclick = true
|
||||||
|
this.bindTiming(e.deltaX)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
touchend(e) {
|
||||||
|
if (this.isopen !== 'none' && !this.isclick) {
|
||||||
|
this.open('none')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
bindTiming(x) {
|
||||||
|
const left = this.x
|
||||||
|
const leftWidth = this.button.left.width
|
||||||
|
const rightWidth = this.button.right.width
|
||||||
|
const threshold = this.threshold
|
||||||
|
if (!this.isopen || this.isopen === 'none') {
|
||||||
|
if (left > threshold) {
|
||||||
|
this.open('left')
|
||||||
|
} else if (left < -threshold) {
|
||||||
|
this.open('right')
|
||||||
|
} else {
|
||||||
|
this.open('none')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if ((x > -leftWidth && x < 0) || x > rightWidth) {
|
||||||
|
if ((x > -threshold && x < 0) || (x - rightWidth > threshold)) {
|
||||||
|
this.open('left')
|
||||||
|
} else {
|
||||||
|
this.open('none')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if ((x < threshold && x > 0) || (x + leftWidth < -threshold)) {
|
||||||
|
this.open('right')
|
||||||
|
} else {
|
||||||
|
this.open('none')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移动范围
|
||||||
|
* @param {Object} num
|
||||||
|
* @param {Object} mix
|
||||||
|
* @param {Object} max
|
||||||
|
*/
|
||||||
|
range(num, mix, max) {
|
||||||
|
return `min(max(x+${num}, ${mix}), ${max})`
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开启swipe
|
||||||
|
*/
|
||||||
|
open(type) {
|
||||||
|
this.animation(type)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 关闭swipe
|
||||||
|
*/
|
||||||
|
close() {
|
||||||
|
this.animation('none')
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开启关闭动画
|
||||||
|
* @param {Object} type
|
||||||
|
*/
|
||||||
|
animation(type) {
|
||||||
|
const time = 300
|
||||||
|
const leftWidth = this.button.left.width
|
||||||
|
const rightWidth = this.button.right.width
|
||||||
|
if (this.eventpan && this.eventpan.token) {
|
||||||
|
BindingX.unbind({
|
||||||
|
token: this.eventpan.token,
|
||||||
|
eventType: 'pan'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (type) {
|
||||||
|
case 'left':
|
||||||
|
Promise.all([
|
||||||
|
this.move(this.selector, leftWidth),
|
||||||
|
this.move(this.leftButton, 0),
|
||||||
|
this.move(this.rightButton, rightWidth * 2)
|
||||||
|
]).then(() => {
|
||||||
|
this.setEmit(leftWidth, type)
|
||||||
|
})
|
||||||
|
break
|
||||||
|
case 'right':
|
||||||
|
Promise.all([
|
||||||
|
this.move(this.selector, -rightWidth),
|
||||||
|
this.move(this.leftButton, -leftWidth * 2),
|
||||||
|
this.move(this.rightButton, 0)
|
||||||
|
]).then(() => {
|
||||||
|
this.setEmit(-rightWidth, type)
|
||||||
|
})
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
Promise.all([
|
||||||
|
this.move(this.selector, 0),
|
||||||
|
this.move(this.leftButton, -leftWidth),
|
||||||
|
this.move(this.rightButton, rightWidth)
|
||||||
|
]).then(() => {
|
||||||
|
this.setEmit(0, type)
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setEmit(x, type) {
|
||||||
|
const leftWidth = this.button.left.width
|
||||||
|
const rightWidth = this.button.right.width
|
||||||
|
this.isopen = this.isopen || 'none'
|
||||||
|
this.stop = false
|
||||||
|
this.isclick = false
|
||||||
|
// 只有状态不一致才会返回结果
|
||||||
|
if (this.isopen !== type && this.x !== x) {
|
||||||
|
if (type === 'left' && leftWidth > 0) {
|
||||||
|
this.$emit('change', 'left')
|
||||||
|
}
|
||||||
|
if (type === 'right' && rightWidth > 0) {
|
||||||
|
this.$emit('change', 'right')
|
||||||
|
}
|
||||||
|
if (type === 'none') {
|
||||||
|
this.$emit('change', 'none')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.x = x
|
||||||
|
this.isopen = type
|
||||||
|
},
|
||||||
|
move(ref, value) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
animation.transition(ref, {
|
||||||
|
styles: {
|
||||||
|
transform: `translateX(${value})`,
|
||||||
|
},
|
||||||
|
duration: 150, //ms
|
||||||
|
timingFunction: 'linear',
|
||||||
|
needLayout: false,
|
||||||
|
delay: 0 //ms
|
||||||
|
}, function(res) {
|
||||||
|
resolve(res)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取ref
|
||||||
|
* @param {Object} el
|
||||||
|
*/
|
||||||
|
getEl(el) {
|
||||||
|
return el.ref
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取节点信息
|
||||||
|
*/
|
||||||
|
getSelectorQuery() {
|
||||||
|
Promise.all([
|
||||||
|
this.getDom('left'),
|
||||||
|
this.getDom('right'),
|
||||||
|
]).then((data) => {
|
||||||
|
let show = 'none'
|
||||||
|
if (this.autoClose) {
|
||||||
|
show = 'none'
|
||||||
|
} else {
|
||||||
|
show = this.show
|
||||||
|
}
|
||||||
|
|
||||||
|
if (show === 'none') {
|
||||||
|
// this.close()
|
||||||
|
} else {
|
||||||
|
this.open(show)
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
getDom(str) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
dom.getComponentRect(this.$refs[`selector-${str}-button--hock`], (data) => {
|
||||||
|
if (data) {
|
||||||
|
this.button[str] = data.size
|
||||||
|
resolve(data)
|
||||||
|
} else {
|
||||||
|
reject()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
export default bindIngXMixins
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
export function isPC() {
|
||||||
|
var userAgentInfo = navigator.userAgent;
|
||||||
|
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||||
|
var flag = true;
|
||||||
|
for (let v = 0; v < Agents.length - 1; v++) {
|
||||||
|
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||||
|
flag = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return flag;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,195 @@
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
x: 0,
|
||||||
|
transition: false,
|
||||||
|
width: 0,
|
||||||
|
viewWidth: 0,
|
||||||
|
swipeShow: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show(newVal) {
|
||||||
|
if (this.autoClose) return
|
||||||
|
if (newVal && newVal !== 'none') {
|
||||||
|
this.transition = true
|
||||||
|
this.open(newVal)
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.swipeaction = this.getSwipeAction()
|
||||||
|
if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
|
||||||
|
this.swipeaction.children.push(this)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.isopen = false
|
||||||
|
setTimeout(() => {
|
||||||
|
this.getQuerySelect()
|
||||||
|
}, 50)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
appTouchStart(e) {
|
||||||
|
const {
|
||||||
|
clientX
|
||||||
|
} = e.changedTouches[0]
|
||||||
|
this.clientX = clientX
|
||||||
|
this.timestamp = new Date().getTime()
|
||||||
|
},
|
||||||
|
appTouchEnd(e, index, item, position) {
|
||||||
|
const {
|
||||||
|
clientX
|
||||||
|
} = e.changedTouches[0]
|
||||||
|
// fixed by xxxx 模拟点击事件,解决 ios 13 点击区域错位的问题
|
||||||
|
let diff = Math.abs(this.clientX - clientX)
|
||||||
|
let time = (new Date().getTime()) - this.timestamp
|
||||||
|
if (diff < 40 && time < 300) {
|
||||||
|
this.$emit('click', {
|
||||||
|
content: item,
|
||||||
|
index,
|
||||||
|
position
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 移动触发
|
||||||
|
* @param {Object} e
|
||||||
|
*/
|
||||||
|
onChange(e) {
|
||||||
|
this.moveX = e.detail.x
|
||||||
|
this.isclose = false
|
||||||
|
},
|
||||||
|
touchstart(e) {
|
||||||
|
this.transition = false
|
||||||
|
this.isclose = true
|
||||||
|
if (this.autoClose && this.swipeaction) {
|
||||||
|
this.swipeaction.closeOther(this)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
touchmove(e) {},
|
||||||
|
touchend(e) {
|
||||||
|
// 0的位置什么都不执行
|
||||||
|
if (this.isclose && this.isopen === 'none') return
|
||||||
|
if (this.isclose && this.isopen !== 'none') {
|
||||||
|
this.transition = true
|
||||||
|
this.close()
|
||||||
|
} else {
|
||||||
|
this.move(this.moveX + this.leftWidth)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移动
|
||||||
|
* @param {Object} moveX
|
||||||
|
*/
|
||||||
|
move(moveX) {
|
||||||
|
// 打开关闭的处理逻辑不太一样
|
||||||
|
this.transition = true
|
||||||
|
// 未打开状态
|
||||||
|
if (!this.isopen || this.isopen === 'none') {
|
||||||
|
if (moveX > this.threshold) {
|
||||||
|
this.open('left')
|
||||||
|
} else if (moveX < -this.threshold) {
|
||||||
|
this.open('right')
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (moveX < 0 && moveX < this.rightWidth) {
|
||||||
|
const rightX = this.rightWidth + moveX
|
||||||
|
if (rightX < this.threshold) {
|
||||||
|
this.open('right')
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
} else if (moveX > 0 && moveX < this.leftWidth) {
|
||||||
|
const leftX = this.leftWidth - moveX
|
||||||
|
if (leftX < this.threshold) {
|
||||||
|
this.open('left')
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 打开
|
||||||
|
*/
|
||||||
|
open(type) {
|
||||||
|
this.x = this.moveX
|
||||||
|
this.animation(type)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 关闭
|
||||||
|
*/
|
||||||
|
close() {
|
||||||
|
this.x = this.moveX
|
||||||
|
// TODO 解决 x 值不更新的问题,所以会多触发一次 nextTick ,待优化
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.x = -this.leftWidth
|
||||||
|
if (this.isopen !== 'none') {
|
||||||
|
this.$emit('change', 'none')
|
||||||
|
}
|
||||||
|
this.isopen = 'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行结束动画
|
||||||
|
* @param {Object} type
|
||||||
|
*/
|
||||||
|
animation(type) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (type === 'left') {
|
||||||
|
this.x = 0
|
||||||
|
} else {
|
||||||
|
this.x = -this.rightWidth - this.leftWidth
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.isopen !== type) {
|
||||||
|
this.$emit('change', type)
|
||||||
|
}
|
||||||
|
this.isopen = type
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
getSlide(x) {},
|
||||||
|
getQuerySelect() {
|
||||||
|
const query = uni.createSelectorQuery().in(this);
|
||||||
|
query.selectAll('.movable-view--hock').boundingClientRect(data => {
|
||||||
|
this.leftWidth = data[1].width
|
||||||
|
this.rightWidth = data[2].width
|
||||||
|
this.width = data[0].width
|
||||||
|
this.viewWidth = this.width + this.rightWidth + this.leftWidth
|
||||||
|
if (this.leftWidth === 0) {
|
||||||
|
// TODO 疑似bug ,初始化的时候如果x 是0,会导致移动位置错误,所以让元素超出一点
|
||||||
|
this.x = -0.1
|
||||||
|
} else {
|
||||||
|
this.x = -this.leftWidth
|
||||||
|
}
|
||||||
|
this.moveX = this.x
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.swipeShow = 1
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!this.buttonWidth) {
|
||||||
|
this.disabledView = true
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.autoClose) return
|
||||||
|
if (this.show !== 'none') {
|
||||||
|
this.transition = true
|
||||||
|
this.open(this.shows)
|
||||||
|
}
|
||||||
|
}).exec();
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,260 @@
|
||||||
|
let otherMixins = {}
|
||||||
|
|
||||||
|
// #ifndef APP-PLUS|| MP-WEIXIN || H5
|
||||||
|
const MIN_DISTANCE = 10;
|
||||||
|
otherMixins = {
|
||||||
|
data() {
|
||||||
|
// TODO 随机生生元素ID,解决百度小程序获取同一个元素位置信息的bug
|
||||||
|
const elClass = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||||
|
return {
|
||||||
|
uniShow: false,
|
||||||
|
left: 0,
|
||||||
|
buttonShow: 'none',
|
||||||
|
ani: false,
|
||||||
|
moveLeft: '',
|
||||||
|
elClass
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show(newVal) {
|
||||||
|
if (this.autoClose) return
|
||||||
|
this.openState(newVal)
|
||||||
|
},
|
||||||
|
left() {
|
||||||
|
this.moveLeft = `translateX(${this.left}px)`
|
||||||
|
},
|
||||||
|
buttonShow(newVal) {
|
||||||
|
if (this.autoClose) return
|
||||||
|
this.openState(newVal)
|
||||||
|
},
|
||||||
|
leftOptions() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
rightOptions() {
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.swipeaction = this.getSwipeAction()
|
||||||
|
if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
|
||||||
|
this.swipeaction.children.push(this)
|
||||||
|
}
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
this.getSelectorQuery()
|
||||||
|
}, 100)
|
||||||
|
// 移动距离
|
||||||
|
this.left = 0
|
||||||
|
this.x = 0
|
||||||
|
},
|
||||||
|
|
||||||
|
closeSwipe(e) {
|
||||||
|
if (this.autoClose && this.swipeaction) {
|
||||||
|
this.swipeaction.closeOther(this)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
appTouchStart(e) {
|
||||||
|
const {
|
||||||
|
clientX
|
||||||
|
} = e.changedTouches[0]
|
||||||
|
this.clientX = clientX
|
||||||
|
this.timestamp = new Date().getTime()
|
||||||
|
},
|
||||||
|
appTouchEnd(e, index, item, position) {
|
||||||
|
const {
|
||||||
|
clientX
|
||||||
|
} = e.changedTouches[0]
|
||||||
|
// fixed by xxxx 模拟点击事件,解决 ios 13 点击区域错位的问题
|
||||||
|
let diff = Math.abs(this.clientX - clientX)
|
||||||
|
let time = (new Date().getTime()) - this.timestamp
|
||||||
|
if (diff < 40 && time < 300) {
|
||||||
|
this.$emit('click', {
|
||||||
|
content: item,
|
||||||
|
index,
|
||||||
|
position
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
touchstart(e) {
|
||||||
|
if (this.disabled) return
|
||||||
|
this.ani = false
|
||||||
|
this.x = this.left || 0
|
||||||
|
this.stopTouchStart(e)
|
||||||
|
this.autoClose && this.closeSwipe()
|
||||||
|
},
|
||||||
|
touchmove(e) {
|
||||||
|
if (this.disabled) return
|
||||||
|
// 是否可以滑动页面
|
||||||
|
this.stopTouchMove(e);
|
||||||
|
if (this.direction !== 'horizontal') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.move(this.x + this.deltaX)
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
touchend() {
|
||||||
|
if (this.disabled) return
|
||||||
|
this.moveDirection(this.left)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 设置移动距离
|
||||||
|
* @param {Object} value
|
||||||
|
*/
|
||||||
|
move(value) {
|
||||||
|
value = value || 0
|
||||||
|
const leftWidth = this.leftWidth
|
||||||
|
const rightWidth = this.rightWidth
|
||||||
|
// 获取可滑动范围
|
||||||
|
this.left = this.range(value, -rightWidth, leftWidth);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取范围
|
||||||
|
* @param {Object} num
|
||||||
|
* @param {Object} min
|
||||||
|
* @param {Object} max
|
||||||
|
*/
|
||||||
|
range(num, min, max) {
|
||||||
|
return Math.min(Math.max(num, min), max);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 移动方向判断
|
||||||
|
* @param {Object} left
|
||||||
|
* @param {Object} value
|
||||||
|
*/
|
||||||
|
moveDirection(left) {
|
||||||
|
const threshold = this.threshold
|
||||||
|
const isopen = this.isopen || 'none'
|
||||||
|
const leftWidth = this.leftWidth
|
||||||
|
const rightWidth = this.rightWidth
|
||||||
|
if (this.deltaX === 0) {
|
||||||
|
this.openState('none')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth >
|
||||||
|
0 && rightWidth +
|
||||||
|
left < threshold)) {
|
||||||
|
// right
|
||||||
|
this.openState('right')
|
||||||
|
} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth >
|
||||||
|
0 &&
|
||||||
|
leftWidth - left < threshold)) {
|
||||||
|
// left
|
||||||
|
this.openState('left')
|
||||||
|
} else {
|
||||||
|
// default
|
||||||
|
this.openState('none')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开启状态
|
||||||
|
* @param {Boolean} type
|
||||||
|
*/
|
||||||
|
openState(type) {
|
||||||
|
const leftWidth = this.leftWidth
|
||||||
|
const rightWidth = this.rightWidth
|
||||||
|
let left = ''
|
||||||
|
this.isopen = this.isopen ? this.isopen : 'none'
|
||||||
|
switch (type) {
|
||||||
|
case "left":
|
||||||
|
left = leftWidth
|
||||||
|
break
|
||||||
|
case "right":
|
||||||
|
left = -rightWidth
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
left = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (this.isopen !== type) {
|
||||||
|
this.throttle = true
|
||||||
|
this.$emit('change', type)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isopen = type
|
||||||
|
// 添加动画类
|
||||||
|
this.ani = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.move(left)
|
||||||
|
})
|
||||||
|
// 设置最终移动位置,理论上只要进入到这个函数,肯定是要打开的
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.openState('none')
|
||||||
|
},
|
||||||
|
getDirection(x, y) {
|
||||||
|
if (x > y && x > MIN_DISTANCE) {
|
||||||
|
return 'horizontal';
|
||||||
|
}
|
||||||
|
if (y > x && y > MIN_DISTANCE) {
|
||||||
|
return 'vertical';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置滑动状态
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
resetTouchStatus() {
|
||||||
|
this.direction = '';
|
||||||
|
this.deltaX = 0;
|
||||||
|
this.deltaY = 0;
|
||||||
|
this.offsetX = 0;
|
||||||
|
this.offsetY = 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置滑动开始位置
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
stopTouchStart(event) {
|
||||||
|
this.resetTouchStatus();
|
||||||
|
const touch = event.touches[0];
|
||||||
|
this.startX = touch.clientX;
|
||||||
|
this.startY = touch.clientY;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 滑动中,是否禁止打开
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
stopTouchMove(event) {
|
||||||
|
const touch = event.touches[0];
|
||||||
|
this.deltaX = touch.clientX - this.startX;
|
||||||
|
this.deltaY = touch.clientY - this.startY;
|
||||||
|
this.offsetX = Math.abs(this.deltaX);
|
||||||
|
this.offsetY = Math.abs(this.deltaY);
|
||||||
|
this.direction = this.direction || this.getDirection(this.offsetX, this.offsetY);
|
||||||
|
},
|
||||||
|
|
||||||
|
getSelectorQuery() {
|
||||||
|
const views = uni.createSelectorQuery().in(this)
|
||||||
|
views
|
||||||
|
.selectAll('.' + this.elClass)
|
||||||
|
.boundingClientRect(data => {
|
||||||
|
if (data.length === 0) return
|
||||||
|
let show = 'none'
|
||||||
|
if (this.autoClose) {
|
||||||
|
show = 'none'
|
||||||
|
} else {
|
||||||
|
show = this.show
|
||||||
|
}
|
||||||
|
this.leftWidth = data[0].width || 0
|
||||||
|
this.rightWidth = data[1].width || 0
|
||||||
|
this.buttonShow = show
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
export default otherMixins
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
let mpMixins = {}
|
||||||
|
let is_pc = null
|
||||||
|
// #ifdef H5
|
||||||
|
import {
|
||||||
|
isPC
|
||||||
|
} from "./isPC"
|
||||||
|
is_pc = isPC()
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-VUE || APP-HARMONY || MP-WEIXIN || H5
|
||||||
|
|
||||||
|
mpMixins = {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_show: 'none'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show(newVal) {
|
||||||
|
this.is_show = this.show
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.swipeaction = this.getSwipeAction()
|
||||||
|
if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
|
||||||
|
this.swipeaction.children.push(this)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.is_show = this.show
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// wxs 中调用
|
||||||
|
closeSwipe(e) {
|
||||||
|
if (this.autoClose && this.swipeaction) {
|
||||||
|
this.swipeaction.closeOther(this)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
change(e) {
|
||||||
|
this.$emit('change', e.open)
|
||||||
|
if (this.is_show !== e.open) {
|
||||||
|
this.is_show = e.open
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
appTouchStart(e) {
|
||||||
|
if (is_pc) return
|
||||||
|
const {
|
||||||
|
clientX
|
||||||
|
} = e.changedTouches[0]
|
||||||
|
this.clientX = clientX
|
||||||
|
this.timestamp = new Date().getTime()
|
||||||
|
},
|
||||||
|
appTouchEnd(e, index, item, position) {
|
||||||
|
if (is_pc) return
|
||||||
|
const {
|
||||||
|
clientX
|
||||||
|
} = e.changedTouches[0]
|
||||||
|
// fixed by xxxx 模拟点击事件,解决 ios 13 点击区域错位的问题
|
||||||
|
let diff = Math.abs(this.clientX - clientX)
|
||||||
|
let time = (new Date().getTime()) - this.timestamp
|
||||||
|
if (diff < 40 && time < 300) {
|
||||||
|
this.$emit('click', {
|
||||||
|
content: item,
|
||||||
|
index,
|
||||||
|
position
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onClickForPC(index, item, position) {
|
||||||
|
if (!is_pc) return
|
||||||
|
// #ifdef H5
|
||||||
|
this.$emit('click', {
|
||||||
|
content: item,
|
||||||
|
index,
|
||||||
|
position
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
export default mpMixins
|
||||||
|
|
@ -0,0 +1,277 @@
|
||||||
|
const MIN_DISTANCE = 10;
|
||||||
|
export default {
|
||||||
|
showWatch(newVal, oldVal, ownerInstance, instance, self) {
|
||||||
|
var state = self.state || {}
|
||||||
|
var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
|
||||||
|
if (!$el) return
|
||||||
|
this.getDom(instance, ownerInstance, self)
|
||||||
|
if (newVal && newVal !== 'none') {
|
||||||
|
this.openState(newVal, instance, ownerInstance, self)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state.left) {
|
||||||
|
this.openState('none', instance, ownerInstance, self)
|
||||||
|
}
|
||||||
|
this.resetTouchStatus(instance, self)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始触摸操作
|
||||||
|
* @param {Object} e
|
||||||
|
* @param {Object} ins
|
||||||
|
*/
|
||||||
|
touchstart(e, ownerInstance, self) {
|
||||||
|
let instance = e.instance;
|
||||||
|
let disabled = instance.getDataset().disabled
|
||||||
|
let state = self.state || {};
|
||||||
|
this.getDom(instance, ownerInstance, self)
|
||||||
|
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||||
|
disabled = this.getDisabledType(disabled)
|
||||||
|
if (disabled) return
|
||||||
|
// 开始触摸时移除动画类
|
||||||
|
instance.requestAnimationFrame(function() {
|
||||||
|
instance.removeClass('ani');
|
||||||
|
ownerInstance.callMethod('closeSwipe');
|
||||||
|
})
|
||||||
|
|
||||||
|
// 记录上次的位置
|
||||||
|
state.x = state.left || 0
|
||||||
|
// 计算滑动开始位置
|
||||||
|
this.stopTouchStart(e, ownerInstance, self)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始滑动操作
|
||||||
|
* @param {Object} e
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
touchmove(e, ownerInstance, self) {
|
||||||
|
let instance = e.instance;
|
||||||
|
// 删除之后已经那不到实例了
|
||||||
|
if (!instance) return;
|
||||||
|
let disabled = instance.getDataset().disabled
|
||||||
|
let state = self.state || {}
|
||||||
|
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||||
|
disabled = this.getDisabledType(disabled)
|
||||||
|
if (disabled) return
|
||||||
|
// 是否可以滑动页面
|
||||||
|
this.stopTouchMove(e, self);
|
||||||
|
if (state.direction !== 'horizontal') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (e.preventDefault) {
|
||||||
|
// 阻止页面滚动
|
||||||
|
e.preventDefault()
|
||||||
|
}
|
||||||
|
let x = state.x + state.deltaX
|
||||||
|
this.move(x, instance, ownerInstance, self)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 结束触摸操作
|
||||||
|
* @param {Object} e
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
touchend(e, ownerInstance, self) {
|
||||||
|
let instance = e.instance;
|
||||||
|
let disabled = instance.getDataset().disabled
|
||||||
|
let state = self.state || {}
|
||||||
|
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||||
|
disabled = this.getDisabledType(disabled)
|
||||||
|
|
||||||
|
if (disabled) return
|
||||||
|
// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
|
||||||
|
// fixed by mehaotian 定时器解决点击按钮,touchend 触发比 click 事件时机早的问题 ,主要是 ios13
|
||||||
|
this.moveDirection(state.left, instance, ownerInstance, self)
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置移动距离
|
||||||
|
* @param {Object} value
|
||||||
|
* @param {Object} instance
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
move(value, instance, ownerInstance, self) {
|
||||||
|
value = value || 0
|
||||||
|
let state = self.state || {}
|
||||||
|
let leftWidth = state.leftWidth
|
||||||
|
let rightWidth = state.rightWidth
|
||||||
|
// 获取可滑动范围
|
||||||
|
state.left = this.range(value, -rightWidth, leftWidth);
|
||||||
|
instance.requestAnimationFrame(function() {
|
||||||
|
instance.setStyle({
|
||||||
|
transform: 'translateX(' + state.left + 'px)',
|
||||||
|
'-webkit-transform': 'translateX(' + state.left + 'px)'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取元素信息
|
||||||
|
* @param {Object} instance
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
getDom(instance, ownerInstance, self) {
|
||||||
|
var state = self.state || {}
|
||||||
|
var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
|
||||||
|
var leftDom = $el.querySelector('.button-group--left')
|
||||||
|
var rightDom = $el.querySelector('.button-group--right')
|
||||||
|
if (leftDom && leftDom.offsetWidth) {
|
||||||
|
state.leftWidth = leftDom.offsetWidth || 0
|
||||||
|
} else {
|
||||||
|
state.leftWidth = 0
|
||||||
|
}
|
||||||
|
if (rightDom && rightDom.offsetWidth) {
|
||||||
|
state.rightWidth = rightDom.offsetWidth || 0
|
||||||
|
} else {
|
||||||
|
state.rightWidth = 0
|
||||||
|
}
|
||||||
|
state.threshold = instance.getDataset().threshold
|
||||||
|
},
|
||||||
|
|
||||||
|
getDisabledType(value) {
|
||||||
|
return (typeof(value) === 'string' ? JSON.parse(value) : value) || false;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取范围
|
||||||
|
* @param {Object} num
|
||||||
|
* @param {Object} min
|
||||||
|
* @param {Object} max
|
||||||
|
*/
|
||||||
|
range(num, min, max) {
|
||||||
|
return Math.min(Math.max(num, min), max);
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移动方向判断
|
||||||
|
* @param {Object} left
|
||||||
|
* @param {Object} value
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
* @param {Object} ins
|
||||||
|
*/
|
||||||
|
moveDirection(left, ins, ownerInstance, self) {
|
||||||
|
var state = self.state || {}
|
||||||
|
var threshold = state.threshold
|
||||||
|
var position = state.position
|
||||||
|
var isopen = state.isopen || 'none'
|
||||||
|
var leftWidth = state.leftWidth
|
||||||
|
var rightWidth = state.rightWidth
|
||||||
|
if (state.deltaX === 0) {
|
||||||
|
this.openState('none', ins, ownerInstance, self)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 &&
|
||||||
|
rightWidth +
|
||||||
|
left < threshold)) {
|
||||||
|
// right
|
||||||
|
this.openState('right', ins, ownerInstance, self)
|
||||||
|
} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
|
||||||
|
leftWidth - left < threshold)) {
|
||||||
|
// left
|
||||||
|
this.openState('left', ins, ownerInstance, self)
|
||||||
|
} else {
|
||||||
|
// default
|
||||||
|
this.openState('none', ins, ownerInstance, self)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开启状态
|
||||||
|
* @param {Boolean} type
|
||||||
|
* @param {Object} ins
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
openState(type, ins, ownerInstance, self) {
|
||||||
|
let state = self.state || {}
|
||||||
|
let leftWidth = state.leftWidth
|
||||||
|
let rightWidth = state.rightWidth
|
||||||
|
let left = ''
|
||||||
|
state.isopen = state.isopen ? state.isopen : 'none'
|
||||||
|
switch (type) {
|
||||||
|
case "left":
|
||||||
|
left = leftWidth
|
||||||
|
break
|
||||||
|
case "right":
|
||||||
|
left = -rightWidth
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
left = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// && !state.throttle
|
||||||
|
|
||||||
|
if (state.isopen !== type) {
|
||||||
|
state.throttle = true
|
||||||
|
ownerInstance.callMethod('change', {
|
||||||
|
open: type
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
state.isopen = type
|
||||||
|
// 添加动画类
|
||||||
|
ins.requestAnimationFrame(() => {
|
||||||
|
ins.addClass('ani');
|
||||||
|
this.move(left, ins, ownerInstance, self)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
getDirection(x, y) {
|
||||||
|
if (x > y && x > MIN_DISTANCE) {
|
||||||
|
return 'horizontal';
|
||||||
|
}
|
||||||
|
if (y > x && y > MIN_DISTANCE) {
|
||||||
|
return 'vertical';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置滑动状态
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
resetTouchStatus(instance, self) {
|
||||||
|
let state = self.state || {};
|
||||||
|
state.direction = '';
|
||||||
|
state.deltaX = 0;
|
||||||
|
state.deltaY = 0;
|
||||||
|
state.offsetX = 0;
|
||||||
|
state.offsetY = 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置滑动开始位置
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
stopTouchStart(event, ownerInstance, self) {
|
||||||
|
let instance = event.instance;
|
||||||
|
let state = self.state || {}
|
||||||
|
this.resetTouchStatus(instance, self);
|
||||||
|
var touch = event.touches[0];
|
||||||
|
state.startX = touch.clientX;
|
||||||
|
state.startY = touch.clientY;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 滑动中,是否禁止打开
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
stopTouchMove(event, self) {
|
||||||
|
let instance = event.instance;
|
||||||
|
let state = self.state || {};
|
||||||
|
let touch = event.touches[0];
|
||||||
|
|
||||||
|
state.deltaX = touch.clientX - state.startX;
|
||||||
|
state.deltaY = touch.clientY - state.startY;
|
||||||
|
state.offsetY = Math.abs(state.deltaY);
|
||||||
|
state.offsetX = Math.abs(state.deltaX);
|
||||||
|
state.direction = state.direction || this.getDirection(state.offsetX, state.offsetY);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,351 @@
|
||||||
|
<template>
|
||||||
|
<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
|
||||||
|
<!-- #ifdef APP-VUE || APP-HARMONY || MP-WEIXIN || H5 -->
|
||||||
|
<view class="uni-swipe">
|
||||||
|
<!-- #ifdef MP-WEIXIN || H5 -->
|
||||||
|
<view class="uni-swipe_box" :change:prop="wxsswipe.showWatch" :prop="is_show" :data-threshold="threshold"
|
||||||
|
:data-disabled="disabled" @touchstart="wxsswipe.touchstart" @touchmove="wxsswipe.touchmove"
|
||||||
|
@touchend="wxsswipe.touchend">
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifndef MP-WEIXIN || H5 -->
|
||||||
|
<view class="uni-swipe_box" :change:prop="renderswipe.showWatch" :prop="is_show" :data-threshold="threshold"
|
||||||
|
:data-disabled="disabled+''" @touchstart="renderswipe.touchstart" @touchmove="renderswipe.touchmove"
|
||||||
|
@touchend="renderswipe.touchend">
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
|
||||||
|
<view class="uni-swipe_button-group button-group--left">
|
||||||
|
<slot name="left">
|
||||||
|
<view v-for="(item,index) in leftOptions" :key="index" :style="{
|
||||||
|
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
|
||||||
|
}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart"
|
||||||
|
@touchend.stop="appTouchEnd($event,index,item,'left')" @click.stop="onClickForPC(index,item,'left')">
|
||||||
|
<text class="uni-swipe_button-text"
|
||||||
|
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<view class="uni-swipe_text--center">
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
<view class="uni-swipe_button-group button-group--right">
|
||||||
|
<slot name="right">
|
||||||
|
<view v-for="(item,index) in rightOptions" :key="index" :style="{
|
||||||
|
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
|
||||||
|
}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart"
|
||||||
|
@touchend.stop="appTouchEnd($event,index,item,'right')" @click.stop="onClickForPC(index,item,'right')"><text
|
||||||
|
class="uni-swipe_button-text"
|
||||||
|
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- app nvue端 使用 bindingx -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<view ref="selector-box--hock" class="uni-swipe" @horizontalpan="touchstart" @touchend="touchend">
|
||||||
|
<view ref='selector-left-button--hock' class="uni-swipe_button-group button-group--left">
|
||||||
|
<slot name="left">
|
||||||
|
<view v-for="(item,index) in leftOptions" :key="index" :style="{
|
||||||
|
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
|
||||||
|
}" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'left')">
|
||||||
|
<text class="uni-swipe_button-text"
|
||||||
|
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF', fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">
|
||||||
|
{{ item.text }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<view ref='selector-right-button--hock' class="uni-swipe_button-group button-group--right">
|
||||||
|
<slot name="right">
|
||||||
|
<view v-for="(item,index) in rightOptions" :key="index" :style="{
|
||||||
|
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
|
||||||
|
}" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'right')"><text
|
||||||
|
class="uni-swipe_button-text"
|
||||||
|
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<view ref='selector-content--hock' class="uni-swipe_box">
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- 其他平台使用 js ,长列表性能可能会有影响-->
|
||||||
|
<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-HARMONY -->
|
||||||
|
<view class="uni-swipe">
|
||||||
|
<view class="uni-swipe_box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
|
||||||
|
:style="{transform:moveLeft}" :class="{ani:ani}">
|
||||||
|
<view class="uni-swipe_button-group button-group--left" :class="[elClass]">
|
||||||
|
<slot name="left">
|
||||||
|
<view v-for="(item,index) in leftOptions" :key="index" :style="{
|
||||||
|
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
|
||||||
|
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
|
||||||
|
}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart"
|
||||||
|
@touchend.stop="appTouchEnd($event,index,item,'left')"><text class="uni-swipe_button-text"
|
||||||
|
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<slot></slot>
|
||||||
|
<view class="uni-swipe_button-group button-group--right" :class="[elClass]">
|
||||||
|
<slot name="right">
|
||||||
|
<view v-for="(item,index) in rightOptions" :key="index" :style="{
|
||||||
|
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
|
||||||
|
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
|
||||||
|
}" @touchstart.stop="appTouchStart" @touchend.stop="appTouchEnd($event,index,item,'right')"
|
||||||
|
class="uni-swipe_button button-hock"><text class="uni-swipe_button-text"
|
||||||
|
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script src="./wx.wxs" module="wxsswipe" lang="wxs"></script>
|
||||||
|
|
||||||
|
<script module="renderswipe" lang="renderjs">
|
||||||
|
import render from './render.js'
|
||||||
|
export default {
|
||||||
|
mounted(e, ins, owner) {
|
||||||
|
this.state = {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showWatch(newVal, oldVal, ownerInstance, instance) {
|
||||||
|
render.showWatch(newVal, oldVal, ownerInstance, instance, this)
|
||||||
|
},
|
||||||
|
touchstart(e, ownerInstance) {
|
||||||
|
render.touchstart(e, ownerInstance, this)
|
||||||
|
},
|
||||||
|
touchmove(e, ownerInstance) {
|
||||||
|
render.touchmove(e, ownerInstance, this)
|
||||||
|
},
|
||||||
|
touchend(e, ownerInstance) {
|
||||||
|
render.touchend(e, ownerInstance, this)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
import mpwxs from './mpwxs'
|
||||||
|
import bindingx from './bindingx.js'
|
||||||
|
import mpother from './mpother'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* SwipeActionItem 滑动操作子组件
|
||||||
|
* @description 通过滑动触发选项的容器
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=181
|
||||||
|
* @property {Boolean} show = [left|right|none] 开启关闭组件,auto-close = false 时生效
|
||||||
|
* @property {Boolean} disabled = [true|false] 是否禁止滑动
|
||||||
|
* @property {Boolean} autoClose = [true|false] 滑动打开当前组件,是否关闭其他组件
|
||||||
|
* @property {Number} threshold 滑动缺省值
|
||||||
|
* @property {Array} leftOptions 左侧选项内容及样式
|
||||||
|
* @property {Array} rightOptions 右侧选项内容及样式
|
||||||
|
* @event {Function} click 点击选项按钮时触发事件,e = {content,index} ,content(点击内容)、index(下标)
|
||||||
|
* @event {Function} change 组件打开或关闭时触发,left\right\none
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [mpwxs, bindingx, mpother],
|
||||||
|
emits: ['click', 'change'],
|
||||||
|
props: {
|
||||||
|
// 控制开关
|
||||||
|
show: {
|
||||||
|
type: String,
|
||||||
|
default: 'none'
|
||||||
|
},
|
||||||
|
|
||||||
|
// 禁用
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
|
||||||
|
// 是否自动关闭
|
||||||
|
autoClose: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 滑动缺省距离
|
||||||
|
threshold: {
|
||||||
|
type: Number,
|
||||||
|
default: 20
|
||||||
|
},
|
||||||
|
|
||||||
|
// 左侧按钮内容
|
||||||
|
leftOptions: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 右侧按钮内容
|
||||||
|
rightOptions: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
// #ifndef VUE3
|
||||||
|
// TODO vue2
|
||||||
|
destroyed() {
|
||||||
|
if (this.__isUnmounted) return
|
||||||
|
this.uninstall()
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
// TODO vue3
|
||||||
|
unmounted() {
|
||||||
|
this.__isUnmounted = true
|
||||||
|
this.uninstall()
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
uninstall() {
|
||||||
|
if (this.swipeaction) {
|
||||||
|
this.swipeaction.children.forEach((item, index) => {
|
||||||
|
if (item === this) {
|
||||||
|
this.swipeaction.children.splice(index, 1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取父元素实例
|
||||||
|
*/
|
||||||
|
getSwipeAction(name = 'uniSwipeAction') {
|
||||||
|
let parent = this.$parent;
|
||||||
|
let parentName = parent.$options.name;
|
||||||
|
while (parentName !== name) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (!parent) return false;
|
||||||
|
parentName = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.uni-swipe {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
overflow: hidden;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-swipe_box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
// touch-action: none;
|
||||||
|
/* #endif */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-swipe_content {
|
||||||
|
// border: 1px red solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-swipe_text--center {
|
||||||
|
width: 100%;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
cursor: grab;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-swipe_button-group {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group--left {
|
||||||
|
left: 0;
|
||||||
|
transform: translateX(-100%)
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group--right {
|
||||||
|
right: 0;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transform: translateX(100%)
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-swipe_button {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
flex: 1;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-swipe_button-text {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
flex-shrink: 0;
|
||||||
|
/* #endif */
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ani {
|
||||||
|
transition-property: transform;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifdef MP-ALIPAY */
|
||||||
|
.movable-area {
|
||||||
|
/* width: 100%; */
|
||||||
|
height: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movable-view {
|
||||||
|
display: flex;
|
||||||
|
/* justify-content: center; */
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
height: 45px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movable-view-button {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 100%;
|
||||||
|
background: #C0C0C0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .transition {
|
||||||
|
transition: all 0.3s;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.movable-view-box {
|
||||||
|
flex-shrink: 0;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,349 @@
|
||||||
|
var MIN_DISTANCE = 10;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 判断当前是否为H5、app-vue
|
||||||
|
*/
|
||||||
|
var IS_HTML5 = false
|
||||||
|
if (typeof window === 'object') IS_HTML5 = true
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 监听页面内值的变化,主要用于动态开关swipe-action
|
||||||
|
* @param {Object} newValue
|
||||||
|
* @param {Object} oldValue
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
* @param {Object} instance
|
||||||
|
*/
|
||||||
|
function showWatch(newVal, oldVal, ownerInstance, instance) {
|
||||||
|
var state = instance.getState()
|
||||||
|
getDom(instance, ownerInstance)
|
||||||
|
if (newVal && newVal !== 'none') {
|
||||||
|
openState(newVal, instance, ownerInstance)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state.left) {
|
||||||
|
openState('none', instance, ownerInstance)
|
||||||
|
}
|
||||||
|
resetTouchStatus(instance)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始触摸操作
|
||||||
|
* @param {Object} e
|
||||||
|
* @param {Object} ins
|
||||||
|
*/
|
||||||
|
function touchstart(e, ownerInstance) {
|
||||||
|
var instance = e.instance;
|
||||||
|
var disabled = instance.getDataset().disabled
|
||||||
|
var state = instance.getState();
|
||||||
|
getDom(instance, ownerInstance)
|
||||||
|
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||||
|
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||||
|
if (disabled) return
|
||||||
|
// 开始触摸时移除动画类
|
||||||
|
instance.requestAnimationFrame(function() {
|
||||||
|
instance.removeClass('ani');
|
||||||
|
ownerInstance.callMethod('closeSwipe');
|
||||||
|
})
|
||||||
|
|
||||||
|
// 记录上次的位置
|
||||||
|
state.x = state.left || 0
|
||||||
|
// 计算滑动开始位置
|
||||||
|
stopTouchStart(e, ownerInstance)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始滑动操作
|
||||||
|
* @param {Object} e
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
function touchmove(e, ownerInstance) {
|
||||||
|
var instance = e.instance;
|
||||||
|
var disabled = instance.getDataset().disabled
|
||||||
|
var state = instance.getState()
|
||||||
|
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||||
|
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||||
|
if (disabled) return
|
||||||
|
// 是否可以滑动页面
|
||||||
|
stopTouchMove(e);
|
||||||
|
if (state.direction !== 'horizontal') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.preventDefault) {
|
||||||
|
// 阻止页面滚动
|
||||||
|
e.preventDefault()
|
||||||
|
}
|
||||||
|
|
||||||
|
move(state.x + state.deltaX, instance, ownerInstance)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 结束触摸操作
|
||||||
|
* @param {Object} e
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
function touchend(e, ownerInstance) {
|
||||||
|
var instance = e.instance;
|
||||||
|
var disabled = instance.getDataset().disabled
|
||||||
|
var state = instance.getState()
|
||||||
|
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||||
|
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||||
|
|
||||||
|
if (disabled) return
|
||||||
|
// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
|
||||||
|
// fixed by mehaotian 定时器解决点击按钮,touchend 触发比 click 事件时机早的问题 ,主要是 ios13
|
||||||
|
moveDirection(state.left, instance, ownerInstance)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置移动距离
|
||||||
|
* @param {Object} value
|
||||||
|
* @param {Object} instance
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
function move(value, instance, ownerInstance) {
|
||||||
|
value = value || 0
|
||||||
|
var state = instance.getState()
|
||||||
|
var leftWidth = state.leftWidth
|
||||||
|
var rightWidth = state.rightWidth
|
||||||
|
// 获取可滑动范围
|
||||||
|
state.left = range(value, -rightWidth, leftWidth);
|
||||||
|
instance.requestAnimationFrame(function() {
|
||||||
|
instance.setStyle({
|
||||||
|
transform: 'translateX(' + state.left + 'px)',
|
||||||
|
'-webkit-transform': 'translateX(' + state.left + 'px)'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取元素信息
|
||||||
|
* @param {Object} instance
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
function getDom(instance, ownerInstance) {
|
||||||
|
var state = instance.getState()
|
||||||
|
var leftDom = ownerInstance.selectComponent('.button-group--left')
|
||||||
|
var rightDom = ownerInstance.selectComponent('.button-group--right')
|
||||||
|
var leftStyles = {
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
|
var rightStyles = {
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
if (leftDom) {
|
||||||
|
leftStyles = leftDom.getBoundingClientRect()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (rightDom) {
|
||||||
|
rightStyles = rightDom.getBoundingClientRect()
|
||||||
|
}
|
||||||
|
state.leftWidth = leftStyles.width || 0
|
||||||
|
state.rightWidth = rightStyles.width || 0
|
||||||
|
state.threshold = instance.getDataset().threshold
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取范围
|
||||||
|
* @param {Object} num
|
||||||
|
* @param {Object} min
|
||||||
|
* @param {Object} max
|
||||||
|
*/
|
||||||
|
function range(num, min, max) {
|
||||||
|
return Math.min(Math.max(num, min), max);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移动方向判断
|
||||||
|
* @param {Object} left
|
||||||
|
* @param {Object} value
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
* @param {Object} ins
|
||||||
|
*/
|
||||||
|
function moveDirection(left, ins, ownerInstance) {
|
||||||
|
var state = ins.getState()
|
||||||
|
var threshold = state.threshold
|
||||||
|
var position = state.position
|
||||||
|
var isopen = state.isopen || 'none'
|
||||||
|
var leftWidth = state.leftWidth
|
||||||
|
var rightWidth = state.rightWidth
|
||||||
|
if (state.deltaX === 0) {
|
||||||
|
openState('none', ins, ownerInstance)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 &&
|
||||||
|
rightWidth +
|
||||||
|
left < threshold)) {
|
||||||
|
// right
|
||||||
|
openState('right', ins, ownerInstance)
|
||||||
|
} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
|
||||||
|
leftWidth - left < threshold)) {
|
||||||
|
// left
|
||||||
|
openState('left', ins, ownerInstance)
|
||||||
|
} else {
|
||||||
|
// default
|
||||||
|
openState('none', ins, ownerInstance)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开启状态
|
||||||
|
* @param {Boolean} type
|
||||||
|
* @param {Object} ins
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
function openState(type, ins, ownerInstance) {
|
||||||
|
var state = ins.getState()
|
||||||
|
var leftWidth = state.leftWidth
|
||||||
|
var rightWidth = state.rightWidth
|
||||||
|
var left = ''
|
||||||
|
state.isopen = state.isopen ? state.isopen : 'none'
|
||||||
|
switch (type) {
|
||||||
|
case "left":
|
||||||
|
left = leftWidth
|
||||||
|
break
|
||||||
|
case "right":
|
||||||
|
left = -rightWidth
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
left = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// && !state.throttle
|
||||||
|
|
||||||
|
if (state.isopen !== type) {
|
||||||
|
state.throttle = true
|
||||||
|
ownerInstance.callMethod('change', {
|
||||||
|
open: type
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
state.isopen = type
|
||||||
|
// 添加动画类
|
||||||
|
ins.requestAnimationFrame(function() {
|
||||||
|
ins.addClass('ani');
|
||||||
|
move(left, ins, ownerInstance)
|
||||||
|
})
|
||||||
|
// 设置最终移动位置,理论上只要进入到这个函数,肯定是要打开的
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function getDirection(x, y) {
|
||||||
|
if (x > y && x > MIN_DISTANCE) {
|
||||||
|
return 'horizontal';
|
||||||
|
}
|
||||||
|
if (y > x && y > MIN_DISTANCE) {
|
||||||
|
return 'vertical';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置滑动状态
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
function resetTouchStatus(instance) {
|
||||||
|
var state = instance.getState();
|
||||||
|
state.direction = '';
|
||||||
|
state.deltaX = 0;
|
||||||
|
state.deltaY = 0;
|
||||||
|
state.offsetX = 0;
|
||||||
|
state.offsetY = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置滑动开始位置
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
function stopTouchStart(event) {
|
||||||
|
var instance = event.instance;
|
||||||
|
var state = instance.getState();
|
||||||
|
resetTouchStatus(instance);
|
||||||
|
var touch = event.touches[0];
|
||||||
|
if (IS_HTML5 && isPC()) {
|
||||||
|
touch = event;
|
||||||
|
}
|
||||||
|
state.startX = touch.clientX;
|
||||||
|
state.startY = touch.clientY;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 滑动中,是否禁止打开
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
function stopTouchMove(event) {
|
||||||
|
var instance = event.instance;
|
||||||
|
var state = instance.getState();
|
||||||
|
var touch = event.touches[0];
|
||||||
|
if (IS_HTML5 && isPC()) {
|
||||||
|
touch = event;
|
||||||
|
}
|
||||||
|
state.deltaX = touch.clientX - state.startX;
|
||||||
|
state.deltaY = touch.clientY - state.startY;
|
||||||
|
state.offsetY = Math.abs(state.deltaY);
|
||||||
|
state.offsetX = Math.abs(state.deltaX);
|
||||||
|
state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isPC() {
|
||||||
|
var userAgentInfo = navigator.userAgent;
|
||||||
|
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||||
|
var flag = true;
|
||||||
|
for (var v = 0; v < Agents.length - 1; v++) {
|
||||||
|
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||||
|
flag = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(userAgentInfo.indexOf('Phone') > 0 && userAgentInfo.indexOf('Harmony') > 0){
|
||||||
|
flag = false;
|
||||||
|
}
|
||||||
|
return flag;
|
||||||
|
}
|
||||||
|
|
||||||
|
var movable = false
|
||||||
|
|
||||||
|
function mousedown(e, ins) {
|
||||||
|
if (!IS_HTML5) return
|
||||||
|
if (!isPC()) return
|
||||||
|
touchstart(e, ins)
|
||||||
|
movable = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function mousemove(e, ins) {
|
||||||
|
if (!IS_HTML5) return
|
||||||
|
if (!isPC()) return
|
||||||
|
if (!movable) return
|
||||||
|
touchmove(e, ins)
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseup(e, ins) {
|
||||||
|
if (!IS_HTML5) return
|
||||||
|
if (!isPC()) return
|
||||||
|
touchend(e, ins)
|
||||||
|
movable = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseleave(e, ins) {
|
||||||
|
if (!IS_HTML5) return
|
||||||
|
if (!isPC()) return
|
||||||
|
movable = false
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
showWatch: showWatch,
|
||||||
|
touchstart: touchstart,
|
||||||
|
touchmove: touchmove,
|
||||||
|
touchend: touchend,
|
||||||
|
mousedown: mousedown,
|
||||||
|
mousemove: mousemove,
|
||||||
|
mouseup: mouseup,
|
||||||
|
mouseleave: mouseleave
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* SwipeAction 滑动操作
|
||||||
|
* @description 通过滑动触发选项的容器
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=181
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name:"uniSwipeAction",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.children = [];
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 公开给用户使用,重制组件样式
|
||||||
|
resize(){
|
||||||
|
// wxs 会自己计算组件大小,所以无需执行下面代码
|
||||||
|
// #ifndef APP-VUE || H5 || MP-WEIXIN || MP-HARMONY
|
||||||
|
this.children.forEach(vm=>{
|
||||||
|
vm.init()
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
// 公开给用户使用,关闭全部 已经打开的组件
|
||||||
|
closeAll(){
|
||||||
|
this.children.forEach(vm=>{
|
||||||
|
// #ifdef APP-VUE || H5 || MP-WEIXIN || MP-HARMONY
|
||||||
|
vm.is_show = 'none'
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef APP-VUE || H5 || MP-WEIXIN || MP-HARMONY
|
||||||
|
vm.close()
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
},
|
||||||
|
closeOther(vm) {
|
||||||
|
if (this.openItem && this.openItem !== vm) {
|
||||||
|
// #ifdef APP-VUE || H5 || MP-WEIXIN || MP-HARMONY
|
||||||
|
this.openItem.is_show = 'none'
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef APP-VUE || H5 || MP-WEIXIN || MP-HARMONY
|
||||||
|
this.openItem.close()
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
// 记录上一个打开的 swipe-action-item ,用于 auto-close
|
||||||
|
this.openItem = vm
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
{
|
||||||
|
"id": "uni-swipe-action",
|
||||||
|
"displayName": "uni-swipe-action 滑动操作",
|
||||||
|
"version": "1.3.16",
|
||||||
|
"description": "SwipeAction 滑动操作操作组件",
|
||||||
|
"keywords": [
|
||||||
|
"",
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"滑动删除",
|
||||||
|
"侧滑删除"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "",
|
||||||
|
"uni-app": "^4.27",
|
||||||
|
"uni-app-x": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue",
|
||||||
|
"darkmode": "x",
|
||||||
|
"i18n": "x",
|
||||||
|
"widescreen": "x"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [
|
||||||
|
"uni-scss"
|
||||||
|
],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "x",
|
||||||
|
"aliyun": "x",
|
||||||
|
"alipay": "x"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"uni-app": {
|
||||||
|
"vue": {
|
||||||
|
"vue2": {
|
||||||
|
"extVersion": "1.3.14",
|
||||||
|
"minVersion": ""
|
||||||
|
},
|
||||||
|
"vue3": {
|
||||||
|
"extVersion": "1.3.14",
|
||||||
|
"minVersion": ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"web": {
|
||||||
|
"safari": "-",
|
||||||
|
"chrome": "-"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"vue": "-",
|
||||||
|
"nvue": "-",
|
||||||
|
"android": "-",
|
||||||
|
"ios": "-",
|
||||||
|
"harmony": "-"
|
||||||
|
},
|
||||||
|
"mp": {
|
||||||
|
"weixin": "-",
|
||||||
|
"alipay": "-",
|
||||||
|
"toutiao": "-",
|
||||||
|
"baidu": "-",
|
||||||
|
"kuaishou": "-",
|
||||||
|
"jd": "-",
|
||||||
|
"harmony": "-",
|
||||||
|
"qq": "-",
|
||||||
|
"lark": "-"
|
||||||
|
},
|
||||||
|
"quickapp": {
|
||||||
|
"huawei": "-",
|
||||||
|
"union": "-"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"uni-app-x": {
|
||||||
|
"web": {
|
||||||
|
"safari": "-",
|
||||||
|
"chrome": "-"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"android": "-",
|
||||||
|
"ios": "-",
|
||||||
|
"harmony": "-"
|
||||||
|
},
|
||||||
|
"mp": {
|
||||||
|
"weixin": "-"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
|
||||||
|
|
||||||
|
## SwipeAction 滑动操作
|
||||||
|
> **组件名:uni-swipe-action**
|
||||||
|
> 代码块: `uSwipeAction`、`uSwipeActionItem`
|
||||||
|
|
||||||
|
|
||||||
|
通过滑动触发选项的容器
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swipe-action)
|
||||||
|
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<view class="weightPages data-v-1a50718f"><block wx:if="{{isConnection==0}}"><view class="table data-v-1a50718f">称重中,请将食物放到秤上</view></block><block wx:if="{{isConnection==1}}"><view data-event-opts="{{[['tap',[['openBluetoothAdapter',['$event']]]]]}}" class="table data-v-1a50718f" bindtap="__e">连接失败,点击重新连接</view></block><block wx:if="{{isConnection!=3}}"><view class="image data-v-1a50718f"><image src="../static/cheng.png" class="data-v-1a50718f"></image></view></block><block wx:if="{{isConnection==3}}"><view class="data-v-1a50718f"><view class="weight data-v-1a50718f"><view class="data-v-1a50718f">重量<text class="data-v-1a50718f">{{weight}}</text>{{dw}}</view><view class="data-v-1a50718f">热量<text class="data-v-1a50718f">{{kcal}}</text>千卡</view></view><view class="tips data-v-1a50718f">注:重新称重可更新当前数据</view><block wx:if="{{weightType!=2}}"><view class="groupbtn data-v-1a50718f"><view data-event-opts="{{[['tap',[['handleDetailSub',['$event']]]]]}}" class="btn data-v-1a50718f" bindtap="__e">完成</view><block wx:if="{{!stopblue}}"><view data-event-opts="{{[['tap',[['handleDetailNext',['$event']]]]]}}" class="btn data-v-1a50718f" bindtap="__e">下一位</view></block></view></block><block wx:if="{{weightType==2}}"><view data-event-opts="{{[['tap',[['handlesub',['$event']]]]]}}" class="btn data-v-1a50718f" bindtap="__e">确认添加</view></block></view></block><block wx:if="{{isConnection==1}}"><view class="tips data-v-1a50718f"><uni-icons vue-id="2b524063-1" type="info-filled" color="#dd524d" size="20" class="data-v-1a50718f" bind:__l="__l"></uni-icons>请确定设备是开机状态、手机蓝牙权限已打开!</view></block></view>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
.weightPages.data-v-1a50718f{display:flex;flex-wrap:wrap;flex-direction:column;position:absolute;justify-content:space-around;left:0;right:0;bottom:20px;top:60px;margin-top:20px}.weightPages .weight.data-v-1a50718f{background:#fff;color:#666;font-size:16px;flex-wrap:wrap;text-align:center}.weightPages .weight view.data-v-1a50718f{width:60%;height:50px;display:flex;margin-left:25%;align-items:flex-end;margin-bottom:15px}.weightPages .weight view text.data-v-1a50718f{width:80px;display:inline-block;border-bottom:1px solid #dfdfdf;margin:0 10px;font-size:18px;font-weight:700;color:#f0ae43}.weightPages .tips.data-v-1a50718f{font-size:12px;text-align:center}.weightPages .btn.data-v-1a50718f{color:#fff;width:80%;margin-left:10%}.weightPages .groupbtn .btn.data-v-1a50718f{color:#000!important}.weightPages .table.data-v-1a50718f{width:100%;font-size:16px;font-weight:700;text-align:center;margin:15px 0}.weightPages .image.data-v-1a50718f{width:160px;height:160px;margin:auto}.weightPages .image image.data-v-1a50718f{width:100%;height:100%}.weightPages .tips.data-v-1a50718f{margin-bottom:15px;margin-left:15px;display:flex;color:#999}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<view class="weightPages data-v-134d4a82"><block wx:if="{{isConnection==0}}"><view class="table data-v-134d4a82">称重中,请将食物放到秤上</view></block><block wx:if="{{isConnection==1}}"><view data-event-opts="{{[['tap',[['openBluetoothAdapter',['$event']]]]]}}" class="table data-v-134d4a82" bindtap="__e">连接失败,点击重新连接</view></block><block wx:if="{{isConnection!=3}}"><view class="image data-v-134d4a82"><image src="../static/cheng.png" class="data-v-134d4a82"></image></view></block><block wx:if="{{isConnection==3}}"><view class="data-v-134d4a82"><view class="weight-wrap data-v-134d4a82"><view class="weight data-v-134d4a82"><text class="val data-v-134d4a82">{{weight==''?'--':weight}}</text><text class="unit data-v-134d4a82">{{$root.m0}}</text></view><view class="kcal data-v-134d4a82"><text class="val data-v-134d4a82">{{kcal==''?0:kcal}}</text><text class="unit data-v-134d4a82">千卡</text></view></view><view class="tips data-v-134d4a82">注:重新称重可更新当前数据</view><block wx:if="{{weightType!=2}}"><view class="groupbtn data-v-134d4a82"><view data-event-opts="{{[['tap',[['handleDetailSub',['$event']]]]]}}" class="btn data-v-134d4a82" bindtap="__e">完成</view><block wx:if="{{!stopblue}}"><view data-event-opts="{{[['tap',[['handleDetailNext',['$event']]]]]}}" class="btn data-v-134d4a82" bindtap="__e">下一位</view></block></view></block><block wx:if="{{weightType==2}}"><view data-event-opts="{{[['tap',[['handlesub',['$event']]]]]}}" class="btn data-v-134d4a82" bindtap="__e">确认添加</view></block></view></block><block wx:if="{{isConnection==1}}"><view class="tips data-v-134d4a82"><uni-icons vue-id="cef7e708-1" type="info-filled" color="#dd524d" size="20" class="data-v-134d4a82" bind:__l="__l"></uni-icons>请确定设备是开机状态、手机蓝牙权限已打开!</view></block></view>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
.weightPages.data-v-134d4a82{display:flex;flex-wrap:wrap;flex-direction:column;position:relative;justify-content:space-around}.weightPages .weight-wrap.data-v-134d4a82{display:flex;flex-direction:column;align-items:center;background:#fff;color:#666;font-size:16px;flex-wrap:wrap;text-align:center}.weightPages .weight-wrap .weight.data-v-134d4a82, .weightPages .weight-wrap .kcal.data-v-134d4a82{display:flex;justify-content:center;align-items:center;width:70%;padding:40rpx 0;border-radius:20rpx;background-color:#f8f8f8}.weightPages .weight-wrap .weight.data-v-134d4a82{margin-bottom:30rpx}.weightPages .weight-wrap .weight .val.data-v-134d4a82{font-size:40rpx;color:#f0ae43;margin:0!important}.weightPages .weight-wrap .weight .unit.data-v-134d4a82{padding:10rpx;margin-left:30rpx;font-size:28rpx;color:#fff;border-radius:8rpx;background-color:#f0ae43}.weightPages .weight-wrap .kcal.data-v-134d4a82{font-size:32rpx}.weightPages .weight-wrap .kcal .val.data-v-134d4a82{font-size:40rpx;color:#f0ae43;margin:0!important}.weightPages .weight-wrap .kcal .unit.data-v-134d4a82{margin-left:20rpx}.weightPages .tips.data-v-134d4a82{font-size:12px;text-align:center}.weightPages .btn.data-v-134d4a82{color:#fff;width:80%;margin-left:10%}.weightPages .groupbtn .btn.data-v-134d4a82{color:#000!important}.weightPages .table.data-v-134d4a82{width:100%;font-size:16px;font-weight:700;text-align:center;margin:15px 0}.weightPages .image.data-v-134d4a82{width:160px;height:160px;margin:auto}.weightPages .image image.data-v-134d4a82{width:100%;height:100%}.weightPages .tips.data-v-134d4a82{margin-top:40rpx;margin-left:15px;display:flex;color:#999}
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<view class="weightPages data-v-6a7c2eb2"><block wx:if="{{isConnection==0}}"><view class="table data-v-6a7c2eb2">称重中,请将食物放到秤上</view></block><block wx:if="{{isConnection==1}}"><view data-event-opts="{{[['tap',[['openBluetoothAdapter',['$event']]]]]}}" class="table data-v-6a7c2eb2" bindtap="__e">连接失败,点击重新连接</view></block><block wx:if="{{isConnection!=3}}"><view class="image data-v-6a7c2eb2"><image src="../static/cheng.png" class="data-v-6a7c2eb2"></image></view></block><block wx:if="{{isConnection==3}}"><view class="data-v-6a7c2eb2"><view class="weight data-v-6a7c2eb2"><view class="data-v-6a7c2eb2">重量<text class="data-v-6a7c2eb2">{{weight}}</text>{{dw}}</view><view class="data-v-6a7c2eb2">热量<text class="data-v-6a7c2eb2">{{kcal}}</text>千卡</view></view><view class="tips data-v-6a7c2eb2">注:重新称重可更新当前数据</view><block wx:if="{{weightType!=2}}"><view class="groupbtn data-v-6a7c2eb2"><view data-event-opts="{{[['tap',[['handleDetailSub',['$event']]]]]}}" class="btn data-v-6a7c2eb2" bindtap="__e">完成</view><block wx:if="{{!stopblue}}"><view data-event-opts="{{[['tap',[['handleDetailNext',['$event']]]]]}}" class="btn data-v-6a7c2eb2" bindtap="__e">下一位</view></block></view></block><block wx:if="{{weightType==2}}"><view data-event-opts="{{[['tap',[['handlesub',['$event']]]]]}}" class="btn data-v-6a7c2eb2" bindtap="__e">确认添加</view></block></view></block><block wx:if="{{isConnection==1}}"><view class="tips data-v-6a7c2eb2"><uni-icons vue-id="cec76cbc-1" type="info-filled" color="#dd524d" size="20" class="data-v-6a7c2eb2" bind:__l="__l"></uni-icons>请确定设备是开机状态、手机蓝牙权限已打开!</view></block></view>
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
.weightPages.data-v-6a7c2eb2{display:flex;flex-wrap:wrap;flex-direction:column;position:absolute;justify-content:space-around;left:0;right:0;bottom:20px;top:60px;margin-top:20px}.weightPages .weight.data-v-6a7c2eb2{background:#fff;color:#666;font-size:16px;flex-wrap:wrap;text-align:center}.weightPages .weight view.data-v-6a7c2eb2{width:60%;height:50px;display:flex;margin-left:25%;align-items:flex-end;margin-bottom:15px}.weightPages .weight view text.data-v-6a7c2eb2{width:80px;display:inline-block;border-bottom:1px solid #dfdfdf;margin:0 10px;font-size:18px;font-weight:700;color:#f0ae43}.weightPages .tips.data-v-6a7c2eb2{font-size:12px;text-align:center}.weightPages .btn.data-v-6a7c2eb2{color:#fff;width:80%;margin-left:10%}.weightPages .groupbtn .btn.data-v-6a7c2eb2{color:#000!important}.weightPages .table.data-v-6a7c2eb2{width:100%;font-size:16px;font-weight:700;text-align:center;margin:15px 0}.weightPages .image.data-v-6a7c2eb2{width:160px;height:160px;margin:auto}.weightPages .image image.data-v-6a7c2eb2{width:100%;height:100%}.weightPages .tips.data-v-6a7c2eb2{margin-bottom:15px;margin-left:15px;display:flex;color:#999}
|
|
||||||
|
|
@ -2,9 +2,11 @@
|
||||||
"navigationBarTitleText": "食材库",
|
"navigationBarTitleText": "食材库",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
|
"uni-drawer": "/uni_modules/uni-drawer/components/uni-drawer/uni-drawer",
|
||||||
"uni-icons": "/uni_modules/uni-icons/components/uni-icons/uni-icons",
|
"uni-icons": "/uni_modules/uni-icons/components/uni-icons/uni-icons",
|
||||||
"search": "/components/search",
|
"search": "/components/search",
|
||||||
"blue-tooth": "/components/bluetooth_new",
|
"blue-tooth": "/components/bluetooth_food",
|
||||||
"food-item": "/components/food_item"
|
"food-item": "/components/food_item",
|
||||||
|
"qiun-data-charts": "/uni_modules/qiun-data-charts/components/qiun-data-charts"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2,6 +2,6 @@
|
||||||
"navigationBarTitleText": "详情",
|
"navigationBarTitleText": "详情",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"blue-tooth": "/components/bluetooth_new"
|
"blue-tooth": "/components/bluetooth"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2,6 +2,8 @@
|
||||||
"navigationBarTitleText": "计食器",
|
"navigationBarTitleText": "计食器",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
|
"uni-swipe-action": "/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action",
|
||||||
|
"uni-swipe-action-item": "/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item",
|
||||||
"ren-calendar": "/uni_modules/ren-calendar/ren-calendar",
|
"ren-calendar": "/uni_modules/ren-calendar/ren-calendar",
|
||||||
"qiun-data-charts": "/uni_modules/qiun-data-charts/components/qiun-data-charts"
|
"qiun-data-charts": "/uni_modules/qiun-data-charts/components/qiun-data-charts"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
.content.data-v-5c1c5ec1{padding:0 15px}.content_box.data-v-5c1c5ec1{width:100%}.box.data-v-5c1c5ec1{width:100%}.calendar.data-v-5c1c5ec1{text-align:center;background:#fff;position:fixed;top:0;left:0;right:0;z-index:20;height:40px;line-height:40px;box-shadow:0 1px 5px 2px rgba(223,226,225,.9882352941176471)}.kcal.data-v-5c1c5ec1{width:calc(100% - 20px);margin-bottom:15px;background:#fff;border-radius:5px;padding:10px;position:relative;margin-top:60px}.kcal .set.data-v-5c1c5ec1{position:absolute;right:15px;width:50px;height:50px;display:flex;align-items:flex-start;justify-content:flex-end;font-weight:700;z-index:18}.kcal .set icon.data-v-5c1c5ec1{font-size:22px}.kcal .top.data-v-5c1c5ec1{margin-left:5px;position:relative}.kcal .top .left.data-v-5c1c5ec1{width:300rpx;height:300rpx;position:relative}.kcal .top .left .center.data-v-5c1c5ec1{position:absolute;top:0;text-align:center;width:300rpx;height:300rpx;display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center}.kcal .top .left .center text.data-v-5c1c5ec1{display:inline-block;font-size:22px;font-weight:700}.kcal .top .left .center .unit.data-v-5c1c5ec1{position:absolute;font-size:22px;font-weight:700;bottom:20rpx;text-align:center}.kcal .top .right.data-v-5c1c5ec1{position:absolute;left:65%;height:300rpx;top:0;display:flex;flex-wrap:wrap;justify-content:center;flex-direction:column}.kcal .top .right .num.data-v-5c1c5ec1{font-size:24px;font-weight:700;width:100%;display:inline-block;margin-top:5px}.kcal .top .right .unit.data-v-5c1c5ec1{position:absolute;font-size:22px;font-weight:700;bottom:20rpx;text-align:center}.kcal .weight.data-v-5c1c5ec1{width:100%;display:flex;margin-top:25px;margin-bottom:5px;justify-content:space-between}.kcal .weight .item.data-v-5c1c5ec1{width:30%}.kcal .weight .item .bold.data-v-5c1c5ec1{width:100%;background:#eaeaea;border-radius:6px;margin-top:5px;text-align:right;font-weight:500;font-size:12px;height:15px;line-height:15px;position:relative}.kcal .weight .item .bold text.data-v-5c1c5ec1{position:absolute;z-index:6;right:8px}.kcal .weight .item .val.data-v-5c1c5ec1{position:absolute;left:0;background:#f9ce27;height:15px;border-radius:10px;z-index:2}.tabbar.data-v-5c1c5ec1{width:100%;background:#fff;border-radius:10px;padding:10px 0;display:flex;margin-bottom:15px;justify-content:space-between}.tabbar .type.data-v-5c1c5ec1{width:20%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.tabbar .type .t-icon.data-v-5c1c5ec1{width:35px;height:35px;font-size:28px}.tabbar .type .text.data-v-5c1c5ec1{width:100%;text-align:center;margin-top:5px;display:flex;justify-content:center}.tabbar .type .text icon.data-v-5c1c5ec1{font-size:14px}.list.data-v-5c1c5ec1{width:100%;padding-bottom:50px}.list .listbox.data-v-5c1c5ec1{width:calc(100% - 20px);padding:10px;border-radius:10px;background-color:#fff;margin-top:15px}.list .left.data-v-5c1c5ec1{width:100%;margin-bottom:10px;display:flex;align-items:center}.list .left .title.data-v-5c1c5ec1{font-size:16px;font-weight:700}.list .left text.data-v-5c1c5ec1{font-weight:700;margin-right:5px;margin-left:15px}.list .right.data-v-5c1c5ec1{width:100%}.list .right .item.data-v-5c1c5ec1{height:35px;line-height:35px;border-bottom:1px solid #f7f7f7;display:flex;justify-content:space-between}.list .right .item.data-v-5c1c5ec1 :nth-child(1){width:45%}.list .right .item.data-v-5c1c5ec1 :nth-child(2){width:25%;text-align:left}.list .right .item.data-v-5c1c5ec1 :nth-child(3){width:30%;text-align:right}.nolist.data-v-5c1c5ec1{font-size:12px;color:#999;padding:30px 10px;text-align:center;width:auto}.nolist icon.data-v-5c1c5ec1{font-size:50px;color:#999;display:flex;justify-content:center;margin-bottom:10px}.list2.data-v-5c1c5ec1{margin-top:45%}.list2 .btn.data-v-5c1c5ec1{color:#fff;height:32px;line-height:32px}.addfood.data-v-5c1c5ec1{background-color:#fff;position:absolute;left:0;right:0;bottom:0;padding:10px 10px 0 10px;border-radius:10px 10px 0 0}.addfood .iconfont.data-v-5c1c5ec1{position:absolute;right:7px;top:-10px;background:#f7f7f7;border-radius:50%;font-size:30px}.addfood .list.data-v-5c1c5ec1{padding-bottom:0}.addfood .list .item.data-v-5c1c5ec1{height:40px;line-height:40px;border-bottom:none}.addfood .list .name.data-v-5c1c5ec1{width:100%;text-align:center}.addfood .list :nth-child(2).item.data-v-5c1c5ec1{border-bottom:1px solid #dfdfdf;border-top:1px solid #dfdfdf}
|
.content.data-v-6328fe7b{padding:0 15px}.content_box.data-v-6328fe7b{width:100%}.box.data-v-6328fe7b{width:100%}.calendar.data-v-6328fe7b{text-align:center;background:#fff;position:fixed;top:0;left:0;right:0;z-index:20;height:40px;line-height:40px;box-shadow:0 1px 5px 2px rgba(223,226,225,.9882352941176471)}.kcal.data-v-6328fe7b{width:calc(100% - 20px);margin-bottom:15px;background:#fff;border-radius:5px;padding:10px;position:relative;margin-top:60px}.kcal .set.data-v-6328fe7b{position:absolute;right:15px;width:50px;height:50px;display:flex;align-items:flex-start;justify-content:flex-end;font-weight:700;z-index:18}.kcal .set icon.data-v-6328fe7b{font-size:22px}.kcal .top.data-v-6328fe7b{margin-left:5px;position:relative}.kcal .top .left.data-v-6328fe7b{width:300rpx;height:300rpx;position:relative}.kcal .top .left .center.data-v-6328fe7b{position:absolute;top:0;text-align:center;width:300rpx;height:300rpx;display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center}.kcal .top .left .center text.data-v-6328fe7b{display:inline-block;font-size:22px;font-weight:700}.kcal .top .left .center .unit.data-v-6328fe7b{position:absolute;font-size:22px;font-weight:700;bottom:20rpx;text-align:center}.kcal .top .right.data-v-6328fe7b{position:absolute;left:65%;height:300rpx;top:0;display:flex;flex-wrap:wrap;justify-content:center;flex-direction:column}.kcal .top .right .num.data-v-6328fe7b{font-size:24px;font-weight:700;width:100%;display:inline-block;margin-top:5px}.kcal .top .right .unit.data-v-6328fe7b{position:absolute;font-size:22px;font-weight:700;bottom:20rpx;text-align:center}.kcal .weight.data-v-6328fe7b{width:100%;display:flex;margin-top:25px;margin-bottom:5px;justify-content:space-between}.kcal .weight .item.data-v-6328fe7b{display:flex;flex-direction:column;align-items:center;width:30%}.kcal .weight .item .name.data-v-6328fe7b{white-space:nowrap}.kcal .weight .item .bold.data-v-6328fe7b{width:100%;background:#eaeaea;border-radius:6px;margin-top:5px;text-align:right;font-weight:500;font-size:12px;height:15px;line-height:15px;position:relative}.kcal .weight .item .bold text.data-v-6328fe7b{position:absolute;z-index:6;right:8px}.kcal .weight .item .val.data-v-6328fe7b{position:absolute;left:0;background:#f9ce27;height:15px;border-radius:10px;z-index:2}.tabbar.data-v-6328fe7b{width:100%;background:#fff;border-radius:10px;padding:10px 0;display:flex;margin-bottom:15px;justify-content:space-between}.tabbar .type.data-v-6328fe7b{width:20%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.tabbar .type .t-icon.data-v-6328fe7b{width:35px;height:35px;font-size:28px}.tabbar .type .text.data-v-6328fe7b{width:100%;text-align:center;margin-top:5px;display:flex;justify-content:center}.tabbar .type .text icon.data-v-6328fe7b{font-size:14px}.list.data-v-6328fe7b{width:100%;padding-bottom:50px}.list .listbox.data-v-6328fe7b{width:calc(100% - 20px);padding:10px;border-radius:10px;background-color:#fff;margin-top:15px}.list .left.data-v-6328fe7b{width:100%;margin-bottom:10px;display:flex;align-items:center}.list .left .title.data-v-6328fe7b{font-size:16px;font-weight:700}.list .left text.data-v-6328fe7b{font-weight:700;margin-right:5px;margin-left:15px}.list .right.data-v-6328fe7b{width:100%}.list .right .item.data-v-6328fe7b{height:40px;line-height:40px;border-bottom:1px solid #f7f7f7;display:flex;justify-content:space-between;align-items:center}.list .right .item image.data-v-6328fe7b{width:60rpx;height:60rpx;border-radius:12rpx;margin-right:10rpx}.list .right .item.data-v-6328fe7b :nth-child(2){width:40%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list .right .item.data-v-6328fe7b :nth-child(3){width:20%;text-align:right}.list .right .item.data-v-6328fe7b :nth-child(4){width:26%;margin-right:6rpx;text-align:right}.nolist.data-v-6328fe7b{font-size:12px;color:#999;padding:30px 10px;text-align:center;width:auto}.nolist icon.data-v-6328fe7b{font-size:50px;color:#999;display:flex;justify-content:center;margin-bottom:10px}.list2.data-v-6328fe7b{margin-top:45%}.list2 .btn.data-v-6328fe7b{color:#fff;height:32px;line-height:32px}.addfood.data-v-6328fe7b{background-color:#fff;position:absolute;left:0;right:0;bottom:0;padding:10px 10px 0 10px;border-radius:10px 10px 0 0}.addfood .iconfont.data-v-6328fe7b{position:absolute;right:7px;top:-10px;background:#f7f7f7;border-radius:50%;font-size:30px}.addfood .list.data-v-6328fe7b{padding-bottom:0}.addfood .list .item.data-v-6328fe7b{height:40px;line-height:40px;border-bottom:none}.addfood .list .name.data-v-6328fe7b{width:100%;text-align:center}.addfood .list :nth-child(2).item.data-v-6328fe7b{border-bottom:1px solid #dfdfdf;border-top:1px solid #dfdfdf}
|
||||||
|
|
@ -1 +1 @@
|
||||||
(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["pages/index/index"],{2320:function(e,t,n){"use strict";var o=n("991c"),i=n.n(o);i.a},"51fc":function(e,t,n){"use strict";(function(e){var o=n("47a9");Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=o(n("7ca3")),a=n("8f59");function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}var r={data:function(){return{index:0,fimages:[],list:[],tools:[],menu:[],footlist:[]}},components:{search:function(){n.e("components/search2").then(function(){return resolve(n("4d80"))}.bind(null,n)).catch(n.oe)},foodList:function(){n.e("components/list").then(function(){return resolve(n("cebd"))}.bind(null,n)).catch(n.oe)}},computed:function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){(0,i.default)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},(0,a.mapState)(["menuList"])),onLoad:function(){this.handleHomeConfig()},onPullDownRefresh:function(){this.menu=[],this.index=0,this.fimages=[],this.list=[],this.tools=[],this.footlist=[],this.handleHomeConfig(),setTimeout((function(){e.stopPullDownRefresh()}),500)},methods:{handleHomeConfig:function(){var e=this;e.$model.getHomeConfig({}).then((function(t){0==t.code&&(e.menu=t.data.cook_label,e.fimages=t.data.banner,e.tools=t.data.jingang_region,e.$store.commit("changeMenuList",t.data.cook_label),e.$store.commit("changeFoodList",t.data.food_list),e.handleCookListLabel(),e.handleHomeUserInfo())}))},handleHomeUserInfo:function(){var e=this;e.$model.getHomeUserInfo({}).then((function(t){0==t.code&&e.$store.commit("changeUserInfo",t.data)}))},handleCookListLabel:function(){var e=this;e.$model.getCookListLabel({cook_label:e.menu.length?e.menu[e.index].id:0,page:1}).then((function(t){0==t.code&&(e.footlist=t.data.content_list)}))},handleToggle:function(e){this.index=e,this.footlist=[],this.handleCookListLabel()},handleDetail:function(t){e.getStorageSync("token")?e.navigateTo({url:"/pageTwo/me/menudetail?id="+t}):this.$tools.msg("登录后查看等多!")},handleSearch:function(t){e.navigateTo({url:"/pages/search/search"})},navTo:function(t){e.navigateTo({url:t}),e.switchTab({url:t})}}};t.default=r}).call(this,n("df3c")["default"])},"69fe":function(e,t,n){"use strict";n.d(t,"b",(function(){return o})),n.d(t,"c",(function(){return i})),n.d(t,"a",(function(){}));var o=function(){var e=this.$createElement,t=(this._self._c,this.fimages.length);this.$mp.data=Object.assign({},{$root:{g0:t}})},i=[]},8404:function(e,t,n){"use strict";n.r(t);var o=n("69fe"),i=n("ca7c");for(var a in i)["default"].indexOf(a)<0&&function(e){n.d(t,e,(function(){return i[e]}))}(a);n("2320");var c=n("828b"),r=Object(c["a"])(i["default"],o["b"],o["c"],!1,null,"205d0d94",null,!1,o["a"],void 0);t["default"]=r.exports},"991c":function(e,t,n){},ca7c:function(e,t,n){"use strict";n.r(t);var o=n("51fc"),i=n.n(o);for(var a in o)["default"].indexOf(a)<0&&function(e){n.d(t,e,(function(){return o[e]}))}(a);t["default"]=i.a},d367:function(e,t,n){"use strict";(function(e,t){var o=n("47a9");n("6caf");o(n("3240"));var i=o(n("8404"));e.__webpack_require_UNI_MP_PLUGIN__=n,t(i.default)}).call(this,n("3223")["default"],n("df3c")["createPage"])}},[["d367","common/runtime","common/vendor"]]]);
|
(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["pages/index/index"],{"51fc":function(t,e,n){"use strict";(function(t){var o=n("47a9");Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var i=o(n("7ca3")),a=n("8f59");function c(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}var r={data:function(){return{index:0,fimages:[],list:[],tools:[],menu:[],footlist:[]}},components:{search:function(){n.e("components/search2").then(function(){return resolve(n("4d80"))}.bind(null,n)).catch(n.oe)},foodList:function(){n.e("components/list").then(function(){return resolve(n("cebd"))}.bind(null,n)).catch(n.oe)}},computed:function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?c(Object(n),!0).forEach((function(e){(0,i.default)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({},(0,a.mapState)(["menuList"])),onLoad:function(){this.handleHomeConfig()},onPullDownRefresh:function(){this.menu=[],this.index=0,this.fimages=[],this.list=[],this.tools=[],this.footlist=[],this.handleHomeConfig(),setTimeout((function(){t.stopPullDownRefresh()}),500)},methods:{handleHomeConfig:function(){var t=this;t.$model.getHomeConfig({}).then((function(e){0==e.code&&(t.menu=e.data.cook_label,t.fimages=e.data.banner,t.tools=e.data.jingang_region,t.$store.commit("changeMenuList",e.data.cook_label),t.$store.commit("changeFoodList",e.data.food_list),t.handleCookListLabel(),t.handleHomeUserInfo())}))},handleHomeUserInfo:function(){var t=this;t.$model.getHomeUserInfo({}).then((function(e){0==e.code&&t.$store.commit("changeUserInfo",e.data)}))},handleCookListLabel:function(){var t=this;t.$model.getCookListLabel({cook_label:t.menu.length?t.menu[t.index].id:0,page:1}).then((function(e){0==e.code&&(t.footlist=e.data.content_list)}))},handleToggle:function(t){this.index=t,this.footlist=[],this.handleCookListLabel()},handleDetail:function(e){t.navigateTo({url:"/pages/test/test?id="+e})},handleSearch:function(e){t.navigateTo({url:"/pages/search/search"})},navTo:function(e){t.navigateTo({url:e}),t.switchTab({url:e})}}};e.default=r}).call(this,n("df3c")["default"])},"5f07":function(t,e,n){"use strict";var o=n("d048"),i=n.n(o);i.a},8404:function(t,e,n){"use strict";n.r(e);var o=n("faa7"),i=n("ca7c");for(var a in i)["default"].indexOf(a)<0&&function(t){n.d(e,t,(function(){return i[t]}))}(a);n("5f07");var c=n("828b"),r=Object(c["a"])(i["default"],o["b"],o["c"],!1,null,"0ff00bb4",null,!1,o["a"],void 0);e["default"]=r.exports},ca7c:function(t,e,n){"use strict";n.r(e);var o=n("51fc"),i=n.n(o);for(var a in o)["default"].indexOf(a)<0&&function(t){n.d(e,t,(function(){return o[t]}))}(a);e["default"]=i.a},d048:function(t,e,n){},d367:function(t,e,n){"use strict";(function(t,e){var o=n("47a9");n("6caf");o(n("3240"));var i=o(n("8404"));t.__webpack_require_UNI_MP_PLUGIN__=n,e(i.default)}).call(this,n("3223")["default"],n("df3c")["createPage"])},faa7:function(t,e,n){"use strict";n.d(e,"b",(function(){return o})),n.d(e,"c",(function(){return i})),n.d(e,"a",(function(){}));var o=function(){var t=this.$createElement,e=(this._self._c,this.fimages.length);this.$mp.data=Object.assign({},{$root:{g0:e}})},i=[]}},[["d367","common/runtime","common/vendor"]]]);
|
||||||
|
|
@ -1 +1 @@
|
||||||
<view class="content data-v-205d0d94"><search vue-id="8dd740cc-1" class="data-v-205d0d94" bind:__l="__l"></search><block wx:if="{{$root.g0}}"><view class="f_banner footbox data-v-205d0d94"><swiper class="swiper data-v-205d0d94" circular="true" previous-margin="15px" next-margin="15px"><block wx:for="{{fimages}}" wx:for-item="ite" wx:for-index="ind" wx:key="ind"><swiper-item data-event-opts="{{[['tap',[['handleDetail',['$0'],[[['fimages','',ind,'id']]]]]]]}}" bindtap="__e" class="data-v-205d0d94"><image src="{{ite.pic_url}}" mode="aspectFill" class="data-v-205d0d94"></image><view class="item data-v-205d0d94"><view class="title data-v-205d0d94">{{ite.title}}</view><view class="name data-v-205d0d94"><image src="{{ite.create_user_head_pic}}" class="data-v-205d0d94"></image><text class="data-v-205d0d94">{{ite.create_user_nickname}}</text></view><view data-event-opts="{{[['tap',[['handleZan',['$0'],[[['fimages','',ind]]]]]]]}}" class="zan data-v-205d0d94" bindtap="__e"><icon class="{{['iconfont','data-v-205d0d94',ite.is_me_like_it=='yes'?'icon-icon3':'icon-icon_collect']}}"></icon></view></view></swiper-item></block></swiper></view></block><view class="tools footbox data-v-205d0d94"><block wx:for="{{tools}}" wx:for-item="ite" wx:for-index="ind" wx:key="ind"><view data-event-opts="{{[['tap',[['navTo',['$0'],[[['tools','',ind,'jump_url']]]]]]]}}" class="list data-v-205d0d94" bindtap="__e"><view class="data-v-205d0d94"><image src="{{ite.icon}}" class="data-v-205d0d94"></image></view><text class="data-v-205d0d94">{{ite.name}}</text></view></block></view><view class="itemTag footbox data-v-205d0d94"><view class="tab_list data-v-205d0d94"><scroll-view class="scroll-menu data-v-205d0d94" style="white-space:nowrap;" scroll-x="true"><block wx:for="{{menu}}" wx:for-item="ite" wx:for-index="ind" wx:key="ind"><view data-event-opts="{{[['tap',[['handleToggle',[ind]]]]]}}" class="tabbar data-v-205d0d94" bindtap="__e"><view class="{{['data-v-205d0d94',index==ind?'active':'']}}">{{ite.name}}</view></view></block></scroll-view></view><food-list vue-id="8dd740cc-2" list="{{footlist}}" class="data-v-205d0d94" bind:__l="__l"></food-list></view></view>
|
<view class="content data-v-0ff00bb4"><search vue-id="8dd740cc-1" class="data-v-0ff00bb4" bind:__l="__l"></search><block wx:if="{{$root.g0}}"><view class="f_banner footbox data-v-0ff00bb4"><swiper class="swiper data-v-0ff00bb4" circular="true" previous-margin="15px" next-margin="15px"><block wx:for="{{fimages}}" wx:for-item="ite" wx:for-index="ind" wx:key="ind"><swiper-item data-event-opts="{{[['tap',[['handleDetail',['$0'],[[['fimages','',ind,'id']]]]]]]}}" bindtap="__e" class="data-v-0ff00bb4"><image src="{{ite.pic_url}}" mode="aspectFill" class="data-v-0ff00bb4"></image><view class="item data-v-0ff00bb4"><view class="title data-v-0ff00bb4">{{ite.title}}</view><view class="name data-v-0ff00bb4"><image src="{{ite.create_user_head_pic}}" class="data-v-0ff00bb4"></image><text class="data-v-0ff00bb4">{{ite.create_user_nickname}}</text></view><view data-event-opts="{{[['tap',[['handleZan',['$0'],[[['fimages','',ind]]]]]]]}}" class="zan data-v-0ff00bb4" bindtap="__e"><icon class="{{['iconfont','data-v-0ff00bb4',ite.is_me_like_it=='yes'?'icon-icon3':'icon-icon_collect']}}"></icon></view></view></swiper-item></block></swiper></view></block><view class="tools footbox data-v-0ff00bb4"><block wx:for="{{tools}}" wx:for-item="ite" wx:for-index="ind" wx:key="ind"><view data-event-opts="{{[['tap',[['navTo',['$0'],[[['tools','',ind,'jump_url']]]]]]]}}" class="list data-v-0ff00bb4" bindtap="__e"><view class="data-v-0ff00bb4"><image src="{{ite.icon}}" class="data-v-0ff00bb4"></image></view><text class="data-v-0ff00bb4">{{ite.name}}</text></view></block></view><view class="itemTag footbox data-v-0ff00bb4"><view class="tab_list data-v-0ff00bb4"><scroll-view class="scroll-menu data-v-0ff00bb4" style="white-space:nowrap;" scroll-x="true"><block wx:for="{{menu}}" wx:for-item="ite" wx:for-index="ind" wx:key="ind"><view data-event-opts="{{[['tap',[['handleToggle',[ind]]]]]}}" class="tabbar data-v-0ff00bb4" bindtap="__e"><view class="{{['data-v-0ff00bb4',index==ind?'active':'']}}">{{ite.name}}</view></view></block></scroll-view></view><food-list vue-id="8dd740cc-2" list="{{footlist}}" class="data-v-0ff00bb4" bind:__l="__l"></food-list></view></view>
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
.f_banner.data-v-205d0d94{width:100%!important;height:450rpx;margin-top:50px}.f_banner.data-v-205d0d94 swiper{height:450rpx}.f_banner image.data-v-205d0d94{width:calc(100% - 10px);height:100%;background-size:100%;margin:0 5px;border-radius:10px}.tools.data-v-205d0d94{width:calc(100% - 30px);background:#fff;display:flex;border-radius:5px;margin-top:40px!important;justify-content:space-between}.tools .list.data-v-205d0d94{display:flex;flex-wrap:wrap;padding-bottom:10px;justify-content:center}.tools .list image.data-v-205d0d94,
|
.f_banner.data-v-0ff00bb4{width:100%!important;height:450rpx;margin-top:50px}.f_banner.data-v-0ff00bb4 swiper{height:450rpx}.f_banner image.data-v-0ff00bb4{width:calc(100% - 10px);height:100%;background-size:100%;margin:0 5px;border-radius:10px}.tools.data-v-0ff00bb4{width:calc(100% - 30px);background:#fff;display:flex;border-radius:5px;margin-top:40px!important;justify-content:space-between}.tools .list.data-v-0ff00bb4{display:flex;flex-wrap:wrap;padding-bottom:10px;justify-content:center}.tools .list image.data-v-0ff00bb4,
|
||||||
.tools .list icon.data-v-205d0d94{width:35px;height:35px;margin-top:10px}.tools .list view.data-v-205d0d94{width:55px;height:55px;background-color:#fff;margin-top:-20px;border-radius:50%;text-align:center;margin-bottom:5px}.tools .list text.data-v-205d0d94{display:block;width:100%;text-align:center}.tab_list.data-v-205d0d94{display:flex;justify-content:space-between}.tab_list .scroll-menu.data-v-205d0d94{width:100%;white-space:nowrap}.tab_list .scroll-menu view.data-v-205d0d94{display:inline-block;padding:10px}.tab_list .scroll-menu view text.data-v-205d0d94{display:block;width:100%;text-align:center;margin-top:10px}.tab_list .tabbar.data-v-205d0d94{padding:0 10px;font-size:16px;font-weight:700}.tab_list .active.data-v-205d0d94{color:#ff4c4f;border-bottom:2px solid #ff4c4f}.itemTag.data-v-205d0d94{margin-top:0!important}.t-icon-shipinyinliao2-chengzi.data-v-205d0d94{width:40px!important;height:33px!important}
|
.tools .list icon.data-v-0ff00bb4{width:35px;height:35px;margin-top:10px}.tools .list view.data-v-0ff00bb4{width:55px;height:55px;background-color:#fff;margin-top:-20px;border-radius:50%;text-align:center;margin-bottom:5px}.tools .list text.data-v-0ff00bb4{display:block;width:100%;text-align:center}.tab_list.data-v-0ff00bb4{display:flex;justify-content:space-between}.tab_list .scroll-menu.data-v-0ff00bb4{width:100%;white-space:nowrap}.tab_list .scroll-menu view.data-v-0ff00bb4{display:inline-block;padding:10px}.tab_list .scroll-menu view text.data-v-0ff00bb4{display:block;width:100%;text-align:center;margin-top:10px}.tab_list .tabbar.data-v-0ff00bb4{padding:0 10px;font-size:16px;font-weight:700}.tab_list .active.data-v-0ff00bb4{color:#ff4c4f;border-bottom:2px solid #ff4c4f}.itemTag.data-v-0ff00bb4{margin-top:0!important}.t-icon-shipinyinliao2-chengzi.data-v-0ff00bb4{width:40px!important;height:33px!important}
|
||||||
|
After Width: | Height: | Size: 817 B |
|
After Width: | Height: | Size: 648 B |
|
After Width: | Height: | Size: 758 B |
|
After Width: | Height: | Size: 258 B |
10
unpackage/dist/build/mp-weixin/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.js
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["uni_modules/uni-drawer/components/uni-drawer/uni-drawer"],{1367:function(t,e,n){"use strict";n.d(e,"b",(function(){return i})),n.d(e,"c",(function(){return r})),n.d(e,"a",(function(){}));var i=function(){var t=this.$createElement;this._self._c},r=[]},"589c":function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var i={name:"UniDrawer",components:{},emits:["change"],props:{mode:{type:String,default:""},mask:{type:Boolean,default:!0},maskClick:{type:Boolean,default:!0},width:{type:Number,default:220}},data:function(){return{visibleSync:!1,showDrawer:!1,rightMode:!1,watchTimer:null,drawerWidth:220}},created:function(){this.drawerWidth=this.width,this.rightMode="right"===this.mode},methods:{clear:function(){},close:function(t){("mask"!==t||this.maskClick)&&this.visibleSync&&this._change("showDrawer","visibleSync",!1)},open:function(){this.visibleSync||this._change("visibleSync","showDrawer",!0)},_change:function(t,e,n){var i=this;this[t]=n,this.watchTimer&&clearTimeout(this.watchTimer),this.watchTimer=setTimeout((function(){i[e]=n,i.$emit("change",n)}),n?50:300)}}};e.default=i},a55e:function(t,e,n){"use strict";n.r(e);var i=n("1367"),r=n("c271");for(var a in r)["default"].indexOf(a)<0&&function(t){n.d(e,t,(function(){return r[t]}))}(a);n("b2d3");var c=n("828b"),u=Object(c["a"])(r["default"],i["b"],i["c"],!1,null,"266b79e5",null,!1,i["a"],void 0);e["default"]=u.exports},b2d3:function(t,e,n){"use strict";var i=n("f2e5"),r=n.n(i);r.a},c271:function(t,e,n){"use strict";n.r(e);var i=n("589c"),r=n.n(i);for(var a in i)["default"].indexOf(a)<0&&function(t){n.d(e,t,(function(){return i[t]}))}(a);e["default"]=r.a},f2e5:function(t,e,n){}}]);
|
||||||
|
;(global["webpackJsonp"] = global["webpackJsonp"] || []).push([
|
||||||
|
'uni_modules/uni-drawer/components/uni-drawer/uni-drawer-create-component',
|
||||||
|
{
|
||||||
|
'uni_modules/uni-drawer/components/uni-drawer/uni-drawer-create-component':(function(module, exports, __webpack_require__){
|
||||||
|
__webpack_require__('df3c')['createComponent'](__webpack_require__("a55e"))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
[['uni_modules/uni-drawer/components/uni-drawer/uni-drawer-create-component']]
|
||||||
|
]);
|
||||||
4
unpackage/dist/build/mp-weixin/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.json
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"usingComponents": {},
|
||||||
|
"component": true
|
||||||
|
}
|
||||||
1
unpackage/dist/build/mp-weixin/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.wxml
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<view data-event-opts="{{[['touchmove',[['clear',['$event']]]]]}}" class="{{['uni-drawer','data-v-266b79e5',(showDrawer)?'uni-drawer--visible':'']}}" style="{{'display:'+(visibleSync?'block':'none')+';'}}" catchtouchmove="__e"><view data-event-opts="{{[['tap',[['close',['mask']]]]]}}" class="{{['uni-drawer__mask','data-v-266b79e5',(showDrawer&&mask)?'uni-drawer__mask--visible':'']}}" bindtap="__e"></view><view class="{{['uni-drawer__content','data-v-266b79e5',(rightMode)?'uni-drawer--right':'',(!rightMode)?'uni-drawer--left':'',(showDrawer)?'uni-drawer__content--visible':'']}}" style="{{'width:'+(drawerWidth+'px')+';'}}"><slot></slot></view></view>
|
||||||
1
unpackage/dist/build/mp-weixin/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.wxss
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
.uni-drawer.data-v-266b79e5{display:block;position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden;z-index:999}.uni-drawer__content.data-v-266b79e5{display:block;position:absolute;top:0;width:220px;bottom:0;background-color:#fff;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.uni-drawer--left.data-v-266b79e5{left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.uni-drawer--right.data-v-266b79e5{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.uni-drawer__content--visible.data-v-266b79e5{-webkit-transform:translateX(0);transform:translateX(0)}.uni-drawer__mask.data-v-266b79e5{display:block;opacity:0;position:absolute;top:0;left:0;bottom:0;right:0;background-color:rgba(0,0,0,.4);transition:opacity .3s}.uni-drawer__mask--visible.data-v-266b79e5{display:block;opacity:1}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item"],{"212c":function(t,n,e){"use strict";n["a"]=function(t){t.options.wxsCallMethods||(t.options.wxsCallMethods=[]),t.options.wxsCallMethods.push("closeSwipe"),t.options.wxsCallMethods.push("change")}},"449f":function(t,n,e){"use strict";e.r(n);var i=e("f1d22"),o=e.n(i);for(var a in i)["default"].indexOf(a)<0&&function(t){e.d(n,t,(function(){return i[t]}))}(a);n["default"]=o.a},"7b12":function(t,n,e){"use strict";e.d(n,"b",(function(){return i})),e.d(n,"c",(function(){return o})),e.d(n,"a",(function(){}));var i=function(){var t=this.$createElement;this._self._c},o=[]},a910:function(t,n,e){},f1d22:function(t,n,e){"use strict";var i=e("47a9");Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=i(e("7965")),a=i(e("2a35")),u=i(e("b857")),s={mixins:[o.default,a.default,u.default],emits:["click","change"],props:{show:{type:String,default:"none"},disabled:{type:Boolean,default:!1},autoClose:{type:Boolean,default:!0},threshold:{type:Number,default:20},leftOptions:{type:Array,default:function(){return[]}},rightOptions:{type:Array,default:function(){return[]}}},destroyed:function(){this.__isUnmounted||this.uninstall()},methods:{uninstall:function(){var t=this;this.swipeaction&&this.swipeaction.children.forEach((function(n,e){n===t&&t.swipeaction.children.splice(e,1)}))},getSwipeAction:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"uniSwipeAction",n=this.$parent,e=n.$options.name;while(e!==t){if(n=n.$parent,!n)return!1;e=n.$options.name}return n}}};n.default=s},f8a6:function(t,n,e){"use strict";var i=e("a910"),o=e.n(i);o.a},f9f5:function(t,n,e){"use strict";e.r(n);var i=e("7b12"),o=e("449f");for(var a in o)["default"].indexOf(a)<0&&function(t){e.d(n,t,(function(){return o[t]}))}(a);e("f8a6");var u=e("828b"),s=e("212c"),c=Object(u["a"])(o["default"],i["b"],i["c"],!1,null,null,null,!1,i["a"],void 0);"function"===typeof s["a"]&&Object(s["a"])(c),n["default"]=c.exports}}]);
|
||||||
|
;(global["webpackJsonp"] = global["webpackJsonp"] || []).push([
|
||||||
|
'uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item-create-component',
|
||||||
|
{
|
||||||
|
'uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item-create-component':(function(module, exports, __webpack_require__){
|
||||||
|
__webpack_require__('df3c')['createComponent'](__webpack_require__("f9f5"))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
[['uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item-create-component']]
|
||||||
|
]);
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"usingComponents": {},
|
||||||
|
"component": true
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
<wxs src="./wx.wxs" module="wxsswipe"></wxs>
|
||||||
|
<view class="uni-swipe"><view class="uni-swipe_box" change:prop="{{wxsswipe.showWatch}}" prop="{{is_show}}" data-threshold="{{threshold}}" data-disabled="{{disabled}}" bindtouchstart="{{wxsswipe.touchstart}}" bindtouchmove="{{wxsswipe.touchmove}}" bindtouchend="{{wxsswipe.touchend}}"><view class="uni-swipe_button-group button-group--left"><block wx:if="{{$slots.left}}"><slot name="left"></slot></block><block wx:else><block wx:for="{{leftOptions}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view data-event-opts="{{[['touchstart',[['appTouchStart',['$event']]]],['touchend',[['appTouchEnd',['$event',index,'$0','left'],[[['leftOptions','',index]]]]]],['tap',[['onClickForPC',[index,'$0','left'],[[['leftOptions','',index]]]]]]]}}" class="uni-swipe_button button-hock" style="{{'background-color:'+(item.style&&item.style.backgroundColor?item.style.backgroundColor:'#C7C6CD')+';'}}" catchtouchstart="__e" catchtouchend="__e" catchtap="__e"><text class="uni-swipe_button-text" style="{{'color:'+(item.style&&item.style.color?item.style.color:'#FFFFFF')+';'+('font-size:'+(item.style&&item.style.fontSize?item.style.fontSize:'16px')+';')}}">{{item.text}}</text></view></block></block></view><view class="uni-swipe_text--center"><slot></slot></view><view class="uni-swipe_button-group button-group--right"><block wx:if="{{$slots.right}}"><slot name="right"></slot></block><block wx:else><block wx:for="{{rightOptions}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view data-event-opts="{{[['touchstart',[['appTouchStart',['$event']]]],['touchend',[['appTouchEnd',['$event',index,'$0','right'],[[['rightOptions','',index]]]]]],['tap',[['onClickForPC',[index,'$0','right'],[[['rightOptions','',index]]]]]]]}}" class="uni-swipe_button button-hock" style="{{'background-color:'+(item.style&&item.style.backgroundColor?item.style.backgroundColor:'#C7C6CD')+';'}}" catchtouchstart="__e" catchtouchend="__e" catchtap="__e"><text class="uni-swipe_button-text" style="{{'color:'+(item.style&&item.style.color?item.style.color:'#FFFFFF')+';'+('font-size:'+(item.style&&item.style.fontSize?item.style.fontSize:'16px')+';')}}">{{item.text}}</text></view></block></block></view></view></view>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
.uni-swipe{position:relative;overflow:hidden}.uni-swipe_box{display:flex;flex-shrink:0;position:relative}.uni-swipe_text--center{width:100%;cursor:grab}.uni-swipe_button-group{box-sizing:border-box;display:flex;flex-direction:row;position:absolute;top:0;bottom:0}.button-group--left{left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.button-group--right{right:0;padding:10rpx 0;box-sizing:border-box;-webkit-transform:translateX(100%);transform:translateX(100%)}.uni-swipe_button{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0 20px;border-radius:10rpx}.uni-swipe_button-text{flex-shrink:0;font-size:14px}.ani{transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;transition-duration:.3s;transition-timing-function:cubic-bezier(.165,.84,.44,1)}
|
||||||
349
unpackage/dist/build/mp-weixin/uni_modules/uni-swipe-action/components/uni-swipe-action-item/wx.wxs
vendored
Normal file
|
|
@ -0,0 +1,349 @@
|
||||||
|
var MIN_DISTANCE = 10;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 判断当前是否为H5、app-vue
|
||||||
|
*/
|
||||||
|
var IS_HTML5 = false
|
||||||
|
if (typeof window === 'object') IS_HTML5 = true
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 监听页面内值的变化,主要用于动态开关swipe-action
|
||||||
|
* @param {Object} newValue
|
||||||
|
* @param {Object} oldValue
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
* @param {Object} instance
|
||||||
|
*/
|
||||||
|
function showWatch(newVal, oldVal, ownerInstance, instance) {
|
||||||
|
var state = instance.getState()
|
||||||
|
getDom(instance, ownerInstance)
|
||||||
|
if (newVal && newVal !== 'none') {
|
||||||
|
openState(newVal, instance, ownerInstance)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state.left) {
|
||||||
|
openState('none', instance, ownerInstance)
|
||||||
|
}
|
||||||
|
resetTouchStatus(instance)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始触摸操作
|
||||||
|
* @param {Object} e
|
||||||
|
* @param {Object} ins
|
||||||
|
*/
|
||||||
|
function touchstart(e, ownerInstance) {
|
||||||
|
var instance = e.instance;
|
||||||
|
var disabled = instance.getDataset().disabled
|
||||||
|
var state = instance.getState();
|
||||||
|
getDom(instance, ownerInstance)
|
||||||
|
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||||
|
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||||
|
if (disabled) return
|
||||||
|
// 开始触摸时移除动画类
|
||||||
|
instance.requestAnimationFrame(function() {
|
||||||
|
instance.removeClass('ani');
|
||||||
|
ownerInstance.callMethod('closeSwipe');
|
||||||
|
})
|
||||||
|
|
||||||
|
// 记录上次的位置
|
||||||
|
state.x = state.left || 0
|
||||||
|
// 计算滑动开始位置
|
||||||
|
stopTouchStart(e, ownerInstance)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始滑动操作
|
||||||
|
* @param {Object} e
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
function touchmove(e, ownerInstance) {
|
||||||
|
var instance = e.instance;
|
||||||
|
var disabled = instance.getDataset().disabled
|
||||||
|
var state = instance.getState()
|
||||||
|
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||||
|
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||||
|
if (disabled) return
|
||||||
|
// 是否可以滑动页面
|
||||||
|
stopTouchMove(e);
|
||||||
|
if (state.direction !== 'horizontal') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.preventDefault) {
|
||||||
|
// 阻止页面滚动
|
||||||
|
e.preventDefault()
|
||||||
|
}
|
||||||
|
|
||||||
|
move(state.x + state.deltaX, instance, ownerInstance)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 结束触摸操作
|
||||||
|
* @param {Object} e
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
function touchend(e, ownerInstance) {
|
||||||
|
var instance = e.instance;
|
||||||
|
var disabled = instance.getDataset().disabled
|
||||||
|
var state = instance.getState()
|
||||||
|
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||||
|
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||||
|
|
||||||
|
if (disabled) return
|
||||||
|
// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
|
||||||
|
// fixed by mehaotian 定时器解决点击按钮,touchend 触发比 click 事件时机早的问题 ,主要是 ios13
|
||||||
|
moveDirection(state.left, instance, ownerInstance)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置移动距离
|
||||||
|
* @param {Object} value
|
||||||
|
* @param {Object} instance
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
function move(value, instance, ownerInstance) {
|
||||||
|
value = value || 0
|
||||||
|
var state = instance.getState()
|
||||||
|
var leftWidth = state.leftWidth
|
||||||
|
var rightWidth = state.rightWidth
|
||||||
|
// 获取可滑动范围
|
||||||
|
state.left = range(value, -rightWidth, leftWidth);
|
||||||
|
instance.requestAnimationFrame(function() {
|
||||||
|
instance.setStyle({
|
||||||
|
transform: 'translateX(' + state.left + 'px)',
|
||||||
|
'-webkit-transform': 'translateX(' + state.left + 'px)'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取元素信息
|
||||||
|
* @param {Object} instance
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
function getDom(instance, ownerInstance) {
|
||||||
|
var state = instance.getState()
|
||||||
|
var leftDom = ownerInstance.selectComponent('.button-group--left')
|
||||||
|
var rightDom = ownerInstance.selectComponent('.button-group--right')
|
||||||
|
var leftStyles = {
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
|
var rightStyles = {
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
if (leftDom) {
|
||||||
|
leftStyles = leftDom.getBoundingClientRect()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (rightDom) {
|
||||||
|
rightStyles = rightDom.getBoundingClientRect()
|
||||||
|
}
|
||||||
|
state.leftWidth = leftStyles.width || 0
|
||||||
|
state.rightWidth = rightStyles.width || 0
|
||||||
|
state.threshold = instance.getDataset().threshold
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取范围
|
||||||
|
* @param {Object} num
|
||||||
|
* @param {Object} min
|
||||||
|
* @param {Object} max
|
||||||
|
*/
|
||||||
|
function range(num, min, max) {
|
||||||
|
return Math.min(Math.max(num, min), max);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移动方向判断
|
||||||
|
* @param {Object} left
|
||||||
|
* @param {Object} value
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
* @param {Object} ins
|
||||||
|
*/
|
||||||
|
function moveDirection(left, ins, ownerInstance) {
|
||||||
|
var state = ins.getState()
|
||||||
|
var threshold = state.threshold
|
||||||
|
var position = state.position
|
||||||
|
var isopen = state.isopen || 'none'
|
||||||
|
var leftWidth = state.leftWidth
|
||||||
|
var rightWidth = state.rightWidth
|
||||||
|
if (state.deltaX === 0) {
|
||||||
|
openState('none', ins, ownerInstance)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 &&
|
||||||
|
rightWidth +
|
||||||
|
left < threshold)) {
|
||||||
|
// right
|
||||||
|
openState('right', ins, ownerInstance)
|
||||||
|
} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
|
||||||
|
leftWidth - left < threshold)) {
|
||||||
|
// left
|
||||||
|
openState('left', ins, ownerInstance)
|
||||||
|
} else {
|
||||||
|
// default
|
||||||
|
openState('none', ins, ownerInstance)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开启状态
|
||||||
|
* @param {Boolean} type
|
||||||
|
* @param {Object} ins
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
function openState(type, ins, ownerInstance) {
|
||||||
|
var state = ins.getState()
|
||||||
|
var leftWidth = state.leftWidth
|
||||||
|
var rightWidth = state.rightWidth
|
||||||
|
var left = ''
|
||||||
|
state.isopen = state.isopen ? state.isopen : 'none'
|
||||||
|
switch (type) {
|
||||||
|
case "left":
|
||||||
|
left = leftWidth
|
||||||
|
break
|
||||||
|
case "right":
|
||||||
|
left = -rightWidth
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
left = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// && !state.throttle
|
||||||
|
|
||||||
|
if (state.isopen !== type) {
|
||||||
|
state.throttle = true
|
||||||
|
ownerInstance.callMethod('change', {
|
||||||
|
open: type
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
state.isopen = type
|
||||||
|
// 添加动画类
|
||||||
|
ins.requestAnimationFrame(function() {
|
||||||
|
ins.addClass('ani');
|
||||||
|
move(left, ins, ownerInstance)
|
||||||
|
})
|
||||||
|
// 设置最终移动位置,理论上只要进入到这个函数,肯定是要打开的
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function getDirection(x, y) {
|
||||||
|
if (x > y && x > MIN_DISTANCE) {
|
||||||
|
return 'horizontal';
|
||||||
|
}
|
||||||
|
if (y > x && y > MIN_DISTANCE) {
|
||||||
|
return 'vertical';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置滑动状态
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
function resetTouchStatus(instance) {
|
||||||
|
var state = instance.getState();
|
||||||
|
state.direction = '';
|
||||||
|
state.deltaX = 0;
|
||||||
|
state.deltaY = 0;
|
||||||
|
state.offsetX = 0;
|
||||||
|
state.offsetY = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置滑动开始位置
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
function stopTouchStart(event) {
|
||||||
|
var instance = event.instance;
|
||||||
|
var state = instance.getState();
|
||||||
|
resetTouchStatus(instance);
|
||||||
|
var touch = event.touches[0];
|
||||||
|
if (IS_HTML5 && isPC()) {
|
||||||
|
touch = event;
|
||||||
|
}
|
||||||
|
state.startX = touch.clientX;
|
||||||
|
state.startY = touch.clientY;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 滑动中,是否禁止打开
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
function stopTouchMove(event) {
|
||||||
|
var instance = event.instance;
|
||||||
|
var state = instance.getState();
|
||||||
|
var touch = event.touches[0];
|
||||||
|
if (IS_HTML5 && isPC()) {
|
||||||
|
touch = event;
|
||||||
|
}
|
||||||
|
state.deltaX = touch.clientX - state.startX;
|
||||||
|
state.deltaY = touch.clientY - state.startY;
|
||||||
|
state.offsetY = Math.abs(state.deltaY);
|
||||||
|
state.offsetX = Math.abs(state.deltaX);
|
||||||
|
state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isPC() {
|
||||||
|
var userAgentInfo = navigator.userAgent;
|
||||||
|
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||||
|
var flag = true;
|
||||||
|
for (var v = 0; v < Agents.length - 1; v++) {
|
||||||
|
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||||
|
flag = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(userAgentInfo.indexOf('Phone') > 0 && userAgentInfo.indexOf('Harmony') > 0){
|
||||||
|
flag = false;
|
||||||
|
}
|
||||||
|
return flag;
|
||||||
|
}
|
||||||
|
|
||||||
|
var movable = false
|
||||||
|
|
||||||
|
function mousedown(e, ins) {
|
||||||
|
if (!IS_HTML5) return
|
||||||
|
if (!isPC()) return
|
||||||
|
touchstart(e, ins)
|
||||||
|
movable = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function mousemove(e, ins) {
|
||||||
|
if (!IS_HTML5) return
|
||||||
|
if (!isPC()) return
|
||||||
|
if (!movable) return
|
||||||
|
touchmove(e, ins)
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseup(e, ins) {
|
||||||
|
if (!IS_HTML5) return
|
||||||
|
if (!isPC()) return
|
||||||
|
touchend(e, ins)
|
||||||
|
movable = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseleave(e, ins) {
|
||||||
|
if (!IS_HTML5) return
|
||||||
|
if (!isPC()) return
|
||||||
|
movable = false
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
showWatch: showWatch,
|
||||||
|
touchstart: touchstart,
|
||||||
|
touchmove: touchmove,
|
||||||
|
touchend: touchend,
|
||||||
|
mousedown: mousedown,
|
||||||
|
mousemove: mousemove,
|
||||||
|
mouseup: mouseup,
|
||||||
|
mouseleave: mouseleave
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action"],{"751a":function(n,t,e){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;t.default={name:"uniSwipeAction",data:function(){return{}},created:function(){this.children=[]},methods:{resize:function(){},closeAll:function(){this.children.forEach((function(n){n.is_show="none"}))},closeOther:function(n){this.openItem&&this.openItem!==n&&(this.openItem.is_show="none"),this.openItem=n}}}},"971e":function(n,t,e){"use strict";e.d(t,"b",(function(){return i})),e.d(t,"c",(function(){return o})),e.d(t,"a",(function(){}));var i=function(){var n=this.$createElement;this._self._c},o=[]},a41f:function(n,t,e){"use strict";e.r(t);var i=e("971e"),o=e("f60a");for(var u in o)["default"].indexOf(u)<0&&function(n){e.d(t,n,(function(){return o[n]}))}(u);var c=e("828b"),a=Object(c["a"])(o["default"],i["b"],i["c"],!1,null,null,null,!1,i["a"],void 0);t["default"]=a.exports},f60a:function(n,t,e){"use strict";e.r(t);var i=e("751a"),o=e.n(i);for(var u in i)["default"].indexOf(u)<0&&function(n){e.d(t,n,(function(){return i[n]}))}(u);t["default"]=o.a}}]);
|
||||||
|
;(global["webpackJsonp"] = global["webpackJsonp"] || []).push([
|
||||||
|
'uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action-create-component',
|
||||||
|
{
|
||||||
|
'uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action-create-component':(function(module, exports, __webpack_require__){
|
||||||
|
__webpack_require__('df3c')['createComponent'](__webpack_require__("a41f"))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
[['uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action-create-component']]
|
||||||
|
]);
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"usingComponents": {},
|
||||||
|
"component": true
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<view><slot></slot></view>
|
||||||
1
unpackage/dist/dev/.sourcemap/mp-weixin/components/horizontal-rule/horizontal-rule.js.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"sources":[],"names":[],"mappings":"","file":"components/horizontal-rule/horizontal-rule.js","sourceRoot":""}
|
||||||