增加手机处理订单页面

package.json

@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "scripts": {
-        "serve": "vue-cli-service serve --mode development",
+        "dev": "vue-cli-service serve --mode development",
         "build:test": "vue-cli-service build --mode test",
         "build": "vue-cli-service build --mode production",
         "lint": "vue-cli-service lint"

src/api/admin.js

@@ -0,0 +1,10 @@
+import service from "./service";
+
+// 订单列表
+export const getOrderList = (params) => service.get("/api/admin/orders", { data: params });
+
+// 订单详情
+export const getOrderDetail = (id) => service.get(`/api/admin/order/${id}`);
+
+// 反馈
+export const postFeedback = (id, data) => service.post(`/api/admin/order-done/${id}`, data);

src/api/index.js

@@ -179,8 +179,15 @@ const getMeritTypes = () => service.get("/api/order/get-merit-types");
 // 支付广告
 const getPayAdv = () => service.get("/api/ad/ad-pay");
 
+// 保存手机号
+const saveMobileNumber = (mobile) => service.put("/api/mobile", { mobile });
+
+// 检查是否有手机号
+const checkUserMobile = () => service.get("/api/mobile-check");
+
 export {
     getPayAdv,
+    saveMobileNumber,
     getMeritTypes,
     getDynamicDataByGoodsId,
     hasLogin,
@@ -229,4 +236,5 @@ export {
     getCertList,
     getStationTemplate,
     getPlatformHome,
+    checkUserMobile,
 };

src/api/service.js

@@ -28,6 +28,10 @@ instance.interceptors.request.use((request) => {
         request.data = qs.stringify(request.data);
         return request;
     }
+    if (request.method == "get") {
+        request.url += `?${qs.stringify(request.data)}`;
+        return request;
+    }
     return request;
 });
 

src/components/detail-content-expand/index.vue

@@ -57,7 +57,7 @@ export default {
                 this.defaultContentHeight = 100;
                 return;
             }
-            this.defaultContentHeight = selector.offsetHeight / (4 / 1);
+            this.defaultContentHeight = selector.offsetHeight / (2 / 1);
         },
     },
 };

src/components/user-merit/index.vue

@@ -11,7 +11,7 @@
             </div>
         </div>
         <div class="result">
-            <p class="money">{{ data.order_amount || data.sum_money }}元</p>
+            <p class="money">已参与</p>
             <span class="date">{{ data.paid_at }}</span>
         </div>
     </div>

src/pages/admin/order/detail.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>订单详情</div>
+</template>

src/pages/admin/order/index.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class="order-page">
+        <van-search v-model="keyword" placeholder="请输入手机号" />
+        <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
+            <div class="scroll-wrapper">
+                <!--内容...-->
+                <div class="list" v-for="(item, index) in dataList" :key="index">
+                    <div class="order-item">
+                        <div class="temple">
+                            <span class="sn">{{ item.order_sn }}</span>
+                            <span class="name">{{ item.temple_name }}</span>
+                        </div>
+                        <div class="goods">
+                            <h3 class="name">
+                                <span class="state" v-if="item.status == 2">待处理</span>
+                                <span>{{ item.goods_name }}</span>
+                            </h3>
+                            <div class="sku">
+                                <span>数量: x{{ item.buy_total }}</span>
+                                <span>金额: ¥{{ item.price }}</span>
+                                <span>行善时间: {{ item.paid_at }}</span>
+                                <span>行善者: {{ item.user_name }}</span>
+                            </div>
+                        </div>
+                        <div class="action-buttons">
+                            <van-button type="info" block round v-if="item.status == 2" @click="onProcess(item)"> 立即处理</van-button>
+                            <!-- <van-button type="info" plain block round>查看详情</van-button> -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </mescroll-vue>
+    </div>
+</template>
+
+<script>
+import MescrollVue from "mescroll.js/mescroll.vue";
+import { getOrderList } from "@/api/admin";
+export default {
+    comments: {
+        MescrollVue,
+    },
+    data() {
+        return {
+            pagination: {
+                page: 1,
+                size: 10,
+            },
+            keyword: "",
+            mescroll: null,
+            mescrollDown: {},
+            mescrollUp: {
+                // 上拉加载的配置.
+                callback: this.upCallback,
+            },
+            dataList: [],
+        };
+    },
+    methods: {
+        mescrollInit(mescroll) {
+            this.mescroll = mescroll;
+        },
+        upCallback(page, mescroll) {
+            console.log("load", page);
+            this.pagination.page = page.num;
+            this.getOrderList();
+        },
+        async getOrderList() {
+            const res = await getOrderList({
+                keyword: this.keyword,
+                ...this.pagination,
+            });
+            this.dataList = this.dataList.concat(res.results);
+            this.total = res.total;
+            console.log("mescroll", this.mescroll);
+            this.mescroll.endSuccess();
+            console.log(res);
+        },
+        onProcess(item) {
+            this.$router.push({
+                name: "adminOrderProcess",
+                query: {
+                    id: item.id,
+                },
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.order-page {
+    background-color: #f5f1fd;
+    height: 100vh;
+
+    .scroll-wrapper {
+        flex: 1;
+        overflow: hidden;
+        .list {
+            padding: 0.1rem 0.2rem;
+        }
+        .order-item {
+            background: white;
+            padding: 0.2rem;
+            border-radius: 0.2rem;
+            box-shadow: 0 0 6ox rgba(0, 0, 0, 0.1);
+            .temple {
+                display: flex;
+                justify-content: space-between;
+                padding: 0.2rem 0;
+                .sn,
+                .name {
+                    font-size: 0.3rem;
+                    color: #888;
+                }
+            }
+            .goods {
+                padding-top: 0.2rem;
+                .name {
+                    font-size: 0.4rem;
+                    font-weight: bold;
+                    margin-bottom: 0.4rem;
+                    line-height: 1.6;
+                    .state {
+                        font-size: 0.25rem;
+                        color: #fff;
+                        background-color: #188fff;
+                        padding: 0.1rem 0.2rem;
+                        border-radius: 0.13rem;
+                        margin-right: 0.1rem;
+                    }
+                }
+                .sku {
+                    display: grid;
+                    gap: 0.3rem;
+                    grid-template-columns: repeat(2, 1fr);
+                    font-size: 0.3rem;
+                    color: #888;
+                }
+            }
+            .action-buttons {
+                margin-top: 12px;
+                display: flex;
+                column-gap: 12px;
+                .van {
+                }
+            }
+        }
+    }
+}
+</style>

src/pages/admin/order/process.vue

@@ -0,0 +1,28 @@
+<template>
+    <van-form>
+        <van-field name="uploader" label="善缘名称">
+            <template #input>
+                <span>添砖加瓦！寺院全殿堂瓦片认供通启</span>
+            </template>
+        </van-field>
+        <van-field name="uploader" label="反馈照片">
+            <template #input>
+                <van-uploader preview-size="76px" multiple v-model="uploader" :max-count="5" />
+            </template>
+            <span style="font-size: 0.2rem; color: #999">最多5张</span>
+        </van-field>
+        <div style="margin: 16px">
+            <van-button round block type="info" native-type="submit">提交</van-button>
+        </div>
+    </van-form>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            uploader: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
+        };
+    },
+};
+</script>

src/pages/goods-detail/index.vue

@@ -250,8 +250,16 @@ $lightWidth: 1.3rem;
         padding-left: 0.3rem;
         padding-right: 0.3rem;
         * {
-            max-width: 100%;
+            width: 100%;
             font-size: 0.35rem;
+            word-wrap: break-word;
+            white-space: wrap !important;
+        }
+        img {
+            width: 100%;
+        }
+        p {
+            text-align: justify;
         }
     }
     .light-container {

src/pages/mescroll-test/index.vue

@@ -1,130 +0,0 @@
-<template>
-    <div>
-        <!--mescroll滚动区域的基本结构-->
-        <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
-            <!--内容...-->
-            <div class="div" v-for="(v, i) in dataList" :key="i">{{ v }}</div>
-        </mescroll-vue>
-    </div>
-</template>
-
-<script>
-// 引入mescroll的vue组件
-import MescrollVue from "mescroll.js/mescroll.vue";
-const axios = {
-    current: 0,
-    get() {
-        return new Promise((resolve) => {
-            this.current += 1;
-            setTimeout(() => {
-                if (this.current === 3) {
-                    resolve({
-                        data: [],
-                    });
-                    return;
-                }
-                resolve({
-                    data: Array.from(Array(10), () => Math.random() * 100),
-                });
-            }, Math.random() * 1000);
-        });
-    },
-};
-export default {
-    components: {
-        MescrollVue, // 注册mescroll组件
-    },
-    data() {
-        return {
-            data: [],
-            mescroll: null, // mescroll实例对象
-            mescrollDown: {}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
-            mescrollUp: {
-                // 上拉加载的配置.
-                callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
-                //以下是一些常用的配置,当然不写也可以的.
-                page: {
-                    num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
-                    size: 10, //每页数据条数,默认10
-                },
-                htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
-                noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据; 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看这就是为什么无更多数据有时候不显示的原因
-                toTop: {
-                    //回到顶部按钮
-                    src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
-                    offset: 1000, //列表滚动1000px才显示回到顶部按钮
-                },
-                empty: {
-                    //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
-                    warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
-                    icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
-                    tip: "暂无相关数据~", //提示
-                },
-            },
-            dataList: [], // 列表数据
-        };
-    },
-    beforeRouteEnter(to, from, next) {
-        // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
-        next((vm) => {
-            // 滚动到原来的列表位置,恢复顶部按钮和isBounce的配置
-            vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter();
-        });
-    },
-    beforeRouteLeave(to, from, next) {
-        // 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
-        // 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
-        this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave();
-        next();
-    },
-    methods: {
-        // mescroll组件初始化的回调,可获取到mescroll对象
-        mescrollInit(mescroll) {
-            this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
-        },
-        // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
-        upCallback(page, mescroll) {
-            // 联网请求
-            axios
-                .get({
-                    params: {
-                        num: page.num, // 页码
-                        size: page.size, // 每页长度
-                    },
-                })
-                .then((response) => {
-                    // 请求的列表数据
-                    let arr = response.data;
-                    // 如果是第一页需手动置空列表
-                    if (page.num === 1) this.dataList = [];
-                    // 把请求到的数据添加到列表
-                    this.dataList = this.dataList.concat(arr);
-                    // 数据渲染成功后,隐藏下拉刷新的状态
-                    this.$nextTick(() => {
-                        mescroll.endSuccess(arr.length);
-                    });
-                })
-                .catch(() => {
-                    // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
-                    mescroll.endErr();
-                });
-        },
-    },
-};
-</script>
-
-<style scoped>
-/*通过fixed固定mescroll的高度*/
-.mescroll {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    height: auto;
-}
-.div {
-    height: 40px;
-    background: red;
-    border: 10px solid blue;
-    margin-bottom: 10px;
-}
-</style>

src/pages/pay-result/index.vue

@@ -14,13 +14,35 @@
             <button class="detail" @click="onToOrder">查看详情</button>
             <button class="again" @click="onPayAgain">再结善缘</button>
         </div>
+
+        <van-popup v-model="show" round closeable>
+            <div class="mobile-dialog">
+                <div class="pic-wrap">
+                    <img class="mobile-picture" src="/thanks.jpeg" alt="" />
+                </div>
+                <div class="body">
+                    <div class="info">
+                        <span>登记手机号获取功德反馈</span>
+                        <i>或</i>
+                        <span>添加客堂微信<b>19122065157</b>获取</span>
+                    </div>
+                    <div class="field-wrap">
+                        <van-field v-model="mobile" placeholder="请填写手机号码" maxlength="11" border type="digit"></van-field>
+                    </div>
+                    <van-button type="info" round block @click="saveMobile">确认</van-button>
+                </div>
+            </div>
+        </van-popup>
     </div>
 </template>
 
 <script>
+import { saveMobileNumber, checkUserMobile } from "@/api";
 export default {
     data() {
         return {
+            show: false,
+            mobile: "",
             query: this.$route.query,
         };
     },
@@ -29,10 +51,32 @@ export default {
             return `https://temple-h5-new.oss-cn-hangzhou.aliyuncs.com//uploads/merit/certificate/${this.query.order_id}.jpg`;
         },
     },
+    mounted() {
+        checkUserMobile().then((hasMobile) => {
+            if (!hasMobile) {
+                this.show = true;
+            }
+        });
+    },
     methods: {
-        onToOder() {
+        onToOrder() {
             this.$router.push("/user/order");
         },
+        saveMobile() {
+            const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/g;
+            const mobile = this.mobile;
+            if (!mobile) {
+                return this.$toast("请输入11位手机号");
+            }
+            if (!reg.test(mobile)) {
+                return this.$toast("请输入合法的手机号");
+            }
+            saveMobileNumber(mobile).then(() => {
+                this.$toast("登记成功");
+                this.show = false;
+            });
+            console.log("mobile", mobile);
+        },
         onPayAgain() {
             // 功德箱订单再结善缘重新随喜
             if (this.query.from === "meritBox") {
@@ -59,6 +103,61 @@ export default {
 
 <style lang="scss">
 .pay-result {
+    .mobile-dialog {
+        width: 90vw;
+        height: 90vh;
+        background-color: white;
+        border-radius: 12px;
+        display: flex;
+        flex-direction: column;
+        .pic-wrap {
+            height: 70%;
+            overflow: hidden;
+            .mobile-picture {
+                width: 100%;
+                object-fit: fill;
+                display: block;
+            }
+        }
+
+        .body {
+            padding: 12px;
+            display: flex;
+            flex-direction: column;
+            row-gap: 12px;
+            .info {
+                font-size: 14px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                row-gap: 8px;
+                color: #383838;
+                i {
+                    font-size: 12px;
+                }
+                b {
+                    font-weight: bold;
+                    color: #bc1717;
+                    padding: 0 4px;
+                }
+            }
+            .van-button--info {
+                background-color: #bc1717;
+                border-color: #bc1717;
+            }
+        }
+        .field-wrap {
+            border: 1px solid #ddd;
+            border-radius: 12px;
+            overflow: hidden;
+            .van-field__control {
+                font-size: 16px;
+                font-weight: bold;
+                letter-spacing: 2px;
+            }
+        }
+    }
     .cert-show {
         height: 70vh;
         background: #f5f5f5;

src/pages/user/order-detail/index.vue

@@ -1,21 +1,25 @@
 <template>
     <div class="order-detail" v-if="data">
         <div class="topbar" ref="topbar">
-            <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
+            <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
         </div>
-        <div class="order-detail-container" >
+        <div class="order-detail-container">
             <div class="top">
-                <h1 class="status">{{data.status}}</h1>
                 <div class="order-panel">
                     <div class="order-info">
                         <span class="order-icon">
                             <van-icon name="success" />
-<!--                            <van-icon name="fail" />-->
+                            <!--                            <van-icon name="fail" />-->
                         </span>
                         <div class="order-desc">
-                            <h3 class="text">感谢您对自在福田的信任，恭祝再结善缘。</h3>
+                            <h3 class="text">
-                            <p class="desc">处理时间：{{data.created_at}}</p>
+                                <span class="tag">{{ data.status }}</span
-                            <p class="desc">处理单位：{{data.unit_name}}</p>
+                                >{{ data.goods_name }}
+                            </h3>
+                            <p class="desc">付款时间：{{ data.paid_at }}</p>
+                            <p class="desc">处理时间：{{ data.created_at }}</p>
+                            <p class="desc">处理单位：{{ data.unit_name }}</p>
+                            <p class="desc">感谢您对{{ data.unit_name }}的信任，恭祝再结善缘。</p>
                         </div>
                     </div>
                     <div class="order-btns">
@@ -23,22 +27,22 @@
                         <button class="order-btn" @click="onShowCert">功德证书</button>
                     </div>
                     <div class="order-no">
-                        <span>善缘编号：{{data.order_sn}}</span>
+                        <span>善缘编号：{{ data.order_sn }}</span>
                         <button class="order-repeat" @click="onOrderAgain">再结善缘</button>
                     </div>
                 </div>
                 <div class="order-feedback" v-if="data.feedback_content">
-                    <h3 class="feed-title">反馈内容</h3>
+                    <h3 class="feed-title">来自{{ data.unit_name }}的反馈</h3>
-                    <p class="feed-content">{{data.feedback_content}}</p>
+                    <p class="feed-content">{{ data.feedback_content }}</p>
                     <div class="feed-picture">
-                        <img v-for="(pic, index) in data.feedback_pictures" :key="index" :src="pic" alt="" class="feed-picture" @click="onPreview(pic, data.feedback_pictures)">
+                        <img v-for="(pic, index) in data.feedback_pictures" :key="index" :src="pic" alt="" class="feed-picture" @click="onPreview(pic, data.feedback_pictures)" />
                     </div>
                 </div>
             </div>
         </div>
         <van-popup v-model="showCert" round>
             <div class="cert">
-                <img :src="certUrl">
+                <img :src="certUrl" />
                 <p class="tip">长按图片保存到手机</p>
             </div>
         </van-popup>
@@ -46,168 +50,203 @@
 </template>
 
 <script>
-import { getOrder } from '@/api';
+import { getOrder } from "@/api";
-import { previewImage } from '@/common/wechat-web';
+import { previewImage } from "@/common/wechat-web";
 
 export default {
-    data(){
+    data() {
         const { query } = this.$route;
         return {
             query,
-            data: null,
+            data: {
+                // id: 22807,
+                // temple_id: 48,
+                // order_sn: "K12721900403102616",
+                // goods_type: 3,
+                // goods_id: 355,
+                // goods_name: "\u5927\u96c4\u5b9d\u6bbf\u4f5b\u50cf\u8d34\u91d1\u5706\u6ee1\uff0c\u5c3e\u6b3e\u52a9\u7f18\u9700\u60a8\u62a4\u6301\uff01",
+                // spec_id: 0,
+                // buy_quantity: 1,
+                // buy_total: 1,
+                // price: "0.01",
+                // order_amount: "0.01",
+                // is_customized: 1,
+                // feedback_pictures: [
+                //     "https://temple-h5-new.oss-cn-hangzhou.aliyuncs.com/uploads/dev/2026/01/27/phpKk16ba.jpeg",
+                //     "https://temple-h5-new.oss-cn-hangzhou.aliyuncs.com/uploads/dev/2026/01/27/php4bqshn.jpeg",
+                // ],
+                // feedback_content: "\u5df2\u5904\u7406\uff0c\u8fd9\u662f\u540e\u53f0\u7684\u5904\u7406\u6d88\u606f",
+                // status: "\u5df2\u5904\u7406",
+                // paid_at: "2026-01-27 21:51:48",
+                // created_at: "2026-01-27 21:51:40",
+                // spec_name: "",
+                // dream: "",
+                // merit_name: "",
+                // is_auto: "",
+                // friendly_time: "",
+                // unit_name: "\u51c6\u63d0\u9053\u573a",
+            },
             showCert: false,
-        }
+        };
     },
-    mounted(){
+    mounted() {
         this.getOrder();
     },
 
     computed: {
-        certUrl(){
+        certUrl() {
-            return `https://wdx-temple.oss-cn-hangzhou.aliyuncs.com/uploads/merit/certificate/${this.data.id}.jpg`
+            return `https://wdx-temple.oss-cn-hangzhou.aliyuncs.com/uploads/merit/certificate/${this.data.id}.jpg`;
-        }
+        },
     },
     methods: {
-        onPreview(picture, pictureArr){
+        onPreview(picture, pictureArr) {
-            previewImage(picture, pictureArr)
+            previewImage(picture, pictureArr);
         },
-        async getOrder(){
+        async getOrder() {
             const res = await getOrder(this.query.id);
             this.data = res;
             this.wechatReady((wx) => {
-                this.shareToWechat(wx, res.data.shareConfig)
+                this.shareToWechat(wx, res.data.shareConfig);
-            })
+            });
         },
-        onOrderAgain(){
+        onOrderAgain() {
-            this.onPushToGoodsDetail(this.data.goods_type, this.data.goods_id, this.data.temple_id, this.data.spec_ids)
+            this.onPushToGoodsDetail(this.data.goods_type, this.data.goods_id, this.data.temple_id, this.data.spec_ids);
         },
-        onCustomer(){
+        onCustomer() {
-            this.$router.push({ name: 'user-customer'})
+            this.$router.push({ name: "user-customer" });
         },
-        onShowCert(){
+        onShowCert() {
             this.showCert = true;
-        }
+        },
-    }
+    },
-}
+};
 </script>
 
 <style lang="scss">
-.order-detail{
+.order-detail {
-    font-size: .35rem;
+    font-size: 0.35rem;
     min-height: 100vh;
     background: #f9f9f9;
-    .cert{
+    .cert {
-        padding: .3rem;
+        padding: 0.3rem;
-        border-radius: .1rem;
+        border-radius: 0.1rem;
-        img{
+        img {
             width: 8rem;
         }
-        .tip{
+        .tip {
-            font-size: .4rem;
+            font-size: 0.4rem;
-            padding: .4rem 0;
+            padding: 0.4rem 0;
             text-align: center;
         }
     }
-    .order-detail-container{
+    .order-detail-container {
-        padding: 0 .3rem;
+        padding: 0 0.3rem;
-        .top{
+        .top {
-            .status{
+            padding-top: 0.4rem;
-                font-size: .5rem;
+            .order-panel {
-                padding: .3rem 0;
-                padding-top: .6rem;
-                text-indent: .4rem;
-            }
-            .order-panel{
                 background: white;
-                border-radius: .1rem;
+                border-radius: 0.1rem;
-                padding: .4rem;
+                padding: 0.4rem;
-                box-shadow: 0 0 .3rem rgba(0,0,0,0.1);
+                border-radius: 12px;
-                .order-info{
+                box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.1);
+                .order-info {
                     display: flex;
-                    padding-bottom: .3rem;
+                    padding-bottom: 0.3rem;
-                    .order-icon{
+                    .order-icon {
                         width: 1rem;
                         height: 1rem;
                         display: flex;
                         background: forestgreen;
                         color: white;
                         border-radius: 1rem;
-                        font-size: .6rem;
+                        font-size: 0.6rem;
                         align-items: center;
+                        display: none;
                         justify-content: center;
-                        margin-right: .3rem;
+                        margin-right: 0.3rem;
                     }
-                    .order-desc{
+                    .order-desc {
                         flex: 1;
-                        .text{
+                        .text {
-                            font-size: .4rem;
+                            font-size: 0.4rem;
-                            line-height: 1.3;
+                            line-height: 1.6;
+                            .tag {
+                                background: #efbe2d;
+                                color: white;
+                                padding: 3px 10px;
+                                border-radius: 4px;
+                                display: inline-block;
+                                margin-right: 4px;
+                            }
                         }
-                        .desc{
+                        .desc {
-                            font-size: .35rem;
+                            font-size: 0.35rem;
                             color: #999;
-                            margin-top: .3rem;
+                            margin-top: 0.3rem;
                         }
                     }
                 }
-                .order-btns{
+                .order-btns {
                     display: flex;
-                    justify-content: flex-start;
+                    justify-content: center;
-                    padding-top: .2rem;
+                    column-gap: 12px;
+                    padding-top: 0.2rem;
                     border-bottom: 1px solid #eee;
-                    padding-bottom: .5rem;
+                    padding-bottom: 0.5rem;
-                    padding-left: 1.3rem;
+                    // padding-left: 1.3rem;
-                    padding-right: .3rem;
+                    // padding-right: 0.3rem;
-                    margin-bottom: .4rem;
+                    margin-bottom: 0.4rem;
-                    .order-btn{
+                    .order-btn {
                         height: 1rem;
-                        border-radius: .1rem;
+                        border-radius: 0.1rem;
                         border: 1px solid #ddd;
                         background: white;
-                        padding: 0 .5rem;
+                        padding: 0 0.5rem;
-                        margin-right: .2rem;
+                        margin-right: 0.2rem;
                     }
                 }
-                .order-no{
+                .order-no {
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
-                    span{
+                    span {
                         color: #555;
                     }
-                    .order-repeat{
+                    .order-repeat {
                         height: 1rem;
-                        border-radius: .1rem;
+                        border-radius: 1rem;
-                        border: 1px solid #e77979;
+                        border: 1px solid #efbe2d;
-                        padding: 0 .5rem;
+                        padding: 0 0.5rem;
-                        background: #e77979;
+                        background: #efbe2d;
                         color: white;
                     }
                 }
             }
-            .order-feedback{
+            .order-feedback {
                 background: white;
-                border-radius: .1rem;
+                border-radius: 0.1rem;
-                padding: .4rem;
+                padding: 0.4rem;
-                box-shadow: 0 0 .3rem rgba(0,0,0,0.1);
+                box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.1);
-                margin-top: 1rem;
+                margin-top: 0.5rem;
-                .feed-title{
+                border-radius: 12px;
-                    font-size: .4rem;
+                .feed-title {
+                    font-size: 0.4rem;
+                    padding-bottom: 0.2rem;
                 }
-                .feed-content{
+                .feed-content {
-                    padding-top: .3rem;
+                    padding-top: 0.3rem;
-                    padding-bottom: .3rem;
+                    padding-bottom: 0.3rem;
                     line-height: 1.4;
-                    font-size: .38rem;
+                    font-size: 0.38rem;
                     color: #888;
                     text-align: justify;
                 }
-                .feed-picture{
+                .feed-picture {
-                    img{
+                    display: grid;
-                        width: 23%;
+                    grid-template-columns: repeat(3, 1fr);
-                        margin-right: 2%;
+                    gap: 0.2rem;
-                        margin-bottom: .1rem;
+                    img {
-                        height: 1.5rem;
+                        width: 100%;
                     }
                 }
             }

src/router/index.js

@@ -1,280 +1,301 @@
-import Vue from 'vue'
+import Vue from "vue";
-import Router from 'vue-router';
+import Router from "vue-router";
 
 Vue.use(Router);
 
 const routes = [
     {
-        path: '',
+        path: "",
-        redirect: '/home'
+        redirect: "/home",
     },
     {
-        path: '/home',
+        path: "/home",
-        name: 'home',
+        name: "home",
-        component: () => import('../pages/home.vue') 
+        component: () => import("../pages/home.vue"),
     },
     {
-        path: '/search',
+        path: "/search",
-        name: 'search',
+        name: "search",
-        meta: { title: '搜索' },
+        meta: { title: "搜索" },
-        component: () => import('@/pages/search')
+        component: () => import("@/pages/search"),
-    },
-    {
-        path: '/mescroll',
-        name: 'mescroll',
-        meta: { title: '上拉下刷' },
-        component: () => import('@/pages/mescroll-test')
-    },
-    {
-        path: '/temple',
-        meta: { title: '寺院', navBarBackgroundColor: 'white', showNavBar: false },
-        component: { render: h => h('router-view') },
-        children: [
-            {
-                path: '',
-                name: 'temple-home',
-                meta: { title: '寺院首页', navBarBackgroundColor: 'white', showNavBar: false },
-                component: () => import('@/pages/temple-home')
-            },
-            {
-                path: 'list',
-                name: 'temple-list',
-                meta: { title: '寺院列表', navBarBackgroundColor: 'white',showNavBar: false },
-                component: () => import('@/pages/temple-list')
-            },
-            {
-                path: 'detail',
-                name: 'temple-detail',
-                meta: { title: '寺院详情', navBarBackgroundColor: 'white',showNavBar: false },
-                component: () => import('@/pages/temple-detail')
-            }
-        ]
-    },
-    {
-        path: '/buddha-activity',
-        name: 'buddha-activity',
-        meta: { title: '进展活动', navBarBackgroundColor: 'white' },
-        component: () => import('@/pages/buddha-activity')
-    },
-    {
-        path: '/buddha-activity-scroll',
-        name: 'buddha-activity-scroll',
-        meta: { title: '进展活动', navBarBackgroundColor: 'white' },
-        component: () => import('@/pages/buddha-activity-scroll')
-    },
-    {
-        path: '/buddha-detail',
-        name: 'buddha-detail',
-        meta: { title: '进展活动详情', navBarBackgroundColor: 'white' },
-        component: () => import('@/pages/buddha-detail')
-    },
-    {
-        path: '/merit-list',
-        name: 'merit-list',
-        meta: { title: '功德无量', navBarBackgroundColor: 'white' },
-        component: () => import('@/pages/merit-list')
-    },
-    {
-        path: '/merit-box',
-        name: 'merit-box',
-        meta: { title: '功德无量', navBarBackgroundColor: 'white', showNavBar: false},
-        component: () => import('@/pages/merit-box')
     },
 
     {
-        path: '/monk',
+        path: "/temple",
-        name: 'monk',
+        meta: { title: "寺院", navBarBackgroundColor: "white", showNavBar: false },
-        meta: { title: '详情', navBarBackgroundColor: 'white' },
+        component: { render: (h) => h("router-view") },
-        component: () => import('@/pages/monk')
-    },
-    {
-        path: '/pay',
-        name: 'pay',
-        meta: { title: '支付', navBarBackgroundColor: 'white' },
-        component: () => import('@/pages/pay')
-    },
-    {
-        path: '/pay-result',
-        name: 'pay-result',
-        meta: { title: '支付成功', navBarBackgroundColor: 'white' },
-        component: () => import('@/pages/pay-result')
-    },
-    {
-        path: '/join-cert',
-        name: 'join-cert',
-        meta: { title: '参与成功', navBarBackgroundColor: 'white' },
-        component: () => import('@/pages/join-cert')
-    },
-    {
-        path: '/get-user-phone',
-        name: 'get-user-phone',
-        meta: { title: '自在福田', navBarBackgroundColor: 'white' },
-        component: () => import('@/pages/get-user-phone')
-    },
-    {
-        path: '/goods-detail',
-        name: 'goods-detail',
-        meta: { title: '详情', navBarBackgroundColor: 'white' },
-        component: () => import('@/pages/goods-detail')
-    },
-    {
-        path: '/goods-light-detail',
-        name: 'goods-light-detail',
-        meta: { title: '详情', navBarBackgroundColor: 'white' },
-        component: () => import('@/pages/goods-light-detail')
-    },
-    {
-        path: '/fill-name',
-        name: 'fill-name',
-        meta: { title: '详情', navBarBackgroundColor: 'white' },
-        component: () => import('@/pages/fill-name')
-    },
-    {
-        path: '/everyday-donation',
-        name: 'everyday-donation',
-        meta: { title: '日行一善', navBarBackgroundColor: 'white', showNavBar: false },
-        component: () => import('@/pages/everyday-donation')
-    },
-    {
-        path: '/user',
-        component: () => import('@/pages/user/root'),
         children: [
             {
-                path: '',
+                path: "",
-                name: 'user-home',
+                name: "temple-home",
-                meta: { title: '个人中心', showNavBar: false },
+                meta: { title: "寺院首页", navBarBackgroundColor: "white", showNavBar: false },
-                component: () => import('@/pages/user/index')
+                component: () => import("@/pages/temple-home"),
             },
             {
-                path: 'customer',
+                path: "list",
-                name: 'user-customer',
+                name: "temple-list",
-                meta: { title: '客服中心' },
+                meta: { title: "寺院列表", navBarBackgroundColor: "white", showNavBar: false },
-                component: () => import('@/pages/user/customer')
+                component: () => import("@/pages/temple-list"),
             },
             {
-                path: 'temple-station',
+                path: "detail",
-                name: 'user-temple-station',
+                name: "temple-detail",
-                meta: { title: '寺院入驻', showNavBar: false },
+                meta: { title: "寺院详情", navBarBackgroundColor: "white", showNavBar: false },
-                component: () => import('@/pages/user/temple-station')
+                component: () => import("@/pages/temple-detail"),
+            },
+        ],
+    },
+    {
+        path: "/buddha-activity",
+        name: "buddha-activity",
+        meta: { title: "进展活动", navBarBackgroundColor: "white" },
+        component: () => import("@/pages/buddha-activity"),
+    },
+    {
+        path: "/buddha-activity-scroll",
+        name: "buddha-activity-scroll",
+        meta: { title: "进展活动", navBarBackgroundColor: "white" },
+        component: () => import("@/pages/buddha-activity-scroll"),
+    },
+    {
+        path: "/buddha-detail",
+        name: "buddha-detail",
+        meta: { title: "进展活动详情", navBarBackgroundColor: "white" },
+        component: () => import("@/pages/buddha-detail"),
+    },
+    {
+        path: "/merit-list",
+        name: "merit-list",
+        meta: { title: "功德无量", navBarBackgroundColor: "white" },
+        component: () => import("@/pages/merit-list"),
+    },
+    {
+        path: "/merit-box",
+        name: "merit-box",
+        meta: { title: "功德无量", navBarBackgroundColor: "white", showNavBar: false },
+        component: () => import("@/pages/merit-box"),
+    },
+
+    {
+        path: "/monk",
+        name: "monk",
+        meta: { title: "详情", navBarBackgroundColor: "white" },
+        component: () => import("@/pages/monk"),
+    },
+    {
+        path: "/pay",
+        name: "pay",
+        meta: { title: "捐赠", navBarBackgroundColor: "white" },
+        component: () => import("@/pages/pay"),
+    },
+    {
+        path: "/pay-result",
+        name: "pay-result",
+        meta: { title: "捐赠成功", navBarBackgroundColor: "white" },
+        component: () => import("@/pages/pay-result"),
+    },
+    {
+        path: "/join-cert",
+        name: "join-cert",
+        meta: { title: "参与成功", navBarBackgroundColor: "white" },
+        component: () => import("@/pages/join-cert"),
+    },
+    {
+        path: "/get-user-phone",
+        name: "get-user-phone",
+        meta: { title: "自在福田", navBarBackgroundColor: "white" },
+        component: () => import("@/pages/get-user-phone"),
+    },
+    {
+        path: "/goods-detail",
+        name: "goods-detail",
+        meta: { title: "详情", navBarBackgroundColor: "white" },
+        component: () => import("@/pages/goods-detail"),
+    },
+    {
+        path: "/goods-light-detail",
+        name: "goods-light-detail",
+        meta: { title: "详情", navBarBackgroundColor: "white" },
+        component: () => import("@/pages/goods-light-detail"),
+    },
+    {
+        path: "/fill-name",
+        name: "fill-name",
+        meta: { title: "详情", navBarBackgroundColor: "white" },
+        component: () => import("@/pages/fill-name"),
+    },
+    {
+        path: "/everyday-donation",
+        name: "everyday-donation",
+        meta: { title: "日行一善", navBarBackgroundColor: "white", showNavBar: false },
+        component: () => import("@/pages/everyday-donation"),
+    },
+    {
+        path: "/user",
+        component: () => import("@/pages/user/root"),
+        children: [
+            {
+                path: "",
+                name: "user-home",
+                meta: { title: "个人中心", showNavBar: false },
+                component: () => import("@/pages/user/index"),
             },
             {
-                path: 'temple-station-agreement',
+                path: "customer",
-                name: 'user-temple-station-agreement',
+                name: "user-customer",
-                meta: { title: '寺院入驻协议', showNavBar: false },
+                meta: { title: "客服中心" },
-                component: () => import('@/pages/user/temple-station-agreement')
+                component: () => import("@/pages/user/customer"),
             },
             {
-                path: 'temple-station-review',
+                path: "temple-station",
-                name: 'user-temple-station-review',
+                name: "user-temple-station",
-                meta: { title: '寺院入驻', showNavBar: false },
+                meta: { title: "寺院入驻", showNavBar: false },
-                component: () => import('@/pages/user/temple-station/review')
+                component: () => import("@/pages/user/temple-station"),
             },
             {
-                path: 'certificate',
+                path: "temple-station-agreement",
-                name: 'user-certificate',
+                name: "user-temple-station-agreement",
-                meta: { title: '客服中心' },
+                meta: { title: "寺院入驻协议", showNavBar: false },
-                component: () => import('@/pages/user/certificate')
+                component: () => import("@/pages/user/temple-station-agreement"),
             },
             {
-                path: 'order',
+                path: "temple-station-review",
-                name: 'user-order',
+                name: "user-temple-station-review",
-                meta: { title: '我的善缘' },
+                meta: { title: "寺院入驻", showNavBar: false },
-                component: () => import('@/pages/user/order')
+                component: () => import("@/pages/user/temple-station/review"),
             },
             {
-                path: 'order-detail',
+                path: "certificate",
-                name: 'user-order-detail',
+                name: "user-certificate",
-                meta: { title: '善缘详情' },
+                meta: { title: "客服中心" },
-                component: () => import('@/pages/user/order-detail')
+                component: () => import("@/pages/user/certificate"),
             },
             {
-                path: 'focus',
+                path: "order",
-                name: 'user-focus',
+                name: "user-order",
-                meta: { title: '我的关注' },
+                meta: { title: "我的善缘" },
-                component: () => import('@/pages/user/focus')
+                component: () => import("@/pages/user/order"),
             },
             {
-                path: 'approve',
+                path: "order-detail",
-                name: 'user-approve',
+                name: "user-order-detail",
-                meta: { title: '认证法师' },
+                meta: { title: "善缘详情" },
-                component: () => import('@/pages/user/approve')
+                component: () => import("@/pages/user/order-detail"),
             },
             {
-                path: 'course',
+                path: "focus",
-                meta: { title: '修行' },
+                name: "user-focus",
-                name: 'user-course',
+                meta: { title: "我的关注" },
-                component: { render: h => h('router-view')},
+                component: () => import("@/pages/user/focus"),
+            },
+            {
+                path: "approve",
+                name: "user-approve",
+                meta: { title: "认证法师" },
+                component: () => import("@/pages/user/approve"),
+            },
+            {
+                path: "course",
+                meta: { title: "修行" },
+                name: "user-course",
+                component: { render: (h) => h("router-view") },
                 children: [
                     {
-                        path: '',
+                        path: "",
-                        name: 'user-course-list',
+                        name: "user-course-list",
-                        meta: { title: '修行', showNavBar: false },
+                        meta: { title: "修行", showNavBar: false },
-                        component: () => import('@/pages/user/course'),
+                        component: () => import("@/pages/user/course"),
                     },
                     {
-                        path: 'detail',
+                        path: "detail",
-                        name: 'user-course-detail',
+                        name: "user-course-detail",
-                        meta: { title: '我的功课', showNavBar: false },
+                        meta: { title: "我的功课", showNavBar: false },
-                        component: () => import('@/pages/user/course/detail'),
+                        component: () => import("@/pages/user/course/detail"),
                     },
                     {
-                        path: 'count',
+                        path: "count",
-                        name: 'user-course-count',
+                        name: "user-course-count",
-                        meta: { title: '我的功课 - 修行', showNavBar: false },
+                        meta: { title: "我的功课 - 修行", showNavBar: false },
-                        component: () => import('@/pages/user/course/count'),
+                        component: () => import("@/pages/user/course/count"),
                     },
-                ]
+                ],
             },
-        ]
+        ],
-    }
+    },
-]
+    {
+        path: "/admin",
+        name: "admin",
+        meta: { title: "后台", navBarBackgroundColor: "white", showNavBar: false },
+        component: { render: (h) => h("router-view") },
+        children: [
+            {
+                path: "order",
+                name: "adminOrder",
+                meta: { title: "订单列表", navBarBackgroundColor: "white", showNavBar: false },
+                component: () => import("@/pages/admin/order/index.vue"),
+            },
+            {
+                path: "order-detail",
+                name: "adminOrderDetail",
+                meta: { title: "订单详情", navBarBackgroundColor: "white", showNavBar: false },
+                component: () => import("@/pages/admin/order/detail.vue"),
+            },
+            {
+                path: "order-process",
+                name: "adminOrderProcess",
+                meta: { title: "订单处理", navBarBackgroundColor: "white", showNavBar: false },
+                component: () => import("@/pages/admin/order/process.vue"),
+            },
+        ],
+    },
+];
 const router = new Router({
-    mode: 'hash',
+    mode: "hash",
     routes,
-    scrollBehavior(){
+    scrollBehavior() {
         return {
             x: 0,
-            y: 0
+            y: 0,
-        }
+        };
-    }
+    },
-})
+});
 
 export default router;
 
 export const tabbar = [
     {
-        path: '/home',
+        path: "/home",
-        name: 'home',
+        name: "home",
-        active: require('../assets/img/tabbar/tabbar_icon_01_click.png'),
+        active: require("../assets/img/tabbar/tabbar_icon_01_click.png"),
-        inactive: require('../assets/img/tabbar/tabbar_icon_01.png'),
+        inactive: require("../assets/img/tabbar/tabbar_icon_01.png"),
-        title: '首页'
+        title: "首页",
+    },
+    // {
+    //     path: '/user/course',
+    //     name: 'user-course-list',
+    //     active: require('../assets/img/tabbar/tabbar_icon_02_click.png'),
+    //     inactive: require('../assets/img/tabbar/tabbar_icon_02.png'),
+    //     title: '修行'
+    // },
+    {
+        path: "/merit-box",
+        name: "merit-box",
+        active: require("../assets/img/tabbar/tabbar_icon_03_click.png"),
+        inactive: require("../assets/img/tabbar/tabbar_icon_03.png"),
+        title: "每日功德",
     },
     {
-        path: '/user/course',
+        path: "/temple/list",
-        name: 'user-course-list',
+        name: "temple-list",
-        active: require('../assets/img/tabbar/tabbar_icon_02_click.png'),
+        active: require("../assets/img/tabbar/tabbar_icon_04_click.png"),
-        inactive: require('../assets/img/tabbar/tabbar_icon_02.png'),
+        inactive: require("../assets/img/tabbar/tabbar_icon_04.png"),
-        title: '修行'
+        title: "参寺",
     },
     {
-        path: '/merit-box',
+        path: "/user/",
-        name: 'merit-box',
+        name: "user-home",
-        active: require('../assets/img/tabbar/tabbar_icon_03_click.png'),
+        active: require("../assets/img/tabbar/tabbar_icon_05_click.png"),
-        inactive: require('../assets/img/tabbar/tabbar_icon_03.png'),
+        inactive: require("../assets/img/tabbar/tabbar_icon_05.png"),
-        title: '每日功德'
+        title: "我的",
     },
-    {
+];
-        path: '/temple/list',
-        name: 'temple-list',
-        active: require('../assets/img/tabbar/tabbar_icon_04_click.png'),
-        inactive: require('../assets/img/tabbar/tabbar_icon_04.png'),
-        title: '参寺'
-    },
-    {
-        path: '/user/',
-        name: 'user-home',
-        active: require('../assets/img/tabbar/tabbar_icon_05_click.png'),
-        inactive: require('../assets/img/tabbar/tabbar_icon_05.png'),
-        title: '我的'
-    },
-]