build(custom): 修正提交规范
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '商品详情',
|
||||
navigationStyle: 'custom',
|
||||
})
|
||||
navigationBarTitleText: "商品详情",
|
||||
navigationStyle: "custom",
|
||||
});
|
||||
|
||||
@@ -1,111 +1,109 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="head-wrapper" :style="{ top: BarHeight + 'px' }">
|
||||
<view class="head-menu">
|
||||
<Left class="iconfont" @click="returns"/>
|
||||
<Home class="iconfont" @click="goHome"/>
|
||||
</view>
|
||||
<view class="app">
|
||||
<view class="head-wrapper" :style="{ top: BarHeight + 'px' }">
|
||||
<view class="head-menu">
|
||||
<Left class="iconfont" @click="returns" />
|
||||
<Home class="iconfont" @click="goHome" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 幻灯片 -->
|
||||
<nut-swiper
|
||||
:init-page="0"
|
||||
:pagination-visible="true"
|
||||
pagination-color="#426543"
|
||||
auto-play="3000"
|
||||
>
|
||||
<nut-swiper-item v-for="(itm, idx) in swiperList" :key="idx">
|
||||
<img :alt="idx.toString()" :src="itm" />
|
||||
</nut-swiper-item>
|
||||
</nut-swiper>
|
||||
<!-- 标题价格 -->
|
||||
<view class="card">
|
||||
<view class="header">
|
||||
<nut-price
|
||||
size="large"
|
||||
:price="goodInfo.number as number"
|
||||
position="after"
|
||||
:symbol="payType === 'jf' ? '积分' : '元'"
|
||||
/>
|
||||
<view class="stock"> 库存剩余:{{ goodInfo.stock }} </view>
|
||||
</view>
|
||||
<view class="title">{{ goodInfo.name }}</view>
|
||||
<view class="sub">{{ goodInfo.profile }}</view>
|
||||
</view>
|
||||
<nut-cell title="请选择规格: " is-link @click="openSku"></nut-cell>
|
||||
<!-- 产品介绍 -->
|
||||
<view class="rich-box">
|
||||
<view class="title">产品介绍</view>
|
||||
<rich-text
|
||||
v-if="goodInfo.details"
|
||||
class="rich"
|
||||
:nodes="goodInfo.details"
|
||||
></rich-text>
|
||||
<nut-empty v-else description="暂无产品介绍"></nut-empty>
|
||||
</view>
|
||||
<view style="height: 9vh"></view>
|
||||
<!-- 底部 -->
|
||||
<view class="bottom-box">
|
||||
<view class="left">
|
||||
<view class="icon" @click="toPage('/pages/index/index')">
|
||||
<Home />
|
||||
<view>首页</view>
|
||||
</view>
|
||||
<!-- 幻灯片 -->
|
||||
<nut-swiper
|
||||
:init-page="0"
|
||||
:pagination-visible="true"
|
||||
pagination-color="#426543"
|
||||
auto-play="3000"
|
||||
>
|
||||
<nut-swiper-item v-for="(itm, idx) in swiperList" :key="idx">
|
||||
<img :alt="idx.toString()" :src="itm"/>
|
||||
</nut-swiper-item>
|
||||
</nut-swiper>
|
||||
<!-- 标题价格 -->
|
||||
<view class="card">
|
||||
<view class="header">
|
||||
<nut-price
|
||||
size="large"
|
||||
:price="goodInfo.number as number"
|
||||
position="after"
|
||||
:symbol="payType === 'jf' ? '积分' : '元'"
|
||||
/>
|
||||
<view class="stock">
|
||||
库存剩余:{{ goodInfo.stock }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">{{ goodInfo.name }}</view>
|
||||
<view class="sub">{{ goodInfo.profile }}</view>
|
||||
<!-- <view-->
|
||||
<!-- class="icon"-->
|
||||
<!-- v-if="payType === 'jf'"-->
|
||||
<!-- @click="toPage('/pages/cart/index')"-->
|
||||
<!-- >-->
|
||||
<!-- <Cart/>-->
|
||||
<!-- <view>购物车</view>-->
|
||||
<!-- </view>-->
|
||||
<view class="icon" @click="toPage('/pages/kefu/index', 2)">
|
||||
<My />
|
||||
<view>客服</view>
|
||||
</view>
|
||||
<nut-cell title="请选择规格: " is-link @click="openSku"></nut-cell>
|
||||
<!-- 产品介绍 -->
|
||||
<view class="rich-box">
|
||||
<view class="title">产品介绍</view>
|
||||
<rich-text
|
||||
v-if="goodInfo.details"
|
||||
class="rich"
|
||||
:nodes="goodInfo.details"
|
||||
></rich-text>
|
||||
<nut-empty v-else description="暂无产品介绍"></nut-empty>
|
||||
</view>
|
||||
<view style="height: 9vh"></view>
|
||||
<!-- 底部 -->
|
||||
<view class="bottom-box">
|
||||
<view class="left">
|
||||
<view class="icon" @click="toPage('/pages/index/index')">
|
||||
<Home/>
|
||||
<view>首页</view>
|
||||
</view>
|
||||
<!-- <view-->
|
||||
<!-- class="icon"-->
|
||||
<!-- v-if="payType === 'jf'"-->
|
||||
<!-- @click="toPage('/pages/cart/index')"-->
|
||||
<!-- >-->
|
||||
<!-- <Cart/>-->
|
||||
<!-- <view>购物车</view>-->
|
||||
<!-- </view>-->
|
||||
<view class="icon" @click="toPage('/pages/kefu/index', 2)">
|
||||
<My/>
|
||||
<view>客服</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 占位 -->
|
||||
</view>
|
||||
<!-- 占位 -->
|
||||
|
||||
<view style="width: 80%">
|
||||
<!-- <nut-button-->
|
||||
<!-- v-if="payType === 'jf'"-->
|
||||
<!-- style="margin-right: 10px"-->
|
||||
<!-- type="warning"-->
|
||||
<!-- @click="add_cart()"-->
|
||||
<!-- >加入购物车-->
|
||||
<!-- </nut-button>-->
|
||||
<nut-button type="primary" block @click="toOrderDetail()"
|
||||
>{{ payType === 'jf' ? '立即兑换' : '立即购买' }}
|
||||
</nut-button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 规格选择 -->
|
||||
<nut-popup
|
||||
position="bottom"
|
||||
overlay-class="overlay"
|
||||
safe-area-inset-bottom
|
||||
closeable
|
||||
round
|
||||
:style="{ zIndex: 1 }"
|
||||
v-model:visible="isSkuShow"
|
||||
>
|
||||
<view class="sku-box">
|
||||
<view>商品规格</view>
|
||||
<nut-cell-group>
|
||||
<nut-cell title="数量:">
|
||||
<template v-slot:link>
|
||||
<nut-input-number
|
||||
v-model="count"
|
||||
@change="addCount"
|
||||
button-size="30"
|
||||
/>
|
||||
</template>
|
||||
</nut-cell>
|
||||
</nut-cell-group>
|
||||
</view>
|
||||
</nut-popup>
|
||||
<!-- <nut-sku
|
||||
<view style="width: 80%">
|
||||
<!-- <nut-button-->
|
||||
<!-- v-if="payType === 'jf'"-->
|
||||
<!-- style="margin-right: 10px"-->
|
||||
<!-- type="warning"-->
|
||||
<!-- @click="add_cart()"-->
|
||||
<!-- >加入购物车-->
|
||||
<!-- </nut-button>-->
|
||||
<nut-button type="primary" block @click="toOrderDetail()"
|
||||
>{{ payType === "jf" ? "立即兑换" : "立即购买" }}
|
||||
</nut-button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 规格选择 -->
|
||||
<nut-popup
|
||||
position="bottom"
|
||||
overlay-class="overlay"
|
||||
safe-area-inset-bottom
|
||||
closeable
|
||||
round
|
||||
:style="{ zIndex: 1 }"
|
||||
v-model:visible="isSkuShow"
|
||||
>
|
||||
<view class="sku-box">
|
||||
<view>商品规格</view>
|
||||
<nut-cell-group>
|
||||
<nut-cell title="数量:">
|
||||
<template v-slot:link>
|
||||
<nut-input-number
|
||||
v-model="count"
|
||||
@change="addCount"
|
||||
button-size="30"
|
||||
/>
|
||||
</template>
|
||||
</nut-cell>
|
||||
</nut-cell-group>
|
||||
</view>
|
||||
</nut-popup>
|
||||
<!-- <nut-sku
|
||||
v-model:visible="isSkuShow"
|
||||
:sku="sku"
|
||||
:goods="goods"
|
||||
@@ -113,105 +111,110 @@
|
||||
@clickBtnOperate="clickBtnOperate"
|
||||
@close="close"
|
||||
></nut-sku> -->
|
||||
<Pay
|
||||
:is-show-pay="isShowPay"
|
||||
:pay-type="payType"
|
||||
v-model:jfInfo="orderData"
|
||||
@closePay="closePay"
|
||||
/>
|
||||
</view>
|
||||
<Pay
|
||||
:is-show-pay="isShowPay"
|
||||
:pay-type="payType"
|
||||
v-model:jfInfo="orderData"
|
||||
@closePay="closePay"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const statusBarHeight = Taro.getSystemInfoSync()?.statusBarHeight
|
||||
import {ref} from 'vue'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {Home, Left, My} from '@nutui/icons-vue-taro'
|
||||
import {createActiveOrder, createOrder, getActiveGoodsDetail, getGoodsDetail} from '@/api/goods'
|
||||
import Pay from '@/components/Pay.vue'
|
||||
const statusBarHeight = Taro.getSystemInfoSync()?.statusBarHeight;
|
||||
import { ref } from "vue";
|
||||
import Taro from "@tarojs/taro";
|
||||
import { Home, Left, My } from "@nutui/icons-vue-taro";
|
||||
import {
|
||||
createActiveOrder,
|
||||
createOrder,
|
||||
getActiveGoodsDetail,
|
||||
getGoodsDetail,
|
||||
} from "@/api/goods";
|
||||
import Pay from "@/components/Pay.vue";
|
||||
|
||||
const BarHeight = ref((statusBarHeight as number) + 7)
|
||||
const BarHeight = ref((statusBarHeight as number) + 7);
|
||||
|
||||
const swiperList = ref([])
|
||||
const swiperList = ref([]);
|
||||
|
||||
const isSkuShow = ref(false)
|
||||
const isSkuShow = ref(false);
|
||||
|
||||
const isShowPay = ref(false)
|
||||
const isShowPay = ref(false);
|
||||
|
||||
// const sku = ref([]);
|
||||
|
||||
const payType = ref('')
|
||||
const payType = ref("");
|
||||
|
||||
const orderData = ref([])
|
||||
const orderData = ref([]);
|
||||
|
||||
const count = ref(1)
|
||||
const count = ref(1);
|
||||
|
||||
interface GoodInfo {
|
||||
gid?: number;
|
||||
name?: string;
|
||||
number?: number;
|
||||
cover?: string;
|
||||
details?: string;
|
||||
sku?: any[];
|
||||
stock?: number;
|
||||
profile?: string;
|
||||
gid?: number;
|
||||
name?: string;
|
||||
number?: number;
|
||||
cover?: string;
|
||||
details?: string;
|
||||
sku?: any[];
|
||||
stock?: number;
|
||||
profile?: string;
|
||||
}
|
||||
|
||||
const goodInfo = ref<GoodInfo>({})
|
||||
const goodInfo = ref<GoodInfo>({});
|
||||
|
||||
Taro.useLoad((options) => {
|
||||
payType.value = options.type === '1' ? 'wx' : 'jf'
|
||||
get_good_detail(options.gid)
|
||||
})
|
||||
payType.value = options.type === "1" ? "wx" : "jf";
|
||||
get_good_detail(options.gid);
|
||||
});
|
||||
|
||||
const get_good_detail = async (gid: string) => {
|
||||
try {
|
||||
let res: any
|
||||
if (payType.value === 'jf') {
|
||||
res = await getGoodsDetail({gid: gid})
|
||||
} else {
|
||||
res = await getActiveGoodsDetail({gid: gid})
|
||||
}
|
||||
goodInfo.value = {
|
||||
...res.data.data
|
||||
// details: res.data.data.details.,
|
||||
}
|
||||
|
||||
swiperList.value = res.data.data.rotation.split(',')
|
||||
} catch (e) {
|
||||
Taro.showToast({
|
||||
title: e.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
try {
|
||||
let res: any;
|
||||
if (payType.value === "jf") {
|
||||
res = await getGoodsDetail({ gid: gid });
|
||||
} else {
|
||||
res = await getActiveGoodsDetail({ gid: gid });
|
||||
}
|
||||
}
|
||||
goodInfo.value = {
|
||||
...res.data.data,
|
||||
// details: res.data.data.details.,
|
||||
};
|
||||
|
||||
swiperList.value = res.data.data.rotation.split(",");
|
||||
} catch (e) {
|
||||
Taro.showToast({
|
||||
title: e.msg,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const addCount = () => {
|
||||
if (count.value >= (goodInfo.value.stock as number)) {
|
||||
count.value = goodInfo.value.stock as number
|
||||
Taro.showToast({
|
||||
title: '库存不足',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
if (count.value >= (goodInfo.value.stock as number)) {
|
||||
count.value = goodInfo.value.stock as number;
|
||||
Taro.showToast({
|
||||
title: "库存不足",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const returns = () => {
|
||||
Taro.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
Taro.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
};
|
||||
|
||||
const goHome = () => {
|
||||
Taro.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
Taro.switchTab({
|
||||
url: "/pages/index/index",
|
||||
});
|
||||
};
|
||||
|
||||
const openSku = () => {
|
||||
isSkuShow.value = true
|
||||
}
|
||||
isSkuShow.value = true;
|
||||
};
|
||||
|
||||
// const selectSku = () => {};
|
||||
// const clickBtnOperate = () => {};
|
||||
@@ -235,228 +238,226 @@ const openSku = () => {
|
||||
// };
|
||||
|
||||
const toOrderDetail = async () => {
|
||||
if (!Taro.getStorageSync('token')) {
|
||||
return Taro.showModal({
|
||||
title: '提示',
|
||||
content: '你还没登录,请先登录',
|
||||
cancelText: '先逛逛',
|
||||
confirmText: '去登录',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
Taro.reLaunch({
|
||||
url: '/pages/users/login/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
if (isSkuShow.value === false) return openSku()
|
||||
// Taro.navigateTo({
|
||||
// url: '/pages/goods/order_create/index'
|
||||
// })
|
||||
try {
|
||||
let res: any
|
||||
if (payType.value === 'jf') {
|
||||
res = await createOrder([
|
||||
{
|
||||
gid: goodInfo.value.gid,
|
||||
count: Number(count.value)
|
||||
}
|
||||
])
|
||||
} else {
|
||||
res = await createActiveOrder({
|
||||
gid: goodInfo.value.gid,
|
||||
stock: Number(count.value)
|
||||
})
|
||||
if (!Taro.getStorageSync("token")) {
|
||||
return Taro.showModal({
|
||||
title: "提示",
|
||||
content: "你还没登录,请先登录",
|
||||
cancelText: "先逛逛",
|
||||
confirmText: "去登录",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
Taro.reLaunch({
|
||||
url: "/pages/users/login/index",
|
||||
});
|
||||
}
|
||||
|
||||
orderData.value = res?.data?.data
|
||||
|
||||
isShowPay.value = true
|
||||
|
||||
count.value = 1
|
||||
} catch (e) {
|
||||
Taro.showToast({
|
||||
title: e.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
});
|
||||
}
|
||||
if (isSkuShow.value === false) return openSku();
|
||||
// Taro.navigateTo({
|
||||
// url: '/pages/goods/order_create/index'
|
||||
// })
|
||||
try {
|
||||
let res: any;
|
||||
if (payType.value === "jf") {
|
||||
res = await createOrder([
|
||||
{
|
||||
gid: goodInfo.value.gid,
|
||||
count: Number(count.value),
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
res = await createActiveOrder({
|
||||
gid: goodInfo.value.gid,
|
||||
stock: Number(count.value),
|
||||
});
|
||||
}
|
||||
|
||||
isSkuShow.value = false
|
||||
}
|
||||
orderData.value = res?.data?.data;
|
||||
|
||||
isShowPay.value = true;
|
||||
|
||||
count.value = 1;
|
||||
} catch (e) {
|
||||
Taro.showToast({
|
||||
title: e.msg,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
|
||||
isSkuShow.value = false;
|
||||
};
|
||||
|
||||
const closePay = (val: boolean) => {
|
||||
isShowPay.value = val
|
||||
orderData.value = []
|
||||
}
|
||||
isShowPay.value = val;
|
||||
orderData.value = [];
|
||||
};
|
||||
|
||||
const toPage = (url: string, type: number = 1) => {
|
||||
if (type === 1) {
|
||||
Taro.switchTab({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
// Taro.navigateTo({
|
||||
// url: url,
|
||||
// });
|
||||
Taro.showToast({
|
||||
title: '暂未开放',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
if (type === 1) {
|
||||
Taro.switchTab({
|
||||
url: url,
|
||||
});
|
||||
} else {
|
||||
// Taro.navigateTo({
|
||||
// url: url,
|
||||
// });
|
||||
Taro.showToast({
|
||||
title: "暂未开放",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
--nut-cell-box-shadow: none;
|
||||
// --nut-cell-padding: 0;
|
||||
--nut-cell-title-font: 30px;
|
||||
--nut-cell-box-shadow: none;
|
||||
// --nut-cell-padding: 0;
|
||||
--nut-cell-title-font: 30px;
|
||||
}
|
||||
|
||||
// sku遮罩
|
||||
.overlay {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1 !important;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.head-wrapper {
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 30px;
|
||||
top: 0;
|
||||
height: 114px;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 30px;
|
||||
top: 0;
|
||||
height: 114px;
|
||||
}
|
||||
|
||||
.head-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 54px;
|
||||
width: 140px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-radius: 27px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 54px;
|
||||
width: 140px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-radius: 27px;
|
||||
|
||||
.iconfont {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.iconfont {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-swiper-item img {
|
||||
width: 100%;
|
||||
height: 730px;
|
||||
width: 100%;
|
||||
height: 730px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 30px;
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
background-color: #fff;
|
||||
|
||||
.header {
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.stock {
|
||||
color: #8f8f8f;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sub {
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.rich-box {
|
||||
background-color: #fff;
|
||||
margin-top: 20px;
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
|
||||
.title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.rich {
|
||||
width: 100%;
|
||||
|
||||
// img {
|
||||
// width: 100%;
|
||||
// height: auto;
|
||||
// display: block;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.nut-sku {
|
||||
// 适配ios底部安全区域
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.sku-box {
|
||||
padding: 100px 50px;
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
border-top: 1px solid #e5e5e585;
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
bottom: 0;
|
||||
height: 150rpx;
|
||||
background: #fff;
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// 适配ios底部安全区域
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
z-index: 999;
|
||||
|
||||
.title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.stock {
|
||||
color: #8f8f8f;
|
||||
}
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.rich-box {
|
||||
background-color: #fff;
|
||||
margin-top: 20px;
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
|
||||
.title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.rich {
|
||||
width: 100%;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 300px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
// img {
|
||||
// width: 100%;
|
||||
// height: auto;
|
||||
// display: block;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #333;
|
||||
font-size: 25px;
|
||||
width: 100px;
|
||||
// margin-right: 100px;
|
||||
}
|
||||
}
|
||||
.nut-sku {
|
||||
// 适配ios底部安全区域
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.sku-box {
|
||||
padding: 100px 50px;
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
border-top: 1px solid #e5e5e585;
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
bottom: 0;
|
||||
height: 150rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// 适配ios底部安全区域
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 300px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #333;
|
||||
font-size: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #333;
|
||||
font-size: 25px;
|
||||
width: 100px;
|
||||
// margin-right: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #333;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: "提交订单"
|
||||
navigationBarTitleText: "提交订单",
|
||||
});
|
||||
|
||||
@@ -1,56 +1,53 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="bg">
|
||||
<view class="card">
|
||||
<view class="left">
|
||||
<view>嘎嘎酒吧</view>
|
||||
<view>18888888888</view>
|
||||
<view>广西壮族自治区南宁市江南区</view>
|
||||
</view>
|
||||
<view class="right" @click="toLocal">
|
||||
<Find class="icon" />
|
||||
<view class="text">距离我{{ distance }}km</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="app">
|
||||
<view class="bg">
|
||||
<view class="card">
|
||||
<view class="left">
|
||||
<view>嘎嘎酒吧</view>
|
||||
<view>18888888888</view>
|
||||
<view>广西壮族自治区南宁市江南区</view>
|
||||
</view>
|
||||
<view class="order-info">21312312</view>
|
||||
<nut-form>
|
||||
<nut-form-item body-align="right" label="用户姓名">
|
||||
<nut-input
|
||||
:border="false"
|
||||
v-model="basicData.name"
|
||||
placeholder="请输入姓名"
|
||||
type="text"
|
||||
/>
|
||||
</nut-form-item>
|
||||
<nut-form-item body-align="right" label="联系电话">
|
||||
<nut-input
|
||||
:border="false"
|
||||
v-model="basicData.phone"
|
||||
placeholder="请输入联系电话"
|
||||
type="text"
|
||||
/>
|
||||
</nut-form-item>
|
||||
<nut-form-item body-align="right" label="订单备注">
|
||||
<nut-textarea
|
||||
class="nut-input-text"
|
||||
v-model="basicData.notes"
|
||||
placeholder="请输入备注"
|
||||
type="text"
|
||||
/>
|
||||
</nut-form-item>
|
||||
</nut-form>
|
||||
<!-- 底部 -->
|
||||
<view class="bottom-box">
|
||||
<view
|
||||
>总计：<nut-price
|
||||
:price="8888.01"
|
||||
position="after"
|
||||
symbol="积分"
|
||||
/></view>
|
||||
<nut-button type="primary" @click="orderPay">提交订单</nut-button>
|
||||
<view class="right" @click="toLocal">
|
||||
<Find class="icon" />
|
||||
<view class="text">距离我{{ distance }}km</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-info">21312312</view>
|
||||
<nut-form>
|
||||
<nut-form-item body-align="right" label="用户姓名">
|
||||
<nut-input
|
||||
:border="false"
|
||||
v-model="basicData.name"
|
||||
placeholder="请输入姓名"
|
||||
type="text"
|
||||
/>
|
||||
</nut-form-item>
|
||||
<nut-form-item body-align="right" label="联系电话">
|
||||
<nut-input
|
||||
:border="false"
|
||||
v-model="basicData.phone"
|
||||
placeholder="请输入联系电话"
|
||||
type="text"
|
||||
/>
|
||||
</nut-form-item>
|
||||
<nut-form-item body-align="right" label="订单备注">
|
||||
<nut-textarea
|
||||
class="nut-input-text"
|
||||
v-model="basicData.notes"
|
||||
placeholder="请输入备注"
|
||||
type="text"
|
||||
/>
|
||||
</nut-form-item>
|
||||
</nut-form>
|
||||
<!-- 底部 -->
|
||||
<view class="bottom-box">
|
||||
<view
|
||||
>总计：<nut-price :price="8888.01" position="after" symbol="积分"
|
||||
/></view>
|
||||
<nut-button type="primary" @click="orderPay">提交订单</nut-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -62,122 +59,122 @@ import { ref } from "vue";
|
||||
const distance = ref("");
|
||||
|
||||
const basicData = ref({
|
||||
name: "",
|
||||
phone: "",
|
||||
notes: "",
|
||||
name: "",
|
||||
phone: "",
|
||||
notes: "",
|
||||
});
|
||||
|
||||
Taro.useLoad(() => {
|
||||
Taro.getLocation({
|
||||
type: "wgs84",
|
||||
success: function (res) {
|
||||
const latitude = res.latitude;
|
||||
const longitude = res.longitude;
|
||||
distance.value = calculateDistance(
|
||||
108.24898,
|
||||
22.83646,
|
||||
longitude,
|
||||
latitude
|
||||
);
|
||||
},
|
||||
});
|
||||
Taro.getLocation({
|
||||
type: "wgs84",
|
||||
success: function (res) {
|
||||
const latitude = res.latitude;
|
||||
const longitude = res.longitude;
|
||||
distance.value = calculateDistance(
|
||||
108.24898,
|
||||
22.83646,
|
||||
longitude,
|
||||
latitude
|
||||
);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const toLocal = () => {
|
||||
Taro.openLocation({
|
||||
latitude: 22.83646,
|
||||
longitude: 108.24898,
|
||||
scale: 18,
|
||||
});
|
||||
Taro.openLocation({
|
||||
latitude: 22.83646,
|
||||
longitude: 108.24898,
|
||||
scale: 18,
|
||||
});
|
||||
};
|
||||
|
||||
const orderPay = () => {
|
||||
Taro.showToast({
|
||||
title: "支付成功",
|
||||
icon: "success",
|
||||
success: () => {
|
||||
setTimeout(() => {
|
||||
Taro.redirectTo({
|
||||
url: "/pages/goods/order_status/index",
|
||||
});
|
||||
}, 2000);
|
||||
},
|
||||
});
|
||||
Taro.showToast({
|
||||
title: "支付成功",
|
||||
icon: "success",
|
||||
success: () => {
|
||||
setTimeout(() => {
|
||||
Taro.redirectTo({
|
||||
url: "/pages/goods/order_status/index",
|
||||
});
|
||||
}, 2000);
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.bg {
|
||||
background: linear-gradient(0deg, #f5f5f5, #0396ffc7);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding: 10px 0;
|
||||
background: linear-gradient(0deg, #f5f5f5, #0396ffc7);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding: 10px 0;
|
||||
|
||||
.card {
|
||||
width: 90%;
|
||||
height: 75%;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
border-bottom: 1px dashed #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.left {
|
||||
width: 70%;
|
||||
color: #333;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
|
||||
.icon {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 25px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-info {
|
||||
.card {
|
||||
width: 90%;
|
||||
height: 75%;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
border-bottom: 1px dashed #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.left {
|
||||
width: 70%;
|
||||
color: #333;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
|
||||
.icon {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 25px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-info {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.nut-input-text {
|
||||
height: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 9vh;
|
||||
background: #fff;
|
||||
// IOS安全区域
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 9vh;
|
||||
background: #fff;
|
||||
// IOS安全区域
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: "订单状态",
|
||||
navigationBarTitleText: "订单状态",
|
||||
});
|
||||
|
||||
@@ -1,30 +1,26 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="card">
|
||||
<view class="icon">
|
||||
<Check
|
||||
font-class-name="nutui-iconfont check"
|
||||
size="70"
|
||||
color="#fff"
|
||||
/>
|
||||
<!-- <CloseLittle font-class-name="nutui-iconfont check" size="70" color="#fff" /> -->
|
||||
</view>
|
||||
<view class="text-box">
|
||||
<view class="title">支付成功</view>
|
||||
<nut-button block type="primary" @click="toOrderPage"
|
||||
>查看订单</nut-button
|
||||
>
|
||||
<nut-button
|
||||
block
|
||||
plain
|
||||
style="margin-top: 10px"
|
||||
type="primary"
|
||||
@click="toHome"
|
||||
>返回首页</nut-button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="card">
|
||||
<view class="icon">
|
||||
<Check font-class-name="nutui-iconfont check" size="70" color="#fff" />
|
||||
<!-- <CloseLittle font-class-name="nutui-iconfont check" size="70" color="#fff" /> -->
|
||||
</view>
|
||||
<view class="text-box">
|
||||
<view class="title">支付成功</view>
|
||||
<nut-button block type="primary" @click="toOrderPage"
|
||||
>查看订单</nut-button
|
||||
>
|
||||
<nut-button
|
||||
block
|
||||
plain
|
||||
style="margin-top: 10px"
|
||||
type="primary"
|
||||
@click="toHome"
|
||||
>返回首页</nut-button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -32,66 +28,66 @@ import { Check, CloseLittle } from "@nutui/icons-vue-taro";
|
||||
import Taro from "@tarojs/taro";
|
||||
|
||||
const toHome = () => {
|
||||
Taro.switchTab({
|
||||
url: "/pages/index/index",
|
||||
});
|
||||
Taro.switchTab({
|
||||
url: "/pages/index/index",
|
||||
});
|
||||
};
|
||||
|
||||
const toOrderPage = () => {
|
||||
Taro.redirectTo({
|
||||
url: "/pages/users/order_list/index?type=0",
|
||||
});
|
||||
Taro.redirectTo({
|
||||
url: "/pages/users/order_list/index?type=0",
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.card {
|
||||
width: 90%;
|
||||
height: 600px;
|
||||
width: 90%;
|
||||
height: 600px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
margin: 200px auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
flex-direction: column;
|
||||
|
||||
.icon {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: #f5f5f5 10px solid;
|
||||
text-align: center;
|
||||
|
||||
.check {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.text-box {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
margin: 200px auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
flex-direction: column;
|
||||
padding: 0 100px;
|
||||
|
||||
.icon {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: #f5f5f5 10px solid;
|
||||
text-align: center;
|
||||
|
||||
.check {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.text-box {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 100px;
|
||||
|
||||
.title {
|
||||
font-size: 60px;
|
||||
color: #333;
|
||||
margin: 100px;
|
||||
}
|
||||
.title {
|
||||
font-size: 60px;
|
||||
color: #333;
|
||||
margin: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user