mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-17 16:56:38 +08:00
opt: 优化 ItemList 组件样式，调整支付页面布局
This commit is contained in:
RockYang
parent
7858228505
commit
ed0a1c57d6
@ -43,4 +43,6 @@ INSERT INTO `chatgpt_products` (`id`, `name`, `price`, `discount`, `days`, `call
|
|||||||
(5, '100次点卡', '10.03', '10.00', 0, 100, 1, 0, 0, '2023-08-28 10:55:08', '2023-08-31 17:34:43');
|
(5, '100次点卡', '10.03', '10.00', 0, 100, 1, 0, 0, '2023-08-28 10:55:08', '2023-08-31 17:34:43');
|
||||||
|
|
||||||
ALTER TABLE `chatgpt_products` ADD PRIMARY KEY (`id`);
|
ALTER TABLE `chatgpt_products` ADD PRIMARY KEY (`id`);
|
||||||
ALTER TABLE `chatgpt_products` MODIFY `id` int NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
|
ALTER TABLE `chatgpt_products` MODIFY `id` int NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
|
||||||
|
|
||||||
|
ALTER TABLE `chatgpt_orders` ADD `pay_way` VARCHAR(20) DEFAULT '0' NOT NULL COMMENT '支付方式' AFTER `pay_time`;
|
||||||
@ -1,5 +1,5 @@
|
|||||||
# 前端 Vue 项目构建
|
# 前端 Vue 项目构建
|
||||||
FROM nginx:1.20
|
FROM nginx:1.20.2
|
||||||
|
|
||||||
MAINTAINER yangjian<yangjian102621@163.com>
|
MAINTAINER yangjian<yangjian102621@163.com>
|
||||||
|
|
||||||
@ -8,4 +8,4 @@ COPY ./web/dist /var/www/app/dist
|
|||||||
|
|
||||||
EXPOSE 80
|
EXPOSE 80
|
||||||
EXPOSE 443
|
EXPOSE 443
|
||||||
EXPOSE 8080
|
EXPOSE 8080
|
||||||
|
|||||||
@ -47,7 +47,7 @@ onMounted(() => {
|
|||||||
const computeSize = () => {
|
const computeSize = () => {
|
||||||
const w = container.value.offsetWidth - 8 // 减去滚动条的宽度
|
const w = container.value.offsetWidth - 8 // 减去滚动条的宽度
|
||||||
let cols = Math.floor(w / props.width)
|
let cols = Math.floor(w / props.width)
|
||||||
itemWidth.value = Math.ceil(w / cols) - 1
|
itemWidth.value = Math.ceil(w / cols)
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onresize = () => {
|
window.onresize = () => {
|
||||||
|
|||||||
@ -4,71 +4,79 @@
|
|||||||
会员充值中心
|
会员充值中心
|
||||||
</div>
|
</div>
|
||||||
<div class="inner" :style="{height: listBoxHeight + 'px'}">
|
<div class="inner" :style="{height: listBoxHeight + 'px'}">
|
||||||
<div class="user-profile">
|
<el-row :gutter="20">
|
||||||
<user-profile/>
|
<el-col :span="7">
|
||||||
|
<div class="user-profile">
|
||||||
|
<user-profile/>
|
||||||
|
|
||||||
<el-row class="user-opt" :gutter="20">
|
<el-row class="user-opt" :gutter="20">
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button>
|
<el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-button type="primary" @click="showBindMobileDialog = true">绑定手机号</el-button>
|
<el-button type="primary" @click="showBindMobileDialog = true">绑定手机号</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-button type="primary" v-if="enableReward" @click="showRewardDialog = true">加入众筹</el-button>
|
<el-button type="primary" v-if="enableReward" @click="showRewardDialog = true">加入众筹</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-button type="primary" v-if="enableReward" @click="showRewardVerifyDialog = true">众筹核销</el-button>
|
<el-button type="primary" v-if="enableReward" @click="showRewardVerifyDialog = true">众筹核销
|
||||||
</el-col>
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="24" style="padding-top: 30px">
|
<el-col :span="24" style="padding-top: 30px">
|
||||||
<el-button type="danger" round @click="logout">退出登录</el-button>
|
<el-button type="danger" round @click="logout">退出登录</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
<div class="product-box">
|
<el-col :span="17">
|
||||||
<div class="info">
|
<div class="product-box">
|
||||||
<el-alert type="info" show-icon :closable="false" effect="dark">
|
<div class="info">
|
||||||
<strong>说明:</strong> 成为本站会员后每月有500次对话额度，50次 AI 绘画额度，限制下月1号解除，若在期间超过次数后可单独购买点卡。
|
<el-alert type="info" show-icon :closable="false" effect="dark">
|
||||||
当月充值的点卡有效期可以延期到下个月底。
|
<strong>说明:</strong> 成为本站会员后每月有500次对话额度，50次 AI 绘画额度，限制下月1号解除，若在期间超过次数后可单独购买点卡。
|
||||||
</el-alert>
|
当月充值的点卡有效期可以延期到下个月底。
|
||||||
</div>
|
</el-alert>
|
||||||
|
|
||||||
<ItemList :items="list" v-if="list.length > 0" :gap="30" :width="240">
|
|
||||||
<template #default="scope">
|
|
||||||
<div class="product-item" :style="{width: scope.width+'px'}" @click="orderPay(scope.item)">
|
|
||||||
<div class="image-container">
|
|
||||||
<el-image :src="vipImg" fit="cover"/>
|
|
||||||
</div>
|
|
||||||
<div class="product-title">
|
|
||||||
<span class="name">{{ scope.item.name }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="product-info">
|
|
||||||
<div class="info-line">
|
|
||||||
<span class="label">商品原价：</span>
|
|
||||||
<span class="price">￥{{ scope.item.price }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-line">
|
|
||||||
<span class="label">促销立减：</span>
|
|
||||||
<span class="price">￥{{ scope.item.discount }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-line">
|
|
||||||
<span class="label">有效期：</span>
|
|
||||||
<span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
|
|
||||||
<span class="expire" v-else>当月有效</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
</ItemList>
|
|
||||||
|
|
||||||
<h2 class="headline">消费账单</h2>
|
<ItemList :items="list" v-if="list.length > 0" :gap="30" :width="240">
|
||||||
|
<template #default="scope">
|
||||||
|
<div class="product-item" :style="{width: scope.width+'px'}" @click="orderPay(scope.item)">
|
||||||
|
<div class="image-container">
|
||||||
|
<el-image :src="vipImg" fit="cover"/>
|
||||||
|
</div>
|
||||||
|
<div class="product-title">
|
||||||
|
<span class="name">{{ scope.item.name }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="product-info">
|
||||||
|
<div class="info-line">
|
||||||
|
<span class="label">商品原价：</span>
|
||||||
|
<span class="price">￥{{ scope.item.price }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-line">
|
||||||
|
<span class="label">促销立减：</span>
|
||||||
|
<span class="price">￥{{ scope.item.discount }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-line">
|
||||||
|
<span class="label">有效期：</span>
|
||||||
|
<span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
|
||||||
|
<span class="expire" v-else>当月有效</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ItemList>
|
||||||
|
|
||||||
|
<h2 class="headline">消费账单</h2>
|
||||||
|
|
||||||
|
<div class="user-order">
|
||||||
|
<user-order v-if="isLogin"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
<div class="user-order">
|
|
||||||
<user-order v-if="isLogin"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false"/>
|
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false"/>
|
||||||
@ -203,6 +211,7 @@ const orderPay = (row) => {
|
|||||||
curPayProduct.value = row
|
curPayProduct.value = row
|
||||||
}
|
}
|
||||||
loading.value = true
|
loading.value = true
|
||||||
|
text.value = ""
|
||||||
httpPost("/api/payment/alipay/qrcode", {product_id: curPayProduct.value.id, user_id: user.value.id}).then(res => {
|
httpPost("/api/payment/alipay/qrcode", {product_id: curPayProduct.value.id, user_id: user.value.id}).then(res => {
|
||||||
showPayDialog.value = true
|
showPayDialog.value = true
|
||||||
qrcode.value = res.data['image']
|
qrcode.value = res.data['image']
|
||||||
@ -336,15 +345,12 @@ const logout = function () {
|
|||||||
|
|
||||||
|
|
||||||
.product-box {
|
.product-box {
|
||||||
width 100%
|
|
||||||
padding-left 20px
|
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
.el-alert__description {
|
.el-alert__description {
|
||||||
font-size 14px !important
|
font-size 14px !important
|
||||||
margin 0
|
margin 0
|
||||||
}
|
}
|
||||||
padding 10px 20px
|
padding 10px 20px 20px 0
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-box {
|
.list-box {
|
||||||
@ -421,11 +427,11 @@ const logout = function () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.headline {
|
.headline {
|
||||||
padding 0 20px
|
padding 0 20px 20px 0
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-order {
|
.user-order {
|
||||||
padding 0 20px 20px 20px
|
padding 0 20px 20px 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user