添加订单详情;兑换积分不足判断

miniprogram/app.json

@@ -5,7 +5,8 @@
     "pages/sign/index",
     "pages/user/login",
     "pages/logs/logs",
-    "pages/order/index"
+    "pages/order/index",
+    "pages/order/detail"
   ],
   "window": {
     "backgroundTextStyle": "light",
@@ -14,8 +15,7 @@
     "navigationBarTextStyle": "black"
   },
   "tabBar": {
-    "list": [
+    "list": [{
-      {
         "pagePath": "pages/index/index",
         "iconPath": "assets/images/icon_home.png",
         "selectedIconPath": "assets/images/icon_home_selected.png",
@@ -40,6 +40,8 @@
     "v-button": "@vant/weapp/button/index",
     "v-tab": "@vant/weapp/tab/index",
     "v-tabs": "@vant/weapp/tabs/index",
-    "van-dialog": "@vant/weapp/dialog/index"
+    "van-dialog": "@vant/weapp/dialog/index",
+    "van-cell": "@vant/weapp/cell/index",
+    "van-cell-group": "@vant/weapp/cell-group/index"
   }
 }

miniprogram/app.less

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3795683 */
-  src: url('./assets/font/iconfont.woff') format('woff2'),
+  src: url('https://at.alicdn.com/t/c/font_3795683_hbxadrued4a.woff2?t=1676964840714') format('woff2'),
-       url('./assets/font/iconfont.woff?t=1669601953874') format('woff'),
+       url('https://at.alicdn.com/t/c/font_3795683_hbxadrued4a.woff?t=1676964840714') format('woff'),
-       url('./assets/font/iconfont.ttf?t=1669601953874') format('truetype');
+       url('https://at.alicdn.com/t/c/font_3795683_hbxadrued4a.ttf?t=1676964840714') format('truetype');
 }
 
 .iconfont {

miniprogram/config.ts

@@ -4,11 +4,11 @@ type ApplicationConfig = {
 }
 const ConfigData = {
   dev: {
-    api_url: 'http://localhost:8080',
+    api_url: 'http://192.168.10.64:8080',
     env: 'dev'
   },
   prod: {
-    api_url: 'http://localhost:8001',
+    api_url: 'http://192.168.10.64:8001',
     env: 'prod'
   }
 }

miniprogram/pages/index/index.less

@@ -154,6 +154,13 @@ image {
       width: 100px;
       padding: 0;
       line-height: 30px;
+      &.disabled{
+        background-color: #ddd;
+        color:#999;
+        &:active{
+          background-color: #ddd;
+        }
+      }
       &:active{
         background-color: rgb(233, 0, 0);
       }

miniprogram/pages/index/index.ts

@@ -11,25 +11,30 @@ Page({
       {
         image: 'https://m15.360buyimg.com/mobilecms/jfs/t1/160398/4/32302/103427/6374d1f3E5b1ecb32/a593b9982d8378cc.jpg!cr_1125x449_0_166!q70.jpg',
         url: null,
+        id:1,
       },
       {
         image: 'https://m15.360buyimg.com/mobilecms/jfs/t1/203775/20/26428/95041/637fab4dEf6a4434d/3f8770efe691537b.jpg!cr_1053x420_4_0!q70.jpg',
         url: null,
+        id:2,
       },
       {
         image: 'https://m15.360buyimg.com/mobilecms/jfs/t1/160398/4/32302/103427/6374d1f3E5b1ecb32/a593b9982d8378cc.jpg!cr_1125x449_0_166!q70.jpg',
         url: null,
+        id:3,
       },
       {
         image: 'https://m15.360buyimg.com/mobilecms/jfs/t1/203775/20/26428/95041/637fab4dEf6a4434d/3f8770efe691537b.jpg!cr_1053x420_4_0!q70.jpg',
         url: null,
+        id:4,
       }
     ],
     goodsItems: [],
     recommendItems: [],
     page: 1,
     hasMore: true,
-    pageSize: 10
+    pageSize: 10,
+    userPoint: -1,
   },
   onPullDownRefresh() {
     this.setData({
@@ -65,6 +70,11 @@ Page({
     })
   },
   onLoad() {
+    if(app.globalData.userInfo && app.globalData.userInfo.pointInfo){
+      this.setData({
+        userPoint: app.globalData.userInfo.pointInfo.totalPoint
+      })
+    }
     // 推荐商品
     queryGoodsList(2, 1, 3).then((result) => {
       wx.stopPullDownRefresh();
@@ -77,7 +87,7 @@ Page({
     this.loadGoodsList(this.data.page);
   },
   createOrder(e: any) {
-    if(!app.globalData.token){
+    if(!app.globalData.token || !app.globalData.userInfo){
       // message.toast('请先完成登录','none',()=>{
       // })
       
@@ -87,16 +97,24 @@ Page({
       return false;
     }
     const goods = e.target.dataset.data as Goods;
-    message.showLoading({ message: '兑换中...' })
+    if(goods.price > app.globalData.userInfo.pointInfo.totalPoint){
-    createOrder(goods.id).then(result => {
+      message.alert('积分不足')
-      console.log(result)
+      return;
-      // 更新用户信息
+    }
-      app.updateUserInfo();
+    message.confirm('确认兑换此商品吗?').then(b=>{
-      message.toast('兑换成功')
+      if(b){
-    }).catch(e => {
+        message.showLoading({ message: '兑换中...' })
-      message.toast(e.message || '兑换失败')
+        createOrder(goods.id).then(result => {
-    }).finally(() => {
+          console.log(result)
-      message.hideLoading()
+          // 更新用户信息
+          app.updateUserInfo();
+          message.toast('兑换成功')
+        }).catch(e => {
+          message.toast(e.message || '兑换失败')
+        }).finally(() => {
+          message.hideLoading()
+        })
+      }
     })
     return;
   }

miniprogram/pages/index/index.wxml

@@ -4,7 +4,7 @@
   <view class="content-wrapper">
     <view class="top-swiper">
       <swiper indicator-dots="{{true}}" indicator-color="#fff" autoplay="{{true}}">
-        <block wx:for="{{swiperList}}" wx:key="*this">
+        <block wx:for="{{swiperList}}" wx:key="id">
           <swiper-item>
             <view class="swiper-item">
               <image src="{{item.image}}" />
@@ -68,7 +68,8 @@
                     <text>{{item.price}}积分</text>
                   </view>
                   <view class="actions">
-                    <button data-data="{{item}}" bindtap="createOrder">立即兑换</button>
+                    <button wx:if="{{userPoint > -1 && item.price <= userPoint}}" data-data="{{item}}" bindtap="createOrder">立即兑换</button>
+                    <button wx:else class="disabled" disabled>积分不足</button>
                   </view>
                 </view>
               </view>

miniprogram/pages/order/detail.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {},
+  "navigationBarBackgroundColor": "#f2f2f2",
+  "navigationBarTitleText": "订单详情",
+  "enablePullDownRefresh": true
+}

miniprogram/pages/order/detail.less

@@ -0,0 +1,87 @@
+/* pages/order/detail.wxss */
+
+@padding: 15px;
+@content_padding: 15px;
+.order-detail-page {
+  background-color: #f2f2f2;
+  min-height: 100vh;
+  --padding-xs: 15px;
+  .order-status {
+    padding: 20px 30px;
+    background-color: #ffffff;
+    font-size: 18px;
+  }
+
+  .order-goods,.order-info-detail {
+    background-color: #ffffff;
+    margin: 15px;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+  .order-info-detail{
+    font-size: 13px;
+    padding: 10px 0;
+    .item {
+      display: flex;
+      align-items: center;
+      padding: 5px 15px;
+    }
+    .title{
+      margin-right: 5px;
+    }
+  }
+
+  .order-goods-content {
+
+    padding: @content_padding;
+
+    .info {
+      display: flex;
+    }
+
+    .goods-name {
+      flex: 1;
+      margin: 0 8px;
+      font-size: 15px;
+      line-height: 1.3;
+    }
+
+    .goods-price {
+      color: #999;
+      text-align: right;
+    }
+
+    .sale-price {
+      color: #333;
+    }
+
+    .origin-price {
+      text-decoration: line-through;
+    }
+  }
+
+  .goods-cover-image {
+    width: 100px;
+    height: 100px;
+  }
+
+  .price {
+    text-align: right;
+    font-size: 13px;
+
+    .price-total {
+      font-size: 16px;
+      vertical-align: baseline;
+    }
+  }
+
+  .order-footer {
+    border-top: 1px solid #f2f2f2;
+    overflow: hidden;
+    padding: 15px;
+  }
+  .order-action{
+    float: right;
+  }
+
+}

miniprogram/pages/order/detail.ts

@@ -0,0 +1,69 @@
+import { queryOrderDetail } from "../../service/shop-api";
+import message from "../../utils/message";
+
+// pages/order/detail.ts
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    statusEnums: {
+      1: '待确认',
+      2: '已确认',
+      3: '已取消',
+      4: '已完成',
+      0: '已删除'
+    },
+    id: '',
+    order: {}
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(opts: { id?: string }) {
+    if (!opts.id) {
+      message.alert('订单数据错误').then(() => wx.navigateBack());
+      return;
+    }
+    this.setData({
+      id: opts.id
+    })
+    this.loadOrderDetail(opts.id)
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+  onPullDownRefresh(){
+    this.loadOrderDetail()
+  },
+  async loadOrderDetail(id?: string) {
+    message.showLoading()
+    try{
+      const order = await queryOrderDetail((id || this.data.id));
+      this.setData({ order })
+      wx.stopPullDownRefresh()
+    }finally{
+      message.hideLoading()
+    }
+  }
+})

miniprogram/pages/order/detail.wxml

@@ -0,0 +1,48 @@
+<!--pages/order/detail.wxml-->
+<view class="order-detail-page">
+  <view class="order-status">
+    <text>{{statusEnums[order.status]||''}}</text>
+  </view>
+  <view class="order-goods">
+    <view class="order-goods-content">
+      <view class="info" id="{{order.id}}">
+        <!-- 商品图片 -->
+        <view class="goods-cover">
+          <image class="goods-cover-image" src="{{order.goods.cover}}" />
+        </view>
+        <view class="goods-name">
+          <text>{{order.goods.title}}</text>
+        </view>
+        <view class="goods-price">
+          <view class="sale-price">{{order.goods.price}}</view>
+          <view wx:if="{{order.goods.originPrice > 0}}" class="origin-price">{{order.goods.originPrice}}</view>
+          <view class="count">× 1</view>
+        </view>
+      </view>
+      <view class="price">
+        <text>实付积分:</text>
+        <text class="price-total">{{order.price}}</text>
+      </view>
+    </view>
+    <view class="order-footer">
+      <view class="order-action">
+        <v-button wx:if="{{order.status < 3}}" data-id="{{order.id}}" class="btn" round type="default" size="small">取消订单</v-button>
+        <v-button data-id="{{order.id}}" class="btn" round type="danger" size="small">删除订单</v-button>
+      </view>
+    </view>
+  </view>
+  <view class="order-info-detail">
+    <view class="item">
+      <view class="title">订单编号:</view>
+      <view class="value">{{order.id}}</view>
+    </view>
+    <view class="item">
+      <view class="title">创建时间:</view>
+      <view class="value">{{order.createTime}}</view>
+    </view>
+    <view class="item">
+      <view class="title">更新时间:</view>
+      <view class="value">{{order.updateTime}}</view>
+    </view>
+  </view>
+</view>

miniprogram/pages/order/index.less

@@ -24,7 +24,11 @@
   .order-footer {
     border-top: 1px solid #f2f2f2;
   }
-
+  .order-no{
+    border-bottom: 1px solid #f2f2f2;
+    padding: 10px;
+    font-size: 13px;
+  }
   .order-goods-content {
     
     padding: @content_padding;
@@ -34,8 +38,8 @@
     .goods-name{
       flex:1;
       margin: 0 8px;
-      font-size: 16px;
+      font-size: 15px;
-      line-height: 1.5;
+      line-height: 1.3;
     }
     .goods-price{
       color:#999;
@@ -72,7 +76,7 @@
   .order-status {
     display: flex;
     align-items: center;
-    font-size: 18px;
+    font-size: 14px;
     color: #c78a8a;
   }
 

miniprogram/pages/order/index.ts

@@ -86,6 +86,13 @@ Page({
     this.loadOrderList(tabActive)
     this.setData({ tabActive })
   },
+  showOrderDetail(e: TapEvent){
+    const id = e.currentTarget.id
+    
+    wx.navigateTo({
+      url: `/pages/order/detail?id=${id}`
+    })
+  },
   async cancelOrder(e: TapEvent) {
     try {
       if ((await message.confirm('确定要取消订单?'))) {

miniprogram/pages/order/index.wxml

@@ -4,8 +4,13 @@
     <v-tab wx:for="{{tabs}}" wx:key="name" name="{{item.name}}" title="{{item.title}}">
       <view class="order-list-wrapper">
         <view wx:for="{{item.orders}}" wx:key="id" class="order-item" wx:for-item="o">
+        
+          <view class="order-no">
+                <text>订单编号: </text>
+                <text>{{o.id}}</text>
+              </view>
           <view class="order-goods-content">
-            <view class="info">
+            <view class="info" bindtap="showOrderDetail" data-id="{{o.id}}" id="{{o.id}}">
               <!-- 商品图片 -->
               <view class="goods-cover">
                 <image class="goods-cover-image" src="{{o.goods.cover}}" />

miniprogram/pages/personal/personal.less

@@ -25,9 +25,8 @@
   }
   .icon-sign{
     background: linear-gradient(to right,#ddba7a,#ff9a31);
-
   }
-  .icon-game{
+  .item-icon-game{
     background: linear-gradient(to right,#ffaf8f,#ff6931);
     
   }

miniprogram/pages/personal/personal.wxml

@@ -22,7 +22,7 @@
             <text class="iconfont icon-sign-in"></text>
           </view>
           <view class="text">
-            <text>每次签到</text>
+            <text>签到</text>
           </view>
         </view>
         <view class="grid-item">
@@ -34,7 +34,7 @@
           </view>
         </view>
         <view class="grid-item">
-          <view class="icon icon-game">
+          <view class="icon item-icon-game">
             <text class="iconfont icon-game"></text>
           </view>
           <view class="text">
@@ -42,7 +42,7 @@
           </view>
         </view>
         <view class="grid-item">
-          <view class="icon icon-collection">
+          <view class="icon item-icon-collection">
             <text class="iconfont icon-gift"></text>
           </view>
           <view class="text">

miniprogram/pages/sign/index.ts

@@ -29,9 +29,11 @@ Page({
    */
   onLoad() {
     if (app.globalData.userInfo) {
-      this.setData({
+      if(app.globalData.userInfo.pointInfo){
-        pointValue: app.globalData.userInfo?.pointInfo?.totalPoint
+        this.setData({
-      })
+          pointValue: app.globalData.userInfo.pointInfo.totalPoint
+        })
+      }
       signInfo().then(res => {
         this.setData(res)
       })

miniprogram/service/shop-api.ts

@@ -48,6 +48,9 @@ export function queryOrderList(status: number = 0, page = 1, pageSize = 10) {
     status, page, pageSize
   });
 }
+export function queryOrderDetail(id: string){
+  return request<OrderInfo>(`/shop/order/${id}`,null,'GET');
+}
 export function cancelOrder(id: string) {
   return request<boolean>(`/shop/order/${id}/cancel`,null,'PUT');
 }

miniprogram/utils/message.ts

@@ -15,7 +15,7 @@ export function toast(message: string | any, icon: ToastIcon = 'none', callback:
     icon
   })
 }
-export function showLoading({ message = '加载中...', mask = true }) {
+export function showLoading({ message = '加载中...', mask = true }={}) {
   return wx.showLoading({
     title: message,
     mask
@@ -24,6 +24,14 @@ export function showLoading({ message = '加载中...', mask = true }) {
 export function hideLoading() {
   wx.hideLoading()
 }
+export function alert(message: string) {
+  return new Promise((success) => {
+    wx.showModal({
+      content: message,
+      success
+    })
+  })
+}
 export function confirm(message: string) {
   return new Promise<boolean>((resolve) => {
     wx.showModal({
@@ -43,5 +51,6 @@ export default {
   toast,
   showLoading,
   hideLoading,
+  alert,
   confirm,
 }

project.private.config.json

@@ -1,8 +1,9 @@
 {
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-  "projectname": "userlogin-demo",
+  "projectname": "point_sys_miniapp",
   "setting": {
     "compileHotReLoad": true,
-    "urlCheck": false
+    "urlCheck": false,
+    "bigPackageSizeSupport": true
   }
 }

yarn.lock

@@ -0,0 +1,18 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/node@^18.11.9":
+  version "18.14.0"
+  resolved "https://registry.npmmirror.com/@types/node/-/node-18.14.0.tgz#94c47b9217bbac49d4a67a967fdcdeed89ebb7d0"
+  integrity sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A==
+
+"@vant/weapp@^1.10.8":
+  version "1.10.13"
+  resolved "https://registry.npmmirror.com/@vant/weapp/-/weapp-1.10.13.tgz#795c52b4e5a757ad02091df2c9910e63daabffe6"
+  integrity sha512-Ps56qHY60W0QpaFKgzN2UGWfzCcKfZrM7QZVfFM3Qx9Kpm/Tnqln+mrGSMiI84+6qU0Bv1xKX6FBDa04yNiwAQ==
+
+miniprogram-api-typings@^3.6.0:
+  version "3.9.0"
+  resolved "https://registry.npmmirror.com/miniprogram-api-typings/-/miniprogram-api-typings-3.9.0.tgz#c04a6b7eae5585733b5f8787297f2b9f1b60abac"
+  integrity sha512-QCXHHW9H4XYazb8J9EMiFyaOWHXhBG4oehkQqi+76FJpKKIlpgL0ZkXxzJ2L+6T/c5OxKm7iegovKIQGVkZDLQ==