购物车、结算和订单初始页面

yudao-ui-app/api/cart.js

@@ -0,0 +1,5 @@
+const { http } = uni.$u
+
+//获取购物车数据
+export const getCartProductDetail = () => http.get('/trade/cart/get-detail')
+

yudao-ui-app/api/order.js

@@ -0,0 +1,4 @@
+const { http } = uni.$u
+
+//获得订单交易分页
+export const getOrderPageData = params => http.get('/trade/order/page', { params })

yudao-ui-app/components/yd-address-select/yd-address-select.vue

@@ -0,0 +1,106 @@
+<template>
+  <view class="address-box">
+    <view v-if="!address.area" class="address-empty">
+      <view class="address-tips">
+        <u--text :lines="1" size="14px" color="#333" bold="true" text="请选择收货地址"></u--text>
+        <u-icon class="icon-arrow-right" name="arrow-right"></u-icon>
+      </view>
+    </view>
+
+    <view v-else class="address-selected">
+      <view class="address-area">
+        <view class="default-tag">默认</view>
+        <u--text :lines="1" size="12px" color="#666" :text="address.area"></u--text>
+      </view>
+      <view class="address-detail">
+        <u--text :lines="2" size="14px" color="#333" :bold="true" :text="address.detail"></u--text>
+        <u-icon class="icon-arrow-right" name="arrow-right"></u-icon>
+      </view>
+      <view class="address-user">
+        <view class="user-text">{{ address.name }}</view>
+        <view class="user-text">{{ address.mobile }}</view>
+      </view>
+    </view>
+    <image class="address-line" src="/static/images/address-line.png"></image>
+  </view>
+</template>
+
+<script>
+/**
+ * 地址选择
+ */
+export default {
+  name: 'yd-address-select',
+  props: {
+    address: {
+      type: Object,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.address-box {
+  padding: 0 10rpx;
+  background-color: #fff;
+  border-radius: 0 0 30rpx 30rpx;
+
+  .address-empty {
+    padding: 20rpx 20rpx 0;
+    .address-tips {
+      @include flex-space-between;
+      padding: 10rpx 0;
+
+      .icon-arrow-right {
+        margin-left: 50rpx;
+      }
+    }
+  }
+
+  .address-selected {
+    padding: 20rpx 20rpx 0;
+    .address-area {
+      @include flex-left;
+
+      .default-tag {
+        font-size: 22rpx;
+        color: $u-primary;
+        border: 1rpx solid $u-primary;
+        padding: 0 6rpx;
+        margin-right: 10rpx;
+        border-radius: 5rpx;
+      }
+    }
+
+    .address-detail {
+      @include flex-space-between;
+      padding: 10rpx 0;
+
+      .icon-arrow-right {
+        margin-left: 50rpx;
+      }
+    }
+
+    .address-user {
+      @include flex-left;
+
+      .user-text {
+        color: #666;
+        font-size: 24rpx;
+        margin-right: 10rpx;
+      }
+    }
+  }
+
+  .address-line {
+    width: 100%;
+    margin: 0 auto;
+    height: 5rpx;
+  }
+}
+</style>

yudao-ui-app/components/yd-banner/yd-banner.vue

@@ -11,7 +11,7 @@
  * 广告滚动图
  */
 export default {
-  name: 'mkt-banner',
+  name: 'yd-banner',
   components: {},
   props: {
     keyName: {

yudao-ui-app/components/yd-cart-product/yd-cart-product.vue

@@ -0,0 +1,116 @@
+<template>
+  <view>
+    <view class="product-item" v-for="(item, index) in productList" :key="item.productId" @click="handleProductItemClick(item.productId)">
+      <view class="product-check" @click.stop="handleCheckProduct(item.productId, item.checked)">
+        <u-icon v-if="item.checked" name="checkmark-circle-fill" color="#3c9cff" size="22"></u-icon>
+        <view v-else class="un-check-box"></view>
+      </view>
+      <image class="product-image" :src="item.coverUrl"></image>
+      <view class="item-info">
+        <view class="info-text">
+          <u--text :lines="1" size="15px" color="#333333" :text="item.productTitle"></u--text>
+          <u-gap height="2px"></u-gap>
+          <u--text class="info-tips" :lines="1" size="12px" color="#939393" :text="item.tips"></u--text>
+        </view>
+        <view class="price-number-box">
+          <view class="price-box">
+            <yd-text-price color="red" size="13" intSize="20" :price="item.sellPrice"></yd-text-price>
+            <yd-text-price v-if="item.strikePrice" style="margin-left: 5px" decoration="line-through" color="#999" size="12" :price="item.sellPrice"></yd-text-price>
+          </view>
+          <view class="number-box" @click.stop>
+            <u-number-box min="1" max="999" bgColor="#fff" integer :disableMinus="false" :disabledInput="true" :name="item.productId" :value="item.productCount" @change="handleProductCountChange"></u-number-box>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+/**
+ * 购物车商品列表
+ */
+export default {
+  name: 'yd-cart-product',
+  props: {
+    productList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      //status: 'nomore',
+      loadingText: '加载中...',
+      loadmoreText: '上拉加载更多',
+      nomoreText: '没有更多了'
+    }
+  },
+  methods: {
+    handleProductItemClick(productId) {
+      uni.$u.route('/pages/product/product', {
+        productId: productId
+      })
+    },
+    handleItemCartClick(productId) {
+      this.$store.dispatch('CartProductCountChange', { productIds: [productId], productCount: 1, addition: true }).then(res => {
+        uni.$u.toast('已添加到购物车')
+      })
+    },
+    handleCheckProduct(productId, checked) {
+      this.$emit('productCheckedChange', productId, !checked)
+    },
+    handleProductCountChange({ name, value }) {
+      this.$emit('productCartProductCountChange', name, value)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.product-item {
+  background: #ffffff;
+  @include flex-space-between;
+  border-bottom: $custom-border-style;
+  padding: 10rpx 0 0 5rpx;
+
+  .product-check {
+    padding: 20rpx;
+
+    .un-check-box {
+      width: 20px;
+      height: 20px;
+      border: 1px solid #939393;
+      border-radius: 50%;
+    }
+  }
+
+  .product-image {
+    width: 180rpx;
+    height: 180rpx;
+    border-radius: 10rpx;
+  }
+
+  .item-info {
+    flex: 1;
+    padding: 20rpx 20rpx 0;
+
+    .info-text {
+      height: 70rpx;
+      padding-bottom: 10rpx;
+    }
+
+    .price-number-box {
+      @include flex-space-between;
+
+      .price-box {
+        @include flex-left();
+      }
+
+      .number-box {
+        height: 100rpx;
+        @include flex-center;
+      }
+    }
+  }
+}
+</style>

yudao-ui-app/components/yd-order-product/yd-order-product.vue

@@ -0,0 +1,100 @@
+<template>
+  <view>
+    <view class="product-item" v-for="(item, index) in productList" :key="item.productId">
+      <image class="product-image" :src="item.coverUrl"></image>
+      <view class="item-info">
+        <view class="info-text">
+          <u--text :lines="1" size="15px" color="#333333" :text="item.productTitle"></u--text>
+          <u-gap height="10"></u-gap>
+          <yd-text-price class="product-price" size="13" intSize="16" :price="item.sellPrice"></yd-text-price>
+        </view>
+        <view class="price-number-box">
+          <view class="number-box">
+            <view class="product-number">共 {{ item.productCount }} 件</view> 小计：
+          </view>
+          <view class="number-box" @click.stop>
+            <yd-text-price size="13" intSize="18" :price="item.totalPrice"></yd-text-price>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+/**
+ * 订单商品列表
+ */
+export default {
+  name: 'yd-order-product',
+  props: {
+    productList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    handleProductItemClick(productId) {
+      uni.$u.route('/pages/product/product', {
+        productId: productId
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.product-item {
+  background: #ffffff;
+  @include flex-space-between;
+  border-bottom: $custom-border-style;
+  padding: 10rpx 0 0 5rpx;
+
+  .product-check {
+    padding: 20rpx;
+
+    .un-check-box {
+      width: 20px;
+      height: 20px;
+      border: 1px solid #939393;
+      border-radius: 50%;
+    }
+  }
+
+  .product-image {
+    width: 180rpx;
+    height: 180rpx;
+    border-radius: 10rpx;
+  }
+
+  .item-info {
+    flex: 1;
+    padding: 0 20rpx;
+
+    .info-text {
+      padding-bottom: 10rpx;
+      .product-price {
+        margin-top: 15rpx;
+      }
+    }
+
+    .price-number-box {
+      @include flex-space-between;
+
+      .number-box {
+        font-size: 24rpx;
+        .product-number {
+          width: 200rpx;
+        }
+      }
+
+      .number-box {
+        height: 60rpx;
+        @include flex-center;
+      }
+    }
+  }
+}
+</style>

yudao-ui-app/components/yd-product-more/yd-product-more.vue

@@ -32,7 +32,7 @@
 
 <script>
 /**
- * 商品列表
+ * 商品列表(加载更多)
  */
 export default {
   name: 'yd-product-more',

yudao-ui-app/pages.json

@@ -56,12 +56,30 @@
 				"navigationBarTitleText": "个人资料"
 			}
 		},
+    {
+      "path": "pages/setting/setting",
+      "style": {
+        "navigationBarTitleText": "账户设置"
+      }
+    },
 		{
 			"path": "pages/product/product",
 			"style": {
 				"navigationBarTitleText": "商品详情"
 			}
 		},
+    {
+      "path": "pages/checkout/checkout",
+      "style": {
+        "navigationBarTitleText": "填写订单"
+      }
+    },
+    {
+      "path": "pages/order/order",
+      "style": {
+        "navigationBarTitleText": "我的订单"
+      }
+    },
     {
       "path": "pages/address/list",
       "style": {

yudao-ui-app/pages/cart/cart.vue

@@ -1,15 +1,50 @@
 <template>
   <view class="container">
-    <view class="cart-empty">
-      <u-empty mode="car" width="500rpx" height="500rpx" icon="/static/images/empty/cart.png"></u-empty>
+    <!-- 购物车为空 -->
+    <view v-if="!hasLogin || cartList.length === 0">
+      <view class="cart-empty">
+        <u-empty text="去逛逛添点什么吧" width="500rpx" height="500rpx" icon="/static/images/empty/cart.png"></u-empty>
+      </view>
     </view>
 
+    <!-- 购物车列表 -->
+    <scroll-view v-if="hasLogin && cartList.length > 0" class="cart-product" scroll-y="true">
+      <yd-cart-product :product-list="cartList" @productCheckedChange="handleProductCheckedChange" @productCountChange="handleProductCountChange"></yd-cart-product>
+    </scroll-view>
+
+    <!-- 未登录 -->
     <view v-if="!hasLogin" class="login-tips-box">
       <view class="login-tips">
         <navigator url="/pages/login/social" open-type="navigate" hover-class="none">
-          <text class="login-link">登录</text>
+          <view class="login-link">登录查看</view>
         </navigator>
-        <text>查看购物车</text>
+      </view>
+    </view>
+
+    <!-- 底部菜单 -->
+    <view class="cart-btn-container">
+      <view class="btn-box">
+        <view class="product-check-info">
+          <view class="check-all-btn" @click.stop="handleCheckAllProduct">
+            <u-icon v-if="isCheckAll" name="checkmark-circle-fill" color="#3c9cff" size="22"></u-icon>
+            <view v-else class="un-check-box"></view>
+          </view>
+          <view class="info-text">合计：</view>
+          <view>
+            <yd-text-price color="red" size="15" intSize="20" :price="totalAmount"></yd-text-price>
+          </view>
+        </view>
+
+        <view v-if="checkedProduct.length > 0" class="cart-btn-group">
+          <u-button type="warning" shape="circle" size="small" text="移除" @click="handleRemoveProduct"></u-button>
+          <view class="btn-gap"></view>
+          <u-button style="margin-left: 10px" class="main-btn" type="primary" shape="circle" size="small" text="去结算" @click="handleCheckoutProduct"></u-button>
+        </view>
+        <view v-else class="cart-btn-group">
+          <u-button type="warning" shape="circle" size="small" text="移除" disabled></u-button>
+          <view class="btn-gap"></view>
+          <u-button style="margin-left: 10px" class="main-btn" type="primary" shape="circle" size="small" text="去结算" disabled></u-button>
+        </view>
       </view>
     </view>
   </view>
@@ -19,34 +54,172 @@
 export default {
   data() {
     return {
-      title: ''
+      title: '',
+      cartList: [],
+      checkedNumber: 0,
+      totalAmount: 0
     }
   },
-  onLoad() {},
-  methods: {},
   computed: {
+    checkedProduct() {
+      return this.cartList.filter(item => {
+        return item.checked
+      })
+    },
+    isCheckAll() {
+      if (this.cartList.length < 1) {
+        return false
+      }
+      return this.cartList.every(item => {
+        return item.checked
+      })
+    },
     hasLogin() {
       return this.$store.getters.hasLogin
     }
+  },
+  onShow() {
+    if (this.hasLogin) {
+      this.loadCartDetailData()
+    } else {
+      this.cartList =[]
+    }
+  },
+  methods: {
+    loadCartDetailData() {
+      this.$store.dispatch('CartProductDetail').then(res => {
+        this.cartList = res.data || []
+      })
+    },
+    /** 商品全选/取消全选 */
+    handleCheckAllProduct() {
+      if (this.cartList.length < 1) {
+        return
+      }
+      const productIds = this.cartList.map(item => {
+        return item.productId
+      })
+      this.$store.dispatch('CartProductCheckChange', { productIds, checked: !this.isCheckAll }).then(res => {
+        this.cartList = res.data || []
+      })
+    },
+    /** 商品单选/取消单选 */
+    handleProductCheckedChange(productId, checked) {
+      this.$store.dispatch('CartProductCheckChange', { productIds: [productId], checked: checked }).then(res => {
+        this.cartList = res.data || []
+      })
+    },
+    /** 修改购物车商品数量 */
+    handleProductCountChange(productId, number) {
+      this.$store.dispatch('CartProductCountChange', { productIds: [productId], productCount: number }).then(res => {
+        this.cartList = res.data || []
+      })
+    },
+    /** 移除购物车商品 */
+    handleRemoveProduct() {
+      if (this.checkedProduct < 1) {
+        return
+      }
+      const productIds = this.checkedProduct.map(item => {
+        return item.productId
+      })
+
+      uni.showModal({
+        title: '确定要移除选中的商品？',
+        cancelText: '取消',
+        confirmText: '移除',
+        success: res => {
+          if (res.confirm) {
+            this.$store.dispatch('CartProductCountChange', { productIds: productIds, productCount: 0 }).then(res => {
+              this.cartList = res.data || []
+            })
+          } else if (res.cancel) {
+            //console.log('用户点击取消')
+          }
+        }
+      })
+    },
+    /** 购物车提交结算 */
+    handleCheckoutProduct() {
+      if (this.checkedProduct < 1) {
+        return
+      }
+      const checkedProduct = this.checkedProduct.map(item => {
+        return { productId: item.productId, productCount: item.productCount, sellPrice: item.sellPrice }
+      })
+      uni.$u.route('/pages/checkout/checkout', {
+        checkedProduct: JSON.stringify(checkedProduct)
+      })
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.cart-empty {
-  padding-top: 100rpx;
-}
-
 .login-tips-box {
   padding-top: 100rpx;
+
   .login-tips {
     @include flex-center;
     color: #939393;
-    font-size: 28rpx;
+    font-size: 24rpx;
     letter-spacing: 5rpx;
   }
+
   .login-link {
-    color: $u-primary;
+    width: 160rpx;
+    height: 50rpx;
+    line-height: 50rpx;
+    border-radius: 50rpx;
+    border: 1px solid #777;
+    color: #777;
+    text-align: center;
+  }
+}
+
+.cart-btn-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+
+  .btn-box {
+    background: $custom-bg-color;
+    border-top: $custom-border-style;
+
+    width: 750rpx;
+    @include flex-space-between();
+    height: 100rpx;
+
+    .product-check-info {
+      @include flex-left;
+
+      .check-all-btn {
+        padding: 20rpx;
+
+        .un-check-box {
+          width: 20px;
+          height: 20px;
+          border: 1px solid #939393;
+          border-radius: 50%;
+        }
+      }
+
+      .info-text {
+        font-size: 26rpx;
+        font-weight: bold;
+        color: #666666;
+      }
+    }
+
+    .cart-btn-group {
+      @include flex-right();
+      width: 360rpx;
+      padding-right: 10px;
+
+      .btn-gap {
+        width: 20rpx;
+      }
+    }
   }
 }
 </style>

yudao-ui-app/pages/checkout/checkout.vue

@@ -0,0 +1,219 @@
+<template>
+  <view class="container">
+    <!-- 收货地址选择 -->
+    <yd-address-select :address="address"></yd-address-select>
+
+    <!-- 订单商品信息 -->
+    <view class="checkout-goods">
+      <yd-order-goods :goods-list="checkoutList"></yd-order-goods>
+    </view>
+
+    <view class="freight-coupon-box">
+      <vidw class="box-row">
+        <view class="title">运费</view>
+        <yd-text-price class="freight-fee" size="15" :price="freightAmount"></yd-text-price>
+      </vidw>
+      <vidw class="box-row">
+        <view class="coupon-wrap">
+          <view class="coupon-title-tag">
+            <view class="title">优惠券</view>
+            <scroll-view class="coupon-tag-list" scroll-x="true">
+              <view v-for="item in couponList" :key="item.couponId" class="coupon-tag-item">{{ item.couponTag }}</view>
+            </scroll-view>
+          </view>
+          <yd-text-price class="coupon-fee" color="red" size="15" symbol="-￥" :price="couponAmount"></yd-text-price>
+        </view>
+        <u-icon name="arrow-right"></u-icon>
+      </vidw>
+    </view>
+
+    <!-- 订单备注信息 -->
+    <view class="user-remark-box">
+      <view class="title">订单备注</view>
+      <u--input maxlength="50" border="none" fontSize="14" v-model="remark" placeholder="如您需要请备注"></u--input>
+    </view>
+
+    <view class="cart-btn-container">
+      <view class="order-total-wrap">
+        <view class="order-total-info">
+          <view class="info-text">合计：</view>
+          <view>
+            <yd-text-price color="red" size="15" intSize="20" :price="totalAmount"></yd-text-price>
+          </view>
+        </view>
+
+        <view class="cart-btn-group">
+          <u-button style="margin-left: 10px" class="main-btn" type="primary" shape="circle" size="small" text="提交订单" @click="handleSubmitOrder"></u-button>
+        </view>
+      </view>
+      <u-safe-bottom customStyle="background: #ffffff"></u-safe-bottom>
+    </view>
+  </view>
+</template>
+
+<script>
+import { checkoutCartProduct } from '../../api/order'
+
+export default {
+  components: {},
+  data() {
+    return {
+      checkedProduct: [],
+      address: {
+        name: '客户',
+        mobile: '139****6563',
+        area: 'XXX市XXX区',
+        detail: 'XXX街道XXX小区XXX号楼XX-XXX'
+      },
+      checkoutList: [],
+      couponList: [
+        {
+          couponId: 3,
+          couponTag: '6元运费券'
+        }
+      ],
+      totalAmount: 0,
+      freightAmount: 6,
+      couponAmount: 6,
+      remark: ''
+    }
+  },
+  onLoad(e) {
+    const checkedProduct = e.checkedProduct
+    if (checkedProduct) {
+      this.checkedProduct = JSON.parse(checkedProduct)
+      this.loadCheckoutProductData()
+    } else {
+      uni.$u.toast('请求参数错误')
+    }
+  },
+  methods: {
+    loadCheckoutProductData() {
+      checkoutCartProduct(this.checkedProduct)
+        .then(res => {
+          this.checkoutList = res.data.checkoutList || []
+          this.totalAmount = res.data.totalAmount || 0
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  background-color: $custom-bg-color;
+  height: 100vh;
+  overflow-x: scroll;
+}
+
+.checkout-goods {
+  background-color: #fff;
+  margin-top: 20rpx;
+  padding: 20rpx;
+  border-radius: 20rpx;
+}
+
+.freight-coupon-box {
+  background-color: #fff;
+  margin-top: 20rpx;
+  padding: 20rpx 30rpx;
+  border-radius: 20rpx;
+
+  .box-row {
+    @include flex-space-between;
+    padding: 10rpx 0;
+
+    .coupon-wrap {
+      @include flex-space-between;
+      width: 670rpx;
+
+      .coupon-title-tag {
+        @include flex-left;
+
+        .coupon-tag-list {
+          @include flex-left;
+          overflow-x: scroll;
+          width: 360rpx;
+          .coupon-tag-item {
+            display: inline-block;
+            font-size: 22rpx;
+            color: red;
+            border: 1rpx solid red;
+            padding: 1px 6rpx;
+            margin-right: 10rpx;
+            border-radius: 5rpx;
+          }
+        }
+      }
+    }
+
+    .title {
+      font-weight: 700;
+      font-size: 30rpx;
+      color: #333;
+      margin-right: 30rpx;
+    }
+
+    .freight-fee {
+      margin-right: 50rpx;
+    }
+
+    .coupon-fee {
+      margin-right: 20rpx;
+    }
+  }
+}
+
+.user-remark-box {
+  @include flex-space-between;
+  background-color: #fff;
+  margin-top: 20rpx;
+  padding: 30rpx;
+  border-radius: 20rpx;
+
+  .title {
+    font-weight: 700;
+    font-size: 30rpx;
+    color: #333;
+    margin-right: 30rpx;
+  }
+}
+
+.cart-btn-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+
+  .order-total-wrap {
+    background: $custom-bg-color;
+    border-top: $custom-border-style;
+
+    width: 750rpx;
+    @include flex-space-between();
+    height: 100rpx;
+
+    .order-total-info {
+      @include flex-left;
+      .info-text {
+        margin-left: 20rpx;
+        font-size: 26rpx;
+        font-weight: bold;
+        color: #666666;
+      }
+    }
+
+    .cart-btn-group {
+      @include flex-right();
+      width: 360rpx;
+      padding-right: 10px;
+
+      .btn-gap {
+        width: 20rpx;
+      }
+    }
+  }
+}
+</style>

yudao-ui-app/pages/index/index.vue

@@ -8,7 +8,7 @@
     </u-sticky>
 
     <!--轮播图-->
-    <mkt-banner :banner-list="bannerList"></mkt-banner>
+    <yd-banner :banner-list="bannerList"></yd-banner>
 
     <u-gap height="20px"></u-gap>
 

yudao-ui-app/pages/order/order.vue

@@ -0,0 +1,91 @@
+<template>
+  <view class="container">
+    <u-sticky style="top: 0" offset-top="0">
+      <u-tabs :list="statusArray" :current="statusIndex" @change="handleStatusChange"></u-tabs>
+    </u-sticky>
+    <view class="order-list">
+      <view v-for="(item, index) in orderList" :key="item.orderNo" class="order-item">
+        <view class="item-title">{{ item.orderNo }}</view>
+        <view class="item-content">{{ item.orderStatus }}</view>
+        <view class="item-btn-group"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getOrderPageData } from '../../api/order'
+
+export default {
+  name: 'order',
+  data() {
+    return {
+      pageNo: 1,
+      statusIndex: 0,
+      statusArray: [
+        {
+          name: '全部',
+          status: '-1'
+        },
+        {
+          name: '待付款',
+          status: '0'
+        },
+        {
+          name: '已付款',
+          status: '10'
+        },
+        {
+          name: '待发货',
+          status: '20'
+        },
+        {
+          name: '待收货',
+          status: '30'
+        },
+        {
+          name: '已完成',
+          status: '40'
+        },
+        {
+          name: '已取消',
+          status: '50'
+        }
+      ],
+      orderList: []
+    }
+  },
+  onLoad(e) {
+    const status = e.status
+    if (status !== undefined) {
+      this.statusArray.forEach((item, index) => {
+        if (item.status === status) {
+          this.statusIndex = index
+        }
+      })
+    }
+    this.loadOrderPageData()
+  },
+  methods: {
+    handleStatusChange(item) {
+      this.statusIndex = item.status
+    },
+    loadOrderPageData() {
+      let params = { pageNo: this.pageNo }
+      const status = this.statusArray[this.statusIndex].status
+      if (status >= 0) {
+        params.orderStatus = status
+      }
+      getOrderPageData(params)
+        .then(res => {
+          console.log(res)
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

yudao-ui-app/pages/profile/profile.vue

@@ -4,14 +4,14 @@
       <view class="info-item">
         <view class="label">头像：</view>
         <view class="info" @click="handleAvatarClick">
-          <u-avatar size="60" :src="userInfo.avatar"></u-avatar>
+          <u-avatar size="50" shape="square" :src="userInfo.avatar"></u-avatar>
           <u-icon class="btn" name="arrow-right"></u-icon>
         </view>
       </view>
       <view class="info-item">
         <view class="label">昵称：</view>
         <view class="info">
-          <u--input maxlength="10" :border="borderStyle" v-model="userInfo.nickname" @focus="borderStyle = 'bottom'" inputAlign="right" @blur="borderStyle = 'none'" @change="handleNameChange"></u--input>
+          <u--input maxlength="10" border="none" v-model="userInfo.nickname" inputAlign="right" @change="handleNameChange"></u--input>
         </view>
       </view>
       <view class="info-item">
@@ -41,8 +41,7 @@ export default {
         mobile: ''
       },
       avatarFiles: [],
-      tempName: '',
-      borderStyle: 'none'
+      tempName: ''
     }
   },
   computed: {

yudao-ui-app/pages/setting/setting.vue

@@ -0,0 +1,62 @@
+<template>
+  <view class="container">
+    <u-gap height="20"></u-gap>
+    <u-cell-group class="setting-list" :border="false">
+      <u-cell class="setting-item" icon="lock" title="修改密码" isLink></u-cell>
+      <u-cell class="setting-item" icon="phone" title="换绑手机" isLink></u-cell>
+      <u-cell v-if="hasLogin" class="setting-item" icon="minus-circle" title="用户登出" @click="logout" isLink></u-cell>
+    </u-cell-group>
+  </view>
+</template>
+
+<script>
+import UGap from '../../uni_modules/uview-ui/components/u-gap/u-gap'
+
+export default {
+  components: { UGap },
+  data() {
+    return {}
+  },
+  computed: {
+    hasLogin() {
+      return this.$store.getters.hasLogin
+    }
+  },
+  onLoad() {},
+  methods: {
+    logout() {
+      uni.showModal({
+        title: '提示',
+        content: '您确定要退出登录吗',
+        success: res => {
+          if (res.confirm) {
+            this.$store.dispatch('Logout').then(res => {
+              uni.switchTab({
+                url: '/pages/user/user'
+              })
+            })
+          } else if (res.cancel) {
+            //console.log('用户点击取消')
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.setting-list {
+  padding: 10rpx 0;
+  background-color: #fff;
+  border-radius: 15rpx;
+
+  .setting-item {
+    padding: 10rpx 0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+</style>

yudao-ui-app/pages/user/user.vue

@@ -1,9 +1,15 @@
 <template>
   <view class="container">
     <view class="user-header">
-      <view class="user-info" @click="loginOrJump('/pages/profile/profile')">
-        <u-avatar size="80" :src="userInfo.avatar"></u-avatar>
-        <text class="nick-name">{{ hasLogin ? userInfo.nickname || '游客' : '登录/注册' }}</text>
+      <view class="user-info" @click="pageRouter('/pages/profile/profile')">
+        <u-avatar size="60" shape="square" :src="userInfo.avatar"></u-avatar>
+        <view class="info-text">
+          <view class="user-nickname">{{ hasLogin ? userInfo.nickname || ' ' : '匿名用户' }}</view>
+          <view class="user-mobile">{{ hasLogin ? userInfo.mobile || ' ' : '登录/注册' }}</view>
+        </view>
+      </view>
+      <view class="user-setting">
+        <u-icon v-if="hasLogin" name="setting" color="#939393" size="22" @click="pageRouter('/pages/setting/setting')"></u-icon>
       </view>
     </view>
 
@@ -12,7 +18,7 @@
     <view>
       <view class="order-header">
         <text class="order-title">我的订单</text>
-        <view class="see-all">
+        <view class="see-all" @click="pageRouter(orderPage, -1)">
           <text>查看全部</text>
           <u-icon name="arrow-right"></u-icon>
         </view>
@@ -20,7 +26,7 @@
 
       <view class="order-status-box">
         <u-grid :border="false" :col="orderStatusList.length">
-          <u-grid-item v-for="(item, index) in orderStatusList" :key="index">
+          <u-grid-item v-for="(item, index) in orderStatusList" :key="index" @click="pageRouter(orderPage, item.state)">
             <u-icon :name="item.icon" :size="32"></u-icon>
             <text class="grid-title">{{ item.title }}</text>
           </u-grid-item>
@@ -45,12 +51,9 @@
       <u-cell class="fun-item" :border="false" icon="gift" title="分销中心" isLink></u-cell>
       <u-cell class="fun-item" :border="false" icon="tags" title="领券中心" isLink></u-cell>
       <u-cell class="fun-item" :border="false" icon="coupon" title="我的优惠券" isLink></u-cell>
-      <u-cell class="fun-item" :border="false" icon="map" title="收货地址" @click="loginOrJump('/pages/address/list')" isLink></u-cell>
+      <u-cell class="fun-item" :border="false" icon="map" title="收货地址" @click="pageRouter('/pages/address/list')" isLink></u-cell>
     </u-cell-group>
 
-    <view v-if="hasLogin" class="logout-btn">
-      <u-button type="error" color="#ea322b" text="退出登录" @click="logout"></u-button>
-    </view>
   </view>
 </template>
 
@@ -58,11 +61,12 @@
 export default {
   data() {
     return {
+      orderPage: '/pages/order/order',
       orderStatusList: [
-        { icon: 'rmb-circle', title: '待支付' },
-        { icon: 'car', title: '代发货' },
-        { icon: 'order', title: '待收货' },
-        { icon: 'integral', title: '已完成' }
+        { icon: 'red-packet', title: '待付款', state: '0' },
+        { icon: 'car', title: '待发货', state:'20' },
+        { icon: 'order', title: '待收货', state: '30' },
+        { icon: 'integral', title: '已完成', state: '40' }
       ],
       statList: [
         { value: '0', title: '我的收藏' },
@@ -77,9 +81,13 @@ export default {
     }
   },
   methods: {
-    loginOrJump(pageUrl) {
+    pageRouter(pageUrl, param) {
       if (!this.hasLogin) {
         uni.$u.route('/pages/login/social')
+      } else if (pageUrl === this.orderPage) {
+        uni.$u.route(this.orderPage, {
+          status: param
+        });
       } else {
         uni.$u.route(pageUrl)
       }
@@ -110,17 +118,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 .user-header {
-  @include flex-center(column);
-  height: 280rpx;
+  background-color: #fff;
+  @include flex-space-between;
+  padding: 30rpx;
+  height: 200rpx;
+
   .user-info {
-    @include flex-center(column);
-    .nick-name {
-      margin-top: 20rpx;
-      font-size: 32rpx;
-      font-weight: 700;
+    @include flex-left;
+    align-items: center;
+
+    .info-text {
+      margin-left: 20rpx;
+
+      .user-nickname {
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 50rpx;
+      }
+
+      .user-mobile {
+        font-size: 24rpx;
+        font-weight: 700;
+        color: #939393;
+        line-height: 50rpx;
+      }
     }
   }
+
+  .user-setting {
+    margin-right: 5rpx;
+  }
 }
 
 .order-header {
@@ -168,8 +197,4 @@ export default {
   }
 }
 
-.logout-btn {
-  margin: 60rpx auto 0;
-  width: 400rpx;
-}
 </style>

yudao-ui-app/store/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import user from './mudules/user'
+import cart from './mudules/cart'
 import getters from './getters'
 
 Vue.use(Vuex) // vue的插件机制
@@ -8,7 +9,8 @@ Vue.use(Vuex) // vue的插件机制
 // Vuex.Store 构造器选项
 const store = new Vuex.Store({
   modules: {
-    user
+    user,
+    cart
   },
   getters
 })

yudao-ui-app/store/mudules/cart.js

@@ -0,0 +1,28 @@
+import { getCartDetail } from '@/api/cart'
+
+const cart = {
+  state: {
+    cartCount: 0
+  },
+  mutations: {
+    //记录购物车商品数量
+    SET_CART_COUNT(state, data) {
+      const arr = data.length || []
+      state.cartNumber = arr.length
+    }
+  },
+  actions: {
+    //获取购物车数据
+    CartProductDetail({ state, commit }) {
+      return getCartDetail()
+        .then(res => {
+          commit('SET_CART_COUNT', res.data)
+          return Promise.resolve(res)
+        })
+        .catch(err => {
+          return Promise.reject(err)
+        })
+    }
+  }
+}
+export default cart