Skip to content

M
mallapp
Commit 69bcbc56 authored by Mac's avatar Mac
Browse files
Options

首店详情的修改

parent d15c4af4
Hide whitespace changes
Inline Side-by-side
Showing with 415 additions and 18 deletions
pages/kotra/brand/detail.vue
View file @ 69bcbc56
...@@ -105,32 +105,41 @@ ...@@ -105,32 +105,41 @@
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-wyxq.png" mode="widthFix"></image> <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-wyxq.png" mode="widthFix"></image>
</view> </view>
<view class="Listbox" > <view class="Listbox" >
<view id="kiakou" class="Listbox-item" @click="showTips('kiakou',details.ShopSize,details.IsShopSize)">
<image :src="EquityList[8].ImagePath" v-if="details.IsShopSize==1" mode="widthFix"></image>
<image :src="EquityList[8].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.IsShopSize==1?'#424242':'#D6D6D6'}">{{EquityList[8].Title}}</text>
</view>
<view class="Listbox-item" > <view class="Listbox-item" >
<image :src="EquityList[0].ImagePath" v-if="details.Plumbing==1" mode="widthFix"></image> <image :src="EquityList[0].ImagePath" v-if="details.Plumbing==1" mode="widthFix"></image>
<image :src="EquityList[0].Image_n" v-else mode="widthFix"></image> <image :src="EquityList[0].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.Plumbing==1?'#424242':'#D6D6D6'}">{{EquityList[0].Title}}</text> <text class="list-item-text" :style="{color:details.Plumbing==1?'#424242':'#D6D6D6'}">{{EquityList[0].Title}}</text>
</view> </view>
<view class="Listbox-item" >
<image :src="EquityList[7].ImagePath" v-if="details.Caliber==1" mode="widthFix"></image>
<image :src="EquityList[7].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.Caliber==1?'#424242':'#D6D6D6'}">{{EquityList[7].Title}}</text>
</view>
<view class="Listbox-item" > <view class="Listbox-item" >
<image :src="EquityList[1].ImagePath" v-if="details.Sewage==1" mode="widthFix"></image> <image :src="EquityList[1].ImagePath" v-if="details.Sewage==1" mode="widthFix"></image>
<image :src="EquityList[1].Image_n" v-else mode="widthFix"></image> <image :src="EquityList[1].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.Sewage==1?'#424242':'#D6D6D6'}">{{EquityList[1].Title}}</text> <text class="list-item-text" :style="{color:details.Sewage==1?'#424242':'#D6D6D6'}">{{EquityList[1].Title}}</text>
</view> </view>
<view class="Listbox-item" >
<!-- 燃气 -->
<view class="Listbox-item" id="ranqi" @click="showTips('ranqi',details.RanQiBZ,details.RanQi)">
<image :src="EquityList[2].ImagePath" v-if="details.RanQi==1" mode="widthFix"></image> <image :src="EquityList[2].ImagePath" v-if="details.RanQi==1" mode="widthFix"></image>
<image :src="EquityList[2].Image_n" v-else mode="widthFix"></image> <image :src="EquityList[2].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.RanQi==1?'#424242':'#D6D6D6'}">{{EquityList[2].Title}}</text> <text class="list-item-text" :style="{color:details.RanQi==1?'#424242':'#D6D6D6'}">{{EquityList[2].Title}}</text>
</view> </view>
<view class="Listbox-item" > <view class="Listbox-item" id="dianliang" @click="showTips('dianliang',details.DianLiang,details.IsDianLiang)">
<image :src="EquityList[3].ImagePath" v-if="details.DianLiang!=''" mode="widthFix"></image> <image :src="EquityList[3].ImagePath" v-if="details.IsDianLiang==1" mode="widthFix"></image>
<image :src="EquityList[3].Image_n" v-else mode="widthFix"></image> <image :src="EquityList[3].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.DianLiang!=''?'#424242':'#D6D6D6'}">{{EquityList[3].Title}}</text> <text class="list-item-text" :style="{color:details.IsDianLiang==1?'#424242':'#D6D6D6'}">{{EquityList[3].Title}}</text>
</view> </view>
<view class="Listbox-item" >
<image :src="EquityList[4].ImagePath" v-if="details.XinFeng==1" mode="widthFix"></image> <view class="Listbox-item" id="paiyan" @click="showTips('paiyan',details.PaiYanBZ,details.PaiYan)">
<image :src="EquityList[4].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.XinFeng==1?'#424242':'#D6D6D6'}">{{EquityList[4].Title}}</text>
</view>
<view class="Listbox-item" >
<image :src="EquityList[5].ImagePath" v-if="details.PaiYan==1" mode="widthFix"></image> <image :src="EquityList[5].ImagePath" v-if="details.PaiYan==1" mode="widthFix"></image>
<image :src="EquityList[5].Image_n" v-else mode="widthFix"></image> <image :src="EquityList[5].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.PaiYan==1?'#424242':'#D6D6D6'}">{{EquityList[5].Title}}</text> <text class="list-item-text" :style="{color:details.PaiYan==1?'#424242':'#D6D6D6'}">{{EquityList[5].Title}}</text>
...@@ -141,13 +150,14 @@ ...@@ -141,13 +150,14 @@
<text class="list-item-text" :style="{color:details.KongTiao==1?'#424242':'#D6D6D6'}">{{EquityList[6].Title}}</text> <text class="list-item-text" :style="{color:details.KongTiao==1?'#424242':'#D6D6D6'}">{{EquityList[6].Title}}</text>
</view> </view>
<view class="Listbox-item" > <view class="Listbox-item" >
<image :src="EquityList[7].ImagePath" v-if="details.Caliber==1" mode="widthFix"></image> <image :src="EquityList[4].ImagePath" v-if="details.XinFeng==1" mode="widthFix"></image>
<image :src="EquityList[7].Image_n" v-else mode="widthFix"></image> <image :src="EquityList[4].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.Caliber==1?'#424242':'#D6D6D6'}">{{EquityList[7].Title}}</text> <text class="list-item-text" :style="{color:details.XinFeng==1?'#424242':'#D6D6D6'}">{{EquityList[4].Title}}</text>
</view> </view>
</view> </view>
<view class="brand-title"> <view class="brand-title">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-ggxq.png" mode="widthFix"></image> <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-tzxq.png" mode="widthFix"></image>
</view> </view>
<view style="margin-top: 30px;" v-if="details.Advertising!=''"> <view style="margin-top: 30px;" v-if="details.Advertising!=''">
<h-parse :content="details.Advertising" @navigate="clickDescription"></h-parse> <h-parse :content="details.Advertising" @navigate="clickDescription"></h-parse>
...@@ -168,15 +178,24 @@ ...@@ -168,15 +178,24 @@
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
<bianmarenTooltip
:gravity="gravity"
:tooltipShow="tooltipShow"
:btns="tooltipBtns"
:eleId="eleId"
></bianmarenTooltip>
</view> </view>
</template> </template>
<script> <script>
import hParse from "@/components/u-parse/parse.vue"; import hParse from "@/components/u-parse/parse.vue";
import bianmarenTooltip from '../components/bianmaren-tooltips.vue'
let timer
export default { export default {
components: { components: {
hParse,
hParse bianmarenTooltip
}, },
data() { data() {
return { return {
...@@ -213,8 +232,14 @@ ...@@ -213,8 +232,14 @@
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt-n.png"}, "Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt-n.png"},
{"Title":"管径","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj.png", {"Title":"管径","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj-n.png"}, "Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj-n.png"},
{"Title":"开口尺寸","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc-n.png"},
] ],
gravity:'top',
tooltipShow:false,
tooltipBtns:["今日sad"],
eleId:"",//点击元素
} }
}, },
onLoad(options) { onLoad(options) {
...@@ -236,6 +261,26 @@ ...@@ -236,6 +261,26 @@
this.mainColor = this.$uiConfig.mainColor; this.mainColor = this.$uiConfig.mainColor;
}, },
methods: { methods: {
showTips(id,text,showis){
clearInterval(timer);
if(this.eleId== id && this.tooltipShow == true){
this.tooltipShow = false
}else{
console.log(text,showis)
if(text!=undefined && text!=null && text!='' && showis ==1 ){
this.eleId = id;
this.tooltipBtns = [text]
this.tooltipShow = true;
timer = setTimeout(()=>{
this.tooltipShow = false;
},3000)
}else{
this.tooltipShow = false;
}
}
},
clickDescription(e) { clickDescription(e) {
console.log(e); console.log(e);
}, },
...@@ -282,7 +327,8 @@ ...@@ -282,7 +327,8 @@
}, },
scroll(e) { scroll(e) {
this.boxOption = Math.floor((e.detail.scrollTop-50)/1.5); this.boxOption = Math.floor((e.detail.scrollTop-50)/1.5);
this.titleStyle.opacity=((e.detail.scrollTop-100)<0?0:Math.floor(e.detail.scrollTop-100))+"%" this.titleStyle.opacity=((e.detail.scrollTop-100)<0?0:Math.floor(e.detail.scrollTop-100))+"%";
this.tooltipShow = false
this.$forceUpdate() this.$forceUpdate()
}, },
goback() { goback() {
......
pages/kotra/components/bianmaren-tooltips.vue 0 → 100644
View file @ 69bcbc56
<template>
<view>
<view id="just-tooltip"
class="just-tooltip animated flipInBottom"
:style="{width: 'auto', left: left+'px',top: top+'px',backgroundColor:backgroundColor,color:textColor}">
<view class="just-con">
<text class="item"
:style="{borderColor:splitColor}"
v-for="item in btns" @click="btnClick(item)">{{ item }}</text>
</view>
<view :class="justClass" :style="justStyleObject"></view>
</view>
</view>
</template>
<script>
export default {
name: 'BianmarenTooltip',
props: {
//是否显示
tooltipShow:{
type: Boolean,
default:false
},
//颜色
textColor:{
type: String,
default: "#ffffff"
},
//背景颜色
backgroundColor:{
type: String,
default: "#000000"
},
//分隔符颜色
splitColor:{
type: String,
default: "#ffffff"
},
//按钮组
btns: {
type: Array,
default: ['HelloWorld',"你好啊"]
},
//点击元素Id
eleId: {
type: String,
default: ""
},
//方向 bottom,top,left,right
gravity:{
type:String,
default:"bottom"
},
distance:{
type:Number,
default:10
}
},
data() {
return {
left:-9999,
top:0,
justStyleObject:{}
};
},
watch:{
eleId(){
this.setPosition();
},
tooltipShow(){
this.setPosition();
}
},
mounted() {
this.setPosition();
},
computed:{
justClass(){
return "just-"+this.gravity;
}
},
methods:{
setPosition(){
var _this = this;
if(!_this.tooltipShow){
_this.left = -9999;
return;
}
// console.info(_this.parentThis)
// console.info(_this.eleId)
const query = uni.createSelectorQuery().in(_this.$parent);
query.select('#'+_this.eleId).boundingClientRect(data => {
var pos = { x: data.left, y: data.top };
var wh = { w: data.width, h: data.height };
// console.info(pos)
// console.info(wh)
var outerWidth = 0;
var outerHeight = 0;
const query2 = uni.createSelectorQuery().in(_this);
query2.select('#just-tooltip').boundingClientRect(dd => {
// console.log(dd)
outerWidth = dd.width;
outerHeight = dd.height;
// console.log("outerWidth:"+outerWidth);
// console.log("outerHeight:"+outerHeight);
const systemInfo = uni.getSystemInfoSync();
var windowWidth = systemInfo.windowWidth;
var rightTmp = ( pos.x + wh.w / 2 ) + outerWidth / 2 ;
var leftTmp = ( pos.x + wh.w / 2 ) - outerWidth / 2 ;
if("top" === _this.gravity){
if(rightTmp > windowWidth ){
_this.left = pos.x + wh.w - outerWidth;
_this.top = pos.y - outerHeight - _this.distance;
_this.justStyleObject = {
'left':(outerWidth - wh.w/2) + "px",
'borderColor':_this.backgroundColor+" transparent transparent transparent"
};
}else if( leftTmp < 0 ){
_this.left = pos.x;
_this.top = pos.y - outerHeight - _this.distance;
_this.justStyleObject = {
'left':wh.w/2 + "px",
'borderColor':_this.backgroundColor+" transparent transparent transparent"
};
}else{
_this.left = pos.x - (outerWidth - wh.w)/2;
_this.top = pos.y - outerHeight - _this.distance
_this.justStyleObject = {
'left':"50%",
'borderColor':_this.backgroundColor+" transparent transparent transparent"
};
}
}
if('bottom' === _this.gravity){
if(rightTmp > windowWidth ){
_this.left = pos.x + wh.w - outerWidth;
_this.top = pos.y + wh.h + _this.distance;
_this.justStyleObject = {
'left':(outerWidth - wh.w/2)+'px',
'borderColor':"transparent transparent "+_this.backgroundColor+" transparent"
};
}else if( leftTmp < 0 ){
_this.left = pos.x;
_this.top = pos.y + wh.h + _this.distance;
_this.justStyleObject = {
left:wh.w/2 + 'px',
'borderColor':"transparent transparent "+_this.backgroundColor+" transparent"
}
}else{
_this.left = pos.x - (outerWidth - wh.w)/2;
_this.top = pos.y + wh.h + _this.distance;
_this.justStyleObject = {
left:'50%',
'borderColor':"transparent transparent "+_this.backgroundColor+" transparent"
}
}
}
if('left' === _this.gravity){
_this.left = pos.x - outerWidth - _this.distance;
_this.top = pos.y - (outerHeight - wh.h)/2;
_this.justStyleObject = {
top:'50%',
'borderColor':"transparent transparent transparent " + _this.backgroundColor
}
}
if('right' === _this.gravity){
_this.left = pos.x + wh.w + _this.distance;
_this.top = pos.y - (outerHeight - wh.h)/2;
_this.justStyleObject = {
top:'50%',
'borderColor':"transparent "+_this.backgroundColor+" transparent transparent"
}
}
}).exec();
}).exec();
},
//按钮点击
btnClick(btnName){
this.$emit('btnClick',btnName)
}
}
}
</script>
<style>
/* just-Tips */
.just-tooltip{position:absolute;left:0;top:0;border-radius:5px;background:#000;/*display:inline-block;*/z-index:9999;}
.just-tooltip .just-con{padding:8px 10px;}
.just-tooltip .just-top,
.just-tooltip .just-bottom,
.just-tooltip .just-left,
.just-tooltip .just-right{content:"";position:absolute;width:0;height:0;overflow:hidden;border-style:solid;}
.just-tooltip .just-top{left:50%;top:100%;border-width: 7px 5px 0 5px;margin-left:-5px;
border-color: #1B1E24 transparent transparent transparent;
_border-color: #1B1E24 #000000 #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.just-tooltip .just-bottom{ left:50%; top:-7px;border-width: 0 5px 7px 5px;margin-left:-5px;
border-color: transparent transparent #1B1E24 transparent;
_border-color:#000000 #000000 #1B1E24 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');}
.just-tooltip .just-left{ right:-7px; top:50%;border-width: 5px 0 5px 7px;margin-top:-5px;;
border-color: transparent transparent transparent #1B1E24;
_border-color:#000000 #000000 #000000 #1B1E24;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.just-tooltip .just-right{ left:-7px; top:50%;border-width: 5px 7px 5px 0;margin-top:-5px;
border-color: transparent #1B1E24 transparent transparent;
_border-color:#000000 #000000 #000000 #1B1E24;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.just-tooltip .just-confirm{text-align:center;padding:10px 0;margin:0 10px 10px 10px;}
.just-tooltip .just-yes, .just-tooltip .just-no{background:#fff;color:#000;border:0;padding:5px 10px;}
.just-tooltip .just-no{margin-left:10px;}
/* Animations */
.animated{
-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;
-webkit-animation-duration:.5s;-moz-animation-duration:.5s;-ms-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s;
}
@-webkit-keyframes flipInUp {
0% { -webkit-transform: perspective(400px) rotateX(-90deg); opacity: 0;}
40% { -webkit-transform: perspective(400px) rotateX(5deg);}
70% { -webkit-transform: perspective(400px) rotateX(-5deg);}
100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1;}
}
@-moz-keyframes flipInUp {
0% {-moz-transform: perspective(400px) rotateX(-90deg);opacity: 0;}
40% {-moz-transform: perspective(400px) rotateX(5deg);}
70% {-moz-transform: perspective(400px) rotateX(-5deg);}
100% {-moz-transform: perspective(400px) rotateX(0deg);opacity: 1;}
}
@-o-keyframes flipInUp {
0% {-o-transform: perspective(400px) rotateX(-90deg);opacity: 0;}
40% {-o-transform: perspective(400px) rotateX(5deg);}
70% {-o-transform: perspective(400px) rotateX(-5deg);}
100% {-o-transform: perspective(400px) rotateX(0deg);opacity: 1;}
}
@keyframes flipInUp {
0% {transform: perspective(400px) rotateX(-90deg);opacity: 0;}
40% {transform: perspective(400px) rotateX(5deg);}
70% {transform: perspective(400px) rotateX(-5deg);}
100% {transform: perspective(400px) rotateX(0deg);opacity: 1;}
}
@-webkit-keyframes flipInRight {
0% { -webkit-transform: perspective(400px) rotateY(-90deg); opacity: 0;}
40% { -webkit-transform: perspective(400px) rotateY(5deg);}
70% { -webkit-transform: perspective(400px) rotateY(-5deg);}
100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1;}
}
@-moz-keyframes flipInRight {
0% {-moz-transform: perspective(400px) rotateY(-90deg);opacity: 0;}
40% {-moz-transform: perspective(400px) rotateY(5deg);}
70% {-moz-transform: perspective(400px) rotateY(-5deg);}
100% {-moz-transform: perspective(400px) rotateY(0deg);opacity: 1;}
}
@-o-keyframes flipInRight {
0% {-o-transform: perspective(400px) rotateY(-90deg);opacity: 0;}
40% {-o-transform: perspective(400px) rotateY(5deg);}
70% {-o-transform: perspective(400px) rotateY(-5deg);}
100% {-o-transform: perspective(400px) rotateY(0deg);opacity: 1;}
}
@keyframes flipInRight {
0% {transform: perspective(400px) rotateY(-90deg);opacity: 0;}
40% {transform: perspective(400px) rotateY(5deg);}
70% {transform: perspective(400px) rotateY(-5deg);}
100% {transform: perspective(400px) rotateY(0deg);opacity: 1;}
}
.flipInTop, .flipInBottom .flipInLeft .flipInRight { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important}
.flipInTop, .flipInBottom { -webkit-animation-name: flipInUp; -moz-animation-name: flipInUp; -o-animation-name: flipInUp; animation-name: flipInUp; }
.flipInLeft, .flipInRight { -webkit-animation-name: flipInRight; -moz-animation-name: flipInRight; -o-animation-name: flipInRight; animation-name: flipInRight; }
@-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;}}
@-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;}}
@-o-keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
@keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
.fadeIn{-webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn;}
.moveTop{
-webkit-animation: moveTop .6s ease both;
animation: moveTop .6s ease both;
}
.moveBottom{
-webkit-animation: moveBottom .6s ease both;
animation: moveBottom .6s ease both;
}
.moveLeft{
-webkit-animation: moveLeft .6s ease both;
animation: moveLeft .6s ease both;
}
.moveRight{
-webkit-animation: moveRight .6s ease both;
animation: moveRight .6s ease both;
}
@-webkit-keyframes moveTop {
from {opacity: 0;-webkit-transform: translateY(-20px);}
to {opacity: 1;-webkit-transform: translateY(0); }
}
@-webkit-keyframes moveBottom {
from {opacity: 0;-webkit-transform: translateY(20px);}
to {opacity: 1;-webkit-transform: translateY(0); }
}
@-webkit-keyframes moveLeft {
from {opacity: 0;-webkit-transform: translateX(-20px);}
to {opacity: 1;-webkit-transform: translateX(0); }
}
@-webkit-keyframes moveRight {
from {opacity: 0;-webkit-transform: translateX(20px);}
to {opacity: 1;-webkit-transform: translateX(0); }
}
.item{
display: inline-block;
border-right: #fff solid 1px;
padding: 0 20rpx;
font-size: 12px;
}
.item:last-child{
border: none;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment