charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

添加新文件

Browse Source
This commit is contained in:
hejiangming
2025-05-07 10:09:55 +08:00
parent 007b002b81
commit 7e7a096151
776 changed files with 92603 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/LuckyWheel.vue
+176
View File
@@ -0,0 +1,176 @@
<template>
<view class="turntable-container" :style="{ backgroundColor: bgColor }">
<view class="turntable" :style="turntableStyle" @click="startRotate">
<!-- 奖项区域 -->
<view
v-for="(item, index) in prizes"
:key="index"
class="prize-sector"
:style="getPrizeStyle(index)"
>
<view class="prize-text">{{ item.name }}</view>
</view>
<!-- 装饰点 -->
<view
v-for="(item, index) in prizes"
:key="'dot'+index"
class="decorative-dot"
:style="getDotStyle(index)"
/>
<!-- 中心指针 -->
<view class="center-pointer" />
</view>
<button @click="startRotate">开始抽奖</button>
</view>
</template>
<script>
export default {
props: {
prizes: {
type: Array,
default: () => [
{ name: "一等奖", color: "#FF4444" },
{ name: "二等奖", color: "#66CC33" },
{ name: "三等奖", color: "#44AAFF" },
{ name: "谢谢参与", color: "#CCCCCC" }
]
},
bgColor: {
type: String,
default: "#F0F0F0"
},
turntableColor: {
type: String,
default: "#FFFFFF"
}
},
data() {
return {
isRotating: false,
currentRotation: 0
}
},
computed: {
turntableStyle() {
return {
transform: `rotate(${this.currentRotation}deg)`,
backgroundColor: this.turntableColor
}
}
},
methods: {
getPrizeStyle(index) {
const total = this.prizes.length
const angle = 360 / total
return {
clipPath: `polygon(50% 0%, 100% 0, 100% ${100 * (index + 1) / total}%, 50% 100%, 0 ${100 * index / total}%, 0 0)`,
backgroundColor: this.prizes[index].color
}
},
getDotStyle(index) {
const total = this.prizes.length
const angle = (360 / total) * index
return {
transform: `rotate(${angle}deg) translateX(70%)`,
backgroundColor: this.prizes[index].color
}
},
async startRotate() {
if (this.isRotating) return
this.isRotating = true
const targetIndex = Math.floor(Math.random() * this.prizes.length)
const targetRotation = this.currentRotation + 360 * 5 + (360 / this.prizes.length) * targetIndex
await this.$nextTick()
this.currentRotation = targetRotation
setTimeout(() => {
this.isRotating = false
this.$emit('result', this.prizes[targetIndex])
}, 3000)
}
}
}
</script>
<style scoped lang="scss">
.turntable-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border-radius: 20px;
}
.turntable {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
transition: transform 3s ease-out;
overflow: hidden;
cursor: pointer;
}
.prize-sector {
position: absolute;
width: 50%;
height: 50%;
left: 50%;
top: 0;
transform-origin: left bottom;
display: flex;
align-items: center;
justify-content: center;
}
.prize-text {
transform: rotate(45deg);
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.decorative-dot {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
top: 10%;
left: 50%;
}
.center-pointer {
position: absolute;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 40px solid #333;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #44AAFF;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #3399FF;
}
</style>
components/common_card.vue
+162
View File
@@ -0,0 +1,162 @@
<template>
<view class="data_common_warp">
<view class="ID_card_title">上传证件照</view>
<view class="ID_card_msg">（请务必上传本人证件照，生活照、艺术照将会被驳回）</view>
<view class="ID_card_upload">
<view class="upload_item" @click="phoneFun('Z')">
<up-image :src="fileListZ && Object.keys(fileListZ).length !==0 ? fileListZ.accessUrl : '/static/common/ID_rx.png'" width="100%" height="90" bgColor="#f1f6ff00"></up-image>
<view class="upload_msg">点击上传身份证人像面</view>
</view>
<view class="upload_item" @click="phoneFun('F')">
<up-image :src="fileListF && Object.keys(fileListF).length !==0 ? fileListF.accessUrl : '/static/common/ID_gq.png'" width="100%" height="90" bgColor="#f1f6ff00"></up-image>
<view class="upload_msg">点击上传身份国旗面</view>
</view>
</view>
<view class="ID_card_upload_templ">
<view class="templ_title">上传标准</view>
<view class="templ_img_list">
<view class="templ_img_item" v-for="item in uploadTemplList" :key="item.id">
<up-image :src="item.url" width="100%" height="50" bgColor="#f1f6ff00"></up-image>
<view class="templ_img_item_msg">
<up-image :src="item.isOk ? '/static/common/ID_ok_1.png' :'/static/common/ID_error.png'" width="10" height="10" bgColor="#f1f6ff00"></up-image>
<view class="templ_img_item_msg_title">{{item.title}}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { uploadImage,uploadImg } from '@/api/common.js';
import { IMG_TYPE } from '@/utils/enumUtils.js';
import { BASE_URL,Authorization } from '@/utils/config.js';
import {getStorageFun,TOKEN_NAME} from '@/utils/auth.js';
export default {
name:"common_card",
data() {
return {
uploadTemplList:[
{
id:1,
title:"标准",
isOk:true,
url:"/static/common/ID_ok.png",
},{
id:2,
title:"边框缺失",
isOk:false,
url:"/static/common/ID_error_1.png",
},{
id:3,
title:"照片模糊",
isOk:false,
url:"/static/common/ID_error_2.png",
},{
id:4,
title:"闪光强烈",
isOk:false,
url:"/static/common/ID_error_3.png",
}
],
fileListZ:{},// 身份正面照
fileListF:{},// 身份反面照片
};
},
methods: {
deletePic(event){
this.fileListZ.splice(event.index, 1);
},
phoneFun(type){
let that = this;
/*#ifdef MP*/
uni.chooseMedia({
count: 1, // 默认为1，摄像头拍照为1，录像为10，录音为1
mediaType: ['image'], // 可以指定是摄像头还是录像，这里两者都支持
sourceType: ['camera'], // 可以指定来源是相册还是相机，这里只选相机
camera: 'back', // 可以指定使用前置还是后置摄像头，默认后置
success: (imgRes) => {
// 成功则返回文件的本地临时文件路径
const filePath = imgRes.tempFiles[0].tempFilePath; // 获取文件路径
that.uploadFile(filePath,type);
},
fail: (err) => {
// 处理错误
console.error(err);
}
});
/*#endif*/
/*#ifdef APP-PLUS*/
uni.chooseImage({
count: 1, // 默认9，设置图片的数量
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 成功选择图片后
const filePath = res.tempFilePaths[0]; // 获取文件路径
that.uploadFile(filePath,type);
}
});
/*#endif*/
},
uploadFile(url,type){
uni.showLoading({
title: '图片上传中...',
})
const that = this;
const token = getStorageFun(TOKEN_NAME); // 获取token, 根据实际情况调整获取方式
// 成功则返回文件的本地临时文件路径
uni.uploadFile({
url: BASE_URL+uploadImg, // 替换为你的上传接口URL
filePath:url,
name: 'file',
formData: {
'type': IMG_TYPE.COMMON,
},
header:{
"Authorization":Authorization,
'HSM-AUTH': token ? token : '',
},
success: (uploadFileRes) => {
const data = JSON.parse(uploadFileRes.data);
if(data.bizcode === 100){
if(type === "Z"){
that.fileListZ =data.data;
this.$emit("valueFunc", "Z", data.data.dbUrl);
}else if(type === "F"){
that.fileListF=data.data;
this.$emit("valueFunc", "F", data.data.dbUrl);
}
}else{
uni.showToast({
title: '图片上传失败',
icon: 'none',
mask: true,
duration:3000,
})
}
},
fail: (uploadFileErr) => {
uni.showToast({
title: '图片上传失败',
icon: 'none',
mask: true,
duration:3000,
})
},
complete: (res) => {
// 请求完成以后做一些事情
uni.hideLoading();
}
});
}
}
}
</script>
<style>
</style>
components/custom-tab-bar.vue
+89
View File
@@ -0,0 +1,89 @@
<template>
<view class="custom-tab-bar">
<view v-for="(item, index) in tabs" :key="index" class="tab-item" @click="switchTab(index)">
<image :src="tabIndex === index ? item.selectedIconPath:item.iconPath" class="tab-icon"></image>
<text :class="tabIndex === index ? 'tab-text tab-text-sel':'tab-text'">{{ item.text }}</text>
</view>
</view>
</template>
<script>
export default {
name:"custom-tab-bar",
props: {
tabIndex: { //当前选中的tab项
type: Number,
default: 0
}
},
data() {
return {
tabs: [
{
"pagePath": "/pages/home/home",
"text": "首页",
"iconPath": "/static/column/home.png",
"selectedIconPath": "/static/column/home_sel.png"
},
{
"pagePath": "/pages/sort/sort",
"text": "分类",
"iconPath": "/static/column/sort.png",
"selectedIconPath": "/static/column/sort_sel.png"
},
// {
// "pagePath": "/pages/hash_union/hash_union",
// "text": "哈希联盟",
// "iconPath": "/static/column/hx.png",
// "selectedIconPath": "/static/column/hx_sel.png"
// },
{
"pagePath": "/pages/shopping_cart/shopping_cart",
"text": "购物车",
"iconPath": "/static/column/shopping.png",
"selectedIconPath": "/static/column/shopping_sel.png"
}, {
"pagePath": "/pages/mine/mine",
"text": "我的",
"iconPath": "/static/column/mine.png",
"selectedIconPath": "/static/column/mine_sel.png"
}
]
};
},
methods: {
switchTab(index) {
const pagePath = this.tabs[index].pagePath;
uni.switchTab({ url: pagePath });
}
}
}
</script>
<style lang="scss" scoped>
.custom-tab-bar {
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
height: 140rpx; /* 根据需要调整 */
background-color: #fff; /* 背景颜色 */
bottom: 0;
width: 100%;
}
.tab-item {
display: flex;
flex-direction: column;
align-items: center;
}
.tab-icon {
width: 24px; /* 图标大小 */
height: 24px; /* 图标大小 */
}
.tab-text {
font-size: 12px; /* 文字大小 */
}
.tab-text-sel {
color: $app-bt-bj;
}
</style>
components/header.vue
+96
View File
@@ -0,0 +1,96 @@
<template>
<!-- 导航栏 -->
<view class="header_" >
<view style="margin-top: 10rpx;" @click="leftJump">
<up-image src="/static/common/left.png" width="18" height="20" bgColor="#f1f6ff00" @click="jumpMine"/>
</view>
<view class="title_">{{leftTitle}}</view>
<view @click="rightJump">{{rightTitle}}</view>
</view>
</template>
<script>
export default {
name:"header",
props: {
leftTitle:{
type: String,
default: null
},
leftPath:{
type: String,
default: null
},
leftPathType:{
type: String,
default: "navigateTo"
},
rightTitle:{
type: String,
default: null
},
rightPath:{
type: String,
default: null
},
rightPathType:{
type: String,
default: "navigateTo"
},
},
data() {
return {
};
},
methods: {
leftJump() {
const leftPath = this.leftPath;
if(!leftPath){
return;
}
const leftPathType = this.leftPathType;
if(leftPathType === "navigateTo"){
uni.navigateTo({
url:leftPath,
})
}else if(leftPathType === "switchTab"){
uni.switchTab({
url: leftPath,
});
}
},
rightJump() {
const rightPath = this.rightPath;
if(!rightPath){
return;
}
const rightPathType = this.rightPathType;
if(rightPathType === "navigateTo"){
uni.navigateTo({
url:rightPath,
})
}else if(rightPathType === "switchTab"){
uni.switchTab({
url: rightPath,
});
}
},
}
}
</script>
<style lang="scss" scoped>
.header_{
display: flex;
align-items: center;
justify-content: space-between;
padding: 74rpx 20rpx 20rpx;
.title_{
// font-weight: bold;
font-size: 36rpx;
color: #000000;
margin-left: 20rpx;
}
}
</style>
components/winning_record.vue
+172
View File
@@ -0,0 +1,172 @@
<template>
<!-- <up-loading-page :loading="listLoading"></up-loading-page> -->
<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="{'height': heightRef}">
<view class="prize_draw_item" v-for="item in prizeDrawList" :key="item.id" v-if="prizeDrawList && prizeDrawList.length!==0">
<view class="prize_draw_left_warp">
<up-image :src="item.iconUrl ? item.iconUrl :'/static/mine/zj_f.jpg'" width="60" height="60" bgColor="#f1f6ff00"></up-image>
<view style="margin-left: 20rpx;">
<view class="title_">{{item.prizeName}}</view>
<view class="time_">{{formatDate(item.ctdate)}}</view>
<view
class="delivery_"
v-if="[DELIVER_STATUS.AWAIT_DELIVERY_REQUIRED,DELIVER_STATUS.YES_DELIVERY_REQUIRED,DELIVER_STATUS.RECEIVED].includes(item.deliveryStatus)"
>
<view class="delivery_status">{{getValue(DELIVER_STATUS_,item.deliveryStatus)}}</view>
<view class="delivery_num" v-if="item.deliveryNum">
<text style="margin-right: 10rpx;">运单号：{{ item.deliveryNum}}</text>
<up-image src="/static/common/copy.png" width="10" height="10" bgColor="#f1f6ff00" @click="copyData(item.deliveryNum)"></up-image>
</view>
<view class="delivery_num" v-else>运单号：暂无</view>
</view>
</view>
</view>
<view class="prize_draw_right_warp" v-if="item.type === 4" v-show="item.status === 1" @click="jumpGetFun(item)">去领取</view>
<view class="prize_draw_right_warp yes_" v-if="item.type === 4" v-show="item.status === 2">已领取</view>
</view>
<view v-else class="not_order_warp">
<up-image src="/static/common/not_order.png" width="80" height="80" bgColor="#f1f6ff00"></up-image>
<view class="not_order_msg_warp">还未中奖哦～</view>
</view>
<view v-if="loading" style="text-align: center;">加载中...</view>
</scroll-view>
</template>
<script>
import { getWinningList } from '@/api/raffle.js';
import { formatDate,copyData } from '@/utils/index.js';
import { DELIVER_STATUS,DELIVER_STATUS_,getValue } from '@/utils/enumUtils.js'
export default {
name:"winning_record",
props: {
heightRef: { //当前选中的tab项
type: Number,
default: 'calc(100vh - 100rpx)'
}
},
computed: {
DELIVER_STATUS() {
return DELIVER_STATUS;
},
DELIVER_STATUS_(){
return DELIVER_STATUS_;
}
},
data() {
return {
prizeDrawList:[],// 抽奖列表
form:{
status:'',
page:1,
pageSize:20,
},
loading: false, // 加载状态标志
};
},
mounted(){
// this.jumpMine();
this.loadData(); // 页面加载时加载数据
},
methods: {
formatDate,
copyData,
getValue,
jumpGetFun(item){
uni.navigateTo({
url:'/pages/get_prize/get_prize?id='+item.id,
})
},
// 加载数据的方法
async loadData() {
if (this.loading) return; // 如果正在加载，则不重复加载
this.loading = true; // 设置加载状态为true
try {
// 模拟异步获取数据，实际应用中应该替换为你的数据获取逻辑，例如API调用
const newData = await this.fetchData(this.form.page, this.form.pageSize);
if(newData.entitys && newData.entitys.length !==0){
this.prizeDrawList = [...this.prizeDrawList, ...newData.entitys]; // 将新数据添加到列表中
this.form.page++; // 页码加1
}
} catch (error) {
console.error('加载数据失败:', error);
} finally {
this.loading = false; // 设置加载状态为false
}
},
// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
async fetchData(page, pageSize) {
const params = {
page,
pageSize,
}
const data = await getWinningList(params);
if(data && data.bizcode === 100){
return data.data
}else{
return [];
}
},
// 当滚动到底部时触发的方法
loadMore() {
this.loadData(); // 加载更多数据
}
}
}
</script>
<style lang="scss" scoped>
.prize_draw_warp{
}
.prize_draw_item{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
border-bottom: 1rpx solid #EEEEEE;
}
.prize_draw_left_warp{
display: flex;
align-items: center;
}
.title_{
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
.time_{
font-size: 24rpx;
color: #666666;
margin-top: 10rpx;
}
.delivery_{
display: flex;
align-items: center;
font-size: 20rpx;
margin-top: 10rpx;
.delivery_status{
padding: 6rpx 10rpx;
border-radius: 10rpx;
color: $app-bt-bj;
border: 1rpx solid $app-bt-bj;
}
.delivery_num{
margin-left: 10rpx;
display: flex;
align-items: center;
}
}
.prize_draw_right_warp{
background: $app-bt-bj;
border-radius: 10rpx;
text-align: center;
color: #FFFFFF;
padding: 10rpx 28rpx;
height: 48rpx;
}
.yes_{
background: #F5F5F5;
color: #666666;
}
</style>