JiangNingUmale-h5/subViolation/ShengchanJiandu/MsgIssue/add.vue

<template>
  <view class="app-container">
    <u-navbar
      leftText="返回"
      :title="title"
      :autoBack="true"
      :placeholder="true"
    />
    <view class="form-item">
      <view class="form-title">
        信息标题
        <text></text>
      </view>
      <view class="item-input view-global">
        <u--input
          placeholder="请输入标题"
          border="none"
          :customStyle="{ height: '45rpx' }"
          v-model="value"
        ></u--input>
      </view>
    </view>
    <view class="form-item">
      <view class="form-title">
        信息内容
        <text></text>
      </view>
      <view class="item-input view-global">
        <u--textarea
          v-model="value"
          placeholder="请输入内容"
          border="none"
        ></u--textarea>
      </view>
    </view>
    <view class="form-item">
      <view class="form-title">
        推送店铺
        <text></text>
      </view>
      <view class="sel-cell view-global">
        <view class="item-input" style="flex: 1; margin: 0 20rpx 0 0">
          <u--input
            placeholder="请输入标题"
            border="none"
            :customStyle="{ height: '45rpx' }"
            v-model="value"
          ></u--input>
        </view>
        <u-button
          text="店铺列表"
          size="small"
          color="linear-gradient(90deg, #32B78B 0%, #00B579 100%)"
          :custom-style="{
            width: '130rpx',
            height: '75rpx',
            margin: '0',
          }"
          @click="handleList()"
        ></u-button>
      </view>
    </view>
    <u-popup :show="show" @close="close">
      <view class="shop-main">
        <!-- @scrolltolower="reachBottom()" -->
        <u-search
          height="75rpx"
          placeholder="搜索关键词"
          v-model="keyword"
          shape="square"
          :showAction="false"
        ></u-search>
        <scroll-view
          scroll-y
          :style="{
            height: 'calc(100% - (75rpx + 20rpx + 100rpx))',
            marginTop: '20rpx',
            border: '1px soild red',
          }"
        >
          <u-radio-group
            v-model="radio"
            :borderBottom="true"
            placement="column"
            :labelDisabled="false"
          >
            <u-radio
              activeColor="#367BEF"
              :customStyle="{ padding: '20rpx' }"
              v-for="item in 10"
              :key="item"
            >
              <view class="radio-cell">
                <text class="cell-mainTitle">xxxxxx店铺1</text>
                <view class="cell-sub">
                  <view class="sub-data">
                    <view class="sub-icon"></view>
                    <view class="sub-name">食品销售</view>
                  </view>
                  <view class="sub-data">
                    <view class="sub-icon"></view>
                    <view class="sub-name">xxxx街道xxxx路xxx号</view>
                  </view>
                </view>
              </view>
            </u-radio>
          </u-radio-group>
        </scroll-view>
        <view class="shop-btn">
          <u-button
            text="重置"
            size="small"
            :custom-style="{
              width: '160rpx',
              height: '75rpx',
              margin: '0',
            }"
            @click="handleList()"
          ></u-button>
          <u-button
            text="确认(2/601)"
            size="small"
            color="linear-gradient(90deg, #3976F1 0%, #3CA0F6 100%)"
            :custom-style="{
              flex: '1',
              height: '75rpx',
              margin: '0 0 0 20rpx',
            }"
            @click="handleList()"
          ></u-button>
        </view>
      </view>
    </u-popup>
    <fixed-buttom title="发布"></fixed-buttom>
  </view>
</template>

<script>
export default {
  data() {
    return {
      radio: null,
      value: "",
      show: false,
      keyword: "",
      title: "",
    };
  },
  onLoad(option) {
    this.title = option.id ? "编辑信息" : "新增信息";
  },
  methods: {
    close() {
      this.show = false;
    },
    handleList() {
      this.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.form-item {
  .form-title {
    position: relative;
    font-size: 30rpx;
    font-weight: bold;
    color: #2e2f31;
    margin-bottom: 20rpx;
  }

  .form-title text {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 12rpx;
    width: 140rpx;
    background: url("/static/images/juxing.png");
    background-size: cover;
    max-width: 300rpx;
    z-index: 0;
  }

  .item-input {
    margin-bottom: 30rpx;
    border-radius: 16rpx;
    background-color: #fff;
    box-sizing: border-box;
    padding: 25rpx;
  }
}

.sel-cell {
  display: flex;
  align-items: center;
}

.shop-main {
  height: 80vh;
  background-color: #fff;
  box-sizing: border-box;
  padding: 20rpx;
  position: relative;

  .shop-btn {
    position: absolute;
    left: 0;
    bottom: 0%;
    width: 100%;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 20rpx;
    border-top: 1px solid #dce3ec;
    box-shadow: 10rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
  }
}

.radio-cell {
  .cell-mainTitle {
    font-size: 32rpx;
    font-weight: 500;
    color: #34373b;
  }

  .cell-sub {
    display: flex;
    align-items: center;
    margin-top: 10rpx;
  }

  .sub-data {
    display: flex;
    align-items: center;

    .sub-name {
      font-size: 24rpx;
      font-weight: 500;
      color: #9da2ab;
    }
  }
}
</style>