feat: mobile文章详情页

app/index/controller/Article.php

@@ -129,12 +129,14 @@ class Article extends Common
 
         // 验证字段
         $validate = Validate::rule([
-            'name' => 'max:64',
+            'name'  => 'require|max:64',
-            'email' => 'email'
+            'email' => 'require|email'
         ])
         ->message([
-            'name.max' => '姓名不能超过64个字符',
+            'name.require'  => '姓名不能为空',
-            'email'    => '请输入正确的邮箱'
+            'name.max'      => '姓名不能超过:rule个字符',
+            'email.require' => '邮箱不能为空',
+            'email.email'   => '邮箱格式不正确'
         ]);
         if (!$validate->check($post)) {
             return error($validate->getError());
@@ -148,9 +150,9 @@ class Article extends Common
         ]);
         $ret = ArticleLeaveMessageModel::create($data);
         if ($ret->isEmpty()) {
-            return error('留言提交失败');
+            return error(lang('留言提交失败'));
         }
 
-        return success('留言提交成功');
+        return success(lang('留言提交成功'));
     }
 }

app/index/lang/en-us/mobile.php

@@ -15,6 +15,8 @@ return [
     '提交失败' => 'fail',
     '信息已成功提交！' => 'Add Success！',
     '信息提交失败！' => 'Add Fail！',
+    '留言提交失败' => 'Message submit failed',
+    '留言提交成功' => 'Message submit success',
     '当前选定语言的采购可选品类配置出错' => 'Current language configuration of purchase optional categories is incorrect',
 
     // 首页
@@ -29,6 +31,19 @@ return [
         '客服团队的工作时间：周一到周五，早9点到晚6点 平均应答时间：24小时内' => 'Our customer support is available Monday to Friday: 9am-6:00pm. Average answer time: 24h',
     ],
 
+    // 文章详情页
+    'article/detail' => [
+        '分享' => 'SHARE',
+        '留言' => 'Leave a Reply',
+        '名称' => 'Name',
+        '电子邮箱' => 'Email',
+        '您的电子邮件地址不会被公开' => 'Your email address will not be pulished.',
+        '留言内容' => 'Comment',
+        '提交留言' => 'POST COMMENT',
+        '你可能还喜欢' => 'Recommended for you',
+        '链接复制成功' => 'Link copied successfully',
+    ],
+
     // 产品分类
     'product/category' => [
         '查看全部' => 'View All',

app/index/view/mobile/article/detail.html

@@ -0,0 +1,149 @@
+{extend name="public/base" /}
+{block name="title"}
+    {notempty name="detail.seo_title"}<title>{$detail.seo_title}</title>{else /}{__BLOCK__}{/notempty}
+{/block}
+{block name="seo"}
+    {notempty name="detail.seo_keywords"}
+    <meta name="keywords" content="{$detail.seo_keywords}" />
+    <meta name="description" content="{$detail.seo_desc}" />
+    {else /}
+    {__BLOCK__}
+    {/notempty}
+{/block}
+{block name="style"}
+<link rel="stylesheet" href="__CSS__/article_detail.css">
+{/block}
+{block name="main"}
+<div class="oricoEGapp">
+    <!-- 内容 -->
+    <div class="oricoEGapp-articledetail">
+        <div class="content">
+            <div class="blog_detail">
+                <div class="blog_title">
+                    <h2>{$detail.title}</h2>
+                    <p>{$detail.release_time}</p>
+                </div>
+                <div class="blog_content">{$detail.content|raw}</div>
+            </div>
+            <div class="share_box">
+                {notempty name="share_config"}
+                <div class="blog_share">
+                    <h3>{:lang_i18n('分享')}</h3>
+                    <ul class="share_list">
+                        {volist name="share_config" id="sc"}
+                        <li>
+                            <a 
+                            {if condition="!empty($sc.is_blank) && $sc.is_blank.value == 1"}target="_blank"{/if}
+                            {notempty name="sc.url.value"}href="{$sc.url.value}"{/notempty}>
+                                {eq name=":array_key_exists('triggered_qrcode', $sc)" value="true"}
+                                <img class="toggle_qrcode" src="{$sc.image.value}" />
+                                <div class="triggered_qrcode">
+                                    <img src="{$sc.triggered_qrcode.value}" />
+                                </div>
+                                {else /}
+                                <img src="{$sc.image.value}" />
+                                {/eq}
+                            </a>
+                        </li>
+                        {/volist}
+                    </ul>
+                </div>
+                {/notempty}
+                <div class="comment">
+                    <h3>{:lang_i18n('留言')}</h3>
+                    <form action="{:url('article/comment', ['id' => $detail.id])}" method="POST" class="comment_form clearfix" autocomplete="off">
+                        <div style="margin-right: 0.625rem; margin-bottom: 0.5rem;">{:lang_i18n('名称')}:<br>
+                            <input class="form-control itinp new_name" type="text" name="name">
+                        </div>
+                        <div>{:lang_i18n('电子邮箱')}:<br>
+                            <input class="form-control itinp new_email" type="email" name="email">
+                            <p style="color: #C6C7C9; font-size: 0.75rem; margin-bottom: 0.5rem; ">
+                                {:lang_i18n('您的电子邮件地址不会被公开')}
+                            </p>
+                        </div>
+                        <div class="comment_area">{:lang_i18n('留言内容')}:<br>
+                            <textarea class="form-control itinp new_comment" style="height: 3rem;border: 1px solid #DBDBDB;" name="content"></textarea>
+                        </div>
+                    </form>
+                    <div class="comment_btn" style="color:#ffffff;">{:lang_i18n('提交留言')}</div>
+                </div>
+                {notempty name="$recommends"}
+                <div class="mblove">
+                    <div class="mianct">
+                        <p class="thtitle">{:lang_i18n('你可能还喜欢')}</p>
+                        <p><img src="__IMAGES__/1line.webp"></p>
+                    </div>
+                    <div class="swiper-container loveswiper">
+                        <div class="swiper-wrapper">
+                            {volist name="recommends" id="vo"}
+                            <div class="swiper-slide">
+                                <a href="{:url('article/detail', ['id' => $vo.id])}">
+                                    <img src="{$vo.image}" alt="{$vo.title}">
+                                    <p class="lvtit">{$vo.title}</p>
+                                </a>
+                            </div>
+                            {/volist}
+                        </div>
+                        <!-- 如果需要分页器 -->
+                        <div class="swiper-pagination"></div>
+                    </div>
+                </div>
+                {/notempty}
+            </div>
+        </div>
+    </div>
+</div>
+{/block}
+{block name="script"}
+<script type="text/javascript">
+    $(function() {
+        $('.comment_btn').click(function() {
+            var form = $('.comment_form');
+            var form_data = form.serialize();
+            $.ajax({
+                url: form.attr('action'),
+                type: 'POST',
+                data: form_data,
+                dataType: 'json',
+                success: function(data) {
+                    alert(data.msg);
+                    if (data.code == 0) {
+                        window.location.reload();
+                    }
+                }
+            })
+        })
+
+        $('.toggle_qrcode').click(function() {
+            $(this).siblings('.triggered_qrcode').toggle();
+        })
+    })
+    //banner轮播
+    var loveswiper = new Swiper('.loveswiper', {
+        // 配置选项
+        slidesPerView: 2,
+        spaceBetween: 30,
+        loop: true,
+        autoplay: {
+            delay: 3000,
+        },
+        pagination: {
+            el: '.swiper-pagination',
+        }
+    });
+    function shareCustomers(){
+        // 复制到粘贴板
+        const input = document.createElement('input')
+        input.setAttribute('readonly', 'readonly')
+        let url=window.location.href
+        input.setAttribute('value', url)
+        document.body.appendChild(input)
+        input.select()
+        if (document.execCommand('copy')) {
+            document.execCommand('copy')
+            alert("{:lang_i18n('链接复制成功')}")
+        }
+        document.body.removeChild(input)
+    } 
+</script>
+{/block}

public/static/index/mobile/css/article_detail.css

@@ -0,0 +1,189 @@
+.oricoEGapp-articledetail {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+}
+
+.oricoEGapp-articledetail .content {
+  margin-top: 3.75rem;
+  width: 90%;
+  margin: 2.5rem auto;
+  margin-top: 4.6rem;
+}
+
+.oricoEGapp-articledetail .content .blog_detail {
+  height: auto;
+  background: #ffffff;
+  border: 1px solid #e8e8e8;
+}
+
+.oricoEGapp-articledetail .content .blog_detail .blog_title {
+  margin: 1rem;
+  border-bottom: 1px solid #e8e8e8;
+  padding-bottom: 1rem;
+}
+
+.oricoEGapp-articledetail .content .blog_detail .blog_content {
+  margin: 1rem;
+}
+
+.oricoEGapp-articledetail .content .blog_detail .blog_content img {
+  max-width: 100%;
+}
+
+.oricoEGapp-articledetail .content .blog_detail .blog_content p {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  color: #252525;
+  margin-bottom: 0.625rem;
+  overflow: hidden;
+  max-width: 100%;
+  text-indent: 0 !important;
+}
+
+.oricoEGapp-articledetail .content .blog_detail .blog_content p span {
+  font-size: 0.875rem;
+  line-height: 1rem;
+}
+
+.oricoEGapp-articledetail .content .blog_detail .blog_content p img {
+  width: 100%;
+  height: auto;
+  margin-bottom: 0.5rem;
+}
+
+.oricoEGapp-articledetail .content .share_box {
+  width: 100%;
+}
+
+.oricoEGapp-articledetail .content .share_box .blog_share {
+  width: 100%;
+  height: auto;
+  background: #ffffff;
+  border: 1px solid #e8e8e8;
+  margin: 1rem 0;
+}
+
+.oricoEGapp-articledetail .content .share_box .blog_share h3 {
+  font-size: 1rem;
+  line-height: 2.125rem;
+  color: #959595;
+  font-weight: bold;
+  padding: 0.25rem 1.875rem 0.75rem;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.oricoEGapp-articledetail .content .share_box .blog_share .share_list {
+  padding: 1.875rem;
+}
+
+.oricoEGapp-articledetail .content .share_box .blog_share .share_list::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+.oricoEGapp-articledetail .content .share_box .blog_share .share_list li {
+  position: relative;
+  width: 21%;
+  height: auto;
+  margin-right: 0.5rem;
+  float: left;
+}
+
+.oricoEGapp-articledetail .content .share_box .blog_share .share_list .wechat .wechat_code {
+  display: none;
+  left: 3.8rem;
+  margin-top: 10px;
+  background-color: #fff;
+  color: #fff;
+  box-shadow: 0px 5px 20px 0px rgba(119, 123, 128, 0.5);
+  line-height: 24px;
+  padding: 20px 25px;
+  z-index: 999;
+  position: absolute;
+  font-size: 14px;
+  color: #333;
+}
+
+.oricoEGapp-articledetail .content .share_box .blog_share .share_list .wechat img {
+  vertical-align: middle;
+}
+
+.oricoEGapp-articledetail .content .share_box .comment {
+  background: #ffffff;
+  width: 100%;
+  padding-bottom: 1.875rem;
+  border: 1px solid #e8e8e8;
+}
+
+.oricoEGapp-articledetail .content .share_box .comment h3 {
+  font-size: 1rem;
+  line-height: 1rem;
+  color: #959595;
+  font-weight: bold;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.oricoEGapp-articledetail .content .share_box .comment .comment_form {
+  padding: 1rem 1.25rem;
+}
+
+.oricoEGapp-articledetail .content .share_box .comment .comment_form .comment_form div {
+  font-size: 0.825rem;
+  color: #252525;
+  float: left;
+  width: 100%;
+}
+
+.oricoEGapp-articledetail .content .share_box .comment .itinp {
+  background: #f2f2f2;
+  /* border: none !important; */
+  border-radius: 8px;
+  height: 48px;
+  box-shadow: none;
+  font-family: Montserrat-Regular, Montserrat;
+}
+
+.oricoEGapp-articledetail .content .share_box .comment .comment_form>div input {
+  width: 100%;
+  height: 1.75rem;
+  border: 1px solid #dbdbdb;
+  margin-top: 0.5rem;
+}
+
+.oricoEGapp-articledetail .mblove {
+  width: 100%;
+  background: #f1f1f1;
+}
+
+.oricoEGapp-articledetail .mblove .mianct {
+  margin-top: 5%;
+}
+
+.oricoEGapp-articledetail .mblove .mianct .thtitle,
+.oricoEGapp-articledetail .mblove .mianct p {
+  font-size: 1.5em;
+  color: #333;
+  font-weight: bold;
+  text-align: center;
+}
+
+.oricoEGapp-articledetail .mblove .mianct .thtitle img,
+.oricoEGapp-articledetail .mblove .mianct p img {
+  width: 100%;
+  display: block;
+}
+
+.oricoEGapp-articledetail .mblove .mianct p:nth-child(2) {
+  margin-top: 2.4%;
+}
+
+.oricoEGapp-articledetail .share_list .triggered_qrcode {
+  display: none;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}