添加了申请使用的页面

ghsApp/src/components/app-swiper.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="swiper-wrap" :style="{'width': widthFn,'height': heightFn}">
-		<swiper :indicator-dots="!tagShow" :autoplay="autoplay" :interval="5000" :duration="150" class="tui-banner-swiper" :circular="true" indicator-color="#969696" indicator-active-color="#F04545" @change="bannerChange">
+		<swiper :indicator-dots="!tagShow" :autoplay="autoplay" :interval="5000" :duration="150" class="tui-banner-swiper" :circular="true" indicator-color="#969696" indicator-active-color="#3387ff" @change="bannerChange">
 			<swiper-item v-for="(item, index) in list" :key="index" @tap.stop="detail">
 				<img :src="item.img" class="tui-slide-image" mode="scaleToFill" />
 			</swiper-item>
@@ -90,6 +90,9 @@ export default {
 .swiper-wrap {
 	position: relative;
 	height: 480px;
+  margin: 0 auto ;
+  border-radius: 20upx;
+  overflow: hidden;
 	.tui-banner-swiper {
 		height: 100%;
 	}

ghsApp/src/pagesClient/official/index.vue

@@ -1,290 +1,218 @@
 <template>
-  <div class="app-content">
-    <div class="tab-wrap">
-      <div class="logo-img">
-        <img :src="`${constant.imgUrl}/retail/official/logo.png`" alt />
-      </div>
-      <div class="phone-img" @click="contactFn">
-        <img :src="`${constant.imgUrl}/retail/official/phone.png`" alt />
-      </div>
-    </div>
-    <app-swiper :height="{type: 'number',val: 750}" :list="swiper" />
-    <div class="module-com" v-for="(item, index) in contentData" :key="index">
-      <div class="module-tit">
-        <div class="tit-main" v-html="item.title"></div>
-        <div class="tit-sub">{{ item.subTitle }}</div>
-      </div>
-      <div class="module-det">
-        <app-img class="module-img" :src="item.img" :lazy-load="true" mode="widthFix" />
-      </div>
-    </div>
-    <!-- ad -->
-    <div class="cooperation-wrap" :style="{backgroundImage:'url(' + backgroundImg + ')'}">
-      <div class="ad-title">
-        <span>他们</span>
-        <span class="app-color-1">都在用</span>
-      </div>
-      <div class="ad-list-wrap">
-        <div class="ad-list" v-for="(item, index) in adData" :key="index">
-          <app-img
-            :src="`${constant.imgUrl}/retail/official/list-${index + 1}.png`"
-            mode="widthFix"
-            alt="他们都在用"
-          />
-        </div>
-      </div>
-      <div class="official-wrap">
-        <div class="off-title">技术让花店经营更简单</div>
-        <div class="off-sub-tit" @click="contactFn">
-          <app-img
-            :src="`${constant.imgUrl}/retail/official/phone-small.png`"
-            alt="电话"
-            mode="widthFix"
-          />
-          <span>咨询热线：0592 - 3272000</span>
-        </div>
-      </div>
-    </div>
-    <!-- trademark -->
-    <div class="bottom-trademark">
-      <img :src="`${constant.imgUrl}/retail/common/trademark.png`" alt />
-    </div>
-    <!-- buttom -->
-    <div
-      v-if="status == 3"
-      class="app-footer"
-      @click="pageTo({
-			url: '/pagesClient/official/pay',
-			status: 1
-		})"
-    >立即续费</div>
-    <div v-if="status != 3 && this.getLoginInfo.openShop !== 1" class="app-footer" @click="pageTo({
-			url: '/pagesClient/official/pay',
-      query:{
-        ...option
-      }
-		})">申请试用</div>
-    <div v-if="status != 3 && this.getLoginInfo.openShop == 1" class="app-footer">已申请</div>
-  </div>
+  <view class="app-content">
+    <view class="header_logo">
+      <image :src="`${constant.imgUrl}/ghs/home_page/logo.png`" mode="widthFix"></image>
+      <view class="free_register">免费注册</view>
+    </view>
+    <view class="main">
+      <image class="banner" :src="`${constant.imgUrl}/ghs/home_page/banner.png`"></image>
+      <image class="pic1" :src="`${constant.imgUrl}/ghs/home_page/pic01.png`"></image>
+      <view class="intro">
+        <view v-for="(item, index) in list1" :key="index">
+          <view style="margin-bottom: 10upx">{{item.title}}</view>
+          <view style="margin-bottom: 10upx">{{item.text}}</view>
+          <image :src="item.imgUrl"></image>
+        </view>
+      </view>
+      <view class="finance">花店进销存与财务</view>
+      <view class="finance1">解决方案专家</view>
+      <image v-for="(item, index) in list2" :key="index" :src="item.imgUrl"  class="imgIntro"></image>
+      <view class="finance2">他们都在用</view>
+      <app-swiper :height="{type: 'number',val: 400}" :list="swiper" :width="{type: 'string',val: '95%'}"/>
+    </view>
+    <view class="footer_bar">
+      <view class="relation">联系我们</view>
+      <view class="free">免费试用</view>
+    </view>
+  </view>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import AppSwiper from "@/components/app-swiper";
-import AppImg from "@/components/app-img";
-import { applyStatus } from "@/api/official";
-import { share } from "@/mixins";
 export default {
-  name: "index",
   components: {
     AppSwiper,
-    AppImg
   },
-  mixins: [share],
   data() {
     return {
       constant: this.$constant,
-      status: -2,
-      swiper: [
+      list1: [
         {
-          img: `${this.$constant.imgUrl}/retail/official/banner-1.png`
+          title: '免费试用',
+          text: '免年费',
+          imgUrl: `${this.$constant.imgUrl}/ghs/home_page/icon1.png`
         },
         {
-          img: `${this.$constant.imgUrl}/retail/official/banner-2.png`
+          title: '手机、电脑',
+          text: '全面支持',
+          imgUrl: `${this.$constant.imgUrl}/ghs/home_page/icon2.png`
         },
         {
-          img: `${this.$constant.imgUrl}/retail/official/banner-3.png`
-        },
-        {
-          img: `${this.$constant.imgUrl}/retail/official/banner-4.png`
+          title: '不限员工数',
+          text: '不限门店数',
+          imgUrl: `${this.$constant.imgUrl}/ghs/home_page/icon3.png`
         }
       ],
-      backgroundImg: `${this.$constant.imgUrl}/retail/official/bg.png`,
-      contentData: [
+      list2: [
         {
-          title: `<span class="app-color-1">开店更简单</span>`,
-          subTitle: `便捷收集订花人信息，按距离自动算运费，后台一键配送到达达，送到自动通知客户`,
-          img: `${this.$constant.imgUrl}/retail/official/content-1.png`
+          imgUrl: `${this.$constant.imgUrl}/ghs/home_page/pic02.png`
         },
         {
-          title: `客户<span class="app-color-1">分销</span>`,
-          subTitle: `招募粉丝，不断裂变，通过佣金激励粉丝将商品分享给朋友，实现社群传播，产生订单`,
-          img: `${this.$constant.imgUrl}/retail/official/content-4.png`
+          imgUrl: `${this.$constant.imgUrl}/ghs/home_page/pic03.png`
         },
         {
-          title: `<span class="app-color-1">一键操作 </span>快速涨粉`,
-          subTitle: `一键操作，快速注册会员，到店客户粉丝转化率提升80%`,
-          img: `${this.$constant.imgUrl}/retail/official/content-5.png`
+          imgUrl: `${this.$constant.imgUrl}/ghs/home_page/pic04.png`
         },
         {
-          title: `精准<span class="app-color-1">管理客户</span>`,
-          subTitle: `实现订单和客户分门别类，把握每个客户的个性和特征，精准营销，快速提高客户复购`,
-          img: `${this.$constant.imgUrl}/retail/official/content-6.png`
+          imgUrl: `${this.$constant.imgUrl}/ghs/home_page/pic05.png`
         },
         {
-          title: `<span class="app-color-1">流程化</span>订单管理`,
-          subTitle: `流程化管理订单，下单、制单、发货、配送、送到通知客户，享尊贵开店体验`,
-          img: `${this.$constant.imgUrl}/retail/official/content-2.png`
+          imgUrl: `${this.$constant.imgUrl}/ghs/home_page/pic06.png`
         },
         {
-          title: `丰富多样的<span class="app-color-1">营销工具</span>`,
-          subTitle: `契合花店的营销工具，拉新、转化、复购、裂变，面面俱到`,
-          img: `${this.$constant.imgUrl}/retail/official/content-3.png`
+          imgUrl: `${this.$constant.imgUrl}/ghs/home_page/pic07.png`
         },
         {
-          title: `经营<span class="app-color-1">数据分析</span>`,
-          subTitle: `大数据分析客户行为，精准定位高利润项目，投入产出更高效`,
-          img: `${this.$constant.imgUrl}/retail/official/content-7.png`
+          imgUrl: `${this.$constant.imgUrl}/ghs/home_page/pic08.png`
         }
       ],
-      adData: [1, 2, 3, 4, 5, 6, 7, 8]
-    };
-  },
-  mounted() {
-    // 隐藏返回首页按钮。
-    uni.hideHomeButton()
-  },
-  computed: {
-    ...mapGetters(["getMerchantInfo", "getLoginInfo"])
+      swiper: [
+        {
+          img: `${this.$constant.imgUrl}/ghs/home_page/img.png`
+        },
+        {
+          img: `${this.$constant.imgUrl}/retail/official/banner-2.png`
+        },
+        {
+          img: `${this.$constant.imgUrl}/retail/official/banner-3.png`
+        },
+        {
+          img: `${this.$constant.imgUrl}/retail/official/banner-4.png`
+        }
+      ],
+    }
   },
   onLoad() {
-    this.jweixinFn({
-      title: "更懂您的花卉宝",
-      pagePath: "pagesClient/official/index",
-      imageUrl: ""
-    });
-    console.log(this.getLoginInfo)
-  },
-  methods: {
-    init() {
-      // 续费
-      if (this.option.pay == 1) {
-        this.status = 3;
-        uni.setStorageSync("renewOption", JSON.stringify(this.option));
-      } else {
-        uni.removeStorageSync("renewOption");
-      }
-      //花店分享的页面有邀人，打开页面保存邀请人
-      // let introMerchantId = 0;
-      // if (typeof this.option.introMerchantId != "undefined") {
-      //   introMerchantId = this.option.introMerchantId;
-      // }
-      // uni.setStorageSync("introMerchantId", introMerchantId);
-    },
-    _getDet() {
-      applyStatus().then(res => {
-        this.status = res.data.status;
-      });
-    },
-    contactFn() {
-      uni.makePhoneCall({
-        phoneNumber: "05923272000"
-      });
-    }
+    console.log(this.constant)
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
-.app-content {
+.header_logo{
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100upx;
+  width: 100vw;
   background-color: #fff;
-  padding-bottom: 100px;
-}
-.tab-wrap {
-  @include disFlex(center, space-between);
-  padding: 0 30px;
-  .logo-img {
-    width: 160px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 30upx;
+  box-sizing: border-box;
+  &>image{
+    width: 190upx;
+    height: 49upx;
+    background-color: #eee;
   }
-  .phone-img {
-    width: 50px;
+  &>.free_register{
+    width: 200upx;
+    height: 60pux;
+    line-height: 60upx;
+    background: linear-gradient(90deg, #3385FF, #33B0FF);
+    border-radius: 30upx;
+    text-align: center;
+    font-size: 32px;
+    color: #FFFFFF;
   }
 }
-// module
-.module-com {
-  margin-top: 80px;
-  .module-tit {
-    text-align: center;
-    .tit-main {
-      font-size: 36px;
-      font-weight: 600;
-      margin-bottom: 14px;
-    }
-    .tit-sub {
-      width: 90%;
-      margin: 0 auto;
-      color: $fontColor3;
-      line-height: 34px;
-      font-size:27rpx;
-    }
+.main{
+  margin: 100upx 0;
+  padding-bottom: 100upx;
+  &>.banner{
+    width: 100vw;
+    height: 750upx;
+    background-color: #eee;
+  }
+  &>.pic1{
+    width: 100vw;
+    height: 400upx;
+    background-color: #eee;
+    margin-top: 50upx;
   }
-  .module-det {
-    .module-img {
-      min-height: 470px;
+  &>.intro{
+    height: 258upx;
+    width: 100vw;
+    background-color: #eaf7ff;
+    margin-top: 50upx;
+    margin-bottom: 50upx;
+    display: flex;
+    justify-content: space-between;
+    padding: 30upx 60upx 20upx;
+    &>view{
+      width: 124upx;
+      height: 100%;
+      // background-color: green;
+      text-align: center;
+      text-align: center;
+      color: #3385FF;
+      &>image{
+        width: 100%;
+        height: 141upx;
+      }
     }
   }
-}
-// cooperation
-.cooperation-wrap {
-  width: 100%;
-  height: 552px;
-  padding-top: 60px;
-  .ad-title {
-    color: #fff;
-    font-size: 36px;
+  &>.finance{
+    text-align: center;
+    margin: 70upx 0 20upx;
+    font-size: 56px;
     font-weight: 600;
-    margin-bottom: 50px;
+    color: #333333;
+  }
+  &>.finance1{
     text-align: center;
+    margin-bottom: 60upx;
+    font-size: 56px;
+    font-weight: 600;
+    color: #333333;
   }
-  .ad-list-wrap {
-    @include disFlex(center, center);
-    flex-wrap: wrap;
-    margin-bottom: 30px;
-    .ad-list {
-      width: 166px;
-      margin-right: 10px;
-      margin-bottom: 10px;
-    }
+  &>.finance2{
+    text-align: center;
+    margin: 30upx 0 40upx;
+    font-size: 56px;
+    font-weight: 600;
+    color: #333333;
   }
-  .official-wrap {
-    color: #fff;
-    background-color: rgba(#000000, 0.6);
-    width: 90%;
-    margin: 0 auto;
-    padding: 20px 0;
-    .off-title {
-      font-size: 36px;
-      font-weight: 600;
-      margin-bottom: 10px;
-      text-align: center;
-    }
-    .off-sub-tit {
-      @include disFlex(center, center);
-      img {
-        width: 28px;
-        height: 28px;
-        margin-right: 10px;
-      }
-    }
+  &>.imgIntro{
+    width: 100vw;
+    height: 560upx;
+    background-color: #eee;
+    margin-bottom: 30upx;
   }
 }
-// trademark
-.bottom-trademark {
-  @include disFlex(center, center);
-  background-color: #242627;
-  img {
-    width: 140px;
+.footer_bar{
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  height: 100upx;
+  line-height: 100upx;
+  display: flex;
+  justify-content: space-between;
+  &>view{
+    width: 50%;
+    height: 100%;
+    text-align: center;
+    font-size: 36px;
+    font-weight: 600;
+    color: #FFFFFF;
   }
-}
-// footer
-.app-footer {
-  color: #fff;
-  font-size: 36px;
-  font-weight: 600;
-  background: linear-gradient(90deg, #3ab7ff, #3385ff);
-  &.under-review {
-    background: #fff !important;
-    color: #333 !important;
+  &>.free{
+    background: linear-gradient(90deg, #FFB73A, #FF8533);
+  }
+  &>.relation{
+    background: linear-gradient(90deg, #3AB7FF, #3385FF);
   }
 }
-</style>
+</style>