123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898 |
- <template>
- <view v-if="!isLoading" class="container">
- <view class="header">
- <!-- 订单状态 -->
- <view class="order-status">
- <view class="status-icon">
- <!-- 进行中的订单 -->
- <block>
- <!-- 待支付 -->
- <block>
- <image v-if="order.status == OrderStatusEnum.CREATED.value" class="image" src="/static/order/status/wait_pay.png" mode="aspectFit"></image>
- </block>
- <!-- 已支付 -->
- <block>
- <image v-if="order.status == OrderStatusEnum.PAID.value" class="image" src="/static/order/status/received.png" mode="aspectFit"></image>
- </block>
- <!-- 待发货 -->
- <block>
- <image v-if="order.status == OrderStatusEnum.DELIVERY.value" class="image" src="/static/order/status/wait_deliver.png" mode="aspectFit"></image>
- </block>
- <!-- 已发货 -->
- <block>
- <image v-if="order.status == OrderStatusEnum.DELIVERED.value" class="image" src="/static/order/status/wait_receipt.png" mode="aspectFit"></image>
- </block>
- <!-- 已收货-->
- <block>
- <image v-if="order.status == OrderStatusEnum.RECEIVED.value" class="image" src="/static/order/status/received.png" mode="aspectFit"></image>
- </block>
- <!-- 已取消-->
- <block>
- <image v-if="order.status == OrderStatusEnum.CANCEL.value || order.status == OrderStatusEnum.REFUND.value" class="image" src="/static/order/status/close.png" mode="aspectFit"></image>
- </block>
- </block>
- </view>
- <view class="status-text">
- <text v-if="order.status == OrderStatusEnum.CREATED.value">{{OrderStatusEnum.CREATED.name}}</text>
- <text v-else-if="order.status == OrderStatusEnum.PAID.value">{{OrderStatusEnum.PAID.name}}</text>
- <text v-else-if="order.status == OrderStatusEnum.DELIVERY.value">{{OrderStatusEnum.DELIVERY.name}}</text>
- <text v-else-if="order.status == OrderStatusEnum.DELIVERED.value">{{OrderStatusEnum.DELIVERED.name}}</text>
- <text v-else-if="order.status == OrderStatusEnum.RECEIVED.value">{{OrderStatusEnum.RECEIVED.name}}</text>
- <text v-else-if="order.status == OrderStatusEnum.CANCEL.value">{{OrderStatusEnum.CANCEL.name}}</text>
- <text v-else-if="order.status == OrderStatusEnum.REFUND.value">{{OrderStatusEnum.REFUND.name}}</text>
- </view>
- <view class="verify-code" v-if="order.orderMode == 'oneself' && order.type == 'goods' && order.verifyCode && order.payStatus == 'B' && !order.tableInfo && ( !['C', 'H', 'G'].includes(order.status))">
- <view>提取码:</view>
- <view class="code">{{ order.verifyCode }}</view>
- </view>
- </view>
- </view>
-
- <!--订单类型-->
- <view class="order-type">
- <text class="type">{{ order.typeName }}</text>
- </view>
- <!-- 快递配送:配送地址 -->
- <view v-if="order.address" class="delivery-address i-card">
- <view class="link-man">
- <text class="name">{{ order.address.name }}</text>
- <text class="phone">{{ order.address.mobile }}</text>
- </view>
- <view class="address">
- <text class="region">{{ order.address.provinceName }}{{ order.address.cityName }}{{ order.address.regionName }}</text>
- <text class="detail">{{ order.address.detail }}</text>
- </view>
- </view>
-
- <!-- 门店自提:自提地址 -->
- <view v-if="order.orderMode == 'oneself'" class="delivery-address i-card">
- <view class="link-man">
- <text class="type">[门店自提]</text>
- </view>
- <view class="link-man">
- <text class="name">{{ order.storeInfo.name }}</text>
- <text class="phone">{{ order.storeInfo.phone }}</text>
- </view>
- <view class="address">
- <text class="region">{{ order.storeInfo.address }}</text>
- </view>
- </view>
- <!-- 商品列表 -->
- <view class="goods-list i-card" v-if="order.goods.length > 0">
- <view class="goods-item" v-for="(goods, idx) in order.goods" :key="idx">
- <view class="goods-main" v-if="goods.num > 0" @click="handleTargetGoods(goods.goodsId, goods.type)">
- <!-- 商品图片 -->
- <view class="goods-image">
- <image class="image" :src="goods.image" mode="widthFix"></image>
- </view>
- <!-- 商品信息 -->
- <view class="goods-content">
- <view class="goods-title twolist-hidden"><text>{{goods.name}}</text></view>
- <view class="goods-props clearfix">
- <view class="goods-props-item" v-for="(props, idx) in goods.specList" :key="idx">
- <text>{{ props.specValue }}</text>
- </view>
- </view>
- </view>
- <!-- 交易信息 -->
- <view class="goods-trade">
- <view class="goods-price">
- <text class="unit">¥</text>
- <text class="value">{{ goods.price }}</text>
- </view>
- <view class="goods-num">
- <text>×{{goods.num}}</text>
- </view>
- </view>
- </view>
- </view>
- </view>
- <!-- 订单信息 -->
- <view class="order-info i-card">
- <view class="info-item">
- <view class="item-lable">订单编号</view>
- <view class="item-content">
- <text>{{order.orderSn}}</text>
- <view class="act-copy" @click="handleCopy(order.orderSn)">
- <text>复制</text>
- </view>
- </view>
- </view>
- <view class="info-item">
- <view class="item-lable">下单时间</view>
- <view class="item-content">
- <text>{{order.createTime}}</text>
- </view>
- </view>
- <view class="info-item">
- <view class="item-lable">支付时间</view>
- <view class="item-content">
- <text>{{order.payTime ? order.payTime : '--'}}</text>
- </view>
- </view>
- <view class="info-item">
- <view class="item-lable">备注信息</view>
- <view class="item-content">
- <text>{{order.remark ? order.remark : '--'}}</text>
- </view>
- </view>
- </view>
- <!-- 结算信息 -->
- <view class="trade-info i-card">
- <view class="info-item">
- <view class="item-lable">订单金额</view>
- <view class="item-content">
- <text>¥{{(order.amount.toFixed(2))}}</text>
- </view>
- </view>
- <view v-if="order.discount > 0" class="info-item">
- <view class="item-lable">优惠金额</view>
- <view class="item-content">
- <text>-¥{{ order.discount.toFixed(2) }}</text>
- </view>
- </view>
- <view v-if="order.deliveryFee > 0" class="info-item">
- <view class="item-lable">配送费用</view>
- <view class="item-content">
- <text>+¥{{ order.deliveryFee.toFixed(2) }}</text>
- </view>
- </view>
- <view v-if="order.pointAmount > 0" class="info-item">
- <view class="item-lable">积分抵扣</view>
- <view class="item-content">
- <text>-¥{{ order.pointAmount.toFixed(2) }}</text>
- </view>
- </view>
- <view class="info-item">
- <view class="item-lable">支付方式</view>
- <view class="item-content">
- <text>{{ PayTypeEnum.getNameByValue(order.payType) }}</text>
- </view>
- </view>
- <view class="divider"></view>
- <view class="trade-total">
- <text class="lable">实付款</text>
- <view class="goods-price">
- <text class="unit">¥</text>
- <text class="value">{{order.payAmount ? order.payAmount.toFixed(2) : '0.00'}}</text>
- </view>
- </view>
- </view>
- <!-- 底部操作按钮 -->
- <view class="footer-fixed" v-if="order.status == OrderStatusEnum.CREATED.value">
- <view class="btn-wrapper">
- <block v-if="!order.tableInfo">
- <view class="btn-item" @click="onCancel(order.id)">取消订单</view>
- </block>
- <block v-if="order.tableInfo">
- <view class="btn-item" @click="onContinue(order.id, order.tableInfo.id)">继续点单</view>
- </block>
- <block>
- <view class="btn-item active" @click="onPay(order.id)">去支付</view>
- </block>
- </view>
- </view>
-
- <!-- 已支付的订单 -->
- <view class="footer-fixed" v-if="(order.payStatus == OrderStatusEnum.PAID.value) && !order.tableInfo">
- <view class="btn-wrapper">
- <block v-if="!order.refundInfo">
- <view class="btn-item active" @click="handleApplyRefund(order.id)">申请售后</view>
- </block>
- <block v-if="order.refundInfo">
- <view class="btn-item common" @click="handleRefundDetail(order.refundInfo.id)">售后详情</view>
- </block>
- </view>
- </view>
-
- <view class="footer-fixed" v-if="order.status == OrderStatusEnum.DELIVERED.value">
- <view class="btn-wrapper">
- <block>
- <view class="btn-item active" @click="onReceipt(order.id)">确认收货</view>
- </block>
- </view>
- </view>
- <!-- 支付方式弹窗 -->
- <u-popup v-model="showPayPopup" mode="bottom" :closeable="true">
- <view class="pay-popup">
- <view class="title">请选择支付方式</view>
- <view class="pop-content">
- <!-- 微信支付 -->
- <view class="pay-item dis-flex flex-x-between" @click="onSelectPayType(PayTypeEnum.WECHAT.value)">
- <view class="item-left dis-flex flex-y-center">
- <view class="item-left_icon wechat">
- <text class="iconfont icon-weixinzhifu"></text>
- </view>
- <view class="item-left_text">
- <text>{{ PayTypeEnum.WECHAT.name }}</text>
- </view>
- </view>
- </view>
- <!-- 余额支付 -->
- <view v-if="order.type != 'recharge' && order.type != 'prestore'" class="pay-item dis-flex flex-x-between" @click="onSelectPayType(PayTypeEnum.BALANCE.value)">
- <view class="item-left dis-flex flex-y-center">
- <view class="item-left_icon balance">
- <text class="iconfont icon-qiandai"></text>
- </view>
- <view class="item-left_text">
- <text>{{ PayTypeEnum.BALANCE.name }}</text>
- </view>
- </view>
- </view>
- </view>
- </view>
- </u-popup>
-
- <!-- 快捷导航 -->
- <shortcut/>
- </view>
- </template>
- <script>
- import {
- DeliveryStatusEnum,
- DeliveryTypeEnum,
- OrderStatusEnum,
- PayStatusEnum,
- PayTypeEnum,
- ReceiptStatusEnum
- } from '@/common/enum/order'
- import * as OrderApi from '@/api/order'
- import { wxPayment } from '@/utils/app'
- import Shortcut from '@/components/shortcut'
- export default {
- components: {
- Shortcut
- },
- data() {
- return {
- // 枚举类
- DeliveryStatusEnum,
- DeliveryTypeEnum,
- OrderStatusEnum,
- PayStatusEnum,
- PayTypeEnum,
- ReceiptStatusEnum,
- // 当前订单ID
- orderId: null,
- // 桌码ID
- tableId: 0,
- // 加载中
- isLoading: true,
- // 当前订单详情
- order: {},
- // 当前设置
- setting: {},
- // 支付方式弹窗
- showPayPopup: false,
- // 刷新页面
- reflash: false
- }
- },
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad({ orderId }) {
- // 当前订单ID
- this.orderId = orderId;
- this.tableId = uni.getStorageSync("tableId") ? uni.getStorageSync("tableId") : 0;
- },
- /**
- * 生命周期函数--监听页面显示
- */
- onShow() {
- // 获取当前订单信息
- this.getOrderDetail();
- },
- methods: {
- // 获取当前订单信息
- getOrderDetail() {
- const app = this
- app.isLoading = true
- OrderApi.detail(app.orderId)
- .then(result => {
- app.order = result.data
- app.setting = result.data
- app.isLoading = false
- })
- },
- // 复制指定内容
- handleCopy(value) {
- const app = this
- uni.setClipboardData({
- data: value,
- success() {
- app.$toast('复制成功')
- }
- })
- },
- // 跳转到商品详情页面
- handleTargetGoods(goodsId, type) {
- if (goodsId && parseInt(goodsId) > 0) {
- this.$navTo('pages/goods/detail', { goodsId })
- }
- },
- // 跳转到申请售后页面
- handleApplyRefund(orderId) {
- this.$navTo('pages/refund/apply', { orderId })
- },
-
- // 售后详情
- handleRefundDetail(refundId) {
- this.$navTo('pages/refund/detail', { refundId })
- },
- // 取消订单
- onCancel() {
- const app = this
- uni.showModal({
- title: '友情提示',
- content: '确认要取消该订单吗?',
- success(o) {
- if (o.confirm) {
- OrderApi.cancel(app.orderId)
- .then(result => {
- // 显示成功信息
- app.$success(result.message);
- // 刷新当前订单数据
- app.getOrderDetail();
- })
- }
- }
- });
- },
- // 继续点单
- onContinue(orderId, tableId) {
- this.$navTo('pages/category/index');
- uni.setStorageSync('orderId', orderId);
- uni.setStorageSync('tableId', tableId);
- },
- // 点击去支付
- onPay() {
- // 显示支付方式弹窗
- this.showPayPopup = true;
- },
-
- // 确认收货
- onReceipt(orderId) {
- const app = this
- uni.showModal({
- title: '友情提示',
- content: '确认收到商品了吗?',
- success(o) {
- if (o.confirm) {
- OrderApi.receipt(orderId)
- .then(result => {
- // 显示成功信息
- app.$success(result.message)
- // 刷新当前订单数据
- app.getOrderDetail()
- })
- }
- }
- });
- },
- // 选择支付方式
- onSelectPayType(payType) {
- const app = this
- // 隐藏支付方式弹窗
- this.showPayPopup = false
- // 发起支付请求
- OrderApi.pay(app.orderId, payType)
- .then(result => app.onSubmitCallback(result))
- .catch(err => err)
- },
- // 订单提交成功后回调
- onSubmitCallback(result) {
- const app = this;
- if (!result.data) {
- if (result.message) {
- app.$error(result.message);
- } else {
- app.$error('支付失败');
- }
- return false;
- }
-
- // 发起微信支付
- if (result.data.payType == PayTypeEnum.WECHAT.value) {
- wxPayment(result.data.payment)
- .then(() => {
- app.$success('支付成功');
- setTimeout(() => {
- app.getOrderDetail();
- }, 1500)
- })
- .catch(err => {
- app.$error('订单未支付');
- })
- .finally(() => {
- app.disabled = false;
- })
- }
- // 余额支付
- if (result.data.payType == PayTypeEnum.BALANCE.value) {
- if (result.data.orderInfo.payStatus == 'B') {
- app.$success('支付成功');
- app.disabled = false;
- setTimeout(() => {
- // 刷新当前订单数据
- app.getOrderDetail();
- }, 1500)
- } else {
- app.$error('支付失败');
- }
- }
- }
- }
- }
- </script>
- <style>
- page {
- background: #f4f4f4;
- }
- </style>
- <style lang="scss" scoped>
- .container {
- padding-bottom: 140rpx;
- }
- // 页面顶部
- .header {
- display: flex;
- justify-content: space-between;
- background-color: $fuint-theme;
- height: 280rpx;
- padding: 56rpx 30rpx 0 30rpx;
- .order-status {
- display: flex;
- align-items: center;
- height: 128rpx;
- .status-icon {
- width: 128rpx;
- height: 128rpx;
- .image {
- display: block;
- width: 100%;
- height: 100%;
- }
- }
- .status-text {
- padding-left: 20rpx;
- color: #fff;
- font-size: 38rpx;
- font-weight: bold;
- }
- .verify-code {
- color: #ffffff;
- margin-left: 60rpx;
- font-size: 30rpx;
- .code {
- font-size: 50rpx;
- color: #ffd700;
- font-weight: bold;
- }
- }
- }
- .next-action {
- display: flex;
- align-items: center;
- height: 128rpx;
- .action-btn {
- min-width: 150rpx;
- height: 60rpx;
- padding: 0 30rpx;
- line-height: 60rpx;
- text-align: center;
- border-radius: 30rpx;
- border-color: #ffffff;
- color: #ffffff;
- background: linear-gradient(to right, #f9211c, #ff6335);
- cursor: pointer;
- user-select: none;
- }
- }
- }
- // 通栏卡片
- .i-card {
- background: #fff;
- padding: 24rpx 24rpx;
- width: 94%;
- box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
- margin: 0 auto 20rpx auto;
- border-radius: 20rpx;
- }
-
- // 订单类型
- .order-type {
- font-weight: bold;
- margin: 25rpx;
- }
- // 收货地址
- .delivery-address {
- margin-top: 20rpx;
- .link-man {
- line-height: 46rpx;
- color: #333;
- .type {
- margin-right: 10rpx;
- font-weight: bold;
- }
- .name {
- margin-right: 10rpx;
- color: #999;
- }
- .phone {
- margin-right: 10rpx;
- color: #999;
- }
- }
- .address {
- margin-top: 12rpx;
- color: #999;
- font-size: 24rpx;
- .detail {
- margin-left: 6rpx;
- }
- }
- }
- // 物流公司
- .express {
- display: flex;
- align-items: center;
- .main {
- flex: 1;
- }
- .info-item {
- display: flex;
- margin-bottom: 24rpx;
- &:last-child {
- margin-bottom: 0;
- }
- .item-lable {
- display: flex;
- align-items: center;
- font-size: 24rpx;
- color: #999;
- margin-right: 30rpx;
- }
- .item-content {
- flex: 1;
- display: flex;
- align-items: center;
- font-size: 26rpx;
- color: #333;
- .act-copy {
- margin-left: 20rpx;
- padding: 2rpx 20rpx;
- font-size: 22rpx;
- color: #666;
- border: 1rpx solid #c1c1c1;
- border-radius: 16rpx;
- }
- }
- }
- // 右侧箭头
- .right-arrow {
- margin-left: 16rpx;
- // color: #777;
- font-size: 26rpx;
- }
- }
- // 商品列表
- .goods-list {
- // 商品项
- .goods-item {
- margin-bottom: 40rpx;
- &:last-child {
- margin-bottom: 0;
- }
- // 商品信息
- .goods-main {
- display: flex;
- }
- // 商品图片
- .goods-image {
- width: 180rpx;
- height: 180rpx;
- .image {
- display: block;
- width: 100%;
- height: 100%;
- border-radius: 8rpx;
- }
- }
- // 商品内容
- .goods-content {
- flex: 1;
- padding-left: 16rpx;
- padding-top: 16rpx;
- .goods-title {
- font-size: 26rpx;
- max-height: 76rpx;
- }
- .goods-props {
- margin-top: 14rpx;
- height: 40rpx;
- color: #ababab;
- font-size: 24rpx;
- overflow: hidden;
- .goods-props-item {
- display: inline-block;
- margin-right: 14rpx;
- padding: 4rpx 16rpx;
- border-radius: 12rpx;
- background-color: #F5F5F5;
- width: auto;
- }
- }
- }
- // 交易信息
- .goods-trade {
- padding-top: 16rpx;
- width: 150rpx;
- text-align: right;
- color: $uni-text-color-grey;
- font-size: 26rpx;
- .goods-price {
- vertical-align: bottom;
- margin-bottom: 16rpx;
- .unit {
- margin-right: -2rpx;
- font-size: 24rpx;
- }
- }
- }
- // 商品售后
- .goods-refund {
- display: flex;
- justify-content: flex-end;
- .stata-text {
- font-size: 24rpx;
- color: #999;
- }
- .action-btn {
- border-radius: 28rpx;
- padding: 8rpx 26rpx;
- font-size: 24rpx;
- color: #383838;
- border: 1rpx solid #a8a8a8;
- }
- }
- }
- }
- // 订单信息
- .order-info {
- .info-item {
- display: flex;
- margin-bottom: 24rpx;
- &:last-child {
- margin-bottom: 0;
- }
- .item-lable {
- display: flex;
- align-items: center;
- font-size: 24rpx;
- color: #999;
- margin-right: 30rpx;
- }
- .item-content {
- flex: 1;
- display: flex;
- align-items: center;
- font-size: 26rpx;
- color: #333;
- .act-copy {
- margin-left: 20rpx;
- padding: 2rpx 20rpx;
- font-size: 22rpx;
- color: #666;
- border: 1rpx solid #c1c1c1;
- border-radius: 16rpx;
- }
- }
- }
- }
- // 交易信息
- .trade-info {
- margin-bottom: 80rpx;
- .info-item {
- display: flex;
- margin-bottom: 24rpx;
- .item-lable {
- font-size: 24rpx;
- color: #999;
- margin-right: 24rpx;
- }
- .item-content {
- flex: 1;
- font-size: 26rpx;
- color: #333;
- text-align: right;
- }
- }
- .divider {
- height: 1rpx;
- background: #f1f1f1;
- margin-bottom: 24rpx;
- }
- .trade-total {
- display: flex;
- justify-content: flex-end;
- .goods-price {
- margin-left: 12rpx;
- vertical-align: bottom;
- color: $uni-text-color-active;
- .unit {
- margin-right: -2rpx;
- font-size: 24rpx;
- }
- }
- }
- }
- /* 底部操作栏 */
- .footer-fixed {
- position: fixed;
- bottom: var(--window-bottom);
- left: 0;
- right: 0;
- height: 180rpx;
- padding-bottom: 30rpx;
- z-index: 11;
- box-shadow: 0 -4rpx 40rpx 0 rgba(97, 97, 97, 0.1);
- background: #fff;
- .btn-wrapper {
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- padding: 0 30rpx;
- }
- .btn-item {
- min-width: 164rpx;
- border-radius: 8rpx;
- padding: 20rpx 24rpx;
- font-size: 28rpx;
- color: #383838;
- text-align: center;
- border: 1rpx solid #a8a8a8;
- margin-left: 10rpx;
- &.common {
- color: #fff;
- border: none;
- background: linear-gradient(to right, $fuint-theme, $fuint-theme);
- }
- &.active {
- color: #fff;
- border: none;
- background: linear-gradient(to right, #f9211c, #ff6335);
- }
- }
- }
- // 弹出层-支付方式
- .pay-popup {
- padding: 25rpx 25rpx 70rpx 25rpx;
- .title {
- font-size: 30rpx;
- margin-bottom: 50rpx;
- font-weight: bold;
- text-align: center;
- }
- .pop-content {
- min-height: 120rpx;
- padding: 0 20rpx;
- .pay-item {
- padding: 30rpx;
- font-size: 30rpx;
- background: #fff;
- border: 1rpx solid $fuint-theme;
- border-radius: 8rpx;
- color: #888;
- margin-bottom: 12rpx;
- text-align: center;
- .item-left_icon {
- margin-right: 20rpx;
- font-size: 48rpx;
- &.wechat {
- color: #00c800;
- }
- &.balance {
- color: $fuint-theme;
- }
- }
- }
- }
- }
- </style>
|