123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <template name="scrollTop">
- <!-- 商品详情价格判断 -->
- <view>
- <view
- class="supplierLogo"
- v-if="isShowSupplier && isShowIcon"
- @click="$api.navigateTo('/pages/login/supplier_login')"
- :style="{ bottom: bottom + 120 + 'rpx' }"
- >
- <image class="logo" src="https://static.caimei365.com/app/img/icon/supplier_logo.png" mode=""></image>
- <image
- class="close"
- @click.stop="isShowIcon = false"
- src="https://static.caimei365.com/app/img/supplier-login/close_icon.png"
- mode=""
- ></image>
- </view>
- <view class="scrollTop" :style="{ bottom: bottom + 'rpx' }">
- <view class="icon msg" v-if="isShowKefu">
- <!-- #ifdef MP-WEIXIN -->
- <button class="contact-btn" open-type="contact" @bindcontact="handleContact">
- <text class="iconfont icon-zixunrexian"></text>
- </button>
- <!-- #endif -->
- </view>
- <view class="icon top" @click="onPageScrollTop" :class="isScrollTop ? 'show' : 'none'">
- <text class="iconfont icon-zhiding"></text>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'scrollTop',
- props: {
- bottom: {
- type: Number,
- default: 100
- },
- isScrollTop: {
- type: Boolean,
- default: false
- },
- isShowKefu:{
- type: Boolean,
- default: true
- },
- isShowSupplier: {
- // 是否展示供应商服务图标
- type: Boolean,
- default: false
- }
- },
- data() {
- return {
- isPhone: false,
- telPhone: '0755-22907771',
- mobilePhone: '15338851365',
- isShowIcon: true
- }
- },
- created() {},
- methods: {
- onPageScrollTop() {
- uni.pageScrollTo({
- scrollTop: 0,
- duration: 600
- })
- },
- handleContact(e) {
- console.log(e.detail.path)
- console.log(e.detail.query)
- }
- }
- }
- </script>
- <style lang="scss">
- .supplierLogo {
- position: fixed;
- right: 20rpx;
- z-index: 100;
- width: 120rpx;
- height: 130rpx;
- display: flex;
- align-items: flex-end;
- justify-content: flex-end;
- .logo {
- width: 120rpx;
- height: 120rpx;
- }
- .close {
- position: absolute;
- top: 0;
- right: 0;
- width: 30rpx;
- height: 30rpx;
- }
- }
- .scrollTop {
- width: 80rpx;
- height: 120rpx;
- position: fixed;
- right: 20rpx;
- z-index: 99;
- .icon {
- width: 80rpx;
- height: 80rpx;
- border-radius: 50%;
- float: left;
- margin: 10rpx 0;
- line-height: 80rpx;
- text-align: center;
- .contact-btn {
- width: 80rpx;
- height: 80rpx;
- background-color: rgba(0, 0, 0, 0);
- line-height: 80rpx;
- .iconfont {
- font-size: $font-size-44;
- color: #ffffff;
- }
- }
- &.msg {
- background-image: linear-gradient(0deg, #f28e31 0%, #ff5b00 100%);
- }
- &.top {
- background-color: rgba(0, 0, 0, 0.4);
- &.show {
- opacity: 1;
- }
- &.none {
- opacity: 0;
- }
- }
- .iconfont {
- font-size: $font-size-44;
- color: #ffffff;
- }
- }
- }
- </style>
|