ea
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// pages/myPackage/bzzx/index.ts
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,2 @@
|
||||
<!--pages/myPackage/bzzx/index.wxml-->
|
||||
<text>pages/myPackage/bzzx/index.wxml</text>
|
||||
@@ -0,0 +1 @@
|
||||
/* pages/myPackage/bzzx/index.wxss */
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"custom-nav": "/components/custom-nav/custom-nav"
|
||||
},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import { client } from "../../../utils/api";
|
||||
import { updateuserinfo, userInfo } from "../../../utils/request";
|
||||
|
||||
Page({
|
||||
data: {
|
||||
userinfo: {
|
||||
nickname: '创作小助手',
|
||||
id: '10010',
|
||||
avatar: 'https://cdn.zhuangb123.com/avatar/boy/a2cfe723-98ddc-12de-723b8f51b-71b1e3.jpeg',
|
||||
description: 'AI 创作，让想象力触手可及 ✨'
|
||||
},
|
||||
oldAvatar: '',
|
||||
newAvatar: ''
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.setData({ userinfo: wx.getStorageSync('userInfo') });
|
||||
},
|
||||
|
||||
handleBack() {
|
||||
wx.navigateBack({
|
||||
fail: () => wx.switchTab({ url: '/pages/my/my' }),
|
||||
})
|
||||
},
|
||||
handleChangeAvatar() {
|
||||
let that = this
|
||||
wx.chooseImage({
|
||||
count: 1,
|
||||
success(res) {
|
||||
let userInfo = that.data.userinfo;
|
||||
let oldAvatar = userInfo.avatar;
|
||||
userInfo.avatar = res.tempFilePaths[0];
|
||||
|
||||
that.setData({
|
||||
userinfo: userInfo,
|
||||
oldAvatar: oldAvatar
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
handleNicknameInput(e: any) {
|
||||
let userinfo = this.data.userinfo;
|
||||
userinfo.nickname = e.detail.value;
|
||||
this.setData({
|
||||
userinfo: userinfo,
|
||||
})
|
||||
},
|
||||
handleSave() {
|
||||
let nickname = this.data.userinfo;
|
||||
if (nickname.nickname.length < 2) {
|
||||
wx.showToast({ title: '昵称至少2个字符', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
let that = this;
|
||||
let update = () => {
|
||||
updateuserinfo(nickname.nickname, nickname.avatar).then((res: any) => {
|
||||
if (!res.code) {
|
||||
userInfo().then((res: any) => {
|
||||
wx.setStorageSync('userInfo', res.data);
|
||||
|
||||
that.setData({ userinfo: res.data });
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
if (this.data.userinfo.avatar.indexOf('http://tmp/') === -1) {
|
||||
update();
|
||||
return;
|
||||
}
|
||||
|
||||
client.upload(this.data.userinfo.avatar, {}).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
nickname.avatar = res.data.url;
|
||||
update();
|
||||
} else {
|
||||
wx.showModal({ title: '温馨提示', content: '头像上传失败' })
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,58 @@
|
||||
<view class="edit-page">
|
||||
<custom-nav padding-x="42">
|
||||
<view class="edit-nav">
|
||||
<view class="nav-back" bindtap="handleBack">
|
||||
<text></text>
|
||||
</view>
|
||||
<text class="nav-title">编辑资料</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
</custom-nav>
|
||||
|
||||
<view class="edit-content">
|
||||
<view class="edit-card">
|
||||
<view class="section-title">
|
||||
<text class="section-mark"></text>
|
||||
<text>头像</text>
|
||||
</view>
|
||||
|
||||
<view class="avatar-row">
|
||||
<view class="avatar-wrap">
|
||||
<view class="avatar-large">
|
||||
<image src="{{userinfo.avatar}}"></image>
|
||||
</view>
|
||||
<view class="camera-badge">
|
||||
<image class="camera-icon icon-placeholder" src="/static/images/my/caram.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="change-avatar" bindtap="handleChangeAvatar">
|
||||
<image class="image-icon icon-placeholder" src="/static/images/my/image.png" mode="aspectFit"></image>
|
||||
<text>更换头像</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="section-title nickname-title">
|
||||
<text class="section-mark"></text>
|
||||
<text>昵称</text>
|
||||
</view>
|
||||
|
||||
<view class="input-shell">
|
||||
<input class="nickname-input" value="{{userinfo.nickname}}" maxlength="12" placeholder="请输入昵称" bindinput="handleNicknameInput" />
|
||||
<image class="edit-icon icon-placeholder" src="/static/images/my/image.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="input-tip">2–12个字符</text>
|
||||
|
||||
<view class="card-spacer"></view>
|
||||
|
||||
<view class="sync-tip">
|
||||
<image class="shield-icon icon-placeholder" src="/static/images/my/image.png" mode="aspectFit"></image>
|
||||
<text>修改后将同步更新个人中心信息</text>
|
||||
</view>
|
||||
|
||||
<view class="save-btn" bindtap="handleSave">保存修改</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -0,0 +1,299 @@
|
||||
page {
|
||||
min-height: 100vh;
|
||||
background: #f8f6ff;
|
||||
color: #111827;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.edit-page {
|
||||
width: 750rpx;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(circle at 82% 4%, rgba(137, 95, 255, 0.18), transparent 20%),
|
||||
radial-gradient(circle at 16% 10%, rgba(118, 129, 255, 0.14), transparent 24%),
|
||||
linear-gradient(180deg, #f4f1ff 0%, #fbfaff 42%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.edit-nav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-back,
|
||||
.nav-placeholder {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-back text {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: block;
|
||||
border-left: 5rpx solid #111827;
|
||||
border-bottom: 5rpx solid #111827;
|
||||
transform: rotate(45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 900;
|
||||
color: #101522;
|
||||
}
|
||||
|
||||
.edit-content {
|
||||
flex: 1;
|
||||
padding: 50rpx 32rpx 78rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.edit-card {
|
||||
width: 100%;
|
||||
min-height: 1074rpx;
|
||||
padding: 54rpx 40rpx 50rpx;
|
||||
border-radius: 34rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
box-shadow: 0 16rpx 42rpx rgba(91, 84, 142, 0.08);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
color: #111827;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.section-mark {
|
||||
width: 7rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(180deg, #aa6dff, #6f67ff);
|
||||
}
|
||||
|
||||
.avatar-row {
|
||||
margin-top: 32rpx;
|
||||
padding: 0 44rpx 0 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.avatar-wrap {
|
||||
width: 246rpx;
|
||||
height: 246rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-large {
|
||||
width: 222rpx;
|
||||
height: 222rpx;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #f3e0d7, #fff7f4);
|
||||
/* border: 4rpx solid #e6dcff; */
|
||||
box-shadow: inset 0 0 0 5rpx #ffffff;
|
||||
}
|
||||
|
||||
.avatar-large>image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.camera-badge {
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* background: linear-gradient(135deg, #9a6cff, #7656ef); */
|
||||
background: #ffffff;
|
||||
box-shadow: 0 8rpx 18rpx rgba(115, 83, 238, 0.24), 0 0 0 8rpx #ffffff;
|
||||
margin-left: -70rpx;
|
||||
margin-top: 142rpx;
|
||||
}
|
||||
|
||||
.camera-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: block;
|
||||
border-radius: 6rpx;
|
||||
/* border: 4rpx solid #ffffff; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* .camera-icon::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
margin: 2rpx auto 0;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
} */
|
||||
|
||||
.change-avatar {
|
||||
width: 220rpx;
|
||||
height: 58rpx;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 14rpx;
|
||||
color: #7d5cff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 800;
|
||||
border: 2rpx solid #8d6cff;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.image-icon {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
display: block;
|
||||
border: 4rpx solid currentColor;
|
||||
border-radius: 3rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.image-icon::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 9rpx;
|
||||
height: 9rpx;
|
||||
margin: 5rpx 0 0 6rpx;
|
||||
border-left: 4rpx solid currentColor;
|
||||
border-top: 4rpx solid currentColor;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
margin: 42rpx 0 54rpx;
|
||||
background: #e5e7ef;
|
||||
}
|
||||
|
||||
.nickname-title {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.input-shell {
|
||||
height: 86rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
border: 2rpx solid #ddd7ff;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nickname-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 82rpx;
|
||||
color: #111827;
|
||||
font-size: 27rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: block;
|
||||
border-left: 5rpx solid #9a79ff;
|
||||
border-bottom: 5rpx solid #9a79ff;
|
||||
transform: rotate(-45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input-tip {
|
||||
margin-top: 18rpx;
|
||||
color: #8b90a2;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.card-spacer {
|
||||
flex: 1;
|
||||
min-height: 210rpx;
|
||||
}
|
||||
|
||||
.sync-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 14rpx;
|
||||
color: #9095a5;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.shield-icon {
|
||||
width: 24rpx;
|
||||
height: 26rpx;
|
||||
border-radius: 6rpx 6rpx 12rpx 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #a56dff, #715eff);
|
||||
}
|
||||
|
||||
.shield-icon::after {
|
||||
content: "";
|
||||
width: 9rpx;
|
||||
height: 5rpx;
|
||||
display: block;
|
||||
border-left: 3rpx solid #ffffff;
|
||||
border-bottom: 3rpx solid #ffffff;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
height: 86rpx;
|
||||
margin-top: 28rpx;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg, #b26bff 0%, #7549f5 100%);
|
||||
box-shadow: 0 14rpx 26rpx rgba(117, 73, 245, 0.2);
|
||||
}
|
||||
|
||||
.icon-placeholder {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"custom-nav": "/components/custom-nav/custom-nav"
|
||||
},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
import { diamonds, diamondVirtualPayment, updatesessionkey, updateuserinfo, userInfo } from '../../../utils/request';
|
||||
|
||||
interface CoinPackage {
|
||||
id: number
|
||||
coins: number
|
||||
price: number
|
||||
ribbon?: string
|
||||
ribbonClass?: string
|
||||
artClass: string
|
||||
chest?: boolean
|
||||
selected: boolean
|
||||
}
|
||||
Page({
|
||||
data: {
|
||||
packages: [],
|
||||
selectedPackage: null as CoinPackage | null,
|
||||
userInfo: { diamond: 0 }
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.setData({ userInfo: wx.getStorageSync('userInfo') })
|
||||
diamonds().then((res: any) => {
|
||||
if (!res.code) {
|
||||
this.setData({ packages: res.data });
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
handleBack() {
|
||||
wx.navigateBack({
|
||||
fail: () => wx.switchTab({ url: '/pages/my/my' }),
|
||||
})
|
||||
},
|
||||
handlePackageTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const id = e.currentTarget.dataset.id
|
||||
const selectedPackage = this.data.packages.find((item: CoinPackage) => item.id === id) || this.data.selectedPackage
|
||||
|
||||
this.setData({
|
||||
selectedPackage,
|
||||
})
|
||||
},
|
||||
handleBuy() {
|
||||
const that = this;
|
||||
if (that.data.selectedPackage == null) {
|
||||
return;
|
||||
}
|
||||
wx.showLoading({ title: '处理中, 请稍后.', mask: true });
|
||||
wx.checkSession({
|
||||
success() {
|
||||
that.payment();
|
||||
},
|
||||
fail() {
|
||||
wx.login({
|
||||
success(login) {
|
||||
updatesessionkey(login.code).then((res: any) => {
|
||||
if (!res.code) {
|
||||
that.payment();
|
||||
} else {
|
||||
wx.showModal({
|
||||
title: '温馨提示',
|
||||
content: res.message,
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
wx.hideLoading();
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
payment() {
|
||||
let that = this;
|
||||
diamondVirtualPayment((that.data.selectedPackage || { id: 0 }).id).then((res: any) => {
|
||||
wx.requestVirtualPayment({
|
||||
signData: JSON.stringify(res.param.signData),
|
||||
paySig: res.param.paySig,
|
||||
signature: res.param.signature,
|
||||
mode: res.param.mode,
|
||||
success(result: any) {
|
||||
wx.hideLoading();
|
||||
console.log(result)
|
||||
|
||||
userInfo().then((res: any) => {
|
||||
if (!res.code) {
|
||||
wx.setStorageSync('userInfo', res.data);
|
||||
that.setData({ userInfo: res.data });
|
||||
}
|
||||
})
|
||||
},
|
||||
fail(error: any) {
|
||||
wx.hideLoading();
|
||||
console.log(error);
|
||||
wx.showModal({
|
||||
title: '温馨提示',
|
||||
content: '支付失败',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
});
|
||||
}).catch(() => {
|
||||
wx.hideLoading();
|
||||
wx.showModal({
|
||||
title: '温馨提示',
|
||||
content: '系统繁忙, 请稍后再试',
|
||||
showCancel: false
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,71 @@
|
||||
<view class="coin-page">
|
||||
<custom-nav padding-x="42">
|
||||
<view class="coin-nav">
|
||||
<view class="nav-back" bindtap="handleBack"><text></text></view>
|
||||
<text class="nav-title">购买金币</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
</custom-nav>
|
||||
|
||||
<view class="coin-content">
|
||||
<view class="balance-card">
|
||||
<image class="balance-art icon-placeholder" src="/static/images/icons/frame_1.png" mode="widthFix"></image>
|
||||
<view class="balance-copy">{{userInfo.diamond}}</view>
|
||||
</view>
|
||||
|
||||
<view class="section-head">
|
||||
<text class="section-title">金币套餐</text>
|
||||
<view class="section-note">
|
||||
<image class="info-icon icon-placeholder" src="/static/images/info-circle.png" mode="aspectFit"></image>
|
||||
<text>套餐数量与价格以实际配置为准</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="package-grid">
|
||||
<view
|
||||
wx:for="{{packages}}"
|
||||
wx:key="id"
|
||||
class="package-card {{selectedPackage.id == item.id ? 'selected' : ''}}"
|
||||
data-id="{{item.id}}"
|
||||
bindtap="handlePackageTap"
|
||||
>
|
||||
<view wx:if="{{item.ribbon}}" class="ribbon {{item.ribbonClass}}">{{item.ribbon}}</view>
|
||||
<text class="package-name">{{item.coins}} 金币</text>
|
||||
<image class="package-art {{item.artClass}} icon-placeholder" src="{{item.icon}}" mode="widthFix"></image>
|
||||
<view class="package-price">
|
||||
<text>¥</text>
|
||||
<text>{{item.price}}</text>
|
||||
</view>
|
||||
<view wx:if="{{item.selected}}" class="selected-check"><text></text></view>
|
||||
|
||||
<view wx:if="{{item.tag == 'best_seller'}}" class="right-jiao best_seller">热卖</view>
|
||||
<view wx:if="{{item.tag == 'hot'}}" class="right-jiao">爆款</view>
|
||||
<view wx:if="{{item.tag == 'recommend'}}" class="right-jiao recommend">推荐</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tips-card">
|
||||
<view class="tip-row">
|
||||
<image class="tip-icon flash-tip icon-placeholder" src="/static/images/icons/frame_7.png" mode="aspectFit"></image>
|
||||
<text>充值后金币实时到账</text>
|
||||
</view>
|
||||
<view class="tip-row">
|
||||
<image class="tip-icon shield-tip icon-placeholder" src="/static/images/icons/frame_.png" mode="aspectFit"></image>
|
||||
<text>金币仅用于平台内数字人视频相关功能</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="selected-bar">
|
||||
<view class="selected-left">
|
||||
<image class="selected-icon icon-placeholder" src="/static/images/icons/check-circle-filled.png" mode="aspectFit"></image>
|
||||
<text>已选：</text>
|
||||
<text class="selected-coins">{{selectedPackage.coin || 0}}</text>
|
||||
<text>金币</text>
|
||||
</view>
|
||||
<text class="selected-price">¥{{selectedPackage.price || 0.00}}</text>
|
||||
</view>
|
||||
|
||||
<view class="buy-btn" bindtap="handleBuy">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -0,0 +1,509 @@
|
||||
page {
|
||||
min-height: 100vh;
|
||||
background: #fbfaff;
|
||||
color: #111827;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.coin-page {
|
||||
width: 750rpx;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(circle at 80% 5%, rgba(138, 103, 255, 0.16), transparent 20%),
|
||||
radial-gradient(circle at 18% 8%, rgba(115, 129, 255, 0.12), transparent 24%),
|
||||
linear-gradient(180deg, #f9f6ff 0%, #fbfbff 42%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.coin-nav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-back,
|
||||
.nav-placeholder {
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-back text {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: block;
|
||||
border-left: 5rpx solid #111827;
|
||||
border-bottom: 5rpx solid #111827;
|
||||
transform: rotate(45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 31rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 900;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.coin-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
position: relative;
|
||||
/* height: 198rpx; */
|
||||
/* padding: 36rpx 38rpx; */
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* overflow: hidden; */
|
||||
/* background:
|
||||
radial-gradient(circle at 82% 46%, rgba(126, 83, 255, 0.22), transparent 30%),
|
||||
linear-gradient(100deg, #ffffff 0%, #eee8ff 100%); */
|
||||
/* border: 1rpx solid #ded6ff; */
|
||||
box-shadow: 0 10rpx 22rpx rgba(103, 86, 176, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.balance-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 2026;
|
||||
font-weight: bold;
|
||||
font-size: 72rpx;
|
||||
left: 110rpx;
|
||||
bottom: 45rpx;
|
||||
}
|
||||
|
||||
.balance-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.balance-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
}
|
||||
|
||||
.coin-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 20rpx;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg, #ffd56b, #ff9900);
|
||||
box-shadow: inset 0 0 0 4rpx rgba(255, 255, 255, 0.38), 0 7rpx 13rpx rgba(248, 154, 12, 0.2);
|
||||
}
|
||||
|
||||
.balance-count {
|
||||
font-size: 68rpx;
|
||||
line-height: 1;
|
||||
font-weight: 900;
|
||||
color: #0e1118;
|
||||
}
|
||||
|
||||
.balance-art {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
/* position: absolute; */
|
||||
/* left: 0;
|
||||
top: 0; */
|
||||
}
|
||||
|
||||
.open-box {
|
||||
width: 142rpx;
|
||||
height: 104rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.box-lid {
|
||||
width: 142rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 24rpx 24rpx 8rpx 8rpx;
|
||||
background: linear-gradient(135deg, rgba(196, 163, 255, 0.55), rgba(138, 89, 255, 0.28));
|
||||
transform: rotate(6deg) translateY(12rpx);
|
||||
}
|
||||
|
||||
.box-body {
|
||||
width: 126rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 12rpx 12rpx 28rpx 28rpx;
|
||||
background: linear-gradient(135deg, rgba(126, 83, 255, 0.28), rgba(196, 163, 255, 0.5));
|
||||
box-shadow: 0 8rpx 18rpx rgba(126, 83, 255, 0.18);
|
||||
}
|
||||
|
||||
.big-coin {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
margin-top: -108rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #ffe28b, #ffac19);
|
||||
box-shadow: inset 0 0 0 8rpx rgba(255, 255, 255, 0.34), 0 10rpx 18rpx rgba(255, 172, 25, 0.24);
|
||||
}
|
||||
|
||||
.big-coin text {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 8rpx;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.art-spark {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 5rpx;
|
||||
background: #ffffff;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.spark-one {
|
||||
margin-right: -12rpx;
|
||||
margin-bottom: 98rpx;
|
||||
}
|
||||
|
||||
.spark-two {
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
margin-left: -4rpx;
|
||||
margin-bottom: 46rpx;
|
||||
background: #8d73ff;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
margin-top: 34rpx;
|
||||
margin-bottom: 22rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 27rpx;
|
||||
font-weight: 900;
|
||||
color: #121722;
|
||||
}
|
||||
|
||||
.section-note {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
color: #85899a;
|
||||
font-size: 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid currentColor;
|
||||
font-size: 14rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.package-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 22rpx 18rpx;
|
||||
}
|
||||
|
||||
.package-card {
|
||||
position: relative;
|
||||
height: 230rpx;
|
||||
border-radius: 22rpx;
|
||||
padding: 28rpx 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0 8rpx 20rpx rgba(82, 90, 146, 0.08);
|
||||
border-width: 2rpx;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.package-card.selected {
|
||||
border-color: #7351ff;
|
||||
background-color: rgba(196, 163, 255, 0.1);
|
||||
}
|
||||
|
||||
.ribbon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 74rpx;
|
||||
height: 42rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 18rpx;
|
||||
font-weight: 800;
|
||||
transform: rotate(-45deg) translate(-22rpx, -10rpx);
|
||||
}
|
||||
|
||||
.red-ribbon {
|
||||
background: #ff5b78;
|
||||
}
|
||||
|
||||
.purple-ribbon {
|
||||
background: #7452ff;
|
||||
}
|
||||
|
||||
.gold-ribbon {
|
||||
background: #ffb629;
|
||||
}
|
||||
|
||||
.package-name {
|
||||
color: #111827;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.1;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.package-art {
|
||||
width: 82rpx;
|
||||
margin-top: 18rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.coin-pile {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.coin-pile text {
|
||||
width: 54rpx;
|
||||
height: 22rpx;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
background: linear-gradient(180deg, #ffe28b, #f8a113);
|
||||
box-shadow: inset 0 0 0 4rpx rgba(255, 255, 255, 0.36), 0 8rpx 0 -2rpx #e98a0d;
|
||||
}
|
||||
|
||||
.coin-pile text:nth-child(1) {
|
||||
margin-right: -26rpx;
|
||||
}
|
||||
|
||||
.coin-pile text:nth-child(2) {
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.coin-pile text:nth-child(3) {
|
||||
margin-left: -26rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.large-pile .coin-pile text {
|
||||
width: 66rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
|
||||
.mini-chest {
|
||||
width: 74rpx;
|
||||
height: 54rpx;
|
||||
margin-left: -18rpx;
|
||||
border-radius: 8rpx 8rpx 14rpx 14rpx;
|
||||
background: linear-gradient(90deg, #7b56d9 0 28%, #ffbd47 28% 46%, #a166f0 46% 100%);
|
||||
box-shadow: 0 8rpx 12rpx rgba(113, 83, 226, 0.18);
|
||||
}
|
||||
|
||||
.package-price {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4rpx;
|
||||
color: #6d4cff;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.package-price text:first-child {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.package-price text:last-child {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.right-jiao {
|
||||
position: absolute;
|
||||
left: -90rpx;
|
||||
top: -9rpx;
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
line-height: 70rpx;
|
||||
background-color: #6d4cff;
|
||||
z-index: 9999;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 18rpx;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.right-jiao.best_seller {
|
||||
background-color: orange;
|
||||
}
|
||||
.right-jiao.recommend{
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.selected-check {
|
||||
position: absolute;
|
||||
right: 12rpx;
|
||||
bottom: 12rpx;
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #6f4cff;
|
||||
}
|
||||
|
||||
.selected-check text {
|
||||
width: 16rpx;
|
||||
height: 9rpx;
|
||||
border-left: 4rpx solid #ffffff;
|
||||
border-bottom: 4rpx solid #ffffff;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.tips-card {
|
||||
margin-top: 26rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
background: #f5f3ff;
|
||||
color: #73788a;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.tip-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
background: #6f4cff;
|
||||
}
|
||||
|
||||
.shield-tip {
|
||||
border-radius: 6rpx 6rpx 12rpx 12rpx;
|
||||
}
|
||||
|
||||
.selected-bar {
|
||||
height: 62rpx;
|
||||
margin-top: 14rpx;
|
||||
padding: 0 30rpx 0 24rpx;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #e4e2f2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.selected-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
color: #171b26;
|
||||
font-size: 23rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.selected-icon {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #6f4cff;
|
||||
}
|
||||
|
||||
.selected-icon text {
|
||||
width: 14rpx;
|
||||
height: 8rpx;
|
||||
border-left: 4rpx solid #ffffff;
|
||||
border-bottom: 4rpx solid #ffffff;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.selected-coins,
|
||||
.selected-price {
|
||||
color: #6f4cff;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.selected-price {
|
||||
font-size: 29rpx;
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
height: 68rpx;
|
||||
margin-top: 12rpx;
|
||||
border-radius: 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 29rpx;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #4c88ff 0%, #7b3df2 100%);
|
||||
box-shadow: 0 10rpx 18rpx rgba(91, 83, 244, 0.2);
|
||||
}
|
||||
|
||||
.icon-placeholder {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// pages/myPackage/vip/index.ts
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,2 @@
|
||||
<!--pages/myPackage/vip/index.wxml-->
|
||||
<text>pages/myPackage/vip/index.wxml</text>
|
||||
@@ -0,0 +1 @@
|
||||
/* pages/myPackage/vip/index.wxss */
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"custom-nav": "/components/custom-nav/custom-nav"
|
||||
},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { client } from "../../../utils/api"
|
||||
import { feedback, uploadavatar } from "../../../utils/request"
|
||||
|
||||
interface FeedbackType {
|
||||
key: number
|
||||
label: string
|
||||
icon: string
|
||||
active: boolean
|
||||
}
|
||||
|
||||
interface submits {
|
||||
categoryes: number[],
|
||||
content: string,
|
||||
images: string[],
|
||||
phone: string
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
description: '',
|
||||
contact: '',
|
||||
types: [
|
||||
{ key: 1, label: '功能问题', icon: '/static/images/my/debug.png', active: true },
|
||||
{ key: 2, label: '体验优化', active: false, icon: '/static/images/my/star.png' },
|
||||
{ key: 3, label: '内容建议', active: false, icon: '/static/images/my/msg.png' },
|
||||
{ key: 4, label: '其他问题', active: false, icon: '/static/images/my/more.png' },
|
||||
] as FeedbackType[],
|
||||
datas: {} as submits
|
||||
},
|
||||
onLoad() {
|
||||
this.setData({ datas: { categoryes: [], content: '', images: [], phone: '' } })
|
||||
},
|
||||
handleBack() {
|
||||
wx.navigateBack({
|
||||
fail: () => wx.switchTab({ url: '/pages/my/my' }),
|
||||
})
|
||||
},
|
||||
handleRecord() {
|
||||
wx.showToast({ title: '反馈记录', icon: 'none' })
|
||||
},
|
||||
handleTypeTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const key = e.currentTarget.dataset.key
|
||||
|
||||
this.setData({
|
||||
types: this.data.types.map((item) => ({
|
||||
...item,
|
||||
active: item.key === key ? !item.active : item.active,
|
||||
})),
|
||||
})
|
||||
},
|
||||
handleDescriptionInput(e: any) {
|
||||
this.setData({ description: e.detail.value })
|
||||
},
|
||||
handleContactInput(e: any) {
|
||||
this.setData({ contact: e.detail.value })
|
||||
},
|
||||
handleUpload() {
|
||||
let that = this;
|
||||
wx.showLoading({ mask: true, title: '请稍后...' })
|
||||
wx.chooseMedia({
|
||||
count: 3 - this.data.datas.images.length,
|
||||
mediaType: ['image', 'video'],
|
||||
sourceType: ['album', 'camera'],
|
||||
maxDuration: 30,
|
||||
camera: 'back',
|
||||
success(res) {
|
||||
client.upload(res.tempFiles[0].tempFilePath, {}).then((res: any) => {
|
||||
wx.hideLoading();
|
||||
if (res.code == 0) {
|
||||
let images = that.data.datas;
|
||||
images.images.push(res.data.url);
|
||||
that.setData({ datas: images })
|
||||
}
|
||||
})
|
||||
},
|
||||
fail(err) {
|
||||
wx.hideLoading();
|
||||
console.log(err);
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSubmit() {
|
||||
let that = this;
|
||||
if (!this.data.description.trim()) {
|
||||
wx.showToast({ title: '请填写问题描述', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
let datas = this.data.datas;
|
||||
let types: FeedbackType[] = [];
|
||||
for (let q = 0; q < this.data.types.length; q++) {
|
||||
let item = that.data.types[q];
|
||||
if (item.active) {
|
||||
datas.categoryes.push(item.key)
|
||||
}
|
||||
item.active = false;
|
||||
types.push(item);
|
||||
}
|
||||
|
||||
datas.content = this.data.description;
|
||||
datas.phone = this.data.contact;
|
||||
|
||||
feedback(JSON.stringify(datas)).then((res: any) => {
|
||||
if (!res.code) {
|
||||
this.setData({ datas: { categoryes: [], content: '', images: [], phone: '' }, contact: '', description: '', types: types })
|
||||
|
||||
wx.showModal({ title: '温馨提示', content: '提交成功', showCancel: false });
|
||||
} else {
|
||||
wx.showModal({ title: '温馨提示', content: '提交失败, 请稍后重试', showCancel: false });
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,86 @@
|
||||
<view class="feedback-page">
|
||||
<custom-nav padding-x="42">
|
||||
<view class="feedback-nav">
|
||||
<view class="nav-back" bindtap="handleBack">
|
||||
<text></text>
|
||||
</view>
|
||||
<text class="nav-title">意见反馈</text>
|
||||
<view class="record-link" bindtap="handleRecord"></view>
|
||||
</view>
|
||||
</custom-nav>
|
||||
|
||||
<view class="feedback-content">
|
||||
<view class="hero-row">
|
||||
<image class="hero-illustration" src="/static/images/my/yjfk_top.png" mode="widthFix"></image>
|
||||
<!-- <view class="hero-copy">
|
||||
<view class="hero-title">
|
||||
<text>你的意见对我们很</text>
|
||||
<text class="accent">重要</text>
|
||||
</view>
|
||||
<text class="hero-desc">欢迎提出宝贵的建议</text>
|
||||
<text class="hero-desc">帮助我们做得更好</text>
|
||||
<view class="hero-line"></view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view class="form-card type-card">
|
||||
<view class="card-title">
|
||||
<image class="title-icon type-icon icon-placeholder" src="/static/images/my/image.png" mode="aspectFit"></image>
|
||||
<text>反馈类型</text>
|
||||
<text class="optional">（可多选）</text>
|
||||
</view>
|
||||
<view class="type-grid">
|
||||
<view wx:for="{{types}}" wx:key="key" class="type-chip {{item.active ? 'active' : 'gray'}}"
|
||||
data-key="{{item.key}}" bindtap="handleTypeTap">
|
||||
<image class="type-chip-icon icon-placeholder" src="{{item.icon}}" mode="aspectFit"></image>
|
||||
<text>{{item.label}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-card desc-card">
|
||||
<view class="card-title">
|
||||
<image class="title-icon pen-icon icon-placeholder" src="/static/images/my/edit.png" mode="aspectFit"></image>
|
||||
<text>问题描述</text>
|
||||
</view>
|
||||
<view class="textarea-shell">
|
||||
<textarea class="desc-input" value="{{description}}" maxlength="500" placeholder="请详细描述您遇到的问题或建议…"
|
||||
placeholder-class="placeholder" bindinput="handleDescriptionInput"></textarea>
|
||||
<text class="counter">{{description.length}}/500</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-card image-card">
|
||||
<view class="card-title">
|
||||
<image class="title-icon image-title-icon icon-placeholder" src="/static/images/my/image.png" mode="aspectFit">
|
||||
</image>
|
||||
<text>添加图片</text>
|
||||
<text class="optional">（选填）</text>
|
||||
</view>
|
||||
<view style="display: flex;flex-direction: row;gap: 20;">
|
||||
<view class="upload-box image-full" wx:for="{{datas.images}}" wx:key="index" bindtap="handleUpload">
|
||||
<image class="plus-icon icon-placeholder" src="{{item}}"></image>
|
||||
</view>
|
||||
<view class="upload-box" wx:if="{{datas.images.length < 3}}" bindtap="handleUpload">
|
||||
<image class="plus-icon icon-placeholder" src="/static/images/my/Addimages.png"
|
||||
style="width: 26rpx;height: 26rpx;"></image>
|
||||
<text>上传图片</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="upload-tip">最多可上传 3 张图片</text>
|
||||
</view>
|
||||
|
||||
<view class="form-card contact-card">
|
||||
<view class="card-title">
|
||||
<image class="title-icon phone-icon icon-placeholder" src="/static/images/my/call.png" mode="aspectFit"></image>
|
||||
<text>联系方式</text>
|
||||
<text class="optional">（选填）</text>
|
||||
</view>
|
||||
<input class="contact-input" value="{{contact}}" placeholder="请输入手机号或微信号，方便我们与您联系" placeholder-class="placeholder"
|
||||
bindinput="handleContactInput" />
|
||||
</view>
|
||||
|
||||
<view class="submit-btn" bindtap="handleSubmit">提交反馈</view>
|
||||
<view class="thanks-text">感谢您的反馈，我们会认真对待每一条建议 💜</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,441 @@
|
||||
page {
|
||||
min-height: 100vh;
|
||||
background: #fbfaff;
|
||||
color: #111827;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.feedback-page {
|
||||
width: 750rpx;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(circle at 78% 4%, rgba(137, 95, 255, 0.16), transparent 20%),
|
||||
radial-gradient(circle at 18% 8%, rgba(118, 129, 255, 0.12), transparent 24%),
|
||||
linear-gradient(180deg, #f7f3ff 0%, #fbfaff 48%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.feedback-nav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-back text {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: block;
|
||||
border-left: 5rpx solid #111827;
|
||||
border-bottom: 5rpx solid #111827;
|
||||
transform: rotate(45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 31rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 900;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.record-link {
|
||||
width: 142rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: #111827;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.feedback-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14rpx;
|
||||
padding: 26rpx 38rpx 38rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hero-row {
|
||||
/* min-height: 184rpx; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.hero-illustration {
|
||||
/* width: 250rpx;
|
||||
height: 174rpx; */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.paper {
|
||||
width: 116rpx;
|
||||
height: 126rpx;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14rpx;
|
||||
padding: 30rpx 20rpx 0 34rpx;
|
||||
background: linear-gradient(145deg, #ffffff, #ece5ff);
|
||||
box-shadow: 0 14rpx 24rpx rgba(120, 92, 219, 0.2);
|
||||
transform: rotate(-7deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.paper text {
|
||||
height: 8rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #cfc2ff;
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
width: 114rpx;
|
||||
height: 82rpx;
|
||||
margin-left: -168rpx;
|
||||
margin-top: 44rpx;
|
||||
border-radius: 42rpx 42rpx 42rpx 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
background: linear-gradient(135deg, #9d79ff, #6d4cef);
|
||||
box-shadow: 0 16rpx 24rpx rgba(108, 76, 239, 0.25);
|
||||
}
|
||||
|
||||
.chat-bubble text {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
}
|
||||
|
||||
.pencil {
|
||||
width: 76rpx;
|
||||
height: 22rpx;
|
||||
margin-left: 92rpx;
|
||||
margin-top: -18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(90deg, #7654f7 0 20%, #ffd05e 20% 78%, #ff6b91 78% 100%);
|
||||
transform: rotate(-42deg);
|
||||
}
|
||||
|
||||
.heart {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-right: -40rpx;
|
||||
margin-top: -88rpx;
|
||||
border-radius: 50% 50% 8rpx 50%;
|
||||
background: linear-gradient(135deg, #ff9ec2, #ff679a);
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 0 8rpx 14rpx rgba(255, 105, 154, 0.22);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.25;
|
||||
font-weight: 900;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.accent {
|
||||
color: #744dff;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
margin-top: 14rpx;
|
||||
color: #6c7280;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.hero-line {
|
||||
width: 72rpx;
|
||||
height: 30rpx;
|
||||
margin-top: 8rpx;
|
||||
border-bottom: 5rpx solid #7c57ff;
|
||||
border-radius: 50%;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.form-card {
|
||||
border-radius: 18rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
box-shadow: 0 8rpx 24rpx rgba(84, 91, 148, 0.06);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
color: #111827;
|
||||
font-size: 25rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.optional {
|
||||
color: #8b91a1;
|
||||
font-size: 18rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #7454ff;
|
||||
background: #f3efff;
|
||||
}
|
||||
|
||||
.title-icon text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.type-icon text {
|
||||
width: 17rpx;
|
||||
height: 19rpx;
|
||||
border: 4rpx solid currentColor;
|
||||
border-radius: 5rpx 5rpx 9rpx 9rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pen-icon text {
|
||||
width: 19rpx;
|
||||
height: 19rpx;
|
||||
border-left: 5rpx solid currentColor;
|
||||
border-bottom: 5rpx solid currentColor;
|
||||
transform: rotate(-45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.image-title-icon text {
|
||||
width: 18rpx;
|
||||
height: 16rpx;
|
||||
border: 4rpx solid currentColor;
|
||||
border-radius: 3rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.phone-icon text {
|
||||
width: 18rpx;
|
||||
height: 22rpx;
|
||||
border-left: 5rpx solid currentColor;
|
||||
border-bottom: 5rpx solid currentColor;
|
||||
border-radius: 0 0 0 10rpx;
|
||||
transform: rotate(-25deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.type-grid {
|
||||
margin-top: 22rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.type-chip {
|
||||
height: 56rpx;
|
||||
border-radius: 11rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
color: #737887;
|
||||
font-size: 20rpx;
|
||||
font-weight: 800;
|
||||
background: #f8f8fb;
|
||||
border: 2rpx solid #ececf3;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.type-chip.active {
|
||||
color: #6e4cff;
|
||||
background: #ffffff;
|
||||
border-color: #805cff;
|
||||
filter: hue-rotate(180deg); /* 旋转色相 */
|
||||
filter: sepia(1) saturate(5) hue-rotate(200deg); /* 强制转为暖色调 */
|
||||
}
|
||||
|
||||
.type-chip-icon {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bug-icon {
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid currentColor;
|
||||
}
|
||||
|
||||
.star-icon {
|
||||
border-radius: 5rpx;
|
||||
border: 4rpx solid currentColor;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.message-icon,
|
||||
.more-icon {
|
||||
border: 4rpx solid currentColor;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.desc-card {
|
||||
padding-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.textarea-shell {
|
||||
min-height: 158rpx;
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx 20rpx 34rpx;
|
||||
border-radius: 14rpx;
|
||||
border: 1rpx solid #e4e4eb;
|
||||
background: #fbfbfd;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.desc-input {
|
||||
width: 100%;
|
||||
height: 104rpx;
|
||||
color: #2d3340;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #a2a6b2;
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: #8f94a2;
|
||||
font-size: 18rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.image-card {
|
||||
min-height: 218rpx;
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
width: 106rpx;
|
||||
height: 106rpx;
|
||||
margin-top: 22rpx;
|
||||
border-radius: 13rpx;
|
||||
border: 2rpx dashed #d8d1f8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
/* color: #7a57ff; */
|
||||
font-size: 19rpx;
|
||||
/* font-weight: 700; */
|
||||
margin-right: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.upload-box.image-full image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plus-icon {
|
||||
font-size: 44rpx;
|
||||
line-height: 0.75;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
margin-top: 12rpx;
|
||||
color: #9ca0ad;
|
||||
font-size: 18rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
min-height: 152rpx;
|
||||
}
|
||||
|
||||
.contact-input {
|
||||
height: 54rpx;
|
||||
margin-top: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #e6e6ee;
|
||||
background: #fbfbfd;
|
||||
color: #2d3340;
|
||||
font-size: 21rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
height: 68rpx;
|
||||
margin: 12rpx 14rpx 0;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(180deg, #a45fff 0%, #6d2df1 100%);
|
||||
box-shadow: 0 12rpx 24rpx rgba(111, 48, 241, 0.24);
|
||||
}
|
||||
|
||||
.thanks-text {
|
||||
margin-top: 8rpx;
|
||||
text-align: center;
|
||||
color: #969aa7;
|
||||
font-size: 19rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon-placeholder {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// pages/myPackage/ysxy/index.ts
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1 @@
|
||||
<web-view style="width: 100px;height: 100px;" src="https://veil-chat-audio-speed.zhuangb123.com/ashdas.html"></web-view>
|
||||
@@ -0,0 +1 @@
|
||||
/* pages/myPackage/ysxy/index.wxss */
|
||||
Reference in New Issue
Block a user