wip: 4.0

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "arrowParens": "avoid",
+  "bracketSameLine": true,
+  "bracketSpacing": false,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

babel.config.js

@@ -3,9 +3,9 @@
 module.exports = {
   presets: [
     [
-      "taro",
+      'taro',
       {
-        framework: "vue3",
+        framework: 'vue3',
         ts: true,
       },
     ],

components.d.ts

@@ -29,12 +29,16 @@ declare module '@vue/runtime-core' {
     NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
     NutInput: typeof import('@nutui/nutui-taro')['Input']
     NutInputNumber: typeof import('@nutui/nutui-taro')['InputNumber']
+    NutNumberKeyboard: typeof import('@nutui/nutui-taro')['NumberKeyboard']
     NutOverlay: typeof import('@nutui/nutui-taro')['Overlay']
     NutPagination: typeof import('@nutui/nutui-taro')['Pagination']
     NutPicker: typeof import('@nutui/nutui-taro')['Picker']
     NutPopup: typeof import('@nutui/nutui-taro')['Popup']
     NutPrice: typeof import('@nutui/nutui-taro')['Price']
-    NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar']
+    NutRadio: typeof import('@nutui/nutui-taro')['Radio']
+    NutRadioGroup: typeof import('@nutui/nutui-taro')['RadioGroup']
+    NutRate: typeof import('@nutui/nutui-taro')['Rate']
+    NutShortPassword: typeof import('@nutui/nutui-taro')['ShortPassword']
     NutSwiper: typeof import('@nutui/nutui-taro')['Swiper']
     NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem']
     NutSwitch: typeof import('@nutui/nutui-taro')['Switch']

config/index.ts

@@ -1,8 +1,9 @@
 // @ts-nocheck
-import Components from "unplugin-vue-components/webpack";
+import Components from 'unplugin-vue-components/webpack';
-import NutUIResolver from "@nutui/nutui-taro/dist/resolver";
+import NutUIResolver from '@nutui/nutui-taro/dist/resolver';
-import { join } from "node:path";
+import {UnifiedWebpackPluginV5} from 'weapp-tailwindcss/webpack';
-import { argv } from "yargs";
+import {join} from 'node:path';
+import {argv} from 'yargs';
 
 const {robot = 1, desc} = argv;
 
@@ -22,10 +23,10 @@ const CIPluginOptFn = async () => {
 };
 
 const config = {
-  projectName: "taroApp",
+  projectName: 'taroApp',
-  date: "2023-8-13",
+  date: '2023-8-13',
   designWidth(input: {file: string}) {
-    if (input?.file?.replace(/\\+/g, "/").indexOf("@nutui") > -1) {
+    if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) {
       return 375;
     }
     return 750;
@@ -36,17 +37,17 @@ const config = {
     828: 1.81 / 2,
     375: 2,
   },
-  sourceRoot: "src",
+  sourceRoot: 'src',
-  outputRoot: "dist",
+  outputRoot: 'dist',
-  plugins: ["@tarojs/plugin-html", ["@tarojs/plugin-mini-ci", CIPluginOptFn]],
+  plugins: ['@tarojs/plugin-html', ['@tarojs/plugin-mini-ci', CIPluginOptFn]],
   defineConstants: {},
   copy: {
     patterns: [],
     options: {},
   },
-  framework: "vue3",
+  framework: 'vue3',
   compiler: {
-    type: "webpack5",
+    type: 'webpack5',
     prebundle: {enable: false},
   },
   cache: {
@@ -56,14 +57,26 @@ const config = {
     data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`,
   },
   alias: {
-    "@": join(__dirname, "..", "src"),
+    '@': join(__dirname, '..', 'src'),
   },
   mini: {
     webpackChain(chain) {
-      chain.plugin("unplugin-vue-components").use(
+      chain.merge({
+        plugin: {
+          install: {
+            plugin: UnifiedWebpackPluginV5,
+            args: [
+              {
+                appType: 'taro',
+              },
+            ],
+          },
+        },
+      });
+      chain.plugin('unplugin-vue-components').use(
         Components({
           resolvers: [NutUIResolver({taro: true})],
-        })
+        }),
       );
     },
     miniCssExtractPluginOption: {
@@ -75,6 +88,7 @@ const config = {
         enable: true,
         config: {
           // selectorBlackList: ['nut-']
+          removeCursorStyle: false,
         },
       },
       url: {
@@ -86,23 +100,23 @@ const config = {
       cssModules: {
         enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
         config: {
-          namingPattern: "module", // 转换模式，取值为 global/module
+          namingPattern: 'module', // 转换模式，取值为 global/module
-          generateScopedName: "[name]__[local]___[hash:base64:5]",
+          generateScopedName: '[name]__[local]___[hash:base64:5]',
         },
       },
     },
   },
   h5: {
     webpackChain(chain) {
-      chain.plugin("unplugin-vue-components").use(
+      chain.plugin('unplugin-vue-components').use(
         Components({
           resolvers: [NutUIResolver({taro: true})],
-        })
+        }),
       );
     },
-    publicPath: "/",
+    publicPath: '/',
-    staticDirectory: "static",
+    staticDirectory: 'static',
-    esnextModules: ["nutui-taro", "icons-vue-taro"],
+    esnextModules: ['nutui-taro', 'icons-vue-taro'],
     postcss: {
       autoprefixer: {
         enable: true,
@@ -111,8 +125,8 @@ const config = {
       cssModules: {
         enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
         config: {
-          namingPattern: "module", // 转换模式，取值为 global/module
+          namingPattern: 'module', // 转换模式，取值为 global/module
-          generateScopedName: "[name]__[local]___[hash:base64:5]",
+          generateScopedName: '[name]__[local]___[hash:base64:5]',
         },
       },
     },
@@ -120,8 +134,8 @@ const config = {
 };
 
 module.exports = function (merge) {
-  if (process.env.NODE_ENV === "development") {
+  if (process.env.NODE_ENV === 'development') {
-    return merge({}, config, require("./dev"));
+    return merge({}, config, require('./dev'));
   }
-  return merge({}, config, require("./prod"));
+  return merge({}, config, require('./prod'));
 };

package.json

@@ -38,6 +38,7 @@
 		"preview": "vite preview",
 		"cz": "cz",
 		"lf": "npx prettier --write --end-of-line lf .",
+		"postinstall": "weapp-tw patch",
 		"build:weapp:prod:upload": "taro build --type weapp --upload --robot=1 --desc='正式环境'",
 		"build:weapp:test:upload": "taro build --type weapp --upload --robot=2 --desc='测试环境' --mode test"
 	},
@@ -63,55 +64,58 @@
 		"@nutui/icons-vue-taro": "^0.0.9",
 		"@nutui/nutui-taro": "^4.3.6",
 		"@qiun/vue-ucharts": "2.5.0-20230101",
-		"@tarojs/components": "3.6.28",
+		"@tarojs/components": "3.6.29",
-		"@tarojs/helper": "3.6.28",
+		"@tarojs/helper": "3.6.29",
-		"@tarojs/plugin-framework-vue3": "3.6.28",
+		"@tarojs/plugin-framework-vue3": "3.6.29",
-		"@tarojs/plugin-html": "3.6.28",
+		"@tarojs/plugin-html": "3.6.29",
-		"@tarojs/plugin-platform-alipay": "3.6.28",
+		"@tarojs/plugin-platform-alipay": "3.6.29",
-		"@tarojs/plugin-platform-h5": "3.6.28",
+		"@tarojs/plugin-platform-h5": "3.6.29",
-		"@tarojs/plugin-platform-jd": "3.6.28",
+		"@tarojs/plugin-platform-jd": "3.6.29",
-		"@tarojs/plugin-platform-qq": "3.6.28",
+		"@tarojs/plugin-platform-qq": "3.6.29",
-		"@tarojs/plugin-platform-swan": "3.6.28",
+		"@tarojs/plugin-platform-swan": "3.6.29",
-		"@tarojs/plugin-platform-tt": "3.6.28",
+		"@tarojs/plugin-platform-tt": "3.6.29",
-		"@tarojs/plugin-platform-weapp": "3.6.28",
+		"@tarojs/plugin-platform-weapp": "3.6.29",
-		"@tarojs/runtime": "3.6.28",
+		"@tarojs/runtime": "3.6.29",
-		"@tarojs/shared": "3.6.28",
+		"@tarojs/shared": "3.6.29",
-		"@tarojs/taro": "3.6.28",
+		"@tarojs/taro": "3.6.29",
 		"dayjs": "^1.11.10",
-		"pinia": "^2.1.7",
-		"uqrcodejs": "^4.0.7",
 		"vue": "^3.3.9"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.23.5",
 		"@commitlint/cli": "^18.4.3",
 		"@commitlint/config-conventional": "^18.4.3",
-		"@tarojs/cli": "3.6.28",
+		"@tarojs/cli": "3.6.29",
-		"@tarojs/plugin-mini-ci": "3.6.28",
+		"@tarojs/plugin-mini-ci": "3.6.29",
-		"@tarojs/taro-loader": "3.6.28",
+		"@tarojs/taro-loader": "3.6.29",
-		"@tarojs/webpack5-runner": "3.6.28",
+		"@tarojs/webpack5-runner": "3.6.29",
 		"@types/node": "^18.19.1",
 		"@types/webpack-env": "^1.18.4",
 		"@typescript-eslint/eslint-plugin": "^6.13.1",
 		"@typescript-eslint/parser": "^6.13.1",
+		"@unocss/webpack": "^0.60.0",
 		"@vue/babel-plugin-jsx": "^1.1.5",
 		"@vue/compiler-sfc": "^3.3.9",
-		"babel-preset-taro": "3.6.28",
+		"autoprefixer": "^10.4.19",
+		"babel-preset-taro": "3.6.29",
 		"commitizen": "^4.3.0",
 		"css-loader": "3.4.2",
 		"cz-customizable": "^7.0.0",
 		"eslint": "^8.55.0",
-		"eslint-config-taro": "3.6.28",
+		"eslint-config-taro": "3.6.29",
 		"eslint-plugin-vue": "^9.19.2",
 		"husky": "^8.0.3",
 		"lint-staged": "^15.1.0",
 		"postcss": "8.4.29",
+		"postcss-rem-to-responsive-pixel": "^6.0.1",
 		"style-loader": "1.3.0",
 		"stylelint": "9.3.0",
+		"tailwindcss": "^3.4.3",
 		"ts-node": "^10.9.1",
 		"typescript": "^4.9.5",
 		"unplugin-vue-components": "^0.23.0",
 		"vue-loader": "^17.3.1",
+		"weapp-tailwindcss": "^3.2.0",
 		"webpack": "^5.89.0"
 	}
 }

postcss.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    'postcss-rem-to-responsive-pixel': {
+      // 32 意味着 1rem = 32rpx
+      rootValue: 32,
+      // 默认所有属性都转化
+      propList: ['*'],
+      // 转化的单位,可以变成 px / rpx
+      transformUnit: 'rpx',
+    },
+  },
+};

src/api/goods.ts

@@ -1,67 +1,67 @@
-import request from "@/utils/request";
+import request from '@/utils/request';
 
 // 获取商品列表
-export const getGoodsList = () => request("/point/goods", {}, "POST");
+export const getGoodsList = () => request('/point/goods', {}, 'POST');
 
 // 添加购物车
-export const addCart = (data: object) => request("/user/addCart", data, "POST");
+export const addCart = (data: object) => request('/user/addCart', data, 'POST');
 
 // 获取购物车列表
-export const getCartList = () => request("/user/cart", {}, "POST");
+export const getCartList = () => request('/user/cart', {}, 'POST');
 
 // 获取积分商品详情
 export const getGoodsDetail = (data: object) =>
-  request("/point/details", data, "POST");
+  request('/point/details', data, 'POST');
 
 // 积分商品下单
 export const createOrder = (data: object) =>
-  request("/point/place", data, "POST");
+  request('/point/place', data, 'POST');
 
 // 确认付款
 export const payJfOrder = (data: object) =>
-  request("/point/confirmOrder", data, "POST");
+  request('/point/confirmOrder', data, 'POST');
 
 // 获取活动商品
-export const getActiveGoods = () => request("/goods", {}, "POST");
+export const getActiveGoods = () => request('/goods', {}, 'POST');
 
 // 获取活动商品详情
 export const getActiveGoodsDetail = (data: object) =>
-  request("/goods/details", data, "POST");
+  request('/goods/details', data, 'POST');
 
 // 创建订单
 export const createActiveOrder = (data: object) =>
-  request("/order/place", data, "POST");
+  request('/order/place', data, 'POST');
 
 // 活动订单列表
 export const getActiveOrderList = (data: object) =>
-  request("/user/order", data, "POST");
+  request('/user/order', data, 'POST');
 
 // 获取分类列表
-export const getCategoryList = () => request("/goods/class", {}, "POST");
+export const getCategoryList = () => request('/goods/class', {}, 'POST');
 
 // 活动订单删除
 export const deleteActiveOrder = (data: object) =>
-  request("/user/order/remove", data, "POST");
+  request('/user/order/remove', data, 'POST');
 
 // 积分订单删除
 export const deleteJfOrder = (data: object) =>
-  request("/user/point/remove", data, "POST");
+  request('/user/point/remove', data, 'POST');
 
 // 获取分类商品
 export const getCategoryGoods = (data: object) =>
-  request("/class/goods/list", data, "POST");
+  request('/class/goods/list', data, 'POST');
 
 // 获取商家列表
 export const getMerList = (data: object) =>
-  request("/store/list", data, "POST");
+  request('/store/list', data, 'POST');
 
 // 获取商家商品分类
 export const getMerCategory = (data: object) =>
-  request("/store/classify", data, "POST");
+  request('/store/classify', data, 'POST');
 
 // 获取商家商品
 export const getGoodList = (data: object) =>
-  request("/store/goods", data, "POST");
+  request('/store/goods', data, 'POST');
 
 // // 获取活动商家列表
 // export const getHotMerList = (data: object) =>
@@ -77,4 +77,12 @@ export const getGoodList = (data: object) =>
 
 // 获取全部商家类目
 export const getAllMerCategory = () =>
-  request("/home/all/classify", {}, "POST");
+  request('/home/all/classify', {}, 'POST');
+
+// 获取活动订单详情
+export const getActiveOrderDetail = (data: object) =>
+  request('/user/order/details', data, 'POST');
+
+// 校验交易密码
+export const checkTradePwd = (data: object) =>
+  request('/user/check/payPassword', data, 'POST');

src/api/home.ts

@@ -5,3 +5,6 @@ export const getHomeList = () => request("/home/classify", {}, "POST");
 
 // 获取商户子列表
 export const getHomeSubList = () => request("/home/all/classify", {}, "POST");
+
+// 查找商家
+export const getStoreList = (data) => request("/find/store", data, "POST");

src/app.config.ts

@@ -1,129 +1,128 @@
 export default defineAppConfig({
   pages: [
-    "pages/index/index",
+    'pages/index/index',
-    "pages/category/index",
+    'pages/game/gamehome/index',
-    "pages/cart/index",
+    'pages/cart/index',
-    "pages/user/index",
+    'pages/user/index',
-    "pages/allClassList/index",
+    'pages/allClassList/index',
+    'pages/game/gamedetail/index',
+    'pages/game/gameview/index',
+    'pages/game/view/index',
   ],
   subPackages: [
     {
-      root: "pages/users",
+      root: 'pages/users',
       pages: [
-        "user_agreement/index",
+        'user_agreement/index',
-        "order_list/index",
+        'order_list/index',
-        "setting/index",
+        'setting/index',
-        "user_setting/index",
+        'user_setting/index',
-        "settled_mer/index",
+        'settled_mer/index',
-        "order_list_detail/index",
+        'order_list_detail/index',
-        "account/index",
+        'account/index',
-        "distribution/index",
+        'distribution/index',
-        "distribution/integral/index",
+        'distribution/integral/index',
-        "distribution/userlist/index",
+        'distribution/userlist/index',
-        "login/index",
+        'login/index',
-        "bindPhone/index",
+        'bindPhone/index',
-        "pending_order/index",
+        'pending_order/index',
-        "pending_order/pending_order_detail/index",
+        'pending_order/pending_order_detail/index',
       ],
     },
     {
-      root: "pages/goods",
+      root: 'pages/goods',
-      pages: ["goods_detail/index", "order_create/index", "order_status/index"],
-    },
-    {
-      root: "pages/admin",
       pages: [
-        "verify/index",
+        'goods_detail/index',
-        "order_manage/index",
+        'order_create/index',
-        "order_manage/list/index",
+        'order_status/index',
-        "order_manage/detail/index",
+        'pay/index',
-        "verify/verify_list/index",
-        "statistics/index",
-        "withdrawal/index",
-        "add_order/index",
-        "add_order/add_table/index",
-        "add_order/add_menu/index",
-        "add_order/pending_order/index",
-        "add_order/pending_order/pending_order_detail/index",
-        "add_order/pending_order/pay/index",
-        "add_order/pending_order/wx_pay_code/index",
       ],
     },
     {
-      root: "pages/product",
+      root: 'pages/admin',
-      pages: ["list/index", "addGoods/index"],
-    },
-    {
-      root: "pages/game",
       pages: [
-        "gamehome/index",
+        'verify/index',
-        "gamedetail/index",
+        'order_manage/index',
-        "gameview/index",
+        'order_manage/list/index',
-        "view/index",
+        'order_manage/detail/index',
+        'verify/verify_list/index',
+        'statistics/index',
+        'withdrawal/index',
+        'add_order/index',
+        'add_order/add_table/index',
+        'add_order/add_menu/index',
+        'add_order/pending_order/index',
+        'add_order/pending_order/pending_order_detail/index',
+        'add_order/pending_order/pay/index',
+        'add_order/pending_order/wx_pay_code/index',
       ],
     },
     {
-      root: "pages/hotGoods",
+      root: 'pages/product',
-      pages: ["index/index", "hot_list/index"],
+      pages: ['list/index', 'addGoods/index'],
     },
     {
-      root: "pages/mer",
+      root: 'pages/hotGoods',
-      pages: ["mer_detail/index"],
+      pages: ['index/index', 'hot_list/index'],
     },
     {
-      root: "pages/marketing",
+      root: 'pages/mer',
-      pages: ["sign/index"],
+      pages: ['mer_detail/index'],
     },
     {
-      root: "pages/search",
+      root: 'pages/marketing',
-      pages: ["index"],
+      pages: ['sign/index'],
+    },
+    {
+      root: 'pages/search',
+      pages: ['index'],
     },
   ],
   window: {
-    backgroundTextStyle: "light",
+    backgroundTextStyle: 'light',
-    navigationBarBackgroundColor: "#fff",
+    navigationBarBackgroundColor: '#fff',
-    navigationBarTitleText: "WeChat",
+    navigationBarTitleText: 'WeChat',
-    navigationBarTextStyle: "black",
+    navigationBarTextStyle: 'black',
   },
   tabBar: {
-    color: "#666666",
+    color: '#666666',
-    selectedColor: "#ff0000",
+    selectedColor: '#ff0000',
-    backgroundColor: "#ffffff",
+    backgroundColor: '#ffffff',
-    borderStyle: "white",
+    borderStyle: 'white',
     list: [
       {
-        pagePath: "pages/index/index",
+        pagePath: 'pages/index/index',
-        iconPath: "static/tabbar/1-001.png",
+        iconPath: 'static/tabbar/1-01.png',
-        selectedIconPath: "static/tabbar/1-002.png",
+        selectedIconPath: 'static/tabbar/1-02.png',
-        text: "首页",
+        text: '首页',
-      },
-      // {
-      //     pagePath: "pages/category/index",
-      //     iconPath: "static/tabbar/2-001.png",
-      //     selectedIconPath: "static/tabbar/2-002.png",
-      //     text: "分类",
-      // },
-      {
-        pagePath: "pages/cart/index",
-        iconPath: "static/tabbar/3-001.png",
-        selectedIconPath: "static/tabbar/3-002.png",
-        text: "购物车",
       },
       {
-        pagePath: "pages/user/index",
+        pagePath: 'pages/game/gamehome/index',
-        iconPath: "static/tabbar/4-001.png",
+        iconPath: 'static/tabbar/2-01.png',
-        selectedIconPath: "static/tabbar/4-002.png",
+        selectedIconPath: 'static/tabbar/2-02.png',
-        text: "我的",
+        text: '游戏',
+      },
+      {
+        pagePath: 'pages/cart/index',
+        iconPath: 'static/tabbar/3-01.png',
+        selectedIconPath: 'static/tabbar/3-02.png',
+        text: '购物车',
+      },
+      {
+        pagePath: 'pages/user/index',
+        iconPath: 'static/tabbar/4-01.png',
+        selectedIconPath: 'static/tabbar/4-02.png',
+        text: '我的',
       },
     ],
   },
   permission: {
-    "scope.userLocation": {
+    'scope.userLocation': {
-      desc: "你的位置信息将用于小程序位置接口的效果展示",
+      desc: '你的位置信息将用于小程序位置接口的效果展示',
     },
   },
-  requiredBackgroundModes: ["audio", "location"],
+  requiredBackgroundModes: ['audio', 'location'],
   // @ts-ignore
-  requiredPrivateInfos: ["getLocation"],
+  requiredPrivateInfos: ['getLocation'],
-  lazyCodeLoading: "requiredComponents",
+  lazyCodeLoading: 'requiredComponents',
 });

src/app.scss

@@ -1,8 +1,11 @@
 @import "./static/iconfont/iconfont.css";
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
 
 page {
   background-color: #f5f5f5;
-  font-size: 30rpx;
+  // font-size: 30rpx;
   // IOS安全区域
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);

src/app.ts

@@ -1,15 +1,10 @@
-import { createApp } from "vue";
+import {createApp} from 'vue';
-import "./app.scss";
+import Taro from '@tarojs/taro';
-import Taro from "@tarojs/taro";
+import './app.scss';
-// import * as Sentry from "sentry-miniapp";
 
 // 小程序场景值
 const scenes = [1007, 1008, 1011, 1012, 1013, 1047, 1048, 1049];
 
-// Sentry.init({
-//   dsn: "https://47703e01ba4344b8b252c15e8fd980fd@sentry.io/1528228",
-// });
-
 const App = createApp({
   onLaunch(options: {
     path: string;
@@ -19,20 +14,20 @@ const App = createApp({
     referrerInfo: object | any;
   }) {
     // 检测更新
-    if (Taro.canIUse("getUpdateManager") && options.scene !== 1154) {
+    if (Taro.canIUse('getUpdateManager') && options.scene !== 1154) {
       const updateManager = Taro.getUpdateManager();
       updateManager.onCheckForUpdate(function (res) {
         if (res.hasUpdate) {
           updateManager.onUpdateFailed(function () {
             return Taro.showToast({
-              title: "新版本下载失败",
+              title: '新版本下载失败',
-              icon: "none",
+              icon: 'none',
             });
           });
           updateManager.onUpdateReady(function () {
             Taro.showModal({
-              title: "更新提示",
+              title: '更新提示',
-              content: "新版本已经下载好，是否重启当前应用？",
+              content: '新版本已经下载好，是否重启当前应用？',
               success(res) {
                 if (res.confirm) {
                   updateManager.applyUpdate();
@@ -42,8 +37,8 @@ const App = createApp({
           });
           updateManager.onUpdateFailed(function () {
             Taro.showModal({
-              title: "发现新版本",
+              title: '发现新版本',
-              content: "请删除当前小程序，重启搜索打开...",
+              content: '请删除当前小程序，重启搜索打开...',
             });
           });
         }
@@ -55,10 +50,10 @@ const App = createApp({
     if (scenes.includes(options.scene)) {
       if (options.query.scene) {
         Taro.showToast({
-          title: "已检测到推荐人",
+          title: '已检测到推荐人',
-          icon: "none",
+          icon: 'none',
         });
-        Taro.setStorageSync("bind_id", options.query.scene);
+        Taro.setStorageSync('bind_id', options.query.scene);
       }
     }
   },

src/components/Cart.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import {ref} from 'vue';
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import { addCart, getCart, clearCart } from "@/api/cart";
+import {addCart, getCart, clearCart} from '@/api/cart';
-import { Del2 } from "@nutui/icons-vue-taro";
+import {Plus, Minus} from '@nutui/icons-vue-taro';
-import { createActiveOrder } from "@/api/goods";
+import {createActiveOrder} from '@/api/goods';
-import { createAfterOrder, getUserPoint } from "@/api/admin";
+import {createAfterOrder, getUserPoint} from '@/api/admin';
-import Pay from "@/components/Pay.vue";
+import Pay from '@/components/Pay.vue';
 
 interface CardList {
   name: string;
@@ -30,7 +30,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["updateCart"]);
+const emit = defineEmits(['updateCart']);
 
 const openModal = async () => {
   await get_cart_list();
@@ -47,13 +47,13 @@ const add_cart = async (item: CardList, num: number = 1) => {
     });
     Taro.showToast({
       title: res.msg,
-      icon: "none",
+      icon: 'none',
     });
     await get_cart_list();
   } catch (e) {
     Taro.showToast({
       title: e.msg,
-      icon: "none",
+      icon: 'none',
     });
   }
 };
@@ -92,11 +92,11 @@ const get_cart_list = async () => {
       cartInfo.value.price += Number(item.price);
       cartInfo.value.exchange += Number(item.exchange);
     });
-    emit("updateCart", res.data.data || []);
+    emit('updateCart', res.data.data || []);
   } catch (e) {
     Taro.showToast({
       title: e.msg,
-      icon: "none",
+      icon: 'none',
     });
   }
 };
@@ -110,7 +110,7 @@ const clear_cart = async () => {
   } catch (e) {
     Taro.showToast({
       title: e.msg,
-      icon: "none",
+      icon: 'none',
     });
   }
   show.value = false;
@@ -124,7 +124,7 @@ const closePay = (val: boolean) => {
   isShowPay.value = val;
   orderData.value = [];
   Taro.redirectTo({
-    url: "/pages/users/order_list/index?type=0",
+    url: '/pages/users/order_list/index?type=0',
   });
 };
 
@@ -142,8 +142,8 @@ const create_order = async () => {
         url: `/pages/admin/add_order/pending_order/pending_order_detail/index?oid=${res.data.oid}&bid=${props.merInfo.bid}`,
       });
     } else {
-      const mer_info = Taro.getStorageSync("mer_info");
+      const mer_info = Taro.getStorageSync('mer_info');
-      const user_info = Taro.getStorageSync("userInfo");
+      const user_info = Taro.getStorageSync('userInfo');
       const data = await getUserPoint({
         phone: user_info.data.phone,
         bid: mer_info.bid,
@@ -157,17 +157,20 @@ const create_order = async () => {
           jh_info: data.data,
           oid: res.data.oid,
         };
-        isShowPay.value = true;
+        // isShowPay.value = true;
+        Taro.navigateTo({
+          url: `/pages/goods/pay/index?oid=${res.data.oid}&bid=${mer_info.bid}`,
+        });
       }
     }
     Taro.showToast({
       title: res.msg,
-      icon: "none",
+      icon: 'none',
     });
   } catch (e) {
     Taro.showToast({
       title: e.msg,
-      icon: "none",
+      icon: 'none',
     });
   }
 };
@@ -181,9 +184,17 @@ defineExpose({
 <template>
   <view>
     <view class="cart" @click.stop="openModal">
-      <view class="container">
+      <view class="container flex items-center">
-        <view>购物车数量: {{ cartInfo.count }}</view>
+        <!-- <view>购物车数量: {{ cartInfo.count }}</view> -->
-        <view v-if="cartInfo.count > 0">
+        <view class="cardImg">
+          <image
+            src="http://p1.meituan.net/csc/929f447a96a44b09a09b2e0055433222717.png">
+          </image>
+          <view class="count-text" v-if="cartInfo.count > 0">
+            <text>{{ cartInfo.count }}</text>
+          </view>
+        </view>
+        <view class="ml-1">
           <text>总金额: {{ cartInfo.price.toFixed(2) }}元</text>
           <text v-if="!IsPendingOrder"
             >，总积分: {{ cartInfo.exchange.toFixed(2) }}</text
@@ -191,23 +202,25 @@ defineExpose({
         </view>
       </view>
       <view v-if="cartInfo.count > 0" class="payBtn" @click.stop="create_order"
-        >立即下单</view
+        >去结算</view
       >
     </view>
     <!--  购物车弹窗  -->
     <nut-popup
-      :style="{ padding: '20rpx' }"
+      :style="{padding: '15px'}"
       round
       position="bottom"
       z-index="1"
       :catch-move="true"
       :safe-area-inset-bottom="true"
-      v-model:visible="show"
+      v-model:visible="show">
-    >
       <view class="list-header">
         <view class="left" @click.stop="clear_cart">
-          <Del2 color="#666666" />
+          <!-- <Del2 color="#666666" /> -->
-          <text style="color: #666666">清空购物车</text>
+          <image
+            class="w-[20px] h-[20px]"
+            src="http://p0.meituan.net/csc/db4d11fd744b69435c6ffdc6bfc868c5684.png" />
+          <text class="text-[20px]" style="color: #666666">清空购物车</text>
         </view>
       </view>
       <scroll-view :scroll-y="true" class="cart-list">
@@ -216,9 +229,10 @@ defineExpose({
             <image :src="item.cover" />
             <view class="center">
               <view class="name">{{ item.name }}</view>
-              <view class="price">
+
+              <view class="price flex">
                 <view>现金:{{ item.price }}</view>
-                <view>积分:{{ item.exchange }}</view>
+                <view class="ml-2">积分:{{ item.exchange }}</view>
               </view>
             </view>
           </view>
@@ -227,57 +241,90 @@ defineExpose({
             readonly
             :min="-1"
             @add="() => onAdd(item)"
-            @reduce="() => onReduce(item)"
+            @reduce="() => onReduce(item)">
-          />
+            <template #left-icon>
+              <view class="btn" @click.stop="onReduce(item)">
+                <Minus />
+              </view>
+            </template>
+            <template #right-icon>
+              <view class="btn" @click.stop="onAdd(item)">
+                <Plus />
+              </view>
+            </template>
+          </nut-input-number>
         </view>
       </scroll-view>
-      <view style="height: 140rpx"></view>
+      <view style="height: 140px"></view>
     </nut-popup>
     <!-- 支付 -->
     <Pay
       :is-show-pay="isShowPay"
       v-model:jfInfo="orderData"
       @closePay="closePay"
-      @successPay="closePay"
+      @successPay="closePay" />
-    />
   </view>
 </template>
 
 <style lang="scss">
-$h-border-radius: 50rpx;
+$h-border-radius: 50px;
 
 .cart {
   position: fixed;
-  bottom: 50rpx;
+  bottom: 50px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 9999;
   width: 95%;
-  background-color: red;
+  background-color: #262323;
   border-radius: $h-border-radius;
   color: #fff;
-  height: 100rpx;
+  height: 100px;
 
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   .container {
-    margin-left: 30rpx;
+    margin-left: 30px;
+
+    .cardImg {
+      position: relative;
+      image {
+        width: 60px;
+        height: 60px;
+      }
+      .count-text {
+        position: absolute;
+        top: -10px;
+        right: -10px;
+        background-image: url('http://p0.meituan.net/csc/80b0e11d4270d09324df0b802d4c479b986.png');
+        background-size: 100% 100%;
+        // padding: 0 8px;
+        width: 35px;
+        height: 35px;
+        text-align: center;
+        line-height: 35px;
+        text {
+          margin: auto;
+          font-size: 25px;
+        }
+      }
+    }
   }
 
   .payBtn {
-    width: 180rpx;
+    width: 200px;
-    height: 100rpx;
+    height: 100px;
-    line-height: 100rpx;
+    line-height: 100px;
     text-align: center;
-    background-color: #000;
+    background-color: #f83d3d;
     border-radius: 0 $h-border-radius $h-border-radius 0;
   }
 }
 
 .list-header {
-  margin: 15rpx 0;
+  margin: 15px 0;
 
   .left {
     display: flex;
@@ -286,37 +333,47 @@ $h-border-radius: 50rpx;
 }
 
 .cart-list {
-  height: 290rpx;
+  height: 290px;
 
   .item {
     display: flex;
     align-items: flex-end;
-    margin-bottom: 10rpx;
+    margin-bottom: 10px;
     justify-content: space-between;
 
     .left {
       display: flex;
+      justify-content: space-between;
 
       image {
-        width: 130rpx;
+        width: 130px;
-        height: 130rpx;
+        height: 130px;
-        border-radius: 10rpx;
+        border-radius: 15px;
-        margin-right: 10rpx;
+        margin-right: 10px;
       }
 
       .center {
-        height: 100%;
+        height: 130px;
         display: flex;
         flex-direction: column;
-
         justify-content: space-between;
 
         .price {
           color: red;
-          margin-top: 20rpx;
+          // margin-bottom: 0px;
         }
       }
     }
   }
 }
+
+.btn {
+  background-color: #ff0000;
+  color: #fff;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 65px;
+  width: 45px;
+  height: 45px;
+}
 </style>

src/components/MerList.vue

@@ -1,35 +1,92 @@
 <template>
-  <view class="goodBox">
+  <view class="list-box">
+    <view class="list">
+      <swiper
+        class="item"
+        :style="{
+          height: '250px',
+        }"
+        indicator-color="#EDEDED"
+        indicator-active-color="#F83D3D"
+        :circular="true"
+        :indicator-dots="true"
+        :autoplay="true">
+        <swiper-item v-for="(item, index) in bannerList" :key="index">
+          <image
+            :style="{
+              width: '100%',
+              height: '100%',
+            }"
+            :src="item.url"
+            @tap="toPage(item.jump)" />
+        </swiper-item>
+      </swiper>
       <view
-      class="good"
+        class="item"
-      v-for="item in merdata"
+        v-for="(item, index) in list1"
-      :key="item.ID"
+        :key="index"
-      @click.stop="toMerDetails(item)"
+        @click="toMerDetails(item)">
-    >
+        <image
-      <image :src="item.head_photo" />
+          :style="{
-      <view class="good-text-box">
+            height: '200px',
-        <text class="good-text">{{ item.name }}</text>
+          }"
-        <text style="color: #999"
+          :src="item.head_photo" />
+        <view class="text">
+          <view class="title">{{ item.name }}</view>
+          <view class="list_local">
+            <view class="icon iconfont icon-dizhi"></view>
+            <view class="desc"
               >距离我{{
                 calculateDistance(
                   userLocalNum.t,
                   userLocalNum.l,
                   Number(item.lat),
-              Number(item.lon)
+                  Number(item.lon),
                 )
               }}
-        </text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="list">
+      <view
+        class="item"
+        v-for="(item, index) in list2"
+        :key="index"
+        @click.stop="toMerDetails(item)">
+        <image
+          :style="{
+            height: '200px',
+          }"
+          :src="item.head_photo" />
+        <view class="text">
+          <view class="title">{{ item.name }}</view>
+          <view class="list_local">
+            <view class="icon iconfont icon-dizhi"></view>
+            <view class="desc"
+              >距离我{{
+                calculateDistance(
+                  userLocalNum.t,
+                  userLocalNum.l,
+                  Number(item.lat),
+                  Number(item.lon),
+                )
+              }}
+            </view>
+          </view>
+        </view>
       </view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import {ref} from 'vue';
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import { calculateDistance } from "@/utils";
+import {calculateDistance, parseQueryString} from '@/utils';
-import { bindParent } from "@/api/user";
+import {bindParent, getBanner} from '@/api/user';
-import { getMerList } from "@/api/goods";
+import {getMerList} from '@/api/goods';
 
 const props = defineProps({
   classId: {
@@ -38,22 +95,30 @@ const props = defineProps({
   },
 });
 
-Taro.useDidShow(async () => {
+const list1 = ref<Array<MerData>>([]);
+const list2 = ref<Array<MerData>>([]);
+
+Taro.useLoad(async () => {
+  Taro.showLoading({
+    title: '加载中',
+  });
   await get_mer_list();
-  if (Taro.getStorageSync("token") && Taro.getStorageSync("bind_id")) {
+  await get_banner_list();
+  if (Taro.getStorageSync('token') && Taro.getStorageSync('bind_id')) {
     try {
       const res = await bindParent({
-        uid: Taro.getStorageSync("bind_id"),
+        uid: Taro.getStorageSync('bind_id'),
       });
       Taro.showToast({
         title: res.msg,
       });
-      Taro.removeStorageSync("bind_id");
+      Taro.removeStorageSync('bind_id');
     } catch (error) {
-      Taro.removeStorageSync("bind_id");
+      Taro.removeStorageSync('bind_id');
       throw error;
     }
   }
+  Taro.hideLoading();
 });
 
 interface MerData {
@@ -71,79 +136,124 @@ const userLocalNum = ref({
   t: 0,
 });
 
+const pageVal = ref({
+  page: 1,
+  total: 0,
+});
+
 const get_mer_list = async () => {
   Taro.getLocation({
-    type: "wgs84",
+    type: 'wgs84',
-    success: (res) => {
+    success: res => {
       userLocalNum.value.l = res.longitude;
       userLocalNum.value.t = res.latitude;
     },
   });
 
   const res = await getMerList({
-    PageNum: 1,
+    PageNum: pageVal.value.page,
     PageSize: 10,
     class_id: props.classId,
   });
+  pageVal.value.total = res.data.total;
+
   merdata.value = res.data.data;
+  const middleIndex = Math.floor(merdata.value.length / 2);
+  const arr1 = merdata.value.slice(0, middleIndex);
+  const arr2 = merdata.value.slice(middleIndex);
+  list1.value.push(...arr1);
+  list2.value.push(...arr2);
+  merdata.value = [];
+};
+const bannerList = ref<any[]>([]);
+
+const get_banner_list = async () => {
+  const {data}: any = await getBanner();
+  bannerList.value = data.data;
 };
 
-const toMerDetails = (item: any) => {
+const toPage = async (url: string) => {
-  Taro.setStorageSync("mer_info", item);
+  console.log(url);
+  // url转对象
+  const obj = parseQueryString(url);
+  if (obj.type === '1') {
+    const {data: res} = await getMerList({});
+    const mer = res.data.filter(item => item.bid === obj.bid)[0];
+    Taro.setStorageSync('mer_info', mer);
+  }
+  Taro.navigateTo({
+    url,
+  });
+};
+
+const toMerDetails = item => {
+  Taro.setStorageSync('mer_info', item);
   Taro.navigateTo({
     url: `/pages/mer/mer_detail/index`,
   });
 };
+
+Taro.useReachBottom(() => {
+  const currTotal = list1.value.length + list2.value.length;
+  if (currTotal === pageVal.value.total) {
+    Taro.showToast({
+      title: '没有更多了',
+      icon: 'none',
+    });
+  } else {
+    pageVal.value.page += 1;
+    get_mer_list();
+  }
+});
 </script>
 
 <style lang="scss">
-.goodBox {
+.list-box {
+  padding: 10px;
   display: flex;
-  padding: 20px;
   flex-wrap: wrap;
   justify-content: space-between;
 
-  .good {
+  .list {
-    width: 340px;
+    overflow: scroll;
+
+    .item {
+      width: 350px;
+      margin-bottom: 10px;
+      border-radius: 20px;
       background-color: #fff;
-    margin-bottom: 20px;
-    border-radius: 10px;
 
       image {
         width: 100%;
-      height: 250px;
+        border-radius: 15px;
-      border-top-right-radius: 10px;
-      border-top-left-radius: 10px;
       }
 
-    .good-text-box {
+      .text {
-      padding: 10px;
+        padding: 15px;
 
-      .good-text {
+        .title {
-        flex-shrink: 0;
+          color: #333333;
           font-size: 28px;
-        color: #333;
-        font-weight: 400;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 1;
           overflow: hidden;
-        word-break: break-word;
+          text-overflow: ellipsis;
+          // white-space: nowrap;
         }
 
-      .good-price-box {
+        .list_local {
           display: flex;
-        justify-content: space-between;
           align-items: center;
-        margin-top: 10px;
+          justify-content: flex-start;
+          color: #808080;
+          margin-top: 8px;
 
-        .good-text-price {
+          .icon {
-          font-size: 28px;
+            display: inline-block;
-          font-weight: bold;
+            font-size: 30px;
-          color: #ff0000;
+          }
-          -webkit-box-orient: vertical;
+
-          -webkit-line-clamp: 1;
+          .desc {
-          overflow: hidden;
+            font-size: 25px;
+          }
         }
       }
     }

src/pages/admin/add_order/pending_order/wx_pay_code/index.scss

@@ -21,17 +21,18 @@ page {
 
   .box {
     margin: auto;
-    background-image: url("../../static/ewm.png");
+    background-image: url('../../static/ewm.png');
     background-size: 100% 100%;
     width: 608px;
     height: 457px;
     position: relative;
-    .qrcode {
+
+    .img {
       position: absolute;
       width: 280px;
       height: 280px;
-      top: 14%;
+      top: 66px;
-      right: 9%;
+      right: 55px;
     }
   }
 }

src/pages/admin/add_order/pending_order/wx_pay_code/index.vue

@@ -5,9 +5,7 @@
       <view class="desc">请在这里扫码</view>
     </view>
     <view class="box">
-      <!-- <image :src="`https://api.pwmqr.com/qrcode/create?url=${code}`"></image> -->
+      <image class="img" :src="dataUrl" />
-      <!-- <view ref="qrcode" id="qrcode"></view> -->
-      <canvas class="qrcode" canvas-id="qrcode" id="qrcode"></canvas>
     </view>
   </view>
 </template>
@@ -16,22 +14,22 @@
 import { onUnmounted, ref } from "vue";
 import Taro from "@tarojs/taro";
 import { getAfterOrder } from "@/api/admin";
-import UQRCode from "uqrcodejs";
 
 const time_id = ref();
 
+const dataUrl = ref("");
+
 const info = ref<any>({});
 
 Taro.useLoad((e) => {
   info.value = e;
-  getCode();
+  dataUrl.value = Taro.getStorageSync("pay_code");
   time_id.value = setInterval(async () => {
     const { data } = await getAfterOrder({
       bid: info.value.bid,
       oid: info.value.oid,
     });
     if (data.data.status !== 0 && data.data.status !== 2) {
-      clearInterval(time_id.value);
       Taro.showToast({
         title: "支付成功",
         icon: "success",
@@ -46,23 +44,14 @@ Taro.useLoad((e) => {
   }, 1000);
 });
 
-const getCode = () => {
-  var qr = new UQRCode();
-  qr.data = Taro.getStorageSync("pay_code");
-  qr.size = 160;
-  qr.margin = 5;
-  qr.make();
-  const canvasContext = Taro.createCanvasContext("qrcode");
-  qr.canvasContext = canvasContext;
-  qr.drawCanvas();
-};
-
 Taro.useDidHide(() => {
   clearInterval(time_id.value);
+  Taro.removeStorageSync("pay_code");
 });
 
 onUnmounted(() => {
   clearInterval(time_id.value);
+  Taro.removeStorageSync("pay_code");
 });
 </script>
 

src/pages/admin/order_manage/detail/index.vue

@@ -1,71 +1,77 @@
 <template>
   <view>
-    <view class="header">
+    <!--    订单信息    -->
-      <view>订单号:{{ info.oid }}</view>
-      <view>{{ info.add_time }}</view>
-    </view>
-    <view class="card">
-      <view class="center" v-for="(itm, idx) in info.OrderGoods" :key="idx">
-        <view class="top">
-          <image :src="itm.Goods.cover" />
-          <view class="title">{{ itm.Goods.name }} </view>
-          <view class="right">
-            <view v-if="info.pay_type === 1">{{ itm.pay_price }}元</view>
-            <view v-else>{{ itm.pay_integral }}积分</view>
-            <view>x{{ itm.number }}</view>
-          </view>
-        </view>
-      </view>
-      <view class="line"></view>
-      <view class="bom" style="text-align: right">
-        共{{ info.count }}件商品,支付方式:{{
-          info.pay_type === 1 ? "微信" : "积分"
-        }},实付:
-        <text style="color: red">{{
-          info.pay_type === 1 ? `${info.price}元` : `${info.exchange}积分`
-        }}</text>
-      </view>
-    </view>
-
     <nut-cell-group>
-      <nut-cell title="订单状态:" :desc="orderStatus"></nut-cell>
+      <nut-cell>
+        <template #default>
+          <view class="center-box">
+            <view
+              class="top"
+              v-for="(item, index) in info.OrderGoods"
+              :key="index">
+              <image class="mr-10" :src="item.Goods?.cover" />
+              <view class="flex-1">
+                <view class="title">{{ item.Goods?.name }}</view>
+                <view class="text-[#F83D3D] mt-5">
+                  <view>{{ item.pay_price }}元</view>
+                  <view>{{ item.pay_integral }}积分</view>
+                </view>
+              </view>
+              <view class="right">
+                <view>x{{ item.number }}</view>
+              </view>
+            </view>
+            <view
+              class="flex justify-between items-center mt-2 mb-2 text-[25px]">
+              <view class="text-[#9C9C9C]">{{ `共${info.count}件商品` }}</view>
+              <view
+                >{{ info.status !== 0 ? '实' : '应' }}付款{{
+                  info.pay_type === 1 ? '(元): ' : '(积分): '
+                }}{{ info.pay_type === 1 ? info.price : info.exchange }}</view
+              >
+            </view>
+          </view>
+        </template>
+      </nut-cell>
+    </nut-cell-group>
+    <nut-cell-group>
+      <nut-cell title="订单号:" :desc="info.oid"></nut-cell>
+      <nut-cell
+        title="订单状态:"
+        :desc="
+          info.status === 0
+            ? '待付款'
+            : info.status === 1
+            ? '待使用'
+            : info.status === 2
+            ? '已使用'
+            : '已失效'
+        ">
+      </nut-cell>
       <nut-cell title="下单用户:" :desc="info.User?.nickName"></nut-cell>
       <nut-cell title="用户手机号:" :desc="info.User?.phone"></nut-cell>
+      <nut-cell title="下单时间:" :desc="info.add_time"></nut-cell>
       <nut-cell title="核销时间:" :desc="info.User?.phone"></nut-cell>
       <nut-cell
         v-if="info.status === 2"
         title="核销人员:"
-        :desc="info.CancelUser?.nickName"
+        :desc="info.CancelUser?.nickName"></nut-cell>
-      ></nut-cell>
       <nut-cell
         v-if="info.status === 2"
         title="核销人手机号:"
-        :desc="info.CancelUser?.phone"
+        :desc="info.CancelUser?.phone"></nut-cell>
-      ></nut-cell>
     </nut-cell-group>
   </view>
 </template>
 
 <script setup lang="ts">
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import { computed, ref } from "vue";
+import {ref} from 'vue';
 
 const info = ref<any>({});
 
 Taro.useLoad(() => {
-  info.value = Taro.getStorageSync("ver_order_info");
+  info.value = Taro.getStorageSync('ver_order_info');
-  console.log(info.value);
-});
-
-const orderStatus = computed(() => {
-  switch (info.value.status) {
-    case 1:
-      return "待核销";
-    case 2:
-      return "已核销";
-    case 3:
-      return "已失效";
-  }
 });
 </script>
 
@@ -148,6 +154,7 @@ page {
     display: flex;
     justify-content: space-between;
     // align-items: flex-start;
+    margin-bottom: 10px;
 
     image {
       width: 150px;
@@ -172,4 +179,41 @@ page {
     }
   }
 }
+
+.center-box {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .top {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10rpx;
+
+    image {
+      width: 150px;
+      height: 150px;
+      border-radius: 10rpx;
+      margin-right: 10px;
+    }
+
+    .title {
+      margin-left: 10px;
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+      width: 350px;
+    }
+
+    .right {
+      margin-left: 10px;
+      font-size: 28px;
+      text-align: right;
+    }
+  }
+}
 </style>

src/pages/admin/order_manage/list/index.scss

@@ -1,29 +1,94 @@
 .tabs-1 {
   display: flex;
   box-sizing: border-box;
-  justify-content: space-between;
+  justify-content: space-evenly;
   align-items: center;
   background-color: #fff;
-  padding: 10px;
+  // padding: 10px;
-  overflow-x: scroll;
   .item {
     display: flex;
     flex-direction: column;
     align-items: center;
     .line {
-      margin-top: 10px auto;
+      margin: 10px auto;
       width: 50px;
-      height: 5px;
+      height: 8px;
+      border-radius: 15px;
     }
   }
 }
 
+// .order-card {
+//   width: 95%;
+//   box-sizing: border-box;
+//   margin: 15px auto;
+//   background-color: #fff;
+//   border-radius: 10px;
+//   padding: 20px;
+
+//   .line {
+//     width: 100%;
+//     height: 1px;
+//     background-color: #f5f5f5;
+//     margin: 10px;
+//   }
+
+//   .top {
+//     // display: flex;
+//     // justify-content: space-between;
+//     // align-items: center;
+
+//     .name {
+//       font-weight: bold;
+//     }
+
+//     .sub {
+//       color: #999;
+//       font-size: 30px;
+//     }
+//   }
+
+//   .btn {
+//     display: flex;
+//     justify-content: flex-end;
+//     align-items: center;
+//   }
+
+//   .center {
+//     .top {
+//       display: flex;
+//       justify-content: space-between;
+//       // align-items: flex-start;
+
+//       image {
+//         width: 150px;
+//         height: 150px;
+//         border-radius: 10px;
+//       }
+
+//       .title {
+//         margin-left: 10px;
+//         display: -webkit-box;
+//         overflow: hidden;
+//         -webkit-line-clamp: 2;
+//         -webkit-box-orient: vertical;
+//         text-overflow: ellipsis;
+//         width: 350px;
+//       }
+
+//       .right {
+//         margin-left: 10px;
+//         font-size: 28px;
+//         text-align: right;
+//       }
+//     }
+//   }
+// }
+
 .order-card {
-  width: 95%;
   box-sizing: border-box;
   margin: 15px auto;
   background-color: #fff;
-  border-radius: 10px;
   padding: 20px;
 
   .line {
@@ -34,18 +99,9 @@
   }
 
   .top {
-    // display: flex;
+    display: flex;
-    // justify-content: space-between;
+    justify-content: space-between;
-    // align-items: center;
+    align-items: center;
-
-    .name {
-      font-weight: bold;
-    }
-
-    .sub {
-      color: #999;
-      font-size: 30px;
-    }
   }
 
   .btn {
@@ -55,19 +111,20 @@
   }
 
   .center {
+    // margin-bottom: 10px;
     .top {
       display: flex;
-      justify-content: space-between;
+      // justify-content: space-between;
-      // align-items: flex-start;
+      align-items: flex-start;
 
       image {
         width: 150px;
         height: 150px;
-        border-radius: 10px;
+        border-radius: 15px;
+        margin-right: 10px;
       }
 
       .title {
-        margin-left: 10px;
         display: -webkit-box;
         overflow: hidden;
         -webkit-line-clamp: 2;
@@ -80,6 +137,7 @@
         margin-left: 10px;
         font-size: 28px;
         text-align: right;
+        color: #9c9c9c;
       }
     }
   }

src/pages/admin/order_manage/list/index.vue

@@ -5,15 +5,18 @@
         class="item"
         v-for="(item, index) in opt"
         :key="index"
-        @click="tabChange(item.value)"
+        @click="tabChange(item.value)">
+        <view
+          :style="{
+            color: item.value === tabVal ? '#333333' : '#9C9C9C',
+          }"
+          >{{ item.text }}</view
         >
-        <view>{{ item.text }}</view>
         <view
           class="line"
           :style="{
-            backgroundColor: item.value === tabVal ? 'red' : '',
+            backgroundColor: item.value === tabVal ? '#FFD940' : '',
-          }"
+          }"></view>
-        ></view>
       </view>
     </view>
     <view v-if="dataList.length > 0">
@@ -21,73 +24,87 @@
         class="order-card"
         v-for="(item, index) in dataList"
         :key="index"
-        @click="toDetailPage(item)"
+        @click="toDetailPage(item)">
-      >
         <view class="top">
-          <view class="name">订单号:{{ item.oid }}</view>
+          <view class="text-[#9C9C9C] text-[25px]">订单号：{{ item.oid }}</view>
-          <!-- <view class="sub">下单时间：{{ item.add_time }}</view> -->
+          <view
-          <view class="sub" v-if="item.status !== 3">核销时间：{{ item.cancel_time || "待核销" }}</view>
+            :style="{
-          <!-- <view style="color: red">{{
+              color:
                 item.status === 0
-                            ? "待付款"
+                  ? '#FF850A'
                   : item.status === 1
-                            ? "待使用"
+                  ? '#F83D3D'
                   : item.status === 2
-                            ? "已使用"
+                  ? '#333333'
-                            : "已失效"
+                  : '#9C9C9C',
-                    }}</view> -->
+            }"
+            >{{
+              item.status === 0
+                ? '待付款'
+                : item.status === 1
+                ? '待使用'
+                : item.status === 2
+                ? '已使用'
+                : '已失效'
+            }}
+          </view>
         </view>
         <view class="line"></view>
         <view class="center" v-for="(itm, idx) in item.OrderGoods" :key="idx">
           <view class="top">
-            <image :src="itm.Goods.cover" />
+            <image class="mr-10" :src="itm.Goods.cover" />
-            <view class="title">{{ itm.Goods.name }} </view>
+            <view class="flex-1">
+              <view class="title">{{ itm.Goods?.name }}</view>
+              <view class="text-[#F83D3D] mt-5">
+                <view>{{ itm.pay_price }}元</view>
+                <view>{{ itm.pay_integral }}积分</view>
+              </view>
+            </view>
             <view class="right">
-              <view v-if="item.pay_type === 1">{{ itm.pay_price }}元</view>
-              <view v-else>{{ itm.pay_integral }}积分</view>
               <view>x{{ itm.number }}</view>
             </view>
           </view>
         </view>
-        <view class="line"></view>
+        <view
-        <view class="bom" style="text-align: right">
+          class="flex justify-between items-center mt-2 mb-2 text-[25px]"
-          共{{ item.count }}件商品,支付方式:{{
+          v-if="item.status !== 0">
-            item.pay_type === 1 ? "微信" : "积分"
+          <text class="text-[#9C9C9C]">共{{ item.count }}件商品</text>
-          }},实付:
+          <view
-          <text style="color: red">{{
+            >{{ item.status !== 0 ? '实' : '应' }}付款{{
-            item.pay_type === 1 ? `${item.price}元` : `${item.exchange}积分`
+              item.pay_type === 1 ? '(元): ' : '(积分): '
-          }}</text>
+            }}{{ item.pay_type === 1 ? item.price : item.exchange }}</view
+          >
         </view>
       </view>
     </view>
-    <nut-empty v-else description="暂无订单数据"></nut-empty>
+    <nut-empty v-else description="暂无订单"></nut-empty>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import {ref} from 'vue';
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import { getActiveOrderList } from "../../../../api/admin";
+import {getActiveOrderList} from '../../../../api/admin';
 
 const opt = ref([
   {
-    text: "全部",
+    text: '全部',
     value: 0,
   },
   {
-    text: "待付款",
+    text: '待付款',
     value: 1,
   },
   {
-    text: "待核销",
+    text: '待核销',
     value: 2,
   },
   {
-    text: "已核销",
+    text: '已核销',
     value: 3,
   },
   {
-    text: "已失效",
+    text: '已失效',
     value: 4,
   },
 ]);
@@ -96,42 +113,63 @@ const tabVal = ref(0);
 
 const dataList = ref<any>([]);
 
-Taro.useLoad((options) => {
+const pageOpt = ref({
+  page: 1,
+  total: 0,
+});
+
+Taro.useLoad(options => {
   tabVal.value = Number(options.type);
   getData();
 });
 
 const getData = async () => {
+  Taro.showLoading({
+    title: '加载中',
+  });
   try {
-    const user_info = Taro.getStorageSync("userInfo");
+    const user_info = Taro.getStorageSync('userInfo');
     const data = {
       bid: user_info.data.bid,
       status: tabVal.value,
+      PageNum: pageOpt.value.page,
+      PageSize: 10,
     };
     const res = await getActiveOrderList(data);
-    dataList.value = res.data.data;
+    dataList.value.push(...res.data.data);
+    pageOpt.value.total = res.data.total || 0;
   } catch (error) {
     Taro.showToast({
       title: error.msg,
-      icon: "none",
+      icon: 'none',
     });
   }
+  Taro.hideLoading();
 };
 
 const tabChange = (e: number) => {
-  console.log(e);
   tabVal.value = e;
   getData();
 };
 
 const toDetailPage = (item: any) => {
-  Taro.setStorageSync("ver_order_info", item);
+  Taro.setStorageSync('ver_order_info', item);
   Taro.navigateTo({
-    url: "/pages/admin/order_manage/detail/index",
+    url: '/pages/admin/order_manage/detail/index',
   });
 };
+
+Taro.useReachBottom(() => {
+  if (pageOpt.value.total === dataList.value.length)
+    return Taro.showToast({
+      title: '没有更多数据了',
+      icon: 'none',
+    });
+  pageOpt.value.page++;
+  getData();
+});
 </script>
 
 <style lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>

src/pages/admin/statistics/index.vue

@@ -106,6 +106,7 @@
     <nut-calendar
       v-model:visible="isVisible"
       type="range"
+      :default-value="pickerVal"
       :start-date="date_start"
       @close="isVisible = false"
       @choose="setChooseValue"
@@ -193,11 +194,17 @@ const opts = ref<any>({
   ],
 });
 
+const pickerVal = ref<any>([])
+
 Taro.useLoad((options) => {
   where.value.type = options.type === "price" ? 1 : 2;
   time.value = options.time;
   setTime(options.time);
   // getData();
+  pickerVal.value = [
+    dayjs().format('YYYY-MM-DD'),
+    dayjs().format('YYYY-MM-DD'),
+  ];
 });
 
 const setTime = (type: string) => {

src/pages/admin/verify/index.vue

@@ -1,13 +1,17 @@
 <template>
   <view>
     <view class="card">
-      <nut-button block type="primary" @click="scanCode">扫码核销</nut-button>
+      <image
+        class="image"
+        @tap="scanCode"
+        src="http://p1.meituan.net/csc/696924dda634f05689dabdfbb18e88cc13551.png" />
+      <view class="mt-2 text-[#7A7A7A]">扫描二维码核销</view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
 
 // url参数转对象
 // const urlParse = (url: string) => {
@@ -28,8 +32,8 @@ import Taro from "@tarojs/taro";
 const scanCode = () => {
   Taro.scanCode({
     onlyFromCamera: true,
-    scanType: ["qrCode"],
+    scanType: ['qrCode'],
-    success: async (res) => {
+    success: async res => {
       try {
         Taro.navigateTo({
           url: `/pages/admin/verify/verify_list/index?oid=${res.result}`,
@@ -37,7 +41,7 @@ const scanCode = () => {
       } catch (error) {
         Taro.showToast({
           title: error.msg,
-          icon: "none",
+          icon: 'none',
         });
       }
     },
@@ -48,9 +52,9 @@ const scanCode = () => {
 <style lang="scss">
 page {
   background-color: #f5f5f5;
-  background-image: url("~@/static/admin/cancellation-header.png");
+  background-image: url('http://p0.meituan.net/csc/e6ff5582788af2023f49241afe22fc89391851.png');
   background-repeat: no-repeat;
-  background-size: 100% 30%;
+  background-size: 100% 25%;
 }
 
 .card {
@@ -59,10 +63,16 @@ page {
   box-sizing: border-box;
   background-color: #fff;
   margin: 300px auto;
-  border-radius: 10px;
+  border-radius: 33px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 0 100px;
+
+  .image {
+    width: 150px;
+    height: 150px;
+  }
 }
 </style>

src/pages/admin/verify/verify_list/index.scss

@@ -0,0 +1,38 @@
+.card {
+  padding: 20rpx;
+  background-color: #fff;
+  margin: 20px auto;
+
+  .container {
+    display: flex;
+    justify-content: space-between;
+
+    .image {
+      width: 150px;
+      height: 150px;
+      border-radius: 15px;
+      margin-right: 20px;
+    }
+
+    .info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
+    .title {
+      margin-bottom: 10px;
+    }
+  }
+
+  .line {
+    width: 100%;
+    height: 1px;
+    background-color: #f5f5f5;
+    margin: 10px 0;
+  }
+}
+.nut-button {
+  border-radius: 20px;
+}

src/pages/admin/verify/verify_list/index.vue

@@ -1,49 +1,71 @@
 <template>
   <view>
     <view class="card">
-      <view>订单号：{{ goodInfo.oid }}</view>
+      <view class="text-[#7A7A7A]">订单号：{{ goodInfo.oid }}</view>
       <view class="line"></view>
       <view
         class="container"
         v-for="(item, index) in goodInfo.OrderGoods"
-        :key="index"
+        :key="index">
-      >
+        <image class="image" :src="item.Goods.cover"></image>
-        <image class="image" :src="item.Goods.cover" mode="widthFix"></image>
         <view class="info">
-          <view class="title">商品名称：{{ item.Goods.name }}</view>
+          <view class="title">{{ item.Goods.name }}</view>
-          <view class="title">描述：{{ item.Goods.profile }}</view>
+          <view class="text-[#7A7A7A] text-[22px]">{{
-          <view class="num"
+            item.Goods.profile || '此商品暂无描述'
-            >数量: <text style="color: red">{{ item.number }}</text></view
+          }}</view>
-          >
         </view>
-        <view></view>
+        <view class="text-[#9C9C9C]">x{{ item.number }}</view>
       </view>
       <view class="line"></view>
-      <text>支付方式：{{ goodInfo.pay_type === 1 ? "微信" : "积分" }}</text
+      <view
-      >，
+        class="flex justify-between items-center mt-3 mb-2 text-[25px]"
-      <text
+        style="text-align: right">
-        >总计：{{
+        <text class="text-[#9C9C9C] text-left"
+          >共{{ goodInfo.count }}件商品</text
+        >
+        <text class="flex-1"
+          >{{ goodInfo.status !== 0 ? '实' : '应' }}付款{{
+            goodInfo.pay_type === 1 ? '(元): ' : '(积分): '
+          }}{{
             goodInfo.pay_type === 1 ? goodInfo.price : goodInfo.exchange
           }}</text
         >
-      <view class="line"></view>
+      </view>
-      <view class="cz">
+      <!-- <view class="line"></view> -->
+      <!-- <view class="cz">
         <nut-button size="small" type="primary" @click="subVerify"
           >确定核销</nut-button
         >
+      </view> -->
     </view>
+    <nut-cell-group>
+      <nut-cell title="订单信息"></nut-cell>
+      <nut-cell
+        title="下单时间:"
+        :desc="goodInfo.add_time?.slice(0, 19)"></nut-cell>
+      <nut-cell title="下单号码:" :desc="goodInfo.User?.phone"></nut-cell>
+      <nut-cell title="下单用户:" :desc="goodInfo.User?.nickName"></nut-cell>
+      <nut-cell
+        title="付款方式:"
+        :desc="getPayType(goodInfo.pay_type)"></nut-cell>
+    </nut-cell-group>
+
+    <view class="w-[90%] mt-[40px] m-auto">
+      <nut-button type="primary" shape="square" block @click="subVerify"
+        >确定核销</nut-button
+      >
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import { getActiveVerifyList, activeOrderVerify } from "@/api/admin";
+import {getActiveVerifyList, activeOrderVerify} from '@/api/admin';
-import { ref } from "vue";
+import {ref} from 'vue';
 
 const opt = ref<any>({});
 
-Taro.useLoad((options) => {
+Taro.useLoad(options => {
   opt.value = options;
   getData(options);
 });
@@ -51,15 +73,15 @@ Taro.useLoad((options) => {
 const goodInfo = ref<any>({});
 
 const getData = async (options: any) => {
-  const merInfo = Taro.getStorageSync("mer_info");
+  const merInfo = Taro.getStorageSync('mer_info');
   const res = await getActiveVerifyList({
     oid: options.oid,
     bid: merInfo.bid,
   });
   if (!res.data.data.oid) {
     Taro.showToast({
-      title: "没有此订单",
+      title: '没有此订单',
-      icon: "none",
+      icon: 'none',
     });
     setTimeout(() => {
       Taro.navigateBack({
@@ -78,7 +100,7 @@ const subVerify = async () => {
     });
     Taro.showToast({
       title: res.msg,
-      icon: "none",
+      icon: 'none',
     });
     setTimeout(() => {
       Taro.navigateBack({
@@ -88,49 +110,26 @@ const subVerify = async () => {
   } catch (error) {
     Taro.showToast({
       title: error.msg,
-      icon: "none",
+      icon: 'none',
     });
     throw error;
   }
 };
+
+const getPayType = (type: number) => {
+  switch (type) {
+    case 1:
+      return '微信线上支付';
+    case 2:
+      return '平台积分支付';
+    case 3:
+      return '天才小猪支付';
+    default:
+      return '未知';
+  }
+};
 </script>
 
 <style lang="scss">
-.card {
+@import './index.scss';
-  padding: 20rpx;
-  background-color: #fff;
-  margin: 10px auto;
-  width: 90%;
-  border-radius: 7px;
-
-  .container {
-    display: flex;
-
-    image {
-      width: 150px;
-      height: 150px;
-      border-radius: 7px;
-      display: block;
-    }
-
-    .info {
-      margin-left: 20px;
-    }
-
-    .title {
-      margin-bottom: 10px;
-    }
-  }
-
-  .line {
-    width: 100%;
-    height: 1px;
-    background-color: #f5f5f5;
-    margin: 10px 0;
-  }
-
-  .cz {
-    text-align: right;
-  }
-}
 </style>

src/pages/admin/withdrawal/index.config.ts

@@ -1,3 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: "收益提现",
+  navigationBarTitleText: '收益提现',
+  enablePullDownRefresh: true,
 });

src/pages/admin/withdrawal/index.scss

@@ -0,0 +1,125 @@
+.text-red {
+  color: red;
+}
+
+.data {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #fff;
+  padding: 10px;
+
+  .pagination {
+    margin: 10px auto;
+  }
+}
+
+.tag {
+  width: 100%;
+  padding: 5px 8px;
+  color: white;
+  border-radius: 8px;
+  margin: 0 auto;
+}
+
+.success {
+  color: #4fc08d;
+}
+
+.danger {
+  color: #df3526;
+}
+
+.warning {
+  color: #f3812e;
+}
+
+.image {
+  width: 50px;
+  height: 50px;
+}
+
+.card {
+  margin: 20px auto;
+  background-image: url('http://p0.meituan.net/csc/902ecf4ba9765a8200817d58a3a5a655172781.png');
+  background-size: 100% 100%;
+  width: 95%;
+  height: 250px;
+  border-radius: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .container {
+    color: #fff;
+    padding: 45px 100px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+
+    .line {
+      width: 1px;
+      height: 50px;
+      background-color: #ff9c9c;
+    }
+  }
+
+  .footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #8a1717;
+    border-bottom-left-radius: 15px;
+    border-bottom-right-radius: 15px;
+    background-color: rgba(255, 255, 255, 0.2);
+    padding: 10px 30px;
+    height: 150px;
+  }
+}
+
+.formCard {
+  width: 95%;
+  margin: auto;
+  border-radius: 20px;
+  background-color: #fff;
+  padding: 20px;
+
+  --nut-cell-box-shadow: none;
+  --nut-cell-padding: 10px 5px;
+}
+
+.nut-button {
+  border-radius: 20px;
+  border: none;
+}
+
+.title {
+  margin: 20px;
+  display: flex;
+  align-items: center;
+
+  .title-line {
+    width: 8px;
+    height: 35px;
+    background-color: #df3526;
+    border-radius: 20px;
+    margin-right: 10px;
+  }
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #333333;
+
+  .item {
+    width: 95%;
+    background-color: #fff;
+    margin-bottom: 10px;
+    border-radius: 15px;
+    padding: 25px;
+  }
+}

src/pages/admin/withdrawal/index.vue

@@ -1,100 +1,40 @@
 <script lang="ts" setup>
-import { ref, h } from "vue";
+import {ref, h} from 'vue';
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import { getWithdrawList, addWithdraw } from "@/api/admin";
+import {getWithdrawList, addWithdraw} from '@/api/admin';
 
-const user_info = Taro.getStorageSync("userInfo");
+const user_info = ref<any>({});
+
+const mer_info = ref<any>({});
 
 const row = ref(0);
 
+const formRef = ref();
+
 const basicData = ref({
-  num: "",
+  num: '',
 });
 
 const showPreview = ref(false);
 
+const visible1 = ref(false);
+
 const imgData = ref([
   {
-    src: "",
+    src: '',
   },
 ]);
 
-const columns = ref([
+const data = ref<any>([]);
-  {
-    title: "时间",
-    key: "add_time",
-    align: "center",
-  },
-  {
-    title: "提现金额",
-    key: "integral",
-    align: "center",
-    render: (row: { integral: number }) => {
-      return h("view", {}, row.integral);
-    },
-  },
-  {
-    title: "审核状态",
-    key: "status",
-    align: "center",
-    render: (row: { status: number }) => {
-      return h(
-        "view",
-        {
-          class: `tag ${
-            row.status === 1
-              ? "success"
-              : row.status === 2
-              ? "danger"
-              : "warning"
-          }`,
-        },
-        {
-          default: () =>
-            row.status === 1
-              ? "已打款"
-              : row.status === 2
-              ? "已拒绝"
-              : "待审核",
-        }
-      );
-    },
-  },
-  {
-    title: "备注",
-    key: "img",
-    align: "center",
-    render: (row: { status_img: string }) => {
-      return h("img", {
-        class: "image",
-        onClick: () => {
-          imgData.value[0].src = row.status_img;
-          showPreview.value = true;
-        },
-        src: row.status_img,
-      });
-    },
-  },
-]);
-
-const data = ref([]);
 
 const pagination = ref({
   page: 1,
-  itemsPerPage: 5,
+  total: 0,
-  showPageSize: 5,
-  totalItems: 0,
-  change: (page: number) => {
-    pagination.value.page = page;
-    getData();
-  },
 });
 
-const hideFn = () => {
-  showPreview.value = false;
-};
-
 Taro.useLoad(() => {
+  user_info.value = Taro.getStorageSync('userInfo');
+  mer_info.value = Taro.getStorageSync('mer_info');
   getData();
 });
 
@@ -102,11 +42,11 @@ const getData = async () => {
   try {
     const res = await getWithdrawList({
       PageNum: pagination.value.page,
-      PageSize: pagination.value.showPageSize,
+      PageSize: 10,
-      Bid: user_info.data.bid,
+      Bid: user_info.value.data.bid,
     });
-    data.value = res.data.data || [];
+    data.value.push(...res.data.data);
-    pagination.value.totalItems = res.data.total;
+    pagination.value.total = res.data.total;
     row.value = res.data.integral || 0;
   } catch (e) {
     throw e;
@@ -115,111 +55,220 @@ const getData = async () => {
 
 const add = async () => {
   try {
-    if (Number(basicData.value.num) === 0)
+    formRef.value?.validate().then(async ({valid}) => {
-      return Taro.showToast({
+      if (valid) {
-        title: "提现积分需大于0",
-        icon: "none",
-      });
         const res = await addWithdraw({
-      Bid: user_info.data.bid,
+          Bid: user_info.value.data.bid,
           Number: Number(basicData.value.num),
         });
         Taro.showToast({
           title: res.msg,
-      icon: "none",
+          icon: 'none',
         });
+        basicData.value.num = '';
         await getData();
+      }
+    });
   } catch (e) {
     throw e;
   }
 };
+
+const rules = ref({
+  num: [
+    {
+      message: '请填写提现积分',
+      validator: (value, _) => {
+        console.log(value);
+        if (!value) {
+          return false;
+        } else {
+          return true;
+        }
+      },
+    },
+    {
+      message: '提现积分最低为100',
+      validator: (value, _) => {
+        if (Number(value) < 100) {
+          return false;
+        } else {
+          return true;
+        }
+      },
+    },
+    {
+      message: '提现积分不能大于可提现积分',
+      validator: (value, _) => {
+        if (Number(value) > row.value) {
+          return false;
+        } else {
+          return true;
+        }
+      },
+    },
+  ],
+});
+
+const openPreview = item => {
+  imgData.value[0].src = item.status_img;
+  showPreview.value = true;
+};
+
+const closePreview = () => {
+  showPreview.value = false;
+  imgData.value[0].src = '';
+};
+
+Taro.usePullDownRefresh(() => {
+  pagination.value.page = 1;
+  getData();
+  Taro.stopPullDownRefresh();
+});
+
+Taro.useReachBottom(() => {
+  if (pagination.value.total === data.value.length)
+    return Taro.showToast({
+      title: '没有更多数据了',
+      icon: 'none',
+    });
+  pagination.value.page++;
+  getData();
+});
 </script>
 
 <template>
   <view>
-    <nut-form>
+    <view class="card">
-      <nut-form-item label="提现积分：">
+      <view class="container">
+        <view class="">
+          <view class="font-bold text-[35px]">{{ row }}</view>
+          <view class="text-[25px] mt-2">可提现积分</view>
+        </view>
+        <view class="line"></view>
+        <view class="">
+          <view class="font-bold text-[35px]">{{
+            (row / 100 - (row / 100) * 0.138).toFixed(2)
+          }}</view>
+          <view class="text-[25px] mt-2">实际到账</view>
+        </view>
+      </view>
+      <view class="footer">
+        <text>到账方式</text>
+        <!-- <text>{{
+          `${mer_info.bank}(${mer_info.bank_card?.substring(
+            mer_info.bank_card.length - 4,
+          )})`
+        }}</text> -->
+        <text>银行卡汇款</text>
+      </view>
+    </view>
+    <view class="formCard">
+      <view class="flex justify-between">
+        <text>积分提现</text>
+        <view class="flex items-center" @click="visible1 = true">
+          <image
+            class="w-[25px] h-[25px]"
+            src="http://p1.meituan.net/csc/5437a800f4ed4a49f14984494c1c3077994.png"></image>
+          <view class="text-[#EC4443] text-[20px] ml-1">提现疑问</view>
+        </view>
+      </view>
+      <nut-form ref="formRef" :model-value="basicData" :rules="rules">
+        <nut-form-item prop="num">
           <nut-input
             v-model="basicData.num"
             class="nut-input-text"
             placeholder="请输入提现积分"
-          type="text"
+            type="text">
-        />
+            <template #right>
-      </nut-form-item>
+              <text
-      <nut-form-item>
+                class="text-[#EC4443] text-[25px]"
-        <view>
+                @tap="basicData.num = row.toString()"
-          当前可提现积分：
+                >全部</text
-          <text class="text-red">{{ row }}</text>
+              >
-        </view>
+            </template>
-        <view style="margin-top: 10px">
+          </nut-input>
-          实际到账：
-          <text class="text-red">{{ (row / 100).toFixed(2) }}</text>
-          元
-        </view>
-      </nut-form-item>
-      <nut-form-item>
-        <nut-button block type="primary" @click="add">立即提现</nut-button>
         </nut-form-item>
       </nut-form>
-    <view v-if="data.length > 0">
+      <nut-button block type="primary" @click="add">立即提现</nut-button>
-      <view class="data">
+    </view>
-        <nut-table :columns="columns" :data="data"></nut-table>
+
-        <nut-pagination
+    <view class="title">
-          class="pagination"
+      <view class="title-line"></view>
-          v-model="pagination.page"
+      <view class="title-text">提现记录</view>
-          :total-items="pagination.totalItems"
+    </view>
-          :items-per-page="pagination.itemsPerPage"
+
-          :show-page-size="pagination.showPageSize"
+    <view class="list" v-if="data.length > 0">
-          @change="pagination.change"
+      <view class="item" v-for="(item, index) in data" :key="index">
-          :bordered="false"
+        <view class="flex justify-between items-center">
-        />
+          <view class="text-[25px] text-[#9C9C9C]">到账金额</view>
+          <view
+            class="text-[27px]"
+            :class="
+              item.status === 1
+                ? 'success'
+                : item.status === 1
+                ? 'danger'
+                : 'warning'
+            "
+            >{{
+              item.status === 1
+                ? '已打款'
+                : item.status === 2
+                ? '已拒绝'
+                : '待审核'
+            }}</view
+          >
+        </view>
+        <view>
+          <view class="mt-3 mb-3 text-[35px]">￥{{ item.number }}</view>
+          <view class="text-[25px] mb-1">提现积分：{{ item.integral }}</view>
+          <view class="text-[25px] mb-1"
+            >信息服务费：{{ item.commission }}</view
+          >
+          <view class="text-[25px] mb-1"
+            >手续费：{{ item.commission_number }}%</view
+          >
+          <view class="text-[25px] mb-1">时间：{{ item.add_time }}</view>
+          <view v-if="item.status === 2" class="text-[25px] text-[#9C9C9C]"
+            >备注：</view
+          >
+          <view
+            v-if="item.status === 1"
+            class="text-[23px] mt-2 text-[#df3526]"
+            @click="openPreview(item)"
+            >点我查看回执单</view
+          >
+        </view>
       </view>
     </view>
     <nut-empty v-else description="暂无提现记录"></nut-empty>
     <!--    图片预览    -->
-    <nut-image-preview :show="showPreview" :images="imgData" @close="hideFn" />
+    <nut-image-preview
+      :show="showPreview"
+      :images="imgData"
+      @close="closePreview" />
+
+    <nut-dialog
+      title="提现疑问？"
+      content="这是基础弹框。"
+      ok-text="我已知晓"
+      :no-cancel-btn="true"
+      v-model:visible="visible1">
+      <template #default>
+        <text>
+          积分和人民币兑换比例为
+          <text class="text-[#F83D3D]">100:1</text>
+          平台收取<text class="text-[#F83D3D]">10%服务费</text>和<text
+            class="text-[#F83D3D]"
+            >0.038%手续费</text
+          >
+        </text>
+      </template>
+    </nut-dialog>
   </view>
 </template>
 
 <style lang="scss">
-.text-red {
+@import './index.scss';
-  color: red;
-}
-
-.data {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  background-color: #fff;
-  padding: 10px;
-
-  .pagination {
-    margin: 10px auto;
-  }
-}
-
-.tag {
-  width: 100%;
-  padding: 5px 8px;
-  color: white;
-  border-radius: 8px;
-  margin: 0 auto;
-}
-
-.success {
-  background-color: #4fc08d;
-}
-
-.danger {
-  background-color: #df3526;
-}
-
-.warning {
-  background-color: #f3812e;
-}
-
-.image {
-  width: 50px;
-  height: 50px;
-}
 </style>

src/pages/game/gamehome/index.config.ts

@@ -1,3 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: "活动游戏",
+  navigationBarTitleText: '',
 });

src/pages/game/gamehome/index.vue

@@ -5,14 +5,26 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import {ref} from 'vue';
-import { useLoad, getStorageSync } from "@tarojs/taro";
+import Taro from '@tarojs/taro';
 
-const url = ref("");
+const url = ref('');
 
-useLoad(() => {
+Taro.useDidShow(() => {
-  // const user = getStorageSync("userInfo");
+  const token = Taro.getStorageSync('token');
-  url.value = `${process.env.TARO_APP_GAME}${getStorageSync("token")}`;
+  if (token) {
+    url.value = `${process.env.TARO_APP_GAME}${Taro.getStorageSync('token')}`;
+  } else {
+    Taro.showToast({
+      title: '请先登录,再尝试进入游戏大厅。',
+      icon: 'none',
+    });
+    setTimeout(() => {
+      Taro.switchTab({
+        url: '/pages/index/index',
+      });
+    }, 1000);
+  }
 });
 </script>
 

src/pages/goods/goods_detail/index.vue

@@ -11,71 +11,63 @@
       :init-page="0"
       :pagination-visible="true"
       pagination-color="#426543"
-      auto-play="3000"
+      auto-play="3000">
-    >
       <nut-swiper-item v-for="(itm, idx) in swiperList" :key="idx">
         <img :alt="idx.toString()" :src="itm" />
       </nut-swiper-item>
     </nut-swiper>
     <!-- 标题价格 -->
     <view class="card">
-      <view class="header">
+      <view class="flex items-center justify-between">
-        <view class="price">
+        <view class="flex items-center">
+          <nut-price size="large" :price="goodInfo.number"></nut-price>
+          <view class="ml-5 line"></view>
           <nut-price
-            size="normal"
+            class="ml-5"
-            :price="goodInfo.number as number"
+            size="large"
-            position="after"
+            :price="goodInfo.exchange"
-            symbol="元"
+            symbol="积分"></nut-price>
-          />
-          <nut-price
-            size="normal"
-            :price="goodInfo.exchange as number"
-            position="after"
-            symbol="积分"
-          />
         </view>
-
-        <view class="stock"> 库存剩余:{{ goodInfo.stock }}</view>
-      </view>
-      <view class="title">{{ goodInfo.name }}</view>
-      <view class="sub">{{ goodInfo.profile }}</view>
-      <view class="cartBox">
         <nut-button
           size="small"
           type="primary"
-          @click.stop="add_cart(goodInfo)"
+          @click.stop="add_cart(goodInfo)">
-        >
           <template #icon>
             <Cart2 />
           </template>
         </nut-button>
       </view>
+      <view class="flex items-center justify-between mt-3">
+        <view class="title text-lg">{{ goodInfo.name }}</view>
+        <view class="stock text-[#9E9E9E]"> 库存:{{ goodInfo.stock }}</view>
       </view>
-    <!-- 产品介绍 -->
+      <view class="line1"></view>
+      <view class="sub">{{ goodInfo.profile }}</view>
+    </view>
+    <!-- 商品详情 -->
     <view class="rich-box">
-      <view class="title">产品介绍</view>
+      <view class="title">-----商品详情-----</view>
       <rich-text
         v-if="goodInfo.details"
         class="rich"
-        :nodes="goodInfo.details"
+        :nodes="goodInfo.details"></rich-text>
-      ></rich-text>
+      <nut-empty v-else description="暂无商品详情"></nut-empty>
-      <nut-empty v-else description="暂无产品介绍"></nut-empty>
     </view>
     <view style="height: 9vh"></view>
     <!-- 底部 -->
     <!--  购物车  -->
-    <cart ref="cartRef" :mer-info="mer_info" @update-cart="updateCartNum" />
+    <Cart ref="cartRef" :mer-info="mer_info" @update-cart="updateCartNum" />
   </view>
 </template>
 
 <script setup lang="ts">
-import { Ref, ref } from "vue";
+import {Ref, ref} from 'vue';
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import { Home, Left } from "@nutui/icons-vue-taro";
+import {Home, Left} from '@nutui/icons-vue-taro';
-import { getActiveGoodsDetail } from "@/api/goods";
+import {getActiveGoodsDetail} from '@/api/goods';
-import Cart from "@/components/Cart.vue";
+import Cart from '@/components/Cart.vue';
-import { Cart2 } from "@nutui/icons-vue-taro";
+import {Cart2} from '@nutui/icons-vue-taro';
-import { nextTick } from "vue";
+import {nextTick} from 'vue';
 
 const statusBarHeight = Taro.getSystemInfoSync()?.statusBarHeight;
 const BarHeight = ref((statusBarHeight as number) + 7);
@@ -98,9 +90,9 @@ interface GoodInfo {
 
 const goodInfo = ref<GoodInfo>({});
 
-Taro.useLoad(async (options) => {
+Taro.useLoad(async options => {
   await get_good_detail(options.gid);
-  mer_info.value = Taro.getStorageSync("mer_info");
+  mer_info.value = Taro.getStorageSync('mer_info');
   await nextTick(async () => {
     await cartRef.value.get_cart_list();
   });
@@ -119,11 +111,11 @@ const get_good_detail = async (gid: string) => {
       ...res.data.data,
       // details: res.data.data.details.,
     };
-    swiperList.value = res.data.data.rotation.split(",");
+    swiperList.value = res.data.data.rotation.split(',');
   } catch (e) {
     Taro.showToast({
       title: e.msg,
-      icon: "none",
+      icon: 'none',
     });
   }
 };
@@ -136,7 +128,7 @@ const returns = () => {
 
 const goHome = () => {
   Taro.switchTab({
-    url: "/pages/index/index",
+    url: '/pages/index/index',
   });
 };
 
@@ -169,7 +161,7 @@ const updateCartNum = (cartItems: CartItems[]) => {
       }
     });
   } else {
-    Reflect.deleteProperty(goodInfo.value, "cartNum");
+    Reflect.deleteProperty(goodInfo.value, 'cartNum');
   }
 };
 </script>
@@ -221,38 +213,15 @@ page {
   padding: 30px;
   background-color: #fff;
   position: relative;
-
+  border-radius: 30px;
-  .header {
+  top: -60px;
-    display: flex;
+  width: 95%;
-    justify-content: space-between;
+  margin: auto;
-    align-items: center;
-
-    .price {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .title {
-      font-size: 30px;
-      font-weight: bold;
-      color: #333;
-    }
-
-    .stock {
-      color: #8f8f8f;
-    }
-  }
 
   .sub {
-    font-size: 24px;
+    font-size: 30px;
     color: #999;
   }
-
-  .cartBox {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
 }
 
 .rich-box {
@@ -262,6 +231,8 @@ page {
   box-sizing: border-box;
   text-align: center;
   padding: 15px 0;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
 
   .title {
     font-size: 30px;
@@ -328,4 +299,16 @@ page {
     font-size: 25px;
   }
 }
+
+.line {
+  width: 1px;
+  height: 30px;
+  background-color: #8f8f8f;
+}
+.line1 {
+  width: 100%;
+  height: 1px;
+  background-color: #F0F0F0;
+  margin: 20px auto;
+}
 </style>

src/pages/goods/pay/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '支付订单',
+});

src/pages/goods/pay/index.scss

@@ -0,0 +1,39 @@
+.nut-price {
+  color: #333333;
+}
+
+.nut-price--symbol-large {
+  font-size: 25px;
+}
+
+.line {
+  width: 1;
+  height: 30px;
+  border-left: 1px solid #a3a3a3;
+  margin: 0 50px;
+  display: inline-block;
+}
+
+.nut-radio {
+  margin-left: 10px;
+}
+
+.nut-radio__label {
+  margin-left: 0;
+}
+
+.nut-button {
+  border-radius: 20px;
+}
+
+.nut-short-password {
+  .nut-icon-tips {
+    display: none;
+  }
+
+  @for $i from 1 through 5 {
+    .nut-short-password__item:nth-child(#{$i}) {
+      border-right: 1px solid var(--nut-shortpassword-border-color, #ddd);
+    }
+  }
+}

src/pages/goods/pay/index.vue

@@ -0,0 +1,287 @@
+<template>
+  <view class="flex flex-col items-center justify-center">
+    <view class="mt-6 text-[#8C8C8C] text-[25px]"
+      >交易剩余时间：{{ tStr }}</view
+    >
+    <view class="flex items-center mt-5 mb-5">
+      <nut-price :price="orderData.price" size="large" />
+      <view class="line"></view>
+      <nut-price
+        :decimal-digits="0"
+        position="after"
+        symbol="积分"
+        :price="orderData.exchange"
+        size="large" />
+    </view>
+    <nut-radio-group class="w-[95%]" v-model="payVal">
+      <nut-cell-group class="w-full">
+        <nut-cell class="text-[#333333]" title="支付方式"></nut-cell>
+        <nut-cell
+          class="flex items-center"
+          title="微信支付"
+          @click="cellClick(1, false)">
+          <template #icon>
+            <IconFont size="30" :name="require('../../../static/wx.png')" />
+          </template>
+          <template #link>
+            <nut-radio :label="1"></nut-radio>
+          </template>
+        </nut-cell>
+        <nut-cell
+          class="flex items-center"
+          title="平台积分支付"
+          :desc="`剩余积分:${orderData.User?.integral || 0}`"
+          @click="cellClick(2, orderData.User?.integral === 0 ? true : false)">
+          <template #icon>
+            <IconFont size="30" :name="require('../../../static/pt.png')" />
+          </template>
+          <template #link>
+            <nut-radio
+              :disabled="orderData.User?.integral === 0"
+              :label="2"></nut-radio>
+          </template>
+        </nut-cell>
+        <nut-cell
+          class="flex items-center"
+          title="天才小猪积分支付"
+          :desc="`剩余积分:${orderData.integral || 0}`"
+          @click="cellClick(3, orderData.integral === 0 ? true : false)">
+          <template #icon>
+            <IconFont size="30" :name="require('../../../static/jh.png')" />
+          </template>
+          <template #link>
+            <nut-radio
+              :disabled="orderData.integral === 0"
+              :label="3"></nut-radio>
+          </template>
+        </nut-cell>
+      </nut-cell-group>
+    </nut-radio-group>
+    <view class="w-[90%] mt-[100px]">
+      <nut-button
+        shape="square"
+        :loading="isLoading"
+        type="primary"
+        block
+        @click="pay"
+        >确认支付</nut-button
+      >
+    </view>
+
+    <nut-short-password
+      title="请输入交易密码"
+      tips=" "
+      desc=" "
+      :error-msg="error_msg"
+      v-model="shortVal"
+      v-model:visible="visible"
+      :length="6"
+      :close-on-click-overlay="false"
+      @focus="showKeyboard = true"
+      @complete="shortComplete"
+      @close="shortClose">
+    </nut-short-password>
+    <nut-number-keyboard
+      v-model="shortVal"
+      v-model:visible="showKeyboard"
+      @blur="showKeyboard = false">
+    </nut-number-keyboard>
+  </view>
+</template>
+
+<script setup lang="ts">
+import Taro from '@tarojs/taro';
+import {IconFont} from '@nutui/icons-vue-taro';
+import {onUnmounted, ref} from 'vue';
+import {getActiveOrderDetail, checkTradePwd} from '@/api/goods';
+import {getUserPoint} from '@/api/admin';
+import {payOrder} from '@/api/order';
+import * as dayjs from 'dayjs';
+
+const payVal = ref();
+
+const t_id = ref();
+
+const tStr = ref('00:00');
+
+const error_msg = ref('');
+
+const shortVal = ref('');
+
+const orderData = ref<any>({});
+
+const visible = ref(false);
+
+const showKeyboard = ref(false);
+
+const isLoading = ref(false);
+
+const opt = ref<any>({});
+
+Taro.useLoad(e => {
+  const {oid, bid} = e;
+  opt.value = e;
+  getData(oid, bid);
+});
+
+const getData = async (oid: string, bid: string) => {
+  const user_info = Taro.getStorageSync('userInfo');
+  const data = await getUserPoint({
+    phone: user_info.data.phone,
+    bid,
+  });
+  const res = await getActiveOrderDetail({
+    oid,
+  });
+
+  orderData.value = {
+    ...res.data.data,
+    ...data.data,
+  };
+  if (!orderData.value.oid)
+    return Taro.showToast({
+      title: '未获取到订单信息~',
+      icon: 'none',
+    });
+  countdownTime();
+};
+
+const pay = async () => {
+  try {
+    isLoading.value = true;
+    if (!payVal.value)
+      return Taro.showToast({title: '请选择支付方式', icon: 'none'});
+    if (payVal.value !== 1) {
+      visible.value = true;
+      showKeyboard.value = true;
+    } else {
+      confirmPay();
+    }
+  } catch (error) {
+    isLoading.value = false;
+    Taro.showToast({
+      title: error.msg,
+      icon: 'none',
+    });
+  }
+};
+
+const shortComplete = async value => {
+  try {
+    await checkTradePwd({
+      pay_password: value,
+    });
+    shortClose(false);
+    confirmPay();
+  } catch (error) {
+    error_msg.value = error.msg;
+    shortVal.value = '';
+  }
+};
+
+const confirmPay = async () => {
+  try {
+    const res = await payOrder({
+      oid: opt.value.oid,
+      OrderType: orderData.value.pay_type,
+      PayType: payVal.value,
+    });
+    switch (payVal.value) {
+      case 1:
+        if (typeof res.data.data === 'object') {
+          Taro.requestPayment({
+            timeStamp: res.data.data.timeStamp,
+            nonceStr: res.data.data.nonceStr,
+            package: res.data.data.package,
+            signType: res.data.data.signType,
+            paySign: res.data.data.paySign,
+            success: function () {
+              Taro.showToast({
+                title: '支付成功',
+                icon: 'success',
+              });
+            },
+            fail: function () {
+              Taro.showToast({
+                title: '支付失败',
+                icon: 'none',
+              });
+            },
+            complete: function () {
+              Taro.navigateTo({
+                url: `/pages/users/order_list_detail/index?orderId=${opt.value.oid}`,
+              });
+            },
+          });
+        } else {
+          Taro.showToast({
+            title: '参数获取失败，请重试~',
+            icon: 'none',
+          });
+        }
+        break;
+      default:
+        Taro.showToast({
+          title: res.msg,
+          icon: 'none',
+        });
+        setTimeout(() => {
+          Taro.navigateTo({
+            url: `/pages/users/order_list_detail/index?orderId=${opt.value.oid}`,
+          });
+        }, 2000);
+        break;
+    }
+    isLoading.value = false;
+  } catch (err) {
+    isLoading.value = false;
+    Taro.showToast({
+      title: err.msg,
+      icon: 'none',
+    });
+  }
+};
+
+const shortClose = (isMsg: boolean = true) => {
+  showKeyboard.value = false;
+  visible.value = false;
+  isLoading.value = false;
+  shortVal.value = '';
+  error_msg.value = '';
+  if (isMsg) Taro.showToast({title: '支付取消', icon: 'none'});
+};
+
+const cellClick = (val: number, isTrue: boolean) => {
+  if (isTrue) {
+    Taro.showToast({
+      title: '该支付暂不可用！',
+      icon: 'none',
+    });
+    payVal.value = undefined;
+  } else {
+    payVal.value = val;
+  }
+};
+
+const countdownTime = () => {
+  if (!orderData.value.expires) return;
+  t_id.value = setInterval(() => {
+    const nowTime = dayjs().valueOf();
+    const endTime = orderData.value.expires * 1000;
+    const time = endTime - nowTime;
+    tStr.value = dayjs(time).format('mm:ss');
+  }, 1000);
+};
+
+Taro.useDidHide(() => {
+  clearInterval(t_id.value);
+});
+
+onUnmounted(() => {
+  clearInterval(t_id.value);
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

src/pages/index/index.config.ts

@@ -1,4 +1,5 @@
 export default definePageConfig({
   navigationBarTitleText: "首页",
   enableShareAppMessage: true,
+  navigationStyle: "custom",
 });

src/pages/index/index.scss

@@ -0,0 +1,126 @@
+page {
+  background-image: url("//p0.meituan.net/csc/aaaccd28594119e4b838d07d30739471440261.png");
+  background-size: 100% 57%;
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+}
+
+.local {
+  margin-left: 15px;
+  display: flex;
+  align-items: flex-end;
+  color: #fff;
+
+  text {
+    font-size: 25px;
+  }
+}
+
+.search {
+  margin: 30px auto;
+  display: flex;
+  border-radius: 18px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px;
+  background: rgba(255, 255, 255, 0.8);
+  width: 730px;
+
+  input {
+    flex: 1;
+  }
+
+  .search-btn {
+    background-color: #f83d3d;
+    color: #fff;
+    border-radius: 10px;
+    width: 100px;
+    height: 60px;
+    text-align: center;
+    line-height: 60px;
+  }
+}
+
+.banner {
+  .title {
+    background-image: url("//p0.meituan.net/csc/542112fc072d4687b437848bc29b0a1730495.png");
+    background-size: 100% 100%;
+    width: 600px;
+    height: 90px;
+    margin: auto;
+  }
+
+  .jf-btn {
+    margin: 15px auto;
+    background-image: url("//p1.meituan.net/csc/e125184432dc591137c24a26abe5796a25262.png");
+    background-size: 100% 100%;
+    width: 350px;
+    height: 70px;
+  }
+
+  .footer {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    margin: 0 auto;
+    padding: 0 15px;
+
+    .btn-1 {
+      background-image: url("//p0.meituan.net/csc/7708348ee250eae910328bb7c12197f029562.png");
+      background-size: 100% 100%;
+      width: 200px;
+      height: 220px;
+    }
+
+    .btn-2 {
+      background-image: url("//p1.meituan.net/csc/8cc2b518031eb7424b184d90a583d805146287.png");
+      background-size: 100% 100%;
+      width: 300px;
+      height: 220px;
+    }
+
+    .btn-3 {
+      background-image: url("//p0.meituan.net/csc/31bd1f5c791c95557758dfa5c96e001529545.png");
+      background-size: 100% 100%;
+      width: 200px;
+      height: 220px;
+    }
+  }
+}
+
+.navigation {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  margin: 10px auto;
+  width: 730px;
+  height: auto;
+  background-color: #fff;
+  border-radius: 20px;
+  padding: 20px;
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .icon {
+      background-size: 100% 100%;
+      width: 80px;
+      height: 80px;
+    }
+
+    .text {
+      color: #333333;
+      font-size: 23px;
+      margin-top: 6px;
+    }
+  }
+}
+
+.ad {
+  background-image: url("https://jdt168.oss-cn-guangzhou.aliyuncs.com/ad.png");
+  background-size: 100% 100%;
+  width: 100%;
+  height: 180px;
+}

src/pages/index/index.vue

@@ -1,172 +1,149 @@
 <template>
-  <view class="app">
+  <view>
-    <!--  搜索  -->
+    <view :style="{marginTop: BarHeight + 'px'}"></view>
-    <nut-searchbar
+    <view class="local">
-      v-model="searchValue"
+      <view class="iconfont icon-dizhi" style="font-size: 20px"></view>
-      placeholder="要搜索点什么？"
+      <text>{{ address }}</text>
-    ></nut-searchbar>
+    </view>
+    <view class="search">
+      <view
+        class="iconfont icon-sousuo"
+        style="color: #8f8f8f; margin-right: 8px"></view>
+      <input placeholder="请输入商家名称搜索" v-model="searchVal" />
+      <view class="search-btn" @click="clickSearch">搜索</view>
+    </view>
     <view class="banner">
-      <nut-swiper
+      <view class="title"></view>
-        :init-page="0"
+      <navigator class="jf-btn" hover-class="none"></navigator>
-        :pagination-visible="true"
+      <view class="footer">
-        pagination-color="#ff0000"
+        <navigator hover-class="none" class="btn-1"></navigator>
-        auto-play="3000"
+        <navigator
-      >
+          hover-class="none"
-        <nut-swiper-item v-for="(itm, idx) in bannerList" :key="idx">
+          openType="switchTab"
-          <img
+          url="/pages/game/gamehome/index"
-            :src="itm.url"
+          class="btn-2"></navigator>
-            :alt="itm.ID.toString()"
+        <navigator hover-class="none" class="btn-3"></navigator>
-            @click="toPage(itm.jump)"
-          />
-        </nut-swiper-item>
-      </nut-swiper>
       </view>
-
-    <!--  金刚区  -->
-    <view class="navbar">
-      <nut-grid :border="false" column-num="5">
-        <nut-grid-item
-          v-for="item in swiperList"
-          :key="item.ID"
-          :text="item.name"
-          @click="toDetails(item)"
-        >
-          <image :src="item.icon" />
-        </nut-grid-item>
-      </nut-grid>
     </view>
-    <MerList />
+    <view class="navigation">
-    <!--    签到弹窗    -->
+      <view
-    <Popup
+        class="item"
-      v-for="(item, index) in popupList"
+        v-for="(item, index) in navigationList"
-      :ref="(el) => getRef(el, item.type)"
-      :type="item.type"
-      :src="item.src"
-      :cb="item.cb"
         :key="index"
-    />
+        @click="toPage(item)">
+        <view
+          class="icon"
+          :style="{
+            backgroundImage: `url(${item.icon})`,
+          }">
+        </view>
+        <view class="text">{{ item.name }}</view>
+      </view>
+    </view>
+    <view class="ad" @click="showTips('该功能暂未开放')"></view>
+    <MerList :get-user-location="getUserLocal" />
   </view>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
-import { ref } from "vue";
+import Taro from '@tarojs/taro';
-import Taro from "@tarojs/taro";
+import {ref} from 'vue';
-import Popup from "@/components/Popup.vue";
+import {getHomeList} from '@/api/home';
-import MerList from "@/components/MerList.vue";
+import MerList from '@/components/MerList.vue';
-import { getHomeList } from "@/api/home";
+import {showTips} from '@/utils';
-import { getBanner, userSign } from "@/api/user";
-import { parseQueryString } from "@/utils";
-import { getMerList } from "@/api/goods";
-import game_1 from "../../static/index/game_1.png";
 
-const searchValue = ref("");
+const statusBarHeight = Taro.getSystemInfoSync().statusBarHeight;
+const BarHeight = ref((statusBarHeight as number) + 7);
 
-interface SwiperList {
+interface navigationType {
   ID?: number;
-  icon?: string;
+  type: number;
-  name?: string;
+  icon: string;
-  url?: string;
+  name: string;
-  type?: number;
+  url: string;
 }
 
-const swiperList = ref<Array<SwiperList>>([]);
+const navigationList = ref<Array<navigationType>>([]);
-
-const bannerList = ref<any[]>([]);
-
-const popupRefs = ref<Map<number, any>>(new Map());
-
-const getRef = (el, type) => {
-  popupRefs.value.set(type, el);
-};
-
-const popupList = ref([
-  // {
-  //   type: 1,
-  //   src: require("../../static/index/poppBg.png"),
-  //   cb: async (type) => {
-  //     await userSign();
-  //     Taro.showToast({
-  //       title: "签到成功",
-  //       icon: "none",
-  //     });
-  //     popupRefs.value.get(type).show = false;
-  //   },
-  // },
-  {
-    type: 2,
-    src: "//upload.jdt168.com/1714381111493034239_game_1.png",
-    cb: (type) => {
-      Taro.setStorageSync(
-        "game_url",
-        `${process.env.TARO_APP_FISH_GAME}${Taro.getStorageSync("token")}`
-      );
-      Taro.navigateTo({
-        url: `/pages/game/view/index`,
-      });
-      popupRefs.value.get(type).show = false;
-    },
-  },
-]);
-
-Taro.useDidShow(async () => {
-  await getBannerList();
-  await get_banner_list();
-});
 
 Taro.useShareAppMessage(() => ({
-  title: "捷兑通",
+  title: '捷兑通',
-  path: `/pages/index/index?scene=${Taro.getStorageSync("token")}`,
+  path: `/pages/index/index?scene=${Taro.getStorageSync('token')}`,
-  imageUrl: "https://upload.jdt168.com/1714375021923881119_Share.jpg",
+  imageUrl: 'https://upload.jdt168.com/1714375021923881119_Share.jpg',
 }));
 
-const getBannerList = async () => {
+const searchVal = ref('');
-  swiperList.value = [
+const clickSearch = () => {
-    {
+  if (!searchVal.value)
-      ID: 11224,
+    return Taro.showToast({
-      type: 1,
+      title: '请输入商家名称再搜索',
-      name: "全部服务",
+      icon: 'none',
-      url: "/pages/allClassList/index",
-      icon: "//upload.jdt168.com/1702296870765673412_%E5%85%A8%E9%83%A8%E6%9C%8D%E5%8A%A1.png",
-    },
-    {
-      ID: 11225,
-      type: 1,
-      name: "活动游戏",
-      url: `/pages/game/gamehome/index?uid=${Taro.getStorageSync("token")}`,
-      icon: "//jdt168.com/uploads/merchant/20220829/caad6be8983e88c41d28da7d124bc37b.png",
-    },
-    {
-      ID: 11226,
-      type: 1,
-      name: "商户入驻",
-      url: "/pages/users/settled_mer/index",
-      icon: "//jdt168.com/uploads/merchant/20220829/6fe67b93721a42aedc842c4f19d6f2d3.png",
-    },
-    // {
-    //   ID: 11227,
-    //   type: 1,
-    //   name: "最新资讯",
-    //   url: "",
-    //   icon: "//jdt168.com/uploads/merchant/20220829/b975136a9b64aab69bf11d75a194f1ea.png",
-    // },
-  ];
-  const { data } = await getHomeList();
-  if (data.data.length > 0) {
-    for (let i = 0; i < data.data.length; i++) {
-      swiperList.value.push({
-        type: 2,
-        ...data.data[i],
     });
-    }
+  searchVal.value = '';
-  }
 };
 
-const get_banner_list = async () => {
+Taro.useLoad(() => {
-  const { data }: any = await getBanner();
+  getNavLists();
-  bannerList.value = data.data;
+  getUserLocal();
+});
+
+const address = ref('获取位置中......');
+
+const getUserLocal = async () => {
+  Taro.getLocation({
+    type: 'wgs84',
+    success: res => {
+      Taro.request({
+        url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=S3GBZ-WR26O-IXNW2-SXBOD-LZXV6-WAFNO&get_poi=1`,
+        method: 'GET',
+        success: res => {
+          const data = res.data.result.address_component;
+          address.value = `${data.city}${data.district}${data.street_number}`;
+        },
+      });
+    },
+  });
 };
 
-const toDetails = (item: SwiperList) => {
+const getNavLists = async () => {
+  navigationList.value = [
+    {
+      type: 1,
+      icon: '//p0.meituan.net/csc/5c770748f0028c63741c5ec14df3cc386715.png',
+      url: '',
+      name: '活动商家',
+    },
+    {
+      type: 1,
+      icon: '//p0.meituan.net/csc/4868c06b99008ff7d5f81e6514858c8a7950.png',
+      url: '',
+      name: '兑换商家',
+    },
+    {
+      type: 1,
+      icon: '//p0.meituan.net/csc/f33ad2443a67e9f3474a1d5fd9d529db7504.png',
+      url: '/pages/users/settled_mer/index',
+      name: '商户入驻',
+    },
+    {
+      type: 1,
+      icon: '//p0.meituan.net/csc/0403cf37dd14a6b44b22ffccaa2878f95703.png',
+      url: '/pages/allClassList/index',
+      name: '全部服务',
+    },
+  ];
+  const res = await getHomeList();
+  res.data.data.forEach(item => {
+    navigationList.value.unshift({
+      ID: item.ID,
+      type: 2,
+      icon: item.icon,
+      url: item.url,
+      name: item.name,
+    });
+  });
+};
+
+const toPage = item => {
   item.type !== 1
     ? Taro.navigateTo({
         url: `/pages/search/index?id=${item.ID}&name=${item.name}`,
@@ -175,79 +152,8 @@ const toDetails = (item: SwiperList) => {
         url: item.url as string,
       });
 };
-
-const toPage = async (url: string) => {
-  // url转对象
-  const obj = parseQueryString(url);
-  if (obj.type === "1") {
-    const { data: res } = await getMerList({});
-    const mer = res.data.filter((item) => item.bid === obj.bid)[0];
-    Taro.setStorageSync("mer_info", mer);
-  }
-  Taro.navigateTo({
-    url,
-  });
-};
 </script>
 
 <style lang="scss">
-.swiper {
+@import './index.scss';
-  .nut-swiper {
-    background: #ffffff;
-
-    .nut-swiper-item {
-      display: grid;
-      grid-template-columns: repeat(5, 1fr);
-
-      .item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        image {
-          width: 100px;
-          height: 100px;
-          border-radius: 50%;
-        }
-      }
-    }
-  }
-}
-
-.banner {
-  padding: 10px;
-  .nut-swiper-item img {
-    border-radius: 26rpx;
-    width: 100%;
-    height: 350px;
-  }
-}
-
-.titleImg {
-  margin-top: 10px;
-  width: 100%;
-  height: 50px;
-  box-sizing: border-box;
-  background-image: url("~@/static/index/index-title.png");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 50%;
-  text-align: center;
-  line-height: 50px;
-  color: #ff0000;
-  font-weight: bold;
-}
-
-.navbar {
-  background-color: #ffffff;
-
-  .nut-grid-item__content {
-    padding: 15px;
-  }
-
-  image {
-    width: 80px;
-    height: 80px;
-  }
-}
 </style>

src/pages/mer/mer_detail/index.config.ts

@@ -1,3 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: "",
+  navigationBarTitleText: '',
+  navigationStyle: 'custom',
 });

src/pages/mer/mer_detail/index.scss

@@ -0,0 +1,161 @@
+page {
+  // IOS安全区域
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  -nut-tabs-titles-item-color: #8c8c8c;
+  -nut-tabs-titles-item-active-color: #333333;
+}
+
+.head-wrapper {
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  position: fixed;
+  left: 30px;
+  top: 0;
+  //height: 114px;
+}
+
+.head-menu {
+  display: flex;
+  align-items: center;
+  height: 54px;
+  width: 140px;
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 27px;
+
+  .iconfont {
+    flex: 1;
+    text-align: center;
+    color: #fff;
+    box-sizing: border-box;
+  }
+}
+
+.nut-swiper {
+  height: 550px;
+}
+
+.infoBox {
+  background-color: #fff;
+  padding: 30px;
+  border-radius: 25px;
+  position: relative;
+  top: -50px;
+
+  .title {
+    font-size: large;
+    font-weight: bold;
+    font-size: 40px;
+  }
+
+  .line {
+    margin: 30px auto;
+    width: 670px;
+    height: 1px;
+    background-color: rgba(240, 240, 240, 1);
+  }
+
+  .bom {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-top: 10px;
+
+    .left {
+      width: 75%;
+
+      .sub {
+        color: #999;
+        font-size: 27px;
+      }
+    }
+
+    .right {
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      color: #999;
+      text-align: center;
+    }
+
+
+  }
+}
+.btn {
+  background-color: #ff0000;
+  color: #fff;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 65px;
+  width: 45px;
+  height: 45px;
+}
+
+.good-class {
+  .nut-tabs {
+    height: 100vh;
+    // border-top: #fff 10px solid;
+    .nut-tabs__titles {
+      padding: 20px 0;
+    }
+
+    .nut-tab-pane {
+      border-radius: 20px;
+      padding: 25px;
+    }
+  }
+}
+
+.list {
+  .item {
+    display: flex;
+    margin-bottom: 20px;
+
+    image {
+      width: 180px;
+      height: 180px;
+      border-radius: 15px;
+    }
+
+    .right {
+      flex: 1;
+      margin-left: 15px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      // text-align: right;
+
+      .stock {
+        margin-top: 10px;
+        color: #8f8f8f;
+      }
+
+      .name {
+        // height: 20px;
+        font-size: 28px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        word-break: break-word;
+      }
+
+      .bom {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        //margin-top: 10px;
+
+        .price {
+          font-size: 20px;
+          font-weight: bold;
+          color: #ff0000;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 1;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+}

src/pages/mer/mer_detail/index.vue

@@ -1,45 +1,65 @@
 <template>
   <view>
+    <view class="head-wrapper" :style="{top: BarHeight + 'px'}">
+      <view class="head-menu">
+        <Left class="iconfont" @click="returns" />
+        <Home class="iconfont" @click="goHome" />
+      </view>
+    </view>
     <!--  幻灯片  -->
     <nut-swiper
       :init-page="0"
-      :pagination-visible="true"
+      :pagination-visible="false"
       pagination-color="red"
-      auto-play="3000"
+      auto-play="3000">
-    >
       <nut-swiper-item v-for="(itm, idx) in swiperList" :key="idx">
         <img
           style="width: 100%; height: 100%"
           :src="itm"
-          :alt="idx.toString()"
+          :alt="idx.toString()" />
-        />
       </nut-swiper-item>
     </nut-swiper>
     <!-- 商家信息 -->
     <view class="infoBox">
-      <view class="title">{{ mer_info.name }}</view>
+      <view class="title text-[#333333]">{{ mer_info.name }}</view>
+      <view class="flex items-center justify-between mt-3">
+        <nut-rate
+          spacing="1"
+          active-color="rgba(252, 207, 10, 1)"
+          v-model="mer_info.rate" />
+        <view class="text-[#9E9E9E] text-[25px]">销量：10000</view>
+        <view class="text-[#9E9E9E] text-[25px]"
+          >营业时间：{{ mer_info.week_start }}-{{ mer_info.week_end }}</view
+        >
+      </view>
+      <view class="line"></view>
       <view class="bom">
+        <view
+          class="iconfont icon-dizhi text-[#C4C4C4]"
+          style="width: 15px; height: 15px; margin-right: 15px"></view>
         <view class="left">
-          <view>{{ mer_info.address || "暂无商家地址" }}</view>
+          <view>{{ mer_info.address || '暂无商家地址' }}</view>
-          <view class="sub"
+          <view class="sub mt-1"
-            >距你{{
+            >距离您{{
               calculateDistance(
                 userLocalNum.t,
                 userLocalNum.l,
                 Number(mer_info.lat),
-                Number(mer_info.lon)
+                Number(mer_info.lon),
               )
             }}
           </view>
         </view>
         <view class="right">
           <view @click="clickMap">
-            <Locationg3 color="red" size="25" />
+            <image
-            <view>导航</view>
+              class="w-[50px] h-[50px]"
+              src="http://p1.meituan.net/csc/92ee8512c90527169b44e07fd11d250d924.png" />
           </view>
           <view @click="clickPhone">
-            <Find color="red" size="25" />
+            <image
-            <view>电话</view>
+              class="w-[50px] h-[50px]"
+              src="http://p0.meituan.net/csc/ab0493b124a6bb858bf82a2340767c0d919.png" />
           </view>
         </view>
       </view>
@@ -53,21 +73,20 @@
         direction="vertical"
         title-gutter="5"
         animated-time="0"
-        name="tabName"
+        type=""
-      >
+        name="tabName">
         <nut-tab-pane
           v-for="(itm, index) in good_list"
           :key="index"
           :title="itm.name"
-          :pane-key="index"
+          :pane-key="index">
-        >
           <view v-if="itm.Goods.length > 0">
             <view class="list" v-for="(item, index) in itm.Goods" :key="index">
               <view class="item" @click.stop="toGoodDetails(item.gid, 1)">
                 <image :src="item.cover" lazy-load />
                 <view class="right">
                   <view class="name">{{ item.name }}</view>
-                  <view class="stock">剩余:{{ item.stock }}</view>
+                  <view class="stock text-[25px]">剩余:{{ item.stock }}</view>
                   <view class="bom">
                     <view>
                       <view class="price">
@@ -79,15 +98,20 @@
                         >
                       </view>
                     </view>
-                    <nut-button
+                    <view class="flex items-center justify-between">
-                      size="mini"
+                      <view
-                      type="primary"
+                        v-if="item.cartNum > 0"
-                      @click.stop="add_cart(item)"
+                        class="btn"
-                    >
+                        @click.stop="add_cart(item, 1)">
-                      <template #icon>
+                        <Minus />
-                        <Cart2 />
+                      </view>
-                      </template>
+                      <view v-if="item.cartNum > 0" style="margin: 0 10px">
-                    </nut-button>
+                        {{ item.cartNum }}
+                      </view>
+                      <view class="btn" @click.stop="add_cart(item, 2)">
+                        <Plus />
+                      </view>
+                    </view>
                   </view>
                 </view>
               </view>
@@ -105,18 +129,21 @@
 </template>
 
 <script setup lang="ts">
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import { Find, Locationg3, Cart2 } from "@nutui/icons-vue-taro";
+import {Cart2, Left, Home, Uploader, Plus, Minus} from '@nutui/icons-vue-taro';
-import { Ref, ref } from "vue";
+import {Ref, ref} from 'vue';
-import { calculateDistance } from "@/utils";
+import {calculateDistance} from '@/utils';
-import { getGoodList, getMerCategory } from "@/api/goods";
+import {getGoodList, getMerCategory} from '@/api/goods';
-import Cart from "@/components/Cart.vue";
+import Cart from '@/components/Cart.vue';
+
+const statusBarHeight = Taro.getSystemInfoSync()?.statusBarHeight;
+const BarHeight = ref((statusBarHeight as number) + 6);
 
 const swiperList = ref([]);
 
 const mer_info = ref<any>({});
 
-const value = ref("0");
+const value = ref('0');
 
 const userLocalNum = ref({
   l: 0,
@@ -125,17 +152,17 @@ const userLocalNum = ref({
 
 Taro.useLoad(async () => {
   Taro.getLocation({
-    type: "wgs84",
+    type: 'wgs84',
-    success: (res) => {
+    success: res => {
       userLocalNum.value.l = res.longitude;
       userLocalNum.value.t = res.latitude;
     },
   });
-  mer_info.value = Taro.getStorageSync("mer_info");
+  mer_info.value = Taro.getStorageSync('mer_info');
   Taro.setNavigationBarTitle({
     title: mer_info.value.name,
   });
-  swiperList.value = mer_info.value.img.split(",");
+  swiperList.value = mer_info.value.img.split(',');
   await get_class_list();
   await cartRef.value.get_cart_list();
 });
@@ -204,7 +231,7 @@ interface CartItems {
 const good_list = ref<goodList[]>([]);
 const get_good_list = async (id: number) => {
   Taro.showLoading({
-    title: "加载中",
+    title: '加载中',
     mask: true,
   });
   const res = await getGoodList({
@@ -225,8 +252,14 @@ const toGoodDetails = (id: string, type: number) => {
 
 const cartRef = ref(null) as Ref;
 
-const add_cart = (item: GoodsType) => {
+const add_cart = (item: GoodsType, type: number) => {
-  const num = item.cartNum ? Number(item.cartNum) + 1 : 1;
+  let num = 0;
+  if (type === 1) {
+    num = Number(item.cartNum) - 1;
+  } else {
+    num = item.cartNum ? Number(item.cartNum) + 1 : 1;
+  }
+
   cartRef.value.add_cart(item, num);
 };
 
@@ -244,115 +277,25 @@ const updateCartNum = (cartItems: CartItems[]) => {
   } else {
     good_list.value.forEach((category: goodList) => {
       category.Goods.forEach((good: GoodsType) => {
-        Reflect.deleteProperty(good, "cartNum");
+        Reflect.deleteProperty(good, 'cartNum');
       });
     });
   }
 };
+
+const returns = () => {
+  Taro.navigateBack({
+    delta: 1,
+  });
+};
+
+const goHome = () => {
+  Taro.switchTab({
+    url: '/pages/index/index',
+  });
+};
 </script>
 
 <style lang="scss">
-page {
+@import './index.scss';
-  // IOS安全区域
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
-}
-
-.nut-swiper {
-  height: 350px;
-}
-
-.infoBox {
-  background-color: #fff;
-  padding: 20px;
-
-  .title {
-    font-size: large;
-    font-weight: bold;
-  }
-
-  .bom {
-    display: flex;
-    align-items: flex-end;
-    margin-top: 10px;
-
-    .left {
-      width: 80%;
-
-      .sub {
-        color: #999;
-      }
-    }
-
-    .right {
-      flex: 1;
-      display: flex;
-      justify-content: space-between;
-      color: #999;
-      text-align: center;
-    }
-  }
-}
-
-.good-class {
-  margin-top: 10px;
-
-  .nut-tabs {
-    height: 100vh;
-    border-top: #fff 10px solid;
-  }
-}
-
-.list {
-  .item {
-    display: flex;
-    margin-bottom: 10px;
-
-    image {
-      width: 180px;
-      height: 180px;
-      border-radius: 10px;
-    }
-
-    .right {
-      flex: 1;
-      margin-left: 5px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      // text-align: right;
-
-      .stock {
-        margin-top: 10px;
-        color: #8f8f8f;
-      }
-
-      .name {
-        // height: 20px;
-        font-size: 28px;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        word-break: break-word;
-      }
-
-      .bom {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-end;
-        //margin-top: 10px;
-
-        .price {
-          font-size: 20px;
-          font-weight: bold;
-          color: #ff0000;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 1;
-          overflow: hidden;
-        }
-      }
-    }
-  }
-}
 </style>

src/pages/user/index.config.ts

@@ -1,4 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: "个人中心",
+  navigationBarTitleText: '个人中心',
-  navigationStyle: "custom",
+  navigationStyle: 'custom',
 });

src/pages/user/index.vue

@@ -1,20 +1,21 @@
 <template>
-  <view class="app">
+  <view class="appUser">
     <view
       class="user-center-card__header__transparent"
       v-if="isLogin"
-      :style="{ width: isLogin ? '100%' : '70%' }"
+      :style="{width: isLogin ? '100%' : '70%'}">
-    >
+      <view
-      <view class="user-center-card__header__avatar">
+        class="user-center-card__header__avatar"
+        @click="toPage('/pages/users/user_setting/index')">
         <nut-avatar size="large">
           <img :src="userInfo.data?.avatarUrl" />
         </nut-avatar>
       </view>
-      <view class="user-center-card__header__info">
       <view
-          class="user-center-card__header__info__name"
+        class="user-center-card__header__info"
-          @click="toPage('/pages/users/user_setting/index')"
+        @click="toPage('/pages/users/user_setting/index')">
-          >{{ userInfo.data?.nickName }}
+        <view class="user-center-card__header__info__name"
+          >{{ userInfo.data?.nickName || '点击设置昵称' }}
         </view>
         <view v-if="!userInfo.data?.phone">
           <nut-button
@@ -24,27 +25,16 @@
             >点击绑定手机号
           </nut-button>
         </view>
+        <view v-else class="user-center-card__header__info__phone"
+          >{{ maskString(userInfo.data?.phone, 3, 7) }}
         </view>
-      <view class="rightIcon">
-        <Scan style="margin-right: 20px" @click="scanCode" size="22" />
-        <button v-if="isLogin" open-type="contact">
-          <Message
-            color="#666666"
-            style="margin-right: 20px"
-            @click="toSetting"
-            size="22"
-          />
-        </button>
-
-        <Setting style="margin-right: 20px" @click="toSetting" size="22" />
       </view>
     </view>
     <view v-else class="user-center-card__header__transparent">
       <view class="user-center-card__header__avatar">
         <nut-avatar size="large">
           <img
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
-          />
         </nut-avatar>
       </view>
       <view class="user-center-card__header__info">
@@ -53,146 +43,155 @@
         </view>
       </view>
     </view>
+    <view class="user-acc flex justify-center items-center text-center">
+      <view>
+        <view class="text-[#CFAA32]">豆子</view>
+        <view class="text-[#ffc300] text-[35px] font-bold">{{
+          userInfo.data?.pulse || 0
+        }}</view>
+      </view>
+      <view class="line"></view>
+      <view>
+        <view class="text-[#CFAA32]">积分</view>
+        <view class="text-[#ffc300] text-[35px] font-bold">{{
+          userInfo.data?.integral || 0
+        }}</view>
+      </view>
+    </view>
     <view class="container">
       <!--我的订单-->
-      <view class="cell-card">
+      <view class="border-box bg-[#fff] p-[30px]">
-        <view class="top">
+        <view class="flex justify-between items-center">
-          <view>我的订单</view>
+          <view class="text-[#333333]">我的订单</view>
-          <view class="sub" @click="toOrderList(0)">
+          <view
-            <view>全部订单</view>
+            class="flex text-[#c9c9c9] items-center"
-            <ArrowRight />
+            @click="toOrderList(0)">
+            <view class="text-[25px]">查看全部</view>
+            <ArrowRight size="10" />
           </view>
         </view>
-        <view class="center">
+        <view class="flex justify-between text-[#666] pl-[30px] pr-[30px]">
-          <view class="center-t" @click="toOrderList(1)">
+          <view
-            <!-- <Order size="25px"/> -->
+            class="mt-[30px] flex flex-col items-center"
+            @click="toOrderList(1)">
             <IconFont
-              name="http://article.biliimg.com/bfs/article/131eda0add8662808d97ffb1191d19bf3e420647.png"
+              name="http://p0.meituan.net/csc/9943f6c938fc0e310141a2b99d5bde6617483.png"
-              size="40"
+              size="40" />
-            />
+            <view class="mt-[15px] text-[25px] text-[#333333]">待付款</view>
-            <view class="center-text">待付款</view>
           </view>
-          <view class="center-t" @click="toOrderList(2)">
+          <view
-            <!-- <Clock size="25px"/> -->
+            class="mt-[30px] flex flex-col items-center"
+            @click="toOrderList(2)">
             <IconFont
-              name="http://article.biliimg.com/bfs/article/002434c9ed4774cb732517eb27e0ff547a41c606.png"
+              name="http://p0.meituan.net/csc/5306d094d7b4b61848dd21c86b693a9515523.png"
-              size="40"
+              size="40" />
-            />
+            <view class="mt-[15px] text-[25px] text-[#333333]">待使用</view>
-            <view class="center-text">待使用</view>
           </view>
-          <view class="center-t" @click="toOrderList(3)">
+          <view
-            <!-- <Shop size="25px"/> -->
+            class="mt-[30px] flex flex-col items-center"
+            @click="toOrderList(3)">
             <IconFont
-              name="http://article.biliimg.com/bfs/article/7c2ca0228180fe5f3b1d74b0043d80e76c42eb7d.png"
+              name="http://p0.meituan.net/csc/32ea9bbf51e3bbb0cbd75bc0fea97ca815779.png"
-              size="40"
+              size="40" />
-            />
+            <view class="mt-[15px] text-[25px] text-[#333333]">已使用</view>
-            <view class="center-text">已使用</view>
           </view>
-          <view class="center-t" @click="toOrderList(4)">
+          <view
-            <!-- <Del size="25px"/> -->
+            class="mt-[30px] flex flex-col items-center"
+            @click="toOrderList(4)">
             <IconFont
-              name="http://article.biliimg.com/bfs/article/c4f4e069dddfa7104f794a46a759a7ed478b81ea.png"
+              name="http://p0.meituan.net/csc/2e0dee89e9a3e3f2e7bf65db355fa11c11630.png"
-              size="40"
+              size="40" />
-            />
+            <view class="mt-[15px] text-[25px] text-[#333333]">已失效</view>
-            <view class="center-text">已失效</view>
           </view>
         </view>
       </view>
 
       <!--  我的服务  -->
       <view class="user-center" v-if="isLogin">
-        <view>我的服务</view>
+        <view class="text-[#333333]">我的服务</view>
         <view class="box">
+          <view v-for="(item, idx) in userMenuList" :key="idx">
             <view
+              v-if="item.type !== 333"
               class="box-mini"
-            v-for="(item, idx) in userMenuList"
+              @click="toPage(item.url)">
-            :key="idx"
-            @click="toPage(item.url)"
-          >
-            <!-- <image :src="item.icon" /> -->
               <IconFont size="40" :name="item.icon"></IconFont>
               <view class="label">{{ item.label }}</view>
             </view>
+            <button v-else class="kf-btn" open-type="contact">
+              <IconFont class="IconFont" size="40" :name="item.icon"></IconFont>
+              <view class="label">{{ item.label }}</view>
+            </button>
+          </view>
         </view>
       </view>
 
       <!--  商家管理  -->
       <view
-        class="mer-box"
+        class="user-center"
-        v-if="userInfo.data?.bid && userInfo.store_status === 1"
+        v-if="userInfo.data?.bid && userInfo.store_status === 1">
-      >
+        <view class="text-[#333333]">商家服务</view>
-        <nut-grid :gutter="10" :border="false">
+        <nut-grid :gutter="0" :border="false">
           <nut-grid-item
             :border="false"
             v-if="userInfo.data.permission.dd"
             text="点单"
-            @click="toPage('/pages/admin/add_order/index')"
+            @click="toPage('/pages/admin/add_order/index')">
-          >
             <IconFont
               size="40"
-              :name="require('../../static/user/1-1.png')"
+              name="http://p0.meituan.net/csc/72a389ac6a441061fd534b96644c431b7839.png"></IconFont>
-            ></IconFont>
           </nut-grid-item>
           <nut-grid-item
             :border="false"
             v-if="userInfo.data.permission.hx"
             text="订单核销"
-            @click="toPage('/pages/admin/verify/index')"
+            @click="toPage('/pages/admin/verify/index')">
-          >
             <IconFont
               size="40"
-              :name="require('../../static/user/1-2.png')"
+              name="http://p1.meituan.net/csc/c236a8b7a73178da25218e1fb59a96f06610.png"></IconFont>
-            ></IconFont>
           </nut-grid-item>
           <nut-grid-item
             :border="false"
             v-if="userInfo.data.permission.tj"
             text="订单统计"
-            @click="toPage('/pages/admin/order_manage/index')"
+            @click="toPage('/pages/admin/order_manage/index')">
-          >
             <IconFont
               size="40"
-              :name="require('../../static/user/1-3.png')"
+              name="http://p0.meituan.net/csc/bd9aca457a109b4d69a692a9109a73ed9045.png"></IconFont>
-            ></IconFont>
           </nut-grid-item>
           <nut-grid-item
             :border="false"
             v-if="userInfo.data.permission.tx"
             text="收益提现"
-            @click="toPage('/pages/admin/withdrawal/index')"
+            @click="toPage('/pages/admin/withdrawal/index')">
-          >
             <IconFont
               size="40"
-              :name="require('../../static/user/1-4.png')"
+              name="http://p0.meituan.net/csc/f85d7dc1bf9eda8977e9089b260a586b7440.png"></IconFont>
-            ></IconFont>
           </nut-grid-item>
         </nut-grid>
       </view>
 
       <!--    版权    -->
-      <!--            <view class="copy">© 2023 </view>-->
+      <view class="text-[#999999] mt-5 text-[20px] text-center">
+        <view>鑫瓴科技版权所有</view>
+        <view>v4.0.0</view>
+      </view>
     </view>
     <!-- 登录 -->
     <Auth
       :visible="isShowLogin"
       @update:visible="cancelLogin"
-      @ok="getUserInfo"
+      @ok="getUserInfo" />
-    />
   </view>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import {ref} from 'vue';
-import {
+import {ArrowRight, IconFont} from '@nutui/icons-vue-taro';
-  ArrowRight,
+import Taro from '@tarojs/taro';
-  Setting,
+import Auth from '@/components/Auth.vue';
-  IconFont,
+import {getPersonalInfo, getPhone, bindParent} from '@/api/user';
-  Scan,
+import {maskString} from '@/utils';
-  Message,
-} from "@nutui/icons-vue-taro";
-import Taro from "@tarojs/taro";
-import Auth from "@/components/Auth.vue";
-import { getPersonalInfo, getPhone, bindParent } from "@/api/user";
 
 const isShowLogin = ref(false);
 
@@ -207,6 +206,8 @@ interface UserInfo {
     phone?: string;
     uid?: string;
     permission?: any;
+    integral?: string;
+    pulse?: string;
   };
   store_status?: number;
   store_name?: string;
@@ -215,20 +216,40 @@ interface UserInfo {
 const userInfo = ref<UserInfo>({});
 
 Taro.useDidShow(() => {
-  const token = Taro.getStorageSync("token");
+  init_data();
+});
+
+// Taro.startPullDownRefresh({
+//   success: () => {
+//     init_data();
+//   },
+//   complete: () => {
+//     Taro.stopPullDownRefresh();
+//   },
+// });
+
+const init_data = () => {
+  const token = Taro.getStorageSync('token');
   if (token) {
     getUserInfo();
   }
+};
+
+const test = () => {
+  console.log(process.env.TARO_APP_ID);
+  Taro.openCustomerServiceChat({
+    corpId: 'wwb5dd953ca36043ef',
+    extInfo: {
+      url: 'https://work.weixin.qq.com/kfid/kfcb2b0420e94102346',
+    },
   });
+};
 
 const cancelLogin = () => {
   isShowLogin.value = false;
 };
 
 const getUserInfo = async () => {
-  Taro.showLoading({
-    title: "加载中",
-  });
   const res = await getPersonalInfo();
   userInfo.value = {
     ...res.data,
@@ -239,10 +260,9 @@ const getUserInfo = async () => {
         : {},
     },
   };
-  Taro.setStorageSync("userInfo", userInfo.value);
+  Taro.setStorageSync('userInfo', userInfo.value);
   isLogin.value = true;
   cancelLogin();
-  Taro.hideLoading();
 };
 
 const getphonenumber = async (e: any) => {
@@ -256,8 +276,8 @@ const getphonenumber = async (e: any) => {
 const toOrderList = (e: number) => {
   if (!isLogin.value)
     return Taro.showToast({
-      title: "请先登录",
+      title: '请先登录',
-      icon: "none",
+      icon: 'none',
     });
   Taro.navigateTo({
     url: `/pages/users/order_list/index?type=${e}`,
@@ -266,43 +286,37 @@ const toOrderList = (e: number) => {
 
 const userMenuList = ref([
   {
-    label: "后结订单",
+    label: '账户明细',
-    url: "/pages/users/pending_order/index",
+    url: '/pages/users/account/index',
-    icon: require("../../static/user/dd.png"),
+    icon: 'http://p0.meituan.net/csc/104f787b7cc5582868be46ff52475ecf7084.png',
   },
   {
-    label: "我的账户",
+    label: '后结订单',
-    url: "/pages/users/account/index",
+    url: '/pages/users/pending_order/index',
-    icon: "http://jdt168.com/uploads/default/20220829/e819815623276fdbb9a54d685292e5c7.png",
+    icon: 'http://p0.meituan.net/csc/68d3f1f1ea375897a2b918851199b6546322.png',
   },
-  // {
-  //     id: 2,
-  //     label: "商家入驻",
-  //     url: "/pages/users/account/index",
-  //     icon: "http://jdt168.com/uploads/default/20220829/583fd6cbd729b24eab9c3cae20ae694d.png",
-  // },
   {
-    label: "我的推广",
+    label: '我的推广',
-    url: "/pages/users/distribution/index",
+    url: '/pages/users/distribution/index',
-    icon: "http://jdt168.com/uploads/default/20220829/73656833c1d849c050638f9ee9903b9d.png",
+    icon: 'http://p0.meituan.net/csc/950814cc0ed1289f170e8612fab597cd5310.png',
+  },
+  {
+    label: '联系客服',
+    type: 333,
+    url: '/pages/users/account/index',
+    icon: 'http://p0.meituan.net/csc/ddd4b6ff4271ec05ced60db0aee1e9548383.png',
+  },
+  {
+    label: '设置',
+    url: '/pages/users/setting/index',
+    icon: 'http://p0.meituan.net/csc/333f2ec6a76c1fb2e442d277f8b99d5e2853.png',
   },
-  // {
-  //   label: "聚合积分",
-  //   url: "/pages/users/integral/index",
-  //   icon: require("../../static/jhjf.png"),
-  // },
 ]);
 
-const toSetting = () => {
-  Taro.navigateTo({
-    url: "/pages/users/setting/index",
-  });
-};
-
 const clickLogin = () => {
   // isShowLogin.value = true
   Taro.redirectTo({
-    url: "/pages/users/login/index",
+    url: '/pages/users/login/index',
   });
 };
 
@@ -315,20 +329,20 @@ const toPage = (url: string) => {
 const scanCode = () => {
   Taro.scanCode({
     onlyFromCamera: true,
-    scanType: ["qrCode"],
+    scanType: ['qrCode'],
-    success: async (data) => {
+    success: async data => {
       try {
         await bindParent({
           uid: data.result,
         });
         Taro.showToast({
-          title: "绑定成功",
+          title: '绑定成功',
-          icon: "none",
+          icon: 'none',
         });
       } catch (error) {
         Taro.showToast({
           title: error.msg,
-          icon: "none",
+          icon: 'none',
         });
       }
     },
@@ -337,14 +351,15 @@ const scanCode = () => {
 </script>
 
 <style lang="scss">
-.app {
+.appUser {
   box-sizing: border-box;
-  background-color: #f5f5f5;
+  background-color: #f8f8f8;
-  height: 100vh;
+  height: 100%;
-  background-image: url("https://cdn-we-retail.ym.tencent.com/miniapp/template/user-center-bg-v1.png");
+  background-image: url('http://p0.meituan.net/csc/f44bb11463e3c538c307d7ce4b303bec33520.png');
-  background-size: auto 40%;
+  background-size: 100% 500px;
   background-repeat: no-repeat;
   position: relative;
+  padding-top: 180px;
   color: var(--nut-grid-item-text-color, var(--nut-title-color2, #666666));
 }
 
@@ -354,14 +369,16 @@ const scanCode = () => {
   }
 }
 
+.user-center-card__header__info__phone {
+  color: #737373;
+  font-size: 25px;
+}
+
 .user-center-card__header__transparent {
-  position: absolute;
+  padding-left: 30px;
-  left: 30px;
-  top: 200px;
   background-color: transparent;
   display: flex;
   align-items: center;
-  justify-content: space-between;
   box-sizing: border-box;
   text-align: left;
   padding-right: 20px;
@@ -372,55 +389,17 @@ const scanCode = () => {
     color: #333;
     font-weight: bolder;
   }
-
-  .rightIcon {
-    height: 100px;
-    margin: auto;
-    display: flex;
-    justify-content: flex-start;
-    // align-items: center;
-    button {
-      padding: 0 !important;
-      margin: 0 !important;
-      background: transparent;
-      -webkit-tap-highlight-color: transparent;
-      overflow: hidden;
-      position: relative;
-      top: -13px;
-    }
-
-    button::after {
-      border: none;
-      background: transparent;
-    }
-  }
 }
 
 .container {
   position: absolute;
-  top: 350px;
+  top: 500px;
-  width: 710px;
 }
 
 .cell-card {
   box-sizing: border-box;
   background-color: #fff;
-  border-radius: 20px;
-  margin: 20px;
   padding: 30px;
-  width: 710px;
-
-  .top {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .sub {
-      display: flex;
-      color: #c9c9c9;
-      align-items: center;
-    }
-  }
 
   .center {
     display: flex;
@@ -443,11 +422,10 @@ const scanCode = () => {
 
 .user-center {
   background-color: #fff;
-  border-radius: 20px;
+  margin: 20px 0px;
-  margin: 20px;
   padding: 20px;
-  width: 710px;
+
-  box-sizing: border-box;
+  -nut-grid-item-text-color: #333;
 
   .box {
     margin-top: 20px;
@@ -455,18 +433,18 @@ const scanCode = () => {
     grid-template-columns: repeat(4, 1fr);
     grid-gap: 20px;
     box-sizing: border-box;
+    line-height: 1.5;
 
     .box-mini {
       display: flex;
       box-sizing: border-box;
-      width: 150px;
       flex-direction: column;
       align-items: center;
 
       .label {
         font-size: 25px;
         margin-top: 10px;
-        color: #333;
+        color: #333333;
       }
 
       image {
@@ -478,10 +456,45 @@ const scanCode = () => {
 }
 
 .mer-box {
-  box-sizing: border-box;
   background-color: #fff;
-  border-radius: 20px;
   margin: 20px;
-  width: 710px;
+  width: 100%;
+}
+
+.user-acc {
+  background-image: url('http://p0.meituan.net/csc/a74c44a7af541f01efbcc6fb023e6e09132712.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 95%;
+  height: 150px;
+  margin: 60px auto;
+
+  .line {
+    width: 1px;
+    height: 50px;
+    background-color: #ffc300;
+    margin: 0 100px;
+  }
+}
+
+.kf-btn {
+  padding: 0 !important;
+  margin: 0 !important;
+  background: transparent;
+  -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
+  font-size: 25px;
+  color: #333333;
+  line-height: 1;
+
+  .IconFont {
+    margin-bottom: 13px;
+  }
+
+  &::after {
+    border: none;
+    background: transparent;
+    line-height: 1;
+  }
 }
 </style>

src/pages/users/account/index.config.ts

@@ -1,3 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: "我的账户",
+  navigationBarTitleText: '账户明细',
 });

src/pages/users/account/index.vue

@@ -1,30 +1,31 @@
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import {computed, ref} from 'vue';
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import * as dayjs from "dayjs";
+import * as dayjs from 'dayjs';
-import { getIntegralDetail, getBeanDetail, getGiftRecord } from "@/api/user";
+import {getIntegralDetail, getBeanDetail, getGiftRecord} from '@/api/user';
+import {TriangleDown} from '@nutui/icons-vue-taro';
 
 const tabValue = ref(1);
 
 const tabsList = ref([
   {
-    title: "兑换明细",
+    title: '兑换明细',
     value: 1,
   },
   {
-    title: "赠送明细",
+    title: '赠送明细',
     value: 3,
   },
   {
-    title: "豆子明细",
+    title: '豆子明细',
     value: 2,
   },
   {
-    title: "活动赠送",
+    title: '活动赠送',
     value: 4,
   },
   {
-    title: "聚合积分",
+    title: '聚合积分',
     value: 5,
   },
 ]);
@@ -33,11 +34,11 @@ const computerType = computed(() => {
   return (val: number) => {
     switch (val) {
       case 5:
-        return "注册赠送";
+        return '注册赠送';
       case 6:
-        return "签到赠送";
+        return '签到赠送';
       case 7:
-        return "系统赠送";
+        return '系统赠送';
     }
   };
 });
@@ -64,8 +65,12 @@ const data = ref<DataType[]>([]);
 const userInfo = ref<any>({});
 
 Taro.useLoad(() => {
+  pickerVal.value = [
+    dayjs().format('YYYY-MM-DD'),
+    dayjs().format('YYYY-MM-DD'),
+  ];
   getList();
-  userInfo.value = Taro.getStorageSync("userInfo");
+  userInfo.value = Taro.getStorageSync('userInfo');
 });
 
 const page = ref({
@@ -86,12 +91,14 @@ const getList = async () => {
       PageNum: page.value.PageNum,
       PageSize: page.value.PageSize,
       Type: tabValue.value,
+      TimeStart: pickerVal.value[0],
+      TimeEnd: pickerVal.value[1],
     };
     if (tabValue.value === 1 || tabValue.value === 3 || tabValue.value === 5) {
       res = await getBeanDetail(newData);
     } else if (tabValue.value === 2) {
       // delete data.value.Type;
-      Reflect.deleteProperty(data.value, "Type");
+      Reflect.deleteProperty(data.value, 'Type');
       res = await getIntegralDetail(newData);
     } else if (tabValue.value === 4) {
       res = await getGiftRecord(newData);
@@ -101,41 +108,64 @@ const getList = async () => {
   } catch (error) {
     Taro.showToast({
       title: error.msg,
-      icon: "none",
+      icon: 'none',
     });
   }
 };
+
+const pickerRef = ref();
+const showPicker = ref(false);
+
+const pickerVal = ref<Array<string>>([]);
+
+const openPicker = () => {
+  showPicker.value = true;
+  pickerRef.value.scrollToDate(dayjs().format('YYYY-MM-DD'));
+};
+const choose = e => {
+  pickerVal.value = [e[0][3], e[1][3]];
+  getList();
+};
+
+const closePicker = () => {
+  showPicker.value = false;
+};
 </script>
 
 <template>
   <view>
-    <view class="card">
-      <view class="info">
-        <view class="left">
-          <view>
-            <view class="num">豆子: {{ userInfo.data?.pulse }}</view>
-          </view>
-          <view>
-            <view class="num">积分: {{ userInfo.data?.integral }}</view>
-          </view>
-        </view>
-      </view>
-    </view>
-    <scroll-view scroll-x>
     <view class="tabs-box">
       <view
-          v-for="item in tabsList"
+        class="item"
-          :key="item.value"
+        v-for="(item, idx) in tabsList"
+        :key="idx"
         @click="tabChange(item.value)"
-        >
+        :style="{
-          <view class="text">{{ item.title }}</view>
+          backgroundColor: item.value === tabValue ? '#ff0000' : '#F0F0F0',
+          color: item.value === tabValue ? '#fff' : '#333',
+        }">
+        <view>{{ item.title }}</view>
+      </view>
+    </view>
+
     <view
-            class="line"
+      @click="openPicker"
-            :class="{ lineColor: item.value === tabValue }"
+      class="pt-[20px] pb-[20px] pl-[25px] text-[30px] text-[#333] flex items-center">
-          ></view>
+      <text>时间筛选</text>
+      <TriangleDown size="20px" color="#333" />
     </view>
-      </view>
+
-    </scroll-view>
+    <nut-calendar
+      ref="pickerRef"
+      type="range"
+      title="时间筛选"
+      v-model:visible="showPicker"
+      :default-value="pickerVal"
+      start-date="2023-01-01"
+      end-date="2070-01-01"
+      @close="closePicker"
+      @choose="choose">
+    </nut-calendar>
 
     <view v-if="data.length > 0">
       <view v-if="tabValue === 1">
@@ -143,7 +173,7 @@ const getList = async () => {
           <view class="left">
             <view>订单号: {{ item.oid }}</view>
             <text class="jf">{{
-              dayjs(item.add_time).format("YYYY/MM/DD mm:ss")
+              dayjs(item.add_time).format('YYYY/MM/DD mm:ss')
             }}</text>
           </view>
           <view class="right">
@@ -205,11 +235,11 @@ const getList = async () => {
         </view>
       </view>
       <nut-pagination
+        class="mt-3"
         v-model="page.PageNum"
         :total-items="page.ItemCount"
         :items-per-page="page.PageSize"
-        @change="pageChange"
+        @change="pageChange" />
-      />
     </view>
     <nut-empty v-else description="暂无明细"></nut-empty>
   </view>
@@ -222,95 +252,46 @@ const getList = async () => {
   transform: translateX(-50%);
 }
 
-.card {
-  width: 90%;
-  border-radius: 20px;
-  background-color: #282828;
-  margin: 10px auto;
-  color: #d0a568;
-  padding: 20px;
-
-  .info {
-    .left {
-      height: 200px;
-      text-align: left;
-      margin-left: 50px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      .num {
-        font-weight: bold;
-        margin-top: 10px;
-      }
-    }
-  }
-}
-
 .tabs-box {
   display: flex;
-  flex-direction: row;
-  // justify-content: space-evenly;
   align-items: center;
-  height: auto;
   background-color: #fff;
-  padding: 0 10px;
   text-align: center;
-  overflow-x: auto;
+  flex-wrap: wrap;
+  padding: 15px;
+  justify-content: space-evenly;
 
-  &::-webkit-scrollbar {
+  .item {
-    width: 0;
+    padding: 10px 20px;
-    height: 0;
+    font-size: 23px;
-  }
+    border-radius: 10px;
-
-  view {
-    width: 200px;
-  }
-
-  .text {
-    margin: 10px 0;
-    align-items: center;
-    font-size: large;
-  }
-
-  .line {
-    margin: 0 auto;
-    width: 100px;
-    height: 5px;
-    border-radius: 30px;
-    transition: all 0.3s ease-in-out;
-  }
-
-  .lineColor {
-    background-color: #ff0000;
   }
 }
 
 .card-list {
-  margin: 10px 20px;
+  // margin: 10px 20px;
   background-color: #fff;
   display: flex;
   border-radius: 10px;
   padding: 20px;
   justify-content: space-between;
   align-items: center;
+  font-size: 25px;
 
   .jf {
-    color: #8a8a8a;
+    color: #484848;
   }
 
   .left {
     .text {
       text-align: left;
       font-weight: bolder;
-      // 超出一行隐藏
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
       overflow: hidden;
       word-break: break-word;
       color: #484848;
-      font-size: large;
     }
   }
 

src/pages/users/order_list/index.config.ts

@@ -1,3 +1,4 @@
 export default definePageConfig({
   navigationBarTitleText: "我的订单",
+  enablePullDownRefresh: true,
 });

src/pages/users/order_list/index.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import {ref} from 'vue';
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import Pay from "@/components/Pay.vue";
+import Pay from '@/components/Pay.vue';
-import { getActiveOrderList, deleteActiveOrder } from "@/api/goods";
+import {getActiveOrderList, deleteActiveOrder} from '@/api/goods';
-import { getOrderStatistics } from "@/api/order";
+import {getOrderStatistics} from '@/api/order';
-import { getUserPoint } from "@/api/admin";
+import {getUserPoint} from '@/api/admin';
 
 const tabValue = ref(0);
 
@@ -12,27 +12,27 @@ const isShowPay = ref(false);
 
 const tabsList = ref([
   {
-    title: "全部",
+    title: '全部',
     value: 0,
     num: 0,
   },
   {
-    title: "待付款",
+    title: '待付款',
     value: 1,
     num: 0,
   },
   {
-    title: "待使用",
+    title: '待使用',
     value: 2,
     num: 0,
   },
   {
-    title: "已使用",
+    title: '已使用',
     value: 3,
     num: 0,
   },
   {
-    title: "已失效",
+    title: '已失效',
     value: 4,
     num: 0,
   },
@@ -70,7 +70,7 @@ interface GoodsItem {
 
 const orderList = ref<OrderList[]>([]);
 
-Taro.useLoad((options) => {
+Taro.useLoad(options => {
   tabValue.value = Number(options.type);
 });
 
@@ -78,6 +78,12 @@ Taro.useDidShow(() => {
   getList();
 });
 
+// Taro.startPullDownRefresh({
+//   success: () => {
+//     getList();
+//   },
+// });
+
 const getList = async () => {
   try {
     const res = await getActiveOrderList({
@@ -87,10 +93,11 @@ const getList = async () => {
   } catch (error) {
     Taro.showToast({
       title: error.msg,
-      icon: "none",
+      icon: 'none',
     });
   }
-  await getTj();
+  // await getTj();
+  // Taro.stopPullDownRefresh();
 };
 
 const tabChange = (index: number) => {
@@ -100,7 +107,7 @@ const tabChange = (index: number) => {
 
 const openPay = async (item: OrderList) => {
   isShowPay.value = true;
-  const user_info = Taro.getStorageSync("userInfo");
+  const user_info = Taro.getStorageSync('userInfo');
   const data = await getUserPoint({
     phone: user_info.data.phone,
     bid: item.Store.bid,
@@ -114,8 +121,8 @@ const openPay = async (item: OrderList) => {
 const errPay = () => {
   isShowPay.value = false;
   Taro.showToast({
-    title: "支付失败",
+    title: '支付失败',
-    icon: "none",
+    icon: 'none',
   });
   jfInfo.value = {};
   getList();
@@ -123,8 +130,8 @@ const errPay = () => {
 const closePay = () => {
   isShowPay.value = false;
   Taro.showToast({
-    title: "支付取消",
+    title: '支付取消',
-    icon: "none",
+    icon: 'none',
   });
   jfInfo.value = {};
   getList();
@@ -137,9 +144,8 @@ const successPay = () => {
 };
 
 const toDetail = (item: any) => {
-  Taro.setStorageSync("item", item);
   Taro.navigateTo({
-    url: `/pages/users/order_list_detail/index?orderId=${item.oid}`,
+    url: `/pages/users/order_list_detail/index?orderId=${item.joint_oid}`,
   });
 };
 
@@ -149,7 +155,7 @@ const delOrder = async (oid: string) => {
   } catch (error) {
     Taro.showToast({
       title: error.msg,
-      icon: "none",
+      icon: 'none',
     });
   }
   await getList();
@@ -179,7 +185,7 @@ const getTj = async () => {
   } catch (error) {
     Taro.showToast({
       title: error.msg,
-      icon: "none",
+      icon: 'none',
     });
   }
 };
@@ -187,7 +193,7 @@ const getTj = async () => {
 
 <template>
   <view>
-    <view class="topTips">
+    <!-- <view class="topTips">
       <view>
         <view style="font-weight: bold">订单信息</view>
         <view style="font-size: 15px"
@@ -198,34 +204,50 @@ const getTj = async () => {
         </view>
       </view>
       <image src="../static/user/order_list_top.png" />
-    </view>
+    </view> -->
     <view class="tabs-box">
       <view
         v-for="item in tabsList"
         :key="item.value"
-        @click="tabChange(item.value)"
+        @click="tabChange(item.value)">
-      >
-        <view class="text">{{ item.title }}</view>
-        <view>{{ item.num }}</view>
         <view
-          class="line"
+          class="text"
-          :class="{ lineColor: item.value === tabValue }"
+          :style="{
-        ></view>
+            color: tabValue === item.value ? '#000' : '#9C9C9C',
+          }"
+          >{{ item.title }}</view
+        >
+        <!-- <view>{{ item.num }}</view> -->
+        <view class="line" :class="{lineColor: item.value === tabValue}"></view>
       </view>
     </view>
     <view v-if="orderList.length > 0">
-      <view class="order-card" v-for="(item, index) in orderList" :key="index">
+      <view
+        class="order-card"
+        v-for="(item, index) in orderList"
+        :key="index"
+        @click="toDetail(item)">
         <view class="top">
-          <view>{{ item.add_time.slice(0, 19) }}</view>
+          <view class="text-[#9C9C9C] text-[25px]">订单号：{{ item.oid }}</view>
-          <view style="color: red"
+          <view
+            :style="{
+              color:
+                item.status === 0
+                  ? '#FF850A'
+                  : item.status === 1
+                  ? '#F83D3D'
+                  : item.status === 2
+                  ? '#333333'
+                  : '#9C9C9C',
+            }"
             >{{
               item.status === 0
-                ? "待付款"
+                ? '待付款'
                 : item.status === 1
-                ? "待使用"
+                ? '待使用'
                 : item.status === 2
-                ? "已使用"
+                ? '已使用'
-                : "已失效"
+                : '已失效'
             }}
           </view>
         </view>
@@ -233,43 +255,50 @@ const getTj = async () => {
         <view class="center" v-for="(itm, idx) in item.OrderGoods" :key="idx">
           <view class="top">
             <image :src="itm.Goods.cover" />
+            <view class="flex flex-col justify-between flex-1">
               <view class="title">{{ itm.Goods?.name }}</view>
-            <view class="right">
+              <view class="text-[#F83D3D] mt-5">
                 <view>{{ itm.pay_price }}元</view>
                 <view>{{ itm.pay_integral }}积分</view>
+              </view>
+            </view>
+            <view class="right">
               <view>x{{ itm.number }}</view>
             </view>
           </view>
         </view>
-        <view class="line"></view>
+        <!-- <view class="line"></view> -->
-        <view v-if="item.status !== 0" style="text-align: right">
+        <view
-          <text>共{{ item.count }}件商品</text>,
+          class="flex justify-between items-center mt-2 mb-2 text-[25px]"
+          v-if="item.status !== 0"
+          style="text-align: right">
+          <text class="text-[#9C9C9C]">共{{ item.count }}件商品</text>
           <text
-            >实付款:{{ item.pay_type === 1 ? item.price : item.exchange }},{{
+            >{{ item.status !== 0 ? '实' : '应' }}付款{{
-              item.pay_type === 1 ? "微信支付" : "积分支付"
+              item.pay_type === 1 ? '(元): ' : '(积分): '
-            }}</text
+            }}{{ item.pay_type === 1 ? item.price : item.exchange }}</text
           >
-          <view class="line"></view>
+          <!-- <view class="line"></view> -->
         </view>
         <view class="btn">
           <nut-button
             v-if="item.status === 0"
             plain
-            size="small"
+            size="mini"
             type="primary"
             @click="delOrder(item.oid)"
             >取消订单
           </nut-button>
-          <nut-button
+          <!-- <nut-button
             style="margin-left: 5px"
-            size="small"
+            size="mini"
             type="primary"
             @click="toDetail(item)"
             >查看详情
-          </nut-button>
+          </nut-button> -->
           <nut-button
             style="margin-left: 5px"
-            size="small"
+            size="mini"
             type="primary"
             v-if="item.status === 0"
             @click="openPay(item)"
@@ -286,8 +315,7 @@ const getTj = async () => {
       :OrderType="2"
       @errPay="errPay"
       @successPay="successPay"
-      @closePay="closePay"
+      @closePay="closePay" />
-    />
   </view>
 </template>
 
@@ -309,8 +337,8 @@ page {
   align-items: center;
 
   image {
-    width: 150px;
+    width: 200px;
-    height: 150px;
+    height: 200px;
   }
 }
 
@@ -319,20 +347,20 @@ page {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  height: auto;
   background-color: #fff;
-  padding: 0 20px;
+  padding: 20px 20px 0 20px;
   text-align: center;
 
   .text {
-    margin: 10px 20px;
+    // margin: 10px 20px;
     align-items: center;
+    font-size: 25px;
   }
 
   .line {
-    margin: 0 auto;
+    margin: 10px auto;
     width: 50px;
-    height: 5px;
+    height: 10px;
     border-radius: 30px;
     transition: all 0.3s ease-in-out;
   }
@@ -370,20 +398,20 @@ page {
   }
 
   .center {
-    margin-bottom: 10px;
+    // margin-bottom: 10px;
     .top {
       display: flex;
-      justify-content: space-between;
+      // justify-content: space-between;
-      // align-items: flex-start;
+      align-items: flex-start;
 
       image {
-        width: 150rpx;
+        width: 150px;
-        height: 150rpx;
+        height: 150px;
-        border-radius: 10rpx;
+        border-radius: 15px;
+        margin-right: 10px;
       }
 
       .title {
-        margin-left: 10px;
         display: -webkit-box;
         overflow: hidden;
         -webkit-line-clamp: 2;
@@ -396,6 +424,7 @@ page {
         margin-left: 10px;
         font-size: 28px;
         text-align: right;
+        color: #9c9c9c;
       }
     }
   }

src/pages/users/order_list_detail/index.vue

@@ -1,79 +1,142 @@
 <template>
-  <view>
+  <view class="p-4">
     <!--    步骤条    -->
-    <view class="step-bar">
+    <!-- <view class="step-bar">
       <view
         class="item"
         v-for="item in statusList"
         :key="item.id"
-        :class="{ activation: item.id === goodInfo.status }"
+        :class="{activation: item.id === goodInfo.status}">
-      >
         <view class="text">{{ item.text }}</view>
         <view class="dot"></view>
       </view>
-    </view>
+    </view> -->
-    <view v-if="goodInfo.status === 1" class="timeBox">
+    <!-- <view v-if="goodInfo.status === 1" class="timeBox">
       订单剩余{{ timeStr }}过期,请尽快核销！
+    </view> -->
+    <view class="mb-3">
+      <view v-if="goodInfo.status === 0">
+        <view class="flex text-[#333333] items-center mb-1">
+          <view class="font-bold">订单待付款</view>
+          <IconFont name="rect-right" size="15" color="#333333"></IconFont>
+        </view>
+        <view class="text-[#9C9C9C] text-[20px]">订单未支付，请付款</view>
+      </view>
+      <view v-if="goodInfo.status === 1">
+        <view class="flex text-[#333333] items-center mb-1">
+          <view class="font-bold">订单待使用</view>
+          <IconFont name="rect-right" size="15" color="#333333"></IconFont>
+        </view>
+        <view class="text-[#9C9C9C] text-[20px]"
+          >订单剩余<text class="text-[#FF0000]">{{ timeStr }}</text
+          >过期，请尽快核销！</view
+        >
+      </view>
+      <view v-if="goodInfo.status === 2">
+        <view class="flex text-[#333333] items-center mb-1">
+          <view class="font-bold">订单已使用</view>
+          <IconFont name="rect-right" size="15" color="#333333"></IconFont>
+        </view>
+        <view class="text-[#9C9C9C] text-[20px]">订单已核销，欢迎下次光临</view>
+      </view>
+      <view v-if="goodInfo.status === 3">
+        <view class="flex text-[#333333] items-center mb-1">
+          <view class="font-bold">订单失效</view>
+          <IconFont name="rect-right" size="15" color="#333333"></IconFont>
+        </view>
+        <view class="text-[#9C9C9C] text-[20px]">未核销，已失效</view>
+      </view>
     </view>
     <!--    商家信息    -->
     <view class="mer-info">
-      <view class="left">
+      <image
-        <view>
+        class="w-[150px] h-[150px] rounded-lg mr-2"
-          <text>{{ goodInfo.Store?.name }}</text>
+        :src="goodInfo.Store?.head_photo" />
-          <text>{{ goodInfo.Store?.phone }}</text>
-        </view>
-        <nut-ellipsis
-          :rows="2"
-          :content="goodInfo.Store?.address"
-          direction="end"
-        ></nut-ellipsis>
-      </view>
       <view class="right">
-        <view class="icon" @click="toPhone">
+        <view class="text-[#333333]">{{ goodInfo.Store?.name }}</view>
-          <Service />
+        <view
-          <text>电话</text>
+          class="flex mt-2 items-center text-[#999999] text-[23px] text-ellipsis line-clamp-3">
+          <view
+            style="font-size: 15px"
+            class="iconfont icon-dizhi text-[#C4C4C4]"></view>
+          <view>{{ goodInfo.Store?.address }}</view>
+        </view>
+        <view class="w-full flex items-center justify-between mt-1">
+          <view class="ml-3 text-[23px] text-[#999999]"
+            >距离您{{
+              calculateDistance(
+                userLocalNum.t,
+                userLocalNum.l,
+                Number(goodInfo.Store?.lat),
+                Number(goodInfo.Store?.lon),
+              )
+            }}
+          </view>
+          <view class="flex items-center">
+            <image
+              @tap="toPhone()"
+              class="w-[50px] h-[50px]"
+              src="http://p0.meituan.net/csc/ab0493b124a6bb858bf82a2340767c0d919.png" />
+            <image
+              @tap="toAdder()"
+              class="w-[50px] h-[50px] ml-2"
+              src="http://p1.meituan.net/csc/92ee8512c90527169b44e07fd11d250d924.png" />
           </view>
-        <view class="icon" @click="toAdder">
-          <Find />
-          <text>导航</text>
         </view>
       </view>
     </view>
 
     <!--    订单信息    -->
     <nut-cell-group>
-      <nut-cell :title="`共${goodInfo.count}件商品`"></nut-cell>
       <nut-cell>
         <template #default>
           <view class="center-box">
             <view
               class="top"
               v-for="(item, index) in goodInfo.OrderGoods"
-              :key="index"
+              :key="index">
-            >
               <image :src="item.Goods?.cover" />
+              <view class="flex flex-col justify-between flex-1">
                 <view class="title">{{ item.Goods?.name }}</view>
-              <view class="right">
+                <view class="text-[#F83D3D] mt-5">
                   <view>{{ item.pay_price }}元</view>
                   <view>{{ item.pay_integral }}积分</view>
+                </view>
+              </view>
+              <view class="right">
                 <view>x{{ item.number }}</view>
               </view>
             </view>
+            <view
+              class="flex justify-between items-center mt-2 mb-2 text-[25px]">
+              <view class="text-[#9C9C9C]">{{
+                `共${goodInfo.count}件商品`
+              }}</view>
+              <text
+                >{{ goodInfo.status !== 0 ? '实' : '应' }}付款{{
+                  goodInfo.pay_type === 1 ? '(元): ' : '(积分): '
+                }}{{
+                  goodInfo.pay_type === 1 ? goodInfo.price : goodInfo.exchange
+                }}</text
+              >
+            </view>
           </view>
         </template>
       </nut-cell>
+    </nut-cell-group>
+    <nut-cell-group>
       <nut-cell title="订单号:" :desc="goodInfo.oid"></nut-cell>
       <nut-cell
         title="下单时间:"
-        :desc="goodInfo.add_time?.slice(0, 19)"
+        :desc="goodInfo.add_time?.slice(0, 19)"></nut-cell>
-      ></nut-cell>
+      <!-- <nut-cell
-      <nut-cell
         v-if="goodInfo.expires !== 0"
         title="订单过期时间:"
-        :desc="dayjs.unix(goodInfo.expires).format('YYYY-MM-DD HH:mm:ss')"
+        :desc="
-      ></nut-cell>
+          dayjs.unix(goodInfo.expires).format('YYYY-MM-DD HH:mm:ss')
+        "></nut-cell> -->
       <nut-cell
-        title="支付状态:"
+        title="订单状态:"
         :desc="
           goodInfo.status === 0
             ? '待付款'
@@ -82,38 +145,36 @@
             : goodInfo.status === 2
             ? '已使用'
             : '已失效'
-        "
+        "></nut-cell>
-      ></nut-cell>
-      <!-- <nut-cell
-        :title="`商品总价(${type === '1' ? '元' : '积分'}):`"
-        :desc="goodInfo.number"
-      >
-      </nut-cell> -->
-      <nut-cell v-if="goodInfo.status !== 0">
-        <template #default>
-          <view style="text-align: right; width: 100%">
-            <view
-              >实付款({{ goodInfo.pay_type === 1 ? "微信" : "积分" }})
-              <nut-price
-                :price="
-                  goodInfo.pay_type === 1 ? goodInfo.price : goodInfo.exchange
-                "
-                size="normal"
-                :need-symbol="false"
-              />
-            </view>
-          </view>
-        </template>
-      </nut-cell>
     </nut-cell-group>
-    <view class="btn">
+
-      <!-- <nut-button
+    <view class="mt-[30px] m-auto">
+      <nut-button
+        v-if="goodInfo.status === 0"
+        shape="square"
+        type="primary"
+        block
+        @click="openPay()"
+        >继续付款</nut-button
+      >
+      <nut-button
+        v-if="goodInfo.status === 1"
+        shape="square"
+        type="primary"
+        block
+        @click="openCode()"
+        >出示核销码</nut-button
+      >
+    </view>
+
+    <!-- <view class="btn">
+      <nut-button
                 plain
                 v-if="goodInfo.status === 0"
                 size="small"
                 type="primary"
                 >取消订单
-            </nut-button> -->
+            </nut-button>
       <nut-button
         v-if="goodInfo.status === 0"
         style="margin-left: 5px"
@@ -130,19 +191,19 @@
         @click="openCode()"
         >出示核销码
       </nut-button>
-    </view>
+    </view> -->
 
     <!-- 核销码弹窗 -->
     <nut-popup
       v-model:visible="isShowCode"
-      position="bottom"
+      position="center"
-      :style="{ height: 'auto' }"
+      style="padding: 20px; border-radius: 15px"
       :maskClosable="true"
       safe-area-inset-bottom
-      @closed="closed"
+      @click-overlay="closed"
-    >
+      @closed="closed">
       <view class="code-box">
-        <view>请出示核销码核销</view>
+        <view>核销码</view>
         <image class="qrcode" :src="url"></image>
       </view>
     </nut-popup>
@@ -153,58 +214,70 @@
       :OrderType="2"
       @errPay="errPay"
       @successPay="successPay"
-      @closePay="closePay"
+      @closePay="closePay" />
-    />
   </view>
 </template>
 
 <script setup lang="ts">
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import { Find, Service } from "@nutui/icons-vue-taro";
+import {onUnmounted, ref} from 'vue';
-import { ref } from "vue";
+import dayjs from 'dayjs';
-import dayjs from "dayjs";
+import duration from 'dayjs/plugin/duration';
-import duration from "dayjs/plugin/duration";
+import Pay from '@/components/Pay.vue';
-import Pay from "@/components/Pay.vue";
+import {getUserPoint} from '@/api/admin';
-import { getUserPoint } from "@/api/admin";
+import {calculateDistance} from '@/utils';
+import {IconFont} from '@nutui/icons-vue-taro';
+import {getActiveOrderDetail} from '@/api/goods';
 
 dayjs.extend(duration);
 
 const goodInfo = ref<any>({});
 
-const statusList = ref([
+const userLocalNum = ref({
-  {
+  l: 0,
-    id: 0,
+  t: 0,
-    text: "待付款",
+});
-  },
-  {
-    id: 1,
-    text: "待使用",
-  },
-  {
-    id: 2,
-    text: "已使用",
-  },
-  {
-    id: 3,
-    text: "已失效",
-  },
-]);
 
 const isShowCode = ref(false);
 const isShowPay = ref(false);
 const jfInfo = ref<any>({});
 
-const type = ref("");
+const type = ref('');
 
-const url = ref("");
+const url = ref('');
 
-Taro.useLoad((options) => {
+const oid = ref('');
+
+Taro.useLoad(options => {
   type.value = options.type;
-  goodInfo.value = Taro.getStorageSync("item");
+  oid.value = options.orderId;
+  Taro.getLocation({
+    type: 'wgs84',
+    success: res => {
+      userLocalNum.value.l = res.longitude;
+      userLocalNum.value.t = res.latitude;
+    },
+  });
+  // goodInfo.value = Taro.getStorageSync('item');
+  getOrderDetail();
+});
+
+const getOrderDetail = async () => {
+  const res = await getActiveOrderDetail({
+    oid: oid.value,
+  });
+  goodInfo.value = res.data.data;
   if (goodInfo.value.status === 1) {
     startTime();
   }
+
+  if (goodInfo.value.status === 2 && isShowCode.value) {
+    Taro.showToast({
+      title: '订单核销完成',
+      icon: 'none',
     });
+  }
+};
 
 const toPhone = () => {
   Taro.makePhoneCall({
@@ -222,23 +295,23 @@ const toAdder = () => {
 
 const openPay = async () => {
   isShowPay.value = true;
-  const mer_info = Taro.getStorageSync("mer_info");
+  const mer_info = Taro.getStorageSync('mer_info');
-  const user_info = Taro.getStorageSync("userInfo");
+  const user_info = Taro.getStorageSync('userInfo');
   const data = await getUserPoint({
     phone: user_info.data.phone,
     bid: mer_info.bid,
   });
   jfInfo.value = {
     jh_info: data.data,
-    oid: Taro.getStorageSync("item").oid,
+    oid: Taro.getStorageSync('item').oid,
   };
 };
 
 const successPay = (val: boolean) => {
   isShowPay.value = val;
   Taro.showToast({
-    title: "支付成功",
+    title: '支付成功',
-    icon: "none",
+    icon: 'none',
   });
   Taro.navigateBack({
     delta: 1,
@@ -248,33 +321,40 @@ const successPay = (val: boolean) => {
 const errPay = () => {
   isShowPay.value = false;
   Taro.showToast({
-    title: "支付失败",
+    title: '支付失败',
-    icon: "none",
+    icon: 'none',
   });
   jfInfo.value = {};
 };
 const closePay = () => {
   isShowPay.value = false;
   Taro.showToast({
-    title: "支付取消",
+    title: '支付取消',
-    icon: "none",
+    icon: 'none',
   });
   jfInfo.value = {};
 };
 
+const t_id = ref();
+
 const openCode = () => {
   url.value = `https://api.pwmqr.com/qrcode/create?url=${goodInfo.value.oid}`;
   isShowCode.value = true;
+  if (goodInfo.value.status === 2) return;
+  t_id.value = setInterval(() => {
+    getOrderDetail();
+  }, 1000);
 };
 
 const closed = () => {
   isShowCode.value = false;
-  url.value = "";
+  url.value = '';
+  clearInterval(t_id.value);
 };
 
 let timeId: any;
 
-const timeStr = ref("????");
+const timeStr = ref('????');
 
 const startTime = () => {
   const nowTime = dayjs();
@@ -284,10 +364,10 @@ const startTime = () => {
   const duration = dayjs.duration(endTime.diff(nowTime));
 
   // 格式化剩余时间
-  timeStr.value = duration.format("D天H小时m分钟s秒");
+  timeStr.value = duration.format('D天H小时m分钟s秒');
 
   if (goodInfo.value.expires - dayjs().unix() > 0) {
-    clearInterval(timeId);
+    clearTimeout(timeId);
     timeId = setTimeout(() => {
       startTime();
     }, 1000);
@@ -296,6 +376,17 @@ const startTime = () => {
 
 Taro.useUnload(() => {
   clearTimeout(timeId);
+  clearInterval(t_id.value);
+});
+
+Taro.useDidHide(() => {
+  clearTimeout(timeId);
+  clearInterval(t_id.value);
+});
+
+onUnmounted(() => {
+  clearTimeout(timeId);
+  clearInterval(t_id.value);
 });
 </script>
 
@@ -349,7 +440,7 @@ page {
       position: relative;
 
       &::before {
-        content: "";
+        content: '';
         width: 15px;
         height: 15px;
         border-radius: 50%;
@@ -365,43 +456,20 @@ page {
 
 .mer-info {
   background-color: white;
-  padding: 20px 30px;
+  padding: 15px;
   margin-top: 10px;
-  width: 100%;
   box-sizing: border-box;
   display: flex;
-  justify-content: space-between;
+  justify-content: space-betweenhh;
   align-items: center;
-
+  border-radius: 15px;
-  .left {
-    width: 50%;
-
-    text {
-      margin-right: 10px;
-    }
-
-    .address {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      display: -webkit-box;
-      -webkit-line-clamp: 1;
-    }
-  }
 
   .right {
     color: #858585;
-    text-align: center;
     display: flex;
     flex-direction: column;
-    height: 120px;
     justify-content: space-between;
-
+    width: 70%;
-    .icon {
-      display: flex;
-      align-items: center;
-      //margin-bottom: 20px;
-    }
   }
 }
 
@@ -435,6 +503,7 @@ page {
       width: 150px;
       height: 150px;
       border-radius: 10rpx;
+      margin-right: 10px;
     }
 
     .title {
@@ -466,4 +535,8 @@ page {
   width: 300px;
   height: 300px;
 }
+
+.nut-button {
+  border-radius: 20px;
+}
 </style>

src/pages/users/pending_order/index.scss

@@ -21,7 +21,8 @@ page {
 .tabs {
   display: flex;
   justify-content: space-between;
-  margin: 20px 30px;
+  padding: 20px;
+  background-color: #ffffff;
 
   .item {
     display: flex;
@@ -71,8 +72,8 @@ page {
     margin: 20px;
 
     image {
-      width: 195px;
+      width: 150px;
-      height: 195px;
+      height: 150px;
       border-radius: 12px;
     }
 

src/pages/users/pending_order/index.vue

@@ -17,21 +17,18 @@
         class="item"
         v-for="item in tabs"
         :key="item.value"
-        @click="changeTabs(item.value)"
+        @click="changeTabs(item.value)">
-      >
         <text>{{ item.text }}</text>
         <view
           class="line"
-          :class="tabsIndex == item.value ? 'active' : ''"
+          :class="tabsIndex == item.value ? 'active' : ''"></view>
-        ></view>
       </view>
     </view>
     <view v-if="listData.length > 0">
       <view
         class="card"
         v-for="(item, index) in (listData as any[])"
-        :key="index"
+        :key="index">
-      >
         <view class="header">
           <view>
             <text>台号: {{ item.seat }}</text>
@@ -50,11 +47,12 @@
           <view
             class="goods-list"
             v-for="(itm, idx) in item.OrderGoods"
-            :key="idx"
+            :key="idx">
-          >
             <image :src="itm.Goods.cover"></image>
             <view class="center">
-              <nut-ellipsis direction="end" :content="itm.Goods.name"></nut-ellipsis>
+              <nut-ellipsis
+                direction="end"
+                :content="itm.Goods.name"></nut-ellipsis>
               <!-- <view class="title">{{ itm.Goods.name }}</view> -->
             </view>
             <view class="num">
@@ -76,29 +74,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import {ref} from 'vue';
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import { getUserAfterOrderList } from "../../../api/user";
+import {getUserAfterOrderList} from '../../../api/user';
 
 const tabsIndex = ref(0);
 
-const listData = ref([]);
+const listData = ref<any[]>([]);
 
 const tabs = ref([
   {
-    text: "全部",
+    text: '全部',
     value: 0,
   },
   {
-    text: "未付款",
+    text: '未付款',
     value: 1,
   },
   {
-    text: "挂帐中",
+    text: '挂帐中',
     value: 3,
   },
   {
-    text: "已收款",
+    text: '已收款',
     value: 2,
   },
 ]);
@@ -112,48 +110,66 @@ const changeTabs = (index: number) => {
   get_list();
 };
 
+const pageOpt = ref({
+  page: 1,
+  total: 0,
+});
+
 const get_list = async () => {
   Taro.showLoading({
-    title: "加载中",
+    title: '加载中',
   });
-  const user_info = await Taro.getStorageSync("userInfo");
+  const user_info = await Taro.getStorageSync('userInfo');
   const {data: res} = await getUserAfterOrderList({
     phone: user_info.data.phone,
     status: tabsIndex.value,
+    PageNum: pageOpt.value.page,
+    PageSize: 10,
   });
-  listData.value = res.data || [];
+  listData.value.push(...res.data);
+  pageOpt.value.total = res.total || 0;
   Taro.hideLoading();
 };
 
 const get_color = (status: number) => {
   switch (status) {
     case 0:
-      return "#FD0100";
+      return '#FD0100';
     case 1:
-      return "#03A113";
+      return '#03A113';
     case 2:
-      return "#FFA938";
+      return '#FFA938';
   }
 };
 
 const get_status_text = (status: number) => {
   switch (status) {
     case 0:
-      return "未付款";
+      return '未付款';
     case 1:
-      return "已付款";
+      return '已付款';
     case 2:
-      return "挂帐中";
+      return '挂帐中';
   }
 };
 
-const to_page = (item) => {
+const to_page = item => {
   Taro.navigateTo({
     url: `/pages/users/pending_order/pending_order_detail/index?bid=${item.bid}&oid=${item.oid}`,
   });
 };
+
+Taro.useReachBottom(() => {
+  if (pageOpt.value.total === listData.value.length)
+    return Taro.showToast({
+      title: '没有更多数据了',
+      icon: 'none',
+    });
+  pageOpt.value.page++;
+  get_list();
+});
 </script>
 
 <style lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>

src/pages/users/setting/index.vue

@@ -1,12 +1,37 @@
 <script lang="ts" setup>
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
 
 const toPage = (url: string) => {
-  if (url === "1") return Taro.showToast({ title: "暂未开放", icon: "none" });
+  if (url === '1') return Taro.showToast({title: '暂未开放', icon: 'none'});
   Taro.navigateTo({
     url: url,
   });
 };
+
+const logOut = () => {
+  Taro.showModal({
+    title: '提示',
+    content: '确定退出登录吗？',
+    success: function (res) {
+      if (res.confirm) {
+        Taro.removeStorageSync('token');
+        Taro.removeStorageSync('userInfo');
+        Taro.removeStorageSync('mer_type');
+        Taro.reLaunch({
+          url: '/pages/index/index',
+        });
+      } else if (res.cancel) {
+        console.log('用户点击取消');
+      }
+    },
+  });
+};
+
+const clickText = (type: number, text: string) => {
+  Taro.navigateTo({
+    url: `/pages/users/user_agreement/index?type=${type}&name=${text}`,
+  });
+};
 </script>
 
 <template>
@@ -15,13 +40,24 @@ const toPage = (url: string) => {
       <nut-cell
         title="个人信息"
         is-link
-        @click="toPage('/pages/users/user_setting/index')"
+        @click="toPage('/pages/users/user_setting/index')"></nut-cell>
-      ></nut-cell>
+      <nut-cell title="服务协议" is-link @click="clickText(1, '用户协议')"></nut-cell>
-      <!-- <nut-cell title="关于我们" is-link @click="toPage('1')"></nut-cell>
+      <nut-cell title="隐私政策协议" is-link @click="clickText(2, '隐私政策')"></nut-cell>
-      <nut-cell title="资质证明" is-link @click="toPage('1')"></nut-cell>
+      <nut-cell
-      <nut-cell title="协议规则" is-link @click="toPage('1')"></nut-cell>
+        title="平台积分使用规则"
-      <nut-cell title="隐私设置" is-link @click="toPage('1')"></nut-cell> -->
+        is-link
+        @click="clickText(3, '积分使用规则')"></nut-cell>
     </nut-cell-group>
+    <view class="w-[90%] m-auto">
+      <nut-button
+        block
+        type="primary"
+        shape="square"
+        style="border-radius: 10px"
+        @click="logOut"
+        >退出登录</nut-button
+      >
+    </view>
   </view>
 </template>
 

src/pages/users/user_setting/index.vue

@@ -1,45 +1,25 @@
 <script lang="ts" setup>
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
-import { ref } from "vue";
+import {ref} from 'vue';
-import { editPersonalInfo } from "@/api/user";
+import {editPersonalInfo} from '@/api/user';
-import { View } from "@tarojs/components";
+import {BASE_URL} from '@/utils/request';
-import { BASE_URL } from "@/utils/request";
 
 // const toPage = (e: string) => {};
 
 const userInfo = ref<any>({});
 
 Taro.useLoad(() => {
-  const { data: data } = Taro.getStorageSync("userInfo");
+  const {data: data} = Taro.getStorageSync('userInfo');
   userInfo.value = data;
 });
 
-const logOut = () => {
-  Taro.showModal({
-    title: "提示",
-    content: "确定退出登录吗？",
-    success: function (res) {
-      if (res.confirm) {
-        Taro.removeStorageSync("token");
-        Taro.removeStorageSync("userInfo");
-        Taro.removeStorageSync("mer_type");
-        Taro.reLaunch({
-          url: "/pages/index/index",
-        });
-      } else if (res.cancel) {
-        console.log("用户点击取消");
-      }
-    },
-  });
-};
-
 const chooseavatar = (e: any) => {
   Taro.uploadFile({
     url: `${BASE_URL}/upload`,
     filePath: e.detail.avatarUrl,
-    name: "file",
+    name: 'file',
     header: {
-      token: Taro.getStorageSync("token"),
+      token: Taro.getStorageSync('token'),
     },
     success: function (res) {
       const data = JSON.parse(res.data);
@@ -53,65 +33,48 @@ const subUser = async () => {
     const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
     if (!reg.test(userInfo.value.phone))
       return Taro.showToast({
-        title: "请输入正确的手机号码",
+        title: '请输入正确的手机号码',
-        icon: "none",
+        icon: 'none',
       });
     const res = await editPersonalInfo(userInfo.value);
     Taro.showToast({
       title: res.msg,
-      icon: "none",
+      icon: 'none',
     });
     Taro.switchTab({
-      url: "/pages/user/index",
+      url: '/pages/user/index',
     });
   } catch (error) {
     Taro.showToast({
       title: error.msg,
-      icon: "none",
+      icon: 'none',
     });
   }
 };
-
-// const getUserInfo = async () => {
-//   try {
-//     const res = await getPersonalInfo();
-//     userInfo.value = res.data.data;
-//   } catch (error) {
-//     Taro.showToast({
-//       title: error.msg,
-//       icon: "none",
-//     });
-//   }
-// };
 </script>
 
 <template>
   <view class="app">
-    <view class="user-card">
+    <nut-cell-group>
-      <view>管理我的账号</view>
+      <nut-cell title="头像">
-      <!-- {{ userInfo }} -->
+        <template v-slot:link>
-      <view class="avatar-card">
+          <nut-button
-        <view class="left">
+            style="border: none; height: auto; padding: 0"
-          <nut-button open-type="chooseAvatar" @chooseavatar="chooseavatar">
+            open-type="chooseAvatar"
+            @chooseavatar="chooseavatar">
             <nut-avatar size="large">
               <img style="border-radius: 50%" :src="userInfo.avatarUrl" />
             </nut-avatar>
-          </nut-button>
+          </nut-button> </template
-
+      ></nut-cell>
-          <view class="name">{{ userInfo.nickName }}</view>
-        </view>
-      </view>
-    </view>
-    <nut-cell-group>
-      <!-- :desc="userInfo.nickName"  -->
       <nut-cell title="昵称">
         <template v-slot:link>
           <nut-input
+            type="nickname"
             v-model="userInfo.nickName"
             :border="false"
             input-align="right"
-            placeholder="请输入昵称"
+            placeholder="请输入昵称" /> </template
-          /> </template
       ></nut-cell>
       <nut-cell title="手机号码">
         <template v-slot:link>
@@ -119,27 +82,30 @@ const subUser = async () => {
             v-model="userInfo.phone"
             :border="false"
             input-align="right"
-            disabled
+            disabled />
-          />
         </template>
       </nut-cell>
-      <nut-cell title="登录密码">
+      <!-- <nut-cell title="登录密码">
         <template v-slot:link>
           <nut-input
             v-model="userInfo.password"
             :border="false"
             input-align="right"
-            placeholder="修改登录密码"
+            placeholder="修改登录密码" />
-          />
         </template>
-      </nut-cell>
+      </nut-cell> -->
-      <nut-cell title="注销账号" desc="账号注销后不能恢复" is-link> </nut-cell>
+      <nut-cell title="交易密码" desc="创建/修改交易密码" is-link> </nut-cell>
+      <!-- <nut-cell title="注销账号" desc="账号注销后不能恢复" is-link> </nut-cell> -->
     </nut-cell-group>
     <view class="btn">
-      <nut-button block @click="subUser">保存信息</nut-button>
+      <nut-button
-    </view>
+        shape="square"
-    <view class="btn">
+        style="border-radius: 10px"
-      <nut-button block type="primary" @click="logOut">退出登录</nut-button>
+        type="primary"
+        block
+        @click="subUser"
+        >保存信息</nut-button
+      >
     </view>
   </view>
 </template>

src/utils/index.ts

@@ -1,11 +1,11 @@
-import { showToast, navigateBack } from "@tarojs/taro";
+import Taro from '@tarojs/taro';
 
 // 经纬度计算距离
 export function calculateDistance(
   la1: number,
   lo1: number,
   la2: number,
-  lo2: number
+  lo2: number,
 ): any {
   var radLat1 = (la1 * Math.PI) / 180.0;
   var radLat2 = (la2 * Math.PI) / 180.0;
@@ -16,12 +16,12 @@ export function calculateDistance(
     Math.asin(
       Math.sqrt(
         Math.pow(Math.sin(a / 2), 2) +
-          Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)
+          Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2),
-      )
+      ),
     );
   s = s * 6378.137;
   s = Math.round(s * 10000) / 10000;
-  return s.toFixed(2) + "km";
+  return s.toFixed(2) + 'km';
 }
 
 // 将角度转换为弧度
@@ -36,20 +36,50 @@ interface UrlParams {
   bid?: string;
 }
 export function parseQueryString(url: string) {
-  const queryString = url.split("?")[1];
+  const queryString = url.split('?')[1];
 
   if (!queryString) {
     return {};
   }
 
-  const keyValuePairs = queryString.split("&");
+  const keyValuePairs = queryString.split('&');
 
   const result: UrlParams = {};
 
-  keyValuePairs.forEach((keyValue) => {
+  keyValuePairs.forEach(keyValue => {
-    const [key, value] = keyValue.split("=");
+    const [key, value] = keyValue.split('=');
     result[key] = decodeURIComponent(value);
   });
 
   return result;
 }
+
+// 格式化时间
+export function formatTime(time: number): string {
+  const date = new Date(time);
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hour = date.getHours();
+  const minute = date.getMinutes();
+  const second = date.getSeconds();
+
+  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+}
+
+// 字符串脱敏
+export function maskString(str: string, start: number, end: number): string {
+  const maskLength = Math.min(str.length, end) - Math.max(0, start);
+  const maskedPart = '*'.repeat(maskLength);
+  const beginning = str.slice(0, Math.max(0, start));
+  const endPart = str.slice(end);
+  return beginning + maskedPart + endPart;
+}
+
+// tips
+export function showTips(msg: string) {
+  Taro.showToast({
+    title: msg,
+    icon: 'none',
+  });
+}

src/utils/request.ts

@@ -1,4 +1,4 @@
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro';
 
 export const BASE_URL = process.env.TARO_APP_API;
 
@@ -8,15 +8,15 @@ interface Res<T> {
   msg: string;
 }
 
-type Method = "GET" | "POST" | "PUT" | "DELETE";
+type Method = 'GET' | 'POST' | 'PUT' | 'DELETE';
 
 // 忽略系统提示白名单
-const IGNORED_TIPS = ["/user/find/phone"];
+const IGNORED_TIPS = ['/user/find/phone', '/user/check/payPassword'];
 
 const request = (
   url: string,
   data: object = {},
-  method: Method = "GET"
+  method: Method = 'GET',
 ): Promise<Res<any>> => {
   return new Promise((resolve, reject) => {
     Taro.request({
@@ -24,15 +24,15 @@ const request = (
       data: data,
       method: method,
       header: {
-        "content-type": "application/json",
+        'content-type': 'application/json',
-        token: Taro.getStorageSync("token") || "",
+        token: Taro.getStorageSync('token') || '',
       },
       success: ({data}) => {
         if (data.code !== 200) {
           if (!IGNORED_TIPS.includes(url)) {
             Taro.showToast({
               title: data.msg,
-              icon: "none",
+              icon: 'none',
             });
           }
           reject(data);
@@ -40,7 +40,7 @@ const request = (
           resolve(data);
         }
       },
-      fail: (err) => {
+      fail: err => {
         reject(err);
       },
     });

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/pages/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: process.env.TARO_ENV === 'h5',
+  },
+};