Skip to content

N
nyx
Commit 291befb2 by jscat
Options

nyx weapp: 删除map组件

parent 78f7e7f1
正在显示 包含 0 行增加 和 1635 行删除
增值产品-小程序及app/nyx-master/pages/map/map.js deleted 100644 → 0
var config = wx.getStorageSync("config");
var config = wx.getStorageSync("config");
var app = getApp();
Page({
data: {
tempCanvasWidth: 0,
tempCanvasHeight: 0,
imgViewHeight: 0,
page: 'mainPage',
imageNotChoosed: false,
minScale: 0.5,
maxScale: 2.5,
doodleImageSrc: '',
tempImageSrc: 'https://930-test-sh.oss-cn-shanghai.aliyuncs.com/nyx_map/jingan.jpg',
img_cache_key: "",
imgUrl: "",
originImageSrc: '../../icon/sakura.jpg',
imgWidth: 0,
imgHeight: 0,
imgTop: 0,
imgLeft: 0,
initImgTop: 0,
initImgLeft: 0,
// 裁剪框 宽高
imgTagWidth : 60, //in rpx
imgTagHeigth: 60, //in rpx
deviceRatio: 1,
allText : [
// {
// id: "mid_001",
// name: "Renaissance Bar",
// address: "愚园路610号",
// textL: 0, // 参照图是可视的原点
// textT: 0,
// initTextL: 0,
// initTextT: 0,
// },
// {
// id: "mid_123",
// name: "CinCin Wine Cellar",
// address: "五原路610号",
// textL: 50,
// textT: 100,
// initTextL: 50,
// initTextT: 100,
// },
],
// texted:false,
indexTagSelected: -1,
indexTagAdd: false,
newTag : {},
//start - address selector
//refer https://github.com/parasol-wu/wxapp-area-picker
// province: [],
city: [],
district: [],
url: [],
width: [],
height: [],
numBar:[],
// provinceIndex: 0,
cityIndex: 0,
districtIndex: 0,
//end - address selector
//start - long press event
touchStart : 0,
touchEnd: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
var self = this
self.device = wx.getSystemInfoSync()
//self.device = app.globalData.myDevice
// jscat miniprogram default width is 750rpx
self.deviceRatio = self.device.windowWidth / 750
// 地址栏留了80rpx: 用于选择地址
// 操作栏留了160rpx（responsive pixel）: 裁剪+添加文字+涂鸦
self.toolBarHeight = (160 + 80) * self.deviceRatio // in px
self.imgViewHeight = self.device.windowHeight - self.toolBarHeight
self.setData({
imgViewHeight: self.imgViewHeight,
deviceRatio: self.deviceRatio,
})
//获取所有城市列表
self.initCityInfo();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var self = this;
},
uploadScaleStart(e) { //缩放图片
let self = this
let xDistance, yDistance
let [touch0, touch1] = e.touches
//self.touchNum = 0 //初始化，用于控制旋转结束时，旋转动作只执行一次
//计算第一个触摸点的位置，并参照该点进行缩放
self.touchX = touch0.clientX
self.touchY = touch0.clientY
//每次触摸开始时图片左上角坐标
self.imgLeft = self.startX
self.imgTop = self.startY
// 两指手势触发
if (e.touches.length >= 2) {
//坐标转换,从左上角为原点->可视范围center为原点，便于计算scale
self.initLeft = (self.deviceRatio * 750 / 2 - self.imgLeft) / self.oldScale
self.initTop = (self.imgViewHeight / 2 - self.imgTop) / self.oldScale
//计算两指距离
xDistance = touch1.clientX - touch0.clientX
yDistance = touch1.clientY - touch0.clientY
self.oldDistance = Math.sqrt(xDistance * xDistance + yDistance * yDistance)
}
self.setData({
touchStart: e.timeStamp
})
},
uploadScaleMove(e) {
fn(this, e)
},
uploadScaleEnd(e) {
let self = this
// 确定img的位置
self.oldScale = self.newScale || self.oldScale
self.startX = self.imgLeft || self.startX
self.startY = self.imgTop || self.startY
self.setData({
touchEnd: e.timeStamp
})
// 确定标记的位置
},
//长按事件
//1. 不是平移事件: Math.abs(xMove) < 1 && Math.abs(yMove)<1
//2. 不是缩放事件: e.touches.length==2
//3. 时长>=1000ms, 默认的350ms太短了
//4. 时长<1000ms, 将未入库的allText清除
uploadLongPress(e) { //缩放图片
let self = this
let xDistance, yDistance
let [touch0, touch1] = e.touches
var allText = self.data.allText
var touchTime = self.data.touchEnd - self.data.touchStart;
var xMove = touch0.clientX - self.touchX
var yMove = touch0.clientY - self.touchY
//longPress只允许单指操作
if (touchTime >= 1000 && e.touches.length == 1 && Math.abs(xMove) < 1 && Math.abs(yMove)<1) {
//计算第一个触摸点的位置，并参照该点进行缩放
var scaleL = touch0.clientX
var scaleT = touch0.clientY - 80 * self.deviceRatio
//坐标转换,从左上角为原点->可视范围center为原点，便于计算scale
//step1: 计算放大比例
//如果尺寸已经最大, 则newScale==1
var newScale = self.scaleWidth / self.initScaleWidth
//step2: 计算img新坐标
let { initImgLeft, initImgTop } = self.data
var imgPos = genScalePos(self, initImgLeft, initImgTop, newScale)
var deltaL = self.imgLeft - imgPos.left
var deltaT = self.imgTop - imgPos.top
//step3: 计算tag初始坐标:
// x向右，y向右； center为可视区域左上角
var initPos = genInitPos(self, scaleL-deltaL, scaleT-deltaT, newScale)
var initPosRatio = genInitPosRatio(self, initPos)
var strUrl = config.msg_add_url
var tmp = {
id: "",
name: "",
address: "",
textL: scaleL,
textT: scaleT,
initTextL: initPosRatio.initL,
initTextT: initPosRatio.initT,
}
allText.push(tmp)
self.setData(
{
allText: allText,
newTag: tmp,
indexTagAdd: true,
indexTagSelected: -1,
}
)
}
else //清除addText里未入库的数据
{
var list = []
for(let i = 0; i < allText.length; i++)
{
if(allText[i].id != "")
{
list.push(allText[i])
}
}
self.setData(
{
allText: list,
indexTagAdd: false,
indexTagSelected: -1,
}
)
}
},
/*
选中某一个tag
*/
onSelectTap: function (e) {
var _this = this;
let cuu = e.target.id;//获取index值
_this.setData(
{
indexTagSelected : parseInt(cuu),
indexTagAdd: false,
}
)
},
//处理addMember功能
addMember: function (name, address) {
var _this = this
var allText = _this.data.allText
var strUrl = config.msg_add_url
config.debug == 1 ? console.log("===addMember strUrl_" + strUrl
+ "_name_" + name
+ "_address_" + address
) : ""
//拿到新标注的tag
//要确认是最后一个: 或者是id==""那个
allText[allText.length - 1].id = "mid_002";
allText[allText.length - 1].name = name
allText[allText.length - 1].address = address
console.log(allText[allText.length - 1])
_this.setData(
{
allText: allText,
indexTagAdd: false,
}
)
},
//接受addMenber的click
onAddMember: function (e) {
var _this = this;
let name = e.detail.value.name;//获取名称
var address = e.detail.value.address;//获取地址
if (name != "" && address != "") {
_this.addMember(name, address)
}
},
// 1. 获取全部的city数据 设置city, cityIndex
// 2. 获取city="上海市"的所有"district, url, 及num_bar
// 3. 获取某个区的allText
initCityInfo: function(){
var _this = this;
var strUrl = config.city_query_url
config.debug == 1 ? console.log("===initCityInfo strUrl is: \"" + strUrl + "\"") : ""
wx.request({
url: strUrl,
method: 'GET',
header: {
'Cookie': wx.getStorageSync('cookieKey'),
},
success: function (res) {
if (res.data.resultCode == 200) {
//表示HTTP请求成功
console.log(res.data);
var city = []
var cityIndex = 0
var json = {};
var list = []
var district = []
var numBar = []
var url = []
var width=[]
var height=[]
for (var i = 0; i < res.data.data.length; i++) {
// city.push(res.data.data[i].city)
var cityName = res.data.data[i].city
if (!json[cityName]) {
city.push(cityName);
json[cityName] = city.length;
}
if(cityName == "上海市")
{
district.push(res.data.data[i].district)
numBar.push(res.data.data[i].numBar)
url.push(res.data.data[i].url)
width.push(res.data.data[i].width)
height.push(res.data.data[i].height)
}
}
cityIndex = json["上海市"]-1
_this.setData({
district: district,
numBar: numBar,
url: url,
width: width,
height:height,
city: city,
cityIndex:cityIndex,
})
//获得新的地区名
var districtName = district[0]
var areaName = city[cityIndex] + "_" + districtName
//基于图片大小重置setData参数，必须最先运行
loadImgOnData(_this, width[0], height[0])
//分析图片是temp还是https获取
_this.loadMap(_this, url[0], areaName)
//基于图片尺寸，计算member的pos
_this.getMemberPos("", areaName)
//是否缓存图片
_this.cacheImageAll();
}
}
})
},
/**
* getCityList
*/
// 获取全部的city数据
getCityList: function () {
var _this = this;
var strUrl = config.city_list_url
config.debug == 1 ? console.log("===getCityList strUrl is: \"" + strUrl + "\"") : ""
wx.request({
url: strUrl,
method: 'GET',
header: {
'Cookie': wx.getStorageSync('cookieKey'),
},
success: function (res) {
if (res.data.resultCode == 200) {
//表示HTTP请求成功
console.log(res.data);
var list = []
for (var i = 0; i < res.data.data.length; i++) {
list.push(res.data.data[i].city)
}
var city = list[0]
_this.getCityInfo(city)
_this.setData({
city: list,
})
}
}
})
},
//
getCityInfo: function(cityName)
{
var _this = this;
var strUrl = config.city_query_url + "?city=" + cityName
config.debug == 1 ? console.log("===getCityInfo strUrl is: \"" + strUrl + "\"") : ""
wx.request({
url: strUrl,
method: 'GET',
header: {
'Cookie': wx.getStorageSync('cookieKey'),
},
success: function (res) {
if (res.data.resultCode == 200) {
//表示HTTP请求成功
console.log(res.data);
var list = []
var district = []
var numBar = []
var url = []
var width=[]
var height=[]
for (var i = 0; i < res.data.data.length; i++) {
var result = {}
result["district"] = res.data.data[i].district
result["url"] = res.data.data[i].url
result["number"] = res.data.data[i].numBar
district.push(res.data.data[i].district)
numBar.push(res.data.data[i].numBar)
url.push(res.data.data[i].url)
width.push(res.data.data[i].width)
height.push(res.data.data[i].height)
list.push(result)
}
_this.setData({
cityInfo: list,
district: district,
numBar: numBar,
url: url,
width:width,
height:height,
})
//获得新的地区名
var districtName = district[0]
var areaName = cityName + "_" + districtName
loadImgOnData(_this, width[0], height[0])
_this.loadMap(_this, url[0], areaName)
_this.getMemberPos("", areaName)
_this.cacheImage();
}
}
})
},
//获取全部的member信息
//to allText
// id: "mid_123",
// name: "CinCin Wine Cellar",
// address: "五原路610号",
// initTextL: 50,
// initTextT: 100,
getMemberPos: function (area_id, area_name) {
var _this = this;
var query_string = area_id == "" ? "?areaName=" + area_name : "?areaId=" + area_id
var strUrl = config.member_query_url + query_string
config.debug == 1 ? console.log("===getMemberPos strUrl is: \"" + strUrl + "\"") : ""
wx.request({
url: strUrl,
method: 'GET',
header: {
'Cookie': wx.getStorageSync('cookieKey'),
},
success: function (res) {
if (res.data.resultCode == 200) {
//表示HTTP请求成功
console.log(res.data);
var initImgLeft = _this.data.initImgLeft
var initImgTop = _this.data.initImgTop
console.log("left_"+initImgLeft)
console.log("top_" + initImgTop)
var list = []
for (var i = 0; i < res.data.data.length; i++) {
var result = {}
result["id"] = res.data.data[i].id
result["name"] = res.data.data[i].memberName
var textL = parseFloat(res.data.data[i].posLeft * _this.initWidth * 2 / _this.initRatio + initImgLeft)
var textT = parseFloat(res.data.data[i].posTop * _this.initHeight * 2 / _this.initRatio + initImgTop)
result["textL"] = textL
result["textT"] = textT
result["address"] = res.data.data[i].memberAddress
//load from db, in rpx format
result["initTextL"] = parseFloat(res.data.data[i].posLeft)
result["initTextT"] = parseFloat(res.data.data[i].posTop)
list.push(result)
}
_this.setData({
allText: list,
})
}
}
})
},
//获取City下的district和num_bar数据
//输入cityName
//输出member
onCityPicker: function (e)
{
var _this = this;
var currentCityIndex = e.detail.value
var cityName = _this.__data__.city[currentCityIndex]
_this.setData(
{
cityIndex : currentCityIndex,
districtIndex:0,
}
)
_this.getCityInfo(cityName)
},
//获取City下的district和num_bar数据
//输入cityName
//输出member
onDistrictPicker: function (e) {
var _this = this;
var currentDistrictIndex = e.detail.value
var cityIndex = _this.__data__.cityIndex
_this.setData(
{
districtIndex: currentDistrictIndex,
allText: [],
}
)
var cityName = _this.__data__.city[cityIndex]
var districtName = _this.__data__.district[currentDistrictIndex]
var areaName = cityName + "_" + districtName
loadImgOnData(_this, _this.__data__.width[currentDistrictIndex], _this.__data__.height[currentDistrictIndex])
_this.loadMap(_this, _this.__data__.url[currentDistrictIndex], areaName)
_this.getMemberPos("", areaName)
_this.cacheImage();
},
//从网络imgUrl或者临时文件tempFile载入图片
loadMap: function (self, imgUrl, areaName)
{
var img_cache_key = areaName + "_imgcache"
//先获取临时文件tempFile
var tempPath = wx.getStorageSync(img_cache_key)
if(tempPath != "")
{
//通过文件管理系统来判断tempFile是否存在
const fs = wx.getFileSystemManager()
fs.access({
path: tempPath,
success: function () {
console.log("===loadMap, success Load res from temp")
console.log("===loadMap, " + areaName + " image path: " + tempPath)
self.setData({
tempImageSrc: tempPath,
img_cache_key: img_cache_key,
imgUrl: imgUrl
})
//loadImgOnImage(self, tempPath, areaName)
},
fail: function (errmsg) {
console.log("===loadMap, fail Load res from temp")
wx.removeStorageSync(img_cache_key)
console.log("===loadMap, " + areaName + " image path: " + imgUrl)
self.setData({
tempImageSrc: imgUrl,
img_cache_key: img_cache_key,
imgUrl: imgUrl
})
//loadImgOnImage(self, imgUrl, areaName)
},
})
}
else
{
self.setData({
tempImageSrc: imgUrl,
img_cache_key: img_cache_key,
imgUrl: imgUrl
})
//loadImgOnImage(self, imgUrl, areaName)
}
},
cacheImageFunc1: function (img_cache_key, imgUrl)
{
wx.downloadFile({
url: imgUrl,
success: function (res) {
if (res.statusCode === 200) {
console.log('图片下载成功_'+ img_cache_key + "_" + res.tempFilePath)
// 第二步: 使用小程序的文件系统，通过小程序的api获取到全局唯一的文件管理器
const fs = wx.getFileSystemManager()
// fs为全局唯一的文件管理器。那么文件管理器的作用是什么，我们可以用来做什么呢？
// 文件管理器的作用之一就是可以根据临时文件路径，通过saveFile把文件保存到本地缓存.
fs.saveFile({
tempFilePath: res.tempFilePath, // 传入一个临时文件路径
success(res) {
console.log('图片缓存成功', res.savedFilePath) // res.savedFilePath 为一个本地缓存文件路径
// 此时图片本地缓存已经完成，res.savedFilePath为本地存储的路径。
//小程序的本地文件路径标准： {{协议名}}://文件路径
//协议名在 iOS/Android 客户端为 "wxfile"，在开发者工具上为 "http"，
//开发者无需关注这个差异，也不应在代码中去硬编码完整文件路径。
//好了，到此为止，我们已经把图片缓存到本地了，而且我们也得到了本地缓存的路径。
// 那么我们把本地缓存的路径，通过小程序的数据缓存服务保存下来。
// 下次打开小程序 首先去缓存中检查是否存在本地文件的缓存路径
// 如果有，直接image src赋值本地缓存路径。
//如果没有，则是第一次下载图片，或者用户手动清理缓存造成的。
wx.setStorageSync(img_cache_key, res.savedFilePath)
}
})
} else {
console.log('响应失败', res.statusCode)
}
}
})
},
// refer https://www.jianshu.com/p/c07c0c81986f
// 微信小程序 实现网络图片本地缓存
cacheImageFunc: function (img_cache_key, imgUrl) {
wx.downloadFile({
url: imgUrl,
success: function (res) {
if (res.statusCode === 200) {
console.log('图片下载成功_' + img_cache_key + "_" + res.tempFilePath)
// 第二步: 使用小程序的文件系统，通过小程序的api获取到全局唯一的文件管理器
// 此时图片本地缓存已经完成，res.savedFilePath为本地存储的路径。
//小程序的本地文件路径标准： {{协议名}}://文件路径
//协议名在 iOS/Android 客户端为 "wxfile"，在开发者工具上为 "http"，
//开发者无需关注这个差异，也不应在代码中去硬编码完整文件路径。
//好了，到此为止，我们已经把图片缓存到本地了，而且我们也得到了本地缓存的路径。
// 那么我们把本地缓存的路径，通过小程序的数据缓存服务保存下来。
// 下次打开小程序 首先去缓存中检查是否存在本地文件的缓存路径
// 如果有，直接image src赋值本地缓存路径。
//如果没有，则是第一次下载图片，或者用户手动清理缓存造成的。
wx.setStorageSync(img_cache_key, res.tempFilePath)
} else {
console.log('响应失败', res.statusCode)
}
}
})
},
cacheImage: function ()
{
var _this = this;
var img_cache_key = _this.__data__.img_cache_key
var imgUrl = _this.__data__.imgUrl
if (wx.getStorageSync(img_cache_key)=="")
{
_this.cacheImageFunc(img_cache_key, imgUrl)
}
},
cacheImageAll: function () {
var _this = this;
var cityIndex = _this.data.cityIndex
var img_cache_key = ""
var imgUrl = ""
for(let index=0; index<_this.data.district.length; index++)
{
img_cache_key = _this.data.city[cityIndex] + "_" + _this.data.district[index] + "_imgcache"
imgUrl = _this.__data__.url[index]
if (wx.getStorageSync(img_cache_key) == "") {
_this.cacheImageFunc(img_cache_key, imgUrl)
}
}
},
})
// system function
function loadImgOnImage(self, imgUrl, areaName) {
wx.getImageInfo({
src: imgUrl,
success: function (res) {
self.oldScale = 1
//已转换为px 图片原始大小/显示大小
self.initRatio = res.height / self.imgViewHeight
//jscat 取一个最大的ratio, max(ratio_height, ratio_width)，以避免溢出
if (self.initRatio < res.width / (750 * self.deviceRatio)) {
self.initRatio = res.width / (750 * self.deviceRatio)
}
//图片显示大小
//jscat 为了更好显示, 这里放大了图片
self.scaleWidth = (res.width / self.initRatio) * 2
self.scaleHeight = (res.height / self.initRatio) * 2
self.initScaleWidth = self.scaleWidth
self.initScaleHeight = self.scaleHeight
self.initWidth = res.width
self.initHeight = res.height
self.startX = 750 * self.deviceRatio / 2 - self.scaleWidth / 2;
self.startY = self.imgViewHeight / 2 - self.scaleHeight / 2;
self.setData({
imgWidth: self.scaleWidth,
imgHeight: self.scaleHeight,
imgTop: self.startY,
imgLeft: self.startX,
initImgTop: self.startY,
initImgLeft: self.startX
})
// wx.hideLoading();
//需要在地图装在之后再重置数据
self.getMemberPos("", areaName)
}
})
}
// system function
function loadImgOnData(self, width, height) {
self.oldScale = 1
//已转换为px 图片原始大小/显示大小
self.initRatio = height / self.imgViewHeight
//jscat 取一个最大的ratio, max(ratio_height, ratio_width)，以避免溢出
if (self.initRatio < width / (750 * self.deviceRatio)) {
self.initRatio = width / (750 * self.deviceRatio)
}
//图片显示大小
//jscat 为了更好显示, 这里放大了图片
self.scaleWidth = (width / self.initRatio) * 2
self.scaleHeight = (height / self.initRatio) * 2
self.initScaleWidth = self.scaleWidth
self.initScaleHeight = self.scaleHeight
self.initWidth = width
self.initHeight = height
self.startX = 750 * self.deviceRatio / 2 - self.scaleWidth / 2;
self.startY = self.imgViewHeight / 2 - self.scaleHeight / 2;
self.setData({
imgWidth: self.scaleWidth,
imgHeight: self.scaleHeight,
imgTop: self.startY,
imgLeft: self.startX,
initImgTop: self.startY,
initImgLeft: self.startX
})
// wx.hideLoading();
}
function throttle(fn, miniTimeCell) {
var timer = null,
previous = null;
return function () {
var now = +new Date(),
context = this,
args = arguments;
if (!previous) previous = now;
var remaining = now - previous;
if (miniTimeCell && remaining >= miniTimeCell) {
fn.apply(context, args);
previous = now;
}
}
}
const fn = throttle(drawOnTouchMove, 100)
function drawOnTouchMove(self, e) {
let { minScale, maxScale } = self.data
let [touch0, touch1] = e.touches
let xMove, yMove, newDistance, xDistance, yDistance
if (e.timeStamp - self.timeOneFinger < 100) {//touch时长过短，忽略
return
}
// 单指手势时触发
if (e.touches.length === 1) {
//计算单指移动的距离
xMove = touch0.clientX - self.touchX
yMove = touch0.clientY - self.touchY
//转换移动距离到正确的坐标系下
// console.log("===windowHeight_", self.device.windowHeight)
// console.log("===imgHeight_", self.scaleHeight)
// console.log("min imgTop_", self.device.windowHeight - self.toolBarHeight - self.scaleHeight)
// console.log("ymove_",self.startY + yMove)
self.imgLeft = self.startX + xMove > 0 ? 0 : (self.startX + xMove < (self.device.windowWidth - self.scaleWidth) ? (self.device.windowWidth - self.scaleWidth) : self.startX + xMove)
self.imgTop = self.startY + yMove > 0 ? 0 : (self.startY + yMove < (self.device.windowHeight - self.toolBarHeight - self.scaleHeight) ? (self.device.windowHeight - self.toolBarHeight - self.scaleHeight) : self.startY + yMove)
// console.log("===imgLeft_", self.imgLeft)
// console.log("===imgTop_", self.imgTop)
self.setData({
imgTop: self.imgTop,
imgLeft: self.imgLeft,
})
}
// 两指手势触发
if (e.touches.length >= 2) {
// self.timeMoveTwo = e.timeStamp
var oldScaleWidth = self.data.imgWidth
var oldScaleHeight = self.data.imgHeight
// 计算二指最新距离
xDistance = touch1.clientX - touch0.clientX
yDistance = touch1.clientY - touch0.clientY
newDistance = Math.sqrt(xDistance * xDistance + yDistance * yDistance)
// 使用0.005的缩放倍数具有良好的缩放体验
self.newScale = self.oldScale + 0.005 * (newDistance - self.oldDistance)
// 设定缩放范围 [0.5, 2.5]之间
self.newScale <= minScale && (self.newScale = minScale)
self.newScale >= maxScale && (self.newScale = maxScale)
// 设定最小范围 [不超出设定的windows范围]
var tmpScaleWidth = self.newScale * self.initScaleWidth
var tmpScaleHeight = self.newScale * self.initScaleHeight
var tmpScaleRatio = self.initScaleHeight/self.initScaleWidth
var winHeight = self.device.windowHeight - self.toolBarHeight
var winWidth = self.device.windowWidth
var tmpWinRatio = winHeight / winWidth
//scaleWidth, scaleHeight 当前图片的尺寸
//地图高宽比>幕布高宽比, 地图以width为准, 其minWidth以winWidth为准
if (tmpScaleRatio >= tmpWinRatio )
{
self.scaleWidth = tmpScaleWidth <= winWidth ? winWidth : tmpScaleWidth
self.scaleHeight = tmpScaleWidth <= winWidth ? tmpScaleHeight * winWidth / tmpScaleWidth : tmpScaleHeight
}
//地图高宽比<幕布高宽比, 地图以height为准, 其minHeight以winHeight为准
else // example.
{
//计算出来的height<可显示的height，则赋值为可显示的height
self.scaleHeight = tmpScaleHeight <= winHeight ? winHeight : tmpScaleHeight
self.scaleWidth = tmpScaleHeight <= winHeight ? tmpScaleWidth * winHeight / tmpScaleHeight : tmpScaleWidth
}
//不超过图像最大尺寸
if(self.scaleWidth > self.initWidth ||self.scaleHeight > self.initHeight)
{
self.scaleWidth = self.initWidth;
self.scaleHeight = self.initHeight;
}
// console.log("tmpScaleRatio_",tmpScaleRatio)
// console.log("tmpScaleWidth_",tmpScaleWidth)
// console.log("tmpScaleRatio_",tmpScaleRatio)
// console.log("minHeight_",minHeight)
// console.log("minWidth_",minWidth)
// console.log("scaleWidth_",self.scaleWidth)
// console.log("scaleHeight_",self.scaleHeight)
// self.imgLeft = self.deviceRatio * 750 / 2 - self.newScale * self.initLeft
// self.imgTop = self.imgViewHeight / 2 - self.newScale * self.initTop
//不考虑scale超过windows边界的算法
var imgLeft = self.deviceRatio * 750 / 2 - self.newScale * self.initLeft
var imgTop = self.imgViewHeight / 2 - self.newScale * self.initTop
// console.log("===imgLeft_", imgLeft)
// console.log("===sysLeft_", self.device.windowWidth - self.scaleWidth)
// console.log("===imgTop_", imgTop)
// console.log("===sysTop_", self.device.windowHeight - self.toolBarHeight - self.scaleHeight)
// 考虑windows的边界
self.imgLeft = imgLeft >= 0 ? 0 : (imgLeft < (self.device.windowWidth - self.scaleWidth) ? (self.device.windowWidth - self.scaleWidth) : imgLeft)
self.imgTop = imgTop >= 0 ? 0 : (imgTop < (self.device.windowHeight - self.toolBarHeight - self.scaleHeight) ? (self.device.windowHeight - self.toolBarHeight - self.scaleHeight) : imgTop)
self.setData({
imgTop: self.imgTop,
imgLeft: self.imgLeft,
imgWidth: self.scaleWidth, //新尺寸
imgHeight: self.scaleHeight,
})
}
// 计算标记点Tag的位置 = 平移 + scale 两部分
// 计算标记点新坐标的位置, 同时包括scale和translate
let { initImgLeft, initImgTop } = self.data
var allText = self.data.allText
//坐标转换,从左上角为原点->可视范围center为原点，便于计算scale
//step1: 计算放大比例
//如果尺寸已经最大, 则newScale==1
var newScale = self.scaleWidth / self.initScaleWidth
//step2: 计算img新坐标
var imgPos = genScalePos(self, initImgLeft, initImgTop, newScale)
var deltaL = self.imgLeft - imgPos.left
var deltaT = self.imgTop - imgPos.top
var textPos = {}
for (let i = 0; i < allText.length; i++) {
//step3: 计算tag点新坐标 in px
var textL = parseFloat(allText[i].initTextL * self.initWidth * 2 / self.initRatio + initImgLeft)
var textT = parseFloat(allText[i].initTextT * self.initHeight * 2 / self.initRatio + initImgTop)
textPos = genScalePos(self, textL, textT, newScale)
// step4新的tag点坐标
allText[i].textL = textPos.left + deltaL
allText[i].textT = textPos.top + deltaT
}
self.setData({
allText: allText
})
}
/*
将初始
*/
function genScalePos(self, initL, initT, scale)
{
var tmpL = (self.deviceRatio * 750 / 2 - initL)
var tmpT = (self.imgViewHeight / 2 - initT)
var left = self.deviceRatio * 750 / 2 - scale * tmpL
var top = self.imgViewHeight / 2 - scale * tmpT
return { left, top }
}
/*
通过平移+缩放后的坐标转为初始坐标
*/
function genInitPos(self, scaleL, scaleT, scale) {
var tmpL = (self.deviceRatio * 750 / 2 - scaleL)/scale
var tmpT = (self.imgViewHeight / 2 - scaleT)/scale
var initL = (self.deviceRatio * 750 / 2 - tmpL)
var initT = (self.imgViewHeight / 2 - tmpT)
return { initL, initT }
}
/*
通过平移+缩放后的坐标转为初始坐标
*/
function genInitPosRatio(self, initPos) {
var tmpL = (initPos.initL -self.data.initImgLeft)*self.initRatio/2
var tmpT = (initPos.initT - self.data.initImgTop) * self.initRatio / 2
var initL = (tmpL/self.initWidth).toFixed(4)
var initT = (tmpT / self.initHeight).toFixed(4)
return { initL, initT }
}
增值产品-小程序及app/nyx-master/pages/map/map.json deleted 100644 → 0
{
{
"usingComponents": {},
"navigationBarTitleText": "酒肆地图"
}
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/map/map.wxml deleted 100644 → 0
<view class="page">
<view class="page">
<!-- 城市选择view -->
<view class="container">
<view class='address'>
<view class='selectAddress'>
<picker mode="selector" range="{{city}}" value="{{cityIndex}}" bindchange="onCityPicker" class='address_province'>
<text>{{city[cityIndex]}}</text>
<image src='../../icon/down.png' style='width: 56rpx;height: 56rpx;' class='selecrtImg'></image>
</picker>
<picker mode="selector" range="{{district}}" value="{{districtIndex}}" bindchange="onDistrictPicker" class='address_province'>
<text>{{district[districtIndex]}}</text>
<image src='../../icon/down.png' style='width: 56rpx;height: 56rpx;' class='selecrtImg'></image>
</picker>
<view class='address_province'>
<text>已复工{{numBar[districtIndex]}}家</text>
</view>
</view>
</view>
</view>
<!-- 地图显示view -->
<view class="imageView" style="height:{{imgViewHeight}}px;position:fixed; top:80rpx;">
<image src="{{tempImageSrc}}" style="width:{{imgWidth}}px;height:{{imgHeight}}px;top:{{imgTop}}px;left:{{imgLeft}}px" disable-scroll="true" bindtouchstart="uploadScaleStart" bindtouchmove="uploadScaleMove" bindtouchend="uploadScaleEnd" bindtap='uploadLongPress'></image>
<block wx:for="{{allText}}" >
<!-- 添加文字页面 -->
<!-- image left:textL-15px;top:textT-15;width:60rps;height:60rpx -->
<!-- text left:textL+15px;top:textT-15; -->
<image src="../../icon/tag.png" style="left:{{item.textL-imgTagWidth*deviceRatio/2}}px;top:{{item.textT-imgTagWidth*deviceRatio/2}}px;position:absolute;width:{{imgTagWidth}}rpx;height:{{imgTagWidth}}rpx" bind:tap="onSelectTap" id="{{index}}"></image>
<text class="active-text" style="left:{{item.textL+imgTagWidth*deviceRatio/2}}px;top:{{item.textT-60*deviceRatio/2}}px;">{{item.name}}</text>
</block>
</view>
<!-- 主页面-底部-->
<view class="toolbar-bottom" hidden="{{indexTagSelected==-1}}">
<view class="weui-cell__bd" style="padding-left:60rpx;">
<view class="weui-media-box__desc" style="font-family:'Microsoft YaHei';font-size:20px;color:rgba(0,0,0,1);">{{allText[indexTagSelected].name}}
</view>
<view class="weui-flex__item" >
<image style="width:25rpx;height:25rpx" src="/icon/discover2.png" />
<span style="font-size:15px;color:rgba(120, 120, 120);">
{{allText[indexTagSelected].address}}
</span>
</view>
</view>
</view>
<block wx:if="{{indexTagAdd==true}}">
<form catchsubmit="onAddMember" >
<view class="message-input">
<input class="showSend" placeholder="请输入店名" name="name" type="text" />
<input class="showSend" placeholder="请输入地址" name="address" type="text"/>
<input type="text" style="display:none" name="initTextL" value='{{newTag.initTextL}}'/>
<input type="text" style="display:none" name="initTextT" value='{{newTag.initTextT}}'/>
<input type="text" style="display:none" name="textL" value='{{newTag.textL}}'/>
<input type="text" style="display:none" name="textT" value='{{newTag.textT}}'/>
<button type="default" formType="submit">添加</button>
</view>
</form>
</block>
</view>
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/map/map.wxss deleted 100644 → 0
.page{
.page{
height: 100vh;
background-color:#f5f8fa;
}
.top{
width:100%;
overflow: hidden;
height:60rpx;
}
.imageView{
width:750rpx;
text-align: center;
position: absolute;
overflow: hidden;
}
.noImageBox{
width:100%;
height:100%;
text-align: center;
line-height: 1000rpx;
}
.saveButton{
position:absolute;
top:30rpx;
right:40rpx;
padding: 10rpx;
font-size: 0;
opacity: 0.7;
z-index: 5;
}
.saveButton .icon-save{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Esave%3C/title%3E %3Cpath d='M21.7 7.3l-5-5c-0.2-0.2-0.4-0.3-0.7-0.3h-11c-1.7 0-3 1.3-3 3v14c0 1.7 1.3 3 3 3h14c1.7 0 3-1.3 3-3v-11c0-0.3-0.1-0.5-0.3-0.7zM16 20h-8v-6h8v6zM20 19c0 0.6-0.4 1-1 1h-1v-7c0-0.6-0.4-1-1-1h-10c-0.6 0-1 0.4-1 1v7h-1c-0.6 0-1-0.4-1-1v-14c0-0.6 0.4-1 1-1h1v4c0 0.6 0.4 1 1 1h8c0.6 0 1-0.4 1-1s-0.4-1-1-1h-7v-3h7.6l4.4 4.4v10.6z'%3E%3C/path%3E %3C/svg%3E");
background-size: cover;
display: inline-block;
width: 60rpx;
height: 60rpx;
}
.saveButton:active .icon-save{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Esave%3C/title%3E %3Cpath d='M21.7 7.3l-5-5c-0.2-0.2-0.4-0.3-0.7-0.3h-11c-1.7 0-3 1.3-3 3v14c0 1.7 1.3 3 3 3h14c1.7 0 3-1.3 3-3v-11c0-0.3-0.1-0.5-0.3-0.7zM16 20h-8v-6h8v6zM20 19c0 0.6-0.4 1-1 1h-1v-7c0-0.6-0.4-1-1-1h-10c-0.6 0-1 0.4-1 1v7h-1c-0.6 0-1-0.4-1-1v-14c0-0.6 0.4-1 1-1h1v4c0 0.6 0.4 1 1 1h8c0.6 0 1-0.4 1-1s-0.4-1-1-1h-7v-3h7.6l4.4 4.4v10.6z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E");
}
.imageView image{
position: absolute;
display: block;
margin: 0 auto;
}
.corpper-view-box{
position: absolute;
z-index: 2;
box-shadow: 0 0 0 9999px rgba(204,204,204,0.8);
}
/* 横向虚线 */
.cropper-dashed-h{
position: absolute;
top: 33.33333333%;
left: 0;
width: 100%;
height: 33.33333333%;
border-top: 1px dashed rgba(255,255,255,0.5);
border-bottom: 1px dashed rgba(255,255,255,0.5);
}
/* 纵向虚线 */
.cropper-dashed-v{
position: absolute;
left: 33.33333333%;
top: 0;
width: 33.33333333%;
height: 100%;
border-left: 1px dashed rgba(255,255,255,0.5);
border-right: 1px dashed rgba(255,255,255,0.5);
}
/* 四个方向的线 为了之后的拖动事件*/
.cropper-line-t{
position: absolute;
display: block;
width: 100%;
background-color: #69f;
top: 0;
left: 0;
height: 1px;
opacity: 0.1;
}
.cropper-line-r{
position: absolute;
display: block;
background-color: #69f;
top: 0;
right: 0px;
width: 1px;
opacity: 0.1;
height: 100%;
}
.cropper-line-b{
position: absolute;
display: block;
width: 100%;
background-color: #69f;
bottom: 0;
left: 0;
height: 1px;
opacity: 0.1;
}
.cropper-line-l{
position: absolute;
display: block;
background-color: #69f;
top: 0;
left: 0;
width: 1px;
opacity: 0.1;
height: 100%;
}
/* 剪裁框的点 */
.cropper-point{
width: 5px;
height: 5px;
background-color: #69f;
opacity: .75;
position: absolute;
z-index: 3;
}
.point-tr{
top: -3px;
left: 100%;
margin-left: -3px;
}
.point-rb{
left: 100%;
top: 100%;
transform: translate3d(-50%,-50%,0);
width: 40rpx;
height: 40rpx;
border-radius: 50%;
background-color: #69f;
position: absolute;
z-index: 3;
opacity: 1;
}
.point-bl{
left:0%;
top: 100%;
margin-left: -3px;
margin-top: -3px;
}
.point-lt{
left:0%;
top: 0%;
margin-left: -3px;
margin-top: -3px;
}
.cropper-wraper{
position: absolute;
width:100%;
height:100%;
background-color: transparent;
}
/* 涂鸦窗口 */
.toolbar-bottom{
display: flex;
justify-content: center;
align-items:center;
width:100%;
position: fixed;
bottom: 0;
height: 160rpx;
border-top: 1px solid #8b8b8b27;
border-bottom: 1px solid #8b8b8b27;
background-color: rgb(255, 255, 255);
}
@keyframes toolbar
{
0% {bottom:-100rpx;}
100% {bottom:100rpx;}
}
.toolbar-top{
width:100%;
height:200rpx;
position: absolute;
bottom: 160rpx;
border-top: 1rpx solid #b17a7e;
border-top-left-radius:20rpx;
border-top-right-radius:20rpx;
animation-name:toolbar;
animation-duration: 0.2s;
animation-timing-function: ease;
}
.toolbar-width{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.slider-box{
width:80%;
}
.color-box{
width:750rpx;
height:100%;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap :wrap;
align-content: space-around;
}
.color-point{
width:60rpx;
height:60rpx;
margin: 20rpx 30rpx;
border-radius: 50%;
box-shadow: 0 0 0 4rpx transparent;
}
.color-point:active{
box-shadow: 0 0 0 4rpx #fff;
}
.toolbar-back,.toolbar-font-style{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.icon-cutter{
background-size: cover;
display: inline-block;
width: 50rpx;
height: 50rpx;
position: absolute;
left:50%;
transform: translateX(-50%);
bottom: 50rpx;
}
.icon-text{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Etype%3C/title%3E %3Cpath d='M20 3h-16c-0.6 0-1 0.4-1 1v3c0 0.6 0.4 1 1 1s1-0.4 1-1v-2h6v14h-2c-0.6 0-1 0.4-1 1s0.4 1 1 1h6c0.6 0 1-0.4 1-1s-0.4-1-1-1h-2v-14h6v2c0 0.6 0.4 1 1 1s1-0.4 1-1v-3c0-0.6-0.4-1-1-1z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E ");
background-size: cover;
display: inline-block;
width: 50rpx;
height: 50rpx;
position: absolute;
left:50%;
transform: translateX(-50%);
bottom: 50rpx;
}
.icon-pen{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E %3Ctitle%3Eedit-pencil%3C/title%3E %3Cpath d='M12.3 3.7l4 4-12.3 12.3h-4v-4l12.3-12.3zM13.7 2.3l2.3-2.3 4 4-2.3 2.3-4-4z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E");
background-size: cover;
display: inline-block;
width: 40rpx;
height: 40rpx;
position: absolute;
left:50%;
transform: translateX(-50%);
bottom: 55rpx;
}
.icon-back{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E %3Ctitle%3Eundo2%3C/title%3E %3Cpath d='M23.808 32c3.554-6.439 4.153-16.26-9.808-15.932v7.932l-12-12 12-12v7.762c16.718-0.436 18.58 14.757 9.808 24.238z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E ");
background-size: cover;
display: inline-block;
width: 50rpx;
height: 50rpx;
position: absolute;
left:50%;
transform: translateX(-50%);
bottom: 50rpx;
}
.icon-cutbox{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Ecrop%3C/title%3E %3Cpath d='M23 17h-4v-9c0-1.7-1.3-3-3-3l-8.9 0.1v-4.1c0-0.6-0.4-1-1-1 0 0 0 0 0 0-0.5 0-1 0.4-1 1v4.1h-4.1c-0.6 0-1 0.5-1 1s0.5 1 1 1c0 0 0 0 0 0h4.1l-0.1 8.9c0 1.7 1.3 3 3 3h9v4c0 0.6 0.4 1 1 1s1-0.4 1-1v-4h4c0.6 0 1-0.4 1-1s-0.4-1-1-1zM8 17c-0.6 0-1-0.4-1-1l0.1-8.9 8.9-0.1c0.6 0 1 0.4 1 1v9h-9z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E ");
background-size: cover;
display: inline-block;
width: 50rpx;
height: 50rpx;
position: absolute;
left:50%;
transform: translateX(-50%);
bottom: 50rpx;
}
.icon-bestshow{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Emaximize-2%3C/title%3E %3Cpath d='M21.9 2.6c-0.1-0.2-0.3-0.4-0.5-0.5-0.1-0.1-0.3-0.1-0.4-0.1h-6c-0.6 0-1 0.4-1 1s0.4 1 1 1h3.6l-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3l5.3-5.3v3.6c0 0.6 0.4 1 1 1s1-0.4 1-1v-6c0-0.1 0-0.3-0.1-0.4z' fill='%23d6204b'%3E%3C/path%3E %3Cpath d='M9.3 13.3l-5.3 5.3v-3.6c0-0.6-0.4-1-1-1s-1 0.4-1 1v6c0 0.1 0 0.3 0.1 0.4 0.1 0.2 0.3 0.4 0.5 0.5 0.1 0.1 0.3 0.1 0.4 0.1h6c0.6 0 1-0.4 1-1s-0.4-1-1-1h-3.6l5.3-5.3c0.4-0.4 0.4-1 0-1.4s-1-0.4-1.4 0z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E ");
background-size: cover;
display: inline-block;
width: 50rpx;
height: 50rpx;
position: absolute;
left:50%;
transform: translateX(-50%);
bottom: 50rpx;
}
.icon-linewidth{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E %3Ctitle%3Estroke-width%3C/title%3E %3Cpath d='M0 0h20v5h-20v-5zM0 7h20v4h-20v-4zM0 13h20v3h-20v-3zM0 18h20v2h-20v-2z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E");
background-size: cover;
display: inline-block;
width: 40rpx;
height: 40rpx;
position: absolute;
bottom: 55rpx;
left:50%;
transform: translateX(-50%);
}
.icon-color{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Epalette%3C/title%3E %3Cpath d='M17.484 12c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM14.484 8.016c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM9.516 8.016c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM6.516 12c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM12 3c4.969 0 9 3.609 9 8.016 0 2.766-2.25 4.969-5.016 4.969h-1.734c-0.844 0-1.5 0.656-1.5 1.5 0 0.375 0.141 0.703 0.375 0.984s0.375 0.656 0.375 1.031c0 0.844-0.656 1.5-1.5 1.5-4.969 0-9-4.031-9-9s4.031-9 9-9z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E ");
background-size: cover;
display: inline-block;
width: 55rpx;
height: 55rpx;
position: absolute;
bottom: 50rpx;
left:50%;
transform: translateX(-50%);
}
.icon-eraser{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E %3Ctitle%3Eeraser%3C/title%3E %3Cpath d='M16.998 4.18l-3.154-2.425c-0.872-0.671-2.135-0.506-2.807 0.365l-8.4 10.897c-0.671 0.871-0.507 2.132 0.365 2.803l3.153 2.425c0.872 0.671 2.135 0.506 2.807-0.365l8.401-10.897c0.671-0.871 0.507-2.132-0.365-2.803zM8.548 16.467l-0.537 0.681c-0.152 0.197-0.385 0.31-0.639 0.31-0.124 0-0.309-0.029-0.485-0.164l-3.153-2.425c-0.168-0.129-0.275-0.317-0.303-0.53s0.028-0.422 0.157-0.589l0.537-0.681c0.152-0.197 0.385-0.311 0.64-0.311 0.124 0 0.309 0.029 0.485 0.164l3.154 2.425c0.168 0.129 0.275 0.317 0.303 0.53 0.026 0.213-0.030 0.422-0.159 0.59z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E ");
background-size: cover;
display: inline-block;
width: 50rpx;
height: 50rpx;
position: absolute;
bottom: 50rpx;
left:50%;
transform: translateX(-50%);
}
.icon-clear{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Etrash-2%3C/title%3E %3Cpath d='M21 5h-4v-1c0-1.7-1.3-3-3-3h-4c-1.7 0-3 1.3-3 3v1h-4c-0.6 0-1 0.4-1 1s0.4 1 1 1h1v13c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-13h1c0.6 0 1-0.4 1-1s-0.4-1-1-1zM9 4c0-0.6 0.4-1 1-1h4c0.6 0 1 0.4 1 1v1h-6v-1zM18 20c0 0.6-0.4 1-1 1h-10c-0.6 0-1-0.4-1-1v-13h12v13z' fill='%23d6204b'%3E%3C/path%3E %3Cpath d='M10 10c-0.6 0-1 0.4-1 1v6c0 0.6 0.4 1 1 1s1-0.4 1-1v-6c0-0.6-0.4-1-1-1z' fill='%23d6204b'%3E%3C/path%3E %3Cpath d='M14 10c-0.6 0-1 0.4-1 1v6c0 0.6 0.4 1 1 1s1-0.4 1-1v-6c0-0.6-0.4-1-1-1z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E ");
background-size: cover;
display: inline-block;
width: 45rpx;
height: 45rpx;
position: absolute;
bottom: 50rpx;
left:50%;
transform: translateX(-50%);
}
.icon-add{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Eplus%3C/title%3E %3Cpath d='M19 11h-6v-6c0-0.6-0.4-1-1-1s-1 0.4-1 1v6h-6c-0.6 0-1 0.4-1 1s0.4 1 1 1h6v6c0 0.6 0.4 1 1 1s1-0.4 1-1v-6h6c0.6 0 1-0.4 1-1s-0.4-1-1-1z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E");
background-size: cover;
display: inline-block;
width: 50rpx;
height: 50rpx;
position: absolute;
bottom: 50rpx;
left:50%;
transform: translateX(-50%);
}
.icon-size{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E %3Ctitle%3Eformat-font-size%3C/title%3E %3Cpath d='M16 9v8h-2v-8h-4v-2h10v2h-4zM8 5v12h-2v-12h-6v-2h15v2h-7z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E ");
background-size: cover;
display: inline-block;
width: 50rpx;
height: 50rpx;
position: absolute;
bottom: 50rpx;
left:50%;
transform: translateX(-50%);
}
.icon-style{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E %3Ctitle%3Efont%3C/title%3E %3Cpath d='M24.987 0.506c-2.829 0-4.644-0.506-7.558-0.506-9.415 0-13.806 5.362-13.806 10.809 0 3.209 1.52 4.264 4.518 4.264-0.211-0.464-0.591-0.971-0.591-3.251 0-6.375 2.406-8.233 5.489-8.36 0 0-2.529 24.793-9.868 27.767v0.771h9.894l3.376-16h6.183l1.377-4h-6.716l1.623-7.693c1.858 0.38 3.673 0.76 5.235 0.76 1.942 0 3.715-0.591 4.686-5.066-1.182 0.38-2.449 0.506-3.842 0.506z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E");
background-size: cover;
display: inline-block;
width: 45rpx;
height: 45rpx;
position: absolute;
bottom: 50rpx;
left:50%;
transform: translateX(-50%);
}
/* 添加文字 */
.active-text{
position:absolute;
border: 4rpx solid rgba(180,180,180,0.8);
border-radius: 20rpx;
background-color: rgba(255,255,255,0.6);
color: '#000000';
font-size: 18;
font-style: 'normal';
font-weight: 'normal';
}
.compete-text{
border: 4rpx solid transparent;
position:absolute;
}
.confirm-bar1{
position:absolute;
top:20rpx;
left:40rpx;
width:60rpx;
height:60rpx;
z-index: 5;
background-color: #eee;
opacity: 0.7;
border-radius: 10rpx;
}
.confirm-bar2{
position:absolute;
top:20rpx;
right:40rpx;
width:60rpx;
height:60rpx;
z-index: 5;
background-color: #eee;
opacity: 0.7;
border-radius: 10rpx;
}
.confirm-bar1 .icon-cross{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Ex%3C/title%3E %3Cpath d='M13.4 12l5.3-5.3c0.4-0.4 0.4-1 0-1.4s-1-0.4-1.4 0l-5.3 5.3-5.3-5.3c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l5.3-5.3 5.3 5.3c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4l-5.3-5.3z'%3E%3C/path%3E %3C/svg%3E");
background-size: cover;
display: block;
width: 50rpx;
height: 50rpx;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
.confirm-bar2 .icon-checkmark{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Echeck%3C/title%3E %3Cpath d='M20.7 5.3c-0.4-0.4-1-0.4-1.4 0l-10.3 10.3-4.3-4.3c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5 5c0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l11-11c0.4-0.4 0.4-1 0-1.4z'%3E%3C/path%3E %3C/svg%3E");
background-size: cover;
display: block;
width: 50rpx;
height: 50rpx;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
.confirm-bar1:active .icon-cross{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Ex%3C/title%3E %3Cpath d='M13.4 12l5.3-5.3c0.4-0.4 0.4-1 0-1.4s-1-0.4-1.4 0l-5.3 5.3-5.3-5.3c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l5.3-5.3 5.3 5.3c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4l-5.3-5.3z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E");
}
.confirm-bar2:active .icon-checkmark{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Echeck%3C/title%3E %3Cpath d='M20.7 5.3c-0.4-0.4-1-0.4-1.4 0l-10.3 10.3-4.3-4.3c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5 5c0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l11-11c0.4-0.4 0.4-1 0-1.4z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E");
}
.container{
padding: 0;
}
.installForm{
width: 100%;
height: 100%;
}
.address{
width: 100%;
margin: 0rpx 10rpx 0rpx 10rpx;
border-radius: 5px;
box-shadow: 5px 5px 5px #ccc;
position:fixed;
top:0;
}
.selectAddress{
width: 100%;
height: 80rpx;
background: #fff;
border-bottom: 1px solid #F2F2F2;
}
.address_province{
width: 33%;
height: 80rpx;
line-height: 80rpx;
font-size: 28rpx;
background: #fff;
float:left;
text-align: center;
}
.address_city{
width: 50%;
height: 80rpx;
line-height: 80rpx;
font-size: 28rpx;
background: #fff;
float:left;
text-align: center;
}
.address_number{
width: 100%;
height: 80rpx;
line-height: 80rpx;
font-size: 28rpx;
background: #fff;
float:left;
text-align: center;
}
.selecrtImg{
float:right;
margin-top: 10rpx;
}
.installTable{
width: 94%;
height: 200rpx;
background: #fff;
margin: 50rpx 0 0 3%;
box-shadow: 0px 2px 5px #ccc;
}
.devEui{
width: 100%;
height: 100rpx;
border-bottom: 1px solid #F2F2F2;
}
.devText{
width: 20%;
height: 102rpx;
line-height: 100rpx;
font-size: 28rpx;
padding-left: 10rpx;
float:left;
}
.devCode{
width: 65%;
height: 100rpx;
line-height: 100rpx;
font-size: 28rpx;
color: #ccc;
float:left;
}
.codeImg{
float:right;
margin: 26rpx 26rpx 0 0;
}
.status{
width: 100%;
height: 100rpx;
}
.status_btn{
width: 75%;
height: 100rpx;
line-height: 100rpx;
font-size: 28rpx;
float: left;
}
/* 绑定成功 */
.status_success{
padding: 5rpx 20rpx;
line-height: 60rpx;
margin-top: 15rpx;
background: #17D436;
border-radius: 20px;
color: #fff;
float: left;
}
/* 待绑定 */
.status_waiting{
padding: 5rpx 20rpx;
line-height: 60rpx;
margin-top: 15rpx;
background: #BCBCBC;
border-radius: 20px;
color: #fff;
float: left;
}
/* 绑定中.. */
.status_ing{
padding: 5rpx 20rpx;
line-height: 60rpx;
margin-top: 15rpx;
background: #FFB14B;
border-radius: 20px;
color: #fff;
float: left;
}
/* 绑定失败 */
.status_fail{
padding: 5rpx 20rpx;
line-height: 60rpx;
margin-top: 15rpx;
background: #FF5C5C;
border-radius: 20px;
color: #fff;
float: left;
}
.sure{
width: 94%;
height: 80rpx;
line-height: 80rpx;
margin: 50rpx 0 0 3%;
}
.sureBtn{
width: 100%;
background: #2B9CED;
font-size: 28rpx;
color: #fff;
box-shadow: 0px 2px 5px #ccc;
}
.message-input {
position: fixed;
bottom: 0;
width: 100%;
background-color: #efefef;
padding: 20rpx 0 0;
z-index: 99;
}
.message-input>input {
font-size: 30rpx;
border: solid #ddd 1rpx;
width: 71%;
min-height: 60rpx;
height: 100%;
margin-left: 20rpx;
padding: 5rpx 10rpx;
border-radius: 8rpx;
margin-bottom: 15rpx;
color: #333;
background-color: #fff;
}
.showSend{
width:65% !important;
}
.message-input>button {
width: 100rpx;
height: 60rpx;
background-color: #7dca4a;
font-size: 28rpx;
color: #fff;
margin-top: -82rpx;
float: right;
margin-right: 20rpx;
padding: 0;
line-height: 60rpx;
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论