邓平艺 4 years ago
parent
commit
089c6ce331
  1. 2
      pages/index/index.vue
  2. 185
      pages/order/confirm-order.vue
  3. 3
      pages/order/index.vue
  4. 157
      pages/order/order-details.vue
  5. 7
      pages/order/pay-success.vue
  6. 105
      pages/order/unpay-details.vue
  7. BIN
      static/center/collect.png
  8. BIN
      static/center/loginout.png
  9. BIN
      static/center/problem.png
  10. BIN
      static/center/scan.png
  11. BIN
      static/center/service.png
  12. BIN
      static/center/suggestion.png

2
pages/index/index.vue

@ -184,7 +184,7 @@
overflow: hidden;
margin: 20rpx 32rpx;
background-color: #FFFFFF;
box-shadow:0 0 10px 5px #e5e5e5;
box-shadow: 0 10rpx 20rpx 0 rgba(0, 0, 0, 0.1);
align-items: flex-start;
.left{
overflow: hidden;

185
pages/order/confirm-order.vue

@ -1,76 +1,79 @@
<template>
<view>
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<block v-if="isRight(orderDetails)">
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image v-if="orderDetails.goods.cover" :src="orderDetails.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
{{orderDetails.goods.name}}
</view>
<view class="flex justify-between">
<text class="block margin-top-sm text-gray text-sm">数量</text>
<view class="flex align-center margin-top-sm">
<text class="cuIcon-move" @tap="reduce"></text>
<input type="number" v-model="num" class="text-center margin-lr-sm radius" style="width: 60rpx; height: 50rpx;background-color: #f7f7fb;" />
<text class="cuIcon-add" @tap="add"></text>
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image :src="orderDetails.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
{{orderDetails.goods.name}}
</view>
<view class="flex justify-between">
<text class="block margin-top-sm text-gray text-sm">数量</text>
<view class="flex align-center margin-top-sm">
<text class="cuIcon-move" @tap="reduce"></text>
<input type="number" v-model="num" class="text-center margin-lr-sm radius" style="width: 60rpx; height: 50rpx;background-color: #f7f7fb;" />
<text class="cuIcon-add" @tap="add"></text>
</view>
</view>
</view>
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
{{Number(orderDetails.goods.specs[0].selling_price || 0)}}
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
{{Number(orderDetails.goods.specs[0].selling_price || 0)}}
</view>
<!-- <view>
<button v-if="true" class="cu-btn line-orange round margin-left-sm text-sm">申请退款</button>
<button v-else class="cu-btn line-gray bg-gray round margin-left-sm text-sm">退款中</button>
</view> -->
</view>
<!-- <view>
<button v-if="true" class="cu-btn line-orange round margin-left-sm text-sm">申请退款</button>
<button v-else class="cu-btn line-gray bg-gray round margin-left-sm text-sm">退款中</button>
</view> -->
</view>
</view>
</view>
</skeleton>
</view>
<self-line/>
<skeleton :loading="skeletonLoading" :row="1" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text>暂无优惠</text>
</view>
</skeleton>
</view>
</skeleton>
<self-line/>
<skeleton :loading="skeletonLoading" :row="13" :showAvatar="false" :showTitle="true">
<view class="btn-bottom">
<view class="padding flex justify-around align-center" v-if="orderDetails.agreement.tips">
<checkbox-group class="block" @change="CheckboxChange">
<view class="margin-right">
<checkbox @change="CheckboxChange" :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox>
</view>
</checkbox-group>
<view class="text-sm text-gray">{{orderDetails.agreement.tips}}</view>
<self-line/>
<skeleton :loading="skeletonLoading" :row="1" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text>暂无优惠</text>
</view>
</view>
<self-line/>
<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top shadow">
<view class="flex align-center">
<text class="">应付款</text>
<view class="text-lg text-price text-red">
{{Number(orderDetails.goods.specs[0].selling_price*num || 0)}}
</skeleton>
<self-line/>
<skeleton :loading="skeletonLoading" :row="13" :showAvatar="false" :showTitle="true">
<view class="btn-bottom">
<view class="padding flex justify-around align-center" v-if="orderDetails.agreement.tips">
<checkbox-group class="block" @change="CheckboxChange">
<view class="margin-right">
<checkbox @change="CheckboxChange" :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox>
</view>
</checkbox-group>
<view class="text-sm text-gray">{{orderDetails.agreement.tips}}</view>
</view>
<self-line/>
<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top shadow">
<view class="flex align-center">
<text class="">应付款</text>
<view class="text-lg text-price text-red">
{{Number(orderDetails.goods.specs[0].selling_price*num || 0)}}
</view>
</view>
<button class="cu-btn block bg-orange round shadow" @tap="submit">
<text class="cuIcon-loading2 cuIconfont-spin margin-right-xs text-white" v-if="loading"></text>
<text class="text-df text-white">{{ loading ? '支付中...' : '下单付款' }}</text>
</button>
</view>
<button class="cu-btn block bg-orange round shadow" @tap="submit">
<text class="cuIcon-loading2 cuIconfont-spin margin-right-xs text-white" v-if="loading"></text>
<text class="text-df text-white">{{ loading ? '支付中...' : '下单付款' }}</text>
</button>
</view>
</view>
</skeleton>
</skeleton>
</block>
</view>
</template>
@ -89,12 +92,18 @@
goods_id: 1,
goods_specs_id: 1,
orderDetails: {},
ifchoose: true
ifchoose: true,
ifCheck: true
}
},
computed: {
total(){
return this.num * this.price
},
isRight(){
return function(val){
return this.$shared.isRight(val);
}
}
},
onLoad(e) {
@ -107,6 +116,11 @@
if(res.code == 0) {
this.orderDetails = res.data
this.skeletonLoading = false
if( Object.keys(res.metal_data).length != 0 ) {
this.ifCheck = false
}else {
this.ifCheck = true
}
}else {
this.$msg(res.msg)
}
@ -136,39 +150,34 @@
},
submit(){
if(this.ifchoose == true) {
this.$http(this.API.API_PRPAID, {
goods_id: this.goods_id,
goods_specs_id: this.goods_specs_id,
number: this.num,
token: 'fdf12000e774e48bc60c6b6d42055602'
}).then(res => {
console.log(res)
// let nonceStr = res.data.nonceStr
// appId: "wxb35ef055a4dd8ad4"
// nonceStr: "60d3125d138af"
// order_num: "2842855348400816128"
// package: "prepay_id=wx23185213000285e14ea77ac97acc670000"
// paySign: "6DC330CBDF6C29BEDD4D254D9DA97364"
// signType: "MD5"
// timeStamp: "1624445533"
if(this.ifCheck == false) {
this.$routerGo('/pages/login/index?type=phone')
}else {
this.$http(this.API.API_PRPAID, {
goods_id: this.goods_id,
goods_specs_id: this.goods_specs_id,
number: this.num,
token: 'fdf12000e774e48bc60c6b6d42055602'
}).then(res => {
console.log(res)
uni.requestPayment({
orderInfo: res.data.order_num,
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.package,
signType: res.data.signType,
paySign: res.data.paySign,
success: function (res) {
this.$routerGo('/pages/order/pay-success?ifSuccess='+1)
},
fail: function (err) {
this.$routerGo('/pages/order/pay-success?ifSuccess='+2)
}
})
uni.requestPayment({
orderInfo: res.data.order_num,
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.package,
signType: res.data.signType,
paySign: res.data.paySign,
complete: result => {
console.log(result)
}
})
}
})
return
this.$routerGo('/pages/order/pay-success')
}else {
this.$msg('请认真阅读并同意协议!')
return

3
pages/order/index.vue

@ -224,7 +224,8 @@
overflow: hidden;
margin: 20rpx 32rpx;
background-color: #FFFFFF;
box-shadow: 0 0 10px 5px #e5e5e5;
// box-shadow: 0 0 10px 5px #e5e5e5;
box-shadow: 0 10rpx 20rpx 0 rgba(0, 0, 0, 0.1);
align-items: flex-start;
.left {

157
pages/order/order-details.vue

@ -1,99 +1,99 @@
<template>
<view>
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image v-if="orderDetails.goods.cover" :src="orderDetails.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs" v-if="orderDetails.goods.name">
{{orderDetails.goods.name}}
</view>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{orderDetails.number}}</text>
<block v-if="isRight(orderDetails)">
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
{{Number(orderDetails.selling_price || 0)}}
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image v-if="orderDetails.goods.cover" :src="orderDetails.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs" v-if="orderDetails.goods.name">
{{orderDetails.goods.name}}
</view>
<view>
<button v-if="orderDetails.state == 2" class="cu-btn line-orange round margin-left-sm text-sm" @tap="$routerGo('/pages/order/apply-refund')">申请退款</button>
<button v-if="orderDetails.state == 5" class="cu-btn line-gray bg-white border round margin-left-sm text-sm">退款中</button>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{orderDetails.number}}</text>
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
{{Number(orderDetails.selling_price || 0)}}
</view>
<view>
<button v-if="orderDetails.state == 2" class="cu-btn line-orange round margin-left-sm text-sm" @tap="$routerGo('/pages/order/apply-refund')">申请退款</button>
<button v-if="orderDetails.state == 5" class="cu-btn line-gray bg-white border round margin-left-sm text-sm">退款中</button>
</view>
</view>
</view>
</view>
</view>
</skeleton>
</view>
<self-line/>
<!-- 表单 -->
<skeleton :loading="skeletonLoading" :row="16" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单编号</text>
<view>
<text class="margin-right">{{orderDetails.order_sn}}</text>
<text class="text-orange text-sm" @click="copy(orderDetails.order_sn)">复制</text>
</view>
</view>
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">下单时间</text>
<text>{{orderDetails.created_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_at_text != ''">
<text class="text-gray">付款时间</text>
<text>{{orderDetails.payment_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_type != ''">
<text class="text-gray">支付方式</text>
<text>{{orderDetails.payment_type}}</text>
</view>
</skeleton>
</view>
<self-line/>
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text v-if="orderDetails.coupons == null">暂无优惠</text>
<!-- 表单 -->
<skeleton :loading="skeletonLoading" :row="16" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单编号</text>
<view>
<text class="margin-right">{{orderDetails.order_sn}}</text>
<text class="text-orange text-sm" @click="copy(orderDetails.order_sn)">复制</text>
</view>
</view>
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">下单时间</text>
<text>{{orderDetails.created_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_at_text != ''">
<text class="text-gray">付款时间</text>
<text>{{orderDetails.payment_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_type != ''">
<text class="text-gray">支付方式</text>
<text>{{orderDetails.payment_type}}</text>
</view>
</view>
</view>
<view>
<self-line/>
<view class="bg-white flex flex-direction justify-around align-center text-center padding-tb">
<view>
<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="140" unit="px" background="#fff" foreground="#000"
pdground="#000" :onval="true" :loadMake="true" />
<!-- :icon="require('@/static/images/system/user-default.jpg')" -->
</view>
<view class="flex justify-around align-center text-center margin-top-sm">
<view @tap="refreshCode()">
<image class="margin-right" src="@/static/images/system/refresh.png" mode="widthFix" style="width: 20px;height: 20px;"></image>
</view>
<view class="text-lg">{{checkArea}}</view>
<view class="text-orange text-sm margin-left" @tap="copy('SP738644872')">复制</view>
</view>
<view class="margin-top-sm text-green text-sm">
待使用
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text v-if="orderDetails.coupons == null">暂无优惠</text>
</view>
</view>
<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top">
<view class="flex align-center">
<text class="text-gray text-sm">已付款</text>
<view class="text-lg text-price text-red">
{{Number(orderDetails.amount || 0)}}
<view>
<self-line/>
<view class="bg-white flex flex-direction justify-around align-center text-center padding-tb">
<view>
<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="140" unit="px" background="#fff" foreground="#000"
pdground="#000" :onval="true" :loadMake="true" />
<!-- :icon="require('@/static/images/system/user-default.jpg')" -->
</view>
<view class="flex justify-around align-center text-center margin-top-sm">
<view @tap="refreshCode()">
<image class="margin-right" src="@/static/images/system/refresh.png" mode="widthFix" style="width: 20px;height: 20px;"></image>
</view>
<view class="text-lg">{{checkArea}}</view>
<view class="text-orange text-sm margin-left" @tap="copy('SP738644872')">复制</view>
</view>
<view class="margin-top-sm text-green text-sm">
待使用
</view>
</view>
<view>
{{orderDetails.state_text.text}}
<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top">
<view class="flex align-center">
<text class="text-gray text-sm">已付款</text>
<view class="text-lg text-price text-red">
{{Number(orderDetails.amount || 0)}}
</view>
</view>
<view>
{{orderDetails.state_text.text}}
</view>
</view>
</view>
</view>
</skeleton>
</skeleton>
</block>
</view>
</template>
@ -116,6 +116,11 @@
computed: {
total(){
return this.num * this.price
},
isRight(){
return function(val){
return this.$shared.isRight(val);
}
}
},
onLoad(e) {

7
pages/order/pay-success.vue

@ -1,6 +1,6 @@
<template>
<view>
<view v-if="false" class="flex flex-direction justify-around text-center align-center margin-bottom margin-top-lg">
<view v-if="ifpaySuccess==1" class="flex flex-direction justify-around text-center align-center margin-bottom margin-top-lg">
<view>
<image src="@/static/images/system/paysuccess.png" mode="widthFix" style="height: 100px;width: 100px;"></image>
</view>
@ -37,7 +37,7 @@
export default {
data() {
return {
ifpaySuccess:1
}
},
methods: {
@ -46,6 +46,9 @@
url: '/pages/order/index'
})
}
},
onLoad(e) {
this.ifpaySuccess = e.ifSuccess
}
}
</script>

105
pages/order/unpay-details.vue

@ -1,66 +1,68 @@
<template>
<view>
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image v-if="orderDetails.goods.cover" :src="orderDetails.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs" v-if="orderDetails.goods.name">
{{orderDetails.goods.name}}
</view>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{orderDetails.number}}</text>
<block v-if="isRight(orderDetails)">
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<amount :value="Number(orderDetails.selling_price || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image v-if="orderDetails.goods.cover" :src="orderDetails.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs" v-if="orderDetails.goods.name">
{{orderDetails.goods.name}}
</view>
<view>
<button v-if="orderDetails.state == 2" class="cu-btn line-orange round margin-left-sm text-sm" @tap="$routerGo('/pages/order/apply-refund')">申请退款</button>
<button v-if="orderDetails.state == 5" class="cu-btn line-gray bg-white border round margin-left-sm text-sm">退款中</button>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{orderDetails.number}}</text>
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<amount :value="Number(orderDetails.selling_price || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
<view>
<button v-if="orderDetails.state == 2" class="cu-btn line-orange round margin-left-sm text-sm" @tap="$routerGo('/pages/order/apply-refund')">申请退款</button>
<button v-if="orderDetails.state == 5" class="cu-btn line-gray bg-white border round margin-left-sm text-sm">退款中</button>
</view>
</view>
</view>
</view>
</view>
</skeleton>
</view>
</skeleton>
</view>
<self-line/>
<!-- 表单 -->
<skeleton :loading="skeletonLoading" :row="10" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单编号</text>
<view>
<text class="margin-right">{{orderDetails.order_sn}}</text>
<text class="text-orange text-sm" @click="copy(orderDetails.order_sn)">复制</text>
<self-line/>
<!-- 表单 -->
<skeleton :loading="skeletonLoading" :row="10" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单编号</text>
<view>
<text class="margin-right">{{orderDetails.order_sn}}</text>
<text class="text-orange text-sm" @click="copy(orderDetails.order_sn)">复制</text>
</view>
</view>
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">下单时间</text>
<text>{{orderDetails.created_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_at_text != ''">
<text class="text-gray">付款时间</text>
<text>{{orderDetails.payment_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_type != ''">
<text class="text-gray">支付方式</text>
<text>{{orderDetails.payment_type}}</text>
</view>
</view>
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">下单时间</text>
<text>{{orderDetails.created_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_at_text != ''">
<text class="text-gray">付款时间</text>
<text>{{orderDetails.payment_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_type != ''">
<text class="text-gray">支付方式</text>
<text>{{orderDetails.payment_type}}</text>
</view>
</view>
<self-line/>
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text v-if="orderDetails.coupons == null">暂无优惠</text>
<self-line/>
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text v-if="orderDetails.coupons == null">暂无优惠</text>
</view>
</view>
</view>
</skeleton>
</skeleton>
</block>
</view>
</template>
@ -78,6 +80,11 @@
computed: {
total(){
return this.num * this.price
},
isRight(){
return function(val){
return this.$shared.isRight(val);
}
}
},
onLoad(e) {

BIN
static/center/collect.png

After

Width: 75  |  Height: 75  |  Size: 2.4 KiB

BIN
static/center/loginout.png

After

Width: 75  |  Height: 75  |  Size: 2.3 KiB

BIN
static/center/problem.png

After

Width: 75  |  Height: 75  |  Size: 2.7 KiB

BIN
static/center/scan.png

After

Width: 60  |  Height: 60  |  Size: 904 B

BIN
static/center/service.png

After

Width: 75  |  Height: 75  |  Size: 2.3 KiB

BIN
static/center/suggestion.png

After

Width: 75  |  Height: 75  |  Size: 1.8 KiB

Loading…
Cancel
Save