pay-video-applet-uniapp-24-8-22/pages/mine/sonPage/promotion/promotionDetail.vue

<template>
  <view class="promotionDetail">
    <!--顶部导航栏-->
    <navbar leftClick @leftClick="$utils.navigateBack" title="推广详情"/>

    <!--主页面-->
    <view class="frame">
      <!--标题-->
      <view class="title">
        <span>推广基本信息</span>
      </view>

      <!--基本信息-->
      <view style="" class="basicInfo">
        <view class="item">
          <view class="label">春天的气息丫丫</view>
          <view class="value">???</view>
        </view>
        <view class="item">
          <view class="label">价格</view>
          <view class="value">100</view>
        </view>
        <view class="item">
          <view class="label">时长</view>
          <view class="value">24小时</view>
        </view>
        <view class="item">
          <view class="label">联系方式</view>
          <view class="value">输入框</view>
        </view>
        <view>推广作品</view>
        <view style="width: 30%;height: 300rpx;border-radius: 20rpx;overflow: hidden;">
          <image src="/static/image/promotionRecord/3.png" style="width: 100%;height: 100%;"></image>
        </view>
      </view>


      <!--  继续发布按钮-->
      <view class="bottom">
        <button @click="continueToPublish" class="continueBtn">
          继续发布
        </button>
      </view>


      <!--确认发布弹框-->
      <uv-popup ref="popup" mode="center" custom-style="height: 400rpx;" :closeOnClickOverlay="false" >
        <view class="content">
          <view class="title">
            推广选项
          </view>
          <!--付费周期-->
          <view style="" class="payCycle">
            <view>付费周期</view>
            <view style="width: 200rpx;height:50rpx">
              <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
              <view style="display: flex;justify-content: flex-start" @click="openPicker">
                <span style="margin-right: 10rpx;">{{ form.cycle }}</span>
                <uv-icon name="arrow-down" color="#2979ff" size="28"></uv-icon>
              </view>
            </view>
          </view>

          <!--金额-->
          <view style="width:100%;display: flex;justify-content: space-between;align-items: center;">
            <view>金额</view>
            <view style="width: 200rpx;height:50rpx">
              <uv-input type="number" placeholder="请输入内容" border="surround" v-model="form.moneyValue"
                        @change="moneyValueChange"></uv-input>
            </view>
          </view>

          <!--确认推广按钮-->
          <view class="confirmBottom">
            <button @click="confirmPromotion" class="confirmPromotionBtn">
              确认推广
            </button>
          </view>
        </view>
      </uv-popup>


    </view>
  </view>
</template>

<script>
export default {
  onLoad: function (options) {
    // 获取传递过来的 id 参数
    const id = options.id;
    console.log('ID:', id);
    // 进行后续处理...
  },
  data() {
    return {
      columns: [
        ['一天', '两天', '三天']
      ],
      form: {
        moneyValue: 0,
        cycle: '一天'
      },

    };
  },
  methods: {
    openPicker() {
      this.$refs.picker.open();
    },
    confirm(e) {
      console.log('confirm', e);
      this.form.cycle = e.value[0]
    },
    // 推广确认按钮
    continueToPublish() {
      this.$refs.popup.open();
    },
    // 金额发生变化
    moneyValueChange(e) {
      console.log('moneyValue', e);
      this.form.moneyValue = e
    },
    // 确认推广
    confirmPromotion() {
      console.log('确认推广', this.form);
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.promotionDetail {
  width: 100vw;
  height: 100vh;

  .frame {
    width: 100%;
    //height: calc(100vh - 220rpx);
    padding: 28rpx 28rpx 0 28rpx;

    .title {
      font-size: 36rpx;
      font-weight: 600;
    }

    .basicInfo {
      display: flex;
      flex-direction: column;
      gap: 60rpx;
      margin-top: 50rpx;
      width: 90%;

      .item {
        display: flex;
        justify-content: space-between;
      }
    }

    .bottom {
      position: fixed;
      bottom: 30rpx;
      left: 25%;
      width: 50%;
      height: 100rpx;

      .continueBtn {
        color: #ffffff;
        background: $uni-linear-gradient-btn-color;
      }
    }
  }




  .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20rpx;
    width: 600rpx;
    height: 100%;
    padding: 20rpx;


    .title {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .payCycle {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }


    .confirmBottom {
      position: fixed;
      bottom: 38%;
      left: 30%;
      width: 38%;
      height: 100rpx;

      .confirmPromotionBtn {
        color: #ffffff;
        background: $uni-linear-gradient-btn-color;
      }
    }
  }
}

/deep/.uv-popup .uv-popup__content{
  border-radius: 20rpx;
}
</style>