Files
xk-client-wx/subPackages/my/record-pay.vue
2026-07-28 12:45:56 +08:00

1191 lines
30 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="container safe-area-inset-bottom">
<MessageNotification />
<!-- 物流提示信息有外部配送仓时隐藏顶部文案改在药品行展示 -->
<view class="order-text-tip" v-if="orderText && !hasDeliveryWarehouse">
<text>{{ orderText }}</text>
</view>
<view class="head_cancle" v-if="orderInfo.ProductOrder.status!=0 && orderInfo.ProductOrder.cancel_status==1">
订单已取消
</view>
<!-- 就诊人信息 -->
<view class="head patient-head" v-if="patientInfo && patientInfo.name">
<view class="state">
<text>就诊人</text>
</view>
<view class="name">
{{ patientInfo.name }}
{{ patientInfo.mobile || patientInfo.mobile_tm || '' }}
</view>
</view>
<!-- 快递自提 -->
<view class="_choose" v-if="orderInfo.ProductOrder.status==0&&orderInfo.ProductOrder.is_pay==0 && orderInfo.ProductOrder.cancel_status==0">
<text>配送方式</text>
<view class="_fs" @click="toShowed">
<text>{{wayText}}</text>
<text class="iconfont icon-jiantou1"></text>
<u-action-sheet :list="list" v-model="toshowed" :tips="tips" border-radius="24"
:safe-area-inset-bottom="true" @click="chooseway"></u-action-sheet>
</view>
</view>
<!-- 收货地址 已添加地址 -->
<view class="head" v-if="isshow&&orderInfo.ProductOrder.status==0" @click="toChoose">
<view class="state">
<text>收货地址</text>
<view class="qh">
<view class="iconfont icon-jiantou1"></view>
</view>
</view>
<view class="name" @click="toChoose" v-if="!orderInfo.ProductOrder.address">
请先选择收货地址
</view>
<view class="name" @click="toChoose" v-if="orderInfo.ProductOrder.address">
{{JSON.parse(orderInfo.ProductOrder.address).name || '请先选择收货地址'}}
{{JSON.parse(orderInfo.ProductOrder.address).mobile || ''}}
</view>
<view class="choose_area" v-if="orderInfo.ProductOrder.address">
{{JSON.parse(orderInfo.ProductOrder.address).region || ''}}{{JSON.parse(orderInfo.ProductOrder.address).detail_address || ''}}
</view>
</view>
<!-- 到店自取 -->
<view class="head" v-if="isshowed">
<view class="state">
<text>到店自取</text>
</view>
<view class="name">
{{infoList.store.name}}
{{infoList.store.mobile}}
</view>
<view class="choose_area">
{{infoList.store.position}}
</view>
</view>
<!-- 商品列表 -->
<view class="card">
<!-- 门店 -->
<view class="store"><text class="iconfont icon-mendian"></text>{{infoList.store.name}}</view>
<view class="list" v-if="chinese">
<view class="it" v-for="(item,index) in chinese.list" :key="item.id">
<view class="it_name">{{item.name}}
<text class="it_num" style="margin-left: 8rpx;">x{{item.number}}</text>
</view>
<view class="wh-tip" v-if="hasDeliveryWarehouse && item.delivery_warehouse_name">
该药品由{{ item.delivery_warehouse_name }}配送
</view>
</view>
</view>
<!-- granular -->
<view class="list" v-if="granular">
<view class="it" v-for="(item,index) in granular.list" :key="item.id">
<view class="it_name">{{item.name}}
<text class="it_num" style="margin-left: 8rpx;">x{{item.number}}</text>
</view>
<view class="wh-tip" v-if="hasDeliveryWarehouse && item.delivery_warehouse_name">
该药品由{{ item.delivery_warehouse_name }}配送
</view>
</view>
</view>
<view class="list_west" v-if="west">
<view class="list" v-for="(item,index) in west" :key="item.id">
<view class="img">
<image :src="item.content.image || 'https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk-client-wx/static/empty/gwc.png'" mode=""></image>
</view>
<view class="it">
<view class="it_name">{{item.content.drug_name}}{{item.content.specification}}</view>
<view class="it_info" v-if="canShowUsage(item.content, prescriptionStatus)">
{{item.content.usage}}
</view>
<view class="wh-tip" v-if="hasDeliveryWarehouse && item.delivery_warehouse_name">
该药品由{{ item.delivery_warehouse_name }}配送
</view>
<view
class="instruction-btn"
v-if="canShowInstruction(item.content, prescriptionStatus) && item.content && item.content.instruction"
@click="previewInstruction(item.content.instruction)"
>
<text>查看说明书</text>
</view>
<view class="it_price">
<text>{{item.total_price}}</text>
<view class="it_num">
x{{item.number}}
</view>
</view>
</view>
</view>
</view>
<!-- 数量 -->
<view class="goods">
<view class="good_">
<text>商品总价包含服务费</text>
<text class="price">{{orderInfo.ProductOrder.items_price}}</text>
</view>
<view class="good_">
<text>快递费</text>
<text class="price">{{orderInfo.ProductOrder.trans_expenses}}</text>
</view>
<view class="good_">
<text>诊疗费</text>
<text class="price">{{orderInfo.ProductOrder.treatement_price}}</text>
</view>
<view class="good_">
<text>加工费</text>
<view class="price">
<text v-if="payWay">{{payWay.dosage}} </text>
{{orderInfo.ProductOrder.process_price}}
</view>
</view>
<view class="good_">
<!-- <text>{{orderInfo.ProductOrder.count}}</text> -->
<text>总金额</text>
<view class="total">
合计:
<text class="price">{{orderInfo.ProductOrder.total_pay_price}}</text>
</view>
</view>
</view>
</view>
<!-- 须知 -->
<u-popup v-model="show" :safe-area-inset-bottom="true" mode="bottom" height="68%" border-radius="20"
:closeable="true">
<view class="agreen">
<u-parse :html="contented"></u-parse>
</view>
</u-popup>
<!-- 代煎服务提醒 -->
<view class="umode">
<u-modal v-model="openshow" title="服务提示" :content="content" @confirm="confirm" @cancel="cancel"
:content-style="{color:'#666666',fontSize: '28rpx'}"
:title-style="{color:'#111000',fontWeight: '540',fontSize: '33rpx'}" :show-title="true"
:show-cancel-button="true" confirm-text="我需要" cancel-text="不需要" cancel-color="#F44336"
confirm-color="#536DFE"></u-modal>
</view>
<!-- 物流提示模态框 -->
<view class="umode">
<u-modal
v-model="showOrderTextModal"
title="温馨提示"
:content="modalContent"
:confirm-text="modalConfirmText"
:cancel-text="modalCancelText"
:show-cancel-button="showCancelButton"
:confirm-color="modalConfirmColor"
:cancel-color="modalCancelColor"
@confirm="handleOrderTextConfirm"
@cancel="handleOrderTextCancel"
:content-style="modalContentStyle"
:title-style="modalTitleStyle"
></u-modal>
</view>
<!-- 底部 -->
<view class="footer" v-if="orderInfo.ProductOrder.status==0 && orderInfo.ProductOrder.is_pay==0 && orderInfo.ProductOrder.cancel_status==0">
<button class="to_pay" @click="toPay">立即支付</button>
</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
getaddressList,
getDelivery,
getPayConfig,
getProductInfo,
getUpdateUseWay,
getUseWayPay,
service,
storeInfo,
} from '../../request/api/api'
// 导入 getOrderTextApi 接口方法
import { getOrderTextApi } from '../../request/api/product'
import { getPrescriptionStatusApi } from '../../request/api/order'
import { canShowUsage, canShowInstruction, isPrescriptionApprovedStatus } from '@/common/utils/drug'
export default {
data() {
return {
isshow: true,
isshowed: false,
show: false,
order_no: '',
form: {
check: false
},
contented: `知情同意书`,
orderInfo: {
ProductOrder: {}
}, // 订单
chinese: [],
west: [],
granular: [],
actionList: [],
order_id: "", // 订单id
order_no: "", // 订单编号
p_id: "", // 处方id
originalList: [{
text: '快递到家'
}, {
text: '到店自取'
}],
list: [{
text: '快递到家'
}, {
text: '到店自取'
}],
is_online: 0, // 是否在线复诊 0-否 非0-是
toshowed: false,
tips: {
text: '配送方式',
color: '#111111',
fontSize: 38
},
wayText: "快递到家",
delivery_method: 0, // 快递方式 0 快递 1 自提
content: '', // 弹窗内容
openshow: false, // 弹窗是否展示
is_decoct: 1, // 代煎服务 1确定代煎 0不代煎
infoList: [], // 门店信息
patientInfo: null, // 就诊人信息
payWay: "",
flag: true,
// 新增:物流提示信息
orderText: '本次商品物流配送,由萧康医药提供服务。',
// 新增:物流提示模态框控制
showOrderTextModal: false,
// 新增:模态框配置
modalContent: '',
modalConfirmText: '我知道了',
modalCancelText: '取消支付',
showCancelButton: true,
modalConfirmColor: '#536DFE',
modalCancelColor: '#F44336',
modalContentStyle: {
color: '#666666',
fontSize: '28rpx',
maxHeight: '300rpx',
overflow: 'auto'
},
modalTitleStyle: {
color: '#111000',
fontWeight: '540',
fontSize: '33rpx'
},
prescriptionStatus: false,
}
},
computed: {
// 整单存在任一外部配送仓时:隐藏顶部文案,改在药品行展示
hasDeliveryWarehouse() {
const o = this.orderInfo && this.orderInfo.ProductOrder
if (o && Number(o.has_delivery_warehouse) === 1) {
return true
}
const items = (this.orderInfo && this.orderInfo.ProductOrderItems) || []
for (let i = 0; i < items.length; i++) {
if (Number(items[i].delivery_warehouse_id || 0) > 0) {
return true
}
}
return false
},
},
onLoad(e) {
this.p_id = e.id
// 获取订单提示文本
this.getOrderText();
},
created() {
},
methods: {
canShowUsage,
canShowInstruction,
// 获取订单提示文本(无外部配送仓时才用于顶部与支付弹窗)
getOrderText() {
getOrderTextApi().then((res) => {
if (res.data && res.data.result) {
this.orderText = res.data.result;
this.modalContent = `${res.data.result}\n\n请在确认以上信息后继续支付。`;
}
}).catch(err => {
console.error('获取订单提示失败:', err);
})
},
/**
* 有外部配送仓时支付弹窗用中性文案
*/
refreshPayModalContent() {
if (this.hasDeliveryWarehouse) {
this.modalContent = '请确认配送信息后继续支付。';
} else if (this.orderText) {
this.modalContent = `${this.orderText}\n\n请在确认以上信息后继续支付。`;
}
},
// 物流提示确认 - 用户选择"我知道了"
handleOrderTextConfirm() {
this.showOrderTextModal = false;
// 用户点击"我知道了"后,继续执行支付
this.doPay();
},
// 物流提示取消 - 用户选择"取消支付"
handleOrderTextCancel() {
this.showOrderTextModal = false;
// 用户选择取消支付,显示提示信息
uni.showToast({
title: '您已取消支付',
icon: 'none',
duration: 2000
});
},
// 不需要代煎-代煎费
cancel() {
this.openshow = false;
this.is_decoct = 0
this.getUpuseWay()
},
// 需要代煎
confirm() {
this.is_decoct = 1
this.getUpuseWay()
},
// 更新代煎服务
getUpuseWay() {
getUpdateUseWay({
method: "post",
data: {
is_decoct: this.is_decoct,
order_id: this.order_id,
store_id: uni.getStorageSync('store_id') || '11001'
}
}).then((res) => {
if (res.data.errcode == 0) {
this.getInfo()
// console.log(res, '确定代煎');
}
})
},
toShow() {
this.show = true
},
toShowed() {
this.toshowed = true
},
chooseway(index) {
// 如果选择到店自取index == 1检查 is_online
if (index == 1 && this.is_online != 0) {
// 阻止选择并提示
this.$refs.uToast.show({
title: '在线复诊订单不支持到店自取,请选择收货地址',
type: 'default',
icon: false
})
return
}
if (index == 1) {
// 到店自取:先调用接口,成功后再更新页面
this.toUpdata(1)
return
}
// 快递到家:已有地址则直接切配送;否则去地址页
const hasAddress = !!(this.orderInfo.ProductOrder && this.orderInfo.ProductOrder.address_id)
|| !!uni.getStorageSync('address_id')
if (hasAddress) {
this.toUpdata(0)
} else {
this.isshowed = false
this.isshow = true
this.toChoose()
}
},
// 更新配送方式(仅用户明确操作时调用,禁止 onShow 盲调)
toUpdata(deliveryMethodIndex) {
if (this.order_id == '') {
return
}
if (deliveryMethodIndex === undefined || deliveryMethodIndex === null) {
return
}
const targetDeliveryMethod = deliveryMethodIndex
const addressId = uni.getStorageSync('address_id')
|| (this.orderInfo.ProductOrder && this.orderInfo.ProductOrder.address_id)
|| 0
getDelivery({
method: "post",
data: {
address_id: addressId,
delivery_method: targetDeliveryMethod,
order_id: this.order_id,
store_id: uni.getStorageSync('store_id') || '11001'
}
}).then((res) => {
const ok = res.data && (res.data.code === 0 || res.data.errcode === 0)
if (ok) {
this.wayText = this.list[targetDeliveryMethod] && this.list[targetDeliveryMethod].text
this.delivery_method = targetDeliveryMethod
uni.setStorageSync('delivery_method', targetDeliveryMethod)
if (targetDeliveryMethod == 1) {
this.isshowed = true
this.isshow = false
} else {
this.isshowed = false
this.isshow = true
}
// 刷新订单信息
this.getInfo()
} else {
// 错误处理:拒绝更新并显示错误信息,不更新页面状态
this.$refs.uToast.show({
title: (res.data && (res.data.message || res.data.msg)) || '更新失败',
type: 'default',
icon: false
})
}
})
},
// 门店信息(仅在需要时调用,不会覆盖处方来源诊所信息)
getStoreInfo() {
// 如果已经有处方来源诊所信息,不覆盖
if (this.infoList && this.infoList.store && this.infoList.store.id) {
return
}
storeInfo({
method: "post",
data: {
store_id: uni.getStorageSync('store_id') || '11001',
}
}).then((res) => {
// console.log(res, 'info');
if (res.data.errcode == 0) {
// 只有在没有处方来源诊所信息时才设置
if (!this.infoList || !this.infoList.store || !this.infoList.store.id) {
this.infoList = res.data.data
}
}
})
},
toForm() {
this.form['check'] = !this.form['check']
},
// 产品信息
getInfo() {
let list = {
store_id: uni.getStorageSync('store_id'),
prescription_id: this.p_id
}
getProductInfo({
method: "post",
data: list
}).then((res) => {
// console.log(res, 'info');
if (res.data.errcode == 0) {
this.orderInfo = res.data.data
this.patientInfo = res.data.data.patient || null
this.chinese = res.data.data.chinese
this.west = res.data.data.west
this.granular = res.data.data.granular
this.order_id = res.data.data.ProductOrder.id
uni.setStorageSync('userWay_order_id', res.data.data.ProductOrder.id)
// this.order_no = res.data.data.ProductOrder.order_no
// console.log(this.west.content);
// 使用API返回的处方来源诊所信息优先使用处方来源诊所
if (res.data.data.store && res.data.data.store.store) {
this.infoList = {
store: res.data.data.store.store
}
} else {
// 如果没有处方来源诊所信息,使用当前诊所信息作为后备
if (!this.infoList || !this.infoList.store) {
this.getStoreInfo()
}
}
// 检查 is_online 字段,动态控制 list 数组
if (res.data.data.ProductOrder && res.data.data.ProductOrder.is_online !== undefined) {
this.is_online = res.data.data.ProductOrder.is_online
} else if (res.data.data.is_online !== undefined) {
this.is_online = res.data.data.is_online
}
// 如果 is_online !== 0则不显示到店自取选项
if (this.is_online != 0) {
this.list = [{
text: '快递到家'
}]
} else {
// 如果 is_online === 0显示所有选项
this.list = [...this.originalList]
}
// 根据返回的订单数据更新页面状态(配送方式)
if (res.data.data.ProductOrder && res.data.data.ProductOrder.delivery_method !== undefined) {
const deliveryMethod = res.data.data.ProductOrder.delivery_method
this.delivery_method = deliveryMethod
if (this.list[deliveryMethod]) {
this.wayText = this.list[deliveryMethod].text
}
if (deliveryMethod == 1) {
this.isshowed = true
this.isshow = false
} else {
this.isshowed = false
this.isshow = true
}
}
this.getPrescriptionStatus()
this.refreshPayModalContent()
}
})
},
getPrescriptionStatus() {
if (!this.order_id) {
return
}
getPrescriptionStatusApi({
order_id: this.order_id
}).then((res) => {
if (res.data && (res.data.code == 0 || res.data.errcode == 0)) {
const data = res.data.data || res.data.result || {}
this.prescriptionStatus = isPrescriptionApprovedStatus(data)
} else {
this.prescriptionStatus = false
}
}).catch(() => {
this.prescriptionStatus = false
})
},
previewInstruction(instructionImage) {
if (instructionImage) {
uni.previewImage({
urls: [instructionImage],
current: instructionImage
})
}
},
// 代煎费
getServe() {
getUseWayPay({
method: "post",
data: {
order_id: uni.getStorageSync('userWay_order_id'),
store_id: uni.getStorageSync('store_id') || '11001'
}
}).then((res) => {
if (res.data.errcode == 0) {
this.payWay = res.data.data
this.content =
`平台可以为您提供有偿代煎服务(${this.payWay.decoct_price}元/剂)您的处方共${this.payWay.dosage}剂, 费用${this.payWay.total_decoct_price}元。 您是否需要?`
// console.log(this.payWay, 'way');
setTimeout(() => {
this.openshow = true;
}, 500)
}
})
},
// 地址列表(仅拉取列表,禁止自动 toUpdata避免用旧 delivery_method=1 覆盖刚改好的快递)
getList() {
getaddressList({
method: "post",
data: {
store_id: uni.getStorageSync('store_id'),
}
}).then((res) => {
// console.log(res, 'list');
if (res.data.errcode == 0) {
this.actionList = res.data.data
}
})
},
// 地址
toChoose() {
uni.navigateTo({
url: '/subPackages/setup/area-list?id=' + this.p_id + '&order_id=' + this.order_id
})
},
getKnow() {
service({
method: "get",
data: {
store_id: uni.getStorageSync('store_id'),
type:4
}
}).then((res) => {
// console.log(res, 'info');
if (res.data.errcode == 0) {
this.contented = res.data.data.content
}
})
},
// 支付
toPay() {
// 先显示物流提示模态框(有配送仓时弹窗为中性确认文案)
this.refreshPayModalContent();
this.showOrderTextModal = true;
},
// 实际支付逻辑
doPay() {
let that = this
if (this.flag) {
this.flag = false
getPayConfig({
method: "post",
data: {
order_id: this.order_id,
store_id: uni.getStorageSync('store_id') || '11001',
}
}).then((res) => {
console.log(res.data.data.timeStamp, 'pay');
uni.showLoading({
title: "加载中"
});
if (res.data.errcode == 0) {
if (!res.data.data.appId) {
setTimeout(() => {
that.flag = false
uni.navigateTo({
url: '/subPackages/my/my-drug/drug-list'
})
uni.hideLoading();
}, 300)
return;
}
uni.requestPayment({
provider: res.data.data.appId,
timeStamp: res.data.data.timestamp,
nonceStr: res.data.data.nonceStr,
package: res.data.data.package,
signType: res.data.data.signType,
paySign: res.data.data.paySign,
success: (res) => {
console.log('success:' + JSON.stringify(res));
setTimeout(() => {
that.flag = false
uni.navigateTo({
url: '/subPackages/my/my-drug/drug-list'
})
uni.hideLoading();
}, 300)
},
fail: function(err) {
that.flag = true
console.log('fail:' + JSON.stringify(err));
uni.hideLoading();
uni.showToast({
title: err.errMsg && err.errMsg.indexOf('cancel') !== -1 ? '支付已取消' : '支付失败',
duration: 1500,
mask: false,
icon: 'none'
})
}
})
} else {
uni.hideLoading();
that.flag = true
this.$refs.uToast.show({
title: res.data.msg,
type: 'default',
icon: false
})
}
}).catch((err) => {
console.error('getPayConfig error:', err);
uni.hideLoading();
that.flag = true
uni.showToast({
title: '获取支付配置失败',
icon: 'none',
duration: 1500
})
})
}
}
},
mounted() {
this.getKnow()
// 不在mounted中调用getStoreInfo等getInfo返回后再决定是否调用
const order_id = uni.getStorageSync('userWay_order_id')
// if (order_id) {
// this.getServe()
// } else {
// setTimeout(() => {
// this.getServe()
// }, 800)
// }
},
onShow() {
this.getInfo()
this.getList()
},
onUnload() {
uni.removeStorageSync('userWay_order_id')
}
}
</script>
<style lang="scss" scoped>
.container {
width: 750rpx;
max-height: 100%;
min-height: 100vh;
padding-bottom: env(safe-area-inset-bottom);
background: #F5F5F5;
/* 新增:物流提示样式 */
.order-text-tip {
background: #e6f3ff;
padding: 20rpx 30rpx;
margin: 20rpx 20rpx 0 20rpx;
border-radius: 8rpx;
font-size: 26rpx;
color: #1890ff;
line-height: 1.4;
border-left: 6rpx solid #1890ff;
}
.wh-tip {
margin-top: 8rpx;
font-size: 24rpx;
color: #1890ff;
line-height: 1.4;
}
.head_cancle {
padding: 20rpx 42rpx;
font-size: 32rpx;
font-weight: 500;
color: #222;
}
.agreen {
padding: 60rpx 50rpx 20rpx;
// color: #6C7380;
// letter-spacing: 2rpx;
.top {
margin: 0 0 20rpx 0;
font-family: PingFang SC-Regular, PingFang SC;
text-align: center;
font-size: 32rpx;
font-weight: 500;
color: #222;
}
}
.umode {
font-size: 36rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #232323;
text-align: center;
text {
font-size: 24rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
}
.p_state {
width: 750rpx;
height: 160rpx;
background: #536DFE;
margin: 20rpx auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40rpx;
.state {
font-family: PingFang SC-Bold, PingFang SC;
display: flex;
flex-direction: column;
text {
font-size: 36rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #FFFFFF;
}
.notice {
font-size: 24rpx;
font-weight: 400;
margin-top: 12rpx;
}
}
.iconfont {
font-size: 52rpx;
color: #fff;
}
}
._choose {
width: 750rpx;
height: 88rpx;
margin: 0rpx auto;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40rpx;
._fs {
display: flex;
align-items: center;
.iconfont {
font-size: 32rpx;
margin-left: 16rpx;
color: #222333;
}
}
}
.head {
width: 750rpx;
height: 168rpx;
margin: 20rpx auto;
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 40rpx;
&.patient-head {
height: auto;
min-height: 120rpx;
}
.state {
font-size: 28rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #232323;
line-height: 0rpx;
display: flex;
align-items: center;
justify-content: space-between;
text {
display: inline-block;
width: 116rpx;
height: 38rpx;
line-height: 38rpx;
text-align: center;
background: #536DFE;
border-radius: 30rpx 30rpx 30rpx 30rpx;
font-size: 20rpx;
color: #FFFFFF;
margin-right: 14rpx;
}
.qh {
display: flex;
align-items: center;
.iconfont {
font-size: 28rpx;
margin-left: 16rpx;
}
}
}
.name {
font-size: 28rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #232323;
margin: 10rpx 0;
}
.choose_area {
font-size: 24rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #232323;
}
}
.card {
width: 750rpx;
margin: 0 auto;
padding: 20rpx 12rpx 0rpx 20rpx;
background: #FFFFFF;
.store {
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 500;
color: #232323;
margin-left: 20rpx;
padding: 10rpx 0;
.iconfont {
font-size: 39rpx;
color: #666666;
vertical-align: middle;
margin-right: 10rpx;
}
}
.list_west {
.list {
display: flex;
justify-content: space-around;
width: 100%;
padding: 32rpx;
display: flex;
align-items: center;
.img {
width: 200rpx;
height: 200rpx;
margin-right: 10rpx;
image {
width: 200rpx;
height: 200rpx;
border-radius: 8rpx;
}
}
.it {
flex: 1;
padding: 16rpx 10rpx;
font-family: PingFang SC-Bold, PingFang SC;
margin: 10rpx;
.it_name {
font-weight: bold;
color: #232323;
margin-bottom: 10rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 20rpx;
}
.it_info {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 20rpx;
}
.instruction-btn {
margin-top: 16rpx;
margin-bottom: 16rpx;
padding: 12rpx 24rpx;
background: #ECF5FF;
border-radius: 8rpx;
display: inline-flex;
align-items: center;
justify-content: center;
text {
font-size: 26rpx;
color: #2B85E4;
}
&:active {
opacity: 0.7;
}
}
.it_price {
display: flex;
align-items: center;
justify-content: space-between;
text {
font-size: 28rpx;
font-weight: bold;
color: #232323;
}
}
}
}
}
.list {
width: 100%;
padding: 12rpx 12rpx;
display: flex;
flex-wrap: wrap;
.it {
width: 30%;
padding: 16rpx 10rpx;
font-family: PingFang SC-Bold, PingFang SC;
margin: 0 10rpx 10rpx 0;
.it_name {
font-weight: bold;
color: #232323;
margin-bottom: 10rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
padding-left: 5rpx;
}
.it_price {
display: flex;
align-items: center;
justify-content: space-between;
text {
font-size: 28rpx;
font-weight: bold;
color: #999999;
}
}
.it_num {
color: #999999;
}
}
}
.goods {
margin-top: 20rpx;
padding: 0 30rpx 10rpx;
margin-bottom: 140rpx;
.good_ {
display: flex;
align-items: center;
justify-content: space-between;
height: 88rpx;
text {
font-size: 28rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #232323;
}
.total {
font-size: 26rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
.price {
font-size: 34rpx;
font-weight: 500;
}
}
.price {
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
}
}
}
.infos {
width: 750rpx;
margin: 20rpx auto 160rpx;
padding: 20rpx 32rpx;
background: #FFFFFF;
.title {
height: 44rpx;
font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #232323;
line-height: 44rpx;
}
._info {
display: flex;
justify-content: space-between;
align-items: center;
margin: 18rpx 0;
text {
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
.info {
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #232323;
}
}
}
.footer {
width: 750rpx;
height: 114rpx;
position: fixed;
left: 0;
bottom: env(safe-area-inset-bottom);
display: flex;
align-items: center;
padding: 0rpx 24rpx;
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
.to_pay {
width: 690rpx;
height: 84rpx;
line-height: 84rpx;
background: #536DFE;
border-radius: 64rpx;
color: #FFFFFF;
text-align: center;
}
}
}
</style>