优化部分页面以及逻辑

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>