陶杰
2024-12-13 112e2bd2764dd96e1b81439a01882769100b92c1
pages/home/home.vue
@@ -2,7 +2,7 @@
   <view class="main-container user-home">
      <view class="bg-top-green"></view>
      <!-- 顶部,可能 -->
      <view class="school" :style="{'padding-top':(StatusBar)+'px'
      <view class="school flex" :style="{'padding-top':(StatusBar + 8 )+'px'
      ,height:CustomBar+'rpx','line-height':CustomBar+'rpx' }">
         <!--   <picker @change="PickerChangeSchool" :value="areaIndex" :range="schools" range-key="name">
        <view class="picker flex">
@@ -15,8 +15,16 @@
         <view class="picker flex" @click.stop="goToAddress">
            <uni-icons type="location" class="m-r-5" size="18"></uni-icons>
            <view>
               {{ address&&address.id?address.address: '选择地址' }}
            </view>
               {{ current_address }}
            </view>
            <uni-icons class="icon" type="left"  style="transform: rotate(-90deg);margin-left: 10rpx;" size="20"></uni-icons>
         </view>
         <view class="m-l-a m-r-0" style="position: relative;" @click="goto('/sub_pages/supplier/customer_service/customer_service',false)">
            <view class="icon-kf-p">
               <!-- <view>客服</view> -->
               <image src="@/static/common/icon-kf.png" class="icon-kf img100"></image>
            </view>
         </view>
      </view>
      <view class="search-container m-t-12 flex" @click="goto('/pages/home/components/home-search',false)">
@@ -75,7 +83,52 @@
      </view>
      <common-footer flg="0"></common-footer>
      <uni-popup ref="coupon_home" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup>
      <uni-popup ref="coupon_home" type="center" border-radius="10px 10px 0 0">
         <view class="coupon-container" style="width: 690rpx;">
            <view v-if="dto_home_coupon.imageUrl"  class="coupont-item all" style="display: flex; justify-content: center; align-items: center; height: 100vh;">
               <view   @click="getCoupon(dto_home_coupon)"
                  :style="{
                     backgroundImage: `url(${dto_home_coupon.imageUrl})`,
                     backgroundSize: 'contain',
                     backgroundPosition: 'center',
                     backgroundRepeat: 'no-repeat' ,
                     width: '600px',           // 设置宽度
                     height: '600px'           // 设置高度
                  }">
               </view>
            </view>
            <view class="coupont-item all" v-else>
               <view class="flex container img100">
                  <view class="info-price">
                     <view class="price1">
                        {{dto_home_coupon.maxDiscountAmount?(`${dto_home_coupon.maxDiscountAmount}折`):(`¥${dto_home_coupon.couponDiscountValue}`)}}
                     </view>
                     <view class="price2">
                        {{dto_home_coupon.minOrderAmount?(`满¥${dto_home_coupon.minOrderAmount}可用`):'无门槛'}}
                     </view>
                  </view>
                  <view class="info flex1">
                     <view class="title">
                        {{dto_home_coupon.couponName||'-'}}
                     </view>
                     <view class="time" v-if="dto_home_coupon.getEndDate">
                        <!-- 领取后{{dto_home_coupon.usageTimeNum||''}}{{dto_home_coupon.usageTimeTypeName||''}}有效 -->
                        {{dto_home_coupon.getEndDate|| '-'}}前有效
                     </view>
                     <view class="button" @click="getCoupon(dto_home_coupon)">
                        立即领取
                     </view>
                  </view>
               </view>
               <view class="tip">
                  <span class="t-red">*</span>{{dto_home_coupon.couponDescription || '此券每人限领1张。仅限用于花满芫鲜花交易平台鲜切花花款满额使用,不可与其他优惠同享、不可叠加使用'}}
               </view>
            </view>
         </view>
      </uni-popup>
   </view>
@@ -96,11 +149,22 @@
         ...mapState({
            address: state => {
               return state.defaultaddress || {}
            },
            addressDesc: state=>{
               return state.addressDesc || ''
            },
            currentInfo: state => {
               return state.currentInfo || {}
            },
         }),
            },
         }),
         current_address(){
            var desc = this.addressDesc || (this.address&&this.address.id?this.address.address: '选择地址')
            if(desc.length>=15){
               return desc.substring(0,15) + '...'
            }
            return desc
         }
      },
      components: {
         homeCategory,
@@ -111,10 +175,10 @@
      },
      onPullDownRefresh() {
         // 下拉刷新方法
         this.init()
         this.init()
         this.$message.showLoading()
         this.init_children()
         setTimeout(() => {
         setTimeout(() => {
            this.$message.hideLoading()
            uni.stopPullDownRefresh()
         }, 2000)
@@ -175,7 +239,8 @@
            hide_footer: false,
            noticeList: [],
            currentNoticeIndex: 0,
            currentNotice: {}
            currentNotice: {},
            dto_home_coupon: {}
         };
      },
      onShareAppMessage() {
@@ -211,6 +276,28 @@
         this.init()
      },
      methods: {
         async getCoupon(item) {
            if (!this.currentInfo.id) {
               await this.$message.confirm('请先前往登录')
               this.$storage.removeItem('cache_home_show_coupon')
               return
            }
            this.$message.showLoading()
            const {
               code,
               data
            } = await this.$http.request('post', '/api/v2/coupon/app/receive', {
               data: {
                  couponId: item.id,
                  num: 1
               }
            })
            if (code == 0) {
               this.$refs.coupon_home.close()
               this.$message.showToast('领取成功')
            }
         },
         init_children() {
            this.$refs.home_top_flow && this.$refs.home_top_flow.init && this.$refs.home_top_flow.init()
            this.$refs.home_category && this.$refs.home_category.init && this.$refs.home_category.init()
@@ -357,18 +444,33 @@
               }
            })
            // let tmp = this
            // //首页优惠券
            // this.$http.request('get', '/api/v2/coupon/app' + `/home/list`).then(res => {
            //    if (res.code == 0) {
            //       var list = res.data || []
            //       var dto = list.length >= 1 ? list[0] : undefined
            //       if (dto) {
            //          // 显示弹窗图片
            //          tmp.$refs.coupon_home.open()
            //       }
            //    }
            // })
            let tmp = this
            //延迟2秒
            setTimeout(() => {
               if (tmp.currentInfo.id) {
                  var value = tmp.$storage.getItem('cache_home_show_coupon')
                  if (!value) {
                     //首页优惠券
                     tmp.$storage.setItem('cache_home_show_coupon', '1')
                     var u = '/api/v2/coupon/app/home/alert'
                     // u = '/api/v2/coupon/app/home/list'
                     tmp.$http.request('get', u).then(res => {
                        if (res.code == 0) {
                           // var list = res.data || {}
                           // var dto = list.length >= 1 ? list[0] : undefined
                           var dto = res.data || undefined
                           if (dto) {
                              // 显示弹窗图片
                              tmp.dto_home_coupon = dto
                              tmp.$refs.coupon_home.open()
                           }
                        }
                     })
                  }
               }
            }, 1200)
         },
         clickBanner(item) {
@@ -386,7 +488,7 @@
               return
            }
            uni.navigateTo({
               url: '/pages/user/address/address?source=select'
               url: '/pages/user/address/address?source=home'
            })
         },
         buttonSearchFlow() {
@@ -427,4 +529,28 @@
<style lang="scss" scoped>
   @import "./home.scss";
   /* #ifdef PUB_CUSTOMER */
   @import "@/sub_pages/customer/coupon/coupon.scss";
   /* #endif */
   .icon-kf-p{
      // margin-top: 12rpx;
      position: absolute;
      right: 0rpx;
      bottom: 16rpx;
      text-align: center;
      // font-size: 12rpx;
      color: #fff;
      // min-width: 120rpx;
      display: flex;
      // width: fit-content;
      height: 44rpx;
      line-height: 44rpx;
      // height: 64rpx;
      .icon-kf{
         width: 44rpx;
         height: 44rpx;
         // margin-left: 20rpx;
      }
   }
</style>