445 lines
12 KiB
Vue
445 lines
12 KiB
Vue
<template>
|
|
<view class="buy-container">
|
|
<swiper indicator-dots style="height: 120rpx;" autoplay indicator-active-color="#fff">
|
|
<swiper-item>
|
|
<image src="/static/images/banner_1.png" style="width: 100vw;height: 120rpx;"></image>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<image src="/static/images/banner_2.png" style="width: 100vw;height: 120rpx;"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- 全托管 -->
|
|
<view class="buy-all-container">
|
|
<view class="buy-all-box">
|
|
<view class="pd-20">
|
|
<view class="buy-all-title">
|
|
<view class="buy-all-txt">
|
|
<text class="txt">全托管</text>
|
|
<text class="money">¥{{allPrice/100}}-{{(allPrice+urgent)/100}}</text>
|
|
</view>
|
|
<view class="buy-all-btn" @click="doBuy" data-type="ALL">购买</view>
|
|
</view>
|
|
<view class="buy-desc-box mt-10">
|
|
<view class="buy-desc-txt">从下单到取证,仅需提供基本信息,我们为您提供一站式管家服务.</view>
|
|
<view class="mt-10" style="font-size: 12px;">提供的服务</view>
|
|
<view class="buy-desc-item mt-10">
|
|
<view class="buy-desc-row">
|
|
<image src="../../../static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text class="txt">包可运行软件开发与搭建</text>
|
|
</view>
|
|
<view class="buy-desc-row">
|
|
<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text class="txt">包鉴别材料撰写</text>
|
|
</view>
|
|
</view>
|
|
<view class="buy-desc-item mt-10">
|
|
<view class="buy-desc-row">
|
|
<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text class="txt">包代办,包下证,包开发票提</text>
|
|
</view>
|
|
<view class="buy-desc-row">
|
|
<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text class="txt">供可运行软件安装包</text>
|
|
</view>
|
|
</view>
|
|
<view class="buy-desc-item mt-10">
|
|
<view class="buy-desc-row">
|
|
<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text class="txt">提供可运行软件云服务900天</text>
|
|
</view>
|
|
<view class="buy-desc-row">
|
|
<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text class="txt">提供可运行软件演示视频</text>
|
|
</view>
|
|
</view>
|
|
<view class="buy-desc-item mt-10">
|
|
<view class="buy-desc-row">
|
|
<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text class="txt">客服一对一服务</text>
|
|
</view>
|
|
</view>
|
|
<view class="mt-10">
|
|
<text style="font-size:12px;">使用流程</text>
|
|
<view class="buy-desc-column mt-10 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>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 写材料 -->
|
|
<view class="buy-all-box">
|
|
<view class="pd-20">
|
|
<view class="buy-all-title">
|
|
<view class="buy-all-txt">
|
|
<text class="txt">写材料</text>
|
|
<text class="money">¥{{materialPrice/100}}</text>
|
|
</view>
|
|
<view class="buy-all-btn" @click="doBuy" data-type="MATERIAL">购买</view>
|
|
</view>
|
|
<view class="buy-desc-box">
|
|
<view class="buy-desc-txt mt-10">通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料,下载鉴别材料后可自行申报或找相关代理机构申报.</view>
|
|
<view class="mt-10" style="font-size: 12px;">提供的服务</view>
|
|
<view class="buy-desc-item mt-10">
|
|
<view class="buy-desc-row">
|
|
<image src="../../../static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text class="txt">通过平台自己搭建可运行软件</text>
|
|
</view>
|
|
<view class="buy-desc-row">
|
|
<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text class="txt">平台自动撰写鉴别材料</text>
|
|
</view>
|
|
</view>
|
|
<view class="buy-desc-item">
|
|
<view class="buy-desc-row">
|
|
<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text class="txt">包补正材料撰写一直到下证</text>
|
|
</view>
|
|
<view class="buy-desc-row">
|
|
<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text class="txt">两次补正不通过平台退款</text>
|
|
</view>
|
|
</view>
|
|
<view class="buy-desc-item">
|
|
<view class="buy-desc-row">
|
|
<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text class="txt">包开发票</text>
|
|
</view>
|
|
<view class="buy-desc-row">
|
|
<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text class="txt">提供可运行软件云服务300天</text>
|
|
</view>
|
|
</view>
|
|
<view class="buy-desc-item">
|
|
<view class="buy-desc-row">
|
|
<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text class="txt">客服一对一服务</text>
|
|
</view>
|
|
</view>
|
|
<view class="mt-20">
|
|
<text>使用流程</text>
|
|
<view style="display: flex;flex-direction: column;">
|
|
<view class="buy-desc-row-no-margin mt-10">
|
|
<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text>按系统操作流程执行</text>
|
|
</view>
|
|
<view class="buy-desc-row-no-margin mt-10">
|
|
<image src="/static/images/ic_check_fit.png" class="buy-desc-row-icon"></image>
|
|
<text>如需视频文件和安装包请在下证后购买下载</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 提示免费版 -->
|
|
<view class="hint-box pd-20" bind:tap="copyLink">
|
|
<view class="icon icon-computer-ind"></view>
|
|
<view class="content">
|
|
<text class="hint-content">免费试用请使用电脑端登录</text>
|
|
<text class="hint-link">https://www.aimzhu.com</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'
|
|
export default {
|
|
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: {
|
|
//是否加急
|
|
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>
|
|
.buy-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.buy-title {
|
|
height: 100rpx;
|
|
background-color: blanchedalmond;
|
|
}
|
|
|
|
.buy-all-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.buy-all-box {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 20rpx;
|
|
background-color: white;
|
|
/* box-shadow: 0rpx 0rpx 10rpx 10rpx #e9e8e88f; */
|
|
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.buy-all-title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.buy-all-txt {
|
|
font-size: 20px;
|
|
color: black;
|
|
}
|
|
|
|
|
|
.buy-all-txt .money {
|
|
margin-left: 20rpx;
|
|
font-size: 16px;
|
|
color: #532A00;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.buy-all-btn {
|
|
padding: 5rpx 35rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #FFA900;
|
|
color: white;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.buy-all-btn:active {
|
|
background-color: #FFA900C0;
|
|
color: white;
|
|
}
|
|
|
|
.buy-desc-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.buy-desc-txt {
|
|
color: #3b3b3b;
|
|
}
|
|
|
|
.buy-desc-title {
|
|
color: #3b3b3b;
|
|
}
|
|
|
|
.buy-desc-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.buy-desc-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.buy-desc-row-no-margin {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex: 1;
|
|
align-items: center;
|
|
}
|
|
|
|
.buy-desc-column {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex: 1;
|
|
align-items: center;
|
|
}
|
|
|
|
.list {
|
|
counter-reset: my-counter;
|
|
padding: 0;
|
|
}
|
|
|
|
/* 每个列表项递增计数器 */
|
|
.list-item {
|
|
counter-increment: my-counter;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 使用 ::before 伪元素显示计数器值并设置圆形背景 */
|
|
.list-item::before {
|
|
content: counter(my-counter);
|
|
background-color: #F4CE98;
|
|
color: black;
|
|
border-radius: 50%;
|
|
width: 18px;
|
|
height: 18px;
|
|
line-height: 18px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.txt {
|
|
line-height: 14px;
|
|
}
|
|
|
|
.buy-desc-row-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.box-bottom-options {
|
|
justify-content: center;
|
|
background-color: #FCF3E5;
|
|
padding: 20rpx;
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
|
|
.box-bottom-options .txt {
|
|
color: #532A00;
|
|
padding-left: 10rpx;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.hint-box {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 20rpx;
|
|
background-color: white;
|
|
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.hint-box .icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.hint-box .content {
|
|
margin-left: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.hint-content {
|
|
color: #532A00;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.hint-link {
|
|
color: #0a86fa;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
</style> |