鸿蒙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})}
}