优化部分页面以及逻辑

pages/promotion/bargain/detail.vue

@@ -0,0 +1,499 @@
+<template>
+  <div class="page">
+    <u-navbar back-icon-color="#fff" :background="background" :border-bottom="false" title=""></u-navbar>
+
+    <div class="wrapper">
+      <!-- 砍价列表 -->
+      <div class="box box1">
+        <div class="bargain">
+          <div class="flex bargain-item">
+            <div class="goods-img">
+              <u-image width="200" height="200" :src="bargainDetail.thumbnail"></u-image>
+            </div>
+            <div class="goods-config">
+              <div class="goods-title wes-2">
+                {{bargainDetail.goodsName}}
+              </div>
+              <div class="flex price-box">
+                <div class="purchase-price">当前:<span>￥{{ activityData.surplusPrice == 0 ? this.bargains.purchasePrice :  activityData.surplusPrice | unitPrice}}</span>
+                </div>
+                <div class="max-price">原价:<span>￥{{ bargainDetail.price | unitPrice}}</span>
+
+                </div>
+              </div>
+              <div class="tips">{{bargainDetail.sellingPoint}}</div>
+            </div>
+          </div>
+          <!-- 砍价进度 -->
+          <div class="bargain-progress">
+            <u-line-progress class="line" :active-color="lightColor" striped striped-active :percent="totalPercent"></u-line-progress>
+            <div class="flex tips">
+              <div>已砍{{cutPrice}}元</div>
+              <div>还剩{{activityData.surplusPrice}}元</div>
+            </div>
+          </div>
+          <!-- 参与砍价 -->
+          <div class="bargaining" v-if="!activityData.pass" @click="shareBargain">
+            邀请砍价
+          </div>
+          <!-- 立即购买 -->
+
+          <div class="buy" v-else @click="getGoodsDetail">
+            立即购买
+          </div>
+        </div>
+      </div>
+      <!-- 帮砍列表 -->
+      <div class="box box2">
+        <div class="bargain">
+          <div class="bargain-title">帮忙砍</div>
+          <div class="user-item flex" v-if="logData.length !=0 " v-for="(item,index) in logData" :key="index">
+            <div>
+              <u-image width="75" shape="circle" height="75" :src="item.kanjiaMemberFace"></u-image>
+            </div>
+            <div class="user-config flex">
+              <div class="user-name">
+                <div>{{item.kanjiaMemberName | noPassByName}}</div>
+                <div>使出吃的奶劲儿</div>
+              </div>
+              <div class="save">砍掉：<span>￥{{item.kanjiaPrice | unitPrice}}</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 产品详情 -->
+      <div class="box box3">
+        <div class="bargain">
+          <div class="bargain-title">商品详情</div>
+          <view class="u-content">
+            <u-parse :html="bargainDetail.mobileIntro"></u-parse>
+          </view>
+
+        </div>
+      </div>
+
+      <!-- 砍价 -->
+      <u-modal title="恭喜您砍掉了" v-model="Bargaining" mask-close-able :show-confirm-button="false" :title-style="{color: lightColor}">
+        <view class="slot-content">
+          <u-count-to :start-val="0" ref="uCountTo" font-size="100" :color="lightColor" :end-val="kanjiaPrice" :decimals="2" :autoplay="autoplay"></u-count-to><span class="price">元</span>
+        </view>
+      </u-modal>
+      <!-- 帮砍 -->
+
+      <u-modal :show-title="false" v-model="helpBargainFlage" :show-confirm-button="false">
+        <view class="help-bargain" @click="handleClickHelpBargain">
+          <u-image width="100%" height="600rpx" src="/pages/promotion/static/bargain.jpeg"></u-image>
+          <u-image class="help" width="300rpx" height="80rpx" src="/pages/promotion/static/help-bargain.png"></u-image>
+        </view>
+      </u-modal>
+
+      <!-- 分享 -->
+      <shares @close="closeShare" :link="'/pages/promotion/bargain/detail?id='+routerVal.id+'&activityId='+activityData.id" type="kanjia" :thumbnail="bargainDetail.thumbnail"
+        :goodsName="bargainDetail.goodsName" v-if="shareFlage " />
+
+      <!-- 购买 -->
+
+      <popupGoods :addr="addr" ref="popupGoods" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="bargainDetail" :goodsSpec="goodsSpec" v-if="bargainDetail.id "
+        @handleClickSku="getGoodsDetail" />
+
+      <!-- 产品详情 -->
+      <div class=" box4">
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import popupGoods from "@/pages/cart/payment/popup/goods"; //购物车商品的模块
+import {
+  getBargainDetail,
+  getBargainActivity,
+  openBargain,
+  getBargainLog,
+  helpBargain,
+} from "@/api/promotions";
+import { getGoods } from "@/api/goods.js";
+import shares from "@/components/m-share/index";
+export default {
+  components: {
+    shares,
+    popupGoods,
+  },
+  data() {
+    return {
+      background: {
+        backgroundColor: "transparent",
+      },
+      maskFlag: false, //商品弹框
+      shareFlage: false,
+      lightColor: this.$lightColor,
+      bargains: {},
+      bargainDetail: {}, //砍价商品详情
+      Bargaining: false, //砍价弹出框
+      helpBargainFlage: false, //帮砍弹出框
+      autoplay: false, //砍价金额滚动
+      kanjiaPrice: 0, //砍价金额
+      totalPercent: 0, //砍价半分比
+      activityData: "", //砍价活动
+      cutPrice: 0, //已砍金额
+      params: {
+        // id: "", //砍价活动ID
+        // kanjiaActivityGoodsId: "", //砍价商品SkuID
+        // kanjiaActivityId: "", //邀请活动ID，有值说明是被邀请人
+        // status: "", //状态
+      },
+
+      logData: [], // 帮砍记录
+      //获取帮砍记录参数
+      logParams: {
+        pageNumber: 1,
+        pageSize: 20,
+        kanJiaActivityId: "",
+      },
+
+      goodsDetail: {}, //商品详情
+      goodsSpec: {}, //商品规格
+      selectedGoods: "", //选择的商品
+    };
+  },
+  onLoad(options) {
+    this.routerVal = options;
+    if (options.activityId) {
+      this.params.kanjiaActivityId = options.activityId;
+    }
+  },
+  onShow() {
+    this.init();
+  },
+  watch: {
+    // 砍价弹窗
+    Bargaining(val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.$refs.uCountTo.start();
+        });
+      }
+    },
+    // 监听砍价活动金额
+    activityData: {
+      handler(val) {
+        if (val) {
+          // 计算砍价百分比
+          this.totalPercent =
+            100 -
+            Math.floor((val.surplusPrice / this.bargainDetail.price) * 100);
+          this.cutPrice = (
+            this.bargainDetail.price - this.activityData.surplusPrice
+          ).toFixed(2);
+          // 获取砍价日志
+          this.logParams.kanJiaActivityId = val.id;
+
+          // 判断是否是帮砍
+          if (this.params.kanjiaActivityId && val.help) {
+            this.helpBargainFlage = true;
+          }
+
+          this.getBargainLogList();
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    closePopupBuy(val) {
+      this.maskFlag = false;
+    },
+    closeShare() {
+      this.shareFlage = false;
+    },
+    // 邀请砍价
+    shareBargain() {
+      this.shareFlage = true;
+    },
+
+    // 获取商品详情
+    getGoodsDetail() {
+      uni.showLoading({
+        title: "加载中",
+        mask: true,
+      });
+
+      this.$refs.popupGoods.buy({
+        skuId: this.bargainDetail.id,
+        num: 1,
+        cartType: "KANJIA",
+      });
+      // getGoods(this.bargainDetail.id, this.bargainDetail.goodsId).then(
+      //   (response) => {
+      //     this.goodsDetail = response.data.result.data;
+      //     this.selectedGoods = response.data.result.data;
+      //     this.goodsSpec = response.data.result.specs;
+      //     uni.hideLoading();
+
+      //     // this.maskFlag = true;
+      //   }
+      // );
+    },
+
+    // 初始化商品以及砍价活动
+    async init() {
+      // 获取商品
+      let res = await getBargainDetail(this.routerVal.id);
+      if (res.data.success) {
+        this.bargainDetail = res.data.result.goodsSku;
+        this.bargains = res.data.result;
+        // 被邀请活动id
+        if (this.params.kanjiaActivityId) {
+        } else {
+          this.params.kanjiaActivityGoodsId = this.routerVal.id;
+        }
+        // 获取砍价活动
+        this.activity();
+      }
+    },
+    // 获取砍价活动
+    async activity() {
+      let res = await getBargainActivity(this.params);
+      // 判断当前是否是第一次进入，如果是第一次进入默认砍一刀
+      res.data.success
+        ? res.data.result
+          ? (this.activityData = res.data.result)
+          : this.openActivity()
+        : "";
+    },
+    // 分页获取砍价活动-帮砍记录
+    async getBargainLogList() {
+      let res = await getBargainLog(this.logParams);
+      if (res.data.success) {
+        this.logData = res.data.result.records;
+      }
+    },
+    // 帮忙砍一刀
+    async handleClickHelpBargain() {
+      let res = await helpBargain(this.params.kanjiaActivityId);
+      if (res.data.success) {
+        this.helpBargainFlage = false;
+        this.kanjiaPrice = res.data.result.kanjiaPrice;
+        this.Bargaining = true;
+        // 帮砍完成之后查询帮砍记录
+        this.init();
+      } else {
+        this.helpBargainFlage = false;
+      }
+    },
+    // 发起砍价活动
+    async openActivity(data) {
+      let res = await openBargain({ id: this.routerVal.id });
+      if (res.data.success) {
+        this.kanjiaPrice = res.data.result.kanjiaPrice;
+        this.Bargaining = true;
+        // 查询帮砍记录
+        this.init();
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+page {
+  background-color: $light-color !important;
+}
+</style>
+<style lang="scss" scoped>
+.slot-content {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  margin: 20rpx 0 80rpx 0;
+}
+.price {
+  margin-left: 10rpx;
+  color: $light-color;
+}
+.price-box {
+  align-items: center;
+  padding: 10rpx 0;
+}
+.wrapper {
+  background: url("../static/Bargaining.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  height: 700rpx;
+  width: 100%;
+}
+
+.box {
+  background: #fff;
+  border-radius: 20rpx;
+  position: relative;
+  width: 94%;
+  margin: 0 auto;
+  > .bargain {
+    padding: 32rpx;
+  }
+}
+.box1 {
+  top: 750rpx;
+}
+.box2 {
+  top: 770rpx;
+}
+.box3 {
+  top: 790rpx;
+}
+.box4 {
+  top: 810rpx;
+  height: 200rpx;
+}
+.bargain-item {
+  align-items: center;
+}
+.goods-config {
+  margin-left: 20rpx;
+  > .goods-title {
+    font-weight: bold;
+  }
+}
+.max-price,
+.purchase-price {
+  font-size: 24rpx;
+  color: #999;
+}
+.max-price {
+  margin-left: 10rpx;
+  text-decoration: line-through;
+}
+.purchase-price {
+  color: $main-color;
+  > span {
+    font-size: 32rpx;
+    font-weight: bold;
+  }
+}
+
+.bargaining,
+.buy {
+  font-size: 24rpx;
+  color: #fff;
+  width: 80%;
+  margin: 50rpx auto 0 auto;
+  text-align: center;
+  font-size: 30rpx;
+  background-image: linear-gradient(
+    25deg,
+    $main-color,
+    $light-color,
+    $aider-light-color
+  );
+
+  padding: 18rpx;
+  border-radius: 100px;
+  animation: mymove 5s infinite;
+  -webkit-animation: mymove 5s infinite; /*Safari and Chrome*/
+  animation-direction: alternate; /*轮流反向播放动画。*/
+  animation-timing-function: ease-in-out; /*动画的速度曲线*/
+  /* Safari 和 Chrome */
+  -webkit-animation: mymove 5s infinite;
+  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+}
+
+@keyframes mymove {
+  0% {
+    transform: scale(1); /*开始为原始大小*/
+  }
+  25% {
+    transform: scale(1.1); /*放大1.1倍*/
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.1);
+  }
+}
+.line {
+  margin: 20rpx 0;
+}
+.tips {
+  font-size: 24rpx;
+  color: #999;
+  justify-content: space-between;
+}
+.bargain-progress {
+  margin: 20rpx 0;
+}
+.bargain-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: $light-color;
+  text-align: center;
+  margin-bottom: 40rpx;
+}
+.user-item {
+  margin: 40rpx 0;
+  align-items: center;
+}
+.user-config {
+  margin-left: 20rpx;
+  flex: 8;
+  align-items: center;
+  justify-content: space-between;
+  > .user-name {
+    > div:nth-of-type(1) {
+      font-size: 28rpx;
+    }
+    > div:nth-last-of-type(1) {
+      font-size: 24rpx;
+      color: #999;
+    }
+  }
+}
+.save {
+  color: $light-color;
+  > span {
+    font-weight: bold;
+  }
+}
+.mobile-intro {
+  overflow: hidden;
+  max-width: 100%;
+}
+
+@keyframes fontMove {
+  0% {
+    transform: scale(1); /*开始为原始大小*/
+  }
+  25% {
+    transform: scale(1.1); /*放大1.1倍*/
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.1);
+  }
+}
+
+.help-bargain {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  > .help {
+    margin-bottom: 40rpx;
+    border-radius: 20rpx;
+
+    margin-top: 40rpx;
+    animation: fontMove 5s infinite;
+    -webkit-animation: fontMove 5s infinite; /*Safari and Chrome*/
+    animation-direction: alternate; /*轮流反向播放动画。*/
+    animation-timing-function: ease-in-out; /*动画的速度曲线*/
+    /* Safari 和 Chrome */
+    -webkit-animation: fontMove 5s infinite;
+    -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+    -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+  }
+}
+</style>

pages/promotion/bargain/list.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="page">
+    <u-navbar  back-icon-color="#fff" :background="background" :border-bottom="false" title=""></u-navbar>
+    <div class="wrapper">
+      <!-- 砍价列表 -->
+      <div class="box">
+        <div class="bargain" v-if="bargainList.length!=0">
+          <div class="flex bargain-item" v-for="(item,index) in bargainList" :key="index">
+            <div class="goods-img">
+              <u-image width="150" height="150" :src="item.thumbnail"></u-image>
+            </div>
+            <div class="goods-config">
+              <div class="goods-title wes-2">
+                {{item.goodsName}}
+              </div>
+              <div class="flex goods-buy">
+                <div class="max-price">最低：<span>￥{{item.purchasePrice | unitPrice}}</span></div>
+                <div class="bargaining" @click="navigateToBargainDetail(item)">参与砍价</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bargain empty" v-else>
+          <u-empty text="暂无活动" mode="list"></u-empty>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getBargainList } from "@/api/promotions";
+export default {
+  data() {
+    return {
+      background: {
+					backgroundColor: 'transparent',
+      },
+      params: {
+        promotionStatus: "START", //开始/上架
+        pageNumber: 1,
+        pageSize: 20,
+      },
+      bargainList: [], //砍价活动列表
+    };
+  },
+  onShow() {
+    this.init();
+  },
+  methods: {
+    /**
+     * 初始化砍价列表
+     */
+    async init() {
+      let res = await getBargainList(this.params); //砍价列表
+      if (res.data.success) {
+        this.bargainList = res.data.result.records;
+      }
+    },
+
+    // 跳转到砍价详情
+    navigateToBargainDetail(val) {
+      uni.navigateTo({
+        url: `/pages/promotion/bargain/detail?id=${val.id}`,
+      });
+    },
+  },
+};
+</script>
+<style lang="scss">
+page{
+   background-color: $light-color !important;
+}
+</style>
+<style lang="scss" scoped>
+
+.wrapper {
+  background: url("../static/Bargaining.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  height: 700rpx;
+  width: 100%;
+}
+
+.box {
+  background: #fff;
+  border-radius: 20rpx;
+  position: relative;
+  top: 750rpx;
+  width: 94%;
+  margin: 0 auto;
+  > .bargain {
+    padding: 32rpx;
+  }
+}
+.bargain-item {
+  align-items: center;
+
+  border-bottom: 1rpx solid #f6f6f6;
+  padding: 32rpx 0;
+}
+.goods-config {
+  flex: 8;
+  margin-left: 20rpx;
+  > .goods-title {
+    height: 80rpx;
+    font-weight: bold;
+  }
+}
+.max-price {
+  color: $main-color;
+  font-size: 24rpx;
+  > span {
+    font-size: 32rpx;
+    font-weight: bold;
+  }
+}
+.goods-buy {
+  margin: 10rpx 0;
+  align-items: center;
+  justify-content: space-between;
+}
+.bargaining {
+  font-size: 24rpx;
+  color: #fff;
+  background: $light-color;
+  padding: 10rpx 24rpx;
+  border-radius: 100px;
+}
+.empty {
+  height: 400rpx;
+}
+</style>