BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 6878ac04c91297e6c4ca894ffcf1055f449a2de4

Authored by sfmind
1 parent 0b9ddddd

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

Inline Side-by-side
Showing 17 changed files with 994 additions and 46 deletions
yudao-ui-app/api/cart.js 0 → 100644
  View file @6878ac0
  1 +const { http } = uni.$u
  2 +
  3 +//获取购物车数据
  4 +export const getCartProductDetail = () => http.get('/trade/cart/get-detail')
  5 +
... ...
yudao-ui-app/api/order.js 0 → 100644
  View file @6878ac0
  1 +const { http } = uni.$u
  2 +
  3 +//获得订单交易分页
  4 +export const getOrderPageData = params => http.get('/trade/order/page', { params })
... ...
yudao-ui-app/components/yd-address-select/yd-address-select.vue 0 → 100644
  View file @6878ac0
  1 +<template>
  2 + <view class="address-box">
  3 + <view v-if="!address.area" class="address-empty">
  4 + <view class="address-tips">
  5 + <u--text :lines="1" size="14px" color="#333" bold="true" text="请选择收货地址"></u--text>
  6 + <u-icon class="icon-arrow-right" name="arrow-right"></u-icon>
  7 + </view>
  8 + </view>
  9 +
  10 + <view v-else class="address-selected">
  11 + <view class="address-area">
  12 + <view class="default-tag">默认</view>
  13 + <u--text :lines="1" size="12px" color="#666" :text="address.area"></u--text>
  14 + </view>
  15 + <view class="address-detail">
  16 + <u--text :lines="2" size="14px" color="#333" :bold="true" :text="address.detail"></u--text>
  17 + <u-icon class="icon-arrow-right" name="arrow-right"></u-icon>
  18 + </view>
  19 + <view class="address-user">
  20 + <view class="user-text">{{ address.name }}</view>
  21 + <view class="user-text">{{ address.mobile }}</view>
  22 + </view>
  23 + </view>
  24 + <image class="address-line" src="/static/images/address-line.png"></image>
  25 + </view>
  26 +</template>
  27 +
  28 +<script>
  29 +/**
  30 + * 地址选择
  31 + */
  32 +export default {
  33 + name: 'yd-address-select',
  34 + props: {
  35 + address: {
  36 + type: Object,
  37 + default: () => []
  38 + }
  39 + },
  40 + data() {
  41 + return {}
  42 + },
  43 + methods: {}
  44 +}
  45 +</script>
  46 +
  47 +<style lang="scss" scoped>
  48 +.address-box {
  49 + padding: 0 10rpx;
  50 + background-color: #fff;
  51 + border-radius: 0 0 30rpx 30rpx;
  52 +
  53 + .address-empty {
  54 + padding: 20rpx 20rpx 0;
  55 + .address-tips {
  56 + @include flex-space-between;
  57 + padding: 10rpx 0;
  58 +
  59 + .icon-arrow-right {
  60 + margin-left: 50rpx;
  61 + }
  62 + }
  63 + }
  64 +
  65 + .address-selected {
  66 + padding: 20rpx 20rpx 0;
  67 + .address-area {
  68 + @include flex-left;
  69 +
  70 + .default-tag {
  71 + font-size: 22rpx;
  72 + color: $u-primary;
  73 + border: 1rpx solid $u-primary;
  74 + padding: 0 6rpx;
  75 + margin-right: 10rpx;
  76 + border-radius: 5rpx;
  77 + }
  78 + }
  79 +
  80 + .address-detail {
  81 + @include flex-space-between;
  82 + padding: 10rpx 0;
  83 +
  84 + .icon-arrow-right {
  85 + margin-left: 50rpx;
  86 + }
  87 + }
  88 +
  89 + .address-user {
  90 + @include flex-left;
  91 +
  92 + .user-text {
  93 + color: #666;
  94 + font-size: 24rpx;
  95 + margin-right: 10rpx;
  96 + }
  97 + }
  98 + }
  99 +
  100 + .address-line {
  101 + width: 100%;
  102 + margin: 0 auto;
  103 + height: 5rpx;
  104 + }
  105 +}
  106 +</style>
... ...
yudao-ui-app/components/yd-banner/yd-banner.vue
  View file @6878ac0
... ... @@ -11,7 +11,7 @@
11 11 * 广告滚动图
12 12 */
13 13 export default {
14   - name: 'mkt-banner',
  14 + name: 'yd-banner',
15 15 components: {},
16 16 props: {
17 17 keyName: {
... ...
yudao-ui-app/components/yd-cart-product/yd-cart-product.vue 0 → 100644
  View file @6878ac0
  1 +<template>
  2 + <view>
  3 + <view class="product-item" v-for="(item, index) in productList" :key="item.productId" @click="handleProductItemClick(item.productId)">
  4 + <view class="product-check" @click.stop="handleCheckProduct(item.productId, item.checked)">
  5 + <u-icon v-if="item.checked" name="checkmark-circle-fill" color="#3c9cff" size="22"></u-icon>
  6 + <view v-else class="un-check-box"></view>
  7 + </view>
  8 + <image class="product-image" :src="item.coverUrl"></image>
  9 + <view class="item-info">
  10 + <view class="info-text">
  11 + <u--text :lines="1" size="15px" color="#333333" :text="item.productTitle"></u--text>
  12 + <u-gap height="2px"></u-gap>
  13 + <u--text class="info-tips" :lines="1" size="12px" color="#939393" :text="item.tips"></u--text>
  14 + </view>
  15 + <view class="price-number-box">
  16 + <view class="price-box">
  17 + <yd-text-price color="red" size="13" intSize="20" :price="item.sellPrice"></yd-text-price>
  18 + <yd-text-price v-if="item.strikePrice" style="margin-left: 5px" decoration="line-through" color="#999" size="12" :price="item.sellPrice"></yd-text-price>
  19 + </view>
  20 + <view class="number-box" @click.stop>
  21 + <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>
  22 + </view>
  23 + </view>
  24 + </view>
  25 + </view>
  26 + </view>
  27 +</template>
  28 +
  29 +<script>
  30 +/**
  31 + * 购物车商品列表
  32 + */
  33 +export default {
  34 + name: 'yd-cart-product',
  35 + props: {
  36 + productList: {
  37 + type: Array,
  38 + default: () => []
  39 + }
  40 + },
  41 + data() {
  42 + return {
  43 + //status: 'nomore',
  44 + loadingText: '加载中...',
  45 + loadmoreText: '上拉加载更多',
  46 + nomoreText: '没有更多了'
  47 + }
  48 + },
  49 + methods: {
  50 + handleProductItemClick(productId) {
  51 + uni.$u.route('/pages/product/product', {
  52 + productId: productId
  53 + })
  54 + },
  55 + handleItemCartClick(productId) {
  56 + this.$store.dispatch('CartProductCountChange', { productIds: [productId], productCount: 1, addition: true }).then(res => {
  57 + uni.$u.toast('已添加到购物车')
  58 + })
  59 + },
  60 + handleCheckProduct(productId, checked) {
  61 + this.$emit('productCheckedChange', productId, !checked)
  62 + },
  63 + handleProductCountChange({ name, value }) {
  64 + this.$emit('productCartProductCountChange', name, value)
  65 + }
  66 + }
  67 +}
  68 +</script>
  69 +<style lang="scss" scoped>
  70 +.product-item {
  71 + background: #ffffff;
  72 + @include flex-space-between;
  73 + border-bottom: $custom-border-style;
  74 + padding: 10rpx 0 0 5rpx;
  75 +
  76 + .product-check {
  77 + padding: 20rpx;
  78 +
  79 + .un-check-box {
  80 + width: 20px;
  81 + height: 20px;
  82 + border: 1px solid #939393;
  83 + border-radius: 50%;
  84 + }
  85 + }
  86 +
  87 + .product-image {
  88 + width: 180rpx;
  89 + height: 180rpx;
  90 + border-radius: 10rpx;
  91 + }
  92 +
  93 + .item-info {
  94 + flex: 1;
  95 + padding: 20rpx 20rpx 0;
  96 +
  97 + .info-text {
  98 + height: 70rpx;
  99 + padding-bottom: 10rpx;
  100 + }
  101 +
  102 + .price-number-box {
  103 + @include flex-space-between;
  104 +
  105 + .price-box {
  106 + @include flex-left();
  107 + }
  108 +
  109 + .number-box {
  110 + height: 100rpx;
  111 + @include flex-center;
  112 + }
  113 + }
  114 + }
  115 +}
  116 +</style>
... ...
yudao-ui-app/components/yd-order-product/yd-order-product.vue 0 → 100644
  View file @6878ac0
  1 +<template>
  2 + <view>
  3 + <view class="product-item" v-for="(item, index) in productList" :key="item.productId">
  4 + <image class="product-image" :src="item.coverUrl"></image>
  5 + <view class="item-info">
  6 + <view class="info-text">
  7 + <u--text :lines="1" size="15px" color="#333333" :text="item.productTitle"></u--text>
  8 + <u-gap height="10"></u-gap>
  9 + <yd-text-price class="product-price" size="13" intSize="16" :price="item.sellPrice"></yd-text-price>
  10 + </view>
  11 + <view class="price-number-box">
  12 + <view class="number-box">
  13 + <view class="product-number">共 {{ item.productCount }} 件</view> 小计：
  14 + </view>
  15 + <view class="number-box" @click.stop>
  16 + <yd-text-price size="13" intSize="18" :price="item.totalPrice"></yd-text-price>
  17 + </view>
  18 + </view>
  19 + </view>
  20 + </view>
  21 + </view>
  22 +</template>
  23 +
  24 +<script>
  25 +/**
  26 + * 订单商品列表
  27 + */
  28 +export default {
  29 + name: 'yd-order-product',
  30 + props: {
  31 + productList: {
  32 + type: Array,
  33 + default: () => []
  34 + }
  35 + },
  36 + data() {
  37 + return {}
  38 + },
  39 + methods: {
  40 + handleProductItemClick(productId) {
  41 + uni.$u.route('/pages/product/product', {
  42 + productId: productId
  43 + })
  44 + }
  45 + }
  46 +}
  47 +</script>
  48 +<style lang="scss" scoped>
  49 +.product-item {
  50 + background: #ffffff;
  51 + @include flex-space-between;
  52 + border-bottom: $custom-border-style;
  53 + padding: 10rpx 0 0 5rpx;
  54 +
  55 + .product-check {
  56 + padding: 20rpx;
  57 +
  58 + .un-check-box {
  59 + width: 20px;
  60 + height: 20px;
  61 + border: 1px solid #939393;
  62 + border-radius: 50%;
  63 + }
  64 + }
  65 +
  66 + .product-image {
  67 + width: 180rpx;
  68 + height: 180rpx;
  69 + border-radius: 10rpx;
  70 + }
  71 +
  72 + .item-info {
  73 + flex: 1;
  74 + padding: 0 20rpx;
  75 +
  76 + .info-text {
  77 + padding-bottom: 10rpx;
  78 + .product-price {
  79 + margin-top: 15rpx;
  80 + }
  81 + }
  82 +
  83 + .price-number-box {
  84 + @include flex-space-between;
  85 +
  86 + .number-box {
  87 + font-size: 24rpx;
  88 + .product-number {
  89 + width: 200rpx;
  90 + }
  91 + }
  92 +
  93 + .number-box {
  94 + height: 60rpx;
  95 + @include flex-center;
  96 + }
  97 + }
  98 + }
  99 +}
  100 +</style>
... ...
yudao-ui-app/components/yd-product-more/yd-product-more.vue
  View file @6878ac0
... ... @@ -32,7 +32,7 @@
32 32  
33 33 <script>
34 34 /**
35   - * 商品列表
  35 + * 商品列表(加载更多)
36 36 */
37 37 export default {
38 38 name: 'yd-product-more',
... ...
yudao-ui-app/pages.json
  View file @6878ac0
... ... @@ -56,6 +56,12 @@
56 56 "navigationBarTitleText": "个人资料"
57 57 }
58 58 },
  59 + {
  60 + "path": "pages/setting/setting",
  61 + "style": {
  62 + "navigationBarTitleText": "账户设置"
  63 + }
  64 + },
59 65 {
60 66 "path": "pages/product/product",
61 67 "style": {
... ... @@ -63,6 +69,18 @@
63 69 }
64 70 },
65 71 {
  72 + "path": "pages/checkout/checkout",
  73 + "style": {
  74 + "navigationBarTitleText": "填写订单"
  75 + }
  76 + },
  77 + {
  78 + "path": "pages/order/order",
  79 + "style": {
  80 + "navigationBarTitleText": "我的订单"
  81 + }
  82 + },
  83 + {
66 84 "path": "pages/address/list",
67 85 "style": {
68 86 "navigationBarTitleText": "收货地址"
... ...
yudao-ui-app/pages/cart/cart.vue
  View file @6878ac0
1 1 <template>
2 2 <view class="container">
3   - <view class="cart-empty">
4   - <u-empty mode="car" width="500rpx" height="500rpx" icon="/static/images/empty/cart.png"></u-empty>
  3 + <!-- 购物车为空 -->
  4 + <view v-if="!hasLogin || cartList.length === 0">
  5 + <view class="cart-empty">
  6 + <u-empty text="去逛逛添点什么吧" width="500rpx" height="500rpx" icon="/static/images/empty/cart.png"></u-empty>
  7 + </view>
5 8 </view>
6 9  
  10 + <!-- 购物车列表 -->
  11 + <scroll-view v-if="hasLogin && cartList.length > 0" class="cart-product" scroll-y="true">
  12 + <yd-cart-product :product-list="cartList" @productCheckedChange="handleProductCheckedChange" @productCountChange="handleProductCountChange"></yd-cart-product>
  13 + </scroll-view>
  14 +
  15 + <!-- 未登录 -->
7 16 <view v-if="!hasLogin" class="login-tips-box">
8 17 <view class="login-tips">
9 18 <navigator url="/pages/login/social" open-type="navigate" hover-class="none">
10   - <text class="login-link">登录</text>
  19 + <view class="login-link">登录查看</view>
11 20 </navigator>
12   - <text>查看购物车</text>
  21 + </view>
  22 + </view>
  23 +
  24 + <!-- 底部菜单 -->
  25 + <view class="cart-btn-container">
  26 + <view class="btn-box">
  27 + <view class="product-check-info">
  28 + <view class="check-all-btn" @click.stop="handleCheckAllProduct">
  29 + <u-icon v-if="isCheckAll" name="checkmark-circle-fill" color="#3c9cff" size="22"></u-icon>
  30 + <view v-else class="un-check-box"></view>
  31 + </view>
  32 + <view class="info-text">合计：</view>
  33 + <view>
  34 + <yd-text-price color="red" size="15" intSize="20" :price="totalAmount"></yd-text-price>
  35 + </view>
  36 + </view>
  37 +
  38 + <view v-if="checkedProduct.length > 0" class="cart-btn-group">
  39 + <u-button type="warning" shape="circle" size="small" text="移除" @click="handleRemoveProduct"></u-button>
  40 + <view class="btn-gap"></view>
  41 + <u-button style="margin-left: 10px" class="main-btn" type="primary" shape="circle" size="small" text="去结算" @click="handleCheckoutProduct"></u-button>
  42 + </view>
  43 + <view v-else class="cart-btn-group">
  44 + <u-button type="warning" shape="circle" size="small" text="移除" disabled></u-button>
  45 + <view class="btn-gap"></view>
  46 + <u-button style="margin-left: 10px" class="main-btn" type="primary" shape="circle" size="small" text="去结算" disabled></u-button>
  47 + </view>
13 48 </view>
14 49 </view>
15 50 </view>
... ... @@ -19,34 +54,172 @@
19 54 export default {
20 55 data() {
21 56 return {
22   - title: ''
  57 + title: '',
  58 + cartList: [],
  59 + checkedNumber: 0,
  60 + totalAmount: 0
23 61 }
24 62 },
25   - onLoad() {},
26   - methods: {},
27 63 computed: {
  64 + checkedProduct() {
  65 + return this.cartList.filter(item => {
  66 + return item.checked
  67 + })
  68 + },
  69 + isCheckAll() {
  70 + if (this.cartList.length < 1) {
  71 + return false
  72 + }
  73 + return this.cartList.every(item => {
  74 + return item.checked
  75 + })
  76 + },
28 77 hasLogin() {
29 78 return this.$store.getters.hasLogin
30 79 }
  80 + },
  81 + onShow() {
  82 + if (this.hasLogin) {
  83 + this.loadCartDetailData()
  84 + } else {
  85 + this.cartList =[]
  86 + }
  87 + },
  88 + methods: {
  89 + loadCartDetailData() {
  90 + this.$store.dispatch('CartProductDetail').then(res => {
  91 + this.cartList = res.data || []
  92 + })
  93 + },
  94 + /** 商品全选/取消全选 */
  95 + handleCheckAllProduct() {
  96 + if (this.cartList.length < 1) {
  97 + return
  98 + }
  99 + const productIds = this.cartList.map(item => {
  100 + return item.productId
  101 + })
  102 + this.$store.dispatch('CartProductCheckChange', { productIds, checked: !this.isCheckAll }).then(res => {
  103 + this.cartList = res.data || []
  104 + })
  105 + },
  106 + /** 商品单选/取消单选 */
  107 + handleProductCheckedChange(productId, checked) {
  108 + this.$store.dispatch('CartProductCheckChange', { productIds: [productId], checked: checked }).then(res => {
  109 + this.cartList = res.data || []
  110 + })
  111 + },
  112 + /** 修改购物车商品数量 */
  113 + handleProductCountChange(productId, number) {
  114 + this.$store.dispatch('CartProductCountChange', { productIds: [productId], productCount: number }).then(res => {
  115 + this.cartList = res.data || []
  116 + })
  117 + },
  118 + /** 移除购物车商品 */
  119 + handleRemoveProduct() {
  120 + if (this.checkedProduct < 1) {
  121 + return
  122 + }
  123 + const productIds = this.checkedProduct.map(item => {
  124 + return item.productId
  125 + })
  126 +
  127 + uni.showModal({
  128 + title: '确定要移除选中的商品？',
  129 + cancelText: '取消',
  130 + confirmText: '移除',
  131 + success: res => {
  132 + if (res.confirm) {
  133 + this.$store.dispatch('CartProductCountChange', { productIds: productIds, productCount: 0 }).then(res => {
  134 + this.cartList = res.data || []
  135 + })
  136 + } else if (res.cancel) {
  137 + //console.log('用户点击取消')
  138 + }
  139 + }
  140 + })
  141 + },
  142 + /** 购物车提交结算 */
  143 + handleCheckoutProduct() {
  144 + if (this.checkedProduct < 1) {
  145 + return
  146 + }
  147 + const checkedProduct = this.checkedProduct.map(item => {
  148 + return { productId: item.productId, productCount: item.productCount, sellPrice: item.sellPrice }
  149 + })
  150 + uni.$u.route('/pages/checkout/checkout', {
  151 + checkedProduct: JSON.stringify(checkedProduct)
  152 + })
  153 + }
31 154 }
32 155 }
33 156 </script>
34 157  
35 158 <style lang="scss" scoped>
36   -.cart-empty {
37   - padding-top: 100rpx;
38   -}
39   -
40 159 .login-tips-box {
41 160 padding-top: 100rpx;
  161 +
42 162 .login-tips {
43 163 @include flex-center;
44 164 color: #939393;
45   - font-size: 28rpx;
  165 + font-size: 24rpx;
46 166 letter-spacing: 5rpx;
47 167 }
  168 +
48 169 .login-link {
49   - color: $u-primary;
  170 + width: 160rpx;
  171 + height: 50rpx;
  172 + line-height: 50rpx;
  173 + border-radius: 50rpx;
  174 + border: 1px solid #777;
  175 + color: #777;
  176 + text-align: center;
  177 + }
  178 +}
  179 +
  180 +.cart-btn-container {
  181 + position: fixed;
  182 + bottom: 0;
  183 + left: 0;
  184 +
  185 + .btn-box {
  186 + background: $custom-bg-color;
  187 + border-top: $custom-border-style;
  188 +
  189 + width: 750rpx;
  190 + @include flex-space-between();
  191 + height: 100rpx;
  192 +
  193 + .product-check-info {
  194 + @include flex-left;
  195 +
  196 + .check-all-btn {
  197 + padding: 20rpx;
  198 +
  199 + .un-check-box {
  200 + width: 20px;
  201 + height: 20px;
  202 + border: 1px solid #939393;
  203 + border-radius: 50%;
  204 + }
  205 + }
  206 +
  207 + .info-text {
  208 + font-size: 26rpx;
  209 + font-weight: bold;
  210 + color: #666666;
  211 + }
  212 + }
  213 +
  214 + .cart-btn-group {
  215 + @include flex-right();
  216 + width: 360rpx;
  217 + padding-right: 10px;
  218 +
  219 + .btn-gap {
  220 + width: 20rpx;
  221 + }
  222 + }
50 223 }
51 224 }
52 225 </style>
... ...
yudao-ui-app/pages/checkout/checkout.vue 0 → 100644
  View file @6878ac0
  1 +<template>
  2 + <view class="container">
  3 + <!-- 收货地址选择 -->
  4 + <yd-address-select :address="address"></yd-address-select>
  5 +
  6 + <!-- 订单商品信息 -->
  7 + <view class="checkout-goods">
  8 + <yd-order-goods :goods-list="checkoutList"></yd-order-goods>
  9 + </view>
  10 +
  11 + <view class="freight-coupon-box">
  12 + <vidw class="box-row">
  13 + <view class="title">运费</view>
  14 + <yd-text-price class="freight-fee" size="15" :price="freightAmount"></yd-text-price>
  15 + </vidw>
  16 + <vidw class="box-row">
  17 + <view class="coupon-wrap">
  18 + <view class="coupon-title-tag">
  19 + <view class="title">优惠券</view>
  20 + <scroll-view class="coupon-tag-list" scroll-x="true">
  21 + <view v-for="item in couponList" :key="item.couponId" class="coupon-tag-item">{{ item.couponTag }}</view>
  22 + </scroll-view>
  23 + </view>
  24 + <yd-text-price class="coupon-fee" color="red" size="15" symbol="-￥" :price="couponAmount"></yd-text-price>
  25 + </view>
  26 + <u-icon name="arrow-right"></u-icon>
  27 + </vidw>
  28 + </view>
  29 +
  30 + <!-- 订单备注信息 -->
  31 + <view class="user-remark-box">
  32 + <view class="title">订单备注</view>
  33 + <u--input maxlength="50" border="none" fontSize="14" v-model="remark" placeholder="如您需要请备注"></u--input>
  34 + </view>
  35 +
  36 + <view class="cart-btn-container">
  37 + <view class="order-total-wrap">
  38 + <view class="order-total-info">
  39 + <view class="info-text">合计：</view>
  40 + <view>
  41 + <yd-text-price color="red" size="15" intSize="20" :price="totalAmount"></yd-text-price>
  42 + </view>
  43 + </view>
  44 +
  45 + <view class="cart-btn-group">
  46 + <u-button style="margin-left: 10px" class="main-btn" type="primary" shape="circle" size="small" text="提交订单" @click="handleSubmitOrder"></u-button>
  47 + </view>
  48 + </view>
  49 + <u-safe-bottom customStyle="background: #ffffff"></u-safe-bottom>
  50 + </view>
  51 + </view>
  52 +</template>
  53 +
  54 +<script>
  55 +import { checkoutCartProduct } from '../../api/order'
  56 +
  57 +export default {
  58 + components: {},
  59 + data() {
  60 + return {
  61 + checkedProduct: [],
  62 + address: {
  63 + name: '客户',
  64 + mobile: '139****6563',
  65 + area: 'XXX市XXX区',
  66 + detail: 'XXX街道XXX小区XXX号楼XX-XXX'
  67 + },
  68 + checkoutList: [],
  69 + couponList: [
  70 + {
  71 + couponId: 3,
  72 + couponTag: '6元运费券'
  73 + }
  74 + ],
  75 + totalAmount: 0,
  76 + freightAmount: 6,
  77 + couponAmount: 6,
  78 + remark: ''
  79 + }
  80 + },
  81 + onLoad(e) {
  82 + const checkedProduct = e.checkedProduct
  83 + if (checkedProduct) {
  84 + this.checkedProduct = JSON.parse(checkedProduct)
  85 + this.loadCheckoutProductData()
  86 + } else {
  87 + uni.$u.toast('请求参数错误')
  88 + }
  89 + },
  90 + methods: {
  91 + loadCheckoutProductData() {
  92 + checkoutCartProduct(this.checkedProduct)
  93 + .then(res => {
  94 + this.checkoutList = res.data.checkoutList || []
  95 + this.totalAmount = res.data.totalAmount || 0
  96 + })
  97 + .catch(err => {
  98 + console.log(err)
  99 + })
  100 + }
  101 + }
  102 +}
  103 +</script>
  104 +
  105 +<style lang="scss" scoped>
  106 +.container {
  107 + background-color: $custom-bg-color;
  108 + height: 100vh;
  109 + overflow-x: scroll;
  110 +}
  111 +
  112 +.checkout-goods {
  113 + background-color: #fff;
  114 + margin-top: 20rpx;
  115 + padding: 20rpx;
  116 + border-radius: 20rpx;
  117 +}
  118 +
  119 +.freight-coupon-box {
  120 + background-color: #fff;
  121 + margin-top: 20rpx;
  122 + padding: 20rpx 30rpx;
  123 + border-radius: 20rpx;
  124 +
  125 + .box-row {
  126 + @include flex-space-between;
  127 + padding: 10rpx 0;
  128 +
  129 + .coupon-wrap {
  130 + @include flex-space-between;
  131 + width: 670rpx;
  132 +
  133 + .coupon-title-tag {
  134 + @include flex-left;
  135 +
  136 + .coupon-tag-list {
  137 + @include flex-left;
  138 + overflow-x: scroll;
  139 + width: 360rpx;
  140 + .coupon-tag-item {
  141 + display: inline-block;
  142 + font-size: 22rpx;
  143 + color: red;
  144 + border: 1rpx solid red;
  145 + padding: 1px 6rpx;
  146 + margin-right: 10rpx;
  147 + border-radius: 5rpx;
  148 + }
  149 + }
  150 + }
  151 + }
  152 +
  153 + .title {
  154 + font-weight: 700;
  155 + font-size: 30rpx;
  156 + color: #333;
  157 + margin-right: 30rpx;
  158 + }
  159 +
  160 + .freight-fee {
  161 + margin-right: 50rpx;
  162 + }
  163 +
  164 + .coupon-fee {
  165 + margin-right: 20rpx;
  166 + }
  167 + }
  168 +}
  169 +
  170 +.user-remark-box {
  171 + @include flex-space-between;
  172 + background-color: #fff;
  173 + margin-top: 20rpx;
  174 + padding: 30rpx;
  175 + border-radius: 20rpx;
  176 +
  177 + .title {
  178 + font-weight: 700;
  179 + font-size: 30rpx;
  180 + color: #333;
  181 + margin-right: 30rpx;
  182 + }
  183 +}
  184 +
  185 +.cart-btn-container {
  186 + position: fixed;
  187 + bottom: 0;
  188 + left: 0;
  189 +
  190 + .order-total-wrap {
  191 + background: $custom-bg-color;
  192 + border-top: $custom-border-style;
  193 +
  194 + width: 750rpx;
  195 + @include flex-space-between();
  196 + height: 100rpx;
  197 +
  198 + .order-total-info {
  199 + @include flex-left;
  200 + .info-text {
  201 + margin-left: 20rpx;
  202 + font-size: 26rpx;
  203 + font-weight: bold;
  204 + color: #666666;
  205 + }
  206 + }
  207 +
  208 + .cart-btn-group {
  209 + @include flex-right();
  210 + width: 360rpx;
  211 + padding-right: 10px;
  212 +
  213 + .btn-gap {
  214 + width: 20rpx;
  215 + }
  216 + }
  217 + }
  218 +}
  219 +</style>
... ...
yudao-ui-app/pages/index/index.vue
  View file @6878ac0
... ... @@ -8,7 +8,7 @@
8 8 </u-sticky>
9 9  
10 10 <!--轮播图-->
11   - <mkt-banner :banner-list="bannerList"></mkt-banner>
  11 + <yd-banner :banner-list="bannerList"></yd-banner>
12 12  
13 13 <u-gap height="20px"></u-gap>
14 14  
... ...
yudao-ui-app/pages/order/order.vue 0 → 100644
  View file @6878ac0
  1 +<template>
  2 + <view class="container">
  3 + <u-sticky style="top: 0" offset-top="0">
  4 + <u-tabs :list="statusArray" :current="statusIndex" @change="handleStatusChange"></u-tabs>
  5 + </u-sticky>
  6 + <view class="order-list">
  7 + <view v-for="(item, index) in orderList" :key="item.orderNo" class="order-item">
  8 + <view class="item-title">{{ item.orderNo }}</view>
  9 + <view class="item-content">{{ item.orderStatus }}</view>
  10 + <view class="item-btn-group"></view>
  11 + </view>
  12 + </view>
  13 + </view>
  14 +</template>
  15 +
  16 +<script>
  17 +import { getOrderPageData } from '../../api/order'
  18 +
  19 +export default {
  20 + name: 'order',
  21 + data() {
  22 + return {
  23 + pageNo: 1,
  24 + statusIndex: 0,
  25 + statusArray: [
  26 + {
  27 + name: '全部',
  28 + status: '-1'
  29 + },
  30 + {
  31 + name: '待付款',
  32 + status: '0'
  33 + },
  34 + {
  35 + name: '已付款',
  36 + status: '10'
  37 + },
  38 + {
  39 + name: '待发货',
  40 + status: '20'
  41 + },
  42 + {
  43 + name: '待收货',
  44 + status: '30'
  45 + },
  46 + {
  47 + name: '已完成',
  48 + status: '40'
  49 + },
  50 + {
  51 + name: '已取消',
  52 + status: '50'
  53 + }
  54 + ],
  55 + orderList: []
  56 + }
  57 + },
  58 + onLoad(e) {
  59 + const status = e.status
  60 + if (status !== undefined) {
  61 + this.statusArray.forEach((item, index) => {
  62 + if (item.status === status) {
  63 + this.statusIndex = index
  64 + }
  65 + })
  66 + }
  67 + this.loadOrderPageData()
  68 + },
  69 + methods: {
  70 + handleStatusChange(item) {
  71 + this.statusIndex = item.status
  72 + },
  73 + loadOrderPageData() {
  74 + let params = { pageNo: this.pageNo }
  75 + const status = this.statusArray[this.statusIndex].status
  76 + if (status >= 0) {
  77 + params.orderStatus = status
  78 + }
  79 + getOrderPageData(params)
  80 + .then(res => {
  81 + console.log(res)
  82 + })
  83 + .catch(err => {
  84 + console.log(err)
  85 + })
  86 + }
  87 + }
  88 +}
  89 +</script>
  90 +
  91 +<style lang="scss" scoped></style>
... ...
yudao-ui-app/pages/profile/profile.vue
  View file @6878ac0
... ... @@ -4,14 +4,14 @@
4 4 <view class="info-item">
5 5 <view class="label">头像：</view>
6 6 <view class="info" @click="handleAvatarClick">
7   - <u-avatar size="60" :src="userInfo.avatar"></u-avatar>
  7 + <u-avatar size="50" shape="square" :src="userInfo.avatar"></u-avatar>
8 8 <u-icon class="btn" name="arrow-right"></u-icon>
9 9 </view>
10 10 </view>
11 11 <view class="info-item">
12 12 <view class="label">昵称：</view>
13 13 <view class="info">
14   - <u--input maxlength="10" :border="borderStyle" v-model="userInfo.nickname" @focus="borderStyle = 'bottom'" inputAlign="right" @blur="borderStyle = 'none'" @change="handleNameChange"></u--input>
  14 + <u--input maxlength="10" border="none" v-model="userInfo.nickname" inputAlign="right" @change="handleNameChange"></u--input>
15 15 </view>
16 16 </view>
17 17 <view class="info-item">
... ... @@ -41,8 +41,7 @@ export default {
41 41 mobile: ''
42 42 },
43 43 avatarFiles: [],
44   - tempName: '',
45   - borderStyle: 'none'
  44 + tempName: ''
46 45 }
47 46 },
48 47 computed: {
... ...
yudao-ui-app/pages/setting/setting.vue 0 → 100644
  View file @6878ac0
  1 +<template>
  2 + <view class="container">
  3 + <u-gap height="20"></u-gap>
  4 + <u-cell-group class="setting-list" :border="false">
  5 + <u-cell class="setting-item" icon="lock" title="修改密码" isLink></u-cell>
  6 + <u-cell class="setting-item" icon="phone" title="换绑手机" isLink></u-cell>
  7 + <u-cell v-if="hasLogin" class="setting-item" icon="minus-circle" title="用户登出" @click="logout" isLink></u-cell>
  8 + </u-cell-group>
  9 + </view>
  10 +</template>
  11 +
  12 +<script>
  13 +import UGap from '../../uni_modules/uview-ui/components/u-gap/u-gap'
  14 +
  15 +export default {
  16 + components: { UGap },
  17 + data() {
  18 + return {}
  19 + },
  20 + computed: {
  21 + hasLogin() {
  22 + return this.$store.getters.hasLogin
  23 + }
  24 + },
  25 + onLoad() {},
  26 + methods: {
  27 + logout() {
  28 + uni.showModal({
  29 + title: '提示',
  30 + content: '您确定要退出登录吗',
  31 + success: res => {
  32 + if (res.confirm) {
  33 + this.$store.dispatch('Logout').then(res => {
  34 + uni.switchTab({
  35 + url: '/pages/user/user'
  36 + })
  37 + })
  38 + } else if (res.cancel) {
  39 + //console.log('用户点击取消')
  40 + }
  41 + }
  42 + })
  43 + }
  44 + }
  45 +}
  46 +</script>
  47 +
  48 +<style lang="scss" scoped>
  49 +.setting-list {
  50 + padding: 10rpx 0;
  51 + background-color: #fff;
  52 + border-radius: 15rpx;
  53 +
  54 + .setting-item {
  55 + padding: 10rpx 0;
  56 +
  57 + &:last-child {
  58 + border-bottom: none;
  59 + }
  60 + }
  61 +}
  62 +</style>
... ...
yudao-ui-app/pages/user/user.vue
  View file @6878ac0
1 1 <template>
2 2 <view class="container">
3 3 <view class="user-header">
4   - <view class="user-info" @click="loginOrJump('/pages/profile/profile')">
5   - <u-avatar size="80" :src="userInfo.avatar"></u-avatar>
6   - <text class="nick-name">{{ hasLogin ? userInfo.nickname || '游客' : '登录/注册' }}</text>
  4 + <view class="user-info" @click="pageRouter('/pages/profile/profile')">
  5 + <u-avatar size="60" shape="square" :src="userInfo.avatar"></u-avatar>
  6 + <view class="info-text">
  7 + <view class="user-nickname">{{ hasLogin ? userInfo.nickname || ' ' : '匿名用户' }}</view>
  8 + <view class="user-mobile">{{ hasLogin ? userInfo.mobile || ' ' : '登录/注册' }}</view>
  9 + </view>
  10 + </view>
  11 + <view class="user-setting">
  12 + <u-icon v-if="hasLogin" name="setting" color="#939393" size="22" @click="pageRouter('/pages/setting/setting')"></u-icon>
7 13 </view>
8 14 </view>
9 15  
... ... @@ -12,7 +18,7 @@
12 18 <view>
13 19 <view class="order-header">
14 20 <text class="order-title">我的订单</text>
15   - <view class="see-all">
  21 + <view class="see-all" @click="pageRouter(orderPage, -1)">
16 22 <text>查看全部</text>
17 23 <u-icon name="arrow-right"></u-icon>
18 24 </view>
... ... @@ -20,7 +26,7 @@
20 26  
21 27 <view class="order-status-box">
22 28 <u-grid :border="false" :col="orderStatusList.length">
23   - <u-grid-item v-for="(item, index) in orderStatusList" :key="index">
  29 + <u-grid-item v-for="(item, index) in orderStatusList" :key="index" @click="pageRouter(orderPage, item.state)">
24 30 <u-icon :name="item.icon" :size="32"></u-icon>
25 31 <text class="grid-title">{{ item.title }}</text>
26 32 </u-grid-item>
... ... @@ -45,12 +51,9 @@
45 51 <u-cell class="fun-item" :border="false" icon="gift" title="分销中心" isLink></u-cell>
46 52 <u-cell class="fun-item" :border="false" icon="tags" title="领券中心" isLink></u-cell>
47 53 <u-cell class="fun-item" :border="false" icon="coupon" title="我的优惠券" isLink></u-cell>
48   - <u-cell class="fun-item" :border="false" icon="map" title="收货地址" @click="loginOrJump('/pages/address/list')" isLink></u-cell>
  54 + <u-cell class="fun-item" :border="false" icon="map" title="收货地址" @click="pageRouter('/pages/address/list')" isLink></u-cell>
49 55 </u-cell-group>
50 56  
51   - <view v-if="hasLogin" class="logout-btn">
52   - <u-button type="error" color="#ea322b" text="退出登录" @click="logout"></u-button>
53   - </view>
54 57 </view>
55 58 </template>
56 59  
... ... @@ -58,11 +61,12 @@
58 61 export default {
59 62 data() {
60 63 return {
  64 + orderPage: '/pages/order/order',
61 65 orderStatusList: [
62   - { icon: 'rmb-circle', title: '待支付' },
63   - { icon: 'car', title: '代发货' },
64   - { icon: 'order', title: '待收货' },
65   - { icon: 'integral', title: '已完成' }
  66 + { icon: 'red-packet', title: '待付款', state: '0' },
  67 + { icon: 'car', title: '待发货', state:'20' },
  68 + { icon: 'order', title: '待收货', state: '30' },
  69 + { icon: 'integral', title: '已完成', state: '40' }
66 70 ],
67 71 statList: [
68 72 { value: '0', title: '我的收藏' },
... ... @@ -77,9 +81,13 @@ export default {
77 81 }
78 82 },
79 83 methods: {
80   - loginOrJump(pageUrl) {
  84 + pageRouter(pageUrl, param) {
81 85 if (!this.hasLogin) {
82 86 uni.$u.route('/pages/login/social')
  87 + } else if (pageUrl === this.orderPage) {
  88 + uni.$u.route(this.orderPage, {
  89 + status: param
  90 + });
83 91 } else {
84 92 uni.$u.route(pageUrl)
85 93 }
... ... @@ -110,17 +118,38 @@ export default {
110 118 </script>
111 119  
112 120 <style lang="scss" scoped>
  121 +
113 122 .user-header {
114   - @include flex-center(column);
115   - height: 280rpx;
  123 + background-color: #fff;
  124 + @include flex-space-between;
  125 + padding: 30rpx;
  126 + height: 200rpx;
  127 +
116 128 .user-info {
117   - @include flex-center(column);
118   - .nick-name {
119   - margin-top: 20rpx;
120   - font-size: 32rpx;
121   - font-weight: 700;
  129 + @include flex-left;
  130 + align-items: center;
  131 +
  132 + .info-text {
  133 + margin-left: 20rpx;
  134 +
  135 + .user-nickname {
  136 + font-size: 30rpx;
  137 + font-weight: 700;
  138 + line-height: 50rpx;
  139 + }
  140 +
  141 + .user-mobile {
  142 + font-size: 24rpx;
  143 + font-weight: 700;
  144 + color: #939393;
  145 + line-height: 50rpx;
  146 + }
122 147 }
123 148 }
  149 +
  150 + .user-setting {
  151 + margin-right: 5rpx;
  152 + }
124 153 }
125 154  
126 155 .order-header {
... ... @@ -168,8 +197,4 @@ export default {
168 197 }
169 198 }
170 199  
171   -.logout-btn {
172   - margin: 60rpx auto 0;
173   - width: 400rpx;
174   -}
175 200 </style>
... ...
yudao-ui-app/store/index.js
  View file @6878ac0
1 1 import Vue from 'vue'
2 2 import Vuex from 'vuex'
3 3 import user from './mudules/user'
  4 +import cart from './mudules/cart'
4 5 import getters from './getters'
5 6  
6 7 Vue.use(Vuex) // vue的插件机制
... ... @@ -8,7 +9,8 @@ Vue.use(Vuex) // vue的插件机制
8 9 // Vuex.Store 构造器选项
9 10 const store = new Vuex.Store({
10 11 modules: {
11   - user
  12 + user,
  13 + cart
12 14 },
13 15 getters
14 16 })
... ...
yudao-ui-app/store/mudules/cart.js 0 → 100644
  View file @6878ac0
  1 +import { getCartDetail } from '@/api/cart'
  2 +
  3 +const cart = {
  4 + state: {
  5 + cartCount: 0
  6 + },
  7 + mutations: {
  8 + //记录购物车商品数量
  9 + SET_CART_COUNT(state, data) {
  10 + const arr = data.length || []
  11 + state.cartNumber = arr.length
  12 + }
  13 + },
  14 + actions: {
  15 + //获取购物车数据
  16 + CartProductDetail({ state, commit }) {
  17 + return getCartDetail()
  18 + .then(res => {
  19 + commit('SET_CART_COUNT', res.data)
  20 + return Promise.resolve(res)
  21 + })
  22 + .catch(err => {
  23 + return Promise.reject(err)
  24 + })
  25 + }
  26 + }
  27 +}
  28 +export default cart
... ...