refactor(components): 优化多个组件的样式和布局
- 调整了多个组件的背景色、高度等样式 - 优化了部分组件的布局结构 - 统一了部分样式，如字体颜色、大小等 - 部分文件改成了vue3组合式写法
This commit is contained in:
dftre
parent
91267f5380
commit
c20ff75cd8
@ -36,8 +36,7 @@ const props = defineProps({
|
||||
.card {
|
||||
padding: 0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
height: 240rpx;
|
||||
background-color: #ffffff;
|
||||
width: 700rpx;
|
||||
padding: 20rpx;
|
||||
margin: 10rpx;
|
||||
@ -67,6 +66,12 @@ const props = defineProps({
|
||||
margin-top: 10rpx;
|
||||
font-size: 20rpx;
|
||||
color: rgb(87, 87, 87);
|
||||
line-height: 30rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.price {
|
||||
@ -80,7 +85,6 @@ const props = defineProps({
|
||||
.rect {
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
height: 500rpx;
|
||||
width: 350rpx;
|
||||
padding: 0;
|
||||
margin: 10rpx;
|
||||
@ -95,7 +99,6 @@ const props = defineProps({
|
||||
.content {
|
||||
padding: 0 20rpx;
|
||||
margin: 0;
|
||||
height: 140rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -108,7 +111,6 @@ const props = defineProps({
|
||||
|
||||
.subTitle {
|
||||
width: 330rpx;
|
||||
height: 60rpx;
|
||||
font-size: 20rpx;
|
||||
color: rgb(87, 87, 87);
|
||||
}
|
||||
|
||||
@ -37,10 +37,12 @@ const titleStype = computed(() => {
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<view class="menu" :class="type" :style="menuStyle" @click="$emit('click')">
|
||||
<image :src="icon" style="width: 100%;height: 100%"></image>
|
||||
<view>
|
||||
<view class="menu" :class="type" :style="menuStyle" @click="$emit('click')">
|
||||
<image :src="icon" style="width: 100%;height: 100%"></image>
|
||||
</view>
|
||||
<view class="title" :style="titleStype">{{ label }}</view>
|
||||
</view>
|
||||
<view class="title" :style="titleStype">{{ label }}</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.menu {
|
||||
|
||||
@ -86,7 +86,6 @@ function formatNumber(num, place) {
|
||||
position: relative;
|
||||
padding: 20rpx;
|
||||
background-color: white;
|
||||
border: 1rpx solid rgb(183, 183, 183);
|
||||
border-radius: 20rpx;
|
||||
height: 360rpx;
|
||||
width: 700rpx;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<u-popup :show="modelValue" mode="bottom" :popup="false" :mask="true" :closeable="true" :safe-area-inset-bottom="true"
|
||||
close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble" @close="close">
|
||||
<u-popup :show="modelValue" mode="bottom" :popup="false" :mask="true" :closeable="true"
|
||||
:safe-area-inset-bottom="true" close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble"
|
||||
@close="close">
|
||||
<u-tabs v-if="modelValue" :list="genTabsList" :scrollable="true" :current="tabsIndex" @change="tabsChange"
|
||||
ref="tabs" />
|
||||
<view class="area-box">
|
||||
@ -9,8 +10,8 @@
|
||||
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
||||
<scroll-view :scroll-y="true" style="height: 100%">
|
||||
<u-cell-group>
|
||||
<u-cell v-for="(item, index) in provinces" :title="item.label" :arrow="false" :index="index"
|
||||
:key="index" @click="provinceChange(index)">
|
||||
<u-cell v-for="(item, index) in provinces" :title="item.label" :arrow="false"
|
||||
:index="index" :key="index" @click="provinceChange(index)">
|
||||
<template v-slot:right-icon>
|
||||
<u-icon v-if="isChooseP && province === index" size="17"
|
||||
name="checkbox-mark"></u-icon>
|
||||
@ -27,7 +28,8 @@
|
||||
<u-cell v-for="(item, index) in citys" :title="item.label" :arrow="false" :index="index"
|
||||
:key="index" @click="cityChange(index)">
|
||||
<template v-slot:right-icon>
|
||||
<u-icon v-if="isChooseC && city === index" size="17" name="checkbox-mark"></u-icon>
|
||||
<u-icon v-if="isChooseC && city === index" size="17"
|
||||
name="checkbox-mark"></u-icon>
|
||||
</template>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
@ -41,7 +43,8 @@
|
||||
<u-cell v-for="(item, index) in areas" :title="item.label" :arrow="false" :index="index"
|
||||
:key="index" @click="areaChange(index)">
|
||||
<template v-slot:right-icon>
|
||||
<u-icon v-if="isChooseA && area === index" size="17" name="checkbox-mark"></u-icon>
|
||||
<u-icon v-if="isChooseA && area === index" size="17"
|
||||
name="checkbox-mark"></u-icon>
|
||||
</template>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
|
||||
@ -1,44 +1,55 @@
|
||||
<template>
|
||||
<uni-section class="mb-10" title="数值板" sub-title="statistic" type="line"></uni-section>
|
||||
<u-row gutter="0">
|
||||
<u-col span="6">
|
||||
<geek-statistic label="订单数量(个)" labelColor="#1f1f1f" :number="0" numberColor="red" />
|
||||
</u-col>
|
||||
<u-col span="6">
|
||||
<geek-statistic label="交易金额(元)" labelColor="#1f1f1f" :number="0" numberColor="red" />
|
||||
</u-col>
|
||||
</u-row>
|
||||
<view style="background-color: #f6f6f6;">
|
||||
<uni-section class="mb-10" title="数值板" sub-title="statistic" type="line"></uni-section>
|
||||
<u-row gutter="0">
|
||||
<u-col span="6">
|
||||
<geek-statistic label="订单数量(个)" labelColor="#1f1f1f" :number="0" numberColor="red" />
|
||||
</u-col>
|
||||
<u-col span="6">
|
||||
<geek-statistic label="交易金额(元)" labelColor="#1f1f1f" :number="0" numberColor="red" />
|
||||
</u-col>
|
||||
</u-row>
|
||||
|
||||
<uni-section class="mb-10" title="菜单" sub-title="menu" type="line"></uni-section>
|
||||
<u-row>
|
||||
<u-col :span="2.1" :offset="0.3" v-for="menu, index in menus" :key="index">
|
||||
<geek-menu v-bind=menu :size="60" @click="modal.msg(menu.label)" type="circle" />
|
||||
</u-col>
|
||||
</u-row>
|
||||
<u-row>
|
||||
<u-col :span="2.1" :offset="0.3" v-for="menu, index in menus" :key="index">
|
||||
<geek-menu :icon="menu.icon" :label="menu.label" :size="60" @click="modal.msg(menu.label)" type="rect" />
|
||||
</u-col>
|
||||
</u-row>
|
||||
<uni-section class="mb-10" title="菜单" sub-title="menu" type="line"></uni-section>
|
||||
<view style="width: 100%; display: flex;justify-content:space-evenly;align-items: center;">
|
||||
<geek-menu v-for="menu, index in menus" :key="index" v-bind=menu :size="60" @click="modal.msg(menu.label)"
|
||||
type="circle" />
|
||||
</view>
|
||||
<view style="width: 100%; display: flex;justify-content:space-evenly;align-items: center;">
|
||||
<geek-menu v-for="menu, index in menus" :key="index" :icon="menu.icon" :label="menu.label" :size="60"
|
||||
@click="modal.msg(menu.label)" type="rect" />
|
||||
</view>
|
||||
|
||||
<uni-section class="mb-10" title="商品列表" sub-title="commodity" type="line"></uni-section>
|
||||
<geek-commodity v-for="item, index in commodityList" :key="index" v-bind="item" type="line"
|
||||
@click="modal.msg(item.title)" />
|
||||
<geek-commodity v-for="item, index in commodityList" :key="index" v-bind="item" type="rect"
|
||||
@click="modal.msg(item.title)" />
|
||||
<uni-section class="mb-10" title="商品列表" sub-title="commodity" type="line"></uni-section>
|
||||
<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
|
||||
<geek-commodity v-for="item, index in commodityList" :key="index" v-bind="item" type="line"
|
||||
@click="modal.msg(item.title)" />
|
||||
</view>
|
||||
<view style="display: flex;justify-content: center;">
|
||||
<view>
|
||||
<geek-commodity v-for="item, index in commodityList.slice(0, 2)" :key="index" v-bind="item" type="rect"
|
||||
@click="modal.msg(item.title)" />
|
||||
</view>
|
||||
<view>
|
||||
<geek-commodity v-for="item, index in commodityList.slice(1, 3)" :key="index" v-bind="item" type="rect"
|
||||
@click="modal.msg(item.title)" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uni-section class="mb-10" title="订单列表" sub-title="order" type="line"></uni-section>
|
||||
<geek-order v-for="item, index in orderList" :key="index" v-bind="item" @more="modal.msg('更多')"
|
||||
@again="modal.msg('再次购买')" @return="modal.msg('退换')" @sell="modal.msg('卖了换钱')"></geek-order>
|
||||
|
||||
<uni-section class="mb-10" title="颜色选择器" sub-title="order" type="line"></uni-section>
|
||||
<geek-color-picker ref="gk" @confirm="getcolor"></geek-color-picker>
|
||||
<button @click="open()">打开颜色选择器</button>
|
||||
|
||||
|
||||
<uni-section class="mb-10" title="订单列表" sub-title="order" type="line"></uni-section>
|
||||
<geek-order v-for="item, index in orderList" :key="index" v-bind="item" @more="modal.msg('更多')"
|
||||
@again="modal.msg('再次购买')" @return="modal.msg('退换')" @sell="modal.msg('卖了换钱')"></geek-order>
|
||||
|
||||
<uni-section class="mb-10" title="颜色选择器" sub-title="order" type="line"></uni-section>
|
||||
<geek-color-picker ref="gk" @confirm="getcolor"></geek-color-picker>
|
||||
<button @click="open()">打开颜色选择器</button>
|
||||
|
||||
|
||||
<uni-section class="mb-10" title="二维码" sub-title="order" type="line"></uni-section>
|
||||
<geek-qrcode cid="qrcode2" ref="qrcode2" val="二维码" :loadMake="true" />
|
||||
<uni-section class="mb-10" title="二维码" sub-title="order" type="line"></uni-section>
|
||||
<view style="display: flex;align-items: center;justify-content: center;">
|
||||
<geek-qrcode cid="qrcode2" ref="qrcode2" val="二维码" :loadMake="true" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -73,7 +84,7 @@ const commodityList: Array<Commodity> = reactive([
|
||||
{
|
||||
img: '/static/images/banner/banner02.jpg',
|
||||
title: '商品2',
|
||||
subTitle: '商品2简介',
|
||||
subTitle: '商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介',
|
||||
price: 300,
|
||||
},
|
||||
{
|
||||
|
||||
@ -1,3 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
const show = ref(false);
|
||||
|
||||
const setDefault = () => { };
|
||||
|
||||
const showRegionPicker = () => {
|
||||
show.value = true;
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<view class="wrap">
|
||||
<view class="top">
|
||||
@ -40,49 +50,40 @@
|
||||
<view class="set">设置默认地址</view>
|
||||
<view class="tips">提醒：每次下单会默认推荐该地址</view>
|
||||
</view>
|
||||
<view class="right"><switch color="red" @change="setDefault" /></view>
|
||||
<view class="right">
|
||||
<switch color="red" @change="setDefault" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-picker mode="region" ref="uPicker" v-model="show" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setDefault() {},
|
||||
showRegionPicker() {
|
||||
this.show = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:v-deep(.line) {
|
||||
color: $u-light-color;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
background-color: #f2f2f2;
|
||||
|
||||
.top {
|
||||
background-color: #ffffff;
|
||||
border-top: solid 2rpx $u-border-color;
|
||||
padding: 22rpx;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
font-size: 32rpx;
|
||||
line-height: 100rpx;
|
||||
align-items: center;
|
||||
border-bottom: solid 2rpx $u-border-color;
|
||||
|
||||
.left {
|
||||
width: 180rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
text-align: left;
|
||||
}
|
||||
@ -90,6 +91,7 @@ export default {
|
||||
|
||||
.address {
|
||||
padding: 20rpx 0;
|
||||
|
||||
textarea {
|
||||
// width: 100%;
|
||||
height: 150rpx;
|
||||
@ -99,8 +101,10 @@ export default {
|
||||
padding: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.site-clipboard {
|
||||
padding-right: 40rpx;
|
||||
|
||||
textarea {
|
||||
// width: 100%;
|
||||
height: 150rpx;
|
||||
@ -109,6 +113,7 @@ export default {
|
||||
margin: 40rpx auto;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.clipboard {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -116,6 +121,7 @@ export default {
|
||||
font-size: 26rpx;
|
||||
color: $u-tips-color;
|
||||
height: 80rpx;
|
||||
|
||||
.icon {
|
||||
margin-top: 6rpx;
|
||||
margin-left: 10rpx;
|
||||
@ -123,20 +129,25 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 20rpx;
|
||||
padding: 40rpx;
|
||||
padding-right: 0;
|
||||
background-color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
width: 160rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.tags {
|
||||
width: 140rpx;
|
||||
padding: 16rpx 8rpx;
|
||||
@ -151,22 +162,25 @@ export default {
|
||||
color: $u-content-color;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.plus {
|
||||
//padding: 10rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.default {
|
||||
margin-top: 50rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: solid 2rpx $u-border-color;
|
||||
line-height: 64rpx;
|
||||
|
||||
.tips {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.right {
|
||||
}
|
||||
|
||||
.right {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,48 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import tab from '@/plugins/tab';
|
||||
|
||||
const siteList = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
|
||||
function getData() {
|
||||
siteList.value = [
|
||||
{
|
||||
id: 1,
|
||||
name: '游X',
|
||||
phone: '183****5523',
|
||||
tag: [
|
||||
{ tagText: '默认' },
|
||||
{ tagText: '家' }
|
||||
],
|
||||
site: '广东省深圳市宝安区 自由路66号'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '李XX',
|
||||
phone: '183****5555',
|
||||
tag: [
|
||||
{ tagText: '公司' }
|
||||
],
|
||||
site: '广东省深圳市宝安区 翻身路xx号'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '王YY',
|
||||
phone: '153****5555',
|
||||
tag: [],
|
||||
site: '广东省深圳市宝安区 平安路13号'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
function toAddSite() {
|
||||
tab.navigateTo('/pages_template/pages/address/addSite');
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view>
|
||||
<view class="item" v-for="(res, index) in siteList" :key="res.id">
|
||||
@ -5,7 +50,8 @@
|
||||
<view class="name">{{ res.name }}</view>
|
||||
<view class="phone">{{ res.phone }}</view>
|
||||
<view class="tag">
|
||||
<text v-for="(item, index) in res.tag" :key="index" :class="{red:item.tagText=='默认'}">{{ item.tagText }}</text>
|
||||
<text v-for="(item, index) in res.tag" :key="index" :class="{ red: item.tagText == '默认' }">{{
|
||||
item.tagText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
@ -20,77 +66,24 @@
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
siteList: []
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.siteList = [
|
||||
{
|
||||
id: 1,
|
||||
name: '游X',
|
||||
phone: '183****5523',
|
||||
tag: [
|
||||
{
|
||||
tagText: '默认'
|
||||
},
|
||||
{
|
||||
tagText: '家'
|
||||
}
|
||||
],
|
||||
site: '广东省深圳市宝安区 自由路66号'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '李XX',
|
||||
phone: '183****5555',
|
||||
tag: [
|
||||
{
|
||||
tagText: '公司'
|
||||
}
|
||||
],
|
||||
site: '广东省深圳市宝安区 翻身路xx号'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '王YY',
|
||||
phone: '153****5555',
|
||||
tag: [],
|
||||
site: '广东省深圳市宝安区 平安路13号'
|
||||
}
|
||||
];
|
||||
},
|
||||
toAddSite(){
|
||||
uni.navigateTo({
|
||||
url: '/pages_template/pages/address/addSite'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
padding: 40rpx 20rpx;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
|
||||
.phone {
|
||||
margin-left: 60rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
font-weight: normal;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
display: block;
|
||||
width: 60rpx;
|
||||
@ -101,13 +94,15 @@ export default {
|
||||
border-radius: 6rpx;
|
||||
text-align: center;
|
||||
margin-left: 30rpx;
|
||||
background-color:rgb(49, 145, 253);
|
||||
background-color: rgb(49, 145, 253);
|
||||
}
|
||||
.red{
|
||||
background-color:red
|
||||
|
||||
.red {
|
||||
background-color: red
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
margin-top: 20rpx;
|
||||
@ -116,6 +111,7 @@ export default {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.addSite {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
@ -127,11 +123,13 @@ export default {
|
||||
background-color: red;
|
||||
border-radius: 60rpx;
|
||||
font-size: 30rpx;
|
||||
.add{
|
||||
|
||||
.add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
.icon{
|
||||
|
||||
.icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,19 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import citySelect from '@/components/u-city-select/u-city-select.vue';
|
||||
|
||||
const height = ref(30);
|
||||
const bgColor = ref(uni.$u.color.bgColor);
|
||||
const marginTop = ref(30);
|
||||
const marginBottom = ref(30);
|
||||
const value = ref(false);
|
||||
const input = ref('');
|
||||
|
||||
const cityChange = (e) => {
|
||||
input.value = e.province.label + '-' + e.city.label + '-' + e.area.label;
|
||||
input.value += e.province.value + '-' + e.city.value + '-' + e.area.value;
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<view class="u-demo">
|
||||
<view class="u-demo-wrap">
|
||||
@ -16,32 +32,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import citySelect from '@/components/u-city-select/u-city-select.vue';
|
||||
export default {
|
||||
components: {
|
||||
citySelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: 30,
|
||||
bgColor: this.$u.color.bgColor,
|
||||
marginTop: 30,
|
||||
marginBottom: 30,
|
||||
value: false,
|
||||
input: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
cityChange(e) {
|
||||
this.input = e.province.label + '-' + e.city.label + '-' + e.area.label;
|
||||
this.input += e.province.value + '-' + e.city.value + '-' + e.area.value;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.btn-wrap {
|
||||
margin: 100rpx 30rpx;
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="comment" v-for="(res, index) in commentList" :key="res.id">
|
||||
<view class="left"><image :src="res.url" mode="aspectFill"></image></view>
|
||||
<view class="left">
|
||||
<image :src="res.url" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="top">
|
||||
<view class="name">{{ res.name }}</view>
|
||||
<view class="like" :class="{ highlight: res.isLike }">
|
||||
<view class="num">{{ res.likeNum }}</view>
|
||||
<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a" @click="getLike(index)"></u-icon>
|
||||
<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a"
|
||||
@click="getLike(index)"></u-icon>
|
||||
<u-icon v-if="res.isLike" name="thumb-up-fill" :size="30" @click="getLike(index)"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
@ -31,106 +34,99 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
commentList: []
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getComment();
|
||||
},
|
||||
methods: {
|
||||
// 跳转到全部回复
|
||||
toAllReply() {
|
||||
uni.navigateTo({
|
||||
url: '/pages_template/pages/comment/reply'
|
||||
});
|
||||
},
|
||||
// 点赞
|
||||
getLike(index) {
|
||||
this.commentList[index].isLike = !this.commentList[index].isLike;
|
||||
if (this.commentList[index].isLike == true) {
|
||||
this.commentList[index].likeNum++;
|
||||
} else {
|
||||
this.commentList[index].likeNum--;
|
||||
}
|
||||
},
|
||||
// 评论列表
|
||||
getComment() {
|
||||
this.commentList = [
|
||||
{
|
||||
id: 1,
|
||||
name: '叶轻眉',
|
||||
date: '12-25 18:58',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
|
||||
allReply: 12,
|
||||
likeNum: 33,
|
||||
isLike: false,
|
||||
replyList: [
|
||||
{
|
||||
name: 'uview',
|
||||
contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
|
||||
},
|
||||
{
|
||||
name: '粘粘',
|
||||
contentStr: '今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '叶轻眉1',
|
||||
date: '01-25 13:58',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
allReply: 0,
|
||||
likeNum: 11,
|
||||
isLike: false,
|
||||
url: 'https://cdn.uviewui.com/uview/template/niannian.jpg',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '叶轻眉2',
|
||||
date: '03-25 13:58',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
allReply: 0,
|
||||
likeNum: 21,
|
||||
isLike: false,
|
||||
allReply: 2,
|
||||
url: '../../../static/logo.png',
|
||||
replyList: [
|
||||
{
|
||||
name: 'uview',
|
||||
contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
|
||||
},
|
||||
{
|
||||
name: '豆包',
|
||||
contentStr: '想吃冰糖葫芦粘豆包，但没钱5555.........'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '叶轻眉3',
|
||||
date: '06-20 13:58',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
|
||||
allReply: 0,
|
||||
likeNum: 150,
|
||||
isLike: false
|
||||
}
|
||||
];
|
||||
}
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import tab from '@/plugins/tab';
|
||||
|
||||
const commentList = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
getComment();
|
||||
});
|
||||
|
||||
const toAllReply = () => tab.navigateTo('/pages_template/pages/comment/reply')
|
||||
|
||||
const getLike = (index) => {
|
||||
commentList.value[index].isLike = !commentList.value[index].isLike;
|
||||
if (commentList.value[index].isLike) {
|
||||
commentList.value[index].likeNum++;
|
||||
} else {
|
||||
commentList.value[index].likeNum--;
|
||||
}
|
||||
};
|
||||
|
||||
const getComment = () => {
|
||||
commentList.value = [
|
||||
{
|
||||
id: 1,
|
||||
name: '叶轻眉',
|
||||
date: '12-25 18:58',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
|
||||
allReply: 12,
|
||||
likeNum: 33,
|
||||
isLike: false,
|
||||
replyList: [
|
||||
{
|
||||
name: 'uview',
|
||||
contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
|
||||
},
|
||||
{
|
||||
name: '粘粘',
|
||||
contentStr: '今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '叶轻眉1',
|
||||
date: '01-25 13:58',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
allReply: 0,
|
||||
likeNum: 11,
|
||||
isLike: false,
|
||||
url: 'https://cdn.uviewui.com/uview/template/niannian.jpg',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '叶轻眉2',
|
||||
date: '03-25 13:58',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
allReply: 0,
|
||||
likeNum: 21,
|
||||
isLike: false,
|
||||
allReply: 2,
|
||||
url: '../../../static/logo.png',
|
||||
replyList: [
|
||||
{
|
||||
name: 'uview',
|
||||
contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
|
||||
},
|
||||
{
|
||||
name: '豆包',
|
||||
contentStr: '想吃冰糖葫芦粘豆包，但没钱5555.........'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '叶轻眉3',
|
||||
date: '06-20 13:58',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
|
||||
allReply: 0,
|
||||
likeNum: 150,
|
||||
isLike: false
|
||||
}
|
||||
];
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.comment {
|
||||
display: flex;
|
||||
padding: 30rpx;
|
||||
|
||||
.left {
|
||||
image {
|
||||
width: 64rpx;
|
||||
@ -139,64 +135,79 @@ export default {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
padding-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.name {
|
||||
color: #5677fc;
|
||||
}
|
||||
|
||||
.like {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #9a9a9a;
|
||||
font-size: 26rpx;
|
||||
|
||||
.num {
|
||||
margin-right: 4rpx;
|
||||
color: #9a9a9a;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #5677fc;
|
||||
|
||||
.num {
|
||||
color: #5677fc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.reply-box {
|
||||
background-color: rgb(242, 242, 242);
|
||||
border-radius: 12rpx;
|
||||
|
||||
.item {
|
||||
padding: 20rpx;
|
||||
border-bottom: solid 2rpx $u-border-color;
|
||||
|
||||
.username {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.all-reply {
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
color: #5677fc;
|
||||
align-items: center;
|
||||
|
||||
.more {
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
color: #9a9a9a;
|
||||
|
||||
.reply {
|
||||
color: #5677fc;
|
||||
margin-left: 10rpx;
|
||||
|
||||
@ -1,9 +1,106 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const commentList = ref([]);
|
||||
const comment = ref({});
|
||||
|
||||
onMounted(() => {
|
||||
getReply();
|
||||
});
|
||||
|
||||
// 点赞
|
||||
const getLike = (index) => {
|
||||
if (index === 0 || index > 0) {
|
||||
commentList.value[index].isLike = !commentList.value[index].isLike;
|
||||
if (commentList.value[index].isLike) {
|
||||
commentList.value[index].likeNum++;
|
||||
} else {
|
||||
commentList.value[index].likeNum--;
|
||||
}
|
||||
} else {
|
||||
if (comment.value.isLike) {
|
||||
comment.value.isLike = !comment.value.isLike;
|
||||
comment.value.likeNum--;
|
||||
} else {
|
||||
comment.value.isLike = !comment.value.isLike;
|
||||
comment.value.likeNum++;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 回复列表
|
||||
const getReply = () => {
|
||||
comment.value = {
|
||||
id: 1,
|
||||
name: '叶轻眉',
|
||||
date: '12-25 18:58',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
|
||||
allReply: 12,
|
||||
likeNum: 33,
|
||||
isLikes: false
|
||||
};
|
||||
commentList.value = [
|
||||
{
|
||||
name: '新八几',
|
||||
date: '12-25 18:58',
|
||||
contentText: '不要乱打广告啊喂！虽然是真的超好用',
|
||||
url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
|
||||
likeNum: 33,
|
||||
isLike: false,
|
||||
reply: {
|
||||
name: 'uview',
|
||||
contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '叶轻眉1',
|
||||
date: '01-25 13:58',
|
||||
url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
allReply: 0,
|
||||
likeNum: 11,
|
||||
isLike: false,
|
||||
reply: {
|
||||
name: '粘粘',
|
||||
contentStr: '今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '叶轻眉2',
|
||||
date: '03-25 13:58',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
allReply: 0,
|
||||
likeNum: 21,
|
||||
url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
|
||||
isLike: false,
|
||||
allReply: 2,
|
||||
reply: {
|
||||
name: '豆包',
|
||||
contentStr: '想吃冰糖葫芦粘豆包，但没钱5555.........'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '叶轻眉3',
|
||||
date: '06-20 13:58',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
allReply: 0,
|
||||
likeNum: 150,
|
||||
url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
|
||||
isLike: false
|
||||
}
|
||||
];
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="wrap">
|
||||
<view class="comment">
|
||||
<view class="top">
|
||||
<view class="left">
|
||||
<view class="heart-photo"><image :src="comment.url" mode=""></image></view>
|
||||
<view class="heart-photo">
|
||||
<image :src="comment.url" mode=""></image>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<view class="name">{{ comment.name }}</view>
|
||||
<view class="date">06-25 13:58</view>
|
||||
@ -11,8 +108,10 @@
|
||||
</view>
|
||||
<view class="right" :class="{ highlight: comment.isLike }">
|
||||
{{ comment.likeNum }}
|
||||
<u-icon v-if="!comment.isLike" name="thumb-up" class="like" color="#9a9a9a" :size="30" @click="getLike"></u-icon>
|
||||
<u-icon v-if="comment.isLike" name="thumb-up-fill" class="like" :size="30" @click="getLike"></u-icon>
|
||||
<u-icon v-if="!comment.isLike" name="thumb-up" class="like" color="#9a9a9a" :size="30"
|
||||
@click="getLike"></u-icon>
|
||||
<u-icon v-if="comment.isLike" name="thumb-up-fill" class="like" :size="30"
|
||||
@click="getLike"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">{{ comment.contentText }}</view>
|
||||
@ -23,16 +122,20 @@
|
||||
<view class="comment">
|
||||
<view class="top">
|
||||
<view class="left">
|
||||
<view class="heart-photo"><image :src="item.url" mode=""></image></view>
|
||||
<view class="heart-photo">
|
||||
<image :src="item.url" mode=""></image>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<view class="name">{{ item.name }}</view>
|
||||
<view class="date">{{ item.date }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right" :class="{ highlight: item.isLike }">
|
||||
<view class="right" :class="{ highlight: item.isLike }">
|
||||
<view class="num">{{ item.likeNum }}</view>
|
||||
<u-icon v-if="!item.isLike" name="thumb-up" class="like" :size="30" color="#9a9a9a" @click="getLike(index)"></u-icon>
|
||||
<u-icon v-if="item.isLike" name="thumb-up-fill" class="like" :size="30" @click="getLike(index)"></u-icon>
|
||||
<u-icon v-if="!item.isLike" name="thumb-up" class="like" :size="30" color="#9a9a9a"
|
||||
@click="getLike(index)"></u-icon>
|
||||
<u-icon v-if="item.isLike" name="thumb-up-fill" class="like" :size="30"
|
||||
@click="getLike(index)"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="reply" v-if="item.reply">
|
||||
@ -46,119 +149,24 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
commentList: [],
|
||||
comment: ''
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getReply();
|
||||
},
|
||||
methods: {
|
||||
// 点赞
|
||||
getLike(index) {
|
||||
if (index === 0 || index > 0) {
|
||||
this.commentList[index].isLike = !this.commentList[index].isLike;
|
||||
if (this.commentList[index].isLike == true) {
|
||||
this.commentList[index].likeNum++;
|
||||
} else {
|
||||
this.commentList[index].likeNum--;
|
||||
}
|
||||
} else {
|
||||
if (this.comment.isLike == true) {
|
||||
this.comment.isLike = !this.comment.isLike;
|
||||
this.comment.likeNum--;
|
||||
} else {
|
||||
this.comment.isLike = !this.comment.isLike;
|
||||
this.comment.likeNum++;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 回复列表
|
||||
getReply() {
|
||||
this.comment = {
|
||||
id: 1,
|
||||
name: '叶轻眉',
|
||||
date: '12-25 18:58',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
|
||||
allReply: 12,
|
||||
likeNum: 33,
|
||||
isLikes: false
|
||||
};
|
||||
this.commentList = [
|
||||
{
|
||||
name: '新八几',
|
||||
date: '12-25 18:58',
|
||||
contentText: '不要乱打广告啊喂！虽然是真的超好用',
|
||||
url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
|
||||
likeNum: 33,
|
||||
isLike: false,
|
||||
reply: {
|
||||
name: 'uview',
|
||||
contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '叶轻眉1',
|
||||
date: '01-25 13:58',
|
||||
url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
allReply: 0,
|
||||
likeNum: 11,
|
||||
isLike: false,
|
||||
reply: {
|
||||
name: '粘粘',
|
||||
contentStr: '今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '叶轻眉2',
|
||||
date: '03-25 13:58',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
allReply: 0,
|
||||
likeNum: 21,
|
||||
url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
|
||||
isLike: false,
|
||||
allReply: 2,
|
||||
reply: {
|
||||
name: '豆包',
|
||||
contentStr: '想吃冰糖葫芦粘豆包，但没钱5555.........'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '叶轻眉3',
|
||||
date: '06-20 13:58',
|
||||
contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
|
||||
allReply: 0,
|
||||
likeNum: 150,
|
||||
url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
|
||||
isLike: false
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.comment {
|
||||
padding: 30rpx;
|
||||
font-size: 32rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
|
||||
.heart-photo {
|
||||
image {
|
||||
width: 64rpx;
|
||||
@ -167,43 +175,53 @@ page {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin-left: 10rpx;
|
||||
|
||||
.name {
|
||||
color: #5677fc;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 20rpx;
|
||||
color: $u-light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
font-size: 20rpx;
|
||||
align-items: center;
|
||||
color: #9a9a9a;
|
||||
|
||||
.like {
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
.num{
|
||||
|
||||
.num {
|
||||
font-size: 26rpx;
|
||||
color: #9a9a9a;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #5677fc;
|
||||
.num{
|
||||
|
||||
.num {
|
||||
color: #5677fc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.all-reply {
|
||||
margin-top: 10rpx;
|
||||
padding-top: 20rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
.all-reply-top {
|
||||
margin-left: 20rpx;
|
||||
padding-left: 20rpx;
|
||||
@ -211,14 +229,17 @@ page {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-bottom: solid 2rpx $u-border-color;
|
||||
}
|
||||
|
||||
.reply {
|
||||
padding: 20rpx;
|
||||
background-color: rgb(242, 242, 242);
|
||||
border-radius: 12rpx;
|
||||
margin: 10rpx 0;
|
||||
|
||||
.username {
|
||||
font-size: 24rpx;
|
||||
color: #7a7a7a;
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<script setup>
|
||||
</script>
|
||||
<template>
|
||||
<view class="u-wrap">
|
||||
<view class="meituan">
|
||||
@ -57,18 +59,18 @@
|
||||
<view class="taobao">
|
||||
<view class="title">
|
||||
<view class="left">
|
||||
<image class="buddha" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1975388697,1068670603&fm=26&gp=0.jpg" mode="aspectFill"></image>
|
||||
<image class="buddha"
|
||||
src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1975388697,1068670603&fm=26&gp=0.jpg"
|
||||
mode="aspectFill"></image>
|
||||
<view class="store">袜子精保护协会</view>
|
||||
</view>
|
||||
<view class="entrance">进店</view>
|
||||
</view>
|
||||
<view class="ticket">
|
||||
<view class="left">
|
||||
<image
|
||||
class="picture"
|
||||
<image class="picture"
|
||||
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578059523488&di=5f592ac19c1b983005d3e85add469756&imgtype=0&src=http%3A%2F%2Fimg010.hc360.cn%2Fg7%2FM00%2F2D%2FB9%2FwKhQs1QfUo6EdeM-AAAAALwk1hM072.jpg"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
mode="widthFix"></image>
|
||||
<view class="introduce">
|
||||
<view class="top">
|
||||
￥
|
||||
@ -88,17 +90,12 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: rgb(244, 244, 244);
|
||||
}
|
||||
|
||||
.u-wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
@ -110,23 +107,28 @@ page {
|
||||
// border: 10rpx;
|
||||
color: $u-warning;
|
||||
font-size: 28rpx;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 80rpx 20rpx;
|
||||
border: 10rpx;
|
||||
background-color: #fff5f4;
|
||||
|
||||
.left {
|
||||
.sum {
|
||||
font-size: 32rpx;
|
||||
|
||||
.num {
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.centre {
|
||||
margin-left: 40rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
@ -134,21 +136,24 @@ page {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 30rpx;
|
||||
|
||||
.immediate-use {
|
||||
padding: 0 20rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
line-height: 50rpx;
|
||||
background-color: $u-warning!important;
|
||||
color: #ffffff!important;
|
||||
background-color: $u-warning !important;
|
||||
color: #ffffff !important;
|
||||
font-size: 24rpx;
|
||||
border: none;
|
||||
word-break: keep-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
padding: 0 20rpx;
|
||||
border: 10rpx;
|
||||
@ -159,6 +164,7 @@ page {
|
||||
justify-content: space-between;
|
||||
line-height: 60rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
.circle-left,
|
||||
.circle-right {
|
||||
position: absolute;
|
||||
@ -178,10 +184,12 @@ page {
|
||||
left: 0;
|
||||
top: -18rpx;
|
||||
}
|
||||
|
||||
.rule {
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
margin-right: 10rpx;
|
||||
flex: 1;
|
||||
@ -196,33 +204,41 @@ page {
|
||||
height: auto;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
padding: 0 30rpx;
|
||||
background-color: rgb(95, 148, 224); //rgb(94, 152, 225);
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
|
||||
.sum {
|
||||
margin-top: 50rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
|
||||
.num {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.type {
|
||||
margin-bottom: 50rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 20rpx 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
|
||||
.top {
|
||||
border-bottom: 2rpx dashed $u-border-color;
|
||||
|
||||
.title {
|
||||
margin-right: 60rpx;
|
||||
line-height: 40rpx;
|
||||
|
||||
.tag {
|
||||
padding: 4rpx 20rpx;
|
||||
background-color: rgb(73, 154, 201);
|
||||
@ -233,16 +249,19 @@ page {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
margin-top: 20rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.date {
|
||||
font-size: 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.immediate-use {
|
||||
height: auto;
|
||||
padding: 0 20rpx;
|
||||
@ -254,6 +273,7 @@ page {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
width: 100%;
|
||||
line-height: 50rpx;
|
||||
@ -261,13 +281,16 @@ page {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
|
||||
.transpond {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.explain {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.particulars {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
@ -287,25 +310,30 @@ page {
|
||||
background-color: white;
|
||||
padding: 30rpx 20rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 30rpx;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.store {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.buddha {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.entrance {
|
||||
color: $u-info;
|
||||
border: solid 2rpx $u-info;
|
||||
@ -315,8 +343,10 @@ page {
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticket {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
width: 70%;
|
||||
padding: 30rpx 20rpx;
|
||||
@ -324,33 +354,40 @@ page {
|
||||
border-radius: 20rpx;
|
||||
border-right: dashed 2rpx rgb(224, 215, 211);
|
||||
display: flex;
|
||||
|
||||
.picture {
|
||||
width: 172rpx;
|
||||
height: 172rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.introduce {
|
||||
margin-left: 10rpx;
|
||||
.top{
|
||||
color:$u-warning;
|
||||
|
||||
.top {
|
||||
color: $u-warning;
|
||||
font-size: 28rpx;
|
||||
.big{
|
||||
|
||||
.big {
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.type{
|
||||
|
||||
.type {
|
||||
font-size: 28rpx;
|
||||
color: $u-info-dark;
|
||||
}
|
||||
.date{
|
||||
|
||||
.date {
|
||||
margin-top: 10rpx;
|
||||
font-size: 20rpx;
|
||||
color: $u-info-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 30%;
|
||||
padding: 40rpx 20rpx;
|
||||
@ -358,13 +395,14 @@ page {
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.use{
|
||||
|
||||
.use {
|
||||
height: auto;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 40rpx;
|
||||
color: #ffffff!important;
|
||||
background-color: $u-warning!important;
|
||||
color: #ffffff !important;
|
||||
background-color: $u-warning !important;
|
||||
line-height: 40rpx;
|
||||
color: rgb(117, 142, 165);
|
||||
margin-left: 20rpx;
|
||||
|
||||
@ -1,3 +1,62 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
const show = ref(false)
|
||||
const password = ref('')
|
||||
|
||||
onLoad(() => {
|
||||
})
|
||||
|
||||
const onChange = (val) => {
|
||||
if (password.value.length < 6) {
|
||||
password.value += val
|
||||
}
|
||||
|
||||
if (password.value.length >= 6) {
|
||||
pay()
|
||||
}
|
||||
}
|
||||
|
||||
const onBackspace = () => {
|
||||
if (password.value.length > 0) {
|
||||
password.value = password.value.substring(0, password.value.length - 1)
|
||||
}
|
||||
}
|
||||
|
||||
const pay = () => {
|
||||
uni.showLoading({
|
||||
title: '支付中'
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
show.value = false
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: '支付成功'
|
||||
})
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
const showPop = (flag = true) => {
|
||||
password.value = ''
|
||||
show.value = flag
|
||||
// #ifdef H5 || WEB
|
||||
setTimeout(() => {
|
||||
const btn = document.querySelector('.u-keyboard__button-wrapper__button.u-keyboard__button-wrapper__button--gray')
|
||||
if (btn) {
|
||||
console.log(btn)
|
||||
btn.onclick = onBackspace
|
||||
}
|
||||
}, 500)
|
||||
// #endif
|
||||
}
|
||||
|
||||
const finish = () => {
|
||||
console.log(11111)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-padding-40">
|
||||
@ -26,65 +85,6 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
password: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
onChange(val) {
|
||||
if (this.password.length < 6) {
|
||||
this.password += val;
|
||||
}
|
||||
|
||||
if (this.password.length >= 6) {
|
||||
this.pay();
|
||||
}
|
||||
},
|
||||
onBackspace(e) {
|
||||
if (this.password.length > 0) {
|
||||
this.password = this.password.substring(0, this.password.length - 1);
|
||||
}
|
||||
},
|
||||
pay() {
|
||||
uni.showLoading({
|
||||
title: '支付中'
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
this.show = false;
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: '支付成功'
|
||||
})
|
||||
}, 2000);
|
||||
},
|
||||
showPop(flag = true) {
|
||||
this.password = '';
|
||||
this.show = flag;
|
||||
// #ifdef H5 || WEB
|
||||
setTimeout(() => {
|
||||
const btn = document.querySelector('.u-keyboard__button-wrapper__button.u-keyboard__button-wrapper__button--gray');
|
||||
if (!!btn) {
|
||||
console.log(btn);
|
||||
btn.onclick = this.onBackspace
|
||||
}
|
||||
}, 500)
|
||||
// #endif
|
||||
},
|
||||
finish() {
|
||||
console.log(11111)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.money {
|
||||
font-size: 80rpx;
|
||||
|
||||
@ -1,9 +1,52 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const maxlength = ref(4);
|
||||
const value = ref('');
|
||||
const second = ref(3);
|
||||
const show = ref(false);
|
||||
const error = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
let interval = setInterval(() => {
|
||||
second.value--;
|
||||
if (second.value <= 0) {
|
||||
show.value = true;
|
||||
if (value.value.length !== 4) {
|
||||
error.value = true;
|
||||
}
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
const noCaptcha = () => {
|
||||
uni.showActionSheet({
|
||||
itemList: ['重新获取验证码', '接听语音验证码'],
|
||||
success: function (res) {
|
||||
// 处理成功逻辑
|
||||
},
|
||||
fail: function (res) {
|
||||
// 处理失败逻辑
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const change = (value) => {
|
||||
// console.log('change', value);
|
||||
};
|
||||
|
||||
const finish = (value) => {
|
||||
// console.log('finish', value);
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<view class="wrap">
|
||||
<view class="key-input">
|
||||
<view class="title">输入验证码</view>
|
||||
<view class="tips">验证码已发送至 +150****9320</view>
|
||||
<u-message-input :focus="true" :value="value" @change="change" @finish="finish" mode="bottomLine" :maxlength="maxlength"></u-message-input>
|
||||
<u-message-input :focus="true" :value="value" @change="change" @finish="finish" mode="bottomLine"
|
||||
:maxlength="maxlength"></u-message-input>
|
||||
<text :class="{ error: error }">验证码错误，请重新输入</text>
|
||||
<view class="captcha">
|
||||
<text :class="{ noCaptcha: show }" @tap="noCaptcha">收不到验证码点这里</text>
|
||||
@ -13,56 +56,6 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
maxlength: 4,
|
||||
value: '',
|
||||
second: 3,
|
||||
show: false,
|
||||
error: false
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
onLoad() {
|
||||
// this.getCaptcha()
|
||||
let interval = setInterval(() => {
|
||||
this.second--;
|
||||
if (this.second <= 0) {
|
||||
this.show = true;
|
||||
if (this.value.lenth != 4) {
|
||||
this.error = true;
|
||||
}
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
// 收不到验证码选择时的选择
|
||||
noCaptcha() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['重新获取验证码', '接听语音验证码'],
|
||||
success: function(res) {
|
||||
|
||||
},
|
||||
fail: function(res) {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
// change事件侦听
|
||||
change(value) {
|
||||
// console.log('change', value);
|
||||
},
|
||||
// 输入完验证码最后一位执行
|
||||
finish(value) {
|
||||
// console.log('finish', value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
padding: 80rpx;
|
||||
@ -76,9 +69,11 @@ export default {
|
||||
|
||||
.key-input {
|
||||
padding: 30rpx 0;
|
||||
|
||||
text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: block;
|
||||
color: red;
|
||||
@ -98,13 +93,16 @@ export default {
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.captcha {
|
||||
color: $u-warning;
|
||||
font-size: 30rpx;
|
||||
margin-top: 40rpx;
|
||||
|
||||
.noCaptcha {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.regain {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -31,31 +31,24 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tel: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inputStyle() {
|
||||
let style = {};
|
||||
if(this.tel) {
|
||||
style.color = "#fff";
|
||||
style.backgroundColor = this.$u.color['warning'];
|
||||
}
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
if(this.$u.test.mobile(this.tel)) {
|
||||
this.$u.route({
|
||||
url: 'pages/template/login/code'
|
||||
})
|
||||
}
|
||||
}
|
||||
<script setup>
|
||||
import tab from '@/plugins/tab';
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
const tel = ref('');
|
||||
|
||||
const inputStyle = computed(() => {
|
||||
let style = {};
|
||||
if (tel.value) {
|
||||
style.color = "#fff";
|
||||
style.backgroundColor = '#f9c00c'; // 假设 $u.color['warning'] 对应的颜色值
|
||||
}
|
||||
return style;
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
if (/\d{11}/.test(tel.value)) { // 假设 $u.test.mobile 是简单的手机号验证
|
||||
tab.navigateTo('/pages_template/pages/login/code');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -63,6 +56,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
font-size: 28rpx;
|
||||
|
||||
.content {
|
||||
width: 600rpx;
|
||||
margin: 80rpx auto 0;
|
||||
@ -73,17 +67,20 @@ export default {
|
||||
font-weight: 500;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
text-align: left;
|
||||
margin-bottom: 10rpx;
|
||||
padding-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: $u-info;
|
||||
margin-bottom: 60rpx;
|
||||
margin-top: 8rpx;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.getCaptcha {
|
||||
background-color: rgb(253, 243, 208);
|
||||
color: $u-tips-color;
|
||||
@ -95,6 +92,7 @@ export default {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.alternative {
|
||||
color: $u-tips-color;
|
||||
display: flex;
|
||||
@ -102,11 +100,12 @@ export default {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.buttom {
|
||||
.loginType {
|
||||
display: flex;
|
||||
padding: 350rpx 150rpx 150rpx 150rpx;
|
||||
justify-content:space-between;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
<view class="login-form-content">
|
||||
<view class="input-item flex align-center">
|
||||
<view class="iconfont icon-user icon"></view>
|
||||
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
|
||||
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号"
|
||||
maxlength="30" />
|
||||
</view>
|
||||
<view class="input-item flex align-center">
|
||||
<view class="iconfont icon-password icon"></view>
|
||||
@ -20,7 +21,8 @@
|
||||
</view>
|
||||
<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
|
||||
<view class="iconfont icon-code icon"></view>
|
||||
<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
|
||||
<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码"
|
||||
maxlength="4" />
|
||||
<view class="login-code">
|
||||
<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
|
||||
</view>
|
||||
@ -37,8 +39,8 @@
|
||||
<view v-else>
|
||||
<view class="container">
|
||||
<view class="cover slide-top1" :style="'animation-play-state:' + play[2]">
|
||||
<view class="masking slide-top" :class="[collapsedClass, { animating: isAnimating }]" ref="fixedView"
|
||||
:style="'animation-play-state:' + play[0]">
|
||||
<view class="masking slide-top" :class="[collapsedClass, { animating: isAnimating }]"
|
||||
ref="fixedViewRef" :style="'animation-play-state:' + play[0]">
|
||||
<uni-row>
|
||||
<text class="text-first">欢迎使用</text>
|
||||
<text class="text-second">校园访客</text>
|
||||
@ -70,110 +72,103 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src: "staticimagessoutheast.jpg",
|
||||
isActive: false,
|
||||
isFixedViewVisible: true,
|
||||
animationType: "up", // 可选值：right 或 up
|
||||
isAnimating: false, // 控制动画执行状态
|
||||
play: ["paused", "paused", "paused"],
|
||||
page: "index",
|
||||
import tab from '@/plugins/tab'
|
||||
import modal from '@/plugins/modal'
|
||||
|
||||
codeUrl: "",
|
||||
captchaEnabled: true,
|
||||
loginForm: {
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
code: "",
|
||||
uuid: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
collapsedClass() {
|
||||
return this.isFixedViewVisible ? "" : `collapsed-${this.animationType}`;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getCode()
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
this.play[2] = "running"
|
||||
setTimeout(() => { this.page = 'login' }, 1000)
|
||||
const src = ref("staticimagessoutheast.jpg")
|
||||
const isActive = ref(false)
|
||||
const isFixedViewVisible = ref(true)
|
||||
const animationType = ref("up") // 可选值：right 或 up
|
||||
const isAnimating = ref(false) // 控制动画执行状态
|
||||
const play = ref(["paused", "paused", "paused"])
|
||||
const page = ref("index")
|
||||
|
||||
},
|
||||
back() {
|
||||
this.page = 'index'
|
||||
this.play[0] = "paused"
|
||||
this.play[1] = "paused"
|
||||
this.play[2] = "paused"
|
||||
},
|
||||
startplay() {
|
||||
this.play[1] = "running"
|
||||
this.isActive = true;
|
||||
setTimeout(() => { this.isActive = false; }, 300);
|
||||
if (this.isAnimating) { return; }
|
||||
this.isAnimating = false; // 开始动画执行
|
||||
this.play[0] = "running"
|
||||
this.isFixedViewVisible = !this.isFixedViewVisible;
|
||||
let fixedView = this.$refs.fixedView;
|
||||
if (fixedView)
|
||||
fixedView.addEventListener('transitionend', () => { this.isAnimating = false; }, { once: true });
|
||||
const codeUrl = ref("")
|
||||
const captchaEnabled = ref(true)
|
||||
const loginForm = reactive({
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
code: "",
|
||||
uuid: ''
|
||||
})
|
||||
|
||||
setTimeout(() => { uni.navigateBack({ delta: 1 }); }, 1000)
|
||||
},
|
||||
const collapsedClass = computed(() => {
|
||||
return isFixedViewVisible.value ? "" : `collapsed-${animationType.value}`;
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getCode()
|
||||
})
|
||||
|
||||
const login = () => {
|
||||
play.value[2] = "running"
|
||||
setTimeout(() => { page.value = 'login' }, 1000)
|
||||
}
|
||||
|
||||
// 获取图形验证码
|
||||
getCode() {
|
||||
let res = {}
|
||||
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
|
||||
if (this.captchaEnabled) {
|
||||
this.codeUrl = 'data:image/gif;base64,' + res.img
|
||||
this.loginForm.uuid = res.uuid
|
||||
}
|
||||
},
|
||||
// 登录方法
|
||||
async handleLogin() {
|
||||
if (this.loginForm.username === "") {
|
||||
this.$modal.msgError("请输入您的账号")
|
||||
} else if (this.loginForm.password === "") {
|
||||
this.$modal.msgError("请输入您的密码")
|
||||
} else if (this.loginForm.code === "" && this.captchaEnabled) {
|
||||
this.$modal.msgError("请输入验证码")
|
||||
} else {
|
||||
this.$modal.loading("登录中，请耐心等待...")
|
||||
this.pwdLogin()
|
||||
}
|
||||
},
|
||||
// 密码登录
|
||||
async pwdLogin() {
|
||||
useUserStore().login(this.loginForm).then(() => {
|
||||
this.$modal.closeLoading()
|
||||
this.loginSuccess()
|
||||
}).catch(() => {
|
||||
if (this.captchaEnabled) {
|
||||
this.getCode()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 登录成功后，处理函数
|
||||
loginSuccess(result) {
|
||||
// 设置用户信息
|
||||
useUserStore().getInfo().then(res => {
|
||||
this.$tab.reLaunch('/pages/index')
|
||||
})
|
||||
}
|
||||
const back = () => {
|
||||
page.value = 'index'
|
||||
play.value[0] = "paused"
|
||||
play.value[1] = "paused"
|
||||
play.value[2] = "paused"
|
||||
}
|
||||
const startplay = () => {
|
||||
play.value[1] = "running"
|
||||
isActive.value = true;
|
||||
setTimeout(() => { isActive.value = false; }, 300);
|
||||
if (isAnimating.value) { return; }
|
||||
isAnimating.value = false; // 开始动画执行
|
||||
play.value[0] = "running"
|
||||
isFixedViewVisible.value = !isFixedViewVisible.value;
|
||||
setTimeout(() => { uni.navigateBack({ delta: 1 }); }, 1000)
|
||||
}
|
||||
|
||||
// 获取图形验证码
|
||||
const getCode = () => {
|
||||
let res = {}
|
||||
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
|
||||
if (captchaEnabled.value) {
|
||||
codeUrl.value = 'data:image/gif;base64,' + res.img
|
||||
loginForm.uuid = res.uuid
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
// 登录方法
|
||||
const handleLogin = async () => {
|
||||
if (loginForm.username === "") {
|
||||
modal.msgError("请输入您的账号")
|
||||
} else if (loginForm.password === "") {
|
||||
modal.msgError("请输入您的密码")
|
||||
} else if (loginForm.code === "" && captchaEnabled.value) {
|
||||
modal.msgError("请输入验证码")
|
||||
} else {
|
||||
modal.loading("登录中，请耐心等待...")
|
||||
pwdLogin()
|
||||
}
|
||||
}
|
||||
|
||||
// 密码登录
|
||||
const pwdLogin = async () => {
|
||||
useUserStore().login(loginForm).then(() => {
|
||||
modal.closeLoading()
|
||||
loginSuccess()
|
||||
}).catch(() => {
|
||||
if (captchaEnabled.value) {
|
||||
getCode()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 登录成功后，处理函数
|
||||
const loginSuccess = (result) => {
|
||||
// 设置用户信息
|
||||
useUserStore().getInfo().then(res => {
|
||||
tab.reLaunch('/pages/index')
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
@ -665,4 +660,3 @@ page {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,3 +1,53 @@
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import classifyData from "@/pages_template/common/classify.data.js";
|
||||
|
||||
const tabbar = reactive(classifyData);
|
||||
const scrollTop = ref(0); // tab标题的滚动条位置
|
||||
const current = ref(0); // 预设当前项的值
|
||||
const menuHeight = ref(0); // 左边菜单的高度
|
||||
const menuItemHeight = ref(0); // 左边菜单item的高度
|
||||
|
||||
// 点击左边的栏目切换
|
||||
const swichMenu = async (index) => {
|
||||
if (index === current.value) return;
|
||||
current.value = index;
|
||||
// 如果为0，意味着尚未初始化
|
||||
if (menuHeight.value === 0 || menuItemHeight.value === 0) {
|
||||
await getElRect('menu-scroll-view', 'menuHeight');
|
||||
await getElRect('u-tab-item', 'menuItemHeight');
|
||||
}
|
||||
// 将菜单菜单活动item垂直居中
|
||||
scrollTop.value = index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;
|
||||
};
|
||||
|
||||
// 获取一个目标元素的高度
|
||||
const getElRect = (elClass, dataVal) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.' + elClass).fields({ size: true }, res => {
|
||||
// 如果节点尚未生成，res值为null，循环调用执行
|
||||
if (!res) {
|
||||
setTimeout(() => {
|
||||
getElRect(elClass, dataVal);
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
if (dataVal === 'menuHeight') {
|
||||
menuHeight.value = res.height;
|
||||
} else if (dataVal === 'menuItemHeight') {
|
||||
menuItemHeight.value = res.height;
|
||||
}
|
||||
resolve();
|
||||
}).exec();
|
||||
});
|
||||
};
|
||||
|
||||
const clickMenu = (menu) => {
|
||||
console.log(menu);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="u-wrap">
|
||||
<view class="u-search-box">
|
||||
@ -36,54 +86,6 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import classifyData from "@/pages_template/common/classify.data.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabbar: classifyData,
|
||||
scrollTop: 0, //tab标题的滚动条位置
|
||||
current: 0, // 预设当前项的值
|
||||
menuHeight: 0, // 左边菜单的高度
|
||||
menuItemHeight: 0, // 左边菜单item的高度
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击左边的栏目切换
|
||||
async swichMenu(index) {
|
||||
if (index == this.current) return;
|
||||
this.current = index;
|
||||
// 如果为0，意味着尚未初始化
|
||||
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
||||
await this.getElRect('menu-scroll-view', 'menuHeight');
|
||||
await this.getElRect('u-tab-item', 'menuItemHeight');
|
||||
}
|
||||
// 将菜单菜单活动item垂直居中
|
||||
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
|
||||
},
|
||||
// 获取一个目标元素的高度
|
||||
getElRect(elClass, dataVal) {
|
||||
new Promise((resolve, reject) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.' + elClass).fields({ size: true }, res => {
|
||||
// 如果节点尚未生成，res值为null，循环调用执行
|
||||
if (!res) {
|
||||
setTimeout(() => {
|
||||
this.getElRect(elClass);
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
this[dataVal] = res.height;
|
||||
}).exec();
|
||||
})
|
||||
},
|
||||
clickMenu(menu) {
|
||||
console.log(menu);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-wrap {
|
||||
height: calc(100vh);
|
||||
|
||||
@ -1,3 +1,138 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from 'vue';
|
||||
import classifyData from '@/pages_template/common/classify.data.js';
|
||||
|
||||
const scrollTop = ref(0); // tab标题的滚动条位置
|
||||
const oldScrollTop = ref(0);
|
||||
const current = ref(0); // 预设当前项的值
|
||||
const menuHeight = ref(0); // 左边菜单的高度
|
||||
const menuItemHeight = ref(0); // 左边菜单item的高度
|
||||
const itemId = ref(''); // 栏目右边scroll-view用于滚动的id
|
||||
const tabbar = classifyData;
|
||||
|
||||
const arr = ref([]);
|
||||
const scrollRightTop = ref(0); // 右边栏目scroll-view的滚动条高度
|
||||
const timer = ref(null); // 定时器
|
||||
|
||||
onMounted(() => {
|
||||
getMenuItemTop();
|
||||
});
|
||||
|
||||
// 点击左边的栏目切换
|
||||
const swichMenu = async (index) => {
|
||||
if (arr.value.length === 0) {
|
||||
await getMenuItemTop();
|
||||
}
|
||||
if (index === current.value) return;
|
||||
scrollRightTop.value = oldScrollTop.value;
|
||||
await nextTick(() => {
|
||||
scrollRightTop.value = arr.value[index];
|
||||
current.value = index;
|
||||
leftMenuStatus(index);
|
||||
});
|
||||
};
|
||||
|
||||
// 获取一个目标元素的高度
|
||||
const getElRect = (elClass, dataVal) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.' + elClass).fields({
|
||||
size: true
|
||||
}, (res) => {
|
||||
// 如果节点尚未生成，res值为null，循环调用执行
|
||||
if (!res) {
|
||||
setTimeout(() => {
|
||||
getElRect(elClass, dataVal);
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
dataVal.value = res.height;
|
||||
resolve();
|
||||
}).exec();
|
||||
});
|
||||
};
|
||||
|
||||
// 观测元素相交状态
|
||||
const observer = () => {
|
||||
tabbar.map((val, index) => {
|
||||
let observer = uni.createIntersectionObserver(this);
|
||||
// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
|
||||
// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
|
||||
observer.relativeTo('.right-box', {
|
||||
top: 0
|
||||
}).observe('#item' + index, (res) => {
|
||||
if (res.intersectionRatio > 0) {
|
||||
let id = res.id.substring(4);
|
||||
leftMenuStatus(id);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 设置左边菜单的滚动状态
|
||||
const leftMenuStatus = async (index) => {
|
||||
current.value = index;
|
||||
// 如果为0，意味着尚未初始化
|
||||
if (menuHeight.value === 0 || menuItemHeight.value === 0) {
|
||||
await getElRect('menu-scroll-view', menuHeight);
|
||||
await getElRect('u-tab-item', menuItemHeight);
|
||||
}
|
||||
// 将菜单活动item垂直居中
|
||||
scrollTop.value = index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;
|
||||
};
|
||||
|
||||
// 获取右边菜单每个item到顶部的距离
|
||||
const getMenuItemTop = () => {
|
||||
return new Promise((resolve) => {
|
||||
let selectorQuery = uni.createSelectorQuery();
|
||||
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
|
||||
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
|
||||
if (!rects.length) {
|
||||
setTimeout(() => {
|
||||
getMenuItemTop();
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
rects.forEach((rect) => {
|
||||
// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
|
||||
arr.value.push(rect.top - rects[0].top);
|
||||
resolve();
|
||||
});
|
||||
}).exec();
|
||||
});
|
||||
};
|
||||
|
||||
// 右边菜单滚动
|
||||
const rightScroll = async (e) => {
|
||||
oldScrollTop.value = e.detail.scrollTop;
|
||||
if (arr.value.length === 0) {
|
||||
await getMenuItemTop();
|
||||
}
|
||||
if (timer.value) return;
|
||||
if (!menuHeight.value) {
|
||||
await getElRect('menu-scroll-view', menuHeight);
|
||||
}
|
||||
setTimeout(() => { // 节流
|
||||
timer.value = null;
|
||||
// scrollHeight为右边菜单垂直中点位置
|
||||
let scrollHeight = e.detail.scrollTop + menuHeight.value / 2;
|
||||
for (let i = 0; i < arr.value.length; i++) {
|
||||
let height1 = arr.value[i];
|
||||
let height2 = arr.value[i + 1];
|
||||
// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
|
||||
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
|
||||
leftMenuStatus(i);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, 10);
|
||||
};
|
||||
|
||||
const clickMenu = (menu) => {
|
||||
console.log(menu);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="u-wrap">
|
||||
<view class="u-search-box">
|
||||
@ -34,140 +169,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import classifyData from '@/pages_template/common/classify.data.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0, //tab标题的滚动条位置
|
||||
oldScrollTop: 0,
|
||||
current: 0, // 预设当前项的值
|
||||
menuHeight: 0, // 左边菜单的高度
|
||||
menuItemHeight: 0, // 左边菜单item的高度
|
||||
itemId: '', // 栏目右边scroll-view用于滚动的id
|
||||
tabbar: classifyData,
|
||||
|
||||
arr: [],
|
||||
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
|
||||
timer: null, // 定时器
|
||||
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.getMenuItemTop()
|
||||
},
|
||||
methods: {
|
||||
// 点击左边的栏目切换
|
||||
async swichMenu(index) {
|
||||
if (this.arr.length == 0) {
|
||||
await this.getMenuItemTop();
|
||||
}
|
||||
if (index == this.current) return;
|
||||
this.scrollRightTop = this.oldScrollTop;
|
||||
this.$nextTick(() => {
|
||||
this.scrollRightTop = this.arr[index];
|
||||
this.current = index;
|
||||
this.leftMenuStatus(index);
|
||||
})
|
||||
},
|
||||
// 获取一个目标元素的高度
|
||||
getElRect(elClass, dataVal) {
|
||||
new Promise((resolve, reject) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.' + elClass).fields({
|
||||
size: true
|
||||
}, res => {
|
||||
// 如果节点尚未生成，res值为null，循环调用执行
|
||||
if (!res) {
|
||||
setTimeout(() => {
|
||||
this.getElRect(elClass);
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
this[dataVal] = res.height;
|
||||
resolve();
|
||||
}).exec();
|
||||
})
|
||||
},
|
||||
// 观测元素相交状态
|
||||
async observer() {
|
||||
this.tabbar.map((val, index) => {
|
||||
let observer = uni.createIntersectionObserver(this);
|
||||
// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
|
||||
// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
|
||||
observer.relativeTo('.right-box', {
|
||||
top: 0
|
||||
}).observe('#item' + index, res => {
|
||||
if (res.intersectionRatio > 0) {
|
||||
let id = res.id.substring(4);
|
||||
this.leftMenuStatus(id);
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 设置左边菜单的滚动状态
|
||||
async leftMenuStatus(index) {
|
||||
this.current = index;
|
||||
// 如果为0，意味着尚未初始化
|
||||
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
||||
await this.getElRect('menu-scroll-view', 'menuHeight');
|
||||
await this.getElRect('u-tab-item', 'menuItemHeight');
|
||||
}
|
||||
// 将菜单活动item垂直居中
|
||||
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
|
||||
},
|
||||
// 获取右边菜单每个item到顶部的距离
|
||||
getMenuItemTop() {
|
||||
new Promise(resolve => {
|
||||
let selectorQuery = uni.createSelectorQuery();
|
||||
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
|
||||
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
|
||||
if (!rects.length) {
|
||||
setTimeout(() => {
|
||||
this.getMenuItemTop();
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
rects.forEach((rect) => {
|
||||
// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
|
||||
this.arr.push(rect.top - rects[0].top);
|
||||
resolve();
|
||||
})
|
||||
}).exec()
|
||||
})
|
||||
},
|
||||
// 右边菜单滚动
|
||||
async rightScroll(e) {
|
||||
this.oldScrollTop = e.detail.scrollTop;
|
||||
if (this.arr.length == 0) {
|
||||
await this.getMenuItemTop();
|
||||
}
|
||||
if (this.timer) return;
|
||||
if (!this.menuHeight) {
|
||||
await this.getElRect('menu-scroll-view', 'menuHeight');
|
||||
}
|
||||
setTimeout(() => { // 节流
|
||||
this.timer = null;
|
||||
// scrollHeight为右边菜单垂直中点位置
|
||||
let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
|
||||
for (let i = 0; i < this.arr.length; i++) {
|
||||
let height1 = this.arr[i];
|
||||
let height2 = this.arr[i + 1];
|
||||
// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
|
||||
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
|
||||
this.leftMenuStatus(i);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, 10)
|
||||
},
|
||||
clickMenu(menu) {
|
||||
console.log(menu);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-wrap {
|
||||
height: calc(100vh);
|
||||
|
||||
@ -1,9 +1,192 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
|
||||
const orderList = ref([[], [], [], []]);
|
||||
const dataList = reactive([
|
||||
{
|
||||
id: 1,
|
||||
store: '夏日流星限定贩卖',
|
||||
deal: '交易成功',
|
||||
goodsList: [
|
||||
{
|
||||
goodsUrl: '//img13.360buyimg.com/n7/jfs/t1/103005/7/17719/314825/5e8c19faEb7eed50d/5b81ae4b2f7f3bb7.jpg',
|
||||
title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
|
||||
type: '灰色;M',
|
||||
deliveryTime: '付款后30天内发货',
|
||||
price: '348.58',
|
||||
number: 2
|
||||
},
|
||||
{
|
||||
goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg',
|
||||
title: '【葡萄藤】现货 小清新学院风制服格裙百褶裙女短款百搭日系甜美风原创jk制服女2020新款',
|
||||
type: '45cm;S',
|
||||
deliveryTime: '付款后30天内发货',
|
||||
price: '135.00',
|
||||
number: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
store: '江南皮革厂',
|
||||
deal: '交易失败',
|
||||
goodsList: [
|
||||
{
|
||||
goodsUrl: '//img14.360buyimg.com/n7/jfs/t1/60319/15/6105/406802/5d43f68aE9f00db8c/0affb7ac46c345e2.jpg',
|
||||
title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
|
||||
type: '粉色;M',
|
||||
deliveryTime: '付款后7天内发货',
|
||||
price: '128.05',
|
||||
number: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
store: '三星旗舰店',
|
||||
deal: '交易失败',
|
||||
goodsList: [
|
||||
{
|
||||
goodsUrl: '//img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg',
|
||||
title: '三星（SAMSUNG）京品家电 UA65RUF70AJXXZ 65英寸4K超高清 HDR 京东微联 智能语音 教育资源液晶电视机',
|
||||
type: '4K，广色域',
|
||||
deliveryTime: '保质5年',
|
||||
price: '1998',
|
||||
number: 3
|
||||
},
|
||||
{
|
||||
goodsUrl: '//img14.360buyimg.com/n7/jfs/t6007/205/4099529191/294869/ae4e6d4f/595dcf19Ndce3227d.jpg!q90.jpg',
|
||||
title: '美的(Midea)639升 对开门冰箱 19分钟急速净味 一级能效冷藏双开门杀菌智能家用双变频节能 BCD-639WKPZM(E)',
|
||||
type: '容量大，速冻',
|
||||
deliveryTime: '保质5年',
|
||||
price: '2354',
|
||||
number: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
store: '三星旗舰店',
|
||||
deal: '交易失败',
|
||||
goodsList: [
|
||||
{
|
||||
goodsUrl: '//img10.360buyimg.com/n7/jfs/t22300/31/1505958241/171936/9e201a89/5b2b12ffNe6dbb594.jpg!q90.jpg',
|
||||
title: '法国进口红酒 拉菲（LAFITE）传奇波尔多干红葡萄酒750ml*6整箱装',
|
||||
type: '4K，广色域',
|
||||
deliveryTime: '珍藏10年好酒',
|
||||
price: '1543',
|
||||
number: 3
|
||||
},
|
||||
{
|
||||
goodsUrl: '//img10.360buyimg.com/n7/jfs/t1/107598/17/3766/525060/5e143aacE9a94d43c/03573ae60b8bf0ee.jpg',
|
||||
title: '蓝妹（BLUE GIRL）酷爽啤酒 清啤 原装进口啤酒 罐装 500ml*9听 整箱装',
|
||||
type: '一打',
|
||||
deliveryTime: '口感好',
|
||||
price: '120',
|
||||
number: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
store: '三星旗舰店',
|
||||
deal: '交易成功',
|
||||
goodsList: [
|
||||
{
|
||||
goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/52408/35/3554/78293/5d12e9cfEfd118ba1/ba5995e62cbd747f.jpg!q90.jpg',
|
||||
title: '企业微信 中控人脸指纹识别考勤机刷脸机 无线签到异地多店打卡机WX108',
|
||||
type: '识别效率高',
|
||||
deliveryTime: '使用方便',
|
||||
price: '451',
|
||||
number: 9
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
const list = reactive([
|
||||
{ name: '待付款' },
|
||||
{ name: '待发货' },
|
||||
{ name: '待收货' },
|
||||
{ name: '待评价', count: 12 }
|
||||
]);
|
||||
const current = ref(0);
|
||||
const swiperCurrent = ref(0);
|
||||
const loadStatus = ref(['loadmore', 'loadmore', 'loadmore', 'loadmore']);
|
||||
|
||||
onMounted(() => {
|
||||
getOrderList(0);
|
||||
getOrderList(1);
|
||||
getOrderList(3);
|
||||
});
|
||||
|
||||
// 价格小数
|
||||
const priceDecimal = (val) => {
|
||||
if (val !== parseInt(val)) return val.slice(-2);
|
||||
else return '00';
|
||||
};
|
||||
|
||||
// 价格整数
|
||||
const priceInt = (val) => {
|
||||
if (val !== parseInt(val)) return val.split('.')[0];
|
||||
else return val;
|
||||
};
|
||||
|
||||
// 触底懒加载
|
||||
const reachBottom = () => {
|
||||
loadStatus.value.splice(current.value, 1, "loading");
|
||||
setTimeout(() => {
|
||||
getOrderList(current.value);
|
||||
}, 1200);
|
||||
};
|
||||
|
||||
// 页面数据
|
||||
const getOrderList = (idx) => {
|
||||
// 模拟第n个页面获取数据
|
||||
for (let i = 0; i < 5; i++) {
|
||||
let index = Math.floor(Math.random() * dataList.length);
|
||||
let data = JSON.parse(JSON.stringify(dataList[index]));
|
||||
data.id = Math.random().toString(36).substr(2, 9);
|
||||
orderList.value[idx].push(data);
|
||||
}
|
||||
loadStatus.value.splice(current.value, 1, "loadmore");
|
||||
};
|
||||
|
||||
// 总价
|
||||
const totalPrice = (item) => {
|
||||
let price = 0;
|
||||
item.forEach(val => {
|
||||
price += parseFloat(val.price);
|
||||
});
|
||||
return price.toFixed(2);
|
||||
};
|
||||
|
||||
// 总件数
|
||||
const totalNum = (item) => {
|
||||
let num = 0;
|
||||
item.forEach(val => {
|
||||
num += val.number;
|
||||
});
|
||||
return num;
|
||||
};
|
||||
|
||||
// tab栏切换
|
||||
const change = ({ index }) => {
|
||||
swiperCurrent.value = index;
|
||||
getOrderList(index);
|
||||
};
|
||||
|
||||
const animationfinish = ({ detail: { current } }) => {
|
||||
swiperCurrent.value = current;
|
||||
current.value = current;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="wrap">
|
||||
<view class="u-tabs-box">
|
||||
<u-tabs activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false"
|
||||
swiperWidth="750"></u-tabs>
|
||||
<u-tabs activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
|
||||
:is-scroll="false" swiperWidth="750"></u-tabs>
|
||||
</view>
|
||||
<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
|
||||
<swiper-item class="swiper-item" v-for="(orderlist, index) in orderList" :key="index">
|
||||
@ -58,7 +241,8 @@
|
||||
<view class="page-box">
|
||||
<view>
|
||||
<view class="centre">
|
||||
<image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode=""></image>
|
||||
<image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode="">
|
||||
</image>
|
||||
<view class="explain">
|
||||
您还没有相关的订单
|
||||
<view class="tips">可以去看看有那些想买的</view>
|
||||
@ -73,193 +257,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderList: [[], [], [], []],
|
||||
dataList: [
|
||||
{
|
||||
id: 1,
|
||||
store: '夏日流星限定贩卖',
|
||||
deal: '交易成功',
|
||||
goodsList: [
|
||||
{
|
||||
goodsUrl: '//img13.360buyimg.com/n7/jfs/t1/103005/7/17719/314825/5e8c19faEb7eed50d/5b81ae4b2f7f3bb7.jpg',
|
||||
title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
|
||||
type: '灰色;M',
|
||||
deliveryTime: '付款后30天内发货',
|
||||
price: '348.58',
|
||||
number: 2
|
||||
},
|
||||
{
|
||||
goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg',
|
||||
title: '【葡萄藤】现货 小清新学院风制服格裙百褶裙女短款百搭日系甜美风原创jk制服女2020新款',
|
||||
type: '45cm;S',
|
||||
deliveryTime: '付款后30天内发货',
|
||||
price: '135.00',
|
||||
number: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
store: '江南皮革厂',
|
||||
deal: '交易失败',
|
||||
goodsList: [
|
||||
{
|
||||
goodsUrl: '//img14.360buyimg.com/n7/jfs/t1/60319/15/6105/406802/5d43f68aE9f00db8c/0affb7ac46c345e2.jpg',
|
||||
title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
|
||||
type: '粉色;M',
|
||||
deliveryTime: '付款后7天内发货',
|
||||
price: '128.05',
|
||||
number: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
store: '三星旗舰店',
|
||||
deal: '交易失败',
|
||||
goodsList: [
|
||||
{
|
||||
goodsUrl: '//img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg',
|
||||
title: '三星（SAMSUNG）京品家电 UA65RUF70AJXXZ 65英寸4K超高清 HDR 京东微联 智能语音 教育资源液晶电视机',
|
||||
type: '4K，广色域',
|
||||
deliveryTime: '保质5年',
|
||||
price: '1998',
|
||||
number: 3
|
||||
},
|
||||
{
|
||||
goodsUrl: '//img14.360buyimg.com/n7/jfs/t6007/205/4099529191/294869/ae4e6d4f/595dcf19Ndce3227d.jpg!q90.jpg',
|
||||
title: '美的(Midea)639升 对开门冰箱 19分钟急速净味 一级能效冷藏双开门杀菌智能家用双变频节能 BCD-639WKPZM(E)',
|
||||
type: '容量大，速冻',
|
||||
deliveryTime: '保质5年',
|
||||
price: '2354',
|
||||
number: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
store: '三星旗舰店',
|
||||
deal: '交易失败',
|
||||
goodsList: [
|
||||
{
|
||||
goodsUrl: '//img10.360buyimg.com/n7/jfs/t22300/31/1505958241/171936/9e201a89/5b2b12ffNe6dbb594.jpg!q90.jpg',
|
||||
title: '法国进口红酒 拉菲（LAFITE）传奇波尔多干红葡萄酒750ml*6整箱装',
|
||||
type: '4K，广色域',
|
||||
deliveryTime: '珍藏10年好酒',
|
||||
price: '1543',
|
||||
number: 3
|
||||
},
|
||||
{
|
||||
goodsUrl: '//img10.360buyimg.com/n7/jfs/t1/107598/17/3766/525060/5e143aacE9a94d43c/03573ae60b8bf0ee.jpg',
|
||||
title: '蓝妹（BLUE GIRL）酷爽啤酒 清啤 原装进口啤酒 罐装 500ml*9听 整箱装',
|
||||
type: '一打',
|
||||
deliveryTime: '口感好',
|
||||
price: '120',
|
||||
number: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
store: '三星旗舰店',
|
||||
deal: '交易成功',
|
||||
goodsList: [
|
||||
{
|
||||
goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/52408/35/3554/78293/5d12e9cfEfd118ba1/ba5995e62cbd747f.jpg!q90.jpg',
|
||||
title: '企业微信 中控人脸指纹识别考勤机刷脸机 无线签到异地多店打卡机WX108',
|
||||
type: '识别效率高',
|
||||
deliveryTime: '使用方便',
|
||||
price: '451',
|
||||
number: 9
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
list: [
|
||||
{name: '待付款'},
|
||||
{name: '待发货'},
|
||||
{name: '待收货'},
|
||||
{name: '待评价',count: 12}
|
||||
],
|
||||
current: 0,
|
||||
swiperCurrent: 0,
|
||||
loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getOrderList(0);
|
||||
this.getOrderList(1);
|
||||
this.getOrderList(3);
|
||||
},
|
||||
computed: {
|
||||
// 价格小数
|
||||
priceDecimal() {
|
||||
return val => {
|
||||
if (val !== parseInt(val)) return val.slice(-2);
|
||||
else return '00';
|
||||
};
|
||||
},
|
||||
// 价格整数
|
||||
priceInt() {
|
||||
return val => {
|
||||
if (val !== parseInt(val)) return val.split('.')[0];
|
||||
else return val;
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 触底懒加载
|
||||
reachBottom() {
|
||||
this.loadStatus.splice(this.current, 1, "loading")
|
||||
setTimeout(() => {
|
||||
this.getOrderList(this.current);
|
||||
}, 1200);
|
||||
},
|
||||
// 页面数据
|
||||
getOrderList(idx) {
|
||||
// 模拟第n个页面获取数据
|
||||
for (let i = 0; i < 5; i++) {
|
||||
let index = this.$u.random(0, this.dataList.length - 1);
|
||||
let data = JSON.parse(JSON.stringify(this.dataList[index]));
|
||||
data.id = this.$u.guid();
|
||||
this.orderList[idx].push(data);
|
||||
}
|
||||
this.loadStatus.splice(this.current, 1, "loadmore")
|
||||
},
|
||||
// 总价
|
||||
totalPrice(item) {
|
||||
let price = 0;
|
||||
item.map(val => {
|
||||
price += parseFloat(val.price);
|
||||
});
|
||||
return price.toFixed(2);
|
||||
},
|
||||
// 总件数
|
||||
totalNum(item) {
|
||||
let num = 0;
|
||||
item.map(val => {
|
||||
num += val.number;
|
||||
});
|
||||
return num;
|
||||
},
|
||||
// tab栏切换
|
||||
change({ index }) {
|
||||
this.swiperCurrent = index;
|
||||
this.getOrderList(index);
|
||||
},
|
||||
animationfinish({ detail: { current } }) {
|
||||
this.swiperCurrent = current;
|
||||
this.current = current;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* #ifndef H5 */
|
||||
page {
|
||||
|
||||
@ -1,6 +1,16 @@
|
||||
<script setup>
|
||||
import tab from '@/plugins/tab';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const pic = ref('https://uviewui.com/common/logo.png');
|
||||
const show = ref(true);
|
||||
|
||||
const navigateBackHandler = () => { tab.navigateBack(); }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :fixed="false" title=" " @leftClick="navigateBack">
|
||||
<u-navbar :fixed="false" title=" " @leftClick="navigateBackHandler">
|
||||
<view class="u-flex u-row-right" style="width: 100%;">
|
||||
<view class="camera u-flex u-row-center">
|
||||
<u-icon name="camera-fill" color="#000000" size="48"></u-icon>
|
||||
@ -46,27 +56,8 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pic: 'https://uviewui.com/common/logo.png',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
navigateBack() {
|
||||
uni.navigateBack({delta: 1 });
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #ededed;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user