提交评论

app/index/common.php

@@ -29,10 +29,11 @@ function getPlatform()
 }
 
 // 加密函数
-function encrypt($data, $key = 'vp-256-bit-secret-key')
+function encrypt(string $data, $key = 'vp-256-bit-secret-key')
 {
     $method = 'AES-256-CBC';
     $iv = openssl_random_pseudo_bytes(openssl_cipher_iv_length($method));
+    $iv =  mb_convert_encoding($iv,'utf8');
     $encrypted = openssl_encrypt($data, $method, $key, 0, $iv);
     // 将iv和加密数据拼接在一起，然后进行base64编码
     return base64_encode($iv . $encrypted);

app/index/controller/Comment.php

@@ -0,0 +1,88 @@
+<?php
+// +----------------------------------------------------------------------
+// | 萤火商城系统 [ 致力于通过产品和服务，帮助商家高效化开拓市场 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2017~2021 https://www.yiovo.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed 这不是一个自由软件，不允许对程序代码以任何形式任何目的的再发行
+// +----------------------------------------------------------------------
+// | Author: 萤火科技 <admin@yiovo.com>
+// +----------------------------------------------------------------------
+declare (strict_types = 1);
+
+namespace app\index\controller;
+
+use app\index\model\Order as OrderModel;
+use app\index\model\Comment as CommentModel;
+use app\index\model\OrderGoods as OrderGoodsModel;
+use think\facade\Session;
+
+/**
+ * 订单评价管理
+ * Class Comment
+ * @package app\api\controller\order
+ */
+class Comment extends Controller
+{
+    /**
+     * 待评价订单商品列表
+     * @param int $orderId
+     * @return \think\response\Json
+     * @throws \Exception
+     * @throws \app\common\exception\BaseException
+     * @throws \think\exception\DbException
+     */
+    public function list(int $orderId)
+    {
+        // 订单信息
+        $orderInfo = OrderModel::getDetail($orderId);
+        // 验证订单是否已完成
+        $model = new CommentModel;
+        if (!$model->checkOrderAllowComment($orderInfo)) {
+            return $this->renderError($model->getError());
+        }
+        // 待评价商品列表
+        $goodsList = OrderGoodsModel::getNotCommentGoodsList($orderId);
+        if ($goodsList->isEmpty()) {
+            return $this->renderError('该订单没有可评价的商品');
+        }
+        return $this->renderSuccess(compact('goodsList'));
+    }
+
+    /**
+     * 创建商品评价
+     * @param int $orderId
+     * @return array|\think\response\Json
+     * @throws \app\common\exception\BaseException
+     * @throws \think\db\exception\DataNotFoundException
+     * @throws \think\db\exception\DbException
+     * @throws \think\db\exception\ModelNotFoundException
+     */
+    public function submit(int $orderId)
+    {
+        $userId = Session::get('user_id');
+        if (empty($userId)) {
+            return $this->renderJson(config('status.not_logged'), 'Log in please!');
+        }
+
+        // 订单信息
+        $orderInfo = OrderModel::getDetail($orderId);
+        // 验证订单是否已完成
+        $model = new CommentModel;
+        if (!$model->checkOrderAllowComment($orderInfo)) {
+            return $this->renderError($model->getError());
+        }
+        // 待评价商品列表
+        $goodsList = OrderGoodsModel::getNotCommentGoodsList($orderId);
+        if ($goodsList->isEmpty()) {
+            return $this->renderError('该订单没有可评价的商品');
+        }
+        // 提交商品评价
+        $model = new CommentModel;
+        if ($model->increased($orderInfo, $goodsList, $this->postForm())) {
+            return $this->renderSuccess([], '评价发表成功');
+        }
+        return $this->renderError($model->getError() ?: '评价发表失败');
+    }
+
+}

app/index/controller/User.php

@@ -114,9 +114,7 @@ class User extends Controller
             return $this->renderError('Invalid mailbox');
         }
 
-        //$encryptUserId = encrypt($userId);
-        $encryptUserId = '';
-        //dd($encryptUserId);
+        $encryptUserId = encrypt(strval($userId));
 
         $url = url('/index/index/productDetail?goodsId=' . $goodsId . '&key=' . $encryptUserId);
         //todo 发邮件

app/index/model/Comment.php

@@ -0,0 +1,257 @@
+<?php
+// +----------------------------------------------------------------------
+// | 萤火商城系统 [ 致力于通过产品和服务，帮助商家高效化开拓市场 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2017~2021 https://www.yiovo.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed 这不是一个自由软件，不允许对程序代码以任何形式任何目的的再发行
+// +----------------------------------------------------------------------
+// | Author: 萤火科技 <admin@yiovo.com>
+// +----------------------------------------------------------------------
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\index\model\Order as OrderModel;
+use app\common\model\Comment as CommentModel;
+use app\index\model\OrderGoods as OrderGoodsModel;
+use app\index\service\User as UserService;
+use app\common\library\helper;
+use app\common\exception\BaseException;
+
+/**
+ * 商品评价模型
+ * Class Comment
+ * @package app\api\model
+ */
+class Comment extends CommentModel
+{
+    /**
+     * 隐藏字段
+     * @var array
+     */
+    protected $hidden = [
+        'status',
+        'sort',
+        'order_id',
+        //'goods_id',
+        'order_goods_id',
+        'is_delete',
+        'update_time'
+    ];
+
+    /**
+     * 获取指定商品评价列表
+     * @param int $goodsId 商品ID
+     * @param int|null $scoreType 评分 (10好评 20中评 30差评)
+     * @return \think\Paginator
+     * @throws \think\db\exception\DbException
+     */
+    public function getCommentList(int $goodsId, int $scoreType = null)
+    {
+        $filter = $this->getFilter($goodsId, $scoreType);
+        return $this->with(['user.avatar', 'orderGoods'])
+            ->where($filter)
+            ->order(['sort' => 'asc', 'create_time' => 'desc'])
+            ->paginate(15);
+    }
+
+    /**
+     * 获取指定商品评价列表 (限制数量, 不分页)
+     * @param int $goodsId 商品ID
+     * @param int $limit 限制的数量
+     * @return \think\Collection
+     * @throws \think\db\exception\DataNotFoundException
+     * @throws \think\db\exception\DbException
+     * @throws \think\db\exception\ModelNotFoundException
+     */
+    public function listRows(int $goodsId, int $limit = 5)
+    {
+        $filter = $this->getFilter($goodsId);
+        return $this->with(['user.avatar'])
+            ->where($filter)
+            ->order(['sort' => 'asc', $this->getPk()])
+            ->limit($limit)
+            ->select();
+    }
+
+    /**
+     * 获取指定商品评价总数量
+     * @param int $goodsId
+     * @return int
+     */
+    public function rowsTotal(int $goodsId)
+    {
+        $filter = $this->getFilter($goodsId);
+        return $this->where($filter)->count();
+    }
+
+    public function rowsTotalBatch(array $goodsIds)
+    {
+        $filter =[
+            ['status', '=', 1],
+            ['is_delete', '=', 0],];
+        return $this->field('goods_id, count(comment_id) as cnt')->where($filter)->whereIn('goods_id', $goodsIds)->group('goods_id')->select();
+    }
+
+    /**
+     * 获取查询条件
+     * @param int $goodsId 商品ID
+     * @param int|null $scoreType 评分 (10好评 20中评 30差评)
+     * @return array[]
+     */
+    private function getFilter(int $goodsId, int $scoreType = null)
+    {
+        // 筛选条件
+        $filter = [
+            ['goods_id', '=', $goodsId],
+            ['status', '=', 1],
+            ['is_delete', '=', 0],
+        ];
+        // 评分
+        $scoreType > 0 && $filter[] = ['score', '=', $scoreType];
+        return $filter;
+    }
+
+    /**
+     * 获取指定评分总数
+     * @param int $goodsId
+     * @return array|null|\think\Model
+     * @throws \think\db\exception\DataNotFoundException
+     * @throws \think\db\exception\DbException
+     * @throws \think\db\exception\ModelNotFoundException
+     */
+    public function getTotal(int $goodsId)
+    {
+        return $this->field([
+            'count(comment_id) AS `all`',
+            'count(score = 10 OR NULL) AS `praise`',
+            'count(score = 20 OR NULL) AS `review`',
+            'count(score = 30 OR NULL) AS `negative`',
+        ])->where([
+            'goods_id' => $goodsId,
+            'is_delete' => 0,
+            'status' => 1
+        ])->find();
+    }
+
+    /**
+     * 验证订单是否允许评价
+     * @param OrderModel $order
+     * @return boolean
+     */
+    public function checkOrderAllowComment(OrderModel $order)
+    {
+        // 验证订单是否已完成
+        if ($order['order_status'] != 30) {
+            $this->error = '该订单未完成，无法评价';
+            return false;
+        }
+        // 验证订单是否已评价
+        if ($order['is_comment'] == 1) {
+            $this->error = '该订单已完成评价';
+            return false;
+        }
+        return true;
+    }
+
+    /**
+     * 根据已完成订单商品 添加评价
+     * @param OrderModel $order
+     * @param $goodsList
+     * @param array $data
+     * @return boolean
+     * @throws BaseException
+     */
+    public function increased(OrderModel $order, $goodsList, array $data)
+    {
+        // 生成 formData
+        $formData = $this->formatFormData($data);
+        // 生成评价数据
+        $data = $this->createCommentData($order['order_id'], $goodsList, $formData);
+        if (empty($data)) {
+            $this->error = '没有输入评价内容';
+            return false;
+        }
+        return $this->transaction(function () use ($order, $goodsList, $formData, $data) {
+            // 记录评价内容
+            $result = $this->addAll($data);
+            // 记录评价图片`
+            //$this->saveAllImages($result, $formData);
+            // 更新订单评价状态
+            $isComment = count($goodsList) === count($data);
+            $this->updateOrderIsComment($order, $isComment, $result);
+            return true;
+        });
+    }
+
+    /**
+     * 更新订单评价状态
+     * @param OrderModel $order
+     * @param $isComment
+     * @param $commentList
+     * @return array|false
+     * @throws \Exception
+     */
+    private function updateOrderIsComment(OrderModel $order, $isComment, $commentList)
+    {
+        // 更新订单商品
+        $orderGoodsData = [];
+        foreach ($commentList as $comment) {
+            $orderGoodsData[] = [
+                'where' => [
+                    'order_goods_id' => $comment['order_goods_id'],
+                ],
+                'data' => [
+                    'is_comment' => 1
+                ]
+            ];
+        }
+        // 更新订单
+        $isComment && $order->save(['is_comment' => 1]);
+        return (new OrderGoodsModel)->updateAll($orderGoodsData);
+    }
+
+    /**
+     * 生成评价数据
+     * @param int $orderId
+     * @param $goodsList
+     * @param array $formData
+     * @return array
+     * @throws BaseException
+     */
+    private function createCommentData(int $orderId, $goodsList, array $formData)
+    {
+        $data = [];
+        foreach ($goodsList as $goods) {
+            if (!isset($formData[$goods['order_goods_id']])) {
+                throwError('提交的数据不合法');
+            }
+            $commentItem = $formData[$goods['order_goods_id']];
+            $commentItem['content'] = trim($commentItem['content']);
+            !empty($commentItem['content']) && $data[$goods['order_goods_id']] = [
+                'score' => $commentItem['score'],
+                'content' => $commentItem['content'],
+                'is_picture' => !empty($commentItem['uploaded']),
+                'sort' => 100,
+                'status' => 1,
+                'user_id' => UserService::getCurrentLoginUserId(),
+                'order_id' => $orderId,
+                'goods_id' => $commentItem['goods_id'],
+                'order_goods_id' => $commentItem['order_goods_id'],
+                'store_id' => self::$storeId
+            ];
+        }
+        return $data;
+    }
+
+    /**
+     * 格式化 formData
+     * @param array $data
+     * @return array
+     */
+    private function formatFormData(array $data)
+    {
+        return helper::arrayColumn2Key($data, 'order_goods_id');
+    }
+}

app/index/view/user/orderDetails.html

@@ -42,9 +42,9 @@
                 </div>
             </a>
             <!-- 收藏 -->
-<!--            <div class="headIconItem collectIcon">-->
-<!--                <img src="/assets/index/asstes/icon/collect.png" alt="collect" tabindex="collect">-->
-<!--            </div>-->
+            <!--            <div class="headIconItem collectIcon">-->
+            <!--                <img src="/assets/index/asstes/icon/collect.png" alt="collect" tabindex="collect">-->
+            <!--            </div>-->
             <!-- 个人中心 -->
             <a href="/index/user/order.html">
                 <div class="headIconItem userIcon">
@@ -83,9 +83,9 @@
             <div class="mobileMenuItem">
                 <h2 class="menuItemTitle shoppingCartIcon">Shopping Cart</h2>
             </div>
-<!--            <div class="mobileMenuItem">-->
-<!--                <h2 class="menuItemTitle collectIcon">Collect</h2>-->
-<!--            </div>-->
+            <!--            <div class="mobileMenuItem">-->
+            <!--                <h2 class="menuItemTitle collectIcon">Collect</h2>-->
+            <!--            </div>-->
             <div class="mobileMenuItem active">
                 <h2 class="menuItemTitle userIcon">Personal</h2>
             </div>
@@ -182,14 +182,14 @@
                         <div class="orderGoodsBox eleBox">
                             <div class="ogTeFlex">
                                 <p class="ogTitle">Listing</p>
-                                 <div class="ogMarkButton">Pay With PayPal</div>
+                                <div class="ogMarkButton">Pay With PayPal</div>
                             </div>
                             <p class="ogTips">
                                 Your goods will be shipped in 2 3days
                             </p>
                             {foreach $order['goods'] as $goods}
 
-                            <div class="ogGoodsInfo">
+                            <div class="ogGoodsInfo" data-id="{$goods['goods_id']}" order-goods-id="{$goods['order_goods_id']}">
                                 <div class="ogImgBox">
                                     <img src="{$goods['goods_image']}"
                                          alt="">
@@ -200,6 +200,10 @@
                                 </div>
                                 <p class="ogPr">${$goods['goods_price']}x{$goods['total_num']}</p>
                                 <p class="ogToPr">${$goods['total_price']}</p>
+                                <!-- 评价 -->
+                                {eq name="order['receipt_status']" value="20"}
+                                <div class="evaluate">Evaluate</div>
+                                {/eq}
                             </div>
                             {/foreach}
 
@@ -339,10 +343,10 @@
                                     <p class="aiKey">Street</p>
                                     <p class="aiValue">{$orderAddress['detail']}</p>
                                 </div>
-<!--                                <div class="addInfoItem">-->
-<!--                                    <p class="aiKey">公寓，别至</p>-->
-<!--                                    <p class="aiValue">XXXXXXXXXX</p>-->
-<!--                                </div>-->
+                                <!--                                <div class="addInfoItem">-->
+                                <!--                                    <p class="aiKey">公寓，别至</p>-->
+                                <!--                                    <p class="aiValue">XXXXXXXXXX</p>-->
+                                <!--                                </div>-->
                                 <div class="addInfoItem">
                                     <p class="aiKey">State</p>
                                     <p class="aiValue">{$orderAddress['region']['region']}</p>
@@ -448,6 +452,48 @@
     </div>
 </div>
 
+<div id="toastContainer"></div>
+
+<!-- 评价弹窗 -->
+<div id="evaluateModal">
+    <div class="evaluateBox">
+        <div class="evaluateItem">
+            <p class="evaluateTitle">Score:</p>
+            <div class="starContainer">
+                <div class="starItem">
+                    <img class="star" src="/assets/index/asstes/icon/star.png" alt="">
+                    <img class="selStar" src="/assets/index/asstes/icon/selStar.png" alt="">
+                </div>
+                <div class="starItem">
+                    <img class="star" src="/assets/index/asstes/icon/star.png" alt="">
+                    <img class="selStar" src="/assets/index/asstes/icon/selStar.png" alt="">
+                </div>
+                <div class="starItem">
+                    <img class="star" src="/assets/index/asstes/icon/star.png" alt="">
+                    <img class="selStar" src="/assets/index/asstes/icon/selStar.png" alt="">
+                </div>
+                <div class="starItem">
+                    <img class="star" src="/assets/index/asstes/icon/star.png" alt="">
+                    <img class="selStar" src="/assets/index/asstes/icon/selStar.png" alt="">
+                </div>
+                <div class="starItem">
+                    <img class="star" src="/assets/index/asstes/icon/star.png" alt="">
+                    <img class="selStar" src="/assets/index/asstes/icon/selStar.png" alt="">
+                </div>
+            </div>
+        </div>
+        <div class="evaluateItem">
+            <div class="textareaBox">
+                <textarea id="evaluateTextarea" placeholder="评价一下吧"></textarea>
+            </div>
+        </div>
+        <div class="evaluateBotBox">
+            <div id="evaluateBot">submit</div>
+        </div>
+    </div>
+    <div id="closeEvaluateModal"></div>
+</div>
+
 </body>
 <script src="/assets/index/js/jquery-1.12.0.js"></script>
 <script src="/assets/index/js/flexible.js"></script>
@@ -457,11 +503,11 @@
 <script>
     $(document).ready(function () {
         var orderId = "{$order['order_id']}";
-        console.log('orderId::',orderId)
+        console.log('orderId::', orderId)
         var payStatus = "{$order['pay_status']}";
-        console.log('payStatus::',payStatus)
+        console.log('payStatus::', payStatus)
         $('#ogMarkButton').hide(0)
-        if ( payStatus === "10"){
+        if (payStatus === "10") {
             $('#ogMarkButton').show(0)
         }
 
@@ -541,7 +587,7 @@
             console.log("paypaing")
             $("#loadingModel").show(0)
 
-            const params = { }
+            const params = {}
             const res = await orderPayment(params)
             const {status, message, data} = res || {}
             if (status === 200 || status === "200") {
@@ -573,6 +619,103 @@
         });
 
         initNavState()
+
+        //商品id（评价记录）
+        let goodsId
+
+        let orderGoodsId
+        //商品评分
+        let score = 0
+
+        //商品评价点击
+        $(".evaluate").on(tap, function (event) {
+            event.preventDefault();
+            const parentEle = $(this).closest('.ogGoodsInfo')
+            goodsId = parentEle.attr("data-id")
+            orderGoodsId = parentEle.attr("order-goods-id")
+            $('#evaluateTextarea').val("")
+            $(".starItem").removeClass('active');
+            $("#evaluateModal").show(0)
+        });
+
+
+        $(".starItem").on(tap, function (event) {
+            event.preventDefault();
+            const _this = $(this)
+            score = _this.index() + 1;
+            _this.addClass('active');
+            _this.prevAll().addClass('active');
+            _this.nextAll().removeClass('active');
+        });
+
+        //输入框聚焦
+        $('#evaluateTextarea').focus(function () {
+            $(this).addClass('active');
+        });
+
+        //输入框失焦
+        $('#evaluateTextarea').blur(function () {
+            $(this).removeClass('active');
+        });
+
+        //关闭评价
+        $('#closeEvaluateModal').on(tap, function () {
+            $("#evaluateModal").hide(0)
+        });
+
+        //提交评价
+        $('#evaluateBot').on(tap, function () {
+            const evaluateTextareaEle = $('#evaluateTextarea')
+            const textareaValue = evaluateTextareaEle.val()
+            if (!textareaValue || textareaValue == "") {
+                evaluateTextareaEle.focus()
+                return
+            }
+            console.log("评价内容", textareaValue)
+            console.log("商品id", goodsId)
+            console.log("商品orderGoodsId", orderGoodsId)
+            console.log("score", score)
+            var dp = {
+                orderId: orderId,
+                form: [{
+                    order_goods_id: orderGoodsId,
+                    goods_id: goodsId,
+                    score: score,
+                    content: textareaValue,
+                }]
+            }
+            $.ajax({
+                url: "/index/comment/submit",
+                headers: {platform: 'H5'},
+                dataType: 'json',
+                data: JSON.stringify(dp),
+                type: "POST",
+                contentType: 'application/json',
+                success: function (obj) {
+                    //注册成功后进入
+                    if (obj.status === 200 || obj.status === '200') {
+                        showToast("Successful")
+                        $("#evaluateModal").hide(0)
+                        goodsId = null
+                    } else if (obj.status === 401 || obj.status === '401') {
+                        window.location.replace('../passport/logIn.html')
+                    } else {
+                        showToast('Something wrong,please try again later')
+                    }
+                }
+            })
+        });
+
+        /**
+         * 吐司提示
+         * @param message 消息
+         * @returns
+         */
+        function showToast(message) {
+            var toastElement = $('#toastContainer');
+            toastElement.text(message);
+            toastElement.stop(true, true).fadeIn(200).delay(2000).fadeOut(200);
+        }
     })
 </script>
 

public/assets/index/css/orderDetails.css

@@ -152,6 +152,22 @@ body{
     display: flex;
     justify-content: space-between;
     align-items: center;
+    position: relative;
+}
+.evaluate{
+    position: absolute;
+    z-index: 10;
+    right: 0;
+    top: 0;
+    font-size: .16rem;
+    height: .3rem;
+    padding: 0 .12rem;
+    display: flex;
+    align-items: center;
+    color: #FFF;
+    border-radius: 0 0 0 .12rem;
+    background-color: rgba(79, 73, 222, 1);
+    cursor: pointer;
 }
 .ogImgBox{
     width: .7rem;
@@ -418,7 +434,104 @@ body{
     padding-top: .12rem;
 }
 
-
+#evaluateModal{
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, .5);
+    display: none;
+}
+#closeEvaluateModal{
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+} 
+.evaluateBox{ 
+    width: 5rem;
+    background-color: #ffffff;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 40%;
+    position: absolute;
+    border-radius: .12rem;
+    padding: .36rem .24rem .24rem .24rem;
+    z-index: 100;
+}
+.evaluateItem{
+    display: flex;
+    align-items: center;
+    margin-bottom: .24rem;
+}
+.evaluateTitle{
+    font-size: .16rem;
+    padding-right: .24rem;
+}
+.starContainer{
+    flex: 1;
+    display: flex;
+}
+.starItem{
+    position: relative;
+    font-size: 0;
+    padding: .02rem .04rem;
+    cursor: pointer;
+}
+.starItem img{
+    width: .24rem;
+}
+.starItem .selStar{
+    display: none;
+}
+.starItem.active .star{
+    display: none; 
+}
+.starItem.active .selStar{
+    display: block;
+}
+.textareaBox{
+    flex: 1;
+    display: flex;
+}
+#evaluateTextarea{
+    font-size: .16rem;
+    line-height: 1.5;
+    resize: none;
+    border: .02rem solid rgba(0, 0, 0, .05);
+    outline: none;
+    padding: .12rem;
+    flex: 1;
+    border-radius: .08rem;
+    height: 1rem;
+    word-break: break-all;
+}
+#evaluateTextarea.active{
+    border: .02rem solid rgba(79, 73, 222, 1);
+}
+.evaluateBotBox{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+#evaluateBot{
+    color: #fff;
+    font-size: .18rem;
+    height: .44rem;
+    padding: 0 .24rem;
+    border-radius: .12rem;
+    background-color: rgba(79, 73, 222, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
 @media (max-width: 1920px) {
     .pageMain{
         padding-right: .14rem;
@@ -476,29 +589,6 @@ body{
         padding-bottom: 0;
     }
 }
-
-#loadingModel{
-    position: fixed;
-    z-index: 999;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: rgba(0, 0, 0, .5);
-    display: none;
-}
-
-#loadingModel .loadingBox{
-    border-radius: .06rem;
-    overflow: hidden;
-    font-size: 0;
-    margin: 25% auto 0 auto;
-    width: 1rem;
-}
-#loadingModel .loadingBox img{
-    width: 1rem;
-}
-
 @media (max-width: 750px) {
     .odTitleBox{
         padding-top: .36rem;
@@ -542,4 +632,30 @@ body{
     .orderGoodsBox .ogTips{
         font-size: .18rem;
     }
+    .evaluateBox{
+        top: 30%;
+    }
+    .evaluate{
+        height: .34rem;
+        font-size: .2rem;
+    }
+    .evaluateItem{
+        margin-bottom: .36rem;
+    }
+    .evaluateTitle{
+        font-size: .2rem;
+    }
+    .starItem img{
+        width: .32rem;
+    }
+    #evaluateTextarea{
+        font-size: .2rem;
+        height: 2rem;
+    }
+    #evaluateBot{
+        font-size: .22rem;
+        height: .6rem;
+        border-radius: .24rem;
+        padding: 0 .32rem;
+    }
 }