123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642 |
- <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;
- "
- >
- 
- </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"></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"></view> -->
- <image class="item-right" :src="imgUrl+'/index/white.png'" mode=""></image>
- </view>
- </view>
- <!-- <view class="image-two">
- <view class="iconfont item-left"></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"></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>
|