root/xl-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
多啦C梦
2025-03-27 15:38:21 +08:00
parent 3c85d9e0e7
commit 15b26ab2d9
31 changed files with 1003 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/AddCustomerServiceModal.vue Normal file
View File

@@ -0,0 +1,46 @@
<script setup>
import {onMounted} from "vue";
import XModal from "./XModal.vue";
import XQrCode from "./XQrCode.vue";
const show = defineModel('show');
onMounted(() => {
});
</script>
<template>
<x-modal
v-model:show="show">
<view class="px-[30rpx] py-[40rpx] relative">
<image @click="show=false" class="!w-[52rpx] !h-[52rpx] absolute top-[-110rpx] right-[calc(-100%-10rpx)]" src="/static/icons/close.png"></image>
<view class="title">微信扫码添加</view>
<view class="!mt-[24rpx] w-[320rpx] !mx-auto aspect-square">
<x-qr-code size="320rpx" :qrSize="180" content="公众号"></x-qr-code>
</view>
<view class="desc !mt-[24rpx]">请发送 [我的] 页面截图给客服</view>
<view class="desc">再描述您的问题</view>
</view>
</x-modal>
</template>
<style lang="scss" scoped>
.title {
color: rgb(29, 33, 41);
font-size: 34rpx;
font-weight: 500;
line-height: 48rpx;
letter-spacing: 0;
text-align: center;
}
.desc {
color: rgb(78, 89, 105);
font-size: 28rpx;
font-weight: 500;
letter-spacing: 0;
text-align: center;
}
</style>

92
src/components/TaskCard.vue Normal file
View File

@@ -0,0 +1,92 @@
<script setup>
import dy from "../static/images/抖音.png";
import qrw from "../static/icons/qrw.png";
</script>
<template>
<view class="rounded-[8rpx] bg-[#fff] !p-[24rpx]">
<view class="!flex gap-[26rpx]">
<image class="!size-[88rpx] rounded-[50%] overflow-hidden" mode="aspectFill" :src="dy"></image>
<view class="!h-[88rpx] !flex flex-col justify-between">
<view class="title">美白祛斑洗面奶</view>
<view class="!flex gap-[8rpx]">
<view class="tag">抖音</view>
<view class="tag">三连发</view>
</view>
</view>
<view class="!h-[88rpx] !ml-auto">
<view class="price">
<text class="unit">¥</text>
8.56
</view>
<view class="price-info">剩余3个名额</view>
</view>
</view>
<view class="!mt-[34rpx] !px-[20rpx] !py-[10rpx] bg-[#F2F3F5] info relative">
截止时间：08月23日 14:00
<view class="absolute top-1/2 -translate-y-1/2 right-0">
<image class="!w-[168rpx]" :src="qrw" mode="widthFix"></image>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.qrw {
}
.info {
color: rgb(78, 89, 105);
font-size: 12px;
font-weight: 500;
line-height: 140%;
letter-spacing: 0;
text-align: left;
}
.title {
color: rgb(29, 33, 41);
font-size: 14px;
font-weight: 500;
line-height: 140%;
letter-spacing: 0;
text-align: left;
}
.price-info {
/* 12/Regular */
color: rgb(255, 87, 34);
font-size: 12px;
font-weight: 400;
line-height: 140%;
letter-spacing: 0;
text-align: right;
}
.price {
color: rgb(29, 33, 41);
font-size: 20px;
font-weight: 700;
line-height: 140%;
letter-spacing: 0;
text-align: right;
.unit {
font-size: 22rpx;
}
}
.tag {
color: rgb(22, 93, 255);
font-size: 10px;
font-weight: 400;
line-height: 140%;
letter-spacing: 0;
text-align: center;
border-radius: 4rpx;
background: rgb(232, 243, 255);
padding: 3rpx 8rpx;
}
</style>

92
src/components/TaskItem.vue Normal file
View File

@@ -0,0 +1,92 @@
<script setup>
import dy from "../static/images/抖音.png";
import qrw from "../static/icons/qrw.png";
</script>
<template>
<view class="rounded-[8rpx] bg-[#fff] !p-[24rpx]">
<view class="!flex gap-[26rpx]">
<image class="!size-[88rpx] rounded-[50%] overflow-hidden" mode="aspectFill" :src="dy"></image>
<view class="!h-[88rpx] !flex flex-col justify-between">
<view class="title">美白祛斑洗面奶</view>
<view class="!flex gap-[8rpx]">
<view class="tag">抖音</view>
<view class="tag">三连发</view>
</view>
</view>
<view class="!h-[88rpx] !ml-auto">
<view class="price">
<text class="unit">¥</text>
8.56
</view>
<view class="price-info">剩余3个名额</view>
</view>
</view>
<view class="!mt-[34rpx] !px-[20rpx] !py-[10rpx] bg-[#F2F3F5] info relative">
截止时间：08月23日 14:00
<view class="absolute top-1/2 -translate-y-1/2 right-0">
<image class="!w-[168rpx]" :src="qrw" mode="widthFix"></image>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.qrw {
}
.info {
color: rgb(78, 89, 105);
font-size: 12px;
font-weight: 500;
line-height: 140%;
letter-spacing: 0;
text-align: left;
}
.title {
color: rgb(29, 33, 41);
font-size: 14px;
font-weight: 500;
line-height: 140%;
letter-spacing: 0;
text-align: left;
}
.price-info {
/* 12/Regular */
color: rgb(255, 87, 34);
font-size: 12px;
font-weight: 400;
line-height: 140%;
letter-spacing: 0;
text-align: right;
}
.price {
color: rgb(29, 33, 41);
font-size: 20px;
font-weight: 700;
line-height: 140%;
letter-spacing: 0;
text-align: right;
.unit {
font-size: 22rpx;
}
}
.tag {
color: rgb(22, 93, 255);
font-size: 10px;
font-weight: 400;
line-height: 140%;
letter-spacing: 0;
text-align: center;
border-radius: 4rpx;
background: rgb(232, 243, 255);
padding: 3rpx 8rpx;
}
</style>

2
src/components/WXOfficialAccount.vue
View File

@@ -12,7 +12,7 @@ onMounted(() => {
<template>
<x-modal
:show="show">
v-model:show="show">
<view class="px-[30rpx] py-[40rpx] relative">
<image @click="show=false" class="!w-[52rpx] !h-[52rpx] absolute top-[-110rpx] right-[calc(-100%-10rpx)]" src="/static/icons/close.png"></image>

20
src/components/XDropdownItem.vue Normal file
View File

@@ -0,0 +1,20 @@
<script setup>
</script>
<template>
<view class="!py-[14rpx] !px-[24rpx] text">
<slot></slot>
</view>
</template>
<style lang="scss" scoped>
.text {
color: rgb(29, 33, 41);
font-size: 14px;
font-weight: 400;
line-height: 140%;
letter-spacing: 0;
text-align: left;
}
</style>

49
src/components/XDropdownList.vue Normal file
View File

@@ -0,0 +1,49 @@
<script setup>
import {ref} from "vue";
const show = ref(false);
</script>
<template>
<view class="relative z-[99]">
<view @click="show=!show">
<slot></slot>
<tui-icon
:style="{
transform: !show ? 'rotate(0deg)' : 'rotate(180deg)'
}"
class="absolute top-1/2 -translate-y-1/2 right-[20rpx] duration-300"
name="arrowdown"
:size="20">
</tui-icon>
</view>
<transition name="fade">
<view v-if="show" class="absolute top-[calc(100%+10rpx)] min-w-full bg-[#fff] rounded-[8rpx]">
<slot name="menu"></slot>
</view>
</transition>
</view>
<view
v-if="show"
id="mask"
@click="show=false"
class="!w-screen !h-screen !fixed left-0 top-0 z-[999]">
</view>
</template>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 300ms;
position: absolute;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
position: absolute;
}
</style>

1
src/components/XModal.vue
View File

@@ -4,6 +4,7 @@ const show = defineModel('show');
<template>
<tui-modal
@cancel="show=false"
padding="0"
custom
:show="show">

7
src/components/XNav.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import {ref} from 'vue';
import {isWXWeb} from "../utils/uils.js";
import {backPage, isWXWeb} from "../utils/uils.js";
const {showBack} = defineProps({
showBack: {
@@ -14,15 +14,18 @@ const title = ref(document.title);
<template>
<template v-if="!isWXWeb()">
<view class="!flex justify-center items-center h-[100rpx] bg-[#f9f9f9]">
<view class="!flex justify-center items-center w-full h-[100rpx] bg-[#f9f9f9] fixed left-0 top-0 z-[998]">
<image
v-if="showBack"
@click="backPage()"
class="!w-[9px] !h-[17px] cursor-pointer !absolute left-[50rpx]"
src="/static/icons/back.png">
</image>
<view class="title">{{ title }}</view>
</view>
<view class="h-[100rpx] w-full"></view>
</template>
</template>

51
src/components/XVideoModal.vue Normal file
View File

@@ -0,0 +1,51 @@
<script setup>
import {ref} from 'vue'
import XModal from "./XModal.vue";
import fmt from '../static/images/fmt.png';
import play from '../static/icons/play.png';
const show = ref(false);
const playVideo = ref(false);
</script>
<template>
<view @click="show=true">
<slot></slot>
</view>
<x-modal
class="x-video-modal"
v-model:show="show">
<view class="!p-[20rpx] relative">
<image
@click="show=false"
class="!w-[52rpx] !h-[52rpx] !absolute left-1/2 -translate-x-1/2 bottom-[-100rpx]"
src="/static/icons/close.png">
</image>
<view class="!w-full relative rounded-[16rpx] overflow-hidden">
<image v-if="!playVideo" class="!w-full" mode="widthFix" :src="fmt"></image>
<view @click="playVideo=!playVideo" v-if="!playVideo"
class="absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,.4)] z-10 !flex justify-center items-center">
<image class="!w-[94rpx] !h-[94rpx]" :src="play"></image>
</view>
<video
autoplay
@pause="playVideo=!playVideo"
class="!w-full"
v-else
src="https://shopyunlng.oss-cn-beijing.aliyuncs.com/upload/2025/03-18/15-31-150289-429952696.m4v">
</video>
</view>
</view>
</x-modal>
</template>
<style lang="scss">
.x-video-modal {
.tui-modal-box {
margin-bottom: 200rpx;
}
}
</style>