Skip to content

P
project-online-fi
提交 08936e03 authored 作者: matian's avatar matian
浏览文件
操作

服务协议优化

上级 0e904a16
隐藏空白字符变更
内嵌 并排
正在显示 包含 138 行增加 和 51 行删除
src/modules/pay/components/PayH5.vue
浏览文件 @ 08936e03
......@@ -13,13 +13,12 @@ const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const params = $(useStorage('params', { payment_method: '11' }))
const params = $(useStorage('params', { payment_method: '12' }))
const start_time = getDateTime()
const end_time = getDateTime(90)
const isAgree = $ref(false)
let isAgree = $ref(false)
let isAgreeText = $ref(false)
const dialogVisible = $ref(false)
const { order, pay } = usePay()
......@@ -56,13 +55,31 @@ const handlePrev = () => {
const checkedChange = (val: string) => {
params.payment_method = val
}
const handleAgree = (val: any) => {
console.log(val)
isAgree = val
if (val === true) {
isAgreeText = false
}
}
const handleClose = () => {
isAgree = true
isAgreeText = false
}
const handleAgreement = () => {
window.open(
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/sbu-plus/%E8%AF%AD%E8%A8%80%E5%BC%BA%E5%8C%96%E6%A8%A1%E5%9D%97%E4%BB%8B%E7%BB%8D.pdf'
)
}
</script>
<template>
<div>
<div class="main_con">
<div class="con_nav" @click="handlePrev">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/prev_mini.png" />
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/prev_mini.png"
/>
<div class="nav_title">确认订单</div>
</div>
<div class="course_con">
......@@ -70,35 +87,54 @@ const checkedChange = (val: string) => {
:src="
shopItem?.image_url ||
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fb%2F56e7995e3501f.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671671981&t=0eb627c761e6567a3a0a29163b31aac0'
" />
"
/>
<div class="course_dec">
<div class="info_title">{{ shopItem.title }}</div>
<div class="info_date">有效期：{{ start_time }} 至 {{ end_time }}</div>
<div class="info_date">
有效期：{{ start_time }} 至 {{ end_time }}
</div>
</div>
</div>
<div class="pay_con">
<div class="pay_phone">
课程提醒将发送到您的手机：<i style="font-weight: bold">{{ userStore.user?.mobile }}</i>
课程提醒将发送到您的手机：<i style="font-weight: bold">{{
userStore.user?.mobile
}}</i>
</div>
<div class="pay_line"></div>
<div class="pay_mode">
<div class="mode_item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_ali.png" />
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_ali.png"
/>
<div class="radio_tit">支付宝支付</div>
<div
:class="params.payment_method === '12' ? 'radio_check_active' : 'radio_check'"
@click="checkedChange('12')">
:class="
params.payment_method === '12'
? 'radio_check_active'
: 'radio_check'
"
@click="checkedChange('12')"
>
<template v-if="params.payment_method === '12'">
<el-icon><Check /></el-icon>
</template>
</div>
</div>
<div class="mode_item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_wechat.png" />
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_wechat.png"
/>
<div class="radio_tit">微信支付</div>
<div
:class="params.payment_method === '4' ? 'radio_check_active' : 'radio_check'"
@click="checkedChange('4')">
:class="
params.payment_method === '4'
? 'radio_check_active'
: 'radio_check'
"
@click="checkedChange('4')"
>
<template v-if="params.payment_method === '4'">
<el-icon><Check /></el-icon>
</template>
......@@ -108,12 +144,17 @@ const checkedChange = (val: string) => {
</div>
<div class="argreement_con">
<div class="left_top">
<el-checkbox v-model="isAgree">
<el-checkbox v-model="isAgree" @change="handleAgree">
<span>同意</span>
</el-checkbox>
<a @click="dialogVisible = true">紫荆金保服务协议</a>
<a @click="handleAgreement">紫荆金保服务协议</a>
</div>
<div
class="left_desc"
:class="isAgreeText === true ? 'left_desc_active' : ''"
>
请先勾选紫荆金保服务协议
</div>
<div class="left_desc" :class="isAgreeText === true ? 'left_desc_active' : ''">请先勾选紫荆金保服务协议</div>
</div>
<div class="to_pay_main" @click="handlePay">
<div class="pay_price">
......@@ -122,21 +163,11 @@ const checkedChange = (val: string) => {
</div>
</div>
</div>
<!-- <el-dialog v-model="dialogVisible" :width="!mobile ? '50%' : '90%'">
<div v-else style="height: 8rem">
<iframe
:src="`https://view.xdocin.com/xdoc?_xdoc=${item?.url}`"
frameborder="0"
width="100%"
height="100%"></iframe>
</div>
<template #footer>
<el-button type="primary" @click="changeProtocol" style="background-color: #e3a232; border: none"
>我已阅读并同意</el-button
>
</template>
</el-dialog> -->
<AgreementDialog
v-model:dialogVisible="dialogVisible"
:mobile="'2'"
@close="handleClose"
/>
</div>
</template>
......
src/modules/pay/components/PayPC.vue
浏览文件 @ 08936e03
......@@ -16,9 +16,8 @@ const params = reactive({
const start_time = getDateTime()
const end_time = getDateTime(90)
const isAgree = $ref(false)
let isAgree = $ref(false)
let isAgreeText = $ref(false)
const dialogVisible = $ref(false)
const { order, payOrder, pay } = usePay()
watchEffect(() => {
......@@ -38,6 +37,22 @@ function handlePay() {
}
pay(params)
}
const handleAgree = (val: any) => {
console.log(val)
isAgree = val
if (val === true) {
isAgreeText = false
}
}
const handleClose = () => {
isAgree = true
isAgreeText = false
}
const handleAgreement = () => {
window.open(
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/sbu-plus/%E8%AF%AD%E8%A8%80%E5%BC%BA%E5%8C%96%E6%A8%A1%E5%9D%97%E4%BB%8B%E7%BB%8D.pdf'
)
}
</script>
<template>
......@@ -49,27 +64,36 @@ function handlePay() {
:src="
shopItem.image_url ||
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fb%2F56e7995e3501f.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671671981&t=0eb627c761e6567a3a0a29163b31aac0'
" />
"
/>
<div class="course_info">
<div class="info_tit">{{ shopItem.title }}</div>
<div class="info_range">有效期：{{ start_time }} 至 {{ end_time }}</div>
<div class="info_range">
有效期：{{ start_time }} 至 {{ end_time }}
</div>
<div class="info_price">
<div class="price_icon">¥</div>
<div class="price_num">{{ shopItem.price }}</div>
</div>
</div>
</div>
<div class="con_message">课程提醒将发送到您的手机：{{ userStore.user?.mobile }}</div>
<div class="con_message">
课程提醒将发送到您的手机：{{ userStore.user?.mobile }}
</div>
<div class="con_mode">
<div class="mode_tit">支付方式</div>
<div class="mode_radio">
<el-radio-group v-model="params.payment_method">
<el-radio label="11" size="large" border>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_ali.png" />
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_ali.png"
/>
<span class="radio_tit">支付宝支付</span>
</el-radio>
<el-radio label="1" size="large" border>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_wechat.png" />
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_wechat.png"
/>
<span class="radio_tit">微信支付</span>
</el-radio>
</el-radio-group>
......@@ -78,10 +102,14 @@ function handlePay() {
<div class="con_footer">
<div class="footer_left">
<div class="left_top">
<el-checkbox v-model="isAgree"> <span>同意</span></el-checkbox>
<a @click="dialogVisible = true">紫荆金保服务协议</a>
<el-checkbox v-model="isAgree" @change="handleAgree">
<span>同意</span></el-checkbox
>
<a @click="handleAgreement">紫荆金保服务协议</a>
</div>
<div class="left_desc" :class="isAgreeText ? 'left_desc_active' : ''">
请先勾选紫荆金保服务协议
</div>
<div class="left_desc" :class="isAgreeText ? 'left_desc_active' : ''">请先勾选紫荆金保服务协议</div>
</div>
<div class="footer_right">
<div class="right_top">
......@@ -117,33 +145,61 @@ function handlePay() {
<img
:src="
order.payment_method === '11'
? 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/pay_ali.png'
? 'https://webapp-pub.ezijing.com/project_online/fi/pay_ali.png'
: 'https://webapp-pub.ezijing.com/project_online/fi/pay_wechat.png'
"
class="con_style" />
<span class="radio_tit">{{ order.payment_method === '11' ? '支付宝支付' : '微信支付' }}</span>
<img src="https://webapp-pub.ezijing.com/project_online/fi/icon_pay_checked.png" class="checked_img" />
class="con_style"
/>
<span class="radio_tit">{{
order.payment_method === '11' ? '支付宝支付' : '微信支付'
}}</span>
<img
src="https://webapp-pub.ezijing.com/project_online/fi/icon_pay_checked.png"
class="checked_img"
/>
</div>
</div>
<div class="order_qaCode">
<div class="qaCode_left">
<div class="left_code">
<qrcode-vue :value="payOrder?.payment_url" :size="197" level="H"></qrcode-vue>
<qrcode-vue
:value="payOrder?.payment_url"
:size="197"
level="H"
></qrcode-vue>
</div>
<div class="left_desc" :class="order.payment_method === '11' ? 'left_desc_ali' : 'left_desc_wechat'">
{{ order.payment_method === '11' ? '请打开手机支付宝，扫一扫完成支付' : '请打开手机微信，扫一扫完成支付' }}
<div
class="left_desc"
:class="
order.payment_method === '11'
? 'left_desc_ali'
: 'left_desc_wechat'
"
>
{{
order.payment_method === '11'
? '请打开手机支付宝，扫一扫完成支付'
: '请打开手机微信，扫一扫完成支付'
}}
</div>
</div>
<img
:src="
order.payment_method === '11'
? 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_aliPay_img1.png'
: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_wechat_img1.png'
? 'https://webapp-pub.ezijing.com/project_online/fi/icon_aliPay_img1.png'
: 'https://webapp-pub.ezijing.com/project_online/fi/icon_wechat_img1.png'
"
class="right_img" />
class="right_img"
/>
</div>
</div>
</div>
<AgreementDialog
v-if="dialogVisible === true"
v-model:dialogVisible="dialogVisible"
:mobile="'1'"
@close="handleClose"
/>
</template>
<style lang="scss" scoped>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论