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
assets/css/v12-style.less
+21 -7
View File
@@ -59,13 +59,18 @@ each(@colors, {
margin-bottom: @baseNum;
}
.v12-ma-@{i} {
margin: @baseNum;
margin-left: @baseNum;
margin-right: @baseNum;
margin-bottom: @baseNum;
margin-top: @baseNum;
}
.v12-mx-@{i} {
margin: 0 @baseNum;
margin-left: @baseNum;
margin-right: @baseNum;
}
.v12-my-@{i} {
margin: @baseNum 0;
margin-bottom: @baseNum;
margin-top: @baseNum;
}
.v12-pt-@{i} {
padding-top: @baseNum;
@@ -80,13 +85,18 @@ each(@colors, {
padding-bottom: @baseNum;
}
.v12-pa-@{i} {
padding: @baseNum;
padding-top: @baseNum;
padding-bottom: @baseNum;
padding-right: @baseNum;
padding-left: @baseNum;
}
.v12-px-@{i} {
padding: 0 @baseNum
padding-right: @baseNum;
padding-left: @baseNum;
}
.v12-py-@{i} {
padding: @baseNum 0
padding-top: @baseNum;
padding-bottom: @baseNum;
}
.generateMarginAndPadding(@n, (@i + 1))
}
@@ -133,7 +143,11 @@ each(@colors, {
}
.v12-justify-start{
display: flex;
justify-content: start;
justify-content: flex-start;
}
.v12-justify-end{
display: flex;
justify-content: flex-end;
}
.v12-d-grid-columns-2 {
display: grid;
components/CouponsPopup.vue
+4 -2
View File
@@ -61,7 +61,8 @@ export default {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
current: 0,
couponId: uni.getStorageSync('couponId') || 0
couponId: uni.getStorageSync('couponId') || 0,
selectItem: {}
}
},
computed: {
@@ -88,6 +89,7 @@ export default {
},
selectCoupon(id) {
this.couponId = id
this.selectItem = this.list.find(e => e.id === id)
this.list.map(item => {
item.checked = id === item.id
})
@@ -95,7 +97,7 @@ export default {
setCoupon() {
if (this.current === 1) return
uni.setStorageSync('couponId', this.couponId)
this.$emit('change')
this.$emit('change', this.selectItem || {})
}
}
}
components/OrderGoods.vue
+22 -12
View File
@@ -2,43 +2,43 @@
<view class="orderGoods">
<view
v-if="title.length > 0"
class="total acea-row row-middle"
class="v12-pa-3 acea-row row-middle"
>
<view
style="position: relative;"
class="acea-row row-left row-middle"
>
<image
<!-- <image
style="width: 32rpx;height: 32rpx;margin-right: 12rpx;"
src="http://admin-api.xdd618.com/file/pic/20210807230759738342.png" mode=""
/>
<text class="title">
/> -->
<text class="title v12-font-32">
{{ title }}
</text>
</view>
</view>
<view
v-else
class="total"
class=""
>共{{ cartInfo.length }}件商品</view>
<view class="goodWrapper">
<view
v-for="cart in cartInfo"
:key="cart.id"
class="item acea-row row-between-wrapper"
style="flex-wrap: nowrap;"
style="flex-wrap: nowrap; border:none"
>
<view class="pictrue" style="margin-right: 20rpx;">
<image :src="cart.productInfo.image" class="image" />
</view>
<view class="text">
<view class="text" style="height: 100%;justify-content: space-between;">
<view class="acea-row row-between-wrapper">
<view class="name line1 one-t">{{ cart.productInfo.storeName }}</view>
<view class="name line1 one-t v12-font-bold">{{ cart.productInfo.storeName }}</view>
</view>
<view class="acea-row row-middle row-between attr-wrap">
<view
v-if="cart.productInfo.attrInfo"
class="attr more-t"
class="more-t v12-font-24 v12-secondary-dark-text"
>
规格：{{ cart.productInfo.attrInfo.sku }}
</view>
@@ -49,8 +49,12 @@
>评价</view>
</view>
<view class="money font-color-lightred acea-row row-between">
<text>￥{{ cart.truePrice }}</text>
<text class="num">x{{ cart.cartNum }}</text>
<view class="v12-font-bold">
<text class="v12-font-28 v12-dark-text">应付：</text>
<text class="v12-font-22">￥</text>
<text class="v12-primary-text v12-font-28">{{ cart.truePrice }}</text>
</view>
<text class="num v12-dark-text">x{{ cart.cartNum }}</text>
</view>
</view>
</view>
@@ -86,6 +90,12 @@ export default {
};
</script>
<style scoped>
.orderGoods{
border-radius: 20rpx 20rpx 0 0;
}
.item{
height: 160rpx !important;
}
.title{
font-size:26rpx;
color:#080F1A;
@@ -99,10 +109,10 @@ export default {
display: block;
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
}
.attr-wrap {
position: relative;
min-height: 80rpx;
margin-top: 8rpx;
align-items: flex-start;
}
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)">