初始上传
This commit is contained in:
167
app/shop/view/component/promote_show.html
Executable file
167
app/shop/view/component/promote_show.html
Executable file
@@ -0,0 +1,167 @@
|
||||
<style>
|
||||
.marked-message{height: 48px;background: #FFF5ED;font-size: 14px;font-family: Source Han Sans SC;font-weight: 400;color: #666;line-height: 50px;padding: 0 16px;display: flex;}
|
||||
.promote-flex{display: flex;margin-top: 15px;padding: 0 10px 0;}
|
||||
.promote-img{background-color: #f8f8f8;display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;}
|
||||
.promote-img img{width: 160px;height: 160px;}
|
||||
.label-width{width: 100px;}
|
||||
.block-left{margin-left: 100px !important;display: flex;}
|
||||
.promote-download{margin-left: 20px;}
|
||||
.h5-path{margin-left: 20px;width: 300px;}
|
||||
.h5-path .fuzhi{width: 1px;height: 0px;border: 0px;}
|
||||
.h5-path span{display: block;margin-bottom: 10px;}
|
||||
.h5-path p input{height: 30px;line-height: 30px;border: 1px solid #e6e6e5;width: 150px;padding: 0px 5px;border-radius: 5px;margin-right: 10px;}
|
||||
</style>
|
||||
|
||||
<script type="text/html" id="promote">
|
||||
<div>
|
||||
<div class="marked-message">
|
||||
<p>活动可分享至多个渠道推广，增加曝光率，提升分享打开率。</p>
|
||||
</div>
|
||||
<div class="promote-flex">
|
||||
<div class="promote-img">
|
||||
<img src="{{ ns.img(d.h5.path) }}" alt="推广二维码">
|
||||
</div>
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label label-width">选择渠道：</label>
|
||||
<div class="layui-input-block block-left">
|
||||
<input type="radio" name="promote_type" value="h5" title="H5" checked lay-filter="promote_type" data-config='{{JSON.stringify(d.h5)}}'/>
|
||||
{if addon_is_exit('weapp', request()->siteid()) == 1}
|
||||
<input type="radio" name="promote_type" value="weapp" title="微信小程序" lay-filter="promote_type" data-config='{"type":"weapp","load":"true"}' />
|
||||
{/if}
|
||||
|
||||
{if addon_is_exit('pc', request()->siteid()) == 1}
|
||||
{{# if(d.pc && d.pc.path){ }}
|
||||
<input type="radio" name="promote_type" value="pc" title="PC" lay-filter="promote_type" />
|
||||
{{# } }}
|
||||
{/if}
|
||||
|
||||
{if addon_is_exit('aliapp', request()->siteid()) == 1 }
|
||||
<input type="radio" name="promote_type" value="aliapp" title="支付宝小程序" lay-filter="promote_type" data-config='{"type":"weapp","load":"true"}' />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="h5-path">
|
||||
<span>推广链接</span>
|
||||
<p class="tips text-color"><input type="text" value="{{d.h5.url}}" readonly /><a class="layui-btn" href="javascript:ns.copy('h5_url_{{ d.id }}');">复制</a></p>
|
||||
<input type="text" id="h5_url_{{ d.id }}" value="{{d.h5.url}}" readonly class="fuzhi"/>
|
||||
</div>
|
||||
<div class="promote-download">
|
||||
<a class="text-color" href="{{ ns.img(d.h5.path) }}" download>下载二维码</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function PromoteShow(param){
|
||||
param = param || {};
|
||||
let that = this;
|
||||
that.getPromoteUrl = param.url;
|
||||
that.getPromoteParam = param.param;
|
||||
that.promoteData = {};
|
||||
|
||||
that.getQrcode('h5', ()=>{
|
||||
that.open(()=>{
|
||||
that.getOtherQrcode();
|
||||
that.onSwitch();
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
PromoteShow.prototype.onSwitch = function (){
|
||||
let that = this;
|
||||
window.form.on('radio(promote_type)', function(radio){
|
||||
that.switchAction(radio.value);
|
||||
});
|
||||
}
|
||||
|
||||
PromoteShow.prototype.getOtherQrcode = function (){
|
||||
let that = this;
|
||||
var app_type_arr = ['weapp','aliapp'];
|
||||
app_type_arr.forEach((app_type)=>{
|
||||
that.getQrcode(app_type,function () {
|
||||
let radio_dom = $('input[name="promote_type"][value="'+app_type+'"]');
|
||||
if(that.promoteData[app_type]){
|
||||
radio_dom.attr('data-config',JSON.stringify(that.promoteData[app_type]))
|
||||
}else{
|
||||
radio_dom.attr('data-config',JSON.stringify({ type : app_type, path : '' }))
|
||||
}
|
||||
if(radio_dom.prop('checked')){
|
||||
that.switchAction(app_type);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
PromoteShow.prototype.getQrcode = function (app_type, callback){
|
||||
let that = this;
|
||||
let data = ns.deepclone(that.getPromoteParam);
|
||||
data.app_type = app_type;
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: that.getPromoteUrl,
|
||||
data: data,
|
||||
dataType: 'JSON',
|
||||
success: function (res) {
|
||||
if (res.code >= 0){
|
||||
if(res.data[app_type]){
|
||||
that.promoteData[app_type] = res.data[app_type];
|
||||
}
|
||||
callback();
|
||||
}else{
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
PromoteShow.prototype.open = function (callback){
|
||||
let that = this;
|
||||
laytpl($("#promote").html()).render(that.promoteData, function (html) {
|
||||
layer.open({
|
||||
type: 1,
|
||||
area: ['730px', '450px'],
|
||||
offset: '155px',
|
||||
title: ['推广'],
|
||||
content: html,
|
||||
success: function(){
|
||||
form.render();
|
||||
callback();
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
PromoteShow.prototype.switchAction = function (app_type){
|
||||
var dom = $('input[name="promote_type"][value="'+app_type+'"]');
|
||||
var data = $(dom).attr('data-config');
|
||||
if(data) data = JSON.parse(data);
|
||||
else data = {};
|
||||
if(app_type == 'h5' || app_type == 'pc') {
|
||||
var html = '<img src="'+ ns.img(data.path) +'"/>';
|
||||
$('.promote-img').html(html);
|
||||
$('.promote-download a').attr('href',ns.img(data.path)).show();
|
||||
$(".h5-path").show().find('input').val(data.url);
|
||||
}else {
|
||||
if(data.load){
|
||||
var html = '<div class="common-loading-wrap">';
|
||||
html += '<i class="common-loading-layer layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>';
|
||||
html += '</div>';
|
||||
$('.promote-img').html(html);
|
||||
$('.promote-download a').hide();
|
||||
}else if(data.path){
|
||||
var html = '<img src="'+ ns.img(data.path) +'"/>';
|
||||
$('.promote-img').html(html);
|
||||
$('.promote-download a').attr('href',ns.img(data.path)).show();
|
||||
}else{
|
||||
var html = '<span>小程序配置错误</span>';
|
||||
$('.promote-img').html(html);
|
||||
$('.promote-download a').hide();
|
||||
}
|
||||
$(".h5-path").hide();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user