feat: mobile文章详情页

app/index/controller/Article.php

@@ -129,12 +129,14 @@ class Article extends Common
 
         // 验证字段
         $validate = Validate::rule([
-            'name' => 'max:64',
-            'email' => 'email'
+            'name'  => 'require|max:64',
+            'email' => 'require|email'
         ])
         ->message([
-            'name.max' => '姓名不能超过64个字符',
-            'email'    => '请输入正确的邮箱'
+            'name.require'  => '姓名不能为空',
+            '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}