151 changed files with 4681 additions and 1126 deletions
@ -0,0 +1,48 @@
|
||||
# 使用说明 |
||||
|
||||
## Hbuilderx |
||||
|
||||
- 已支持HBuilderX最新版 |
||||
|
||||
## 小程序安装步骤 |
||||
- 先从私服上clone下来项目 |
||||
- 下载uni的开发者工具 https://www.dcloud.io/hbuilderx.html |
||||
- 登录微信开发者工具打开 菜单 > 设置 > 安全设置 勾选服务端口为开启 |
||||
- 当前项目下执行 npm install |
||||
- 命令行进入项目所在的目录，点击 hbuilderx > 菜单 > 运行 > 运行到小程序模拟器 > 微信开发者工具 |
||||
- uni会自动打开微信开发者工具并且打开uni的项目 |
||||
|
||||
## 注意事项 |
||||
- uniapp v3.1版本已经兼容h5，另外yshop有自己的H5，uniappv3.1以下版本未对H5端进行处理，如果需要请自行兼容。 |
||||
- manifest.json 中可以配置uni项目的一些信息 |
||||
- 打开manifest.json可配置小程序的 appid |
||||
- 由于需要兼容app，公共样式由 main.js 迁移到了 App.vue，公共样式请在App.vue中进行编辑 |
||||
- 由于需要兼容app，尺寸单位由之前的rem改为rpx，由于修改样式工作量太大并且容易出错，已将.css更改为.less并在其中以之前rem的单位*100，获得新的rpx单位 |
||||
- 如需修改样式问题，请编辑.less的文件，请勿编辑.css的文件 |
||||
|
||||
|
||||
## git issuse 地址 |
||||
|
||||
https://gitee.com/guchengwuyue/yshopmall |
||||
|
||||
### 请按照以下模板提交 issuse |
||||
标题： |
||||
H5/uni/后端代码/后台管理系统+简单描述 |
||||
|
||||
问题端： |
||||
H5/uni/后端代码/后台管理系统 |
||||
|
||||
代码版本： |
||||
v3.0 |
||||
|
||||
代码运行环境： |
||||
windows/macOS/Linux |
||||
|
||||
问题描述： |
||||
Ps:如果是uni出现问题，请具体描述是运行那个端小程序/android/ios |
||||
|
||||
## 声明 |
||||
- app测试版已上，请通过 `https://www.pgyer.com/yRYf` 安装测试。 |
||||
- 运行app项目ios需要安装xcode，安卓需要装安卓的sdk以及安卓模拟器，建议安卓安装genymotion https://www.genymotion.com/ 登录时可选择私人使用，勾选后无需付费 |
||||
|
||||
|
||||
@ -0,0 +1,786 @@
|
||||
<template> |
||||
<view v-show="show" class="t-wrapper" @touchmove.stop.prevent="moveHandle"> |
||||
<view class="t-mask" :class="{active:active}" @click.stop="close"></view> |
||||
<view class="t-box" :class="{active:active}"> |
||||
<view class="t-header"> |
||||
<view class="t-header-button" @click="close">取消</view> |
||||
<view class="t-header-button" @click="confirm">确认</view> |
||||
</view> |
||||
<view class="t-color__box" :style="{ background: 'rgb(' + bgcolor.r + ',' + bgcolor.g + ',' + bgcolor.b + ')'}"> |
||||
<view class="t-background boxs" @touchstart="touchstart($event, 0)" @touchmove="touchmove($event, 0)" @touchend="touchend($event, 0)"> |
||||
<view class="t-color-mask"></view> |
||||
<view class="t-pointer" :style="{ top: site[0].top - 8 + 'px', left: site[0].left - 8 + 'px' }"></view> |
||||
</view> |
||||
</view> |
||||
<view class="t-control__box"> |
||||
<view class="t-control__color"> |
||||
<view class="t-control__color-content" :style="{ background: 'rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + rgba.a + ')' }"></view> |
||||
</view> |
||||
<view class="t-control-box__item"> |
||||
<view class="t-controller boxs" @touchstart="touchstart($event, 1)" @touchmove="touchmove($event, 1)" @touchend="touchend($event, 1)"> |
||||
<view class="t-hue"> |
||||
<view class="t-circle" :style="{ left: site[1].left - 12 + 'px' }"></view> |
||||
</view> |
||||
</view> |
||||
<view class="t-controller boxs" @touchstart="touchstart($event, 2)" @touchmove="touchmove($event, 2)" @touchend="touchend($event, 2)"> |
||||
<view class="t-transparency"> |
||||
<view class="t-circle" :style="{ left: site[2].left - 12 + 'px' }"></view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="t-result__box"> |
||||
<view v-if="mode" class="t-result__item"> |
||||
<view class="t-result__box-input">{{hex}}</view> |
||||
<view class="t-result__box-text">HEX</view> |
||||
</view> |
||||
<template v-else> |
||||
<view class="t-result__item"> |
||||
<view class="t-result__box-input">{{rgba.r}}</view> |
||||
<view class="t-result__box-text">R</view> |
||||
</view> |
||||
<view class="t-result__item"> |
||||
<view class="t-result__box-input">{{rgba.g}}</view> |
||||
<view class="t-result__box-text">G</view> |
||||
</view> |
||||
<view class="t-result__item"> |
||||
<view class="t-result__box-input">{{rgba.b}}</view> |
||||
<view class="t-result__box-text">B</view> |
||||
</view> |
||||
<view class="t-result__item"> |
||||
<view class="t-result__box-input">{{rgba.a}}</view> |
||||
<view class="t-result__box-text">A</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<view class="t-result__item t-select" @click="select"> |
||||
<view class="t-result__box-input"> |
||||
<view>切换</view> |
||||
<view>模式</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="t-alternative"> |
||||
<view class="t-alternative__item" v-for="(item,index) in colorList" :key="index"> |
||||
<view class="t-alternative__item-content" :style="{ background: 'rgba(' + item.r + ',' + item.g + ',' + item.b + ',' + item.a + ')' }" |
||||
@click="selectColor(item)"> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
color: { |
||||
type: Object, |
||||
default () { |
||||
return { |
||||
r: 0, |
||||
g: 0, |
||||
b: 0, |
||||
a: 0 |
||||
} |
||||
} |
||||
}, |
||||
spareColor: { |
||||
type: Array, |
||||
default () { |
||||
return [] |
||||
} |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
show: false, |
||||
active: false, |
||||
// rgba 颜色 |
||||
rgba: { |
||||
r: 0, |
||||
g: 0, |
||||
b: 0, |
||||
a: 1 |
||||
}, |
||||
// hsb 颜色 |
||||
hsb: { |
||||
h: 0, |
||||
s: 0, |
||||
b: 0 |
||||
}, |
||||
site: [{ |
||||
top: 0, |
||||
left: 0 |
||||
}, { |
||||
left: 0 |
||||
}, { |
||||
left: 0 |
||||
}], |
||||
index: 0, |
||||
bgcolor: { |
||||
r: 255, |
||||
g: 0, |
||||
b: 0, |
||||
a: 1 |
||||
}, |
||||
hex: '#000000', |
||||
mode: true, |
||||
colorList: [{ |
||||
r: 244, |
||||
g: 67, |
||||
b: 54, |
||||
a: 1 |
||||
}, { |
||||
r: 233, |
||||
g: 30, |
||||
b: 99, |
||||
a: 1 |
||||
}, { |
||||
r: 156, |
||||
g: 39, |
||||
b: 176, |
||||
a: 1 |
||||
}, { |
||||
r: 103, |
||||
g: 58, |
||||
b: 183, |
||||
a: 1 |
||||
}, { |
||||
r: 63, |
||||
g: 81, |
||||
b: 181, |
||||
a: 1 |
||||
}, { |
||||
r: 33, |
||||
g: 150, |
||||
b: 243, |
||||
a: 1 |
||||
}, { |
||||
r: 3, |
||||
g: 169, |
||||
b: 244, |
||||
a: 1 |
||||
}, { |
||||
r: 0, |
||||
g: 188, |
||||
b: 212, |
||||
a: 1 |
||||
}, { |
||||
r: 0, |
||||
g: 150, |
||||
b: 136, |
||||
a: 1 |
||||
}, { |
||||
r: 76, |
||||
g: 175, |
||||
b: 80, |
||||
a: 1 |
||||
}, { |
||||
r: 139, |
||||
g: 195, |
||||
b: 74, |
||||
a: 1 |
||||
}, { |
||||
r: 205, |
||||
g: 220, |
||||
b: 57, |
||||
a: 1 |
||||
}, { |
||||
r: 255, |
||||
g: 235, |
||||
b: 59, |
||||
a: 1 |
||||
}, { |
||||
r: 255, |
||||
g: 193, |
||||
b: 7, |
||||
a: 1 |
||||
}, { |
||||
r: 255, |
||||
g: 152, |
||||
b: 0, |
||||
a: 1 |
||||
}, { |
||||
r: 255, |
||||
g: 87, |
||||
b: 34, |
||||
a: 1 |
||||
}, { |
||||
r: 121, |
||||
g: 85, |
||||
b: 72, |
||||
a: 1 |
||||
}, { |
||||
r: 158, |
||||
g: 158, |
||||
b: 158, |
||||
a: 1 |
||||
}, { |
||||
r: 0, |
||||
g: 0, |
||||
b: 0, |
||||
a: 0.5 |
||||
}, { |
||||
r: 0, |
||||
g: 0, |
||||
b: 0, |
||||
a: 0 |
||||
}, ] |
||||
}; |
||||
}, |
||||
created() { |
||||
this.rgba = this.color; |
||||
if (this.spareColor.length !== 0) { |
||||
this.colorList = this.spareColor; |
||||
} |
||||
}, |
||||
methods: { |
||||
/** |
||||
* 初始化 |
||||
*/ |
||||
init() { |
||||
// hsb 颜色 |
||||
this.hsb = this.rgbToHex(this.rgba); |
||||
// this.setColor(); |
||||
this.setValue(this.rgba); |
||||
}, |
||||
moveHandle() {}, |
||||
open() { |
||||
uni.hideKeyboard(); |
||||
this.show = true; |
||||
this.$nextTick(() => { |
||||
this.init(); |
||||
setTimeout(() => { |
||||
this.active = true; |
||||
setTimeout(() => { |
||||
this.getSelectorQuery(); |
||||
}, 350) |
||||
}, 50) |
||||
}) |
||||
|
||||
}, |
||||
close() { |
||||
this.active = false; |
||||
this.$nextTick(() => { |
||||
setTimeout(() => { |
||||
this.show = false; |
||||
}, 500) |
||||
}); |
||||
this.$emit('cancel', {}); |
||||
}, |
||||
confirm() { |
||||
this.close(); |
||||
this.$emit('confirm', { |
||||
rgba: this.rgba, |
||||
hex: this.hex |
||||
}); |
||||
}, |
||||
// 选择模式 |
||||
select() { |
||||
this.mode = !this.mode |
||||
}, |
||||
// 常用颜色选择 |
||||
selectColor(item) { |
||||
this.setColorBySelect(item) |
||||
}, |
||||
touchstart(e, index) { |
||||
const { |
||||
pageX, |
||||
pageY |
||||
} = e.touches[0]; |
||||
this.pageX = pageX; |
||||
this.pageY = pageY; |
||||
this.setPosition(pageX, pageY, index); |
||||
}, |
||||
touchmove(e, index) { |
||||
const { |
||||
pageX, |
||||
pageY |
||||
} = e.touches[0]; |
||||
this.moveX = pageX; |
||||
this.moveY = pageY; |
||||
this.setPosition(pageX, pageY, index); |
||||
}, |
||||
touchend(e, index) {}, |
||||
/** |
||||
* 设置位置 |
||||
*/ |
||||
setPosition(x, y, index) { |
||||
this.index = index; |
||||
const { |
||||
top, |
||||
left, |
||||
width, |
||||
height |
||||
} = this.position[index]; |
||||
// 设置最大最小值 |
||||
|
||||
this.site[index].left = Math.max(0, Math.min(parseInt(x - left), width)); |
||||
if (index === 0) { |
||||
this.site[index].top = Math.max(0, Math.min(parseInt(y - top), height)); |
||||
// 设置颜色 |
||||
this.hsb.s = parseInt((100 * this.site[index].left) / width); |
||||
this.hsb.b = parseInt(100 - (100 * this.site[index].top) / height); |
||||
this.setColor(); |
||||
this.setValue(this.rgba); |
||||
} else { |
||||
this.setControl(index, this.site[index].left); |
||||
} |
||||
}, |
||||
/** |
||||
* 设置 rgb 颜色 |
||||
*/ |
||||
setColor() { |
||||
const rgb = this.HSBToRGB(this.hsb); |
||||
this.rgba.r = rgb.r; |
||||
this.rgba.g = rgb.g; |
||||
this.rgba.b = rgb.b; |
||||
}, |
||||
/** |
||||
* 设置二进制颜色 |
||||
* @param {Object} rgb |
||||
*/ |
||||
setValue(rgb) { |
||||
this.hex = '#' + this.rgbToHex(rgb); |
||||
}, |
||||
setControl(index, x) { |
||||
const { |
||||
top, |
||||
left, |
||||
width, |
||||
height |
||||
} = this.position[index]; |
||||
|
||||
if (index === 1) { |
||||
this.hsb.h = parseInt((360 * x) / width); |
||||
this.bgcolor = this.HSBToRGB({ |
||||
h: this.hsb.h, |
||||
s: 100, |
||||
b: 100 |
||||
}); |
||||
this.setColor() |
||||
} else { |
||||
this.rgba.a = (x / width).toFixed(1); |
||||
} |
||||
this.setValue(this.rgba); |
||||
}, |
||||
/** |
||||
* rgb 转 二进制 hex |
||||
* @param {Object} rgb |
||||
*/ |
||||
rgbToHex(rgb) { |
||||
let hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)]; |
||||
hex.map(function(str, i) { |
||||
if (str.length == 1) { |
||||
hex[i] = '0' + str; |
||||
} |
||||
}); |
||||
return hex.join(''); |
||||
}, |
||||
setColorBySelect(getrgb) { |
||||
const { |
||||
r, |
||||
g, |
||||
b, |
||||
a |
||||
} = getrgb; |
||||
let rgb = {} |
||||
rgb = { |
||||
r: r ? parseInt(r) : 0, |
||||
g: g ? parseInt(g) : 0, |
||||
b: b ? parseInt(b) : 0, |
||||
a: a ? a : 0, |
||||
}; |
||||
this.rgba = rgb; |
||||
this.hsb = this.rgbToHsb(rgb); |
||||
this.changeViewByHsb(); |
||||
}, |
||||
changeViewByHsb() { |
||||
const [a, b, c] = this.position; |
||||
this.site[0].left = parseInt(this.hsb.s * a.width / 100); |
||||
this.site[0].top = parseInt((100 - this.hsb.b) * a.height / 100); |
||||
this.setColor(this.hsb.h); |
||||
this.setValue(this.rgba); |
||||
this.bgcolor = this.HSBToRGB({ |
||||
h: this.hsb.h, |
||||
s: 100, |
||||
b: 100 |
||||
}); |
||||
|
||||
this.site[1].left = this.hsb.h / 360 * b.width; |
||||
this.site[2].left = this.rgba.a * c.width; |
||||
|
||||
}, |
||||
/** |
||||
* hsb 转 rgb |
||||
* @param {Object} 颜色模式 H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度 |
||||
*/ |
||||
HSBToRGB(hsb) { |
||||
let rgb = {}; |
||||
let h = Math.round(hsb.h); |
||||
let s = Math.round((hsb.s * 255) / 100); |
||||
let v = Math.round((hsb.b * 255) / 100); |
||||
if (s == 0) { |
||||
rgb.r = rgb.g = rgb.b = v; |
||||
} else { |
||||
let t1 = v; |
||||
let t2 = ((255 - s) * v) / 255; |
||||
let t3 = ((t1 - t2) * (h % 60)) / 60; |
||||
if (h == 360) h = 0; |
||||
if (h < 60) { |
||||
rgb.r = t1; |
||||
rgb.b = t2; |
||||
rgb.g = t2 + t3; |
||||
} else if (h < 120) { |
||||
rgb.g = t1; |
||||
rgb.b = t2; |
||||
rgb.r = t1 - t3; |
||||
} else if (h < 180) { |
||||
rgb.g = t1; |
||||
rgb.r = t2; |
||||
rgb.b = t2 + t3; |
||||
} else if (h < 240) { |
||||
rgb.b = t1; |
||||
rgb.r = t2; |
||||
rgb.g = t1 - t3; |
||||
} else if (h < 300) { |
||||
rgb.b = t1; |
||||
rgb.g = t2; |
||||
rgb.r = t2 + t3; |
||||
} else if (h < 360) { |
||||
rgb.r = t1; |
||||
rgb.g = t2; |
||||
rgb.b = t1 - t3; |
||||
} else { |
||||
rgb.r = 0; |
||||
rgb.g = 0; |
||||
rgb.b = 0; |
||||
} |
||||
} |
||||
return { |
||||
r: Math.round(rgb.r), |
||||
g: Math.round(rgb.g), |
||||
b: Math.round(rgb.b) |
||||
}; |
||||
}, |
||||
rgbToHsb(rgb) { |
||||
let hsb = { |
||||
h: 0, |
||||
s: 0, |
||||
b: 0 |
||||
}; |
||||
let min = Math.min(rgb.r, rgb.g, rgb.b); |
||||
let max = Math.max(rgb.r, rgb.g, rgb.b); |
||||
let delta = max - min; |
||||
hsb.b = max; |
||||
hsb.s = max != 0 ? 255 * delta / max : 0; |
||||
if (hsb.s != 0) { |
||||
if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta; |
||||
else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta; |
||||
else hsb.h = 4 + (rgb.r - rgb.g) / delta; |
||||
} else hsb.h = -1; |
||||
hsb.h *= 60; |
||||
if (hsb.h < 0) hsb.h = 0; |
||||
hsb.s *= 100 / 255; |
||||
hsb.b *= 100 / 255; |
||||
return hsb; |
||||
}, |
||||
getSelectorQuery() { |
||||
const views = uni.createSelectorQuery().in(this); |
||||
views |
||||
.selectAll('.boxs') |
||||
.boundingClientRect(data => { |
||||
if (!data || data.length === 0) { |
||||
setTimeout(() => this.getSelectorQuery(), 20) |
||||
return |
||||
} |
||||
this.position = data; |
||||
// this.site[0].top = data[0].height; |
||||
// this.site[0].left = 0; |
||||
// this.site[1].left = data[1].width; |
||||
// this.site[2].left = data[2].width; |
||||
this.setColorBySelect(this.rgba); |
||||
}) |
||||
.exec(); |
||||
} |
||||
}, |
||||
watch: { |
||||
spareColor(newVal) { |
||||
this.colorList = newVal; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
.t-wrapper { |
||||
position: fixed; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
z-index: 9999; |
||||
} |
||||
|
||||
.t-box { |
||||
width: 100%; |
||||
position: absolute; |
||||
bottom: 0; |
||||
padding: 30upx 0; |
||||
padding-top: 0; |
||||
background: #fff; |
||||
transition: all 0.3s; |
||||
transform: translateY(100%); |
||||
} |
||||
|
||||
.t-box.active { |
||||
transform: translateY(0%); |
||||
} |
||||
|
||||
.t-header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
height: 100upx; |
||||
border-bottom: 1px #eee solid; |
||||
box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1); |
||||
background: #fff; |
||||
} |
||||
|
||||
.t-header-button { |
||||
display: flex; |
||||
align-items: center; |
||||
width: 150upx; |
||||
height: 100upx; |
||||
font-size: 30upx; |
||||
color: #666; |
||||
padding-left: 20upx; |
||||
} |
||||
|
||||
.t-header-button:last-child { |
||||
justify-content: flex-end; |
||||
padding-right: 20upx; |
||||
} |
||||
|
||||
.t-mask { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background: rgba(0, 0, 0, 0.6); |
||||
z-index: -1; |
||||
transition: all 0.3s; |
||||
opacity: 0; |
||||
} |
||||
|
||||
.t-mask.active { |
||||
opacity: 1; |
||||
} |
||||
|
||||
.t-color__box { |
||||
position: relative; |
||||
height: 400upx; |
||||
background: rgb(255, 0, 0); |
||||
overflow: hidden; |
||||
box-sizing: border-box; |
||||
margin: 0 20upx; |
||||
margin-top: 20upx; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.t-background { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); |
||||
} |
||||
|
||||
.t-color-mask { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
width: 100%; |
||||
height: 400upx; |
||||
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); |
||||
} |
||||
|
||||
.t-pointer { |
||||
position: absolute; |
||||
bottom: -8px; |
||||
left: -8px; |
||||
z-index: 2; |
||||
width: 15px; |
||||
height: 15px; |
||||
border: 1px #fff solid; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.t-show-color { |
||||
width: 100upx; |
||||
height: 50upx; |
||||
} |
||||
|
||||
.t-control__box { |
||||
margin-top: 50upx; |
||||
width: 100%; |
||||
display: flex; |
||||
padding-left: 20upx; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.t-control__color { |
||||
flex-shrink: 0; |
||||
width: 100upx; |
||||
height: 100upx; |
||||
border-radius: 50%; |
||||
background-color: #fff; |
||||
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), |
||||
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee); |
||||
background-size: 36upx 36upx; |
||||
background-position: 0 0, 18upx 18upx; |
||||
border: 1px #eee solid; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.t-control__color-content { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.t-control-box__item { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
padding: 0 30upx; |
||||
} |
||||
|
||||
.t-controller { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 16px; |
||||
background-color: #fff; |
||||
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), |
||||
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee); |
||||
background-size: 32upx 32upx; |
||||
background-position: 0 0, 16upx 16upx; |
||||
} |
||||
|
||||
.t-hue { |
||||
width: 100%; |
||||
height: 100%; |
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); |
||||
} |
||||
|
||||
.t-transparency { |
||||
width: 100%; |
||||
height: 100%; |
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0)); |
||||
} |
||||
|
||||
.t-circle { |
||||
position: absolute; |
||||
/* right: -10px; */ |
||||
top: -2px; |
||||
width: 20px; |
||||
height: 20px; |
||||
box-sizing: border-box; |
||||
border-radius: 50%; |
||||
background: #fff; |
||||
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
.t-result__box { |
||||
margin-top: 20upx; |
||||
padding: 10upx; |
||||
width: 100%; |
||||
display: flex; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.t-result__item { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 10upx; |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.t-result__box-input { |
||||
padding: 10upx 0; |
||||
width: 100%; |
||||
font-size: 28upx; |
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); |
||||
color: #999; |
||||
text-align: center; |
||||
background: #fff; |
||||
} |
||||
|
||||
.t-result__box-text { |
||||
margin-top: 10upx; |
||||
font-size: 28upx; |
||||
line-height: 2; |
||||
} |
||||
|
||||
.t-select { |
||||
flex-shrink: 0; |
||||
width: 150upx; |
||||
padding: 0 30upx; |
||||
} |
||||
|
||||
.t-select .t-result__box-input { |
||||
border-radius: 10upx; |
||||
border: none; |
||||
color: #999; |
||||
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1); |
||||
background: #fff; |
||||
} |
||||
|
||||
.t-select .t-result__box-input:active { |
||||
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
.t-alternative { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
/* justify-content: space-between; */ |
||||
width: 100%; |
||||
padding-right: 10upx; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.t-alternative__item { |
||||
margin-left: 12upx; |
||||
margin-top: 10upx; |
||||
width: 50upx; |
||||
height: 50upx; |
||||
border-radius: 10upx; |
||||
background-color: #fff; |
||||
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), |
||||
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee); |
||||
background-size: 36upx 36upx; |
||||
background-position: 0 0, 18upx 18upx; |
||||
border: 1px #eee solid; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.t-alternative__item-content { |
||||
width: 50upx; |
||||
height: 50upx; |
||||
background: rgba(255, 0, 0, 0.5); |
||||
} |
||||
|
||||
.t-alternative__item:active { |
||||
transition: all 0.3s; |
||||
transform: scale(1.1); |
||||
} |
||||
</style> |
||||
@ -1,118 +1,359 @@
|
||||
<template> |
||||
<div class="content"> |
||||
<div class='toolbar' @tap="format"> |
||||
<div :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></div> |
||||
<div :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></div> |
||||
<div :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></div> |
||||
<div :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></div> |
||||
<div :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align" |
||||
data-value="left"></div> |
||||
<div :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align" |
||||
data-value="center"></div> |
||||
|
||||
<div class="iconfont icon-fengexian" @tap="insertdivider"></div> |
||||
<div class="iconfont icon-charutupian" @tap="insertimage"></div> |
||||
</div> |
||||
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="oneditorready" @statuschange="onstatuschange"></editor> |
||||
</div> |
||||
<view class="index-box"> |
||||
<view class="add-goodsimg-box"> |
||||
<view class="img-box acea-row"> |
||||
<view class="upload-box"> |
||||
<image src="../../../static/images/upload.png"></image> |
||||
</view> |
||||
<view class="upload-box" @click="uploadImg(0)"> |
||||
<image src="../../../static/images/addimg.png" v-if="slider_image[0] == ''"></image> |
||||
<image :src="slider_image[0]" mode="aspectFill" v-else></image> |
||||
</view> |
||||
<view class="upload-box" @click="uploadImg(1)"> |
||||
<image src="../../../static/images/addimg.png" v-if="slider_image[1] == ''"></image> |
||||
<image :src="slider_image[1]" mode="aspectFill" v-else></image> |
||||
</view> |
||||
<view class="upload-box" @click="uploadImg(2)"> |
||||
<image src="../../../static/images/addimg.png" v-if="slider_image[2] == ''"></image> |
||||
<image :src="slider_image[2]" mode="aspectFill" v-else></image> |
||||
</view> |
||||
</view> |
||||
<view class="tips acea-row row-middle"> |
||||
<image src="../../../static/images/tips-icon.png"></image> |
||||
<text>最少上传一张，最多只能上传三张图片哦！</text> |
||||
</view> |
||||
</view> |
||||
<view class="goodsInfo-box"> |
||||
<view class="goodsInfo-item"> |
||||
<text>商品名称<text class="colR">*</text></text> |
||||
<input type="text" v-model="store_name" placeholder="输入商品名称" /> |
||||
</view> |
||||
<view class="goodsInfo-item"> |
||||
<text>商品单位</text> |
||||
<input type="text" v-model="unit_name" placeholder="输入商品单位" /> |
||||
</view> |
||||
<view class="goodsInfo-item"> |
||||
<text>商品详情<text class="colR">*</text></text> |
||||
<view class="toEdit acea-row row-middle" @click="toGoodsDetails"> |
||||
<text>去编辑</text> |
||||
<image src="../../../static/images/arror-r-s.png"></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="title2" @click="addSku">添加规格</view> |
||||
<view class="add-sku-box"> |
||||
<view class="sku-item" v-for="(item,index) in attrs" :key="index"> |
||||
<view class="close-btn" @click="delSku(index)">×</view> |
||||
<view class="sku img-sku acea-row row-middle row-between"> |
||||
<text>图片</text> |
||||
<image src="../../../static/images/upload.png" v-if="item.pic == ''" @tap="uploadSkuImg(index)"></image> |
||||
<image :src="item.pic" v-else @tap="uploadSkuImg(index)" mode="aspectFill"></image> |
||||
</view> |
||||
<view class="sku img-sku acea-row row-middle row-between"> |
||||
<text>价格<text class="colR">*</text></text> |
||||
<input type="text" v-model="item.price" placeholder="请输入售价(元)" /> |
||||
</view> |
||||
<view class="sku img-sku acea-row row-middle row-between"> |
||||
<text>市场价格</text> |
||||
<input type="text" v-model="item.ot_orice" placeholder="请输入市场价格(元)" /> |
||||
</view> |
||||
<view class="sku img-sku acea-row row-middle row-between"> |
||||
<text>库存<text class="colR">*</text></text> |
||||
<input type="text" v-model="item.stock" placeholder="请输入库存" /> |
||||
</view> |
||||
<view class="sku img-sku acea-row row-middle row-between"> |
||||
<text>重量</text> |
||||
<input type="text" v-model="item.weight" placeholder="请输入重量" /> |
||||
</view> |
||||
<view class="sku img-sku acea-row row-middle row-between"> |
||||
<text>体积</text> |
||||
<input type="text" v-model="item.volume" placeholder="请输入体积" /> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="temp-box acea-row row-between-wrapper"> |
||||
<text>运费模板</text> |
||||
<view class="acea-row row-middle"> |
||||
<text>全国包邮(默认)</text> |
||||
<image src="../../../static/images/arror-r-s.png"></image> |
||||
</view> |
||||
</view> |
||||
<view class="temp-box goods-state acea-row row-between-wrapper"> |
||||
<text>商品状态</text> |
||||
<view class="acea-row row-middle"> |
||||
<radio-group @change="radioChange"> |
||||
<label> |
||||
<radio :value="0" :checked="state == 0" /><text>上架</text> |
||||
</label> |
||||
<label> |
||||
<radio :value="1" :checked="state == 1" /><text>下架</text> |
||||
</label> |
||||
</radio-group> |
||||
</view> |
||||
</view> |
||||
<view class="btn-box"> |
||||
<view class="btn" @tap="submit">提交</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
import { chooseImage } from "@/utils" |
||||
import { addProduct } from '@/api/store' |
||||
export default{ |
||||
data(){ |
||||
return { |
||||
placeholder: '开始输入...' |
||||
store_name: '', |
||||
unit_name: '', |
||||
image:'', //主图 |
||||
slider_image: ['','',''] ,// 轮播图 |
||||
description: '', //商品详情富文本 |
||||
tempId: 1, //运费方案 |
||||
attrs: [ // 单规格一个，多规格多个 |
||||
{ |
||||
pic: '', //"规格图片 --可选", |
||||
price: '', //"价格 元", |
||||
ot_orice: '', //"市场价格 --可选", |
||||
stock: '', //"库存", |
||||
weight: '', //"重量 --可选", |
||||
volume: '', //"体积 --可选" |
||||
} |
||||
], |
||||
state: 0 |
||||
} |
||||
}, |
||||
methods: { |
||||
//撤销、重做这些不需要可以不写 |
||||
undo() { |
||||
this.editorCtx.undo() |
||||
}, |
||||
|
||||
redo() { |
||||
this.editorCtx.redo() |
||||
}, |
||||
|
||||
format(e) { |
||||
let { |
||||
name, |
||||
value |
||||
} = e.target.dataset |
||||
if (!name) return |
||||
// console.log('format', name, value) |
||||
this.editorCtx.format(name, value) |
||||
}, |
||||
|
||||
oneditorready() { |
||||
uni.createSelectorQuery().select('#editor').context((res) => { |
||||
this.editorCtx = res.context |
||||
}).exec() |
||||
}, |
||||
|
||||
insertImage() { |
||||
var that = this; |
||||
uni.chooseImage({ |
||||
sizeType: ['original', 'compressed'], |
||||
sourceType: ['album', 'camera'], |
||||
success(res) { |
||||
console.log(res.tempFilePaths[0]) |
||||
uni.uploadFile({ |
||||
url: 'http://0.0.0.0/file/upload-img', //域名+上传文件的请求接口 (根据你实际的接口来) |
||||
filePath: res.tempFilePaths[0], // tempFilePath可以作为img标签的src属性显示图片 服务器图片的路径 |
||||
name: 'img', //上传到服务器的参数，自定义 |
||||
header: { |
||||
"Content-Type": "multipart/form-data" |
||||
}, |
||||
success(res) { |
||||
var data = JSON.parse(res.data) |
||||
that.editorCtx.insertImage({ |
||||
width: '100%', //设置宽度为100%防止宽度溢出手机屏幕 |
||||
height: 'auto', |
||||
src: data.url, //服务端返回的url |
||||
alt: '图像', |
||||
success: function() { |
||||
console.log('insert image success') |
||||
} |
||||
}) |
||||
console.log(that.editorCtx) |
||||
} |
||||
}) |
||||
methods:{ |
||||
uploadImg(idx){ |
||||
chooseImage((img)=>{ |
||||
this.$set(this.slider_image,idx,img) |
||||
}) |
||||
}, |
||||
uploadSkuImg(idx){ |
||||
chooseImage((img)=>{ |
||||
this.$set(this.attrs,idx,{pic: img}) |
||||
}) |
||||
}, |
||||
toGoodsDetails(){ |
||||
uni.navigateTo({ |
||||
url: '/pages/life/goodsDetails/index' |
||||
}); |
||||
}, |
||||
addSku(){ |
||||
let item = { |
||||
pic: '', //"规格图片 --可选", |
||||
price: '', //"价格 元", |
||||
ot_orice: '', //"市场价格 --可选", |
||||
stock: '', //"库存", |
||||
weight: '', //"重量 --可选", |
||||
volume: '', //"体积 --可选" |
||||
} |
||||
this.attrs.push(item) |
||||
}, |
||||
delSku(idx){ |
||||
this.attrs.splice(idx,1) |
||||
}, |
||||
radioChange(e){ |
||||
console.log(e) |
||||
this.state = e.detail.value |
||||
}, |
||||
submit(){ |
||||
let form = { |
||||
store_name: this.store_name, |
||||
unit_name: this.unit_name, |
||||
image: this.slider_image[0], //主图 |
||||
slider_image: this.slider_image , // 轮播图 |
||||
description: this.description, //商品详情富文本 |
||||
tempId: 1, //运费方案 |
||||
attrs: this.attrs, |
||||
state: this.state, |
||||
spec_type: this.attrs.length > 1 ? 1 : 0 //单规格，多规格 |
||||
} |
||||
if(form.store_name == ''){ |
||||
this.alertMessage('请填写商品名称') |
||||
return |
||||
} else if(form.slider_image[0] == ''){ |
||||
this.alertMessage('请至少上传一张商品图片') |
||||
return |
||||
} else if(form.description == ''){ |
||||
this.alertMessage('请填写商品详情') |
||||
return |
||||
} else if(form.description == ''){ |
||||
this.alertMessage('请填写商品详情') |
||||
return |
||||
} |
||||
form.attrs.forEach((item,index)=>{ |
||||
if(item.price == ''){ |
||||
this.alertMessage('请商品规格价格') |
||||
return |
||||
} else if(item.stock == ''){ |
||||
this.alertMessage('请商品规格库存') |
||||
return |
||||
} |
||||
}) |
||||
addProduct(form).then((res)=>{ |
||||
|
||||
}) |
||||
console.log(form,'form') |
||||
}, |
||||
alertMessage(msg){ |
||||
uni.showToast({ |
||||
title: msg, |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.ql-container { |
||||
box-sizing: border-box; |
||||
padding: 12px 15px; |
||||
<style lang="less"> |
||||
.index-box{ |
||||
width: 100%; |
||||
min-height: 30vh; |
||||
height: auto; |
||||
background: #fff; |
||||
font-size: 16px; |
||||
line-height: 1.5; |
||||
} |
||||
|
||||
.ql-active { |
||||
color: #06c; |
||||
} |
||||
|
||||
.iconfont { |
||||
display: inline-block; |
||||
padding: 8px 8px; |
||||
width: 24px; |
||||
height: 24px; |
||||
cursor: pointer; |
||||
font-size: 20px; |
||||
} |
||||
min-height: 100vh; |
||||
background: #F5F6F7; |
||||
padding: 20rpx 40rpx 110rpx; |
||||
position: relative; |
||||
.add-goodsimg-box{ |
||||
width: 100%; |
||||
padding: 24rpx; |
||||
background: #fff; |
||||
border-radius: 8rpx; |
||||
.upload-box{ |
||||
width: 140rpx; |
||||
height: 140rpx; |
||||
margin-right: 20rpx; |
||||
border-radius: 8rpx; |
||||
&:nth-last-child(1){ |
||||
margin-right: 0; |
||||
} |
||||
image{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.tips{ |
||||
color: #FF0707; |
||||
font-size: 20rpx; |
||||
margin-top: 16rpx; |
||||
image{ |
||||
width: 18rpx; |
||||
height: 18rpx; |
||||
margin-right: 8rpx; |
||||
} |
||||
} |
||||
} |
||||
.goodsInfo-box{ |
||||
width: 100%; |
||||
background: #fff; |
||||
border-radius: 8rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
margin-top: 40rpx; |
||||
.goodsInfo-item{ |
||||
width: 100%; |
||||
height: 116rpx; |
||||
padding: 0 32rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
border-bottom: 2rpx solid #EEEEEE; |
||||
&:nth-last-child(1){ |
||||
border: none; |
||||
} |
||||
input{ |
||||
text-align: right; |
||||
} |
||||
.toEdit{ |
||||
image{ |
||||
width: 24rpx; |
||||
height: 24rpx; |
||||
margin-left: 6rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.title2{ |
||||
width: 100%; |
||||
height: 76rpx; |
||||
line-height: 76rpx; |
||||
border: 2rpx solid #B8B8B8; |
||||
background: #fff; |
||||
border-radius: 8rpx; |
||||
font-size: 28rpx; |
||||
text-align: center; |
||||
margin: 24rpx auto; |
||||
} |
||||
.add-sku-box{ |
||||
width: 100%; |
||||
border-radius: 8rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
image{ |
||||
width: 110rpx; |
||||
height: 110rpx; |
||||
} |
||||
.sku-item{ |
||||
padding: 32rpx 0; |
||||
background: #fff; |
||||
margin-bottom: 12rpx; |
||||
position: relative; |
||||
.close-btn{ |
||||
color: #fff; |
||||
font-size: 38rpx; |
||||
position: absolute; |
||||
right: -16rpx; |
||||
top: -22rpx; |
||||
border-radius: 50%; |
||||
line-height: 40rpx; |
||||
width: 46rpx; |
||||
height: 46rpx; |
||||
text-align: center; |
||||
background: #FF5E16; |
||||
border-radius: 50%; |
||||
} |
||||
.sku{ |
||||
padding: 0 32rpx; |
||||
width: 100%; |
||||
min-height: 86rpx; |
||||
border-bottom: 2rpx solid #EEEEEE; |
||||
} |
||||
|
||||
.toolbar { |
||||
box-sizing: border-box; |
||||
border-bottom: 0; |
||||
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; |
||||
input{ |
||||
text-align: right; |
||||
} |
||||
} |
||||
} |
||||
.temp-box{ |
||||
width: 100%; |
||||
background: #fff; |
||||
border-radius: 8rpx; |
||||
padding: 32rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
image{ |
||||
width: 24rpx; |
||||
height: 24rpx; |
||||
margin-left: 6rpx; |
||||
} |
||||
} |
||||
label{ |
||||
margin-left: 16rpx; |
||||
} |
||||
.btn-box{ |
||||
.btn{ |
||||
width: 230rpx; |
||||
height: 80rpx; |
||||
background: linear-gradient(134deg, #FFA782 0%, #FF6D31 100%); |
||||
text-align: center; |
||||
line-height: 80rpx; |
||||
font-size: 38rpx; |
||||
font-weight: 500; |
||||
border-radius: 40rpx; |
||||
color: #fff; |
||||
margin: 32rpx auto; |
||||
} |
||||
} |
||||
.colR{ |
||||
color: #FF0000; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,48 @@
|
||||
@import "./assets/iconfont.css"; |
||||
|
||||
.container { |
||||
position: relative; |
||||
top: 80px; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 80%; |
||||
border: 2rpx solid #ccc |
||||
} |
||||
|
||||
.ql-container { |
||||
box-sizing: border-box; |
||||
width: 100%; |
||||
height: 100%; |
||||
font-size: 16px; |
||||
line-height: 1.5; |
||||
overflow: auto; |
||||
padding: 20px 10px 20px 10px; |
||||
} |
||||
|
||||
.ql-active { |
||||
color: #22C704; |
||||
} |
||||
|
||||
.iconfont { |
||||
display: inline-block; |
||||
width: 32px; |
||||
height: 30px; |
||||
cursor: pointer; |
||||
font-size: 20px; |
||||
} |
||||
|
||||
.toolbar { |
||||
box-sizing: border-box; |
||||
padding: 10px; |
||||
height: 86px; |
||||
width: 100%; |
||||
position: fixed; |
||||
left: 0; |
||||
top: 0; |
||||
background: #fff; |
||||
right: 100%; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
text-align: center; |
||||
border-bottom: 1rpx solid #eee; |
||||
} |
||||
@ -0,0 +1,257 @@
|
||||
<template> |
||||
<view class="index-box"> |
||||
<!-- |
||||
更多api，请前往：https://developers.weixin.qq.com/miniprogram/dev/api/media/editor/EditorContext.html |
||||
字体图标，微信小程序官方的确没有给出名称 |
||||
--> |
||||
<view class="container"> |
||||
<editor id="editor" show-img-size :read-only="isEdit" show-img-resize show-img-toolbar class="ql-container" |
||||
:placeholder="placeholder" @statuschange="onStatusChange" @ready="onEditorReady"> |
||||
</editor> |
||||
</view> |
||||
|
||||
<view class="toolbar" @touchend.stop="format" :style="'bottom: ' + (isIOS ? keyboardHeight : 0) + 'px'"> |
||||
<i class="iconfont icon-charutupian" @touchend.stop="insertImage"></i> |
||||
<i :class="'iconfont icon-format-header-1 ' + (formats.header === 1 ? 'ql-active' : '')" data-name="header" |
||||
:data-value="1"></i> |
||||
<i :class="'iconfont icon-format-header-2 ' + (formats.header === 2 ? 'ql-active' : '')" data-name="header" |
||||
:data-value="2"></i> |
||||
<i :class="'iconfont icon-format-header-3 ' + (formats.header === 3 ? 'ql-active' : '')" data-name="header" |
||||
:data-value="3"></i> |
||||
<!-- <i :class="'iconfont icon-format-header-4 ' + (formats.header === 4 ? 'ql-active' : '')" data-name="header" :data-value="4"></i> --> |
||||
<!-- <i :class="'iconfont icon-format-header-5 ' + (formats.header === 5 ? 'ql-active' : '')" data-name="header" :data-value="5"></i> --> |
||||
<!-- <i :class="'iconfont icon-format-header-6 ' + (formats.header === 6 ? 'ql-active' : '')" data-name="header" :data-value="6"></i>--> |
||||
<i :class="'iconfont icon-zitijiacu ' + (formats.bold ? 'ql-active' : '')" data-name="bold"></i> |
||||
<i :class="'iconfont icon-zitishanchuxian ' + (formats.strike ? 'ql-active' : '')" data-name="strike"></i> |
||||
<i :class="'iconfont icon-zitixieti ' + (formats.italic ? 'ql-active' : '')" data-name="italic"></i> |
||||
<i :class="'iconfont icon-zuoduiqi ' + (formats.align === 'left' ? 'ql-active' : '')" data-name="align" data-value="left"></i> |
||||
<i :class="'iconfont icon-juzhongduiqi ' + (formats.align === 'center' ? 'ql-active' : '')" data-name="align" |
||||
data-value="center"></i> |
||||
<i :class="'iconfont icon-youduiqi ' + (formats.align === 'right' ? 'ql-active' : '')" data-name="align" data-value="right"></i> |
||||
<i :class="'iconfont icon-zuoyouduiqi ' + (formats.align === 'justify' ? 'ql-active' : '')" data-name="align" |
||||
data-value="justify"></i> |
||||
<i :class="'iconfont icon-line-height ' + (formats.lineHeight ? 'ql-active' : '')" data-name="lineHeight" data-value="2"></i> |
||||
<!-- <i :class="'iconfont icon-Character-Spacing ' + (formats.letterSpacing ? 'ql-active' : '')" data-name="letterSpacing" |
||||
data-value="2em"></i> |
||||
<i :class="'iconfont icon-722bianjiqi_duanqianju ' + (formats.marginTop ? 'ql-active' : '')" data-name="marginTop" |
||||
data-value="20px"></i> |
||||
<i :class="'iconfont icon-723bianjiqi_duanhouju ' + (formats.micon-previewarginBottom ? 'ql-active' : '')" data-name="marginBottom" |
||||
data-value="20px"></i> --> |
||||
<i class="iconfont icon-clearedformat" @tap="removeFormat"></i> |
||||
<i :class="'iconfont icon-font ' + (formats.fontFamily ? 'ql-active' : '')" data-name="fontFamily" data-value="Pacifico"></i> |
||||
<i :class="'iconfont icon-fontsize ' + (formats.fontSize === '24px' ? 'ql-active' : '')" data-name="fontSize" |
||||
data-value="24px"></i> |
||||
<i :class="'iconfont icon-text_color ' + (formats.color === fontColor ? 'ql-active' : '')" data-name="color" |
||||
:data-value="fontColor" @tap="open"></i> |
||||
<i :class="'iconfont icon-fontbgcolor ' + (formats.backgroundColor === '#00ff00' ? 'ql-active' : '')" data-name="backgroundColor" |
||||
data-value="#00ff00"></i> |
||||
<!-- 引用黄河浪的color取色器 --> |
||||
<i class="iconfont icon-date" @tap="insertDate"></i> |
||||
<!-- <i class="iconfont icon-undo" @tap="undo"></i> --> |
||||
<!-- <i class="iconfont icon-redo" @tap="redo"></i> --> |
||||
<!-- <i :class="'iconfont icon-zitixiahuaxian ' + (formats.underline ? 'ql-active' : '')" data-name="underline"></i> --> |
||||
<!-- <i class="iconfont icon--checklist" data-name="list" data-value="check"></i> --> |
||||
<!-- <i :class="'iconfont icon-youxupailie ' + (formats.list === 'ordered' ? 'ql-active' : '')" data-name="list" data-value="ordered"></i> --> |
||||
<!-- <i :class="'iconfont icon-wuxupailie ' + (formats.list === 'bullet' ? 'ql-active' : '')" data-name="list" data-value="bullet"></i> --> |
||||
<!-- <i class="iconfont icon-outdent" data-name="indent" data-value="-1"></i> --> |
||||
<!-- <i class="iconfont icon-indent" data-name="indent" data-value="+1"></i> --> |
||||
<!-- <i class="iconfont icon-fengexian" @tap="insertDivider"></i> --> |
||||
<!-- <i class="iconfont icon-preview" @tap="store" id="2"></i> --> |
||||
<!-- <i :class="'iconfont icon-zitixiabiao ' + (formats.script === 'sub' ? 'ql-active' : '')" data-name="script" |
||||
data-value="sub"></i> --> |
||||
<!-- <i :class="'iconfont icon-zitishangbiao ' + (formats.script === 'super' ? 'ql-active' : '')" data-name="script" |
||||
data-value="super"></i> --> |
||||
<!-- <i class="iconfont icon-quanping"></i> --> |
||||
<!-- <i class="iconfont icon-shanchu" @tap="clear"></i> --> |
||||
<!-- <i :class="'iconfont icon-direction-rtl ' + (formats.direction === 'rtl' ? 'ql-active' : '')" data-name="direction" |
||||
data-value="rtl"></i> --> |
||||
<!-- <i class="iconfont icon-baocun" @tap="store" id="1"></i> --> |
||||
</view> |
||||
<t-color-picker ref="colorPicker" :color="color" @confirm="confirm" @cancel="cancel"></t-color-picker> |
||||
<view class="btn-box"> |
||||
<view class="preview-btn" @tap="store" id="2">预览</view> |
||||
<view class="preview-btn" @tap="store" id="1">保存</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import tColorPicke from '@/components/t-color-picker.vue'; |
||||
import { chooseImage } from "@/utils" |
||||
var _self; |
||||
export default { |
||||
components: { |
||||
't-color-picker': tColorPicke |
||||
}, |
||||
data() { |
||||
return { |
||||
color: { |
||||
r: 255, |
||||
g: 0, |
||||
b: 0, |
||||
a: 0.6 |
||||
}, |
||||
isEdit: false, |
||||
fontColor: '#000', |
||||
formats: {}, |
||||
readOnly: false, |
||||
placeholder: '开始输入...', |
||||
editorHeight: 300, |
||||
keyboardHeight: 0, |
||||
isIOS: false |
||||
}; |
||||
}, |
||||
onLoad() { |
||||
_self = this; |
||||
}, |
||||
|
||||
methods: { |
||||
cancel() { |
||||
this.isEdit = false; |
||||
}, |
||||
open() { |
||||
this.$refs.colorPicker.open(); |
||||
this.isEdit = true; |
||||
// uni.hideKeyboard(); |
||||
}, |
||||
hideKey() { |
||||
uni.hideKeyboard(); |
||||
}, |
||||
async confirm(e) { |
||||
this.isEdit = false; |
||||
this.fontColor = await e.hex; |
||||
this.onStatusChange({ |
||||
detail: { |
||||
color: e.hex |
||||
} |
||||
}); |
||||
this.$forceUpdate(); |
||||
}, |
||||
readOnlyChange() { |
||||
this.readOnly = !this.readOnly |
||||
}, |
||||
onEditorReady() { |
||||
uni.createSelectorQuery().select('#editor').context(function(res) { |
||||
console.log(res,'res.context') |
||||
_self.editorCtx = res.context; |
||||
}).exec(); |
||||
}, |
||||
undo() { |
||||
this.editorCtx.undo(); |
||||
}, |
||||
|
||||
redo() { |
||||
this.editorCtx.redo(); |
||||
}, |
||||
|
||||
blur() { |
||||
this.editorCtx.blur(); |
||||
}, |
||||
|
||||
format(e) { |
||||
// this.hideKey(); |
||||
let { |
||||
name, |
||||
value |
||||
} = e.target.dataset; |
||||
if (!name) return; // console.log('format', name, value) |
||||
this.editorCtx.format(name, value); |
||||
}, |
||||
|
||||
onStatusChange(e) { |
||||
this.formats = e.detail; |
||||
}, |
||||
|
||||
insertDivider() { |
||||
this.editorCtx.insertDivider({ |
||||
success: function() { |
||||
console.log('insert divider success'); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
store(e) { |
||||
this.editorCtx.getContents({ |
||||
success: function(res) { |
||||
if(e.currentTarget.id == 1){ |
||||
let pages = getCurrentPages() |
||||
let page = pages[pages.length - 2] |
||||
console.log(page) |
||||
page.$vm.description = res.html |
||||
console.log(page,'pagepagepage') |
||||
console.log('保存内容:', res.html) |
||||
uni.navigateBack({ |
||||
delta:1 |
||||
}) |
||||
} else{ |
||||
uni.navigateTo({ |
||||
url: `../preview/preview?rich=${encodeURIComponent(res.html)}` |
||||
}) |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
clear() { |
||||
this.editorCtx.clear({ |
||||
success: function(res) { |
||||
console.log("clear success"); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
removeFormat() { |
||||
this.editorCtx.removeFormat(); |
||||
}, |
||||
|
||||
insertDate() { |
||||
const date = new Date(); |
||||
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; |
||||
this.editorCtx.insertText({ |
||||
text: formatDate |
||||
}); |
||||
}, |
||||
|
||||
insertImage() { |
||||
// const that = this; |
||||
chooseImage((img)=>{ |
||||
_self.editorCtx.insertImage({ |
||||
src: img, |
||||
width: '80%', |
||||
success: function() { |
||||
console.log('insert image success'); |
||||
} |
||||
}); |
||||
}) |
||||
|
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="less"> |
||||
@import "./editor.css"; |
||||
.index-box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.btn-box{ |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
position: fixed; |
||||
bottom: 0; |
||||
.preview-btn{ |
||||
width: 230rpx; |
||||
height: 80rpx; |
||||
background: linear-gradient(134deg, #FFA782 0%, #FF6D31 100%); |
||||
text-align: center; |
||||
line-height: 80rpx; |
||||
font-size: 38rpx; |
||||
font-weight: 500; |
||||
border-radius: 40rpx; |
||||
color: #fff; |
||||
margin: 32rpx auto; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,25 @@
|
||||
<template> |
||||
<view> |
||||
<rich-text :nodes="richText"></rich-text> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
richText: '', |
||||
} |
||||
}, |
||||
onLoad(options) { |
||||
this.richText = decodeURIComponent(options.rich); |
||||
console.log(this.richText) |
||||
}, |
||||
methods: { |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
|
After Width: | Height: | Size: 879 B |
|
After Width: | Height: | Size: 340 B |
|
Before Width: | Height: | Size: 472 B After Width: | Height: | Size: 1.8 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,671 @@
|
||||
(global["webpackJsonp"] = global["webpackJsonp"] || []).push([["components/t-color-picker"],{ |
||||
|
||||
/***/ 468: |
||||
/*!***********************************************************************!*\ |
||||
!*** F:/zhaoshang/zhaoshangMiniApp_uni/components/t-color-picker.vue ***! |
||||
\***********************************************************************/ |
||||
/*! no static exports found */ |
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) { |
||||
|
||||
"use strict"; |
||||
__webpack_require__.r(__webpack_exports__); |
||||
/* harmony import */ var _t_color_picker_vue_vue_type_template_id_0cb04c6c___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./t-color-picker.vue?vue&type=template&id=0cb04c6c& */ 469); |
||||
/* harmony import */ var _t_color_picker_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./t-color-picker.vue?vue&type=script&lang=js& */ 471); |
||||
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _t_color_picker_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _t_color_picker_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[key]; }) }(__WEBPACK_IMPORT_KEY__)); |
||||
/* harmony import */ var _t_color_picker_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./t-color-picker.vue?vue&type=style&index=0&lang=css& */ 473); |
||||
/* harmony import */ var _D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/runtime/componentNormalizer.js */ 13); |
||||
|
||||
var renderjs |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* normalize component */ |
||||
|
||||
var component = Object(_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__["default"])( |
||||
_t_color_picker_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"], |
||||
_t_color_picker_vue_vue_type_template_id_0cb04c6c___WEBPACK_IMPORTED_MODULE_0__["render"], |
||||
_t_color_picker_vue_vue_type_template_id_0cb04c6c___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"], |
||||
false, |
||||
null, |
||||
null, |
||||
null, |
||||
false, |
||||
_t_color_picker_vue_vue_type_template_id_0cb04c6c___WEBPACK_IMPORTED_MODULE_0__["components"], |
||||
renderjs |
||||
) |
||||
|
||||
component.options.__file = "components/t-color-picker.vue" |
||||
/* harmony default export */ __webpack_exports__["default"] = (component.exports); |
||||
|
||||
/***/ }), |
||||
|
||||
/***/ 469: |
||||
/*!******************************************************************************************************!*\ |
||||
!*** F:/zhaoshang/zhaoshangMiniApp_uni/components/t-color-picker.vue?vue&type=template&id=0cb04c6c& ***! |
||||
\******************************************************************************************************/ |
||||
/*! exports provided: render, staticRenderFns, recyclableRender, components */ |
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) { |
||||
|
||||
"use strict"; |
||||
__webpack_require__.r(__webpack_exports__); |
||||
/* harmony import */ var _D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_16_0_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_template_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_uni_app_loader_page_meta_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_template_id_0cb04c6c___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--16-0!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/template.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib??vue-loader-options!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./t-color-picker.vue?vue&type=template&id=0cb04c6c& */ 470); |
||||
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_16_0_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_template_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_uni_app_loader_page_meta_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_template_id_0cb04c6c___WEBPACK_IMPORTED_MODULE_0__["render"]; }); |
||||
|
||||
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_16_0_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_template_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_uni_app_loader_page_meta_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_template_id_0cb04c6c___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; }); |
||||
|
||||
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "recyclableRender", function() { return _D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_16_0_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_template_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_uni_app_loader_page_meta_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_template_id_0cb04c6c___WEBPACK_IMPORTED_MODULE_0__["recyclableRender"]; }); |
||||
|
||||
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "components", function() { return _D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_16_0_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_template_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_uni_app_loader_page_meta_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_template_id_0cb04c6c___WEBPACK_IMPORTED_MODULE_0__["components"]; }); |
||||
|
||||
|
||||
|
||||
/***/ }), |
||||
|
||||
/***/ 470: |
||||
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ |
||||
!*** ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--16-0!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/template.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib??vue-loader-options!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!F:/zhaoshang/zhaoshangMiniApp_uni/components/t-color-picker.vue?vue&type=template&id=0cb04c6c& ***! |
||||
\******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ |
||||
/*! exports provided: render, staticRenderFns, recyclableRender, components */ |
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) { |
||||
|
||||
"use strict"; |
||||
__webpack_require__.r(__webpack_exports__); |
||||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; }); |
||||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; }); |
||||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "recyclableRender", function() { return recyclableRender; }); |
||||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "components", function() { return components; }); |
||||
var components |
||||
var render = function() { |
||||
var _vm = this |
||||
var _h = _vm.$createElement |
||||
var _c = _vm._self._c || _h |
||||
} |
||||
var recyclableRender = false |
||||
var staticRenderFns = [] |
||||
render._withStripped = true |
||||
|
||||
|
||||
|
||||
/***/ }), |
||||
|
||||
/***/ 471: |
||||
/*!************************************************************************************************!*\ |
||||
!*** F:/zhaoshang/zhaoshangMiniApp_uni/components/t-color-picker.vue?vue&type=script&lang=js& ***! |
||||
\************************************************************************************************/ |
||||
/*! no static exports found */ |
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) { |
||||
|
||||
"use strict"; |
||||
__webpack_require__.r(__webpack_exports__); |
||||
/* harmony import */ var _D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_babel_loader_lib_index_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_12_1_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_script_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!./node_modules/babel-loader/lib!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--12-1!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib??vue-loader-options!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./t-color-picker.vue?vue&type=script&lang=js& */ 472); |
||||
/* harmony import */ var _D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_babel_loader_lib_index_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_12_1_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_script_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_babel_loader_lib_index_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_12_1_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_script_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__); |
||||
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_babel_loader_lib_index_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_12_1_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_script_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_babel_loader_lib_index_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_12_1_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_script_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__)); |
||||
/* harmony default export */ __webpack_exports__["default"] = (_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_babel_loader_lib_index_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_12_1_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_script_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default.a);
|
||||
|
||||
/***/ }), |
||||
|
||||
/***/ 472: |
||||
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ |
||||
!*** ./node_modules/babel-loader/lib!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--12-1!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib??vue-loader-options!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!F:/zhaoshang/zhaoshangMiniApp_uni/components/t-color-picker.vue?vue&type=script&lang=js& ***! |
||||
\*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ |
||||
/*! no static exports found */ |
||||
/***/ (function(module, exports, __webpack_require__) { |
||||
|
||||
"use strict"; |
||||
/* WEBPACK VAR INJECTION */(function(uni) {Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;function _slicedToArray(arr, i) {return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o, minLen) {if (!o) return;if (typeof o === "string") return _arrayLikeToArray(o, minLen);var n = Object.prototype.toString.call(o).slice(8, -1);if (n === "Object" && o.constructor) n = o.constructor.name;if (n === "Map" || n === "Set") return Array.from(o);if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);}function _arrayLikeToArray(arr, len) {if (len == null || len > arr.length) len = arr.length;for (var i = 0, arr2 = new Array(len); i < len; i++) {arr2[i] = arr[i];}return arr2;}function _iterableToArrayLimit(arr, i) {if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;var _arr = [];var _n = true;var _d = false;var _e = undefined;try {for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {_arr.push(_s.value);if (i && _arr.length === i) break;}} catch (err) {_d = true;_e = err;} finally {try {if (!_n && _i["return"] != null) _i["return"]();} finally {if (_d) throw _e;}}return _arr;}function _arrayWithHoles(arr) {if (Array.isArray(arr)) return arr;} //
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
var _default2 = |
||||
{ |
||||
props: { |
||||
color: { |
||||
type: Object, |
||||
default: function _default() { |
||||
return { |
||||
r: 0, |
||||
g: 0, |
||||
b: 0, |
||||
a: 0 }; |
||||
|
||||
} }, |
||||
|
||||
spareColor: { |
||||
type: Array, |
||||
default: function _default() { |
||||
return []; |
||||
} } }, |
||||
|
||||
|
||||
data: function data() { |
||||
return { |
||||
show: false, |
||||
active: false, |
||||
// rgba 颜色
|
||||
rgba: { |
||||
r: 0, |
||||
g: 0, |
||||
b: 0, |
||||
a: 1 }, |
||||
|
||||
// hsb 颜色
|
||||
hsb: { |
||||
h: 0, |
||||
s: 0, |
||||
b: 0 }, |
||||
|
||||
site: [{ |
||||
top: 0, |
||||
left: 0 }, |
||||
{ |
||||
left: 0 }, |
||||
{ |
||||
left: 0 }], |
||||
|
||||
index: 0, |
||||
bgcolor: { |
||||
r: 255, |
||||
g: 0, |
||||
b: 0, |
||||
a: 1 }, |
||||
|
||||
hex: '#000000', |
||||
mode: true, |
||||
colorList: [{ |
||||
r: 244, |
||||
g: 67, |
||||
b: 54, |
||||
a: 1 }, |
||||
{ |
||||
r: 233, |
||||
g: 30, |
||||
b: 99, |
||||
a: 1 }, |
||||
{ |
||||
r: 156, |
||||
g: 39, |
||||
b: 176, |
||||
a: 1 }, |
||||
{ |
||||
r: 103, |
||||
g: 58, |
||||
b: 183, |
||||
a: 1 }, |
||||
{ |
||||
r: 63, |
||||
g: 81, |
||||
b: 181, |
||||
a: 1 }, |
||||
{ |
||||
r: 33, |
||||
g: 150, |
||||
b: 243, |
||||
a: 1 }, |
||||
{ |
||||
r: 3, |
||||
g: 169, |
||||
b: 244, |
||||
a: 1 }, |
||||
{ |
||||
r: 0, |
||||
g: 188, |
||||
b: 212, |
||||
a: 1 }, |
||||
{ |
||||
r: 0, |
||||
g: 150, |
||||
b: 136, |
||||
a: 1 }, |
||||
{ |
||||
r: 76, |
||||
g: 175, |
||||
b: 80, |
||||
a: 1 }, |
||||
{ |
||||
r: 139, |
||||
g: 195, |
||||
b: 74, |
||||
a: 1 }, |
||||
{ |
||||
r: 205, |
||||
g: 220, |
||||
b: 57, |
||||
a: 1 }, |
||||
{ |
||||
r: 255, |
||||
g: 235, |
||||
b: 59, |
||||
a: 1 }, |
||||
{ |
||||
r: 255, |
||||
g: 193, |
||||
b: 7, |
||||
a: 1 }, |
||||
{ |
||||
r: 255, |
||||
g: 152, |
||||
b: 0, |
||||
a: 1 }, |
||||
{ |
||||
r: 255, |
||||
g: 87, |
||||
b: 34, |
||||
a: 1 }, |
||||
{ |
||||
r: 121, |
||||
g: 85, |
||||
b: 72, |
||||
a: 1 }, |
||||
{ |
||||
r: 158, |
||||
g: 158, |
||||
b: 158, |
||||
a: 1 }, |
||||
{ |
||||
r: 0, |
||||
g: 0, |
||||
b: 0, |
||||
a: 0.5 }, |
||||
{ |
||||
r: 0, |
||||
g: 0, |
||||
b: 0, |
||||
a: 0 }] }; |
||||
|
||||
|
||||
}, |
||||
created: function created() { |
||||
this.rgba = this.color; |
||||
if (this.spareColor.length !== 0) { |
||||
this.colorList = this.spareColor; |
||||
} |
||||
}, |
||||
methods: { |
||||
/** |
||||
* 初始化 |
||||
*/ |
||||
init: function init() { |
||||
// hsb 颜色
|
||||
this.hsb = this.rgbToHex(this.rgba); |
||||
// this.setColor();
|
||||
this.setValue(this.rgba); |
||||
}, |
||||
moveHandle: function moveHandle() {}, |
||||
open: function open() {var _this = this; |
||||
uni.hideKeyboard(); |
||||
this.show = true; |
||||
this.$nextTick(function () { |
||||
_this.init(); |
||||
setTimeout(function () { |
||||
_this.active = true; |
||||
setTimeout(function () { |
||||
_this.getSelectorQuery(); |
||||
}, 350); |
||||
}, 50); |
||||
}); |
||||
|
||||
}, |
||||
close: function close() {var _this2 = this; |
||||
this.active = false; |
||||
this.$nextTick(function () { |
||||
setTimeout(function () { |
||||
_this2.show = false; |
||||
}, 500); |
||||
}); |
||||
this.$emit('cancel', {}); |
||||
}, |
||||
confirm: function confirm() { |
||||
this.close(); |
||||
this.$emit('confirm', { |
||||
rgba: this.rgba, |
||||
hex: this.hex }); |
||||
|
||||
}, |
||||
// 选择模式
|
||||
select: function select() { |
||||
this.mode = !this.mode; |
||||
}, |
||||
// 常用颜色选择
|
||||
selectColor: function selectColor(item) { |
||||
this.setColorBySelect(item); |
||||
}, |
||||
touchstart: function touchstart(e, index) {var _e$touches$ = |
||||
|
||||
|
||||
|
||||
e.touches[0],pageX = _e$touches$.pageX,pageY = _e$touches$.pageY; |
||||
this.pageX = pageX; |
||||
this.pageY = pageY; |
||||
this.setPosition(pageX, pageY, index); |
||||
}, |
||||
touchmove: function touchmove(e, index) {var _e$touches$2 = |
||||
|
||||
|
||||
|
||||
e.touches[0],pageX = _e$touches$2.pageX,pageY = _e$touches$2.pageY; |
||||
this.moveX = pageX; |
||||
this.moveY = pageY; |
||||
this.setPosition(pageX, pageY, index); |
||||
}, |
||||
touchend: function touchend(e, index) {}, |
||||
/** |
||||
* 设置位置 |
||||
*/ |
||||
setPosition: function setPosition(x, y, index) { |
||||
this.index = index;var _this$position$index = |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.position[index],top = _this$position$index.top,left = _this$position$index.left,width = _this$position$index.width,height = _this$position$index.height; |
||||
// 设置最大最小值
|
||||
|
||||
this.site[index].left = Math.max(0, Math.min(parseInt(x - left), width)); |
||||
if (index === 0) { |
||||
this.site[index].top = Math.max(0, Math.min(parseInt(y - top), height)); |
||||
// 设置颜色
|
||||
this.hsb.s = parseInt(100 * this.site[index].left / width); |
||||
this.hsb.b = parseInt(100 - 100 * this.site[index].top / height); |
||||
this.setColor(); |
||||
this.setValue(this.rgba); |
||||
} else { |
||||
this.setControl(index, this.site[index].left); |
||||
} |
||||
}, |
||||
/** |
||||
* 设置 rgb 颜色 |
||||
*/ |
||||
setColor: function setColor() { |
||||
var rgb = this.HSBToRGB(this.hsb); |
||||
this.rgba.r = rgb.r; |
||||
this.rgba.g = rgb.g; |
||||
this.rgba.b = rgb.b; |
||||
}, |
||||
/** |
||||
* 设置二进制颜色 |
||||
* @param {Object} rgb |
||||
*/ |
||||
setValue: function setValue(rgb) { |
||||
this.hex = '#' + this.rgbToHex(rgb); |
||||
}, |
||||
setControl: function setControl(index, x) {var _this$position$index2 = |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.position[index],top = _this$position$index2.top,left = _this$position$index2.left,width = _this$position$index2.width,height = _this$position$index2.height; |
||||
|
||||
if (index === 1) { |
||||
this.hsb.h = parseInt(360 * x / width); |
||||
this.bgcolor = this.HSBToRGB({ |
||||
h: this.hsb.h, |
||||
s: 100, |
||||
b: 100 }); |
||||
|
||||
this.setColor(); |
||||
} else { |
||||
this.rgba.a = (x / width).toFixed(1); |
||||
} |
||||
this.setValue(this.rgba); |
||||
}, |
||||
/** |
||||
* rgb 转 二进制 hex |
||||
* @param {Object} rgb |
||||
*/ |
||||
rgbToHex: function rgbToHex(rgb) { |
||||
var hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)]; |
||||
hex.map(function (str, i) { |
||||
if (str.length == 1) { |
||||
hex[i] = '0' + str; |
||||
} |
||||
}); |
||||
return hex.join(''); |
||||
}, |
||||
setColorBySelect: function setColorBySelect(getrgb) {var |
||||
|
||||
r = |
||||
|
||||
|
||||
|
||||
getrgb.r,g = getrgb.g,b = getrgb.b,a = getrgb.a; |
||||
var rgb = {}; |
||||
rgb = { |
||||
r: r ? parseInt(r) : 0, |
||||
g: g ? parseInt(g) : 0, |
||||
b: b ? parseInt(b) : 0, |
||||
a: a ? a : 0 }; |
||||
|
||||
this.rgba = rgb; |
||||
this.hsb = this.rgbToHsb(rgb); |
||||
this.changeViewByHsb(); |
||||
}, |
||||
changeViewByHsb: function changeViewByHsb() {var _this$position = _slicedToArray( |
||||
this.position, 3),a = _this$position[0],b = _this$position[1],c = _this$position[2]; |
||||
this.site[0].left = parseInt(this.hsb.s * a.width / 100); |
||||
this.site[0].top = parseInt((100 - this.hsb.b) * a.height / 100); |
||||
this.setColor(this.hsb.h); |
||||
this.setValue(this.rgba); |
||||
this.bgcolor = this.HSBToRGB({ |
||||
h: this.hsb.h, |
||||
s: 100, |
||||
b: 100 }); |
||||
|
||||
|
||||
this.site[1].left = this.hsb.h / 360 * b.width; |
||||
this.site[2].left = this.rgba.a * c.width; |
||||
|
||||
}, |
||||
/** |
||||
* hsb 转 rgb |
||||
* @param {Object} 颜色模式 H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度 |
||||
*/ |
||||
HSBToRGB: function HSBToRGB(hsb) { |
||||
var rgb = {}; |
||||
var h = Math.round(hsb.h); |
||||
var s = Math.round(hsb.s * 255 / 100); |
||||
var v = Math.round(hsb.b * 255 / 100); |
||||
if (s == 0) { |
||||
rgb.r = rgb.g = rgb.b = v; |
||||
} else { |
||||
var t1 = v; |
||||
var t2 = (255 - s) * v / 255; |
||||
var t3 = (t1 - t2) * (h % 60) / 60; |
||||
if (h == 360) h = 0; |
||||
if (h < 60) { |
||||
rgb.r = t1; |
||||
rgb.b = t2; |
||||
rgb.g = t2 + t3; |
||||
} else if (h < 120) { |
||||
rgb.g = t1; |
||||
rgb.b = t2; |
||||
rgb.r = t1 - t3; |
||||
} else if (h < 180) { |
||||
rgb.g = t1; |
||||
rgb.r = t2; |
||||
rgb.b = t2 + t3; |
||||
} else if (h < 240) { |
||||
rgb.b = t1; |
||||
rgb.r = t2; |
||||
rgb.g = t1 - t3; |
||||
} else if (h < 300) { |
||||
rgb.b = t1; |
||||
rgb.g = t2; |
||||
rgb.r = t2 + t3; |
||||
} else if (h < 360) { |
||||
rgb.r = t1; |
||||
rgb.g = t2; |
||||
rgb.b = t1 - t3; |
||||
} else { |
||||
rgb.r = 0; |
||||
rgb.g = 0; |
||||
rgb.b = 0; |
||||
} |
||||
} |
||||
return { |
||||
r: Math.round(rgb.r), |
||||
g: Math.round(rgb.g), |
||||
b: Math.round(rgb.b) }; |
||||
|
||||
}, |
||||
rgbToHsb: function rgbToHsb(rgb) { |
||||
var hsb = { |
||||
h: 0, |
||||
s: 0, |
||||
b: 0 }; |
||||
|
||||
var min = Math.min(rgb.r, rgb.g, rgb.b); |
||||
var max = Math.max(rgb.r, rgb.g, rgb.b); |
||||
var delta = max - min; |
||||
hsb.b = max; |
||||
hsb.s = max != 0 ? 255 * delta / max : 0; |
||||
if (hsb.s != 0) { |
||||
if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;else |
||||
if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;else |
||||
hsb.h = 4 + (rgb.r - rgb.g) / delta; |
||||
} else hsb.h = -1; |
||||
hsb.h *= 60; |
||||
if (hsb.h < 0) hsb.h = 0; |
||||
hsb.s *= 100 / 255; |
||||
hsb.b *= 100 / 255; |
||||
return hsb; |
||||
}, |
||||
getSelectorQuery: function getSelectorQuery() {var _this3 = this; |
||||
var views = uni.createSelectorQuery().in(this); |
||||
views. |
||||
selectAll('.boxs'). |
||||
boundingClientRect(function (data) { |
||||
if (!data || data.length === 0) { |
||||
setTimeout(function () {return _this3.getSelectorQuery();}, 20); |
||||
return; |
||||
} |
||||
_this3.position = data; |
||||
// this.site[0].top = data[0].height;
|
||||
// this.site[0].left = 0;
|
||||
// this.site[1].left = data[1].width;
|
||||
// this.site[2].left = data[2].width;
|
||||
_this3.setColorBySelect(_this3.rgba); |
||||
}). |
||||
exec(); |
||||
} }, |
||||
|
||||
watch: { |
||||
spareColor: function spareColor(newVal) { |
||||
this.colorList = newVal; |
||||
} } };exports.default = _default2; |
||||
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 1)["default"])) |
||||
|
||||
/***/ }), |
||||
|
||||
/***/ 473: |
||||
/*!********************************************************************************************************!*\ |
||||
!*** F:/zhaoshang/zhaoshangMiniApp_uni/components/t-color-picker.vue?vue&type=style&index=0&lang=css& ***! |
||||
\********************************************************************************************************/ |
||||
/*! no static exports found */ |
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) { |
||||
|
||||
"use strict"; |
||||
__webpack_require__.r(__webpack_exports__); |
||||
/* harmony import */ var _D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_loaders_stylePostLoader_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_6_oneOf_1_2_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!./node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--6-oneOf-1-2!./node_modules/postcss-loader/src??ref--6-oneOf-1-3!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib??vue-loader-options!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./t-color-picker.vue?vue&type=style&index=0&lang=css& */ 474); |
||||
/* harmony import */ var _D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_loaders_stylePostLoader_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_6_oneOf_1_2_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_loaders_stylePostLoader_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_6_oneOf_1_2_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__); |
||||
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_loaders_stylePostLoader_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_6_oneOf_1_2_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_loaders_stylePostLoader_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_6_oneOf_1_2_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__)); |
||||
/* harmony default export */ __webpack_exports__["default"] = (_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_loaders_stylePostLoader_js_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_webpack_preprocess_loader_index_js_ref_6_oneOf_1_2_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_vue_cli_plugin_uni_packages_vue_loader_lib_index_js_vue_loader_options_D_Program_Files_HBuilderX_3_1_13_20210514_HBuilderX_plugins_uniapp_cli_node_modules_dcloudio_webpack_uni_mp_loader_lib_style_js_t_color_picker_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a);
|
||||
|
||||
/***/ }), |
||||
|
||||
/***/ 474: |
||||
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ |
||||
!*** ./node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--6-oneOf-1-2!./node_modules/postcss-loader/src??ref--6-oneOf-1-3!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib??vue-loader-options!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!F:/zhaoshang/zhaoshangMiniApp_uni/components/t-color-picker.vue?vue&type=style&index=0&lang=css& ***! |
||||
\************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ |
||||
/*! no static exports found */ |
||||
/***/ (function(module, exports, __webpack_require__) { |
||||
|
||||
// extracted by mini-css-extract-plugin
|
||||
if(false) { var cssReload; } |
||||
|
||||
|
||||
/***/ }) |
||||
|
||||
}]); |
||||
//# sourceMappingURL=../../.sourcemap/mp-weixin/components/t-color-picker.js.map
|
||||
;(global["webpackJsonp"] = global["webpackJsonp"] || []).push([ |
||||
'components/t-color-picker-create-component', |
||||
{ |
||||
'components/t-color-picker-create-component':(function(module, exports, __webpack_require__){ |
||||
__webpack_require__('1')['createComponent'](__webpack_require__(468)) |
||||
}) |
||||
}, |
||||
[['components/t-color-picker-create-component']] |
||||
]); |
||||
@ -0,0 +1,4 @@
|
||||
{ |
||||
"usingComponents": {}, |
||||
"component": true |
||||
} |
||||
@ -0,0 +1 @@
|
||||
<view data-event-opts="{{[['touchmove',[['moveHandle',['$event']]]]]}}" hidden="{{!(show)}}" class="t-wrapper" catchtouchmove="__e"><view data-event-opts="{{[['tap',[['close',['$event']]]]]}}" class="{{['t-mask',(active)?'active':'']}}" catchtap="__e"></view><view class="{{['t-box',(active)?'active':'']}}"><view class="t-header"><view data-event-opts="{{[['tap',[['close',['$event']]]]]}}" class="t-header-button" bindtap="__e">取消</view><view data-event-opts="{{[['tap',[['confirm',['$event']]]]]}}" class="t-header-button" bindtap="__e">确认</view></view><view class="t-color__box" style="{{'background:'+('rgb('+bgcolor.r+','+bgcolor.g+','+bgcolor.b+')')+';'}}"><view data-event-opts="{{[['touchstart',[['touchstart',['$event',0]]]],['touchmove',[['touchmove',['$event',0]]]],['touchend',[['touchend',['$event',0]]]]]}}" class="t-background boxs" bindtouchstart="__e" bindtouchmove="__e" bindtouchend="__e"><view class="t-color-mask"></view><view class="t-pointer" style="{{'top:'+(site[0].top-8+'px')+';'+('left:'+(site[0].left-8+'px')+';')}}"></view></view></view><view class="t-control__box"><view class="t-control__color"><view class="t-control__color-content" style="{{'background:'+('rgba('+rgba.r+','+rgba.g+','+rgba.b+','+rgba.a+')')+';'}}"></view></view><view class="t-control-box__item"><view data-event-opts="{{[['touchstart',[['touchstart',['$event',1]]]],['touchmove',[['touchmove',['$event',1]]]],['touchend',[['touchend',['$event',1]]]]]}}" class="t-controller boxs" bindtouchstart="__e" bindtouchmove="__e" bindtouchend="__e"><view class="t-hue"><view class="t-circle" style="{{'left:'+(site[1].left-12+'px')+';'}}"></view></view></view><view data-event-opts="{{[['touchstart',[['touchstart',['$event',2]]]],['touchmove',[['touchmove',['$event',2]]]],['touchend',[['touchend',['$event',2]]]]]}}" class="t-controller boxs" bindtouchstart="__e" bindtouchmove="__e" bindtouchend="__e"><view class="t-transparency"><view class="t-circle" style="{{'left:'+(site[2].left-12+'px')+';'}}"></view></view></view></view></view><view class="t-result__box"><block wx:if="{{mode}}"><view class="t-result__item"><view class="t-result__box-input">{{hex}}</view><view class="t-result__box-text">HEX</view></view></block><block wx:else><view class="t-result__item"><view class="t-result__box-input">{{rgba.r}}</view><view class="t-result__box-text">R</view></view><view class="t-result__item"><view class="t-result__box-input">{{rgba.g}}</view><view class="t-result__box-text">G</view></view><view class="t-result__item"><view class="t-result__box-input">{{rgba.b}}</view><view class="t-result__box-text">B</view></view><view class="t-result__item"><view class="t-result__box-input">{{rgba.a}}</view><view class="t-result__box-text">A</view></view></block><view data-event-opts="{{[['tap',[['select',['$event']]]]]}}" class="t-result__item t-select" bindtap="__e"><view class="t-result__box-input"><view>切换</view><view>模式</view></view></view></view><view class="t-alternative"><block wx:for="{{colorList}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="t-alternative__item"><view data-event-opts="{{[['tap',[['selectColor',['$0'],[[['colorList','',index]]]]]]]}}" class="t-alternative__item-content" style="{{'background:'+('rgba('+item.r+','+item.g+','+item.b+','+item.a+')')+';'}}" bindtap="__e"></view></view></block></view></view></view> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue