<template>
|
<view class="box" v-if="orderInfo">
|
<view class="box-addr">
|
<view class="box-addr-list">
|
<view @click="changeOrderType(0)" :class="receiveType === 0 ? 'box-addr-list-row active' : 'box-addr-list-row'">
|
<image src="/static/icon/ic_wuliu_sel@2x.png" mode="widthFix"></image>
|
<text>物流配送</text>
|
</view>
|
<view @click="changeOrderType(1)" :class="receiveType === 1 ? 'box-addr-list-row active' : 'box-addr-list-row'">
|
<image src="/static/icon/ic_daodian@2x.png" mode="widthFix"></image>
|
<text>门店自提</text>
|
</view>
|
</view>
|
<!-- 物流配送 -->
|
<view class="box-addr-val" v-if="receiveType === 0">
|
<image class="icon1" src="/static/icon/ic_location@2x.png" mode="widthFix"></image>
|
<view class="info" @click="jumpAddr">
|
<template v-if="addr">
|
<view class="info-top">
|
<text>{{addr.name}}</text>
|
<text>{{addr.phone}}</text>
|
</view>
|
<view class="info-bottom">
|
{{addr.areaDetail}}{{addr.addr}}
|
</view>
|
</template>
|
<view class="info-wu" v-else>
|
<text>选择地址</text>
|
<image class="icon2" src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<image class="icon2" src="/static/icon/ic_ar2@2x.png" mode="widthFix" v-if="addr"></image>
|
</view>
|
<!-- 门店自提 -->
|
<template v-if="receiveType === 1">
|
<view class="box-addr-val" @click="openShop">
|
<image class="icon1" src="/static/icon/ic_address@2x1.png" mode="widthFix"></image>
|
<template v-if="shopId">
|
<view class="info">
|
<view class="info-top">
|
<text>{{shopId.name}}</text>
|
</view>
|
<view class="info-bottom">
|
{{shopId.addr}}
|
</view>
|
</view>
|
<image class="icon2" src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
|
</template>
|
<view class="info-wu" v-else>
|
<text>选择门店</text>
|
<image class="icon2" src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="box-addr-time" v-if="shopId">
|
<text>营业时间：</text>
|
<text>{{shopId.startTime}}</text>
|
</view>
|
<view class="box-addr-dz" v-if="shopId">
|
<view class="box-addr-dz-left" @click="show3 = true">
|
<text>联系电话：</text>
|
<text>{{shopId.phone}}</text>
|
</view>
|
<view class="box-addr-dz-r">
|
<image src="/static/icon/ic_address@2x.png" mode="widthFix"></image>
|
<text>{{shopId.distance}}km</text>
|
</view>
|
</view>
|
</template>
|
</view>
|
<view class="box-shop">
|
<view class="item" v-for="(item, index) in orderInfo.goodsCalculateList" :key="index">
|
<view class="item-image">
|
<image :src="item.skuImg" mode="widthFix"></image>
|
</view>
|
<view class="item-info">
|
<view class="item-info-title">{{item.name}}</view>
|
<view class="item-info-bottom">
|
<view class="price">¥{{item.skuAmount}}</view>
|
<view class="num">
|
<!-- <view class="num-add">-</view> -->
|
<view class="num-total">数量：{{item.goodsNum}}</view>
|
<!-- <view class="num-add">+</view> -->
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="xian"></view>
|
<view class="info">
|
<view class="info-item">
|
<view class="info-item-label">商品总价</view>
|
<view class="info-item-price">
|
<text>{{orderInfo.amount}}</text>
|
</view>
|
</view>
|
<view class="info-item">
|
<view class="info-item-label">运费</view>
|
<view class="info-item-price1">¥{{orderInfo.mailAmount}}</view>
|
</view>
|
<view class="info-item">
|
<view class="info-item-label">优惠券</view>
|
<view class="info-item-price1" @click="show = true">
|
-¥{{orderInfo.couponAmount}}
|
<image src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="info-item">
|
<view class="info-item-label">积分抵扣</view>
|
<view class="info-item-price1" @click="show1 = true">
|
-¥{{orderInfo.integralAmount}}
|
<image src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="info-item">
|
<view class="info-item-label" style="color: #222222; font-size: 30rpx; font-weight: 600;">应付款</view>
|
<view class="info-item-price2">
|
<text>{{orderInfo.payAmount}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="remark">
|
<view class="remark-label">订单备注</view>
|
<input type="text" v-model="remark" placeholder="请输入备注" />
|
</view>
|
<view class="play">
|
<view class="play-info">
|
<image src="/static/icon/order_ic_wepay@2x.png" mode="widthFix"></image>
|
<text>微信支付</text>
|
</view>
|
<image src="/static/icon/cart_ic_sel@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="footer">
|
<view class="edit">
|
<view class="edit-btn" @click="payment">立即支付 ¥{{orderInfo.payAmount}}</view>
|
</view>
|
<view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
|
</view>
|
<!-- 优惠券 -->
|
<u-popup :show="show" round="15" :closeable="true" @close="show = false" mode="bottom">
|
<view class="coupon">
|
<view class="coupon-title">选择优惠券</view>
|
<scroll-view scroll-y class="coupon-list">
|
<view class="coupon-list-item" v-for="(item, index) in orderInfo.memberCouponList" :key="index" @click="selectCoupon(index)">
|
<view class="jiage" v-if="item.couponType === 0">
|
<text>{{item.price}}</text>
|
<text>满{{item.limitPrice}}可用</text>
|
</view>
|
<view class="jiage1" v-if="item.couponType === 1">
|
<text>{{item.price}}</text>
|
<text>满{{item.limitPrice}}可用</text>
|
</view>
|
<view class="juaninfo">
|
<view class="juaninfo-info">
|
<text>{{item.name}}</text>
|
<text>{{item.endDate.substring(0, 10)}} 日到期</text>
|
</view>
|
<image src="/static/icon/ic_agree@2x.png" mode="widthFix" v-if="!item.active"></image>
|
<image src="/static/icon/cart_ic_sel@2x.png" mode="widthFix" v-else></image>
|
</view>
|
</view>
|
</scroll-view>
|
<view class="coupon-btn" @click="confirmCoupon">确定</view>
|
</view>
|
</u-popup>
|
<!-- 积分 -->
|
<u-popup :show="show1" round="15" @close="show1 = false" :closeable="true" mode="bottom">
|
<view class="coupon">
|
<view class="coupon-title">使用积分</view>
|
<view class="coupon-content">
|
<view class="coupon-content-a">
|
<text>当前积分：</text>
|
<text>{{orderInfo.surplusIntegral || 0}}</text>
|
</view>
|
<view class="coupon-content-b" @click="useIntegralCopy = useIntegralCopy === 1 ? 0 : 1">
|
<text>本单可用积分：{{orderInfo.deductIntegral}}</text>
|
<image src="/static/icon/ic_agree_sel@2x.png" mode="widthFix" v-if="useIntegralCopy === 1"></image>
|
<image src="/static/icon/ic_agree@2x.png" mode="widthFix" v-else></image>
|
</view>
|
</view>
|
<view class="coupon-btn" @click="confirmJF">确定</view>
|
</view>
|
</u-popup>
|
<!-- 门店 -->
|
<u-popup :show="show2" round="15" @close="show2 = false" :closeable="true" mode="bottom">
|
<view class="coupon">
|
<view class="coupon-title">选择门店</view>
|
<view class="coupon-search" v-if="isPosition">
|
<view class="coupon-search-city" @click="jumpCity">
|
<text>{{cityName}}</text>
|
<u-icon name="arrow-down" color="#999999" size="13"></u-icon>
|
</view>
|
<view class="coupon-search-input">
|
<u-search placeholder="输入门店名称" height="35" searchIconColor="#999999" borderColor="#eeeeee"
|
bgColor="#F9F9FB" :showAction="false" v-model="shopName" @search="getShopLists" />
|
</view>
|
</view>
|
<scroll-view scroll-y>
|
<template v-if="isPosition">
|
<view :class="item.active ? 'dian active' : 'dian'" @click="seleShop(index)" v-for="(item, index) in shopList" :key="index">
|
<view class="dian-top">
|
<view class="dian-top-image">
|
<image :src="item.imgFullUrl" mode="widthFix"></image>
|
</view>
|
<view class="dian-top-info">
|
<view class="dian-top-info-title">
|
<text>{{item.name}}</text>
|
<text>距离{{item.distance}}km</text>
|
</view>
|
<view class="dian-top-info-val">{{item.addr}}</view>
|
</view>
|
</view>
|
<view class="dian-bottom">
|
<text>营业时间：{{item.startTime}}</text>
|
<view class="dian-bottom-icon">
|
<image src="/static/icon/ic_phonecall@2x.png" mode="widthFix" @click="dianhua(item.phone)"></image>
|
<image src="/static/icon/ic_distance@2x.png" mode="widthFix" @click="openLoation(item)"></image>
|
</view>
|
</view>
|
</view>
|
</template>
|
<template v-else>
|
<view class="wushuju">
|
<image src="/static/images/img_dingwei@2x.png" mode="widthFix"></image>
|
<view class="wushuju-a">定位失败</view>
|
<view class="wushuju-b">请开启定位获取位置信息</view>
|
<view class="wushuju-c" @click="goToAppSetting">开启定位</view>
|
</view>
|
</template>
|
</scroll-view>
|
<view class="coupon-btn" v-if="isPosition" @click="confirmMD">确定选择</view>
|
</view>
|
</u-popup>
|
<!-- 联系电话 -->
|
<u-popup :show="show3" round="15" @close="show3 = false" :closeable="true" mode="bottom">
|
<view class="coupon">
|
<view class="coupon-title">联系电话</view>
|
<view class="coupon-phone" @click="dianhua(shopId.phone)">{{shopId.phone}}</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
var QQMapWX = require('@/utils/qqmap-wx-jssdk.js')
|
import { mapState } from 'vuex'
|
export default {
|
computed: {
|
...mapState(['position'])
|
},
|
data() {
|
return {
|
show: false,
|
show1: false,
|
show2: false,
|
show3: false,
|
shopName: '',
|
orderInfo: null,
|
addr: null,
|
remark: '',
|
cityName: '',
|
useIntegralCopy: 0,
|
useIntegral: 0,
|
receiveType: 0,
|
couponId: null,
|
shopId: null,
|
payDetailRequestList: [],
|
shopList: [],
|
isPosition: true,
|
lat: '',
|
lgt: '',
|
};
|
},
|
onLoad(option) {
|
const shop = uni.getStorageSync('shop');
|
if (shop) {
|
this.payDetailRequestList = shop
|
uni.removeStorageSync('shop');
|
}
|
uni.$on('update', (data) => {
|
this.addr = data
|
this.getOrderInfo()
|
})
|
uni.$on('city', (data) => {
|
this.cityName = data
|
this.getShopLists()
|
})
|
this.getDefaultAddr()
|
},
|
methods: {
|
goToAppSetting() {
|
var that = this;
|
uni.openSetting({
|
success: (res) => {
|
if (res.authSetting['scope.userLocation']) {
|
this.isPosition = true
|
that.positioning()
|
}
|
}
|
});
|
},
|
// 定位
|
positioning() {
|
var that = this;
|
uni.getLocation({
|
type: 'gcj02',
|
highAccuracyExpireTime: 3000,
|
isHighAccuracy: true,
|
success: function (addr) {
|
const locParam = { latitude: addr.latitude, longitude: addr.longitude };
|
const qqmapsdk = new QQMapWX({
|
key: 'HEIBZ-QJLLM-SZ36X-6ZBHI-S6Y2J-S6FND'
|
});
|
qqmapsdk.reverseGeocoder({
|
locParam,
|
success: function(res) {
|
that.cityName = res.result.ad_info.city
|
that.lat = res.result.location.lat
|
that.lgt = res.result.location.lng
|
that.getShopLists(1)
|
},
|
fail: (err) => {
|
console.error('获取位置失败===========', err);
|
}
|
});
|
}
|
});
|
},
|
|
jumpCity() {
|
uni.navigateTo({
|
url: '/pages/select-city/select-city'
|
})
|
},
|
openShop() {
|
// 检查用户是否已经授权位置权限
|
uni.getSetting({
|
success: (res) => {
|
if (res.authSetting['scope.userLocation']) {
|
// 用户已授权位置权限
|
this.isPosition = true
|
this.positioning()
|
} else {
|
// 用户未授权位置权限
|
this.isPosition = false
|
this.show2 = true
|
// this.getShopLists(1)
|
}
|
}
|
});
|
},
|
// 打电话
|
dianhua(phoneNumber) {
|
uni.makePhoneCall({
|
phoneNumber
|
})
|
},
|
// 打开位置
|
openLoation(item) {
|
uni.openLocation({
|
latitude: item.latitude,
|
longitude: item.longitude,
|
name: item.name,
|
address: item.addr
|
})
|
},
|
seleShop(index) {
|
this.shopList.forEach((item, i) => {
|
item.active = index === i
|
})
|
},
|
confirmMD() {
|
if (this.shopList.filter(item => item.active).length === 0) return uni.showToast({
|
title: '请选择门店',
|
icon: 'none'
|
})
|
this.shopId = this.shopList.filter(item => item.active)[0]
|
this.show2 = false
|
},
|
// 获取附近门店
|
getShopLists(type) {
|
this.$u.api.getShopList({
|
cityName: this.cityName,
|
lat: this.lat,
|
lgt: this.lng,
|
shopName: this.shopName
|
}).then(res => {
|
if (res.code === 200) {
|
res.data.forEach(item => {
|
item.active = false
|
})
|
this.shopList = res.data
|
if (type === 1) {
|
this.show2 = true
|
}
|
}
|
})
|
},
|
// 支付
|
payment() {
|
var that = this;
|
this.$u.api.orderPay({
|
addressId: this.addr ? this.addr.id : null,
|
couponId: this.couponId,
|
payDetailRequestList: this.payDetailRequestList,
|
receiveType: this.receiveType,
|
useIntegral: this.useIntegral,
|
remark: this.remark,
|
titlePrice: this.orderInfo.payAmount,
|
shopId: this.shopId ? this.shopId.id : null
|
}).then(res => {
|
if (res.code === 200) {
|
// 积分抵扣
|
if (res.data.payType === 1) {
|
// if (this.receiveType === 0) {
|
uni.redirectTo({
|
url: `/pagesA/pages/order-details/order-details?id=${res.data.orderId}&userType=0`
|
})
|
// } else {
|
// uni.reLaunch({
|
// url: `/pages/payment-successful/payment-successful?id=${res.data.orderId}&userType=0`
|
// })
|
// }
|
} else {
|
wx.requestPayment({
|
timeStamp: res.data.response.timeStamp,
|
nonceStr: res.data.response.nonceStr,
|
package: res.data.response.packageValue,
|
signType: res.data.response.signType,
|
paySign: res.data.response.paySign,
|
success (pay) {
|
if (pay.errMsg === "requestPayment:ok") {
|
// if (that.receiveType === 0) {
|
uni.redirectTo({
|
url: `/pagesA/pages/order-details/order-details?id=${res.data.orderId}&userType=0`
|
})
|
// } else {
|
// uni.reLaunch({
|
// url: `/pages/payment-successful/payment-successful?id=${res.data.orderId}&userType=0`
|
// })
|
// }
|
} else {
|
uni.showToast({ title: '订单取消支付', icon: 'none' })
|
}
|
}
|
})
|
}
|
}
|
})
|
},
|
// 确定使用积分
|
confirmJF() {
|
this.useIntegral = this.useIntegralCopy
|
this.show1 = false
|
this.getOrderInfo()
|
},
|
// 确定选择优惠券
|
confirmCoupon() {
|
let arr = this.orderInfo.memberCouponList.filter(item => item.active)
|
if (arr.length > 0) {
|
this.couponId = arr[0].id
|
}
|
this.show = false
|
this.getOrderInfo()
|
},
|
// 选择优惠券
|
selectCoupon(i) {
|
this.orderInfo.memberCouponList.forEach((item, index) => {
|
item.active = index === i
|
})
|
},
|
// 获取订单详细信息
|
getOrderInfo() {
|
this.$u.api.orderPayConfirm({
|
addressId: this.addr ? this.addr.id : null,
|
couponId: this.couponId,
|
payDetailRequestList: this.payDetailRequestList,
|
receiveType: this.receiveType,
|
useIntegral: this.useIntegral
|
}).then(res => {
|
if (res.code === 200) {
|
if (!res.data.memberCouponList) {
|
res.data.memberCouponList = []
|
} else {
|
res.data.memberCouponList.forEach(item => {
|
item.active = false
|
})
|
}
|
this.orderInfo = res.data
|
}
|
})
|
},
|
changeOrderType(type) {
|
this.receiveType = type
|
this.getOrderInfo()
|
},
|
jumpAddr() {
|
uni.navigateTo({
|
url: '/pages/address/address?type=1'
|
})
|
},
|
getDefaultAddr() {
|
this.$u.api.findDefault()
|
.then(res => {
|
if (res.code === 200) {
|
this.addr = res.data
|
this.getOrderInfo()
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style>
|
page {
|
background-color: #F8F9FB;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
.coupon {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
scroll-view {
|
width: 100%;
|
height: 65vh;
|
.wushuju {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
image {
|
width: 140rpx;
|
height: 140rpx;
|
}
|
.wushuju-a {
|
font-weight: 600;
|
font-size: 30rpx;
|
color: #111111;
|
margin-top: 20rpx;
|
}
|
.wushuju-b {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #999999;
|
margin-top: 20rpx;
|
}
|
.wushuju-c {
|
width: 168rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
font-weight: 500;
|
font-size: 26rpx;
|
color: #FFFFFF;
|
text-align: center;
|
background: #004096;
|
border-radius: 44rpx;
|
margin-top: 40rpx;
|
}
|
}
|
.active {
|
border: 2rpx solid #004096 !important;
|
background: #E8F2FF !important;
|
}
|
.dian {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
border-radius: 6rpx;
|
border: 1rpx solid #CCCCCC;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 30rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.dian-top {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
.dian-top-image {
|
flex-shrink: 0;
|
width: 144rpx;
|
height: 144rpx;
|
border-radius: 8rpx;
|
margin-right: 24rpx;
|
image {
|
width: 100%;
|
}
|
}
|
.dian-top-info {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
.dian-top-info-title {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
&:nth-child(1) {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #111111;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #999999;
|
}
|
}
|
}
|
.dian-top-info-val {
|
width: 100%;
|
margin-top: 20rpx;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #777777;
|
}
|
}
|
}
|
.dian-bottom {
|
width: 100%;
|
margin-top: 30rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #777777;
|
}
|
.dian-bottom-icon {
|
display: flex;
|
align-items: center;
|
image {
|
width: 56rpx;
|
height: 56rpx;
|
margin-left: 30rpx;
|
}
|
}
|
}
|
}
|
}
|
.coupon-search {
|
width: 100%;
|
height: 72rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 30rpx;
|
.coupon-search-city {
|
flex-shrink: 0;
|
width: 180rpx;
|
height: 72rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: #F9F9FB;
|
border-radius: 36rpx;
|
border: 1rpx solid #EEEEEE;
|
text {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #222222;
|
margin-right: 4rpx;
|
}
|
}
|
.coupon-search-input {
|
flex: 1;
|
height: 100%;
|
margin-left: 30rpx;
|
}
|
}
|
.coupon-phone {
|
width: 100%;
|
height: 152rpx;
|
line-height: 152rpx;
|
text-align: center;
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #004096;
|
}
|
.coupon-title {
|
width: 100%;
|
height: 100rpx;
|
line-height: 100rpx;
|
text-align: center;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #111111;
|
}
|
.coupon-btn {
|
width: 100%;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
background: #004096;
|
border-radius: 44rpx;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
margin-top: 60rpx;
|
}
|
.coupon-content {
|
width: 100%;
|
.coupon-content-a {
|
width: 100%;
|
margin-top: 40rpx;
|
text {
|
&:nth-child(1) {
|
font-weight: 600;
|
font-size: 28rpx;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-weight: 600;
|
font-size: 28rpx;
|
color: #E4001D;
|
}
|
}
|
}
|
.coupon-content-b {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 40rpx;
|
text {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
image {
|
width: 40rpx;
|
height: 40rpx;
|
}
|
}
|
}
|
.coupon-list {
|
width: 100%;
|
max-height: 600rpx;
|
display: flex;
|
flex-direction: column;
|
.disable {
|
background: #EFEFEF !important;
|
.jiage {
|
text {
|
color: #999999 !important;
|
&::before {
|
color: #999999 !important;
|
}
|
}
|
}
|
.juaninfo {
|
.juaninfo-info {
|
text {
|
color: #999999 !important;
|
}
|
}
|
}
|
}
|
.coupon-list-item {
|
width: 100%;
|
height: 170rpx;
|
background: #FFEFEF;
|
border-radius: 16rpx;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.jiage {
|
flex-shrink: 0;
|
width: 208rpx;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
border-right: 1rpx dashed #E3C1C1;
|
text {
|
&:nth-child(1) {
|
font-weight: 600;
|
font-size: 44rpx;
|
color: #E4001D;
|
&::before {
|
content: '￥';
|
font-weight: 600;
|
font-size: 24rpx;
|
color: #E4001D;
|
}
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #E93047;
|
margin-top: 8rpx;
|
}
|
}
|
}
|
.jiage1 {
|
flex-shrink: 0;
|
width: 208rpx;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
border-right: 1rpx dashed #E3C1C1;
|
text {
|
&:nth-child(1) {
|
font-weight: 600;
|
font-size: 44rpx;
|
color: #E4001D;
|
&::after {
|
content: '折';
|
font-weight: 600;
|
font-size: 24rpx;
|
color: #E4001D;
|
}
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #E93047;
|
margin-top: 8rpx;
|
}
|
}
|
}
|
.juaninfo {
|
flex: 1;
|
height: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
image {
|
flex-shrink: 0;
|
width: 40rpx;
|
height: 40rpx;
|
margin-left: 30rpx;
|
}
|
.juaninfo-info {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
text {
|
&:nth-child(1) {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #777777;
|
margin-top: 12rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.footer {
|
width: 100%;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(0,0,0,0.06);
|
background-color: #ffffff;
|
height: calc(env(safe-area-inset-bottom) + 108rpx);
|
.edit {
|
width: 100%;
|
height: 108rpx;
|
display: flex;
|
align-items: center;
|
.edit-btn {
|
width: 100%;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
background: #004096;
|
border-radius: 44rpx;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
}
|
}
|
.play {
|
width: 100%;
|
height: 108rpx;
|
background: #FFFFFF;
|
padding: 0 26rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 20rpx;
|
image {
|
width: 40rpx;
|
height: 40rpx;
|
}
|
.play-info {
|
display: flex;
|
align-items: center;
|
image {
|
width: 48rpx;
|
height: 48rpx;
|
margin-right: 16rpx;
|
}
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #111111;
|
}
|
}
|
}
|
.remark {
|
width: 100%;
|
height: 100rpx;
|
display: flex;
|
align-items: center;
|
background: #FFFFFF;
|
margin-top: 20rpx;
|
padding: 0 26rpx;
|
box-sizing: border-box;
|
.remark-label {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
flex-shrink: 0;
|
margin-right: 60rpx;
|
}
|
input {
|
flex: 1;
|
height: 100%;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #111111;
|
text-align: right;
|
}
|
}
|
.box-shop {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
margin-top: 20rpx;
|
background-color: #ffffff;
|
.xian {
|
width: 100%;
|
height: 1rpx;
|
background-color: #ECF0F4;
|
margin-top: 30rpx;
|
}
|
.info {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.info-item {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 30rpx;
|
.info-item-label {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
.info-item-price1 {
|
font-weight: 500;
|
font-size: 28rpx;
|
color: #E4001D;
|
display: flex;
|
align-items: center;
|
image {
|
width: 8rpx;
|
height: 16rpx;
|
margin-left: 10rpx;
|
}
|
}
|
.info-item-price2 {
|
display: flex;
|
align-items: baseline;
|
text {
|
&:nth-child(1) {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #222222;
|
&::before {
|
content: '￥';
|
font-weight: 600;
|
font-size: 28rpx;
|
color: #222222;
|
}
|
}
|
&:nth-child(2) {
|
font-weight: 600;
|
font-size: 28rpx;
|
color: #222222;
|
}
|
}
|
}
|
.info-item-price {
|
display: flex;
|
align-items: baseline;
|
text {
|
&:nth-child(1) {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #222222;
|
&::before {
|
content: '￥';
|
font-weight: 500;
|
font-size: 28rpx;
|
color: #222222;
|
}
|
}
|
&:nth-child(2) {
|
font-weight: 500;
|
font-size: 28rpx;
|
color: #222222;
|
}
|
}
|
}
|
}
|
}
|
.item {
|
width: 100%;
|
height: 144rpx;
|
display: flex;
|
align-items: center;
|
.item-image {
|
flex-shrink: 0;
|
width: 144rpx;
|
height: 144rpx;
|
background: #FFFFFF;
|
border-radius: 8rpx;
|
border: 1rpx solid #EEEEEE;
|
margin-right: 30rpx;
|
image {
|
width: 100%;
|
}
|
}
|
.item-info {
|
flex: 1;
|
height: 144rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.item-info-title {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
.item-info-bottom {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.price {
|
font-weight: 600;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
.num {
|
display: flex;
|
align-items: center;
|
.num-total {
|
margin: 0 32rpx;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #222222;
|
}
|
.num-add {
|
width: 44rpx;
|
height: 44rpx;
|
line-height: 44rpx;
|
text-align: center;
|
background: #FFFFFF;
|
border-radius: 22rpx;
|
border: 1rpx solid #CCCCCC;
|
font-size: 40rpx;
|
color: #979797;
|
}
|
}
|
}
|
}
|
}
|
}
|
.box-addr {
|
width: 100%;
|
padding: 20rpx 0;
|
box-sizing: border-box;
|
.box-addr-list {
|
width: 100%;
|
height: 88rpx;
|
background: #F8F9FB;
|
display: flex;
|
align-items: center;
|
.active {
|
background-color: #ffffff !important;
|
}
|
.box-addr-list-row {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
image {
|
width: 30rpx;
|
height: 30rpx;
|
margin-right: 10rpx;
|
}
|
text {
|
font-weight: 500;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
}
|
}
|
.box-addr-time {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
text {
|
&:nth-child(1) {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #333333;
|
}
|
}
|
}
|
.box-addr-dz {
|
width: 100%;
|
height: 80rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
.box-addr-dz-left {
|
display: flex;
|
align-items: center;
|
text {
|
&:nth-child(1) {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #004096;
|
}
|
}
|
}
|
.box-addr-dz-r {
|
display: flex;
|
align-items: center;
|
image {
|
width: 48rpx;
|
height: 48rpx;
|
margin-right: 12rpx;
|
}
|
text {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #222222;
|
}
|
}
|
}
|
.box-addr-val {
|
width: 100%;
|
padding: 30rpx;
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
.icon1 {
|
flex-shrink: 0;
|
width: 48rpx;
|
height: 48rpx;
|
margin-right: 22rpx;
|
}
|
.info {
|
flex: 1;
|
min-height: 48rpx;
|
display: flex;
|
flex-direction: column;
|
.info-top {
|
display: flex;
|
align-items: center;
|
text {
|
&:nth-child(1) {
|
font-weight: 500;
|
font-size: 30rpx;
|
color: #222222;
|
margin-right: 14rpx;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
}
|
}
|
}
|
.info-bottom {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #333333;
|
margin-top: 14rpx;
|
}
|
.info-wu {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #333333;
|
}
|
image {
|
width: 16rpx;
|
margin: 0 !important;
|
}
|
}
|
}
|
.icon2 {
|
flex-shrink: 0;
|
width: 12rpx;
|
height: 24rpx;
|
margin-left: 40rpx;
|
margin-top: 55rpx;
|
}
|
.info-wu {
|
flex: 1;
|
height: 48rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #333333;
|
}
|
image {
|
width: 16rpx;
|
margin: 0 !important;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
