405 lines
11 KiB
Vue
405 lines
11 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<swiper indicator-dots style="height: 120rpx;" autoplay indicator-active-color="#fff">
|
|
<swiper-item>
|
|
<image :src="globalData.locImg+'/banner_1.png'" style="width: 100vw;height: 120rpx;"></image>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<image :src="globalData.locImg+'/banner_2.png'" style="width: 100vw;height: 120rpx;"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- 全托管 -->
|
|
<view class="container-box">
|
|
<view class="title-box">
|
|
<view class="title-content">
|
|
<text class="title-txt mr-10">全托管</text>
|
|
<rich-text
|
|
:nodes="moneyTxt(10,14,allPrice/100)+'-'+moneyTxt(10,14,(allPrice+urgent)/100)"></rich-text>
|
|
</view>
|
|
<text class="btn" @click="doBuy" data-type="ALL">购买</text>
|
|
</view>
|
|
<text class="desc">从下单到取证,仅需提供基本信息,我们为您提供一站式管家服务.</text>
|
|
<text class="desc-title">提供的服务</text>
|
|
<view class="item">
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon">
|
|
</image>
|
|
<text>包可运行软件开发与搭建</text>
|
|
</view>
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon">
|
|
</image>
|
|
<text>包鉴别材料撰写</text>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
|
|
<text class="txt">包代办,包下证,包开发票提</text>
|
|
</view>
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
|
|
<text class="txt">供可运行软件安装包</text>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
|
|
<text class="txt">提供可运行软件云服务900天</text>
|
|
</view>
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
|
|
<text class="txt">提供可运行软件演示视频</text>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
|
|
<text class="txt">客服一对一服务</text>
|
|
</view>
|
|
</view>
|
|
<view class="desc-title">使用流程</view>
|
|
<view class="list">
|
|
<view class="buy-desc-row-no-margin list-item">
|
|
<text class="txt">填写系统名称</text>
|
|
</view>
|
|
<view class="buy-desc-row-no-margin list-item">
|
|
<text class="txt">填写基本信息</text>
|
|
</view>
|
|
<view class="buy-desc-row-no-margin list-item">
|
|
<text class="txt">接收证书</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="container-box">
|
|
<view class="title-box">
|
|
<view class="title-content">
|
|
<text class="title-txt mr-10">写材料</text>
|
|
<rich-text :nodes="moneyTxt(10,14,materialPrice/100)"></rich-text>
|
|
</view>
|
|
<view class="btn" @click="doBuy" data-type="MATERIAL">购买</view>
|
|
</view>
|
|
<text class="desc">通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料,下载鉴别材料后可自行申报或找相关代理机构申报.</text>
|
|
<text class="desc-title">提供的服务</text>
|
|
<view class="item">
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon">
|
|
</image>
|
|
<text>通过平台自己搭建可运行软件</text>
|
|
</view>
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon">
|
|
</image>
|
|
<text>平台自动撰写鉴别材料</text>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
|
|
<text class="txt">包补正材料撰写一直到下证</text>
|
|
</view>
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
|
|
<text class="txt">两次补正不通过平台退款</text>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
|
|
<text class="txt">包开发票</text>
|
|
</view>
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
|
|
<text class="txt">提供可运行软件云服务300天</text>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
|
|
<text class="txt">客服一对一服务</text>
|
|
</view>
|
|
</view>
|
|
<text class="desc-title">使用流程</text>
|
|
<view class="item-column">
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
|
|
<text>按系统操作流程执行</text>
|
|
</view>
|
|
<view class="row-item">
|
|
<image :src="globalData.locImg+'/ic_check_fit.png'" class="check-icon"></image>
|
|
<text>如需视频文件和安装包请在下证后购买下载</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="container-box-row" bind:tap="copyLink">
|
|
<view class="icon-computer-ind size-64"></view>
|
|
<view class="free-content">
|
|
<text>免费试用请使用电脑端登录</text>
|
|
<text class="hint-link">{{globalData.appUrl}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<uni-popup type="message" ref="msg">
|
|
<uni-popup-message :type="msgType" :message="msgTxt" :duration="2000"></uni-popup-message>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script>
|
|
import ProApi from '@/common/js/net/projectApi.js'
|
|
import {
|
|
inject
|
|
} from 'vue'
|
|
import {
|
|
moneyTxt
|
|
} from '@/common/js/conver.js'
|
|
export default {
|
|
setup() {
|
|
const globalData = inject('globalData')
|
|
console.log(globalData)
|
|
return {
|
|
globalData
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
msgType: 'info',
|
|
msgTxt: '',
|
|
urgent: 0,
|
|
projTypes: [], //全托管,写材料 type= ALL type =MATERIAL
|
|
allPrice: 0,
|
|
materialPrice: 0,
|
|
isUrgent: false, //是否加急
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
uni.setNavigationBarTitle({
|
|
title: '创建软著',
|
|
})
|
|
uni.setNavigationBarColor({
|
|
frontColor: '#000000', // 必写项，字体颜色仅支持#ffffff和#000000
|
|
backgroundColor: '#F0F0F0', // 传递的颜色值，仅支持十六进制颜色
|
|
animation: { // 可选项
|
|
duration: 500,
|
|
timingFunc: 'easeIn'
|
|
}
|
|
})
|
|
this.doGetPrice()
|
|
},
|
|
methods: {
|
|
moneyTxt,
|
|
//是否加急
|
|
doUrgent(e) {
|
|
const _self = this
|
|
_self.isUrgent = !_self.isUrgent
|
|
},
|
|
//获取单价
|
|
doGetPrice() {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
})
|
|
const _self = this
|
|
ProApi.doGetPrice()
|
|
.then(res => {
|
|
uni.hideLoading()
|
|
console.log(res)
|
|
res.projTypes.forEach(el => {
|
|
if (el.type == 'ALL') {
|
|
_self.allPrice = el.price
|
|
} else if (el.type == 'MATERIAL') {
|
|
_self.materialPrice = el.price
|
|
}
|
|
});
|
|
_self.urgent = res.additional.urgent //加急费用
|
|
})
|
|
.catch(err => {
|
|
uni.hideLoading()
|
|
_self.msgType = 'error'
|
|
_self.msgTxt = '数据有误,请稍后重试'
|
|
_self.$refs.msg.open()
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1500)
|
|
})
|
|
},
|
|
//打开项目信息编辑页面
|
|
doBuy(e) {
|
|
//计算价格
|
|
const _self = this
|
|
var price = e.currentTarget.dataset.type == 'ALL' ? _self.allPrice : _self.materialPrice
|
|
var type = e.currentTarget.dataset.type
|
|
if (type == 'ALL' && _self.isUrgent) {
|
|
price += _self.urgent
|
|
}
|
|
const urgent = _self.isUrgent ? 'URGENT' : ''
|
|
uni.navigateTo({
|
|
url: `/pages/copyright/createProjectInfo/createProjectInfo?type=${type}&price=${price}&isUrgent=${urgent}`
|
|
})
|
|
},
|
|
//点击复制
|
|
copyLink() {
|
|
const _self = this
|
|
uni.setClipboardData({
|
|
data: 'https://www.aimzhu.com',
|
|
success: () => {
|
|
_self.msgTxt = '复制成功'
|
|
_self.msgType = 'success'
|
|
_self.$refs.msg.open()
|
|
},
|
|
fail: err => {
|
|
console.log(err)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: $white-color;
|
|
border-radius: 15rpx;
|
|
margin-top: 20rpx;
|
|
padding: 30rpx 30rpx;
|
|
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.container-box-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: $white-color;
|
|
border-radius: 15rpx;
|
|
margin-top: 20rpx;
|
|
padding: 30rpx 30rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.free-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 28rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.hint-link {
|
|
color: $text-blue-color;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.title-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.title-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
color: $text-brown-color;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.title-txt {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.btn {
|
|
font-size: 28rpx;
|
|
background-color: $primary-color;
|
|
color: $white-color;
|
|
text-align: center;
|
|
line-height: 32rpx;
|
|
height: 32rpx;
|
|
padding: 8rpx 25rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.btn:active {
|
|
background-color: $primary-color-active;
|
|
}
|
|
|
|
.desc {
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
color: $text-gray-desc-color;
|
|
}
|
|
|
|
.desc-title {
|
|
font-size: 28rpx;
|
|
margin-top: 10rpx;
|
|
color: $text-color;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: 10rpx;
|
|
color: $text-gray-desc-color;
|
|
}
|
|
|
|
.item-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 10rpx;
|
|
color: $text-gray-desc-color;
|
|
}
|
|
|
|
.row-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-size: 20rpx;
|
|
color: $text-color;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.check-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.list {
|
|
counter-reset: my-counter;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-size: 20rpx;
|
|
margin-top: 10rpx;
|
|
color: $text-gray-desc-color;
|
|
}
|
|
|
|
/* 每个列表项递增计数器 */
|
|
.list-item {
|
|
counter-increment: my-counter;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
}
|
|
|
|
.list-item:nth-of-type(n+2) {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
/* 使用 ::before 伪元素显示计数器值并设置圆形背景 */
|
|
.list-item::before {
|
|
content: counter(my-counter);
|
|
background-color: $primary-color-active;
|
|
color: var(--black-color);
|
|
border-radius: 50%;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
line-height: 28rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 10rpx;
|
|
}
|
|
</style> |