ltlzx
/
cnic_buyer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增购物车、支付成功页面推介商品；优化部分页面下拉刷新问题、对接支付成功、物流查看页面；对接我的订单待发货订单、运输中订单

master
ltlzx 4 years ago
parent
7885f117b4
commit
508c0e3ff2
11 changed files with 328 additions and 96 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      common/common.scss
  2. 105
      components/pay.vue
  3. 6
      pages.json
  4. 57
      pages/account/myOrders.vue
  5. 4
      pages/category/productList.vue
  6. 11
      pages/order/confirmation.vue
  7. 14
      pages/order/details.vue
  8. 66
      pages/order/logisticsDetails.vue
  9. 77
      pages/order/paySuccess.vue
  10. 3
      pages/productDetails/index.vue
  11. 53
      pages/shippingCart/index.vue

6
common/common.scss
View File

@ -371,6 +371,12 @@
height:340rpx ;
background-color: #999999;
margin-bottom: 37.33rpx;
.recommend_content_item_image_name{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
image{
width: 100%;
height: 100%;

105
components/pay.vue
View File

@ -0,0 +1,105 @@
<template>
<view >
<view class="mask" v-show="isPay" @click="isShow=false"></view>
<view class="order_popup" v-show="isPay">
<view class="order_popup_title">
<text>
Payment Method
</text>
<image src="../static/img/close1.png" mode="" @click="isPay=false"></image>
</view>
<view class="order_popup_pay" >
<view class="pay_item" @click="selectPay(0)">
<image src="../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==0"></image>
<image src="../static/img/select2.png" mode="" class="pay_item_select" v-else></image>
<view class="pay_item_right">
<image src="../static/img/pay_pal.png" mode=""></image>
<text>Pay Pal</text>
</view>
</view>
<view class="pay_item" @click="selectPay(1)">
<image src="../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==1"></image>
<image src="../static/img/select2.png" mode="" class="pay_item_select" v-else></image>
<view class="pay_item_right">
<image src="../static/img/card.png" mode=""></image>
<text>Credit/Debit Card</text>
</view>
</view>
<view class="pay_item" @click="selectPay(2)">
<image src="../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==2"></image>
<image src="../static/img/select2.png" mode="" class="pay_item_select" v-else></image>
<view class="pay_item_right">
<image src="../static/img/GPay.png" mode=""></image>
<text>Google Pay</text>
</view>
</view>
<view class="pay_item" @click="selectPay(3)">
<image src="../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==3"></image>
<image src="../static/img/select2.png" mode="" class="pay_item_select" v-else></image>
<view class="pay_item_right">
<image src="../static/img/APay.png" mode=""></image>
<text>Apple pay</text>
</view>
</view>
<!-- <navigator url="/pages/order/paySuccess"> -->
<button @click="getPayDate">PAY NOW</button>
<!-- </navigator> -->
</view>
</view>
</view>
</template>
<script>
import {defaultRequest2} from '../api/index.js'
export default {
props:{
payShow:false,
orderId:''
},
data() {
return {
pay_index:0
}
},
methods:{
// 选择支付方式
selectPay(index){
this.pay_index=index
},
// 获取调用支付信息数据
getPayDate(id){
let data={_action:'payorder',order_id:id,order_type:'GOODSBUY',payment_method:'alipay.native'}
defaultRequest2(data).then(res=>{
console.info(res)
if(res.error==0){
//订单对象，从服务器获取
if(res.data.need_pay_amount==0) return
uni.requestPayment({
provider: 'alipay',
orderInfo: res.data.prepay_data.order_info, //支付宝订单数据
success: function (res) {
console.log('success:' + JSON.stringify(res));
uni.redirectTo({
url: 'paySuccess?order_id='+id
});
},
fail: function (err) {
console.log('fail:' + JSON.stringify(err));
uni.showToast({
title:'Payment failed',
icon:'none'
})
uni.navigateBack()
}
});
}
})
},
}
}
</script>
<style>
</style>

6
pages.json
View File

@ -115,7 +115,8 @@
"path": "pages/order/paySuccess",
"style": {
"navigationBarTitleText": "Pay success",
"navigationBarBackgroundColor":"#FFFFFF"
"navigationBarBackgroundColor":"#FFFFFF",
"enablePullDownRefresh":true
}
},
{
@ -185,7 +186,8 @@
{
"path": "pages/shippingCart/index",
"style": {
"titleNView":false
"titleNView":false,
"enablePullDownRefresh":true
}
},
{

57
pages/account/myOrders.vue
View File

@ -21,7 +21,7 @@
<view class="good_info">
<view class="good_info_left">
<view class="good_info_image" v-for="(item1,index1) in item.order_goods" :key="index1">
<image :src="item.goods_img" mode=""></image>
<image :src="item1.goods_img" mode=""></image>
</view>
</view>
<view class="good_info_right">
@ -54,7 +54,7 @@
<view class="good_info">
<view class="good_info_left">
<view class="good_info_image" v-for="(item1,index1) in item.order_goods" :key="index1">
<image :src="item.goods_img" mode=""></image>
<image :src="item1.goods_img" mode=""></image>
</view>
</view>
<view class="good_info_right">
@ -69,60 +69,61 @@
</view>
</view>
</view>
<navigator url="/pages/order/details?details_index=4">
<view class="order">
<!-- 待发货订单 -->
<view class="order" v-if="item.pay_status_code==2 && item.shipping_status_code==0" @click="goDetails(0,item.order_id)">
<view class="order_title">
<text>To be shipped</text>
<view class="order_title_right">
<text>order#20245512141212</text>
<text>order#{{item.order_sn}}</text>
<image src="../../static/img/right.png" mode=""></image>
</view>
</view>
<view class="order_content">
<view class="good_info">
<view class="good_info_left">
<view class="good_info_image" v-for="(item,index) in 2" :key="index"></view>
<view class="good_info_image" v-for="(item1,index1) in item.order_goods" :key="index1">
<image :src="item1.goods_img" mode=""></image>
</view>
</view>
<view class="good_info_right">
<text>2 ltems</text>
<text>{{item.order_goods.length}} ltems</text>
<image src="../../static/img/right.png" mode=""></image>
</view>
</view>
<view class="good_price">total:US$12.5</view>
<view class="good_price">total:US${{item.order_amount}}</view>
</view>
</view>
</navigator>
<view class="order">
<!-- 运输中订单 -->
<view class="order" v-if="item.pay_status_code==2 && item.shipping_status_code==1 || item.shipping_status_code==4" @click="goDetails(4,item.order_id)">
<view class="order_title">
<text>Shipped</text>
<view class="order_title_right">
<text>order#20245512141212</text>
<text>order#{{item.order_sn}}</text>
<image src="../../static/img/right.png" mode=""></image>
</view>
</view>
<view class="order_content">
<view class="good_info">
<view class="good_info" v-for="(item1,index1) in item.order_goods" :key="index1">
<view class="good_info_left ">
<view class="good_info_image" v-for="(item,index) in 1" :key="index"></view>
<view class="good_info_image" >
<image :src="item1.goods_img" mode=""></image>
</view>
<view class="left_info">
<view class="info_name">Adidas Yeezy Boost 350 V2 DazzlingBlue Black GY7164 Men's</view>
<view class="info_name">{{item1.goods_name}}</view>
<view class="left_info_bottom">
<view class="info_lable">
<text>Multicolor;41</text>
<text>{{item1.goods_attr |goodsAttr}}</text>
<image src="/static/img/bottom.png" mode=""></image>
</view>
<text>×2</text>
<text>×{{item1.goods_number}}</text>
</view>
</view>
</view>
</view>
<view class="good_price">total:US$12.5</view>
<view class="good_price">total:US${{item.order_amount}}</view>
<view class="order_button">
<navigator url="/pages/order/refund" style="margin-right:20rpx ;">
<navigator :url="'/pages/order/logisticsDetails?id='+item.order_id" style="margin-right:20rpx ;">
<button class="cancel">LOGISTICS</button>
</navigator>
@ -130,6 +131,12 @@
</view>
</view>
</view>
</view>
<navigator url="/pages/order/details?details_index=2">
<view class="order">
<view class="order_title">
@ -451,6 +458,7 @@
}
})
},
getList(){
let data={_action:'getuserorders',page_index:1,page_size:10,payingstatus:'',status:''}
defaultRequest2(data).then(res=>{
@ -466,6 +474,11 @@
},
onLoad() {
this.getList()
},
filters:{
goodsAttr(e){
return e.replace(/\s\n/g,';');
}
}
}
</script>

4
pages/category/productList.vue
View File

@ -201,7 +201,11 @@
if(!this.isReachBottom)return
this.query.page_index++
this.getList(1)
},
onPullDownRefresh(){
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss" scoped>

11
pages/order/confirmation.vue
View File

@ -192,12 +192,17 @@
</view>
</view>
<!-- <pay :payShow="" :orderId=""></pay> -->
</view>
</template>
<script>
import {defaultRequest2,defaultRequest3} from '../../api/index.js'
import pay from '@/components/pay.vue'
export default {
components:{
pay
},
data() {
return {
isShow:false,
@ -224,7 +229,7 @@
methods:{
// 获取调用支付信息数据
getPayDate(id){
getPayDate(id,will_get_integral){
let data={_action:'payorder',order_id:id,order_type:'GOODSBUY',payment_method:'alipay.native'}
defaultRequest2(data).then(res=>{
console.info(res)
@ -237,7 +242,7 @@
success: function (res) {
console.log('success:' + JSON.stringify(res));
uni.redirectTo({
url: 'paySuccess?order_id='+id
url: 'paySuccess?order_id='+id+'&will_get_integral='+will_get_integral
});
},
fail: function (err) {
@ -276,7 +281,7 @@
defaultRequest3(data).then(res=>{
console.info(res)
if(res.error==0){
this.getPayDate(res.data.order.order_id)
this.getPayDate(res.data.order.order_id,res.data.will_get_integral)
}
})
},

14
pages/order/details.vue
View File

@ -146,20 +146,24 @@
<view>Order Time</view>
<view class="summary_item_right">{{goodsDate.formated_add_time}}</view>
</view>
<view class="summary_item" v-if="details_index!=3">
<view class="summary_item" v-if="details_index!=3 && goodsDate.formated_pay_time">
<view>Payment time</view>
<view class="summary_item_right">21/04/2022 15:42:31</view>
<view class="summary_item_right">{{goodsDate.pay_time}}</view>
</view>
<template v-if="details_index==2">
<view class="summary_item">
<view>Delivery time</view>
<view class="summary_item_right">21/04/2022 15:42:31</view>
<view class="summary_item_right">{{goodsDate.shipping_time}}</view>
</view>
<view class="summary_item">
<view>Completion time</view>
<view class="summary_item_right">21/04/2022 15:42:31</view>
<view class="summary_item_right">{{goodsDate.confirm_time}}</view>
</view>
</template>
<view class="summary_item" v-if="details_index==1">
<view>Cancel time</view>
<view class="summary_item_right">{{goodsDate.pay_time}}</view>
</view>
</view>
@ -181,7 +185,7 @@
export default {
data() {
return {
// 0、代发货 1、已取消 2、已完成 3、待支付 4、运输中
// 0、待发货 1、已取消 2、已完成 3、待支付 4、运输中
details_index:4,
query:{
_action:'getorder',

66
pages/order/logisticsDetails.vue
View File

@ -1,64 +1,54 @@
<template>
<view>
<view class="logistics_info">
<view class="logistics_info_image"></view>
<view class="logistics_info_image">
<image :src="list.logo" mode=""></image>
</view>
<view class="logistics_info_right">
<view class="info_right_title">Signed for</view>
<text>FedEx Express</text>
<view class="info_right_title">{{list.isreceived==1?'Signed for':'In Transit'}}</view>
<text>{{list.expname}}</text>
<view class="info_right_num">
<text>Order number : 5859595940</text>
<text>Order number : {{list.mailno}}</text>
<view class="copy">Copy</view>
</view>
</view>
</view>
<view class="logistics_details">
<view class="logistics_step step_active">
<text>
Your express delivery has been signed, the signer is
your little rabbit, Zhang has unusual problems or need
to complain please call if there is unusual, problems or
need to complain please call abnormal problems or
need to complain
</text>
<view class="logistics_step_time">2020.12.13 23:54:12</view>
</view>
<view class="logistics_step">
<text>
【cotton town, Shantou】your bunny, Xiao Zhang,has
been picked up. If you have any unusual problems
or need to complain, please call 12563555
</text>
<view class="logistics_step_time">2020.12.13 23:54:12</view>
</view>
<view class="logistics_step">
<text>
The order is confirmed, the merchant has been order
informed of the distribution
</text>
<view class="logistics_step_time">2020.12.13 23:54:12</view>
</view>
<view class="logistics_step">
<text>
You have submitted your order, please wait for
system confirmation
</text>
<view class="logistics_step_time">2020.12.13 23:54:12</view>
<view class="logistics_step " v-for="(item,index) in list.records" :key="index" :class="index==0?'step_active':''">
<text>{{item.context}}</text>
<view class="logistics_step_time">{{item.time}}</view>
</view>
</view>
</view>
</template>
<script>
import {defaultRequest2} from '../../api/index.js'
export default {
data() {
return {
active: 0,
query:{
_action:'getlogisticsinfo',
order_id:'',
order_sn:''
},
list:[]
}
},
methods:{
getList(){
defaultRequest2(this.query).then(res=>{
console.info(res)
if(res.error==0){
this.list=res.data[0]
}
})
}
},
onLoad(e) {
this.query.order_id=e.order_id
this.getList()
}
}
</script>

77
pages/order/paySuccess.vue
View File

@ -5,21 +5,23 @@
<text class="success_title">Payment is successful</text>
<view>
This order will be rewarded with
<text class="success_span">10 points</text>
<text class="success_span">{{will_get_integral}} points</text>
after receipt.
</view>
<view class="success_button">
<button class="details">Order details</button>
<button class="shop">Continue shopping</button>
<button class="details" @click="goPage">Order details</button>
<button class="shop" @click="goCategory">Continue shopping</button>
</view>
</view>
<view class="recommend">
<view class="recommend_title">RECOMMEND</view>
<view class="recommend_title" >RECOMMEND</view>
<view class="recommend_content">
<view class="recommend_content_item" v-for="(item,index) in 2 " :key="index">
<view class="recommend_content_item_image"></view>
<text>Adidas Yeezy Boost 350 DazzlingBlue Black</text>
<view class="recommend_content_item_pric">US$314.00</view>
<view class="recommend_content_item" v-for="(item,index) in catList " :key="index">
<view class="recommend_content_item_image">
<image :src="item.thumb" mode=""></image>
</view>
<view class="recommend_content_item_image_name">{{item.short_name}}</view>
<view class="recommend_content_item_pric">US${{item.is_promote==0? item.shop_price :item.promote_price}}</view>
</view>
</view>
</view>
@ -30,11 +32,66 @@
export default {
data() {
return {
id:'',
will_get_integral:0,
// 获取该分类的其他商品的请求参数
catQuery:{
_action:'getgoods',
page_index:1,
page_size:10
},
catList:[],
isReachBottom:true,
}
},
methods:{
// 获取的其他商品
getCatList(type){
defaultRequest4(this.catQuery).then(res=>{
console.info(res)
if(res.error==0){
if(res.data){
if(type==0){
this.catList=res.data
}else{
this.catList=this.catList.concat(res.data)
}
}else{
this.isReachBottom=false
uni.showToast({
title: 'No more data yet',
icon:'none'
})
this.catQuery.page_index--
}
}
uni.hideNavigationBarLoading();
})
},
goPage(){
uni.redirectTo({
url: './details?details_index=0&'+'id='+this.id
});
},
goCategory(){
uni.switchTab({
url:'../category/index'
})
}
},
onLoad(e) {
this.id=e.id
this.will_get_integral=e.will_get_integral
this.getCatList(0)
},
// 上拉加载
onReachBottom(){
if(!this.isReachBottom)return
this.catQuery.page_index++
this.getCatList(1)
},
onPullDownRefresh(){
uni.stopPullDownRefresh()
}
}
</script>

3
pages/productDetails/index.vue
View File

@ -593,6 +593,9 @@
this.catQuery.page_index++
this.getCatList(1)
}
},
onPullDownRefresh(){
uni.stopPullDownRefresh()
}
}
</script>

53
pages/shippingCart/index.vue
View File

@ -81,10 +81,12 @@
<view class="recommend">
<view class="recommend_title">RECOMMEND</view>
<view class="recommend_content">
<view class="recommend_content_item" v-for="(item,index) in 4 " :key="index">
<view class="recommend_content_item_image"></view>
<text>Adidas Yeezy Boost 350 DazzlingBlue Black</text>
<view class="recommend_content_item_pric">US$314.00</view>
<view class="recommend_content_item" v-for="(item,index) in catList " :key="index">
<view class="recommend_content_item_image">
<image :src="item.thumb" mode=""></image>
</view>
<view class="recommend_content_item_image_name">{{item.short_name}}</view>
<view class="recommend_content_item_pric">US${{item.is_promote==0? item.shop_price :item.promote_price}}</view>
</view>
</view>
</view>
@ -121,10 +123,41 @@
all_allno:2,
deleteQuery:{
_action:'removecart'
}
},
// 获取该分类的其他商品的请求参数
catQuery:{
_action:'getgoods',
page_index:1,
page_size:10
},
catList:[],
isReachBottom:true,
}
},
methods:{
// 获取的其他商品
getCatList(type){
defaultRequest4(this.catQuery).then(res=>{
console.info(res)
if(res.error==0){
if(res.data){
if(type==0){
this.catList=res.data
}else{
this.catList=this.catList.concat(res.data)
}
}else{
this.isReachBottom=false
uni.showToast({
title: 'No more data yet',
icon:'none'
})
this.catQuery.page_index--
}
}
uni.hideNavigationBarLoading();
})
},
// 修改商品数量
updateCart(e,id){
let data={_action:'updatecart',rec_id:id,goods_number:e}
@ -263,9 +296,19 @@
onShow() {
uni.hideTabBar()
this.getList()
this.getCatList(0)
},
onHide(){
uni.showTabBar()
},
// 上拉加载
onReachBottom(){
if(!this.isReachBottom)return
this.catQuery.page_index++
this.getCatList(1)
},
onPullDownRefresh(){
uni.stopPullDownRefresh()
}
}

Write Preview
Loading…
Cancel
Save