front-end/mobile-code-back/src/official/index.vue

<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" />
			</div>
		</div>
		<!-- ad -->
		<div class="cooperation-wrap">
			<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`" 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="" />
					<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 == -1" class="app-footer" @click="pageTo({
			url: '/official/apply',
			status: 2
		})">申请试用</div>
		<div v-if="status == 0" class="app-footer under-review">审核中</div>
		<div v-if="status == 1" class="app-footer under-review">试用中</div>
		<div v-if="status == 2" class="app-footer under-review">审核未通过</div>
		<div v-if="status == 3" class="app-footer" @click="pageTo({
			url: '/official/pay',
			status: 1
		})">立即续费</div>
		<div v-if="status == 4" class="app-footer" @click="pageTo({
			url: '/official/apply',
			status: 2
		})">立即订购</div>
	</div>
</template>

<script>
import AppSwiper from '@/components/app-swiper'
import AppImg from '@/components/app-img'
// api
import { applyStatus } from '@/api/official'
export default {
	name: 'index',
	components: {
		AppSwiper,
		AppImg
	},
	data() {
		return {
			constant: this.$constant,
			status: -2,
			swiper: [
				{
					img: `${this.$constant.imgUrl}/retail/official/banner-1.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`
				}
			],
			contentData: [
				{
					title: `<span class="app-color-1">一键搭建</span>花店商城`,
					subTitle: `各大节日商城自动涨价，客户下单自动按距离计算运费`,
					img: `${this.$constant.imgUrl}/retail/official/content-1.png`
				},
				{
					title: `<span class="app-color-1">流程化</span>管理订单`,
					subTitle: `把控每个订单的生命周期，从下单、打单、制作到发货、配送、 送达自动通知客户，进度把控一清二楚，客户体验感大幅提升`,
					img: `${this.$constant.imgUrl}/retail/official/content-2.png`
				},
				{
					title: `提供多种的<span class="app-color-1">营销工具</span>`,
					subTitle: `契合花店日常经营的营销工具，拉新、转化、复购、裂变， 面面俱到`,
					img: `${this.$constant.imgUrl}/retail/official/content-3.png`
				},
				{
					title: `连通各渠道来源的<span class="app-color-1">客户和订单</span>`,
					subTitle: `线上、门店、微信、支付宝和美团等自动汇总后台，客户统一接待 回复，订单统一管理，不必再周旋于各个平台`,
					img: `${this.$constant.imgUrl}/retail/official/content-4.png`
				},
				{
					title: `<span class="app-color-1">一键吸粉 </span>注册会员`,
					subTitle: `告别繁琐手续，一键操作，注册会员简单快捷，到店客户的粉丝 转化率提高60%`,
					img: `${this.$constant.imgUrl}/retail/official/content-5.png`
				},
				{
					title: `智能的<span class="app-color-1">会员体系</span>`,
					subTitle: `客户充值消费自动累积成长值、自动升级会员，客户付款自动 打折，精准把握每个客户的个性和特征`,
					img: `${this.$constant.imgUrl}/retail/official/content-6.png`
				},
				{
					title: `经营<span class="app-color-1">数据分析</span>`,
					subTitle: `系统实时进行数据统计，花店每个时期的经营情况一目了然，知己 知彼，方能百战百胜`,
					img: `${this.$constant.imgUrl}/retail/official/content-7.png`
				}
			],
			adData: [1, 2, 3, 4, 5, 6, 7, 8]
		}
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			let token = uni.getStorageSync('token')
			if (token) {
				this._getDet()
			} else {
				this.status = -1
			}
		},
		_getDet() {
			applyStatus().then(res => {
				this.status = res.data.status
			})
		},
		contactFn() {
			uni.makePhoneCall({
				phoneNumber: '05923272000'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		background-color: #fff;
		padding-bottom: 100px;
	}
	.tab-wrap {
		@include disFlex(center, space-between);
		height: 100px;
		padding: 0 30px;
		.logo-img {
			width: 160px;
		}
		.phone-img {
			width: 50px;
		}
	}
	// 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;
			}
		}
		.module-det {
			.module-img {
				min-height: 470px;
			}
		}
	}
	// cooperation
	.cooperation-wrap {
		width: 100%;
		height: 552px;
		background: url('../static/images/official/bg.png');
		padding-top: 60px;
		.ad-title {
			color: #fff;
			font-size: 36px;
			font-weight: 600;
			margin-bottom: 50px;
			text-align: center;
		}
		.ad-list-wrap {
			@include disFlex(center, center);
			flex-wrap: wrap;
			margin-bottom: 30px;
			.ad-list {
				width: 166px;
				margin-right: 10px;
				margin-bottom: 10px;
			}
		}
		.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;
				}
			}
		}
	}
	// trademark
	.bottom-trademark {
		height: 150px;
		@include disFlex(center, center);
		background-color: #242627;
		img {
			width: 140px;
		}
	}
	// 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;
		}
	}
</style>