yanzong_qianduan/pages/bargain/task.vue

<template>
  <view v-if="!isLoading" class="container" :style="appThemeStyle">

    <!-- 顶部操作栏 -->
    <view class="header dis-flex flex-x-between">
      <view class="item-touch" @click="$navTo('pages/index/index')">
        <text>返回首页</text>
      </view>
      <view class="item-touch" @click="handleShowRules()">
        <text>玩法详情</text>
      </view>
    </view>

    <view class="content">
      <!-- 砍价信息 -->
      <view class="infos-wrap">
        <view class="infos-top">
          <view class="infos-img">
            <avatar-image :url="task.user.avatar_url" :width="104" />
          </view>
          <view class="infos-name">
            <text>{{ task.user.nick_name }}</text>
          </view>
        </view>
        <view class="infos-mask">
          <view class="infos-prompt" v-if="active.prompt_words">
            <text>{{ active.prompt_words }}</text>
          </view>
          <!-- 商品信息 -->
          <view class="infos-item" @click="$navTo('pages/bargain/goods/index', { activeId, goodsId: goods.goods_id })">
            <view class="infos-item-img">
              <image class="image" :src="goodsSkuInfo.goods_image ? goodsSkuInfo.goods_image : goods.goods_image"></image>
            </view>
            <view class="infos-item-info">
              <view class="infos-item-name">
                <text class="twoline-hide">{{ goods.goods_name }}</text>
              </view>
              <view class="infos-item-stock">
                <view class="stock-widget">
                  <text>仅剩</text>
                  <text class="stock-num">{{ goodsSkuInfo.stock_num }}</text>
                  <text>件</text>
                </view>
              </view>
              <view class="infos-item-price dis-flex flex-y-end">
                <text class="price1 col-m">底价¥</text>
                <text class="price2 col-m">{{ task.floor_price }}</text>
                <text class="price3">¥{{ task.goods_price }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 分割线 -->
      <view class="connect">
        <view class="connect-ring bgf-ring--left">
          <text class="line"></text>
        </view>
        <view class="connect-ring bgf-ring--right">
          <text class="line"></text>
        </view>
      </view>

      <!-- 砍价进度 -->
      <view class="bargain-wrap">
        <!-- 已砍数目 -->
        <view class="bargain-info">
          <view v-if="task.status" class="bargain-ing">
            <block v-if="!task.is_floor">
              <text>已砍</text>
              <text class="focal col-m">{{ task.cut_money }}</text>
              <text>元，还差</text>
              <text class="focal col-m">{{ task.surplus_money }}</text>
              <text>元</text>
            </block>
            <block v-else>
              <text>已砍至最低</text>
              <text class="focal col-m">{{ task.floor_price }}</text>
              <text>元，砍价成功！</text>
            </block>
          </view>
          <view v-else class="bargain-ing">
            <text class="col-9">该砍价任务已结束～</text>
          </view>
        </view>
        <!-- 砍价进度条 -->
        <view class="bgn__process m-top30">
          <view class="bgn__process-bottom">
            <view class="bgn__process-process process--ani" :style="{ width: `${task.bargain_rate}%` }"></view>
          </view>
        </view>
        <!-- 操作按钮 -->
        <view class="btn-container m-top30 dis-flex flex-x-center">
          <!-- 立即购买 -->
          <view v-if="showBuyBtn" class="btn-item btn-item__buy" :class="{ complete: task.is_floor }" @click="handleBuyNow()">
            <text>立即购买</text>
          </view>
          <!-- 分享给朋友 -->
          <button v-if="showShareBtn" open-type="share" class="btn-normal" @click="handleShareBtn()">
            <view class="btn-item btn-item__main">
              <text>邀请好友砍价</text>
            </view>
          </button>
          <!-- 砍一刀操作 -->
          <view v-if="showCatBtn" class="btn-item btn-item__main btn-item-long" @click="handleHelpCut()">
            <text>帮TA砍一刀</text>
          </view>
          <!-- 查看其他砍价活动 -->
          <view v-if="showOtherBtn" class="btn-item btn-item__main btn-item-long" @click="$navTo('pages/bargain/index')">
            <text>查看其他砍价活动</text>
          </view>
        </view>
        <!-- 到期时间 -->
        <view class="bargain-p" v-if="task.status">
          <view class="bargain-people dis-flex flex-x-center flex-y-center">
            <text>活动还剩</text>
            <count-down :date="active.end_time" separator="zh" theme="text" />
            <text>结束，快来砍价吧~</text>
          </view>
        </view>
      </view>
      <!-- 好友助力榜 -->
      <view class="records-container" v-if="helpList.length">
        <view class="records">
          <view class="records-back"></view>
          <view class="records-content">
            <view class="records-h2">
              <text>好友助力榜</text>
            </view>
            <view class="friend-help">
              <view class="records-item" v-for="(help, idx) in helpList" :key="idx">
                <view class="records-left">
                  <avatar-image :url="help.user.avatar_url" :width="70" />
                  <text class="nick-name">{{ help.user.nick_name }}</text>
                </view>
                <view class="records-right">
                  <text class="bold m-r-6">帮砍了</text>
                  <text class="red">¥{{ help.cut_money }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 砍价规则弹窗 -->
    <u-modal v-if="!isLoading" v-model="showRules" title="砍价规则">
      <scroll-view style="height: 610rpx;" :scroll-y="true">
        <view class="pops-content">
          <text>{{ setting.rulesDesc }}</text>
        </view>
      </scroll-view>
    </u-modal>

  </view>
</template>

<script>
  import WxofficialMixin from '@/core/mixins/wxofficial'
  import { getCurrentPage, buildUrL } from '@/core/app'
  import AvatarImage from '@/components/avatar-image'
  import CountDown from '@/components/countdown'
  import StoreModel from '@/common/model/Store'
  import * as GoodsApi from '@/api/goods'
  import * as TaskApi from '@/api/bargain/task'
  import * as ActiveApi from '@/api/bargain/active'

  export default {
    components: {
      AvatarImage,
      CountDown
    },
    mixins: [WxofficialMixin],
    data() {
      return {
        // 是否正在加载中
        isLoading: true,

        taskId: undefined, // 砍价任务ID
        activeId: undefined, // 砍价活动ID

        task: {}, // 砍价任务详情
        active: {}, // 活动详情
        goods: {}, // 商品详情
        goodsSkuInfo: {}, // 商品SKU信息
        helpList: [], // 好友助力榜
        isCreater: false, // 是否为当前砍价任务的发起人
        isCut: false, // 当前是否已砍
        setting: {}, // 砍价规则

        showRules: false, // 显示砍价规则
        disabled: false, // 按钮禁用状态

        showBuyBtn: false, // 立即购买
        showShareBtn: false, // 邀请好友砍价
        showCatBtn: false, // 帮TA砍一刀
        showOtherBtn: false, // 查看其他砍价活动
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      this.taskId = options.taskId
      // 刷新页面数据
      this.onRefreshPage()
    },

    methods: {

      // 刷新页面数据
      onRefreshPage() {
        const app = this
        app.isLoading = true
        // 获取砍价任务详情
        app.getTaskDetail()
          .then(result => {
            Promise.all([
                app.getActiveDetail(),
                app.getGoodsBasic(),
                app.getGoodsSku(),
                app.getHelpList()
              ])
              .then(() => {
                // 初始化：显示操作按钮
                app.initShowBtn()
                // 设置微信公众号链接分享卡片内容
                app.setWxofficialShareData()
              })
              .finally(() => app.isLoading = false)
          })
      },

      // 获取砍价任务详情
      getTaskDetail() {
        const app = this
        return new Promise((resolve, reject) => {
          TaskApi.detail(app.taskId)
            .then(result => {
              app.task = result.data.taskInfo
              app.activeId = app.task.active_id
              app.isCreater = result.data.isCreater
              app.isCut = result.data.isCut
              app.setting = result.data.setting
              resolve(result)
            })
            .catch(reject)
        })
      },

      // 获取砍价活动详情
      getActiveDetail() {
        const app = this
        return new Promise((resolve, reject) => {
          ActiveApi.detail(app.activeId)
            .then(result => {
              app.active = result.data.active
              resolve(result)
            })
            .catch(reject)
        })
      },

      // 获取商品信息
      getGoodsBasic() {
        const app = this
        const goodsId = app.task.goods_id
        return new Promise((resolve, reject) => {
          GoodsApi.basic(goodsId, false)
            .then(result => {
              app.goods = result.data.detail
              resolve(result)
            })
            .catch(reject)
        })
      },

      // 获取商品SKU信息
      getGoodsSku() {
        const app = this
        const goodsId = app.task.goods_id
        const goodsSkuId = app.task.goods_sku_id
        return new Promise((resolve, reject) => {
          GoodsApi.skuInfo(goodsId, goodsSkuId)
            .then(result => {
              app.goodsSkuInfo = result.data.skuInfo
              resolve(result)
            })
            .catch(reject)
        })
      },

      // 获取砍价活动详情
      getHelpList() {
        const app = this
        return new Promise((resolve, reject) => {
          TaskApi.helpList(app.taskId)
            .then(result => {
              app.helpList = result.data.list
              resolve(result)
            })
            .catch(reject)
        })
      },

      // 初始化：显示操作按钮
      initShowBtn() {
        const app = this
        // 立即购买
        const showBuyBtn = app.isCreater && !app.task.is_buy && app.task.status && (!app.active.is_floor_buy ||
          app.task.is_floor)
        // 帮砍一刀
        const showCatBtn = !app.isCreater && !app.isCut && !app.task.is_floor && app.task.status
        // 邀请好友砍价
        const showShareBtn = !showCatBtn && !app.task.is_floor && app.task.status
        // 查看其他砍价活动
        const showOtherBtn = !showBuyBtn && !showShareBtn && !showCatBtn
        app.showBuyBtn = showBuyBtn
        app.showCatBtn = showCatBtn
        app.showShareBtn = showShareBtn
        app.showOtherBtn = showOtherBtn
      },

      // 显示砍价规则
      handleShowRules() {
        this.showRules = true
      },

      // 立即购买
      handleBuyNow() {
        // 跳转到结算页
        const app = this
        app.$navTo('pages/checkout/index', {
          mode: 'bargain',
          taskId: app.taskId
        })
      },

      // 帮砍一刀
      handleHelpCut() {
        const app = this
        app.disabled = true
        TaskApi.helpCut(app.taskId)
          .then(result => {
            app.$toast(result.message)
            setTimeout(() => app.onRefreshPage(), 1800)
          })
          .finally(() => app.disabled = false)
      },

      // 点击分享按钮
      handleShareBtn() {
        // #ifndef MP
        this.handleCopyLink()
        // #endif
      },

      // 复制当前页面链接
      handleCopyLink() {
        const app = this
        app.getShareUrl().then(shareUrl => {
          // 复制到剪贴板
          uni.setClipboardData({
            data: shareUrl,
            success: () => app.$toast('复制链接成功，快去发送给朋友吧'),
            fail: ({ errMsg }) => app.$toast('复制失败 ' + errMsg)
          })
        })
      },

      // 获取分享链接 (H5外链)
      getShareUrl() {
        const { path, query } = getCurrentPage()
        return new Promise((resolve, reject) => {
          // 获取h5站点地址
          StoreModel.h5Url().then(baseUrl => {
            // 生成完整的分享链接
            const shareUrl = buildUrL(baseUrl, path, query)
            resolve(shareUrl)
          })
        })
      },

      // 设置微信公众号链接分享卡片内容
      setWxofficialShareData() {
        const { active, goods } = this
        this.updateShareCardData({
          title: active.share_title,
          desc: active.prompt_words,
          imgUrl: goods.goods_image
        })
      },

    },

    /**
     * 分享当前页面
     */
    onShareAppMessage() {
      // 构建页面参数
      const app = this
      const params = app.$getShareUrlParams({ taskId: app.taskId })
      return {
        title: app.active.share_title,
        path: `/pages/bargain/task?${params}`
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      // 构建页面参数
      const app = this
      const params = app.$getShareUrlParams({ taskId: app.taskId })
      return {
        title: app.active.share_title,
        path: `/pages/bargain/task?${params}`
      }
    },

  }
</script>

<style>
  page {
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .container {
    background: url('https://si.geilicdn.com/img-310900000167962321710a026860-unadjust_750_686.png') top no-repeat,
      linear-gradient(90deg, #fea044, #f9565d 63%, #e63378);
    background-size: 100% auto;
    min-height: 100%;
  }

  /* 头部区域 */
  .header {
    padding: 30rpx 30rpx;

    .item-touch {
      color: #fff;
      font-size: 24rpx;
      padding: 7rpx 20rpx;
      background: rgba(0, 0, 0, 0.17);
      border-radius: 22rpx;
    }
  }

  /* 内容区域 */
  .content {
    position: relative;
    box-sizing: border-box;
    padding: 10rpx 30rpx 60rpx 30rpx;
  }

  /* 砍价信息 */
  .infos-wrap {
    background: #fff;
    box-shadow: 0 4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
    padding: 0 30rpx 40rpx;
    border-radius: 16rpx;
  }

  .infos-top {
    position: relative;
    top: -42rpx;
    margin-bottom: -22rpx;
  }

  .infos-img {
    width: 120rpx;
    height: 120rpx;
    padding: 8rpx;
    background: #fff;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 50%;
  }

  .infos-name {
    margin: 8rpx auto 0;
    width: 80%;
    font-size: 26rpx;
    color: #9a9a9a;
    text-align: center;
    line-height: 32rpx;
  }

  .infos-prompt {
    text-align: center;
    font-size: 30rpx;
    color: #222;
    line-height: 48rpx;
    margin-bottom: 30rpx;
  }

  .infos-item {
    margin-top: 40rpx;
    display: flex;
  }

  .infos-item-img {
    flex: none;
    width: 180rpx;
    height: 180rpx;

    .image {
      width: 100%;
      height: 100%;
    }
  }

  .infos-item-info {
    margin-left: 25rpx;
    flex: auto;
  }

  .infos-item-name {
    font-size: 28rpx;
    color: #404040;
    line-height: 40rpx;
    height: 80rpx;
  }

  .infos-item-stock {
    .stock-widget {
      display: inline-block;
      min-width: 100rpx;
      padding: 0 20rpx;
      background-image: linear-gradient(-90deg, #fe9c3f, #fb6253 99%);
      border-radius: 40rpx;
      height: 40rpx;
      font-size: 24rpx;
      color: #fff;
      line-height: 40rpx;
      margin-top: 6rpx;

      .stock-num {
        margin: 0 6rpx;
      }
    }
  }

  .infos-item-price {
    font-size: 0;
    margin-top: 8rpx;

    .price1 {
      font-size: 24rpx;
      line-height: 32rpx;
    }

    .price2 {
      margin-left: 4rpx;
      font-size: 36rpx;
      line-height: 40rpx;
    }

    .price3 {
      margin-left: 10rpx;
      font-size: 24rpx;
      color: #9a9a9a;
      line-height: 32rpx;
      text-decoration: line-through;
    }
  }

  /* 分割线 */
  .connect {
    position: relative;
    height: 20rpx;
  }

  .connect-ring {
    position: absolute;
    top: -28rpx;
    height: 76rpx;
    width: 20rpx;
    padding: 8rpx 6rpx;
    box-sizing: border-box;

    &:after,
    &:before {
      content: "";
      position: absolute;
      z-index: 6;
      left: 0;
      height: 20rpx;
      width: 20rpx;
      border-radius: 20rpx;
    }

    .line {
      z-index: 8;
      display: block;
      height: 100%;
      width: 100%;
      background: #fff;
      border-radius: 20rpx;
    }

    &.bgf-ring--left {
      left: 20rpx;

      &:before {
        top: 0;
        background: #f4914e;
      }

      &:after {
        bottom: 0;
        background: #f4914e;
      }
    }

    &.bgf-ring--right {
      right: 20rpx;

      &:before {
        top: 0;
        background: #e03e71;
      }

      &:after {
        bottom: 0;
        background: #e03e71;
      }
    }
  }

  /* 砍价进度 */
  .bargain-wrap {
    position: relative;
    background: #fff;
    padding: 40rpx 30rpx 30rpx;
    box-shadow: 0 4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
    border-radius: 16rpx;
  }

  .bargain-info {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #404040;
    line-height: 40rpx;

    .focal {
      margin: 0 5rpx;
    }
  }

  .bargain-p {
    margin-top: 40rpx;
    min-height: 32rpx;
  }

  .bargain-people {
    font-size: 24rpx;
    color: #9a9a9a;
    text-align: center;
    line-height: 32rpx;
  }

  /* 进度条 */
  .bgn__process {
    position: relative;
    padding: 30rpx 0;
  }

  .bgn__process-bottom {
    z-index: 1;
    overflow: hidden;
    background-image: linear-gradient(0deg, #f0f2f7, #e8ebf3);
  }

  .bgn__process-bottom,
  .bgn__process-process {
    position: relative;
    height: 30rpx;
    border-radius: 30rpx;
  }

  .bgn__process-process {
    background-image: linear-gradient(90deg, #ffc108, #fde586);
    background: #ffc108;

    &.process--ani {
      &:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 32rpx;
        top: 50%;
        left: 0;
        margin-top: -16rpx;
      }
    }
  }

  /* 操作按钮 */
  .btn-container {
    .btn-item {
      color: #fff;
      height: 80rpx;
      font-size: 30rpx;
      border-radius: 15rpx;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .btn-item__buy {
    width: 280rpx;
    margin-right: 30rpx;
    background-image: linear-gradient(90deg, #fa9e1b, #fe5b1b);
    box-shadow: #fe5b1b 0 22rpx 48rpx -22rpx;

    &.complete {
      width: 360rpx;
      animation: btn_anim 0.9s linear infinite;
      transform-origin: center;
    }
  }

  .btn-item__main {
    width: 320rpx;
    background-image: linear-gradient(90deg, #fe316c, #fd584e);
    box-shadow: #fd584e 0 22rpx 48rpx -22rpx;
    animation: btn_anim 0.9s linear infinite;
    transform-origin: center;
  }

  .btn-item-long {
    max-width: 400rpx;
  }

  /* 按钮动画 */
  @keyframes btn_anim {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    40% {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }
  }

  /* 好友助力榜 */
  .records-container {
    margin-top: 44rpx;
  }

  .records {
    position: relative;
    color: #404040;
    box-shadow: 0 4rpx 40rpx 0 rgba(0, 0, 0, 0.08);
  }

  .records-back {
    position: absolute;
    left: -14rpx;
    right: -14rpx;
    top: -14rpx;
    height: 28rpx;
    border-radius: 28rpx;
    z-index: 1;
    background: #cb272d;
  }

  .records-content {
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 40rpx 30rpx;
  }

  .records-h2 {
    display: flex;
    justify-content: space-between;
    height: 60rpx;
    align-items: center;
    font-weight: 700;
    font-size: 34rpx;
    line-height: 48rpx;
  }

  .friend-help {
    overflow: hidden;
    padding: 40rpx 0 20rpx;
    transition: max-height 0.6s ease-out;
  }

  .records-left,
  .records-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10rpx;
  }

  .records-left {
    .nick-name {
      display: inline-block;
      margin-left: 14rpx;
    }
  }

  .records-left .nick-name,
  .records-right {
    font-size: 28rpx;
    line-height: 40rpx;
  }

  .records-right {
    display: flex;
    justify-content: center;
    align-items: center;

    .red {
      color: #e53a40;
    }
  }

  // 砍价规则(弹窗)
  .pops-content {
    padding: 30rpx 48rpx;
    font-size: 28rpx;
    line-height: 44rpx;
    text-align: left;
    color: #606266;
    min-height: 320rpx;
    max-height: 640rpx;
    box-sizing: border-box;
  }
</style>