赞
踩
目录
图片位置:entry > src > main > resources > base > media
百度网盘链接:https://pan.baidu.com/s/1JZn-U5Sqk6hOSHKz6D_98Q
提取码:bosg
以下三个文件均需要添加。
- {
- "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": "待评价"
- }
- ]
- }
- import router from '@ohos.router'
- import prompt from '@ohos.promptAction';
- @Entry
- @Component
- struct GouwuPage{
- //定义SwiperController类型的变量
- private controller: SwiperController =new SwiperController()
- private intervalID=0
- private 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=false
- private timeOut:number=-1
-
-
- //登录方法
- login():void {
- if (this.zhanghao == '' || this.mima == '') {
- prompt.showToast({
- message: '账号密码不能为空'
- })
-
- } else {
- AlertDialog.show({
- message:'loading.....'
- })
- this.show = true
- if (this.timeOut = -1) {
- this.timeOut = setTimeout(() => {
- this.show = false
- this.timeOut = -1
- router.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)
- }
-
- }
- export default class PageResource {
- title:Resource;
- img:Resource;
- others?:Resource;
-
- constructor(title:Resource,img:Resource,others?:Resource) {
- this.title=title
- this.img=img
- this.others=others
- }
- }
- 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%')
-
- }
- }
- }
- import itemData from './PageResource'
- import router from '@ohos.router'
-
- @Entry
- @Component
- export default struct WodePage {
-
- @State value:number =3
-
- getFirstData(): 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 }) {
- //余额及金钱所在row
- Row() {
- 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')
- }
-
- }
- 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)
-
- }
- }
- import shangpinPage from './shangpinPage'
- import wodePage from './wodePage'
- @Entry
- @Component
- struct GwPage {
- @State currentIndex:number=0
- private 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=targetIndex
- this.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
- })
- }
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。