update收获地址

xuxy

2024-07-10 98f4b7ec4164ec1c6798c8c4188b93f4ce48ec46

 sub_pages/customer/trade/trade.vue

@@ -1,22 +1,613 @@
<template>
   <view>
		
   <view class="container-canteen" style="min-height: calc(100vh - 20rpx );">

      <view class="canteen-items" style="min-height: calc(100vh - 360rpx);">
         <view v-if="(!list||list.length==0)&&true" style="width: 100%;min-height: 200rpx;">
            &nbsp;
         </view>
         <no-data v-if="(!list||list.length==0)&&true" style="width: 100%;margin-top: 220rpx;"></no-data>
         <view class="" style="display: flex;flex-wrap: inherit;" v-else>
            <view class="type-list">
               <view v-for="(item,index) of types" @click="changeType(item)"
                  :class="[query.typeId==item.id?'current':'']" :key="index" class="p10 flex type-item">
                  {{item.name || '-'}}
               </view>
            </view>
            <view class="canteen-item-container">
               <view v-for="(item,index) of listFilter" :key="item.id" class="p10 canteen-item list"
                  style="display: flex;flex-wrap: inherit;">
                  <view class="m-r-10">
                     <image :src="item.cover" mode="scaleToFill" class="cover" @click="previewImg(item.cover)">
                     </image>
                  </view>
                  <view class="cateen_infos list">
                     <view class="title">{{item.name}}</view>
                     <view class="desc">月售:{{item.monthSale || '0'}}</view>
                     <view class="flex bottom-buttons flex">
                        <view class="price flex">
                           <view class="icon">￥</view>
                           <view class='num'>{{item.price || '-'}}</view>
                        </view>
                        <view class="icons flex">
                           <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"
                              @click="mulnum(item)"></uni-icons>
                           <view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{item.shopnum}}</view>
                           <uni-icons type="plus-filled" size="32" @click="addnum(item)"></uni-icons>
                        </view>
                     </view>
                  </view>
                  <view style="padding-bottom:100rpx">
                  </view>
               </view>

               <footer-msg v-if="query.block&&query.schoolArea"
                  :more="page.total>0&&page.total>page.current*page.size"></footer-msg>

            </view>
         </view>

      </view>



      <view style="min-height:200rpx">
      </view>
      <common-footer flg="1"></common-footer>

   </view>
</template>

<script>
   import {
      mapState
   } from 'vuex'
   export default {
      data() {
         return {
				
            list: [],
            showpop: false,
            query: {
               name: '',
               // status:'',
               schoolArea: '',
               schoolAreaStr: '',
               block: '',
               blockStr: '',
               typeId: '',
            },
            types: [{
               name: '全部',
               id: ''
            }],
            schools: [],
            schoolIndex: -1,
            blockIndex: -1,
            blocks: [],
            shoptotal: 0,
            cal: 0,
         }
      },
      async onLoad() {
         // this.list = [{
         //    'shopnum': 0
         // }, {
         //    'shopnum': 1
         // }]

         //加载分类
         this.$http.request('get', '/api/canteen/goods/type/list', {
            params: {
               size: 100
            }
         }).then(async res => {
            if (res.code == 0) {
               this.types = res.data && res.data.records || []
               this.types.unshift({
                  name: '全部',
                  id: ''
               });

            }
         })

         this.listApi = '/api/canteen/customer/goods/list'

         // this.getList()
         //加载校区、楼栋
         this.$http.request('get', '/api/school/area/list', {

         }).then(async res => {
            if (res.code == 0) {
               this.schools = res.data || []
               // this.schools = [{
               //    'name': '全部',
               //    'id': '',
               // }]
               // for (var item of arr) {
               //    this.schools.push(item)
               // }
            }
            console.log('schools', this.schools)
            var schoolIndex = uni.getStorageSync('schoolIndex')
            if (!schoolIndex && schoolIndex !== 0) {
               // await this.getList()
               // this.list.forEach(item => {
               //    if (!item.shopnum) {
               //       item.shopnum = 0
               //    }
               // })
            } else {
               this.schoolIndex = schoolIndex
               if (this.schoolIndex >= 0) {
                  this.PickerChangeSchool({
                     detail: {
                        value: this.schoolIndex
                     }
                  })
                  // await this.getList()
                  // this.list.forEach(item => {
                  //    if (!item.shopnum) {
                  //       item.shopnum = 0
                  //    }
                  // })
               }
            }

         })


      },
      methods: {
			
         changeType(item) {
            this.query.typeId = item.id || ''
         },
         async PickerChangeSchool(e) {
            if (e.detail.value == '-1') {
               this.$message.showToast('未选择校区')
               return
            }
            this.schoolIndex = parseInt(e.detail.value)
            this.query.schoolArea = this.schools[this.schoolIndex].id
            this.blockIndex = -1

            this.$message.showLoading()
            var {
               data
            } = await this.$http.request('get', '/api/school/block/list', {
               params: {
                  schoolArea: this.query.schoolArea,
                  size: 200
               }
            })

            this.blocks = data && data.records || []
            // var arr = data.records || []
            // this.blocks = [{
            //    'name': '全部',
            //    'id': '',
            // }]
            // for (var item of arr) {
            //    this.blocks.push(item)
            // }
            this.$message.hideLoading()
            if (this.blocks.length >= 1) {
               this.query.block = this.blocks[0].id
               this.query.blockStr = this.blocks[0].name
               this.page.current = 1
               this.blockIndex = 0
               this.list = []
               this.getList()
            } else {
               this.page.current = 1
               this.list = []
            }



         },
         async PickerChangeBlock(e) {
            if (e.detail.value == '-1') {
               this.$message.showToast('未选择楼栋')
               return
            }
            this.blockIndex = parseInt(e.detail.value)
            this.query.block = this.blocks[this.blockIndex].id
            this.page.current = 1
            // this.list = []
            this.list = []
            // this.getList()
            await this.getList()
            this.list.forEach(item => {
               if (!item.shopnum) {
                  item.shopnum = 0
               }
            })

         },
         mulnum(item) {
            if (item.shopnum > 0) {
               item.shopnum -= 1
            }
            this.shoptotal -= 1
            this.cal += 1
            this.$forceUpdate()

         },
         addnum(item) {
            // console.log('addnum', item)
            if (item.shopnum) {
               item.shopnum += 1
            } else {
               item.shopnum = 1
            }
            this.shoptotal += 1
            this.cal += 1
            this.$forceUpdate()
         },
         openShopDetail() {
            // this.showpop = false
            // this.$forceUpdate()
            this.cal += 1
            this.$refs.popup_shop_detail.open()
            this.$nextTick(() => {
               this.$refs.addressselect && this.$refs.addressselect.init()
            })
         },
         closeShopDetail() {
            // this.showpop = true
            this.$refs.popup_shop_detail.close()
         },
         async submitGood() {
            var values = []
            for (var item of this.list) {
               if (item.shopnum > 0) {
                  values.push({
                     id: item.id,
                     num: item.shopnum
                  })
               }
            }
            //购买
            if (!this.address.id) {
               this.$message.showToast('请先选择收获地址')
               return
            }

            await this.$message.confirm('确定购买吗?')
            this.$message.showLoading()
            const {
               code,
               data
            } = await this.$http.request('post', '/api/canteen/customer/order', {
               data: {
                  customerAddress: (this.address.schoolAreaStr || '') + (this.address.blockStr || '') + (
                     this
                     .address.room || '') + (this.address.address || ''),
                  customerTel: this.address.tel,
                  customer: this.address.name,
                  goodsList: values, //规格
               }
            })

            this.$message.hideLoading()
            if (code == 0) {

               this.list.forEach(item => {
                  item.shopnum = 0
               })
               this.shoptotal = 0
               this.cal += 1
               this.$refs.popup_shop_detail.close()
               this.$forceUpdate()

               //todo，预支付
               //深夜食堂的逻辑不太一样
               if (true) {
                  const orderInfo = await this.$http.request('get', '/api/canteen/customer/payment/' + data
                     .orderId, {})
                  //支付准备
                  var info = orderInfo.data
                  let that = this
                  wx.requestPayment({
                     ...info,
                     success(res) {
                        console.log('pay success', res)
                        uni.navigateTo({
                           url: '/pages/canteen/canteen-success/canteen-success'
                        })
                     },
                     fail(err) {
                        console.error('pay fail', err)
                        that.$message.showToast('支付失败')
                     }
                  })
               } else {
                  uni.navigateTo({
                     url: '/pages/canteen/canteen-success/canteen-success'
                  })
               }


            }
         }
      },
      computed: {
         ...mapState({
            address: state => {
               return state.defaultaddress || {}
            },
         }),
         selectprices() {
            var arr = 0
            for (var item of this.list) {
               if (item.shopnum > 0) {
                  // arr.push(item)
                  arr += (item.price >= 0 ? item.price : 0) * item.shopnum
               }
            }
            if (this.cal > 0) {
               return arr

            }
            return 0
         },
         selectgoods() {
            var arr = []
            for (var item of this.list) {
               if (item.shopnum > 0) {
                  arr.push(item)
               }
            }
            if (this.cal > 0) {
               return arr

            }
            return arr

         },
         listFilter() {
            if (this.query.typeId) {
               var arr = []
               if (this.list && this.list.length > 0) {
                  for (var item of this.list) {
                     if (item.typeId === this.query.typeId || item.type === this.query.typeId) {
                        arr.push(item)
                     }
                  }
               }
               return arr
            } else {
               return this.list
            }

         },
         // shoptotal() {
         //    var a = 0
         //    for (var item of this.list) {
         //       a += item.shopnum || 0
         //    }
         //    console.log('shoptotal',a,this.list)
         //    return a
         // }
      }
   }
</script>

<style>
<style lang="scss" scoped>
   .container-canteen {
      background-color: #FFFFFF;

</style>
      .type-list {
         max-width: 178rpx;
         width: 178rpx;
         min-width: 178rpx;
         background: #EEF7F5;
         border-radius: 8rpx;
         min-height: calc(100vh - 300rpx);
         max-height: calc(100vh - 300rpx);
         overflow-y: scroll;
         margin-left: 30rpx;

         .type-item {
            text-align: center;
            font-weight: 400;
            font-size: 28rpx;
            color: #000000;
            line-height: 88rpx;
            // padding-left: 30rpx;
            // padding-right: 30rpx;
         }

         .type-item.current {
            font-weight: 600;
            font-size: 28rpx;
            color: #04BA97;
         }
      }

      .title-before-blue.green {
         padding-left: 30rpx;
         padding-bottom: 0rpx;
      }

      .title-before-blue:before {
         color: #04BA97;
         font-weight: 600;
         min-width: 14rpx;
         background: #04BA97;
         border-radius: 8rpx;
         display: inline-block;
      }

      .popup_shop_detail {
         background: #FFFFFF;
         // padding: 30rpx 0rpx;
         padding-bottom: 30rpx;

         .footer-shop {
            margin: 0 auto;
            margin-top: 46rpx;
         }

         .common-address-select {
            margin-left: 20rpx;
            margin-right: 20rpx;
         }

         .close-parent {
            margin-right: 20rpx;
         }

         .canteen-items {
            .canteen-item {
               margin-left: 20rpx;
               margin-right: 0rpx;

               .cateen_infos {
                  width: 440rpx;

               }

               .cateen_infos.list {
                  max-width: 30 0rpx;
                  min-width: 200rpx;
               }
            }
         }
      }

      .canteen-items {
         // margin-left: 30rpx;

         .canteen-item {
            margin-left: 30rpx;
            margin-right: 30rpx;
            // width: 690rpx;
            // max-width: 690rpx;
            height: 206rpx;
            background: #FFFFFF;
            border-radius: 16rpx;
            display: flex;
            margin-bottom: 24rpx;

            .cover {
               width: 202rpx;
               height: 202rpx;
            }

            .title {
               font-weight: 600;
               font-size: 32rpx;
               color: #000000;
               line-height: 44rpx;
            }

            .desc {
               font-weight: 400;
               font-size: 24rpx;
               color: #666666;
               line-height: 34rpx;
            }

            .price {

               font-size: 24rpx;

               .icon {
                  line-height: 60rpx;
               }

               .num {
                  font-weight: 600;
                  font-size: 36rpx;
                  color: #000000;
                  // line-height: 50rpx;
               }
            }

            .cateen_infos {
               width: 400rpx;
               position: relative;
            }

            .cateen_infos.list {
               max-width: 300rpx;
               min-width: 200rpx;

            }

            .bottom-buttons {
               // width: 400rpx;
               position: absolute;
               bottom: 0rpx;

               left: 0;
               right: 0;

               .icons {
                  margin-left: auto;
                  margin-right: 0;

                  .curnums {
                     line-height: 60rpx;
                  }
               }
            }
         }

         .canteen-item-container {
            width: 100%;
            min-height: 300rpx;
            max-height: calc(100vh - 300rpx);
            overflow-y: scroll;
         }

         .canteen-item.list {
            margin-right: 0rpx;
            flex: 1;
            margin-bottom: 0rpx;

            .cover {
               width: 158rpx;
               height: 158rpx;
            }
         }
      }

      .canteen-footer-shop {
         position: absolute;
         position: fixed;
         left: 30rpx;
         bottom: 30rpx;
      }

      .area-select {
         .area {

            margin-right: 0rpx;

            .t {
               font-weight: 400;
               font-size: 32rpx;
               color: #000000;
               line-height: 44rpx;
            }

            .i {}
         }

         .area-1 {
            margin-left: auto;
         }

         .area-2 {
            margin-left: 84rpx;
         }
      }

      .canteen-banner {
         width: 750rpx;
         min-height: 360rpx;
      }
   }
</style>