鸿蒙ARKTS--简易的购物网站

目录

一、media

二、string.json文件

三、pages

3.1 登录页面：gouwuPage.ets

3.2 PageResource.ets

3.3 商品页面：shangpinPage.ets 

3.4 我的页面：wodePage.ets

3.5 注册页面：zhucePage.ets

3. 购物网站主页面：gwPage.ets

一、media

图片位置：entry > src > main > resources > base > media

百度网盘链接：https://pan.baidu.com/s/1JZn-U5Sqk6hOSHKz6D_98Q 
提取码：bosg

二、string.json文件

以下三个文件均需要添加。

{"string": [{"name": "mylove","value": "我的最爱"},{"name": "historyrecord","value": "历史记录"},{"name": "message","value": "消息"},{"name": "shoppingcart","value": "购物栏"},{"name": "mygoal","value": "我的目标"},{"name": "group","value": "圈子"},{"name": "favorites","value": "收藏"},{"name": "recylebin","value": "回收站"},{"name": "yifu","value": "衣服"},{"name": "yan","value": "烟"},{"name": "jiu","value": "酒"},{"name": "huazhuangpin","value": "化妆品"},{"name": "xie","value": "鞋"},{"name": "daifukuan","value": "待付款"},{"name": "daifahuo","value": "待发货"},{"name": "daishouhuo","value": "待收货"},{"name": "daipinjia","value": "待评价"}]
}

三、pages

3.1 登录页面：gouwuPage.ets

import router from '@ohos.router'
import prompt from '@ohos.promptAction';
@Entry
@Component
struct GouwuPage{//定义SwiperController类型的变量private controller: SwiperController =new SwiperController()private intervalID=0private startPlay(swiper:SwiperController){this.intervalID=setInterval(function (){swiper.showNext()},3000)}
aboutToAppear() {this.startPlay(this.controller)
}@State zhanghao:string|number =''@State mima:string|number =''@State show:boolean=falseprivate timeOut:number=-1//登录方法login():void {if (this.zhanghao == '' || this.mima == '') {prompt.showToast({message: '账号密码不能为空'})} else {AlertDialog.show({message:'loading.....'})this.show = trueif (this.timeOut = -1) {this.timeOut = setTimeout(() => {this.show = falsethis.timeOut = -1router.pushUrl({url: 'pages/gwPage'})},2000)}}}build() {Row() {Column({space:15}) {Swiper(this.controller){Image($r('app.media.img1'))Image($r('app.media.img2'))Image($r('app.media.img3'))}.width('100%').height(150)//默认显示第一页.index(0).indicator(true)Image($r("app.media.gw")).height(125).width(300).borderRadius(15)Text("欢迎登录").fontSize(25).fontColor("#696969")TextInput({ placeholder:"账号"}).width(400).height(50).margin(10).borderRadius(10).type(InputType.Normal).onChange(value =>{this.zhanghao = value;})TextInput({ placeholder:"密码"}).width(400).height(50).margin(10).borderRadius(10).type(InputType.Password).onChange(value =>{this.mima = value;})Text('还没有账号？去注册').fontSize(18).fontColor('#1296db').decoration({ type: TextDecorationType.Underline, color:('#1296db') }).textAlign(TextAlign.Start).onClick(()=>{router.pushUrl({url:"pages/zhucePage"})})Row() {Button('登录', { type: ButtonType.Capsule }).backgroundColor('#1296db').width(200).height(55).fontSize(30).margin(30).borderRadius(30).onClick(() => {//处理单机事件this.login()})if (this.show) {// 加载组件LoadingProgress().color(Color.Blue).height(50).width(50)}}}.width('100%').height('100%').alignItems(HorizontalAlign.Center).padding({left:20,right:20,top:10})}.width('100%').height('105%').backgroundImage($r('app.media.beijing')).backgroundImageSize(ImageSize.Cover)}}

 

3.2 PageResource.ets

export default class PageResource {title:Resource;img:Resource;others?:Resource;constructor(title:Resource,img:Resource,others?:Resource) {this.title=titlethis.img=imgthis.others=others}
}

3.3 商品页面：shangpinPage.ets 

import itemData from './PageResource'@Entry
@Component
export default  struct ShangpinPage {private swiperController:SwiperController =new SwiperController()//商品图片类型getSwiperImages():Array<Resource>{let swiperImages:Resource[]=[$r('app.media.img1'),$r('app.media.img2'),$r('app.media.img3')]return swiperImages;}//获取第一部分商品分类数据getFirstData():Array<itemData>{let firstData:itemData[]=[new itemData($r('app.string.mylove'), $r('app.media.love')),new itemData($r('app.string.historyrecord'), $r('app.media.record')),new itemData($r('app.string.message'), $r('app.media.message')),new itemData($r('app.string.shoppingcart'), $r('app.media.shopping')),new itemData($r('app.string.mygoal'), $r('app.media.target')),new itemData($r('app.string.group'), $r('app.media.circle')),new itemData($r('app.string.favorites'), $r('app.media.favorite')),new itemData($r('app.string.recylebin'), $r('app.media.recycle'))]return firstData;}//获取的人部分商品列表展示getSecondGridData(): Array<itemData> {let secondGridData: itemData[] = [new itemData($r('app.string.yifu'), $r('app.media.yifu'), $r('app.media.img3')),new itemData($r('app.string.yan'), $r('app.media.yan'), $r('app.media.img3')),new itemData($r('app.string.jiu'), $r('app.media.jiu'), $r('app.media.img3')),new itemData($r('app.string.huazhuangpin'), $r('app.media.hauzhuangpin'), $r('app.media.img3')),new itemData($r('app.string.xie'), $r('app.media.xie'), $r('app.media.img3'))];return secondGridData;}build() {Scroll(){Column({space:12}){Column(){Row({space:6}) {Image($r("app.media.tubiao")).width(50).height(50)Text('首页').fontSize('24fp').fontWeight(FontWeight.Bold).margin({ top: '12vp' }).padding({ left: '12vp' })Image($r("app.media.search")).width(40).height(40).margin({left:160})}}.width('100%').alignItems(HorizontalAlign.Start)//轮播图Swiper(this.swiperController){ForEach(this.getSwiperImages(),(img:Resource)=>{Image(img).borderRadius('16vp')},(img:Resource)=>JSON.stringify(img.id))}.autoPlay(true).margin({ top: '1vp' })// 第一部分 商品分类Grid() {ForEach(this.getFirstData(), (item: itemData) => {GridItem() {Column() {Image(item.img).width('32vh').height('32vh')Text(item.title).fontSize('12fp').margin({ top: '4vh' }).fontWeight(FontWeight.Bold)}}}, (item: itemData) => JSON.stringify(item))}.columnsTemplate('1fr 1fr  1fr  1fr').rowsTemplate('1fr 1fr').columnsGap('8vp').rowsGap('12vp').padding({ top: '12vp', bottom: '12vp' }).height('124vp').borderRadius('24vp')Row({space:10}){Image($r('app.media.data')).width(25).height(33)Text("商品列表").fontSize('20fp').fontWeight(FontWeight.Bold).width('100%').margin({ top: '12vp' })}.margin({left:'15vp'})Grid() {ForEach(this.getSecondGridData(), (item: itemData) => {GridItem() {Column() {Image(item.img).width('124vh').height('124vh')Text(item.title).fontSize('18fp').margin({ top: '5vh' }).fontWeight(FontWeight.Bold)}}}, (item: itemData) => JSON.stringify(item))}.columnsTemplate('1fr  1fr').rowsTemplate('1fr 1fr 1fr').columnsGap('12vp').rowsGap('12vp').padding({ top: '12vp', bottom: '12vp' }).height('550vp').borderRadius('24vp')}.width('100%')}}
}

 

3.4 我的页面：wodePage.ets

import itemData from './PageResource'
import router from '@ohos.router'@Entry
@Component
export default struct WodePage {@State value:number =3getFirstData(): Array<itemData> {let firstData: itemData[] = [new itemData($r('app.string.daifukuan'), $r('app.media.daifukuan')),new itemData($r('app.string.daifahuo'), $r('app.media.daifahuo')),new itemData($r('app.string.daishouhuo'), $r('app.media.daishouhuo')),new itemData($r('app.string.daipinjia'), $r('app.media.daipinjia'))]return firstData;}build() {//   标题部分Column({space:12}) {Row() {Row({ space: 10 }) {Image($r('app.media.rentou')).width(80).height(80).borderRadius(50)Text('用户ID：m0_64304713').margin({ left: 5 }).fontColor('#010101')}.margin({ top: 20, left: 20 })}.width('100%').height(180).border({width:1}).backgroundColor("#ff8c8686")Row({ space: 8 }) {//余额及金钱所在rowRow() {Text('余额:').fontSize(16).padding({left:20})Text('￥'+this.value).fontSize(24).fontWeight(FontWeight.Bold)}.justifyContent(FlexAlign.Start)Button('提现').margin({ right: 40 }).backgroundColor('#ff000000').fontWeight(FontWeight.Bold).onClick(()=>{if(this.value<=0){AlertDialog.show({message:'余额不足,请充值'})this.value=0}else{AlertDialog.show({message:'提现成功'})this.value-=1}})}.width('100%').justifyContent(FlexAlign.SpaceBetween)Column({ space: 20 }) {Row() {Text('我的订单').fontSize(20).onClick(() => {})Text('查看所有订单').fontSize(18).fontColor('#ffb3a8a8')}.width('100%')// .border({width:1,}).justifyContent(FlexAlign.SpaceBetween).padding({ left: 20, right: 20 })Grid() {ForEach(this.getFirstData(), (item: itemData) => {GridItem() {Column() {Image(item.img).width('32vh').height('32vh')Text(item.title).fontSize('16fp').margin({ top: '4vh' })}}}, (item: itemData) => JSON.stringify(item))}.border({ width: 1, }).columnsTemplate('1fr 1fr  1fr  1fr').rowsTemplate('1fr').columnsGap('12vp').rowsGap('12vp').padding({ bottom: '18vp',top:'18vp' }).height('90vp').borderRadius('24vp')Column(){Row({ space: 50 }) {Image($r('app.media.gwtuabiao')).width(50).height(50).borderRadius('24vp')Text('去购物').fontSize(18)}.width('90%').backgroundColor("#789").margin({  bottom: 20 }).padding({ left: 20, right: 20, top: 10, bottom: 10 }).borderRadius('16vp').onClick(() => {router.pushUrl({url: 'pages/gwPage',})})Row({ space: 50 }) {Image($r('app.media.chongzhi')).width(50).height(50).borderRadius('24vp')Text('充值入口').fontSize(18)}.width('90%').backgroundColor("#789").margin({ bottom: 20 }).padding({ left: 20, right: 20, top: 10, bottom: 10 }).borderRadius('16vp').onClick(() => {AlertDialog.show({message:this.value.toString()})})Row({ space: 50 }) {Image($r('app.media.xiugai')).width(50).height(50).borderRadius('24vp')Text('修改信息').fontSize(18)}.width('90%').backgroundColor("#789").margin({ bottom: 20 }).padding({ left: 20, right: 20, top: 10, bottom: 10 }).borderRadius('16vp')Row({ space: 50 }) {Image($r('app.media.tuichu')).width(50).height(50).borderRadius('20vp')Text('退出登录').fontSize(18)}.width('90%').backgroundColor("#789").margin({ bottom: 20 }).padding({ left: 20, right: 20, top: 10, bottom: 10 }).borderRadius('16vp').onClick(() => {router.pushUrl({url: 'pages/gouwuPage',})})}.width('100%').height('40%')// .border({width:1})}.alignItems(HorizontalAlign.Start).width('100%').height('100%')}.backgroundColor('#ffe1e7de')}}

3.5 注册页面：zhucePage.ets

import router from '@ohos.router';
@Entry
@Component
struct ZhucePage {@State zhanghao:number|string = ''
@State mima1:number|string = ''@State mima2:number|string = ''@State mismessage:number|string = ''@State successmessage:number|string = ''build() {Row() {Column({space:18}) {Image($r('app.media.zhuce')).width(300).height(150).margin({top:40})Column(){Text("新用户注册").fontSize(25).fontColor("#696969").margin({top:20})TextInput({ placeholder:"账号"}).width(300).height(50).margin(10).borderRadius(10).type(InputType.Normal).backgroundColor('#888').onChange(value =>{this.zhanghao = value;})TextInput({ placeholder:"密码"}).width(300).height(50).margin(10).borderRadius(10).type(InputType.Password).backgroundColor('#888').onChange(value =>{this.mima1 = value;if(this.mima1!=this.mima2){this.mismessage='密码不一致'this.successmessage=''}else{this.mismessage=''if(this.mismessage==''&&this.successmessage==''){this.successmessage='注册成功！'}}})TextInput({ placeholder:"确认密码"}).width(300).height(50).margin(10).borderRadius(10).type(InputType.Password).backgroundColor('#888').onChange(value =>{this.mima2 = value;if(this.mima1!=this.mima2){this.mismessage='密码不一致'this.successmessage=''}else{this.mismessage=''if(this.mismessage==''&&this.successmessage==''){this.successmessage='注册成功！'}}})if(this.mismessage){Text('两次密码不一致！').fontSize(12).fontColor("red")}Button('注册',{type:ButtonType.Capsule}).backgroundColor('#1296db').width(200).height(55).fontSize(30).margin(30).borderRadius(30).onClick(()=>{if(this.successmessage=="注册成功！" && this.zhanghao!=''){AlertDialog.show({message:this.successmessage,primaryButton:{value:'去登录',action:()=>{router.pushUrl({url:"pages/gouwuPage",/*params:{src:"pages/zhucePage"}*/})}}})}else{AlertDialog.show({message:'注册失败！'})}})}.border({width:6,color:0x000000,style:BorderStyle.Solid})}.width('100%').justifyContent(FlexAlign.Start).height('100%')}.height('100%').backgroundImage($r('app.media.beijing')).backgroundImageSize(ImageSize.Cover)}
}

3. 购物网站主页面：gwPage.ets

import shangpinPage from './shangpinPage'
import wodePage from  './wodePage'
@Entry
@Component
struct   GwPage {@State currentIndex:number=0private TabsController:TabsController = new TabsController()@Builder TabBuilder(title:string,targetIndex:number,selectImg:Resource,normalImg:Resource) {Column(){Image(this.currentIndex ===targetIndex?selectImg:normalImg).size({width:25,height:25})Text(title).fontColor(this.currentIndex ===targetIndex?'#1698ce':'#6b6b6b')}.width('100%').height('100%').justifyContent(FlexAlign.Center).onClick(()=>{this.currentIndex=targetIndexthis.TabsController.changeIndex(this.currentIndex)})}build() {Tabs({barPosition:BarPosition.End,controller:this.TabsController}){TabContent(){shangpinPage()}.tabBar(this.TabBuilder('首页',0,$r('app.media.home_selected'),$r('app.media.home_normal')))TabContent(){wodePage()// Column().width('100%').height('100%').backgroundColor('#007dff')}.tabBar(this.TabBuilder('我的',1,$r('app.media.mine_selected'),$r('app.media.account')))}.barWidth('100%').barHeight(50).onChange((index:number)=>{this.currentIndex=index})}
}

    

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/783368.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

STM32学习笔记（10_2）- I2C通信协议MPU6050简介

STM32学习笔记（10_2）- I2C通信协议MPU6050简介

无人问津也好&#xff0c;技不如人也罢&#xff0c;都应静下心来&#xff0c;去做该做的事。 最近在学STM32&#xff0c;所以也开贴记录一下主要内容&#xff0c;省的过目即忘。视频教程为江科大&#xff08;改名江协科技&#xff09;&#xff0c;网站jiangxiekeji.com 本期开…
阅读更多...
[Linux_IMX6ULL驱动开发]-基础驱动

[Linux_IMX6ULL驱动开发]-基础驱动

驱动的含义 如何理解嵌入式的驱动呢&#xff0c;我个人认为&#xff0c;驱动就是嵌入式上层应用操控底层硬件的桥梁。因为上层应用是在用户态&#xff0c;是无法直接操控底层的硬件的。我们需要利用系统调用&#xff08;open、read、write等&#xff09;&#xff0c;进入内核态…
阅读更多...
Java编程实战：疫情物资分配系统的设计与实现

Java编程实战：疫情物资分配系统的设计与实现

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…
阅读更多...
Qt 富文本处理 （字体颜色大小加粗等）

Qt 富文本处理 （字体颜色大小加粗等）

Qt中支持HTML的控件有textEdit 、label 、textBrowser 。 接口&#xff1a;setHtml("Qt"); toHtml(). 文本样式设置 : 可分字设置 &#xff0c;主要使用QTextCharFormat类进行文本样式设置。 示例&#xff1a; QTextCharFormat fmt; //粗体 fmt.setFontWeight…
阅读更多...
查找算法及查找常用数据结构总结

查找算法及查找常用数据结构总结

1.顺序表查找 基本方法&#xff1a; 设查找表以一维数组来存储&#xff0c;要求在此表中查找出关键字的值为x的元素的位置&#xff0c;若查找成功&#xff0c;则返回其位置&#xff08;即下标&#xff09;&#xff0c;否则&#xff0c;返回一个表示元素不存在的下标&#xff0…
阅读更多...
VMware虚拟机共享主机v2rayN

VMware虚拟机共享主机v2rayN

目录 &#x1f33c;前言 &#x1f33c;解释 &#x1f6a9;操作 1&#xff09;VMware -- 虚拟网络编辑器 2&#xff09;VMware -- 网络适配器 3&#xff09;主机 IP 地址 4&#xff09;v2rayN 代理端口 5&#xff09;VMware -- 网络代理(Network proxy) &#x1f382;结…
阅读更多...
红黑树介绍及插入操作的实现

红黑树介绍及插入操作的实现

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生 &#x1f648;个人主页&#x1f389;&#xff1a;GOTXX &#x1f43c;个人WeChat&#xff1a;ILXOXVJE &#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN&…
阅读更多...
windows平台虚拟机安装

windows平台虚拟机安装

windows平台虚拟机安装 1. 安装VMwareWorkstationPro 1.1 软件下载 官网下载 官网 百度网盘下载 版本 VMwareWorkstationPro16 链接&#xff1a;https://pan.baidu.com/s/1LidMxoM9e4a4CANixyRoyg?pwd1157 提取码&#xff1a;1157 1.2 软件安装 软件安装注意事项 软件…
阅读更多...
代码学习第32天---动态规划

代码学习第32天---动态规划

随想录日记part32 t i m e &#xff1a; time&#xff1a; time&#xff1a; 2024.03.30 主要内容&#xff1a;今天开始要学习动态规划的相关知识了&#xff0c;今天的内容主要涉及两个方面&#xff1a; 不同路径 &#xff1b; 不同路径 II。 62.不同路径 63. 不同路径 II 动态…
阅读更多...
Canvas实现圆点动画

Canvas实现圆点动画

示例效果图&#xff1a; 话不多说直接上代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><t…
阅读更多...
Unity类银河恶魔城学习记录11-10 p112 Items drop源代码

Unity类银河恶魔城学习记录11-10 p112 Items drop源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili ItemObject_Trigger.cs using System.Collections; using System.Collecti…
阅读更多...
P28—P31：变量

P28—P31：变量

P28-变量的定义 什么是变量&#xff1f; 从本质上来说&#xff0c;变量就是一块内存空间&#xff0c;而这块内存空间有数据类型、名字、字面值。变量包含三部分&#xff1a;数据类型、名字、字面值&#xff08;数据&#xff09;变量是内存中存储的基本单元。 数据类型的作用&a…
阅读更多...
Linux 查看磁盘信息：df与du命令详解

Linux 查看磁盘信息：df与du命令详解

一、df 1.简介 df 是 disk free的缩写&#xff0c;从UNIX和类UNIX操作系统的早期开始&#xff0c;它就是UNIX和类UNIX操作系统的一部分。它被设计为一种工具&#xff0c;用于监视系统上已使用和可用的磁盘空间数量。 df 命令主要用于需要检查文件系统上已使用和可用的磁盘空…
阅读更多...
第十三届蓝桥杯JavaA组省赛真题 - GCD

第十三届蓝桥杯JavaA组省赛真题 - GCD

解题思路&#xff1a; 找规律 最大的最小公因数就是两数的差值 5 7 gcd2 1 3 gcd2 1 4 gcd3 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scan new Scanner(System.in);long a scan.nextLong();long b scan.ne…
阅读更多...
查找--二分查找（Binary Search）

查找--二分查找（Binary Search）

二分查找属于静态查找表&#xff0c;当以有序表表示静态查找表时&#xff0c;查找函数可用折半查找来实现。 查找过程&#xff1a;先确定待查记录所在的范围&#xff08;区间&#xff09;&#xff0c;然后逐步缩小范围直到找到或找不到该记录为止。 以处于区间中间位置记录的…
阅读更多...
Linux appimage如何正确打开

Linux appimage如何正确打开

在之前的文章中&#xff0c;提到使用appimage软件非常方便。 但是首次使用会遇到这样的问题&#xff1a; 1. 双击打不开 2. 在终端打开提示&#xff1a; /home/roy/software/appimage/Obsidian-1.5.11.AppImage dlopen(): error loading libfuse.so.2 AppImages require …
阅读更多...
Python下载bing每日壁纸并实现win11 壁纸自动切换

Python下载bing每日壁纸并实现win11 壁纸自动切换

前言: 爬虫哪家强,当然是python 我是属于啥语言都用,都懂点,不精通,实际工作中能能够顶上就可以。去年写的抓取bing每日的壁纸&#xff0c;保存到本地&#xff0c;并上传到阿里云oss&#xff0c;如果只是本地壁纸切换&#xff0c;存下来就行&#xff0c;一直想做个壁纸站点&…
阅读更多...
vuees6新语法

vuees6新语法

vue的学习网站&#xff1a; https://www.runoob.com/vue2/vue-tutorial.html1.Vue的介绍 学习目标 说出什么是Vue能够说出Vue的好处能够说出Vue的特点 内容讲解 【1】Vue介绍 1.vue属于一个前端框架&#xff0c;底层使用原生js编写的。主要用来进行前端和后台服务器之间的…
阅读更多...
CubeIDE 下如何将版本号和日期关联。

CubeIDE 下如何将版本号和日期关联。

1. 使用__DATE__ 和__TIME__获取编译日期和时间。 2. 将__DATE__ 和__TIME__转换成UINT 3. 将转换后的数赋值给版本号。 4. 设置工程保证每次都会重新编译对应文件。 对应函数如下&#xff1a; uint8_t VER_MAIN; uint8_t VER_SUB; uint8_t VER_MIN; #include <stdlib.…
阅读更多...
我为什么愿意当韭菜

我为什么愿意当韭菜

这几年&#xff0c;为了提升自己&#xff0c;我给无数的我认为优秀的人和课付过费。但我从来不认为自己有被割过韭菜。 如果非要说是韭菜&#xff0c;那我认为这个社会每个人都是韭菜&#xff0c;就看是甘愿被割&#xff0c;还是不甘愿。没办法&#xff0c;只有被割才能获得自己…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023