liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(提交订单)：UI调整（已完成）

Browse Source
This commit is contained in:
modendeveloper
2024-09-08 15:10:49 +08:00
parent b9b47ef816
commit 22f2e9779a
6 changed files with 215 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/cart.vue
-1
View File
@@ -655,7 +655,6 @@ export default {
submit() {
const ids = this.handleIds()
if (ids.length === 0) return
uni.$emit('chooseAddress1', this.addressInfo)
uni.navigateTo({
url: '/pages/order/OrderSubmission/index?id=' + ids.join(',') + '&address=' + JSON.stringify(this.addressInfo)
})
pages/order/OrderSubmission/index.vue
+167 -103
View File
@@ -3,28 +3,26 @@
<view class="allAddress" style="background-color: #f6f6f6;">
<view
class="address acea-row row-middle"
class="address acea-row v12-align-start"
style="flex-wrap: nowrap;margin: 0 0 30rpx 0;border-radius: 16rpx;"
v-if="shipping_type === 0"
@click="addressTap"
>
<image style="flex-shrink: 0;width: 48rpx;height: 48rpx;margin-right: 20rpx;"
:src="webUrl+'/20230304135530688212.png'" mode=""></image>
<image style="flex-shrink: 0;width: 36rpx;height: 36rpx;margin-right: 20rpx;"
:src="webUrl+'/orderIcon/map.png'" mode=""></image>
<view class="acea-row row-between-wrapper" style="flex-wrap: nowrap;flex-grow: 1;">
<view class="addressCon" v-if="addressInfo.realName">
<view class="name">
{{ addressInfo.realName }}
<text class="phone">{{ addressInfo.phone }}</text>
</view>
<view>
<view class="more-t">
{{ addressInfo.province }}{{ addressInfo.city }}{{ addressInfo.district }}{{ addressInfo.detail }}
</view>
<view class="name v12-font-28 v12-mt-3">
<text>{{ addressInfo.realName }}</text>
<text class="phone">{{ addressInfo.phone }}</text>
</view>
</view>
<view class="addressCon" v-else>
<view class="setaddress">设置收货地址</view>
</view>
<view class="iconfont icon-jiantou" style="flex-shrink: 0;"></view>
</view>
</view>
<div style="flex-wrap: nowrap;" class="address acea-row row-middle" v-else @click="showStoreList">
@@ -47,70 +45,154 @@
</div>
</view>
<OrderGoods :evaluate="0" :cartInfo="orderGroupInfo.cartInfo" title="商品列表"></OrderGoods>
<OrderGoods :evaluate="0" :cartInfo="orderGroupInfo.cartInfo" title="商品信息"></OrderGoods>
<view class="wrapper" style="margin: 30rpx 0;border-radius: 16rpx;">
<view class="wrapper" style="margin:0;border-radius:0 0 20rpx 20rpx">
<view class="item acea-row row-between-wrapper" style="flex-wrap: nowrap;" v-if="shipping_type === 0">
<view class="v12-pa-2 acea-row row-between-wrapper" style="flex-wrap: nowrap;" v-if="shipping_type === 0">
<view class="acea-row row-middle" style="flex-wrap: nowrap;">
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210807230820761721.png'"
mode=""></image>
<text class="">快递费用</text>
<!-- <image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210807230820761721.png'"
mode=""></image> -->
<text class="v12-secondary-dark-text v12-pr-3 v12-text-right" style="width: 140rpx">快递费用</text>
</view>
<view class="discount" style="width: auto !important;">
{{ orderPrice.payPostage > 0 ? force2Decimal(orderPrice.payPostage) : "免运费" }}
<view class="discount v12-secondary-dark-text" style="width: auto !important;">
{{ orderPrice.payPostage > 0 ? force2Decimal(orderPrice.payPostage) : "包邮" }}
</view>
</view>
<view v-else>
<view class="item acea-row row-between-wrapper">
<view>联系人</view>
<view class="v12-pa-2 acea-row row-between-wrapper">
<view class="v12-secondary-dark-text v12-pr-3 v12-text-right" style="width: 140rpx">联系人</view>
<view class="discount">
<input type="text" placeholder="请填写您的联系姓名" v-model="contacts"/>
</view>
</view>
<view class="item acea-row row-between-wrapper">
<view>联系电话</view>
<view class="v12-pa-2 acea-row row-between-wrapper">
<view class="v12-secondary-dark-text v12-pr-3 v12-text-right" style="width: 140rpx">联系电话</view>
<view class="discount">
<input type="text" placeholder="请填写您的联系电话" v-model="contactsTel"/>
</view>
</view>
</view>
<view class="item" style="z-index: -1">
<view class=" v12-pa-2 v12-justify-between " style="z-index: -1;">
<view class="acea-row row-middle">
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210807230836494421.png'"
mode=""></image>
<text class="">备注信息（150字以内)</text>
<!-- <image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210807230836494421.png'"
mode=""></image> -->
<text class="v12-secondary-dark-text v12-pr-3 v12-text-right" style="width: 140rpx;">备注</text>
</view>
<textarea v-model="mark"></textarea>
<textarea v-model="mark" class="mark"></textarea>
</view>
</view>
<view class="wrapper" style="margin: 30rpx 0;border-radius: 16rpx;">
<!-- v12 -->
<view class="v12-mt-3">
<view class="v12-white v12-pa-3 v12-radius-20" >
<view class="v12-justify-between v12-align-center v12-py-1" >
<view class="v12-font-24 v12-dark-text">商品总价：</view>
<view class="v12-secondary-dark-text">
<text class="v12-font-22 ">￥</text>
<text class="v12-font-28">{{ force2Decimal(orderPrice.totalPrice) }}</text>
</view>
</view>
<view class="v12-justify-between v12-align-center v12-py-1" >
<view class="v12-font-24 v12-dark-text">运费</view>
<view class="v12-secondary-dark-text">
<text class="v12-font-22 ">￥</text>
<text class="v12-font-28">{{ force2Decimal(orderPrice.payPostage) }}</text>
</view>
</view>
<view class="v12-justify-between v12-align-center v12-py-1">
<view class="v12-font-24 v12-dark-text v12-align-center">
<text>优惠券</text>
<view class="v12-align-center v12-ml-1" v-if="couponTitle">
<view class="v12-primary-text v12-primary-border v12-font-22 v12-radius-6 v12-px-1">券</view>
<view class="v12-primary-text v12-primary-border v12-font-22 v12-radius-6 v12-px-1">{{ couponTitle }}</view>
</view>
</view>
<view class="v12-justify-between v12-align-center">
<view class="v12-mr-2" @click="changeCoupons">
<text class="v12-dark-text v12-font-24">{{ couponList.usable.length === 0 ? '无' : '去选择' }}</text>
<text class="iconfont icon-jiantou v12-font-24 v12-dark-text"></text>
</view>
<view class="v12-secondary-dark-text">
<text class="v12-font-22 ">-￥</text>
<text class="v12-font-28">{{ force2Decimal(orderPrice.couponPrice) }}</text>
</view>
</view>
</view>
<view class="v12-justify-between v12-align-center v12-py-1">
<view class="v12-font-24 v12-dark-text">积分抵扣</view>
<view class="v12-secondary-dark-text v12-align-center ">
<!-- <view class="v12-mr-2">
<u-switch
v-model="usePointsCheck"
size="14"
@change="usePointsCheckChange"
/>
</view> -->
<view>
<text class="v12-font-22 ">-￥</text>
<text class="v12-font-28">{{ force2Decimal(orderPrice.deductionPrice) }}</text>
</view>
</view>
</view>
</view>
<!-- <view class="coupon-cell">
<view class="flex jc-between ai-center">
<view class="title">积分抵扣：</view>
<view class="flex ai-center">
<u-switch
v-model="usePointsCheck"
size="20"
@change="usePointsCheckChange"
/>
</view>
</view>
<view v-if="usePointsCheck" class="flex jc-between ai-center points-cell">
<view>积分：{{ orderPrice.usedPoints }}</view>
<view class="flex ai-center">
-￥{{ force2Decimal(orderPrice.deductionPrice) }}
</view>
</view>
</view> -->
<!-- <view class="coupon-cell flex jc-between ai-center" @click="changeCoupons">
<view class="title">优惠券：</view>
<view class="flex ai-center">
<text style="color:#999999" v-if="couponList.usable.length===0">无</text>
<view class="flex ai-center" v-else>
<text style="color:#FF564A">{{ couponIndex < 0 ? '去选择' : -couponList.usable[couponIndex].couponPrice }}
</text>
<view class="iconfont icon-jiantou" style="flex-shrink: 0;"></view>
</view>
</view>
</view> -->
</view>
<view class="wrapper" style="margin: 30rpx 0;border-radius: 20rpx;">
<view class="item">
<!-- <view>支付方式</view> -->
<view class="acea-row row-left row-middle">
<view class="acea-row row-middle" style="position: relative;">
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210807230846995104.png'"
mode=""></image>
<text class="pay-method-title">支付方式</text>
<!-- <image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210807230846995104.png'"
mode=""></image> -->
<text class="v12-dark-text v12-font-32 v12-font-bold">支付方式</text>
<!-- <text class="pink-dot"></text> -->
</view>
</view>
<view class="list">
<view class="list" style="margin-top: 0;">
<view
class="payItem acea-row row-middle"
:class="active === 'weixin' ? 'on' : ''"
@click="payItem('weixin')"
v-show="isWeixin"
style="flex-wrap: nowrap;"
@click="payItem('weixin')"
style="flex-wrap: nowrap; margin-top: 0"
>
<view class="name acea-row">
<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view>
<view class="name acea-row v12-font-24">
<!-- <view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view> -->
<image style="flex-shrink: 0;width: 32rpx;height: 32rpx;margin-right: 10rpx;" :src="webUrl+'/orderIcon/微信支付.png'" mode=""></image>
微信支付
</view>
<view class="tip">微信快捷支付</view>
<label class="radio">
<radio style="transform: scale(0.7);" value="" :checked="active === 'weixin'" color="#FF0000"/>
<radio style="transform: scale(0.7);" value="" :checked="active === 'weixin'" color="#C52733"/>
<text></text>
</label>
</view>
@@ -119,15 +201,16 @@
:class="active === 'weixin' ? 'on' : ''"
@click="payItem('weixin')"
v-show="!isWeixin"
style="flex-wrap: nowrap;"
style="flex-wrap: nowrap; margin-top: 10rpx"
>
<view class="name acea-row ">
<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view>
<view class="name acea-row v12-font-24">
<!-- <view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view> -->
<image style="flex-shrink: 0;width: 32rpx;height: 32rpx;margin-right: 10rpx;" :src="webUrl+'/orderIcon/微信支付.png'" mode=""></image>
微信支付
</view>
<view class="tip"></view>
<label class="radio">
<radio style="transform: scale(0.7);" value="" :checked="active === 'weixin'" color="#FF0000"/>
<radio style="transform: scale(0.7);" value="" :checked="active === 'weixin'" color="#C52733"/>
<text></text>
</label>
@@ -138,14 +221,15 @@
@click="payItem('yue')"
style="flex-wrap: nowrap;"
>
<view class="name acea-row ">
<view style="background-color: #007AFF;" class="iconfont icon-icon-test"
:class="active === 'yue' ? 'bounceIn' : ''"></view>
<view class="name acea-row v12-font-24">
<!-- <view style="background-color: #007AFF;" class="iconfont icon-icon-test"
:class="active === 'yue' ? 'bounceIn' : ''"></view> -->
<image style="flex-shrink: 0;width: 32rpx;height: 32rpx;margin-right: 10rpx;" :src="webUrl+'/orderIcon/余额宝.png'" mode=""></image>
余额支付
</view>
<view class="tip">可用余额：{{ userInfo.nowMoney ? force2Decimal(userInfo.nowMoney) : 0.00 }}</view>
<label class="radio">
<radio style="transform: scale(0.7);" value="" :checked="active === 'yue'" color="#FF0000"/>
<radio style="transform: scale(0.7);" value="" :checked="active === 'yue'" color="#C52733"/>
<text></text>
</label>
@@ -153,53 +237,7 @@
</view>
</view>
</view>
<view class="moneyList" style="margin-bottom:30rpx;border-radius: 16rpx;">
<view class="item acea-row row-between-wrapper" v-if="orderPrice.totalPrice !== undefined">
<view>商品总价：</view>
<view class="money">￥{{ force2Decimal(orderPrice.totalPrice) }}</view>
</view>
<view class="item acea-row row-between-wrapper" v-if="orderPrice.payPostage > 0">
<view>运费：</view>
<view class="money">￥{{ force2Decimal(orderPrice.payPostage) }}</view>
</view>
<!-- <view class="item acea-row row-between-wrapper" v-if="orderPrice.couponPrice > 0">
<view>优惠券抵扣：</view>
<view class="money">-￥{{ force2Decimal(orderPrice.couponPrice) }}</view>
</view>
<view class="item acea-row row-between-wrapper" v-if="orderPrice.deductionPrice > 0">
<view>积分抵扣：</view>
<view class="money">-￥{{ force2Decimal(orderPrice.deductionPrice) }}</view>
</view> -->
</view>
<view v-if="canUsePoints" class="coupon-cell">
<view class="flex jc-between ai-center">
<view class="title">积分抵扣：</view>
<view class="flex ai-center">
<u-switch
v-model="usePointsCheck"
size="20"
@change="usePointsCheckChange"
/>
</view>
</view>
<view v-if="usePointsCheck" class="flex jc-between ai-center points-cell">
<view>积分：{{ orderPrice.usedPoints }}</view>
<view class="flex ai-center">
-￥{{ force2Decimal(orderPrice.deductionPrice) }}
</view>
</view>
</view>
<view class="coupon-cell flex jc-between ai-center" @click="changeCoupons">
<view class="title">优惠券：</view>
<view class="flex ai-center">
<text style="color:#999999" v-if="couponList.usable.length===0">无</text>
<view class="flex ai-center" v-else>
<text style="color:#FF564A">{{ couponIndex < 0 ? '去选择' : -couponList.usable[couponIndex].couponPrice }}
</text>
<view class="iconfont icon-jiantou" style="flex-shrink: 0;"></view>
</view>
</view>
</view>
<!-- v9 优惠券开始 -->
<u-popup
@@ -218,14 +256,23 @@
<!-- v9 优惠券结束 -->
<view style="height:80rpx"></view>
<view class="footer acea-row row-between-wrapper" style="height: 80rpx;">
<view style="margin-left: 30rpx;">
<text style="color: #000000;font-size: 24rpx;font-weight: bold;">合计:</text>
<text class="" style="color: #FF564A;font-size: 28rpx;font-weight: bold;">
￥{{ force2Decimal(orderPrice.payPrice) }}
</text>
<view class="footer v12-justify-end v12-px-3" style="height: 120rpx;">
<view class="v12-align-center v12-px-4">
<view class="v12-mr-2">
<view>
<text class="v12-font-28 v12-dark-text v12-mr-2">共{{ total }}件</text>
<text class="v12-font-28 v12-dark-text v12-mr-1">合计:</text>
<text class="v12-font-22 v12-primary-text v12-font-bold">￥</text>
<text class="v12-font-36 v12-primary-text v12-font-bold">{{ force2Decimal(orderPrice.payPrice) }}</text>
</view>
<view class="v12-primary-text v12-font-22 v12-text-right">
<text>共减</text>
<text>￥</text>
<text>{{ force2Decimal(orderPrice.totalPrice - orderPrice.payPrice) }}</text>
</view>
</view>
<view class="v12-primary v12-white-text v12-radius-60 v12-px-3 v12-py-2 v12-font-bold" @click="subscribePay">立即付款</view>
</view>
<view class="settlement acea-row row-middle row-center" @click="subscribePay">立即结算</view>
</view>
<AddressWindow
v-model="showAddress"
@@ -320,7 +367,9 @@ export default {
canUsePoints: false,
// 订单最大可使用积分数量
maxPoints: 0,
pageKeyId: Object.freeze('orderConfirm')
pageKeyId: Object.freeze('orderConfirm'),
total: 0,
couponTitle: ''
};
},
computed: mapGetters(["userInfo", "storeItems"]),
@@ -344,7 +393,6 @@ export default {
//地址切换也要重新计算一下
that.computedPrice('onLoad chooseAddress');
})
console.log(that.$yroute);
if (that.$yroute.query.pinkid !== undefined) {
that.pinkId = that.$yroute.query.pinkid;
}
@@ -399,6 +447,8 @@ export default {
});
} else {
this.orderPrice = data.result;
console.log(this.orderPrice);
if (this.usePointsCheck) {
this.usePointsNumber = data.result.usedPoints
} else {
@@ -438,6 +488,9 @@ export default {
_this.canUsePoints = data.canUsePoints
_this.maxPoints = data.maxPoints
// 如果允许使用积分，则默认开启
_this.total = data.cartInfo.map(i => i.cartNum).reduce((a, b) => {
return a + b
}, 0)
if (data.canUsePoints) {
_this.usePointsCheck = true
_this.usePointsNumber = data.maxPoints
@@ -447,6 +500,8 @@ export default {
} else {
_this.addressInfo = data.addressInfo || {}
}
_this.systemStore = data.systemStore || {}
_this.storeSelfMention = data.storeSelfMention
_this.computedPrice()
@@ -711,16 +766,25 @@ export default {
});
},
// v9-2
changeCoupons() {
changeCoupons(item) {
if (this.couponList.usable.length === 0) return
this.show = !this.show
this.couponId = uni.getStorageSync('couponId') || 0
this.couponTitle = item.couponTitle
},
}
};
</script>
<style scoped lang="less">
.mark{
background: rgba(0,0,0,0.15);
height: 128rpx;
border-radius: 16rpx;
padding: 10px
}
.pink-dot {
width: 24rpx;
height: 24rpx;
@@ -860,7 +924,7 @@ export default {
.order-submission .allAddress .address {
width: 6.91 * 100rpx;
height: 1.5 * 100rpx;
height: 1.8 * 100rpx;
margin: 0 auto;
box-sizing: border-box;
}
pages/user/address/AddressManagement/index.vue
+1 -1
View File
@@ -6,7 +6,7 @@
>
<view style="margin-bottom: 12rpx;" class="line" v-if="addressList.length > 0">
<image :src="webUrl+'/20230304135025917856.png'"/>
<!-- <image :src="webUrl+'/20230304135025917856.png'"/> -->
</view>
<view style="position: relative;" class="item" v-for="(item, addressListIndex) in addressList"
:key="addressListIndex" @click="tapAddress(item)">