diff --git a/mip-damoujia-orderposts/README.md b/mip-damoujia-orderposts/README.md new file mode 100644 index 00000000..d8b962e2 --- /dev/null +++ b/mip-damoujia-orderposts/README.md @@ -0,0 +1,64 @@ +# mip-damoujia-orderposts + +mip-damoujia-orderposts 用于div点击后切换div显示 并可以对图片进行选择和数量操作然后进行统计 + +标题|内容 +----|---- +类型|通用 +支持布局|responsive,fixed-height,fill,container,fixed +所需脚本|https://c.mipcdn.com/static/v1/mip-damoujia-orderposts/mip-damoujia-orderposts.js + +## 示例 +```html +
+
+
+
+
+
+
+
+
+
+
+
+``` + +### 基本用法 +```html + +
+
+
+ +
+
+
+ +
+
+ + 1 + +
+
+
+
+
+ +``` + +## button +说明：.container .page-section .section-header 下的button按钮具有切换列表页的功能 + 点击后页面计数前翻一页 页面为page-section +必选项: 否 +默认值：auto + +## btn-confirm +说明：class类别 当上级元素为.fg .qk的时候点击则切换下一页页面显示 +必选项: 否 +默认值：auto + +##pic-section +说明：class类别 当此类被点击之后 则自身追加一个selected 然后遍历上级的ul并清空已选择的selected + 防止重复selected \ No newline at end of file diff --git a/mip-damoujia-orderposts/mip-damoujia-orderposts.js b/mip-damoujia-orderposts/mip-damoujia-orderposts.js new file mode 100644 index 00000000..046ad4d1 --- /dev/null +++ b/mip-damoujia-orderposts/mip-damoujia-orderposts.js @@ -0,0 +1,277 @@ +/** + * @file mip-orderposts 组件 + * @author + */ + +define(function (require) { + var $ = require('zepto'); + var customElement = require('customElement').create(); + customElement.prototype.firstInviewCallback = function () { + var element = this.element; + var timer = null; + var currentIndex = 0; + $('.container .page-section .pic-section').each(function () { + $(this).height($(this).width()); + }); + $('.container .page-section.second, .container .page-section.third') + .delegate('.pic-section', 'click', function () { + $(this).closest('ul').find('.selected').removeClass('selected'); + $(this).addClass('selected'); + if (currentIndex === 2) { + if ($('.container .page-section.third .selected').parent().parent().index()) { + $('.container .page-section.fourth .subject').each(function () { + if ($('.container .page-section.second .sort-list') + .find('.selected').parent().parent().index()) { + $(this).find('.price-section img') + .attr('src', 'http://www.damoujia.com/images/wise/preorder/price_1099.png'); + $('.container .page-section.last .display-warpper.server .single-subject-price em') + .text('￥1099'); + } else { + $(this).find('.price-section img') + .attr('src', 'http://www.damoujia.com/images/wise/preorder/price_999.png'); + $('.container .page-section.last .display-warpper.server .single-subject-price em') + .text('￥999'); + } + }); + } else { + $('.container .page-section.fourth .subject').each(function () { + if ($('.container .page-section.second .sort-list').find('.selected').parent().parent() + .index()) { + $(this).find('.price-section img') + .attr('src', 'http://www.damoujia.com/images/wise/preorder/price_999.png'); + $('.container .page-section.last .display-warpper.server .single-subject-price em') + .text('￥999'); + } else { + $(this).find('.price-section img') + .attr('src', 'http://www.damoujia.com/images/wise/preorder/price_899.png'); + $('.container .page-section.last .display-warpper.server .single-subject-price em') + .text('￥899'); + } + }); + } + $('.container .page-section .user-selected').text($('.container .page-section.second .sort-list') + .find('.selected .inner-content').text() + ' ' + $('.container .page-section.third .sort-list') + .find('.selected .inner-content').text()); + $('.container .page-section.last .display-warpper.server .title') + .text($('.container .page-section.second .sort-list') + .find('.selected .inner-content').text() + ' ' + + $('.container .page-section.third .sort-list').find('.selected .inner-content').text()); + } + slideAnimate(currentIndex + 1); + }); + $('.container .page-section.fourth').delegate('.item-content', 'click', function () { + $(this).toggleClass('selected'); + if ($('.container .page-section.fourth').find('.selected').length) { + $('.container .page-section.fourth .btn-confirm').prop('disabled', false); + } else { + $('.container .page-section.fourth .btn-confirm').prop('disabled', true); + } + }); + $('.container .page-section.fourth').delegate('.btn-left, .btn-right', 'click', function (e) { + if ($(this).hasClass('btn-left')) { + if (parseInt($(this).parent().find('span').text(), 10) > 1) { + $(this).parent().find('span').text(parseInt($(this).parent().find('span').text(), 10) - 1); + } + } else { + $(this).parent().find('span').text(parseInt($(this).parent().find('span').text(), 10) + 1); + } + e.stopPropagation(); + }); + $('.container .page-section .section-header button').click(function () { + slideAnimate(currentIndex - 1); + }); + $('.container .page-section.fourth .btn-confirm').click(function () { + var secondIndex = $('.container .page-section.second .selected').parent().parent().index(); + var thirdIndex = $('.container .page-section.third .selected').parent().parent().index(); + var fgValues = $('.fg_values').val(); + var qkValues = $('.fg_values').val(); + $('
' + fgValues + '
').appendTo('.field'); + $('
' + qkValues + '
').appendTo('.field'); + var price = 0; + if (secondIndex === 0) { + if (thirdIndex === 0) { + price = 899; + } else { + price = 999; + } + } else { + if (thirdIndex === 0) { + price = 999; + } else { + price = 1099; + } + } + var sum = 0; + var subjectCount = 0; + var subsidiaryCount = 0; + var html = ''; + $('.container .page-section.fourth .subject .selected').each(function () { + sum += price * parseInt($(this).find('.handler-section span').text(), 10); + subjectCount += parseInt($(this).find('.handler-section span').text(), 10); + html += '
  • ' + $(this).find('.pic-title').text() + '' + $(this) + .find('.handler-section span').text() + ' x ￥' + price + '
    • '; + }); + $('.container .page-section.fourth .subsidiary .selected').each(function () { + subsidiaryCount += parseInt($(this).find('.handler-section span').text(), 10); + sum += 299 * parseInt($(this).find('.handler-section span').text(), 10); + html += '
  • ' + $(this).find('.pic-title').text() + '' + $(this) + .find('.handler-section span').text() + ' x ￥299
    • '; + }); + if (subjectCount >= 3) { + if (subsidiaryCount > 0) { + if (subsidiaryCount > 2) { + sum -= 299 * 2; + html += '
  • 附属区优惠 -2 x ￥299
    • '; + } else { + sum -= 299 * subsidiaryCount; + html += '
  • 附属区优惠 -' + subsidiaryCount + ' x ￥299
    • '; + } + } + } + $('.container .page-section.last .display-warpper.fee ul').html(html); + $('.container .page-section.last .display-warpper.fee .title em').text('￥' + sum); + slideAnimate(currentIndex + 1); + }); + + $('.container .page-section.first .section-content button').click(function () { + slideAnimate(currentIndex + 1); + }); + + $('.container .page-section.last .section-content button').click(function () { + var $page = $('.container .page-section.last'); + var $name = $page.find('.input-name'); + var $tel = $page.find('.input-tel'); + var cityv = $('.input-city').val(); + if (!$name.val().length) { + $('.input-name').parent().css({border: '1px solid red'}); + return; + } else { + $('.input-name').parent().css({border: 'none'}); + } + var statueCode = validatePhone($tel.val()); + if (statueCode !== 1) { + if (statueCode === 0) { + $('.input-tel').parent().css({border: '1px solid red'}); + return; + } else if (statueCode === 2) { + $('.input-tel').parent().css({border: '1px solid red'}); + return; + } else { + $('.input-tel').parent().css({border: '1px solid red'}); + return; + } + return; + } else { + $('.input-tel').parent().css({border: 'none'}); + } + if (!cityv) { + $('.input-city').parent().css({border: '1px solid red'}); + return false; + } else { + $('.input-city').parent().css({border: 'none'}); + } + submitInfo(); + }); + + function validatePhone(number) { + var len = number.length; + if (len === 0) { + return 0; + } else if (len !== 11) { + return 2; + } else { + var reg = /^\w*$/; + if (!reg.test(number)) { + return 3; + } else { + return 1; + } + } + } + + function submitInfo() { + var hs = $('.container .page-section.second .sort-list').find('.selected').parent().parent().index(); + var st = $('.container .page-section.third .sort-list').find('.selected').parent().parent().index() === 0 + ? 'online' : 'offline'; + var spaces = []; + var mj = $('.input-mj').val(); + var city = $('.input-city').val(); + var fgValues = $('.fgValues').val(); + var qkValues = $('.qkValues').val(); + var waidi = $('.waidi:checked').val(); + + $('.container .page-section.fourth .selected').each(function () { + spaces.push($(this).find('.pic-title').text() + ':' + $(this).find('.handler-warpper span').text()); + }); + $.post('', { + contactName: $('.container .page-section.last .input-name').val(), + contactTel: $('.container .page-section.last .input-tel').val(), + hs: hs, + st: st, + mj: mj, + city: city, + fgValues: fgValues, + qkValues: qkValues, + waidi: waidi, + spaces: spaces.join(',') + }, function (data, status) { + alert('申请成功'); + location.href = '/preorder'; + }); + } + + + $(document).on('click', '.tab_01 li', function () { + if ($(this).find('i').prop('class') === 'on') { + $(this).find('i').removeClass('on'); + $(this).closest('.section-content').find('.btn-confirm').prop('disabled', true); + } else { + $(this).find('i').addClass('on'); + $(this).closest('.section-content').find('.btn-confirm').prop('disabled', false); + } +// $(".fg").find(".btn-confirm").prop('disabled', false); + }); + + $(document).on('click', '.tab_02 li', function () { + $('.tab_02 li i').removeClass('on'); + if ($(this).find('i').prop('class') === 'on') { + $(this).find('i').removeClass('on'); + $(this).closest('.section-content').find('.btn-confirm').prop('disabled', true); + } else { + $(this).find('i').addClass('on'); + $(this).closest('.section-content').find('.btn-confirm').prop('disabled', false); + } +// $(".fg").find(".btn-confirm").prop('disabled', false); + }); + + + $('.fg .btn-confirm,.qk .btn-confirm').click(function () { + var fgValues = ''; + var qkValues = ''; + $('.tab_01 .on').each(function () { + fgValues += $(this).prev().prop('title') + ','; + }); + + $('.tab_02 .on').each(function () { + qkValues += $(this).prev().prop('title') + ','; + }); + + $('.fgValues').val(fgValues); + $('.qkValues').val(qkValues); + slideAnimate(currentIndex + 1); + }); + + + function slideAnimate(targetIndex) { + var $obj = null; + $obj = $('.container .page-world'); + $obj.animate({ + 'margin-left': -1.0 / $('.container .page-section').length * targetIndex * $obj.width() + + 'px' + }, function () { + currentIndex = targetIndex; + }); + } + }; + return customElement; +}); diff --git a/mip-damoujia-orderposts/mip-damoujia-orderposts.less b/mip-damoujia-orderposts/mip-damoujia-orderposts.less new file mode 100644 index 00000000..88118399 --- /dev/null +++ b/mip-damoujia-orderposts/mip-damoujia-orderposts.less @@ -0,0 +1,14 @@ +/** + * @file mip-damoujia-orderposts样式文件 + */ + +mip-damoujia-orderposts { + .container .page-section { + float: left; + position: relative; + /* width: 20%; */ + width: calc(100% / 7); + height: 100%; + overflow: auto; + } +} diff --git a/mip-damoujia-orderposts/package.json b/mip-damoujia-orderposts/package.json new file mode 100644 index 00000000..5ac6f25c --- /dev/null +++ b/mip-damoujia-orderposts/package.json @@ -0,0 +1,14 @@ +{ + "name": "mip-damoujia-orderposts", + "version": "1.0.0", + "description": "切换订单页面的效果,提交数据处理", + "contributors": [ + { + "name": "yb", + "email": "295151079@qq.com" + } + ], + "engines": { + "mip": ">=1.1.1" + } +}