|
|
@@ -1,184 +1,201 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <view class="order-type">
|
|
|
- <view :class="service_type==2?'type-item active':'type-item'" @click="service_type=2">代提</view>
|
|
|
- <view :class="service_type==1?'type-item active':'type-item'" @click="service_type=1">自提</view>
|
|
|
- </view>
|
|
|
- <view class="address" v-if="storeInfo && service_type==2">
|
|
|
- <view class="addressInfo" v-if="addressInfo" @click="toAddress">
|
|
|
- <view class="empty-data">
|
|
|
- <view class="left">
|
|
|
- <view class="contact-name">{{addressInfo.username}} <view class="mobile">{{addressInfo.mobile}}</view></view>
|
|
|
- <view class="desc">{{addressInfo.region}}{{addressInfo.address}}</view>
|
|
|
- </view>
|
|
|
- <view class="right"><image src="/static/image/right.png"></image></view>
|
|
|
+ <view>
|
|
|
+ <view class="order-type">
|
|
|
+ <view :class="service_type==2?'type-item active':'type-item'" @click="service_type=2">代提</view>
|
|
|
+ <view :class="service_type==1?'type-item active':'type-item'" @click="service_type=1">自提</view>
|
|
|
+ </view>
|
|
|
+ <view class="order-content" v-if="goodsInfo">
|
|
|
+ <view class="address" v-if="storeInfo && service_type==2">
|
|
|
+ <view class="addressInfo" v-if="addressInfo" @click="toAddress">
|
|
|
+ <view class="empty-data">
|
|
|
+ <view class="icon"><image src="/static/image/location.png"></image></view>
|
|
|
+ <view class="left">
|
|
|
+ <view class="region">{{addressInfo.region}}</view>
|
|
|
+ <view class="address">{{addressInfo.address}}</view>
|
|
|
+ <view class="contact-name">{{addressInfo.username}} <view class="mobile">{{addressInfo.mobile}}</view></view>
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/image/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="empty-address" @click="toAddress" v-else>
|
|
|
+ <view class="name">完善会员信息</view>
|
|
|
+ <view class="desc">请先完善会员信息后再进行确认兑换</view>
|
|
|
+ <view class="btn-group"><button class="btn">去完善</button></view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="addressInfo" @click="toAddress" v-else>
|
|
|
- <view class="empty-data">
|
|
|
- <view class="left"><image src="/static/image/location.png"></image></view>
|
|
|
- <view class="name">完善收货地址</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="order-time" v-if="storeInfo && service_type==1" @click="selectTime(1)">
|
|
|
+ <view class="time-icon"><image src="/static/image/time.png"></image></view>
|
|
|
+ <view class="title">
|
|
|
+ <view class="p">预约到店时间</view>
|
|
|
+ <view class="desc" v-if="!timeStr">请选择预计到店服务的时间</view>
|
|
|
+ </view>
|
|
|
+ <view class="msg">
|
|
|
+ {{timeStr?timeStr:'请选择'}}
|
|
|
<view class="right"><image src="/static/image/right.png"></image></view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="goods">
|
|
|
+ <view class="goods-info">
|
|
|
+ <view class="image"><image :src="goodsInfo.goods.product_img"></image></view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="name">{{ goodsInfo.product_name }}</view>
|
|
|
+ <view class="desc">x {{goodsInfo.count}}</view>
|
|
|
+ <view class="desc">有效期至{{goodsInfo.expire_at}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="price">¥{{goodsInfo.order_amount}}</view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="goods-item">
|
|
|
+ <view class="left">商品总额</view>
|
|
|
+ <view class="right">¥{{goodsInfo.order_amount}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="goods-item">
|
|
|
+ <view class="left">商品优惠</view>
|
|
|
+ <view class="right red">¥{{goodsInfo.order_amount}}</view>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <view class="goods_skus" v-if="goodsSku.length > 0">
|
|
|
+ <view class="sku_box" v-for="(item,indx) in goodsSku" :key="indx">
|
|
|
+ <view class="sku_name">
|
|
|
+ {{item.name}}({{item.list.length}}选{{item.num}})<text>点击图片可放大查看</text>
|
|
|
+ <view class="right" @click="clearSku(indx)">清除</view>
|
|
|
+ </view>
|
|
|
+ <view class="sku_list">
|
|
|
+ <view :class="itm.check?'sku_item':'sku_item active'" v-for="(itm,iddx) in item.list" :key="iddx">
|
|
|
+ <view class="img" v-if="itm.img" @click="viewImg(itm.img)"><image :src="itm.img"></image></view>
|
|
|
+ <view class="name" @click="skuCheck(item.name,item.num,indx,iddx)" >{{itm.name}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="location" @click="toDetail">
|
|
|
+ <view class="left">
|
|
|
+ <view class="name">{{poi_name}}</view>
|
|
|
+ <view class="desc"><image src="/static/image/location.png"></image>距您{{juli}}公里</view>
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/image/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="order-msg">
|
|
|
+ <view class="title">订单备注</view>
|
|
|
+ <view class="msg"><textarea class="textarea" placeholder="请输入" v-model="msg" :rows="5"></textarea></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="goods-info" v-else>
|
|
|
+ <u-skeleton
|
|
|
+ rows="3"
|
|
|
+ title
|
|
|
+ loading
|
|
|
+ ></u-skeleton>
|
|
|
</view>
|
|
|
- <view class="location" @click="toDetail">
|
|
|
- <view class="left">
|
|
|
- <view class="name">{{poi_name}}</view>
|
|
|
- <view class="desc"><image src="/static/image/location.png"></image>距您{{juli}}公里</view>
|
|
|
- </view>
|
|
|
- <view class="right"><image src="/static/image/right.png"></image></view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="goods" v-if="goodsInfo">
|
|
|
- <view class="goods-info">
|
|
|
- <view class="image"><image :src="goodsInfo.goods.product_img"></image></view>
|
|
|
- <view class="info">
|
|
|
- <view class="name">{{ goodsInfo.product_name }}</view>
|
|
|
- <view class="desc">x {{goodsInfo.count}}</view>
|
|
|
- <view class="desc">有效期至{{goodsInfo.expire_at}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="goods-item">
|
|
|
- <view class="left">商品总额</view>
|
|
|
- <view class="right">¥{{goodsInfo.order_amount}}</view>
|
|
|
- </view>
|
|
|
- <view class="goods-item">
|
|
|
- <view class="left">商品优惠</view>
|
|
|
- <view class="right red">¥{{goodsInfo.order_amount}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="empty-data" v-else>
|
|
|
- <u-skeleton
|
|
|
- rows="3"
|
|
|
- title
|
|
|
- loading
|
|
|
- ></u-skeleton>
|
|
|
+
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="flx-footer">
|
|
|
+ <view class="footer-btn" v-if="goodsInfo">
|
|
|
+ <view class="price"><text class="desc">已优惠:¥{{goodsInfo.order_amount}},</text>合计<text class="money">¥0.00</text></view>
|
|
|
+ <view class="btn-group"><button :disabled="disabled" @click="submitOrder" class="btn">{{disabled?'处理中...':'确认兑换'}}</button></view>
|
|
|
+ </view>
|
|
|
+ <view class="footer-safe"></view>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="goods_skus" v-if="goodsSku.length > 0">
|
|
|
- <view class="sku_box" v-for="(item,indx) in goodsSku" :key="indx">
|
|
|
- <view class="sku_name">
|
|
|
- {{item.name}}({{item.list.length}}选{{item.num}})
|
|
|
- <view class="right" @click="clearSku(indx)">清除</view>
|
|
|
- </view>
|
|
|
- <view class="sku_list">
|
|
|
- <view :class="itm.check?'sku_item':'sku_item active'" @click="skuCheck(item.name,item.num,indx,iddx)" v-for="(itm,iddx) in item.list" :key="iddx">{{itm.name}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="order-time" v-if="storeInfo && service_type==1">
|
|
|
- <view class="title">预约到店时间</view>
|
|
|
- <view class="msg" @click="selectTime(1)">
|
|
|
- {{timeStr?timeStr:'请选择'}}
|
|
|
- <view class="right"><image src="/static/image/right.png"></image></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="order-msg">
|
|
|
- <view class="title">订单备注</view>
|
|
|
- <view class="msg"><textarea class="textarea" placeholder="请输入" v-model="msg" :rows="5"></textarea></view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="flx-footer">
|
|
|
- <view class="footer-btn">
|
|
|
- <view class="price"><text class="desc">已优惠:¥{{goodsInfo.order_amount}},</text>合计<text class="money">¥0</text></view>
|
|
|
- <view class="btn-group"><button :disabled="disabled" @click="submitOrder" class="btn">{{disabled?'处理中...':'确认兑换'}}</button></view>
|
|
|
- </view>
|
|
|
- <view class="footer-safe"></view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <uni-popup ref="timepopup" type="bottom" borderRadius="10px 10px 0 0" backgroundColor="#F8F8F8">
|
|
|
- <view class="time-select">
|
|
|
- <view class="title">选择时间<view class="close" @click="selectTime(2)"><image src="/static/image/round_close.png"></image></view> </view>
|
|
|
- </view>
|
|
|
- <view class="time-body">
|
|
|
+
|
|
|
+ <uni-popup ref="timepopup" type="bottom" borderRadius="10px 10px 0 0" backgroundColor="#F8F8F8">
|
|
|
+ <view class="time-select">
|
|
|
+ <view class="title">选择时间<view class="close" @click="selectTime(2)"><image src="/static/image/round_close.png"></image></view> </view>
|
|
|
+ </view>
|
|
|
+ <view class="time-body">
|
|
|
<view class="time-left">
|
|
|
<view :class="timeIndex==index?'time-left-item active':'time-left-item'" @click="timeCheck(index)" v-for="(item,index) in timeData">
|
|
|
<view class="name">{{item.day}}</view>
|
|
|
<view class="desc">{{item.week}}</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
<view class="time-right">
|
|
|
<view :class="childIndex==index?'time-right-item active':'time-right-item'" @click="childCheck(index)" v-for="(item,index) in timeChildren">
|
|
|
<view class="name">{{item.display}}</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="time-btn">
|
|
|
- <button class="btn" @click="checkTimeEnd">确认选择</button>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="time-btn">
|
|
|
+ <button class="btn" @click="checkTimeEnd">确认选择</button>
|
|
|
+ </view>
|
|
|
</uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
-var app;
|
|
|
+<script>
|
|
|
+var app;
|
|
|
import * as Api from "@/static/api/order.js";
|
|
|
export default {
|
|
|
data() {
|
|
|
- return {
|
|
|
+ return {
|
|
|
disabled:false,
|
|
|
timeIndex:0,
|
|
|
childIndex:0,
|
|
|
order:"",
|
|
|
poi_name:"",
|
|
|
poi_id:"",
|
|
|
- juli:"",
|
|
|
- goodsInfo:null,
|
|
|
- storeInfo:null,
|
|
|
- timeStr:null,
|
|
|
- timeState:false,
|
|
|
+ juli:"",
|
|
|
+ goodsInfo:null,
|
|
|
+ storeInfo:null,
|
|
|
+ timeStr:null,
|
|
|
+ timeState:false,
|
|
|
timeData:[],
|
|
|
timeChildren:[],
|
|
|
addressInfo:null,
|
|
|
msg:"",
|
|
|
totalData:[],
|
|
|
- goodsSku:[],
|
|
|
+ goodsSku:[],
|
|
|
service_type:2
|
|
|
}
|
|
|
- },
|
|
|
- onLoad({order,poi_id,poi_name,juli}) {
|
|
|
- app = this;
|
|
|
- app.order = order;
|
|
|
- app.poi_id = poi_id;
|
|
|
- app.poi_name = poi_name;
|
|
|
- app.juli = juli;
|
|
|
- app.getOrder();
|
|
|
+ },
|
|
|
+ onLoad({order,poi_id,poi_name,juli}) {
|
|
|
+ app = this;
|
|
|
+ app.order = order;
|
|
|
+ app.poi_id = poi_id;
|
|
|
+ app.poi_name = poi_name;
|
|
|
+ app.juli = juli;
|
|
|
+ app.getOrder();
|
|
|
},
|
|
|
methods: {
|
|
|
+ viewImg(img){
|
|
|
+ uni.previewImage({
|
|
|
+ urls:[img]
|
|
|
+ })
|
|
|
+ },
|
|
|
submitOrder(){
|
|
|
var formData = {};
|
|
|
formData.order = app.order;
|
|
|
formData.poi_id = app.poi_id;
|
|
|
if (app.service_type==2 && app.addressInfo == null) {
|
|
|
- return app.$dialog.showSuccess("请选择会员地址");
|
|
|
+ return app.$dialog.showSuccess("请先完善会员信息");
|
|
|
}
|
|
|
if (app.service_type==1 && app.timeStr == null) {
|
|
|
return app.$dialog.showSuccess("请选择预约时间");
|
|
|
}
|
|
|
- formData.service_type = app.service_type;
|
|
|
+ formData.service_type = app.service_type;
|
|
|
var skuInfo = "",skuState = true;
|
|
|
- if (app.goodsSku.length > 0) {
|
|
|
- app.goodsSku.forEach((item,index)=>{
|
|
|
- var skuCheck = [],skuI = 0;
|
|
|
- skuInfo += item.name+":";
|
|
|
- item.list.forEach((itm,idx)=>{
|
|
|
- if (itm.check==false){
|
|
|
- skuInfo += itm.name+',';
|
|
|
- skuCheck[skuI] = itm.name;
|
|
|
- skuI ++;
|
|
|
- }
|
|
|
- });
|
|
|
- skuInfo = skuInfo.slice(0, -1);
|
|
|
- skuInfo += ";";
|
|
|
- if (item.num > skuCheck.length) {
|
|
|
- app.$dialog.showSuccess("请完善【"+item.name+"】选项");
|
|
|
- skuState = false;
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
+ if (app.goodsSku.length > 0) {
|
|
|
+ app.goodsSku.forEach((item,index)=>{
|
|
|
+ var skuCheck = [],skuI = 0;
|
|
|
+ skuInfo += item.name+":";
|
|
|
+ item.list.forEach((itm,idx)=>{
|
|
|
+ if (itm.check==false){
|
|
|
+ skuInfo += itm.name+',';
|
|
|
+ skuCheck[skuI] = itm.name;
|
|
|
+ skuI ++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ skuInfo = skuInfo.slice(0, -1);
|
|
|
+ skuInfo += ";";
|
|
|
+ if (item.num > skuCheck.length) {
|
|
|
+ app.$dialog.showSuccess("请完善【"+item.name+"】选项");
|
|
|
+ skuState = false;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
if (!skuState) return ;
|
|
|
}
|
|
|
formData.sku = skuInfo;
|
|
|
@@ -197,58 +214,58 @@ export default {
|
|
|
})
|
|
|
});
|
|
|
})
|
|
|
- },
|
|
|
- clearSku(parent){
|
|
|
- app.totalData = [];
|
|
|
- var goodsSku = app.goodsSku;
|
|
|
- goodsSku[parent].list.forEach((item,index) => {
|
|
|
- if (!item.check) {
|
|
|
- item.check = true;
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- skuCheck(name,length,parent,select){
|
|
|
- var goodsSku = app.goodsSku;
|
|
|
- if (length == '1') { // 单选
|
|
|
- goodsSku[parent].list.forEach((item,index) => {
|
|
|
- item.check = true;
|
|
|
- if (index == select) {
|
|
|
- item.check = false;
|
|
|
- app.skuInfo = goodsSku[parent].name+":"+item.name;
|
|
|
- }
|
|
|
- })
|
|
|
- } else { // 多选
|
|
|
- var data = [];
|
|
|
- var checkData = app.skuDataCheck(parent,length);
|
|
|
- goodsSku[parent].list.forEach((item,index) => {
|
|
|
- if (checkData >= length) {
|
|
|
- app.$dialog.showSuccess("清除后可重选~");
|
|
|
- return ;
|
|
|
- }
|
|
|
- if (index == select) {
|
|
|
- if (item.check) {
|
|
|
- data[parent+'_'+index] = item;
|
|
|
- }
|
|
|
- item.check = item.check?false:true;
|
|
|
- app.totalData.push(data)
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- app.goodsSku = goodsSku;
|
|
|
- },
|
|
|
- skuDataCheck(parent,length){
|
|
|
- var dataLen = 0;
|
|
|
- for (let key in app.totalData) {
|
|
|
- if (typeof app.totalData[key] == 'object' || typeof app.totalData[key] == 'array')
|
|
|
- {
|
|
|
- for (let indx in app.totalData[key]) {
|
|
|
- if (indx.includes(parent+"_")) {
|
|
|
- dataLen ++;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- return dataLen;
|
|
|
+ },
|
|
|
+ clearSku(parent){
|
|
|
+ app.totalData = [];
|
|
|
+ var goodsSku = app.goodsSku;
|
|
|
+ goodsSku[parent].list.forEach((item,index) => {
|
|
|
+ if (!item.check) {
|
|
|
+ item.check = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ skuCheck(name,length,parent,select){
|
|
|
+ var goodsSku = app.goodsSku;
|
|
|
+ if (length == '1') { // 单选
|
|
|
+ goodsSku[parent].list.forEach((item,index) => {
|
|
|
+ item.check = true;
|
|
|
+ if (index == select) {
|
|
|
+ item.check = false;
|
|
|
+ app.skuInfo = goodsSku[parent].name+":"+item.name;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else { // 多选
|
|
|
+ var data = [];
|
|
|
+ var checkData = app.skuDataCheck(parent,length);
|
|
|
+ goodsSku[parent].list.forEach((item,index) => {
|
|
|
+ if (checkData >= length) {
|
|
|
+ app.$dialog.showSuccess("清除后可重选~");
|
|
|
+ return ;
|
|
|
+ }
|
|
|
+ if (index == select) {
|
|
|
+ if (item.check) {
|
|
|
+ data[parent+'_'+index] = item;
|
|
|
+ }
|
|
|
+ item.check = item.check?false:true;
|
|
|
+ app.totalData.push(data)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ app.goodsSku = goodsSku;
|
|
|
+ },
|
|
|
+ skuDataCheck(parent,length){
|
|
|
+ var dataLen = 0;
|
|
|
+ for (let key in app.totalData) {
|
|
|
+ if (typeof app.totalData[key] == 'object' || typeof app.totalData[key] == 'array')
|
|
|
+ {
|
|
|
+ for (let indx in app.totalData[key]) {
|
|
|
+ if (indx.includes(parent+"_")) {
|
|
|
+ dataLen ++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return dataLen;
|
|
|
},
|
|
|
checkTimeEnd(){
|
|
|
app.$refs.timepopup.close()
|
|
|
@@ -271,141 +288,164 @@ export default {
|
|
|
uni.navigateTo({
|
|
|
url:"/pages/user/address?type=2"
|
|
|
})
|
|
|
- },
|
|
|
- selectTime(type){
|
|
|
- if (type == 1) {
|
|
|
- app.$refs.timepopup.open()
|
|
|
- }
|
|
|
- if (type == 2) {
|
|
|
- app.$refs.timepopup.close()
|
|
|
- }
|
|
|
- },
|
|
|
- getOrder(){
|
|
|
- Api.detail({"order":app.order}).then((res)=>{
|
|
|
- if (res.code == 0) {
|
|
|
- return app.$dialog.showSuccess(res.msg,"none",function(){
|
|
|
- uni.navigateBack()
|
|
|
- });
|
|
|
- }
|
|
|
- app.goodsInfo = res.data.order;
|
|
|
- app.storeInfo = res.data.store;
|
|
|
+ },
|
|
|
+ selectTime(type){
|
|
|
+ if (type == 1) {
|
|
|
+ app.$refs.timepopup.open()
|
|
|
+ }
|
|
|
+ if (type == 2) {
|
|
|
+ app.$refs.timepopup.close()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getOrder(){
|
|
|
+ Api.detail({"order":app.order}).then((res)=>{
|
|
|
+ if (res.code == 0) {
|
|
|
+ return app.$dialog.showSuccess(res.msg,"none",function(){
|
|
|
+ uni.navigateBack()
|
|
|
+ });
|
|
|
+ }
|
|
|
+ app.goodsInfo = res.data.order;
|
|
|
+ app.storeInfo = res.data.store;
|
|
|
app.timeData = res.data.time
|
|
|
app.timeChildren = app.timeData[0].children
|
|
|
- app.goodsSku = res.data.specs;
|
|
|
- });
|
|
|
- },
|
|
|
- toDetail(){
|
|
|
- uni.navigateTo({
|
|
|
- url:"/pages/order/store?type=1&order="+app.order
|
|
|
- })
|
|
|
+ app.goodsSku = res.data.specs;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toDetail(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:"/pages/order/store?type=1&order="+app.order
|
|
|
+ })
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-page{height: 100vh;overflow: auto;}
|
|
|
-.order-type{height: 80upx;display: flex;align-items: center;line-height: 80upx;background-color: #fff;gap: 20upx;}
|
|
|
-.order-type .type-item{text-align: center;width: 50%;font-size: 32upx;color: #333;position: relative;border-left: 2upx solid #f8f8f8;}
|
|
|
-.order-type .type-item.active{color: #224d7a;font-weight: bold;}
|
|
|
-.order-type .type-item.active::after{content: "";position: absolute;left: 40%;width: 20%;bottom: -5upx;height: 10upx;background-color: #224d7a;}
|
|
|
-.addressInfo{border-top: 8upx solid #224d7a;}
|
|
|
-.addressInfo .empty-data{display: flex;align-items: center;font-size: 28upx;width: 100%;}
|
|
|
-.addressInfo .empty-data .contact-name{display: flex;align-items: center;font-size: 30upx;color: #333;margin-bottom: 20upx;}
|
|
|
-.addressInfo .empty-data .contact-name .mobile{margin-left: 20upx;}
|
|
|
-.addressInfo .empty-data .desc{font-size: 26upx;color: #666;}
|
|
|
-.addressInfo .empty-data .left image{width: 40upx;height: 40upx;margin-right: 20upx;vertical-align: middle;}
|
|
|
-.addressInfo .empty-data .right image{width: 40upx;height: 40upx;vertical-align: middle;}
|
|
|
-.addressInfo .empty-data .right{margin-left: auto;margin-right: 0;}
|
|
|
-.time-body{height: 30vh;display: flex;align-items: center;}
|
|
|
+<style>
|
|
|
+page{background-color: #f2f2f2;}
|
|
|
+.empty-address{text-align: center;box-shadow: 8px 8px 20px 0 rgba(55, 99, 170, .1);background-color: #fff;width: calc(95% - 40upx);margin: 20upx auto;padding: 20upx;border-radius: 20upx;}
|
|
|
+.empty-address .name{font-size: 36upx;font-weight: bold;color: #333;}
|
|
|
+.empty-address .desc{font-size: 26upx;color: #666;margin: 20upx 0;}
|
|
|
+.empty-address .btn-group{text-align: center;display: flex;align-items: center;justify-content: center;}
|
|
|
+.empty-address .btn-group .btn{font-size: 28upx;color: #fff;background-color: #fe2c56;width: 50%;}
|
|
|
+.order-content{overflow: auto;}
|
|
|
+.line{height: 200upx;width: 100%;}
|
|
|
+.order-type{height: 80upx;display: flex;align-items: center;line-height: 80upx;background-color: #fff;gap: 20upx;border-bottom: 2upx solid #f8f8f8;}
|
|
|
+.order-type .type-item{text-align: center;width: 50%;font-size: 32upx;color: #333;position: relative;border-left: 2upx solid #f8f8f8;}
|
|
|
+.order-type .type-item.active{color: #fe2c56;font-weight: bold;}
|
|
|
+.order-type .type-item.active::after{content: "";position: absolute;left: 40%;width: 20%;bottom: -5upx;height: 10upx;background-color: #fe2c56;}
|
|
|
+.addressInfo{}
|
|
|
+.addressInfo .empty-data{display: flex;align-items: center;font-size: 28upx;width: 100%;}
|
|
|
+.addressInfo .empty-data .icon{margin-right: 20upx;}
|
|
|
+.addressInfo .empty-data .icon image{width: 40upx;height: 40upx;}
|
|
|
+.addressInfo .empty-data .region{color: #666;font-size: 28upx;}
|
|
|
+.addressInfo .empty-data .address{color: #333;font-size: 32upx;margin: 10upx 0;}
|
|
|
+.addressInfo .empty-data .contact-name{display: flex;align-items: center;font-size: 28upx;color: #666;margin-bottom: 20upx;}
|
|
|
+.addressInfo .empty-data .contact-name .mobile{margin-left: 20upx;}
|
|
|
+.addressInfo .empty-data .desc{font-size: 26upx;color: #666;}
|
|
|
+.addressInfo .empty-data .left image{width: 40upx;height: 40upx;margin-right: 20upx;vertical-align: middle;}
|
|
|
+.addressInfo .empty-data .right image{width: 40upx;height: 40upx;vertical-align: middle;}
|
|
|
+.addressInfo .empty-data .right{margin-left: auto;margin-right: 0;}
|
|
|
+.time-body{height: 30vh;display: flex;align-items: center;}
|
|
|
.time-body .time-left{width: 30%;background-color: #F5FAFD;height: 100%;overflow-y: auto;}
|
|
|
-
|
|
|
-.time-body .time-left .time-left-item{padding: 10upx;text-align: center;}
|
|
|
-.time-body .time-left .time-left-item.active{background-color: #fff;color: #224d7a;}
|
|
|
-.time-body .time-left .time-left-item.active .name{color: #224d7a;}
|
|
|
-.time-body .time-left .time-left-item.active .desc{color: #224d7a;}
|
|
|
+
|
|
|
+.time-body .time-left .time-left-item{padding: 10upx;text-align: center;}
|
|
|
+.time-body .time-left .time-left-item.active{background-color: #fff;color: #fe2c56;}
|
|
|
+.time-body .time-left .time-left-item.active .name{color: #fe2c56;}
|
|
|
+.time-body .time-left .time-left-item.active .desc{color: #fe2c56;}
|
|
|
.time-body .time-left .time-left-item .name{font-size: 28upx;color: #333;}
|
|
|
.time-body .time-left .time-left-item .desc{font-size: 24upx;color: #666;}
|
|
|
-
|
|
|
-.time-body .time-right{width: calc(70% - 80upx);padding:0 40upx;background-color: #fff;height: 100%;overflow-y: auto;}
|
|
|
+
|
|
|
+.time-body .time-right{width: calc(70% - 80upx);padding:0 40upx;background-color: #fff;height: 100%;overflow-y: auto;}
|
|
|
.time-body .time-right .time-right-item{background-color: #F6FAFD;border: 2upx solid #ccc;height: 66upx;line-height: 66upx;text-align: center;font-size: 28upx;color: #333;margin-top: 20upx;border-radius: 10upx;}
|
|
|
-.time-body .time-right .time-right-item.active{color: #224d7a;border: 2upx solid #224d7a;}
|
|
|
-
|
|
|
-.time-select .title{height: 100upx;line-height: 100upx;display: flex;align-items: center;justify-content: space-between;font-size: 28upx;padding: 0 20upx;font-weight: bold;}
|
|
|
-.time-select image{width: 40upx;height: 40upx;vertical-align: middle;}
|
|
|
-.time-btn{padding: 20upx;}
|
|
|
+.time-body .time-right .time-right-item.active{color: #fe2c56;border: 2upx solid #fe2c56;}
|
|
|
+
|
|
|
+.time-select .title{height: 100upx;line-height: 100upx;display: flex;align-items: center;justify-content: space-between;font-size: 28upx;padding: 0 20upx;font-weight: bold;}
|
|
|
+.time-select image{width: 40upx;height: 40upx;vertical-align: middle;}
|
|
|
+.time-btn{padding: 20upx;}
|
|
|
+
|
|
|
+.location{background-color: #fff;padding: 20upx;width: calc(95% - 40upx);margin: 20upx auto;display: flex;align-items: center;justify-content: space-between;border-radius: 20upx;}
|
|
|
+.location .right image{width: 40upx;height: 40upx;vertical-align: middle;}
|
|
|
+.location .name{font-size: 32upx;color: #333;font-weight: bold;margin-bottom: 20upx;}
|
|
|
+.location .desc{color: #666;font-size: 28upx;display: flex;align-items: center;}
|
|
|
+.location .desc image{width: 40upx;height: 40upx;margin-right: 20upx;}
|
|
|
+.goods,.order-msg,.addressInfo{background-color: #fff;padding: 20upx;width: calc(95% - 40upx);margin: 20upx auto;border-radius: 20upx;}
|
|
|
+.goods .goods-info{display: flex;align-items: center;position: relative;}
|
|
|
+.goods .goods-info .price{color: #fe2c56;font-size: 32upx;font-weight: bold;position: absolute;bottom: 20upx;right: 20upx;}
|
|
|
+.goods .goods-info .info{flex: 1;margin-left: 20upx;}
|
|
|
+.goods .goods-info .image image{width: 160upx;height: 160upx;border-radius: 10upx;}
|
|
|
+.goods .goods-info .name{font-size: 32upx;color: #333;line-height: 46upx;margin-bottom: 15upx;}
|
|
|
+.goods .goods-info .desc{color: #666;font-size: 28upx;line-height: 48upx;}
|
|
|
+.goods .goods-item{display: flex;align-items: center;line-height: 80upx;justify-content: space-between;font-size: 28upx;color: #333;}
|
|
|
+.goods .goods-item .right.red{color: #fe2c56;}
|
|
|
|
|
|
-.location,.order-time{background-color: #fff;border-radius: 20upx;padding: 20upx;width: calc(95% - 40upx);margin: 20upx auto;display: flex;align-items: center;justify-content: space-between;}
|
|
|
-.location .right image{width: 40upx;height: 40upx;vertical-align: middle;}
|
|
|
-.location .name{font-size: 32upx;color: #333;font-weight: bold;margin-bottom: 20upx;}
|
|
|
-.location .desc{color: #666;font-size: 28upx;display: flex;align-items: center;}
|
|
|
-.location .desc image{width: 40upx;height: 40upx;margin-right: 20upx;}
|
|
|
-.goods,.order-msg,.addressInfo{background-color: #fff;border-radius: 20upx;padding: 20upx;width: calc(95% - 40upx);margin: 20upx auto;}
|
|
|
-.goods .goods-info{display: flex;align-items: center;}
|
|
|
-.goods .goods-info .info{flex: 1;margin-left: 20upx;}
|
|
|
-.goods .goods-info .image image{width: 160upx;height: 160upx;}
|
|
|
-.goods .goods-info .name{font-size: 32upx;color: #333;line-height: 46upx;font-weight: bold;margin-bottom: 20upx;}
|
|
|
-.goods .goods-info .desc{color: #666;font-size: 28upx;line-height: 48upx;}
|
|
|
-.goods .goods-item{display: flex;align-items: center;line-height: 80upx;justify-content: space-between;font-size: 28upx;color: #333;}
|
|
|
-.goods .goods-item .right.red{color: #f00;}
|
|
|
-
|
|
|
-.order-time .title{font-size: 28upx;}
|
|
|
-.order-time image{width: 40upx;height: 40upx;vertical-align: middle;}
|
|
|
-.order-time .msg{display: flex;align-items: center;font-size: 28upx;color: #333;}
|
|
|
-
|
|
|
-.order-msg .title{color: #333;font-size: 28upx;border-bottom: 2upx solid #f8f8f8;margin-bottom: 20upx;padding-bottom: 20upx;}
|
|
|
-.order-msg .textarea{width: 100%;height: 100upx;font-size: 28upx;}
|
|
|
-
|
|
|
-.flx-footer{position: fixed;bottom: 0;background-color: #fff;padding: 20upx;border-top: 2upx solid #f8f8f8;left: 0;right: 0;}
|
|
|
-.flx-footer .footer-safe {height: env(safe-area-inset-bottom);width: 100%;}
|
|
|
-.flx-footer .btn,.time-btn .btn{font-size: 28rpx;height: 80upx;border-radius: 10upx;line-height: 80upx;text-align: center;width: 100%;color: #333;background-color: #224d7a;color: #fff;border:2upx solid #224d7a;}
|
|
|
-.flx-footer .btn[disabled],.flx-footer .btn.disabled{background-color: rgba(34, 77, 122, 0.3);}
|
|
|
-.flx-footer .footer-btn{display: flex;align-items: center;justify-content: space-between;}
|
|
|
-.flx-footer .footer-btn text.desc{color: #666;font-size: 24upx;}
|
|
|
-.flx-footer .footer-btn text.money{color: #f00;font-size: 28upx;font-weight: bold;}
|
|
|
+.order-time{background-color: #fff;padding: 20upx;width: calc(95% - 40upx);margin: 20upx auto;display: flex;align-items: center;border-radius: 20upx;}
|
|
|
+.order-time .title{font-size: 28upx;margin-left: 20upx;}
|
|
|
+.order-time .title .p{font-size: 28upx;color: #333;font-weight: bold;}
|
|
|
+.order-time .title .desc{font-size: 24upx;color: #666;margin-top: 10upx;}
|
|
|
+.order-time .time-icon image{width: 40upx;height: 40upx;}
|
|
|
+.order-time .right image{width: 40upx;height: 40upx;vertical-align: middle;}
|
|
|
+.order-time .msg{display: flex;align-items: center;font-size: 28upx;color: #333;margin-left: auto;margin-right: 0;}
|
|
|
+
|
|
|
+.order-msg .title{color: #333;font-size: 32upx;border-bottom: 2upx solid #f8f8f8;margin-bottom: 20upx;padding-bottom: 20upx;font-weight: bold;}
|
|
|
+.order-msg .textarea{width: 100%;height: 100upx;font-size: 28upx;}
|
|
|
+
|
|
|
+.flx-footer{position: fixed;bottom: 0;background-color: #fff;padding: 20upx;border-top: 2upx solid #f8f8f8;left: 0;right: 0;z-index: 99;}
|
|
|
+.flx-footer .footer-safe {height: env(safe-area-inset-bottom);width: 100%;}
|
|
|
+.flx-footer .btn,.time-btn .btn{font-size: 32rpx;height: 80upx;border-radius: 10upx;line-height: 80upx;text-align: center;width: 100%;color: #333;background-color: #fe2c56;color: #fff;border:2upx solid #fe2c56;}
|
|
|
+.flx-footer .btn[disabled],.flx-footer .btn.disabled{background-color: rgba(34, 77, 122, 0.3);}
|
|
|
+.flx-footer .footer-btn{display: flex;align-items: center;justify-content: space-between;}
|
|
|
+.flx-footer .footer-btn text.desc{color: #666;font-size: 28upx;}
|
|
|
+.flx-footer .footer-btn text.money{color: #fe2c56;font-size: 32upx;font-weight: bold;}
|
|
|
.flx-footer .footer-btn .price{color: #333;font-size: 28upx;}
|
|
|
-
|
|
|
-.goods_skus{
|
|
|
+
|
|
|
+.goods_skus{
|
|
|
padding: 20upx 20upx 0 20upx;
|
|
|
- background-color: #fff;border-radius: 20upx;width: calc(95% - 40upx);margin: 0 auto;
|
|
|
-}
|
|
|
-.goods_skus .sku_name{
|
|
|
- font-size: 32upx;
|
|
|
- color: #000;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 60upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.goods_skus .sku_name .right{
|
|
|
- margin-left: auto;
|
|
|
- margin-right: 0;
|
|
|
- font-size: 26upx;
|
|
|
- color: #666;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.goods_skus .sku_name .right image{
|
|
|
- width: 30upx;
|
|
|
- height: 30upx;
|
|
|
- margin-right: 10upx;
|
|
|
-}
|
|
|
-.goods_skus .sku_list{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 10upx 0;
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
-.goods_skus .sku_list .sku_item.active{
|
|
|
- background: linear-gradient(90deg, rgba(34, 77, 122, 1) 0%, rgba(25, 97, 173, 1) 100%);
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-.goods_skus .sku_list .sku_item{
|
|
|
- background-color: #f8f8f8;
|
|
|
- padding: 10upx 20upx;
|
|
|
- margin-right: 20upx;
|
|
|
- margin-bottom: 20upx;
|
|
|
+ background-color: #fff;width: calc(95% - 40upx);margin: 0 auto;
|
|
|
+ border-radius: 20upx;
|
|
|
+}
|
|
|
+.goods_skus .sku_name{
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #000;
|
|
|
+ line-height: 60upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.goods_skus .sku_name text{margin-left: 20upx;color: #666;font-size: 24upx;}
|
|
|
+.goods_skus .sku_name .right{
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: 0;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #666;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.goods_skus .sku_name .right image{
|
|
|
+ width: 30upx;
|
|
|
+ height: 30upx;
|
|
|
+ margin-right: 10upx;
|
|
|
+}
|
|
|
+.goods_skus .sku_list{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10upx 0;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.goods_skus .sku_list .sku_item.active{
|
|
|
+ /* background: linear-gradient(90deg, rgba(254, 44, 86, 1) 0%, rgba(228, 100, 126, 1) 100%); */
|
|
|
+ color: #fe2c56;
|
|
|
+ border: 2upx solid #fe2c56;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.goods_skus .sku_list .sku_item{
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ border: 2upx solid #f8f8f8;
|
|
|
+ padding: 10upx 20upx;
|
|
|
+ margin-right: 20upx;
|
|
|
+ margin-bottom: 20upx;
|
|
|
border-radius: 5upx;
|
|
|
- font-size: 28upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
+.goods_skus .sku_list .sku_item image{width: 50upx;height: 50upx;vertical-align: middle;margin-right: 10upx;}
|
|
|
</style>
|