1
This commit is contained in:
Vendored
BIN
Binary file not shown.
+175
-175
@@ -1,176 +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;
|
||||
}
|
||||
<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>
|
||||
+73
-73
@@ -1,91 +1,91 @@
|
||||
<template>
|
||||
<view class="mine_address_warp">
|
||||
<view
|
||||
v-for="item in addressList"
|
||||
:key="item.id"
|
||||
:class="selectAddress && selectAddress.id === item.id?'address_item address_item_sel':'address_item'"
|
||||
v-if="addressList && addressList.length !==0"
|
||||
@click="checkAddress(item)"
|
||||
>
|
||||
<view class="address_item_country_name">
|
||||
{{item.countryName}} {{item.provinceName}} {{item.cityName}} {{item.areaName}}
|
||||
</view>
|
||||
<view class="address_item_address">
|
||||
{{item.address}}
|
||||
</view>
|
||||
<view class="address_item_info">
|
||||
<view>{{item.name}}</view>
|
||||
<view style="margin-left: 20rpx;">{{item.phone}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="not_order_warp">
|
||||
<view class="not_order_warp_img"><up-image src="/static/common/not_search.png" width="100" height="100" bgColor="#f1f6ff00"></up-image></view>
|
||||
<view class="not_order_msg_warp">暂时地址，快去地址管理添加吧~</view>
|
||||
</view>
|
||||
<view
|
||||
v-for="item in addressList"
|
||||
:key="item.id"
|
||||
:class="selectAddress && selectAddress.id === item.id?'address_item address_item_sel':'address_item'"
|
||||
v-if="addressList && addressList.length !==0"
|
||||
@click="checkAddress(item)"
|
||||
>
|
||||
<view class="address_item_country_name">
|
||||
{{item.countryName}} {{item.provinceName}} {{item.cityName}} {{item.areaName}}
|
||||
</view>
|
||||
<view class="address_item_address">
|
||||
{{item.address}}
|
||||
</view>
|
||||
<view class="address_item_info">
|
||||
<view>{{item.name}}</view>
|
||||
<view style="margin-left: 20rpx;">{{item.phone}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="not_order_warp">
|
||||
<view class="not_order_warp_img"><up-image src="/static/common/not_search.png" width="100" height="100" bgColor="#f1f6ff00"></up-image></view>
|
||||
<view class="not_order_msg_warp">暂时地址，快去地址管理添加吧~</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAddress,setAddressDefault,deleteAddress } from '@/api/address.js';
|
||||
<script>
|
||||
import { getAddress,setAddressDefault,deleteAddress } from '@/api/address.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
addressList:[],
|
||||
addressList:[],
|
||||
selectAddress:{},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getAddressList();
|
||||
},
|
||||
mounted() {
|
||||
this.getAddressList();
|
||||
},
|
||||
methods: {
|
||||
// 添加地址
|
||||
jumpAddAddress(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/mine_address_add/mine_address_add',
|
||||
})
|
||||
},
|
||||
// 查询地址
|
||||
async getAddressList(){
|
||||
const res = await getAddress();
|
||||
if(res && res.bizcode === 100){
|
||||
this.addressList = res.data;
|
||||
}
|
||||
},
|
||||
checkAddress(item){
|
||||
this.selectAddress = item;
|
||||
this.$emit("valueFunc", item);
|
||||
},
|
||||
methods: {
|
||||
// 添加地址
|
||||
jumpAddAddress(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/mine_address_add/mine_address_add',
|
||||
})
|
||||
},
|
||||
// 查询地址
|
||||
async getAddressList(){
|
||||
const res = await getAddress();
|
||||
if(res && res.bizcode === 100){
|
||||
this.addressList = res.data;
|
||||
}
|
||||
},
|
||||
checkAddress(item){
|
||||
this.selectAddress = item;
|
||||
this.$emit("valueFunc", item);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.mine_address_warp{
|
||||
}
|
||||
.address_item{
|
||||
background: #FFFFFF;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #9e9e9e26;
|
||||
}
|
||||
.address_item_sel{
|
||||
color: $app-bt-bj !important;
|
||||
background-color: #ff57220d;
|
||||
}
|
||||
.address_item_info{
|
||||
font-size: 26rpx;
|
||||
color: #868383;
|
||||
display: flex;
|
||||
}
|
||||
.address_item_address{
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
.address_item_country_name{
|
||||
color: #9E9E9E;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.mine_address_warp{
|
||||
}
|
||||
.address_item{
|
||||
background: #FFFFFF;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #9e9e9e26;
|
||||
}
|
||||
.address_item_sel{
|
||||
color: $app-bt-bj !important;
|
||||
background-color: #ff57220d;
|
||||
}
|
||||
.address_item_info{
|
||||
font-size: 26rpx;
|
||||
color: #868383;
|
||||
display: flex;
|
||||
}
|
||||
.address_item_address{
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
.address_item_country_name{
|
||||
color: #9E9E9E;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,106 +1,106 @@
|
||||
<template>
|
||||
<view class="choiceness_warp">
|
||||
<view class="choiceness_title">
|
||||
<up-image src="/static/common/jingxuan_left.png" width="24" height="8" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="choiceness_title_msg">为您精选</view>
|
||||
<up-image src="/static/common/jingxuan_right.png" width="24" height="8" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
<view class="choiceness_product">
|
||||
<view v-for="item in productList" :key="item.id" class="choiceness_product_item" @click="jumpInfo(item)">
|
||||
<up-image :src="item.url" width="100%" height="140" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="product_item_name">{{item.title}}</view>
|
||||
<view class="product_item_price">
|
||||
<view class="price_">
|
||||
<text>￥</text>
|
||||
<text style="color:36rpx;">{{item.adPrice}}</text>
|
||||
</view>
|
||||
<view class="price_sell">已售{{item.sales}}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { searchList } from '@/api/product.js';
|
||||
|
||||
export default {
|
||||
name:"choiceness",
|
||||
data() {
|
||||
return {
|
||||
productList:[]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getSearchList();
|
||||
},
|
||||
methods: {
|
||||
//
|
||||
jumpInfo(item){
|
||||
uni.navigateTo({
|
||||
url: '/pages/productInfo/productInfo?id='+item.id,
|
||||
})
|
||||
},
|
||||
async getSearchList(){
|
||||
const params={
|
||||
isRecomm:true,
|
||||
page:1,
|
||||
pageSize:66,
|
||||
}
|
||||
const resp = await searchList(params);
|
||||
if(resp && resp.bizcode === 100){
|
||||
this.productList = resp.data
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.choiceness_warp{
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
.choiceness_title{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.choiceness_title_msg{
|
||||
margin: 0 18rpx;
|
||||
}
|
||||
}
|
||||
.choiceness_product{
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.choiceness_product_item{
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 10rpx 0rpx #EEEEEE;
|
||||
border-radius: 24rpx;
|
||||
width: 43%;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
.product_item_name{
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.product_item_price{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
.price_{
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: $app-bt-bj;
|
||||
}
|
||||
.price_sell{
|
||||
font-weight: 400;
|
||||
font-size: 18rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view class="choiceness_warp">
|
||||
<view class="choiceness_title">
|
||||
<up-image src="/static/common/jingxuan_left.png" width="24" height="8" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="choiceness_title_msg">为您精选</view>
|
||||
<up-image src="/static/common/jingxuan_right.png" width="24" height="8" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
<view class="choiceness_product">
|
||||
<view v-for="item in productList" :key="item.id" class="choiceness_product_item" @click="jumpInfo(item)">
|
||||
<up-image :src="item.url" width="100%" height="140" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="product_item_name">{{item.title}}</view>
|
||||
<view class="product_item_price">
|
||||
<view class="price_">
|
||||
<text>￥</text>
|
||||
<text style="color:36rpx;">{{item.adPrice}}</text>
|
||||
</view>
|
||||
<view class="price_sell">已售{{item.sales}}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { searchList } from '@/api/product.js';
|
||||
|
||||
export default {
|
||||
name:"choiceness",
|
||||
data() {
|
||||
return {
|
||||
productList:[]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getSearchList();
|
||||
},
|
||||
methods: {
|
||||
//
|
||||
jumpInfo(item){
|
||||
uni.navigateTo({
|
||||
url: '/pages/productInfo/productInfo?id='+item.id,
|
||||
})
|
||||
},
|
||||
async getSearchList(){
|
||||
const params={
|
||||
isRecomm:true,
|
||||
page:1,
|
||||
pageSize:66,
|
||||
}
|
||||
const resp = await searchList(params);
|
||||
if(resp && resp.bizcode === 100){
|
||||
this.productList = resp.data
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.choiceness_warp{
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
.choiceness_title{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.choiceness_title_msg{
|
||||
margin: 0 18rpx;
|
||||
}
|
||||
}
|
||||
.choiceness_product{
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.choiceness_product_item{
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 10rpx 0rpx #EEEEEE;
|
||||
border-radius: 24rpx;
|
||||
width: 43%;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
.product_item_name{
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.product_item_price{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
.price_{
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: $app-bt-bj;
|
||||
}
|
||||
.price_sell{
|
||||
font-weight: 400;
|
||||
font-size: 18rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,105 +1,105 @@
|
||||
<template>
|
||||
<view class="comm-input-warp">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<input
|
||||
:placeholder="$t('login.comm.code')"
|
||||
border="false"
|
||||
:v-model="modelValue"
|
||||
color="#EEEEEE"
|
||||
type="number"
|
||||
@input="$emit('update:modelValue', $event.detail.value)"
|
||||
style="height: 64rpx;width: 70%;"
|
||||
></input>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<input
|
||||
:placeholder="$t('login.comm.code')"
|
||||
border="false"
|
||||
:v-model="modelValue"
|
||||
color="#EEEEEE"
|
||||
type="number"
|
||||
@input="$emit('update:modelValue', $event.target.value)"
|
||||
style="height: 64rpx;width: 70%;"
|
||||
></input>
|
||||
<!-- #endif -->
|
||||
<view class="code-warp" v-if="countdown">
|
||||
<up-count-down :time="60 * 1000" format="ss" @finish="getCode(false)"></up-count-down>
|
||||
<text style="margin-left: 10rpx;">s</text>
|
||||
<!-- <text style="margin-left: 10rpx;">{{$t('login.comm.reacquire.code')}}</text> -->
|
||||
</view>
|
||||
<view v-else class="code-warp" @click="getCode(true)">
|
||||
<view>{{$t('login.comm.get.code')}}</view>
|
||||
</view>
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
<template>
|
||||
<view class="comm-input-warp">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<input
|
||||
:placeholder="$t('login.comm.code')"
|
||||
border="false"
|
||||
:v-model="modelValue"
|
||||
color="#EEEEEE"
|
||||
type="number"
|
||||
@input="$emit('update:modelValue', $event.detail.value)"
|
||||
style="height: 64rpx;width: 70%;"
|
||||
></input>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<input
|
||||
:placeholder="$t('login.comm.code')"
|
||||
border="false"
|
||||
:v-model="modelValue"
|
||||
color="#EEEEEE"
|
||||
type="number"
|
||||
@input="$emit('update:modelValue', $event.target.value)"
|
||||
style="height: 64rpx;width: 70%;"
|
||||
></input>
|
||||
<!-- #endif -->
|
||||
<view class="code-warp" v-if="countdown">
|
||||
<up-count-down :time="60 * 1000" format="ss" @finish="getCode(false)"></up-count-down>
|
||||
<text style="margin-left: 10rpx;">s</text>
|
||||
<!-- <text style="margin-left: 10rpx;">{{$t('login.comm.reacquire.code')}}</text> -->
|
||||
</view>
|
||||
<view v-else class="code-warp" @click="getCode(true)">
|
||||
<view>{{$t('login.comm.get.code')}}</view>
|
||||
</view>
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const uCodeRef = ref(null);
|
||||
|
||||
export default {
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const uCodeRef = ref(null);
|
||||
|
||||
export default {
|
||||
name: 'inputComm',
|
||||
props: ['modelValue','codeNumberRef','emptyCountdownRef'],
|
||||
watch: {
|
||||
emptyCountdownRef(value,oldValue) {
|
||||
if(value){
|
||||
this.countdown = true;
|
||||
}
|
||||
},
|
||||
props: ['modelValue','codeNumberRef','emptyCountdownRef'],
|
||||
watch: {
|
||||
emptyCountdownRef(value,oldValue) {
|
||||
if(value){
|
||||
this.countdown = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
countdown:false,
|
||||
emptyCountdown:this.emptyCountdownRef,
|
||||
inputCss:{
|
||||
"height":'80rpx',
|
||||
"background": "#F3F3F3FF",
|
||||
"border-radius": "30rpx",
|
||||
"border": "0rpx",
|
||||
"padding-left": "16px",
|
||||
},
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
getCode(val){
|
||||
const emptyCountdown = this.emptyCountdown;
|
||||
if(val){
|
||||
const codeNumber = this.codeNumberRef;
|
||||
if(codeNumber){
|
||||
this.$emit('getCode');
|
||||
}else{
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: this.$t('login.comm.email'),
|
||||
});
|
||||
return;
|
||||
}
|
||||
}else{
|
||||
// uni.dialog.showMessage('请输入邮箱');
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: this.$t('login.comm.email'),
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
countdown:false,
|
||||
emptyCountdown:this.emptyCountdownRef,
|
||||
inputCss:{
|
||||
"height":'80rpx',
|
||||
"background": "#F3F3F3FF",
|
||||
"border-radius": "30rpx",
|
||||
"border": "0rpx",
|
||||
"padding-left": "16px",
|
||||
},
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
getCode(val){
|
||||
const emptyCountdown = this.emptyCountdown;
|
||||
if(val){
|
||||
const codeNumber = this.codeNumberRef;
|
||||
if(codeNumber){
|
||||
this.$emit('getCode');
|
||||
}else{
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: this.$t('login.comm.email'),
|
||||
});
|
||||
return;
|
||||
}
|
||||
}else{
|
||||
// uni.dialog.showMessage('请输入邮箱');
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: this.$t('login.comm.email'),
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.code-warp{
|
||||
width: 30%;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
<style lang="less" scoped>
|
||||
.code-warp{
|
||||
width: 30%;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
</style>
|
||||
+161
-161
@@ -1,162 +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>
|
||||
|
||||
<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>
|
||||
@@ -1,95 +1,95 @@
|
||||
<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/supply_chain/supply_chain",
|
||||
"text": "供应链",
|
||||
"iconPath": "/static/column/supply_chain.png",
|
||||
"selectedIconPath": "/static/column/supply_chain_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;
|
||||
}
|
||||
<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/supply_chain/supply_chain",
|
||||
"text": "供应链",
|
||||
"iconPath": "/static/column/supply_chain.png",
|
||||
"selectedIconPath": "/static/column/supply_chain_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>
|
||||
+84
-95
@@ -1,96 +1,85 @@
|
||||
<template>
|
||||
<!-- 导航栏 -->
|
||||
<view class="header_" >
|
||||
<view style="margin-top: 20rpx;" @click="leftJump">
|
||||
<up-image src="/static/common/left.png" width="18" height="20" bgColor="#f1f6ff00"/>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<!-- 导航栏 -->
|
||||
<view class="header_" >
|
||||
<view style="margin-top: 20rpx;" @click="leftJump">
|
||||
<up-image src="/static/common/left.png" width="18" height="20" bgColor="#f1f6ff00"/>
|
||||
</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>
|
||||
|
||||
</style>
|
||||
@@ -1,124 +1,124 @@
|
||||
V3+ts专属版
|
||||
|
||||
非固定图片式转盘，可自定义传入奖项列表
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认 |
|
||||
| ------ | ----------- | ---------- | --- |
|
||||
| list | 奖项列表 | listItem[] | [] |
|
||||
| radius | 圆盘半径打，单位rpx | number | 300 |
|
||||
| speed | 转速 | number | 20 |
|
||||
|
||||
### listItem
|
||||
|
||||
| 属性 | 说明 | 类型 |
|
||||
| --------- | -------------- | ------ |
|
||||
| title | 奖项标题 | string |
|
||||
| color | 奖项标题颜色 | string |
|
||||
| size | 奖项标题字号大小，单位rpx | string |
|
||||
| bgColor | 奖项区背景色 | string |
|
||||
| image | 奖项图片地址 | string |
|
||||
| imageSize | 奖项图片尺寸，单位rpx | string |
|
||||
|
||||
## Events
|
||||
|
||||
| Events | 说明 |
|
||||
| ------ | -------- |
|
||||
| start | 点击中心按钮触发 |
|
||||
| end | 结束滚动 |
|
||||
|
||||
## 方法
|
||||
|
||||
通过ref调用
|
||||
|
||||
| 方法名 | 说明 |
|
||||
| ----- | -------------------- |
|
||||
| begin | 开始转动 |
|
||||
| stop | 准备停止转动，参数为中奖序号，从1开始算 |
|
||||
|
||||
## 示例
|
||||
|
||||
```html
|
||||
<template>
|
||||
V3+ts专属版
|
||||
|
||||
非固定图片式转盘，可自定义传入奖项列表
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认 |
|
||||
| ------ | ----------- | ---------- | --- |
|
||||
| list | 奖项列表 | listItem[] | [] |
|
||||
| radius | 圆盘半径打，单位rpx | number | 300 |
|
||||
| speed | 转速 | number | 20 |
|
||||
|
||||
### listItem
|
||||
|
||||
| 属性 | 说明 | 类型 |
|
||||
| --------- | -------------- | ------ |
|
||||
| title | 奖项标题 | string |
|
||||
| color | 奖项标题颜色 | string |
|
||||
| size | 奖项标题字号大小，单位rpx | string |
|
||||
| bgColor | 奖项区背景色 | string |
|
||||
| image | 奖项图片地址 | string |
|
||||
| imageSize | 奖项图片尺寸，单位rpx | string |
|
||||
|
||||
## Events
|
||||
|
||||
| Events | 说明 |
|
||||
| ------ | -------- |
|
||||
| start | 点击中心按钮触发 |
|
||||
| end | 结束滚动 |
|
||||
|
||||
## 方法
|
||||
|
||||
通过ref调用
|
||||
|
||||
| 方法名 | 说明 |
|
||||
| ----- | -------------------- |
|
||||
| begin | 开始转动 |
|
||||
| stop | 准备停止转动，参数为中奖序号，从1开始算 |
|
||||
|
||||
## 示例
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="rotary-table">
|
||||
<mosowe-rotary-table
|
||||
ref="rotaryTableRef"
|
||||
:list="list"
|
||||
:radius="300"
|
||||
@start="start"
|
||||
@end="end"></mosowe-rotary-table>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
const list = [
|
||||
{
|
||||
title: '一等奖',
|
||||
bgColor: '#ff0000',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
},
|
||||
{
|
||||
title: '二等奖',
|
||||
bgColor: '#E6A23C',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
bgColor: '#67C23A',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg',
|
||||
imageSize: '120rpx'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
},
|
||||
{
|
||||
title: '安慰奖',
|
||||
bgColor: '#409EFF',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
}
|
||||
];
|
||||
const rotaryTableRef = ref<any>(null);
|
||||
// 点击中心抽奖按钮
|
||||
const start = () => {
|
||||
rotaryTableRef.value?.begin(); // 开始转
|
||||
// ...中间请求下接口，查询中奖序号
|
||||
setTimeout(() => {
|
||||
// 准备结束转动，参数数字代表中奖项，即list列表的第几个，从1开始算
|
||||
rotaryTableRef.value?.stop(3);
|
||||
}, 1000);
|
||||
};
|
||||
// 转盘停止转动
|
||||
const end = () => {
|
||||
uni.showToast({
|
||||
title: '66666666'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
```
|
||||
@end="end"></mosowe-rotary-table>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
const list = [
|
||||
{
|
||||
title: '一等奖',
|
||||
bgColor: '#ff0000',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
},
|
||||
{
|
||||
title: '二等奖',
|
||||
bgColor: '#E6A23C',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
bgColor: '#67C23A',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg',
|
||||
imageSize: '120rpx'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
},
|
||||
{
|
||||
title: '安慰奖',
|
||||
bgColor: '#409EFF',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
}
|
||||
];
|
||||
const rotaryTableRef = ref<any>(null);
|
||||
// 点击中心抽奖按钮
|
||||
const start = () => {
|
||||
rotaryTableRef.value?.begin(); // 开始转
|
||||
// ...中间请求下接口，查询中奖序号
|
||||
setTimeout(() => {
|
||||
// 准备结束转动，参数数字代表中奖项，即list列表的第几个，从1开始算
|
||||
rotaryTableRef.value?.stop(3);
|
||||
}, 1000);
|
||||
};
|
||||
// 转盘停止转动
|
||||
const end = () => {
|
||||
uni.showToast({
|
||||
title: '66666666'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
+171
-171
@@ -1,172 +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;
|
||||
}
|
||||
<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>
|
||||
Reference in New Issue
Block a user