|
|
@@ -0,0 +1,424 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <template v-if="loading">
|
|
|
+ <view class="skeleton">
|
|
|
+ <view class="skeleton-line max animate" style="height: 200upx;"></view>
|
|
|
+ <view class="skeleton-line animate"></view>
|
|
|
+ <view class="skeleton-line min animate"></view>
|
|
|
+ <view class="skeleton-line min animate"></view>
|
|
|
+ <view class="skeleton-line max animate" style="height: 200upx;"></view>
|
|
|
+ <view class="skeleton-line max animate" style="height: 200upx;"></view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <scroll-view class="goods-body" scroll-y scroll-with-animation>
|
|
|
+ <view class="order-body" v-if="orderData">
|
|
|
+ <view class="item-goods">
|
|
|
+ <view class="item-goods-body">
|
|
|
+ <view class="image">
|
|
|
+ <image :src="orderData.img"></image>
|
|
|
+ </view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="title">
|
|
|
+ <view class="name">{{ orderData.product.product_name }}</view>
|
|
|
+ <view class="num">x{{ orderData.number }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="tags">
|
|
|
+ {{orderData.sku_name?orderData.sku_name:'默认'}}
|
|
|
+ <view class="price">{{ $dialog.formatMoney(orderData.price,true) }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="price-right">实付 <text>{{ $dialog.formatMoney(orderData.pay_money,true) }}</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="order-info">
|
|
|
+ <view class="title-h">完善信息</view>
|
|
|
+ <view class="form-feedbak">
|
|
|
+ <view class="title"><text>*</text>姓名</view>
|
|
|
+ <view class="form-textarea">
|
|
|
+ <input :value="addressForm.nickname" data-field="nickname" placeholder="请输入" class="u-input" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="form-feedbak">
|
|
|
+ <view class="title"><text>*</text>手机号码</view>
|
|
|
+ <view class="form-textarea">
|
|
|
+ <input :value="addressForm.mobile" data-field="mobile" placeholder="请输入" class="u-input" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="form-feedbak">
|
|
|
+ <view class="title"><text>*</text>所属地区</view>
|
|
|
+ <view class="form-textarea" @click="showAddress">
|
|
|
+ {{addressData.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="form-feedbak">
|
|
|
+ <view class="title"><text>*</text>详细地址</view>
|
|
|
+ <view class="form-textarea">
|
|
|
+ <input :value="addressForm.address" data-field="address" placeholder="请输入" class="u-textarea" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="line-height"></view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="footer">
|
|
|
+ <view class="footer-op">
|
|
|
+ <view class="footer-left"></view>
|
|
|
+ <view class="footer-right">
|
|
|
+ <view class="btn">再次购买</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="footer-safe"></view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <uni-popup ref="addressPop" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
|
|
|
+ <view class="address-pop">
|
|
|
+ <view class="address-check">
|
|
|
+ <view class="check-name" @click="addTop(1,fristData.index)">{{fristData.name}}</view>
|
|
|
+ <view class="check-name" @click="addTop(2,fristData.index)">{{secondData.name}}</view>
|
|
|
+ <view class="check-name" @click="addTop(3,secondData.index)">{{threeData.name}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="address-scroll">
|
|
|
+ <template v-if="fristData.list.length > 0">
|
|
|
+ <view :class="fristData.index==indx?'item-name active':'item-name'" v-for="(item,indx) in fristData.list" :key="indx" @click="addClick(indx,1)">
|
|
|
+ {{ item.text }}
|
|
|
+ <view class="icon"><image src="/static/image/gou.svg"></image></view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-if="secondData.list.length > 0">
|
|
|
+ <view :class="secondData.index==indx?'item-name active':'item-name'" v-for="(item,indx) in secondData.list" :key="indx" @click="addClick(indx,2)">
|
|
|
+ {{ item.text }}
|
|
|
+ <view class="icon"><image src="/static/image/gou.svg"></image></view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-if="threeData.list.length > 0">
|
|
|
+ <view :class="threeData.index==indx?'item-name active':'item-name'" v-for="(item,indx) in threeData.list" :key="indx" @click="addClick(indx,3)">
|
|
|
+ {{ item.text }}
|
|
|
+ <view class="icon"><image src="/static/image/gou.svg"></image></view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view class="address-footer">
|
|
|
+ <view class="footer-btn" @click="closeOrder">取消</view>
|
|
|
+ <view class="footer-btn full">确定</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+var app;
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ optionData:null,
|
|
|
+ orderData:null,
|
|
|
+ loading:false,
|
|
|
+ cityData:[],
|
|
|
+ addressForm:{},
|
|
|
+ addressData:{
|
|
|
+ index:0,
|
|
|
+ name:"请选择"
|
|
|
+ },
|
|
|
+ fristData:{
|
|
|
+ index:null,
|
|
|
+ name:"",
|
|
|
+ list:[]
|
|
|
+ },
|
|
|
+ secondData:{
|
|
|
+ index:null,
|
|
|
+ name:"",
|
|
|
+ list:[]
|
|
|
+ },
|
|
|
+ threeData:{
|
|
|
+ index:null,
|
|
|
+ name:"",
|
|
|
+ list:[]
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ app = this;
|
|
|
+ app.optionData = options;
|
|
|
+ this.getOrder();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ addClick(indx,type) {
|
|
|
+ if (type == 1) {
|
|
|
+ app.fristData.index = indx;
|
|
|
+ app.fristData.list = [];
|
|
|
+ app.secondData.list = app.cityData[indx].children;
|
|
|
+ app.fristData.name = app.cityData[indx].text;
|
|
|
+ }
|
|
|
+ if (type == 2) {
|
|
|
+ app.secondData.index = indx;
|
|
|
+ app.secondData.name = app.secondData.list[indx].text;
|
|
|
+ app.threeData.list = app.secondData.list[indx].children;
|
|
|
+ app.secondData.list = [];
|
|
|
+ }
|
|
|
+ if (type == 3) {
|
|
|
+ app.threeData.index = indx;
|
|
|
+ app.threeData.name = app.threeData.list[indx].text;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addTop(type,index){
|
|
|
+ if (type == 1) {
|
|
|
+ app.fristData.list = app.cityData;
|
|
|
+ app.secondData.list = [];
|
|
|
+ app.secondData.index = null;
|
|
|
+ app.secondData.name = null;
|
|
|
+ app.threeData.list = [];
|
|
|
+ app.threeData.index = null;
|
|
|
+ app.threeData.name = null;
|
|
|
+ }
|
|
|
+ if (type == 2) {
|
|
|
+ app.secondData.list = app.cityData[index].children;
|
|
|
+ app.threeData.list = [];
|
|
|
+ app.threeData.index = null;
|
|
|
+ app.threeData.name = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showAddress(){
|
|
|
+ this.$refs.addressPop.open();
|
|
|
+ },
|
|
|
+ closeOrder(){
|
|
|
+ this.$refs.addressPop.close();
|
|
|
+ },
|
|
|
+ addressChange(data){
|
|
|
+ if (data.detail) {
|
|
|
+ this.addressForm.city = JSON.stringify(data.detail.value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getOrder(){
|
|
|
+ app.loading = true;
|
|
|
+ var res = await app.$api.order.detail.get({"order":app.optionData.order});
|
|
|
+ app.loading = false;
|
|
|
+ if (res.code && res.code == 0) {
|
|
|
+ app.$dialog.showSuccess(res.msg);
|
|
|
+ uni.navigateBack()
|
|
|
+ return ;
|
|
|
+ }
|
|
|
+ app.orderData = res.data;
|
|
|
+ app.getCity()
|
|
|
+ },
|
|
|
+ async getCity(){
|
|
|
+ var resp = await app.$api.home.city.get();
|
|
|
+ if (resp.code !== 1) return ;
|
|
|
+ app.cityData = resp.data;
|
|
|
+ app.fristData.index = 0;
|
|
|
+ app.fristData.name = resp.data[0].text;
|
|
|
+ app.fristData.list = resp.data
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.address-pop{
|
|
|
+ .address-check{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ color: $main-text-color;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ .check-name{
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .address-scroll{
|
|
|
+ height: 50vh;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 20rpx;
|
|
|
+ .item-name{
|
|
|
+ padding: 20rpx;
|
|
|
+ border-bottom: 2rpx solid #f1f1f1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .icon{
|
|
|
+ display: none;
|
|
|
+ image {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ color: $main-color;
|
|
|
+ .icon{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .address-footer{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ gap: 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ .footer-btn{
|
|
|
+ background-color: #fff;
|
|
|
+ border: 2rpx solid $main-text-color;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ color: $main-text-color;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ flex: 1;
|
|
|
+ &.full{
|
|
|
+ border: 2rpx solid $main-color;
|
|
|
+ background-color: $main-color;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.content{
|
|
|
+ position: fixed;
|
|
|
+ z-index: 1;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .line-height{
|
|
|
+ height: 40rpx;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.form-feedbak{
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 20upx;
|
|
|
+}
|
|
|
+.form-feedbak .title{
|
|
|
+ line-height: 80upx;
|
|
|
+ font-size: 28upx;
|
|
|
+}
|
|
|
+.form-feedbak .title text{
|
|
|
+ color: #f00;
|
|
|
+ margin-right: 10upx;
|
|
|
+}
|
|
|
+.form-feedbak .form-textarea{
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ padding: 20upx;
|
|
|
+}
|
|
|
+.order-body {
|
|
|
+ width: 95%;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ .order-info{
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: #fff;padding: 20upx;margin-top: 20upx;
|
|
|
+ .title-h{font-size: 32upx;color: #333;font-weight: bold;margin-bottom: 20rpx;}
|
|
|
+
|
|
|
+ }
|
|
|
+ .item-goods{
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ .item-goods-body{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20rpx;
|
|
|
+ }
|
|
|
+ .stock{
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .image {
|
|
|
+ height: 140rpx;
|
|
|
+ overflow: hidden;display: flex;align-items: center;min-width: 140rpx;
|
|
|
+ position: relative;
|
|
|
+ image {
|
|
|
+ width: 140rpx;
|
|
|
+ border-radius: 10upx;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info{
|
|
|
+ flex: 1 1 0%;
|
|
|
+ overflow: hidden;
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .name {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ font-size: 32rpx;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 900;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price-right{
|
|
|
+ text-align: right;
|
|
|
+ color: $main-color;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tags {
|
|
|
+ color: #94a3b8;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .price {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: $main-text-color;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.goods-body{
|
|
|
+ height: 0;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.footer{
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20upx 20upx 0 20upx;border-top: 2upx solid #f8f8f8;
|
|
|
+ .footer-safe {
|
|
|
+ height: env(safe-area-inset-bottom);width: 100%;
|
|
|
+ }
|
|
|
+ .footer-op{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .footer-right{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20rpx;
|
|
|
+ .btn{
|
|
|
+ font-size: 28rpx;
|
|
|
+ height: 80upx;
|
|
|
+ border-radius: 10upx;
|
|
|
+ line-height: 80upx;
|
|
|
+ text-align: center;
|
|
|
+ min-width: 200rpx;
|
|
|
+ color: #333;
|
|
|
+ border: 2rpx solid #ccc;
|
|
|
+ &.full{
|
|
|
+ background-color: $main-color;
|
|
|
+ color: #fff;
|
|
|
+ border: 2rpx solid $main-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Zory
