百富门答题小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

312 lines
5.8 KiB

8 months ago
4 months ago
6 months ago
4 months ago
6 months ago
4 months ago
6 months ago
4 months ago
6 months ago
4 months ago
3 months ago
6 months ago
4 months ago
6 months ago
4 months ago
6 months ago
4 months ago
6 months ago
4 months ago
8 months ago
6 months ago
4 months ago
8 months ago
4 months ago
6 months ago
4 months ago
6 months ago
4 months ago
6 months ago
8 months ago
6 months ago
8 months ago
6 months ago
8 months ago
6 months ago
4 months ago
8 months ago
6 months ago
4 months ago
6 months ago
4 months ago
6 months ago
8 months ago
4 months ago
3 months ago
8 months ago
4 months ago
4 months ago
6 months ago
4 months ago
4 months ago
4 months ago
6 months ago
8 months ago
4 months ago
6 months ago
8 months ago
6 months ago
8 months ago
6 months ago
4 months ago
6 months ago
4 months ago
6 months ago
4 months ago
6 months ago
8 months ago
4 months ago
8 months ago
  1. <template>
  2. <view class="page">
  3. <image :src="configList.img_13"
  4. class="page-bg"
  5. mode="aspectFill"></image>
  6. <image :src="configList.img_7"
  7. class="logo"
  8. mode="widthFix"></image>
  9. <!-- next1 -->
  10. <view class="content" v-if="question[index]">
  11. <image :src="configList.img_11"
  12. class="content-bg"
  13. mode="scaleToFill"></image>
  14. <view class=""
  15. v-html="$utils.stringFormatHtml(question[index].title)">
  16. </view>
  17. <view class="mian-btn"
  18. v-for="(item, i) in question[index].answerObjectSkuList"
  19. :class="{active : answerIds[index] == item.id}"
  20. :key="i"
  21. @click="select(item)">
  22. {{ item.title }}
  23. </view>
  24. </view>
  25. <!-- next2 -->
  26. <view class="content" v-if="stop == 2">
  27. <text class="font-bold mb-60">请选择您所在的区域</text>
  28. <view class="">
  29. <picker
  30. mode="region"
  31. :value="date"
  32. class="u-w-440"
  33. @change="bindTimeChange">
  34. <view class="region">
  35. <view class="">
  36. {{ address.province}}
  37. </view>
  38. <view class="">
  39. {{ address.city}}
  40. </view>
  41. <view class="">
  42. {{ address.district}}
  43. </view>
  44. </view>
  45. </picker>
  46. </view>
  47. </view>
  48. <view class="an">
  49. <view style="display: flex;gap: 30rpx;"
  50. >
  51. <view class="next-btn-2"
  52. @click="ret">
  53. {{ index > 0 ? '上一题' : '返回' }}
  54. </view>
  55. <view class="next-btn"
  56. @click="next1">
  57. 下一题
  58. </view>
  59. </view>
  60. <!-- <view class="next-btn"
  61. v-if="stop == 1"
  62. @click="next">
  63. 下一题
  64. </view>
  65. <view class="next-btn"
  66. v-if="stop == 2"
  67. @click="next">
  68. 提交
  69. </view> -->
  70. <text class="second-color">{{ configList.bg_title }}</text>
  71. </view>
  72. </view>
  73. </template>
  74. <script>
  75. import { mapState } from 'vuex'
  76. export default {
  77. data() {
  78. return {
  79. isActive : null,
  80. stop : 1,
  81. index : 0,
  82. address : {
  83. province : '',
  84. city : '',
  85. district : '',
  86. },
  87. question : [],
  88. answerIds : [],
  89. }
  90. },
  91. computed : {
  92. ...mapState(['configList']),
  93. },
  94. onLoad() {
  95. this.firstQuestion()
  96. },
  97. onShow() {
  98. },
  99. methods: {
  100. select(item){
  101. this.answerIds.splice(this.index, 1, item.id)
  102. if(item.isEnd != 'Y'){
  103. this.isActive = item.toMainId
  104. }
  105. },
  106. ret(){
  107. if(this.index <= 0){
  108. uni.navigateBack(-1)
  109. return
  110. }
  111. this.index--
  112. this.isActive = null
  113. this.question[this.index]
  114. .answerObjectSkuList.forEach(n => {
  115. if(n.id == this.answerIds[this.index]){
  116. this.isActive = n.toMainId
  117. }
  118. })
  119. },
  120. firstQuestion(){
  121. this.$api('firstQuestion', res => {
  122. if(res.code == 200){
  123. this.question.push(res.result)
  124. }
  125. })
  126. },
  127. next1(){
  128. if(!this.isActive){
  129. uni.showToast({
  130. title:'请选择后进行下一题',
  131. icon: 'none'
  132. })
  133. return
  134. }
  135. let item = null
  136. this.question[this.index]
  137. .answerObjectSkuList.forEach(n => {
  138. if(n.id == this.answerIds[this.index]){
  139. item = n
  140. }
  141. })
  142. if(item.isEnd == 'Y'){
  143. this.$store.commit('getTitleByIds', item.toRuleId)
  144. return
  145. }
  146. this.$api('getProblemById', {
  147. id : this.isActive
  148. }, res => {
  149. if(res.code == 200){
  150. this.index++
  151. this.question.splice(this.index, 1, res.result)
  152. }
  153. })
  154. // this.$api('submitLog', {
  155. // topId : this.probleme[this.index].id,
  156. // context : this.isActive,
  157. // }, res => {
  158. // this.isActive = null
  159. // if(this.index == this.probleme.length - 1){
  160. // this.stop = 2
  161. // }else{
  162. // uni.navigateTo({
  163. // url: '/pages/index/preAppoint'
  164. // })
  165. // }
  166. // })
  167. },
  168. next2(){
  169. // this.stop = 3
  170. if(!this.address.province){
  171. uni.showToast({
  172. title:'请选择地址后进行下一题',
  173. icon: 'none'
  174. })
  175. return
  176. }
  177. uni.redirectTo({
  178. url: '/pages_order/info/fillInfo'
  179. })
  180. },
  181. // 获取省市区
  182. bindTimeChange(e) {
  183. this.address.province = e.detail.value[0];
  184. this.address.city = e.detail.value[1];
  185. this.address.district = e.detail.value[2];
  186. this.address.provinceName = e.detail.value[0] + e.detail.value[1] + e.detail.value[2];
  187. uni.setStorageSync('user_address', JSON.stringify(this.address))
  188. },
  189. }
  190. }
  191. </script>
  192. <style lang="scss" scoped>
  193. .page{
  194. .logo{
  195. width: 600rpx;
  196. margin: 150rpx 75rpx;
  197. }
  198. .content{
  199. position: relative;
  200. display: flex;
  201. flex-direction: column;
  202. align-items: center;
  203. justify-content: center;
  204. box-sizing: border-box;
  205. padding: 0 60rpx;
  206. text-align: center;
  207. width: 700rpx;
  208. height: 650rpx;
  209. margin: 0 25rpx;
  210. .content-bg{
  211. height: 100%;
  212. width: 100%;
  213. position: absolute;
  214. top: 0;
  215. left: 0;
  216. z-index: -1;
  217. }
  218. }
  219. }
  220. .region{
  221. display: flex;
  222. align-items: center;
  223. &>view{
  224. width: 140rpx;
  225. height: 50rpx;
  226. border-radius: 10rpx;
  227. border: 1px solid #e6bf7f;
  228. margin: 0 10rpx;
  229. line-height: 50rpx;
  230. text-align: center;
  231. }
  232. }
  233. .b-btn{
  234. width: 86%;
  235. display: flex;
  236. justify-content: center;
  237. padding-top: 130rpx;
  238. .pre-btn{
  239. border: 4rpx solid #f1e0c6;
  240. padding: 16rpx 90rpx;
  241. border-radius: 66rpx;
  242. color: #e6bf7f;
  243. }
  244. }
  245. .next-btn{
  246. width: 120rpx;
  247. display: flex;
  248. align-items: center;
  249. justify-content: center;
  250. color: white;
  251. padding: 16rpx 90rpx;
  252. background-color: $uni-color;
  253. border-radius: 30rpx;
  254. }
  255. .next-btn-2{
  256. width: 120rpx;
  257. display: flex;
  258. align-items: center;
  259. justify-content: center;
  260. color: white;
  261. padding: 16rpx 90rpx;
  262. background-color: $uni-color-primary;
  263. border-radius: 30rpx;
  264. }
  265. .an{
  266. position: fixed;
  267. bottom: 300rpx;
  268. text-align: center;
  269. display: flex;
  270. flex-direction: column;
  271. align-items: center;
  272. justify-content: center;
  273. width: 100%;
  274. }
  275. .second-color{
  276. margin-top: 20rpx;
  277. }
  278. </style>