yicangzongtai_app_240321/pages/research/homepage/aboutLida.vue

<template>
  <view class="about-lida">
    <view class="title">
      <navbar :config="config">
        <!--        <view
          slot="right"
          class="iconfont"
          style="
            font-size: 36rpx;
            font-weight: 500;
            color: #999999;
            margin-right: 30rpx;
          "
        >
          &#xe6b1;
        </view> -->
      </navbar>
    </view>
    <!--    <view class="image-one"  @click="
                imgLink(advertisement.model_type, advertisement.model_id, advertisement.url)
              ">
      <image :src="advertisement.cover" mode="" ></image>
    </view> -->
    <view class="image-one">
      <view class="swiper">
        <view class="uni-margin-wrap">
          <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
            circular="ture">
            <swiper-item v-for="item in advertisement" :key="item.id">
              <view class="swiper-item" @click="imgLink(item.model_type, item.model_id, item.url, item.shop_id)">
                <image class="bannersize" :src="item.cover" mode="aspectFill"></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>

    <view v-for="(item, index) in weList" :key="index">
      <view v-if="index % 2 == 0" @click="goDetail(item)">
        <view class="image-two">
          <!-- 	<view class="iconfont item-left">&#xe66e;</view> -->
          <image class="item-left" :src="imgUrl+'/index/green.png'" mode=""></image>
          <view class="item-right">
            <view class="title-top">{{ item.title }}</view>
            <view class="title-bottom">{{ item.intro }}</view>
          </view>
        </view>
      </view>
      <view v-if="index % 2 != 0" @click="goDetail(item)">
        <view class="image-three">
          <view class="item-left">
            <view class="item-top">{{ item.title }}</view>
            <view class="item-bottom">{{ item.intro }}</view>
          </view>
          <!-- <view class="iconfont item-right">&#xe66e;</view> -->
          <image class="item-right" :src="imgUrl+'/index/white.png'" mode=""></image>
        </view>
      </view>

      <!--    <view class="image-two">
     <view class="iconfont item-left">&#xe66e;</view>
      <view class="item-right">
        <view class="title-top"> 简单方便 </view>
        <view class="title-bottom">
          从数据出发，仅需几行代码可以 轻松获得想要的图表展示效果。
        </view>
      </view>
    </view> -->
    </view>
    <!-- 		<view class="image-five">
			<image src="../../../static/delImg/banenr.png" mode=""></image>
		</view> -->
    <!-- 这一块有问题 -->
    <!-- 		<view class="image-six">
			<image src="../../../static/delImg/banenr.png" mode=""></image>
		</view> -->

    <view v-if="formVisible">
      <view class="middle">
        <view class="middle-top">您的联系方式</view>
        <view class="username">
          <view class="name">姓名</view>
          <input type="text" value="" @input="youName" maxlength="6" placeholder="请输入您的姓名" />
        </view>
        <view class="telephone">
          <view class="phone">电话</view>
          <input type="number" value="" @input="onPhone" maxlength="11" placeholder="请输入您的电话" />
        </view>
        <view class="remind">24小时内会有客服联系你，请保持电话畅通</view>
        <view class="button" @click="submit">提交</view>
        <!--        <image
          class="delete"
          src="../../../static/index/del.png"
          mode=""
          @click="closemsg"
        ></image> -->
      </view>
    </view>
    <view class="image-seven" @click="toMap">
      <MapCom :list="addresss" @click="toMap"></MapCom>
      <!-- <image src="../../../static/delImg/banenr.png" mode=""></image> -->
    </view>
    <view class="buttom">
      <view class="bottom-left-one" @click="goPhone">
        <view class="iconfont phone">&#xe60d;</view>
      </view>
      <view class="bottom-right" @click="obtainData()">获取资料</view>
    </view>

    <uni-popup ref="popup" type="center"></uni-popup>
  </view>
</template>

<script>
  import MapCom from './map';
  export default {
    components: {
      MapCom
    },
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '加入我们',
          color: '#1A1A1A',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, '#ffffff'],
          statusBarFontColor: '#FFFFFF',
          rightSlot: true
        },
        name: '',
        phone: '',
        customerPhone: '',
        city: '深圳市',
        addresss: [],
        formVisible: false,
        weList: [],
        advertisement: [],
        imgUrl: this.$mConfig.staticUrl,
      };
    },
    onLoad() {
      // this.getMsg();
      this.getPhone();
      this.getShop(this.city);
      this.getList();
      this.getadvertisement();
    },
    methods: {
      toMap() {
        uni.navigateTo({
          url: "/pages/research/homepage/mapToPage?list=" + JSON.stringify(this.addresss)
        })
      },
      imgLink(type, id, url, shopid) {
        if (type == 'goods') {
          uni.navigateTo({
            url: '/pages/product/goods/goods?id=' + id + '&shopid=' + shopid
          });
        } else if (type == 'service') {
          // uni.navigateTo({
          // 	url: '/pages/product/goods/serviceGood?id=' + id
          // });
        } else if (type == "point_goods") {
          // uni.navigateTo({
          // 	url: "/pages/product/goods/IntegralGood?id=" + id
          // });
        } else if (type == 'url') {
          uni.navigateTo({
            url: '/pages/index/webView?linkUrl=' + url
          });
        }
      },
      goDetail(item) {
        uni.navigateTo({
          url: 'about-us-detail?id=' + item.id
        });
      },
      //广告
      getadvertisement() {
        this.$http.get('/ad/ad/getShopAdByAdL/0/pt-join-us').then(res => {
          if (res && res.code == 200) {
            this.advertisement = res.list;
          }
        });
      },
      //获取关于我们的数据
      getList() {
        this.$http.get('/about/us/list').then(res => {
          if (res && res.code == 200) {
            this.weList = res.list;
          }
        });
      },
      getShop(city) {
        this.$http.get(`/yxt/shop/all-shop`).then(res => {
          if (res && res.code == 200) {
            this.addresss = res.list;
          }
        });
      },
      //获取手机号
      getPhone() {
        this.$http.get('/system/info/info').then(res => {
          if (res && res.code == 200) {
            this.customerPhone = res.data.hotline;
          }
        });
      },
      //唤起电话
      goPhone() {
        let that = this;
        uni.showModal({
          title: '是否需要联系客服',
          success(res) {
            if (res.confirm) {
              uni.makePhoneCall({
                phoneNumber: that.customerPhone,
                success(res) {
                  console.log('调用成功');
                },
                fail(res) {
                  console.log('调用失败');
                }
              });
            } else if (res.cancel) {}
          }
        });
      },
      //提交信息
      submit() {
        if (this.name == '') {
          this.$mUtil.toast('请输入您的姓名');
          return false;
        }
        if (this.phone == '') {
          this.$mUtil.toast('请输入您的手机号');
          return false;
        }
        if (!this.phone.match(this.$mConfig.telRegex)) {
          this.$mUtil.toast('请输入正确的手机号');
          return false;
        }
        this.$http
          .post('/personal/data/save', {
            name: this.name,
            mobile: this.phone
          })
          .then(res => {
            if (res && res.code == 200) {
              this.formVisible = false;
              this.name = null;
              this.phone = null;
              this.$mUtil.toast('提交成功');
              // setTimeout(()=>{

              // },1000)
            }
          });
      },

      //用户名字
      youName(e) {
        this.name = e.detail.value;
      },
      //用户手机号
      onPhone(e) {
        this.phone = e.detail.value;
      },
      //请求数据
      // getMsg() {
      //   this.$http.get("/about/us/info").then((res) => {
      //     if (res && res.code == 200) {
      //     }
      //   });
      // },
      //弹出框的开启和关闭
      obtainData() {
        this.formVisible = true;
        // setTimeout(() => {
        // 	uni.pageScrollTo({
        // 		scrollTop: 999999
        // 	})
        // }, 100)

        // this.$refs.popup.open();
      },
      closemsg() {
        this.$refs.popup.close();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .button {
    // margin: 0 48rpx;
    padding: 18rpx 202rpx;
    margin-top: 72rpx;
    font-size: 36rpx;
    font-weight: Regular;
    text-align: center;
    color: #dccda4;
    background-color: #0B844A;
    border-radius: 42rpx;
  }

  .phone {
    font-size: 70rpx;
  }

  .swiper-item {
    display: block;
    height: 450rpx;
    line-height: 450rpx;
    text-align: center;
  }

  .uni-margin-wrap {
    width: 100%;
  }

  .bannersize {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 340rpx;
  }

  .swiper {
    height: 450rpx;
  }

  // .swiper {
  // 	/deep/ .uni-swiper-dot {
  // 		width: 40rpx !important;
  // 		height: 8rpx;
  // 		border-radius: 5rpx !important;
  // 		background-color: #ffffff !important;
  // 		opacity: 0.5;
  // 	}

  // 	/deep/ .uni-swiper-dot-active {
  // 		background-color: #ffffff !important;
  // 		opacity: 1;
  // 	}
  // }

  .about-lida {
    background-color: #f5f5f5;
  }

  .middle {
    margin: 30rpx;
    background-color: #ffffff;
    padding: 48rpx 47rpx 48rpx 58rpx;
    border-radius: 20rpx;
    position: relative;

    // z-index: 9999;
    .delete {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      right: 0;
      top: -68rpx;
    }

    .remind {
      // height: 500rpx;
      font-size: 22rpx;
      color: #999999;
      font-weight: Medium;
      line-height: 28rpx;
      margin-top: 20rpx;
    }

    .username,
    .telephone {
      display: flex;
      padding: 52rpx 0 32rpx 0;
      border-bottom: 1rpx solid #e6e6e6;

      .name,
      .phone {
        font-size: 28rpx;
        color: #333333;
        font-weight: Medium;
        margin-right: 68rpx;
      }
    }

    .middle-top {
      text-align: center;
      font-size: 36rpx;
      font-weight: 700;
      color: #1a1a1a;
    }
  }

  .buttom {
    padding: 30rpx;
    display: flex;
    align-items: center;

    .bottom-left-one {
      text-align: center;
      line-height: 70rpx;
      border-radius: 50%;

      .iconfont {
        font-size: 70rpx;
        color: #ffffff !important;
      }
    }

    .bottom-right {
      flex: 1;
      padding: 18rpx 222rpx;
      background-color: #ffffff;
      margin-left: 30rpx;
      border-radius: 43rpx;
      color: #0B844A;
      font-size: 36rpx;
      font-weight: 400;
    }
  }

  .image-seven {
    height: 630rpx;
    margin: 0 30rpx 30rpx 30rpx;

    image {
      height: 100%;
    }
  }

  .image-six {
    height: 494rpx;
    margin: 0 30rpx 30rpx 30rpx;

    image {
      height: 100%;
    }
  }

  .image-five {
    margin: 30rpx;
    height: 472rpx;
    border-radius: 16rpx;

    image {
      height: 100%;
    }
  }

  .image-two:nth-child(odd) {
    background-color: #ffffff;
    display: flex;

    .item-left {
      width: 121rpx;
      height: 121rpx;
      // background: #0B844A;
      border-radius: 50%;
      margin: 64rpx 60rpx;
    }

    .item-right {
      flex: 1;
      margin-top: 50rpx;
      margin-right: 60rpx;

      .title-top {
        font-size: 38rpx;
        color: #1a1a1a;
        font-weight: 700;
        margin-bottom: 16rpx;
      }

      .title-bottom {
        font-size: 28rpx;
        color: #999999;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        whitewhite-space: nowrap;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal !important;
      }
    }
  }

  .image-three {
    background-color: #0B844A;
    display: flex;

    .item-left {
      margin: 50rpx 60rpx;
      flex: 1;

      .item-top {
        color: #ffffff;
        font-size: 38rpx;
        font-weight: 700;
        margin-bottom: 16rpx;
      }

      .item-bottom {
        color: #ffffff;
        font-weight: 400;
        font-size: 28rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        whitewhite-space: nowrap;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal !important;
      }
    }

    .item-right {
      width: 121rpx;
      height: 121rpx;
      margin: 64rpx 58rpx 0 0;
      border-radius: 50%;
      text-align: center;
      line-height: 60px;
      font-size: 40rpx;
    }
  }

  .image-three,
  .image-four,
  .image-two {
    margin: 0 30rpx;
    height: 250rpx;
    border-radius: 16rpx;

    image {
      height: 100%;
    }
  }

  .middle-top {
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    color: #1a1a1a;
  }

  .buttom {
    padding: 30rpx;
    background-color: #0B844A;
    display: flex;
    align-items: center;

    .bottom-left {
      width: 70rpx;
      height: 70rpx;
      background-color: #cb894d;
      text-align: center;
      line-height: 70rpx;
      border-radius: 50%;

      .iconfont {
        color: #0B844A;
      }
    }

    .bottom-right {
      padding: 18rpx 222rpx;
      background-color: #ffffff;
      margin-left: 30rpx;
      border-radius: 43rpx;
      color: #0B844A;
      font-size: 36rpx;
      font-weight: 400;
    }
  }

  .image-seven {
    height: 630rpx;
    margin: 0 30rpx 30rpx 30rpx;

    image {
      height: 100%;
    }
  }

  .image-six {
    height: 494rpx;
    margin: 0 30rpx 30rpx 30rpx;

    image {
      height: 100%;
    }
  }

  .image-five {
    margin: 30rpx;
    height: 472rpx;
    border-radius: 16rpx;

    image {
      height: 100%;
    }
  }

  .image-three,
  .image-four,
  .image-two {
    margin: 0 30rpx;
    height: 250rpx;
    border-radius: 16rpx;

    image {
      height: 100%;
    }
  }

  .image-one {
    width: 100%;
    height: 450rpx;
    margin-bottom: 30rpx;
    border-radius: 16rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
</style>