Commit 0508098fe3faede3cf579398b0077a8bceb50585
1 parent
e2eaa8a22b
Exists in
master
首页筛选列表接口获取
Showing
8 changed files
with
84 additions
and
103 deletions
Show diff stats
src/components/CommodityCard/CommodityCard.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="card" @tap="toGoods(goods.id)"> | 2 | <view class="card" @tap="toGoods(goods.id)"> |
| 3 | <image mode="widthFix" :src="goods.imgurl" ></image> | 3 | <image mode="widthFix" :src="goods.imgurl" ></image> |
| 4 | <view class="name">{{goods.name}}</view> | 4 | <view class="name">{{goods.name}}</view> |
| 5 | <view class="info"> | 5 | <view class="info"> |
| 6 | <view class="priceBox"> | 6 | <view class="priceBox"> |
| 7 | <view class="price">{{goods.rsSon.Min_Price}}</view> | 7 | <view class="price">{{goods.rsSon.Min_Price}}</view> |
| 8 | <view class="originCost"> | 8 | <view class="originCost"> |
| 9 | {{Math.round(goods.rsSon.Min_Price / goods.rsSon.discount * 100)}} | 9 | {{Math.round(goods.rsSon.Min_Price / goods.rsSon.discount * 100)}} |
| 10 | <!-- {{goods.oldPrice}} --> | 10 | <!-- {{goods.oldPrice}} --> |
| 11 | </view> | 11 | </view> |
| 12 | </view> | 12 | </view> |
| 13 | <view class="slogan">{{goods.trade_num}}</view> | 13 | <view class="slogan">{{goods.trade_num}}</view> |
| 14 | </view> | 14 | </view> |
| 15 | </view> | 15 | </view> |
| 16 | </template> | 16 | </template> |
| 17 | 17 | ||
| 18 | <script> | 18 | <script> |
| 19 | export default { | 19 | export default { |
| 20 | props: { | 20 | props: { |
| 21 | /** | 21 | /** |
| 22 | * 商品数据 | 22 | * 商品数据 |
| 23 | */ | 23 | */ |
| 24 | goods: { | 24 | goods: { |
| 25 | id: Number, | 25 | id: Number, |
| 26 | imgurl: String, | 26 | imgurl: String, |
| 27 | name: String, | 27 | name: String, |
| 28 | oldPrice:String, | 28 | oldPrice:String, |
| 29 | price: String, | 29 | price: String, |
| 30 | memo:String | 30 | memo:String |
| 31 | } | 31 | } |
| 32 | 32 | ||
| 33 | }, | 33 | }, |
| 34 | created() { | 34 | created() { |
| 35 | }, | 35 | }, |
| 36 | data() { | 36 | data() { |
| 37 | return { | 37 | return { |
| 38 | 38 | ||
| 39 | }; | 39 | }; |
| 40 | }, | 40 | }, |
| 41 | methods:{ | 41 | methods:{ |
| 42 | toGoods(id){ | 42 | toGoods(id){ |
| 43 | console.log('toGoods =====> id======>', id) | 43 | console.log('toGoods =====> id======>', id) |
| 44 | uni.navigateTo({ | 44 | uni.navigateTo({ |
| 45 | url: `../detail/detail?oderId=1`, | 45 | url: `../frameDetail/frameDetail?oderId={{id}}`, |
| 46 | success: res => {}, | 46 | success: res => {}, |
| 47 | fail: () => {}, | 47 | fail: () => {}, |
| 48 | complete: () => {} | 48 | complete: () => {} |
| 49 | }); | 49 | }); |
| 50 | } | 50 | } |
| 51 | } | 51 | } |
| 52 | } | 52 | } |
| 53 | </script> | 53 | </script> |
| 54 | 54 | ||
| 55 | <style lang="scss"> | 55 | <style lang="scss"> |
| 56 | image{ | 56 | image{ |
| 57 | width: 100%; | 57 | width: 100%; |
| 58 | height: 120rpx; | 58 | height: 120rpx; |
| 59 | } | 59 | } |
| 60 | .name{ | 60 | .name{ |
| 61 | width: 92%; | 61 | width: 92%; |
| 62 | height: 54rpx; | 62 | height: 54rpx; |
| 63 | padding: 5px 4%; | 63 | padding: 5px 4%; |
| 64 | display: -webkit-box; | 64 | display: -webkit-box; |
| 65 | -webkit-box-orient: vertical; | 65 | -webkit-box-orient: vertical; |
| 66 | -webkit-line-clamp: 2; | 66 | -webkit-line-clamp: 2; |
| 67 | text-align: justify; | 67 | text-align: justify; |
| 68 | overflow: hidden; | 68 | overflow: hidden; |
| 69 | font-size: 24rpx; | 69 | font-size: 24rpx; |
| 70 | color: #333333; | 70 | color: #333333; |
| 71 | } | 71 | } |
| 72 | .info{ | 72 | .info{ |
| 73 | display: flex; | 73 | display: flex; |
| 74 | justify-content: space-between; | 74 | justify-content: space-between; |
| 75 | align-items: center; | 75 | align-items: center; |
| 76 | width: 92%; | 76 | width: 92%; |
| 77 | padding: 5px 4% 5px 4%; | 77 | padding: 5px 4% 5px 4%; |
| 78 | .priceBox{ | 78 | .priceBox{ |
| 79 | display: flex; | 79 | display: flex; |
| 80 | justify-content: space-between; | 80 | justify-content: space-between; |
| 81 | align-items: center; | 81 | align-items: center; |
| 82 | .price{ | 82 | .price{ |
| 83 | color: #EB5D3B; | 83 | color: #EB5D3B; |
| 84 | font-size: 28rpx; | 84 | font-size: 28rpx; |
| 85 | font-weight: 600; | 85 | font-weight: 600; |
| 86 | margin-right: 10rpx; | 86 | margin-right: 10rpx; |
| 87 | } | 87 | } |
| 88 | .originCost{ | 88 | .originCost{ |
| 89 | text-decoration:line-through; | 89 | text-decoration:line-through; |
| 90 | color: #999999; | 90 | color: #999999; |
| 91 | font-size: 20rpx; | 91 | font-size: 20rpx; |
| 92 | } | 92 | } |
| 93 | 93 | ||
| 94 | } | 94 | } |
| 95 | .slogan{ | 95 | .slogan{ |
| 96 | color: #999999; | 96 | color: #999999; |
| 97 | font-size: 20rpx; | 97 | font-size: 20rpx; |
| 98 | } | 98 | } |
| 99 | } | 99 | } |
| 100 | </style> | 100 | </style> |
| 101 | 101 |
src/pages.json
| 1 | { | 1 | { |
| 2 | "pages": [ | 2 | "pages": [ |
| 3 | { | 3 | { |
| 4 | "path": "pages/cart/cart", | ||
| 5 | "style": { | ||
| 6 | "navigationBarTitleText": "购物车" | ||
| 7 | } | ||
| 8 | }, | ||
| 9 | { | ||
| 10 | "path": "pages/index/index", | 4 | "path": "pages/index/index", |
| 11 | "style": { | 5 | "style": { |
| 12 | "navigationBarTitleText": "商城一览" | 6 | "navigationBarTitleText": "商城一览" |
| 13 | } | 7 | } |
| 14 | }, | 8 | }, |
| 15 | { | 9 | { |
| 16 | "path": "pages/frameDetail/frameDetail", | 10 | "path": "pages/frameDetail/frameDetail", |
| 17 | "style": { | 11 | "style": { |
| 18 | "navigationBarTitleText": "产品详情" | 12 | "navigationBarTitleText": "产品详情" |
| 19 | } | 13 | } |
| 20 | }, | 14 | }, |
| 21 | { | 15 | { |
| 22 | "path": "pages/lensDetails/lensDetails", | 16 | "path": "pages/lensDetails/lensDetails", |
| 23 | "style": { | 17 | "style": { |
| 24 | "navigationBarTitleText": "产品详情" | 18 | "navigationBarTitleText": "产品详情" |
| 25 | } | 19 | } |
| 26 | }, | 20 | }, |
| 21 | { | ||
| 22 | "path": "pages/cart/cart", | ||
| 23 | "style": { | ||
| 24 | "navigationBarTitleText": "购物车" | ||
| 25 | } | ||
| 26 | }, | ||
| 27 | { | 27 | { |
| 28 | "path" : "pages/purchaseLenses/purchaseLenses", | 28 | "path" : "pages/purchaseLenses/purchaseLenses", |
| 29 | "style" : { | 29 | "style" : { |
| 30 | "navigationBarTitleText": "产品选购" | 30 | "navigationBarTitleText": "产品选购" |
| 31 | } | 31 | } |
| 32 | }, | 32 | }, |
| 33 | { | 33 | { |
| 34 | "path" : "pages/refundProgress/refundProgress", | 34 | "path" : "pages/refundProgress/refundProgress", |
| 35 | "style": { | 35 | "style": { |
| 36 | "navigationBarTitleText": "申请退款" | 36 | "navigationBarTitleText": "申请退款" |
| 37 | } | 37 | } |
| 38 | }, | 38 | }, |
| 39 | { | 39 | { |
| 40 | "path" : "pages/myOrder/myOrder", | 40 | "path" : "pages/myOrder/myOrder", |
| 41 | "style" : { | 41 | "style" : { |
| 42 | "navigationBarTitleText": "我的订单"} | 42 | "navigationBarTitleText": "我的订单"} |
| 43 | }, | 43 | }, |
| 44 | { | 44 | { |
| 45 | "path": "pages/addAddress/addAddress", | 45 | "path": "pages/addAddress/addAddress", |
| 46 | "style": { | 46 | "style": { |
| 47 | "navigationBarTitleText": "新增地址" | 47 | "navigationBarTitleText": "新增地址" |
| 48 | } | 48 | } |
| 49 | }, | 49 | }, |
| 50 | { | 50 | { |
| 51 | "path" : "pages/confirmOrder/confirmOrder", | 51 | "path" : "pages/confirmOrder/confirmOrder", |
| 52 | "style" : { | 52 | "style" : { |
| 53 | "navigationBarTitleText": "确认订单"} | 53 | "navigationBarTitleText": "确认订单"} |
| 54 | }, | 54 | }, |
| 55 | { | 55 | { |
| 56 | "path": "pages/user/user", | 56 | "path": "pages/user/user", |
| 57 | "style": { | 57 | "style": { |
| 58 | "navigationBarTitleText": "我的" | 58 | "navigationBarTitleText": "我的" |
| 59 | } | 59 | } |
| 60 | }, | 60 | }, |
| 61 | { | 61 | { |
| 62 | "path": "pages/refundment/refundWays" | 62 | "path": "pages/refundment/refundWays" |
| 63 | }, | 63 | }, |
| 64 | { | 64 | { |
| 65 | "path": "pages/refundment/refundment" | 65 | "path": "pages/refundment/refundment" |
| 66 | }, | 66 | }, |
| 67 | { | 67 | { |
| 68 | "path": "pages/predelivery/predelivery" | 68 | "path": "pages/predelivery/predelivery" |
| 69 | }, | 69 | }, |
| 70 | { | 70 | { |
| 71 | "path": "pages/customerService/customerService" | 71 | "path": "pages/customerService/customerService" |
| 72 | }, | 72 | }, |
| 73 | { | 73 | { |
| 74 | "path": "pages/myOrderPaying/myOrderPaying" | 74 | "path": "pages/myOrderPaying/myOrderPaying", |
| 75 | "style": { | ||
| 76 | "navigationBarTitleText": "待付款" | ||
| 77 | } | ||
| 75 | } | 78 | } |
| 76 | 79 | ||
| 77 | ], | 80 | ], |
| 78 | "globalStyle": { | 81 | "globalStyle": { |
| 79 | "navigationBarTextStyle": "black", | 82 | "navigationBarTextStyle": "black", |
| 80 | "navigationBarTitleText": "uni-app", | 83 | "navigationBarTitleText": "uni-app", |
| 81 | "navigationBarBackgroundColor": "#F8F8F8", | 84 | "navigationBarBackgroundColor": "#F8F8F8", |
| 82 | "backgroundColor": "#F8F8F8" | 85 | "backgroundColor": "#F8F8F8" |
| 83 | }, | 86 | }, |
| 84 | "tabBar": { | 87 | "tabBar": { |
| 85 | "color": "#C0C4CC", | 88 | "color": "#C0C4CC", |
| 86 | "selectedColor": "#fa436a", | 89 | "selectedColor": "#fa436a", |
| 87 | "borderStyle": "black", | 90 | "borderStyle": "black", |
| 88 | "backgroundColor": "#ffffff", | 91 | "backgroundColor": "#ffffff", |
| 89 | "list": [{ | 92 | "list": [{ |
| 90 | "pagePath": "pages/index/index", | 93 | "pagePath": "pages/index/index", |
| 91 | "iconPath": "static/tab-home.png", | 94 | "iconPath": "static/tab-home.png", |
| 92 | "selectedIconPath": "static/tab-home-current.png", | 95 | "selectedIconPath": "static/tab-home-current.png", |
| 93 | "text": "首页" | 96 | "text": "首页" |
| 94 | }, | 97 | }, |
| 95 | { | 98 | { |
| 96 | "pagePath": "pages/cart/cart", | 99 | "pagePath": "pages/cart/cart", |
| 97 | "iconPath": "static/tab-cart.png", | 100 | "iconPath": "static/tab-cart.png", |
| 98 | "selectedIconPath": "static/tab-cart-current.png", | 101 | "selectedIconPath": "static/tab-cart-current.png", |
| 99 | "text": "购物车" | 102 | "text": "购物车" |
| 100 | }, | 103 | }, |
| 101 | { | 104 | { |
| 102 | "pagePath": "pages/user/user", | 105 | "pagePath": "pages/user/user", |
| 103 | "iconPath": "static/tab-my.png", | 106 | "iconPath": "static/tab-my.png", |
| 104 | "selectedIconPath": "static/tab-my-current.png", | 107 | "selectedIconPath": "static/tab-my-current.png", |
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 | 13 | <view |
| 14 | class="screenItem" | 14 | class="screenItem" |
| 15 | v-bind:class="{ active: current === item.current }" | 15 | v-bind:class="{ active: current === item.current }" |
| 16 | v-if="item.current === 2" | 16 | v-if="item.current === 2" |
| 17 | @click="dropDown" | 17 | @click="dropDown" |
| 18 | > | 18 | > |
| 19 | {{ item.text }} | 19 | {{ item.text }} |
| 20 | <icon type="info" size="14"></icon> | 20 | <icon type="info" size="14"></icon> |
| 21 | </view> | 21 | </view> |
| 22 | <view | 22 | <view |
| 23 | class="screenItem" | 23 | class="screenItem" |
| 24 | v-bind:class="{ active: current === item.current }" | 24 | v-bind:class="{ active: current === item.current }" |
| 25 | v-if="item.current === 4" | 25 | v-if="item.current === 4" |
| 26 | @click="showDrawer('showRight')" | 26 | @click="showDrawer('showRight')" |
| 27 | > | 27 | > |
| 28 | {{ item.text }} | 28 | {{ item.text }} |
| 29 | <icon type="info" size="14"></icon> | 29 | <icon type="info" size="14"></icon> |
| 30 | </view> | 30 | </view> |
| 31 | <view v-if="item.current !== 2&&item.current!==4"> | 31 | <view v-if="item.current !== 2&&item.current!==4"> |
| 32 | <view | 32 | <view |
| 33 | class="screenItem" | 33 | class="screenItem" |
| 34 | v-bind:class="{ active: current === item.current }" | 34 | v-bind:class="{ active: current === item.current }" |
| 35 | >{{ item.text }}</view> | 35 | >{{ item.text }}</view> |
| 36 | </view> | 36 | </view> |
| 37 | </view> | 37 | </view> |
| 38 | </view> | 38 | </view> |
| 39 | </view> | 39 | </view> |
| 40 | <Uni-drawer | 40 | <Uni-drawer |
| 41 | ref="showRight" | 41 | ref="showRight" |
| 42 | mask="true" | 42 | mask="true" |
| 43 | maskClick="true" | 43 | maskClick="true" |
| 44 | mode="right" | 44 | mode="right" |
| 45 | :width="320" | 45 | :width="320" |
| 46 | @change="change($event,'showRight')" | 46 | @change="change($event,'showRight')" |
| 47 | > | 47 | > |
| 48 | <view class="close"> | 48 | <view class="close"> |
| 49 | <view @click="closeDrawer('showRight')"> | 49 | <view @click="closeDrawer('showRight')"> |
| 50 | <text class="word-btn-white">关闭</text> | 50 | <text class="word-btn-white">关闭</text> |
| 51 | </view> | 51 | </view> |
| 52 | </view> | 52 | </view> |
| 53 | </Uni-drawer> | 53 | </Uni-drawer> |
| 54 | 54 | ||
| 55 | <!-- 筛选菜单--> | 55 | <!-- 筛选菜单--> |
| 56 | <view class="content-wrap"> | 56 | <view class="content-wrap"> |
| 57 | <view> | 57 | <view> |
| 58 | <HMfilterDropdown | 58 | <HMfilterDropdown |
| 59 | :filterData="filterData" | 59 | :filterData="filterData" |
| 60 | :defaultSelected="filterDropdownValue" | 60 | :defaultSelected="filterDropdownValue" |
| 61 | :updateMenuName="true" | 61 | :updateMenuName="true" |
| 62 | @confirm="confirm" | 62 | @confirm="confirm" |
| 63 | data-format="Object" | 63 | data-format="Object" |
| 64 | ></HMfilterDropdown> | 64 | ></HMfilterDropdown> |
| 65 | <!-- 商品列表 --> | 65 | <!-- 商品列表 --> |
| 66 | <view class="goods-list"> | 66 | <view class="goods-list"> |
| 67 | <view class="product-list"> | 67 | <view class="product-list"> |
| 68 | <view class="product" v-for="(goods) in goodsList" :key="goods.id"> | 68 | <view class="product" v-for="(goods) in goodsList" :key="goods.id"> |
| 69 | <Card :goods="goods"></Card> | 69 | <Card :goods="goods"></Card> |
| 70 | </view> | 70 | </view> |
| 71 | </view> | 71 | </view> |
| 72 | <view class="loading-text">{{loadingText}}</view> | 72 | <view class="loading-text">{{loadingText}}</view> |
| 73 | </view> | 73 | </view> |
| 74 | </view> | 74 | </view> |
| 75 | </view> | 75 | </view> |
| 76 | </view> | 76 | </view> |
| 77 | </template> | 77 | </template> |
| 78 | 78 | ||
| 79 | <script> | 79 | <script> |
| 80 | import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; | 80 | import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; |
| 81 | import Card from "@/components/CommodityCard/CommodityCard.vue"; | 81 | import Card from "@/components/CommodityCard/CommodityCard.vue"; |
| 82 | import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; | 82 | import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; |
| 83 | import data from "@/common/data.js"; //筛选菜单数据 | 83 | import data from "@/common/data.js"; //筛选菜单数据 |
| 84 | import store from '@/store'; | 84 | import store from '@/store'; |
| 85 | 85 | ||
| 86 | export default { | 86 | export default { |
| 87 | components: { | 87 | components: { |
| 88 | UniDrawer: UniDrawer, | 88 | UniDrawer: UniDrawer, |
| 89 | HMfilterDropdown: HMfilterDropdown, | 89 | HMfilterDropdown: HMfilterDropdown, |
| 90 | Card: Card | 90 | Card: Card |
| 91 | }, | 91 | }, |
| 92 | data() { | 92 | data() { |
| 93 | return { | 93 | return { |
| 94 | screenItems: [ | 94 | screenItems: [ |
| 95 | { current: 0, text: "全部", hasIcon: false }, | 95 | { current: 0, text: "全部", hasIcon: false }, |
| 96 | { current: 1, text: "销量", hasIcon: false }, | 96 | { current: 1, text: "销量", hasIcon: false }, |
| 97 | { current: 2, text: "价格", hasIcon: true }, | 97 | { current: 2, text: "价格", hasIcon: true }, |
| 98 | { current: 3, text: "折扣", hasIcon: false }, | 98 | { current: 3, text: "折扣", hasIcon: false }, |
| 99 | { current: 4, text: "筛选", hasIcon: true } | 99 | { current: 4, text: "筛选", hasIcon: true } |
| 100 | ], | 100 | ], |
| 101 | current: 0, | 101 | current: 0, |
| 102 | showRight: false, | 102 | showRight: false, |
| 103 | indexArr: "", | 103 | indexArr: "", |
| 104 | valueArr: "", | 104 | valueArr: "", |
| 105 | // //商品数据 | 105 | loadingText: "~~到底了~~", |
| 106 | // goodsList: [ | ||
| 107 | // { | ||
| 108 | // // goods_id: 0, | ||
| 109 | // // img: "/static/img/goods/p1.jpg", | ||
| 110 | // // name: "商品名称", | ||
| 111 | // // originCost: "￥198", | ||
| 112 | // // price: "￥168", | ||
| 113 | // // slogan: "1235人浏览" | ||
| 114 | // } | ||
| 115 | // ], | ||
| 116 | loadingText: "正在加载...", | ||
| 117 | filterDropdownValue: [], | 106 | filterDropdownValue: [], |
| 118 | filterData: [] | 107 | filterData: [] |
| 119 | }; | 108 | }; |
| 120 | }, | 109 | }, |
| 121 | computed: { | 110 | computed: { |
| 122 | goodsList() { | 111 | goodsList() { |
| 123 | // 也可以从 getters 获取 | 112 | // 也可以从 getters 获取 |
| 124 | console.log(this.$store.getters.list); | 113 | console.log(this.$store.getters.list); |
| 125 | return this.$store.state.test.list; | 114 | return this.$store.state.test.list; |
| 126 | } | 115 | }, |
| 116 | categoryList(){ | ||
| 117 | console.log(JSON.stringify(this.$store.state.categoryOrder.categoryList)); | ||
| 118 | } | ||
| 119 | |||
| 127 | }, | 120 | }, |
| 128 | filters: { | 121 | filters: { |
| 129 | outData(value) { | 122 | outData(value) { |
| 130 | return JSON.stringify(value); | 123 | return JSON.stringify(value); |
| 131 | } | 124 | } |
| 132 | }, | 125 | }, |
| 133 | onLoad: function() { | 126 | onLoad: function() { |
| 134 | store.dispatch('test/fetch'); | 127 | store.dispatch('test/fetch'); |
| 135 | // uni.request({ | 128 | store.dispatch('categoryOrder/fetch') |
| 136 | // url: "https://api.glass.xiuyetang.com/app/prod/list", | 129 | |
| 137 | // method: "post", | ||
| 138 | // data: { | ||
| 139 | // // text: 'uni.request' | ||
| 140 | // }, | ||
| 141 | // header: { | ||
| 142 | // // 'custom-header': 'hello', //自定义请求头信息 | ||
| 143 | // "Content-Type": "application/x-www-form-urlencoded" | ||
| 144 | // // 'Content-Type':'multipart/form-data' | ||
| 145 | // // 'Content-Type':'ext/plain' | ||
| 146 | // }, | ||
| 147 | // timeout: 3000, | ||
| 148 | // // dataType:'json' | ||
| 149 | // // responseType:'text', | ||
| 150 | // // sslVerify: true, //验证 ssl 证书 | ||
| 151 | // withCredentials: false, //跨域请求时是否携带凭证（cookies） | ||
| 152 | // success: res => { | ||
| 153 | // console.error("success status === > ", res); | ||
| 154 | // this.goodsList = res.data.data; | ||
| 155 | // // console.log('res.data', res.data); | ||
| 156 | // // this.text = 'request success'; | ||
| 157 | // }, | ||
| 158 | // fail: res => { | ||
| 159 | // console.log("fail status === > ", res); | ||
| 160 | // }, | ||
| 161 | // complete: res => { | ||
| 162 | // console.log("complete status === > ", res); | ||
| 163 | // } | ||
| 164 | // }); | ||
| 165 | //定时器模拟ajax异步请求数据 | 130 | //定时器模拟ajax异步请求数据 |
| 166 | // setTimeout(()=>{ | 131 | setTimeout(()=>{ |
| 167 | // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null | 132 | //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null |
| 168 | // this.filterDropdownValue = [ | 133 | // this.filterDropdownValue = [ |
| 169 | // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 | 134 | // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 |
| 170 | // [null,null], //第1个菜单选中 都不选中 | 135 | // [null,null], //第1个菜单选中 都不选中 |
| 171 | // [1], //第2个菜单选中 一级菜单的第1项 | 136 | // [1], //第2个菜单选中 一级菜单的第1项 |
| 172 | // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 | 137 | // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 |
| 173 | // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 | 138 | // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 |
| 174 | // ]; | 139 | // ]; |
| 175 | // this.filterData = data; | 140 | this.filterData = data; |
| 176 | // },100); | 141 | },100); |
| 177 | // 模拟ajax请求子菜单数据。 | ||
| 178 | // setTimeout(()=>{ | ||
| 179 | // console.log('发起请求','ddddddd'); | ||
| 180 | // // 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"}]; | ||
| 181 | // },3000); | ||
| 182 | }, | 142 | }, |
| 183 | methods: { | 143 | methods: { |
| 184 | showDrawer(e) { | 144 | showDrawer(e) { |
| 185 | this.$refs[e].open(); | 145 | this.$refs[e].open(); |
| 186 | }, | 146 | }, |
| 187 | closeDrawer(e) { | 147 | closeDrawer(e) { |
| 188 | this.$refs[e].close(); | 148 | this.$refs[e].close(); |
| 189 | }, | 149 | }, |
| 190 | change(e, type) { | 150 | change(e, type) { |
| 191 | this[type] = e; | 151 | this[type] = e; |
| 192 | }, | 152 | }, |
| 193 | onClickItem(e) { | 153 | onClickItem(e) { |
| 194 | if (this.current !== e) { | 154 | if (this.current !== e) { |
| 195 | this.current = e; | 155 | this.current = e; |
| 196 | } | 156 | } |
| 197 | }, | 157 | }, |
| 198 | dropDown() { | 158 | dropDown() { |
| 199 | console.log("下拉"); | 159 | console.log("下拉"); |
| 200 | }, | 160 | }, |
| 201 | //接收菜单结果 | 161 | //接收菜单结果 |
| 202 | confirm(e) { | 162 | confirm(e) { |
| 203 | this.indexArr = e.index; | 163 | this.indexArr = e.index; |
| 204 | this.valueArr = e.value; | 164 | this.valueArr = e.value; |
| 205 | return; | 165 | return; |
| 206 | console.log("修改菜单"); | 166 | console.log("修改菜单"); |
| 207 | this.filterData[4].submenu[1] = { | 167 | this.filterData[4].submenu[1] = { |
| 208 | name: "项目2", | 168 | name: "项目2", |
| 209 | submenu: [] | 169 | submenu: [] |
| 210 | }; | 170 | }; |
| 211 | } | 171 | } |
| 212 | }, | 172 | }, |
| 213 | onNavigationBarButtonTap(e) { | 173 | |
| 214 | this.showRight = !this.showRight; | ||
| 215 | }, | ||
| 216 | //上拉加载， | ||
| 217 | onReachBottom() { | ||
| 218 | console.log("到底加载"); | ||
| 219 | let len = this.goodsList.length; | ||
| 220 | if (len >= 30) { | ||
| 221 | this.loadingText = "~~到底了~~"; | ||
| 222 | return false; | ||
| 223 | } else { | ||
| 224 | this.loadingText = "正在加载..."; | ||
| 225 | } | ||
| 226 | let end_goods_id = this.goodsList[len - 1].goods_id; | ||
| 227 | for (let i = 1; i <= 10; i++) { | ||
| 228 | let goods_id = end_goods_id + i; | ||
| 229 | let p = { | ||
| 230 | goods_id: goods_id, | ||
| 231 | img: | ||
| 232 | "/static/img/goods/p" + | ||
| 233 | (goods_id % 10 == 0 ? 10 : goods_id % 10) + | ||
| 234 | ".jpg", | ||
| 235 | name: "商品名称", | ||
| 236 | originCost: "￥198", | ||
| 237 | price: "￥168", | ||
| 238 | slogan: "1235人付款" | ||
| 239 | }; | ||
| 240 | this.goodsList.push(p); | ||
| 241 | } | ||
| 242 | } | ||
| 243 | }; | 174 | }; |
| 244 | </script> | 175 | </script> |
| 245 | 176 | ||
| 246 | <style lang="scss"> | 177 | <style lang="scss"> |
| 247 | .content { | 178 | .content { |
| 248 | display: flex; | 179 | display: flex; |
| 249 | flex-direction: column; | 180 | flex-direction: column; |
| 250 | align-items: center; | 181 | align-items: center; |
| 251 | justify-content: center; | 182 | justify-content: center; |
| 252 | background-color: #f7f6f6; | 183 | background-color: #f7f6f6; |
| 253 | } | 184 | } |
| 254 | .header { | 185 | .header { |
| 255 | display: flex; | 186 | display: flex; |
| 256 | flex-direction: column; | 187 | flex-direction: column; |
| 257 | align-items: center; | 188 | align-items: center; |
| 258 | justify-content: center; | 189 | justify-content: center; |
| 259 | background-color: #f7f6f6; | 190 | background-color: #f7f6f6; |
| 260 | height: 178rpx; | 191 | height: 178rpx; |
| 261 | width: 100%; | 192 | width: 100%; |
| 262 | z-index: 999; | 193 | z-index: 999; |
| 263 | position: fixed; | 194 | position: fixed; |
| 264 | top: 0; | 195 | top: 0; |
| 265 | left: 0; | 196 | left: 0; |
| 266 | } | 197 | } |
| 267 | .searchBar { | 198 | .searchBar { |
| 268 | width: 670rpx; | 199 | width: 670rpx; |
| 269 | display: flex; | 200 | display: flex; |
| 270 | justify-content: center; | 201 | justify-content: center; |
| 271 | align-items: center; | 202 | align-items: center; |
| 272 | box-sizing: border-box; | 203 | box-sizing: border-box; |
| 273 | padding: 0rpx 16rpx; | 204 | padding: 0rpx 16rpx; |
| 274 | border: 1px solid #ff6b4a; | 205 | border: 1px solid #ff6b4a; |
| 275 | border-radius: 8rpx; | 206 | border-radius: 8rpx; |
| 276 | background-color: #ffffff; | 207 | background-color: #ffffff; |
| 277 | } | 208 | } |
| 278 | 209 | ||
| 279 | .searchIpt { | 210 | .searchIpt { |
| 280 | height: 68rpx; | 211 | height: 68rpx; |
| 281 | width: 670rpx; | 212 | width: 670rpx; |
| 282 | padding: 16rpx; | 213 | padding: 16rpx; |
| 283 | font-size: 28rpx; | 214 | font-size: 28rpx; |
| 284 | box-sizing: border-box; | 215 | box-sizing: border-box; |
| 285 | } | 216 | } |
| 286 | .screenBar { | 217 | .screenBar { |
| 287 | width: 670rpx; | 218 | width: 670rpx; |
| 288 | height: 110rpx; | 219 | height: 110rpx; |
| 289 | display: flex; | 220 | display: flex; |
| 290 | flex-direction: row; | 221 | flex-direction: row; |
| 291 | justify-content: space-between; | 222 | justify-content: space-between; |
| 292 | align-items: center; | 223 | align-items: center; |
| 293 | color: #333333; | 224 | color: #333333; |
| 294 | font-size: 32rpx; | 225 | font-size: 32rpx; |
| 295 | } | 226 | } |
| 296 | .active { | 227 | .active { |
| 297 | color: #ff6b4a; | 228 | color: #ff6b4a; |
| 298 | } | 229 | } |
| 299 | .screenItem { | 230 | .screenItem { |
| 300 | display: flex; | 231 | display: flex; |
| 301 | justify-content: center; | 232 | justify-content: center; |
| 302 | align-items: center; | 233 | align-items: center; |
| 303 | } | 234 | } |
| 304 | .content-wrap { | 235 | .content-wrap { |
| 305 | width: 100%; | 236 | width: 100%; |
| 306 | background-color: #ffffff; | 237 | background-color: #ffffff; |
| 307 | } | 238 | } |
| 308 | 239 | ||
| 309 | .HMfilterDropdown { | 240 | .HMfilterDropdown { |
| 310 | top: 178rpx !important; | 241 | top: 178rpx !important; |
| 311 | } | 242 | } |
| 312 | 243 | ||
| 313 | .goods-list { | 244 | .goods-list { |
| 314 | padding-top: 286rpx; | 245 | padding-top: 286rpx; |
| 315 | .loading-text { | 246 | .loading-text { |
| 316 | width: 100%; | 247 | width: 100%; |
| 317 | display: flex; | 248 | display: flex; |
| 318 | justify-content: center; | 249 | justify-content: center; |
| 319 | align-items: center; | 250 | align-items: center; |
| 320 | height: 30px; | 251 | height: 30px; |
| 321 | color: #979797; | 252 | color: #979797; |
| 322 | font-size: 12px; | 253 | font-size: 12px; |
| 323 | } | 254 | } |
| 324 | .product-list { | 255 | .product-list { |
| 325 | width: 92%; | 256 | width: 92%; |
| 326 | padding: 0 4% 3vw 4%; | 257 | padding: 0 4% 3vw 4%; |
| 327 | display: flex; | 258 | display: flex; |
| 328 | justify-content: space-between; | 259 | justify-content: space-between; |
| 329 | flex-wrap: wrap; | 260 | flex-wrap: wrap; |
| 330 | .product { | 261 | .product { |
| 331 | width: 48%; | 262 | width: 48%; |
| 332 | margin: 0 0 20rpx 0; | 263 | margin: 0 0 20rpx 0; |
| 333 | background: #ffffff; | 264 | background: #ffffff; |
| 334 | border: 1px solid #f2f2f2; | 265 | border: 1px solid #f2f2f2; |
| 335 | } | 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 './components/OrderCard.vue' | 24 | import OrderCard from './components/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 | onLoad:function(option){ | ||
| 55 | // console.log(option.current) | ||
| 56 | this.current = option.current | ||
| 57 | }, | ||
| 54 | methods:{ | 58 | methods:{ |
| 55 | onClickItem(e) { | 59 | onClickItem(e) { |
| 56 | if (this.current !== e) { | 60 | if (this.current !== e) { |
| 57 | this.current = e; | 61 | this.current = e; |
| 58 | } | 62 | } |
| 59 | } | 63 | } |
| 60 | } | 64 | } |
| 61 | } | 65 | } |
| 62 | </script> | 66 | </script> |
| 63 | 67 | ||
| 64 | <style lang="scss"> | 68 | <style lang="scss"> |
| 65 | .content { | 69 | .content { |
| 66 | display: flex; | 70 | display: flex; |
| 67 | flex-direction: column; | 71 | flex-direction: column; |
| 68 | align-items: center; | 72 | align-items: center; |
| 69 | background-color: #F7F6F6; | 73 | background-color: #F7F6F6; |
| 70 | min-height: 100vh; | 74 | min-height: 100vh; |
| 71 | .header{ | 75 | .header{ |
| 72 | background-color: #ffffff; | 76 | background-color: #ffffff; |
| 73 | width: 100%; | 77 | width: 100%; |
| 74 | height: 232rpx; | 78 | height: 232rpx; |
| 75 | padding: 40rpx 40rpx 36rpx 40rpx; | 79 | padding: 40rpx 40rpx 36rpx 40rpx; |
| 76 | box-sizing: border-box; | 80 | box-sizing: border-box; |
| 77 | position: fixed; | 81 | position: fixed; |
| 78 | top: 0; | 82 | top: 0; |
| 79 | left: 0; | 83 | left: 0; |
| 80 | .searchBar { | 84 | .searchBar { |
| 81 | width: 670rpx; | 85 | width: 670rpx; |
| 82 | display: flex; | 86 | display: flex; |
| 83 | justify-content: center; | 87 | justify-content: center; |
| 84 | align-items: center; | 88 | align-items: center; |
| 85 | box-sizing: border-box; | 89 | box-sizing: border-box; |
| 86 | padding: 0rpx 16rpx; | 90 | padding: 0rpx 16rpx; |
| 87 | border: 1px solid #FF6B4A; | 91 | border: 1px solid #FF6B4A; |
| 88 | border-radius: 8rpx; | 92 | border-radius: 8rpx; |
| 89 | background-color: #ffffff; | 93 | background-color: #ffffff; |
| 90 | } | 94 | } |
| 91 | 95 | ||
| 92 | .screenBar{ | 96 | .screenBar{ |
| 93 | width: 670rpx; | 97 | width: 670rpx; |
| 94 | height: 110rpx; | 98 | height: 110rpx; |
| 95 | display: flex; | 99 | display: flex; |
| 96 | flex-direction: row; | 100 | flex-direction: row; |
| 97 | justify-content: space-between; | 101 | justify-content: space-between; |
| 98 | align-items: center; | 102 | align-items: center; |
| 99 | color: #333333; | 103 | color: #333333; |
| 100 | font-size: 32rpx; | 104 | font-size: 32rpx; |
| 101 | } | 105 | } |
| 102 | .screenItem{ | 106 | .screenItem{ |
| 103 | height: 50rpx; | 107 | height: 50rpx; |
| 104 | font-size: 32rpx; | 108 | font-size: 32rpx; |
| 105 | color: #333333; | 109 | color: #333333; |
| 106 | display: flex; | 110 | display: flex; |
| 107 | justify-content: center; | 111 | justify-content: center; |
| 108 | align-items: center; | 112 | align-items: center; |
| 109 | transition:all 0.2s; | 113 | transition:all 0.2s; |
| 110 | } | 114 | } |
| 111 | .active{ | 115 | .active{ |
| 112 | // font-size: 34rpx; | 116 | // font-size: 34rpx; |
| 113 | color: #EC5D3B; | 117 | color: #EC5D3B; |
| 114 | } | 118 | } |
| 115 | .searchIpt { | 119 | .searchIpt { |
| 116 | height: 68rpx; | 120 | height: 68rpx; |
| 117 | width: 670rpx; | 121 | width: 670rpx; |
| 118 | padding: 16rpx; | 122 | padding: 16rpx; |
| 119 | font-size: 28rpx; | 123 | font-size: 28rpx; |
| 120 | box-sizing: border-box; | 124 | box-sizing: border-box; |
| 121 | } | 125 | } |
| 122 | } | 126 | } |
| 123 | .orderList{ | 127 | .orderList{ |
| 124 | margin-top: 232rpx; | 128 | margin-top: 232rpx; |
| 125 | } | 129 | } |
| 126 | .footer{ | 130 | .footer{ |
| 127 | font-size: 14px; | 131 | font-size: 14px; |
| 128 | color: #B8B8B8; | 132 | color: #B8B8B8; |
| 129 | margin: 40rpx 0; | 133 | margin: 40rpx 0; |
| 130 | } | 134 | } |
| 131 | } | 135 | } |
| 132 | </style> | 136 | </style> |
| 133 | 137 |
src/pages/myOrderPaying/myOrderPaying.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <view class="header"> | 3 | <!-- <view class="header"> |
| 4 | <view class="header-name"> | 4 | <view class="header-name"> |
| 5 | <navigator open-type="navigateBack" hover-class="navigator-hover"> | 5 | <navigator open-type="navigateBack" hover-class="navigator-hover"> |
| 6 | <image src="/static/back.png"></image> | 6 | <image src="/static/back.png"></image> |
| 7 | </navigator> | 7 | </navigator> |
| 8 | <text>我的订单</text> | 8 | <text>我的订单</text> |
| 9 | </view> | 9 | </view> |
| 10 | </view> | 10 | </view> --> |
| 11 | <scroll-view scroll-y class="scroll-view" :style="{ height: scrollHeight?1000:800 + 'px' }"> | 11 | <scroll-view scroll-y class="scroll-view" :style="{ height: scrollHeight?1000:800 + 'px' }"> |
| 12 | <view class="order-hr"></view> | 12 | <view class="order-hr"></view> |
| 13 | <view class="order-time"> | 13 | <view class="order-time"> |
| 14 | <text>请在</text> | 14 | <text>请在</text> |
| 15 | <text class="p2">00:59:58 </text> | 15 | <text class="p2">00:59:58 </text> |
| 16 | <text>内完成付款</text> | 16 | <text>内完成付款</text> |
| 17 | </view> | 17 | </view> |
| 18 | <view class="order-user"> | 18 | <view class="order-user"> |
| 19 | <view class="order-user-head"> | 19 | <view class="order-user-head"> |
| 20 | <text class="p1">钱大大</text> | 20 | <text class="p1">钱大大</text> |
| 21 | <text class="p2">18823749843</text> | 21 | <text class="p2">18823749843</text> |
| 22 | </view> | 22 | </view> |
| 23 | <view class="order-user-body"> | 23 | <view class="order-user-body"> |
| 24 | <image src="../../static/myorder-paying-location.png"></image> | 24 | <image src="../../static/myorder-paying-location.png"></image> |
| 25 | <text class="p3">四川省 德阳市 旌阳区</br>黄河西路碧桂园3期 4单元 202</text> | 25 | <text class="p3">四川省 德阳市 旌阳区</br>黄河西路碧桂园3期 4单元 202</text> |
| 26 | </view> | 26 | </view> |
| 27 | </view> | 27 | </view> |
| 28 | <view class="order-info"> | 28 | <view class="order-info"> |
| 29 | <view class="order-info-head"> | 29 | <view class="order-info-head"> |
| 30 | <image src="../../static/myorder-paying-pic.png"></image> | 30 | <image src="../../static/myorder-paying-pic.png"></image> |
| 31 | <view class="order-info-head-r"> | 31 | <view class="order-info-head-r"> |
| 32 | <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> | 32 | <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> |
| 33 | <text class="p2">规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻</text> | 33 | <text class="p2">规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻</text> |
| 34 | <text class="p3">￥180</text> | 34 | <text class="p3">￥180</text> |
| 35 | </view> | 35 | </view> |
| 36 | </view> | 36 | </view> |
| 37 | <view class="order-info-goodsnum"> | 37 | <view class="order-info-goodsnum"> |
| 38 | <text>X1</text> | 38 | <text>X1</text> |
| 39 | </view> | 39 | </view> |
| 40 | <text class="order-info-freight"> | 40 | <text class="order-info-freight"> |
| 41 | <text class="p1">运费</text> | 41 | <text class="p1">运费</text> |
| 42 | <text class="p2">0.00</text> | 42 | <text class="p2">0.00</text> |
| 43 | </text> | 43 | </text> |
| 44 | <text class="order-info-discount"> | 44 | <text class="order-info-discount"> |
| 45 | <text class="p1">优惠</text> | 45 | <text class="p1">优惠</text> |
| 46 | <text class="p2">-￥70.00</text> | 46 | <text class="p2">-￥70.00</text> |
| 47 | </text> | 47 | </text> |
| 48 | <text class="order-info-price"> | 48 | <text class="order-info-price"> |
| 49 | <text class="p1">实付</text> | 49 | <text class="p1">实付</text> |
| 50 | <text class="p2">￥110</text> | 50 | <text class="p2">￥110</text> |
| 51 | </text> | 51 | </text> |
| 52 | <text class="order-info-num"> | 52 | <text class="order-info-num"> |
| 53 | <text>订单号：203486795859605849</text> | 53 | <text>订单号：203486795859605849</text> |
| 54 | </text> | 54 | </text> |
| 55 | <text class="order-info-time"> | 55 | <text class="order-info-time"> |
| 56 | <text>下单时间：2020-10-22 14:32:42</text> | 56 | <text>下单时间：2020-10-22 14:32:42</text> |
| 57 | </text> | 57 | </text> |
| 58 | <view class="order-info-hr"></view> | 58 | <view class="order-info-hr"></view> |
| 59 | <view class="order-info-contact"> | 59 | <view class="order-info-contact"> |
| 60 | <image src="../../static/myorder-paying-contact.png"></image> | 60 | <image src="../../static/myorder-paying-contact.png"></image> |
| 61 | <text>联系客服</text> | 61 | <text>联系客服</text> |
| 62 | </view> | 62 | </view> |
| 63 | </view> | 63 | </view> |
| 64 | </scroll-view> | 64 | </scroll-view> |
| 65 | <view class="order-confim"> | 65 | <view class="order-confim"> |
| 66 | <button class="b1">取消订单</button> | 66 | <button class="b1">取消订单</button> |
| 67 | <button class="b2">立即支付</button> | 67 | <button class="b2">立即支付</button> |
| 68 | </view> | 68 | </view> |
| 69 | </view> | 69 | </view> |
| 70 | </template> | 70 | </template> |
| 71 | 71 | ||
| 72 | <script> | 72 | <script> |
| 73 | export default { | 73 | export default { |
| 74 | data() { | 74 | data() { |
| 75 | return { | 75 | return { |
| 76 | scrollHeight: false, | 76 | scrollHeight: false, |
| 77 | } | 77 | } |
| 78 | }, | 78 | }, |
| 79 | methods: { | 79 | methods: { |
| 80 | 80 | ||
| 81 | } | 81 | } |
| 82 | } | 82 | } |
| 83 | </script> | 83 | </script> |
| 84 | 84 | ||
| 85 | <style lang="scss" scoped> | 85 | <style lang="scss" scoped> |
| 86 | .content{ | 86 | .content{ |
| 87 | display: flex; | 87 | display: flex; |
| 88 | flex-direction: column; | 88 | flex-direction: column; |
| 89 | justify-content: center; | 89 | justify-content: center; |
| 90 | align-items: center; | 90 | align-items: center; |
| 91 | } | 91 | } |
| 92 | 92 | ||
| 93 | .header{ | 93 | .header{ |
| 94 | display: flex; | 94 | display: flex; |
| 95 | flex-direction: column; | 95 | flex-direction: column; |
| 96 | align-items: center; | 96 | align-items: center; |
| 97 | justify-content: center; | 97 | justify-content: center; |
| 98 | width: 100%; | 98 | width: 100%; |
| 99 | height: 44px; | 99 | height: 44px; |
| 100 | position: fixed; | 100 | position: fixed; |
| 101 | top: 0; | 101 | top: 0; |
| 102 | z-index: 999; | 102 | z-index: 999; |
| 103 | background-color: #fff; | 103 | background-color: #fff; |
| 104 | .header-name{ | 104 | .header-name{ |
| 105 | display: flex; | 105 | display: flex; |
| 106 | align-items: center; | 106 | align-items: center; |
| 107 | width: 670rpx; | 107 | width: 670rpx; |
| 108 | image { | 108 | image { |
| 109 | width: 11px; | 109 | width: 11px; |
| 110 | height: 18px; | 110 | height: 18px; |
| 111 | } | 111 | } |
| 112 | text { | 112 | text { |
| 113 | // font-family: PingFangSC-Regular; | 113 | // font-family: PingFangSC-Regular; |
| 114 | font-size: 36rpx; | 114 | font-size: 36rpx; |
| 115 | color: #333333; | 115 | color: #333333; |
| 116 | letter-spacing: -0.34px; | 116 | letter-spacing: -0.34px; |
| 117 | margin: 0 0 10rpx 54rpx; | 117 | margin: 0 0 10rpx 54rpx; |
| 118 | } | 118 | } |
| 119 | } | 119 | } |
| 120 | } | 120 | } |
| 121 | 121 | ||
| 122 | .scroll-view { | 122 | .scroll-view { |
| 123 | // height: 1760rpx; // 测试 | 123 | // height: 1760rpx; // 测试 |
| 124 | background: #F2F2F2; | 124 | background: #F2F2F2; |
| 125 | } | 125 | } |
| 126 | .order-hr { | 126 | .order-hr { |
| 127 | width: 100%; | 127 | width: 100%; |
| 128 | height: 1px; | 128 | height: 1px; |
| 129 | background-color: #E9E9E9; | 129 | background-color: #E9E9E9; |
| 130 | } | 130 | } |
| 131 | .order-time { | 131 | .order-time { |
| 132 | width: 100%; | 132 | width: 100%; |
| 133 | height: 140rpx; | 133 | height: 140rpx; |
| 134 | background-color: #fff; | 134 | background-color: #fff; |
| 135 | display: flex; | 135 | display: flex; |
| 136 | justify-content: center; | 136 | justify-content: center; |
| 137 | text { | 137 | text { |
| 138 | // font-family: PingFangSC-Regular; | 138 | // font-family: PingFangSC-Regular; |
| 139 | margin-top: 48rpx; | 139 | margin-top: 48rpx; |
| 140 | font-size: 14px; | 140 | font-size: 14px; |
| 141 | color: #333333; | 141 | color: #333333; |
| 142 | letter-spacing: -0.26px; | 142 | letter-spacing: -0.26px; |
| 143 | } | 143 | } |
| 144 | .p2 { | 144 | .p2 { |
| 145 | // font-family: DINAlternate-Bold; | 145 | // font-family: DINAlternate-Bold; |
| 146 | margin: 42rpx 20rpx 0 20rpx; | 146 | margin: 42rpx 20rpx 0 20rpx; |
| 147 | font-size: 18px; | 147 | font-size: 18px; |
| 148 | color: #EC5D3B; | 148 | color: #EC5D3B; |
| 149 | letter-spacing: -0.34px; | 149 | letter-spacing: -0.34px; |
| 150 | } | 150 | } |
| 151 | } | 151 | } |
| 152 | 152 | ||
| 153 | .order-user { | 153 | .order-user { |
| 154 | width: 670rpx; | 154 | width: 670rpx; |
| 155 | height: 228rpx; | 155 | height: 228rpx; |
| 156 | background: #FFFFFF; | 156 | background: #FFFFFF; |
| 157 | border-radius: 14rpx; | 157 | border-radius: 14rpx; |
| 158 | margin: 0 auto; | 158 | margin: 0 auto; |
| 159 | margin-top: 20rpx; | 159 | margin-top: 20rpx; |
| 160 | margin-bottom: 20rpx; | 160 | margin-bottom: 20rpx; |
| 161 | .order-user-head { | 161 | .order-user-head { |
| 162 | display: flex; | 162 | display: flex; |
| 163 | height: 108rpx; | 163 | height: 108rpx; |
| 164 | width: 100%; | 164 | width: 100%; |
| 165 | align-items: center; | 165 | align-items: center; |
| 166 | margin-left: 126rpx; | 166 | margin-left: 126rpx; |
| 167 | .p1 { | 167 | .p1 { |
| 168 | // font-family: PingFangSC-Regular; | 168 | // font-family: PingFangSC-Regular; |
| 169 | font-size: 14px; | 169 | font-size: 14px; |
| 170 | color: #333333; | 170 | color: #333333; |
| 171 | letter-spacing: -0.26px; | 171 | letter-spacing: -0.26px; |
| 172 | margin-right: 20rpx; | 172 | margin-right: 20rpx; |
| 173 | } | 173 | } |
| 174 | .p2 { | 174 | .p2 { |
| 175 | // font-family: PingFangSC-Regular; | 175 | // font-family: PingFangSC-Regular; |
| 176 | font-size: 14px; | 176 | font-size: 14px; |
| 177 | color: #999999; | 177 | color: #999999; |
| 178 | letter-spacing: -0.26px; | 178 | letter-spacing: -0.26px; |
| 179 | } | 179 | } |
| 180 | } | 180 | } |
| 181 | .order-user-body { | 181 | .order-user-body { |
| 182 | display: flex; | 182 | display: flex; |
| 183 | width: 100%; | 183 | width: 100%; |
| 184 | image{ | 184 | image{ |
| 185 | width: 24px; | 185 | width: 24px; |
| 186 | height: 26px; | 186 | height: 26px; |
| 187 | margin: 12rpx 32rpx 0 40rpx; | 187 | margin: 12rpx 32rpx 0 40rpx; |
| 188 | } | 188 | } |
| 189 | .p3 { | 189 | .p3 { |
| 190 | // font-family: PingFangSC-Semibold; | 190 | // font-family: PingFangSC-Semibold; |
| 191 | font-size: 14px; | 191 | font-size: 14px; |
| 192 | color: #333333; | 192 | color: #333333; |
| 193 | letter-spacing: -0.26px; | 193 | letter-spacing: -0.26px; |
| 194 | } | 194 | } |
| 195 | } | 195 | } |
| 196 | } | 196 | } |
| 197 | 197 | ||
| 198 | .order-info { | 198 | .order-info { |
| 199 | width: 670rpx; | 199 | width: 670rpx; |
| 200 | background-color: #fff; | 200 | background-color: #fff; |
| 201 | box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06); | 201 | box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06); |
| 202 | border-radius: 16rpx; | 202 | border-radius: 16rpx; |
| 203 | margin: 0 auto; | 203 | margin: 0 auto; |
| 204 | view{ | 204 | view{ |
| 205 | margin-left: 40rpx; | 205 | margin-left: 40rpx; |
| 206 | } | 206 | } |
| 207 | text{ | 207 | text{ |
| 208 | font-size: 14px; | 208 | font-size: 14px; |
| 209 | } | 209 | } |
| 210 | .order-info-head { | 210 | .order-info-head { |
| 211 | display: flex; | 211 | display: flex; |
| 212 | padding-top: 40rpx; | 212 | padding-top: 40rpx; |
| 213 | image{ | 213 | image{ |
| 214 | height: 188rpx; | 214 | height: 188rpx; |
| 215 | width: 188rpx; | 215 | width: 188rpx; |
| 216 | } | 216 | } |
| 217 | .order-info-head-r{ | 217 | .order-info-head-r{ |
| 218 | margin: 0; | 218 | margin: 0; |
| 219 | width: 368rpx; | 219 | width: 368rpx; |
| 220 | margin-left: 24rpx; | 220 | margin-left: 24rpx; |
| 221 | // margin-top: 40rpx; | 221 | // margin-top: 40rpx; |
| 222 | text{ | 222 | text{ |
| 223 | display: block; | 223 | display: block; |
| 224 | } | 224 | } |
| 225 | .p1 { | 225 | .p1 { |
| 226 | height: 40px; | 226 | height: 40px; |
| 227 | // font-family: PingFangSC-Regular; | 227 | // font-family: PingFangSC-Regular; |
| 228 | font-size: 14px; | 228 | font-size: 14px; |
| 229 | color: #333333; | 229 | color: #333333; |
| 230 | letter-spacing: -0.26px; | 230 | letter-spacing: -0.26px; |
| 231 | line-height: 18px; | 231 | line-height: 18px; |
| 232 | // line-height: 20px; | 232 | // line-height: 20px; |
| 233 | } | 233 | } |
| 234 | .p2 { | 234 | .p2 { |
| 235 | height: 34px; | 235 | height: 34px; |
| 236 | padding: 1px 0 3px 0; | 236 | padding: 1px 0 3px 0; |
| 237 | // font-family: PingFangSC-Regular; | 237 | // font-family: PingFangSC-Regular; |
| 238 | font-size: 12px; | 238 | font-size: 12px; |
| 239 | color: #999999; | 239 | color: #999999; |
| 240 | letter-spacing: -0.23px; | 240 | letter-spacing: -0.23px; |
| 241 | } | 241 | } |
| 242 | .p3 { | 242 | .p3 { |
| 243 | height: 20px; | 243 | height: 20px; |
| 244 | // font-family: PingFangSC-Regular; | 244 | // font-family: PingFangSC-Regular; |
| 245 | font-size: 14px; | 245 | font-size: 14px; |
| 246 | color: #FF6B4A; | 246 | color: #FF6B4A; |
| 247 | letter-spacing: -0.26px; | 247 | letter-spacing: -0.26px; |
| 248 | } | 248 | } |
| 249 | } | 249 | } |
| 250 | 250 | ||
| 251 | } | 251 | } |
| 252 | .order-info-goodsnum { | 252 | .order-info-goodsnum { |
| 253 | display: flex; | 253 | display: flex; |
| 254 | align-items: center; | 254 | align-items: center; |
| 255 | justify-content: flex-end; | 255 | justify-content: flex-end; |
| 256 | text { | 256 | text { |
| 257 | margin-right: 44rpx; | 257 | margin-right: 44rpx; |
| 258 | // ont-family: PingFangSC-Regular; | 258 | // ont-family: PingFangSC-Regular; |
| 259 | font-size: 12px; | 259 | font-size: 12px; |
| 260 | color: #999999; | 260 | color: #999999; |
| 261 | letter-spacing: -0.23px; | 261 | letter-spacing: -0.23px; |
| 262 | } | 262 | } |
| 263 | } | 263 | } |
| 264 | .order-info-freight { | 264 | .order-info-freight { |
| 265 | display: block; | 265 | display: block; |
| 266 | margin-left: 40rpx; | 266 | margin-left: 40rpx; |
| 267 | margin-top: 22rpx; | 267 | margin-top: 22rpx; |
| 268 | .p1{ | 268 | .p1{ |
| 269 | // font-family: PingFangSC-Regular; | 269 | // font-family: PingFangSC-Regular; |
| 270 | font-size: 14px; | 270 | font-size: 14px; |
| 271 | color: #333333; | 271 | color: #333333; |
| 272 | letter-spacing: -0.26px; | 272 | letter-spacing: -0.26px; |
| 273 | line-height: 18px; | 273 | line-height: 18px; |
| 274 | margin-right: 24px; | 274 | margin-right: 24px; |
| 275 | } | 275 | } |
| 276 | .p2 { | 276 | .p2 { |
| 277 | // font-family: PingFangSC-Regular; | 277 | // font-family: PingFangSC-Regular; |
| 278 | font-size: 14px; | 278 | font-size: 14px; |
| 279 | color: #FF6B4A; | 279 | color: #FF6B4A; |
| 280 | letter-spacing: -0.26px; | 280 | letter-spacing: -0.26px; |
| 281 | } | 281 | } |
| 282 | } | 282 | } |
| 283 | .order-info-discount { | 283 | .order-info-discount { |
| 284 | display: block; | 284 | display: block; |
| 285 | margin-left: 40rpx; | 285 | margin-left: 40rpx; |
| 286 | margin-top: 24rpx; | 286 | margin-top: 24rpx; |
| 287 | .p1 { | 287 | .p1 { |
| 288 | // font-family: PingFangSC-Regular; | 288 | // font-family: PingFangSC-Regular; |
| 289 | font-size: 14px; | 289 | font-size: 14px; |
| 290 | color: #333333; | 290 | color: #333333; |
| 291 | letter-spacing: -0.26px; | 291 | letter-spacing: -0.26px; |
| 292 | line-height: 18px; | 292 | line-height: 18px; |
| 293 | margin-right: 24px; | 293 | margin-right: 24px; |
| 294 | } | 294 | } |
| 295 | .p2 { | 295 | .p2 { |
| 296 | // font-family: PingFangSC-Regular; | 296 | // font-family: PingFangSC-Regular; |
| 297 | font-size: 14px; | 297 | font-size: 14px; |
| 298 | color: #FF6B4A; | 298 | color: #FF6B4A; |
| 299 | letter-spacing: -0.26px; | 299 | letter-spacing: -0.26px; |
| 300 | } | 300 | } |
| 301 | } | 301 | } |
| 302 | .order-info-price { | 302 | .order-info-price { |
| 303 | display: block; | 303 | display: block; |
| 304 | margin-left: 40rpx; | 304 | margin-left: 40rpx; |
| 305 | margin-top: 24rpx; | 305 | margin-top: 24rpx; |
| 306 | .p1 { | 306 | .p1 { |
| 307 | // font-family: PingFangSC-Semibold; | 307 | // font-family: PingFangSC-Semibold; |
| 308 | font-size: 14px; | 308 | font-size: 14px; |
| 309 | color: #333333; | 309 | color: #333333; |
| 310 | letter-spacing: -0.26px; | 310 | letter-spacing: -0.26px; |
| 311 | line-height: 18px; | 311 | line-height: 18px; |
| 312 | margin-right: 24px; | 312 | margin-right: 24px; |
| 313 | } | 313 | } |
| 314 | .p2 { | 314 | .p2 { |
| 315 | // font-family: PingFangSC-Semibold; | 315 | // font-family: PingFangSC-Semibold; |
| 316 | font-size: 14px; | 316 | font-size: 14px; |
| 317 | color: #FF6B4A; | 317 | color: #FF6B4A; |
| 318 | letter-spacing: -0.26px; | 318 | letter-spacing: -0.26px; |
| 319 | } | 319 | } |
| 320 | } | 320 | } |
| 321 | .order-info-num{ | 321 | .order-info-num{ |
| 322 | display: block; | 322 | display: block; |
| 323 | margin-left: 40rpx; | 323 | margin-left: 40rpx; |
| 324 | margin-top: 44rpx; | 324 | margin-top: 44rpx; |
| 325 | text{ | 325 | text{ |
| 326 | // font-family: PingFangSC-Regular; | 326 | // font-family: PingFangSC-Regular; |
| 327 | font-size: 12px; | 327 | font-size: 12px; |
| 328 | color: #999999; | 328 | color: #999999; |
| 329 | letter-spacing: -0.23px; | 329 | letter-spacing: -0.23px; |
| 330 | } | 330 | } |
| 331 | } | 331 | } |
| 332 | .order-info-time { | 332 | .order-info-time { |
| 333 | display: block; | 333 | display: block; |
| 334 | margin: 8rpx 0 48rpx 40rpx; | 334 | margin: 8rpx 0 48rpx 40rpx; |
| 335 | text{ | 335 | text{ |
| 336 | // font-family: PingFangSC-Regular; | 336 | // font-family: PingFangSC-Regular; |
| 337 | font-size: 12px; | 337 | font-size: 12px; |
| 338 | color: #999999; | 338 | color: #999999; |
| 339 | letter-spacing: -0.23px; | 339 | letter-spacing: -0.23px; |
| 340 | } | 340 | } |
| 341 | } | 341 | } |
| 342 | .order-info-hr{ | 342 | .order-info-hr{ |
| 343 | width: 520rpx; | 343 | width: 520rpx; |
| 344 | height: 1px; | 344 | height: 1px; |
| 345 | background-color: #E9E9E9; | 345 | background-color: #E9E9E9; |
| 346 | margin-bottom: 20rpx; | 346 | margin-bottom: 20rpx; |
| 347 | } | 347 | } |
| 348 | .order-info-contact { | 348 | .order-info-contact { |
| 349 | display: flex; | 349 | display: flex; |
| 350 | padding-bottom: 28rpx; | 350 | padding-bottom: 28rpx; |
| 351 | image{ | 351 | image{ |
| 352 | width: 19px; | 352 | width: 19px; |
| 353 | height: 16px; | 353 | height: 16px; |
| 354 | } | 354 | } |
| 355 | text { | 355 | text { |
| 356 | // font-family: PingFangSC-Regular; | 356 | // font-family: PingFangSC-Regular; |
| 357 | margin-left: 20rpx; | 357 | margin-left: 20rpx; |
| 358 | font-size: 14px; | 358 | font-size: 14px; |
| 359 | color: #333333; | 359 | color: #333333; |
| 360 | letter-spacing: -0.26px; | 360 | letter-spacing: -0.26px; |
| 361 | line-height: 18px; | 361 | line-height: 18px; |
| 362 | } | 362 | } |
| 363 | } | 363 | } |
| 364 | } | 364 | } |
| 365 | 365 | ||
| 366 | .order-confim { | 366 | .order-confim { |
| 367 | display: flex; | 367 | display: flex; |
| 368 | align-items: center; | 368 | align-items: center; |
| 369 | z-index: 999; | 369 | z-index: 999; |
| 370 | width: 100%; | 370 | width: 100%; |
| 371 | height: 112rpx; | 371 | height: 112rpx; |
| 372 | position: fixed; | 372 | position: fixed; |
| 373 | bottom: 0; | 373 | bottom: 0; |
| 374 | background: #FFFFFF; | 374 | background: #FFFFFF; |
| 375 | button { | 375 | button { |
| 376 | width: 204rpx; | 376 | width: 204rpx; |
| 377 | height: 80rpx; | 377 | height: 80rpx; |
| 378 | border: 1px solid #FF6B4A; | 378 | border: 1px solid #FF6B4A; |
| 379 | border-radius: 40rpx; | 379 | border-radius: 40rpx; |
| 380 | font-size: 32rpx; | 380 | font-size: 32rpx; |
| 381 | letter-spacing: -0.3px; | 381 | letter-spacing: -0.3px; |
| 382 | margin-right: 0; | 382 | margin-right: 0; |
| 383 | } | 383 | } |
| 384 | .b1 { | 384 | .b1 { |
| 385 | // font-family: PingFangSC-Regular; | 385 | // font-family: PingFangSC-Regular; |
| 386 | color: #FF6B4A; | 386 | color: #FF6B4A; |
| 387 | 387 | ||
| 388 | } | 388 | } |
| 389 | .b2 { | 389 | .b2 { |
| 390 | // font-family: PingFangSC-Regular; | 390 | // font-family: PingFangSC-Regular; |
| 391 | background-color: #FF6B4A; | 391 | background-color: #FF6B4A; |
| 392 | color: #FFFFFF; | 392 | color: #FFFFFF; |
| 393 | margin: 0 26rpx 0 20rpx; | 393 | margin: 0 26rpx 0 20rpx; |
| 394 | } | 394 | } |
| 395 | } | 395 | } |
| 396 | 396 | ||
| 397 | </style> | 397 | </style> |
| 398 | 398 |
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" @click=toMyOrderPaying> | 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" @click=toPredelivery> | 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/CommodityCard/CommodityCard.vue" | 65 | import Card from "@/components/CommodityCard/CommodityCard.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?current=0', |
| 97 | success: res => {}, | 97 | success: res => {}, |
| 98 | fail: () => {}, | 98 | fail: () => {}, |
| 99 | complete: () => {} | 99 | complete: () => {} |
| 100 | }); | 100 | }); |
| 101 | }, | 101 | }, |
| 102 | toPredelivery(){ | 102 | toPredelivery(){ |
| 103 | uni.navigateTo({ | 103 | uni.navigateTo({ |
| 104 | url: '../Predelivery/Predelivery', | 104 | url: '../myOrder/myOrder?current=2', |
| 105 | success: res => {}, | 105 | success: res => {}, |
| 106 | fail: () => {}, | 106 | fail: () => {}, |
| 107 | complete: () => {} | 107 | complete: () => {} |
| 108 | }); | 108 | }); |
| 109 | }, | 109 | }, |
| 110 | toMyOrderPaying(){ | 110 | toMyOrderPaying(){ |
| 111 | uni.navigateTo({ | 111 | uni.navigateTo({ |
| 112 | url: '../myorder-paying/myorder-paying', | 112 | url: '../myOrder/myOrder?current=1', |
| 113 | success: res => {}, | 113 | success: res => {}, |
| 114 | fail: () => {}, | 114 | fail: () => {}, |
| 115 | complete: () => {} | 115 | complete: () => {} |
| 116 | }); | 116 | }); |
| 117 | } | 117 | } |
| 118 | } | 118 | } |
| 119 | } | 119 | } |
| 120 | </script> | 120 | </script> |
| 121 | 121 | ||
| 122 | <style lang="scss"> | 122 | <style lang="scss"> |
| 123 | .warp{ | 123 | .warp{ |
| 124 | font-size: 24rpx; | 124 | font-size: 24rpx; |
| 125 | background-color: #f2f2f2; | 125 | background-color: #f2f2f2; |
| 126 | height: 100vh; | 126 | height: 100vh; |
| 127 | } | 127 | } |
| 128 | .content { | 128 | .content { |
| 129 | display: flex; | 129 | display: flex; |
| 130 | flex-direction: column; | 130 | flex-direction: column; |
| 131 | align-items: center; | 131 | align-items: center; |
| 132 | justify-content: center; | 132 | justify-content: center; |
| 133 | background-color: #F2F2F2; | 133 | background-color: #F2F2F2; |
| 134 | } | 134 | } |
| 135 | .userInfo{ | 135 | .userInfo{ |
| 136 | background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); | 136 | background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); |
| 137 | width: 100%; | 137 | width: 100%; |
| 138 | height: 240rpx; | 138 | height: 240rpx; |
| 139 | color: #FFFFFF; | 139 | color: #FFFFFF; |
| 140 | padding: 60rpx 82rpx 80rpx 44rpx; | 140 | padding: 60rpx 82rpx 80rpx 44rpx; |
| 141 | box-sizing: border-box; | 141 | box-sizing: border-box; |
| 142 | display: flex; | 142 | display: flex; |
| 143 | flex-direction: row; | 143 | flex-direction: row; |
| 144 | justify-content: space-between; | 144 | justify-content: space-between; |
| 145 | align-items: flex-start; | 145 | align-items: flex-start; |
| 146 | .info{ | 146 | .info{ |
| 147 | display: flex; | 147 | display: flex; |
| 148 | flex-direction: row; | 148 | flex-direction: row; |
| 149 | justify-content: space-between; | 149 | justify-content: space-between; |
| 150 | align-items: center; | 150 | align-items: center; |
| 151 | image{ | 151 | image{ |
| 152 | border-radius: 50rpx; | 152 | border-radius: 50rpx; |
| 153 | height: 100rpx ; | 153 | height: 100rpx ; |
| 154 | width: 100rpx; | 154 | width: 100rpx; |
| 155 | margin-right: 40rpx; | 155 | margin-right: 40rpx; |
| 156 | } | 156 | } |
| 157 | .infoText{ | 157 | .infoText{ |
| 158 | display: flex; | 158 | display: flex; |
| 159 | flex-direction: column; | 159 | flex-direction: column; |
| 160 | justify-content: space-between; | 160 | justify-content: space-between; |
| 161 | align-items: flex-scetart; | 161 | align-items: flex-scetart; |
| 162 | .userName{ | 162 | .userName{ |
| 163 | font-size: 18px; | 163 | font-size: 18px; |
| 164 | color: #FFFFFF; | 164 | color: #FFFFFF; |
| 165 | margin-bottom: 8rpx; | 165 | margin-bottom: 8rpx; |
| 166 | } | 166 | } |
| 167 | .nickName{ | 167 | .nickName{ |
| 168 | font-size: 12px; | 168 | font-size: 12px; |
| 169 | color: #FFFFFF; | 169 | color: #FFFFFF; |
| 170 | } | 170 | } |
| 171 | } | 171 | } |
| 172 | } | 172 | } |
| 173 | .service{ | 173 | .service{ |
| 174 | image{ | 174 | image{ |
| 175 | height: 36rpx; | 175 | height: 36rpx; |
| 176 | width: 36rpx; | 176 | width: 36rpx; |
| 177 | } | 177 | } |
| 178 | } | 178 | } |
| 179 | } | 179 | } |
| 180 | .myOrder{ | 180 | .myOrder{ |
| 181 | width: 100%; | 181 | width: 100%; |
| 182 | height: 296rpx; | 182 | height: 296rpx; |
| 183 | margin-top: 20rpx; | 183 | margin-top: 20rpx; |
| 184 | margin-bottom: 20rpx; | 184 | margin-bottom: 20rpx; |
| 185 | padding: 0 40rpx; | 185 | padding: 0 40rpx; |
| 186 | box-sizing: border-box; | 186 | box-sizing: border-box; |
| 187 | background: #FFFFFF; | 187 | background: #FFFFFF; |
| 188 | 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); |
| 189 | border-radius: 6px; | 189 | border-radius: 6px; |
| 190 | border-radius: 6px; | 190 | border-radius: 6px; |
| 191 | display: flex; | 191 | display: flex; |
| 192 | flex-direction: column; | 192 | flex-direction: column; |
| 193 | justify-content: space-around; | 193 | justify-content: space-around; |
| 194 | align-items: center; | 194 | align-items: center; |
| 195 | .orderHeader{ | 195 | .orderHeader{ |
| 196 | width: 100%; | 196 | width: 100%; |
| 197 | height: 100rpx; | 197 | height: 100rpx; |
| 198 | display: flex; | 198 | display: flex; |
| 199 | flex-direction: row; | 199 | flex-direction: row; |
| 200 | justify-content: space-between; | 200 | justify-content: space-between; |
| 201 | align-items: center; | 201 | align-items: center; |
| 202 | border-bottom: 1px solid #E9E9E9;; | 202 | border-bottom: 1px solid #E9E9E9;; |
| 203 | font-weight: bold; | 203 | font-weight: bold; |
| 204 | font-size: 18px; | 204 | font-size: 18px; |
| 205 | color: #333333; | 205 | color: #333333; |
| 206 | .btn{ | 206 | .btn{ |
| 207 | font-size: 12px; | 207 | font-size: 12px; |
| 208 | color: #999999; | 208 | color: #999999; |
| 209 | image{ | 209 | image{ |
| 210 | margin-left: 20rpx; | 210 | margin-left: 20rpx; |
| 211 | height: 16rpx; | 211 | height: 16rpx; |
| 212 | width: 8rpx; | 212 | width: 8rpx; |
| 213 | } | 213 | } |
| 214 | } | 214 | } |
| 215 | } | 215 | } |
| 216 | .orderBody{ | 216 | .orderBody{ |
| 217 | width: 100%; | 217 | width: 100%; |
| 218 | display: flex; | 218 | display: flex; |
| 219 | flex-direction: row; | 219 | flex-direction: row; |
| 220 | justify-content: space-between; | 220 | justify-content: space-between; |
| 221 | align-items: center; | 221 | align-items: center; |
| 222 | .item{ | 222 | .item{ |
| 223 | display: flex; | 223 | display: flex; |
| 224 | flex-direction: column; | 224 | flex-direction: column; |
| 225 | align-items: center; | 225 | align-items: center; |
| 226 | image{ | 226 | image{ |
| 227 | width: 46rpx; | 227 | width: 46rpx; |
| 228 | height: 46rpx; | 228 | height: 46rpx; |
| 229 | } | 229 | } |
| 230 | text{ | 230 | text{ |
| 231 | margin-top: 24rpx; | 231 | margin-top: 24rpx; |
| 232 | font-size: 12px; | 232 | font-size: 12px; |
| 233 | color: #333333; | 233 | color: #333333; |
| 234 | } | 234 | } |
| 235 | } | 235 | } |
| 236 | } | 236 | } |
| 237 | } | 237 | } |
| 238 | .recommend{ | 238 | .recommend{ |
| 239 | background: #FFFFFF; | 239 | background: #FFFFFF; |
| 240 | 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); |
| 241 | border-radius: 6px; | 241 | border-radius: 6px; |
| 242 | border-radius: 6px; | 242 | border-radius: 6px; |
| 243 | .title{ | 243 | .title{ |
| 244 | display: flex; | 244 | display: flex; |
| 245 | flex-direction: row; | 245 | flex-direction: row; |
| 246 | align-items: center; | 246 | align-items: center; |
| 247 | justify-content: space-between; | 247 | justify-content: space-between; |
| 248 | padding: 20rpx 40rpx; | 248 | padding: 20rpx 40rpx; |
| 249 | .line{ | 249 | .line{ |
| 250 | width: 264rpx; | 250 | width: 264rpx; |
| 251 | height: 1rpx; | 251 | height: 1rpx; |
| 252 | border-bottom: 1px solid #EAEAEA; | 252 | border-bottom: 1px solid #EAEAEA; |
| 253 | } | 253 | } |
| 254 | .text{ | 254 | .text{ |
| 255 | font-family: PingFangSC-Medium; | 255 | font-family: PingFangSC-Medium; |
| 256 | font-size: 14px; | 256 | font-size: 14px; |
| 257 | color: #333333; | 257 | color: #333333; |
| 258 | letter-spacing: -0.26px; | 258 | letter-spacing: -0.26px; |
| 259 | text-align: justify; | 259 | text-align: justify; |
| 260 | line-height: 24px; | 260 | line-height: 24px; |
| 261 | } | 261 | } |
| 262 | } | 262 | } |
| 263 | .goods-list{ | 263 | .goods-list{ |
| 264 | .loading-text{ | 264 | .loading-text{ |
| 265 | width: 100%; | 265 | width: 100%; |
| 266 | display: flex; | 266 | display: flex; |
| 267 | justify-content: center; | 267 | justify-content: center; |
| 268 | align-items: center; | 268 | align-items: center; |
| 269 | height: 30px; | 269 | height: 30px; |
| 270 | color: #979797; | 270 | color: #979797; |
| 271 | font-size: 12px; | 271 | font-size: 12px; |
| 272 | } | 272 | } |
| 273 | .product-list{ | 273 | .product-list{ |
| 274 | width: 92%; | 274 | width: 92%; |
| 275 | padding: 0 4% 3vw 4%; | 275 | padding: 0 4% 3vw 4%; |
| 276 | display: flex; | 276 | display: flex; |
| 277 | justify-content: space-between; | 277 | justify-content: space-between; |
| 278 | flex-wrap: wrap; | 278 | flex-wrap: wrap; |
| 279 | .product{ | 279 | .product{ |
| 280 | width: 48%; | 280 | width: 48%; |
| 281 | margin: 0 0 20rpx 0; | 281 | margin: 0 0 20rpx 0; |
| 282 | background: #FFFFFF; | 282 | background: #FFFFFF; |
| 283 | border: 1px solid #F2F2F2; | 283 | border: 1px solid #F2F2F2; |
| 284 | } | 284 | } |
| 285 | } | 285 | } |
| 286 | } | 286 | } |
| 287 | } | 287 | } |
| 288 | 288 | ||
| 289 | </style> | 289 | </style> |
| 290 | 290 |
src/store/modules/categoryOrder.js
| File was created | 1 | import urlAlias from '../url'; | |
| 2 | import request from '../request'; | ||
| 3 | |||
| 4 | const { | ||
| 5 | category | ||
| 6 | } = urlAlias; | ||
| 7 | |||
| 8 | const state = { | ||
| 9 | categoryList: [], | ||
| 10 | }; | ||
| 11 | |||
| 12 | const mutations = { | ||
| 13 | INIT: (state, categoryList) => { | ||
| 14 | state.categoryList = categoryList; | ||
| 15 | }, | ||
| 16 | }; | ||
| 17 | |||
| 18 | const actions = { | ||
| 19 | fetch({ commit }, param) { | ||
| 20 | request({ | ||
| 21 | url: category, | ||
| 22 | success: (res) => { | ||
| 23 | commit('INIT', res.data.data) | ||
| 24 | }, | ||
| 25 | fail: (res) => { | ||
| 26 | console.log("fail status === > ", res); | ||
| 27 | }, | ||
| 28 | complete: (res) => { | ||
| 29 | console.log("complete status === > ", res); | ||
| 30 | }, | ||
| 31 | }) | ||
| 32 | }, | ||
| 33 | }; | ||
| 34 | |||
| 35 | export default { | ||
| 36 | namespaced: true, | ||
| 37 | state, | ||
| 38 | mutations, | ||
| 39 | actions, | ||
| 40 | }; | ||
| 41 |
src/store/url.js
| 1 | const urlAlias = { | 1 | const urlAlias = { |
| 2 | // 获取首页商品列表 | 2 | // 获取首页商品列表 |
| 3 | shopList: 'app/prod/list', | 3 | shopList: 'app/prod/list', |
| 4 | |||
| 5 | // 获取首页商品列表 | ||
| 6 | category: 'app/prod/category', | ||
| 4 | } | 7 | } |
| 5 | 8 | ||
| 6 | export default urlAlias; | 9 | export default urlAlias; |
| 7 | 10 |