数据渲染有相同字符时渲染错误[奇奇怪怪]

1.页面中存在相同字符,在安卓模拟器以及打包出来apk都显示异常

1. 如果将其中一个替换成特殊字符编码或者在其中一个字符前面打上一个空格又能正常显示(即第二个换成"¥")
2. H5跟小程序以及HB内置浏览器都没有复现问题,图一为问题代码,图二为安卓模拟器显示问题,正常应该是显示 400
3. 来仁兄们解释深入探讨一下
4. 附带问题源码
   
   
   
   
   

<template>  
    <view class="receivable">  
        <view class="receivable-head">  
            <!-- <view class="option inline">  
                <uni-data-select v-model="payValue" :localdata="payRange" :clear="false" @change="payChange" />  
            </view>  
            <view class="option inline">  
                <uni-data-select v-model="incomeValue" :localdata="incomeRange" :clear="false" @change="incomeChange">  
                </uni-data-select>  
            </view> -->  
            <view class="option block">  
                <uni-datetime-picker v-model="dateValu" type="daterange" rangeSeparator="-" start-placeholder="选择开始时间"  
                    end-placeholder="选择结束时间" @change="dateChange" />  
            </view>  
        </view>  
        <view class="receivable-main">  
            <view class="amountTo">  
                <view class="amountTo-title">合计应收款</view>  
                <view class="amountTo-money">￥{{ amountTo }}</view>  
            </view>  
            <view class="layer">  
                <view class="layer-title">服务明细</view>  
                <view class="list">  
                    <block v-if="listData.length > 0">  
                        <view class="list-item" v-for="(m, i) in listData" :key="i">  
                            <view class="title">{{ m.service_name }}</view>  
                            <view class="date">服务日期: {{ m.date }}</view>  
                            <view class="no">订单号: {{ m.no }}</view>  
                            <view class="money">￥ {{ m.fee ?? '0.00' }} </view>  
                        </view>  
                    </block>  
                    <block v-else>  
                        <view class="noData">暂无数据</view>  
                    </block>  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  

<script setup lang="ts">  
import { onMounted, reactive, ref } from 'vue'  
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'  
import { getHomeTaskReceivablesDetailsList } from '@/api'  

const payRange = [  
    {  
        value: 0,  
        text: '全部支付类型'  
    },  
    {  
        value: 1,  
        text: '线上支付'  
    },  
    {  
        value: 2,  
        text: '现金支付'  
    },  
    {  
        value: 3,  
        text: 'POS支付'  
    },  
]  
const incomeRange = [  
    {  
        value: 0,  
        text: '全部支付类型'  
    },  
    {  
        value: 1,  
        text: '线上支付'  
    },  
    {  
        value: 2,  
        text: '现金支付'  
    },  
    {  
        value: 3,  
        text: 'POS支付'  
    },  
]  
const payValue = ref<number>(0)  
const incomeValue = ref<number>(0)  
const dateValu = ref<any[]>([])  
const pageInfo = reactive<{  
    page: number  
    lastPage: number  
    pageSize: number  
}>({ page: 1, lastPage: 1, pageSize: 10 })  
const amountTo = ref<number>(0)  
const listData = ref<any[]>([])  

const payChange = (e: any) => {  
    console.log('e :>> ', e)  
}  
const incomeChange = (e: any) => {  
    console.log('e :>> ', e)  
}  
const dateChange = (e: any) => {  
    setTimeout(() => {  
        getList(true)  
    }, 200)  
}  

const getList = async (refresh?: boolean) => {  
    try {  
        if (refresh) {  
            pageInfo.page = 1  
            pageInfo.lastPage = 10  
        }  
        const [start_date, end_date] = dateValu.value  
        const { data, status } = await getHomeTaskReceivablesDetailsList({  
            start_date,  
            end_date,  
            page: pageInfo.page,  
            page_size: pageInfo.pageSize,  
        })  
        // @ts-ignore  
        if (status === "success") {  
            amountTo.value = data.fee_total  
            pageInfo.page += 1  
            pageInfo.lastPage = data.last_page  
            const arr = refresh ? [] : listData.value  
            listData.value = [...arr, ...data.list]  
            // listData.value = data.list  
        }  
    } catch (err) {  
        console.log('getList err :>> ', err)  
    }  
}  

onMounted(() => {  
    getList(true)  
})  
onPullDownRefresh(() => {  
    setTimeout(() => {  
        uni.stopPullDownRefresh()  
        getList(true)  
    }, 1000)  
})  
onReachBottom(() => {  
    if (pageInfo.page > pageInfo.lastPage) {  
        uni.showToast({ title: "没有更多了", icon: "none" })  
    } else {  
        getList()  
    }  
})  
</script>  

<style>  
page {  
    background: #eef0f2;  
}  
</style>  
<style lang="scss" scoped>  
$headHeight: 120rpx;  

.receivable {  
    &-head {  
        position: fixed;  
        top: var(--window-top);  
        right: 0;  
        left: 0;  
        z-index: 1;  
        height: $headHeight;  
        padding: 20rpx 0;  
        box-sizing: border-box;  
        background-color: #fff;  

        .option {  
            padding: 0 20rpx;  
            box-sizing: border-box;  

            &.inline {  
                display: inline-block;  
                width: 50%;  
            }  

            &.block {  
                display: block;  
                // margin-top: 20rpx;  
            }  
        }  
    }  

    &-main {  
        // margin-top: var(--window-top);  
        padding: $headHeight 20rpx 0 20rpx;  
        box-sizing: border-box;  

        .amountTo {  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
            justify-content: center;  
            margin: 20rpx 0;  
            height: 234rpx;  
            border-radius: 20rpx;  
            background-color: #fff;  

            &-title {  
                font-size: 28rpx;  
                color: #333;  
            }  

            &-money {  
                font-size: 40rpx;  
                margin-top: 20rpx;  
                color: #ff0000;  
            }  
        }  

        .layer {  
            padding: 40rpx 24rpx 10rpx 24rpx;  
            border-radius: 20rpx;  
            box-sizing: border-box;  
            background-color: #fff;  

            &-title {  
                font-size: 28rpx;  
                color: #999;  
            }  

            .list {  
                &-item {  
                    position: relative;  
                    padding: 40rpx 0;  
                    box-sizing: border-box;  

                    &:not(:last-child) {  
                        border-bottom: 1rpx solid #eee;  
                    }  

                    .title {  
                        margin-bottom: 28rpx;  
                        font-size: 36rpx;  
                        color: #333;  
                    }  

                    .date,  
                    .no {  
                        font-size: 28rpx;  
                        color: #999;  
                    }  

                    .no {  
                        margin-top: 10rpx;  
                    }  

                    .money {  
                        position: absolute;  
                        top: 50%;  
                        right: 0;  
                        transform: translateY(-50%);  
                        font-size: 32rpx;  
                        color: #ff0000;  
                    }  
                }  
            }  

            .noData {  
                padding: 20rpx 0;  
                font-size: 28rpx;  
                text-align: center;  
                color: #666;  
            }  
        }  
    }  
}  
</style>