Merge Request #9
← To merge requests
From
adam:master
into
jp:master
Commits (1)
1 participants
Showing
5 changed files
Show diff stats
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 | 6 | <icon |
| 7 | class="searchIcon" | 7 | class="searchIcon" |
| 8 | type="search" | 8 | type="search" |
| 9 | size="14" | 9 | size="14" |
| 10 | ></icon> | 10 | ></icon> |
| 11 | <input | 11 | <input |
| 12 | v-model="searchText" | 12 | v-model="searchText" |
| 13 | class="searchIpt" | 13 | class="searchIpt" |
| 14 | placeholder="老花镜" | 14 | placeholder="老花镜" |
| 15 | confirm-type="search" | 15 | confirm-type="search" |
| 16 | @blur="searchKey" | 16 | @blur="searchKey" |
| 17 | /> | 17 | /> |
| 18 | </view> | 18 | </view> |
| 19 | 19 | ||
| 20 | <!-- 筛选栏--> | 20 | <!-- 筛选栏--> |
| 21 | <!-- <view class="screenBar"> | 21 | <!-- <view class="screenBar"> |
| 22 | <view | 22 | <view |
| 23 | v-for="item in screenItems" | 23 | v-for="item in screenItems" |
| 24 | :key="item.current" | 24 | :key="item.current" |
| 25 | @click="onClickItem(item.current)" | 25 | @click="onClickItem(item.current)" |
| 26 | > | 26 | > |
| 27 | <view | 27 | <view |
| 28 | class="screenItem" | 28 | class="screenItem" |
| 29 | v-bind:class="{ active: current === item.current }" | 29 | v-bind:class="{ active: current === item.current }" |
| 30 | v-if="item.current === 2" | 30 | v-if="item.current === 2" |
| 31 | @click="dropDown" | 31 | @click="dropDown" |
| 32 | > | 32 | > |
| 33 | {{ item.text }} | 33 | {{ item.text }} |
| 34 | <icon | 34 | <icon |
| 35 | type="info" | 35 | type="info" |
| 36 | size="14" | 36 | size="14" |
| 37 | ></icon> | 37 | ></icon> |
| 38 | </view> | 38 | </view> |
| 39 | <view | 39 | <view |
| 40 | class="screenItem" | 40 | class="screenItem" |
| 41 | v-bind:class="{ active: current === item.current }" | 41 | v-bind:class="{ active: current === item.current }" |
| 42 | v-if="item.current === 4" | 42 | v-if="item.current === 4" |
| 43 | @click="showDrawer('showRight')" | 43 | @click="showDrawer('showRight')" |
| 44 | > | 44 | > |
| 45 | {{ item.text }} | 45 | {{ item.text }} |
| 46 | <icon | 46 | <icon |
| 47 | type="info" | 47 | type="info" |
| 48 | size="14" | 48 | size="14" |
| 49 | ></icon> | 49 | ></icon> |
| 50 | </view> | 50 | </view> |
| 51 | <view v-if="item.current !== 2&&item.current!==4"> | 51 | <view v-if="item.current !== 2&&item.current!==4"> |
| 52 | <view | 52 | <view |
| 53 | class="screenItem" | 53 | class="screenItem" |
| 54 | v-bind:class="{ active: current === item.current }" | 54 | v-bind:class="{ active: current === item.current }" |
| 55 | >{{ item.text }}</view> | 55 | >{{ item.text }}</view> |
| 56 | </view> | 56 | </view> |
| 57 | </view> | 57 | </view> |
| 58 | </view> --> | 58 | </view> --> |
| 59 | </view> | 59 | </view> |
| 60 | <Uni-drawer | 60 | <Uni-drawer |
| 61 | ref="showRight" | 61 | ref="showRight" |
| 62 | mask="true" | 62 | mask="true" |
| 63 | maskClick="true" | 63 | maskClick="true" |
| 64 | mode="right" | 64 | mode="right" |
| 65 | :width="320" | 65 | :width="320" |
| 66 | @change="change($event,'showRight')" | 66 | @change="change($event,'showRight')" |
| 67 | > | 67 | > |
| 68 | <view class="close"> | 68 | <view class="close"> |
| 69 | <view @click="closeDrawer('showRight')"> | 69 | <view @click="closeDrawer('showRight')"> |
| 70 | <text class="word-btn-white">关闭</text> | 70 | <text class="word-btn-white">关闭</text> |
| 71 | </view> | 71 | </view> |
| 72 | </view> | 72 | </view> |
| 73 | </Uni-drawer> | 73 | </Uni-drawer> |
| 74 | 74 | ||
| 75 | <!-- 筛选菜单--> | 75 | <!-- 筛选菜单--> |
| 76 | <view class="content-wrap"> | 76 | <view class="content-wrap"> |
| 77 | <view> | 77 | <view> |
| 78 | <HMfilterDropdown | 78 | <HMfilterDropdown |
| 79 | :filterData="categoryList" | 79 | :filterData="categoryList" |
| 80 | :defaultSelected="filterDropdownValue" | 80 | :defaultSelected="filterDropdownValue" |
| 81 | :updateMenuName="true" | 81 | :updateMenuName="true" |
| 82 | @search="search" | 82 | @search="search" |
| 83 | @getList="getList" | 83 | @getList="getList" |
| 84 | data-format="Object" | 84 | data-format="Object" |
| 85 | ></HMfilterDropdown> | 85 | ></HMfilterDropdown> |
| 86 | <!-- 商品列表 --> | 86 | <!-- 商品列表 --> |
| 87 | <!-- <scroll-view | 87 | <!-- <scroll-view |
| 88 | enable-flex | 88 | enable-flex |
| 89 | @scrolltolower="handleScrolltolower" | 89 | @scrolltolower="handleScrolltolower" |
| 90 | scroll-y | 90 | scroll-y |
| 91 | style="height: 1000px;margin-bottom: 20px;" | 91 | style="height: 1000px;margin-bottom: 20px;" |
| 92 | > --> | 92 | > --> |
| 93 | <view class="goods-list"> | 93 | <view class="goods-list"> |
| 94 | <view class="product-list"> | 94 | <view class="product-list"> |
| 95 | <view | 95 | <view |
| 96 | class="product" | 96 | class="product" |
| 97 | v-for="(goods) in goodsList" | 97 | v-for="(goods) in goodsList" |
| 98 | :key="goods.id" | 98 | :key="goods.id" |
| 99 | > | 99 | > |
| 100 | <Card :goods="goods" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card> | 100 | <Card |
| 101 | :goods="goods" | ||
| 102 | :scrollTop="scrollTop" | ||
| 103 | :viewHeight="viewHeight" | ||
| 104 | ></Card> | ||
| 101 | </view> | 105 | </view> |
| 102 | </view> | 106 | </view> |
| 103 | <view class="loading-text">{{loadingText}}</view> | 107 | <view class="loading-text">{{loadingText}}</view> |
| 104 | </view> | 108 | </view> |
| 105 | <!-- </scroll-view> --> | 109 | <!-- </scroll-view> --> |
| 106 | </view> | 110 | </view> |
| 107 | </view> | 111 | </view> |
| 108 | </view> | 112 | </view> |
| 109 | </template> | 113 | </template> |
| 110 | 114 | ||
| 111 | <script> | 115 | <script> |
| 112 | import UniDrawer from '@/components/UniDrawer/UniDrawer.vue' | 116 | import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; |
| 113 | import Card from '@/components/CommodityCard/CommodityCard.vue' | 117 | import Card from "@/components/CommodityCard/CommodityCard.vue"; |
| 114 | import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue' | 118 | import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; |
| 115 | import store from '@/store' | 119 | import store from "@/store"; |
| 116 | 120 | ||
| 117 | export default { | 121 | export default { |
| 118 | components: { | 122 | components: { |
| 119 | UniDrawer: UniDrawer, | 123 | UniDrawer: UniDrawer, |
| 120 | HMfilterDropdown: HMfilterDropdown, | 124 | HMfilterDropdown: HMfilterDropdown, |
| 121 | Card: Card, | 125 | Card: Card |
| 122 | }, | 126 | }, |
| 123 | data () { | 127 | data() { |
| 124 | return { | 128 | return { |
| 125 | indexArr: '', | 129 | indexArr: "", |
| 126 | valueArr: '', | 130 | valueArr: "", |
| 127 | loadingText: '~~到底了~~', | 131 | isLoading: true, //初始化加载状态 |
| 132 | loadingText: "~~一开始应该是加载中。。。。等数据传完后，更新为到底了~~", | ||
| 128 | filterDropdownValue: [], | 133 | filterDropdownValue: [], |
| 129 | filterData: [], | 134 | filterData: [], |
| 130 | searchText: '', | 135 | searchText: "", |
| 131 | scrollTop: 0, | 136 | scrollTop: 0, |
| 132 | viewHeight: uni.getSystemInfoSync().windowHeight, | 137 | viewHeight: uni.getSystemInfoSync().windowHeight |
| 133 | } | 138 | }; |
| 134 | }, | 139 | }, |
| 135 | onPageScroll({scrollTop}) { | 140 | onPageScroll({ scrollTop }) { |
| 136 | // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 | 141 | // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 |
| 137 | 142 | ||
| 138 | this.scrollTop = scrollTop; | 143 | this.scrollTop = scrollTop; |
| 139 | console.log('pagescroll====>',this.viewHeight) | 144 | console.log("pagescroll====>", this.viewHeight); |
| 140 | }, | 145 | }, |
| 141 | computed: { | 146 | computed: { |
| 142 | goodsList () { | 147 | goodsList() { |
| 143 | // 也可以从 getters 获取 | 148 | // 也可以从 getters 获取 |
| 144 | // console.log('index-list=====>',this.$store.state.index.list) | 149 | // console.log('index-list=====>',this.$store.state.index.list) |
| 145 | return this.$store.state.index.list | 150 | return this.$store.state.index.list; |
| 146 | }, | ||
| 147 | categoryList () { | ||
| 148 | return this.$store.state.index.categoryList | ||
| 149 | }, | 151 | }, |
| 152 | categoryList() { | ||
| 153 | return this.$store.state.index.categoryList; | ||
| 154 | } | ||
| 150 | }, | 155 | }, |
| 151 | filters: { | 156 | filters: { |
| 152 | outData (value) { | 157 | outData(value) { |
| 153 | return JSON.stringify(value) | 158 | return JSON.stringify(value); |
| 154 | }, | 159 | } |
| 155 | }, | 160 | }, |
| 156 | onLoad () { | 161 | onLoad() { |
| 157 | store.dispatch('index/category') | 162 | store.dispatch("index/category"); |
| 158 | // this.getList(); | 163 | // this.getList(); |
| 159 | store.dispatch('index/list') | 164 | store.dispatch("index/list"); |
| 160 | }, | 165 | }, |
| 161 | methods: { | 166 | methods: { |
| 162 | showDrawer (e) { | 167 | showDrawer(e) { |
| 163 | this.$refs[e].open() | 168 | this.$refs[e].open(); |
| 164 | }, | 169 | }, |
| 165 | getList () { | 170 | getList() { |
| 166 | store.dispatch('index/list') | 171 | store.dispatch("index/list"); |
| 167 | }, | 172 | }, |
| 168 | // search(params) { | 173 | // search(params) { |
| 169 | // this.$store.index. | 174 | // this.$store.index. |
| 170 | // }, | 175 | // }, |
| 171 | closeDrawer (e) { | 176 | closeDrawer(e) { |
| 172 | this.$refs[e].close() | 177 | this.$refs[e].close(); |
| 173 | }, | 178 | }, |
| 174 | change (e, type) { | 179 | change(e, type) { |
| 175 | this[type] = e | 180 | this[type] = e; |
| 176 | }, | 181 | }, |
| 177 | onClickItem (e) { | 182 | onClickItem(e) { |
| 178 | if (this.current !== e) { | 183 | if (this.current !== e) { |
| 179 | this.current = e | 184 | this.current = e; |
| 180 | } | 185 | } |
| 181 | }, | 186 | }, |
| 182 | dropDown () { | 187 | dropDown() { |
| 183 | console.log('下拉') | 188 | console.log("下拉"); |
| 184 | }, | 189 | }, |
| 185 | searchKey (e) { | 190 | searchKey(e) { |
| 186 | const { value: keyword } = e.detail | 191 | const { value: keyword } = e.detail; |
| 187 | this.keyWords = keyword | 192 | this.keyWords = keyword; |
| 188 | store.dispatch('index/search', { | 193 | store.dispatch("index/search", { |
| 189 | params: {}, | 194 | params: {}, |
| 190 | keyword, | 195 | keyword |
| 191 | }) | 196 | }); |
| 192 | }, | 197 | }, |
| 193 | // 接收菜单结果 | 198 | // 接收菜单结果 |
| 194 | search (e) { | 199 | search(e) { |
| 195 | const { on, value, selectedData } = e | 200 | const { on, value, selectedData } = e; |
| 196 | let params = {} | 201 | let params = {}; |
| 197 | const selectedPayload = {} | 202 | const selectedPayload = {}; |
| 198 | for (const key in selectedData) { | 203 | for (const key in selectedData) { |
| 199 | if (Object.prototype.hasOwnProperty.call(selectedData, key)) { | 204 | if (Object.prototype.hasOwnProperty.call(selectedData, key)) { |
| 200 | selectedPayload[key] = selectedData[key].toString() | 205 | selectedPayload[key] = selectedData[key].toString(); |
| 201 | } | 206 | } |
| 202 | } | 207 | } |
| 203 | if (on[0] === 1) { | 208 | if (on[0] === 1) { |
| 204 | // 若点击全部 | 209 | // 若点击全部 |
| 205 | this.searchText = '' | 210 | this.searchText = ""; |
| 206 | store.dispatch('index/list') | 211 | store.dispatch("index/list"); |
| 207 | } else { | 212 | } else { |
| 208 | for (let i = 1; i <= on.length; i++) { // on[0]是全部 | 213 | for (let i = 1; i <= on.length; i++) { |
| 209 | if (on[i] === 1) { // 若该选项被选中 | 214 | // on[0]是全部 |
| 210 | if (this.categoryList[i].value === 'filter') { | 215 | if (on[i] === 1) { |
| 216 | // 若该选项被选中 | ||
| 217 | if (this.categoryList[i].value === "filter") { | ||
| 211 | params = { | 218 | params = { |
| 212 | ...selectedPayload, | 219 | ...selectedPayload, |
| 213 | ...params, | 220 | ...params |
| 214 | } | 221 | }; |
| 215 | } else { | 222 | } else { |
| 216 | params[`${this.categoryList[i].value}`] = value[i][0] | 223 | params[`${this.categoryList[i].value}`] = value[i][0]; |
| 217 | } | 224 | } |
| 218 | } | 225 | } |
| 219 | } | 226 | } |
| 220 | store.dispatch('index/search', { | 227 | store.dispatch("index/search", { |
| 221 | params, | 228 | params, |
| 222 | keyword: this.keyWords, | 229 | keyword: this.keyWords |
| 223 | }) | 230 | }); |
| 224 | } | 231 | } |
| 225 | } | 232 | } |
| 226 | } | 233 | } |
| 227 | 234 | }; | |
| 228 | } | ||
| 229 | </script> | 235 | </script> |
| 230 | 236 | ||
| 231 | <style lang="scss"> | 237 | <style lang="scss"> |
| 232 | .content { | 238 | .content { |
| 233 | display: flex; | 239 | display: flex; |
| 234 | flex-direction: column; | 240 | flex-direction: column; |
| 235 | align-items: center; | 241 | align-items: center; |
| 236 | justify-content: center; | 242 | justify-content: center; |
| 237 | background-color: #f7f6f6; | 243 | background-color: #f7f6f6; |
| 238 | } | 244 | } |
| 239 | .header { | 245 | .header { |
| 240 | display: flex; | 246 | display: flex; |
| 241 | flex-direction: column; | 247 | flex-direction: column; |
| 242 | align-items: center; | 248 | align-items: center; |
| 243 | justify-content: center; | 249 | justify-content: center; |
| 244 | background-color: #f7f6f6; | 250 | background-color: #f7f6f6; |
| 245 | height: 178rpx; | 251 | height: 178rpx; |
| 246 | width: 100%; | 252 | width: 100%; |
| 247 | z-index: 999; | 253 | z-index: 999; |
| 248 | position: fixed; | 254 | position: fixed; |
| 249 | top: 0; | 255 | top: 0; |
| 250 | left: 0; | 256 | left: 0; |
| 251 | } | 257 | } |
| 252 | .searchBar { | 258 | .searchBar { |
| 253 | width: 670rpx; | 259 | width: 670rpx; |
| 254 | display: flex; | 260 | display: flex; |
| 255 | justify-content: center; | 261 | justify-content: center; |
| 256 | align-items: center; | 262 | align-items: center; |
| 257 | box-sizing: border-box; | 263 | box-sizing: border-box; |
| 258 | padding: 0rpx 16rpx; | 264 | padding: 0rpx 16rpx; |
| 259 | border: 1px solid #ff6b4a; | 265 | border: 1px solid #ff6b4a; |
| 260 | border-radius: 8rpx; | 266 | border-radius: 8rpx; |
| 261 | background-color: #ffffff; | 267 | background-color: #ffffff; |
| 262 | } | 268 | } |
| 263 | 269 | ||
| 264 | .searchIpt { | 270 | .searchIpt { |
| 265 | height: 68rpx; | 271 | height: 68rpx; |
| 266 | width: 670rpx; | 272 | width: 670rpx; |
| 267 | padding: 16rpx; | 273 | padding: 16rpx; |
| 268 | font-size: 28rpx; | 274 | font-size: 28rpx; |
| 269 | box-sizing: border-box; | 275 | box-sizing: border-box; |
| 270 | } | 276 | } |
| 271 | .screenBar { | 277 | .screenBar { |
| 272 | width: 670rpx; | 278 | width: 670rpx; |
| 273 | height: 110rpx; | 279 | height: 110rpx; |
| 274 | display: flex; | 280 | display: flex; |
| 275 | flex-direction: row; | 281 | flex-direction: row; |
| 276 | justify-content: space-between; | 282 | justify-content: space-between; |
| 277 | align-items: center; | 283 | align-items: center; |
| 278 | color: #333333; | 284 | color: #333333; |
| 279 | font-size: 32rpx; | 285 | font-size: 32rpx; |
| 280 | } | 286 | } |
| 281 | .active { | 287 | .active { |
| 282 | color: #ff6b4a; | 288 | color: #ff6b4a; |
| 283 | } | 289 | } |
| 284 | .screenItem { | 290 | .screenItem { |
| 285 | display: flex; | 291 | display: flex; |
| 286 | justify-content: center; | 292 | justify-content: center; |
| 287 | align-items: center; | 293 | align-items: center; |
| 288 | } | 294 | } |
| 289 | .content-wrap { | 295 | .content-wrap { |
| 290 | width: 100%; | 296 | width: 100%; |
| 291 | background-color: #ffffff; | 297 | background-color: #ffffff; |
| 292 | } | 298 | } |
| 293 | 299 | ||
| 294 | .HMfilterDropdown { | 300 | .HMfilterDropdown { |
| 295 | top: 178rpx !important; | 301 | top: 178rpx !important; |
| 296 | } | 302 | } |
| 297 | 303 | ||
| 298 | .goods-list { | 304 | .goods-list { |
| 299 | padding-top: 286rpx; | 305 | padding-top: 286rpx; |
| 300 | .loading-text { | 306 | .loading-text { |
| 301 | width: 100%; | 307 | width: 100%; |
| 302 | display: flex; | 308 | display: flex; |
| 303 | justify-content: center; | 309 | justify-content: center; |
| 304 | align-items: center; | 310 | align-items: center; |
| 305 | height: 30px; | 311 | height: 30px; |
| 306 | color: #979797; | 312 | color: #979797; |
| 307 | font-size: 12px; | 313 | font-size: 12px; |
| 308 | } | 314 | } |
| 309 | .product-list { | 315 | .product-list { |
| 310 | width: 92%; | 316 | width: 92%; |
| 311 | padding: 0 4% 3vw 4%; | 317 | padding: 0 4% 3vw 4%; |
| 312 | display: flex; | 318 | display: flex; |
| 313 | justify-content: space-between; | 319 | justify-content: space-between; |
| 314 | flex-wrap: wrap; | 320 | flex-wrap: wrap; |
| 315 | .product { | 321 | .product { |
| 316 | width: 48%; | 322 | width: 48%; |
| 317 | margin: 0 0 20rpx 0; | 323 | margin: 0 0 20rpx 0; |
| 318 | background: #ffffff; | 324 | background: #ffffff; |
| 319 | border: 1px solid #f2f2f2; | 325 | border: 1px solid #f2f2f2; |
| 320 | } | 326 | } |
src/pages/myOrder/components/OrderCard.vue
| 1 | <template> | 1 | <template> |
| 2 | <view> | 2 | <view> |
| 3 | <view class="card" v-if="current == status" @click="toOrderInfo(status,order.pay_id)"> | 3 | <view |
| 4 | <view class="cardHeader"> | 4 | class="card" |
| 5 | <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text> | 5 | v-if="current == status" |
| 6 | <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text> | 6 | @click="toOrderInfo(status,order.pay_id)" |
| 7 | <text class="orderType" v-if="status=='0'">待付款</text> | 7 | > |
| 8 | <text class="orderType" v-if="status=='1'">待收货</text> | 8 | <view class="cardHeader"> |
| 9 | <text class="orderType" v-if="status == '2'||status == '3'">已完成</text> | 9 | <text |
| 10 | <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> | 10 | class="orderId" |
| 11 | </view> | 11 | v-if="status == '0'||status == '1'" |
| 12 | <view class="orderCardInfo" v-for="(orderInfo, index) in orderInfoList.list" :key="index"> | 12 | >订单号：{{order.pay_id}}</text> |
| 13 | <image :src="orderInfo.imgUrl" mode="aspectFill"></image> | 13 | <text |
| 14 | <view class="infoText"> | 14 | class="orderId" |
| 15 | <view class="orderName">{{orderInfo[0].p_name}}</view> | 15 | v-if="status == '2'||status == '3'" |
| 16 | <view class="orderDescrib">{{orderInfo.p_name}}</view> | 16 | >下单时间：{{order.pay_time}}</text> |
| 17 | <view class="infoText-bottom"> | 17 | <text |
| 18 | <view class="markPrice">{{orderInfo.nowPrice}}</view> | 18 | class="orderType" |
| 19 | <view class="buy-num">X {{orderInfo.num}}</view> | 19 | v-if="status=='0'" |
| 20 | </view> | 20 | >待付款</text> |
| 21 | </view> | 21 | <text |
| 22 | </view> | 22 | class="orderType" |
| 23 | <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view> | 23 | v-if="status=='1'" |
| 24 | <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 --> | 24 | >待收货</text> |
| 25 | <view class="btns" v-if="status == '0'"> | 25 | <text |
| 26 | <view class="btn-type1" >取消订单</view> | 26 | class="orderType" |
| 27 | <view class="btn-type2">去支付</view> | 27 | v-if="status == '2'||status == '3'" |
| 28 | </view> | 28 | >已完成</text> |
| 29 | <view class="btns" v-if="status == '1'"> | 29 | <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> |
| 30 | <view class="btn-type2">确认收货</view> | 30 | </view> |
| 31 | </view> | 31 | <view |
| 32 | <view class="btns" v-if="status == '2'"> | 32 | class="orderCardInfo" |
| 33 | <view class="btn-type2">再次购买</view> | 33 | v-for="(orderInfo, index) in order.order_info.list" |
| 34 | </view> | 34 | :key="index" |
| 35 | <!-- <view class="btns" v-if="status == '3'"> | 35 | > |
| 36 | <image | ||
| 37 | :src="orderInfo.imgUrl" | ||
| 38 | mode="aspectFill" | ||
| 39 | ></image> | ||
| 40 | <view class="infoText"> | ||
| 41 | <view class="orderName">{{orderInfo.p_name}}</view> | ||
| 42 | <view class="orderDescrib">{{orderInfo.p_name}}</view> | ||
| 43 | <view class="infoText-bottom"> | ||
| 44 | <view class="markPrice">{{orderInfo.nowPrice}}</view> | ||
| 45 | <view class="buy-num">X {{orderInfo.num}}</view> | ||
| 46 | </view> | ||
| 47 | </view> | ||
| 48 | </view> | ||
| 49 | <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view> | ||
| 50 | <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 --> | ||
| 51 | <view | ||
| 52 | class="btns" | ||
| 53 | v-if="status == '0'" | ||
| 54 | > | ||
| 55 | <view class="btn-type1">取消订单</view> | ||
| 56 | <view class="btn-type2">去支付</view> | ||
| 57 | </view> | ||
| 58 | <view | ||
| 59 | class="btns" | ||
| 60 | v-if="status == '1'" | ||
| 61 | > | ||
| 62 | <view class="btn-type2">确认收货</view> | ||
| 63 | </view> | ||
| 64 | <view | ||
| 65 | class="btns" | ||
| 66 | v-if="status == '2'" | ||
| 67 | > | ||
| 68 | <view class="btn-type2">再次购买</view> | ||
| 69 | </view> | ||
| 70 | <!-- <view class="btns" v-if="status == '3'"> | ||
| 36 | <view class="btn-type2">再次购买</view> | 71 | <view class="btn-type2">再次购买</view> |
| 37 | </view> --> | 72 | </view> --> |
| 38 | </view> | 73 | </view> |
| 39 | <view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)"> | 74 | <view |
| 40 | <view class="cardHeader"> | 75 | class="card" |
| 41 | <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text> | 76 | v-if="current == '10'" |
| 42 | <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text> | 77 | @click="toOrderInfo(status,order.pay_id)" |
| 43 | <text class="orderType" v-if="status=='0'">待付款</text> | 78 | > |
| 44 | <text class="orderType" v-if="status=='1'">待收货</text> | 79 | <view class="cardHeader"> |
| 45 | <text class="orderType" v-if="status == '2'||status == '3'">已完成</text> | 80 | <text |
| 46 | <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> | 81 | class="orderId" |
| 47 | </view> | 82 | v-if="status == '0'||status == '1'" |
| 48 | <view class="orderCardInfo" v-if v-for="(orderInfo) in orderInfoList.list" :key="orderInfo"> | 83 | >订单号：{{order.pay_id}}</text> |
| 49 | <image :src="orderInfo.imgUrl" mode="aspectFill"></image> | 84 | <text |
| 50 | <view class="infoText"> | 85 | class="orderId" |
| 51 | <view class="orderName">{{orderInfo.p_name}}</view> | 86 | v-if="status == '2'||status == '3'" |
| 52 | <view class="orderDescrib">{{orderInfo.p_name}}</view> | 87 | >下单时间：{{order.pay_time}}</text> |
| 53 | <view class="infoText-bottom"> | 88 | <text |
| 54 | <view class="markPrice">{{orderInfo.nowPrice}}</view> | 89 | class="orderType" |
| 55 | <view class="buy-num">X {{orderInfo.num}}</view> | 90 | v-if="status=='0'" |
| 56 | </view> | 91 | >待付款</text> |
| 57 | </view> | 92 | <text |
| 58 | </view> | 93 | class="orderType" |
| 59 | <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view> | 94 | v-if="status=='1'" |
| 60 | <view class="btns" v-if="status == '0'"> | 95 | >待收货</text> |
| 61 | <view class="btn-type1" >取消订单</view> | 96 | <text |
| 62 | <view class="btn-type2">去支付</view> | 97 | class="orderType" |
| 63 | </view> | 98 | v-if="status == '2'||status == '3'" |
| 64 | <view class="btns" v-if="status == '1'"> | 99 | >已完成</text> |
| 65 | <view class="btn-type2">确认收货</view> | 100 | <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> |
| 66 | </view> | 101 | </view> |
| 67 | <view class="btns" v-if="status == '2'"> | 102 | <view |
| 68 | <view class="btn-type2">再次购买</view> | 103 | class="orderCardInfo" |
| 69 | </view> | 104 | v-if |
| 70 | <!-- <view class="btns" v-if="status == '3'"> | 105 | v-for="(orderInfo) in order.order_info.list" |
| 106 | :key="orderInfo" | ||
| 107 | > | ||
| 108 | <image | ||
| 109 | :src="orderInfo.imgUrl" | ||
| 110 | mode="aspectFit" | ||
| 111 | ></image> | ||
| 112 | <view class="infoText"> | ||
| 113 | <view class="orderName">{{orderInfo.p_name}}</view> | ||
| 114 | <view class="orderDescrib">{{orderInfo.p_name}}</view> | ||
| 115 | <view class="infoText-bottom"> | ||
| 116 | <view class="markPrice">{{orderInfo.nowPrice}}</view> | ||
| 117 | <view class="buy-num">X {{orderInfo.num}}</view> | ||
| 118 | </view> | ||
| 119 | </view> | ||
| 120 | </view> | ||
| 121 | <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view> | ||
| 122 | <view | ||
| 123 | class="btns" | ||
| 124 | v-if="status == '0'" | ||
| 125 | > | ||
| 126 | <view class="btn-type1">取消订单</view> | ||
| 127 | <view class="btn-type2">去支付</view> | ||
| 128 | </view> | ||
| 129 | <view | ||
| 130 | class="btns" | ||
| 131 | v-if="status == '1'" | ||
| 132 | > | ||
| 133 | <view class="btn-type2">确认收货</view> | ||
| 134 | </view> | ||
| 135 | <view | ||
| 136 | class="btns" | ||
| 137 | v-if="status == '2'" | ||
| 138 | > | ||
| 139 | <view class="btn-type2">再次购买</view> | ||
| 140 | </view> | ||
| 141 | <!-- <view class="btns" v-if="status == '3'"> | ||
| 71 | <view class="btn-type2">再次购买</view> | 142 | <view class="btn-type2">再次购买</view> |
| 72 | </view> --> | 143 | </view> --> |
| 73 | </view> | 144 | </view> |
| 74 | </view> | 145 | </view> |
| 75 | </template> | 146 | </template> |
| 76 | 147 | ||
| 77 | <script> | 148 | <script> |
| 78 | export default { | 149 | export default { |
| 79 | props: { | 150 | props: { |
| 80 | /** | 151 | /** |
| 81 | * 订单数据 | 152 | * 订单数据 |
| 82 | */ | 153 | */ |
| 83 | order: { | 154 | order: { |
| 84 | // orderId: Number, | 155 | // orderId: Number, |
| 85 | // img: String, | 156 | // img: String, |
| 86 | // name: String, | 157 | // name: String, |
| 87 | // originCost:String, | 158 | // originCost:String, |
| 88 | // price: String, | 159 | // price: String, |
| 89 | // orderType:Number, | 160 | // orderType:Number, |
| 90 | // buyNum:Number, | 161 | // buyNum:Number, |
| 91 | finished_time: null, | 162 | finished_time: null, |
| 92 | is_refound: String, | 163 | is_refound: String, |
| 93 | mch_id: String, | 164 | mch_id: String, |
| 94 | money_of_dcw: String, | 165 | money_of_dcw: String, |
| 95 | money_of_partner: String, | 166 | money_of_partner: String, |
| 96 | money_of_shop: String, | 167 | money_of_shop: String, |
| 97 | orderJudge: Boolean, | 168 | orderJudge: Boolean, |
| 98 | order_info: { | 169 | order_info: { |
| 99 | address:{ | 170 | address: { |
| 100 | cityName: String, | 171 | cityName: String, |
| 101 | countyName: String, | 172 | countyName: String, |
| 102 | detailInfo: String, | 173 | detailInfo: String, |
| 103 | errMsg: String, | 174 | errMsg: String, |
| 104 | nationalCode: String, | 175 | nationalCode: String, |
| 105 | postalCode: String, | 176 | postalCode: String, |
| 106 | provinceName: String, | 177 | provinceName: String, |
| 107 | telNumber: String, | 178 | telNumber: String, |
| 108 | userName: String, | 179 | userName: String |
| 109 | }, | 180 | }, |
| 110 | cartinfo: ["127"], | 181 | cartinfo: ["127"], |
| 111 | keyname: "330_1588911391", | 182 | keyname: "330_1588911391", |
| 112 | lefttime: Number, | 183 | lefttime: Number, |
| 113 | list:[ | 184 | list: [ |
| 114 | { | 185 | { |
| 115 | cart_id: "127", | 186 | cart_id: "127", |
| 116 | imgUrl: String, | 187 | imgUrl: String, |
| 117 | img_index_url: null, | 188 | img_index_url: null, |
| 118 | memo: String, | 189 | memo: String, |
| 119 | mp_id: String, | 190 | mp_id: String, |
| 120 | nowPrice: String, | 191 | nowPrice: String, |
| 121 | num: String, | 192 | num: String, |
| 122 | oldPrice: Number, | 193 | oldPrice: Number, |
| 123 | p_discount: String, | 194 | p_discount: String, |
| 124 | p_name: String, | 195 | p_name: String, |
| 125 | p_root_index: String, | 196 | p_root_index: String, |
| 126 | p_sale_price: String, | 197 | p_sale_price: String, |
| 127 | peopleName: String, | 198 | peopleName: String, |
| 128 | pics: ["79_0_D122D2.jpg","79_1_E0A1ED.jpg","79_2_B00B3D.jpg","79_3_B2CF21.jpg","79_4_33AD1B.jpg"], | 199 | pics: [ |
| 129 | pid: String, | 200 | "79_0_D122D2.jpg", |
| 130 | sk_id: String, | 201 | "79_1_E0A1ED.jpg", |
| 131 | } | 202 | "79_2_B00B3D.jpg", |
| 132 | ], | 203 | "79_3_B2CF21.jpg", |
| 133 | orderDesc: String, | 204 | "79_4_33AD1B.jpg" |
| 134 | total_fee: Number, | 205 | ], |
| 135 | }, | 206 | pid: String, |
| 136 | partner_uid: String, | 207 | sk_id: String |
| 137 | pay_cate: String, | 208 | } |
| 138 | pay_id: String, | 209 | ], |
| 139 | pay_time: String, | 210 | orderDesc: String, |
| 140 | pay_wood_desc: String, | 211 | total_fee: Number |
| 141 | pay_wood_id: String, | 212 | }, |
| 142 | prepay_id: String, | 213 | partner_uid: String, |
| 143 | re_check_staus: String, | 214 | pay_cate: String, |
| 144 | shopid: String, | 215 | pay_id: String, |
| 145 | split_userid: String, | 216 | pay_time: String, |
| 146 | status: String, | 217 | pay_wood_desc: String, |
| 147 | // status0待付款 1已付款 待收货 2 已收货待评价 3 已评价 | 218 | pay_wood_id: String, |
| 148 | total_fee: String, | 219 | prepay_id: String, |
| 149 | uid: String, | 220 | re_check_staus: String, |
| 150 | }, | 221 | shopid: String, |
| 151 | /** | 222 | split_userid: String, |
| 152 | * 当前选择 | 223 | status: String, |
| 153 | */ | 224 | // status0待付款 1已付款 待收货 2 已收货待评价 3 已评价 |
| 154 | current:Number | 225 | total_fee: String, |
| 155 | 226 | uid: String | |
| 156 | }, | 227 | }, |
| 157 | created() { | 228 | /** |
| 158 | console.log(this.order); | 229 | * 当前选择 |
| 159 | // console.log(this.order.status ); | 230 | */ |
| 160 | // console.log(this.current); | 231 | current: Number |
| 161 | }, | 232 | }, |
| 162 | computed:{ | 233 | created() { |
| 163 | status(){ | 234 | console.log("this.order", this.order); |
| 164 | return this.order.status | 235 | // console.log(this.order.status ); |
| 165 | }, | 236 | // console.log(this.current); |
| 166 | orderInfoList(){ | 237 | }, |
| 167 | console.log('this.order.order_info[0]', this.order) | 238 | computed: { |
| 168 | return this.order.order_info[0] | 239 | status() { |
| 169 | } | 240 | return this.order.status; |
| 170 | }, | 241 | }, |
| 171 | data() { | 242 | orderInfoList() { |
| 172 | return { | 243 | console.log("this.order.order_info[0]", this.order); |
| 173 | }; | 244 | return this.order.order_info; |
| 174 | }, | 245 | } |
| 175 | methods:{ | 246 | }, |
| 176 | toRefundment(){ | 247 | data() { |
| 177 | uni.navigateTo({ | 248 | return {}; |
| 178 | url: '../refundment/refundment', | 249 | }, |
| 179 | success: res => {}, | 250 | methods: { |
| 180 | fail: () => {}, | 251 | toRefundment() { |
| 181 | complete: () => {} | 252 | uni.navigateTo({ |
| 182 | }); | 253 | url: "../refundment/refundment", |
| 183 | }, | 254 | success: res => {}, |
| 184 | toOrderInfo(status,payId){ | 255 | fail: () => {}, |
| 185 | console.log(status,payId) | 256 | complete: () => {} |
| 186 | switch(status){ | 257 | }); |
| 187 | // 0待付款 1待收货 2已收货 3 已评价 | 258 | }, |
| 188 | case '0': | 259 | toOrderInfo(status, payId) { |
| 189 | uni.navigateTo({ | 260 | console.log(status, payId); |
| 190 | url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, | 261 | switch (status) { |
| 191 | fail(errMsg) { | 262 | // 0待付款 1待收货 2已收货 3 已评价 |
| 192 | console.log(errMsg) | 263 | case "0": |
| 193 | } | 264 | uni.navigateTo({ |
| 194 | }) | 265 | url: |
| 195 | break; | 266 | `../myOrderPaying/myOrderPaying?status=` + |
| 196 | case '1': | 267 | status + |
| 197 | uni.navigateTo({ | 268 | `&payId=` + |
| 198 | url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, | 269 | payId, |
| 199 | fail(errMsg) { | 270 | fail(errMsg) { |
| 200 | console.log(errMsg) | 271 | console.log(errMsg); |
| 201 | } | 272 | } |
| 202 | }) | 273 | }); |
| 203 | 274 | break; | |
| 204 | break; | 275 | case "1": |
| 205 | case '2 || 3': | 276 | uni.navigateTo({ |
| 206 | uni.navigateTo({ | 277 | url: |
| 207 | url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, | 278 | `../myOrderPaying/myOrderPaying?status=` + |
| 208 | fail(errMsg) { | 279 | status + |
| 209 | console.log(errMsg) | 280 | `&payId=` + |
| 210 | } | 281 | payId, |
| 211 | }) | 282 | fail(errMsg) { |
| 212 | break; | 283 | console.log(errMsg); |
| 213 | default: | 284 | } |
| 214 | break; | 285 | }); |
| 215 | 286 | ||
| 216 | } | 287 | break; |
| 217 | } | 288 | case "2 || 3": |
| 218 | } | 289 | uni.navigateTo({ |
| 219 | } | 290 | url: |
| 291 | `../myOrderPaying/myOrderPaying?status=` + | ||
| 292 | status + | ||
| 293 | `&payId=` + | ||
| 294 | payId, | ||
| 295 | fail(errMsg) { | ||
| 296 | console.log(errMsg); | ||
| 297 | } | ||
| 298 | }); | ||
| 299 | break; | ||
| 300 | default: | ||
| 301 | break; | ||
| 302 | } | ||
| 303 | } | ||
| 304 | } | ||
| 305 | }; | ||
| 220 | </script> | 306 | </script> |
| 221 | 307 | ||
| 222 | <style lang="scss"> | 308 | <style lang="scss"> |
| 223 | .card{ | 309 | .card { |
| 224 | width: 670rpx; | 310 | width: 670rpx; |
| 225 | height: 478rpx; | 311 | height: 478rpx; |
| 226 | background: #FFFFFF; | 312 | background: #ffffff; |
| 227 | box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); | 313 | box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06); |
| 228 | border-radius: 8px; | 314 | border-radius: 8px; |
| 229 | border-radius: 8px; | 315 | border-radius: 8px; |
| 230 | margin-top: 20rpx; | 316 | margin-top: 20rpx; |
| 231 | padding: 40rpx; | 317 | padding: 40rpx; |
| 232 | box-sizing: border-box; | 318 | box-sizing: border-box; |
| 233 | .cardHeader{ | 319 | .cardHeader { |
| 234 | width: 100%; | 320 | width: 100%; |
| 235 | height: 40rpx; | 321 | height: 40rpx; |
| 236 | display: flex; | 322 | display: flex; |
| 237 | justify-content: space-between; | 323 | justify-content: space-between; |
| 238 | align-items: center; | 324 | align-items: center; |
| 239 | .orderId{ | 325 | .orderId { |
| 240 | font-size: 12px; | 326 | font-size: 12px; |
| 241 | color: #999999; | 327 | color: #999999; |
| 242 | } | 328 | } |
| 243 | .orderType{ | 329 | .orderType { |
| 244 | font-size: 14px; | 330 | font-size: 14px; |
| 245 | color: #FF6B4A; | 331 | color: #ff6b4a; |
| 246 | } | 332 | } |
| 247 | } | 333 | } |
| 248 | .orderCardInfo{ | 334 | .orderCardInfo { |
| 249 | width: 100%; | 335 | width: 100%; |
| 250 | height: 188rpx; | 336 | height: 188rpx; |
| 251 | display: flex; | 337 | display: flex; |
| 252 | flex-direction: row; | 338 | flex-direction: row; |
| 253 | justify-content: space-between; | 339 | justify-content: space-between; |
| 254 | align-items: center; | 340 | align-items: center; |
| 255 | margin-top: 40rpx; | 341 | margin-top: 40rpx; |
| 256 | image{ | 342 | image { |
| 257 | height: 188rpx; | 343 | height: 188rpx; |
| 258 | width: 188rpx; | 344 | width: 188rpx; |
| 259 | margin-right: 24rpx; | 345 | margin-right: 24rpx; |
| 260 | } | 346 | } |
| 261 | .infoText{ | 347 | .infoText { |
| 262 | display: flex; | 348 | display: flex; |
| 263 | flex-direction: column; | 349 | flex-direction: column; |
| 264 | justify-content: space-between; | 350 | justify-content: space-between; |
| 265 | align-items: flex-start; | 351 | align-items: flex-start; |
| 266 | height: 188rpx; | 352 | height: 188rpx; |
| 267 | width: 368rpx; | 353 | width: 368rpx; |
| 268 | } | 354 | } |
| 269 | .orderName{ | 355 | .orderName { |
| 270 | font-size: 14px; | 356 | font-size: 14px; |
| 271 | color: #333333; | 357 | color: #333333; |
| 272 | display: -webkit-box; | 358 | display: -webkit-box; |
| 273 | overflow: hidden; | 359 | overflow: hidden; |
| 274 | -webkit-box-orient: vertical; | 360 | -webkit-box-orient: vertical; |
| 275 | -webkit-line-clamp: 2; | 361 | -webkit-line-clamp: 2; |
| 276 | } | 362 | } |
| 277 | .orderDescrib{ | 363 | .orderDescrib { |
| 278 | font-size: 12px; | 364 | font-size: 12px; |
| 279 | color: #999999; | 365 | color: #999999; |
| 280 | display: -webkit-box; | 366 | display: -webkit-box; |
| 281 | overflow: hidden; | 367 | overflow: hidden; |
| 282 | -webkit-box-orient: vertical; | 368 | -webkit-box-orient: vertical; |
| 283 | -webkit-line-clamp: 2; | 369 | -webkit-line-clamp: 2; |
| 284 | } | 370 | } |
| 285 | .infoText-bottom{ | 371 | .infoText-bottom { |
| 286 | display: flex; | 372 | display: flex; |
| 287 | flex-direction: row; | 373 | flex-direction: row; |
| 288 | justify-content: flex-start; | 374 | justify-content: flex-start; |
| 289 | align-items: center; | 375 | align-items: center; |
| 290 | width: 100%; | 376 | width: 100%; |
| 291 | .markPrice{ | 377 | .markPrice { |
| 292 | font-size: 14px; | 378 | font-size: 14px; |
| 293 | color: #FF6B4A; | 379 | color: #ff6b4a; |
| 294 | margin-right: 20rpx; | 380 | margin-right: 20rpx; |
| 295 | } | 381 | } |
| 296 | .buy-num{ | 382 | .buy-num { |
| 297 | font-size: 12px; | 383 | font-size: 12px; |
| 298 | color: #999999; | 384 | color: #999999; |
| 299 | } | 385 | } |
| 300 | } | 386 | } |
| 301 | } | 387 | } |
| 302 | .payPrice{ | 388 | .payPrice { |
| 303 | text-align: right; | 389 | text-align: right; |
| 304 | margin: 20rpx 0; | 390 | margin: 20rpx 0; |
| 305 | font-size: 14px; | 391 | font-size: 14px; |
| 306 | color: #333333; | 392 | color: #333333; |
| 307 | .priceNum{ | 393 | .priceNum { |
| 308 | font-size: 14px; | 394 | font-size: 14px; |
| 309 | color: #FF6B4A; | 395 | color: #ff6b4a; |
| 310 | } | 396 | } |
| 311 | } | 397 | } |
| 312 | .btns{ | 398 | .btns { |
| 313 | display: flex; | 399 | display: flex; |
| 314 | justify-content: flex-end; | 400 | justify-content: flex-end; |
| 315 | align-items: center; | 401 | align-items: center; |
| 316 | .btn-type1{ | 402 | .btn-type1 { |
| 317 | height: 48rpx; | 403 | height: 48rpx; |
| 318 | width: 156rpx; | 404 | width: 156rpx; |
| 319 | border: 1px solid #FF6B4A; | 405 | border: 1px solid #ff6b4a; |
| 320 | border-radius: 12px; | 406 | border-radius: 12px; |
| 321 | border-radius: 12px; | 407 | border-radius: 12px; |
| 322 | text-align: center; | 408 | text-align: center; |
| 323 | line-height: 48rpx; | 409 | line-height: 48rpx; |
| 324 | font-size: 12px; | 410 | font-size: 12px; |
| 325 | color: #FF6B4A; | 411 | color: #ff6b4a; |
| 326 | } | 412 | } |
| 327 | .btn-type2{ | 413 | .btn-type2 { |
| 328 | height: 48rpx; | 414 | height: 48rpx; |
| 329 | width: 140rpx; | 415 | width: 140rpx; |
| 330 | background: #FF6B4A; | 416 | background: #ff6b4a; |
| 331 | border-radius: 12px; | 417 | border-radius: 12px; |
| 332 | border-radius: 12px; | 418 | border-radius: 12px; |
| 333 | text-align: center; | 419 | text-align: center; |
| 334 | line-height: 48rpx; | 420 | line-height: 48rpx; |
| 335 | font-size: 12px; | 421 | font-size: 12px; |
| 336 | color: #FFFFFF; | 422 | color: #ffffff; |
| 337 | margin-left: 20rpx; | 423 | margin-left: 20rpx; |
| 338 | } | 424 | } |
| 339 | } | 425 | } |
| 340 | } | 426 | } |
| 341 | </style> | 427 | </style> |
| 342 | 428 |
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 | 10 | <view |
| 11 | v-for="item in screenItems" | 11 | v-for="item in screenItems" |
| 12 | :key="item.current" | 12 | :key="item.current" |
| 13 | @click="onClickItem(item.current)" | 13 | @click="onClickItem(item.current)" |
| 14 | > | 14 | > |
| 15 | <view | 15 | <view |
| 16 | class="screenItem" | 16 | class="screenItem" |
| 17 | v-bind:class="{ active: current === item.current }" | 17 | v-bind:class="{ active: current === item.current }" |
| 18 | >{{ item.text }}</view> | 18 | >{{ item.text }}</view> |
| 19 | </view> | 19 | </view> |
| 20 | </view> | 20 | </view> |
| 21 | </view> | 21 | </view> |
| 22 | <view class="orderList"> | 22 | <view class="orderList"> |
| 23 | <view | 23 | <view |
| 24 | v-for="(order) in orderList" | 24 | v-for="(order) in orderList" |
| 25 | :key="order.orderId" | 25 | :key="order.pay_id" |
| 26 | > | 26 | > |
| 27 | <OrderCard | 27 | <OrderCard |
| 28 | :order="order" | 28 | :order="order" |
| 29 | :current="current" | 29 | :current="current" |
| 30 | ></OrderCard> | 30 | ></OrderCard> |
| 31 | </view> | 31 | </view> |
| 32 | </view> | 32 | </view> |
| 33 | <view class="footer">没有更多订单了，去商城看看吧~</view> | 33 | <view class="footer">没有更多订单了，去商城看看吧~</view> |
| 34 | </view> | 34 | </view> |
| 35 | </template> | 35 | </template> |
| 36 | <script> | 36 | <script> |
| 37 | import OrderCard from './components/OrderCard.vue' | 37 | import OrderCard from "./components/OrderCard.vue"; |
| 38 | import store from '@/store' | 38 | import store from "@/store"; |
| 39 | 39 | ||
| 40 | export default { | 40 | export default { |
| 41 | components: { | 41 | components: { |
| 42 | OrderCard: OrderCard, | 42 | OrderCard: OrderCard |
| 43 | }, | 43 | }, |
| 44 | data() { | 44 | data() { |
| 45 | return { | 45 | return { |
| 46 | // 顶部筛选项 | 46 | // 顶部筛选项 |
| 47 | screenItems: [ | 47 | screenItems: [ |
| 48 | { current: '10', text: '全部' }, | 48 | { current: "10", text: "全部" }, |
| 49 | { current: '0', text: '待付款' }, | 49 | { current: "0", text: "待付款" }, |
| 50 | { current: '1', text: '待收货' }, | 50 | { current: "1", text: "待收货" }, |
| 51 | { current: '2', text: '已完成' }, | 51 | { current: "2", text: "待评价" } |
| 52 | // {current:"3",text:'已评价'}, | 52 | // {current:"3",text:'已评价'}, |
| 53 | // {current:"4",text:'退款'}, | 53 | // {current:"4",text:'退款'}, |
| 54 | ], | 54 | ], |
| 55 | // 当前所在item 默认10-->全部 | 55 | // 当前所在item 默认10-->全部 |
| 56 | current: '10', | 56 | current: "10" |
| 57 | } | 57 | }; |
| 58 | }, | 58 | }, |
| 59 | 59 | ||
| 60 | onLoad: function(option) { | 60 | onLoad: function(option) { |
| 61 | // 获取订单列表 | 61 | // 获取订单列表 |
| 62 | store.dispatch('myOrder/getList', { | 62 | store.dispatch("myOrder/getList", { |
| 63 | way: '', | 63 | way: "" |
| 64 | }) | 64 | }); |
| 65 | // 从user过来传的status，给current，以显示对应item | 65 | // 从user过来传的status，给current，以显示对应item |
| 66 | this.current = option.status | 66 | this.current = option.status; |
| 67 | }, | 67 | }, |
| 68 | computed: { | 68 | computed: { |
| 69 | orderList() { | 69 | orderList() { |
| 70 | // console.log('orderList', this.$store.state.myOrder.orderList); | 70 | // console.log('orderList', this.$store.state.myOrder.orderList); |
| 71 | return this.$store.state.myOrder.orderList | 71 | return this.$store.state.myOrder.orderList; |
| 72 | }, | 72 | } |
| 73 | }, | 73 | }, |
| 74 | methods: { | 74 | methods: { |
| 75 | // tab点击事件 | 75 | // tab点击事件 |
| 76 | onClickItem(e) { | 76 | onClickItem(e) { |
| 77 | console.log("onClickItem", e); | ||
| 77 | if (this.current !== e) { | 78 | if (this.current !== e) { |
| 78 | this.current = e | 79 | this.current = e; |
| 79 | } | 80 | } |
| 80 | }, | 81 | } |
| 81 | 82 | } | |
| 82 | }, | 83 | }; |
| 83 | } | ||
| 84 | </script> | 84 | </script> |
| 85 | 85 | ||
| 86 | <style lang="scss"> | 86 | <style lang="scss"> |
| 87 | .content { | 87 | .content { |
| 88 | display: flex; | 88 | display: flex; |
| 89 | flex-direction: column; | 89 | flex-direction: column; |
| 90 | align-items: center; | 90 | align-items: center; |
| 91 | background-color: #f7f6f6; | 91 | background-color: #f7f6f6; |
| 92 | min-height: 100vh; | 92 | min-height: 100vh; |
| 93 | .header { | 93 | .header { |
| 94 | background-color: #ffffff; | 94 | background-color: #ffffff; |
| 95 | width: 100%; | 95 | width: 100%; |
| 96 | // height: 232rpx; | 96 | // height: 232rpx; |
| 97 | padding: 20rpx 40rpx 16rpx 40rpx; | 97 | padding: 20rpx 40rpx 16rpx 40rpx; |
| 98 | box-sizing: border-box; | 98 | box-sizing: border-box; |
| 99 | position: fixed; | 99 | position: fixed; |
| 100 | top: 0; | 100 | top: 0; |
| 101 | left: 0; | 101 | left: 0; |
| 102 | // .searchBar { | 102 | // .searchBar { |
| 103 | // width: 670rpx; | 103 | // width: 670rpx; |
| 104 | // display: flex; | 104 | // display: flex; |
| 105 | // justify-content: center; | 105 | // justify-content: center; |
| 106 | // align-items: center; | 106 | // align-items: center; |
| 107 | // box-sizing: border-box; | 107 | // box-sizing: border-box; |
| 108 | // padding: 0rpx 16rpx; | 108 | // padding: 0rpx 16rpx; |
| 109 | // border: 1px solid #ff6b4a; | 109 | // border: 1px solid #ff6b4a; |
| 110 | // border-radius: 8rpx; | 110 | // border-radius: 8rpx; |
| 111 | // background-color: #ffffff; | 111 | // background-color: #ffffff; |
| 112 | // } | 112 | // } |
| 113 | 113 | ||
| 114 | .screenBar { | 114 | .screenBar { |
| 115 | width: 670rpx; | 115 | width: 670rpx; |
| 116 | // height: 110rpx; | 116 | // height: 110rpx; |
| 117 | height: 70rpx; | 117 | height: 70rpx; |
| 118 | display: flex; | 118 | display: flex; |
| 119 | flex-direction: row; | 119 | flex-direction: row; |
| 120 | justify-content: space-between; | 120 | justify-content: space-between; |
| 121 | align-items: center; | 121 | align-items: center; |
| 122 | color: #333333; | 122 | color: #333333; |
| 123 | font-size: 32rpx; | 123 | font-size: 32rpx; |
| 124 | } | 124 | } |
| 125 | .screenItem { | 125 | .screenItem { |
| 126 | height: 50rpx; | 126 | height: 50rpx; |
| 127 | font-size: 32rpx; | 127 | font-size: 32rpx; |
| 128 | color: #333333; | 128 | color: #333333; |
| 129 | display: flex; | 129 | display: flex; |
| 130 | justify-content: center; | 130 | justify-content: center; |
| 131 | align-items: center; | 131 | align-items: center; |
| 132 | transition: all 0.2s; | 132 | transition: all 0.2s; |
| 133 | } | 133 | } |
| 134 | .active { | 134 | .active { |
| 135 | // font-size: 34rpx; | 135 | // font-size: 34rpx; |
| 136 | color: #ec5d3b; | 136 | color: #ec5d3b; |
| 137 | } | 137 | } |
| 138 | .searchIpt { | 138 | .searchIpt { |
| 139 | height: 68rpx; | 139 | height: 68rpx; |
| 140 | width: 670rpx; | 140 | width: 670rpx; |
| 141 | padding: 16rpx; | 141 | padding: 16rpx; |
| 142 | font-size: 28rpx; | 142 | font-size: 28rpx; |
| 143 | box-sizing: border-box; | 143 | box-sizing: border-box; |
| 144 | } | 144 | } |
| 145 | } | 145 | } |
| 146 | .orderList { | 146 | .orderList { |
| 147 | // margin-top: 232rpx; | 147 | // margin-top: 232rpx; |
| 148 | margin-top: 132rpx; | 148 | margin-top: 132rpx; |
| 149 | } | 149 | } |
| 150 | .footer { | 150 | .footer { |
| 151 | font-size: 14px; | 151 | font-size: 14px; |
| 152 | color: #b8b8b8; | 152 | color: #b8b8b8; |
| 153 | margin: 40rpx 0; | 153 | margin: 40rpx 0; |
| 154 | } | 154 | } |
| 155 | } | 155 | } |
| 156 | </style> | 156 | </style> |
src/pages/myOrderPaying/myOrderPaying.vue
| 1 | <!-- 订单待付款 待收货 --> | 1 | <!-- 订单待付款 待收货 --> |
| 2 | <template> | 2 | <template> |
| 3 | <view class="content"> | 3 | <view class="content"> |
| 4 | <!-- 待付款 --> | 4 | <!-- 待付款 --> |
| 5 | <view | 5 | <view |
| 6 | class="order-time" | 6 | class="order-time" |
| 7 | v-if="status == '0'" | 7 | v-if="status == '0'" |
| 8 | > | 8 | > |
| 9 | <text>请在</text> | 9 | <text>请在</text> |
| 10 | <uni-countdown | 10 | <uni-countdown |
| 11 | color="#EC5D3B" | 11 | color="#EC5D3B" |
| 12 | splitor-color="#EC5D3B" | 12 | splitor-color="#EC5D3B" |
| 13 | :show-day="false" | 13 | :show-day="false" |
| 14 | :hour="0" | 14 | :hour="0" |
| 15 | :second="getTime" | 15 | :second="getTime" |
| 16 | @timeup=timeup | 16 | @timeup=timeup |
| 17 | ></uni-countdown> | 17 | ></uni-countdown> |
| 18 | <text>内完成付款</text> | 18 | <text>内完成付款</text> |
| 19 | </view> | 19 | </view> |
| 20 | <!-- 待收货 --> | 20 | <!-- 待收货 --> |
| 21 | <view | 21 | <view |
| 22 | class="headerBanner" | 22 | class="headerBanner" |
| 23 | v-if="status == '1'" | 23 | v-if="status == '1'" |
| 24 | > | 24 | > |
| 25 | <view class="bannerLeft"> | 25 | <view class="bannerLeft"> |
| 26 | <view class="T1">卖家已发货</view> | 26 | <view class="T1">卖家已发货</view> |
| 27 | <view class="T2">还剩 确认收货</view> | 27 | <view class="T2">还剩 确认收货</view> |
| 28 | </view> | 28 | </view> |
| 29 | <image | 29 | <image |
| 30 | src="../../static/car.png" | 30 | src="../../static/car.png" |
| 31 | mode="aspectFill" | 31 | mode="aspectFill" |
| 32 | ></image> | 32 | ></image> |
| 33 | </view> | 33 | </view> |
| 34 | <view class="order"> | 34 | <view class="order"> |
| 35 | <view class="order-user"> | 35 | <view class="order-user"> |
| 36 | <view class="order-user-head"> | 36 | <view class="order-user-head"> |
| 37 | <text class="p1">{{orderAddressInfo.userName}}</text> | 37 | <text class="p1">{{orderAddressInfo.userName}}</text> |
| 38 | <text class="p2">{{orderAddressInfo.telNumber}}</text> | 38 | <text class="p2">{{orderAddressInfo.telNumber}}</text> |
| 39 | </view> | 39 | </view> |
| 40 | <view class="order-user-body"> | 40 | <view class="order-user-body"> |
| 41 | <image src="../../static/myorder-paying-location.png"></image> | 41 | <image src="../../static/myorder-paying-location.png"></image> |
| 42 | <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text> | 42 | <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text> |
| 43 | </view> | 43 | </view> |
| 44 | </view> | 44 | </view> |
| 45 | <view class="order-info"> | 45 | <view class="order-info"> |
| 46 | <view | 46 | <view |
| 47 | class="order-info-head" | 47 | class="order-info-head" |
| 48 | v-for="(orderInfoListItem,index) in orderInfoList" | 48 | v-for="(orderInfoListItem,index) in orderInfoList" |
| 49 | :key="index" | 49 | :key="index" |
| 50 | > | 50 | > |
| 51 | <image | 51 | <image |
| 52 | :src="orderInfoListItem.imgUrl" | 52 | :src="orderInfoListItem.imgUrl" |
| 53 | mode="aspectFill" | 53 | mode="aspectFill" |
| 54 | ></image> | 54 | ></image> |
| 55 | <view class="order-info-head-r"> | 55 | <view class="order-info-head-r"> |
| 56 | <text class="p1">{{orderInfoListItem.p_name}}</text> | 56 | <text class="p1">{{orderInfoListItem.p_name}}</text> |
| 57 | <view | 57 | <view |
| 58 | class="p2" | 58 | class="p2" |
| 59 | style="margin: 0;" | 59 | style="margin: 0;" |
| 60 | > | 60 | > |
| 61 | 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 | 61 | 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 |
| 62 | <!-- <view class="arrow"></view> --> | 62 | <!-- <view class="arrow"></view> --> |
| 63 | </view> | 63 | </view> |
| 64 | <view class="infoText-bottom"> | 64 | <view class="infoText-bottom"> |
| 65 | <view class="markPrice">{{orderInfoListItem.nowPrice}}</view> | 65 | <view class="markPrice">{{orderInfoListItem.nowPrice}}</view> |
| 66 | <view class="buy-num">X {{orderInfoListItem.num}}</view> | 66 | <view class="buy-num">X {{orderInfoListItem.num}}</view> |
| 67 | </view> | 67 | </view> |
| 68 | </view> | 68 | </view> |
| 69 | </view> | 69 | </view> |
| 70 | <!-- <view class="order-info-goodsnum"> | 70 | <!-- <view class="order-info-goodsnum"> |
| 71 | <text>X1</text> | 71 | <text>X1</text> |
| 72 | </view> --> | 72 | </view> --> |
| 73 | <text class="order-info-freight"> | 73 | <text class="order-info-freight"> |
| 74 | <text class="p1">运费</text> | 74 | <text class="p1">运费</text> |
| 75 | <text class="p2">免运费</text> | 75 | <text class="p2">免运费</text> |
| 76 | </text> | 76 | </text> |
| 77 | <text class="order-info-discount"> | 77 | <text class="order-info-discount"> |
| 78 | <text class="p1">优惠</text> | 78 | <text class="p1">优惠</text> |
| 79 | <text class="p2">-￥{{totalDiscount}}</text> | 79 | <text class="p2">-￥{{totalDiscount}}</text> |
| 80 | </text> | 80 | </text> |
| 81 | <text class="order-info-price"> | 81 | <text class="order-info-price"> |
| 82 | <text class="p1">实付</text> | 82 | <text class="p1">实付</text> |
| 83 | <text class="p2">￥{{orderInfo.order_info[0].total_fee}}</text> | 83 | <text class="p2">￥{{orderInfo.total_fee}}</text> |
| 84 | </text> | 84 | </text> |
| 85 | <text class="order-info-num"> | 85 | <text class="order-info-num"> |
| 86 | <text>订单号：{{payId}}</text> | 86 | <text>订单号：{{payId}}</text> |
| 87 | </text> | 87 | </text> |
| 88 | <text class="order-info-time"> | 88 | <text class="order-info-time"> |
| 89 | <text>下单时间：{{orderInfo.order_info[0].pay_time | timerChange}}</text> | 89 | <text>下单时间：{{orderInfo.pay_time | timerChange}}</text> |
| 90 | </text> | 90 | </text> |
| 91 | <view class="order-info-hr"></view> | 91 | <view class="order-info-hr"></view> |
| 92 | <view class="order-info-contact"> | 92 | <view class="order-info-contact"> |
| 93 | <image src="../../static/myorder-paying-contact.png"></image> | 93 | <image src="../../static/myorder-paying-contact.png"></image> |
| 94 | <text>联系客服</text> | 94 | <text>联系客服</text> |
| 95 | </view> | 95 | </view> |
| 96 | </view> | 96 | </view> |
| 97 | </view> | 97 | </view> |
| 98 | <view | 98 | <view |
| 99 | class="order-confim" | 99 | class="order-confim" |
| 100 | v-if="status == '0'" | 100 | v-if="status == '0'" |
| 101 | > | 101 | > |
| 102 | <button | 102 | <button |
| 103 | class="b1" | 103 | class="b1" |
| 104 | @click="cancleOrder" | 104 | @click="cancleOrder" |
| 105 | >取消订单</button> | 105 | >取消订单</button> |
| 106 | <button | 106 | <button |
| 107 | class="b2" | 107 | class="b2" |
| 108 | @click="paylog" | 108 | @click="paylog" |
| 109 | >立即支付</button> | 109 | >立即支付</button> |
| 110 | </view> | 110 | </view> |
| 111 | 111 | ||
| 112 | <view | 112 | <view |
| 113 | class="order-confim" | 113 | class="order-confim" |
| 114 | v-if="status == '1'" | 114 | v-if="status == '1'" |
| 115 | > | 115 | > |
| 116 | <!-- <button class="b1">取消订单</button> --> | 116 | <!-- <button class="b1">取消订单</button> --> |
| 117 | <button | 117 | <button |
| 118 | class="b2" | 118 | class="b2" |
| 119 | @click="confirmOrder" | 119 | @click="confirmOrder" |
| 120 | >确认收货</button> | 120 | >确认收货</button> |
| 121 | </view> | 121 | </view> |
| 122 | </view> | 122 | </view> |
| 123 | </template> | 123 | </template> |
| 124 | 124 | ||
| 125 | <script> | 125 | <script> |
| 126 | import store from '@/store' | 126 | import store from "@/store"; |
| 127 | import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' | 127 | import UniCountdown from "../../components/UniCountdown/UniCountdown.vue"; |
| 128 | export default { | 128 | export default { |
| 129 | components: { | 129 | components: { |
| 130 | UniCountdown, | 130 | UniCountdown |
| 131 | }, | 131 | }, |
| 132 | data () { | 132 | data() { |
| 133 | return { | 133 | return { |
| 134 | payId: '', | 134 | payId: "", |
| 135 | payTime: '', | 135 | payTime: "", |
| 136 | status: '', // status 0 待付款 1 已发货 | 136 | status: "", // status 0 待付款 1 已发货 |
| 137 | uid: '', | 137 | uid: "", |
| 138 | openid: '', | 138 | openid: "", |
| 139 | lefttime: 0, | 139 | lefttime: 0, |
| 140 | isPay: 0, | 140 | isPay: 0 |
| 141 | } | 141 | }; |
| 142 | }, | 142 | }, |
| 143 | onLoad: function (option) { | 143 | onLoad: function(option) { |
| 144 | console.log(option) | 144 | console.log(option); |
| 145 | this.payId = option.payId | 145 | this.payId = option.payId; |
| 146 | this.status = option.status | 146 | this.status = option.status; |
| 147 | this.isPay = option.isPay | 147 | this.isPay = option.isPay; |
| 148 | const openid = uni.getStorageSync('openid') | 148 | const openid = uni.getStorageSync("openid"); |
| 149 | const uid = this.$store.state.user.uid | 149 | const uid = this.$store.state.user.uid; |
| 150 | this.uid = uid | 150 | this.uid = uid; |
| 151 | this.openid = openid | 151 | this.openid = openid; |
| 152 | store.dispatch('orderRead/getOrderInfo', { | 152 | store.dispatch("orderRead/getOrderInfo", { |
| 153 | pay_id: this.payId, | 153 | pay_id: this.payId, |
| 154 | uid: '1', | 154 | uid: "1", |
| 155 | openid: openid, | 155 | openid: openid |
| 156 | }) | 156 | }); |
| 157 | // this.orderInfo = this.$store.state.orderRead.orderInfo | 157 | // this.orderInfo = this.$store.state.orderRead.orderInfo |
| 158 | }, | 158 | }, |
| 159 | // 若从支付页面跳转过来，返回直接返回到首页 | 159 | // 若从支付页面跳转过来，返回直接返回到首页 |
| 160 | onBackPress(option) { | 160 | onBackPress(option) { |
| 161 | if (option.from === 'backbutton' && this.isPay) { | 161 | if (option.from === "backbutton" && this.isPay) { |
| 162 | uni.switchTab({ | 162 | uni.switchTab({ |
| 163 | url: '/pages/index/index', | 163 | url: "/pages/index/index" |
| 164 | }) | 164 | }); |
| 165 | return true // 阻止默认返回行为 | 165 | return true; // 阻止默认返回行为 |
| 166 | } | 166 | } |
| 167 | }, | 167 | }, |
| 168 | computed: { | 168 | computed: { |
| 169 | // 获取订单详细信息 | 169 | // 获取订单详细信息 |
| 170 | orderInfo () { | 170 | orderInfo() { |
| 171 | console.log('orderInfo', this.$store.state.orderRead.orderInfo) | 171 | console.log("orderInfo", this.$store.state.orderRead.orderInfo); |
| 172 | return this.$store.state.orderRead.orderInfo || {} | 172 | return this.$store.state.orderRead.orderInfo || {}; |
| 173 | }, | 173 | }, |
| 174 | orderInfoList () { | 174 | orderInfoList() { |
| 175 | const orderInfoList = this.orderInfo.order_info[0].list | 175 | const orderInfoList = this.orderInfo.order_info.list; |
| 176 | return orderInfoList | 176 | return orderInfoList; |
| 177 | }, | 177 | }, |
| 178 | // 获取订单地址信息 | 178 | // 获取订单地址信息 |
| 179 | orderAddressInfo () { | 179 | orderAddressInfo() { |
| 180 | return this.orderInfo.order_info[0].address | 180 | return this.orderInfo.order_info.address; |
| 181 | }, | 181 | }, |
| 182 | // 订单付款时间 | 182 | // 订单付款时间 |
| 183 | getTime () { | 183 | getTime() { |
| 184 | return this.orderInfo.order_info[0].lefttime | 184 | return this.orderInfo.order_info.lefttime; |
| 185 | }, | 185 | }, |
| 186 | // 计算总优惠额 | 186 | // 计算总优惠额 |
| 187 | totalDiscount () { | 187 | totalDiscount() { |
| 188 | const discountInfoList = this.orderInfo.discount_info | 188 | const discountInfoList = this.orderInfo.discount_info; |
| 189 | let totalDiscount = 0 | 189 | let totalDiscount = 0; |
| 190 | if (discountInfoList) { | 190 | if (discountInfoList) { |
| 191 | discountInfoList.map((discountItem, index) => { | 191 | discountInfoList.map((discountItem, index) => { |
| 192 | totalDiscount += Number(discountItem.value) | 192 | totalDiscount += Number(discountItem.value); |
| 193 | }) | 193 | }); |
| 194 | } | 194 | } |
| 195 | // console.log(totalDiscount) | 195 | // console.log(totalDiscount) |
| 196 | return totalDiscount | 196 | return totalDiscount; |
| 197 | }, | 197 | } |
| 198 | }, | 198 | }, |
| 199 | methods: { | 199 | methods: { |
| 200 | // 取消订单 | 200 | // 取消订单 |
| 201 | timeup () { | 201 | timeup() { |
| 202 | this.cancleOrder() | 202 | this.cancleOrder(); |
| 203 | }, | 203 | }, |
| 204 | cancleOrder () { | 204 | cancleOrder() { |
| 205 | const uid = this.uid | 205 | const uid = this.uid; |
| 206 | const openid = this.openid | 206 | const openid = this.openid; |
| 207 | uni.showModal({ | 207 | uni.showModal({ |
| 208 | title: '提示', | 208 | title: "提示", |
| 209 | content: '现在取消，订单不可恢复哦，确认取消吗？', | 209 | content: "现在取消，订单不可恢复哦，确认取消吗？", |
| 210 | success: function (res) { | 210 | success: function(res) { |
| 211 | if (res.confirm) { | 211 | if (res.confirm) { |
| 212 | store.dispatch('cancelOrder/cancel', { | 212 | store.dispatch("cancelOrder/cancel", { |
| 213 | keyname: '1', | 213 | keyname: "1", |
| 214 | uid: uid, | 214 | uid: uid, |
| 215 | openid: openid, | 215 | openid: openid |
| 216 | }) | 216 | }); |
| 217 | } else if (res.cancel) { | 217 | } else if (res.cancel) { |
| 218 | console.log('用户点击取消') | 218 | console.log("用户点击取消"); |
| 219 | } | 219 | } |
| 220 | }, | 220 | } |
| 221 | }) | 221 | }); |
| 222 | }, | ||
| 223 | paylog () { | ||
| 224 | |||
| 225 | }, | ||
| 226 | confirmOrder () { | ||
| 227 | store.dispatch('statusConfirm/confirm', { | ||
| 228 | uid: this.uid, | ||
| 229 | openid: this.openid, | ||
| 230 | oldway: '1', | ||
| 231 | way: '2', | ||
| 232 | pay_id: this.payId, | ||
| 233 | judgeContent: '', | ||
| 234 | orderInfo: this.orderInfo.order_info, | ||
| 235 | }).then( | ||
| 236 | setTimeout(() => { | ||
| 237 | uni.navigateBack() | ||
| 238 | }, 1500), | ||
| 239 | ) | ||
| 240 | }, | 222 | }, |
| 223 | paylog() {}, | ||
| 224 | confirmOrder() { | ||
| 225 | store | ||
| 226 | .dispatch("statusConfirm/confirm", { | ||
| 227 | uid: this.uid, | ||
| 228 | openid: this.openid, | ||
| 229 | oldway: "1", | ||
| 230 | way: "2", | ||
| 231 | pay_id: this.payId, | ||
| 232 | judgeContent: "", | ||
| 233 | orderInfo: this.orderInfo.order_info | ||
| 234 | }) | ||
| 235 | .then( | ||
| 236 | setTimeout(() => { | ||
| 237 | uni.navigateBack(); | ||
| 238 | }, 1500) | ||
| 239 | ); | ||
| 240 | } | ||
| 241 | }, | 241 | }, |
| 242 | filters: { | 242 | filters: { |
| 243 | timerChange: function(value) { | 243 | timerChange: function(value) { |
| 244 | var newDate = new Date() | 244 | var newDate = new Date(); |
| 245 | newDate.setTime(value * 1000) | 245 | newDate.setTime(value * 1000); |
| 246 | return newDate.toLocaleString() | 246 | return newDate.toLocaleString(); |
| 247 | }, | 247 | } |
| 248 | }, | 248 | } |
| 249 | } | 249 | }; |
| 250 | </script> | 250 | </script> |
| 251 | 251 | ||
| 252 | <style lang="scss" scoped> | 252 | <style lang="scss" scoped> |
| 253 | .content { | 253 | .content { |
| 254 | min-height: 100vh; | 254 | min-height: 100vh; |
| 255 | display: flex; | 255 | display: flex; |
| 256 | flex-direction: column; | 256 | flex-direction: column; |
| 257 | justify-content: flex-start; | 257 | justify-content: flex-start; |
| 258 | align-items: center; | 258 | align-items: center; |
| 259 | background-color: #f2f2f2; | 259 | background-color: #f2f2f2; |
| 260 | } | 260 | } |
| 261 | 261 | ||
| 262 | .order { | 262 | .order { |
| 263 | margin-bottom: 112rpx; | 263 | margin-bottom: 112rpx; |
| 264 | background: #f2f2f2; | 264 | background: #f2f2f2; |
| 265 | margin-top: 140rpx; | 265 | margin-top: 140rpx; |
| 266 | width: 670rpx; | 266 | width: 670rpx; |
| 267 | } | 267 | } |
| 268 | 268 | ||
| 269 | .order-time { | 269 | .order-time { |
| 270 | width: 100%; | 270 | width: 100%; |
| 271 | height: 140rpx; | 271 | height: 140rpx; |
| 272 | background-color: #fff; | 272 | background-color: #fff; |
| 273 | display: flex; | 273 | display: flex; |
| 274 | justify-content: center; | 274 | justify-content: center; |
| 275 | align-items: center; | 275 | align-items: center; |
| 276 | position: fixed; | 276 | position: fixed; |
| 277 | top: 0; | 277 | top: 0; |
| 278 | left: 0; | 278 | left: 0; |
| 279 | text { | 279 | text { |
| 280 | // font-family: PingFangSC-Regular; | 280 | // font-family: PingFangSC-Regular; |
| 281 | // margin-top: 48rpx; | 281 | // margin-top: 48rpx; |
| 282 | font-size: 14px; | 282 | font-size: 14px; |
| 283 | color: #333333; | 283 | color: #333333; |
| 284 | letter-spacing: -0.26px; | 284 | letter-spacing: -0.26px; |
| 285 | } | 285 | } |
| 286 | .p2 { | 286 | .p2 { |
| 287 | // font-family: DINAlternate-Bold; | 287 | // font-family: DINAlternate-Bold; |
| 288 | margin: 42rpx 20rpx 0 20rpx; | 288 | margin: 42rpx 20rpx 0 20rpx; |
| 289 | font-size: 18px; | 289 | font-size: 18px; |
| 290 | color: #ec5d3b; | 290 | color: #ec5d3b; |
| 291 | letter-spacing: -0.34px; | 291 | letter-spacing: -0.34px; |
| 292 | } | 292 | } |
| 293 | } | 293 | } |
| 294 | .headerBanner { | 294 | .headerBanner { |
| 295 | width: 100%; | 295 | width: 100%; |
| 296 | height: 140rpx; | 296 | height: 140rpx; |
| 297 | background: #4a90e2; | 297 | background: #4a90e2; |
| 298 | padding: 26rpx 60rpx 24rpx 60rpx; | 298 | padding: 26rpx 60rpx 24rpx 60rpx; |
| 299 | box-sizing: border-box; | 299 | box-sizing: border-box; |
| 300 | color: #ffffff; | 300 | color: #ffffff; |
| 301 | display: flex; | 301 | display: flex; |
| 302 | justify-content: space-between; | 302 | justify-content: space-between; |
| 303 | align-items: center; | 303 | align-items: center; |
| 304 | position: fixed; | 304 | position: fixed; |
| 305 | top: 0; | 305 | top: 0; |
| 306 | left: 0; | 306 | left: 0; |
| 307 | .bannerLeft { | 307 | .bannerLeft { |
| 308 | font-size: 36rpx; | 308 | font-size: 36rpx; |
| 309 | display: flex; | 309 | display: flex; |
| 310 | flex-direction: column; | 310 | flex-direction: column; |
| 311 | justify-content: center; | 311 | justify-content: center; |
| 312 | align-items: center; | 312 | align-items: center; |
| 313 | .T2 { | 313 | .T2 { |
| 314 | font-size: 24rpx; | 314 | font-size: 24rpx; |
| 315 | } | 315 | } |
| 316 | } | 316 | } |
| 317 | image { | 317 | image { |
| 318 | height: 56rpx; | 318 | height: 56rpx; |
| 319 | width: 72rpx; | 319 | width: 72rpx; |
| 320 | } | 320 | } |
| 321 | } | 321 | } |
| 322 | 322 | ||
| 323 | .order-user { | 323 | .order-user { |
| 324 | height: 228rpx; | 324 | height: 228rpx; |
| 325 | background: #ffffff; | 325 | background: #ffffff; |
| 326 | border-radius: 14rpx; | 326 | border-radius: 14rpx; |
| 327 | margin: 0 auto; | 327 | margin: 0 auto; |
| 328 | margin-top: 20rpx; | 328 | margin-top: 20rpx; |
| 329 | margin-bottom: 20rpx; | 329 | margin-bottom: 20rpx; |
| 330 | .order-user-head { | 330 | .order-user-head { |
| 331 | display: flex; | 331 | display: flex; |
| 332 | height: 108rpx; | 332 | height: 108rpx; |
| 333 | align-items: center; | 333 | align-items: center; |
| 334 | margin-left: 126rpx; | 334 | margin-left: 126rpx; |
| 335 | .p1 { | 335 | .p1 { |
| 336 | // font-family: PingFangSC-Regular; | 336 | // font-family: PingFangSC-Regular; |
| 337 | font-size: 14px; | 337 | font-size: 14px; |
| 338 | color: #333333; | 338 | color: #333333; |
| 339 | letter-spacing: -0.26px; | 339 | letter-spacing: -0.26px; |
| 340 | margin-right: 20rpx; | 340 | margin-right: 20rpx; |
| 341 | } | 341 | } |
| 342 | .p2 { | 342 | .p2 { |
| 343 | // font-family: PingFangSC-Regular; | 343 | // font-family: PingFangSC-Regular; |
| 344 | font-size: 14px; | 344 | font-size: 14px; |
| 345 | color: #999999; | 345 | color: #999999; |
| 346 | letter-spacing: -0.26px; | 346 | letter-spacing: -0.26px; |
| 347 | } | 347 | } |
| 348 | } | 348 | } |
| 349 | .order-user-body { | 349 | .order-user-body { |
| 350 | display: flex; | 350 | display: flex; |
| 351 | width: 100%; | 351 | width: 100%; |
| 352 | image { | 352 | image { |
| 353 | width: 24px; | 353 | width: 24px; |
| 354 | height: 26px; | 354 | height: 26px; |
| 355 | margin: 12rpx 32rpx 0 40rpx; | 355 | margin: 12rpx 32rpx 0 40rpx; |
| 356 | } | 356 | } |
| 357 | .p3 { | 357 | .p3 { |
| 358 | // font-family: PingFangSC-Semibold; | 358 | // font-family: PingFangSC-Semibold; |
| 359 | font-size: 14px; | 359 | font-size: 14px; |
| 360 | color: #333333; | 360 | color: #333333; |
| 361 | letter-spacing: -0.26px; | 361 | letter-spacing: -0.26px; |
| 362 | } | 362 | } |
| 363 | } | 363 | } |
| 364 | } | 364 | } |
| 365 | 365 | ||
| 366 | .order-info { | 366 | .order-info { |
| 367 | background-color: #fff; | 367 | background-color: #fff; |
| 368 | box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); | 368 | box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); |
| 369 | border-radius: 16rpx; | 369 | border-radius: 16rpx; |
| 370 | margin: 0 auto; | 370 | margin: 0 auto; |
| 371 | view { | 371 | view { |
| 372 | margin-left: 40rpx; | 372 | margin-left: 40rpx; |
| 373 | } | 373 | } |
| 374 | text { | 374 | text { |
| 375 | font-size: 14px; | 375 | font-size: 14px; |
| 376 | } | 376 | } |
| 377 | .order-info-head { | 377 | .order-info-head { |
| 378 | display: flex; | 378 | display: flex; |
| 379 | padding-top: 40rpx; | 379 | padding-top: 40rpx; |
| 380 | image { | 380 | image { |
| 381 | height: 188rpx; | 381 | height: 188rpx; |
| 382 | width: 188rpx; | 382 | width: 188rpx; |
| 383 | } | 383 | } |
| 384 | .order-info-head-r { | 384 | .order-info-head-r { |
| 385 | margin: 0; | 385 | margin: 0; |
| 386 | width: 368rpx; | 386 | width: 368rpx; |
| 387 | margin-left: 24rpx; | 387 | margin-left: 24rpx; |
| 388 | // margin-top: 40rpx; | 388 | // margin-top: 40rpx; |
| 389 | text { | 389 | text { |
| 390 | display: block; | 390 | display: block; |
| 391 | } | 391 | } |
| 392 | // .arrow{ | 392 | // .arrow{ |
| 393 | // width: 0; | 393 | // width: 0; |
| 394 | // height: 0; | 394 | // height: 0; |
| 395 | // border-left: 5px transparent; | 395 | // border-left: 5px transparent; |
| 396 | // border-right: 5px transparent; | 396 | // border-right: 5px transparent; |
| 397 | // border-top: 5px #979797; | 397 | // border-top: 5px #979797; |
| 398 | // border-bottom: 0 transparent; | 398 | // border-bottom: 0 transparent; |
| 399 | // border-style: solid; | 399 | // border-style: solid; |
| 400 | // position: relative; | 400 | // position: relative; |
| 401 | // // transform: scaleY(-1); | 401 | // // transform: scaleY(-1); |
| 402 | // } | 402 | // } |
| 403 | // .arrow::after{ | 403 | // .arrow::after{ |
| 404 | // content: ''; | 404 | // content: ''; |
| 405 | // position: absolute; | 405 | // position: absolute; |
| 406 | // top: -6.5px; | 406 | // top: -6.5px; |
| 407 | // left: -5px; | 407 | // left: -5px; |
| 408 | // border-left: 5px transparent; | 408 | // border-left: 5px transparent; |
| 409 | // border-right: 5px transparent; | 409 | // border-right: 5px transparent; |
| 410 | // border-top: 5px #FFFFFF; | 410 | // border-top: 5px #FFFFFF; |
| 411 | // border-bottom: 0 transparent; | 411 | // border-bottom: 0 transparent; |
| 412 | // border-style: solid; | 412 | // border-style: solid; |
| 413 | // } | 413 | // } |
| 414 | .p1 { | 414 | .p1 { |
| 415 | min-height: 40px; | 415 | min-height: 40px; |
| 416 | // font-family: PingFangSC-Regular; | 416 | // font-family: PingFangSC-Regular; |
| 417 | font-size: 14px; | 417 | font-size: 14px; |
| 418 | color: #333333; | 418 | color: #333333; |
| 419 | letter-spacing: -0.26px; | 419 | letter-spacing: -0.26px; |
| 420 | line-height: 18px; | 420 | line-height: 18px; |
| 421 | // line-height: 20px; | 421 | // line-height: 20px; |
| 422 | } | 422 | } |
| 423 | .p2 { | 423 | .p2 { |
| 424 | height: 34px; | 424 | height: 34px; |
| 425 | padding: 1px 0 3px 0; | 425 | padding: 1px 0 3px 0; |
| 426 | // font-family: PingFangSC-Regular; | 426 | // font-family: PingFangSC-Regular; |
| 427 | font-size: 12px; | 427 | font-size: 12px; |
| 428 | color: #999999; | 428 | color: #999999; |
| 429 | letter-spacing: -0.23px; | 429 | letter-spacing: -0.23px; |
| 430 | } | 430 | } |
| 431 | .infoText-bottom { | 431 | .infoText-bottom { |
| 432 | display: flex; | 432 | display: flex; |
| 433 | flex-direction: row; | 433 | flex-direction: row; |
| 434 | justify-content: flex-start; | 434 | justify-content: flex-start; |
| 435 | align-items: center; | 435 | align-items: center; |
| 436 | width: 100%; | 436 | width: 100%; |
| 437 | margin-left: 0; | 437 | margin-left: 0; |
| 438 | .markPrice { | 438 | .markPrice { |
| 439 | font-size: 14px; | 439 | font-size: 14px; |
| 440 | color: #ff6b4a; | 440 | color: #ff6b4a; |
| 441 | margin-right: 20rpx; | 441 | margin-right: 20rpx; |
| 442 | margin-left: 0rpx; | 442 | margin-left: 0rpx; |
| 443 | } | 443 | } |
| 444 | .buy-num { | 444 | .buy-num { |
| 445 | font-size: 12px; | 445 | font-size: 12px; |
| 446 | color: #999999; | 446 | color: #999999; |
| 447 | } | 447 | } |
| 448 | } | 448 | } |
| 449 | } | 449 | } |
| 450 | } | 450 | } |
| 451 | // .order-info-goodsnum { | 451 | // .order-info-goodsnum { |
| 452 | // display: flex; | 452 | // display: flex; |
| 453 | // align-items: center; | 453 | // align-items: center; |
| 454 | // justify-content: flex-end; | 454 | // justify-content: flex-end; |
| 455 | // text { | 455 | // text { |
| 456 | // margin-right: 44rpx; | 456 | // margin-right: 44rpx; |
| 457 | // // ont-family: PingFangSC-Regular; | 457 | // // ont-family: PingFangSC-Regular; |
| 458 | // font-size: 12px; | 458 | // font-size: 12px; |
| 459 | // color: #999999; | 459 | // color: #999999; |
| 460 | // letter-spacing: -0.23px; | 460 | // letter-spacing: -0.23px; |
| 461 | // } | 461 | // } |
| 462 | // } | 462 | // } |
| 463 | .order-info-freight { | 463 | .order-info-freight { |
| 464 | display: block; | 464 | display: block; |
| 465 | margin-left: 40rpx; | 465 | margin-left: 40rpx; |
| 466 | margin-top: 22rpx; | 466 | margin-top: 22rpx; |
| 467 | .p1 { | 467 | .p1 { |
| 468 | // font-family: PingFangSC-Regular; | 468 | // font-family: PingFangSC-Regular; |
| 469 | font-size: 14px; | 469 | font-size: 14px; |
| 470 | color: #333333; | 470 | color: #333333; |
| 471 | letter-spacing: -0.26px; | 471 | letter-spacing: -0.26px; |
| 472 | line-height: 18px; | 472 | line-height: 18px; |
| 473 | margin-right: 24px; | 473 | margin-right: 24px; |
| 474 | } | 474 | } |
| 475 | .p2 { | 475 | .p2 { |
| 476 | // font-family: PingFangSC-Regular; | 476 | // font-family: PingFangSC-Regular; |
| 477 | font-size: 14px; | 477 | font-size: 14px; |
| 478 | color: #ff6b4a; | 478 | color: #ff6b4a; |
| 479 | letter-spacing: -0.26px; | 479 | letter-spacing: -0.26px; |
| 480 | } | 480 | } |
| 481 | } | 481 | } |
| 482 | .order-info-discount { | 482 | .order-info-discount { |
| 483 | display: block; | 483 | display: block; |
| 484 | margin-left: 40rpx; | 484 | margin-left: 40rpx; |
| 485 | margin-top: 24rpx; | 485 | margin-top: 24rpx; |
| 486 | .p1 { | 486 | .p1 { |
| 487 | // font-family: PingFangSC-Regular; | 487 | // font-family: PingFangSC-Regular; |
| 488 | font-size: 14px; | 488 | font-size: 14px; |
| 489 | color: #333333; | 489 | color: #333333; |
| 490 | letter-spacing: -0.26px; | 490 | letter-spacing: -0.26px; |
| 491 | line-height: 18px; | 491 | line-height: 18px; |
| 492 | margin-right: 24px; | 492 | margin-right: 24px; |
| 493 | } | 493 | } |
| 494 | .p2 { | 494 | .p2 { |
| 495 | // font-family: PingFangSC-Regular; | 495 | // font-family: PingFangSC-Regular; |
| 496 | font-size: 14px; | 496 | font-size: 14px; |
| 497 | color: #ff6b4a; | 497 | color: #ff6b4a; |
| 498 | letter-spacing: -0.26px; | 498 | letter-spacing: -0.26px; |
| 499 | } | 499 | } |
| 500 | } | 500 | } |
| 501 | .order-info-price { | 501 | .order-info-price { |
| 502 | display: block; | 502 | display: block; |
| 503 | margin-left: 40rpx; | 503 | margin-left: 40rpx; |
| 504 | margin-top: 24rpx; | 504 | margin-top: 24rpx; |
| 505 | .p1 { | 505 | .p1 { |
| 506 | // font-family: PingFangSC-Semibold; | 506 | // font-family: PingFangSC-Semibold; |
| 507 | font-size: 14px; | 507 | font-size: 14px; |
| 508 | color: #333333; | 508 | color: #333333; |
| 509 | letter-spacing: -0.26px; | 509 | letter-spacing: -0.26px; |
| 510 | line-height: 18px; | 510 | line-height: 18px; |
| 511 | margin-right: 24px; | 511 | margin-right: 24px; |
| 512 | } | 512 | } |
| 513 | .p2 { | 513 | .p2 { |
| 514 | // font-family: PingFangSC-Semibold; | 514 | // font-family: PingFangSC-Semibold; |
| 515 | font-size: 14px; | 515 | font-size: 14px; |
| 516 | color: #ff6b4a; | 516 | color: #ff6b4a; |
| 517 | letter-spacing: -0.26px; | 517 | letter-spacing: -0.26px; |
| 518 | } | 518 | } |
| 519 | } | 519 | } |
| 520 | .order-info-num { | 520 | .order-info-num { |
| 521 | display: block; | 521 | display: block; |
| 522 | margin-left: 40rpx; | 522 | margin-left: 40rpx; |
| 523 | margin-top: 44rpx; | 523 | margin-top: 44rpx; |
| 524 | text { | 524 | text { |
| 525 | // font-family: PingFangSC-Regular; | 525 | // font-family: PingFangSC-Regular; |
| 526 | font-size: 12px; | 526 | font-size: 12px; |
| 527 | color: #999999; | 527 | color: #999999; |
| 528 | letter-spacing: -0.23px; | 528 | letter-spacing: -0.23px; |
| 529 | } | 529 | } |
| 530 | } | 530 | } |
| 531 | .order-info-time { | 531 | .order-info-time { |
| 532 | display: block; | 532 | display: block; |
| 533 | margin: 8rpx 0 48rpx 40rpx; | 533 | margin: 8rpx 0 48rpx 40rpx; |
| 534 | text { | 534 | text { |
| 535 | // font-family: PingFangSC-Regular; | 535 | // font-family: PingFangSC-Regular; |
| 536 | font-size: 12px; | 536 | font-size: 12px; |
| 537 | color: #999999; | 537 | color: #999999; |
| 538 | letter-spacing: -0.23px; | 538 | letter-spacing: -0.23px; |
| 539 | } | 539 | } |
| 540 | } | 540 | } |
| 541 | .order-info-hr { | 541 | .order-info-hr { |
| 542 | width: 520rpx; | 542 | width: 520rpx; |
| 543 | height: 1px; | 543 | height: 1px; |
| 544 | background-color: #e9e9e9; | 544 | background-color: #e9e9e9; |
| 545 | margin-bottom: 20rpx; | 545 | margin-bottom: 20rpx; |
| 546 | } | 546 | } |
| 547 | .order-info-contact { | 547 | .order-info-contact { |
| 548 | display: flex; | 548 | display: flex; |
| 549 | padding-bottom: 28rpx; | 549 | padding-bottom: 28rpx; |
| 550 | image { | 550 | image { |
| 551 | width: 19px; | 551 | width: 19px; |
| 552 | height: 16px; | 552 | height: 16px; |
| 553 | } | 553 | } |
| 554 | text { | 554 | text { |
| 555 | // font-family: PingFangSC-Regular; | 555 | // font-family: PingFangSC-Regular; |
| 556 | margin-left: 20rpx; | 556 | margin-left: 20rpx; |
| 557 | font-size: 14px; | 557 | font-size: 14px; |
| 558 | color: #333333; | 558 | color: #333333; |
| 559 | letter-spacing: -0.26px; | 559 | letter-spacing: -0.26px; |
| 560 | line-height: 18px; | 560 | line-height: 18px; |
| 561 | } | 561 | } |
| 562 | } | 562 | } |
| 563 | } | 563 | } |
| 564 | 564 | ||
| 565 | .order-confim { | 565 | .order-confim { |
| 566 | display: flex; | 566 | display: flex; |
| 567 | align-items: center; | 567 | align-items: center; |
| 568 | justify-content: flex-end; | 568 | justify-content: flex-end; |
| 569 | // z-index: 999; | 569 | // z-index: 999; |
| 570 | width: 100%; | 570 | width: 100%; |
| 571 | height: 112rpx; | 571 | height: 112rpx; |
| 572 | position: fixed; | 572 | position: fixed; |
| 573 | bottom: 0; | 573 | bottom: 0; |
| 574 | background: #ffffff; | 574 | background: #ffffff; |
| 575 | button { | 575 | button { |
| 576 | width: 204rpx; | 576 | width: 204rpx; |
| 577 | height: 80rpx; | 577 | height: 80rpx; |
| 578 | border: 1px solid #ff6b4a; | 578 | border: 1px solid #ff6b4a; |
| 579 | border-radius: 40rpx; | 579 | border-radius: 40rpx; |
src/store/modules/myOrder.js
| 1 | import urlAlias from '../url'; | 1 | import urlAlias from '../url'; |
| 2 | import request from '../request'; | 2 | import request from '../request'; |
| 3 | 3 | ||
| 4 | const { | 4 | const { |
| 5 | myOrderList | 5 | myOrderList |
| 6 | } = urlAlias | 6 | } = urlAlias |
| 7 | 7 | ||
| 8 | // const data = { | 8 | // const data = { |
| 9 | // data: [ | 9 | // data: [ |
| 10 | // { | 10 | // { |
| 11 | // finished_time: null, | 11 | // finished_time: null, |
| 12 | // is_refound: "0", | 12 | // is_refound: "0", |
| 13 | // mch_id: "1436019502", | 13 | // mch_id: "1436019502", |
| 14 | // money_of_dcw: "0", | 14 | // money_of_dcw: "0", |
| 15 | // money_of_partner: "0", | 15 | // money_of_partner: "0", |
| 16 | // money_of_shop: "0", | 16 | // money_of_shop: "0", |
| 17 | // orderJudge: false, | 17 | // orderJudge: false, |
| 18 | // order_info: { | 18 | // order_info: { |
| 19 | // address:{ | 19 | // address:{ |
| 20 | // cityName: "镇江市", | 20 | // cityName: "镇江市", |
| 21 | // countyName: "丹阳市", | 21 | // countyName: "丹阳市", |
| 22 | // detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司", | 22 | // detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司", |
| 23 | // errMsg: "chooseAddress:ok", | 23 | // errMsg: "chooseAddress:ok", |
| 24 | // nationalCode: "321181", | 24 | // nationalCode: "321181", |
| 25 | // postalCode: "212300", | 25 | // postalCode: "212300", |
| 26 | // provinceName: "江苏省", | 26 | // provinceName: "江苏省", |
| 27 | // telNumber: "15896379277", | 27 | // telNumber: "15896379277", |
| 28 | // userName: "点餐汪客服", | 28 | // userName: "点餐汪客服", |
| 29 | // }, | 29 | // }, |
| 30 | // cartinfo:['11', '12'], | 30 | // cartinfo:['11', '12'], |
| 31 | // keyname: "1_1587129366", | 31 | // keyname: "1_1587129366", |
| 32 | // lefttime: 179995, | 32 | // lefttime: 179995, |
| 33 | // list:[ | 33 | // list:[ |
| 34 | // { | 34 | // { |
| 35 | // cart_id: "11", | 35 | // cart_id: "11", |
| 36 | // imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg", | 36 | // imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg", |
| 37 | // img_index_url: null, | 37 | // img_index_url: null, |
| 38 | // memo: "志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流，01-8701", | 38 | // memo: "志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流，01-8701", |
| 39 | // mp_id: "1", | 39 | // mp_id: "1", |
| 40 | // nowPrice: 100, | 40 | // nowPrice: 100, |
| 41 | // num: "2", | 41 | // num: "2", |
| 42 | // oldPrice: "0", | 42 | // oldPrice: "0", |
| 43 | // p_discount: "1", | 43 | // p_discount: "1", |
| 44 | // p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", | 44 | // p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", |
| 45 | // p_root_index: "1", | 45 | // p_root_index: "1", |
| 46 | // p_sale_price: "0", | 46 | // p_sale_price: "0", |
| 47 | // peopleName: "me", | 47 | // peopleName: "me", |
| 48 | // pics: '', | 48 | // pics: '', |
| 49 | // pid: "4", | 49 | // pid: "4", |
| 50 | // sk_id: "38", | 50 | // sk_id: "38", |
| 51 | // }, | 51 | // }, |
| 52 | // ], | 52 | // ], |
| 53 | // orderDesc: "总共包括有：01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流在内的1件商品", | 53 | // orderDesc: "总共包括有：01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流在内的1件商品", |
| 54 | // total_fee: 100 | 54 | // total_fee: 100 |
| 55 | // }, | 55 | // }, |
| 56 | // partner_uid: "0", | 56 | // partner_uid: "0", |
| 57 | // pay_cate: "2020", | 57 | // pay_cate: "2020", |
| 58 | // pay_id: "3", | 58 | // pay_id: "3", |
| 59 | // pay_time: "2020-04-17 21:16:12", | 59 | // pay_time: "2020-04-17 21:16:12", |
| 60 | // pay_wood_desc: "在【非常戴镜】的微信付款凭证", | 60 | // pay_wood_desc: "在【非常戴镜】的微信付款凭证", |
| 61 | // pay_wood_id: "fcdj-1-1_1587129366", | 61 | // pay_wood_id: "fcdj-1-1_1587129366", |
| 62 | // prepay_id: "wx172116124528226bf1a8adad1662456500", | 62 | // prepay_id: "wx172116124528226bf1a8adad1662456500", |
| 63 | // re_check_staus: "0", | 63 | // re_check_staus: "0", |
| 64 | // shopid: "0", | 64 | // shopid: "0", |
| 65 | // split_userid: "0", | 65 | // split_userid: "0", |
| 66 | // status: "1", | 66 | // status: "1", |
| 67 | // total_fee: "100", | 67 | // total_fee: "100", |
| 68 | // uid: "1", | 68 | // uid: "1", |
| 69 | // } | 69 | // } |
| 70 | // ], | 70 | // ], |
| 71 | // msg: "订单列表", | 71 | // msg: "订单列表", |
| 72 | // status: 0, | 72 | // status: 0, |
| 73 | // } | 73 | // } |
| 74 | 74 | ||
| 75 | const state = { | 75 | const state = { |
| 76 | orderList: [], | 76 | orderList: [], |
| 77 | }; | 77 | }; |
| 78 | 78 | ||
| 79 | const mutations = { | 79 | const mutations = { |
| 80 | INIT: (state, data) => { | 80 | INIT: (state, data) => { |
| 81 | state.orderList = data; | 81 | state.orderList = data; |
| 82 | }, | 82 | }, |
| 83 | }; | 83 | }; |
| 84 | 84 | ||
| 85 | const actions = { | 85 | const actions = { |
| 86 | getList({ commit }, param) { | 86 | getList({ |
| 87 | request({ | 87 | commit |
| 88 | url: myOrderList, | 88 | }, param) { |
| 89 | data: param, | 89 | request({ |
| 90 | success: (res) => { | 90 | url: myOrderList, |
| 91 | // console.log(res.data); | 91 | data: param, |
| 92 | commit("INIT", res.data.data); | 92 | success: (res) => { |
| 93 | }, | 93 | console.log('myOrderList', res.data); |
| 94 | commit("INIT", res.data.data); | ||
| 95 | }, | ||
| 94 | }) | 96 | }) |
| 95 | } | 97 | } |
| 96 | } | 98 | } |
| 97 | 99 | ||
| 98 | export default { | 100 | export default { |
| 99 | namespaced: true, | 101 | namespaced: true, |
| 100 | state, | 102 | state, |
| 101 | mutations, | 103 | mutations, |
| 102 | actions, | 104 | actions, |
| 103 | } | 105 | } |