update 首页、我的、商品列表和详情的客服样式功能变更

xuxueyang

2024-10-22 79b196363a2a7fe0cc0b8d7aa176d9d930b408a1

 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 + 14)+'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,11 @@
         <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: '选择地址' }}

               {{ addressDesc || (address&&address.id?address.address: '选择地址')  }}

            </view>

         </view>
         <view class="m-l-a m-r-0" style="position: relative;" @click="goto('/sub_pages/supplier/customer_service/customer_service',false)">
            <image src="@/static/common/icon-kf.png" class="icon-kf img100"></image>				
         </view>

      </view>

      <view class="search-container m-t-12 flex" @click="goto('/pages/home/components/home-search',false)">

@@ -75,7 +78,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,6 +144,9 @@
         ...mapState({

            address: state => {

               return state.defaultaddress || {}

            },
            addressDesc: state=>{
               return state.addressDesc || ''
            },

            currentInfo: state => {

               return state.currentInfo || {}

@@ -111,10 +162,10 @@
      },

      onPullDownRefresh() {

         // 下拉刷新方法

         this.init()
         this.init()

         this.$message.showLoading()

         this.init_children()

         setTimeout(() => {
         setTimeout(() => {

            this.$message.hideLoading()

            uni.stopPullDownRefresh()

         }, 2000)

@@ -175,7 +226,8 @@
            hide_footer: false,

            noticeList: [],

            currentNoticeIndex: 0,

            currentNotice: {}

            currentNotice: {},

            dto_home_coupon: {}

         };

      },

      onShareAppMessage() {

@@ -211,6 +263,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 +431,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) {

@@ -427,4 +516,16 @@


<style lang="scss" scoped>

   @import "./home.scss";



   /* #ifdef PUB_CUSTOMER */

   @import "@/sub_pages/customer/coupon/coupon.scss";

   /* #endif */
   .icon-kf{
      width: 44rpx;
      height: 44rpx;
      // margin-top: 12rpx;
      position: absolute;
      right: 0rpx;
      bottom: 22rpx;
   }

</style>