Skip to content

S
shop_mobile_uni
Commit e6828b2e authored by 王建威's avatar 王建威
Browse files
Options

merge wjw_monthly

parents eec050df 1aeed4a6
Hide whitespace changes
Inline Side-by-side
Showing with 2869 additions and 21 deletions
components/TopBar/TopBar.vue
View file @ e6828b2e
<template>
<view class="topbar_view" :style="{'color': titleColor, 'background-color': bgColor}">
<view class="topbar_view" :style="[{'color': titleColor, 'background-color': bgColor}, bold ? {'font-weight':900} : 'initial']">
<text class="eosfont left_icon" @click="back()">&#xe622;</text>
{{this.title}}
</view>
......@@ -19,6 +19,10 @@
bgColor: {
type: String,
default: '#fff'
},
bold: {
type: Boolean,
default: false
}
},
methods: {
......
components/uni-drawer/uni-drawer.vue 0 → 100644
View file @ e6828b2e
<template>
<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
<slot />
</view>
</view>
</template>
<script>
/**
* Drawer 抽屉
* @description 抽屉侧滑菜单
* @tutorial https://ext.dcloud.net.cn/plugin?id=26
* @property {Boolean} mask = [true | false] 是否显示遮罩
* @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
* @property {Boolean} mode = [left | right] Drawer 滑出位置
* @value left 从左侧滑出
* @value right 从右侧侧滑出
* @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
* @event {Function} close 组件关闭时触发事件
*/
export default {
name: 'UniDrawer',
props: {
/**
* 显示模式（左、右），只在初始化生效
*/
mode: {
type: String,
default: ''
},
/**
* 蒙层显示状态
*/
mask: {
type: Boolean,
default: true
},
/**
* 遮罩是否可点击关闭
*/
maskClick:{
type: Boolean,
default: true
},
/**
* 抽屉宽度
*/
width: {
type: Number,
default: 220
}
},
data() {
return {
visibleSync: false,
showDrawer: false,
rightMode: false,
watchTimer: null,
drawerWidth: 220
}
},
created() {
// #ifndef APP-NVUE
this.drawerWidth = this.width
// #endif
this.rightMode = this.mode === 'right'
},
methods: {
clear(){},
close(type) {
// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
this._change('showDrawer', 'visibleSync', false)
},
open() {
// fixed by mehaotian 处理重复点击打开的事件
if(this.visibleSync) return
this._change('visibleSync', 'showDrawer', true)
},
_change(param1, param2, status) {
this[param1] = status
if (this.watchTimer) {
clearTimeout(this.watchTimer)
}
this.watchTimer = setTimeout(() => {
this[param2] = status
this.$emit('change',status)
}, status ? 50 : 300)
}
}
}
</script>
<style lang="scss" scoped>
// 抽屉宽度
$drawer-width: 220px;
.uni-drawer {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 999;
}
.uni-drawer__content {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: absolute;
top: 0;
width: $drawer-width;
bottom: 0;
background-color: $uni-bg-color;
transition: transform 0.3s ease;
}
.uni-drawer--left {
left: 0;
/* #ifdef APP-NVUE */
transform: translateX(-$drawer-width);
/* #endif */
/* #ifndef APP-NVUE */
transform: translateX(-100%);
/* #endif */
}
.uni-drawer--right {
right: 0;
/* #ifdef APP-NVUE */
transform: translateX($drawer-width);
/* #endif */
/* #ifndef APP-NVUE */
transform: translateX(100%);
/* #endif */
}
.uni-drawer__content--visible {
transform: translateX(0px);
}
.uni-drawer__mask {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
opacity: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: $uni-bg-color-mask;
transition: opacity 0.3s;
}
.uni-drawer__mask--visible {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
opacity: 1;
}
</style>
main.js
View file @ e6828b2e
......@@ -68,6 +68,10 @@ function __reloadResource(_this) {
function jumpGoodDetail(goods_id) {
window.location.href = `${php}app=goods&id=${goods_id}`;
}
function jumpOrderDetail(order_id) {
window.location.href = `${php}app=buyer_order&act=view&order_id=${order_id}`;
}
function backup() {
......@@ -105,6 +109,7 @@ function jump(url, type) {
Vue.prototype.$jumpGoodDetail = jumpGoodDetail;
Vue.prototype.$jump = jump;
Vue.prototype.$jumpOrderDetail = jumpOrderDetail;
Vue.prototype.$getCache = getCache;
Vue.prototype.$addCart = addCart;
Vue.prototype.$backup = backup;
......
manifest.json
View file @ e6828b2e
......@@ -51,7 +51,11 @@
"mode": "history",
"base": "/uni"
},
<<<<<<< HEAD
"publicPath": "https://dbc-static.oss-cn-beijing.aliyuncs.com/dbc-shop/uni/prod/1.0.19/",
=======
"publicPath": "https://dbc-static.oss-cn-beijing.aliyuncs.com/dbc-shop/uni/test/1.0.19/",
>>>>>>> wjw_monthly
"optimization": {
"treeShaking": {
"enable": true
......
package.json
View file @ e6828b2e
{
"name": "shop_mobile_uni",
"version": "1.0.18",
"version": "1.0.19",
"description": "谛宝多多商城",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
......
pages.json
View file @ e6828b2e
......@@ -173,6 +173,42 @@
"style": {
"navigationBarTitleText": "签到记录-谛宝多多商城"
}
},
{
"path": "pages/monthly/monthly",
"style": {
"navigationBarTitleText": "包年计划-谛宝多多商城"
}
},
{
"path": "pages/monthlyIntroduce/monthlyIntroduce",
"style": {
"navigationBarTitleText": "包年说明-谛宝多多商城"
}
},
{
"path": "pages/monthlyPlan/monthlyPlan",
"style": {
"navigationBarTitleText": "我的包年计划-谛宝多多商城"
}
},
{
"path": "pages/monthlyContract/monthlyContract",
"style": {
"navigationBarTitleText": "我的合同-谛宝多多商城"
}
},
{
"path": "pages/monthlyJoin/monthlyJoin",
"style": {
"navigationBarTitleText": "加入包年计划-谛宝多多商城"
}
},
{
"path": "pages/monthlyDeposit/monthlyDeposit",
"style": {
"navigationBarTitleText": "加入包年计划-谛宝多多商城"
}
}
],
"globalStyle": {
......
pages/certification/certification.vue
View file @ e6828b2e
......@@ -79,9 +79,15 @@
},
title: '社会统一信用代码',
submitFlag: true
submitFlag: true,
month_rule_id: '', // 从连续包月跳转过来
is_deposit: '' // 从连续包月跳转过来
}
},
onLoad(options) {
this.month_rule_id = options.month_rule_id;
this.is_deposit = options.is_deposit;
},
methods: {
changeEnterpriseType(type) {
this.params.enterprise_type = type;
......@@ -177,6 +183,11 @@
success: (res) => {
this.submitFlag = true;
if(res.data.code === 0) {
if(this.month_rule_id) {
// 从连续包月跳转过来
this.monthlySign();
return
}
uni.navigateTo({
url: '/pages/apply/choosetype'
});
......@@ -189,6 +200,45 @@
}
}
})
},
//连续包月签署合同
monthlySign() {
uni.request({
url: '/uni/api/month_signcontract/AddContract',
method: 'POST',
dataType: 'json',
data: {
is_deposit: this.is_deposit,
month_rule_id: this.month_rule_id
},
success:(res) => {
if(res.data.code === 0) {
// 是否交押金
uni.showToast({
title: '合同已签署',
icon: 'none'
})
if(this.is_deposit === '1') {
// 交押金
setTimeout(() => {
uni.hideLoading();
this.$jump(`/pages/monthlyDeposit/monthlyDeposit?month_apply_id=${res.data.data.month_apply_id}`,2);
}, 2000);
} else {
// 不交押金
setTimeout(() => {
uni.hideLoading();
this.$jump(`/pages/monthlyPlan/monthlyPlan?month_apply_id=${res.data.data.month_apply_id}`,2);
}, 2000);
}
} else {
uni.showToast({
title: res.data.message,
icon: 'none'
})
}
}
})
}
},
components: {
......
pages/monthly/monthly.vue 0 → 100644
View file @ e6828b2e
<template>
<view class="main">
<scroll-view
scroll-y
:show-scrollbar="false"
style="height: 100vh;"
@scrolltolower="search()"
@scroll="scroll"
>
<view class="top_card">
<view class="fixed">
<view class="top_bar">
<view class="left" @click="$backup">
<text class="eosfont left_icon">&#xe743;</text>l
<text class="close_title">关闭</text>
</view>
<view class="middle" :style="[has ? {'margin-left':'68rpx'} : null]">
<view class="title1">包年计划</view>
<view class="title2">自由搭配 7折钜惠</view>
</view>
<view class="right_btn" v-if="!month_apply_id" @click="joinMonthly">加入计划</view>
<view class="join_plan" v-else @click="$jump(`/pages/monthlyPlan/monthlyPlan?month_apply_id=${month_apply_id}`,2)">我的包年计划</view>
</view>
<view class="search_bar">
<text class="eosfont" @click="search(1)">&#xe73c;</text>
<input type="text" class="search_input" @confirm="search(1)" v-model="keyword">
</view>
</view>
<view class="monthly_title">想你所想·灵活采购</view>
<view class="monthly_sub">
<text>宠医省钱更灵活</text>
<text>新型自选采购方式</text>
</view>
<view class="join_title">谛宝多多邀请您加入包年计划～</view>
<view class="card_detail">
<view class="detail_flex">
<text class="flex_title">自由搭配 7折钜惠</text>
<view class="flex_right" @click="$jump(`/pages/monthlyIntroduce/monthlyIntroduce?login_flg=${login_flg}`,2)">
<text>包年计划说明</text>
<text class="eosfont" style="font-size: 20rpx;">&#xe608;</text>
</view>
</view>
<view class="detail_flex">
<view class="pre_item">
<image class="icon_img" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/static/month1%402x.png" />
<view class="pre_desc">
<view>参与包年计划</view>
<view>商品低至7折</view>
</view>
</view>
<view class="pre_item">
<image class="icon_img" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/static/month2%402x.png" />
<view class="pre_desc">
<view>随时采购</view>
<view>不限次数</view>
</view>
</view>
<view class="pre_item">
<image class="icon_img" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/static/month3%402x.png" />
<view class="pre_desc">
<view>正品保证</view>
<view>7日可退货</view>
</view>
</view>
<view class="pre_item">
<image class="icon_img" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/static/month4%402x.png" />
<view class="pre_desc">
<view>重复采购</view>
<view>不限数量</view>
</view>
</view>
</view>
</view>
</view>
<view class="join_btn" v-if="!month_apply_id" @click="joinMonthly">
<view class="title1">加入包年计划</view>
<view class="title2">
可选
<text v-for="(item, index) in month_rule_list" :key="index">{{item.contract_period}}个月<text v-if="index+1 !== month_rule_list.length">/</text></text>
计划
</view>
</view>
<view class="check_btn" v-else @click="$jump(`/pages/monthlyPlan/monthlyPlan?month_apply_id=${month_apply_id}`,2)">查看我的包年计划</view>
<view class="recommend_bar">
<text class="left_text">精品推荐</text>
<view class="right_text" @click="openDrawer">筛选<text class="eosfont">&#xe632;</text></view>
</view>
<view class="recommend_box">
<view class="recommend_item" v-for="(item, index) in goodsList" :key="index">
<text class="label">包年计划</text>
<image class="recommend_img" :src="item.default_image || $noGoodsImg" @click="$jumpGoodDetail(item.goods_id)" />
<view class="recommend_goods_name">{{item.goods_name}}</view>
<view class="recommend_goods_sub">{{item.goods_sub_name}}</view>
<view class="recommend_flex">
<view class="left" v-if="login_flg">
<text>¥ </text>
<text>{{(item.discount === '0.00' || item.discount === null) ? (Number(item.price)*Number(min_discount)).toFixed(2) : (Number(item.price)*Number(item.discount)).toFixed(2)}}</text>
</view>
<view v-else class="no_price">登录显示价格</view>
<text class="right eosfont" @click="$addCart(item.default_spec, 1, login_flg)">&#xe7e6;</text>
</view>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
</scroll-view>
<view class="screen_btn" v-if="screen" @click="openDrawer">
<text>筛选商品</text>
<text class="eosfont">&#xe632;</text>
</view>
<uni-drawer ref="drawer" mode="right" :width="280">
<view class="screen_content">
<view class="screen_title">筛选</view>
<view class="screen_item">
<view class="screen_name">品牌</view>
<view class="screen_detail">
<view class="detail_item" v-for="(item, index) in brand_list" :key="index" :class="{act: brand === item.brand}" @click="chooseFilter(1, item.brand)">{{item.brand}}</view>
</view>
</view>
<view class="screen_item">
<view class="screen_name">类别</view>
<view class="screen_detail">
<view class="detail_item" v-for="(item, index) in category_list" :key="index" :class="{act: cate_id_1 === item.cate_id}" @click="chooseFilter(2, item.cate_id)">{{item.cate_name}}</view>
</view>
</view>
<view class="screen_item">
<view class="screen_name">包年计划</view>
<view class="screen_detail">
<view class="detail_item" v-for="(item, index) in month_rule_list" :key="index" :class="{act: contract_period === item.contract_period}" @click="chooseFilter(3, item.contract_period, index)">{{item.contract_period}}个月</view>
</view>
</view>
<view class="bottom_box">
<view class="reset_btn" @click="resetFilter">重置</view>
<view class="confirm_btn" @click="search(2)">确定</view>
</view>
</view>
</uni-drawer>
<BottomBar />
</view>
</template>
<script>
import uniDrawer from "@/components/uni-drawer/uni-drawer.vue";
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import BottomBar from "@/components/BottomBar/BottomBar.vue";
import { login } from '@/common/util.js';
export default {
data() {
return {
screen: false,
has: true,
goodsList: [],
month_apply_id: '',
ruleList: [],
min_discount: 1,
current: 1,
loadingType: 'more',
requestFlag: true,
login_flg: 0,
brand_list: [],
category_list: [],
month_rule_list: [],
brand: '',
cate_id_1: '',
contract_period: '',
keyword: ''
}
},
onLoad() {
this.getData(1);
// #ifdef H5
//默认请求微信分享
if (this.$wechat && this.$wechat.isWechat()) {
this.$wechat.share({titie: this.$getNavigationBarTitle()});
}
this.postData();
// #endif
},
methods: {
openDrawer() {
this.$refs.drawer.open();
},
getData() {
if(!this.requestFlag) return
this.loadingType = 'loading';
uni.request({
url: '/uni/api/month_index/MonthIndex',
method: 'GET',
dataType: 'json',
success: (res) => {
if(res.data.code === 0) {
this.month_apply_id = res.data.data.month_apply_id;
this.ruleList = res.data.data.ruleList;
this.min_discount = res.data.data.min_discount;
this.brand_list = res.data.data.brand_list;
this.category_list = res.data.data.category_list;
this.month_rule_list = res.data.data.month_rule_list;
this.data = res.data.data;
this.login_flg = res.data.login_flg;
this.search();
}
}
});
},
// 向小程序发送数据
postData(){
jWeixin.miniProgram.getEnv(function (res) {
//获取当前环境
if(res.miniprogram){
// this.$wechat.postData('谛宝多多商城-首页');
const postData = {
link: window.location.href,
title: '谛宝多多商城-连续包月'
}
jWeixin.miniProgram.postMessage({ data: JSON.stringify(postData) });
}
});
},
// 加入计划
joinMonthly() {
if(!this.login_flg) {
login();
return
}
this.$jump('/pages/monthlyJoin/monthlyJoin',2)
},
chooseFilter(type, val, key) {
// type: 1品牌 2分类 3包年计划
if(type === 1) {
this.brand = val;
}
if(type === 2) {
this.cate_id_1 = val;
}
if(type === 3) {
this.contract_period = val;
this.min_discount = this.ruleList[key]['discount'];
}
},
resetFilter() {
this.brand = '';
this.cate_id_1 = '';
this.contract_period = '';
},
search(type) {
// type 1是搜索，current,goodsList,requestFlag,brand,cate_id_1,contract_period重置
// type 2是筛选
if(type === 1) {
this.brand = '';
this.cate_id_1 = '';
this.contract_period = '';
this.current = 1;
this.goodsList = [];
this.requestFlag = true;
}
if(type === 2) {
this.current = 1;
this.goodsList = [];
this.requestFlag = true;
}
if(!this.requestFlag) return
uni.request({
url: '/uni/api/search_goods/search_month_goods_list',
method: "POST",
data: {
keyword: this.keyword,
current: this.current,
pageSize: 10,
brand: this.brand,
cate_id_1: this.cate_id_1,
contract_period: this.contract_period
},
dataType: 'json',
success: (res) => {
if(res.data.code === 0) {
let goods = [];
res.data.data !== null && res.data.data.map((item, index) => {
goods.push(item._source);
});
this.goodsList = this.goodsList.concat(goods);
const totalPage = Math.ceil(res.data.page.total/res.data.page.page_size);
if(this.current < totalPage) {
this.current += 1;
this.loadingType = 'more';
} else {
this.requestFlag = false;
this.loadingType = 'nomore'
}
this.$refs.drawer.close();
}
}
})
},
scroll(e) {
if(e.detail.scrollTop >= 375 && !this.screen) {
this.screen = true;
} else if (e.detail.scrollTop < 370 && this.screen) {
this.screen = false;
}
}
},
components: {
uniDrawer,
uniLoadMore,
BottomBar
}
}
</script>
<style lang="scss" scoped>
.main {
background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(248,249,251,1) 100%);
box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.05);
padding-bottom: 98rpx;
.top_card {
height: 410rpx;
background:linear-gradient(135deg,rgba(255,232,199,1) 0%,rgba(214,163,93,1) 100%);
border-radius: 0 0 24rpx 24rpx;
padding: 168rpx 20rpx 0;
.fixed {
position: fixed;
left: 0;
top: 0;
background: linear-gradient(135deg,rgba(255,232,199,1) 0%,rgba(214,163,93,1) 100%);
z-index: 10;
width: 100%;
box-sizing: border-box;
padding: 0 24rpx;
height: 136rpx;
border-radius: 0 0 24rpx 24rpx;
}
.top_bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8rpx;
.left {
display: flex;
align-items: center;
color: #7c7c7c;
.left_icon {
font-weight: 900;
margin-right: 10rpx;
color: #000;
font-size: 40rpx;
}
.close_title {
font-size: 28rpx;
color: #212121;
margin-left: 10rpx;
}
}
.middle {
text-align: center;
.title1 {
font-size: 32rpx;
color: #000;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
height: 44rpx;
line-height: 44rpx;
}
.title2 {
font-size: 20rpx;
color: #575757;
height: 28rpx;
line-height: 28rpx;
letter-spacing:2px;
}
}
.right_btn {
width: 140rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 16rpx;
text-align: center;
background-color: #FAE0BB;
text-align: center;
color: #323233;
font-size: 26rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.join_plan {
width: 192rpx;
height: 56rpx;
line-height: 56rpx;
text-align: center;
background:linear-gradient(141deg,rgba(74,86,103,1) 0%,rgba(45,50,57,1) 100%);
border-radius: 28rpx 0 0 28rpx;
font-size: 26rpx;
color: #FCE3C1;
position: relative;
right: -24rpx;
}
}
.search_bar {
width: 100%;
height: 64rpx;
border-radius: 32rpx;
background-color: #fff;
margin-top: 24rpx;
display: flex;
align-items: center;
padding: 0 20rpx;
box-sizing: border-box;
box-shadow:0px 20rpx 40rpx 0px rgba(0,0,0,0.1);
text {
font-size: 32rpx;
}
.search_input {
font-size: 28rpx;
padding-left: 10rpx;
width: 100%;
}
}
.monthly_title {
height:78rpx;
font-size:64rpx;
font-family:FZZCHJW--GB1-0,FZZCHJW--GB1;
font-weight:normal;
color:rgba(110,67,0,1);
line-height:78rpx;
letter-spacing:2rpx;
background:linear-gradient(180deg, rgba(110,67,0,0.5) 0%, rgba(110,67,0,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin: 32rpx auto 0;
text-align: center;
font-weight: 900;
}
.monthly_sub {
height:42rpx;
font-size:30rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(145,99,32,1);
line-height:42rpx;
letter-spacing:2rpx;
text-align: center;
margin-top: 6rpx;
text:nth-of-type(1) {
margin-right: 36rpx;
}
}
.join_title {
color: #C18221;
font-size: 24rpx;
height: 34rpx;
line-height: 34rpx;
text-align: center;
margin-top: 12rpx;
}
.card_detail {
height: 328rpx;
background-color: #fff;
box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.1);
border-radius:20rpx;
margin-top: 20rpx;
padding: 32rpx 32rpx 36rpx;
box-sizing: border-box;
.detail_flex {
display: flex;
justify-content: space-between;
align-items: center;
.flex_title {
color: #000;
font-size: 32rpx;
height: 44rpx;
line-height: 44rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.flex_right {
font-size: 26rpx;
color: #7c7c7c;
height: 36rpx;
line-height: 36rpx;
}
.pre_item {
width: 160rpx;
text-align: center;
margin-top: 40rpx;
.icon_img {
width: 100rpx;
height: 100rpx;
}
.pre_desc {
color: #744902;
font-size: 22rpx;
line-height: 32rpx;
}
}
}
}
}
.join_btn {
width: 702rpx;
height: 88rpx;
border-radius: 20rpx;
background:linear-gradient(314deg,rgba(238,190,114,1) 0%,rgba(255,224,176,1) 100%);
box-shadow:0px 4rpx 40rpx 0px rgba(242,199,130,0.5);
margin: 164rpx auto 34rpx;
text-align: center;
color: #744902;
display: flex;
flex-direction: column;
justify-content: center;
.title1 {
font-size: 32rpx;
height: 44rpx;
line-height: 44rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
letter-spacing:1px;
}
.title2 {
font-size: 20rpx;
height: 28rpx;
line-height: 28rpx;
font-size: 20rpx;
}
}
.check_btn {
width: 702rpx;
height: 88rpx;
line-height: 88rpx;
margin: 164rpx auto 34rpx;
background:linear-gradient(141deg,rgba(74,86,103,1) 0%,rgba(45,50,57,1) 100%);
border-radius: 20rpx;
text-align: center;
color: #FDDCA8;
font-size: 32rpx;
letter-spacing: 2rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.recommend_bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24rpx;
.left_text {
color: #000;
font-size: 36rpx;
height: 50rpx;
line-height: 50rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.right_text {
width: 126rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 28rpx;
background:rgba(255,255,255,1);
box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.05);
text-align: center;
color: #000;
font-size: 28rpx;
.eosfont {
color: #151515;
margin-left: 6rpx;
font-size: 24rpx;
opacity: 0.3;
}
}
}
.recommend_box {
width: 702rpx;
margin: 32rpx auto 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.recommend_item {
width: 340rpx;
box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.06);
border-radius: 16rpx;
background-color: #fff;
overflow: hidden;
margin-bottom: 20rpx;
position: relative;
.label {
width: 100rpx;
height: 40rpx;
text-align: center;
line-height: 40rpx;
background:linear-gradient(141deg,rgba(32,34,36,1) 0%,rgba(90,74,53,1) 100%);
box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.06);
border-radius:16rpx 0px 16rpx 0px;
color: #F2D8A4;
font-size: 20rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
position: absolute;
top: 20rpx;
left: 20rpx;
z-index: 9;
}
.recommend_img {
width: 340rpx;
height: 340rpx;
display: block;
}
.recommend_goods_name {
color: #212121;
font-size: 26rpx;
text-shadow: 0px 4rpx 60rpx rgba(0,0,0,0.06);
line-height: 36rpx;
width: 300rpx;
margin: 20rpx auto 14rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.recommend_goods_sub {
color: #979797;
font-size: 24rpx;
height: 34rpx;
line-height: 34rpx;
width: 300rpx;
margin: 0 auto 38rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.recommend_flex {
width: 300rpx;
margin: 0 auto 18rpx;
display: flex;
justify-content: space-between;
align-items: baseline;
.no_price {
font-size: 24rpx;
}
.left {
color: #F54903;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
text-shadow:0px 4px 60px rgba(0,0,0,0.06);
height: 44rpx;
line-height: 44rpx;
text:nth-of-type(1) {
font-size: 24rpx;
margin-right: 6rpx;
}
text:nth-of-type(2) {
font-size: 32rpx;
}
}
.right {
font-size: 32rpx;
height: 32rpx;
line-height: 32rpx;
text-shadow:0px 4px 60px rgba(0,0,0,0.06);
color: #AEAEAE;
position: relative;
top: -2rpx;
}
}
}
}
.screen_btn {
width: 200rpx;
height: 72rpx;
text-align: center;
line-height: 72rpx;
box-shadow:0px 4rpx 60rpx 0px rgba(247,208,147,0.7);
background-color: #F7D093;
border-radius: 36rpx;
font-size: 28rpx;
color: #000;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
position: fixed;
bottom: 144rpx;
left: 50%;
margin-left: -100rpx;
z-index: 11;
.eosfont {
font-size: 24rpx;
font-weight:900;
}
}
.screen_content::-webkit-scrollbar {
display: none;
}
.screen_content {
padding: 24rpx;
height: 100%;
box-sizing: border-box;
overflow-y: scroll;
.screen_title {
font-size: 36rpx;
height: 50rpx;
line-height: 50rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
margin-bottom: 80rpx;
}
.screen_item {
margin-bottom: 60rpx;
.screen_name {
font-size: 26rpx;
height: 36rpx;
line-height: 36rpx;
}
.screen_detail {
overflow: hidden;
display: flex;
flex-wrap: wrap;
.detail_item {
height: 60rpx;
line-height: 60rpx;
padding: 0 22rpx;
border-radius: 8rpx;
background-color: #F8F9FB;
color: #333333;
font-size: 26rpx;
margin: 24rpx 24rpx 0 0;
}
.detail_item:nth-of-type(3n) {
margin-right: 0;
}
.act {
background-color: #FFF8E9;
color: #BF9B43;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
}
}
.screen_item:last-child {
margin-bottom: 0;
}
.bottom_box {
position: fixed;
bottom: 24rpx;
width: 492rpx;
left: 24rpx;
display: flex;
.reset_btn {
width: 160rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
border-radius: 16rpx;
background-color: #FFF8E9;
font-size: 26rpx;
color: #BF9B43;
}
.confirm_btn {
width: 312rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background-color: #35363E;
border-radius: 16rpx;
font-size: 26rpx;
color: #FCE3C0;
margin-left: 20rpx;
}
}
}
}
</style>
pages/monthlyContract/monthlyContract.vue 0 → 100644
View file @ e6828b2e
<template>
<view class="main">
<TopBar title="我的合同" />
<view class="contract_bar">
<text class="left">当前合同</text>
<text class="right_btn" @click="cancelContract(data[0]['month_apply_id'])" v-if="data[0]['apply_status'] === '1' || data[0]['apply_status'] === '2'">退出包年计划</text>
</view>
<view class="now_contract">
<view class="contract_flex">
<view class="flex_left">
<view class="con_title">合同时长</view>
<view class="con_detail">{{data[0].contract_period}}个月</view>
</view>
<view class="flex_right">
<view class="con_title">签署时间</view>
<view class="con_detail">{{data[0].sign_time.substr(0, 10)}}</view>
</view>
</view>
<view class="contract_flex">
<view class="flex_left">
<view class="con_title">享受折扣</view>
<view class="con_detail">{{Number(data[0].discount)*10}}折</view>
</view>
<view class="flex_right">
<view class="con_title">采购量</view>
<view class="con_detail">≥{{data[0].min_quantity}}元</view>
</view>
</view>
<view class="contract_flex">
<view class="flex_left">
<view class="con_title">押金</view>
<view class="con_detail spec_color" v-if="data[0]['is_deposit'] === '1'">¥{{Number(data[0].deposit/100)*Number(data[0].min_quantity)}}</view>
<view class="con_detail" v-else>无</view>
</view>
<view class="flex_right">
<view class="con_title">状态</view>
<view class="con_detail spec_color">{{data[0].apply_status_name}}</view>
</view>
</view>
<view class="check_btn" @click="check(data[0].view_url)">查看合同</view>
</view>
<view class="contract_bar" v-if="data.length>1">
<text class="left">其他合同</text>
</view>
<view style="padding: 0;" v-if="data.length>1">
<view class="now_contract packup" v-for="(item, index) in data" :key="index" v-if="index !== 0" :style="[rotate[index]['rotate'] ? {'height':'400rpx'} : null]">
<view class="contract_flex">
<view class="flex_left">
<view class="con_title">合同时长</view>
<view class="con_detail">{{item.contract_period}}个月</view>
</view>
<view class="flex_right">
<view class="con_title">签署时间</view>
<view class="con_detail">{{item.sign_time.substr(0, 10)}}</view>
</view>
</view>
<view class="contract_flex">
<view class="flex_left">
<view class="con_title">享受折扣</view>
<view class="con_detail">{{Number(item.discount)*10}}折</view>
</view>
<view class="flex_right">
<view class="con_title">采购量</view>
<view class="con_detail">≥{{item.min_quantity}}元</view>
</view>
</view>
<view class="contract_flex">
<view class="flex_left">
<view class="con_title">押金</view>
<view class="con_detail spec_color" v-if="item.is_deposit === '1'">¥{{Number(item.deposit/100)*Number(item.min_quantity)}}</view>
<view class="con_detail" v-else>无</view>
</view>
<view class="flex_right">
<view class="con_title">状态</view>
<view class="con_detail spec_color">{{item.apply_status_name}}</view>
</view>
</view>
<text class="eosfont" :class="{rotate: rotate[index]['rotate']}"
@click="pack(index)">&#xe729;</text>
<view class="check_btn" @click="check(item.view_url)">查看合同</view>
</view>
</view>
</view>
</template>
<script>
import TopBar from '@/components/TopBar/TopBar.vue';
export default {
data() {
return {
data: [{
contract_period: '',
sign_time: '',
deposit: '',
discount: '',
min_quantity: '',
apply_status_name: ''
}],
rotate: [],
rotateKey: -1
}
},
onLoad() {
uni.request({
url: '/uni/api/month/GetMonthApplyList',
method: 'GET',
dataType: 'json',
success: (res) => {
if(res.data.code === 0) {
this.data = res.data.data;
let arr = [];
res.data.data && res.data.data.map((item, index) => {
let o = {rotate: false};
arr.push(o);
});
this.rotate = arr;
}
}
});
},
methods: {
cancelContract(id) {
uni.showModal({
title: '提示',
content: '确认取消该合同吗？',
success:(data) => {
if(data.confirm) {
uni.request({
url: '/uni/api/month_signcontract/CancelContract',
method: 'POST',
dataType: 'json',
data: {
month_apply_id: id
},
success: (res) => {
uni.showToast({
title: '您的合同已取消',
icon: 'none'
});
setTimeout(() => {
this.$jump('/pages/monthly/monthly',2);
}, 2000);
}
})
}
}
});
},
pack(key) {
this.rotate[key]['rotate'] = !this.rotate[key]['rotate'];
},
check(url) {
uni.navigateTo({
url: `/pages/web/web?contract_url=${url}`
});
}
},
components: {
TopBar
}
}
</script>
<style lang="scss" scoped>
.main {
padding-top: 80rpx;
background-color: #F5F5F5;
.contract_bar {
height: 98rpx;
padding: 0 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
.left {
font-size: 36rpx;
color: #000;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.right_btn {
width: 200rpx;
height: 60rpx;
border: 1px solid #dcdcdc;
box-sizing: border-box;
background-color: #fff;
text-align: center;
line-height: 58rpx;
font-size: 26rpx;
color: #333;
border-radius: 30rpx;
}
}
.now_contract {
padding: 32rpx;
background-color: #fff;
position: relative;
transition: all 0.5s;
.contract_flex {
display: flex;
margin-bottom: 24rpx;
.flex_left {
margin-right: 182rpx;
width: 120rpx;
}
}
.con_title {
color: #464646;
font-size: 26rpx;
height: 36rpx;
line-height: 36rpx;
margin-bottom: 4rpx;
}
.con_detail {
color: #000;
font-size: 32rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
height: 44rpx;
line-height: 44rpx;
}
.spec_color {
color: #B48000;
}
.check_btn {
width: 100%;
height: 76rpx;
line-height: 74rpx;
text-align: center;
border: 1px solid #464646;
box-sizing: border-box;
color: #464646;
font-size: 26rpx;
border-radius: 16rpx;
}
}
.packup {
border-bottom: 1px solid #ececec;
height: 80rpx;
overflow: hidden;
.eosfont {
font-size: 32rpx;
font-weight: 900;
position: absolute;
right: 24rpx;
top: 60rpx;
transition: all 0.5s;
}
.rotate {
transform: rotateZ(180deg);
}
}
}
</style>
pages/monthlyDeposit/monthlyDeposit.vue 0 → 100644
View file @ e6828b2e
<template>
<view class="main">
<TopBar title="缴纳押金" :bold="true" />
<view class="deposit_card">
<view class="bar">
<text class="title1">当前计划详情</text>
<text class="title2">/ 缴纳押金后即可享受计划</text>
</view>
<view class="tip1">开通时间</view>
<view class="month">{{data.contract_period || 0}}个月</view>
<view class="tip2">计划持续时间</view>
<view class="info_box">
<view class="info_item info1">
<view class="tip1">商品折扣</view>
<view class="month">{{data.discount*10 || 0}}折</view>
<view class="tip2">包年计划内商品</view>
</view>
<view class="info_item info2">
<view class="tip1">押金</view>
<view class="month">{{(data.min_quantity*data.deposit/100) || 0}}元</view>
<view class="tip2">达成计划后退还</view>
</view>
</view>
<view class="check_btn" @click="previewContract">查看我的合同</view>
<view class="pay_btn" @click="goPay">支付押金 ¥{{(data.min_quantity*data.deposit/100) || 0}}</view>
<view class="cancel_btn" @click="open">取消支付 重新签署合同</view>
</view>
<uni-popup ref="popup">
<view class="cancel_card">
<view class="linear">
<view class="title1">请问您要</view>
<view class="title2">取消当前包年计划 ？</view>
</view>
<view class="content_box">
<view>
<view class="title1">商品折扣</view>
<view class="title2">包年计划内产品</view>
</view>
<view style="position:relative;">
<text class="num">{{data.discount*10}}</text>
<text class="abso">折</text>
</view>
</view>
<view class="content_box">
<view>
<view class="title1">享受时间</view>
<view class="title2">包年计划持续时间</view>
</view>
<view style="position:relative;">
<text class="num">{{data.contract_period}}</text>
<text class="abso">月</text>
</view>
</view>
<view class="btn_box">
<view class="btn" @click="close">取消</view>
<view class="btn confirm" @click="cancel">确认</view>
</view>
</view>
</uni-popup>
<uni-popup ref="pay" type="bottom">
<view class="popup_content">
<view class="popup_top_bar">选择支付方式<text @click="closePay"></text></view>
<view class="flex">
<text class="pay_title">支付押金</text>
<text class="pay_num">¥{{data.min_quantity*data.deposit/100}}</text>
</view>
<view class="flex pay_item" @click="handleSelect(1)">
<view class="flex">
<text class="pay_methods_icon yue"></text>
<view>
<view class="pay_methods_name">余额支付</view>
<view class="pay_methods_num">剩余余额：{{data.money}}元</view>
</view>
</view>
<text :class="type ===1 ? 'check' : 'uncheck'"></text>
</view>
<view v-if="isWx" class="flex pay_item pay_item_other" @click="handleSelect(2)">
<view class="flex">
<text class="pay_methods_icon weixin"></text>
<view>
<view class="pay_methods_name">微信支付</view>
</view>
</view>
<text :class="type === 2 ? 'check' : 'uncheck'"></text>
</view>
<view v-if="!isWx" class="flex pay_item pay_item_other" @click="handleSelect(3)">
<view class="flex">
<text class="pay_methods_icon alipay"></text>
<view>
<view class="pay_methods_name">支付宝支付</view>
</view>
</view>
<text :class="type === 3 ? 'check' : 'uncheck'"></text>
</view>
<view class="pay_methods_btn" @click="handleSubmit">确认支付</view>
</view>
</uni-popup>
</view>
</template>
<script>
import TopBar from '@/components/TopBar/TopBar.vue';
import uniPopup from "@/components/uni-popup/uni-popup.vue";
import { isWeixin } from '../../common/util.js';
export default {
data() {
return {
data: {},
type: 1,
isWx: false,
pageShow: false
}
},
onLoad(options) {
this.isWx = isWeixin();
uni.request({
url: `/uni/api/month_repayment/PayDetails/${options.month_apply_id}`,
method: 'GET',
dataType: 'json',
success: (res) => {
if(res.data.code === 0) {
if(res.data.data === null) {
uni.showToast({
title: '您已支付过押金',
icon: 'none'
});
setTimeout(() => {
this.$jump('/pages/monthly/monthly', 2);
}, 2000);
return
}
this.data = res.data.data;
} else {
uni.showToast({
title: res.data.message,
icon: 'none'
});
}
}
})
},
methods: {
close() {
this.$refs.popup.close();
},
open() {
this.$refs.popup.open();
},
goPay() {
this.$refs.pay.open();
},
closePay() {
this.$refs.pay.close();
},
// 选择支付方式
handleSelect(type){
this.type = type;
},
// 确认支付
handleSubmit(){
const {origin} = location;
const amount = this.data.min_quantity*this.data.deposit/100;
// 余额支付
this.pageShow = true;
this.$refs.pay.close();
if(this.type === 1){
uni.navigateTo({
url: `/pages/yuepay/yuepay?amount=${amount}&money=${this.data.money}&order_id=${this.data.order_no}&type=monthly`
})
}
// 微信支付
if(this.type === 2){
uni.setStorage({
key: 'monthly',
data: 'monthly',
success: () => {
this.$jump(`${origin}/uni/api/repayment/RedirectAuth?amount=${amount}&order_id=${this.data.order_no}`);
}
})
}
// 支付宝支付
if(this.type === 3){
uni.showLoading({
title: '提交中。。。'
})
uni.request({
url: `/uni/api/month_repayment/GoPay`,
method: 'post',
dataType: 'json',
data: {
amount: parseFloat(amount),
order_id: this.data.order_no,
payment_code: "epayalipaywap",
payment_name: "手机支付宝支付"
},
success: (res) => {
const {data} = res;
uni.hideLoading();
if(data.code === 0){
this.$jump(data.data);
}else{
uni.showToast({
title: '发起支付失败',
icon: 'none'
})
}
}
})
}
},
cancel() {
uni.request({
url: '/uni/api/month_signcontract/CancelContract',
method: 'POST',
dataType: 'json',
data: {
month_apply_id: this.data.month_apply_id
},
success: (res) => {
if(res.data.code === 0) {
this.close()
uni.showToast({
title: '您的合同已取消',
icon: 'none'
});
setTimeout(() => {
this.$jump('/pages/monthly/monthly',2);
}, 2000);
}
}
});
},
previewContract() {
uni.showLoading({
title: '获取合同中'
});
uni.request({
url: '/uni/api/month_signcontract/PreviewContract',
method: 'POST',
dataType: 'json',
data: {},
success: (res) => {
if(res.data.code === 0) {
uni.hideLoading();
uni.navigateTo({
url: `/pages/web/web?contract_url=${res.data.data.viewUrl}`
});
}
}
})
}
},
components: {
TopBar,
uniPopup
}
}
</script>
<style lang="scss" scoped>
.main {
padding-top: 80rpx;
min-height: 100vh;
box-sizing: border-box;
background-color: #F5F5F5;
.deposit_card {
width: 702rpx;
margin: 24rpx auto;
background-color: #fff;
padding: 32rpx;
box-sizing: border-box;
.bar {
height: 44rpx;
line-height: 44rpx;
margin-bottom: 50rpx;
.title1 {
font-size: 32rpx;
color: #000;
height: 44rpx;
line-height: 44rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.title2 {
color: #7C7C7C;
font-size: 26rpx;
height: 36rpx;
line-height: 36rpx;
margin-left: 16rpx;
}
}
.tip1 {
color: #464646;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
}
.month {
color: #000;
font-size: 40rpx;
height: 56rpx;
line-height: 56rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
margin: 8rpx 0 4rpx;
}
.tip2 {
color: #979797;
font-size: 24rpx;
height: 34rpx;
line-height: 34rpx;
}
.info_box {
display: flex;
margin-top: 50rpx;
.info_item {
width: 168rpx;
margin-right: 80rpx;
}
.info_item:nth-of-type(2) {
margin-right: 0;
}
}
.check_btn {
color: #0074FF;
font-size: 40rpx;
height: 56rpx;
line-height: 56rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
margin: 50rpx 0 80rpx;
}
.pay_btn {
height: 80rpx;
line-height: 80rpx;
text-align: center;
background-color: #FFCD00;
border-radius: 16rpx;
color: #000;
font-size: 32rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.cancel_btn {
height: 80rpx;
line-height: 80rpx;
text-align: center;
background-color: #F8F8F8;
border-radius: 16rpx;
color: #464646;
font-size: 28rpx;
margin-top: 24rpx;
}
}
.cancel_card {
width: 578rpx;
height: 620rpx;
background-color: #fff;
box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.1);
border-radius:20rpx;
overflow: hidden;
.linear {
width: 418rpx;
height: 176rpx;
background:linear-gradient(180deg,rgba(255,231,130,1) 0%,rgba(255,253,250,1) 100%);
overflow: hidden;
.title1 {
font-size: 32rpx;
height: 44rpx;
line-height: 44rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
margin: 32rpx 0 4rpx 32rpx;
}
.title2 {
font-size: 40rpx;
height: 56rpx;
line-height: 56rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
margin-left: 32rpx;
}
}
.content_box {
width: 514rpx;
height: 114rpx;
border-radius: 16rpx;
background-color: #fbfbfb;
margin: 0 auto 16rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 48rpx 0 24rpx;
box-sizing: border-box;
.title1 {
font-size: 28rpx;
color: #333;
height: 40rpx;
line-height: 40rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
margin-bottom: 2rpx;
}
.title2 {
color: #979797;
font-size: 20rpx;
height: 28rpx;
line-height: 28rpx;
}
.num, .abso {
font-size: 60rpx;
color: #FF6400;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
}
.abso {
font-size: 20rpx;
position: absolute;
top: 14rpx;
}
}
.btn_box {
display: flex;
justify-content: space-between;
width: 530rpx;
margin: 100rpx auto 0;
.btn {
width: 256rpx;
height: 76rpx;
text-align: center;
line-height: 76rpx;
border-radius: 16rpx;
background: #F5F5F5;
color: #7C7C7C;
font-size: 32rpx;
}
.confirm {
background: #FFCD00;
color: #000;
}
}
}
}
.popup_content {
border-radius:24rpx 24rpx 0px 0px;
background-color: #fff;
padding: 42rpx 32rpx 22rpx;
.popup_top_bar {
position: relative;
text-align: center;
color: #7C7C7C;
font-size: 30rpx;
line-height: 42rpx;
margin-bottom: 56rpx;
text {
position: absolute;
width: 56rpx;
height: 56rpx;
right: 0;
top: -6rpx;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAnFBMVEUAAAD////////////4+Pj5+fn5+fn4+Pj4+Pj4+Pj5+fn5+fn4+Pj39/f5+fn5+fn5+fmNjY2SkpKTk5OWlpacnJydnZ2enp6np6epqamrq6u5ubm6urq7u7u9vb3KysrLy8vU1NTV1dXW1tbc3Nzh4eHn5+fo6Ojq6urs7Ozt7e3v7+/w8PDx8fHy8vLz8/P09PT19fX39/f4+Pi1Oh3/AAAAEXRSTlMABwwYJC1XiZmbx8ji6vT4+TH0AcAAAAFMSURBVEjHndfncsIwEATgswFXXBRCGklIj0kjcO//bjFucZMs7f7UzDeybA23EDWxHS+MEpYkiULPsWmYuR/zZGJ/3mOWm7JWUtdqu1nA2glm/26xZIMsF81+Ri6X1Z5WwIYJynO6bBy3+A6pOUxPX8VnIH5+X2IExjY5DMUhD4MehRgMKcJgRAkGE2IwQ3h4yvorj5kOvBGr187C/kqs3qfhtxBdmTshHjR2vOvKwq0/NeBx05al+9A5Y0dK3RhsSbkbhY1UuHFYyReFk8BSCoWTwVpKnRTy/vwEn9kUFu9F9G/fNCzcmUqS3K13G4UkhevdvmlYO1ZJUjmVJKVTyAE8XrddLd+m4U/XVXKr8aj34mLXfYZbcfml83Ky38HKYeSM8A8yPALgoQOPOXiwwqMcLg94XYELEl7J4BKI10686OLVGi/z5n8f/gDdHCF1hcxGRAAAAABJRU5ErkJggg==') no-repeat;
background-size: 100% 100%;
}
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
.pay_title {
height:44rpx;
line-height: 44rpx;
font-size:32rpx;
color: #212121;
}
.pay_num {
color: #212121;
height:50rpx;
font-size:36rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600
}
.pay_methods_icon {
width: 60rpx;
height: 60rpx;
background-size: 100% 100%;
background-repeat: no-repeat;
margin-right: 16rpx;
&.yue{
background-image: url(../../static/paytype/yue.png);
}
&.weixin{
background-image: url(../../static/paytype/weixin.png);
}
&.alipay{
background-image: url(../../static/paytype/alipay.png);
}
}
.pay_methods_name {
font-size: 26rpx;
color: #212121;
line-height: 36rpx;
margin-bottom: 4rpx;
}
.pay_methods_num {
font-size: 24rpx;
color: #8D8D8D;
line-height: 34rpx;
}
.uncheck {
width: 40rpx;
height: 40rpx;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAAAAADEa8dEAAAA4ElEQVQ4y73UuwqDMBSA4b7/K/06RBwEBxGcI0jIJOggdvGYDrW2thFOhzZb4MvtXHIJinH5FZLBO+cHOUerKxMASEq3xpE3QF41TZUDxkeQ1JDZ6T6ZbAa1vKNrQWqX5+LFphTXI5ICMx5vOxoKOaAaM78/fDbUr8iTjp/hGVP8E60GGwuixaw7cmRLDC0ZbkdlfKMQLOUDScIURxOJbKgnP0ttTr+hjuoMVXQbamnOUEP7DVIdp7q4KgSqYOrSokqwqlR0RacrX1Uj6FpK15zKNg8hBOm7tu16+dP/FB83GSPcKcU7y9kAAAAASUVORK5CYII=') no-repeat;
background-size: 100% 100%;
}
.check {
width: 40rpx;
height: 40rpx;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAACoFBMVEUhISEkIyArKR84Mx49Nh1cThhgURdiUxdqWRZwXhVzYBV+aROAahOihQ61kwu4lQu6lwq9mQrKpAjasAXwwQL3xgH9ywD/zQD/zQH/zQL/zgf/zgn/zwr/zxD/0BD/0BL/0BP/0RP/0RT/0RX/0h7/0x7/0x//0yP/1CT/1Cj/1Sf/1Sj/1Sr/1Sz/1jH/1zP/1zT/1zX/2Dn/2Dr/2T//2UD/2UL/2kH/2kT/2kX/20X/3E3/3E//3VL/3VT/3lT/3lf/3lj/31v/313/31//32H/4GH/4Gb/4Wb/4Wr/4Wz/4mn/4mv/4m3/43H/43L/43T/43X/5HP/5HT/5HX/5Hb/5Hf/5Hj/5Hn/5Hr/5Xn/5Xv/5X3/5oD/5oH/5oP/5oT/54P/54X/54b/54f/54n/6In/6Iv/6I7/6Y7/6Y//6ZL/6ZP/6ZT/6pf/6pj/6pn/65f/65n/65r/65v/657/65//7KD/7KP/7KT/7aP/7ab/7af/7aj/7an/7qr/7qv/7qz/7q3/763/767/76//77H/77P/8LT/8LX/8Lb/8Lf/8br/8bv/8b3/8r7/8sD/8sH/8sL/88L/88T/88X/88b/88n/9Mj/9Mn/9Mr/9Mv/9Mz/9M3/9c3/9c7/9dD/9dH/9tH/9tL/9tP/9tT/99b/99f/99j/99n/99r/99z/+Nv/+Nz/+N3/+N7/+N//+d7/+d//+eH/+eL/+eP/+eX/+uL/+uT/+uX/+ub/+uf/+uj/+un/+uv/++r/++v/++z/++3/++7/++//+/D//O7//O///PD//PH//PL//PP//PT//PX//fT//fX//fb//ff//fj//fn//fv//vb//vj//vn//vr//vv//vz//v3///z///3///7////If3C4AAACf0lEQVQ4y2O4TwRgQBe4BwR4FN27dfPyxfPnTp8+c+Hi5Zu372FRdO/m9bMn922ujg8Pj6/efujUhcu37qEpunfr+vljW1P0JcXBQNIgbcdxhDKIors3LxzdlSkvjgTks/acunbzHkLR7RvnD660EEcDlmuPXbhyF6bo7o3z+6doi2MA7RkHL1y5B1F07+b5/Yu1xLEAzeUHL4BsZAC6+cLBVabiWIHZ+uPXboMU3b58ZH2cOA6QtOXU5XtARTfPbZsli0uR3KK9F27dZ7h3/dCKYHGcIGzjicv3GG6d3zlLB1NSmFcETOsu2HvhNsONE2u6JTHUCDExcELCvm/z6TsMlw4sjsOmhoEbwkxecfgGw4VdM10hXAEWHjGEGlZRCNtjwf5rDGc2T3KAcNkYGLjE0NWIO03fdYHh9Lo+ewhXkBGiCkWNuOOUrVcZTq7ucYTy+cCqUNWIO0/ecgakyFccSRU7qhrxIJAioHXZEsiqUNVIFIOsAzq8RFUcWRWyGnG1KpDDgUFQYYMQ5GfmQFYjbtcACgJgYLamSOOKOpmMLlBgAqOlN88alyLb0kmgaAFFcE2COnY1Gukt4AgGJZWe/ABFbGqUIksngJMKKNHNbcn0UMBUo+iT27lkDyjRgZPv1JpUHxV0NWp+GU2zockXnBEmVqb5mUghK5EyD8monwbLCOAstWJSTUaUu5ESNOwllI29Y3Iap62DZSlI5lw1taUoKdTTxcJQT8/Qys0rIrW0fdZGROaEZPMN83vr8tNjI0L8/QOjEzNKmics3IKczaEFxso5fW01ZQWFhcXltR0T569GKzCgRc+2dUvnTJ3Q3z9x2rxlm3afQBQ9AO0gCIzNUhSlAAAAAElFTkSuQmCC') no-repeat;
background-size: 100% 100%;
}
}
.pay_item {
height: 120rpx;
align-items: center;
border-bottom: 1px solid #ECECEC;
.flex {
margin-top: 0;
}
}
.pay_methods_btn {
width: 100%;
height: 76rpx;
line-height: 76rpx;
border-radius: 16rpx;
background-color: #FFCD00;
text-align: center;
font-size: 28rpx;
margin-top: 22rpx;
}
.pay_item_other{
margin-top: 0;
}
}
</style>
pages/monthlyIntroduce/monthlyIntroduce.vue 0 → 100644
View file @ e6828b2e
<template>
<view class="main">
<view class="top_bar">
<text class="eosfont" @click="$backup">&#xe743;</text>
包月说明
</view>
<view class="content_view">
<view class="content_title">
<text class="circle_num">1</text>包月是什么？
</view>
<view class="content_main">谛宝多多会根据医院的拿货周期，起订量给医院下发一个折扣，包月期间，医院购买参与包月的商品时可享受折扣，单品最低5折。</view>
<view class="content_title">
<text class="circle_num">1</text>怎么包月？
</view>
<view class="content_main">点击下方选择起订量，选择拿货周期和起订量，签署合同，缴纳押金，则完成包月，合同有效期内，购买包月产品，立享折扣。</view>
<view class="content_title">
<text class="circle_num">1</text>关于押金
</view>
<view class="content_main">合同有效期内，包月产品消费总额（折扣价）达到起订量，自合同结束日期5个工作日内，全额退还押金，否则不予以退还。</view>
<view class="content_title">
<text class="circle_num">1</text>缴纳押金与不缴纳押金的区别
</view>
<view class="content_main">缴纳押金，合同有效期内购买包月产品可立享全额折扣；不缴纳押金，合同有效期内购买包月产品，统一享受8.5折，合同有效期内，包月产品消费总额（折扣价）达到起订量，自合同结束日期5个工作日内，按差价返现至账户余额，可提现，（例如全额折扣为6折，则返现消费总额的25%）反之不予以返现。</view>
<view class="content_title" style="margin-bottom: 0;">有任何问题</view>
<view class="content_title">烦请点击页面上的消息按钮进行咨询</view>
<view class="join_btn" @click="joinMonthly">加入包年计划</view>
</view>
</view>
</template>
<script>
import { login } from '@/common/util.js';
export default {
data() {
return {
login_flg: 0
}
},
onLoad(options) {
this.login_flg = options.login_flg - 0;
},
methods: {
// 加入计划
joinMonthly() {
if(!this.login_flg) {
login();
return
}
this.$jump('/pages/monthlyJoin/monthlyJoin',2)
}
}
}
</script>
<style lang="scss" scoped>
.main {
background-color: #FFFCF6;
.top_bar {
height: 80rpx;
line-height: 80rpx;
text-align: center;
background:linear-gradient(135deg,rgba(255,232,199,1) 0%,rgba(214,163,93,1) 100%);
border-radius: 0 0 24rpx 24rpx;
position: fixed;
width: 100%;
box-sizing: border-box;
.eosfont {
font-size: 56rpx;
position: absolute;
left: 20rpx;
top: 2rpx;
}
}
.content_view {
padding: 130rpx 40rpx 24rpx;
.content_title {
margin-bottom: 20rpx;
font-size: 32rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
height: 44rpx;
line-height: 44rpx;
display: flex;
align-items: center;
.circle_num {
width: 28rpx;
height: 28rpx;
border-radius: 50%;
background-color: #DCAD6C;
color: #fff;
line-height: 28rpx;
text-align: center;
font-size: 22rpx;
display: inline-block;
margin-right: 10rpx;
}
}
}
.content_main {
font-size: 28rpx;
color: #807B74;
line-height: 40rpx;
margin-bottom: 30rpx;
}
.join_btn {
height: 88rpx;
line-height: 88rpx;
background:linear-gradient(314deg,rgba(238,190,114,1) 0%,rgba(255,224,176,1) 100%);
box-shadow:0px 4rpx 40rpx 0px rgba(242,199,130,0.5);
border-radius: 20rpx;
text-align: center;
font-size: 32rpx;
position: fixed;
left: 24rpx;
bottom: 24rpx;
width: 702rpx;
}
}
</style>
pages/monthlyJoin/monthlyJoin.vue 0 → 100644
View file @ e6828b2e
<template>
<view class="main">
<TopBar title="加入包年计划" :bold="true" />
<text class="ins_btn" @click="$jump('/pages/monthlyIntroduce/monthlyIntroduce',2)">说明</text>
<view class="bar">
<text class="title1">选择您的包年计划</text>
<text class="title2">/ 选择计划开通时限</text>
</view>
<view class="plan_card">
<view class="card_btn_box">
<view class="card_btn" v-for="(item, index) in ruleList" :key="index" :class="{act: index=== key}" @click="changeMonth(index)">
开通{{item.contract_period}}个月
<!-- <view class="label">最划算</view> -->
</view>
</view>
<view class="card_tips" v-if="tips">
<text>请根据您{{ruleList[key]['contract_period']}}个月内计划采购总量，选择折扣方案</text>
<text @click="closeTips">×</text>
</view>
<view class="now_plan">
<text class="left">当前方案：</text>
<text class="right">
采购量需≥<text class="amount">{{ruleList[key]['child'][monthKey]['min_quantity']}}</text> 元
</text>
</view>
<view class="overdate">{{overdate}} 到期</view>
<view class="pre_box">
<view class="pre_item" v-for="(item, index) in ruleList[key]['child']" :key="index" :class="{act: monthKey === index}" @click="changeDiscount(index)">
<view class="title1">商品折扣</view>
<view class="title2">{{Number(item.discount)*10}}折</view>
<view class="title3">包年计划内商品</view>
<view class="label" v-if="item.cheap_flg === '1'">最优惠</view>
</view>
</view>
</view>
<view class="bar">
<text class="title1">选择押金方案</text>
<text class="title2">/ 达成计划后将退还押金</text>
</view>
<view class="pay_card">
<view class="title1" v-if="depositKey === '1'">先缴纳押金，可立享即时折扣</view>
<view class="title1" v-else>0押金，先按原价购买</view>
<view class="title2" v-if="depositKey === '1'">达成计划：退还押金¥{{Number(ruleList[key]['child'][monthKey]['min_quantity'])*Number(ruleList[key]['child'][monthKey]['deposit'])/100}}</view>
<view class="title2" v-else>达成计划：满¥{{ruleList[key]['child'][monthKey]['min_quantity']}}按{{Number(ruleList[key]['child'][monthKey]['discount'])*10}}折返现</view>
<view class="pay_box">
<view class="pay_item" :class="{act: depositKey === '1'}" @click="changeDeposit('1')">
<view class="title1">押金：<text>¥{{Number(ruleList[key]['child'][monthKey]['min_quantity'])*Number(ruleList[key]['child'][monthKey]['deposit'])/100}}</text></view>
<view class="title2">达成计划后退还</view>
</view>
<view class="pay_item" :class="{act: depositKey === '0'}" @click="changeDeposit('0')">
<view class="title1">押金：<text>0</text></view>
<view class="title2">达成计划后返现</view>
</view>
</view>
</view>
<view class="bottom_fixed">
<view class="fixed_top">
<text class="checked eosfont" v-if="checked" @click="check">&#xe61e;</text>
<text class="uncheked" v-else @click="check"></text>
<text>我已阅读</text>
<text class="contract" @click="previewContract">《谛宝多多包年会员合同》</text>
</view>
<view class="fixed_bottom" @click="submit">同意并签署合同</view>
</view>
</view>
</template>
<script>
import TopBar from '@/components/TopBar/TopBar.vue';
import moment from 'moment';
export default {
data() {
return {
tips: true,
checked: false,
ruleList: [{
child: [
{contract_period:1, min_quantity:0}
]
}],
key: 0,
monthKey: 0,
depositKey: '1', // 1交押金 0不交押金
month_rule_id: '',
auth_status: '', // 是否四要素
overdate: ''
}
},
onLoad() {
uni.request({
url:'/uni/api/month_signcontract/MonthRuleList',
method: 'GET',
dataType: 'json',
success: (res) => {
if(res.data.code === 0) {
this.ruleList = res.data.data.ruleList;
this.month_rule_id = res.data.data.ruleList[0]['child'][0]['month_rule_id'];
this.auth_status = res.data.data.auth_status;
let month = this.ruleList[0]['contract_period'];
this.overdate = moment().add(month,'M').format('YYYY.MM.DD');
}
}
})
},
methods: {
closeTips() {
this.tips = false;
},
check() {
this.checked = !this.checked;
},
changeMonth(key) {
this.key = key;
this.monthKey = 0;
this.month_rule_id = this.ruleList[key]['child'][this.monthKey]['month_rule_id'];
let month = this.ruleList[key]['contract_period'];
this.overdate = moment().add(month,'M').format('YYYY.MM.DD');
},
changeDiscount(key) {
this.monthKey = key;
this.month_rule_id = this.ruleList[this.key]['child'][key]['month_rule_id'];
},
changeDeposit(key) {
this.depositKey = key;
},
submit() {
if(!this.checked) {
uni.showToast({
title: '请先勾选《谛宝多多包年会员合同》',
icon: 'none'
})
return
}
// 是否四要素校验
if(this.auth_status === '1') {
uni.showLoading({
title: '提交中',
mask: true
})
uni.request({
url: '/uni/api/month_signcontract/AddContract',
method: 'POST',
dataType: 'json',
data: {
is_deposit: this.depositKey,
month_rule_id: this.month_rule_id
},
success:(res) => {
if(res.data.code === 0) {
uni.hideLoading();
uni.showToast({
title: '合同已签署',
icon: 'none'
})
// 是否交押金
if(this.depositKey === '1') {
// 交押金
setTimeout(() => {
this.$jump(`/pages/monthlyDeposit/monthlyDeposit?month_apply_id=${res.data.data.month_apply_id}`,2);
}, 2000);
} else {
// 不交押金
setTimeout(() => {
this.$jump(`/pages/monthlyPlan/monthlyPlan?month_apply_id=${res.data.data.month_apply_id}`,2);
}, 2000);
}
} else {
uni.hideToast();
uni.showToast({
title: res.data.message,
icon: 'none'
})
}
}
})
} else {
this.$jump(`/pages/certification/certification?month_rule_id=${this.month_rule_id}&is_deposit=${this.depositKey}`,2)
}
},
previewContract() {
uni.showLoading({
title: '获取合同中'
});
uni.request({
url: '/uni/api/month_signcontract/PreviewContract',
method: 'POST',
dataType: 'json',
data: {},
success: (res) => {
if(res.data.code === 0) {
uni.hideLoading();
uni.navigateTo({
url: `/pages/web/web?contract_url=${res.data.data.viewUrl}`
});
}
}
})
}
},
components: {
TopBar
}
}
</script>
<style lang="scss" scoped>
.main {
padding: 80rpx 24rpx 168rpx;
background-color: #fff;
.ins_btn {
font-size: 26rpx;
color: #000;
height: 36rpx;
line-height: 36rpx;
position: fixed;
right: 24rpx;
top: 22rpx;
z-index: 101;
}
.bar {
height: 98rpx;
line-height: 98rpx;
.title1 {
font-size: 32rpx;
color: #000;
height: 44rpx;
line-height: 44rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.title2 {
color: #7C7C7C;
font-size: 26rpx;
height: 36rpx;
line-height: 36rpx;
margin-left: 16rpx;
}
}
.plan_card {
width: 100%;
border-radius: 20rpx;
box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.06);
.card_btn_box {
height: 82rpx;
display: flex;
background:linear-gradient(270deg,rgba(255,251,238,1) 0%,rgba(255,246,217,1) 100%);
.card_btn {
text-align: center;
line-height: 82rpx;
font-size: 30rpx;
color: #7B5100;
flex: 1;
.label {
width: 80rpx;
height: 32rpx;
line-height: 32rpx;
text-align: center;
background: #FF6400;
border-radius:16rpx 16rpx 16rpx 0px;
color: #fff;
font-size: 18rpx;
position: absolute;
right: 18rpx;
top: -10rpx;
}
}
.act {
background-color: #FFF;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color: #000;
position: relative;
}
.act:after {
content: '';
width: 40rpx;
height: 6rpx;
background-color: #FF6400;
border-radius: 3rpx;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -20rpx;
}
.card_btn:nth-of-type(1) {
border-top-right-radius: 16rpx;
}
.card_btn:nth-of-type(2) {
border-bottom-left-radius: 16rpx;
}
}
.card_tips {
height: 56rpx;
width: 654rpx;
border-radius: 8rpx;
background-color: #2F2E33;
line-height: 56rpx;
color: #F3D8A6;
font-size: 24rpx;
padding: 0 24rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
margin: 30rpx auto 32rpx;
}
.now_plan {
width: 654rpx;
height: 44rpx;
line-height: 44rpx;
display: flex;
justify-content: space-between;
margin: 0 auto;
.left {
color: #333;
font-size: 28rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.right {
font-size: 24rpx;
.amount {
font-size: 32rpx;
color: #B48000;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
margin: 0 16rpx;
}
}
}
.overdate {
font-size: 24rpx;
color: #7C7C7C;
height: 34rpx;
line-height: 34rpx;
margin: 0 0 32rpx 24rpx;
}
.pre_box {
width: 654rpx;
display: flex;
flex-wrap: wrap;
margin: 0 auto 16rpx;
.pre_item {
width: 204rpx;
height: 200rpx;
box-sizing: border-box;
border-radius: 16rpx;
border: 2rpx solid #ECECEC;
box-sizing: border-box;
text-align: center;
position: relative;
margin-bottom: 26rpx;
.label {
width: 96rpx;
height: 36rpx;
line-height: 36rpx;
text-align: center;
font-size: 22rpx;
color: #fff;
background: #FF6400;
border-radius:30rpx 20rpx 20rpx 0;
position: absolute;
left: 0;
top: -18rpx;
z-index: 10;
}
.title1 {
font-size: 28rpx;
color: #333;
height: 40rpx;
line-height: 40rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
margin-top: 24rpx;
}
.title2 {
color: #CE9300;
font-size: 36rpx;
height: 50rpx;
line-height: 50rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
margin: 14rpx auto 8rpx;
}
.title3 {
color: #979797;
font-size: 22rpx;
height: 32rpx;
line-height: 32rpx;
}
}
.pre_item:nth-of-type(3n-1) {
margin: 0 20rpx;
}
.act {
border: 4rpx solid #F2D8A4;
background-color: #FFFBF3;
.title3 {
color: #CE9300;
}
}
}
}
.pay_card {
padding: 24rpx 24rpx 28rpx;
border-radius: 20rpx;
box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.07);
.title1 {
color: #977035;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.title2 {
color: #979797;
font-size: 26rpx;
height: 36rpx;
line-height: 36rpx;
}
.pay_box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 24rpx;
.pay_item {
width: 318rpx;
height: 120rpx;
border-radius: 16rpx;
border: 2px solid #ECECEC;
text-align: center;
box-sizing: border-box;
.title1 {
color: #333333;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
margin-top: 20rpx;
text {
color: #FF4A00;
}
}
.title2 {
margin-top: 8rpx;
color: #979797;
font-size: 22rpx;
height: 32rpx;
line-height: 22rpx;
}
}
.act {
border: 4rpx solid #F2D8A4;
background-color: #FFFBF3;
.title2 {
color: #CE9300;
}
}
}
}
.bottom_fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 168rpx;
.fixed_top {
height: 80rpx;
display: flex;
align-items: center;
font-size: 26rpx;
color: #000;
.uncheked {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
background-color: #fff;
margin: 0 16rpx 0 24rpx;
display: inline-block;
box-sizing: border-box;
border: 1px solid rgba(0,0,0,0.5);
}
.checked {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
background-color: #FFCD00;
display: inline-block;
text-align: center;
line-height: 32rpx;
margin: 0 16rpx 0 24rpx;
}
.contract {
color: #009BFF;
text-decoration: underline;
}
}
.fixed_bottom {
height: 88rpx;
line-height: 88rpx;
text-align: center;
background-color: #FFCD00;
font-size: 32rpx;
color: #000;
}
}
}
</style>
pages/monthlyPlan/monthlyPlan.vue 0 → 100644
View file @ e6828b2e
<template>
<view class="main">
<view class="top_bar">
<view class="left" @click="$backup">
<text class="eosfont left_icon">&#xe743;</text>l
<text class="close_title">关闭</text>
</view>
<text class="middle">我的包年计划</text>
<text class="my_contract" @click="$jump('/pages/monthlyContract/monthlyContract',2)">我的合同</text>
</view>
<view class="plan_info">
<view class="info_title">当前累计已采购 (元)</view>
<view class="info_amount">{{month_apply_info.total_amount}}</view>
<view class="wait" v-if="month_apply_info.apply_status=== '1'" @click="$jump(`/pages/monthlyDeposit/monthlyDeposit?month_apply_id=${month_apply_info.month_apply_id}`,2)">您有一笔押金等待缴纳</view>
<view class="info_detail">
<view class="detail_item">
<view class="title1">{{month_apply_info.date_diff}}天</view>
<view class="title2">剩余时间</view>
</view>
<text class="line"></text>
<view class="detail_item">
<view class="title1">{{month_apply_info.min_quantity}}元</view>
<view class="title2">计划总采购</view>
</view>
<text class="line"></text>
<view class="detail_item">
<view class="title1">{{month_apply_info.discount*10}}折</view>
<view class="title2">当前享折扣</view>
</view>
</view>
</view>
<view class="mid_card">
<view class="mid_left">
<view class="text1">包年计划商品专区</view>
<view class="text2">自由搭配 采购钜惠</view>
</view>
<view class="mid_right">
<view class="text1">折扣采购</view>
<view class="text2" @click="$jump('/pages/monthly/monthly',2)">去看看</view>
</view>
</view>
<view class="pro_title">
采购明细
<text>/包含计划内商品的订单</text>
</view>
<view v-if="month_order_list !== null">
<view class="pro_item" v-for="(item, index) in month_order_list" :key="index">
<view class="item_top">计划内采购金额：<text>¥{{item.total_price}}</text></view>
<view class="item_content">
<view class="content_item" v-for="(vo, key) in item.child" :key="key" @click="$jumpOrderDetail(vo.order_id)">
<image class="item_img" :src="vo.goods_image || $noGoodsImg"/>
<view>
<view class="item_name">{{vo.goods_name}}</view>
<view class="item_spec" v-if="vo.specification" v-html="vo.specification"></view>
</view>
</view>
</view>
</view>
</view>
<view v-else class="no_data">
<view class="no_title">暂无记录</view>
<view class="no_btn" @click="$jump('/pages/monthly/monthly',2)">前往专区</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
month_apply_info: [],
month_order_list: []
}
},
onLoad(options) {
let month_apply_id = options.month_apply_id;
uni.request({
url: '/uni/api/month/GetMyMonthApply',
method: 'POST',
data: {
month_apply_id: month_apply_id
},
dataType: 'json',
success: (res) => {
if(res.data.code === 0) {
this.month_apply_info = res.data.data.month_apply_info[0];
res.data.data.month_order_list !== null && res.data.data.month_order_list.map((item, index) => {
item.child.map((vo, key) => {
if(!vo.specification) return
vo.specification = vo.specification.replace(/src/, 'style="width:18px;height:18px;vertical-align:middle;" src');
});
});
this.month_order_list = res.data.data.month_order_list;
} else {
uni.showModal({
title: '提示',
content: '当前没有可履行的合同',
success: () => {
this.$jump('/pages/monthly/monthly',2);
}
})
}
}
})
}
}
</script>
<style lang="scss" scoped>
.main {
.top_bar {
display: flex;
justify-content: space-between;
align-items: center;
height: 80rpx;
padding: 0 20rpx;
.left {
display: flex;
align-items: center;
color: #7c7c7c;
.left_icon {
font-weight: 900;
margin-right: 10rpx;
color: #000;
font-size: 40rpx;
}
.close_title {
font-size: 28rpx;
color: #212121;
margin-left: 10rpx;
}
}
.middle {
text-align: center;
color: #000;
font-size: 32rpx;
line-height: 44rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.my_contract {
color: #000;
font-size: 26rpx;
line-height: 36rpx;
}
}
.plan_info {
background:linear-gradient(135deg,rgba(255,232,199,1) 0%,rgba(214,163,93,1) 100%);
overflow: hidden;
.info_title {
text-align: center;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color: rgba(0,0,0,0.6);
margin-top: 40rpx;
}
.info_amount {
text-align: center;
font-size: 64rpx;
color: #000;
height: 90rpx;
line-height: 90rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
}
.wait {
width: 340rpx;
height: 64rpx;
line-height: 64rpx;
text-align: center;
border-radius: 32rpx;
background-color: rgba(0,0,0,0.5);
color: #fff;
font-size: 28rpx;
margin: 24rpx auto 0;
}
.info_detail {
width: 710rpx;
height: 160rpx;
margin: 24rpx auto 0;
border-radius:32rpx 32rpx 12rpx 12rpx;
background:linear-gradient(180deg,rgba(51,51,51,1) 0%,rgba(48,47,53,1) 100%);
box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.1);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 36rpx;
box-sizing: border-box;
.line {
width: 2rpx;
height: 40rpx;
background-color: #000;
}
.detail_item {
text-align: center;
min-width: 180rpx;
.title1 {
color: #FCE3C1;
font-size: 36rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
height: 50rpx;
line-height: 50rpx;
}
.title2 {
margin-top: 8rpx;
color: rgba(253,228,194,0.5);
font-size: 26rpx;
line-height: 36rpx;
height: 36rpx;
}
}
}
}
.mid_card {
width: 702rpx;
height: 120rpx;
margin: 30rpx auto 40rpx;
border-radius: 16rpx;
overflow: hidden;
display: flex;
.mid_left {
background:linear-gradient(135deg,rgba(47,46,51,1) 0%,rgba(69,75,93,1) 100%);
width: 422rpx;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 40rpx;
.text1 {
font-size: 32rpx;
color: #FDE4C2;
height: 44rpx;
line-height: 44rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.text2 {
font-size: 22rpx;
color:rgba(253,228,194,0.6);
height: 32rpx;
line-height: 32rpx;
letter-spacing: 2rpx;
margin-top: 4rpx;
}
}
.mid_right {
width: 240rpx;
height: 100%;
background-color: #EFD5A2;
display: flex;
flex-direction: column;
justify-content: center;
.text1 {
color: #2F2E33;
font-size: 32rpx;
height: 44rpx;
line-height: 44rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
margin: -6rpx 0 6rpx 78rpx;
}
.text2 {
width: 120rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
background-color: #3B3E4A;
border-radius: 20rpx;
font-size: 24rpx;
color: #fff;
margin-left: 82rpx;
}
}
}
.pro_title {
font-size: 36rpx;
height: 50rpx;
line-height: 50rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
padding-left: 24rpx;
margin-bottom: 24rpx;
text {
margin-left: 16rpx;
color: #959595;
font-size: 28rpx;
font-weight: initial;
}
}
.pro_item {
width: 702rpx;
margin: 0 auto 34rpx;
.item_top {
width: 392rpx;
height: 60rpx;
line-height: 60rpx;
background-color: #FAE0BB;
border-radius:16rpx 80rpx 0px 0px;
color: #2F2E33;
font-size: 26rpx;
line-height: 60rpx;
padding-left: 20rpx;
text {
font-size: 32rpx;
font-weight: 500;
}
}
.item_content {
background-color: #fff;
padding: 24rpx 24rpx 0;
box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.05);
border-radius:20rpx;
.content_item {
padding-bottom: 24rpx;
display: flex;
.item_img {
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
margin-right: 24rpx;
}
.item_name {
color: #212121;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
margin-bottom: 8rpx;
}
.item_spec {
height: 36rpx;
line-height: 36rpx;
border-radius: 16rpx;
background-color: #F5F5F5;
padding: 0 16rpx;
color: #7C7C7C;
font-size: 22rpx;
}
}
}
}
.no_data {
margin-top: 120rpx;
.no_title {
color: #959595;
font-size: 30rpx;
height: 42rpx;
line-height: 42rpx;
text-align: center;
}
.no_btn {
width: 180rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
border-radius: 10rpx;
background-color: #E2B77C;
font-size: 26rpx;
color: #302F35;
margin: 40rpx auto 0;
}
}
}
</style>
pages/search/search.vue
View file @ e6828b2e
......@@ -63,7 +63,7 @@
</view>
<view v-if="!isLogin" class="unlogin_price">登录显示价格</view>
<!-- <view class="old-price"><text class="price-tips">￥</text>30.00</view> -->
<image class="cart-icon" @click="addCart(item._source.default_spec, 1)" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/credit_shop/global/icon_gouwuche%402x.png"></image>
<text class="cart-icon eosfont" @click="addCart(item._source.default_spec, 1)">&#xe74a;</text>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
......@@ -458,10 +458,9 @@
}
.cart-icon{
position: absolute;
width: 64rpx;
height: 64rpx;
right: 24rpx;
bottom: 52rpx;
bottom: 72rpx;
color: #7C7C7C;
}
}
}
......
pages/web/web.vue
View file @ e6828b2e
<template>
<view>
<TopBar title="分期合同"/>
<TopBar title="我的合同"/>
<web-view :src="url"></web-view>
</view>
</template>
......
pages/wxpay/wxpay.vue
View file @ e6828b2e
......@@ -5,7 +5,7 @@
<view class="title">微信支付</view>
</view>
<view class="sub-title">
谛宝多多分期定金订单-{{order_id}}
谛宝多多订单-{{order_id}}
</view>
<view class="price">
￥{{amount}}
......@@ -25,14 +25,16 @@
return {
loading: false,
amount: '',
order_id: ''
order_id: '',
type: '' // monthly:连续包月
}
},
onLoad(){
onLoad(options){
const { href } = location;
const { amount, order_id, code } = parse(href.split('?')[1]);
this.amount = amount;
this.order_id = order_id;
this.type = uni.getStorageSync('monthly') || '';
},
methods: {
handleSumit(){
......@@ -46,8 +48,14 @@
return;
}
this.loading = true;
let url = '';
if(this.type === 'monthly') {
url = '/uni/api/month_repayment/GoPay'
} else {
url = '/uni/api/repayment/GoPay';
}
uni.request({
url: `/uni/api/repayment/GoPay`,
url: url,
method: 'post',
dataType: 'json',
data: {
......@@ -91,6 +99,7 @@
WeixinJSBridge.log(res.err_msg);
const url = window.location.origin;
if (res.err_msg === "get_brand_wcpay_request:ok") {
uni.removeStorageSync('monthly');
uni.navigateTo({
url: '/pages/payresult/payresult'
})
......
pages/yuepay/yuepay.vue
View file @ e6828b2e
......@@ -42,14 +42,16 @@
order_id: '',
password: '',
loading: false,
phone_mob: ''
phone_mob: '',
type: '' // monthly:连续包月
}
},
onLoad(option){
const {amount, money, order_id} = option;
const {amount, money, order_id,type} = option;
this.money = money || '0.00';
this.order_price = amount || '0.00';
this.order_id = order_id || '';
this.type = type || '';
uni.request({
url: '/uni/api/member/profile',
method: 'GET',
......@@ -62,8 +64,14 @@
methods: {
handleSumit(){
this.loading = true;
let url = '';
if(this.type === 'monthly') {
url = '/uni/api/month_repayment/GoPay'
} else {
url = '/uni/api/repayment/GoPay'
}
uni.request({
url: `/uni/api/repayment/GoPay`,
url: url,
method: 'post',
dataType: 'json',
data: {
......@@ -77,6 +85,10 @@
const {data} = res;
this.loading = false;
if(data.code === 0){
if(this.type === 'monthly') {
this.$jump('/pages/monthly/monthly',2);
return
}
uni.navigateTo({
url: '/pages/payresult/payresult'
})
......
static/iconfont.css
View file @ e6828b2e
@font-face {
font-family: "eosfont";
src: url('https://at.alicdn.com/t/font_1878093_yggdekpesv.eot');
src: url('https://at.alicdn.com/t/font_1878093_yggdekpesv.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_1878093_yggdekpesv.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_1878093_yggdekpesv.woff') format('woff'),
url('https://at.alicdn.com/t/font_1878093_yggdekpesv.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_1878093_yggdekpesv.svg#iconfont') format('svg');
src: url('https://at.alicdn.com/t/font_1878093_3hvt9j2lgso.eot');
src: url('https://at.alicdn.com/t/font_1878093_3hvt9j2lgso.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_1878093_3hvt9j2lgso.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_1878093_3hvt9j2lgso.woff') format('woff'),
url('https://at.alicdn.com/t/font_1878093_3hvt9j2lgso.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_1878093_3hvt9j2lgso.svg#iconfont') format('svg');
}
.eosfont {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment