weipengfei
/
purchase-let
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://gitea.lihaink.cn/weipengfei/purchase-let

This commit is contained in:
weipengfei 2024-05-11 16:45:40 +08:00
parent 31dfb56c17 2e7e193da9
commit 65d74155b5
9 changed files with 1278 additions and 1020 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/shopListPopup.vue
View File

@ -27,7 +27,7 @@
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
<up-button color="#20B128" shape="circle" @click="submitAddress">确认自点</up-button> <up-button color="#20B128" shape="circle" @click="submitAddress">确认提货点 </up-button>
</view> </view>
</up-popup> </up-popup>
</template> </template>
@ -56,8 +56,8 @@
} }
const submitAddress = () => { const submitAddress = () => {
let e = props.list.find(item=>item.mer_id==addressType.value); let e = props.list.find(item => item.mer_id == addressType.value);
if(addressType.value<=0 || !e) return uni.$u.toast('请选择提货点'); if (addressType.value <= 0 || !e) return uni.$u.toast('请选择提货点');
emit('change', e); emit('change', e);
} }
@ -71,13 +71,13 @@
url: url url: url
}) })
} }
const setCheck = (e)=>{ const setCheck = (e) => {
addressType.value = e; addressType.value = e;
} }
defineExpose({ defineExpose({
setCheck setCheck
}) })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

15
pageQuota/Balance/bindAccout.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<view class="content">
<view class="head">
<!-- -->
</view>
</view>
</template>
<script>
</script>
<style>
</style>

11
pageQuota/Balance/detail.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<view class="">
明细
</view>
</template>
<script>
</script>
<style>
</style>

165
pageQuota/Balance/index.vue Normal file
View File

@ -0,0 +1,165 @@
<template>
<view class="content">
<view class="total">
<view class="">
账户总余额(元)
</view>
<view style="font-size: 36rpx;">
￥1860.00
</view>
</view>
<view class="action">
<view class="">
提现至
</view>
<view style="font-weight: bold;">
请选择提现账户
</view>
<view style="display: flex;align-items: center;color: #20B128;"
@click="navgo('/pageQuota/Balance/bindAccout')">
<text>绑定账户</text> <up-icon color="#20B128" name="arrow-right"></up-icon>
</view>
</view>
<view class="form">
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
<up-form labelPosition="left" borderBottom :label-style="{fontSize:'30rpx'}" :model="model1" :rules="rules"
ref="form1" labelWidth='70'>
<up-form-item label="银行卡" prop="userInfo.name" borderBottom ref="item1">
<template #right>
<view style="display: flex;align-items: center;">
<text style="color: #20B128;">选择银行</text> <up-icon color="#20B128"
name="arrow-right"></up-icon>
</view>
</template>
</up-form-item>
<up-form-item label="持卡人" prop="userInfo.name" borderBottom ref="item1">
<up-input style="border: none;" v-model="form.name" placeholder="请输入持卡人姓名" />
</up-form-item>
<up-form-item label="银行账户" prop="userInfo.name" borderBottom ref="item1">
<up-input style="border: none;" v-model="form.name" placeholder="请输入银行账户" />
</up-form-item>
<up-form-item label="开户网点" prop="userInfo.name" borderBottom ref="item1">
<up-input style="border: none;" v-model="form.name" placeholder="请输入开户网点" />
</up-form-item>
<up-form-item label="提现金额" prop="userInfo.name" borderBottom ref="item1">
<up-input style="border: none;" v-model="form.name" placeholder="请输入提现金额" />
</up-form-item>
</up-form>
</view>
<view class="submit-btn">
<up-button text="提现" shape="circle" color="#50C758"></up-button>
</view>
</view>
</template>
<script setup>
import {
ref,
reactive
} from 'vue';
const navgo = (url) => {
uni.navigateTo({
url
})
}
const form = reactive({
name: ""
})
// 使用 reactive 创建响应式状态
const state = reactive({
showSex: false,
model1: {
userInfo: {
name: 'uview-plus UI',
sex: '',
},
},
actions: [{
name: '男'
},
{
name: '女'
},
{
name: '保密'
},
],
rules: {
'userInfo.name': {
type: 'string',
required: true,
message: '请填写姓名',
trigger: ['blur', 'change'],
},
'userInfo.sex': {
type: 'string',
max: 1,
required: true,
message: '请选择男或女',
trigger: ['blur', 'change'],
},
},
radio: '',
switchVal: false,
});
// 使用 ref 创建响应式引用
const formRef = ref(null);
// 定义方法
function sexSelect(e) {
state.model1.userInfo.sex = e.name;
if (formRef.value) {
formRef.value.validateField('userInfo.sex');
}
}
</script>
<style lang="scss">
.content {
padding: 20rpx;
.total {
background-color: #50C758;
border-radius: 16rpx 16rpx 16rpx 16rpx;
color: white;
display: flex;
justify-content: space-between;
padding: 42rpx 30rpx;
font-size: 30rpx;
margin-bottom: 30rpx;
}
.action {
background-color: white;
border-radius: 16rpx 16rpx 16rpx 16rpx;
padding: 30rpx;
display: flex;
justify-content: space-between;
margin-bottom: 30rpx;
}
.form {
padding: 28rpx 30rpx;
background-color: white;
border-radius: 20rpx;
}
}
.submit-btn {
position: fixed;
bottom: 146rpx;
width: 710rpx;
}
</style>

25
pageQuota/quotation/index.vue
View File

@ -58,10 +58,17 @@
v-model="item.price"></up-input> v-model="item.price"></up-input>
</view> </view>
</view> </view>
<view class="status-png" v-if="tabIndex==2"> <!-- <view class="status-png" v-if="tabIndex==2">
<image :src="item.is_adopt?successPng:errPng" style="width: 108rpx; height: 84rpx;"> <image v-if="is_storage==1 && is_adopt == 1" :src="waitPng"
style="width: 108rpx; height: 84rpx;">
</image> </image>
</view> <image v-else-if="is_storage==0 && is_adopt == 1" :src="waitPng"
style="width: 108rpx; height: 84rpx;">
</image>
<image v-else :src="waitPng" style="width: 108rpx; height: 84rpx;">
</image>
</view> -->
</view> </view>
<view class="card-footer" v-if="item.nums && item.price"> <view class="card-footer" v-if="item.nums && item.price">
共{{item.nums}}{{item.unit_name}}&nbsp; &nbsp;合计:<text 共{{item.nums}}{{item.unit_name}}&nbsp; &nbsp;合计:<text
@ -114,7 +121,15 @@
</view> </view>
</view> </view>
<view class="status-png" v-if="tabIndex==2"> <view class="status-png" v-if="tabIndex==2">
<image :src="item.is_adopt?successPng:errPng" style="width: 108rpx; height: 84rpx;"> <!-- <image :src="item.is_adopt?successPng:errPng" style="width: 108rpx; height: 84rpx;">
</image> -->
<image v-if="is_storage==1 && is_adopt == 1" :src="successPng"
style="width: 108rpx; height: 84rpx;">
</image>
<image v-else-if="is_storage==0 && is_adopt == 1" :src="errPng"
style="width: 108rpx; height: 84rpx;">
</image>
<image v-else :src="waitPng" style="width: 108rpx; height: 84rpx;">
</image> </image>
</view> </view>
</view> </view>
@ -160,6 +175,8 @@
// 状态图片url // 状态图片url
const successPng = ref('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/739c3202405071458553459.png') const successPng = ref('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/739c3202405071458553459.png')
const errPng = ref('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/04c2c202405071501462462.png') const errPng = ref('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/04c2c202405071501462462.png')
const waitPng = ref('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/274ad202405111523222891.png')
// 状态图片url结束 // 状态图片url结束

20
pages.json
View File

@ -110,6 +110,26 @@
"navigationBarTitleText": "关于我们", "navigationBarTitleText": "关于我们",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, {
"path": "Balance/index",
"style": {
"navigationBarTitleText": "我的余额",
"enablePullDownRefresh": false
}
},
{
"path": "Balance/bindAccout",
"style": {
"navigationBarTitleText": "绑定账户",
"enablePullDownRefresh": false
}
},
{
"path": "Balance/detail",
"style": {
"navigationBarTitleText": "明细",
"enablePullDownRefresh": false
}
}, },
{ {
"path": "feedBack/index", "path": "feedBack/index",

1521
pages/index/index.vue
View File

File diff suppressed because it is too large Load Diff

1
pages/my/my.vue
View File

@ -46,6 +46,7 @@
<view class="card"> <view class="card">
<up-cell-group> <up-cell-group>
<up-cell title="我的地址" :isLink="true" url="/pagesOrder/addressList/addressList"></up-cell> <up-cell title="我的地址" :isLink="true" url="/pagesOrder/addressList/addressList"></up-cell>
<up-cell title="我的余额" :isLink="true" url="/pageQuota/Balance/index"></up-cell>
</up-cell-group> </up-cell-group>
</view> </view>

520
pagesOrder/order/order.vue
View File

@ -1,275 +1,299 @@
<template> <template>
<view class="wrap"> <view class="wrap">
<up-navbar placeholder style="z-index: 100800;" @leftClick="navBack"> <up-navbar placeholder style="z-index: 100800;" @leftClick="navBack">
<template #center> <template #center>
<view>订单</view> <view>订单</view>
</template> </template>
</up-navbar> </up-navbar>
<up-sticky bgColor="#fff"> <up-sticky bgColor="#fff">
<view style="padding: 10rpx 20rpx 0 20rpx;"> <view style="padding: 10rpx 20rpx 0 20rpx;">
<up-search shape="round" v-model="keyword" @custom="searchOn" @search="searchOn" @clear="searchOn" <up-search shape="round" v-model="keyword" @custom="searchOn" @search="searchOn" @clear="searchOn"
:actionStyle="{color: '#20b128'}"></up-search> :actionStyle="{color: '#20b128'}"></up-search>
</view> </view>
<up-tabs :current="tabsActive" :list="tablist" lineColor="#20b128" :scrollable="false" <up-tabs :current="tabsActive" :list="tablist" lineColor="#20b128" :scrollable="false"
:activeStyle=" { color: '#20b128', fontWeight: 'bold' }" @change="changeTab"></up-tabs> :activeStyle=" { color: '#20b128', fontWeight: 'bold' }" @change="changeTab"></up-tabs>
</up-sticky> </up-sticky>
<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish"> <swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
<swiper-item class="swiper-item" v-for="(list, k) in orderList" :key="k"> <swiper-item class="swiper-item" v-for="(list, k) in orderList" :key="k">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMoreGood"> <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMoreGood">
<view class="page-box"> <view class="page-box">
<view v-if="list.length>0" class="list"> <view v-if="list.length>0" class="list">
<good v-for="(item, index) in list" :datas="item" :key="index" :type="k" @cancleOrder="cancleOrder" <good v-for="(item, index) in list" :datas="item" :key="index" :type="k"
@takeOrder="takeOrder" @rePay="rePay" @purchaseAgain="purchaseAgain"></good> @cancleOrder="cancleOrder" @takeOrder="takeOrder" @rePay="rePay"
</view> @purchaseAgain="purchaseAgain"></good>
<view v-if="!where[k].loading&&list.length==0" style="padding-top: 100rpx;"> </view>
<up-empty text="订单空空如也" <view v-if="!where[k].loading&&list.length==0" style="padding-top: 100rpx;">
icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png"> <up-empty text="订单空空如也"
</up-empty> icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
</view> </up-empty>
<view v-else-if="where[k].loadend" style="padding-top: 100rpx;"> </view>
<view style="text-align: center;color: #999;">没有更多了</view> <view v-else-if="where[k].loadend" style="padding-top: 100rpx;">
</view> <view style="text-align: center;color: #999;">没有更多了</view>
<view v-if="where[k].loading" </view>
style="padding-top: 100rpx;display: flex;flex-direction: column;align-items: center;"> <view v-if="where[k].loading"
<up-loading-icon mode="circle"></up-loading-icon> style="padding-top: 100rpx;display: flex;flex-direction: column;align-items: center;">
<view style="margin-top: 20rpx;color: #999;">加载中</view> <up-loading-icon mode="circle"></up-loading-icon>
</view> <view style="margin-top: 20rpx;color: #999;">加载中</view>
<view style="width: 100%;height: 300rpx;"></view> </view>
</view> <view style="width: 100%;height: 300rpx;"></view>
</scroll-view> </view>
</swiper-item> </scroll-view>
</swiper> </swiper-item>
<orderCanclePopup :show="showCancel" @close="showCancel=false" @change="submitCancel" /> </swiper>
<modal :show="showTake" title="确认收货" content="请确认您已收到货" @close="showTake=false" @change="confirmReceipt"></modal> <orderCanclePopup :show="showCancel" @close="showCancel=false" @change="submitCancel" />
</view> <modal :show="showTake" title="确认收货" content="请确认您已收到货" @close="showTake=false" @change="confirmReceipt">
</modal>
</view>
</template> </template>
<script setup> <script setup>
import { onLoad, onUnload } from "@dcloudio/uni-app" import {
import { ref } from 'vue'; onLoad,
import good from "./component/good.vue"; onUnload
import orderCanclePopup from "@/components/orderCanclePopup.vue" } from "@dcloudio/uni-app"
import modal from "@/components/modal.vue" import {
import { cancelOrderApi, rePaymentApi, confirmReceiptApi, orderListApi, purchaseAgainApi } from "@/api/order.js" ref
} from 'vue';
import good from "./component/good.vue";
import orderCanclePopup from "@/components/orderCanclePopup.vue"
import modal from "@/components/modal.vue"
import {
cancelOrderApi,
rePaymentApi,
confirmReceiptApi,
orderListApi,
purchaseAgainApi
} from "@/api/order.js"
const tabsActive = ref(0) const tabsActive = ref(0)
const changeTab = ({ index }) => { const changeTab = ({
tabsActive.value = index; index
swiperCurrent.value = index; }) => {
} tabsActive.value = index;
const tablist = ref([ swiperCurrent.value = index;
{ name: '全部' }, }
{ name: '待付款' }, const tablist = ref([{
{ name: '待收货' }, name: '全部'
// { name: '退款/售后' }, },
]); {
name: '待付款'
},
{
name: '待收货'
},
// { name: '退款/售后' },
]);
const swiperCurrent = ref(0); const swiperCurrent = ref(0);
const animationfinish = ({ detail: { current } }) => { const animationfinish = ({
swiperCurrent.value = current; detail: {
tabsActive.value = current; current
if (swiperCurrent.value == 0 && orderList.value[0].length == 0) getOrderList(0); }
if (swiperCurrent.value == 1 && orderList.value[1].length == 0) getOrderList(1, '', 0); }) => {
if (swiperCurrent.value == 2 && orderList.value[2].length == 0) getOrderList(2, 1); swiperCurrent.value = current;
} tabsActive.value = current;
if (swiperCurrent.value == 0 && orderList.value[0].length == 0) getOrderList(0);
if (swiperCurrent.value == 1 && orderList.value[1].length == 0) getOrderList(1, '', 0);
if (swiperCurrent.value == 2 && orderList.value[2].length == 0) getOrderList(2, 1);
}
// 取消订单 // 取消订单
const showCancel = ref(false); const showCancel = ref(false);
let cancelId = ''; let cancelId = '';
const submitCancel = (e) => { const submitCancel = (e) => {
showCancel.value = false; showCancel.value = false;
cancelOrderApi({ cancelOrderApi({
order_id: cancelId, order_id: cancelId,
value: e.value value: e.value
}).then(res => { }).then(res => {
uni.showToast({ uni.showToast({
title: '取消成功', title: '取消成功',
icon: 'none' icon: 'none'
}) })
orderList.value[1] = orderList.value[1].filter(item => item.id !== cancelId) orderList.value[1] = orderList.value[1].filter(item => item.id !== cancelId)
}) })
} }
const cancleOrder = (e) => { const cancleOrder = (e) => {
cancelId = e.id; cancelId = e.id;
showCancel.value = true; showCancel.value = true;
} }
// 确认收货 // 确认收货
const showTake = ref(false); const showTake = ref(false);
let takeId = ""; let takeId = "";
const takeOrder = (e) => { const takeOrder = (e) => {
takeId = e.id; takeId = e.id;
showTake.value = true; showTake.value = true;
} }
const confirmReceipt = () => { const confirmReceipt = () => {
confirmReceiptApi({ confirmReceiptApi({
order_id: takeId order_id: takeId
}).then(res => { }).then(res => {
showTake.value = false; showTake.value = false;
uni.$u.toast('确认收货成功'); uni.$u.toast('确认收货成功');
reloadAll(); reloadAll();
}) })
} }
// 再次购买 // 再次购买
const purchaseAgain = (e) => { const purchaseAgain = (e) => {
purchaseAgainApi({ purchaseAgainApi({
order_id: e.id order_id: e.id
}).then(res => { }).then(res => {
uni.$u.toast('已加入购物车'); uni.$u.toast('已加入购物车');
}) })
} }
const rePay = (e) => { const rePay = (e) => {
rePaymentApi({ rePaymentApi({
order_id: e.id, order_id: e.id,
address_id: e.address_id, address_id: e.address_id,
mer_id: e.merchant, mer_id: e.merchant,
pay_type: 1 pay_type: 1
}).then(res => { }).then(res => {
if (!res.data?.nonceStr) return uni.$u.toast('支付失败!'); if (!res.data?.nonceStr) return uni.$u.toast('支付失败!');
uni.requestPayment({ uni.requestPayment({
provider: 'wxpay', provider: 'wxpay',
timeStamp: res.data.timeStamp, timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr, nonceStr: res.data.nonceStr,
package: res.data.package, package: res.data.package,
signType: res.data.signType, signType: res.data.signType,
paySign: res.data.paySign, paySign: res.data.paySign,
success: (e) => { success: (e) => {
if (e.errMsg == 'requestPayment:ok') { if (e.errMsg == 'requestPayment:ok') {
uni.showToast({ uni.showToast({
title: '订单支付成功', title: '订单支付成功',
icon: 'success' icon: 'success'
}) })
reloadAll(); reloadAll();
} else uni.$u.toast('支付失败') } else uni.$u.toast('支付失败')
}, },
fail: (e) => { fail: (e) => {
uni.$u.toast('用户取消支付') uni.$u.toast('用户取消支付')
} }
}) })
}).catch(err => { }).catch(err => {
uni.$u.toast('网络错误') uni.$u.toast('网络错误')
}) })
} }
// 订单 // 订单
const where = ref([{ const where = ref([{
page_no: 1, page_no: 1,
page_size: 25, page_size: 25,
loading: false, loading: false,
loadend: false loadend: false
}, { }, {
page_no: 1, page_no: 1,
page_size: 25, page_size: 25,
loading: false, loading: false,
loadend: false loadend: false
}, },
{ {
page_no: 1, page_no: 1,
page_size: 25, page_size: 25,
loading: false, loading: false,
loadend: false loadend: false
} }
]) ])
const keyword = ref('') const keyword = ref('')
const orderList = ref([ const orderList = ref([
[], [],
[], [],
[], [],
]) ])
const getOrderList = (type = 0, status = '', paid = 1) => { const getOrderList = (type = 0, status = '', paid = 1) => {
if (where.value[type].loadend) return; if (where.value[type].loadend) return;
where.value[type].loading = true; where.value[type].loading = true;
orderListApi({ orderListApi({
page_no: where.value[type].page_no, page_no: where.value[type].page_no,
page_size: where.value[type].page_size, page_size: where.value[type].page_size,
number: keyword.value, number: keyword.value,
status: status, status: status,
paid: paid paid: paid
}).then(res => { }).then(res => {
if (where.value[type].page_no == 1) orderList.value[type] = []; if (where.value[type].page_no == 1) orderList.value[type] = [];
orderList.value[type] = [...orderList.value[type], ...res.data.lists]; orderList.value[type] = [...orderList.value[type], ...res.data.lists];
if (res.data.lists.length < where.value[type].page_size) where.value[type].loadend = true; if (res.data.lists.length < where.value[type].page_size) where.value[type].loadend = true;
where.value[type].page_no++; where.value[type].page_no++;
where.value[type].loading = false; where.value[type].loading = false;
}).catch(err => { }).catch(err => {
where.value[type].loading = false; where.value[type].loading = false;
}) })
} }
const loadMoreGood = () => { const loadMoreGood = () => {
if (swiperCurrent.value == 0) getOrderList(0); if (swiperCurrent.value == 0) getOrderList(0);
if (swiperCurrent.value == 1) getOrderList(1, '', 0); if (swiperCurrent.value == 1) getOrderList(1, '', 0);
if (swiperCurrent.value == 2) getOrderList(2, 1); if (swiperCurrent.value == 2) getOrderList(2, 1);
} }
// 搜索 // 搜索
const searchOn = () => { const searchOn = () => {
orderList.value[+swiperCurrent.value] = []; orderList.value[+swiperCurrent.value] = [];
where.value[+swiperCurrent.value].page_no = 1; where.value[+swiperCurrent.value].page_no = 1;
where.value[+swiperCurrent.value].loadend = false; where.value[+swiperCurrent.value].loadend = false;
if (swiperCurrent.value == 0) getOrderList(0); if (swiperCurrent.value == 0) getOrderList(0);
if (swiperCurrent.value == 1) getOrderList(1, '', 0); if (swiperCurrent.value == 1) getOrderList(1, '', 0);
if (swiperCurrent.value == 2) getOrderList(2, 1); if (swiperCurrent.value == 2) getOrderList(2, 1);
} }
let back = 0; let back = 0;
const navBack = () => { const navBack = () => {
uni.navigateBack({ uni.navigateBack({
delta: back ? +back : 0 delta: back ? +back : 0
}) })
} }
const reloadAll = () => { //对订单进行操作时刷新页面 const reloadAll = () => { //对订单进行操作时刷新页面
where.value.forEach(item => { where.value.forEach(item => {
item.page_no = 1; item.page_no = 1;
item.loadend = false; item.loadend = false;
}); });
getOrderList(1, '', 0); getOrderList(1, '', 0);
getOrderList(0); getOrderList(0);
getOrderList(2, 1); getOrderList(2, 1);
} }
onLoad((options) => { onLoad((options) => {
if (options.type) { if (options.type) {
tabsActive.value = +options.type; tabsActive.value = +options.type;
swiperCurrent.value = +options.type; swiperCurrent.value = +options.type;
searchOn(); searchOn();
} }
if (options.back) back = options.back; if (options.back) back = options.back;
// getOrderList(0); // getOrderList(0);
// getOrderList(1, '', 0); // getOrderList(1, '', 0);
// getOrderList(2, 1); // getOrderList(2, 1);
uni.$on('reLoadOrderList', reloadAll); uni.$on('reLoadOrderList', reloadAll);
}) })
onUnload(() => { onUnload(() => {
uni.$off('reLoadOrderList', reloadAll) uni.$off('reLoadOrderList', reloadAll)
}) })
</script> </script>
<style lang="scss"> <style lang="scss">
.wrap { .wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100vh - var(--window-top)); height: calc(100vh - var(--window-top));
width: 100%; width: 100%;
} }
.swiper-box { .swiper-box {
flex: 1; flex: 1;
} }
.swiper-item { .swiper-item {
height: 100%; height: 100%;
} }
.page-box { .page-box {
margin: 20rpx; margin: 20rpx;
.list {} // .list {}
} }
</style> </style>