XinLingKeJi/jdt-user
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

i

Browse Source
This commit is contained in:
YuanHuakk
2023-08-13 14:45:19 +08:00
commit 433a4d8f3d
31 changed files with 15340 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/cart/index.config.ts Normal file
View File

@@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarTitleText: '首页'
})

53
src/pages/cart/index.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<view class="index">
<view>
<img src="" alt="">
</view>
{{ msg }} <Dongdong />
<view class="btn">
<nut-button type="primary" @click="handleClick('text', msg2, true)">点我</nut-button>
</view>
<nut-toast :msg="msg2" v-model:visible="show" :type="type" :cover="cover"/>
</view>
</template>
<script>
import { reactive, toRefs } from 'vue';
import { Dongdong } from '@nutui/icons-vue-taro';
export default {
name: 'Index',
components: {
Dongdong
},
setup() {
const state = reactive({
msg: '欢迎使用 NutUI4.0 开发小程序',
msg2: '你成功了～',
type: 'text',
show: false,
cover: false
});
const handleClick = (type, msg, cover = false) => {
state.show = true;
state.msg2 = msg;
state.type = type;
state.cover = cover;
};
return {
...toRefs(state),
handleClick
}
}
}
</script>
<style lang="scss">
.index {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
</style>

3
src/pages/category/index.config.ts Normal file
View File

@@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarTitleText: '分类'
})

59
src/pages/category/index.vue Normal file
View File

@@ -0,0 +1,59 @@
<template>
<view class="app">
<nut-tabs style="height:100vh" v-model="val" title-scroll name="tab4value" direction="vertical">
<nut-tab-pane v-for="item in 10" :pane-key="item" :title="'Tab '+ item"> Tab {{item}} </nut-tab-pane>
</nut-tabs>
</view>
</template>
<script lang="ts" setup>
import {ref, onMounted} from 'vue';
const val = ref('0')
const category = ref([
{
catId: 1,
catName: '手机',
},
{
catId: 2,
catName: '电脑',
},
{
catId: 3,
catName: '家电',
},
{
catId: 4,
catName: '生活',
},
{
catId: 5,
catName: '服饰',
}
])
const categoryChild = ref([
{
catId: 1,
catName: '休闲零食',
},
{}
])
const change = (e: any) => {
console.log(e)
}
const onChange = (e) => {
console.log(e)
}
</script>
<style lang="scss">
.app {
height: 100vh;
}
</style>

3
src/pages/index/index.config.ts Normal file
View File

@@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarTitleText: '首页'
})

144
src/pages/index/index.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<view class="app">
<nut-searchbar v-model="searchValue" placeholder="要搜索点什么？"></nut-searchbar>
<nut-swiper :init-page="0" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
<nut-swiper-item v-for="(itm,idx) in swiperList" :key="idx">
<img :src="itm.url" :alt="itm.id"/>
</nut-swiper-item>
</nut-swiper>
<!-- <nut-tabs v-model="tabvalue" background="#fff" title-scroll title-gutter="10" name="0" :auto-height="true">-->
<!-- <nut-tab-pane title="精选推荐">-->
<!-- </nut-tab-pane>-->
<!-- <nut-tab-pane title="夏日防嗮"></nut-tab-pane>-->
<!-- <nut-tab-pane title="人气热榜"></nut-tab-pane>-->
<!-- </nut-tabs>-->
<view class="goodBox">
<view class="good" v-for="item in 5">
<image
src="https://cdn-we-retail.ym.tencent.com/tsr/goods/nz-09a.png?imageMogr2/thumbnail/564x564/quality/70/strip/format/webp"
/>
<view class="good-text-box">
<text class="good-text">白色短袖连衣裙荷叶边裙摆宽松韩版休闲纯白清爽优雅连衣裙</text>
<view class="good-price-box">
<text class="good-text-price"><text style="font-size: 20px">188</text>积分</text>
<Cart size="20" color="#ff0000" @click="addCart()"/>
</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import {Cart} from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';
const searchValue = ref("")
const tabvalue = ref("0")
const swiperList = ref([
{
id: 1,
url: "https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg"
},
{
id: 2,
url: "https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg"
},
{
id: 3,
url: "https://storage.360buyimg.com/jdc-article/welcomenutui.jpg"
},
{
id: 4,
url: "https://storage.360buyimg.com/jdc-article/fristfabu.jpg"
}])
const addCart = () => {
Taro.showToast({
title: '加入购物车成功',
icon: 'success',
duration: 2000
})
}
</script>
<style lang="scss">
.app {
box-sizing: border-box;
background-color: #f5f5f5;
}
.nut-swiper-item {
//line-height: 150px;
//padding: 20px;
}
.nut-swiper-item img {
width: 100%;
height: 350px;
//border-radius: 10px;
}
.goodBox {
//width: 100%;
//height: 100%;
margin-top: 5px;
display: flex;
padding: 20px;
flex-wrap: wrap;
justify-content: space-between;
.good {
width: 340px;
//height: 540px;
background-color: #fff;
margin-bottom: 10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
image {
width: 100%;
height: 350px;
}
.good-text-box {
padding: 10px;
.good-text {
flex-shrink: 0;
font-size: 28px;
color: #333;
font-weight: 400;
display: -webkit-box;
height: 72px;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-word;
line-height: 36px;
}
.good-price-box {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
.good-text-price {
font-size: 28px;
font-weight: bold;
color: #ff0000;
//font-weight: 400;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
}
}
}
}
</style>

4
src/pages/user/index.config.ts Normal file
View File

@@ -0,0 +1,4 @@
export default definePageConfig({
navigationBarTitleText: '个人中心',
navigationStyle: 'custom',
})

169
src/pages/user/index.vue Normal file
View File

@@ -0,0 +1,169 @@
<template>
<view class="app">
<view class="user-center-card__header__transparent">
<view class="user-center-card__header__avatar">
<nut-avatar size="large">
<img
src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
/>
</nut-avatar>
</view>
<view class="user-center-card__header__info">
<view class="user-center-card__header__info__name">小明</view>
<view class="user-center-card__header__info__desc">这个人很懒，什么都没有留下</view>
</view>
</view>
<!--我的订单-->
<view class="cell-card">
<view class="top">
<view>我的订单</view>
<view class="sub">
<view>全部订单</view>
<ArrowRight/>
</view>
</view>
<view class="center">
<view class="center-t">
<Order size="25px"/>
<view class="center-text">待付款</view>
</view>
<view class="center-t">
<Clock size="25px"/>
<view class="center-text">待使用</view>
</view>
<view class="center-t">
<Shop size="25px"/>
<view class="center-text">已使用</view>
</view>
<view class="center-t">
<Del size="25px"/>
<view class="center-text">已失效</view>
</view>
</view>
</view>
<!-- 我的服务 -->
<view class="user-center">
<view>我的服务</view>
<view class="box">
<view class="box-mini" v-for="item in 10">
<image src="http://jdt168.com/uploads/def/20230612/890553361077384e0c1b1d9e164e2feb.png"/>
<view>我的账户</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import {reactive, toRefs} from 'vue';
import {ArrowRight, Order, Del, Clock, Shop} from '@nutui/icons-vue-taro';
</script>
<style lang="scss">
.app {
box-sizing: border-box;
background-color: #f5f5f5;
height: 100vh;
background-image: url('https://cdn-we-retail.ym.tencent.com/miniapp/template/user-center-bg-v1.png');
background-size: auto 40%;
background-repeat: no-repeat;
position: relative;
}
.user-center-card__header__transparent {
position: absolute;
left: 30px;
top: 200px;
background-color: transparent;
//height: 100%;
width: 100%;
display: flex;
//flex-direction: row;
align-items: center;
.user-center-card__header__info {
margin-left: 20px;
color: #333;
font-weight: bolder;
}
}
.cell-card {
box-sizing: border-box;
position: absolute;
top: 350px;
background-color: #fff;
border-radius: 20px;
margin: 20px;
padding: 30px;
width: 710px;
.top {
display: flex;
justify-content: space-between;
align-items: center;
.sub {
display: flex;
color: #c9c9c9;
align-items: center;
}
}
.center {
display: flex;
justify-content: space-between;
color: #666;
.center-t {
margin-top: 30px;
display: flex;
flex-direction: column;
align-items: center;
.center-text {
margin-top: 20px;
}
}
}
}
.user-center {
box-sizing: border-box;
position: absolute;
top: 640px;
background-color: #fff;
border-radius: 20px;
margin: 20px;
padding: 30px;
width: 710px;
.box {
box-sizing: border-box;
margin-top: 20px;
display: flex;
//justify-content: space-between;
flex-wrap: wrap;
.box-mini {
display: flex;
flex-direction: column;
align-items: center;
width: 150px;
margin-bottom: 20px;
margin-right: 13px;
image {
width: 80px;
height: 80px;
}
}
}
}
</style>