Commit 066667dc4f08a992b773340da47afd4854fafb8c
1 parent
387a4dd477
Exists in
master
add refundProgress
Showing
7 changed files
with
302 additions
and
33 deletions
Show diff stats
src/pages.json
| 1 | { | 1 | { |
| 2 | "pages": [ | 2 | "pages": [ |
| 3 | { | 3 | { |
| 4 | "path" : "pages/refundProgress/refundProgress", | ||
| 5 | "style": { | ||
| 6 | "navigationBarTitleText": "申请退款" | ||
| 7 | } | ||
| 8 | }, | ||
| 9 | { | ||
| 4 | "path": "pages/index/index", | 10 | "path": "pages/index/index", |
| 5 | "style": { | 11 | "style": { |
| 6 | "navigationBarTitleText": "商城一览" | 12 | "navigationBarTitleText": "商城一览" |
| 7 | // "enablePullDownRefresh":true | 13 | // "enablePullDownRefresh":true |
| 8 | } | 14 | } |
| 9 | }, | 15 | }, |
| 10 | { | ||
| 11 | "path" : "pages/refund/refund", | ||
| 12 | "style": { | ||
| 13 | "navigationBarTitleText": "申请退款" | ||
| 14 | } | ||
| 15 | }, | ||
| 16 | { | 16 | { |
| 17 | "path" : "pages/myOrder/myOrder", | 17 | "path" : "pages/myOrder/myOrder", |
| 18 | "style" : { | 18 | "style" : { |
| 19 | "navigationBarTitleText": "我的订单"} | 19 | "navigationBarTitleText": "我的订单"} |
| 20 | }, | 20 | }, |
| 21 | { | 21 | { |
| 22 | "path": "pages/addArddess/addArddess", | 22 | "path": "pages/addArddess/addArddess", |
| 23 | "style": { | 23 | "style": { |
| 24 | "navigationBarTitleText": "新增地址" | 24 | "navigationBarTitleText": "新增地址" |
| 25 | } | 25 | } |
| 26 | }, | 26 | }, |
| 27 | { | 27 | { |
| 28 | "path" : "pages/confirmOrder/confirmOrder", | 28 | "path" : "pages/confirmOrder/confirmOrder", |
| 29 | "style" : { | 29 | "style" : { |
| 30 | "navigationBarTitleText": "确认订单"} | 30 | "navigationBarTitleText": "确认订单"} |
| 31 | }, | 31 | }, |
| 32 | { | 32 | { |
| 33 | "path": "pages/cart/cart", | 33 | "path": "pages/cart/cart", |
| 34 | "style": { | 34 | "style": { |
| 35 | "navigationBarTitleText": "购物车" | 35 | "navigationBarTitleText": "购物车" |
| 36 | } | 36 | } |
| 37 | }, | 37 | }, |
| 38 | { | 38 | { |
| 39 | "path": "pages/user/user", | 39 | "path": "pages/user/user", |
| 40 | "style": { | 40 | "style": { |
| 41 | "navigationBarTitleText": "我的" | 41 | "navigationBarTitleText": "我的" |
| 42 | } | 42 | } |
| 43 | }, | 43 | }, |
| 44 | { | 44 | { |
| 45 | "path": "pages/details-3/details-3" | 45 | "path": "pages/details-3/details-3" |
| 46 | }, | 46 | }, |
| 47 | { | 47 | { |
| 48 | "path": "pages/refundment/Refundways" | 48 | "path": "pages/refundment/Refundways" |
| 49 | }, | 49 | }, |
| 50 | { | 50 | { |
| 51 | "path": "pages/refundment/refundment" | 51 | "path": "pages/refundment/refundment" |
| 52 | }, | 52 | }, |
| 53 | { | 53 | { |
| 54 | "path": "pages/Predelivery/Predelivery" | ||
| 55 | }, | ||
| 56 | { | ||
| 54 | "path": "pages/customerService/customerService" | 57 | "path": "pages/customerService/customerService" |
| 55 | }, | 58 | }, |
| 56 | { | 59 | { |
| 57 | "path": "pages/myorder-paying/myorder-paying" | 60 | "path": "pages/myorder-paying/myorder-paying" |
| 58 | }, | 61 | }, |
| 59 | { | 62 | { |
| 60 | "path": "pages/detail/detail" | 63 | "path": "pages/detail/detail" |
| 61 | } | 64 | } |
| 62 | 65 | ||
| 63 | ], | 66 | ], |
| 64 | "globalStyle": { | 67 | "globalStyle": { |
| 65 | "navigationBarTextStyle": "black", | 68 | "navigationBarTextStyle": "black", |
| 66 | "navigationBarTitleText": "uni-app", | 69 | "navigationBarTitleText": "uni-app", |
| 67 | "navigationBarBackgroundColor": "#F8F8F8", | 70 | "navigationBarBackgroundColor": "#F8F8F8", |
| 68 | "backgroundColor": "#F8F8F8" | 71 | "backgroundColor": "#F8F8F8" |
| 69 | }, | 72 | }, |
| 70 | "tabBar": { | 73 | "tabBar": { |
| 71 | "color": "#C0C4CC", | 74 | "color": "#C0C4CC", |
| 72 | "selectedColor": "#fa436a", | 75 | "selectedColor": "#fa436a", |
| 73 | "borderStyle": "black", | 76 | "borderStyle": "black", |
| 74 | "backgroundColor": "#ffffff", | 77 | "backgroundColor": "#ffffff", |
| 75 | "list": [{ | 78 | "list": [{ |
| 76 | "pagePath": "pages/index/index", | 79 | "pagePath": "pages/index/index", |
| 77 | "iconPath": "static/tab-home.png", | 80 | "iconPath": "static/tab-home.png", |
| 78 | "selectedIconPath": "static/tab-home-current.png", | 81 | "selectedIconPath": "static/tab-home-current.png", |
| 79 | "text": "首页" | 82 | "text": "首页" |
| 80 | }, | 83 | }, |
| 81 | { | 84 | { |
| 82 | "pagePath": "pages/cart/cart", | 85 | "pagePath": "pages/cart/cart", |
| 83 | "iconPath": "static/tab-cart.png", | 86 | "iconPath": "static/tab-cart.png", |
| 84 | "selectedIconPath": "static/tab-cart-current.png", | 87 | "selectedIconPath": "static/tab-cart-current.png", |
| 85 | "text": "购物车" | 88 | "text": "购物车" |
| 86 | }, | 89 | }, |
| 87 | { | 90 | { |
| 88 | "pagePath": "pages/user/user", | 91 | "pagePath": "pages/user/user", |
| 89 | "iconPath": "static/tab-my.png", | 92 | "iconPath": "static/tab-my.png", |
| 90 | "selectedIconPath": "static/tab-my-current.png", | 93 | "selectedIconPath": "static/tab-my-current.png", |
src/pages/addArddess/addArddess.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="wrap"> | 2 | <view class="wrap"> |
| 3 | <view class="content"> | 3 | <view class="content"> |
| 4 | <view class="item,name" > | 4 | <view class="item,name" > |
| 5 | <text class="itemText">姓名</text> | 5 | <text class="itemText">姓名</text> |
| 6 | <input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8"/> | 6 | <input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8"/> |
| 7 | </view> | 7 | </view> |
| 8 | <view class="item,phone"> | 8 | <view class="item,phone"> |
| 9 | <text class="itemText">电话</text> | 9 | <text class="itemText">电话</text> |
| 10 | <input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8"/> | 10 | <input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8"/> |
| 11 | </view> | 11 | </view> |
| 12 | <view class="item,area" > | 12 | <view class="item,area" > |
| 13 | <text class="itemText">地区</text> | 13 | <text class="itemText">地区</text> |
| 14 | <view class="btn" v-if="pickerText===''" @tap="openAddres">选择省/市/区</view> | 14 | <view class="btn" v-if="pickerText===''" @tap="openAddres">选择省/市/区</view> |
| 15 | <view class="btn" v-else @tap="openAddres">{{pickerText}}</view> | 15 | <view class="btn" v-else @tap="openAddres">{{pickerText}}</view> |
| 16 | <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address> | 16 | <simple-address ref="SimpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address> |
| 17 | </view> | 17 | </view> |
| 18 | <view class="item,address" > | 18 | <view class="item,address" > |
| 19 | <text class="itemText">详细地址</text> | 19 | <text class="itemText">详细地址</text> |
| 20 | <input placeholder="街道、小区门牌等详细地址"/> | 20 | <input placeholder="街道、小区门牌等详细地址"/> |
| 21 | </view> | 21 | </view> |
| 22 | <view class="item,check" > | 22 | <view class="item,check" > |
| 23 | <text class="itemText">设为默认地址</text> | 23 | <text class="itemText">设为默认地址</text> |
| 24 | <switch checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)" @change="changeDefalutAddress" /> | 24 | <switch checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)" @change="changeDefalutAddress" /> |
| 25 | </view> | 25 | </view> |
| 26 | <input /> | 26 | <input /> |
| 27 | </view> | 27 | </view> |
| 28 | <view class="button">保存并使用</view> | 28 | <view class="button">保存并使用</view> |
| 29 | </view> | 29 | </view> |
| 30 | </template> | 30 | </template> |
| 31 | 31 | ||
| 32 | <script> | 32 | <script> |
| 33 | import simpleAddress from '@/components/Simple-address/simple-address.vue'; | 33 | import SimpleAddress from '@/components/Simple-address/Simple-address.vue'; |
| 34 | export default { | 34 | export default { |
| 35 | data() { | 35 | data() { |
| 36 | return { | 36 | return { |
| 37 | cityPickerValueDefault: [0, 0, 1], | 37 | cityPickerValueDefault: [0, 0, 1], |
| 38 | pickerText: '', | 38 | pickerText: '', |
| 39 | isDefalutAddress:true | 39 | isDefalutAddress:true |
| 40 | 40 | ||
| 41 | }; | 41 | }; |
| 42 | }, | 42 | }, |
| 43 | components: { | 43 | components: { |
| 44 | simpleAddress | 44 | SimpleAddress |
| 45 | }, | 45 | }, |
| 46 | methods: { | 46 | methods: { |
| 47 | openAddres() { | 47 | openAddres() { |
| 48 | this.cityPickerValueDefault = [0,0,1] | 48 | this.cityPickerValueDefault = [0,0,1] |
| 49 | this.$refs.simpleAddress.open(); | 49 | this.$refs.SimpleAddress.open(); |
| 50 | }, | 50 | }, |
| 51 | onConfirm(e) { | 51 | onConfirm(e) { |
| 52 | this.pickerText = e.label; | 52 | this.pickerText = e.label; |
| 53 | }, | 53 | }, |
| 54 | changeDefalutAddress(e){ | 54 | changeDefalutAddress(e){ |
| 55 | this.isDefalutAddress = e.target.value | 55 | this.isDefalutAddress = e.target.value |
| 56 | } | 56 | } |
| 57 | } | 57 | } |
| 58 | } | 58 | } |
| 59 | </script> | 59 | </script> |
| 60 | 60 | ||
| 61 | <style lang="scss"> | 61 | <style lang="scss"> |
| 62 | .wrap{ | 62 | .wrap{ |
| 63 | height: 100vh; | 63 | height: 100vh; |
| 64 | background-color:#F2F2F2 ; | 64 | background-color:#F2F2F2 ; |
| 65 | font-family: PingFangSC-Regular; | 65 | font-family: PingFangSC-Regular; |
| 66 | letter-spacing: -0.23px; | 66 | letter-spacing: -0.23px; |
| 67 | padding-top: 19rpx; | 67 | padding-top: 19rpx; |
| 68 | } | 68 | } |
| 69 | .content{ | 69 | .content{ |
| 70 | background-color: #FFFFFF; | 70 | background-color: #FFFFFF; |
| 71 | border-radius: 8px; | 71 | border-radius: 8px; |
| 72 | border-radius: 8px; | 72 | border-radius: 8px; |
| 73 | padding: 40rpx 56rpx; | 73 | padding: 40rpx 56rpx; |
| 74 | margin-left: 40rpx; | 74 | margin-left: 40rpx; |
| 75 | width: 670rpx; | 75 | width: 670rpx; |
| 76 | box-sizing: border-box; | 76 | box-sizing: border-box; |
| 77 | .item{ | 77 | .item{ |
| 78 | display: flex; | 78 | display: flex; |
| 79 | justify-content: flex-start; | 79 | justify-content: flex-start; |
| 80 | font-size: 14px; | 80 | font-size: 14px; |
| 81 | align-items: center; | 81 | align-items: center; |
| 82 | height: 112rpx; | 82 | height: 112rpx; |
| 83 | border-bottom: 1rpx solid #E9E9E9; | 83 | border-bottom: 1rpx solid #E9E9E9; |
| 84 | .itemText{ | 84 | .itemText{ |
| 85 | width: 162rpx; | 85 | width: 162rpx; |
| 86 | font-family: PingFangSC-Regular; | 86 | font-family: PingFangSC-Regular; |
| 87 | letter-spacing: -0.26px; | 87 | letter-spacing: -0.26px; |
| 88 | } | 88 | } |
| 89 | .btn{ | 89 | .btn{ |
| 90 | color: #333333 !important; | 90 | color: #333333 !important; |
| 91 | } | 91 | } |
| 92 | } | 92 | } |
| 93 | .check{ | 93 | .check{ |
| 94 | justify-content: space-between; | 94 | justify-content: space-between; |
| 95 | } | 95 | } |
| 96 | } | 96 | } |
| 97 | .button{ | 97 | .button{ |
| 98 | position: fixed; | 98 | position: fixed; |
| 99 | bottom: 0; | 99 | bottom: 0; |
| 100 | left: 0; | 100 | left: 0; |
| 101 | height: 112rpx; | 101 | height: 112rpx; |
| 102 | width: 100%; | 102 | width: 100%; |
| 103 | background: #FF6B4A; | 103 | background: #FF6B4A; |
| 104 | display: flex; | 104 | display: flex; |
| 105 | justify-content: center; | 105 | justify-content: center; |
| 106 | align-items: center; | 106 | align-items: center; |
| 107 | font-size: 16px; | 107 | font-size: 16px; |
| 108 | color: #FFFFFF; | 108 | color: #FFFFFF; |
| 109 | letter-spacing: -0.3px; | 109 | letter-spacing: -0.3px; |
| 110 | } | 110 | } |
| 111 | </style> | 111 | </style> |
| 112 | 112 |
src/pages/index/index.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <view class="header"> | 3 | <view class="header"> |
| 4 | <!-- 搜索--> | 4 | <!-- 搜索--> |
| 5 | <view class="searchBar"> | 5 | <view class="searchBar"> |
| 6 | <icon class="searchIcon" type="search" size="14"></icon> | 6 | <icon class="searchIcon" type="search" size="14"></icon> |
| 7 | <input class="searchIpt" placeholder="老花镜" confirm-type="search"/> | 7 | <input class="searchIpt" placeholder="老花镜" confirm-type="search"/> |
| 8 | </view> | 8 | </view> |
| 9 | 9 | ||
| 10 | <!-- 筛选栏--> | 10 | <!-- 筛选栏--> |
| 11 | <view class="screenBar"> | 11 | <view class="screenBar"> |
| 12 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > | 12 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > |
| 13 | <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown"> | 13 | <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown"> |
| 14 | {{ item.text }}<icon type="info" size="14"></icon> | 14 | {{ item.text }}<icon type="info" size="14"></icon> |
| 15 | </view> | 15 | </view> |
| 16 | <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')"> | 16 | <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')"> |
| 17 | {{ item.text }}<icon type="info" size="14"></icon> | 17 | {{ item.text }}<icon type="info" size="14"></icon> |
| 18 | </view> | 18 | </view> |
| 19 | <view v-if="item.current !== 2&&item.current!==4"> | 19 | <view v-if="item.current !== 2&&item.current!==4"> |
| 20 | <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> | 20 | <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> |
| 21 | </view> | 21 | </view> |
| 22 | </view> | 22 | </view> |
| 23 | </view> | 23 | </view> |
| 24 | </view> | 24 | </view> |
| 25 | <uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')"> | 25 | <uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')"> |
| 26 | <view class="close"> | 26 | <view class="close"> |
| 27 | <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view> | 27 | <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view> |
| 28 | </view> | 28 | </view> |
| 29 | </uni-drawer> | 29 | </uni-drawer> |
| 30 | 30 | ||
| 31 | 31 | ||
| 32 | 32 | ||
| 33 | <!-- 筛选菜单--> | 33 | <!-- 筛选菜单--> |
| 34 | <view class="content-wrap"> | 34 | <view class="content-wrap"> |
| 35 | <view> | 35 | <view> |
| 36 | <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown> | 36 | <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown> |
| 37 | <!-- 商品列表 --> | 37 | <!-- 商品列表 --> |
| 38 | <view class="goods-list"> | 38 | <view class="goods-list"> |
| 39 | <view class="product-list"> | 39 | <view class="product-list"> |
| 40 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" > | 40 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" > |
| 41 | <Card :goods = "goods"></Card> | 41 | <Card :goods = "goods"></Card> |
| 42 | </view> | 42 | </view> |
| 43 | </view> | 43 | </view> |
| 44 | <view class="loading-text">{{loadingText}}</view> | 44 | <view class="loading-text">{{loadingText}}</view> |
| 45 | </view> | 45 | </view> |
| 46 | 46 | ||
| 47 | </view> | 47 | </view> |
| 48 | </view> | 48 | </view> |
| 49 | </view> | 49 | </view> |
| 50 | </template> | 50 | </template> |
| 51 | 51 | ||
| 52 | <script> | 52 | <script> |
| 53 | import UniDrawer from "@/components/uni-drawer/uni-drawer.vue"; | 53 | import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue"; |
| 54 | import Card from "../../components/Card/Card.vue" | 54 | import Card from "../../components/Card/Card.vue" |
| 55 | import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue"; | 55 | import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue"; |
| 56 | import data from '@/common/data.js';//筛选菜单数据 | 56 | import data from '@/common/data.js';//筛选菜单数据 |
| 57 | export default { | 57 | export default { |
| 58 | components: { | 58 | components: { |
| 59 | 'UniDrawer':UniDrawer, | 59 | 'UniDrawer':UniDrawer, |
| 60 | 'HMfilterDropdown':HMfilterDropdown, | 60 | 'HMfilterDropdown':HMfilterDropdown, |
| 61 | 'Card':Card | 61 | 'Card':Card |
| 62 | }, | 62 | }, |
| 63 | data() { | 63 | data() { |
| 64 | return { | 64 | return { |
| 65 | screenItems: [ | 65 | screenItems: [ |
| 66 | {current:0,text:'全部',hasIcon:false}, | 66 | {current:0,text:'全部',hasIcon:false}, |
| 67 | {current:1,text:'销量',hasIcon:false}, | 67 | {current:1,text:'销量',hasIcon:false}, |
| 68 | {current:2,text:'价格',hasIcon:true}, | 68 | {current:2,text:'价格',hasIcon:true}, |
| 69 | {current:3,text:'折扣',hasIcon:false}, | 69 | {current:3,text:'折扣',hasIcon:false}, |
| 70 | {current:4,text:'筛选',hasIcon:true}, | 70 | {current:4,text:'筛选',hasIcon:true}, |
| 71 | ], | 71 | ], |
| 72 | current: 0, | 72 | current: 0, |
| 73 | showRight: false, | 73 | showRight: false, |
| 74 | indexArr:'', | 74 | indexArr:'', |
| 75 | valueArr:'', | 75 | valueArr:'', |
| 76 | //商品数据 | 76 | //商品数据 |
| 77 | goodsList:[ | 77 | goodsList:[ |
| 78 | { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 78 | { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 79 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 79 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 80 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 80 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 81 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 81 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 82 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 82 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 83 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 83 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 84 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 84 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 85 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 85 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 86 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 86 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 87 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } | 87 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } |
| 88 | ], | 88 | ], |
| 89 | loadingText:"正在加载...", | 89 | loadingText:"正在加载...", |
| 90 | filterDropdownValue:[], | 90 | filterDropdownValue:[], |
| 91 | filterData:[] | 91 | filterData:[] |
| 92 | } | 92 | } |
| 93 | }, | 93 | }, |
| 94 | filters: { | 94 | filters: { |
| 95 | outData(value) { | 95 | outData(value) { |
| 96 | return JSON.stringify(value); | 96 | return JSON.stringify(value); |
| 97 | } | 97 | } |
| 98 | }, | 98 | }, |
| 99 | onLoad: function () { | 99 | onLoad: function () { |
| 100 | //定时器模拟ajax异步请求数据 | 100 | //定时器模拟ajax异步请求数据 |
| 101 | // setTimeout(()=>{ | 101 | // setTimeout(()=>{ |
| 102 | // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null | 102 | // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null |
| 103 | // this.filterDropdownValue = [ | 103 | // this.filterDropdownValue = [ |
| 104 | // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 | 104 | // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 |
| 105 | // [null,null], //第1个菜单选中 都不选中 | 105 | // [null,null], //第1个菜单选中 都不选中 |
| 106 | // [1], //第2个菜单选中 一级菜单的第1项 | 106 | // [1], //第2个菜单选中 一级菜单的第1项 |
| 107 | // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 | 107 | // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 |
| 108 | // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 | 108 | // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 |
| 109 | // ]; | 109 | // ]; |
| 110 | this.filterData = data; | 110 | this.filterData = data; |
| 111 | // },100); | 111 | // },100); |
| 112 | // 模拟ajax请求子菜单数据。 | 112 | // 模拟ajax请求子菜单数据。 |
| 113 | // setTimeout(()=>{ | 113 | // setTimeout(()=>{ |
| 114 | // this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}]; | 114 | // this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}]; |
| 115 | // },5000) | 115 | // },5000) |
| 116 | }, | 116 | }, |
| 117 | methods: { | 117 | methods: { |
| 118 | showDrawer(e) { | 118 | showDrawer(e) { |
| 119 | this.$refs[e].open() | 119 | this.$refs[e].open() |
| 120 | }, | 120 | }, |
| 121 | closeDrawer(e) { | 121 | closeDrawer(e) { |
| 122 | this.$refs[e].close() | 122 | this.$refs[e].close() |
| 123 | }, | 123 | }, |
| 124 | change(e, type) { | 124 | change(e, type) { |
| 125 | this[type] = e | 125 | this[type] = e |
| 126 | }, | 126 | }, |
| 127 | onClickItem(e) { | 127 | onClickItem(e) { |
| 128 | if (this.current !== e) { | 128 | if (this.current !== e) { |
| 129 | this.current = e; | 129 | this.current = e; |
| 130 | } | 130 | } |
| 131 | }, | 131 | }, |
| 132 | dropDown(){ | 132 | dropDown(){ |
| 133 | console.log('下拉') | 133 | console.log('下拉') |
| 134 | }, | 134 | }, |
| 135 | //接收菜单结果 | 135 | //接收菜单结果 |
| 136 | confirm(e){ | 136 | confirm(e){ |
| 137 | this.indexArr = e.index; | 137 | this.indexArr = e.index; |
| 138 | this.valueArr = e.value; | 138 | this.valueArr = e.value; |
| 139 | return; | 139 | return; |
| 140 | console.log('修改菜单'); | 140 | console.log('修改菜单'); |
| 141 | this.filterData[4].submenu[1] = { | 141 | this.filterData[4].submenu[1] = { |
| 142 | "name": "项目2", | 142 | "name": "项目2", |
| 143 | "submenu": [ | 143 | "submenu": [ |
| 144 | 144 | ||
| 145 | ] | 145 | ] |
| 146 | } | 146 | } |
| 147 | } | 147 | } |
| 148 | }, | 148 | }, |
| 149 | onNavigationBarButtonTap(e) { | 149 | onNavigationBarButtonTap(e) { |
| 150 | this.showRight = !this.showRight | 150 | this.showRight = !this.showRight |
| 151 | }, | 151 | }, |
| 152 | //上拉加载， | 152 | //上拉加载， |
| 153 | onReachBottom(){ | 153 | onReachBottom(){ |
| 154 | console.log('到底加载') | 154 | console.log('到底加载') |
| 155 | let len = this.goodsList.length; | 155 | let len = this.goodsList.length; |
| 156 | if(len>=30){ | 156 | if(len>=30){ |
| 157 | this.loadingText="~~到底了~~"; | 157 | this.loadingText="~~到底了~~"; |
| 158 | return false; | 158 | return false; |
| 159 | }else{ | 159 | }else{ |
| 160 | this.loadingText="正在加载..."; | 160 | this.loadingText="正在加载..."; |
| 161 | } | 161 | } |
| 162 | let end_goods_id = this.goodsList[len-1].goods_id; | 162 | let end_goods_id = this.goodsList[len-1].goods_id; |
| 163 | for(let i=1;i<=10;i++){ | 163 | for(let i=1;i<=10;i++){ |
| 164 | let goods_id = end_goods_id+i; | 164 | let goods_id = end_goods_id+i; |
| 165 | let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg',name: '商品名称', originCost:'￥198' ,price: '￥168', slogan:'1235人付款' }; | 165 | let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg',name: '商品名称', originCost:'￥198' ,price: '￥168', slogan:'1235人付款' }; |
| 166 | this.goodsList.push(p); | 166 | this.goodsList.push(p); |
| 167 | } | 167 | } |
| 168 | }, | 168 | }, |
| 169 | } | 169 | } |
| 170 | </script> | 170 | </script> |
| 171 | 171 | ||
| 172 | <style lang="scss"> | 172 | <style lang="scss"> |
| 173 | .content { | 173 | .content { |
| 174 | display: flex; | 174 | display: flex; |
| 175 | flex-direction: column; | 175 | flex-direction: column; |
| 176 | align-items: center; | 176 | align-items: center; |
| 177 | justify-content: center; | 177 | justify-content: center; |
| 178 | background-color: #F7F6F6; | 178 | background-color: #F7F6F6; |
| 179 | } | 179 | } |
| 180 | .header{ | 180 | .header{ |
| 181 | display: flex; | 181 | display: flex; |
| 182 | flex-direction: column; | 182 | flex-direction: column; |
| 183 | align-items: center; | 183 | align-items: center; |
| 184 | justify-content: center; | 184 | justify-content: center; |
| 185 | background-color: #F7F6F6; | 185 | background-color: #F7F6F6; |
| 186 | height:178rpx ; | 186 | height:178rpx ; |
| 187 | width: 100%; | 187 | width: 100%; |
| 188 | z-index: 999; | 188 | z-index: 999; |
| 189 | position: fixed; | 189 | position: fixed; |
| 190 | top: 0; | 190 | top: 0; |
| 191 | left: 0; | 191 | left: 0; |
| 192 | } | 192 | } |
| 193 | .searchBar { | 193 | .searchBar { |
| 194 | width: 670rpx; | 194 | width: 670rpx; |
| 195 | display: flex; | 195 | display: flex; |
| 196 | justify-content: center; | 196 | justify-content: center; |
| 197 | align-items: center; | 197 | align-items: center; |
| 198 | box-sizing: border-box; | 198 | box-sizing: border-box; |
| 199 | padding: 0rpx 16rpx; | 199 | padding: 0rpx 16rpx; |
| 200 | border: 1px solid #FF6B4A; | 200 | border: 1px solid #FF6B4A; |
| 201 | border-radius: 8rpx; | 201 | border-radius: 8rpx; |
| 202 | background-color: #ffffff; | 202 | background-color: #ffffff; |
| 203 | } | 203 | } |
| 204 | 204 | ||
| 205 | .searchIpt { | 205 | .searchIpt { |
| 206 | height: 68rpx; | 206 | height: 68rpx; |
| 207 | width: 670rpx; | 207 | width: 670rpx; |
| 208 | padding: 16rpx; | 208 | padding: 16rpx; |
| 209 | font-size: 28rpx; | 209 | font-size: 28rpx; |
| 210 | box-sizing: border-box; | 210 | box-sizing: border-box; |
| 211 | } | 211 | } |
| 212 | .screenBar{ | 212 | .screenBar{ |
| 213 | width: 670rpx; | 213 | width: 670rpx; |
| 214 | height: 110rpx; | 214 | height: 110rpx; |
| 215 | display: flex; | 215 | display: flex; |
| 216 | flex-direction: row; | 216 | flex-direction: row; |
| 217 | justify-content: space-between; | 217 | justify-content: space-between; |
| 218 | align-items: center; | 218 | align-items: center; |
| 219 | color: #333333; | 219 | color: #333333; |
| 220 | font-size: 32rpx; | 220 | font-size: 32rpx; |
| 221 | } | 221 | } |
| 222 | .active{ | 222 | .active{ |
| 223 | color: #FF6B4A; | 223 | color: #FF6B4A; |
| 224 | } | 224 | } |
| 225 | .screenItem{ | 225 | .screenItem{ |
| 226 | display: flex; | 226 | display: flex; |
| 227 | justify-content: center; | 227 | justify-content: center; |
| 228 | align-items: center; | 228 | align-items: center; |
| 229 | } | 229 | } |
| 230 | .content-wrap{ | 230 | .content-wrap{ |
| 231 | width: 100%; | 231 | width: 100%; |
| 232 | background-color: #FFFFFF; | 232 | background-color: #FFFFFF; |
| 233 | } | 233 | } |
| 234 | 234 | ||
| 235 | .HMfilterDropdown{ | 235 | .HMfilterDropdown{ |
| 236 | top: 178rpx !important; | 236 | top: 178rpx !important; |
| 237 | } | 237 | } |
| 238 | 238 | ||
| 239 | .goods-list{ | 239 | .goods-list{ |
| 240 | padding-top: 286rpx; | 240 | padding-top: 286rpx; |
| 241 | .loading-text{ | 241 | .loading-text{ |
| 242 | width: 100%; | 242 | width: 100%; |
| 243 | display: flex; | 243 | display: flex; |
| 244 | justify-content: center; | 244 | justify-content: center; |
| 245 | align-items: center; | 245 | align-items: center; |
| 246 | height: 30px; | 246 | height: 30px; |
| 247 | color: #979797; | 247 | color: #979797; |
| 248 | font-size: 12px; | 248 | font-size: 12px; |
| 249 | } | 249 | } |
| 250 | .product-list{ | 250 | .product-list{ |
| 251 | width: 92%; | 251 | width: 92%; |
| 252 | padding: 0 4% 3vw 4%; | 252 | padding: 0 4% 3vw 4%; |
| 253 | display: flex; | 253 | display: flex; |
| 254 | justify-content: space-between; | 254 | justify-content: space-between; |
| 255 | flex-wrap: wrap; | 255 | flex-wrap: wrap; |
| 256 | .product{ | 256 | .product{ |
| 257 | width: 48%; | 257 | width: 48%; |
| 258 | margin: 0 0 20rpx 0; | 258 | margin: 0 0 20rpx 0; |
| 259 | background: #FFFFFF; | 259 | background: #FFFFFF; |
| 260 | border: 1px solid #F2F2F2; | 260 | border: 1px solid #F2F2F2; |
| 261 | } | 261 | } |
| 262 | } | 262 | } |
| 263 | } | 263 | } |
| 264 | 264 | ||
| 265 | </style> | 265 | </style> |
| 266 | 266 |
src/pages/myOrder/myOrder.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <view class="header"> | 3 | <view class="header"> |
| 4 | <!-- 搜索--> | 4 | <!-- 搜索--> |
| 5 | <view class="searchBar"> | 5 | <view class="searchBar"> |
| 6 | <icon class="searchIcon" type="search" size="14"></icon> | 6 | <icon class="searchIcon" type="search" size="14"></icon> |
| 7 | <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> | 7 | <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> |
| 8 | </view> | 8 | </view> |
| 9 | <view class="screenBar"> | 9 | <view class="screenBar"> |
| 10 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > | 10 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > |
| 11 | <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> | 11 | <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> |
| 12 | </view> | 12 | </view> |
| 13 | </view> | 13 | </view> |
| 14 | </view> | 14 | </view> |
| 15 | <view class="orderList" > | 15 | <view class="orderList" > |
| 16 | <view v-for="(order) in orderList" :key="order.orderId"> | 16 | <view v-for="(order) in orderList" :key="order.orderId"> |
| 17 | <OrderCard :order = "order" :current="current"></OrderCard> | 17 | <OrderCard :order = "order" :current="current"></OrderCard> |
| 18 | </view> | 18 | </view> |
| 19 | </view> | 19 | </view> |
| 20 | <view class="footer">已显示全部</view> | 20 | <view class="footer">已显示全部</view> |
| 21 | </view> | 21 | </view> |
| 22 | </template> | 22 | </template> |
| 23 | <script> | 23 | <script> |
| 24 | import OrderCard from './orderCard.vue' | 24 | import OrderCard from './OrderCard.vue' |
| 25 | export default { | 25 | export default { |
| 26 | components:{ | 26 | components:{ |
| 27 | 'OrderCard':OrderCard | 27 | 'OrderCard':OrderCard |
| 28 | }, | 28 | }, |
| 29 | data() { | 29 | data() { |
| 30 | return { | 30 | return { |
| 31 | screenItems: [ | 31 | screenItems: [ |
| 32 | {current:0,text:'全部'}, | 32 | {current:0,text:'全部'}, |
| 33 | {current:1,text:'待付款'}, | 33 | {current:1,text:'待付款'}, |
| 34 | {current:2,text:'待发货'}, | 34 | {current:2,text:'待发货'}, |
| 35 | {current:3,text:'待收货'}, | 35 | {current:3,text:'待收货'}, |
| 36 | {current:4,text:'退款售后'}, | 36 | {current:4,text:'退款售后'}, |
| 37 | ], | 37 | ], |
| 38 | current: 0, | 38 | current: 0, |
| 39 | //订单数据 | 39 | //订单数据 |
| 40 | orderList:[ | 40 | orderList:[ |
| 41 | { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1}, | 41 | { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1}, |
| 42 | { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1}, | 42 | { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1}, |
| 43 | { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1}, | 43 | { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1}, |
| 44 | { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1}, | 44 | { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1}, |
| 45 | { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1}, | 45 | { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1}, |
| 46 | { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1}, | 46 | { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1}, |
| 47 | { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1}, | 47 | { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1}, |
| 48 | { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}, | 48 | { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}, |
| 49 | { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1} | 49 | { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1} |
| 50 | ], | 50 | ], |
| 51 | 51 | ||
| 52 | }; | 52 | }; |
| 53 | }, | 53 | }, |
| 54 | methods:{ | 54 | methods:{ |
| 55 | onClickItem(e) { | 55 | onClickItem(e) { |
| 56 | if (this.current !== e) { | 56 | if (this.current !== e) { |
| 57 | this.current = e; | 57 | this.current = e; |
| 58 | } | 58 | } |
| 59 | } | 59 | } |
| 60 | } | 60 | } |
| 61 | } | 61 | } |
| 62 | </script> | 62 | </script> |
| 63 | 63 | ||
| 64 | <style lang="scss"> | 64 | <style lang="scss"> |
| 65 | .content { | 65 | .content { |
| 66 | display: flex; | 66 | display: flex; |
| 67 | flex-direction: column; | 67 | flex-direction: column; |
| 68 | align-items: center; | 68 | align-items: center; |
| 69 | background-color: #F7F6F6; | 69 | background-color: #F7F6F6; |
| 70 | min-height: 100vh; | 70 | min-height: 100vh; |
| 71 | .header{ | 71 | .header{ |
| 72 | background-color: #ffffff; | 72 | background-color: #ffffff; |
| 73 | width: 100%; | 73 | width: 100%; |
| 74 | height: 232rpx; | 74 | height: 232rpx; |
| 75 | padding: 40rpx 40rpx 36rpx 40rpx; | 75 | padding: 40rpx 40rpx 36rpx 40rpx; |
| 76 | box-sizing: border-box; | 76 | box-sizing: border-box; |
| 77 | position: fixed; | 77 | position: fixed; |
| 78 | top: 0; | 78 | top: 0; |
| 79 | left: 0; | 79 | left: 0; |
| 80 | .searchBar { | 80 | .searchBar { |
| 81 | width: 670rpx; | 81 | width: 670rpx; |
| 82 | display: flex; | 82 | display: flex; |
| 83 | justify-content: center; | 83 | justify-content: center; |
| 84 | align-items: center; | 84 | align-items: center; |
| 85 | box-sizing: border-box; | 85 | box-sizing: border-box; |
| 86 | padding: 0rpx 16rpx; | 86 | padding: 0rpx 16rpx; |
| 87 | border: 1px solid #FF6B4A; | 87 | border: 1px solid #FF6B4A; |
| 88 | border-radius: 8rpx; | 88 | border-radius: 8rpx; |
| 89 | background-color: #ffffff; | 89 | background-color: #ffffff; |
| 90 | } | 90 | } |
| 91 | 91 | ||
| 92 | .screenBar{ | 92 | .screenBar{ |
| 93 | width: 670rpx; | 93 | width: 670rpx; |
| 94 | height: 110rpx; | 94 | height: 110rpx; |
| 95 | display: flex; | 95 | display: flex; |
| 96 | flex-direction: row; | 96 | flex-direction: row; |
| 97 | justify-content: space-between; | 97 | justify-content: space-between; |
| 98 | align-items: center; | 98 | align-items: center; |
| 99 | color: #333333; | 99 | color: #333333; |
| 100 | font-size: 32rpx; | 100 | font-size: 32rpx; |
| 101 | } | 101 | } |
| 102 | .screenItem{ | 102 | .screenItem{ |
| 103 | height: 50rpx; | 103 | height: 50rpx; |
| 104 | font-size: 32rpx; | 104 | font-size: 32rpx; |
| 105 | color: #333333; | 105 | color: #333333; |
| 106 | display: flex; | 106 | display: flex; |
| 107 | justify-content: center; | 107 | justify-content: center; |
| 108 | align-items: center; | 108 | align-items: center; |
| 109 | transition:all 0.2s; | 109 | transition:all 0.2s; |
| 110 | } | 110 | } |
| 111 | .active{ | 111 | .active{ |
| 112 | // font-size: 34rpx; | 112 | // font-size: 34rpx; |
| 113 | color: #EC5D3B; | 113 | color: #EC5D3B; |
| 114 | } | 114 | } |
| 115 | .searchIpt { | 115 | .searchIpt { |
| 116 | height: 68rpx; | 116 | height: 68rpx; |
| 117 | width: 670rpx; | 117 | width: 670rpx; |
| 118 | padding: 16rpx; | 118 | padding: 16rpx; |
| 119 | font-size: 28rpx; | 119 | font-size: 28rpx; |
| 120 | box-sizing: border-box; | 120 | box-sizing: border-box; |
| 121 | } | 121 | } |
| 122 | } | 122 | } |
| 123 | .orderList{ | 123 | .orderList{ |
| 124 | margin-top: 232rpx; | 124 | margin-top: 232rpx; |
| 125 | } | 125 | } |
| 126 | .footer{ | 126 | .footer{ |
| 127 | font-size: 14px; | 127 | font-size: 14px; |
| 128 | color: #B8B8B8; | 128 | color: #B8B8B8; |
| 129 | margin: 40rpx 0; | 129 | margin: 40rpx 0; |
| 130 | } | 130 | } |
| 131 | } | 131 | } |
| 132 | </style> | 132 | </style> |
| 133 | 133 |
src/pages/refund/refund.vue
| 1 | <template> | File was deleted | |
| 2 | <view> | ||
| 3 | |||
| 4 | </view> | ||
| 5 | </template> | ||
| 6 | |||
| 7 | <script> | ||
| 8 | export default { | ||
| 9 | data() { | ||
| 10 | return { | ||
| 11 | |||
| 12 | }; | ||
| 13 | } | ||
| 14 | } | ||
| 15 | </script> | ||
| 16 | |||
| 17 | <style lang="scss"> | ||
| 18 | |||
| 19 | </style> | ||
| 20 | 1 | <template> |
src/pages/refundProgress/refundProgress.vue
| File was created | 1 | <template> | |
| 2 | <view class="content"> | ||
| 3 | <view class="header" v-if="type===1"> | ||
| 4 | <view class="header-left"> | ||
| 5 | <view class="text1" >退款中</view> | ||
| 6 | <view class="text2">还剩00:56:27确认</view> | ||
| 7 | </view> | ||
| 8 | <image class="header-right" src="../../static/customerService-simle.png" mode="aspectFill"></image> | ||
| 9 | </view> | ||
| 10 | <view class="header" v-if="type===2"> | ||
| 11 | <view class="header-left"> | ||
| 12 | <view class="text1" >商家处理中</view> | ||
| 13 | <view class="text2">还剩00:56:27确认</view> | ||
| 14 | </view> | ||
| 15 | <image class="header-right" src="../../static/customerService-simle.png" mode="aspectFill"></image> | ||
| 16 | </view> | ||
| 17 | <view class="header" v-if="type===3"> | ||
| 18 | <view class="header-left"> | ||
| 19 | <view class="text1" >卖家已发货</view> | ||
| 20 | <view class="text2">还剩 00:56:27 确认</view> | ||
| 21 | </view> | ||
| 22 | <image class="header-right" src="../../static/customerService-simle.png" mode="aspectFill"></image> | ||
| 23 | </view> | ||
| 24 | <view class="orderInfoCard"> | ||
| 25 | <view class="info"> | ||
| 26 | <image src="../../static/img/detail/d1.png" mode="aspectFill"></image> | ||
| 27 | <view class="infoText"> | ||
| 28 | <view class="orderName">商品名称商品名称商品名称</view> | ||
| 29 | <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view> | ||
| 30 | <view class="infoText-bottom"> | ||
| 31 | <view class="markPrice">￥188</view> | ||
| 32 | <view class="buy-num">X 1</view> | ||
| 33 | </view> | ||
| 34 | </view> | ||
| 35 | </view> | ||
| 36 | <view class="refund_price"> | ||
| 37 | <text class="refund_price_title">退款金额</text> | ||
| 38 | <text class="refund_price_price">￥110</text> | ||
| 39 | </view> | ||
| 40 | </view> | ||
| 41 | <view class="application"> | ||
| 42 | <view class="title">申请记录</view> | ||
| 43 | <view class="item"> | ||
| 44 | <text class="text1">服务类型</text> | ||
| 45 | <text class="text2">退款</text> | ||
| 46 | </view> | ||
| 47 | <view class="item"> | ||
| 48 | <text class="text1">换货原因</text> | ||
| 49 | <text class="text2">不想要了</text> | ||
| 50 | </view> | ||
| 51 | <view class="item"> | ||
| 52 | <text class="text1">申请时间</text> | ||
| 53 | <text class="text2">2020-10-22 17:55:03</text> | ||
| 54 | </view> | ||
| 55 | <view class="item"> | ||
| 56 | <text class="text1">货物编号</text> | ||
| 57 | <text class="text2">173549842184</text> | ||
| 58 | </view> | ||
| 59 | <view class="button"> | ||
| 60 | <image src="../../static/customerService-horn.png" mode="aspectFill" style="width: 38rpx;height: 38rpx;"></image> | ||
| 61 | <text>联系客服</text> | ||
| 62 | </view> | ||
| 63 | </view> | ||
| 64 | <view class="btn-bar" v-if="type===1"> | ||
| 65 | <view class="btn2"> | ||
| 66 | 退款进度 | ||
| 67 | </view> | ||
| 68 | </view> | ||
| 69 | <view class="btn1" v-if="type===2"> | ||
| 70 | 修改申请 | ||
| 71 | </view> | ||
| 72 | <view v-if="type===3"></view> | ||
| 73 | </view> | ||
| 74 | </template> | ||
| 75 | |||
| 76 | <script> | ||
| 77 | export default { | ||
| 78 | data() { | ||
| 79 | return { | ||
| 80 | type:3 | ||
| 81 | }; | ||
| 82 | } | ||
| 83 | } | ||
| 84 | </script> | ||
| 85 | |||
| 86 | <style lang="scss"> | ||
| 87 | .content{ | ||
| 88 | background-color: #F2F2F2; | ||
| 89 | min-height: 100vh; | ||
| 90 | display: flex; | ||
| 91 | flex-direction: column; | ||
| 92 | align-items: center; | ||
| 93 | .header{ | ||
| 94 | width: 100%; | ||
| 95 | height: 142rpx; | ||
| 96 | background-color: #4A90E2; | ||
| 97 | color: #FFFFFF; | ||
| 98 | display: flex; | ||
| 99 | justify-content: space-between; | ||
| 100 | align-items: center; | ||
| 101 | padding: 0 60rpx; | ||
| 102 | box-sizing: border-box; | ||
| 103 | .header-left{ | ||
| 104 | display: flex; | ||
| 105 | flex-direction: column; | ||
| 106 | justify-content: space-between; | ||
| 107 | align-items: center; | ||
| 108 | height: 92rpx; | ||
| 109 | width: 220rpx; | ||
| 110 | color: #FFFFFF; | ||
| 111 | .text1{ | ||
| 112 | font-size: 36rpx; | ||
| 113 | } | ||
| 114 | .text2{ | ||
| 115 | font-size: 24rpx; | ||
| 116 | } | ||
| 117 | } | ||
| 118 | .header-right{ | ||
| 119 | height: 48rpx; | ||
| 120 | width: 48rpx; | ||
| 121 | } | ||
| 122 | } | ||
| 123 | .orderInfoCard{ | ||
| 124 | height: 362rpx; | ||
| 125 | width: 670rpx; | ||
| 126 | background: #FFFFFF; | ||
| 127 | box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); | ||
| 128 | border-radius: 8px; | ||
| 129 | margin-top: 20rpx; | ||
| 130 | margin-bottom: 20rpx; | ||
| 131 | padding: 40rpx 40rpx 60rpx 40rpx; | ||
| 132 | box-sizing: border-box; | ||
| 133 | .info{ | ||
| 134 | width: 100%; | ||
| 135 | display: flex; | ||
| 136 | flex-direction: row; | ||
| 137 | justify-content: space-between; | ||
| 138 | align-items: center; | ||
| 139 | margin-bottom: 30rpx; | ||
| 140 | image{ | ||
| 141 | height: 188rpx; | ||
| 142 | width: 188rpx; | ||
| 143 | margin-right: 24rpx; | ||
| 144 | } | ||
| 145 | .infoText{ | ||
| 146 | display: flex; | ||
| 147 | flex-direction: column; | ||
| 148 | justify-content: space-between; | ||
| 149 | align-items: flex-start; | ||
| 150 | height: 188rpx; | ||
| 151 | } | ||
| 152 | .orderName{ | ||
| 153 | font-size: 14px; | ||
| 154 | color: #333333; | ||
| 155 | } | ||
| 156 | .orderDescrib{ | ||
| 157 | font-size: 12px; | ||
| 158 | color: #999999; | ||
| 159 | } | ||
| 160 | .infoText-bottom{ | ||
| 161 | display: flex; | ||
| 162 | flex-direction: row; | ||
| 163 | justify-content: space-between; | ||
| 164 | align-items: center; | ||
| 165 | width: 100%; | ||
| 166 | .markPrice{ | ||
| 167 | font-size: 14px; | ||
| 168 | color: #FF6B4A; | ||
| 169 | } | ||
| 170 | .buy-num{ | ||
| 171 | font-size: 12px; | ||
| 172 | color: #999999; | ||
| 173 | } | ||
| 174 | } | ||
| 175 | } | ||
| 176 | .refund_price{ | ||
| 177 | text-align: right; | ||
| 178 | .refund_price_title{ | ||
| 179 | font-size: 14px; | ||
| 180 | color: #333333; | ||
| 181 | margin-right: 40rpx; | ||
| 182 | } | ||
| 183 | .refund_price_price{ | ||
| 184 | font-size: 14px; | ||
| 185 | color: #FF6B4A; | ||
| 186 | } | ||
| 187 | } | ||
| 188 | } | ||
| 189 | .application{ | ||
| 190 | background: #FFFFFF; | ||
| 191 | box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); | ||
| 192 | border-radius: 8px; | ||
| 193 | height: 532rpx; | ||
| 194 | width: 670rpx; | ||
| 195 | margin-bottom: 132rpx; | ||
| 196 | padding: 40rpx 40rpx 32rpx 36rpx; | ||
| 197 | box-sizing: border-box; | ||
| 198 | display: flex; | ||
| 199 | flex-direction: column; | ||
| 200 | justify-content: space-between; | ||
| 201 | .title{ | ||
| 202 | font-size: 16px; | ||
| 203 | color: #333333; | ||
| 204 | } | ||
| 205 | .item{ | ||
| 206 | font-size: 12px; | ||
| 207 | color: #999999; | ||
| 208 | .text1{ | ||
| 209 | font-size: 12px; | ||
| 210 | color: #999999; | ||
| 211 | margin-right: 40rpx; | ||
| 212 | } | ||
| 213 | .text2{ | ||
| 214 | font-size: 12px; | ||
| 215 | color: #B8B8B8; | ||
| 216 | } | ||
| 217 | } | ||
| 218 | .button{ | ||
| 219 | display: flex; | ||
| 220 | justify-content: flex-start; | ||
| 221 | image{ | ||
| 222 | margin-right: 20rpx; | ||
| 223 | } | ||
| 224 | font-size: 14px; | ||
| 225 | color: #333333; | ||
| 226 | } | ||
| 227 | } | ||
| 228 | .btn1{ | ||
| 229 | position: fixed; | ||
| 230 | height: 112rpx; | ||
| 231 | width: 100%; | ||
| 232 | background-color: #FF6B4A; | ||
| 233 | color: #FFFFFF; | ||
| 234 | font-size: 32rpx; | ||
| 235 | left: 0; | ||
| 236 | bottom: 0; | ||
| 237 | font-size: 16px; | ||
| 238 | color: #FFFFFF; | ||
| 239 | line-height: 112rpx; | ||
| 240 | text-align: center; | ||
| 241 | } | ||
| 242 | .btn-bar{ | ||
| 243 | position: fixed; | ||
| 244 | left: 0; | ||
| 245 | bottom: 0; | ||
| 246 | height: 112rpx; | ||
| 247 | width: 100%; | ||
| 248 | background-color: #FFFFFF; | ||
| 249 | padding-right: 26rpx; | ||
| 250 | box-sizing: border-box; | ||
| 251 | display: flex; | ||
| 252 | justify-content: flex-end; | ||
| 253 | align-items: center; | ||
| 254 | .btn2{ | ||
| 255 | width: 204rpx; | ||
| 256 | height: 80rpx; | ||
| 257 | border: 1px solid #FF6B4A; | ||
| 258 | border-radius: 20px; | ||
| 259 | border-radius: 20px; | ||
| 260 | background-color: #FFFFFF; | ||
| 261 | font-size: 16px; | ||
| 262 | color: #FF6B4A; | ||
| 263 | line-height: 80rpx; | ||
| 264 | text-align: center; | ||
| 265 | } | ||
| 266 | } | ||
| 267 | |||
| 268 | } | ||
| 269 | </style> | ||
| 270 |
src/pages/user/user.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="wrap"> | 2 | <view class="wrap"> |
| 3 | <view class="content"> | 3 | <view class="content"> |
| 4 | <view class="userInfo"> | 4 | <view class="userInfo"> |
| 5 | <view class="info"> | 5 | <view class="info"> |
| 6 | <image src="../../static/img/detail/d10.png" mode="aspectFill"></image> | 6 | <image src="../../static/img/detail/d10.png" mode="aspectFill"></image> |
| 7 | <view class="infoText"> | 7 | <view class="infoText"> |
| 8 | <text class="userName">{{userName}}</text> | 8 | <text class="userName">{{userName}}</text> |
| 9 | <text class="nickName">用户名：骆驼不死的祥子</text> | 9 | <text class="nickName">用户名：骆驼不死的祥子</text> |
| 10 | </view> | 10 | </view> |
| 11 | </view> | 11 | </view> |
| 12 | <view class="service"> | 12 | <view class="service"> |
| 13 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> | 13 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> |
| 14 | </view> | 14 | </view> |
| 15 | </view> | 15 | </view> |
| 16 | <view class="myOrder"> | 16 | <view class="myOrder"> |
| 17 | <view class="orderHeader"> | 17 | <view class="orderHeader"> |
| 18 | <text>全部订单</text> | 18 | <text>全部订单</text> |
| 19 | <view class="btn" @click="toMyOrder"> | 19 | <view class="btn" @click="toMyOrder"> |
| 20 | 全部 | 20 | 全部 |
| 21 | <image src="../../static/right.png" mode="aspectFill"></image> | 21 | <image src="../../static/right.png" mode="aspectFill"></image> |
| 22 | </view> | 22 | </view> |
| 23 | </view> | 23 | </view> |
| 24 | <view class="orderBody"> | 24 | <view class="orderBody"> |
| 25 | <view class="item,waitPay"> | 25 | <view class="item,waitPay" @click=toMyOrderPaying> |
| 26 | <image src="../../static/waitPay.png" mode="aspectFill"></image> | 26 | <image src="../../static/waitPay.png" mode="aspectFill"></image> |
| 27 | <text>待付款</text> | 27 | <text>待付款</text> |
| 28 | </view> | 28 | </view> |
| 29 | <view class="item,waitDeliver"> | 29 | <view class="item,waitDeliver" @click=toPredelivery> |
| 30 | <image src="../../static/waitDeliver.png" mode="aspectFill"></image> | 30 | <image src="../../static/waitDeliver.png" mode="aspectFill"></image> |
| 31 | <text>待发货</text> | 31 | <text>待发货</text> |
| 32 | </view> | 32 | </view> |
| 33 | <view class="item,waitReceive"> | 33 | <view class="item,waitReceive"> |
| 34 | <image src="../../static/waitReceive.png" mode="aspectFill"></image> | 34 | <image src="../../static/waitReceive.png" mode="aspectFill"></image> |
| 35 | <text>待收货</text> | 35 | <text>待收货</text> |
| 36 | </view> | 36 | </view> |
| 37 | <view class="item,service"> | 37 | <view class="item,service"> |
| 38 | <image src="../../static/service.png" mode="aspectFill"></image> | 38 | <image src="../../static/service.png" mode="aspectFill"></image> |
| 39 | <text>退换/售后</text> | 39 | <text>退换/售后</text> |
| 40 | </view> | 40 | </view> |
| 41 | </view> | 41 | </view> |
| 42 | </view> | 42 | </view> |
| 43 | <view class="recommend"> | 43 | <view class="recommend"> |
| 44 | <view class="title"> | 44 | <view class="title"> |
| 45 | <view class="line"></view> | 45 | <view class="line"></view> |
| 46 | <view class="text">精选推荐</view> | 46 | <view class="text">精选推荐</view> |
| 47 | <view class="line"></view> | 47 | <view class="line"></view> |
| 48 | </view> | 48 | </view> |
| 49 | <!-- 商品列表 --> | 49 | <!-- 商品列表 --> |
| 50 | <view class="goods-list"> | 50 | <view class="goods-list"> |
| 51 | <view class="product-list"> | 51 | <view class="product-list"> |
| 52 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> | 52 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> |
| 53 | <Card :goods = "goods"></Card> | 53 | <Card :goods = "goods"></Card> |
| 54 | </view> | 54 | </view> |
| 55 | </view> | 55 | </view> |
| 56 | <view class="loading-text">{{loadingText}}</view> | 56 | <view class="loading-text">{{loadingText}}</view> |
| 57 | </view> | 57 | </view> |
| 58 | </view> | 58 | </view> |
| 59 | </view> | 59 | </view> |
| 60 | 60 | ||
| 61 | </view> | 61 | </view> |
| 62 | </template> | 62 | </template> |
| 63 | 63 | ||
| 64 | <script> | 64 | <script> |
| 65 | import Card from "../../components/Card/Card.vue" | 65 | import Card from "../../components/Card/Card.vue" |
| 66 | export default { | 66 | export default { |
| 67 | components: { | 67 | components: { |
| 68 | 'Card':Card | 68 | 'Card':Card |
| 69 | }, | 69 | }, |
| 70 | data() { | 70 | data() { |
| 71 | return { | 71 | return { |
| 72 | 72 | ||
| 73 | //商品数据 | 73 | //商品数据 |
| 74 | goodsList:[ | 74 | goodsList:[ |
| 75 | { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 75 | { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 76 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 76 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 77 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 77 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 78 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 78 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 79 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 79 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 80 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 80 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 81 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 81 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 82 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 82 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 83 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 83 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 84 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } | 84 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } |
| 85 | ], | 85 | ], |
| 86 | headerphoto:'', | 86 | headerphoto:'', |
| 87 | userName:'Adam' | 87 | userName:'Adam' |
| 88 | } | 88 | } |
| 89 | }, | 89 | }, |
| 90 | onLoad() { | 90 | onLoad() { |
| 91 | 91 | ||
| 92 | }, | 92 | }, |
| 93 | methods: { | 93 | methods: { |
| 94 | toMyOrder(){ | 94 | toMyOrder(){ |
| 95 | uni.navigateTo({ | 95 | uni.navigateTo({ |
| 96 | url: '../myOrder/myOrder', | 96 | url: '../myOrder/myOrder', |
| 97 | success: res => {}, | 97 | success: res => {}, |
| 98 | fail: () => {}, | 98 | fail: () => {}, |
| 99 | complete: () => {} | 99 | complete: () => {} |
| 100 | }); | 100 | }); |
| 101 | }, | ||
| 102 | toPredelivery(){ | ||
| 103 | uni.navigateTo({ | ||
| 104 | url: '../Predelivery/Predelivery', | ||
| 105 | success: res => {}, | ||
| 106 | fail: () => {}, | ||
| 107 | complete: () => {} | ||
| 108 | }); | ||
| 109 | }, | ||
| 110 | toMyOrderPaying(){ | ||
| 111 | uni.navigateTo({ | ||
| 112 | url: '../myorder-paying/myorder-paying', | ||
| 113 | success: res => {}, | ||
| 114 | fail: () => {}, | ||
| 115 | complete: () => {} | ||
| 116 | }); | ||
| 101 | } | 117 | } |
| 102 | } | 118 | } |
| 103 | } | 119 | } |
| 104 | </script> | 120 | </script> |
| 105 | 121 | ||
| 106 | <style lang="scss"> | 122 | <style lang="scss"> |
| 107 | .warp{ | 123 | .warp{ |
| 108 | font-size: 24rpx; | 124 | font-size: 24rpx; |
| 109 | background-color: #f2f2f2; | 125 | background-color: #f2f2f2; |
| 110 | height: 100vh; | 126 | height: 100vh; |
| 111 | } | 127 | } |
| 112 | .content { | 128 | .content { |
| 113 | display: flex; | 129 | display: flex; |
| 114 | flex-direction: column; | 130 | flex-direction: column; |
| 115 | align-items: center; | 131 | align-items: center; |
| 116 | justify-content: center; | 132 | justify-content: center; |
| 117 | background-color: #F2F2F2; | 133 | background-color: #F2F2F2; |
| 118 | } | 134 | } |
| 119 | .userInfo{ | 135 | .userInfo{ |
| 120 | background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); | 136 | background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); |
| 121 | width: 100%; | 137 | width: 100%; |
| 122 | height: 240rpx; | 138 | height: 240rpx; |
| 123 | color: #FFFFFF; | 139 | color: #FFFFFF; |
| 124 | padding: 60rpx 82rpx 80rpx 44rpx; | 140 | padding: 60rpx 82rpx 80rpx 44rpx; |
| 125 | box-sizing: border-box; | 141 | box-sizing: border-box; |
| 126 | display: flex; | 142 | display: flex; |
| 127 | flex-direction: row; | 143 | flex-direction: row; |
| 128 | justify-content: space-between; | 144 | justify-content: space-between; |
| 129 | align-items: flex-start; | 145 | align-items: flex-start; |
| 130 | .info{ | 146 | .info{ |
| 131 | display: flex; | 147 | display: flex; |
| 132 | flex-direction: row; | 148 | flex-direction: row; |
| 133 | justify-content: space-between; | 149 | justify-content: space-between; |
| 134 | align-items: center; | 150 | align-items: center; |
| 135 | image{ | 151 | image{ |
| 136 | border-radius: 50rpx; | 152 | border-radius: 50rpx; |
| 137 | height: 100rpx ; | 153 | height: 100rpx ; |
| 138 | width: 100rpx; | 154 | width: 100rpx; |
| 139 | margin-right: 40rpx; | 155 | margin-right: 40rpx; |
| 140 | } | 156 | } |
| 141 | .infoText{ | 157 | .infoText{ |
| 142 | display: flex; | 158 | display: flex; |
| 143 | flex-direction: column; | 159 | flex-direction: column; |
| 144 | justify-content: space-between; | 160 | justify-content: space-between; |
| 145 | align-items: flex-scetart; | 161 | align-items: flex-scetart; |
| 146 | .userName{ | 162 | .userName{ |
| 147 | font-size: 18px; | 163 | font-size: 18px; |
| 148 | color: #FFFFFF; | 164 | color: #FFFFFF; |
| 149 | margin-bottom: 8rpx; | 165 | margin-bottom: 8rpx; |
| 150 | } | 166 | } |
| 151 | .nickName{ | 167 | .nickName{ |
| 152 | font-size: 12px; | 168 | font-size: 12px; |
| 153 | color: #FFFFFF; | 169 | color: #FFFFFF; |
| 154 | } | 170 | } |
| 155 | } | 171 | } |
| 156 | } | 172 | } |
| 157 | .service{ | 173 | .service{ |
| 158 | image{ | 174 | image{ |
| 159 | height: 36rpx; | 175 | height: 36rpx; |
| 160 | width: 36rpx; | 176 | width: 36rpx; |
| 161 | } | 177 | } |
| 162 | } | 178 | } |
| 163 | } | 179 | } |
| 164 | .myOrder{ | 180 | .myOrder{ |
| 165 | width: 100%; | 181 | width: 100%; |
| 166 | height: 296rpx; | 182 | height: 296rpx; |
| 167 | margin-top: 20rpx; | 183 | margin-top: 20rpx; |
| 168 | margin-bottom: 20rpx; | 184 | margin-bottom: 20rpx; |
| 169 | padding: 0 40rpx; | 185 | padding: 0 40rpx; |
| 170 | box-sizing: border-box; | 186 | box-sizing: border-box; |
| 171 | background: #FFFFFF; | 187 | background: #FFFFFF; |
| 172 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | 188 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
| 173 | border-radius: 6px; | 189 | border-radius: 6px; |
| 174 | border-radius: 6px; | 190 | border-radius: 6px; |
| 175 | display: flex; | 191 | display: flex; |
| 176 | flex-direction: column; | 192 | flex-direction: column; |
| 177 | justify-content: space-around; | 193 | justify-content: space-around; |
| 178 | align-items: center; | 194 | align-items: center; |
| 179 | .orderHeader{ | 195 | .orderHeader{ |
| 180 | width: 100%; | 196 | width: 100%; |
| 181 | height: 100rpx; | 197 | height: 100rpx; |
| 182 | display: flex; | 198 | display: flex; |
| 183 | flex-direction: row; | 199 | flex-direction: row; |
| 184 | justify-content: space-between; | 200 | justify-content: space-between; |
| 185 | align-items: center; | 201 | align-items: center; |
| 186 | border-bottom: 1px solid #E9E9E9;; | 202 | border-bottom: 1px solid #E9E9E9;; |
| 187 | font-weight: bold; | 203 | font-weight: bold; |
| 188 | font-size: 18px; | 204 | font-size: 18px; |
| 189 | color: #333333; | 205 | color: #333333; |
| 190 | .btn{ | 206 | .btn{ |
| 191 | font-size: 12px; | 207 | font-size: 12px; |
| 192 | color: #999999; | 208 | color: #999999; |
| 193 | image{ | 209 | image{ |
| 194 | margin-left: 20rpx; | 210 | margin-left: 20rpx; |
| 195 | height: 16rpx; | 211 | height: 16rpx; |
| 196 | width: 8rpx; | 212 | width: 8rpx; |
| 197 | } | 213 | } |
| 198 | } | 214 | } |
| 199 | } | 215 | } |
| 200 | .orderBody{ | 216 | .orderBody{ |
| 201 | width: 100%; | 217 | width: 100%; |
| 202 | display: flex; | 218 | display: flex; |
| 203 | flex-direction: row; | 219 | flex-direction: row; |
| 204 | justify-content: space-between; | 220 | justify-content: space-between; |
| 205 | align-items: center; | 221 | align-items: center; |
| 206 | .item{ | 222 | .item{ |
| 207 | display: flex; | 223 | display: flex; |
| 208 | flex-direction: column; | 224 | flex-direction: column; |
| 209 | align-items: center; | 225 | align-items: center; |
| 210 | image{ | 226 | image{ |
| 211 | width: 46rpx; | 227 | width: 46rpx; |
| 212 | height: 46rpx; | 228 | height: 46rpx; |
| 213 | } | 229 | } |
| 214 | text{ | 230 | text{ |
| 215 | margin-top: 24rpx; | 231 | margin-top: 24rpx; |
| 216 | font-size: 12px; | 232 | font-size: 12px; |
| 217 | color: #333333; | 233 | color: #333333; |
| 218 | } | 234 | } |
| 219 | } | 235 | } |
| 220 | } | 236 | } |
| 221 | } | 237 | } |
| 222 | .recommend{ | 238 | .recommend{ |
| 223 | background: #FFFFFF; | 239 | background: #FFFFFF; |
| 224 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | 240 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
| 225 | border-radius: 6px; | 241 | border-radius: 6px; |
| 226 | border-radius: 6px; | 242 | border-radius: 6px; |
| 227 | .title{ | 243 | .title{ |
| 228 | display: flex; | 244 | display: flex; |
| 229 | flex-direction: row; | 245 | flex-direction: row; |
| 230 | align-items: center; | 246 | align-items: center; |
| 231 | justify-content: space-between; | 247 | justify-content: space-between; |
| 232 | padding: 20rpx 40rpx; | 248 | padding: 20rpx 40rpx; |
| 233 | .line{ | 249 | .line{ |
| 234 | width: 264rpx; | 250 | width: 264rpx; |
| 235 | height: 1rpx; | 251 | height: 1rpx; |
| 236 | border-bottom: 1px solid #EAEAEA; | 252 | border-bottom: 1px solid #EAEAEA; |
| 237 | } | 253 | } |
| 238 | .text{ | 254 | .text{ |
| 239 | font-family: PingFangSC-Medium; | 255 | font-family: PingFangSC-Medium; |
| 240 | font-size: 14px; | 256 | font-size: 14px; |
| 241 | color: #333333; | 257 | color: #333333; |
| 242 | letter-spacing: -0.26px; | 258 | letter-spacing: -0.26px; |
| 243 | text-align: justify; | 259 | text-align: justify; |
| 244 | line-height: 24px; | 260 | line-height: 24px; |
| 245 | } | 261 | } |
| 246 | } | 262 | } |
| 247 | .goods-list{ | 263 | .goods-list{ |
| 248 | .loading-text{ | 264 | .loading-text{ |
| 249 | width: 100%; | 265 | width: 100%; |
| 250 | display: flex; | 266 | display: flex; |
| 251 | justify-content: center; | 267 | justify-content: center; |
| 252 | align-items: center; | 268 | align-items: center; |
| 253 | height: 30px; | 269 | height: 30px; |
| 254 | color: #979797; | 270 | color: #979797; |
| 255 | font-size: 12px; | 271 | font-size: 12px; |
| 256 | } | 272 | } |
| 257 | .product-list{ | 273 | .product-list{ |
| 258 | width: 92%; | 274 | width: 92%; |
| 259 | padding: 0 4% 3vw 4%; | 275 | padding: 0 4% 3vw 4%; |
| 260 | display: flex; | 276 | display: flex; |
| 261 | justify-content: space-between; | 277 | justify-content: space-between; |
| 262 | flex-wrap: wrap; | 278 | flex-wrap: wrap; |
| 263 | .product{ | 279 | .product{ |
| 264 | width: 48%; | 280 | width: 48%; |
| 265 | margin: 0 0 20rpx 0; | 281 | margin: 0 0 20rpx 0; |
| 266 | background: #FFFFFF; | 282 | background: #FFFFFF; |
| 267 | border: 1px solid #F2F2F2; | 283 | border: 1px solid #F2F2F2; |
| 268 | } | 284 | } |
| 269 | } | 285 | } |
| 270 | } | 286 | } |
| 271 | } | 287 | } |
| 272 | 288 | ||
| 273 | </style> | 289 | </style> |
| 274 | 290 |