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
chenkun 4 months ago
parent
af490ad25a
commit
b25ad1c67e
15 changed files with 993 additions and 14 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -3
      components/base/tabbar.vue
  2. +8
    -4
      components/user/productList.vue
  3. +2
    -2
      locale/en.json
  4. +22
    -1
      pages.json
  5. +174
    -0
      pages/index/center2.vue
  6. +102
    -0
      pages/index/clearanceService.vue
  7. +0
    -3
      pages/index/tradingPlatform.vue
  8. +1
    -1
      pages_order/auth/registerShop.vue
  9. +1
    -0
      pages_order/static/address/1.svg
  10. +205
    -0
      pages_order/tradingPlatform/confirmOrder.vue
  11. +475
    -0
      pages_order/tradingPlatform/nowOrder.vue
  12. BIN
      static/image/1.png
  13. BIN
      static/image/address/icon.png
  14. BIN
      static/image/address/selectIcon.png
  15. BIN
      static/image/clearanceService.png

+ 3
- 3
components/base/tabbar.vue View File

@ -46,14 +46,14 @@
},
{
"selectedIconPath": "/static/image/tabbar/clearanceService-a.png",
"iconPath": "/static/image/tabbar/cart.png",
"pagePath": "/pages/index/cart",
"iconPath": "/static/image/tabbar/clearanceService.png",
"pagePath": "/pages/index/clearanceService",
"title": "tabbar.title.3"
},
{
"selectedIconPath": "/static/image/tabbar/center-a.png",
"iconPath": "/static/image/tabbar/center.png",
"pagePath": "/pages/index/center",
"pagePath": "/pages/index/center2",
"title": "tabbar.title.4"
}
]


+ 8
- 4
components/user/productList.vue View File

@ -2,7 +2,7 @@
<view class="list">
<view class="item"
v-for="(item, index) in 10"
@click="$utils.navigateTo('/pages_order/product/productDetail?id=123')"
@click="immediatePurchase(item)"
:key="index">
<image
class="image"
@ -28,7 +28,7 @@
</view>
</view>
<view class="btn">
<view @click="immediatePurchase(item)" class="change">
<view class="change">
立即采购
</view>
</view>
@ -45,7 +45,11 @@ export default {
methods: {
// 立即购买
immediatePurchase(item) {
console.log("====")
var itemStr = encodeURIComponent(JSON.stringify(item));
uni.navigateTo({
url: `/pages_order/tradingPlatform/nowOrder?params=${itemStr}`,
});
}
},
}
@ -118,7 +122,7 @@ export default {
.btn {
position: absolute;
right: 0rpx;
bottom:0rpx;
bottom: 0rpx;
padding: 10rpx;
border-radius: 50%;
//background-color: $uni-color;


+ 2
- 2
locale/en.json View File

@ -10,8 +10,8 @@
"language" : "Change Language",
"purchaser":"purchaser",
"supplier":"supplier",
"companyProfile":"公司简介",
"aluminiumProduct":"铝制品"
"companyProfile":"companyProfile",
"aluminiumProduct":"aluminiumProduct"
}
}
},


+ 22
- 1
pages.json View File

@ -11,6 +11,12 @@
"navigationBarTitleText": ""
}
},
{
"path": "pages/index/clearanceService",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/index/order",
"style": {
@ -29,6 +35,12 @@
"navigationBarTitleText": ""
}
},
{
"path": "pages/index/center2",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/index/cart",
"style": {
@ -53,6 +65,15 @@
{
"path": "auth/registerShop"
},
{
"path": "tradingPlatform/nowOrder"
},
{
"path": "tradingPlatform/confirmOrder"
},
{
"path": "tradingPlatform/confirmOrder"
},
{
"path": "mine/purse"
@ -86,7 +107,7 @@
}],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "酒店桌布",
"navigationBarTitleText": "铝交易",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"navigationStyle": "custom"


+ 174
- 0
pages/index/center2.vue View File

@ -0,0 +1,174 @@
<template>
<view class="page">
<navbar title="个人中心"/>
<view class="frame">
<!-- 头部 -->
<view class="head">
<view class="headImage">
<image src="" mode=""></image>
</view>
<view class="info">
<view class="name">
倾心.
</view>
<!-- <view class="vip">
VIP1
</view> -->
<view class="tips">
手机号：13812345678
</view>
</view>
<view class="headBtn" @click="headBtn">
角色切换
</view>
<view class="setting">
<uv-icon name="setting" size="40rpx"></uv-icon>
</view>
</view>
<!--内容-->
<view class="content">
<view class="item" v-for="(item, index) in list" :key="index">
<view class="key">
<view class="img">
<img :src="item.imgUrl" style="width: 100%; height: 100%;"/>
</view>
<view class="text">
{{item.text}}
</view>
</view>
<view class="value">
{{item.value}}
</view>
</view>
</view>
</view>
<tabber select="3"/>
</view>
</template>
<script>
import topbar from "@/components/base/topbar.vue";
import tabber from "@/components/base/tabbar.vue";
export default {
name: "center2",
components: {tabber, topbar},
data() {
return {
list:[
{text: '联系客服', value: ">" , imgUrl: '/static/image/center/1.png'},
{text: '系统设置', value: ">" , imgUrl: '/static/image/center/1.png'},
{text: '关于我们', value: ">" , imgUrl: '/static/image/center/1.png'}
]
}
},
methods: {},
}
</script>
<style scoped lang="scss">
.page {
.frame {
.head {
display: flex;
background-color: $uni-color;
padding: 40rpx 20rpx;
align-items: center;
position: relative;
color: #fff;
box-shadow: 0 10rpx 20rpx rgba(89, 80, 80, 0.1);
.headImage {
width: 120rpx;
height: 120rpx;
background-image: url(/static/image/center/3.png);
background-size: 100% 100%;
overflow: hidden;
border-radius: 50%;
margin-right: 40rpx;
}
.info {
font-size: 28rpx;
.vip {
background-color: #FCCC92;
color: #FA6239;
width: 100rpx;
display: flex;
justify-content: center;
align-items: center;
height: 40rpx;
border-radius: 20rpx;
margin-top: 20rpx;
}
.name {
font-size: 32rpx;
}
.tips {
font-size: 26rpx;
color: #ABABAB;
}
}
.headBtn {
margin-left: auto;
padding: 15rpx 20rpx;
background-color: $uni-color;
color: #fff;
border-radius: 20rpx;
margin-top: 50rpx;
}
.setting {
position: absolute;
right: 50rpx;
top: 50rpx;
}
}
.content {
background-color: #2e2e2e;
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 40rpx;
.key {
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
font-size: 32rpx;
.img {
width: 40rpx;
height: 40rpx;
}
.text {
margin-left: 20rpx;
}
}
.value {
color: #FFF;
font-size: 36rpx;
}
}
}
}
}
</style>

+ 102
- 0
pages/index/clearanceService.vue View File

@ -0,0 +1,102 @@
<template>
<view class="page">
<view class="frame">
<!--顶部导航栏-->
<topbar showRight="0"></topbar>
<!--内容区域-->
<view class="content">
<view class="bigImg">
<!--换成后端后删除对应的图片-->
<img src="../../static/image/clearanceService.png" alt="" style="width: 100%;height: 100%;">
</view>
<view class="smallImg">
<!--换成后端后删除对应的图片-->
<img src="../../static/image/1.png" alt="" style="width: 100%;height: 100%;">
</view>
<view class="ljsq">
<span @click="applyClearanceService" class="text">
立即申请&nbsp;&nbsp;>>
</span>
</view>
</view>
</view>
<!--底部导航栏-->
<tabber select="2"/>
</view>
</template>
<script>
import topbar from "@/components/base/topbar.vue";
import tabber from "@/components/base/tabbar.vue";
export default {
name: "clearanceService",
components: {tabber, topbar},
data() {
return {}
},
methods: {
applyClearanceService(){
uni.navigateTo({
// titleList: ['采购商注册', '供应商注册','国内清关申请'],
url: `/pages_order/auth/registerShop?identity=2`
})
},
},
}
</script>
<style scoped lang="scss">
.page {
.frame {
.content {
height: calc(100vh - 120rpx - 120rpx);
background-color: #2d384c;
width: 100vw;
.bigImg {
display: flex;
justify-content: center;
align-items: center;
height: 90%;
padding: 20rpx;
}
.smallImg {
position: absolute;
left: calc(50% - 80rpx);
bottom: 350rpx;
width: 160rpx;
height: 160rpx;
}
.ljsq{
display: flex;
align-items: center;
justify-content: center;
width: 300rpx;
height: 70rpx;
border-radius: 40rpx;
color: #FFF;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: #FFF;
border-radius: 40rpx;
position: absolute;
left: calc(50% - 150rpx);
bottom: 550rpx;
.text{
color: #000;
font-size: 38rpx;
}
}
}
}
}
</style>

+ 0
- 3
pages/index/tradingPlatform.vue View File

@ -26,10 +26,7 @@
<productList :productList="productList.records"/>
</view>
</view>
</view>
<tabber select="1"/>
</view>
</template>


+ 1
- 1
pages_order/auth/registerShop.vue View File

@ -158,7 +158,7 @@ export default {
data() {
return {
titleIndex: 0,
titleList: ['采购商注册', '供应商注册'],
titleList: ['采购商注册', '供应商注册','国内清关申请'],
form: {
userName: '',
name: '',


+ 1
- 0
pages_order/static/address/1.svg View File

@ -0,0 +1 @@
<svg t="1724496486273" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4383" width="32" height="32"><path d="M512 128c-211.744 0-384 172.256-384 384s172.256 384 384 384 384-172.256 384-384-172.256-384-384-384z m0 704c-176.448 0-320-143.552-320-320s143.552-320 320-320 320 143.552 320 320-143.552 320-320 320z" fill="#bfbfbf" p-id="4384"></path><path d="M660.736 606.112L528 529.344V320c0-17.664-14.336-32-32-32s-32 14.336-32 32v224c0 11.872 14.752 21.824 24.352 27.328 2.656 4 9.952 7.616 14.4 10.176l132 80c15.296 8.832 31.872 3.584 40.704-11.712s0.608-34.848-14.72-43.68z" fill="#bfbfbf" p-id="4385"></path></svg>

+ 205
- 0
pages_order/tradingPlatform/confirmOrder.vue View File

@ -0,0 +1,205 @@
<template>
<view class="confirmOrder">
<navbar title="确定下单" leftClick @leftClick="$utils.navigateBack"/>
<view class="frame">
<view class="title">
支付保证金
</view>
<!--填写信息-->
<view class="form">
<!--开户名称-->
<view class="item">
<view>开户名称</view>
<view>
<input v-model="form.a" placeholder="请输入开户名称" clearable></input>
</view>
</view>
<!--开户行-->
<view class="item">
<view>开户行</view>
<view>
<input v-model="form.b" placeholder="请输入开开户行" clearable></input>
</view>
</view>
<!--银行账号-->
<view class="item">
<view>银行账号</view>
<view>
<input v-model="form.c" placeholder="请输入银行账号" clearable></input>
</view>
</view>
<view class="tip">
提示:请于下单成功后30分钟内支付。(自动倒计时)
</view>
</view>
<!--立即下单和联系我们-->
<view class="btns">
<span @click="confirmOrder" class="qrdd">
确认下单
</span>
<span @click="closeOrder" class="qxdd">
取消订单
</span>
</view>
</view>
</view>
</template>
<script>
export default {
name: "confirmOrder",
onLoad(options) {
if (options.params) {
const fatherData = JSON.parse(decodeURIComponent(options.params));
console.log(fatherData, "fatherData==========")
this.fatherData = fatherData;
}
},
data() {
return {
fatherData: {},
form: {
a: "",
b: "",
c: "",
},
}
},
methods: {
//确认下单
confirmOrder() {
},
//取消订单
closeOrder() {
},
},
}
</script>
<style scoped lang="scss">
.confirmOrder {
background-color: #FFF;
height: 100vh;
.frame {
.title {
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
color: #000;
padding: 30rpx;
}
.form {
margin: 20rpx;
border: 1px solid #efefef;
border-radius: 20rpx;
overflow: hidden;
.item {
display: flex;
align-items: center;
background-color: #FFF;
height: 100rpx;
padding: 10rpx 0 0 20rpx;
border-bottom: 1px solid #efefef;
> view:nth-of-type(1) {
width: 30%;
// font-weight: 700;
}
> view:nth-of-type(2) {
width: 70%;
border-radius: 10rpx;
overflow: hidden;
input {
background-color: #FFF;
font-size: 28rpx;
padding: 16rpx 8rpx 16rpx 15rpx;
}
}
}
.tip {
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #f95e7d;
background-color: #f5f5f5;
height: 40rpx;
//margin-top: 20rpx;
padding: 10rpx;
}
}
.btns {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20rpx;
position: fixed;
bottom: 80rpx;
left: 0;
right: 0;
.qrdd {
display: flex;
align-items: center;
justify-content: center;
width: 500rpx;
height: 70rpx;
border-radius: 40rpx;
color: #FFF;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: $uni-color;
//margin-top: 20rpx;
border-radius: 40rpx;
}
.qxdd {
display: flex;
align-items: center;
justify-content: center;
width: 500rpx;
height: 70rpx;
border-radius: 40rpx;
color: #000000;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: #f1f1f1;
//margin-top: 20rpx;
border-radius: 40rpx;
}
}
}
}
</style>

+ 475
- 0
pages_order/tradingPlatform/nowOrder.vue View File

@ -0,0 +1,475 @@
<template>
<view class="now-order">
<navbar title="立即下单" leftClick @leftClick="$utils.navigateBack"/>
<view class="frame">
<view class="title">
<span
style="width: 10rpx;height: 40rpx;background-color: #1f1c39;border-radius: 10rpx;overflow: hidden;"></span>
<span>铝制品</span>
</view>
<view class="basic-info">
<!--商品规格-->
<view class="item">
<view>商品规格</view>
<view>
铝制品(Al>96%)
</view>
</view>
<!--<uv-divider text="" :hairline="true"></uv-divider>-->
<!--提货地点-->
<view class="currentRegion">
<view>提货地点</view>
<view @click.stop="selectAddr">
<input class="input"
disabled
v-model="form.currentRegion" placeholder="请选择所在地区"></input>
<view class="orientation">
<!-- 定位 -->
<img src="../../static/image/address/selectIcon.png"
style="width:30rpx;height: 30rpx;margin:5rpx 5rpx 5rpx 5rpx;">
</view>
</view>
</view>
<!--详细地址-->
<view class="item">
<view>详细地址</view>
<view>
<input v-model="form.address" placeholder="请输入详细地址" clearable></input>
</view>
</view>
<!--交货日期-->
<view class="delivery-date">
<view>交货日期</view>
<view class="value">
<view class="dateTimeCls">
<view class="date" @click="startDateOpen">
{{ form.deliveryDate }}
<uv-datetime-picker ref="startDateRef" v-model="form.deliveryDate" mode="date"
@confirm="startDateChange"></uv-datetime-picker>
</view>
<view class="img">
>
<!--<img src="../static/address/1.svg" style="width: 40rpx;-->
<!--height: 40rpx;">-->
</view>
</view>
</view>
</view>
<!--暂定数量-->
<view class="tentativeQuantity">
<view class="key">暂定数量(吨)</view>
<view class="value">
<uv-number-box v-model="form.tentativeQuantity"></uv-number-box>
</view>
</view>
<!--单价-->
<view class="item">
<view>单价</view>
<view>
<input v-model="form.price" disabled clearable></input>
</view>
</view>
<!--履约保证金-->
<view class="performanceBond">
<view class="key">履约保证金</view>
<view class="value">
<input v-model="form.performanceBond" clearable></input>
</view>
</view>
<view class="Tip">
<span class="span">(单价*数量*2%)</span>
</view>
‘
<!--立即下单和联系我们-->
<view class="btns">
<span @click="ljxd" class="ljxd">
立即下单
</span>
<span @click="contactUs" class="lxwm">
联系我们
</span>
<span class="tip">如有问题，请联系我们</span>
</view>
</view>
</view>
</view>
</template>
<script>
import topbar from "@/components/base/topbar.vue";
import {mapGetters} from 'vuex'
import Position from '@/utils/position.js'
import dayjs from "dayjs";
export default {
components: {
topbar,
},
computed: {
...mapGetters(['userShop']),
},
onLoad(options) {
if (options.params) {
const fatherData = JSON.parse(decodeURIComponent(options.params));
console.log(fatherData, "fatherData==========")
this.fatherData = fatherData;
}
},
data() {
return {
fatherData: {},
form: {
currentRegion: '',
address: '',
tentativeQuantity: 0,
deliveryDate: dayjs(new Date()).format("YYYY-MM-DD"),
price: 0,
performanceBond: 0,
latitude: '',
longitude: '',
},
phoneNumber: '00000000000'
}
},
methods: {
// 立即下单
ljxd() {
var itemStr = encodeURIComponent(JSON.stringify(this.form));
uni.navigateTo({
url: `/pages_order/tradingPlatform/confirmOrder?params=${itemStr}`,
});
},
// 联系我们
contactUs() {
uni.makePhoneCall({
phoneNumber: this.phoneNumber,
success() {
console.log('ios拨打成功');
},
fail() {
console.log('ios拨打失败');
}
})
},
startDateChange(val) {
this.$nextTick(() => {
this.form.deliveryDate = dayjs(val.value).format("YYYY-MM-DD")
});
},
startDateOpen() {
this.$refs.startDateRef.open();
},
//地图上选择地址
selectAddr() {
Position.getLocation(res => {
Position.selectAddress(res.longitude, res.latitude, success => {
this.setAddress(success)
})
})
Position.getLocationDetail(res => {
console.log(res);
this.form.address = res
})
},
//提取用户选择的地址信息复制给表单数据
setAddress(res) {
//经纬度信息
this.form.latitude = res.latitude
this.form.longitude = res.longitude
if (!res.address && res.name) { //用户直接选择城市的逻辑
return this.form.currentRegion = res.name
}
if (res.address || res.name) {
return this.form.currentRegion = res.address + res.name
}
this.form.currentRegion = '' //用户啥都没选就点击勾选
},
}
}
</script>
<style scoped lang="scss">
.now-order {
background-color: #FFF;
height: 100vh;
.frame {
.title {
display: flex;
font-size: 30rpx;
font-weight: 700;
padding: 0rpx 0 0rpx 20rpx;
margin: 20rpx 0 0 0;
> span:nth-of-type(1) {
margin: 4rpx 0 0 8rpx;
background-color: #FFF;
}
> span:nth-of-type(2) {
margin: 0 0 0 8rpx;
background-color: #FFF;
}
}
.basic-info {
display: flex;
flex-direction: column;
gap: 5rpx;
background-color: #FFF;
//margin-top: 20rpx;
padding: 20rpx 20rpx 20rpx 20rpx;
.delivery-date {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
padding: 10rpx 0 0 20rpx;
> view:nth-of-type(1) {
width: 30%;
// font-weight: 700;
}
.value {
width: 70%;
border-radius: 10rpx;
overflow: hidden;
.dateTimeCls {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 80%;
//border: 1px solid #b0b2b3;
padding: 5rpx;
border-radius: 20rpx;
.date {
font-size: 30rpx;
display: flex;
align-items: center;
width: 80%;
height: 100%;
color: #000;
}
.img {
display: flex;
justify-content: center;
align-items: center;
//margin-left: 50rpx;
width: 20%;
//height: 100%;
}
}
}
}
.tentativeQuantity {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
padding: 10rpx 0 0 20rpx;
.key {
width: 30%;
}
.value {
width: 70%;
border-radius: 10rpx;
overflow: hidden;
}
}
.Tip {
display: flex;
align-items: center;
justify-content: center;
.span {
color: #999;
font-size: 24rpx;
}
}
.btns {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20rpx;
.ljxd {
display: flex;
align-items: center;
justify-content: center;
width: 500rpx;
height: 70rpx;
border-radius: 40rpx;
color: #FFF;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: $uni-color;
//margin-top: 20rpx;
border-radius: 40rpx;
}
.lxwm {
display: flex;
align-items: center;
justify-content: center;
width: 500rpx;
height: 70rpx;
border-radius: 40rpx;
color: #000000;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: #f1f1f1;
//margin-top: 20rpx;
border-radius: 40rpx;
}
.tip {
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #999;
//width: 500rpx;
}
}
.item {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
padding: 10rpx 0 0 20rpx;
> view:nth-of-type(1) {
width: 30%;
// font-weight: 700;
}
> view:nth-of-type(2) {
width: 70%;
border-radius: 10rpx;
overflow: hidden;
input {
background-color: #FFF;
font-size: 28rpx;
padding: 16rpx 8rpx 16rpx 15rpx;
}
}
}
.performanceBond {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
padding: 10rpx 0 0 20rpx;
.key {
width: 30%;
// font-weight: 700;
}
.value {
width: 70%;
border-radius: 10rpx;
overflow: hidden;
input {
background-color: #FFF;
font-size: 28rpx;
padding: 16rpx 8rpx 16rpx 15rpx;
}
}
}
.currentRegion {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
padding: 10rpx 0 0 20rpx;
> view:nth-of-type(1) {
width: 30%;
// font-weight: 700;
}
> view:nth-of-type(2) {
width: 70%;
padding: 0 20rpx 0 0;
display: flex;
.input {
background-color: #f5f5f5;
// color: #a4a4a4;
font-size: 28rpx;
padding: 8rpx 8rpx 8rpx 15rpx;
width: 350rpx;
}
.orientation {
display: flex;
padding: 10rpx 10rpx 10rpx 20rpx;
font-size: 30rpx;
color: #FBAB32;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
}
}
}
}
</style>

BIN
static/image/1.png View File

Before After
Width: 58  |  Height: 59  |  Size: 3.0 KiB

BIN
static/image/address/icon.png View File

Before After
Width: 96  |  Height: 96  |  Size: 4.5 KiB

BIN
static/image/address/selectIcon.png View File

Before After
Width: 28  |  Height: 36  |  Size: 1.3 KiB

BIN
static/image/clearanceService.png View File

Before After
Width: 277  |  Height: 330  |  Size: 62 KiB

Write Preview
Loading…
Cancel
Save