初始上传
This commit is contained in:
131
addon/cashier/component/view/payment_qrcode/css/design.css
Executable file
131
addon/cashier/component/view/payment_qrcode/css/design.css
Executable file
@@ -0,0 +1,131 @@
|
||||
@CHARSET "UTF-8";
|
||||
/* 付款码组件 */
|
||||
|
||||
.payment-qrocde-box {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.payment-qrocde-box .qrocde-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.payment-qrocde-box .qrocde-left .qrocde-desc {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.payment-qrocde-box .qrocde-left .qrocde-desc .iconfont {
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.payment-qrocde-box .qrocde-left .qrocde-action {
|
||||
padding-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.payment-qrocde-box .qrocde-left .qrocde-action div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
width: 115px;
|
||||
height: 43px;
|
||||
border-radius: 25px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.payment-qrocde-box .qrocde-left .qrocde-action div:first-of-type {
|
||||
margin-right: 23px;
|
||||
background-color: #58be6a;
|
||||
}
|
||||
|
||||
.payment-qrocde-box .qrocde-left .qrocde-action div:last-of-type {
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
.payment-qrocde-box .qrocde-left .qrocde-action div .iconfont {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.payment-qrocde-box .qrocde-left .qrocde-action div .action-name {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.payment-qrocde-box .qrocde-right {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 8px;
|
||||
width: 45px;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.payment-qrocde-box .qrocde-right .name {
|
||||
font-size: 13px;
|
||||
writing-mode: tb-rl;
|
||||
color: #fff;
|
||||
letter-spacing: 3px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.payment-qrocde-box .qrocde-right .iconfont {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.payment-qrocde-box .qrocde-right::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border-radius: 50%;
|
||||
background-color: #58be6a;
|
||||
transform: translateY(-50%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.payment-popup {
|
||||
padding: 0 15px 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.payment-popup .head-wrap {
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.payment-popup .head-wrap .iconfont {
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.payment-popup .content-wrap {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.payment-popup button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
57
addon/cashier/component/view/payment_qrcode/design.html
Executable file
57
addon/cashier/component/view/payment_qrcode/design.html
Executable file
@@ -0,0 +1,57 @@
|
||||
<nc-component :data="data[index]" class="diy-payment-qrcode-wrap">
|
||||
|
||||
<!-- 预览 -->
|
||||
<template slot="preview">
|
||||
<div class="payment-qrocde-box">
|
||||
<div class="qrocde-left">
|
||||
<div class="qrocde-desc">
|
||||
<span>门店消费时使用，支付时点击下方展示付款码</span>
|
||||
<!-- <span class="iconfont iconshuaxin"></span>-->
|
||||
</div>
|
||||
<div class="qrocde-action">
|
||||
<div>
|
||||
<i class="iconfont iconfukuanma"></i>
|
||||
<span class="action-name">付款码</span>
|
||||
</div>
|
||||
<div>
|
||||
<i class="iconfont iconsaomafu"></i>
|
||||
<span class="action-name">扫码付</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qrocde-right">
|
||||
<span class="iconfont iconzhifu1"></span>
|
||||
<span class="name">门店支付</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<diy-payment-qrcode-sources></diy-payment-qrcode-sources>
|
||||
<div class="layui-form-item checkbox-wrap">
|
||||
<label class="layui-form-label sm">展示开关</label>
|
||||
<div class="layui-input-block">
|
||||
<span v-if="nc.control == true">显示</span>
|
||||
<span v-else>隐藏</span>
|
||||
<div v-if="nc.control == true" @click="nc.control = false" class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
|
||||
<div v-else @click="nc.control = true" class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
|
||||
</div>
|
||||
<div class="word-aux diy-word-aux">安装收银台插件展示，用于收银台线下扫码</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 样式编辑 -->
|
||||
<template slot="edit-style"></template>
|
||||
|
||||
<!-- 资源 -->
|
||||
<template slot="resource">
|
||||
<js>
|
||||
</js>
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
BIN
addon/cashier/component/view/payment_qrcode/img/preview.png
Executable file
BIN
addon/cashier/component/view/payment_qrcode/img/preview.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
33
addon/cashier/component/view/payment_qrcode/js/design.js
Executable file
33
addon/cashier/component/view/payment_qrcode/js/design.js
Executable file
@@ -0,0 +1,33 @@
|
||||
var diyPaymentQrcodeHtml = '<div></div>';
|
||||
|
||||
Vue.component("diy-payment-qrcode-sources", {
|
||||
template: diyPaymentQrcodeHtml,
|
||||
data: function () {
|
||||
return {
|
||||
data: this.$parent.data,
|
||||
styleList: [
|
||||
{text: '样式一', value: 1},
|
||||
{text: '样式二', value: 2},
|
||||
{text: '样式三', value: 3},
|
||||
{text: '样式四', value: 4}
|
||||
]
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
this.$parent.data.ignore = ['componentBgColor','componentAngle'];//加载忽略内容 -- 其他设置中的属性设置
|
||||
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||||
|
||||
// 组件所需的临时数据
|
||||
this.$parent.data.tempData = {
|
||||
styleList: this.styleList,
|
||||
methods: {
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
verify: function (index) {
|
||||
var res = {code: true, message: ""};
|
||||
return res;
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user