新增服务 问题修复
This commit is contained in:
donqi
parent
d3275009f1
commit
33ba80479a
|
|
@ -36,34 +36,36 @@
|
|||
<text>{{item.goodsCategoryName}}</text>
|
||||
</view>
|
||||
<view class="flex-sub">
|
||||
<input class="radius-input" @input="inputSpecs($event, index, 'goodsStandardName')"
|
||||
:value="item.goodsStandardName" placeholder="自编辑购买标题"></input>
|
||||
<input class="sm radius-input"
|
||||
@input="inputSpecs($event, index, 'goodsStandardName')"
|
||||
:value="item.goodsStandardName" maxlength="20"
|
||||
placeholder="自编辑购买标题(限20字符)"></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex margin-top-xs">
|
||||
<view class="flex-sub">
|
||||
<input class="radius-input" @input="inputSpecs($event, index, 'goodsPrice')"
|
||||
:value="item.goodsPrice" placeholder="价格(平6%+￥5销10%+￥18)"></input>
|
||||
<view class="margin-right-xs">
|
||||
<view class='text-red' style="position: absolute;">*</view>
|
||||
<zb-tooltip content="平6%+￥5销10%+￥18" placement="top-end" ref="goodsPriceTip">
|
||||
<input class="radius-input xs" @input="inputSpecs($event, index, 'goodsPrice')"
|
||||
:value="item.goodsPrice" placeholder="价格" @blur="hideTips('goodsPriceTip', index)"></input>
|
||||
</zb-tooltip>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex margin-top-xs">
|
||||
<view class="flex-sub">
|
||||
<input class="radius-input" @input="inputSpecs($event, index, 'deduct')"
|
||||
<view class="margin-right-xs" style="flex-basis: 21%;">
|
||||
<input class="radius-input xs" @input="inputSpecs($event, index, 'deduct')"
|
||||
:value="item.deduct" placeholder="追加提成额"></input>
|
||||
</view>
|
||||
<view class="flex-sub margin-left-xs">
|
||||
<input class="radius-input" @input="inputSpecs($event, index, 'groupPrice')"
|
||||
<view class="margin-right-xs" style="flex-basis: 14%;">
|
||||
<input class="radius-input xs" @input="inputSpecs($event, index, 'groupPrice')"
|
||||
:value="item.groupPrice" placeholder="团购价"></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex margin-top-xs">
|
||||
<view class="flex-sub">
|
||||
<input class="radius-input" @input="inputSpecs($event, index, 'goodsUnit')"
|
||||
:value="item.goodsUnit" placeholder="规格单位"></input>
|
||||
<view class="margin-right-xs" style="flex-basis: 11%;">
|
||||
<input class="radius-input xs" @input="inputSpecs($event, index, 'goodsUnit')"
|
||||
:value="item.goodsUnit" placeholder="单位"></input>
|
||||
</view>
|
||||
<view class="flex-sub margin-left-xs">
|
||||
<input class="radius-input" @input="inputSpecs($event, index, 'goodsNum')"
|
||||
:value="item.goodsNum" placeholder="库存"></input>
|
||||
<view style="flex-basis: 14%;">
|
||||
<view class='text-red' style="position: absolute;">*</view>
|
||||
<input class="radius-input xs" @input="inputSpecs($event, index, 'goodsNum')"
|
||||
:value="item.goodsNum" placeholder="库存数"></input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -489,6 +491,13 @@
|
|||
showAllSpecs() {
|
||||
this.isShowAllSpecs = !this.isShowAllSpecs;
|
||||
},
|
||||
hideTips(tipName, index) {
|
||||
if (typeof index === 'number' && index >= 0) {
|
||||
this.$refs[tipName][index].close();
|
||||
} else {
|
||||
this.$refs[tipName].close();
|
||||
}
|
||||
},
|
||||
checkDistirct(e) {
|
||||
let checkedIndexArr = e.detail.value;
|
||||
for (let i = 0; i < this.formData.districtList.length; i++) {
|
||||
|
|
@ -743,4 +752,12 @@
|
|||
.form-val-area {
|
||||
flex-basis: 75% !important;
|
||||
}
|
||||
|
||||
.radius-input.xs {
|
||||
font-size: 23rpx;
|
||||
}
|
||||
|
||||
.radius-input.sm {
|
||||
font-size: 25rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
## 1.0.8（2022-08-18）
|
||||
优化细节
|
||||
## 1.0.67（2022-05-09）
|
||||
修复安卓报错
|
||||
## 1.0.6（2022-05-07）
|
||||
修改默认展示
|
||||
## 1.0.5（2022-04-28）
|
||||
进行优化
|
||||
## 1.0.4（2022-04-27）
|
||||
进行优化
|
||||
## 1.0.3（2022-04-25）
|
||||
去掉多余得注释
|
||||
## 1.0.2（2022-04-25）
|
||||
增加自定义主题颜色
|
||||
## 1.0.1（2022-04-25）
|
||||
进行优化显示
|
||||
## 1.0.0（2022-04-24）
|
||||
初始化
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
<template>
|
||||
<view class="zb-tooltip" :style="{
|
||||
'--theme-bg-color':color
|
||||
}">
|
||||
<view class="zb_tooltip_content" @click.stop="handleClick">
|
||||
<slot></slot>
|
||||
<view class="zb_tooltip__popper" :style="[style,{
|
||||
visibility:isShow?'visible':'hidden',
|
||||
color:color==='white'?'':'#fff',
|
||||
boxShadow: color==='white'?'0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d':''
|
||||
}]" >
|
||||
<slot name="content">{{content}}</slot>
|
||||
<view class="zb_popper__icon" :style="[arrowStyle]" :class="[{
|
||||
'zb_popper__up':placement.indexOf('bottom')===0,
|
||||
'zb_popper__arrow':placement.indexOf('top')===0,
|
||||
'zb_popper__right':placement.indexOf('right')===0,
|
||||
'zb_popper__left':placement.indexOf('left')===0,
|
||||
}]">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
visible:Boolean,
|
||||
color:{
|
||||
type:String,
|
||||
default:'#303133',
|
||||
},
|
||||
placement:{
|
||||
type:String,
|
||||
default:'top',
|
||||
},
|
||||
content:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
show:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isShow :this.visible,
|
||||
title: 'Hello',
|
||||
arrowLeft:0,
|
||||
query:null,
|
||||
style:{
|
||||
|
||||
},
|
||||
arrowStyle:{}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
watch:{
|
||||
isShow:{
|
||||
handler(val){
|
||||
this.$emit('update:visible', val)
|
||||
},
|
||||
immediate:true,
|
||||
},
|
||||
visible:{
|
||||
handler(val){
|
||||
this.isShow = val
|
||||
if(val){
|
||||
this.$nextTick(()=>{
|
||||
this.handleClick()
|
||||
})
|
||||
}
|
||||
},
|
||||
immediate:true,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
// #ifdef H5
|
||||
window.addEventListener('click',()=>{
|
||||
this.isShow = false
|
||||
})
|
||||
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
close(){
|
||||
this.isShow = false
|
||||
},
|
||||
fixedWrap(){
|
||||
|
||||
this.isShow = false
|
||||
},
|
||||
handleClick(){
|
||||
|
||||
uni.createSelectorQuery().in(this).selectAll('.zb_tooltip_content,.zb_tooltip__popper').boundingClientRect(async (data)=>{
|
||||
|
||||
let {left,bottom,right,top,width,height} = data[0]
|
||||
let obj1 = data[1]
|
||||
|
||||
let objStyle = {}
|
||||
let objStyle1 = {}
|
||||
switch(this.placement){
|
||||
case 'top':
|
||||
if(obj1.width > width){
|
||||
objStyle.left = `-${(obj1.width - width)/2}px`
|
||||
}else{
|
||||
objStyle.left = `${Math.abs(obj1.width - width)/2}px`
|
||||
}
|
||||
|
||||
objStyle.bottom =`${height+8}px`
|
||||
objStyle1.left = (obj1.width/2-6)+'px'
|
||||
|
||||
|
||||
break;
|
||||
case 'top-start':
|
||||
objStyle.left = `0px`
|
||||
objStyle.bottom =`${height+8}px`
|
||||
break;
|
||||
|
||||
case 'top-end':
|
||||
objStyle.right = `0px`
|
||||
objStyle.bottom =`${height+8}px`
|
||||
objStyle1.right=`8px`
|
||||
break;
|
||||
|
||||
|
||||
case 'bottom':
|
||||
if(obj1.width>width){
|
||||
objStyle.left = `-${(obj1.width - width)/2}px`
|
||||
}else{
|
||||
objStyle.left = `${Math.abs(obj1.width - width)/2}px`
|
||||
}
|
||||
|
||||
objStyle.top =`${height+8}px`
|
||||
objStyle1.left = (obj1.width/2-6)+'px'
|
||||
break;
|
||||
|
||||
case 'bottom-start':
|
||||
objStyle.left = `0px`
|
||||
objStyle.top =`${height+8}px`
|
||||
objStyle1.left = `8px`
|
||||
break;
|
||||
|
||||
case 'bottom-end':
|
||||
objStyle.right = `0px`
|
||||
objStyle.top =`${height+8}px`
|
||||
objStyle1.right = `8px`
|
||||
break;
|
||||
|
||||
case 'right':
|
||||
objStyle.left = `${width+8}px`
|
||||
if(obj1.height>height){
|
||||
objStyle.top =`-${(obj1.height - height)/2}px`
|
||||
}else{
|
||||
objStyle.top =`${Math.abs((obj1.height - height)/2)}px`
|
||||
}
|
||||
|
||||
objStyle1.top = `${obj1.height/2-6}px`
|
||||
break;
|
||||
case 'right-start':
|
||||
objStyle.left = `${width+8}px`
|
||||
objStyle.top =`0px`
|
||||
objStyle1.top = `8px`
|
||||
break;
|
||||
|
||||
case 'right-end':
|
||||
objStyle.left = `${width+8}px`
|
||||
objStyle.bottom =`0px`
|
||||
objStyle1.bottom = `8px`
|
||||
break;
|
||||
|
||||
case 'left':
|
||||
objStyle.right = `${width+8}px`
|
||||
|
||||
if(obj1.height>height){
|
||||
objStyle.top =`-${(obj1.height - height)/2}px`
|
||||
}else{
|
||||
objStyle.top =`${Math.abs((obj1.height - height)/2)}px`
|
||||
}
|
||||
|
||||
objStyle1.top = `${obj1.height/2-6}px`
|
||||
break;
|
||||
|
||||
case 'left-start':
|
||||
objStyle.right = `${width+8}px`
|
||||
objStyle.top =`0px`
|
||||
objStyle1.top = `8px`
|
||||
break;
|
||||
|
||||
case 'left-end':
|
||||
objStyle.right = `${width+8}px`
|
||||
objStyle.bottom =`0px`
|
||||
objStyle1.bottom = `8px`
|
||||
break;
|
||||
}
|
||||
this.style = objStyle
|
||||
// 三角形箭头
|
||||
this.arrowStyle = objStyle1
|
||||
this.isShow = true
|
||||
|
||||
}).exec()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$theme-bg-color: var(--theme-bg-color);
|
||||
|
||||
.zb-tooltip{
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.zb_tooltip_content{
|
||||
height: 100%;
|
||||
/* float: left; */
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// align-items: center;
|
||||
/* overflow: hidden; */
|
||||
}
|
||||
.zb_tooltip__popper{
|
||||
/* transform-origin: center top; */
|
||||
background: $theme-bg-color;
|
||||
|
||||
visibility: hidden;
|
||||
// color:'#fff';
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
padding: 10px;
|
||||
min-width: 10px;
|
||||
word-wrap: break-word;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
z-index:9;
|
||||
}
|
||||
.zb_popper__icon{
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index:9;
|
||||
position: absolute;
|
||||
}
|
||||
.zb_popper__arrow{
|
||||
bottom: -5px;
|
||||
/* transform-origin: center top; */
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid $theme-bg-color;
|
||||
|
||||
}
|
||||
.zb_popper__right{
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 6px solid $theme-bg-color;
|
||||
left:-5px;
|
||||
}
|
||||
|
||||
.zb_popper__left{
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-left: 6px solid $theme-bg-color;
|
||||
right:-5px;
|
||||
}
|
||||
|
||||
.zb_popper__up{
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid $theme-bg-color;
|
||||
top:-5px;
|
||||
}
|
||||
.fixed{
|
||||
position: absolute;width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: auto;
|
||||
background: red;
|
||||
z-index:-1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
{
|
||||
"id": "zb-tooltip",
|
||||
"displayName": "zb-tooltip （文字提示气泡框）",
|
||||
"version": "1.0.8",
|
||||
"description": "简单的文字提示气泡框,可以自定义皮肤颜色",
|
||||
"keywords": [
|
||||
"tooltip",
|
||||
"tip",
|
||||
"文字提示",
|
||||
"气泡框",
|
||||
"自定义皮肤颜色、Popover"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
## 介绍
|
||||
基于uni-app开发的一个普通的提示组件，功能点击提示
|
||||
|
||||
|
||||
## 友情链接
|
||||
#### vue-admin-perfect —— [企业级、通用型中后台前端解决方案（基于vue3.0+TS+Element-Plus 最新版，同时支持电脑，手机，平板)](https://github.com/zouzhibin/vue-admin-perfect)
|
||||
#### vue-admin-perfect —— [企业级、通用型中后台前端解决方案 预览地址](http://182.61.5.190:8889/#/table/complex)
|
||||
|
||||
## Tooltip 属性
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |是否必须|
|
||||
| ------ | ------ | ------ | ------ | ------ |
|
||||
| visible | 是否显示 tooltip，支持 .sync 修饰符 | String |visible.sync | -- |
|
||||
| content | 显示的内容，也可以通过 slot#content | String |-- | -- |
|
||||
| color | 自定义主题颜色| String |'#303133' | -- |
|
||||
| placement | Tooltip 的出现位置 | String |top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | top |
|
||||
|
||||
|
||||
```
|
||||
因为uniapp 中小程序中没有window对象，需手动调用 关闭
|
||||
this.$refs.tooltip.close()
|
||||
|
||||
```
|
||||
Loading…
Reference in New Issue