hospital-accompaniment-wechat/components/purchaseNotes/index.vue

<template>
  <u-popup :show="popupShow" bgColor="transparent" :safeAreaInsetBottom="false" :closeOnClickOverlay="type!=3" @close="close">
    <view class="popupBox">
      <view class="popupBox_title">
        <image src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img4.png" mode="" />
        <view>
          <view class="popupBox_title_l">限时特惠</view>
          <view class="popupBox_title_r">
            <text class="popupBox_title_r_l" v-if="details.originalPriceShow">￥{{details.originalPrice}}</text>
            <text class="popupBox_title_r_r">￥{{details.sellingPrice}}</text>
          </view>
        </view>
      </view>
      <view class="popupBox_list">
        <view class="popupBox_border mb18" v-if="type!=3">
          <view class="list_info">
            <image :src="details.coverImage||details.businessImage||shopDetails.logo" mode="" />
            <view class="list_info_r">
              <view class="list_info_r_title">{{details.title}}</view>
              <view class="list_info_r_hint">{{details.costIncluded}}</view>
              <view class="list_info_r_num">已售 {{details.salesVolume}}</view>
            </view>
          </view>
        </view>
        <scroll-view class="scroll" scroll-y="true">
          <view class="scroll_box">
            <view class="popupBox_border">
              <view class="list_item">
                <img src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img5.png" alt="">
                <view class="list_item_title">购买须知</view>
                <view class="list_item_1" v-for="(v,i) in details.businessProductNotesList" :key="i">
                  <view class="list_item_1_title">{{v.noteTitle}}</view>
                  <view class="list_item_1_text">{{v.noteContent}}</view>
                </view>
                <!-- 	<view class="list_item_1">
				  <view class="list_item_1_title">送兑换豆</view>
				  <view class="list_item_1_text">{{details.giftPointScore}}</view>
				</view> -->
                <!-- <view class="list_item_1">
                  <view class="list_item_1_title">出票速度</view>
                  <view class="list_item_1_text">平均一秒出票。</view>
                </view>
                <view class="list_item_1">
                  <view class="list_item_1_title">出票速度</view>
                  <view class="list_item_1_text">凭【核销码】可进入</view>
                </view>
                <view class="list_item_1">
                  <view class="list_item_1_title">随时退</view>
                  <view class="list_item_1_text">未使用可随时申请全额退款。</view>
                </view>
                <view class="list_item_1">
                  <view class="list_item_1_title">玩后再付</view>
                  <view class="list_item_1_text">该商品可享受玩后再付特权，下单时选玩后再付，可享0元下单，游玩后自动计入账单，下月出账后再还款。(此服务不影响商品退改政策，订单退改规则仍以产品购买须知为准，如因退改发生手续费的，将在您操作退款时立即计入账单。)</view>
                </view> -->
              </view>
            </view>
            <view class="popupBox_border" v-if="type!=3">
              <view class="list_item">
                <img src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img5.png" alt="">
                <view class="list_item_title">使用说明</view>
                <view class="list_item_1">
                  <view class="list_item_1_text1"><text>入园时间：</text>
                    <view>{{details.enteringParkTime}}</view>
                  </view>
                  <view class="list_item_1_text1"><text>入园地址：</text>
                    <view>{{details.enteringParkAddress}}</view>
                  </view>
                </view>
              </view>
            </view>
            <view class="popupBox_border" v-if="type!=3">
              <view class="list_item">
                <img src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img5.png" alt="">
                <view class="list_item_title">费用说明</view>
                <view class="list_item_1">
                  <view class="list_item_1_text1"><text>费用包含：</text>
                    <view>{{details.costIncluded}}</view>
                  </view>
                  <view class="list_item_1_text1" v-if="details.costDescription"><text>详细说明：</text>
                    <view>{{details.costDescription}}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
		  <view class="footCls">
		    <view v-if="homeFootObj.first"> <text class="iconfont icon-dunpai-anquan"></text> {{homeFootObj.first}}
		    </view>
		    <view v-if="homeFootObj.second">{{homeFootObj.second}}</view>
		  </view>
        </scroll-view>
        <view class="btnBox" v-if="type==1">
          <view class="btnBox_l">
            <div>
              <view class="btnBox_l_val">￥
                <text>{{dealPrice(details.sellingPrice,0)}}</text>.{{dealPrice(details.sellingPrice,1)}}
              </view>
              <view class="btnBox_l_lab unline" v-if="details.originalPriceShow">
                ￥{{details.originalPrice}}</view>
            </div>
            <view class="btnBox_l_val btnBox_l_beans" v-if="details.giftPointScore&&parseInt(details.giftPointScore)>0">
              <!-- 送礼包兑换豆{{parseInt(details.giftPointScore)}}个 -->
              赠送{{parseInt(details.giftPointScore)}}元礼包商城商品
            </view>
          </view>
          <view class="btnBox_r">
            <view v-if="!collectStatus" @click="collect()"> <text class="iconfont icon-shoucang"></text>
            </view>
            <view class="collect" v-else @click="collect()">
              <image src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img46.png" mode="" />
            </view>
            <button open-type="share">
              <view class="shareBtn"> <text class="iconfont icon-fenxiang"></text></view>
            </button>
            <view class="btn" @click="goConfirmOrder(details)">购买</view>
          </view>
        </view>
        <view class="btnBox" v-if="type==3">
          <view class="btn-box" @click="closeFun()" :class="{active:tiems<=0}"><text v-if="tiems>0">({{tiems}})</text> 我已知晓</view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import {
  userCollectAdd,
  userCollectDel,
  getUserCollect,
  homeFoot
} from "@/api/home.js"
export default {
  data () {
    return {
      popupShow: false,
      details: {
        sellingPrice: 0.00
      },
      shopDetails: {},
      tiems: 3,
      collectObj: {},
      collectStatus: false,
      timer: null,
      timer1: null,
	  homeFootObj: {}
    }
  },
  props: {
    type: {
      type: String | Number,
      default: 1
    }
  },
  mounted() {
	  console.log('aaaa')
  	this.getHomeFoot()
  },
  onUnload () {
    this.timer && clearInterval(this.timer);
  },
  methods: {
    open (val, shopDetails) {
      this.details = val;
      if (!this.details.businessProductNotesList) {
        this.details.businessProductNotesList = this.details.productNotesList
      }
      console.log(this.details, this.details.sellingPrice, shopDetails)
      this.shopDetails = shopDetails;
      this.popupShow = true;
      if (this.type == 3) {
        this.timer = setInterval(() => {
          this.tiems--;
          if (this.tiems == 0) {
            // this.tiems = 5;
            clearInterval(this.timer);
          }
        }, 1000)
      }
      if (this.type == 1) {
        this.getCollectStatus()
      }
    },
	// 获取底部文案
	getHomeFoot () {
	  homeFoot().then(res => {
	    this.homeFootObj = res.data
	  })
	},
    dealPrice (val, index) {
      if (val) {
        let arr = val.split(".");
        return arr[index]
      }
    },
    closeFun () {
      if (this.tiems <= 0) {
        this.close();
      }
    },
    // 获取收藏状态
    getCollectStatus () {
      let params = {
        entityId: this.details.businessProductId,
        entityType: 1
      }
      getUserCollect(params).then(res => {
        this.collectObj = res.data;
        this.collectStatus = res.data ? true : false;
        this.timer1 = setTimeout(() => {
          clearTimeout(this.timer1)
          this.timer1 = null
        }, 2000)
      })
    },
    // 收藏
    collect () {
      if (this.timer1) {
        uni.$u.toast('操作过于频繁，请稍后再试')
        return
      }
      if (this.collectStatus) {
        userCollectDel(this.collectObj.id).then(res => {
          this.collectStatus = false;
          uni.showToast({
            title: '取消收藏成功！',
            duration: 1500
          });
        })
      } else {
        let param = {
          entityType: 1,
          entityId: this.details.businessProductId
        }
        userCollectAdd(param).then(res => {
          this.collectStatus = true;
          uni.showToast({
            title: '收藏成功！',
            duration: 1500
          });
          this.getCollectStatus()
        })
      }
    },
    close () {
      this.popupShow = false;
      this.$emit('close')
    },
    goConfirmOrder (item) {
      console.log(this.shopDetails)
      uni.navigateTo({
        url: '/pages/home/confirmOrder?logo=' + this.shopDetails.logo + '&businessName=' +
          encodeURIComponent(this.shopDetails.businessName) + '&businessId=' + this.shopDetails
            .businessId + '&businessProductId=' + item.businessProductId
      })
    }
  },
}
</script>

<style lang='scss' scoped>
.popupBox {
  position: relative;

  .popupBox_title {
    width: 100%;
    position: absolute;
    top: -93rpx;
    z-index: 10;

    > image {
      width: 720rpx;
      height: 204rpx;
    }

    > view {
      display: flex;
      align-items: center;
      padding: 75rpx 0 0 30rpx;
      position: absolute;
      top: 0;
      left: 0;

      .popupBox_title_l {
        font-size: 48rpx;
        color: #ffffff;
        font-family: FZCuYuan-M03;
        margin-right: 100rpx;
      }

      .popupBox_title_r {
        .popupBox_title_r_l {
          font-size: 26rpx;
          color: #ffffff;
          text-decoration: line-through;
        }

        .popupBox_title_r_r {
          font-size: 32rpx;
          color: #ffffff;
          font-family: FZCuYuan-M03;
          text-decoration: none;
        }
      }
    }
  }

  .popupBox_list {
    padding: 60rpx 0rpx 0;
    background: linear-gradient(180deg, #c90700 0%, #ffe8e6 58%, #ffffff 32%);
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    /* background-size: 100% 1900rpx; */
	background-size: 100% 1500rpx;
    /* background-position-y: -300rpx; */
	background-position-y: -167rpx;
	background-repeat: no-repeat;
	background-color: #ffffff;

    .scroll {
      max-height: 50vh;
      position: relative;
      z-index: 20;

      .scroll_box {
        /* padding-bottom: 30rpx; */
      }
    }

    .popupBox_border {
      width: 702rpx;
      margin: 10rpx auto 0;
      background: linear-gradient(180deg, #fb2715, #ff0901);
      border-radius: 30rpx;
      background-size: 702rpx 226rpx;
      margin-bottom: 28rpx;
      padding: 6rpx;
      position: relative;
      margin-top: 10rpx;
      z-index: 11;
    }

    .list_info {
      display: flex;
      background: #fff5f3;
      padding: 20rpx 30rpx;
      border-radius: 30rpx;
	  max-height: 200rpx;
	  overflow: auto;
      image {
        width: 154rpx;
        height: 154rpx;
        background: rgba(0, 0, 0, 0);
        border-radius: 12rpx;
        margin-right: 24rpx;
        flex-shrink: 0;
      }

      .list_info_r {
        .list_info_r_title {
          font-size: 26rpx;
          color: #242424;
          font-family: FZCuYuan-M03;
          padding-top: 10rpx;
        }

        .list_info_r_hint {
          font-size: 24rpx;
          color: #1a1a1a;
          margin-top: 8rpx;
        }

        .list_info_r_num {
          font-size: 22rpx;
          color: #666666;
          margin-top: 20rpx;
        }
      }
    }

    .list_item {
      background: #fff5f3;
      padding: 20rpx 30rpx;
      border-radius: 30rpx;
      position: relative;

      > image {
        width: 55rpx;
        height: 77rpx;
        position: absolute;
        top: -8rpx;
        left: -16rpx;
        z-index: 100;
      }

      .list_item_title {
        font-size: 36rpx;
        color: #fa353b;
        font-family: FZCuYuan-M03;
        padding-left: 27rpx;
        margin-bottom: 20rpx;
      }

      .list_item_1 {
        &:first-child {
          .list_item_1_title {
            margin-top: 0 !important;
          }
        }

        .list_item_1_title {
          font-size: 26rpx;
          color: #242424;
          font-family: FZCuYuan-M03;
          margin: 10rpx 0 10rpx;
        }

        .list_item_1_text {
          font-size: 24rpx;
          color: #666666;
          line-height: 36rpx;

          text {
            font-size: 24rpx;
            color: #1a1a1a;
          }
        }

        .list_item_1_text1 {
          font-size: 24rpx;
          color: #666666;
          line-height: 36rpx;
          display: flex;

          text {
            font-size: 24rpx;
            color: #1a1a1a;
            display: inline-block;
            flex-shrink: 0;
          }
        }
      }
    }
  }
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 35rpx 30rpx;
  /* background: transparent; */
  background: #ffffff;
  box-sizing: border-box;

  .btnBox_l {
    > div {
      display: flex;
      align-items: baseline;
    }

    .btnBox_l_lab {
      font-size: 28rpx;
      color: #1a1a1a;
    }

    .unline {
      font-size: 26rpx;
      color: #808080;
      text-decoration: line-through;
    }

    .btnBox_l_val {
      display: flex;
      align-items: baseline;
      font-size: 22rpx;
      color: #ff0000;
      font-family: FZCuYuan-M03;

      text {
        font-size: 42rpx;
        font-family: FZCuYuan-M03;
      }
    }

    .btnBox_l_beans {
      margin-left: 20rpx;
    }
  }

  .btn-box {
    width: 90%;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 32rpx;
    color: #ffffff;
    text-align: center;
    line-height: 80rpx;
    margin: auto;
    background: #999999;
  }

  .active {
    background: #fb0b03;
  }
}

.btnBox_r {
  display: flex;
  align-items: center;
  button {
    padding: 0;
    background: transparent;
    border: none;
    &:after {
      border: none;
    }
  }
  > view {
    width: 55rpx;
    height: 55rpx;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 25rpx;

    &:last-child {
      margin-right: 0rpx;
    }

    text {
      color: #fff;
      font-size: 36rpx;
    }
  }
  .shareBtn {
    width: 55rpx;
    height: 55rpx;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    &:first-child {
      margin-right: 25rpx;
    }
    text {
      color: #fff;
      font-size: 36rpx;
    }
  }
  .collect {
    text-align: center;

    image {
      width: 33rpx;
      height: 30rpx;
      margin-top: 4rpx;
    }
  }

  > .btn {
    width: 200rpx;
    height: 80rpx;
    background: #fb0b03;
    border-radius: 40rpx;
    font-size: 32rpx;
    color: #ffffff;
    text-align: center;
    line-height: 80rpx;
  }
}
.footCls {
  font-size: 24rpx;
  color: #cccccc;
  text-align: center;
  background: #ffffff;
  padding-top: 20rpx;
  .iconfont {
    vertical-align: middle;
  }
}
.mb18 {
  margin-bottom: 18rpx !important;
}
</style>