hly
/
aluminium-trading-uniapp-240925
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

对接登录

master
前端-胡立永 1 year ago
parent
c0aa2d9be7
commit
adf8d9c877
3 changed files with 548 additions and 460 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +57
    -48
      pages_order/auth/loginAndRegisterAndForgetPassword.vue
  2. +489
    -410
      pages_order/order/myOrderDetail.vue
  3. +2
    -2
      pages_order/tradingPlatform/confirmOrder.vue

+ 57
- 48
pages_order/auth/loginAndRegisterAndForgetPassword.vue View File

@ -18,8 +18,8 @@
<!-- 用户名&密码&隐私条款 -->
<view class="form">
<view>
<uv-input v-model="form.username" placeholder="请输入账号" border="surround" shape='circle'
clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
<uv-input v-model="form.username" placeholder="请输入账号" border="surround" shape='circle' clearable
:customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
</view>
<view>
<uv-input v-model="form.password" password placeholder="请输入密码" border="surround" shape='circle'
@ -31,7 +31,7 @@
<view style="display: flex;">
<uv-checkbox size="30rpx" :name="1"></uv-checkbox>
请你阅读并同意我们的<span style="color: #fd5100"
@click="$refs.popup.open('getPrivacyPolicy')">《隐私条款》</span>和<span
@click="$refs.popup.open('getPrivacyPolicy')">《隐私条款》</span>和<span
style="color: #fd5100"
@click="$refs.popup.open('getUserAgreement')">《服务协议》</span>
</view>
@ -51,7 +51,7 @@
<!-- 表单 -->
<view class="form1">
<view class="userName">
<uv-input v-model="form1.userName" placeholder="请输入手机号/用户/邮箱" border="surround" shape='circle'
<uv-input v-model="form1.userName" placeholder="请输入手机号" border="surround" shape='circle'
clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
</view>
<view class="code">
@ -80,14 +80,13 @@
</view>
</view>
<!-- 按钮 -->
<view class="btn"
@click="submit">
<view class="btn" @click="submit">
<button class='a'>{{titleList[titleIndex]}}</button>
</view>
<!-- tab -->
<view class="bottomTab">
<span :class="titleIndex==0 ? 'tabbarItemActive' : 'tabbarItemNoActive'"
@ -99,7 +98,7 @@
<span :class="titleIndex==2 ? 'tabbarItemActive' : 'tabbarItemNoActive'"
@click='changePage(2)'>忘记密码</span>
</view>
</view>
@ -125,8 +124,8 @@
form: {
username: '19330214982',
password: '123456',
loginModel : 0,
captcha : '',
loginModel: 0,
captcha: '',
},
form1: {
userName: '',
@ -139,42 +138,44 @@
}
},
methods: {
submit(){
if(!this.checkboxValue.length){
submit() {
if (!this.checkboxValue.length) {
return uni.showToast({
title: '请先同意隐私协议',
icon:'none'
icon: 'none'
})
}
if(this.$utils.verificationAll(this.form, {
username: '请输入账号',
password: '请输入密码',
})){
if (this.$utils.verificationAll(this.form, {
username: '请输入账号',
password: '请输入密码',
})) {
return
}
if(!this.$utils.verificationPhone(this.form.username)){
if (!this.$utils.verificationPhone(this.form.username)) {
return uni.showToast({
title: '账号请输入合法的手机号',
icon:'none'
title: '请输入合法的手机号',
icon: 'none'
})
}
if(this.titleIndex == 0){
if (this.titleIndex == 0) {
// 注册
this.$api('registerUser', this.form, res =>{
if(res.code == 200){
this.$api('registerUser', this.form, res => {
if (res.code == 200) {
this.titleIndex = 1
uni.showToast({
title: '注册成功，请登录！',
icon : 'none'
icon: 'none'
})
}
})
}else if(this.titleIndex == 1){
} else if (this.titleIndex == 1) {
// 登录
this.$store.commit('login', this.form)
} else {
}
},
// 切换页面
@ -190,20 +191,28 @@
},
getCode() {
if (this.$refs.code.canGetCode) {
if (!this.$utils.verificationPhone(this.form1.username)) {
return uni.showToast({
title: '请输入合法的手机号',
icon: 'none'
})
}
uni.showLoading({
title: '正在获取验证码'
})
this.$api('sendSms', {
username: this.form1.userName,
}, res => {
if (res.code == 200) {
uni.hideLoading();
// 这里此提示会被this.start()方法中的提示覆盖
uni.$uv.toast('验证码已发送');
// 通知验证码组件内部开始倒计时
this.$refs.code.start();
}
})
this.$api('sendSms', {
username: this.form1.userName,
}, res => {
if (res.code == 200) {
uni.hideLoading();
// 这里此提示会被this.start()方法中的提示覆盖
uni.$uv.toast('验证码已发送');
// 通知验证码组件内部开始倒计时
this.$refs.code.start();
}
})
} else {
uni.$uv.toast('请勿重复发送');
}
@ -227,7 +236,7 @@
.refundsOrExchange {
background-color: #FFF;
height: 100vh;
.frame {
background-color: #FFF;
@ -277,14 +286,14 @@
}
}
}
.btn {
// height: 5vh;
display: flex;
justify-content: center;
margin: 90rpx 0 0 0;
.a {
display: flex;
justify-content: center;
@ -298,18 +307,18 @@
font-size: 30rpx;
}
}
.bottomTab {
display: flex;
justify-content: space-between;
height: 10vh;
padding: 0 80rpx;
margin-top: 30rpx;
.tabbarItemActive {
color: $uni-color;
}
.tabbarItemNoActive {
color: #9c9fa4;
}


+ 489
- 410
pages_order/order/myOrderDetail.vue View File

@ -1,418 +1,497 @@
<template>
<view class="page">
<navbar :title="$t('other.OrderInfo')" leftClick @leftClick="$utils.navigateBack"/>
<view class="info">
<view class="flex">
<!--订单基本信息-->
<view class="server-item">
<view class="img-box">
<img :src="orderInfo.pic" style="width: 100%;height: 100%;"/>
</view>
<view class="server-info">
<view class="server-title">
{{ $t('other.aluminumProducts') }}
</view>
<view class="current-price">
<text class="unit">{{ $t('components.productSpecification') }}：</text>
<text class="text"> {{ $t('other.specification') }}</text>
</view>
<view class="sales-volume" style="margin-top: 5px;">
<view class="desc"> {{ $t('other.pickupDate') }}：{{ orderInfo.takeTime }}</view>
</view>
</view>
</view>
<!--收货地址-->
<view class="line address">
<view class="address-top">
<view class="">
{{ $t('components.shippingAddress') }}
</view>
<view class="copy">
<img src="../static/order/copy.png"
style="width:40rpx;height:40rpx;"
@click="$utils.copyText('1')">
</view>
</view>
<view class="addressDetail">
<view class="">{{ orderInfo.userName }}&nbsp;&nbsp;&nbsp; {{ orderInfo.phone }}</view>
<view class="">
{{ orderInfo.address }}
</view>
</view>
</view>
<!-- 订单信息 -->
<view class="line">
<view class="t min_tips">
<view class="">
{{ $t('components.orderInfo') }}
</view>
</view>
<view class="min_tips">
<view class="">
{{ $t('components.orderNumber') }}
</view>
<view class="">
{{ orderInfo.id }}
</view>
</view>
<view class="min_tips">
<view class="">
{{ $t('components.orderTime') }}
</view>
<view class="">
{{ orderInfo.createTime }}
</view>
</view>
</view>
<!--&lt;!&ndash; 下单须知 &ndash;&gt;-->
<!--<view class="line">-->
<!-- <view class="t min_tips">-->
<!-- <view class="">-->
<!-- {{ $t('components.orderNotice') }}-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="xdxz" style="line-height: 40rpx;">-->
<!-- &lt;!&ndash;<uv-parse :content="content"></uv-parse>&ndash;&gt;-->
<!-- <view>1. 请您在收货时间前15分钟内到货，否则将视为放弃挂单。</view>-->
<!-- <view>2. 请您在收货地址提供的手机号码收到货物</view>-->
<!-- </view>-->
<!--</view>-->
</view>
</view>
<!-- 联系客服弹框 -->
<customerServicePopup ref="customerServicePopup"/>
</view>
<view class="page">
<navbar :title="$t('other.OrderInfo')" leftClick @leftClick="$utils.navigateBack" />
<view class="info">
<view class="flex">
<!--订单基本信息-->
<view class="server-item">
<view class="img-box">
<img :src="orderInfo.pic" style="width: 100%;height: 100%;" />
</view>
<view class="server-info">
<view class="server-title">
{{ $t('other.aluminumProducts') }}
</view>
<view class="current-price">
<text class="unit">{{ $t('components.productSpecification') }}：</text>
<text class="text"> {{ $t('other.specification') }}</text>
</view>
<view class="sales-volume" style="margin-top: 5px;">
<view class="desc"> {{ $t('other.pickupDate') }}：{{ orderInfo.takeTime }}</view>
</view>
</view>
</view>
<!--收货地址-->
<view class="line address">
<view class="address-top">
<view class="">
<!-- {{ $t('components.shippingAddress') }} -->
提货地址
</view>
<view class="copy">
<img src="../static/order/copy.png" style="width:40rpx;height:40rpx;"
@click="$utils.copyText(orderInfo.address)">
</view>
</view>
<view class="addressDetail">
<!-- <view class="">联系电话：{{ orderInfo.phone }}</view> -->
<view class="">
{{ orderInfo.address }}
</view>
</view>
</view>
<!-- 开户信息 -->
<view class="line">
<view class="t min_tips">
<view class="">
供应商
</view>
</view>
<view class="min_tips">
<view class="">
公司名称
</view>
<view class="">
{{ orderInfo.companyName }}
</view>
</view>
<view class="min_tips">
<view class="">
联系电话
</view>
<view class="">
{{ orderInfo.phone }}
</view>
</view>
<view class="min_tips">
<view class="">
开户行
</view>
<view class="">
{{ orderInfo.bankName }}
</view>
</view>
<view class="min_tips">
<view class="">
银行卡号
</view>
<view class="">
{{ orderInfo.bankAccount }}
</view>
</view>
</view>
<!-- 采购商 -->
<view class="line">
<view class="t min_tips">
<view class="">
采购商
</view>
</view>
<view class="min_tips">
<view class="">
公司名称
</view>
<view class="">
{{ orderInfo.userName }}
</view>
</view>
</view>
<!-- 订单信息 -->
<view class="line">
<view class="t min_tips">
<view class="">
{{ $t('components.orderInfo') }}
</view>
</view>
<view class="min_tips">
<view class="">
{{ $t('components.orderNumber') }}
</view>
<view class="">
{{ orderInfo.id }}
</view>
</view>
<view class="min_tips">
<view class="">
{{ $t('components.orderTime') }}
</view>
<view class="">
{{ orderInfo.createTime }}
</view>
</view>
<view class="min_tips">
<view class="">
数量
</view>
<view class="">
{{ orderInfo.num }}
</view>
</view>
<view class="min_tips">
<view class="">
单价
</view>
<view class="">
{{ orderInfo.price }}￥
</view>
</view>
<view class="min_tips">
<view class="">
保证金
</view>
<view class="">
{{ orderInfo.deposit }}￥
</view>
</view>
</view>
<!--&lt;!&ndash; 下单须知 &ndash;&gt;-->
<!--<view class="line">-->
<!-- <view class="t min_tips">-->
<!-- <view class="">-->
<!-- {{ $t('components.orderNotice') }}-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="xdxz" style="line-height: 40rpx;">-->
<!-- &lt;!&ndash;<uv-parse :content="content"></uv-parse>&ndash;&gt;-->
<!-- <view>1. 请您在收货时间前15分钟内到货，否则将视为放弃挂单。</view>-->
<!-- <view>2. 请您在收货地址提供的手机号码收到货物</view>-->
<!-- </view>-->
<!--</view>-->
</view>
</view>
<!-- 联系客服弹框 -->
<customerServicePopup ref="customerServicePopup" />
</view>
</template>
<script>
import customerServicePopup from "@/components/config/customerServicePopup.vue";
export default {
name: "orderDetail2",
components: {customerServicePopup},
onLoad(options) {
if (options.orderInfo) {
this.orderInfo = JSON.parse(decodeURIComponent(options.orderInfo));
console.log(this.orderInfo, "解析后的订单数据"); // 解析后的订单数据
}
},
data() {
return {
orderInfo: {},
}
},
onShow() {
// this.queryOrderInfo()
},
methods: {
// 采购商根据订单id查询订单信息
queryOrderInfo() {
this.$api('getMyOrderInfo', this.orderId, res => {
console.log(res, "订单信息")
this.orderInfo = res.result
})
},
},
}
import customerServicePopup from "@/components/config/customerServicePopup.vue";
export default {
name: "orderDetail2",
components: {
customerServicePopup
},
onLoad(options) {
if (options.orderInfo) {
this.orderInfo = JSON.parse(decodeURIComponent(options.orderInfo));
console.log(this.orderInfo, "解析后的订单数据"); // 解析后的订单数据
}
},
data() {
return {
orderInfo: {},
}
},
onShow() {
// this.queryOrderInfo()
},
methods: {
// 采购商根据订单id查询订单信息
queryOrderInfo() {
this.$api('getMyOrderInfo', this.orderId, res => {
console.log(res, "订单信息")
this.orderInfo = res.result
})
},
},
}
</script>
<style lang="scss" scoped>
.page {
.info {
margin: 10px;
padding: 20rpx;
background-color: #fff;
width: calc(100% - 40px);
border-radius: 10px;
.head-title {
font-family: PingFang SC, PingFang SC-Bold;
color: #2f2e2e;
line-height: 30rpx;
margin-left: 10rpx;
}
.server-item {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
background: white;
border-radius: 15rpx;
box-sizing: border-box;
margin: 20rpx 0rpx;
width: 100%;
.img-box {
width: 150rpx;
height: 150rpx;
border-radius: 10rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.server-info {
display: flex;
flex-direction: column;
justify-content: space-around;
width: calc(100% - 180rpx);
box-sizing: border-box;
padding: 10rpx 15rpx;
.server-title {
display: flex;
margin-bottom: 10rpx;
}
.coupon {
display: flex;
justify-content: center;
align-items: center;
background: #F29E45;
color: white;
width: 120rpx;
height: 40rpx;
border-radius: 10rpx;
margin-left: 10rpx;
font-size: 22rpx;
}
.time-coupon,
.price {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.time-coupon {
margin: 10rpx 0rpx;
font-size: 26rpx;
justify-content: space-between;
width: 100%;
.flex {
justify-content: center;
align-items: center;
}
image {
width: 25rpx;
height: 25rpx;
}
.time {
color: #B8B8B8;
margin-left: 6rpx;
}
}
.sales-volume {
display: flex;
align-items: center;
color: #B8B8B8;
font-size: 24rpx;
image {
width: 25rpx;
height: 25rpx;
}
}
}
}
.address {
.address-top {
display: flex;
justify-content: space-between;
align-items: center;
image {
width: 30rpx;
height: 30rpx;
}
}
.addressDetail {
color: #777;
font-size: 26rpx;
padding: 5px 0;
}
text {
background-color: #F29E45;
padding: 8rpx 10rpx;
color: #fff;
font-size: 20rpx;
margin-left: 10px;
border-radius: 5px;
}
}
.min_tips {
font-size: 22rpx;
color: #777;
display: flex;
justify-content: space-between;
padding: 5px 0;
align-items: center;
}
.btns {
display: flex;
justify-content: center;
align-items: center;
gap: 40rpx;
.oneBtn {
display: flex;
align-items: center;
justify-content: center;
width: 40%;
height: 70rpx;
padding: 10rpx;
border-radius: 40rpx;
color: white;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: #293143;
//margin-top: 20rpx;
border-radius: 40rpx;
}
.twoBtn {
display: flex;
align-items: center;
justify-content: center;
width: 40%;
height: 70rpx;
padding: 10rpx;
border-radius: 40rpx;
color: #000000;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: #f2f2f2;
//margin-top: 20rpx;
border-radius: 40rpx;
}
}
.xdxz {
font-size: 24rpx;
color: #777;
line-height: 30rpx;
}
.current-price {
font-size: 24rpx;
color: #8c8888;
.unit {
}
.text {
}
}
.line {
border-top: 2px dotted #00000011;
padding: 20rpx 0;
.t {
padding: 5px 0;
color: #000;
font-size: 26rpx;
}
}
.head-div {
.nickname {
font-size: 30rpx;
font-weight: 600;
text-align: left;
line-height: 42rpx;
display: flex;
align-items: center;
.tag {
position: relative;
display: flex;
align-items: center;
image {
height: 45rpx;
width: 90rpx;
vertical-align: middle;
}
.auth {
position: absolute;
white-space: nowrap;
color: $uni-color;
left: 23rpx;
font-size: 17rpx;
}
}
}
.days {
font-size: 20rpx;
font-weight: 400;
text-align: left;
line-height: 56rpx;
display: flex;
align-items: center;
view {
padding-left: 5px;
}
}
}
.btn-x {
color: $uni-color;
border: 1px solid $uni-color;
padding: 10rpx 20rpx;
border-radius: 30rpx;
}
.btns {
display: flex;
justify-content: center;
.btn {
color: $uni-color;
border: 1px solid $uni-color;
padding: 10rpx 20rpx;
border-radius: 30rpx;
}
}
}
}
.page {
.info {
margin: 10px;
padding: 20rpx;
background-color: #fff;
width: calc(100% - 40px);
border-radius: 10px;
.head-title {
font-family: PingFang SC, PingFang SC-Bold;
color: #2f2e2e;
line-height: 30rpx;
margin-left: 10rpx;
}
.server-item {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
background: white;
border-radius: 15rpx;
box-sizing: border-box;
margin: 20rpx 0rpx;
width: 100%;
.img-box {
width: 150rpx;
height: 150rpx;
border-radius: 10rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.server-info {
display: flex;
flex-direction: column;
justify-content: space-around;
width: calc(100% - 180rpx);
box-sizing: border-box;
padding: 10rpx 15rpx;
.server-title {
display: flex;
margin-bottom: 10rpx;
}
.coupon {
display: flex;
justify-content: center;
align-items: center;
background: #F29E45;
color: white;
width: 120rpx;
height: 40rpx;
border-radius: 10rpx;
margin-left: 10rpx;
font-size: 22rpx;
}
.time-coupon,
.price {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.time-coupon {
margin: 10rpx 0rpx;
font-size: 26rpx;
justify-content: space-between;
width: 100%;
.flex {
justify-content: center;
align-items: center;
}
image {
width: 25rpx;
height: 25rpx;
}
.time {
color: #B8B8B8;
margin-left: 6rpx;
}
}
.sales-volume {
display: flex;
align-items: center;
color: #B8B8B8;
font-size: 24rpx;
image {
width: 25rpx;
height: 25rpx;
}
}
}
}
.address {
.address-top {
display: flex;
justify-content: space-between;
align-items: center;
image {
width: 30rpx;
height: 30rpx;
}
}
.addressDetail {
color: #777;
font-size: 26rpx;
padding: 5px 0;
}
text {
background-color: #F29E45;
padding: 8rpx 10rpx;
color: #fff;
font-size: 20rpx;
margin-left: 10px;
border-radius: 5px;
}
}
.min_tips {
font-size: 22rpx;
color: #777;
display: flex;
justify-content: space-between;
padding: 5px 0;
align-items: center;
}
.btns {
display: flex;
justify-content: center;
align-items: center;
gap: 40rpx;
.oneBtn {
display: flex;
align-items: center;
justify-content: center;
width: 40%;
height: 70rpx;
padding: 10rpx;
border-radius: 40rpx;
color: white;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: #293143;
//margin-top: 20rpx;
border-radius: 40rpx;
}
.twoBtn {
display: flex;
align-items: center;
justify-content: center;
width: 40%;
height: 70rpx;
padding: 10rpx;
border-radius: 40rpx;
color: #000000;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: #f2f2f2;
//margin-top: 20rpx;
border-radius: 40rpx;
}
}
.xdxz {
font-size: 24rpx;
color: #777;
line-height: 30rpx;
}
.current-price {
font-size: 24rpx;
color: #8c8888;
.unit {}
.text {}
}
.line {
border-top: 2px dotted #00000011;
padding: 20rpx 0;
.t {
padding: 5px 0;
color: #000;
font-size: 26rpx;
}
}
.head-div {
.nickname {
font-size: 30rpx;
font-weight: 600;
text-align: left;
line-height: 42rpx;
display: flex;
align-items: center;
.tag {
position: relative;
display: flex;
align-items: center;
image {
height: 45rpx;
width: 90rpx;
vertical-align: middle;
}
.auth {
position: absolute;
white-space: nowrap;
color: $uni-color;
left: 23rpx;
font-size: 17rpx;
}
}
}
.days {
font-size: 20rpx;
font-weight: 400;
text-align: left;
line-height: 56rpx;
display: flex;
align-items: center;
view {
padding-left: 5px;
}
}
}
.btn-x {
color: $uni-color;
border: 1px solid $uni-color;
padding: 10rpx 20rpx;
border-radius: 30rpx;
}
.btns {
display: flex;
justify-content: center;
.btn {
color: $uni-color;
border: 1px solid $uni-color;
padding: 10rpx 20rpx;
border-radius: 30rpx;
}
}
}
}
</style>

+ 2
- 2
pages_order/tradingPlatform/confirmOrder.vue View File

@ -41,9 +41,9 @@
</view>
<view class="tip">
<!-- <view class="tip">
{{ $t('components.paymentNotice') }}
</view>
</view> -->
</view>


Write Preview
Loading…
Cancel
Save