初始化
This commit is contained in:
魏啾
498
pages/app/pay.vue
Normal file
498
pages/app/pay.vue
Normal file
@@ -0,0 +1,498 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="card">
|
||||
<view class="info-wrap">
|
||||
<image class="cover" src="@/static/img_vipno_vip1-1.png" mode="aspectFill"></image>
|
||||
<text class="t">{{ type == 1 ? '设备商城' : '在线支付' }}</text>
|
||||
</view>
|
||||
<view class="input-wrap">
|
||||
<view class="input-cont">
|
||||
<text class="i">￥</text>
|
||||
<text class="num">{{ num }}</text>
|
||||
</view>
|
||||
<!-- <view class="tips"><input class="input" type="text" :maxlength="10" placeholder="添加付款备注（最多10个字）" v-model="remark" /></view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="title"><text>支付方式</text></view>
|
||||
<view class="pay-list">
|
||||
<view class="item">
|
||||
<view class="label">
|
||||
<image class="icon" src="../../static/4.png" mode="aspectFit"></image>
|
||||
<text class="t">微信支付</text>
|
||||
</view>
|
||||
<uni-icons type="checkbox-filled" size="18" color="#54A347"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="num-wrap">
|
||||
<text>实付：</text>
|
||||
<text class="t b">￥{{ num || 0 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-wrap">
|
||||
<view class="btn" @click="submitHandle"><text>确认支付</text></view>
|
||||
</view>
|
||||
<u-popup :show="show" :closeable="false" round mode="bottom">
|
||||
<view class="success-wrap">
|
||||
<view class="title">{{ payState == 1 ? '支付成功' : '支付失败，请返回APP重新下单' }}</view>
|
||||
<view class="content">
|
||||
<image class="img" src="@/static/success.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="popup-buttn">
|
||||
<button class="btn" type="primary" open-type="launchApp"><text>返回APP</text></button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import utils from '@/common/utils.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: 1,
|
||||
num: '',
|
||||
orderNumber: '',
|
||||
show: false,
|
||||
payState: 1,
|
||||
options: {}
|
||||
};
|
||||
},
|
||||
async onLoad(options) {
|
||||
// // #ifdef MP-WEIXIN
|
||||
// uni.login({
|
||||
// provider: 'weixin',
|
||||
// success: async (data) => {
|
||||
// try {
|
||||
// uni.cache.set('weixincode', data.code);
|
||||
// let res = await this.api.userlogin({
|
||||
// code: uni.cache.get('weixincode')
|
||||
// })
|
||||
// if (res) {
|
||||
// uni.cache.set('loginuser', res);
|
||||
// uni.cache.set('store_id', res.store_id) // 判断显示哪家的作品
|
||||
// uni.cache.set('openId', res.userinfo.open_id);
|
||||
// }
|
||||
// } catch (e) {
|
||||
// console.log(e)
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// // #endif
|
||||
//此处保存openid
|
||||
// uni.setStorageSync('openid', 'openid');
|
||||
// await this.$store.dispatch('getLoginInfo');
|
||||
this.orderNumber = options.orderNumber;
|
||||
this.num = options.num;
|
||||
if (options.type) {
|
||||
this.type = options.type;
|
||||
}
|
||||
if (options.type && options.type == 2) {} else if (options.type && options.type != 1) {
|
||||
this.options = options;
|
||||
}
|
||||
|
||||
console.log({
|
||||
openid: uni.getStorageSync('openId'),
|
||||
orderNumber: this.orderNumber
|
||||
});
|
||||
|
||||
// if (e.q) {
|
||||
// this.userAppId = utils.getQueryString(decodeURIComponent(e.q), 'userAppId');
|
||||
// this.getShopInfo();
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
// 付款
|
||||
async submitHandle() {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '支付中...',
|
||||
mask: true
|
||||
});
|
||||
let res = '';
|
||||
if (this.type == 1) {
|
||||
res = await this.requestHandle('/wechat/orderPay', {
|
||||
openid: uni.getStorageSync('openId'),
|
||||
orderNumber: this.orderNumber,
|
||||
appId: 'wxcf9fdee37e8a4803'
|
||||
});
|
||||
} else if (this.type == 2) {
|
||||
// 加油支付
|
||||
res = await this.wxRequest('/order/orderPay', {
|
||||
openid: uni.getStorageSync('openId'),
|
||||
orderNumber: this.orderNumber
|
||||
});
|
||||
} else if (this.type == 3) {
|
||||
res = await this.wxRequest('/order/createorderApp', {
|
||||
openId: uni.getStorageSync('openId'),
|
||||
mobile: this.options.mobile,
|
||||
productId: this.options.productId,
|
||||
provinceName: this.options.provinceName,
|
||||
paymentType: this.options.paymentType,
|
||||
orderId: this.options.orderId
|
||||
});
|
||||
} else if (this.type == 4) {
|
||||
res = await this.wxRequest('/order/createshoporderApp', {
|
||||
openId: uni.getStorageSync('openId'),
|
||||
productId: this.options.productId,
|
||||
orderId: this.options.orderId
|
||||
});
|
||||
} else if (this.type == 5) {
|
||||
res = await this.wxRequest('/order/createoilshoporderApp', {
|
||||
openId: uni.getStorageSync('openId'),
|
||||
productId: this.options.productId,
|
||||
orderId: this.options.orderId
|
||||
});
|
||||
}
|
||||
|
||||
console.log('options222222===', res);
|
||||
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
timeStamp: res.data.payTimeStamp,
|
||||
nonceStr: res.data.paynonceStr,
|
||||
package: res.data.payPackage,
|
||||
signType: res.data.paySignType,
|
||||
paySign: res.data.paySign,
|
||||
success: (res) => {
|
||||
uni.hideLoading();
|
||||
this.show = true;
|
||||
},
|
||||
fail: (err) => {
|
||||
this.show = true;
|
||||
this.payState = 2;
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '支付失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
this.show = true;
|
||||
this.payState = 2;
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
title: '支付失败',
|
||||
content: e,
|
||||
showCancel: false
|
||||
});
|
||||
// uni.showToast({
|
||||
// title: '支付失败2:' + JSON.stringify(e),
|
||||
// icon: 'none'
|
||||
// });
|
||||
}
|
||||
},
|
||||
// 微信云托管请求封装
|
||||
wxRequest(api = '', data = {}, method = 'post') {
|
||||
console.log('data44444===', data);
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: `https://ky.sxczgkj.cn/wap${url}`,
|
||||
method: method,
|
||||
header: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
sourceId: 2
|
||||
},
|
||||
data: data,
|
||||
success: (res) => {
|
||||
console.log('err2===', res);
|
||||
if (res.data.code == 0) {
|
||||
resolve(res.data);
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: res.data.message
|
||||
});
|
||||
reject(res.data.message);
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('err1===', err);
|
||||
reject(JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 封装请求
|
||||
requestHandle(url = '', data = {}, method = 'post') {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: `https://ky.sxczgkj.cn/wap${url}`,
|
||||
method: method,
|
||||
header: {
|
||||
'content-type': 'application/json'
|
||||
},
|
||||
data: data,
|
||||
success: (res) => {
|
||||
if (res.data.code == 200) {
|
||||
resolve(res.data);
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: res.data.message
|
||||
});
|
||||
reject(res.data.message);
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.btn-wrap {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 28upx 28upx calc(env(safe-area-inset-bottom) + 28upx);
|
||||
|
||||
.btn {
|
||||
padding: 20upx 0;
|
||||
border-radius: 100upx;
|
||||
background-color: #ffcc17;
|
||||
color: #000;
|
||||
font-size: 28upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 28upx;
|
||||
padding-bottom: 640upx;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 28upx;
|
||||
border-radius: 28upx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 28upx;
|
||||
|
||||
.title {
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.cover {
|
||||
$size: 80upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
margin-right: 20upx;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
padding: 28upx 0 0;
|
||||
|
||||
.input-cont {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1upx solid #ececec;
|
||||
|
||||
.i {
|
||||
font-size: 42upx;
|
||||
font-weight: bold;
|
||||
margin-right: 12upx;
|
||||
position: relative;
|
||||
top: -4upx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 48upx;
|
||||
height: 80upx;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
padding-right: 14upx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
// &::after {
|
||||
// content: '';
|
||||
// width: 4upx;
|
||||
// height: 40upx;
|
||||
// background-color: #333;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// margin-top: -24upx;
|
||||
// right: 0;
|
||||
// animation: ani 0.8s ease-in-out 1.4s infinite;
|
||||
// }
|
||||
// @keyframes ani {
|
||||
// 0% {
|
||||
// opacity: 0;
|
||||
// }
|
||||
// 100% {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
padding-top: 24upx;
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-list {
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 28upx 0;
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
$size: 60upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
}
|
||||
|
||||
.b {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.number-key-wrap {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #efefef;
|
||||
z-index: 999;
|
||||
padding: 28upx 28upx calc(env(safe-area-inset-bottom) + 28upx);
|
||||
border-radius: 28upx 28upx 0 0;
|
||||
$gap: 12upx;
|
||||
$radius: 14upx;
|
||||
$itemH: 120upx;
|
||||
|
||||
.number-key {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
font-size: 48upx;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: $radius;
|
||||
background-color: #fff;
|
||||
|
||||
&.active {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
|
||||
.num-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: $itemH $itemH $itemH;
|
||||
grid-gap: $gap;
|
||||
}
|
||||
|
||||
.num-foot {
|
||||
padding-top: $gap;
|
||||
display: grid;
|
||||
grid-gap: $gap;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-rows: $itemH;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 160upx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: $gap;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
|
||||
&:last-child {
|
||||
margin-top: $gap;
|
||||
font-size: 32upx;
|
||||
}
|
||||
|
||||
&.confirm {
|
||||
background-color: #ffcc17;
|
||||
|
||||
&.active {
|
||||
background-color: #e1b516;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.success-wrap {
|
||||
padding: 0 28upx calc(env(safe-area-inset-bottom) + 28upx);
|
||||
|
||||
.title {
|
||||
padding: 28upx 0;
|
||||
font-size: 32upx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
.img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12upx 0;
|
||||
border-radius: 100upx;
|
||||
font-size: 28upx;
|
||||
background: #ffcc17;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
pages/city/city.vue
Normal file
64
pages/city/city.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<view class="city">
|
||||
<view @click="showcity">地址选择</view>
|
||||
<view class="city-box" :v-show="showbox">
|
||||
<view @click="close" class="close">关闭</view>
|
||||
<semp-city @confirm="onCityConfirm" platform="jd"></semp-city>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cityData from '../../common/city.data.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showbox:false
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
methods:{
|
||||
showcity(){
|
||||
this.showbox=true;
|
||||
|
||||
},
|
||||
close(){
|
||||
this.showbox=false;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
view{
|
||||
color:#f2f2f2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.city{
|
||||
background:rgba(0,0,0,.5)
|
||||
|
||||
}
|
||||
.city-box{
|
||||
height:800upx;
|
||||
padding:20upx;
|
||||
position:fixed;
|
||||
left:0;
|
||||
bottom:0;
|
||||
z-index:999;
|
||||
background:#fff;
|
||||
|
||||
|
||||
}
|
||||
.close{
|
||||
color:#666;
|
||||
height:80upx;
|
||||
}
|
||||
</style>
|
||||
337
pages/index/components/clothing/index.vue
Normal file
337
pages/index/components/clothing/index.vue
Normal file
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<!-- <view class="contentclothingimage" v-if="list.theme_re.img != null">
|
||||
<image :src="list.theme_re.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="contentclothingbox" v-if="list.theme_re.img != null">
|
||||
<view class="fourcontents">
|
||||
<u-scroll-list indicatorActiveColor="#6C6E8D" :indicator="false">
|
||||
<view class="scrollfourcontents" v-for="(item, index) in list.theme_re.data" :key="index"
|
||||
@click="eeInfoseries(item)">
|
||||
<view class="scrollfourcontenttitems flex-colum" :style="index == 0 ?'margin-left: 0;':''">
|
||||
<image class="scrolltowcontentitem_images" :src="item.host_img" mode="aspectFill">
|
||||
</image>
|
||||
<view class="scrolltowcontentitem_ones">
|
||||
{{item.series}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentclothingimage" v-if="list.new.img != null">
|
||||
<image :src="list.new.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="contentclothingboxoone" v-if="list.new.img != null">
|
||||
<view class="fourcontentsoneitem flex-between" v-for="(item,index) in list.new.data" :key="index"
|
||||
@click="mallInfoInfo(item)">
|
||||
<image class="fourcontentsoneitemimage" :src="item.host_img" mode="aspectFill"></image>
|
||||
<view class="fourcontentsoneitemtext flex-colum-start">
|
||||
<view class="fourcontentsoneitemtextone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="fourcontentsoneitemtexttow">
|
||||
￥{{item.price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentclothingimageclassimagebuya" v-if="list.discount">
|
||||
<image :src="list.discount" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="contentclothingimageclass flex-center">
|
||||
<image class="contentclothingclassimage" src="@/static/4.png" mode="aspectFill"></image>
|
||||
<view class="contentclothingimageclassbox flex-between">
|
||||
<view class="contentclothingimageclassboxitem flex-center" v-for="(item,index) in 3" :key="index">
|
||||
<view class="contentclothingimageclassboxitemone">
|
||||
50
|
||||
</view>
|
||||
<view class="contentclothingimageclassboxitemtow flex-colum-start">
|
||||
<text>RMB</text>
|
||||
<text>满300元使用</text>
|
||||
</view>
|
||||
<view class="contentclothingimageclassboxitemabsolute">
|
||||
领
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="contentclothingboxoone">
|
||||
<view class="fourcontentsoneitemtow flex-between">
|
||||
<view class="fourcontentsoneitemtowitem" v-for="(item,index) in list" :key="index"
|
||||
@click="mallInfoInfo(item)">
|
||||
<image class="fourcontentsoneitemtowitemimage" :src="item.host_img" mode="aspectFill"></image>
|
||||
<view class="fourcontentsoneitemtowitemone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="fourcontentsoneitemtowitemtow">
|
||||
￥{{item.price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
bgbutton: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
mallInfoInfo(e) { //查看订单详情
|
||||
if (e.spec_type == 1) {
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('mall/mallInfos', {
|
||||
id: e.id,
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index {
|
||||
width: 100%;
|
||||
|
||||
.contentclothingimageclassimagebuya {
|
||||
width: auto;
|
||||
margin: 48rpx 0;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimageclass {
|
||||
margin-top: 50rpx;
|
||||
|
||||
.contentclothingclassimage {
|
||||
width: 224.35rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.contentclothingimageclassbox {
|
||||
position: relative;
|
||||
margin-top: 18rpx;
|
||||
width: 100%;
|
||||
background: #ABAD98;
|
||||
border-radius: 18rpx;
|
||||
border: 2rpx solid #404136;
|
||||
padding: 28rpx 18rpx;
|
||||
|
||||
.contentclothingimageclassboxitem:nth-child(1) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.contentclothingimageclassboxitem {
|
||||
position: relative;
|
||||
border-left: 1rpx dashed #fff;
|
||||
padding: 0 18rpx;
|
||||
|
||||
.contentclothingimageclassboxitemone {
|
||||
font-size: 48rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.contentclothingimageclassboxitemtow {
|
||||
margin-left: 10rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimageclassboxitemabsolute {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 18rpx;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
text-align: center;
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: #7e8a83;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimageclassbox::after {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
left: -11px;
|
||||
bottom: 50%;
|
||||
transform: translateY(50%);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 0 11px 11px 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.contentclothingimageclassbox::before {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
right: -11px;
|
||||
bottom: 50%;
|
||||
transform: translateY(50%);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 11px 0 0 11px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimage {
|
||||
width: 130rpx;
|
||||
height: 52rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingbox {
|
||||
.fourcontents {
|
||||
.scrollfourcontents {
|
||||
padding: 22rpx 0;
|
||||
|
||||
.scrollfourcontenttitems {
|
||||
width: 246rpx;
|
||||
height: 296rpx;
|
||||
margin-left: 30rpx;
|
||||
position: relative;
|
||||
|
||||
.scrolltowcontentitem_images {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 18rpx;
|
||||
}
|
||||
|
||||
.scrolltowcontentitem_ones {
|
||||
position: absolute;
|
||||
padding: 8rpx 10rpx;
|
||||
bottom: 12rpx;
|
||||
left: 14rpx;
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
border-radius: 20rpx;
|
||||
font-size: 18rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingboxoone {
|
||||
.fourcontentsoneitem {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
|
||||
.fourcontentsoneitemimage {
|
||||
width: 278rpx;
|
||||
border-radius: 18rpx;
|
||||
height: 194rpx;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtext {
|
||||
flex: 1;
|
||||
height: 194rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.fourcontentsoneitemtextone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtexttow {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fourcontentsoneitemtow {
|
||||
width: 100%;
|
||||
.fourcontentsoneitemtowitem:nth-child(1) {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.fourcontentsoneitemtowitem:nth-child(2) {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.fourcontentsoneitemtowitem {
|
||||
margin-top: 32rpx;
|
||||
width: 330rpx;
|
||||
|
||||
.fourcontentsoneitemtowitemimage {
|
||||
border-radius: 18rpx;
|
||||
width: 330rpx;
|
||||
height: 356rpx;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtowitemone {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtowitemtow {
|
||||
margin-top: 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
69
pages/index/components/clothingmetals/index.vue
Normal file
69
pages/index/components/clothingmetals/index.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="clothingmetals flex-between">
|
||||
<view class="clothingmetalsitem flex-colum" v-for="(item,index) in list" :key="index"
|
||||
@click="eeInfoseries(item)">
|
||||
<view class="clothingmetalsitemimage">
|
||||
<image :src="item.img" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="clothingmetalsitem_text">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
data: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
eeInfoseries(e) {
|
||||
uni.pro.navigateTo('mall/series', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.clothingmetals {
|
||||
padding: 32rpx 28rpx 0rpx 28rpx;
|
||||
.clothingmetalsitem {
|
||||
.clothingmetalsitemimage {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #fafafa;
|
||||
border-radius: 50%;
|
||||
image {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.clothingmetalsitem_text {
|
||||
margin-top: 18rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
104
pages/index/components/employees/index.vue
Normal file
104
pages/index/components/employees/index.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="towcontent">
|
||||
<u-scroll-list :indicatorActiveColor="bgbutton" indicatorWidth='40' :indicator='true'>
|
||||
<view class="scrolltowcontent" v-for="(item, index) in list" :key="index" @click="click1(item,index)">
|
||||
<view class="scrolltowcontentitem flex-colum">
|
||||
<image class="scrolltowcontentitem_image" :src="item.avatar" mode="aspectFill"></image>
|
||||
<view class="scrolltowcontentitem_one">
|
||||
{{item.nickname}}
|
||||
</view>
|
||||
<view class="scrolltowcontentitem_tow">
|
||||
{{item.position}}
|
||||
</view>
|
||||
<view class="scrolltowcontentitem_there">
|
||||
预约
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
bgbutton: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
click1(e) {
|
||||
uni.pro.navigateTo('order/orderInfos', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.towcontent {
|
||||
margin-left: 8rpx;
|
||||
|
||||
.scrolltowcontent {
|
||||
padding: 24rpx 0;
|
||||
|
||||
.scrolltowcontentitem {
|
||||
margin-left: 24rpx;
|
||||
padding: 16rpx 42rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4rpx 6rpx 2rpx rgba(0, 0, 0, 0.11);
|
||||
border-radius: 18rpx;
|
||||
|
||||
.scrolltowcontentitem_image {
|
||||
width: 116rpx;
|
||||
height: 116rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.scrolltowcontentitem_one {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
margin-top: 6rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.scrolltowcontentitem_tow {
|
||||
margin-top: 2rpx;
|
||||
font-size: 22rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.scrolltowcontentitem_there {
|
||||
margin-top: 12rpx;
|
||||
padding: 4rpx 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
229
pages/index/components/flashsale/index.vue
Normal file
229
pages/index/components/flashsale/index.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="onecontenttowone flex-start">
|
||||
<view class="onecontenttowone_one">
|
||||
{{title}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexbox">
|
||||
<view class="indexboxitem flex-start" v-for="(item,index) in list" :key="index" @click="mallInfoInfo(item)">
|
||||
<image class="indexboxitemimage" :src="item.host_img" mode="aspectFill"></image>
|
||||
<view class="indexboxitemleft flex-colum-start">
|
||||
<view class="indexboxitemleftone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="indexboxitemlefttow">
|
||||
{{item.intro}}
|
||||
</view>
|
||||
<view class="indexboxitemleftthere flex-colum-start">
|
||||
<view class="indexboxitemlefttheretext flex-start">
|
||||
<view class="indexboxitemlefttheretextone">
|
||||
<text>¥</text>
|
||||
<text>{{item.price}}</text>
|
||||
</view>
|
||||
<view class="indexboxitemlefttheretexttow">
|
||||
¥{{item.y_price}}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="indexboxitemleftthere_countdown flex-start">
|
||||
<text class="indexboxitemleftthere_countdowntext">倒计时:</text>
|
||||
<view v-if="item.end_times == 0" class="indexboxitemleftthere_countdowntexts">
|
||||
已失效
|
||||
</view>
|
||||
<view v-else class="indexboxitemleftthere_countdowntexts">
|
||||
<uni-countdown @timeup="updateCity" :day="item.end_times.d" :hour="item.end_times.h"
|
||||
:minute="item.end_times.m" :second="item.end_times.s"
|
||||
:indexs='index'></uni-countdown>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniCountdown from '@/components/countdown.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '银收客'
|
||||
},
|
||||
|
||||
},
|
||||
components: {
|
||||
uniCountdown
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
updateCity(data) {
|
||||
this.list[data].end_times = 0;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
mallInfoInfo(e) { //查看订单详情
|
||||
if (e.end_times != 0) {
|
||||
if (e.spec_type == 1) {
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('mall/mallInfos', {
|
||||
id: e.id,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请购时间以结束',
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index {
|
||||
width: 100%;
|
||||
padding: 32rpx 32rpx 0 32rpx;
|
||||
|
||||
.onecontenttowone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 20rpx;
|
||||
background: var(--bg-color-buttonone);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontenttowone {
|
||||
.onecontenttowone_one {
|
||||
margin-left: 8rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
|
||||
.indexbox {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.indexboxitem {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 18rpx;
|
||||
padding: 16rpx;
|
||||
|
||||
.indexboxitemimage {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.indexboxitemleft {
|
||||
flex: auto;
|
||||
height: 220rpx;
|
||||
margin-left: 24rpx;
|
||||
justify-content: flex-start;
|
||||
|
||||
.indexboxitemleftone {
|
||||
width: 400rpx;
|
||||
font-size: 32rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.indexboxitemlefttow {
|
||||
width: 400rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere {
|
||||
margin-top: 34rpx;
|
||||
padding-left: 26rpx;
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: url(@/static/imge/flashsale.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.indexboxitemlefttheretext {
|
||||
.indexboxitemlefttheretextone {
|
||||
text {
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FF5053;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemlefttheretexttow {
|
||||
margin-left: 12rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdown {
|
||||
.indexboxitemleftthere_countdowntext {
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
font-size: 18rpx;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdowntexts {
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
margin-left: 16rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
100
pages/index/components/flower/index.vue
Normal file
100
pages/index/components/flower/index.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="clothingmetals flex-between">
|
||||
<view class="clothingmetalsitem flex-colum" v-for="(item,index) in list" :key="index"
|
||||
@click="eeInfoseries(item)">
|
||||
<image class="clothingmetalsitemimage" :src="item.img" mode="aspectFill"></image>
|
||||
<view class="clothingmetalsitem_text flex-colum-start">
|
||||
<text>{{item.title}}</text>
|
||||
<text>{{item.english}}</text>
|
||||
</view>
|
||||
<view class="clothingmetalsitem_box flex-center">
|
||||
<text>立即前往</text>
|
||||
<u-icon name="arrow-right" color="##b1b1b1" size="8"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
data: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
eeInfoseries(e) {
|
||||
uni.pro.navigateTo('mall/series', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.clothingmetals {
|
||||
padding: 32rpx 28rpx 0rpx 28rpx;
|
||||
|
||||
.clothingmetalsitem {
|
||||
position: relative;
|
||||
width: 48%;
|
||||
height: 194rpx;
|
||||
|
||||
.clothingmetalsitemimage {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 194rpx;
|
||||
}
|
||||
|
||||
.clothingmetalsitem_text {
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 20rpx;
|
||||
text:nth-child(1) {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #679D96;
|
||||
}
|
||||
text:nth-child(2) {
|
||||
margin-top: 2rpx;
|
||||
font-size: 16rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.clothingmetalsitem_box{
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
text-align: center;
|
||||
bottom: 20rpx;
|
||||
width: 128rpx;
|
||||
height: 40rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
281
pages/index/components/index.vue
Normal file
281
pages/index/components/index.vue
Normal file
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<!-- <navbar :Background='Background' :navtitle='navtitle' :navboxshow="navboxshow" @fatherMethod='fatherMethod'>
|
||||
</navbar> -->
|
||||
<view class="content">
|
||||
<view class="content_item flex-between" v-for="(item,index) in list" :key="index" @click="eeInfo(item)">
|
||||
<view class="content_itemone flex-start">
|
||||
<image :src="item.avatar" mode="aspectFill"></image>
|
||||
<view class="content_itemonetext flex-colum-start">
|
||||
<view class="content_itemonetextone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<!-- <view class="content_itemonetexttow">
|
||||
<text>5.0分</text>
|
||||
<text>销量</text>
|
||||
</view> -->
|
||||
<view class="content_itemonetextthere">
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_itemtow">
|
||||
{{item.distance}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" class="flex-colum">
|
||||
<image :src="bgnothave" mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />
|
||||
|
||||
</view>
|
||||
<bottombbar :valuebbar='0'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
<!-- https://cdn.uviewui.com/uview/resources/3c56cbc6216b47db61e37090fdb6619.jpg -->
|
||||
<script>
|
||||
import navbar from '@/components/navbar.vue'
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
navbar,
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navtitle: '美发店', //名称
|
||||
navboxshow: '0', //显示
|
||||
Background: '#fff',
|
||||
list: [],
|
||||
bgnothave:uni.getStorageSync('bgnothave'),
|
||||
is_end: false,
|
||||
lng: '108.95399',
|
||||
lat: '34.30997',
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
await this.$onLaunched
|
||||
// #ifdef MP-WEIXIN
|
||||
this.getAuthorizeInfo() //获取位置请求 金纬度
|
||||
// #endif
|
||||
uni.pro.navigateTo('index/indexInfo')
|
||||
if (!uni.getStorageSync('loginuser')) { //未登录状态
|
||||
this.userlogin()
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
|
||||
this.positionindex()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.positionindex()
|
||||
},
|
||||
methods: {
|
||||
// 用户授权
|
||||
getAuthorizeInfo() {
|
||||
uni.authorize({
|
||||
scope: 'scope.userLocation',
|
||||
success: () => {
|
||||
// 允许授权
|
||||
this.getLocationInfo();
|
||||
},
|
||||
fail: () => {
|
||||
// 拒绝授权
|
||||
this.openConfirm();
|
||||
}
|
||||
})
|
||||
},
|
||||
eeInfo(e) { //跳转
|
||||
console.log(e)
|
||||
uni.cache.set('store_id', e.id) // 判断显示哪家的作品
|
||||
uni.cache.set('details_id', e)
|
||||
uni.pro.navigateTo('index/indexInfo')
|
||||
},
|
||||
// 获取地理位置
|
||||
getLocationInfo() {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: (res) => {
|
||||
this.lng = res.longitude
|
||||
this.lat = res.latitude
|
||||
this.positionindex()
|
||||
},
|
||||
fail: (err) => {
|
||||
this.positionindex()
|
||||
console.log(err, '获取错误')
|
||||
}
|
||||
});
|
||||
},
|
||||
// 再次获取授权。当用户第一次拒绝后再次请求授权
|
||||
openConfirm() {
|
||||
uni.showModal({
|
||||
title: '请求授权当前位置',
|
||||
content: '需要获取您的地理位置，请确认授权',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.openSetting(); // 打开地图权限设置
|
||||
} else if (res.cancel) {
|
||||
uni.showToast({
|
||||
title: '你拒绝了授权，无法获得周边位置信息',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
this.positionindex()
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
async userlogin() {
|
||||
let res = await this.api.userlogin({
|
||||
code: uni.cache.get('weixincode'),
|
||||
// #ifdef H5
|
||||
code: '0c3KOzFa1lkuMF0enAHa1Eu2xG1KOzFJ'
|
||||
// #endif
|
||||
})
|
||||
try {
|
||||
if (res) {
|
||||
uni.cache.set('loginuser', res);
|
||||
this.positionindex()
|
||||
} else {
|
||||
uni.cache.set('loginuser', 0);
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
async positionindex() {
|
||||
let res = await this.api.positionindex({
|
||||
lng: this.lng,
|
||||
lat: this.lat,
|
||||
page: this.form.page,
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.index {
|
||||
.content {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.content_item {
|
||||
border-radius: 12rpx;
|
||||
background: #fff;
|
||||
margin-top: 20rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
|
||||
.content_itemone {
|
||||
image {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.content_itemonetext {
|
||||
width: 300rpx;
|
||||
margin-left: 16rpx;
|
||||
height: 140rpx;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.content_itemonetextone {
|
||||
max-width: 300rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.content_itemonetexttow {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #f37f2f;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
margin-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
|
||||
.content_itemonetextthere {
|
||||
max-width: 300rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: 500;
|
||||
padding: 5rpx 8rpx;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #b1b1b1;
|
||||
color: #b1b1b1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_itemtow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-colum_image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
text {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
97
pages/index/components/popula/index.vue
Normal file
97
pages/index/components/popula/index.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="fourcontent">
|
||||
<u-scroll-list indicatorActiveColor="#6C6E8D" indicatorWidth='40' :indicator="false">
|
||||
<view class="scrollfourcontent" v-for="(item, index) in list" :key="index"
|
||||
@click="eeInfo(item)">
|
||||
<view class="scrollfourcontenttitem flex-colum">
|
||||
<image class="scrolltowcontentitem_image" :src="item.img" mode="aspectFill"></image>
|
||||
<view class="scrolltowcontentitem_one">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="scrolltowcontentitem_tow">
|
||||
{{item.price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
data: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
eeInfo(e) { //热门项目
|
||||
uni.pro.navigateTo('order/orderInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.fourcontent {
|
||||
margin-left: 8rpx;
|
||||
|
||||
.scrollfourcontent {
|
||||
padding: 22rpx 0;
|
||||
|
||||
.scrollfourcontenttitem {
|
||||
width: 280rpx;
|
||||
margin-left: 30rpx;
|
||||
align-items: flex-start;
|
||||
padding-bottom: 16rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4rpx 6rpx 2px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 18rpx;
|
||||
|
||||
.scrolltowcontentitem_image {
|
||||
border-top-left-radius: 18rpx;
|
||||
border-top-right-radius: 18rpx;
|
||||
width: 280rpx;
|
||||
height: 292rpx;
|
||||
}
|
||||
|
||||
.scrolltowcontentitem_one {
|
||||
padding-left: 16rpx;
|
||||
padding-top: 16rpx;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #28292D;
|
||||
}
|
||||
|
||||
.scrolltowcontentitem_tow {
|
||||
margin-left: 16rpx;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #F45C4C;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
95
pages/index/components/recommend/index.vue
Normal file
95
pages/index/components/recommend/index.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="onecontenttowone flex-start">
|
||||
<view class="onecontenttowone_one">
|
||||
{{title}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexbox flex-between">
|
||||
<image class="indexboxone" @click="eeInfoseries(list[0].mother_id)" :src="list[0].mother_img" mode="widthFix"></image>
|
||||
<view class="flex-colum-start">
|
||||
<image class="indexboxtow" @click="eeInfoseries(list[1].mother_id)" :src="list[1].mother_img" mode="widthFix"></image>
|
||||
<image class="indexboxthere" @click="eeInfoseries(list[2].mother_id)" :src="list[2].mother_img" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '银收客'
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
eeInfoseries(e) {
|
||||
uni.pro.navigateTo('mall/series', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index {
|
||||
width: 100%;
|
||||
padding: 32rpx 32rpx 0 32rpx;
|
||||
|
||||
.onecontenttowone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 20rpx;
|
||||
background: var(--bg-color-buttonone);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontenttowone {
|
||||
.onecontenttowone_one {
|
||||
margin-left: 8rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
|
||||
.indexbox {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.indexboxone {
|
||||
width: 336rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
.flex-colum-start {
|
||||
justify-content: space-between;
|
||||
height: 400rpx;
|
||||
|
||||
.indexboxtow {
|
||||
width: 334rpx;
|
||||
height: 188rpx;
|
||||
}
|
||||
|
||||
.indexboxthere {
|
||||
margin-top: 28rpx;
|
||||
width: 334rpx;
|
||||
height: 188rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
181
pages/index/components/salezone/index.vue
Normal file
181
pages/index/components/salezone/index.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="onecontenttowone flex-start">
|
||||
<view class="onecontenttowone_one">
|
||||
{{title}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexbox">
|
||||
<view class="indexboxitem flex-start" v-for="(item,index) in list" :key="index">
|
||||
<image class="indexboxitemimage" :src="item.host_img" mode="aspectFill"></image>
|
||||
<view class="indexboxitemleft flex-colum-start">
|
||||
<view class="indexboxitemleftone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="indexboxitemlefttow">
|
||||
{{item.intro}}
|
||||
</view>
|
||||
<view class="indexboxitemleftthere flex-start">
|
||||
<view class="indexboxitemleftthere_one">
|
||||
<text>¥</text>
|
||||
<text>{{item.price}}</text>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere_tow">
|
||||
¥{{item.y_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitembox" @click="mallInfoInfo(item)">
|
||||
立即抢购
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '银收客'
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
mallInfoInfo(e) { //查看订单详情
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index {
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
|
||||
.onecontenttowone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 20rpx;
|
||||
background: var(--bg-color-buttonone);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontenttowone {
|
||||
.onecontenttowone_one {
|
||||
margin-left: 8rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
|
||||
.indexbox {
|
||||
.indexboxitem {
|
||||
margin-top: 24rpx;
|
||||
position: relative;
|
||||
padding: 24rpx;
|
||||
width: 100%;
|
||||
height: 212rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 18rpx;
|
||||
|
||||
.indexboxitemimage {
|
||||
width: 164rpx;
|
||||
height: 164rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.indexboxitemleft {
|
||||
height: 164rpx;
|
||||
margin-left: 12rpx;
|
||||
width: 60%;
|
||||
|
||||
.indexboxitemleftone {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.indexboxitemlefttow {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere {
|
||||
margin-top: 20rpx;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.indexboxitemleftthere_one {
|
||||
font-size: 34rpx;
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FC5F69;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FC5F69;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_tow {
|
||||
text-decoration: line-through;
|
||||
margin-left: 12rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitembox {
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
bottom: 24rpx;
|
||||
background: var(--bgbuttonqq);
|
||||
border-radius: 24rpx;
|
||||
padding: 8rpx 22rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
182
pages/index/components/specials/index.vue
Normal file
182
pages/index/components/specials/index.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="indexbox">
|
||||
<image class="indexboximage" :src="img" mode=""></image>
|
||||
<view class="indexbox_box">
|
||||
<view class="indexbox_boxtop flex-between" @click="specials">
|
||||
<view class="indexbox_boxtopone">
|
||||
{{title}}
|
||||
</view>
|
||||
<view class="indexbox_boxtoptow">
|
||||
更多<text>></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexbox_boxitem flex-between">
|
||||
<view class="indexbox_boxitem_item flex-colum-start" v-for="(item,index) in list" :key="index"
|
||||
@click="mallInfoInfo(item)">
|
||||
<view class="indexbox_boxitem_itemimage">
|
||||
<image :src="item.host_img" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="indexbox_boxitem_itemone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="indexbox_boxitem_itemtow flex-start">
|
||||
<text>￥</text>
|
||||
<text>{{item.price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '每日特价'
|
||||
},
|
||||
img: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
specials(e) { //查看订单详情
|
||||
uni.pro.navigateTo('index/specials', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
mallInfoInfo(e) { //查看订单详情
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index {
|
||||
.indexbox {
|
||||
margin: 32rpx 28rpx 0 28rpx;
|
||||
position: relative;
|
||||
height: 378rpx;
|
||||
|
||||
.indexboximage {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 378rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.indexbox_box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
padding: 16rpx;
|
||||
|
||||
.indexbox_boxtop {
|
||||
margin-top: 8rpx;
|
||||
width: 100%;
|
||||
|
||||
.indexbox_boxtopone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.indexbox_boxtoptow {
|
||||
font-size: 18rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FD6C60;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
|
||||
text {
|
||||
font-size: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indexbox_boxitem {
|
||||
margin-top: 16rpx;
|
||||
padding: 16rpx 12rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.indexbox_boxitem_item {
|
||||
.indexbox_boxitem_itemimage {
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
background: #F8F8F8;
|
||||
border-radius: 8rpx;
|
||||
|
||||
image {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.indexbox_boxitem_itemone {
|
||||
width: 148rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.indexbox_boxitem_itemtow {
|
||||
margin-top: 12rpx;
|
||||
padding-right: 10rpx;
|
||||
justify-content: flex-end;
|
||||
background: url(@/static/imge/specials.png) no-repeat;
|
||||
background-size: cover;
|
||||
width: 148rpx;
|
||||
height: 48rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
|
||||
text {
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
text:nth-child(1) {
|
||||
line-height: 50rpx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
line-height: 48rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
194
pages/index/components/vipclass/index.vue
Normal file
194
pages/index/components/vipclass/index.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="theretowcontent flex-between">
|
||||
<view class="theretowcontent_item flex-colum" v-for="(item,index) in list" :key="index"
|
||||
@click="clickmemberinfos(item)">
|
||||
<view :class="index == 0?'theretowcontent_item_one':'theretowcontent_item_ones'">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view :class="index == 0?'theretowcontent_item_tow':'theretowcontent_item_tows'">
|
||||
￥{{item.price}}/<text>{{item.frequ}}次</text>
|
||||
</view>
|
||||
<view :class="index == 0?'theretowcontent_item_there':'theretowcontent_item_theres'">
|
||||
({{item.show}})
|
||||
</view>
|
||||
<view :class="index == 0?'theretowcontent_item_box':'theretowcontent_item_boxs'">
|
||||
{{item.is_user_sec == '0'?'购买':'加购'}}
|
||||
</view>
|
||||
<image class="theretowcontent_item_image" :src="item.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
data: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
clickmemberinfos(e) { //购买会员卡
|
||||
if (e.is_user_sec == 0) {
|
||||
uni.pro.navigateTo('my/member/memberinfos', {
|
||||
id: e.id,
|
||||
})
|
||||
// async toworder() { //会员卡
|
||||
// let res = await this.api.userreceivebalancecar({
|
||||
// store_id: uni.cache.get('store_id') // 判断显示哪家的作品
|
||||
// })
|
||||
// uni.showToast({
|
||||
// title: '领取成功',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// setTimeout(() => {
|
||||
// uni.pro.navigateTo('my/member/index')
|
||||
// }, 1500);
|
||||
// },
|
||||
} else {
|
||||
uni.pro.navigateTo('my/member/memberinfo', {
|
||||
id: e.id,
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.theretowcontent {
|
||||
width: 100%;
|
||||
padding: 24rpx 32rpx;
|
||||
|
||||
.theretowcontent_item {
|
||||
padding: 16rpx;
|
||||
width: 48%;
|
||||
border-radius: 10rpx;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
.theretowcontent_item_one {
|
||||
width: 55%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.theretowcontent_item_ones {
|
||||
width: 55%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
.theretowcontent_item_tow {
|
||||
margin-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Regular, Roboto;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
|
||||
text {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.theretowcontent_item_tows {
|
||||
margin-top: 20rpx;
|
||||
font-family: Roboto-Regular, Roboto;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
font-size: 28rpx;
|
||||
|
||||
text {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.theretowcontent_item_there {
|
||||
margin-top: 6rpx;
|
||||
font-size: 20rpx;
|
||||
width: 100%;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #D1CECE;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.theretowcontent_item_theres {
|
||||
margin-top: 6rpx;
|
||||
font-size: 20rpx;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
.theretowcontent_item_box {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 16rpx;
|
||||
padding: 6rpx 26rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.73) 0%, rgba(128, 128, 128, 0.73) 100%);
|
||||
box-shadow: 0px 6px 12rpx 2rpx rgba(49, 47, 47, 0.85);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.theretowcontent_item_boxs {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 16rpx;
|
||||
padding: 6rpx 26rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #F6AE5B;
|
||||
background: linear-gradient(180deg, #F9F9F9 0%, #FADAB5 100%);
|
||||
box-shadow: 0px 6rpx 12rpx 2px rgba(226, 172, 110, 0.55);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.theretowcontent_item_image {
|
||||
border-radius: 16rpx;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1154
pages/index/hotel.vue
Normal file
1154
pages/index/hotel.vue
Normal file
File diff suppressed because it is too large
Load Diff
659
pages/index/index.vue
Normal file
659
pages/index/index.vue
Normal file
@@ -0,0 +1,659 @@
|
||||
<template>
|
||||
<view class="index" :style="[theme]">
|
||||
<view class="onecontent" v-if="listswiper.length != 0">
|
||||
<u-swiper indicator :list="listswiper" indicatorMode='dot' height='144' radius='12'></u-swiper>
|
||||
</view>
|
||||
<!-- clothingmetals服装金刚区 -->
|
||||
<clothingmetals v-if="list.goods_type.length != 0 && model_type == 'Dress'" :list='list.goods_type'>
|
||||
</clothingmetals>
|
||||
<!-- clothingmetals鲜花服装金刚区 -->
|
||||
<flower v-if="list.goods_type.length != 0 && model_type == 'Flower'" :list='list.goods_type'></flower>
|
||||
<!-- 每日特价 -->
|
||||
<specials v-if="list.special.data.length != 0" :img='list.special.img' :list='list.special.data'
|
||||
:title='list.special.title'></specials>
|
||||
<!-- 限时抢购 -->
|
||||
<flashsale v-if="list.panic.data.length != 0" :title='list.panic.title' :list='list.panic.data'></flashsale>
|
||||
<!-- 热榜推荐-->
|
||||
<view class="contentclothing" v-if="list.is_re.img != null" style="margin-top: 16rpx;">
|
||||
<view class="contentclothingimage" v-if="list.is_re.img != null">
|
||||
<image :src="list.is_re.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<clothing v-if="list.is_re.data.length != 0" :list='list.is_re.data'></clothing>
|
||||
</view>
|
||||
<!-- 优秀好员工第一份 -->
|
||||
<view v-if="list.people.length != 0" style="margin-top: 16rpx;">
|
||||
<view class="contenttext">
|
||||
<text class="contenttexttext">{{list.position_nickname || ''}}</text>
|
||||
</view>
|
||||
<employees :list='list.people' :bgbutton='theme.bgbutton'></employees>
|
||||
</view>
|
||||
<!-- 优秀好员工第二份 -->
|
||||
<view v-if="list.people_two.length != 0">
|
||||
<view class="contenttext">
|
||||
<text class="contenttexttext">{{list.position_nickname_two || ''}}</text>
|
||||
</view>
|
||||
<employees :list='list.people_two' :bgbutton='theme.bgbutton'></employees>
|
||||
</view>
|
||||
<!-- 会员卡 -->
|
||||
<vipclass v-if="list.vip.length != 0" :list='list.vip'></vipclass>
|
||||
<!-- 热门推荐 -->
|
||||
<recommend :title='list.mother_goods_type.title' :list='list.mother_goods_type.data'
|
||||
v-if="list.mother_goods_type.data.length != 0"></recommend>
|
||||
<!-- 秒杀专区 -->
|
||||
<salezone :title='list.goods.title' :list='list.goods.data' v-if="list.goods.data.length != 0"></salezone>
|
||||
<!-- 热门项目 -->
|
||||
<view v-if="list.service.length != 0" style="margin-top: 16rpx;">
|
||||
<view class="contenttext">
|
||||
<text class="contenttexttext">热门项目</text>
|
||||
</view>
|
||||
<popula :list='list.service'></popula>
|
||||
</view>
|
||||
|
||||
<bottombbar :valuebbar='0'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
import clothingmetals from './components/clothingmetals/index.vue'
|
||||
import employees from './components/employees/index.vue'
|
||||
import clothing from './components/clothing/index.vue'
|
||||
import flower from './components/flower/index.vue'
|
||||
import vipclass from './components/vipclass/index.vue'
|
||||
import recommend from './components/recommend/index.vue'
|
||||
import salezone from './components/salezone/index.vue'
|
||||
import popula from './components/popula/index.vue'
|
||||
import specials from './components/specials/index.vue'
|
||||
import flashsale from './components/flashsale/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
bottombbar,
|
||||
clothingmetals,
|
||||
employees,
|
||||
clothing,
|
||||
flower,
|
||||
recommend,
|
||||
salezone,
|
||||
popula,
|
||||
vipclass,
|
||||
specials,
|
||||
flashsale
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model_type: '',
|
||||
indicators: false,
|
||||
list: {
|
||||
vip: [],
|
||||
service: [],
|
||||
people: [],
|
||||
people_two: [],
|
||||
goods_type: [],
|
||||
mother_goods_type: {
|
||||
data: [],
|
||||
img: null
|
||||
},
|
||||
goods: {
|
||||
data: [],
|
||||
img: null
|
||||
},
|
||||
special: {
|
||||
data: [],
|
||||
img: '',
|
||||
title: '每日特价'
|
||||
},
|
||||
panic: {
|
||||
data: [],
|
||||
title: '限时抢购'
|
||||
},
|
||||
theme_re: {
|
||||
data: [],
|
||||
img: null
|
||||
},
|
||||
is_re: {
|
||||
data: [],
|
||||
img: null
|
||||
},
|
||||
new: {
|
||||
data: [],
|
||||
img: null
|
||||
}
|
||||
},
|
||||
listswiper: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
async onLoad(e) {
|
||||
// #ifdef H5
|
||||
await this.$onLaunched
|
||||
// #endif
|
||||
try {
|
||||
if (e.scene) {
|
||||
uni.cache.set('store_id', e.scene) // 判断显示哪家的作品
|
||||
this.userloginss() //刷新初始数据
|
||||
} else {
|
||||
// #ifdef MP-WEIXIN
|
||||
if (!uni.cache.get('loginuser').userinfo) {
|
||||
this.userloginss() //刷新初始数据
|
||||
} else {
|
||||
this.indexnewappclassindex()
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
} catch (e) {}
|
||||
// #ifdef H5
|
||||
let res = await this.api.userlogin({
|
||||
code: '0c3KOzFa1lkuMF0enAHa1Eu2xG1KOzFJ',
|
||||
store_id: 74, // 判断显示哪家的作品
|
||||
//【2,美容】【62,美发】【63,健身】【65,口腔】【66,足疗按摩】【89,社区】
|
||||
//【72,宠物生活】【74,婚纱摄影】【79,服装】【80,鲜花】【82, 送水】【88, 母婴】
|
||||
})
|
||||
if (res) {
|
||||
if (res.model_type == 'Hotel') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/hotel'
|
||||
});
|
||||
}
|
||||
uni.cache.set('loginuser', res);
|
||||
uni.cache.set('store_id', res.store_id) // 判断显示哪家的2
|
||||
uni.cache.set('openId', res.userinfo.open_id);
|
||||
this.indexnewappclassindex()
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
click1(a, e) { //优秀员工跳转
|
||||
uni.pro.navigateTo('order/orderInfos', {
|
||||
id: a.id,
|
||||
})
|
||||
},
|
||||
async userloginss() {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
try {
|
||||
uni.cache.set('weixincode', data.code);
|
||||
let res = await this.api.userlogin({
|
||||
code: uni.cache.get('weixincode'),
|
||||
store_id: uni.cache.get('store_id') // 判断显示哪家的作品
|
||||
})
|
||||
if (res) {
|
||||
if (res.model_type == 'Hotel') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/hotel'
|
||||
});
|
||||
}
|
||||
uni.cache.set('loginuser', res);
|
||||
uni.cache.set('store_id', res.store_id) // 判断显示哪家的作品
|
||||
uni.cache.set('openId', res.userinfo.open_id);
|
||||
// uni.pro.navigateTo('order/orderInfos')
|
||||
this.indexnewappclassindex()
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
},
|
||||
onShow() {
|
||||
if ( uni.getStorageSync('loginuser').model_type == 'Hotel') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/hotel'
|
||||
});
|
||||
}
|
||||
},
|
||||
async clickmemberinfos(e) { //购买会员卡
|
||||
if (e.is_user_sec == 0) {
|
||||
uni.pro.navigateTo('my/member/memberinfos', {
|
||||
id: e.id,
|
||||
})
|
||||
// async toworder() { //会员卡
|
||||
// let res = await this.api.userreceivebalancecar({
|
||||
// store_id: uni.cache.get('store_id') // 判断显示哪家的作品
|
||||
// })
|
||||
// uni.showToast({
|
||||
// title: '领取成功',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// setTimeout(() => {
|
||||
// uni.pro.navigateTo('my/member/index')
|
||||
// }, 1500);
|
||||
// },
|
||||
} else {
|
||||
uni.pro.navigateTo('my/member/memberinfo', {
|
||||
id: e.id,
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
mallInfoInfo(e) { //查看订单详情
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
|
||||
eeInfoseries(e) {
|
||||
uni.pro.navigateTo('mall/series', {
|
||||
id: e.goods_type_id,
|
||||
})
|
||||
},
|
||||
async indexnewappclassindex() { //首页数据
|
||||
let res = await this.api.indexnewappclassindex({
|
||||
store_id: uni.cache.get('store_id')
|
||||
})
|
||||
try {
|
||||
if (res) {
|
||||
//前端模拟数据
|
||||
this.list = res
|
||||
if (res.vip) { //会员卡
|
||||
this.list.vip = res.vip
|
||||
} else {
|
||||
this.list.vip = []
|
||||
}
|
||||
if (res.people_two) { ///优秀员工2
|
||||
this.list.people_two = res.people_two
|
||||
} else {
|
||||
this.list.people_two = []
|
||||
}
|
||||
if (res.service) { //热门项目
|
||||
this.list.service = res.service
|
||||
} else {
|
||||
this.list.service = []
|
||||
}
|
||||
if (res.people) { //优秀员工1
|
||||
this.list.people = res.people
|
||||
} else {
|
||||
this.list.people = []
|
||||
}
|
||||
if (res.store.bananer) { //轮播
|
||||
this.listswiper = res.store.bananer
|
||||
} else {
|
||||
this.listswiper = []
|
||||
}
|
||||
if (res.mother_goods_type) { //热门推荐 母婴
|
||||
this.list.mother_goods_type = res.mother_goods_type
|
||||
} else {
|
||||
this.$set(this.list, 'mother_goods_type', {
|
||||
img: null,
|
||||
data: []
|
||||
})
|
||||
}
|
||||
if (res.goods) { //秒杀专区
|
||||
this.list.goods = res.goods
|
||||
} else {
|
||||
this.$set(this.list, 'goods', {
|
||||
img: null,
|
||||
data: []
|
||||
})
|
||||
}
|
||||
if (res.special) { //每日特价
|
||||
this.list.special = res.special
|
||||
this.list.special.data = res.special.data.slice(0, 4)
|
||||
} else {
|
||||
this.$set(this.list, 'special', {
|
||||
img: null,
|
||||
title: '每日特价',
|
||||
data: []
|
||||
})
|
||||
}
|
||||
if (res.panic) { //限时抢购
|
||||
this.list.panic = res.panic
|
||||
var dates = new Date().getTime();
|
||||
let recommendList = this.list.panic.data;
|
||||
recommendList.forEach((item, index) => {
|
||||
var leftTime = item.end_time - dates; //计算两日期之间相差的毫秒数
|
||||
if (leftTime >= 0) {
|
||||
let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
|
||||
let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
|
||||
let m = Math.floor(leftTime / 1000 / 60 % 60);
|
||||
let s = Math.floor(leftTime / 1000 % 60);
|
||||
item.end_times = {
|
||||
d: d,
|
||||
h: h,
|
||||
m: m,
|
||||
s: s
|
||||
}
|
||||
} else {
|
||||
item.end_times = 0
|
||||
}
|
||||
})
|
||||
this.list.panic.data = recommendList
|
||||
} else {
|
||||
this.$set(this.list, 'panic', {
|
||||
title: '限时抢购',
|
||||
data: []
|
||||
})
|
||||
}
|
||||
if (res.theme_re) { //服装
|
||||
this.list.theme_re = res.theme_re
|
||||
} else {
|
||||
this.$set(this.list, 'theme_re', {
|
||||
img: null,
|
||||
data: []
|
||||
})
|
||||
}
|
||||
if (res.discount) { //服装
|
||||
this.list.discount = res.discount
|
||||
} else {
|
||||
this.$set(this.list, 'new', {
|
||||
discount: null,
|
||||
})
|
||||
}
|
||||
if (res.new) { //服装
|
||||
this.list.new = res.new
|
||||
} else {
|
||||
this.$set(this.list, 'new', {
|
||||
img: null,
|
||||
data: []
|
||||
})
|
||||
}
|
||||
if (res.goods_type) { //服装金刚区
|
||||
this.list.goods_type = res.goods_type
|
||||
} else {
|
||||
this.$set(this.list, 'goods_type', [])
|
||||
}
|
||||
if (res.is_re) { //服装
|
||||
this.list.is_re = res.is_re
|
||||
} else {
|
||||
this.$set(this.list, 'is_re', {
|
||||
img: null,
|
||||
data: []
|
||||
})
|
||||
}
|
||||
uni.cache.set('store_id', res.store.id) // 返回的id
|
||||
if (uni.cache.get('store_id')) { //store_id 行业id
|
||||
this.$store.dispatch("actionsclassification");
|
||||
}
|
||||
uni.setNavigationBarTitle({ //定义标题
|
||||
title: res.store.title
|
||||
});
|
||||
this.model_type = uni.cache.get('loginuser').model_type //类别分类
|
||||
|
||||
// this.list.describe = res.describe.replace(/\<img/g,
|
||||
// '<img style="max-width:100%;height:auto" ');
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
::v-deep .u-scroll-list__indicator {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.index {
|
||||
.onecontent {
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.contentclothing {
|
||||
padding: 8rpx 32rpx;
|
||||
width: 100%;
|
||||
|
||||
.contentclothingimageclassimagebuya {
|
||||
width: auto;
|
||||
margin: 48rpx 0;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimageclass {
|
||||
margin-top: 50rpx;
|
||||
|
||||
.contentclothingclassimage {
|
||||
width: 224.35rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.contentclothingimageclassbox {
|
||||
position: relative;
|
||||
margin-top: 18rpx;
|
||||
width: 100%;
|
||||
background: #ABAD98;
|
||||
border-radius: 18rpx;
|
||||
border: 2rpx solid #404136;
|
||||
padding: 28rpx 18rpx;
|
||||
|
||||
.contentclothingimageclassboxitem:nth-child(1) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.contentclothingimageclassboxitem {
|
||||
position: relative;
|
||||
border-left: 1rpx dashed #fff;
|
||||
padding: 0 18rpx;
|
||||
|
||||
.contentclothingimageclassboxitemone {
|
||||
font-size: 48rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.contentclothingimageclassboxitemtow {
|
||||
margin-left: 10rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimageclassboxitemabsolute {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 18rpx;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
text-align: center;
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: #7e8a83;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimageclassbox::after {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
left: -11px;
|
||||
bottom: 50%;
|
||||
transform: translateY(50%);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 0 11px 11px 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.contentclothingimageclassbox::before {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
right: -11px;
|
||||
bottom: 50%;
|
||||
transform: translateY(50%);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 11px 0 0 11px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimage {
|
||||
width: 130rpx;
|
||||
height: 52rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingbox {
|
||||
.fourcontents {
|
||||
.scrollfourcontents {
|
||||
padding: 22rpx 0;
|
||||
|
||||
.scrollfourcontenttitems {
|
||||
width: 246rpx;
|
||||
height: 296rpx;
|
||||
margin-left: 30rpx;
|
||||
position: relative;
|
||||
|
||||
.scrolltowcontentitem_images {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 18rpx;
|
||||
}
|
||||
|
||||
.scrolltowcontentitem_ones {
|
||||
position: absolute;
|
||||
padding: 8rpx 10rpx;
|
||||
bottom: 12rpx;
|
||||
left: 14rpx;
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
border-radius: 20rpx;
|
||||
font-size: 18rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingboxoone {
|
||||
.fourcontentsoneitem {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
|
||||
.fourcontentsoneitemimage {
|
||||
width: 278rpx;
|
||||
border-radius: 18rpx;
|
||||
height: 194rpx;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtext {
|
||||
flex: 1;
|
||||
height: 194rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.fourcontentsoneitemtextone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtexttow {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtow {
|
||||
width: 100%;
|
||||
|
||||
.fourcontentsoneitemtowitem {
|
||||
margin-top: 32rpx;
|
||||
width: 330rpx;
|
||||
|
||||
.fourcontentsoneitemtowitemimage {
|
||||
border-radius: 18rpx;
|
||||
width: 330rpx;
|
||||
height: 356rpx;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtowitemone {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtowitemtow {
|
||||
margin-top: 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contenttext {
|
||||
padding: 0 32rpx;
|
||||
|
||||
.contenttexttext {
|
||||
width: auto;
|
||||
position: relative;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.contenttexttext::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5rpx;
|
||||
right: -6rpx;
|
||||
z-index: 0;
|
||||
display: inline-block;
|
||||
width: 118rpx;
|
||||
height: 10rpx;
|
||||
background: var(--bgbuttonbackground);
|
||||
border-radius: 8rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
600
pages/index/indexInfo.vue
Normal file
600
pages/index/indexInfo.vue
Normal file
@@ -0,0 +1,600 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<!-- <navbar :Background='Background' :navtitle='navtitle' :navMethodcan='1' :navboxshow="navboxshow"
|
||||
@fatherMethod='fatherMethod'>
|
||||
</navbar> -->
|
||||
<image class="index_top_imge" :src="list.store.background" mode="aspectFill"></image>
|
||||
<view class="index_box">
|
||||
<view class="oneindex_box">
|
||||
<view class="oneindex_box_image">
|
||||
<image :src="list.store.avatar" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="oneindex_box_text flex-start">
|
||||
<view class="oneindex_box_text_one">
|
||||
{{list.store.title}}
|
||||
</view>
|
||||
<view class="oneindex_box_text_tow flex-start">
|
||||
<u-rate :count="count" v-model="list.store.score" readonly active-color="#f1cb66"
|
||||
inactive-color="#F1CB66"></u-rate>
|
||||
<text class="oneindex_box_text_towtext">{{list.store.score}}.0</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towindex_box_text flex-between">
|
||||
<view class="towindex_box_text_one">
|
||||
营业时间：{{list.store.b_hours}}
|
||||
</view>
|
||||
<view class="towindex_box_text_tow flex-start" @click="mobilemobile(list.store.mobile)">
|
||||
<u-icon name="phone-fill" color="#2ca248" size="20"></u-icon>
|
||||
<text>联系商家</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towindex_box_dw flex-start" @click="openmap">
|
||||
<image src="@/static/positioning.png" mode="aspectFill"></image>
|
||||
<text style="margin-left: 12rpx;">{{list.store.address}}</text>
|
||||
</view>
|
||||
<view class="towindex_box_bouttn flex-start">
|
||||
<text v-for="(item,index) in list.store.label" :key="index">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towindextow" @click="toworder()" v-if="list.is_balance_vip == 0">
|
||||
<image :src="list.vip_img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="thereindexone flex-between">
|
||||
<view class="thereindexone_item flex-colum" v-for="(item,indexs) in list.store_type" :key="indexs"
|
||||
@click="clickthereindexone(item.id)">
|
||||
<image :src="item.img" mode="aspectFill"></image>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourindexone">
|
||||
<view class="fourindexone_one flex-center">
|
||||
<text class="fourindexone_one_o"></text>
|
||||
<text class="fourindexone_one-text">预约服务</text>
|
||||
<text class="fourindexone_one_T"></text>
|
||||
</view>
|
||||
<view class="fourindexone_box flex-colum" v-for="(item,index) in list.store_service" :key="index"
|
||||
@click="eeInfo(item)">
|
||||
<view class="fourindexone_item flex-start">
|
||||
<image class="fourindexone_itemimage" :src="item.img" mode="aspectFill"></image>
|
||||
<view class="fourindexone_itemview flex-colum-start">
|
||||
<view class="fourindexone_itemview_one">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="fourindexone_itemview_tow">
|
||||
{{item.describe}}
|
||||
</view>
|
||||
<view class="fourindexone_itemview_there flex-start">
|
||||
<view class="fourindexone_itemview_there_text">
|
||||
<text>¥</text>{{item.price}}
|
||||
</view>
|
||||
<view class="fourindexone_itemview_there_text_x">
|
||||
¥{{item.y_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourindexone_item_there">
|
||||
立即预约
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fiveindexone">
|
||||
<view class="fiveindexonehtml" v-html="list.describe">
|
||||
</view>
|
||||
<view class="sixindex" @click="clickthereindexone(0)">
|
||||
立马预约服务
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<bottombbar :valuebbar='1'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navbar from '@/components/navbar.vue'
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
navbar,
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navtitle: '', //名称
|
||||
navboxshow: '3', //显示
|
||||
Background: '#fff',
|
||||
count: 5,
|
||||
value: 2,
|
||||
list: {}
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
if (e) {
|
||||
uni.cache.set('store_id', e.scene) // 判断显示哪家的作品
|
||||
}
|
||||
await this.$onLaunched
|
||||
// uni.reLaunch({
|
||||
// url: '/pages/index/components/hairdressing'
|
||||
// })
|
||||
this.indexappclassindex()
|
||||
},
|
||||
methods: {
|
||||
async userlogin() { //登录
|
||||
let res = await this.api.userlogin({
|
||||
code: uni.cache.get('weixincode'),
|
||||
// #ifdef H5
|
||||
code: '0c3KOzFa1lkuMF0enAHa1Eu2xG1KOzFJ'
|
||||
// #endif
|
||||
})
|
||||
try {
|
||||
if (res) {
|
||||
uni.cache.set('loginuser', res);
|
||||
this.positionindex()
|
||||
} else {
|
||||
uni.cache.set('loginuser', 0);
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
fatherMethod() {
|
||||
uni.cache.set('details_id', '')
|
||||
uni.cache.set('store_id', '')
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
async toworder() { //会员卡
|
||||
let res = await this.api.userreceivebalancecar({
|
||||
store_id: uni.cache.get('store_id') // 判断显示哪家的作品
|
||||
})
|
||||
uni.showToast({
|
||||
title: '领取成功',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.pro.navigateTo('my/member/index')
|
||||
}, 1500);
|
||||
},
|
||||
openmap() { //打开地图
|
||||
uni.openLocation({
|
||||
latitude: Number(this.list.store.lat),
|
||||
longitude: Number(this.list.store.lng),
|
||||
name: this.list.store.title,
|
||||
address: this.list.store.address,
|
||||
success: (res) => {
|
||||
console.log('success');
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
},
|
||||
eeInfo(e) { //查看订单详情
|
||||
uni.pro.navigateTo('order/orderInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
clickthereindexone(e) {
|
||||
uni.pro.navigateTo('order/index', {
|
||||
id: e
|
||||
})
|
||||
},
|
||||
mobilemobile(e) { //打电话
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: e //仅为示例
|
||||
});
|
||||
},
|
||||
async indexappclassindex() { //店铺详情
|
||||
let res = await this.api.indexappclassindex({
|
||||
store_id: uni.cache.get('store_id')
|
||||
})
|
||||
try {
|
||||
if (res) {
|
||||
console.log(res)
|
||||
this.list = res
|
||||
uni.cache.set('store_id', res.store.id) // 返回的id
|
||||
if (uni.cache.get('store_id')) {
|
||||
this.$store.dispatch("actionsclassification");
|
||||
}
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.store.title
|
||||
});
|
||||
this.list.describe = res.describe.replace(/\<img/g,
|
||||
'<img style="max-width:100%;height:auto" ');
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
.index {
|
||||
.index_top_imge {
|
||||
width: 100%;
|
||||
height: 448rpx;
|
||||
z-index: 98;
|
||||
}
|
||||
|
||||
.index_box {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
background: #FFFFFF;
|
||||
border-radius: 26rpx 26rpx 0px 0px;
|
||||
|
||||
.oneindex_box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 44rpx 28rpx;
|
||||
|
||||
.oneindex_box_image {
|
||||
position: absolute;
|
||||
left: 28rpx;
|
||||
top: -28rpx;
|
||||
width: 108rpx;
|
||||
height: 108rpx;
|
||||
|
||||
image {
|
||||
border-radius: 20rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.oneindex_box_text {
|
||||
margin-left: 140rpx;
|
||||
|
||||
.oneindex_box_text_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.oneindex_box_text_tow {
|
||||
.oneindex_box_text_towtext {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #F1CB66;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towindex_box_text {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.towindex_box_text_one {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towindex_box_text_tow {
|
||||
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.towindex_box_dw {
|
||||
image {
|
||||
width: 25.37rpx;
|
||||
height: 33.02rpx;
|
||||
}
|
||||
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular,
|
||||
Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.towindex_box_bouttn {
|
||||
margin-top: 32rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-left: 16rpx;
|
||||
padding: 8rpx 14rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towindextow {
|
||||
padding: 32rpx;
|
||||
border-top: 16rpx solid #F7F7F7;
|
||||
border-bottom: 16rpx solid #F7F7F7;
|
||||
background: #FFFFFF;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.thereindexone {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.thereindexone_item {
|
||||
image {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fourindexone {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.fourindexone_one {
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #1A1A1A;
|
||||
|
||||
.fourindexone_one_o {
|
||||
display: inline-block;
|
||||
width: 34rpx;
|
||||
height: 4rpx;
|
||||
background: linear-gradient(94deg, rgba(255, 255, 255, 0) 0%, #373746 100%);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.fourindexone_one-text {
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.fourindexone_one_T {
|
||||
display: inline-block;
|
||||
width: 34rpx;
|
||||
height: 4rpx;
|
||||
background: linear-gradient(266deg, rgba(255, 255, 255, 0) 0%, #373746 100%);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fourindexone_box {
|
||||
.fourindexone_item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 32rpx 0;
|
||||
border-bottom: 1rpx dashed #F7F7F7;
|
||||
|
||||
.fourindexone_itemimage {
|
||||
width: 164rpx;
|
||||
height: 164rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.fourindexone_item_there {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 32rpx;
|
||||
padding: 16rpx 22rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(180deg, #A3A7D5 0%, #414154 100%);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.fourindexone_itemview {
|
||||
|
||||
height: 164rpx;
|
||||
justify-content: space-evenly;
|
||||
margin-left: 24rpx;
|
||||
|
||||
.fourindexone_itemview_one {
|
||||
width: 300rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.fourindexone_itemview_tow {
|
||||
width: 300rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.fourindexone_itemview_there {
|
||||
.fourindexone_itemview_there_text {
|
||||
font-size: 34rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FC5F69;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fourindexone_itemview_there_text_x {
|
||||
margin-left: 12rpx;
|
||||
text-decoration: line-through;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fiveindexone {
|
||||
// padding: 32rpx 28rpx;
|
||||
width: 100%;
|
||||
|
||||
// background: linear-gradient(309deg, #FFFFFF 0%, #1A1A1A 100%);
|
||||
// border-radius: 32rpx 32rpx 0px 0px;
|
||||
.fiveindexonehtml {
|
||||
width: 100%;
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fiveindexone_one {
|
||||
.fiveindexone_oneimage {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.fiveindexone_one_text {
|
||||
margin-left: 12rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.fiveindextow {
|
||||
padding: 28rpx;
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 18rpx;
|
||||
|
||||
.fiveindextowitem:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.fiveindextowitem {
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
|
||||
view {
|
||||
width: 33%;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fiveindexthere {
|
||||
overflow-x: scroll;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.fiveindexthere_item:nth-child(1) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.fiveindexthere_item {
|
||||
margin-left: 54rpx;
|
||||
|
||||
.fiveindexthere_itemimage {
|
||||
width: 120rpx;
|
||||
height: 152rpx;
|
||||
}
|
||||
|
||||
.fiveindexthere_item_one {
|
||||
margin-top: 8rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.fiveindexthere_item_tow {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.57);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fiveindexfour {
|
||||
.fiveindexfourimage {
|
||||
margin-top: 70rpx;
|
||||
position: relative;
|
||||
width: 370rpx;
|
||||
height: 396rpx;
|
||||
background: linear-gradient(316deg, #636363 0%, #ACACAC 100%);
|
||||
border-radius: 16rpx;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
top: -30rpx;
|
||||
left: -18rpx;
|
||||
border-radius: 16rpx;
|
||||
width: 372rpx;
|
||||
height: 412rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fiveindexfourtext {
|
||||
flex: 1;
|
||||
margin-left: 70rpx;
|
||||
|
||||
text {
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sixindex {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 24rpx 0;
|
||||
text-align: center;
|
||||
background: linear-gradient(360deg, #FBDDBB 0%, #FEE3C5 100%);
|
||||
border-radius: 48rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
151
pages/index/iose.vue
Normal file
151
pages/index/iose.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<button @tap="chooseVideo()">视频上传</button>
|
||||
<button @tap="img()">图片上传</button>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
var timetamp = new Date().getTime();
|
||||
var uploadFileSize = 1024 * 1024 * 100; // 上传文件的大小限制100m
|
||||
var osshost = ''; //阿里云对象储存地址
|
||||
function random_string(len) {
|
||||
len = len || 32;
|
||||
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
|
||||
var maxPos = chars.length;
|
||||
var pwd = '';
|
||||
for (let i = 0; i < len; i++) {
|
||||
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
|
||||
}
|
||||
return pwd;
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videoSrc: '',
|
||||
Imgsrc: '',
|
||||
showVideo: false,
|
||||
formData: {
|
||||
original: 0,
|
||||
type: 1,
|
||||
detail: '',
|
||||
tags: '',
|
||||
images: [],
|
||||
video: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
chooseVideo() {
|
||||
var self = this;
|
||||
uni.chooseVideo({
|
||||
count: 1,
|
||||
sourceType: ['camera', 'album'],
|
||||
success: function(res) {
|
||||
let videoSrc = res.tempFilePath;
|
||||
if (res.size > uploadFileSize) {
|
||||
uni.showToast({
|
||||
title: '文件大小超过系统上传限制：' + uploadFileSize,
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
return;
|
||||
}
|
||||
let fileName = self.getFileName(videoSrc);
|
||||
self.fileUpload('video',videoSrc,fileName);
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '取消选择视频',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//图片上传
|
||||
img() {
|
||||
var self = this;
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], //从相册选择
|
||||
success: function(res) {
|
||||
let Imgsrc = res.tempFilePaths[0];
|
||||
let fileName = self.getFileName(Imgsrc); // 自定义上传后的文件名称
|
||||
self.fileUpload('video',Imgsrc,fileName);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 文件上传
|
||||
fileUpload(type, path, stroeAs) {
|
||||
let self = this;
|
||||
uni.showLoading({
|
||||
title: '文件上传中'
|
||||
});
|
||||
var requestTask = uni.request({
|
||||
url: '', //请求后台签名地址。
|
||||
complete: res => {
|
||||
var data = res.data.data;
|
||||
uni.uploadFile({
|
||||
url: data.host, //后台给的阿里云存储给的上传地址
|
||||
filePath: path,
|
||||
fileType: type,
|
||||
name: 'file',
|
||||
formData: {
|
||||
key: stroeAs, //文件名
|
||||
policy: data.policy, //后台获取超时时间
|
||||
OSSAccessKeyId: data.accessid, //后台获取临时ID
|
||||
success_action_status: '200', //让服务端返回200,不然，默认会返回204
|
||||
signature: data.signature //后台获取签名
|
||||
},
|
||||
success: res => {
|
||||
console.log(res);
|
||||
// console.log('uploadImage success, res is:', res);
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
icon: 'success',
|
||||
duration: 1000
|
||||
});
|
||||
if (type === 'image') {
|
||||
self.imageList = self.imageList.concat(path);
|
||||
self.formData.images.push(osshost + '/' + stroeAs);
|
||||
}
|
||||
if (type === 'video') {
|
||||
self.showVideo = true;
|
||||
self.formData.video = osshost + '/' + stroeAs;
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
content: err.errMsg,
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
_getSuffix(filename) {
|
||||
let pos = filename.lastIndexOf('.');
|
||||
let suffix = '';
|
||||
if (pos != -1) {
|
||||
suffix = filename.substring(pos);
|
||||
}
|
||||
return suffix;
|
||||
},
|
||||
getFileName(filename) {
|
||||
return (
|
||||
'user_dir/' +
|
||||
new Date().getTime() +
|
||||
Math.random()
|
||||
.toString(36)
|
||||
.substring(3, 20) +
|
||||
this._getSuffix(filename)
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
29
pages/index/lange.vue
Normal file
29
pages/index/lange.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<view class="dark-bg" :style="theme">
|
||||
<view class="bg-test"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bg-test {
|
||||
width: 300px;
|
||||
height: 160px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--bg-color-button);
|
||||
}
|
||||
</style>
|
||||
143
pages/index/member/index.vue
Normal file
143
pages/index/member/index.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="onecontentone">
|
||||
我的会员卡(3)
|
||||
</view>
|
||||
<view class="flex-colum">
|
||||
<view class="towcontentitem" v-if="list.length>0" v-for="(item,index) in list" :key="index"
|
||||
@click="eeInfo(item)">
|
||||
<image class="towcontentitemimage" src="@/static/1.png" mode="aspectFill"></image>
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemoneimage" src="@/static/logo.png" mode="aspectFill"></image>
|
||||
<text class="towcontentitemonetext" style="color: #fff;">剪发卡</text>
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-start">
|
||||
<text class="towcontentitemtowetext" style="color: #fff;">剪发卡</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" class="flex-colum">
|
||||
<image :src="bgnothave" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgnothave:uni.getStorageSync('bgnothave'),
|
||||
is_end: false,
|
||||
list: [{
|
||||
id: 1
|
||||
}, {
|
||||
id: 2
|
||||
}],
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
eeInfo(e) {
|
||||
console.log(e.type)
|
||||
if (e.type == 'balance') {
|
||||
uni.pro.navigateTo('my/member/memberinfo', {
|
||||
id: e,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('my/member/memberone', {
|
||||
id: e,
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.content {
|
||||
border-top: 16rpx solid #f7f7f7;
|
||||
padding: 0 28rpx;
|
||||
|
||||
.flex-colum_image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
text {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontentone {
|
||||
padding-top: 32rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.flex-colum {
|
||||
.towcontentitem {
|
||||
margin-top: 22rpx;
|
||||
width: 96%;
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.towcontentitemimage {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.towcontentitemone {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
.towcontentitemoneimage {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
|
||||
.towcontentitemonetext {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 52rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
327
pages/index/member/memberinfo.vue
Normal file
327
pages/index/member/memberinfo.vue
Normal file
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="towcontentitem">
|
||||
<image class="towcontentitemimage" src="@/static/1.png" mode="aspectFill"></image>
|
||||
<view class="fourcontentitemabsolute">
|
||||
年卡会员
|
||||
</view>
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemoneimage" src="@/static/logo.png" mode="aspectFill"></image>
|
||||
<view class="towcontentitemonetext flex-colum-start">
|
||||
<text class="towcontentitemonetextone" style="color: #fff;">剪发卡</text>
|
||||
<text class="towcontentitemonetexttow" style="color: #fff;">保洁清洗卡</text>
|
||||
</view>
|
||||
<view class="towcontentitemoneabsolute">
|
||||
加购
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentitemprogress">
|
||||
<!-- <u-line-progress :percentage="30" activeColor="#ff0000"></u-line-progress> -->
|
||||
续费
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-between">
|
||||
<text class="towcontentitemtowetext" style="color: #fff;">VIP202304241154982648</text>
|
||||
<text class="towcontentitemtowetext" style="color: #fff;">保洁清洗卡</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontentitem">
|
||||
<view class="therecontentitemtext">
|
||||
会员详情
|
||||
</view>
|
||||
<view class="therecontentitemone">
|
||||
<view class="therecontentitemoneiten flex-between" @click="order">
|
||||
<text class="therecontentitemoneitentetxt">账单明细</text>
|
||||
<u-icon name="arrow-right" color="#808080" size="18"></u-icon>
|
||||
</view>
|
||||
<view class="therecontentitemoneiten flex-between" @click="overlayshow = true">
|
||||
<text class="therecontentitemoneitentetxt">账单明细</text>
|
||||
<u-icon name="arrow-right" color="#808080" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow" @click="overlayshow = false">
|
||||
<view class="warp">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-center">
|
||||
<view>【洗剪吹】新娘造型</view>
|
||||
<u-icon @click="overlayshow = false" class="onerecticon" name="backspace" color="#000000"
|
||||
size="28"></u-icon>
|
||||
</view>
|
||||
<view class="towrect">
|
||||
商品
|
||||
</view>
|
||||
<view class="thererect flex-between">
|
||||
<view class="thererectone">
|
||||
年卡会员
|
||||
</view>
|
||||
<view class="thererecttow">
|
||||
<text>￥</text>300
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourrect flex-between">
|
||||
<view class="fourrectone">
|
||||
<text>共计:</text>￥300
|
||||
</view>
|
||||
<view class="fourrecttow">
|
||||
立即购买
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
overlayshow: false,
|
||||
numberbox: "",
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
order(e) {
|
||||
uni.pro.navigateTo('my/order/index', {
|
||||
e: 0
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.towcontentitem {
|
||||
margin-top: 22rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentitemabsolute {
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 6rpx 28rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 6rpx 12rpx rgba(255, 255, 255, 0.19);
|
||||
background: linear-gradient(NaNdeg, #4A4A4A 0%, #919191 100%);
|
||||
border-radius: 0px 12rpx 0px 12rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.towcontentitemimage {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.towcontentitemone {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
.towcontentitemoneimage {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
|
||||
.towcontentitemoneabsolute {
|
||||
position: absolute;
|
||||
padding: 8rpx 44rpx;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(130deg, #F4AE46 0%, #EE9437 100%);
|
||||
box-shadow: 0px 4rpx 8rpx 2rpx rgba(243, 169, 67, 0.37);
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
.towcontentitemonetext {
|
||||
height: 76rpx;
|
||||
margin-left: 16rpx;
|
||||
|
||||
.towcontentitemonetextone {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
.towcontentitemonetexttow {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemprogressa {
|
||||
padding: 8rpx 44rpx;
|
||||
width: 50%;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 54rpx;
|
||||
}
|
||||
|
||||
.towcontentitemprogress {
|
||||
margin-top: 24rpx;
|
||||
background: linear-gradient(318deg, #6E6E6E 0%, #404040 100%);
|
||||
box-shadow: 0px 4rpx 8rpx 2rpx #8D8D8D;
|
||||
border-radius: 28rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 68rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontentitem {
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx 32rpx 0 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
|
||||
.therecontentitemtext {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentitemone {
|
||||
.therecontentitemoneiten:nth-child(1) {
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
.therecontentitemoneiten {
|
||||
padding: 32rpx 0;
|
||||
border-top: 1px solid #F7F7F7;
|
||||
|
||||
.therecontentitemoneitentetxt {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 48rpx;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.towrect{
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
.thererect{
|
||||
margin-top: 16rpx;
|
||||
.thererectone{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
.thererecttow{
|
||||
text{
|
||||
font-size: 16rpx;
|
||||
}
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Heavy, PingFang SC;
|
||||
font-weight: 800;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
.fourrect{
|
||||
margin-top: 44rpx;
|
||||
.fourrectone{
|
||||
text{
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
font-size: 40rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FC5F69;
|
||||
}
|
||||
.fourrecttow{
|
||||
background: linear-gradient(143deg, #8689AF 0%, #494A5F 100%);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
219
pages/index/specials.vue
Normal file
219
pages/index/specials.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<navbar v-if="op!=1" :style="'background-color: rgba(255, 255, 255,' + op +')'" :Background='Background'
|
||||
:navtitle='navtitle' :navboxshow="navboxshow" @fatherMethod='navfatherMethod'>
|
||||
</navbar>
|
||||
<navbar v-else :Background="'#fff'" :navtitle='navtitle' :navboxshow="navboxshow" @fatherMethod='navfatherMethod'>
|
||||
</navbar>
|
||||
<view class="indexbox">
|
||||
<view class="indexbox_boxitem flex-between">
|
||||
<view class="indexbox_boxitem_item flex-colum-start" v-for="(item,index) in list" :key="index"
|
||||
@click="eeInfo(item)">
|
||||
<view class="indexbox_boxitem_itemimage">
|
||||
<image :src="item.host_img" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="indexbox_boxitem_itemone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="indexbox_boxitem_itemtow flex-start">
|
||||
<text>￥</text>
|
||||
<text>{{item.price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" style="margin-top: 100rpx;width: 100%;" class="flex-colum">
|
||||
<image :src="bgnothave" mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<view class="flex-colum" style="width: 100%;">
|
||||
<u-loadmore :status="form.status" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navbar from '@/components/navbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
navbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navtitle: '购物商城', //名称
|
||||
navboxshow: '4', //显示
|
||||
Background: 'none',
|
||||
list: [],
|
||||
is_end: false,
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
statusBarHeight: 0,
|
||||
op: 0,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.statusBarHeight = res.statusBarHeight
|
||||
}
|
||||
})
|
||||
},
|
||||
onPageScroll(res) {
|
||||
// res.scrollTop 为页面滚动距离
|
||||
let top = res.scrollTop
|
||||
// height为状态栏高度+自定义导航栏标题内容高度（这里是44px）
|
||||
let height = this.statusBarHeight + 44
|
||||
// 判断滚动高度
|
||||
// 如果小于顶部自定义导航的高度
|
||||
if (top <= height) {
|
||||
// 透明度(op) = 滚动距离/导航栏高度
|
||||
// (不做操作 直接计算 this.op = top/height 也可以实现)
|
||||
// 由于(滚动距离/导航栏高度)得到0-1之间小数点后n位小数
|
||||
// 四舍五入后得到的只能是0/1
|
||||
// 因此做如下操作
|
||||
this.op = Math.round(top / height * 100) / 100
|
||||
} else {
|
||||
// 如果滚动距离大于导航高度，则透明度值为1（不透明）
|
||||
this.op = 1
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.shoppingindex()
|
||||
},
|
||||
onShow() {
|
||||
this.shoppingindex()
|
||||
},
|
||||
methods: {
|
||||
async shoppingindex() {
|
||||
let res = await this.api.shoppingbuyingspeciallist({
|
||||
page: this.form.page
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
init_fn() {
|
||||
this.list = []
|
||||
this.is_end = false
|
||||
this.form.page = 1
|
||||
this.form.status = 'loadmore'
|
||||
this.shoppingindex()
|
||||
},
|
||||
eeInfo(e) { //查看订单详情
|
||||
if (e.spec_type == 1) {
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('mall/mallInfos', {
|
||||
id: e.id,
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
background: url(@/static/imge/specialss.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.index {
|
||||
.indexbox {
|
||||
border-radius: 30rpx 30rpx 0px 0px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-top: 48rpx;
|
||||
padding: 0rpx 28rpx 32rpx 28rpx;
|
||||
background: #fff;
|
||||
|
||||
.indexbox_boxitem:after {
|
||||
content: "";
|
||||
flex: 0 0 220rpx;
|
||||
/* 如何计算233
|
||||
ulist的width是500px，li的width是100px ，根据运行结果，每一行有四个格子，三个间隔，500-100-100-33-33=244，有一点小误差调一调就差不多了
|
||||
*/
|
||||
}
|
||||
|
||||
.indexbox_boxitem {
|
||||
background: #ffffff;
|
||||
|
||||
.indexbox_boxitem_item {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.indexbox_boxitem_itemimage {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
background: #F8F8F8;
|
||||
border-radius: 8rpx;
|
||||
|
||||
image {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.indexbox_boxitem_itemone {
|
||||
width: 220rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.indexbox_boxitem_itemtow {
|
||||
margin-top: 10rpx;
|
||||
padding-right: 10rpx;
|
||||
justify-content: flex-end;
|
||||
background: url(@/static/imge/specials.png) no-repeat;
|
||||
background-size: cover;
|
||||
width: 148rpx;
|
||||
height: 48rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
|
||||
text {
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
text:nth-child(1) {
|
||||
line-height: 50rpx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
line-height: 48rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
388
pages/mall/community.vue
Normal file
388
pages/mall/community.vue
Normal file
@@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="oneindex">
|
||||
<view class="oneindexbox">
|
||||
<view class="oneindexboxswiper" :scroll-y="true" :scroll-with-animation="true"
|
||||
:enable-back-to-top="true" :style="'height:'+hh+'px'">
|
||||
<view v-for="(item,index) in navList" :key="index" class="oneindexswiperitem">
|
||||
<view class="oneindexswiperitem_one" :style="swiperCurrent==index?'background: #fff;':''"
|
||||
:class="swiperCurrent==index?'oneindexswiperitem_ones':''" @click="orderswitch(item,index)">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towindexbox">
|
||||
<swiper :current="swiperCurrent" :disable-touch='disabletouch' @animationfinish="animationfinish"
|
||||
:duration='0' :vertical='true' :style="'height:'+hh+'px'">
|
||||
<swiper-item v-for="(item,index) in list_" :key="index">
|
||||
<scroll-view :scroll-y="true" @scrolltolower="lower" :style="'height:'+hh+'px'">
|
||||
<view v-for="(item1,index1) in list_[index].data" :key="index1"
|
||||
class="main-item towindexboxscrollview">
|
||||
<view class="towindexboxview_box flex-start">
|
||||
<image class="towindexboxview_boximage" :src="item1.host_img" mode="aspectFill">
|
||||
</image>
|
||||
<view class="towindexboxview_boxtext flex-colum-start">
|
||||
<view class="towindexboxview_boxtextone">
|
||||
{{item1.title}}
|
||||
</view>
|
||||
<view class="towindexboxview_boxtexttow">
|
||||
销量 100+
|
||||
</view>
|
||||
<view class="indexboxitemlefttheretext flex-between">
|
||||
<view class="flex-start">
|
||||
<view class="indexboxitemlefttheretextone">
|
||||
<text>¥</text>
|
||||
<text>{{item1.price}}</text>
|
||||
</view>
|
||||
<view class="indexboxitemlefttheretexttow">
|
||||
¥{{item1.y_price}}
|
||||
</view>
|
||||
</view>
|
||||
<image src="@/static/mall/cart.png" mode="aspectFill"
|
||||
@click="requestSubscribeMessage(0,item1)"
|
||||
style="width: 40rpx; height: 40rpx;">
|
||||
</image>
|
||||
<!-- <u-number-box v-else v-model="item1.number" :min="0" button-size="12"
|
||||
color="#ffffff" :bgColor="theme.cartpieces" :max="item1.stock"
|
||||
iconStyle="color: #fff" @change="requestSubscribeMessage($event,item1)">
|
||||
</u-number-box> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list_[index].data.length == 0 && list_[index].is_end == true"
|
||||
style="margin-top:200rpx;width: 100%;" class="flex-colum">
|
||||
<image :src="bgnothave" mode="" style="width: 100%;width: 100%;">
|
||||
</image>
|
||||
</view>
|
||||
<view class="flex-colum" style="width: 100%;">
|
||||
<u-loadmore :status="form.status" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<bottombbar class="headinga" v-if="style_type == 2" :valuebbar='1'></bottombbar>
|
||||
<bottombbar class="headinga" v-else :valuebbar='3'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
style_type: uni.cache.get('loginuser').style_type,
|
||||
hh: 0,
|
||||
navList: [{
|
||||
id: '',
|
||||
title: ''
|
||||
}],
|
||||
navCount: 0,
|
||||
valuenumber: 0,
|
||||
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
|
||||
current: 0, // tabs组件的current值，表示当前活动的tab选项
|
||||
list_: {},
|
||||
like: '', //备注
|
||||
form: {
|
||||
status: 'loadmore',
|
||||
},
|
||||
disabletouch: true, //控制是否可以滑动
|
||||
};
|
||||
},
|
||||
async onLoad() {
|
||||
let res = await this.api.shoppingindexgoodsclass()
|
||||
this.navList = res
|
||||
},
|
||||
onShow() {
|
||||
this.shoppingindexgoodsclass()
|
||||
this.$store.dispatch("actionsclassification");
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
//计算选中商品的总价
|
||||
|
||||
},
|
||||
onReady() {
|
||||
this._onReadyApi()
|
||||
uni.hideLoading()
|
||||
},
|
||||
methods: {
|
||||
animationfinish(e) {
|
||||
let current = e.detail.current;
|
||||
if (this.list_['list' + current].data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
this.swiperCurrent = current;
|
||||
this.current = current;
|
||||
},
|
||||
lower(e) {
|
||||
console.log(e)
|
||||
this.onReachBottom_fn(this.list_['list' + this.swiperCurrent])
|
||||
},
|
||||
onReachBottom_fn(list) {
|
||||
if (!list.is_end) {
|
||||
this.get_order_list(this.current);
|
||||
} else {
|
||||
this.disabletouch = false
|
||||
this.form.status = 'nomore';
|
||||
console.log(this.disabletouch)
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
init_fn() {
|
||||
for (let i = 0; i < this.navList.length; i++) {
|
||||
this.$set(this.list_, 'list' + [i], { //全部
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
})
|
||||
this.get_order_list(i);
|
||||
}
|
||||
console.log(this.list_)
|
||||
},
|
||||
async get_order_list(i) {
|
||||
this.form.status = 'loading';
|
||||
let page = null;
|
||||
let order_type = 0
|
||||
order_type = this.navList[i].id
|
||||
page = this.list_['list' + i].page
|
||||
let res = await this.api.shoppingindex({
|
||||
classid: order_type,
|
||||
page: page,
|
||||
like: this.like
|
||||
})
|
||||
this.paging(res, this.list_['list' + i])
|
||||
uni.hideLoading();
|
||||
},
|
||||
paging(res, list) {
|
||||
if (res.length == 0) {
|
||||
this.form.status = 'nomore';
|
||||
list.is_end = true;
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
list.page = list.page + 1;
|
||||
setTimeout(() => {
|
||||
list.data = [...list.data, ...res];
|
||||
if (res.length != 10) {
|
||||
list.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
|
||||
} else {
|
||||
this.disabletouch = true
|
||||
this.form.status = 'loading';
|
||||
}
|
||||
this.$forceUpdate();
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
async shoppingindexgoodsclass() {
|
||||
let res = await this.api.shoppingindexgoodsclass()
|
||||
this.navList = res
|
||||
this.init_fn();
|
||||
},
|
||||
orderswitch(s, index) {
|
||||
console.log(index, this.list_['list' + index])
|
||||
if (this.list_['list' + index].data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
this.swiperCurrent = index;
|
||||
},
|
||||
requestSubscribeMessage(e,s) {
|
||||
console.log(e)
|
||||
// this.valuenumber = e.value
|
||||
// if (e == 0) {
|
||||
|
||||
// } else {
|
||||
|
||||
// }
|
||||
this.$u.debounce(this.shoppingindexgoodindexsaddcar(s), 200);
|
||||
},
|
||||
async shoppingindexgoodindexsaddcar(s) {
|
||||
console.log(s)
|
||||
let res = await this.api.shoppingindexgoodindexsaddcar({
|
||||
number:1,
|
||||
goods_id: s.id,
|
||||
spec: s.spec_title,
|
||||
})
|
||||
if (res == 1) {
|
||||
uni.showToast({
|
||||
title: '添加购物车成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
_onReadyApi() {
|
||||
var windowHeight = uni.getSystemInfoSync().windowHeight
|
||||
var that = this
|
||||
uni.createSelectorQuery().select('.headinga').boundingClientRect((res) => {
|
||||
that.hh = windowHeight - res.height
|
||||
that.navCount = Math.round(that.hh / 50)
|
||||
}).exec()
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index {
|
||||
.oneindex {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
.oneindexbox {
|
||||
width: 24%;
|
||||
background-color: #f7f7f7;
|
||||
overflow: auto;
|
||||
|
||||
.oneindexboxswiper {
|
||||
width: 100%;
|
||||
|
||||
.oneindexswiperitem {
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
|
||||
.oneindexswiperitem_ones::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translateY(50%);
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: #fc821c;
|
||||
width: 8rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 0 10rpx 10rpx 0;
|
||||
}
|
||||
|
||||
.oneindexswiperitem_one {
|
||||
position: relative;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #000;
|
||||
height: 84rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towindexbox {
|
||||
width: 76%;
|
||||
|
||||
.towindexboxscrollview {
|
||||
margin-left: 24rpx;
|
||||
|
||||
.towindexboxview_box {
|
||||
width: 100%;
|
||||
padding: 32rpx 0 28rpx 0;
|
||||
border-bottom: 1rpx solid #F6F6F6;
|
||||
|
||||
.towindexboxview_boximage {
|
||||
background: #f8f8f8;
|
||||
width: 156rpx;
|
||||
height: 156rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.towindexboxview_boxtext {
|
||||
position: relative;
|
||||
margin-left: 20rpx;
|
||||
|
||||
.towindexboxview_boxtextone {
|
||||
width: 300rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towindexboxview_boxtexttow {
|
||||
margin-top: 12rpx;
|
||||
width: 300rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.indexboxitemlefttheretext {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
|
||||
.flex-start {
|
||||
.indexboxitemlefttheretextone {
|
||||
text {
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FF5053;
|
||||
}
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemlefttheretexttow {
|
||||
margin-top: 10rpx;
|
||||
margin-left: 12rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdown {
|
||||
.indexboxitemleftthere_countdowntext {
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
font-size: 18rpx;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdowntexts {
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
margin-left: 16rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
682
pages/mall/confirm.vue
Normal file
682
pages/mall/confirm.vue
Normal file
@@ -0,0 +1,682 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="onecontentone flex-start">
|
||||
<view class="onecontent_one">
|
||||
商品信息
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttow flex-start">
|
||||
<view class="onecontenttowitem flex-between" v-for="(item,index) in elist.goods" :key="index">
|
||||
<view class="onecontenttowitem_one flex-start">
|
||||
<image class="onecontenttowitemimage" :src="item.img" mode="aspectFill"></image>
|
||||
<view class="onecontenttowitem_onebox flex-colum-start">
|
||||
<view class="onecontenttowitem_onebox_one">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="onecontenttowitem_onebox_tow">
|
||||
{{item.spec}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttowitem_tow flex-colum-end">
|
||||
<view class="onecontenttowitem_towstext_one">
|
||||
{{item.price}}
|
||||
</view>
|
||||
<view class="onecontenttowitem_towstetx_tow">
|
||||
×{{item.number}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontent" style="margin-top: 32rpx;">
|
||||
<view class="onecontentone flex-between">
|
||||
<view class="onecontent_one">
|
||||
确认地址
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#000" size="14"></u-icon>
|
||||
</view>
|
||||
<view class="onecontentaddress flex-colum-start" v-if="elist.address" @click="clickaddress">
|
||||
<view class="onecontentaddressone" v-if="formlist.type == 3">
|
||||
{{elist.address.address}}
|
||||
</view>
|
||||
<view class="onecontentaddressone" v-else>
|
||||
{{elist.address.province}}-{{elist.address.city}}-{{elist.address.area}}-{{elist.address.address}}
|
||||
</view>
|
||||
<view class="onecontentaddresstow">
|
||||
{{elist.address.name}}<text style="margin-left: 10rpx;">{{elist.address.mobile}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentaddress" v-else>
|
||||
<view class="onecontentaddressone" @click="clickaddress">
|
||||
去添加地址
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontent">
|
||||
<!-- <view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
商品金额
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
{{elist.number}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
优惠券
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
暂无可用
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
运费
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
￥{{elist.freight}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="therecontenttow_tow" style="color:#FC5F69;">
|
||||
￥{{elist.price.total_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fivecontent">
|
||||
<view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
手机号码
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
{{mobile}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
姓名
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
张雪
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="sixcontent">
|
||||
<view class="sixcontentone flex-between">
|
||||
<view class="sixcontent_one">
|
||||
支付方式
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttow">
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(1)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/wx.png" mode="aspectFill"></image>
|
||||
<text class="sixcontenttowitemonetext">微信支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 1" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(2)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/ye.png" mode="aspectFill"></image>
|
||||
<text class="sixcontenttowitemonetext">余额支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 2" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fourcontent">
|
||||
<view class="fourcontentone flex-start">
|
||||
<view class="fourcontent_one">
|
||||
须知：
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourcontenttow flex-colum-start">
|
||||
|
||||
</view>
|
||||
</view> -->
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_one flex-start">
|
||||
<view class="fixedview_oneone">
|
||||
实付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>{{elist.price.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
|
||||
立即付款
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="showpopup" @close="closepopup" @open="openpopup" mode="center" :round="10">
|
||||
<view class="u-popupflex-colum flex-colum">
|
||||
<view class="u-popupflex-columview">
|
||||
请输入支付密码
|
||||
</view>
|
||||
<u-code-input v-model="ucodeinputvalue" :maxlength="6" dot @finish="finish"></u-code-input>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showpopup: false,
|
||||
ucodeinputvalue: '',
|
||||
height: '',
|
||||
order_id: '',
|
||||
elist: {
|
||||
address: {
|
||||
|
||||
},
|
||||
price: {
|
||||
total_price: '',
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
mobile: uni.cache.get('loginuser').userinfo.mobile,
|
||||
formlist: {
|
||||
goods_id: ''
|
||||
},
|
||||
pay_type: 1
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
// this.elist = JSON.parse(optionItem)
|
||||
this.formlist = e
|
||||
this.formlist.spec = decodeURIComponent(e.spec)
|
||||
let res = await this.api.shoppingindexgoodindexoforders({
|
||||
type: this.formlist.type, // 1购物车 2商品详情页
|
||||
goods_id: this.formlist.goods_id, //商品ID 商品详情页来源时必填
|
||||
car_id: this.formlist.car_id, //购物车ID 1,2 购物车来源时必填
|
||||
number: this.formlist.number, //数量 商品详情页来源时必填
|
||||
spec: this.formlist.spec, //规格 商品详情页来源时必填
|
||||
address_id: this.formlist.address_id, //地址ID 可以为空（为空时返回默认地址）
|
||||
order_id:this.formlist.order_id,
|
||||
})
|
||||
if (res) {
|
||||
this.elist = res
|
||||
this.elist.goods[0].spec = this.formlist.spec
|
||||
if (this.elist.address) {
|
||||
this.elist.address.mobile = res.address.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickaddress() {
|
||||
uni.pro.navigateTo("my/address/index", {
|
||||
order: 1
|
||||
});
|
||||
uni.$once('update', data => {
|
||||
this.elist.address = JSON.parse(data)
|
||||
if (this.elist.address) {
|
||||
this.elist.address.mobile = this.elist.address.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
}
|
||||
this.$forceUpdate();
|
||||
})
|
||||
},
|
||||
openpopup() {
|
||||
console.log('open');
|
||||
},
|
||||
closepopup() {
|
||||
this.showpopup = false
|
||||
},
|
||||
|
||||
finish(e) {
|
||||
this.reservationmakenowsub()
|
||||
},
|
||||
showpopupclick() {
|
||||
if(this.elist.address == null || this.elist.address == undefined){
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '收货地址不能为空'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.pay_type == 1) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
this.reservationmakenowsub()
|
||||
return false;
|
||||
} else {
|
||||
if (this.pay_type == 2) {
|
||||
if (this.elist.is_vip_password == 0) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您目前没有设置密码，请先设置支付密码',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/repairpassword'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showpopup = true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async reservationmakenowsub() {
|
||||
var datareslane = await this.api.shoppingindexgoodindexsuborder({
|
||||
type: this.formlist.type,
|
||||
goods_id: this.formlist.goods_id, //商品ID 商品详情页来源时必填
|
||||
car_id: this.formlist.car_id, //购物车ID 1,2 购物车来源时必填
|
||||
number: this.formlist.number, //数量 商品详情页来源时必填
|
||||
spec: this.formlist.spec, //规格 商品详情页来源时必填
|
||||
address_id: this.formlist.address_id, //地址ID 可以为空（为空时返回默认地址）
|
||||
pay_type: this.pay_type ,//1微信 2余额卡
|
||||
order_id:this.formlist.order_id
|
||||
})
|
||||
console.log(datareslane, 280)
|
||||
if (datareslane.data) {
|
||||
let res = await this.api.shoppingindexgoodindexgetpayparams({
|
||||
order_id: datareslane.data.order_id,
|
||||
sec_password: this.ucodeinputvalue //安全密码 余额卡支付时有效
|
||||
}) //判断是否支付成功
|
||||
this.ucodeinputvalue = ''
|
||||
console.log(res, 287)
|
||||
if (res.data.pay_status == 0) {
|
||||
this.showpopup = false
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.pay_data.payAppId, // 微信支付商户号
|
||||
timeStamp: res.data.pay_data.payTimeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.data.pay_data.paynonceStr, // 随机字符串
|
||||
package: res.data.pay_data.payPackage, // 固定值
|
||||
signType: res.data.pay_data.paySignType, //固定值
|
||||
paySign: res.data.pay_data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: "/pages/mall/order/ordersuccess?id=" + datareslane.data.order_id,
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
uni.redirectTo({
|
||||
url: "/pages/mall/order/index?e=" +0,
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: "/pages/mall/order/ordersuccess?id=" + datareslane.data.order_id,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.message || res.msg,
|
||||
icon: "none",
|
||||
success() {
|
||||
setTimeout(res => {
|
||||
// if (options.toast) {
|
||||
uni.hideLoading()
|
||||
// }
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
clickselect(b) {
|
||||
this.pay_type = b
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.onecontent_one {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontent_tow {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 32rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontentaddress {
|
||||
.onecontentaddressone {
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontentaddresstow {
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
width: 100%;
|
||||
|
||||
.onecontenttowitem {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
|
||||
.onecontenttowitem_one {
|
||||
.onecontenttowitemimage {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
.onecontenttowitem_onebox {
|
||||
margin-left: 24rpx;
|
||||
|
||||
.onecontenttowitem_onebox_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onecontenttowitem_onebox_tow {
|
||||
margin-top: 32rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttowitem_tow {
|
||||
.onecontenttowitem_towstext_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontenttowitem_towstetx_tow {
|
||||
margin-top: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: DIN Alternate-Bold, DIN Alternate;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.fivecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fivecontentitem:nth-child(2) {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.fivecontentitem {
|
||||
padding: 18rpx 0;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fivecontentitem_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fivecontentitem_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow:nth-child(1) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.therecontenttow {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontenttow_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.sixcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.sixcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontenttow {
|
||||
.sixcontenttowitem {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.sixcontenttowitemone {
|
||||
image {
|
||||
margin-left: 24rpx;
|
||||
width: 31.37rpx;
|
||||
height: 27.34rpx;
|
||||
}
|
||||
|
||||
.sixcontenttowitemonetext {
|
||||
margin-left: 14rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fourcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fourcontenttow {
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-popupflex-colum {
|
||||
padding: 80rpx 40rpx;
|
||||
border-radius: 50rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.u-popupflex-columview {
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
369
pages/mall/index.vue
Normal file
369
pages/mall/index.vue
Normal file
@@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<view class="content" style="padding-bottom: 10rpx;" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="onecontent_oen flex-start">
|
||||
<input class="onecontent_oen_input" type="text" v-model="like" placeholder="搜索订单/商家名/商品名">
|
||||
<text class="onecontent_oen_text" @click="init_fn">搜索</text>
|
||||
</view>
|
||||
<view class="onecontent_tow">
|
||||
<view ref="uTabs" class="onecontent_tow_item flex-colum" v-for="(item,index) in swipercurrentdata"
|
||||
:key="index" @click="orderswitch(item)">
|
||||
<view :class="swiperCurrent == item.id?'onecontent_tow_itemtexts':'onecontent_tow_itemtext'">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<image class="onecontent_tow_itemtextsimges" v-if="swiperCurrent == item.id" :src="selected" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent flex-between">
|
||||
<view class="towcontentitem" v-if="list.length>0" v-for="(item,index1) in list" :key="index1"
|
||||
@click="eeInfo(item)">
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemtow_imge" :src="item.host_img" mode="aspectFill"></image>
|
||||
<view class="towcontentitemtow_item ">
|
||||
<view class="towcontentitemtow_one">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="towcontentitemtow_tow">
|
||||
销量 {{item.sales}}+
|
||||
</view>
|
||||
<view class="towcontentitemtow_there flex-start">
|
||||
<view class="towcontentitemtow_there_one flex-start">
|
||||
¥<text>{{item.price}}</text>
|
||||
</view>
|
||||
<view class="towcontentitemtow_there_tow">￥{{item.y_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" style="margin-top: 100rpx;width: 100%;" class="flex-colum">
|
||||
<image :src="bgnothave" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<view class="flex-colum" style="width: 100%;">
|
||||
<u-loadmore :status="form.status" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentfixed" @click="clickshopcart" v-if="style_type!=2">
|
||||
<image :src="shoppingcart" mode="widthFix"></image>
|
||||
</view>
|
||||
<bottombbar v-if="style_type == 2" :valuebbar='1'></bottombbar>
|
||||
<bottombbar v-else :valuebbar='3'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
selected: uni.getStorageSync('selected'),
|
||||
shoppingcart: uni.getStorageSync('shoppingcart'),
|
||||
style_type:uni.cache.get('loginuser').style_type,
|
||||
|
||||
swiperCurrent: 0,
|
||||
overlayshow: false,
|
||||
swipercurrentdata: [],
|
||||
like: '',
|
||||
is_end: false,
|
||||
list: [],
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.shoppingindex()
|
||||
},
|
||||
onShow() {
|
||||
this.shoppingindexgoodsclass()
|
||||
this.$store.dispatch("actionsclassification");
|
||||
this.init_fn()
|
||||
},
|
||||
methods: {
|
||||
async shoppingindexgoodsclass() {
|
||||
let res = await this.api.shoppingindexgoodsclass()
|
||||
this.swipercurrentdata = res
|
||||
},
|
||||
async shoppingindex() {
|
||||
let res = await this.api.shoppingindex({
|
||||
page: this.form.page,
|
||||
like: this.like,
|
||||
classid: this.swiperCurrent
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
init_fn() {
|
||||
this.list = []
|
||||
this.is_end = false
|
||||
this.form.page = 1
|
||||
this.form.status = 'loadmore'
|
||||
this.shoppingindex()
|
||||
},
|
||||
orderswitch(e) {
|
||||
this.swiperCurrent = e.id
|
||||
this.init_fn()
|
||||
},
|
||||
clickshopcart() {
|
||||
uni.pro.navigateTo('shopcart/index')
|
||||
},
|
||||
eeInfo(e) { //查看订单详情
|
||||
if (e.spec_type == 1) {
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('mall/mallInfos', {
|
||||
id: e.id,
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.contentfixed {
|
||||
position: fixed;
|
||||
background-size: cover;
|
||||
bottom: 328rpx;
|
||||
right: 28rpx;
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 10rpx 28rpx;
|
||||
|
||||
.onecontent_oen {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
border-radius: 36rpx;
|
||||
border:1rpx solid var(--bg-color-button);
|
||||
padding-right: 8rpx;
|
||||
|
||||
.onecontent_oen_input {
|
||||
padding-left: 32rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.onecontent_oen_text {
|
||||
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 56rpx;
|
||||
width: 116rpx;
|
||||
height: 56rpx;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontent_tow {
|
||||
padding: 32rpx 0 32rpx 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
|
||||
.onecontent_tow_item:nth-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.onecontent_tow_item {
|
||||
position: relative;
|
||||
margin-left: 60rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
.onecontent_tow_itemtexts {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: var(--bg-color-button);
|
||||
}
|
||||
|
||||
.onecontent_tow_itemtext {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.onecontent_tow_itemtextsimges{
|
||||
position: absolute;
|
||||
bottom: -10rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 20rpx;
|
||||
height: 8rpx;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
padding: 0 24rpx;
|
||||
|
||||
.towcontentitem {
|
||||
margin-top: 32rpx;
|
||||
width:48%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.towcontentitemone {
|
||||
width: 100%;
|
||||
.towcontentitemtow_imge {
|
||||
border-top-left-radius: 18rpx;
|
||||
border-top-right-radius: 18rpx;
|
||||
width: 100%;
|
||||
height: 266rpx;
|
||||
}
|
||||
|
||||
.towcontentitemtow_item {
|
||||
padding: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
.towcontentitemtow_one {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.towcontentitemtow_tow {
|
||||
font-size: 22rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.towcontentitemtow_there {
|
||||
margin-top: 14rpx;
|
||||
|
||||
.towcontentitemtow_there_one {
|
||||
text {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
font-size: 4rpx;
|
||||
font-family: SourceHanSansCN-Bold-,
|
||||
SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FC5F69;
|
||||
}
|
||||
|
||||
.towcontentitemtow_there_tow {
|
||||
text-decoration: line-through;
|
||||
margin-left: 10rpx;
|
||||
font-size: 22rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
padding: 40rpx 68rpx;
|
||||
width: 480rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 42rpx;
|
||||
|
||||
.rectone {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow {
|
||||
width: 100%;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.recttow_one {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
border: 2rpx solid #999999;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow_tow {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #333333;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
548
pages/mall/mallInfo.vue
Normal file
548
pages/mall/mallInfo.vue
Normal file
@@ -0,0 +1,548 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<image class="contentimage" :src="lsitform.img" mode="aspectFill"></image>
|
||||
<view class="contentbox">
|
||||
<view class="contentbox_one">
|
||||
{{lsitform.title_name}}
|
||||
</view>
|
||||
<view class="contentbox_tow">
|
||||
<text>¥</text>{{lsitform.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentboxtow">
|
||||
<view class="onecontentterewone flex-start">
|
||||
<view class="onecontenttereone_one">
|
||||
产品介绍
|
||||
</view>
|
||||
</view>
|
||||
<view class="introduction_yow" v-html="list.details">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_letr flex-start">
|
||||
<view class="fixedview_letr_item flex-colum" @click="eeInfoindex">
|
||||
<image src="@/static/mall/s.png" mode="aspectFill"></image>
|
||||
<text>首页</text>
|
||||
</view>
|
||||
<view class="fixedview_letr_item flex-colum" @click="makePhoneCall">
|
||||
<image src="@/static/mall/k.png" mode="aspectFill"></image>
|
||||
<text>客服</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_tow flex-between">
|
||||
<view class="fixedview_towone" @click="overlayshowsboxs(1)">
|
||||
加入购物车
|
||||
</view>
|
||||
<view class="fixedview_towtow" @click="overlayshowsboxs(2)">
|
||||
立即购买
|
||||
</view>
|
||||
<!-- <view class="fixedview_towtow" style="background: #ccc;">
|
||||
立即购买
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow">
|
||||
<view class="warp" :style="[theme]">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-start" :style="[theme]">
|
||||
<image class="onecontentone_image" :src="lsitform.img" mode="aspectFill"></image>
|
||||
<view class="nonecontentone_view flex-colum-start">
|
||||
<text class="nonecontentone_view_one">{{lsitform.title_name}}</text>
|
||||
<text class="nonecontentone_view_otow">¥{{lsitform.price}}</text>
|
||||
</view>
|
||||
<view class="onerecticon" @click="overlayshow = false">
|
||||
<u-icon @click="overlayshow = false" name="close-circle-fill" color="#000000"
|
||||
size="24"></u-icon>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="towrect" v-for="(item,n) in list.spec" :key="item.id">
|
||||
<view class="towrect_one">
|
||||
{{item.spec_name}}
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<view class="towrect_tow" v-for="(item1,index1) in item.spec_options" :key="index1"
|
||||
@click="overlayshowsbox(item1,index1)">
|
||||
<!-- "towrecttowclass == index1?'towrect_towtext':'towrect_towtexts'" -->
|
||||
<view
|
||||
:class="[item1.isShow?'noneActive':'',towrecttowclass == index1?'towrect_towtext':'towrect_towtexts']">
|
||||
{{item1.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="thererect flex-between">
|
||||
<view class="thererect_one">
|
||||
购买数量
|
||||
</view>
|
||||
<view class="thererect_tow">
|
||||
<u-number-box v-model="numberbox" :min="1" button-size="24" color="#ffffff"
|
||||
:bgColor="theme.cartpieces" iconStyle="color: #fff" integer></u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fuorrect flex-between">
|
||||
<view class="fuorrect_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="fuorrect_tow">
|
||||
¥{{list.price}}
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="fvirect flex-center" @click="requestSubscribeMessage">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goods_id: '',
|
||||
overlayshow: false,
|
||||
towrecttowclass: 0,
|
||||
numberbox: 1,
|
||||
list: {},
|
||||
height: '',
|
||||
lsitform: {},
|
||||
selectArr: [], //存放被选中的值
|
||||
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
|
||||
subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
console.log(this.$store.getters.theme)
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
onLoad(e) {
|
||||
this.goods_id = e.id
|
||||
this.shoppingindexgoodsgoodsdetail()
|
||||
},
|
||||
onShow() {},
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
methods: {
|
||||
makePhoneCall() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.list.mobile //打电话
|
||||
});
|
||||
},
|
||||
overlayshowsboxs(e) {
|
||||
this.cartshping = e
|
||||
this.overlayshow = true
|
||||
},
|
||||
async overlayshowsbox(item1, index1) {
|
||||
this.towrecttowclass = index1
|
||||
this.lsitform = item1
|
||||
this.lsitform.title_name = item1.title_name
|
||||
console.log(this.lsitform)
|
||||
},
|
||||
async requestSubscribeMessage() {
|
||||
if (this.lsitform.id == '' || this.lsitform.id == null) {
|
||||
uni.showToast({
|
||||
title: '请选择合法规格',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.cartshping == 1) {
|
||||
this.$u.debounce(this.shoppingindexgoodindexsaddcar(), 200);
|
||||
} else {
|
||||
uni.pro.navigateTo('mall/confirm', {
|
||||
type: 2, // 1购物车 2商品详情页
|
||||
goods_id: this.goods_id, //商品ID 商品详情页来源时必填
|
||||
car_id: '', //购物车ID 1,2 购物车来源时必填
|
||||
number: this.numberbox, //商品详情页来源时必填
|
||||
spec: this.lsitform.name, //规格 商品详情页来源时必填
|
||||
address_id: '', //地址ID 可以为空（为空时返回默认地址）
|
||||
})
|
||||
}
|
||||
},
|
||||
async shoppingindexgoodindexsaddcar() {
|
||||
let res = await this.api.shoppingindexgoodindexsaddcar({
|
||||
number: this.numberbox,
|
||||
goods_id: this.goods_id,
|
||||
spec: this.lsitform.name,
|
||||
})
|
||||
if (res == 1) {
|
||||
this.overlayshow = false
|
||||
console.log(res)
|
||||
uni.showToast({
|
||||
title: '添加购物车成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
eeInfoindex() { //去首页
|
||||
uni.pro.navigateTo('mall/index')
|
||||
},
|
||||
async shoppingindexgoodsgoodsdetail() {
|
||||
let res = await this.api.shoppingindexgoodsgoodsdetail({
|
||||
goods_id: this.goods_id
|
||||
})
|
||||
this.list = res
|
||||
this.lsitform = res.spec[0]
|
||||
this.lsitform.title_name = res.spec[0].title
|
||||
this.lsitform.img = res.host_img
|
||||
this.list.details = res.details.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig,
|
||||
'style="max-width:100%;height:auto;"') // 替换style
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_letr {
|
||||
.fixedview_letr_item:nth-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fixedview_letr_item {
|
||||
margin-left: 32rpx;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 8rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
flex: auto;
|
||||
padding-left: 24rpx;
|
||||
|
||||
.fixedview_towone {
|
||||
width: 50%;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: var(--cart-text-color);
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
border-radius: 50rpx 0 0 50rpx;
|
||||
background: var(--cart-background-color);
|
||||
}
|
||||
|
||||
.fixedview_towtow {
|
||||
width: 50%;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: var(--cart-text-color);
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
border-radius: 0 50rpx 50rpx 0;
|
||||
background: var(--cartbuy-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
.nonecontentone_view {
|
||||
|
||||
margin-left: 16rpx;
|
||||
|
||||
.nonecontentone_view_one {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.nonecontentone_view_otow {
|
||||
margin-top: 10rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towrect {
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
padding-top: 34rpx;
|
||||
|
||||
.towrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.towrect_tow {
|
||||
margin-top: 16rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.noneActive {
|
||||
background-color: #ccc;
|
||||
opacity: 0.4;
|
||||
color: #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.towrect_towtext {
|
||||
width: 100%;
|
||||
background: var(--specbackground-color);
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid var(--bg-color-button);
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: var(--spec-text-color);
|
||||
}
|
||||
|
||||
|
||||
.towrect_towtexts {
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.thererect {
|
||||
padding: 34rpx 0;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
border-top: 1rpx solid #F7F7F7;
|
||||
|
||||
.thererect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.thererect_tow {}
|
||||
}
|
||||
|
||||
.fuorrect {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fuorrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.fuorrect_tow {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fvirect {
|
||||
margin-top: 200rpx;
|
||||
padding: 16rpx;
|
||||
text-align: center;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 40rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.contentimage {
|
||||
width: 100%;
|
||||
height: 528rpx;
|
||||
}
|
||||
|
||||
.contentbox {
|
||||
padding: 28rpx 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
|
||||
.contentbox_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.contentbox_tow {
|
||||
margin-top: 12rpx;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
font-size: 34rpx;
|
||||
font-family: SourceHanSansCN-Bold-,
|
||||
SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FC5F69;
|
||||
}
|
||||
}
|
||||
|
||||
.contentboxtow {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
padding: 28rpx 32rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.onecontentterewone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 24rpx;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontentterewone {
|
||||
.onecontenttereone_one {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
|
||||
text {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.introduction_yow {
|
||||
margin-top: 18rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
width: 100%;
|
||||
|
||||
/deep/ [alt] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ p {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
627
pages/mall/mallInfos.vue
Normal file
627
pages/mall/mallInfos.vue
Normal file
@@ -0,0 +1,627 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<image class="contentimage" :src="lsitform.img" mode="aspectFill"></image>
|
||||
<view class="contentbox">
|
||||
<view class="contentbox_one">
|
||||
{{lsitform.name}}
|
||||
</view>
|
||||
<view class="contentbox_tow">
|
||||
<text>¥</text>{{lsitform.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentboxtow">
|
||||
<view class="onecontentterewone flex-start">
|
||||
<view class="onecontenttereone_one">
|
||||
产品介绍
|
||||
</view>
|
||||
</view>
|
||||
<view class="introduction_yow" v-html="list.details">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_letr flex-start">
|
||||
<view class="fixedview_letr_item flex-colum" @click="eeInfoindex">
|
||||
<image src="@/static/mall/s.png" mode="aspectFill"></image>
|
||||
<text>首页</text>
|
||||
</view>
|
||||
<view class="fixedview_letr_item flex-colum" @click="makePhoneCall">
|
||||
<image src="@/static/mall/k.png" mode="aspectFill"></image>
|
||||
<text>客服</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_tow flex-between">
|
||||
<view class="fixedview_towone" @click="overlayshowsboxs(1)">
|
||||
加入购物车
|
||||
</view>
|
||||
<view class="fixedview_towtow" @click="overlayshowsboxs(2)">
|
||||
立即购买
|
||||
</view>
|
||||
<!-- <view class="fixedview_towtow" style="background: #ccc;">
|
||||
立即购买
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow">
|
||||
<view class="warp" :style="[theme]">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-start" :style="[theme]">
|
||||
<image class="onecontentone_image" :src="lsitform.img" mode="aspectFill"></image>
|
||||
<view class="nonecontentone_view flex-colum-start">
|
||||
<text class="nonecontentone_view_one">{{lsitform.name}}</text>
|
||||
<text class="nonecontentone_view_otow">¥{{lsitform.price}}</text>
|
||||
</view>
|
||||
<view class="onerecticon" @click="overlayshow = false">
|
||||
<u-icon @click="overlayshow = false" name="close-circle-fill" color="#000000"
|
||||
size="24"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towrect" v-for="(item,n) in list.spec" :key="item.id">
|
||||
<view class="towrect_one">
|
||||
{{item.spec_name}}
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<view class="towrect_tow" v-for="(item1,index1) in item.spec_options" :key="index1"
|
||||
@click="overlayshowsbox(item1,index1,n,item)">
|
||||
<!-- <view
|
||||
:class="[item1.isShow?'towrect_towtext':'towrect_towtexts',subIndex[index] == index1?'productActive':'noneActive']"> -->
|
||||
<view
|
||||
:class="[n == 1 && item1.isShow ?'noneActive':'',subIndex[n] == index1?'towrect_towtext':'towrect_towtexts']">
|
||||
|
||||
{{item1.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="thererect flex-between">
|
||||
<view class="thererect_one">
|
||||
购买数量
|
||||
</view>
|
||||
<view class="thererect_tow">
|
||||
<u-number-box v-model="numberbox" :min="1" button-size="24" color="#ffffff"
|
||||
:bgColor="theme.cartpieces" iconStyle="color: #fff" integer></u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fuorrect flex-between">
|
||||
<view class="fuorrect_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="fuorrect_tow">
|
||||
¥{{list.price}}
|
||||
</view>
|
||||
</view> -->
|
||||
<view v-if="!itemuptodate" class="fvirect flex-center" @click="requestSubscribeMessage">
|
||||
确定
|
||||
</view>
|
||||
<view v-else class="fvirect flex-center" style="background:rgb(249, 249, 249);color: #333;">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goods_id: '',
|
||||
overlayshow: false,
|
||||
towrecttowclass: 0,
|
||||
numberbox: 1,
|
||||
list: {},
|
||||
height: '',
|
||||
lsitform: {},
|
||||
specid: [],
|
||||
itemuptodate: false,
|
||||
selectArr: [], //存放被选中的值
|
||||
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
|
||||
subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
onLoad(e) {
|
||||
this.goods_id = e.id
|
||||
this.shoppingindexgoodsgoodsdetail()
|
||||
},
|
||||
onShow() {},
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
methods: {
|
||||
makePhoneCall() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.list.mobile //打电话
|
||||
});
|
||||
},
|
||||
overlayshowsboxs(e) {
|
||||
this.cartshping = e
|
||||
this.overlayshow = true
|
||||
},
|
||||
async overlayshowsbox(item1, index1, index, item) {
|
||||
if (item1.isShow && index == 1) {
|
||||
uni.showToast({
|
||||
title: '库存不足',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.specid[index] != item1.id) {
|
||||
this.specid[index] = item1.id //规格id
|
||||
} else {
|
||||
this.specid[index] = '' //规格id
|
||||
}
|
||||
|
||||
if (this.selectArr[index] != item1.name) {
|
||||
this.selectArr[index] = item1.name;
|
||||
this.subIndex[index] = index1;
|
||||
} else {
|
||||
this.selectArr[index] = '';
|
||||
this.subIndex[index] = -1; //去掉选中的颜色
|
||||
}
|
||||
let res = await this.api.shoppinggoodsproductspec({
|
||||
spec: this.selectArr[0],
|
||||
goods_id: this.goods_id,
|
||||
})
|
||||
if (res) {
|
||||
this.shopItemInfo = res
|
||||
console.log(this.shopItemInfo[this.subIndex[index]])
|
||||
if (this.subIndex[index] != -1) {
|
||||
this.lsitform = this.shopItemInfo[this.subIndex[index]]
|
||||
this.lsitform.name =this.shopItemInfo[this.subIndex[index]].title_name
|
||||
}
|
||||
}
|
||||
this.checkItem();
|
||||
},
|
||||
checkItem() {
|
||||
var option = this.list.spec;
|
||||
var result = []; //定义数组储存被选中的值
|
||||
for (var i in option) {
|
||||
result[i] = this.selectArr[i] ? this.selectArr[i] : '';
|
||||
}
|
||||
for (var i in option) {
|
||||
var last = result[i]; //把选中的值存放到字符串last去
|
||||
for (var k in option[i].spec_options) {
|
||||
result[i] = option[i].spec_options[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
|
||||
option[i].spec_options[k].isShow = this.isMay(k); //在数据里面添加字段isShow来判断是否可以选择
|
||||
}
|
||||
result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时被覆盖
|
||||
}
|
||||
// if (this.shopItemInfo[result]) {
|
||||
// console.log(this.shopItemInfo[result])
|
||||
// // this.stock = this.shopItemInfo[result].stock || ''
|
||||
// }
|
||||
try {
|
||||
this.itemuptodate = this.list.spec[1].spec_options[this.subIndex[1]].isShow //最新的
|
||||
console.log(this.itemuptodate)
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
this.$forceUpdate(); //重绘
|
||||
},
|
||||
isMay(result) {
|
||||
let res = ''
|
||||
try {
|
||||
res = this.shopItemInfo[result].stock == 0 ? true : false
|
||||
} catch (e) {
|
||||
res = false
|
||||
}
|
||||
return res; //匹配选中的数据的库存，若不为空返回true反之返回false
|
||||
},
|
||||
async requestSubscribeMessage() {
|
||||
if (this.itemuptodate) {
|
||||
uni.showToast({
|
||||
title: '暂无库存',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.selectArr[0] == '' || this.selectArr[1] == '' || this.selectArr.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请选择合法规格',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
console.log(this.specid,this.selectArr)
|
||||
if (this.cartshping == 1) {
|
||||
this.$u.debounce(this.shoppingindexgoodindexsaddcar(), 200);
|
||||
} else {
|
||||
uni.pro.navigateTo('mall/confirm', {
|
||||
type: 2, // 1购物车 2商品详情页
|
||||
goods_id: this.goods_id, //商品ID 商品详情页来源时必填
|
||||
car_id: '', //购物车ID 1,2 购物车来源时必填
|
||||
number: this.numberbox, //商品详情页来源时必填
|
||||
spec: this.selectArr.toString(), //规格 商品详情页来源时必填
|
||||
address_id: '', //地址ID 可以为空（为空时返回默认地址）
|
||||
})
|
||||
}
|
||||
},
|
||||
async shoppingindexgoodindexsaddcar() {
|
||||
let res = await this.api.shoppingindexgoodindexsaddcar({
|
||||
number: this.numberbox,
|
||||
goods_id: this.goods_id,
|
||||
spec: this.selectArr.toString(), //规格 商品详情页来源时必填
|
||||
})
|
||||
if (res == 1) {
|
||||
this.overlayshow = false
|
||||
console.log(res)
|
||||
uni.showToast({
|
||||
title: '添加购物车成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
eeInfoindex() { //去首页
|
||||
uni.pro.navigateTo('mall/index')
|
||||
},
|
||||
async shoppingindexgoodsgoodsdetail() {
|
||||
let res = await this.api.shoppingindexgoodsgoodsdetail({
|
||||
goods_id: this.goods_id
|
||||
})
|
||||
this.list = res
|
||||
this.lsitform = res.spec[0]
|
||||
this.lsitform.name = res.spec[0].title
|
||||
this.lsitform.img = res.host_img
|
||||
this.checkItem()
|
||||
this.list.details = res.details.replace(/\<img/g, '<img style="max-width:100%;height:auto" ');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_letr {
|
||||
.fixedview_letr_item:nth-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fixedview_letr_item {
|
||||
margin-left: 32rpx;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 8rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
flex: auto;
|
||||
padding-left: 24rpx;
|
||||
|
||||
.fixedview_towone {
|
||||
width: 50%;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: var(--cart-text-color);
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
border-radius: 50rpx 0 0 50rpx;
|
||||
background: var(--cart-background-color);
|
||||
}
|
||||
|
||||
.fixedview_towtow {
|
||||
width: 50%;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: var(--cart-text-color);
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
border-radius: 0 50rpx 50rpx 0;
|
||||
background: var(--cartbuy-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.nonecontentone_view {
|
||||
|
||||
margin-left: 16rpx;
|
||||
|
||||
.nonecontentone_view_one {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.nonecontentone_view_otow {
|
||||
margin-top: 10rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towrect {
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
padding-top: 34rpx;
|
||||
|
||||
.towrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.towrect_tow {
|
||||
margin-top: 16rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.noneActive {
|
||||
background-color: #ccc;
|
||||
opacity: 0.4;
|
||||
color: #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.towrect_towtext {
|
||||
width: 100%;
|
||||
background: var(--specbackground-color);
|
||||
border-radius: 8rpx;
|
||||
border:1rpx solid var(--bg-color-button);
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: var(--spec-text-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.towrect_towtexts {
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.thererect {
|
||||
padding: 34rpx 0;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
border-top: 1rpx solid #F7F7F7;
|
||||
|
||||
.thererect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.thererect_tow {}
|
||||
}
|
||||
|
||||
.fuorrect {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fuorrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.fuorrect_tow {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fvirect {
|
||||
margin-top: 200rpx;
|
||||
padding: 16rpx;
|
||||
text-align: center;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 40rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.contentimage {
|
||||
width: 100%;
|
||||
height: 528rpx;
|
||||
}
|
||||
|
||||
.contentbox {
|
||||
padding: 28rpx 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
|
||||
.contentbox_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.contentbox_tow {
|
||||
margin-top: 12rpx;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
font-size: 34rpx;
|
||||
font-family: SourceHanSansCN-Bold-,
|
||||
SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FC5F69;
|
||||
}
|
||||
}
|
||||
|
||||
.contentboxtow {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
padding: 28rpx 32rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.onecontentterewone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 24rpx;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontentterewone {
|
||||
.onecontenttereone_one {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
|
||||
text {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.introduction_yow {
|
||||
margin-top: 18rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
width: 100%;
|
||||
|
||||
/deep/ [alt] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ p {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
437
pages/mall/order/applylrefund.vue
Normal file
437
pages/mall/order/applylrefund.vue
Normal file
@@ -0,0 +1,437 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="boxcontent">
|
||||
<u-steps :current="datalist.status.status_b" dot direction="column">
|
||||
<u-steps-item v-for="(item,index) in datalist.status.refund" :key="index" :title="item"></u-steps-item>
|
||||
</u-steps>
|
||||
</view>
|
||||
<view class="onecontent" style="margin-top: 32rpx;">
|
||||
<view class="onecontentone_one">
|
||||
退款信息
|
||||
</view>
|
||||
<view class="onecontentone_otow flex-between" v-for="(item,index) in datalist.goods" :key="index" @click="detailsInfo(item.store_service_id)">
|
||||
<image :src="item.img" mode="aspectFill"></image>
|
||||
<view class="flex-colum-start">
|
||||
<view class="onecontentone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="onecontentones">
|
||||
{{item.spec}}
|
||||
</view>
|
||||
<view class="onecontenttow">
|
||||
<view class="onecontenttowabsolute">
|
||||
x{{item.number}}
|
||||
</view>
|
||||
<text style="font-size:28rpx;">¥</text>{{item.price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentone_item flex-between">
|
||||
<view class="onecontentone_itemone">
|
||||
退款原因
|
||||
</view>
|
||||
<view class="onecontentone_itemtow">
|
||||
{{datalist.reason}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentone_item flex-between">
|
||||
<view class="onecontentone_itemone">
|
||||
退款金额
|
||||
</view>
|
||||
<view class="onecontentone_itemtow">
|
||||
{{datalist.order_price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentone_item flex-between">
|
||||
<view class="onecontentone_itemone">
|
||||
申请件数
|
||||
</view>
|
||||
<view class="onecontentone_itemtow">
|
||||
{{datalist.number}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentone_item flex-between">
|
||||
<view class="onecontentone_itemone">
|
||||
申请时间
|
||||
</view>
|
||||
<view class="onecontentone_itemtow">
|
||||
{{datalist.createtime}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentone_item flex-between">
|
||||
<view class="onecontentone_itemone">
|
||||
退款编号
|
||||
</view>
|
||||
<view class="onecontentone_itemtow flex-start">
|
||||
{{datalist.out_trade_no}}
|
||||
<text class="therecontentfive_box" @click="copy(datalist.out_trade_no)">复制</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between" v-if="datalist.status.status == 0 || datalist.status.status == 2">
|
||||
<view class="fixedview_one flex-start">
|
||||
<!-- <view class="fixedview_oneone">
|
||||
应付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>11
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="fixedview_tow" @click="cancelrefund">
|
||||
取消退款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
height: '',
|
||||
datalist: {
|
||||
status: {
|
||||
status_b: '',
|
||||
status: ''
|
||||
}
|
||||
},
|
||||
order_id: ""
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
this.order_id = e.id
|
||||
try {
|
||||
let res = await this.api.shoppingorderorderrefunddetail({
|
||||
order_id: this.order_id
|
||||
})
|
||||
if (res) {
|
||||
this.datalist = res
|
||||
}
|
||||
} catch (e) {}
|
||||
// this.generate()
|
||||
},
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
methods: {
|
||||
detailsInfo(e) { //查看订单详情
|
||||
uni.pro.navigateTo('order/orderInfo', {
|
||||
id: e,
|
||||
})
|
||||
},
|
||||
copy(value) {
|
||||
//提示模板
|
||||
uni.setClipboardData({
|
||||
data: value, //要被复制的内容
|
||||
success: () => { //复制成功的回调函数
|
||||
uni.showToast({
|
||||
title: '复制成功'
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
async orderorderrefundcancel() {
|
||||
let res = await this.api.shoppingorderorderorderrefundcancel({
|
||||
order_id: this.datalist.order_id
|
||||
})
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: '成功取消退款',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/order/index?e=0'
|
||||
});
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
cancelrefund() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定取消退款吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.orderorderrefundcancel()
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.index {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.boxcontent {
|
||||
padding: 24rpx 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentone_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontentone_otow {
|
||||
margin-top: 32rpx;
|
||||
|
||||
image {
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
}
|
||||
|
||||
.flex-colum-start {
|
||||
flex: auto;
|
||||
margin-left: 20rpx;
|
||||
height: 176rpx;
|
||||
justify-content: space-around;
|
||||
|
||||
.onecontentone {
|
||||
width: 400rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
.onecontentones{
|
||||
width: 400rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 100;
|
||||
color: #666;
|
||||
}
|
||||
.onecontenttow {
|
||||
position: relative;
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
font-size: 40rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
|
||||
.onecontenttowabsolute {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontentone_item {
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
.onecontentone_itemone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontentone_itemtow {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
|
||||
.therecontentfive_box {
|
||||
padding: 6rpx 10rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
background: #FFFFFF;
|
||||
margin-left: 6rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #D5D5D5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: linear-gradient(143deg, #8689AF 0%, #494A5F 100%);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.buoot {
|
||||
margin: 40rpx auto;
|
||||
width: 80%;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(115deg, #7E81A5 0%, #4D4E64 100%);
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.therecontentone {
|
||||
width: 100%;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.therecontentone_one {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentone_text {
|
||||
flex: auto;
|
||||
margin-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fourcontent_items {
|
||||
position: relative;
|
||||
margin-top: 16rpx;
|
||||
margin-left: 20rpx;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
background: #f9f9f9;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
.fourcontent_item {
|
||||
position: relative;
|
||||
margin-top: 16rpx;
|
||||
margin-left: 20rpx;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
image {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.fourcontent_itemtext {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
right: 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entowakst {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentfive_box {
|
||||
padding: 6rpx 10rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
background: #FFFFFF;
|
||||
margin-left: 6rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #D5D5D5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
840
pages/mall/order/cporderinfo.vue
Normal file
840
pages/mall/order/cporderinfo.vue
Normal file
@@ -0,0 +1,840 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="onecontent">
|
||||
<view class="onecontentone flex-start">
|
||||
<image class="onecontentone_image" :src="listdata.host_img" mode="aspectFill"></image>
|
||||
<view class="onecontentone_one flex-colum-start">
|
||||
<text class="onecontentone_one_top">{{listdata.title}}</text>
|
||||
<view class="onecontentone_one_view"><text>¥</text>{{listdata.price}}</view>
|
||||
<!-- <view class="onecontentone_one_ts" @click="infoshow = true">
|
||||
查看详情
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="onecontenttow ">
|
||||
<view class="onecontenttowone flex-start">
|
||||
<view class="onecontenttowone_one">
|
||||
预约时间<text>（必填）</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttowtow flex-between">
|
||||
<view class="onecontenttowtow_item flex-between">
|
||||
<view class=" flex-colum" v-for="(item,index) in reservationlist" :key="index"
|
||||
:class="reservationshow == index ? 'onecontenttowtow_item_ones':'onecontenttowtow_item_one'"
|
||||
@click="reservation(item,index)">
|
||||
<text class="onecontenttowtow_item_one_textone">{{item.week}}</text>
|
||||
<text class="onecontenttowtow_item_one_texttow">{{item.date.slice(5,10)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttowtow_left flex-colum" @click="calendarshow = true">
|
||||
<u-icon name="calendar" color="#b4b4b4" size="20"></u-icon>
|
||||
<text class="onecontenttowtow_lefttext">选择</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttowthere flex-start">
|
||||
<view v-for="(item,index) in 14" :key="index" @click="clicktime(item,index)"
|
||||
:class="timeshow == index?'onecontenttowthere_items':'onecontenttowthere_item'">
|
||||
10:00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttere">
|
||||
<view class="onecontentterewone flex-start">
|
||||
<view class="onecontenttereone_one">
|
||||
发型师
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentterewtow flex-start">
|
||||
<view class="onecontentterewtow_item flex-colum" v-for="(item,index) in 1">
|
||||
<image src="@/static/logo.png" mode="aspectFill"></image>
|
||||
<text>John</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="introduction">
|
||||
<view class="introduction_one">
|
||||
【服务简介}
|
||||
</view>
|
||||
<view class="introduction_yow" v-html="listdata.details">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="onecontentfour">
|
||||
<view class="onecontentfourone flex-start">
|
||||
<view class="onecontentfourone_one">
|
||||
备注
|
||||
</view>
|
||||
</view>
|
||||
<u--textarea v-model="textarea" placeholder="请输入内容" autoHeight></u--textarea>
|
||||
</view> -->
|
||||
<u-overlay :show="infoshow" @click="infoshow = false">
|
||||
<view class="infowarp">
|
||||
<view class="inforect" @tap.stop>
|
||||
<view class="onerect flex-start">
|
||||
<view>服务详情</view>
|
||||
<u-icon @click="infoshow = false" class="onerecticon" name="backspace" color="#000000"
|
||||
size="28"></u-icon>
|
||||
</view>
|
||||
<view class="infotowrect flex-start">
|
||||
<image src="@/static/logo.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="infothererect flex-colum-start">
|
||||
<view class="infothererect_one">
|
||||
【洗剪吹】新娘造型
|
||||
</view>
|
||||
<view class="infothererect_one">
|
||||
¥120
|
||||
</view>
|
||||
</view>
|
||||
<view class="infofourrect">
|
||||
<view class="infofourrect_one">
|
||||
【服务简介
|
||||
</view>
|
||||
<view class="infofourrect_yow">
|
||||
烫发、编发、洗头、定型。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
<u-overlay :show="overlayshow" @click="overlayshow = false">
|
||||
<view class="warp">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-start">
|
||||
<image class="onecontentone_image" :src="listdata.img" mode="aspectFill"></image>
|
||||
<view class="nonecontentone_view">{{listdata.title}}</view>
|
||||
<view class="onerecticon">
|
||||
<u-icon @click="overlayshow = false" name="backspace" color="#000000" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="towrect">
|
||||
<view class="towrect_one">
|
||||
预约时间：2023-06-16
|
||||
</view>
|
||||
<view class="towrect_tow">
|
||||
<text>10:00</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="thererect flex-between">
|
||||
<view class="thererect_one">
|
||||
预约服务
|
||||
</view>
|
||||
<view class="thererect_tow">
|
||||
<u-number-box v-model="numberbox" button-size="24" color="#ffffff" bgColor="#9397c1"
|
||||
iconStyle="color: #fff" integer @change="numberboxchange"></u-number-box>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="fuorrect flex-between">
|
||||
<view class="fuorrect_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="fuorrect_tow">
|
||||
¥{{listdata.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fvirect flex-center" @click="overlayshowclick">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
<u-calendar mode="single" @confirm="confirm" :show="calendarshow" @close="calendarshow = false"></u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
overlayshow: false,
|
||||
infoshow: false,
|
||||
numberbox: "",
|
||||
height: '',
|
||||
timeshow: '',
|
||||
textarea: '',
|
||||
reservationshow: 0,
|
||||
calendarshow: false,
|
||||
reservationlist: [],
|
||||
inifid: '',
|
||||
listdata: {}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
console.log(e)
|
||||
this.inifid = e.id
|
||||
this.confirm()
|
||||
this.reservationdetail()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
methods: {
|
||||
async reservationdetail() {
|
||||
let res = await this.api.shoppingindexgoodsgoodsdetail({
|
||||
goods_id: this.inifid,
|
||||
type:1
|
||||
})
|
||||
this.listdata = res
|
||||
this.listdata.details = res.details.replace(/\<img/g, '<img style="max-width:100%;height:auto" ');
|
||||
console.log(this.listdata)
|
||||
},
|
||||
reservation(a, b) {
|
||||
this.reservationshow = b
|
||||
console.log(a, b)
|
||||
},
|
||||
clicktime(a, b) {
|
||||
this.timeshow = b
|
||||
console.log(a, b)
|
||||
},
|
||||
numberboxchange(e) {
|
||||
console.log('当前值为: ' + e.value)
|
||||
},
|
||||
async overlayshowclick() {
|
||||
let res = await this.api.useruserinfo() //p判断是否完成手机号
|
||||
uni.cache.set('loginuser', res);
|
||||
this.overlayshow = false
|
||||
if (res.userinfo.mobile) {
|
||||
uni.pro.navigateTo('order/confirm', {
|
||||
id: this.inifid
|
||||
})
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认订单需要获取您的手机号',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/index'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
confirm(e) {
|
||||
if (e) {
|
||||
this.calendarshow = false
|
||||
console.log(new Date(e[0]));
|
||||
var now = new Date(e[0]);
|
||||
} else {
|
||||
//获取当前年月日
|
||||
var now = new Date();
|
||||
// var year = now.getFullYear(); //得到年份
|
||||
// var month = now.getMonth() + 1; //得到月份
|
||||
// var date = now.getDate(); //得到日期
|
||||
// data = year + "年" + month + "月" + date + "日";
|
||||
}
|
||||
this.reservationlist = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
var date = new Date(now.getTime() + i * 24 * 3600 * 1000);
|
||||
var year = date.getFullYear();
|
||||
var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1);
|
||||
var day = (date.getDate()) > 9 ? (date.getDate()) : '0' + (date.getDate());
|
||||
var dt2 = new Date(now.getTime() + i * 24 * 3600 * 1000);
|
||||
var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
|
||||
// var weekDays = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
|
||||
this.reservationlist.push({
|
||||
date: year + "-" + month + "-" + day,
|
||||
// date: month + "-" + day,
|
||||
// day: day,
|
||||
// weekday: weekDays[dt2.getDay()],
|
||||
week: weekDay[dt2.getDay()],
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
/deep/ .mystyle {
|
||||
width: 100% !important;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.index {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentone {
|
||||
flex-wrap: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
|
||||
.onecontentone_image {
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.nonecontentone_view {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.onecontentone_one {
|
||||
position: relative;
|
||||
justify-content: space-evenly;
|
||||
flex: 1;
|
||||
margin-left: 24rpx;
|
||||
height: 176rpx;
|
||||
|
||||
.onecontentone_one_ts {
|
||||
padding: 8rpx 22rpx;
|
||||
position: absolute;
|
||||
top: 70%;
|
||||
transform: translateY(-50%);
|
||||
right: 0;
|
||||
background: #F7F7F7;
|
||||
border-radius: 28rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.onecontentone_one_top {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onecontentone_one_view {
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
font-size: 40rpx;
|
||||
font-family: SourceHanSansCN-Bold-,
|
||||
SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontenttowone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 24rpx;
|
||||
background: #1A1A1A;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontenttowone {
|
||||
.onecontenttowone_one {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
|
||||
text {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttowtow {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.onecontenttowtow_item {
|
||||
flex: 1;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.onecontenttowtow_item_one:nth-child(1) {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.onecontenttowtow_item_one {
|
||||
padding: 6rpx;
|
||||
|
||||
.onecontenttowtow_item_one_textone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontenttowtow_item_one_texttow {
|
||||
margin-top: 5rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttowtow_item_ones {
|
||||
padding: 6rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #1A1A1A;
|
||||
|
||||
.onecontenttowtow_item_one_textone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.onecontenttowtow_item_one_texttow {
|
||||
margin-top: 5rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttowtow_left {
|
||||
border-left: 1rpx solid #f9f9f9;
|
||||
background: #FFFFFF;
|
||||
padding-left: 24rpx;
|
||||
box-shadow: -2rpx 0px 4rpx 2rpx rgba(193, 193, 193, 0.09);
|
||||
|
||||
.onecontenttowtow_lefttext {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttowthere {
|
||||
.onecontenttowthere_item {
|
||||
width: 20%;
|
||||
margin: 16rpx 2.5%;
|
||||
text-align: center;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #F7F7F7;
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.onecontenttowthere_items {
|
||||
width: 20%;
|
||||
margin: 16rpx 2.5%;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid var(--bg-color-buttontow);
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: var(--bg-color-buttontow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttere {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentterewone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 24rpx;
|
||||
background: #1A1A1A;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontentterewone {
|
||||
.onecontenttereone_one {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
|
||||
text {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.onecontentterewtow {
|
||||
|
||||
|
||||
.onecontentterewtow_item {
|
||||
margin: 0 15rpx;
|
||||
margin-top: 22rpx;
|
||||
padding: 20rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #F7F7F7;
|
||||
|
||||
image {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.introduction {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.introduction_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.introduction_yow {
|
||||
margin-top: 18rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
width: 100%;
|
||||
|
||||
/deep/ [alt] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ p {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontentfour {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentfourone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 24rpx;
|
||||
background: #1A1A1A;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontentfourone {
|
||||
padding-bottom: 16rpx;
|
||||
|
||||
.onecontentfourone_one {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
|
||||
text {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: linear-gradient(143deg, #8689AF 0%, #494A5F 100%);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.infowarp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.inforect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
|
||||
view {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.infotowrect {
|
||||
width: 686rpx;
|
||||
height: 640rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.infothererect {
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 4rpx solid #F9F9F9;
|
||||
|
||||
.infothererect_one {
|
||||
margin-top: 22rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
|
||||
.infofourrect {
|
||||
.infofourrect_one {
|
||||
margin-top: 32rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.infofourrect_yow {
|
||||
margin-top: 18rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
.nonecontentone_view {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towrect {
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
padding-top: 34rpx;
|
||||
|
||||
.towrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.towrect_tow {
|
||||
margin-top: 16rpx;
|
||||
|
||||
text {
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #333333;
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.thererect {
|
||||
padding: 34rpx 0;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
border-top: 1rpx solid #F7F7F7;
|
||||
|
||||
.thererect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.thererect_tow {}
|
||||
}
|
||||
|
||||
.fuorrect {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fuorrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.fuorrect_tow {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fvirect {
|
||||
margin-top: 200rpx;
|
||||
padding: 16rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(115deg, #7E81A5 0%, #4D4E64 100%);
|
||||
border-radius: 40rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
905
pages/mall/order/index.vue
Normal file
905
pages/mall/order/index.vue
Normal file
@@ -0,0 +1,905 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="flex-start">
|
||||
<view class="onecontent_oen flex-start">
|
||||
<input class="onecontent_oen_input" type="text" v-model="like" placeholder="搜索订单/商家名/商品名">
|
||||
<text class="onecontent_oen_text" @click="init_fn">搜索</text>
|
||||
</view>
|
||||
<view class="onecontent_oen_right flex-start" v-if="style_type != 2" @click="showpicker = true">
|
||||
<image class="onecontent_oen_rightimage" src="@/static/screen.png" mode="aspectFill"></image>
|
||||
<view class="onecontent_oen_rightimageview">筛选</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontent_tow flex-between">
|
||||
<view ref="uTabs" class="onecontent_tow_item flex-colum" v-for="(item,index) in swipercurrentdata"
|
||||
:key="index" @click="orderswitch(index)">
|
||||
<view :class="swiperCurrent == index?'onecontent_tow_itemtexts':'onecontent_tow_itemtext'">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{height:height}">
|
||||
<swiper-item v-for="(item,index) in list_" :key="index">
|
||||
<scroll-view scroll-y style="width: 100%;" :style="{height:height}" @scrolltolower="lower">
|
||||
<view class="towcontentitem" v-for="(item1,index1) in list_[index].data" :key="index1"
|
||||
@click="eeInfo(item1)">
|
||||
<view class="towcontentitemone flex-between">
|
||||
<text class="towcontentitemone_one">{{item1.store_title}}</text>
|
||||
<view class="towcontentitemone_tow flex-start">
|
||||
<!-- <image class="towcontentitemone_towimage"
|
||||
:src="item.store_avatar"
|
||||
mode="aspectFill">
|
||||
</image> -->
|
||||
<text v-if="item1.status == 0">待付款</text>
|
||||
<text v-if="item1.status == 1">待发货</text>
|
||||
<text v-if="item1.status == 2">待收货</text>
|
||||
<text v-if="item1.status == 3">已收货/评价</text>
|
||||
<text v-if="item1.status == 4">退款中 </text>
|
||||
<text v-if="item1.status == 5">退款成功</text>
|
||||
<text v-if="item1.status == 6">取消订单</text>
|
||||
<!-- <text v-if="item1.status == 7">已退款</text>-->
|
||||
<text v-if="item1.status == 7">已拒绝</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-start" v-for="(item2,index) in item1.goods"
|
||||
:key="item2.id">
|
||||
<image class="towcontentitemtow_imge" :src="item2.img" mode="aspectFill"></image>
|
||||
<view class="towcontentitemtow_one flex-colum-start">
|
||||
<text class="towcontentitemtow_one_one">{{item2.title}}</text>
|
||||
<text class="towcontentitemtow_one_tow">
|
||||
<text style="font-size:28rpx;">¥</text>{{item2.spec}}</text>
|
||||
<text class="towcontentitemtow_one_there">
|
||||
×{{item2.number}}
|
||||
</text>
|
||||
<view class="towcontentitemtow_one_four">
|
||||
{{item2.goods_price}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="towcontentitemtow_tow">
|
||||
{{item1.number}}
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="towcontentitemthere_text_iitem">
|
||||
共{{item1.number}}件商品 合计:<text>￥{{item1.goods_total_price}}</text>
|
||||
</view>
|
||||
<view class="towcontentitemthere">
|
||||
<view v-if="item1.status == 0"
|
||||
class="towcontentitemthereitem towcontentitemthereitem_tow"
|
||||
@click.stop="orderordercancel(item1)">
|
||||
取消订单
|
||||
</view>
|
||||
<view v-if="item1.status == 1 || item1.status == 2 || item1.status == 3"
|
||||
class="towcontentitemthereitem towcontentitemthereitem_tow"
|
||||
@click.stop="orderordercancelrefund(item1)">
|
||||
申请售后
|
||||
</view>
|
||||
<view v-if="item1.status == 4 || item1.status == 5"
|
||||
class="towcontentitemthereitem towcontentitemthereitem_tow"
|
||||
@click.stop="applylrefund(item1)">
|
||||
查看退款
|
||||
</view>
|
||||
<view class="towcontentitemthereitem towcontentitemthereitem_tow"
|
||||
v-if="item1.status == 3 || item1.status == 5" @click.stop="orderorderdelete(item1)">
|
||||
删除订单
|
||||
</view>
|
||||
<!-- <view class="towcontentitemthereitem towcontentitemthereitem_there">
|
||||
待服务
|
||||
</view> -->
|
||||
<view class="towcontentitemthereitem towcontentitemthereitem_one"
|
||||
v-if="item1.status == 0" @click.stop="overlayshowclick(item1)">
|
||||
去付款
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow" @click.stop="overlayshow = false" opacity='0.1'>
|
||||
<view class="warp">
|
||||
<view class="rect flex-colum" @tap.stop>
|
||||
<view class="rectone">
|
||||
确定{{clickoverlayshowtext}}吗?
|
||||
</view>
|
||||
<view class="recttow flex-between">
|
||||
<view class="recttow_one" @click="cancelOrder(item.status)">
|
||||
确定
|
||||
</view>
|
||||
<view class="recttow_tow" @click="overlayshow = false">
|
||||
取消
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</view>
|
||||
<view v-if="list_[index].data.length == 0 && list_[index].is_end == true" class="flex-colum"
|
||||
style="margin-bottom: 10rpx;">
|
||||
<image style="margin-top:100rpx;" class="" :src="bgnothave" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<u-picker :show="showpicker" :columns="columns" keyName="label" @cancel='showpicker = false'
|
||||
@confirm='confirmpicker'></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showpicker: false,
|
||||
style_type: uni.cache.get('loginuser').style_type,
|
||||
columns: [
|
||||
[{
|
||||
label: '店铺订单',
|
||||
// 其他属性值
|
||||
id: 1
|
||||
// ...
|
||||
}, {
|
||||
label: '商城订单',
|
||||
id: 2
|
||||
}]
|
||||
],
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
height: "",
|
||||
// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
|
||||
current: 0, // tabs组件的current值，表示当前活动的tab选项
|
||||
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
|
||||
overlayshow: false,
|
||||
list_: {
|
||||
list1: { //全部
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list2: { //代付款
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list3: { //待服务
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list4: { //已完成
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list5: { //退款
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
}
|
||||
},
|
||||
like: '', //备注
|
||||
clickoverlayshowtext: "",
|
||||
swipercurrentdata: [{
|
||||
name: '全部'
|
||||
}, {
|
||||
name: '待付款'
|
||||
}, {
|
||||
name: '待发货'
|
||||
}, {
|
||||
name: '待收货'
|
||||
}, {
|
||||
name: '已收货/退款售后'
|
||||
}],
|
||||
form: {
|
||||
status: 'loadmore',
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.swiperCurrent = e.e;
|
||||
},
|
||||
onShow() {
|
||||
this.init_fn();
|
||||
},
|
||||
computed: {
|
||||
HeighTpadding() {
|
||||
return this.$store.getters.is_BarHeight.bottompadding
|
||||
},
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.onecontent')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (res.windowHeight - ele.height - (that.HeighTpadding / 2)) +
|
||||
"px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
|
||||
methods: {
|
||||
confirmpicker(e) {
|
||||
if (e.value[0].label == '店铺订单') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/order/index?e=0'
|
||||
})
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pages/mall/order/index?e=0'
|
||||
})
|
||||
}
|
||||
},
|
||||
init_fn() {
|
||||
this.list_ = {
|
||||
list1: { //全部
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list2: { //代付款
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list3: { //待发货
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list4: { //已完成
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list5: { //退款
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
}
|
||||
}
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
this.get_order_list(i);
|
||||
}
|
||||
},
|
||||
async get_order_list(i) {
|
||||
console.log(i, 2233)
|
||||
this.form.status = 'loading';
|
||||
let page = null; //页数
|
||||
let order_type = 10;
|
||||
switch (i) {
|
||||
case 0:
|
||||
order_type = 10; //全部
|
||||
page = this.list_.list1.page;
|
||||
break;
|
||||
case 1:
|
||||
order_type = 0; //待付款
|
||||
page = this.list_.list2.page;
|
||||
break;
|
||||
case 2:
|
||||
order_type = 1; //待发货
|
||||
page = this.list_.list3.page;
|
||||
break;
|
||||
case 3:
|
||||
order_type = 2; //2待收货
|
||||
page = this.list_.list4.page;
|
||||
break;
|
||||
case 4:
|
||||
order_type = 3; // 4 3已收货/退款售后
|
||||
page = this.list_.list5.page;
|
||||
break;
|
||||
}
|
||||
let res = await this.api.shoppingorderlist({
|
||||
type: order_type,
|
||||
page: page,
|
||||
like: this.like
|
||||
})
|
||||
// let res = []
|
||||
// res.data.forEach(item=>{//计算待支付订单剩余时间
|
||||
// if(item.order_type==0){
|
||||
// item.timeDiff=(new Date(item.estimate_close_at).getTime() -new Date().getTime())/1000;
|
||||
// }
|
||||
// })
|
||||
switch (order_type) {
|
||||
case 10:
|
||||
this.paging(res, this.list_.list1)
|
||||
break;
|
||||
case 0:
|
||||
this.paging(res, this.list_.list2)
|
||||
break;
|
||||
case 1:
|
||||
this.paging(res, this.list_.list3)
|
||||
break;
|
||||
case 2:
|
||||
this.paging(res, this.list_.list4)
|
||||
break;
|
||||
case 3:
|
||||
this.paging(res, this.list_.list5)
|
||||
break;
|
||||
}
|
||||
uni.hideLoading();
|
||||
},
|
||||
paging(res, list) {
|
||||
if (res.length == 0) {
|
||||
this.form.status = 'nomore';
|
||||
list.is_end = true;
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
list.page = list.page + 1;
|
||||
setTimeout(() => {
|
||||
list.data = [...list.data, ...res];
|
||||
if (res.length != 10) {
|
||||
list.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
}
|
||||
this.$forceUpdate();
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
async overlayshowclick(e) {
|
||||
uni.pro.navigateTo('mall/confirm', {
|
||||
type: 3, // 1购物车 2商品详情页
|
||||
order_id: e.id,
|
||||
// goods_id:this.goods_id, //商品ID 商品详情页来源时必填
|
||||
// car_id:'', //购物车ID 1,2 购物车来源时必填
|
||||
// number:this.numberbox, //商品详情页来源时必填
|
||||
// spec:this.lsitform.id, //规格 商品详情页来源时必填
|
||||
// address_id: '', //地址ID 可以为空（为空时返回默认地址）
|
||||
})
|
||||
// uni.pro.navigateTo('mall/confirm', {
|
||||
// order_id: e.id
|
||||
// })
|
||||
console.log(e)
|
||||
// let res = await this.api.paygetpayparams({
|
||||
// order_id: e.order_id
|
||||
// }) //判断是否支付成功
|
||||
// console.log(res)
|
||||
// if (res.data.pay_status == 0) {
|
||||
// // #ifdef MP-WEIXIN
|
||||
// uni.requestPayment({
|
||||
// provider: 'wxpay', //支付类型-固定值
|
||||
// partnerid: res.data.pay_data.payAppId, // 微信支付商户号
|
||||
// timeStamp: res.data.pay_data.payTimeStamp, // 时间戳（单位：秒）
|
||||
// nonceStr: res.data.pay_data.paynonceStr, // 随机字符串
|
||||
// package: res.data.pay_data.payPackage, // 固定值
|
||||
// signType: res.data.pay_data.paySignType, //固定值
|
||||
// paySign: res.data.pay_data.paySign, //签名
|
||||
// success: (res) => {
|
||||
// console.log(res,'11111111')
|
||||
// uni.showToast({
|
||||
// title: "支付成功"
|
||||
// })
|
||||
// uni.redirectTo({
|
||||
// url: "/pages/order/ordersuccess?id=" + e.order_id,
|
||||
// });
|
||||
// },
|
||||
// fail: (err) => {
|
||||
// uni.showToast({
|
||||
// icon: 'none',
|
||||
// title: '支付失败'
|
||||
// })
|
||||
// console.log('fail:' + JSON.stringify(err));
|
||||
// }
|
||||
// });
|
||||
// // #endif
|
||||
// } else {
|
||||
// console.log(res,'22222')
|
||||
// uni.redirectTo({
|
||||
// url: "/pages/order/ordersuccess?id=" + e.order_id,
|
||||
// });
|
||||
// }
|
||||
|
||||
},
|
||||
lower() {
|
||||
switch (this.current) {
|
||||
case 0:
|
||||
this.onReachBottom_fn(this.list_.list1)
|
||||
break;
|
||||
case 1:
|
||||
this.onReachBottom_fn(this.list_.list2)
|
||||
break;
|
||||
case 2:
|
||||
this.onReachBottom_fn(this.list_.list3)
|
||||
break;
|
||||
case 3:
|
||||
this.onReachBottom_fn(this.list_.list4)
|
||||
break;
|
||||
case 4:
|
||||
this.onReachBottom_fn(this.list_.list5)
|
||||
break;
|
||||
}
|
||||
},
|
||||
onReachBottom_fn(list) {
|
||||
if (!list.is_end) {
|
||||
this.get_order_list(this.current);
|
||||
} else {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
},
|
||||
// tabs通知swiper切换
|
||||
orderswitch(index) {
|
||||
try {
|
||||
switch (index) {
|
||||
case 0:
|
||||
if (this.list_list1.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
if (this.list_.list2.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if (this.list_.list3.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
if (this.list_.list4.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 4:
|
||||
if (this.list_.list5.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
this.swiperCurrent = index;
|
||||
},
|
||||
animationfinish(e) {
|
||||
let current = e.detail.current;
|
||||
try {
|
||||
switch (current) {
|
||||
case 0:
|
||||
if (this.list_list1.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
if (this.list_.list2.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if (this.list_.list3.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
if (this.list_.list4.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 4:
|
||||
if (this.list_.list5.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
|
||||
this.swiperCurrent = current;
|
||||
this.current = current;
|
||||
},
|
||||
orderordercancel(item) { //取消订单
|
||||
uni.showModal({
|
||||
content: '确定取消订单吗?',
|
||||
confirmColor: '#f55850',
|
||||
cancelColor: '#333333',
|
||||
success: async (resdata) => {
|
||||
console.log(resdata)
|
||||
if (resdata.confirm) {
|
||||
let res = await this.api.shoppingorderordercancel({
|
||||
order_id: item.id
|
||||
})
|
||||
this.init_fn()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
orderordercancelrefund(item) { //取消订单去退款
|
||||
uni.pro.navigateTo('mall/order/refund', {
|
||||
id: item.id
|
||||
})
|
||||
},
|
||||
applylrefund(item) {
|
||||
uni.pro.navigateTo('mall/order/applylrefund', {
|
||||
id: item.id
|
||||
})
|
||||
},
|
||||
orderorderdelete(item) {
|
||||
uni.showModal({
|
||||
content: '确定删除订单吗?',
|
||||
confirmColor: '#f55850',
|
||||
cancelColor: '#333333',
|
||||
success: async (resdata) => {
|
||||
if (resdata.confirm) {
|
||||
let res = await this.api.shoppingorderorderorderdelete({
|
||||
order_id: item.id
|
||||
})
|
||||
}
|
||||
this.init_fn()
|
||||
}
|
||||
})
|
||||
},
|
||||
async cancelOrder(item) { //取消订单
|
||||
console.log(item)
|
||||
// let res
|
||||
// switch (this.clickoverlayshowtext) {
|
||||
// case '取消订单':
|
||||
// if (item.status == 0) {
|
||||
// res = await this.api.orderordercancel({
|
||||
// order_id: item.id
|
||||
// })
|
||||
// } else {
|
||||
// uni.pro.navigateTo('mall/order/orderInfo', {
|
||||
// id: e,
|
||||
// e: e
|
||||
// })
|
||||
// }
|
||||
// break;
|
||||
// case '删除订单':
|
||||
// res = await this.api.orderorderdelete({
|
||||
// order_id: item.id
|
||||
// })
|
||||
// break;
|
||||
// }
|
||||
// this.overlayshow = false
|
||||
// this.init_fn()
|
||||
},
|
||||
eeInfo(e) { //查看订单详情
|
||||
uni.pro.navigateTo('mall/order/orderInfo', {
|
||||
id: e.id
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 10rpx 28rpx;
|
||||
|
||||
.flex-start {
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.onecontent_oen {
|
||||
margin: 0 auto;
|
||||
flex: auto;
|
||||
height: 70rpx;
|
||||
border-radius: 36rpx;
|
||||
border: 1rpx solid var(--bg-color-button);
|
||||
padding-right: 8rpx;
|
||||
|
||||
.onecontent_oen_input {
|
||||
padding-left: 32rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.onecontent_oen_text {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 56rpx;
|
||||
width: 116rpx;
|
||||
height: 56rpx;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontent_oen_right {
|
||||
margin-left: 26rpx;
|
||||
|
||||
.onecontent_oen_rightimage {
|
||||
width: 17.9rpx;
|
||||
height: 19.34rpx;
|
||||
}
|
||||
|
||||
.onecontent_oen_rightimageview {
|
||||
text-align: center;
|
||||
width: 56rpx;
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontent_tow {
|
||||
padding: 32rpx 0 32rpx 0;
|
||||
width: 100%;
|
||||
|
||||
.onecontent_tow_item {
|
||||
position: relative;
|
||||
|
||||
.onecontent_tow_itemtexts {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontent_tow_itemtext {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.onecontent_tow_itemtexts::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 19.33rpx;
|
||||
height: 6.66rpx;
|
||||
background: url(https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/my/order/order1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.flex-colum_image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
text {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitem {
|
||||
margin-top: 32rpx;
|
||||
padding: 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.towcontentitemone {
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
|
||||
.towcontentitemone_one {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentitemone_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
|
||||
.towcontentitemone_towimage {
|
||||
margin-right: 10rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
position: relative;
|
||||
padding: 22rpx 0;
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
|
||||
.towcontentitemtow_imge {
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
background: #666666;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.towcontentitemtow_one {
|
||||
margin-left: 32rpx;
|
||||
width: 60%;
|
||||
|
||||
.towcontentitemtow_one_one {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentitemtow_one_tow {
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.towcontentitemtow_one_there {
|
||||
margin-top: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentitemtow_one_four {
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
position: absolute;
|
||||
bottom: 22rpx;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow_tow {
|
||||
position: absolute;
|
||||
bottom: 32rpx;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Regular, Roboto;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemthere_text_iitem {
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemthere {
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.towcontentitemthereitem {
|
||||
margin-left: 24rpx;
|
||||
padding: 8rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_one {
|
||||
background: var(--bg-color-button);
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_tow {
|
||||
background: #F6F6F6;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_there {
|
||||
background: var(--bg-color-buttonone);
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_therecak {
|
||||
background: var(--chakabackground);
|
||||
border: 1px solid var(--chakaborder);
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: var(--chakacolor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
padding: 40rpx 68rpx;
|
||||
width: 480rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 42rpx;
|
||||
|
||||
.rectone {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow {
|
||||
width: 100%;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.recttow_one {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
border: 2rpx solid #999999;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow_tow {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #333333;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
623
pages/mall/order/orderInfo.vue
Normal file
623
pages/mall/order/orderInfo.vue
Normal file
@@ -0,0 +1,623 @@
|
||||
<template>
|
||||
<view class="index" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="onecontentone">
|
||||
<text v-if="datalist.status == 0">待付款</text>
|
||||
<text v-if="datalist.status == 1">待发货</text>
|
||||
<text v-if="datalist.status == 2">待收货</text>
|
||||
<text v-if="datalist.status == 3">已收货/评价</text>
|
||||
<text v-if="datalist.status == 4">退款中 </text>
|
||||
<text v-if="datalist.status == 5">退款成功</text>
|
||||
<text v-if="datalist.status == 6">取消订单</text>
|
||||
<text v-if="datalist.status == 7">已拒绝</text>
|
||||
</view>
|
||||
<view class="onecontenttow">
|
||||
感谢您的支持，欢迎再次光临
|
||||
</view>
|
||||
<view class="onecontentthere flex-between">
|
||||
<view class="onecontentthere_one" v-if="datalist.status == 5 || datalist.status == 3 "
|
||||
@click="orderorderdelete(datalist)">
|
||||
删除订单
|
||||
</view>
|
||||
<view class="onecontentthere_tow"
|
||||
v-if="datalist.status == 1 || datalist.status == 2 ||datalist.status == 3"
|
||||
@click="orderordercancelrefund(datalist)">
|
||||
申请退款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent" >
|
||||
<view class="towcontentone flex-between">
|
||||
<view class="towcontentone_one flex-start">
|
||||
<u-icon name="home" color="#ffffff" size="20"></u-icon>
|
||||
<text class="towcontentone_one_text">{{datalist.store_title}}</text>
|
||||
</view>
|
||||
<u-icon @click="phonefill(item.store_mobile)" name="phone-fill" color="#ffffff" size="20"></u-icon>
|
||||
</view>
|
||||
<view class="towcontenttow flex-start" v-for="(item,index) in datalist.goods" :key="index" @click="detailsInfo(item.goods_id)">
|
||||
<image class="towcontenttow_image" :src="item.img" mode="aspectFill"></image>
|
||||
<view class="towcontenttowone flex-colum-start">
|
||||
<view class="towcontenttowone_one">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="towcontenttowone_tow flex-start">
|
||||
<view class="towcontenttowone_tow_one flex-start">
|
||||
<u-icon name="checkmark-circle" color="#999999" size="14"></u-icon>
|
||||
随时退
|
||||
</view>
|
||||
<view class="towcontenttowone_tow_one flex-start">
|
||||
<u-icon name="checkmark-circle" color="#999999" size="14"></u-icon>
|
||||
过期退
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontenttowone_there">
|
||||
{{item.spec||''}}
|
||||
</view>
|
||||
<view class="towcontenttowone_four">
|
||||
¥{{item.price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--<view class="towcontentthere flex-between">
|
||||
<text class="towcontentthere_text"></text>
|
||||
</view>
|
||||
<view class="qr-box flex-colum" @longpress="save()">
|
||||
<canvas canvas-id="qrcode" style="width:288rpx;" />
|
||||
</view>
|
||||
<view class="towcontenttfour flex-colum">
|
||||
123 2345 567
|
||||
</view> -->
|
||||
<!-- <view class="towcontenttfive flex-between">
|
||||
<view class="towcontenttfive_one flex-start">
|
||||
<view class="towcontenttfive_oneone">
|
||||
退款:
|
||||
</view>
|
||||
<view class="towcontenttfive_onetow">
|
||||
08-22 23:59:59到期
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontenttfive_tow">
|
||||
申请退款
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="therecontent">
|
||||
<view class="therecontentone">
|
||||
订单信息
|
||||
</view>
|
||||
<view class="therecontentsix entowakst" v-if="datalist.people_nickname">
|
||||
发型师：{{datalist.people_nickname}}
|
||||
</view>
|
||||
<view class="therecontentow entowakst">
|
||||
实付金额：<text>¥{{datalist.price}}</text>
|
||||
</view>
|
||||
<view class="therecontentthere entowakst">
|
||||
购买数量：{{datalist.number}}
|
||||
</view>
|
||||
<view class="therecontentthere entowakst">
|
||||
购买数量：{{datalist.username}}
|
||||
</view>
|
||||
<view class="therecontenfour entowakst">
|
||||
手机号码：{{datalist.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') || '-'}}
|
||||
</view>
|
||||
<view class="therecontentthere entowakst">
|
||||
收货地址：{{datalist.address}}
|
||||
</view>
|
||||
<view class="therecontentfive flex-start entowakst">
|
||||
订单编号：{{datalist.out_trade_no}}
|
||||
<text class="therecontentfive_box" @click="copy(datalist.out_trade_no)">复制</text>
|
||||
</view>
|
||||
<view class="therecontentsix entowakst">
|
||||
下单时间：{{datalist.createtime}}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- <view class="fourcontent">
|
||||
<view class="fourcontentone">
|
||||
购买须知
|
||||
</view>
|
||||
<view v-html="datalist.details">
|
||||
|
||||
</view>
|
||||
<view class="entowakst" v-html="datalist.details">
|
||||
·预约须知：请您提前1小时预约
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="fivecontent">
|
||||
<view class="fivecontentone">
|
||||
用户评价
|
||||
</view>
|
||||
<view class="fivecontenttow flex-between">
|
||||
<view class="fivecontenttow_one flex-start">
|
||||
<text class="fivecontenttow_text">综合评分</text>
|
||||
<u-rate :count="5" value="4" active-color="#f1cb66" inactive-color="#F1CB66"></u-rate>
|
||||
</view>
|
||||
<view class="fivecontenttow_tow">
|
||||
满意
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uQRCode from '@/common/js/uqrCode.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
datalist: {
|
||||
mobile:''
|
||||
},
|
||||
imgCode: '', // 后续保存到手机相册所需要用到的字段}
|
||||
form: {
|
||||
phone: '18092171236'
|
||||
}
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
try {
|
||||
let res = await this.api.shoppingorderoorderdetail({
|
||||
id: e.id
|
||||
})
|
||||
if (res) {
|
||||
this.datalist = res
|
||||
this.datalist.details = res.details.replace(/\<img/g, '<img style="max-width:100%;height:auto" ');
|
||||
}
|
||||
} catch (e) {}
|
||||
// this.generate()
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
orderorderdelete(item) { //删除订单
|
||||
uni.showModal({
|
||||
content: '确定删除订单吗?',
|
||||
confirmColor: '#f55850',
|
||||
cancelColor: '#333333',
|
||||
success: async (resdata) => {
|
||||
if (resdata.confirm) {
|
||||
let res = await this.api.shoppingorderorderorderdelete({
|
||||
order_id: item.id
|
||||
})
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
orderordercancelrefund(item) { //取消订单去退款
|
||||
uni.pro.navigateTo('mall/order/refund', {
|
||||
id: item.id
|
||||
})
|
||||
},
|
||||
// 生成二维码事件
|
||||
generate(e) {
|
||||
uQRCode.make({
|
||||
canvasId: 'qrcode',
|
||||
componentInstance: this,
|
||||
text: "https://ky.sxczgkj.cn/wap/merchant/authPay?userAppId=244", // 想生成二维码到内容
|
||||
size: 150,
|
||||
margin: 0,
|
||||
backgroundColor: '#ffffff',
|
||||
foregroundColor: '#000000',
|
||||
fileType: 'jpg',
|
||||
errorCorrectLevel: uQRCode.errorCorrectLevel.H,
|
||||
success: res => {
|
||||
this.imgCode = res // base64的图片格式
|
||||
}
|
||||
})
|
||||
},
|
||||
// 保存到手机
|
||||
save() {
|
||||
uni.getSetting({ //获取用户的当前设置
|
||||
success: (res) => {
|
||||
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
|
||||
this.aveImageToPhotosAlbum();
|
||||
} else {
|
||||
uni.authorize({ //如果没有授权，向用户发起请求
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success: () => {
|
||||
this.aveImageToPhotosAlbum();
|
||||
},
|
||||
fail: () => {
|
||||
// 提示
|
||||
uni.showToast({
|
||||
title: "请打开保存相册权限，再点击保存到手机",
|
||||
icon: "none",
|
||||
duration: 3000
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
|
||||
success: (res2) => {
|
||||
// console.log(res2.authSetting)
|
||||
}
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
copy(value) {
|
||||
//提示模板
|
||||
uni.setClipboardData({
|
||||
data: value, //要被复制的内容
|
||||
success: () => { //复制成功的回调函数
|
||||
uni.showToast({
|
||||
title: '复制成功'
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
detailsInfo(e) { //查看订单详情
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e,
|
||||
})
|
||||
},
|
||||
phonefill(value) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: value //仅为示例
|
||||
});
|
||||
},
|
||||
aveImageToPhotosAlbum() {
|
||||
let base64 = this.imgCode.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
|
||||
let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png'; // 路径文件名
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
uni.getFileSystemManager().writeFile({ // 获取全局唯一的文件管理器
|
||||
filePath: filePath, //创建一个临时文件名
|
||||
data: base64, //写入的文本或二进制数据
|
||||
encoding: 'base64', //写入当前文件的字符编码
|
||||
success: res => {
|
||||
uni.saveImageToPhotosAlbum({ // 保存图片到系统相册
|
||||
filePath: filePath,
|
||||
success: function(res2) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: "none",
|
||||
duration: 5000
|
||||
})
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.hideLoading();
|
||||
// console.log(err.errMsg);
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: err => {
|
||||
uni.hideLoading();
|
||||
//console.log(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.index {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentone {
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.onecontentthere {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.onecontentthere_one {
|
||||
background: #333333;
|
||||
border-radius: 8rpx;
|
||||
padding: 16rpx 94rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.onecontentthere_tow {
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
padding: 16rpx 94rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.towcontentone {
|
||||
position: relative;
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 18rpx 18rpx 0 0;
|
||||
background:var(--bg-color-buttonone);
|
||||
|
||||
.towcontentone_one {
|
||||
.towcontentone_one_image {
|
||||
width: 33.04rpx;
|
||||
height: 29.79rpx;
|
||||
}
|
||||
|
||||
.towcontentone_one_text {
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentone_one::after {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
bottom: -22rpx;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 0 0 22rpx 22rpx;
|
||||
background:var(--bg-color-buttonone);
|
||||
}
|
||||
}
|
||||
|
||||
.towcontenttow {
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
|
||||
.towcontenttow_image {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
}
|
||||
|
||||
.towcontenttowone {
|
||||
height: 128rpx;
|
||||
margin-left: 36rpx;
|
||||
justify-content: space-around;
|
||||
|
||||
.towcontenttowone_one {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontenttowone_tow {
|
||||
.towcontenttowone_tow_one {
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontenttowone_there {
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
.towcontenttowone_four{
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
top:32rpx;
|
||||
right: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentthere {
|
||||
position: relative;
|
||||
height: 44rpx;
|
||||
width: 100%;
|
||||
|
||||
.towcontentthere_text {
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
border: 1rpx dashed #EAEAEA;
|
||||
}
|
||||
|
||||
.towcontentthere_text::after {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 22rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 0 44rpx 44rpx 0;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.towcontentthere_text::before {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 22rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 44rpx 0 0 44rpx;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontenttfour {
|
||||
margin-top: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontenttfive {
|
||||
padding: 32rpx;
|
||||
width: 100%;
|
||||
|
||||
.towcontenttfive_one {
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontenttfive_onetow {
|
||||
margin-left: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.towcontenttfive_tow {
|
||||
padding: 10rpx 16rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #D5D5D5;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.therecontentone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.entowakst {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentfive_box {
|
||||
padding: 6rpx 10rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
background: #FFFFFF;
|
||||
margin-left: 6rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #D5D5D5;
|
||||
}
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.fourcontentone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fourcontentone::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
border: 1px solid #F7F7F7;
|
||||
}
|
||||
|
||||
.entowakst {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent {
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.fivecontentone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fivecontenttow {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.fivecontenttow_one {
|
||||
.fivecontenttow_text {
|
||||
padding-right: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontenttow_tow {
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
189
pages/mall/order/ordersuccess.vue
Normal file
189
pages/mall/order/ordersuccess.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<view class="container" :style="[theme]">
|
||||
<view class="header-wrap">
|
||||
<image class="icon" src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/success.png" mode="widthFix">
|
||||
</image>
|
||||
<text class="t" v-if="info.status == 0">支付失败</text>
|
||||
<text class="t" v-if="info.status == 1">成功支付</text>
|
||||
</view>
|
||||
<view class="status-wrap" v-if="info.status == 1">
|
||||
<view class="line"></view>
|
||||
<view class="info-wrap">
|
||||
<view class="card">
|
||||
<view class="num">
|
||||
<text class="i">￥</text>
|
||||
<text class="n">{{ info.money || '-' }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text>订单编号：{{ info.out_trade_no || '-' }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text>下单时间：{{ info.updatetime || '-'}}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text>支付方式：{{ info.pay_type || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-wrap">
|
||||
<view class="btn" @click="toOrder">
|
||||
<text>查看订单</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderId: '',
|
||||
info: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
|
||||
onReady() {
|
||||
//动态修改状态栏的颜色
|
||||
uni.setNavigationBarColor({
|
||||
backgroundColor:this.theme.cartpieces
|
||||
})
|
||||
},
|
||||
async onLoad(e) {
|
||||
console.log(e)
|
||||
this.info = await this.api.shoppingorderordershoppingorderstatus({
|
||||
order_id: e.id
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
toOrder() {
|
||||
uni.pro.navigateTo('mall/order/index', {
|
||||
e: 0
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.header-wrap {
|
||||
padding: 50upx 0 94upx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--bg-color-button);
|
||||
|
||||
.icon {
|
||||
$size: 98upx;
|
||||
width: 98rpx;
|
||||
height: 93rpx;
|
||||
margin-right: 42upx;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 40upx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.status-wrap {
|
||||
padding: 0 28upx;
|
||||
margin-top: -50upx;
|
||||
$h: 20upx;
|
||||
|
||||
.line {
|
||||
height: $h;
|
||||
border-radius: $h;
|
||||
background-color: 79, 81, 104;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
padding: 0 32upx;
|
||||
margin-top: $h / 2 * -1;
|
||||
position: relative;
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
padding: 28upx 64upx 64upx;
|
||||
border-radius: 0 0 28upx 28upx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.num {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
|
||||
.i {
|
||||
font-size: 24upx;
|
||||
position: relative;
|
||||
bottom: 12upx;
|
||||
}
|
||||
|
||||
.n {
|
||||
font-size: 44upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
padding-top: 28upx;
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrap {
|
||||
padding: 64upx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.btn {
|
||||
width: 296upx;
|
||||
height: 70upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 46rpx;
|
||||
opacity: 1;
|
||||
font-size: 28upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
364
pages/mall/order/refund.vue
Normal file
364
pages/mall/order/refund.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<view class="index" :style="[theme]">
|
||||
<view class="onecontent flex-between" style="margin-top: 10rpx;" v-for="(item,index) in datalist.goods" :key="index">
|
||||
<image :src="item.img" mode="aspectFill"></image>
|
||||
<view class="flex-colum-start">
|
||||
<view class="onecontentone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="onecontenttow">
|
||||
<view class="onecontenttowabsolute">
|
||||
x{{item.number}}
|
||||
</view>
|
||||
<text style="font-size:28rpx;">¥</text>{{item.price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontent">
|
||||
<view class="therecontentone flex-between" @click="showpicke = true">
|
||||
<view class="therecontentone_one">
|
||||
退款原因
|
||||
</view>
|
||||
<text class="therecontentone_text">{{reason}}</text>
|
||||
<u-icon name="arrow-right" color="#9b9b9b" size="14"></u-icon>
|
||||
</view>
|
||||
<view class="therecontentone flex-between">
|
||||
<view class="therecontentone_one">
|
||||
退款金额
|
||||
</view>
|
||||
<input disabled style="padding: 16rpx; color: red;" type="text" v-model="money"
|
||||
class="therecontentone_text" placeholder="请输入退款金额">
|
||||
</view>
|
||||
<view class="therecontentone">
|
||||
<view class="therecontentone_one">
|
||||
详细说明
|
||||
</view>
|
||||
<view class="" style="margin-top: 10rpx;">
|
||||
<u--textarea v-model="remarks" placeholder="请输入内容"></u--textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontentone flex-between">
|
||||
<view class="therecontentone_one">
|
||||
图片凭证
|
||||
</view>
|
||||
<view class="therecontentone_text" style="text-align: right;">最多三张</view>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<view class="fourcontent flex-start" v-if="avatar.length!=0">
|
||||
<view class="fourcontent_item" v-for="(item,index) in avatar" :key="index">
|
||||
<image :src="item" mode="aspectFill"></image>
|
||||
<text class="fourcontent_itemtext" @click="avatardelete(index)">
|
||||
<u-icon name="close-circle-fill" color="#000" size="16"></u-icon>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="avatar.length<3" class="fourcontent_items flex-colum" @click="chooseImagelist">
|
||||
<u-icon name="camera-fill" color="#000" size="30"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="buoot" @click="orderorderrefund">
|
||||
提交
|
||||
</view>
|
||||
<u-picker :show="showpicke" title='退款原因' :columns="columnspicke" @cancel='showpicke = false'
|
||||
@confirm='confirm'></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showpicke: false,
|
||||
reason: "",
|
||||
money: '',
|
||||
columnspicke: [
|
||||
['7天无理由', '拍错/多拍/不想要', '其他']
|
||||
],
|
||||
imgCode: '', // 后续保存到手机相册所需要用到的字段
|
||||
remarks: '',
|
||||
form: {
|
||||
phone: '18092171236'
|
||||
},
|
||||
datalist: {},
|
||||
avatar: [],
|
||||
order_id: ""
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
this.order_id = e.id
|
||||
try {
|
||||
let res = await this.api.shoppingorderoorderdetail({
|
||||
id: this.order_id
|
||||
})
|
||||
if (res) {
|
||||
this.datalist = res
|
||||
this.money = res.price
|
||||
}
|
||||
} catch (e) {}
|
||||
// this.generate()
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// / 更换头像
|
||||
chooseImagelist(e) {
|
||||
// uni.showLoading({
|
||||
// title: '上传中',
|
||||
// mask: true
|
||||
// })
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success: (res) => {
|
||||
let file = res.tempFilePaths[0];
|
||||
uploadImage(file, 'refund/',
|
||||
result => {
|
||||
this.avatar.push(result)
|
||||
uni.hideLoading()
|
||||
}, result => {
|
||||
console.log(result)
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
async orderorderrefund() {
|
||||
if (this.reason == null || this.reason == '') {
|
||||
uni.showToast({
|
||||
title: '请选择退款原因',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
let res = await this.api.shoppingorderorderororderrefund({
|
||||
order_id: this.order_id,
|
||||
reason: this.reason,
|
||||
remarks: this.remarks,
|
||||
img: this.avatar,
|
||||
// money:""
|
||||
})
|
||||
if (res == 1) {
|
||||
uni.showToast({
|
||||
title: '操作成功，请等待审核',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
},
|
||||
avatardelete(e) {
|
||||
this.avatar.splice(e, 1)
|
||||
console.log(this.avatar)
|
||||
},
|
||||
confirm(e) {
|
||||
this.reason = e.value[0]
|
||||
this.showpicke = false
|
||||
console.log(e.value[0])
|
||||
},
|
||||
aveImageToPhotosAlbum() {
|
||||
let base64 = this.imgCode.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
|
||||
let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png'; // 路径文件名
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
uni.getFileSystemManager().writeFile({ // 获取全局唯一的文件管理器
|
||||
filePath: filePath, //创建一个临时文件名
|
||||
data: base64, //写入的文本或二进制数据
|
||||
encoding: 'base64', //写入当前文件的字符编码
|
||||
success: res => {
|
||||
uni.saveImageToPhotosAlbum({ // 保存图片到系统相册
|
||||
filePath: filePath,
|
||||
success: function(res2) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: "none",
|
||||
duration: 5000
|
||||
})
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.hideLoading();
|
||||
// console.log(err.errMsg);
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: err => {
|
||||
uni.hideLoading();
|
||||
//console.log(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.index {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
image {
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
}
|
||||
|
||||
.flex-colum-start {
|
||||
flex: auto;
|
||||
margin-left: 20rpx;
|
||||
|
||||
.onecontentone {
|
||||
width: 400rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
position: relative;
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
font-size: 40rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
|
||||
.onecontenttowabsolute {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.buoot {
|
||||
margin: 40rpx auto;
|
||||
width: 80%;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
background:var(--bg-color-button);
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.therecontentone {
|
||||
width: 100%;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.therecontentone_one {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentone_text {
|
||||
flex: auto;
|
||||
margin-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fourcontent_items {
|
||||
position: relative;
|
||||
margin-top: 16rpx;
|
||||
margin-left: 20rpx;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
background: #f9f9f9;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
.fourcontent_item {
|
||||
position: relative;
|
||||
margin-top: 16rpx;
|
||||
margin-left: 20rpx;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
image {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.fourcontent_itemtext {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
right: 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entowakst {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentfive_box {
|
||||
padding: 6rpx 10rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
background: #FFFFFF;
|
||||
margin-left: 6rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #D5D5D5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
358
pages/mall/series.vue
Normal file
358
pages/mall/series.vue
Normal file
@@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<view class="content" style="padding-bottom: 10rpx;" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="onecontent_oen flex-start">
|
||||
<input class="onecontent_oen_input" type="text" v-model="like" placeholder="搜索订单/商家名/商品名">
|
||||
<text class="onecontent_oen_text" @click="init_fn">搜索</text>
|
||||
</view>
|
||||
<!-- <view class="onecontent_tow">
|
||||
<view ref="uTabs" class="onecontent_tow_item flex-colum" v-for="(item,index) in swipercurrentdata"
|
||||
:key="index" @click="orderswitch(item)">
|
||||
<view :class="swiperCurrent == item.id?'onecontent_tow_itemtexts':'onecontent_tow_itemtext'">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="towcontent flex-between">
|
||||
<view class="towcontentitem" v-if="list.length>0" v-for="(item,index1) in list" :key="index1"
|
||||
@click="eeInfo(item)">
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemtow_imge" :src="item.host_img" mode="aspectFill"></image>
|
||||
<view class="towcontentitemtow_item ">
|
||||
<view class="towcontentitemtow_one">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="towcontentitemtow_tow">
|
||||
销量 {{item.sales}}+
|
||||
</view>
|
||||
<view class="towcontentitemtow_there flex-start">
|
||||
<view class="towcontentitemtow_there_one flex-start">
|
||||
¥<text>{{item.price}}</text>
|
||||
</view>
|
||||
<view class="towcontentitemtow_there_tow">￥{{item.y_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" style="margin-top: 100rpx;width: 100%;" class="flex-colum">
|
||||
<image :src="bgnothave" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<view class="flex-colum" style="width: 100%;">
|
||||
<u-loadmore :status="form.status" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentfixed" @click="clickshopcart">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
model_type: uni.getStorageSync('loginuser').model_type,
|
||||
is_end: false,
|
||||
swiperCurrent: 0,
|
||||
overlayshow: false,
|
||||
swipercurrentdata: [],
|
||||
like: '',
|
||||
list: [],
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.shoppingindex()
|
||||
},
|
||||
onLoad(e) {
|
||||
console.log(e)
|
||||
this.swiperCurrent = e.id
|
||||
},
|
||||
onShow() {
|
||||
// this.shoppingindexgoodsclass()
|
||||
// this.$store.dispatch("actionsclassification");
|
||||
this.shoppingindex()
|
||||
},
|
||||
methods: {
|
||||
async shoppingindexgoodsclass() {
|
||||
let res = await this.api.shoppingindexgoodsclass()
|
||||
this.swipercurrentdata = res
|
||||
},
|
||||
async shoppingindex() {
|
||||
let res = await this.api.shoppingindex({
|
||||
page: this.form.page,
|
||||
like: this.like,
|
||||
classid: this.swiperCurrent
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
init_fn() {
|
||||
this.list = []
|
||||
this.is_end = false
|
||||
this.form.page = 1
|
||||
this.form.status = 'loadmore'
|
||||
this.shoppingindex()
|
||||
},
|
||||
orderswitch(e) {
|
||||
this.swiperCurrent = e.id
|
||||
this.init_fn()
|
||||
},
|
||||
clickshopcart() {
|
||||
uni.pro.navigateTo('shopcart/index')
|
||||
},
|
||||
eeInfo(e) { //查看订单详情
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.contentfixed {
|
||||
position: fixed;
|
||||
background: url(@/static/gwc.png) no-repeat;
|
||||
background-size: cover;
|
||||
bottom: 328rpx;
|
||||
right: 28rpx;
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 10rpx 28rpx;
|
||||
|
||||
.onecontent_oen {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
border-radius: 36rpx;
|
||||
border:1rpx solid var(--bg-color-button);
|
||||
padding-right: 8rpx;
|
||||
|
||||
.onecontent_oen_input {
|
||||
padding-left: 32rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.onecontent_oen_text {
|
||||
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 56rpx;
|
||||
width: 116rpx;
|
||||
height: 56rpx;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontent_tow {
|
||||
padding: 32rpx 0 32rpx 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
|
||||
.onecontent_tow_item:nth-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.onecontent_tow_item {
|
||||
position: relative;
|
||||
margin-left: 60rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
.onecontent_tow_itemtexts {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: var(--bg-color-button);
|
||||
}
|
||||
|
||||
.onecontent_tow_itemtext {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.onecontent_tow_itemtexts::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 19.33rpx;
|
||||
height: 6.66rpx;
|
||||
background: url(https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/my/order/order1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
padding: 0 24rpx;
|
||||
|
||||
.towcontentitem {
|
||||
margin-top: 32rpx;
|
||||
width: 332rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.towcontentitemone {
|
||||
width: 100%;
|
||||
|
||||
.towcontentitemtow_imge {
|
||||
border-top-left-radius: 16rpx;
|
||||
border-top-right-radius: 16rpx;
|
||||
width: 100%;
|
||||
height: 226rpx;
|
||||
}
|
||||
|
||||
.towcontentitemtow_item {
|
||||
padding: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
.towcontentitemtow_one {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.towcontentitemtow_tow {
|
||||
font-size: 22rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.towcontentitemtow_there {
|
||||
margin-top: 14rpx;
|
||||
|
||||
.towcontentitemtow_there_one {
|
||||
text {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
font-size: 4rpx;
|
||||
font-family: SourceHanSansCN-Bold-,
|
||||
SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FC5F69;
|
||||
}
|
||||
|
||||
.towcontentitemtow_there_tow {
|
||||
text-decoration: line-through;
|
||||
margin-left: 10rpx;
|
||||
font-size: 22rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
padding: 40rpx 68rpx;
|
||||
width: 480rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 42rpx;
|
||||
|
||||
.rectone {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow {
|
||||
width: 100%;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.recttow_one {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
border: 2rpx solid #999999;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow_tow {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #333333;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
325
pages/my/address/edit.vue
Normal file
325
pages/my/address/edit.vue
Normal file
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="content_box">
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
联系人
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="text" v-model="form.name" placeholder="请填写收货人姓名" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
联系电话
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="number" v-model="form.mobile" maxlength="11"
|
||||
placeholder="请填写收货人手机号码" />
|
||||
</view>
|
||||
</view>
|
||||
<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
所在地区
|
||||
</view>
|
||||
<view class="content_box_item_tow flex-start">
|
||||
<input type="text" v-model="regionName" disabled="disabled" placeholder="省市区、乡镇等" />
|
||||
<!-- <image class="content_box_itemimage" @click="chooseLocation" src="@/static/address.png" mode="aspectFill">
|
||||
</image> -->
|
||||
</view>
|
||||
</view>
|
||||
</pick-regions>
|
||||
<!-- <view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
所在街道
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="text" v-model="form.name" placeholder="填写街道" />
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
详细地址
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="text" v-model="form.address" placeholder="请填写详细地址" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_box_tow flex-between">
|
||||
<view class="content_box_tow_one">
|
||||
设为默认地址
|
||||
</view>
|
||||
<u-switch v-model="showis_default" size="20" @change="change"></u-switch>
|
||||
</view>
|
||||
<view class="positionfixed flex-center" @click="usereditaddress">
|
||||
保存
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pickRegions from '@/components/pick-regions/pick-regions.vue'
|
||||
export default {
|
||||
components: {
|
||||
pickRegions
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
region: [],
|
||||
showis_default: true,
|
||||
defaultRegionCode: '610112', //默认未央区
|
||||
height: '',
|
||||
form: {
|
||||
regionName: '',
|
||||
type: ''
|
||||
},
|
||||
valueswitch: false
|
||||
};
|
||||
},
|
||||
async onLoad(e) {
|
||||
this.form.id = e.id
|
||||
if (e.type == 1) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '添加地址'
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '修改地址'
|
||||
})
|
||||
let res = await this.api.usereaddressshow({
|
||||
id: this.form.id
|
||||
})
|
||||
console.log(res)
|
||||
if (res) {
|
||||
this.form = res
|
||||
if (res.is_default == 1) {
|
||||
this.showis_default = true
|
||||
} else {
|
||||
this.showis_default = false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.form.type = e.type
|
||||
},
|
||||
onShow() {},
|
||||
watch: {},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
regionName() {
|
||||
// 转为字符串
|
||||
let res = null
|
||||
if (this.region.length == 0) {
|
||||
res = this.form.province + this.form.city + this.form.area
|
||||
} else {
|
||||
res = this.region.map(item => item.name).join(' ')
|
||||
}
|
||||
return res
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.showis_default = e
|
||||
console.log('change', e);
|
||||
},
|
||||
async usereditaddress() {
|
||||
if (this.form.name == null || this.form.name == '') {
|
||||
uni.showToast({
|
||||
title: '请输入姓名',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.mobile == null || this.form.mobile == '') {
|
||||
uni.showToast({
|
||||
title: '请输入电话号码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.province == null || this.form.province == '') {
|
||||
uni.showToast({
|
||||
title: '请选择省，市，区',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.address == null || this.form.address == '') {
|
||||
uni.showToast({
|
||||
title: '请输入详细地址',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
let res = await this.api.usereditaddress({
|
||||
id: this.form.id, //地址ID
|
||||
province: this.form.province, //省
|
||||
city: this.form.city, //市
|
||||
area: this.form.area, //区
|
||||
address: this.form.address, //详细地址
|
||||
name: this.form.name, //姓名
|
||||
mobile: this.form.mobile, //电话
|
||||
lng: this.form.lng, //经度
|
||||
is_default: this.showis_default == true ? 1 : '', //1 默认
|
||||
lat: this.form.lat, //维度
|
||||
type: this.form.type //1 添加 2修改
|
||||
})
|
||||
console.log(res)
|
||||
if (res == 1) {
|
||||
uni.showToast({
|
||||
title: this.form.type == 1 ? '添加成功' : '修改成功',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
handleGetRegion(region) {
|
||||
console.log(111, region)
|
||||
this.region = region
|
||||
this.form.province = region[0].name
|
||||
this.form.city = region[1].name
|
||||
this.form.area = region[2].name
|
||||
|
||||
},
|
||||
chooseLocation() {
|
||||
uni.chooseAddress({
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
this.form.address = res.address
|
||||
this.form.lat = res.latitude
|
||||
this.form.lng = res.longitude
|
||||
this.lnglat = res.latitude + '-' + res.longitude
|
||||
console.log('位置名称：' + res.name);
|
||||
console.log('详细地址：' + res.address);
|
||||
console.log('纬度：' + res.latitude);
|
||||
console.log('经度：' + res.longitude);
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log(e)
|
||||
// uni.getSetting({
|
||||
// success: function(res) {
|
||||
// var statu = res.authSetting;
|
||||
// console.log(statu);
|
||||
// if (!statu['scope.userLocation']) {
|
||||
// console.log(123);
|
||||
// uni.showModal({
|
||||
// title: '是否授权当前位置',
|
||||
// content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
|
||||
// success(tip) {
|
||||
// if (tip.confirm) {
|
||||
// uni.authorize({
|
||||
// scope: 'scope.userLocation',
|
||||
// success:()=> {
|
||||
// this.chooseLocation()
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// title: '授权失败',
|
||||
// icon: 'none',
|
||||
// duration: 1000
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
}
|
||||
})
|
||||
},
|
||||
edit(e) {
|
||||
uni.pro.navigateTo('my/address/edit', e.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 30rpx;
|
||||
|
||||
.content_box {
|
||||
padding-left: 40rpx;
|
||||
background: #FFF;
|
||||
|
||||
.content_box_item {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid #F6F6F6;
|
||||
|
||||
.content_box_item_one {
|
||||
width: 112rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.content_box_item_tow {
|
||||
flex: auto;
|
||||
padding-left: 80rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #CCCCCC;
|
||||
|
||||
input {
|
||||
flex: auto;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
}
|
||||
|
||||
.content_box_itemimage {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_box_tow {
|
||||
margin-top: 24rpx;
|
||||
padding: 34rpx 44rpx;
|
||||
background: #FFF;
|
||||
|
||||
.content_box_tow_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.positionfixed {
|
||||
position: fixed;
|
||||
background: #f6f6f6;
|
||||
width: 90%;
|
||||
bottom: 50rpx;
|
||||
left: 5%;
|
||||
padding: 24rpx 34rpx;
|
||||
text-align: center;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 46rpx;
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
248
pages/my/address/index.vue
Normal file
248
pages/my/address/index.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="contentitem" v-for="(item,index) in list" :key="index" @click.stop="order_fn(item)">
|
||||
<view class="contentitemone flex-start">
|
||||
<view class="contentitemone_textone">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="contentitemone_textyow">
|
||||
{{item.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentitemtow ">
|
||||
{{item.province}}{{item.area}}{{item.city}}{{item.address}}
|
||||
</view>
|
||||
<view class="contentitemthere flex-between">
|
||||
<view class="contentitemthereone flex-start" @click.stop="edit(item)">
|
||||
<u-icon v-if="item.is_default == 1" style="margin-right: 10rpx;" name="checkmark-circle-fill"
|
||||
color="##9397c1" size="18"></u-icon>
|
||||
<view v-else class="contentitemthereonecircle">
|
||||
|
||||
</view>
|
||||
默认地址
|
||||
</view>
|
||||
<view class="contentitemtheretow flex-start">
|
||||
<text @click.stop="edit(item)">编辑</text>
|
||||
<text style="margin-left: 60rpx;" @click.stop="clickdelete(item)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="positionfixed flex-center" @click="add">
|
||||
<u-icon name="plus" color="#FFF" size="14"></u-icon>
|
||||
<view style="margin-left: 20rpx;">添加地址</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" class="flex-colum">
|
||||
<image style="margin-top: 100rpx;" :src="bgnothave" mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />
|
||||
<view :style="{height:height}"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
height: '',
|
||||
is_order: 0,
|
||||
list: [],
|
||||
is_end: false,
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.is_order = e.order
|
||||
},
|
||||
onReachBottom() {
|
||||
this.usermyaddresslist()
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.positionfixed')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = ele.height + 50 + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
onShow() {
|
||||
this.inif()
|
||||
},
|
||||
methods: {
|
||||
async usermyaddresslist() {
|
||||
let res = await this.api.usermyaddresslist({
|
||||
page: this.form.page
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
order_fn(item) {
|
||||
if (this.is_order == 1) {
|
||||
uni.$emit('update', JSON.stringify(item));
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
add() {
|
||||
uni.pro.navigateTo('my/address/edit', {
|
||||
type: 1
|
||||
})
|
||||
},
|
||||
edit(e) {
|
||||
uni.pro.navigateTo('my/address/edit', {
|
||||
type: 2,
|
||||
id: e.id
|
||||
})
|
||||
},
|
||||
inif() {
|
||||
this.list = []
|
||||
this.is_end = false,
|
||||
this.form = {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
this.usermyaddresslist()
|
||||
},
|
||||
async clickdelete(e) {
|
||||
var this_ = this
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认删除该地址吗？',
|
||||
async success(data) {
|
||||
if (data.confirm) {
|
||||
let res = await this_.api.useredeleteaddress({
|
||||
id: e.id
|
||||
})
|
||||
if (res) {
|
||||
this_.inif()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 30rpx;
|
||||
|
||||
.positionfixed {
|
||||
position: fixed;
|
||||
background: #f6f6f6;
|
||||
width: 80%;
|
||||
bottom: 50rpx;
|
||||
left: 10%;
|
||||
padding: 24rpx 34rpx;
|
||||
text-align: center;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 46rpx;
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.contentitem {
|
||||
padding: 32rpx 40rpx;
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.contentitemone {
|
||||
.contentitemone_textone {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.contentitemone_textyow {
|
||||
margin-left: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.contentitemtow {
|
||||
margin-top: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.contentitemtow::after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
margin: 32rpx 0 20rpx 0;
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.contentitemthere {
|
||||
.contentitemthereone {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #5C685D;
|
||||
}
|
||||
|
||||
.contentitemthereonecircle {
|
||||
margin-right: 10rpx;
|
||||
border-radius: 50%;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border: 2rpx solid #666666;
|
||||
}
|
||||
|
||||
.contentitemtheretow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
412
pages/my/index.vue
Normal file
412
pages/my/index.vue
Normal file
@@ -0,0 +1,412 @@
|
||||
<template>
|
||||
<view>
|
||||
<navbar :collapse='false' :Background='Background' :navtitle='navtitle' :navboxshow="navboxshow"
|
||||
@fatherMethod='navfatherMethod'></navbar>
|
||||
<view class="index_box">
|
||||
<image class="index_boximge" :src="userlist.background" mode="aspectFill"></image>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<navigator :url="'/pages/my/setup/index'" class="index_boxone flex-between"
|
||||
:style="[{'padding-top':HeighT.customBar+'px'}]">
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<navigator :url="'/pages/my/setup/index'" class="index_boxone flex-between" style="padding-top:44px;">
|
||||
<!-- #endif -->
|
||||
<view class="index_boxone_one flex-start" v-if="userlist.user">
|
||||
<image :src="userlist.user.avatar" mode="aspectFill"></image>
|
||||
<view class="index_boxone_tow flex-colum-start">
|
||||
<text class="index_boxone_tow_one">{{userlist.user.nickname || "暂无昵称"}}</text>
|
||||
<text class="index_boxone_tow_tow">{{userlist.user.user_id}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-icon name="setting" color="#fff" size="20"></u-icon>
|
||||
</navigator>
|
||||
<view class="onebox">
|
||||
<view class="onebox_one">
|
||||
<view class="onebox_one_text flex-between">
|
||||
<text>我的订单</text>
|
||||
<text @click="order(10)">查看全部</text>
|
||||
</view>
|
||||
<view class="onebox_one_one flex-around">
|
||||
<view class="flex-colum" v-for="(item,index) in userlist.user_order" :key="index"
|
||||
@click="order(index)">
|
||||
<image :src="item.img" mode="aspectFill"></image>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towbox flex-between">
|
||||
<view class="towbox_item flex-start" v-for="(item,index) in userlist.t_user" :key="index"
|
||||
@click="toworder(index)">
|
||||
<image :src="item.img" mode="aspectFill"></image>
|
||||
<view class="flex-colum">
|
||||
<text>{{item.name}}</text>
|
||||
<view v-if="index==0">{{item.balance}}<text>元</text></view>
|
||||
<view v-if="index==1">{{item.card_count}}<text>张</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therebox">
|
||||
<view class="therebox_item flex-between" v-for="(item,index) in userlist.list" :key="index"
|
||||
@click="mobilemobile(item)">
|
||||
<view class="flex-start">
|
||||
<image :src="item.img" mode="aspectFill"></image>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#9b9b9b" size="14"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<bottombbar :valuebbar='4'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navbar from '@/components/navbar.vue'
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
navbar,
|
||||
bottombbar
|
||||
},
|
||||
computed: {
|
||||
HeighT() {
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navtitle: '', //名称
|
||||
navboxshow: '0', //显示
|
||||
Background: 'none',
|
||||
userlist: {
|
||||
user: {
|
||||
avatar: "https://door.sxczgkj.cn//assets/img/avatar.png",
|
||||
nickname: "超掌柜",
|
||||
user_id: 1001,
|
||||
},
|
||||
t_user: [{
|
||||
balance: "0.00",
|
||||
img: "https://door.sxczgkj.cn//apple/qb.png"
|
||||
}, {
|
||||
card_count: "0",
|
||||
img: "https://door.sxczgkj.cn//apple/kx.png"
|
||||
}],
|
||||
list: [{
|
||||
img: "https://door.sxczgkj.cn//apple/kf.png",
|
||||
mobile: "0290102212",
|
||||
name: "联系客服",
|
||||
url: ""
|
||||
}, {
|
||||
img: "https://door.sxczgkj.cn//apple/aq.png",
|
||||
name: "安全密码",
|
||||
url: "my/setup/repairpassword",
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.$store.dispatch("actionsclassification");
|
||||
this.usermy()
|
||||
this.useruserinfo()
|
||||
},
|
||||
methods: {
|
||||
async useruserinfo() {
|
||||
let res = await this.api.useruserinfo() //p判断是否完成手机号
|
||||
uni.cache.set('loginuser', res);
|
||||
},
|
||||
async mobilemobile(e) {
|
||||
switch (e.name) {
|
||||
case '联系客服':
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: e.mobile //打电话
|
||||
});
|
||||
break;
|
||||
case '安全密码':
|
||||
|
||||
if (uni.cache.get('loginuser').userinfo.mobile) {
|
||||
uni.pro.navigateTo(e.url)
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认订单需要获取您的手机号',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/index'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
}
|
||||
break;
|
||||
case '我的地址':
|
||||
uni.pro.navigateTo(e.url)
|
||||
break;
|
||||
}
|
||||
},
|
||||
async usermy() {
|
||||
let res = await this.api.usermy({
|
||||
store_id: uni.cache.get('store_id') // 判断显示哪家的作品,
|
||||
})
|
||||
this.userlist = res
|
||||
console.log(res)
|
||||
},
|
||||
threelist(e) {
|
||||
uni.pro.navigateTo('my/order/index', {
|
||||
e: e
|
||||
})
|
||||
},
|
||||
toworder(e) {
|
||||
if (e == 0) {
|
||||
uni.pro.navigateTo('my/member/memberone', e)
|
||||
} else {
|
||||
uni.pro.navigateTo('my/member/index', {
|
||||
e: e
|
||||
})
|
||||
}
|
||||
},
|
||||
order(e) {
|
||||
switch (e) {
|
||||
case 10:
|
||||
if (uni.cache.get('loginuser').style_type == 2) {
|
||||
uni.pro.navigateTo('mall/order/index', {
|
||||
e: 0
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('my/order/index', {
|
||||
e: 0
|
||||
})
|
||||
}
|
||||
break;
|
||||
case 0:
|
||||
if (uni.cache.get('loginuser').style_type == 2) {
|
||||
uni.pro.navigateTo('mall/order/index', {
|
||||
e: 1
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('my/order/index', {
|
||||
e: 1
|
||||
})
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
if (uni.cache.get('loginuser').style_type == 2) {
|
||||
uni.pro.navigateTo('mall/order/index', {
|
||||
e: 2
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('my/order/index', {
|
||||
e: 2
|
||||
})
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if (uni.cache.get('loginuser').style_type == 2) {
|
||||
uni.pro.navigateTo('mall/order/index', {
|
||||
e: 3
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('my/order/index', {
|
||||
e: 3
|
||||
})
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
if (uni.cache.get('loginuser').style_type == 2) {
|
||||
uni.pro.navigateTo('mall/order/index', {
|
||||
e: 4
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('my/order/index', {
|
||||
e: 4
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.index_box {
|
||||
position: relative;
|
||||
padding: 0 32rpx;
|
||||
width: 100%;
|
||||
height: 502rpx;
|
||||
// background: url(@/static/1.png) no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
.index_boximge {
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.index_boxone {
|
||||
z-index: 9;
|
||||
|
||||
.index_boxone_one {
|
||||
image {
|
||||
z-index: 999;
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.index_boxone_tow {
|
||||
margin-left: 32rpx;
|
||||
height: 100rpx;
|
||||
justify-content: space-around;
|
||||
|
||||
.index_boxone_tow_one {
|
||||
z-index: 9;
|
||||
font-size: 40rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.index_boxone_tow_tow {
|
||||
z-index: 9;
|
||||
font-size: 28rpx;
|
||||
font-family: Segoe UI-Regular, Segoe UI;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.onebox {
|
||||
position: relative;
|
||||
top: 40rpx;
|
||||
|
||||
.onebox_one {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
padding: 32rpx;
|
||||
|
||||
.onebox_one_text{
|
||||
width: 100%;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
text:nth-child(2){
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.onebox_one_one {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.flex-colum {
|
||||
image {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towbox {
|
||||
margin-top: 64rpx;
|
||||
|
||||
.towbox_item {
|
||||
width: 48%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx 24rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.flex-colum {
|
||||
width:50%;
|
||||
margin-left: 28rpx;
|
||||
align-items: flex-start;
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
view {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
|
||||
text {
|
||||
color: #333333;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.therebox {
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 32rpx 32rpx 32rpx;
|
||||
|
||||
.therebox_item {
|
||||
padding-top: 32rpx;
|
||||
|
||||
.flex-start {
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-left: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
179
pages/my/member/index.vue
Normal file
179
pages/my/member/index.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="onecontentone">
|
||||
我的会员卡<text v-if="list.length!=0">({{list.length}})</text>
|
||||
</view>
|
||||
<view class="flex-colum">
|
||||
<view class="towcontentitem" v-if="list.length>0" v-for="(item,index) in list" :key="index"
|
||||
@click="eeInfo(item)">
|
||||
<image class="towcontentitemimage"
|
||||
src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/my/recharge.png" mode="aspectFill"></image>
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemoneimage" :src="item.store_avatar" mode="aspectFill"></image>
|
||||
<text class="towcontentitemonetext" style="color: #333333;">{{item.store_title}}</text>
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-between">
|
||||
<text class="towcontentitemtowetext" style="color:#333333;">{{item.vip_number}}</text>
|
||||
<text>{{item.end_time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" class="flex-colum">
|
||||
<image :src="bgnothave" mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgnothave:uni.getStorageSync('bgnothave'),
|
||||
list: [],
|
||||
is_end: false,
|
||||
nickname: uni.cache.get('loginuser').userinfo.nickname,
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.userusercarlist()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.userusercarlist()
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async userusercarlist() {
|
||||
let res = await this.api.userusercarlist({
|
||||
page: this.form.page,
|
||||
store_id:uni.cache.get('store_id')
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
|
||||
}
|
||||
},
|
||||
eeInfo(e) {
|
||||
uni.pro.navigateTo('my/member/memberinfo',{
|
||||
id: e.vip_id,
|
||||
lang:1
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.content {
|
||||
border-top: 16rpx solid #f7f7f7;
|
||||
padding: 28rpx;
|
||||
padding-bottom: 40rpx;
|
||||
|
||||
.flex-colum_image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
text {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontentone {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.flex-colum {
|
||||
.towcontentitem {
|
||||
margin-top: 22rpx;
|
||||
width: 96%;
|
||||
position: relative;
|
||||
height: 224rpx;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.towcontentitemimage {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.towcontentitemone {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
.towcontentitemoneimage {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.towcontentitemonetext {
|
||||
width: 60%;
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 18rpx;
|
||||
padding:0 32rpx;
|
||||
// margin-top: 52rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
399
pages/my/member/memberinfo.vue
Normal file
399
pages/my/member/memberinfo.vue
Normal file
@@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="towcontentitem">
|
||||
<image class="towcontentitemimage" :src="data.img" mode="aspectFill"></image>
|
||||
<view class="fourcontentitemabsolute">
|
||||
<!-- 年卡会员 -->
|
||||
</view>
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemoneimage" :src="data.store_avatar" mode="aspectFill"></image>
|
||||
<view class="towcontentitemonetext flex-colum-start">
|
||||
<text class="towcontentitemonetextone">{{data.title}}</text>
|
||||
<text class="towcontentitemonetexttow">{{data.show}}</text>
|
||||
</view>
|
||||
<view class="towcontentitemoneabsolute" @click="overlayshow = true">
|
||||
加购
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentitemprogress">
|
||||
{{Number(data.user_sec_y_frequ)}}/{{Number(data.user_sec_z_frequ)}} 次
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-between">
|
||||
<text class="towcontentitemtowetext">{{data.vip_number || ''}}</text>
|
||||
<text class="towcontentitemtowetext">{{data.end_time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontentitem">
|
||||
<view class="therecontentitemtext">
|
||||
会员详情
|
||||
</view>
|
||||
<view class="therecontentitemone">
|
||||
<!-- <view class="therecontentitemoneiten flex-between" @click="order">
|
||||
<text class="therecontentitemoneitentetxt">账单明细</text>
|
||||
<u-icon name="arrow-right" color="#808080" size="18"></u-icon>
|
||||
</view> -->
|
||||
<view class="therecontentitemoneiten flex-between" @click="overlayshow = true">
|
||||
<text class="therecontentitemoneitentetxt">订单明细</text>
|
||||
<u-icon name="arrow-right" color="#808080" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow" @click="overlayshow = false">
|
||||
<view class="warp">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-center">
|
||||
<view>{{data.store_title}}</view>
|
||||
<u-icon @click="overlayshow = false" class="onerecticon" name="backspace" color="#000000"
|
||||
size="28"></u-icon>
|
||||
</view>
|
||||
<view class="towrect">
|
||||
商品
|
||||
</view>
|
||||
<view class="thererect flex-between">
|
||||
<view class="thererectone">
|
||||
{{data.title}}
|
||||
</view>
|
||||
<view class="thererecttow">
|
||||
<text>￥</text>{{data.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourrect flex-between">
|
||||
<view class="fourrectone">
|
||||
<text>共计:</text>￥{{data.price}}
|
||||
</view>
|
||||
<view class="fourrecttow" @tap="$u.debounce(showpopupclick,1000)">
|
||||
立即购买
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
overlayshow: false,
|
||||
numberbox: "",
|
||||
data: {}
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
console.log(e)
|
||||
let res = await this.api.reservationvipdetail({
|
||||
id: e.id
|
||||
})
|
||||
this.data = res
|
||||
console.log(this.data)
|
||||
},
|
||||
methods: {
|
||||
async showpopupclick() {
|
||||
try {
|
||||
let res = await this.api.useropenuserseccrd({
|
||||
id: this.data.id
|
||||
}) //判断是否支付成功
|
||||
if (res) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.payAppId, // 微信支付商户号
|
||||
timeStamp: res.payTimeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.paynonceStr, // 随机字符串
|
||||
package: res.payPackage, // 固定值
|
||||
signType: res.paySignType, //固定值
|
||||
paySign: res.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: "/my/member/index?e=" + 1,
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
uni.redirectTo({
|
||||
url: "/my/member/index?e=" + 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
order(e) {
|
||||
uni.pro.navigateTo('my/order/index', {
|
||||
e: 0
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.towcontentitem {
|
||||
margin-top: 22rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentitemabsolute {
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 6rpx 28rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 6rpx 12rpx rgba(255, 255, 255, 0.19);
|
||||
background: linear-gradient(NaNdeg, #4A4A4A 0%, #919191 100%);
|
||||
border-radius: 0px 12rpx 0px 12rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.towcontentitemimage {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.towcontentitemone {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
.towcontentitemoneimage {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.towcontentitemoneabsolute {
|
||||
position: absolute;
|
||||
padding: 8rpx 44rpx;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(130deg, #F4AE46 0%, #EE9437 100%);
|
||||
box-shadow: 0px 4rpx 8rpx 2rpx rgba(243, 169, 67, 0.37);
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
.towcontentitemonetext {
|
||||
width: 80%;
|
||||
height: 76rpx;
|
||||
margin-left: 16rpx;
|
||||
|
||||
.towcontentitemonetextone {
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
.towcontentitemonetexttow {
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width:400rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemprogressa {
|
||||
padding: 8rpx 44rpx;
|
||||
width: 50%;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 54rpx;
|
||||
}
|
||||
|
||||
.towcontentitemprogress {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
margin-top: 24rpx;
|
||||
border-radius: 28rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 68rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontentitem {
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx 32rpx 0 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
|
||||
.therecontentitemtext {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentitemone {
|
||||
.therecontentitemoneiten:nth-child(1) {
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
.therecontentitemoneiten {
|
||||
padding: 32rpx 0;
|
||||
border-top: 1px solid #F7F7F7;
|
||||
|
||||
.therecontentitemoneitentetxt {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 48rpx;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towrect {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.thererect {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.thererectone {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.thererecttow {
|
||||
text {
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Heavy,
|
||||
PingFang SC;
|
||||
font-weight: 800;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fourrect {
|
||||
margin-top: 44rpx;
|
||||
|
||||
.fourrectone {
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
font-size: 40rpx;
|
||||
font-family: PingFang SC-Bold,
|
||||
PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FC5F69;
|
||||
}
|
||||
|
||||
.fourrecttow {
|
||||
background: linear-gradient(143deg, #8689AF 0%, #494A5F 100%);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
564
pages/my/member/memberinfos.vue
Normal file
564
pages/my/member/memberinfos.vue
Normal file
@@ -0,0 +1,564 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="towcontentitem">
|
||||
<image class="towcontentitemimage" :src="data.img" mode="aspectFill"></image>
|
||||
<view class="towcontentitemone flex-start">
|
||||
<view class="towcontentitemonetext flex-colum-start">
|
||||
<text class="towcontentitemonetextone" style="color: #fff;">{{data.title}}</text>
|
||||
<text class="towcontentitemonetexttow" style="color: #fff;">{{data.show}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-between">
|
||||
<text class="towcontentitemtowetext" style="color: #fff;">￥{{data.price}}<text
|
||||
class="towcontentitemtowetexts" style="color: #fff;">/{{data.frequ}}次</text></text>
|
||||
<text class="towcontentitemtowetext_s" style="color: #fff;">{{data.end_time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontentitem">
|
||||
<view class="therecontentitemtext">
|
||||
商品
|
||||
</view>
|
||||
<view class="therecontentitemtextitem flex-between">
|
||||
<view class="therecontentitemtextitem_left">
|
||||
{{data.title}}
|
||||
</view>
|
||||
<view class="therecontentitemtextitem_right">
|
||||
￥{{data.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontentitemtextitemt_one">
|
||||
{{data.show}}
|
||||
</view>
|
||||
<view class="therecontentitemtext" style="margin-top: 14rpx;">
|
||||
权益
|
||||
</view>
|
||||
<view class="therecontentitemtextitemt_one">
|
||||
<text style="color: #333333;">{{data.frequ}}次</text>{{data.show}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontentitem">
|
||||
<view class="therecontentitem_tow flex-start">
|
||||
手机号码<text>{{data.mobile}}</text>
|
||||
</view>
|
||||
<view class="therecontentitem_tows">
|
||||
该号码不会提供给商家，仅用于接收平台通知信息
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontentitem">
|
||||
<view class="therecontentitemtext">
|
||||
使用说明
|
||||
</view>
|
||||
<view class="therecontentitemtextthere" style="margin-top: 14rpx;margin-bottom: 30rpx;"
|
||||
v-html="data.notice">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_one flex-start">
|
||||
<view class="fixedview_oneone">
|
||||
应付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow flex-colum-start">
|
||||
<text>￥{{data.price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
|
||||
立即付款
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow" @click="overlayshow = false">
|
||||
<view class="warp">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-center">
|
||||
<view>【洗剪吹】新娘造型</view>
|
||||
<u-icon @click="overlayshow = false" class="onerecticon" name="backspace" color="#000000"
|
||||
size="28"></u-icon>
|
||||
</view>
|
||||
<view class="towrect">
|
||||
商品
|
||||
</view>
|
||||
<view class="thererect flex-between">
|
||||
<view class="thererectone">
|
||||
年卡会员
|
||||
</view>
|
||||
<view class="thererecttow">
|
||||
<text>￥</text>300
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourrect flex-between">
|
||||
<view class="fourrectone">
|
||||
<text>共计:</text>￥300
|
||||
</view>
|
||||
<view class="fourrecttow">
|
||||
立即购买
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
overlayshow: false,
|
||||
numberbox: "",
|
||||
data: {
|
||||
mobile: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
async onLoad(e) {
|
||||
console.log(e)
|
||||
let res = await this.api.reservationvipdetail({
|
||||
id: e.id
|
||||
})
|
||||
this.data = res
|
||||
this.data.notice = res.notice.replace(/\<img/g, '<img style="max-width:100%;height:auto" ');
|
||||
this.data.mobile = uni.cache.get('loginuser').userinfo.mobile
|
||||
},
|
||||
async onShow() {
|
||||
let res = await this.api.useruserinfo()
|
||||
uni.cache.set('loginuser', res);
|
||||
},
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
methods: {
|
||||
async showpopupclick() {
|
||||
if (!uni.cache.get('loginuser').userinfo.mobile) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认订单需要获取您的手机号',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/index'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
try {
|
||||
let res = await this.api.useropenuserseccrd({
|
||||
id: this.data.id
|
||||
}) //判断是否支付成功
|
||||
if (res) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.payAppId, // 微信支付商户号
|
||||
timeStamp: res.payTimeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.paynonceStr, // 随机字符串
|
||||
package: res.payPackage, // 固定值
|
||||
signType: res.paySignType, //固定值
|
||||
paySign: res.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: "/my/member/index?e=" + 1,
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
uni.redirectTo({
|
||||
url: "/my/member/index?e=" + 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
order(e) {
|
||||
uni.pro.navigateTo('my/order/index', {
|
||||
e: 0
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.towcontentitem {
|
||||
margin-top: 22rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentitemabsolute {
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 6rpx 28rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 6rpx 12rpx rgba(255, 255, 255, 0.19);
|
||||
background: linear-gradient(NaNdeg, #4A4A4A 0%, #919191 100%);
|
||||
border-radius: 0px 12rpx 0px 12rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.towcontentitemimage {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.towcontentitemone {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
.towcontentitemoneimage {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
|
||||
.towcontentitemoneabsolute {
|
||||
position: absolute;
|
||||
padding: 8rpx 44rpx;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(130deg, #F4AE46 0%, #EE9437 100%);
|
||||
box-shadow: 0px 4rpx 8rpx 2rpx rgba(243, 169, 67, 0.37);
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
.towcontentitemonetext {
|
||||
margin-left: 16rpx;
|
||||
|
||||
.towcontentitemonetextone {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
.towcontentitemonetexttow {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemprogressa {
|
||||
padding: 8rpx 44rpx;
|
||||
width: 50%;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 54rpx;
|
||||
}
|
||||
|
||||
.towcontentitemprogress {
|
||||
margin-top: 24rpx;
|
||||
background: linear-gradient(318deg, #6E6E6E 0%, #404040 100%);
|
||||
box-shadow: 0px 4rpx 8rpx 2rpx #8D8D8D;
|
||||
border-radius: 28rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 68rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
.towcontentitemtowetext {
|
||||
font-size: 30rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
|
||||
.towcontentitemtowetexts {
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtowetext_s {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.therecontentitem {
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx 32rpx 0 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.therecontentitem_tow {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
|
||||
text {
|
||||
margin-left: 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontentitem_tows {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.therecontentitemtext {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentitemtextthere {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.therecontentitemtextitem {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.therecontentitemtextitem_left {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentitemtextitem_right {
|
||||
font-size: 32rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontentitemtextitemt_one {
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1rpx dashed #F7F7F7;
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 48rpx;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towrect {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.thererect {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.thererectone {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.thererecttow {
|
||||
text {
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Heavy,
|
||||
PingFang SC;
|
||||
font-weight: 800;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fourrect {
|
||||
margin-top: 44rpx;
|
||||
|
||||
.fourrectone {
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
font-size: 40rpx;
|
||||
font-family: PingFang SC-Bold,
|
||||
PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FC5F69;
|
||||
}
|
||||
|
||||
.fourrecttow {
|
||||
background: linear-gradient(143deg, #8689AF 0%, #494A5F 100%);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
339
pages/my/member/memberone.vue
Normal file
339
pages/my/member/memberone.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="towcontentitem">
|
||||
<image class="towcontentitemimage" src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/my/recharges.png"
|
||||
mode="widthFix"></image>
|
||||
<!-- <view class="fourcontentitemabsolute">
|
||||
{{memberlist.store_title}}
|
||||
</view> -->
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemoneimage" :src="memberlist.store_avatar" mode="aspectFill"></image>
|
||||
<view class="towcontentitemonetext flex-colum-start">
|
||||
<text class="towcontentitemonetextone">{{nickname || '暂无昵称'}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="towcontentitemprogress">
|
||||
可用余额:{{memberlist.money || '0.00'}}
|
||||
<!-- <text style="font-size: 16rpx; color:#000 ; margin-left: 10rpx;">冻结金额:{{memberlist.freeze_money}}</text> -->
|
||||
<!-- <view class="towcontentitemoneabsolute">
|
||||
加购
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-between">
|
||||
<text class="towcontentitemtowetext">{{memberlist.vip_number}}</text>
|
||||
<!-- <text class="towcontentitemtowetext" style="color: #fff;">保洁清洗卡</text> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontent">
|
||||
<input type="number" v-model="amount" placeholder="自定义金额">
|
||||
</view>
|
||||
<view class="fourcontent flex-start">
|
||||
<view class="fourcontentlnage" v-for="(item,index) in listdata" :key="index">
|
||||
<view class="flex-colum" :class="index == inputshow?'fourcontentitems':'fourcontentitem'"
|
||||
@click="clickinput(item,index)">
|
||||
<text>充{{item.amount}}元</text>
|
||||
<text style="margin-top: 10rpx;">送{{item.deliver}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent" @click="userbalancerechangesub">
|
||||
立即充值
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nickname: uni.cache.get('loginuser').userinfo.nickname,
|
||||
inputshow: 0,
|
||||
memberlist: {},
|
||||
listdata: [],
|
||||
amount: '',
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
// console.log(e)
|
||||
// this.memberlist = e
|
||||
this.useruserbalance()
|
||||
},
|
||||
onShow() {
|
||||
this.userbalancerechange()
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async useruserbalance(){
|
||||
let res = await this.api.useruserbalance({
|
||||
store_id: uni.cache.get('store_id') // 判断显示哪家的作品,
|
||||
})
|
||||
this.memberlist = res
|
||||
},
|
||||
async userbalancerechange() {
|
||||
let res = await this.api.userbalancerechange({
|
||||
store_id: uni.cache.get('store_id') // 判断显示哪家的作品,
|
||||
})
|
||||
this.listdata = res
|
||||
this.amount = res[0].amount
|
||||
},
|
||||
async userbalancerechangesub() {
|
||||
if (this.amount == null || this.amount == '') {
|
||||
uni.showToast({
|
||||
title: '金额不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
let res = await this.api.userbalancerechangesub({
|
||||
amount: this.amount,
|
||||
store_id: this.memberlist.store_id
|
||||
})
|
||||
if (res) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.payAppId, // 微信支付商户号
|
||||
timeStamp: res.payTimeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.paynonceStr, // 随机字符串
|
||||
package: res.payPackage, // 固定值
|
||||
signType: res.paySignType, //固定值
|
||||
paySign: res.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.navigateBack()
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
clickinput(a, b) {
|
||||
console.log(a, b)
|
||||
this.inputshow = b
|
||||
this.amount = a.amount
|
||||
},
|
||||
eeInfo(e) {
|
||||
uni.pro.navigateTo('my/member/memberinfo', {
|
||||
id: e,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.towcontentitem {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentitemabsolute {
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 6rpx 28rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 6rpx 12rpx rgba(255, 255, 255, 0.19);
|
||||
background: linear-gradient(NaNdeg, #4A4A4A 0%, #919191 100%);
|
||||
border-radius: 0px 12rpx 0px 12rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.towcontentitemimage {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.towcontentitemone {
|
||||
margin-top: 42rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
.towcontentitemoneimage {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.towcontentitemonetext {
|
||||
height: 76rpx;
|
||||
margin-left: 16rpx;
|
||||
|
||||
.towcontentitemonetextone {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
.towcontentitemonetexttow {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemprogressa {
|
||||
padding: 8rpx 44rpx;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 54rpx;
|
||||
}
|
||||
|
||||
.towcontentitemprogress {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 24rpx;
|
||||
border-radius: 28rpx;
|
||||
font-size: 32rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
|
||||
.towcontentitemoneabsolute {
|
||||
position: absolute;
|
||||
padding: 0 44rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(130deg, #F4AE46 0%, #EE9437 100%);
|
||||
box-shadow: 0px 4rpx 8rpx 2rpx rgba(243, 169, 67, 0.37);
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 42rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
margin-top: 32rpx;
|
||||
position: relative;
|
||||
padding: 22rpx 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
|
||||
input {
|
||||
padding-left: 30rpx;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 32rpx;
|
||||
transform: translateY(-50%);
|
||||
content: '￥';
|
||||
display: inline-block;
|
||||
width: 28rpx;
|
||||
height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
.fourcontentlnage {
|
||||
width: 33.33%;
|
||||
|
||||
.fourcontentitem {
|
||||
margin: 24rpx 10rpx;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid #333333;
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fourcontentitems {
|
||||
margin: 24rpx 10rpx;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
border-radius: 8rpx;
|
||||
background: var(--bg-color-button);
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fivecontent {
|
||||
margin-top: 62rpx;
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
background: var(--bg-color-button);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
425
pages/my/order/applylrefund.vue
Normal file
425
pages/my/order/applylrefund.vue
Normal file
@@ -0,0 +1,425 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="boxcontent">
|
||||
<u-steps :current="datalist.status.status_b" dot direction="column">
|
||||
<u-steps-item v-for="(item,index) in datalist.status.refund" :key="index" :title="item"></u-steps-item>
|
||||
</u-steps>
|
||||
</view>
|
||||
<view class="onecontent" style="margin-top: 32rpx;">
|
||||
<view class="onecontentone_one">
|
||||
退款信息
|
||||
</view>
|
||||
<view class="onecontentone_otow flex-between" @click="detailsInfo(datalist.store_service_id)">
|
||||
<image :src="datalist.order_img" mode="aspectFill"></image>
|
||||
<view class="flex-colum-start">
|
||||
<view class="onecontentone">
|
||||
{{datalist.order_title}}
|
||||
</view>
|
||||
<view class="onecontenttow">
|
||||
<view class="onecontenttowabsolute">
|
||||
x{{datalist.number}}
|
||||
</view>
|
||||
<text style="font-size:28rpx;">¥</text>{{datalist.order_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentone_item flex-between">
|
||||
<view class="onecontentone_itemone">
|
||||
退款原因
|
||||
</view>
|
||||
<view class="onecontentone_itemtow">
|
||||
{{datalist.reason}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentone_item flex-between">
|
||||
<view class="onecontentone_itemone">
|
||||
退款金额
|
||||
</view>
|
||||
<view class="onecontentone_itemtow">
|
||||
{{datalist.order_price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentone_item flex-between">
|
||||
<view class="onecontentone_itemone">
|
||||
申请件数
|
||||
</view>
|
||||
<view class="onecontentone_itemtow">
|
||||
{{datalist.number}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentone_item flex-between">
|
||||
<view class="onecontentone_itemone">
|
||||
申请时间
|
||||
</view>
|
||||
<view class="onecontentone_itemtow">
|
||||
{{datalist.createtime}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentone_item flex-between">
|
||||
<view class="onecontentone_itemone">
|
||||
退款编号
|
||||
</view>
|
||||
<view class="onecontentone_itemtow flex-start">
|
||||
{{datalist.out_trade_no}}
|
||||
<text class="therecontentfive_box" @click="copy(datalist.out_trade_no)">复制</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between" v-if="datalist.status.status == 0 || datalist.status.status == 2">
|
||||
<view class="fixedview_one flex-start">
|
||||
<!-- <view class="fixedview_oneone">
|
||||
应付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>11
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="fixedview_tow" @click="cancelrefund">
|
||||
取消退款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
height: '',
|
||||
datalist: {
|
||||
status: {
|
||||
status_b: '',
|
||||
status: ''
|
||||
}
|
||||
},
|
||||
order_id: ""
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
this.order_id = e.id
|
||||
try {
|
||||
let res = await this.api.orderrefunddetail({
|
||||
order_id: this.order_id
|
||||
})
|
||||
if (res) {
|
||||
this.datalist = res
|
||||
}
|
||||
} catch (e) {}
|
||||
// this.generate()
|
||||
},
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
methods: {
|
||||
detailsInfo(e) { //查看订单详情
|
||||
uni.pro.navigateTo('order/orderInfo', {
|
||||
id: e,
|
||||
})
|
||||
},
|
||||
copy(value) {
|
||||
//提示模板
|
||||
uni.setClipboardData({
|
||||
data: value, //要被复制的内容
|
||||
success: () => { //复制成功的回调函数
|
||||
uni.showToast({
|
||||
title: '复制成功'
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
async orderorderrefundcancel() {
|
||||
let res = await this.api.orderorderrefundcancel({
|
||||
order_id: this.datalist.order_id
|
||||
})
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: '成功取消退款',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/order/index?e=0'
|
||||
});
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
cancelrefund() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定取消退款吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.orderorderrefundcancel()
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.index {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.boxcontent {
|
||||
padding: 24rpx 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentone_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontentone_otow {
|
||||
margin-top: 32rpx;
|
||||
|
||||
image {
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
}
|
||||
|
||||
.flex-colum-start {
|
||||
flex: auto;
|
||||
margin-left: 20rpx;
|
||||
height: 176rpx;
|
||||
justify-content: space-around;
|
||||
|
||||
.onecontentone {
|
||||
width: 400rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
position: relative;
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
font-size: 40rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
|
||||
.onecontenttowabsolute {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontentone_item {
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
.onecontentone_itemone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontentone_itemtow {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
|
||||
.therecontentfive_box {
|
||||
padding: 6rpx 10rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
background: #FFFFFF;
|
||||
margin-left: 6rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #D5D5D5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: linear-gradient(143deg, #8689AF 0%, #494A5F 100%);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.buoot {
|
||||
margin: 40rpx auto;
|
||||
width: 80%;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(115deg, #7E81A5 0%, #4D4E64 100%);
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.therecontentone {
|
||||
width: 100%;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.therecontentone_one {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentone_text {
|
||||
flex: auto;
|
||||
margin-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fourcontent_items {
|
||||
position: relative;
|
||||
margin-top: 16rpx;
|
||||
margin-left: 20rpx;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
background: #f9f9f9;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
.fourcontent_item {
|
||||
position: relative;
|
||||
margin-top: 16rpx;
|
||||
margin-left: 20rpx;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
image {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.fourcontent_itemtext {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
right: 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entowakst {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentfive_box {
|
||||
padding: 6rpx 10rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
background: #FFFFFF;
|
||||
margin-left: 6rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #D5D5D5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
838
pages/my/order/cporderinfo.vue
Normal file
838
pages/my/order/cporderinfo.vue
Normal file
@@ -0,0 +1,838 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="onecontent">
|
||||
<view class="onecontentone flex-start">
|
||||
<image class="onecontentone_image" :src="listdata.img" mode="aspectFill"></image>
|
||||
<view class="onecontentone_one flex-colum-start">
|
||||
<text class="onecontentone_one_top">{{listdata.title}}</text>
|
||||
<view class="onecontentone_one_view"><text>¥</text>{{listdata.price}}</view>
|
||||
<!-- <view class="onecontentone_one_ts" @click="infoshow = true">
|
||||
查看详情
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="onecontenttow ">
|
||||
<view class="onecontenttowone flex-start">
|
||||
<view class="onecontenttowone_one">
|
||||
预约时间<text>（必填）</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttowtow flex-between">
|
||||
<view class="onecontenttowtow_item flex-between">
|
||||
<view class=" flex-colum" v-for="(item,index) in reservationlist" :key="index"
|
||||
:class="reservationshow == index ? 'onecontenttowtow_item_ones':'onecontenttowtow_item_one'"
|
||||
@click="reservation(item,index)">
|
||||
<text class="onecontenttowtow_item_one_textone">{{item.week}}</text>
|
||||
<text class="onecontenttowtow_item_one_texttow">{{item.date.slice(5,10)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttowtow_left flex-colum" @click="calendarshow = true">
|
||||
<u-icon name="calendar" color="#b4b4b4" size="20"></u-icon>
|
||||
<text class="onecontenttowtow_lefttext">选择</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttowthere flex-start">
|
||||
<view v-for="(item,index) in 14" :key="index" @click="clicktime(item,index)"
|
||||
:class="timeshow == index?'onecontenttowthere_items':'onecontenttowthere_item'">
|
||||
10:00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttere">
|
||||
<view class="onecontentterewone flex-start">
|
||||
<view class="onecontenttereone_one">
|
||||
发型师
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentterewtow flex-start">
|
||||
<view class="onecontentterewtow_item flex-colum" v-for="(item,index) in 1">
|
||||
<image src="@/static/logo.png" mode="aspectFill"></image>
|
||||
<text>John</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="introduction">
|
||||
<view class="introduction_one">
|
||||
【服务简介}
|
||||
</view>
|
||||
<view class="introduction_yow" v-html="listdata.details">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="onecontentfour">
|
||||
<view class="onecontentfourone flex-start">
|
||||
<view class="onecontentfourone_one">
|
||||
备注
|
||||
</view>
|
||||
</view>
|
||||
<u--textarea v-model="textarea" placeholder="请输入内容" autoHeight></u--textarea>
|
||||
</view> -->
|
||||
<u-overlay :show="infoshow" @click="infoshow = false">
|
||||
<view class="infowarp">
|
||||
<view class="inforect" @tap.stop>
|
||||
<view class="onerect flex-start">
|
||||
<view>服务详情</view>
|
||||
<u-icon @click="infoshow = false" class="onerecticon" name="backspace" color="#000000"
|
||||
size="28"></u-icon>
|
||||
</view>
|
||||
<view class="infotowrect flex-start">
|
||||
<image src="@/static/logo.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="infothererect flex-colum-start">
|
||||
<view class="infothererect_one">
|
||||
【洗剪吹】新娘造型
|
||||
</view>
|
||||
<view class="infothererect_one">
|
||||
¥120
|
||||
</view>
|
||||
</view>
|
||||
<view class="infofourrect">
|
||||
<view class="infofourrect_one">
|
||||
【服务简介
|
||||
</view>
|
||||
<view class="infofourrect_yow">
|
||||
烫发、编发、洗头、定型。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
<u-overlay :show="overlayshow" @click="overlayshow = false">
|
||||
<view class="warp">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-start">
|
||||
<image class="onecontentone_image" :src="listdata.img" mode="aspectFill"></image>
|
||||
<view class="nonecontentone_view">{{listdata.title}}</view>
|
||||
<view class="onerecticon">
|
||||
<u-icon @click="overlayshow = false" name="backspace" color="#000000" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="towrect">
|
||||
<view class="towrect_one">
|
||||
预约时间：2023-06-16
|
||||
</view>
|
||||
<view class="towrect_tow">
|
||||
<text>10:00</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="thererect flex-between">
|
||||
<view class="thererect_one">
|
||||
预约服务
|
||||
</view>
|
||||
<view class="thererect_tow">
|
||||
<u-number-box v-model="numberbox" button-size="24" color="#ffffff" bgColor="#9397c1"
|
||||
iconStyle="color: #fff" integer @change="numberboxchange"></u-number-box>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="fuorrect flex-between">
|
||||
<view class="fuorrect_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="fuorrect_tow">
|
||||
¥{{listdata.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fvirect flex-center" @click="overlayshowclick">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
<u-calendar mode="single" @confirm="confirm" :show="calendarshow" @close="calendarshow = false"></u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
overlayshow: false,
|
||||
infoshow: false,
|
||||
numberbox: "",
|
||||
height: '',
|
||||
timeshow: '',
|
||||
textarea: '',
|
||||
reservationshow: 0,
|
||||
calendarshow: false,
|
||||
reservationlist: [],
|
||||
inifid: '',
|
||||
listdata: {}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.inifid = e.id
|
||||
this.confirm()
|
||||
this.reservationdetail()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
methods: {
|
||||
async reservationdetail() {
|
||||
let res = await this.api.reservationdetail({
|
||||
id: this.inifid
|
||||
})
|
||||
this.listdata = res
|
||||
this.listdata.details = res.details.replace(/\<img/g, '<img style="max-width:100%;height:auto" ');
|
||||
console.log(this.listdata)
|
||||
},
|
||||
reservation(a, b) {
|
||||
this.reservationshow = b
|
||||
console.log(a, b)
|
||||
},
|
||||
clicktime(a, b) {
|
||||
this.timeshow = b
|
||||
console.log(a, b)
|
||||
},
|
||||
numberboxchange(e) {
|
||||
console.log('当前值为: ' + e.value)
|
||||
},
|
||||
async overlayshowclick() {
|
||||
let res = await this.api.useruserinfo() //p判断是否完成手机号
|
||||
uni.cache.set('loginuser', res);
|
||||
this.overlayshow = false
|
||||
if (res.userinfo.mobile) {
|
||||
uni.pro.navigateTo('order/confirm', {
|
||||
id: this.inifid
|
||||
})
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认订单需要获取您的手机号',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/index'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
confirm(e) {
|
||||
if (e) {
|
||||
this.calendarshow = false
|
||||
console.log(new Date(e[0]));
|
||||
var now = new Date(e[0]);
|
||||
} else {
|
||||
//获取当前年月日
|
||||
var now = new Date();
|
||||
// var year = now.getFullYear(); //得到年份
|
||||
// var month = now.getMonth() + 1; //得到月份
|
||||
// var date = now.getDate(); //得到日期
|
||||
// data = year + "年" + month + "月" + date + "日";
|
||||
}
|
||||
this.reservationlist = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
var date = new Date(now.getTime() + i * 24 * 3600 * 1000);
|
||||
var year = date.getFullYear();
|
||||
var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1);
|
||||
var day = (date.getDate()) > 9 ? (date.getDate()) : '0' + (date.getDate());
|
||||
var dt2 = new Date(now.getTime() + i * 24 * 3600 * 1000);
|
||||
var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
|
||||
// var weekDays = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
|
||||
this.reservationlist.push({
|
||||
date: year + "-" + month + "-" + day,
|
||||
// date: month + "-" + day,
|
||||
// day: day,
|
||||
// weekday: weekDays[dt2.getDay()],
|
||||
week: weekDay[dt2.getDay()],
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
/deep/ .mystyle {
|
||||
width: 100% !important;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.index {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentone {
|
||||
flex-wrap: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
|
||||
.onecontentone_image {
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.nonecontentone_view {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.onecontentone_one {
|
||||
position: relative;
|
||||
justify-content: space-evenly;
|
||||
flex: 1;
|
||||
margin-left: 24rpx;
|
||||
height: 176rpx;
|
||||
|
||||
.onecontentone_one_ts {
|
||||
padding: 8rpx 22rpx;
|
||||
position: absolute;
|
||||
top: 70%;
|
||||
transform: translateY(-50%);
|
||||
right: 0;
|
||||
background: #F7F7F7;
|
||||
border-radius: 28rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.onecontentone_one_top {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onecontentone_one_view {
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
font-size: 40rpx;
|
||||
font-family: SourceHanSansCN-Bold-,
|
||||
SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontenttowone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 24rpx;
|
||||
background: #1A1A1A;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontenttowone {
|
||||
.onecontenttowone_one {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
|
||||
text {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttowtow {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.onecontenttowtow_item {
|
||||
flex: 1;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.onecontenttowtow_item_one:nth-child(1) {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.onecontenttowtow_item_one {
|
||||
padding: 6rpx;
|
||||
|
||||
.onecontenttowtow_item_one_textone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontenttowtow_item_one_texttow {
|
||||
margin-top: 5rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttowtow_item_ones {
|
||||
padding: 6rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #1A1A1A;
|
||||
|
||||
.onecontenttowtow_item_one_textone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.onecontenttowtow_item_one_texttow {
|
||||
margin-top: 5rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttowtow_left {
|
||||
border-left: 1rpx solid #f9f9f9;
|
||||
background: #FFFFFF;
|
||||
padding-left: 24rpx;
|
||||
box-shadow: -2rpx 0px 4rpx 2rpx rgba(193, 193, 193, 0.09);
|
||||
|
||||
.onecontenttowtow_lefttext {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttowthere {
|
||||
.onecontenttowthere_item {
|
||||
width: 20%;
|
||||
margin: 16rpx 2.5%;
|
||||
text-align: center;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #F7F7F7;
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.onecontenttowthere_items {
|
||||
width: 20%;
|
||||
margin: 16rpx 2.5%;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid var(--bg-color-buttontow);
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: var(--bg-color-buttontow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttere {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentterewone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 24rpx;
|
||||
background: #1A1A1A;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontentterewone {
|
||||
.onecontenttereone_one {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
|
||||
text {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.onecontentterewtow {
|
||||
|
||||
|
||||
.onecontentterewtow_item {
|
||||
margin: 0 15rpx;
|
||||
margin-top: 22rpx;
|
||||
padding: 20rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #F7F7F7;
|
||||
|
||||
image {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.introduction {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.introduction_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.introduction_yow {
|
||||
margin-top: 18rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
width: 100%;
|
||||
|
||||
/deep/ [alt] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ p {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontentfour {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentfourone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 24rpx;
|
||||
background: #1A1A1A;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontentfourone {
|
||||
padding-bottom: 16rpx;
|
||||
|
||||
.onecontentfourone_one {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
|
||||
text {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: linear-gradient(143deg, #8689AF 0%, #494A5F 100%);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.infowarp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.inforect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
|
||||
view {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.infotowrect {
|
||||
width: 686rpx;
|
||||
height: 640rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.infothererect {
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 4rpx solid #F9F9F9;
|
||||
|
||||
.infothererect_one {
|
||||
margin-top: 22rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
|
||||
.infofourrect {
|
||||
.infofourrect_one {
|
||||
margin-top: 32rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.infofourrect_yow {
|
||||
margin-top: 18rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
.nonecontentone_view {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towrect {
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
padding-top: 34rpx;
|
||||
|
||||
.towrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.towrect_tow {
|
||||
margin-top: 16rpx;
|
||||
|
||||
text {
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #333333;
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.thererect {
|
||||
padding: 34rpx 0;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
border-top: 1rpx solid #F7F7F7;
|
||||
|
||||
.thererect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.thererect_tow {}
|
||||
}
|
||||
|
||||
.fuorrect {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fuorrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.fuorrect_tow {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fvirect {
|
||||
margin-top: 200rpx;
|
||||
padding: 16rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(115deg, #7E81A5 0%, #4D4E64 100%);
|
||||
border-radius: 40rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
895
pages/my/order/index.vue
Normal file
895
pages/my/order/index.vue
Normal file
@@ -0,0 +1,895 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="flex-start">
|
||||
<view class="onecontent_oen flex-start">
|
||||
<input class="onecontent_oen_input" type="text" v-model="like" placeholder="搜索订单/商家名/商品名">
|
||||
<text class="onecontent_oen_text" @click="init_fn">搜索</text>
|
||||
</view>
|
||||
<view class="onecontent_oen_right flex-start" @click="showpicker = true" v-if="model_type != 'Wedding'">
|
||||
<image class="onecontent_oen_rightimage" src="@/static/screen.png" mode="aspectFill"></image>
|
||||
<view class="onecontent_oen_rightimageview">筛选</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontent_tow flex-between">
|
||||
<view ref="uTabs" class="onecontent_tow_item flex-colum" v-for="(item,index) in swipercurrentdata"
|
||||
:key="index" @click="orderswitch(index)">
|
||||
<view :class="swiperCurrent == index?'onecontent_tow_itemtexts':'onecontent_tow_itemtext'">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<image class="onecontent_tow_itemtextsimges" v-if="swiperCurrent == index" :src="selected"
|
||||
mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{height:height}">
|
||||
<swiper-item v-for="(item,index) in list_" :key="index">
|
||||
<scroll-view scroll-y style="width: 100%;" :style="{height:height}" @scrolltolower="lower">
|
||||
<view class="towcontentitem" v-for="(item1,index1) in list_[index].data" :key="index1"
|
||||
@click="eeInfo(item1)">
|
||||
<view class="towcontentitemone flex-between">
|
||||
<text class="towcontentitemone_one">{{item1.store_title}}</text>
|
||||
<view class="towcontentitemone_tow flex-start">
|
||||
<!-- <image class="towcontentitemone_towimage"
|
||||
:src="item.store_avatar"
|
||||
mode="aspectFill">
|
||||
</image> -->
|
||||
<text v-if="item1.status == 0">待支付</text>
|
||||
<text v-if="item1.status == 1">已支付</text>
|
||||
<text v-if="item1.status == 2">等待确认</text>
|
||||
<text v-if="item1.status == 3">已确认</text>
|
||||
<text v-if="item1.status == 4">已完成 </text>
|
||||
<text v-if="item1.status == 5">已取消</text>
|
||||
<text v-if="item1.status == 6">退款中</text>
|
||||
<text v-if="item1.status == 7">已退款</text>
|
||||
<text v-if="item1.status == 8">已拒绝</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-start">
|
||||
<image class="towcontentitemtow_imge" :src="item1.store_avatar" mode="aspectFill">
|
||||
</image>
|
||||
<view class="towcontentitemtow_one flex-colum-start">
|
||||
<text class="towcontentitemtow_one_one">{{item1.title}}</text>
|
||||
<text class="towcontentitemtow_one_tow"><text
|
||||
style="font-size:28rpx;">¥</text>{{item1.total_price}}</text>
|
||||
<text class="towcontentitemtow_one_there"><text
|
||||
style="font-size:28rpx;"></text>{{item1.time}}</text>
|
||||
</view>
|
||||
<view class="towcontentitemtow_tow">
|
||||
{{item1.number}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentitemthere">
|
||||
<view v-if="item1.status == 0"
|
||||
class="towcontentitemthereitem towcontentitemthereitem_tow"
|
||||
@click.stop="orderordercancel(item1)">
|
||||
取消订单
|
||||
</view>
|
||||
<view
|
||||
v-if="item1.status == 1 || item1.status == 2 || (item1.status == 3 && item1.pay_status == 1)"
|
||||
class="towcontentitemthereitem towcontentitemthereitem_tow"
|
||||
@click.stop="orderordercancelrefund(item1)">
|
||||
申请售后
|
||||
</view>
|
||||
<view v-if="item1.status == 6 || item1.status == 7"
|
||||
class="towcontentitemthereitem towcontentitemthereitem_tow"
|
||||
@click.stop="applylrefund(item1)">
|
||||
查看退款
|
||||
</view>
|
||||
<view class="towcontentitemthereitem towcontentitemthereitem_tow"
|
||||
v-if="item1.status == 5 || item1.status == 4 "
|
||||
@click.stop="orderorderdelete(item1)">
|
||||
删除订单
|
||||
</view>
|
||||
<!-- <view class="towcontentitemthereitem towcontentitemthereitem_there">
|
||||
待服务
|
||||
</view> -->
|
||||
<view class="towcontentitemthereitem towcontentitemthereitem_one"
|
||||
v-if=" item1.status != 8 && item1.pay_status == 0 && (item1.status == 0 || item1.status == 1 || item1.status == 2)"
|
||||
@click.stop="overlayshowclick(item1)">
|
||||
去付款
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow" @click.stop="overlayshow = false" opacity='0.1'>
|
||||
<view class="warp">
|
||||
<view class="rect flex-colum" @tap.stop>
|
||||
<view class="rectone">
|
||||
确定{{clickoverlayshowtext}}吗?
|
||||
</view>
|
||||
<view class="recttow flex-between">
|
||||
<view class="recttow_one" @click="cancelOrder(item.status)">
|
||||
确定
|
||||
</view>
|
||||
<view class="recttow_tow" @click="overlayshow = false">
|
||||
取消
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</view>
|
||||
<view v-if="list_[index].data.length == 0 && list_[index].is_end == true" class="flex-colum"
|
||||
style="margin-bottom: 10rpx;">
|
||||
<image style="margin-top:100rpx;" class="" :src="bgnothave" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<u-picker :show="showpicker" :columns="columns" keyName="label" @cancel='showpicker = false'
|
||||
@confirm='confirmpicker'></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selected: uni.getStorageSync('selected'),
|
||||
model_type: uni.getStorageSync('loginuser').model_type,
|
||||
showpicker: false,
|
||||
columns: [
|
||||
[{
|
||||
label: '店铺订单',
|
||||
// 其他属性值
|
||||
id: 1
|
||||
// ...
|
||||
}, {
|
||||
label: '商城订单',
|
||||
id: 2
|
||||
}]
|
||||
],
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
height: "",
|
||||
// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
|
||||
current: 0, // tabs组件的current值，表示当前活动的tab选项
|
||||
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
|
||||
overlayshow: false,
|
||||
list_: {
|
||||
list1: { //全部
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list2: { //代付款
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list3: { //待服务
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list4: { //已完成
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list5: { //退款
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
}
|
||||
},
|
||||
like: '', //备注
|
||||
clickoverlayshowtext: "",
|
||||
swipercurrentdata: [{
|
||||
name: '全部'
|
||||
}, {
|
||||
name: '待付款'
|
||||
}, {
|
||||
name: '待服务' //待确认
|
||||
}, {
|
||||
name: '已完成' //已确认
|
||||
}, {
|
||||
name: '退款/售后'
|
||||
}],
|
||||
form: {
|
||||
status: 'loadmore',
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.swiperCurrent = e.e;
|
||||
if (this.model_type == 'Hotel') {
|
||||
this.swipercurrentdata = [{
|
||||
name: '全部'
|
||||
}, {
|
||||
name: '待付款'
|
||||
}, {
|
||||
name: '待确认' //待确认
|
||||
}, {
|
||||
name: '已确认' //已确认
|
||||
}, {
|
||||
name: '退款/售后'
|
||||
}]
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.init_fn();
|
||||
},
|
||||
computed: {
|
||||
HeighTpadding() {
|
||||
return this.$store.getters.is_BarHeight.bottompadding
|
||||
},
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.onecontent')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (res.windowHeight - ele.height - (that.HeighTpadding / 2)) +
|
||||
"px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
|
||||
methods: {
|
||||
confirmpicker(e) {
|
||||
if (e.value[0].label == '店铺订单') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/order/index?e=0'
|
||||
})
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pages/mall/order/index?e=0'
|
||||
})
|
||||
}
|
||||
},
|
||||
init_fn() {
|
||||
this.list_ = {
|
||||
list1: { //全部
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list2: { //代付款
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list3: { //待发货
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list4: { //已完成
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
},
|
||||
list5: { //退款
|
||||
data: [],
|
||||
page: 1,
|
||||
is_end: false,
|
||||
}
|
||||
}
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
this.get_order_list(i);
|
||||
}
|
||||
},
|
||||
async get_order_list(i) {
|
||||
console.log(i, 2233)
|
||||
this.form.status = 'loading';
|
||||
let page = null; //页数
|
||||
let order_type = 10;
|
||||
switch (i) {
|
||||
case 0:
|
||||
order_type = 10;
|
||||
page = this.list_.list1.page;
|
||||
break;
|
||||
case 1:
|
||||
order_type = 0;
|
||||
page = this.list_.list2.page;
|
||||
break;
|
||||
case 2:
|
||||
order_type = 3;
|
||||
page = this.list_.list3.page;
|
||||
break;
|
||||
case 3:
|
||||
order_type = 4;
|
||||
page = this.list_.list4.page;
|
||||
break;
|
||||
case 4:
|
||||
order_type = 5;
|
||||
page = this.list_.list5.page;
|
||||
break;
|
||||
}
|
||||
let res = await this.api.orderlist({
|
||||
order_type: order_type,
|
||||
page: page,
|
||||
like: this.like,
|
||||
store_id: uni.cache.get('store_id') // 判断显示哪家的作品
|
||||
})
|
||||
// let res = []
|
||||
// res.data.forEach(item=>{//计算待支付订单剩余时间
|
||||
// if(item.order_type==0){
|
||||
// item.timeDiff=(new Date(item.estimate_close_at).getTime() -new Date().getTime())/1000;
|
||||
// }
|
||||
// })
|
||||
switch (order_type) {
|
||||
case 10:
|
||||
this.paging(res, this.list_.list1)
|
||||
break;
|
||||
case 0:
|
||||
this.paging(res, this.list_.list2)
|
||||
break;
|
||||
case 3:
|
||||
this.paging(res, this.list_.list3)
|
||||
break;
|
||||
case 4:
|
||||
this.paging(res, this.list_.list4)
|
||||
break;
|
||||
case 5:
|
||||
this.paging(res, this.list_.list5)
|
||||
break;
|
||||
}
|
||||
uni.hideLoading();
|
||||
},
|
||||
paging(res, list) {
|
||||
if (res.length == 0) {
|
||||
this.form.status = 'nomore';
|
||||
list.is_end = true;
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
list.page = list.page + 1;
|
||||
setTimeout(() => {
|
||||
list.data = [...list.data, ...res];
|
||||
if (res.length != 10) {
|
||||
list.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
}
|
||||
this.$forceUpdate();
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
async overlayshowclick(e) {
|
||||
uni.pro.navigateTo('order/confirm', {
|
||||
order_id: e.order_id
|
||||
})
|
||||
console.log(e)
|
||||
let res = await this.api.paygetpayparams({
|
||||
order_id: e.order_id
|
||||
}) //判断是否支付成功
|
||||
// console.log(res)
|
||||
// if (res.data.pay_status == 0) {
|
||||
// // #ifdef MP-WEIXIN
|
||||
// uni.requestPayment({
|
||||
// provider: 'wxpay', //支付类型-固定值
|
||||
// partnerid: res.data.pay_data.payAppId, // 微信支付商户号
|
||||
// timeStamp: res.data.pay_data.payTimeStamp, // 时间戳（单位：秒）
|
||||
// nonceStr: res.data.pay_data.paynonceStr, // 随机字符串
|
||||
// package: res.data.pay_data.payPackage, // 固定值
|
||||
// signType: res.data.pay_data.paySignType, //固定值
|
||||
// paySign: res.data.pay_data.paySign, //签名
|
||||
// success: (res) => {
|
||||
// console.log(res,'11111111')
|
||||
// uni.showToast({
|
||||
// title: "支付成功"
|
||||
// })
|
||||
// uni.redirectTo({
|
||||
// url: "/pages/order/ordersuccess?id=" + e.order_id,
|
||||
// });
|
||||
// },
|
||||
// fail: (err) => {
|
||||
// uni.showToast({
|
||||
// icon: 'none',
|
||||
// title: '支付失败'
|
||||
// })
|
||||
// console.log('fail:' + JSON.stringify(err));
|
||||
// }
|
||||
// });
|
||||
// // #endif
|
||||
// } else {
|
||||
// console.log(res,'22222')
|
||||
// uni.redirectTo({
|
||||
// url: "/pages/order/ordersuccess?id=" + e.order_id,
|
||||
// });
|
||||
// }
|
||||
|
||||
},
|
||||
lower() {
|
||||
switch (this.current) {
|
||||
case 0:
|
||||
this.onReachBottom_fn(this.list_.list1)
|
||||
break;
|
||||
case 1:
|
||||
this.onReachBottom_fn(this.list_.list2)
|
||||
break;
|
||||
case 2:
|
||||
this.onReachBottom_fn(this.list_.list3)
|
||||
break;
|
||||
case 3:
|
||||
this.onReachBottom_fn(this.list_.list4)
|
||||
break;
|
||||
case 4:
|
||||
this.onReachBottom_fn(this.list_.list5)
|
||||
break;
|
||||
}
|
||||
},
|
||||
onReachBottom_fn(list) {
|
||||
if (!list.is_end) {
|
||||
this.get_order_list(this.current);
|
||||
} else {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
},
|
||||
// tabs通知swiper切换
|
||||
orderswitch(index) {
|
||||
try {
|
||||
switch (index) {
|
||||
case 0:
|
||||
if (this.list_list1.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
if (this.list_.list2.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if (this.list_.list3.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
if (this.list_.list4.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 4:
|
||||
if (this.list_.list5.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
this.swiperCurrent = index;
|
||||
},
|
||||
// swiper-item左右移动，通知tabs的滑块跟随移动
|
||||
transition(e) {
|
||||
let dx = e.detail.dx
|
||||
console.log(e, dx)
|
||||
// this.$refs.uTabs.setDx(dx);
|
||||
},
|
||||
// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态 swiper滑动结束，分别设置tabs和swiper的状态
|
||||
animationfinish(e) {
|
||||
let current = e.detail.current;
|
||||
try {
|
||||
switch (current) {
|
||||
case 0:
|
||||
if (this.list_list1.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
if (this.list_.list2.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if (this.list_.list3.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
if (this.list_.list4.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
case 4:
|
||||
if (this.list_.list5.data.length < 10) {
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
break;
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
|
||||
this.swiperCurrent = current;
|
||||
this.current = current;
|
||||
},
|
||||
// clickoverlayshow(e) { //切换文字
|
||||
// switch (e) {
|
||||
// case 1:
|
||||
// this.clickoverlayshowtext = '取消订单'
|
||||
// break;
|
||||
// case 2:
|
||||
// this.clickoverlayshowtext = '删除订单'
|
||||
// break;
|
||||
// }
|
||||
// this.overlayshow = true
|
||||
// },
|
||||
orderordercancel(item) { //取消订单
|
||||
uni.showModal({
|
||||
content: '确定取消订单吗?',
|
||||
confirmColor: '#f55850',
|
||||
cancelColor: '#333333',
|
||||
success: async (resdata) => {
|
||||
console.log(resdata)
|
||||
if (resdata.confirm) {
|
||||
let res = await this.api.orderordercancel({
|
||||
order_id: item.order_id
|
||||
})
|
||||
this.init_fn()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
orderordercancelrefund(item) { //取消订单去退款
|
||||
uni.pro.navigateTo('my/order/refund', {
|
||||
id: item.order_id
|
||||
})
|
||||
},
|
||||
applylrefund(item) {
|
||||
uni.pro.navigateTo('my/order/applylrefund', {
|
||||
id: item.order_id
|
||||
})
|
||||
},
|
||||
orderorderdelete(item) {
|
||||
uni.showModal({
|
||||
content: '确定删除订单吗?',
|
||||
confirmColor: '#f55850',
|
||||
cancelColor: '#333333',
|
||||
success: async (resdata) => {
|
||||
if (resdata.confirm) {
|
||||
let res = await this.api.orderorderdelete({
|
||||
order_id: item.order_id
|
||||
})
|
||||
}
|
||||
this.init_fn()
|
||||
}
|
||||
})
|
||||
},
|
||||
async cancelOrder(item) { //取消订单
|
||||
console.log(item)
|
||||
// let res
|
||||
// switch (this.clickoverlayshowtext) {
|
||||
// case '取消订单':
|
||||
// if (item.status == 0) {
|
||||
// res = await this.api.orderordercancel({
|
||||
// order_id: item.order_id
|
||||
// })
|
||||
// } else {
|
||||
// uni.pro.navigateTo('my/order/orderInfo', {
|
||||
// id: e,
|
||||
// e: e
|
||||
// })
|
||||
// }
|
||||
// break;
|
||||
// case '删除订单':
|
||||
// res = await this.api.orderorderdelete({
|
||||
// order_id: item.order_id
|
||||
// })
|
||||
// break;
|
||||
// }
|
||||
// this.overlayshow = false
|
||||
// this.init_fn()
|
||||
},
|
||||
eeInfo(e) { //查看订单详情
|
||||
uni.pro.navigateTo('my/order/orderInfo', {
|
||||
id: e.order_id
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 10rpx 28rpx;
|
||||
|
||||
.flex-start {
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.onecontent_oen {
|
||||
margin: 0 auto;
|
||||
flex: auto;
|
||||
height: 70rpx;
|
||||
border-radius: 36rpx;
|
||||
border: 1rpx solid var(--bg-color-button);
|
||||
padding-right: 8rpx;
|
||||
|
||||
.onecontent_oen_input {
|
||||
padding-left: 32rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.onecontent_oen_text {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 56rpx;
|
||||
width: 116rpx;
|
||||
height: 56rpx;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontent_oen_right {
|
||||
margin-left: 26rpx;
|
||||
|
||||
.onecontent_oen_rightimage {
|
||||
width: 17.9rpx;
|
||||
height: 19.34rpx;
|
||||
}
|
||||
|
||||
.onecontent_oen_rightimageview {
|
||||
text-align: center;
|
||||
width: 56rpx;
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.onecontent_tow {
|
||||
padding: 32rpx 0 32rpx 0;
|
||||
width: 100%;
|
||||
|
||||
.onecontent_tow_item {
|
||||
position: relative;
|
||||
|
||||
.onecontent_tow_itemtexts {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontent_tow_itemtext {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.onecontent_tow_itemtextsimges {
|
||||
position: absolute;
|
||||
bottom: -10rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 20rpx;
|
||||
height: 8rpx;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.flex-colum_image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
text {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitem {
|
||||
margin-top: 32rpx;
|
||||
padding: 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.towcontentitemone {
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
|
||||
.towcontentitemone_one {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentitemone_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
|
||||
.towcontentitemone_towimage {
|
||||
margin-right: 10rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
position: relative;
|
||||
padding: 22rpx 0;
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
|
||||
.towcontentitemtow_imge {
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
background: #666666;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.towcontentitemtow_one {
|
||||
margin-left: 32rpx;
|
||||
width: 60%;
|
||||
|
||||
.towcontentitemtow_one_one {
|
||||
width:80%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentitemtow_one_tow {
|
||||
margin-top: 24rpx;
|
||||
font-size: 40rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #FC5F69;
|
||||
}
|
||||
|
||||
.towcontentitemtow_one_there {
|
||||
margin-top: 32rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow_tow {
|
||||
position: absolute;
|
||||
bottom: 32rpx;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Regular, Roboto;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemthere {
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.towcontentitemthereitem {
|
||||
margin-left: 24rpx;
|
||||
padding: 8rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_one {
|
||||
background: var(--bg-color-button);
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_tow {
|
||||
background: #F6F6F6;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_there {
|
||||
background: var(--bg-color-buttonone);
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
padding: 40rpx 68rpx;
|
||||
width: 480rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 42rpx;
|
||||
|
||||
.rectone {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow {
|
||||
width: 100%;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.recttow_one {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
border: 2rpx solid #999999;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow_tow {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #333333;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
628
pages/my/order/orderInfo.vue
Normal file
628
pages/my/order/orderInfo.vue
Normal file
@@ -0,0 +1,628 @@
|
||||
<template>
|
||||
<view class="index" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="onecontentone">
|
||||
<text v-if="datalist.status == 0">待支付</text>
|
||||
<text v-if="datalist.status == 1">已支付</text>
|
||||
<text v-if="datalist.status == 2">等待确认</text>
|
||||
<text v-if="datalist.status == 3">已确认</text>
|
||||
<text v-if="datalist.status == 4">已完成 </text>
|
||||
<text v-if="datalist.status == 5">已取消</text>
|
||||
<text v-if="datalist.status == 6">退款中</text>
|
||||
<text v-if="datalist.status == 7">已退款</text>
|
||||
<text v-if="datalist.status == 8">已拒绝</text>
|
||||
</view>
|
||||
<view class="onecontenttow">
|
||||
感谢您的支持，欢迎再次光临
|
||||
</view>
|
||||
<view class="onecontentthere flex-between">
|
||||
<view class="onecontentthere_one" v-if="datalist.status == 5 || datalist.status == 4 "
|
||||
@click="orderorderdelete(datalist)">
|
||||
删除订单
|
||||
</view>
|
||||
<view class="onecontentthere_tow"
|
||||
v-if="datalist.status == 1 || datalist.status == 2 ||datalist.status == 3"
|
||||
@click="orderordercancelrefund(datalist)">
|
||||
申请退款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<view class="towcontentone flex-between">
|
||||
<view class="towcontentone_one flex-start">
|
||||
<u-icon name="home" color="#ffffff" size="20"></u-icon>
|
||||
<text class="towcontentone_one_text">{{datalist.store_title}}</text>
|
||||
</view>
|
||||
<u-icon @click="phonefill(datalist.store_mobile)" name="phone-fill" color="#ffffff" size="20"></u-icon>
|
||||
</view>
|
||||
<view class="towcontenttow flex-start" @click="detailsInfo(datalist.store_service_id)">
|
||||
<image class="towcontenttow_image" :src="datalist.store_avatar" mode="aspectFill"></image>
|
||||
<view class="towcontenttowone flex-colum-start">
|
||||
<view class="towcontenttowone_one">
|
||||
{{datalist.title}}
|
||||
</view>
|
||||
<view class="towcontenttowone_tow flex-start">
|
||||
<view class="towcontenttowone_tow_one flex-start">
|
||||
<u-icon name="checkmark-circle" color="#999999" size="14"></u-icon>
|
||||
随时退
|
||||
</view>
|
||||
<view class="towcontenttowone_tow_one flex-start">
|
||||
<u-icon name="checkmark-circle" color="#999999" size="14"></u-icon>
|
||||
过期退
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontenttowone_there">
|
||||
{{datalist.time||''}}
|
||||
</view>
|
||||
<view class="towcontenttowone_four">
|
||||
¥{{datalist.total_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--<view class="towcontentthere flex-between">
|
||||
<text class="towcontentthere_text"></text>
|
||||
</view>
|
||||
<view class="qr-box flex-colum" @longpress="save()">
|
||||
<canvas canvas-id="qrcode" style="width:288rpx;" />
|
||||
</view>
|
||||
<view class="towcontenttfour flex-colum">
|
||||
123 2345 567
|
||||
</view> -->
|
||||
<!-- <view class="towcontenttfive flex-between">
|
||||
<view class="towcontenttfive_one flex-start">
|
||||
<view class="towcontenttfive_oneone">
|
||||
退款:
|
||||
</view>
|
||||
<view class="towcontenttfive_onetow">
|
||||
08-22 23:59:59到期
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontenttfive_tow">
|
||||
申请退款
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="therecontent">
|
||||
<view class="therecontentone">
|
||||
订单信息
|
||||
</view>
|
||||
<view class="therecontentsix entowakst" v-if="datalist.people_nickname">
|
||||
发型师：{{datalist.people_nickname}}
|
||||
</view>
|
||||
<view class="therecontentow entowakst">
|
||||
实付金额：<text>¥{{datalist.money}}</text>
|
||||
</view>
|
||||
<view class="therecontentthere entowakst">
|
||||
购买数量：{{datalist.number}}
|
||||
</view>
|
||||
<view class="therecontenfour entowakst">
|
||||
手机号码：{{datalist.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') || '-'}}
|
||||
</view>
|
||||
<view class="therecontentfive flex-start entowakst" @click="copy(datalist.out_trade_no)">
|
||||
订单编号：{{datalist.out_trade_no}}
|
||||
<text class="therecontentfive_box">复制</text>
|
||||
</view>
|
||||
<view class="therecontentsix entowakst">
|
||||
下单时间：{{datalist.createtime}}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- <view class="fourcontent">
|
||||
<view class="fourcontentone">
|
||||
购买须知
|
||||
</view>
|
||||
<view v-html="datalist.details">
|
||||
|
||||
</view>
|
||||
<view class="entowakst" v-html="datalist.details">
|
||||
·预约须知：请您提前1小时预约
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="fivecontent">
|
||||
<view class="fivecontentone">
|
||||
用户评价
|
||||
</view>
|
||||
<view class="fivecontenttow flex-between">
|
||||
<view class="fivecontenttow_one flex-start">
|
||||
<text class="fivecontenttow_text">综合评分</text>
|
||||
<u-rate :count="5" value="4" active-color="#f1cb66" inactive-color="#F1CB66"></u-rate>
|
||||
</view>
|
||||
<view class="fivecontenttow_tow">
|
||||
满意
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uQRCode from '@/common/js/uqrCode.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
datalist: {
|
||||
mobile: ''
|
||||
},
|
||||
imgCode: '', // 后续保存到手机相册所需要用到的字段}
|
||||
form: {
|
||||
phone: '18092171236'
|
||||
}
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
try {
|
||||
let res = await this.api.orderorderdetail({
|
||||
order_id: e.id
|
||||
})
|
||||
if (res) {
|
||||
console.log(res)
|
||||
this.datalist = res
|
||||
this.datalist.details = res.details.replace(/\<img/g, '<img style="max-width:100%;height:auto" ');
|
||||
}
|
||||
} catch (e) {}
|
||||
// this.generate()
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
orderorderdelete(item) { //删除订单
|
||||
uni.showModal({
|
||||
content: '确定删除订单吗?',
|
||||
confirmColor: '#f55850',
|
||||
cancelColor: '#333333',
|
||||
success: async (resdata) => {
|
||||
if (resdata.confirm) {
|
||||
await this.api.orderorderdelete({
|
||||
order_id: item.order_id
|
||||
})
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
orderordercancelrefund(item) { //取消订单去退款
|
||||
console.log(item)
|
||||
uni.pro.navigateTo('my/order/refund', {
|
||||
id: item.order_id
|
||||
})
|
||||
},
|
||||
// 生成二维码事件
|
||||
generate(e) {
|
||||
uQRCode.make({
|
||||
canvasId: 'qrcode',
|
||||
componentInstance: this,
|
||||
text: "https://ky.sxczgkj.cn/wap/merchant/authPay?userAppId=244", // 想生成二维码到内容
|
||||
size: 150,
|
||||
margin: 0,
|
||||
backgroundColor: '#ffffff',
|
||||
foregroundColor: '#000000',
|
||||
fileType: 'jpg',
|
||||
errorCorrectLevel: uQRCode.errorCorrectLevel.H,
|
||||
success: res => {
|
||||
this.imgCode = res // base64的图片格式
|
||||
}
|
||||
})
|
||||
},
|
||||
// 保存到手机
|
||||
save() {
|
||||
uni.getSetting({ //获取用户的当前设置
|
||||
success: (res) => {
|
||||
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
|
||||
this.aveImageToPhotosAlbum();
|
||||
} else {
|
||||
uni.authorize({ //如果没有授权，向用户发起请求
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success: () => {
|
||||
this.aveImageToPhotosAlbum();
|
||||
},
|
||||
fail: () => {
|
||||
// 提示
|
||||
uni.showToast({
|
||||
title: "请打开保存相册权限，再点击保存到手机",
|
||||
icon: "none",
|
||||
duration: 3000
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
|
||||
success: (res2) => {
|
||||
// console.log(res2.authSetting)
|
||||
}
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
copy(value) {
|
||||
//提示模板
|
||||
uni.setClipboardData({
|
||||
data: value, //要被复制的内容
|
||||
success: () => { //复制成功的回调函数
|
||||
uni.showToast({
|
||||
title: '复制成功'
|
||||
})
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
},
|
||||
detailsInfo(e) { //查看订单详情
|
||||
uni.pro.navigateTo('my/order/cporderinfo', {
|
||||
id: e,
|
||||
})
|
||||
},
|
||||
phonefill(value) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: value //仅为示例
|
||||
});
|
||||
},
|
||||
aveImageToPhotosAlbum() {
|
||||
let base64 = this.imgCode.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
|
||||
let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png'; // 路径文件名
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
uni.getFileSystemManager().writeFile({ // 获取全局唯一的文件管理器
|
||||
filePath: filePath, //创建一个临时文件名
|
||||
data: base64, //写入的文本或二进制数据
|
||||
encoding: 'base64', //写入当前文件的字符编码
|
||||
success: res => {
|
||||
uni.saveImageToPhotosAlbum({ // 保存图片到系统相册
|
||||
filePath: filePath,
|
||||
success: function(res2) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: "none",
|
||||
duration: 5000
|
||||
})
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.hideLoading();
|
||||
// console.log(err.errMsg);
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: err => {
|
||||
uni.hideLoading();
|
||||
//console.log(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.index {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentone {
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.onecontentthere {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.onecontentthere_one {
|
||||
background: #333333;
|
||||
border-radius: 8rpx;
|
||||
padding: 16rpx 94rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.onecontentthere_tow {
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
padding: 16rpx 94rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.towcontentone {
|
||||
position: relative;
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 18rpx 18rpx 0 0;
|
||||
background: var(--bg-color-buttonone);
|
||||
|
||||
.towcontentone_one {
|
||||
.towcontentone_one_image {
|
||||
width: 33.04rpx;
|
||||
height: 29.79rpx;
|
||||
}
|
||||
|
||||
.towcontentone_one_text {
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentone_one::after {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
bottom: -22rpx;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 0 0 22rpx 22rpx;
|
||||
background: var(--bg-color-buttonone);
|
||||
}
|
||||
}
|
||||
|
||||
.towcontenttow {
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
|
||||
.towcontenttow_image {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.towcontenttowone {
|
||||
margin-left: 36rpx;
|
||||
justify-content: space-around;
|
||||
width: 60%;
|
||||
.towcontenttowone_one {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontenttowone_tow {
|
||||
.towcontenttowone_tow_one {
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontenttowone_there {
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontenttowone_four {
|
||||
// position: absolute;
|
||||
font-weight: bold;
|
||||
// top: 32rpx;
|
||||
// right: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentthere {
|
||||
position: relative;
|
||||
height: 44rpx;
|
||||
width: 100%;
|
||||
|
||||
.towcontentthere_text {
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
border: 1rpx dashed #EAEAEA;
|
||||
}
|
||||
|
||||
.towcontentthere_text::after {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 22rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 0 44rpx 44rpx 0;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.towcontentthere_text::before {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 22rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 44rpx 0 0 44rpx;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontenttfour {
|
||||
margin-top: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontenttfive {
|
||||
padding: 32rpx;
|
||||
width: 100%;
|
||||
|
||||
.towcontenttfive_one {
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontenttfive_onetow {
|
||||
margin-left: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.towcontenttfive_tow {
|
||||
padding: 10rpx 16rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #D5D5D5;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.therecontentone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.entowakst {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentfive_box {
|
||||
padding: 6rpx 10rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
background: #FFFFFF;
|
||||
margin-left: 6rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #D5D5D5;
|
||||
}
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.fourcontentone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fourcontentone::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
border: 1px solid #F7F7F7;
|
||||
}
|
||||
|
||||
.entowakst {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent {
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.fivecontentone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fivecontenttow {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.fivecontenttow_one {
|
||||
.fivecontenttow_text {
|
||||
padding-right: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontenttow_tow {
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
368
pages/my/order/refund.vue
Normal file
368
pages/my/order/refund.vue
Normal file
@@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<view class="index" :style="[theme]">
|
||||
<view class="onecontent flex-between">
|
||||
<image :src="datalist.store_avatar" mode="aspectFill"></image>
|
||||
<view class="flex-colum-start">
|
||||
<view class="onecontentone">
|
||||
{{datalist.title}}
|
||||
</view>
|
||||
<view class="onecontenttow">
|
||||
<view class="onecontenttowabsolute">
|
||||
x{{datalist.number}}
|
||||
</view>
|
||||
<text style="font-size:28rpx;">¥</text>{{datalist.total_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontent">
|
||||
<view class="therecontentone flex-between" @click="showpicke = true">
|
||||
<view class="therecontentone_one">
|
||||
退款原因
|
||||
</view>
|
||||
<text class="therecontentone_text" style="font-weight: 400;">{{reason}}</text>
|
||||
<u-icon name="arrow-right" color="#9b9b9b" size="14"></u-icon>
|
||||
</view>
|
||||
<view class="therecontentone flex-between">
|
||||
<view class="therecontentone_one">
|
||||
退款金额
|
||||
</view>
|
||||
<input disabled style="padding: 16rpx; color: red;" type="text" v-model="money"
|
||||
class="therecontentone_text" :placeholder="'最多可退￥'+money">
|
||||
</view>
|
||||
<view class="therecontentone">
|
||||
<view class="therecontentone_one">
|
||||
详细说明
|
||||
</view>
|
||||
<view class="" style="margin-top: 10rpx;">
|
||||
<u--textarea v-model="remarks" placeholder="请输入内容"></u--textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontentone flex-between">
|
||||
<view class="therecontentone_one">
|
||||
图片凭证
|
||||
</view>
|
||||
<view class="therecontentone_text" style="text-align: right;">最多三张</view>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<view class="fourcontent flex-start" v-if="avatar.length!=0">
|
||||
<view class="fourcontent_item" v-for="(item,index) in avatar" :key="index">
|
||||
<image :src="item" mode="aspectFill"></image>
|
||||
<text class="fourcontent_itemtext" @click="avatardelete(index)">
|
||||
<u-icon name="close-circle-fill" color="#000" size="16"></u-icon>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="avatar.length<3" class="fourcontent_items flex-colum" @click="chooseImagelist">
|
||||
<u-icon name="camera-fill" color="#000" size="30"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="buoot" @click="orderorderrefund">
|
||||
提交
|
||||
</view>
|
||||
<u-picker :show="showpicke" title='退款原因' :columns="columnspicke" @cancel='showpicke = false'
|
||||
@confirm='confirm'></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showpicke: false,
|
||||
reason: "",
|
||||
money: '',
|
||||
columnspicke: [
|
||||
['7天无理由', '拍错/多拍/不想要', '其他']
|
||||
],
|
||||
imgCode: '', // 后续保存到手机相册所需要用到的字段
|
||||
remarks: '',
|
||||
form: {
|
||||
phone: '18092171236'
|
||||
},
|
||||
datalist: {},
|
||||
avatar: [],
|
||||
order_id: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
async onLoad(e) {
|
||||
this.order_id = e.id
|
||||
try {
|
||||
let res = await this.api.orderorderdetail({
|
||||
order_id: this.order_id
|
||||
})
|
||||
if (res) {
|
||||
this.datalist = res
|
||||
this.money = res.money
|
||||
}
|
||||
} catch (e) {}
|
||||
// this.generate()
|
||||
},
|
||||
methods: {
|
||||
// / 更换头像
|
||||
chooseImagelist(e) {
|
||||
// uni.showLoading({
|
||||
// title: '上传中',
|
||||
// mask: true
|
||||
// })
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success: (res) => {
|
||||
let file = res.tempFilePaths[0];
|
||||
uploadImage(file, 'refund/',
|
||||
result => {
|
||||
this.avatar.push(result)
|
||||
uni.hideLoading()
|
||||
}, result => {
|
||||
console.log(result)
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
async orderorderrefund() {
|
||||
if (this.reason == null || this.reason == '') {
|
||||
uni.showToast({
|
||||
title: '请选择退款原因',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
let res = await this.api.orderorderrefund({
|
||||
order_id: this.order_id,
|
||||
reason: this.reason,
|
||||
remarks: this.remarks,
|
||||
img: this.avatar,
|
||||
// money:""
|
||||
})
|
||||
if (res == 1) {
|
||||
uni.showToast({
|
||||
title: '操作成功，请等待审核',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
},
|
||||
avatardelete(e) {
|
||||
this.avatar.splice(e, 1)
|
||||
console.log(this.avatar)
|
||||
},
|
||||
confirm(e) {
|
||||
this.reason = e.value[0]
|
||||
this.showpicke = false
|
||||
console.log(e.value[0])
|
||||
},
|
||||
aveImageToPhotosAlbum() {
|
||||
let base64 = this.imgCode.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
|
||||
let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png'; // 路径文件名
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
uni.getFileSystemManager().writeFile({ // 获取全局唯一的文件管理器
|
||||
filePath: filePath, //创建一个临时文件名
|
||||
data: base64, //写入的文本或二进制数据
|
||||
encoding: 'base64', //写入当前文件的字符编码
|
||||
success: res => {
|
||||
uni.saveImageToPhotosAlbum({ // 保存图片到系统相册
|
||||
filePath: filePath,
|
||||
success: function(res2) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: "none",
|
||||
duration: 5000
|
||||
})
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.hideLoading();
|
||||
// console.log(err.errMsg);
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: err => {
|
||||
uni.hideLoading();
|
||||
//console.log(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.index {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
padding: 26rpx 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
image {
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.flex-colum-start {
|
||||
height: 176rpx;
|
||||
flex: auto;
|
||||
margin-left: 20rpx;
|
||||
justify-content: flex-start;
|
||||
|
||||
.onecontentone {
|
||||
width: 400rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
top: 32rpx;
|
||||
position: relative;
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
font-size: 40rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
|
||||
.onecontenttowabsolute {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.buoot {
|
||||
margin: 40rpx auto;
|
||||
width: 80%;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.therecontentone {
|
||||
width: 100%;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.therecontentone_one {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentone_text {
|
||||
flex: auto;
|
||||
margin-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fourcontent_items {
|
||||
position: relative;
|
||||
margin-top: 16rpx;
|
||||
margin-left: 20rpx;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
background: #f9f9f9;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
.fourcontent_item {
|
||||
position: relative;
|
||||
margin-top: 16rpx;
|
||||
margin-left: 20rpx;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
image {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.fourcontent_itemtext {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
right: 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entowakst {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentfive_box {
|
||||
padding: 6rpx 10rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
background: #FFFFFF;
|
||||
margin-left: 6rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #D5D5D5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
313
pages/my/setup/index.vue
Normal file
313
pages/my/setup/index.vue
Normal file
@@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<view class="index" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
个人信息
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<view class="towcontent_item flex-between">
|
||||
<view class="towcontent_item_text">
|
||||
头像
|
||||
</view>
|
||||
<view class="towcontent_item_box">
|
||||
<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar' style="padding: 0;margin: 0;">
|
||||
<image class="towcontent_item_box_imge" :src="urlavatar" mode="aspectFill"></image>
|
||||
<!-- <image v-else class="towcontent_item_box_imge" src="@/static/logo.png" mode="aspectFill"></image> -->
|
||||
</button>
|
||||
<!-- <image v-if="userlist.avatar" class="towcontent_item_box_imge" :src="userlist.avatar" mode="aspectFill">
|
||||
</image>
|
||||
-->
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent_item flex-between">
|
||||
<view class="towcontent_item_text">
|
||||
UID
|
||||
</view>
|
||||
<view class="towcontent_item_box flex-start">
|
||||
<text class="towcontent_item_box_text">ID:{{userlist.user_id}}</text>
|
||||
<!-- <u-icon name="arrow-right" color="#909399" size="14"></u-icon> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent_item flex-between">
|
||||
<view class="towcontent_item_text">
|
||||
昵称
|
||||
</view>
|
||||
<view class="towcontent_item_box flex-start">
|
||||
<input class="towcontent_item_box_text" style="text-align: right;" type="nickname" @blur="blurname"
|
||||
v-model="userlist.nickname" placeholder="请输入昵称">
|
||||
<!-- <text class="towcontent_item_box_text">{{userlist.nickname||'暂无您称'}}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent_item flex-between">
|
||||
<view class="towcontent_item_text">
|
||||
性别
|
||||
</view>
|
||||
<view class="towcontent_item_box flex-start">
|
||||
<u-radio-group v-model="userlist.gender" placement="row" @change="groupChange">
|
||||
<u-radio shape="circle" label="男" name="1"></u-radio>
|
||||
<u-radio style="margin-left: 10rpx;" shape="circle" label="女" name="2"></u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent_item flex-between" @click="datetimeshow = true">
|
||||
<view class="towcontent_item_text">
|
||||
生日
|
||||
</view>
|
||||
<view class="towcontent_item_box flex-start">
|
||||
<text class="towcontent_item_box_text">{{userlist.birthday || ''}}</text>
|
||||
<u-icon name="arrow-right" color="#909399" size="14"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent_item flex-between">
|
||||
<view class="towcontent_item_text">
|
||||
手机号
|
||||
</view>
|
||||
<view class="towcontent_item_box flex-start" v-if="userlist.mobile">
|
||||
<text
|
||||
class="towcontent_item_box_text">{{userlist.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</text>
|
||||
<!-- <navigator :url="'/pages/my/setup/phone'" class="towcontent_item_box_ghbd">
|
||||
更换绑定
|
||||
</navigator>
|
||||
<button class="towcontent_item_box_ghbd" open-type="getPhoneNumber"
|
||||
@getphonenumber="getPhoneNumber">获取电话</button>-->
|
||||
</view>
|
||||
<!-- <navigator :url="'/pages/my/setup/phone'" v-else class="towcontent_item_box flex-start">
|
||||
<text class="towcontent_item_box_text">去绑定</text>
|
||||
<u-icon name="arrow-right" color="#909399" size="14"></u-icon>
|
||||
</navigator> -->
|
||||
<view v-else class="towcontent_item_box flex-start">
|
||||
<button class="towcontent_item_box_ghbd" open-type="getPhoneNumber"
|
||||
@getphonenumber="getPhoneNumber">获取电话</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="thereconse thereconses" @click="useruserinfoedit">
|
||||
保存
|
||||
</view>
|
||||
<u-datetime-picker :minDate="-946800000000" :maxDate="2240409600000" :show="datetimeshow"
|
||||
v-model="datetimevalue" @cancel='datetimeshow = false' @confirm="confirmdatetime"
|
||||
mode="date"></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
|
||||
import WXBizDataCrypt from "@/common/js/WXBizDataCrypt.js" // 需要引入
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
urlavatar: '',
|
||||
userlist: {},
|
||||
datetimeshow: false,
|
||||
datetimevalue: '',
|
||||
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
onShow() {
|
||||
this.useruserinfo()
|
||||
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
// / 更换头像
|
||||
onChooseAvatar(e) {
|
||||
uni.showLoading({
|
||||
title: '上传中',
|
||||
mask: true
|
||||
})
|
||||
console.log(e.detail.avatarUrl)
|
||||
let file = e.detail.avatarUrl;
|
||||
uploadImage(file, '',
|
||||
result => {
|
||||
//将上传后的图片以对象（官方要求的格式）的形式存入uni-file-picker的value值imageValue（imageValue值的结构为数组包对象）用于图片回显
|
||||
// let objAge = {
|
||||
// 'url': result,
|
||||
// 'extname': 'png',
|
||||
// 'name': 'imgss.png'
|
||||
// };
|
||||
// this.userlist.avatar.push(objAge)
|
||||
this.urlavatar = result
|
||||
console.log(this.urlavatar)
|
||||
uni.hideLoading()
|
||||
}, result => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
// 获取昵称
|
||||
blurname(e) {
|
||||
console.log(e);
|
||||
this.userlist.nickname = e.detail.value
|
||||
},
|
||||
async useruserinfo() {
|
||||
let res = await this.api.useruserinfo()
|
||||
uni.cache.set('loginuser', res);
|
||||
this.userlist = res.userinfo
|
||||
this.userlist.gender = String(res.userinfo.gender)
|
||||
this.urlavatar = res.userinfo.avatar
|
||||
|
||||
},
|
||||
async useruserinfoedit() {
|
||||
if (this.userlist.mobile == '' || this.userlist.mobile == null) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请先绑定手机号'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.urlavatar == '' || this.urlavatar == null) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '头像不能为空'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.userlist.gender == '' || this.userlist.gender == null) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '性别不能为空'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.userlist.birthday == '' || this.userlist.birthday == null) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '生日不能为空'
|
||||
});
|
||||
return;
|
||||
}
|
||||
let res = await this.api.useruserinfoedit({
|
||||
avatar: this.urlavatar,
|
||||
nickname: this.userlist.nickname,
|
||||
gender: this.userlist.gender,
|
||||
birthday: this.userlist.birthday
|
||||
})
|
||||
uni.showToast({
|
||||
title: '修改成功',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 2000);
|
||||
console.log(res)
|
||||
},
|
||||
confirmdatetime(e) {
|
||||
console.log(e)
|
||||
this.datetimeshow = false
|
||||
this.userlist.birthday = uni.$u.date(e.value, 'yyyy-mm-dd')
|
||||
},
|
||||
groupChange(n) {
|
||||
console.log(n)
|
||||
this.userlist.gender = n
|
||||
},
|
||||
async getPhoneNumber(res) { // 获取手机号
|
||||
var resdataa = res
|
||||
console.log(res)
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
let resdata = await this.api.usergetwechatphone({
|
||||
code: data.code,
|
||||
iv: resdataa.detail.iv,
|
||||
encryptedData: resdataa.detail.encryptedData
|
||||
})
|
||||
this.userlist.mobile = resdata.mobile
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
::v-deep .u-radio{
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.index {
|
||||
padding: 28rpx;
|
||||
|
||||
.onecontent {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
padding: 0 32rpx;
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.towcontent_item:nth-child(1) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.towcontent_item {
|
||||
padding: 22rpx;
|
||||
border-top: 1rpx dotted #ccc;
|
||||
|
||||
.towcontent_item_text {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontent_item_box {
|
||||
.towcontent_item_box_imge {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.towcontent_item_box_text {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.towcontent_item_box_ghbd {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #9397C1;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thereconse {
|
||||
width: 630rpx;
|
||||
height: 80rpx;
|
||||
background: #999999;
|
||||
border-radius: 40rpx;
|
||||
font-size: 36rpx;
|
||||
text-align: center;
|
||||
margin: 84rpx auto;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.thereconses {
|
||||
background: var(--bg-color-button);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
249
pages/my/setup/phone.vue
Normal file
249
pages/my/setup/phone.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<view class="Box">
|
||||
<!-- <view class="Box_one">设置新手机</view>
|
||||
<view class="Box_T">设置新手机号需要通过短信验证</view>
|
||||
<view class="Box_there">当前手机号：{{ form.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</view> -->
|
||||
<view class="Box_consitem">
|
||||
<view class="Box_box flex-start">
|
||||
<text class="top_box_one_text">中国大陆+86</text>
|
||||
<input type="number" class="top_box_one_textinput" v-model="form.mobile" style="font-size: 24rpx;"
|
||||
placeholder="请输入手机号" maxlength="11" data-key="mobile" />
|
||||
</view>
|
||||
<view class="Box_box flex-between"
|
||||
style="padding: 14rpx 0;border-top: 1rpx solid #efefef;border-bottom: 1rpx solid #efefef; margin-top: 0;">
|
||||
<text class="top_box_one_text" style="border-right:none;">验证码</text>
|
||||
<input type="number" style="font-size: 24rpx;" v-model="form.code" placeholder="请输入短信验证码" />
|
||||
<view class="top_box_one_texts">
|
||||
<view v-if="showText == true" class="yzm" @click="CodeRegister">{{ Recapture }}</view>
|
||||
<view v-else style="color: #ccc; background-color: #f9f9f9; border-radius:16px; padding: 10rpx;">
|
||||
{{ second }}s重新发送
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="agreement flex-start">
|
||||
<u-checkbox-group><u-checkbox shape="circle" @change="radioChange"
|
||||
size="12"></u-checkbox></u-checkbox-group>
|
||||
<text>阅读并同意银收客预约</text>
|
||||
<view class="agreement-Item" @click="Privacy(1)">《用户协议》</view>
|
||||
及
|
||||
<view class="agreement-Item" @click="Privacy(2)">《隐私政策》</view>
|
||||
</view>
|
||||
<view class="flex-colum">
|
||||
<view class="Box_bottom" @click="userInfochangePhone">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radioChangeItem: false, //单选框
|
||||
form: {
|
||||
mobile: '',
|
||||
code: '',
|
||||
oldPhone: '',
|
||||
password: ''
|
||||
},
|
||||
// 注册定时器 初始值
|
||||
second: 60,
|
||||
showText: true,
|
||||
Recapture: '发送验证码'
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
computed: {},
|
||||
methods: {
|
||||
async CodeRegister() {
|
||||
//发起验证码
|
||||
if (this.form.mobile == null || this.form.mobile == '') {
|
||||
uni.showToast({
|
||||
title: '请输入电话号码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
const res = await this.api.smssend({
|
||||
// post 手机验证码
|
||||
mobile: this.form.mobile,
|
||||
event: 'binding'
|
||||
});
|
||||
console.log(res);
|
||||
uni.showToast({
|
||||
title: '验证码获取成功',
|
||||
icon: 'none'
|
||||
});
|
||||
// 定时器
|
||||
this.showText = false;
|
||||
this.Recapture = '重新获取';
|
||||
var interval = setInterval(() => {
|
||||
let times = --this.second;
|
||||
this.second = times < 10 ? '0' + times : times; //小于10秒补 0
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
clearInterval(interval);
|
||||
this.second = 60;
|
||||
this.showText = true;
|
||||
}, 60000);
|
||||
},
|
||||
radioChange(n) {
|
||||
//是否同意
|
||||
this.radioChangeItem = n;
|
||||
},
|
||||
async Privacy(e) {
|
||||
let res = await this.api.useruserpolicy();
|
||||
if (e == 1) {
|
||||
//用户协议
|
||||
uni.pro.navigateTo('webview/html', {
|
||||
src: res.agreement
|
||||
});
|
||||
} else {
|
||||
uni.pro.navigateTo('webview/html', {
|
||||
src: res.policy
|
||||
});
|
||||
}
|
||||
},
|
||||
async userInfochangePhone() {
|
||||
if (this.form.mobile == null || this.form.mobile == '') {
|
||||
uni.showToast({
|
||||
title: '请输入电话号码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.code == null || this.form.code == '') {
|
||||
uni.showToast({
|
||||
title: '请输入验证码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.radioChangeItem == false) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请先阅读《用户协议》和《隐私政策》'
|
||||
});
|
||||
return;
|
||||
}
|
||||
let res = await this.api.userbindingphone({
|
||||
captcha: this.form.code,
|
||||
mobile: this.form.mobile,
|
||||
event: 'binding'
|
||||
});
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: '成功',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.Box {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.Box_one {
|
||||
padding-top: 38rpx;
|
||||
font-size: 40rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.Box_T {
|
||||
margin-top: 2rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.Box_there {
|
||||
margin-top: 70rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.Box_consitem {
|
||||
background: #ffffff;
|
||||
padding: 32rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-top: 22rpx;
|
||||
|
||||
.Box_box {
|
||||
padding: 18rpx 0;
|
||||
|
||||
.top_box_one_text {
|
||||
width: auto;
|
||||
padding: 0 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
border-right: 1rpx solid #ccc;
|
||||
}
|
||||
|
||||
.top_box_one_textinput {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.top_box_one_texts {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #5082fd;
|
||||
}
|
||||
}
|
||||
|
||||
.agreement {
|
||||
margin-top: 14rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #7c8e97;
|
||||
|
||||
.agreement-Item {
|
||||
color: #4ca1fc;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-colum {
|
||||
width: 100%;
|
||||
margin-top: 64rpx;
|
||||
|
||||
.Box_bottom {
|
||||
width: 558rpx;
|
||||
height: 72rpx;
|
||||
background: linear-gradient(115deg, #7E81A5 0%, #4D4E64 100%);
|
||||
border-radius: 50rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
215
pages/my/setup/repairpassword.vue
Normal file
215
pages/my/setup/repairpassword.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<view class="Box" :style="[theme]">
|
||||
<view class="box_one">安全密码用于支付，退款，确保资金安全</view>
|
||||
<view class="box_item flex-between">
|
||||
<text class="top_box_one_text">中国大陆+86</text>
|
||||
<input type="number" v-model="form.mobile" placeholder="请输入手机号" maxlength="11" disabled="disabled" />
|
||||
</view>
|
||||
<view class="box_item flex-between">
|
||||
<text class="top_box_one_text">密码</text>
|
||||
<input type="number" v-model="form.password" placeholder="密码必须是6位" maxlength="6" :password="!passwords" />
|
||||
</view>
|
||||
<view class="box_item flex-between">
|
||||
<text class="top_box_one_text">确认密码</text>
|
||||
<input type="number" v-model="form.payPassword" placeholder="确认密码必须是6位" maxlength="6"
|
||||
:password="!payPasswords" />
|
||||
</view>
|
||||
<view class="box_item flex-between" style="position:relative;">
|
||||
<text class="top_box_one_text">验证码</text>
|
||||
<input type="number" v-model="form.checkCode" placeholder="请输入验证码" style="padding-right: 140rpx;" />
|
||||
<view class="top_box_one_texts">
|
||||
<view v-if="showText == true" class="yzm" @click="CodeRegister">{{ Recapture }}</view>
|
||||
<view v-else style="color: #ccc; background-color: #f9f9f9; border-radius:16px; padding: 10rpx;">
|
||||
{{ second }}s重新发送
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-colum">
|
||||
<view class="Box_bottom" @click="userInfosavePayPassword">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
mobile: uni.cache.get('loginuser').userinfo.mobile,
|
||||
password: '',
|
||||
payPassword: '',
|
||||
checkCode: ''
|
||||
},
|
||||
passwords: false,
|
||||
payPasswords: false,
|
||||
// 注册定时器 初始值
|
||||
second: 60,
|
||||
showText: true,
|
||||
Recapture: '发送验证码'
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async CodeRegister() {
|
||||
//发起验证码
|
||||
const res = await this.api.smssend({
|
||||
mobile: this.form.mobile,
|
||||
event: 'setpassword'
|
||||
});
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: '验证码获取成功',
|
||||
icon: 'none'
|
||||
});
|
||||
// 定时器
|
||||
this.showText = false;
|
||||
this.Recapture = '重新获取';
|
||||
var interval = setInterval(() => {
|
||||
let times = --this.second;
|
||||
this.second = times < 10 ? '0' + times : times; //小于10秒补 0
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
clearInterval(interval);
|
||||
this.second = 60;
|
||||
this.showText = true;
|
||||
}, 60000);
|
||||
}
|
||||
},
|
||||
async userInfosavePayPassword() {
|
||||
console.log(this.form.payPassword, this.form.password)
|
||||
if (this.form.mobile.length != 11) {
|
||||
uni.showToast({
|
||||
title: '手机号必须是11位',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.password == null || this.form.password == '') {
|
||||
uni.showToast({
|
||||
title: '请输入密码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.payPassword == null || this.form.payPassword == '') {
|
||||
uni.showToast({
|
||||
title: '请输入确认密码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.password.length != 6 || this.form.payPassword.length != 6) {
|
||||
uni.showToast({
|
||||
title: '密码必须是6位',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.payPassword != this.form.password) {
|
||||
uni.showToast({
|
||||
title: '密码和确认密码不一致',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.checkCode == null || this.form.checkCode == '') {
|
||||
uni.showToast({
|
||||
title: '请输入验证码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
let res = await this.api.uservippassword({
|
||||
password: this.form.password,
|
||||
c_password: this.form.payPassword,
|
||||
code: this.form.checkCode
|
||||
})
|
||||
if (res == 1) {
|
||||
uni.showToast({
|
||||
title: '修改成功',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.Box {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.box_one {
|
||||
margin-top: 26rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.box_item {
|
||||
padding: 36rpx 0 0 0;
|
||||
|
||||
.top_box_one_text {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 75%;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.repeat {
|
||||
position: absolute;
|
||||
bottom: 26rpx;
|
||||
right: 0;
|
||||
width: 25rpx;
|
||||
height: 17rpx;
|
||||
}
|
||||
|
||||
.top_box_one_texts {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #5082fd;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-colum {
|
||||
width: 100%;
|
||||
margin-top: 156rpx;
|
||||
|
||||
.Box_bottom {
|
||||
width: 558rpx;
|
||||
height: 72rpx;
|
||||
background:var(--bg-color-button);
|
||||
border-radius: 50rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
799
pages/order/confirm.vue
Normal file
799
pages/order/confirm.vue
Normal file
@@ -0,0 +1,799 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="onecontentone flex-start">
|
||||
<view class="onecontent_one">
|
||||
预约项目
|
||||
</view>
|
||||
<view class="onecontent_tow">
|
||||
{{elist.title}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttow flex-start">
|
||||
<view class="onecontenttow_one">
|
||||
预约时间
|
||||
</view>
|
||||
<view class="onecontenttow_tow">
|
||||
{{elist.time}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttow flex-start" style="padding-bottom: 24rpx; border-bottom: 1px solid #F7F7F7;">
|
||||
<view class="onecontenttow_one">
|
||||
发型师
|
||||
</view>
|
||||
<view class="onecontenttow_tow">
|
||||
{{elist.people.nickname != ''?elist.people.nickname:'无'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="towcontent" v-if="datalist.sec.is_store_vip ==1">
|
||||
<view class="towcontentone">
|
||||
商家会员卡
|
||||
</view>
|
||||
<view class="towcontenttow">
|
||||
享更多优惠
|
||||
</view>
|
||||
<view class="towcontentthere flex-between" @click="clickselects()">
|
||||
<view class="towcontentthere_one" v-if="datalist.sec.text_title">
|
||||
<text>{{datalist.sec.text_title}}</text>
|
||||
</view>
|
||||
<view class="towcontentthere_one" v-else>
|
||||
开通后享<text>更多优惠</text>
|
||||
</view>
|
||||
<view class="towcontentthere_tow flex-start">
|
||||
<text class="towcontentthere_towtext">{{datalist.sec.text}}</text>
|
||||
<u-icon v-if="is_sec == 1" name="checkmark-circle" color="#2979ff" size="16"></u-icon>
|
||||
<view v-else class="towcontentthere_towview"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent" v-if="datalist.sec.is_user_vip ==1 && user_y_frequshow">
|
||||
<view class="towcontentone">
|
||||
商家会员卡
|
||||
</view>
|
||||
<view class="towcontenttow">
|
||||
享更多优惠
|
||||
</view>
|
||||
<view class="towcontentthere flex-between" @click="clickselectss()">
|
||||
<view class="towcontentthere_one" v-if="datalist.sec.text_title">
|
||||
<text>{{datalist.sec.text_title}}</text>
|
||||
</view>
|
||||
<view class="towcontentthere_one" v-else>
|
||||
开通后享<text>更多优惠</text>
|
||||
</view>
|
||||
<view class="towcontentthere_tow flex-start">
|
||||
<text v-if="pay_type != 3"
|
||||
class="towcontentthere_towtext">{{datalist.sec.user_y_frequ}}/{{datalist.sec.user_z_frequ}}次</text>
|
||||
<text v-if="pay_type == 3"
|
||||
class="towcontentthere_towtext">{{Number(datalist.sec.user_y_frequ) - Number(elist.number)}}/{{datalist.sec.user_z_frequ}}次</text>
|
||||
<u-icon v-if="pay_type == 3" name="checkmark-circle" color="#2979ff" size="16"></u-icon>
|
||||
<view v-else class="towcontentthere_towview"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontent">
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
预约人数
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
{{elist.number}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between" v-if="datalist.sec.is_user_vip ==1 && pay_type == 3">
|
||||
<view class="therecontenttow_one">
|
||||
会员折扣
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
-{{datalist.sec.pre_price || '0'}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between" v-else>
|
||||
<view class="therecontenttow_one">
|
||||
会员折扣
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
￥{{datalist.balance.pre_price || '0'}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
原价
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
￥{{datalist.total_price}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
优惠券
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
暂无可用
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="therecontenttow_tow" style="color:#FC5F69;"
|
||||
v-if="datalist.sec.is_user_vip ==1 && pay_type == 3">
|
||||
￥{{datalist.sec.price}}
|
||||
</view>
|
||||
<view class="therecontenttow_tow" style="color:#FC5F69;" v-else>
|
||||
￥{{datalist.total_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent">
|
||||
<view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
手机号码
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
{{mobile}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
姓名
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
张雪
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="sixcontent" v-if="pay_type != 3">
|
||||
<view class="sixcontentone flex-between">
|
||||
<view class="sixcontent_one">
|
||||
支付方式
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttow">
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(1)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/wx.png" mode="aspectFill"></image>
|
||||
<text class="sixcontenttowitemonetext">微信支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 1" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(2)"
|
||||
v-if="datalist.is_balance == 1 || datalist.balance_money<0 || datalist.balance_money != '0.00'">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/ye.png" mode="aspectFill"></image>
|
||||
<text class="sixcontenttowitemonetext">余额支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 2" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourcontent">
|
||||
<view class="fourcontentone flex-start">
|
||||
<view class="fourcontent_one">
|
||||
预约须知：
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourcontenttow flex-colum-start">
|
||||
<view class="" v-html="datalist.details">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_one flex-start" v-if="datalist.sec.is_user_vip ==1 && pay_type == 3">
|
||||
<view class="fixedview_oneone">
|
||||
应付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>{{datalist.sec.price}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view v-else> -->
|
||||
<view class="fixedview_one flex-start" v-if="pay_type == 1 && is_sec ==0">
|
||||
<view class="fixedview_oneone">
|
||||
应付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>￥{{datalist.wechat.wechat_money.money_str}}
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_one flex-start" v-if="pay_type == 2 && is_sec ==0">
|
||||
<view class="fixedview_oneone">
|
||||
应付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow flex-colum-start">
|
||||
<text>¥合计{{Number(datalist.balance.balance_money.money_str)+Number(datalist.balance.wechat_money)}}</text>
|
||||
<text style="font-size: 20rpx;">余额：{{datalist.balance.balance_money.money_str}}
|
||||
微信：{{datalist.balance.wechat_money}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_one flex-start" v-if="is_sec == 1">
|
||||
<view class="fixedview_oneone">
|
||||
应付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>{{datalist.sec.price}}
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<!-- </view> -->
|
||||
<view class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
|
||||
立即付款
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<u-popup :show="showpopup" @close="closepopup" @open="openpopup" mode="center" :round="10">
|
||||
<view class="u-popupflex-colum flex-colum">
|
||||
<view class="u-popupflex-columview">
|
||||
请输入支付密码
|
||||
</view>
|
||||
<u-code-input v-model="ucodeinputvalue" :maxlength="6" dot
|
||||
@finish="finish"></u-code-input>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showpopup: false,
|
||||
user_y_frequshow: true,
|
||||
ucodeinputvalue: '',
|
||||
textareavalue: '',
|
||||
height: '',
|
||||
upperlist: {},
|
||||
order_id: '',
|
||||
is_sec: 0,
|
||||
elist: {
|
||||
people: {
|
||||
nickname: '',
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
mobile: uni.cache.get('loginuser').userinfo.mobile,
|
||||
datalist: {
|
||||
sec: {
|
||||
is_store_vip: '',
|
||||
is_user_vip: '',
|
||||
user_y_frequ: '',
|
||||
user_z_frequ: ''
|
||||
},
|
||||
balance: {
|
||||
pre_price: ''
|
||||
},
|
||||
wechat: {
|
||||
wechat_money: {
|
||||
money_str: ""
|
||||
}
|
||||
},
|
||||
balance: {
|
||||
balance_money: {
|
||||
money_str: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
pay_type: 1
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
// this.elist = JSON.parse(optionItem)
|
||||
this.order_id = e.order_id
|
||||
let res = await this.api.reservationorderecho({
|
||||
order_id: e.order_id
|
||||
})
|
||||
if (res) {
|
||||
this.elist = res
|
||||
if (!this.elist.people) {
|
||||
this.elist.people = {
|
||||
nickname: '',
|
||||
id: ''
|
||||
}
|
||||
}
|
||||
if (Number(this.datalist.sec.user_y_frequ) + Number(this.elist.number) > this.datalist.sec
|
||||
.user_z_frequ) {
|
||||
this.user_y_frequshow == false
|
||||
} else {
|
||||
this.user_y_frequshow == true
|
||||
}
|
||||
this.okmakenowreservation()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openpopup() {
|
||||
console.log('open');
|
||||
},
|
||||
closepopup() {
|
||||
this.showpopup = false
|
||||
},
|
||||
|
||||
finish(e) {
|
||||
console.log(e)
|
||||
this.reservationmakenowsub()
|
||||
},
|
||||
showpopupclick() {
|
||||
if (this.pay_type == 1) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
this.reservationmakenowsub()
|
||||
return false;
|
||||
} else {
|
||||
if (this.pay_type == 2 || this.datalist.sec.is_user_vip == 1) {
|
||||
if (this.datalist.is_vip_password == 0) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您目前没有设置密码，请先设置支付密码',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/repairpassword'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showpopup = true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async reservationmakenowsub() {
|
||||
var datareslane = await this.api.reservationmakenowsub({
|
||||
service_id: this.elist.store_service_id,
|
||||
number: this.elist.number,
|
||||
mobile: this.elist.mobile,
|
||||
remark: this.elist.remark,
|
||||
pay_type: this.pay_type,
|
||||
time: this.elist.time,
|
||||
people_id: this.elist.people.id != '' ? this.elist.people.id : 0,
|
||||
order_id: this.order_id,
|
||||
is_sec: this.is_sec
|
||||
})
|
||||
console.log(datareslane)
|
||||
if (datareslane.data) {
|
||||
let res = await this.api.paygetpayparams({
|
||||
order_id: datareslane.data.order_id,
|
||||
password: this.ucodeinputvalue
|
||||
}) //判断是否支付成功
|
||||
this.ucodeinputvalue = ''
|
||||
if (res.data.pay_status == 0) {
|
||||
this.showpopup = false
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.pay_data.payAppId, // 微信支付商户号
|
||||
timeStamp: res.data.pay_data.payTimeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.data.pay_data.paynonceStr, // 随机字符串
|
||||
package: res.data.pay_data.payPackage, // 固定值
|
||||
signType: res.data.pay_data.paySignType, //固定值
|
||||
paySign: res.data.pay_data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: "/pages/order/ordersuccess?id=" + datareslane.data
|
||||
.order_id,
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
uni.redirectTo({
|
||||
url: "/pages/my/order/index?e=" + 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: "/pages/order/ordersuccess?id=" + datareslane.data.order_id,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.message || res.msg,
|
||||
icon: "none",
|
||||
success() {
|
||||
setTimeout(res => {
|
||||
// if (options.toast) {
|
||||
uni.hideLoading()
|
||||
// }
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
clickselects() {
|
||||
this.is_sec = this.is_sec == 1 ? 0 : 1
|
||||
console.log(this.is_sec)
|
||||
this.okmakenowreservation()
|
||||
},
|
||||
clickselectss() {
|
||||
this.pay_type = this.pay_type == 3 ? 1 : 3
|
||||
},
|
||||
clickselect(b) {
|
||||
this.pay_type = b
|
||||
this.okmakenowreservation()
|
||||
},
|
||||
async okmakenowreservation() {
|
||||
let res = await this.api.okmakenowreservation({
|
||||
service_id: this.elist.store_service_id,
|
||||
number: this.elist.number,
|
||||
order_id: this.order_id
|
||||
})
|
||||
if (res) {
|
||||
this.datalist = res.vip
|
||||
this.datalist.details = res.vip.details.replace(/\<img/g,
|
||||
'<img style="max-width:100%;height:auto" ');
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.onecontent_one {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontent_tow {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 32rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.onecontenttow_one {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontenttow_tow {
|
||||
margin-left: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.towcontentone {
|
||||
padding: 8rpx 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
background: #333333;
|
||||
border-radius: 18rpx 0 0 0;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #BFAB8D;
|
||||
}
|
||||
|
||||
.towcontenttow {
|
||||
padding: 8rpx 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 136rpx;
|
||||
width: 142rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #432805;
|
||||
border-radius: 18rpx 0px 18rpx 0px;
|
||||
background: #E7C898;
|
||||
}
|
||||
|
||||
.towcontentthere {
|
||||
padding: 80rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.towcontentthere_tow {
|
||||
.towcontentthere_towtext {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.towcontentthere_towview {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentthere_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FC5F69;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fivecontentitem:nth-child(2) {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.fivecontentitem {
|
||||
padding: 18rpx 0;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fivecontentitem_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fivecontentitem_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow:nth-child(1) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.therecontenttow {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontenttow_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.sixcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.sixcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontenttow {
|
||||
.sixcontenttowitem {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.sixcontenttowitemone {
|
||||
image {
|
||||
margin-left: 24rpx;
|
||||
width: 31.37rpx;
|
||||
height: 27.34rpx;
|
||||
}
|
||||
|
||||
.sixcontenttowitemonetext {
|
||||
margin-left: 14rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fourcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fourcontenttow {
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-popupflex-colum {
|
||||
padding: 80rpx 40rpx;
|
||||
border-radius: 50rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.u-popupflex-columview {
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
933
pages/order/confirmhotel.vue
Normal file
933
pages/order/confirmhotel.vue
Normal file
@@ -0,0 +1,933 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="onecontentone flex-start">
|
||||
<view class="onecontent_one">
|
||||
<view class="onecontenttowthere flex-start">
|
||||
<view class="positionfixedbox flex-between">
|
||||
<view class="positionfixedbox_one flex-between">
|
||||
<view class="positionfixedbox_onebox flex-start">
|
||||
<text>{{lists.start}}</text>
|
||||
<text>周{{lists.weekstart}}</text>
|
||||
</view>
|
||||
<view class="positionfixedbox_onebox_box">
|
||||
{{lists.long}}晚
|
||||
</view>
|
||||
<view class="positionfixedbox_onebox flex-start" style="margin-right: 28rpx;">
|
||||
<text>{{lists.end}}</text>
|
||||
<text>周{{lists.weekend}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttow">
|
||||
{{elist.title}}
|
||||
</view>
|
||||
<view class="towindex_box_bouttn">
|
||||
<text style="margin-left: 10rpx;" v-for="(item,index) in elist.label" :key="index">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="towcontentitemtow_one_there flex-start">
|
||||
<u-icon name="checkmark-circle" color="#76903C" size="14"></u-icon>
|
||||
<text class="towcontentitemtow_one_theretext">{{elist.cancel_time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent">
|
||||
<view class="fivecontentitem flex-between" @click="popupshow = true">
|
||||
<view class="fivecontentitem_one">
|
||||
房间数量
|
||||
</view>
|
||||
<view class="fivecontentitem_tow flex-between">
|
||||
<view class="">
|
||||
{{among}}间（每间最多住{{elist.capacity_people}}人）
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#9b9b9b" size="14"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontentitem flex-between" v-for="(item,index1) in fullname" :key="index1">
|
||||
<view class="fivecontentitem_one">
|
||||
姓名
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
<input type="text" v-model="item.name" placeholder="每间填1位住客姓名" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
手机号码
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
<input type="number" v-model="mobile" placeholder="请输入手机号码" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
预计到店
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
<input type="number" v-model="checkin_time" placeholder="房间将整晚保留" />
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="therecontent">
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
会员折扣
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
-{{allamounts.price.pre_price || '0'}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
原价
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
￥{{allamounts.price.meet_price}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
优惠券
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
暂无可用
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="therecontenttow_tow" style="color:#FC5F69;">
|
||||
￥{{allamounts.price.meet_price}}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontent" v-if="pay_type != 3">
|
||||
<view class="sixcontentone flex-between">
|
||||
<view class="sixcontent_one">
|
||||
支付方式
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttow">
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(1)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/wx.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="sixcontenttowitemonetext">微信支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 1" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(2)"
|
||||
v-if="allamounts.balance.money != '0.00'">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/ye.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="sixcontenttowitemonetext">余额支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 2" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourcontent">
|
||||
<view class="fourcontentone flex-start">
|
||||
<view class="fourcontent_one">
|
||||
购买须知：
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourcontenttow flex-colum-start">
|
||||
<view class="" v-html="datalist.purchase">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_one flex-start">
|
||||
<view class="fixedview_oneone">
|
||||
应付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>{{allamounts.price.meet_price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
|
||||
立即付款
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="showpopup" @close="closepopup" mode="center" :round="10">
|
||||
<view class="u-popupflex-colum flex-colum">
|
||||
<view class="u-popupflex-columview">
|
||||
请输入支付密码
|
||||
</view>
|
||||
<u-code-input v-model="ucodeinputvalue" :maxlength="6" dot @finish="finish"></u-code-input>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-popup :show="popupshow" @close="popupclose" :round="10">
|
||||
<view class="classpopupshow flex-colum">
|
||||
<view class="classpopupshowbox flex-between">
|
||||
<view class="flex-colum-start">
|
||||
<text class="classpopupshowboxflex-colum_one">房间数量</text>
|
||||
</view>
|
||||
<view class="classpopupshowboxnumber">
|
||||
<u-number-box v-model="among" :min="0" :max="10">
|
||||
<view slot="minus" class="minus">
|
||||
<u-icon name="minus" size="12"></u-icon>
|
||||
</view>
|
||||
<text slot="input" style="width: 50px;text-align: center;" class="input">{{among}}</text>
|
||||
<view slot="plus" class="plus">
|
||||
<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
|
||||
</view>
|
||||
</u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkin_time:'14:00',
|
||||
adult: 1, //可住成人
|
||||
children: 0, //可住儿童
|
||||
bed: 1, //床位
|
||||
among: 1, //间数
|
||||
showpopup: false,
|
||||
popupshow: false, //选择人数
|
||||
user_y_frequshow: true,
|
||||
ucodeinputvalue: '',
|
||||
textareavalue: '',
|
||||
height: '',
|
||||
upperlist: {},
|
||||
hotel_id: '',
|
||||
is_sec: 0,
|
||||
fullname: [{
|
||||
name: ""
|
||||
}],
|
||||
elist: {
|
||||
people: {
|
||||
nickname: '',
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
lists: {
|
||||
long: '', //多少天
|
||||
start: '',
|
||||
end: '',
|
||||
weekstart: '',
|
||||
weekend: '',
|
||||
},
|
||||
mobile: uni.cache.get('loginuser').userinfo.mobile,
|
||||
datalist: {
|
||||
sec: {
|
||||
is_store_vip: '',
|
||||
is_user_vip: '',
|
||||
user_y_frequ: '',
|
||||
user_z_frequ: ''
|
||||
},
|
||||
balance: {
|
||||
pre_price: ''
|
||||
},
|
||||
wechat: {
|
||||
wechat_money: {
|
||||
money_str: ""
|
||||
}
|
||||
},
|
||||
balance: {
|
||||
balance_money: {
|
||||
money_str: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
pay_type: 1,
|
||||
allamounts: {
|
||||
price: {},
|
||||
balance: {}
|
||||
},
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
this.hotel_id = e.hotel_id
|
||||
this.lists.start = e.start_time
|
||||
this.lists.end = e.end_time
|
||||
this.lists.long = e.long
|
||||
this.lists.weekstart = this.getweekday(this.lists.start)
|
||||
this.lists.weekend = this.getweekday(this.lists.end)
|
||||
this.among = e.number //间数
|
||||
this.adult = e.adult, //可住成人
|
||||
this.children = e.children //可住儿童
|
||||
this.add()
|
||||
this.reservationhoteldetial()
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.fullname = []
|
||||
for (let i = 0; i < this.among; i++) {
|
||||
this.fullname.push({
|
||||
"name": '',
|
||||
})
|
||||
}
|
||||
},
|
||||
async reservationhotelconfirm(e) { //获取他的价格
|
||||
let res = await this.api.reservationhotelconfirm({
|
||||
hotel_id: this.hotel_id,
|
||||
number: this.among,
|
||||
start_time: this.lists.start, //开始时间
|
||||
end_time: this.lists.end, //结束时间
|
||||
})
|
||||
this.allamounts = res
|
||||
},
|
||||
getweekday(date) {
|
||||
var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
|
||||
var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
|
||||
return week;
|
||||
},
|
||||
closepopup() {
|
||||
this.showpopup = false
|
||||
},
|
||||
popupclose() {
|
||||
this.reservationhoteldetial()
|
||||
this.popupshow = false
|
||||
this.add()
|
||||
},
|
||||
finish(e) {
|
||||
console.log(e)
|
||||
this.reservationmakenowsub()
|
||||
},
|
||||
async reservationhoteldetial() {
|
||||
let res = await this.api.reservationhoteldetial({
|
||||
hotel_id: this.hotel_id,
|
||||
start_time: this.lists.start, //开始时间
|
||||
end_time: this.lists.end, //结束时间
|
||||
among: this.among //
|
||||
})
|
||||
try {
|
||||
if (res) {
|
||||
this.elist = res
|
||||
this.elist.house_details = res.house_details.replace(/\<img/g,
|
||||
'<img style="max-width:100%;height:auto" ');
|
||||
this.reservationhotelconfirm()
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
showpopupclick() {
|
||||
if (this.pay_type == 1) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
this.fullname = this.fullname.map(user => user.name)
|
||||
this.reservationmakenowsub()
|
||||
return false;
|
||||
} else {
|
||||
if (this.pay_type == 2) {
|
||||
if (this.elist.sec_password == 0) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您目前没有设置密码，请先设置支付密码',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/repairpassword'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showpopup = true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async reservationmakenowsub() {
|
||||
var datareslane = await this.api.reservationhotelsub({
|
||||
hotel_id: this.hotel_id,
|
||||
number: this.among, //房间数量
|
||||
checkin_number: this.adult + this.children, //入住人数
|
||||
checkin_username: this.fullname.toString(), //入住人姓名
|
||||
checkin_mobile: this.mobile, //入住人联系电话
|
||||
checkin_time: this.checkin_time, //入住人到店时间
|
||||
start_time: this.lists.start, //开始时间
|
||||
end_time: this.lists.end, //离店时间
|
||||
notes: '', //备注
|
||||
pay_type: this.pay_type, //1 微信 2余额卡
|
||||
})
|
||||
console.log(datareslane)
|
||||
this.fullname = [{
|
||||
name: ""
|
||||
}]
|
||||
if (datareslane.order_id) {
|
||||
let res = await this.api.reservationhotelgetpay({
|
||||
order_id: datareslane.order_id,
|
||||
password: this.ucodeinputvalue
|
||||
}) //判断是否支付成功
|
||||
this.ucodeinputvalue = ''
|
||||
if (res.pay_status == 0) {
|
||||
this.showpopup = false
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.pay_data.payAppId, // 微信支付商户号
|
||||
timeStamp: res.pay_data.payTimeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.pay_data.paynonceStr, // 随机字符串
|
||||
package: res.pay_data.payPackage, // 固定值
|
||||
signType: res.pay_data.paySignType, //固定值
|
||||
paySign: res.pay_data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: "/pages/order/ordersuccess?id=" + datareslane.order_id,
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
uni.redirectTo({
|
||||
url: "/pages/my/order/index?e=" + 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: "/pages/order/ordersuccess?id=" + datareslane.order_id,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.message || res.msg,
|
||||
icon: "none",
|
||||
success() {
|
||||
setTimeout(res => {
|
||||
// if (options.toast) {
|
||||
uni.hideLoading()
|
||||
// }
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
clickselect(b) {
|
||||
this.pay_type = b
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentone {
|
||||
.onecontent_one {
|
||||
.onecontenttowthere {
|
||||
.positionfixedbox {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 22rpx;
|
||||
|
||||
.positionfixedbox_one {
|
||||
flex: auto;
|
||||
|
||||
.positionfixedbox_onebox_box::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 10rpx;
|
||||
left: -10rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 1rpx;
|
||||
background: #76903C;
|
||||
}
|
||||
|
||||
.positionfixedbox_onebox_box::after {
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 10rpx;
|
||||
height: 1rpx;
|
||||
background: #76903C;
|
||||
}
|
||||
|
||||
.positionfixedbox_onebox_box {
|
||||
margin: 0 40rpx;
|
||||
position: relative;
|
||||
width: 50rpx;
|
||||
height: 40rpx;
|
||||
background: #F6FAF2;
|
||||
border-radius: 14rpx;
|
||||
border: 2rpx solid #76903C;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #76903C;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.positionfixedbox_onebox {
|
||||
text:nth-child(1) {
|
||||
font-size: 28rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
margin-left: 10rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.positionfixedbox_tow::before {
|
||||
content: '';
|
||||
margin-right: 26rpx;
|
||||
display: inline-block;
|
||||
width: 0rpx;
|
||||
height: 40rpx;
|
||||
opacity: 1;
|
||||
border: 2rpx solid #707070;
|
||||
}
|
||||
|
||||
.positionfixedbox_tow {
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towindex_box_bouttn {
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.towcontentitemtow_one_there {
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
|
||||
.towcontentitemtow_one_theretext {
|
||||
margin-left: 18rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #76903C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.towcontentone {
|
||||
padding: 8rpx 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
background: #333333;
|
||||
border-radius: 18rpx 0 0 0;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #BFAB8D;
|
||||
}
|
||||
|
||||
.towcontenttow {
|
||||
padding: 8rpx 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 136rpx;
|
||||
width: 142rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #432805;
|
||||
border-radius: 18rpx 0px 18rpx 0px;
|
||||
background: #E7C898;
|
||||
}
|
||||
|
||||
.towcontentthere {
|
||||
padding: 80rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.towcontentthere_tow {
|
||||
.towcontentthere_towtext {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.towcontentthere_towview {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentthere_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FC5F69;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent {
|
||||
width: 100%;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fivecontentitem:nth-child(2) {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.fivecontentitem {
|
||||
background: #FFFFFF;
|
||||
padding: 16rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fivecontentitem_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.fivecontentitem_tow {
|
||||
width: 70%;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow:nth-child(1) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.therecontenttow {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontenttow_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.sixcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.sixcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontenttow {
|
||||
.sixcontenttowitem {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.sixcontenttowitemone {
|
||||
image {
|
||||
margin-left: 24rpx;
|
||||
width: 31.37rpx;
|
||||
height: 27.34rpx;
|
||||
}
|
||||
|
||||
.sixcontenttowitemonetext {
|
||||
margin-left: 14rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fourcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fourcontenttow {
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-popupflex-colum {
|
||||
padding: 80rpx 40rpx;
|
||||
border-radius: 50rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.u-popupflex-columview {
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.classpopupshow {
|
||||
padding-bottom: 60rpx;
|
||||
|
||||
.classpopupshowbox {
|
||||
width: 100%;
|
||||
padding: 16rpx 60rpx;
|
||||
border-bottom: 2rpx solid #F0F0F0;
|
||||
|
||||
.flex-colum-start {
|
||||
.classpopupshowboxflex-colum_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.classpopupshowboxflex-colum_tow {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.classpopupshowboxnumber {
|
||||
.minus {
|
||||
padding: 20rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-width: 1px;
|
||||
border-color: #CDCDCD;
|
||||
border-style: solid;
|
||||
border-top-left-radius: 100px;
|
||||
border-top-right-radius: 100px;
|
||||
border-bottom-left-radius: 100px;
|
||||
border-bottom-right-radius: 100px;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.plus {
|
||||
padding: 20rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #555656;
|
||||
border-radius: 50%;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
453
pages/order/index.vue
Normal file
453
pages/order/index.vue
Normal file
@@ -0,0 +1,453 @@
|
||||
<template>
|
||||
<view class="content" style="padding-bottom: 10rpx;" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="onecontent_oen flex-start">
|
||||
<input class="onecontent_oen_input" v-model="like" type="text" placeholder="请输入服务名">
|
||||
<text class="onecontent_oen_text" @click="init_fn">搜索</text>
|
||||
</view>
|
||||
<view class="onecontent_tow">
|
||||
<view ref="uTabs" class="onecontent_tow_item flex-colum" v-for="(item,index) in swipercurrentdata"
|
||||
:key="item.id" @click="orderswitch(item.id)">
|
||||
<view :class="swiperCurrent == item.id?'onecontent_tow_itemtexts':'onecontent_tow_itemtext'">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<view class="towcontentitem" v-if="list.length>0" v-for="(item,index1) in list" :key="index1"
|
||||
@click="eeInfo(item)">
|
||||
|
||||
<view class="towcontentitemtow flex-start">
|
||||
<image class="towcontentitemtow_imge" :src="item.img" mode="aspectFill"></image>
|
||||
<view class="towcontentitemtow_one flex-colum-start">
|
||||
<text class="towcontentitemtow_one_one">{{item.title}}</text>
|
||||
<text class="towcontentitemtow_one_tow"><text
|
||||
style="font-size:28rpx;">¥{{item.price}}</text></text>
|
||||
</view>
|
||||
<view class="towcontentitemtow_tow">
|
||||
预约
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow" @click="overlayshow = false">
|
||||
<view class="warp">
|
||||
<view class="rect flex-colum" @tap.stop>
|
||||
<view class="rectone">
|
||||
确定删除订单吗?
|
||||
</view>
|
||||
<view class="recttow flex-between">
|
||||
<view class="recttow_one" @click="cancelOrder(item)">
|
||||
确定
|
||||
</view>
|
||||
<view class="recttow_tow" @click="overlayshow = false">
|
||||
取消
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" class="flex-colum">
|
||||
<image :src="bgnothave" mode="widthFix" style="margin-top: 100rpx;">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />
|
||||
</view>
|
||||
<bottombbar :valuebbar='1'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from "dayjs";
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
list: [],
|
||||
is_end: false,
|
||||
swiperCurrent: 0,
|
||||
overlayshow: false,
|
||||
swipercurrentdata: [],
|
||||
like: '',
|
||||
lists: {
|
||||
long: '', //多少天
|
||||
start: '',
|
||||
end: '',
|
||||
weekstart: '',
|
||||
weekend: '',
|
||||
},
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.reservationlist()
|
||||
},
|
||||
onShow() {
|
||||
this.reservationclassyy()
|
||||
this.$store.dispatch("actionsclassification");
|
||||
this.reservationlist()
|
||||
},
|
||||
onLoad(e) {
|
||||
this.swiperCurrent = e.id
|
||||
this.lists.start = dayjs(new Date()).format("YYYY-MM-DD");
|
||||
this.lists.end = dayjs(new Date(this.lists.start).getTime() + 86400000).format('YYYY-MM-DD');
|
||||
},
|
||||
methods: {
|
||||
async reservationclassyy() {
|
||||
let res = await this.api.reservationclassyy()
|
||||
this.swipercurrentdata = [...[{
|
||||
id: 0,
|
||||
name: '全部'
|
||||
}], ...res]
|
||||
},
|
||||
async reservationlist() {
|
||||
let res = await this.api.reservationlist({
|
||||
store_id: uni.getStorageSync('store_id'),
|
||||
page: this.form.page,
|
||||
like: this.like,
|
||||
service_type_id: this.swiperCurrent,
|
||||
start_time: this.lists.start,
|
||||
end_time: this.lists.end,
|
||||
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
init_fn() {
|
||||
this.list = []
|
||||
this.is_end = false
|
||||
this.form.page = 1
|
||||
this.form.status = 'loadmore'
|
||||
this.reservationlist()
|
||||
},
|
||||
orderswitch(e) {
|
||||
this.swiperCurrent = e
|
||||
this.init_fn()
|
||||
},
|
||||
eeInfo(e) { //查看订单详情
|
||||
if (uni.getStorageSync('loginuser').model_type == 'Hotel') {
|
||||
uni.pro.navigateTo('order/orderInfohotel', {
|
||||
id: e.id,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('order/orderInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
background: #FFFFFF;
|
||||
padding: 10rpx 28rpx;
|
||||
|
||||
.onecontent_oen {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
border-radius: 36rpx;
|
||||
border: 1rpx solid var(--bg-color-button);
|
||||
padding-right: 8rpx;
|
||||
|
||||
.onecontent_oen_input {
|
||||
padding-left: 32rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.onecontent_oen_text {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 56rpx;
|
||||
width: 116rpx;
|
||||
height: 56rpx;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontent_tow {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
|
||||
.onecontent_tow_item:nth-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.onecontent_tow_item {
|
||||
position: relative;
|
||||
margin: 0 10rpx;
|
||||
|
||||
.onecontent_tow_itemtexts {
|
||||
white-space: nowrap;
|
||||
padding: 8rpx 18rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid var(--bg-color-button);
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: var(--bg-color-button);
|
||||
}
|
||||
|
||||
.onecontent_tow_itemtext {
|
||||
white-space: nowrap;
|
||||
padding: 8rpx 18rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
// .onecontent_tow_itemtexts::after {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// bottom: -10rpx;
|
||||
// left: 50%;
|
||||
// transform: translateX(-50%);
|
||||
// width: 19.33rpx;
|
||||
// height: 6.66rpx;
|
||||
// background: url(https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/my/order/order1.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.flex-colum_image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
text {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitem {
|
||||
margin-top: 32rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.towcontentitemone {
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
|
||||
.towcontentitemone_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentitemone_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
|
||||
.towcontentitemone_towimage {
|
||||
margin-right: 10rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
position: relative;
|
||||
|
||||
.towcontentitemtow_imge {
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
background: #666666;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.towcontentitemtow_one {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 32rpx;
|
||||
justify-content: space-around;
|
||||
height: 144rpx;
|
||||
|
||||
.towcontentitemtow_one_one {
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentitemtow_one_tow {
|
||||
margin-top: 24rpx;
|
||||
font-size: 40rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #FC5F69;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow_tow {
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Regular, Roboto;
|
||||
font-weight: 400;
|
||||
padding: 8rpx 30rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemthere {
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.towcontentitemthereitem {
|
||||
margin-left: 24rpx;
|
||||
padding: 8rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_one {
|
||||
background: linear-gradient(101deg, #FA8E5D 0%, #F45E4D 100%);
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_tow {
|
||||
background: #F6F6F6;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_there {
|
||||
background: linear-gradient(101deg, #8083A7 0%, #4D4E64 100%);
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
padding: 40rpx 68rpx;
|
||||
width: 480rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 42rpx;
|
||||
|
||||
.rectone {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow {
|
||||
width: 100%;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.recttow_one {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
border: 2rpx solid #999999;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow_tow {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #333333;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
1131
pages/order/orderInfo.vue
Normal file
1131
pages/order/orderInfo.vue
Normal file
File diff suppressed because it is too large
Load Diff
1418
pages/order/orderInfohotel.vue
Normal file
1418
pages/order/orderInfohotel.vue
Normal file
File diff suppressed because it is too large
Load Diff
1445
pages/order/orderInfos.vue
Normal file
1445
pages/order/orderInfos.vue
Normal file
File diff suppressed because it is too large
Load Diff
196
pages/order/ordersuccess.vue
Normal file
196
pages/order/ordersuccess.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<view class="container" :style="[theme]">
|
||||
<view class="header-wrap">
|
||||
<image class="icon" src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/success.png" mode="widthFix">
|
||||
</image>
|
||||
<text class="t" v-if="info.status == 0">支付失败</text>
|
||||
<text class="t" v-if="info.status == 1">成功支付</text>
|
||||
</view>
|
||||
<view class="status-wrap" v-if="info.status == 1">
|
||||
<view class="line"></view>
|
||||
<view class="info-wrap">
|
||||
<view class="card">
|
||||
<view class="num">
|
||||
<text class="i">￥</text>
|
||||
<text class="n">{{ info.money || '-' }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text>订单编号：{{ info.out_trade_no || '-' }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text>下单时间：{{ info.updatetime || '-'}}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text>支付方式：{{ info.pay_type || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-wrap">
|
||||
<view class="btn" @click="toOrder">
|
||||
<text>查看订单</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderId: '',
|
||||
info: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
|
||||
onReady() {
|
||||
//动态修改状态栏的颜色
|
||||
uni.setNavigationBarColor({
|
||||
backgroundColor:this.theme.cartpieces
|
||||
})
|
||||
},
|
||||
async onLoad(e) {
|
||||
console.log(e)
|
||||
if( uni.getStorageSync('loginuser').model_type == 'Hotel'){
|
||||
this.info = await this.api.payhotelorderstatus({
|
||||
order_id: e.id
|
||||
})
|
||||
}else{
|
||||
this.info = await this.api.payorderstatus({
|
||||
order_id: e.id
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
toOrder() {
|
||||
uni.pro.navigateTo('my/order/index', {
|
||||
e: 0
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.header-wrap {
|
||||
padding: 50upx 0 94upx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--bg-color-button);
|
||||
|
||||
.icon {
|
||||
$size: 98upx;
|
||||
width: 98rpx;
|
||||
height: 93rpx;
|
||||
margin-right: 42upx;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 40upx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.status-wrap {
|
||||
padding: 0 28upx;
|
||||
margin-top: -50upx;
|
||||
$h: 20upx;
|
||||
|
||||
.line {
|
||||
height: $h;
|
||||
border-radius: $h;
|
||||
background-color: 79, 81, 104;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
padding: 0 32upx;
|
||||
margin-top: $h / 2 * -1;
|
||||
position: relative;
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
padding: 28upx 64upx 64upx;
|
||||
border-radius: 0 0 28upx 28upx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.num {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
|
||||
.i {
|
||||
font-size: 24upx;
|
||||
position: relative;
|
||||
bottom: 12upx;
|
||||
}
|
||||
|
||||
.n {
|
||||
font-size: 44upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
padding-top: 28upx;
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrap {
|
||||
padding: 64upx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.btn {
|
||||
width: 296upx;
|
||||
height: 70upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 46rpx;
|
||||
opacity: 1;
|
||||
font-size: 28upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
477
pages/order/paybill.vue
Normal file
477
pages/order/paybill.vue
Normal file
@@ -0,0 +1,477 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="card">
|
||||
<view class="info-wrap">
|
||||
<image class="cover" :src="shopInfo.portrait" mode="aspectFill"></image>
|
||||
<text class="t">{{ shopInfo.userName }}</text>
|
||||
</view>
|
||||
<view class="input-wrap">
|
||||
<view class="input-cont">
|
||||
<text class="i">￥</text>
|
||||
<text class="num">{{ num }}</text>
|
||||
</view>
|
||||
<view class="tips"><input class="input" type="text" :maxlength="10" placeholder="添加付款备注（最多10个字）"
|
||||
v-model="remark" /></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="title"><text>支付方式</text></view>
|
||||
<view class="pay-list">
|
||||
<view class="item">
|
||||
<view class="label">
|
||||
<image class="icon" src="@/static/4.png" mode="aspectFit"></image>
|
||||
<text class="t">微信支付</text>
|
||||
</view>
|
||||
<uni-icons type="checkbox-filled" size="18" color="#54A347"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="num-wrap">
|
||||
<text>实付：</text>
|
||||
<text class="t b">￥{{ num || 0 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="number-key-wrap">
|
||||
<view class="number-key">
|
||||
<view class="left">
|
||||
<view class="num-list">
|
||||
<view class="item" v-for="item in 9" :key="item" hover-class="active" hover-stay-time="50"
|
||||
@click="numHandle(`${item + 1}`)">
|
||||
<text>{{ item + 1 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="num-foot">
|
||||
<view class="item" hover-class="active" hover-stay-time="50" @click="numHandle('0')">
|
||||
<text>0</text>
|
||||
</view>
|
||||
<view class="item" hover-class="active" hover-stay-time="50" @click="numHandle('.')">
|
||||
<text>.</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="item" hover-class="active" hover-stay-time="50" @click="delHandle" @longpress="longDel"
|
||||
@touchend="endLongDel">
|
||||
<uni-icons type="arrow-left" size="24"></uni-icons>
|
||||
</view>
|
||||
<view class="item confirm" hover-class="active" hover-stay-time="50" @click="submitHandle">
|
||||
<text>付款</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userAppId: '', // 用户id
|
||||
shopInfo: '', // 商户信息
|
||||
num: '', // 输入金额
|
||||
// maxNum: 200,
|
||||
remark: '', // 备注
|
||||
timer: null,
|
||||
orderNumber: '',
|
||||
type: 1
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
console.log(e, '111')
|
||||
if (e.orderNumber) {
|
||||
this.orderNumber = e.orderNumber;
|
||||
}
|
||||
|
||||
if (e.q) {
|
||||
let urlStr = decodeURIComponent(e.q);
|
||||
if (this.getQueryString(urlStr, 'userAppId')) {
|
||||
this.type = 1;
|
||||
this.userAppId = this.getQueryString(urlStr, 'userAppId')
|
||||
} else {
|
||||
this.type = 2;
|
||||
this.userAppId = urlStr.match('[^/]+(?!.*/)')[0]
|
||||
}
|
||||
console.log(this.userAppId, 'this.userAppId')
|
||||
this.getShopInfo();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 付款
|
||||
async submitHandle() {
|
||||
try {
|
||||
if (!this.num) {
|
||||
uni.showToast({
|
||||
title: '请输入支付金额',
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
uni.showLoading({
|
||||
title: '支付中...',
|
||||
mask: true
|
||||
});
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (resdata) => {
|
||||
let res = await this.requestHandle('/applet-pay/java-pay', {
|
||||
store_id: this.shopInfo.store_id, // 商户id
|
||||
pay_type: '1',
|
||||
money: this.num, // 金额
|
||||
remark: this.remark, // 备注
|
||||
code: resdata.code
|
||||
});
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
timeStamp: res.data.payTimeStamp,
|
||||
nonceStr: res.data.paynonceStr,
|
||||
package: res.data.payPackage,
|
||||
signType: res.data.paySignType,
|
||||
paySign: res.data.paySign,
|
||||
success: (res) => {
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: `成功支付${this.num}元`,
|
||||
showCancel: false,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// uni.reLaunch({
|
||||
// url: '/pages/index/index'
|
||||
// });
|
||||
uni.exitMiniProgram({
|
||||
success: () => {
|
||||
console.log('退出小程序成功');
|
||||
},
|
||||
fail: function(
|
||||
err) {
|
||||
console.log('退出小程序失败',err);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '支付失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({
|
||||
title: '支付失败:' + JSON.stringify(e),
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 删除
|
||||
delHandle() {
|
||||
uni.vibrateShort();
|
||||
this.num = this.num.slice(0, -1);
|
||||
},
|
||||
// 长按删除
|
||||
longDel() {
|
||||
this.timer = setInterval(() => {
|
||||
this.delHandle();
|
||||
}, 100);
|
||||
},
|
||||
// 结束长按删除
|
||||
endLongDel() {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
},
|
||||
// 输入
|
||||
numHandle(num) {
|
||||
uni.vibrateShort();
|
||||
this.num = this.clearNoNum({
|
||||
value: (this.num += num)
|
||||
});
|
||||
},
|
||||
// 封装请求
|
||||
requestHandle(url = '', data = {}, method = 'post') {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: `${'https://kysh.sxczgkj.cn'}/javaApi${url}`,
|
||||
method: method,
|
||||
header: {
|
||||
uniacid: '1',
|
||||
module: 'yb_o2ov2',
|
||||
appType: 'mini'
|
||||
// userId:uni.getStorageSync('userId')
|
||||
},
|
||||
data: data,
|
||||
success: (res) => {
|
||||
if (res.data.code == 1) {
|
||||
resolve(res.data);
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: res.data.msg
|
||||
});
|
||||
reject(res.data.msg);
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 获取商户信息
|
||||
async getShopInfo() {
|
||||
try {
|
||||
const res = await this.requestHandle('/applet-pay/get-applet-store-info', {
|
||||
code_id: this.userAppId,
|
||||
type: this.type
|
||||
});
|
||||
this.shopInfo = res.data;
|
||||
} catch (e) {}
|
||||
},
|
||||
// 获取url参数
|
||||
getQueryString(url, name) {
|
||||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i');
|
||||
var r = url.substr(1).match(reg);
|
||||
if (r != null) {
|
||||
return r[2];
|
||||
}
|
||||
return null;
|
||||
},
|
||||
/**
|
||||
* 去除字符串中除了数字和点以外的其他字符
|
||||
* @param {Object} obj
|
||||
*/
|
||||
clearNoNum(obj) {
|
||||
//如果用户第一位输入的是小数点，则重置输入框内容
|
||||
if (obj.value != '' && obj.value.substr(0, 1) == '.') {
|
||||
obj.value = '';
|
||||
}
|
||||
obj.value = obj.value.replace(/^0*(0\.|[1-9])/, '$1'); //粘贴不生效
|
||||
obj.value = obj.value.replace(/[^\d.]/g, ''); //清除“数字”和“.”以外的字符
|
||||
obj.value = obj.value.replace(/\.{2,}/g, '.'); //只保留第一个. 清除多余的
|
||||
obj.value = obj.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
|
||||
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
|
||||
if (obj.value.indexOf('.') < 0 && obj.value != '') {
|
||||
//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
|
||||
if (obj.value.substr(0, 1) == '0' && obj.value.length == 2) {
|
||||
obj.value = obj.value.substr(1, obj.value.length);
|
||||
}
|
||||
}
|
||||
return obj.value;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 28upx;
|
||||
padding-bottom: 640upx;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 28upx;
|
||||
border-radius: 28upx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 28upx;
|
||||
|
||||
.title {
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.cover {
|
||||
$size: 80upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
margin-right: 20upx;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
padding: 28upx 0 0;
|
||||
|
||||
.input-cont {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1upx solid #ececec;
|
||||
|
||||
.i {
|
||||
font-size: 42upx;
|
||||
font-weight: bold;
|
||||
margin-right: 12upx;
|
||||
position: relative;
|
||||
top: -4upx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 48upx;
|
||||
height: 80upx;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
padding-right: 14upx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 4upx;
|
||||
height: 40upx;
|
||||
background-color: #333;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -24upx;
|
||||
right: 0;
|
||||
animation: ani 0.8s ease-in-out 1.4s infinite;
|
||||
}
|
||||
|
||||
@keyframes ani {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
padding-top: 24upx;
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-list {
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 28upx 0;
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
$size: 60upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
}
|
||||
|
||||
.b {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.number-key-wrap {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #efefef;
|
||||
z-index: 999;
|
||||
padding: 28upx 28upx calc(env(safe-area-inset-bottom) + 28upx);
|
||||
border-radius: 28upx 28upx 0 0;
|
||||
$gap: 12upx;
|
||||
$radius: 14upx;
|
||||
$itemH: 120upx;
|
||||
|
||||
.number-key {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
font-size: 48upx;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: $radius;
|
||||
background-color: #fff;
|
||||
|
||||
&.active {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
|
||||
.num-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: $itemH $itemH $itemH;
|
||||
grid-gap: $gap;
|
||||
}
|
||||
|
||||
.num-foot {
|
||||
padding-top: $gap;
|
||||
display: grid;
|
||||
grid-gap: $gap;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-rows: $itemH;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 160upx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: $gap;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
|
||||
&:last-child {
|
||||
margin-top: $gap;
|
||||
font-size: 32upx;
|
||||
}
|
||||
|
||||
&.confirm {
|
||||
background-color: #ffcc17;
|
||||
|
||||
&.active {
|
||||
background-color: #e1b516;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
492
pages/order/paymentorder.vue
Normal file
492
pages/order/paymentorder.vue
Normal file
@@ -0,0 +1,492 @@
|
||||
<template>
|
||||
<view class="container" :style="[theme]">
|
||||
<view class="card">
|
||||
<view class="info-wrap flex-colum">
|
||||
<image class="cover" :src="list.store_avatar" mode="aspectFill"></image>
|
||||
<text class="t">{{list.store_nickname}}</text>
|
||||
</view>
|
||||
<view class="input-wrap">
|
||||
<view class="input-cont">
|
||||
<text class="i">￥</text>
|
||||
<input class="num" type="text" v-model="amount" :readonly="true" @input="checkNum($event)" />
|
||||
</view>
|
||||
<!-- <view class="tips"><input class="input" type="text" :maxlength="10" placeholder="添加付款备注（最多10个字）" v-model="remark" /></view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="title"><text>支付方式</text></view>
|
||||
<view class="pay-list">
|
||||
<view class="item flex-between">
|
||||
<view class="label">
|
||||
<image class="icon" src="@/static/ye.png" mode="aspectFit"></image>
|
||||
<view class="t flex-colum-start">
|
||||
<text class="t_one">会员卡支付</text>
|
||||
<text class="t_tow" style="color: #5B8FF9;">当前余额：{{list.user_balance}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-icon name="checkmark-circle-fill" size="18" color="#54A347" v-if="pay_type==2"></u-icon>
|
||||
<view @click="pay_typeclick(2)"
|
||||
style="border-radius: 50%; width:32rpx;height:32rpx;border: 1rpx solid #ccc;" v-else></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pay-list">
|
||||
<view class="item flex-between">
|
||||
<view class="label">
|
||||
<image class="icon" src="@/static/4.png" mode="aspectFit"></image>
|
||||
<view class="t flex-colum-start">
|
||||
<text class="t_one">微信支付</text>
|
||||
<text class="t_tow">使用微信支付</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-icon name="checkmark-circle-fill" size="20" color="#54A347" v-if="pay_type==1"></u-icon>
|
||||
<view @click="pay_typeclick(1)"
|
||||
style="border-radius: 50%; width:32rpx;height:32rpx;border: 1rpx solid #ccc;" v-else></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-wrap">
|
||||
<view class="btn" @click="showpopupclick"><text>确认支付</text></view>
|
||||
</view>
|
||||
<u-popup :show="showpopup" @close="closepopup" @open="openpopup" mode="center" :round="10">
|
||||
<view class="u-popupflex-colum flex-colum">
|
||||
<view class="u-popupflex-columview">
|
||||
请输入支付密码
|
||||
</view>
|
||||
<u-code-input v-model="ucodeinputvalue" :maxlength="6" dot :focus="true"
|
||||
@finish="finish"></u-code-input>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showpopup: false,
|
||||
ucodeinputvalue: '',
|
||||
amount: "",
|
||||
pay_type: 1,
|
||||
list: ''
|
||||
};
|
||||
},
|
||||
async onLoad(options) {
|
||||
this.reservationpaythebill()
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 方法
|
||||
checkNum(e) {
|
||||
let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
|
||||
console.log(val);
|
||||
if (!val) {
|
||||
this.amount = '';
|
||||
return
|
||||
}
|
||||
var reg = /[^\d.]/g
|
||||
|
||||
// 只能是数字和小数点，不能是其他输入
|
||||
val = val.replace(reg, "")
|
||||
// // 保证第一位只能是数字，不能是点
|
||||
val = val.replace(/^\./g, "");
|
||||
// // 小数只能出现1位
|
||||
val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
|
||||
// // 小数点后面保留2位
|
||||
val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
|
||||
console.log(val);
|
||||
this.$nextTick(() => {
|
||||
this.amount = val;
|
||||
})
|
||||
},
|
||||
pay_typeclick(e) {
|
||||
this.pay_type = e
|
||||
},
|
||||
async reservationpaythebill() {
|
||||
let res = await this.api.reservationpaythebill({
|
||||
store_id: uni.cache.get('store_id') // 判断显示哪家的作品
|
||||
})
|
||||
this.list = res
|
||||
},
|
||||
openpopup() {
|
||||
console.log('open');
|
||||
},
|
||||
closepopup() {
|
||||
this.ucodeinputvalue = ''
|
||||
this.showpopup = false
|
||||
},
|
||||
finish(e) {
|
||||
this.showpopup = false
|
||||
this.reservationmakenowsub()
|
||||
},
|
||||
async showpopupclick() {
|
||||
if (this.amount == null || this.amount == '') {
|
||||
uni.showToast({
|
||||
title: '支付金额不能为0',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.pay_type == 1) {
|
||||
this.reservationmakenowsub()
|
||||
}
|
||||
if (this.pay_type == 2) {
|
||||
let res = await this.api.useruserinfo() //p判断是否完成手机号
|
||||
uni.cache.set('loginuser', res);
|
||||
if (res.userinfo.mobile) {
|
||||
if (this.list.user_sec_password == 0) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您目前没有设置密码，请先设置支付密码',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/repairpassword'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showpopup = true
|
||||
}
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认订单需要获取您的手机号',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/index'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
async reservationmakenowsub() {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
try {
|
||||
var res = await this.api.reservationpaythebillsub({
|
||||
store_id: uni.cache.get('store_id'), // 判断显示哪家的作品
|
||||
amount: this.amount,
|
||||
pay_type: this.pay_type,
|
||||
sec_password: this.ucodeinputvalue
|
||||
})
|
||||
this.ucodeinputvalue = ''
|
||||
if (res.pay_status == 0) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
timeStamp: res.pay_data.payTimeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.pay_data.paynonceStr, // 随机字符串
|
||||
package: res.pay_data.payPackage, // 固定值
|
||||
signType: res.pay_data.paySignType, //固定值
|
||||
paySign: res.pay_data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
setTimeout(res => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
setTimeout(res => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #f8f7f7;
|
||||
}
|
||||
|
||||
.u-popupflex-colum {
|
||||
padding: 80rpx 40rpx;
|
||||
border-radius: 50rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.u-popupflex-columview {
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrap {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 50rpx;
|
||||
left: 0;
|
||||
padding: 28upx 28upx calc(env(safe-area-inset-bottom) + 28upx);
|
||||
|
||||
.btn {
|
||||
padding: 20upx 0;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 34rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 28upx;
|
||||
padding-bottom: 640upx;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 28upx;
|
||||
border-radius: 28upx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 28upx;
|
||||
|
||||
.title {
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.cover {
|
||||
$size: 80upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
margin-right: 20upx;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
padding: 28upx 0 0;
|
||||
|
||||
.input-cont {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1upx solid #ececec;
|
||||
|
||||
.i {
|
||||
font-size: 42upx;
|
||||
font-weight: bold;
|
||||
margin-right: 12upx;
|
||||
position: relative;
|
||||
top: -4upx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 48upx;
|
||||
height: 80upx;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
padding-right: 14upx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
padding-top: 24upx;
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-list {
|
||||
.item {
|
||||
padding: 28upx 0;
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
$size: 42upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
|
||||
.t {
|
||||
.t_one {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.t_tow {
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
}
|
||||
|
||||
.b {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.number-key-wrap {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #efefef;
|
||||
z-index: 999;
|
||||
padding: 28upx 28upx calc(env(safe-area-inset-bottom) + 28upx);
|
||||
border-radius: 28upx 28upx 0 0;
|
||||
$gap: 12upx;
|
||||
$radius: 14upx;
|
||||
$itemH: 120upx;
|
||||
|
||||
.number-key {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
font-size: 48upx;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: $radius;
|
||||
background-color: #fff;
|
||||
|
||||
&.active {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
|
||||
.num-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: $itemH $itemH $itemH;
|
||||
grid-gap: $gap;
|
||||
}
|
||||
|
||||
.num-foot {
|
||||
padding-top: $gap;
|
||||
display: grid;
|
||||
grid-gap: $gap;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-rows: $itemH;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 160upx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: $gap;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
|
||||
&:last-child {
|
||||
margin-top: $gap;
|
||||
font-size: 32upx;
|
||||
}
|
||||
|
||||
&.confirm {
|
||||
background-color: #ffcc17;
|
||||
|
||||
&.active {
|
||||
background-color: #e1b516;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.success-wrap {
|
||||
padding: 0 28upx calc(env(safe-area-inset-bottom) + 28upx);
|
||||
|
||||
.title {
|
||||
padding: 28upx 0;
|
||||
font-size: 32upx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
.img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12upx 0;
|
||||
border-radius: 100upx;
|
||||
font-size: 28upx;
|
||||
background: #ffcc17;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
815
pages/shopcart/index.vue
Normal file
815
pages/shopcart/index.vue
Normal file
@@ -0,0 +1,815 @@
|
||||
<template>
|
||||
<view class="car" :style="[theme]">
|
||||
<view class="car_one flex-between">
|
||||
<view class="car_footer_l flex-start" @click="checkedAll">
|
||||
<u-icon v-if="allchecked" name="checkmark-circle-fill" :color="theme.cartbutton" size="24"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#f9f9f9" size="24"></u-icon>
|
||||
<view class="car_footer_licontexte" style="margin-left: 20rpx;">全选</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="car_list_box">
|
||||
<!-- 商品列表 -->
|
||||
<view class="car_list_box_item" v-for="(item,index) in list" :key="index"
|
||||
@click.stop="checkboxGroupChange(item,index)">
|
||||
<view class="list flex-start">
|
||||
<view class="right flex-start">
|
||||
<view class="rightborder flex-center">
|
||||
<u-icon v-if="item.checked" name="checkmark-circle-fill" :color="theme.cartbutton"
|
||||
size="24"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#f9f9f9" size="24"></u-icon>
|
||||
</view>
|
||||
<view class="img_box">
|
||||
<image :src="item.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="des flex-colum-start">
|
||||
<view class="des_x" @click.stop="delGoods(item.id)">
|
||||
×
|
||||
</view>
|
||||
<view class="flex-colum-start top">
|
||||
<view class="title_box title">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="title_boxtitles flex-start"
|
||||
@click.stop="shoppingindexgoodsgoodsdetail(item)">
|
||||
<view class="title_boxtitles_text">{{item.spec_str}}</view>
|
||||
<u-icon class="title_boxtitles_icon" name="arrow-down" color="#000"
|
||||
size="16"></u-icon>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="btn_box flex-between">
|
||||
<view class="price">
|
||||
¥{{item.price}}
|
||||
</view>
|
||||
<u-number-box v-model="item.number" :min="1" button-size="24" color="#ffffff"
|
||||
:bgColor="theme.cartpieces" :max="item.stock" iconStyle="color: #fff"
|
||||
@change="valChange($event,item)">
|
||||
</u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="car_footer" :class="style_type == 2 ? 'car_footers':''">
|
||||
<view class="car_footer_r flex-end flex-between">
|
||||
<view>
|
||||
<view class="flex-end">
|
||||
<view class="f_word1">合计：</view>
|
||||
<view class="f_money">
|
||||
<text>¥</text>
|
||||
<text
|
||||
v-if="allchecked == true || somechecked == true ">{{cartprice.price.total_price}}</text>
|
||||
<text v-else>0.00</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="f_btn" v-if="allchecked == true || somechecked == true " @click="goSettle">
|
||||
提交订单({{cartprice.price.number}})
|
||||
</view>
|
||||
<view class="f_btn" style="background:#f9f9f9; color: #666;" v-else>提交订单</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="car_footer flex-between">
|
||||
<view class="car_footer_l flex-start" @click="checkedAll">
|
||||
<u-icon v-if="allchecked" name="checkmark-circle-fill" color="#9397c1" size="24"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#f9f9f9" size="24"></u-icon>
|
||||
<view style="margin-left: 20rpx;">全选</view>
|
||||
</view>
|
||||
<view class="car_footer_r flex-end">
|
||||
<view>
|
||||
<view class="f_word">共{{cartprice.price.number}}件</view>
|
||||
<view class="flex-end">
|
||||
<view class="f_word1">合计：</view>
|
||||
<view class="f_money">
|
||||
<text>¥</text>
|
||||
<text>{{cartprice.price.total_price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="f_btn" @click="goSettle">结算</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view v-if="list.length==0 && is_end == true" style="margin-top: 20rpx;" class="flex-colum">
|
||||
<image :src="bgnothave" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />
|
||||
<view :style="{height:height}"></view>
|
||||
<u-overlay :show="overlayshow">
|
||||
<view class="warp">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-start">
|
||||
<image class="onecontentone_image" :src="lsitform.img" mode="aspectFill"></image>
|
||||
<view class="nonecontentone_view flex-colum-start">
|
||||
<text class="nonecontentone_view_one">{{lsitform.title}}</text>
|
||||
<text class="nonecontentone_view_otow">¥{{lsitform.price}}</text>
|
||||
</view>
|
||||
<view class="onerecticon">
|
||||
<u-icon @click="overlayshow = false" name="backspace" color="#000000" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towrect">
|
||||
<view class="towrect_one">
|
||||
规格
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<view class="towrect_tow" v-for="(item,index) in lsitforms" :key="item.id"
|
||||
@click="overlayshowsbox(item,index)">
|
||||
<view :class="towrecttowclass==item.id?'towrect_towtext':'towrect_towtexts'">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="fvirect flex-center" @click="shoppingindexgoodindexcareditcar">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
<bottombbar v-if="style_type == 2" :valuebbar='3'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
style_type: uni.cache.get('loginuser').style_type,
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
show: false,
|
||||
listcar_id: [], //购物车id 全选时候
|
||||
overlayshow: false,
|
||||
somechecked: false,
|
||||
towrecttowclass: 0,
|
||||
height: '',
|
||||
lsitcart_id: {},
|
||||
allchecked: false,
|
||||
shownumber: '',
|
||||
lsitform: {},
|
||||
lsitforms: [],
|
||||
list: [],
|
||||
cartprice: {
|
||||
price: {
|
||||
total_price: '0',
|
||||
number: '0'
|
||||
}
|
||||
},
|
||||
is_end: false,
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.car_footer')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) - (uni.cache.get('loginuser').style_type == 2 ? 50 :
|
||||
0) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
//计算选中商品的总价
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.allchecked = false;
|
||||
this.somechecked = false;
|
||||
this.init_fn();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.shoppingindexgoodindexcarlistr()
|
||||
},
|
||||
methods: {
|
||||
init_fn() { //初始数据
|
||||
this.list = []
|
||||
this.is_end = false
|
||||
this.form.page = 1
|
||||
this.form.status = 'loadmore'
|
||||
this.shoppingindexgoodindexcarlistr()
|
||||
},
|
||||
async shoppingindexgoodindexcarlistr() {
|
||||
let res = await this.api.shoppingindexgoodindexcarlistr({
|
||||
page: this.form.page
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (this.list.checked == true || this.list.checked == false) {
|
||||
return
|
||||
} else {
|
||||
this.list.forEach(ele => {
|
||||
ele.checked = false;
|
||||
})
|
||||
}
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
overlayshowsbox(e, s) { //sku切换数据
|
||||
this.lsitform = e //显示的数据
|
||||
this.towrecttowclass = e.id
|
||||
},
|
||||
async shoppingindexgoodsgoodsdetail(e) { //查看sku 详情
|
||||
if (e.spec_type == 1) {
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.goods_id,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('mall/mallInfos', {
|
||||
id: e.goods_id,
|
||||
})
|
||||
}
|
||||
// this.lsitcart_id = e
|
||||
// let res = await this.api.shoppingindexgoodsgoodsdetail({
|
||||
// goods_id: e.goods_id
|
||||
// })
|
||||
// if (res) {
|
||||
// this.lsitform = e //显示的数据
|
||||
// this.lsitforms = res.spec
|
||||
// this.towrecttowclass = e.spec_id
|
||||
// this.overlayshow = true
|
||||
// }
|
||||
},
|
||||
async valChange(e, s) { //数量变换
|
||||
this.lsitcart_id = s
|
||||
let res = await this.api.shoppingindexgoodsgoodsdetail({
|
||||
goods_id: s.goods_id
|
||||
})
|
||||
if (res) {
|
||||
this.lsitform = s
|
||||
this.lsitforms = res.spec
|
||||
this.shownumber = e.value
|
||||
this.shoppingindexgoodindexcareditcar(1) //数量
|
||||
}
|
||||
},
|
||||
//购物车 编辑 数量
|
||||
async shoppingindexgoodindexcareditcar(e) {
|
||||
console.log(this.lsitcart_id, this.lsitform)
|
||||
let res = await this.api.shoppingindexgoodindexcareditcar({
|
||||
id: this.lsitcart_id.id,
|
||||
spec_id: this.lsitform.spec_id,
|
||||
number: this.shownumber ? this.shownumber : this.lsitcart_id.number
|
||||
})
|
||||
if (res == 1) {
|
||||
this.overlayshow = false
|
||||
if (this.lsitcart_id.checked) {
|
||||
this.shoppingindexgoodindexoforders() //切蒜钱
|
||||
}
|
||||
if (e != 1) {
|
||||
this.init_fn();
|
||||
}
|
||||
}
|
||||
},
|
||||
//结算总价
|
||||
async shoppingindexgoodindexoforders() {
|
||||
let res = await this.api.shoppingindexgoodindexoforders({
|
||||
type: 1, // 1购物车 2商品详情页
|
||||
goods_id: '', //商品ID 商品详情页来源时必填
|
||||
car_id: this.listcar_id.toString(), //购物车ID 1,2 购物车来源时必填
|
||||
number: this.shownumber ? this.shownumber : this.lsitcart_id.number, //数量 商品详情页来源时必填
|
||||
spec: '', //规格 商品详情页来源时必填
|
||||
address_id: '', //地址ID 可以为空（为空时返回默认地址）
|
||||
})
|
||||
if (res) {
|
||||
this.cartprice = res
|
||||
this.$forceUpdate();
|
||||
}
|
||||
console.log(res)
|
||||
},
|
||||
//删除商品
|
||||
async delGoods(e) {
|
||||
var e_ = e
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: '确定删除吗？',
|
||||
success: async (data) => {
|
||||
if (data.confirm) {
|
||||
try {
|
||||
let res = await this.api.shoppingindexgoodindexcardelcarr({
|
||||
id: e_
|
||||
})
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'none'
|
||||
})
|
||||
this.init_fn();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '删除失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
// 选中任一checkbox时，由checkbox-group触发
|
||||
checkboxGroupChange(e, s) {
|
||||
this.listcar_id = []
|
||||
this.cartprice = {
|
||||
price: {
|
||||
total_price: '0',
|
||||
number: '0'
|
||||
}
|
||||
},
|
||||
this.list[s].checked = !this.list[s].checked
|
||||
this.list.forEach(item => {
|
||||
if (item.checked == true) {
|
||||
this.listcar_id.push(item.id);
|
||||
}
|
||||
})
|
||||
let result = this.list.some(item => {
|
||||
return item.checked == true
|
||||
})
|
||||
if (result) {
|
||||
this.somechecked = true
|
||||
this.shoppingindexgoodindexoforders() //切蒜钱
|
||||
} else {
|
||||
console.log(1)
|
||||
this.somechecked = false
|
||||
}
|
||||
this.$forceUpdate();
|
||||
this.changeSelectAllBtn(); //监听全选按钮状态
|
||||
},
|
||||
// 全选
|
||||
checkedAll() {
|
||||
if (this.list[0].checked == false) { //全选
|
||||
this.list.forEach(item => {
|
||||
item.checked = true;
|
||||
})
|
||||
} else { //反选
|
||||
this.listcar_id = []
|
||||
this.cartprice = {
|
||||
price: {
|
||||
total_price: '0',
|
||||
number: '0'
|
||||
}
|
||||
},
|
||||
this.list.forEach(item => {
|
||||
item.checked = false;
|
||||
})
|
||||
}
|
||||
this.$forceUpdate();
|
||||
this.changeSelectAllBtn(); //监听全选按钮状态
|
||||
},
|
||||
/* 选择店铺或者商品 监听全选按钮状态 */
|
||||
changeSelectAllBtn() {
|
||||
const selectAll = this.list.every(shopItem => {
|
||||
return shopItem.checked == true;
|
||||
});
|
||||
if (selectAll) {
|
||||
this.listcar_id = []
|
||||
this.allchecked = true;
|
||||
this.list.forEach(item => {
|
||||
this.listcar_id.push(item.id);
|
||||
})
|
||||
} else {
|
||||
this.allchecked = false
|
||||
}
|
||||
if (this.allchecked) {
|
||||
this.shoppingindexgoodindexoforders(); //监听全选按钮状态
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
goSettle() {
|
||||
console.log(this.listcar_id.toString())
|
||||
uni.pro.navigateTo('mall/confirm', {
|
||||
type: 1, // 1购物车 2商品详情页
|
||||
goods_id: '', //商品ID 商品详情页来源时必填
|
||||
car_id: this.listcar_id.toString(), //购物车ID 1,2 购物车来源时必填
|
||||
number: '', //数量 商品详情页来源时必填
|
||||
spec: '', //规格 商品详情页来源时必填
|
||||
address_id: '', //地址ID 可以为空（为空时返回默认地址）
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
|
||||
/deep/ .u-checkbox {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/deep/ .u-checkbox__label {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
width: 100% !important;
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.slot-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
|
||||
}
|
||||
|
||||
.car {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.car_one {
|
||||
border-top: 1rpx solid #F9F9F9;
|
||||
padding: 16rpx 30rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.car_footer_l {
|
||||
.car_footer_licontexte {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand_box {
|
||||
height: 100rpx;
|
||||
margin-left: 20rpx;
|
||||
display: inline-block;
|
||||
padding-right: 20rpx;
|
||||
|
||||
image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 16rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333 !important;
|
||||
padding-left: 15rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.car_list_box {
|
||||
padding: 0rpx 30rpx 20rpx 30rpx;
|
||||
|
||||
.car_list_box_item {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.list {
|
||||
padding: 30rpx 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
width: 100%;
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
|
||||
.rightborder {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.img_box {
|
||||
image {
|
||||
width: 156rpx;
|
||||
height: 156rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.des {
|
||||
position: relative;
|
||||
flex: auto;
|
||||
padding-left: 24rpx;
|
||||
height: 100%;
|
||||
|
||||
.des_x {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
|
||||
.title_box {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.title_boxtitles {
|
||||
margin-top: 16rpx;
|
||||
padding: 8rpx 32rpx;
|
||||
background: #F9F9F9;
|
||||
border-radius: 8rpx;
|
||||
|
||||
.title_boxtitles_text {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.title_boxtitles_icon {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn_box {
|
||||
margin-top: 30rpx;
|
||||
width: 100%;
|
||||
|
||||
.price {
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 50rpx;
|
||||
background: #FF3300;
|
||||
border-radius: 25rpx;
|
||||
width: 110rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 26rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
.nonecontentone_view {
|
||||
|
||||
margin-left: 16rpx;
|
||||
|
||||
.nonecontentone_view_one {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.nonecontentone_view_otow {
|
||||
margin-top: 10rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towrect {
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
padding-top: 34rpx;
|
||||
|
||||
.towrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.towrect_tow {
|
||||
margin-top: 16rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.towrect_towtext {
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid var(--bg-color-button);
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: var(--bg-color-button);
|
||||
}
|
||||
|
||||
.towrect_towtexts {
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: var(--bg-color-button);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.thererect {
|
||||
padding: 34rpx 0;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
border-top: 1rpx solid #F7F7F7;
|
||||
|
||||
.thererect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.thererect_tow {}
|
||||
}
|
||||
|
||||
.fuorrect {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fuorrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.fuorrect_tow {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fvirect {
|
||||
margin-top: 200rpx;
|
||||
padding: 16rpx;
|
||||
text-align: center;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 40rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.car_footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-top: 1rpx solid #EEEEEE;
|
||||
z-index: 111;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #fff;
|
||||
|
||||
.car_footer_r {
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
|
||||
.f_word {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.f_word1 {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.f_money {
|
||||
color: #FF3300;
|
||||
|
||||
text {
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
font-size: 26rpx;
|
||||
letter-spacing: 10rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.f_btn {
|
||||
padding: 16rpx 70rpx;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 46rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.del_btn {
|
||||
width: 180rpx;
|
||||
height: 78rpx;
|
||||
line-height: 78rpx;
|
||||
border-radius: 38rpx;
|
||||
border: 1rpx solid #999999;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.car_footers {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-top: 1rpx solid #EEEEEE;
|
||||
z-index: 111;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
padding-bottom: 124rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/deep/.u-checkbox-group {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
161
pages/task/index.vue
Normal file
161
pages/task/index.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<view class="index" >
|
||||
<view class="indexontents flex-between">
|
||||
<view class="onecontent_item flex-colum-start" v-for="(item,index) in list" :key="index"
|
||||
@click="previewImage(index,item)">
|
||||
<image class="onecontent_itemimage" :src="item.img" mode="aspectFill"></image>
|
||||
<!-- <text class="onecontent_itemtext">{{list.title}}</text>
|
||||
<view class="onecontent_item_absolute flex-start">
|
||||
<u-icon name="photo" color="#fff" size="18"></u-icon>
|
||||
<text class="onecontent_item_absolute_text">
|
||||
{{item.count}}
|
||||
</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" class="flex-colum">
|
||||
<image :src="bgnothave" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />
|
||||
<bottombbar :valuebbar='1'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgnothave:uni.getStorageSync('bgnothave'),
|
||||
is_end: false,
|
||||
list: [],
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.indexworks()
|
||||
},
|
||||
onLoad() {
|
||||
uni.setNavigationBarTitle({
|
||||
title: uni.cache.get('details_id').title + '图册'
|
||||
});
|
||||
},
|
||||
onShow() {
|
||||
if (uni.getStorageSync('loginuser') != 0) {
|
||||
this.indexworks()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
eeInfo(e) { //跳转
|
||||
uni.pro.navigateTo('task/taskInfo',{
|
||||
id:e.id
|
||||
})
|
||||
},
|
||||
previewImage(imgIndex, urls) {
|
||||
console.log(urls)
|
||||
uni.previewImage({
|
||||
current: imgIndex,
|
||||
urls: [urls.img],
|
||||
success:(res)=>{
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
},
|
||||
async indexworks() {
|
||||
let res = await this.api.indexworks({
|
||||
store_id: uni.getStorageSync('store_id'),
|
||||
page: this.form.page,
|
||||
service_type_id: this.swiperCurrent
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.index {
|
||||
padding: 10rpx 28rpx;
|
||||
.indexontents {
|
||||
width: 100%;
|
||||
|
||||
.onecontent_item {
|
||||
position: relative;
|
||||
width: 49%;
|
||||
margin-top: 16rpx;
|
||||
.onecontent_itemimage {
|
||||
width: 332rpx;
|
||||
height: 346rpx;
|
||||
}
|
||||
|
||||
.onecontent_itemtext {
|
||||
margin-top: 8rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontent_item_absolute {
|
||||
padding: 8rpx 24rpx;
|
||||
position: absolute;
|
||||
top: 290rpx;
|
||||
right: 16rpx;
|
||||
background: rgba(45, 42, 42, 0.35);
|
||||
border-radius: 28rpx;
|
||||
|
||||
.onecontent_item_absolute_text {
|
||||
margin-left: 10rpx;
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-colum_image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
text {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
145
pages/task/taskInfo.vue
Normal file
145
pages/task/taskInfo.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="indexontents flex-between">
|
||||
<view class="onecontent_item flex-colum-start" v-for="(item,index) in list" :key="index" @click="previewImage(index,list)">
|
||||
<image class="onecontent_itemimage" :src="item" mode="aspectFill" ></image>
|
||||
<!-- <text class="onecontent_itemtext">{{list.title}}</text>
|
||||
<view class="onecontent_item_absolute flex-start">
|
||||
<u-icon name="photo" color="#fff" size="18"></u-icon>
|
||||
<text class="onecontent_item_absolute_text">
|
||||
{{item.count}}
|
||||
</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" class="flex-colum">
|
||||
<image :src="bgnothave" mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgnothave:uni.getStorageSync('bgnothave'),
|
||||
list: [],
|
||||
is_end: false,
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.indexworksdetail(e.id)
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
//预览图片
|
||||
previewImage(imgIndex, urls) {
|
||||
console.log(urls)
|
||||
uni.previewImage({
|
||||
current: imgIndex,
|
||||
urls: urls,
|
||||
success:(res)=>{
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
},
|
||||
async indexworksdetail(e) {
|
||||
let res = await this.api.indexworksdetail({
|
||||
id: e
|
||||
})
|
||||
if (res.album.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res.album];
|
||||
if (res.album.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
|
||||
}
|
||||
console.log(this.list)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.index {
|
||||
padding: 12rpx 28rpx;
|
||||
|
||||
.indexontents {
|
||||
width: 100%;
|
||||
|
||||
.onecontent_item {
|
||||
position: relative;
|
||||
width: 49%;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.onecontent_itemimage {
|
||||
width: 332rpx;
|
||||
height: 346rpx;
|
||||
}
|
||||
|
||||
.onecontent_itemtext {
|
||||
margin-top: 8rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontent_item_absolute {
|
||||
padding: 8rpx 24rpx;
|
||||
position: absolute;
|
||||
top: 290rpx;
|
||||
right: 16rpx;
|
||||
background: rgba(45, 42, 42, 0.35);
|
||||
border-radius: 28rpx;
|
||||
|
||||
.onecontent_item_absolute_text {
|
||||
margin-left: 10rpx;
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-colum_image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
text {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
23
pages/webview/html.vue
Normal file
23
pages/webview/html.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<view class="content" v-html="src">
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src: ''
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.src = options.src;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.content{
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
</style>
|
||||
55
pages/webview/imge.vue
Normal file
55
pages/webview/imge.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<view class="box flex-colum">
|
||||
<image src="@/static/logo.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imge: '',
|
||||
tyte: '',
|
||||
name: ''
|
||||
};
|
||||
},
|
||||
async onLoad(e) {
|
||||
this.name = e.name
|
||||
this.tyte = e.tyte
|
||||
this.imge = str;
|
||||
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
v-deep {
|
||||
p {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
image{
|
||||
margin-top:120rpx;
|
||||
}
|
||||
.view {
|
||||
position: fixed;
|
||||
width: 50%;
|
||||
padding: 10rpx;
|
||||
text-align: center;
|
||||
bottom: 20rpx;
|
||||
margin: 0 auto;
|
||||
background: #3089fd;
|
||||
border-radius: 50rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
16
pages/webview/webview.vue
Normal file
16
pages/webview/webview.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<web-view :src="src"></web-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src: ''
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.src = options.url;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user