购物车

mini-app/project.config.json

@@ -134,6 +134,12 @@
 					"pathName": "pages/index",
 					"query": "",
 					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "订单列表",
+					"pathName": "pages/mall/order/order-list",
+					"scene": null
 				}
 			]
 		}

mini-app/src/apis/orderApis.js

@@ -20,6 +20,13 @@ class OrderApis {
     })
   }
 
+  getOrderList(data) {
+    return request.get({
+      url: baseUrl + 'winery/user_orders/list',
+      data: data
+    })
+  }
+
 }
 
 export default new OrderApis()

mini-app/src/app.wpy

@@ -105,6 +105,8 @@ pages: [
 'pages/mall/goods-detail',
 'pages/mall/user/user-address',
 'pages/mall/user/user-address-list',
+'pages/mall/order/order-list',
+'pages/mall/shopping-car/shopping-car-list',
 'pages/winery/winery-detail'
 
 ],
@@ -151,6 +153,10 @@ usingComponents: {
 "van-loading": "./vant/loading/index",
 "van-empty": "./vant/empty/index",
 "van-notice-bar": "./vant/notice-bar/index",
+"van-tabs": "./vant/tabs/index",
+"van-tab": "./vant/tab/index",
+"van-submit-bar": "./vant/submit-bar/index",
+
 "van-area": "./vant/area/index"
 }
 }

mini-app/src/components/mall/order/order-list-body.wpy

@@ -0,0 +1,112 @@
+<style lang="less">
+
+
+</style>
+
+<wxs module="filters" lang="babel">
+const parseImage = (imageKey) => {
+return 'https://winery-1257413599.cos.ap-beijing.myqcloud.com/' + imageKey
+}
+module.exports.parseImage = parseImage;
+</wxs>
+<template>
+
+
+  <div style="width: 100%;">
+
+    <van-loading wx:if="{{ !isInit }}" style="margin-top: 20px;"></van-loading>
+    <view wx:else>
+
+
+
+
+      <div v-if="records.length < 1" style="display: flex;flex-direction: column;align-items: center;width: 100%;">
+        <van-empty description="暂无订单" />
+      </div>
+
+
+
+      <div v-for="(item,index) in records"  style="width: 100%;">
+        <van-card
+          :num="item.goodsPrice"
+          tag="标签"
+          price="10.00"
+          desc="描述信息"
+          :title="item.goodsName"
+          :thumb="filters.parseImage(item.goodsFaceImg)"
+
+        >
+          <view slot="footer">
+            <van-button size="mini" plain @tap="onRefund(item)">申请退款</van-button>
+            <van-button size="mini" plain @tap="onDetail(item)" style="margin-left: 10px;">查看详情</van-button>
+          </view>
+        </van-card>
+
+
+      </div>
+    </view>
+  </div>
+
+</template>
+
+<script>
+import wepy from '@wepy/core'
+import store from '@/store'
+
+import { mapActions, mapState } from '@wepy/x'
+import defaultMix from '../../../mixins/defaultMix'
+import appManager from '../../../appManager'
+
+import orderApis from '../../../apis/orderApis'
+
+wepy.component({
+  store,
+  hooks: {},
+  data: {
+    records: [],
+    isInit: false
+
+  },
+  mixins: [defaultMix],
+  computed: {
+    ...mapState({
+      'imageDefine': state => state.imageDefine,
+      'user': state => state.user,
+      'navDefine': state => state.navDefine,
+      'userAddress': state => state.userAddress
+    })
+  },
+
+  methods: {
+
+    onRefund(item) {
+
+    },
+    onDetail(item) {
+
+    },
+    async init() {
+      this.isInit = false
+      const req = await orderApis.getOrderList()
+
+      if (req.code === 200) {
+        this.records = req.rows
+      }
+
+      this.isInit = true
+    }
+  },
+
+  ready() {
+    this.init()
+  },
+  onShow() {
+    this.init()
+  }
+})
+</script>
+<config>
+{
+navigationBarTitleText: ''
+}
+</config>

mini-app/src/components/mall/shopping-car/shopping-car-item.wpy

@@ -0,0 +1,64 @@
+<style lang="less">
+
+
+</style>
+
+<wxs module="filters" lang="babel">
+const parseImage = (imageKey) => {
+return 'https://winery-1257413599.cos.ap-beijing.myqcloud.com/' + imageKey
+}
+module.exports.parseImage = parseImage;
+</wxs>
+<template>
+  <van-card
+    :num="item.goodsCount"
+    :price="item.goodsPrice"
+    desc="描述信息"
+    :title="item.goodsName"
+
+  >
+    <view slot="thumb" style="display: flex; align-items: center;">
+
+      <van-checkbox :value="item.isChecked" bind:change="onCheck" />
+      <van-image width="60px" height="60px" :src="filters.parseImage(item.goodsFaceImg)"
+                 style="margin-left: 5px;" />
+    </view>
+    <view slot="footer">
+      <van-stepper :value="item.goodsCount" @change="onGoodsCount" />
+    </view>
+  </van-card>
+</template>
+
+<script>
+import wepy from '@wepy/core'
+import store from '@/store'
+import { mapActions } from '@wepy/x'
+
+wepy.component({
+  store,
+  hooks: {},
+
+  props: {
+    item: {}
+  },
+
+  data: {},
+
+  computed: {},
+
+  methods: {
+    onGoodsCount(e) {
+      this.$emit('changeGoodsCount', this.item, e.$wx.detail)
+    },
+    onCheck(e) {
+      this.$emit('changeGoodsSelect', this.item, e.$wx.detail)
+    }
+
+  }
+
+})
+</script>
+<config>
+{
+}
+</config>

mini-app/src/components/mall/tab/mall-home.wpy

@@ -190,6 +190,8 @@ import store from '@/store'
 import { mapActions, mapState } from '@wepy/x'
 import defaultMix from '../../../mixins/defaultMix'
 import orderApis from '../../../apis/orderApis'
+import appManager from '../../../appManager'
+import { navDefine } from '../../../store/constant/navDefine'
 
 wepy.component({
   store,
@@ -218,6 +220,9 @@ wepy.component({
   methods: {
 
     onShoppingCar() {
+      appManager.navigateTo(navDefine.SHOPPING_CAR_LIST)
+      return
+
       let test = {
         goodsId: '12',
         goodsName: 'test',
@@ -244,7 +249,6 @@ wepy.component({
           paySign: payData.paySign,
           success: function(res) {
 
-
           },
           fail: function(res) {
           }

mini-app/src/components/mall/tab/mall-my.wpy

@@ -30,7 +30,7 @@
   border: transparent 1px solid;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
-  width: 660rpx;
+  width: 620rpx;
   margin-top: 20px;
   box-shadow: 4px 4px 10px #eeeeee;
   background-color: orange;

mini-app/src/pages/mall/goods-detail.wpy

@@ -19,11 +19,11 @@ module.exports.parseImage = parseImage;
 
     <div v-else>
 
-      <swiper indicator-dots="true" autoplay="true" interval="3000">
+      <swiper indicator-dots="true" autoplay="true" interval="3000" style="height: 750rpx;">
         <block v-for="(item,index) in goodsImages" wx:key="index">
           <swiper-item>
             <view class="swiper-item">
-              <image :src="filters.parseImage(item)" style="width: 100%;height: 150px;" mode="scaleToFill" />
+              <image :src="filters.parseImage(item)" style="width: 100%;height: 750rpx;" mode="scaleToFill" />
             </view>
           </swiper-item>
         </block>

mini-app/src/pages/mall/order/order-list.wpy

@@ -0,0 +1,108 @@
+<style lang="less">
+
+
+</style>
+
+<wxs module="filters" lang="babel">
+const parseImage = (imageKey) => {
+return 'https://winery-1257413599.cos.ap-beijing.myqcloud.com/' + imageKey
+}
+module.exports.parseImage = parseImage;
+</wxs>
+<template>
+
+  <nav-bar title="我的订单" />
+
+
+  <div style="width: 100%;">
+
+
+    <van-tabs active="{{ activeTab }}" bind:change="onChangeTab">
+      <van-tab title="全部">
+        <order-list-body />
+      </van-tab>
+      <van-tab title="待付款">
+        <order-list-body />
+      </van-tab>
+      <van-tab title="待收货">
+        <order-list-body />
+      </van-tab>
+      <van-tab title="已完成">
+        <order-list-body />
+      </van-tab>
+      <van-tab title="已取消">
+        <order-list-body />
+      </van-tab>
+    </van-tabs>
+
+
+  </div>
+
+</template>
+
+<script>
+import wepy from '@wepy/core'
+import store from '@/store'
+
+import { mapActions, mapState } from '@wepy/x'
+import defaultMix from '../../../mixins/defaultMix'
+import appManager from '../../../appManager'
+import addressApis from '../../../apis/addressApis'
+import { userAddressPage } from '../../../store/constant/nav/home'
+import orderApis from '../../../apis/orderApis'
+
+wepy.page({
+  store,
+  hooks: {},
+  data: {
+    activeTab: 0,
+    records: [],
+    isInit: false
+
+  },
+  mixins: [defaultMix],
+  computed: {
+    ...mapState({
+      'imageDefine': state => state.imageDefine,
+      'user': state => state.user,
+      'navDefine': state => state.navDefine,
+      'userAddress': state => state.userAddress
+    })
+  },
+
+  methods: {
+
+    onChangeTab(e) {
+      this.activeTab = e.$wx.event.detail.name
+    },
+    async init() {
+      // this.isInit = false
+      // const req = await orderApis.getOrderList()
+      //
+      // if (req.code === 200) {
+      //   this.records = req.rows
+      // }
+      //
+      // this.isInit = true
+    }
+  },
+
+  ready() {
+    this.init()
+  },
+  onShow() {
+    this.init()
+  }
+})
+</script>
+<config>
+{
+navigationBarTitleText: '',
+
+usingComponents: {
+'order-list-body': '../../../components/mall/order/order-list-body'
+}
+
+
+}
+</config>

mini-app/src/pages/mall/shopping-car/shopping-car-list.wpy

@@ -0,0 +1,166 @@
+<style lang="less">
+
+
+</style>
+
+<wxs module="filters" lang="babel">
+const parseImage = (imageKey) => {
+return 'https://winery-1257413599.cos.ap-beijing.myqcloud.com/' + imageKey
+}
+module.exports.parseImage = parseImage;
+</wxs>
+<template>
+
+  <nav-bar title="我的购物车" />
+
+
+  <div style="width: 100%;">
+
+    <van-loading wx:if="{{ !isInit }}" style="margin-top: 20px;"></van-loading>
+    <view wx:else>
+
+
+      <div v-if="records.length < 1" style="display: flex;flex-direction: column;align-items: center;width: 100%;">
+        <van-empty description="暂无内容" />
+      </div>
+
+      <van-checkbox-group value="{{ checkList }}" bind:change="onChangeCheckbox">
+        <div v-for="(item,index) in records" style="width: 100%;">
+
+          <van-card
+            :num="item.goodsCount"
+            :price="item.goodsPrice"
+            desc="描述信息"
+            :title="item.goodsName"
+
+          >
+            <view slot="thumb" style="display: flex; align-items: center;">
+
+              <van-checkbox :name="item.goodsId" />
+              <van-image width="60px" height="60px" :src="filters.parseImage(item.goodsFaceImg)"
+                         style="margin-left: 5px;" />
+            </view>
+            <view slot="footer">
+              <van-stepper id="{{item.id}}" name="{{item.id}}" value="{{item.goodsCount}}" @change="onGoodsCount" />
+            </view>
+          </van-card>
+
+
+        </div>
+      </van-checkbox-group>
+    </view>
+
+
+  </div>
+
+  <van-submit-bar
+    price="{{totalPrice}}"
+    button-text="提交订单"
+    bind:submit="onSubmit"
+    :tip="false"
+  >
+    <van-checkbox
+      value="{{ isCheckedAll }}"
+      checked-color="#07c160"
+      bind:change="onCheckedAll"
+
+    >
+      全选
+    </van-checkbox>
+    <!--    <view slot="tip">您的收货地址不支持同城送,-->
+    <!--      <text>修改地址</text>-->
+    <!--    </view>-->
+  </van-submit-bar>
+
+
+</template>
+
+<script>
+import wepy from '@wepy/core'
+import store from '@/store'
+
+import { mapActions, mapState } from '@wepy/x'
+import defaultMix from '../../../mixins/defaultMix'
+import orderApis from '../../../apis/orderApis'
+
+wepy.page({
+  store,
+  hooks: {},
+  data: {
+
+    records: [],
+    isInit: false,
+    isCheckedAll: true,
+    checkList: []
+
+  },
+  mixins: [defaultMix],
+  computed: {
+    ...mapState({
+      'imageDefine': state => state.imageDefine,
+      'user': state => state.user,
+      'navDefine': state => state.navDefine,
+      'userAddress': state => state.userAddress
+    }),
+    totalPrice() {
+      let temp = this.records.filter(x => this.checkList.indexOf(x.goodsId) > -1)
+      let result = 0.0
+      temp.forEach(x => {
+        result += x.goodsPrice
+      })
+      console.log('总计：', result)
+      return result * 100
+    }
+  },
+  events: {},
+
+  methods: {
+
+    onChangeCheckbox(e) {
+      this.checkList = e.$wx.detail
+      this.isCheckedAll = this.checkList.length === this.records.length
+    },
+    onSubmit() {
+
+    },
+    onCheckedAll(e) {
+      this.isCheckedAll = e.$wx.detail
+      this.checkList = this.isCheckedAll ? this.records.map(x => x.goodsId) : []
+    },
+    onGoodsCount(e) {
+      console.log(e)
+
+      this.records.filter(x => x.id === e.target.id)[0].goodsCount = e.$wx.detail
+    },
+    async init() {
+      this.isInit = false
+      const req = await orderApis.getOrderList()
+
+      if (req.code === 200) {
+        this.records = req.rows
+        this.checkList = this.records.map(x => x.goodsId)
+      }
+
+      this.isInit = true
+    }
+  },
+
+  ready() {
+    this.init()
+  },
+  onShow() {
+    this.init()
+  }
+})
+</script>
+<config>
+{
+navigationBarTitleText: '',
+
+usingComponents: {
+'shopping-car-item': '../../../components/mall/shopping-car/shopping-car-item'
+}
+
+
+}
+</config>

mini-app/src/store/constant/nav/my.js

@@ -4,16 +4,16 @@ export const myMenuList1 = [
   {
     name: '全部订单',
     icon: imgbaseUrl + 'doctor.png',
-    path: '/pages/mail/order/orderList'
+    path: '/pages/mall/order/order-list'
   },
   {
     name: '待付款',
     icon: imgbaseUrl + 'doctor.png',
-    path: '/pages/mail/order/orderList?orderStatus=1'
+    path: '/pages/mall/order/order-list?orderStatus=1'
   }, {
     name: '待收货',
     icon: imgbaseUrl + 'doctor.png',
-    path: '/pages/mail/order/orderList?orderStatus=2'
+    path: '/pages/mall/order/order-list?orderStatus=2'
   }
 ]
 export const myMenuList2 = [

mini-app/src/store/constant/navDefine.js

@@ -13,7 +13,8 @@ export const navDefine = {
 
   MY_MENU1: myMenuList1,
   MY_MENU2: myMenuList2,
-  MY_MENU3: myMenuList3
+  MY_MENU3: myMenuList3,
+
+  SHOPPING_CAR_LIST: '/pages/mall/shopping-car/shopping-car-list'
 
 }
-