增加新模块
This commit is contained in:
何江明
@@ -0,0 +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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAddress,setAddressDefault,deleteAddress } from '@/api/address.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
addressList:[],
|
||||
selectAddress:{},
|
||||
}
|
||||
},
|
||||
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);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<view class="choiceness_warp">
|
||||
<view class="choiceness_title">
|
||||
<up-image src="/static/common/jingxuan_left.png" width="50" height="12" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="choiceness_title_msg">为您精选</view>
|
||||
<up-image src="/static/common/jingxuan_right.png" width="50" height="12" 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.name}}</view>
|
||||
<view class="product_item_price">
|
||||
<view class="price_">
|
||||
<text>￥</text>
|
||||
<text style="color:36rpx;">{{item.price}}</text>
|
||||
<text>{{item.priceDouble}}</text>
|
||||
</view>
|
||||
<view class="price_sell">已售{{item.sell}}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"choiceness",
|
||||
data() {
|
||||
return {
|
||||
productList:[
|
||||
{
|
||||
id:1,
|
||||
url:"/static/common/product_def2.png",
|
||||
name:"美的双开门冰箱大容量多层速冷冰箱",
|
||||
price:"7088.",
|
||||
priceDouble:"00",
|
||||
sell:"1.4万",
|
||||
type:0,
|
||||
},{
|
||||
id:2,
|
||||
url:"/static/common/product_def2.png",
|
||||
name:"西门子双开门家庭冰箱大开口设计",
|
||||
price:"7088.",
|
||||
priceDouble:"00",
|
||||
sell:"1.4万",
|
||||
type:1,//1 哈希优选
|
||||
},{
|
||||
id:2,
|
||||
url:"/static/common/product_def2.png",
|
||||
name:"西门子双开门家庭冰箱大开口设计",
|
||||
price:"7088.",
|
||||
priceDouble:"00",
|
||||
sell:"1.4万",
|
||||
type:1,//1 哈希优选
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//
|
||||
jumpInfo(item){
|
||||
console.log("item",item);
|
||||
uni.navigateTo({
|
||||
url: '/pages/productInfo/productInfo?id='+item.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.choiceness_warp{
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
.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>
|
||||
@@ -0,0 +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>
|
||||
|
||||
<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;
|
||||
}
|
||||
},
|
||||
},
|
||||
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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@@ -0,0 +1,170 @@
|
||||
<!--
|
||||
转盘
|
||||
@Author: mosowe
|
||||
@Date:2023-08-10 18:01:01
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view
|
||||
class="rotary-table-component"
|
||||
:style="{
|
||||
width: props.radius * 2 + 'rpx',
|
||||
height: props.radius * 2 + 'rpx'
|
||||
}">
|
||||
<view
|
||||
class="content-table"
|
||||
:style="{
|
||||
transform: 'rotate(' + deg + 'deg)'
|
||||
}">
|
||||
<!-- <sector :radius="props.height / 2"></sector> -->
|
||||
<sector
|
||||
v-for="(item, index) in props.list"
|
||||
:key="index"
|
||||
:radius="props.radius"
|
||||
:text="item.title"
|
||||
:bgColor="item.bgColor"
|
||||
:color="item.color"
|
||||
:image="item.image"
|
||||
:size="item.size"
|
||||
:imageSize="item.imageSize"
|
||||
:angle="singleAngle"
|
||||
:index="index"></sector>
|
||||
</view>
|
||||
<view
|
||||
class="turntable_pointer"
|
||||
@click="start">
|
||||
<image
|
||||
src="./begin-btn.png"
|
||||
class="icon"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import sector from './sector.vue';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
interface listItem {
|
||||
title: string; //文本
|
||||
color?: string; //文字颜色
|
||||
size?: string; // 文字字号
|
||||
bgColor?: string; //区域背景色
|
||||
image?: string; //图片
|
||||
imageSize?: string; //图片宽高
|
||||
}
|
||||
interface Props {
|
||||
list: listItem[]; // 奖项
|
||||
radius?: number; // 圆盘半径
|
||||
speed?: number; // 速度
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
radius: 300,
|
||||
speed: 20
|
||||
});
|
||||
|
||||
// emits
|
||||
interface EmitsType {
|
||||
(e: 'start'): void; // 开始抽奖
|
||||
(e: 'end'): void; // 结束
|
||||
}
|
||||
const emits = defineEmits<EmitsType>();
|
||||
|
||||
const deg = ref<number>(0);
|
||||
const singleAngle = computed(() => {
|
||||
return Number((360 / props.list.length).toFixed(2));
|
||||
});
|
||||
const isStart = ref(false);
|
||||
const timer = ref<any>(null);
|
||||
const awardNumer = ref<number>(0); // 中奖序号,0表示还没有给出，1开始算
|
||||
const endAddAngle = computed(() => {
|
||||
return 360 - ((awardNumer.value - 1) * singleAngle.value + singleAngle.value / 2); // 中奖角度
|
||||
});
|
||||
|
||||
// 点击开始抽奖
|
||||
const start = () => {
|
||||
emits('start');
|
||||
};
|
||||
// 开始转
|
||||
const begin = () => {
|
||||
if (isStart.value) return;
|
||||
isStart.value = true;
|
||||
turnRound();
|
||||
};
|
||||
|
||||
// 转动动画
|
||||
const turnRound = () => {
|
||||
let beginDeg = deg.value;
|
||||
let beginSpeed = props.speed;
|
||||
|
||||
const rangeAngle = (Math.floor(Math.random() * 4) + 4) * 360; // 随机旋转几圈再停止
|
||||
|
||||
let cAngle: any;
|
||||
beginDeg = 0;
|
||||
let waitDeg = 0; // 等待接口返回前转的角度
|
||||
|
||||
timer.value = setInterval(() => {
|
||||
if (!awardNumer.value) {
|
||||
beginDeg += beginSpeed;
|
||||
waitDeg = beginDeg;
|
||||
} else {
|
||||
if (waitDeg) {
|
||||
beginDeg = 0;
|
||||
waitDeg = 0;
|
||||
}
|
||||
if (beginDeg < rangeAngle) {
|
||||
beginDeg += beginSpeed;
|
||||
} else {
|
||||
let a = (endAddAngle.value + rangeAngle - beginDeg) / beginSpeed;
|
||||
cAngle = a > beginSpeed ? beginSpeed : a < 1 ? 1 : a;
|
||||
beginDeg += cAngle;
|
||||
|
||||
if (beginDeg >= endAddAngle.value + rangeAngle) {
|
||||
beginDeg = endAddAngle.value + rangeAngle;
|
||||
isStart.value = false;
|
||||
clearInterval(timer.value);
|
||||
emits('end');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
deg.value = beginDeg;
|
||||
}, 1000 / 60);
|
||||
};
|
||||
|
||||
// 准备停止转动
|
||||
const stop = (number: number) => {
|
||||
awardNumer.value = number;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
begin,
|
||||
stop
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rotary-table-component {
|
||||
border-radius: 50%;
|
||||
border: 1px solid #999;
|
||||
position: relative;
|
||||
background-color: lightseagreen;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.turntable_pointer {
|
||||
position: absolute;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(1deg);
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +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>
|
||||
<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>
|
||||
```
|
||||
@@ -0,0 +1,144 @@
|
||||
<!--
|
||||
扇形
|
||||
@Author: mosowe
|
||||
@Date:2023-08-10 15:32:28
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view
|
||||
class="sector-componnet"
|
||||
:style="{
|
||||
'--point-x': threePoint[0],
|
||||
'--point-y': threePoint[1],
|
||||
'--index-rotate': props.index * props.angle + 'deg',
|
||||
'--bg-color': props.bgColor,
|
||||
'--color': props.color,
|
||||
'--size': props.size,
|
||||
'--text-angle': props.angle / 2 - 45 + 'deg',
|
||||
'--text-origin': props.radius + 'rpx',
|
||||
'--text-translate-x-y': translateXY,
|
||||
'--radius': -props.radius + 'rpx',
|
||||
'--text-position': -(props.radius / 6) * 5 + 'rpx',
|
||||
'--image-size': props.imageSize || '30rpx'
|
||||
}">
|
||||
<view class="text-wrap">
|
||||
<view
|
||||
class="text"
|
||||
:class="{
|
||||
hasImage: props.image && props.text,
|
||||
justImage: props.image && !props.text
|
||||
}">
|
||||
<text
|
||||
class="title"
|
||||
v-if="props.text">
|
||||
{{ props.text }}
|
||||
</text>
|
||||
<image
|
||||
v-if="props.image"
|
||||
:src="props.image"
|
||||
class="image"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
interface Props {
|
||||
text?: string;
|
||||
angle?: number;
|
||||
index?: number;
|
||||
bgColor?: string;
|
||||
color?: string;
|
||||
size?: string;
|
||||
radius?: number;
|
||||
image?: string;
|
||||
imageSize?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
text: '测试',
|
||||
angle: 45,
|
||||
index: 0,
|
||||
bgColor: '#ff0000',
|
||||
size: '24rpx',
|
||||
color: '#fff',
|
||||
radius: 300,
|
||||
image: '',
|
||||
imageSize: '60rpx'
|
||||
});
|
||||
|
||||
const threePoint = computed(() => {
|
||||
if (props.angle < 0 || props.angle > 180) {
|
||||
console.error('弧度值取值范围为0~180之间，当前值：' + props.angle);
|
||||
return [0, 0];
|
||||
}
|
||||
const a = (props.angle <= 90 ? props.angle : 180 - props.angle) * (Math.PI / 180); // 弧度转角度
|
||||
const r = props.radius;
|
||||
let x: string = '0%';
|
||||
let y: string = '0%';
|
||||
if (props.angle > 90) {
|
||||
y = '0%';
|
||||
x = (((r + r * Math.cos(a)) / 2 / r) * 100).toFixed(2) + '%';
|
||||
} else if (props.angle === 90) {
|
||||
x = '50%';
|
||||
y = '0%';
|
||||
} else {
|
||||
y = (((r - r * Math.sin(a)) / 2 / r) * 100).toFixed(2) + '%';
|
||||
x = (((r - r * Math.cos(a)) / 2 / r) * 100).toFixed(2) + '%';
|
||||
}
|
||||
return [x, y];
|
||||
});
|
||||
|
||||
const translateXY = computed(() => {
|
||||
return (Math.sqrt(props.radius * props.radius * 2) - props.radius - 30).toFixed(0) + 'rpx';
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sector-componnet {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
clip-path: polygon(0 0, 0 50%, 50% 50%, var(--point-x) var(--point-y));
|
||||
transform: rotate(calc(var(--index-rotate) + 90deg));
|
||||
.text-wrap {
|
||||
transform-origin: var(--text-origin) var(--text-origin);
|
||||
transform: rotate(var(--text-angle)) translateX(var(--text-translate-x-y))
|
||||
translateY(var(--text-translate-x-y));
|
||||
}
|
||||
.text {
|
||||
writing-mode: vertical-rl;
|
||||
font-size: var(--size);
|
||||
color: var(--color);
|
||||
transform: rotate(-45deg) translateX(75%);
|
||||
vertical-align: middle;
|
||||
/* #ifdef MP-WEIXIN */
|
||||
transform: rotate(-45deg) translateX(50%);
|
||||
/* #endif */
|
||||
&.justImage {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&.hasImage {
|
||||
transform: rotate(-45deg) translateX(calc(var(--image-size) / 2));
|
||||
/* #ifdef MP-WEIXIN */
|
||||
transform: rotate(-45deg) translateX(45%);
|
||||
/* #endif */
|
||||
}
|
||||
.title {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.image {
|
||||
display: inline-block;
|
||||
width: var(--image-size);
|
||||
height: var(--image-size);
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user