You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

455 lines
24 KiB
HTML

5 years ago
<extend name="Public/base" />
<block name="body">
<link rel="stylesheet" type="text/css" href="__STATIC__/bootstrap.min.css" media="all">
<link rel="stylesheet" type="text/css" href="__CSS__/admin_table.css" media="all">
<link rel="stylesheet" type="text/css" href="__STATIC__/webuploader/webuploader.css" media="all">
5 years ago
<script src="__STATIC__/md5.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="__STATIC__/webuploader/webuploader.js"></script>
5 years ago
<div class="cf main-place top_nav_list navtab_list">
{:W('Index/navigation',array('value'=>'PointType/lists','compare'=>'PointShop/lists'))}
<h3 class="page_title">新增积分商品</h3>
<p class="description_text"></p>
</div>
<!-- 标签页导航 -->
<div class="tab-wrap">
<div class="tab-content tabcon1711 tabcon17112">
<!-- 表单 -->
<form id="form" action="{:U('add')}" method="post" class="form-horizontal">
<!-- 基础文档模型 -->
<div id="tab1" class="tab-pane in tab1">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="l"><i class="mustmark" style="margin-left:-7px">*</i>商品名称:</td>
<td class="r">
<input type="text" class="txt" name="good_name" value="{$data['good_name']}">
</td>
</tr>
<tr>
<td class="l"><i class="mustmark" style="margin-left:-7px">*</i>商品价格:</td>
<td class="r">
<input type="text" class="txt" name="price" value="{$data['price']}">
</td>
</tr>
<tr class="picbox">
<td class="l">商品封面:</td>
<td class="r" >
<!-- <input type="file" id="upload_picture_cover">
5 years ago
<input type="hidden" name="cover" id="cover_id_cover" value="" />
<div class="upload-img-box">
<notempty name="data['cover']">
<div class="upload-pre-item"><img src=""/></div>
</notempty>
</div>-->
<input type="hidden" name="cover" id="cover_id_cover" value=""/>
<div id="uploader-demo" >
<div id="cover">
<div class="webuploader-pick" style="line-height: 13px">上传图片</div></div>
<div id="coverList" class="uploader-list" style="display: flex;"></div>
</div>
5 years ago
<span class="notice-text">552x374px</span>
</td>
</tr>
<tr>
<td class="l">商品类型:</td>
<td class="r" >
<span class="form_radio">
<label><input type="radio" class="inp_radio good_type" value="1" name="good_type" checked="checked">实物
</label><label><input type="radio" class="inp_radio good_type" value="2" name="good_type" >虚拟物品
</label></span>
</td>
</tr>
<tr class="good_num">
<td class="l"><i class="mustmark" style="margin-left:-7px">*</i>商品数量:</td>
<td class="r">
<input type="text" class="txt" name="number" value="{$data['number']}">
</td>
</tr>
<tr class="good_key">
<td class="l"><i class="mustmark" style="margin-left:-7px">*</i>商品兑换码:</td>
<td class="r">
<textarea class="txt_area2" name="good_key" placeholder="一行一个">{$data.good_key}</textarea>
</td>
</tr>
<tr class="good_key">
<td class="l"><i class="mustmark" style="margin-left:-7px">*</i>使用方法:</td>
<td class="r">
<textarea class="txt_area" name="good_usage">{$data.good_usage}</textarea>
</td>
</tr>
<tr>
<td class="l"><i class="mustmark" style="margin-left:-7px">*</i>商品详情:</td>
<td class="r">
<textarea class="txt_area" name="good_info">{$data.good_info}</textarea>
</td>
</tr>
<tr>
<td class="l">状态:</td>
<td class="r" >
<input type="radio" class="inp_radio" value="1" name="status" checked="checked">开启
<input type="radio" class="inp_radio" value="2" name="status" >关闭
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-item cf">
<input type="hidden" name="id" value="{$data.id}">
<button class="submit_btn ajax-post mlspacing " id="submit" type="submit" target-form="form-horizontal">确 定</button>
<a class="submit_btn " alt="返回上一页" title="返回上一页" href="javascript:window.history.back();" >
返回
</a>
</div>
</form>
</div>
</div>
<div class="common_settings">
<span class="plus_icon"><span><img src="__IMG__/zwmimages/icon_jia.png"></span></span>
<form class="addShortcutIcon">
<input type="hidden" name="title" value="{$m_title}">
<input type="hidden" name="url" value="PointType/lists">
</form>
<a class="ajax-post add-butn <notempty name='commonset'>addSIsetted</notempty>" href="javascript:;" target-form="addShortcutIcon" url="{:U('Think/addShortcutIcon')}"><img src="__IMG__/zwmimages/icon_jia.png"><span><notempty name='commonset'>已添加<else />添加至常用设置</notempty></span></a>
</div>
</block>
<block name="script">
<script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
//导航高亮
highlight_subnav("{:U('PointType/lists')}");
$('#submit').click(function(){
$('#form').submit();
});
$(function () {
good_type();
$(".good_type").click(function(){
good_type();
});
});
function good_type(){
var type = $(":input[name='good_type']:checked").val();
if(type == 1){
$(".good_key").hide();
$(".good_num").show();
}else{
$(".good_key").show();
$(".good_num").hide();
}
}
//上传游戏封面
/* 初始化上传插件 */
$("#upload_picture_cover").uploadify({
"height" : 30,
"swf" : "__STATIC__/uploadify/uploadify.swf",
"fileObjName" : "download",
"buttonText" : "上传封面",
"uploader" : "{:U('File/uploadPicture',array('session_id'=>session_id(),'flag'=>true))}",
"width" : 120,
'removeTimeout' : 1,
'fileTypeExts' : '*.jpg; *.jpeg; *.png; *.gif;',
"onUploadSuccess" : upload_picture_cover{$field.name},
'onFallback' : function() {
alert('未检测到兼容版本的Flash.');
}
});
function upload_picture_cover{$field.name}(file, data){
console.log(data);
var data = $.parseJSON(data);
var src = '';
if(data.status){
$("#cover_id_cover").val(data.id);
src = data.url || '__ROOT__' + data.path;
$("#cover_id_cover").parent().find('.upload-img-box').html(
'<div class="upload-pre-item"><img src="' + src + '"/></div>'
);
} else {
updateAlert(data.info);
setTimeout(function(){
$('#top-alert').find('button').click();
$("#upload_picture_cover").removeClass('disabled').prop('disabled',false);
},1500);
}
}
</script>
<script>
var userInfo = {userId:"kazaff", md5:""}; //用户会话信息
var chunkSize = 5000 * 1024; //分块大小
var uniqueFileName = null; //文件唯一标识符
var md5Mark = null;
var backEndUrl = "{:U('File/shard_upload',array('type'=>1,'session_id'=>session_id()))}";
WebUploader.Uploader.register({
"before-send-file" : "beforeSendFile",
"before-send" : "beforeSend",
"after-send-file" : "afterSendFile"
}, {
beforeSendFile: function(file){
//秒传验证
if (file['source']['ext'] === 'zip' || file['source']['ext'] === 'rar') {
var task = new $.Deferred();
var start = new Date().getTime();
(new WebUploader.Uploader()).md5File(file, 0, 10*1024*1024).progress(function(percentage){
//console.log(percentage);
}).then(function(val){
//console.log("总耗时: "+((new Date().getTime()) - start)/1000);
md5Mark = val;
userInfo.md5 = val;
$.ajax({
type: "POST"
, url: backEndUrl
, data: {status: "md5Check", md5: val}
, cache: false
, timeout: 1000 //todo 超时的话,只能认为该文件不曾上传过
, dataType: "json"
}).then(function(data, textStatus, jqXHR){
alert(data.chunk);
//console.log(data);
if(data.ifExist){ //若存在这返回失败给WebUploader表明该文件不需要上传
task.reject();
uploader.skipFile(file);
file.path = data.path;
}else{
task.resolve();
//拿到上传文件的唯一名称,用于断点续传
uniqueFileName = md5(''+userInfo.userId+file.name+file.type+file.lastModifiedDate+file.size);
}
}, function(jqXHR, textStatus, errorThrown){ //任何形式的验证失败,都触发重新上传
task.resolve();
//拿到上传文件的唯一名称,用于断点续传
uniqueFileName = md5(''+userInfo.userId+file.name+file.type+file.lastModifiedDate+file.size);
});
});
return $.when(task);
}
}
, beforeSend: function(block){
//分片验证是否已传过,用于断点续传
if (block['file']['source']['ext'] === 'zip' || block['file']['source']['ext'] === 'rar') {
var task = new $.Deferred();
$.ajax({
type: "POST"
, url: backEndUrl
, data: {
status: "chunkCheck"
, name: uniqueFileName
, chunkIndex: block.chunk
, size: block.end - block.start
}
, cache: false
, timeout: 1000 //todo 超时的话,只能认为该分片未上传过
, dataType: "json"
}).then(function(data, textStatus, jqXHR){
if(data.ifExist){ //若存在返回失败给WebUploader表明该分块不需要上传
task.reject();
}else{
task.resolve();
}
}, function(jqXHR, textStatus, errorThrown){ //任何形式的验证失败,都触发重新上传
task.resolve();
});
return $.when(task);
}
}
, afterSendFile: function(file){
if (file['source']['ext'] === 'zip' || file['source']['ext'] === 'rar') {
var chunksTotal = 0;
if((chunksTotal = Math.ceil(file.size/chunkSize)) > 1){
//合并请求
var task = new $.Deferred();
$.ajax({
type: "POST"
, url: backEndUrl
, data: {
status: "chunksMerge"
, name: uniqueFileName
, chunks: chunksTotal
, ext: file.ext
, md5: md5Mark
}
, cache: false
, dataType: "json"
}).then(function(data, textStatus, jqXHR){
//todo 检查响应是否正常
task.resolve();
file.path = data.path;
$("#file_name").val(data.name);
$("#file_url").val(data.path+'/'+data.name);
$("#file_size").val(file.size);
}, function(jqXHR, textStatus, errorThrown){
task.reject();
});
return $.when(task);
}else{
//UploadComlate(file);
}
}
}
});
</script>
<script>
var uploaderImgcover= WebUploader.create({
// 选完文件后,是否自动上传。
auto: true,
// swf文件路径
swf: '__STATIC__/webuploader/Uploader.swf',
server: "{:U('File/uploadPicture',array('session_id'=>session_id(),'flag'=>true))}",
// 选择文件的按钮。可选。
// 内部根据当前运行是创建可能是input元素也可能是flash.
pick: {
id:'#cover',
multiple:true
},
// dnd: false,
paste: document.body,
accept: {
title: '图片',
extensions: 'png,gif,jpg,jpeg,bmp',
mimeTypes: '.png,.gif,.jpg,.jpeg,.bmp',
},
// 不压缩image, 默认如果是jpeg文件上传前会压缩一把再上传
resize: false,
disableGlobalDnd: true,
fileNumLimit:1,
threads:5,
thumb:true,
compress:false,
prepareNextFile: true,
formData: function(){return $.extend(true, {}, userInfo);},
chunked:false,
duplicate: true
});
var imgcoverListData = [];
<?php if (!empty($config['cover_data'])) :?>
var html = '';
$('#coverList').css('margin-top','10px');
<?php foreach ($config['cover_data'] as $value) {?>
<?php $value = (int)$value;?>
imgcoverListData.push(<?=$value?>);
html += '<div id="' + <?=$value?> + '" class="item flooring_page_img_box" style="margin-right: 10px;">';
html += '<a href="javascript:;"><img src="<?=get_cover($value,"path")?>" style="width: 100px;height: 100px;cursor: move;"></a>';
html += '<h4 class="info" style="text-align: center;">';
html += '<a href="javascript:;" class="jsdelzip table_click" style="float:none;display:inline-block;" img-id="' + <?=$value?> + '">删除</a>';
html += '</h4>';
html += '<div class="progress progress-striped active" style="display: none;">';
html += '<div class="progress-bar" role="progressbar" style="width: 100%;">100%</div>';
html += '</div>';
html += '</div>';
<?php }?>
$('#coverList').html(html);
$('#coverList').children().children('h4').children('.jsdelzip').on('click', function() {
var thisId = $(this).attr('img-id');
$(this).parent().parent().remove();
$.each(imgcoverListData,function(index, item) {
if (thisId == item) {
imgcoverListData.splice(index,1);
return false;
}
});
setcoverVal();
});
<?php endif ;?>
// 当有文件被添加进队列的时候
var thisIndex = 0;
var imgcoverList = $("#coverList");
uploaderImgcover.on( 'fileQueued', function( file ) {
var html = '';
html += '<div id="' + file.id + '" class="item" style="margin-right: 10px;">';
html += '<a href="javascript:;"><img src="" style="width: 100px;height: 100px;cursor: move;"></a>';
html += '<h4 class="info">' + file.name + '</h4>';
html += '<p class="state">等待上传...</p>';
html += '</div>';
imgcoverList.append(html);
imgcoverList.css('margin-top','10px');
var img = imgcoverList.children('#'+file.id).find('img');
uploaderImgcover.makeThumb(file, function (error, src) {
if (error) {
return;
}
img.attr('src', src);
}, 300, 300);
});
// 文件上传过程中创建进度条实时显示。
uploaderImgcover.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo( $li ).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css( 'width', percentage * 100 + '%' );
$percent.text( (percentage * 100).toFixed(0) + '%' );
});
uploaderImgcover.on( 'uploadSuccess', function( file , response) {
imgcoverListData.push(Number(response.id));
console.log(imgcoverListData)
setcoverVal();
$( '#'+file.id ).find('p.state').text('已上传').fadeOut(800);
//alert(JSON.stringify(response));
$('#'+file.id).find('h4.info').append('<a href="javascript:;" class="jsdelzip table_click" style="float:none;display:inline-block;margin-left:10px;">删除</a>');
$('#'+file.id).find('.jsdelzip').on('click',function() {
uploaderImgcover.removeFile( file.id );
$('#'+file.id).remove();
$.each(imgcoverListData,function(index, item) {
if (response.id == item) {
imgcoverListData.splice(index,1);
return false;
}
});
setcoverVal();
console.log(imgcoverListData);
return false;
});
});
uploaderImgcover.on('uploadError', function(file) {
$( '#'+file.id ).find('p.state').text('上传出错');
});
uploaderImgcover.on( 'uploadComplete', function(file) {
$( '#'+file.id ).find('.progress').fadeOut();
});
function setcoverVal()
{
var cover = '';
$.each(imgcoverListData,function(index, item) {
cover += item + ',';
});
cover = cover.substring(0, cover.length - 1);
$("input[name=cover]").val(cover);
}
</script>
5 years ago
</block>