鸿蒙ARKTS--浅显的购物网站

梦应逍遥  金牌会员 | 2024-10-27 16:32:57 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 530|帖子 530|积分 1590

目录
一、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文件

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

  1. {
  2.   "string": [
  3.     {
  4.       "name": "mylove",
  5.       "value": "我的最爱"
  6.     },
  7.     {
  8.       "name": "historyrecord",
  9.       "value": "历史记录"
  10.     },
  11.     {
  12.       "name": "message",
  13.       "value": "消息"
  14.     },
  15.     {
  16.       "name": "shoppingcart",
  17.       "value": "购物栏"
  18.     },
  19.     {
  20.       "name": "mygoal",
  21.       "value": "我的目标"
  22.     },
  23.     {
  24.       "name": "group",
  25.       "value": "圈子"
  26.     },
  27.     {
  28.       "name": "favorites",
  29.       "value": "收藏"
  30.     },
  31.     {
  32.       "name": "recylebin",
  33.       "value": "回收站"
  34.     },
  35.     {
  36.       "name": "yifu",
  37.       "value": "衣服"
  38.     },
  39.     {
  40.       "name": "yan",
  41.       "value": "烟"
  42.     },
  43.     {
  44.       "name": "jiu",
  45.       "value": "酒"
  46.     },
  47.     {
  48.       "name": "huazhuangpin",
  49.       "value": "化妆品"
  50.     },
  51.     {
  52.       "name": "xie",
  53.       "value": "鞋"
  54.     },
  55.     {
  56.       "name": "daifukuan",
  57.       "value": "待付款"
  58.     },
  59.     {
  60.       "name": "daifahuo",
  61.       "value": "待发货"
  62.     },
  63.     {
  64.       "name": "daishouhuo",
  65.       "value": "待收货"
  66.     },
  67.     {
  68.       "name": "daipinjia",
  69.       "value": "待评价"
  70.     }
  71.   ]
  72. }
复制代码
三、pages


3.1 登录页面：gouwuPage.ets

  1. import router from '@ohos.router'
  2. import prompt from '@ohos.promptAction';
  3. @Entry
  4. @Component
  5. struct GouwuPage{
  6.   //定义SwiperController类型的变量
  7.   private controller: SwiperController =new SwiperController()
  8.   private intervalID=0
  9.   private startPlay(swiper:SwiperController){
  10.     this.intervalID=setInterval(function (){
  11.       swiper.showNext()
  12.     },3000)
  13.   }
  14. aboutToAppear() {
  15.   this.startPlay(this.controller)
  16. }
  18.   @State zhanghao:string|number =''
  19.   @State mima:string|number =''
  20.   @State show:boolean=false
  21.   private timeOut:number=-1
  24.   //登录方法
  25.   login():void {
  26.     if (this.zhanghao == '' || this.mima == '') {
  27.       prompt.showToast({
  28.         message: '账号密码不能为空'
  29.       })
  31.     } else {
  32.       AlertDialog.show({
  33.         message:'loading.....'
  34.       })
  35.       this.show = true
  36.       if (this.timeOut = -1) {
  37.         this.timeOut = setTimeout(() => {
  38.           this.show = false
  39.           this.timeOut = -1
  40.           router.pushUrl({
  41.             url: 'pages/gwPage'
  42.           })
  43.         },2000)
  44.       }
  45.     }
  46.   }
  50.   build() {
  51.     Row() {
  52.       Column({space:15}) {
  53.         Swiper(this.controller){
  54.           Image($r('app.media.img1'))
  55.           Image($r('app.media.img2'))
  56.           Image($r('app.media.img3'))
  57.         }
  58.         .width('100%')
  59.         .height(150)
  60.         //默认显示第一页
  61.         .index(0)
  62.         .indicator(true)
  65.         Image($r("app.media.gw"))
  66.           .height(125)
  67.           .width(300)
  68.           .borderRadius(15)
  70.         Text("欢迎登录")
  71.           .fontSize(25)
  72.           .fontColor("#696969")
  74.         TextInput({ placeholder:"账号"})
  75.           .width(400)
  76.           .height(50)
  77.           .margin(10)
  78.           .borderRadius(10)
  79.           .type(InputType.Normal)
  80.           .onChange(value =>{
  81.             this.zhanghao = value;})
  83.         TextInput({ placeholder:"密码"})
  84.           .width(400)
  85.           .height(50)
  86.           .margin(10)
  87.           .borderRadius(10)
  88.           .type(InputType.Password)
  89.           .onChange(value =>{
  90.             this.mima = value;})
  92.         Text('还没有账号？去注册')
  93.           .fontSize(18)
  94.           .fontColor('#1296db')
  95.           .decoration({ type: TextDecorationType.Underline, color:('#1296db') })
  96.           .textAlign(TextAlign.Start)
  97.           .onClick(()=>{
  98.                 router.pushUrl({
  99.                     url:"pages/zhucePage"
  100.                 })
  101.           })
  102.         Row() {
  103.           Button('登录', { type: ButtonType.Capsule })
  104.             .backgroundColor('#1296db')
  105.             .width(200)
  106.             .height(55)
  107.             .fontSize(30)
  108.             .margin(30)
  109.             .borderRadius(30)
  110.             .onClick(() => {
  111.               //处理单机事件
  112.               this.login()
  114.             })
  116.           if (this.show) {
  117.             // 加载组件
  118.             LoadingProgress()
  119.               .color(Color.Blue)
  120.               .height(50)
  121.               .width(50)
  122.           }
  123.         }
  125.       }
  126.       .width('100%')
  127.       .height('100%')
  128.       .alignItems(HorizontalAlign.Center)
  129.       .padding({left:20,right:20,top:10})
  130.     }
  131.     .width('100%')
  132.     .height('105%')
  133.     .backgroundImage($r('app.media.beijing'))
  134.     .backgroundImageSize(ImageSize.Cover)
  135.   }
  137. }
复制代码
 

3.2 PageResource.ets

  1. export default class PageResource {
  2.   title:Resource;
  3.   img:Resource;
  4.   others?:Resource;
  6.   constructor(title:Resource,img:Resource,others?:Resource) {
  7.     this.title=title
  8.     this.img=img
  9.     this.others=others
  10.   }
  11. }
复制代码
3.3 商品页面：shangpinPage.ets 

  1. import itemData from './PageResource'
  4. @Entry
  5. @Component
  6. export default  struct ShangpinPage {
  8.   private swiperController:SwiperController =new SwiperController()
  9.   //商品图片类型
  10.   getSwiperImages():Array<Resource>{
  11.     let swiperImages:Resource[]=[
  12.     $r('app.media.img1'),
  13.     $r('app.media.img2'),
  14.     $r('app.media.img3')
  15.     ]
  17.     return swiperImages;
  18.   }
  20.   //获取第一部分商品分类数据
  21.   getFirstData():Array<itemData>{
  22.     let firstData:itemData[]=[
  23.       new itemData($r('app.string.mylove'), $r('app.media.love')),
  24.       new itemData($r('app.string.historyrecord'), $r('app.media.record')),
  25.       new itemData($r('app.string.message'), $r('app.media.message')),
  26.       new itemData($r('app.string.shoppingcart'), $r('app.media.shopping')),
  27.       new itemData($r('app.string.mygoal'), $r('app.media.target')),
  28.       new itemData($r('app.string.group'), $r('app.media.circle')),
  29.       new itemData($r('app.string.favorites'), $r('app.media.favorite')),
  30.       new itemData($r('app.string.recylebin'), $r('app.media.recycle'))
  31.     ]
  32.     return firstData;
  33.   }
  35.   //获取的人部分商品列表展示
  36.   getSecondGridData(): Array<itemData> {
  37.     let secondGridData: itemData[] = [
  38.       new itemData($r('app.string.yifu'), $r('app.media.yifu'), $r('app.media.img3')),
  39.       new itemData($r('app.string.yan'), $r('app.media.yan'), $r('app.media.img3')),
  40.       new itemData($r('app.string.jiu'), $r('app.media.jiu'), $r('app.media.img3')),
  41.       new itemData($r('app.string.huazhuangpin'), $r('app.media.hauzhuangpin'), $r('app.media.img3')),
  42.       new itemData($r('app.string.xie'), $r('app.media.xie'), $r('app.media.img3'))
  44.     ];
  45.     return secondGridData;
  48.   }
  50.   build() {
  51.     Scroll(){
  52.       Column({space:12}){
  53.         Column(){
  54.           Row({space:6}) {
  55.             Image($r("app.media.tubiao"))
  56.               .width(50)
  57.               .height(50)
  59.             Text('首页')
  60.               .fontSize('24fp')
  61.               .fontWeight(FontWeight.Bold)
  62.               .margin({ top: '12vp' })
  63.               .padding({ left: '12vp' })
  64.             Image($r("app.media.search"))
  65.               .width(40)
  66.               .height(40)
  67.               .margin({left:160})
  68.           }
  70.         }
  71.         .width('100%')
  72.         .alignItems(HorizontalAlign.Start)
  73.         //轮播图
  74.         Swiper(this.swiperController){
  75.           ForEach(this.getSwiperImages(),(img:Resource)=>{
  76.             Image(img).borderRadius('16vp')
  77.           },(img:Resource)=>JSON.stringify(img.id))
  78.         }
  79.         .autoPlay(true)
  80.         .margin({ top: '1vp' })
  82.         // 第一部分 商品分类
  83.         Grid() {
  84.           ForEach(this.getFirstData(), (item: itemData) => {
  85.             GridItem() {
  86.               Column() {
  87.                 Image(item.img)
  88.                   .width('32vh')
  89.                   .height('32vh')
  90.                 Text(item.title)
  91.                   .fontSize('12fp')
  92.                   .margin({ top: '4vh' })
  93.                   .fontWeight(FontWeight.Bold)
  94.               }
  95.             }
  96.           }, (item: itemData) => JSON.stringify(item))
  97.         }
  98.         .columnsTemplate('1fr 1fr  1fr  1fr')
  99.         .rowsTemplate('1fr 1fr')
  100.         .columnsGap('8vp')
  101.         .rowsGap('12vp')
  102.         .padding({ top: '12vp', bottom: '12vp' })
  103.         .height('124vp')
  104.         .borderRadius('24vp')
  106.         Row({space:10}){
  107.           Image($r('app.media.data'))
  108.             .width(25)
  109.             .height(33)
  111.           Text("商品列表")
  112.             .fontSize('20fp')
  113.             .fontWeight(FontWeight.Bold)
  114.             .width('100%')
  115.             .margin({ top: '12vp' })
  116.         }
  117.         .margin({left:'15vp'})
  119.         Grid() {
  120.           ForEach(this.getSecondGridData(), (item: itemData) => {
  121.             GridItem() {
  122.               Column() {
  123.                 Image(item.img)
  124.                   .width('124vh')
  125.                   .height('124vh')
  126.                 Text(item.title)
  127.                   .fontSize('18fp')
  128.                   .margin({ top: '5vh' })
  129.                   .fontWeight(FontWeight.Bold)
  130.               }
  131.             }
  132.           }, (item: itemData) => JSON.stringify(item))
  133.         }
  134.         .columnsTemplate('1fr  1fr')
  135.         .rowsTemplate('1fr 1fr 1fr')
  136.         .columnsGap('12vp')
  137.         .rowsGap('12vp')
  138.         .padding({ top: '12vp', bottom: '12vp' })
  139.         .height('550vp')
  140.         .borderRadius('24vp')
  141.       }
  142.       .width('100%')
  144.     }
  145.   }
  146. }
复制代码
 

3.4 我的页面：wodePage.ets

  1. import itemData from './PageResource'
  2. import router from '@ohos.router'
  4. @Entry
  5. @Component
  6. export default struct WodePage {
  8.   @State value:number =3
  10.   getFirstData(): Array<itemData> {
  11.     let firstData: itemData[] = [
  12.       new itemData($r('app.string.daifukuan'), $r('app.media.daifukuan')),
  13.       new itemData($r('app.string.daifahuo'), $r('app.media.daifahuo')),
  14.       new itemData($r('app.string.daishouhuo'), $r('app.media.daishouhuo')),
  15.       new itemData($r('app.string.daipinjia'), $r('app.media.daipinjia'))
  16.     ]
  17.     return firstData;
  18.   }
  20.   build() {
  21.     //   标题部分
  22.     Column({space:12}) {
  23.       Row() {
  24.         Row({ space: 10 }) {
  25.           Image($r('app.media.rentou'))
  26.             .width(80)
  27.             .height(80)
  28.             .borderRadius(50)
  29.           Text('用户ID：m0_64304713')
  30.             .margin({ left: 5 })
  31.             .fontColor('#010101')
  32.         }
  33.         .margin({ top: 20, left: 20 })
  34.       }
  35.       .width('100%')
  36.       .height(180)
  37.       .border({width:1})
  38.       .backgroundColor("#ff8c8686")
  40.       Row({ space: 8 }) {
  41.         //余额及金钱所在row
  42.         Row() {
  43.           Text('余额:')
  44.             .fontSize(16)
  45.             .padding({left:20})
  47.           Text('￥'+this.value)
  48.             .fontSize(24)
  49.             .fontWeight(FontWeight.Bold)
  50.         }
  51.         .justifyContent(FlexAlign.Start)
  53.         Button('提现')
  54.           .margin({ right: 40 })
  55.           .backgroundColor('#ff000000')
  56.           .fontWeight(FontWeight.Bold)
  57.           .onClick(()=>{
  58.             if(this.value<=0){
  59.               AlertDialog.show({message:'余额不足,请充值'})
  60.               this.value=0
  61.             }else{
  62.               AlertDialog.show({message:'提现成功'})
  63.               this.value-=1
  64.             }
  65.           })
  66.       }
  67.       .width('100%')
  68.       .justifyContent(FlexAlign.SpaceBetween)
  70.       Column({ space: 20 }) {
  71.         Row() {
  72.           Text('我的订单')
  73.             .fontSize(20)
  74.             .onClick(() => {
  76.             })
  77.           Text('查看所有订单')
  78.             .fontSize(18)
  79.             .fontColor('#ffb3a8a8')
  80.         }.width('100%')
  81.         // .border({width:1,})
  82.         .justifyContent(FlexAlign.SpaceBetween)
  83.         .padding({ left: 20, right: 20 })
  86.         Grid() {
  87.           ForEach(this.getFirstData(), (item: itemData) => {
  88.             GridItem() {
  89.               Column() {
  90.                 Image(item.img)
  91.                   .width('32vh')
  92.                   .height('32vh')
  93.                 Text(item.title)
  94.                   .fontSize('16fp')
  95.                   .margin({ top: '4vh' })
  96.               }
  97.             }
  98.           }, (item: itemData) => JSON.stringify(item))
  99.         }
  100.         .border({ width: 1, })
  102.         .columnsTemplate('1fr 1fr  1fr  1fr')
  103.         .rowsTemplate('1fr')
  104.         .columnsGap('12vp')
  105.         .rowsGap('12vp')
  106.         .padding({ bottom: '18vp',top:'18vp' })
  107.         .height('90vp')
  108.         .borderRadius('24vp')
  110.         Column(){
  111.           Row({ space: 50 }) {
  112.             Image($r('app.media.gwtuabiao'))
  113.               .width(50)
  114.               .height(50)
  115.               .borderRadius('24vp')
  116.             Text('去购物')
  117.               .fontSize(18)
  118.           }
  119.           .width('90%')
  120.           .backgroundColor("#789")
  121.           .margin({  bottom: 20 })
  122.           .padding({ left: 20, right: 20, top: 10, bottom: 10 })
  123.           .borderRadius('16vp')
  124.           .onClick(() => {
  125.             router.pushUrl({
  126.               url: 'pages/gwPage',
  127.             })
  128.           })
  130.           Row({ space: 50 }) {
  131.             Image($r('app.media.chongzhi'))
  132.               .width(50)
  133.               .height(50)
  134.               .borderRadius('24vp')
  135.             Text('充值入口')
  136.               .fontSize(18)
  137.           }
  138.           .width('90%')
  139.           .backgroundColor("#789")
  140.           .margin({ bottom: 20 })
  141.           .padding({ left: 20, right: 20, top: 10, bottom: 10 })
  142.           .borderRadius('16vp')
  143.           .onClick(() => {
  144.             AlertDialog.show({message:this.value.toString()})
  145.           })
  147.           Row({ space: 50 }) {
  148.             Image($r('app.media.xiugai'))
  149.               .width(50)
  150.               .height(50)
  151.               .borderRadius('24vp')
  152.             Text('修改信息')
  153.               .fontSize(18)
  154.           }
  155.           .width('90%')
  156.           .backgroundColor("#789")
  157.           .margin({ bottom: 20 })
  158.           .padding({ left: 20, right: 20, top: 10, bottom: 10 })
  159.           .borderRadius('16vp')
  161.           Row({ space: 50 }) {
  162.             Image($r('app.media.tuichu'))
  163.               .width(50)
  164.               .height(50)
  165.               .borderRadius('20vp')
  166.             Text('退出登录')
  167.               .fontSize(18)
  168.           }
  169.           .width('90%')
  170.           .backgroundColor("#789")
  171.           .margin({ bottom: 20 })
  172.           .padding({ left: 20, right: 20, top: 10, bottom: 10 })
  173.           .borderRadius('16vp')
  174.           .onClick(() => {
  175.             router.pushUrl({
  176.               url: 'pages/gouwuPage',
  177.             })
  178.           })
  179.         }.width('100%')
  180.         .height('40%')
  181.         // .border({width:1})
  184.       }
  185.       .alignItems(HorizontalAlign.Start)
  186.       .width('100%')
  187.       .height('100%')
  188.     }
  189.     .backgroundColor('#ffe1e7de')
  190.   }
  192. }
复制代码

3.5 注册页面：zhucePage.ets

  1. import router from '@ohos.router';
  2. @Entry
  3. @Component
  4. struct ZhucePage {
  6.   @State zhanghao:number|string = ''
  7. @State mima1:number|string = ''
  8.   @State mima2:number|string = ''
  9.   @State mismessage:number|string = ''
  10.   @State successmessage:number|string = ''
  12.   build() {
  13.     Row() {
  14.       Column({space:18}) {
  16.         Image($r('app.media.zhuce'))
  17.           .width(300)
  18.           .height(150)
  19.           .margin({top:40})
  21.         Column(){
  22.           Text("新用户注册")
  23.             .fontSize(25)
  24.             .fontColor("#696969")
  25.             .margin({top:20})
  27.           TextInput({ placeholder:"账号"})
  28.             .width(300)
  29.             .height(50)
  30.             .margin(10)
  31.             .borderRadius(10)
  32.             .type(InputType.Normal)
  33.             .backgroundColor('#888')
  34.             .onChange(value =>{
  35.               this.zhanghao = value;})
  37.            TextInput({ placeholder:"密码"})
  38.             .width(300)
  39.             .height(50)
  40.             .margin(10)
  41.             .borderRadius(10)
  42.             .type(InputType.Password)
  43.             .backgroundColor('#888')
  44.              .onChange(value =>{
  45.                this.mima1 = value;
  46.                if(this.mima1!=this.mima2){
  47.                  this.mismessage='密码不一致'
  48.                  this.successmessage=''
  49.                }else{
  50.                  this.mismessage=''
  51.                  if(this.mismessage==''&&this.successmessage==''){
  52.                    this.successmessage='注册成功！'
  53.                  }
  54.                }
  55.              })
  57.           TextInput({ placeholder:"确认密码"})
  58.             .width(300)
  59.             .height(50)
  60.             .margin(10)
  61.             .borderRadius(10)
  62.             .type(InputType.Password)
  63.             .backgroundColor('#888')
  64.             .onChange(value =>{
  65.               this.mima2 = value;
  66.               if(this.mima1!=this.mima2){
  67.                 this.mismessage='密码不一致'
  68.                 this.successmessage=''
  69.               }else{
  70.                 this.mismessage=''
  71.                 if(this.mismessage==''&&this.successmessage==''){
  72.                   this.successmessage='注册成功！'
  73.                 }
  74.               }
  75.             })
  76.           if(this.mismessage){
  77.             Text('两次密码不一致！')
  78.               .fontSize(12)
  79.               .fontColor("red")
  81.           }
  83.           Button('注册',{type:ButtonType.Capsule})
  84.             .backgroundColor('#1296db')
  85.             .width(200)
  86.             .height(55)
  87.             .fontSize(30)
  88.             .margin(30)
  89.             .borderRadius(30)
  90.             .onClick(()=>{
  91.               if(this.successmessage=="注册成功！" && this.zhanghao!=''){
  92.                 AlertDialog.show({message:this.successmessage,
  93.                   primaryButton:{value:'去登录',action:()=>{
  94.                     router.pushUrl({
  95.                       url:"pages/gouwuPage",
  96.                       /*params:{
  97.                         src:"pages/zhucePage"
  98.                       }*/
  99.                     })
  100.                   }}
  101.                 })
  102.               }else
  103.               {
  104.                 AlertDialog.show({message:'注册失败！'})
  105.               }
  106.             })
  108.         }
  109.           .border({
  110.             width:6,
  111.             color:0x000000,
  112.             style:BorderStyle.Solid
  113.           }
  115.           )
  116.       }
  117.       .width('100%')
  118.       .justifyContent(FlexAlign.Start)
  119.       .height('100%')
  120.     }
  121.     .height('100%')
  122.     .backgroundImage($r('app.media.beijing'))
  123.     .backgroundImageSize(ImageSize.Cover)
  125.   }
  126. }
复制代码

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

  1. import shangpinPage from './shangpinPage'
  2. import wodePage from  './wodePage'
  3. @Entry
  4. @Component
  5. struct   GwPage {
  6.   @State currentIndex:number=0
  7.   private TabsController:TabsController = new TabsController()
  9.   @Builder TabBuilder(title:string,targetIndex:number,selectImg:Resource,normalImg:Resource) {
  10.     Column(){
  11.       Image(this.currentIndex ===targetIndex?selectImg:normalImg)
  12.         .size({width:25,height:25})
  13.       Text(title)
  14.         .fontColor(this.currentIndex ===targetIndex?'#1698ce':'#6b6b6b')
  16.     }
  17.     .width('100%')
  18.     .height('100%')
  19.     .justifyContent(FlexAlign.Center)
  20.     .onClick(()=>{
  21.       this.currentIndex=targetIndex
  22.       this.TabsController.changeIndex(this.currentIndex)
  23.     })
  24.   }
  27.   build() {
  28.     Tabs({barPosition:BarPosition.End,controller:this.TabsController}){
  29.       TabContent(){
  30.         shangpinPage()
  32.       }
  33.       .tabBar(this.TabBuilder('首页',0,$r('app.media.home_selected'),$r('app.media.home_normal')))
  35.       TabContent(){
  36.         wodePage()
  37.         // Column().width('100%').height('100%').backgroundColor('#007dff')
  38.       }
  39.       .tabBar(this.TabBuilder('我的',1,$r('app.media.mine_selected'),$r('app.media.account')))
  42.     }
  43.     .barWidth('100%')
  44.     .barHeight(50)
  45.     .onChange((index:number)=>{
  46.       this.currentIndex=index
  47.     })
  48.   }
  49. }
复制代码
    



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

梦应逍遥

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表