专注连锁门店会员营销管理系统
线上+线下+进销存+收银+会员2018-07-10 作者:秩名
如图:
如图,本次案例要做的是右下角的客服按钮和蓝色渐变的提示卡片,可随时关闭的。
微信官方给了客服按钮标签
<contact-button type="default-dark" size="100"></contact-button>
这个标签的样式不可修改,如果我们要换自己想改的图片,需要怎么做呢?就像我图片上的样式。
我这个客服控件是放在一个正圆的view里的居中位置,所以,我这里先通过position定位到居中位置,把size放到最大。
然后把透明度设置为0即可,然后给正圆这个view设置一图片背景,图片就是你想要显示的icon
提示卡片
提示卡片是一个view,view里面有一个×用来绑定隐藏事件的,bindtap="onChangeShowState"就是用来隐藏这个view的
index.wxml
<!-- 提示卡片 --> <view class="bright789_view_hide{{showView?'bright789_view_show':''}}"> <view class="bright789-text"> <view bindtap="onChangeShowState" class="close">×</view> <view class="text">有疑问可以点这里咨询哦</view> </view> </view> <!-- 悬浮按钮 --> <view class="zixun"><contact-button type="default-dark" size="100" class="kf"></contact-button></view>
index.wxss
.zixun{ width: 55px; height: 55px; background: url(http://wxpad.cn/yunpan/cdn/imgsrc/1530949769.png)no-repeat; position: fixed; bottom: 35px; right: 35px; border-radius: 50%; box-shadow: 0 0 5px #ddd; text-align: center; font-size: 14px; color: #333; } .zixun .kf{ position: relative; top: 0px; left: 0px; margin:15px auto; opacity: 0; } .bright789-text{ position: fixed; bottom: 100px; right: 65px; width: 200px; height: 45px; background-image: linear-gradient(to left, #4481eb 0%, #04befe 100%); border-bottom-left-radius: 50px; border-top-left-radius: 50px; border-top-right-radius: 50px; z-index: 99999999; box-shadow: 0 0 10px #eee; line-height: 40px; text-indent: 15px; } .bright789-text .close{ font-size: 1.5em; color: #fff; } .bright789-text .text{ font-size: 13px; color: #fff; margin-top: -38px; margin-left: 20px; } .bright789_view_hide{ display: none; }
index.js
//index.js //获取应用实例 const app = getApp() Page({ data: { showView: true }, onLoad: function (options) { // 生命周期函数--监听页面加载 showView: (options.showView == "true" ? true : false) }, onChangeShowState: function () { var that = this; that.setData({ showView: (!that.data.showView) }) } })
OK,制作完成!
HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序商店请查看:小程序商店
线上+线下+进销存+收银+会员门店零售管理好帮手
门店能实现快速收银,提升门店经营效率。
系统自带进销存管理,更好管理库存销售。
配备收银硬件一站式整体服务。
收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款
获取报价推荐文章
最新消息总结,开发一个小程序我们可以选择的第三方框架有5种,大家比较熟悉的有美团小程序框架mpvue,还有组件化框架等...
最近在调研小程序的分享能力,本篇文档主要是调研小程序关于分享方面的玩法,目的是学习小程序在项目应用以及玩法链上...
许多人在使用小程序,会有一个很麻烦的事情,就是使用过小程序之后,会不断的发送自己的定位消息,那么这个小程序的...
一款小程序,很多时候需要调用内置的照相机,实现拍照并图片上传,那么要如何实现呢?...
新零售模式的发展,传统酒水行业通过开创体验式的经营模式,来提升顾客的个性化服务,已经成为实现酒类行业的热门趋势...
现阶段美容行业的运营很不规范,虽然经过一轮一轮的实践之后,有很多美容店已经了解到信息化管理系统的重要性,但在实...
2024年怎样开加盟连锁店第七步(建立品牌知名度) 建立品牌知名度是成功创建一个加盟连锁品牌的关键步骤。一个强大的品...
2024年怎样开加盟连锁店第三步(开发一个详细的加盟手册) 加盟手册的重要性 加盟手册是加盟连锁品牌成功的基础组成部分...
在零售行业,线上线下一体化营销已经成为企业提升竞争力的关键策略。根据9的分析,2024年中国零售行业的数字化转型正在...
在数字化转型的浪潮中,线上线下推广方案已成为零售企业连接顾客、提升销售的关键策略。友数连锁,作为HiShop推出的新零...