-
Notifications
You must be signed in to change notification settings - Fork 69
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[platform] MrTangBH 提交组件改动：mip-damoujia-orderposts #186
Open
mip-audit-platform
wants to merge
2
commits into
master
Choose a base branch
from
dev-platform-b285c0809a0c7dedc7ff681034345666
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| <section> | ||
| <div class="page-world"> | ||
| <div class="page-section first"> | ||
| <div class="section-content"> | ||
| </div> | ||
| </div> | ||
| <div class="page-section second"> | ||
| <div class="section-content"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ``` | ||
|
|
||
| ### 基本用法 | ||
| ```html | ||
| <mip-damoujia-orderposts> | ||
| <div class="container"> | ||
| <div class="page-section"> | ||
| <div class="section-header"> | ||
| <button>上一步</button> | ||
| </div> | ||
| </div> | ||
| <div class="pic-section"> | ||
| <img src="/common/mobile/img/zmj/entry_garden.png"> | ||
| <div class="handler-section"> | ||
| <div class="handler-warpper"> | ||
| <button class="btn-left"></button> | ||
| <span>1</span> | ||
| <button class="btn-right"></button> | ||
| </div> | ||
| <div class="flag"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </mip-damoujia-orderposts> | ||
| ``` | ||
|
|
||
| ## button | ||
| 说明：.container .page-section .section-header 下的button按钮具有切换列表页的功能 | ||
| 点击后页面计数前翻一页 页面为page-section | ||
| 必选项: 否 | ||
| 默认值：auto | ||
|
|
||
| ## btn-confirm | ||
| 说明：class类别 当上级元素为.fg .qk的时候点击则切换下一页页面显示 | ||
| 必选项: 否 | ||
| 默认值：auto | ||
|
|
||
| ##pic-section | ||
| 说明：class类别 当此类被点击之后 则自身追加一个selected 然后遍历上级的ul并清空已选择的selected | ||
| 防止重复selected | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| $('<div class="title server-title">' + fgValues + '</div>').appendTo('.field'); | ||
| $('<div class="title server-title">' + qkValues + '</div>').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 += '<li><span>' + $(this).find('.pic-title').text() + '</span><em>' + $(this) | ||
| .find('.handler-section span').text() + ' x ￥' + price + '</em></li>'; | ||
| }); | ||
| $('.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 += '<li><span>' + $(this).find('.pic-title').text() + '</span><em>' + $(this) | ||
| .find('.handler-section span').text() + ' x ￥299</em></li>'; | ||
| }); | ||
| if (subjectCount >= 3) { | ||
| if (subsidiaryCount > 0) { | ||
| if (subsidiaryCount > 2) { | ||
| sum -= 299 * 2; | ||
| html += '<li><span>附属区优惠</span><em> -2 x ￥299</em></li>'; | ||
| } else { | ||
| sum -= 299 * subsidiaryCount; | ||
| html += '<li><span>附属区优惠</span><em> -' + subsidiaryCount + ' x ￥299</em></li>'; | ||
| } | ||
| } | ||
| } | ||
| $('.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; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| { | ||
| "name": "mip-damoujia-orderposts", | ||
| "version": "1.0.0", | ||
| "description": "切换订单页面的效果,提交数据处理", | ||
| "contributors": [ | ||
| { | ||
| "name": "yb", | ||
| "email": "[email protected]" | ||
| } | ||
| ], | ||
| "engines": { | ||
| "mip": ">=1.1.1" | ||
| } | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
组件描述过于不详细，如果是点击切换显示，可以使用 on 、<mip-data> 、m-bind 组合控制元素展示和隐藏。类似功能也可以尝试使用 mip 内置功能解决。